/* Дизайн-токены CRM v2 «спокойная плотность» — docs/design-crm-v2.md, раздел 3
 * (холст docs/mockups/crm-v2/Foundations.dc.html). Скругления по ролям: метки 6,
 * кнопки и поля 8, панели и модальные окна 10 — правило «углы прямые» прежнего
 * макета отменено. Подписи, шапки таблиц и заголовки — обычным регистром.
 * Точки перелома (в @media — числа, переменные там не работают): 1180 —
 * компактный режим, 768 — телефон, 480 — узкий телефон (раздел 9). */

:root {
  /* Типографика: кегль и интерлиньяж парами; 600 — заголовки, 500 — подписи */
  --font-sans: "Onest", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-base: 14px;
  --line-height-base: 20px;
  --font-size-h1: 24px;          /* заголовок страницы, 600 */
  --line-height-h1: 32px;
  --letter-spacing-h1: -.01em;
  --font-size-h1-phone: 20px;    /* заголовок страницы на телефоне < 768 */
  --line-height-h1-phone: 28px;
  --font-size-h2: 15px;          /* заголовок панели и блока, 600 */
  --line-height-h2: 22px;
  --font-size-secondary: 13px;   /* подзаголовки, вторичный текст, мета-строка */
  --line-height-secondary: 18px;
  --font-size-field-label: 13px; /* подпись над полем, 500 */
  --font-size-field-phone: 16px; /* поля на телефоне: iOS Safari не увеличивает страницу */
  --font-size-label: 12px;       /* шапки таблиц, подписи групп навигации — 500, обычным регистром */
  --line-height-label: 16px;
  --font-size-hint: 12px;        /* подписи, сноски, вторая строка ячейки */
  --line-height-hint: 16px;
  --letter-spacing-label: 0;
  --font-size-metric: 22px;      /* ключевые суммы: плитки, полоса денег — моно, 600 */
  --line-height-metric: 30px;

  /* Поверхности и фон */
  --bg-page: #F4F5F7;          /* фон за панелями */
  --surface: #FFFFFF;          /* панели, таблицы, навигация */
  --surface-subtle: #F9FAFB;   /* шапки таблиц, вложенные блоки, подвалы панелей */

  /* Текст (контраст — на белом) */
  --text: #161B26;             /* основной, 17,2 : 1 */
  --text-secondary: #535D6F;   /* вторичный, 6,6 : 1 */
  --text-muted: #646E80;       /* подписи; 5,1 : 1 на белом, 4,7 : 1 на фоне */
  --text-faint: #8A94A6;       /* только декор: шевроны, «/» в крошках. Не для текста */
  --text-disabled: #98A2B3;    /* надпись недоступной кнопки */

  /* Границы */
  --border-panel: #E4E7EC;     /* панели, шапки таблиц */
  --border-soft: #EEF0F3;      /* разделители строк и внутри панелей */
  --border-control: #CDD3DD;   /* поля, вторичные кнопки */

  /* Брендовая тёмная навигация */
  --brand-dark: #171d2b;
  --brand-dark-active: #232e4a;
  --brand-dark-text: #9aa4b8;

  /* Акцент */
  --accent: #2f54c9;
  --accent-hover: #2748ad;
  --accent-bg: #EEF2FC;        /* выбранный пункт, кольцо фокуса, инфо-фон */
  --accent-border: #C9D5F4;

  /* Семантические триады: текст / фон / граница. Статус всегда словом:
   * красный — деньги и сбои, жёлтый — нужно действие, синий — справка */
  --danger: #B42318;           /* долг, сбои; 6,0 : 1 */
  --danger-bg: #FEF3F2;
  --danger-border: #FECDCA;

  --success: #067647;          /* «Действует», «Оплачен», «готово»; 5,4 : 1 */
  --success-bg: #ECFDF3;
  --success-border: #ABEFC6;

  --warning: #B54708;          /* нужно действие; 5,2 : 1 */
  --warning-bg: #FFFAEB;
  --warning-border: #FEDF89;
  --warning-row-bg: #FFFCF5;   /* строка таблицы, ждущая действия */

  --neutral: #475467;          /* «Черновик», «прогноз», «Отправлен»; 7,0 : 1 */
  --neutral-bg: #F2F4F7;
  --neutral-border: #E4E7EC;

  --info: #2F54C9;             /* справка: «Просмотрен арендатором», «индексация»; 5,8 : 1 */
  --info-bg: #EEF2FC;
  --info-border: #C9D5F4;

  --warning-title: #7A2E0E;    /* заголовок блока «Требует действия» на жёлтом */
  --field-error-border: #D92D20; /* рамка поля с ошибкой */
  --success-dot: #12B76A;      /* точки таймлайна, полосы, прогресс — не для текста */
  --success-ring: #D1FADF;     /* кольцо текущей точки таймлайна (холст «Карточка договора») */
  --warning-dot: #F79009;      /* ожидающая точка, полоса старения — не для текста */

  /* Контролы */
  --control-height: 36px;      /* кнопки и поля */
  --control-height-sm: 32px;   /* кнопки в строках таблиц и шапках панелей */
  --focus-ring: 0 0 0 3px var(--accent-bg);
  --shadow-card: none;         /* панели — граница без тени */
  --radius: 8px;               /* кнопки, поля, пункты навигации */
  --radius-panel: 10px;        /* панели, плитки, модальные окна */
  --radius-badge: 6px;         /* метки и бейджи */
  --radius-pill: 999px;        /* счётчики */

  /* Тёмная навигация — детали (сайдбар 196px из CRM-макета) */
  --sidebar-width: 232px;            /* светлая навигация CRM v2 (раздел 5 спецификации) */
  --brand-dark-border: #232b3d;     /* разделители внутри тёмной навигации */
  --brand-dark-text-bright: #e8ebf2; /* активный пункт, лого */
  --brand-dark-text-soft: #c6cddc;   /* имя пользователя в футере сайдбара */
  --brand-dark-control: #3d4a68;     /* рамка бургера, фон аватара */
  --avatar-text: #dfe4ee;
  --nav-badge-bg: #b25e09;           /* бейдж-счётчик пункта навигации */
  --nav-badge-muted: #6a7488;        /* счётчик без акцента */
  --backdrop: rgba(23, 29, 43, .45); /* подложка drawer и модалов */
  --shadow-action-bar: 0 -4px 12px rgba(23, 29, 43, .06);
  --row-hover: #F9FAFB;

  /* Мелкая типографика компонентов */
  --font-size-mono-cell: 13px;   /* суммы в ячейках таблиц */
  --font-size-chip: 12px;        /* метки, бейджи и счётчики */

  /* Таблица: ячейки 11 / 12, крайние 20 — задел под настройку плотности
   * «Удобно / Плотно» (отдельная задача: нужна настройка сотрудника) */
  --table-cell-pad-y: 11px;
  --table-cell-pad-x: 12px;
  --table-cell-pad-edge: 20px;
  --table-head-pad-y: 10px;
  --tab-height: 40px;            /* вкладка */
  --counter-size: 20px;          /* счётчик-пилюля */
  --kv-row-pad-y: 9px;           /* строка списка «подпись — значение» */

  /* Отступы: шкала холста «Основа» (4 · 8 · 12 · 16 · 20 · 24 · 32) и
   * промежуточные шаги макетов (2 · 6 · 10 · 14 · 18) */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Боковые поля страницы (разделы 5 и 9 спецификации): шапка экрана и
   * блоки во всю ширину — вровень с полями контента каркаса */
  --page-gutter: 32px;           /* десктоп ≥ 1180 */
  --page-gutter-tablet: 24px;    /* 768–1179 */
  --page-gutter-phone: 16px;     /* < 768 */

  /* Касание и размеры окон */
  --touch-target: 44px;          /* зона нажатия при pointer: coarse */
  --modal-width: 440px;          /* модальное окно; на телефоне — min(440, 100vw − 32) */

  /* Барчарт платёжной дисциплины (карточка должника, из CRM-макета) */
  --disc-bar: #aab6cc;       /* задержка в норме */
  --disc-bar-late: #d9822b;  /* задержка ≥ 6 дней */

  /* Точка компакт-режима: <1180px сайдбар прячется за бургер */
  --compact-breakpoint: 1180px; /* справочно: в @media переменные не работают */
}

