/* ===== Splash-загрузчик: единый экран до готовности приложения ===== */
#app-loader {
  position: fixed;
  inset: 0;
  z-index: 12000;
  /* Тёмная тема: тёмное МАТОВОЕ СТЕКЛО — чёрный, но полупрозрачный (0.5), чтобы
     размытый фон/обои читались сквозь него; блюр сильный (30px). Чёрный доминирует
     над тёмно-бирюзовым --bg-gradient страницы, но не глушит его полностью.
     Прозрачность/блюр реально видны ТОЛЬКО поверх текстуры (обоев) — на гладком
     градиенте это просто ровный тёмный тон. */
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.25) brightness(0.75);
  backdrop-filter: blur(30px) saturate(1.25) brightness(0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.45s ease;
}
:root[data-theme="light"] #app-loader { background: rgba(230, 236, 247, 0.35); }

/* Тулбар дашборда (поиск + чипы-фильтры + «Редактировать») — та же полупрозрачность,
   что у карточек устройств (--card-bg), и тот же стеклянный контур/блик, чтобы всё
   читалось как один материал. Активный чип и его фокус не трогаем. */
#dashboard-toolbar #dashboard-search,
#dashboard-toolbar .filter-chip:not(.active),
#dashboard-toolbar #bulk-toggle-btn {
  background: var(--card-bg);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow-card), inset 0 1px 0 0 var(--lg-highlight);
}
#dashboard-toolbar .filter-chip:not(.active):hover,
#dashboard-toolbar #bulk-toggle-btn:hover {
  background: var(--lg-fill-raised);
  box-shadow: var(--lg-shadow-card-hover), inset 0 1px 0 0 var(--lg-highlight);
}
#dashboard-toolbar #dashboard-search:focus {
  background: var(--card-bg);
  box-shadow: var(--lg-ring), inset 0 1px 0 0 var(--lg-highlight);
}
/* Активный чип — не заливка, а ОБВОДКА (как у строки поиска): тот же полупрозрачный
   фон, но акцентный контур + мягкое кольцо и подкрашенный текст = «выбрано». */
#dashboard-toolbar #dashboard-chips .filter-chip.active {
  background: var(--card-bg);
  border-color: rgba(0, 122, 255, 0.85);
  color: var(--primary-color);
  box-shadow: var(--lg-shadow-card), inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px rgba(0, 122, 255, 0.14);
}
#dashboard-toolbar #dashboard-chips .filter-chip.active .chip-count {
  background: rgba(0, 122, 255, 0.16);
  border-color: rgba(0, 122, 255, 0.32);
  color: var(--primary-color);
}
#app-loader.hide { opacity: 0; pointer-events: none; }
.app-loader-box { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.app-loader-logo {
  color: #e8eef5;
  filter: drop-shadow(0 0 12px rgba(51, 225, 224, 0.45));
  animation: appLoaderPulse 1.6s ease-in-out infinite;
}
.app-loader-spin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #33E1E0;
  animation: appLoaderSpin 0.8s linear infinite;
}
@keyframes appLoaderSpin { to { transform: rotate(360deg); } }
@keyframes appLoaderPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Убираем стрелки-спиннеры (шаговое редактирование) у ВСЕХ числовых полей —
   оставляем только ручной ввод. WebKit/Blink + Firefox. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

:root {
  --bg-gradient: linear-gradient(-45deg, #e2e8f0, #cbd5e1, #bac3d2, #e2e8f0);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --glass-bg: rgba(255, 255, 255, 0.918);
  /* Фон карточек — полупрозрачный (liquid glass), но БЕЗ backdrop-filter: фон
     просвечивает «как есть», без блюра, поэтому 30 карточек не грузят GPU
     (десятки блюр-слоёв = ~2 ГБ). Прозрачность — токен, легко подкрутить. */
  --card-bg: rgba(255, 255, 255, 0.80);
  --glass-border: rgba(0, 0, 0, 0.15);
  --shadow-light: transparent;
  --shadow-dark: rgba(0, 0, 0, 0.12);
  --input-bg: rgba(255, 255, 255, 0.95);
  --input-border: rgba(0, 0, 0, 0.2);

  --color-offline: rgba(142, 142, 147, 0.5);
  --color-closed: rgba(255, 204, 0, 0.5);
  --color-error: rgba(255, 59, 48, 0.5);
  --color-online: rgba(52, 199, 89, 0.5);
  
  --primary-color: #007aff;
  --primary-hover: #0066d6;

  /* Единая палитра графиков (п.1). Все графики/панели используют эти переменные
     вместо хардкода цветов, чтобы палитра была консистентной и переключалась с темой. */
  --chart-inc: #15803d;   /* входящие / успех */
  --chart-out: #6366f1;   /* исходящие */
  --chart-mis: #dc2626;   /* пропущенные / провал */
  --chart-1: #007aff;
  --chart-2: #15803d;
  --chart-3: #6366f1;
  --chart-4: #dc2626;
  --chart-5: #d97706;     /* янтарный: занято / предупреждение */
  --chart-6: #1D9E75;     /* бирюзовый */
  --chart-7: #378ADD;     /* talk-time */
  --chart-8: #8b5cf6;     /* фиолетовый */
  --chart-track: rgba(0, 0, 0, 0.06); /* фон дорожек баров */
}

[data-theme="dark"] {
  --bg-gradient: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #0f2027);
  --text-primary: #f0f4f8;
  --text-secondary: #b0b0b0;
  --glass-bg: rgba(20, 25, 30, 0.75);
  /* Тёмная тема: полупрозрачные карточки (liquid glass) без блюра — фон мягко
     просвечивает, но текст остаётся читаемым на тёмной подложке. */
  --card-bg: rgba(22, 27, 33, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-light: rgba(255, 255, 255, 0.02);
  --shadow-dark: rgba(0, 0, 0, 0.4);
  --input-bg: rgba(40, 45, 50, 0.9);
  --input-border: rgba(255, 255, 255, 0.15);
  --neon-base: #00f0ff;
  --neon-hover-1: #ff00ff;
  --neon-hover-2: #00ff00;

  /* Палитра графиков в тёмной теме — ярче для контраста на тёмном фоне (п.1) */
  --chart-inc: #22c55e;
  --chart-out: #818cf8;
  --chart-mis: #ef4444;
  --chart-1: #60a5fa;
  --chart-2: #4ade80;
  --chart-3: #a5b4fc;
  --chart-4: #f87171;
  --chart-5: #fbbf24;
  --chart-6: #34d399;
  --chart-7: #67adf0;
  --chart-8: #a78bfa;
  --chart-track: rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   LIQUID GLASS — единая система стилей (single source of truth).
   Все поверхности и элементы берут значения ОТСЮДА: радиусы, стекло, тени,
   движение. Не хардкодим border-radius/blur/тени по месту — только эти токены,
   чтобы не было разнобоя. Есть светлый и тёмный набор (переключается с темой).
   ============================================================================ */
:root {
  /* Радиусы — единая шкала (заменяет разнобой 3–24px по файлу). Скругления
     «мягкие» и щедрые — часть liquid-glass языка. */
  --r-xs: 8px;     /* мелочь: бейджи, теги, чекбоксы */
  --r-sm: 12px;    /* инпуты, иконочные кнопки, чипы */
  --r-md: 16px;    /* кнопки, вложенные блоки, поповеры */
  --r-lg: 22px;    /* карточки, панели */
  --r-xl: 30px;    /* модалки, крупные оверлеи */
  --r-pill: 999px; /* пилюли, круглые кнопки */

  /* Стекло — полупрозрачные заливки + блюр. Блюр включаем ТОЛЬКО на единичных
     поверхностях (модалки, меню, шапки, сайдбары): десятки блюр-слоёв съедают
     GPU-память, поэтому массовые карточки берут непрозрачный --card-bg (см .card). */
  --lg-blur: 20px;
  --lg-blur-strong: 34px;
  --lg-sat: 1.7;                              /* насыщенность под блюром — «сочное» стекло */
  --lg-fill: rgba(255, 255, 255, 0.55);       /* панель / стеклянная карточка */
  --lg-fill-raised: rgba(255, 255, 255, 0.72);/* меню / поповеры поверх */
  --lg-fill-soft: rgba(255, 255, 255, 0.35);  /* лёгкая вставка / hover */
  --lg-border: rgba(255, 255, 255, 0.55);     /* светящаяся стеклянная кромка */
  --lg-hairline: rgba(0, 0, 0, 0.10);         /* тонкая граница-разделитель */
  --lg-highlight: rgba(255, 255, 255, 0.75);  /* верхний блик — «линза», подпись стиля */
  --lg-tint: rgba(120, 140, 170, 0.10);       /* холодный оттенок стекла */

  /* Тени (высоты подъёма над фоном) */
  --lg-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.06);
  --lg-shadow-2: 0 8px 24px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.06);
  --lg-shadow-3: 0 24px 56px rgba(16, 24, 40, 0.18), 0 8px 20px rgba(16, 24, 40, 0.10);
  /* Тень карточек — КОМПАКТНАЯ намеренно: карточки живут внутри контейнера группы
     с overflow:hidden (нужен для анимации сворачивания grid 1fr↔0fr), поэтому тень
     должна умещаться в паддинг .dashboard-grid, иначе обрезается. */
  --lg-shadow-card: 0 6px 18px rgba(16, 24, 40, 0.12);
  --lg-shadow-card-hover: 0 12px 30px rgba(16, 24, 40, 0.20);

  --lg-ring: 0 0 0 3px rgba(0, 122, 255, 0.20); /* фокус-кольцо */
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);    /* мягкая кривая для liquid-движения */
  --lg-fast: 0.18s;
  --lg-slow: 0.4s;
}

[data-theme="dark"] {
  --lg-fill: rgba(30, 36, 44, 0.55);
  --lg-fill-raised: rgba(34, 40, 50, 0.72);
  --lg-fill-soft: rgba(255, 255, 255, 0.06);
  --lg-border: rgba(255, 255, 255, 0.14);
  --lg-hairline: rgba(255, 255, 255, 0.10);
  --lg-highlight: rgba(255, 255, 255, 0.16);
  --lg-tint: rgba(120, 150, 190, 0.10);
  --lg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 10px rgba(0, 0, 0, 0.25);
  --lg-shadow-2: 0 10px 28px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30);
  --lg-shadow-3: 0 28px 60px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.40);
  --lg-shadow-card: 0 6px 20px rgba(0, 0, 0, 0.45);
  --lg-shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.55);
  --lg-ring: 0 0 0 3px rgba(10, 132, 255, 0.30);
}

/* --- Утилиты, от которых наследуют реальные элементы --------------------------
   .lg-surface — стеклянная панель (модалка/оверлей/сайдбар). Блюр здесь ОК.
   .lg-raised  — всплывающее меню/поповер (сильнее тень, чуть плотнее фон).
   .lg-hairline-b — тонкий разделитель снизу. Верхний блик задаётся inset-тенью. */
.lg-surface {
  background: var(--lg-fill);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-border);
  border-radius: var(--r-lg);
  box-shadow: var(--lg-shadow-2), inset 0 1px 0 0 var(--lg-highlight);
  color: var(--text-primary);
}
.lg-raised,
.lg-menu,
#mon-vol-menu, #mon-keys-menu, #mon-mic-menu {
  background: var(--lg-fill-raised);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-border);
  border-radius: var(--r-md);
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight);
  color: var(--text-primary);
}

/* Neon Title Effect */
.modern-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}

/* ===== UNIFIED DESIGN SYSTEM ===== */

/* Modal Base */
.modal-base {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-border);
  border-radius: var(--r-xl);
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.modal-sm {
  width: 340px;
  max-width: 90vw;
}

.modal-md {
  width: 450px;
  max-width: 95vw;
}

.modal-lg {
  width: 800px;
  max-width: 95vw;
  height: 80vh;
  min-height: 500px;
}

/* Scoped to .modal-base so the design-system padding wins over the legacy
   .modal-header / .modal-body rules further down the file (same specificity
   would otherwise let the later 20px override these). */
.modal-base .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.modal-base .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* Мониторы: полупрозрачные «стеклянные» верхняя (шапка) и левая (сайдбар) панели.
   Рамку модалки делаем прозрачной, чтобы за шапкой/сайдбаром просвечивал
   размытый фон панели; правая область просмотра (#mon-stage) остаётся непрозрачной
   за счёт своего фона, поэтому видео/плейсхолдер читаются как раньше. */
#monitors-overlay .modal-base {
  background: transparent;
  box-shadow: none;
}
#monitors-overlay .modal-header {
  background: rgba(18, 22, 28, 0.38);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* Заголовок «Мониторы» не должен схлопываться до «Мони…» (flex + min-width:0). */
#monitors-overlay .modal-header h2 { overflow: visible; }

.modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Inputs */
.input-field {
  width: 100%;
  padding: 14px 18px;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--lg-fast), box-shadow var(--lg-fast);
}

.input-field::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: var(--lg-ring);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: transparent;                         /* обводка-пилюля, как активный переключатель */
  color: var(--primary-color);
  border: 1px solid rgba(0, 122, 255, 0.85);
  border-radius: var(--r-pill) !important;         /* бьём .btn 8px !important для class="btn btn-primary" */
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px rgba(0, 122, 255, 0.14);
  transition: background var(--lg-fast), border-color var(--lg-fast), box-shadow var(--lg-fast), transform var(--lg-fast);
}

.btn-primary:hover {
  background: rgba(0, 122, 255, 0.08);
  border-color: var(--primary-color);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 4px rgba(0, 122, 255, 0.2);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-sm);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  box-shadow: var(--lg-shadow-1);
}

.btn-icon:hover {
  background: var(--glass-bg);
  transform: translateY(-1px);
}

.btn-icon.danger {
  color: #dc2626;
}

.btn-icon.danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

[data-theme="dark"] .btn-icon.danger:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.5);
}


@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg-gradient);
  background-size: 400% 400%;
  color: var(--text-primary);
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Safety net against sideways viewport drift when a wide element overflows
   (scrollbars are globally hidden). Local overflow-x:auto wrappers still work. */
html,
body {
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

/* Header / dashboard base padding (adaptive overrides in @media below) */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 40px;
}

#dashboard {
  padding: 20px 40px;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes logoPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(0, 122, 255, 0.3));
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 122, 255, 0.8));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(0, 122, 255, 0.3));
  }
}

.logo-pulse {
  animation: logoPulse 3s ease-in-out infinite;
}

.header {
  padding: 30px;
  text-align: center;
}

.header h1 {
  margin: 0 0 10px 0;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.stats {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: var(--card-bg);
  /* backdrop-filter убран намеренно: 30 карточек = 30 GPU-слоёв блюра (основная часть
     ~2 ГБ render-памяти). Фон --card-bg почти непрозрачный — вид сохраняется. Liquid-glass
     язык на карточках задаём БЕЗ блюра: скругление + кромка + верхний блик (inset) + тень. */
  border: 1px solid var(--lg-border);
  border-radius: 28px;
  padding: 20px;
  cursor: pointer;
  transition: transform var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast);
  box-shadow: var(--lg-shadow-card), inset 0 1px 0 0 var(--lg-highlight);
  display: flex;
  flex-direction: column;
  height: 300px;
  /* content-visibility убран: на grid-элементах он резервировал неверную ШИРИНУ для
     карточек за экраном, из-за чего они «прыгали» при прокрутке. Выигрыш по памяти
     дают снятие backdrop-filter с карточек + коалесинг рендера, а не он. */
  box-sizing: border-box;
  overflow: hidden;
}

/* Полностью скрываем полосы прокрутки ВЕЗДЕ (скролл колёсиком/тачем сохраняется) */
*, *::before, *::after {
  scrollbar-width: none !important;   /* Firefox */
  -ms-overflow-style: none !important; /* IE/старый Edge */
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;           /* Chrome/Safari/Edge */
}

/* Полосы прокрутки скрыты ВЕЗДЕ без исключений (в т.ч. .custom-scrollbar и .h-scroll):
   ранее эти классы через !important возвращали видимый бегунок — из-за чего полоса
   вылезала на карточках устройств (список SIP). Скролл колёсиком/тачем сохраняется. */
.custom-scrollbar, .h-scroll { scrollbar-width: none !important; }
.custom-scrollbar::-webkit-scrollbar,
.h-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 20px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 15px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.2);
}

/* Dark theme: 20% white is a heavy band behind light hover text. */
[data-theme="dark"] .tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: transparent; /* статичное подчёркивание убрано — его роль играет ползунок .tab-indicator */
}

