/* boards.css — дизайн-стандарт Bezdor Boards (ТЗ 16.10.2026, ст. 3).
 *
 * Правила, які тут зашиті й не обговорюються в кожному борді окремо:
 *  - шрифти: IBM Plex Sans (текст), IBM Plex Mono (усі числа — у таблицях і KPI);
 *  - акцент teal #0E7C66 (спадок PriceFlow), фон світлий, текст майже чорний;
 *  - семантика кольору: зелений «краще», червоний «гірше», жовтий — попередження про дані,
 *    СІРИЙ — «не визначено / без групи / поза довідником» (службові рядки завжди сірі й унизу);
 *  - темної теми немає навмисно (рішення 6.5 ТЗ) — і color-scheme:light, щоб браузер не інвертував;
 *  - графіки: один акцентний колір для поточного періоду, світло-сірий для порівняльного;
 *  - телефон — не «як вийде»: меню в бургер, шапка в один рядок, таблиці горизонтально
 *    прокручуються всередині себе, сторінка по горизонталі не їде.
 *
 * Компоненти самих бордів (Період·Крок·Порівняти, KPI, графіки, таблиці) живуть у board-kit.js
 * і спираються на змінні нижче — тому колір міняється тут, в одному місці.
 */

:root {
  --bg: #F4F3EE;
  --surface: #FFFFFF;
  --sidebar: #171B21;
  --sidebar-hi: #232A33;
  --ink: #1A1E24;
  --muted: #71757C;
  --faint: #9A9DA3;
  --line: #E6E4DC;
  --line-soft: #EFEDE6;
  --accent: #0E7C66;
  --accent-soft: #E3F1ED;
  --ok: #15803D;
  --ok-bg: #E7F4EC;
  --warn: #B45309;
  --warn-bg: #FBF0DC;
  --bad: #BE2D24;
  --bad-bg: #FBE9E7;
  --blue: #1F6FA8;
  --blue-bg: #E5F0F7;
  --violet: #6D4FB0;
  --violet-bg: #ECE7F6;
  /* порівняльний період на графіках — завжди цей сірий, ніколи другий акцент */
  --compare: #CFCEC6;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --top-h: 52px;
  --side-w: 244px;
  --gutter: 16px; /* бічний відступ на телефоні */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* hidden має вимикати елемент завжди. Без цього будь-яке наше display:… перебиває атрибут
   (бо правило автора сильніше за стиль браузера) — і «схований» блок лишається поверх
   сторінки й ловить кліки. Саме так екран входу перекривав застосунок після входу. */
[hidden] { display: none !important; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: var(--accent); }

/* ─────────────────────────────── Шапка ─────────────────────────────── */

.top {
  position: fixed; inset: 0 0 auto 0; height: var(--top-h); z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px 0 10px;
  background: var(--sidebar); color: #C9CCD1;
  border-bottom: 1px solid #000;
}
.burger {
  display: none; border: none; background: none; color: #C9CCD1;
  font-size: 19px; line-height: 1; padding: 8px 10px; cursor: pointer; border-radius: 8px;
}
.burger:hover { background: var(--sidebar-hi); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--accent); flex: none; }
.brand-mark { display: grid; place-items: center; }
.brand-name { color: #fff; font-weight: 600; font-size: 14.5px; letter-spacing: -.2px; white-space: nowrap; }

.top-site { display: flex; align-items: center; gap: 6px; flex: none; }
.top-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-user { flex: none; display: flex; align-items: center; gap: 8px; }

/* Пілюля в шапці (сайт, користувач) — на темному тлі */
.toppill {
  position: relative; font: inherit; font-size: 12.5px;
  border: 1px solid #343B45; background: #1E242C; color: #D7DADF;
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.3;
}
.toppill:hover { border-color: #49515D; }
.toppill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.toppill .caret { opacity: .6; font-size: 10px; }
.toppill.ghost { background: none; border-color: transparent; }
.avatar {
  width: 27px; height: 27px; border-radius: 50%; background: #3A424D;
  display: grid; place-items: center; font-size: 11.5px; color: #fff; font-weight: 600; flex: none;
}

/* Період · Крок · Порівняти у верхній панелі: board-kit.js переносить сюди поля борда.
   На великому екрані вони стоять рядком, кнопка-перемикач не потрібна; на телефоні
   лишається одна кнопка «Період», а поля розкриваються панеллю під шапкою. */
#boardControls .bc-toggle { display: none; }
#boardControls .bc-panel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#boardControls select,
#boardControls input[type=date] {
  background: #1E242C; color: #E3E6EA; border: 1px solid #343B45; font-size: 12.5px; padding: 5px 8px;
}
#boardControls select:focus, #boardControls input:focus { border-color: var(--accent); }
#boardControls .pb-lbl, #boardControls .pb-cmp { color: #A7ACB4; font-size: 11.5px; }
#boardControls .pb-pill {
  border: 1px solid #343B45; background: #1E242C; color: #D7DADF; border-radius: 8px; padding: 5px 10px; font-size: 12.5px;
}
#boardControls .pb-pill.on { background: #2A313B; }
#boardControls option { background: #1E242C; color: #E3E6EA; }