/* Шрифты Onest / JetBrains Mono self-hosted в app/assets/fonts и подключены
 * в fonts.css (Onest — общий с кабинетом арендатора) — CDN не используется. */

/* ============================================================
 * Навигация CRM v2 (docs/design-crm-v2.md, разделы 3 и 5): светлая
 * панель — фон и граница, пункт и иконка, наведение, выбранный пункт.
 * Ширина панели — --sidebar-width в CRM-группе выше; стили — shell.css.
 * ============================================================ */
:root {
  --nav-bg: #FFFFFF;
  --nav-border: var(--border-panel);
  --nav-text: #344054;
  --nav-icon: #667085;
  --nav-hover-bg: #F2F4F7;
  --nav-active-bg: var(--accent-bg);
  --nav-active-text: var(--accent);
}

/* ============================================================
 * Токены кабинета арендатора v2 (layout "portal"): группа --ios-*.
 * Источник — доска «Кабинет арендатора v2.dc.html» (:root) и записка
 * дизайнера, раздел 2; решения v2 §2. Живут здесь же: правило «никаких
 * hex вне tokens.css» — общее для всего приложения. CRM-токены выше не
 * меняются; кабинет берёт статусы и акцент из них через алиасы.
 * Значения телефона — по умолчанию; десктоп — медиазапрос от 900px ниже
 * (в прототипе вместо него атрибут data-vp="desktop"); reduced motion
 * обнуляет длительности. Всё переключается в CSS, без JS.
 * ============================================================ */
