/* ============================================================================
   AKG CONTROL — Admin Console Design System
   ----------------------------------------------------------------------------
   An engineering-grade control panel. Light surfaces, hairline borders,
   a sectioned sidebar, and monospace for every identifier (VINs, SKUs,
   order numbers, versions, metrics) — because this platform lives in part data.

   EVERYTHING in this file is scoped under .akg-admin so it overrides Bootstrap
   and the global app.css ONLY inside the admin area. The customer storefront
   is never touched. Only AdminLayout.razor applies the .akg-admin class.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
.akg-admin {
    /* Type */
    --ac-font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --ac-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Architecture — neutral surfaces */
    --ac-app-bg: #f5f6f8;
    --ac-surface: #ffffff;
    --ac-surface-2: #fafbfc;
    --ac-surface-sunken: #f1f3f5;
    --ac-border: #e4e7ec;
    --ac-border-strong: #d3d8df;

    /* Ink */
    --ac-ink: #18212e;          /* primary text — slate near-black */
    --ac-ink-2: #475467;        /* secondary text */
    --ac-ink-3: #8a94a4;        /* muted / labels */

    /* Brand — AKG blue stays the primary action + active color */
    --ac-primary: #2B5797;
    --ac-primary-600: #244b85;
    --ac-primary-700: #1e4176;
    --ac-primary-tint: #eaf0f9;
    --ac-primary-tint-2: #dbe6f5;

    /* Signal accent — warm "key amber" (the Cloudflare-orange nod), used sparingly */
    --ac-accent: #e0851b;
    --ac-accent-tint: #fbf1e2;

    /* Status */
    --ac-success: #1f9d57;  --ac-success-tint: #e6f5ec;
    --ac-warning: #b7791f;  --ac-warning-tint: #fbf3e0;
    --ac-danger:  #d6322b;  --ac-danger-tint:  #fbeae9;
    --ac-info:    #2b5797;  --ac-info-tint:    #eaf0f9;

    /* Geometry */
    --ac-radius: 8px;
    --ac-radius-sm: 6px;
    --ac-radius-lg: 12px;
    --ac-shadow-1: 0 1px 2px rgba(24, 33, 46, .05);
    --ac-shadow-2: 0 4px 16px rgba(24, 33, 46, .08);
    --ac-shadow-pop: 0 12px 32px rgba(24, 33, 46, .14);

    --ac-topbar-h: 56px;
    --ac-sidebar-w: 256px;
    --ac-sidebar-w-collapsed: 64px;

    /* Bootstrap modal theming — drive from tokens so modal bodies match the
       console in both light and dark. Bootstrap defaults --bs-modal-bg to white,
       which left modal bodies white-on-dark while only the themed header was dark. */
    --bs-modal-bg: var(--ac-surface);
    --bs-modal-color: var(--ac-ink);
    --bs-modal-border-color: var(--ac-border);
    --bs-modal-header-border-color: var(--ac-border);
    --bs-modal-footer-border-color: var(--ac-border);

    font-family: var(--ac-font-ui);
    color: var(--ac-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Opt the admin console into the light UA color scheme by default so native
       controls (select option popups, scrollbars, autofill, date pickers) paint
       light. The dark theme block flips this to `dark`. Scoped to .akg-admin so
       the customer storefront is never affected. */
    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. Shell — top bar
   --------------------------------------------------------------------------- */
.akg-admin .ac-shell { min-height: 100vh; background: var(--ac-app-bg); }

.akg-admin .ac-topbar {
    position: sticky; top: 0; z-index: 1040;
    height: var(--ac-topbar-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px;
    background: var(--ac-surface);
    border-bottom: 1px solid var(--ac-border);
}

.akg-admin .ac-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
}
.akg-admin .ac-brand img { height: 26px; display: block; }
.akg-admin .ac-brand-tag {
    font-family: var(--ac-font-mono);
    font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ac-ink-3);
    border: 1px solid var(--ac-border);
    border-radius: 4px; padding: 2px 6px;
}

.akg-admin .ac-topbar-divider { width: 1px; height: 24px; background: var(--ac-border); flex-shrink: 0; }

/* Command search */
.akg-admin .ac-search {
    flex: 1; max-width: 460px;
    display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 10px;
    background: var(--ac-surface-sunken);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    color: var(--ac-ink-3);
    cursor: text; transition: border-color .15s, background .15s;
}
.akg-admin .ac-search:focus-within { border-color: var(--ac-primary); background: var(--ac-surface); }
.akg-admin .ac-search input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: var(--ac-font-ui); font-size: 13px; color: var(--ac-ink);
}
.akg-admin .ac-search input::placeholder { color: var(--ac-ink-3); }
.akg-admin .ac-kbd {
    font-family: var(--ac-font-mono); font-size: 11px; font-weight: 600;
    color: var(--ac-ink-3);
    border: 1px solid var(--ac-border-strong); border-bottom-width: 2px;
    border-radius: 4px; padding: 1px 5px; background: var(--ac-surface);
}

.akg-admin .ac-topbar-spacer { flex: 1; }

.akg-admin .ac-topbar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.akg-admin .ac-topbar-link {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 11px;
    font-size: 13px; font-weight: 500; color: var(--ac-ink-2);
    text-decoration: none; border-radius: var(--ac-radius-sm);
    transition: background .15s, color .15s;
}
.akg-admin .ac-topbar-link:hover { background: var(--ac-surface-sunken); color: var(--ac-ink); }
.akg-admin .ac-topbar-link i { font-size: 15px; }

/* Environment pill */
.akg-admin .ac-env {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px;
    font-family: var(--ac-font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 999px; border: 1px solid var(--ac-border);
    background: var(--ac-surface);
}
.akg-admin .ac-env .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-success); box-shadow: 0 0 0 3px var(--ac-success-tint); }
.akg-admin .ac-env.is-prod { color: var(--ac-success); border-color: #bfe3cd; }
.akg-admin .ac-env.is-nonprod { color: var(--ac-accent); border-color: #f0d9b6; }
.akg-admin .ac-env.is-nonprod .dot { background: var(--ac-accent); box-shadow: 0 0 0 3px var(--ac-accent-tint); }

/* User menu trigger */
.akg-admin .ac-user {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 6px 0 8px; border-radius: var(--ac-radius-sm);
    color: var(--ac-ink); font-size: 13px; font-weight: 500;
    text-decoration: none; cursor: pointer; transition: background .15s;
}
.akg-admin .ac-user:hover { background: var(--ac-surface-sunken); }
.akg-admin .ac-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ac-primary); color: #fff;
    font-family: var(--ac-font-mono); font-size: 11px; font-weight: 600;
}

/* ---------------------------------------------------------------------------
   3. Shell — body + sidebar
   --------------------------------------------------------------------------- */
.akg-admin .ac-body { display: flex; align-items: stretch; }

