/* ЭСС Пульт. Темы оформления поверх style.css.

   Тема выбирается в шапке и ставится атрибутом data-skin на <html>
   (запоминается в браузере, как светлая/тёмная). Без атрибута — «Классика»,
   то есть style.css как есть. Темы меняют только токены и оправу:
   разметку и графики не трогают, графики берут цвета из тех же переменных.

   Светлая/тёмная работает внутри «Стекла» и «Монохрома». «Ретро» всегда
   светлая: по замыслу это латунь и бумага, а не тёмный подвал. */

/* ===== Переключатель тем ================================================= */
.skin-sel {
  height: 32px; padding: 0 28px 0 10px; border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 12.5px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
@media (max-width: 860px) { .skin-sel { max-width: 110px; } }

/* Общая оправа для светлой боковой панели (стекло, монохром, ретро):
   в style.css пункты меню и логотип белые — под тёмный рельс */
:root[data-skin] .sidebar .brand,
:root[data-skin] .sidebar nav a.active,
:root[data-skin] .sidebar nav.clients a.client.open,
:root[data-skin] .m-topbar .brand,
:root[data-skin] .nav-toggle { color: var(--rail-strong); }
:root[data-skin] .sidebar nav a:hover { color: var(--rail-strong); background: var(--rail-hover); }

/* ===== Стекло ============================================================
   Рецепт из UI Kit Apple: полупрозрачные слои, тонкие блики по краям
   (внутренние тени со сдвигом), мягкая тень и размытие подложки.
   Под стеклом цветные пятна — без них ему нечего преломлять. Таблицы
   и графики остаются на почти непрозрачной подложке: цифры важнее эффекта. */
:root[data-skin="glass"] {
  --bg: #eef1f8;
  --surface: rgba(255,255,255,.40); --surface-2: rgba(255,255,255,.32);
  --line: rgba(255,255,255,.75); --line-soft: rgba(20,26,38,.07);
  --rail: rgba(255,255,255,.42); --rail-ink: #4a5468; --rail-active: rgba(255,255,255,.7);
  --rail-group: #7b8497; --rail-strong: #1b2230; --rail-hover: rgba(255,255,255,.45);
  --r-surface: 22px; --r-control: 12px;
  --glass-edge:
    inset 1.2px 0 0 -.2px rgba(255,255,255,.95), inset -1px 0 0 -.2px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35),
    inset 20px 0 20px -30px rgba(255,255,255,.9), inset -20px 0 20px -30px rgba(255,255,255,.9),
    0 8px 18px rgba(20,26,38,.05), 0 1px 2px rgba(20,26,38,.06);
  --blob-1: #8f84ff; --blob-2: #4fd1c5; --blob-3: #ffb36b; --blob-a: .7;
  --sheen: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.18));
}
:root[data-skin="glass"][data-theme="dark"] {
  --bg: #0d111a;
  --surface: rgba(40,44,56,.42); --surface-2: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.06);
  --rail: rgba(30,34,46,.55); --rail-ink: #a5aec2; --rail-active: rgba(255,255,255,.10);
  --rail-group: #6f7a8e; --rail-strong: #eef1f7; --rail-hover: rgba(255,255,255,.06);
  --glass-edge:
    inset 1.2px 0 0 -.2px rgba(255,255,255,.25), inset -1px 0 0 -.2px rgba(255,255,255,.2),
    inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06),
    inset 20px 0 20px -30px rgba(255,255,255,.3), inset -20px 0 20px -30px rgba(255,255,255,.3),
    0 10px 30px rgba(0,0,0,.35);
  --blob-1: #5b4fe0; --blob-2: #138a80; --blob-3: #a8541c; --blob-a: .6;
  --sheen: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05));
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme]) {
    --bg: #0d111a;
    --surface: rgba(40,44,56,.42); --surface-2: rgba(255,255,255,.06);
    --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.06);
    --rail: rgba(30,34,46,.55); --rail-ink: #a5aec2; --rail-active: rgba(255,255,255,.10);
    --rail-group: #6f7a8e; --rail-strong: #eef1f7; --rail-hover: rgba(255,255,255,.06);
    --glass-edge:
      inset 1.2px 0 0 -.2px rgba(255,255,255,.25), inset -1px 0 0 -.2px rgba(255,255,255,.2),
      inset 0 1px 0 rgba(255,255,255,.28), inset 20px 0 20px -30px rgba(255,255,255,.3),
      inset -20px 0 20px -30px rgba(255,255,255,.3), 0 10px 30px rgba(0,0,0,.35);
    --blob-1: #5b4fe0; --blob-2: #138a80; --blob-3: #a8541c; --blob-a: .6;
  --sheen: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05));
  }
}
:root[data-skin="glass"] body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 8% 6%, var(--blob-1), transparent 70%),
    radial-gradient(34% 40% at 96% 30%, var(--blob-2), transparent 70%),
    radial-gradient(30% 34% at 50% 104%, var(--blob-3), transparent 70%);
  opacity: var(--blob-a); filter: blur(30px);
  animation: glass-drift 40s ease-in-out infinite alternate;
}
/* пятна медленно плывут — стекло «живёт», когда под ним что-то движется */
@keyframes glass-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, 2%) scale(1.06); }
  100% { transform: translate(-2%, 3%) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { :root[data-skin="glass"] body::before { animation: none; } }
:root[data-skin="glass"] .layout { position: relative; z-index: 0; }
:root[data-skin="glass"] .sidebar { margin: 12px 0 12px 12px; height: calc(100dvh - 24px); top: 12px; border-radius: 26px; }
:root[data-skin="glass"] .header { margin: 12px 12px 0; border-radius: 999px; border-bottom: 0; }
:root[data-skin="glass"] :is(.sidebar, .header, .card, .kpi-row, .alert-peak, .nodata, .m-topbar) {
  background: var(--sheen), var(--surface); border-color: transparent; box-shadow: var(--glass-edge);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.04); -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.04);
}
:root[data-skin="glass"] .sidebar { background: var(--sheen), var(--rail); }
:root[data-skin="glass"] .sidebar nav a { margin: 1px 10px; border-radius: 14px; padding: 9px 12px; }
:root[data-skin="glass"] .sidebar nav a.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(0,0,0,.05); }
:root[data-skin="glass"] .tabs { border-radius: 999px; }
/* Плашка «вы смотрите чужой кабинет»: шапка в стекле — капсула с отступами,
   плашка встаёт под неё такой же капсулой, а не полосой во всю ширину */
