/*
 * dashboard.css — оформлення дашборду метрик.
 *
 * Токени кольору успадковані від панелі (--bg/--card/--line/--txt/--muted і
 * радіуси — див. panel_styles() в auth.php), тут додано лише те, чого панель не
 * має: каркас дашборду, палітра серій і хром графіків.
 *
 * Палітра серій — 7 слотів, перевірених на фоні картки на розрізнюваність при
 * дальтонізмі. Порядок слотів не косметичний: саме він тримає сусідні серії
 * розрізнюваними. Міняти можна лише цілим набором. Ті самі сім кольорів
 * продубльовані в app/src/lib/palette.ts — там вони йдуть в атрибути SVG.
 */

/* ============================================================
   Каркас: сайдбар ліворуч, шапка розділу вгорі.

   Розділи стоять стовпчиком, а не рядом вкладок нагорі. Рядок вкладок ріс
   убік і при кожному новому розділі або звужував сусідів, або зсував увесь
   ряд; у стовпчику новий розділ — це просто ще один рядок. Звільнене місце
   вгорі пішло під те, заради чого сюди й заходять: назву розділу й період.
   ============================================================ */
.nika {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

/* Сайдбар не прокручується разом зі сторінкою: перехід між розділами має бути
   доступний із будь-якого місця довгої таблиці, а не «прокрути вгору спершу». */
.nika-side {
  position: sticky; top: 0; align-self: start;
  height: 100vh; display: flex; flex-direction: column;
  background: var(--bg-2); border-right: 1px solid var(--line);
}
.nika-main { min-width: 0; display: flex; flex-direction: column; }

.nika-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 16px 14px; color: var(--txt); text-decoration: none;
}
/* Маскот — фоном, а не тегом <img>: адреса картинки відносна, і в бою вона
   рахується від index.php, а в dev — від таблиці стилів. З CSS вона правильна
   в обох місцях, з JSX довелось би вгадувати базу. */
.nika-logo {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-md);
  background: var(--card-2) url('?action=asset&name=nika-avatar.webp') center/cover no-repeat;
  box-shadow: var(--shadow);
}
.nika-brand-txt b { display: block; font-size: 19px; line-height: 1.15; letter-spacing: .2px; }
.nika-brand-txt span { font-size: 11px; color: var(--muted); }

.nika-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; overflow-y: auto; }
.nika-nav-item {
  display: flex; align-items: center; gap: 11px; white-space: nowrap;
  padding: 9px 12px; border-radius: var(--r-md);
  color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.2;
}
.nika-nav-item svg { width: 18px; height: 18px; flex: none; }
.nika-nav-item:hover { background: var(--card); color: var(--txt); }
/* Активний розділ — заливкою, а не рамкою: у стовпчику рамка читається як межа
   групи, а не як «ви тут». */
.nika-nav-item.on { background: var(--acc); color: #fff; box-shadow: 0 6px 18px rgba(47, 111, 237, .3); }

/* Маскот заповнює те, що лишилось між меню й карткою користувача. Місця мало —
   зникає: він тут прикраса, і витісняти нею ім'я чи кнопку виходу не можна. */
.nika-hero {
  flex: 1 1 auto; min-height: 0; margin: 14px 12px 0;
  background: url('?action=asset&name=nika-hero.webp') center bottom/contain no-repeat;
}

.nika-user {
  display: flex; align-items: center; gap: 10px;
  margin: 12px; padding: 9px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
}
.nika-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-soft); color: var(--acc-2);
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.nika-user-txt { min-width: 0; flex: 1; }
.nika-user-txt b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nika-user-txt span { font-size: 11px; color: var(--muted); }
.nika-signout {
  flex: none; display: flex; padding: 6px; border-radius: var(--r);
  background: none; border: 1px solid transparent; color: var(--muted);
}
.nika-signout svg { width: 17px; height: 17px; }
.nika-signout:hover { color: var(--danger); border-color: var(--line); }

/* Шапка розділу. Липка й напівпрозора: період має лишатись під рукою на будь-якій
   глибині прокрутки, але не закривати числа суцільною плитою. */
.nika-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 16px; flex-wrap: wrap; padding: 14px 24px;
  background: rgba(10, 13, 20, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Заголовок відтискає решту праворуч сам. Якби замість цього праву групу
   притискав її власний margin-left:auto, то при порожньому списку місяців
   (керування немає, аватарка є) вільне місце ділилось би між ними, і аватарка
   з'їхала б у центр. */
.nika-title { margin-right: auto; }
.nika-title h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.2px; }
.nika-title p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }

.nika-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Аватарка в куті. Кругла — на відміну від усього іншого на екрані: це єдина
   позначка, яка каже про людину, а не про число, і форма відрізняє її швидше
   за колір. */
.nika-who {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(47, 111, 237, .22); border: 1px solid var(--line);
  color: #cfe0ff; font-size: 12.5px; font-weight: 650; letter-spacing: .4px;
}
/* Фільтр — одна «пігулка» на підпис і поле разом. Окремий <label> збоку від
   голого <select> змушував би читати їх як дві речі, тоді як це одна. */
.nika-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.nika-chip > svg { width: 16px; height: 16px; flex: none; }
.nika-chip select, .nika-chip input {
  background: none; border: 0; border-radius: 8px;
  padding: 4px 6px; color: var(--txt); font-size: 12.5px;
}
.nika-chip select:focus, .nika-chip input:focus { outline: none; box-shadow: none; background: var(--card-2); }
.nika-chip select:disabled { color: var(--muted); }
.nika-chip:focus-within { border-color: var(--acc); }
.nika-chip-range { padding-left: 10px; gap: 2px; }
/* Заданий діапазон перекриває готовий період — і це видно по рамці, а не лише
   по тому, що сусідній список раптом сірий. */
.nika-chip-range.on { border-color: var(--acc); color: var(--txt); }
.nika-dash { color: var(--muted); }
.nika-chip-x {
  padding: 2px 6px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 11px; cursor: pointer;
}
.nika-chip-x:hover { color: var(--txt); background: var(--card-2); }

.nika-body { padding: 18px 24px 40px; }
/* Службові позначки: курс, свіжість дампу, годинник. Дрібним і під шапкою — це
   не фільтри, а відповідь на «наскільки свіжі числа й чим переведені гроші». */
.nika-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.nika-meta .spacer { flex: 1; }

.nika-splash { display: flex; align-items: center; justify-content: center; min-height: 60vh; }

