/* ============================================================================
 * autokoda-erp.css — the AutoKoda ERP theme stylesheet.
 *
 * Layered ON TOP of the vendored Tabler (Bootstrap 5.3) dist that this same
 * plugin serves, in this order (see index.js `wrapIt`):
 *     fontawesome.min.css -> tabler[.rtl].min.css -> THIS FILE
 *     -> <style> config-derived token overrides -> headersInHead(plugin headers)
 * At equal specificity the LAST declaration wins, so this file may restyle
 * Tabler, and a later `headers` plugin (e.g. autokoda-style) may still restyle
 * us. That order is deliberate — do not invert it.
 *
 * SOURCE OF TRUTH for every value below:
 *   _intake/designs/design_handoff_autokoda_erp/design-tokens.css   (canonical)
 *   _intake/designs/design_handoff_autokoda_erp/README.md           (screen specs)
 * Where the two disagree (primary #1d4ed8 vs #2f6bd8, Inter vs IBM Plex Sans,
 * amber #f5a524 vs #e0a90f) the TOKENS FILE wins — that is the resolution
 * recorded in docs/DESIGN-HANDOFF-ASSESSMENT-2026-07-23.md.
 *
 * SCOPING RULE (load-bearing): every layout rule here is scoped to a Tabler
 * chrome class (`#page`, `.page-wrapper`, `.navbar`, `.card`, `.table`, `.btn`,
 * …). Nothing keys off bare element selectors beyond `:root`/`body` typography.
 * This is what lets an SSG-published `/cms/*` page — which renders with NO theme
 * chrome and brings its own `.cms-*` header/nav/footer inside <body> — keep
 * looking like itself. See SALTCORN-GOTCHAS #85.
 * ========================================================================= */

/* ---------------------------------------------------------------- fonts --
 * IBM Plex Sans (body) + Archivo (display) are VENDORED as variable-weight
 * woff2 under public/fonts/ — no Google Fonts, no CDN (our apps run
 * offline/intranet). Two subsets each: latin + latin-ext.
 * The url()s are relative to THIS file, so they follow the version-stamped
 * /plugins/public/autokoda-erp-theme@<version>/ path automatically. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;   /* login H1 + wordmark use 800; variable font clamps to its max if the subset caps lower */
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;   /* see note above */
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================== design tokens ==
 * A 1:1 transcription of design-tokens.css. Anything the operator can change
 * from Settings -> Modules -> autokoda-erp-theme -> Configure is REDECLARED
 * inline by index.js AFTER this file, so these are the defaults. */
:root {
  /* Brand / accent */
  --ak-primary:        #1d4ed8;
  --ak-primary-rgb:    29, 78, 216;
  --ak-primary-tint:   #eaf0fe;   /* active nav bg, bar-chart track */
  --ak-primary-hover:  #1740b0;   /* link hover */

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

  /* Surfaces & borders */
  --ak-bg-grey:        #f5f6f8;   /* default page bg (tweakable) */
  --ak-bg-white:       #ffffff;   /* alt page bg (tweakable) */
  --ak-page-bg:        var(--ak-bg-grey);  /* resolved by the `main_background` config */
  --ak-card:           #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 */
  --ak-dark-bg:        #141b2b;
  --ak-dark-border:    #232c40;
  --ak-dark-text:      #9aa3b7;
  --ak-dark-text-sub:  #6b7590;

  /* Semantic */
  --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;

  /* Typography */
  --ak-font-display:   'Archivo', system-ui, sans-serif;
  --ak-font:           'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --ak-fs-page-title:  22px;
  --ak-fs-kpi-value:   27px;
  --ak-fs-card-title:  15px;
  --ak-fs-body:        14px;
  --ak-fs-sm:          13px;
  --ak-fs-meta:        12px;
  --ak-fs-label:       11px;

  /* Spacing */
  --ak-pad-content:    26px;
  --ak-pad-card:       20px;
  --ak-gap-grid:       16px;
  --ak-pad-nav-item:   10px 12px;

  /* Radius */
  --ak-radius-card:    12px;
  --ak-radius-ctrl:     9px;   /* buttons, inputs */
  --ak-radius-item:     8px;   /* nav items, small boxes */
  --ak-radius-pill:    20px;   /* badges */

  /* Layout */
  --ak-sidebar-w:      250px;
  --ak-topbar-h:       64px;
  --ak-content-max:    1320px;

  /* Density — table row padding. The body class ak-density-* picks one. */
  --ak-row-pad-y:      20px;
  --ak-row-pad-x:      20px;

  /* Shadow — app cards are FLAT (border only). The only shadows are floating
     layers: the mobile drawer, dropdowns and modals. */
  --ak-shadow-drawer:  0 20px 50px -12px rgba(20, 27, 43, 0.4);
  --ak-shadow-pop:     0 12px 32px -8px rgba(20, 27, 43, 0.18);
  --ak-backdrop:       rgba(20, 27, 43, 0.45);

  /* ---- Bootstrap 5.3 mappings (Tabler v1.0.0-beta21 compiles to --bs-*) ---- */
  --bs-primary:        var(--ak-primary);
  --bs-primary-rgb:    var(--ak-primary-rgb);
  --bs-body-bg:        var(--ak-page-bg);
  --bs-body-color:     var(--ak-text);
  --bs-secondary-color: var(--ak-text-muted);
  --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-card);
  --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);
  --bs-body-font-size: var(--ak-fs-body);
  --bs-border-radius:  var(--ak-radius-ctrl);

  /* ---- Tabler mappings. Older Tabler builds compile .btn-primary/.bg-primary
       from --tblr-*; the pinned 0.6.2 dist uses --bs-*. Declare both so the
       theme survives a Tabler dist refresh without a silent debrand. ---- */
  --tblr-primary:      var(--ak-primary);   --tblr-primary-rgb: var(--ak-primary-rgb);
  --tblr-body-bg:      var(--ak-page-bg);   --tblr-body-color:  var(--ak-text);
  --tblr-border-color: var(--ak-border);    --tblr-link-color:  var(--ak-primary);
  --tblr-card-bg:      var(--ak-card);
  --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);
}

