/* 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 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. */
div.dt-container { padding: 1rem 1.25rem .5rem; }
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);
}