/* Вузький екран: сайдбар лягає смугою нагорі. Ховати його за кнопкою-бургером
   означало б сховати всю навігацію панелі, у якої розділів чотири. */
@media (max-width: 1000px) {
  /*
   * Рядки задані явно — інакше під смугою розділів зяяла порожнеча.
   *
   * Сітка розтягує рядки на всю висоту (`min-height: 100vh`), але в сайдбара
   * лишався `align-self: start` зі стовпчикової розкладки: сам він
   * притискався догори, а розтягнутий під нього РЯДОК лишався заввишки
   * пів-екрана. На короткій сторінці це давало 230 пікселів пустоти між
   * меню й назвою розділу — і виглядало як не завантажена сторінка.
   */
  .nika { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .nika-side {
    position: static; height: auto; align-self: stretch;
    flex-direction: row; align-items: center;
    gap: 8px; padding-right: 12px; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .nika-brand { padding: 10px 4px 10px 14px; }
  .nika-nav { flex-direction: row; padding: 8px 0; }
  .nika-hero { display: none; }
  .nika-user { margin: 0 0 0 auto; }
  .nika-top { padding: 12px 16px; }
  .nika-body { padding: 14px 16px 32px; }
}
/* Низьке вікно: маскот іде першим — місце потрібне пунктам меню. */
@media (max-height: 760px) {
  .nika-hero { display: none; }
}

.dash {
  --s1: #3987e5;  /* синій    */
  --s2: #d95926;  /* помаранч */
  --s3: #199e70;  /* аква     */
  --s4: #c98500;  /* жовтий   */
  --s5: #d55181;  /* маджента */
  --s6: #008300;  /* зелений  */
  --s7: #9085e9;  /* фіолет   */
  --other: #6b7280;             /* «інше» — навмисно сірий, не 8-й колір */
  --grid: var(--line);          /* сітка: один крок від фону, суцільна */
  --axis: #9aa4b2;
  max-width: 1400px;
  margin: 0 auto;
}

/* --- Ряди підрозділів усередині розділу: справжні посилання, а не кнопки. ---
   Виглядають як кнопки навмисно — ряд не повинен раптом стати синім
   підкресленим текстом лише через те, що всередині це <a>. Але саме <a> дає
   середній клік, «відкрити в новій вкладці» й копіювання адреси. */
nav.tabs .tab {
  font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card-2); color: var(--txt);
  padding: 8px 14px; border-radius: var(--r);
}
nav.tabs .tab:hover { border-color: var(--acc); }
nav.tabs .tab.on { background: var(--acc); border-color: var(--acc); color: #fff; }

.dash-stamp { color: var(--muted); font-size: 12px; }

/* Період ширший за місяць. Селект «Месяц» у шапці в цю мить показує щось інше,
   ніж період на екрані, — і читач має бачити, що головніший тут період, а не
   вирішувати це самотужки. Звідси підсвітка: не прикраса, а розв'язання
   суперечності між двома написами поруч. */
.dash-stamp.on { color: var(--txt); font-weight: 600; }
.dash-stamp.warn { color: #f0d9a0; }

.dash-warn {
  padding: 10px 14px; margin-bottom: 16px; border-radius: var(--r-md);
  background: #2a2418; border: 1px solid #5a4a1e; color: #f0d9a0; font-size: 13px;
}

/* --- Плитки показників ---
   Плитка — це стовпчик із трьох поверхів: підпис, число, пояснення. Поверхи
   мають збігатися по висоті СУСІДНІХ плиток, інакше ряд розпадається на шість
   окремих карток: очі перестають бігти по числах горизонтально й починають
   читати кожну плитку зверху вниз. Тримає це flex із притиснутим донизу
   поясненням, а не однакова довжина текстів (її не буває). */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 12px; margin-bottom: 18px; }
.tile {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 16px 14px;
}
.tile .lbl {
  color: var(--muted); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 9px;
}
/* Великі числа — пропорційні цифри: tabular-nums на такому кеглі «розпирає» число. */
.tile .val { font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.5px; }
.tile .sub { color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: auto; padding-top: 7px; }
/* Головне число розділу — не лише більшим кеглем, а й тлом: на екрані з шести
   однакових плиток розмір читається як «довше число», а не як «важливіше». */
.tile.hero {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--acc-soft), transparent 62%), var(--card);
  border-color: rgba(47, 111, 237, .32);
}
.tile.hero .val { font-size: 44px; }

/* --- Плитка, яка кудись веде ---
   Плитка з переходом мусить відрізнятись від плитки-числа ДО дотику, а не
   після: інакше половину переходів ніхто не знайде, а друга половина стане
   несподіванкою. Тримає це стрілка в куті плюс зміна тла при наведенні —
   двома ознаками, бо на дотику наведення не буває взагалі. */
a.tile, button.tile {
  font: inherit; text-align: left; text-decoration: none; color: inherit;
  cursor: pointer; position: relative;
  transition: background .12s, border-color .12s;
}
.tile-go::after {
  content: '›';
  position: absolute; top: 8px; right: 12px;
  color: var(--muted); font-size: 17px; line-height: 1;
}
.tile-go:hover { background: var(--card-2); border-color: var(--line); }
.tile-go:hover::after { color: var(--txt); }
.tile-go:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.tile-go:active { transform: translateY(1px); }

/* Куди саме прокрутили. Секунда підсвітки — на довгій сторінці інакше
   незрозуміло, який із трьох схожих блоків мали на увазі. */
.chart-card.flash {
  animation: card-flash 1.2s ease-out;
}
@keyframes card-flash {
  from { box-shadow: 0 0 0 2px var(--acc); }
  to   { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-card.flash { animation: none; box-shadow: 0 0 0 2px var(--acc); }
  a.tile, button.tile { transition: none; }
}

/* --- Картка графіка --- */
/* min() у minmax обов'язковий. Голий `minmax(460px, 1fr)` на екрані вужчому за
   460 пікселів дає колонку в 460 пікселів — і сторінка починає їздити вбік
   цілком, разом із шапкою. Це не «незручно на телефоні», це зламана сторінка. */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
/* Не-картка серед карток (наприклад рядок про службові акаунти) — на всю
   ширину: у власній колонці вона виглядає як обрізана картка без рамки. */
.charts > *:not(.chart-card) { grid-column: 1 / -1; }
.chart-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px;
  min-width: 0;   /* інакше grid не дає SVG стискатись і сітка їде вбік */
}
.chart-card.wide { grid-column: 1 / -1; }
.chart-card h3 { margin: 0 0 3px; font-size: 15px; font-weight: 650; letter-spacing: -.1px; }
/* Пояснення обмежене по ширині: на 1400 пікселях рядок у 200 символів очі
   втрачають на переході до наступного, і підказку просто перестають читати. */
