/* ======================================================================
   ARGUS — тема «Кино» v5 (демо-тенант 123). Мягкая версия:
   • тёмная «ночь»  — :root[data-theme="dark"]: тёплый сливово-графитовый фон без насыщенности,
     мягкий белый текст, ОДИН акцент — пыльная роза; статусы приглушены (шалфей/песок/коралл).
   • светлая «пастель» — :root:not([data-theme="dark"]): лавандово-молочный фон с пастельными
     пятнами под стеклом, полупрозрачные белые карточки с бликом, пастельные статусы.
   Правило акцентов: по умолчанию всё нейтральное; цвет — только по смыслу (статус) или при
   наведении/выборе. Никаких неоновых свечений. Контраст текста проверен (WCAG ≥ 4.5).
   ====================================================================== */

/* ---------------- ТЁМНАЯ «ночь» ---------------- */
:root[data-theme="dark"] {
  --bg-gradient: linear-gradient(180deg, #1e1a24 0%, #17141c 55%, #121016 100%);
  --panel-solid: #1b1721;
  --text-primary: #e2dce8;
  --text-secondary: #a39cae;
  --primary-color: #d4a0b4;
  --primary-hover: #c48aa1;
  --glass-bg: rgba(34, 29, 41, 0.94);
  --card-bg: rgba(41, 36, 50, 0.72);
  --glass-border: rgba(255, 255, 255, 0.07);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.10);
  --lg-fill: rgba(255, 255, 255, 0.045);
  --lg-fill-raised: rgba(255, 255, 255, 0.08);
  --lg-fill-soft: rgba(255, 255, 255, 0.035);
  --lg-border: rgba(255, 255, 255, 0.08);
  --lg-hairline: rgba(255, 255, 255, 0.06);
  --lg-highlight: rgba(255, 255, 255, 0.06);
  --lg-tint: rgba(200, 170, 210, 0.06);
  --lg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --lg-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.28);
  --lg-shadow-3: 0 18px 44px rgba(0, 0, 0, 0.38);
  --lg-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.22);
  --lg-shadow-card-hover: 0 8px 22px rgba(0, 0, 0, 0.30);
  --lg-ring: 0 0 0 3px rgba(212, 160, 180, 0.16);
  --color-online: #94c9a6;
  --color-offline: #958fa1;
  --color-closed: #d6c08d;
  --color-error: #d99590;
  --chart-inc: #94c9a6; --chart-out: #d4a0b4; --chart-mis: #d99590;
  --chart-1: #d4a0b4; --chart-2: #94c9a6; --chart-3: #b3a6dc; --chart-4: #d99590;
  --chart-5: #d6c08d; --chart-6: #8fbfc8; --chart-7: #a7b4dc; --chart-8: #c7a9d6;
  --chart-track: rgba(255, 255, 255, 0.06);

  --film-accent: #d4a0b4;
  --film-accent-strong: #c48aa1;
  --film-accent-fg: #dcb0c1;
  --film-accent-soft: rgba(212, 160, 180, 0.12);
  --film-accent-border: rgba(212, 160, 180, 0.42);
  --film-accent-ring: rgba(212, 160, 180, 0.16);
  --film-ok: #94c9a6;      --film-ok-soft: rgba(148, 201, 166, 0.12);  --film-ok-border: rgba(148, 201, 166, 0.30);
  --film-warn: #d6c08d;    --film-warn-soft: rgba(214, 192, 141, 0.12);
  --film-danger: #d99590;  --film-danger-soft: rgba(217, 149, 144, 0.12); --film-danger-border: rgba(217, 149, 144, 0.32);
  --film-muted: #958fa1;
  --film-badge-bg: #c98a85; --film-badge-fg: #1e1a24;
  --film-glows:
    radial-gradient(900px 520px at 85% -10%, rgba(212, 160, 180, 0.07), transparent 60%),
    radial-gradient(760px 480px at 5% 0%, rgba(170, 150, 215, 0.06), transparent 62%);
  --film-header-bg: linear-gradient(180deg, rgba(36, 31, 44, 0.78), rgba(28, 24, 34, 0.70));
  --film-card-bg: linear-gradient(180deg, rgba(46, 40, 56, 0.72), rgba(36, 31, 44, 0.66));
  --film-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  --film-glass-rim: rgba(255, 255, 255, 0.075);
  --film-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --film-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  --film-chip-bg: rgba(255, 255, 255, 0.06);
  --film-placeholder: rgba(226, 220, 232, 0.38);
  --film-row-hover: rgba(255, 255, 255, 0.03);
  --film-overlay: rgba(10, 8, 13, 0.55);
  --film-scroll: rgba(255, 255, 255, 0.12);
  --film-scroll-hover: rgba(212, 160, 180, 0.40);
  --film-btn-bg: linear-gradient(180deg, #d9a9bb, #c793a7);
  --film-btn-fg: #221c27;
  --film-btn-border: rgba(212, 160, 180, 0.55);
  --film-btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  --film-surface-2: rgba(255, 255, 255, 0.03);
  --film-hairline: rgba(255, 255, 255, 0.06);
  --film-card-hover-ring: 0 0 0 1px rgba(212, 160, 180, 0.18);
  --film-card-hover-border: rgba(212, 160, 180, 0.28);
  --film-wordmark: #e2dce8;
  --film-muted-on-bg: rgba(226, 220, 232, 0.50);
  --film-logo: #e2dce8;
  --film-iris: #d4a0b4;
  --film-logo-pupil: #1b1721;
  --film-logo-glow: drop-shadow(0 0 10px rgba(212, 160, 180, 0.18));
  color-scheme: dark;
}

