/* ============================================================================
   Codex — HRIS dashboard theme
   ----------------------------------------------------------------------------
   Built from Instructions/documentations/Codex Brand Guide (standalone).html.
   Token names and values are taken from that guide verbatim so the two stay
   comparable; where the guide gives a rule rather than a value it is quoted in
   a comment next to the rule it drives.

   The guide's shape, in short:
     - Emerald #12D27D is the brand and means "action". Navy #0A2540 is the
       voice: headings, dark surfaces, depth.
     - "Roughly 90% of any layout should be white, grey or navy. Emerald and
       the accents make up the remaining 10%." Emerald is therefore spent on
       the primary button, the eyebrow and focus — nowhere else.
     - IBM Plex Sans for everything read; IBM Plex Mono for "figures, IDs,
       code" — which on a dashboard means every tally, count and total.
     - Cards: white, 12px radius (the guide marks this "NexusApp standard"),
       shadow-md at rest, shadow-lg + a 3px lift on hover.
     - The four semantic colours "always mean the same thing. Don't use them
       decoratively — people rely on them to read a situation."

   Everything is namespaced under `.codex-ds`. The theme retunes the Bootstrap
   classes already present in the dashboard widgets rather than requiring the
   markup to be rewritten; Bootstrap 5.1 ships here, which has no `--bs-btn-*`
   component variables, so the overrides are direct properties.
   ========================================================================== */

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

/* ── Tokens ─────────────────────────────────────────────────────────────────
   Scoped to the wrapper, not :root, so they cannot leak into other pages.   */