:root[data-skin="glass"] .view-as-bar {
  margin: 10px 12px 0; border-radius: 999px; padding: 9px 22px;
  background: linear-gradient(color-mix(in srgb, var(--warn-soft) 70%, transparent), color-mix(in srgb, var(--warn-soft) 70%, transparent));
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
}
@media (max-width: 860px) { :root[data-skin="glass"] .view-as-bar { margin: 8px 8px 0; border-radius: 18px; } }
:root[data-skin="glass"] .tabs .tab { border-radius: 999px; }
:root[data-skin="glass"] .tabs .tab.active { box-shadow: var(--glass-edge); }
/* таблицы — на плотной подложке, иначе цифры плывут по цветному фону */
:root[data-skin="glass"] :is(.htable thead th, .htable tbody th, .table-wrap) { background: color-mix(in srgb, var(--bg) 88%, transparent); }
@media (max-width: 860px) {
  :root[data-skin="glass"] .sidebar { margin: 0; height: 100dvh; top: 0; border-radius: 0; }
  :root[data-skin="glass"] .header { margin: 8px 8px 0; }
  :root[data-skin="glass"] .m-topbar { background: var(--rail); }
}

/* ===== Монохром ==========================================================
   Только серая шкала: акцент — чёрный (в тёмной — белый). Цвет остаётся
   только у состояний «хорошо/плохо» и у окна СО: это смысл, а не украшение.
   Числа набраны моноширинным, как на табло. */
:root[data-skin="mono"] {
  --bg: #f5f5f4; --surface: #ffffff; --surface-2: #efefee;
  --line: #d9d9d7; --line-soft: #e8e8e6;
  --ink: #111111; --ink-2: #3d3d3d; --ink-3: #6b6b6b;
  --accent: #111111; --accent-ink: #111111; --accent-soft: #ececec;
  --rail: #ffffff; --rail-ink: #555555; --rail-active: #111111; --rail-group: #9a9a9a;
  --rail-strong: #111111; --rail-hover: #f0f0ef;
  --zone-peak: rgba(0,0,0,.08); --zone-half: rgba(0,0,0,.035);
  --r-surface: 4px; --r-control: 3px;
}
:root[data-skin="mono"][data-theme="dark"] {
  --bg: #0b0b0b; --surface: #141414; --surface-2: #1c1c1c;
  --line: #2c2c2c; --line-soft: #202020;
  --ink: #f2f2f2; --ink-2: #c4c4c4; --ink-3: #8c8c8c;
  --accent: #f2f2f2; --accent-ink: #f2f2f2; --accent-soft: #222222;
  --rail: #0b0b0b; --rail-ink: #9a9a9a; --rail-active: #f2f2f2; --rail-group: #5c5c5c;
  --rail-strong: #f2f2f2; --rail-hover: #1a1a1a;
  --zone-peak: rgba(255,255,255,.10); --zone-half: rgba(255,255,255,.04);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="mono"]:not([data-theme]) {
    --bg: #0b0b0b; --surface: #141414; --surface-2: #1c1c1c;
    --line: #2c2c2c; --line-soft: #202020;
    --ink: #f2f2f2; --ink-2: #c4c4c4; --ink-3: #8c8c8c;
    --accent: #f2f2f2; --accent-ink: #f2f2f2; --accent-soft: #222222;
    --rail: #0b0b0b; --rail-ink: #9a9a9a; --rail-active: #f2f2f2; --rail-group: #5c5c5c;
    --rail-strong: #f2f2f2; --rail-hover: #1a1a1a;
    --zone-peak: rgba(255,255,255,.10); --zone-half: rgba(255,255,255,.04);
  }
}
:root[data-skin="mono"] .sidebar { border-right: 1px solid var(--line); }
/* активный пункт — инверсия: чёрная плашка, светлый текст */
:root[data-skin="mono"] .sidebar nav a.active { color: var(--bg); background: var(--rail-active); }
:root[data-skin="mono"] .sidebar .brand .logo,
:root[data-skin="mono"] .m-topbar .brand .logo { background: var(--ink); color: var(--bg); }
:root[data-skin="mono"] .btn:not(.ghost), :root[data-skin="mono"] .w-sizes button.on { color: var(--bg); }
:root[data-skin="mono"] :is(.value, .ck-val, .ck-delta, .big-num, table.list td, .kpi .value) {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: -.01em;
}
:root[data-skin="mono"] :is(.card h3, .sidebar .group, .kpi .label) { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }

