/* STUDIO UI — единый набор компонентов панели.
 *
 * Основа — shadcn/ui (стиль new-york): нейтральная палитра zinc, контролы 36px
 * (sm 32, xs 28), скругление 8px, тонкая тень у полей и контурных кнопок,
 * кольцо фокуса 3px. Акцент — синий Drinkit #334CDB (решение владельца),
 * активный пункт переключателя — акцентный.
 *
 * Разметка (assets/app.tpl.html) помечена атрибутами:
 *   data-ui  btn | field | seg | seg-item | toggle | chip | badge | card | dialog | switch | check | media | bare
 *   data-v   primary | outline | ghost | destructive | danger | dashed | dyn (цвета задаёт логика)
 *   data-s   lg 40+ | md 36 | sm 32 | xs 28 | xxs меньше
 *   data-icon (квадратная), data-round (круглая)
 * Здесь только внешний вид; раскладка остаётся в разметке. !important — потому
 * что стили макета встроены в теги.
 */

/* ---------- токены: светлая тема — белый фон, блоки отделены тонкой рамкой ---------- */
:root, html[data-theme=light] {
    --bg: #fff; --bg2: #fafafa; --panel: #fff; --raised: #fff;
    --hover: #f4f4f5; --active: #e4e4e7;
    --line: #ebebee; --line-strong: #dcdce1;
    --fg: #09090b; --fg2: #52525b; --fg3: #71717a;
    --page: #ffffff; --stage: #f4f4f5;
    --ring: rgba(51, 76, 219, .26); --accent-hover: #2b41c4;
    --shadow-xs: none;
    --radius: 8px;
}
html[data-theme=dark] {
    --stage: #0c0c0e; --ring: rgba(140, 157, 255, .34); --accent-hover: #4459e3;
    --shadow-xs: none;
    --line: #26262b; --line-strong: #34343a;
}

::selection { background: var(--accent-bg); }

/* ---------- типографика — как на cornery.store ----------
   Golos Text — заголовки и текст; JetBrains Mono — «машинный»: цифры, артикулы, метки. */
