/* theme.css — app overrides on top of Gentelella v4 (gentelella.css).
   Gentelella already defines the full design-token set in its :root — the dark navy sidebar,
   the teal accent, light body, radii and shadows. That IS the Gentelella look, so we inherit it
   and change only:

     1. The brand accent, via Gentelella's OWN token names (so it applies consistently to the
        sidebar active state, buttons, links and focus rings).
     2. Two compatibility aliases that gentelella-adapter.css expects but Gentelella spells
        differently (--surface -> --bg-surface, --bg-subtle -> --bg-surface-secondary).
     3. A "visual polish" layer (bottom of this file): page header layout, softer cards, calmer
        tables, sidebar active marker, focus rings — all written against the tokens.

   IMPORTANT: never override --sidebar-bg to a light colour. The sidebar text tokens
   (--sidebar-text, --sidebar-text-hover, …) are tuned for the dark sidebar and become
   unreadable on white — that was the previous breakage. */
:root {
  /* ── Brand accent (uses Gentelella's real token names) ───────────────── */
  --primary:        #2f9e83;   /* app teal-green */
  --primary-dk:     #27876f;
  --primary-lt:     #2f9e831a;  /* ~10% tint, mirrors Gentelella's --primary-lt */
  --sidebar-active: #2f9e8324;  /* active nav highlight on the dark sidebar */

  /* ── Compatibility aliases for gentelella-adapter.css ────────────────── */
  --surface:   var(--bg-surface);
  --bg-subtle: var(--bg-surface-secondary);
}

/* ════════════════════════════════════════════════════════════════════════
   Visual polish — softer surfaces, clearer hierarchy, calmer tables.
   Everything below is written against the theme tokens (--text, --border-color, --primary, …)
   so the dark theme ([data-theme=dark] in gentelella.css) picks it up automatically.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Slightly rounder corners and a softer, two-layer shadow than Gentelella's defaults — the
     single flat 2px shadow made cards look pasted onto the page rather than resting on it. */
  --radius-lg: 12px;
  --radius:    8px;
  --shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}

/* ── Page navigation: no cross-fade ──────────────────────────────────────
   gentelella.css opts every page into the browser's cross-document View Transition
   (@view-transition { navigation: auto }), a short fade between pages. When a navigation is
   interrupted (a redirect, a second click, an error page) Chrome aborts the fade and logs
   "Uncaught (in promise) InvalidStateError: Transition was aborted" in the console. Opting out here
   (theme.css loads after gentelella.css) removes the fade and that noise; pages simply swap. */
@view-transition { navigation: none; }

/* ── Page header ─────────────────────────────────────────────────────────
   Every view renders <div class="page-header"><div>pretitle + title</div><div>buttons</div></div>.
   Gentelella's .page-header is only a margin, so the buttons dropped BELOW the title; a flex row
   puts them on the right where page actions are expected, wrapping under it on narrow screens. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 20px;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.page-pretitle { color: var(--primary); }

/* ── Cards ───────────────────────────────────────────────────────────────
   A lighter border lets the shadow do the separating. (No overflow clipping here on purpose — it
   would cut off a wide table or an open dropdown inside the card.) */
.card { border-color: var(--border-color-light); }

/* ── Alerts ──────────────────────────────────────────────────────────────
   A coloured left rule makes a flash message ("Record created.") read as a notice at a glance. */
.alert { border-left-width: 4px; }
.alert-success { border-left-color: var(--primary); }
.alert-danger  { border-left-color: var(--red); }
.alert-warning { border-left-color: var(--yellow); }
.alert-info    { border-left-color: var(--azure); }
/* The alert colours in gentelella-adapter.css are fixed light tints, which glared as pale boxes on
   the dark theme. There, tint the dark surface with the alert's hue instead. */
[data-theme=dark] .alert-success { background: color-mix(in srgb, var(--primary) 14%, var(--bg-surface)); color: #8fd9c4; border-color: transparent; border-left-color: var(--primary); }
[data-theme=dark] .alert-danger  { background: color-mix(in srgb, var(--red) 14%, var(--bg-surface));     color: #f3a7a7; border-color: transparent; border-left-color: var(--red); }
[data-theme=dark] .alert-warning { background: color-mix(in srgb, var(--yellow) 14%, var(--bg-surface));  color: #f5cf85; border-color: transparent; border-left-color: var(--yellow); }
[data-theme=dark] .alert-info    { background: color-mix(in srgb, var(--azure) 14%, var(--bg-surface));   color: #9ccbf0; border-color: transparent; border-left-color: var(--azure); }

/* ── Tables ──────────────────────────────────────────────────────────────
   Body text in full --text colour (Gentelella's grey --text-secondary was hard to read on white),
   roomier rows than .table-sm's .35rem, a quieter header, and a primary-tinted row hover so the
   row under the pointer is easy to follow across a wide table. */
table.table td {
  color: var(--text);
  font-size: 13.5px;
}
table.table.table-sm th,
table.table.table-sm td {
  padding: .6rem .85rem;
}
table.table th {
  font-size: 11px;
  letter-spacing: .5px;
  white-space: nowrap;
}
table.table tbody tr:hover { background: var(--primary-lt); }

/* DataTables toolbar: the table already sits in a card, so no second frame is needed — just
   consistent spacing above the header row and below the pager.
   The side gap is a MARGIN, not padding, on purpose: DataTables Responsive decides how many columns
   fit by reading the container's offsetWidth, which counts padding but not margin. With side
   padding it believed it had 2.5rem more room than the table really did, kept one column too many,
   and the table ran past the card edge. */
div.dt-container { padding: 1rem 0 .5rem; margin: 0 1.25rem; }
div.dt-container > .row:last-child { padding-bottom: .5rem; }
div.dt-container .dt-info { padding-top: .25rem; }
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   A touch of lift on the primary action, and smaller, quieter buttons inside table rows so a
   row of Edit / View / Delete doesn't outweigh the data beside it. */
.btn-primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn-primary:hover { color: #fff; }
.table-actions .btn-sm {
  height: 26px;
  padding: 0 9px;
  font-size: 12px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────
   A small accent bar on the active item — the tinted background alone was barely visible on the
   dark sidebar. Section labels get a little more contrast so the groups read as groups. */
.sidebar .nav-link { position: relative; }
.sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.sidebar .nav-link.active .icon { color: var(--primary); opacity: 1; }
.nav-label { color: #7b8fa3b3; letter-spacing: .8px; }

/* ── Forms ───────────────────────────────────────────────────────────────
   A visible focus ring on inputs (Gentelella only recolours the border). */
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
}