/* Плавный ползунок-индикатор активной вкладки: единый бар, который переезжает под
   выбранную кнопку (позицию/ширину считает JS: initTabIndicators). */
.tabs { position: relative; }
.tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary-color);
  box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: left 0.32s var(--lg-ease), width 0.32s var(--lg-ease), opacity 0.2s ease;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Accounts */
.account-item {
  display: flex;
  flex-direction: column;
  padding: 7px 8px 7px 18px;              /* ниже по высоте */
  background: transparent;                 /* как пилюли-переключатели */
  border: 1px solid var(--lg-border);
  border-radius: var(--r-pill);            /* пузырёк-пилюля */
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
  margin-bottom: 8px;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-item:hover { border-color: rgba(0, 122, 255, 0.45); }
/* При редактировании карточка высокая — пилюля превратилась бы в овал; обычное скругление. */
.account-item.editing { border-radius: var(--r-lg); padding-bottom: 12px; }

.account-item.active-account {
  border-color: rgba(0, 122, 255, 0.85);
  background: transparent;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px rgba(0, 122, 255, 0.14);
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 15px;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Кнопки действий аккаунта — без обводки/фона, компактнее (ниже строка). */
.account-actions .icon-btn {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--r-pill) !important;
}
.account-actions .icon-btn:hover:not([style*="cursor: default"]) { background: var(--lg-fill-soft) !important; }
/* Плюс-кнопка добавления аккаунта в правом верхнем углу — только значок, без рамки. */
#acct-add-top { transition: background var(--lg-fast) var(--lg-ease), transform var(--lg-fast) var(--lg-ease); border-radius: var(--r-pill); }
#acct-add-top:hover { background: var(--lg-fill-soft); }
#acct-add-top:active { transform: scale(0.92); }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--lg-border);
  cursor: pointer;
  background: var(--input-bg);
  color: var(--text-primary);
  box-shadow: var(--lg-shadow-1), inset 0 1px 0 0 var(--lg-highlight);
  transition: transform var(--lg-fast) var(--lg-ease), background var(--lg-fast), box-shadow var(--lg-fast);
}

.icon-btn:hover {
  background: var(--glass-bg);
  transform: translateY(-1px);
  box-shadow: var(--lg-shadow-2), inset 0 1px 0 0 var(--lg-highlight);
}

/* Кнопка удаления на карточке — компактнее (по высоте/ширине как поле имени
   устройства) и ПРОЗРАЧНАЯ; подсветка появляется только при наведении (см. :hover). */
.icon-btn.delete {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  background: transparent;
  border: none;         /* без обводки */
  box-shadow: none;
  color: var(--text-secondary);
}
/* Без ховера: фон/рамка/тень при наведении не меняются. */
.icon-btn.delete:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Попап подтверждения удаления устройства: ровные отступы, кнопки-пузырьки
   без заливки (только обводка). Отмена — нейтральная, Да — красная. */
.delete-popover {
  padding: 16px;
  min-width: 190px;
}
.delete-popover .dp-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 14px;
}
.delete-popover .dp-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.delete-popover .dp-actions .btn {
  flex: 1;
  min-width: 74px;
  height: 38px;
  padding: 0 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem !important;
  font-weight: 600;
  border-radius: var(--r-pill) !important;   /* пузырёк */
  background: transparent !important;         /* без заливки */
  box-shadow: none !important;
  transition: background var(--lg-fast) var(--lg-ease), border-color var(--lg-fast) var(--lg-ease);
}
.delete-popover .dp-cancel {
  border: 1.5px solid var(--lg-border) !important;
  color: var(--text-primary) !important;
}
.delete-popover .dp-cancel:hover {
  border-color: var(--text-secondary) !important;
  background: var(--lg-fill-soft) !important;
}
.delete-popover .dp-confirm {
  border: 1.5px solid #ef4444 !important;
  color: #ef4444 !important;
}
.delete-popover .dp-confirm:hover {
  background: rgba(239, 68, 68, 0.12) !important;
}
/* Синий вариант confirm-кнопки (для не-удаляющих подтверждений, напр. скачивание ZIP). */
.delete-popover .dp-confirm-blue {
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
}
.delete-popover .dp-confirm-blue:hover {
  background: rgba(0, 122, 255, 0.12) !important;
}

/* Форма редактирования аккаунта — компактная сетка 2-в-ряд, поля-пузырьки (прозрачные). */
.account-edit-form {
  display: none;                 /* toggleEdit ставит grid */
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.account-edit-form input.themed-input,
.account-edit-form select.themed-input {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill) !important;   /* бьём select.themed-input 8px !important */
  border: 1px solid var(--lg-border);
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
  font-size: 0.9rem;
  box-sizing: border-box;
}
.account-edit-form .edit-save { grid-column: 1 / -1; }  /* кнопка на всю ширину */

/* Цветной индикатор SIP-статуса (левее кнопок), статус — во всплывающей подсказке (title). */
.acc-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-right: 6px; cursor: help;
}

/* Logs Table */
.logs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.logs-table th,
.logs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}

.logs-table td:last-child,
.logs-table th:last-child {
  white-space: normal;
  word-break: break-word;
}

.logs-table th {
  font-weight: 600;
  color: var(--text-secondary);
}

.logs-table tr:hover {
  background: transparent; /* ховер-подсветку строк (и шапки, и данных) убрали */
}

/* Сортируемые заголовки истории звонков */
.logs-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.logs-table th.sortable-th:hover { color: var(--primary-color); }

/* История звонков: фиксированная колонка кнопки звонка (не смещается от длины номера) */
.logs-table-calls td.log-call-cell {
  width: 40px;
  text-align: right;      /* кнопка ближе к номеру */
  padding-left: 4px;
  padding-right: 2px;
}
.logs-table-calls td.log-number-cell { max-width: 240px; padding-left: 6px; }
.log-dir-icon {
  display: inline-block;
  width: 16px;
  text-align: center;
  font-size: 1.15em;
  font-weight: 900;
  margin-right: 6px;
  vertical-align: middle;
}
.log-number-cell .log-num-text {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.logs-table-calls td.log-call-cell .call-btn { margin: 0; }

/* Троеточие для длинных имён SIP-аккаунтов — по всему проекту (п.6) */
.sip-name-ellipsis {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

[data-theme="dark"] .logs-table tr:hover {
  background: transparent;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 10px 0;
  background: transparent; /* убрана полоса-фон под кнопками */
}

/* Стрелки пагинации — иконки без фона, круглое выделение при hover (наш стиль). */
.pagination button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), transform var(--lg-fast) var(--lg-ease);
}

.pagination button:hover {
  background: var(--lg-fill-soft);
  color: var(--primary-color);
}
.pagination button:active { transform: scale(0.92); }
.pagination button:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }

/* Поиск в логах — прозрачный/скруглённый, как на дашборде. */
#logs-search {
  background: var(--card-bg);
  border: 1px solid var(--lg-border);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
}
#logs-search:focus { box-shadow: var(--lg-ring), inset 0 1px 0 0 var(--lg-highlight); }

/* Все поля поиска — полностью прозрачные (как само окно) и скруглённые пилюлей. */
#dashboard-search, #logs-search, #recordings-search, #bh-search {
  background: transparent !important;
  border-radius: var(--r-pill) !important;
}

/* Выпадающий период «Сегодня» — прозрачный/скруглённый как остальные стеклянные
   элементы (background-color, чтобы стрелка-иконка осталась). NB: сам раскрытый
   список <option> рисует ОС — его фон/радиус браузер не даёт стилизовать. */
#activity-period {
  background-color: var(--card-bg);
  border: 1px solid var(--lg-border);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
}
#activity-period:focus { box-shadow: var(--lg-ring), inset 0 1px 0 0 var(--lg-highlight); }
/* Пункты списка — насколько позволяет движок (Chromium применит фон/цвет к <option>). */
#activity-period option {
  background-color: #1a1f27;
  color: var(--text-primary);
}

/* ===== Кастомный стеклянный дропдаун (.lg-select) — замена нативного <select>,
   чтобы раскрытый список тоже был прозрачным/стеклянным с закруглёнными пунктами.
   Нативный <select> прячется, значение остаётся источником правды. ===== */
.lg-select { position: relative; display: inline-block; vertical-align: middle; }
.lg-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 16px;
  background: var(--card-bg);
  border: 1px solid var(--lg-border);
  border-radius: var(--r-pill);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lg-select-btn svg { width: 15px; height: 15px; opacity: 0.7; transition: transform 0.2s ease; }
.lg-select.open .lg-select-btn {
  border-color: rgba(0, 122, 255, 0.6);
  box-shadow: var(--lg-ring), inset 0 1px 0 0 var(--lg-highlight);
}
.lg-select.open .lg-select-btn svg { transform: rotate(180deg); }
.lg-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10000;
  min-width: 100%;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--lg-fill-raised);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-border);
  border-radius: var(--r-md);
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight);
}
.lg-select.open .lg-select-menu { display: flex; }
.lg-select-opt {
  text-align: left;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.lg-select-opt:hover { background: var(--lg-fill-soft); }
.lg-select-opt.active { color: var(--primary-color); background: rgba(0, 122, 255, 0.14); }

/* Диалог подтверждения: одинаково скруглённые кнопки; подтверждение — ОБВОДКА, а не
   заливка (синяя для обычного, красная для деструктивного). */
#custom-confirm-overlay .btn { border-radius: var(--r-md); }
#custom-confirm-overlay #custom-confirm-yes {
  background: var(--card-bg);
  border: 1px solid rgba(0, 122, 255, 0.85);
  color: var(--primary-color);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px rgba(0, 122, 255, 0.14);
}
#custom-confirm-overlay #custom-confirm-yes.btn-danger {
  border-color: rgba(220, 38, 38, 0.85);
  color: #ef4444;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px rgba(220, 38, 38, 0.14);
}
#custom-confirm-overlay #custom-confirm-yes:hover { background: var(--lg-fill-raised); }

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lg-shadow-card-hover), inset 0 1px 0 0 var(--lg-highlight);
}
/* Скругление карточки не должно меняться между наведением/фокусом/выделением. */
.card,
.card:hover,
.card:focus,
.card:focus-visible,
.card:active {
  border-radius: 28px !important;
}
/* Фокус-обводка карточки — скруглённая (следует за радиусом), не квадратная. */
.card:focus-visible {
  border-radius: 28px !important;
  outline-offset: 2px;
}

.card h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
}

.device-label-input {
  font-size: 1.3rem;
  /* match typical h2 size or card title */
  font-weight: 700;
  letter-spacing: -0.5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  margin: 0;
  padding: 4px 16px;
  margin-left: -8px;
  /* Больше воздуха слева от края круглого поля до текста имени. */
  border-radius: var(--r-pill); /* круглое поле во всех состояниях (как на фокусе) */
  flex: 1;
  min-width: 0;
  /* Allow text-overflow if needed */
  transition: all 0.2s;
  font-family: inherit;
  outline: none;
  text-overflow: ellipsis;
}

.device-label-input:hover {
  background: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.2);
}
/* Readonly (не-админ): не показываем ховер-подсветку — она обещает редактируемость, которой нет. */
.device-label-input[readonly] { cursor: default; }
.device-label-input[readonly]:hover {
  background: transparent;
  border-color: transparent;
}

.device-label-input:focus {
  /* Как активная кнопка-пилюля: прозрачный фон, синяя обводка + голубое кольцо. */
  background: transparent;
  border-color: rgba(0, 122, 255, 0.85);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px rgba(0, 122, 255, 0.14);
}

.card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.card.offline {
  background: var(--color-offline);
}

.card.closed {
  background: var(--color-closed);
}

.card.error {
  background: var(--color-error);
}

.card.online {
  background: var(--color-online);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  /* Затемняем+морозим фон сильнее: при полупрозрачной стеклянной панели слабый скрим
     (0.2) пропускал карточку устройства позади — сквозь модалку просвечивали аватар/имя.
     0.45 + блюр 10px гасят просвет и правильно фокусируют на модалке. */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  width: 95%;
  max-width: 1200px;
  height: 80vh;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.section {
  margin-bottom: 20px;
}

.section h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid var(--glass-border);
  text-align: center;
}

/* Toggle Switch iOS Style */
.codec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}

.codec-item:last-child {
  border-bottom: none;
}

/* Подсекции внутри вкладки «Аккаунты» (кодеки, контакты) */
.acc-subsection {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}
.acc-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.acc-subsection-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}
/* Компактные кодеки (3 основных) — плитками в ряд */
/* Кодеки — вертикальный список пузырьков-пилюль, как список аккаунтов: прозрачные,
   тонкая обводка, r-pill. */
.codecs-list-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.codecs-list-compact .codec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px 7px 18px;
  background: transparent;
  border: 1px solid var(--lg-border);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
  transition: border-color 0.15s ease;
}
.codecs-list-compact .codec-item:last-child { border-bottom: 1px solid var(--lg-border); }
.codecs-list-compact .codec-item:hover { border-color: rgba(0, 122, 255, 0.45); }

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  /* Не даём flex-ряду (напр. .alerts-set-row) сжимать переключатель: при длинной
     подписи он сплющивался, и белый «бегунок» вылезал/обрезался в полумесяц. */
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: var(--r-xl);
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* «Вкл» — не заливка, а зелёная ОБВОДКА (inset-тень, без сдвига раскладки) + зелёный бегунок.
   Дорожка остаётся того же цвета, что и в «выкл». */
input:checked+.slider {
  box-shadow: inset 0 0 0 1.6px #34c759;
}

input:checked+.slider:before {
  transform: translateX(20px);
  background-color: #34c759;
}

/* Тёмное оформление тумблеров: выключенная (и включённая) дорожка тёмная, бегунок в «выкл»
   чуть приглушён. */
[data-theme="dark"] .slider { background-color: rgba(120, 120, 128, 0.32); }
[data-theme="dark"] .slider:before {
  background-color: #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] input:checked+.slider { box-shadow: inset 0 0 0 1.6px #30d158; }
[data-theme="dark"] input:checked+.slider:before { background-color: #30d158; }

.logs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: monospace;
  font-size: 0.85rem;
  max-height: 150px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--r-xs);
  padding: 10px;
}

.logs-list li {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 4px;
}

.themed-input {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--lg-border);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--lg-fast), box-shadow var(--lg-fast);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
}

.themed-input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: var(--lg-ring);
}

select.themed-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px !important;
  cursor: pointer;
}

select.themed-input option {
  background-color: var(--input-bg);
  color: var(--text-primary);
  padding: 10px;
}

.themed-form {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

/* Spinner for loading */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Recording download button */
.btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;   /* без фона — наш стеклянный стиль */
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);   /* белый, как стрелки (не синий) */
  box-shadow: none;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), transform var(--lg-fast) var(--lg-ease);
}

.btn-download:hover {
  background: var(--lg-fill-soft);
  color: var(--primary-color);
}

.btn-download:active {
  transform: translateY(0);
}

.btn-download.downloading {
  pointer-events: none;
  opacity: 0.6;
}

/* Recording direction badge */
.rec-direction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-lg);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Выбранная запись (клик по строке) — подсветка акцентом + левая полоса. */
#recordings-list tr.rec-selected > td {
  background: transparent !important;               /* без фона — выделение только полоской слева */
}
#recordings-list tr.rec-selected > td:first-child {
  box-shadow: inset 3px 0 0 #007aff;               /* метка «выбрано» — полоска слева */
}
#recordings-list tr:hover > td {
  background: transparent;                          /* ховер убран */
}

.rec-direction.outgoing {
  background: rgba(0, 122, 255, 0.12);
  color: #007aff;
}

.rec-direction.incoming {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}

/* Dark theme: lighten badge text so it reads on the dark panel. */
[data-theme="dark"] .rec-direction.incoming {
  background: rgba(21, 128, 61, 0.2);
  color: #4ade80;
}
[data-theme="dark"] .rec-direction.outgoing {
  background: rgba(0, 122, 255, 0.2);
  color: #60a5fa;
}

/* ===== STATISTICS OVERLAY ===== */
.stats-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 30px 20px;
}

.stats-overlay.active {
  display: flex;
  animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.stats-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  width: 1320px;
  max-width: 96%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  animation: slideUpPanel 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  /* Отступ снизу: последняя секция статистики иначе прижималась вплотную к
     скруглённому краю панели (padding-bottom не было). Шапка сверху не трогается. */
  padding-bottom: 28px;
}

