/* =====================================================
   Alpaca OS — "Intelligence" design system
   Dark rail (52) + white sidebar (220) + topbar + content
   Brand palette:
     navy   #1a1a2e  (rail / hero)
     orange #e8670a  (primary CTA / accent)
     orange-hover  #d45e09
     orange-dim    #f07a30
     wash   #f5f5f3  (content bg)
     mute   #f3f2f1  (chip bg)
   ===================================================== */
/* ===================================================================
   THEME SYSTEM — each palette below is selectable from the topbar
   "Theme" button. Every theme defines the same set of CSS variables;
   our shell + page CSS reads from them, so swapping a theme retints
   the whole app instantly. No reload needed.
   =================================================================== */

/* DEFAULT (Light theme) — same as before */
:root, html[data-theme="light"] {
    --aos-navy:        #1a1a2e;
    --aos-orange:      #e8670a;
    --aos-orange-hi:   #f07a30;
    --aos-orange-lo:   #d45e09;
    --aos-orange-bg:   #fff3ec;
    --aos-orange-text: #c45a08;
    --aos-wash:        #f5f5f3;          /* page background */
    --aos-card-bg:     #ffffff;          /* elevated cards on page */
    --aos-input-bg:    #ffffff;          /* inputs / dropdowns */
    --aos-mute:        #f3f2f1;
    --aos-border:      #e5e5e5;
    --aos-border-soft: #f0f0f0;
    --aos-ink:         #111;
    --aos-ink-sub:     #555;
    --aos-ink-dim:     #888;
    --aos-ink-faint:   #aaa;
    --aos-chart-axis:  #666;             /* DxChart axis text */
    --aos-chart-grid:  rgba(0,0,0,.08);  /* gridlines */
}

/* ---- GLASS THEMES ---- */

/* Dark — slate-blue palette matching modern "premium" dark themes.
   Layered elevation: page (slate-900) → cards (slate-800) → inputs (slate-700).
   Vibrant orange accent stands out against the cool blue background. */
html[data-theme="dark"] {
    --aos-navy:        #0a0e1a;          /* rail — darker than page for contrast */
    --aos-orange:      #fb923c;          /* brighter orange — pops on blue-slate */
    --aos-orange-hi:   #fdba74;
    --aos-orange-lo:   #ea580c;
    --aos-orange-bg:   #1e293b;          /* slate-800 — same as card for nav hover */
    --aos-orange-text: #fb923c;          /* bright orange link text */
    --aos-wash:        #0f172a;          /* slate-900 — page bg */
    --aos-card-bg:     #1e293b;          /* slate-800 — elevated 1 step */
    --aos-input-bg:    #334155;          /* slate-700 — elevated 2 steps */
    --aos-mute:        #1e293b;
    --aos-border:      #334155;          /* slate-700 — visible but soft */
    --aos-border-soft: #1e293b;
    --aos-ink:         #f1f5f9;          /* slate-100 — primary text */
    --aos-ink-sub:     #cbd5e1;          /* slate-300 — secondary text */
    --aos-ink-dim:     #94a3b8;          /* slate-400 — labels */
    --aos-ink-faint:   #64748b;          /* slate-500 — disabled / placeholder */
    --aos-chart-axis:  #cbd5e1;          /* bright axis labels */
    --aos-chart-grid:  rgba(148, 163, 184, .12);
    --bs-body-bg:      #0f172a;
    --bs-body-color:   #f1f5f9;
    --bs-emphasis-color: #ffffff;
    --bs-tertiary-bg:  #1e293b;
    --bs-secondary-bg: #334155;
    --bs-secondary-color: #94a3b8;
    --bs-border-color: #334155;
}

/* Lab — cool blue / clinical */
html[data-theme="lab"] {
    --aos-navy:        #1e3a5f;
    --aos-orange:      #2563eb;
    --aos-orange-hi:   #3b82f6;
    --aos-orange-lo:   #1d4ed8;
    --aos-orange-bg:   #eef4ff;
    --aos-orange-text: #1e40af;
    --aos-wash:        #f5f8fc;
    --aos-mute:        #eef2f7;
}

/* Botanical — green palette */
html[data-theme="botanical"] {
    --aos-navy:        #1a3322;
    --aos-orange:      #16a34a;
    --aos-orange-hi:   #22c55e;
    --aos-orange-lo:   #15803d;
    --aos-orange-bg:   #ecfdf3;
    --aos-orange-text: #14532d;
    --aos-wash:        #f5faf6;
    --aos-mute:        #eef5ef;
}

/* Sunrise — warm pink/orange */
html[data-theme="sunrise"] {
    --aos-navy:        #4a1d2e;
    --aos-orange:      #f43f5e;
    --aos-orange-hi:   #fb7185;
    --aos-orange-lo:   #e11d48;
    --aos-orange-bg:   #fff1f3;
    --aos-orange-text: #9f1239;
    --aos-wash:        #fdf6f4;
    --aos-mute:        #fbeeea;
}

/* Arctic — icy blue with white */
html[data-theme="arctic"] {
    --aos-navy:        #1e293b;
    --aos-orange:      #0891b2;
    --aos-orange-hi:   #06b6d4;
    --aos-orange-lo:   #0e7490;
    --aos-orange-bg:   #ecfeff;
    --aos-orange-text: #155e75;
    --aos-wash:        #f0f9ff;
    --aos-mute:        #e5f1f7;
}

/* Ocean — deep navy/teal */
html[data-theme="ocean"] {
    --aos-navy:        #0c1f2e;
    --aos-orange:      #14b8a6;
    --aos-orange-hi:   #2dd4bf;
    --aos-orange-lo:   #0f766e;
    --aos-orange-bg:   #ecfdfb;
    --aos-orange-text: #115e59;
    --aos-wash:        #f2faf9;
    --aos-mute:        #e8f3f1;
}

/* Nebula — purple/pink */
html[data-theme="nebula"] {
    --aos-navy:        #2a1a3e;
    --aos-orange:      #a855f7;
    --aos-orange-hi:   #c084fc;
    --aos-orange-lo:   #7e22ce;
    --aos-orange-bg:   #faf5ff;
    --aos-orange-text: #6b21a8;
    --aos-wash:        #faf7fd;
    --aos-mute:        #f3edfb;
}

/* Forest — deep forest green */
html[data-theme="forest"] {
    --aos-navy:        #1a2e1e;
    --aos-orange:      #15803d;
    --aos-orange-hi:   #22c55e;
    --aos-orange-lo:   #14532d;
    --aos-orange-bg:   #f0fdf4;
    --aos-orange-text: #14532d;
    --aos-wash:        #f5f9f5;
    --aos-mute:        #eaf2eb;
}

/* ---- OFFICE STYLE THEMES ---- */

/* Aqua — cyan/teal classic */
html[data-theme="aqua"] {
    --aos-navy:        #0e7490;
    --aos-orange:      #0891b2;
    --aos-orange-hi:   #06b6d4;
    --aos-orange-lo:   #0e7490;
    --aos-orange-bg:   #ecfeff;
    --aos-orange-text: #155e75;
    --aos-wash:        #f0fafd;
    --aos-mute:        #e5f4f7;
}

/* Office 2003 Blue */
html[data-theme="office2003-blue"] {
    --aos-navy:        #003c74;
    --aos-orange:      #0a5cb8;
    --aos-orange-hi:   #2978d0;
    --aos-orange-lo:   #084594;
    --aos-orange-bg:   #e7f0fb;
    --aos-orange-text: #084594;
    --aos-wash:        #f4f7fb;
    --aos-mute:        #e8eef6;
}

/* Office 2003 Olive */
html[data-theme="office2003-olive"] {
    --aos-navy:        #4a4f1f;
    --aos-orange:      #6b7d2c;
    --aos-orange-hi:   #8a9d3f;
    --aos-orange-lo:   #525e22;
    --aos-orange-bg:   #f4f6e8;
    --aos-orange-text: #525e22;
    --aos-wash:        #f6f7ee;
    --aos-mute:        #ecedda;
}

/* Office 2003 Silver */
html[data-theme="office2003-silver"] {
    --aos-navy:        #4a5158;
    --aos-orange:      #5e6770;
    --aos-orange-hi:   #7d8691;
    --aos-orange-lo:   #4a5158;
    --aos-orange-bg:   #eef0f3;
    --aos-orange-text: #3a4047;
    --aos-wash:        #f3f4f6;
    --aos-mute:        #e8ebee;
}

/* Soft Orange — same family as default but lighter */
html[data-theme="soft-orange"] {
    --aos-navy:        #3a2419;
    --aos-orange:      #fb923c;
    --aos-orange-hi:   #fdba74;
    --aos-orange-lo:   #ea580c;
    --aos-orange-bg:   #fff7ed;
    --aos-orange-text: #9a3412;
    --aos-wash:        #fdf9f5;
    --aos-mute:        #fbf2eb;
}

/* Red Wine — burgundy */
html[data-theme="red-wine"] {
    --aos-navy:        #3a1318;
    --aos-orange:      #be123c;
    --aos-orange-hi:   #e11d48;
    --aos-orange-lo:   #9f1239;
    --aos-orange-bg:   #fff1f3;
    --aos-orange-text: #881337;
    --aos-wash:        #fdf6f6;
    --aos-mute:        #f7eaec;
}

