/*
 * Central design system (spec section 16).
 *
 * Every color used anywhere in the app comes from one of the custom
 * properties below — never a hex code inline in a template. Light mode is
 * the :root default; dark mode is a full override block keyed off
 * [data-theme="dark"], toggled by assets/js/app.js and persisted to
 * localStorage (never a server round-trip just to change theme).
 *
 * This file currently covers what Phase 1 needs (auth screens, the app
 * shell/nav, forms, tables, badges). Phase 4 extends it with the
 * KPI-card/chart-specific tokens the full analytics dashboard needs —
 * additive, nothing here is expected to be torn out.
 */

:root {
    /* Brand palette sourced from the African Democratic Congress (ADC)
       party mark: deep party green as primary, party red as danger. */
    --color-primary: #0a6b3a;
    --color-primary-hover: #085530;
    --color-primary-soft: #e3f3e9;
    --color-success: #1b8a5a;
    --color-success-soft: #e2f5ec;
    --color-warning: #b9770e;
    --color-warning-soft: #fbf0dd;
    --color-danger: #d81f1f;
    --color-danger-soft: #fbe6e3;
    --color-info: #2f7fea;

    --color-surface: #ffffff;
    --color-surface-alt: #f7f8fb;
    --color-background: #eef1f6;
    --color-border: #e2e5ec;
    --color-text: #1f2a44;
    --color-text-muted: #6b7280;

    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --shadow-pop: 0 12px 28px rgba(16, 24, 40, 0.14), 0 4px 10px rgba(16, 24, 40, 0.08);
    --radius: 10px;
    --radius-sm: 7px;
    --sidebar-width: 236px;
    --sidebar-collapsed-width: 72px;
    --header-height: 60px;

    /* Chart/map series palette (spec section 13) — distinct from the status
       colors above so KPI "good/bad" meaning is never confused with a
       chart's categorical series. */
    --chart-1: #2f5bea;
    --chart-2: #1b8a5a;
    --chart-3: #b9770e;
    --chart-4: #7c5cf0;
    --chart-5: #2f9fb0;

    --map-empty: #e2e5ec;
    --map-0: #bcd6f7;
    --map-1: #4fb7c9;
    --map-2: #f4c94f;
    --map-3: #f28c45;
    --map-4: #e64550;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #3fbf7a;
        --color-primary-hover: #5fd393;
        --color-primary-soft: #123322;
        --color-success: #3fbf85;
        --color-success-soft: #103527;
        --color-warning: #e0a63a;
        --color-warning-soft: #3a2e10;
        --color-danger: #e2564f;
        --color-danger-soft: #3a1f1b;
        --color-info: #6ea4f7;

        --color-surface: #151a2b;
        --color-surface-alt: #1b2138;
        --color-background: #10131f;
        --color-border: #262d47;
        --color-text: #e7e9f2;
        --color-text-muted: #97a0bb;

        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-pop: 0 16px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);

        --map-empty: #232a44;
        --map-0: #2c4f78;
        --map-1: #2b8f9a;
        --map-2: #d9ad3f;
        --map-3: #d97a3e;
        --map-4: #e2564f;
    }
}

:root[data-theme="dark"] {
    --color-primary: #3fbf7a;
    --color-primary-hover: #5fd393;
    --color-primary-soft: #123322;
    --color-success: #3fbf85;
    --color-success-soft: #103527;
    --color-warning: #e0a63a;
    --color-warning-soft: #3a2e10;
    --color-danger: #e2564f;
    --color-danger-soft: #3a1f1b;
    --color-info: #6ea4f7;

    --color-surface: #151a2b;
    --color-surface-alt: #1b2138;
    --color-background: #10131f;
    --color-border: #262d47;
    --color-text: #e7e9f2;
    --color-text-muted: #97a0bb;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-pop: 0 16px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);

    --map-empty: #232a44;
    --map-0: #2c4f78;
    --map-1: #2b8f9a;
    --map-2: #d9ad3f;
    --map-3: #d97a3e;
    --map-4: #e2564f;
}

* { box-sizing: border-box; }

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}

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

/* ---------------------------------------------------------------- */
/* App shell                                                         */
/* ---------------------------------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: 0.75rem 0.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.18s ease;
}

.auth-brand {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem 0.9rem;
}

.sidebar-brand-mark {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.sidebar-brand-text {
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-section-label {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 0 0.75rem;
    margin: 0.9rem 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
}

.app-sidebar .nav-link {
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    padding: 0.48rem 0.7rem;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
    overflow: hidden;
}

.app-sidebar .nav-link i {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 1rem;
}

.app-sidebar .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar .nav-link:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.app-sidebar .nav-link {
    position: relative;
}

.app-sidebar .nav-link.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}

/* Left accent rail on the active item — the classic analytics-app nav
   marker, echoing the KPI cards' top-accent language (spec section 16). */
.app-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--color-primary);
}

:root[data-sidebar="collapsed"] .app-sidebar .nav-link.active::before {
    left: 0;
}

/* Collapsed state: icon rail only. Toggled by JS (data-sidebar-toggle) and
   persisted to localStorage. Applied as a data-attribute on <html> (set by
   the inline script in layout/app.php, before body renders) the same way
   the color theme is, so there's no flash of the wrong width. */
:root[data-sidebar="collapsed"] .app-sidebar {
    width: var(--sidebar-collapsed-width);
}

:root[data-sidebar="collapsed"] .app-sidebar .sidebar-brand-text,
:root[data-sidebar="collapsed"] .app-sidebar .sidebar-section-label,
:root[data-sidebar="collapsed"] .app-sidebar .nav-label {
    display: none;
}

:root[data-sidebar="collapsed"] .app-sidebar .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

:root[data-sidebar="collapsed"] .app-sidebar .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    background: var(--color-surface);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Sidebar-collapse icon flips to hint at the direction it will move the rail. */
[data-sidebar-toggle] i { transition: transform 0.18s ease; }
:root[data-sidebar="collapsed"] [data-sidebar-toggle] i { transform: rotate(180deg); }