@keyframes slideUpPanel {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-panel-header {
  padding: 24px 30px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Summary Cards */
.stats-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px 30px;
}

.stats-card {
  border-radius: var(--r-md);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.stats-card:hover {
  transform: translateY(-3px);
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.08;
  border-radius: var(--r-md);
}

.stats-card-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.stats-card-label {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.8;
}

.stats-card-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.3;
}

.stats-card.total {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.15), rgba(0, 200, 255, 0.1));
  border: 1px solid rgba(0, 122, 255, 0.2);
  color: #007aff;
}

.stats-card.incoming {
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.15), rgba(52, 199, 89, 0.1));
  border: 1px solid rgba(21, 128, 61, 0.2);
  color: #15803d;
}

.stats-card.outgoing {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.12), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

.stats-card.missed {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(255, 59, 48, 0.1));
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

/* Dark theme: give values/labels explicit readable colors per variant
   (inherit was a no-op — it re-resolved to the same dark card hue). */
[data-theme="dark"] .stats-card.total .stats-card-value,
[data-theme="dark"] .stats-card.total .stats-card-label {
  color: #60a5fa;
}
[data-theme="dark"] .stats-card.incoming .stats-card-value,
[data-theme="dark"] .stats-card.incoming .stats-card-label {
  color: #4ade80;
}
[data-theme="dark"] .stats-card.outgoing .stats-card-value,
[data-theme="dark"] .stats-card.outgoing .stats-card-label {
  color: #a5b4fc;
}
[data-theme="dark"] .stats-card.missed .stats-card-value,
[data-theme="dark"] .stats-card.missed .stats-card-label {
  color: #f87171;
}

/* Content area */
.stats-content {
  padding: 0 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-section {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 20px;
  /* Keep wide tables (scoring/heatmap/utilization) scrolling inside the
     section instead of pushing the whole page sideways. */
  overflow-x: hidden;
  /* Собственный нижний отступ: applyStatsSections переносит все разделы в один
     не-flex контейнер (порядок/видимость), и разделы без своего margin слипались. */
  margin-bottom: 16px;
}

/* Секции-карточки, вложенные напрямую в панель (Дозвон, talk-time, скоринг,
   SLA, утилизация, теплокарта), выравниваем по горизонтали так же, как
   .stats-content и .stats-summary-cards (отступ 30px). Без этого они
   растягивались во всю ширину панели без боковых отступов. Вложенные в
   .stats-content секции (Длительности/Настойчивость) под это правило не
   попадают — у них отступ уже даёт родитель. */
.stats-panel > .stats-section {
  margin-left: 30px;
  margin-right: 30px;
}

.stats-section-title {
  margin: 0 0 16px 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

/* Device stats row */
.stats-device-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--glass-border);
}

.stats-device-row:last-child {
  border-bottom: none;
}

.stats-device-name {
  width: 140px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.stats-device-bar-container {
  flex: 1;
  height: 28px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-xs);
  overflow: hidden;
  display: flex;
  position: relative;
}

[data-theme="dark"] .stats-device-bar-container {
  background: rgba(255, 255, 255, 0.04);
}

.stats-device-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
}

.stats-device-bar.inc {
  background: var(--chart-inc);
}

.stats-device-bar.out {
  background: var(--chart-out);
}

.stats-device-bar.mis {
  background: var(--chart-mis);
}

.stats-device-total {
  width: 50px;
  text-align: right;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.stats-device-donut {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stats-device-donut-inner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--glass-bg);
  z-index: 1;
}

/* Hourly chart */
.stats-hourly-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding-top: 10px;
}

.stats-hour-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}

.stats-hour-bar-wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.stats-hour-bar {
  width: 70%;
  min-width: 8px;
  max-width: 30px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #007aff, #00c8ff);
  transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.stats-hour-bar:hover {
  filter: brightness(1.2);
}

.stats-hour-bar .tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stats-hour-bar:hover .tooltip {
  display: block;
}

.stats-hour-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Top numbers */
.stats-number-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}

.stats-number-row:last-child {
  border-bottom: none;
}

.stats-number-rank {
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.stats-number-rank.r1 {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #78350f;
}

.stats-number-rank.r2 {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  color: #374151;
}

.stats-number-rank.r3 {
  background: linear-gradient(135deg, #c2884e, #d4a574);
  color: #451a03;
}

.stats-number-rank.rn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.stats-number-phone {
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 140px;
}

.stats-number-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-xs);
  overflow: hidden;
}

[data-theme="dark"] .stats-number-bar {
  background: rgba(255, 255, 255, 0.04);
}

.stats-number-bar-fill {
  height: 100%;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, #007aff, #00c8ff);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-number-count {
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 30px;
  text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
  .stats-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-device-name {
    width: 80px;
    font-size: 0.8rem;
  }

  .stats-panel {
    border-radius: var(--r-md);
  }
}

/* Custom Audio Player */
.custom-audio-player {
  margin-top: 20px;
  padding: 15px 20px;
  background: var(--glass-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: slideUpPanel 0.3s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.audio-player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.audio-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.4rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.audio-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

[data-theme="dark"] .audio-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.audio-player-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.audio-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #007aff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.audio-play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 122, 255, 0.4);
}

.audio-play-btn:active {
  transform: scale(0.95);
}

.audio-timeline {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.audio-time {
  font-size: 0.8rem;
  font-family: monospace;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 40px;
}

.audio-progress-wrapper {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.audio-progress-bg {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--r-xs);
  position: absolute;
}

[data-theme="dark"] .audio-progress-bg {
  background: rgba(255, 255, 255, 0.1);
}

.audio-progress-fill {
  height: 6px;
  background: linear-gradient(90deg, #007aff, #00c8ff);
  border-radius: var(--r-xs);
  position: absolute;
  width: 0%;
  pointer-events: none;
}

.audio-progress-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #007aff;
  border-radius: 50%;
  position: absolute;
  left: 0%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transition: transform 0.1s;
}

.audio-progress-wrapper:hover .audio-progress-thumb {
  transform: translateX(-50%) scale(1.2);
}

/* ===== SIP SIDEBAR & DRAG-AND-DROP ===== */

.sip-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  /* +44px сверх собственной ширины: тень box-shadow (-10px 0 30px = ~40px влево) в закрытом
     состоянии иначе выглядывала за правый край экрана тонкой вертикальной «полосой». Доп. сдвиг
     уводит и тень за пределы вьюпорта; при открытии transform анимируется в 0, тень появляется плавно. */
  transform: translateX(calc(100% + 44px));
  width: 350px;
  height: 100vh;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  z-index: 9000;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.1s;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  box-sizing: border-box;
}

.sip-sidebar.open {
  transform: translateX(0);
}

/* При открытой «Базе SIP» основной контент плавно уезжает в левую (свободную) часть
   экрана — через padding-right у body на ширину сайдбара (--sipdb-w). Сайдбар и модалки
   position:fixed, поэтому сдвиг их не трогает. */
body {
  transition: padding-right 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body.sipdb-open {
  padding-right: var(--sipdb-w, 350px);
  overflow-x: hidden;
}
/* В тулбаре плавно скрываем всё, кроме поля поиска (чипы-фильтры и кнопку редактирования).
   flex-wrap:nowrap ОБЯЗАТЕЛЕН (перебивает инлайновый wrap): иначе при схлопывании ширины
   до 0 чипы переносятся в 4 строки внутри нулевой ширины и раздувают высоту тулбара. */
#dashboard-chips {
  transition: opacity 0.25s ease, max-width 0.32s ease;
  max-width: 640px;
  flex-wrap: nowrap !important;
}
/* overflow:hidden ТОЛЬКО во время схлопывания (иначе контейнер режет box-shadow чипов
   и между кнопками видны прямые «полоски» от обрезанных теней). */
body.sipdb-open #dashboard-chips {
  overflow: hidden;
}
#bulk-toggle-btn {
  transition: opacity 0.25s ease;
}
body.sipdb-open #dashboard-chips {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}
body.sipdb-open #bulk-toggle-btn {
  opacity: 0;
  pointer-events: none;
}
/* Кнопки в шапке плавно скрываем, пока открыта «База SIP» (закрытие — крестиком в панели). */
.header-actions {
  transition: opacity 0.28s ease;
}
body.sipdb-open .header-actions {
  opacity: 0;
  pointer-events: none;
}

/* ===== «База SIP»: всё прозрачное, без ховеров (по запросу) ===== */
/* Секции-контейнеры и карточки аккаунтов — убираем заливки/тени/блюр. */
#sip-sidebar .stats-section,
#sip-sidebar #sip-tab-batch {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 0 !important;   /* без лишнего отступа между списком и загрузкой */
}
/* Тесный вертикальный интервал в панели базы SIP. */
#sip-sidebar .sip-sidebar-content { gap: 8px; }
#sip-sidebar .sip-compact-card,
#sip-sidebar .sip-compact-card:hover,
#sip-sidebar .sip-compact-card:active,
#sip-sidebar .sip-compact-card.sip-selected {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Кнопки — прозрачные, без ховера (только обводка/цвет значка). */
#sip-sidebar .btn,
#sip-sidebar .btn-primary,
#sip-sidebar .btn-secondary,
#sip-sidebar .btn-danger,
#sip-sidebar .icon-btn {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#sip-sidebar .btn:hover,
#sip-sidebar .btn-primary:hover,
#sip-sidebar .btn-secondary:hover,
#sip-sidebar .btn-danger:hover,
#sip-sidebar .icon-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
/* Удаление — только красная обводка, без красной заливки. */
#sip-sidebar .btn-danger {
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  color: #ef4444 !important;
}
#sip-sidebar .icon-btn.delete {
  border: 1px solid transparent !important;
  color: #ef4444 !important;
}

.sip-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
/* Плоские значки в шапке базы SIP: без обводки/фона, один ряд (выбрать/забрать/раздать/очистить). */
.sip-hdr-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  transition: color var(--lg-fast) var(--lg-ease), opacity var(--lg-fast) var(--lg-ease);
}
.sip-hdr-icon svg { width: 18px; height: 18px; }
.sip-hdr-icon:hover:not(:disabled) { color: var(--primary-color); }
.sip-hdr-icon.sip-hdr-danger:hover:not(:disabled) { color: #ef4444; }
.sip-hdr-icon:disabled { opacity: 0.38; cursor: default; }
.sip-hdr-icon.active { color: var(--primary-color); }  /* режим выбора включён */
/* Глиф «выбрать» в шапке выравниваем по содержимому карточек SIP слева. */
#sip-select-toggle-btn { margin-left: 5px; }

/* Режим выбора: клик по любой части карточки выделяет её синей обводкой
   (как активный чип-фильтр «Все»), без чекбокса. Курсор — обычный указатель,
   без «руки перетягивания» (перебиваем инлайновый cursor:grab). */
/* Карточка кликабельна (клик = выбор), но без «руки перетягивания». */
#sip-sidebar .sip-compact-card { cursor: pointer !important; }
/* Выделение — как активный чип-фильтр «Все»: тонкий синий контур + мягкое кольцо. */
#sip-sidebar .sip-compact-card.sip-selected {
  border-color: rgba(0, 122, 255, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14) !important;
}
/* Свёрнутый поиск: кнопка-лупа + дропдаун; при открытии wrap растягивается на свободное
   место, поле занимает всю его ширину (надёжно при любой ширине панели). */
.sip-search-wrap { flex: 0 1 auto; min-width: 0; }
.sip-search-wrap.open { flex: 1 1 auto; }
#sip-search {
  display: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sip-search-wrap.open #sip-search { display: block; opacity: 1; transform: none; }
/* Дропдаун названий той же высоты, что и поле поиска (кастомный .ui-picker от энхансера). */
.sip-search-wrap .ui-picker-btn { height: 40px !important; }
/* Список фильтра названий — наш стеклянный вид (был без стиля). */
.sip-label-filter-picker .ui-picker-list {
  border-radius: var(--r-md) !important;
  min-width: 150px;
}
.sip-label-filter-picker .ui-picker-item { border-radius: var(--r-sm) !important; }
/* Прячем видимый дропдаун лейблов (энхансер оборачивает select в .ui-picker). */
.sip-search-wrap.open .ui-picker,
.sip-search-wrap.open .sip-label-select { display: none !important; }

/* Поле поиска в шапке базы SIP — пилюля + матовая подложка. Тень/фокус-кольцо делаем
   INSET (внутренними): они не выходят за границы поля, поэтому overflow слайда не режет
   края/углы, и нет «торчащего куска» в свёрнутом состоянии. */
#sip-search {
  border-radius: var(--r-pill) !important;
  background: var(--lg-fill-soft) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight) !important;
}
#sip-search:focus {
  border-color: rgba(0, 122, 255, 0.85) !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 122, 255, 0.55), inset 0 1px 0 0 var(--lg-highlight) !important;
}

/* Дропдаун транспорта (массовая загрузка) — круглый «пузырёк». Список уже стеклянный. */
.sip-transport-picker .ui-picker-btn { border-radius: var(--r-pill) !important; }
.sip-transport-picker .ui-picker-list { border-radius: var(--r-md) !important; }

/* Вертикальный разделитель между кнопками действий и крестиком в шапке базы SIP. */
.sip-hdr-divider {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--glass-border);
  margin: 0 4px;
}

/* Цветовой акцент лейбла в карточке базы SIP (только лейбл; «@логин» приглушён). */
.sip-lbl { font-weight: 700; }
.sip-lbl-login { opacity: 0.8; font-weight: 600; }

/* Кнопки действий в карточке SIP — плоские значки без обводки, цвет по наведению. */
.sip-card-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--r-pill);
  transition: color var(--lg-fast) var(--lg-ease);
}
.sip-card-btn svg { width: 17px; height: 17px; }
.sip-card-btn:hover { color: var(--primary-color); }

/* Назначение SIP — справа в одну строку. */
.sip-assign {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 150px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #10b981;                 /* назначен — зелёный */
  white-space: nowrap;
}
.sip-assign.none { color: var(--text-secondary); opacity: 0.5; }
.sip-assign .sip-assign-mon { width: 13px; height: 13px; flex-shrink: 0; }
.sip-assign .sip-assign-name { overflow: hidden; text-overflow: ellipsis; }
.sip-assign.multi { color: #f59e0b; cursor: help; }   /* ≥2 ПК — оранжевый */
.sip-assign .sip-assign-warn { width: 14px; height: 14px; flex-shrink: 0; color: #f59e0b; }

/* Подсказка со списком ПК (стекло, как поповеры/дропдауны). */
.sip-assign-tip {
  position: fixed;
  z-index: 1000000;
  min-width: 150px;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--lg-border);
  border-radius: var(--r-md);
  background: var(--lg-fill-soft);   /* больше прозрачности (держим читаемость блюром) */
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight);
  color: var(--text-primary);
  font-size: 0.8rem;
  pointer-events: none;           /* не мешает наведению/уходу курсора */
}
.sip-assign-tip-head {
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 6px;
  font-size: 0.76rem;
}
.sip-assign-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: var(--text-primary);
}
.sip-assign-tip-row svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-secondary); }
.sip-assign-tip-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Строки полных кредов в подсказке (наведение на логин). */
.sip-creds-row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.sip-creds-k { color: var(--text-secondary); flex-shrink: 0; }
.sip-creds-v { color: var(--text-primary); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Поле ввода в бабл-промпте (название SIP) — круглое, прозрачное. */
.delete-popover .dp-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: 38px;
  padding: 0 16px;
  line-height: 38px;
  font-size: 0.9rem;
  border-radius: var(--r-pill) !important;
  background: transparent !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: none !important;
}
.delete-popover .dp-input:focus { box-shadow: var(--lg-ring) !important; }
/* Палитра выбора цвета лейбла — стеклянная, круглые свотчи, выбранный обведён. */
.delete-popover .dp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--lg-border);
  border-radius: var(--r-md);
  background: var(--lg-fill-soft);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  justify-content: center;
}
.delete-popover .dp-sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform var(--lg-fast) var(--lg-ease);
}
.delete-popover .dp-sw:hover { transform: scale(1.15); }
.delete-popover .dp-sw.sel {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--lg-fill-raised), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
/* Счётчик выбранных: видимостью управляет JS (updateSipSelBar) — показываем при выборе. */
#sip-sel-count { display: none; }

.sip-sidebar-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Draggable SIP Card */
.sip-draggable-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xs);
  padding: 10px 15px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s;
}

.sip-draggable-card:active {
  cursor: grabbing;
}

