/*
  Админка: темная тема в стиле "Defo" (вайб),
  без копирования ассетов: плоские панели, золото как акцент,
  Roboto/Roboto Slab, минимум градиентов.
*/
:root{
  --radius:18px;
  /* RGB tuples for derived translucent colors/shadows (themeable). */
  --shadow-rgb: 0 0 0;
  --sheen-rgb: 255 255 255;

  --shadow:0 26px 85px rgb(var(--shadow-rgb) / 0.55);
  --shadow-sm:0 18px 40px rgb(var(--shadow-rgb) / 0.35);
  --shadow-md:0 18px 45px rgb(var(--shadow-rgb) / 0.35);
  --shadow-lg:0 22px 70px rgb(var(--shadow-rgb) / 0.60);
  --btn-shadow:0 18px 45px rgb(var(--shadow-rgb) / 0.35);
  --btn-shadow-hover:0 22px 60px rgb(var(--shadow-rgb) / 0.42);
  --table-head-shadow:0 10px 18px rgb(var(--shadow-rgb) / 0.22);
  --inset-shadow-1: inset 0 0 0 1px rgb(var(--shadow-rgb) / 0.45);

  --control-sheen-top: rgb(var(--sheen-rgb) / 0.05);
  --control-sheen-bot: rgb(var(--sheen-rgb) / 0);

  /* Fonts (themeable). */
  --font-sans: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Roboto Slab", ui-serif, Georgia, serif;
  --a-table-scale:1;
  --a-table-density:1;
  /* Optional global row height override (set by JS). Example: 44px */
  --a-row-h: unset;

  /* Fallback colors (если data-theme не выставлен). */
  --bg:#0b0a08;
  --bg2:#11100d;
  --panel:#141311;
  --panel2:#191815;

  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);

  --ink:rgba(245,242,235,.94);
  --muted:rgba(245,242,235,.66);
  --muted2:rgba(245,242,235,.50);

  --gold:#d0a24c;
  --gold2:#b8872f;
  --ok:#22c55e;
  --danger:#f87171;

  /* Used for money amounts in tables (should be readable on white tables). */
  --money-pos:#16a34a;
  --money-neg:#dc2626;

  /* Neutral UI color for "empty"/fallback status (theme-aware). */
  --neutral: color-mix(in srgb, var(--ink) 26%, var(--bg));

  /* Semantic role colors (slightly tinted by current accent). */
  --role-worker: color-mix(in srgb, #3b82f6 80%, var(--gold) 20%);
  --role-teamlead: color-mix(in srgb, #22c55e 80%, var(--gold) 20%);
  --role-client: color-mix(in srgb, #f59e0b 80%, var(--gold) 20%);

  /* Семантические токены для компонентов. */
  --bg-spot1: rgba(208,162,76,.16);
  --bg-spot2: rgba(208,162,76,.07);
  --bg-spot3: rgb(var(--shadow-rgb) / 0.65);

  --hover-bg: color-mix(in srgb, var(--ink) 5%, transparent);
  --active-bg: rgba(208,162,76,.10);
  --active-border: rgba(208,162,76,.24);

  --accent-soft: rgba(208,162,76,.14);
  --accent-border: rgba(208,162,76,.30);
  --accent-hover-bg: rgba(208,162,76,.08);
  --accent-row-hover: rgba(208,162,76,.06);
  --accent-row-border: rgba(208,162,76,.22);
  --accent-focus-border: rgba(208,162,76,.55);
  --accent-focus-ring: rgba(208,162,76,.14);

  --card-bg: color-mix(in srgb, var(--panel) 62%, transparent);
  --card-border: var(--stroke);
  --side-bg: color-mix(in srgb, var(--panel) 60%, transparent);
  --topbar-bg: color-mix(in srgb, var(--panel2) 66%, transparent);

  --btn-ink: color-mix(in srgb, var(--bg) 15%, black);
  --btn-secondary-bg: color-mix(in srgb, var(--panel2) 58%, transparent);
  --btn-secondary-bg-hover: color-mix(in srgb, var(--panel2) 68%, transparent);
  --btn-secondary-border: var(--stroke2);

  --panel-bg: color-mix(in srgb, var(--panel2) 52%, transparent);
  --panel-bg2: color-mix(in srgb, var(--panel2) 64%, transparent);

  --chip-bg: var(--panel-bg);
  --chip-border: var(--stroke2);

  --control-bg: color-mix(in srgb, var(--panel2) 54%, transparent);
  --control-border: var(--stroke2);
  --control-border-hover: rgba(208,162,76,.35);

  --select-bg: color-mix(in srgb, var(--panel2) 66%, transparent);

  --dd-bg: color-mix(in srgb, var(--panel2) 86%, transparent);
  --dd-border: var(--stroke2);

  --select-option-bg: #0f0e0b;
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23d0a24c' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

  --table-head-bg: color-mix(in srgb, var(--panel2) 86%, transparent);
  --table-sticky-bg: color-mix(in srgb, var(--panel2) 90%, transparent);
  --table-bg: color-mix(in srgb, var(--panel2) 52%, transparent);
  --table-inset-border: color-mix(in srgb, var(--stroke2) 70%, transparent);
  --table-head-cell-bg: color-mix(in srgb, var(--panel2) 64%, transparent);
  --table-subs-bg: color-mix(in srgb, var(--panel2) 72%, transparent);
  --table-subs-head-bg: color-mix(in srgb, var(--panel2) 80%, transparent);
  --stroke-strong: color-mix(in srgb, var(--ink) 14%, transparent);

  --row-bg: color-mix(in srgb, var(--panel2) 58%, transparent);
  --row-bg-even: color-mix(in srgb, var(--panel2) 54%, transparent);
  --row-border: var(--stroke);
  --row-hover-bg: var(--accent-row-hover);
  --row-hover-border: var(--accent-row-border);

  --status-bg-base: color-mix(in srgb, var(--panel2) 56%, transparent);
  --status-bg-mix: color-mix(in srgb, var(--panel2) 70%, transparent);
  --status-border-base: color-mix(in srgb, var(--stroke2) 80%, transparent);

  --toast-bg: color-mix(in srgb, var(--panel2) 64%, transparent);
  --toast-border: var(--stroke2);

  --overlay-bg: color-mix(in srgb, var(--bg) 62%, transparent);
  --side-bg-mobile: color-mix(in srgb, var(--panel2) 74%, transparent);

  --status-dot-ring: rgb(var(--shadow-rgb) / 0.25);
  --status-dot-inset: color-mix(in srgb, var(--stroke2) 80%, transparent);
}

[data-font="arial"]{
  --font-sans: Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Тема по умолчанию (как сейчас). */
[data-theme="defo"]{
  --bg:#0b0a08;
  --bg2:#11100d;
  --panel:#141311;
  --panel2:#191815;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(245,242,235,.94);
  --muted:rgba(245,242,235,.66);
  --muted2:rgba(245,242,235,.50);
  --gold:#d0a24c;
  --gold2:#b8872f;

  --bg-spot1: rgba(208,162,76,.16);
  --bg-spot2: rgba(208,162,76,.07);
  --active-bg: rgba(208,162,76,.10);
  --active-border: rgba(208,162,76,.24);
  --accent-soft: rgba(208,162,76,.14);
  --accent-border: rgba(208,162,76,.30);
  --accent-hover-bg: rgba(208,162,76,.08);
  --accent-row-hover: rgba(208,162,76,.06);
  --accent-row-border: rgba(208,162,76,.22);
  --accent-focus-border: rgba(208,162,76,.55);
  --accent-focus-ring: rgba(208,162,76,.14);
  --control-border-hover: rgba(208,162,76,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23d0a24c' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0f0e0b;
}

[data-theme="bw"]{
  --bg:#0a0a0a;
  --bg2:#111111;
  --panel:#121212;
  --panel2:#161616;
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.16);
  --ink:rgba(250,250,250,.94);
  --muted:rgba(250,250,250,.72);
  --muted2:rgba(250,250,250,.56);
  --gold:#d4d4d4;
  --gold2:#a3a3a3;

  --bg-spot1: rgba(255,255,255,.10);
  --bg-spot2: rgba(255,255,255,.05);
  --active-bg: rgba(255,255,255,.10);
  --active-border: rgba(255,255,255,.20);
  --accent-soft: rgba(255,255,255,.10);
  --accent-border: rgba(255,255,255,.22);
  --accent-hover-bg: rgba(255,255,255,.07);
  --accent-row-hover: rgba(255,255,255,.05);
  --accent-row-border: rgba(255,255,255,.18);
  --accent-focus-border: rgba(255,255,255,.40);
  --accent-focus-ring: rgba(255,255,255,.16);
  --control-border-hover: rgba(255,255,255,.26);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4d4d4' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0f0f0f;
}

/* Light theme (white background, high readability like spreadsheets). */
[data-theme="light"]{
  --shadow-rgb: 0 0 0;
  --sheen-rgb: 255 255 255;

  /* Softer shadows on light background. */
  --shadow:0 22px 55px rgb(var(--shadow-rgb) / 0.14);
  --shadow-sm:0 12px 26px rgb(var(--shadow-rgb) / 0.10);
  --shadow-md:0 14px 30px rgb(var(--shadow-rgb) / 0.12);
  --shadow-lg:0 18px 46px rgb(var(--shadow-rgb) / 0.16);
  --btn-shadow:0 14px 30px rgb(var(--shadow-rgb) / 0.14);
  --btn-shadow-hover:0 18px 40px rgb(var(--shadow-rgb) / 0.18);
  --table-head-shadow:0 10px 18px rgb(var(--shadow-rgb) / 0.08);
  --inset-shadow-1: inset 0 0 0 1px rgb(var(--shadow-rgb) / 0.10);

  --bg:#f6f7f9;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel2:#f1f3f4;

  --stroke:rgba(0,0,0,.08);
  --stroke2:rgba(0,0,0,.12);

  --ink:rgba(18,18,18,.96);
  --muted:rgba(18,18,18,.72);
  --muted2:rgba(18,18,18,.56);

  /* Accent: Google-ish blue, but softer to avoid eye strain. */
  --gold:#1967d2;
  --gold2:#1558b0;

  --bg-spot1: rgba(25,103,210,.10);
  --bg-spot2: rgba(25,103,210,.05);
  --bg-spot3: rgba(0,0,0,.08);

  --hover-bg: rgba(25,103,210,.06);
  --active-bg: rgba(25,103,210,.10);
  --active-border: rgba(25,103,210,.18);

  --accent-soft: rgba(25,103,210,.08);
  --accent-border: rgba(25,103,210,.28);
  --accent-hover-bg: rgba(25,103,210,.08);
  --accent-row-hover: rgba(25,103,210,.06);
  --accent-row-border: rgba(25,103,210,.18);
  --accent-focus-border: rgba(25,103,210,.55);
  --accent-focus-ring: rgba(25,103,210,.14);

  --card-bg: rgb(255 255 255 / 0.92);
  --card-border: rgba(0,0,0,.10);
  --side-bg: rgb(255 255 255 / 0.78);
  --topbar-bg: rgb(255 255 255 / 0.86);

  --btn-ink: #ffffff;
  --btn-secondary-bg: rgb(255 255 255 / 0.86);
  --btn-secondary-bg-hover: rgb(255 255 255 / 0.96);
  --btn-secondary-border: rgba(0,0,0,.14);

  --panel-bg: rgb(255 255 255 / 0.78);
  --panel-bg2: rgb(255 255 255 / 0.86);
  --chip-bg: rgb(255 255 255 / 0.90);
  --chip-border: rgba(0,0,0,.12);

  --control-bg: rgb(255 255 255 / 0.92);
  --control-border: rgba(0,0,0,.14);
  --control-border-hover: rgba(25,103,210,.40);

  --select-bg: rgb(255 255 255 / 0.96);
  --dd-bg: rgb(255 255 255 / 0.96);
  --dd-border: rgba(0,0,0,.14);

  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%231967d2' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #ffffff;

  /* Tables (Google Sheets vibe). */
  --table-head-bg: #f1f3f4;
  --table-sticky-bg: #f1f3f4;
  --table-bg: #ffffff;
  --table-inset-border: rgba(0,0,0,.08);
  --table-head-cell-bg: #f1f3f4;
  --table-subs-bg: #ffffff;
  --table-subs-head-bg: #f1f3f4;
  --stroke-strong: rgba(0,0,0,.14);

  --row-bg: #ffffff;
  --row-bg-even: #fafafa;
  --row-border: rgba(0,0,0,.10);
  --row-hover-bg: rgba(25,103,210,.08);
  --row-hover-border: rgba(25,103,210,.22);

  --toast-bg: rgb(255 255 255 / 0.92);
  --toast-border: rgba(0,0,0,.14);

  --overlay-bg: rgba(0,0,0,.32);
  --side-bg-mobile: rgb(255 255 255 / 0.92);
  --status-dot-ring: rgba(0,0,0,.18);
  --status-dot-inset: rgba(0,0,0,.10);
}

/*
  Гибридная тема: UI как Defo, но таблицы как в Light.
  Почему так: data-theme применяется глобально, поэтому вместо копирования/переписывания
  всей темы мы переопределяем только "палитру таблиц" (CSS vars), и только внутри
  контейнеров таблиц. Так .a-card/.a-btn/формы и т.п. остаются в стиле Defo.
*/
[data-theme="defo_light_tables"]{
  /* Базовая палитра остается дефолтной (см. :root / [data-theme="defo"]). */
}

[data-theme="sand"]{
  --bg:#0b0a08;
  --bg2:#12100c;
  --panel:#151410;
  --panel2:#1b1914;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(245,242,235,.94);
  --muted:rgba(245,242,235,.68);
  --muted2:rgba(245,242,235,.52);
  --gold:#e0b263;
  --gold2:#be8a3a;

  --bg-spot1: rgba(224,178,99,.16);
  --bg-spot2: rgba(224,178,99,.07);
  --active-bg: rgba(224,178,99,.10);
  --active-border: rgba(224,178,99,.24);
  --accent-soft: rgba(224,178,99,.14);
  --accent-border: rgba(224,178,99,.30);
  --accent-hover-bg: rgba(224,178,99,.08);
  --accent-row-hover: rgba(224,178,99,.06);
  --accent-row-border: rgba(224,178,99,.22);
  --accent-focus-border: rgba(224,178,99,.55);
  --accent-focus-ring: rgba(224,178,99,.14);
  --control-border-hover: rgba(224,178,99,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0b263' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #10100c;
}

[data-theme="ocean"]{
  --bg:#070b10;
  --bg2:#0c121a;
  --panel:#101821;
  --panel2:#141f2a;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(241,247,252,.94);
  --muted:rgba(241,247,252,.70);
  --muted2:rgba(241,247,252,.54);
  --gold:#5fc2d0;
  --gold2:#2d98ad;

  --bg-spot1: rgba(95,194,208,.14);
  --bg-spot2: rgba(95,194,208,.06);
  --active-bg: rgba(95,194,208,.10);
  --active-border: rgba(95,194,208,.24);
  --accent-soft: rgba(95,194,208,.12);
  --accent-border: rgba(95,194,208,.28);
  --accent-hover-bg: rgba(95,194,208,.08);
  --accent-row-hover: rgba(95,194,208,.06);
  --accent-row-border: rgba(95,194,208,.20);
  --accent-focus-border: rgba(95,194,208,.55);
  --accent-focus-ring: rgba(95,194,208,.14);
  --control-border-hover: rgba(95,194,208,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%235fc2d0' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0c1118;
}

[data-theme="forest"]{
  --bg:#07100a;
  --bg2:#0c1710;
  --panel:#111d15;
  --panel2:#15241a;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(243,252,246,.94);
  --muted:rgba(243,252,246,.70);
  --muted2:rgba(243,252,246,.54);
  --gold:#6bd18a;
  --gold2:#2fa86a;

  --bg-spot1: rgba(107,209,138,.14);
  --bg-spot2: rgba(107,209,138,.06);
  --active-bg: rgba(107,209,138,.10);
  --active-border: rgba(107,209,138,.24);
  --accent-soft: rgba(107,209,138,.12);
  --accent-border: rgba(107,209,138,.28);
  --accent-hover-bg: rgba(107,209,138,.08);
  --accent-row-hover: rgba(107,209,138,.06);
  --accent-row-border: rgba(107,209,138,.20);
  --accent-focus-border: rgba(107,209,138,.55);
  --accent-focus-ring: rgba(107,209,138,.14);
  --control-border-hover: rgba(107,209,138,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%236bd18a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0c1510;
}

[data-theme="paper"]{
  --bg:#0b0b0a;
  --bg2:#121110;
  --panel:#151413;
  --panel2:#1b1a18;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(246,242,234,.94);
  --muted:rgba(246,242,234,.68);
  --muted2:rgba(246,242,234,.52);
  --gold:#caa46a;
  --gold2:#a57a3c;

  --bg-spot1: rgba(202,164,106,.14);
  --bg-spot2: rgba(202,164,106,.06);
  --active-bg: rgba(202,164,106,.10);
  --active-border: rgba(202,164,106,.24);
  --accent-soft: rgba(202,164,106,.12);
  --accent-border: rgba(202,164,106,.28);
  --accent-hover-bg: rgba(202,164,106,.08);
  --accent-row-hover: rgba(202,164,106,.06);
  --accent-row-border: rgba(202,164,106,.20);
  --accent-focus-border: rgba(202,164,106,.55);
  --accent-focus-ring: rgba(202,164,106,.14);
  --control-border-hover: rgba(202,164,106,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23caa46a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #11100f;
}

[data-theme="graphite"]{
  --bg:#070a0f;
  --bg2:#0c1017;
  --panel:#111724;
  --panel2:#151d2d;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(242,246,255,.94);
  --muted:rgba(242,246,255,.70);
  --muted2:rgba(242,246,255,.54);
  --gold:#8ab4f8;
  --gold2:#5a8dee;

  --bg-spot1: rgba(138,180,248,.14);
  --bg-spot2: rgba(138,180,248,.06);
  --active-bg: rgba(138,180,248,.10);
  --active-border: rgba(138,180,248,.24);
  --accent-soft: rgba(138,180,248,.12);
  --accent-border: rgba(138,180,248,.28);
  --accent-hover-bg: rgba(138,180,248,.08);
  --accent-row-hover: rgba(138,180,248,.06);
  --accent-row-border: rgba(138,180,248,.20);
  --accent-focus-border: rgba(138,180,248,.55);
  --accent-focus-ring: rgba(138,180,248,.14);
  --control-border-hover: rgba(138,180,248,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%238ab4f8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0b0f16;
}

/* Новые темы (UI-палитры). Важно: таблицы принудительно держим в светлой палитре ниже. */

/* Arctic: светлая, холодная, с небесно-синим акцентом. */
[data-theme="arctic"]{
  --shadow-rgb: 0 0 0;
  --sheen-rgb: 255 255 255;
  --shadow:0 22px 55px rgb(var(--shadow-rgb) / 0.14);
  --shadow-sm:0 12px 26px rgb(var(--shadow-rgb) / 0.10);
  --shadow-md:0 14px 30px rgb(var(--shadow-rgb) / 0.12);
  --shadow-lg:0 18px 46px rgb(var(--shadow-rgb) / 0.16);
  --btn-shadow:0 14px 30px rgb(var(--shadow-rgb) / 0.14);
  --btn-shadow-hover:0 18px 40px rgb(var(--shadow-rgb) / 0.18);
  --table-head-shadow:0 10px 18px rgb(var(--shadow-rgb) / 0.08);
  --inset-shadow-1: inset 0 0 0 1px rgb(var(--shadow-rgb) / 0.10);

  --bg:#eef4fb;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel2:#e9f0f8;
  --stroke:rgba(0,0,0,.08);
  --stroke2:rgba(0,0,0,.12);
  --ink:rgba(18,18,18,.96);
  --muted:rgba(18,18,18,.72);
  --muted2:rgba(18,18,18,.56);
  --gold:#0ea5e9;
  --gold2:#0284c7;

  --bg-spot1: rgba(14,165,233,.10);
  --bg-spot2: rgba(14,165,233,.05);
  --bg-spot3: rgba(0,0,0,.08);
  --hover-bg: rgba(14,165,233,.06);
  --active-bg: rgba(14,165,233,.10);
  --active-border: rgba(14,165,233,.18);
  --accent-soft: rgba(14,165,233,.08);
  --accent-border: rgba(14,165,233,.28);
  --accent-hover-bg: rgba(14,165,233,.08);
  --accent-row-hover: rgba(14,165,233,.06);
  --accent-row-border: rgba(14,165,233,.18);
  --accent-focus-border: rgba(14,165,233,.55);
  --accent-focus-ring: rgba(14,165,233,.14);

  --card-bg: rgb(255 255 255 / 0.92);
  --card-border: rgba(0,0,0,.10);
  --side-bg: rgb(255 255 255 / 0.78);
  --topbar-bg: rgb(255 255 255 / 0.86);
  --btn-ink: #ffffff;
  --btn-secondary-bg: rgb(255 255 255 / 0.86);
  --btn-secondary-bg-hover: rgb(255 255 255 / 0.96);
  --btn-secondary-border: rgba(0,0,0,.14);
  --panel-bg: rgb(255 255 255 / 0.78);
  --panel-bg2: rgb(255 255 255 / 0.86);
  --chip-bg: rgb(255 255 255 / 0.90);
  --chip-border: rgba(0,0,0,.12);
  --control-bg: rgb(255 255 255 / 0.92);
  --control-border: rgba(0,0,0,.14);
  --control-border-hover: rgba(14,165,233,.40);
  --select-bg: rgb(255 255 255 / 0.96);
  --dd-bg: rgb(255 255 255 / 0.96);
  --dd-border: rgba(0,0,0,.14);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%230ea5e9' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #ffffff;
  --toast-bg: rgb(255 255 255 / 0.92);
  --toast-border: rgba(0,0,0,.14);
  --overlay-bg: rgba(0,0,0,.32);
  --side-bg-mobile: rgb(255 255 255 / 0.92);
  --status-dot-ring: rgba(0,0,0,.18);
  --status-dot-inset: rgba(0,0,0,.10);
}

/* Sakura: светлая, теплая, с розовым акцентом. */
[data-theme="sakura"]{
  --shadow-rgb: 0 0 0;
  --sheen-rgb: 255 255 255;
  --shadow:0 22px 55px rgb(var(--shadow-rgb) / 0.14);
  --shadow-sm:0 12px 26px rgb(var(--shadow-rgb) / 0.10);
  --shadow-md:0 14px 30px rgb(var(--shadow-rgb) / 0.12);
  --shadow-lg:0 18px 46px rgb(var(--shadow-rgb) / 0.16);
  --btn-shadow:0 14px 30px rgb(var(--shadow-rgb) / 0.14);
  --btn-shadow-hover:0 18px 40px rgb(var(--shadow-rgb) / 0.18);
  --table-head-shadow:0 10px 18px rgb(var(--shadow-rgb) / 0.08);
  --inset-shadow-1: inset 0 0 0 1px rgb(var(--shadow-rgb) / 0.10);

  --bg:#fbf3f5;
  --bg2:#fffefe;
  --panel:#ffffff;
  --panel2:#f6e8ec;
  --stroke:rgba(0,0,0,.08);
  --stroke2:rgba(0,0,0,.12);
  --ink:rgba(18,18,18,.96);
  --muted:rgba(18,18,18,.72);
  --muted2:rgba(18,18,18,.56);
  --gold:#e11d48;
  --gold2:#be123c;

  --bg-spot1: rgba(225,29,72,.10);
  --bg-spot2: rgba(225,29,72,.05);
  --bg-spot3: rgba(0,0,0,.08);
  --hover-bg: rgba(225,29,72,.06);
  --active-bg: rgba(225,29,72,.10);
  --active-border: rgba(225,29,72,.18);
  --accent-soft: rgba(225,29,72,.08);
  --accent-border: rgba(225,29,72,.28);
  --accent-hover-bg: rgba(225,29,72,.08);
  --accent-row-hover: rgba(225,29,72,.06);
  --accent-row-border: rgba(225,29,72,.18);
  --accent-focus-border: rgba(225,29,72,.55);
  --accent-focus-ring: rgba(225,29,72,.14);

  --card-bg: rgb(255 255 255 / 0.92);
  --card-border: rgba(0,0,0,.10);
  --side-bg: rgb(255 255 255 / 0.78);
  --topbar-bg: rgb(255 255 255 / 0.86);
  --btn-ink: #ffffff;
  --btn-secondary-bg: rgb(255 255 255 / 0.86);
  --btn-secondary-bg-hover: rgb(255 255 255 / 0.96);
  --btn-secondary-border: rgba(0,0,0,.14);
  --panel-bg: rgb(255 255 255 / 0.78);
  --panel-bg2: rgb(255 255 255 / 0.86);
  --chip-bg: rgb(255 255 255 / 0.90);
  --chip-border: rgba(0,0,0,.12);
  --control-bg: rgb(255 255 255 / 0.92);
  --control-border: rgba(0,0,0,.14);
  --control-border-hover: rgba(225,29,72,.40);
  --select-bg: rgb(255 255 255 / 0.96);
  --dd-bg: rgb(255 255 255 / 0.96);
  --dd-border: rgba(0,0,0,.14);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23e11d48' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #ffffff;
  --toast-bg: rgb(255 255 255 / 0.92);
  --toast-border: rgba(0,0,0,.14);
  --overlay-bg: rgba(0,0,0,.32);
  --side-bg-mobile: rgb(255 255 255 / 0.92);
  --status-dot-ring: rgba(0,0,0,.18);
  --status-dot-inset: rgba(0,0,0,.10);
}

/* Latte: светлая, кремовая, с кофейным акцентом. */
[data-theme="latte"]{
  --shadow-rgb: 0 0 0;
  --sheen-rgb: 255 255 255;
  --shadow:0 22px 55px rgb(var(--shadow-rgb) / 0.14);
  --shadow-sm:0 12px 26px rgb(var(--shadow-rgb) / 0.10);
  --shadow-md:0 14px 30px rgb(var(--shadow-rgb) / 0.12);
  --shadow-lg:0 18px 46px rgb(var(--shadow-rgb) / 0.16);
  --btn-shadow:0 14px 30px rgb(var(--shadow-rgb) / 0.14);
  --btn-shadow-hover:0 18px 40px rgb(var(--shadow-rgb) / 0.18);
  --table-head-shadow:0 10px 18px rgb(var(--shadow-rgb) / 0.08);
  --inset-shadow-1: inset 0 0 0 1px rgb(var(--shadow-rgb) / 0.10);

  --bg:#f7f2ea;
  --bg2:#fffdfb;
  --panel:#ffffff;
  --panel2:#f0e6d8;
  --stroke:rgba(0,0,0,.08);
  --stroke2:rgba(0,0,0,.12);
  --ink:rgba(18,18,18,.96);
  --muted:rgba(18,18,18,.72);
  --muted2:rgba(18,18,18,.56);
  --gold:#b45309;
  --gold2:#92400e;

  --bg-spot1: rgba(180,83,9,.10);
  --bg-spot2: rgba(180,83,9,.05);
  --bg-spot3: rgba(0,0,0,.08);
  --hover-bg: rgba(180,83,9,.06);
  --active-bg: rgba(180,83,9,.10);
  --active-border: rgba(180,83,9,.18);
  --accent-soft: rgba(180,83,9,.08);
  --accent-border: rgba(180,83,9,.28);
  --accent-hover-bg: rgba(180,83,9,.08);
  --accent-row-hover: rgba(180,83,9,.06);
  --accent-row-border: rgba(180,83,9,.18);
  --accent-focus-border: rgba(180,83,9,.55);
  --accent-focus-ring: rgba(180,83,9,.14);

  --card-bg: rgb(255 255 255 / 0.92);
  --card-border: rgba(0,0,0,.10);
  --side-bg: rgb(255 255 255 / 0.78);
  --topbar-bg: rgb(255 255 255 / 0.86);
  --btn-ink: #ffffff;
  --btn-secondary-bg: rgb(255 255 255 / 0.86);
  --btn-secondary-bg-hover: rgb(255 255 255 / 0.96);
  --btn-secondary-border: rgba(0,0,0,.14);
  --panel-bg: rgb(255 255 255 / 0.78);
  --panel-bg2: rgb(255 255 255 / 0.86);
  --chip-bg: rgb(255 255 255 / 0.90);
  --chip-border: rgba(0,0,0,.12);
  --control-bg: rgb(255 255 255 / 0.92);
  --control-border: rgba(0,0,0,.14);
  --control-border-hover: rgba(180,83,9,.40);
  --select-bg: rgb(255 255 255 / 0.96);
  --dd-bg: rgb(255 255 255 / 0.96);
  --dd-border: rgba(0,0,0,.14);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23b45309' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #ffffff;
  --toast-bg: rgb(255 255 255 / 0.92);
  --toast-border: rgba(0,0,0,.14);
  --overlay-bg: rgba(0,0,0,.32);
  --side-bg-mobile: rgb(255 255 255 / 0.92);
  --status-dot-ring: rgba(0,0,0,.18);
  --status-dot-inset: rgba(0,0,0,.10);
}

/* Midnight: глубокий темно-синий, акцент - яркий скай. */
[data-theme="midnight"]{
  --bg:#070b16;
  --bg2:#0c1224;
  --panel:#0f162b;
  --panel2:#121b33;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(240,246,255,.94);
  --muted:rgba(240,246,255,.70);
  --muted2:rgba(240,246,255,.54);
  --gold:#38bdf8;
  --gold2:#0284c7;

  --bg-spot1: rgba(56,189,248,.14);
  --bg-spot2: rgba(56,189,248,.06);
  --active-bg: rgba(56,189,248,.10);
  --active-border: rgba(56,189,248,.24);
  --accent-soft: rgba(56,189,248,.12);
  --accent-border: rgba(56,189,248,.28);
  --accent-hover-bg: rgba(56,189,248,.08);
  --accent-row-hover: rgba(56,189,248,.06);
  --accent-row-border: rgba(56,189,248,.20);
  --accent-focus-border: rgba(56,189,248,.55);
  --accent-focus-ring: rgba(56,189,248,.14);
  --control-border-hover: rgba(56,189,248,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%2338bdf8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0b1020;
}

/* Ember: темная угольная, акцент - огненно-оранжевый. */
[data-theme="ember"]{
  --bg:#0b0705;
  --bg2:#140b07;
  --panel:#1a100b;
  --panel2:#20140e;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(252,247,242,.94);
  --muted:rgba(252,247,242,.70);
  --muted2:rgba(252,247,242,.54);
  --gold:#fb923c;
  --gold2:#f97316;

  --bg-spot1: rgba(251,146,60,.16);
  --bg-spot2: rgba(251,146,60,.07);
  --active-bg: rgba(251,146,60,.10);
  --active-border: rgba(251,146,60,.24);
  --accent-soft: rgba(251,146,60,.14);
  --accent-border: rgba(251,146,60,.30);
  --accent-hover-bg: rgba(251,146,60,.08);
  --accent-row-hover: rgba(251,146,60,.06);
  --accent-row-border: rgba(251,146,60,.22);
  --accent-focus-border: rgba(251,146,60,.55);
  --accent-focus-ring: rgba(251,146,60,.14);
  --control-border-hover: rgba(251,146,60,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23fb923c' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #120a06;
}

/* Citrus: темная оливковая, акцент - лайм. */
[data-theme="citrus"]{
  --bg:#070a06;
  --bg2:#0e130a;
  --panel:#121a0e;
  --panel2:#172012;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(246,255,244,.94);
  --muted:rgba(246,255,244,.70);
  --muted2:rgba(246,255,244,.54);
  --gold:#a3e635;
  --gold2:#65a30d;

  --bg-spot1: rgba(163,230,53,.14);
  --bg-spot2: rgba(163,230,53,.06);
  --active-bg: rgba(163,230,53,.10);
  --active-border: rgba(163,230,53,.24);
  --accent-soft: rgba(163,230,53,.12);
  --accent-border: rgba(163,230,53,.28);
  --accent-hover-bg: rgba(163,230,53,.08);
  --accent-row-hover: rgba(163,230,53,.06);
  --accent-row-border: rgba(163,230,53,.20);
  --accent-focus-border: rgba(163,230,53,.55);
  --accent-focus-ring: rgba(163,230,53,.14);
  --control-border-hover: rgba(163,230,53,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23a3e635' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0c1108;
}

/* Terminal: почти черная, акцент - неоновый зеленый. */
[data-theme="terminal"]{
  --bg:#050606;
  --bg2:#0a0c0a;
  --panel:#0c100c;
  --panel2:#101610;
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.16);
  --ink:rgba(245,252,246,.94);
  --muted:rgba(245,252,246,.72);
  --muted2:rgba(245,252,246,.56);
  --gold:#00e676;
  --gold2:#00c853;

  --bg-spot1: rgba(0,230,118,.14);
  --bg-spot2: rgba(0,230,118,.06);
  --active-bg: rgba(0,230,118,.10);
  --active-border: rgba(0,230,118,.24);
  --accent-soft: rgba(0,230,118,.12);
  --accent-border: rgba(0,230,118,.28);
  --accent-hover-bg: rgba(0,230,118,.08);
  --accent-row-hover: rgba(0,230,118,.06);
  --accent-row-border: rgba(0,230,118,.20);
  --accent-focus-border: rgba(0,230,118,.55);
  --accent-focus-ring: rgba(0,230,118,.14);
  --control-border-hover: rgba(0,230,118,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%2300e676' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #090c09;
}

/* Royal: глубокая фиолетовая, акцент - насыщенный violet. */
[data-theme="royal"]{
  --bg:#070611;
  --bg2:#0f0b1d;
  --panel:#14102a;
  --panel2:#1a1436;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(248,246,255,.94);
  --muted:rgba(248,246,255,.70);
  --muted2:rgba(248,246,255,.54);
  --gold:#a78bfa;
  --gold2:#7c3aed;

  --bg-spot1: rgba(167,139,250,.14);
  --bg-spot2: rgba(167,139,250,.06);
  --active-bg: rgba(167,139,250,.10);
  --active-border: rgba(167,139,250,.24);
  --accent-soft: rgba(167,139,250,.12);
  --accent-border: rgba(167,139,250,.28);
  --accent-hover-bg: rgba(167,139,250,.08);
  --accent-row-hover: rgba(167,139,250,.06);
  --accent-row-border: rgba(167,139,250,.20);
  --accent-focus-border: rgba(167,139,250,.55);
  --accent-focus-ring: rgba(167,139,250,.14);
  --control-border-hover: rgba(167,139,250,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23a78bfa' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0b0818;

  /* В этом акценте лучше читается белый текст на кнопке. */
  --btn-ink:#ffffff;
}

/* Harbor: глубокий teal, акцент - теплый янтарь. */
[data-theme="harbor"]{
  --bg:#061015;
  --bg2:#0b1820;
  --panel:#0f1f28;
  --panel2:#132733;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(241,252,252,.94);
  --muted:rgba(241,252,252,.70);
  --muted2:rgba(241,252,252,.54);
  --gold:#fbbf24;
  --gold2:#f59e0b;

  --bg-spot1: rgba(251,191,36,.14);
  --bg-spot2: rgba(251,191,36,.06);
  --active-bg: rgba(251,191,36,.10);
  --active-border: rgba(251,191,36,.24);
  --accent-soft: rgba(251,191,36,.12);
  --accent-border: rgba(251,191,36,.28);
  --accent-hover-bg: rgba(251,191,36,.08);
  --accent-row-hover: rgba(251,191,36,.06);
  --accent-row-border: rgba(251,191,36,.20);
  --accent-focus-border: rgba(251,191,36,.55);
  --accent-focus-ring: rgba(251,191,36,.14);
  --control-border-hover: rgba(251,191,36,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbbf24' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #0a141b;
}

/* Oxide: ржаво-красная база + холодный циан акцент. */
[data-theme="oxide"]{
  --bg:#160707;
  --bg2:#240b0b;
  --panel:#2b1010;
  --panel2:#341515;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --ink:rgba(255,244,244,.94);
  --muted:rgba(255,244,244,.70);
  --muted2:rgba(255,244,244,.54);
  --gold:#22d3ee;
  --gold2:#0891b2;

  --bg-spot1: rgba(34,211,238,.14);
  --bg-spot2: rgba(34,211,238,.06);
  --active-bg: rgba(34,211,238,.10);
  --active-border: rgba(34,211,238,.24);
  --accent-soft: rgba(34,211,238,.12);
  --accent-border: rgba(34,211,238,.28);
  --accent-hover-bg: rgba(34,211,238,.08);
  --accent-row-hover: rgba(34,211,238,.06);
  --accent-row-border: rgba(34,211,238,.20);
  --accent-focus-border: rgba(34,211,238,.55);
  --accent-focus-ring: rgba(34,211,238,.14);
  --control-border-hover: rgba(34,211,238,.35);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%2322d3ee' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #1a0a0a;
}

/* Keep horizontal scrolling inside table containers, not the page. */
.a-main{overflow-x:hidden}

*{box-sizing:border-box}
html{min-height:100%}
html{
  margin:0;
  background:
    radial-gradient(30% 22% at 12% 6%, var(--bg-spot1), transparent 62%),
    radial-gradient(28% 20% at 88% 18%, var(--bg-spot2), transparent 64%),
    radial-gradient(35% 28% at 50% 110%, var(--bg-spot3), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-repeat:no-repeat;
  background-attachment:scroll;
}

body{
  min-height:100%;
  margin:0;
  color:var(--ink);
  background:transparent;
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.a-bg{display:none}

/* Mobile navigation shell (off-canvas)
   - По умолчанию скрыто, чтобы не влиять на desktop.
   - На <=960px показываем фиксированный topbar и выезжающую навигацию.
*/
.a-m-topbar{display:none}
.a-nav-overlay{display:none}

.a-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
/* Важно для grid: иначе контент (таблицы) может раздувать страницу по X на мобиле. */
.a-shell > *{min-width:0}

.a-side{
  position:sticky;top:0;height:100vh;
  padding:22px 18px;
  border-right:1px solid var(--stroke);
  background: var(--side-bg);
}

.a-logo{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.a-logo-img{
  height:32px;width:auto;
  flex-shrink:0;
}
.a-logo-mark{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: var(--accent-soft);
  border:1px solid var(--accent-border);
  box-shadow: var(--shadow-sm);
  font-weight:800;
  letter-spacing:.06em;
}
.a-logo-name{font-size:16px;letter-spacing:.10em;text-transform:uppercase;font-family:var(--font-serif)}
.a-logo-sub{font-size:12px;color:var(--muted);margin-top:2px}

.a-nav{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.a-nav-link{
  color:var(--ink);text-decoration:none;
  padding:11px 12px;border-radius:14px;
  border:1px solid transparent;
  background: transparent;
  font-weight:650;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.a-nav-link:hover{background:var(--hover-bg);transform: translateY(-1px)}
.a-nav-link.is-active{background:var(--active-bg);border-color:var(--active-border)}

@media (min-width: 961px){
  body.a-nav-top .a-shell{grid-template-columns:1fr}
  body.a-nav-top .a-side{display:none}

  body.a-nav-top .a-top{align-items:center}
  body.a-nav-top .a-top-logo{height:28px;width:auto;flex-shrink:0}
  body.a-nav-top .a-top-right{display:flex;align-items:center;gap:12px;min-width:0;width:100%}
  body.a-nav-top .a-top-nav{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;min-width:0;flex:1}

  body.a-nav-top .a-top-nav .a-nav-link{
    padding:9px 10px;
    border-radius:999px;
    font-weight:750;
    letter-spacing:.01em;
    transform:none;
  }
  body.a-nav-top .a-top-nav .a-nav-link:hover{transform:none}

  body.a-nav-top .a-top-logout{margin:0;margin-left:auto}
  body.a-nav-top .a-top-logout-btn{
    padding:9px 12px;
    border-radius:999px;
    border:1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color:var(--ink);
    font-weight:750;
    letter-spacing:.02em;
    cursor:pointer;
    white-space:nowrap;
  }
  body.a-nav-top .a-top-logout-btn:hover{background:var(--btn-secondary-bg-hover)}
}

.a-logout{margin-top:auto;padding-top:16px}
.a-logout-btn{
  width:100%;padding:11px 12px;border-radius:14px;
  border:1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color:var(--ink);
  font-weight:650;
}
.a-logout-btn:hover{background:var(--btn-secondary-bg-hover)}

.a-main{padding:22px 22px 30px}
.a-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.a-top-title{font-size:20px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-serif)}
.a-top-meta{display:flex;gap:8px;flex-wrap:wrap}
.a-chip{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid var(--chip-border);background:var(--chip-bg);color:var(--muted);font-size:12px}

/* На больших экранах (включая 4k) не ограничиваем ширину контента.
   Узкие формы при необходимости можно оставить через a-card (не wide). */
.a-content{max-width:none;width:100%}
.a-card:not(.a-card-wide){max-width:1120px}
.a-footer{margin-top:18px;color:var(--muted2);font-size:12px;font-family: var(--font-sans)}

.a-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.a-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.a-card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
.a-fit-card{display:inline-block;width:max-content;max-width:100%}
.a-card-wide{margin-top:14px}
.a-card-k{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-serif)}
.a-card-v{font-size:34px;margin-top:6px}
.a-card-h{color:var(--muted2);font-size:12px;margin-top:4px}
.a-card-title{font-size:14px;margin-bottom:10px;letter-spacing:.10em;text-transform:uppercase;font-family:var(--font-serif)}
.a-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Filters */
.a-filters{padding:14px}
.a-filters-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.a-filter{display:flex;flex-direction:column;gap:6px;min-width:220px}
.a-filter-right{margin-left:auto;min-width:auto}
.a-filter-label{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-serif)}

/* Allow some filters to shrink to content (used for Status + row color palette). */
.a-filter.a-filter-compact{min-width:auto}

/*
  Раскраска строк таблиц (как в Google Sheets)
  - UI-панель встраивается в блок фильтров, либо показывается компактно над таблицей.
  - Важно: используем отдельные классы, чтобы не влиять на существующие фильтры.
*/
.a-row-color-filter{min-width:auto}
.a-row-color-filter{flex:0 0 auto}
.a-row-color-panel-in-status{margin-top:6px}
.a-row-color-panel{display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:100%}
.a-row-color-title{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-serif)}
.a-row-color-controls{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:flex-start}
.a-row-color-row{display:flex;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.a-row-color-controls.is-disabled{opacity:.55;filter:saturate(.85)}

/* Keep action controls exactly same size */
.a-row-color-controls{
  --a-row-color-action-w: 92px;
  --a-row-color-action-h: 30px;
}

.a-row-color-swatch{
  width:18px;height:18px;border-radius:999px;
  border:1px solid var(--control-border);
  background: var(--sw, #ffffff);
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.10);
  cursor:pointer;
  padding:0;
}
.a-row-color-swatch[data-row-color]{
  --sw: attr(data-row-color color);
}
/* attr(... color) поддерживается не везде — поэтому дублируем цвет через inline style из JS не нужно.
   На практике кнопки будут иметь background через инлайн var(--a-row-color) на самой строке, а здесь
   оставляем нейтральный стиль и подкрашиваем через JS (см. admin-tables.js). */

/* Color input styled to match "Без цвета" button size. */
.a-row-color-picker{
  width:var(--a-row-color-action-w);
  height:var(--a-row-color-action-h);
  box-sizing:border-box;
  padding:0;
  border-radius:12px;
  border:1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  cursor:pointer;
}
.a-row-color-picker:hover{background:var(--btn-secondary-bg-hover)}

/* WebKit color control inner parts */
.a-row-color-picker::-webkit-color-swatch-wrapper{padding:4px;border-radius:10px}
.a-row-color-picker::-webkit-color-swatch{border:none;border-radius:8px}

.a-row-color-btn{
  border-radius:12px;
  border:1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--ink);
  min-width:var(--a-row-color-action-w);
  height:var(--a-row-color-action-h);
  box-sizing:border-box;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-weight:750;
  cursor:pointer;
  font-size:12px;
}
.a-row-color-btn:hover{background:var(--btn-secondary-bg-hover)}
.a-row-color-btn-ghost{background:transparent;border-color:var(--accent-border);color:var(--gold)}
.a-row-color-btn-ghost:hover{background:var(--accent-hover-bg)}

.a-row-color-hint{font-size:12px;color:var(--muted2);max-width:260px;text-align:right}

.a-row-color-floating{display:flex;justify-content:flex-end;margin-bottom:10px}
.a-row-color-floating-fixed{position:fixed;right:14px;top:14px;z-index:90}
.a-row-color-floating-fixed-br{position:fixed;right:20px;bottom:20px;z-index:90;
  background:var(--card-bg, var(--panel));
  border:1px solid var(--stroke2);
  border-radius:var(--radius, 18px);
  padding:12px 14px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Dropdown with checkboxes */
.a-dd{position:relative}
.a-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.a-dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:280px;max-width:calc(100vw - 24px);max-height:320px;overflow:auto;z-index:80;padding:10px;border-radius:18px;border:1px solid var(--dd-border);background:var(--dd-bg);box-shadow:var(--shadow);backdrop-filter:blur(10px);display:none}
.a-dd.is-open .a-dd-menu{display:block}
.a-dd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;color:var(--ink);cursor:pointer}
.a-dd-item:hover{background:var(--active-bg)}
.a-dd-item input{accent-color: var(--gold)}

.a-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}

.a-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:16px;
  color:var(--btn-ink);text-decoration:none;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  border: none;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease;
}
.a-btn:hover{transform: translateY(-1px);box-shadow:var(--btn-shadow-hover)}
.a-btn:active{transform: translateY(0)}
.a-btn-secondary{background: var(--btn-secondary-bg);color:var(--ink);border:1px solid var(--btn-secondary-border);box-shadow:none}
.a-btn-secondary:hover{background: var(--btn-secondary-bg-hover)}
.a-btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--accent-border);box-shadow:none}
.a-btn-ghost:hover{background: var(--accent-hover-bg)}

.a-form{display:flex;flex-direction:column;gap:10px}
.a-form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.a-form-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.a-label{font-size:12px;color:var(--muted);letter-spacing:.02em}
.a-input,.a-textarea{
  border-radius:16px;
  border:1px solid var(--control-border);
  padding:12px 12px;
  background: var(--control-bg);
  color:var(--ink);
  outline:none;
  font-size:14px;
  font-family: inherit;
}

/* Public-form textareas are reused on admin edit pages too. */
textarea.textarea{resize:none;overflow:hidden}

/* Make native checkbox/radio match current theme accent. */
input[type="checkbox"],
input[type="radio"]{accent-color: var(--gold)}
.a-input-sm{padding:8px 10px;border-radius:14px;font-size:13px}
.a-input:focus,.a-textarea:focus{border-color: var(--accent-focus-border);box-shadow:0 0 0 4px var(--accent-focus-ring)}

/* Select readability: some browsers render <select> with low-contrast default colors */
select.a-input{
  background-color: var(--select-bg);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(180deg, var(--control-sheen-top), var(--control-sheen-bot)),
    var(--a-select-arrow);
  background-repeat: no-repeat;
  background-position: 0 0, right 12px center;
  background-size: auto, 14px 14px;
}
select.a-input:hover{border-color:var(--control-border-hover)}
select.a-input:disabled{opacity:.65;cursor:not-allowed}
select.a-input option{
  background-color: var(--select-option-bg);
  color: var(--ink);
}

/* Compact select (used in submissions table) */
select.a-input.a-input-sm{
  padding-top:8px;
  padding-bottom:8px;
  padding-left:10px;
  padding-right:36px;
  border-radius:14px;
}
.a-help{color:var(--muted2);font-size:12px}
.a-field-error{color:var(--danger);font-size:12px}
.a-mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.a-alert{padding:12px 12px;border-radius:16px;border:1px solid var(--stroke2);background:var(--panel-bg)}
.a-alert-ok,.a-alert-success{border-color:color-mix(in srgb, var(--ok) 32%, transparent);background:color-mix(in srgb, var(--ok) 16%, transparent)}
.a-alert-danger{border-color:color-mix(in srgb, var(--danger) 32%, transparent);background:color-mix(in srgb, var(--danger) 16%, transparent)}

.a-toast{position:fixed;top:20px;right:20px;z-index:9999;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;letter-spacing:.01em;pointer-events:none;opacity:0;transform:translateY(-12px);transition:opacity .3s ease,transform .3s ease}
.a-toast.is-visible{opacity:1;transform:translateY(0)}
.a-toast-success{background:color-mix(in srgb, var(--ok) 18%, var(--panel-bg));border:1px solid color-mix(in srgb, var(--ok) 40%, transparent);color:var(--ok)}

.a-table{display:flex;flex-direction:column;gap:8px;min-width:max-content}
/* When JS autosizes columns, allow rows to shrink below hardcoded min-widths. */
.a-table.is-autosize .a-tr{min-width:0 !important;width:max-content;justify-content:start}

/* Common layout: filters block then table. */
.a-filters + .a-table-scroll{margin-top:12px}

/* Table sizing vars must be available for sticky header clones too. */
.a-table-scroll,
.a-table-sticky{
  --a-table-font-size-px: 13px;
  --a-table-cell-pad-y-px: 1px;
  --a-table-cell-pad-x-px: 4px;
  /*
    Базовая высота строки HTML-таблиц.
    Почему 24px: на странице "Заказы" строки фактически получаются ~24px из-за
    встроенных контролов (select) и их минимальной высоты в браузере.
    Если оставлять 14px, то таблицы без таких контролов (например "Клиенты")
    становятся заметно плотнее, и визуально "скачут" между страницами.
  */
  --a-table-row-h-px: 24px;

  /* Header row is intentionally taller than body rows. */
  --a-table-head-cell-pad-y-px: 6px;
  --a-table-head-row-h-px: 24px;
}

.a-table-scroll{
  overflow-x:auto;
  /* Keep page as vertical scroller (needed for sticky headers on page scroll). */
  overflow-y:visible;
  max-width:100%;
  position:relative;
  -webkit-overflow-scrolling:touch;
  /* Give content breathing room above horizontal scrollbar.
     Some browsers draw horizontal scrollbars as an overlay, so we
     intentionally make this a bit larger + add a spacer below. */
  padding-bottom:18px;
  /* Prefer reserving space for scrollbars when supported. */
  scrollbar-gutter: stable;

  /* Global table defaults (no UI). */
  --a-table-font-size-px: 13px;
  --a-table-cell-pad-y-px: 1px;
  --a-table-cell-pad-x-px: 4px;
  /* Дублируем для совместимости: часть кода/клонов читает vars с ближайшего .a-table-scroll. */
  --a-table-row-h-px: 24px;
}

/*
  Table palette (локально для таблиц)
  - Контракты таблиц завязаны на CSS vars, но глобальная тема общая для всей админки.
  - Чтобы сделать "Defo UI + Light tables" и не сломать карточки/кнопки/формы,
    используем отдельный набор переменных, наследуемый только внутри таблиц.
*/
.a-table-scroll,
.a-table-sticky,
.a-ht{
  color: var(--a-tbl-ink);

  --a-tbl-ink: var(--ink);
  --a-tbl-muted: var(--muted);

  --a-tbl-stroke2: var(--stroke2);
  --a-tbl-stroke-strong: var(--stroke-strong);

  --a-tbl-table-bg: var(--table-bg);
  --a-tbl-table-head-bg: var(--table-head-bg);
  --a-tbl-table-sticky-bg: var(--table-sticky-bg);
  --a-tbl-head-cell-bg: var(--table-head-cell-bg);
  --a-tbl-table-inset-border: var(--table-inset-border);
  --a-tbl-subs-bg: var(--table-subs-bg);
  --a-tbl-subs-head-bg: var(--table-subs-head-bg);

  --a-tbl-row-bg: var(--row-bg);
  --a-tbl-row-bg-even: var(--row-bg-even);
  --a-tbl-row-border: var(--row-border);
  --a-tbl-row-hover-bg: var(--row-hover-bg);
  --a-tbl-row-hover-border: var(--row-hover-border);

  --a-tbl-head-shadow: var(--table-head-shadow);

  /* Акцент внутри таблиц (стрелки сортировки, ресайз-хэндлы). */
  --a-tbl-sort: var(--gold);
  --a-tbl-resize-handle: var(--accent-row-border);
  --a-tbl-resize-handle-hover: var(--accent-focus-border);

  /* Status-ячейки: базовые цвета должны быть согласованы с фоном таблицы. */
  --a-tbl-neutral: var(--neutral);
  --a-tbl-status-bg-base: var(--status-bg-base);
  --a-tbl-status-bg-mix: var(--status-bg-mix);
  --a-tbl-status-border-base: var(--status-border-base);

  /*
    Outline для HTML-таблиц.
    Почему var: в Light мы убираем акцентное кольцо и оставляем нейтральную тень.
  */
  --a-tbl-outline-shadow: 0 0 0 2px var(--accent-row-border), var(--inset-shadow-1);

  /* Вложенные (subs) таблицы: в темных темах акцентная рамка, в Light - сетка. */
  --a-tbl-subs-border: 3px solid var(--accent-border);
  --a-tbl-subs-shadow: inset 0 0 0 1px var(--table-inset-border);
}

/* Light: сохраняем поведение "как в Google Sheets" (без акцентного outline). */
[data-theme="light"] .a-table-scroll,
[data-theme="light"] .a-table-sticky,
[data-theme="light"] .a-ht{
  color-scheme: light;
  --a-tbl-outline-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.08);
  --a-tbl-subs-border: 1px solid var(--stroke2);
  --a-tbl-subs-shadow: none;
}

/* Defo UI + Light tables: переопределяем только палитру таблиц. */
[data-theme="defo_light_tables"] .a-table-scroll,
[data-theme="defo_light_tables"] .a-table-sticky,
[data-theme="defo_light_tables"] .a-ht{
  /* Важно для скроллбаров: браузер рисует их светлыми внутри таблиц. */
  color-scheme: light;

  --a-tbl-ink: rgba(18,18,18,.96);
  --a-tbl-muted: rgba(18,18,18,.72);

  --a-tbl-stroke2: rgba(0,0,0,.12);
  --a-tbl-stroke-strong: rgba(0,0,0,.14);

  --a-tbl-table-bg: #ffffff;
  --a-tbl-table-head-bg: #f1f3f4;
  --a-tbl-table-sticky-bg: #f1f3f4;
  --a-tbl-head-cell-bg: #f1f3f4;
  --a-tbl-table-inset-border: rgba(0,0,0,.08);
  --a-tbl-subs-bg: #ffffff;
  --a-tbl-subs-head-bg: #f1f3f4;

  --a-tbl-row-bg: #ffffff;
  --a-tbl-row-bg-even: #fafafa;
  --a-tbl-row-border: rgba(0,0,0,.10);
  --a-tbl-row-hover-bg: rgba(25,103,210,.08);
  --a-tbl-row-hover-border: rgba(25,103,210,.22);

  --a-tbl-head-shadow: 0 10px 18px rgb(0 0 0 / 0.08);

  --a-tbl-sort: #1967d2;
  --a-tbl-resize-handle: rgba(25,103,210,.18);
  --a-tbl-resize-handle-hover: rgba(25,103,210,.55);

  /*
    Нейтральный fallback для статусов (когда цвет статуса не задан).
    Почему не var(--neutral): в гибридной теме глобальный --neutral рассчитан от темного bg.
  */
  --a-tbl-neutral: rgba(0,0,0,.26);
  --a-tbl-status-bg-base: rgb(241 243 244 / 0.56);
  --a-tbl-status-bg-mix: rgb(241 243 244 / 0.70);
  --a-tbl-status-border-base: rgb(0 0 0 / 0.096);

  --a-tbl-outline-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  --a-tbl-subs-border: 1px solid rgba(0,0,0,.12);
  --a-tbl-subs-shadow: none;

  /* Make controls inside tables match Light too. */
  --control-bg: rgb(255 255 255 / 0.92);
  --control-border: rgba(0,0,0,.14);
  --control-border-hover: rgba(25,103,210,.40);
  --select-bg: rgb(255 255 255 / 0.96);
  --dd-bg: rgb(255 255 255 / 0.96);
  --dd-border: rgba(0,0,0,.14);
  --a-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%231967d2' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --select-option-bg: #ffffff;
  --status-dot-ring: rgba(0,0,0,.18);
  --status-dot-inset: rgba(0,0,0,.10);

  /* Ensure any generic controls inside tables remain readable. */
  --ink: rgba(18,18,18,.96);
  --muted: rgba(18,18,18,.72);
  --muted2: rgba(18,18,18,.56);
}

/*
  Новые темы: UI может быть темным/цветным, но таблицы должны всегда оставаться светлыми.
  Переопределяем только "палитру таблиц" через --a-tbl-* и светлые переменные форм,
  чтобы контент таблицы читался одинаково в любой теме.
*/
:is(
  [data-theme="arctic"],
  [data-theme="sakura"],
  [data-theme="latte"],
  [data-theme="midnight"],
  [data-theme="ember"],
  [data-theme="citrus"],
  [data-theme="terminal"],
  [data-theme="royal"],
  [data-theme="harbor"],
  [data-theme="oxide"]
) .a-table-scroll,
:is(
  [data-theme="arctic"],
  [data-theme="sakura"],
  [data-theme="latte"],
  [data-theme="midnight"],
  [data-theme="ember"],
  [data-theme="citrus"],
  [data-theme="terminal"],
  [data-theme="royal"],
  [data-theme="harbor"],
  [data-theme="oxide"]
) .a-table-sticky,
:is(
  [data-theme="arctic"],
  [data-theme="sakura"],
  [data-theme="latte"],
  [data-theme="midnight"],
  [data-theme="ember"],
  [data-theme="citrus"],
  [data-theme="terminal"],
  [data-theme="royal"],
  [data-theme="harbor"],
  [data-theme="oxide"]
) .a-ht{
  color-scheme: light;

  --a-tbl-ink: rgba(18,18,18,.96);
  --a-tbl-muted: rgba(18,18,18,.72);
  --a-tbl-stroke2: rgba(0,0,0,.12);
  --a-tbl-stroke-strong: rgba(0,0,0,.14);

  --a-tbl-table-bg: #ffffff;
  --a-tbl-table-head-bg: #f1f3f4;
  --a-tbl-table-sticky-bg: #f1f3f4;
  --a-tbl-head-cell-bg: #f1f3f4;
  --a-tbl-table-inset-border: rgba(0,0,0,.08);
  --a-tbl-subs-bg: #ffffff;
  --a-tbl-subs-head-bg: #f1f3f4;

  --a-tbl-row-bg: #ffffff;
  --a-tbl-row-bg-even: #fafafa;
  --a-tbl-row-border: rgba(0,0,0,.10);

  /* Акцент внутри таблиц привязываем к теме, но оставляем светлую подложку. */
  --a-tbl-row-hover-bg: color-mix(in srgb, var(--gold) 12%, transparent);
  --a-tbl-row-hover-border: color-mix(in srgb, var(--gold) 32%, transparent);
  --a-tbl-sort: var(--gold);
  --a-tbl-resize-handle: color-mix(in srgb, var(--gold) 26%, transparent);
  --a-tbl-resize-handle-hover: color-mix(in srgb, var(--gold) 58%, transparent);

  --a-tbl-head-shadow: 0 10px 18px rgb(0 0 0 / 0.08);

  --a-tbl-neutral: rgba(0,0,0,.26);
  --a-tbl-status-bg-base: rgb(241 243 244 / 0.56);
  --a-tbl-status-bg-mix: rgb(241 243 244 / 0.70);
  --a-tbl-status-border-base: rgb(0 0 0 / 0.096);

  --a-tbl-outline-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  --a-tbl-subs-border: 1px solid rgba(0,0,0,.12);
  --a-tbl-subs-shadow: none;

  /* Контролы внутри таблиц должны вести себя как в Light. */
  --control-bg: rgb(255 255 255 / 0.92);
  --control-border: rgba(0,0,0,.14);
  --control-border-hover: color-mix(in srgb, var(--gold) 70%, rgba(0,0,0,.14));
  --select-bg: rgb(255 255 255 / 0.96);
  --dd-bg: rgb(255 255 255 / 0.96);
  --dd-border: rgba(0,0,0,.14);
  --select-option-bg: #ffffff;
  --status-dot-ring: rgba(0,0,0,.18);
  --status-dot-inset: rgba(0,0,0,.10);

  --ink: rgba(18,18,18,.96);
  --muted: rgba(18,18,18,.72);
  --muted2: rgba(18,18,18,.56);
}

[data-theme="light"] .a-hscroll,
[data-theme="defo_light_tables"] .a-hscroll{color-scheme: light}

:is(
  [data-theme="arctic"],
  [data-theme="sakura"],
  [data-theme="latte"],
  [data-theme="midnight"],
  [data-theme="ember"],
  [data-theme="citrus"],
  [data-theme="terminal"],
  [data-theme="royal"],
  [data-theme="harbor"],
  [data-theme="oxide"]
) .a-hscroll{color-scheme: light}

/* Real HTML table (test page)
   Compact cell separators with visible grid lines. */
.a-ht{
  border-collapse:collapse;
  border-spacing:0;
  /* Base table sizing: keep consistent across all pages (like /admin/submissions). */
  font-size: var(--a-table-font-size-px, 13px);
  width:max-content;
  min-width:0;
  border:1px solid var(--a-tbl-stroke2, var(--stroke2));
  background: var(--a-tbl-table-bg, var(--table-bg));
  border-radius: var(--radius);
  overflow:hidden;
  line-height:1;
}

/* Make HTML tables match Test Tables defaults everywhere. */
.a-ht thead th,
.a-ht tbody td{
  font-size: var(--a-table-font-size-px, inherit);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
  text-align: center;
}

/* Match submissions table: keep body rows single-line by default. */
.a-ht tbody td{white-space:nowrap}
.a-ht tbody td.is-wrap{white-space:normal}

/* Strong visual container for HTML tables inside scroll */
.a-ht-scroll{
  /* Don't wrap the table in a visible "block".
     Keep this class only as a hook if we need it later. */
  padding:0 !important;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Hide the native horizontal scrollbar for test HTML table.
   We use the fixed bottom proxy scrollbar instead. */
.a-ht-scroll{scrollbar-width:none;-ms-overflow-style:none}
.a-ht-scroll::-webkit-scrollbar{height:0}

/* Outline to separate the HTML table from the background */
.a-ht-outline{
  box-shadow: var(--a-tbl-outline-shadow);
}

/* Slightly brighter outer stroke for the HTML table */
.a-ht.a-ht-outline{
  border-color: var(--a-tbl-stroke-strong, var(--stroke-strong));
}

/* Make HTML table stand out from page background.
   Use mostly border/inset styles so it remains visible even when the
   scroll container clips outer shadows. */
.a-ht.a-ht-subs{
  border: var(--a-tbl-subs-border);
  background: var(--a-tbl-subs-bg);
  box-shadow: var(--a-tbl-subs-shadow);
}
.a-ht.a-ht-subs thead th{
  background: var(--a-tbl-subs-head-bg);
}

/* When the fixed bottom hscroll proxy is shown, hide native horizontal scrollbars
   inside table containers to avoid having two bars on desktop.
   Keep scrolling functional (trackpad/shift-wheel still works). */
@media (min-width: 961px){
  body.has-hscroll .a-table-scroll{scrollbar-width:none;-ms-overflow-style:none}
  body.has-hscroll .a-table-scroll::-webkit-scrollbar{height:0}
}
.a-ht th,
.a-ht td{
  padding-top: var(--a-table-cell-pad-y-px, calc(10px * var(--a-table-scale, 1) * var(--a-table-density, 1)));
  padding-bottom: var(--a-table-cell-pad-y-px, calc(10px * var(--a-table-scale, 1) * var(--a-table-density, 1)));
  padding-left: var(--a-table-cell-pad-x-px, calc(10px * var(--a-table-scale, 1)));
  padding-right: var(--a-table-cell-pad-x-px, calc(10px * var(--a-table-scale, 1)));
  border:1px solid var(--a-tbl-stroke2, var(--stroke2));
  background:var(--a-tbl-row-bg, var(--row-bg));
  vertical-align:middle;
  border-radius:0;
  text-align:center;
}

/* Make HTML table header row height match body rows. */
.a-ht thead tr{height: var(--a-table-head-row-h-px, var(--a-table-row-h-px, var(--a-row-h, clamp(32px, calc(38px * var(--a-table-scale, 1) * var(--a-table-density, 1)), 84px))))}
.a-ht tbody tr{height: var(--a-table-row-h-px, var(--a-row-h, clamp(32px, calc(38px * var(--a-table-scale, 1) * var(--a-table-density, 1)), 84px)))}
.a-ht thead th,
.a-ht tbody td{vertical-align:middle}
.a-ht thead th{text-align:center}
.a-ht thead th{
  background:var(--a-tbl-head-cell-bg, var(--table-head-cell-bg));
  font-size: var(--a-table-font-size-px, inherit);
  color:var(--a-tbl-ink, var(--ink));
  letter-spacing:0;
  text-transform:none;
  font-family:var(--font-sans);
  font-weight:400;
  /* Нужно для абсолютного позиционирования ручки ресайза. */
  position:relative;
  white-space:nowrap;

  /* Taller header cells for readability. */
  padding-top: var(--a-table-head-cell-pad-y-px, var(--a-table-cell-pad-y-px, 10px));
  padding-bottom: var(--a-table-head-cell-pad-y-px, var(--a-table-cell-pad-y-px, 10px));
}

.a-ht td.is-num,
.a-ht th.is-num{
  font-variant-numeric: tabular-nums;
}
.a-ht tbody tr:hover td{border-color:var(--a-tbl-row-hover-border, var(--row-hover-border));background:var(--a-tbl-row-hover-bg, var(--row-hover-bg))}
.a-ht-ellipsis{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Submissions table: prevent wrapping by default. */
.a-ht-subs td{white-space:nowrap}
.a-ht-subs td.a-ht-ellipsis{white-space:nowrap}

/* Test Tables: Status cell looks like colored text dropdown.
   - Cell background uses status color (--st)
   - Select looks like plain text (no borders, no arrow)
   - Row hover must NOT change the status cell color */
.a-ht-subs tbody td.a-status-cell{
  --st:var(--a-tbl-neutral, var(--neutral));
  background: var(--a-tbl-status-bg-base, var(--status-bg-base));
  border-color: var(--a-tbl-status-border-base, var(--status-border-base));
}
@supports (color: color-mix(in srgb, #000 50%, #fff)){
  .a-ht-subs tbody td.a-status-cell{
    background: color-mix(in srgb, var(--st) 32%, var(--a-tbl-status-bg-mix, var(--status-bg-mix)));
    border-color: color-mix(in srgb, var(--st) 55%, var(--a-tbl-status-border-base, var(--status-border-base)));
  }
}

.a-ht-subs td.a-status-cell select.a-status-select{
  width:100%;
  margin:0;
  padding:0;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  background-image:none !important;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  color: var(--a-tbl-ink, var(--ink));
  font-weight:650;
  text-align:center;
  text-align-last:center;
  cursor:pointer;
}
.a-ht-subs td.a-status-cell select.a-status-select:focus{outline:none}

/* Make the clickable status control fill the whole cell height */
.a-ht.a-ht-subs tbody td.a-status-cell{padding:0}
.a-ht.a-ht-subs tbody td.a-status-cell select.a-status-select{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:100%;
}

/* Sticky table header inside scroll container */
.a-table-scroll .a-tr.a-th{
  position:sticky;
  top:0;
  z-index:20;
  background: var(--a-tbl-table-head-bg, var(--table-head-bg));
  box-shadow: var(--a-tbl-head-shadow, var(--table-head-shadow));
}

/* Sticky header toggle (per table). */
.a-table-scroll.is-sticky-off .a-tr.a-th{
  position:static;
  top:auto;
  box-shadow:none;
}

/* Sticky table header for page scroll (JS-enhanced) */
.a-table-sticky{
  position:fixed;
  left:0;
  top:0;
  z-index:110;
  display:none;
  pointer-events:none;
}
.a-table-sticky .a-tr.a-th{
  pointer-events:auto;
  background: var(--a-tbl-table-head-bg, var(--table-head-bg));
  box-shadow: var(--a-tbl-head-shadow, var(--table-head-shadow));
}
/* Allow interactions for sticky HTML table header clone */
.a-table-sticky table{pointer-events:auto}

/* Sticky header should be opaque (avoid "transparent" look on scroll) */
.a-table-sticky .a-ht{
  background: var(--a-tbl-table-sticky-bg, var(--table-sticky-bg));
}
.a-table-sticky .a-ht thead th{
  background: var(--a-tbl-table-head-bg, var(--table-head-bg));
}

/* Sort indicators for HTML <table> headers */
.a-ht thead th.is-sortable{cursor:pointer;user-select:none;position:relative;padding-left:22px;padding-right:26px}
.a-ht thead th.is-sortable::before,
.a-ht thead th.is-sortable::after{
  content:"";
  position:absolute;
  top:50%;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  opacity:.25;
  transform:translateY(-50%);
}
.a-ht thead th.is-sortable::before{left:8px}
.a-ht thead th.is-sortable::after{right:18px}
.a-ht thead th.is-sortable::before{opacity:0}
.a-ht thead th.is-sortable.is-sort-asc::before,
.a-ht thead th.is-sortable.is-sort-asc::after{border-bottom:6px solid var(--a-tbl-sort, var(--gold))}
.a-ht thead th.is-sortable.is-sort-asc::after{opacity:1}
.a-ht thead th.is-sortable.is-sort-desc::before,
.a-ht thead th.is-sortable.is-sort-desc::after{border-top:6px solid var(--a-tbl-sort, var(--gold))}
.a-ht thead th.is-sortable.is-sort-desc::after{opacity:1}
.a-ht thead th.is-sortable:focus{outline:2px solid var(--a-tbl-resize-handle, var(--accent-row-border));outline-offset:2px}

/* Drag-resize колонок: ручка на заголовках (grid + HTML) */
.a-col-resize-handle{
  position:absolute;
  top:0;
  right:0;
  width:16px;
  height:100%;
  cursor:col-resize;
  z-index:5;
  touch-action:none;
  user-select:none;
}
.a-col-resize-handle::after{
  content:"";
  position:absolute;
  top:22%;
  bottom:22%;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:var(--a-tbl-resize-handle, var(--accent-row-border));
  border-radius:2px;
  opacity:0;
  transition:opacity .12s ease, background .12s ease;
}
.a-tr.a-th > div:hover .a-col-resize-handle::after,
.a-ht thead th:hover .a-col-resize-handle::after{
  opacity:1;
  background:var(--a-tbl-resize-handle-hover, var(--accent-focus-border));
}
body.a-col-resizing{cursor:col-resize;user-select:none}
body.a-col-resizing .a-col-resize-handle::after{opacity:1;background:var(--a-tbl-resize-handle-hover, var(--accent-focus-border))}

/* Drag&drop перестановка колонок: минимальные стили */
.a-col-draggable{cursor:grab}
body.a-col-dragging{cursor:grabbing;user-select:none}
body.a-col-dragging .a-col-draggable{cursor:grabbing}
.a-col-drop-indicator{
  position:fixed;
  left:0;
  top:0;
  height:0;
  width:2px;
  background:var(--a-tbl-col-drop-line, var(--accent-focus-border));
  border-radius:2px;
  z-index:220;
  opacity:0;
  pointer-events:none;
  transition:opacity .08s ease;
}
.a-col-drop-indicator.is-show{opacity:1}

/* Лейбл в HTML-таблице отделяем от ручки, чтобы sync sticky не разрушал DOM. */
.a-ht-th-label{display:inline}

/* Fixed horizontal scrollbar proxy for wide tables (desktop). */
.a-hscroll{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:12px;
  overflow-x:auto;
  overflow-y:hidden;
  z-index:140;
  background: transparent;
  backdrop-filter: none;
  display:none;
}
.a-hscroll-inner{height:1px}

@media (min-width: 961px){
  /* Keep a tiny offset so the fixed scrollbar doesn't feel like a big block. */
  body.has-hscroll{padding-bottom:6px}
  body.has-hscroll .a-hscroll{display:block}
}

/* Extra spacer so the last row never sits under the bottom scrollbar. */
.a-table-scroll::after{content:"";display:block;height:10px}



@media (min-width: 2000px){
  /* 4k/ultrawide: чуть крупнее строки, чтобы таблица не выглядела "игрушечной". */
  .a-tr{padding:14px 14px}
  .a-main{padding:26px 26px 34px}
}
.a-tr{display:grid;grid-template-columns:80px 1.2fr 1fr 1fr 1fr 160px;gap:calc(10px * var(--a-table-scale, 1));align-items:center;padding:calc(12px * var(--a-table-scale, 1) * var(--a-table-density, 1)) calc(12px * var(--a-table-scale, 1));border-radius:calc(16px * var(--a-table-scale, 1));border:1px solid var(--a-tbl-row-border, var(--row-border));background:var(--a-tbl-row-bg, var(--row-bg));font-size:var(--a-table-font-size-px, clamp(11px, calc(13px * var(--a-table-scale, 1)), 18px));line-height:1.2;min-height:var(--a-row-h, clamp(44px, calc(46px * var(--a-table-scale, 1) * var(--a-table-density, 1)), 84px))}
.a-tr > div{min-width:0}

/* Keep body rows single-line so header and rows match heights. */
.a-table .a-tr:not(.a-th) > div{white-space:nowrap}

/* Center specific columns content (Created + Status) */
.a-tr.a-tr-submissions > div:nth-child(1){text-align:center;display:flex;justify-content:center}
.a-tr.a-tr-submissions > .a-mono:nth-child(2){text-align:center}
.a-tr.a-tr-submissions > .a-status-cell{text-align:center;justify-content:center}

/* HTML table (test tables): center Created column */
.a-ht-subs tbody td:nth-child(1){text-align:center}
.a-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-tr.a-tr-bonuses{grid-template-columns:var(--a-cols, 160px 1.2fr 140px 120px minmax(360px, 1fr));min-width:1240px;gap:14px}
.a-tr.a-tr-performer-bonuses{grid-template-columns:var(--a-cols, 160px 140px minmax(360px, 1fr));min-width:700px;gap:14px}
.a-tr.a-tr-performer-payouts{grid-template-columns:var(--a-cols, 160px 140px minmax(360px, 1fr));min-width:700px;gap:14px}
.a-tr.a-tr-income-expenses{grid-template-columns:var(--a-cols, 160px 1.2fr 140px 120px minmax(360px, 1fr));min-width:1240px;gap:14px}
.a-tr.a-tr-dashboard-monthly{grid-template-columns:var(--a-cols, 46px 96px 120px 170px 120px 200px 140px 130px 160px 120px 140px 120px 120px);min-width:1860px;gap:14px}
.a-tr.a-tr-dashboard-monthly input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold)}
.a-tr.a-tr-submissions{grid-template-columns:var(--a-cols, 120px 120px 160px 240px 140px 120px 120px 120px 120px 220px 220px 220px 220px 220px);min-width:2490px}
.a-tr.a-tr-performer-orders{grid-template-columns:var(--a-cols, 220px 140px minmax(320px, 1fr) 180px);min-width:980px;gap:14px}
.a-tr.a-tr-performer-orders.is-income{grid-template-columns:var(--a-cols, 220px 140px minmax(320px, 1fr) 140px 180px);min-width:1120px}
.a-tr.a-tr-performer-dashboard-monthly{grid-template-columns:var(--a-cols, 100px 90px 140px 160px 140px 140px);min-width:770px;gap:14px}
.a-tr.a-tr-clients{grid-template-columns:var(--a-cols, 360px 140px 110px 140px 120px 120px 120px minmax(360px, 1fr));min-width:1510px;gap:14px}
.a-tr.a-tr-workers{grid-template-columns:var(--a-cols, 70px 280px 110px 140px 160px 140px 110px 1fr);min-width:1320px;gap:14px}
.a-tr.a-tr-teamleads{grid-template-columns:var(--a-cols, 70px 280px 110px 140px 160px 140px 110px 1fr);min-width:1320px;gap:14px}
.a-tr.a-tr-team{grid-template-columns:var(--a-cols, 120px 280px 110px 140px 160px 140px 140px 80px minmax(360px, 1fr));min-width:1620px;gap:14px}
.a-tr.a-tr-departments{grid-template-columns:var(--a-cols, minmax(260px, 1fr) 110px 120px 120px 120px 120px 110px);min-width:1080px;gap:14px}
.a-tr.a-tr-statuses{grid-template-columns:var(--a-cols, 140px 1fr);min-width:520px;gap:14px}
.a-tr.a-th{background:var(--a-tbl-head-cell-bg, var(--control-bg));color:var(--a-tbl-muted, var(--muted));letter-spacing:.10em;text-transform:uppercase;font-family:var(--font-serif);align-items:center}
.a-tr.a-th{
  /* Make header row taller than body rows (grid tables). */
  padding-top: var(--a-table-head-cell-pad-y-px, 12px);
  padding-bottom: var(--a-table-head-cell-pad-y-px, 12px);
  min-height: var(--a-table-head-row-h-px, var(--a-row-h, 44px));
}
.a-tr.a-th > div{
  /* Важно: позиционирование нужно для ручки ресайза колонок. */
  position:relative;
  /* Keep header height equal to rows: single line + ellipsis. */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.a-tr.a-th.a-tr-dashboard-monthly > div{white-space:nowrap;overflow:visible;text-overflow:clip;line-height:1.15;overflow-wrap:normal;word-break:normal}
.a-tr.a-th > div[data-sum-label]{white-space:normal}
.a-tr.a-th.a-tr-dashboard-monthly > div[data-sum-label]{white-space:nowrap}
.a-tr.a-th.a-tr-workers > div{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;line-height:1.15}
.a-tr.a-th > div.is-sortable{cursor:pointer;user-select:none;position:relative;padding-left:22px;padding-right:26px}
.a-tr.a-th > div.is-sortable::before,
.a-tr.a-th > div.is-sortable::after{
  content:"";
  position:absolute;
  top:50%;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  opacity:.25;
  transform:translateY(-50%);
}
.a-tr.a-th > div.is-sortable::before{left:8px}
/* Keep right arrow away from the resize handle area. */
.a-tr.a-th > div.is-sortable::after{right:18px}
.a-tr.a-th > div.is-sortable::before{opacity:0}
.a-tr.a-th > div.is-sortable.is-sort-asc::before,
.a-tr.a-th > div.is-sortable.is-sort-asc::after{border-bottom:6px solid var(--a-tbl-sort, var(--gold))}
.a-tr.a-th > div.is-sortable.is-sort-asc::after{opacity:1}
.a-tr.a-th > div.is-sortable.is-sort-desc::before,
.a-tr.a-th > div.is-sortable.is-sort-desc::after{border-top:6px solid var(--a-tbl-sort, var(--gold))}
.a-tr.a-th > div.is-sortable.is-sort-desc::after{opacity:1}
.a-tr.a-th > div.is-sortable:focus{outline:2px solid var(--a-tbl-resize-handle-hover, var(--control-border-hover));outline-offset:2px;border-radius:10px}
.a-table > .a-tr:not(.a-th):hover{border-color:var(--a-tbl-row-hover-border, var(--row-hover-border));background:var(--a-tbl-row-hover-bg, var(--row-hover-bg))}
.a-table > .a-tr:not(.a-th):nth-child(even){background:var(--a-tbl-row-bg-even, var(--row-bg-even))}
.a-row-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.a-link{color:var(--gold);text-decoration:none;font-weight:650}
.a-link:hover{text-decoration:underline}
.a-link-danger{color:var(--danger);background:transparent;border:none;padding:0;cursor:pointer}
.a-empty{padding:18px;color:var(--muted)}

/* В светлой палитре таблиц ссылки/empty должны быть читаемыми (локально, без влияния на UI). */
.a-table-scroll .a-link,
.a-table-sticky .a-link,
.a-ht .a-link{color:var(--a-tbl-sort, var(--gold))}
.a-table-scroll .a-empty,
.a-table-sticky .a-empty,
.a-ht .a-empty{color:var(--a-tbl-muted, var(--muted))}

/* Status visuals */
.a-table .a-status-cell{display:flex;align-items:center;gap:8px}
.a-table .a-status-cell.is-center{justify-content:center}
.is-center{text-align:center}

/* In HTML <table> keep td as table-cell (NOT flex), otherwise row height breaks. */
.a-ht tbody td.a-status-cell{display:table-cell !important}

/* Status column styling: colored outline based on --st */
.a-table .a-tr:not(.a-th) .a-status-cell,
.a-ht tbody td.a-status-cell{
  --st:var(--a-tbl-neutral, var(--neutral));
  border:1px solid var(--a-tbl-status-border-base, var(--status-border-base));
  background: var(--a-tbl-status-bg-base, var(--status-bg-base));
  border-radius:0;
  padding:2px 6px;
}

.a-status-cell .a-status-select{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  font-size:inherit;
  /* В статус-ячейках текст должен быть читабельным на палитре таблиц. */
  color: var(--a-tbl-ink, var(--ink));
  text-align:center;
  text-align-last:center;
}

/* Override compact select paddings inside status cell (more specific than select.a-input.a-input-sm). */
.a-status-cell select.a-input.a-input-sm.a-status-select{
  padding-top:4px;
  padding-bottom:4px;
}

.a-status-cell .a-status-select:hover,
.a-status-cell .a-status-select:focus{
  border-color:transparent;
  outline:none;
  box-shadow:none;
}

/* Test Tables (HTML submissions table): keep status color covering full cell,
   including when global status styles apply and when the row is hovered. */
.a-ht.a-ht-subs tbody td.a-status-cell{
  background: var(--a-tbl-status-bg-base, var(--status-bg-base));
  border-color: var(--a-tbl-status-border-base, var(--status-border-base));
}
@supports (color: color-mix(in srgb, #000 50%, #fff)){
  .a-ht.a-ht-subs tbody td.a-status-cell{
    background: color-mix(in srgb, var(--st) 32%, var(--a-tbl-status-bg-mix, var(--status-bg-mix)));
    border-color: color-mix(in srgb, var(--st) 55%, var(--a-tbl-status-border-base, var(--status-border-base)));
  }
}
.a-ht.a-ht-subs tbody tr:hover td.a-status-cell{
  /* Override generic row hover: keep the same status background */
  background: var(--a-tbl-status-bg-base, var(--status-bg-base));
  border-color: var(--a-tbl-status-border-base, var(--status-border-base));
}
@supports (color: color-mix(in srgb, #000 50%, #fff)){
  .a-ht.a-ht-subs tbody tr:hover td.a-status-cell{
    background: color-mix(in srgb, var(--st) 32%, var(--a-tbl-status-bg-mix, var(--status-bg-mix)));
    border-color: color-mix(in srgb, var(--st) 55%, var(--a-tbl-status-border-base, var(--status-border-base)));
  }
}

@supports (color: color-mix(in srgb, #000 50%, #fff)){
  .a-table .a-tr:not(.a-th) .a-status-cell,
  .a-ht tbody td.a-status-cell{
    border-color: color-mix(in srgb, var(--st) 55%, var(--a-tbl-status-border-base, var(--status-border-base)));
    background: color-mix(in srgb, var(--st) 12%, var(--a-tbl-status-bg-base, var(--status-bg-base)));
  }
}
.a-status-dot{width:10px;height:10px;border-radius:999px;box-shadow:0 0 0 2px var(--status-dot-ring), 0 0 0 1px var(--status-dot-inset) inset;flex:0 0 auto}
.a-status-dot.is-neutral{background:var(--neutral)}
.a-status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke2);background:var(--panel-bg)}
.a-status-pill{border-color: color-mix(in srgb, var(--st) 55%, var(--stroke2));background: color-mix(in srgb, var(--st) 14%, var(--panel-bg));}
.a-status-select{box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st) 42%, var(--stroke2));border-color: color-mix(in srgb, var(--st) 44%, var(--stroke2));}

/* Toast (for inline status changes) */
.a-toast{position:fixed;top:16px;right:16px;z-index:60;width:min(320px, calc(100vw - 32px));padding:10px 12px;border-radius:16px;border:1px solid var(--toast-border);background:var(--toast-bg);box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);opacity:0;transform:translateY(-8px);transition:opacity .18s ease, transform .18s ease;font-weight:750;letter-spacing:.01em}
.a-toast.is-show{opacity:1;transform:translateY(0)}
.a-toast.is-hide{opacity:0;transform:translateY(-6px)}
.a-toast-ok{border-color:color-mix(in srgb, var(--ok) 36%, transparent);background:color-mix(in srgb, var(--ok) 18%, transparent)}
.a-toast-danger{border-color:color-mix(in srgb, var(--danger) 36%, transparent);background:color-mix(in srgb, var(--danger) 18%, transparent)}

.a-kv{display:flex;flex-direction:column;gap:10px}
.a-kv-row{display:grid;grid-template-columns:220px 1fr;gap:12px;padding:10px;border-radius:16px;border:1px solid var(--stroke2);background:var(--panel-bg)}
.a-kv-k{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-serif);font-weight:700}
.a-kv-v{color:var(--ink);line-height:1.45}
.a-meta{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px;flex-wrap:wrap}

/* Login */
.login-shell{min-height:100vh;display:grid;place-items:center;padding:22px}
.login-card{
  width:min(520px, 100%);
  background: var(--card-bg);
  border:1px solid var(--stroke2);
  border-radius:24px;
  box-shadow: var(--shadow);
  padding:18px;
}
.login-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.login-mark{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.10em;border:1px solid var(--accent-border);background: var(--accent-soft)}
.login-title{font-size:18px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-serif)}
.login-sub{color:var(--muted);font-size:12px}
.login-form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.a-check{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}
.a-check input[type=checkbox]{accent-color:var(--gold)}
.login-remember input[type=checkbox]{accent-color:var(--gold)}

/* Login remember checkbox: make it visibly theme-colored even when unchecked. */
.a-check input[type=checkbox],
.login-remember input[type=checkbox]{
  width:16px;
  height:16px;
  margin:0;
  flex:0 0 auto;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:1.5px solid var(--accent-border);
  border-radius:4px;
  background: var(--control-bg);
  display:inline-grid;
  place-content:center;
}
.a-check input[type=checkbox]::before,
.login-remember input[type=checkbox]::before{
  content:"";
  width:8px;
  height:4px;
  border-left:2px solid transparent;
  border-bottom:2px solid transparent;
  transform: rotate(-45deg);
}
.a-check input[type=checkbox]:checked,
.login-remember input[type=checkbox]:checked{
  background: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 70%, rgba(0,0,0,.28));
}
.a-check input[type=checkbox]:checked::before,
.login-remember input[type=checkbox]:checked::before{
  border-left-color: rgba(255,255,255,.98);
  border-bottom-color: rgba(255,255,255,.98);
}
.a-check input[type=checkbox]:focus-visible,
.login-remember input[type=checkbox]:focus-visible{
  outline:2px solid var(--accent-focus-border);
  outline-offset:2px;
}
.login-foot{margin-top:12px;color:var(--muted2);font-size:12px}

@media (max-width: 960px){
  :root{--a-m-topbar-h:58px}

  /* Фиксированный topbar с кнопкой меню. */
  .a-m-topbar{
    position:fixed;top:0;left:0;right:0;z-index:120;
    height:var(--a-m-topbar-h);
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;
    border-bottom:1px solid var(--stroke);
    background: var(--topbar-bg);
    backdrop-filter: blur(10px);
  }
  .a-m-menu-btn{
    flex:0 0 auto;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color:var(--ink);
    font-weight:800;
    letter-spacing:.02em;
  }
  .a-m-topbar-title{
    font-family:var(--font-serif);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-weight:700;
    font-size:14px;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .a-m-topbar-logo{height:20px;width:auto;flex-shrink:0}

  /* Фон-оверлей: кликом закрываем навигацию. */
  .a-nav-overlay{
    display:block;
    position:fixed;
    top:var(--a-m-topbar-h);left:0;right:0;bottom:0;
    z-index:100;
    background: var(--overlay-bg);
    opacity:0;
    pointer-events:none;
    transition: opacity .16s ease;
  }
  body.nav-open .a-nav-overlay{opacity:1;pointer-events:auto}

  .a-shell{grid-template-columns:1fr;min-height:100vh;padding-top:var(--a-m-topbar-h)}

  /* Off-canvas панель навигации. */
  .a-side{
    position:fixed;
    top:var(--a-m-topbar-h);
    left:0;
    z-index:110;
    width:min(320px, 86vw);
    height:calc(100vh - var(--a-m-topbar-h));
    overflow:auto;
    border-right:1px solid var(--stroke);
    border-bottom:none;
    background: var(--side-bg-mobile);
    backdrop-filter: blur(10px);
    transform: translateX(-110%);
    transition: transform .18s ease;
  }
  body.nav-open .a-side{transform: translateX(0)}

  /* На мобиле основной header в main дублирует topbar - скрываем. */
  .a-top{display:none}

  .a-main{padding:18px}

  /* При открытом меню фиксируем страницу, чтобы не скроллилась под оверлеем. */
  body.nav-open{overflow:hidden}
}
@media (max-width: 760px){
  .a-grid{grid-template-columns:1fr}
  .a-grid-2{grid-template-columns:1fr}
  .a-tr{grid-template-columns:80px 1fr;grid-auto-rows:auto}
  .a-tr.a-tr-bonuses{grid-template-columns:var(--a-cols, 160px 1.2fr 140px 120px minmax(360px, 1fr));min-width:1240px;gap:14px}
  .a-tr.a-tr-income-expenses{grid-template-columns:var(--a-cols, 160px 1.2fr 140px 120px minmax(360px, 1fr));min-width:1240px;gap:14px}
  .a-tr.a-tr-performer-bonuses{grid-template-columns:var(--a-cols, 160px 140px minmax(360px, 1fr));min-width:700px;gap:14px}
  .a-tr.a-tr-performer-payouts{grid-template-columns:var(--a-cols, 160px 140px minmax(360px, 1fr));min-width:700px;gap:14px}
  .a-tr.a-tr-dashboard-monthly{grid-template-columns:var(--a-cols, 46px 96px 120px 170px 120px 200px 140px 130px 160px 120px 140px 120px 120px);min-width:1860px}
  .a-tr.a-tr-submissions{grid-template-columns:var(--a-cols, 120px 120px 160px 240px 140px 120px 120px 120px 120px 220px 220px 220px 220px 220px);min-width:2490px}
  .a-tr.a-tr-performer-orders{grid-template-columns:var(--a-cols, 220px 140px minmax(320px, 1fr) 180px);min-width:980px}
  .a-tr.a-tr-performer-orders.is-income{grid-template-columns:var(--a-cols, 220px 140px minmax(320px, 1fr) 140px 180px);min-width:1120px}
  .a-tr.a-tr-performer-dashboard-monthly{grid-template-columns:var(--a-cols, 100px 90px 140px 160px 140px 140px);min-width:770px}
  .a-tr.a-tr-clients{grid-template-columns:var(--a-cols, 360px 140px 110px 140px 120px 120px 120px minmax(360px, 1fr));min-width:1510px}
  .a-tr.a-tr-workers{grid-template-columns:var(--a-cols, 70px 280px 110px 140px 160px 140px 110px 1fr);min-width:1320px}
  .a-tr.a-tr-teamleads{grid-template-columns:var(--a-cols, 70px 280px 110px 140px 160px 140px 110px 1fr);min-width:1320px}
  .a-tr.a-tr-team{grid-template-columns:var(--a-cols, 120px 280px 110px 140px 160px 140px 140px 80px minmax(360px, 1fr));min-width:1620px}
  .a-tr.a-tr-departments{grid-template-columns:var(--a-cols, minmax(260px, 1fr) 110px 120px 120px 120px 120px 110px);min-width:1080px}
  .a-tr.a-tr-statuses{grid-template-columns:var(--a-cols, 140px 1fr);min-width:520px}
  .a-row-actions{justify-content:flex-start}
  .a-kv-row{grid-template-columns:1fr}
  .a-side{padding:14px 12px}
  .a-logo{margin-bottom:12px}
  .a-logo-img{height:24px}
  .a-logo-sub{display:none}

  /* Form helpers */
  .a-form-grid-3{grid-template-columns:1fr}
  .a-form-inline > .a-btn{width:100%}

  /* Dropdown menu: open from left edge on narrow screens */
  .a-dd-menu{left:0;right:auto;min-width:0;width:min(320px, calc(100vw - 24px))}
}

/*
  Раскраска строк таблиц (с сохранением в localStorage)
  - HTML-таблицы (.a-ht): красим ячейки, чтобы фон точно был виден.
  - Grid-таблицы (.a-table/.a-tr): фон задается через --a-tbl-row-bg в JS.
*/
table.a-ht tbody tr.is-row-colored > td{
  background: var(--a-row-color) !important;
}
table.a-ht tbody tr.is-row-colored:hover > td{
  background: var(--a-row-color) !important;
}

/*
  Подсветка выделения "группой" (как в Google Sheets).

  Почему на td, а не на tr:
  - таблица использует border-collapse: collapse;
  - box-shadow/outline на tr ведут себя нестабильно и могут быть невидимы.

  Рисуем:
  - светлую подложку (чтобы всегда было видно, что строка выбрана)
  - боковые грани только на первой/последней ячейке
  - верхнюю грань только на первой строке группы
  - нижнюю грань только на последней строке группы
*/

/* Токены выделения строки (по умолчанию "золото", как акцент в админке). */
:root{
  /* Делаем подсветку выбранных строк такой же, как при hover. */
  --a-row-select-bg: var(--a-tbl-row-hover-bg, var(--row-hover-bg));
  --a-row-select-bg-grid: var(--a-tbl-row-hover-bg, var(--row-hover-bg));
}

/* Подложка для выбранных строк (только если строка не окрашена пользователем). */
table.a-ht tbody tr.is-row-selected:not(.is-row-colored) > td{
  background-color: var(--a-row-select-bg) !important;
}

/* Submissions HTML table: keep status background same as non-hover state (как при наведении). */
.a-ht.a-ht-subs tbody tr.is-row-selected td.a-status-cell{
  background: var(--a-tbl-status-bg-base, var(--status-bg-base));
  border-color: var(--a-tbl-status-border-base, var(--status-border-base));
}
@supports (color: color-mix(in srgb, #000 50%, #fff)){
  .a-ht.a-ht-subs tbody tr.is-row-selected td.a-status-cell{
    background: color-mix(in srgb, var(--st) 32%, var(--a-tbl-status-bg-mix, var(--status-bg-mix)));
    border-color: color-mix(in srgb, var(--st) 55%, var(--a-tbl-status-border-base, var(--status-border-base)));
  }
}

/* Боковые грани группы (только внешние). */
table.a-ht tbody tr.is-row-selected > td:first-child{
  box-shadow: inset 2px 0 0 var(--accent-focus-border);
}
table.a-ht tbody tr.is-row-selected > td:last-child{
  box-shadow: inset -2px 0 0 var(--accent-focus-border);
}

/* Верхняя грань группы. */
table.a-ht tbody tr.is-row-selected-start > td{
  box-shadow: inset 0 2px 0 var(--accent-focus-border);
}
table.a-ht tbody tr.is-row-selected-start > td:first-child{
  box-shadow:
    inset 2px 0 0 var(--accent-focus-border),
    inset 0 2px 0 var(--accent-focus-border);
}
table.a-ht tbody tr.is-row-selected-start > td:last-child{
  box-shadow:
    inset -2px 0 0 var(--accent-focus-border),
    inset 0 2px 0 var(--accent-focus-border);
}

/* Нижняя грань группы. */
table.a-ht tbody tr.is-row-selected-end > td{
  box-shadow: inset 0 -2px 0 var(--accent-focus-border);
}
table.a-ht tbody tr.is-row-selected-end > td:first-child{
  box-shadow:
    inset 2px 0 0 var(--accent-focus-border),
    inset 0 -2px 0 var(--accent-focus-border);
}
table.a-ht tbody tr.is-row-selected-end > td:last-child{
  box-shadow:
    inset -2px 0 0 var(--accent-focus-border),
    inset 0 -2px 0 var(--accent-focus-border);
}

/* Одиночная строка (start + end) -> рамка со всех сторон. */
table.a-ht tbody tr.is-row-selected-start.is-row-selected-end > td{
  box-shadow:
    inset 0 2px 0 var(--accent-focus-border),
    inset 0 -2px 0 var(--accent-focus-border);
}
table.a-ht tbody tr.is-row-selected-start.is-row-selected-end > td:first-child{
  box-shadow:
    inset 2px 0 0 var(--accent-focus-border),
    inset 0 2px 0 var(--accent-focus-border),
    inset 0 -2px 0 var(--accent-focus-border);
}
table.a-ht tbody tr.is-row-selected-start.is-row-selected-end > td:last-child{
  box-shadow:
    inset -2px 0 0 var(--accent-focus-border),
    inset 0 2px 0 var(--accent-focus-border),
    inset 0 -2px 0 var(--accent-focus-border);
}

.a-table > .a-tr.is-row-selected:not(.a-th){
  /* боковые грани для всех строк диапазона */
  box-shadow:
    inset 2px 0 0 var(--accent-focus-border),
    inset -2px 0 0 var(--accent-focus-border),
    var(--a-tbl-outline-shadow);
}
.a-table > .a-tr.is-row-selected:not(.a-th):not(.is-row-colored){
  background-color: var(--a-row-select-bg-grid) !important;
}
.a-table > .a-tr.is-row-selected:not(.a-th):not(.is-row-colored):hover{
  background-color: var(--a-row-select-bg-grid) !important;
}
.a-table > .a-tr.is-row-selected-start:not(.a-th){
  box-shadow:
    inset 2px 0 0 var(--accent-focus-border),
    inset -2px 0 0 var(--accent-focus-border),
    inset 0 2px 0 var(--accent-focus-border),
    var(--a-tbl-outline-shadow);
}
.a-table > .a-tr.is-row-selected-end:not(.a-th){
  box-shadow:
    inset 2px 0 0 var(--accent-focus-border),
    inset -2px 0 0 var(--accent-focus-border),
    inset 0 -2px 0 var(--accent-focus-border),
    var(--a-tbl-outline-shadow);
}
.a-table > .a-tr.is-row-selected-start.is-row-selected-end:not(.a-th){
  box-shadow: inset 0 0 0 2px var(--accent-focus-border), var(--a-tbl-outline-shadow);
}

/* ── Income/Expenses split layout ── */
.a-ie-split-row{
  display:flex;
  gap:18px;
  margin-top:12px;
  align-items:flex-start;
}
.a-ie-split-col{
  flex:1 1 0%;
  min-width:0;
}
.a-ie-split-heading{
  margin:0 0 8px 0;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
@media (max-width:960px){
  .a-ie-split-row{flex-direction:column}
  .a-ie-split-col{width:100%}
}

/* Toggle ON/OFF colors */
.a-toggle-on{color:#2e7d32;font-weight:700}
.a-toggle-off{color:#c62828;font-weight:700}