/* ==========================================================================
   SAO admin UI — минимальный слой поверх Bootstrap 5.3.3.
   Источник: production Lite Tracker/TDS (Admin/View.php, inline <style>).
   Правило: всё, что умеет Bootstrap, делается утилитами Bootstrap.
   Сюда попадает только то, чего в Bootstrap нет: shell, sidebar, токены
   бренда, скейл превью и числовые ячейки.
   В отличие от TDS этот CSS вынесен в файл: CSP SAO запрещает inline style.
   ========================================================================== */

/* --- 1. Токены -------------------------------------------------------- */
:root {
    --sao-sidebar-width: 232px;
    --sao-topbar-height: 52px;
    --sao-sidebar-bg: #ffffff;
    --sao-sidebar-text: rgba(20, 22, 27, .72);
    --sao-sidebar-text-strong: #14161b;
    --sao-sidebar-hover-bg: rgba(0, 0, 0, .045);
    --sao-sidebar-active-bg: var(--bs-primary-bg-subtle);
    --sao-sidebar-active-text: var(--bs-primary-text-emphasis);
    --sao-sidebar-border: var(--bs-border-color);
    --sao-sidebar-label: rgba(20, 22, 27, .45);
    --sao-accent: #7c3aed;
    --sao-bg: #f5f6f8;

    /* Переопределение Bootstrap: btn-primary, bg-primary-subtle,
       text-primary-emphasis, progress-bar и ссылки становятся фиолетовыми
       без единого собственного класса. */
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #7c3aed;
    --bs-link-color-rgb: 124, 58, 237;
    --bs-link-hover-color: #6d28d9;
    --bs-primary-text-emphasis: #4c1d95;
    --bs-primary-bg-subtle: #ede9fe;
    --bs-primary-border-subtle: #c4b5fd;
}

.btn-primary {
    --bs-btn-bg: #7c3aed;
    --bs-btn-border-color: #7c3aed;
    --bs-btn-hover-bg: #6d28d9;
    --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-active-bg: #5b21b6;
    --bs-btn-active-border-color: #5b21b6;
    --bs-btn-disabled-bg: #7c3aed;
    --bs-btn-disabled-border-color: #7c3aed;
}

.btn-outline-primary {
    --bs-btn-color: #7c3aed;
    --bs-btn-border-color: #7c3aed;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7c3aed;
    --bs-btn-hover-border-color: #7c3aed;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5b21b6;
    --bs-btn-active-border-color: #5b21b6;
    --bs-btn-disabled-color: #7c3aed;
    --bs-btn-disabled-border-color: #7c3aed;
}

/* --- 2. Оболочка ------------------------------------------------------ */
/* Bootstrap 5.3 в скомпилированном CSS зашивает синий #0d6efd в чекбоксы,
   switch, progress и focus ring — эти места не читают --bs-primary, поэтому
   перекрашиваются точечно. Иначе половина форм остаётся синей. */
.form-check-input:checked { background-color: var(--sao-accent); border-color: var(--sao-accent); }
.form-check-input[type="checkbox"]:checked {
    background-image: url("checkbox-check.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: .72em .72em;
}
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--sao-accent); border-color: var(--sao-accent);
    background-image: url("checkbox-indeterminate.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: .68em .68em;
}
.form-check-input:focus { border-color: #c4b5fd; box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25); }
.form-control:focus, .form-select:focus { border-color: #c4b5fd; box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .15); }
.btn:focus-visible, .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25); }
.progress { --bs-progress-bar-bg: var(--sao-accent); }
.pagination {
    --bs-pagination-active-bg: var(--sao-accent);
    --bs-pagination-active-border-color: var(--sao-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25);
}

/* Bootstrap embeds btn-close as data:image/svg+xml, while the SAO CSP allows
   images only from 'self'. Keep the Bootstrap component and point its token to
   the same icon stored locally; Bootstrap's dark-theme filter still applies. */
.btn-close { --bs-btn-close-bg: url("close.svg"); }

/* Компактный iOS-переключатель для бинарных настроек. Нативный checkbox
   остаётся доступным клавиатуре и screen reader, визуально меняется только track. */
