/* ==== AUTOKODA HOUSE OVERLAY (autokoda-style plugin) ==== */
/* Single design-token + component overlay on Tabler (Bootstrap 5.3). Remaps
   BOTH --bs-* and --tblr-* primaries (and the semantic ramp) so compiled tabler
   chrome adopts the AutoKoda cobalt brand. Served by the `autokoda-style` plugin
   via `headers`, which Saltcorn emits AFTER the theme stylesheet in <head> — so
   at equal specificity this file wins. That load order is the load-bearing
   assumption: most of this file is :root custom properties, so if it ever loaded
   BEFORE Tabler, Tabler would redefine --tblr-primary after us and the brand
   would silently vanish. test/run-tests.js pins the contract; DEVELOPER.md
   §"Load order" documents how to re-verify.
   BRAND: cobalt #1d4ed8 + Inter, per _intake/designs/design_handoff_autokoda_erp
   (design-tokens.css). Canonical primary is #1d4ed8 (the tokens file's #2f6bd8
   is resolved to #1d4ed8 per docs/DESIGN-HANDOFF-ASSESSMENT-2026-07-23.md).
   5 inviolable rules honored: no overflow:hidden, navbar z-index:1030, no
   transforms on cards, always pair bg+fg, dark <select> fix.
   REBRANDING: swap the --ak-* tokens below; see DEVELOPER.md §"Rebranding". */
:root {
  /* brand tokens */
  --ak-primary: #1d4ed8;
  --ak-primary-hover: #1740b0;
  --ak-primary-rgb: 29,78,216;
  --ak-primary-tint: #eaf0fe;   /* active nav bg, bar-chart track */

  /* ink / text */
  --ak-ink: #182135;
  --ak-text: #182135;
  --ak-text-muted: #6b7486;
  --ak-text-faint: #99a1b0;      /* table labels, meta */

  /* surfaces & borders */
  --ak-card: #ffffff;
  --ak-surface: #ffffff;
  --ak-bg: #f5f6f8;              /* default page grey */
  --ak-bg-white: #ffffff;
  --ak-border: #e7e9ee;          /* cards, controls */
  --ak-border-faint: #eef0f3;    /* section dividers */
  --ak-row-line: #f2f3f6;        /* table row separators */
  --ak-subtle: #fafbfc;          /* table header + row hover */

  /* dark sidebar (design's dark chrome; also feeds dark-mode surfaces below) */
  --ak-dark-bg: #141b2b;
  --ak-dark-border: #232c40;
  --ak-dark-text: #9aa3b7;
  --ak-dark-text-sub: #6b7590;

  /* semantic (solid / soft pairs) */
  --ak-success: #1a935a;  --ak-success-soft: #e7f6ee;
  --ak-success-rgb: 26,147,90;
  --ak-warning: #c76a15;  --ak-warning-soft: #fff2e2;
  --ak-warning-rgb: 199,106,21;
  --ak-danger:  #d1435b;  --ak-danger-soft:  #fdeef0;
  --ak-danger-rgb: 209,67,91;

  /* secondary accents (KPI tiles, charts, badges) */
  --ak-purple: #8459e6;  --ak-purple-2: #7c4ddb;  --ak-purple-soft: #f3eefe;
  --ak-teal: #0ea5a5;
  --ak-amber: #f5a524;
  --ak-neutral-soft: #eef0f3;  --ak-neutral-fg: #5b6472;

  /* radius */
  --ak-radius-card: 12px;
  --ak-radius-ctrl: 9px;         /* buttons, inputs */
  --ak-radius-item: 8px;         /* nav items, small boxes */
  --ak-radius-pill: 20px;        /* badges */
  --ak-radius: var(--ak-radius-card);
  --ak-radius-sm: var(--ak-radius-ctrl);
  --ak-cell-pad: .65rem;

  /* elevation — cards are FLAT (border-only) per the design; shadow is reserved
     for floating layers (dropdowns, modals) that need it for usability. */
  --ak-shadow: 0 1px 2px rgba(24,33,53,.05);
  --ak-shadow-lg: 0 12px 32px -8px rgba(24,33,53,.18);

  /* typography — Inter for the ERP (Tabler default; the tokens file also names
     Archivo for the marketing display face, not used in the admin). */
  --ak-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Bootstrap 5.3 mappings ---- */
  --bs-primary: var(--ak-primary);         --bs-primary-rgb: var(--ak-primary-rgb);
  --bs-body-bg: var(--ak-bg);              --bs-body-color: var(--ak-text);
  --bs-secondary-bg: var(--ak-bg);         --bs-border-color: var(--ak-border);
  --bs-link-color: var(--ak-primary);      --bs-link-hover-color: var(--ak-primary-hover);
  --bs-card-bg: var(--ak-surface);         --bs-card-border-color: var(--ak-border);
  --bs-success: var(--ak-success);         --bs-success-rgb: var(--ak-success-rgb);
  --bs-warning: var(--ak-warning);         --bs-warning-rgb: var(--ak-warning-rgb);
  --bs-danger: var(--ak-danger);           --bs-danger-rgb: var(--ak-danger-rgb);
  --bs-body-font-family: var(--ak-font);

  /* ---- Tabler mappings (compiled .btn-primary/.bg-primary/.text-primary read --tblr-*) ---- */
  --tblr-primary: var(--ak-primary);       --tblr-primary-rgb: var(--ak-primary-rgb);
  --tblr-body-bg: var(--ak-bg);            --tblr-body-color: var(--ak-text);
  --tblr-border-color: var(--ak-border);   --tblr-link-color: var(--ak-primary);
  --tblr-success: var(--ak-success);       --tblr-success-rgb: var(--ak-success-rgb);
  --tblr-warning: var(--ak-warning);       --tblr-warning-rgb: var(--ak-warning-rgb);
  --tblr-danger: var(--ak-danger);         --tblr-danger-rgb: var(--ak-danger-rgb);
  --tblr-font-sans-serif: var(--ak-font);
}