.app-header-left,
.app-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.app-header-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-content {
    padding: 1.25rem;
    max-width: 100%;
    overflow-x: hidden;
}

/* Icon-button: shared base for the sidebar-collapse, mobile-menu, and
   notification-bell buttons in the header. */
.icon-btn {
    position: relative;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.02rem;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.icon-btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

.icon-btn[aria-expanded="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

@media (max-width: 767.98px) {
    .app-sidebar { display: none; }
    .app-content { padding: 0.85rem; }
    .app-header-heading { max-width: 46vw; }
}

/* ---------------------------------------------------------------- */
/* Auth screens (login, change-password, magic-link)                 */
/* ---------------------------------------------------------------- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2rem 1.75rem;
}

.auth-card .auth-brand {
    display: block;
    text-align: center;
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------- */
/* Cards, tables, badges                                             */
/* ---------------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

.kpi-card .kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.kpi-card .kpi-label {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table {
    color: var(--color-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--color-border);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-pill--success { background: var(--color-success-soft); color: var(--color-success); }
.status-pill--warning  { background: var(--color-warning-soft); color: var(--color-warning); }
.status-pill--danger   { background: var(--color-danger-soft); color: var(--color-danger); }
.status-pill--muted    { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* Responsive tables become stacked cards below md (spec section 43). */
@media (max-width: 767.98px) {
    .table-responsive-cards thead { display: none; }
    .table-responsive-cards tbody tr {
        display: block;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.8rem;
    }
    .table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        border: none;
        padding: 0.3rem 0;
    }
    .table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 0.78rem;
    }
}

/* ---------------------------------------------------------------- */
/* Reporting engine (Phase 7, spec sections 31/32): filter bar KPIs, */
/* the Report Builder column picker, and the standalone print page.  */
/* ---------------------------------------------------------------- */

.report-kpi-row .kpi-card {
    height: 100%;
}

.report-column-picker {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.6rem 0.6rem 0.2rem;
}

.report-print-meta {
    color: #55606b;
    margin-bottom: 1.25rem;
}

.report-print-table th,
.report-print-table td {
    border: 1px solid #d6dce2;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}

.report-print-table thead th {
    background: #eef1f4;
}

/* The print view's own Print/Close controls never belong in the
   printed or "Save as PDF" output. */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        padding: 0 !important;
    }
}

/* ---------------------------------------------------------------- */
/* Auth split screen (login only): animated slideshow + sign-in form */
/* ---------------------------------------------------------------- */

.auth-split-body { margin: 0; }

.auth-split {
    min-height: 100vh;
    display: flex;
}

.auth-split-media {
    position: relative;
    flex: 1 1 56%;
    overflow: hidden;
    background: var(--color-primary);
    display: flex;
    align-items: flex-end;
}

.auth-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease-in-out;
    display: flex;
    align-items: flex-end;
}

.auth-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.auth-slide-bg {
    position: absolute;
    inset: -6%;
    background-position: center;
    background-size: cover;
    animation: authKenBurns 9s ease-in-out infinite alternate;
}

.auth-slide.is-active .auth-slide-bg { animation-play-state: running; }
.auth-slide:not(.is-active) .auth-slide-bg { animation-play-state: paused; }

.auth-slide-bg--1 { background-color: var(--color-primary); background-image: url('../img/auth-slide-1.jpg'); background-size: cover; background-position: center; }
.auth-slide-bg--2 { background-color: var(--color-primary); background-image: url('../img/auth-slide-2.jpg'); background-size: cover; background-position: center; }
.auth-slide-bg--3 { background-color: var(--color-primary); background-image: url('../img/auth-slide-3.jpg'); background-size: cover; background-position: center; }

.auth-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 20, 12, 0.5);
    z-index: 1;
}

@keyframes authKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

.auth-slide-copy {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 3.5rem 3.25rem;
    max-width: 560px;
    animation: authCopyIn 0.9s ease both;
    animation-delay: 0.25s;
    opacity: 0;
}

.auth-slide.is-active .auth-slide-copy { opacity: 0; animation: authCopyIn 0.9s ease both; animation-delay: 0.3s; }

@keyframes authCopyIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-slide-icon {
    font-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(2px);
    margin-bottom: 1.25rem;
}

.auth-slide-copy h2 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.auth-slide-copy p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0;
}

.auth-slide-dots {
    position: absolute;
    left: 3.25rem;
    bottom: 1.5rem;
    z-index: 3;
    display: flex;
    gap: 0.4rem;
}

.auth-slide-dot {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.3s ease, width 0.3s ease;
}

.auth-slide-dot.is-active {
    background: #fff;
    width: 34px;
}

.auth-split-form {
    flex: 1 1 44%;
    min-width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

.auth-split-form-inner {
    width: 100%;
    max-width: 380px;
}

.auth-logo-badge {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    margin-bottom: -44px;
}

.auth-logo-badge img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow-pop);
}

.auth-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--shadow-pop);
    padding: 3.5rem 2rem 2rem;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    margin-bottom: 1.1rem;
}

.auth-split-form h1 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.auth-split-form .auth-subtitle {
    text-align: left;
    margin-bottom: 1.75rem;
}

.auth-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.auth-input-group .auth-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.auth-input-group input {
    border: 0;
    background: transparent;
    color: var(--color-text);
    padding: 0.6rem 0.75rem 0.6rem 0;
    width: 100%;
    font-size: 0.9rem;
}

.auth-input-group input:focus { outline: none; box-shadow: none; }

