/* =====================================================================
   margosatubig-theme.css — Margosatubig LGU unified design system
   Municipality of Margosatubig, Zamboanga del Sur · Region IX

   PlusAdmin-inspired administrative theme. Cobalt structural shell,
   light grey canvas, crisp white cards, compact typography, subtle
   borders, minimal shadows, controlled bright accents.

   Authoritative sources:
     "to be DONE update/Theme/Finalized-Theme-Package/Color-and-Type.md"
     "to be DONE update/Theme/Prompt Implementations.txt"

   HOW THIS FILE IS LOADED
   -----------------------
   includes/theme-everywhere.php appends a <link> to this stylesheet
   immediately before </head> on every full HTML response, so it is the
   LAST author stylesheet on the page. That position is deliberate: it
   lets the token block below win over a page's own :root block without
   using !important, while the @layer blocks stay deliberately weak so
   they can never overpower a page that already styles an element.

   CASCADE CONTRACT — read before editing
   --------------------------------------
   1. :root token blocks          unlayered  -> re-skin, never re-layout
   2. @layer dt-base              layered    -> loses to ALL page CSS
   3. .dt-* component library     unlayered  -> opt-in classes only
   No rule in this file may set width/height/position/display on a
   selector the application already owns. Colour and type only, unless
   the selector carries the dt- prefix.

   @version 1.0.0
   @since   2026-09-20
   ===================================================================== */

@layer dt-base;

/* =====================================================================
   1. DESIGN TOKENS
   The five reference accents are exact brand constants from the supplied
   reference image. Neutrals, hover shades and semantic pairs are
   deliberate functional additions documented in Color-and-Type.md.
   ===================================================================== */

:root {
    /* --- Reference accent constants (do not alter) ------------------ */
    --dt-blue:                #1A55E3;
    --dt-pink:                #FF0854;
    --dt-green:               #00D284;
    --dt-cyan:                #0DCAF0;
    --dt-violet:              #5E6EED;

    /* --- Surfaces --------------------------------------------------- */
    --dt-canvas:              #F6F8FC;
    --dt-surface:             #FFFFFF;
    --dt-surface-subtle:      #F0F4FA;
    --dt-surface-sunken:      #EDF1F8;

    /* --- Text ------------------------------------------------------- */
    --dt-text:                #14181F;   /* ~92% black */
    --dt-text-muted:          #333B47;   /* ~78% black — dark, never grey */
    --dt-text-on-primary:     #FFFFFF;

    /* --- Borders ---------------------------------------------------- */
    --dt-border-subtle:       #E3E8F0;   /* decorative dividers only */
    --dt-border-control:      #7C899D;   /* identifies an input boundary */

    /* --- Primary scale ---------------------------------------------- */
    --dt-primary:             #1A55E3;
    --dt-primary-hover:       #1648C2;
    --dt-primary-pressed:     #123BA0;
    --dt-primary-soft:        #EDF2FF;
    --dt-primary-rgb:         26, 85, 227;

    /* --- Semantic text / tint pairs (all exceed 5.3:1) -------------- */
    --dt-success-text:        #087443;
    --dt-success-soft:        #E8FAF2;
    --dt-danger-text:         #B80B3C;
    --dt-danger-soft:         #FFF0F4;
    --dt-info-text:           #076D83;
    --dt-info-soft:           #E8F9FD;
    --dt-warning-text:        #805400;
    --dt-warning-soft:        #FFF7DB;

    /* --- Accessible labels for filled bright accents ---------------- *
     * White text FAILS normal-text contrast on pink (3.88:1), green
     * (1.99:1), cyan (1.96:1) and violet (4.26:1). Use these instead.  */
    --dt-on-pink:             #000000;
    --dt-on-violet:           #000000;
    --dt-on-green:            #172033;
    --dt-on-cyan:             #172033;

    /* --- Chart series ----------------------------------------------- *
     * Dark-enough strokes so a meaningful line clears 3:1 on white.
     * Bright --dt-green / --dt-cyan are fills and decoration only.     */
    --dt-chart-1:             #1A55E3;
    --dt-chart-2:             #5E6EED;
    --dt-chart-3:             #076D83;
    --dt-chart-4:             #087443;
    --dt-chart-5:             #B80B3C;
    --dt-chart-6:             #805400;
    --dt-chart-grid:          #E3E8F0;
    --dt-chart-fill-green:    rgba(0, 210, 132, .18);
    --dt-chart-fill-blue:     rgba(26, 85, 227, .12);

    /* --- Typography -------------------------------------------------- *
     * Segoe UI leads; the rest of the stack is offline-safe so no font
     * is ever downloaded. Do not substitute Inter without a design
     * change — see Color-and-Type.md "Font decision".                   */
    --dt-font:                "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --dt-font-mono:           ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --dt-fs-micro:            0.8125rem;  /* 13px */
    --dt-fs-caption:          0.875rem;   /* 14px */
    --dt-fs-dense:            0.9375rem;  /* 15px — dense tables, utility */
    --dt-fs-body:             1.0625rem;  /* 17px — body, forms, nav */
    --dt-fs-card-title:       1.1875rem;  /* 19px */
    --dt-fs-section:          1.3125rem;  /* 21px */
    --dt-fs-page-title:       1.875rem;   /* 30px desktop */
    --dt-fs-kpi:              2.125rem;   /* 34px */

    --dt-lh-dense:            1.4286;     /* 20/14 */
    --dt-lh-body:             1.5;        /* 24/16 */
    --dt-lh-title:            1.2857;     /* 36/28 */

    --dt-fw-regular:          400;
    --dt-fw-medium:           500;
    --dt-fw-semibold:         600;
    --dt-fw-bold:             700;

    /* --- Spacing (4px basis) ---------------------------------------- */
    --dt-space-1:             0.25rem;
    --dt-space-2:             0.5rem;
    --dt-space-3:             0.75rem;
    --dt-space-4:             1rem;
    --dt-space-5:             1.25rem;
    --dt-space-6:             1.5rem;
    --dt-space-8:             2rem;
    --dt-space-10:            2.5rem;

    /* --- Radius: crisp and operational, not SaaS-round -------------- */
    --dt-radius-sm:           3px;
    --dt-radius:              4px;
    --dt-radius-pill:         999px;

    /* --- Shadows: separation only, never decoration ----------------- */
    --dt-shadow-1:            0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
    --dt-shadow-2:            0 2px 4px rgba(16, 24, 40, .06), 0 4px 10px rgba(16, 24, 40, .05);
    --dt-shadow-overlay:      0 8px 28px rgba(16, 24, 40, .16);

    /* --- Shell metrics ----------------------------------------------- */
    --dt-sidebar-w:           264px;
    --dt-topbar-h:            60px;
    --dt-toolbar-h:          52px;
    --dt-gutter:              24px;
    --dt-gutter-narrow:       16px;
    --dt-control-h:           2.625rem;   /* 42px, within the 40–44 range */
    --dt-target:              44px;

    /* --- Focus: 2px white separator + 3px primary ring -------------- */
    --dt-focus-ring:          0 0 0 2px #FFFFFF, 0 0 0 5px var(--dt-primary);
    --dt-focus-ring-on-dark:  0 0 0 2px var(--dt-primary), 0 0 0 5px #FFFFFF;

    /* --- Motion ------------------------------------------------------ */
    --dt-motion-fast:         120ms cubic-bezier(.2, .6, .3, 1);
    --dt-motion:              180ms cubic-bezier(.2, .6, .3, 1);

    /* --- Z-index ----------------------------------------------------- */
    --dt-z-drawer-backdrop:   1040;
    --dt-z-drawer:           1045;
    --dt-z-modal:             1050;
    --dt-z-toast:             1080;
}

/* =====================================================================
   2. DARK THEME ARCHITECTURE
   Opt-in only. Light is the shipped target; these tokens exist so a
   future dark mode is a data-attribute away and never a re-write.
   Enable with <html data-dt-scheme="dark"> (or data-bs-theme="dark" on
   Bootstrap 5.3 pages, which is bridged for free).
   ===================================================================== */

:root[data-dt-scheme="dark"],
:root[data-bs-theme="dark"] {
    --dt-canvas:              #10131A;
    --dt-surface:             #171B24;
    --dt-surface-subtle:      #202633;
    --dt-surface-sunken:      #0C0F15;
    --dt-border-subtle:       #303848;
    --dt-border-control:      #8C99AD;
    --dt-text:                #F5F7FB;
    --dt-text-muted:          #A9B4C7;
    --dt-primary-soft:        #1B2440;
    --dt-success-soft:        #0E2B1F;
    --dt-danger-soft:         #32131F;
    --dt-info-soft:           #0B2830;
    --dt-warning-soft:        #2E2408;
    --dt-success-text:        #4BD597;
    --dt-danger-text:         #FF7FA3;
    --dt-info-text:           #5FD2E8;
    --dt-warning-text:        #E8B93D;
    --dt-chart-grid:          #303848;
    --dt-shadow-1:            0 1px 2px rgba(0, 0, 0, .40);
    --dt-shadow-2:            0 2px 4px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .35);
    --dt-focus-ring:          0 0 0 2px #171B24, 0 0 0 5px #7EA2FF;
}

/* =====================================================================
   3. LEGACY VARIABLE BRIDGE
   The application already speaks a shared token vocabulary: --brand,
   --primary, --border and friends appear thousands of times across the
   modules. Re-pointing those names is the single highest-leverage,
   lowest-risk way to make every module inherit one palette: a page that
   writes `background: var(--brand)` re-skins with zero layout change.

   ONLY hue-safe names are bridged. Surface and ink names (--surface,
   --ink, --text, --muted) are deliberately NOT bridged: several modules
   run their own dark surface, and forcing white there would put their
   light hardcoded text on a light background. Those modules are
   re-skinned through their own stylesheets instead.
   ===================================================================== */

:root {
    /* Brand / primary family -> cobalt */
    --brand:                  var(--dt-primary);
    --brand-2:                var(--dt-violet);
    --brand-primary:          var(--dt-primary);
    --primary:                var(--dt-primary);
    --primary-hover:          var(--dt-primary-hover);
    --primary-dark:           var(--dt-primary-pressed);
    --color-primary:          var(--dt-primary);
    --color-primary-light:    var(--dt-primary-hover);
    --color-primary-dark:     var(--dt-primary-pressed);
    --color-primary-darker:   var(--dt-primary-pressed);

    /* Hairlines -> one subtle grey everywhere */
    --border:                 var(--dt-border-subtle);
    --border-color:           var(--dt-border-subtle);
    --border-subtle:          var(--dt-border-subtle);
    --line:                   var(--dt-border-subtle);

    /* Semantic accents -> accessible variants */
    --danger:                 var(--dt-danger-text);
    --color-error:            var(--dt-danger-text);
    --success:                var(--dt-success-text);
    --color-success:          var(--dt-success-text);
    --info:                   var(--dt-info-text);
    --color-info:             var(--dt-info-text);
    --warning:                var(--dt-warning-text);
    --color-warning:          var(--dt-warning-text);

    /* Shared type stack */
    --font-family-sans:       var(--dt-font);
}

/* ---------------------------------------------------------------------
   3b. Bootstrap 5.3 bridge
   33 pages load Bootstrap from a CDN. Overriding Bootstrap's own custom
   properties re-skins those pages without a single specificity fight:
   a page that writes `background-color: X` on a button still wins,
   because only variables are being set here, never properties.
   --------------------------------------------------------------------- */

:root {
    --bs-primary:             #1A55E3;
    --bs-primary-rgb:         26, 85, 227;
    --bs-link-color:          #1A55E3;
    --bs-link-color-rgb:      26, 85, 227;
    --bs-link-hover-color:    #1648C2;
    --bs-body-font-family:    var(--dt-font);
    --bs-body-color:          #172033;
    --bs-body-color-rgb:      23, 32, 51;
    --bs-secondary-color:     #58657A;
    --bs-body-bg:             #FFFFFF;
    --bs-border-color:        #E3E8F0;
    --bs-border-radius:       4px;
    --bs-border-radius-sm:    3px;
    --bs-border-radius-lg:    6px;
    --bs-tertiary-bg:         #F0F4FA;
    --bs-secondary-bg:        #F0F4FA;
    --bs-emphasis-color:      #172033;
    --bs-danger:              #B80B3C;
    --bs-danger-rgb:          184, 11, 60;
    --bs-success:             #087443;
    --bs-success-rgb:         8, 116, 67;
    --bs-info:                #076D83;
    --bs-info-rgb:            7, 109, 131;
    --bs-warning:             #805400;
    --bs-warning-rgb:         128, 84, 0;
    --bs-focus-ring-color:    rgba(26, 85, 227, .35);
    --bs-focus-ring-width:    3px;
}

/* Bootstrap compiles the solid button palette into the class itself, so
   the variables have to be re-declared at that scope. Still variables
   only — a page's own `.btn-primary { background: … }` keeps winning. */
.btn-primary {
    --bs-btn-bg:              #1A55E3;
    --bs-btn-border-color:    #1A55E3;
    --bs-btn-hover-bg:        #1648C2;
    --bs-btn-hover-border-color: #1648C2;
    --bs-btn-active-bg:       #123BA0;
    --bs-btn-active-border-color: #123BA0;
    --bs-btn-disabled-bg:     #1A55E3;
    --bs-btn-disabled-border-color: #1A55E3;
}
.btn-outline-primary {
    --bs-btn-color:           #1A55E3;
    --bs-btn-border-color:    #1A55E3;
    --bs-btn-hover-bg:        #1A55E3;
    --bs-btn-hover-border-color: #1A55E3;
    --bs-btn-active-bg:       #123BA0;
    --bs-btn-active-border-color: #123BA0;
    --bs-btn-disabled-color:  #1A55E3;
    --bs-btn-disabled-border-color: #1A55E3;
}
/* Solid danger/success/info/warning buttons carry white labels, so they
   use the darker tested variants rather than the bright swatches. */
.btn-danger  { --bs-btn-bg:#B80B3C; --bs-btn-border-color:#B80B3C; --bs-btn-hover-bg:#9C0932; --bs-btn-hover-border-color:#9C0932; --bs-btn-active-bg:#82082A; --bs-btn-active-border-color:#82082A; }
.btn-success { --bs-btn-bg:#087443; --bs-btn-border-color:#087443; --bs-btn-hover-bg:#066038; --bs-btn-hover-border-color:#066038; --bs-btn-active-bg:#054F2E; --bs-btn-active-border-color:#054F2E; }
.btn-info    { --bs-btn-bg:#076D83; --bs-btn-border-color:#076D83; --bs-btn-hover-bg:#065B6D; --bs-btn-hover-border-color:#065B6D; --bs-btn-active-bg:#054A58; --bs-btn-active-border-color:#054A58; --bs-btn-color:#FFFFFF; --bs-btn-hover-color:#FFFFFF; --bs-btn-active-color:#FFFFFF; }
.btn-warning { --bs-btn-bg:#FFF7DB; --bs-btn-border-color:#805400; --bs-btn-color:#805400; --bs-btn-hover-bg:#FBEFC4; --bs-btn-hover-color:#805400; --bs-btn-hover-border-color:#805400; --bs-btn-active-bg:#F5E5A8; --bs-btn-active-color:#805400; }
.table { --bs-table-border-color:#E3E8F0; --bs-table-striped-bg:#F6F8FC; --bs-table-hover-bg:#EDF2FF; }
.form-control, .form-select { --bs-border-color:#7C899D; }
.nav-pills { --bs-nav-pills-link-active-bg:#1A55E3; }
.progress { --bs-progress-bar-bg:#1A55E3; }

/* =====================================================================
   4. BASE LAYER
   Everything below sits in @layer dt-base, which loses to every
   unlayered rule in the application. It therefore only fills gaps a
   page left unstyled, and can never break a module that has an opinion.
   ===================================================================== */

@layer dt-base {

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-family: var(--dt-font);
        font-size: var(--dt-fs-body);
        line-height: var(--dt-lh-body);
        color: var(--dt-text);
        background-color: var(--dt-canvas);
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--dt-font);
        color: var(--dt-text);
        font-weight: var(--dt-fw-semibold);
        line-height: 1.3;
    }
    h1 { font-size: var(--dt-fs-page-title); line-height: var(--dt-lh-title); }
    h2 { font-size: 1.5rem; }
    h3 { font-size: var(--dt-fs-section); }
    h4 { font-size: var(--dt-fs-card-title); }
    h5 { font-size: var(--dt-fs-body); }
    h6 { font-size: var(--dt-fs-dense); }

    a { color: var(--dt-primary); }
    a:hover { color: var(--dt-primary-hover); }

    small, .small { font-size: var(--dt-fs-caption); }
    code, kbd, pre, samp { font-family: var(--dt-font-mono); }

    /* Aligned figures read as columns, not as ransom notes. */
    .num, .numeric, .amount, .tnum, .mono,
    td.text-end, td.text-right, th.text-end, th.text-right {
        font-variant-numeric: tabular-nums;
    }

    /* Muted never means low contrast: 5.90:1 on white, 5.55:1 on canvas. */
    .muted, .text-muted, .cc-muted { color: var(--dt-text-muted); }
}

/* ---------------------------------------------------------------------
   4b. Keyboard focus — unlayered on purpose.
   A focus indicator that a module stylesheet can silently delete is not
   an accessibility feature. This is the one place the theme insists.
   --------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="menuitem"]):focus-visible {
    outline: 3px solid var(--dt-primary);
    outline-offset: 2px;
    border-radius: var(--dt-radius-sm);
}

/* On a cobalt surface the ring inverts so it stays visible. */
.dt-topbar :where(a, button, input, select, [tabindex]):focus-visible,
.topbar :where(a, button, input, select, [tabindex]):focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   5. APPLICATION SHELL  (.dt-*)
   Opt-in component library. Nothing below applies to existing markup
   unless that markup carries a dt- class.
   ===================================================================== */

.dt-shell {
    display: flex;
    min-height: calc(100vh - var(--dt-topbar-h));
    background: var(--dt-canvas);
}

/* --- Top navigation: the strong cobalt band -------------------------- */
.dt-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    min-height: var(--dt-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dt-space-4);
    padding: 0 var(--dt-gutter);
    background: var(--dt-primary);
    color: #FFFFFF;
}
.dt-topbar a,
.dt-topbar button { color: #FFFFFF; }
.dt-topbar__group { display: flex; align-items: center; gap: var(--dt-space-3); min-width: 0; }
.dt-topbar__title {
    font-size: var(--dt-fs-body);
    font-weight: var(--dt-fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dt-topbar__meta { font-size: var(--dt-fs-caption); color: rgba(255, 255, 255, .88); }
.dt-topbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dt-space-2);
    min-width: var(--dt-target);
    min-height: var(--dt-target);
    padding: 0 var(--dt-space-3);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--dt-radius);
    color: #FFFFFF;
    font: inherit;
    font-size: var(--dt-fs-dense);
    cursor: pointer;
    transition: background var(--dt-motion-fast);
}
.dt-topbar__btn:hover { background: rgba(255, 255, 255, .14); }
.dt-topbar__burger { display: none; }

/* --- Sidebar: white rail, blue active row ---------------------------- */
.dt-sidebar {
    width: var(--dt-sidebar-w);
    flex: 0 0 var(--dt-sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--dt-surface);
    border-right: 1px solid var(--dt-border-subtle);
    position: sticky;
    top: var(--dt-topbar-h);
    height: calc(100vh - var(--dt-topbar-h));
    transition: transform var(--dt-motion);
}
.dt-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--dt-space-3);
    padding: var(--dt-space-4);
    border-bottom: 1px solid var(--dt-border-subtle);
}
.dt-sidebar__seal { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.dt-sidebar__wordmark { min-width: 0; }
.dt-sidebar__wordmark b {
    display: block;
    font-size: var(--dt-fs-dense);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text);
    line-height: 1.2;
}
.dt-sidebar__wordmark span {
    display: block;
    font-size: var(--dt-fs-micro);
    color: var(--dt-text-muted);
}

.dt-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--dt-space-3);
    padding: var(--dt-space-4);
    border-bottom: 1px solid var(--dt-border-subtle);
}
.dt-sidebar__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--dt-primary-soft);
    color: var(--dt-primary-pressed);
    font-weight: var(--dt-fw-bold);
}
.dt-sidebar__user-tx { min-width: 0; }
.dt-sidebar__user-tx b {
    display: block;
    font-size: var(--dt-fs-dense);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-sidebar__user-tx span {
    display: block;
    font-size: var(--dt-fs-micro);
    color: var(--dt-text-muted);
}

.dt-sidebar__search { padding: var(--dt-space-4) var(--dt-space-4) var(--dt-space-2); }

.dt-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--dt-space-2) var(--dt-space-3) var(--dt-space-4);
}
.dt-sidebar__section {
    padding: var(--dt-space-4) var(--dt-space-2) var(--dt-space-2);
    font-size: var(--dt-fs-micro);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text-muted);
}
.dt-nav-item {
    display: flex;
    align-items: center;
    gap: var(--dt-space-3);
    min-height: 46px;
    padding: var(--dt-space-2) var(--dt-space-3);
    border-radius: var(--dt-radius);
    color: var(--dt-text);
    font-size: var(--dt-fs-body);
    font-weight: var(--dt-fw-medium);
    text-decoration: none;
    transition: background var(--dt-motion-fast), color var(--dt-motion-fast);
}
.dt-nav-item > i,
.dt-nav-item > .dt-nav-item__icon {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.125rem;
    color: var(--dt-text-muted);
}
.dt-nav-item:hover { background: var(--dt-surface-subtle); color: var(--dt-text); }
.dt-nav-item[aria-current="page"],
.dt-nav-item.is-active {
    background: var(--dt-primary);
    color: var(--dt-text-on-primary);
    font-weight: var(--dt-fw-semibold);
}
/* Selection is never colour alone: the active row also carries a rail. */
.dt-nav-item[aria-current="page"]::before,
.dt-nav-item.is-active::before {
    content: "";
    width: 3px;
    align-self: stretch;
    margin: 2px 0 2px -8px;
    border-radius: var(--dt-radius-pill);
    background: #FFFFFF;
}
.dt-nav-item[aria-current="page"] > i,
.dt-nav-item.is-active > i,
.dt-nav-item[aria-current="page"] > .dt-nav-item__icon,
.dt-nav-item.is-active > .dt-nav-item__icon { color: var(--dt-text-on-primary); }
.dt-nav-item__badge {
    margin-left: auto;
    min-width: 20px;
    padding: 0 var(--dt-space-2);
    border-radius: var(--dt-radius-pill);
    background: var(--dt-danger-soft);
    color: var(--dt-danger-text);
    font-size: var(--dt-fs-micro);
    font-weight: var(--dt-fw-semibold);
    text-align: center;
}
.dt-nav-item.is-active .dt-nav-item__badge {
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}

