/* v1 Design Tokens */
:root {
    /* typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* map to Bootstrap so components auto-inherit */
    --bs-body-font-family: var(--font-sans);
    --bs-font-monospace: var(--font-mono);
    --bs-body-bg: var(--surface-0);
    --bs-body-color: var(--text-1);
    --bs-border-color: var(--border);
    /* base (light) */
    --text-1: #111;
    --text-2: #666;
    --surface-0: #f7f7f8; /* page bg */
    --surface-1: #ffffff; /* cards */
    --surface-2: #f0f2f4; /* elevated */
    --border: rgba(0,0,0,0.12);
    /* Map to Bootstrap so components auto-adapt */
    --bs-card-bg: var(--surface-1);
    --bs-card-border-color: var(--border);
    /* Tables */
    --bs-table-bg: var(--surface-1);
    --bs-table-color: var(--text-1);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text-1);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text-1);
    --bs-table-border-color: var(--border);
    /* Alerts */
    --bs-alert-bg: var(--surface-1);
    --bs-alert-color: var(--text-1);
    --bs-alert-border-color: var(--border);
    --bs-dropdown-bg: var(--surface-1);
    --bs-dropdown-link-color: var(--text-1);
    --bs-dropdown-link-hover-bg: var(--surface-2);
    --bs-navbar-color: var(--text-1);
    --bs-navbar-hover-color: var(--text-1);
    --bs-primary: var(--accent);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: color-mix(in oklab, var(--accent), #000 20%);
    /* accent (default: blue) */
    --accent: #2563eb; /* blue-600 */
    --accent-contrast: #ffffff;
    /* states */
    --ok: #16a34a;
    --warn: #d97706;
    --danger: #dc2626;
    /* radii */
    --radius-lg: 1rem; /* ~ rounded-4 */
    --radius-pill: 9999px;
    /* shadows */
    --shadow-1: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-2: 0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.06);
    /* spacing (base) */
    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
}

    /* Dark theme overrides */
    :root[data-theme="dark"] {
        --text-1: #f5f5f5;
        --text-2: #c8c8c8;
        --surface-0: #0e1114;
        --surface-1: #12161a;
        --surface-2: #1a2026;
        --border: rgba(255,255,255,0.16);
        /* Bootstrap mappings in dark */
        --bs-body-bg: var(--surface-0);
        --bs-body-color: var(--text-1);
        --bs-border-color: var(--border);
        --bs-card-bg: var(--surface-1);
        --bs-card-border-color: var(--border);
        /* Tables */
        --bs-table-bg: var(--surface-1);
        --bs-table-color: var(--text-1);
        --bs-table-striped-bg: var(--surface-2);
        --bs-table-striped-color: var(--text-1);
        --bs-table-hover-bg: var(--surface-2);
        --bs-table-hover-color: var(--text-1);
        --bs-table-border-color: var(--border);
        /* Alerts */
        --bs-alert-bg: var(--surface-1);
        --bs-alert-color: var(--text-1);
        --bs-alert-border-color: var(--border);
        /* --- Dark-mode alert overrides (no nesting) --- */
        : root[data-theme="dark"] .alert-info
        {
            --bs-alert-bg: var(--surface-1);
            --bs-alert-color: var(--text-1);
            --bs-alert-border-color: var(--border);
        }

        :root[data-theme="dark"] .alert-warning {
            --bs-alert-bg: var(--surface-1);
            --bs-alert-color: var(--text-1);
            --bs-alert-border-color: var(--border);
        }

        --bs-dropdown-bg: var(--surface-1);
        --bs-dropdown-link-color: var(--text-1);
        --bs-dropdown-link-hover-bg: var(--surface-2);
        --bs-navbar-color: var(--text-1);
        --bs-navbar-hover-color: var(--text-1);
        --bs-link-color: var(--accent);
        --bs-link-hover-color: color-mix(in oklab, var(--accent), #fff 12%);
        /* keep states readable in dark */
        --ok: #22c55e;
        --warn: #f59e0b;
        --danger: #ef4444;
}

/* Accent variants */
    :root[data-accent="teal"] {
        --accent: #0d9488;
    }

    :root[data-accent="indigo"] {
        --accent: #4f46e5;
    }

    :root[data-accent="emerald"] {
        --accent: #059669;
    }

    :root[data-accent="rose"] {
        --accent: #e11d48;
    }

    :root[data-accent="amber"] {
        --accent: #d97706;
    }

/* Compact spacing */
:root[data-compact="1"] {
    /* global spacing tokens */
    --space-1: .25rem;
    --space-2: .4rem;
    --space-3: .65rem;
    /* tighter Bootstrap controls */
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .6rem;
    --bs-border-radius: .3rem;
    --bs-form-control-padding-y: .3rem;
    --bs-form-control-padding-x: .5rem;
    /* table / list density */
    --cb-row-pad-y: .25rem;
    --cb-row-pad-x: .4rem;
}

/* opt-in utilities that consume compact vars */
.cb-dense-row > * {
    padding: var(--cb-row-pad-y) var(--cb-row-pad-x);
}

/* Extra visible compact tweaks */
:root[data-compact="1"] body {
    font-size: 0.92rem;
}

:root[data-compact="1"] .table td,
:root[data-compact="1"] .table th {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

:root[data-compact="1"] .card-body {
    padding: .75rem .9rem;
}

/* Primitive helpers you can reuse in components */
.cb-card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border);
}