.akg-admin .ac-sidebar {
    width: var(--ac-sidebar-w); flex-shrink: 0;
    background: var(--ac-surface);
    border-right: 1px solid var(--ac-border);
    position: sticky; top: var(--ac-topbar-h);
    height: calc(100vh - var(--ac-topbar-h));
    display: flex; flex-direction: column;
    transition: width .2s ease;
    scrollbar-width: thin; scrollbar-color: var(--ac-border-strong) transparent;
}
.akg-admin .ac-sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 6px; }
.akg-admin .ac-sidebar-scroll::-webkit-scrollbar { width: 8px; }
.akg-admin .ac-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--ac-border-strong); border-radius: 4px; border: 2px solid var(--ac-surface); }

.akg-admin .ac-section { padding: 10px 14px 2px; }
.akg-admin .ac-section-label {
    font-family: var(--ac-font-mono);
    font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ac-ink-3);
}

/* Nav items (NavLink renders <a class="nav-link">) */
.akg-admin .ac-sidebar .nav-link {
    display: flex; align-items: center; gap: 10px;
    margin: 1px 8px; padding: 7px 10px;
    border-radius: var(--ac-radius-sm);
    color: var(--ac-ink-2) !important;
    font-size: 13.5px; font-weight: 500;
    text-decoration: none; transition: background .12s, color .12s;
    position: relative; transform: none !important;
}
.akg-admin .ac-sidebar .nav-link i { width: 18px; font-size: 15px; text-align: center; color: var(--ac-ink-3); transition: color .12s; flex-shrink: 0; }
.akg-admin .ac-sidebar .nav-link:hover { background: var(--ac-surface-sunken); color: var(--ac-ink) !important; }
.akg-admin .ac-sidebar .nav-link:hover i { color: var(--ac-ink-2); }
.akg-admin .ac-sidebar .nav-link.active {
    background: var(--ac-primary-tint); color: var(--ac-primary-700) !important; font-weight: 600;
}
.akg-admin .ac-sidebar .nav-link.active i { color: var(--ac-primary); }
.akg-admin .ac-sidebar .nav-link.active::before {
    content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--ac-accent);
}
.akg-admin .ac-nav-child .nav-link { padding-left: 34px; font-size: 13px; }