.dt-sidebar__backdrop { display: none; }

/* --- Page toolbar: the light band under the cobalt bar --------------- */
.dt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dt-space-3);
    padding: var(--dt-space-3) var(--dt-gutter);
    background: var(--dt-surface);
    border-bottom: 1px solid var(--dt-border-subtle);
}
.dt-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-2); }
.dt-toolbar__context {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-3);
    font-size: var(--dt-fs-dense);
    color: var(--dt-text-muted);
}
.dt-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-2); font-size: var(--dt-fs-dense); }
.dt-breadcrumb a { color: var(--dt-text-muted); text-decoration: none; }
.dt-breadcrumb a:hover { color: var(--dt-primary); text-decoration: underline; }
.dt-breadcrumb [aria-current="page"] { color: var(--dt-text); font-weight: var(--dt-fw-semibold); }

/* --- Main content canvas --------------------------------------------- */
.dt-main {
    flex: 1;
    min-width: 0;
    background: var(--dt-canvas);
}
.dt-page { padding: var(--dt-gutter); }
.dt-page__title {
    margin: 0 0 var(--dt-space-2);
    font-size: var(--dt-fs-page-title);
    line-height: var(--dt-lh-title);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text);
}
.dt-page__lede { margin: 0 0 var(--dt-space-6); color: var(--dt-text-muted); }

.dt-grid { display: grid; gap: var(--dt-gutter); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dt-col-3  { grid-column: span 3; }
.dt-col-4  { grid-column: span 4; }
.dt-col-6  { grid-column: span 6; }
.dt-col-8  { grid-column: span 8; }
.dt-col-12 { grid-column: span 12; }

/* =====================================================================
   6. CARDS, METRICS, CHART FRAMES
   ===================================================================== */

.dt-card {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    padding: var(--dt-gutter);
    box-shadow: var(--dt-shadow-1);
}
.dt-card__header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dt-space-3);
    margin-bottom: var(--dt-space-4);
}
.dt-card__title {
    margin: 0;
    font-size: var(--dt-fs-card-title);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text);
}
.dt-card__subtitle { margin: var(--dt-space-1) 0 0; font-size: var(--dt-fs-dense); color: var(--dt-text-muted); }
.dt-card__footer {
    margin-top: var(--dt-space-4);
    padding-top: var(--dt-space-3);
    border-top: 1px solid var(--dt-border-subtle);
    font-size: var(--dt-fs-dense);
    color: var(--dt-text-muted);
}

/* Metric card: the number is the hero, decoration never competes. */
.dt-metric { display: flex; flex-direction: column; gap: var(--dt-space-2); }
.dt-metric__label {
    font-size: var(--dt-fs-dense);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text-muted);
}
.dt-metric__value {
    font-size: var(--dt-fs-kpi);
    line-height: 1.25;
    font-weight: var(--dt-fw-bold);
    color: var(--dt-text);
    font-variant-numeric: tabular-nums;
}
.dt-metric__row { display: flex; align-items: baseline; gap: var(--dt-space-3); flex-wrap: wrap; }
.dt-metric__delta {
    display: inline-flex; align-items: center; gap: var(--dt-space-1);
    font-size: var(--dt-fs-dense);
    font-weight: var(--dt-fw-semibold);
    font-variant-numeric: tabular-nums;
}
/* Direction carries a glyph as well as a colour. */
.dt-metric__delta--up   { color: var(--dt-success-text); }
.dt-metric__delta--up::before   { content: "\25B2"; font-size: .7em; }
.dt-metric__delta--down { color: var(--dt-danger-text); }
.dt-metric__delta--down::before { content: "\25BC"; font-size: .7em; }
.dt-metric__delta--flat { color: var(--dt-text-muted); }
.dt-metric__delta--flat::before { content: "\2013"; }
.dt-metric__note { font-size: var(--dt-fs-caption); color: var(--dt-text-muted); }

.dt-chart-card__body { position: relative; }
/* A chart is never the only way to read the data. */
.dt-chart-card__summary {
    margin-top: var(--dt-space-3);
    font-size: var(--dt-fs-dense);
    color: var(--dt-text-muted);
}

/* Promotional / announcement panel. Deep indigo base with original
   clipped geometry — decorative only, so it is hidden from assistive
   technology and never carries the only copy of a message. */
.dt-promo {
    position: relative;
    overflow: hidden;
    padding: var(--dt-gutter);
    border-radius: var(--dt-radius);
    background: #2A2D7C;
    color: #FFFFFF;
}
.dt-promo > * { position: relative; z-index: 1; }
.dt-promo::before,
.dt-promo::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.dt-promo::before {
    width: 220px; height: 220px;
    right: -70px; top: -90px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 8, 84, .55), transparent 68%);
}
.dt-promo::after {
    width: 180px; height: 180px;
    right: 60px; bottom: -110px;
    background: radial-gradient(circle at 60% 40%, rgba(0, 210, 132, .45), transparent 68%);
}
.dt-promo__title { margin: 0 0 var(--dt-space-2); font-size: var(--dt-fs-card-title); font-weight: var(--dt-fw-semibold); }
.dt-promo__body { margin: 0; color: rgba(255, 255, 255, .92); font-size: var(--dt-fs-dense); }

/* =====================================================================
   7. BUTTONS
   ===================================================================== */

.dt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dt-space-2);
    min-height: var(--dt-control-h);
    padding: 0 var(--dt-space-4);
    border: 1px solid transparent;
    border-radius: var(--dt-radius);
    font-family: inherit;
    font-size: var(--dt-fs-dense);
    font-weight: var(--dt-fw-semibold);
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dt-motion-fast), border-color var(--dt-motion-fast), color var(--dt-motion-fast);
}
.dt-btn--primary { background: var(--dt-primary); border-color: var(--dt-primary); color: #FFFFFF; }
.dt-btn--primary:hover { background: var(--dt-primary-hover); border-color: var(--dt-primary-hover); color: #FFFFFF; }
.dt-btn--primary:active { background: var(--dt-primary-pressed); border-color: var(--dt-primary-pressed); }

.dt-btn--secondary { background: var(--dt-surface); border-color: var(--dt-primary); color: var(--dt-primary); }
.dt-btn--secondary:hover { background: var(--dt-primary-soft); color: var(--dt-primary-pressed); }

.dt-btn--ghost { background: transparent; border-color: var(--dt-border-control); color: var(--dt-text); }
.dt-btn--ghost:hover { background: var(--dt-surface-subtle); }

.dt-btn--success { background: var(--dt-success-text); border-color: var(--dt-success-text); color: #FFFFFF; }
.dt-btn--success:hover { background: #066038; border-color: #066038; }

.dt-btn--danger { background: var(--dt-danger-text); border-color: var(--dt-danger-text); color: #FFFFFF; }
.dt-btn--danger:hover { background: #9C0932; border-color: #9C0932; }

.dt-btn--warning { background: var(--dt-warning-soft); border-color: var(--dt-warning-text); color: var(--dt-warning-text); }
.dt-btn--warning:hover { background: #FBEFC4; }

.dt-btn[disabled], .dt-btn[aria-disabled="true"] {
    opacity: 1;                       /* never communicate state by fade alone */
    background: var(--dt-surface-subtle);
    border-color: var(--dt-border-control);
    color: var(--dt-text-muted);
    cursor: not-allowed;
}
.dt-btn--sm { min-height: 2rem; padding: 0 var(--dt-space-3); font-size: var(--dt-fs-caption); }
.dt-btn--block { width: 100%; }

/* =====================================================================
   8. FORMS
   ===================================================================== */

.dt-field { display: block; margin-bottom: var(--dt-space-4); }
.dt-field__label {
    display: block;
    margin-bottom: var(--dt-space-2);
    font-size: var(--dt-fs-dense);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text);
}
.dt-field__required { color: var(--dt-danger-text); }
.dt-input, .dt-select, .dt-textarea {
    display: block;
    width: 100%;
    min-height: var(--dt-control-h);
    padding: var(--dt-space-2) var(--dt-space-3);
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-control);
    border-radius: var(--dt-radius);
    color: var(--dt-text);
    font-family: inherit;
    font-size: var(--dt-fs-body);
    line-height: var(--dt-lh-body);
    transition: border-color var(--dt-motion-fast), box-shadow var(--dt-motion-fast);
}
.dt-textarea { min-height: 6rem; resize: vertical; }
.dt-input:focus, .dt-select:focus, .dt-textarea:focus {
    border-color: var(--dt-primary);
    outline: 3px solid var(--dt-primary);
    outline-offset: 1px;
}
.dt-input::placeholder, .dt-textarea::placeholder { color: var(--dt-text-muted); }
.dt-field__help { margin-top: var(--dt-space-1); font-size: var(--dt-fs-caption); color: var(--dt-text-muted); }
/* Errors carry a glyph and wording, not just a red border. */
.dt-field__error {
    display: flex; align-items: flex-start; gap: var(--dt-space-1);
    margin-top: var(--dt-space-1);
    font-size: var(--dt-fs-caption);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-danger-text);
}
.dt-field__error::before { content: "\26A0"; }
.dt-field.is-invalid .dt-input,
.dt-field.is-invalid .dt-select,
.dt-field.is-invalid .dt-textarea { border-color: var(--dt-danger-text); border-width: 2px; }

/* Search / filter toolbar on listing pages */
.dt-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--dt-space-3);
    padding: var(--dt-space-4);
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    margin-bottom: var(--dt-gutter);
}
.dt-filterbar__search { flex: 1 1 18rem; min-width: 0; }
.dt-filterbar__control { flex: 0 1 11rem; min-width: 0; }
.dt-filterbar__actions { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); margin-left: auto; }

/* =====================================================================
   9. TABLES
   ===================================================================== */

/* A genuine data table may scroll horizontally, but only inside a
   labelled, keyboard-reachable region — never the whole page. */
.dt-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    background: var(--dt-surface);
}
.dt-table-wrap:focus-visible { outline: 3px solid var(--dt-primary); outline-offset: 2px; }

