/* SilverPalms Group Data Portal — brand theme on AdminLTE 4 (Bootstrap 5.3). No build step required.
   Brand: deep green, green, silver/grey. Chart colours are validated for colour-vision
   deficiency as an ordered set (green first); keep their order and steps. */

/* ---------- Brand & theme tokens ---------- */

:root {
    /* Brand ramp */
    --sp-green-950: #08241a;
    --sp-green-900: #0b2e1d;
    --sp-green-800: #0f3d26;
    --sp-green-700: #145c38;
    --sp-green-600: #1d7a4a;
    --sp-green-500: #23894f;
    --sp-green-300: #7cc49b;
    --sp-green-100: #e1f0e7;
    --sp-green-50: #f0f7f3;
    --sp-silver-50: #f4f6f5;
    --sp-silver-100: #eceeed;
    --sp-silver-200: #dfe3e2;
    --sp-silver-300: #c5cbca;
    --sp-silver-500: #8a9391;
    --sp-slate-600: #4d5755;
    --sp-ink: #16201b;

    /* Surfaces */
    --page-bg: var(--sp-silver-50);
    --portal-surface: #ffffff; /* card background, used for chart gaps and tooltips */
    --surface-raised: #ffffff;
    --surface-sunken: var(--sp-silver-50);
    --line: var(--sp-silver-200);
    --line-soft: var(--sp-silver-100);
    --shadow-card: 0 1px 2px rgba(15, 61, 38, .04), 0 1px 3px rgba(15, 61, 38, .06);

    /* Text */
    --ink-primary: var(--sp-ink);
    --ink-secondary: #4d5755;
    --ink-muted: #6b7471;

    /* Chart chrome */
    --chart-grid: #e6e9e8;
    --chart-axis: #c5cbca;
    --chart-muted: #6b7471;

    /* Categorical slots — fixed order, validated (adjacent pairs, CVD + normal vision) on #ffffff. */
    --series-1: #23894f; /* green */
    --series-2: #2a78d6; /* blue */
    --series-3: #eb6834; /* orange */
    --series-4: #1baf7a; /* aqua */
    --series-5: #eda100; /* yellow */
    --series-6: #e87ba4; /* magenta */
    --series-7: #6250d6; /* violet */
    --series-8: #e34948; /* red */

    /* Diverging poles (profit / loss). Sign is also shown by the zero line and minus signs. */
    --diverge-pos: #23894f;
    --diverge-neg: #e34948;

    /* Status — always paired with an icon and words. */
    --status-good: #157a3f;
    --status-critical: #c8342f;
    --status-warning: #8a5a00;

    /* Tints for icon chips and pills */
    --tint-brand-bg: var(--sp-green-100);
    --tint-brand-fg: var(--sp-green-700);
    --tint-good-bg: #e2f3e8;
    --tint-good-fg: #157a3f;
    --tint-critical-bg: #fbe7e6;
    --tint-critical-fg: #b2302b;
    --tint-warn-bg: #fdf1d8;
    --tint-warn-fg: #8a5a00;
    --tint-info-bg: #e6eef9;
    --tint-info-fg: #1f5fae;
    --tint-neutral-bg: var(--sp-silver-100);
    --tint-neutral-fg: var(--sp-slate-600);

    /* Bootstrap: brand as primary */
    --bs-primary: #1d7a4a;
    --bs-primary-rgb: 29, 122, 74;
    --bs-success: #1d7a4a;
    --bs-success-rgb: 29, 122, 74;
    --bs-link-color: #1d7a4a;
    --bs-link-color-rgb: 29, 122, 74;
    --bs-link-hover-color: #145c38;
    --bs-link-hover-color-rgb: 20, 92, 56;
    --bs-border-color: var(--sp-silver-200);
    --bs-body-color: var(--sp-ink);
    --bs-secondary-color: #5f6966;
    --bs-tertiary-bg: var(--sp-silver-50);
    --bs-focus-ring-color: rgba(29, 122, 74, .25);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page-bg: #0e1512;
        --portal-surface: #17201b;
        --surface-raised: #17201b;
        --surface-sunken: #121a16;
        --line: #26332c;
        --line-soft: #1f2a24;
        --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
        --ink-primary: #eef2f0;
        --ink-secondary: #c2cbc7;
        --ink-muted: #95a19c;
        --chart-grid: #26332c;
        --chart-axis: #3a4741;
        --chart-muted: #95a19c;
        --series-1: #2a9d5c;
        --series-2: #3987e5;
        --series-3: #d95926;
        --series-4: #199e70;
        --series-5: #c98500;
        --series-6: #d55181;
        --series-7: #9085e9;
        --series-8: #e66767;
        --diverge-pos: #2a9d5c;
        --diverge-neg: #e66767;
        --status-good: #4cc27f;
        --status-critical: #f07b77;
        --status-warning: #f3b53f;
        --tint-brand-bg: rgba(42, 157, 92, .16);
        --tint-brand-fg: #7cd3a0;
        --tint-good-bg: rgba(76, 194, 127, .14);
        --tint-good-fg: #7cd3a0;
        --tint-critical-bg: rgba(240, 123, 119, .14);
        --tint-critical-fg: #f39a96;
        --tint-warn-bg: rgba(243, 181, 63, .14);
        --tint-warn-fg: #f3c46b;
        --tint-info-bg: rgba(57, 135, 229, .16);
        --tint-info-fg: #8bb8f0;
        --tint-neutral-bg: rgba(197, 203, 202, .1);
        --tint-neutral-fg: #c2cbc7;
        --bs-primary: #2a9d5c;
        --bs-primary-rgb: 42, 157, 92;
        --bs-success: #2a9d5c;
        --bs-success-rgb: 42, 157, 92;
        --bs-link-color: #6cc794;
        --bs-link-color-rgb: 108, 199, 148;
        --bs-link-hover-color: #95dab3;
        --bs-link-hover-color-rgb: 149, 218, 179;
        --bs-border-color: #26332c;
        --bs-body-color: #eef2f0;
        --bs-body-bg: #17201b;
        --bs-secondary-color: #a5b0ac;
        --bs-tertiary-bg: #121a16;
    }
}