.cb-btn-accent {
    background: var(--accent);
    color: var(--accent-contrast);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}

/* Bootstrap-primary maps to our accent */
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-contrast);
}

    .btn-primary:hover,
    .btn-primary:focus {
        --bs-btn-hover-bg: color-mix(in oklab, var(--accent), #000 12%);
        --bs-btn-hover-border-color: color-mix(in oklab, var(--accent), #000 12%);
    }

/* Primary badge/pill (e.g., “Admin”) */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

/* Make links & focus use accent */
a {
    color: var(--accent);
}

    a:hover {
        color: var(--accent);
        filter: brightness(0.95);
    }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Global application defaults driven by tokens */
html, body {
    font-family: var(--font-sans);
    background: var(--surface-0);
    color: var(--text-1);
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
}

/* Muted text helper matches tokens */
.text-muted, small, .muted {
    color: var(--text-2) !important;
}

/* --- Styles Migrated from site.css --- */

/*
 Make the base .card theme-aware.
 This is for older components that don't use the .cb-card utility.
*/
.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    /* Use Bootstrap 5's default radius */
    border-radius: var(--bs-border-radius);
}

.card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

/* Tokenized AppNotify Modal Icons */
.appnotify-success {
    color: var(--ok);
    font-size: 1.25rem;
}

.appnotify-info {
    color: var(--accent); /* Mapped to accent */
    font-size: 1.25rem;
}

.appnotify-warn {
    color: var(--warn);
    font-size: 1.25rem;
}

.appnotify-error {
    color: var(--danger);
    font-size: 1.25rem;
}

/* Page Transition Overlay (already dark-themed, copied as-is) */
.sf-page-transition {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}

.sf-pt-card {
    width: min(520px, 92vw);
    background: #121212;
    color: #eee;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

.sf-pt-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.sf-pt-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: rgba(255,255,255,.9);
    animation: sfspin 0.9s linear infinite;
}

@keyframes sfspin {
    to {
        transform: rotate(360deg);
    }
}

.sf-pt-title {
    font-weight: 600;
}

.sf-pt-sub {
    font-size: .9rem;
    opacity: .75;
}

.sf-pt-bar {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}

.sf-pt-bar-fill {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.6));
    border-radius: 999px;
    animation: sfbar 1.3s ease-in-out infinite;
}

@keyframes sfbar {
    0% {
        transform: translateX(-40%);
    }

    50% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(220%);
    }
}

/* Tokenized navbar toggler (hamburger) */
.navbar-toggler {
    border-color: var(--border);
}

.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
    /* three horizontal bars using the current text color token */
    background-image: linear-gradient(var(--text-1), var(--text-1)), linear-gradient(var(--text-1), var(--text-1)), linear-gradient(var(--text-1), var(--text-1));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: center calc(25%), center 50%, center calc(75%);
}

/* Make navbar links + login/logout follow theme tokens */
.navbar,
.navbar .navbar-nav .nav-link,
.navbar .navbar-text {
    color: var(--text-1) !important;
}

/* Ensure the collapsed mobile panel uses the same surface color */
.navbar-collapse {
    background: var(--surface-1);
}

/* --- End Migration --- */