/* ===== Ретро =============================================================
   «Ретро-ОС»: бежевые окна старых систем, бирюзовые полосы заголовков,
   объёмные кнопки с фаской, пиксельный шрифт в заголовках. Всегда светлая.
   Цифры остаются моноширинными и крупными: стиль не должен мешать читать. */
:root[data-skin="retro"] {
  color-scheme: light;
  --bg: #d9d2bf; --surface: #efeadb; --surface-2: #e2dbc8;
  --line: #8f8a7a; --line-soft: #cdc6b2;
  --ink: #1d1f1c; --ink-2: #3e413b; --ink-3: #5f6158;
  --accent: #2a6b5f; --accent-ink: #1f564c; --accent-soft: #d5e3dc;
  --ok: #2f6b2a; --ok-soft: #dbe8d2; --bad: #a4281c; --bad-soft: #f0d8d2;
  --warn: #7a5200; --warn-soft: #f1e4c2; --warn-band: rgba(196,150,40,.16); --warn-fill: #c49628;
  --zone-peak: rgba(42,107,95,.16); --zone-half: rgba(42,107,95,.06);
  --rail: #2a6b5f; --rail-ink: #dfeee8; --rail-active: #1f564c; --rail-group: #a8cbc1;
  --rail-strong: #ffffff; --rail-hover: rgba(255,255,255,.08);
  --teal: #2a6b5f; --hi: #ffffff; --lo: #6f6a5c;
  --r-surface: 2px; --r-control: 2px; --r-pill: 2px;
}
/* фаска: светлый край сверху-слева, тёмный снизу-справа */
:root[data-skin="retro"] { --bevel: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
:root[data-skin="retro"] body {
  /* полутон рабочего стола: шахматка в пиксель, как дизеринг старых экранов */
  background-color: var(--bg);
  background-image: conic-gradient(rgba(70,64,48,.07) 25%, transparent 0 50%, rgba(70,64,48,.07) 0 75%, transparent 0);
  background-size: 4px 4px;
}
:root[data-skin="retro"] ::selection { background: #1f3f8f; color: #fff; }
:root[data-skin="retro"] :focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; border-radius: 0; }
/* классические полосы прокрутки с фаской */
:root[data-skin="retro"] ::-webkit-scrollbar { width: 16px; height: 16px; }
:root[data-skin="retro"] ::-webkit-scrollbar-track { background: conic-gradient(#d6cfbb 25%, #efeadb 0 50%, #d6cfbb 0 75%, #efeadb 0) 0 0 / 2px 2px; }
:root[data-skin="retro"] ::-webkit-scrollbar-thumb { background: var(--surface); border: 1px solid #4d4a40; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #6f6a5c; }
:root[data-skin="retro"] ::-webkit-scrollbar-corner { background: var(--surface-2); }
/* поля ввода вдавлены */
:root[data-skin="retro"] :is(input:not([type=checkbox]):not([type=radio]), select:not(.skin-sel), textarea) {
  border-radius: 0; background: #fffdf6; border: 1px solid #4d4a40;
  box-shadow: inset 1px 1px 0 #6f6a5c, inset -1px -1px 0 #fff;
}
:root[data-skin="retro"] :is(h1, h2, .sidebar .brand, .m-topbar .brand, .card h3, .sidebar .group) {
  font-family: 'Pixelify Sans', 'IBM Plex Mono', monospace; font-weight: 500; letter-spacing: .02em;
}
:root[data-skin="retro"] :is(.value, .ck-val, .ck-delta, .big-num, table.list td, .kpi .value) {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
/* Окна: рамка, тень-подложка и бирюзовая полоса сверху */
:root[data-skin="retro"] :is(.card, .kpi-row, .alert-peak, .nodata) {
  border: 1px solid #4d4a40; border-top: 6px solid var(--teal);
  box-shadow: var(--bevel), 3px 3px 0 rgba(60,56,44,.25);
}
/* заголовок карточки — полоса заголовка окна */
:root[data-skin="retro"] .card > h3:first-child {
  margin: -18px -20px 14px; padding: 5px 70px 4px 10px; color: #f4f1e6; position: relative;
  background: linear-gradient(90deg, #17463e, #2a6b5f 55%, #4f9a8a);
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
}
/* кнопки окна: свернуть, развернуть, закрыть — для узнаваемости, не нажимаются */
:root[data-skin="retro"] .card > h3:first-child::after {
  content: ""; position: absolute; right: 5px; top: 50%; width: 52px; height: 14px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='14'%3E%3Cg%3E%3Crect x='.5' y='.5' width='15' height='13' fill='%23efeadb' stroke='%234d4a40'/%3E%3Cpath d='M1 13V1h14' fill='none' stroke='%23fff'/%3E%3Cpath d='M4 10h7' stroke='%231d1f1c' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(18 0)'%3E%3Crect x='.5' y='.5' width='15' height='13' fill='%23efeadb' stroke='%234d4a40'/%3E%3Cpath d='M1 13V1h14' fill='none' stroke='%23fff'/%3E%3Crect x='4.5' y='3.5' width='7' height='6' fill='none' stroke='%231d1f1c'/%3E%3Cpath d='M4 4h8' stroke='%231d1f1c' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(36 0)'%3E%3Crect x='.5' y='.5' width='15' height='13' fill='%23efeadb' stroke='%234d4a40'/%3E%3Cpath d='M1 13V1h14' fill='none' stroke='%23fff'/%3E%3Cpath d='M5 4l6 6M11 4l-6 6' stroke='%231d1f1c' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  pointer-events: none;
}
:root[data-skin="retro"] .card:has(> h3:first-child) { border-top-width: 1px; }
:root[data-skin="retro"] .kpi { border-left-color: var(--line-soft); }
:root[data-skin="retro"] .kpi .label { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
/* Панель задач слева */
:root[data-skin="retro"] .sidebar { border-right: 2px solid #163f37; }
:root[data-skin="retro"] .sidebar .brand .logo,
:root[data-skin="retro"] .m-topbar .brand .logo { background: #efeadb; color: var(--teal); box-shadow: var(--bevel); border-radius: 2px; }
:root[data-skin="retro"] .sidebar nav a.active { background: var(--rail-active); }
:root[data-skin="retro"] .header { background: var(--surface-2); border-bottom: 2px solid #4d4a40; box-shadow: inset 0 -1px 0 var(--hi); }
/* Кнопки и вкладки — объёмные, нажатая утоплена */
:root[data-skin="retro"] :is(.btn, .tabs .tab, .theme-btn, .skin-sel, .btn-poll) {
  border-radius: 2px; background-color: var(--surface); color: var(--ink);
  border: 1px solid #4d4a40; box-shadow: var(--bevel);
}
:root[data-skin="retro"] .tabs { background: transparent; padding: 0; gap: 4px; }
:root[data-skin="retro"] .tabs .tab.active {
  background: #d6cfbb; color: var(--ink);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}
:root[data-skin="retro"] .btn:not(.ghost) { background: var(--teal); color: #fff; }
:root[data-skin="retro"] .theme-btn { display: none; }   /* ретро только светлое */
/* окна без своего заголовка получают пустую полосу заголовка с кнопками */
:root[data-skin="retro"] :is(.chart-card, .kpi-row, .alert-peak, .nodata):not(:has(> h3:first-child)) {
  border-top: 22px solid transparent;
  background: linear-gradient(90deg, #17463e, #2a6b5f 55%, #4f9a8a) top / 100% 22px no-repeat border-box,
              var(--surface) padding-box;
}
/* строка состояния внизу окна программы */
:root[data-skin="retro"] .main::after {
  content: "Готово  ·  ЭСС Пульт"; position: sticky; bottom: 0; display: block; margin-top: auto;
  padding: 3px 12px; font: 12px 'Pixelify Sans', monospace; color: var(--ink-2); white-space: pre;
  background: var(--surface-2); border-top: 1px solid #4d4a40; box-shadow: inset 0 1px 0 #fff;
}
@media (max-width: 860px) {
  :root[data-skin="retro"] .m-topbar { background: var(--teal); }
}
:root[data-skin="retro"] .view-as-bar { border-radius: 0; border: 1px solid #4d4a40; box-shadow: var(--bevel); }