/* Cards — flat: 1px brand border, ~12px radius, no shadow (design is border-only) */
.card { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-card);
  box-shadow: none; background: var(--ak-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--ak-border);
  font-weight: 600; padding: .9rem 1.25rem; color: var(--ak-text); }

/* Buttons */
.btn { border-radius: var(--ak-radius-ctrl); font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--ak-primary); --bs-btn-border-color: var(--ak-primary);
  --bs-btn-hover-bg: var(--ak-primary-hover); --bs-btn-hover-border-color: var(--ak-primary-hover);
  --bs-btn-active-bg: var(--ak-primary-hover); --bs-btn-active-border-color: var(--ak-primary-hover);
  --bs-btn-color: #fff;
  --tblr-btn-bg: var(--ak-primary); --tblr-btn-border-color: var(--ak-primary); }

/* Links */
a { color: var(--ak-primary); }
a:hover { color: var(--ak-primary-hover); }

/* Active navigation — leaf gets the cobalt tint pill; group/plain link colors text */
.nav-link.active, .nav-item.active > .nav-link, .navbar .nav-link.active {
  color: var(--ak-primary); font-weight: 600; }
.navbar-vertical .nav-item.active > .nav-link, .navbar-vertical .nav-link.active {
  background-color: var(--ak-primary-tint); border-radius: var(--ak-radius-item); }

/* Tables (Lists) — muted uppercase header, subtle hover */
.table { --bs-table-hover-bg: var(--ak-subtle); }
/* Header cells: match Tabler's OWN `.table thead th` selector (0,1,2). At `.table
   th` (0,1,1) this rule lost to Tabler on specificity and was dead; at equal
   specificity our later-loaded copy wins, so the house header style applies. */
.table thead th { font-size: .69rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ak-text-faint); font-weight: 600; background: var(--ak-subtle);
  border-bottom: 1px solid var(--ak-border); }
.table td { padding-top: var(--ak-cell-pad); padding-bottom: var(--ak-cell-pad);
  vertical-align: middle; border-color: var(--ak-row-line); }

/* Forms (Edits) */
.form-control, .form-select { border-radius: var(--ak-radius-ctrl);
  border-color: var(--ak-border); background-color: var(--ak-surface); color: var(--ak-text); }
.form-control:focus, .form-select:focus { border-color: var(--ak-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ak-primary) 18%, transparent); }
.form-label { font-weight: 500; }

/* Navbar / sidebar — brand surface + mandatory z-index (inviolable rule 2) */
.navbar { position: relative; z-index: 1030; border-bottom: 1px solid var(--ak-border); }
.navbar .nav-link { font-weight: 500; }
.bg-primary { background-color: var(--ak-primary) !important; color: #fff; }

/* Badges as status pills */
.badge { border-radius: var(--ak-radius-pill); font-weight: 600; padding: .35em .8em; }

/* Rich-feel details */
.dropdown-menu { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-ctrl);
  box-shadow: var(--ak-shadow-lg); background-color: var(--ak-surface); color: var(--ak-text); }
.dropdown-item { color: var(--ak-text); }
.dropdown-item:hover { background-color: color-mix(in srgb, var(--ak-primary) 8%, transparent);
  color: var(--ak-text); }
.modal-content { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-card);
  box-shadow: var(--ak-shadow-lg); }
