/* ===========================================================================
   Design direction A -- "Aurora": vivid modern SaaS.

   Everything here is scoped under html[data-design="aurora"], so the file is
   inert until that attribute is set. Nothing in the baseline look changes, and
   removing the attribute is a complete rollback.

   Tokens come from the Stitch generation of the same name -- brand gradient
   #4648D4 -> #8455EF, ink #131B2E, Plus Jakarta Sans, 12-16px radii and
   brand-tinted shadows rather than grey ones. The four KPI hues (violet, teal,
   amber, rose) are Stitch's too; they are applied by nth-child below so the
   colourful KPI row costs no template change.
   =========================================================================== */

html[data-design="aurora"] {
    --surface-lowest: #ffffff;
    --surface-low: #f5f6ff;
    --surface: #eaedff;
    --surface-high: #e2e7ff;
    --surface-highest: #d7ddff;
    --surface-bg: #f7f8fd;
    /* bg-body-tertiary paints from the -rgb form, so the page ground needs
       this as well as --surface-bg. */
    --bs-tertiary-bg-rgb: 247, 248, 253;
    --on-surface: #131b2e;
    --on-surface-variant: #464554;
    --outline: #767586;
    --outline-variant: #dfe2f2;

    --inverse-surface: #1e1b47;
    --inverse-surface-deep: #171436;
    --inverse-on-surface: #eceaff;

    /* app.css hardcodes the rail's own palette rather than deriving it from
       --inverse-surface, so a direction that only sets tokens leaves the
       sidebar on the baseline navy -- which is most of what you see. */
    --app-sidebar-bg: #1e1b47;
    --app-sidebar-header-bg: #171436;
    --app-sidebar-fg: #aeabd8;

    --accent-700: #2d2f9c;
    --accent-600: #4648d4;
    --accent-500: #605df1;
    --accent-400: #7a6bf5;
    --accent-200: #c3c6ff;
    --accent-100: #e2e7ff;
    --accent-50: #f2f3ff;

    /* The signature. Used on the primary button, the brand lockup and the
       active nav item -- and nowhere else, or it stops being a signature. */
    --aurora-grad: linear-gradient(120deg, #4648d4 0%, #6b38d4 55%, #8455ef 100%);
    --aurora-grad-soft: linear-gradient(120deg, rgba(70, 72, 212, .12), rgba(132, 85, 239, .10));

    --aurora-violet: #6c5cf5;
    --aurora-teal: #10b981;
    --aurora-amber: #f59e0b;
    --aurora-rose: #f43f5e;

    --bs-primary: #4648d4;
    --bs-primary-rgb: 70, 72, 212;
    --bs-link-color-rgb: 70, 72, 212;
    --bs-link-hover-color-rgb: 45, 47, 156;

    --bs-font-sans-serif: 'Plus Jakarta Sans', 'Open Sans', Inter, system-ui, sans-serif;

    /* Generous rounding, and shadows tinted with the brand hue instead of grey
       -- a grey shadow under a violet card reads as dirt. */
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 18px;
    --bs-card-border-radius: 16px;
    --elev-1: 0 1px 2px rgba(70, 72, 212, .06), 0 6px 20px rgba(15, 17, 29, .07);
    --elev-2: 0 2px 6px rgba(70, 72, 212, .10), 0 16px 40px rgba(15, 17, 29, .12);
    --bs-card-box-shadow: var(--elev-1);
}

html[data-design="aurora"][data-bs-theme="dark"] {
    --surface-lowest: #171a2e;
    --surface-low: #1c2039;
    --surface: #222743;
    --surface-high: #2a2f52;
    --surface-highest: #333862;
    --surface-bg: #0f1120;
    /* bg-body-tertiary paints from the -rgb form, so the page ground needs
       this as well as --surface-bg. */
    --bs-tertiary-bg-rgb: 15, 17, 32;
    --on-surface: #e8eaff;
    --on-surface-variant: #b4b7d4;
    --outline: #8b8fb5;
    --outline-variant: #2f3456;

    --inverse-surface: #171436;
    --inverse-surface-deep: #110f28;

    --accent-700: #e2e7ff;
    --accent-600: #a9adff;
    --accent-500: #8f8cff;
    --accent-400: #7a6bf5;
    --accent-200: #3a3d80;
    --accent-100: #2b2e63;
    --accent-50: #232650;

    --bs-primary-rgb: 169, 173, 255;
    --bs-link-color-rgb: 169, 173, 255;
    --bs-link-hover-color-rgb: 226, 231, 255;
    --elev-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35);
    --elev-2: 0 2px 6px rgba(0, 0, 0, .55), 0 16px 40px rgba(0, 0, 0, .45);
}

/* --- the gradient signature --------------------------------------------- */

