/* 2026-08-01 — Стилі інтерфейсу аналітики Inovis. Змінено: метрики й типографіку
   вирівняно за затвердженим макетом — рейка з групами й іконками, панелі з
   шапкою і без тіні, підсумок сіткою, таблиця 13.5px із teal-стрілками. */

:root {
  --navy:#1B2A4A; --navy-deep:#142038; --navy-lift:#243758;
  --teal:#1FC8C2; --teal-ink:#0E8A86; --teal-soft:#E3F7F6;

  --ground:#F5F7FA; --surface:#FFFFFF; --sunken:#EDF0F5;
  --line:#E1E6EE; --line-strong:#CDD5E1;
  --ink:#16202F; --ink-2:#485468; --ink-3:#78849A;

  --pos:#2E9E6B; --warn:#C8891A; --neg:#D2544A;
  --pos-soft:#E6F4EC; --neg-soft:#FBE9E7;
  --on-teal:#FFFFFF;

  --font-ui: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace;

  --r-s:6px; --r-m:10px; --r-l:14px;
  --shadow:0 1px 2px rgba(20,32,56,.06), 0 8px 24px -12px rgba(20,32,56,.18);
  --rail-w:224px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0E1522; --surface:#18212F; --sunken:#131B27;
    --line:#26303F; --line-strong:#354153;
    --ink:#E7EDF5; --ink-2:#A9B5C6; --ink-3:#7D8A9D;
    --teal-soft:#123A3C; --teal-ink:#3FD8D2; --on-teal:#08161C;
    --pos-soft:#122C22; --neg-soft:#301A18;
    /* На темному тлі зелений і червоний із світлої теми глухнуть — світлішаємо. */
    --pos:#4CC38A; --neg:#E8776D;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button, input, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }

/* ─── Вхід / зміна пароля ───────────────────────────────────────── */
/* Сцена входу — навіть до входу людина бачить бренд: navy з теплим
   teal-сяйвом згори, а не нейтральне сіре тло. */
.gate {
  min-height:100vh; display:grid; place-items:center; padding:44px 20px;
  background:
    radial-gradient(680px 340px at 50% -10%, rgba(31,200,194,.16), transparent 70%),
    var(--navy);
}
.gate[hidden] { display:none; }
.gate-box {
  width:100%; max-width:352px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-l);
  padding:30px 28px 26px; display:flex; flex-direction:column; gap:16px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);
}
.gate-box h1 { margin:0; font-size:17px; font-weight:650; letter-spacing:-.01em; }
.gate-box h3 { margin:0; font-size:14px; font-weight:500; color:var(--ink-2); }
.gate-box .hint { margin:-10px 0 0; font-size:13px; color:var(--ink-3); }
.mark { display:flex; align-items:center; gap:11px; }
.mark svg { flex:none; }
.mark span { display:flex; flex-direction:column; line-height:1.25; }
.mark b { font-size:17px; font-weight:650; letter-spacing:-.01em; }
.mark em {
  font-style:normal; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; color:var(--teal-ink);
}
.field { display:flex; flex-direction:column; gap:6px; }
.field label {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.field input {
  font-size:14.5px; padding:10px 12px; color:var(--ink);
  background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-s);
}
.field input:focus-visible { outline:2px solid var(--teal); outline-offset:1px; background:var(--surface); }
.field small { font-size:11px; color:var(--ink-3); }
.btn-primary {
  font-size:14.5px; font-weight:600; padding:11px; cursor:pointer;
  border:0; border-radius:var(--r-s); background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:hover { background:var(--navy-lift); }
.btn-primary:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.login-foot { font-size:12px; color:var(--ink-3); text-align:center; }
.ghost {
  padding:5px 10px; font-size:12px; cursor:pointer; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
}
.ghost:hover { border-color:var(--teal); color:var(--teal-ink); }
.error { margin:0; min-height:18px; font-size:12.5px; color:var(--neg); }

/* ─── Каркас ────────────────────────────────────────────────────── */
.app { display:flex; min-height:100vh; background:var(--ground); }
.app[hidden] { display:none; }

.rail {
  width:var(--rail-w); flex:none; display:flex; flex-direction:column;
  padding:16px 12px; gap:18px;
  background:var(--navy); color:#C9D4E6;
}
.rail-mark { display:flex; align-items:center; gap:9px; padding:0 4px; }
.rail-mark span { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.rail-mark b { color:#fff; font-size:16px; font-weight:650; letter-spacing:-.01em; }
.rail-mark i {
  font-style:normal; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.07em; color:#5E7BA8; white-space:nowrap;
}
.rail-scroll { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.rail-group { display:flex; flex-direction:column; gap:1px; }
.rail-group > em {
  font-style:normal; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:#6E80A0;
  padding:6px 8px 4px;
}
.nav {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  padding:8px 9px; font-size:13.5px; line-height:1.35; color:#C9D4E6;
  background:none; border:none; border-radius:var(--r-s); position:relative;
}
.nav svg { flex:none; opacity:.75; }
.nav:hover { background:#22345699; color:#fff; }
.nav[aria-current="true"] { background:var(--navy-lift); color:#fff; font-weight:550; }
.nav[aria-current="true"] svg { opacity:1; color:var(--teal); }
.nav[aria-current="true"]::before {
  content:""; position:absolute; left:-12px; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:var(--teal);
}
.rail-foot {
  display:flex; align-items:center; gap:8px;
  margin-top:auto; padding:8px 6px 2px; border-top:1px solid #2A3C5E;
}
.rail-foot > div { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.rail-foot b { color:#fff; font-size:13px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-foot small { color:#7386A6; font-size:11px; }
.railout {
  display:grid; place-items:center; flex:none; cursor:pointer;
  padding:6px; color:#8CA0C2; background:none; border:0; border-radius:var(--r-s);
}
.railout:hover { background:rgba(255,255,255,.09); color:#fff; }
.sheet-top .railout { color:var(--ink-2); }
.sheet-top .railout:hover { background:var(--sunken); color:var(--ink); }

.work { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ─── Верхня смуга ──────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 20px; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.titleblk { display:flex; flex-direction:column; line-height:1.25; margin-right:auto; min-width:0; }
.titleblk b { font-size:16px; font-weight:640; letter-spacing:-.01em; }
.titleblk small { font-size:12px; color:var(--ink-3); }
.burger {
  display:none; width:32px; height:30px; flex:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:3.5px; padding:0 8px;
  background:none; border:1px solid var(--line); border-radius:var(--r-s);
}
.burger i { height:1.7px; background:var(--ink-2); border-radius:2px; }

.seg {
  display:flex; background:var(--sunken); border:1px solid var(--line);
  border-radius:var(--r-s); padding:2px;
}
.seg button {
  padding:5px 11px; font-size:12.5px; cursor:pointer; color:var(--ink-2);
  background:none; border:none; border-radius:4px; white-space:nowrap;
}
.seg button:hover { color:var(--ink); }
.seg button[aria-pressed="true"] {
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:0 1px 2px rgba(20,32,56,.12);
}

.dates { display:inline-flex; gap:6px; }
.dates[hidden] { display:none; }
.dates input, .minisel {
  padding:6px 9px; font-size:12.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
}
.minisel { cursor:pointer; max-width:190px; }
.minisel[hidden] { display:none; }

.chipbtn {
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px;
  font-size:12.5px; cursor:pointer; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
}
.chipbtn:hover { border-color:var(--line-strong); }
.chipbtn svg { color:var(--teal-ink); }
.chipbtn .count {
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--teal-ink);
  background:var(--teal-soft); border-radius:20px; padding:1px 7px;
}
.picker { position:relative; }
.pop {
  position:absolute; top:calc(100% + 6px); right:0; z-index:30;
  width:250px; max-height:340px; overflow:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--shadow);
  padding:6px; display:flex; flex-direction:column; gap:1px;
}
.pop[hidden] { display:none; }
.pop-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 8px 8px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.pop-head em {
  font-style:normal; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.linkbtn {
  padding:0; font-size:12px; cursor:pointer; color:var(--teal-ink);
  background:none; border:none; text-decoration:underline;
}
.pop-body { display:flex; flex-direction:column; gap:1px; }
.pop label {
  display:flex; align-items:center; gap:9px; padding:6px 8px;
  border-radius:var(--r-s); cursor:pointer; font-size:13.5px;
}
.pop label:hover { background:var(--sunken); }
.pop input[type="checkbox"] { accent-color:var(--teal-ink); width:15px; height:15px; }

/* Смуга періоду — тільки телефон */
.periodbtn { display:none; }

/* ─── Полотно ───────────────────────────────────────────────────── */
.canvas { flex:1; padding:18px 20px 26px; display:flex; flex-direction:column; gap:16px; }
.panel {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden;
}
.panel[hidden] { display:none; }
.panel-head {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line);
}
.panel-head b { font-size:13.5px; font-weight:640; }
.panel-head .spacer { flex:1; }

/* Підсумок перед деталями — рядок ВСЬОГО, розкладений картками */
.summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(158px, 1fr)); gap:12px; }
.summary[hidden] { display:none; }
.stat {
  padding:12px 14px; display:flex; flex-direction:column; gap:3px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
}
.stat em {
  font-style:normal; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.stat b { font-size:23px; font-weight:640; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
/* Текстова картка (назва позиції-лідера) — довгий рядок не має ламати сітку */
.stat b.txt {
  font-size:15px; line-height:1.3; letter-spacing:0; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.stat small { font-size:11.5px; color:var(--ink-3); }
/* Зміна до попереднього періоду. Колір тут — семантика числа (зросло/впало),
   тому бірюза бренду сюди не заходить. */
.stat .delta {
  font-size:12px; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:4px; cursor:default;
}
.stat .delta.up { color:var(--pos); }
.stat .delta.down { color:var(--neg); }
.stat .delta.flat { color:var(--ink-3); }

/* Таблиця */
.tablescroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:13.5px; }
th, td { padding:9px 14px; white-space:nowrap; border-bottom:1px solid var(--line); }
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; }
th.txt, td.txt { text-align:left; }
th {
  position:sticky; top:0; z-index:1; background:var(--surface); cursor:pointer;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  user-select:none; border-bottom:1px solid var(--line-strong);
}
th:hover { color:var(--teal-ink); }
th[aria-sort] { color:var(--teal-ink); }
th[aria-sort="descending"]::after { content:" ↓"; color:var(--teal-ink); }
th[aria-sort="ascending"]::after  { content:" ↑"; color:var(--teal-ink); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--sunken); }
tbody tr.total {
  font-weight:650; background:var(--sunken);
  border-top:1px solid var(--line-strong);
}
tbody tr.total:hover { background:var(--sunken); }

.chartbox { padding:16px 14px 10px; }
.chartbox svg { width:100%; height:auto; display:block; margin:0 auto; }
.chartbox svg.donut { max-width:340px; }
.legend {
  display:flex; flex-wrap:wrap; gap:14px; padding:10px 4px 4px;
  font-size:12.5px; color:var(--ink-2);
}
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }

/* Мобільний список: рядок = один пункт, деталі — за дотиком */
.mob-list { display:none; flex-direction:column; gap:10px; }
.mob-list[hidden] { display:none; }
.mobonly { display:none; }
.mobonly[hidden] { display:none; }
.msearch {
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  color:var(--ink-3);
}
.msearch input {
  flex:1; padding:9px 0; font:inherit; font-size:14px; color:var(--ink);
  background:none; border:0; outline:none;
}
.mrows {
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden;
}
.mrow + .mrow { border-top:1px solid var(--line); }
.mrow.open { background:var(--sunken); }
.mrow-head {
  width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px;
  font:inherit; text-align:left; color:inherit; background:none; border:0; cursor:pointer;
}
.mrow-name { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mrow-name b { font-size:13.5px; font-weight:550; overflow-wrap:anywhere; }
.mrow-name small { font-size:11px; color:var(--ink-3); }
.mrow-val {
  flex:none; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
}
.mrow-det {
  display:flex; flex-direction:column; gap:5px; padding:2px 12px 11px;
}
.mrow-det[hidden] { display:none; }
.mrow-det .kv {
  display:flex; justify-content:space-between; gap:12px;
  font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.mrow-det .kv span:last-child { color:var(--ink); }
.mrow.total { background:var(--sunken); }
.mrow.total .mrow-name b { font-weight:680; }
.mempty { margin:0; padding:22px 12px; text-align:center; font-size:13px; color:var(--ink-3); }
.more { align-self:center; padding:8px 16px; font-size:13px; }

/* Скелет і стани */
.state {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:44px 20px; text-align:center;
}
.state b { font-size:14.5px; }
.state p { margin:0; max-width:38ch; font-size:13px; color:var(--ink-3); }
.state button { margin-top:6px; }
.state-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; }
.state-icon.calm { background:var(--sunken); color:var(--ink-3); }
.state-icon.bad { background:var(--neg-soft); color:var(--neg); }
.skelbox { align-items:stretch; gap:10px; padding:20px 18px; }
.skel {
  height:13px; border-radius:5px;
  background:linear-gradient(90deg, var(--sunken), var(--line), var(--sunken));
  background-size:200% 100%; animation:sheen 1.3s linear infinite;
}
@keyframes sheen { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation:none; } }

/* ─── Аркуш періоду ─────────────────────────────────────────────── */
.sheet-wrap { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; }
.sheet-wrap[hidden] { display:none; }
.sheet-scrim { position:absolute; inset:0; background:rgba(10,16,28,.5); }
.sheet {
  position:relative; width:100%; max-height:88vh; overflow:auto;
  background:var(--surface); border-top-left-radius:16px; border-top-right-radius:16px;
  padding:14px 14px 22px; display:flex; flex-direction:column; gap:10px;
}
.sheet-top { display:flex; align-items:center; justify-content:space-between; }
.sheet-top b { font-size:15px; }
.sheet-sub {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); padding-top:4px;
}
.sheet-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.sheet-grid button {
  padding:12px 8px; font-size:13px; cursor:pointer; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
}
.sheet-grid button:hover { border-color:var(--line-strong); }
.sheet-grid button[aria-pressed="true"] {
  background:var(--teal-soft); border-color:var(--teal);
  color:var(--teal-ink); font-weight:600;
}
.sheet-dates { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.sheet-dates label { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink-2); }
.sheet-dates input {
  font-size:13px; padding:9px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
}
.sheet-apply {
  margin-top:4px; padding:13px; font-size:14px; font-weight:600; cursor:pointer;
  color:var(--on-teal); background:var(--teal-ink); border:none; border-radius:10px;
}
.sheet-apply:hover { background:var(--teal); color:#08161C; }

/* ─── Телефон ───────────────────────────────────────────────────── */
.scrim { display:none; }
@media (max-width: 860px) {
  .burger { display:flex; }
  .rail {
    position:fixed; inset:0 auto 0 0; z-index:50;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  .rail.open { transform:none; }
  .scrim { display:block; position:fixed; inset:0; z-index:45; background:rgba(10,16,28,.5); }
  .scrim[hidden] { display:none; }

  .topbar { padding:9px 12px; gap:8px; }
  .titleblk { order:1; flex:1; }
  #seg-period, .dates { display:none; }
  .periodbtn {
    order:3; display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
    padding:9px 11px; text-align:left; color:var(--ink);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  }
  .periodbtn:hover { border-color:var(--teal); }
  .periodbtn > svg:first-child { color:var(--teal-ink); flex:none; }
  .periodbtn span { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
  .periodbtn em {
    font-style:normal; font-family:var(--font-mono); font-size:9px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  }
  .periodbtn b { font-size:13px; }
  .periodbtn .chev { color:var(--ink-3); flex:none; }
  .picker { order:2; }
  .pop { right:auto; left:0; width:min(250px, calc(100vw - 24px)); }

  .canvas { padding:12px 12px 24px; gap:12px; }
  .panel-head { padding:10px 12px; flex-wrap:wrap; }
  .mobonly { display:flex; }
  .mob-list { display:flex; }
  .mob-list[hidden], .mobonly[hidden] { display:none; }
  /* Таблиця на телефоні показується лише за перемикачем */
  .tablescroll.cards-mode { display:none; }
  .summary { grid-template-columns:1fr 1fr; gap:8px; }
  .stat b { font-size:20px; }
  #highlight { max-width:150px; }
}
@media (min-width: 861px) {
  .mob-list { display:none !important; }
}