/* Solvara ERP design system — component layer.
   Design tokens live in two places kept in sync:
     - Tailwind config in templates/base.html  (utility classes: bg-navy-950, font-display…)
     - the CSS variables below                 (the component classes in this file)
   Templates use Tailwind utilities for layout and these classes for the brand motifs
   (ledger rules, KPI cards, panels, badges, buttons, the dark sidebar, table headers). */

:root {
  --navy-950: #0A1830;
  --navy-900: #0F2140;
  --navy-800: #14294A;
  --navy-700: #1B3358;
  --navy-600: #2C4A76;
  --cobalt-500: #2E5AA8;
  --cobalt-600: #274E93;
  --brass-500: #B8863B;
  --brass-400: #C9A05C;
  --paper-50: #F5F6F8;
  --paper-100: #EDEFF3;
  --ink-900: #101826;
  --steel-500: #64748B;
  --steel-300: #A7B0BD;
  --success-600: #2F855A;
  --success-bg: #E6F1EC;
  --danger-600: #B34242;
  --danger-bg: #F6E9E9;
  --warn-bg: #FBF1E4;
  --edge: #DCE1E8;

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --brand: var(--cobalt-500); /* legacy alias */
}

::selection { background: var(--brass-400); color: var(--navy-950); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cobalt-500);
  outline-offset: 2px;
}

/* ---------- Ledger rule (the signature accent under every page title) ---------- */
.ledger-rule { height: 3px; background: var(--brass-500); border-radius: 2px; }
.ledger-rule-sub { height: 1px; background: var(--navy-600); opacity: 0.35; margin-top: 1.5px; }

/* ---------- KPI cards ---------- */
.kpi-card { background: #fff; border: 1px solid var(--edge); border-radius: 10px; padding: 18px 20px; }
.kpi-label { font-size: 12px; color: var(--steel-500); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.kpi-value .unit { font-family: var(--font-mono); font-size: 15px; color: var(--steel-500); font-weight: 500; }
.kpi-delta { font-family: var(--font-mono); font-size: 12px; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; }
.kpi-delta.up { color: var(--success-600); background: var(--success-bg); }
.kpi-delta.down { color: var(--danger-600); background: var(--danger-bg); }
.kpi-delta.flat { color: var(--steel-500); background: var(--paper-100); }

/* ---------- Panels ---------- */
.panel { background: #fff; border: 1px solid var(--edge); border-radius: 10px; padding: 20px 22px; }
.panel-title { font-size: 15px; font-weight: 600; margin: 0 0 2px; color: var(--ink-900); }
.panel-sub { font-size: 12px; color: var(--steel-500); margin: 0 0 16px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.badge-ok { background: var(--success-bg); color: var(--success-600); }
.badge-warn { background: var(--warn-bg); color: var(--brass-500); }
.badge-bad { background: var(--danger-bg); color: var(--danger-600); }
.badge-neutral { background: var(--paper-100); color: var(--steel-500); }
.badge-info { background: rgba(46, 90, 168, 0.10); color: var(--cobalt-600); }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--navy-950); color: #fff; border: 1px solid var(--navy-950);
  padding: 9px 16px; border-radius: 7px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: #fff; color: var(--ink-900); border: 1px solid var(--edge);
  padding: 9px 16px; border-radius: 7px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn-secondary:hover { background: var(--paper-100); }
.btn-primary.btn-sm, .btn-secondary.btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ---------- Dark sidebar nav ---------- */
.snav-group { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--steel-300); margin: 16px 10px 8px; }
.snav {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 7px;
  color: var(--steel-300); text-decoration: none; font-size: 14px; cursor: pointer;
  border: none; background: transparent; width: 100%; text-align: left;
}
.snav:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.snav.active { background: var(--navy-800); color: #fff; box-shadow: inset 3px 0 0 var(--brass-500); }
.snav.disabled { color: rgba(167, 176, 189, 0.45); cursor: not-allowed; }

/* ---------- Tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--steel-500); font-weight: 600; padding: 0 12px 10px; border-bottom: 2px solid var(--brass-500);
}
table.tbl thead th.num { text-align: right; }
table.tbl tbody td { padding: 12px; border-bottom: 1px solid var(--paper-100); font-size: 13.5px; vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--paper-50); }
table.tbl td.num, table.tbl .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.tbl td.num { text-align: right; }
table.tbl td.pos { color: var(--success-600); }
table.tbl td.neg { color: var(--danger-600); }

/* Brass-underlined headers for every content table (the "ledger" motif),
   applied globally so the 16 list/detail tables get it without markup changes.
   `table.tbl` (dashboard/admin) already sets this; the rule is identical there. */
main table thead th { border-bottom: 2px solid var(--brass-500); }

/* ---------- Auth split screen ---------- */
.auth-split { display: flex; min-height: 100vh; }
.auth-story {
  flex: 1.1; background: var(--navy-950); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 60px 72px; position: relative;
}
.auth-headline { font-family: var(--font-display); font-size: 34px; line-height: 1.25; font-weight: 600; max-width: 420px; }
.auth-story-sub { color: var(--steel-300); font-size: 14px; margin-top: 14px; max-width: 380px; line-height: 1.6; }
.auth-form-col { flex: 1; background: var(--paper-50); display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
@media (max-width: 860px) { .auth-story { display: none; } }