.akg-admin .ac-sidebar-foot {
    border-top: 1px solid var(--ac-border);
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.akg-admin .ac-version {
    font-family: var(--ac-font-mono); font-size: 11px; color: var(--ac-ink-3);
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.akg-admin .ac-version span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.akg-admin .ac-collapse-btn {
    flex-shrink: 0; width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 1px solid var(--ac-border); background: var(--ac-surface);
    border-radius: var(--ac-radius-sm); color: var(--ac-ink-3);
    cursor: pointer; transition: all .15s;
}
.akg-admin .ac-collapse-btn:hover { color: var(--ac-ink); border-color: var(--ac-border-strong); background: var(--ac-surface-sunken); }

/* Collapsed sidebar (icon-only) — toggled by site.js adding .sidebar-collapsed */
.akg-admin .ac-sidebar.sidebar-collapsed { width: var(--ac-sidebar-w-collapsed); }
.akg-admin .sidebar-collapsed .ac-nav-label,
.akg-admin .sidebar-collapsed .ac-section-label,
.akg-admin .sidebar-collapsed .ac-version span { display: none; }
.akg-admin .sidebar-collapsed .ac-section { padding: 8px 0 0; }
.akg-admin .sidebar-collapsed .ac-section-label { height: 1px; margin: 6px 16px; background: var(--ac-border); }
.akg-admin .sidebar-collapsed .nav-link { justify-content: center; padding: 9px; margin: 1px 8px; }
.akg-admin .sidebar-collapsed .nav-link i { width: auto; font-size: 16px; }
.akg-admin .sidebar-collapsed .ac-nav-child .nav-link { padding-left: 9px; }
.akg-admin .sidebar-collapsed .nav-link.active::before { left: -8px; }
.akg-admin .sidebar-collapsed .ac-sidebar-foot { flex-direction: column; padding: 10px 8px; }

/* ---------------------------------------------------------------------------
   4. Main content area
   --------------------------------------------------------------------------- */
.akg-admin .ac-main {
    flex: 1; min-width: 0;
    padding: 26px 28px 56px;
    max-width: 1320px;
    overflow-x: hidden;
}
.akg-admin .ac-main > .container-fluid { padding: 0; }

/* Page-scoped full-width override: the structured retail-portfolio matrix is far
   wider than the 1320px clamp (many fixed 180px columns + a sticky column), so
   lift the desktop max-width only for that page to minimize its horizontal
   scrollbar. :has() scopes this to the one page — all other admin pages keep the
   centered 1320px clamp. overflow-x and responsive padding are untouched. */
.akg-admin .ac-main:has(.rpa-structured-page) { max-width: none; }

/* Mobile top toggle hidden on desktop */
.akg-admin .ac-mobile-toggle { display: none; }

/* ---------------------------------------------------------------------------
   5. Page header pattern (works with existing per-page markup + ac- classes)
   --------------------------------------------------------------------------- */
.akg-admin .ac-page-head { margin-bottom: 22px; }
.akg-admin .ac-page-head .ac-eyebrow,
.akg-admin .breadcrumb {
    font-family: var(--ac-font-mono);
    font-size: 11px; letter-spacing: .04em;
}
.akg-admin .ac-page-title {
    font-size: 24px; font-weight: 600; letter-spacing: -.01em;
    color: var(--ac-ink); margin: 4px 0 2px; line-height: 1.2;
}
.akg-admin .ac-page-sub { color: var(--ac-ink-2); font-size: 14px; margin: 0; }
.akg-admin .ac-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   6. Override global app.css cards → crisp panels
   --------------------------------------------------------------------------- */
.akg-admin .card,
.akg-admin .ac-panel {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-1);
    overflow: visible;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.akg-admin .card:hover { transform: none; box-shadow: var(--ac-shadow-1); }
.akg-admin .card.ac-hover:hover { box-shadow: var(--ac-shadow-2); border-color: var(--ac-border-strong) !important; }

.akg-admin .card-body { padding: 18px 20px; }
.akg-admin .card-header {
    background: var(--ac-surface) !important;
    color: var(--ac-ink) !important;
    border: 0 !important; border-bottom: 1px solid var(--ac-border) !important;
    padding: 14px 20px !important;
    font-weight: 600; font-size: 14px;
    border-radius: var(--ac-radius-lg) var(--ac-radius-lg) 0 0;
}
.akg-admin .card-header h1, .akg-admin .card-header h2, .akg-admin .card-header h3,
.akg-admin .card-header h4, .akg-admin .card-header h5, .akg-admin .card-header h6 {
    color: var(--ac-ink) !important; font-size: 15px; margin: 0;
}
/* Keep dark/colored headers readable where pages opt in (e.g. bg-dark debug card) */
.akg-admin .card-header.bg-dark { background: var(--ac-ink) !important; color: #fff !important; }
.akg-admin .card-header.bg-dark * { color: #fff !important; }

.akg-admin .ac-panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 20px; border-bottom: 1px solid var(--ac-border);
    font-weight: 600; font-size: 14px; color: var(--ac-ink);
}
.akg-admin .ac-panel-head .ac-panel-icon { color: var(--ac-ink-3); font-size: 15px; }
.akg-admin .ac-panel-body { padding: 18px 20px; }

/* Legacy colored stat cards (.card.bg-primary.text-white, etc.) → clean tiles.
   app.css applies gradient backgrounds with !important, so we override in kind.
   This reskins ~33 stat cards across 11 pages without touching their markup. */
.akg-admin .card.bg-primary, .akg-admin .card.bg-success, .akg-admin .card.bg-warning,
.akg-admin .card.bg-info, .akg-admin .card.bg-secondary, .akg-admin .card.bg-danger,
.akg-admin .card.bg-dark, .akg-admin .card.bg-light {
    background: var(--ac-surface) !important;
    border: 1px solid var(--ac-border) !important;
    box-shadow: var(--ac-shadow-1);
}
.akg-admin .card[class*="bg-"].text-white, .akg-admin .card[class*="bg-"].text-dark,
.akg-admin .card[class*="bg-"].text-white *, .akg-admin .card[class*="bg-"].text-dark * {
    color: var(--ac-ink) !important;
}
.akg-admin .card[class*="bg-"] .card-subtitle,
.akg-admin .card[class*="bg-"] h6 {
    font-family: var(--ac-font-mono) !important;
    font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ac-ink-3) !important; opacity: 1 !important;
}
.akg-admin .card[class*="bg-"] h2, .akg-admin .card[class*="bg-"] .h2 {
    font-family: var(--ac-font-mono) !important; font-weight: 600 !important; color: var(--ac-ink) !important;
}
/* Status-tint the big icon inside each tile */
.akg-admin .card[class*="bg-"] .opacity-50,
.akg-admin .card[class*="bg-"] .opacity-75 { opacity: 1 !important; }
.akg-admin .card.bg-primary   > * i.fs-1, .akg-admin .card.bg-primary   i.fs-1 { color: var(--ac-primary) !important; }
.akg-admin .card.bg-success   > * i.fs-1, .akg-admin .card.bg-success   i.fs-1 { color: var(--ac-success) !important; }
.akg-admin .card.bg-warning   > * i.fs-1, .akg-admin .card.bg-warning   i.fs-1 { color: var(--ac-accent)  !important; }
.akg-admin .card.bg-info      > * i.fs-1, .akg-admin .card.bg-info      i.fs-1 { color: var(--ac-info)    !important; }
.akg-admin .card.bg-danger    > * i.fs-1, .akg-admin .card.bg-danger    i.fs-1 { color: var(--ac-danger)  !important; }
.akg-admin .card.bg-secondary > * i.fs-1, .akg-admin .card.bg-secondary i.fs-1,
.akg-admin .card.bg-light > * i.fs-1, .akg-admin .card.bg-light i.fs-1 { color: var(--ac-ink-3)   !important; }
/* Colored left accent strip so the status is still legible at a glance */
.akg-admin .card.bg-primary   { border-left: 3px solid var(--ac-primary) !important; }
.akg-admin .card.bg-success   { border-left: 3px solid var(--ac-success) !important; }
.akg-admin .card.bg-warning   { border-left: 3px solid var(--ac-accent)  !important; }
.akg-admin .card.bg-info      { border-left: 3px solid var(--ac-info)    !important; }
.akg-admin .card.bg-danger    { border-left: 3px solid var(--ac-danger)  !important; }
.akg-admin .card.bg-secondary,
.akg-admin .card.bg-light     { border-left: 3px solid var(--ac-border-strong) !important; }

/* ---------------------------------------------------------------------------
   7. Metric tiles
   --------------------------------------------------------------------------- */
.akg-admin .ac-metrics {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 18px;
}
.akg-admin .ac-metric {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-lg);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: var(--ac-shadow-1);
    text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.akg-metric, .akg-admin a.ac-metric:hover { border-color: var(--ac-border-strong); box-shadow: var(--ac-shadow-2); }
.akg-admin .ac-metric-top { display: flex; align-items: center; justify-content: space-between; }
.akg-admin .ac-metric-label {
    font-family: var(--ac-font-mono);
    font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ac-ink-3);
}
.akg-admin .ac-metric-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center; font-size: 15px;
    background: var(--ac-surface-sunken); color: var(--ac-ink-2);
}
.akg-admin .ac-metric-icon.is-primary { background: var(--ac-primary-tint); color: var(--ac-primary); }
.akg-admin .ac-metric-icon.is-success { background: var(--ac-success-tint); color: var(--ac-success); }
.akg-admin .ac-metric-icon.is-warning { background: var(--ac-warning-tint); color: var(--ac-warning); }
.akg-admin .ac-metric-icon.is-danger  { background: var(--ac-danger-tint);  color: var(--ac-danger); }
.akg-admin .ac-metric-icon.is-accent  { background: var(--ac-accent-tint);  color: var(--ac-accent); }
.akg-admin .ac-metric-value {
    font-family: var(--ac-font-mono);
    font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
    color: var(--ac-ink);
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.akg-admin .ac-metric-value.sm { font-size: 17px; line-height: 1.2; }
.akg-admin .ac-metric-foot { font-size: 12px; color: var(--ac-ink-3); display: flex; align-items: center; gap: 5px; }
.akg-admin .ac-metric-foot a { color: var(--ac-primary); font-weight: 500; text-decoration: none; }
.akg-admin .ac-metric-foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   8. Quick-action grid (icon tiles)
   --------------------------------------------------------------------------- */
.akg-admin .ac-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.akg-admin .ac-action {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 14px; border: 1px solid var(--ac-border); border-radius: var(--ac-radius);
    background: var(--ac-surface-2); color: var(--ac-ink);
    text-decoration: none; transition: all .15s; cursor: pointer; width: 100%;
    font-family: var(--ac-font-ui);
}
.akg-admin .ac-action:hover { border-color: var(--ac-primary); background: var(--ac-primary-tint); color: var(--ac-primary-700); transform: translateY(-1px); }
.akg-admin .ac-action i { font-size: 18px; color: var(--ac-ink-2); }
.akg-admin .ac-action:hover i { color: var(--ac-primary); }
.akg-admin .ac-action span { font-size: 13px; font-weight: 500; }
.akg-admin .ac-action.is-danger:hover { border-color: var(--ac-danger); background: var(--ac-danger-tint); color: var(--ac-danger); }
.akg-admin .ac-action.is-danger:hover i { color: var(--ac-danger); }

/* Definition list (account info) */
.akg-admin .ac-dl { display: flex; flex-direction: column; gap: 14px; }
.akg-admin .ac-dl dt {
    font-family: var(--ac-font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ac-ink-3); margin-bottom: 3px;
}
.akg-admin .ac-dl dd { margin: 0; font-size: 14px; color: var(--ac-ink); font-weight: 500; }

/* ---------------------------------------------------------------------------
   9. Buttons — override global app.css gradients
   --------------------------------------------------------------------------- */
.akg-admin .btn {
    border-radius: var(--ac-radius-sm);
    font-weight: 500; font-size: 13.5px;
    padding: 7px 14px;
    transition: all .15s ease;
    box-shadow: none;
}
.akg-admin .btn:hover { transform: none; }
.akg-admin .btn-lg { padding: 10px 18px; font-size: 15px; }
.akg-admin .btn-sm { padding: 4px 10px; font-size: 12.5px; }

.akg-admin .btn-primary {
    background: var(--ac-primary) !important; border: 1px solid var(--ac-primary) !important;
    color: #fff !important; box-shadow: var(--ac-shadow-1);
}
.akg-admin .btn-primary:hover { background: var(--ac-primary-600) !important; border-color: var(--ac-primary-600) !important; box-shadow: var(--ac-shadow-2); }

.akg-admin .btn-outline-primary { color: var(--ac-primary); border: 1px solid var(--ac-border-strong); background: var(--ac-surface); }
.akg-admin .btn-outline-primary:hover { background: var(--ac-primary-tint); border-color: var(--ac-primary); color: var(--ac-primary-700); }

.akg-admin .btn-outline-secondary { color: var(--ac-ink-2); border: 1px solid var(--ac-border-strong); background: var(--ac-surface); }
.akg-admin .btn-outline-secondary:hover { background: var(--ac-surface-sunken); border-color: var(--ac-border-strong); color: var(--ac-ink); }

.akg-admin .btn-outline-success { color: var(--ac-success); border: 1px solid #bfe3cd; background: var(--ac-surface); }
.akg-admin .btn-outline-success:hover { background: var(--ac-success-tint); border-color: var(--ac-success); color: var(--ac-success); }
.akg-admin .btn-outline-warning { color: var(--ac-warning); border: 1px solid #f0d9b6; background: var(--ac-surface); }
.akg-admin .btn-outline-warning:hover { background: var(--ac-warning-tint); border-color: var(--ac-warning); color: var(--ac-warning); }
.akg-admin .btn-outline-danger { color: var(--ac-danger); border: 1px solid #f1c4c1; background: var(--ac-surface); }
.akg-admin .btn-outline-danger:hover { background: var(--ac-danger-tint); border-color: var(--ac-danger); color: var(--ac-danger); }
.akg-admin .btn-outline-info, .akg-admin .btn-outline-dark { color: var(--ac-ink-2); border: 1px solid var(--ac-border-strong); background: var(--ac-surface); }
.akg-admin .btn-outline-info:hover, .akg-admin .btn-outline-dark:hover { background: var(--ac-surface-sunken); color: var(--ac-ink); }

.akg-admin .btn-secondary { background: var(--ac-surface); border: 1px solid var(--ac-border-strong); color: var(--ac-ink-2); padding: 7px 14px; }
.akg-admin .btn-secondary:hover { background: var(--ac-surface-sunken); color: var(--ac-ink); transform: none; }
.akg-admin .btn-warning { background: var(--ac-accent); border-color: var(--ac-accent); color: #fff; }
.akg-admin .btn-warning:hover { background: #c9760f; border-color: #c9760f; }
.akg-admin .btn-success { background: var(--ac-success); border-color: var(--ac-success); color: #fff; }
.akg-admin .btn-light { background: var(--ac-surface); border: 1px solid var(--ac-border-strong); color: var(--ac-ink-2); }
.akg-admin .btn-light:hover { background: var(--ac-surface-sunken); color: var(--ac-ink); }

/* Pagination — Bootstrap defaults the page links to white; tokenize so paged
   tables (Monitoring, Email Log, Users, …) match the surface in both modes. */
.akg-admin .page-link { background: var(--ac-surface); border-color: var(--ac-border); color: var(--ac-primary); }
.akg-admin .page-link:hover { background: var(--ac-surface-sunken); border-color: var(--ac-border-strong); color: var(--ac-primary-700); }
.akg-admin .page-item.active .page-link { background: var(--ac-primary); border-color: var(--ac-primary); color: #fff; }
.akg-admin .page-item.disabled .page-link { background: var(--ac-surface); border-color: var(--ac-border); color: var(--ac-ink-3); }

/* ---------------------------------------------------------------------------
   10. Tables — crisp, dense, mono identifiers
   --------------------------------------------------------------------------- */
.akg-admin .table { color: var(--ac-ink); margin-bottom: 0; --bs-table-bg: transparent; }
.akg-admin .table > thead th {
    font-family: var(--ac-font-mono);
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ac-ink-3);
    background: var(--ac-surface-2);
    border-bottom: 1px solid var(--ac-border);
    padding: 9px 14px; white-space: nowrap;
}
.akg-admin .table > tbody td {
    padding: 11px 14px; font-size: 13.5px; vertical-align: middle;
    border-bottom: 1px solid var(--ac-border); border-top: 0;
    /* Long unbreakable identifiers (SendGrid template IDs, tracking #s) must wrap
       so the table fits its container instead of forcing a horizontal scrollbar. */
    overflow-wrap: anywhere;
}
.akg-admin .table > tbody tr:last-child td { border-bottom: 0; }
.akg-admin .table-hover > tbody > tr:hover > * { background: var(--ac-primary-tint); }
.akg-admin .table-sm > :not(caption) > * > * { padding: 7px 12px; }
/* Order #s, IDs, tracking, codes read as data */
.akg-admin .table td code, .akg-admin code, .akg-admin .ac-mono {
    font-family: var(--ac-font-mono); font-size: .92em;
    background: var(--ac-surface-sunken); color: var(--ac-ink);
    padding: 1px 6px; border-radius: 4px; border: 1px solid var(--ac-border);
    /* Long identifiers (SendGrid template IDs) must be breakable for min-content
       sizing — Bootstrap sets code{overflow-wrap:break-word} which does NOT shrink
       the column, so a 36-char ID keeps the table wider than its container and a
       horizontal scrollbar appears. `anywhere` lets the column collapse to fit. */
    overflow-wrap: anywhere; word-break: break-word;
}

/* List groups (member lists, nested item rows) — Bootstrap defaults the item
   background to white (--bs-list-group-bg: var(--bs-body-bg)); drive from tokens
   so they match the surface in both modes instead of a white block on dark. */
.akg-admin .list-group-item {
    background-color: var(--ac-surface);
    color: var(--ac-ink);
    border-color: var(--ac-border);
}

/* ---------------------------------------------------------------------------
   11. Badges → status tokens
   --------------------------------------------------------------------------- */
.akg-admin .badge {
    font-family: var(--ac-font-mono);
    font-weight: 600; font-size: 11px; letter-spacing: .02em;
    padding: 4px 8px; border-radius: 5px; border: 1px solid transparent;
}
.akg-admin .badge.fs-6 { font-size: 12px; padding: 5px 10px; }
.akg-admin .badge.bg-success { background: var(--ac-success-tint) !important; color: var(--ac-success) !important; border-color: #bfe3cd; }
.akg-admin .badge.bg-danger  { background: var(--ac-danger-tint) !important;  color: var(--ac-danger) !important;  border-color: #f1c4c1; }
.akg-admin .badge.bg-warning { background: var(--ac-warning-tint) !important; color: var(--ac-warning) !important; border-color: #f0d9b6; }
.akg-admin .badge.bg-info    { background: var(--ac-info-tint) !important;    color: var(--ac-info) !important;    border-color: #c3d4ec; }
.akg-admin .badge.bg-primary { background: var(--ac-primary-tint) !important; color: var(--ac-primary-700) !important; border-color: #c3d4ec; }
.akg-admin .badge.bg-secondary { background: var(--ac-surface-sunken) !important; color: var(--ac-ink-2) !important; border-color: var(--ac-border); }
.akg-admin .badge.bg-dark { background: var(--ac-ink) !important; color: #fff !important; }
.akg-admin .badge.text-dark { color: var(--ac-ink) !important; }

/* ---------------------------------------------------------------------------
   12. Forms — compact, hairline
   --------------------------------------------------------------------------- */
.akg-admin .form-control, .akg-admin .form-select {
    border: 1px solid var(--ac-border-strong);
    border-radius: var(--ac-radius-sm);
    padding: 8px 12px; font-size: 13.5px; color: var(--ac-ink);
    background: var(--ac-surface);
    transition: border-color .15s, box-shadow .15s;
}
.akg-admin .form-control:focus, .akg-admin .form-select:focus {
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 3px var(--ac-primary-tint-2);
}
.akg-admin .form-control::placeholder { color: var(--ac-ink-3); }
.akg-admin .form-label { font-size: 13px; font-weight: 500; color: var(--ac-ink-2); margin-bottom: 5px; }
.akg-admin .form-label.text-uppercase, .akg-admin label.text-uppercase {
    font-family: var(--ac-font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ac-ink-3);
}
.akg-admin .input-group-text { background: var(--ac-surface-sunken); border: 1px solid var(--ac-border-strong); color: var(--ac-ink-3); font-size: 13px; }

/* ---------------------------------------------------------------------------
   13. Breadcrumbs, tabs, alerts, modals, misc
   --------------------------------------------------------------------------- */
.akg-admin .breadcrumb { margin-bottom: 4px; background: transparent; padding: 0; }
.akg-admin .breadcrumb-item, .akg-admin .breadcrumb-item a { color: var(--ac-ink-3); text-transform: uppercase; letter-spacing: .06em; }
.akg-admin .breadcrumb-item a { color: var(--ac-ink-3); text-decoration: none; }
.akg-admin .breadcrumb-item a:hover { color: var(--ac-primary); }
.akg-admin .breadcrumb-item.active { color: var(--ac-ink-2); }
.akg-admin .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--ac-border-strong); padding: 0 .5rem; }

.akg-admin .nav-tabs { border-bottom: 1px solid var(--ac-border); gap: 2px; }
.akg-admin .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--ac-ink-2) !important; font-weight: 500; font-size: 14px; padding: 9px 14px;
    margin: 0;
}
.akg-admin .nav-tabs .nav-link:hover { color: var(--ac-ink) !important; border-bottom-color: var(--ac-border-strong); background: transparent; transform: none; }
.akg-admin .nav-tabs .nav-link.active { color: var(--ac-primary-700) !important; border-bottom-color: var(--ac-primary); background: transparent; font-weight: 600; }

.akg-admin .alert { border-radius: var(--ac-radius); border: 1px solid transparent; font-size: 14px; padding: 14px 16px; }
.akg-admin .alert-success { background: var(--ac-success-tint); border-color: #bfe3cd; color: #15693b; }
.akg-admin .alert-warning { background: var(--ac-warning-tint); border-color: #f0d9b6; color: #8a5a13; }
.akg-admin .alert-danger  { background: var(--ac-danger-tint);  border-color: #f1c4c1; color: #a3221d; }
.akg-admin .alert-info    { background: var(--ac-info-tint);    border-color: #c3d4ec; color: var(--ac-primary-700); }

.akg-admin .card.border-warning { border-color: #f0d9b6 !important; }
.akg-admin .card.border-warning .card-header.bg-warning {
    background: var(--ac-warning-tint) !important; color: #8a5a13 !important;
    border-bottom: 1px solid #f0d9b6 !important;
}
.akg-admin .card.border-warning .card-header.bg-warning * { color: #8a5a13 !important; }

.akg-admin .modal-content {
    background: var(--ac-surface); color: var(--ac-ink);
    border-radius: var(--ac-radius-lg); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-pop);
}
.akg-admin .modal-body { color: var(--ac-ink); }
.akg-admin .modal-footer { background: var(--ac-surface); }
.akg-admin .modal-header { background: var(--ac-surface); border-bottom: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg) var(--ac-radius-lg) 0 0; padding: 16px 20px; }
.akg-admin .modal-title { font-weight: 600; font-size: 16px; color: var(--ac-ink); }
.akg-admin .modal-body { padding: 20px; font-size: 14px; }
.akg-admin .modal-footer { border-top: 1px solid var(--ac-border); padding: 14px 20px; }

.akg-admin .spinner-border { color: var(--ac-primary); }
.akg-admin .text-primary { color: var(--ac-primary) !important; }
.akg-admin .text-muted { color: var(--ac-ink-3) !important; }
.akg-admin .dropdown-menu {
    border: 1px solid var(--ac-border); border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-pop); padding: 6px; font-size: 13.5px;
}
.akg-admin .dropdown-item { border-radius: var(--ac-radius-sm); padding: 7px 10px; color: var(--ac-ink-2); }
.akg-admin .dropdown-item:hover { background: var(--ac-surface-sunken); color: var(--ac-ink); }

/* Typography reset inside admin (global app.css sets big bold headings) */
.akg-admin h1 { font-size: 24px; }
.akg-admin h2 { font-size: 20px; }
.akg-admin h3 { font-size: 18px; }
.akg-admin h4 { font-size: 16px; }
.akg-admin h5 { font-size: 15px; }
.akg-admin h1, .akg-admin h2, .akg-admin h3, .akg-admin h4, .akg-admin h5, .akg-admin h6 {
    font-weight: 600; letter-spacing: -.01em; color: var(--ac-ink);
}

/* Avatar/initial circles — pages define these in flex rows without flex-shrink,
   so a wrapping name squeezes them into ovals. Lock them round everywhere. */
.akg-admin .avatar-circle,
.akg-admin .rounded-circle {
    flex-shrink: 0;
    align-self: center;
}
.akg-admin .avatar-circle { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------------------
   14. Page-load reveal — one orchestrated entrance, not scattered fidgets
   --------------------------------------------------------------------------- */
@keyframes ac-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.akg-admin .ac-rise { animation: ac-rise .4s cubic-bezier(.2,.7,.3,1) backwards; }
.akg-admin .ac-rise-1 { animation-delay: .03s; }
.akg-admin .ac-rise-2 { animation-delay: .08s; }
.akg-admin .ac-rise-3 { animation-delay: .13s; }
.akg-admin .ac-rise-4 { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .akg-admin .ac-rise { animation: none; } }

/* Two-column dashboard layout (main + right rail) */
.akg-admin .ac-split { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 992px) { .akg-admin .ac-split { grid-template-columns: minmax(0,1fr) 340px; } }

/* ---------------------------------------------------------------------------
   15. Command palette (⌘K)
   --------------------------------------------------------------------------- */
.akg-admin .ac-palette-scrim {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(24, 33, 46, .38);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 16px 16px;
    animation: ac-fade .12s ease;
}
@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
.akg-admin .ac-palette {
    width: 100%; max-width: 600px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-pop);
    overflow: hidden;
    animation: ac-pop .14s cubic-bezier(.2,.7,.3,1);
    display: flex; flex-direction: column; max-height: 64vh;
}
@keyframes ac-pop { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }

.akg-admin .ac-palette-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--ac-border);
}
.akg-admin .ac-palette-input-row > i { font-size: 17px; color: var(--ac-ink-3); }
.akg-admin .ac-palette-input-row input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-family: var(--ac-font-ui); font-size: 15px; color: var(--ac-ink);
}
.akg-admin .ac-palette-input-row input::placeholder { color: var(--ac-ink-3); }
.akg-admin .ac-palette-spin { width: 15px; height: 15px; border: 2px solid var(--ac-border-strong); border-top-color: var(--ac-primary); border-radius: 50%; animation: ac-spin .7s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

.akg-admin .ac-palette-results { overflow-y: auto; padding: 6px; }
.akg-admin .ac-palette-group {
    font-family: var(--ac-font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ac-ink-3);
    padding: 10px 10px 4px;
}
.akg-admin .ac-palette-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: var(--ac-radius-sm);
    cursor: pointer; color: var(--ac-ink); text-decoration: none;
}
.akg-admin .ac-palette-item .pi-icon {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 7px;
    display: grid; place-items: center; font-size: 14px;
    background: var(--ac-surface-sunken); color: var(--ac-ink-2);
}
.akg-admin .ac-palette-item.is-customer .pi-icon { background: var(--ac-primary-tint); color: var(--ac-primary); }
.akg-admin .ac-palette-item.is-order .pi-icon { background: var(--ac-accent-tint); color: var(--ac-accent); }
.akg-admin .ac-palette-item .pi-body { min-width: 0; flex: 1; }
.akg-admin .ac-palette-item .pi-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akg-admin .ac-palette-item .pi-sub { font-family: var(--ac-font-mono); font-size: 11.5px; color: var(--ac-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akg-admin .ac-palette-item .pi-enter { font-family: var(--ac-font-mono); font-size: 11px; color: var(--ac-ink-3); opacity: 0; }
.akg-admin .ac-palette-item.active { background: var(--ac-primary-tint); }
.akg-admin .ac-palette-item.active .pi-title { color: var(--ac-primary-700); }
.akg-admin .ac-palette-item.active .pi-enter { opacity: 1; }
.akg-admin .ac-palette-empty { padding: 28px 16px; text-align: center; color: var(--ac-ink-3); font-size: 13.5px; }
.akg-admin .ac-palette-foot {
    display: flex; align-items: center; gap: 16px;
    padding: 9px 16px; border-top: 1px solid var(--ac-border);
    background: var(--ac-surface-2); color: var(--ac-ink-3); font-size: 11.5px;
}
.akg-admin .ac-palette-foot .k { font-family: var(--ac-font-mono); border: 1px solid var(--ac-border-strong); border-radius: 4px; padding: 0 5px; margin-right: 4px; color: var(--ac-ink-2); }

/* Top-bar search becomes a button that opens the palette */
.akg-admin button.ac-search { font-family: var(--ac-font-ui); text-align: left; }

/* ---------------------------------------------------------------------------
   16. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .akg-admin .ac-search { display: none; }
    .akg-admin .ac-mobile-toggle {
        display: inline-grid; place-items: center;
        width: 36px; height: 36px; border-radius: var(--ac-radius-sm);
        border: 1px solid var(--ac-border); background: var(--ac-surface); color: var(--ac-ink-2);
    }
    .akg-admin .ac-sidebar {
        position: fixed; left: 0; top: var(--ac-topbar-h); bottom: 0; z-index: 1035;
        transform: translateX(-100%); transition: transform .25s ease; height: auto;
        box-shadow: var(--ac-shadow-pop);
    }
    .akg-admin .ac-sidebar.mobile-open { transform: translateX(0); }
    .akg-admin .ac-sidebar.sidebar-collapsed { width: var(--ac-sidebar-w); transform: translateX(-100%); }
    .akg-admin .ac-sidebar.sidebar-collapsed.mobile-open { transform: translateX(0); }
    .akg-admin .sidebar-collapsed .ac-nav-label,
    .akg-admin .sidebar-collapsed .ac-section-label,
    .akg-admin .sidebar-collapsed .ac-version span { display: revert; }
    .akg-admin .sidebar-collapsed .nav-link { justify-content: flex-start; padding: 7px 10px; }
    .akg-admin .ac-main { padding: 18px 16px 48px; }
    .akg-admin .ac-topbar-link span { display: none; }
}

/* ---------------------------------------------------------------------------
   17. Dark theme — toggled by adding .ac-dark to <html>
   Tokens carry most of it; the overrides below handle the few hardcoded colors.
   --------------------------------------------------------------------------- */
html.ac-dark .akg-admin {
    /* Flip native UA controls (select option popups, scrollbars, autofill, date
       pickers) to the dark scheme. Author CSS alone cannot reach the open native
       popup — only `color-scheme: dark` makes it render dark. */
    color-scheme: dark;

    --ac-app-bg: #0e131a;
    --ac-surface: #161d27;
    --ac-surface-2: #1b2431;
    --ac-surface-sunken: #10161e;
    --ac-border: #273140;
    --ac-border-strong: #38475a;

    --ac-ink: #e7ecf3;
    --ac-ink-2: #aab6c4;
    --ac-ink-3: #71808f;

    --ac-primary: #3f7fd6;
    --ac-primary-600: #5a93de;
    --ac-primary-700: #aecaf2;
    --ac-primary-tint: #172741;
    --ac-primary-tint-2: #1d3a5f;

    --ac-accent: #e89a3e;
    --ac-accent-tint: #2c2213;

    --ac-success: #3fbd74;  --ac-success-tint: #12281c;
    --ac-warning: #d8a445;  --ac-warning-tint: #2a2210;
    --ac-danger:  #e8615a;  --ac-danger-tint:  #2c1715;
    --ac-info:    #3f7fd6;  --ac-info-tint:    #172741;

    --ac-shadow-1: 0 1px 2px rgba(0,0,0,.40);
    --ac-shadow-2: 0 4px 16px rgba(0,0,0,.45);
    --ac-shadow-pop: 0 14px 34px rgba(0,0,0,.55);

    /* Re-point Bootstrap's own theme variables to the dark palette. Bootstrap
       hardcodes light-theme darks (#212529 body, #000 emphasis, and table cells
       read --bs-table-color) that the --ac-* token cascade can't reach, so default
       body text, table cells, headings, and .form-text render near-black on dark.
       Mapping the --bs-* vars here flips all of them in one place.
       Values are the literal --ac-ink* hexes: ink #e7ecf3, ink-2 #aab6c4, ink-3 #71808f. */
    --bs-body-color: #e7ecf3;
    --bs-body-color-rgb: 231,236,243;
    --bs-emphasis-color: #e7ecf3;
    --bs-emphasis-color-rgb: 231,236,243;
    --bs-heading-color: #e7ecf3;
    --bs-secondary-color: rgba(170,182,196,.85);
    --bs-secondary-color-rgb: 170,182,196;
    --bs-tertiary-color: rgba(113,128,143,.75);
    --bs-tertiary-color-rgb: 113,128,143;
    --bs-table-color: #e7ecf3;
    --bs-table-color-rgb: 231,236,243;
}

/* Dropdown panels (dark) — both Bootstrap .dropdown-menu and the custom
   SearchableDropdown render light by default on dark:
   - Bootstrap's .dropdown-menu reads --bs-dropdown-bg → --bs-body-bg, which the
     token cascade never re-points, so the panel paints #fff while child text
     uses the dark --bs-body-color (light gray) → unreadable light-on-white.
     Seen on the SmartBox "Columns (N)" picker, but applies to every admin
     Bootstrap dropdown.
   - SearchableDropdown.razor.css hardcodes `background:#fff` on its menu and
     light --bs-* fallbacks on its items (Year/Make/Model on Retail Portfolio).
   Map both to dark console tokens so all /admin/* dropdowns read on dark. */
html.ac-dark .akg-admin .dropdown-menu {
    --bs-dropdown-bg: var(--ac-surface);
    --bs-dropdown-color: var(--ac-ink);
    --bs-dropdown-border-color: var(--ac-border);
    --bs-dropdown-link-color: var(--ac-ink-2);
    --bs-dropdown-link-hover-color: var(--ac-ink);
    --bs-dropdown-link-hover-bg: var(--ac-surface-sunken);
    --bs-dropdown-divider-bg: var(--ac-border);
    background-color: var(--ac-surface);
    color: var(--ac-ink);
}
/* Content inside dropdown panels (labels, headings, plain text) that doesn't
   inherit a token color — keep it readable on the dark panel. */
html.ac-dark .akg-admin .dropdown-menu .form-check-label,
html.ac-dark .akg-admin .dropdown-menu label,
html.ac-dark .akg-admin .dropdown-menu .dropdown-header { color: var(--ac-ink-2); }

/* Custom SearchableDropdown popup (Year / Make / Model on Retail Portfolio
   Structured, and any other admin page using the component). */
html.ac-dark .akg-admin .searchable-dropdown-menu {
    background: var(--ac-surface);
    border-color: var(--ac-border);
    box-shadow: var(--ac-shadow-pop);
}
html.ac-dark .akg-admin .searchable-dropdown-item { color: var(--ac-ink-2); }
html.ac-dark .akg-admin .searchable-dropdown-item:hover { background: var(--ac-surface-sunken); color: var(--ac-ink); }
html.ac-dark .akg-admin .searchable-dropdown-item-active { background: var(--ac-primary-tint); color: var(--ac-ink); }
html.ac-dark .akg-admin .searchable-dropdown-item-any { border-bottom-color: var(--ac-border); color: var(--ac-ink-3); }
html.ac-dark .akg-admin .searchable-dropdown-item-empty { color: var(--ac-ink-3); }


/* Badges: drop the light hairline borders that don't read on dark */
html.ac-dark .akg-admin .badge { border-color: transparent !important; }

/* `.bg-dark` count badges (e.g. VIO "Versions" tab) read poorly on the dark
   page — a near-black pill on a near-black background with no defined edge.
   Bootstrap's --bs-dark-rgb isn't re-pointed by the dark token cascade. Remap
   to a raised neutral surface with a defined border + ink text so the count
   stays legible. Theme-level, so every admin `.badge.bg-dark` is covered. */
html.ac-dark .akg-admin .badge.bg-dark {
    background-color: var(--ac-surface-2) !important;
    color: var(--ac-ink) !important;
    border-color: var(--ac-border-strong) !important;
}

/* Alerts use hardcoded light values — restate them for dark */
html.ac-dark .akg-admin .alert-success { background: var(--ac-success-tint); border-color: #1f5236; color: #7fd6a3; }
html.ac-dark .akg-admin .alert-warning { background: var(--ac-warning-tint); border-color: #4a3a18; color: #e8c074; }
html.ac-dark .akg-admin .alert-danger  { background: var(--ac-danger-tint);  border-color: #582623; color: #f0938c; }
html.ac-dark .akg-admin .alert-info    { background: var(--ac-info-tint);    border-color: #25395a; color: var(--ac-primary-700); }

/* Outline buttons: hardcoded pale borders → dark-friendly */
html.ac-dark .akg-admin .btn-outline-success { border-color: #1f5236; }
html.ac-dark .akg-admin .btn-outline-warning { border-color: #4a3a18; }
html.ac-dark .akg-admin .btn-outline-danger  { border-color: #582623; }

/* Environment pill + stale-shipment header readability on dark */
html.ac-dark .akg-admin .ac-env.is-prod { border-color: #1f5236; }
html.ac-dark .akg-admin .ac-env.is-nonprod { border-color: #4a3a18; }
html.ac-dark .akg-admin .card.border-warning { border-color: #4a3a18 !important; }
html.ac-dark .akg-admin .card.border-warning .card-header.bg-warning,
html.ac-dark .akg-admin .card.border-warning .card-header.bg-warning * { color: #e8c074 !important; border-bottom-color: #4a3a18 !important; }

/* Content links (app.css forces a dark brand blue that's low-contrast on dark) */
html.ac-dark .akg-admin .table a,
html.ac-dark .akg-admin .card-body a,
html.ac-dark .akg-admin .ac-panel-body a,
html.ac-dark .akg-admin .ac-metric-foot a { color: var(--ac-primary-700); }

/* Bootstrap close button (modals) needs inverting on dark */
html.ac-dark .akg-admin .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Generic Bootstrap light surfaces used outside the stat-card family — nested
   .bg-light info boxes inside modals, member/role cards, sub-panels — flip to a
   subtly-raised dark surface so they don't render as white blocks on dark. */
html.ac-dark .akg-admin .bg-light { background-color: var(--ac-surface-2) !important; }
html.ac-dark .akg-admin .bg-white { background-color: var(--ac-surface) !important; }

/* Checkboxes / radios / switches: Bootstrap defaults to a white fill that reads
   as a bright square on dark surfaces (very visible in modals). Give them a dark
   fill + visible border, primary when checked, and a light switch knob. */
html.ac-dark .akg-admin .form-check-input {
    background-color: var(--ac-surface-sunken);
    border-color: var(--ac-border-strong);
}
html.ac-dark .akg-admin .form-check-input:checked {
    background-color: var(--ac-primary);
    border-color: var(--ac-primary);
}
html.ac-dark .akg-admin .form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23aab6c4'/%3e%3c/svg%3e");
}
html.ac-dark .akg-admin .form-check-input:focus {
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 3px var(--ac-primary-tint-2);
}

/* Theme toggle button */
.akg-admin .ac-theme-btn {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: var(--ac-radius-sm);
    border: 0; background: transparent; color: var(--ac-ink-2);
    cursor: pointer; transition: background .15s, color .15s;
}
.akg-admin .ac-theme-btn:hover { background: var(--ac-surface-sunken); color: var(--ac-ink); }
.akg-admin .ac-theme-btn i { font-size: 16px; }

/* ---------------------------------------------------------------------------
   18. Dark overrides for page-scoped component CSS (.razor.css)
   These pages hardcode light surfaces in their own scoped stylesheets, which
   admin-console.css can't reach via tokens. We override here with higher
   specificity (html.ac-dark .akg-admin … beats the [b-xxx]-scoped rules).
   --------------------------------------------------------------------------- */

/* Monitoring — event log expanded detail panels + code blocks */
html.ac-dark .akg-admin .expanded-details { background-color: var(--ac-surface-2); border-left-color: var(--ac-border-strong); }
html.ac-dark .akg-admin .expanded-details.border-critical { background-color: var(--ac-danger-tint); }
html.ac-dark .akg-admin .expanded-details pre { background-color: var(--ac-surface-sunken); border-color: var(--ac-border); color: var(--ac-ink); }
html.ac-dark .akg-admin .event-row:hover { background-color: rgba(255,255,255,.04); }
html.ac-dark .akg-admin .pagination-info { color: var(--ac-ink-3); }

/* Card Template Designer — editor chrome (drop zones, palette, sortable items).
   NOTE: the card *preview* below is deliberately kept light — it shows the card
   as it prints, so it must not adopt the dark console surface. */
html.ac-dark .akg-admin .zone-drop-target:empty { background: var(--ac-surface-sunken); border-color: var(--ac-border-strong); }
html.ac-dark .akg-admin .sortable-field { background: var(--ac-surface-2); }
html.ac-dark .akg-admin .sortable-ghost { background: var(--ac-primary-tint) !important; border-color: var(--ac-primary) !important; }
html.ac-dark .akg-admin .palette-field:hover { background-color: var(--ac-primary-tint); border-color: var(--ac-primary); }
html.ac-dark .akg-admin .bg-light.border.rounded { background-color: var(--ac-surface-2) !important; border-color: var(--ac-border-strong) !important; }
html.ac-dark .akg-admin .border-dashed { border-color: var(--ac-border-strong) !important; }
/* Keep the card preview on a white card surface in BOTH modes (overrides the
   global .modal-content surface fill for the inline preview only). */
.akg-admin .preview-modal-container .modal-content,
.akg-admin .preview-container .card { background: #ffffff; color: #18212e; }

/* Retail Portfolio (Structured) matrix — RetailPortfolioAnalysisStructured.razor.css
   hardcodes light cell surfaces (#fff sticky col, #f8f9fa header/footer, #fafafa
   gaps, and the #f0f8ff/#effaf2/#fff8e1 cell-type tints) that the token cascade
   can't reach. Map each to the matching dark token so the grid reads as dark while
   preserving the type colour-coding (filled = blue, channel = green, alternate =
   amber). Higher specificity (html.ac-dark .akg-admin …) beats the [b-xxx] rules. */
html.ac-dark .akg-admin .structured-matrix .sticky-col {
    background: var(--ac-surface);
    border-right-color: var(--ac-border);
}
html.ac-dark .akg-admin .structured-matrix thead .sticky-col,
html.ac-dark .akg-admin .structured-matrix tfoot .sticky-col,
html.ac-dark .akg-admin .structured-matrix tfoot td { background: var(--ac-surface-2); }
html.ac-dark .akg-admin .structured-matrix td.gap-cell { background: var(--ac-surface-sunken); }
html.ac-dark .akg-admin .structured-matrix td.cell-filled { background: var(--ac-primary-tint); }
html.ac-dark .akg-admin .structured-matrix td.cell-channel { background: var(--ac-success-tint); }
html.ac-dark .akg-admin .structured-matrix td.cell-alternate { background: var(--ac-warning-tint); }
html.ac-dark .akg-admin .qoh-badge { color: var(--ac-ink-2); }

/* Retail Portfolio (Structured) — scoped matrix cells hardcode light fills.
   Higher specificity (extra .structured-matrix class) beats the ::deep rules.
   NOTE: applied by inspection — the matrix only renders with selected filters +
   data, which wasn't populated during verification. */
html.ac-dark .akg-admin .structured-matrix .sticky-col { background: var(--ac-surface); }
html.ac-dark .akg-admin .structured-matrix thead .sticky-col,
html.ac-dark .akg-admin .structured-matrix tfoot .sticky-col,
html.ac-dark .akg-admin .structured-matrix tfoot td { background: var(--ac-surface-2); }
html.ac-dark .akg-admin .structured-matrix td.gap-cell { background: var(--ac-surface-sunken); }
html.ac-dark .akg-admin .structured-matrix td.cell-filled { background: var(--ac-primary-tint); }
html.ac-dark .akg-admin .structured-matrix td.cell-channel { background: var(--ac-success-tint); }
html.ac-dark .akg-admin .structured-matrix td.cell-alternate { background: var(--ac-warning-tint); }
html.ac-dark .akg-admin .qoh-badge { color: var(--ac-ink-2); }

/* Retail Portfolio (heatmap / variant-d) — bespoke light-designed panels, KPI
   strip, matrix row labels and empty cells. The colored tier cells (.cell.t1-t4)
   already use white text on saturated fills and read fine on dark, so they're
   left as-is. NOTE: applied by inspection — needs loaded data to verify live. */
html.ac-dark .akg-admin .panel { background: var(--ac-surface); border-color: var(--ac-border); }
html.ac-dark .akg-admin .panel-h { border-bottom-color: var(--ac-border); color: var(--ac-ink); }
html.ac-dark .akg-admin .kpis { background: var(--ac-border); border-color: var(--ac-border); }
html.ac-dark .akg-admin .kpi { background: var(--ac-surface); }
html.ac-dark .akg-admin .kpi.channel { background: linear-gradient(135deg, rgba(232,154,62,.10), var(--ac-surface)); }
html.ac-dark .akg-admin .kpi .val { color: var(--ac-ink); }
html.ac-dark .akg-admin .matrix td.ymm { background: var(--ac-surface-2); color: var(--ac-ink); }
html.ac-dark .akg-admin .cell.empty { background: var(--ac-surface-sunken); color: var(--ac-ink-3); }
html.ac-dark .akg-admin .presets .badge-preset { background: var(--ac-surface); color: var(--ac-ink-2); border-color: var(--ac-border-strong); }
html.ac-dark .akg-admin .tier-grid .row-head { color: var(--ac-ink); }