.page-link { border-radius: var(--ak-radius-item); }
::selection { background: color-mix(in srgb, var(--ak-primary) 25%, transparent); }

/* ---- KPI cards (.ak-kpi*): scaffold dashboards emit these class names; author
   the full icon-tile + label + value + colored-delta treatment here. ---- */
.ak-kpi { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-card); }
.ak-kpi .card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: .35rem; }
.ak-kpi-icon { width: 34px; height: 34px; border-radius: var(--ak-radius-ctrl);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ak-primary-tint); color: var(--ak-primary); font-size: 1.05rem;
  margin-bottom: .35rem; }
.ak-kpi-label { font-size: .8rem; color: var(--ak-text-muted); font-weight: 500;
  line-height: 1.2; }
.ak-kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ak-ink); }
.ak-kpi-delta { font-size: .78rem; font-weight: 600; color: var(--ak-text-muted);
  display: inline-flex; align-items: center; gap: .25rem; }
.ak-kpi-delta.up { color: var(--ak-success); }
.ak-kpi-delta.down { color: var(--ak-danger); }
/* colored KPI icon-tile variants (match the design's per-metric accents) */
.ak-kpi-icon.primary { background: var(--ak-primary-tint); color: var(--ak-primary); }
.ak-kpi-icon.purple  { background: var(--ak-purple-soft);  color: var(--ak-purple-2); }
.ak-kpi-icon.teal    { background: color-mix(in srgb, var(--ak-teal) 12%, #fff); color: var(--ak-teal); }
.ak-kpi-icon.danger  { background: var(--ak-danger-soft);  color: var(--ak-danger); }
.ak-kpi-icon.amber   { background: color-mix(in srgb, var(--ak-amber) 16%, #fff); color: #b06a00; }

/* ---- StatusBadge (.status-badge): pill with a bg/fg pair per status ---- */
.status-badge { display: inline-block; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--ak-radius-pill); line-height: 1.4;
  background: var(--ak-neutral-soft); color: var(--ak-neutral-fg); }
.status-badge.primary,
.status-badge.in-progress { background: var(--ak-primary-tint); color: var(--ak-primary); }
.status-badge.success,
.status-badge.ready       { background: var(--ak-success-soft); color: var(--ak-success); }
.status-badge.warning,
.status-badge.awaiting-parts { background: var(--ak-warning-soft); color: var(--ak-warning); }
.status-badge.danger      { background: var(--ak-danger-soft); color: var(--ak-danger); }
.status-badge.purple,
.status-badge.scheduled   { background: var(--ak-purple-soft); color: var(--ak-purple-2); }
.status-badge.neutral,
.status-badge.completed   { background: var(--ak-neutral-soft); color: var(--ak-neutral-fg); }

/* Dark mode (Tabler flips data-bs-theme=dark; overlay supplies tokens). Surfaces
   track the design's dark-sidebar palette so the whole admin reads as one theme;
   the cobalt PRIMARY is unchanged across modes (one brand colour). */
[data-bs-theme="dark"] {
  --ak-bg:#0f1626; --ak-surface:#182131; --ak-card:#182131; --ak-border:#29344a;
  --ak-border-faint:#232c40; --ak-row-line:#232c40; --ak-subtle:#1c2536;
  --ak-text:#e6e9f0; --ak-text-muted:#9aa3b7; --ak-text-faint:#6b7590;
  --bs-body-bg:var(--ak-bg); --bs-body-color:var(--ak-text);
  --bs-secondary-bg:var(--ak-surface); --bs-border-color:var(--ak-border);
  --bs-card-bg:var(--ak-surface); --bs-dropdown-bg:var(--ak-surface);
  /* Tabler's compiled .card paints from --tblr-card-bg (-> --tblr-bg-surface),
     NOT --bs-card-bg, so the line above is inert on Tabler. Remap the Tabler var
     too or dark cards fall back to Tabler's #182433 surface instead of the brand. */
  --tblr-card-bg:var(--ak-surface);
  --bs-dropdown-link-color:var(--ak-text); --bs-table-color:var(--ak-text);
  --bs-table-bg:var(--ak-surface); --bs-modal-bg:var(--ak-surface);
  --tblr-body-bg:var(--ak-bg); --tblr-body-color:var(--ak-text);
  --tblr-border-color:var(--ak-border);
}
[data-bs-theme="dark"] .ak-kpi-icon.primary { background: color-mix(in srgb, var(--ak-primary) 22%, transparent); }
[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] select.form-select option {
  background-color: var(--ak-surface); color: var(--ak-text); }
/* ==== END AUTOKODA HOUSE OVERLAY ==== */