.chart-card .hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 14px; max-width: 95ch; }
.chart-card svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Легенда — завжди присутня при 2+ серіях: колір ніколи не єдиний носій сенсу. */
.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; font-size: 12px; }
.legend .item { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.legend .item.off { opacity: .35; }
.legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* --- Таблиця-двійник: кожне число доступне без наведення мишею --- */
.dash-table-wrap { overflow-x: auto; }
.dash table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash table th, .dash table td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
/* Шапка — дрібним і капітеллю: назва стовпчика має відрізнятись від значень
   формою, а не лише кольором, інакше перший рядок читається як ще один запис. */
.dash table th {
  color: var(--muted); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .5px;
  text-align: right; cursor: pointer; border-bottom-color: var(--line);
}
.dash table th:first-child, .dash table td:first-child { text-align: left; }
.dash table td { text-align: right; font-variant-numeric: tabular-nums; }
/* Підсвітка рядка під курсором. У таблиці на дев'ять стовпчиків без неї
   доводиться вести пальцем по екрану, щоб не з'їхати на сусідній рядок.
   Дерева виключені: там підсвітка вже своя, на рядках, які можна розгортати, і
   світити ще й розгорнутим вмістом означало б стерти межу «клікабельне —
   ні». */
.dash table:not(.tree-table) tbody tr:hover td { background: var(--card-2); }
.dash table tr.total td { font-weight: 600; border-top: 2px solid var(--line); border-bottom: none; }
.dash table tr.total { background: var(--sunken); }
.dash table .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; }
/* Таблиця плану у «Продажах» — текстова, а не числова: вирівнювання праворуч і
   заборона переносів тут ховали б half пояснення за краєм екрана. */
.dash table.text-table td { text-align: left; white-space: normal; }
.dash table.text-table th { text-align: left; cursor: default; }
.dash table.text-table td:first-child { width: 28px; color: var(--muted); }