.codex-ds {
    /* Core two */
    --cdx-emerald: #12D27D;
    --cdx-navy: #0A2540;

    /* Emerald ramp */
    --cdx-emerald-50: #E7FBF1;
    --cdx-emerald-100: #C6F6DE;
    --cdx-emerald-200: #92EDC1;
    --cdx-emerald-300: #55E29E;
    --cdx-emerald-400: #24D786;
    --cdx-emerald-500: #12D27D;
    --cdx-emerald-600: #0FB36B;
    --cdx-emerald-700: #0C9157;
    --cdx-emerald-800: #0A7044;
    --cdx-emerald-900: #095A38;

    /* Navy ramp */
    --cdx-navy-50: #EEF2F7;
    --cdx-navy-100: #D4DEEA;
    --cdx-navy-200: #A8BCD1;
    --cdx-navy-300: #6E8AAB;
    --cdx-navy-400: #3D5C81;
    --cdx-navy-500: #1E3E60;
    --cdx-navy-600: #133150;
    --cdx-navy-700: #0A2540;
    --cdx-navy-800: #071B31;
    --cdx-navy-900: #041120;

    /* Grey ramp */
    --cdx-gray-50: #F7F8FA;
    --cdx-gray-100: #F3F3F3;
    --cdx-gray-200: #E6EBEE;
    --cdx-gray-300: #E6E6E6;
    --cdx-gray-400: #D5DFE7;
    --cdx-gray-500: #ADB5BD;
    --cdx-gray-600: #737B8B;
    --cdx-gray-700: #4A5164;
    --cdx-gray-800: #31314C;
    --cdx-gray-900: #1C2733;

    /* Supporting accents — "used sparingly, mostly inside products, charts
       and illustrations, never as a replacement for emerald or navy." */
    --cdx-sage: #A0C878;
    --cdx-teal: #27667B;
    --cdx-gold: #FAD691;
    --cdx-steel: #143D60;

    /* Semantic */
    --cdx-success: #12B76A;
    --cdx-success-soft: #E7FBF1;
    --cdx-warning: #F5A623;
    --cdx-warning-soft: #FDF3DE;
    --cdx-danger: #DC3545;
    --cdx-danger-soft: #FDE7E9;
    --cdx-info: #27667B;
    --cdx-info-soft: #E4EDF0;

    /* Roles */
    --cdx-surface-page: var(--cdx-gray-200);
    --cdx-surface-card: #FFFFFF;
    --cdx-surface-sunken: var(--cdx-gray-100);
    --cdx-text-heading: var(--cdx-navy);
    --cdx-text-body: #333333;
    --cdx-text-muted: var(--cdx-gray-600);
    --cdx-text-link: var(--cdx-emerald-700);
    --cdx-border-subtle: var(--cdx-gray-300);
    --cdx-border-default: var(--cdx-gray-400);
    --cdx-focus-ring: rgba(18, 210, 125, 0.30);

    /* Readable-on-white variants of the status hues, for tile text and chips.
       The ring segments use brighter chart values (see StatusColors in
       StatisticsWidget); these are the same hues stepped dark enough to carry
       12-22px text.

       Hues are spread as far apart as the Codex palette allows, because the
       states these mark are read at a glance and side by side. On Time vs
       Worked Restday and Late vs Early Out were previously two greens and two
       near-identical golds — indistinguishable in the tile grid. Worked
       Restday now takes sage (yellow-green, ~70 degrees off the success
       green) and Early Out takes steel (cool, nothing like the warm amber of
       Late). Rest Day and Pending share the grey family deliberately: both
       mean "not working", and they separate on lightness. */
    --cdx-role-ok: #0F9D5C;      /* success green */
    --cdx-role-warn: #B0740C;    /* warning amber */
    --cdx-role-bad: #C42A38;     /* danger red */
    --cdx-role-info: #27667B;    /* teal */
    --cdx-role-early: #143D60;   /* steel */
    --cdx-role-rest: #4A5164;    /* gray-700 */
    --cdx-role-rdwork: #6B8F3D;  /* sage, darkened for text */
    --cdx-role-idle: #737B8B;    /* gray-600 */

    /* Type */
    --cdx-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --cdx-font-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --cdx-text-xs: 0.75rem;
    --cdx-text-sm: 0.8125rem;
    --cdx-text-base: 0.875rem;
    --cdx-text-md: 1rem;
    --cdx-text-lg: 1.125rem;
    --cdx-text-xl: 1.25rem;
    --cdx-text-2xl: 1.5rem;
    --cdx-text-3xl: 1.875rem;
    --cdx-tracking-tight: -0.02em;
    --cdx-tracking-caps: 0.08em;

    /* Space — 4px base grid */
    --cdx-space-1: 0.25rem;
    --cdx-space-2: 0.5rem;
    --cdx-space-3: 0.75rem;
    --cdx-space-4: 1rem;
    --cdx-space-5: 1.25rem;
    --cdx-space-6: 1.5rem;
    --cdx-space-8: 2rem;

    /* Radius */
    --cdx-radius-xs: 4px;
    --cdx-radius-sm: 6px;
    --cdx-radius-md: 8px;
    --cdx-radius-lg: 12px;
    --cdx-radius-pill: 999px;

    /* Elevation */
    --cdx-shadow-xs: 0 1px 2px rgba(12, 29, 85, 0.06);
    --cdx-shadow-sm: 0 2px 4px rgba(12, 29, 85, 0.08);
    --cdx-shadow-md: 0 4px 12px rgba(12, 29, 85, 0.10);
    --cdx-shadow-lg: 0 8px 20px rgba(12, 29, 85, 0.12);
    --cdx-shadow-xl: 0 16px 40px rgba(12, 29, 85, 0.16);
    --cdx-shadow-focus: 0 0 0 0.25rem var(--cdx-focus-ring);

    /* Motion */
    --cdx-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --cdx-dur-fast: 120ms;
    --cdx-dur-base: 200ms;
    --cdx-hover-lift: translateY(-3px);

    background: var(--cdx-surface-page);
    color: var(--cdx-text-body);
    font-family: var(--cdx-font-sans);
    font-size: var(--cdx-text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding: var(--cdx-space-6);
}

/* ── Base type ───────────────────────────────────────────────────────────── */
.codex-ds h1,
.codex-ds h2,
.codex-ds h3,
.codex-ds h4,
.codex-ds h5,
.codex-ds h6 {
    font-family: var(--cdx-font-sans);
    color: var(--cdx-text-heading);
    font-weight: 600;
    line-height: 1.2;
}

.codex-ds .text-muted {
    color: var(--cdx-text-muted) !important;
}

.codex-ds a {
    color: var(--cdx-text-link);
}

.codex-ds a:hover {
    color: var(--cdx-emerald-800);
}

.codex-ds :focus {
    outline: none;
}

.codex-ds :focus-visible {
    outline: none;
    box-shadow: var(--cdx-shadow-focus);
}

.codex-ds ::selection {
    background: var(--cdx-emerald-100);
}

/* "IBM Plex Mono — figures, IDs, code." On a dashboard that is every tally. */
.codex-ds .cdx-mono,
.codex-ds .cdx-stat-value,
.codex-ds .cdx-ring-total,
.codex-ds .cdx-tile-value {
    font-family: var(--cdx-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.codex-ds .card {
    background: var(--cdx-surface-card);
    border: 1px solid var(--cdx-border-subtle);
    border-radius: var(--cdx-radius-lg);
    box-shadow: var(--cdx-shadow-md);
    transition: box-shadow var(--cdx-dur-base) var(--cdx-ease),
                transform var(--cdx-dur-base) var(--cdx-ease);
}

.codex-ds .card-body {
    padding: var(--cdx-space-5);
}

.codex-ds .card-header {
    background: transparent;
    border-bottom: 1px solid var(--cdx-border-subtle);
    border-radius: var(--cdx-radius-lg) var(--cdx-radius-lg) 0 0;
    padding: var(--cdx-space-4) var(--cdx-space-5);
}

/* ── Widget section headings ─────────────────────────────────────────────── */
.codex-ds .cdx-widget-title {
    font-size: var(--cdx-text-md);
    font-weight: 600;
    color: var(--cdx-navy);
    margin: 0;
    display: flex;
    align-items: center;
}

/* The icon is the one place a widget header is allowed emerald. */
.codex-ds .cdx-widget-title i {
    color: var(--cdx-emerald);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.codex-ds .btn {
    font-family: var(--cdx-font-sans);
    font-size: var(--cdx-text-base);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--cdx-radius-md);
    border: 1px solid transparent;
    padding: var(--cdx-space-2) var(--cdx-space-4);
    transition: background-color var(--cdx-dur-fast) var(--cdx-ease),
                border-color var(--cdx-dur-fast) var(--cdx-ease),
                color var(--cdx-dur-fast) var(--cdx-ease),
                box-shadow var(--cdx-dur-fast) var(--cdx-ease);
}

.codex-ds .btn-sm {
    font-size: var(--cdx-text-sm);
    padding: var(--cdx-space-1) var(--cdx-space-3);
    border-radius: var(--cdx-radius-sm);
}

.codex-ds .btn:disabled,
.codex-ds .btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.codex-ds .btn:focus-visible {
    box-shadow: var(--cdx-shadow-focus);
}

/* Emerald "signals action" — this is where the 10% is spent. */
.codex-ds .btn-primary {
    background: var(--cdx-emerald);
    border-color: var(--cdx-emerald);
    color: #FFFFFF;
}

.codex-ds .btn-primary:hover {
    background: var(--cdx-emerald-600);
    border-color: var(--cdx-emerald-600);
    color: #FFFFFF;
}

.codex-ds .btn-primary:active,
.codex-ds .btn-primary:focus {
    background: var(--cdx-emerald-700);
    border-color: var(--cdx-emerald-700);
    color: #FFFFFF;
}

/* Secondary actions stay navy — quiet, so emerald keeps its meaning. */
.codex-ds .btn-outline-primary,
.codex-ds .btn-secondary,
.codex-ds .btn-light {
    background: #FFFFFF;
    border-color: var(--cdx-border-default);
    color: var(--cdx-navy);
}

.codex-ds .btn-outline-primary:hover,
.codex-ds .btn-secondary:hover,
.codex-ds .btn-light:hover {
    background: var(--cdx-navy-50);
    border-color: var(--cdx-navy-200);
    color: var(--cdx-navy);
}

.codex-ds .btn-outline-primary:active,
.codex-ds .btn-outline-primary.active {
    background: var(--cdx-navy-100);
    border-color: var(--cdx-navy-300);
    color: var(--cdx-navy);
}

.codex-ds .btn-link {
    border-color: transparent;
    color: var(--cdx-text-link);
    text-decoration: none;
}

.codex-ds .btn-link:hover {
    background: var(--cdx-emerald-50);
}

/* ── Status tiles (the attendance breakdown buttons) ─────────────────────── */
.codex-ds .status-button {
    background: var(--cdx-surface-card);
    border: 1px solid var(--cdx-border-subtle) !important;
    border-radius: var(--cdx-radius-md);
    text-align: left;
    transition: box-shadow var(--cdx-dur-base) var(--cdx-ease),
                transform var(--cdx-dur-base) var(--cdx-ease),
                border-color var(--cdx-dur-base) var(--cdx-ease);
}

.codex-ds .status-button:hover {
    transform: var(--cdx-hover-lift);
    box-shadow: var(--cdx-shadow-lg);
}

.codex-ds .status-button .cdx-tile-label {
    font-size: var(--cdx-text-xs);
    font-weight: 500;
    color: var(--cdx-text-muted);
    line-height: 1.3;
}

.codex-ds .status-button .cdx-tile-value {
    font-size: var(--cdx-text-xl);
    font-weight: 600;
    line-height: 1.2;
}

/* The status glyph sits on its own soft tint of the same hue. */
.codex-ds .status-button .cdx-tile-chip {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--cdx-radius-sm);
    background: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.codex-ds .status-button .cdx-tile-chip i {
    color: #FFFFFF;
}

/* Selected: emerald ring, because selection is an action state. */
.codex-ds .status-button.cdx-selected {
    border-color: var(--cdx-emerald) !important;
    box-shadow: 0 0 0 1px var(--cdx-emerald), var(--cdx-shadow-sm);
    background: var(--cdx-emerald-50);
}

/* Status roles */
.codex-ds .cdx-ok { color: var(--cdx-role-ok) !important; }
.codex-ds .cdx-warn { color: var(--cdx-role-warn) !important; }
.codex-ds .cdx-bad { color: var(--cdx-role-bad) !important; }
.codex-ds .cdx-info { color: var(--cdx-role-info) !important; }
.codex-ds .cdx-early { color: var(--cdx-role-early) !important; }
.codex-ds .cdx-rest { color: var(--cdx-role-rest) !important; }
.codex-ds .cdx-rdwork { color: var(--cdx-role-rdwork) !important; }
.codex-ds .cdx-idle { color: var(--cdx-role-idle) !important; }

/* Bootstrap's semantic text utilities, remapped onto the guide's four. */
.codex-ds .text-success { color: var(--cdx-role-ok) !important; }
.codex-ds .text-warning { color: var(--cdx-role-warn) !important; }
.codex-ds .text-danger { color: var(--cdx-role-bad) !important; }
.codex-ds .text-info { color: var(--cdx-info) !important; }
.codex-ds .text-primary { color: var(--cdx-emerald-700) !important; }
.codex-ds .text-secondary { color: var(--cdx-text-muted) !important; }
.codex-ds .text-dark { color: var(--cdx-navy) !important; }

/* Recolour Bootstrap's fills through its *-rgb variables, NOT through
   `background-color`. Bootstrap 5.1 builds every .bg-* as
       background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity))
   so overriding background-color directly wins the cascade but throws away
   --bs-bg-opacity with it — every `bg-success bg-opacity-10` tint across the
   dashboard turns into a solid slab and the dark text on it stops being
   readable. Setting the rgb triplet keeps the opacity utilities working. */
.codex-ds {
    --bs-success-rgb: 18, 183, 106;
    --bs-danger-rgb: 220, 53, 69;
    --bs-warning-rgb: 245, 166, 35;
    --bs-info-rgb: 39, 102, 123;
    --bs-primary-rgb: 18, 210, 125;
    --bs-secondary-rgb: 115, 123, 139;
    --bs-light-rgb: 243, 243, 243;
    --bs-dark-rgb: 10, 37, 64;
}

/* Border utilities take a flat colour in Bootstrap 5.1 — no rgb/opacity
   mechanism — so these are safe to set directly. They draw the selected
   metric card in Workforce Time Performance. */
.codex-ds .border-success { border-color: var(--cdx-success) !important; }
.codex-ds .border-danger { border-color: var(--cdx-danger) !important; }
.codex-ds .border-warning { border-color: var(--cdx-warning) !important; }
.codex-ds .border-info { border-color: var(--cdx-info) !important; }
.codex-ds .border-primary { border-color: var(--cdx-emerald) !important; }
.codex-ds .border-secondary { border-color: var(--cdx-gray-500) !important; }

/* ── Ring / donut ────────────────────────────────────────────────────────── */
.codex-ds .cdx-ring-wrap {
    position: relative;
    height: 150px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.codex-ds .cdx-ring-hub {
    position: absolute;
    height: 96px;
    width: 96px;
    border-radius: 50%;
    background: var(--cdx-surface-card);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.codex-ds .cdx-ring-total {
    font-size: var(--cdx-text-2xl);
    font-weight: 600;
    line-height: 1;
    color: var(--cdx-navy);
}

.codex-ds .cdx-ring-caption {
    font-size: var(--cdx-text-xs);
    color: var(--cdx-text-muted);
    margin-top: 2px;
}

.codex-ds .ring-tooltip {
    background: var(--cdx-navy);
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: var(--cdx-radius-sm);
    font-size: var(--cdx-text-xs);
    box-shadow: var(--cdx-shadow-lg);
}

.codex-ds .ring-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--cdx-navy);
}

.codex-ds .cdx-legend-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.codex-ds .cdx-legend-label {
    font-size: var(--cdx-text-xs);
    color: var(--cdx-text-muted);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.codex-ds .form-control,
.codex-ds .form-select,
.codex-ds .default-select {
    min-height: 38px;
    padding: var(--cdx-space-2) var(--cdx-space-3);
    font-family: var(--cdx-font-sans);
    font-size: var(--cdx-text-base);
    color: var(--cdx-text-body);
    background: #FFFFFF;
    border: 1px solid var(--cdx-border-default);
    border-radius: var(--cdx-radius-md);
    box-shadow: none;
}

.codex-ds .form-control:hover,
.codex-ds .form-select:hover {
    border-color: var(--cdx-navy-200);
}

.codex-ds .form-control:focus,
.codex-ds .form-select:focus {
    border-color: var(--cdx-emerald);
    box-shadow: var(--cdx-shadow-focus);
    outline: none;
}

.codex-ds .form-label {
    font-size: var(--cdx-text-sm);
    font-weight: 500;
    color: var(--cdx-navy);
    margin-bottom: var(--cdx-space-1);
}

.codex-ds .input-hasicon .icon {
    color: var(--cdx-gray-500);
}

/* ── Dropdown menus ──────────────────────────────────────────────────────── */
.codex-ds .dropdown-menu {
    border: 1px solid var(--cdx-border-subtle);
    border-radius: var(--cdx-radius-md);
    background: #FFFFFF;
    box-shadow: var(--cdx-shadow-lg);
    font-size: var(--cdx-text-base);
    padding: var(--cdx-space-1);
}

.codex-ds .dropdown-item {
    padding: var(--cdx-space-2) var(--cdx-space-3);
    border-radius: var(--cdx-radius-xs);
    color: var(--cdx-text-body);
}

.codex-ds .dropdown-item:hover {
    background: var(--cdx-gray-50);
    color: var(--cdx-navy);
}

.codex-ds .dropdown-item.active {
    background: var(--cdx-emerald-50);
    color: var(--cdx-emerald-800);
    font-weight: 500;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.codex-ds .table {
    font-size: var(--cdx-text-base);
    color: var(--cdx-text-body);
    margin-bottom: 0;
}

.codex-ds .table > :not(caption) > * > * {
    background: transparent;
    box-shadow: none;
}

.codex-ds .table th,
.codex-ds .table thead th {
    text-align: left;
    font-size: var(--cdx-text-xs);
    font-weight: 600;
    letter-spacing: var(--cdx-tracking-caps);
    text-transform: uppercase;
    color: var(--cdx-text-muted);
    padding: var(--cdx-space-3);
    border-bottom: 1px solid var(--cdx-border-subtle);
}

.codex-ds .table td {
    padding: var(--cdx-space-3);
    border-bottom: 1px solid var(--cdx-gray-100);
    vertical-align: middle;
}

.codex-ds .table tbody tr:hover > * {
    background: var(--cdx-gray-50);
}

.codex-ds .table-light,
.codex-ds .table-light > * {
    background: var(--cdx-surface-sunken) !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.codex-ds .badge {
    font-family: var(--cdx-font-sans);
    font-size: var(--cdx-text-xs);
    font-weight: 500;
    border-radius: var(--cdx-radius-pill);
    padding: 3px 10px;
}

.codex-ds .badge.bg-success,
.codex-ds .bg-success-subtle { background: var(--cdx-success-soft) !important; color: var(--cdx-role-ok) !important; }
.codex-ds .badge.bg-warning,
.codex-ds .bg-warning-subtle { background: var(--cdx-warning-soft) !important; color: var(--cdx-role-warn) !important; }
.codex-ds .badge.bg-danger,
.codex-ds .bg-danger-subtle { background: var(--cdx-danger-soft) !important; color: var(--cdx-role-bad) !important; }
.codex-ds .badge.bg-info,
.codex-ds .bg-info-subtle { background: var(--cdx-info-soft) !important; color: var(--cdx-info) !important; }
.codex-ds .badge.bg-secondary,
.codex-ds .bg-secondary-subtle { background: var(--cdx-gray-100) !important; color: var(--cdx-gray-700) !important; }

/* ── Dividers ────────────────────────────────────────────────────────────── */
.codex-ds hr {
    height: 1px;
    border: 0;
    opacity: 1;
    background: var(--cdx-border-subtle);
    margin: var(--cdx-space-4) 0;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
/* Position/layout live here (not just background/radius) so any widget can use this class on its
   own - some older widgets also redeclare the layout half in their own inline <style>, which is
   harmless since the rules match, but new widgets shouldn't have to depend on a sibling widget
   having rendered its copy first. */
.codex-ds .widget-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cdx-space-2);
    z-index: 10;
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--cdx-radius-lg);
}

/* ── Page heading row ────────────────────────────────────────────────────── */
.codex-ds .cdx-kicker {
    font-size: var(--cdx-text-xs);
    letter-spacing: var(--cdx-tracking-caps);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cdx-emerald);
    margin-bottom: 6px;
}

/* ── KPI row ─────────────────────────────────────────────────────────────── */
/* The four cards are equal-height (h-100), so the tallest one - whichever wraps its chip row to a
   second line - sets the height for all four. Tight padding plus a bottom-anchored chip row keeps
   the leftover space from pooling as a slab of white under the shorter cards. */
.codex-ds .cdx-kpi-card {
    display: flex;
    flex-direction: column;
    gap: var(--cdx-space-2);
    padding: var(--cdx-space-4);
}

/* Icon, figure and label share one line - stacking them cost three rows of height per card for no
   added meaning, and the four cards are equal-height so every extra row multiplied by four. */
.codex-ds .cdx-kpi-head {
    display: flex;
    align-items: center;
    gap: var(--cdx-space-2);
    min-width: 0;
}

.codex-ds .cdx-kpi-icon-tile {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--cdx-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cdx-text-base);
}

.codex-ds .cdx-kpi-icon-navy { background: var(--cdx-navy-50); color: var(--cdx-navy); }
.codex-ds .cdx-kpi-icon-emerald { background: var(--cdx-emerald-50); color: var(--cdx-emerald-700); }
.codex-ds .cdx-kpi-icon-warning { background: var(--cdx-warning-soft); color: var(--cdx-role-warn); }
.codex-ds .cdx-kpi-icon-info { background: var(--cdx-info-soft); color: var(--cdx-info); }

.codex-ds .cdx-kpi-value {
    font-family: var(--cdx-font-mono);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--cdx-navy);
    line-height: 1;
    flex-shrink: 0;
}

/* Pushed to the far edge so icon, figure and label read as three fixed columns across all four
   cards. Truncates rather than wrapping: a wrapped label would add a row to all four at once. */
.codex-ds .cdx-kpi-label {
    font-size: var(--cdx-text-sm);
    color: var(--cdx-text-muted);
    margin-left: auto;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* margin-top:auto rather than a fixed gap - the chip rows then line up along the bottom of all
   four cards instead of each floating directly under a label of differing height. */
.codex-ds .cdx-kpi-chip-row {
    margin-top: auto;
    padding-top: var(--cdx-space-2);
    border-top: 1px solid var(--cdx-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.codex-ds .cdx-kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.656rem;
    font-weight: 600;
    color: var(--cdx-gray-700);
    background: var(--cdx-gray-50);
    border: 1px solid var(--cdx-gray-300);
    border-radius: var(--cdx-radius-pill);
    padding: 3px 8px;
}

.codex-ds .cdx-kpi-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

.codex-ds .cdx-kpi-chip-value {
    font-family: var(--cdx-font-mono);
    color: var(--cdx-navy);
}

/* ── Approved Leave Calendar ─────────────────────────────────────────────── */
/* The side list must never make the card taller than the calendar beside it. Bootstrap's row
   stretches both columns to the tallest, so a long list would drag the whole card down and leave
   the calendar floating in white space. The list is therefore absolutely positioned: it fills the
   height the calendar established but contributes nothing back, so it scrolls instead of growing. */
.codex-ds .cdx-cal-side {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.codex-ds .cdx-cal-side-viewport {
    position: relative;
    flex: 1;
    /* Stacked layout (below lg) has no calendar to borrow a height from - auto height would
       collapse the absolutely-positioned list to nothing, so give it a floor. */
    min-height: 260px;
}

.codex-ds .cdx-cal-side-list {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--cdx-space-3);
    padding-right: 4px;
}

.codex-ds .cdx-cal-legend-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    margin-right: 5px;
}

.codex-ds .cdx-cal-weekday {
    font-size: 0.656rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--cdx-tracking-caps);
    color: var(--cdx-text-muted);
    text-align: center;
    padding: 4px 0;
}

.codex-ds .cdx-cal-cell {
    min-height: 74px;
    padding: 6px;
    border-radius: var(--cdx-radius-md);
    overflow: hidden;
    background: var(--cdx-surface-card);
    border: 1px solid var(--cdx-border-subtle);
}

.codex-ds .cdx-cal-cell.cdx-cal-out {
    background: var(--cdx-gray-50);
    opacity: .45;
}

.codex-ds .cdx-cal-cell.cdx-cal-weekend {
    background: var(--cdx-gray-50);
}

.codex-ds .cdx-cal-cell.cdx-cal-today {
    border-color: var(--cdx-emerald);
    background: var(--cdx-emerald-50);
}

.codex-ds .cdx-cal-cell.cdx-cal-today .cdx-cal-daynum {
    color: var(--cdx-emerald-800);
}

.codex-ds .cdx-cal-daynum {
    font-family: var(--cdx-font-mono);
    font-size: 0.688rem;
    font-weight: 600;
    color: var(--cdx-navy);
}

.codex-ds .cdx-cal-cell.cdx-cal-weekend .cdx-cal-daynum {
    color: var(--cdx-gray-500);
}

.codex-ds .cdx-cal-chip {
    font-size: 0.594rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: var(--cdx-radius-xs);
    border-left: 2px solid;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chip and swatch colours are set inline by ApprovedLeaveCalendarWidget: leave types are
   per-tenant rows in hr.LeaveType, so the stylesheet cannot know how many there will be. See
   BrandSlots/GeneratedSlot in that component. */

/* Seven columns are not negotiable - a week has seven days - so below this width the grid keeps
   its size and the wrapper scrolls sideways rather than crushing cells to ~40px. */
.codex-ds .cdx-cal-scroll {
    overflow-x: auto;
}

.codex-ds .cdx-cal-grid {
    min-width: 620px;
}

/* Only rule off the side list once it actually sits beside the calendar. */
@media (min-width: 992px) {
    .codex-ds .cdx-cal-side-col {
        border-left: 1px solid var(--cdx-border-subtle);
    }
}

/* ── Attendance roster ───────────────────────────────────────────────────── */
/* The roster must end level with StatisticsWidget's last tile row, no matter how many employees
   are listed. `flex: 1` alone could not do that: a few hundred roster rows are intrinsically tall,
   so the Attendance card stayed the taller of the two and dictated the row height itself. Making
   the list absolutely positioned takes it out of the height calculation entirely - Statistics
   becomes the only card with intrinsic height, and the list fills exactly what is left over. */
.codex-ds .cdx-roster-viewport {
    position: relative;
    flex: 1;
    /* Stacked layout (below lg) has no sibling card to take a height from. */
    min-height: 320px;
}

.codex-ds .cdx-roster-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
}

/* ── Widget headers ──────────────────────────────────────────────────────── */
/* The theme's global `.card-header` (wwwroot/css/style.css) is `display:flex` with
   `justify-content:space-between`, so a header holding a title and a row of controls lays them out
   side by side. With four filters plus a period nav that leaves the title crushed into a narrow
   wrapped column on any small screen. Stacking is the honest layout for this much chrome. */
.codex-ds .cdx-header-stack {
    display: block;
}

/* ── Widget filter bars ──────────────────────────────────────────────────── */
/* Filter dropdowns used to carry fixed inline min-widths (150 + 110 + 100 + a 42px reset button,
   plus gaps) which together overflow a phone, wrapping into a ragged two- or three-row stack.
   Sized here instead so the same controls can go full-width in a clean column on small screens. */
.codex-ds .cdx-filter-wide { min-width: 150px; }
.codex-ds .cdx-filter-mid { min-width: 110px; }
.codex-ds .cdx-filter-narrow { min-width: 100px; }

.codex-ds .cdx-filter-reset {
    width: 42px;
    padding: 0;
    align-self: stretch;
}

/* min-width:0 lets the period label inside actually truncate; without it the label's text sets a
   floor on the nav's width and pushes Prev/Next out of the card. */
.codex-ds .cdx-widget-nav {
    min-width: 0;
}

@media (max-width: 575.98px) {
    /* One control per row, each filling the width - far tidier than three part-width pills
       wrapping unevenly. The nav takes a full row of its own below them. */
    .codex-ds .cdx-widget-filters,
    .codex-ds .cdx-widget-nav {
        flex: 1 1 100%;
    }

    .codex-ds .cdx-widget-filters .cdx-filter-dropdown {
        flex: 1 1 100%;
        min-width: 0;
    }

    .codex-ds .cdx-widget-filters .cdx-filter-reset {
        width: 100%;
        padding: var(--cdx-space-1) 0;
    }
}

/* ── Bottom-row list cards (Birthdays, Headcount by Department) ──────────── */
/* Both cards sit in one row and are equal-height, so an 11-department tenant would otherwise
   stretch the pair to a card taller than the screen. Capped at five birthday rows - the taller of
   the two row types - and scrolled past that, which keeps the two cards visually paired. */
.codex-ds .cdx-list-scroll {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.codex-ds .cdx-dept-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cdx-space-3);
    padding: var(--cdx-space-2) 0;
    border-bottom: 1px solid var(--cdx-gray-100);
}

.codex-ds .cdx-dept-row:last-child {
    border-bottom: none;
}

.codex-ds .cdx-dept-name {
    font-size: var(--cdx-text-sm);
    font-weight: 600;
    color: var(--cdx-navy);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.codex-ds .cdx-dept-count {
    font-family: var(--cdx-font-mono);
    font-size: var(--cdx-text-base);
    font-weight: 600;
    color: var(--cdx-navy);
    flex-shrink: 0;
}

.codex-ds .spinner-border {
    color: var(--cdx-emerald) !important;
}

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
.codex-ds ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.codex-ds ::-webkit-scrollbar-track {
    background: transparent;
}

.codex-ds ::-webkit-scrollbar-thumb {
    background: var(--cdx-gray-400);
    border-radius: var(--cdx-radius-pill);
}

.codex-ds ::-webkit-scrollbar-thumb:hover {
    background: var(--cdx-gray-500);
}

/* ── Motion preference ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .codex-ds .card,
    .codex-ds .status-button {
        transition: none;
    }

    .codex-ds .status-button:hover {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .codex-ds {
        padding: var(--cdx-space-3);
    }
}