/* Density variants — the design changes ONLY the vertical row padding. */
body.ak-density-spacious    { --ak-row-pad-y: 20px; }
body.ak-density-comfortable { --ak-row-pad-y: 13px; }
body.ak-density-compact     { --ak-row-pad-y:  7px; }

/* Page background variants (`main_background`). */
body.ak-bg-grey  { --ak-page-bg: var(--ak-bg-grey); }
body.ak-bg-white { --ak-page-bg: var(--ak-bg-white); }

/* ================================================================= base ==== */
body {
  font-family: var(--ak-font);
  font-size: var(--ak-fs-body);
  color: var(--ak-text);
  background-color: var(--ak-page-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ak-primary); }
a:hover { color: var(--ak-primary-hover); }

/* Display face for headings + big numbers (design: Archivo, -0.02em tracking). */
h1, h2, h3, .page-title, .ak-kpi-value, .navbar-brand {
  font-family: var(--ak-font-display);
  letter-spacing: -0.02em;
  color: var(--ak-text);
}
.page-title { font-size: var(--ak-fs-page-title); font-weight: 700; }
.page-pretitle, .text-muted, .text-secondary { color: var(--ak-text-muted) !important; }

/* ============================================================ page shell ==
 * `#page` / `.page-wrapper` / `#page-inner-content` are emitted by wrap().
 * Content pad 26px, max-width 1320px (unless fluid / requestFluidLayout). */
#page-inner-content {
  padding: var(--ak-pad-content);
  max-width: var(--ak-content-max);
}
body.layout-fluid #page-inner-content { max-width: none; }
@media (max-width: 575.98px) {
  #page-inner-content { padding: 16px; }
}
/* A CMS-published marketing page (SSG) is FULL-BLEED: its own .aksite / .cms-* sections
 * paint edge-to-edge backgrounds, so the theme's content container must add NO padding or
 * max-width around them. Scoped to the published-static body class (wrap() sets it) + a `.pt-2`
 * override on the same element, so the real ERP app is untouched. */
body.cms-static-published #page-inner-content {
  padding: 0;
  max-width: none;
}
/* wrap() adds Bootstrap's `.pt-2`, whose padding-top carries `!important`, so beat it. */
body.cms-static-published #page-inner-content.pt-2 { padding-top: 0 !important; }