.auth-input-toggle {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    width: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-input-toggle:hover { color: var(--color-text); }

.auth-submit {
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
    padding: 0.65rem 1rem;
    border-radius: 8px;
}

.auth-submit:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

@media (max-width: 991.98px) {
    .auth-split-media { display: none; }
    .auth-split-form { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- */
/* Notification bell + panel                                         */
/* ---------------------------------------------------------------- */

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface);
}

/* A soft expanding ring behind the badge draws the eye to unread notifications
   without being a distracting, constantly-bouncing icon. */
.notif-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-danger);
    animation: notif-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    z-index: -1;
}

@keyframes notif-ping {
    0%   { transform: scale(1); opacity: 0.55; }
    75%, 100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .notif-badge::after { animation: none; display: none; }
}

.notification-panel {
    width: 340px;
    max-width: calc(100vw - 2rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.notification-panel-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-text);
    margin: 0;
}

.notification-panel-mark {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0;
}

.notification-panel-mark:disabled {
    color: var(--color-text-muted);
    cursor: default;
}

.notification-list {
    max-height: 340px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}

.notification-item:last-child { border-bottom: none; }

.notification-item:hover { background: var(--color-surface-alt); }

.notification-item.is-unread { background: var(--color-primary-soft); }

.notification-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--color-surface-alt);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.notification-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.1rem;
}

.notification-item-body {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item-time {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.notification-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* ---------------------------------------------------------------- */
/* Theme switch (modern pill toggle, replaces the old icon button)   */
/* ---------------------------------------------------------------- */

.theme-switch {
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    border-radius: 999px;
    width: 52px;
    height: 30px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.theme-switch-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.theme-switch-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-warning);
    font-size: 0.72rem;
    transition: transform 0.18s ease;
}

.theme-switch-thumb i { position: absolute; transition: opacity 0.12s ease; }
.theme-switch-thumb .bi-moon-stars-fill { opacity: 0; color: var(--color-primary); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-switch-thumb { transform: translateX(22px); }
    :root:not([data-theme="light"]) .theme-switch-thumb .bi-sun-fill { opacity: 0; }
    :root:not([data-theme="light"]) .theme-switch-thumb .bi-moon-stars-fill { opacity: 1; }
}

:root[data-theme="dark"] .theme-switch-thumb { transform: translateX(22px); }
:root[data-theme="dark"] .theme-switch-thumb .bi-sun-fill { opacity: 0; }
:root[data-theme="dark"] .theme-switch-thumb .bi-moon-stars-fill { opacity: 1; }

/* ---------------------------------------------------------------- */
/* Avatar + account chip                                             */
/* ---------------------------------------------------------------- */

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.account-chip:hover .avatar,
.icon-btn:hover + .avatar {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.avatar-sm { width: 30px; height: 30px; font-size: 0.74rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.9rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; }

/* Signed-in indicator on the current user's own avatar in the header — we only
   know our own session is live, so this is never applied to other people's avatars. */
.avatar--online::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-success);
    border: 2px solid var(--color-surface);
}

.avatar-lg.avatar--online::after { width: 12px; height: 12px; }

.account-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
}

.account-chip:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

.account-chip-meta {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    max-width: 140px;
}

.account-chip-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.account-chip-role {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.account-chip-caret {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.account-menu-header {
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

.account-menu-header .account-chip-name { font-size: 0.85rem; }
.account-menu-header .account-chip-role { font-size: 0.72rem; }


/* ---------------------------------------------------------------- */
/* Dashboard: KPI cards v2                                           */
/* ---------------------------------------------------------------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
}

.kpi-card-v2 {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kpi-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* Thin top accent that echoes the card's icon color, so the row of KPI
   cards reads as a coordinated set at a glance (progressive enhancement —
   cards still look complete without :has() support). */
.kpi-card-v2::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
}

.kpi-card-v2:has(.kpi-icon--primary)::before { background: var(--color-primary); }
.kpi-card-v2:has(.kpi-icon--success)::before { background: var(--color-success); }
.kpi-card-v2:has(.kpi-icon--warning)::before { background: var(--color-warning); }
.kpi-card-v2:has(.kpi-icon--info)::before    { background: var(--color-info); }
.kpi-card-v2:has(.kpi-icon--danger)::before  { background: var(--color-danger); }

.kpi-card-v2-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.kpi-icon--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.kpi-icon--success { background: var(--color-success-soft); color: var(--color-success); }
.kpi-icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.kpi-icon--info    { background: var(--color-primary-soft); color: var(--color-info); }
.kpi-icon--danger  { background: var(--color-danger-soft); color: var(--color-danger); }

.kpi-card-v2 .kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.05;
}

.kpi-card-v2 .kpi-label {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.kpi-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.kpi-sub strong { color: var(--color-text); font-weight: 600; }

.kpi-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    overflow: hidden;
}

.kpi-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ---------------------------------------------------------------- */
/* Dashboard: chart + panel cards                                    */
/* ---------------------------------------------------------------- */

.panel-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.9rem;
}

.chart-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.chart-card:hover {
    box-shadow: var(--shadow-card);
    border-color: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
}

.chart-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.chart-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.15rem;
}

.chart-card-subtitle {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    margin: 0;
}

.chart-card-body { position: relative; flex: 1; min-height: 0; }

.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.7rem;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bar-list-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
}

.bar-list-label {
    width: 84px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-list-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    overflow: hidden;
}

.bar-list-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
}

.bar-list-value {
    width: 34px;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
}

.commitment-ring-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.commitment-ring {
    position: relative;
    width: 108px;
    height: 108px;
    flex-shrink: 0;
}

.commitment-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.commitment-ring-value strong { font-size: 1.15rem; color: var(--color-text); line-height: 1; }
.commitment-ring-value span { font-size: 0.64rem; color: var(--color-text-muted); margin-top: 0.15rem; }

.commitment-stats { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }

.commitment-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
}

.commitment-stat-row .label { color: var(--color-text-muted); display: flex; align-items: center; gap: 0.4rem; }
.commitment-stat-row .value { font-weight: 700; color: var(--color-text); }