/* Plastic Blue */
html[data-theme="plastic-blue"] {
    --aos-navy:        #1e3a8a;
    --aos-orange:      #2563eb;
    --aos-orange-hi:   #3b82f6;
    --aos-orange-lo:   #1e40af;
    --aos-orange-bg:   #eff6ff;
    --aos-orange-text: #1e3a8a;
    --aos-wash:        #f4f7fc;
    --aos-mute:        #e8effa;
}

/* Black Glass — dark cousin of Dark, with glass-like greys */
html[data-theme="black-glass"] {
    --aos-navy:        #000000;
    --aos-orange:      #94a3b8;
    --aos-orange-hi:   #cbd5e1;
    --aos-orange-lo:   #64748b;
    --aos-orange-bg:   #1e293b;
    --aos-orange-text: #cbd5e1;
    --aos-wash:        #0f172a;
    --aos-mute:        #1e293b;
    --aos-border:      #334155;
    --aos-border-soft: #1e293b;
    --aos-ink:         #e2e8f0;
    --aos-ink-sub:     #cbd5e1;
    --aos-ink-dim:     #94a3b8;
    --aos-ink-faint:   #64748b;
    --bs-body-bg:      #1e293b;
    --bs-body-color:   #e2e8f0;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, sans-serif;
    min-height: 100vh;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--aos-mute);
    color: var(--aos-ink);
    height: 100vh;
    overflow: hidden;
}

/* =====================================================
   GLOBAL SCROLLBAR — thin, modern, consistent everywhere
   Applies to every scrollable container in the app (tables,
   grids, popups, sidebar, content area). Targets both
   WebKit (Chrome/Edge/Safari) and Firefox.
   ===================================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

/* WebKit-based browsers — slim track + rounded thumb that darkens on hover */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: #9aa0a6;
    background-clip: padding-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark areas (rail + sidebar) — use a lighter scrollbar on dark background */
.aos-rail *::-webkit-scrollbar-thumb,
.aos-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #d4d4d4;
}

/* =====================================================
   ICON FONT GUARDS — minimal, non-destructive.
   Just normalize the <i> tag so it isn't italic and renders
   on a single line. We do NOT clamp size here — each icon
   container sets its own font-size (rail = 19px, nav = 14px,
   table headers = 11px, etc.). The earlier max-width / overflow
   hidden rules were clipping rail icons to invisibility.
   ===================================================== */
i.ti, [class^="ti-"], [class*=" ti-"],
i.bi, [class^="bi-"], [class*=" bi-"] {
    line-height: 1;
    font-style: normal;
    vertical-align: middle;
}

/* =====================================================
   SHELL: rail (52) | sidebar (220) | main (rest)
   ===================================================== */
.aos-shell { display: flex; height: 100vh; }

/* ----- Dark icon rail ----- */
.aos-rail {
    width: 52px; min-width: 52px;
    height: 100vh;                /* explicit so it stretches even if flex stretch is overridden */
    background: var(--aos-navy);
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 0; gap: 2px;
    flex-shrink: 0;
}
.aos-rail-logo {
    width: 34px; height: 34px;
    background: var(--aos-orange);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; flex-shrink: 0;
}
.aos-rail-logo i { font-size: 20px; color: #fff; }
.aos-rail-item {
    width: 40px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: rgba(255,255,255,0.65);    /* was .4 — too dim */
    transition: background .15s, color .15s;
    flex-shrink: 0;
    text-decoration: none;
}
.aos-rail-item:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.95); }
.aos-rail-item.active {
    background: color-mix(in srgb, var(--aos-orange) 22%, transparent);
    color: var(--aos-orange-hi);
}
.aos-rail-item i { font-size: 19px; }
.aos-rail-sep { width: 28px; height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; flex-shrink: 0; }
.aos-rail-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--aos-orange); color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: auto; cursor: pointer; flex-shrink: 0;
    text-decoration: none;
}

/* ----- White sidebar — theme-aware ----- */
.aos-sidebar {
    width: 220px; min-width: 220px;
    height: 100vh;
    background: var(--aos-card-bg);
    border-right: 1px solid var(--aos-border);
    color: var(--aos-ink);
    display: flex; flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
.aos-sidebar-brand {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--aos-border);
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
}
.aos-brand-icon {
    width: 32px; height: 32px;
    background: var(--aos-orange); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.aos-brand-icon i { font-size: 17px; color: #fff; }
.aos-brand-name { font-size: 13px; font-weight: 700; color: var(--aos-ink); line-height: 1.2; }
.aos-brand-sub  { font-size: 10px; color: var(--aos-ink-dim); margin-top: 1px; }

.aos-sidebar-search {
    display: flex; align-items: center; gap: 7px;
    background: var(--aos-mute);
    border: 1px solid var(--aos-border);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 10px 14px 6px;
}
.aos-sidebar-search i { font-size: 13px; color: var(--aos-ink-dim); flex-shrink: 0; }
.aos-sidebar-search input { border: none; background: transparent; outline: none; font-size: 12px; color: var(--aos-ink); width: 100%; }
.aos-sidebar-search input::placeholder { color: var(--aos-ink-dim); }

.aos-sidebar-scroll { flex: 1; overflow-y: auto; padding: 4px 0 16px; }
.aos-sidebar-scroll::-webkit-scrollbar { width: 3px; }
.aos-sidebar-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

.aos-nav-section {
    font-size: 10px; font-weight: 600;
    color: var(--aos-ink-faint);
    padding: 8px 14px 3px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.aos-nav-sep { height: 1px; background: var(--aos-border-soft); margin: 5px 14px; }
.aos-nav-link {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--aos-ink-sub);
    text-decoration: none;
    cursor: pointer;
    transition: background .1s, color .1s;
    border-left: 3px solid transparent;
}
.aos-nav-link:hover { background: var(--aos-mute); color: var(--aos-ink); }
.aos-nav-link.active,
.aos-nav-link.active:hover {
    background: var(--aos-orange-bg);
    color: var(--aos-orange-text);
    font-weight: 600;
    border-left-color: var(--aos-orange);
}
.aos-nav-link i { font-size: 14px; min-width: 14px; flex-shrink: 0; }
.aos-nav-badge {
    margin-left: auto;
    background: var(--aos-orange); color: #fff;
    font-size: 9px; padding: 1px 6px; border-radius: 8px;
    font-weight: 600;
}

.aos-sidebar-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--aos-border-soft);
    font-size: 10px; color: #bbb;
    flex-shrink: 0;
}

/* ----- Main column ----- */
.aos-app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.aos-app-topbar {
    background: var(--aos-card-bg);
    border-bottom: 1px solid var(--aos-border);
    padding: 0 20px;
    height: 48px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.aos-app-topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aos-app-topbar-left > i { font-size: 16px; color: var(--aos-ink-dim); }
.aos-app-topbar-title { font-size: 14px; font-weight: 600; color: var(--aos-ink); white-space: nowrap; }
.aos-app-topbar-sub   { font-size: 12px; color: var(--aos-ink-dim); margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aos-app-topbar-right { display: flex; align-items: center; gap: 8px; }
.aos-version-tag {
    font-size: 10px; color: var(--aos-ink-dim);
    background: var(--aos-mute);
    border: 1px solid var(--aos-border);
    padding: 3px 9px; border-radius: 6px;
}
.aos-app-topbar-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--aos-orange); color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; cursor: pointer;
}
.aos-signout {
    font-size: 11px; color: var(--aos-ink-dim);
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.aos-signout:hover { background: var(--aos-mute); color: var(--aos-ink); }
.aos-signout i { font-size: 14px; }

.aos-content {
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
    overflow-y: auto;
    padding: 14px 18px;
    background: var(--aos-wash);
}
.aos-content::-webkit-scrollbar { width: 6px; }
.aos-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* Every direct child of the content area fills the full width. Without this,
   pages that use display:block default still fit but pages using flex/grid can
   shrink in unexpected ways on wide monitors. */
.aos-content > * { width: 100%; box-sizing: border-box; max-width: none; }
.aos-content > .aos-fill-page { min-height: 100%; }
.aos-content > .aos-fill-page > * { width: 100%; }

/* =====================================================
   MOBILE — hamburger drawer + touch-friendly tweaks
   ===================================================== */

/* Hamburger button — hidden on desktop, shown on mobile */
.aos-mobile-menu {
    display: none;
    background: transparent; border: 0;
    padding: 6px; border-radius: 6px;
    cursor: pointer; color: var(--aos-ink);
}
.aos-mobile-menu i { font-size: 20px; }
.aos-mobile-menu:hover { background: var(--aos-mute); }

/* Scrim overlay (hidden by default; shown when drawer is open on mobile) */
.aos-shell-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 40;
}

/* TABLET (<= 900 px) — collapse sidebar into a drawer behind the rail.
   The rail stays visible (icon-only nav still usable). */
@media (max-width: 900px) {
    .aos-mobile-menu { display: inline-flex; align-items: center; }
    .aos-sidebar {
        position: fixed;
        left: 52px; top: 0; bottom: 0;
        z-index: 50;
        width: 240px; min-width: 240px;
        transform: translateX(-110%);
        transition: transform .25s ease;
        box-shadow: 0 0 30px rgba(0,0,0,.18);
    }
    .aos-shell.drawer-open .aos-sidebar { transform: translateX(0); }
    .aos-shell.drawer-open .aos-shell-scrim { display: block; }
}