.sao-ios-switch {
    position: relative; display: flex; align-items: center; gap: .75rem;
    min-height: 32px; cursor: pointer; user-select: none;
}
.sao-ios-switch > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sao-ios-switch-track {
    position: relative; width: 44px; height: 26px; flex: 0 0 44px;
    border-radius: 999px; background: #dfe3e8;
    box-shadow: inset 0 0 0 1px rgba(20, 22, 27, .08);
    transition: background-color .18s ease, box-shadow .18s ease;
}
.sao-ios-switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(20, 22, 27, .28);
    transition: transform .18s ease;
}
.sao-ios-switch > input:checked + .sao-ios-switch-track { background: var(--sao-accent); box-shadow: none; }
.sao-ios-switch > input:checked + .sao-ios-switch-track::after { transform: translateX(18px); }
.sao-ios-switch > input:focus-visible + .sao-ios-switch-track { box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25); }
.sao-ios-switch > input:disabled ~ * { opacity: .55; cursor: not-allowed; }

/* Searchable account picker follows the compact TDS filter dropdown: the
   dropdown remains a selection control (checkboxes), while binary settings use
   the iOS switch above. */
.sao-account-picker-menu { width: min(420px, calc(100vw - 2rem)); }
.sao-account-picker-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.sao-account-picker-option {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .55rem .4rem; border-radius: .4rem; cursor: pointer;
}
.sao-account-picker-option:hover { background: var(--bs-tertiary-bg); }
.sao-account-picker-option[hidden] { display: none; }
.sao-account-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    max-width: 100%; padding: .2rem .55rem; border-radius: 999px;
    color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle); font-size: .78rem;
}

/* A fixed 100% body ends the containing block after the first viewport. On
   long tables that makes a sticky topbar scroll away even though it still has
   top: 0. Let the document grow and keep 100% only as a minimum. */
html, body { min-height: 100%; }
body { background: var(--sao-bg); }

.sao-shell { display: flex; min-height: calc(100vh - var(--sao-topbar-height)); }
@media (max-width: 767.98px) { .sao-shell { display: block; } }

/* Верхняя панель на всю ширину: слева бренд, справа профиль. Аккаунт —
   глобальная сущность, поэтому живёт над оболочкой, а не в строке действий
   страницы (паттерн OpenRouter). */
.sao-topnav {
    position: sticky; top: 0; z-index: 1030;
    min-height: var(--sao-topbar-height);
    background: var(--sao-sidebar-bg);
    border-bottom: 1px solid var(--sao-sidebar-border);
}

.sao-content { flex: 1 1 auto; padding: 1.5rem 2rem; min-width: 0; }
@media (max-width: 767.98px) { .sao-content { padding: 1rem; } }

.sao-sidebar {
    background: var(--sao-sidebar-bg);
    color: var(--sao-sidebar-text);
    border-right: 1px solid var(--sao-sidebar-border);
}
.sao-topnav .navbar-brand { color: var(--sao-sidebar-text-strong); }

@media (min-width: 768px) {
    .sao-sidebar {
        width: var(--sao-sidebar-width);
        flex: 0 0 var(--sao-sidebar-width);
        position: sticky; top: var(--sao-topbar-height);
        height: calc(100vh - var(--sao-topbar-height));
    }
    .sao-sidebar > .offcanvas-body { height: calc(100vh - var(--sao-topbar-height)); }
    .sao-sidebar .sao-nav { min-height: 0; overflow-y: auto; }
    .sao-sidebar .sao-brand {
        padding: 0 .25rem .75rem;
        border-bottom: 1px solid var(--sao-sidebar-border);
        margin-bottom: .75rem;
    }
}

/* Собственный знак SAO (public/assets/favicon.svg) — три столбика.
   Фон знака свой, поэтому одинаково читается в светлой и тёмной теме. */
.sao-brand-mark { width: 32px; height: 32px; display: block; border-radius: 8px; }
.sao-brand a, .sao-brand a:hover { color: var(--sao-sidebar-text-strong) !important; }
.sao-brand, .sao-sidebar-foot { flex-shrink: 0; }
.sao-sidebar-foot { padding-top: .75rem; border-top: 1px solid var(--sao-sidebar-border); }