.sip-draggable-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Light theme: white-alpha fills vanish on the light sidebar — use dark alpha. */
[data-theme="light"] .sip-draggable-card {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .sip-draggable-card:hover {
  background: rgba(0, 0, 0, 0.08);
}

.sip-draggable-card .sip-login {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.sip-draggable-card .sip-server {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Drop Zone on Device Card */
.card {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.card.drag-over {
  border-color: #6366f1;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5), inset 0 0 10px rgba(99, 102, 241, 0.2);
  transform: scale(1.02);
}

/* Assigned SIP Tag on Device Card */
.assigned-sip-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #4338ca;
  padding: 4px 6px 4px 10px;
  /* Пилюля: правый край — полукруг, в него ровно вписывается круглая подсветка ×. */
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  margin-top: 8px;
  gap: 8px;
}

/* Бледный индиго читаем только на тёмном фоне */
[data-theme="dark"] .assigned-sip-tag {
  color: #a5b4fc;
}

.assigned-sip-tag .unassign-btn {
  position: relative;
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  /* Increase touch/hit area while keeping the icon visually small */
  padding: 8px;
  margin: -8px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
/* Видимая круглая подсветка меньше зоны клика и центрирована — не вылезает за
   границы тега (раньше фон заливал всю 32px-зону клика и торчал за кромкой). */
.assigned-sip-tag .unassign-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease;
}
.assigned-sip-tag .unassign-btn:hover::before { background: rgba(239, 68, 68, 0.2); }

/* ===== SIP TABS & FORMS ===== */
.sip-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--r-xs);
  padding: 4px;
  margin-bottom: 10px;
}

[data-theme="light"] .sip-tabs {
  background: rgba(0, 0, 0, 0.05);
}

.sip-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.sip-tab-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
}

[data-theme="dark"] .sip-tab-btn.active {
  background: rgba(255, 255, 255, 0.1);
}

/* Light theme: 15% white gives no visible fill on the light track. */
[data-theme="light"] .sip-tab-btn.active {
  background: rgba(255, 255, 255, 0.9);
}

.btn-ghost-red {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #ef4444;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ghost-red:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.sip-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sip-add-form input {
  font-size: 0.85rem;
  padding: 8px 10px;
  border-radius: var(--r-xs);
}

.sip-compact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 22px;              /* чуть меньше «пузырька» */
  padding: 14px 20px;
  cursor: grab;
  user-select: none;                /* Shift-клик не выделяет текст */
  transition: all 0.2s;
}

.sip-compact-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sip-compact-card:active {
  cursor: grabbing;
}

/* Light theme: white-alpha fills vanish on the light sidebar — use dark alpha. */
[data-theme="light"] .sip-compact-card {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .sip-compact-card:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Выбранный для раздачи SIP-аккаунт */
.sip-compact-card.sip-selected {
  background: rgba(10, 132, 255, 0.14);
  border-color: rgba(10, 132, 255, 0.55);
  box-shadow: inset 3px 0 0 var(--primary-color);
}
[data-theme="light"] .sip-compact-card.sip-selected {
  background: rgba(10, 132, 255, 0.12);
}

/* Переключатель цели раздачи (Менеджеры / Группа) */
/* Кому раздать — пилюли, активная с акцентной обводкой (без заливки). */
.dist-target-btn {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--lg-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), background var(--lg-fast) var(--lg-ease);
}
.dist-target-btn:hover { background: var(--lg-fill-soft); }
.dist-target-btn.active {
  background: transparent;
  border-color: rgba(0, 122, 255, 0.85);
  color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

/* Окно «Раздать SIP» — фиксированный размер + прозрачность как у карточки устройства. */
#distribute-overlay .modal-base {
  width: 380px;
  max-width: 92vw;
  background: var(--card-bg) !important;
}
/* Превью раздачи — фикс высота под 2 строки (с запасом), чтобы окно не меняло размер. */
#distribute-preview { min-height: 40px !important; }

/* Дропдаун группы — как везде (стеклянный .ui-picker), по всей ширине, пилюля. */
.dist-group-sel-picker { width: 100%; }
.dist-group-sel-picker .ui-picker-btn {
  width: 100%;
  height: 40px !important;
  border-radius: var(--r-pill) !important;
}

/* Крестик закрытия — без обводки/фона, меняет цвет при наведении. */
#distribute-overlay .close-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-secondary);
  transition: color var(--lg-fast) var(--lg-ease);
}
#distribute-overlay .close-btn:hover { color: #ef4444 !important; }

/* Обе области (ПК / группа) — строго одной фиксированной высоты, чтобы окно не дёргалось
   при переключении. Список ПК заполняет остаток через flex. */
#dist-managers-picker,
#dist-group-picker {
  height: 208px;
  margin-bottom: 14px !important;
  box-sizing: border-box;
}
#dist-managers-picker { display: flex; flex-direction: column; }
#distribute-device-list {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;   /* без боковых отступов — строки ровно по краям с кнопками */
  flex: 1;
  height: auto !important;
  max-height: none !important;
  min-height: 0;
}
.dist-device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--lg-fast) var(--lg-ease), background var(--lg-fast) var(--lg-ease);
}
.dist-device-row:hover { background: var(--lg-fill-soft); }
/* Офлайн ПК — недоступны для раздачи: приглушены, не кликаются. */
.dist-device-row.dist-offline { opacity: 0.45; cursor: not-allowed; }
.dist-device-row.dist-offline:hover { background: transparent; }

/* [SEC] Блокирующий оверлей принудительной смены дефолтного пароля. */
.forced-pw-overlay {
  position: fixed; inset: 0; z-index: 100050;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.forced-pw-card {
  width: 100%; max-width: 380px;
  /* Прозрачное стекло — тот же материал, что у карточки ПК (--card-bg), а не плотный fill-raised. */
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-border);
  border-radius: 30px;
  box-shadow: var(--lg-shadow-card), inset 0 1px 0 0 var(--lg-highlight);
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
/* Поля — пузырьки: пилюльное скругление (бьём глобальный unify 8px !important), лёгкое стекло. */
.forced-pw-card .themed-input {
  width: 100%;
  border-radius: var(--r-pill) !important;
  background: var(--lg-fill-soft) !important;
  border: 1px solid var(--lg-border) !important;
  padding: 11px 16px;
  box-sizing: border-box;
}
.forced-pw-card .themed-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: var(--lg-ring);
}
/* Кнопка — пилюля в тон полей. */
.forced-pw-card .btn-primary { border-radius: var(--r-pill) !important; }
.forced-pw-err { display: none; color: var(--chart-mis, #dc2626); font-size: 0.85rem; padding-left: 4px; }

/* Модалка «Записи» (все записи парка) — наш стиль: крестик без фона/обводки (красный на
   наведении), без ховера строк, пилюльные кнопки воспроизведения. */
.all-rec-close {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50%;
  color: var(--text-secondary); cursor: pointer;
  transition: color .15s ease;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.all-rec-close:hover {
  color: #ff3b30 !important;
  background: transparent !important;
  border-color: transparent !important;
}
/* Таблица «Записи» — как эталонная таблица записей устройства: просторные строки с
   разделителями, плоские значки ▶/скачать, цветные пилюли направления. */
#all-rec-list .data-table tbody tr:hover { background: transparent; }
/* Без зебры — одинаковый фон у всех строк. */
#all-rec-list .data-table tbody tr:nth-child(even),
[data-theme="dark"] #all-rec-list .data-table tbody tr:nth-child(even) { background: transparent; }
#all-rec-list .data-table { font-size: 0.9rem; }
#all-rec-list .data-table td, #all-rec-list .data-table th { padding: 11px 12px; }
#all-rec-list .data-table th { color: var(--text-secondary); font-weight: 600; background: transparent; }
/* Шапка без подложки: sticky thead давал фрост-полосу (backdrop-filter). Делаем нелипкой,
   прозрачной, без блюра — фона под шапкой нет. */
#all-rec-list .data-table thead th {
  position: static;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Поле поиска — пузырёк (бьём глобальный unify 8px !important). */
#all-rec-search { border-radius: var(--r-pill) !important; }
/* Поиск в «Мониторах» — тоже пузырёк. */
#monitors-search { border-radius: var(--r-pill) !important; }
/* Пока окно «Мониторы» открыто — полностью блокируем выделение текста (возвращается при закрытии,
   класс снимается в closeMonitors). Поля ввода-исключение, чтобы поиск/инпуты работали. */
body.mon-open { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
body.mon-open input, body.mon-open textarea { -webkit-user-select: text; user-select: text; }
/* Окно «Мониторы» — прозрачное стекло: сквозь него виден фон, а не сплошная тёмная подложка. */
#monitors-overlay .modal-base {
  background: rgba(18, 22, 28, 0.18) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
}
/* Окно «Записи» — больше прозрачности: полупрозрачный фон + усиленный блюр (чтобы читалось). */
#all-rec-overlay .modal-base {
  background: rgba(18, 22, 28, 0.42) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
}
[data-theme="light"] #all-rec-overlay .modal-base { background: rgba(255, 255, 255, 0.5) !important; }
/* Плеер идеально вписан в низ окна: одинаковые небольшие отступы по бокам и снизу, чтобы
   пилюля плеера сидела концентрично со скруглением окна (r-xl 30px). */
#all-rec-overlay .modal-body { padding: 22px 16px 14px; }
#all-rec-overlay #all-rec-player { margin: 12px 0 0; }
#all-rec-list .data-table tbody td { border-top: 1px solid var(--glass-border); }
#all-rec-list .rec-actions-cell .icon-btn {
  background: transparent; border: none; box-shadow: none;
  width: 32px; height: 32px; padding: 6px; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .15s ease;
}
#all-rec-list .rec-actions-cell .icon-btn:hover { color: var(--primary-color); background: transparent; }
/* Активная (играющая) строка — подсветка кнопки паузы. */
#all-rec-list .agg-play-btn .agg-row-pause { color: var(--primary-color); }
/* Пропущенный — красная пилюля направления (в эталоне были только вх/исх). */
.rec-direction.missed { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
[data-theme="dark"] .rec-direction.missed { color: #f87171; }
/* Выделение — внутреннее (inset), не выходит за границы строки: не режется overflow
   и не требует бокового запаса, поэтому строки ровно по левому краю с кнопками. */
.dist-device-row.selected {
  border-color: rgba(0, 122, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.45);
}
.dist-device-row .dist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dist-device-row .dist-name { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Как раздать — карточки-пилюли (клик = выбор), описание в тултипе. */
.dist-mode-cards { display: flex; gap: 8px; }
.dist-mode-card {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--lg-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), background var(--lg-fast) var(--lg-ease);
}
.dist-mode-card:hover { background: var(--lg-fill-soft); }
.dist-mode-card.active {
  border-color: rgba(0, 122, 255, 0.85);
  color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

/* Кнопки Раздать/Отмена — пилюли без заливки, обводка цветом. */
.dist-actions { display: flex; gap: 10px; }
.dist-btn {
  flex: 1;
  height: 40px;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease);
}
.dist-btn-confirm { border: 1.5px solid #10b981; color: #10b981; }
.dist-btn-confirm:hover { background: rgba(16, 185, 129, 0.12); }
.dist-btn-cancel { border: 1.5px solid var(--lg-border); color: var(--text-primary); }
.dist-btn-cancel:hover { background: var(--lg-fill-soft); }

.sip-edit-inline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
/* Компактная сетка полей — по два в строку. */
.sip-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sip-edit-grid > * { min-width: 0; }

.sip-edit-inline input {
  font-size: 0.88rem;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill) !important;   /* поля-пузыри */
  background: transparent;
  border: 1px solid var(--lg-border);
  color: var(--text-primary);
  box-sizing: border-box;
}
.sip-edit-inline input:focus {
  outline: none;
  border-color: rgba(0, 122, 255, 0.85);
  box-shadow: var(--lg-ring);
}
/* Дропдаун транспорта в форме — тоже пузырёк (кастомный .ui-picker). */
.sip-edit-picker .ui-picker-btn {
  height: 38px !important;
  border-radius: var(--r-pill) !important;
}
.sip-edit-picker .ui-picker-list { border-radius: var(--r-md) !important; }

.sip-edit-inline .edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}
/* Кнопки-пузыри без заливки, только цветная обводка. */
.sip-edit-inline button {
  height: 36px;
  padding: 0 18px;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--r-pill) !important;
  cursor: pointer;
  background: transparent !important;
  transition: background var(--lg-fast) var(--lg-ease);
}
.sip-edit-save {
  border: 1.5px solid #10b981 !important;
  color: #10b981 !important;
}
.sip-edit-save:hover { background: rgba(16, 185, 129, 0.12) !important; }
.sip-edit-cancel {
  border: 1.5px solid var(--lg-border) !important;
  color: var(--text-primary) !important;
}
.sip-edit-cancel:hover { background: var(--lg-fill-soft) !important; }

/* SIP Sidebar Resizer */
.sip-sidebar-resizer {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
  z-index: 9001;
}

.sip-sidebar-resizer:hover,
.sip-sidebar-resizer.active {
  background: rgba(0, 122, 255, 0.5);
}

/* Password Success Animation */
.success-checkmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .header {
    padding: 15px;
  }

  header {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }

  .modern-title {
    font-size: 1.1rem;
  }

  #dashboard {
    padding: 12px 16px;
  }

  .modal-lg {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .modal-lg .modal-body > div {
    flex-direction: column;
  }

  .dashboard-grid {
    padding: 10px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .card {
    height: auto;
    min-height: 250px;
  }

  .modal {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    min-height: auto;
  }

  /* NOTE: 2-col tablet layout for .stats-summary-cards is defined in the
     earlier @media (max-width:768px) block; the single-column collapse now
     lives in a dedicated @media (max-width:480px) below so the two rules no
     longer overlap and cancel each other out. */

  .sip-sidebar {
    width: 100% !important;
    right: -100% !important;
  }

  .sip-sidebar.open {
    right: 0 !important;
  }

  .sip-sidebar-resizer {
    display: none;
  }

  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
  }

  /* Не сжимать вкладки — тогда контейнер прокручивается по горизонтали */
  .tabs .tab-btn {
    flex: 0 0 auto;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .logs-table,
  .scoring-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .stats-hourly-chart {
    height: 200px;
  }
}

/* Below tablet width, collapse the 4 summary cards to a single column.
   Kept separate from the 768px breakpoint so the 2-col tablet rule survives. */
@media (max-width: 480px) {
  .stats-summary-cards {
    grid-template-columns: 1fr;
  }
}

@keyframes groupSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes groupSlideOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

.group-item {
  animation: groupSlideIn 0.3s ease forwards;
}

.group-item.deleting {
  animation: groupSlideOut 0.3s ease forwards;
  pointer-events: none;
}

/* Unify border radius for buttons, inputs, and cards.
   .btn-primary исключён — он теперь пилюля (обводка-переключатель), см. ниже. */
.btn,
.btn-secondary,
.btn-danger,
.btn-icon,
.btn-download,
.btn-ghost-red,
.themed-input,
select.themed-input,
.device-card {
  border-radius: 8px !important;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.shake-animation {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Accessible focus outline (C-AY1) */
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Prevent long strings from breaking layout (C-O1) */
.sip-login,
.sip-server {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Ellipsis without min-width:0, so the phone column keeps its 140px floor
   (from .stats-number-phone above) instead of collapsing to nothing. */
.stats-number-phone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-header {
  min-width: 0;
}

.account-header > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Respect reduced-motion preference (C-ANIM) */
/* Гасим декоративные анимации, но НЕ функциональные индикаторы (.spinner),
   иначе спиннеры загрузки застывают и UI выглядит зависшим. */
@media (prefers-reduced-motion: reduce) {
  *:not(.spinner) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== ФУНКЦИОНАЛЬНЫЕ УЛУЧШЕНИЯ (пп.1–20) ===== */

/* Фильтр-чипы статусов на дашборде (п.7) */
.filter-chip {
  padding: 7px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}
.filter-chip.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* Массовое выделение карточек (п.8) */
.card.bulk-selectable {
  position: relative;
  /* Отступ-жёлоб слева, чтобы чекбокс не наезжал на имя устройства. */
  padding-left: 50px;
}
/* Кастомный чекбокс: нативный на тёмной карточке рисуется белым квадратом.
   Рисуем сами — рамка/фон по теме и галочка в выбранном состоянии. */
.card .bulk-checkbox {
  position: absolute;
  top: 18px;
  left: 16px;
  width: 22px;
  height: 22px;
  margin: 0;
  z-index: 6;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--glass-border);
  border-radius: var(--r-xs);
  background: var(--glass-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.card .bulk-checkbox:hover {
  border-color: var(--primary-color);
}
.card .bulk-checkbox:checked {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.card .bulk-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.card .bulk-checkbox:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.card.bulk-selected {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

/* Версия агента на карточке (п.9 / контракт 1) */
.agent-version-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  /* --glass-border is a hairline color, not a fill — use a proper subtle
     surface tint per theme so the normal badge is readable. */
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  opacity: 0.85;
  flex-shrink: 0;
}
[data-theme="dark"] .agent-version-badge {
  background: rgba(255, 255, 255, 0.08);
}
.agent-version-badge.outdated {
  color: #fff;
  background: #dc2626;
  opacity: 1;
}

/* Бейдж двойного назначения SIP (п.11) */
.sip-dup-badge {
  font-size: 0.72rem;
  color: #dc2626;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

/* Скоринг-таблица менеджеров (п.3): подсветка строк */
.scoring-table tbody tr:hover {
  background: rgba(0, 122, 255, 0.06);
}
.scoring-table th {
  border-bottom: 1px solid var(--glass-border);
}
/* ============================================================================
   ГРУППА «АНАЛИТИКА / ОТЧЁТЫ» (экспорт, сравнение, цели, спарклайны, wallboard)
   ============================================================================ */

/* Панель инструментов аналитики (экспорт / сравнение / цели) */
.stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  padding: 16px 30px;
}
.stats-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.stats-toolbar-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.stats-toolbar-btn {
  padding: 7px 12px !important;
  font-size: 0.85rem !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stats-compare-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 8px 14px;
}
.stats-goal-input {
  width: 64px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  margin: 0 !important;
  text-align: center;
}

/* Сравнение периодов: карточки дельт */
.stats-compare-wrap {
  padding: 8px 30px 0;
}
.stats-compare-head {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.stats-compare-loading {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 8px 0;
}
.stats-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.stats-compare-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.stats-compare-metric-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.stats-compare-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.stats-compare-delta {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 2px;
}
.stats-compare-prev {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Прогресс-бары целей в скоринг-таблице */
.goal-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.goal-bar {
  flex: 0 0 60px;
  height: 8px;
  background: var(--glass-border);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.goal-bar-fill {
  height: 100%;
  border-radius: var(--r-xs);
  transition: width 0.3s ease;
}
.goal-bar-num {
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 34px;
  text-align: right;
}

/* Спарклайн на карточке устройства (звонки за неделю) */
.card-sparkline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--glass-border);
}
.card-sparkline svg {
  flex: 1;
  min-width: 0;
  display: block;
}
.card-sparkline-label {
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}


}

/* ===== ПЕЧАТЬ / PDF: печатаем только панель аналитики ===== */
@media print {
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #stats-overlay, #stats-overlay * { visibility: visible !important; }
  #stats-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .stats-panel {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    color: #000 !important;
  }
  .stats-overlay, .stats-panel, .stats-section, .stats-card,
  .stats-panel-header h2, .stats-section-title { color: #000 !important; }
  .analytics-noprint, .close-btn { display: none !important; }
  .stats-section { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================================
   ГРУППА «АЛЕРТЫ / УВЕДОМЛЕНИЯ»
   ============================================================================ */

/* Бейдж непрочитанных на иконке-колокольчике в шапке */
.alerts-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--r-sm);
  border: 2px solid var(--glass-bg);
  pointer-events: none;
}

/* Пилюля со счётчиком непрочитанных в заголовке оверлея */
.alerts-pill {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--r-sm);
}

/* Тулбар оверлея алертов */
.alerts-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

/* Настройки алертов */
.alerts-settings {
  max-height: 42vh;
  overflow-y: auto;
  margin-top: 12px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--glass-border);
}
.alerts-set-group { margin-bottom: 14px; }
.alerts-set-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 4px 0 8px;
}
.alerts-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.alerts-set-row + .alerts-set-sub { margin-top: -4px; }
.alerts-set-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 4px 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.alerts-num {
  width: 60px !important;
  padding: 5px 8px !important;
  border-radius: var(--r-xs);
  margin: 0 !important;
  text-align: center;
}

/* Элемент списка алертов */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}
.alert-item:hover { background: rgba(0, 122, 255, 0.06); }
.alert-item.read { opacity: 0.6; }
.alert-item-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}
.alert-item-body { flex: 1; min-width: 0; }
.alert-item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.alert-item-details {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
  word-break: break-word;
}
.alert-item-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.8;
  margin-top: 4px;
}
.alert-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  margin-top: 6px;
}

