/* Общая дизайн-система служебных страниц (/reports, /setup, /cabinet, вход).
 *
 * Токены сняты с лендинга (app/landing/index.html, утверждён 22.09.2026 как
 * ориентир): тёплый светлый фон, белые карточки с тонкой рамкой, золото как
 * единственный акцент, Inter. Лендинг сам этот файл НЕ подключает — он
 * самодостаточная страница-файл, и менять его ради общего CSS не стали; при
 * правке палитры сверяйте оба места.
 *
 * Подключение — только через {{ static_url('gb-theme.css') }}: адрес меняется
 * вместе с содержимым, иначе браузер возьмёт старые стили из кеша.
 * Здесь только общее: токены, основа, шапка, карточка, кнопки, поля, метки.
 * Раскладка каждой страницы — в её шаблоне.
 */
:root {
  /* палитра лендинга */
  --bg: #FAF7F2;
  --bg-card: #FFFFFF;
  --bg-section: #F5F0E8;
  --text: #1A1A1A;
  --text-muted: #6B6B6B;
  --text-faint: #9A958C;
  --gold: #C9A227;
  --gold-light: #E8D088;
  --gold-dark: #A8851D;
  --gold-ink: #8A6A12;      /* золото для мелкого текста: #C9A227 на белом не читается */
  /* Дополнительный акцент кабинета (второй цвет бизнеса, /setup). По умолчанию
     — тёмный оттенок основного: там, где он стоит вместо --gold-dark, без
     второго цвета ничего не меняется (и при своём основном цвете тоже). */
  --gold-2: var(--gold-dark);
  --border: #E5E0D8;
  /* Поле ввода. В тёмной теме — свой фон: белое поле с текстом --text
     (светлым) было бы белым по белому — так и случилось на проде 03.10.2026. */
  --field-bg: #FFFFFF;
  /* статусы: на лендинге их нет, нужны формам и спискам */
  --ok: #2F6B3A;
  --ok-bg: #EAF2E6;
  --err: #A23B2E;
  --err-bg: #F7EAE8;

  /* Логотип и высота шапки. 26.09.2026 размер увеличен в полтора раза
     (44 -> 66 px, на телефоне 36 -> 54): логотип читался мелким. Шапка не
     фиксирована числом в двух местах, а считается от логотипа — иначе
     следующая правка размера снова оставит его прижатым к рамке, а липкие
     вкладки /reports (top) уедут от нижнего края шапки. */
  --gb-logo-h: 66px;
  /* Потолок ширины: логотип бизнеса бывает широким баннером. 320 px
     подобраны так, чтобы даже баннер 7:1 остался не ниже прежних 44 px,
     а обычный логотип (226 px при высоте 66) упора вообще не замечал. */
  --gb-logo-max-w: 320px;
  --gb-top-h: calc(var(--gb-logo-h) + 22px);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 40px rgba(0, 0, 0, .06);
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, .06);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Тёмная тема кабинета клиента (25.09.2026): атрибут data-theme="dark" на
   <html> ставит только cabinet-theme.js по выбору на экране «Настройки» —
   /reports его не ставит и остаётся светлым. Меняются нейтральные цвета;
   фирменные (--gold, --gold-light, --gold-dark от бизнеса) остаются. Селектор
   сильнее :root, поэтому перекрывает и цвета бизнеса из _cabinet_brand.html:
   --gold-ink (золото для мелкого текста на белом) на тёмном фоне не
   читается — берём светлый оттенок. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141312;
  --bg-card: #1E1D1B;
  --bg-section: #28261F;
  --text: #F2EFEA;
  --text-muted: #A9A49B;
  /* #958F86, а не прежний #7C776F: тот на карточке давал 3,8:1 — ниже
     WCAG AA (4,5:1) для мелкого текста («обязательно», «›»). */
  --text-faint: #958F86;
  --gold-ink: var(--gold-light);
  --border: #36332E;
  --field-bg: var(--bg-section);
  /* Текст на фирменном цвете в тёмной теме (03.10.2026). Белый на стандартном
     #C9A227 — 2,4:1, ниже WCAG AA, поэтому здесь тёмный: 7,7:1 на --gold,
     5,3:1 на --gold-dark. Цвет бизнеса — свои значения из
     branding.dark_theme_text_on (белый или тёмный, что контрастнее), их
     ставит _cabinet_brand.html. --on-gold-card — на градиенте карты баланса
     (--gold → --gold-dark): контрастнее на ОБОИХ концах. */
  --on-gold: #141312;
  --on-gold-dark: #141312;
  --on-gold-card: #141312;
  --ok: #86C792;
  --ok-bg: #1F2E22;
  --err: #EC8C78;
  --err-bg: #3A2420;
  --shadow: 0 4px 40px rgba(0, 0, 0, .35);
  --top-bg: rgba(20, 19, 18, .95);
}

/* Плейсхолдер в тёмной теме: у браузера свой серый (~3,3:1 на поле) —
   берём --text-faint (≥ 4,7:1), но тусклее введённого текста. */
html[data-theme="dark"] ::placeholder { color: var(--text-faint); opacity: 1; }

/* Логотип GetBonify по умолчанию — в двух вариантах (03.10.2026): тёмные
   буквы для светлой темы (logo.png) и белые для тёмной (logo-dark.png). Оба
   <img> в разметке, видим один — по теме; тема ставится атрибутом
   data-theme (cabinet-theme.js), а не media-запросом, поэтому <picture>
   не подходит. Логотип, загруженный бизнесом, не перекрашивается: в тёмной
   теме под ним светлая подложка ровно по его размеру (.gb-logo-biz). */