/* =============================================================== sidebar ==
 * Tabler ships a 15rem (240px) vertical navbar; the design specifies 250px.
 * Override the exact selectors Tabler uses, inside the same media query, so
 * the aside and the content offset stay in lockstep. Our vertical/combined
 * asides are always `navbar navbar-vertical navbar-expand-lg`. */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg { width: var(--ak-sidebar-w); }
  .navbar-expand-lg.navbar-vertical ~ .page-wrapper,
  .navbar-expand-lg.navbar-vertical ~ .navbar { margin-left: var(--ak-sidebar-w); }
  [dir="rtl"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper,
  [dir="rtl"] .navbar-expand-lg.navbar-vertical ~ .navbar {
    margin-left: 0; margin-right: var(--ak-sidebar-w);
  }
}

/* The navbar must keep a stacking context above content (inviolable house rule:
   never drop this z-index, never set overflow:hidden on the shell). */
.navbar { position: relative; z-index: 1030; }

/* --- Light sidebar (default): white surface, hairline border --- */
body.ak-sidebar-light .navbar-vertical {
  background-color: #ffffff;
  box-shadow: inset -1px 0 0 0 var(--ak-border-faint);
}
body.ak-sidebar-light .navbar-vertical .nav-link { color: #465065; }

/* --- Dark sidebar: the design's navy chrome --- */
body.ak-sidebar-dark .navbar-vertical {
  background-color: var(--ak-dark-bg);
  box-shadow: inset -1px 0 0 0 var(--ak-dark-border);
}
body.ak-sidebar-dark .navbar-vertical .nav-link,
body.ak-sidebar-dark .navbar-vertical .navbar-brand { color: var(--ak-dark-text); }
body.ak-sidebar-dark .navbar-vertical .dropdown-menu {
  background-color: var(--ak-dark-bg);
  border-color: var(--ak-dark-border);
}
body.ak-sidebar-dark .navbar-vertical .dropdown-item { color: var(--ak-dark-text); }

/* --- Nav items: 10px/12px pad, 8px radius, 2px gap, 14px --- */
.navbar-vertical .navbar-nav > .nav-item { margin-bottom: 2px; }
.navbar-vertical .nav-link {
  padding: var(--ak-pad-nav-item);
  border-radius: var(--ak-radius-item);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.navbar-vertical .nav-link-icon { margin: 0; width: 1.25rem; text-align: center; }

/* Active LEAF gets the pill; an active GROUP HEADER only colours its text. */
body.ak-sidebar-light .navbar-vertical .nav-item.active > .nav-link:not(.dropdown-toggle),
body.ak-sidebar-light .navbar-vertical .nav-link.active:not(.dropdown-toggle) {
  background-color: var(--ak-primary-tint);
  color: var(--ak-primary);
  font-weight: 600;
}
body.ak-sidebar-dark .navbar-vertical .nav-item.active > .nav-link:not(.dropdown-toggle),
body.ak-sidebar-dark .navbar-vertical .nav-link.active:not(.dropdown-toggle) {
  background-color: var(--ak-primary);
  color: #ffffff;
  font-weight: 600;
}
.navbar-vertical .nav-link.dropdown-toggle.active,
.navbar-vertical .nav-item.active > .nav-link.dropdown-toggle {
  background-color: transparent;
  font-weight: 600;
}
body.ak-sidebar-light .navbar-vertical .nav-link.dropdown-toggle.active,
body.ak-sidebar-light .navbar-vertical .nav-item.active > .nav-link.dropdown-toggle {
  color: var(--ak-primary);
}
body.ak-sidebar-dark .navbar-vertical .nav-link.dropdown-toggle.active,
body.ak-sidebar-dark .navbar-vertical .nav-item.active > .nav-link.dropdown-toggle {
  color: #ffffff;
}

/* Submenu children: indented, icon-less, 13.5px (design "padding-left:46px"). */
.navbar-vertical .dropdown-menu .dropdown-item {
  font-size: 13.5px;
  padding-left: 46px;
  border-radius: var(--ak-radius-item);
}
.navbar-vertical .dropdown-menu { border: 0; box-shadow: none; padding: 2px 0; }

/* 3-LEVEL MENUS — the reason we pin tabler >= 0.6.2. `dropdown-submenu`/
   `dropend` is our own nested-dropdown construction (Bootstrap 5 dropped native
   submenus). `sc-submenu-open` force-expands the active path in the vertical
   sidebar, where Bootstrap's JS strips `show` from nested menus. Keep both. */
.dropdown-submenu > .dropdown-menu.sc-submenu-open { display: block; }
.navbar-vertical .dropdown-submenu > .dropdown-menu .dropdown-item { padding-left: 60px; }

/* Mobile drawer: the only element in the design that carries a shadow. */
@media (max-width: 991.98px) {
  .navbar-vertical { box-shadow: var(--ak-shadow-drawer); }
}

/* ================================================================ topbar == */
#page > header.navbar:not(.navbar-vertical),
.page-wrapper > header.navbar {
  min-height: var(--ak-topbar-h);
  background-color: #ffffff;
  border-bottom: 1px solid var(--ak-border);
}

/* Brand wordmark. */
.navbar-brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* ============================================================ user chip ====
 * The signed-in user's NAME (+ avatar or initials) — rendered by index.js for
 * EVERY layout style. Stock Tabler shows a single email initial, and nothing at
 * all in Vertical. See index.js `userChip`. */
.ak-user-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ak-user-avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--ak-primary-tint);
  color: var(--ak-primary);
  background-size: cover; background-position: center;
  font-size: var(--ak-fs-sm); font-weight: 600; line-height: 1;
}
body.ak-sidebar-dark .navbar-vertical .ak-user-avatar {
  background-color: rgba(var(--ak-primary-rgb), 0.28);
  color: #ffffff;
}
.ak-user-text { min-width: 0; line-height: 1.25; }
.ak-user-name {
  font-size: var(--ak-fs-sm);
  font-weight: 600;
  color: inherit;
  max-width: 12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ak-user-sub { font-size: var(--ak-fs-meta); color: var(--ak-text-muted); }
body.ak-sidebar-dark .navbar-vertical .ak-user-sub { color: var(--ak-dark-text-sub); }
/* In the vertical sidebar the user chip is the footer of the rail. */
.navbar-vertical .ak-user-item {
  margin-top: auto;
  border-top: 1px solid var(--ak-border-faint);
  padding-top: 8px;
}
body.ak-sidebar-dark .navbar-vertical .ak-user-item { border-top-color: var(--ak-dark-border); }

/* ================================================================= cards ==
 * FLAT: white, 1px border, 12px radius, NO shadow. */
.card {
  background-color: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-card);
  box-shadow: none;
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--ak-border-faint);
  padding: 14px var(--ak-pad-card);
  min-height: auto;
}
.card-title { font-size: var(--ak-fs-card-title); font-weight: 600; margin: 0; }
.card-body { padding: var(--ak-pad-card); }
.card-footer { background-color: transparent; border-top: 1px solid var(--ak-border-faint); }