/* Выпадашка живой ленты событий */


@media (max-width: 480px) {
}

/* ============================================================================
   ГРУППА UI-УЛУЧШЕНИЙ (20 клиентских пунктов) — стили
   ============================================================================ */

/* --- п.2/п.3: KPI-строка (hero-плитки) вверху оверлея статистики --- */
.stats-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 20px 30px 4px;
}
.kpi-tile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.kpi-tile::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kpi-accent, var(--chart-1));
}
.kpi-tile-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-tile-value {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.05;
  margin-top: 6px;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-tile-delta {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 1em;
}
.kpi-tile-delta.up { color: var(--chart-inc); }
.kpi-tile-delta.down { color: var(--chart-mis); }
.kpi-tile-delta.flat { color: var(--text-secondary); }
@media (max-width: 900px) {
  .stats-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .stats-kpi-row { grid-template-columns: repeat(2, 1fr); padding: 16px 16px 4px; }
  .kpi-tile-value { font-size: 1.5rem; }
}

/* --- п.20: якорная навигация-чипы внутри оверлея статистики --- */
.stats-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 30px 4px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.stats-anchor-chip {
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.stats-anchor-chip:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}
@media (max-width: 560px) {
  .stats-anchor-nav {
    padding: 10px 16px 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .stats-anchor-nav::-webkit-scrollbar { display: none; }
}

/* --- п.7: счётчики в фильтр-чипах статусов дашборда --- */
.filter-chip .chip-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  background: var(--glass-border);
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.filter-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* --- п.8: sticky-панель массовых действий --- */
#bulk-action-bar {
  position: sticky;
  top: 8px;
  z-index: 40;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px var(--shadow-dark);
}

/* --- п.9: undo-toast --- */
#undo-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.undo-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #1f2937;
  color: #f9fafb;
  padding: 12px 16px 12px 18px;
  border-radius: var(--r-sm);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  max-width: 92vw;
  animation: undoToastIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.undo-toast.hiding { animation: undoToastOut 0.24s ease forwards; }
.undo-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-toast-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background 0.15s ease;
}
.undo-toast-btn:hover { background: rgba(255, 255, 255, 0.15); }
.undo-toast-timer {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  position: relative;
}
.undo-toast-timer svg { transform: rotate(-90deg); }
.undo-toast-timer circle { fill: none; stroke-width: 3; }
.undo-toast-timer .track { stroke: rgba(255, 255, 255, 0.2); }
.undo-toast-timer .bar {
  stroke: #60a5fa;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
@keyframes undoToastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes undoToastOut { to { opacity: 0; transform: translateY(16px); } }

/* --- п.6: command-палитра (Ctrl/Cmd+K) --- */
#command-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 100005;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  padding-top: 12vh;
}
#command-palette-overlay.open { display: flex; }
.cmd-palette {
  width: 560px;
  max-width: 92vw;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: slideUpPanel 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmd-palette-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1.05rem;
  padding: 16px 20px;
  outline: none;
}
.cmd-palette-list {
  max-height: 46vh;
  overflow-y: auto;
  padding: 6px;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-primary);
}
.cmd-item.active, .cmd-item:hover { background: rgba(0, 122, 255, 0.12); }
.cmd-item-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  background: var(--glass-border);
  color: var(--text-secondary);
}
.cmd-item-body { min-width: 0; flex: 1; }
.cmd-item-title { font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-sub { font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-kind {
  flex-shrink: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xs);
  padding: 2px 7px;
}
.cmd-empty { padding: 22px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }
.cmd-palette-hint {
  padding: 8px 16px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.72rem;
  color: var(--text-secondary);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cmd-palette-hint kbd {
  font-family: inherit;
  background: var(--glass-border);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-size: 0.72rem;
}

/* --- п.13: единый компонент пустого состояния --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
  color: var(--text-secondary);
}
.empty-state svg { opacity: 0.5; }
.empty-state-text { font-size: 0.9rem; max-width: 320px; }

/* --- п.14: skeleton-загрузка секций аналитики --- */
.skeleton-block { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.skeleton-line {
  height: 14px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--chart-track) 25%, rgba(128,128,128,0.18) 37%, var(--chart-track) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.tall { height: 90px; }
@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
}

/* --- п.15: sticky-заголовок, зебра, табличные цифры в длинных таблицах --- */
.stats-scroll-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Шапка таблицы «История браузера»: НЕ липкая — просто стоит наверху таблицы и
   прокручивается вместе со списком (прозрачная, без подложки). Так нет наложения
   текста и не нужна подложка/блюр. */
#bh-list .data-table thead th {
  position: static;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bh-sticky-sentinel { height: 1px; margin: 0; padding: 0; }
.data-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.03); }
[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
/* История браузера — без зебры (подсветки через строку). */
#bh-list .data-table tbody tr:nth-child(even),
[data-theme="dark"] #bh-list .data-table tbody tr:nth-child(even) { background: transparent; }
.data-table tbody tr:hover { background: rgba(0, 122, 255, 0.07); }
/* История браузера — без подсветки строк при наведении. */
#bh-list .data-table tbody tr:hover { background: transparent; }
.data-table td, .data-table th { padding: 8px 10px; }

/* --- п.5: мини-бары в ячейках скоринг-таблицы --- */
.cell-bar {
  position: relative;
  display: block;
  height: 100%;
}
.cell-bar-track {
  position: relative;
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--chart-track);
  overflow: hidden;
  margin-top: 3px;
}
.cell-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-xs); }
.cell-with-bar { min-width: 88px; }

/* --- п.4: donut классификации дозвона (inline-SVG) --- */
.dozvon-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dozvon-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.dozvon-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.dozvon-legend-dot { width: 11px; height: 11px; border-radius: var(--r-xs); flex-shrink: 0; }
.dozvon-legend-val { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dozvon-legend-click { cursor: pointer; padding: 2px 4px; border-radius: var(--r-xs); transition: background 0.15s; }
.dozvon-legend-click:hover { background: rgba(10, 132, 255, 0.1); }

/* ===== Новые секции аналитики (тренды/воронка/сравнение/алерты) ===== */
/* Табы метрик тренда */
.trend-tab {
  padding: 3px 10px; border-radius: var(--r-xs); border: 1px solid var(--glass-border);
  background: transparent; color: var(--text-secondary); font-size: 0.78rem;
  cursor: pointer; transition: all 0.15s;
}
.trend-tab:hover { background: rgba(10, 132, 255, 0.08); }
.trend-tab.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* (Мёртвый блок .funnel-* удалён: воронка теперь рендерится через .lstat-* / _statRow.) */

/* Сравнение менеджеров */
.cmp-row { cursor: pointer; transition: background 0.15s; }
.cmp-row:hover { background: rgba(10, 132, 255, 0.07); }
.cmp-badge { display: inline-block; margin-right: 2px; }
.cmp-badge-low { color: var(--chart-mis); font-weight: 700; }

/* Номера: % дозвона + кликабельность */
.stats-number-click { cursor: pointer; }
.stats-number-click:hover { background: rgba(10, 132, 255, 0.06); }
.stats-number-reach { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; width: 42px; text-align: right; flex-shrink: 0; }

/* Баннер KPI-алертов */
.kpi-alert-banner { border-radius: var(--r-sm); padding: 12px 16px; font-size: 0.88rem; }
.kpi-alert-warn { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); color: var(--text-primary); }
.kpi-alert-ok { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.35); color: var(--text-primary); }

/* --- п.16/17: тепловая карта — легенда, пик, итоги --- */
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.heatmap-legend-gradient {
  width: 120px;
  height: 12px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--chart-track), var(--chart-1));
}
.heatmap-cell-peak {
  outline: 2px solid var(--chart-5);
  outline-offset: -2px;
}
.heatmap-total { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.heatmap-total-head { color: var(--text-secondary); font-weight: 600; font-size: 0.62rem; }

/* --- п.18: стек-бар утилизации --- */
.util-stack-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.util-stack-row { display: flex; align-items: center; gap: 12px; }
.util-stack-name {
  flex: 0 0 130px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.util-stack-bar {
  flex: 1;
  height: 18px;
  border-radius: var(--r-xs);
  overflow: hidden;
  display: flex;
  background: var(--chart-track);
}
.util-stack-seg { height: 100%; }
.util-stack-seg.active { background: var(--chart-6); }
.util-stack-seg.incall { background: var(--chart-7); }
.util-stack-seg.idle { background: var(--chart-track); }
.util-stack-pct { flex: 0 0 46px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.util-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }
.util-legend span { display: inline-flex; align-items: center; gap: 6px; }
.util-legend i { width: 11px; height: 11px; border-radius: var(--r-xs); display: inline-block; }

/* --- п.19: ось и маркер медианы/среднего в гистограмме --- */
.histogram-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 8px;
  border-top: 1px solid var(--glass-border);
  padding-top: 4px;
}
.histogram-markers {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 8px;
}
.histogram-markers b { color: var(--text-primary); }

/* --- п.11: мобильные карточки вместо широких таблиц (скоринг/утилизация) --- */
@media (max-width: 620px) {
  table.responsive-cards thead { display: none; }
  table.responsive-cards, table.responsive-cards tbody { display: block; width: 100%; }
  table.responsive-cards tr {
    display: block;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  table.responsive-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0 !important;
    border: none !important;
    text-align: right !important;
    white-space: normal !important;
  }
  table.responsive-cards td::before {
    content: attr(data-label);
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }
  table.responsive-cards td:first-child {
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--glass-border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
  }
  table.responsive-cards td:first-child::before { content: ''; }
}

/* --- п.12: полноширинные карточки устройств и горизонтальный скролл чипов на мобильном --- */
@media (max-width: 560px) {
  #dashboard-toolbar {
    padding: 12px 16px 0;
  }
  #dashboard-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
  }
  #dashboard-chips::-webkit-scrollbar { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .card { width: auto !important; min-width: 0 !important; }
  #bulk-action-bar { padding: 12px 16px; }
}

/* ===================================================================== */
/* RBAC-UI (контракт 4): админ-действия видны ТОЛЬКО при роли admin.       */
/* [ME-17] fail-closed: скрываем .admin-only при ЛЮБОЙ не-admin роли, вкл.  */
/* отсутствие/неизвестное значение data-role, а не только viewer.          */
/* Класс admin-only проставлен кнопкам/блокам, меняющим состояние.        */
/* ===================================================================== */
body:not([data-role="admin"]) .admin-only {
  display: none !important;
}

/* Click-to-call: компактная круглая кнопка «Позвонить» рядом с номером. */
.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0 6px;
  border: none;                     /* без обводки */
  border-radius: 50%;
  background: transparent;          /* прозрачная */
  color: var(--text-secondary);     /* серый */
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.call-btn:hover {
  background: transparent;
  color: #16a34a;                   /* зелёный при наведении */
  transform: scale(1.12);
}
.call-btn:active { transform: scale(0.96); }

/* ===================================================================== */
/* AUDIT-LOG (контракт 5): оверлей журнала действий.                      */
/* ===================================================================== */
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.audit-table th,
.audit-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-primary);
  vertical-align: top;
}
.audit-table th {
  position: sticky;
  top: 0;
  background: var(--glass-bg);
  z-index: 1;
  font-weight: 600;
  color: var(--text-secondary);
}
.audit-table td { word-break: break-word; }
.audit-scroll {
  max-height: 62vh;
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
}

/* Секция настроек интеграций (контракт 6/7) в оверлее настроек. */
.integration-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.integration-field label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Кнопка «Редактировать» дашборда всегда прижата к правому краю тулбара,
   в т.ч. когда переносится на свою строку (правило в CSS, а не инлайн —
   index.html кэшируется браузером без версии). */
/* Тулбар тянется на всю ширину, как сетка #dashboard (padding 40px),
   иначе max-width:1200px обрезал его и кнопка не доходила до края экрана. */
#dashboard-toolbar,
#bulk-action-bar {
  max-width: none !important;
  box-sizing: border-box;
}
/* Панель массовых действий — карточка, поэтому её отбивают от краёв экрана
   (после снятия max-width она прилипала к ним вплотную). */
#bulk-action-bar {
  margin: 12px 40px 0 !important;
  padding: 12px 20px !important;
  /* Оформление один в один с карточками устройств (.card): та же подложка,
     та же прозрачность, тот же блюр и неоморфная тень. */
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light) !important;
}

/* Пилюли, как у поля поиска: и сама строка, и всё, что в ней.
   !important — глобальное правило жёстко задаёт .btn/.themed-input радиус 8px. */
