/* ============================================================
   The one palette and scale of the admin panel, in two themes.
   Every page reads it (app.css keeps its older names as aliases of
   these), and so do the kiosk editor (kiosk-editor.css, --kx-*) and
   the menu editor inside it (menu-editor.css, --mx-*), so a colour or
   a size changes in one place for all of them.

   The look: ink on paper with one blue. The РУАЛТ mark is black, so
   the chrome is monochrome — zinc greys, ink text — and one blue says
   «the main action», «chosen», «on» and «focused». The shell is a
   sidebar on a tinted canvas and the page on a raised sheet beside it
   (AppShell).

   Themes: :root is light; [data-theme="dark"] on <html> redefines the
   same names. js/theme.js sets the attribute before the first paint
   from the saved choice (light, dark, or the system's).
   ============================================================ */

:root {
    color-scheme: light;

    /* ---------- Surfaces ---------- */

    /* The shell behind the sidebar and around the sheet. */
    --ui-canvas: #f1f1f4;
    /* AppShell's own: white beside the grey sheet (--ui-page-fill), which its frame and shadow set off. */
    --ui-shell: #ffffff;
    /* The sheet the page sits on (AppShell's <main>, the kiosk editor, the status screens). */
    --ui-page: #ffffff;
    /* AppShell's page itself (and the kiosk editor's pages): a light grey, barely cool, a step under the white cards
       and their heads (--ui-card-bg) so they stand out, and a touch deeper towards the bottom. The kit's own greys,
       so a card's head and the page read as one family. What sits on it without a card (the lists' search, the
       table / map switch) takes --ui-page-well. */
    --ui-page-fill: linear-gradient(to bottom, #f3f4f6 0%, #eceef1 100%);
    --ui-page-well: #ffffff;
    /* Scroll bars: see-through, so the thumb shows as well on the grey sheet as on a white card. */
    --ui-scroll-thumb: rgba(20, 20, 30, 0.2);
    --ui-scroll-thumb-hover: rgba(20, 20, 30, 0.34);
    /* Cards, panels, menus. */
    --ui-surface: #ffffff;
    /* Dialogs, popovers and toasts: the layer over everything (a shade lighter than a card in the dark theme). */
    --ui-surface-raised: #ffffff;
    /* An inset grey: a read-only field, a picture's backdrop, a quiet well inside a card. */
    --ui-bg: #f6f6f8;
    /* Text fields: white with a line and a hairline shadow, on the page and on cards alike (ui-kit.css). */
    --ui-field-bg: #ffffff;
    /* Cards in panels, and a hovered or pressed row, button or tool. */
    --ui-card-bg: #fafafb;
    --ui-hover: #f5f5f7;
    --ui-chip-bg: #f0f0f3;
    /* The icon of an empty picture. */
    --ui-placeholder: #c4c4cc;

    /* ---------- Lines and text ---------- */

    --ui-line: #e8e8ec;
    --ui-line-strong: #dcdce2;
    --ui-text: #17171c;
    --ui-muted: #4a4a55;
    /* Meta, captions, placeholders, table heads: 5.1:1 on white, 4.6:1 on the canvas. */
    --ui-faint: #6c6c78;

    /* ---------- Ink: the strongest fill (tooltips, the map's banner) ---------- */

    /* A near-black fill and the text on it. White on it is 17:1. */
    --ui-ink: #17171c;
    --ui-ink-hover: #2e2e36;
    --ui-ink-pressed: #000000;
    --ui-on-ink: #ffffff;

    /* ---------- The accent: the main action, chosen, on, focused, a link ---------- */

    /* The primary button's fill, and graphics (rings, dots, switches, the progress bar). White on it is 4.7:1. */
    --ui-accent: #2b6cf0;
    /* Accent text (links, the chosen tab or filter): 5.9:1 on white. */
    --ui-accent-strong: #1d5bd8;
    --ui-accent-soft: #eaf1fe;
    /* A checked card or tile: the faintest accent tint. */
    --ui-accent-subtle: #f5f9ff;
    --ui-info-bg: #eaf1fe;
    --ui-info-line: #c9dbfb;
    --ui-info-text: #1c47a6;

    /* ---------- Colours with meaning: a soft fill, its outline, and the text or icon on it ---------- */

    /* Grouped positions of the menu. */
    --ui-group: #8b3ddb;
    --ui-group-soft: #f4edfd;
    --ui-group-text: #6a2bb0;
    --ui-group-line: #e7dbfa;
    --ui-group-subtle: #fcfaff;
    --ui-ok: #137a45;
    --ui-ok-soft: #eaf7ef;
    --ui-ok-line: #c3e7d1;
    --ui-warn: #a8570a;
    --ui-warn-soft: #fff6e8;
    --ui-warn-line: #f5dcae;
    /* Long text on the amber tint (a paragraph of a warning note). */
    --ui-warn-text: #8a4509;
    --ui-error: #c1292e;
    --ui-error-soft: #fdeeee;
    --ui-error-line: #f6caca;
    --ui-error-text: #9f1f24;
    /* A danger button's hover on its soft fill. */
    --ui-error-hover: #fbe2e2;

    /* Solid fills with white on them (a red «delete» button, a «new» flag): the same in both themes, so white on
       them always reads. */
    --ui-on-solid: #ffffff;
    --ui-danger-bg: #d0343a;
    --ui-danger-hover: #b52a30;
    --ui-danger-pressed: #911f24;
    --ui-ok-solid: #16834b;
    --ui-warn-solid: #b45d08;
    --ui-neutral-solid: #5c5c68;
    /* Kept for the older rules: a red primary button pressed. */
    --ui-error-pressed: var(--ui-danger-pressed);

    /* Charts: the main series in the accent, the second in its light tint, a bad value in a soft red. */
    --ui-chart-1: #2b6cf0;
    --ui-chart-2: #a8c3fa;
    --ui-chart-bad: #f29a9d;

    /* Status as a graphic (dots, pins, bars, left edges): bright, 3:1 as a shape but not as text. */
    --ui-status-ok: #1fae5b;
    --ui-status-warn: #f59e0b;
    --ui-status-error: #e5484d;
    --ui-status-off: #b8b8c2;

    /* ---------- Type ---------- */

    /* html is 90% (app.css), so 1rem = 14.4px; text sizes are px so each one is exactly what it says. */
    --ui-fs-caps: 11px; /* UPPERCASE micro-labels only */
    --ui-fs-xs: 12px;   /* meta, captions, badges, pills, counts */
    --ui-fs-sm: 13px;   /* labels, secondary text, small buttons, table heads, segmented, chips, notes */
    --ui-fs-md: 14px;   /* body, values, buttons, table cells, rows */
    --ui-fs-lg: 16px;   /* card, section and dialog titles; the editor header */
    --ui-fs-xl: 20px;   /* page heads inside the editors; page titles on phones */
    --ui-fs-2xl: 26px;  /* page titles */
    --ui-fs-3xl: 30px;  /* the big numbers of a stat tile */
    /* Headings are drawn a little tighter than body text: Montserrat is wide. */
    --ui-tracking-tight: -0.02em;

    /* ---------- Shape and depth ---------- */

    --ui-radius: 14px;
    --ui-radius-sm: 10px;
    /* Tags, log levels, buttons inside chips, icon buttons of 28 px and less. */
    --ui-radius-xs: 7px;
    --ui-radius-dialog: 20px;
    /* The sheet the page sits on, and its distance from the window's edges (AppShell). */
    --ui-radius-sheet: 18px;
    --ui-sheet-gap: 8px;

    /* Fields, secondary buttons: a hairline under the edge. Cards: a hairline and a soft fall-off. */
    --ui-shadow-xs: 0 1px 2px rgba(20, 20, 30, 0.05);
    --ui-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 2px 6px -2px rgba(20, 20, 30, 0.06);
    --ui-shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04), 0 4px 16px -6px rgba(20, 20, 30, 0.08);
    --ui-shadow-lg: 0 20px 48px -12px rgba(20, 20, 30, 0.22), 0 6px 16px -8px rgba(20, 20, 30, 0.1);
    --ui-shadow-dialog: 0 40px 96px -24px rgba(20, 20, 30, 0.4), 0 12px 32px -12px rgba(20, 20, 30, 0.16);
    /* The sheet's edge on the canvas. */
    --ui-shadow-sheet: 0 0 0 1px rgba(20, 20, 30, 0.07), 0 1px 3px rgba(20, 20, 30, 0.05), 0 8px 24px -12px rgba(20, 20, 30, 0.1);
    /* The dim behind a dialog or a drawer. */
    --ui-overlay: rgba(20, 20, 28, 0.42);

    /* Keyboard focus, two looks only. Fields: the accent border plus this ring. */
    --ui-ring: 0 0 0 3px rgba(43, 108, 240, 0.24);
    --ui-ring-danger: 0 0 0 3px rgba(193, 41, 46, 0.18);
    /* Everything else (buttons, chips, tabs, cards): a gap in the page's colour, then a solid accent ring; rows use it
       inset. */
    --ui-focus: 0 0 0 2px var(--ui-page), 0 0 0 4px var(--ui-accent);

    /* Hover outlines of fields and ghost buttons; a switch that is off. */
    --ui-line-hover: #c2c2cb;
    --ui-switch-off: #d6d6dd;
    /* The edge of a checkbox or radio: 3.4:1 on white, so the control reads as one. */
    --ui-control-line: #8a8a96;
    /* A select's chevron, the same everywhere. */
    --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c6c78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    /* «Unsaved changes»: the amber dot of the save bars, the tabs and the nav. */
    --ui-dirty: #f59e0b;
    --ui-dirty-ring: 0 0 0 4px rgba(245, 158, 11, 0.2);
    /* The tick of a checked checkbox, white on the accent. */
    --ui-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* Edited, not saved yet: amber (new is green, the accent is for actions and selection). */
    --ui-dirty-soft: #fff4dc;
    --ui-dirty-strong: #d97706;
    --ui-dirty-text: var(--ui-warn);
    /* An upload's progress track. */
    --ui-progress-track: #ececf0;
    /* A segmented control's track. The page is white now, as a card is, so it is the chip grey everywhere. */
    --ui-track-page: #ececf0;
    /* The raised thumb of a segmented control or a switch's knob-like tile: lighter than its track in both themes. */
    --ui-thumb: #ffffff;
    --ui-thumb-shadow: 0 1px 2px rgba(20, 20, 30, 0.1), 0 1px 4px -1px rgba(20, 20, 30, 0.08), 0 0 0 1px rgba(20, 20, 30, 0.04);

    /* The kinds of button. Primary: the blue (the danger red when the action destroys). Secondary: the surface with a
       line. Soft: a grey fill, no line. The primary fill is its own token, so the ink can take its place in one line:
       --ui-primary-bg: var(--ui-ink) (and its hover, pressed and text). */
    --ui-primary-bg: var(--ui-accent);
    --ui-primary-hover: #1d5bd8;
    --ui-primary-pressed: #1848b0;
    --ui-primary-fg: #ffffff;
    /* The primary's top edge catches the light, and it sits on a faint blue glow. */
    --ui-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(20, 40, 120, 0.25), 0 4px 12px -4px rgba(43, 108, 240, 0.45);
    --ui-secondary-bg: #f0f0f3;
    --ui-secondary-hover: #e7e7eb;
    --ui-secondary-pressed: #dcdce2;
    --ui-secondary-text: var(--ui-text);

    /* States shared by every control: disabled fades, colour changes ease over this. */
    --ui-disabled-opacity: 0.5;
    --ui-duration: 0.15s;
    /* Panels, drawers and sheets: a quick start and a soft landing. */
    --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ui-duration-lg: 0.28s;

    /* Controls: buttons and fields one height, 40 px, so a button beside a field lines up (small buttons 32);
       switches 36 × 20. */
    --ui-btn-h: 40px;
    --ui-btn-h-sm: 32px;
    --ui-field-h: 40px;

    /* The sidebar on the canvas (AppShell). */
    --sb-text: var(--ui-muted);
    --sb-text-strong: var(--ui-text);
    --sb-muted: var(--ui-faint);
    --sb-hover: rgba(20, 20, 30, 0.045);
    --sb-pressed: rgba(20, 20, 30, 0.08);
    --sb-active: var(--ui-surface);
    --sb-active-shadow: 0 0 0 1px rgba(20, 20, 30, 0.06), 0 1px 2px rgba(20, 20, 30, 0.06), 0 2px 6px -2px rgba(20, 20, 30, 0.08);
    /* The page you are on, in the nav: the accent's tint, its label in the accent — the stronger tint (soft): the
       subtle one is near white, too faint on the white sidebar. */
    --sb-current: var(--ui-accent-soft);
    --sb-current-fg: var(--ui-accent-strong);
    --sb-line: rgba(20, 20, 30, 0.07);
    /* The РУАЛТ mark (BrandLogo, assets/brand/logo-*.svg) on no background: black here, white on the dark theme. */
    --brand-logo: #0a0a0d;
}

