/* Переключатель на сервисах (и в flat, и в glass). Сетка 8px, touch ≥40px. */
[data-ui-appearance] .chip-row { gap: var(--space-2); }
[data-ui-appearance] .chip {
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
}

/* Glass morphism — слой поверх flat. Активен только при html[data-ui="glass"].
   Иерархия: 0 фон → 1 base → 2 elevated → 3 floating → 4 modal.
   Вложенный blur запрещён (читаемость и производительность). */

html[data-ui="glass"] {
  --glass-bg: color-mix(in srgb, var(--surface) 58%, transparent);
  --glass-bg-subtle: color-mix(in srgb, var(--surface) 40%, transparent);
  --glass-bg-elevated: color-mix(in srgb, var(--surface) 74%, transparent);
  --glass-bg-floating: color-mix(in srgb, var(--surface) 86%, transparent);
  --glass-bg-modal: color-mix(in srgb, var(--surface) 90%, transparent);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.22);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-blur-subtle: 8px;
  --glass-blur: 14px;
  --glass-blur-elevated: 18px;
  --glass-blur-floating: 20px;
  --glass-blur-modal: 22px;
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  --glass-shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.28);
  --glass-shadow-floating: 0 16px 40px rgba(0, 0, 0, 0.36);
  --glass-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.48);
}

html[data-ui="glass"][data-theme="light"] {
  --glass-bg: color-mix(in srgb, #ffffff 88%, transparent);
  --glass-bg-subtle: color-mix(in srgb, #eceef3 70%, transparent);
  --glass-bg-elevated: color-mix(in srgb, #ffffff 92%, transparent);
  --glass-bg-floating: color-mix(in srgb, #ffffff 94%, transparent);
  --glass-bg-modal: color-mix(in srgb, #ffffff 96%, transparent);
  --glass-border: rgba(15, 23, 42, 0.12);
  --glass-border-strong: rgba(15, 23, 42, 0.18);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  --glass-shadow-elevated: 0 14px 36px rgba(15, 23, 42, 0.1);
  --glass-shadow-floating: 0 16px 40px rgba(15, 23, 42, 0.12);
  --glass-shadow-modal: 0 24px 56px rgba(15, 23, 42, 0.18);
}

/* Тёмное стекло — холодный графит (как главный экран), не плоский чёрный. */
html[data-ui="glass"]:not([data-theme="light"]) {
  --glass-bg: color-mix(in srgb, #1f2531 88%, transparent);
  --glass-bg-subtle: color-mix(in srgb, #171c25 72%, transparent);
  --glass-bg-elevated: color-mix(in srgb, #262d3b 92%, transparent);
  --glass-border: rgba(203, 213, 225, 0.12);
  --glass-border-strong: rgba(203, 213, 225, 0.2);
  --glass-highlight: inset 0 1px 0 rgba(226, 232, 240, 0.08);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

/* Layer 0 — ambient background, не конкурирует с контентом */
html[data-ui="glass"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 8% -8%, color-mix(in srgb, var(--gold-500) 16%, transparent), transparent 52%),
    radial-gradient(ellipse 55% 40% at 100% 0%, color-mix(in srgb, var(--tab-accent) 14%, transparent), transparent 48%),
    radial-gradient(ellipse 40% 30% at 70% 100%, color-mix(in srgb, var(--gold-500) 8%, transparent), transparent 55%);
  background-attachment: fixed;
}

/* Login: .hero иначе перекрывает Layer 0 сплошным --bg — стекло неотличимо от flat. */
html[data-ui="glass"] .hero {
  background-color: transparent;
  background-image: none;
}

/* Layer 1 — base glass: карточки, панели, KPI-оболочки */
html[data-ui="glass"] .card,
html[data-ui="glass"] .panel,
html[data-ui="glass"] .svc-card,
html[data-ui="glass"] .dash-kpi-shell,
html[data-ui="glass"] .dash-team-card,
html[data-ui="glass"] .dash-trader-card,
html[data-ui="glass"] .lead-tile,
html[data-ui="glass"] .lead-start-card,
html[data-ui="glass"] .doc-ready-panel,
html[data-ui="glass"] .docs-create,
html[data-ui="glass"] .docs-issued,
html[data-ui="glass"] .admin-to-row,
html[data-ui="glass"] .d2-hero,
html[data-ui="glass"] .d2-kpi,
html[data-ui="glass"] .table-wrap,
html[data-ui="glass"] .task-card,
html[data-ui="glass"] .chat-row,
html[data-ui="glass"] .debit-card,
html[data-ui="glass"] .debit-kpi,
html[data-ui="glass"] .debit-tree,
html[data-ui="glass"] .debit-roster-card,
html[data-ui="glass"] .issued-card,
html[data-ui="glass"] .spec-hist-card,
html[data-ui="glass"] .spec-active-card,
html[data-ui="glass"] .tips-spoiler,
html[data-ui="glass"] .result-card,
html[data-ui="glass"] .queue-row,
html[data-ui="glass"] .progress-panel,
html[data-ui="glass"] .hero .card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

/* Layer 2 — elevated: шапка, навбар, табы, чипы */
html[data-ui="glass"] .chrome,
html[data-ui="glass"] .bottom-tabbar {
  background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow-elevated), var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur-elevated)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--glass-blur-elevated)) saturate(170%);
}

html[data-ui="glass"] .tabs,
html[data-ui="glass"] .chip,
html[data-ui="glass"] .doc-tab,
html[data-ui="glass"] .choice-card,
html[data-ui="glass"] .rdp-chip,
html[data-ui="glass"] .theme-toggle,
html[data-ui="glass"] .btn-secondary,
html[data-ui="glass"] .lead-start-links a,
html[data-ui="glass"] .lead-start-row {
  background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  box-shadow: var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur-subtle)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle)) saturate(150%);
}

/* Внутри .lead-tile уже есть blur — второй слой не вешаем. */
html[data-ui="glass"] .lead-mini {
  background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  box-shadow: var(--glass-highlight);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-ui="glass"] .chip.is-on,
html[data-ui="glass"] .chip[aria-pressed="true"],
html[data-ui="glass"] .doc-tab.is-on,
html[data-ui="glass"] .tab.is-on,
html[data-ui="glass"] .choice-card.is-on,
html[data-ui="glass"] .choice-card:has(input:checked) {
  background: color-mix(in srgb, var(--gold-500) 16%, var(--glass-bg-elevated));
  border-color: color-mix(in srgb, var(--gold-500) 45%, var(--glass-border));
}

/* Сводка 2: липкая шапка таблицы и первая колонка матрицы — поверх стекла
   должны быть плотными, иначе цифры читаются сквозь строки под ними. */
html[data-ui="glass"] .cabinet-dash2 .d2-tr.is-head,
html[data-ui="glass"] .cabinet-dash2 .d2-heat th.d2-heat-task,
html[data-ui="glass"] .cabinet-dash2 .d2-heat th.d2-heat-who,
html[data-ui="glass"] .cabinet-dash2 .d2-heat thead th,
html[data-ui="glass"] .cabinet-dash2 .d2-heat thead th.d2-heat-corner {
  background: var(--glass-bg-floating);
}
html[data-ui="glass"] .d2-tabs { background: var(--glass-bg-subtle); }
html[data-ui="glass"] .d2-tab.is-active {
  background: var(--glass-bg-elevated);
  border: 1px solid var(--glass-border);
}

/* Layer 3 — floating: меню, поповеры, дропдауны */
html[data-ui="glass"] .pdf-menu-pop,
html[data-ui="glass"] .bottom-more-pop,
html[data-ui="glass"] .debit-issue-menu,
html[data-ui="glass"] .suggest-list,
html[data-ui="glass"] .spec-pick-tree {
  background: var(--glass-bg-floating);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-floating), var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur-floating)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(170%);
}