/* ---------------- СВЕТЛАЯ «пастель» ---------------- */
:root:not([data-theme="dark"]) {
  --bg-gradient: linear-gradient(160deg, #f6f1f7 0%, #f1edf7 45%, #edf0f6 100%);
  --panel-solid: #f8f5fa;
  --text-primary: #3d3548;
  --text-secondary: #6f6780;
  --primary-color: #c27a98;
  --primary-hover: #a8577a;
  --glass-bg: rgba(255, 255, 255, 0.86);
  --card-bg: rgba(255, 255, 255, 0.60);
  --glass-border: rgba(110, 90, 150, 0.12);
  --input-bg: rgba(255, 255, 255, 0.70);
  --input-border: rgba(110, 90, 150, 0.16);
  --lg-fill: rgba(255, 255, 255, 0.55);
  --lg-fill-raised: rgba(255, 255, 255, 0.80);
  --lg-fill-soft: rgba(110, 90, 150, 0.05);
  --lg-border: rgba(110, 90, 150, 0.13);
  --lg-hairline: rgba(110, 90, 150, 0.08);
  --lg-highlight: rgba(255, 255, 255, 0.90);
  --lg-tint: rgba(200, 180, 230, 0.10);
  --lg-shadow-1: 0 1px 2px rgba(110, 90, 140, 0.06);
  --lg-shadow-2: 0 6px 18px rgba(110, 90, 140, 0.08);
  --lg-shadow-3: 0 18px 44px rgba(110, 90, 140, 0.12);
  --lg-shadow-card: 0 6px 18px rgba(110, 90, 140, 0.08);
  --lg-shadow-card-hover: 0 10px 26px rgba(110, 90, 140, 0.12);
  --lg-ring: 0 0 0 3px rgba(194, 122, 152, 0.16);
  --color-online: #5fae84;
  --color-offline: #a59eb2;
  --color-closed: #d4b062;
  --color-error: #d98585;
  --chart-inc: #7cc49c; --chart-out: #e2a4bc; --chart-mis: #e6a3a3;
  --chart-1: #e2a4bc; --chart-2: #7cc49c; --chart-3: #b7a9e6; --chart-4: #e6a3a3;
  --chart-5: #e8cd8a; --chart-6: #93cdd6; --chart-7: #a9b7e6; --chart-8: #d3b1e0;
  --chart-track: rgba(110, 90, 150, 0.07);

  --film-accent: #c27a98;
  --film-accent-strong: #a8577a;
  --film-accent-fg: #a8577a;
  --film-accent-soft: rgba(226, 164, 188, 0.22);
  --film-accent-border: rgba(194, 122, 152, 0.40);
  --film-accent-ring: rgba(194, 122, 152, 0.16);
  --film-ok: #2f7550;      --film-ok-soft: rgba(124, 196, 156, 0.20);  --film-ok-border: rgba(95, 174, 132, 0.35);
  --film-warn: #7f611c;    --film-warn-soft: rgba(232, 205, 138, 0.28);
  --film-danger: #a24848;  --film-danger-soft: rgba(230, 163, 163, 0.24); --film-danger-border: rgba(217, 133, 133, 0.38);
  --film-muted: #736c86;
  --film-badge-bg: #f0c2c2; --film-badge-fg: #7a2f2f;
  --film-glows:
    radial-gradient(820px 520px at 88% -6%, rgba(246, 196, 214, 0.55), transparent 62%),
    radial-gradient(760px 520px at 4% 4%, rgba(203, 192, 246, 0.50), transparent 62%),
    radial-gradient(1000px 640px at 55% 115%, rgba(196, 232, 220, 0.45), transparent 62%);
  --film-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.42));
  --film-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.50));
  --film-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.34));
  --film-glass-rim: rgba(255, 255, 255, 0.85);
  --film-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --film-glass-shadow: 0 0 0 1px rgba(110, 90, 150, 0.07), 0 4px 14px rgba(110, 90, 140, 0.06);
  --film-chip-bg: rgba(110, 90, 150, 0.07);
  --film-placeholder: rgba(61, 53, 72, 0.42);
  --film-row-hover: rgba(110, 90, 150, 0.04);
  --film-overlay: rgba(70, 55, 90, 0.18);
  --film-scroll: rgba(110, 90, 150, 0.18);
  --film-scroll-hover: rgba(194, 122, 152, 0.45);
  --film-btn-bg: linear-gradient(180deg, #f5d3df, #eec1d1);
  --film-btn-fg: #7a3355;
  --film-btn-border: rgba(194, 122, 152, 0.35);
  --film-btn-shadow: 0 4px 12px rgba(194, 122, 152, 0.16);
  --film-surface-2: rgba(110, 90, 150, 0.04);
  --film-hairline: rgba(110, 90, 150, 0.08);
  --film-card-hover-ring: 0 0 0 1px rgba(194, 122, 152, 0.18);
  --film-card-hover-border: rgba(194, 122, 152, 0.30);
  --film-wordmark: #3d3548;
  --film-muted-on-bg: rgba(61, 53, 72, 0.50);
  --film-logo: #4a4057;
  --film-iris: #e0a3bb;
  --film-logo-pupil: #f8f5fa;
  --film-logo-glow: drop-shadow(0 2px 8px rgba(194, 122, 152, 0.18));
  color-scheme: light;
}