/* --- 3. Навигация ----------------------------------------------------- */
.sao-nav { flex: 1 1 auto; gap: 2px; flex-wrap: nowrap; }
.sao-nav .nav-link {
    color: var(--sao-sidebar-text);
    padding: .5rem .75rem; border-radius: 6px;
    display: flex; align-items: center;
}
.sao-nav .nav-link:hover { color: var(--sao-sidebar-text-strong); background: var(--sao-sidebar-hover-bg); }
.sao-nav .nav-link.active { color: var(--sao-sidebar-active-text); background: var(--sao-sidebar-active-bg); }
.sao-nav .nav-link.disabled { opacity: .55; pointer-events: none; }
.sao-nav-label { color: var(--sao-sidebar-label) !important; }
.sao-ico { display: inline-flex; justify-content: center; width: 1.25rem; margin-right: .6rem; opacity: .85; }
.sao-ico .bi { font-size: 1.02rem; line-height: 1; }

/* --- 4. Данные -------------------------------------------------------- */
.small-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.sao-num { font-variant-numeric: tabular-nums; }
.sao-label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.sao-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sao-project-icon { width: 42px; height: 42px; }
.sao-context-trigger {
    min-height: 38px;
    padding: .4rem .55rem;
    color: var(--sao-sidebar-text);
    border: 0;
    border-radius: var(--bs-border-radius);
    background: transparent;
}
.sao-context-trigger:hover,
.sao-context-trigger:focus-visible,
.sao-context-trigger.show {
    color: var(--sao-sidebar-text-strong);
    background: var(--sao-sidebar-hover-bg);
}
.sao-context-trigger:disabled { color: var(--sao-sidebar-text); opacity: .5; }
.sao-context-trigger::after { flex-shrink: 0; margin-left: auto; }
.sao-context-trigger-icon {
    width: 1.25rem;
    flex: 0 0 1.25rem;
    text-align: center;
    color: var(--bs-primary);
    font-size: 1rem;
}
.sao-hash { font-size: .78rem; font-variant-numeric: tabular-nums; word-break: break-all; }

/* В Bootstrap 5.3 нет утилиты min-w-0, а без неё flex-элемент с длинным
   текстом не сжимается и распирает строку шире экрана. Одна строка чинит
   все переполнения шапки и панели действий. */
.min-w-0 { min-width: 0; }

