/*
 * Design tokens. Every colour in the UI comes from these variables (as "R G B" triplets so
 * Tailwind opacity modifiers like bg-danger/10 work). Dark mode swaps the values on <html class="dark">.
 */
:root {
    color-scheme: light;

    --canvas: 250 250 250;       /* app background */
    --surface: 255 255 255;      /* cards, inputs, menus */
    --surface-2: 244 244 245;    /* hover, table header, subtle fills */
    --surface-3: 228 228 231;    /* pressed / stronger fills */
    --line: 228 228 231;         /* default borders */
    --line-strong: 212 212 216;  /* input borders */

    --fg: 24 24 27;              /* primary text */
    --fg-muted: 82 82 91;        /* secondary text */
    --fg-subtle: 113 113 122;    /* labels, meta */
    --fg-faint: 161 161 170;     /* placeholders, disabled */

    --primary: 24 24 27;         /* primary buttons */
    --primary-fg: 250 250 250;
    --accent: 37 99 235;         /* links, focus rings, selection */

    --danger: 220 38 38;         /* expired */
    --warning: 194 65 12;        /* expiring 0–7 days */
    --caution: 161 98 7;         /* expiring 8–30 days */
    --success: 21 128 61;        /* active */

    /* Extra colours for the statuses the admin sets (Settings → Statuses); the others reuse the ones above. */
    --tone-blue: 37 99 235;
    --tone-purple: 126 34 206;
    --tone-teal: 15 118 110;
    --tone-pink: 190 24 93;
}

.dark {
    color-scheme: dark;

    --canvas: 10 10 12;
    --surface: 20 20 23;
    --surface-2: 29 29 33;
    --surface-3: 40 40 45;
    --line: 38 38 43;
    --line-strong: 58 58 65;

    --fg: 244 244 245;
    --fg-muted: 195 195 203;
    --fg-subtle: 150 150 160;
    --fg-faint: 105 105 115;

    --primary: 244 244 245;
    --primary-fg: 20 20 23;
    --accent: 96 165 250;

    --danger: 248 113 113;
    --warning: 251 146 60;
    --caution: 250 204 21;
    --success: 74 222 128;

    --tone-blue: 96 165 250;
    --tone-purple: 192 132 252;
    --tone-teal: 45 212 191;
    --tone-pink: 244 114 182;
}

[x-cloak] { display: none !important; }

/* The page background also on <html>: phones show it above and below the page (Safari's bars, overscroll),
   which was white in dark mode while only <body> had it. */
html {
    background-color: rgb(var(--canvas));
    /* No pinch or double-tap zoom (iOS ignores user-scalable=no in the viewport tag); scrolling still works. */
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body { font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; }

/* The page never slides sideways on phones. Wide parts (tab strips, tables) scroll inside themselves; this only
   stops a stray pixel from making the whole page pan. `clip`, not `hidden`, so the sticky top bar keeps working. */
html, body { overflow-x: clip; }

/* Fieldsets and date fields are as wide as their content by default (min-width: min-content), which pushed the
   Filters panel past the screen edge on phones. */
fieldset { min-width: 0; }
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; }

::selection { background: rgb(var(--accent) / 0.2); }

:focus-visible { outline: 2px solid rgb(var(--accent) / 0.7); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

input[type="radio"], input[type="checkbox"] { accent-color: rgb(var(--accent)); }

/* Native date/calendar pickers follow the theme via color-scheme; keep the icon subtle. */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
/* iOS Safari centres the value of date fields; keep it left like every other field. */
input[type="date"], input[type="time"] { text-align: left; }
input::-webkit-date-and-time-value { text-align: left; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* iOS: avoid zoom-on-focus by keeping form controls at 16px on phones. */
@media (max-width: 640px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Horizontally scrollable rows (tabs) without a visible scrollbar. */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Theme switch: avoid transition flashes while the class flips. */
.theme-switching, .theme-switching * { transition: none !important; }