/* ---------------------------------------------------------------- */
/* Dashboard: Nigeria coverage cartogram + drill-down                */
/* ---------------------------------------------------------------- */

.map-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.map-card:hover {
    box-shadow: var(--shadow-card);
    border-color: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
}

.map-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.map-back-btn {
    display: none;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.map-card.is-drilled .map-back-btn { display: inline-flex; }
.map-card.is-drilled .map-svg-wrap { display: none; }
.map-card:not(.is-drilled) .drill-panel { display: none; }

.map-svg-wrap { width: 100%; overflow: hidden; }

.map-svg-wrap svg { width: 100%; height: auto; display: block; }

.map-tile {
    stroke: var(--color-surface);
    stroke-width: 3;
    cursor: pointer;
    transition: opacity 0.12s ease, filter 0.12s ease, stroke-width 0.12s ease;
}

.map-tile:hover { opacity: 0.82; }

.map-tile.is-unconfigured {
    fill: var(--map-empty) !important;
    stroke-dasharray: 3 3;
    cursor: default;
}

.map-tile.is-unconfigured:hover { opacity: 1; }

/* Real traced state boundaries (App\Libraries\NigeriaGeoMap) render as thin
   outlined shapes rather than the grid's uniform rounded squares. */
.map-tile--geo {
    stroke: var(--color-surface);
    stroke-width: 0.75;
    stroke-linejoin: round;
}

.map-tile--geo:hover {
    opacity: 1;
    filter: brightness(1.12) drop-shadow(0 2px 4px rgba(16, 24, 40, 0.25));
    stroke-width: 1.5;
    stroke: var(--color-primary);
}

.map-tile--geo.is-unconfigured {
    stroke-dasharray: none;
}

.map-svg-wrap--geo svg { max-height: 420px; }

.map-mode-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.map-mode-note code {
    font-size: 0.7rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    color: var(--color-text);
}

.map-tile-label {
    font-size: 9px;
    font-weight: 700;
    fill: var(--color-text);
    pointer-events: none;
    text-anchor: middle;
}

.map-tooltip {
    position: fixed;
    z-index: 1200;
    pointer-events: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
    min-width: 150px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

.map-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.map-tooltip-title { font-weight: 700; color: var(--color-text); margin-bottom: 0.2rem; }
.map-tooltip-row { display: flex; justify-content: space-between; gap: 0.6rem; color: var(--color-text-muted); }
.map-tooltip-row strong { color: var(--color-text); }

.map-scale {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-top: 0.6rem;
}

.map-scale-swatch { width: 14px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.drill-panel-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.15rem;
}

.drill-panel-subtitle {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.drill-lga-list {
    max-height: 360px;
    overflow-y: auto;
}

.drill-panel-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.drill-panel-body .drill-lga-list {
    flex: 1 1 55%;
    min-width: 0;
}

.drill-lga-map {
    flex: 1 1 45%;
    min-width: 0;
    align-self: stretch;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drill-lga-map svg { width: 100%; height: auto; max-height: 340px; display: block; }

.drill-lga-tile {
    stroke: var(--color-surface-alt);
    stroke-width: 2;
    cursor: pointer;
    transition: opacity 0.12s ease, stroke-width 0.12s ease;
}

.drill-lga-tile:hover,
.drill-lga-tile.is-hovered {
    opacity: 0.82;
    stroke: var(--color-primary);
    stroke-width: 2.5;
}

.drill-lga-tile-label {
    font-size: 6px;
    font-weight: 700;
    fill: var(--color-text);
    pointer-events: none;
    text-anchor: middle;
}

/* Real traced LGA boundaries (App\Libraries\Geo\Lga\LgaMapRegistry) render
   as thin outlined shapes, same treatment as the top-level map's own
   .map-tile--geo, in place of the grid's uniform rounded squares. */
.drill-lga-tile--geo {
    stroke: var(--color-surface-alt);
    stroke-width: 0.6;
    stroke-linejoin: round;
}

.drill-lga-tile--geo:hover,
.drill-lga-tile--geo.is-hovered {
    stroke: var(--color-primary);
    stroke-width: 1.2;
}

.drill-map-mode-note {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.drill-lga-map-empty {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 1.5rem 0.5rem;
}

@media (max-width: 767.98px) {
    .drill-panel-body { flex-direction: column; }
    .drill-panel-body .drill-lga-list,
    .drill-lga-map { flex: 1 1 auto; width: 100%; }
}

.drill-lga-empty {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.drill-lga-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.4rem;
    margin: 0 -0.4rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color .12s ease;
}

.drill-lga-row:hover,
.drill-lga-row.is-hovered { background: var(--color-surface-alt); text-decoration: none; }
.drill-lga-row:last-child { border-bottom: none; }

.drill-lga-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drill-lga-stats {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.drill-lga-stats span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.drill-lga-stats i { font-size: 0.78rem; }

.map-card-eyebrow {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Chart.js canvas needs an explicit-height positioned ancestor or it grows unbounded. */
.chart-canvas-wrap { position: relative; width: 100%; height: 200px; }
.chart-canvas-wrap--sm { height: 168px; }

/* ---------------------------------------------------------------- */
/* Dashboard: recent-activity timeline                                */
/* ---------------------------------------------------------------- */

.activity-list { display: flex; flex-direction: column; }

.activity-row {
    display: flex;
    gap: 0.65rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.activity-row:last-child { border-bottom: none; }

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-top: 0.4rem;
    flex-shrink: 0;
}

.activity-text { font-size: 0.8rem; color: var(--color-text); margin: 0; }
.activity-text strong { font-weight: 600; }
.activity-meta { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.1rem; }

.activity-empty {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

@media (min-width: 992px) {
    .panel-col-8 { grid-column: span 8; }
    .panel-col-6 { grid-column: span 6; }
    .panel-col-5 { grid-column: span 5; }
    .panel-col-4 { grid-column: span 4; }
    .panel-col-3 { grid-column: span 3; }
    .panel-col-7 { grid-column: span 7; }
    .panel-col-12 { grid-column: span 12; }
}

@media (max-width: 991.98px) {
    .panel-grid > * { grid-column: span 12 !important; }
}
/* ---------------------------------------------------------------- */
/* Advanced polish pass: themed scrollbars + restrained entrance      */
/* ---------------------------------------------------------------- */

/* Thin, theme-aware scrollbars wherever the app scrolls its own
   sub-regions (sidebar nav, notification list, drill-down list) instead
   of the browser's bulky default — a small but consistent detail in
   every modern analytics product. */
.app-sidebar,
.notification-list,
.drill-lga-list,
.map-svg-wrap--geo,
.app-content {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent) transparent;
}

.app-sidebar::-webkit-scrollbar,
.notification-list::-webkit-scrollbar,
.drill-lga-list::-webkit-scrollbar,
.app-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.app-sidebar::-webkit-scrollbar-thumb,
.notification-list::-webkit-scrollbar-thumb,
.drill-lga-list::-webkit-scrollbar-thumb,
.app-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
    border-radius: 999px;
}

.app-sidebar::-webkit-scrollbar-track,
.notification-list::-webkit-scrollbar-track,
.drill-lga-list::-webkit-scrollbar-track,
.app-content::-webkit-scrollbar-track {
    background: transparent;
}

/* Restrained one-time entrance for the KPI row and the two panel grids
   below it — a soft fade/rise, staggered by column, so the dashboard
   reads as "live" on first paint without turning into a distraction on
   every subsequent interaction (spec section 44: fast and controlled,
   not over-animated). Runs once per page load; nothing re-triggers it. */
@media (prefers-reduced-motion: no-preference) {
    .kpi-card-v2,
    .panel-grid > * {
        animation: dashFadeUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .kpi-grid .kpi-card-v2:nth-child(1) { animation-delay: 0.02s; }
    .kpi-grid .kpi-card-v2:nth-child(2) { animation-delay: 0.06s; }
    .kpi-grid .kpi-card-v2:nth-child(3) { animation-delay: 0.10s; }
    .kpi-grid .kpi-card-v2:nth-child(4) { animation-delay: 0.14s; }
    .kpi-grid .kpi-card-v2:nth-child(5) { animation-delay: 0.18s; }
    .kpi-grid .kpi-card-v2:nth-child(6) { animation-delay: 0.22s; }

    .panel-grid { animation: none; }
    .panel-grid > * { animation-delay: 0.08s; }
}

@keyframes dashFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar brand mark gets the same soft ring treatment as the account
   avatar so the two "identity" glyphs in the shell read as one family. */
.sidebar-brand-mark {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* ================================================================== */
/* Command Center redesign — BI-grade visual language                 */
/* Additive layer: overrides the base rules above via source order,   */
/* nothing removed so every existing hook (JS selectors, data attrs)  */
/* keeps working unchanged.                                            */
/* ================================================================== */

:root {
    /* Kept as custom properties for the selectors below, but resolved to
       solid party-brand colors — no gradients anywhere in the app. */
    --accent-gradient: var(--color-primary);
    --surface-gradient: var(--color-surface);
}

body { font-size: 0.895rem; }

/* ---- Sidebar: denser, branded, glassy ---- */

.app-sidebar {
    background: var(--surface-gradient);
    padding: 0.9rem 0.65rem;
    border-right: 1px solid var(--color-border);
}

.sidebar-brand {
    padding: 0.3rem 0.5rem 1.1rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-brand-mark {
    background: var(--accent-gradient);
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.sidebar-section-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 1.15rem 0 0.35rem;
    opacity: 0.75;
}

.app-sidebar .nav-link {
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    gap: 0.65rem;
    font-weight: 500;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.app-sidebar .nav-link i {
    font-size: 0.9rem;
    width: 23px;
    height: 23px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.14s ease, color 0.14s ease;
}

.app-sidebar .nav-link:hover {
    background: var(--color-surface-alt);
    transform: translateX(1px);
}

.app-sidebar .nav-link:hover i {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.app-sidebar .nav-link.active {
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.app-sidebar .nav-link.active i {
    background: var(--accent-gradient);
    color: #fff;
}

.app-sidebar .nav-link.active::before { display: none; }

/* ---- Header: subtle depth ---- */

.app-header {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.app-header-heading {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.app-content { padding: 1.1rem 1.25rem 1.75rem; }

/* ---- KPI strip: gradient badges, tighter grid, more presence ---- */

.kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.kpi-card-v2 {
    padding: 0.9rem 1rem 0.95rem;
    border-radius: 12px;
    gap: 0.5rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.kpi-card-v2::before {
    height: 100%;
    width: 3px;
    border-radius: 12px 0 0 12px;
    background: var(--color-border);
}

.kpi-card-v2:has(.kpi-icon--primary)::before { background: var(--color-primary); }
.kpi-card-v2:has(.kpi-icon--success)::before { background: var(--color-success); }
.kpi-card-v2:has(.kpi-icon--warning)::before { background: var(--color-warning); }
.kpi-card-v2:has(.kpi-icon--info)::before    { background: var(--color-info); }
.kpi-card-v2:has(.kpi-icon--danger)::before  { background: var(--color-danger); }

.kpi-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
}

.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.95rem;
}

.kpi-icon--primary { background: var(--color-primary); color: #fff; }
.kpi-icon--success { background: var(--color-success); color: #fff; }
.kpi-icon--warning  { background: var(--color-warning); color: #fff; }
.kpi-icon--info     { background: var(--color-info); color: #fff; }
.kpi-icon--danger   { background: var(--color-danger); color: #fff; }

.kpi-card-v2 .kpi-value {
    font-size: 1.55rem;
    letter-spacing: -0.02em;
}

.kpi-card-v2 .kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
}

.kpi-sub { font-size: 0.7rem; }

.kpi-bar { height: 5px; }

/* ---- Chart / panel cards: fill their space with intent ---- */

.panel-grid { gap: 0.85rem; }

.chart-card {
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    min-height: 260px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.chart-card:hover { box-shadow: var(--shadow-card); }

.chart-card-title {
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.chart-card-subtitle { font-size: 0.72rem; }

.chart-card-head { margin-bottom: 0.75rem; }

.map-card {
    min-height: 260px;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 12px;
}

/* Designed empty state — replaces bare "No data yet" text so a card with
   no records still reads as a finished module, not a broken one. Compact
   and identical in scale across every card (KPI-adjacent icon size,
   shared padding/radius), with an actionable link into the screen that
   would populate it — using the freed-up space for something useful
   instead of just a placeholder. */
.chart-empty {
    flex: 1;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1rem 0.9rem;
    border: 1.5px dashed var(--color-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-surface-alt) 60%, transparent);
}

.chart-empty--sm { min-height: 100px; }

.chart-empty-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.95rem;
}

.chart-empty-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.chart-empty-text {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 240px;
}

.chart-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.12s ease, transform 0.12s ease;
}

.chart-empty-cta:hover {
    background: var(--accent-gradient);
    color: #fff;
    transform: translateY(-1px);
}

.chart-empty-cta i { font-size: 0.68rem; }

.commitment-ring-wrap { min-height: 92px; }

.title-chip {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.68rem;
    flex-shrink: 0;
}

/* KPI value + welcome heading get a touch more character */
.h4 { letter-spacing: -0.01em; }

/* Map card empty tiles read as part of the design, not blank gaps */
.map-svg-wrap { border-radius: 10px; overflow: hidden; }
/* Offline-first PWA (spec sections 17/18/47): header sync indicator, install
   button spacing, and the optimistic "queued offline" row offline-forms.js inserts. */
.sync-indicator-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid var(--color-border);
}
.sync-indicator-chip:hover { color: var(--color-primary); border-color: var(--color-primary); }
.sync-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger);
    flex-shrink: 0;
}
.sync-indicator-chip.is-online .sync-indicator-dot { background: var(--color-success); }
.sync-indicator-chip.is-offline .sync-indicator-dot { background: var(--color-danger); }

.offline-queued-row { animation: adc-fade-in .2s ease-in; }
@keyframes adc-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- */
/* List-page filter toolbar — wraps a GET filter form in a card so   */
/* it reads as a designed module instead of bare controls floating   */
/* on the page background (used across the ops/org/geo index pages). */
/* ---------------------------------------------------------------- */
.toolbar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.75rem 0.9rem;
}

.toolbar-card .form-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}
/* ---------------------------------------------------------------- */
/* Entity cards — clickable summary cards for browsing a hierarchy   */
/* (geography: zones/states/constituencies/LGAs/wards/polling units, */
/* and support groups). Whole card links to the record's detail page */
/* via .entity-card-link (Bootstrap's stretched-link); any inline    */
/* admin actions sit in .entity-card-actions, raised above the       */
/* stretched link (z-index) so edit/delete keep working independently. */
/* ---------------------------------------------------------------- */
.entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.9rem;
}

.entity-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.entity-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.entity-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.entity-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    flex-shrink: 0;
}

.entity-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.entity-card-title {
    font-weight: 600;
    font-size: 0.96rem;
    color: var(--color-text);
    line-height: 1.25;
}

.entity-card-link {
    color: inherit;
    text-decoration: none;
}

.entity-card-link:hover { color: var(--color-primary); }

.entity-card-subtitle {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.entity-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.1rem;
}

.entity-card-stat {
    display: flex;
    flex-direction: column;
}

.entity-card-stat strong {
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.15;
}

.entity-card-stat span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.entity-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border);
}

.entity-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0.3rem;
}

.entity-card-chevron {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.entity-card:hover .entity-card-chevron { color: var(--color-primary); }

/* Bulk-select checkbox overlay for entity cards (e.g. support groups'   */
/* index grid — see org/groups/index.php). Raised above the stretched   */
/* link, same as .entity-card-actions, so checking a box never navigates. */
.entity-card-select {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
}

.entity-card-select .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.entity-card--selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* ================================================================== */
/* Global UI Repolish — Bootstrap component harmonization             */
/*                                                                    */
/* Everything above this line already routes through the app's own   */
/* --color-* tokens. Bootstrap's compiled defaults (bootstrap.min.css)*/
/* never picked those up: every .btn-primary, form focus ring,        */
/* badge, alert, dropdown/list-group/pagination "active" state, and   */
/* progress bar was still shipping stock Bootstrap blue (#0d6efd)     */
/* underneath the ADC-green shell, sidebar and KPI cards. That split  */
/* is the inconsistency this pass removes: every color below is a     */
/* solid reference back to the tokens already defined at the top of   */
/* this file, so light/dark mode continue to work with no extra       */
/* wiring, and every ordinary CRUD screen (orgs, tasks, geo, admin)    */
/* now reads as the same product as the dashboard.                    */
/* ================================================================== */

:root, [data-bs-theme="light"] {
    /* Core semantic remap: alerts, text-bg-*/bg-* utilities, subtle   */
    /* badges, list-group-item-*, and focus rings all key off these.  */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 10, 107, 58;
    --bs-primary-text-emphasis: var(--color-primary-hover);
    --bs-primary-bg-subtle: var(--color-primary-soft);
    --bs-primary-border-subtle: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));

    --bs-success: var(--color-success);
    --bs-success-rgb: 27, 138, 90;
    --bs-success-text-emphasis: var(--color-success);
    --bs-success-bg-subtle: var(--color-success-soft);
    --bs-success-border-subtle: color-mix(in srgb, var(--color-success) 35%, var(--color-border));

    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 216, 31, 31;
    --bs-danger-text-emphasis: var(--color-danger);
    --bs-danger-bg-subtle: var(--color-danger-soft);
    --bs-danger-border-subtle: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));

    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 185, 119, 14;
    --bs-warning-text-emphasis: var(--color-warning);
    --bs-warning-bg-subtle: var(--color-warning-soft);
    --bs-warning-border-subtle: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));

    --bs-info: var(--color-info);
    --bs-info-rgb: 47, 127, 234;
    --bs-info-text-emphasis: var(--color-info);
    --bs-info-bg-subtle: color-mix(in srgb, var(--color-info) 14%, var(--color-surface));
    --bs-info-border-subtle: color-mix(in srgb, var(--color-info) 35%, var(--color-border));

    --bs-secondary: var(--color-text-muted);
    --bs-secondary-rgb: 107, 114, 128;

    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 10, 107, 58;
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-hover-color-rgb: 10, 107, 58;
    --bs-focus-ring-color: color-mix(in srgb, var(--color-primary) 25%, transparent);

    /* Base surface/text/border/radius so plain .form-control, .card,   */
    /* .modal-content, .dropdown-menu etc. (all var-driven already in   */
    /* Bootstrap's own compiled CSS) fall in line with the app shell.   */
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-surface);
    --bs-emphasis-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border);
    --bs-secondary-bg: var(--color-surface-alt);
    --bs-tertiary-bg: var(--color-surface-alt);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--radius);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bs-primary-rgb: 63, 191, 122;
        --bs-success-rgb: 63, 191, 133;
        --bs-danger-rgb: 226, 86, 79;
        --bs-warning-rgb: 224, 166, 58;
        --bs-info-rgb: 110, 164, 247;
        --bs-secondary-rgb: 151, 160, 187;
        --bs-link-color-rgb: 63, 191, 122;
        --bs-link-hover-color-rgb: 63, 191, 122;
    }
}

