@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root,
:root[data-theme='light'] {
    color-scheme: light;

    /* Typography */
    --font-sans: 'Manrope', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    /* Unified color palette */
    --primary: #003764;
    --primary-rgb: 0,55,100;
    --on-primary: #ffffff;
    --bg: #f5f7fb;
    --card-bg: #ffffff;
    --text: #162334;
    --muted: #5f6d82;
    --border: #dfe7f2;
    --success: #15803d;
    --link: #1d4ed8;

    /* Extended semantic and tone variables */
    --primary-strong: #004d8a;
    --primary-dark: #002d52;
    --danger: #b91c1c;
    --danger-rgb: 185,28,28;
    --status-ready: #166534;
    --status-warn: #9a3412;
    --warning: #b45309;
    --on-warning: #ffffff;

    /* Surface/elevation */
    --surface-hero: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 55%, var(--primary) 100%);
    --surface-soft: rgba(var(--primary-rgb), 0.06);
    --elev-1: 0 12px 30px rgba(2, 16, 35, 0.08);
    --elev-2: 0 28px 56px rgba(2, 16, 35, 0.14);

    /* Bootstrap semantic text/border variables */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: var(--muted);
    --bs-border-color: var(--border);
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --primary: #0a4f86;
    --primary-rgb: 10,79,134;
    --on-primary: #f8fafc;
    --bg: #0b1320;
    --card-bg: #111c2d;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: #223049;
    --success: #34d399;
    --link: #60a5fa;
    --primary-strong: #0c5d9f;
    --primary-dark: #08385e;
    --danger: #f87171;
    --danger-rgb: 248,113,113;
    --status-ready: #4ade80;
    --status-warn: #fb923c;
    --warning: #fbbf24;
    --on-warning: #111c2d;
    --surface-hero: linear-gradient(135deg, #0a4f86 0%, #0c5d9f 55%, #0a4f86 100%);
    --surface-soft: rgba(var(--primary-rgb), 0.12);
    --elev-1: 0 12px 28px rgba(0, 0, 0, 0.35);
    --elev-2: 0 26px 54px rgba(0, 0, 0, 0.5);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: var(--muted);
    --bs-border-color: var(--border);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;
        --primary: #0a4f86;
        --primary-rgb: 10,79,134;
        --on-primary: #f8fafc;
        --bg: #0b1320;
        --card-bg: #111c2d;
        --text: #e2e8f0;
        --muted: #94a3b8;
        --border: #223049;
        --success: #34d399;
        --link: #60a5fa;
        --primary-strong: #0c5d9f;
        --primary-dark: #08385e;
        --danger: #f87171;
        --danger-rgb: 248,113,113;
        --status-ready: #4ade80;
        --status-warn: #fb923c;
        --warning: #fbbf24;
        --on-warning: #111c2d;
        --surface-hero: linear-gradient(135deg, #0a4f86 0%, #0c5d9f 55%, #0a4f86 100%);
        --surface-soft: rgba(var(--primary-rgb), 0.12);
        --elev-1: 0 12px 28px rgba(0, 0, 0, 0.35);
        --elev-2: 0 26px 54px rgba(0, 0, 0, 0.5);
        --bs-body-bg: var(--bg);
        --bs-body-color: var(--text);
        --bs-secondary-color: var(--muted);
        --bs-tertiary-color: var(--muted);
        --bs-border-color: var(--border);
    }

    /* ================================================================
       Bootstrap component dark-mode overrides
       Bootstrap 5.3 defaults to light colours; these rules make cards,
       forms, tables, modals and other components respect the site's
       dark-mode tokens without requiring data-bs-theme="dark".
       ================================================================ */

    /* --- Cards --- */
    .card {
        background-color: var(--card-bg);
        border-color: var(--border);
        color: var(--text);
    }
    .card-header,
    .card-footer {
        background-color: rgba(0, 0, 0, 0.18);
        border-color: var(--border);
        color: var(--text);
    }

    /* --- Form controls --- */
    .form-control,
    .form-select,
    input,
    textarea,
    select {
        background-color: var(--card-bg);
        border-color: var(--border);
        color: var(--text);
        caret-color: var(--text);
    }
    .form-control:focus,
    .form-select:focus,
    input:focus,
    textarea:focus,
    select:focus {
        background-color: var(--card-bg);
        border-color: var(--primary);
        color: var(--text);
        caret-color: var(--text);
        box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
    }
    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: var(--muted);
        opacity: 1;
    }
    .form-control:disabled,
    .form-select:disabled,
    input:disabled,
    textarea:disabled,
    select:disabled {
        background-color: rgba(0, 0, 0, 0.22);
        color: var(--muted);
        border-color: var(--border);
        -webkit-text-fill-color: var(--muted);
    }
    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus,
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset !important;
        -webkit-text-fill-color: var(--text) !important;
        caret-color: var(--text);
        border-color: var(--border);
        color: var(--text) !important;
    }
    .form-control:-webkit-autofill:focus,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill:focus {
        border-color: var(--primary);
        -webkit-box-shadow:
            0 0 0 1000px var(--card-bg) inset,
            0 0 0 0.25rem rgba(var(--primary-rgb), 0.25) !important;
    }
    .form-check-input {
        background-color: var(--card-bg);
        border-color: var(--border);
    }
    .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    /* --- Tables (override via Bootstrap CSS variables) --- */
    .table {
        --bs-table-bg: var(--card-bg);
        --bs-table-border-color: var(--border);
        --bs-table-color: var(--text);
        --bs-table-hover-bg: rgba(var(--primary-rgb), 0.08);
        --bs-table-hover-color: var(--text);
        color: var(--text);
        border-color: var(--border);
    }
    /* Restyle .table-dark header to use primary brand colour in dark mode */
    .table-dark {
        --bs-table-color: var(--on-primary);
        --bs-table-bg: var(--primary-dark);
        --bs-table-border-color: var(--primary);
    }
    .table-light {
        --bs-table-bg: rgba(var(--primary-rgb), 0.16);
        --bs-table-color: var(--text);
        --bs-table-border-color: var(--border);
    }
    .table > :not(caption) > * {
        border-color: var(--border);
    }

    /* --- Light-toned Bootstrap variants used in admin pages --- */
    .alert-light {
        background-color: rgba(var(--primary-rgb), 0.12);
        border-color: var(--border);
        color: var(--text);
    }
    .btn-light {
        background-color: var(--card-bg);
        border-color: var(--border);
        color: var(--text);
    }
    .btn-light:hover,
    .btn-light:focus {
        background-color: rgba(var(--primary-rgb), 0.12);
        border-color: var(--primary);
        color: var(--text);
    }

    /* --- Modals --- */
    .modal-content {
        background-color: var(--card-bg);
        border-color: var(--border);
        color: var(--text);
    }
    .modal-header,
    .modal-footer {
        border-color: var(--border);
    }

    /* --- Close button (dark SVG → invert for dark bg) --- */
    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* --- Pagination --- */
    .page-link {
        background-color: var(--card-bg);
        border-color: var(--border);
        color: var(--link);
    }
    .page-link:hover {
        background-color: rgba(var(--primary-rgb), 0.12);
        border-color: var(--border);
        color: var(--link);
    }
    .page-item.active .page-link {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--on-primary);
    }
    .page-item.disabled .page-link {
        background-color: var(--bg);
        border-color: var(--border);
        color: var(--muted);
    }

    /* --- Inline code --- */
    code,
    pre {
        color: #f8fafc;
        background-color: rgba(15, 23, 42, 0.85);
    }
}