/* ================================================================ tables ==
 * We keep Saltcorn's <table> Lists (the design's CSS-grid DataTable is a
 * KEEP-OURS deviation, docs/DESIGN-HANDOFF-ASSESSMENT §c) and dress them to
 * match: muted uppercase header labels, hairline row lines, density padding. */
.table { --bs-table-hover-bg: var(--ak-subtle); color: var(--ak-text); margin-bottom: 0; }
.table thead th {
  background-color: var(--ak-subtle);
  color: var(--ak-text-faint);
  font-size: var(--ak-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ak-border);
  padding: 10px var(--ak-row-pad-x);
  white-space: nowrap;
}
.table tbody td {
  padding: var(--ak-row-pad-y) var(--ak-row-pad-x);
  vertical-align: middle;
  border-top: 1px solid var(--ak-row-line);
  border-bottom: 0;
  font-size: var(--ak-fs-sm);
}
.table tbody tr:hover > * { background-color: var(--ak-subtle); }
/* Tables scroll horizontally rather than squashing (design, responsive §). */
.table-responsive { overflow-x: auto; }

/* =============================================================== controls == */
.btn {
  border-radius: var(--ak-radius-ctrl);
  font-size: var(--ak-fs-sm);
  font-weight: 600;
  box-shadow: none;
}
.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: #ffffff;
  --tblr-btn-bg: var(--ak-primary);          --tblr-btn-border-color: var(--ak-primary);
}
.bg-primary { background-color: var(--ak-primary) !important; }
.text-primary { color: var(--ak-primary) !important; }

.form-control, .form-select {
  border-radius: var(--ak-radius-ctrl);
  border-color: var(--ak-border);
  font-size: var(--ak-fs-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ak-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--ak-primary-rgb), 0.18);
}
.form-label { font-weight: 500; font-size: var(--ak-fs-sm); color: var(--ak-text); }
/* The header search field: grey fill, per the design's top bar. */
.menusearch .form-control { background-color: var(--ak-bg-grey); }