:root[data-theme="dark"] {
    --bs-primary-rgb: 63, 191, 122;
    --bs-success-rgb: 63, 191, 133;
    --bs-danger-rgb: 226, 86, 79;
    --bs-warning-rgb: 224, 166, 58;
    --bs-info-rgb: 110, 164, 247;
    --bs-secondary-rgb: 151, 160, 187;
    --bs-link-color-rgb: 63, 191, 122;
    --bs-link-hover-color-rgb: 63, 191, 122;
}

/* ---- Buttons: solid brand color, one shared modern feel ---- */
/* (Bootstrap bakes literal hex into each --bs-btn-* on these classes  */
/* at build time, so the root remap above can't reach them — each one  */
/* is restated here against the same tokens.)                         */

.btn {
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

.btn:not(.btn-sm):not(.btn-lg) { padding: 0.45rem 0.9rem; }

.btn:active { transform: translateY(1px); }

.btn-primary, .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-success, .btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active {
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 84%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-success) 84%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-success) 78%, black);
}

.btn-outline-success {
    --bs-btn-color: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-danger, .btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active {
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 84%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 84%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-danger) 78%, black);
}

.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-warning, .btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning.active {
    --bs-btn-bg: var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-warning) 84%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-warning) 84%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-warning) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-warning) 78%, black);
}