.dt-table { width: 100%; border-collapse: collapse; font-size: var(--dt-fs-dense); line-height: var(--dt-lh-dense); }
.dt-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--dt-space-3);
    background: var(--dt-surface-subtle);
    border-bottom: 1px solid var(--dt-border-subtle);
    color: var(--dt-text);
    font-weight: var(--dt-fw-semibold);
    text-align: left;
    white-space: nowrap;
}
.dt-table tbody td {
    padding: var(--dt-space-3);
    border-bottom: 1px solid var(--dt-border-subtle);
    color: var(--dt-text);
    vertical-align: top;
}
.dt-table tbody tr:hover td { background: var(--dt-surface-subtle); }
.dt-table tbody tr[aria-selected="true"] td { background: var(--dt-primary-soft); }
.dt-table .dt-num, .dt-table td.text-end, .dt-table th.text-end {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.dt-table__empty { padding: var(--dt-space-10) var(--dt-space-4); text-align: center; color: var(--dt-text-muted); }

/* =====================================================================
   10. STATUS BADGES
   Colour plus text, always. The label is the status; the tint assists.
   ===================================================================== */

.dt-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-space-1);
    padding: 2px var(--dt-space-2);
    border: 1px solid transparent;
    border-radius: var(--dt-radius-pill);
    font-size: var(--dt-fs-micro);
    font-weight: var(--dt-fw-semibold);
    line-height: 1.5;
    white-space: nowrap;
}
.dt-badge--neutral  { background: var(--dt-surface-subtle); border-color: var(--dt-border-subtle); color: var(--dt-text); }
.dt-badge--primary  { background: var(--dt-primary-soft);  border-color: #C9D8FF; color: var(--dt-primary-pressed); }
.dt-badge--success  { background: var(--dt-success-soft);  border-color: #B6EBD3; color: var(--dt-success-text); }
.dt-badge--danger   { background: var(--dt-danger-soft);   border-color: #FBC9D8; color: var(--dt-danger-text); }
.dt-badge--info     { background: var(--dt-info-soft);     border-color: #BDE8F2; color: var(--dt-info-text); }
.dt-badge--warning  { background: var(--dt-warning-soft);  border-color: #EBD69A; color: var(--dt-warning-text); }

/* Workflow aliases so module markup can name the state, not the colour. */
.dt-status--approved  { background: var(--dt-success-soft); border-color: #B6EBD3; color: var(--dt-success-text); }
.dt-status--completed { background: var(--dt-success-soft); border-color: #B6EBD3; color: var(--dt-success-text); }
.dt-status--pending   { background: var(--dt-warning-soft); border-color: #EBD69A; color: var(--dt-warning-text); }
.dt-status--review    { background: var(--dt-info-soft);    border-color: #BDE8F2; color: var(--dt-info-text); }
.dt-status--cancelled { background: var(--dt-danger-soft);  border-color: #FBC9D8; color: var(--dt-danger-text); }
.dt-status--archived  { background: var(--dt-surface-subtle); border-color: var(--dt-border-subtle); color: var(--dt-text-muted); }

/* =====================================================================
   11. ALERTS
   ===================================================================== */

.dt-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--dt-space-3);
    padding: var(--dt-space-3) var(--dt-space-4);
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--dt-radius);
    font-size: var(--dt-fs-dense);
    line-height: var(--dt-lh-body);
}
.dt-alert__title { font-weight: var(--dt-fw-semibold); }
.dt-alert--success { background: var(--dt-success-soft); border-color: #B6EBD3; border-left-color: var(--dt-success-text); color: var(--dt-success-text); }
.dt-alert--danger  { background: var(--dt-danger-soft);  border-color: #FBC9D8; border-left-color: var(--dt-danger-text);  color: var(--dt-danger-text); }
.dt-alert--info    { background: var(--dt-info-soft);    border-color: #BDE8F2; border-left-color: var(--dt-info-text);    color: var(--dt-info-text); }
.dt-alert--warning { background: var(--dt-warning-soft); border-color: #EBD69A; border-left-color: var(--dt-warning-text); color: var(--dt-warning-text); }

/* =====================================================================
   12. MODALS
   ===================================================================== */

.dt-modal-backdrop {
    position: fixed; inset: 0;
    z-index: var(--dt-z-modal);
    background: rgba(16, 24, 40, .55);
    display: flex; align-items: center; justify-content: center;
    padding: var(--dt-gutter-narrow);
}
.dt-modal {
    width: min(560px, 100%);
    max-height: calc(100vh - 2 * var(--dt-gutter-narrow));
    display: flex; flex-direction: column;
    background: var(--dt-surface);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow-overlay);
}
.dt-modal--wide { width: min(880px, 100%); }
.dt-modal__header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dt-space-3);
    padding: var(--dt-space-4) var(--dt-gutter);
    border-bottom: 1px solid var(--dt-border-subtle);
}
.dt-modal__title { margin: 0; font-size: var(--dt-fs-card-title); font-weight: var(--dt-fw-semibold); }
.dt-modal__body { padding: var(--dt-gutter); overflow-y: auto; }
/* Secondary action first, primary last. */
.dt-modal__footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--dt-space-2);
    padding: var(--dt-space-4) var(--dt-gutter);
    border-top: 1px solid var(--dt-border-subtle);
    background: var(--dt-surface-subtle);
}

/* =====================================================================
   13. MISC UTILITIES (dt- namespaced)
   ===================================================================== */

.dt-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--dt-space-3) var(--dt-space-4);
    background: var(--dt-primary);
    color: #FFFFFF;
    font-weight: var(--dt-fw-semibold);
    border-radius: 0 0 var(--dt-radius) 0;
}
.dt-skip-link:focus { left: 0; }

.dt-tnum { font-variant-numeric: tabular-nums; }
.dt-muted { color: var(--dt-text-muted); }
.dt-divider { height: 1px; background: var(--dt-border-subtle); border: 0; margin: var(--dt-space-4) 0; }
.dt-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dt-empty {
    padding: var(--dt-space-10) var(--dt-space-4);
    text-align: center;
    color: var(--dt-text-muted);
}
.dt-loading {
    display: inline-flex; align-items: center; gap: var(--dt-space-2);
    color: var(--dt-text-muted);
    font-size: var(--dt-fs-dense);
}

/* =====================================================================
   14. RESPONSIVE BEHAVIOUR
   Absolute requirement: no full-page horizontal scroll at any width.
   Verified at 375 / 768 / 1024 / 1440 and at 320px reflow.
   ===================================================================== */

/* 992–1279: compact rail, chart width preserved. */
@media (max-width: 1279.98px) {
    :root { --dt-sidebar-w: 232px; }
    .dt-col-3 { grid-column: span 6; }
}

/* 768–991: large cards stack, gutters tighten. */
@media (max-width: 991.98px) {
    :root { --dt-gutter: 20px; }
    .dt-col-4, .dt-col-8 { grid-column: span 12; }
    .dt-col-6 { grid-column: span 12; }
}

/* <768: off-canvas drawer, single column, compact bar. */
@media (max-width: 767.98px) {
    :root {
        --dt-gutter: 16px;
        --dt-fs-page-title: 1.5rem;   /* 24px / 32px */
        --dt-fs-kpi: 1.75rem;
    }

    .dt-topbar { padding: 0 var(--dt-gutter-narrow); }
    .dt-topbar__burger { display: inline-flex; }
    .dt-topbar__meta { display: none; }

    .dt-sidebar {
        position: fixed;
        top: var(--dt-topbar-h);
        left: 0;
        z-index: var(--dt-z-drawer);
        height: calc(100vh - var(--dt-topbar-h));
        transform: translateX(-100%);
        box-shadow: var(--dt-shadow-overlay);
    }
    .dt-sidebar.is-open { transform: translateX(0); }
    .dt-sidebar__backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--dt-z-drawer-backdrop);
        background: rgba(16, 24, 40, .5);
    }

    .dt-col-3, .dt-col-4, .dt-col-6, .dt-col-8 { grid-column: span 12; }
    .dt-card { padding: var(--dt-space-4); }
    .dt-toolbar { padding: var(--dt-space-3) var(--dt-gutter-narrow); }
    .dt-toolbar__actions .dt-btn { flex: 1 1 auto; }
    .dt-filterbar__search,
    .dt-filterbar__control { flex: 1 1 100%; }
    .dt-filterbar__actions { margin-left: 0; width: 100%; }
    .dt-modal__footer .dt-btn { flex: 1 1 auto; }
}

/* Safety net: nothing in the shell may push the document sideways. */
@media (max-width: 767.98px) {
    .dt-main, .dt-page, .dt-shell { max-width: 100%; }
    .dt-page img, .dt-card img { max-width: 100%; height: auto; }
}

/* =====================================================================
   15. PRINT
   Reports, payroll registers and permit forms have fixed output
   contracts. The screen theme must never reach them: every rule above
   that could alter ink is neutralised here, and existing print
   stylesheets keep full control.
   ===================================================================== */

@media print {
    .dt-topbar,
    .dt-sidebar,
    .dt-sidebar__backdrop,
    .dt-toolbar,
    .dt-skip-link,
    .dt-modal-backdrop { display: none !important; }

    .dt-shell { display: block; }
    .dt-main, .dt-page { background: #FFFFFF; padding: 0; }
    .dt-card {
        border: 1px solid #000000;
        box-shadow: none;
        break-inside: avoid;
    }
    .dt-table-wrap { overflow: visible; border: 0; }
    .dt-table thead th { position: static; background: transparent; }
}

/* =====================================================================
   16. LEGACY SHELL ADAPTER
   The portal's flagship shell (.topbar / .sidebar / .sb-* / .hero /
   .grid .card / .strip .panel) exists in three physical copies: inline
   in pages/home.php, again under mdrrmo-module/assets/css/components/,
   and once more in css/components/. They share every selector name.

   Because this stylesheet is injected immediately before </head> it is
   the last author sheet on each of those pages, so a single adapter
   re-skins all three copies at equal specificity without touching a
   130 KB page or duplicating the fix. Consolidating those copies into
   one file is worthwhile follow-up work, but it is a refactor with its
   own regression surface and does not belong in a theme change.

   Selectors here are deliberately narrow. `.card` alone appears ~1,200
   times across unrelated modules, so the launchpad tile is reached only
   as `.wrap .grid .card` — the shell's own composition.
   ===================================================================== */

/* --- Page canvas ------------------------------------------------------ */
body:has(.topbar) {
    background: var(--dt-canvas);
    color: var(--dt-text);
    font-family: var(--dt-font);
}
body:has(.topbar) .shell,
body:has(.topbar) .main { background: var(--dt-canvas); }

/* --- Top bar: solid cobalt, solid-white labels ------------------------ *
 * Scoped the same way as the sidebar above: .tb-cluster only exists in
 * partials/topbar.php and pages/home.php, so a module with its own
 * .topbar keeps its own colours.                                         */
.topbar:has(.tb-cluster) {
    background: var(--dt-primary);
    border-bottom: 1px solid var(--dt-primary-pressed);
    box-shadow: none;
    min-height: 60px;
    height: auto;
}
.topbar .tb-cluster,
.topbar .tb-rep,
.topbar .tb-prov,
.topbar .tb-mun,
.topbar .tb-time,
.topbar .tb-time i,
.topbar .tb-date { color: #FFFFFF; }
.topbar .tb-rep,
.topbar .tb-mun { font-weight: 700; }
.topbar .tb-sep { background: rgba(255, 255, 255, .35); }
.topbar .tb-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.topbar .tb-burger {
    border: 1px solid rgba(255, 255, 255, .4);
    color: #FFFFFF;
    width: 44px; height: 44px;
    border-radius: var(--dt-radius);
}
.topbar .tb-burger:hover { background: rgba(255, 255, 255, .14); }

/* The assistant pill: white on cobalt reads at 6.08:1 and drops the
   gold gradient and lift animation the design direction rules out. */
.topbar .ask-margo,
.topbar .ask-ai {
    background: #FFFFFF;
    color: var(--dt-primary-pressed);
    border-radius: var(--dt-radius);
    min-height: 36px;
    font-weight: 700;
    box-shadow: none;
}
.topbar .ask-margo:hover,
.topbar .ask-ai:hover {
    background: var(--dt-primary-soft);
    transform: none;
    box-shadow: none;
}
.topbar .ask-margo .beta,
.topbar .ask-ai .beta { background: var(--dt-primary-soft); color: var(--dt-primary-pressed); }

/* --- Sidebar: white rail, cobalt active row --------------------------- *
 * SCOPED, and it has to be. A bare `.sidebar` selector matches every
 * module that happens to use that class name, including the ones running
 * their own dark rail — GSO among them. Forcing those to a white surface
 * left their hardcoded light text invisible: a white-on-white menu.
 *
 * `:has(.sb-link)` pins this to the portal's own rail, which is the only
 * one built from the .sb-* contract in partials/sidebar.php. A module
 * with its own sidebar markup is never touched.
 *
 * Same rule for every other bare structural selector in this file: match
 * the shell's own child contract, never the generic class name.          */
.sidebar:has(.sb-link),
.sidebar:has(.sb-nav) {
    background: var(--dt-surface);
    border-right: 1px solid var(--dt-border-subtle);
}
.sidebar .sb-brand,
.sidebar .sb-user { border-color: var(--dt-border-subtle); }
.sidebar .sb-seal { box-shadow: 0 0 0 1px var(--dt-border-subtle); }
.sidebar .sb-brand-tx b { color: var(--dt-text); font-weight: 600; }
.sidebar .sb-brand-tx span { color: var(--dt-text-muted); letter-spacing: 0; }
.sidebar .sb-link { color: var(--dt-text); font-size: .9375rem; }
.sidebar .sb-link i { color: var(--dt-text-muted); }
.sidebar .sb-link:hover { background: var(--dt-surface-subtle); color: var(--dt-text); }
.sidebar .sb-link.active {
    background: var(--dt-primary);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}
.sidebar .sb-link.active i { color: #FFFFFF; }
/* Selection keeps a shape indicator, not colour alone. */
.sidebar .sb-link.active::before { background: #FFFFFF; left: 0; }
.sidebar .sb-link .badge {
    background: var(--dt-danger-soft);
    color: var(--dt-danger-text);
    font-weight: 600;
}
.sidebar .sb-link.active .badge { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.sidebar .sb-avatar { background: var(--dt-primary-soft); color: var(--dt-primary-pressed); }
.sidebar .sb-avatar::after { background: var(--dt-success-text); border-color: #FFFFFF; }
.sidebar .sb-user-tx b { color: var(--dt-text); font-weight: 600; }
.sidebar .sb-user-tx span { color: var(--dt-text-muted); }
.sidebar .sb-user button { color: var(--dt-text-muted); border-radius: var(--dt-radius); }
.sidebar .sb-user button:hover { background: var(--dt-surface-subtle); color: var(--dt-text); }
.sb-backdrop { background: rgba(16, 24, 40, .5); backdrop-filter: none; }
.sidebar:has(.sb-link) :focus-visible { outline: 3px solid var(--dt-primary); outline-offset: 2px; }
.sidebar .sb-link.active:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }

/* --- Hero masthead: deliberately NOT themed ---------------------------
 * The public hero is not chrome. It carries the municipal seal, the LGU
 * wordmark and the municipality's own aerial photograph of the hall,
 * plaza and the Dumanquillas ridge, with a scrim and two-layer text
 * shadows tuned against that specific photograph.
 *
 * An earlier revision of this adapter painted .hero and .hero-bg .sky
 * flat cobalt. That replaced the photograph with a solid colour and left
 * the scrim and particle layer sitting on top of nothing — it destroyed
 * genuine LGU identity content and broke shadow treatments that were
 * tuned for an image that was no longer there.
 *
 * The brief asks for an administrative theme, and the design direction
 * says the reference guides the design language rather than being copied
 * pixel-for-pixel. The admin shell around the hero — top bar, rail,
 * canvas, cards, tables, forms — is where that language belongs. The
 * masthead keeps its own art direction.
 *
 * Do not add .hero background rules here. If the masthead ever needs to
 * change, it changes in pages/home.php where the photograph, the scrim
 * and the shadows are tuned together.
 * --------------------------------------------------------------------- */

/* --- Welcome band and search ------------------------------------------ */
.wrap .welcome h2 { color: var(--dt-text); font-weight: 600; }
.wrap .welcome p { color: var(--dt-text-muted); }
.search-box {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-control);
    border-radius: var(--dt-radius);
    backdrop-filter: none;
    min-height: 42px;
}
.search-box:focus-within { border-color: var(--dt-primary); background: var(--dt-surface); }
.search-box i { color: var(--dt-text-muted); }
.search-box input { color: var(--dt-text); }
.search-box input::placeholder { color: var(--dt-text-muted); }
.filter-btn {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-control);
    color: var(--dt-text);
    border-radius: var(--dt-radius);
}
.filter-btn:hover { background: var(--dt-surface-subtle); }

/* --- Launchpad tiles: white card, tinted icon chip --------------------
 * V1 painted each of sixteen tiles a saturated gradient and set white
 * text on it. That is the "overly colourful page" the direction rules
 * out, and several of those gradients could not carry white text at
 * 4.5:1. The module colour moves to the icon chip; the tile goes white
 * with dark text, which is both the reference language and a contrast
 * improvement.                                                          */
.wrap .grid { gap: var(--dt-gutter); }
.wrap .grid .card {
    background: var(--dt-surface);
    color: var(--dt-text);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow-1);
    isolation: auto;
}
.wrap .grid .card::after { display: none; }
.wrap .grid .card:hover {
    transform: none;
    box-shadow: var(--dt-shadow-2);
    border-color: #C9D8FF;
}
.wrap .grid .card:focus-visible { outline: 3px solid var(--dt-primary); outline-offset: 2px; }
.wrap .grid .card .card-ico {
    background: var(--dt-primary-soft);
    color: var(--dt-primary-pressed);
    border-radius: var(--dt-radius);
    width: 44px; height: 44px;
    box-shadow: none;
}
.wrap .grid .card .card-tx h3 { color: var(--dt-text); font-weight: 600; font-size: 1rem; }
.wrap .grid .card .card-tx p { color: var(--dt-text-muted); font-size: var(--dt-fs-dense); line-height: 1.43; }
.wrap .grid .card .card-chev { color: var(--dt-text-muted); }
.wrap .grid .card:hover .card-chev { color: var(--dt-primary); }

.wrap .grid .card.blue      .card-ico { background: #EDF2FF; color: #123BA0; }
.wrap .grid .card.indigo    .card-ico { background: #EEF0FD; color: #3A46B8; }
.wrap .grid .card.violet    .card-ico { background: #F1ECFD; color: #5B2FB0; }
.wrap .grid .card.green     .card-ico { background: #E8FAF2; color: #087443; }
.wrap .grid .card.amber     .card-ico { background: #FFF7DB; color: #805400; }
.wrap .grid .card.orangered .card-ico { background: #FFEFEA; color: #9C3517; }
.wrap .grid .card.teal      .card-ico { background: #E6F6F5; color: #0B5F5B; }
.wrap .grid .card.slateblue .card-ico { background: #EEF1F8; color: #22335F; }
.wrap .grid .card.orange    .card-ico { background: #FFF2E3; color: #8A4A08; }
.wrap .grid .card.sky       .card-ico { background: #E8F4FD; color: #0F5E96; }
.wrap .grid .card.rose      .card-ico { background: #FDECF3; color: #9E2A57; }
.wrap .grid .card.red       .card-ico { background: #FDECEC; color: #A32320; }
.wrap .grid .card.slate     .card-ico { background: #EFF1F5; color: #2A3145; }

/* --- Footer strip panels ---------------------------------------------- */
.wrap .strip { gap: var(--dt-gutter); }
.wrap .strip .panel {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow-1);
}
.wrap .strip .panel h4 {
    color: var(--dt-text-muted);
    font-size: var(--dt-fs-caption);
    letter-spacing: .02em;
    text-transform: none;
    font-weight: 600;
}
.wrap .strip .panel h4 i { color: var(--dt-primary); }
.wrap .strip .status-row { color: var(--dt-text); font-weight: 600; }
.wrap .strip .dot { background: var(--dt-success-text); box-shadow: 0 0 0 3px var(--dt-success-soft); }
.wrap .strip .panel small { color: var(--dt-text-muted); }
.wrap .strip .ann-row p { color: var(--dt-text); }
.wrap .strip .ann-row p b { color: var(--dt-primary); font-weight: 600; }
.wrap .strip .ann-row a { color: var(--dt-primary); }
.wrap .strip .ann-row a:hover { color: var(--dt-primary-hover); text-decoration: underline; }
.wrap .strip .qlinks a {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-control);
    color: var(--dt-text);
    border-radius: var(--dt-radius);
}
.wrap .strip .qlinks a:hover {
    background: var(--dt-primary-soft);
    border-color: var(--dt-primary);
    color: var(--dt-primary-pressed);
}

/* --- Mobile sticky call to action ------------------------------------- */
.m-cta {
    background: var(--dt-surface);
    border-top: 1px solid var(--dt-border-subtle);
    backdrop-filter: none;
}
.m-cta a {
    background: var(--dt-primary);
    color: #FFFFFF;
    border-radius: var(--dt-radius);
    font-weight: 600;
}
.m-cta a:hover { background: var(--dt-primary-hover); }

/* --- Legacy shell in print -------------------------------------------- */
@media print {
    .topbar, .sidebar, .sb-backdrop, .m-cta, .skip-link { display: none !important; }
    .shell { display: block; }
    body:has(.topbar) { background: #FFFFFF; }
    .wrap .grid .card, .wrap .strip .panel { border: 1px solid #000000; box-shadow: none; break-inside: avoid; }
}

/* =====================================================================
   17. PURE BLUE + PURE RED
   Requested direction: the portal runs on two brand colours — cobalt
   blue and red — and gold is retired.

   Literal #FF0000 is not usable. White text on it reaches only 4.00:1
   and it sits at 3.76:1 against the canvas, so it fails both normal-text
   contrast and the 3:1 non-text boundary. The reds below are the
   closest vivid reds that actually pass:

     --dt-red       #DC2626  white label on it        4.83:1
     --dt-red-text  #C1121F  red text on white        6.22:1
     --dt-red-text  #C1121F  red text on #FDECEC      5.45:1

   Red must never be text on the cobalt bar: #DC2626 on #1A55E3 is
   1.12:1. On cobalt, labels stay white.
   ===================================================================== */

:root {
    --dt-red:          #DC2626;   /* solid fills that carry a white label */
    --dt-red-hover:    #C1121F;
    --dt-red-pressed:  #A81A1A;
    --dt-red-text:     #C1121F;   /* red text or icon on a light surface */
    --dt-red-soft:     #FDECEC;   /* tint behind --dt-red-text */
    --dt-red-border:   #F5C2C2;
    /* The hero photo's scrim is dark; #DC2626 only reaches 3.30:1 there,
       so on-dark red copy uses this lighter tone (5.74:1) — or, better,
       stays white with red used as a solid badge behind it. */
    --dt-red-on-dark:  #FF6B6B;
}

/* Retire gold across the shared shell and the homepage. These --mgs-*
   names are read by pages/home.php, the css/components sheets and the
   mdrrmo module copies, so re-pointing them converts every gold surface at
   once. Each place where gold was TEXT on a dark background is given an
   explicit colour below, because red at that size would not pass. */
:root {
    --mgs-gold-400: var(--dt-red);
    --mgs-gold-500: var(--dt-red-hover);
    --mgs-gold-600: var(--dt-red-pressed);
    --mgs-grad-gold: var(--dt-red);
}

/* --- Hero wordmark: white, per the supplied design ------------------- *
 * The gold gradient was painted with background-clip:text, so the fill
 * has to be reset as well as the background or the glyphs stay
 * transparent. Shadows are kept — the wordmark still sits on a sunlit
 * photograph and needs its own separation.                              */
.hero .hw-name {
    background: none;
    -webkit-text-fill-color: #FFFFFF;
    color: #FFFFFF;
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, .85))
        drop-shadow(0 4px 14px rgba(0, 0, 0, .7))
        drop-shadow(0 12px 30px rgba(0, 0, 0, .5));
}

/* Eyebrow: white type with a short red rule, as in the design. */
.hero .hero-eyebrow {
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.hero .hero-eyebrow::after {
    content: "";
    flex: none;
    width: 38px;
    height: 3px;
    border-radius: 2px;
    background: var(--dt-red);
}

.hero .hero-acro { color: #FFFFFF; }
.hero .hero-acro b { color: #FFFFFF; }

/* Tourism story rail: white copy, red rule (the ::before dash inherits
   the retired gold token and is now red). */
.hero .hero-story { border-left-color: rgba(255, 255, 255, .28); }
.hero .hero-story-kicker { color: #FFFFFF; }
.hero .hero-story-title { color: #FFFFFF; }
.hero .hero-story-body { color: rgba(255, 255, 255, .92); }

/* --- Featured event card: red badge, red call to action -------------- */
.hero .hero-event-kicker {
    display: inline-block;
    background: var(--dt-red);
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: var(--dt-radius-sm);
    font-weight: 700;
    letter-spacing: .06em;
}
.hero .hero-event-title { color: #FFFFFF; }
.hero .hero-event-meta { color: rgba(255, 255, 255, .88); }
.hero .hero-event-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
    padding: .4rem .75rem;
    background: var(--dt-red);
    color: #FFFFFF;
    border-radius: var(--dt-radius);
    font-weight: 600;
}
.hero .hero-event:hover .hero-event-cta { background: var(--dt-red-hover); }

/* --- Hero quick chips: red primary, white secondary ------------------ *
 * The design puts the news chip in solid red and the command-centre chip
 * in a white outline. :first-child is doing the selecting because the
 * two chips are otherwise identical markup; if a third chip is ever
 * added, give it an explicit class instead of relying on order.         */
.hero .hero-quick .hero-chip {
    background: rgba(255, 255, 255, .96);
    border: 1px solid #FFFFFF;
    color: var(--dt-primary-pressed);
    border-radius: var(--dt-radius);
    font-weight: 600;
    min-height: 42px;
}
.hero .hero-quick .hero-chip:hover { background: #FFFFFF; color: var(--dt-primary); }
.hero .hero-quick .hero-chip i { color: inherit; }
.hero .hero-quick .hero-chip:first-child {
    background: var(--dt-red);
    border-color: var(--dt-red);
    color: #FFFFFF;
}
.hero .hero-quick .hero-chip:first-child:hover {
    background: var(--dt-red-hover);
    border-color: var(--dt-red-hover);
    color: #FFFFFF;
}

/* =====================================================================
   18. KPI STRIP — white cards, readable labels
   The strip was four dark navy tiles with gold 11px all-caps labels at
   .14em tracking. Two problems: it fought the light canvas it sits on,
   and the specification explicitly rules out widely spaced uppercase
   labels for important information. Rebuilt as white cards with a
   tinted icon chip, sentence-case 14px labels and tabular figures.
   ===================================================================== */

.wrap .kpi-strip { gap: var(--dt-gutter); padding: var(--dt-gutter) 0 var(--dt-space-2); }
.wrap .kpi-card {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow-1);
    padding: var(--dt-space-4) var(--dt-space-5);
}
.wrap .kpi-card:hover {
    transform: none;
    box-shadow: var(--dt-shadow-2);
    border-color: #C9D8FF;
}
.wrap .kpi-ico {
    background: var(--dt-primary-soft);
    color: var(--dt-primary-pressed);
    border-radius: var(--dt-radius);
    box-shadow: none;
    width: 44px;
    height: 44px;
}
/* Alternating blue / red chips, as in the supplied design. */
.wrap .kpi-strip .kpi-card:nth-child(2n) .kpi-ico {
    background: var(--dt-red-soft);
    color: var(--dt-red-text);
}
.wrap .kpi-val {
    color: var(--dt-text);
    font-size: var(--dt-fs-kpi);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wrap .kpi-lbl {
    color: var(--dt-text-muted);
    font-size: var(--dt-fs-dense);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-top: .25rem;
}

/* =====================================================================
   19. MUNICIPAL OFFICIALS BAND — white panel
   Was a navy-to-plum-to-crimson gradient with a gold-bordered avatar
   row, sitting directly on the light canvas. Now a white panel with a
   blue-to-red rule, matching the rest of the page.
   ===================================================================== */

.wrap .officials-suite {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow-1);
}
.wrap .officials-suite::before {
    background: linear-gradient(90deg, var(--dt-primary), var(--dt-red));
}
.wrap .officials-launcher {
    background: var(--dt-surface-subtle);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
}
.wrap .officials-launcher::after { display: none; }   /* gold glow */
.wrap .officials-avatars .av {
    border: 2px solid var(--dt-surface);
    box-shadow: 0 0 0 1px var(--dt-border-subtle);
    background: var(--dt-primary-soft);
}
.wrap .officials-avatars .av.more {
    background: var(--dt-primary-soft);
    color: var(--dt-primary-pressed);
}
.wrap .officials-launcher-tx strong { color: var(--dt-text); font-weight: 600; }
.wrap .officials-launcher-tx span { color: var(--dt-text-muted); font-size: var(--dt-fs-dense); }
.wrap .officials-toggle {
    background: var(--dt-primary);
    border: 1px solid var(--dt-primary);
    color: #FFFFFF;
    border-radius: var(--dt-radius);
    font-weight: 600;
    box-shadow: none;
}
.wrap .officials-toggle:hover { background: var(--dt-primary-hover); border-color: var(--dt-primary-hover); color: #FFFFFF; }

/* =====================================================================
   20. LAUNCHPAD TILE FIXES
   ===================================================================== */

/* The chevron is absolutely positioned at the tile's top-right. A title
   that wraps to a second line ran straight under it — "Budget Office
   System" and "Accounting System" both do at desktop widths. Reserving
   the gutter is the fix; moving the chevron would change every tile. */
.wrap .grid .card .card-tx h3 { padding-right: 1.5rem; }

/* Module chips collapse from thirteen hues to the two brand colours.
   The split still carries meaning — cool modules read blue, financial
   and response modules read red — so the tiles are not distinguished by
   colour alone in any case: each one is labelled. */
.wrap .grid .card.blue      .card-ico,
.wrap .grid .card.indigo    .card-ico,
.wrap .grid .card.violet    .card-ico,
.wrap .grid .card.sky       .card-ico,
.wrap .grid .card.teal      .card-ico,
.wrap .grid .card.green     .card-ico,
.wrap .grid .card.slateblue .card-ico,
.wrap .grid .card.slate     .card-ico {
    background: var(--dt-primary-soft);
    color: var(--dt-primary-pressed);
}
.wrap .grid .card.red       .card-ico,
.wrap .grid .card.rose      .card-ico,
.wrap .grid .card.orangered .card-ico,
.wrap .grid .card.orange    .card-ico,
.wrap .grid .card.amber     .card-ico {
    background: var(--dt-red-soft);
    color: var(--dt-red-text);
}

/* =====================================================================
   21. NEWS TICKER
   The tag was a gold gradient with near-black text. Solid red with a
   white label reads at 4.83:1 and matches the brand pair.
   ===================================================================== */

.mg-ticker .mg-tag {
    background: var(--dt-red);
    color: #FFFFFF;
    border-radius: var(--dt-radius-sm);
    font-weight: 700;
}
.mg-ticker .mg-pulse { background: #FFFFFF; }

/* =====================================================================
   22. RED IN THE REST OF THE SHELL
   ===================================================================== */

/* Sidebar count badges move from crimson to the brand red pair. */
.sidebar .sb-link .badge {
    background: var(--dt-red-soft);
    color: var(--dt-red-text);
}

/* Mobile sticky call to action follows the design's red primary. */
.m-cta a { background: var(--dt-red); }
.m-cta a:hover { background: var(--dt-red-hover); }

/* Destructive controls join the same red so the palette stays closed. */
.dt-btn--danger { background: var(--dt-red); border-color: var(--dt-red); }
.dt-btn--danger:hover { background: var(--dt-red-hover); border-color: var(--dt-red-hover); }
.dt-badge--danger,
.dt-status--cancelled {
    background: var(--dt-red-soft);
    border-color: var(--dt-red-border);
    color: var(--dt-red-text);
}
.dt-alert--danger {
    background: var(--dt-red-soft);
    border-color: var(--dt-red-border);
    border-left-color: var(--dt-red);
    color: var(--dt-red-text);
}
.btn-danger {
    --bs-btn-bg: #DC2626;
    --bs-btn-border-color: #DC2626;
    --bs-btn-hover-bg: #C1121F;
    --bs-btn-hover-border-color: #C1121F;
    --bs-btn-active-bg: #A81A1A;
    --bs-btn-active-border-color: #A81A1A;
}
:root { --bs-danger: #C1121F; --bs-danger-rgb: 193, 18, 31; }

/* =====================================================================
   23. REFERENCE LAYOUT
   Structure taken from the supplied target design: a working top bar
   (identity · search · notices · account), a named officials row, a
   section header over the launchpad, and a support card under the rail.

   The reference image supplied invented officials and a venue that
   contradicts the live event record. Only its LAYOUT is reproduced here;
   every name, role and count on the page comes from the 2025-2028
   records in pages/home.php.
   ===================================================================== */

/* --- Top bar ---------------------------------------------------------- */
.topbar { gap: var(--dt-space-4); }

.topbar .tb-tagline {
    color: #FFFFFF;
    font-size: var(--dt-fs-caption);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar .tb-search {
    flex: 1 1 26rem;
    max-width: 34rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--dt-space-2);
    height: 40px;
    padding: 0 var(--dt-space-4);
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: var(--dt-radius-pill);
}
.topbar .tb-search:focus-within { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.topbar .tb-search i { color: var(--dt-text-muted); font-size: 1rem; }
/* The label is a real <label> for the input, kept out of sight but in the
   accessibility tree — a placeholder alone is not an accessible name. */
.topbar .tb-search-lbl {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.topbar .tb-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    font-size: var(--dt-fs-dense);
    color: var(--dt-text);
}
.topbar .tb-search input::placeholder { color: var(--dt-text-muted); }
.topbar .tb-search input::-webkit-search-cancel-button { cursor: pointer; }

.topbar .tb-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--dt-radius);
    color: #FFFFFF;
    font-size: 1.05rem;
}
.topbar .tb-icon-btn:hover { background: rgba(255, 255, 255, .14); }

.topbar .tb-account {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-space-2);
    min-height: 44px;
    padding: 0 var(--dt-space-3);
    border-radius: var(--dt-radius);
    color: #FFFFFF;
    font-size: var(--dt-fs-dense);
    font-weight: 600;
}
.topbar .tb-account:hover { background: rgba(255, 255, 255, .14); }
.topbar .tb-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: .85rem;
}

/* The identity cluster yields space before the search does. */
@media (max-width: 1279.98px) {
    .topbar .tb-tagline { display: none; }
}
@media (max-width: 1023.98px) {
    .topbar .tb-search { flex-basis: 14rem; }
    .topbar .tb-account-name { display: none; }
}
@media (max-width: 767.98px) {
    .topbar { flex-wrap: wrap; row-gap: var(--dt-space-2); padding-bottom: var(--dt-space-2); }
    .topbar .tb-search { order: 10; flex: 1 1 100%; max-width: none; }
    .topbar .tb-rep { font-size: .6875rem; }
}

/* Filter status line above the launchpad. */
.tb-search-status {
    margin: 0 0 var(--dt-space-3);
    color: var(--dt-text-muted);
    font-size: var(--dt-fs-dense);
}
.tb-search-status:empty { display: none; }

/* --- Section header over the launchpad -------------------------------- */
.wrap .welcome.section-head {
    align-items: flex-end;
    gap: var(--dt-space-4);
}
.wrap .section-head-tx h2 {
    margin: 0;
    color: var(--dt-text);
    font-size: var(--dt-fs-page-title);
    line-height: 1.25;
    font-weight: 600;
}
.wrap .section-head-tx p {
    margin: var(--dt-space-1) 0 0;
    color: var(--dt-text-muted);
    font-size: var(--dt-fs-body);
}
.wrap .section-head-link {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-space-2);
    min-height: 44px;
    color: var(--dt-primary);
    font-size: var(--dt-fs-dense);
    font-weight: 600;
    white-space: nowrap;
}
.wrap .section-head-link:hover { color: var(--dt-primary-hover); text-decoration: underline; }

/* --- Officials band: named portrait row ------------------------------- */
.wrap .officials-launcher {
    align-items: center;
    gap: var(--dt-space-6);
    padding: var(--dt-space-6);
}
.wrap .officials-launcher-lead { flex: 1 1 15rem; }

/* The red rule under the heading, as in the reference. */


@media (max-width: 991.98px) {
    .wrap .officials-launcher { flex-direction: column; align-items: stretch; }
    .wrap .officials-toggle { align-self: flex-start; }
}
@media (max-width: 575.98px) {
}

/* --- Sidebar support card --------------------------------------------- */
.sidebar .sb-help {
    display: flex;
    align-items: center;
    gap: var(--dt-space-3);
    margin: var(--dt-space-3);
    padding: var(--dt-space-3);
    background: var(--dt-primary-soft);
    border: 1px solid #C9D8FF;
    border-radius: var(--dt-radius);
    color: var(--dt-text);
    text-decoration: none;
}
.sidebar .sb-help:hover { background: #E2EAFF; border-color: var(--dt-primary); }
.sidebar .sb-help-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--dt-primary);
    color: #FFFFFF;
}
.sidebar .sb-help-tx { min-width: 0; flex: 1; }
.sidebar .sb-help-tx b {
    display: block;
    font-size: var(--dt-fs-dense);
    font-weight: 600;
    color: var(--dt-text);
}
.sidebar .sb-help-tx span {
    display: block;
    font-size: var(--dt-fs-caption);
    color: var(--dt-text-muted);
}
.sidebar .sb-help-chev { color: var(--dt-primary); font-size: .8rem; }

/* Collapsed icon rail: the card shrinks to its icon rather than clipping. */
@media (max-width: 1024px) {
    .sidebar .sb-help { justify-content: center; padding: var(--dt-space-2); }
    .sidebar .sb-help-tx,
    .sidebar .sb-help-chev { display: none; }
}
@media (max-width: 768px) {
    .sidebar .sb-help { justify-content: flex-start; padding: var(--dt-space-3); }
    .sidebar .sb-help-tx { display: block; }
    .sidebar .sb-help-chev { display: inline; }
}

@media print {
    .topbar .tb-search,
    .sidebar .sb-help { display: none !important; }
}

/* =====================================================================
   24. FLATTEN PER-TILE "PREMIUM" TREATMENTS
   A handful of launchpad tiles carried bespoke styling: .budget-office
   had a green gradient, a gold border, a 9px drop-plate and a cream
   title with a THREE-LAYER text-shadow; .ivory, .bronze and .maroon had
   their own variants.

   On the old dark tiles that read as emphasis. On a white card the
   stacked shadows smear the glyph edges into a fake bold, which is why
   "Budget Office System" and "Accounting System" looked unlike every
   other tile on the page.

   Every tile now uses one weight, one colour and no shadow. Emphasis
   belongs to the icon chip and to ordering, not to one tile shouting.
   ===================================================================== */

.wrap .grid .card .card-tx h3,
.wrap .grid .card.budget-office .card-tx h3,
.wrap .grid .card.ivory .card-tx h3,
.wrap .grid .card.bronze .card-tx h3,
.wrap .grid .card.maroon .card-tx h3 {
    color: var(--dt-text);
    font-weight: 600;
    text-shadow: none;
}
.wrap .grid .card .card-tx p,
.wrap .grid .card.budget-office .card-tx p,
.wrap .grid .card.ivory .card-tx p,
.wrap .grid .card.bronze .card-tx p,
.wrap .grid .card.maroon .card-tx p {
    color: var(--dt-text-muted);
    text-shadow: none;
}
.wrap .grid .card.budget-office,
.wrap .grid .card.ivory,
.wrap .grid .card.bronze,
.wrap .grid .card.maroon {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border-subtle);
    box-shadow: var(--dt-shadow-1);
    text-shadow: none;
}
.wrap .grid .card.budget-office .card-ico,
.wrap .grid .card.ivory .card-ico,
.wrap .grid .card.bronze .card-ico,
.wrap .grid .card.maroon .card-ico {
    background: var(--dt-primary-soft);
    color: var(--dt-primary-pressed);
    box-shadow: none;
}
.wrap .grid .card.budget-office .card-chev,
.wrap .grid .card.ivory .card-chev,
.wrap .grid .card.bronze .card-chev,
.wrap .grid .card.maroon .card-chev { color: var(--dt-text-muted); text-shadow: none; }
.wrap .grid .card.budget-office:hover,
.wrap .grid .card.ivory:hover,
.wrap .grid .card.bronze:hover,
.wrap .grid .card.maroon:hover {
    transform: none;
    box-shadow: var(--dt-shadow-2);
    border-color: #C9D8FF;
}
.wrap .grid .card.budget-office:hover .card-ico,
.wrap .grid .card.ivory:hover .card-ico {
    background: var(--dt-primary-soft);
    color: var(--dt-primary-pressed);
    box-shadow: none;
}
.wrap .grid .card.ivory:hover .card-chev { color: var(--dt-primary); }

/* =====================================================================
   25. MASTHEAD
   The photograph stays exactly as it is — it is the municipality's own
   aerial of the hall, plaza and the Dumanquillas ridge. Only the scrim
   over it and the frame around it are rebuilt.

   What was wrong: the scrim was three stacked near-BLACK washes
   (rgba(3,9,25,.66) radial + a black linear + a black bottom fade),
   tuned for an older flat illustration. Over a sunlit photograph it read
   as grey sludge, and it fought the blue shell the rest of the page now
   uses. The reference design instead runs a clean deep-blue panel down
   the left, where the seal and wordmark sit, and lets the photograph
   come through unclouded on the right.

   The replacement is one horizontal blue ramp plus a short bottom fade.
   White copy sits over the 0-34% band, which is at or above
   rgba(9,30,86,.88) — comfortably past 4.5:1 — and the right half of the
   frame is left almost untouched so the plaza and ridge actually read.
   ===================================================================== */

.hero .hero-bg::after {
    background:
        /* Left reading panel: deep cobalt, opaque where the text sits,
           gone by the time it reaches the ridge line. */
        linear-gradient(90deg,
            rgba(9, 30, 86, .95)  0%,
            rgba(10, 34, 96, .93) 34%,
            rgba(11, 38, 108, .88) 44%,
            rgba(13, 46, 126, .62) 52%,
            rgba(16, 54, 146, .28) 62%,
            rgba(18, 58, 158, .08) 71%,
            transparent 80%),
        /* Just enough weight at the foot to seat the wave divider. */
        linear-gradient(180deg,
            transparent 70%,
            rgba(8, 24, 68, .16) 90%,
            rgba(8, 24, 68, .30) 100%);
}

/* The drifting particle field belonged to the old navy wallpaper. Over a
   photograph it is visual noise, and the reference has nothing like it. */
.hero .hero-particles { display: none; }

/* The wave divider's gold accent line and pulsing dot are retired with
   the rest of the gold; the wave itself stays as the shape that carries
   the hero into the canvas. */
.hero .hero-wave .wl,
.hero .hero-wave .wp { display: none; }

/* Height: the reference masthead is a band, not a screen. 560px pushed
   the KPI row below the fold on a laptop. */
.hero { min-height: 470px; }
.hero .hero-inner { padding: var(--dt-space-8) 0; min-height: 0; }

/* Seal and wordmark tighten up so the block reads as one unit against
   the blue panel rather than drifting across the photograph. */
.hero .hero-id { gap: var(--dt-space-4); }
.hero .hero-seal { box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
/* The decorative orbit rings and glow pulses around the seal are part of
   the old treatment; the reference frames the seal plainly. */
.hero .hero-seal-orbit,
.hero .hero-seal-orbit-2,
.hero .hero-seal-glow,
.hero .hero-seal-glow-2 { display: none; }

/* With a solid panel behind it, the copy no longer needs the heavy
   multi-layer shadows that were fighting the sunlit plaza. */
.hero .hw-name {
    filter: drop-shadow(0 2px 8px rgba(4, 14, 44, .45));
}
.hero .hw-pre,
.hero .hw-sub,
.hero .hero-acro,
.hero .hero-acro b {
    text-shadow: 0 1px 3px rgba(4, 14, 44, .5);
}

/* Right rail: the featured event and the quick chips sit on the clear
   half of the photograph, so the card carries its own panel. */
.hero .hero-event {
    background: rgba(8, 22, 60, .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--dt-radius);
    backdrop-filter: blur(3px);
}
.hero .hero-event:hover { background: rgba(8, 22, 60, .82); }
.hero .hero-story { border-left-color: rgba(255, 255, 255, .3); }

/* The copy column is bounded so it stays inside the blue panel instead of
   running out over the sunlit plaza. Measured: the wordmark was 672px of
   an 1185px hero — 57% — which put its right half at 0.28 scrim opacity
   over bright sky. Capping the column and the display size keeps every
   glyph on the opaque band, and leaves the right quarter of the
   photograph completely unclouded, which is the point of the masthead. */
.hero .hero-inner { align-items: center; gap: var(--dt-space-8); }
.hero .hero-id { max-width: 52%; }
.hero .hw-name { font-size: clamp(2.25rem, 4.6vw, 4rem); }
.hero .hero-acro { max-width: 34rem; }
.hero .hero-rail { width: min(340px, 30vw); }

@media (max-width: 991.98px) {
    .hero .hero-id { max-width: none; }
    .hero .hero-rail { width: 100%; }
}

@media (max-width: 991.98px) {
    /* Stacked, the copy no longer has a left panel to sit on, so the
       ramp turns vertical and covers the whole frame instead. */
    .hero .hero-bg::after {
        background: linear-gradient(180deg,
            rgba(9, 30, 86, .88) 0%,
            rgba(11, 37, 104, .78) 45%,
            rgba(9, 30, 86, .86) 100%);
    }
    .hero { min-height: 0; }
}

/* =====================================================================
   26. HERO RAIL -> BOTTOM BAND
   The rail (tourism story + featured event + quick chips) was a 360px
   column pinned to the hero's right edge. Two problems with that: it
   covered the clearest part of the photograph — the hall, plaza and
   ridge — and it left a dead blue strip running the full width of the
   hero underneath.

   The rail now runs as a horizontal band along that strip. The identity
   block gets the whole upper left, the photograph is uncovered on the
   right, and the dead space carries the content that used to sit on top
   of the view.

   Layout only: same markup, same links, same order in the DOM, so
   keyboard and reading order are unchanged.
   ===================================================================== */

.hero .hero-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--dt-space-6);
    padding: var(--dt-space-8) 0 var(--dt-space-6);
}

/* The identity block no longer shares the row, so it can breathe. */
.hero .hero-id {
    flex-direction: row;
    align-items: center;
    max-width: 64%;
}

.hero .hero-rail {
    width: 100%;
    align-self: auto;
    margin-left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--dt-space-5);
    padding: var(--dt-space-4) var(--dt-space-5);
    border-left: 0;
    /* Its own band: the horizontal scrim has faded out by this point on
       the right, so the strip carries the contrast its content needs. */
    background: rgba(7, 22, 62, .62);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--dt-radius);
    backdrop-filter: blur(4px);
}

/* Story takes the slack; event and chips keep their natural width. */
.hero .hero-rail .hero-story {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0;
    border-left: 0;
    text-shadow: none;
}
.hero .hero-rail .hero-event {
    flex: 0 1 auto;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .24);
    backdrop-filter: none;
}
.hero .hero-rail .hero-event:hover { background: rgba(255, 255, 255, .18); transform: none; }
.hero .hero-rail .hero-quick {
    flex: 0 0 auto;
    margin-left: auto;
    flex-wrap: nowrap;
}

/* With the band in place the heavy per-glyph shadows are redundant. */
.hero .hero-rail .hero-story-title,
.hero .hero-rail .hero-story-body,
.hero .hero-rail .hero-story-kicker { text-shadow: none; }

/* The band needs room, and the photograph needs to stay visible above
   it, so the hero grows slightly rather than the band overlapping. */
.hero { min-height: 520px; }

/* Weight the foot of the scrim so the band never floats on bright sky. */
.hero .hero-bg::after {
    background:
        linear-gradient(90deg,
            rgba(9, 30, 86, .95)  0%,
            rgba(10, 34, 96, .93) 34%,
            rgba(11, 38, 108, .88) 44%,
            rgba(13, 46, 126, .62) 52%,
            rgba(16, 54, 146, .28) 62%,
            rgba(18, 58, 158, .08) 71%,
            transparent 80%),
        linear-gradient(180deg,
            transparent 48%,
            rgba(8, 24, 68, .22) 68%,
            rgba(8, 24, 68, .52) 86%,
            rgba(8, 24, 68, .62) 100%);
}

@media (max-width: 1199.98px) {
    .hero .hero-rail { flex-wrap: wrap; }
    .hero .hero-rail .hero-quick { margin-left: 0; }
    .hero .hero-id { max-width: 100%; }
}

@media (max-width: 767.98px) {
    .hero .hero-inner { padding: var(--dt-space-6) 0; gap: var(--dt-space-4); }
    .hero .hero-id { flex-direction: column; align-items: flex-start; }
    .hero .hero-rail {
        flex-direction: column;
        align-items: stretch;
        gap: var(--dt-space-3);
        padding: var(--dt-space-4);
    }
    .hero .hero-rail .hero-quick { flex-wrap: wrap; }
    .hero .hero-rail .hero-quick .hero-chip { flex: 1 1 8rem; justify-content: center; }
    .hero { min-height: 0; }
}

/* =====================================================================
   27. OFFICIALS ROW — CORRECTION
   The portrait frame is a <span>, and width, height and overflow are all
   ignored on a non-replaced INLINE box. The 76px circle therefore never
   existed: each seal rendered at its natural height, unclipped, as a
   ~470px vertical smear down the band.

   Giving the frame a block box fixes the frame, the clip and the img
   sizing in one go. The portraits are the municipal seal placeholder
   (real portraits are pending), so the fit is `contain` on white — a
   seal cropped to a circle by `cover` loses its rim and its text.
   ===================================================================== */


/* Roles are sentence case: wide-tracked uppercase on a four-line string
   ("MUNICIPAL VICE MAYOR / PRESIDING OFFICER") is exactly what the
   specification rules out for information that matters. */

@media (max-width: 575.98px) {
}


/* Alternate blue / red so the row reads as distinct people, not a stack
   of identical chips — the same pairing used by the KPI cards. */

/* =====================================================================
   28. MASTHEAD — PROPORTION, ARRANGEMENT, 3D WORDMARK
   Three corrections.

   1. Dead strip. Below the rail band there was still ~55px of empty blue:
      the hero's bottom padding plus the 80px absolute .hero-wave. The
      wave belonged to the old navy treatment and the reference has
      nothing like it, so it goes and the padding tightens. The band now
      sits on the floor of the masthead.

   2. Arrangement. Putting the seal and the copy in a row left the seal
      vertically centred against a four-line text block, so the eyebrow
      floated off its shoulder. Back to a column, seal first — which is
      both the reference layout and this file's own original intent
      ("the mark of authority reads first, then the name it authorises").

   3. The wordmark. Flattening the gold gradient to plain white lost the
      relief the display type was carrying. It gets a proper extrusion
      back, built from the blue ramp rather than gold: six 1px steps for
      the solid edge, then two soft casts for depth.
   ===================================================================== */

.hero .hero-wave { display: none; }
.hero .hero-inner { padding: var(--dt-space-6) 0 var(--dt-space-4); }
.hero { min-height: 500px; }

/* Seal above the wordmark, both flush left. */
.hero .hero-id {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dt-space-3);
    max-width: 62%;
}
.hero .hero-seal-wrap { margin: 0; }
.hero .hero-seal {
    width: clamp(88px, 7vw, 116px);
    height: clamp(88px, 7vw, 116px);
    padding: 3px;
}

/* Extruded wordmark: white face, blue relief. The steps are solid so the
   edge stays crisp at display size; the two soft casts sit the block on
   the photograph without blurring the glyphs. */
.hero .hw-name {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    background: none;
    filter: none;
    text-shadow:
        0 1px 0 #1747B8,
        0 2px 0 #1440A8,
        0 3px 0 #123A98,
        0 4px 0 #103488,
        0 5px 0 #0E2E78,
        0 6px 0 #0C2868,
        0 9px 16px rgba(4, 14, 44, .55),
        0 18px 34px rgba(4, 14, 44, .38);
    letter-spacing: -.02em;
    line-height: .98;
}

/* The supporting lines keep a single soft shadow so they read as one
   block with the wordmark without competing with its relief. */
.hero .hw-pre,
.hero .hw-sub {
    text-shadow: 0 2px 4px rgba(4, 14, 44, .6);
}
.hero .hw-pre { letter-spacing: .24em; }

@media (max-width: 991.98px) {
    .hero .hero-id { max-width: none; }
    .hero .hw-name {
        text-shadow:
            0 1px 0 #1440A8, 0 2px 0 #123A98, 0 3px 0 #103488,
            0 6px 12px rgba(4, 14, 44, .5);
    }
}

/* Initials chip inside the overlapping avatar stack. Sized and stacked by
   the existing .av rule, so this only supplies the face. Alternating blue
   and red keeps five chips from reading as one repeated shape. */
.officials-avatars .av.av-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Solid, not tinted. At 52px overlapped by -14px, a pale chip with
       13px type read as a row of empty rings rather than as people.
       White on #1A55E3 is 6.08:1 and white on #DC2626 is 4.83:1. */
    background: var(--dt-primary);
    color: #FFFFFF;
    border: 2px solid var(--dt-surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
}
.officials-avatars .av.av-initials:nth-child(2n) {
    background: var(--dt-red);
    color: #FFFFFF;
}
/* The overflow counter is neutral so it reads as a count, not a person. */
.officials-avatars .av.more {
    background: #334155;
    color: #FFFFFF;
    border: 2px solid var(--dt-surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
    font-size: .875rem;
    font-weight: 700;
}

/* =====================================================================
   29. KPI CARDS — SIZE AND DEPTH
   Two problems. The value was set at --dt-fs-kpi (34px), which wrapped
   "141.8 km²" onto a second line and left the four cards uneven. And
   flat white on a flat canvas gave the row nothing to sit on.

   The value comes down to 28px and is allowed to shrink with the
   viewport, so the longest figure stays on one line at every width. The
   card gains a solid bottom plate plus a soft cast — a raised edge
   rather than a blurred glow, which is the depth the reference uses.
   ===================================================================== */

.wrap .kpi-card {
    padding: var(--dt-space-4) var(--dt-space-5);
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius);
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 3px 0 #DDE4EF,
        0 6px 12px rgba(16, 24, 40, .10),
        0 14px 24px rgba(16, 24, 40, .05);
    transition: box-shadow var(--dt-motion), transform var(--dt-motion);
}
.wrap .kpi-card:hover {
    transform: translateY(-2px);
    border-color: #C9D8FF;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 5px 0 #D2DCEC,
        0 10px 18px rgba(16, 24, 40, .13),
        0 20px 34px rgba(16, 24, 40, .07);
}

/* One line at every width: 28px at desktop, easing down to 22px. */
.wrap .kpi-val {
    font-size: clamp(1.375rem, 1.9vw, 1.75rem);
    line-height: 1.15;
    white-space: nowrap;
}
.wrap .kpi-lbl { font-size: var(--dt-fs-caption); }

/* The chip gets the same raised edge so it reads as part of the card. */
.wrap .kpi-ico {
    width: 40px;
    height: 40px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 0 rgba(16, 24, 40, .06);
}

@media (prefers-reduced-motion: reduce) {
    .wrap .kpi-card:hover { transform: none; }
}

/* =====================================================================
   30. MASTHEAD BAND -> ANIMATED BUTTON TABS
   The band was a blue panel holding the featured event and the two
   links. The panel goes: the items now sit straight on the photograph
   as buttons.

   Each tab carries a sheen that sweeps across on hover or keyboard
   focus, plus a small lift. The sweep is decorative only — it never
   conveys state, the label and icon do that — and the whole thing is
   switched off under prefers-reduced-motion.

   The event card keeps a background of its own. It has to: a QR code
   needs a quiet zone and its caption sits over the brightest part of
   the frame. Removing the panel means the card carries its own, not
   that the text goes bare onto the photo.
   ===================================================================== */

.hero .hero-rail {
    background: transparent;
    border: 0;
    backdrop-filter: none;
    padding: 0;
    gap: var(--dt-space-4);
}

/* --- The two tabs ----------------------------------------------------- */
.hero .hero-quick .hero-chip {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 44px;
    padding: 0 var(--dt-space-5);
    border-radius: var(--dt-radius);
    font-weight: 700;
    box-shadow: 0 2px 0 rgba(4, 14, 44, .28), 0 6px 14px rgba(4, 14, 44, .28);
    transition: transform var(--dt-motion), box-shadow var(--dt-motion), background var(--dt-motion);
}
/* The sweep. translateX past the edge so it never sits mid-tab at rest. */
.hero .hero-quick .hero-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg,
        transparent 25%,
        rgba(255, 255, 255, .42) 50%,
        transparent 75%);
    transform: translateX(-130%);
    transition: transform 700ms cubic-bezier(.25, .8, .35, 1);
}
.hero .hero-quick .hero-chip:hover::after,
.hero .hero-quick .hero-chip:focus-visible::after { transform: translateX(130%); }
.hero .hero-quick .hero-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(4, 14, 44, .3), 0 10px 22px rgba(4, 14, 44, .34);
}
.hero .hero-quick .hero-chip:active { transform: translateY(0); }

/* --- The event card, now free-standing -------------------------------- */
.hero .hero-rail .hero-event {
    background: rgba(8, 22, 60, .78);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--dt-radius);
    box-shadow: 0 6px 18px rgba(4, 14, 44, .34);
    transition: transform var(--dt-motion), background var(--dt-motion), box-shadow var(--dt-motion);
}
.hero .hero-rail .hero-event:hover {
    background: rgba(8, 22, 60, .88);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(4, 14, 44, .4);
}
/* The red call to action gets the same sweep so the card reads as one
   control with the tabs beside it. */
.hero .hero-rail .hero-event-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero .hero-rail .hero-event-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform 700ms cubic-bezier(.25, .8, .35, 1);
}
.hero .hero-rail .hero-event:hover .hero-event-cta::after,
.hero .hero-rail .hero-event:focus-visible .hero-event-cta::after { transform: translateX(130%); }

@media (prefers-reduced-motion: reduce) {
    .hero .hero-quick .hero-chip,
    .hero .hero-quick .hero-chip::after,
    .hero .hero-rail .hero-event,
    .hero .hero-rail .hero-event-cta::after { transition: none !important; }
    .hero .hero-quick .hero-chip::after,
    .hero .hero-rail .hero-event-cta::after { display: none; }
    .hero .hero-quick .hero-chip:hover,
    .hero .hero-rail .hero-event:hover { transform: none; }
}

/* =====================================================================
   31. MASTHEAD FOOT — THREE TABS + DEMOTED EVENT
   Matches the supplied layout: News / Events / Command Center run as
   full-width tabs along the foot of the masthead, and the jamboree card
   sits at the end of that row rather than over the photograph.

   The demotion is driven by the event's own end date (see pages/home.php),
   so a finished event steps back on its own instead of holding the most
   prominent slot until someone remembers to edit the page.
   ===================================================================== */

.hero .hero-rail {
    flex-direction: row;
    align-items: stretch;
    gap: var(--dt-space-4);
}

.hero .hero-tabs {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dt-space-4);
    min-width: 0;
}

.hero .hero-tab {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: var(--dt-space-3);
    min-height: 68px;
    padding: var(--dt-space-3);
    border-radius: var(--dt-radius);
    background: var(--dt-primary);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(4, 14, 44, .34), 0 8px 18px rgba(4, 14, 44, .30);
    transition: transform var(--dt-motion), box-shadow var(--dt-motion), background var(--dt-motion);
}
.hero .hero-tab--news { background: var(--dt-red); }

.hero .hero-tab-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--dt-radius);
    background: rgba(255, 255, 255, .18);
    font-size: 1.15rem;
}
.hero .hero-tab-tx { min-width: 0; }
.hero .hero-tab-tx b {
    display: block;
    font-size: var(--dt-fs-body);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2;
}
.hero .hero-tab-tx span {
    display: block;
    font-size: var(--dt-fs-caption);
    color: rgba(255, 255, 255, .92);
    line-height: 1.3;
    /* Wrap rather than clip. At 1440 the rail is ~1185px wide and three
       tabs plus the event card leave roughly 200px each, which truncated
       every subtitle mid-word ("Latest updates and a…"). Truncating the
       one line that says what the tab does is worse than two lines. */
    white-space: normal;
}
.hero .hero-tab-go {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: .8rem;
}

/* Sweep, same as the other tabs. Decorative; never conveys state. */
.hero .hero-tab::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .34) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform 700ms cubic-bezier(.25, .8, .35, 1);
}
.hero .hero-tab:hover::after,
.hero .hero-tab:focus-visible::after { transform: translateX(130%); }
.hero .hero-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(4, 14, 44, .36), 0 12px 24px rgba(4, 14, 44, .36);
}
.hero .hero-tab:active { transform: translateY(0); }

/* --- The event card at the end of the row ---------------------------- */
/* Fixed basis, no shrink: as a shrinkable flex item the card gave up its
   width to the three tabs and clipped the event title to "23r…". The tabs
   absorb the squeeze instead — they wrap their subtitles, the card can't. */
.hero .hero-rail .hero-event {
    flex: 0 0 19.5rem;
    align-items: flex-start;
    gap: var(--dt-space-3);
    padding: var(--dt-space-3) var(--dt-space-4);
}
.hero .hero-rail .hero-event .hero-event-tx { gap: .2rem; }
.hero .hero-rail .hero-event .hero-event-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--dt-fs-caption);
}
/* A concluded event keeps its place but stops shouting: neutral kicker,
   neutral call to action, no red. The wording changes too — "Recent
   event" and "View event recap" — so the state is not carried by colour. */