/* --- Тултип --- */
.dash-tip {
  position: fixed; z-index: 50; pointer-events: none; opacity: 0;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px 10px; font-size: 12px; min-width: 140px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  transition: opacity .08s;
}
.dash-tip .t-title { font-weight: 600; margin-bottom: 6px; }
.dash-tip .t-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.dash-tip .t-row .k { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.dash-tip .t-row .v { font-variant-numeric: tabular-nums; }
.dash-tip .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* Оновлення даних: тримаємо попередній кадр приглушеним, без стрибка розмітки. */
.dash.loading .tiles, .dash.loading .charts { opacity: .45; }

/* --- Таблиця-звіт із розгортанням --- */
.tree-table td:first-child { white-space: nowrap; }
.tree-table tr.clickable { cursor: pointer; }
.tree-table tr.clickable:hover td { background: var(--card-2); }
.tree-pad { display: inline-block; }
.tree-arrow {
  display: inline-block; width: 14px; color: var(--muted); font-size: 11px;
  transition: transform .1s; transform-origin: 45% 50%;
}
.tree-arrow.open { transform: rotate(90deg); }
.tree-arrow.empty { opacity: 0; }
/* Рівні відрізняються вагою, а не кольором тексту: колір у цій таблиці
   зарезервований за каналами (кружечок біля назви). */
.tree-table tr.lvl0 td { font-weight: 600; }
.tree-table tr.lvl1 td { font-weight: 400; }
.tree-table tr.lvl2 td { color: var(--muted); }

/* Найглибший рівень — самі картки лідів. */
.lead-list-row td { background: var(--sunken); padding: 0; }
.lead-list { padding: 10px 14px 14px; overflow-x: auto; }
.lead-list table { font-size: 12px; }
.lead-list th, .lead-list td { text-align: left; }
.lead-list td { font-variant-numeric: normal; }
.lead-list .nowrap { white-space: nowrap; }
/* Коментар ліда: у згорнутому вигляді один рядок, у розгорнутому — абзац.
   max-width, щоб довгий коментар не розтягував таблицю по горизонталі. */
.lead-comment { max-width: 320px; cursor: default; }
/* Один рядок — але саме рядок, а не «скільки влізе й далі поверх сусідів»:
   без обрізання довгий коментар вилазив із max-width на колонку «Продажа». */
.lead-comment-short { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-comment-full { white-space: pre-wrap; cursor: pointer; }
/* Позначка мови коментаря. Це кнопка (клік повертає оригінал), тому вона
   помітна, але не голосніша за сам текст: читають текст, а не позначку. */
.lead-lang {
  float: right; margin: 0 0 2px 6px; padding: 0 6px;
  font: inherit; font-size: 10px; line-height: 16px;
  color: var(--muted); background: var(--card-2);
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
.lead-lang:hover { color: var(--txt); border-color: var(--acc); }

a.lead-link { color: var(--acc); text-decoration: none; }
a.lead-link:hover { text-decoration: underline; }
.pill { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11px; line-height: 18px; }
.pill.ok { background: #14301c; color: #6fd18a; border: 1px solid #235c33; }
.pill.no { background: #2a2024; color: #c98b96; border: 1px solid #5a3540; }
/* Стан показника у вкладці «Продажи». Колір тут ОЗНАЧАЄ стан (закритий доступ —
   це погано, а не просто інша категорія), тому береться зі статусної шкали, а
   не з палітри серій. */
.pill.state-ready    { background: #14301c; color: #6fd18a; border: 1px solid #235c33; }
.pill.state-partial  { background: #322a12; color: #e0b850; border: 1px solid #5c4a1f; }
.pill.state-blocked  { background: #331a1a; color: #e58a8a; border: 1px solid #6b2f2f; }
.pill.state-undefined{ background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }

/* --- Вкладка «Креативи» --- */
.cre-cell { display: flex; align-items: center; gap: 12px; text-align: left; }
/* Прев'ю з CDN Facebook: фіксований бокс, щоб рядки таблиці не стрибали
   по висоті через різні пропорції картинок. object-fit: cover обрізає, а не
   спотворює — квадратний бокс для вертикального відео інакше розтягував би
   картинку так, що креатив стає невпізнаваним. */
.cre-thumb-wrap { position: relative; flex: none; line-height: 0; }
.cre-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; background: var(--card-2); border: 1px solid var(--line);
  display: block;
}
.cre-thumb-wrap.big .cre-thumb { width: 400px; height: 100%; border-radius: var(--r-md); }
/* Значок відтворення: кадр із відео інакше не відрізнити від статики. */
.cre-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 9px; line-height: 22px; text-align: center; text-indent: 2px;
  pointer-events: none;
}
.cre-thumb-wrap.big .cre-play { width: 52px; height: 52px; font-size: 20px; line-height: 52px; }

a.cre-link { text-decoration: none; color: inherit; display: inline-block; }
a.cre-link:hover .cre-name { color: var(--acc); text-decoration: underline; }
a.cre-link:hover .cre-thumb { border-color: var(--acc); }

/* Шапка розгорнутого креативу */
.cre-head { display: flex; gap: 18px; align-items: flex-start; padding: 4px 0 6px; }
.cre-head-meta { min-width: 0; }
.cre-head-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
a.cre-open-link {
  display: inline-block; margin-top: 10px; color: var(--acc);
  text-decoration: none; border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 12px; font-size: 12px;
}
a.cre-open-link:hover { border-color: var(--acc); }
.cre-name { font-weight: 600; white-space: normal; max-width: 320px; }
.cre-sub { color: var(--muted); font-size: 11px; white-space: normal; max-width: 320px; }
.cre-badge {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px;
  background: #2a2418; border: 1px solid #5a4a1e; color: #f0d9a0; font-size: 11px;
}

.cre-badge.active{
  background: #182a19; border: 1px solid #235a1e; color: #6bdf96;
}
.cre-badge.off {
  background: var(--card-2); border: 1px solid #2c313c; color: var(--muted);
}
/* Бейдж поруч із назвою в дереві — не з нового рядка, як у картці. */
.tree-table .cre-badge { margin: 0 0 0 8px; vertical-align: middle; }
.camp-inline { margin-top: 2px; max-width: none; }

/* Рядок про виключені кампанії найму: не банер-попередження (це не збій),
   але й не невидимий — розбіжність із Ads Manager має бути пояснена. */
.cre-excluded { font-size: 12px; margin: -4px 0 12px; }

/* --- Ряд каналів на вкладці «Маркетинг» ---
   Стоїть окремим рядом під фільтрами: місяць і період спільні для всіх
   вкладок, а канал — лише для цієї, і змішувати їх в одну панель означало б
   натякати, що канал теж глобальний. */
nav.chan-tabs {
  flex-wrap: wrap; gap: 6px; margin: 0 0 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
/* Ряд усередині групи («Контекст» → Общее · Сайт · Телефония): дрібніший і без
   лінії, щоб було видно, що це підрівень, а не ще один рівнозначний ряд. */
nav.chan-tabs.sub {
  border-bottom: none; padding-bottom: 0; margin-bottom: 10px;
}
nav.chan-tabs.sub .tab { font-size: 12px; padding: 4px 10px; }
/* Рівні реклами всередині картки — відступ, бо над ними вже є заголовок. */
nav.ads-levels { margin: 2px 0 10px; }

/* Чіпи активних фільтрів провалювання: без них незрозуміло, чиї це групи
   й як повернутись назад. */
.ads-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ads-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 6px 3px 10px; font-size: 12px; color: var(--muted);
  max-width: 420px;
}
.ads-chip-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.ads-chip-x:hover { color: var(--txt); background: var(--line); }

/* --- Ціна ЦА по креативах: горизонтальні смуги ---
   Ліва колонка фіксованої ширини, щоб смуги починались на одній вертикалі:
   інакше довжину смуг не можна порівнювати очима, а саме заради порівняння
   блок і існує. */
/* Демографія Instagram: вік, стать і міста поруч, бо їх читають разом —
   «кому ми показуємось» це одне питання, а не три. Колонки самі стають у
   стовпчик на вузькому екрані. */
.ig-demo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px;
}
.ig-demo h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }

/* --- Вміст акаунта: публікації та коментарі --- */

/* Прев'ю поруч із назвою: у списку з десяти публікацій підпис упізнається
   гірше за картинку — тексти в них навмисно схожі. */
.ig-post-cell { display: flex; align-items: center; gap: 10px; text-align: left; white-space: normal; }
.ig-post-cell a, .ig-post-cell { max-width: 460px; }
.ig-thumb {
  width: 40px; height: 40px; flex: none; object-fit: cover;
  border-radius: 6px; background: var(--card-2); border: 1px solid var(--line);
}

/* Коментарі — єдине місце дашборду, де показують СЛОВА, а не числа. Тому
   список, а не таблиця: рядок таблиці ріже речення на півслові. */
.ig-comments { list-style: none; margin: 0; padding: 0; }
.ig-comments li {
  padding: 9px 0 9px 12px; border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
}
.ig-comments li:last-child { border-bottom: 0; }
/* Без відповіді — смугою збоку. Не червоним текстом: червоний текст читається
   як зіпсоване значення, а тут зіпсований не коментар, а те, що на нього не
   відповіли. */
.ig-comments li.no-answer { border-left-color: var(--warn); background: rgba(224, 163, 58, .05); }
.ig-c-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.ig-c-head b { font-size: 12.5px; }
.ig-c-body { margin-top: 3px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.cre-bars { display: grid; gap: 10px; padding: 4px 2px; }
.cre-bar-row {
  display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: center;
}
.cre-bar-head { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.cre-bar-txt { min-width: 0; }
.cre-bar-camp {
  color: var(--muted); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cre-bar-camp .cre-badge { margin: 0 0 0 6px; vertical-align: middle; }
.cre-bar-name {
  font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cre-noimg {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 6px;
}
.cre-bar-main { min-width: 0; }
.cre-bar-track { display: flex; align-items: center; gap: 8px; }
.cre-bar-fill {
  height: 22px; border-radius: 4px; background: var(--acc); min-width: 2px;
}
.cre-bar-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cre-bar-sub { color: var(--muted); font-size: 11px; margin-top: 3px; }
/* Друга половина шляху — стадії угоди. Інший тон, а не інший колір: це той
   самий шлях, просто далі по ньому, і читатись має як продовження. */
.cre-bar-fill.deal { background: #199e70; }
.funnel-split {
  margin: 16px 0 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}

/* --- Шлях по стадіях (Продажи → Обзор) ---
   Двадцять один рядок підряд: список, а не набір карток, тому рядок має бути
   щільним і читатись однією горизонталлю. Число винесене в окрему колонку
   сталої ширини — інакше воно висить одразу за смугою, і 450 та 9 опиняються в
   різних кінцях екрана, хоча порівнюють саме їх. */
.funnel-bars { gap: 1px; padding: 0; }
.funnel-bars .cre-bar-row {
  grid-template-columns: 290px minmax(0, 1fr); gap: 18px;
  padding: 7px 10px; margin: 0 -10px; border-radius: var(--r);
}
.funnel-bars .cre-bar-row:hover { background: var(--card-2); }
.funnel-bars .cre-bar-name { font-size: 13px; font-weight: 500; }
.funnel-bars .cre-bar-camp { margin-top: 3px; }
/* Смуги не розтягуються на всю ширину картки: на 1400 пікселях число після
   короткої смуги опинялось за півекрана від неї, і рядок доводилось вести
   очима вручну. Обмеження тримає смугу й число в одному погляді, а колонку
   чисел — усе ще вирівняною. */
.funnel-bars .cre-bar-main { max-width: 760px; }
.funnel-bars .cre-bar-track {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; gap: 12px; align-items: center;
}
.funnel-bars .cre-bar-val { text-align: right; font-size: 13px; }
.funnel-bars .cre-bar-fill {
  height: 16px; border-radius: 4px;
  background: linear-gradient(90deg, var(--acc), var(--acc-2));
}
.funnel-bars .cre-bar-fill.deal { background: linear-gradient(90deg, #199e70, #23c68d); }
.funnel-bars .cre-bar-sub { margin-top: 4px; }

/* Код стадії з Бітрікса. Моноширинний і в «ямі»: це ідентифікатор, який
   переносять у пошук копіюванням, а не текст, який читають. */
.stage-id {
  display: inline-block; padding: 0 5px; line-height: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .2px; color: var(--muted);
  background: var(--sunken); border: 1px solid var(--line-soft); border-radius: 4px;
}

@media (max-width: 900px) {
  /* Обидва селектори потрібні: у вужчого «.cre-bar-row» ваги менше, ніж у
     «.funnel-bars .cre-bar-row», і сам по собі він її не перебив би навіть
     звідси — медіазапит на специфічність не впливає. */
  .cre-bar-row, .funnel-bars .cre-bar-row { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Збільшення креативу при наведенні ---
   Вікно живе в <body>, бо прев'ю стоять у таблиці з горизонтальною прокруткою:
   збільшення «на місці» обрізалось би межами клітинки. */
.cre-thumb-wrap.zoomable { cursor: zoom-in; }
.cre-zoom {
  position: fixed; z-index: 60; width: 360px; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55); overflow: hidden;
}
.cre-zoom img { display: block; width: 100%; max-height: 460px; object-fit: contain; background: var(--sunken); }
.cre-zoom-cap { padding: 7px 10px; font-size: 11px; color: var(--muted); }
/* Розгорнутий рядок креативу: картки всередині таблиці не мають успадковувати
   вирівнювання по правому краю від td. */
.cre-detail { display: grid; gap: 12px; padding: 6px 0 12px; text-align: left; }
.cre-detail .chart-card { background: var(--sunken); }
.dash table tr.cre-open td { border-bottom: none; }
/* Місток між двома воронками: несе конверсію «клік → заявка», якої немає в
   жодній з них, бо вона саме між ними. */
.cre-bridge {
  color: var(--muted); font-size: 12px; padding: 2px 16px;
  border-left: 2px solid var(--line); margin-left: 16px;
}

/* ===================== Цілі місяця =====================
   Єдиний блок дашборду, який не лише показує, а й приймає введення. Стоїть
   першим на головній: питання «чи виконуємо план» важливіше за будь-який
   розріз, і відповідь на нього має бути видно без прокрутки. */
.tg-card { margin-bottom: 14px; }
.tg-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tg-head h3 { margin: 0; }
.tg-head .hint { margin: 0; flex: 1 1 320px; }
.tg-head .spacer { flex: 1; }
.tg-head button {
  border: 1px solid var(--line); background: var(--card-2); color: var(--txt);
  border-radius: var(--r); padding: 5px 12px; cursor: pointer; font-size: 12px;
}
.tg-head button:hover:not(:disabled) { border-color: var(--acc); }
.tg-head button:disabled { opacity: .5; cursor: default; }

.tg-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tg-table th {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 500; text-align: right; padding: 4px 8px;
}
.tg-table th:first-child, .tg-table .tg-name { text-align: left; }
.tg-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.tg-table tr:last-child td { border-bottom: none; }
.tg-fact { font-variant-numeric: tabular-nums; font-weight: 600; }
.tg-goal { font-variant-numeric: tabular-nums; color: var(--muted); width: 110px; }
.tg-pct  { font-variant-numeric: tabular-nums; width: 62px; }
.tg-goal input {
  width: 100%; background: var(--card-2); color: var(--txt); text-align: right;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12px;
}
.tg-goal input:focus { outline: none; border-color: var(--acc); }

/* Смуга виконання. Ширина — факт, засічка — темп: без другого перше нічого не
   означає, бо 67% на 10-е число і на 28-е — різні новини. */
.tg-bar-cell { width: 45%; }
.tg-bar {
  position: relative; display: block; height: 10px; border-radius: 5px;
  background: var(--sunken); border: 1px solid var(--line); overflow: visible;
}
.tg-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--s1); }
.tg-bar.done    .tg-fill { background: var(--s6); }
.tg-bar.ontrack .tg-fill { background: var(--s3); }
.tg-bar.behind  .tg-fill { background: var(--s2); }
.tg-pace {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--axis); border-radius: 1px;
}

/* Кольором позначається лише відставання: підсвічувати ще й норму означало б
   розфарбувати всю таблицю й тим сховати саме ті рядки, куди треба дивитись. */
.tg-users .tg-fact.behind { color: var(--s2); }
.tg-users .tg-fact.done   { color: var(--s6); }
.tg-inline-pct { color: var(--muted); font-size: 11px; margin-left: 6px; font-weight: 400; }
.tg-table tr.tg-sub th { font-size: 10px; text-transform: none; letter-spacing: 0; padding-top: 0; }
.tg-card details { margin-top: 12px; }
.tg-card summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* Попередження про неповноту даних. Не «помилка», а те, що варто знати перед
   тим, як вірити цифрі, — тому не червоне й не всередині таблиці. */
.warn-list {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.5;
}
.warn-list li {
    margin-bottom: .4rem;
    color: var(--muted);
}
.warn-list li::marker { color: #d9a441; }

/* Кнопка, яка виглядає посиланням. Потрібна там, де дія нікуди не веде за
   адресою, — drill-down живе всередині сторінки, і справжній <a> обіцяв би
   перехід, якого не буде. */
.linklike {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--acc-2);
    cursor: pointer;
    text-decoration: underline dotted;
}
.linklike:hover { text-decoration: underline; }

/* Спостереження. Колір несе значення (наскільки терміново), тому він тут на
   мітці, а не на всьому рядку: заливка на всю ширину читалась би як помилка. */
.insight-list { list-style: none; margin: 0; padding: 0; }
.insight { padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.insight:last-child { border-bottom: 0; }
.insight .sev {
    display: inline-block;
    margin-right: .5rem;
    padding: .05rem .4rem;
    border-radius: 3px;
    font-size: .75rem;
    text-transform: lowercase;
    background: rgba(255,255,255,.08);
}
.insight.sev-high .sev   { background: rgba(217,68,68,.22);  color: #ff9a9a; }
.insight.sev-medium .sev { background: rgba(217,164,65,.22); color: #f0c274; }
.insight.sev-low .sev    { background: rgba(90,180,120,.18); color: #8fd6a8; }

/* Стрічка подій клієнта. Час ліворуч фіксованою колонкою — щоб очі бігли по
   одній вертикалі, а не шукали початок кожного рядка. */
.timeline { list-style: none; margin: .3rem 0 0; padding: 0; }
.timeline li {
    display: grid;
    grid-template-columns: 9.5rem 1fr auto auto;
    gap: .6rem;
    align-items: baseline;
    padding: .3rem 0;
    border-left: 3px solid rgba(255,255,255,.12);
    padding-left: .6rem;
}
.timeline .tl-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .tl-sum  { font-variant-numeric: tabular-nums; }
.timeline .tl-who  { color: var(--muted); }
/* Колір = група події: реклама, сайт, заявка, розмови, угода, гроші. */
.timeline li.tl-traffic { border-left-color: #7a6cf0; }
.timeline li.tl-web     { border-left-color: #4aa3df; }
.timeline li.tl-lead    { border-left-color: #4fb477; }
.timeline li.tl-comms   { border-left-color: #d9a441; }
.timeline li.tl-deal    { border-left-color: #c46be0; }
.timeline li.tl-money   { border-left-color: #2ecc71; }

/* Хто зайшов. Поруч із «Выйти», приглушено: це довідка, а не дія. */
.whoami {
    margin-right: .6rem;
    color: var(--muted);
    font-size: .9rem;
}

/* ============================================================
   Телефонія, воронка угод, органіка.

   Три розділи, додані разом, і стилі в них спільні навмисно: фільтр-таблетка
   в телефонії й фільтр воронки — той самий елемент керування, і виглядати
   по-різному їм нема з чого.
   ============================================================ */

/* Фільтри-таблетки. Легші за кнопку: це не дія, а погляд під іншим кутом,
   і візуальна вага має це відображати. */
.tel-controls {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.tel-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: 4px 12px; font-size: 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--muted);
}
.chip:hover { border-color: var(--acc); color: var(--txt); }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.tel-search { min-width: 200px; }

/* Пропущений — не «помилка», а факт, який має чіплятися за око. Тому
   підсвічування смугою збоку, а не червоним текстом: червоний текст у
   таблиці читається як зіпсоване значення. */
tr.call-missed td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.dir { white-space: nowrap; font-size: 13px; }
.dir-in  { color: #4aa3df; }
.dir-out { color: var(--muted); }

/* Плеєр на всю ширину рядка: повзунок, який не вміщає сорок хвилин, не дає
   перемотати саме туди, куди треба. */
.tel-audio { width: 100%; max-width: 640px; margin: .35rem 0; }

/* Навантаження по годинах. Стовпчик = усі дзвінки години, темна частина
   знизу = пропущені: так видно не лише «коли дзвонять», а й «коли не беруть». */
.tel-hours {
  display: flex; align-items: flex-end; gap: 4px;
  height: 140px; padding-top: .5rem;
}
.tel-hour { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.tel-bar {
  width: 100%; margin-top: auto; min-height: 2px;
  background: var(--acc); border-radius: 3px 3px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tel-bar-missed { width: 100%; background: var(--danger); border-radius: 0 0 3px 3px; }
.tel-hour-label { font-size: 11px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- воронка угод */

.funnel-steps { display: flex; flex-direction: column; gap: .5rem; }
.funnel-step { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.funnel-name { font-size: 13px; }
.funnel-name .hint { display: block; font-size: 11px; }
.funnel-bar-wrap { display: flex; align-items: center; gap: .5rem; }
.funnel-bar {
  height: 22px; min-width: 2px; border-radius: 4px;
  background: var(--acc); transition: width .2s;
}
.funnel-count { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }

/* Семантика стадії — з порталу, не зі списку назв. Успіх і провал мають
   різнитись кольором: у довгому списку стадій назви зливаються. */
.sem-win  { color: var(--ok); }
.sem-lose { color: var(--danger); }
.sem-work { color: var(--txt); }
.funnel-step.sem-win  .funnel-bar { background: var(--ok); }
.funnel-step.sem-lose .funnel-bar { background: var(--danger); }

/* Шлях однієї картки. Вертикаль із крапками: кроки читаються згори вниз, як
   і сталися. */
.stage-trail { list-style: none; margin: 0; padding: 0; }
.stage-trail li {
  display: grid; grid-template-columns: 14px 1fr; gap: .6rem;
  align-items: start; padding: .35rem 0 .35rem .2rem;
  border-left: 2px solid var(--line); margin-left: 6px;
}
.stage-trail li:last-child { border-left-color: transparent; }
.stage-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--acc); margin-left: -7px; margin-top: .35rem;
}
.stage-trail li.sem-win  .stage-dot { background: var(--ok); }
.stage-trail li.sem-lose .stage-dot { background: var(--danger); }

/* ------------------------------------------------------------- органіка */

/* Прихід угору, відписки вниз від спільної осі. Одна шкала на обидві
   половини: інакше три відписки виглядали б як тридцять. */
.org-growth { display: flex; align-items: stretch; gap: 3px; height: 150px; }
.org-col { flex: 1 1 0; display: flex; flex-direction: column; }
.org-col-top    { flex: 1; display: flex; align-items: flex-end; }
.org-col-bottom { flex: 1; display: flex; align-items: flex-start; }
.org-axis { height: 1px; background: var(--line); }
.org-bar { width: 100%; min-height: 2px; }
.org-bar.up   { background: var(--ok);     border-radius: 3px 3px 0 0; }
.org-bar.down { background: var(--danger); border-radius: 0 0 3px 3px; }

/* ---------------------------------------------------------- путь клиента */

/* Блок одной заявки или сделки внутри пути. Отбивка слева полосой, а не
   рамкой: рамка на пяти блоках подряд превращает страницу в сетку, в которой
   не видно, что к чему относится. */
.path-block {
  border-left: 3px solid var(--line);
  padding: .1rem 0 .5rem .75rem;
  margin-bottom: 1rem;
}
.path-block:last-child { margin-bottom: 0; }
.path-head {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  margin-bottom: .35rem;
}
.path-head .hint { font-size: 12px; }

/* Слова менеджера: чего хотел, почему отсеяли. Единственное место во всём
   дашборде, где видно причину, а не число, — поэтому «яма», а не обычный
   абзац: глаз должен за неё цепляться. */
.path-words {
  background: var(--sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: .5rem .7rem;
  margin: .35rem 0 .6rem;
  font-size: 13px;
}
.path-words > div + div { margin-top: .25rem; }

/* ---------------------------------------------- воронка: втрати й звязки */

/* Втрата — головне число рядка, тому воно праворуч і червоне. Сховане в
   різницю двох чисел, воно вимагало б рахувати в умі, і його б не рахували. */
.funnel-drop {
  color: var(--danger);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  margin-left: .5rem;
}
/* Тонка вертикаль між кроками: показує, що це послідовність, а не список
   незалежних чисел. */
.funnel-link {
  grid-column: 2;
  width: 2px; height: 8px;
  background: var(--line);
  margin: 2px 0 0 0;
}
.funnel-verdict { margin: 0; font-size: 15px; line-height: 1.5; }

/* ------------------------------------------------------------ настройки */

.settings-list { display: flex; flex-direction: column; gap: 1rem; }
.settings-item { border-left: 3px solid var(--line); padding-left: .75rem; }
.settings-head {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  margin-bottom: .2rem;
}
.settings-head code { font-size: 12px; }
.settings-item pre { margin: .4rem 0 0; max-height: 260px; font-size: 12px; }
/* Крок воронки, що виріс. Не помилка: продажі рахуються по оплачених
   рахунках, а угоди — по картках, і рахунків у клієнта буває кілька. */
.funnel-gain {
  color: var(--ok);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  margin-left: .5rem;
}


/* Панель фільтрів списку заявок.
 *
 * Перенос рядків обов'язковий: фільтрів сім, і на ноутбуці вони не влазять в
 * один рядок. Без wrap вони або вилазять за картку, або стискаються в нечитабельні
 * огризки — а це екран, на якому люди працюють щодня.
 */
.leads-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.leads-filters input,
.leads-filters select,
.leads-filters button { min-height: 2.2rem; }


/* ============================================================
   ТЕЛЕФОН

   Дашборд відкривають з телефона не для того, щоб працювати, а щоб
   ПОДИВИТИСЬ: керівник між справами перевіряє, скільки продажів і чи не
   провалився день. Тому мета цього блоку — не втиснути таблицю на 15 колонок
   у 390 пікселів (це неможливо й не потрібно), а зробити так, щоб число можна
   було знайти й прочитати, а сторінка не їздила вбік цілком.

   Розкладка на широкому екрані навмисно не чіпається: усе нижче живе за
   медіазапитом і на ноутбуці не діє.
   ============================================================ */

/*
 * Безпечні зони — для вікна застосунку, поставленого на робочий стіл: там
 * немає адресного рядка, і сторінка сама заходить під «чубчик» і під смугу
 * жестів.
 *
 * УСЕ ЦЕ — ВСЕРЕДИНІ МЕДІАЗАПИТУ, і не для краси. На великому екрані
 * `env(safe-area-inset-*)` дорівнює нулю, тож правило начебто нешкідливе — але
 * воно перебиває власні відступи блоків, і `padding: 14px 24px` шапки
 * перетворюється на нуль ліворуч. Безпечна зона стосується телефона, тому й
 * питати про неї треба разом із телефоном.
 *
 * max() обов'язковий з тієї ж причини: без нього нульова зона з'їдає звичайний
 * відступ, і на прямокутному екрані без вирізу текст лягає впритул до краю.
 */
@media (display-mode: standalone), (display-mode: fullscreen) {
  /* Статусний рядок телефона лежить ПОВЕРХ сторінки
     (apple-mobile-web-app-status-bar-style=black-translucent), тож перший
     елемент має відступити — інакше маскот опиняється під годинником. */
  .nika-side { padding-top: env(safe-area-inset-top, 0px); }
}

@media (max-width: 700px) {
  /* --- Смуга розділів ---
     Розділів п'ятнадцять, і в жодне меню на телефоні вони не влазять. Тому
     рядок, що прокручується вбік, — той самий прийом, що в стрічках
     соцмереж: людина вже знає, що такий рядок треба гортати. Ховати
     навігацію за бургером було б гірше: два дотики замість одного до
     КОЖНОГО розділу. */
  .nika-side { gap: 0; padding-right: 0; }
  /* Прокручується саме список, а не сайдбар: у .nika-nav є overflow-y,
     і браузер через це робить прокручуваною й горизонталь. Маскот при
     цьому лишається на місці ліворуч — і добре, він як мітка вкладки. */
  .nika-nav { scroll-snap-type: x proximity; }
  /* Маскот лишається (по ньому впізнають вкладку), а підпис «Ника / дашборд»
     іде: назва застосунку є на робочому столі й у шапці, а тут вона з'їдала б
     третину смуги, у якій і так тісно. */
  .nika-brand { padding: 8px 6px 8px 10px; }
  .nika-brand-txt { display: none; }
  .nika-logo { width: 34px; height: 34px; }
  .nika-nav { padding: 6px 2px; gap: 0; }
  /* 44 пікселі — не «щоб гарніше»: менша ціль на дотик промахується, і людина
     потрапляє в сусідній розділ. */
  .nika-nav-item { padding: 11px 12px; min-height: 44px; scroll-snap-align: center; }
  .nika-nav-item svg { display: none; }   /* іконка тут нічого не додає до слова */
  /* Ім'я й роль ховаємо, кнопку виходу лишаємо: вона єдина в застосунку. */
  .nika-user { padding: 6px 8px; gap: 6px; border: 0; }
  .nika-user-txt { display: none; }

  /* --- Шапка розділу ---
     Липка шапка на телефоні — це податок з кожного екрана, тож вона має бути
     низькою. Назва розділу дрібнішає, пояснення під нею зникає (воно для
     першого знайомства, а не для щоденного погляду), а керування періодом
     стає окремим рядком, який гортається вбік одним рухом. */
  .nika-top { gap: 8px 10px; padding: 10px 14px; }
  .nika-title { margin-right: 0; flex: 1 1 100%; padding-right: 42px; }
  .nika-title h1 { font-size: 17px; }
  .nika-title p { display: none; }
  .nika-who { width: 32px; height: 32px; font-size: 11px;
              position: absolute; top: 8px; right: max(12px, env(safe-area-inset-right, 0px)); }
  .nika-tools {
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto;
    gap: 6px; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nika-tools::-webkit-scrollbar { display: none; }
  .nika-chip { flex: none; }
  /*
   * 16 пікселів — не про читабельність, а про поведінку Safari: поле з
   * дрібнішим шрифтом він при дотику ПРИБЛИЖАЄ сторінку, і після вибору дати
   * дашборд лишається збільшеним і з'їхавшим убік. Повернути масштаб можна
   * лише вручну, і виглядає це як поламана верстка.
   */
  .nika-chip select, .nika-chip input,
  .leads-filters input, .leads-filters select,
  .dash input, .dash select, .dash textarea { font-size: 16px; }

  .nika-body { padding: 12px 14px 32px; }
  /* Службові позначки: тісніше й дрібніше — це примітки, а не показники.
     Годинник прибираємо зовсім: на телефоні час є в статусному рядку, і
     другий, намальований застосунком, — це просто зайнятий рядок екрана. */
  .nika-meta { gap: 4px 12px; margin-bottom: 10px; }
  .dash-stamp { font-size: 11px; }
  .nika-meta .spacer, .nika-clock { display: none; }

  /* --- Числа ---
     Плитки по дві в ряд: одна на весь екран перетворює зведення на довгий
     сувій, а три не лишають місця числу. */
  .tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: 8px; }
  .tile { padding: 11px 12px; }
  .tile .val { font-size: 21px; }
  .tile.hero .val { font-size: 30px; }
  .tile .sub { font-size: 11px; }

  .charts { gap: 12px; }
  .chart-card { padding: 14px 12px; border-radius: var(--r-md); }
  .chart-card h3 { font-size: 14px; }
  .chart-card .hint { font-size: 11.5px; margin-bottom: 10px; }

  /* --- Таблиці ---
     Звужувати їх нема куди: 15 колонок — це 15 колонок. Лишається дати
     прокрутку вбік і ПОКАЗАТИ, що вона є: світлий серпанок при краю, який сам
     зникає, коли гортати вже нікуди. Без нього половина таблиці просто не
     існує для того, хто не здогадався провести пальцем.

     Серпанок саме СВІТЛИЙ, хоч класичний прийом — тінь. Тінь тут чорна на
     майже чорному: механізм працює, видно його не буває. Тримає ж усе не
     колір, а порядок шарів — дві латки кольору картки лежать ПОВЕРХ серпанку
     й їдуть разом із вмістом, тож на кінці прокрутки вони його й закривають. */
  .dash-table-wrap {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--card) 30%, rgba(18, 23, 33, 0)) left center / 22px 100% no-repeat,
      linear-gradient(to left,  var(--card) 30%, rgba(18, 23, 33, 0)) right center / 22px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(126, 138, 162, .30), rgba(126, 138, 162, 0)) left center / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(126, 138, 162, .30), rgba(126, 138, 162, 0)) right center / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .dash table { font-size: 12px; }
  .dash table th, .dash table td { padding: 7px 9px; }

  /* Смуги й воронки: підпис над смугою, а не поруч. У дві колонки на 390
     пікселях назві лишається сантиметр, і вона стає багатокрапкою. */
  .funnel-bars .cre-bar-row, .funnel-step { grid-template-columns: 1fr; gap: 5px; }
  .funnel-bars .cre-bar-main { max-width: none; }

  .leads-filters { gap: .45rem; }
  .lead-comment { max-width: 220px; }
  .cre-name, .cre-sub { max-width: 200px; }
  .cre-thumb-wrap.big .cre-thumb { width: 220px; }

  /* Список лідів має власну прокрутку (.lead-list, не .dash-table-wrap) —
     тінь краю йому теж потрібна, але тлом тут «яма», а не картка. */
  .lead-list {
    background:
      linear-gradient(to right, var(--sunken) 30%, rgba(11, 14, 21, 0)) left center / 22px 100% no-repeat,
      linear-gradient(to left,  var(--sunken) 30%, rgba(11, 14, 21, 0)) right center / 22px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(126, 138, 162, .30), rgba(126, 138, 162, 0)) left center / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(126, 138, 162, .30), rgba(126, 138, 162, 0)) right center / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /*
   * Безпечні зони — В САМОМУ КІНЦІ запиту, і це не випадковість. Вище стоять
   * правила з коротким `padding` (шапка, смуга розділів); опинившись перед
   * ними, ці рядки просто перекривалися б, і на iPhone із вирізом текст знову
   * ліз би під заокруглення екрана.
   */
  .nika-side, .nika-top { padding-left: max(10px, env(safe-area-inset-left, 0px)); }
  .nika-top { padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .nika-body {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  }
}

/* Збільшення креативу при наведенні — миші не існує на телефоні, а
   :hover там імітується дотиком: картинка спливала б від випадкового
   тику й лишалась висіти. */
@media (hover: none) {
  .cre-zoom { display: none; }
  .cre-thumb-wrap.zoomable { cursor: default; }
}


/* --- Пропозиція поставити панель на робочий стіл ---
   Показується лише на телефоні й лише поки не встановлено — див.
   app/src/pwa/InstallBanner.tsx. Виглядає як картка, а не як банер реклами:
   це частина панелі, а не оголошення поверх неї. */
.nika-install {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin: 0 0 12px;
  background: var(--card); border: 1px solid var(--acc); border-radius: var(--r-md);
}
.nika-install-icon {
  width: 36px; height: 36px; flex: none; border-radius: 9px;
  background: var(--card-2) url('?action=asset&name=nika-avatar.webp') center/cover no-repeat;
}
.nika-install-txt { min-width: 0; flex: 1; line-height: 1.3; }
.nika-install-txt b { display: block; font-size: 13px; }
.nika-install-txt span { font-size: 11.5px; color: var(--muted); }
.nika-install-go {
  flex: none; padding: 9px 14px; min-height: 40px; border-radius: var(--r);
  border: 0; background: var(--acc); color: #fff; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.nika-install-go:active { background: var(--acc-2); }
.nika-install-x {
  flex: none; padding: 6px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 12px; cursor: pointer;
}