/* Таблица всегда в горизонтальном scroll-контейнере (паттерн TDS). */
.sao-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sao-table-scroll > .table { margin-bottom: 0; min-width: 560px; }
.sao-portal-menu {
    position: fixed; inset: auto; z-index: 1090; min-width: 12rem;
    max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow-y: auto;
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Компактные fleet/detail-метрики: знакомая строка данных вместо набора
   больших dashboard-карточек. На мобильном остаётся сетка 2×N. */
.sao-metric-row-4 > [class*="col-"]:nth-child(even) { border-left: 1px solid var(--bs-border-color); }
.sao-metric-row-4 > [class*="col-"]:nth-child(n+3) { border-top: 1px solid var(--bs-border-color); }
.sao-metric-row-3 > [class*="col-"] + [class*="col-"] { border-top: 1px solid var(--bs-border-color); }
.sao-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sao-tabs-scroll .nav-tabs { min-width: max-content; }
@media (min-width: 768px) {
    .sao-metric-row-3 > [class*="col-"] + [class*="col-"] { border-top: 0; border-left: 1px solid var(--bs-border-color); }
}
@media (min-width: 992px) {
    .sao-metric-row-4 > [class*="col-"] { border-top: 0 !important; border-left: 0 !important; }
    .sao-metric-row-4 > [class*="col-"] + [class*="col-"] { border-left: 1px solid var(--bs-border-color) !important; }
}

/* Стадии конвейера: горизонтальная лента, на мобильном скроллится. */
.sao-steps { display: flex; gap: .35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
/* Domain filters wrap as whole chips; other compact run steppers keep their layout. */
.sao-domain-stages { flex-wrap: wrap; width: 100%; max-width: 100%; min-width: 0; overflow-x: visible; }
.sao-domain-stages .sao-step { max-width: 100%; }
.sao-step {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem; border: 1px solid var(--bs-border-color); border-radius: 999px;
    font-size: .8rem; color: var(--bs-secondary-color); text-decoration: none; white-space: nowrap;
}
.sao-step:hover { color: var(--bs-emphasis-color); }
.sao-step .sao-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--bs-tertiary-bg); font-size: .68rem; font-weight: 700;
}
.sao-step.done { color: var(--bs-emphasis-color); }
.sao-step.done .sao-step-n { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.sao-step.current {
    color: var(--bs-primary-text-emphasis); font-weight: 600;
    background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle);
}
.sao-step.current .sao-step-n { background: var(--sao-accent); color: #fff; }
.sao-step.disabled { opacity: .55; pointer-events: none; }

/* Липкая панель действий: сумма и главное действие всегда на виду при прокрутке
   длинного списка. Паттерн массового выбора (Linear/Shopify). */
.sao-actionbar {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

/* Образец цвета палитры: значение приходит из data-атрибута через JS,
   инлайновый style запрещён CSP. */
.sao-swatch {
    display: inline-block; width: 14px; height: 14px; flex: 0 0 14px;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; background: var(--swatch, #ccc);
}

/* Спарклайн KPI (референс OpenRouter): inline SVG, без библиотек. */
.sao-spark { width: 72px; height: 26px; overflow: visible; color: var(--bs-secondary-color); }
.sao-spark path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Активный таб — accent-полоска снизу вместо синего (паттерн TDS). */
.nav-tabs .nav-link { color: var(--bs-secondary-color); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--bs-emphasis-color); border-color: transparent transparent var(--bs-border-color) transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover {
    color: var(--bs-emphasis-color); font-weight: 600; background: transparent;
    border-color: transparent transparent var(--sao-accent) transparent;
    border-bottom-width: 2px;
}

/* Превью сайта: фиксированный desktop viewport 1440×810, только масштаб. */
.sao-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bs-tertiary-bg); }
.sao-preview iframe {
    position: absolute; inset: 0 auto auto 0; width: 1440px; height: 810px;
    border: 0; display: block; pointer-events: none;
    transform: scale(var(--sao-preview-scale, .25)); transform-origin: top left;
}
.sao-design-name { display: flex; align-items: center; gap: 12px; justify-content: space-between; min-width: 240px; }
.sao-design-thumb { width: 96px; flex: 0 0 96px; border: 1px solid var(--bs-border-color); border-radius: 4px; }
.sao-design-thumb:focus-visible { outline: 2px solid var(--sao-accent); outline-offset: 2px; }

/* --- 5. Тёмная тема: только переназначение переменных ------------------ */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --sao-bg: #181b22;
    --bs-body-bg: #1f232c;
    --bs-body-bg-rgb: 31, 35, 44;
    --bs-body-color: #d4d8df;
    --bs-body-color-rgb: 212, 216, 223;
    --bs-emphasis-color: #f4f5f7;
    --bs-secondary-color: #99a1ad;
    --bs-secondary-bg: #2a2f3a;
    --bs-tertiary-bg: #232832;
    --bs-border-color: #333a46;
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-primary-text-emphasis: #c4b5fd;
    --bs-primary-bg-subtle: #2a1f47;
    --bs-primary-border-subtle: #4c1d95;
    --bs-link-color: #a78bfa;
    --bs-link-color-rgb: 167, 139, 250;
    --bs-link-hover-color: #c4b5fd;
    --sao-sidebar-bg: #1f2229;
    --sao-sidebar-text: rgba(255, 255, 255, .78);
    --sao-sidebar-text-strong: #ffffff;
    --sao-sidebar-hover-bg: rgba(255, 255, 255, .06);
    --sao-sidebar-active-bg: rgba(124, 58, 237, .30);
    --sao-sidebar-active-text: #ffffff;
    --sao-sidebar-border: rgba(255, 255, 255, .08);
    --sao-sidebar-label: rgba(255, 255, 255, .5);
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #c4b5fd;
    --bs-btn-border-color: #a78bfa;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7c3aed;
    --bs-btn-hover-border-color: #8b5cf6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6d28d9;
    --bs-btn-active-border-color: #8b5cf6;
    --bs-btn-disabled-color: #a78bfa;
    --bs-btn-disabled-border-color: #7c3aed;
}
[data-bs-theme="dark"] .sao-ios-switch-track { background: #3b424e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* --- 6. Меню профиля (референс OpenRouter) ----------------------------- */
/* Аватар + выпадающее меню в правом верхнем углу; выбор темы — внизу меню. */
.sao-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
    background: var(--bs-secondary-bg); color: var(--bs-emphasis-color);
    font-size: .72rem; font-weight: 700;
}
.sao-user-menu { min-width: 260px; }
.sao-user-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.sao-user-menu .dropdown-item .bi { width: 1rem; opacity: .8; }
.sao-user-menu .sao-theme-row { padding: .5rem .5rem 0; }
.sao-offcanvas-wide { width: min(460px, 100%) !important; }
.sao-progress-compact { height: 8px; }
.sao-progress-p0 { width: 0; }
.sao-progress-p5 { width: 5%; }
.sao-progress-p10 { width: 10%; }
.sao-progress-p15 { width: 15%; }
.sao-progress-p20 { width: 20%; }
.sao-progress-p25 { width: 25%; }
.sao-progress-p30 { width: 30%; }
.sao-progress-p35 { width: 35%; }
.sao-progress-p40 { width: 40%; }
.sao-progress-p45 { width: 45%; }
.sao-progress-p50 { width: 50%; }
.sao-progress-p55 { width: 55%; }
.sao-progress-p60 { width: 60%; }
.sao-progress-p65 { width: 65%; }
.sao-progress-p70 { width: 70%; }
.sao-progress-p75 { width: 75%; }
.sao-progress-p80 { width: 80%; }
.sao-progress-p85 { width: 85%; }
.sao-progress-p90 { width: 90%; }
.sao-progress-p95 { width: 95%; }
.sao-progress-p100 { width: 100%; }
.progress-bar { transition: width .35s ease; }
@keyframes sao-live-pulse {
    0% { color: var(--sao-accent); }
    100% { color: inherit; }
}
.sao-live-updated { animation: sao-live-pulse .6s ease; }
.sao-theme-switch .btn {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--sao-accent);
    --bs-btn-active-border-color: var(--sao-accent);
    --bs-btn-active-color: #fff;
    padding: .15rem .5rem;
}
.sao-choice-tabs .nav-item { cursor: pointer; }
.sao-choice-tabs .nav-link { color: var(--bs-secondary-color); }
.sao-choice-tabs input:checked + .nav-link { color: var(--sao-primary, #7c3aed); border-color: transparent transparent var(--sao-primary, #7c3aed); background: transparent; }
.sao-choice-tabs input:focus-visible + .nav-link { outline: 2px solid var(--sao-primary, #7c3aed); outline-offset: 2px; }
/* Workspace is a single navigation level. The menu stays in the sidebar flow,
   so it can never cover a table in the main content area. */
.sao-workspace-switcher > .dropdown-menu,
.sao-project-switcher > .dropdown-menu { inset: auto !important; transform: none !important; }
.sao-workspace-menu,
.sao-project-menu { max-width: 100%; overflow-x: hidden; }
.sao-workspace-menu,
.sao-project-menu-list { max-height: min(34vh, 280px); overflow-y: auto; overscroll-behavior: contain; }
.sao-workspace-menu .dropdown-item,
.sao-project-menu .dropdown-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: .5rem .6rem;
    border-radius: var(--bs-border-radius-sm);
}
.sao-workspace-menu .dropdown-item > span,
.sao-project-menu .dropdown-item > span { min-width: 0; }
.sao-workspace-menu .dropdown-item.active,
.sao-project-menu .dropdown-item.active {
    color: #fff;
    background-color: var(--sao-accent);
}
.sao-project-menu .input-group-text { background: transparent; }