:root[data-theme="dark"] {
    --page-bg: #0e1512;
    --portal-surface: #17201b;
    --surface-raised: #17201b;
    --surface-sunken: #121a16;
    --line: #26332c;
    --line-soft: #1f2a24;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --ink-primary: #eef2f0;
    --ink-secondary: #c2cbc7;
    --ink-muted: #95a19c;
    --chart-grid: #26332c;
    --chart-axis: #3a4741;
    --chart-muted: #95a19c;
    --series-1: #2a9d5c;
    --series-2: #3987e5;
    --series-3: #d95926;
    --series-4: #199e70;
    --series-5: #c98500;
    --series-6: #d55181;
    --series-7: #9085e9;
    --series-8: #e66767;
    --diverge-pos: #2a9d5c;
    --diverge-neg: #e66767;
    --status-good: #4cc27f;
    --status-critical: #f07b77;
    --status-warning: #f3b53f;
    --tint-brand-bg: rgba(42, 157, 92, .16);
    --tint-brand-fg: #7cd3a0;
    --tint-good-bg: rgba(76, 194, 127, .14);
    --tint-good-fg: #7cd3a0;
    --tint-critical-bg: rgba(240, 123, 119, .14);
    --tint-critical-fg: #f39a96;
    --tint-warn-bg: rgba(243, 181, 63, .14);
    --tint-warn-fg: #f3c46b;
    --tint-info-bg: rgba(57, 135, 229, .16);
    --tint-info-fg: #8bb8f0;
    --tint-neutral-bg: rgba(197, 203, 202, .1);
    --tint-neutral-fg: #c2cbc7;
    --bs-primary: #2a9d5c;
    --bs-primary-rgb: 42, 157, 92;
    --bs-success: #2a9d5c;
    --bs-success-rgb: 42, 157, 92;
    --bs-link-color: #6cc794;
    --bs-link-color-rgb: 108, 199, 148;
    --bs-link-hover-color: #95dab3;
    --bs-link-hover-color-rgb: 149, 218, 179;
    --bs-border-color: #26332c;
    --bs-body-color: #eef2f0;
    --bs-body-bg: #17201b;
    --bs-secondary-color: #a5b0ac;
    --bs-tertiary-bg: #121a16;
}