/* PHONE (<= 600 px) — hide rail too; only hamburger + topbar visible.
   Drawer opens flush against left edge. Content uses 100% width. */
@media (max-width: 600px) {
    .aos-rail { display: none; }
    .aos-sidebar { left: 0; }

    .aos-app-topbar { padding: 0 10px; height: 52px; }
    .aos-app-topbar .aos-version-tag,
    .aos-app-topbar-sub { display: none; }   /* hide non-essential topbar items */
    .aos-signout span { display: none; }     /* icon-only signout */

    .aos-content { padding: 10px; }

    /* Hero stacks vertically on phone */
    .aos-hero { padding: 18px 18px; flex-direction: column; align-items: flex-start; }
    .aos-hero-stats { gap: 14px; width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .aos-hero-stats .aos-hstat-div { display: none; }
    .aos-hstat-val { font-size: 22px; }
    .aos-hero-title { font-size: 18px; }

    /* Filter popups go full-screen so the form is usable */
    .aos-filter-popup .dxbs-popup-window,
    .aos-filter-popup .dxbs-popup-content {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
    }
    .aos-modal { width: 96vw; max-width: 96vw; }
}

/* Touch-friendly: when the primary input is a finger, bump tap targets.
   Catches mobile + tablets regardless of screen size. */
@media (pointer: coarse) {
    .aos-btn { height: 40px; padding: 8px 16px; font-size: 13px; }
    .aos-input, .aos-select { height: 40px; font-size: 14px; }
    .aos-nav-link { padding: 11px 14px; }
    .aos-rail-item { width: 44px; height: 40px; }
    input[type="checkbox"] { width: 18px; height: 18px; }
}

/* =====================================================
   HOME / DASHBOARD — hero + module cards + recent activity
   ===================================================== */
.aos-home { display: flex; flex-direction: column; gap: 4px; }

/* Hero */
.aos-hero {
    background: var(--aos-navy);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 22px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.aos-hero-left { min-width: 260px; }
.aos-hero-eyebrow {
    font-size: 10px; color: var(--aos-orange-hi);
    letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 8px;
}
.aos-hero-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.aos-hero-sub   { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 20px; line-height: 1.5; max-width: 380px; }
.aos-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--aos-orange); color: #fff;
    font-size: 13px; font-weight: 600;
    padding: 9px 20px; border-radius: 8px;
    cursor: pointer; transition: background .15s; border: none;
}
.aos-hero-btn:hover { background: var(--aos-orange-lo); }
.aos-hero-btn i { font-size: 16px; }