#bulk-action-bar { border-radius: 999px !important; }
#bulk-action-bar .btn,
#bulk-action-bar button,
#bulk-action-bar select,
#bulk-action-bar input,
#bulk-action-bar .themed-input {
  border-radius: 999px !important;
  height: 38px;
  padding: 0 16px !important;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
/* Выпадающие списки выглядят как кнопки .btn-secondary: та же подложка,
   рамка, цвет текста и своя стрелка вместо системной. */
#bulk-action-bar select.themed-input {
  padding: 0 34px 0 16px !important;
  background-color: rgba(255, 255, 255, 0.5); /* как у .btn-secondary */
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: all 0.15s ease;
}
#bulk-action-bar select.themed-input:hover {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: var(--primary-color);
}
[data-theme="dark"] #bulk-action-bar select.themed-input { background-color: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] #bulk-action-bar select.themed-input:hover { background-color: rgba(255, 255, 255, 0.1); }

@media (max-width: 560px) {
  #bulk-action-bar { margin: 12px 16px 0 !important; padding: 12px 14px !important; }
}
/* Поиск + чипы центрируются по странице, кнопка «Редактировать» вынута
   из потока и приколота к правому краю, чтобы не смещать центр. */
#dashboard-toolbar {
  position: relative;
  justify-content: center;
  /* !important — иначе инлайновый padding в index.html перебивает правило.
     Боковые 200px резервируем только на широких экранах: на узких они делали
     min-content шире вьюпорта → горизонтальный скролл, и margin:0 auto
     центрировал сетку карточек по ширине ДОКУМЕНТА (карточки уезжали вправо). */
  padding: 16px 40px 12px !important; /* нижний отступ: без него пилюли-чипы упирались в границу секции и выглядели срезанными */
}
/* Чипы-фильтры: честная пилюля одной высоты с полем поиска. */
#dashboard-chips .filter-chip {
  border-radius: var(--r-pill);
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
/* Счётчик в чипе — ровный круг-бейдж: одинаковый размер для 1–3 знаков,
   цифра строго по центру (grid вместо line-height-подгонки). */
#dashboard-chips .filter-chip .chip-count {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  margin-left: 0;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
}
[data-theme="dark"] #dashboard-chips .filter-chip .chip-count {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
#dashboard-chips .filter-chip.active .chip-count,
[data-theme="dark"] #dashboard-chips .filter-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: var(--primary-color);
}
#dashboard-toolbar #bulk-toggle-btn {
  /* !important — есть глобальное правило, жёстко задающее .btn радиус 8px */
  border-radius: 999px !important; /* пилюля, как поиск, чипы и кнопки плотности */
  padding: 8px 20px;
  position: absolute;
  right: 40px;
  top: 16px;
  height: 38px;
  margin-left: 0 !important;
}
#dashboard-toolbar #bulk-toggle-btn { margin-left: auto !important; }
/* ===================================================================== */
/* ПЛОТНОСТЬ СЕТКИ КАРТОЧЕК: 4–6 в ряд, переключатель в тулбаре.          */
/* Flex вместо grid — только он умеет центрировать НЕПОЛНЫЙ последний ряд.*/
/* ===================================================================== */
:root { --grid-cols: 4; --grid-gap: 20px; --card-w: 285px; }

.dashboard-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;   /* ряды (в т.ч. неполный) выравниваются по центру */
  align-content: flex-start;
  gap: var(--grid-gap);
  /* Вертикальный паддинг вмещает тень карточки (её обрезал бы overflow:hidden
     контейнера-аккордеона). Горизонталь 40px оставляем — от неё зависит max-width ниже. */
  padding: 24px 40px 44px;
  /* Ширина карточки ФИКСИРОВАНА (--card-w) и не зависит от числа колонок —
     переключатель 4/5/6 меняет только ширину контейнера, т.е. сколько карточек
     помещается в ряд. */
  max-width: calc(var(--grid-cols) * var(--card-w) + (var(--grid-cols) - 1) * var(--grid-gap) + 80px);
  margin: 0 auto;
}
.dashboard-grid > * {
  flex: 0 0 var(--card-w);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Заглушка «нет устройств» занимает всю строку (в grid это было grid-column: 1/-1). */
.dashboard-grid > [style*="grid-column"] { flex: 1 0 100%; }

/* Переключатель плотности сетки — в «Настройках → Внешний вид». */
#grid-density {
  display: flex;
  align-items: center;
  gap: 8px;
}
#grid-density button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--input-border);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="dark"] #grid-density button { background: rgba(255, 255, 255, 0.05); }
#grid-density button:hover { border-color: var(--primary-color); color: var(--text-primary); }
#grid-density button.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.gd-card { margin-bottom: 16px; }


/* Широкий экран — можно резервировать место по бокам под переключатель и кнопку. */
@media (min-width: 1600px) {
  #dashboard-toolbar { padding-left: 200px !important; padding-right: 200px !important; }
}
/* Страховка от горизонтального скролла: он ломает центровку margin:0 auto. */
html, body { overflow-x: hidden; }

/* Ширину карточки не трогаем и на узких экранах — просто в ряд влезает меньше
   (контейнер ограничен 100%). Только на мобильном карточка тянется на всю строку. */
@media (max-width: 560px) {
  .dashboard-grid > * { flex-basis: 100%; }
}

/* Поле поиска — такая же пилюля, как чипы-фильтры (инлайновый radius перебиваем). */
#dashboard-search { flex: 0 1 420px !important; height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; border-radius: 999px !important; padding-left: 18px !important; padding-right: 18px !important; }

/* ===================================================================== */
/* ЦЕНТР АЛЕРТОВ: выпадашка под колокольчиком вместо полноэкранной модалки */
/* ===================================================================== */
#alerts-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  pointer-events: none;            /* клики мимо панели уходят на страницу */
}
#alerts-overlay .modal-base {
  position: absolute;
  width: 400px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 560px) !important;
  margin: 0;
  pointer-events: auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  animation: alertsPopIn 0.14s ease-out;
}
@keyframes alertsPopIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#alerts-overlay .modal-header h2 { font-size: 1.05rem; }
/* Симметричные отступы: иначе контент шапки визуально уезжал вниз
   (было 20px сверху / 8px снизу — центр контента не совпадал с центром шапки). */
#alerts-overlay .modal-header { padding: 14px 24px !important; }
#alerts-overlay .modal-header h2 { line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  #alerts-overlay .modal-base { animation: none; }
}
@media (max-width: 560px) {
  #alerts-overlay .modal-base { width: auto; left: 12px; right: 12px !important; }
}

/* Иконочные действия в шапке панели алертов (вместо текстового тулбара). */
.alerts-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.alerts-head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.alerts-head-btn:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}
/* Блок настроек алертов переехал в «Настройки интерфейса» — больше не выпадающий. */
#settings-overlay .alerts-settings {
  display: block;
  max-height: none;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
}

/* Журнал действий теперь панель внутри настроек: таблица скроллится внутри панели. */
.settings-pane[data-pane="audit"] .audit-scroll { max-height: none; border: none; }
.settings-pane[data-pane="audit"] .audit-table td:nth-child(4) { word-break: break-all; }
.settings-pane[data-pane="audit"] .audit-table { font-size: 0.85rem; }

/* ===================================================================== */
/* НАСТРОЙКИ: вертикальный список категорий слева + панель контента       */
/* ===================================================================== */
/* Фиксированный размер: окно не «прыгает» при переключении категорий
   (панели разной высоты — от 230px «Звонки» до 561px «Алерты»). */
#settings-overlay .modal-base {
  width: 1100px;
  height: 680px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px);
  min-height: 0;
}
#settings-overlay .modal-body {
  overflow: hidden;
  display: flex;
  min-height: 0;
}
.settings-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 20px;
  width: 100%;
  min-height: 0;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--glass-border);
  padding-right: 14px;
  overflow-y: auto;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-nav-item svg { flex-shrink: 0; opacity: 0.85; }
.settings-nav-item:hover { background: var(--glass-border); color: var(--text-primary); }
.settings-nav-item.active {
  background: var(--primary-color);
  color: #fff;
}
.settings-nav-item.active svg { opacity: 1; }
.settings-panes {
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;
}
.settings-pane { display: none; }
.settings-pane.active { display: block; }
/* Внутри панели верхний заголовок не должен добавлять лишний отступ. */
.settings-pane > div:first-child { margin-top: 0 !important; }

@media (max-width: 700px) {
  .settings-layout { grid-template-columns: 1fr; gap: 12px; }
  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    padding: 0 0 8px 0;
  }
  .settings-nav-item { white-space: nowrap; }
  .settings-nav-item span { display: none; }
  .settings-nav-item { padding: 10px; }
}

/* ===================================================================== */
/* НАСТРОЙКИ → ВНЕШНИЙ ВИД: две карточки тем с превью текущего фона.       */
/* ===================================================================== */
.bg-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.bg-theme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
}
.bg-theme-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bg-theme-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.bg-theme-state {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Превью — фиксированное соотношение 16:9, шахматка видна, если фон не задан. */
.bg-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background-color: rgba(127, 127, 127, 0.12);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-preview-empty {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.75;
}
.bg-preview.has-image .bg-preview-empty { display: none; }
.bg-theme-actions { display: flex; gap: 8px; }
.bg-theme-actions .btn {
  flex: 1;
  padding: 8px 10px !important;
  font-size: 0.85rem;
}
.bg-theme-actions .btn-secondary { flex: 0 0 auto; }
.bg-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}
.bg-range-row { cursor: default; }
.bg-range-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--primary-color);
}
.bg-range-val {
  min-width: 26px;
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .bg-theme-grid { grid-template-columns: 1fr; }
}

/* ===================================================================== */
/* НАСТРОЙКИ → ИНТЕГРАЦИИ: пояснительный блок над полями.                 */
/* ===================================================================== */
.int-intro { margin: 12px 0 16px; }
.int-lead {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.int-events {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background: var(--input-bg);
}
.int-events-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.int-events ul { margin: 0; padding-left: 18px; }
.int-events li {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.int-events li b { color: var(--text-primary); font-weight: 600; }

.int-howto {
  margin-bottom: 16px;
  padding: 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background: var(--input-bg);
}
.int-howto-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.int-chan {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}
.int-chan-note { font-size: 0.78rem; color: var(--text-secondary); }
.int-howto ol { margin: 0; padding-left: 20px; }
.int-howto li {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.int-howto li b { color: var(--text-primary); font-weight: 600; }
.int-howto code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: rgba(127, 127, 127, 0.16);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text-primary);
  word-break: break-all;
}
.int-result {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.int-result b { color: #16a34a; }
.int-note {
  margin: 0 0 16px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
  opacity: 0.85;
}

/* ===================================================================== */
/* НАСТРОЙКИ → РАБОЧЕЕ ВРЕМЯ: расписание по дням недели.                  */
/* ===================================================================== */
.wt-h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 5px;
}
.wt-lead {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.wt-block {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
}
.wt-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.wt-block-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.wt-times { display: flex; align-items: center; gap: 8px; }
.wt-dash { color: var(--text-secondary); }
select.themed-input.wt-time {
  width: auto !important;
  min-width: 92px;
  height: 36px;
  margin: 0 !important;
  padding: 0 30px 0 12px !important;
  border-radius: 999px !important;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.wt-days { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* День-«таблетка»: чекбокс скрыт, состояние показывает сама таблетка. */
.wt-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
[data-theme="dark"] .wt-day { background: rgba(255, 255, 255, 0.05); }
.wt-day input { position: absolute; opacity: 0; pointer-events: none; }
.wt-day:hover { border-color: var(--primary-color); }
.wt-day.on {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.wt-day-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.8;
  margin-left: 4px;
}
.wt-hint {
  margin: 4px 0 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.wt-save { width: 100%; padding: 10px !important; }

/* ===================================================================== */
/* КОМПАКТНЫЕ ВЫПАДАЮЩИЕ СПИСКИ (весь проект).                            */
/* Нативный <select> скрыт: высоту его попапа рисует ОС и CSS её не берёт. */
/* ===================================================================== */
.ui-picker-native { display: none !important; }
.ui-picker { position: relative; display: inline-flex; min-width: 0; }
.ui-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 92px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--lg-border);
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
[data-theme="dark"] .ui-picker-btn { background: transparent; }
.ui-picker-btn::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg) translate(-2px, -2px);
}
.ui-picker-btn:hover:not(:disabled) { border-color: var(--primary-color); }
.ui-picker-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ui-picker.open .ui-picker-btn { border-color: var(--primary-color); }
.ui-picker-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100000;              /* выше модалок (99999) */
  min-width: 100%;
  max-width: 320px;
  max-height: 168px;            /* ~6 пунктов, дальше скролл */
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--lg-border);
  border-radius: var(--r-md);
  /* Матовое стекло, уравнено с поповером календаря: один слой заливки (~0.72) + блюр. */
  background: var(--lg-fill-raised);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight);
}
.ui-picker.drop-up .ui-picker-list { top: auto; bottom: calc(100% + 6px); }
.ui-picker.open .ui-picker-list { display: block; }
.ui-picker-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ui-picker-item:hover:not(:disabled) { background: var(--lg-fill-soft); }
.ui-picker-item.active { background: rgba(0, 122, 255, 0.14); color: var(--primary-color); }
.ui-picker-item:disabled { opacity: 0.5; cursor: not-allowed; }
/* Часы в расписании — моноширинные цифры. */
.wt-times .ui-picker-btn, .wt-times .ui-picker-item { font-variant-numeric: tabular-nums; }

/* ===================================================================== */
/* НАСТРОЙКИ → УЧЁТНЫЕ ЗАПИСИ                                             */
/* ===================================================================== */
.acct-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.acct-empty {
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border: 1px dashed var(--glass-border);
  border-radius: var(--r-sm);
}
.acct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
}
.acct-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-you {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(0, 122, 255, 0.14);
  color: var(--primary-color);
  font-size: 0.7rem;
  font-weight: 600;
}
.acct-role {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.acct-role.admin { background: rgba(0, 122, 255, 0.14); color: var(--primary-color); }
.acct-role.viewer { background: rgba(127, 127, 127, 0.16); color: var(--text-secondary); }
.acct-actions { display: flex; gap: 6px; flex-shrink: 0; }
.acct-actions .icon-btn {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  border-radius: 999px !important;
}
.acct-actions .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.acct-form {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
}
.acct-form-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.acct-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.acct-form-grid .ui-picker { grid-column: 1 / -1; }
.acct-form-grid .themed-input { margin: 0 !important; }
.acct-form-grid .ui-picker-btn { height: 40px; }
.acct-error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #dc2626;
  font-size: 0.82rem;
}
.acct-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.acct-form-actions .btn { flex: 1; padding: 9px !important; }

/* Скачивание актуального агента прямо с сервера (вкладка «Агенты»). */
.agent-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
}
.agent-download-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agent-download-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.agent-download-sub { font-size: 0.78rem; color: var(--text-secondary); }
.agent-download-sub code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: rgba(127, 127, 127, 0.16);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}
.agent-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px !important;
  font-size: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* ===================================================================== */
/* НАСТРОЙКИ → АНАЛИТИКА: блоки порогов, перенесённые из панели статистики */
/* ===================================================================== */
.an-block {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
}
.an-block-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.an-block-title { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); }
.an-block-note { font-size: 0.78rem; color: var(--text-secondary); }
.an-block-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Группы из тулбара внутри настроек — без «коробки», по ширине панели. */
.an-block-body .stats-toolbar-group,
.an-block-body .stats-compare-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  margin: 0;
}
.an-block-body .stats-toolbar-label { font-size: 0.85rem; color: var(--text-secondary); }
.an-block-body .stats-goal-input { width: 84px !important; margin: 0 !important; }
.an-block-body .ui-picker { min-width: 150px; }

/* Панель аналитики: одна аккуратная строка инструментов вместо двух. */
#stats-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
}
#stats-toolbar .stats-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
}
/* Разделители между группами вместо прижатия к краям: содержимое не влезает
   в одну строку (1322px против 1229px), поэтому переносим аккуратными рядами. */
#stats-toolbar { row-gap: 12px; column-gap: 14px; }
#stats-toolbar > * + *::before {
  content: '';
  width: 1px;
  height: 22px;
  margin-right: 14px;
  background: var(--glass-border);
}
#stats-toolbar > * { display: flex; align-items: center; }
#stats-toolbar .stats-compare-toggle { gap: 8px; }