/* ---------- Base ---------- */

body.portal-app,
body.portal-login {
    background: var(--page-bg);
    color: var(--ink-primary);
    -webkit-font-smoothing: antialiased;
}

.portal-app .app-main {
    background: var(--page-bg);
}

a {
    text-underline-offset: 2px;
}

/* Buttons and form focus in brand colours */
.btn-primary {
    --bs-btn-bg: var(--sp-green-600);
    --bs-btn-border-color: var(--sp-green-600);
    --bs-btn-hover-bg: var(--sp-green-700);
    --bs-btn-hover-border-color: var(--sp-green-700);
    --bs-btn-active-bg: var(--sp-green-800);
    --bs-btn-active-border-color: var(--sp-green-800);
    --bs-btn-disabled-bg: var(--sp-green-600);
    --bs-btn-disabled-border-color: var(--sp-green-600);
    --bs-btn-focus-shadow-rgb: 29, 122, 74;
    font-weight: 600;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-secondary);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--surface-sunken);
    --bs-btn-hover-color: var(--ink-primary);
    --bs-btn-hover-border-color: var(--sp-silver-300);
    --bs-btn-active-bg: var(--surface-sunken);
    --bs-btn-active-color: var(--ink-primary);
    --bs-btn-active-border-color: var(--sp-silver-300);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sp-green-500);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.text-bg-primary {
    background-color: var(--sp-green-800) !important;
    color: #fff !important;
}

.text-bg-success { background-color: var(--sp-green-600) !important; }

.progress {
    --bs-progress-bg: var(--line-soft);
    --bs-progress-bar-bg: var(--sp-green-500);
}

.progress-xs {
    height: 4px;
}

.card-outline.card-primary,
.card-outline.card-success {
    border-top: 3px solid var(--bs-primary);
}

/* ---------- Header ---------- */

.portal-header {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
    min-height: 60px;
}

.portal-header .nav-link {
    color: var(--ink-secondary);
}

.portal-header .nav-link:hover {
    color: var(--ink-primary);
}

.portal-header .form-select-sm {
    min-width: 150px;
    border-color: var(--line);
    background-color: var(--surface-sunken);
    font-weight: 500;
}

.user-initials {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sp-green-600), var(--sp-green-800));
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    margin-right: .4rem;
    box-shadow: 0 0 0 2px var(--sp-silver-200);
}

.user-initials-lg {
    width: 72px;
    height: 72px;
    font-size: 1.6rem;
    margin: .25rem auto .5rem;
    display: grid;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 3px rgba(197, 203, 202, .5);
}

.user-header.text-bg-primary {
    background: linear-gradient(160deg, var(--sp-green-700), var(--sp-green-900)) !important;
}

/* ---------- Sidebar ---------- */

.portal-sidebar {
    background: linear-gradient(180deg, var(--sp-green-800) 0%, var(--sp-green-900) 55%, var(--sp-green-950) 100%);
    border-right: 1px solid rgba(197, 203, 202, .08);
    --lte-sidebar-color: #c3cec9;
    --lte-sidebar-hover-bg: rgba(255, 255, 255, .06);
    --lte-sidebar-hover-color: #ffffff;
    --lte-sidebar-active-color: #ffffff;
    --lte-sidebar-menu-active-bg: rgba(124, 196, 155, .16);
    --lte-sidebar-menu-active-color: #ffffff;
    --lte-sidebar-submenu-color: #b4c0bb;
    --lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, .06);
    --lte-sidebar-submenu-hover-color: #ffffff;
    --lte-sidebar-submenu-active-bg: rgba(124, 196, 155, .12);
    --lte-sidebar-submenu-active-color: #ffffff;
    --lte-sidebar-header-color: #8fa39a;
}

.portal-sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(197, 203, 202, .12);
    height: auto;
    min-height: 60px;
    padding: .65rem 0;
}

.portal-sidebar .brand-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
}

.portal-sidebar .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
}