html[data-design="aurora"] .btn-primary {
    background: var(--aurora-grad);
    border: 0;
    box-shadow: 0 2px 10px rgba(70, 72, 212, .30);
}

html[data-design="aurora"] .btn-primary:hover,
html[data-design="aurora"] .btn-primary:focus-visible {
    background: linear-gradient(120deg, #3d3fc4 0%, #5d2fc4 55%, #763fe0 100%);
    box-shadow: 0 4px 16px rgba(70, 72, 212, .42);
}

html[data-design="aurora"] .sidebar-brand {
    background: var(--aurora-grad);
    color: #fff;
}

/* The active nav item: a filled gradient pill with its own glow, rather than
   the pale tint the baseline uses. */
html[data-design="aurora"] .sidebar-link.active {
    background: var(--aurora-grad);
    color: #fff;
    box-shadow: 0 2px 12px rgba(99, 102, 241, .45);
}

html[data-design="aurora"] .sidebar-link.active i {
    color: #fff;
}

/* --- frosted top bar ----------------------------------------------------- */

html[data-design="aurora"] .app-topbar {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(70, 72, 212, .10);
}

html[data-design="aurora"][data-bs-theme="dark"] .app-topbar {
    background: rgba(23, 26, 46, .72);
    border-bottom-color: rgba(169, 173, 255, .12);
}

/* --- KPI tiles: the colourful centrepiece -------------------------------- */

html[data-design="aurora"] .kpi-card {
    position: relative;
    overflow: hidden;
    border: 0;
    background: var(--surface-lowest);
}

/* A hue bar across the top of each tile. nth-child cycles Stitch's four hues,
   so the row reads as colourful without touching report_kpis.php. */
html[data-design="aurora"] .kpi-row > [class*="col"] .kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--aurora-grad);
}

html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+2) .kpi-card::before {
    background: linear-gradient(90deg, #14b8a6, #10b981);
}

html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+3) .kpi-card::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+4) .kpi-card::before {
    background: linear-gradient(90deg, #f43f5e, #e11d48);
}

/* The label icon becomes a tinted rounded chip, matching the tile's hue. */
html[data-design="aurora"] .kpi-card .kpi-label i,
html[data-design="aurora"] .kpi-card .kpi-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .45rem !important;
    border-radius: 7px;
    background: rgba(108, 92, 245, .12);
    color: var(--aurora-violet);
    font-size: .8rem;
}

html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+2) .kpi-card .kpi-label i,
html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+2) .kpi-card .kpi-swatch {
    background: rgba(16, 185, 129, .12);
    color: var(--aurora-teal);
}

html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+3) .kpi-card .kpi-label i,
html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+3) .kpi-card .kpi-swatch {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+4) .kpi-card .kpi-label i,
html[data-design="aurora"] .kpi-row > [class*="col"]:nth-child(4n+4) .kpi-card .kpi-swatch {
    background: rgba(244, 63, 94, .12);
    color: #e11d48;
}

html[data-design="aurora"] .kpi-card .kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

html[data-design="aurora"] .kpi-card .card-body {
    padding: 1.05rem 1.1rem !important;
}

/* The dashboard's five tiles are .stat-card, a different component from the
   reports' .kpi-card -- styling one and not the other leaves the first screen
   anybody opens looking untouched. */
html[data-design="aurora"] .stat-card {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    border-radius: 16px;
    box-shadow: var(--elev-1);
    transition: transform .15s ease, box-shadow .15s ease;
}

html[data-design="aurora"] .stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--aurora-grad);
}

html[data-design="aurora"] a:hover > .stat-card {
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
}

html[data-design="aurora"] .stat-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.035em;
}

/* The icon becomes a tinted rounded chip rather than a faded glyph. */
html[data-design="aurora"] .stat-card .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: rgba(108, 92, 245, .10);
    opacity: 1 !important;
    font-size: 1.05rem !important;
}

/* --- surfaces float; chips are pills ------------------------------------- */

html[data-design="aurora"] .card,
html[data-design="aurora"] .filter-bar {
    border: 0;
    box-shadow: var(--elev-1);
}

html[data-design="aurora"] .badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

html[data-design="aurora"] h1,
html[data-design="aurora"] .h1,
html[data-design="aurora"] h1.h3 {
    font-weight: 700;
    letter-spacing: -.025em;
}

/* A soft brand wash behind the page header, so the top of every screen carries
   the direction even on screens with no KPI row. */
html[data-design="aurora"] .app-main {
    background-image: var(--aurora-grad-soft);
    background-repeat: no-repeat;
    background-size: 100% 260px;
}

html[data-design="aurora"] .table > thead th {
    letter-spacing: .06em;
    font-size: .6875rem;
}