:root {
  /* --- Шрифты (записка, раздел 1: Onest — основной, JetBrains Mono — суммы) --- */
  --ios-font: "Onest", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --ios-font-mono: var(--font-mono);            /* отдельно стоящие суммы: hero, строки, итоги */

  /* --- Цвет: фоны и поверхности --- */
  --ios-bg: #F2F2F7;                            /* фон страницы; вторичная кнопка и пресеты на белом */
  --ios-surface: #ffffff;                       /* группы «подпись — значение», листы, диалог, поля */
  --ios-nav-bg: rgba(242, 242, 247, .9);        /* панель навигации с размытием */
  --ios-nav-bg-solid: var(--ios-bg);            /* панель без backdrop-filter */
  --ios-nav-blur: saturate(180%) blur(20px);    /* размытие панели — только внутри @supports */
  --ios-fill-disabled: #e5e5ea;                 /* заливка недоступной кнопки */
  --ios-skeleton-fill: var(--ios-fill-disabled); /* новый: блоки скелетона на обоих фонах */
  --ios-backdrop: var(--backdrop);              /* подложка листа и диалога (алиас CRM) */

  /* --- Цвет: текст --- */
  --ios-text: #1c1c1e;                          /* основной текст; сумма в hero */
  --ios-text-secondary: #6c6c70;                /* вторичный текст, надстрочники (5,23 / 4,69) */
  --ios-text-disabled: #8e8e93;                 /* только на самом недоступном элементе (2,60) */
  --ios-text-on-accent: #ffffff;                /* текст на акцентной заливке */

  /* --- Цвет: акцент — «можно нажать» (общий с CRM) --- */
  --ios-accent: #2f54c9;
  --ios-accent-hover: #2748ad;                  /* наведение (= CRM --accent-hover) */
  --ios-accent-active: #213e97;                 /* нажатие */
  --ios-accent-tint: #e6ebf9;                   /* второстепенная кнопка-таблетка на сером */

  /* --- Цвет: линии и значки --- */
  --ios-separator: rgba(60, 60, 67, .12);       /* только разделители (декор) */
  --ios-control-border: #7c7c80;                /* рамки полей и чекбоксов (≥ 3:1 на обоих фонах) */
  --ios-icon-muted: #86868b;                    /* шевроны, значки, кольцо ленты — не текст */

  /* --- Фокус: outline, не box-shadow (виден в режиме принудительных цветов) --- */
  --ios-focus: var(--ios-accent);
  --ios-focus-width: 2px;
  --ios-focus-offset: 2px;

  /* --- Статусы: алиасы CRM-триад; нейтральная подложка своя (CRM на сером 1,02) --- */
  --ios-status-danger: var(--danger);           /* просрочка и ошибки */
  --ios-status-danger-bg: var(--danger-bg);
  --ios-status-danger-row: #fdf4f4;             /* просроченная строка таблицы (вместо --warning-row-bg) */
  --ios-status-success: var(--success);         /* оплачено, выполнено, принято, подписано */
  --ios-status-success-bg: var(--success-bg);
  --ios-status-warning: var(--warning);         /* частичная оплата, близкий срок, ожидание */
  --ios-status-warning-bg: var(--warning-bg);
  --ios-status-neutral: var(--neutral);         /* всё остальное */
  --ios-status-neutral-bg: #e5e5ea;

  /* --- Типографика: шорткаты для font, начертания только 400 и 600.
   *     font сбрасывает font-variant-numeric — tabular-nums ставить после --- */
  --ios-tracking-title: -.01em;                 /* кегли 28–32 */
  --ios-tracking-display: -.02em;               /* кегли от 40 и сумма в hero */
  --ios-type-body: 400 17px/25px var(--ios-font);
  --ios-type-button: 400 17px/22px var(--ios-font);
  --ios-type-button-nav: 400 14px/18px var(--ios-font);   /* пункты и таблетка панели */
  --ios-type-nav-title: 600 17px/22px var(--ios-font);    /* новый: название договора в панели */
  --ios-type-secondary: 400 15px/20px var(--ios-font);    /* вторичный текст и надстрочник */
  --ios-type-table: 400 14px/20px var(--ios-font);
  --ios-type-table-head: 600 12px/16px var(--ios-font);
  --ios-type-badge: 600 12px/16px var(--ios-font);
  --ios-type-caption: 400 12px/16px var(--ios-font);      /* подписи и сноски; 11px не используем */

  /* --- Сумма в hero: кегль по формуле от ширины контейнера (решения v2 §2).
   *     advance — ширина знака JetBrains Mono в em --- */
  --ios-amount-min: 32px;
  --ios-amount-max: 48px;
  --ios-amount-max-wide: 56px;                  /* только в контейнере от 440px */
  --ios-amount-advance: .6;
  --ios-amount-leading: 1.15;

  /* --- Отступы: шкала с шагом 4 --- */
  --ios-space-1: 4px;
  --ios-space-2: 8px;
  --ios-space-3: 12px;
  --ios-space-4: 16px;
  --ios-space-5: 20px;
  --ios-space-6: 24px;
  --ios-space-8: 32px;
  --ios-space-12: 48px;
  --ios-space-16: 64px;
  --ios-space-20: 80px;
  --ios-space-24: 96px;

  /* --- Радиусы --- */
  --ios-card-radius: 20px;                      /* группы (было 26) */
  --ios-radius-sheet: 20px;                     /* верх листа, диалог */
  --ios-radius-field: 12px;                     /* поля ввода, меню панели */
  --ios-radius-plate: 10px;                     /* плашки: просрочка, обещание, flash */
  --ios-radius-badge: 6px;                      /* бейджи и чипы */
  --ios-radius-check: 5px;                      /* чекбоксы */
  --ios-radius-pill: 999px;                     /* кнопки-таблетки */

  /* --- Тени: только у всплывающих элементов --- */
  --ios-shadow-popover: 0 4px 16px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);  /* меню панели, переключатель договоров */
  --ios-shadow-dialog: 0 24px 64px rgba(0, 0, 0, .16), 0 4px 16px rgba(0, 0, 0, .06); /* диалог на десктопе */

  /* --- Движение: при reduced motion — 0 (ниже) --- */
  --ios-duration-fast: 240ms;                   /* раскрытие строки, шеврон, «Скопировано» */
  --ios-duration: 320ms;                        /* лист, диалог */
  --ios-duration-shimmer: 1400ms;               /* мерцание скелетона */
  --ios-ease: cubic-bezier(.4, 0, .6, 1);

  /* --- Слои: лист и диалог — нативный <dialog> в верхнем слое, z-index не нужен --- */
  --ios-z-sticky: 10;                           /* шапка таблицы */
  --ios-z-nav: 100;                             /* панель навигации */
  --ios-z-menu: 200;                            /* меню панели, переключатель договоров */

  /* --- Размеры --- */
  --ios-nav-pill-height: 30px;                  /* таблетка «Оплатить» в панели */
  --ios-touch-min: 44px;                        /* цель нажатия на телефоне */
  --ios-target-min: 24px;                       /* цель нажатия на десктопе */
  --ios-button-height: 52px;                    /* главная кнопка */
  --ios-field-height: 54px;                     /* поле ввода */
  --ios-row-height: 52px;                       /* строка группы-списка */
  --ios-table-row: 48px;                        /* строка таблицы бухгалтера */
  --ios-table-head: 40px;                       /* новый: высота липкой шапки таблицы бухгалтера (12/16 + 2 × 12); на неё же строки докручиваются из-под шапки при фокусе */
  --ios-check-size: 20px;                       /* чекбокс */

  /* --- Контейнеры (ширина содержимого, без полей экрана) --- */
  --ios-container-narrow: 430px;                /* вход, «Ссылка устарела», заявки */
  --ios-container-invoice: 760px;               /* счёт */
  --ios-container-wide: 1120px;                 /* главная, договор, панель навигации */
  --ios-measure: 680px;                         /* колонка текста на десктопе */
  --ios-home-side: 360px;                       /* левая колонка главной */
  --ios-lease-side: 440px;                      /* левая колонка договора */
  --ios-dialog-width: 560px;                    /* новый: листы «Оплата» и обещания на десктопе — диалог по центру */

  /* --- Дизайн v3 (T1): плавающая нижняя панель телефона (до 900px).
   *     Стекло — только внутри @supports, иначе сплошной белый фон;
   *     значки и подписи — основным цветом: на стекле контраст ≥ 9:1
   *     даже над тёмным содержимым под панелью --- */
  --ios-tabbar-bg: rgba(255, 255, 255, .74);    /* стекло панели */
  --ios-tabbar-bg-solid: var(--ios-surface);    /* панель без backdrop-filter */
  --ios-tabbar-blur: saturate(160%) blur(20px); /* размытие под панелью */
  --ios-tabbar-shadow: 0 0 0 1px rgba(60, 60, 67, .12), 0 24px 48px -12px rgba(0, 0, 0, .18);
  --ios-tabbar-pad: 6px;                        /* поле капсулы вокруг вкладок */
  --ios-tabbar-height: calc(var(--ios-touch-min) + 2 * var(--ios-tabbar-pad)); /* 56 */
  --ios-tabbar-offset: var(--ios-space-4);      /* от нижнего края экрана (над safe-area) */
  --ios-tabbar-max: calc(100vw - 2 * var(--ios-space-4)); /* капсула не шире экрана без полей */
  /* Место внизу страницы под панелью: содержимое, подвал и фокус
   * (scroll-padding-bottom) не уходят под неё */
  --ios-tabbar-clearance: calc(var(--ios-tabbar-height) + 2 * var(--ios-tabbar-offset) + env(safe-area-inset-bottom, 0px));
  --ios-tab-icon: 20px;                         /* значок вкладки */
  --ios-tab-current-bg: var(--ios-text);        /* выбранная вкладка — тёмная таблетка */
  --ios-tab-current-text: var(--ios-surface);   /* подпись на ней (17,0:1) */
  --ios-tab-hover-bg: rgba(60, 60, 67, .08);    /* наведение и нажатие невыбранной вкладки */

  /* --- Дизайн v3 (T2): чек «Оплачено» --- */
  --ios-receipt-width: 340px;                   /* ширина чека */
  --ios-receipt-rule: #aeaeb2;                  /* пунктирные разделители (декор) */
  --ios-receipt-shadow: drop-shadow(0 12px 24px rgba(0, 0, 0, .12)) drop-shadow(0 0 1px rgba(60, 60, 67, .32)); /* тень по форме рваного края */
  --ios-receipt-tooth: 12px;                    /* шаг зубцов рваного края; высота зубца — половина */
  /* Рваный край — маской: зубцы вниз по нижней кромке; браузер без
   * mask — ровный край */
  --ios-receipt-edge: conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) 50% / var(--ios-receipt-tooth) 100%;
  --ios-type-receipt: 400 15px/22px var(--ios-font-mono);  /* строки чека: моно, табличные цифры */
  --ios-type-receipt-title: 600 20px/26px var(--ios-font); /* «Оплачено» */

  /* --- Телефон (по умолчанию): кегли страницы и ритм --- */
  --ios-type-h1: 600 28px/34px var(--ios-font);           /* h1 главной */
  --ios-tracking-h1: var(--ios-tracking-title);
  --ios-type-h1-page: 600 28px/34px var(--ios-font);      /* h1 договора и счёта */
  --ios-tracking-h1-page: var(--ios-tracking-title);
  --ios-type-subtitle: 400 20px/26px var(--ios-font);
  --ios-type-block: 600 21px/26px var(--ios-font);        /* заголовок блока, без капса */
  --ios-nav-height: 48px;
  --ios-gutter: 20px;                           /* поля экрана (было 16) */
  --ios-gap-section: 32px;
  --ios-gap-hero: 48px;

  /* Якоря и фокус не прячутся под липкой панелью: scroll-padding-top
   * скроллера и scroll-margin-top якорей (в т. ч. #term-<id>) */
  --ios-scroll-offset: calc(var(--ios-nav-height) + env(safe-area-inset-top, 0px));
}

/* Десктоп кабинета (бриф §6: от 900px; в прототипе — data-vp="desktop") */
@media (min-width: 900px) {
  :root {
    --ios-type-h1: 600 32px/38px var(--ios-font);
    --ios-type-h1-page: 600 44px/50px var(--ios-font);
    --ios-tracking-h1-page: var(--ios-tracking-display);
    --ios-type-subtitle: 400 26px/32px var(--ios-font);
    --ios-type-block: 600 24px/30px var(--ios-font);
    --ios-nav-height: 52px;
    --ios-gutter: 32px;
    --ios-gap-section: 64px;
    --ios-gap-hero: 80px;
  }
}

/* Движение отключаемо: все длительности 0, скелетон не мерцает */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ios-duration-fast: 0ms;
    --ios-duration: 0ms;
    --ios-duration-shimmer: 0ms;
  }
}