.hero .hero-rail .hero-event.is-past .hero-event-kicker {
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}
.hero .hero-rail .hero-event.is-past .hero-event-cta {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .34);
}
.hero .hero-rail .hero-event.is-past:hover .hero-event-cta { background: rgba(255, 255, 255, .28); }

/* --- Script motto, top right ----------------------------------------- */
.hero .hero-motto {
    position: absolute;
    top: var(--dt-space-8);
    right: var(--dt-gutter);
    z-index: 5;
    margin: 0;
    text-align: right;
    color: #FFFFFF;
    /* System script faces only — the theme downloads no fonts. */
    font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
    font-size: clamp(1.1rem, 1.8vw, 1.75rem);
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(4, 14, 44, .7), 0 6px 20px rgba(4, 14, 44, .5);
    pointer-events: none;
}
.hero .hero-motto span { display: block; }
/* The red underscore that finishes the line in the reference. */
.hero .hero-motto::after {
    content: "";
    display: block;
    width: 62%;
    height: 3px;
    margin: .3rem 0 0 auto;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--dt-red));
}

@media (max-width: 1199.98px) {
    .hero .hero-motto { display: none; }
    .hero .hero-rail { flex-wrap: wrap; }
    .hero .hero-rail .hero-event { flex: 1 1 100%; }
}
@media (max-width: 767.98px) {
    .hero .hero-tabs { grid-template-columns: 1fr; gap: var(--dt-space-3); }
}
@media (prefers-reduced-motion: reduce) {
    .hero .hero-tab, .hero .hero-tab::after { transition: none !important; }
    .hero .hero-tab::after { display: none; }
    .hero .hero-tab:hover { transform: none; }
}