:root {
    --sans: 'Golos Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body { font-family: var(--sans); }
/* Заголовок страницы — как разделы на cornery.store: прописные, плотно. */
main h1 { font-weight: 700 !important; font-size: 24px !important; letter-spacing: -0.02em !important; text-transform: uppercase; line-height: 1.1 !important; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ---------- кнопки ---------- */
[data-ui~=btn], [data-ui~=toggle], [data-ui~=chip], [data-ui~=seg-item] {
    font-weight: 500 !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease !important;
    -webkit-tap-highlight-color: transparent;
}
[data-ui~=btn][data-s=lg] { font-size: 14.5px !important; border-radius: 10px !important; }
[data-ui~=btn][data-s=md] { font-size: 14px !important; border-radius: var(--radius) !important; }
[data-ui~=btn][data-s=sm] { font-size: 13px !important; border-radius: var(--radius) !important; }
[data-ui~=btn][data-s=xs] { font-size: 12.5px !important; border-radius: 7px !important; }
[data-ui~=btn][data-s=xxs] { border-radius: 6px !important; }
[data-ui~=btn][data-round] { border-radius: 999px !important; }

[data-ui~=btn][data-v=primary] { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
[data-ui~=btn][data-v=primary]:hover:not([disabled]) { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
[data-ui~=btn][data-v=outline] { border-color: var(--line) !important; box-shadow: var(--shadow-xs); }
[data-ui~=btn][data-v=outline]:hover:not([disabled]) { background: var(--hover) !important; border-color: var(--line-strong) !important; }
[data-ui~=btn][data-v=ghost] { border-color: transparent !important; }
[data-ui~=btn][data-v=ghost]:hover:not([disabled]) { background: var(--hover) !important; color: var(--fg) !important; }
[data-ui~=btn][data-v=destructive] { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
[data-ui~=btn][data-v=destructive]:hover:not([disabled]) { filter: brightness(.92); }
[data-ui~=btn][data-v=danger] { color: var(--red) !important; border-color: var(--red-line) !important; background: var(--bg) !important; }
[data-ui~=btn][data-v=danger]:hover:not([disabled]) { background: var(--red-bg) !important; }
[data-ui~=btn][data-v=dashed]:hover:not([disabled]) { border-color: var(--fg3) !important; color: var(--fg) !important; }

[data-ui~=btn][disabled], [data-ui~=btn][aria-disabled=true],
[data-ui~=toggle][aria-disabled=true], [data-ui~=chip][aria-disabled=true] {
    opacity: .5 !important; cursor: not-allowed !important; box-shadow: none !important;
}

/* ---------- поля ---------- */
[data-ui~=field] {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease !important;
    color: var(--fg);
}
textarea[data-ui~=field] { border-radius: 10px !important; }
[data-ui~=field]:not([data-dyn]) { border-color: var(--line) !important; }
[data-ui~=field]:hover:not(:focus):not([data-dyn]):not([disabled]) { border-color: var(--line-strong) !important; }
[data-ui~=field]:focus, [data-ui~=field]:focus-visible {
    outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important;
}
[data-ui~=field]::placeholder { color: var(--fg3); opacity: 1; }
input[data-ui~=field], select[data-ui~=field] { font-size: 14px !important; }
/* На телефоне поле меньше 16px увеличивает страницу при фокусе (iOS). */
@media (max-width: 640px) {
    input[data-ui~=field], select[data-ui~=field], textarea[data-ui~=field] { font-size: 16px !important; }
}

/* ---------- переключатели ---------- */
[data-ui~=seg] { border-radius: 10px !important; padding: 3px !important; border-color: var(--line) !important; background: var(--bg) !important; }
[data-ui~=seg-item] { border-radius: 7px !important; }
[data-ui~=seg-item]:not([data-s=xxs]) { font-size: 13.5px !important; }
[data-ui~=seg-item][aria-checked=false]:hover, [data-ui~=seg-item][aria-selected=false]:hover { background: var(--hover) !important; color: var(--fg) !important; }
[data-ui~=toggle] { border-radius: var(--radius) !important; }
[data-ui~=toggle][data-s=md] { font-size: 13.5px !important; }
[data-ui~=toggle][aria-checked=false]:hover { border-color: var(--line-strong) !important; background: var(--hover) !important; }
[data-ui~=chip] { border-radius: 999px !important; }
[data-ui~=chip][data-s=md] { font-size: 13.5px !important; }
[data-ui~=chip][data-s=xxs], [data-ui~=chip][data-s=xs] { font-size: 12.5px !important; }
[data-ui~=chip][aria-checked=false]:hover, [data-ui~=chip][aria-pressed=false]:hover { border-color: var(--line-strong) !important; background: var(--hover) !important; }

/* ---------- метки, блоки, окна ---------- */
[data-ui~=badge] { border-radius: 999px !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
[data-ui~=card] { border-radius: 12px !important; border-color: var(--line) !important; }
[data-ui~=dialog] { border-radius: 16px !important; border-color: var(--line) !important; }

/* ---------- фокус с клавиатуры — одно кольцо на всё ---------- */
[data-ui]:not([data-ui~=field]):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
[data-ui~=media]:focus-visible { outline-offset: 1px !important; }

/* ---------- мелочи ---------- */
[data-ui~=switch], [data-ui~=check] { -webkit-tap-highlight-color: transparent; }
kbd { font: 500 11.5px/1 var(--mono); padding: 3px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--bg); color: var(--fg2); }

@media (prefers-reduced-motion: reduce) {
    [data-ui] { transition: none !important; }
}

/* Очередь: строка запуска раскрывается кликом — лёгкая подсветка под курсором */
[data-qrow] { transition: background-color .12s ease; }
[data-qrow]:hover { background: var(--bg2); }

/* ---------- 2026-10-10: единый стиль — мягкие волосяные линии, пилюли, без теней и градиентов ----------
   Тени (кроме колец выбора 0 0 0 Npx) и градиенты убраны; кнопки, переключатели, сегменты и фильтры — пилюли. */
html, html[data-theme] { --shadow: 0 0 0 1px var(--line) !important; --shadow-xs: none !important; }
[data-ui~=btn][data-ui], [data-ui~=btn][data-s][data-ui] { border-radius: 999px !important; }
[data-ui~=btn]:not([data-icon]):not([data-compact]) { padding-left: max(14px, 1em) !important; padding-right: max(14px, 1em) !important; }
[data-ui~=btn][data-s=xxs]:not([data-icon]) { padding-left: 8px !important; padding-right: 8px !important; }
/* кнопки внутри общей рамки (степпер «Кадров» и т.п.) — без своего скругления, рамка скругляет группа */
div[style*="overflow:hidden"] > [data-ui~=btn][data-ui][data-s] { border-radius: 0 !important; }
div[style*="overflow:hidden"]:has(> [data-ui~=btn]) { border-radius: 999px !important; }
[data-ui~=seg] { border-radius: 999px !important; }
[data-ui~=seg-item] { border-radius: 999px !important; padding-left: 12px !important; padding-right: 12px !important; }
[data-ui~=seg-item][data-icon] { padding-left: 0 !important; padding-right: 0 !important; }
[data-ui~=toggle] { border-radius: 999px !important; padding-left: 14px !important; padding-right: 14px !important; border-color: var(--line) !important; }
[data-ui~=toggle][aria-checked=true], [data-ui~=toggle][aria-pressed=true] { border-color: var(--accent) !important; }
[data-ui~=chip] { border-color: var(--line) !important; }
[data-ui~=field] { border-radius: 10px !important; }
textarea[data-ui~=field] { border-radius: 12px !important; }
[data-ui~=card], [data-ui~=dialog] { box-shadow: none !important; }

/* ---------- тосты: тёмная плашка в светлой теме, светлая — в тёмной; без теней, мягкая рамка ---------- */
:root, html[data-theme=light] {
    --toast-bg: #121214; --toast-fg: #f6f6f7; --toast-sub: #a1a1aa; --toast-line: rgba(255,255,255,.09);
    --toast-btn: rgba(255,255,255,.07); --toast-btn-h: rgba(255,255,255,.13);
    --tk-ok: #6dd497; --tk-ok-bg: rgba(109,212,151,.14); --tk-info: #9aaaff; --tk-info-bg: rgba(154,170,255,.16);
    --tk-warn: #f3bd68; --tk-warn-bg: rgba(243,189,104,.15); --tk-err: #f58b83; --tk-err-bg: rgba(245,139,131,.15);
}
html[data-theme=dark] {
    --toast-bg: #f4f4f5; --toast-fg: #0b0b0d; --toast-sub: #5b5b63; --toast-line: rgba(9,9,11,.09);
    --toast-btn: rgba(9,9,11,.05); --toast-btn-h: rgba(9,9,11,.1);
    --tk-ok: #217a46; --tk-ok-bg: rgba(33,122,70,.12); --tk-info: #334cdb; --tk-info-bg: rgba(51,76,219,.1);
    --tk-warn: #9a5a00; --tk-warn-bg: rgba(154,90,0,.12); --tk-err: #b4372f; --tk-err-bg: rgba(180,55,47,.1);
}
@keyframes ktoastin { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-toast] { animation: none !important; } }