/* ---------- The dark theme ---------- */

:root[data-theme="dark"] {
    color-scheme: dark;

    --ui-canvas: #0b0b0d;
    /* As the light theme has it: the sidebar a step lighter than the page (near the cards' tone), the page the
       deepest, so the cards on it stand out. */
    --ui-shell: #17171b;
    --ui-page: #131316;
    /* Dark: one flat tone, no gradient, under the cards (#18181c). */
    --ui-page-fill: #0e0e11;
    --ui-page-well: #1c1c21;
    --ui-scroll-thumb: rgba(255, 255, 255, 0.16);
    --ui-scroll-thumb-hover: rgba(255, 255, 255, 0.28);
    --ui-surface: #18181c;
    --ui-surface-raised: #1d1d22;
    --ui-bg: #0f0f12;
    --ui-field-bg: #141417;
    --ui-card-bg: #1c1c21;
    --ui-hover: #202026;
    --ui-chip-bg: #25252b;
    --ui-placeholder: #4b4b56;

    --ui-line: #27272e;
    --ui-line-strong: #33333b;
    --ui-text: #f2f2f4;
    --ui-muted: #b9b9c3;
    --ui-faint: #8e8e9a;

    --ui-ink: #f2f2f4;
    --ui-ink-hover: #ffffff;
    --ui-ink-pressed: #d6d6dc;
    --ui-on-ink: #111114;

    --ui-accent: #4f8dff;
    --ui-accent-strong: #8ab4ff;
    --ui-accent-soft: #16264a;
    --ui-accent-subtle: #111c33;
    --ui-info-bg: #14223f;
    --ui-info-line: #25406f;
    --ui-info-text: #b3cdff;

    --ui-group: #b58cff;
    --ui-group-soft: #2a2040;
    --ui-group-text: #d2baff;
    --ui-group-line: #3e2f5e;
    --ui-group-subtle: #1c1727;
    --ui-ok: #4fd18e;
    --ui-ok-soft: #13291d;
    --ui-ok-line: #1f4731;
    --ui-warn: #f4b150;
    --ui-warn-soft: #2b2113;
    --ui-warn-line: #4d3819;
    --ui-warn-text: #f8ca80;
    --ui-error: #ff7d81;
    --ui-error-soft: #2e1618;
    --ui-error-line: #542328;
    --ui-error-text: #ffa1a4;
    --ui-error-hover: #3a1b1e;

    --ui-danger-bg: #d5383e;
    --ui-danger-hover: #e04a50;
    --ui-danger-pressed: #b22d33;
    --ui-ok-solid: #16834b;
    --ui-warn-solid: #b45d08;
    --ui-neutral-solid: #4c4c57;

    --ui-chart-1: #4f8dff;
    --ui-chart-2: #274a8a;
    --ui-chart-bad: #b8474c;

    --ui-status-ok: #3dd07f;
    --ui-status-warn: #f5a524;
    --ui-status-error: #ff5a5f;
    --ui-status-off: #55555f;

    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
    --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px -8px rgba(0, 0, 0, 0.5);
    --ui-shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --ui-shadow-dialog: 0 40px 100px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --ui-shadow-sheet: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --ui-overlay: rgba(0, 0, 0, 0.62);

    --ui-ring: 0 0 0 3px rgba(79, 141, 255, 0.34);
    --ui-ring-danger: 0 0 0 3px rgba(255, 125, 129, 0.25);

    --ui-line-hover: #4a4a55;
    --ui-switch-off: #3a3a43;
    --ui-control-line: #70707c;
    --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238e8e9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    --ui-dirty-soft: #2e2412;
    --ui-dirty-ring: 0 0 0 4px rgba(245, 158, 11, 0.22);
    --ui-progress-track: #2a2a31;
    --ui-track-page: #1f1f25;
    --ui-thumb: #34343c;
    --ui-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* On the dark page a step lighter than the light theme's blue, so it reads as light on dark rather than a heavy
       block; lighter still under the pointer. White on it is 4.0:1 (3.4:1 hovered): below the 4.5:1 of small text,
       chosen for the look; the labels are semibold. */
    --ui-primary-bg: #3d7af3;
    --ui-primary-hover: #5088f6;
    --ui-primary-pressed: #306ade;
    --ui-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px -6px rgba(61, 122, 243, 0.55);
    --ui-secondary-bg: #25252b;
    --ui-secondary-hover: #2d2d34;
    --ui-secondary-pressed: #37373f;

    --sb-hover: rgba(255, 255, 255, 0.05);
    --sb-pressed: rgba(255, 255, 255, 0.09);
    --sb-active: #1d1d22;
    --sb-active-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.5);
    /* On the dark sidebar (--ui-shell), the stronger of the accent's tints: the subtle one is lost on it. */
    --sb-current: var(--ui-accent-soft);
    --sb-line: rgba(255, 255, 255, 0.07);
    --brand-logo: #ffffff;
}

/* While the theme switches, no control eases on its own (js/theme.js sets this for the switch): the whole screen
   cross-fades instead, as one picture, over this long. */
:root.is-theme-switching *,
:root.is-theme-switching *::before,
:root.is-theme-switching *::after {
    transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}