.aos-hero-stats { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.aos-hstat { text-align: center; }
.aos-hstat-val { font-size: 28px; font-weight: 700; color: #fff; line-height: 1.1; }
.aos-hstat-val.g { color: #5DCAA5; }
.aos-hstat-val.o { color: var(--aos-orange-hi); }
.aos-hstat-val.r { color: #f07070; }
.aos-hstat-lbl { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 3px; }
.aos-hstat-div { width: 1px; background: rgba(255,255,255,0.1); height: 52px; align-self: center; }

/* Section header */
.aos-sec-hdr { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; }
.aos-sec-title { font-size: 14px; font-weight: 600; color: var(--aos-ink); }
.aos-sec-action {
    font-size: 12px; color: var(--aos-orange);
    cursor: pointer; font-weight: 500;
    text-decoration: none;
}
.aos-sec-action:hover { text-decoration: underline; color: var(--aos-orange-lo); }

/* Module cards grid — responsive at every monitor size */
.aos-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
/* Wide monitor (27" FHD+ and 4K) — 4 columns so cards aren't sparse */
@media (min-width: 1600px) { .aos-grid3 { grid-template-columns: repeat(4, 1fr); } }
/* Ultra-wide / 4K monitor — 5 columns */
@media (min-width: 2200px) { .aos-grid3 { grid-template-columns: repeat(5, 1fr); } }
/* Laptop / iPad landscape — 2 columns */
@media (max-width: 1100px) { .aos-grid3 { grid-template-columns: repeat(2,1fr); } }
/* Small tablet / large phone — 1 column */
@media (max-width: 700px)  { .aos-grid3 { grid-template-columns: 1fr; } }

.aos-mc {
    background: var(--aos-card-bg);
    border: 1px solid var(--aos-border);
    color: var(--aos-ink);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    display: flex; flex-direction: column;
}
.aos-mc:hover {
    border-color: var(--aos-ink-faint);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}
.aos-mc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.aos-mc-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.aos-mc-icon i { font-size: 20px; }
/* Pastel icon backgrounds */
.aos-mc-icon.ic-o  { background: #fff3ec; color: #c45a08; }
.aos-mc-icon.ic-b  { background: #E6F1FB; color: #185FA5; }
.aos-mc-icon.ic-t  { background: #E1F5EE; color: #0F6E56; }
.aos-mc-icon.ic-p  { background: #EEEDFE; color: #534AB7; }
.aos-mc-icon.ic-a  { background: #FAEEDA; color: #854F0B; }
.aos-mc-icon.ic-g  { background: #EAF3DE; color: #3B6D11; }
.aos-mc-icon.ic-c  { background: #FAECE7; color: #712B13; }
.aos-mc-icon.ic-pk { background: #FBEAF0; color: #72243E; }

.aos-mc-name { font-size: 14px; font-weight: 600; color: var(--aos-ink); }
.aos-mc-sub  { font-size: 11px; color: var(--aos-ink-dim); margin-top: 2px; }
.aos-mc-desc { font-size: 12px; color: var(--aos-ink-sub); line-height: 1.55; margin-bottom: 14px; flex: 1; }
.aos-mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.aos-mc-btn {
    font-size: 12px;
    border: 1px solid var(--aos-border); border-radius: 8px;
    padding: 5px 18px;
    cursor: pointer; color: var(--aos-ink); background: var(--aos-card-bg);
    font-weight: 500; transition: background .12s, border-color .12s;
}
.aos-mc-btn:hover { background: var(--aos-mute); border-color: var(--aos-ink-faint); }
.aos-mc-tag { font-size: 10px; padding: 3px 9px; border-radius: 5px; font-weight: 600; }
.aos-mc-tag.t-ops { background: #fff3ec; color: #c45a08; }
.aos-mc-tag.t-ins { background: #E6F1FB; color: #185FA5; }
.aos-mc-tag.t-adm { background: var(--aos-mute); color: var(--aos-ink-sub); }

/* Recent activity — theme-aware */
.aos-recent-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px) { .aos-recent-row { grid-template-columns: 1fr; } }
.aos-rc {
    background: var(--aos-card-bg);
    border: 1px solid var(--aos-border);
    color: var(--aos-ink);
    border-radius: 12px;
    padding: 16px;
}
.aos-rc-title { font-size: 13px; font-weight: 600; color: var(--aos-ink); margin-bottom: 12px; }
.aos-rc-empty { font-size: 12px; color: var(--aos-ink-dim); padding: 8px 0; }
.aos-rc-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--aos-border-soft);
}
.aos-rc-item:last-child { border-bottom: none; }
.aos-rc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.aos-rc-dot.dot-g { background: #1D9E75; }
.aos-rc-dot.dot-o { background: var(--aos-orange); }
.aos-rc-dot.dot-b { background: #185FA5; }
.aos-rc-dot.dot-r { background: #E24B4A; }
.aos-rc-label { font-size: 12px; color: var(--aos-ink-sub); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aos-rc-val   { font-size: 11px; color: var(--aos-ink-dim); white-space: nowrap; }

.aos-home-foot { text-align: center; padding: 14px; font-size: 11px; color: var(--aos-ink-faint); }

/* =====================================================
   Intelligence palette — override Bootstrap CSS variables
   so EVERY legacy rule referencing --bs-primary, etc.
   automatically retints to the new orange/navy theme.
   Inner pages (PendingJobs, Reports, Results, Historic,
   WebUsers, Roles) get the new look without code changes.
   ===================================================== */
:root {
    /* Map Bootstrap "primary" to the active theme's accent color so DevExpress
       components (which use --bs-primary) also retint when the theme changes. */
    --bs-primary: var(--aos-orange);
    --bs-link-color: var(--aos-orange);
    --bs-link-hover-color: var(--aos-orange-lo);

    /* Soften borders + tertiary backgrounds to match the white-on-wash cards */
    --bs-border-color: #e8e8e8;
    --bs-border-color-translucent: #e8e8e8;
    --bs-tertiary-bg: #f8f8f7;
    --bs-secondary-bg: #f3f2f1;
    --bs-emphasis-color: #111;

    /* Headings + body text */
    --bs-body-color: #1f2937;
    --bs-secondary-color: #6b7280;
}

/* DevExpress theme retint — the office-white theme uses these */
.dxbs-primary-bg, .dxbs-bg-primary { background-color: var(--aos-orange) !important; }
.dxbs-primary-fg, .dxbs-fg-primary { color: var(--aos-orange) !important; }

/* DevExpress dropdowns + popups + form controls on dark themes — the office-white
   stylesheet hardcodes white background which leaks through. Force every dropdown
   face, popup, listbox, textbox, and combobox to use theme colors. */
html[data-theme="dark"] .dxbs,
html[data-theme="dark"] .dxbs-fl,
html[data-theme="dark"] .dxbs-popup,
html[data-theme="dark"] .dxbs-popup-content,
html[data-theme="dark"] .dxbs-popup-window,
html[data-theme="dark"] .dxbs-popup-body,
html[data-theme="dark"] .dxbs-popup-header,
html[data-theme="dark"] .dxbs-popup-footer,
html[data-theme="dark"] .dxbs-dropdown-container,
html[data-theme="dark"] .dxbs-dropdown-content,
html[data-theme="dark"] .dxbs-listbox,
html[data-theme="dark"] .dxbs-list,
html[data-theme="dark"] .dxbs-list-box,
html[data-theme="dark"] .dxbs-textbox,
html[data-theme="dark"] .dxbs-edit-textbox,
html[data-theme="dark"] .dxbs-input-edit-area,
html[data-theme="dark"] .dxbs-combobox,
html[data-theme="dark"] .dxbs-spin-edit,
html[data-theme="dark"] .dxbs-date-edit,
html[data-theme="dark"] .dxbs-dropdownbox,
html[data-theme="dark"] .dxbs-dropdown-edit,
html[data-theme="black-glass"] .dxbs-popup,
html[data-theme="black-glass"] .dxbs-popup-content,
html[data-theme="black-glass"] .dxbs-popup-window,
html[data-theme="black-glass"] .dxbs-popup-body,
html[data-theme="black-glass"] .dxbs-dropdown-container,
html[data-theme="black-glass"] .dxbs-dropdown-content,
html[data-theme="black-glass"] .dxbs-listbox,
html[data-theme="black-glass"] .dxbs-textbox,
html[data-theme="black-glass"] .dxbs-input-edit-area,
html[data-theme="black-glass"] .dxbs-combobox,
html[data-theme="black-glass"] .dxbs-dropdownbox {
    background-color: var(--aos-card-bg) !important;
    color: var(--aos-ink) !important;
    border-color: var(--aos-border) !important;
}

/* Dropdown list items (the per-row hover in the popup) */
html[data-theme="dark"] .dxbs-listbox-item,
html[data-theme="dark"] .dxbs-list-item,
html[data-theme="dark"] .dxbs-dropdown-item,
html[data-theme="black-glass"] .dxbs-listbox-item,
html[data-theme="black-glass"] .dxbs-list-item,
html[data-theme="black-glass"] .dxbs-dropdown-item {
    background-color: transparent !important;
    color: var(--aos-ink) !important;
}
html[data-theme="dark"] .dxbs-listbox-item:hover,
html[data-theme="dark"] .dxbs-list-item:hover,
html[data-theme="dark"] .dxbs-listbox-item.dxbs-selected,
html[data-theme="dark"] .dxbs-list-item.dxbs-selected,
html[data-theme="black-glass"] .dxbs-listbox-item:hover,
html[data-theme="black-glass"] .dxbs-list-item:hover {
    background-color: var(--aos-input-bg) !important;
}

/* Native HTML <input type="date"> on dark themes — the WebKit calendar icon
   is dark by default and disappears against a dark input. Invert it. */
html[data-theme="dark"]      input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="black-glass"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(.85);
    cursor: pointer;
}

/* Status pill alignment fix — was misaligning because the pill's default has
   inline-block + vertical-align baseline. Use middle alignment + consistent
   line-height so the pill sits at the row's vertical center. */
.aos-status-pill, .status-pill, td .aos-status-pill, td .badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Pending Jobs status pills — semantic colors using theme accent.
   Visible on light AND dark. */
.aos-pill-sampling   { background: rgba(99,102,241,.18);  color: #6366f1; }   /* indigo  */
.aos-pill-receipt    { background: rgba(59,130,246,.18);  color: #3b82f6; }   /* blue    */
.aos-pill-received   { background: rgba(34,197,94,.18);   color: #16a34a; }   /* green   */
.aos-pill-inlab      { background: rgba(234,179,8,.20);   color: #ca8a04; }   /* amber   */
.aos-pill-reported   { background: rgba(16,185,129,.20);  color: #10b981; }   /* emerald */
.aos-pill-delivered  { background: rgba(148,163,184,.22); color: #94a3b8; }   /* slate   */
html[data-theme="dark"] .aos-pill-inlab,
html[data-theme="black-glass"] .aos-pill-inlab     { color: #fbbf24; }
html[data-theme="dark"] .aos-pill-sampling,
html[data-theme="black-glass"] .aos-pill-sampling  { color: #a5b4fc; }
html[data-theme="dark"] .aos-pill-receipt,
html[data-theme="black-glass"] .aos-pill-receipt   { color: #93c5fd; }

/* ===================================================================
   DARK THEME — comprehensive DevExpress component fallbacks for the
   admin pages (WebUsers, Roles, LoginBackgrounds) which use DxButton,
   DxGrid, DxFormLayout, DxTextBox, DxComboBox heavily.
   =================================================================== */

/* DxButton — light variant (toolbar Refresh, Cancel, etc.) */
html[data-theme="dark"] .dxbs-button-light,
html[data-theme="dark"] .dxbs-button.dxbs-button-light,
html[data-theme="black-glass"] .dxbs-button-light {
    background-color: var(--aos-card-bg) !important;
    border-color: var(--aos-border) !important;
    color: var(--aos-ink) !important;
}
html[data-theme="dark"] .dxbs-button-light:hover,
html[data-theme="black-glass"] .dxbs-button-light:hover {
    background-color: var(--aos-mute) !important;
    border-color: var(--aos-ink-faint) !important;
}

/* DxFormLayout — captions (labels) and row separators */
html[data-theme="dark"] .dxbs-fl-cpt,
html[data-theme="dark"] .dxbs-formlayout-caption,
html[data-theme="dark"] .dxbs-fl-row .dxbs-fl-caption,
html[data-theme="black-glass"] .dxbs-fl-cpt,
html[data-theme="black-glass"] .dxbs-formlayout-caption {
    color: var(--aos-ink-sub) !important;
}

/* DxGrid (used in admin pages) — row hover + header */
html[data-theme="dark"] .dxbs-grid,
html[data-theme="dark"] .dxbs-grid-header-row,
html[data-theme="dark"] .dxbs-grid-header,
html[data-theme="black-glass"] .dxbs-grid,
html[data-theme="black-glass"] .dxbs-grid-header {
    background-color: var(--aos-card-bg) !important;
    color: var(--aos-ink) !important;
    border-color: var(--aos-border) !important;
}
html[data-theme="dark"] .dxbs-grid-header-row td,
html[data-theme="dark"] .dxbs-grid-header td,
html[data-theme="black-glass"] .dxbs-grid-header-row td {
    background-color: var(--aos-mute) !important;
    color: var(--aos-ink-dim) !important;
}
html[data-theme="dark"] .dxbs-grid tr:hover td,
html[data-theme="black-glass"] .dxbs-grid tr:hover td {
    background-color: var(--aos-orange-bg) !important;
}

/* DxCheckBox — keep the box itself white on dark would be ugly; recolor */
html[data-theme="dark"] .dxbs-checkbox,
html[data-theme="black-glass"] .dxbs-checkbox {
    background-color: var(--aos-input-bg) !important;
    border-color: var(--aos-border) !important;
}

/* DevExpress Pie Chart legend text on dark themes — labels next to color
   swatches were sometimes invisible on dark bg. */
html[data-theme="dark"] .dxbs-chart-legend,
html[data-theme="dark"] .dxbs-chart-legend-item,
html[data-theme="black-glass"] .dxbs-chart-legend,
html[data-theme="black-glass"] .dxbs-chart-legend-item {
    color: var(--aos-ink) !important;
}

/* Sort-icon arrow on table headers in dark theme — neutral grey ⇄ orange on active */
html[data-theme="dark"] .sort-icon,
html[data-theme="black-glass"] .sort-icon {
    color: var(--aos-ink-dim);
}

/* Browser autofill (Chrome) — when the user clicks "Use saved password" the
   input bg goes pale yellow which is invisible on dark. Force the autofill
   to use theme colors via inset shadow trick. */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="black-glass"] input:-webkit-autofill {
    -webkit-text-fill-color: var(--aos-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--aos-input-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* DxChart on dark themes — the SVG <text> elements default to black, making
   axis labels (project names, parameters, dates, numbers) invisible on dark
   backgrounds. Cast a wider net so it works regardless of which DX class
   wraps the chart. .dx-card is the safe parent because every chart lives in
   one. */
html[data-theme="dark"]      .dx-card svg text,
html[data-theme="black-glass"] .dx-card svg text,
html[data-theme="ocean"]       .dx-card svg text,
html[data-theme="nebula"]      .dx-card svg text,
html[data-theme="forest"]      .dx-card svg text {
    fill: var(--aos-chart-axis) !important;
}

/* Chart gridlines + axis tick lines on dark themes — DevExpress draws these
   with stroke="#000000" or as <path>/<line> elements. Force them light. */
html[data-theme="dark"]      .dx-card svg line,
html[data-theme="dark"]      .dx-card svg path[stroke]:not([fill]),
html[data-theme="black-glass"] .dx-card svg line,
html[data-theme="black-glass"] .dx-card svg path[stroke]:not([fill]),
html[data-theme="ocean"]       .dx-card svg line,
html[data-theme="ocean"]       .dx-card svg path[stroke]:not([fill]),
html[data-theme="nebula"]      .dx-card svg line,
html[data-theme="nebula"]      .dx-card svg path[stroke]:not([fill]),
html[data-theme="forest"]      .dx-card svg line,
html[data-theme="forest"]      .dx-card svg path[stroke]:not([fill]) {
    stroke: var(--aos-chart-grid) !important;
}

/* Cards — soften radius + remove the bottom-heavy shadow. All colors come
   from theme variables so dark / Ocean / Nebula etc. retint correctly. */
.dx-card {
    border-radius: 12px !important;
    background: var(--aos-card-bg) !important;
    border: 1px solid var(--aos-border) !important;
    color: var(--aos-ink) !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.dx-card:hover { border-color: var(--aos-ink-faint) !important; }

.dx-card-grid { gap: 14px; margin-bottom: 14px; }

/* Stat label / sub on dashboard KPI cards — pick up theme colors */
.dx-stat-label { color: var(--aos-ink-dim) !important; }
.dx-stat-sub   { color: var(--aos-ink-dim) !important; }
.card-h        { color: var(--aos-ink) !important; }

/* Dashboard KPI number colors — semantic + theme-aware.
   Default value uses theme ink (white-ish on dark, slate-900 on light).
   Variants (good/bad/info) pick brighter shades on dark for visibility. */
.dx-stat-value           { color: var(--aos-ink); }
.dx-stat-value.dx-stat-good { color: #16a34a; }    /* emerald green */
.dx-stat-value.dx-stat-bad  { color: #dc2626; }    /* red */
.dx-stat-value.dx-stat-info { color: var(--aos-orange); }   /* brand accent */
html[data-theme="dark"] .dx-stat-value.dx-stat-good,
html[data-theme="black-glass"] .dx-stat-value.dx-stat-good,
html[data-theme="ocean"] .dx-stat-value.dx-stat-good     { color: #34d399; }   /* brighter on dark */
html[data-theme="dark"] .dx-stat-value.dx-stat-bad,
html[data-theme="black-glass"] .dx-stat-value.dx-stat-bad,
html[data-theme="ocean"] .dx-stat-value.dx-stat-bad      { color: #f87171; }   /* brighter on dark */
html[data-theme="dark"] .dx-stat-value.dx-stat-info,
html[data-theme="black-glass"] .dx-stat-value.dx-stat-info,
html[data-theme="ocean"] .dx-stat-value.dx-stat-info     { color: var(--aos-orange-hi); }

/* Page-level buttons */
.aos-btn {
    border-radius: 8px;
    font-size: 12px;
    padding: 6px 14px;
    height: 32px;
    font-weight: 500;
}
.aos-btn-primary { background: var(--aos-orange); border-color: var(--aos-orange); }
.aos-btn-primary:hover:not(:disabled) { background: var(--aos-orange-lo); border-color: var(--aos-orange-lo); filter: none; }
.aos-btn-light  { background: var(--aos-card-bg); color: var(--aos-ink); border-color: var(--aos-border); }
.aos-btn-light:hover { background: var(--aos-mute); border-color: var(--aos-ink-faint); color: var(--aos-ink); }

/* Inputs — theme-aware */
.aos-input, .aos-select {
    border-radius: 8px;
    background: var(--aos-input-bg);
    border: 1px solid var(--aos-border);
    color: var(--aos-ink);
    font-size: 13px;
    height: 34px;
    padding: 6px 10px;
}
.aos-input::placeholder { color: var(--aos-ink-dim); }
.aos-input:focus, .aos-select:focus {
    border-color: var(--aos-orange);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 232,103,10), .13);
}
.filter-grid .field label,
.aos-filter-popup .field label { color: var(--aos-ink-dim); }

/* Tables — theme-aware */
.aos-table { color: var(--aos-ink); }
.aos-table th {
    background: var(--aos-mute);
    border-bottom: 1px solid var(--aos-border);
    color: var(--aos-ink-dim);
    font-size: .68rem;
    letter-spacing: .07em;
    padding: .65rem .8rem;
}
.aos-table td {
    border-bottom: 1px solid var(--aos-border-soft);
    border-right: none;
    padding: .55rem .8rem;
    color: var(--aos-ink);
}
.aos-table tbody tr:hover { background: var(--aos-orange-bg); }
.aos-table tbody tr.row-selected { background: var(--aos-orange-bg); }
.aos-table tbody tr.row-selected:hover { background: var(--aos-orange-bg); filter: brightness(.95); }
.aos-table .job-id { color: var(--aos-orange-text); font-weight: 700; }
.sort-icon.active { color: var(--aos-orange); }

/* Filter row in tables */
.aos-table thead tr.aos-filter-row td {
    background: var(--aos-card-bg);
    border-bottom: 1px solid var(--aos-border);
}
.aos-table thead tr.aos-filter-row input,
.aos-table thead tr.aos-filter-row select {
    border-radius: 6px;
    font-size: 12px;
}

/* Pager — theme-aware */
.aos-pager { background: var(--aos-card-bg); border-top: 1px solid var(--aos-border); padding: 10px 16px; font-size: 12px; color: var(--aos-ink); }
.aos-pager .pg {
    border: 1px solid var(--aos-border); background: var(--aos-card-bg); color: var(--aos-ink-sub);
    border-radius: 6px; padding: 4px 10px; font-size: 12px; min-width: 30px;
}
.aos-pager .pg.active { background: var(--aos-orange); border-color: var(--aos-orange); color: #fff; }
.aos-pager .pg:hover:not(:disabled):not(.active) { background: var(--aos-mute); color: var(--aos-ink); border-color: var(--aos-ink-faint); }
.aos-pager .pg:disabled { opacity: .4; cursor: not-allowed; }
.aos-pager-info, .aos-pager-size { color: var(--aos-ink-dim); font-size: 11px; }
.aos-pager-size select { font-size: 12px; padding: 4px 8px; background: var(--aos-input-bg); color: var(--aos-ink); border: 1px solid var(--aos-border); border-radius: 6px; }

/* Modal — theme-aware */
.aos-modal {
    border-radius: 12px;
    background: var(--aos-card-bg);
    border: 1px solid var(--aos-border);
    color: var(--aos-ink);
    box-shadow: 0 12px 40px rgba(0,0,0,.24);
}
.aos-modal-header {
    border-bottom: 1px solid var(--aos-border-soft);
    padding: 14px 16px;
    color: var(--aos-ink);
}
.aos-icon-btn { color: var(--aos-ink-dim); border-radius: 8px; background: transparent; border: 0; cursor: pointer; }
.aos-icon-btn:hover { background: var(--aos-mute); color: var(--aos-ink); }

/* Filter popup (Historic Data, etc.) — tight, evenly-aligned grid. No forced
   height; the popup hugs its content. Every field uses the same input height
   (34 px set on .aos-input) so rows align without manual tweaks. */
.aos-filter-popup .filter-grid {
    row-gap: .75rem;
    column-gap: .85rem;
    padding: .35rem .25rem !important;
    align-items: end;       /* date-range fields with sub-rows still bottom-align */
}
.aos-filter-popup .field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.aos-filter-popup .field label {
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--aos-ink-dim);
    font-weight: 600;
}
/* Force every interactive element in the popup to the same height so the row
   lines up perfectly: dropdown faces, date inputs, etc. */
.aos-filter-popup .aos-input,
.aos-filter-popup .aos-select,
.aos-filter-popup .aos-tagbox,
.aos-filter-popup .aos-tagbox .dxbs,
.aos-filter-popup .aos-tagbox input {
    height: 34px;
}
.aos-filter-popup .date-range {
    display: flex; align-items: center; gap: 6px;
}
.aos-filter-popup .date-range input { flex: 1; min-width: 0; }
.aos-filter-popup .date-sep { font-size: 11px; color: var(--aos-ink-dim); }

/* Required-field marker + hint text below form fields */
.aos-required {
    color: #dc2626;
    font-weight: 700;
    margin-left: 2px;
}
.aos-field-hint {
    font-size: 11px;
    color: var(--aos-ink-dim);
    margin-top: 4px;
    line-height: 1.4;
}
.aos-field-hint b { color: var(--aos-orange-text); }

/* Filter card on tracking pages — theme-aware */
.filter-card {
    background: var(--aos-card-bg);
    border: 1px solid var(--aos-border);
    color: var(--aos-ink);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}
/* grid-card (the table wrapper) — theme-aware + full width */
.grid-card {
    background: var(--aos-card-bg);
    border: 1px solid var(--aos-border);
    color: var(--aos-ink);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Internal scroll container for tables — same pattern as HistoricData's
   .hd-scroll. Keeps the table inside the card with both axes scrolling so the
   pager stays pinned at the bottom and the filter card / topbar stay visible. */
.aos-grid-scroll {
    overflow: auto;
    max-height: calc(100vh - 280px);  /* topbar + filter card + toolbar + pager */
    width: 100%;
}
@media (max-width: 900px) {
    .aos-grid-scroll { max-height: calc(100vh - 320px); }
}
.filter-grid .field label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: #888; font-weight: 600; margin-bottom: 4px; display: block;
}

/* Grid toolbar above tables — theme-aware */
.aos-grid-toolbar {
    padding: 10px 14px;
    border-bottom: 1px solid var(--aos-border-soft);
    background: var(--aos-card-bg);
    color: var(--aos-ink);
    gap: 8px;
}
.aos-search {
    background: var(--aos-mute); border: 1px solid var(--aos-border);
    border-radius: 8px; padding: 6px 10px; color: var(--aos-ink);
}
.aos-search input { font-size: 12px; background: transparent; color: var(--aos-ink); }
.aos-search input::placeholder { color: var(--aos-ink-dim); }
.aos-export-btn {
    background: var(--aos-card-bg); border: 1px solid var(--aos-border); border-radius: 8px;
    padding: 5px 12px; font-size: 12px; color: var(--aos-ink-sub);
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.aos-export-btn:hover { background: var(--aos-mute); border-color: var(--aos-ink-faint); color: var(--aos-ink); }

/* Time-chip toggle bar on Historic Data */
.aos-view-bar { background: var(--aos-mute); border-color: var(--aos-border); }
.aos-view-pill.active { background: var(--aos-card-bg); color: var(--aos-orange); }
.aos-view-pill:hover { color: var(--aos-orange-lo); }

/* Filter badge on Query button */
.aos-filter-badge { background: var(--aos-orange); color: #fff; }

/* Spinner accent */
.aos-spinner { border-top-color: var(--aos-orange); }

/* =====================================================
   Legacy compatibility — existing pages still use these
   classes for cards, buttons, tables, popups, etc.
   We keep them but retint to the new palette.
   ===================================================== */

/* Shell --------------------------------------------------------------- */
.dx-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas: "sidebar topbar" "sidebar main";
    min-height: 100vh;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e293b);
}

.dx-sidebar {
    grid-area: sidebar;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #1e293b);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.dx-topbar {
    grid-area: topbar;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #1e293b);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: sticky; top: 0; z-index: 10;
}
.dx-topbar-actions { display: flex; align-items: center; gap: .4rem; }
.dx-app-version {
    font-size: .72rem;
    color: var(--bs-secondary-color, #64748b);
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f1f5f9);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.dx-topbar-titlewrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    padding-left: .25rem;
}
.dx-topbar-pagetitle {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-body-color, #0f172a);
    letter-spacing: -.01em;
}
.dx-topbar-pagesub {
    font-size: .78rem;
    color: var(--bs-secondary-color, #64748b);
    margin-top: 1px;
}

.dx-main {
    grid-area: main;
    padding: .9rem 1.1rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e293b);
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Fill-viewport: grid-card (the table+pager card) grows to fill remaining height.
   Works for any page without a wrapper — the .dx-main is already flex column. */
.dx-main > .grid-card,
.dx-main > .aos-fill-page > .grid-card,
.aos-fill-page > .grid-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.dx-main > .grid-card > [style*="overflow-x"],
.aos-fill-page > .grid-card > [style*="overflow-x"] {
    flex: 1; min-height: 0; overflow: auto;
}
.dx-main > .grid-card > .aos-pager,
.aos-fill-page > .grid-card > .aos-pager { margin-top: auto; }
.aos-fill-page {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1;
    min-height: 0;
}
/* Ensure dx-main itself stretches inside the grid shell */
.dx-shell > .dx-main { min-height: calc(100vh - 56px); }

/* Brand --------------------------------------------------------------- */
.dx-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.dx-brand-mark {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 14px;
}
.dx-brand-title { font-weight: 700; font-size: 1rem; }
.dx-brand-sub { font-size: .72rem; opacity: .7; margin-top: -2px; }

/* Nav links ----------------------------------------------------------- */
.dx-nav-section {
    padding: .75rem 1rem .25rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
    font-weight: 700;
}
a.dx-nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .48rem .85rem;
    margin: 1px .4rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
}
a.dx-nav-link:hover {
    background: rgba(127,127,127,.12);
}
a.dx-nav-link.active {
    background: var(--bs-primary, #0d6efd);
    color: var(--bs-white, #fff);
    font-weight: 600;
}
a.dx-nav-link i { font-size: 1rem; width: 18px; text-align: center; }

/* Sub-item style — used to indent Trend Analysis under Historic Data */
a.dx-nav-link.dx-nav-sub {
    padding-left: 2.6rem;
    font-size: .88rem;
}
a.dx-nav-link.dx-nav-sub::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 1.3rem;
    width: .55rem;
    height: 1px;
    background: currentColor;
    opacity: .4;
}
a.dx-nav-link.dx-nav-sub { position: relative; }

.dx-sidebar-footer {
    margin-top: auto;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-size: .8rem;
}

/* Topbar button (Sign in / Logout) ----------------------------------- */
.aos-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--bs-border-color, #cbd5e1);
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
    line-height: 1;
}
.aos-topbar-btn i { font-size: .95rem; }
.aos-topbar-btn-light {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #0f172a);
}
.aos-topbar-btn-light:hover {
    background: var(--bs-tertiary-bg, #f1f5f9);
    border-color: var(--bs-secondary-color, #94a3b8);
    color: var(--bs-body-color, #0f172a);
}
.aos-topbar-btn-primary {
    background: var(--bs-primary, #2563eb);
    color: #fff !important;
    border-color: var(--bs-primary, #2563eb);
}
.aos-topbar-btn-primary:hover {
    filter: brightness(.92);
    color: #fff !important;
}

/* User pill ----------------------------------------------------------- */
.dx-user-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .25rem .7rem .25rem .25rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--bs-body-color, #1e293b);
    background: var(--bs-tertiary-bg, transparent);
}
.dx-user-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: .75rem;
}

/* Cards --------------------------------------------------------------- */
.dx-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #1e293b);
    border-radius: 10px;
    padding: .85rem 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.dx-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .65rem;
    margin-bottom: .75rem;
}
.dx-stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
    font-weight: 600;
}
.dx-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    margin-top: .25rem;
}
.dx-stat-sub { font-size: .8rem !important; opacity:.6; }
.dx-stat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(var(--bs-primary-rgb, 13 110 253), .12);
    color: var(--bs-primary, #0d6efd);
    display: grid; place-items: center;
    font-size: .9rem;
}

/* =====================================================
   Theme-aware native form controls (used by Pending,
   Reports, Results, Trend filter rows)
   ===================================================== */
.aos-select, .aos-input {
    width: 100%;
    padding: .42rem .7rem;
    border: 1px solid var(--bs-border-color, #cbd5e1);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #0f172a);
    font-size: .92rem;
    font-family: inherit;
    height: 36px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.aos-select:focus, .aos-input:focus {
    border-color: var(--bs-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 37 99 235), .15);
}

.aos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .28rem .75rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    line-height: 1.4;
    white-space: nowrap;
    height: 28px;
}
.aos-btn i { font-size: .82rem; }
.aos-btn:disabled { opacity: .55; cursor: not-allowed; }
.aos-btn-primary {
    background: var(--bs-primary, #2563eb);
    color: #fff !important;
    border-color: var(--bs-primary, #2563eb);
}
.aos-btn-primary:hover:not(:disabled) { filter: brightness(.92); }
.aos-btn-light {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-primary, #2563eb);
    border-color: var(--bs-border-color, #cbd5e1);
}
.aos-btn-light:hover {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 8%, var(--bs-body-bg, #fff));
    border-color: var(--bs-primary, #2563eb);
}

/* =====================================================
   Theme-aware tables (filter pages)
   ===================================================== */
.aos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    color: var(--bs-body-color, #1e293b);
}
.aos-table th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--bs-secondary-color, #475569);
    text-align: left;
    padding: .55rem .75rem;
    background: var(--bs-tertiary-bg, #f8fafc);
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    border-right: 1px solid var(--bs-border-color, #e2e8f0);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.aos-table th:last-child,
.aos-table td:last-child { border-right: none; }
.aos-table th:hover { background: var(--bs-secondary-bg, #f1f5f9); }
.aos-table td {
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #f1f5f9);
    border-right: 1px solid var(--bs-border-color, #f1f5f9);
    /* Force single-line rows globally; columns auto-size to content */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
/* Hover reveals truncated content via tooltip set in markup; allow wider on click via title */
.aos-table td[title]:hover { cursor: help; }
.aos-table { table-layout: auto; }
.aos-table tbody tr:hover {
    background: var(--bs-tertiary-bg, #f8fafc);
}
.aos-table .job-id {
    font-weight: 700;
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
.sort-icon { font-size: .65rem; opacity: .5; margin-left: 4px; }
.sort-icon.active { opacity: 1; color: var(--bs-primary, #2563eb); }

/* =====================================================
   Theme-aware pager
   ===================================================== */
.aos-pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, #e2e8f0);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e293b);
    font-size: .85rem;
    flex-wrap: wrap; gap: .75rem;
}
.aos-pager-info { color: var(--bs-secondary-color, #64748b); }
.aos-pager-size { display: flex; align-items: center; gap: .5rem; color: var(--bs-secondary-color, #475569); }
.aos-pager-size select {
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 6px;
    padding: .25rem .5rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e293b);
    font-size: .85rem;
}
.aos-pager-buttons { display: flex; gap: .25rem; align-items: center; }
.pg {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    color: var(--bs-body-color, #1e293b);
    border-radius: 6px;
    padding: .35rem .65rem;
    font-size: .82rem;
    cursor: pointer;
    min-width: 32px;
}
.pg:hover:not(:disabled) { background: var(--bs-tertiary-bg, #f1f5f9); }
.pg.active {
    background: var(--bs-primary, #2563eb);
    color: var(--bs-white, #fff);
    border-color: var(--bs-primary, #2563eb);
}
.pg:disabled { opacity: .5; cursor: not-allowed; }
.pg-ellipsis { padding: 0 .5rem; color: var(--bs-secondary-color, #94a3b8); }

/* =====================================================
   Theme-aware filter card
   ===================================================== */
.filter-card { padding: .75rem .9rem; margin-bottom: .65rem; }
/* IMPORTANT — use minmax(0, 1fr), not 1fr.
   In CSS grid, `1fr` columns get an implicit `minmax(auto, 1fr)`, which lets the
   column expand to fit its content's min-content size. That's why a Parameter
   field with 50+ selected values used to push the whole filter grid sideways.
   `minmax(0, 1fr)` clamps the minimum to zero so every column stays equal width
   regardless of what's inside. The inner DropdownBox face truncates with ellipsis
   so users still see the first 3 names + "(+N more)". */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem .85rem;
}
.filter-grid .field {
    min-width: 0;       /* let children (dropdowns, inputs) shrink instead of overflowing */
}
.filter-grid .field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #475569);
    margin-bottom: .25rem;
}
.filter-grid .field > * {
    min-width: 0;
    max-width: 100%;
}
@media (max-width: 1100px) {
    .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .filter-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pending Jobs uses a 5-col grid so the 9 filters fit in 2 rows (4 + 5). */
.pending-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) { .pending-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 800px)  { .pending-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 540px)  { .pending-filter-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

.grid-card { padding: 0; overflow: hidden; position: relative; }

/* In-header column filter — small chevron button + popover with multi-select list */
.aos-col-filter {
    position: relative;
    display: inline-block;
    margin-left: .25rem;
    vertical-align: middle;
}
.aos-col-filter-btn {
    background: transparent;
    border: 0;
    padding: 0 3px;
    color: var(--bs-secondary-color, #94a3b8);
    cursor: pointer;
    font-size: .7rem;
    line-height: 1;
}
.aos-col-filter-btn:hover { color: var(--bs-primary, #ff8c42); }
.aos-col-filter.active .aos-col-filter-btn {
    color: var(--bs-primary, #ff8c42);
    background: rgba(var(--bs-primary-rgb, 255 140 66), .12);
    border-radius: 4px;
}
.aos-col-filter-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .15);
    margin-top: 4px;
    min-width: 220px;
    overflow: hidden;
}

/* Modal popup (used by OVERDUE JOBS card etc.) */
.aos-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.aos-modal {
    background: var(--bs-body-bg, #fff);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.aos-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}
.aos-modal-body { padding: .5rem 0; flex: 1; min-height: 0; }
.aos-icon-btn {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--bs-secondary-color, #64748b);
    padding: 0 .4rem;
}
.aos-icon-btn:hover { color: var(--bs-body-color, #0f172a); }
.overdue-card:hover { background: var(--bs-tertiary-bg, #fef2f2); transition: background .15s; }

/* Select-all toggle row at top of CheckedCombo + ColumnFilter dropdowns */
.aos-cc-selectall {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .65rem;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    background: var(--bs-tertiary-bg, #f8fafc);
    font-size: .82rem;
    font-weight: 500;
    color: var(--bs-body-color, #0f172a);
    cursor: pointer;
    user-select: none;
}
.aos-cc-selectall input[type="checkbox"] { margin: 0; cursor: pointer; }
.aos-cc-selectall:hover { background: var(--bs-secondary-bg, #f1f5f9); }

/* Inline column-filter row directly under the table headers */
.aos-table thead tr.aos-filter-row td {
    padding: .15rem .25rem;
    background: var(--bs-tertiary-bg, #f8fafc);
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    vertical-align: middle;
}
.aos-input-mini {
    width: 100%;
    min-width: 70px;
    padding: .15rem .35rem;
    font-size: .75rem;
    border: 1px solid var(--bs-border-color, #cbd5e1);
    border-radius: 4px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #0f172a);
    line-height: 1.2;
}
.aos-cc-mini .dxbs-dropdown-edit,
.aos-cc-mini .dxbs-edit { font-size: .75rem !important; min-height: 24px !important; }
.aos-cc-mini { min-width: 90px; }

/* Loading spinner overlay used by list pages while a query is in flight */
.aos-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: all;
}
.aos-spinner {
    width: 38px; height: 38px;
    border: 3px solid var(--bs-tertiary-bg, #e5e7eb);
    border-top-color: var(--bs-primary, #ff8c42);
    border-radius: 50%;
    animation: aos-spin .8s linear infinite;
}
@keyframes aos-spin { to { transform: rotate(360deg); } }

/* Login --------------------------------------------------------------- */
.dx-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--bs-body-bg, #fff);
}
.dx-login-art {
    background: linear-gradient(135deg, var(--bs-primary, #0d6efd) 0%, var(--bs-primary, #0d6efd) 100%);
    color: #fff;
    padding: 3rem;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.dx-login-art::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.15), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.1), transparent 45%);
}
.dx-login-art > * { position: relative; z-index: 1; }
.dx-login-art h2 {
    font-size: 2.1rem; font-weight: 700;
    line-height: 1.15; margin: 0 0 .8rem;
    letter-spacing: -.02em;
}
.dx-login-art p { opacity: .9; font-size: 1rem; max-width: 400px; }
.dx-login-form-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.dx-login-form { width: 100%; max-width: 380px; }
.dx-login-form h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .25rem; }
.dx-login-form .sub { opacity: .7; margin-bottom: 1.75rem; font-size: .9rem; }
.dx-login-form .field { margin-bottom: 1rem; }
.dx-login-form .field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .35rem;
    opacity: .8;
}

@media (max-width: 900px) {
    .dx-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
    .dx-sidebar { display: none; }
    .dx-login-shell { grid-template-columns: 1fr; }
    .dx-login-art { display: none; }
}

/* DevExpress grid header tweaks */
.dxbl-grid-header-cell {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

/* =====================================================
   Reusable list-view enhancements
   - Fuzzy search input
   - Inline column filter row
   - Selection checkbox + yellow row highlight (RGB 253,247,217)
   - Export button
   ===================================================== */

.aos-grid-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    flex-wrap: wrap;
}
.aos-search {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 380px;
}
.aos-search input {
    width: 100%;
    padding: .42rem .7rem .42rem 2.1rem;
    border: 1px solid var(--bs-border-color, #cbd5e1);
    border-radius: 999px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #0f172a);
    font-size: .88rem;
    height: 32px;
    outline: none;
}
.aos-search input:focus {
    border-color: var(--bs-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 37 99 235), .15);
}
.aos-search .aos-search-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #94a3b8);
    pointer-events: none;
}
.aos-grid-toolbar .spacer { flex: 1; }
.aos-grid-toolbar .selected-count {
    font-size: .82rem;
    color: var(--bs-secondary-color, #64748b);
}
.aos-grid-toolbar .selected-count strong {
    color: var(--bs-primary, #2563eb);
    font-weight: 700;
}

/* Checkbox visual inside DxTagBox dropdown items (CSS-only — no real <input>
   so it never steals click/focus from the DxTagBox and never closes the popup) */
/* The DxDropDownBox wrapper used by CheckedCombo — never forces filter-grid
   column to grow, and matches the height/rounding of native .aos-input so
   dropdowns and date pickers line up perfectly in one row. */
.aos-tagbox,
.aos-tagbox .dxbs-dropdownbox,
.aos-tagbox .dxbs-input-edit-area,
.aos-tagbox .dxbs-edit,
.aos-tagbox .dxbs-fl {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;             /* match .aos-input height */
    border-radius: 8px !important;       /* match .aos-input rounded corners */
    box-sizing: border-box !important;
}
/* Round every DevExpress edit control (text, combo, date, spin, popup window) */
.dxbs-edit, .dxbs-editor, .dxbs-textbox, .dxbs-text-edit,
.dxbs-combobox, .dxbs-dropdownbox, .dxbs-date-edit, .dxbs-spin-edit,
.dxbs-input-edit-area, .dxbs-listbox, .dxbs-popup-window,
.dxbs-popup-content, .dxbs-button {
    border-radius: 8px !important;
}
.dxbs-popup-header { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
.dxbs-popup-footer { border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
/* The popup container itself */
.dxbs-popup-window, .dxbs-popup-content { border-radius: 12px !important; overflow: hidden; }
.aos-tagbox .dxbs-edit-input,
.aos-tagbox input {
    height: 32px !important;             /* 34 - 2*border = visible input area */
    line-height: 32px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
}
/* Filter grid: align rows by their TOP edge so labels sit at the same line
   even when neighbouring fields wrap or have a sub-row (date range). */
.filter-grid {
    align-items: start;
}
.filter-grid .field { display: flex; flex-direction: column; gap: 4px; }
.filter-grid .field > label { margin: 0 0 2px 0; }
/* Make every CONTROL inside a field stretch to fill width + same height */
.filter-grid .field > input,
.filter-grid .field > select,
.filter-grid .field > .aos-tagbox,
.filter-grid .field > .date-range,
.filter-grid .field > .date-range > input {
    height: 34px;
    box-sizing: border-box;
}
/* Date range: two inputs with "to" separator, all same height */
.filter-grid .date-range {
    display: flex; align-items: center; gap: 6px; width: 100%;
}
.filter-grid .date-range > input { flex: 1; min-width: 0; }
.filter-grid .date-sep { font-size: 11px; color: var(--aos-ink-dim); flex-shrink: 0; }

/* The DxDropDownBox FACE (closed state — what shows "All clients" etc.)
   Force theme colors so it doesn't show white in dark mode. */
html[data-theme="dark"] .aos-tagbox,
html[data-theme="dark"] .aos-tagbox .dxbs-dropdownbox,
html[data-theme="dark"] .aos-tagbox .dxbs-input-edit-area,
html[data-theme="dark"] .aos-tagbox .dxbs-edit,
html[data-theme="dark"] .aos-tagbox .dxbs-edit-input,
html[data-theme="dark"] .aos-tagbox input,
html[data-theme="dark"] .aos-tagbox .dxbs-fl,
html[data-theme="black-glass"] .aos-tagbox,
html[data-theme="black-glass"] .aos-tagbox .dxbs-dropdownbox,
html[data-theme="black-glass"] .aos-tagbox .dxbs-input-edit-area,
html[data-theme="black-glass"] .aos-tagbox .dxbs-edit-input {
    background-color: var(--aos-input-bg) !important;
    background: var(--aos-input-bg) !important;
    color: var(--aos-ink) !important;
    border-color: var(--aos-border) !important;
}
/* The chevron arrow + clear (×) buttons on the dropdown face */
html[data-theme="dark"] .aos-tagbox .dxbs-edit-btn,
html[data-theme="dark"] .aos-tagbox .dxbs-edit-clear-btn,
html[data-theme="black-glass"] .aos-tagbox .dxbs-edit-btn,
html[data-theme="black-glass"] .aos-tagbox .dxbs-edit-clear-btn {
    background-color: transparent !important;
    color: var(--aos-ink-sub) !important;
}
/* Native date inputs on dark theme — Chrome/Edge style picker overlay */
html[data-theme="dark"] input[type="date"],
html[data-theme="black-glass"] input[type="date"] {
    background-color: var(--aos-input-bg) !important;
    color: var(--aos-ink) !important;
    border-color: var(--aos-border) !important;
    color-scheme: dark;     /* native picker uses dark theme */
}

/* Status column — pills centered in their cell and header so they line up
   visually with the centered pill widget instead of clinging to the left. */
.aos-table .status-cell {
    text-align: center;
    vertical-align: middle;
    padding-left: 6px;
    padding-right: 6px;
}
.aos-table .status-cell > * {
    display: inline-flex;
    vertical-align: middle;
}
.aos-table th.status-cell > * { justify-content: center; }
.aos-cc-placeholder {
    color: var(--bs-secondary-color, #94a3b8);
}
.aos-cc-selected {
    color: var(--bs-body-color, #0f172a);
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}

.aos-cc-row {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    pointer-events: none; /* let clicks reach the DxTagBox row beneath */
}
.aos-cc-box {
    width: 14px;
    height: 14px;
    border: 1px solid var(--bs-border-color, #94a3b8);
    border-radius: 3px;
    background: var(--bs-body-bg, #fff);
    display: inline-block;
    flex: 0 0 auto;
    position: relative;
}
.aos-cc-box.checked {
    background: var(--bs-primary, #2563eb);
    border-color: var(--bs-primary, #2563eb);
}
.aos-cc-box.checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Top page-level search bar (above filter card) */
.aos-page-search {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .65rem;
    padding: .5rem .85rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
}
.aos-page-search > label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--bs-body-color, #0f172a);
    flex: 0 0 auto;
}
.aos-page-search .aos-search {
    flex: 1;
    max-width: none;
    min-width: 0;
}

/* Inline column filter row */
.aos-table thead tr.aos-filter-row td {
    padding: .25rem .5rem .35rem;
    background: var(--bs-tertiary-bg, #f8fafc);
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}
.aos-table thead tr.aos-filter-row input,
.aos-table thead tr.aos-filter-row select {
    width: 100%;
    padding: .22rem .45rem;
    border: 1px solid var(--bs-border-color, #cbd5e1);
    border-radius: 6px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #0f172a);
    font-size: .78rem;
    outline: none;
    font-family: inherit;
}
.aos-table thead tr.aos-filter-row input:focus,
.aos-table thead tr.aos-filter-row select:focus {
    border-color: var(--bs-primary, #2563eb);
}

/* Selection checkbox column */
.aos-table th.aos-sel,
.aos-table td.aos-sel {
    width: 36px;
    text-align: center;
    padding-left: .5rem;
    padding-right: .5rem;
}
.aos-table input[type=checkbox].aos-row-cb {
    cursor: pointer;
    width: 15px;
    height: 15px;
}

/* Selected row highlight (XAF light yellow) */
.aos-table tbody tr.row-selected {
    background-color: rgb(253, 247, 217) !important;
}
.aos-table tbody tr.row-selected:hover {
    background-color: rgb(252, 241, 195) !important;
}

/* Export button styled like aos-btn */
.aos-export-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .8rem;
    border-radius: 6px;
    border: 1px solid var(--bs-border-color, #cbd5e1);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-primary, #16a34a);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    height: 28px;
    white-space: nowrap;
}
.aos-export-btn:hover {
    background: color-mix(in srgb, #16a34a 8%, var(--bs-body-bg, #fff));
    border-color: #16a34a;
}
.aos-export-btn:disabled { opacity: .5; cursor: not-allowed; }
.aos-export-btn i { font-size: .9rem; }

/* Paired date-range input (used in filter sidebars).
   Date-range fields span TWO columns of the filter grid so each input has
   room for the "mm/dd/yyyy" placeholder + calendar icon without overflow.
   At narrow widths the two inputs stack onto their own rows. */
.filter-grid .field.field-daterange,
.filter-grid .field:has(> .date-range) {
    grid-column: span 2;
}
.date-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin-top: .15rem;
}
.date-range .aos-input {
    flex: 1 1 130px;
    min-width: 130px;
    padding-right: .25rem;
}
.date-range .date-sep {
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 500;
    flex: 0 0 auto;
    padding: 0 .15rem;
}
/* If the date-range field is rendered in a narrow column, stack vertically. */
@media (max-width: 540px) {
    .filter-grid .field:has(> .date-range) { grid-column: 1; }
    .date-range { flex-direction: column; align-items: stretch; gap: .3rem; }
    .date-range .date-sep { text-align: center; }
}

/* User edit popup — comfortable spacing & wider inputs (WebUsers.razor). */
.aos-user-form .dxbl-form-layout-item-content { padding: 0 .35rem; }
.aos-user-form .dxbl-form-layout-item-caption {
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: .25rem;
    padding: 0 .35rem;
}
.aos-user-form .dxbl-form-layout-item { margin-bottom: .9rem; }
.aos-user-form .dxbl-text-edit,
.aos-user-form .dxbl-combobox,
.aos-user-form .dxbl-tagbox,
.aos-user-form input,
.aos-user-form select {
    min-height: 36px;
    font-size: .9rem;
}
/* Email field: subtle hint that this is the canonical login id. */
.aos-email-input { font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .01em; }

/* Badge on the "Query" button — shows count of active filters. */
.aos-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 .35rem;
    margin-left: .25rem;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--bs-primary, #ff8c42);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}
.aos-btn.aos-btn-light .aos-filter-badge {
    background: var(--bs-primary, #ff8c42);
    color: #fff;
}

/* Disabled "Preview" pill — same shape as .dl-link but greyed out + not clickable.
   Used on Report Downloads when a row has no attachment of a given kind. */
.dl-link.dl-disabled {
    color: #cbd5e1 !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65;
    text-decoration: none;
    user-select: none;
}
.dl-link.dl-disabled:hover {
    color: #cbd5e1 !important;
    text-decoration: none;
}

/* Role permission editor — tri-state table (None / Read / Read+Write per page). */
.aos-perm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.aos-perm-table thead th {
    text-align: center;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    color: var(--bs-secondary-color, #64748b);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.aos-perm-table tbody td {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--bs-border-color, #f1f5f9);
    text-align: center;
    vertical-align: middle;
}
.aos-perm-table tbody tr:hover {
    background: var(--bs-tertiary-bg, #f8fafc);
}
.aos-perm-table input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--bs-primary, #ff8c42);
}

/* User edit popup — section header + 2-col field grid for consistent alignment. */
.aos-user-section {
    margin: 1.25rem 0 .6rem;
    padding: 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--bs-primary, #ff8c42);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    padding-bottom: .35rem;
}
.aos-user-section:first-of-type { margin-top: .25rem; }

.aos-user-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1.25rem;
}
.aos-user-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.aos-user-field-full {
    grid-column: 1 / -1;
}
.aos-user-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #475569);
}
.aos-user-field .dxbl-edit-box,
.aos-user-field .dxbl-combobox,
.aos-user-field .dxbl-tagbox,
.aos-user-field input {
    min-height: 36px;
    font-size: .9rem;
}
@media (max-width: 640px) {
    .aos-user-grid { grid-template-columns: 1fr; }
}

/* Make the user pill obviously clickable — it links to /profile. */
a.dx-user-pill {
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
a.dx-user-pill:hover {
    background: var(--bs-tertiary-bg, #f1f5f9);
    border-color: var(--bs-secondary-color, #94a3b8);
}

/* Historic Data card — DON'T fill the viewport like other grid cards.
   The pager should hug the table, not float at the bottom of the page.
   This keeps the card compact when there are fewer rows than fit the viewport. */
.dx-main > .grid-card.hd-card,
.dx-main > .aos-fill-page > .grid-card.hd-card {
    flex: 0 0 auto;
    min-height: 0;
    display: block;
}
.dx-main > .grid-card.hd-card > .aos-pager {
    margin-top: 0;
}