/* ================= ФОН ================= */
body {
  background: var(--bg-gradient) !important;
  background-attachment: fixed !important;
  color: var(--text-primary);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--film-glows);
}

/* ================= ШАПКА — жидкое стекло =================
   Главная шапка — <header> БЕЗ класса (инлайн-стиль), поэтому body > header. */
body > header,
.header {
  background: var(--film-header-bg) !important;
  border-bottom: 1px solid var(--film-glass-rim) !important;
  box-shadow: var(--film-glass-inset) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
}
body > header h1, body > header .modern-title, .header h1, .brand, .header strong { color: var(--text-primary); letter-spacing: 0.03em; }
.header-sep { background: var(--film-hairline) !important; }
.header-actions button, .header-actions .btn-icon, .header-actions .icon-btn { color: var(--text-secondary) !important; }
.header-actions button:hover, .header-actions .icon-btn:hover { color: var(--text-primary) !important; }

/* Глаз (шапка/вход/лоадер): радужка — в цвет акцента, мягкое свечение вместо цианового. */
body > header .logo-pulse, #auth-overlay .auth-logo, #app-loader .app-loader-logo {
  color: var(--film-logo) !important;
  filter: var(--film-logo-glow) !important;
}
body > header .logo-pulse circle[r="23"], #auth-overlay .auth-logo circle[r="23"], #app-loader .app-loader-logo circle[r="23"] { fill: var(--film-iris) !important; }
body > header .logo-pulse circle[r="8"], #auth-overlay .auth-logo circle[r="8"], #app-loader .app-loader-logo circle[r="8"] { fill: var(--film-logo-pupil) !important; }

/* «N/N онлайн» — мягкий шалфей, без свечения. */
.fleet-health {
  color: var(--film-ok) !important;
  background: var(--film-ok-soft) !important;
  border: 1px solid var(--film-ok-border) !important;
  box-shadow: none !important;
}

/* ================= ПОЛЯ ВВОДА =================
   Инлайн-поля «имя ПК» / «название группы» (.device-label-input) — обычный текст: рамка только
   при наведении (у админа) и при редактировании. Остальные поля — стекло. */
.input-field, .themed-input, #dashboard-search,
input[type="text"]:not(.device-label-input), input[type="password"], input[type="search"],
input[type="number"], input[type="email"], textarea, select {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}
::placeholder { color: var(--film-placeholder) !important; }

.device-label-input {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
.device-label-input:not([readonly]):hover {
  background: var(--lg-fill-soft) !important;
  border-color: var(--lg-border) !important;
}
.device-label-input[readonly]:hover { background: transparent !important; border-color: transparent !important; }
.device-label-input:focus {
  background: transparent !important;
  border-color: var(--film-accent-border) !important;
  box-shadow: 0 0 0 3px var(--film-accent-ring) !important;
}

/* ================= ФИЛЬТРЫ ================= */
#dashboard-toolbar .filter-chip:not(.active),
#dashboard-toolbar #bulk-toggle-btn {
  background: var(--film-glass) !important;
  border: 1px solid var(--film-glass-rim) !important;
  color: var(--text-secondary);
  box-shadow: var(--film-glass-inset), var(--film-glass-shadow) !important;
}
#dashboard-toolbar .filter-chip:not(.active):hover,
#dashboard-toolbar #bulk-toggle-btn:hover {
  background: var(--lg-fill-raised) !important;
  color: var(--text-primary);
}
/* Активный — мягкая заливка акцентом + тонкая обводка, без свечения. */
#dashboard-toolbar #dashboard-chips .filter-chip.active {
  background: var(--film-accent-soft) !important;
  border-color: var(--film-accent-border) !important;
  color: var(--film-accent-fg) !important;
  box-shadow: var(--film-glass-inset) !important;
}
#dashboard-toolbar #dashboard-chips .filter-chip.active .chip-count,
.filter-chip .chip-count {
  background: var(--film-chip-bg) !important;
  border-color: transparent !important;
  color: inherit !important;
}
#dashboard-toolbar #dashboard-search:focus { box-shadow: var(--lg-ring) !important; }

/* ================= ШАПКА ГРУППЫ — жидкое стекло, тонкая обводка =================
   Рисуется в JS инлайн-стилем (rgba(0,0,0,.12) + тень) без класса — первый ребёнок секции. */
