/* ==========================================================================
   SLAMS Design System - token layer
   Colour is expressed as raw "R G B" triples so Tailwind can consume it via
   rgb(var(--token) / <alpha-value>), and dark mode becomes a single swap.
   ========================================================================== */

:root {
    /* Surfaces */
    --c-bg:          248 250 252;   /* app canvas          */
    --c-surface:     255 255 255;   /* cards, panels       */
    --c-surface-2:   248 250 252;   /* table heads, wells  */
    --c-surface-3:   241 245 249;   /* hover states        */
    --c-line:        226 232 240;   /* hairline borders    */
    --c-line-strong: 203 213 225;

    /* Foreground */
    --c-fg:          15 23 42;      /* primary text        */
    --c-muted:       71 85 105;     /* secondary text      */
    --c-subtle:      148 163 184;   /* tertiary / captions */

    /* Brand */
    --c-brand:       79 70 229;
    --c-brand-hover: 67 56 202;
    --c-brand-fg:    255 255 255;
    --c-brand-soft:  238 242 255;
    --c-brand-text:  67 56 202;

    /* Semantic */
    --c-success:      22 163 74;
    --c-success-soft: 240 253 244;
    --c-success-text: 21 128 61;

    --c-warn:         217 119 6;
    --c-warn-soft:    255 251 235;
    --c-warn-text:    180 83 9;

    --c-danger:       220 38 38;
    --c-danger-soft:  254 242 242;
    --c-danger-text:  185 28 28;

    --c-info:         2 132 199;
    --c-info-soft:    240 249 255;
    --c-info-text:    3 105 161;

    /* Elevation - deliberately soft; no hard 2020-era drop shadows */
    --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
    --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
    --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
    --shadow-lg: 0 12px 28px -6px rgb(15 23 42 / 0.12), 0 4px 8px -4px rgb(15 23 42 / 0.06);

    --radius: 0.625rem;
}

:root[data-theme="dark"] {
    --c-bg:          9 12 20;
    --c-surface:     17 22 34;
    --c-surface-2:   23 30 44;
    --c-surface-3:   31 40 57;
    --c-line:        38 48 68;
    --c-line-strong: 55 68 92;

    --c-fg:          237 242 250;
    --c-muted:       156 172 195;
    --c-subtle:      110 127 152;

    --c-brand:       129 122 255;
    --c-brand-hover: 148 141 255;
    --c-brand-fg:    12 14 24;
    --c-brand-soft:  32 33 68;
    --c-brand-text:  173 168 255;

    --c-success:      52 199 123;
    --c-success-soft: 14 44 32;
    --c-success-text: 106 226 163;

    --c-warn:         234 165 42;
    --c-warn-soft:    49 34 10;
    --c-warn-text:    250 197 106;

    --c-danger:       248 96 96;
    --c-danger-soft:  56 20 22;
    --c-danger-text:  255 150 150;

    --c-info:         56 172 231;
    --c-info-soft:    10 38 54;
    --c-info-text:    125 205 245;

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35);
}

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

*, *::before, *::after { border-color: rgb(var(--c-line)); }

html { -webkit-text-size-adjust: 100%; }

body {
    background-color: rgb(var(--c-bg));
    color: rgb(var(--c-fg));
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02','cv03','cv04','cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tabular figures wherever numbers are compared down a column */
.tnum, table td, table th, .metric-value { font-variant-numeric: tabular-nums; }

/* Focus ring - one definition, used by every interactive element */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--c-brand));
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--c-line-strong)) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: rgb(var(--c-line-strong));
    border-radius: 999px;
    border: 3px solid rgb(var(--c-bg));
}
*::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--c-subtle)); }

/* --------------------------------------------------------------------------
   Form controls - normalise WTForms output without editing every template
   -------------------------------------------------------------------------- */

.field,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], input[type="url"],
select, textarea {
    width: 100%;
    background-color: rgb(var(--c-surface));
    color: rgb(var(--c-fg));
    border: 1px solid rgb(var(--c-line-strong));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field::placeholder,
input::placeholder, textarea::placeholder { color: rgb(var(--c-subtle)); }

.field:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgb(var(--c-brand));
    box-shadow: 0 0 0 3px rgb(var(--c-brand) / 0.14);
}

.field:disabled,
input:disabled, select:disabled, textarea:disabled {
    background-color: rgb(var(--c-surface-3));
    color: rgb(var(--c-subtle));
    cursor: not-allowed;
}

input[type="checkbox"], input[type="radio"] {
    width: 1rem; height: 1rem;
    accent-color: rgb(var(--c-brand));
    cursor: pointer;
}

/* Date pickers are near-invisible on a dark ground without this */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }

/* WTForms renders the permission checkbox group as a bare <ul> */
ul.perm-list { list-style: none; margin: 0; padding: 0; }
ul.perm-list li { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; }
ul.perm-list li label { font-size: .875rem; color: rgb(var(--c-muted)); cursor: pointer; }

/* --------------------------------------------------------------------------
   Motion - restrained, and fully off when the OS asks
   -------------------------------------------------------------------------- */

@keyframes slams-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.animate-rise { animation: slams-rise .28s cubic-bezier(.16,1,.3,1) both; }

@keyframes slams-shimmer { 100% { transform: translateX(100%); } }
.skeleton {
    position: relative; overflow: hidden;
    background-color: rgb(var(--c-surface-3));
    border-radius: 0.5rem;
}
.skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgb(var(--c-line) / .55), transparent);
    animation: slams-shimmer 1.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Print - these reports get printed; make that not embarrassing
   -------------------------------------------------------------------------- */

@media print {
    .no-print, aside, nav { display: none !important; }
    body { background: #fff; }
    main { margin: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
}