/* Layer 4 — modal: панель ТО в «Сводке 2» — тот же уровень, что и модалка */
html[data-ui="glass"] .d2-drawer,
html[data-ui="glass"] .modal-sheet {
  background: var(--glass-bg-modal);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-modal), var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur-modal)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur-modal)) saturate(180%);
}

html[data-ui="glass"] .modal-head {
  background: color-mix(in srgb, var(--glass-bg-modal) 88%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--glass-border);
}

html[data-ui="glass"] .d2-drawer-head {
  background: color-mix(in srgb, var(--glass-bg-modal) 88%, transparent);
  border-bottom-color: var(--glass-border);
}

html[data-ui="glass"] .d2-drawer-scrim,
html[data-ui="glass"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-ui="glass"][data-theme="light"] .d2-drawer-scrim,
html[data-ui="glass"][data-theme="light"] .modal-backdrop {
  background: rgba(28, 25, 23, 0.32);
}

/* Nested surfaces: без второго blur, чуть плотнее base */
html[data-ui="glass"] .panel .panel,
html[data-ui="glass"] .card .card,
html[data-ui="glass"] .panel .card,
html[data-ui="glass"] .dash-kpi-shell .dash-kpi-card,
html[data-ui="glass"] .dash-kpi-shell .dash-metric-card,
html[data-ui="glass"] .dash-team-card .dash-kpi-card,
html[data-ui="glass"] .dash-team-card .dash-trader-card,
html[data-ui="glass"] .dash-trader-card .dash-kpi-card,
html[data-ui="glass"] .lead-start-card .lead-start-links a,
html[data-ui="glass"] .lead-start-card .lead-start-row,
html[data-ui="glass"] .lead-start-card .lead-start-group-card,
html[data-ui="glass"] .lead-start-card .lead-start-task-panel,
html[data-ui="glass"] .lead-start-card .lead-start-chip,
html[data-ui="glass"] .doc-create-panel .panel,
html[data-ui="glass"] .panel .svc-card,
html[data-ui="glass"] .dash-recent,
html[data-ui="glass"] .dash-cash,
html[data-ui="glass"] .dash-specials-panel,
html[data-ui="glass"] .d2-hero .d2-month,
html[data-ui="glass"] .d2-signal,
html[data-ui="glass"] .d2-drawer .d2-dblock,
html[data-ui="glass"] .dash-spec-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--glass-bg-elevated);
  box-shadow: none;
  border-color: var(--glass-border);
}