.dashboard-group-section > div:first-child,
.group-header {
  background: var(--film-glass) !important;
  border: 1px solid var(--film-glass-rim) !important;
  box-shadow: var(--film-glass-inset), var(--film-glass-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
}
.dashboard-group-section > div:first-child:hover { background: var(--lg-fill-raised) !important; }
.dashboard-group-section > div:first-child h2 { font-weight: 600 !important; }
.dashboard-group-section > div:first-child h2 > svg { stroke: var(--text-secondary) !important; opacity: 0.85; }
.dashboard-group-section > div:first-child h2 > span {
  background: var(--film-chip-bg) !important;
  color: var(--text-secondary) !important;
}
.dashboard-group-section [id^="chevron-"] svg { stroke: var(--text-secondary) !important; }

/* ================= КАРТОЧКА ================= */
.card,
.card.online, .card.closed, .card.offline, .card.error {
  background: var(--film-card-bg) !important;
  border: 1px solid var(--film-glass-rim) !important;
  box-shadow: var(--film-glass-inset), var(--lg-shadow-card) !important;
}
.card.offline, .card.error { opacity: 0.88; }
.card:hover {
  box-shadow: var(--film-glass-inset), var(--lg-shadow-card-hover), var(--film-card-hover-ring) !important;
  border-color: var(--film-card-hover-border) !important;
}
.card h3 { color: var(--text-primary) !important; }
.card-sparkline-label { color: var(--text-secondary) !important; }
.card-sparkline-empty { color: var(--film-placeholder) !important; }
/* Корзина: нейтральная, красная только при наведении. */
.card .icon-btn.delete { color: var(--text-secondary) !important; opacity: 0.55; transition: opacity 0.2s, color 0.2s; }
.card .icon-btn.delete svg { stroke: currentColor !important; }
.card:hover .icon-btn.delete { opacity: 0.8; }
.card .icon-btn.delete:hover { color: var(--film-danger) !important; opacity: 1; }
/* Инлайн-точки статуса (#16a34a / #dc2626) → мягкие статусы. */
.card [style*="background-color: #16a34a"] { background-color: var(--color-online) !important; }
.card [style*="background-color: #dc2626"] { background-color: var(--color-error) !important; }

/* Строка SIP-статуса (иконка + текст красятся инлайном color: <hex>) → мягкие статусы.
   Шесть ярких цветов app.js сводятся к четырём приглушённым: ok / warn / danger / акцент (звонок). */
.card [style*="color: #15803d"] { color: var(--film-ok) !important; }
.card [style*="color: #ffcc00"], .card [style*="color: #ff9500"] { color: var(--film-warn) !important; }
.card [style*="color: #ff3b30"] { color: var(--film-danger) !important; }
.card [style*="color: #0a84ff"] { color: var(--film-accent-fg) !important; }
.card [style*="color: #8e8e93"] { color: var(--film-muted) !important; }

/* SIP-чипы на карточке (инлайн: рамка 2px + яркий цвет) → мягкие статусы, тонкая рамка. */
.sip-tags-box { border-top-color: var(--film-hairline) !important; }
.sip-tags-box [style*="border-color: #16a34a"] { border-color: var(--film-ok-border) !important; background: var(--film-ok-soft) !important; color: var(--film-ok) !important; border-width: 1px !important; }
.sip-tags-box [style*="border-color: #0a84ff"] { border-color: var(--film-accent-border) !important; background: var(--film-accent-soft) !important; color: var(--film-accent-fg) !important; border-width: 1px !important; }
.sip-tags-box [style*="border-color: #f0b34e"] { border-color: var(--film-warn) !important; background: var(--film-warn-soft) !important; color: var(--film-warn) !important; border-width: 1px !important; }
.sip-tags-box [style*="border-color: #dc2626"] { border-color: var(--film-danger-border) !important; background: var(--film-danger-soft) !important; color: var(--film-danger) !important; border-width: 1px !important; }
/* Бейдж алертов у колокольчика — мягкий коралл вместо ярко-красного. */
.alerts-badge { background: var(--film-badge-bg) !important; color: var(--film-badge-fg) !important; box-shadow: none !important; border-color: transparent !important; }

/* ================= КНОПКИ ================= */
.btn-primary, button.btn-primary, .btn.btn-primary {
  background: var(--film-btn-bg) !important;
  border: 1px solid var(--film-btn-border) !important;
  color: var(--film-btn-fg) !important;
  box-shadow: var(--film-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.btn-primary:hover { filter: brightness(1.04); }
.btn, .btn-secondary, .btn-icon {
  background: var(--film-glass) !important;
  border: 1px solid var(--film-glass-rim) !important;
  color: var(--text-primary) !important;
}
.btn:hover, .btn-secondary:hover, .btn-icon:hover { background: var(--lg-fill-raised) !important; }
.btn-danger, .btn-ghost-red { color: var(--film-danger) !important; border-color: var(--film-danger-border) !important; background: var(--film-danger-soft) !important; }

/* ================= ВКЛАДКИ ================= */
.tab-btn.active, .tabs .tab-btn.active {
  color: var(--film-accent-fg) !important;
  border-color: var(--film-accent-border) !important;
}

/* ================= МОДАЛКИ / ПАНЕЛИ — стекло ================= */
.modal, .modal-content, .modal-card, .modal-base, .sip-sidebar, .sip-sidebar-content,
.panel, .popover, .dropdown-menu, .menu {
  background: var(--glass-bg) !important;
  color: var(--text-primary);
  border: 1px solid var(--film-glass-rim) !important;
  box-shadow: var(--film-glass-inset), var(--lg-shadow-3) !important;
}
.modal-overlay { background: var(--film-overlay) !important; }

/* ================= ТАБЛИЦЫ ================= */
table th { color: var(--text-secondary) !important; }
table td, table th { border-color: var(--film-hairline) !important; }
tr:hover > td { background: var(--film-row-hover) !important; }

/* ================= СКРОЛЛБАРЫ — тонкие, нейтральные ================= */
* { scrollbar-color: var(--film-scroll) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--film-scroll); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--film-scroll-hover); background-clip: content-box; }

/* ================= ЭКРАН ВХОДА / ЛОАДЕР ================= */
#auth-overlay .auth-wordmark { color: var(--film-wordmark) !important; text-shadow: none !important; }
#auth-overlay label { color: var(--text-secondary) !important; }
#auth-overlay input[type="checkbox"] { accent-color: var(--film-accent) !important; }
#auth-overlay .auth-footer { color: var(--film-muted-on-bg) !important; }
#auth-overlay .auth-footer a { color: var(--film-accent-fg) !important; }
#app-loader .app-loader-spin { border-color: var(--film-hairline) !important; border-top-color: var(--film-accent) !important; }
:root:not([data-theme="dark"]) #app-loader::after { background: rgba(255, 255, 255, 0.20) !important; }
:root[data-theme="dark"] #app-loader::after { background: rgba(10, 8, 13, 0.30) !important; }
#app-loader::before { background-image: var(--splash-bg, none), var(--film-glows) !important; }


/* ======================================================================
   ДОРАБОТКА «Кино»: цвета, зашитые мимо токенов (старый синий #007aff / #0a84ff / #378ADD,
   бирюза #33E1E0, чёрные/белые альфа-заливки и подложки). Только токены → одно правило на обе
   палитры. Звонок = акцент; статусы = --film-ok / --film-warn / --film-danger (с фолбэком на
   --color-*). Инлайн-стили перебиваем только через !important.
   ====================================================================== */

/* ---------- Служебное ---------- */
:root {
  --text-muted: var(--text-secondary);   /* app.js красит им ось «Активности», но токен нигде не задан */
  accent-color: var(--film-accent);      /* все нативные чекбоксы/радио/ползунки без своего accent-color */
}

/* ---------- Логотип: клон глаза, «летящий» из лоадера в шапку, терял классы → бирюзовая радужка ---------- */
.film-fly-logo circle[r="23"] { fill: var(--film-iris, var(--film-accent)); }
.film-fly-logo circle[r="8"] { fill: var(--film-logo-pupil); }

/* ---------- Иконки со stroke="#007aff" (колокольчик в «Центре алертов»; заголовок группы уже нейтрален) ---------- */
svg[stroke="#007aff"] { stroke: var(--text-secondary); }

/* ---------- Дашборд: перетаскивание, спарклайн ---------- */
/* Рамка шапки группы из темы (!important) глушила пунктир «сюда бросить группу». */
.dashboard-group-section > div:first-child[style*="dashed"] { border-top: 2px dashed var(--film-accent-border) !important; }
/* Сетка группы при перетаскивании карточки: в JS var(--primary) не существует → рамки не было, был только синий 5%. */
.dashboard-grid[style*="10, 132, 255"] {
  background-color: var(--film-accent-soft) !important;
  outline: 2px dashed var(--film-accent-border);
  outline-offset: -4px;
}
/* Мини-график 7 дней: серый iOS → приглушённый тон палитры, «сегодня» плотнее. */
.card-sparkline svg rect { fill: var(--film-muted, var(--text-secondary)); fill-opacity: 0.45; }
.card-sparkline svg rect:last-of-type { fill-opacity: 1; }

/* ---------- Карточка ПК: «В звонке» (#378ADD) не входил в маппинг SIP-статусов ---------- */
.card [style*="color: #378ADD"] { color: var(--film-accent-fg) !important; }
/* Серые (неактивные) SIP-теги: базовый индиго-фон из style.css. Цветные теги красит тема (!important). */
.assigned-sip-tag { background: var(--film-chip-bg, var(--lg-fill-soft)); }

/* ---------- Окно ПК: аккаунты, вкладки, период ---------- */
.acc-status-dot[style*="#15803d"] { background: var(--color-online) !important; }
.acc-status-dot[style*="#d97706"], .acc-status-dot[style*="#ff9500"] { background: var(--color-closed) !important; }
.acc-status-dot[style*="#dc2626"], .acc-status-dot[style*="#ff3b30"] { background: var(--color-error) !important; }
.acc-status-dot[style*="#0a84ff"] { background: var(--film-accent) !important; }
.acc-status-dot[style*="#8e8e93"] { background: var(--color-offline) !important; }
.tab-indicator { box-shadow: none; }   /* было синее свечение под розовой полоской */
.account-item:hover,
.codecs-list-compact .codec-item:hover { border-color: var(--film-accent-border); }
.account-item.active-account {
  border-color: var(--film-accent-border);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px var(--film-accent-ring);
}
.logs-period-switch button:hover { border-color: var(--film-accent-border); }
.logs-period-switch button.active {
  border-color: var(--film-accent-border);
  color: var(--film-accent-fg);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px var(--film-accent-ring);
}

/* ---------- Окно ПК: история, статистика, донаты (и «Направление звонков» в аналитике) ---------- */
/* Стрелки направления — это текст: берём текстовые статус-токены, а не пастельные --chart-*. */
.log-dir-icon[style*="#007aff"] { color: var(--film-accent-fg) !important; }
.log-dir-icon[style*="#15803d"] { color: var(--film-ok, var(--color-online)) !important; }
.log-dir-icon[style*="#dc2626"] { color: var(--film-danger, var(--color-error)) !important; }
/* Точки, полоски и сегменты донатов — заливки: те же --chart-*, что у остальных графиков темы. */
.lstat-dot[style*="#007aff"], .lstat-bar-fill[style*="#007aff"] { background: var(--chart-out) !important; }
.lstat-dot[style*="#15803d"], .lstat-bar-fill[style*="#15803d"] { background: var(--chart-inc) !important; }
.lstat-dot[style*="#dc2626"], .lstat-bar-fill[style*="#dc2626"] { background: var(--chart-mis) !important; }
circle.lstat-seg[stroke="#007aff"] { stroke: var(--chart-out); }
circle.lstat-seg[stroke="#15803d"] { stroke: var(--chart-inc); }
circle.lstat-seg[stroke="#dc2626"] { stroke: var(--chart-mis); }
.lstat-clickable:hover { background: var(--film-row-hover); }
.hist-filter-chip,
.hist-filter-chip button { background: var(--film-accent-soft); color: var(--film-accent-fg); }
.lstat-donut-tip {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--lg-shadow-2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.lstat-tip-name { color: var(--text-primary); }
.lstat-tip-val { color: var(--text-secondary); }

/* ---------- Окно ПК: «Активность» (дорожки, легенда, итог «В звонках») ---------- */
#activity-content [style*="background:#378ADD"] { background: var(--film-accent) !important; }
#activity-content [style*="color:#378ADD"] { color: var(--film-accent-fg) !important; }
#activity-content [style*="rgba(127,127,127,0.16)"] { background: var(--chart-track) !important; }

/* ---------- Окно ПК: записи (выбор строки, «Исходящий», плеер, спиннеры) ---------- */
#recordings-list tr.rec-selected > td:first-child { box-shadow: inset 3px 0 0 var(--film-accent); }
.rec-direction.outgoing { background: var(--film-accent-soft) !important; color: var(--film-accent-fg) !important; }
.custom-player input[type="range"],
#all-rec-seek { accent-color: var(--film-accent) !important; }
.btn-download .spinner { border-color: var(--film-accent-ring) !important; border-top-color: var(--film-accent) !important; }
#recordings-loading .spinner { border-top-color: var(--film-accent) !important; }

/* ---------- Аналитика ---------- */
#stats-talktime [style*="color:#378ADD"] { color: var(--film-accent-fg) !important; }
.stats-compare-delta[style*="#15803d"] { color: var(--film-ok, var(--color-online)) !important; }
.stats-compare-delta[style*="#dc2626"] { color: var(--film-danger, var(--color-error)) !important; }
.data-table tbody tr:hover,
.scoring-table tbody tr:hover,
.cmp-row:hover,
.stats-number-click:hover,
.dozvon-legend-click:hover,
.trend-tab:not(.active):hover { background: var(--film-row-hover); }
.stats-number-bar-fill { background: var(--chart-out); }
.stats-panel-header .ui-picker-item:hover:not(:disabled) { background: var(--film-row-hover) !important; }
.stats-panel-header .ui-picker-item.active { background: var(--film-accent-soft) !important; color: var(--film-accent-fg) !important; }

/* ---------- Выпадающие списки, палитра команд, поповер подтверждения ---------- */
.ui-picker-item.active,
.lg-select-opt.active { background: var(--film-accent-soft); color: var(--film-accent-fg); }
.lg-select.open .lg-select-btn { border-color: var(--film-accent-border); }
.cmd-item.active, .cmd-item:hover { background: var(--film-accent-soft); }
.delete-popover .dp-confirm-blue:hover { background: var(--film-accent-soft) !important; }

/* ---------- Диалог customAlert (JS: element.style.color → в атрибуте rgb()) ---------- */
#custom-alert-title[style*="rgb(0, 122, 255)"],
#custom-alert-icon-info[style*="rgb(0, 122, 255)"] { color: var(--film-accent-fg) !important; }
#custom-alert-title[style*="rgb(255, 204, 0)"],
#custom-alert-icon-info[style*="rgb(255, 204, 0)"] { color: var(--film-warn, var(--color-closed)) !important; }
#custom-alert-title[style*="rgb(52, 199, 89)"],
#custom-alert-icon-info[style*="rgb(52, 199, 89)"] { color: var(--film-ok, var(--color-online)) !important; }
#custom-alert-title[style*="rgb(255, 59, 48)"],
#custom-alert-icon-info[style*="rgb(255, 59, 48)"] { color: var(--film-danger, var(--color-error)) !important; }

/* ---------- Подложки модалок: чёрная вуаль 45–60% → токен темы ---------- */
#settings-overlay, #global-settings-overlay, #multi-assign-overlay, #distribute-overlay,
#all-rec-overlay, #drilldown-overlay, #group-devices-overlay, #custom-confirm-overlay,
#custom-alert-overlay, #agent-log-overlay, #monitors-overlay, #vpn-overlay,
.acct-modal-overlay, .stats-overlay, .forced-pw-overlay, .ops-modal-overlay,
#command-palette-overlay { background: var(--film-overlay) !important; }

/* ---------- Вложенные панели в модалках: rgba(0,0,0,.1–.2) → вторичная поверхность ---------- */
#multi-assign-device-list, #group-devices-list, #gs-target-groups, #gs-target-devices,
#global-settings-list > label,
#agent-existing-list > div { background: var(--film-surface-2) !important; }
#agent-mgmt-list .am-row { background: var(--film-surface-2); }   /* id перебивает инжектируемый <style id="am-style"> */

/* ---------- Сплошные окна: форма учётки, лог агента, «Мониторы», «Записи» ---------- */
/* Форма учётки выносится в <body>; JS выбирает фон по --input-bg и в тёмной «Кино» ставит #ffffff. */
#acct-form { background: var(--panel-solid) !important; box-shadow: var(--lg-shadow-3) !important; }
:root #agent-log-card { background: var(--panel-solid) !important; }
:root #monitors-overlay .modal-base { background: var(--panel-solid) !important; box-shadow: var(--lg-shadow-3) !important; }
:root #mon-sidebar { background: linear-gradient(var(--film-surface-2), var(--film-surface-2)), var(--panel-solid) !important; }
/* Двойной id — чтобы перебить ':root:not([data-theme=dark]) #all-rec-overlay .modal-base' с !important. */
#all-rec-overlay#all-rec-overlay .modal-base { background: color-mix(in srgb, var(--panel-solid) 50%, transparent) !important; }

/* ---------- Настройки → Агенты / Учётки / Вид ---------- */
/* «Стереть весь парк» / «Удалить»: ghost-кнопки настроек и тема съедали красный — возвращаем «опасный» цвет. */
#agent-mgmt-list .btn[style*="#b91c1c"],
#agent-mgmt-list .btn[style*="#ff453a"] { color: var(--film-danger, var(--color-error)) !important; }
#agent-mgmt-list span[style*="#0a84ff"] { background: var(--chart-3) !important; }   /* точка «Watchdog: онлайн» */
#agent-upload-bar { background: var(--film-accent) !important; }
#agent-drop-zone[style*="rgba(255, 255, 255, 0.05)"] { background: var(--film-accent-soft) !important; }
#settings-overlay .btn-primary:hover { color: var(--primary-hover) !important; }
#grid-density.gd-switch .gd-thumb {
  background: var(--film-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.acct-you, .acct-role.admin { background: var(--film-accent-soft); color: var(--film-accent-fg); }
.ops-grp-keys:focus { border-color: var(--film-accent-border); }

/* ---------- База SIP (сайдбар) ---------- */
#sip-sidebar .sip-compact-card.sip-selected {
  border-color: var(--film-accent-border) !important;
  box-shadow: 0 0 0 3px var(--film-accent-ring) !important;
}
#sip-search:focus {
  border-color: var(--film-accent-border) !important;
  box-shadow: inset 0 0 0 1.5px var(--film-accent-ring), inset 0 1px 0 0 var(--lg-highlight) !important;
}
.sip-edit-inline input:focus { border-color: var(--film-accent-border) !important; }
.sip-sidebar-resizer:hover, .sip-sidebar-resizer.active { background: var(--film-accent-border); }
.sip-server strong[style*="#007aff"] { color: var(--film-accent-fg) !important; }   /* метка [TCP] */

/* ---------- «Раздать SIP» ---------- */
.dist-target-btn.active,
.dist-mode-card.active {
  border-color: var(--film-accent-border);
  color: var(--film-accent-fg);
  box-shadow: 0 0 0 3px var(--film-accent-ring);
}
.dist-device-row.selected { border-color: var(--film-accent-border); box-shadow: inset 0 0 0 1px var(--film-accent-ring); }
#distribute-preview span[style*="#f59e0b"] { color: var(--film-warn, var(--color-closed)) !important; }

/* ---------- Центр алертов ---------- */
.alert-item:hover { background: var(--film-row-hover); }
.alert-item-icon[style*="#007aff"] { background: var(--film-accent) !important; }   /* тип «Звонок» */
.alert-chip.active {
  border-color: var(--film-accent-border);
  color: var(--film-accent-fg);
  box-shadow: 0 0 0 3px var(--film-accent-ring);
}
.alert-chip.active .alert-chip-n,
.alert-host-badge.new { background: var(--film-accent-soft); color: var(--film-accent-fg); }

/* ---------- Тосты ---------- */
/* info-тост = сплошной старый синий; берём стиль основной кнопки (фон + цвет текста под него). */
#notification-container > div[style*="59, 130, 246"],
#notification-container > div[style*="#3b82f6"] {
  background: var(--film-btn-bg, var(--film-accent)) !important;
  color: var(--film-btn-fg, #fff) !important;
}
.undo-toast {
  background: var(--glass-bg);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.undo-toast-btn { border-color: var(--film-accent-border); color: var(--film-accent-fg); }
.undo-toast-btn:hover { background: var(--film-accent-soft); }
.undo-toast-timer .track { stroke: var(--film-hairline); }
.undo-toast-timer .bar { stroke: var(--film-accent); }

/* ---------- «Мониторы»: список ПК и панель управления просмотром ---------- */
/* Выбранный ПК: в разметке 'rgba(0,122,255,0.22)', после el.style — 'rgba(0, 122, 255, 0.22)'. */
#monitors-list .mon-item[style*="0,122,255"],
#monitors-list .mon-item[style*="0, 122, 255"] {
  background: var(--film-accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--film-accent-border);
}
#monitors-list .mon-item[style*="255, 255, 255, 0.05"] { background: var(--film-row-hover) !important; }
#mon-controls .mico.on-screen,
#mon-controls .mico.on-ctrl,
#mon-controls .mico.on-tool,
.mon-qsw-opt[data-q="720"].active { color: var(--film-accent) !important; }
#mon-controls .mico:focus-visible,
#mon-controls .mon-qsw-opt:focus-visible { outline-color: var(--film-accent-border) !important; }
.mon-spinner { border-top-color: var(--film-accent) !important; }
.mon-menu-item.sel { background: color-mix(in srgb, var(--film-accent) 28%, transparent) !important; }
.mon-mix-col:not(.master) input[type="range"] { accent-color: var(--film-accent) !important; }   /* «Общая» остаётся зелёной */

/* ======================================================================
   АНИМАЦИИ
   Внимание: style.css под prefers-reduced-motion глушит ВСЕ переходы
   (*:not(.spinner){transition-duration:.01ms!important}). Наши правила сильнее по
   специфичности; при «уменьшить анимацию» ниже — мягкий вариант (короткие затухания).
   ====================================================================== */

/* ---------- Группы: сворачивание / разворачивание ----------
   JS переключает inline grid-template-rows 1fr↔0fr у #wrapper-<id>; контент — единственный
   ребёнок с overflow:hidden. Анимируем высоту + затухание/сдвиг контента + шеврон. */
.dashboard-group-section > [id^="wrapper-"] {
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.dashboard-group-section > [id^="wrapper-"] > div {
  transition: opacity 0.34s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transform-origin: top center;
}
.dashboard-group-section > [id^="wrapper-"][style*="grid-template-rows: 0fr"] > div {
  opacity: 0;
  transform: translateY(-12px) scale(0.985);
}
.dashboard-group-section [id^="chevron-"] {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ---------- Появление интерфейса после загрузки ----------
   Классы на <html> ставит theme-film.js на ~1.8с в момент скрытия лоадера:
   film-reveal (вход в панель) / film-reveal-auth (экран входа). Анимируем ПОСТОЯННЫЕ
   контейнеры (шапка, тулбар, #dashboard), а не карточки: панель часто перерисовывает
   карточки, и анимация на них обрывалась бы. Каскад сверху вниз — маской по #dashboard. */
@keyframes filmHeaderIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes filmFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes filmPopIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes filmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes filmSweep {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

html.film-reveal body > header {
  animation: filmHeaderIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both !important;
}
html.film-reveal #dashboard-toolbar {
  animation: filmFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both !important;
}
html.film-reveal #dashboard {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 33.3%, transparent 66.6%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 33.3%, transparent 66.6%, transparent 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation:
    filmFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both,
    filmSweep 1.2s cubic-bezier(0.45, 0, 0.2, 1) 0.32s both !important;
}
html.film-reveal-auth #auth-overlay .auth-brand {
  animation: filmFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both !important;
}
html.film-reveal-auth #auth-overlay .modal-base {
  animation: filmPopIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both !important;
}
html.film-reveal-auth #auth-overlay .auth-footer {
  animation: filmFade 0.8s ease 0.4s both !important;
}