/* Управление разделами аналитики (порядок + видимость). */
.an-reset { margin-left: auto; padding: 4px 12px !important; font-size: 0.78rem; }
.an-sections-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.an-sec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: rgba(127, 127, 127, 0.06);
}
.an-sec-row.off { opacity: 0.55; }
.an-sec-name {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.an-sec-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.an-sec-actions .icon-btn {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  border-radius: 999px !important;
}
.an-sec-actions .icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Разделитель в шапке: отделяет системные кнопки (настройки/выход) от рабочих. */
.header-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--glass-border);
  flex-shrink: 0;
}

/* ===================================================================== */
/* ЗАПРЕТ ВЫДЕЛЕНИЯ НА ЭЛЕМЕНТАХ ИНТЕРФЕЙСА.                             */
/* Данные (таблицы, логи, номера, поля ввода) выделять по-прежнему можно. */
/* ===================================================================== */
header .modern-title,
.settings-nav,
.filter-chip,
.stats-anchor-chip,
.tab-btn,
.btn,
.icon-btn,
.ui-picker-btn,
.ui-picker-item,
#grid-density,
.wt-day,
.acct-role,
.acct-you,
.group-header h2,
.modal-header h2 {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Логотип: ещё и перетаскивание картинки/выделение по двойному клику. */
header .modern-title { -webkit-user-drag: none; cursor: default; }
header .modern-title svg { pointer-events: none; }

/* ===================================================================== */
/* ЕДИНЫЙ СТИЛЬ ВСЕХ ВКЛАДОК НАСТРОЕК                                     */
/* Базис — оформление вкладки «Алерты»: группы с цветным заголовком,      */
/* строки «подпись слева / контрол справа», разделённые чёрточками.       */
/* ===================================================================== */

/* Заголовок вкладки */
.settings-pane h3,
.settings-pane .wt-h3 {
  margin: 0 0 4px !important;
  padding-bottom: 10px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
/* Подводка под заголовком вкладки */
.settings-pane .wt-lead,
.settings-pane .int-lead {
  margin: 12px 0 16px !important;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Название логической группы внутри вкладки (цветное, как просили) */
.set-group-title,
.settings-pane .alerts-set-title,
.settings-pane .an-block-title,
.settings-pane .bg-theme-title,
.settings-pane .wt-block-title,
.settings-pane .int-chan,
.settings-pane .acct-form-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Группа = блок без «коробки», отделённая чёрточкой сверху */
.settings-pane .an-block,
.settings-pane .wt-block,
.settings-pane .int-howto,
.settings-pane .int-events,
.settings-pane .acct-form,
.settings-pane .bg-theme-card {
  margin: 0 0 4px !important;
  padding: 16px 0 !important;
  border: none !important;
  border-top: 1px solid var(--glass-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.settings-pane .alerts-set-group { margin: 0 !important; padding: 16px 0 !important; }
.settings-pane .alerts-set-group + .alerts-set-group { border-top: 1px solid var(--glass-border); }

/* Строка настройки: подпись слева, контрол справа, чёрточка между строками */
.settings-pane .alerts-set-row,
.settings-pane .bg-opt-row,
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0 !important;
  font-size: 0.9rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--glass-border);
}
.settings-pane .alerts-set-row:last-child,
.settings-pane .bg-opt-row:last-child,
.set-row:last-child { border-bottom: none; }
/* Уточняющая строка идёт «под» своей настройкой — без верхней чёрточки */
.settings-pane .alerts-set-row + .alerts-set-sub {
  margin-top: -1px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--glass-border);
}
.settings-pane .alerts-set-row:has(+ .alerts-set-sub) { border-bottom: none; }

/* Пояснение под названием настройки */
.set-hint {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  font-weight: 400;
}
.set-label { display: flex; flex-direction: column; min-width: 0; }

/* Числовые поля одного размера во всех вкладках */
.settings-pane .alerts-num,
.settings-pane .stats-goal-input,
.settings-pane input[type="number"] {
  width: 76px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  margin: 0 !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Текстовые поля тоже к общему виду */
.settings-pane input[type="text"],
.settings-pane input[type="password"] {
  height: 40px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  margin: 0 !important;
}
.settings-pane .ui-picker-btn { height: 34px; }
.settings-pane .btn { border-radius: 999px !important; }

/* Описание под названием группы настроек */
.set-desc {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.settings-pane .an-block-head { flex-wrap: wrap; margin-bottom: 12px; }

/* Шапка вкладки: заголовок слева, действие справа */
.set-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.set-head-row .wt-h3 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.set-head-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px !important;
  font-size: 0.85rem;
  flex-shrink: 0;
}
/* Список учёток: строки-разделители вместо «коробок» */
.settings-pane .acct-row {
  padding: 12px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--glass-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.settings-pane .acct-list { gap: 0 !important; margin-bottom: 0 !important; }
.settings-pane .acct-form { padding-top: 16px !important; }

/* Во «Внешнем виде» карточки тем идут сеткой — рамку возвращаем, чёрточка тут не к месту. */
.settings-pane .bg-theme-card {
  padding: 14px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  background: var(--input-bg) !important;
}
.settings-pane .gd-card { margin-bottom: 16px !important; }

/* Категории в меню настроек */
.settings-nav-group {
  padding: 4px 12px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.75;
}
.settings-nav-group.with-sep {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}

/* ===================================================================== */
/* ШАПКА АНАЛИТИКИ: экспорт-меню рядом с закрытием, тумблер сравнения.     */
/* ===================================================================== */
.stats-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.stats-export { position: relative; }
.stats-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 0.85rem;
  white-space: nowrap;
}
.stats-export-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100000;
  min-width: 210px;
  padding: 6px;
  /* liquid glass — всплывающее меню (см .lg-raised) */
  border: 1px solid var(--lg-border);
  border-radius: var(--r-md);
  background: var(--lg-fill-raised);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight);
}
.stats-export.open .stats-export-menu { display: block; }
.stats-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.stats-export-item:hover { background: rgba(0, 122, 255, 0.12); }
.stats-export-item svg { flex-shrink: 0; opacity: 0.75; }
/* Тумблер сравнения — такая же пилюля, как выпадающие списки рядом */
.stats-panel-header .stats-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 16px 0 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
[data-theme="dark"] .stats-panel-header .stats-compare-toggle { background: rgba(255, 255, 255, 0.05); }
.stats-panel-header .stats-compare-toggle:hover { border-color: var(--primary-color); }
/* Активное состояние: класс ставит JS — :has в этом движке ненадёжен */
.stats-panel-header .stats-compare-toggle.on,
.stats-panel-header .stats-compare-toggle:has(input:checked) {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
/* Компактный размер самого переключателя внутри пилюли */
.stats-panel-header .stats-compare-toggle .switch { width: 34px; height: 19px; }
.stats-panel-header .stats-compare-toggle .slider:before { width: 15px; height: 15px; }
.stats-panel-header .stats-compare-toggle input:checked + .slider:before { transform: translateX(15px); }

/* Оверлей аналитики: без border-box паддинги прибавлялись к 100vh, контейнер
   становился выше экрана и нижняя граница панели уходила за предел прокрутки. */
.stats-overlay { box-sizing: border-box; }
.stats-overlay * { box-sizing: border-box; }
/* Чипы разделов — по центру */
#stats-anchor-nav {
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Полоса чипов лежала отдельным полупрозрачным слоем поверх такой же подложки
   панели — два слоя складывались и давали светлую полосу. Делаем панель сплошной,
   а полосу — того же цвета, тогда стыка не видно (и контент не просвечивает
   сквозь неё при прокрутке, ради чего подложка и была нужна). */
:root { --panel-solid: #f7f9fb; }
[data-theme="dark"] { --panel-solid: #14191e; }
.stats-panel {
  background: var(--panel-solid) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.stats-anchor-nav {
  background: var(--panel-solid) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none;
}
.stats-panel-header { background: transparent; }

/* Полоса чипов: равные отступы со всех сторон, ряды одинаковой высоты,
   переносится столько раз, сколько нужно — влезают любые 17 разделов. */
#stats-anchor-nav {
  padding: 12px 30px !important;
  gap: 8px !important;
  align-items: center;
  align-content: center;
}
#stats-anchor-nav .stats-anchor-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
  flex: 0 0 auto;
}
@media (max-width: 700px) {
  #stats-anchor-nav { padding: 10px 16px !important; }
}

/* Баннер алертов шёл во всю ширину панели, вплотную к её краям, тогда как
   секции ниже отбиты на 30px. Приводим к общей сетке. */
#stats-alerts {
  margin: 0 30px 16px !important;
}
#stats-alerts .kpi-alert-banner {
  border-radius: var(--r-md);
  padding: 14px 20px;
}
@media (max-width: 700px) {
  #stats-alerts { margin: 0 16px 12px !important; }
}

/* Алерты KPI: одна строка на менеджера — имя слева, показатели рядом. */
.kpi-alert-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.kpi-alert-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.86rem;
}
.kpi-alert-name {
  min-width: 130px;
  font-weight: 700;
}
.kpi-alert-vals { opacity: 0.95; }
.kpi-alert-vals b { font-weight: 700; }

/* Карточка устройства — фиксированной высоты. Список SIP-аккаунтов не растягивает
   её и не обрезается, а прокручивается внутри: flex-элементу для этого обязателен
   min-height:0, иначе содержимое распирает блок вместо появления скролла. */
.dashboard-grid > .card { height: 300px; }
.card .sip-tags-box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Прокручиваемый список SIP: обрез нижнего ряда маскируем затуханием. */
.card .sip-tags-box { position: relative; padding-bottom: 2px; scroll-padding-bottom: 8px; }
.card .sip-tags-box.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), rgba(0, 0, 0, 0.15) 100%);
}

/* ============================================================================
   Операторы: тултип на номере, таблицы по операторам, настройка групп
   ========================================================================== */

/* --- Тултип --------------------------------------------------------------- */
.phone-tip {
  position: fixed;
  z-index: 100001;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  color: var(--text-primary);
  font-size: .82rem;
  line-height: 1.45;
  pointer-events: none;
}
.phone-tip-head { font-weight: 700; margin-bottom: 6px; font-size: .9rem; }
.phone-tip-table { width: 100%; border-collapse: collapse; }
.phone-tip-table td { padding: 1px 0; vertical-align: top; }
.phone-tip-table td:first-child {
  color: var(--text-secondary);
  padding-right: 10px;
  white-space: nowrap;
  width: 1%;
}
.phone-tip-dim { color: var(--text-secondary); }
.phone-tip-night { color: var(--color-error); font-weight: 700; }
.phone-tip-empty { color: var(--text-secondary); }
.phone-tip-foot {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: .72rem;
}
.phone-tip-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}

/* --- Таблица «по операторам» --------------------------------------------- */
.ops-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ops-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: .75rem;
  padding: 0 8px 5px 0;
  white-space: nowrap;
}
.ops-table td { padding: 3px 8px 3px 0; vertical-align: middle; }
.ops-table .ops-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ops-table .ops-name { white-space: nowrap; }
.ops-table .ops-warn { color: var(--color-error); font-weight: 600; }
.ops-bar { width: 100%; min-width: 60px; }
.ops-bar span {
  display: block;
  height: 7px;
  border-radius: var(--r-xs);
  min-width: 2px;
  opacity: .85;
}
.ops-foot, .ops-empty {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: .78rem;
}
.ops-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 900px) { .ops-grid { grid-template-columns: 1fr; } }

.stats-section-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* --- Блок в карточке менеджера ------------------------------------------- */
.logs-ops-box {
  border-left: 1px solid var(--glass-border);
  padding-left: 20px;
  min-width: 260px;
  max-width: 380px;
  flex: 1;
}
.logs-ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 6px;
}
.logs-ops-cfg {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: var(--r-xs);
  padding: 2px 8px;
  font-size: .72rem;
  cursor: pointer;
}
.logs-ops-cfg:hover { color: var(--text-primary); border-color: var(--primary-color); }

/* Переключатель периода: сегментированный контрол фиксированной ширины,
   счётчик записей — отдельной пилюлей, чтобы ничего не съезжало. */
.logs-period-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  vertical-align: middle;
}
.logs-period-switch button {
  min-width: 92px;
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--lg-border);
  color: var(--text-secondary);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: inset 0 1px 0 0 var(--lg-highlight);
}
[data-theme="dark"] .logs-period-switch button { background: transparent; }
.logs-period-switch button:hover { border-color: rgba(0, 122, 255, 0.55); }
/* Активная — не заливка, а ОБВОДКА (как активный чип/строка поиска). */
.logs-period-switch button.active {
  background: transparent;
  border-color: rgba(0, 122, 255, 0.85);
  color: var(--primary-color);
  box-shadow: inset 0 1px 0 0 var(--lg-highlight), 0 0 0 3px rgba(0, 122, 255, 0.14);
}
.logs-period-count {
  margin-left: auto;                 /* прижимаем к правому краю */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 28px;                      /* та же высота, что у кнопок */
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: rgba(127, 127, 127, 0.14);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.log-op-cell { color: var(--text-secondary); font-size: .88rem; }
.log-op-unknown { opacity: .45; }

/* --- Модалка настройки групп --------------------------------------------- */
.ops-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  padding: 20px;
}
.ops-modal {
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--modal-bg, var(--glass-bg));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 20px;
  color: var(--text-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.ops-modal-head { display: flex; align-items: center; justify-content: space-between; }
.ops-modal-head h3 { margin: 0; font-size: 1.1rem; }
.ops-modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
}
.ops-modal-note {
  margin: 8px 0 14px;
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.5;
}
.ops-modal-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ops-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 2px solid var(--glass-border);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  background: var(--glass-bg);
}
.ops-chip input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 600;
  width: 100px;
  outline: none;
}
.ops-chip button, .ops-chip-add {
  background: transparent;
  border: 1px dashed var(--glass-border);
  color: var(--text-secondary);
  border-radius: var(--r-xs);
  cursor: pointer;
  font-size: .78rem;
  padding: 3px 8px;
}
.ops-chip button { border: none; padding: 0 2px; }
.ops-modal-other {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.ops-modal-body { overflow-y: auto; flex: 1; min-height: 0; }
.ops-modal-body select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  border-radius: var(--r-xs);
  padding: 3px 6px;
  font-size: .8rem;
}
.ops-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.ops-modal-foot button {
  border-radius: var(--r-xs);
  padding: 7px 14px;
  font-size: .85rem;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
}
.ops-modal-foot button.primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  font-weight: 600;
}