/* Поля — непрозрачные, иначе плейсхолдер и текст тонут */
html[data-ui="glass"] .input,
html[data-ui="glass"] select,
html[data-ui="glass"] textarea {
  background-color: var(--input-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Таблицы — плотные строки, читаемость важнее стекла */
html[data-ui="glass"] .cabinet-table thead th {
  background: var(--table-head);
}

html[data-ui="glass"] .cabinet-table tbody tr:nth-child(odd) > th,
html[data-ui="glass"] .cabinet-table tbody tr:nth-child(odd) > td {
  background: var(--table-row-a);
}

html[data-ui="glass"] .cabinet-table tbody tr:nth-child(even) > th,
html[data-ui="glass"] .cabinet-table tbody tr:nth-child(even) > td {
  background: var(--table-row-b);
}

html[data-ui="glass"] .cabinet-table tbody tr:hover > th,
html[data-ui="glass"] .cabinet-table tbody tr:hover > td {
  background: var(--table-hover);
}

html[data-ui="glass"] .muted {
  color: var(--text-muted);
}

html[data-ui="glass"] .dash-trader-pane,
html[data-ui="glass"] .users-row,
html[data-ui="glass"] .chat-compose,
html[data-ui="glass"] .chat-composer {
  background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur-subtle)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle)) saturate(150%);
}

@media (max-width: 767px) {
  html[data-ui="glass"] {
    --glass-blur-subtle: 6px;
    --glass-blur: 10px;
    --glass-blur-elevated: 12px;
    --glass-blur-floating: 14px;
    --glass-blur-modal: 16px;
  }
  html[data-ui="glass"] body {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui="glass"] {
    --glass-blur-subtle: 0px;
    --glass-blur: 8px;
    --glass-blur-elevated: 8px;
    --glass-blur-floating: 8px;
    --glass-blur-modal: 8px;
  }
  html[data-ui="glass"] body {
    background-attachment: scroll;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ui="glass"] {
    --glass-bg: var(--surface);
    --glass-bg-subtle: var(--surface);
    --glass-bg-elevated: var(--surface-elevated);
    --glass-bg-floating: var(--surface-elevated);
    --glass-bg-modal: var(--surface-elevated);
    --glass-blur: 0px;
    --glass-blur-subtle: 0px;
    --glass-blur-elevated: 0px;
    --glass-blur-floating: 0px;
    --glass-blur-modal: 0px;
  }
  html[data-ui="glass"][data-theme="light"] {
    --glass-bg: var(--surface);
    --glass-bg-elevated: var(--surface-elevated);
    --glass-bg-floating: var(--surface-elevated);
    --glass-bg-modal: var(--surface);
  }
  html[data-ui="glass"] .chrome,
  html[data-ui="glass"] .card,
  html[data-ui="glass"] .panel,
  html[data-ui="glass"] .svc-card,
  html[data-ui="glass"] .dash-kpi-shell,
  html[data-ui="glass"] .dash-team-card,
  html[data-ui="glass"] .dash-trader-card,
  html[data-ui="glass"] .lead-tile,
  html[data-ui="glass"] .lead-start-card,
  html[data-ui="glass"] .modal-sheet,
  html[data-ui="glass"] .bottom-tabbar,
  html[data-ui="glass"] .bottom-more-pop,
  html[data-ui="glass"] .pdf-menu-pop,
  html[data-ui="glass"] .doc-ready-panel,
html[data-ui="glass"] .docs-create,
html[data-ui="glass"] .docs-issued,
  html[data-ui="glass"] .admin-to-row,
  html[data-ui="glass"] .table-wrap,
  html[data-ui="glass"] .task-card,
  html[data-ui="glass"] .d2-hero,
  html[data-ui="glass"] .d2-kpi,
  html[data-ui="glass"] .d2-drawer,
  html[data-ui="glass"] .chat-row {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }
}