.brand-sub {
    color: var(--sp-silver-300);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    background: linear-gradient(145deg, #eef1f0 0%, #c5cbca 100%);
    color: var(--sp-green-800);
    font-size: 1.1rem;
    box-shadow: inset 0 -2px 0 rgba(15, 61, 38, .15), 0 1px 2px rgba(0, 0, 0, .25);
    flex-shrink: 0;
}

.brand-mark-lg {
    width: 56px;
    height: 56px;
    border-radius: .9rem;
    font-size: 1.7rem;
}

.portal-sidebar .nav-header {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-top: 1.1rem !important;
}

.portal-sidebar .sidebar-menu .nav-link {
    border-radius: .5rem;
    margin: 1px .5rem;
    width: auto;
    position: relative;
}

.portal-sidebar .sidebar-menu > .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 var(--sp-green-300);
    font-weight: 500;
}

.portal-sidebar .nav-treeview .nav-link.active {
    color: #ffffff;
}

.sidebar-menu .nav-link p {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    white-space: normal;
    line-height: 1.25;
}

.nav-badge-dot {
    margin-left: auto;
}

.sidebar-menu .nav-link .nav-arrow {
    margin-left: auto;
}

/* ---------- Page header ---------- */

.portal-page-head {
    padding-top: 1.4rem !important;
    padding-bottom: .4rem !important;
}

.page-title {
    font-size: 1.55rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink-primary);
}

.portal-page-head .breadcrumb {
    font-size: .82rem;
}

.portal-page-head .breadcrumb-item.active {
    color: var(--ink-muted);
}

.section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: .25rem 0 .75rem;
}

.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Freshness line */
.live-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    font-size: .8rem;
    color: var(--ink-secondary);
}

.live-bar > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-raised);
}

.live-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--status-good);
    display: inline-block;
    box-shadow: 0 0 0 3px var(--tint-good-bg);
}

.live-dot.paused {
    background: var(--ink-muted);
    box-shadow: none;
}

/* Refetch keeps the frame: dim the previous render, never blank it. */
#live.is-loading {
    opacity: .55;
    transition: opacity .2s;
}

/* ---------- Cards ---------- */

.portal-app .card {
    border: 1px solid var(--line);
    border-radius: .85rem;
    box-shadow: var(--shadow-card);
    background: var(--surface-raised);
}

.portal-app .card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--line-soft);
    padding: .9rem 1.15rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.portal-app .card > .card-header::after {
    display: none;
}

.card-heading {
    min-width: 0;
    flex: 1;
}

.portal-app .card-title {
    font-size: .98rem;
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0;
    float: none;
}

.card-subtitle {
    font-size: .78rem;
    color: var(--ink-muted);
    margin-top: .2rem;
    line-height: 1.35;
}

.portal-app .card-tools {
    margin-left: auto;
    margin-right: -.4rem;
    float: none;
}

.portal-app .card-body {
    padding: 1.1rem 1.15rem;
}

.portal-app .card-body.p-0 {
    padding: 0;
}

.callout {
    border-radius: .65rem;
    background: var(--surface-raised);
}

/* ---------- KPI tiles (headline figures) ---------- */

.kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.05rem 1.15rem .95rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--kpi-accent, var(--sp-silver-300));
}

.kpi-head {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.kpi-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: .6rem;
    background: var(--kpi-chip-bg, var(--tint-neutral-bg));
    color: var(--kpi-chip-fg, var(--tint-neutral-fg));
    font-size: 1.05rem;
    flex-shrink: 0;
}

.kpi-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

.kpi-value {
    font-size: 1.95rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-top: .7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink-primary);
}

.kpi-meta {
    font-size: .76rem;
    color: var(--ink-muted);
    min-height: 1.2em;
    margin-top: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .75rem;
    font-size: .74rem;
    color: var(--ink-muted);
}

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    background: var(--tint-neutral-bg);
    color: var(--tint-neutral-fg);
    white-space: nowrap;
}

.kpi-delta-better { background: var(--tint-good-bg); color: var(--tint-good-fg); }
.kpi-delta-worse { background: var(--tint-critical-bg); color: var(--tint-critical-fg); }