/* ===================================================================== */
/* КАРТОЧКА МЕНЕДЖЕРА → «Статистика за сегодня»: чистая сетка, без наездов */
/* ===================================================================== */
.lstat-card {
  margin-bottom: 20px;
  padding: 0;
  /* Без своей подложки и рамки — контент лежит прямо на стекле окна, как во
     вкладке «Активность» (никакой вложенной панели). */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.lstat-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
}
/* Переключатель растягивается на всю оставшуюся ширину — счётчик уезжает вправо. */
.lstat-title .logs-period-switch { flex: 1; }
/* Три ряда: каждый — контент слева + диаграмма справа, разделённые чёрточкой. */
.lstat-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
}
.lstat-row + .lstat-row { border-top: 1px solid var(--glass-border); }
.lstat-row-info { flex: 1 1 auto; min-width: 0; }
.lstat-row-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary-color);
  margin-bottom: 10px;
  padding-left: 12px; /* единый отступ всех заголовков секций (воронка/направление/статусы/операторы) */
}
.lstat-row-chart {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lstat-row-chart .donut-chart-wrapper {
  position: relative;
  width: 112px;
  height: 112px;
}
/* Строка показателя — грид: точка • название • счётчик • полоска(во всю ширину) • доля.
   Фиксированные колонки → всё выровнено, полоска забирает всю свободную ширину. */
.lstat-stat-row {
  display: grid;
  grid-template-columns: 12px minmax(84px, 190px) 46px 1fr 44px;
  align-items: center;
  gap: 12px;
  /* Горизонтальный отступ, чтобы точка/счётчик/доля не упирались в край строки
     (и в край подсветки при наведении). Заголовок выровнен тем же отступом ниже. */
  padding: 6px 12px;
  font-size: 0.9rem;
}
/* Заголовок ряда над списком выравниваем с отступом строк (не трогая воронку). */
/* (отступ заголовков задан в базовом .lstat-row-head — все секции выровнены) */
.lstat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lstat-stat-name {
  min-width: 0;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Счётчик + полоска доли вместо голых цифр процента. */
.lstat-stat-count {
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.lstat-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(127, 127, 127, 0.16);
  overflow: hidden;
}
.lstat-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); min-width: 2px; transition: width 0.3s ease; }
.lstat-stat-pct {
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.lstat-directions, .lstat-statuses { display: flex; flex-direction: column; }
.lstat-statuses { max-height: 168px; overflow-y: auto; }
.lstat-empty { font-size: 0.85rem; color: var(--text-secondary); padding: 4px 0; }
/* В карточке менеджера операторский блок — как остальные ряды, без рамки и отступа слева. */
.lstat-row-ops .logs-ops-box {
  min-width: 0;
  max-width: none;
  border-left: none !important;
  padding-left: 0 !important;
}
.lstat-row-chart .donut-chart-wrapper > [id$="-chart"] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.lstat-donut-hole { display: none; }
.lstat-donut-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Сегмент: при наведении «вырастает» (толще) и выходит вперёд. */
.lstat-donut-svg .lstat-seg {
  cursor: pointer;
  transition: stroke-width 0.15s ease, opacity 0.15s ease;
}
.lstat-donut-svg:hover .lstat-seg { opacity: 0.45; }
.lstat-donut-svg .lstat-seg:hover { stroke-width: 6.2; opacity: 1; }
.lstat-row-chart [id$="-total"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* Тултип сегмента диаграммы — как подсказка оператора у номера. */
.lstat-donut-tip {
  position: fixed;
  z-index: 100010;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: rgba(20, 25, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  white-space: nowrap;
}
.lstat-tip-name { display: block; font-size: 0.82rem; font-weight: 700; color: #fff; }
.lstat-tip-val { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
/* Узкий экран — диаграмма под контентом ряда */
@media (max-width: 620px) {
  .lstat-row { flex-direction: column; align-items: stretch; }
  .lstat-row-chart { align-self: center; }
}

/* Список операторов (ряд 3) — в одном стиле со статусами. */
.lstat-ops-list { display: flex; flex-direction: column; max-height: 168px; overflow-y: auto; }
.lstat-op-doz {
  font-size: 0.72rem;
  color: var(--text-secondary);
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.logs-ops-box .ops-foot {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Настройки → Операторы: конфигуратор групп (переехал из модалки). */
.ops-cfg-groups { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; align-items: flex-start; }
/* Группа = чип (цвет+название+удалить) над полем ключей. */
.ops-grp { display: flex; flex-direction: column; gap: 4px; }
.ops-grp-keys {
  width: 190px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xs);
  color: var(--text-secondary);
  font-size: .74rem;
  padding: 4px 8px;
  outline: none;
}
.ops-grp-keys:focus { border-color: #378ADD; color: var(--text-primary); }
/* Метка типа номера в таблице операторов. */
.ops-kind { display: inline-block; font-size: .72rem; padding: 1px 7px; border-radius: var(--r-xs); white-space: nowrap; }
.ops-kind--mob { background: rgba(29,158,117,.18); color: #1D9E75; }
.ops-kind--fix { background: rgba(55,138,221,.18); color: #378ADD; }
.ops-chip .ops-chip-color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.ops-chip .ops-chip-color::-webkit-color-swatch-wrapper { padding: 0; }
.ops-chip .ops-chip-color::-webkit-color-swatch { border: none; border-radius: var(--r-xs); }
.ops-cfg-body {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
}
.ops-cfg-body table { width: 100%; }
.ops-cfg-body select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-size: 0.82rem;
}
.ops-cfg-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Кликабельная строка статистики (детализация категории). */
.lstat-clickable { cursor: pointer; border-radius: var(--r-sm); transition: background 0.12s ease; }
.lstat-clickable:hover { background: rgba(0, 122, 255, 0.08); }
/* Чип активной детализации над таблицей истории. */
#history-filter-bar { align-items: center; margin-bottom: 12px; }
.hist-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(0, 122, 255, 0.14);
  color: var(--primary-color);
  font-size: 0.85rem;
  font-weight: 600;
}
.hist-filter-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 122, 255, 0.2);
  color: var(--primary-color);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
}
.hist-filter-chip button:hover { background: var(--primary-color); color: #fff; }

/* Когда открыто модальное окно — фон под ним не прокручивается колесом. */
html.modal-open, body.modal-open { overflow: hidden !important; }
/* Внутренняя прокрутка окна не «пробивается» на страницу под ним. */
[id$="-overlay"]:not(#bg-blur-overlay) { overscroll-behavior: contain; }

/* Операторская строка и её мини-шапка — одна сетка колонок (совпадают до пикселя).
   Последняя колонка «дозвон» получает свой запас, справа — единый отступ. */
.lstat-stat-row--op,
.lstat-ops-colhead {
  grid-template-columns: 12px minmax(76px, 190px) 46px 1fr 40px 54px;
  gap: 14px;
  padding-right: 6px;
}
.lstat-op-doz {
  justify-self: end;
  min-width: 54px;
  text-align: center;
  padding: 3px 0;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lstat-op-doz.doz-ok  { background: rgba(22, 163, 74, 0.16); color: #16a34a; }
.lstat-op-doz.doz-mid { background: rgba(217, 119, 6, 0.16); color: #d97706; }
.lstat-op-doz.doz-low { background: rgba(220, 38, 38, 0.16); color: #dc2626; }
.lstat-op-doz.doz-none { background: rgba(127, 127, 127, 0.14); color: var(--text-secondary); }
/* Мини-шапка колонок операторского списка. */
.lstat-ops-colhead {
  display: grid;
  padding-top: 0;
  padding-bottom: 7px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  opacity: 0.7;
}
.lstat-ops-colhead span:nth-child(2) { grid-column: 3; text-align: right; }
.lstat-ops-colhead span:nth-child(3) { grid-column: 5; text-align: right; }
.lstat-ops-colhead span:nth-child(4) { grid-column: 6; text-align: center; }

/* Записи: строка не должна менять высоту при запуске плеера.
   Ячейка действий фиксированной высоты, плеер подогнан под неё. */
.rec-actions-cell { vertical-align: middle; }
.rec-actions-cell > div { height: 36px; }
#recordings-list .custom-player {
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px !important;
  gap: 6px !important;
}
#recordings-list .custom-player .icon-btn {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
#recordings-list .custom-player input[type="range"] { height: 4px; }
/* Время не должно переноситься на две строки внутри узкого плеера. */
#recordings-list .custom-player span {
  white-space: nowrap !important;
  width: auto !important;
  min-width: 32px;
  flex-shrink: 0;
}
#recordings-list .btn-play,
#recordings-list .btn-download {
  height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Кнопка play/pause в плеере записи — без фона/границы, круглое выделение при hover. */
#recordings-list .custom-player .icon-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  border-radius: 50% !important;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease) !important;
}
#recordings-list .custom-player .icon-btn:hover {
  color: var(--primary-color) !important;
  background: var(--lg-fill-soft) !important;
}

/* Ровная сетка таблицы записей: фиксированные колонки, действия забирают остаток. */
#recordings-table { table-layout: fixed; width: 100%; }
#recordings-table th:nth-child(1), #recordings-list td:nth-child(1) { width: 165px; }  /* Дата */
#recordings-table th:nth-child(2), #recordings-list td:nth-child(2) { width: 140px; }  /* Номер */
#recordings-table th:nth-child(3), #recordings-list td:nth-child(3) { width: 140px; }  /* Направление */
#recordings-table th:nth-child(4), #recordings-list td:nth-child(4) { width: 110px; }  /* Длительность */
#recordings-table th:nth-child(5), #recordings-list td:nth-child(5) { width: 90px; }   /* Размер */
#recordings-table th:nth-child(6), #recordings-list td:nth-child(6) { width: auto; }   /* Действия */
/* Блок действий занимает всю ширину столбца, плеер тянется на свободное место. */
#recordings-list .rec-actions-cell > div {
  min-width: 0 !important;
  width: 100%;
  justify-content: flex-end;
}
#recordings-list .custom-player {
  max-width: none !important;
  flex: 1 1 auto !important;
}
#recordings-list td { overflow: hidden; text-overflow: ellipsis; }

/* Воронка звонков в карточке менеджера — те же тонкие полосы, что и у направлений,
   плюс колонка конверсии из предыдущего шага. */
.lstat-funnel { padding: 6px 0 12px; border-bottom: 1px solid var(--glass-border); margin-bottom: 4px; }
.cfun-conv-tail {
  justify-self: end;
  font-size: 0.74rem;
  font-weight: 600;
  color: #16a34a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== Кастомный календарь (liquid-glass) вместо нативного <input type=date> ===== */
/* Триггер — на месте нативного поля: наследует его размеры (cssText копируется в JS),
   показывает дату в формате ДД.ММ.ГГГГ (или плейсхолдер) + иконку календаря. */
.gcal-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font: inherit;
}
.gcal-trigger .gcal-t-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.gcal-trigger .gcal-t-txt.ph { color: var(--text-secondary); opacity: 0.7; }
.gcal-trigger .gcal-t-ico { flex: 0 0 auto; opacity: 0.55; display: inline-flex; }

/* Поповер-календарь: стеклянная панель поверх всего (position:fixed из JS). */
.gcal-pop {
  z-index: 100001;
  width: 264px;
  padding: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--lg-border);
  /* Чуть прозрачнее: один слой стеклянной заливки (~0.72) + блюр — фон слегка просвечивает,
     но остаётся матовое стекло. */
  background: var(--lg-fill-raised);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight);
  color: var(--text-primary);
  animation: gcalIn 0.16s var(--lg-ease);
}
@keyframes gcalIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.gcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 2px; }
.gcal-title { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
.gcal-nav { display: flex; gap: 4px; }
.gcal-navbtn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease);
}
.gcal-navbtn:hover { background: var(--lg-fill-soft); color: var(--text-primary); }
.gcal-navbtn:active { transform: scale(0.92); }

.gcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gcal-wd { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); opacity: 0.7; padding-bottom: 4px; }

.gcal-day {
  position: relative; height: 32px;
  border: none; background: transparent; border-radius: var(--r-sm);
  font-size: 0.85rem; color: var(--text-primary); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast) var(--lg-ease);
}
.gcal-day:hover { background: var(--lg-fill-soft); }
.gcal-day.is-other { color: var(--text-secondary); opacity: 0.4; }
.gcal-day.is-weekend { color: #ff6b5e; }
.gcal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary-color); font-weight: 700; }
.gcal-day.is-selected { background: var(--primary-color); color: #fff; font-weight: 700; box-shadow: none; opacity: 1; }
.gcal-day.is-selected.is-weekend { color: #fff; }
.gcal-day:focus-visible { outline: none; box-shadow: var(--lg-ring); }

.gcal-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--lg-hairline); }
.gcal-foot-btn {
  border: none; background: transparent; font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: var(--r-xs);
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease);
}
.gcal-foot-btn:hover { background: var(--lg-fill-soft); color: var(--text-primary); }
.gcal-foot-btn.accent { color: var(--primary-color); }

/* Иконочная кнопка скачивания записей — только иконка, без рамки; лёгкий hover. */
#rec-dl-btn { transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), transform var(--lg-fast) var(--lg-ease); }
#rec-dl-btn:hover { background: var(--lg-fill-soft); color: var(--primary-color); }
#rec-dl-btn:active { transform: scale(0.92); }

/* Стрелка тренда конверсии воронки vs прошлый период: ↑ лучше / ↓ хуже / ▬ без изменений.
   .static — прежний нейтральный «↳», когда сравнивать не с чем. */
.conv-trend { font-weight: 700; display: inline-flex; align-items: center; vertical-align: middle; }
.conv-trend.up { color: #34c759; }
.conv-trend.down { color: #ff453a; }
.conv-trend.flat { color: var(--text-secondary); }
.conv-trend.static { color: var(--text-secondary); opacity: 0.85; }

/* Кнопки в шапке — прозрачные (перебиваем инлайновый glass-bg), лёгкий hover. */
.header-actions .icon-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.header-actions .icon-btn:hover { background: var(--lg-fill-soft) !important; }

/* Кнопка «Редактировать» на дашборде — иконка-карандаш без фона; active = синий. */
#bulk-toggle-btn { transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), transform var(--lg-fast) var(--lg-ease); border-radius: var(--r-pill); }
#bulk-toggle-btn:hover { background: var(--lg-fill-soft); color: var(--text-primary); }
#bulk-toggle-btn:active { transform: scale(0.92); }
#bulk-toggle-btn.active { color: var(--primary-color); }

/* Кнопки play/download в записях — без фона, КРУГЛОЕ выделение при hover
   (перебиваем unify `border-radius: 8px !important` и любую заливку). */
.btn-download {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
.btn-download:hover { background: var(--lg-fill-soft) !important; }

/* Пилюля-скругление primary-кнопок поверх unify-правила (.btn 8px !important).
   Селектор .btn.btn-primary специфичнее .btn, поэтому побеждает даже для class="btn btn-primary". */
.btn-primary,
.btn.btn-primary { border-radius: var(--r-pill) !important; }

/* Поля контактов — пилюли: ID-селектор бьёт глобальное `.themed-input 8px !important`. */
#contact-new-name,
#contact-new-number { border-radius: var(--r-pill) !important; }

/* Контакты — ровная сетка: Имя | Номер | действия (у правого края). */
.contacts-grid-head,
.contacts-grid-row {
  display: grid;
  /* Имя | звонок | Номер | действия — так значение номера стоит ровно под заголовком,
     а кнопка звонка отдельной колонкой слева. */
  grid-template-columns: minmax(80px, 0.9fr) 24px minmax(120px, 1.5fr) 40px;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 10px 12px;
}
.contacts-grid-row .c-call { display: inline-flex; justify-content: center; }
.contacts-grid-row .c-call .call-btn { margin: 0; }
.contacts-grid-head {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--glass-border);
}
.contacts-grid-row { border-bottom: 1px solid var(--glass-border); }
.contacts-grid-row .c-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-grid-row .c-num { display: inline-flex; align-items: center; min-width: 0; }
.contacts-grid-row .c-actions { justify-self: end; }
.contacts-empty { text-align: center; color: var(--text-secondary); padding: 18px 0; }

/* Кнопка удаления контакта: без обводки и без ховера — плоский значок. */
#contacts-list .icon-btn.delete {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  color: var(--text-secondary);
}
#contacts-list .icon-btn.delete:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ============================================================================
   АНАЛИТИКА — прозрачное стекло как карточка ПК (пузырьки/пилюли)
   ============================================================================ */
/* Панель — тот же стеклянный материал, что и карточка устройства (.card):
   полупрозрачный --card-bg + светящаяся кромка + верхний блик + тень. */
#stats-overlay .stats-panel {
  background: var(--card-bg) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow-card), inset 0 1px 0 0 var(--lg-highlight) !important;
}
/* Внутри оверлея все «стеклянные» инлайновые боксы (background:var(--glass-bg))
   делаем прозрачными разом — так каждая внутренняя карточка без подложки. */
#stats-overlay { --glass-bg: transparent; }
/* Полосу быстрых переходов (якорные вкладки) убираем полностью */
#stats-overlay .stats-anchor-nav,
#stats-anchor-nav { display: none !important; }
/* Секции-контейнеры — без подложки и обводки, на прозрачном фоне */
#stats-overlay .stats-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* KPI-плитки и плитки-направления — прозрачные пузыри с тонкой обводкой,
   без цветных полосок слева и без цветной заливки-оверлея */
#stats-overlay .kpi-tile,
#stats-overlay .stats-card {
  background: transparent !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#stats-overlay .kpi-tile::after { display: none !important; }
#stats-overlay .stats-card::before { display: none !important; }
#stats-overlay .stats-card:hover { transform: none !important; }
/* Крестик закрытия — красный при наведении */
#stats-overlay .stats-header-actions .close-btn:hover { color: #ff3b30 !important; }
/* Верхние фильтры (период / устройство / группа) → пилюли-стекло */
.stats-panel-header .themed-input,
.stats-panel-header .ui-picker-btn {
  border-radius: var(--r-pill) !important;
  background: var(--lg-fill-soft) !important;
  border: 1px solid var(--lg-border) !important;
}
/* Выпадающее меню фильтров — наш стеклянный вид со скруглением и пилюльными пунктами
   (по умолчанию ui-picker уже стеклянный, но в шапке усиливаем скругление/пункты). */
.stats-panel-header .ui-picker-list {
  border-radius: var(--r-lg) !important;
  background: var(--lg-fill-raised) !important;
  border: 1px solid var(--lg-border) !important;
  padding: 6px !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-sat)) !important;
  box-shadow: var(--lg-shadow-3), inset 0 1px 0 0 var(--lg-highlight) !important;
}
.stats-panel-header .ui-picker-item {
  border-radius: var(--r-pill) !important;
}
.stats-panel-header .ui-picker-item:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.10) !important;
}
.stats-panel-header .ui-picker-item.active {
  background: rgba(0, 122, 255, 0.16) !important;
  color: var(--primary-color) !important;
}