.btn-outline-warning {
    --bs-btn-color: var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-info, .btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info.active {
    --bs-btn-bg: var(--color-info);
    --bs-btn-border-color: var(--color-info);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-info) 84%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-info) 84%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-info) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-info) 78%, black);
}

.btn-outline-info {
    --bs-btn-color: var(--color-info);
    --bs-btn-border-color: var(--color-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active {
    --bs-btn-bg: var(--color-text-muted);
    --bs-btn-border-color: var(--color-text-muted);
    --bs-btn-hover-bg: var(--color-text);
    --bs-btn-hover-border-color: var(--color-text);
    --bs-btn-active-bg: var(--color-text);
    --bs-btn-active-border-color: var(--color-text);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-text-muted);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-link { --bs-btn-color: var(--color-primary); --bs-btn-hover-color: var(--color-primary-hover); }

.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-secondary:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

/* ---- Forms: same focus language everywhere (inputs, selects,       */
/* checkboxes, radios, switches, range sliders)                       */

.form-control, .form-select {
    border-radius: var(--radius-sm);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

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

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-range::-webkit-slider-thumb { background-color: var(--color-primary); }
.form-range::-moz-range-thumb { background-color: var(--color-primary); }

/* ---- Active/selected states that Bootstrap bakes in as literal hex */
/* on the component itself rather than through the root variables:    */
/* dropdown items, pills, list-group rows, pagination, progress bars  */

.dropdown-menu { --bs-dropdown-link-active-bg: var(--color-primary); --bs-dropdown-link-active-color: #fff; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--color-primary); --bs-nav-pills-link-active-color: #fff; }
.list-group-item.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.pagination {
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-hover-color: var(--color-primary-hover);
    --bs-pagination-border-radius: var(--radius-sm);
}
.progress-bar { background-color: var(--color-primary); }
.accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background-color: var(--color-primary-soft);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* ---- Cards, tables, alerts: quieter borders, tighter radius scale, */
/* a touch of lift on interactive rows/cards for a more "advanced"    */
/* feel, without introducing a single gradient.                      */

.card {
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: var(--radius);
}

.table > tbody > tr:hover > * {
    background-color: var(--color-surface-alt);
}

.alert {
    border-radius: var(--radius-sm);
    border-width: 1px;
}

.modal-content {
    border-radius: var(--radius);
    border-color: var(--color-border);
}

.modal-header { border-bottom-color: var(--color-border); }
.modal-footer { border-top-color: var(--color-border); }

.toast, .offcanvas {
    border-radius: var(--radius);
}

/* ================================================================== */
/* Header: "Install app" chip + language switch                       */
/* ================================================================== */

/* Solid brand color, no gradient — same soft/solid pattern as the KPI  */
/* icons above. Starts as the soft tint so it doesn't shout, and only   */
/* on hover commits to the solid fill + lift. A once-every-few-seconds  */
/* breathing ring (paused for prefers-reduced-motion) is the only cue   */
/* that this is worth a look, since it only ever appears when the      */
/* browser has actually offered to install the app.                    */

.app-install-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem 0.4rem 0.55rem;
    border-radius: 999px;
    line-height: 1;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.app-install-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.app-install-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
    animation: installChipPulse 3.2s ease-out infinite;
    pointer-events: none;
}

@keyframes installChipPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 35%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 0%, transparent); }
}