.dropdown-menu {
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-ctrl);
  box-shadow: var(--ak-shadow-pop);
}
.modal-content { border-radius: var(--ak-radius-card); box-shadow: var(--ak-shadow-pop); }
.page-link { border-radius: var(--ak-radius-item); }
.breadcrumb { font-size: var(--ak-fs-sm); }
::selection { background: rgba(var(--ak-primary-rgb), 0.25); }

/* ================================================================ badges ==
 * Status pills: 12px/600, 4px 10px, radius 20 — one bg/fg pair per status. */
.badge { border-radius: var(--ak-radius-pill); font-weight: 600; font-size: var(--ak-fs-meta); padding: 4px 10px; }

.status-badge {
  display: inline-block;
  font-size: var(--ak-fs-meta); font-weight: 600;
  padding: 4px 10px; line-height: 1.4;
  border-radius: var(--ak-radius-pill);
  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.warning,  .status-badge.awaiting-parts { background: var(--ak-warning-soft); color: var(--ak-warning); }
.status-badge.success,  .status-badge.ready          { background: var(--ak-success-soft); color: var(--ak-success); }
.status-badge.neutral,  .status-badge.completed,
.status-badge.lapsed                                  { background: var(--ak-neutral-soft); color: var(--ak-neutral-fg); }
.status-badge.purple,   .status-badge.scheduled,
.status-badge.vip                                     { background: var(--ak-purple-soft); color: var(--ak-purple-2); }
.status-badge.danger                                  { background: var(--ak-danger-soft);  color: var(--ak-danger); }

/* ============================================================= KPI cards ==
 * `.ak-kpi*` is the class contract our scaffold dashboards already emit
 * (see plugins/autokoda-style). Keep the names identical so a module styled for
 * one renders correctly under the other. */
.ak-kpi { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-card); background: var(--ak-card); }
.ak-kpi .card-body { padding: 18px var(--ak-pad-card); display: flex; flex-direction: column; gap: 0.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: 0.35rem;
}
.ak-kpi-label { font-size: 12.5px; color: var(--ak-text-muted); font-weight: 500; line-height: 1.2; }
.ak-kpi-value { font-size: var(--ak-fs-kpi-value); font-weight: 700; line-height: 1.1; }
.ak-kpi-delta { font-size: 12.5px; font-weight: 600; color: var(--ak-text-muted); display: inline-flex; align-items: center; gap: 0.25rem; }
.ak-kpi-delta.up   { color: var(--ak-success); }
.ak-kpi-delta.down { color: var(--ak-danger); }
.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: rgba(14, 165, 165, 0.12); color: var(--ak-teal); }
.ak-kpi-icon.danger  { background: var(--ak-danger-soft);   color: var(--ak-danger); }
.ak-kpi-icon.amber   { background: rgba(245, 165, 36, 0.16); color: #b06a00; }

/* ============================================================== timeline ==
 * Work-order progress rail: 14px dots joined by a 2px connector. */
.ak-timeline { list-style: none; margin: 0; padding: 0; }
.ak-timeline-item { position: relative; padding-left: 26px; padding-bottom: 18px; }
.ak-timeline-item::before {
  content: ""; position: absolute; left: 6px; top: 16px; bottom: 0;
  width: 2px; background: var(--ak-border);
}
.ak-timeline-item:last-child::before { display: none; }
.ak-timeline-item::after {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffffff; border: 2px solid #d3d7df; box-sizing: border-box;
}
.ak-timeline-item.done::after    { background: var(--ak-primary); border-color: var(--ak-primary); }
.ak-timeline-item.done::before   { background: var(--ak-primary); }
.ak-timeline-item.current::after { background: #ffffff; border: 3px solid var(--ak-primary); }
.ak-timeline-item.pending        { color: var(--ak-text-faint); }
.ak-timeline-title { font-size: var(--ak-fs-sm); font-weight: 600; }
.ak-timeline-date  { font-size: var(--ak-fs-meta); color: var(--ak-text-muted); }

/* =========================================================== empty state == */
.ak-empty {
  text-align: center; padding: 64px 24px;
  background: var(--ak-card); border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-card);
}
.ak-empty-icon {
  width: 68px; height: 68px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef2fb; color: var(--ak-primary); font-size: 1.6rem; margin-bottom: 16px;
}

/* ============================================================== dark mode ==
 * `mode: dark` sets data-bs-theme="dark" on <html>. Surfaces track the design's
 * navy chrome; the cobalt PRIMARY never changes (one brand colour). */
[data-bs-theme="dark"] {
  --ak-page-bg:      #0f1626;
  --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;
  --ak-primary-tint: rgba(29, 78, 216, 0.22);
  --bs-body-bg:      var(--ak-page-bg);
  --bs-body-color:   var(--ak-text);
  --bs-card-bg:      var(--ak-card);
  --bs-border-color: var(--ak-border);
  --bs-dropdown-bg:  var(--ak-card);
  --bs-modal-bg:     var(--ak-card);
  --tblr-card-bg:    var(--ak-card);
  --tblr-body-bg:    var(--ak-page-bg);
  --tblr-body-color: var(--ak-text);
  --tblr-border-color: var(--ak-border);
}
[data-bs-theme="dark"] body.ak-bg-grey,
[data-bs-theme="dark"] body.ak-bg-white { --ak-page-bg: #0f1626; }
[data-bs-theme="dark"] .menusearch .form-control { background-color: var(--ak-subtle); }
/* Dark <select> readability (inviolable house rule: always pair bg + fg). */
[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] select.form-select option {
  background-color: var(--ak-card); color: var(--ak-text);
}

/* ============================================================ login page ===
 * The AutoKoda sign-in design (design handoff §5). EVERYTHING here is scoped to
 * `body.ak-auth`, a class index.js `authWrap` sets ONLY on the real /auth/login
 * page. So none of this touches the ERP app shell (wrap()) or SSG-published
 * /cms/* pages (no-chrome path) — they never carry the ak-auth class.
 * Values transcribed from design-tokens.css "Auth / forms (login screen)" and
 * "Autokoda Login.dc.html". Fonts are the theme's already-vendored Archivo +
 * IBM Plex Sans (var(--ak-font-display/-font)) — no Google Fonts link, per the
 * repo's offline-CSP invariant. */
body.ak-auth { background: #ffffff; }
.ak-auth-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ffffff;
}

/* ---- Left: form column ---- */
.ak-auth-form-col {
  display: flex;
  flex-direction: column;
  padding: 34px 40px 30px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%);
}
.ak-auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
}
.ak-auth-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.ak-auth-logo {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.32);
}
.ak-auth-logo-mark {
  width: 14px; height: 14px;
  border: 2.5px solid #ffffff;
  border-radius: 50% 50% 50% 3px;
  transform: rotate(45deg);
}
.ak-auth-wordmark {
  font-family: var(--ak-font-display);
  font-weight: 800; font-size: 21px; letter-spacing: -0.01em;
  color: var(--ak-text);
}
.ak-auth-newhere { font-size: 13.5px; color: #7a869e; }
.ak-auth-newhere a { font-weight: 700; color: var(--ak-primary); }

.ak-auth-center { display: flex; flex-direction: column; justify-content: center; }
.ak-auth-block { width: 100%; max-width: 396px; margin: 0 auto; padding: 44px 0; }
.ak-auth-h1 {
  font-family: var(--ak-font-display);
  font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 9px; color: var(--ak-text);
}
.ak-auth-sub { font-size: 15.5px; line-height: 1.5; color: #55617a; margin: 0 0 28px; }

/* Inline alerts (real Saltcorn flash messages), dressed to the design banner. */
.ak-auth-alerts { margin-bottom: 18px; }
.ak-auth-alerts .alert {
  border-radius: 10px; font-size: 13.5px; line-height: 1.45;
  padding: 12px 14px; margin-bottom: 12px;
}
.ak-auth-alerts .alert:last-child { margin-bottom: 0; }
.ak-auth-alerts .alert-danger  { background: #fdf3f3; border: 1px solid #f4cfcf; color: #a53a35; }
.ak-auth-alerts .alert-success { background: var(--ak-success-soft); border: 1px solid #bfe6cf; color: var(--ak-success); }
.ak-auth-alerts .alert-warning { background: var(--ak-warning-soft); border: 1px solid #f3d9b0; color: var(--ak-warning); }

/* Fields — the app's 46px input primitive. */
.ak-auth-form { margin: 0; }
.ak-auth-field { margin-bottom: 16px; }
.ak-auth-field-pw { margin-bottom: 18px; }
.ak-auth-label { display: block; font-size: 13px; font-weight: 600; color: #33405c; margin-bottom: 7px; }
.ak-auth-label-row {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px;
}
.ak-auth-label-row .ak-auth-label { margin-bottom: 0; }
.ak-auth-forgot { font-size: 12.5px; font-weight: 600; color: var(--ak-primary); }
.ak-auth-input {
  width: 100%; height: 46px;
  border: 1px solid #d9e1ee; border-radius: 10px;
  padding: 0 14px; font-size: 15px; color: #0f1e3d; background: #ffffff;
  font-family: var(--ak-font);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ak-auth-input::placeholder { color: #9aa5ba; }
.ak-auth-input:focus {
  outline: none;
  border-color: var(--ak-primary);
  box-shadow: 0 0 0 3px rgba(var(--ak-primary-rgb), 0.14);
}
.ak-auth-pw-wrap { position: relative; }
.ak-auth-pw-wrap .ak-auth-input { padding-right: 74px; }
.ak-auth-pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; font-weight: 700; color: #7a869e;
  background: none; border: 0; cursor: pointer; user-select: none;
  padding: 4px 6px; font-family: var(--ak-font);
}

/* Remember — custom 18px checkbox; the whole row is a clickable <label>. The
   native input is visually hidden but real, so it submits name="remember". */
.ak-auth-remember {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 24px; cursor: pointer;
}
.ak-auth-remember input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.ak-auth-check {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 5px; border: 1px solid #cdd7e8; background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.ak-auth-check svg { opacity: 0; transition: opacity 0.15s; }
.ak-auth-remember input:checked + .ak-auth-check { background: var(--ak-primary); border-color: var(--ak-primary); }
.ak-auth-remember input:checked + .ak-auth-check svg { opacity: 1; }
.ak-auth-remember input:focus-visible + .ak-auth-check { box-shadow: 0 0 0 3px rgba(var(--ak-primary-rgb), 0.14); }
.ak-auth-remember-label { font-size: 14px; color: #33405c; user-select: none; }

/* Submit — full-width cobalt. */
.ak-auth-submit {
  display: block; width: 100%; text-align: center;
  font-family: var(--ak-font); font-size: 15.5px; font-weight: 700; color: #ffffff;
  background: var(--ak-primary); border: 0; border-radius: 10px;
  padding: 14px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--ak-primary-rgb), 0.30);
  transition: background 0.15s;
}
.ak-auth-submit:hover { background: var(--ak-primary-hover); }

/* Footer. */
.ak-auth-footer {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: #8b96ac; margin-top: auto;
}
.ak-auth-footer-links { display: flex; gap: 18px; }

/* ---- Right: content-free brand panel ---- */
.ak-auth-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0f1e3d 0%, #16305e 55%, #1d4ed8 140%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px;
}
.ak-auth-panel-c1 {
  position: absolute; top: -90px; right: -70px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(245, 165, 36, 0.14);
}
.ak-auth-panel-c2 {
  position: absolute; bottom: -120px; left: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.ak-auth-panel-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  animation: akfade 0.7s ease both;
}
.ak-auth-panel-logo {
  width: 96px; height: 96px; border-radius: 26px;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px rgba(29, 78, 216, 0.4);
}
.ak-auth-panel-logo .ak-auth-logo-mark {
  width: 42px; height: 42px; border-width: 7px; border-radius: 50% 50% 50% 9px;
}
.ak-auth-panel-word {
  font-family: var(--ak-font-display);
  font-weight: 800; font-size: 38px; letter-spacing: -0.02em; color: #ffffff;
}
@keyframes akfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ak-auth-panel-inner { animation: none; } }

/* Below 940px: single column, form only (design responsive rule). */
@media (max-width: 940px) {
  .ak-auth-grid { grid-template-columns: 1fr; }
  .ak-auth-panel { display: none; }
}
@media (max-width: 575.98px) {
  .ak-auth-form-col { padding: 24px 20px 20px; }
  .ak-auth-block { padding: 28px 0; }
  .ak-auth-h1 { font-size: 29px; }
}

/* ================================================================== print == */
@media print {
  .navbar, .d-print-none { display: none !important; }
  #page-inner-content { padding: 0; max-width: none; }
  .card { border: 0; }
}
