/*
 * Shared dark theme for every page (matches the main dashboard, index.html).
 *
 * Link it BEFORE a page's own <style>, and set <html data-bs-theme="dark"> so Bootstrap 5.3
 * components (tables, forms, modals, dropdowns) are dark too:
 *   <html lang="en" data-bs-theme="dark">
 *   <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
 * Pages style themselves with the tokens below instead of raw colours.
 */
:root {
    color-scheme: dark;

    /* Surfaces */
    --bg: #081229;
    --bg-end: #071028;
    --bg-gradient: linear-gradient(180deg, #081229 0%, #071028 70%);
    --surface: rgba(255, 255, 255, 0.04);           /* cards */
    --surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    --surface-2: rgba(255, 255, 255, 0.06);         /* inputs, chips, nested boxes */
    --surface-hover: rgba(255, 255, 255, 0.09);
    --surface-solid: #0c1a33;                       /* sticky table heads, tooltips, menus */
    --surface-raised: #0f1f3d;                      /* modals, popovers */
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Text */
    --text: #e6eef8;
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    --text-on-accent: #ffffff;

    /* Brand / accents */
    --accent: #60a5fa;                              /* links, numbers, focus (some pages redefine --accent) */
    --link: #60a5fa;                                /* theme.css's own rules use these, never --accent */
    --link-hover: #93c5fd;
    --accent-2: #a78bfa;
    --accent-hover: #93c5fd;
    --primary: #4f46e5;
    --secondary: #7c3aed;
    --primary-gradient: linear-gradient(90deg, #7c3aed, #4f46e5);
    --title-gradient: linear-gradient(90deg, #60a5fa, #a78bfa);
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.35);

    /* Status: solid colour + soft tint + readable text on the tint */
    --success: #10b981; --success-soft: rgba(16, 185, 129, 0.15); --success-text: #6ee7b7;
    --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.15); --warning-text: #fcd34d;
    --danger:  #ef4444; --danger-soft:  rgba(239, 68, 68, 0.15);  --danger-text:  #fca5a5;
    --info:    #3b82f6; --info-soft:    rgba(59, 130, 246, 0.15); --info-text:    #93c5fd;
    --neutral-soft: rgba(148, 163, 184, 0.15); --neutral-text: #cbd5e1;

    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --font: Inter, system-ui, -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

    /* Bootstrap 5.3 (data-bs-theme="dark") tuned to the navy palette */
    --bs-body-bg: #081229;
    --bs-body-color: #e6eef8;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-bg: #0c1a33;
    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bs-link-color: #60a5fa;
    --bs-link-color-rgb: 96, 165, 250;
    --bs-link-hover-color: #93c5fd;
    --bs-link-hover-color-rgb: 147, 197, 253;
}
[data-bs-theme="dark"] {
    --bs-body-bg: #081229;
    --bs-body-color: #e6eef8;
    --bs-secondary-bg: #0f1f3d;
    --bs-tertiary-bg: #0c1a33;
    --bs-border-color: rgba(255, 255, 255, 0.08);
}

/* Base */
html { background: var(--bg-end); }
body {
    margin: 0;
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    min-height: 100vh;
}
/* Plain links only: links styled as buttons (any class) keep their own colours. */
a:not([class]) { color: var(--link); }
a:not([class]):hover { color: var(--link-hover); }
::selection { background: rgba(96, 165, 250, 0.35); color: var(--text); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Form fields that pages do not style themselves */
input, select, textarea { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* Scrollbars */
* { scrollbar-color: rgba(148, 163, 184, 0.35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Bootstrap components on the navy background */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--surface-2);
    border-color: var(--link);
    box-shadow: var(--focus-ring);
    color: var(--text);
}
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text);
}