.kpi-verdict {
    font-weight: 600;
    opacity: .9;
}

.kpi-verdict::before {
    content: "·";
    margin-right: .25rem;
}

.kpi-feature { --kpi-accent: var(--sp-green-300); }
.kpi-good { --kpi-accent: var(--sp-green-500); --kpi-chip-bg: var(--tint-good-bg); --kpi-chip-fg: var(--tint-good-fg); }
.kpi-critical { --kpi-accent: var(--status-critical); --kpi-chip-bg: var(--tint-critical-bg); --kpi-chip-fg: var(--tint-critical-fg); }
.kpi-warn { --kpi-accent: #d79a1a; --kpi-chip-bg: var(--tint-warn-bg); --kpi-chip-fg: var(--tint-warn-fg); }
.kpi-info { --kpi-accent: var(--series-2); --kpi-chip-bg: var(--tint-info-bg); --kpi-chip-fg: var(--tint-info-fg); }
.kpi-neutral { --kpi-accent: var(--sp-silver-300); }

/* The featured tile: deep green with silver detail. */
.kpi-feature {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(124, 196, 155, .22) 0%, transparent 55%),
        linear-gradient(150deg, var(--sp-green-700) 0%, var(--sp-green-800) 55%, var(--sp-green-900) 100%);
    border-color: var(--sp-green-800);
    color: #fff;
}