/* =====================================================================
   32. KPI GHOST ICON
   The reference sets a second, faded icon at the right of each card. It
   is decoration, so it is aria-hidden by virtue of being a pseudo-element
   and never carries information the label does not already give.
   ===================================================================== */
.wrap .kpi-card { position: relative; overflow: hidden; }
.wrap .kpi-card::after {
    content: "\f0c0";                        /* users */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: var(--dt-space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: var(--dt-primary);
    opacity: .12;
    pointer-events: none;
}
.wrap .kpi-strip .kpi-card:nth-child(2)::after { content: "\f19c"; }  /* landmark */
.wrap .kpi-strip .kpi-card:nth-child(3)::after { content: "\f279"; }  /* map      */
.wrap .kpi-strip .kpi-card:nth-child(4)::after { content: "\f073"; }  /* calendar */
.wrap .kpi-strip .kpi-card:nth-child(2n)::after { color: var(--dt-red); }

@media (max-width: 575.98px) {
    .wrap .kpi-card::after { display: none; }
}

/* =====================================================================
   33. SCHEME SWITCH — default, and a black-and-white alternative
   The new theme is the default on every page of the site; nothing has to
   opt in. The switch offers one alternative: a high-contrast
   black-and-white mode for viewers who need it or who print-preview a
   lot. It is set on <html data-dt-scheme> by the inline bootstrap in
   includes/theme-everywhere.php, before first paint.

   Note this is NOT the dark-mode architecture in section 2. Dark mode
   still needs a per-module audit before it can be offered; this one is
   safe to ship because it only ever raises contrast.
   ===================================================================== */

:root[data-dt-scheme="contrast"] {
    --dt-canvas:            #FFFFFF;
    --dt-surface:           #FFFFFF;
    --dt-surface-subtle:    #F2F2F2;
    --dt-surface-sunken:    #E8E8E8;

    --dt-text:              #000000;
    --dt-text-muted:        #1A1A1A;   /* still near-black: 16.1:1 on white */
    --dt-border-subtle:     #767676;   /* 4.54:1 — a real boundary, not a hint */
    --dt-border-control:    #000000;

    --dt-primary:           #00338F;   /* white on it: 11.2:1 */
    --dt-primary-hover:     #002670;
    --dt-primary-pressed:   #001B52;
    --dt-primary-soft:      #E8ECF7;

    --dt-red:               #A5001E;   /* white on it: 9.4:1  */
    --dt-red-hover:         #8A0019;
    --dt-red-text:          #8A0019;
    --dt-red-soft:          #FBEAEC;
    --dt-red-border:        #8A0019;

    --dt-success-text:      #005C33;  --dt-success-soft: #E9F5EF;
    --dt-danger-text:       #8A0019;  --dt-danger-soft:  #FBEAEC;
    --dt-info-text:         #004E5E;  --dt-info-soft:    #E8F4F7;
    --dt-warning-text:      #5C3C00;  --dt-warning-soft: #FAF2DF;

    /* Depth is decoration; in this mode the border does the work. */
    --dt-shadow-1:          none;
    --dt-shadow-2:          none;
    --dt-shadow-overlay:    0 0 0 2px #000000;
}

/* Decorative surfaces flatten so nothing relies on a gradient or a photo
   scrim for legibility. The masthead photograph stays — it is content —
   but its panel goes solid so the copy sits on a known colour. */
:root[data-dt-scheme="contrast"] .hero .hero-bg::after {
    background: linear-gradient(90deg, #00204F 0%, #00204F 52%, rgba(0, 32, 79, .82) 72%, rgba(0, 32, 79, .55) 100%);
}
:root[data-dt-scheme="contrast"] .hero .hw-name { text-shadow: 0 2px 0 #000000; }
:root[data-dt-scheme="contrast"] .hero .hero-motto { display: none; }
:root[data-dt-scheme="contrast"] .hero .hero-tab,
:root[data-dt-scheme="contrast"] .hero .hero-tab::after { box-shadow: none; }
:root[data-dt-scheme="contrast"] .hero .hero-tab::after { display: none; }
:root[data-dt-scheme="contrast"] .wrap .kpi-card { box-shadow: none; border: 2px solid #000000; }
:root[data-dt-scheme="contrast"] .wrap .grid .card { box-shadow: none; border: 2px solid #000000; }
:root[data-dt-scheme="contrast"] .wrap .kpi-card::after { display: none; }

/* --- The control itself ------------------------------------------------ */
.dt-scheme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dt-space-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--dt-space-3);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: var(--dt-radius);
    color: #FFFFFF;
    font: inherit;
    font-size: var(--dt-fs-dense);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dt-motion-fast);
}
.dt-scheme-toggle:hover { background: rgba(255, 255, 255, .14); }
.dt-scheme-toggle:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
/* The label is not icon-only: the icon swaps AND the accessible name says
   which mode the press will move you to. */
.dt-scheme-toggle .dt-scheme-on  { display: none; }
:root[data-dt-scheme="contrast"] .dt-scheme-toggle .dt-scheme-on  { display: inline; }
:root[data-dt-scheme="contrast"] .dt-scheme-toggle .dt-scheme-off { display: none; }

@media (max-width: 1023.98px) {
    .dt-scheme-toggle .dt-scheme-lbl { display: none; }
}
@media print { .dt-scheme-toggle { display: none !important; } }

/* =====================================================================
   34. MASTHEAD FOOT — ROW HEIGHT
   The tabs were stretching to match the event card, which had a kicker,
   a title, two meta lines and a call-to-action stacked inside it — about
   150px. The whole row now runs at one fixed height and the event card
   lays out horizontally to fit it: QR, then title and meta on two lines,
   then the arrow. Nothing is dropped; it is re-flowed.
   ===================================================================== */

.hero .hero-rail { align-items: stretch; }
.hero .hero-tabs { align-items: stretch; }
.hero .hero-tab {
    min-height: 0;
    height: 72px;
    padding: 0 var(--dt-space-3);
}

.hero .hero-rail .hero-event {
    height: 72px;
    align-items: center;
    gap: var(--dt-space-3);
    padding: 0 var(--dt-space-3);
}
.hero .hero-rail .hero-event .hero-event-qr {
    width: 46px;
    height: 46px;
    padding: 3px;
    border-radius: var(--dt-radius);
}
.hero .hero-rail .hero-event .hero-event-tx {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "kicker title"
        "meta   meta";
    align-items: center;
    column-gap: var(--dt-space-2);
    row-gap: 1px;
}
.hero .hero-rail .hero-event .hero-event-kicker {
    grid-area: kicker;
    font-size: .625rem;
    padding: 1px 6px;
    white-space: nowrap;
}
.hero .hero-rail .hero-event .hero-event-title {
    grid-area: title;
    min-width: 0;
    font-size: .875rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The two meta lines share one row: date, then place. */
.hero .hero-rail .hero-event .hero-event-meta {
    grid-area: meta;
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero .hero-rail .hero-event .hero-event-meta + .hero-event-meta {
    /* second meta sits beside the first rather than starting a new row */
    justify-self: start;
    margin-left: 6.6rem;
}
/* The call to action becomes the arrow at the right of the row. Its text
   stays in the accessible name on the link, which already spells out the
   event, the dates, the venue and whether it has concluded. */
.hero .hero-rail .hero-event .hero-event-cta {
    position: absolute;
    right: var(--dt-space-3);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;                    /* label hidden, icon kept */
}
.hero .hero-rail .hero-event .hero-event-cta i { font-size: .8rem; }
.hero .hero-rail .hero-event {
    position: relative;
    padding-right: 3rem;             /* room for the arrow */
}

@media (max-width: 1199.98px) {
    .hero .hero-rail .hero-event { height: auto; padding: var(--dt-space-3) 3rem var(--dt-space-3) var(--dt-space-3); }
}
@media (max-width: 767.98px) {
    .hero .hero-tab { height: auto; min-height: 64px; padding: var(--dt-space-3); }
    .hero .hero-rail .hero-event .hero-event-meta + .hero-event-meta { margin-left: 0; }
    .hero .hero-rail .hero-event .hero-event-tx {
        grid-template-columns: 1fr;
        grid-template-areas: "kicker" "title" "meta";
        row-gap: 2px;
    }
    .hero .hero-rail .hero-event .hero-event-kicker { justify-self: start; }
}

/* =====================================================================
   35. MODULE PALETTE BRIDGE — colour and type only
   Budget Office ran cream-and-olive, HR ran clay-and-maroon, the forms
   portal ran navy-and-gold. Each has its own namespaced token block, so
   re-pointing those names recolours the module without touching a single
   structural rule: no widths, no radii, no shadow geometry, no spacing,
   no font sizes. Tabs, grids and every layout stay exactly as built.

   Dark panels stay dark. Where a module pairs a dark surface with light
   ink (HR's --panel / --panel-ink) both sides move together, so the
   pairing survives and only the hue changes.

   Roll back per module by deleting its block; roll back everything with
   ?theme=off.
   ===================================================================== */

:root {
    /* --- Budget Office (forms/assets/css/budget.css) ------------------ */
    --bgt-paper:          #F6F8FC;
    --bgt-paper-deep:     #EDF1F8;
    --bgt-surface:        #FFFFFF;
    --bgt-surface-strong: #FFFFFF;
    --bgt-ink:            #14181F;
    --bgt-ink-soft:       #333B47;
    --bgt-muted:          #333B47;
    --bgt-line:           #E3E8F0;
    --bgt-line-strong:    #7C899D;
    --bgt-accent:         #1A55E3;
    --bgt-accent-strong:  #123BA0;
    --bgt-accent-soft:    #EDF2FF;
    --bgt-action:         #1A55E3;
    --bgt-action-hover:   #1648C2;
    --bgt-danger:         #C1121F;
    --bgt-danger-soft:    #FDECEC;
    --bgt-success:        #087443;
    --bgt-success-soft:   #E8FAF2;
    --bgt-warning:        #805400;
    --bgt-warning-soft:   #FFF7DB;
    --bgt-info:           #076D83;
    --bgt-info-soft:      #E8F9FD;
    /* Expense classes keep four distinguishable hues, drawn from the
       specification's accessible set rather than earth tones. Each is
       also labelled in the markup, so colour is never the only cue. */
    --bgt-ps:             #123BA0;  --bgt-ps-soft:   #EDF2FF;
    --bgt-mooe:           #805400;  --bgt-mooe-soft: #FFF7DB;
    --bgt-co:             #087443;  --bgt-co-soft:   #E8FAF2;
    --bgt-fe:             #C1121F;  --bgt-fe-soft:   #FDECEC;

    /* --- HR / HRMO (hr/assets/css/hrmo-theme.css) --------------------- */
    --paper:              #F6F8FC;
    --raise:              #FFFFFF;
    --sink:               #EDF1F8;
    --ink:                #14181F;
    --ink-soft:           #333B47;
    --ink-faint:          #333B47;
    --line-hard:          #7C899D;
    --brand-lift:         #1648C2;
    --brand-sink:         #123BA0;
    --on-brand:           #FFFFFF;
    /* Dark panel stays dark — both sides move so the pairing holds. */
    --panel:              #12306E;
    --panel-2:            #0C2352;
    --panel-ink:          #FFFFFF;
    --panel-soft:         #C9D8FF;
    --accent:             #1A55E3;
    --warn:               #805400;  --warn-soft:   #FFF7DB;
    --ok:                 #087443;  --ok-soft:     #E8FAF2;
    --info-soft:          #E8F9FD;
    --danger-soft:        #FDECEC;

    /* --- Forms portal (forms/assets/css/portal.css) ------------------- */
    --gold:               #1A55E3;
    --gold-2:             #4C7BEA;
    --gold-deep:          #123BA0;
    --gold-ink:           #FFFFFF;
    --amber-soft:         #EDF2FF;
    --c-violet:           #5E6EED;
    --c-green:            #087443;
    --c-blue:             #1A55E3;
    --c-orange:           #805400;
    --c-pink:             #C1121F;
    --c-red:              #C1121F;
    --navy-1:             #1A55E3;
    --navy-2:             #123BA0;
    --navy-3:             #0C2352;

    /* --- Quick nav (forms/assets/css/quicknav.css) -------------------- */
    --qn-navy:            #123BA0;
    --qn-navy-2:          #1A55E3;
    --qn-gold:            #FFFFFF;
    --qn-ink:             #14181F;

    /* --- Shared generic names ----------------------------------------- */
    --brand-soft:         #EDF2FF;
    --muted:              #333B47;
    --bg:                 #F6F8FC;
    --card:               #FFFFFF;
    --bad:                #C1121F;
    --good:               #087443;
    --pending:            #805400;
    --sidebar-bg:         linear-gradient(180deg, #123BA0 0%, #0C2352 100%);

    /* --- Type: the same face everywhere, sizes untouched -------------- */
    --font-display:       "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-sans:          "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-body:          "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-head:          "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-heading:       "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-ui:            "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    /* --font-mono and --num-narrow are left alone: ledgers, registers and
       payroll columns depend on those metrics to stay aligned. */
}

/* =====================================================================
   36. BUDGET OFFICE WORKSPACE — colour only
   modules/budget/operations.php carries its own palette under generic
   names (--paper, --forest, --gold, --sidebar …), which is why the
   earlier --bgt-* block did not reach it: that one serves
   forms/assets/css/budget.css, a different page.

   Colour values only. No radius, no shadow geometry, no spacing, no
   sizes — the action grid, the sidebar and every tab keep the exact
   layout they have. --shadow and --shadow-raised are left untouched for
   the same reason.
   ===================================================================== */

:root {
    --paper:          #F6F8FC;
    --paper-soft:     #FFFFFF;
    --surface:        #FFFFFF;
    --surface-muted:  #EDF1F8;
    --forest:         #1A55E3;
    --forest-deep:    #123BA0;
    --forest-light:   #4C7BEA;
    --gold-soft:      #EDF2FF;
    --green:          #087443;
    --green-deep:     #054F2E;
    --red:            #C1121F;
    --red-deep:       #8A0019;
    --blue:           #1A55E3;
    --warning:        #805400;
    /* The rail was pure black. Deep cobalt keeps the same weight against
       the canvas while joining the rest of the portal. */
    --sidebar:        #0C2352;
    --sidebar-raised: #123BA0;
    --sidebar-edge:   #081A3E;
}

/* =====================================================================
   37. EMPLOYEE PORTAL — colour only
   hr/emp/assets/ivory.css ran an ivory canvas with a black profile
   banner and black icon tiles. Colour values only; the dashboard grid,
   the tiles and the rail keep their layout exactly.

   --ivory-deep is the profile banner and the icon tiles. It moves from
   black to deep cobalt, and --ivory-on-deep stays light, so the pairing
   that made that banner readable is preserved rather than inverted.
   ===================================================================== */

:root {
    --ivory-canvas:      #F6F8FC;
    --ivory-surface:     #FFFFFF;
    --ivory-soft:        #EDF1F8;
    --ivory-line:        #E3E8F0;
    --ivory-line-strong: #7C899D;
    --ivory-ink:         #14181F;
    --ivory-muted:       #333B47;
    --ivory-deep:        #123BA0;
    --ivory-deep-2:      #0C2352;
    --ivory-bronze:      #1A55E3;
    --ivory-focus:       #1A55E3;
    --ivory-danger:      #C1121F;
    --ivory-on-deep:     #FFFFFF;
    --ivory-hover:       #EDF2FF;
    --ivory-overlay:     rgba(12, 35, 82, .52);
}

/* =====================================================================
   38. MASTHEAD FOOT BAND — the panel goes, the band sits on the floor
   The hero foot was rebuilt as .hero-foot (it was .hero-rail), so the
   earlier rules stopped matching at all: the hero grew to 1246px and the
   event card went back to a 267px stack. These target .hero-foot and
   keep .hero-rail alongside, so neither name can break it again.

   No blue panel. The band carries no background, no border, no gold
   hairline and no backdrop-filter. The event card becomes a white card
   instead: it still needs a surface of its own for the QR quiet zone and
   its caption, and white keeps the palette to blue, red and white.
   ===================================================================== */

.hero .hero-foot,
.hero .hero-rail {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0;
    margin: 0;
    gap: var(--dt-space-3);
}
.hero .hero-foot::before,
.hero .hero-rail::before { display: none !important; }

.hero .hero-foot {
    display: flex;
    align-items: stretch;
}
.hero .hero-foot .hero-tabs {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--dt-space-3);
}
.hero .hero-foot .hero-tab {
    min-height: 74px;
    height: auto;
    align-items: center;
    overflow: hidden;
}
.hero .hero-foot .hero-tab-ico { margin-top: 0; }

/* --- Event card: white, compact, red accent -------------------------- */
.hero .hero-foot .hero-event,
.hero .hero-rail .hero-event {
    position: relative;
    flex: 0 0 20rem;
    display: flex;
    align-items: center;
    gap: var(--dt-space-3);
    min-height: 74px;
    height: auto;
    padding: var(--dt-space-2) 2.75rem var(--dt-space-2) var(--dt-space-3);
    background: #FFFFFF !important;
    border: 1px solid var(--dt-border-subtle) !important;
    border-radius: var(--dt-radius);
    box-shadow: 0 3px 0 rgba(4, 14, 44, .18), 0 8px 18px rgba(4, 14, 44, .22) !important;
    backdrop-filter: none !important;
}
.hero .hero-foot .hero-event:hover,
.hero .hero-rail .hero-event:hover {
    background: #FFFFFF !important;
    border-color: #C9D8FF !important;
    transform: translateY(-2px);
}
.hero .hero-foot .hero-event-qr {
    width: 46px; height: 46px; padding: 2px;
    background: #FFFFFF;
    border: 1px solid var(--dt-border-subtle);
    border-radius: var(--dt-radius-sm);
}
.hero .hero-foot .hero-event-tx {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.hero .hero-foot .hero-event-kicker {
    align-self: flex-start;
    background: var(--dt-red);
    color: #FFFFFF;
    padding: 1px 6px;
    border-radius: var(--dt-radius-sm);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.hero .hero-foot .hero-event-title {
    color: var(--dt-text);
    font-size: .875rem;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero .hero-foot .hero-event-meta {
    color: var(--dt-text-muted);
    font-size: .75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The call to action becomes the arrow. Its wording stays in the link
   accessible name, which already says what the event is and that it has
   concluded. */
.hero .hero-foot .hero-event-cta {
    position: absolute;
    right: var(--dt-space-2);
    top: 50%;
    transform: translateY(-50%);
    margin: 0; padding: 0;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--dt-red);
    border: 0;
    color: #FFFFFF;
    font-size: 0;
}
.hero .hero-foot .hero-event-cta i { font-size: .8rem; }

/* --- The band sits on the floor of the masthead ----------------------- */
.hero { min-height: 480px; }
.hero .hero-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--dt-space-5);
    padding: var(--dt-space-6) 0 var(--dt-space-5);
}
.hero .hero-id { max-width: 64%; }

/* No dark band across the foot. The horizontal ramp already covers the
   copy; the bottom needs only a whisper so the white card has an edge. */
.hero .hero-bg::after {
    background:
        linear-gradient(90deg,
            rgba(9, 30, 86, .95)  0%,
            rgba(10, 34, 96, .93) 34%,
            rgba(11, 38, 108, .88) 44%,
            rgba(13, 46, 126, .62) 52%,
            rgba(16, 54, 146, .28) 62%,
            rgba(18, 58, 158, .08) 71%,
            transparent 80%),
        linear-gradient(180deg, transparent 72%, rgba(8, 24, 68, .14) 100%);
}

@media (max-width: 1100px) {
    .hero .hero-foot { flex-direction: column; }
    .hero .hero-foot .hero-event { flex: 1 1 auto; }
    .hero .hero-id { max-width: 100%; }
}

/* =====================================================================
   39. NO BLACK — blue or red
   The Employee Portal shipped a black profile banner and black icon
   tiles. Its palette is declared twice, in ivory.css and again in the
   page layout, and some of it is hardcoded past the tokens, so the token
   bridge alone did not reach it.
   ===================================================================== */

:root {
    --ivory-ink:         #14181F;
    --ivory-deep:        #123BA0;
    --ivory-deep-2:      #0C2352;
    --ivory-focus:       #1A55E3;
    --ivory-line-strong: #7C899D;
    --ivory-on-deep:     #FFFFFF;
    --ivory-overlay:     rgba(12, 35, 82, .52);
}

/* Hardcoded #111 and #000 surfaces the tokens cannot reach. Scoped to
   the employee portal wrappers so no other module is affected. */
.emp-hero, .emp-profile, .emp-banner,
.emp-card .emp-ico, .emp-tile .emp-ico,
.emp-action .emp-ico, .emp-quick .emp-ico {
    background: var(--dt-primary) !important;
    color: #FFFFFF !important;
}

/* =====================================================================
   40. SPEED
   The masthead was compositing two blurred layers every frame: the foot
   band ran backdrop-filter: blur(16px) saturate(125%) over a 403KB
   photograph, and a particle canvas drifted behind it. Both are gone
   above. What remains is to stop the browser laying out everything below
   the fold before it is needed.
   ===================================================================== */

/* Below-fold blocks are measured only as they approach the viewport.
   contain-intrinsic-size keeps the scrollbar honest so the page does not
   jump as each one resolves. */
.wrap .strip,
.wrap .officials-suite,
.officials-reveal {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* Any remaining blur in the shell is dropped: over a large background
   image each one forces an offscreen buffer on every frame. */
.hero *, .topbar *, .sidebar * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* The news ticker animates a 5,900px strip forever. Promote it once, and
   respect a reduced-motion preference by stopping it outright. */
.mg-ticker-text { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
    .mg-ticker-text { animation: none !important; }
}

/* The HR shell header was solid black. Its own children are already
   light, so only the surface moves — cobalt keeps the same weight and
   the white content on it keeps its 6.08:1. */
.app-header { background: var(--dt-primary) !important; }
.app-header, .app-header a, .app-header button, .app-header i { color: #FFFFFF; }

/* The HR shell header is claimed by `html body.kael-hrmo .app-header`
   with !important in three separate sheets. Two !important declarations
   are settled by specificity, so this has to match at least as tightly. */
html body.kael-hrmo .app-header,
html body .app-header {
    background: var(--dt-primary) !important;
    background-image: none !important;
}

/* Way home, in the module's own top bar (assets/js/dt-nav.js v3.1.0
   appends it, and only on a page that does not already offer one — HR's
   "Portal Hub" counts, so HR gets nothing added).

   The predecessor was a FIXED pill floating over the page; on the HR
   shell it covered a sidebar row. This sits in the bar instead, and it
   is deliberately colourless: border and text are currentColor, the
   background is transparent, and the hover wash is a neutral grey at low
   alpha. That one rule then reads correctly on the cobalt HR bar, on a
   white bar and in the dark scheme, without a variant per module. */
.dt-home {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 32px;
    padding: 0 .75rem;
    margin-left: .5rem;
    border: 1px solid currentColor;
    border-radius: var(--dt-radius-pill);
    font-family: var(--dt-font);
    font-size: var(--dt-fs-dense);
    font-weight: 600;
    line-height: 1;
    color: inherit;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    opacity: .88;
    transition: background-color .15s ease-out, opacity .15s ease-out;
}
.dt-home:hover { background: rgba(128, 128, 128, .22); color: inherit; opacity: 1; }
.dt-home:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media print { .dt-home { display: none !important; } }

/* =====================================================================
   41. EMPLOYEE PORTAL — the black actually removed
   The earlier --ivory-* bridge did nothing, for a reason worth writing
   down: hr/emp/views/layout.php loads assets/ivory.css at line 644,
   which is AFTER the theme link injected before </head>. Later sheet,
   same :root specificity, so ivory.css won every token.

   Custom properties honour !important, and an !important declaration
   beats a later non-important one regardless of order. ivory.css
   declares its tokens plainly, so this takes them back.

   One surface is not a token: .emp-sidebar hardcodes
   linear-gradient(160deg, #181819, #080808) !important. Two !important
   declarations are settled by specificity, so the override below has to
   match more tightly than a bare class.
   ===================================================================== */

:root {
    --ivory-canvas:      #F6F8FC !important;
    --ivory-surface:     #FFFFFF !important;
    --ivory-soft:        #EDF1F8 !important;
    --ivory-line:        #E3E8F0 !important;
    --ivory-line-strong: #7C899D !important;
    --ivory-ink:         #14181F !important;
    --ivory-muted:       #333B47 !important;
    --ivory-deep:        #1A55E3 !important;
    --ivory-deep-2:      #123BA0 !important;
    --ivory-bronze:      #C1121F !important;
    --ivory-focus:       #1A55E3 !important;
    --ivory-danger:      #C1121F !important;
    --ivory-on-deep:     #FFFFFF !important;
    --ivory-hover:       #EDF2FF !important;
    --ivory-overlay:     rgba(12, 35, 82, .52) !important;
}

/* The rail: cobalt, not black. */
html body .emp-sidebar {
    background: linear-gradient(180deg, #1A55E3 0%, #123BA0 100%) !important;
}
html body .emp-sidebar-header { border-bottom-color: rgba(255, 255, 255, .22) !important; }
html body .emp-sidebar-footer { border-top-color: rgba(255, 255, 255, .22) !important; }

/* The profile banner and the action tiles read from --ivory-deep, so the
   token above already moves them; these pin the pairing so the labels on
   them stay white rather than inheriting the page ink. */
html body .emp-profile-card,
html body .emp-hero,
html body .emp-banner {
    background: linear-gradient(135deg, #1A55E3 0%, #123BA0 100%) !important;
    color: #FFFFFF !important;
}
html body .emp-action-icon,
html body .emp-quick-icon,
html body .emp-stat-icon,
html body .emp-tile-icon {
    background: var(--dt-primary) !important;
    color: #FFFFFF !important;
}
/* Alternate the tiles blue / red so a row of eight is not one flat block. */
html body .emp-actions > *:nth-child(2n) .emp-action-icon,
html body .emp-quick > *:nth-child(2n) .emp-quick-icon {
    background: var(--dt-red) !important;
}

/* The page canvas was a cream #F5F1EB set inline on <body>. */
html body.emp-body,
html body[class*="emp"] { background: var(--dt-canvas) !important; }

/* Any remaining near-black surface in this module is a mistake, not a
   choice — it predates the brand and there is no dark mode here. */
html body .emp-content [style*="#111"],
html body .emp-content [style*="#000"] { background-color: var(--dt-primary) !important; }

/* =====================================================================
   42. EMPLOYEE PORTAL — the real selectors, and a colour set
   The previous pass guessed class names that do not exist on this page.
   The actual ones, from hr/emp/views/pages/dashboard.php and the rules
   that paint them black in hr/emp/assets/ivory.css:

     .emp-content .dash-profile-hero
         background: linear-gradient(135deg, #111111, #28282a) !important
     .emp-content .dash-stat-icon
     .dash-quick-btn-icon

   ivory.css loads after the theme link, so every override here needs
   both !important and a tighter selector than the one it is replacing.

   COLOUR SET
   ----------
   Blue and red lead, with violet, indigo and deep cyan supporting, so a
   row of eight tiles reads as a set rather than one flat block. Every
   fill below carries a WHITE glyph at 4.5:1 or better — measured, not
   assumed:

     #1A55E3 blue    6.08      #6D28D9 violet     7.10
     #DC2626 red     4.83      #3A46B8 indigo     7.64
     #076D83 cyan    5.96      #5B2B8A plum       9.73
     #087443 green   5.85

   The reference palette's own #5E6EED indigo is NOT used as a fill: it
   reaches only 4.26 against white, so it would fail the icons sitting on
   it. #3A46B8 is the same hue family, darkened until it passes.
   ===================================================================== */

/* --- Profile banner: blue into plum, not black ----------------------- */
html body .emp-content .dash-profile-hero {
    background: linear-gradient(135deg, #1A55E3 0%, #4338CA 55%, #5B2B8A 100%) !important;
    color: #FFFFFF !important;
}
html body .emp-content .dash-profile-name,
html body .emp-content .dash-profile-position,
html body .emp-content .dash-profile-dept,
html body .emp-content .dash-profile-appointed { color: #FFFFFF !important; }
html body .emp-content .dash-profile-empno {
    background: rgba(255, 255, 255, .18) !important;
    color: #FFFFFF !important;
}
html body .emp-content .dash-profile-right,
html body .emp-content .dash-status-badge { color: #FFFFFF !important; }

/* --- Stat icons: four cards, four colours ---------------------------- */
html body .emp-content .dash-stat-icon {
    background: #1A55E3 !important;
    color: #FFFFFF !important;
}
html body .emp-content .dash-stats-row > *:nth-child(2) .dash-stat-icon { background: #DC2626 !important; }
html body .emp-content .dash-stats-row > *:nth-child(3) .dash-stat-icon { background: #6D28D9 !important; }
html body .emp-content .dash-stats-row > *:nth-child(4) .dash-stat-icon { background: #076D83 !important; }

/* --- Quick action tiles: a repeating six-colour cycle ---------------- */
html body .emp-content .dash-quick-btn-icon {
    background: #1A55E3 !important;
    color: #FFFFFF !important;
}
html body .emp-content .dash-quick-grid > *:nth-child(6n+2) .dash-quick-btn-icon { background: #DC2626 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+3) .dash-quick-btn-icon { background: #6D28D9 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+4) .dash-quick-btn-icon { background: #3A46B8 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+5) .dash-quick-btn-icon { background: #076D83 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+6) .dash-quick-btn-icon { background: #087443 !important; }

/* The tile label stays dark on the white card; only the chip is filled,
   so the colour is decoration and the label carries the meaning. */
html body .emp-content .dash-quick-btn-label { color: var(--dt-text) !important; }
html body .emp-content .dash-quick-btn {
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border-subtle) !important;
}
html body .emp-content .dash-quick-btn:hover { border-color: #C9D8FF !important; }

/* Reminder / attendance accents follow the same set rather than black. */
html body .emp-content .dash-reminder-icon { background: #DC2626 !important; color: #FFFFFF !important; }
html body .emp-content .dash-attendance-hero {
    background: linear-gradient(135deg, #1A55E3 0%, #123BA0 100%) !important;
    color: #FFFFFF !important;
}

/* Catch-all: any remaining near-black fill in this module is legacy, not
   a design choice — there is no dark mode here. Kept last so the
   specific rules above win where they apply. */
html body .emp-content [class*="icon"][style*="#111"],
html body .emp-content [class*="icon"][style*="#000"] {
    background: #1A55E3 !important;
    color: #FFFFFF !important;
}

/* =====================================================================
   43. EMPLOYEE PORTAL — specificity correction
   ivory.css paints the black with one grouped rule:

     .emp-content .dash-avatar,
     .emp-content .dash-stat-icon:has(.material-icons-round:nth-child(1)),
     .emp-content .dash-quick-btn-icon,
     .emp-content .emp-stat-icon,
     .emp-content .sr-summary-avatar, .sr-summary-icon,
     .emp-content .dv-cat-icon, .dv-upload-progress-bar, … {
         background: #111111 !important;
         background-image: none !important;
         border-color: #111111 !important;
     }

   A selector carrying :has() takes the specificity of its argument, so
   the stat-icon branch is (0,4,0) — higher than the (0,2,2) used in the
   previous block, which is why the tiles stayed black while the banner
   changed. Mirroring the :has() lifts this to (0,4,2) and it lands.

   border-color matters as much as background here: their rule sets it to
   #111111 too, so leaving it would ring every coloured chip in black.
   ===================================================================== */

html body .emp-content .dash-stat-icon,
html body .emp-content .dash-stat-icon:has(.material-icons-round:nth-child(1)) {
    background: #1A55E3 !important;
    background-image: none !important;
    border-color: #1A55E3 !important;
    color: #FFFFFF !important;
}
html body .emp-content .dash-stats-row > *:nth-child(2) .dash-stat-icon,
html body .emp-content .dash-stats-row > *:nth-child(2) .dash-stat-icon:has(.material-icons-round:nth-child(1)) {
    background: #DC2626 !important; border-color: #DC2626 !important;
}
html body .emp-content .dash-stats-row > *:nth-child(3) .dash-stat-icon,
html body .emp-content .dash-stats-row > *:nth-child(3) .dash-stat-icon:has(.material-icons-round:nth-child(1)) {
    background: #6D28D9 !important; border-color: #6D28D9 !important;
}
html body .emp-content .dash-stats-row > *:nth-child(4) .dash-stat-icon,
html body .emp-content .dash-stats-row > *:nth-child(4) .dash-stat-icon:has(.material-icons-round:nth-child(1)) {
    background: #076D83 !important; border-color: #076D83 !important;
}

/* The quick tiles, the avatar and the other chips in the same grouped
   rule. These branches are (0,2,0), so (0,2,2) already clears them —
   border-color is what was still missing. */
html body .emp-content .dash-quick-btn-icon,
html body .emp-content .dash-avatar,
html body .emp-content .emp-stat-icon,
html body .emp-content .sr-summary-avatar,
html body .emp-content .sr-summary-icon,
html body .emp-content .dv-cat-icon {
    background-image: none !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}
html body .emp-content .dash-avatar,
html body .emp-content .sr-summary-avatar {
    background: linear-gradient(135deg, #1A55E3, #4338CA) !important;
}
html body .emp-content .emp-stat-icon,
html body .emp-content .sr-summary-icon,
html body .emp-content .dv-cat-icon { background: #1A55E3 !important; }

html body .emp-content .dash-quick-grid > *:nth-child(6n+1) .dash-quick-btn-icon { background: #1A55E3 !important; border-color: #1A55E3 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+2) .dash-quick-btn-icon { background: #DC2626 !important; border-color: #DC2626 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+3) .dash-quick-btn-icon { background: #6D28D9 !important; border-color: #6D28D9 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+4) .dash-quick-btn-icon { background: #3A46B8 !important; border-color: #3A46B8 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+5) .dash-quick-btn-icon { background: #076D83 !important; border-color: #076D83 !important; }
html body .emp-content .dash-quick-grid > *:nth-child(6n+6) .dash-quick-btn-icon { background: #087443 !important; border-color: #087443 !important; }

/* The spinner ring and the progress bar were black too. */
html body .emp-content .emp-loading { border-top-color: #1A55E3 !important; }
html body .emp-content .dv-upload-progress-bar {
    background: #1A55E3 !important;
    background-image: none !important;
}

/* =====================================================================
   44. THE GUIDE PALETTE AS A WORKING ACCENT SET
   The reference sheet gives five colours: blue #1A55E3, pink #FF0854,
   green #00D284, cyan #0DCAF0, indigo #5E6EED. Four of them cannot
   carry a white glyph — measured against white:

     blue   #1A55E3   6.08  usable as-is
     pink   #FF0854   3.88  fails
     green  #00D284   1.99  fails
     cyan   #0DCAF0   1.96  fails
     indigo #5E6EED   4.26  fails

   So each one is kept as the brand constant for decoration, and paired
   with the nearest tone in the same hue family that does pass. That is
   how the guide stays the guide without shipping unreadable chips:

     FILL (white glyph)            SOFT (tinted, dark ink)
     blue    #1A55E3  6.08         #EDF2FF / #123BA0  8.68
     pink    #E6004B  4.70         #FFECF2 / #C80038  5.28
     indigo  #4C5BD4  5.59         #EEF0FD / #3A46B8  6.74
     cyan    #076D83  5.96         #E8F8FC / #076D83  5.47
     green   #087443  5.85         #E8FAF2 / #08624A  6.79

   Blue and red still lead — they take the structural work, the primary
   action and anything destructive. The other three appear only as chips
   and series, so a grid of sixteen tiles reads as a set instead of a
   wall of one colour.
   ===================================================================== */

:root {
    --dt-a1:      #1A55E3;  --dt-a1-soft: #EDF2FF;  --dt-a1-ink: #123BA0;
    --dt-a2:      #E6004B;  --dt-a2-soft: #FFECF2;  --dt-a2-ink: #C80038;
    --dt-a3:      #4C5BD4;  --dt-a3-soft: #EEF0FD;  --dt-a3-ink: #3A46B8;
    --dt-a4:      #076D83;  --dt-a4-soft: #E8F8FC;  --dt-a4-ink: #076D83;
    --dt-a5:      #087443;  --dt-a5-soft: #E8FAF2;  --dt-a5-ink: #08624A;
}

/* Reusable, for markup that wants to opt in by name. */
.dt-accent-1 { background: var(--dt-a1-soft); color: var(--dt-a1-ink); }
.dt-accent-2 { background: var(--dt-a2-soft); color: var(--dt-a2-ink); }
.dt-accent-3 { background: var(--dt-a3-soft); color: var(--dt-a3-ink); }
.dt-accent-4 { background: var(--dt-a4-soft); color: var(--dt-a4-ink); }
.dt-accent-5 { background: var(--dt-a5-soft); color: var(--dt-a5-ink); }
.dt-accent-1--solid { background: var(--dt-a1); color: #FFFFFF; }
.dt-accent-2--solid { background: var(--dt-a2); color: #FFFFFF; }
.dt-accent-3--solid { background: var(--dt-a3); color: #FFFFFF; }
.dt-accent-4--solid { background: var(--dt-a4); color: #FFFFFF; }
.dt-accent-5--solid { background: var(--dt-a5); color: #FFFFFF; }

/* --- Launchpad tiles ------------------------------------------------- *
 * These were collapsed to two colours earlier. The guide asks for the
 * blend, so the chips cycle through all five. The tile itself stays
 * white with dark text, and every tile is labelled, so the colour is
 * decoration and never the only thing distinguishing one from another. */
.wrap .grid .card:nth-child(5n+1) .card-ico { background: var(--dt-a1-soft); color: var(--dt-a1-ink); }
.wrap .grid .card:nth-child(5n+2) .card-ico { background: var(--dt-a2-soft); color: var(--dt-a2-ink); }
.wrap .grid .card:nth-child(5n+3) .card-ico { background: var(--dt-a3-soft); color: var(--dt-a3-ink); }
.wrap .grid .card:nth-child(5n+4) .card-ico { background: var(--dt-a4-soft); color: var(--dt-a4-ink); }
.wrap .grid .card:nth-child(5n+5) .card-ico { background: var(--dt-a5-soft); color: var(--dt-a5-ink); }

/* Modules that carry a meaning stay on that meaning regardless of
   position: response and finance-alert read red, never mint green. */
.wrap .grid .card.red .card-ico,
.wrap .grid .card.rose .card-ico,
.wrap .grid .card.orangered .card-ico { background: var(--dt-a2-soft); color: var(--dt-a2-ink); }

/* --- KPI chips -------------------------------------------------------- */
.wrap .kpi-strip .kpi-card:nth-child(5n+1) .kpi-ico { background: var(--dt-a1-soft); color: var(--dt-a1-ink); }
.wrap .kpi-strip .kpi-card:nth-child(5n+2) .kpi-ico { background: var(--dt-a2-soft); color: var(--dt-a2-ink); }
.wrap .kpi-strip .kpi-card:nth-child(5n+3) .kpi-ico { background: var(--dt-a3-soft); color: var(--dt-a3-ink); }
.wrap .kpi-strip .kpi-card:nth-child(5n+4) .kpi-ico { background: var(--dt-a4-soft); color: var(--dt-a4-ink); }
.wrap .kpi-strip .kpi-card:nth-child(5n+5) .kpi-ico { background: var(--dt-a5-soft); color: var(--dt-a5-ink); }
.wrap .kpi-strip .kpi-card:nth-child(5n+1)::after { color: var(--dt-a1); }
.wrap .kpi-strip .kpi-card:nth-child(5n+2)::after { color: var(--dt-a2); }
.wrap .kpi-strip .kpi-card:nth-child(5n+3)::after { color: var(--dt-a3); }
.wrap .kpi-strip .kpi-card:nth-child(5n+4)::after { color: var(--dt-a4); }
.wrap .kpi-strip .kpi-card:nth-child(5n+5)::after { color: var(--dt-a5); }

/* --- Officials chips -------------------------------------------------- */
.officials-avatars .av.av-initials:nth-child(5n+1) { background: var(--dt-a1); }
.officials-avatars .av.av-initials:nth-child(5n+2) { background: var(--dt-a2); }
.officials-avatars .av.av-initials:nth-child(5n+3) { background: var(--dt-a3); }
.officials-avatars .av.av-initials:nth-child(5n+4) { background: var(--dt-a4); }
.officials-avatars .av.av-initials:nth-child(5n+5) { background: var(--dt-a5); }

/* --- Employee portal: same five, so the two pages match ---------------- */
html body .emp-content .dash-stats-row > *:nth-child(1) .dash-stat-icon,
html body .emp-content .dash-stats-row > *:nth-child(1) .dash-stat-icon:has(.material-icons-round:nth-child(1)) { background: var(--dt-a1) !important; border-color: var(--dt-a1) !important; }
html body .emp-content .dash-stats-row > *:nth-child(2) .dash-stat-icon,
html body .emp-content .dash-stats-row > *:nth-child(2) .dash-stat-icon:has(.material-icons-round:nth-child(1)) { background: var(--dt-a2) !important; border-color: var(--dt-a2) !important; }
html body .emp-content .dash-stats-row > *:nth-child(3) .dash-stat-icon,
html body .emp-content .dash-stats-row > *:nth-child(3) .dash-stat-icon:has(.material-icons-round:nth-child(1)) { background: var(--dt-a3) !important; border-color: var(--dt-a3) !important; }
html body .emp-content .dash-stats-row > *:nth-child(4) .dash-stat-icon,
html body .emp-content .dash-stats-row > *:nth-child(4) .dash-stat-icon:has(.material-icons-round:nth-child(1)) { background: var(--dt-a4) !important; border-color: var(--dt-a4) !important; }

html body .emp-content .dash-quick-grid > *:nth-child(5n+1) .dash-quick-btn-icon { background: var(--dt-a1) !important; border-color: var(--dt-a1) !important; }
html body .emp-content .dash-quick-grid > *:nth-child(5n+2) .dash-quick-btn-icon { background: var(--dt-a2) !important; border-color: var(--dt-a2) !important; }
html body .emp-content .dash-quick-grid > *:nth-child(5n+3) .dash-quick-btn-icon { background: var(--dt-a3) !important; border-color: var(--dt-a3) !important; }
html body .emp-content .dash-quick-grid > *:nth-child(5n+4) .dash-quick-btn-icon { background: var(--dt-a4) !important; border-color: var(--dt-a4) !important; }
html body .emp-content .dash-quick-grid > *:nth-child(5n+5) .dash-quick-btn-icon { background: var(--dt-a5) !important; border-color: var(--dt-a5) !important; }

/* --- Charts follow the same five ------------------------------------- */
:root {
    --dt-chart-1: #1A55E3;
    --dt-chart-2: #4C5BD4;
    --dt-chart-3: #076D83;
    --dt-chart-4: #087443;
    --dt-chart-5: #E6004B;
    --dt-chart-6: #805400;
}

/* =====================================================================
   45. GOOD VIBES DOCK — contrast, red accent, legible list
   The dock ships a dark palette declared on .gv-dock itself:
     --gv-card #13213a  --gv-text #e8eef7  --gv-mute #94a3b8
     --gv-accent #EA580C (orange)

   The failure was inheritance. .gv-dock__panel sets a background but no
   colour, so every child that does not name its own colour inherited
   the page ink — measured at #14181F, near-black, sitting on #13213A
   navy. That is why the list read as barely-there grey.

   Rather than patch the inheritance, the dock gets a light palette of
   its own that matches the portal: white surface, near-black text, red
   accent. Every text colour below is set explicitly, so the dock can
   never again pick up ink from whatever page it is floating over.

   Measured on the new surface:
     #14181F on #FFFFFF  17.0     white on #E6004B  4.70
     #333B47 on #FFFFFF  11.0     #C80038 on #FFECF2  5.28

   Tokens are redefined on #gvDock (1,0,0) so they outrank the .gv-dock
   block (0,1,0) regardless of which stylesheet loads last — the dock
   markup is appended before </body>, after this file.
   ===================================================================== */

#gvDock {
    --gv-accent:  #E6004B;
    --gv-accent2: #C80038;
    --gv-card:    #FFFFFF;
    --gv-card2:   #F4F7FC;
    --gv-border:  #E3E8F0;
    --gv-text:    #14181F;
    --gv-soft:    #333B47;
    --gv-mute:    #333B47;
    --gv-shadow:  0 12px 32px rgba(16, 24, 40, .22);
}

/* Nothing inherits page ink. */
#gvDock,
#gvDock .gv-dock__panel,
#gvDock .gv-dock__panel * {
    color: var(--gv-text);
    font-family: var(--dt-font);
}

#gvDock .gv-dock__panel {
    background: var(--gv-card);
    border: 1px solid var(--gv-border);
    border-radius: var(--dt-radius);
    width: min(320px, calc(100vw - 24px));
    padding: var(--dt-space-4);
    gap: var(--dt-space-3);
}

/* --- Head ------------------------------------------------------------ */
#gvDock .gv-dock__head {
    color: var(--gv-text);
    font-size: var(--dt-fs-dense);
    font-weight: 700;
    padding-bottom: var(--dt-space-2);
    border-bottom: 1px solid var(--gv-border);
}
#gvDock .gv-dock__head .gv-dock__icon { color: var(--gv-accent); }
#gvDock .gv-dock__close {
    color: var(--gv-soft);
    background: transparent;
    border-radius: var(--dt-radius-sm);
    min-width: 32px;
    min-height: 32px;
}
#gvDock .gv-dock__close:hover { background: var(--dt-surface-subtle); color: var(--gv-text); }

/* --- Category chips --------------------------------------------------- */
#gvDock .gv-dock__cats { gap: 6px; }
#gvDock .gv-dock__btn {
    background: var(--gv-card2);
    border: 1px solid var(--gv-border);
    color: var(--gv-text);
    border-radius: var(--dt-radius-pill);
    padding: 4px 10px;
    font-size: var(--dt-fs-micro);
    font-weight: 600;
    min-height: 28px;
}
#gvDock .gv-dock__btn:hover { background: var(--dt-primary-soft); border-color: var(--dt-primary); }
/* Selected carries a fill AND a weight change, not colour alone. */
#gvDock .gv-dock__btn[aria-selected="true"],
#gvDock .gv-dock__btn.is-active {
    background: var(--dt-primary);
    border-color: var(--dt-primary);
    color: #FFFFFF;
    font-weight: 700;
}

/* --- Now playing ------------------------------------------------------ */
#gvDock .gv-dock__now {
    background: var(--gv-card2);
    border: 1px solid var(--gv-border);
    border-radius: var(--dt-radius);
    padding: var(--dt-space-3);
}
#gvDock .gv-dock__nowtitle { color: var(--gv-text); font-weight: 700; font-size: var(--dt-fs-dense); }
#gvDock .gv-dock__nowartist { color: var(--gv-soft); font-size: var(--dt-fs-micro); }
#gvDock .gv-dock__count { color: var(--gv-soft); font-size: var(--dt-fs-micro); font-weight: 600; }

/* --- Search ----------------------------------------------------------- */
#gvDock .gv-dock__search {
    background: #FFFFFF;
    border: 1px solid var(--dt-border-control);
    border-radius: var(--dt-radius);
    color: var(--gv-text);
    min-height: 36px;
    padding: 0 var(--dt-space-3);
    font-size: var(--dt-fs-dense);
}
#gvDock .gv-dock__search::placeholder { color: var(--gv-soft); }
#gvDock .gv-dock__search:focus { outline: 3px solid var(--dt-primary); outline-offset: 1px; border-color: var(--dt-primary); }

/* --- Track list ------------------------------------------------------- *
 * The list was the worst of it: title and artist were both light grey on
 * a light panel, one line running into the next. Title now carries the
 * weight, artist steps back but stays at 11:1, and each row is separated
 * and large enough to hit. */
#gvDock .gv-dock__list {
    background: #FFFFFF;
    border: 1px solid var(--gv-border);
    border-radius: var(--dt-radius);
}
#gvDock .gv-dock__list > * {
    border-bottom: 1px solid var(--gv-border);
    padding: 8px 10px;
    min-height: 40px;
}
#gvDock .gv-dock__list > *:last-child { border-bottom: 0; }
#gvDock .gv-dock__list > *:hover { background: var(--dt-primary-soft); }
#gvDock .gv-dock__list .gv-dock__label,
#gvDock .gv-dock__list strong { color: var(--gv-text); font-weight: 600; font-size: var(--dt-fs-dense); }
#gvDock .gv-dock__list small,
#gvDock .gv-dock__list span { color: var(--gv-soft); font-size: var(--dt-fs-micro); }
/* The playing row is marked by a red rule as well as a tint. */
#gvDock .gv-dock__list > *[aria-current="true"],
#gvDock .gv-dock__list > *.is-playing {
    background: var(--dt-primary-soft);
    box-shadow: inset 3px 0 0 var(--gv-accent);
}

#gvDock .gv-dock__foot {
    color: var(--gv-soft);
    font-size: var(--dt-fs-micro);
    padding-top: var(--dt-space-2);
    border-top: 1px solid var(--gv-border);
}

/* --- The side tab: red ------------------------------------------------ */
#gvDock .gv-dock__toggle {
    background: linear-gradient(135deg, #E6004B, #C80038);
    color: #FFFFFF;
    box-shadow: -4px 0 12px rgba(16, 24, 40, .28);
    font-size: 8px;
}
#gvDock .gv-dock__toggle:hover { box-shadow: -7px 0 18px rgba(16, 24, 40, .34); }
#gvDock .gv-dock__toggle .gv-dock__icon { color: #FFFFFF; font-size: 14px; }
#gvDock .gv-dock__toggle:focus-visible { outline: 3px solid var(--dt-primary); outline-offset: 2px; }
/* The pulse was keyed to the old orange. */
#gvDock .gv-dock__toggle.is-playing {
    animation: gvPulseRed 2.4s ease-in-out infinite;
    box-shadow: -8px 0 20px rgba(230, 0, 75, .5);
}
@keyframes gvPulseRed {
    0%, 100% { box-shadow: -8px 0 20px rgba(230, 0, 75, .35), 0 0 0 0 rgba(230, 0, 75, .5); transform: translateX(0); }
    50%      { box-shadow: -11px 0 26px rgba(230, 0, 75, .6), 0 0 0 7px rgba(230, 0, 75, 0); transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    #gvDock .gv-dock__toggle.is-playing { animation: none; }
}

/* The native audio element is the browser's own widget; on a white panel
   it renders its light form, which is what we want. Just give it room. */
#gvDock audio { width: 100%; }

@media print { #gvDock { display: none !important; } }

/* =====================================================================
   46. ATTENDANCE PANEL — text on the blue
   Section 42 turned .dash-attendance-hero cobalt but only set colour on
   the container. Its lead paragraph and meta lines name their own muted
   ink, so they kept it: #333B47 body copy sitting on #1A55E3, which is
   1.9:1 and effectively unreadable.

   Two surfaces, two rules. Copy that sits directly on the blue goes
   white (6.08:1). The metric cards inside it are white boxes, so their
   label and value must stay dark — flipping those to white would move
   the problem rather than fix it.
   ===================================================================== */

/* --- Copy directly on the blue --------------------------------------- */
html body .emp-content .dash-attendance-hero,
html body .emp-content .dash-attendance-hero > *,
html body .emp-content .dash-attendance-hero h1,
html body .emp-content .dash-attendance-hero h2,
html body .emp-content .dash-attendance-hero h3,
html body .emp-content .dash-attendance-hero p,
html body .emp-content .dash-attendance-hero .dash-attendance-lead,
html body .emp-content .dash-attendance-hero .dash-attendance-meta,
html body .emp-content .dash-attendance-hero .dash-card-title {
    color: #FFFFFF !important;
}
/* The supporting lines step back with opacity rather than a grey, so
   they stay above 4.5:1 on the blue instead of sinking into it. */
html body .emp-content .dash-attendance-hero .dash-attendance-meta {
    color: rgba(255, 255, 255, .92) !important;
}
html body .emp-content .dash-attendance-hero i,
html body .emp-content .dash-attendance-hero .material-icons-round { color: #FFFFFF !important; }

/* --- The white metric cards keep dark ink ---------------------------- */
html body .emp-content .dash-attendance-hero .dash-attendance-metric,
html body .emp-content .dash-attendance-hero .dash-attendance-summary {
    background: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    border-radius: var(--dt-radius) !important;
}
html body .emp-content .dash-attendance-hero .dash-attendance-metric,
html body .emp-content .dash-attendance-hero .dash-attendance-metric *,
html body .emp-content .dash-attendance-hero .dash-attendance-summary,
html body .emp-content .dash-attendance-hero .dash-attendance-summary * {
    color: var(--dt-text) !important;
}
html body .emp-content .dash-attendance-hero .dash-attendance-label {
    color: var(--dt-text-muted) !important;
}

/* Inputs inside the panel are white surfaces too. */
html body .emp-content .dash-attendance-input,
html body .emp-content .dash-attendance-textarea {
    background: #FFFFFF !important;
    color: var(--dt-text) !important;
    border: 1px solid var(--dt-border-control) !important;
}
html body .emp-content .dash-attendance-input::placeholder,
html body .emp-content .dash-attendance-textarea::placeholder { color: var(--dt-text-muted) !important; }

/* The request button sits on the blue: white fill, cobalt label. */
html body .emp-content .dash-attendance-hero button,
html body .emp-content .dash-attendance-hero .dash-card-link {
    background: #FFFFFF !important;
    color: var(--dt-primary-pressed) !important;
    border: 1px solid #FFFFFF !important;
    font-weight: 600 !important;
}
html body .emp-content .dash-attendance-hero button:hover { background: var(--dt-primary-soft) !important; }

/* =====================================================================
   47. GENERAL RULE — never let dark ink land on a filled surface
   The attendance panel was one instance of a pattern: a container gets a
   brand fill, and a descendant that names its own muted ink keeps it.
   These cover the other filled surfaces this theme introduces, so the
   same bug cannot reappear on them one at a time.
   ===================================================================== */

.hero .hero-tab *,
.dt-btn--primary *, .dt-btn--danger *, .dt-btn--success *,
.dt-topbar *, .dt-promo *,
.sidebar .sb-link.active *,
.officials-avatars .av.av-initials,
html body .emp-sidebar .emp-nav-item,
html body .emp-sidebar .emp-nav-section-title,
html body .emp-content .dash-profile-hero > *:not(.dash-attendance-metric):not(.dash-attendance-summary) {
    color: inherit;
}
/* Anything explicitly muted inside a filled surface is lifted to a tone
   that still reads on it, rather than inheriting the page grey. */
.hero .hero-tab .dt-muted, .hero .hero-tab .text-muted, .hero .hero-tab small,
.dt-topbar .dt-muted, .dt-topbar .text-muted,
html body .emp-content .dash-profile-hero .text-muted,
html body .emp-content .dash-profile-hero small {
    color: rgba(255, 255, 255, .92) !important;
}

/* =====================================================================
   48. CORRECTIONS FROM THE CONTRAST AUDIT
   A walk over every leaf text node on the homepage, comparing each
   computed colour against its first opaque ancestor background, found
   three real failures. All three are mine.

   1. The initials chips measured 2.93–3.18:1. Section 47 put
      `.officials-avatars .av.av-initials` in a `color: inherit` list —
      the intent was to stop filled surfaces inheriting page ink, and on
      this one selector it did precisely the opposite. Straight white.

   2. `.skip-link` and the roster's "View large profile" measured
      3.84:1: `#1a1205`, the near-black that was chosen to sit on gold.
      Gold became red, the ink stayed, and near-black on #DC2626 does
      not pass. White on that red is 4.83:1.

   3. The officials reveal panel had a white H2 on what is now a white
      panel — 1:1. It was white because the panel used to be dark.
   ===================================================================== */

/* 1. Initials chips: white, and never inheriting. */
.officials-avatars .av.av-initials,
.officials-avatars .av.more {
    color: #FFFFFF !important;
}

/* 2. Ink that was written for gold, now on red. */
.skip-link {
    background: var(--dt-primary) !important;
    color: #FFFFFF !important;
}
.official-roster .official-mini small,
.official-roster .official-mini span,
.official-mini small {
    color: #FFFFFF !important;
}
/* Any other control that kept the gold ink after the swap. */
.ask-margo .beta,
.mg-ticker .mg-tag,
.m-cta a {
    color: #FFFFFF !important;
}
.ask-margo .beta { color: var(--dt-primary-pressed) !important; }  /* white pill, blue ink */

/* 3. The reveal panel is white now, so its copy is dark. */
.officials-reveal .officials-head h2,
.officials-reveal .officials-head p,
.officials-reveal .officials-kicker,
.officials-reveal h2,
.officials-reveal h3 {
    color: var(--dt-text) !important;
}
.officials-reveal .officials-head p,
.officials-reveal .officials-kicker { color: var(--dt-text-muted) !important; }
.officials-reveal .officials-actions a {
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border-control) !important;
    color: var(--dt-primary) !important;
}
.officials-reveal .officials-actions a.primary {
    background: var(--dt-primary) !important;
    border-color: var(--dt-primary) !important;
    color: #FFFFFF !important;
}

/* --- Section 47 rewritten -------------------------------------------- *
 * The original used `color: inherit` to stop filled surfaces picking up
 * page ink. That is the wrong tool: inherit walks UP, which is where the
 * page ink lives. What these surfaces need is an explicit white, and
 * only muted descendants need lifting. Narrowed to the containers that
 * are genuinely filled, and stated positively.                          */
.hero .hero-tab,
.hero .hero-tab *,
.dt-topbar, .dt-topbar *,
.dt-promo, .dt-promo *,
.sidebar .sb-link.active,
.sidebar .sb-link.active * {
    color: #FFFFFF;
}
.hero .hero-tab .dt-muted,
.hero .hero-tab .text-muted,
.hero .hero-tab small,
.dt-topbar .dt-muted,
.dt-topbar .text-muted {
    color: rgba(255, 255, 255, .92) !important;
}

/* =====================================================================
   49. EMPLOYEE PORTAL RAIL + THE LAST THREE AUDIT FAILURES
   The rail went cobalt in section 41 but its nav labels were left to
   inherit, so they picked up the page ink and all but vanished on the
   blue. Only the active item read, because its white pill gives it a
   light surface of its own.

   The contrast walk also attributed exactly three regressions to this
   theme (comparing every page against ?theme=off):
     /          .av.more  "+5"     1.12   white on white
     /hr/       .user-avatar "SA"  1.10   #1D4ED8 on #1A55E3, blue on blue
     /hr/       a "<-" glyph       3.45   black on #1A55E3
     /doctrack/ .muted             4.48   marginal, just under the floor
   All four are fixed below. Everything else the walk found is present
   with the theme off and is not from this work.
   ===================================================================== */

/* --- The rail: white labels, and a readable inactive state ----------- */
html body .emp-sidebar,
html body .emp-sidebar a,
html body .emp-sidebar .emp-nav-item,
html body .emp-sidebar .emp-nav-item span,
html body .emp-sidebar .emp-nav-item i,
html body .emp-sidebar .emp-nav-item .material-icons-round,
html body .emp-sidebar-brand,
html body .emp-sidebar-brand * {
    color: #FFFFFF !important;
}
/* Section headings step back without dropping below 4.5:1 on the blue. */
html body .emp-sidebar .emp-nav-section-title {
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 600 !important;
}
html body .emp-sidebar .emp-nav-item:hover {
    background: rgba(255, 255, 255, .16) !important;
    color: #FFFFFF !important;
}
/* The active item keeps its white pill, so its ink goes dark instead. */
html body .emp-sidebar .emp-nav-item.active,
html body .emp-sidebar .emp-nav-item[aria-current="page"],
html body .emp-sidebar .emp-nav-item.is-active {
    background: #FFFFFF !important;
}
html body .emp-sidebar .emp-nav-item.active,
html body .emp-sidebar .emp-nav-item.active *,
html body .emp-sidebar .emp-nav-item[aria-current="page"],
html body .emp-sidebar .emp-nav-item[aria-current="page"] *,
html body .emp-sidebar .emp-nav-item.is-active,
html body .emp-sidebar .emp-nav-item.is-active * {
    color: var(--dt-primary-pressed) !important;
}
/* The footer card sits on the rail: give it its own surface. */
html body .emp-sidebar-footer,
html body .emp-sidebar-footer * { color: #FFFFFF !important; }
html body .emp-sidebar-footer {
    background: rgba(255, 255, 255, .14) !important;
    border-radius: var(--dt-radius) !important;
}

/* --- The overflow counter on the officials row ----------------------- */
.officials-avatars .av.more {
    background: #334155 !important;
    color: #FFFFFF !important;
    border: 2px solid var(--dt-surface) !important;
}

/* --- HR shell: avatar and back glyph on the cobalt header ------------ */
.app-header .user-avatar,
.app-header .user-avatar * {
    background: #FFFFFF !important;
    color: var(--dt-primary-pressed) !important;
}
.app-header a, .app-header span, .app-header button { color: #FFFFFF !important; }
.app-header .user-avatar { color: var(--dt-primary-pressed) !important; }

/* --- Muted copy that sat a hair under the floor ---------------------- *
 * #64748B on the #F6F8FC canvas measures 4.48. The theme already
 * defines a darker muted; pointing the generic classes at it clears the
 * threshold with room to spare rather than by a rounding error.        */
.muted, .text-muted, .cc-muted, .text-secondary, .subtle {
    color: var(--dt-text-muted);
}

/* Last two audit items on the HR shell. The avatar chip kept #1D4ED8 ink
   after its surface became cobalt — blue on blue, 1.10:1. */
.app-header .user-pill .user-avatar,
.app-header .user-avatar {
    background: #FFFFFF !important;
    color: var(--dt-primary-pressed) !important;
}

/* =====================================================================
   50. EMPLOYEE LOGIN PANEL, MOTTO, WORDMARK SPACING
   1. .login-brand ran linear-gradient(160deg,#181819,#080808) and its
      H1 computed to #14181F — near-black ink on a near-black panel, so
      "Employee Self-Service Portal" was invisible. Panel goes to the
      brand ramp; everything on it goes white.
   2. The script motto is removed.
   3. "Zamboanga del Sur · Region IX" was colliding with the acronym
      line beneath it: the wordmark runs at line-height .98 with a six
      step extrusion, and the sub-line had no clearance for the relief.
   ===================================================================== */

/* --- 1. Login panel --------------------------------------------------- */
html body .login-brand {
    background: linear-gradient(160deg, #1A55E3 0%, #123BA0 55%, #0C2352 100%) !important;
}
html body .login-brand,
html body .login-brand * {
    color: #FFFFFF !important;
}
html body .login-brand h1,
html body .login-brand h2 { color: #FFFFFF !important; }
html body .login-brand p,
html body .login-brand .login-brand-features,
html body .login-brand .login-brand-features * { color: rgba(255, 255, 255, .94) !important; }
html body .login-brand-icon {
    background: rgba(255, 255, 255, .18) !important;
    color: #FFFFFF !important;
}
/* The decorative circle behind the icon was a lighter black. */
html body .login-brand::before,
html body .login-brand::after { background: rgba(255, 255, 255, .07) !important; }

/* --- 2. Motto removed ------------------------------------------------- */
.hero .hero-motto { display: none !important; }

/* --- 3. Wordmark clearance -------------------------------------------- *
 * The extrusion is six 1px steps plus two soft casts, so the glyphs
 * occupy more vertical space than their line box reports. The sub-line
 * and the acronym each get room rather than tightening the leading,
 * which would undo the display treatment. */
.hero .hw-name { line-height: 1.04; padding-bottom: .1em; }
.hero .hw-sub { margin-top: .25rem; }
.hero .hero-wordmark { margin-bottom: 1rem; }
.hero .hero-acro { margin-top: .25rem; }

/* =====================================================================
   51. LAUNCHPAD TILES — QUIET AT REST, LIFTS WHEN TOUCHED
   A tile carried a hairline border and a resting shadow at all times.
   Thirty-two of them on one screen is thirty-two boxes drawing their own
   outline, and the one the pointer is actually on looked almost the same
   as the thirty-one it is not. The frame now means something: nothing at
   rest but the white fill against the grey canvas, then border, shadow
   and a lift the moment a tile is hovered, focused, pressed or marked
   current.

   Nothing moves in layout. The border stays 1px at all times and only
   changes colour, so no tile shifts by a pixel when it lights up.

   The lift is a real perspective tilt, not a flat translate: the grid
   owns the perspective, the tile rotates a couple of degrees about its
   bottom edge and rises. The curve overshoots slightly on the way up
   and settles — a physical feel, over in a quarter of a second.

   NOT TOUCHED
   - High-contrast scheme: it deliberately draws a 2px black border on
     every tile at rest, which is the whole point of that scheme. Every
     selector here excludes it.
   - Print: the print sheet outlines each tile in black so a printed
     launchpad is still legible; re-asserted at the end of this section
     because these rules sit later in the cascade.
   - prefers-reduced-motion: the border and shadow still appear, the
     movement does not.
   ===================================================================== */
:root:not([data-dt-scheme="contrast"]) .wrap .grid { perspective: 1200px; }

:root:not([data-dt-scheme="contrast"]) .wrap .grid .card {
    border-color: transparent;
    box-shadow: none;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    transition:
        transform 260ms cubic-bezier(.22, .68, .3, 1.28),
        box-shadow 200ms ease-out,
        border-color 160ms ease-out;
}

/* The lit state is COLOUR-CODED, not one blue for everything.

   The chips already cycle the five allowed accents on a 5n rotation
   (§"Launchpad tiles" above). The frame that appears on hover now rides
   the SAME rotation, so a tile lights up in its own hue: the green tile
   gets a green edge and a green cast, the red tile a red one. One blue
   border on all twenty-eight tiles was the thing that made the grid read
   as monochrome even though the chips were not.

   Only the five palette accents are used, and only as an edge tint and a
   shadow cast — never as a fill behind text, which four of the five
   cannot carry. The tile stays white with dark text and its own label, so
   the colour is decoration and never the only thing telling two tiles
   apart. Each tile publishes its hue as three custom properties and the
   lit rule below reads them, so the rotation lives in one place. */
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:nth-child(5n+1) {
    --dt-tile-edge: #B9CDFF; --dt-tile-cast: rgba(18, 59, 160, .22); --dt-tile-ink: var(--dt-a1-ink);
}
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:nth-child(5n+2) {
    --dt-tile-edge: #FFC0D2; --dt-tile-cast: rgba(200, 0, 56, .20); --dt-tile-ink: var(--dt-a2-ink);
}
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:nth-child(5n+3) {
    --dt-tile-edge: #C7CBF7; --dt-tile-cast: rgba(58, 70, 184, .20); --dt-tile-ink: var(--dt-a3-ink);
}
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:nth-child(5n+4) {
    --dt-tile-edge: #A9DDE9; --dt-tile-cast: rgba(7, 109, 131, .20); --dt-tile-ink: var(--dt-a4-ink);
}
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:nth-child(5n+5) {
    --dt-tile-edge: #A6E3C6; --dt-tile-cast: rgba(8, 98, 74, .20); --dt-tile-ink: var(--dt-a5-ink);
}

/* Hover and keyboard focus are the same event as far as the tile is
   concerned; aria-current / .is-selected let a page mark one as chosen
   and have it stay lit. */
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:hover,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:focus-visible,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:focus-within,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card.is-selected,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card[aria-current] {
    border-color: var(--dt-tile-edge, #B9CDFF);
    box-shadow:
        0 14px 28px -10px var(--dt-tile-cast, rgba(18, 59, 160, .22)),
        0 4px 10px -3px rgba(16, 24, 40, .10),
        0 0 0 1px var(--dt-tile-edge, #B9CDFF);
    transform: translateY(-5px) rotateX(2.5deg) scale(1.008);
}

/* Pressed: the tile goes back down and the shadow tightens under it, so
   a click reads as a click and not as a second hover. */
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:active {
    transform: translateY(-1px) scale(.996);
    box-shadow: 0 3px 8px -3px var(--dt-tile-cast, rgba(18, 59, 160, .22));
    transition-duration: 90ms, 90ms, 90ms;
}

/* The icon chip rides the lift — a small parallax that sells the tilt —
   and casts in its own hue. */
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card .card-ico {
    transition: transform 260ms cubic-bezier(.22, .68, .3, 1.28), box-shadow 200ms ease-out;
}
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:hover .card-ico,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:focus-visible .card-ico,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card.is-selected .card-ico {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 12px -6px var(--dt-tile-cast, rgba(18, 59, 160, .22));
}
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card .card-chev {
    transition: transform 220ms cubic-bezier(.22, .68, .3, 1.28), color 160ms ease-out;
}

/* The chevron takes the tile's own ink, not the house blue. All five inks
   clear 5:1 on white. */
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:hover .card-chev,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card:focus-visible .card-chev,
:root:not([data-dt-scheme="contrast"]) .wrap .grid .card.is-selected .card-chev {
    transform: translateX(4px);
    color: var(--dt-tile-ink, var(--dt-a1-ink));
}

/* The four tiles with their own palette overrides (Budget Office, ivory,
   bronze, maroon) set border and shadow again further up the sheet, at
   .wrap .grid .card.<name> — four class selectors. Every rule in this
   section carries the :root:not([data-dt-scheme]) prefix, which is worth
   two more, so the general rules above already outrank them and those
   tiles take the same rest state and the same rotation as the rest of
   the grid. An earlier revision repeated the rules for those four names
   here; that copy sat AFTER the lit rule at equal specificity and so
   beat it, which left exactly those four tiles unable to light up when
   marked .is-selected. Do not reintroduce it. */

@media (prefers-reduced-motion: reduce) {
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card .card-ico,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card .card-chev {
        transition: none;
    }
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card:hover,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card:focus-visible,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card:focus-within,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card:active,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card.is-selected,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card[aria-current],
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card.budget-office:hover,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card.ivory:hover,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card.bronze:hover,
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card.maroon:hover {
        transform: none;
    }
}

/* A printed launchpad needs its outlines back. */
@media print {
    :root:not([data-dt-scheme="contrast"]) .wrap .grid .card {
        border-color: #000000 !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* =====================================================================
   52. HR SHELL — COLOUR-CODED MODULES, A MASTHEAD WITH DEPTH
   The HRIS dashboard listed thirteen modules as thirteen identical white
   boxes with a grey hairline, and the masthead was one flat fill. The
   grid now takes the same five-accent rotation the launchpad uses, and
   the masthead takes the brand ramp with a real light source.

   SCOPING
   hrmo-theme.css styles "html body.kael-hrmo .hris-quick a" with
   !important, so these rules carry !important AND out-specify it. They
   also step aside for the three schemes that are deliberately not this
   one: the portal high-contrast mode, and the HR shell own Dark and B&W
   switch — forcing a white surface inside those would put their light
   text on a light card.

   COLOUR
   Only the five allowed accents, and only as a rail, an edge and a
   shadow cast. Never as a fill behind text: four of the five cannot
   carry a white glyph. Every card keeps its near-black label, so colour
   is a second signal and never the only one.
   ===================================================================== */
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    perspective: 1200px;
}

/* Titles were clipping at the card edge: three fixed columns in a narrow
   panel leave "Employee Masterlist" nowhere to break. The grid above
   reflows instead of shrinking, and a long word may break rather than
   run out of the box. */
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:not(.hris-quick__dtr) {
    position: relative;
    min-width: 0;
    background: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: var(--dt-radius) !important;
    box-shadow: inset 4px 0 0 var(--hr-tile, var(--dt-a1)) !important;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    overflow-wrap: anywhere;
    transition:
        transform 260ms cubic-bezier(.22, .68, .3, 1.28),
        box-shadow 200ms ease-out,
        border-color 160ms ease-out !important;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:not(.hris-quick__dtr) strong {
    color: var(--dt-text) !important;
    overflow-wrap: anywhere;
    transition: color 160ms ease-out;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:not(.hris-quick__dtr) span {
    color: var(--dt-text-muted) !important;
    overflow-wrap: anywhere;
}

/* The rotation. One block per accent; every rule above and below reads
   these four properties, so the cycle lives in one place. */
:root:not([data-dt-scheme="contrast"]) body.kael-hrmo .hris-quick a:nth-child(5n+1) {
    --hr-tile: var(--dt-a1); --hr-tile-edge: #B9CDFF; --hr-tile-cast: rgba(18, 59, 160, .22); --hr-tile-ink: var(--dt-a1-ink);
}
:root:not([data-dt-scheme="contrast"]) body.kael-hrmo .hris-quick a:nth-child(5n+2) {
    --hr-tile: var(--dt-a2); --hr-tile-edge: #FFC0D2; --hr-tile-cast: rgba(200, 0, 56, .20); --hr-tile-ink: var(--dt-a2-ink);
}
:root:not([data-dt-scheme="contrast"]) body.kael-hrmo .hris-quick a:nth-child(5n+3) {
    --hr-tile: var(--dt-a3); --hr-tile-edge: #C7CBF7; --hr-tile-cast: rgba(58, 70, 184, .20); --hr-tile-ink: var(--dt-a3-ink);
}
:root:not([data-dt-scheme="contrast"]) body.kael-hrmo .hris-quick a:nth-child(5n+4) {
    --hr-tile: var(--dt-a4); --hr-tile-edge: #A9DDE9; --hr-tile-cast: rgba(7, 109, 131, .20); --hr-tile-ink: var(--dt-a4-ink);
}
:root:not([data-dt-scheme="contrast"]) body.kael-hrmo .hris-quick a:nth-child(5n+5) {
    --hr-tile: var(--dt-a5); --hr-tile-edge: #A6E3C6; --hr-tile-cast: rgba(8, 98, 74, .20); --hr-tile-ink: var(--dt-a5-ink);
}

:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:not(.hris-quick__dtr):hover,
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:not(.hris-quick__dtr):focus-visible {
    border-color: var(--hr-tile-edge, #B9CDFF) !important;
    box-shadow:
        inset 4px 0 0 var(--hr-tile, var(--dt-a1)),
        0 14px 28px -10px var(--hr-tile-cast, rgba(18, 59, 160, .22)),
        0 4px 10px -3px rgba(16, 24, 40, .10) !important;
    transform: translateY(-5px) rotateX(2.5deg) scale(1.008);
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:not(.hris-quick__dtr):hover strong,
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:not(.hris-quick__dtr):focus-visible strong {
    color: var(--hr-tile-ink, var(--dt-a1-ink)) !important;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a:active {
    transform: translateY(-1px) scale(.996);
    transition-duration: 90ms, 90ms, 90ms !important;
}

/* --- Masthead: the brand ramp, lit from the top left ------------------
 * Flat cobalt reads as a block of colour. The ramp plus one inset
 * highlight and one cast underneath give it a light source, which is
 * what makes a bar look raised rather than painted. Both ends carry
 * white type: #1A55E3 is 6.08:1 and #123BA0 is 8.68:1.                 */
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header {
    position: relative;
    background: linear-gradient(135deg, #1A55E3 0%, #1648C2 46%, #123BA0 100%) !important;
    background-image: linear-gradient(135deg, #1A55E3 0%, #1648C2 46%, #123BA0 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -1px 0 rgba(4, 14, 44, .25),
        0 6px 18px -6px rgba(4, 14, 44, .45) !important;
}

/* The light itself. Decorative, and never over the controls. */
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(760px 150px at 14% -40%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%);
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header > * {
    position: relative;
    z-index: 1;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header .btn,
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header .logout-btn {
    transition: transform 160ms cubic-bezier(.22, .68, .3, 1.28), background-color 160ms ease-out, box-shadow 160ms ease-out;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header .btn:hover,
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header .logout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(4, 14, 44, .55);
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header .app-logo img {
    transition: transform 260ms cubic-bezier(.22, .68, .3, 1.28), box-shadow 200ms ease-out;
    box-shadow: 0 4px 10px -4px rgba(4, 14, 44, .6);
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-header:hover .app-logo img {
    transform: translateY(-1px) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    body.kael-hrmo .hris-quick a,
    body.kael-hrmo .app-header .btn,
    body.kael-hrmo .app-header .app-logo img { transition: none !important; }
    body.kael-hrmo .hris-quick a:hover,
    body.kael-hrmo .hris-quick a:focus-visible,
    body.kael-hrmo .hris-quick a:active,
    body.kael-hrmo .app-header .btn:hover,
    body.kael-hrmo .app-header:hover .app-logo img { transform: none !important; }
}

@media print {
    body.kael-hrmo .hris-quick a {
        border-color: #000000 !important;
        box-shadow: none !important;
        transform: none !important;
    }
    body.kael-hrmo .app-header::before { display: none !important; }
}

/* The Daily Time & Attendance card is the one FILLED card in the grid —
   it is the shortcut people use every morning, and the page says so by
   giving it a surface instead of an outline. Its fill is set in the
   page's own <style> (views/pages/dashboard.php), on the brand ramp, so
   only the lift belongs here. Excluded from the white-surface rules
   above by :not(.hris-quick__dtr); it still takes the same curve, the
   same tilt and the same timing as its neighbours, so the grid moves as
   one. */
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr {
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    /* The page block used to carry this; it is here now so the filled
       card moves on exactly the same curve as the outlined ones. */
    transition:
        transform 260ms cubic-bezier(.22, .68, .3, 1.28),
        box-shadow 200ms ease-out,
        filter 160ms ease-out !important;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr:hover,
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr:focus-visible {
    transform: translateY(-5px) rotateX(2.5deg) scale(1.008);
}

/* --- The two DTR shortcuts, asserted where they will actually hold ----
 * Both carry their intended look in their own page <style> blocks, and
 * hrmo-theme.css overrides both: it flattens every `.hris-quick a` to a
 * plain surface and every sidebar link to a transparent row, with
 * !important and more specificity than a page-level rule can muster. So
 * the coral those blocks used never actually rendered under this theme
 * — and now that they are on the palette, the look has to be asserted
 * from here to be seen at all.
 *
 * Card: the brand ramp, white label at 6.08:1 rising to 8.68:1.
 * Sidebar row: the inverse — a white surface with the pressed-brand
 * label on a #12306E rail, which is the only way to make one row read as
 * the action when the rail is already blue.                            */
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr {
    background: linear-gradient(160deg, #1A55E3 0%, #1648C2 55%, #123BA0 100%) !important;
    background-image: linear-gradient(160deg, #1A55E3 0%, #1648C2 55%, #123BA0 100%) !important;
    border: 1px solid #123BA0 !important;
    border-radius: var(--dt-radius) !important;
    box-shadow: 0 2px 0 #0C2352, 0 10px 20px -8px rgba(4, 14, 44, .45) !important;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr strong { color: #FFFFFF !important; }
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr span { color: rgba(255, 255, 255, .92) !important; }
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr:hover,
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .hris-quick a.hris-quick__dtr:focus-visible {
    box-shadow: 0 2px 0 #0C2352, 0 18px 32px -12px rgba(4, 14, 44, .58) !important;
}

:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-sidebar .nav-link--dtr {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #123BA0 !important;
    border: 1px solid rgba(4, 14, 44, .18) !important;
    box-shadow: 0 2px 0 rgba(4, 14, 44, .35), 0 8px 16px -8px rgba(4, 14, 44, .45) !important;
}
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-sidebar .nav-link--dtr * { color: #123BA0 !important; }
:root:not([data-dt-scheme="contrast"]):not([data-theme="dark"]):not([data-theme="mono"]) body.kael-hrmo .app-sidebar .nav-link--dtr:hover {
    background: #EDF2FF !important;
    box-shadow: 0 2px 0 rgba(4, 14, 44, .35), 0 12px 22px -10px rgba(4, 14, 44, .55) !important;
}