.app-install-chip:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

.app-install-chip:hover .app-install-chip-icon {
    background: #fff;
    color: var(--color-primary);
}

.app-install-chip:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .app-install-chip::before { animation: none; }
}

/* Language switch — same pill family as theme-switch, sitting right    */
/* beside it in the header and again in the login-screen corner stack. */

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 0.65rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.lang-switch:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.lang-switch[aria-expanded="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.lang-switch-code { line-height: 1; }

.lang-switch-menu {
    min-width: 200px;
    padding: 0.35rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.lang-switch-menu .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    font-size: 0.86rem;
}

.lang-switch-menu .dropdown-item + .dropdown-item { margin-top: 0.1rem; }

.lang-switch-item-code {
    display: inline-block;
    width: 26px;
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.lang-switch-menu .dropdown-item.active .lang-switch-item-code,
.lang-switch-menu .dropdown-item.active {
    color: var(--color-primary);
}

.lang-switch-menu .dropdown-item.active i { color: var(--color-primary); }

/* ================================================================== */
/* Sidebar: scrollable nav + pinned account footer                    */
/*                                                                    */
/* Restructures .app-sidebar into a flex column so the permission-    */
/* gated nav list (layout/nav.php) scrolls independently in           */
/* .sidebar-scroll while the signed-in account block                  */
/* (layout/sidebar_user.php) stays pinned to the bottom of the rail — */
/* the same "who am I, signed in as" footer pattern modern dashboards */
/* (Linear, Notion, Vercel) use instead of burying identity only in   */
/* the header. Solid colors only — no gradients, per the design       */
/* system note above the Command Center section.                     */
/* ================================================================== */

.app-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.9rem 0.65rem 0.5rem;
}

.sidebar-user {
    flex-shrink: 0;
    padding: 0.55rem 0.65rem 0.85rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.sidebar-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.45rem;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease;
}

.sidebar-user-trigger:hover,
.sidebar-user-trigger[aria-expanded="true"] {
    background: var(--color-surface-alt);
}

.sidebar-user-avatar { flex-shrink: 0; }

.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-caret {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.sidebar-user-menu {
    min-width: 230px;
    padding: 0.35rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.sidebar-user-menu .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
}

.sidebar-user-menu .dropdown-item + .dropdown-item { margin-top: 0.05rem; }

/* Collapsed rail: icon-only avatar, same treatment as the collapsed nav. */
:root[data-sidebar="collapsed"] .app-sidebar .sidebar-user-meta,
:root[data-sidebar="collapsed"] .app-sidebar .sidebar-user-caret {
    display: none;
}

:root[data-sidebar="collapsed"] .app-sidebar .sidebar-user-trigger {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

:root[data-sidebar="collapsed"] .app-sidebar .sidebar-user {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

/* ================================================================== */
/* My Profile page                                                    */
/*                                                                    */
/* Solid-color hero card, quick-stat strip, pill-tab sections          */
/* (Overview / Personal Info / Security / Roles & Access / Activity)   */
/* built from the same .card/.btn/.nav-pills/.status-pill/             */
/* .notification-item language already used everywhere else, so it     */
/* reads as part of the app rather than a bolted-on settings screen.   */
/* ================================================================== */

.avatar-xl { width: 76px; height: 76px; font-size: 1.6rem; }
.avatar-xl.avatar--online::after { width: 15px; height: 15px; right: 2px; bottom: 2px; }

.profile-hero {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.35rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
}

.profile-hero-avatar {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.profile-hero-body {
    flex: 1 1 260px;
    min-width: 0;
}

.profile-hero-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0 0 0.2rem;
}

.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.profile-hero-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

.profile-hero-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.profile-stat-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.profile-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.profile-stat-card--success .profile-stat-icon { background: var(--color-success-soft); color: var(--color-success); }
.profile-stat-card--warning .profile-stat-icon { background: var(--color-warning-soft); color: var(--color-warning); }
.profile-stat-card--info .profile-stat-icon    { background: color-mix(in srgb, var(--color-info) 14%, var(--color-surface)); color: var(--color-info); }

.profile-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
}

.profile-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.profile-tabs.nav-pills {
    gap: 0.35rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.profile-tabs .nav-link {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-tabs .nav-link:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }

.profile-tabs .nav-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.profile-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1.2rem;
}

.profile-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.profile-panel-subtitle {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}

.profile-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
}

.profile-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.profile-info-row:first-child { padding-top: 0; }

.profile-info-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.profile-info-label i { width: 16px; text-align: center; }

.profile-info-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
}

.profile-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.profile-role-row + .profile-role-row { margin-top: 0.6rem; }

.profile-role-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.profile-role-name { font-size: 0.85rem; font-weight: 700; color: var(--color-text); }
.profile-role-scope { font-size: 0.74rem; color: var(--color-text-muted); }

.profile-empty {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.profile-empty i { display: block; font-size: 1.4rem; margin-bottom: 0.4rem; }

@media (max-width: 575.98px) {
    .profile-hero { flex-direction: column; align-items: flex-start; text-align: left; }
    .profile-hero-actions { margin-left: 0; }
    .profile-info-row { flex-direction: column; gap: 0.2rem; }
    .profile-info-value { text-align: left; }
}