.kpi-feature::before { display: none; }
.kpi-feature .kpi-icon { background: rgba(255, 255, 255, .12); color: #e8efec; }
.kpi-feature .kpi-label { color: #d6e2dc; }
.kpi-feature .kpi-value { color: #ffffff; }
.kpi-feature .kpi-meta,
.kpi-feature .kpi-foot { color: #b9c9c1; }
.kpi-feature .kpi-delta { background: rgba(255, 255, 255, .12); color: #ffffff; }
.kpi-feature .kpi-delta-better { background: rgba(124, 196, 155, .28); color: #ffffff; }
.kpi-feature .kpi-delta-worse { background: rgba(240, 123, 119, .3); color: #ffffff; }

/* ---------- Stat tiles (balances and operations) ---------- */

.stat {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .95rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
}

.stat-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: .7rem;
    background: var(--stat-chip-bg, var(--tint-neutral-bg));
    color: var(--stat-chip-fg, var(--tint-neutral-fg));
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.stat-label {
    font-size: .76rem;
    font-weight: 600;
    color: var(--ink-muted);
    line-height: 1.3;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
    margin-top: .1rem;
}

.stat-meta {
    font-size: .74rem;
    color: var(--ink-muted);
    margin-top: .2rem;
    line-height: 1.35;
}

.stat-brand { --stat-chip-bg: var(--tint-brand-bg); --stat-chip-fg: var(--tint-brand-fg); }
.stat-good { --stat-chip-bg: var(--tint-good-bg); --stat-chip-fg: var(--tint-good-fg); }
.stat-critical { --stat-chip-bg: var(--tint-critical-bg); --stat-chip-fg: var(--tint-critical-fg); }
.stat-warn { --stat-chip-bg: var(--tint-warn-bg); --stat-chip-fg: var(--tint-warn-fg); }
.stat-info { --stat-chip-bg: var(--tint-info-bg); --stat-chip-fg: var(--tint-info-fg); }

/* ---------- Status & deltas ---------- */

.text-good { color: var(--status-good) !important; }
.text-critical { color: var(--status-critical) !important; }
.text-warn { color: var(--status-warning) !important; }
.text-muted-ink { color: var(--ink-muted) !important; }

.delta {
    font-weight: 600;
    white-space: nowrap;
}

.delta-good { color: var(--status-good); }
.delta-bad { color: var(--status-critical); }
.delta-flat { color: var(--ink-muted); }

.series-dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.series-1 { background: var(--series-1); }
.series-2 { background: var(--series-2); }
.series-3 { background: var(--series-3); }
.series-4 { background: var(--series-4); }
.series-5 { background: var(--series-5); }
.series-6 { background: var(--series-6); }
.series-7 { background: var(--series-7); }
.series-8 { background: var(--series-8); }

/* ---------- Charts ---------- */

.chart-box {
    position: relative;
    height: 280px;
}

.chart-box.chart-sm {
    height: 220px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    font-size: .8rem;
    color: var(--ink-secondary);
    margin-bottom: .5rem;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.chart-legend .key-line {
    width: 14px;
    height: 2px;
    border-radius: 1px;
}

details.chart-data summary {
    font-size: .78rem;
    color: var(--ink-muted);
    cursor: pointer;
}

details.chart-data summary:hover {
    color: var(--bs-link-color);
}

/* ---------- Tables ---------- */

.portal-table {
    font-size: .88rem;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--sp-green-50);
    --bs-table-border-color: var(--line-soft);
}

[data-bs-theme="dark"] .portal-table {
    --bs-table-hover-bg: rgba(42, 157, 92, .08);
}

.portal-table thead th {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-muted);
    font-weight: 700;
    white-space: nowrap;
}

.portal-table td,
.portal-table th {
    padding: .7rem 1rem;
}

.portal-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.portal-table tbody tr[data-href] {
    cursor: pointer;
}

.portal-table .table-division td {
    background: var(--surface-sunken);
}

.portal-table .table-sub td:first-child {
    padding-left: 2rem;
}

.portal-table tfoot td {
    font-weight: 700;
    background: var(--tint-brand-bg);
    border-top: 2px solid var(--sp-green-600);
    color: var(--ink-primary);
}

/* ---------- Footer ---------- */

.portal-footer {
    background: var(--surface-raised);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: .8rem;
}

.portal-footer strong {
    color: var(--ink-secondary);
}

/* ---------- Login ---------- */

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.login-brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3rem clamp(2rem, 6vw, 5rem);
    color: #fff;
    background:
        radial-gradient(90% 70% at 85% 10%, rgba(124, 196, 155, .25) 0%, transparent 60%),
        radial-gradient(70% 60% at 0% 100%, rgba(197, 203, 202, .14) 0%, transparent 60%),
        linear-gradient(160deg, var(--sp-green-700) 0%, var(--sp-green-800) 45%, var(--sp-green-950) 100%);
    overflow: hidden;
}

.login-brand::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(197, 203, 202, .18);
    box-shadow: 0 0 0 60px rgba(197, 203, 202, .04), 0 0 0 120px rgba(197, 203, 202, .03);
}

.login-brand-inner {
    position: relative;
    max-width: 30rem;
    z-index: 1;
}

.login-brand-name {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-top: 1.25rem;
}

.login-brand-tag {
    color: #c7d6cf;
    font-size: 1.02rem;
    margin: .5rem 0 2rem;
}

.login-brand-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
}

.login-brand-list li {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #e3ebe7;
    font-size: .92rem;
}

.login-brand-list i {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: .55rem;
    background: rgba(255, 255, 255, .1);
    color: var(--sp-silver-300);
}

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--page-bg);
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2.25rem 2rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface-raised);
    box-shadow: 0 10px 30px rgba(15, 61, 38, .08);
}

.login-mobile-brand {
    display: none;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.login-lead {
    color: var(--ink-muted);
    margin: .25rem 0 1.5rem;
}

.login-card .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

.login-card .input-group-text {
    background: var(--surface-sunken);
    color: var(--ink-muted);
}

.login-note {
    font-size: .78rem;
    color: var(--ink-muted);
    margin: 1.25rem 0 0;
    text-align: center;
}

@media (max-width: 991.98px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-brand {
        display: none;
    }

    .login-mobile-brand {
        display: flex;
    }

    .login-panel {
        padding: 1.5rem 1rem;
    }

    .login-card {
        padding: 1.75rem 1.25rem;
    }
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
    .kpi-value {
        font-size: 1.6rem;
    }

    .page-title {
        font-size: 1.3rem;
    }

    .portal-header .form-select-sm {
        min-width: 0;
    }
}

/* Sidebar details: room for the chevron, and a ring so company dots read on the green. */
.portal-sidebar .sidebar-menu .nav-link:has(.nav-arrow) p {
    padding-right: 1.5rem;
}

.portal-sidebar .series-dot {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .28);
}