/* ═══════════════════════════════════════════════════════════════
   SAVOY — единый стиль всех страниц
   (дашборд, вход, админ-панель, управление доступами)

   Один файл — один :root. Меняете --bg, --accent, любой --f-*
   или --sp-* здесь — эффект применяется сразу на всех страницах,
   отдельно ничего синхронизировать не нужно.

   Раньше это были три места: <style> в index.php, этот файл
   и <style> в setup.php — с разными наборами токенов и одним
   случайным расхождением (--bg отличался). Всё сведено сюда.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ─── Цвет ──────────────────────────────────────────────────── */
  --bg:       #faf9f9;
  --card:     #FFFFFF;
  --text:     #1A1A1A;
  --sec:      #6B6460;
  --border:   #E4DED8;
  --accent:   #1D4E5F;
  --wine:     #6B2D3E;
  --green:    #2A6648;
  --red:      #8B2A2A;
  --green-bg: #EAF3EE;
  --red-bg:   #F5EAEA;
  --amber-bg: #FBF3E4;
  --amber:    #8A6414;

  /* Минимальная зона касания — 48px по рекомендации WCAG 2.1 (2.5.5) */
  --tap: 48px;

  /* ─── Типографика ───────────────────────────────────────────
     Шкала по логике neuropelvic-tokens.css: плотные шаги внизу
     (×1.08–1.11), широкие вверху (×1.14–1.33), пересчитана под
     диапазон SAVOY (9–36px), а не буквально скопирована (16–90px).
     Имя токена = значение в px — не нужно держать таблицу в уме.
     --f-m = 16px — не трогать: держит iOS-инпуты без авто-зума. */
  --f-3xs: 10px;
  --f-2xs: 11px;
  --f-xs:  12px;
  --f-s:   13px;
  --f-d:   14px;
  --f-m:   16px;
  --f-b:   18px;
  --f-l:   20px;
  --f-xl:  24px;
  --f-2xl: 32px;

  /* line-height: туже на крупном/цифрах, свободнее на мелком —
     та же корреляция, что в neuropelvic-design-system.md (§2). */
  --lh-tight:  1.2;
  --lh-snug:   1.3;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* letter-spacing: три уровня прижатия для крупного/цифр
     (чем крупнее кегль — тем плотнее), один для аптейс-лейблов,
     один для логотипа/бренд-марки. */
  --ls-tight-1: -.01em;   /* 18px: period-label, modal-title */
  --ls-tight-2: -.02em;   /* 20px: ent-value */
  --ls-tight-3: -.03em;   /* 32px: kpi-value */
  --ls-caps:    .05em;    /* мелкие аптейс-подписи */
  --ls-brand:   .12em;    /* логотип/бренд-марка */

  /* ─── Отступы ────────────────────────────────────────────────
     Триада микро/мид/макро по логике neuropelvic (§3), числа —
     из фактического диапазона SAVOY (0–60px на экране). */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;   /* ★ базовый микро-шаг */
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-24: 24px;   /* ★ базовый мид-шаг */
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;   /* ★ макро */
  --sp-48: 48px;
  --sp-60: 60px;
  /* 120/130px в .wrap ниже — не декоративный ритм, а точный зазор
     под фиксированную панель сохранения снизу экрана, оставлены
     как функциональные константы. */
}

/* ─── Базовый слой ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;min-height:100%;background:var(--bg);
  font-family:'Geologica',system-ui,sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button,input,select{font-family:'Geologica',system-ui,sans-serif}
button{cursor:pointer}
a{color:var(--accent)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}


/* ═══════════════════════════════════════════════════════════════
   ТИПОГРАФИЧЕСКАЯ ИЕРАРХИЯ (H1–H6)

   Единая шкала заголовков для всех страниц — шесть уровней, каждый
   строго меньше/легче предыдущего, все привязаны к уже существующим
   --f-* токенам (см. :root выше), а не к новым магическим числам.
   Работает и на настоящих тегах <h1>–<h6>, и как класс .h1–.h6 —
   вешайте класс там, где семантический тег неудобен (например,
   заголовок внутри flex-строки вперемешку с иконкой).

   Когда в разговоре встречается "сделай это H3" — вот шкала:
     H1  32px/700  тёмный   — заголовок всей страницы (один на экран)
     H2  24px/700  тёмный   — заголовок крупного блока/секции
     H3  18px/600  тёмный   — подзаголовок внутри секции (группа)
     H4  16px/600  тёмный   — заголовок отдельного элемента группы
     H5  14px/500  тёмный   — мелкий заголовок/акцент внутри элемента
     H6  12px/600  приглуш. — служебная подпись-эйбл, капс (как .kpi-label)
   ═══════════════════════════════════════════════════════════════ */