/* ─────────────────────────────── Каркас ─────────────────────────────── */

.shell { display: grid; grid-template-columns: var(--side-w) 1fr; height: 100vh; padding-top: var(--top-h); }
.side {
  background: var(--sidebar); color: #C9CCD1;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 3px;
  overflow-y: auto; overscroll-behavior: contain;
}
.side-foot {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px; border-top: 1px solid #262B33;
}
.side-ver { color: #6B7079; font-size: 10.5px; font-family: var(--mono); }
.side-backdrop { display: none; }

.navlbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: #5E636B; padding: 12px 10px 6px; font-weight: 600;
}
.nav {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  cursor: pointer; color: #B5B9BF; font-weight: 500; font-size: 13.5px; transition: .15s;
  border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.nav:hover, .nav.active { background: var(--sidebar-hi); color: #fff; }
.nav.active { box-shadow: inset 2px 0 0 var(--accent); }
.nav .ic { width: 17px; text-align: center; opacity: .85; font-size: 15px; flex: none; }
a.nav { text-decoration: none; }

.content { padding: 18px 26px 64px; overflow-y: auto; min-width: 0; }
.page-head { margin-bottom: 14px; }
.page-head h1 { font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
.page-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 2px; }
.page-fresh { display: inline-flex; align-items: center; gap: 5px; }
.page-fresh .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.page-fresh.bad .dot { background: var(--bad); }
.page-fresh.warn .dot { background: var(--warn); }

.page { display: none; animation: fade .22s ease; }
.page.show { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } }

/* ────────────────────────── Базові елементи ────────────────────────── */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.panel h3 .ic { color: var(--accent); }

.btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  padding: 8px 14px; font-family: var(--sans); font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--ink); transition: .15s;
}
.btn:hover { border-color: #cfccc2; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: #0a6553; }
.btn.sm, .btn-sm { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.danger { color: var(--bad); border-color: #EBD3D0; }

.sel, .inp, select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date] {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  font-family: var(--sans); font-size: 13px; background: var(--surface); color: var(--ink);
}
select:focus, input:focus { outline: none; border-color: var(--accent); }
textarea { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }

.mono { font-family: var(--mono); }
.dim { color: var(--muted); }
/* Службовий рядок: «Не визначено», «Без групи», «Поза довідником», «Не сегментовані».
   Завжди сірий і завжди внизу таблиці — щоб його не читали як звичайну категорію. */
.svc, .pb-tbl tr.svc td { color: var(--faint); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; color: var(--muted); background: var(--surface);
}
.chip.ok { color: var(--ok); background: var(--ok-bg); border-color: #CDE7D7; }
.chip.warn { color: var(--warn); background: var(--warn-bg); border-color: #F0DEBE; }
.chip.bad { color: var(--bad); background: var(--bad-bg); border-color: #F0D2CF; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat .l { font-size: 11.5px; color: var(--muted); }
.stat .v { font-family: var(--mono); font-size: 22px; font-weight: 600; margin-top: 3px; }

.tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; font-size: 12.5px; }
th { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ───────────────── Стани борда (ТЗ ст. 3.4) ───────────────── */

/* Жовта смуга під заголовком: «для цього сайту немає GA4», застарілі дані тощо. */
.b-warnbar {
  font-size: 12.5px; color: #8A5A12; background: #FBF3E3; border: 1px solid #F0DEBE;
  border-radius: 8px; padding: 7px 12px; margin-bottom: 12px;
}
.b-badbar {
  font-size: 12.5px; color: var(--bad); background: var(--bad-bg); border: 1px solid #F0D2CF;
  border-radius: 8px; padding: 7px 12px; margin-bottom: 12px;
}
/* Порожній стан — пояснення + дія, а не просто «немає даних». */
.b-empty { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 30px 24px; text-align: center; }
.b-empty b { display: block; font-size: 15px; margin-bottom: 6px; }
.b-empty p { color: var(--muted); font-size: 13px; margin: 0 auto 14px; max-width: 460px; }
/* Скелетони: на місці KPI й графіка, без спінера на весь екран. */
.b-skel { background: linear-gradient(90deg, #EDEBE4 25%, #F6F5F0 50%, #EDEBE4 75%); background-size: 400% 100%;
  animation: bskel 1.1s ease-in-out infinite; border-radius: 8px; }
.b-skel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.b-skel-kpi { height: 78px; }
.b-skel-chart { height: 220px; }
@keyframes bskel { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .b-skel { animation: none; } }

/* Підвал борда: якими джерелами зібрано, якість даних, виноски до чисел. */
.b-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.b-foot .b-foot-t { font-weight: 600; color: var(--ink); }
.b-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.b-foot .note { color: var(--warn); }

/* ───────────────────────────── Вхід ───────────────────────────── */

.login-wrap { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; padding: var(--gutter); }
.login-card {
  width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.login-note { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.fld input { font-size: 14px; }
.login-err { font-size: 12.5px; color: var(--bad); background: var(--bad-bg); border-radius: 8px; padding: 7px 10px; }

/* ───────────────────────── Телефон і планшет ───────────────────────── */

@media (max-width: 920px) {
  .burger { display: block; }
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; top: var(--top-h); bottom: 0; left: 0; width: 272px; z-index: 25;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 14px rgba(0, 0, 0, .25);
  }
  body.side-open .side { transform: none; }
  body.side-open .side-backdrop { display: block; position: fixed; inset: var(--top-h) 0 0 0; z-index: 20; background: rgba(0, 0, 0, .35); }
  .content { padding: 14px var(--gutter) 56px; }
  .brand-name { display: none; }
  /* Шапка стискається в один рядок: лишаються дві кнопки — «Сайт» і «Період» */
  .top-controls { gap: 6px; }
  #boardControls { position: relative; }
  #boardControls .bc-toggle { display: inline-flex; }
  #boardControls .bc-panel {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 28;
    background: var(--sidebar); border: 1px solid #343B45; border-radius: 10px;
    padding: 10px; min-width: 232px; flex-direction: column; align-items: stretch;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }
  #boardControls.open .bc-panel { display: flex; }
  #boardControls .bc-panel select, #boardControls .bc-panel .pb-pill { width: 100%; }
  .page-head h1 { font-size: 17px; }
  .panel { padding: 14px; border-radius: 10px; }
  /* Таблиця прокручується всередині свого блоку, а не тягне всю сторінку */
  .tablewrap, .pb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 560px) {
  :root { --top-h: 48px; }
  .top { gap: 8px; padding: 0 10px 0 4px; }
  .top-user .uname { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat .v { font-size: 19px; }
}