/* Вуаль (тот же фон) поверх всего в момент скрытия лоадера — растворяется независимо
   от того, когда приложение уберёт лоадер (оно делает display:none через 300–500 мс). */
.film-veil {
  position: fixed;
  inset: 0;
  z-index: 12001;
  pointer-events: none;
  background: var(--film-glows), var(--bg-gradient);
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.12s !important;
}
.film-veil.out { opacity: 0; }
/* Клон глаза, «перелетающий» из лоадера в логотип шапки/входа. */
.film-fly-logo {
  position: fixed;
  z-index: 12002;
  pointer-events: none;
  transform-origin: 0 0;
  filter: var(--film-logo-glow);
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.25s ease !important;
  will-change: transform;
}

/* ---------- «Уменьшить анимацию» в системе ----------
   style.css в этом режиме глушит ВСЕ переходы — отсюда «нет анимации» у групп и «прыжок» при
   загрузке на офисных/RDP-машинах (эффекты Windows выключены). Здесь оставляем плавность
   (те же длительности), но убираем сдвиги/масштаб и полёт глаза — только высота и затухания.
   Рычаг на машину: localStorage.film_motion = 'full' (полная анимация) | 'off' (выключить). */
@media (prefers-reduced-motion: reduce) {
  html:not(.film-motion-full) .dashboard-group-section > [id^="wrapper-"] > div,
  html:not(.film-motion-full) .dashboard-group-section > [id^="wrapper-"][style*="grid-template-rows: 0fr"] > div { transform: none !important; }
  html:not(.film-motion-full).film-reveal body > header { animation: filmFade 0.55s ease 0.1s both !important; }
  html:not(.film-motion-full).film-reveal #dashboard-toolbar { animation: filmFade 0.55s ease 0.2s both !important; }
  html:not(.film-motion-full).film-reveal #dashboard {
    -webkit-mask-image: none !important; mask-image: none !important;
    animation: filmFade 0.7s ease 0.28s both !important;
  }
  html:not(.film-motion-full).film-reveal-auth #auth-overlay .auth-brand,
  html:not(.film-motion-full).film-reveal-auth #auth-overlay .modal-base,
  html:not(.film-motion-full).film-reveal-auth #auth-overlay .auth-footer { animation: filmFade 0.6s ease 0.1s both !important; }
}
/* film_motion = off: без анимаций темы. */
html.film-motion-off .dashboard-group-section > [id^="wrapper-"],
html.film-motion-off .dashboard-group-section > [id^="wrapper-"] > div,
html.film-motion-off .dashboard-group-section [id^="chevron-"] { transition: none !important; }