h1,.h1{font-size:var(--f-2xl);font-weight:700;letter-spacing:var(--ls-tight-3);color:var(--text);line-height:var(--lh-tight)}
h2,.h2{font-size:var(--f-xl);font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:var(--lh-tight)}
h3,.h3{font-size:var(--f-b);font-weight:600;letter-spacing:var(--ls-tight-1);color:var(--text);line-height:var(--lh-snug)}
h4,.h4{font-size:var(--f-m);font-weight:600;color:var(--text);line-height:var(--lh-snug)}
h5,.h5{font-size:var(--f-d);font-weight:500;color:var(--text);line-height:var(--lh-normal)}
h6,.h6{font-size:var(--f-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--sec);line-height:var(--lh-normal)}


/* ═══════════════════════════════════════════════════════════════
   ДАШБОРД (index.php)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Layout ─── */
#app{max-width:1440px;margin:0 auto;min-height:100vh;padding-bottom:var(--sp-60)}

/* ─── Header ─── */
.header{background:#fff;border-bottom:1px solid var(--border);padding:0 var(--sp-48);height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;gap:var(--sp-16)}
.logo{display:flex;align-items:baseline;gap:var(--sp-12);flex-shrink:0}
.logo-name{font-size:var(--f-xl);font-weight:700;letter-spacing:var(--ls-brand);text-transform:uppercase}
.logo-sub{font-size:var(--f-2xs);font-weight:400;letter-spacing:var(--ls-caps);color:var(--sec);text-transform:uppercase}
.header-right{display:flex;align-items:center;gap:var(--sp-10)}

/* ─── Icon buttons ─── */
.icon-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--f-m);color:var(--sec);transition:all .15s;flex-shrink:0;line-height:1}
.icon-btn:hover{background:var(--bg);border-color:#c0bab4;color:var(--text)}
.icon-btn.has-data{color:var(--green)}
.icon-btn.spin{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Toggle ───
   display:flex делает сам переключатель по ширине содержимого — но
   как прямой потомок .body (flex-direction:column) он по умолчанию
   растянулся бы на всю ширину (align-self:stretch). align-self ниже
   возвращает ему естественную ширину, чтобы вкладки юр.лиц выглядели
   компактной таблеткой, а не на всю строку. */
.toggle{display:flex;align-self:flex-start;background:var(--bg);border-radius:100px;padding:3px;gap:var(--sp-2);border:1px solid var(--border)}
.toggle-btn{padding:var(--sp-6) var(--sp-20);border-radius:100px;border:none;background:transparent;font-size:var(--f-d);font-weight:400;color:var(--sec);transition:all .18s;letter-spacing:.01em;white-space:nowrap}
.toggle-btn.active{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);color:var(--text);font-weight:600}
/* Крупный вариант — переключатель юр.лица. Крупнее вкладок Доход/Расход
   (те остаются на .toggle-btn по умолчанию), чтобы юр.лицо читалось как
   более высокий уровень навигации, а раздел — как уровень ниже. */
.toggle-lg .toggle-btn{font-size:var(--f-b);padding:var(--sp-8) var(--sp-24)}

/* ─── Body ─── */
.body{padding:var(--sp-40) var(--sp-48) 0;display:flex;flex-direction:column;gap:var(--sp-32)}

/* Стек переключателей на income.php/expense.php: юр.лицо (крупно) сверху,
   раздел (Доход/Расход) снизу — сохраняет контекст юр.лица при переходе
   между разделами, оба уровня остаются на виду и кликабельны. */
.page-head{display:flex;flex-direction:column;gap:var(--sp-10)}

/* ─── Data source badge ─── */
.data-badge{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--f-2xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;padding:var(--sp-4) var(--sp-10);border-radius:6px;background:var(--green-bg);color:var(--green)}
.data-badge.demo{background:#F0EDE8;color:var(--sec)}
.data-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ─── Period row ─── */
.period-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);flex-wrap:wrap}
.period-nav{display:flex;align-items:center;gap:var(--sp-16)}
.nav-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:var(--f-m);color:var(--text);display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.nav-btn:disabled{opacity:.3;cursor:default}
.nav-btn:not(:disabled):hover{background:var(--bg);border-color:#c0bab4}
.period-label{font-size:var(--f-b);font-weight:600;min-width:160px;text-align:center;letter-spacing:var(--ls-tight-1)}
.kpi-box{display:flex;align-items:baseline;gap:var(--sp-16)}
.kpi-label{font-size:var(--f-xs);font-weight:400;color:var(--sec);letter-spacing:var(--ls-caps);text-transform:uppercase;margin-bottom:var(--sp-2)}
.kpi-value{font-size:var(--f-2xl);font-weight:700;letter-spacing:var(--ls-tight-3);line-height:1}
.badge{padding:var(--sp-4) var(--sp-10);border-radius:6px;font-size:var(--f-s);font-weight:600}
.badge.up{background:var(--green-bg);color:var(--green)}
.badge.dn{background:#F0EDE8;color:var(--red)}
.badge.neu{background:#F0EDE8;color:var(--sec)}

/* ─── Card (только дашборд — не путать с .panel админки/setup) ─── */
.card{background:#fff;border-radius:16px;padding:var(--sp-28) var(--sp-24) var(--sp-20);box-shadow:0 1px 4px rgba(0,0,0,.05),0 4px 20px rgba(0,0,0,.04);border:1px solid var(--border)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-20);gap:var(--sp-12);flex-wrap:wrap}
.card-title{font-size:var(--f-m);font-weight:600;color:var(--text);letter-spacing:.03em}
/* Имя заведения над заголовком графика (income.php/expense.php при выборе
   одного заведения) — заметно крупнее "Доход по каналам" под ним (24px
   против 16px), чтобы разница читалась с одного взгляда, а не угадывалась. */
.card-title-block{display:flex;flex-direction:column;gap:var(--sp-2)}
.card-title-venue{font-size:var(--f-xl);font-weight:700;letter-spacing:-.01em;color:var(--text)}
/* Сброс фильтра по заведению — сделан заметнее (акцентный цвет вместо
   серого, крупнее паддинг/шрифт), чтобы явно читался как активное
   действие, а не как второстепенная подпись рядом с заголовком. */
.reset-btn{padding:var(--sp-6) var(--sp-14);border:1px solid var(--accent);border-radius:8px;background:none;font-size:var(--f-s);font-weight:500;color:var(--accent);transition:all .15s;flex-shrink:0}
.reset-btn:hover{background:var(--accent);color:#fff}

/* ─── Chart ─── */
.chart-wrap{width:100%;height:280px;position:relative;overflow:hidden}
svg.chart{width:100%;height:100%}

/* ─── Empty state ─── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-12);height:200px;color:var(--sec);text-align:center}
.empty-state-icon{font-size:var(--f-2xl);opacity:.4}
.empty-state-title{font-size:var(--f-d);font-weight:500}
.empty-state-sub{font-size:var(--f-s);opacity:.7;max-width:280px;line-height:var(--lh-loose)}

/* ─── Enterprise cards ───
   Карточки и таблица показывают одни и те же данные — незачем дублировать
   их на одном экране. На десктопе оставляем только таблицу (компактнее,
   легче сравнивать столбцы); на мобильном, где таблицу приходится скроллить
   вбок, — только карточки (см. правило .table-wrap ниже в @media 680px). */
.ent-section-label{display:none;font-size:var(--f-2xs);font-weight:500;letter-spacing:var(--ls-caps);color:var(--sec);text-transform:uppercase;margin-bottom:var(--sp-16)}
.ent-cards{display:none;gap:var(--sp-16);flex-wrap:wrap}
.ent-card{flex:1 1 160px;min-width:0;border-radius:12px;padding:var(--sp-20);cursor:pointer;transition:all .2s;border:1.5px solid var(--border);background:#fff}
.ent-card:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.ent-card.selected{border-color:var(--card-color);box-shadow:0 4px 24px var(--glow)}
.ent-dot-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-12)}
.ent-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.ent-pct{font-size:var(--f-2xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase}
.ent-name{font-size:var(--f-s);font-weight:500;color:var(--sec);margin-bottom:var(--sp-6);line-height:var(--lh-snug)}
.ent-value{font-size:var(--f-l);font-weight:700;letter-spacing:var(--ls-tight-2);margin-bottom:var(--sp-12)}
.ent-spark{width:100%;height:40px}

/* ─── Summary table ─── */
.table-wrap{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05),0 4px 20px rgba(0,0,0,.04);border:1px solid var(--border)}
.table-head{padding:var(--sp-16) var(--sp-28);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
.table-head-title{font-size:var(--f-d);font-weight:500;color:var(--sec);letter-spacing:.03em}
table{width:100%;border-collapse:collapse;font-size:var(--f-s)}
thead tr{background:var(--bg)}
th{padding:var(--sp-10) var(--sp-28);text-align:left;font-size:var(--f-2xs);font-weight:500;color:var(--sec);letter-spacing:var(--ls-caps);text-transform:uppercase;border-bottom:1px solid var(--border)}
td{padding:var(--sp-14) var(--sp-28);border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:background .15s}
tbody tr:hover{background:#faf7f4}
.td-name{display:flex;align-items:center;gap:var(--sp-10)}
.td-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.td-fname{font-weight:500}
.td-rev{font-weight:600}
.prog-wrap{display:flex;align-items:center;gap:var(--sp-10)}
.prog-track{flex:1;height:4px;background:var(--border);border-radius:2px;max-width:120px}
.prog-fill{height:100%;border-radius:2px;transition:width .4s ease}
.prog-pct{color:var(--sec);font-size:var(--f-xs);min-width:36px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%}

/* ─── Footer ─── */
.footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-8);gap:var(--sp-8);flex-wrap:wrap}
.footer span{font-size:var(--f-2xs);color:var(--sec);letter-spacing:var(--ls-caps)}

/* ─── Loading overlay ─── */
.overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(245,241,236,.75);backdrop-filter:blur(4px)}
.overlay-card{background:#fff;border-radius:16px;border:1px solid var(--border);padding:var(--sp-32) var(--sp-40);display:flex;flex-direction:column;align-items:center;gap:var(--sp-16);box-shadow:0 8px 40px rgba(0,0,0,.1)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.overlay-text{font-size:var(--f-d);font-weight:500;color:var(--sec)}

/* ─── Modal base ─── */
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(26,26,26,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--sp-24)}
.modal{background:#fff;border-radius:20px;border:1px solid var(--border);padding:var(--sp-32);width:100%;max-width:480px;box-shadow:0 16px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;gap:var(--sp-24)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-16)}
.modal-title{font-size:var(--f-b);font-weight:700;letter-spacing:var(--ls-tight-1)}
.modal-sub{font-size:var(--f-s);color:var(--sec);line-height:var(--lh-loose);margin-top:var(--sp-4)}
.modal-close{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:none;font-size:var(--f-b);color:var(--sec);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.modal-close:hover{background:var(--bg);color:var(--text)}
.field{display:flex;flex-direction:column;gap:var(--sp-6)}
.field label{font-size:var(--f-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--sec)}
.field input,.field select{width:100%;border:1px solid var(--border);border-radius:10px;padding:var(--sp-10) var(--sp-14);font-size:var(--f-d);font-family:'Geologica',sans-serif;color:var(--text);background:#fff;transition:border-color .15s;outline:none}
.field input:focus,.field select:focus{border-color:var(--accent)}
.field .hint{font-size:var(--f-xs);color:var(--sec);line-height:var(--lh-loose)}
.modal-actions{display:flex;gap:var(--sp-10);justify-content:flex-end}
.btn-primary{padding:var(--sp-10) var(--sp-24);border-radius:10px;border:none;background:var(--accent);color:#fff;font-size:var(--f-d);font-weight:600;font-family:'Geologica',sans-serif;transition:opacity .15s}
.btn-primary:hover{opacity:.88}
.btn-secondary{padding:var(--sp-10) var(--sp-20);border-radius:10px;border:1px solid var(--border);background:none;font-size:var(--f-d);font-weight:500;color:var(--sec);font-family:'Geologica',sans-serif;transition:all .15s}
.btn-secondary:hover{border-color:#c0bab4;color:var(--text)}
.error-msg{font-size:var(--f-s);color:var(--red);background:var(--red-bg);border-radius:8px;padding:var(--sp-10) var(--sp-14);display:none}

/* ─── Print dialog ─── */
.print-tabs{display:flex;gap:0;border-bottom:1px solid var(--border)}
.print-tab{padding:var(--sp-8) var(--sp-20);border:none;background:none;font-size:var(--f-s);font-weight:500;color:var(--sec);font-family:'Geologica',sans-serif;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;cursor:pointer}
.print-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.print-panel{display:none;flex-direction:column;gap:var(--sp-16)}
.print-panel.active{display:flex}
.period-picker{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}

/* ─── Chart legend ─── */
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-18);padding-top:var(--sp-12);border-top:1px solid var(--border);margin-top:var(--sp-4)}
.chart-legend-item{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--f-xs);color:var(--sec);cursor:pointer;transition:opacity .15s;user-select:none}
.chart-legend-item:hover{color:var(--text)}
.chart-legend-item.dimmed{opacity:.35}
.chart-legend-line{width:18px;height:2.5px;border-radius:2px;flex-shrink:0}

/* ─── Print area ─── */
#print-area{display:none}


/* ─── @media print — не трогать: пересчитано под A4, свой масштаб ─── */
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }

  @page { size: A4; margin: 15mm 18mm; }

  .pr { font-family: 'Geologica', sans-serif; color: #1A1A1A; font-size: 12px; }
  .pr-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #1D4E5F; }
  .pr-logo { font-size: 20px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1D4E5F; }
  .pr-meta { text-align: right; font-size: 11px; color: #6B6460; line-height: 1.6; }
  .pr-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
  .pr-kpi { display: flex; gap: 0; margin-bottom: 20px; border: 1px solid #E4DED8; border-radius: 10px; overflow: hidden; }
  .pr-kpi-item { flex: 1; padding: 12px 16px; border-right: 1px solid #E4DED8; }
  .pr-kpi-item:last-child { border-right: none; }
  .pr-kpi-label { font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #6B6460; margin-bottom: 4px; }
  .pr-kpi-value { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #1D4E5F; }
  .pr-kpi-sub { font-size: 10px; color: #6B6460; margin-top: 2px; }
  .pr-chart { margin-bottom: 20px; page-break-inside: avoid; }
  .pr-chart-title { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #6B6460; margin-bottom: 8px; }
  .pr-chart svg { width: 100%; height: auto; display: block; }
  .pr-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #E4DED8; }
  .pr-chart-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: #6B6460; }
  .pr-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; page-break-inside: avoid; table-layout: auto; }
  .pr-table th { padding: 6px 8px; text-align: left; font-size: 8.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #6B6460; border-bottom: 2px solid #1D4E5F; background: #F5F1EC; }
  .pr-table td { padding: 8px 8px; border-bottom: 1px solid #E4DED8; font-size: 10.5px; white-space: nowrap; vertical-align: middle; }
  /* Первая колонка (название заведения) — единственная, где допустим перенос строки на два слова; суммы нигде не должны рваться посреди числа/значка ₸ — от этого таблица и выглядела «сломанной» на печати. */
  .pr-table td:first-child { white-space: normal; }
  .pr-table tr:last-child td { border-bottom: 2px solid #1D4E5F; font-weight: 700; }
  .pr-table .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
  .pr-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
  .pr-badge.up { background: #EAF3EE; color: #2A6648; }
  .pr-badge.dn { background: #F5EAEA; color: #8B2A2A; }
  .pr-badge.neu { background: #F0EDE8; color: #6B6460; }
  .pr-footer { display: flex; justify-content: space-between; font-size: 9px; color: #6B6460; padding-top: 8px; border-top: 1px solid #E4DED8; }
  .pr-prog { display: flex; align-items: center; gap: 6px; }
  .pr-prog-track { flex: 1; height: 3px; background: #E4DED8; border-radius: 2px; min-width: 60px; max-width: 100px; }
  .pr-prog-fill { height: 100%; border-radius: 2px; }
}

/* ─── Дашборд · Tablet ─── */
@media (max-width:1024px) {
  .header{padding:0 var(--sp-28)}
  .body{padding:var(--sp-28) var(--sp-28) 0;gap:var(--sp-24)}
}

/* ─── Дашборд · Mobile ─── */
@media (max-width:680px) {
  .header{padding:0 var(--sp-16);height:56px}
  .logo-sub{display:none}
  .logo-name{font-size:var(--f-b);letter-spacing:.10em}
  .toggle-btn{padding:var(--sp-4) var(--sp-12);font-size:var(--f-xs)}
  .icon-btn{width:32px;height:32px;font-size:var(--f-d)}
  .body{padding:var(--sp-16) var(--sp-16) 0;gap:var(--sp-18)}
  .period-row{flex-direction:column;align-items:stretch;gap:var(--sp-14)}
  .period-nav{justify-content:center}
  .period-label{font-size:var(--f-m);min-width:0}
  .kpi-box{background:#fff;border-radius:14px;padding:var(--sp-16) var(--sp-18);border:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.05);justify-content:space-between}
  .kpi-label{font-size:var(--f-2xs);margin-bottom:var(--sp-4)}
  .kpi-value{font-size:var(--f-xl)}
  .toggle-lg .toggle-btn{font-size:var(--f-m);padding:var(--sp-6) var(--sp-16)}
  .chart-wrap{height:200px}
  .card{padding:var(--sp-18) var(--sp-14) var(--sp-14)}
  .card-title{font-size:var(--f-d)}
  .card-title-venue{font-size:var(--f-l)}
  /* Мобильный: карточки вместо таблицы — таблицу со скроллом вбок неудобно читать на телефоне.
     Один столбец на всю ширину — полные суммы (без "тыс") иначе не помещаются в две колонки. */
  .ent-section-label{display:block}
  .ent-cards{display:grid;grid-template-columns:1fr;gap:var(--sp-10)}
  .ent-card{padding:var(--sp-14)}
  .ent-value{font-size:var(--f-m);margin-bottom:var(--sp-8)}
  .table-wrap{display:none}
  table{min-width:500px}
  th,td{padding:var(--sp-10) var(--sp-14)}
  .table-head{padding:var(--sp-14) var(--sp-16)}
  .prog-track{max-width:72px}
  .footer{flex-direction:column;gap:var(--sp-4);align-items:flex-start}
  .modal{padding:var(--sp-24)}
  .period-picker{grid-template-columns:1fr}
}

/* ─── Дашборд · узкий телефон ─── */
@media (max-width:400px) {
  .header{padding:0 var(--sp-12)}
  .logo-name{font-size:var(--f-m)}
  .toggle-btn{padding:var(--sp-4) var(--sp-8);font-size:var(--f-2xs);letter-spacing:0}
  .toggle-lg .toggle-btn{font-size:var(--f-s);padding:var(--sp-4) var(--sp-12)}
  .body{padding:var(--sp-12) var(--sp-12) 0;gap:var(--sp-14)}
  .kpi-value{font-size:var(--f-l)}
  .period-label{font-size:var(--f-d)}
  .chart-wrap{height:170px}
}


/* ═══════════════════════════════════════════════════════════════
   ЭКРАН ВХОДА (login.php, admin/login.php)
   ═══════════════════════════════════════════════════════════════ */

.auth-gate{min-height:100dvh;display:flex;align-items:center;
  justify-content:center;padding:var(--sp-24)}
.auth-card{background:var(--card);border-radius:24px;border:1px solid var(--border);
  padding:var(--sp-48) var(--sp-40);width:100%;max-width:380px;
  box-shadow:0 8px 40px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:var(--sp-24)}
.auth-logo{display:flex;flex-direction:column;gap:var(--sp-4)}
.auth-logo-name{font-size:var(--f-xl);font-weight:700;letter-spacing:var(--ls-brand);
  text-transform:uppercase;color:var(--accent)}
.auth-logo-sub{font-size:var(--f-2xs);letter-spacing:var(--ls-caps);color:var(--sec);
  text-transform:uppercase}
.auth-title{font-size:var(--f-m);font-weight:600;margin-bottom:var(--sp-20)}
.auth-fields{display:flex;flex-direction:column;gap:var(--sp-14)}
.auth-lbl{font-size:var(--f-xs);font-weight:500;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--sec);display:block;margin-bottom:var(--sp-8)}
.auth-input{width:100%;border:1.5px solid var(--border);border-radius:10px;
  padding:var(--sp-12) var(--sp-16);min-height:var(--tap);font-size:var(--f-m);/* --f-m=16px — iOS не зумит поле */
  color:var(--text);background:#fff;transition:border-color .15s;outline:none}
.auth-input:focus{border-color:var(--accent)}
.auth-input:disabled{background:var(--bg);color:var(--sec)}
.auth-btn{width:100%;padding:var(--sp-14);min-height:var(--tap);border-radius:12px;
  border:none;background:var(--accent);color:#fff;font-size:var(--f-d);font-weight:600;
  transition:opacity .15s;margin-top:var(--sp-16)}
.auth-btn:hover{opacity:.86}
.auth-btn:disabled{opacity:.45;cursor:not-allowed}
.auth-btn.ghost{background:none;border:1px solid var(--border);color:var(--sec)}
.auth-note{font-size:var(--f-s);color:var(--sec);line-height:var(--lh-loose)}

/* Метка роли: визуально отличает вход в админку от входа в дашборд,
   чтобы нельзя было перепутать страницы. */
.auth-role{display:inline-block;font-size:var(--f-3xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:var(--sp-4) var(--sp-8);border-radius:6px}
.auth-role.admin{background:var(--wine);color:#fff}
.auth-role.view{background:var(--accent);color:#fff}

/* ─── Сообщения (используются и на входе, и в админ-панели) ─── */
.msg{font-size:var(--f-s);border-radius:8px;padding:var(--sp-10) var(--sp-14);line-height:var(--lh-loose)}
.msg.err{color:var(--red);background:var(--red-bg)}
.msg.ok{color:var(--green);background:var(--green-bg)}
.msg.warn{color:var(--amber);background:var(--amber-bg)}


/* ═══════════════════════════════════════════════════════════════
   АДМИН-ПАНЕЛЬ (admin/index.php) И УПРАВЛЕНИЕ ДОСТУПАМИ (setup.php)
   ═══════════════════════════════════════════════════════════════ */

.wrap{max-width:760px;margin:0 auto;padding:var(--sp-24) var(--sp-20) 120px}

.top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-16);margin-bottom:var(--sp-28);flex-wrap:wrap}
.top-logo{font-size:var(--f-b);font-weight:700;letter-spacing:var(--ls-brand);
  text-transform:uppercase;color:var(--accent);line-height:var(--lh-tight)}
.top-sub{font-size:var(--f-3xs);letter-spacing:var(--ls-caps);color:var(--sec);text-transform:uppercase}
.top-right{display:flex;align-items:center;gap:var(--sp-12)}
.top-user{font-size:var(--f-xs);color:var(--sec);text-align:right;line-height:var(--lh-normal)}
.lnk{font-size:var(--f-s);color:var(--sec);text-decoration:none;padding:var(--sp-10) var(--sp-14);
  border:1px solid var(--border);border-radius:10px;background:#fff;
  display:inline-flex;align-items:center;min-height:44px}
.lnk:hover{border-color:var(--accent);color:var(--accent)}

/* Название .panel — не .card: у дашборда выше уже есть свой .card
   с другим видом (тень, без нижнего отступа). Общий файл — общее
   правило: одинаковые имена классов между разделами не заводим. */
.panel{background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:var(--sp-20);margin-bottom:var(--sp-16)}
.panel-h{font-size:var(--f-xs);font-weight:600;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--sec);margin-bottom:var(--sp-16)}
/* panel-h-main — заголовок блока (Доход/Расход), уровень H2 шкалы выше. */
.panel-h-main{display:block;font-size:var(--f-xl);font-weight:700;letter-spacing:-.01em;color:var(--text)}
.panel-h-sub{display:block}

/* Выбор периода */
.period{display:flex;gap:var(--sp-12)}
.period > div{flex:1}
.sel{width:100%;border:1.5px solid var(--border);border-radius:10px;
  padding:var(--sp-12) var(--sp-14);min-height:var(--tap);font-size:var(--f-m);background:#fff;
  color:var(--text);outline:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6460' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.sel:focus{border-color:var(--accent)}

/* Строка заведения (admin/index.php) */
.row{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-14) 0;
  border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:none}
.row-dot{width:10px;height:10px;border-radius:50%;flex:none}
.row-name{flex:1;font-size:var(--f-m);font-weight:500;line-height:var(--lh-snug)}
.row-state{font-size:var(--f-2xs);color:var(--sec);margin-top:var(--sp-4);display:block}
.row-state.locked{color:var(--amber)}
.row-state.fresh{color:var(--green)}
.row-input{width:190px;flex:none;border:1.5px solid var(--border);
  border-radius:10px;padding:var(--sp-12) var(--sp-14);min-height:var(--tap);
  font-size:var(--f-m);text-align:right;background:#fff;color:var(--text);
  outline:none;font-variant-numeric:tabular-nums}
.row-input:focus{border-color:var(--accent)}
.row-input:disabled{background:var(--bg);color:var(--sec);cursor:not-allowed}
.row-input.changed{border-color:var(--accent);background:#F7FAFB}

/* Группировка по юр.лицу и каналам оплаты (admin/index.php v2).
   entity-heading — заголовок группы заведений юр.лица, уровень H3. */
.entity-heading{font-size:var(--f-b);font-weight:600;letter-spacing:var(--ls-tight-1);
  color:var(--text);margin:var(--sp-24) 0 var(--sp-12)}
.entity-heading:first-child{margin-top:0}
/* venue-block — один общий бордер вокруг всех заведений юр.лица (раньше
   был отдельный бордер у каждого заведения — резало на отдельные карточки
   вместо одной группы). Разделитель между заведениями теперь стоит ПОСЛЕ
   полей venue-group, а не под заголовком — так глаз читает: заголовок →
   его поля → черта → следующий заголовок, а не заголовок сразу за чертой. */
.venue-block{border:1px solid var(--border);border-radius:14px;margin-bottom:var(--sp-14);overflow:hidden}
.venue-group{padding:var(--sp-14) var(--sp-16);border-bottom:1px solid var(--border)}
.venue-group:last-child{border-bottom:none}
.venue-group-head{display:flex;align-items:center;gap:var(--sp-10);margin-bottom:var(--sp-10)}
.venue-group-head .row-name{font-weight:600}
.channel-row{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-10) 0}
.channel-row:not(:last-child){border-bottom:1px dashed var(--border)}
.channel-label{flex:1;font-size:var(--f-d);font-weight:400;color:var(--text);line-height:var(--lh-snug)}

/* Панель сохранения — прижата к низу: большой палец достаёт
   её на телефоне без перехвата устройства (thumb zone). */
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--border);padding:var(--sp-14) var(--sp-20);
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.savebar-in{max-width:760px;margin:0 auto;display:flex;
  align-items:center;gap:var(--sp-14)}
.savebar-txt{flex:1;font-size:var(--f-xs);color:var(--sec);line-height:var(--lh-normal)}
.btn{padding:var(--sp-14) var(--sp-28);min-height:var(--tap);border-radius:12px;border:none;
  background:var(--accent);color:#fff;font-size:var(--f-d);font-weight:600;
  transition:opacity .15s}
.btn:hover{opacity:.86}
.btn:disabled{opacity:.4;cursor:not-allowed}

.hint{font-size:var(--f-xs);color:var(--sec);line-height:var(--lh-loose)}

/* ─── Аккаунты (setup.php) ─── */
.u-row{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-14) 0;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.u-row:last-child{border-bottom:none}
.u-main{flex:1;min-width:180px}
.u-mail{font-size:var(--f-d);font-weight:500;word-break:break-all}
.u-meta{font-size:var(--f-2xs);color:var(--sec);margin-top:var(--sp-4)}
.u-acts{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.mini{padding:var(--sp-8) var(--sp-14);min-height:44px;border-radius:9px;border:1px solid var(--border);
  background:#fff;font-size:var(--f-s);color:var(--sec)}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.mini.danger:hover{border-color:var(--red);color:var(--red)}
.off{opacity:.55}

/* ─── Заведения (setup.php) ─── */
.v-row{display:flex;flex-direction:column;gap:var(--sp-10);
  padding:var(--sp-16) 0;border-bottom:1px solid var(--border)}
.v-row:last-of-type{border-bottom:none}
.v-fields{display:flex;gap:var(--sp-10);align-items:center}
.v-color{width:44px;height:44px;flex:none;padding:var(--sp-4);cursor:pointer;
  border:1.5px solid var(--border);border-radius:10px;background:#fff}
.v-name{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:10px;
  padding:var(--sp-10) var(--sp-14);min-height:44px;font-size:var(--f-m);color:var(--text);
  background:#fff;outline:none;font-family:inherit}
.v-name:focus,.v-order:focus{border-color:var(--accent)}
.v-order{width:80px;flex:none;border:1.5px solid var(--border);border-radius:10px;
  padding:var(--sp-10);min-height:44px;font-size:var(--f-m);text-align:center;
  color:var(--sec);background:#fff;outline:none;font-family:inherit}
.v-meta{font-size:var(--f-2xs);color:var(--sec)}
.v-acts{display:flex;gap:var(--sp-8);flex-wrap:wrap;align-items:center}
.v-lock{font-size:var(--f-2xs);color:var(--sec);padding:0 var(--sp-4)}

/* ─── Мобильные — админ-панель/вход ─── */
@media(max-width:560px){
  .auth-card{padding:var(--sp-32) var(--sp-24)}
  .wrap{padding:var(--sp-18) var(--sp-14) 130px}
  .panel{padding:var(--sp-18) var(--sp-16);border-radius:16px}
  /* Поле уходит под название — иначе на узком экране
     остаётся ~90px и сумма не читается целиком. */
  .row{flex-wrap:wrap;gap:var(--sp-10)}
  .row-name{flex:1 1 auto;min-width:0}
  .row-input{width:100%;text-align:left}
  .channel-row{flex-wrap:wrap;gap:var(--sp-6)}
  .venue-group{padding:var(--sp-12)}
  .venue-block{border-radius:12px}
  .period{flex-direction:column}
  .savebar-txt{font-size:var(--f-2xs)}
  .btn{padding:var(--sp-14) var(--sp-20)}
}

/* ─── Мобильные — управление заведениями (setup.php) ─── */
@media(max-width:520px){
  .v-name{font-size:var(--f-d)}
  .v-order{width:68px}
}