.gb-logo-for-dark { display: none !important; }
html[data-theme="dark"] .gb-logo-for-light { display: none !important; }
html[data-theme="dark"] .gb-logo-for-dark { display: block !important; }
html[data-theme="dark"] img.gb-logo-biz { background: #FAF7F2; border-radius: 8px; padding: 4px 8px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--gold-ink); }
button, input, select, textarea { font-family: inherit; }

.gb-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* --- шапка: как nav лендинга --- */
.gb-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--top-bg, rgba(250, 247, 242, .95));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  /* Кабинет открывается и как установленное приложение (viewport-fit=cover):
     на iPhone с вырезом шапка иначе уходит под строку состояния. */
  padding-top: env(safe-area-inset-top, 0px);
}
.gb-top-inner { display: flex; align-items: center; gap: 20px; min-height: var(--gb-top-h); }
.gb-logo { display: flex; align-items: center; flex: none; text-decoration: none; min-width: 0; }
/* max-width + object-fit: логотип бизнеса грузят любой формы, и широкий
   баннер в полный рост вытеснил бы из шапки всё остальное. Без object-fit
   ограничение ширины при заданной высоте сплющило бы картинку. */
.gb-logo img { display: block; height: var(--gb-logo-h); width: auto;
  max-width: var(--gb-logo-max-w); object-fit: contain; object-position: left center; }
/* Текстовый логотип — когда файла нет (см. cabinet.html). Растёт вместе с
   картинкой: иначе после увеличения одной версии они разъедутся. */
.gb-logo-text { font-size: 27px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
/* Квадрат с буквой бизнеса без логотипа (09.10.2026, _cabinet_monogram.html):
   цвета — инлайном от сервера (фирменный цвет и контрастный текст). */
.gb-mono { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 10px; font-size: 24px; font-weight: 800; line-height: 1; }
.gb-top-note { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--text-muted); }

/* --- заголовки --- */
.gb-tag {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--gold-dark); text-transform: uppercase; letter-spacing: 1.5px;
}
.gb-title {
  margin: 8px 0 8px; font-size: 32px; font-weight: 800;
  line-height: 1.2; letter-spacing: -.5px;
}
.gb-sub { margin: 0; font-size: 16px; color: var(--text-muted); max-width: 640px; }

/* --- карточка --- */
.gb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

/* --- кнопки: тёмная как nav-cta, золотая как btn-primary, контурная как btn-secondary --- */
.gb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; min-height: 44px;
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer;
  color: var(--text); background: var(--bg-card);
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  transition: background .2s, border-color .2s, color .2s;
}
.gb-btn:hover { border-color: var(--gold); color: var(--gold-ink); }
.gb-btn.primary { color: #fff; background: var(--text); border-color: var(--text); }
.gb-btn.primary:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.gb-btn.gold { color: #fff; background: var(--gold); border-color: var(--gold); }
.gb-btn.gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.gb-btn:disabled, .gb-btn:disabled:hover {
  cursor: default; color: var(--text-faint); background: var(--bg-section); border-color: var(--bg-section);
}
.gb-btn:focus-visible, .gb-field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- поля --- */
.gb-field { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.gb-field input, .gb-field select, .gb-field textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 14px;
  font: 15px/1.4 var(--sans); color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.gb-field input:focus, .gb-field select:focus, .gb-field textarea:focus {
  outline: none; border-color: var(--gold);
}

/* --- ошибка у поля (02.10.2026): один вид на все формы ---
   Обязательное поле — звёздочка в подписи (.req), неверное — красная рамка
   по aria-invalid="true" и текст под полем (.field-err). Ставит и снимает
   app/static/gb-form.js. !important — у страниц свои правила рамки полей
   (и :focus) с большей специфичностью, а ошибка должна быть видна и в фокусе.
   Цвета — токены темы: в тёмной теме --err свой. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--err) !important;
  box-shadow: 0 0 0 1px var(--err);
}
input[type="checkbox"][aria-invalid="true"], input[type="radio"][aria-invalid="true"] {
  outline: 2px solid var(--err); outline-offset: 2px; box-shadow: none;
}
.field-err {
  display: block; margin: 4px 0 0;
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--err);
}
.field-err:empty { display: none; }
.req { margin-left: 2px; color: var(--err); font-weight: 700; }

/* --- метка-«пилюля» --- */
.gb-pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  background: var(--bg-section); color: var(--text-muted);
}
.gb-pill.ok { background: var(--ok-bg); color: var(--ok); }

.gb-foot {
  margin-top: auto; padding: 24px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--bg-section);
  font-size: 13px; color: var(--text-muted);
}

@keyframes gb-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 600px) {
  .gb-container { padding: 0 16px; }
  .gb-title { font-size: 26px; }
  .gb-card { padding: 20px; }
  :root { --gb-logo-h: 54px; --gb-logo-max-w: 55vw; }
  .gb-logo-text { font-size: 22px; }
  .gb-top-note { font-size: 13px; }
}

/* Телефоны и планшеты (узкий экран ИЛИ палец вместо мыши — планшет шире
   760 px). Текст полей не мельче 16 px: iOS Safari иначе увеличивает страницу
   при фокусе на поле и не возвращает масштаб. У полей на страницах свои
   правила с большей специфичностью — отсюда !important. */
@media (max-width: 760px), (pointer: coarse) {
  .gb-logo { min-height: var(--gb-logo-h); }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px !important;
  }
  /* Кнопки и поля — под палец: не ниже 44 px (рекомендация Apple HIG).
     Кроме .stat-link — это цифра в строке текста, у неё своя зона нажатия. */
  .gb-btn, button:not(.stat-link), input:not([type="checkbox"]):not([type="radio"]), select {
    min-height: 44px;
  }
}