/* ============================================================
   TRAVEL CRM LITE — UNIFIED DESIGN SYSTEM
   Побудовано на основі аналізу 40 прототипів "Disign For CRM"
   Стиль: "quiet luxury" — Cinzel + Inter, wine/gold, гострі кути.
   ============================================================ */
/* Раніше цей імпорт жив тільки в app.css. Коли app.css прибрали
   з підключення, Cinzel/Inter перестали вантажитись — усе тихо
   впало на fallback (Georgia/системний serif), звідси й "не такі"
   цифри та бейджі. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   СТРУКТУРА ФАЙЛУ:
   1. Tokens (CSS custom properties)
   2. Reset / base
   3. Layout shell (sidebar, topbar, main)
   4. Buttons
   5. Cards
   6. Forms
   7. Tables
   8. Badges / status (уніфікація 8 старих варіантів)
   9. Tabs (underline + card variants)
   10. KPI / stat cards
   11. Chips (фільтри-теги, відмінні від badge)
   12. Pagination
   13. Empty state
   14. Modal
   15. Утиліти

   Про мапінг старих класів прототипів на ці — див.
   CLASS-MAPPING.md, що йде поруч.
   ============================================================ */

/* ============================================================
   1. TOKENS
   Значення взяті з мажоритарного консенсусу (36-40 з 40 файлів
   давали ідентичні значення). Три "розповзлі" змінні (--danger,
   --danger-soft, --font-sans) зведені до найчастішого варіанту.
   ============================================================ */
:root {
  /* Кольори */
  --bg-main: #F5F2EB;
  --bg-card: #FFFFFF;
  --color-wine: #581825;
  --color-wine-dark: #3B0F18;
  --color-gold: #C5A880;
  --color-gold-light: #F4EFE6;
  --text-dark: #2A2324;
  --text-muted: #7A7273;
  --border-thin: #DCD5CB;

  --success: #3F5B45;
  --success-soft: #EEF2EC;
  --danger: #A03A2B;
  --danger-soft: #FAF2F0;
  --amber: #8A5A00;
  --amber-soft: #FBF3E4;
  --warning: var(--amber);
  --warning-soft: var(--amber-soft);
  --orange: #A15A2C;
  --orange-soft: #F8ECE1;

  /* Типографіка */
  --font-serif: 'Cinzel', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Рух */
  --cubic-luxury: cubic-bezier(0.25, 1, 0.5, 1);

  /* Розміри шару (для узгодженості spacing між сторінками) */
  --sidebar-width: 264px;
  --content-max-width: 1560px;
  --radius: 0px; /* система свідомо "гострокутна" — жодних border-radius на каркасі */
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--bg-main);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
::selection { background: var(--color-gold-light); color: var(--color-wine); }

/* ============================================================
   3. LAYOUT SHELL
   Канонічні класи (мажоритарні у прототипах): .app-layout,
   .sidebar, .brand-block, .nav-list, .nav-item, .main-content,
   .topbar, .page-title, .topbar-actions.
   Старі синоніми з меншості прототипів (.shell, .nav, .main,
   .sidebar-logo/.sidebar-copy) — див. CLASS-MAPPING.md.
   ============================================================ */
.app-layout,
body.app-body { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-wine-dark);
  border-right: 1px solid rgba(197, 168, 128, .12);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 34px 0 24px;
  overflow-y: auto;
}
.brand-block { padding: 0 20px 26px; display: flex; align-items: center; gap: 12px; }
.brand-copy { flex: 1; min-width: 0; overflow: hidden; }
.brand-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #fff;
  letter-spacing: .1em;
  white-space: nowrap;
}
.brand-subtitle {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--color-gold);
  margin-top: 4px;
  white-space: nowrap;
}

/* Логотип-плитка: підтримує або зображення (settings.logo_path),
   або ініціал бренду — обидва варіанти реальні для продакшену,
   у статичних прототипах цього немає. */
.logo-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(197, 168, 128, .5);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-serif); color: var(--color-gold); font-size: 15px;
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; }
/* У сайдбарі логотип не є кнопкою чи карткою: прибираємо рамку,
   щоб знак бренду виглядав як частина шапки. */
.sidebar .logo-mark { border: 0; background: transparent; }

/* Кнопка згортання сайдбару — реальна фіча продакшену (localStorage),
   якої немає в статичних прототипах. */
.sidebar-toggle {
  width: 24px; height: 24px; flex-shrink: 0;
  display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(197, 168, 128, .3);
  color: var(--color-gold); cursor: pointer;
}
.sidebar-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .3s var(--cubic-luxury); }
html.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.sidebar .nav-list { list-style: none; display: flex; flex-direction: column; }
.sidebar .nav-caption {
  padding: 14px 24px 6px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(213, 207, 201, .4);
  font-weight: 600;
}

/* .nav-item сидить на <li> — обнуляємо ЙОГО власний box (padding,
   border-radius, background, box-shadow, +сусідній градієнт-роздільник)
   з достатньою специфічністю (.sidebar-префікс), щоб гарантовано
   перебити всі 7 старих раундів .nav-item.active з app.css, а не
   покладатись тільки на порядок підключення файлів. */
.sidebar .nav-item { padding: 0; margin: 0; border: none; border-radius: 0; background: none; box-shadow: none; min-height: 0; }
.sidebar .nav-item + .nav-item { background-image: none; }
.sidebar .nav-item:hover { background: none; }
.sidebar .nav-item.active { background: none; box-shadow: none; padding-left: 0; }

.sidebar .nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #D5CFC9;
  text-decoration: none;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 10px 24px;
  transition: all .35s var(--cubic-luxury);
  border-left: 2px solid transparent;
}
.sidebar .nav-item svg { stroke: currentColor; stroke-width: 1.3; fill: none; width: 16px; height: 16px; flex-shrink: 0; }
.sidebar .nav-item.active a,
.sidebar .nav-item a:hover { color: var(--color-gold); }
.sidebar .nav-item.active a { border-left-color: var(--color-gold); background: rgba(197, 168, 128, .07); }
.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active svg { color: var(--color-gold); }

/* --- Авторство внизу сайдбару: перевикористовує .sidebar-footer/-rule/
   -label/-author (розділ 14, вже стилізовані для темного винного тла
   login-екрана — тут той самий колір фону, .color-wine-dark). Нових
   класів не додаємо, лише прицільно докручуємо під .sidebar:
   .sidebar — flex-колонка без flex-grow на .nav-list, тож
   margin-top:auto притискає підпис до самого низу; риску звужено до
   22px (вужчий сайдбар, ніж половина екрана логіну, де вона 28px). --- */
.sidebar .sidebar-footer { margin-top: auto; padding: 24px 20px 4px; }
.sidebar .sidebar-footer-rule { width: 22px; }

/* Compact account-menu language switcher. */
.user-menu, .user-chip { position: relative; }
.topbar .user-menu, .topbar .user-chip, .page-header .user-menu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.tcrm-language-menu { position: relative; display: inline-flex; }
.user-chip .tcrm-language-menu { order: -1; }
.tcrm-language-standalone { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 12px; }
.tcrm-language-standalone > a { color: var(--text-dark); text-decoration: none; }
.tcrm-language-standalone > a:hover { color: var(--color-wine); text-decoration: underline; }
.tcrm-language-topbar-actions { margin-left: auto; }
.tcrm-language-trigger { min-width: 40px; height: 30px; padding: 0 9px; border: 1px solid var(--border-thin); background: transparent; color: var(--color-wine); font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .1em; cursor: pointer; }
.tcrm-language-trigger:hover, .tcrm-language-menu.is-open .tcrm-language-trigger { border-color: var(--color-gold); background: var(--color-gold-light); }
.tcrm-language-options { display: none; position: absolute; z-index: 1500; right: 0; top: calc(100% + 7px); min-width: 152px; padding: 6px; border: 1px solid var(--border-thin); background: #fffdfa; box-shadow: 0 14px 30px rgba(59, 15, 24, .16); }
.tcrm-language-menu.is-open .tcrm-language-options { display: grid; }
.tcrm-language-option { width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--text-dark); text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.tcrm-language-option:hover, .tcrm-language-option.is-active { background: var(--color-gold-light); color: var(--color-wine); }
.tcrm-language-option.is-active::after { content: '✓'; float: right; color: var(--color-wine); font-weight: 800; }
.tcrm-language-feedback { display: none; margin: 5px 5px 2px; color: #a64534; font-size: 11px; line-height: 1.35; }
.tcrm-language-feedback:not([hidden]) { display: block; }
@media (max-width:700px) {
  .topbar .user-menu, .topbar .user-chip, .page-header .user-menu { width: auto; }
  .tcrm-language-options { right: 0; }
}

/* Згорнутий стан сайдбару (клас на <html>, керується JS у tcrm_sidebar()) */
html.sidebar-collapsed .sidebar { width: 72px; }
html.sidebar-collapsed .brand-block { flex-direction: column; padding: 0 8px 20px; gap: 10px; }
html.sidebar-collapsed .brand-copy,
html.sidebar-collapsed .nav-caption { display: none; }
html.sidebar-collapsed .sidebar .nav-item a { justify-content: center; padding: 10px 4px; }
html.sidebar-collapsed .nav-label { display: none; }
html.sidebar-collapsed .sidebar-footer { display: none; }

/* .app-main — фактична назва <main> у tourist.php/tourists.php
   (та інших "живих" сторінках); .main-content лишився з ранніх
   прототипів. Обидва мають однакові відступи, інакше сторінки,
   що використовують .app-main, лишаються без padding — шапка
   (.topbar) і .luxury-card впритул до країв вікна. */
.main-content,
.app-main { flex: 1; min-width: 0; padding: 44px 52px 72px; max-width: var(--content-max-width); }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-thin);
  gap: 20px;
  flex-wrap: wrap;
}
.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.page-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--color-wine);
}
.page-lead { display: block; font-size: 13px; color: var(--text-muted); margin-top: 6px; max-width: 760px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--border-thin);
  font-size: 12px;
}
.user-chip a { color: var(--text-muted); text-decoration: none; }

/* ============================================================
   4. BUTTONS
   Канонізовано з 6 варіантів .btn{} у прототипах — обрано
   найповніший (з letter-spacing .14em, transition var(--cubic-luxury)).
   .btn-ghost зі старих прототипів → аліас на .btn-minimal.
   ============================================================ */
.btn {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: all .3s var(--cubic-luxury);
  text-decoration: none;
  white-space: nowrap;
  background: none;
}
.btn-primary { background: var(--color-wine); color: #fff; padding: 13px 26px; }
.btn-primary:hover { background: var(--color-wine-dark); color: var(--color-gold); }

.btn-secondary { background: var(--color-gold-light); border-color: var(--color-gold); color: var(--color-wine); padding: 11px 18px; }
.btn-secondary:hover { background: var(--color-gold); }

/* Незворотна підтверджена дія (наприклад, обʼєднання карток) має
   відрізнятися від звичайної основної кнопки ще до прочитання тексту. */
.btn-danger { background: var(--danger); color: #fff; padding: 13px 26px; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 82%, #000); color: #fff; }

.btn-minimal,
.btn-ghost /* аліас старої назви */ {
  background: transparent;
  border-color: var(--border-thin);
  color: var(--text-dark);
  padding: 11px 18px;
}
.btn-minimal:hover,
.btn-ghost:hover { border-color: var(--color-gold); color: var(--color-wine); }

/* --- Небезпечна текстова дія (видалити документ тощо) — той самий
   .btn-ghost, лише колір тексту тривожний. Для підтвердженої основної
   дії використовується .btn-danger вище. --- */
.btn-ghost.danger-text { color: var(--danger); }
.btn-ghost.danger-text:hover { border-color: var(--danger); color: var(--danger); }

.btn-minimal.tiny,
.btn-secondary.tiny,
.btn.tiny { padding: 7px 12px; font-size: 10px; }

.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- SVG-іконки всередині кнопок (напр. стрілка в "Увійти знову" на
   session-guard) — без цього правила голий <svg viewBox="..."> без
   власних width/height рендериться браузером у дефолтні 300×150px. --- */
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* --- .modal-icon: кругла іконка над заголовком модалки (напр.
   "Час сесії вичерпано" у session-guard.js) — той самий фікс
   розміру svg, що й вище, плюс сама кругла рамка. --- */
.modal-icon { width: 64px; height: 64px; margin: 32px auto 0; border: 1px solid var(--color-gold); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.modal-icon svg { width: 26px; height: 26px; stroke: var(--color-wine); stroke-width: 1.5; fill: none; }

/* ============================================================
   5. CARDS
   ============================================================ */
.luxury-card {
  background: var(--bg-card);
  border: 1px solid var(--border-thin);
  box-shadow: 0 4px 24px rgba(88, 24, 37, .015);
  padding: 34px;
  margin-bottom: 22px;
  min-width: 0;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-thin);
  gap: 20px;
  flex-wrap: wrap;
}
.card-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 5px;
}
.card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-wine);
  letter-spacing: .02em;
  font-weight: 500;
}
.card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; max-width: 640px; }

/* Компактна бічна картка (side-card у прототипах довідників) */
.side-card { background: var(--bg-card); border: 1px solid var(--border-thin); padding: 26px 28px; margin-bottom: 20px; }
.side-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-thin); }
.side-card-title { font-family: var(--font-serif); font-size: 16px; color: var(--color-wine); font-weight: 500; }

/* ============================================================
   6. FORMS
   ============================================================ */
.input-wrapper { position: relative; margin-bottom: 20px; }
.input-wrapper label:not(.chip-checkbox) {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 7px;
  font-weight: 700;
}
/* .chip-checkbox сам є <label>, вкладеним у .input-wrapper (поле "Сегменти") —
   без :not() вище правило (display:block + margin-bottom) перебивало власний
   display:inline-flex чіпа (та сама специфічність 0,1,1 проти 0,1,0, але
   .input-wrapper label конкретніше), ламаючи центрування чекбокса й роздуваючи
   висоту блоку. Звідси й "зміщені відносно рамок" чекбокси. */
/* :not([type=checkbox]):not([type=radio]) — інакше це правило (текстовий
   інпут з підкресленням на всю ширину) ловить і чекбокси, якщо вони
   випадково опиняються всередині .input-wrapper (напр. group чекбоксів
   "Сегменти" в формі клієнта) і повністю деформує їх вигляд. */
/* :not(.tcrm-select-search) — tcrm-select.js вставляє поле пошуку
   довгого списку (>8 опцій, SEARCH_THRESHOLD) як звичайний <input>
   усередину .tcrm-select-dropdown → .tcrm-select-wrap, а той, своєю
   чергою, вставляється в той самий .input-wrapper, де раніше стояв
   <select>. Тому це загальне правило (вищий specificity за клас
   .tcrm-select-search — тег+клас+2 :not() проти самого лише класу)
   перебивало власні padding/border пошукового інпута (розд.6b),
   обнуляючи горизонтальний відступ і рамку. Видно було лише на
   списках з пошуком (напр. "Продукт", 9 опцій) — короткі списки без
   пошуку цей баг не показували. */
.input-wrapper input:not([type="checkbox"]):not([type="radio"]):not(.tcrm-select-search),
.input-wrapper select,
.input-wrapper textarea {
  display: block;
  width: 100%;
  padding: 11px 0;
  border: none;
  border-bottom: 1px solid var(--border-thin);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-dark);
  outline: none;
  transition: border-color .3s;
  resize: vertical;
}
.input-wrapper select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 40px; line-height: 40px; padding: 0 22px 0 0; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7273' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 14px;
}
.input-wrapper select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23581825' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.input-wrapper textarea { border: 1px solid var(--border-thin); padding: 10px 12px; font-size: 12.5px; }
.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder { color: #B4ACA6; }
.input-wrapper::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px;
  background: var(--color-wine); transition: all .4s var(--cubic-luxury);
}
.input-wrapper:focus-within::after { left: 0; width: 100%; }

/* .passport-edit-form (tourist.php: редагування туриста/паспорта/
   документів) розмічає поля інакше, ніж усюди в CRM: <label>Текст
   <input></label> — інпут ВКЛАДЕНИЙ у лейбл, а не сусід йому (як у
   .input-wrapper за замовчуванням, напр. clients.php). Через це
   margin-bottom:7px лейбла (розд.6, вище) опиняється ПІСЛЯ інпута,
   а не між лейблом і інпутом — нижня межа .input-wrapper тут реально
   на 7px нижча за border-bottom інпута. Базове bottom:0 (вище) під
   таку вкладеність не підходить, тому саме тут — і тільки тут —
   повертаємо компенсацію на висоту того самого margin-bottom лейбла. */
.passport-edit-form .input-wrapper::after,
.passport-edit-form .input-wrapper:focus-within::after,
.booking-status-dialog-form .input-wrapper::after,
.booking-status-dialog-form .input-wrapper:focus-within::after {
  bottom: 7px;
}

/* align-items: end — без цього ґрід за замовчуванням розтягує кожен
   .input-wrapper на всю висоту рядка (align-items: stretch), а сам
   вміст (label+input) лишається притиснутим до ВЕРХУ своєї клітинки.
   Коли сусідні лейбли різної довжини (переносяться в 1 чи 2 рядки),
   висота клітинок вирівнюється по найвищій, і підкреслення інпутів
   в одному ряду опиняються на РІЗНІЙ висоті ("пороги"). align-items:end
   притискає сам .input-wrapper (не лише вміст) до нижньої межі клітинки,
   тому label+input усередині завжди на своїй природній висоті.
   .input-wrapper не має власного padding, а input/select/textarea —
   останній flow-елемент без власного margin, тому його border-bottom
   фізично збігається з нижньою межею .input-wrapper: і в grid-рядку
   (.input-row/.filter-row, завдяки align-items:end), і в звичайному
   вертикальному .input-wrapper без грід-батька. Звідси .input-wrapper::after
   стоїть на bottom:0 — рівно під border-bottom поля, скрізь однаково.
   (Раніше тут було bottom:7px як "компенсація" під якийсь конкретний
   кейс; на практиці воно давало видиму другу лінію на фокусі — баг
   був відтворений і в модалці клієнта/агента, і в .filter-row/.search-bar,
   що й підтвердило: причина не в конкретній формі, а в самому значенні.) */
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.input-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-note { display: block; font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.directories-page .form-section-divider { display:flex; align-items:center; gap:12px; margin:22px 0 2px; color:var(--color-wine); font:600 16px/1.2 var(--font-serif); }
.directories-page .form-section-divider::after { content:""; height:1px; flex:1; background:var(--border-thin); }
.directories-page .input-with-suffix { display:grid; grid-template-columns:minmax(0,1fr) 78px; gap:0; }
.directories-page .input-with-suffix input { min-width:0; }
.directories-page .input-with-suffix select { border-left:0; min-width:0; }
@media (max-width: 620px) { .directories-page .input-with-suffix { grid-template-columns:minmax(0,1fr) 70px; } }

/* КОНТАКТ ТУРИСТА: використовуємо існуючий .client-autocomplete, але
   вирівнюємо його видимий input 1:1 з типовим input у .input-wrapper.
   Label залишається окремим елементом, тому autocomplete більше не створює
   додатковий line box між підписом і нижньою межею поля. */
.profile-edit-form .client-autocomplete { position: relative; width: 100%; margin: 0; line-height: 0; }
.profile-edit-form .client-autocomplete-input {
  display: block; width: 100%; padding: 11px 0; border: none; border-bottom: 1px solid var(--border-thin);
  background: transparent; font-family: var(--font-sans); font-size: 13px; line-height: normal;
  color: var(--text-dark); outline: none; transition: border-color .3s;
}
.profile-edit-form .client-autocomplete-input:focus { border-bottom-color: var(--color-wine); }
.profile-edit-form .client-autocomplete-field::after { display: none; }


/* Компактні inline-поля фільтр-барів (border навколо, а не тільки знизу).
   Перейменовано .filter-bar → .filter-bar-boxed: назва .filter-bar
   зайнята іншим, "безрамковим" компонентом з clients-agents-refined
   (див. секцію 6c) — та сама колізія імен, що й раніше з .chip/.shell. */
.filter-bar-boxed {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: end;
  padding: 20px 24px; background: var(--bg-card); border: 1px solid var(--border-thin); margin-bottom: 16px;
}
.filter-bar-boxed label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; }
.filter-bar-boxed input,
.filter-bar-boxed select { height: 38px; border: 1px solid var(--border-thin); background: var(--bg-main); padding: 0 12px; font: inherit; font-size: 13px; color: var(--text-dark); }
.filter-bar-boxed input:focus,
.filter-bar-boxed select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(197,168,128,.18); }
.filter-bar-boxed-submit { height: 38px; padding: 0 20px; background: var(--color-wine); color: #fff; border: none; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.filter-bar-boxed-submit:hover { background: var(--color-wine-dark); }

/* 6c. .filter-bar — версія з clients-agents-refined: не рамка,
   а просто обгортка форми з відступом знизу перед chip-row/списком. */
.filter-bar { margin-bottom: 18px; }

/* ============================================================
   6b. UNIVERSAL CUSTOM SELECT (tcrm-select.js)
   Знайдено в старому app.css під тим самим коментарем "Universal
   Custom Select Component" — JS (tcrm-select.js) підмінює кожен
   <select> на .tcrm-select-wrap з кастомним тригером і listbox,
   а сам <select> ховає (.tcrm-select-hidden). Переносимо логіку
   1:1, стилізацію — під наші токени (без border-radius, золото/
   вино замість --brand/--accent).
   ============================================================ */
select.tcrm-select-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden; }
/* До ініціалізації JS ховаємо "голий" нативний select, щоб не було
   спалаху неозброєного контролу — так само, як робив старий app.css. */
select:not(.tcrm-select-hidden):not([data-native]):not([multiple]) { opacity: 0; pointer-events: none; transition: none; }

.tcrm-select-wrap { position: relative; display: block; width: 100%; }
.tcrm-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 0; border: none; border-bottom: 1px solid var(--border-thin);
  background: transparent; color: var(--text-dark);
  font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  text-align: left; cursor: pointer; outline: none; transition: border-color .3s;
}
.tcrm-select-trigger:hover { border-color: var(--color-gold); }
.tcrm-select-wrap.open .tcrm-select-trigger,
.tcrm-select-trigger:focus { border-color: var(--color-wine); }
.tcrm-select-wrap.disabled .tcrm-select-trigger { opacity: .5; cursor: not-allowed; }

.tcrm-select-value {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dark);
  /* label часто uppercase+bold — значення селекта має лишатись звичайним текстом */
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px;
  font-family: var(--font-sans);
}
.tcrm-select-value.placeholder { color: #B4ACA6; font-weight: 400 !important; }

.tcrm-select-arrow { flex-shrink: 0; color: var(--text-muted); display: flex; align-items: center; transition: transform .2s; }
.tcrm-select-wrap.open .tcrm-select-arrow { transform: rotate(180deg); color: var(--color-wine); }

.tcrm-select-dropdown {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); min-width: 100%; max-width: 360px;
  max-height: 280px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-thin);
  box-shadow: 0 14px 34px rgba(88, 24, 37, .14); z-index: 400;
  font-weight: 400; text-transform: none; letter-spacing: normal;
  font-family: var(--font-sans);
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) var(--bg-main);
}
.tcrm-select-dropdown::-webkit-scrollbar { width: 8px; }
.tcrm-select-dropdown::-webkit-scrollbar-track { background: var(--bg-main); }
.tcrm-select-dropdown::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border: 2px solid var(--bg-main);
}
.tcrm-select-dropdown::-webkit-scrollbar-thumb:hover { background: var(--color-wine); }
.tcrm-select-dropdown.open { display: block; }
.tcrm-select-dropdown.up { top: auto; bottom: calc(100% + 6px); }

.tcrm-select-search {
  display: block; width: calc(100% - 16px); margin: 8px 8px 6px; padding: 7px 10px;
  border: 1px solid var(--border-thin); background: var(--bg-main); color: var(--text-dark);
  font: inherit; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal;
  outline: none; position: sticky; top: 0; z-index: 1;
}
.tcrm-select-search:focus { border-color: var(--color-gold); }
/* Короткі списки: додайте class="no-search" на wrap або data-no-search на select (JS) */
.tcrm-select-wrap.no-search .tcrm-select-search,
[data-compact-selects] .tcrm-select-search {
  display: none !important;
}
.tcrm-select-empty { padding: 10px 12px; font-size: 12px; font-weight: 400; text-transform: none; color: var(--text-muted); text-align: center; }

.tcrm-select-option {
  padding: 9px 12px; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--text-dark); cursor: pointer;
  border-bottom: 1px solid var(--border-thin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcrm-select-option:last-child { border-bottom: none; }
.tcrm-select-option:hover { background: var(--color-gold-light); }
.tcrm-select-option.selected { background: var(--color-gold-light); color: var(--color-wine); font-weight: 700; }
.tcrm-select-option.disabled { color: var(--text-muted); cursor: not-allowed; opacity: .6; }

.tcrm-select-group-label {
  display: block; padding: 6px 12px 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); border-bottom: 1px solid var(--border-thin); background: var(--bg-main);
}

/* ============================================================
   6c. PASSPORT RECOGNITION UPLOAD (.passport-recognize)
   Блок "Розпізнати з фото (Claude API)" у формах паспорта/документа
   (tourist.php, tourists.php) — раніше без жодного CSS, тому лейбл +
   нативна кнопка "Вибрати файл" + кнопка "Розпізнати паспорт" просто
   падали одне під одне звичайним потоком блоків.
   ============================================================ */
.passport-recognize {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--bg-main); border: 1px solid var(--border-thin);
}
.passport-recognize .field-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; flex: 1 1 260px;
  text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--text-muted); font-weight: 600;
}
.passport-recognize input[type="file"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 11.5px; color: var(--text-dark);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.passport-recognize input[type="file"]::file-selector-button {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 14px; margin-right: 10px; cursor: pointer;
  background: var(--bg-card); color: var(--text-dark); border: 1px solid var(--border-thin);
  transition: all .3s var(--cubic-luxury);
}
.passport-recognize input[type="file"]::file-selector-button:hover { border-color: var(--color-gold); color: var(--color-wine); }
.passport-recognize .btn { flex-shrink: 0; }
.passport-recognize-status { flex: 1 1 100%; font-size: 11px; color: var(--text-muted); }
.passport-recognize-status:empty { display: none; }

/* ============================================================
   6d. CUSTOM DATE PICKER (tcrm-date)
   Аналог 6b (.tcrm-select-*): нативний <input type="date"> ховаємо
   (.tcrm-date-hidden — лишається в DOM для value/required/submit),
   а замість нього показуємо тригер у стилі .input-wrapper та
   випадний календар у стилі .tcrm-select-dropdown. Нативний UI
   вибору дати браузера (сітка днів, "Очистити"/"Сьогодні") — це
   chrome ОС/браузера, який неможливо перестилізувати через CSS,
   звідси й "непристилізований" календар, що випадав прямо в потоці
   сторінки поверх сусідніх полів.

   Кнопку очищення (.tcrm-date-clear) свідомо винесено
   position:absolute (a не звичайним flow-елементом поруч із
   тригером) — той самий прийом, що й .toggle-visibility в 6e.
   Якщо зробити її звичайним блоковим сусідом усередині
   .tcrm-date-wrap, вона додає власний рядок ПІД тригером, і тоді
   .tcrm-date-wrap стає вищим за сам тригер — а .input-wrapper::after
   (лінія фокуса, bottom:0 відносно .input-wrapper) опиняється під
   цим зайвим рядком, а не під видимим підкресленням тригера: та сама
   "друга лінія", що й у 418-424, тільки спричинена тепер розміром
   .tcrm-date-wrap, а не grid-розтягуванням. Абсолютне позиціювання
   лишає висоту .tcrm-date-wrap рівно висоті тригера — жодного зсуву. */
input.tcrm-date-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden; }

.tcrm-date-wrap { position: relative; width: 100%; }
.tcrm-date-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 26px 11px 0; border: none; border-bottom: 1px solid var(--border-thin);
  background: transparent; color: var(--text-dark); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; outline: none; transition: border-color .3s;
}
.tcrm-date-trigger:hover { border-color: var(--color-gold); }
.tcrm-date-wrap.open .tcrm-date-trigger,
.tcrm-date-trigger:focus { border-color: var(--color-wine); }
.tcrm-date-value { flex: 1; color: var(--text-dark); }
.tcrm-date-value.placeholder { color: #B4ACA6; }
.tcrm-date-trigger svg { flex-shrink: 0; width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 1.6; transition: stroke .3s; }
.tcrm-date-wrap.open .tcrm-date-trigger svg { stroke: var(--color-wine); }
.tcrm-date-wrap.has-value .tcrm-date-trigger svg { display: none; }

.tcrm-date-clear {
  display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  align-items: center; justify-content: center; width: 18px; height: 18px;
  border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}
.tcrm-date-wrap.has-value .tcrm-date-clear { display: flex; }
.tcrm-date-clear:hover { color: var(--danger); }

.tcrm-date-dropdown {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); width: 300px; max-width: 90vw;
  background: var(--bg-card); border: 1px solid var(--border-thin);
  box-shadow: 0 14px 34px rgba(88, 24, 37, .14); z-index: 400; padding: 16px;
}
.tcrm-date-dropdown.open { display: block; }
.tcrm-date-dropdown.up { top: auto; bottom: calc(100% + 6px); }

.tcrm-date-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tcrm-date-nav-btn {
  width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--border-thin);
  background: var(--bg-card); color: var(--text-dark); cursor: pointer; transition: all .3s var(--cubic-luxury);
}
.tcrm-date-nav-btn:hover { border-color: var(--color-gold); color: var(--color-wine); }
.tcrm-date-nav-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.tcrm-date-nav-label { font-family: var(--font-serif); font-size: 13.5px; color: var(--color-wine); text-transform: capitalize; }

.tcrm-date-weekdays,
.tcrm-date-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tcrm-date-weekdays { margin-bottom: 4px; }
.tcrm-date-weekdays span {
  display: block; text-align: center; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); padding: 4px 0;
}
.tcrm-date-day {
  display: grid; place-items: center; height: 30px; font-size: 12px; color: var(--text-dark);
  background: none; border: 1px solid transparent; cursor: pointer; font-family: var(--font-sans); transition: all .2s;
}
.tcrm-date-day:hover:not(:disabled) { border-color: var(--color-gold); }
.tcrm-date-day.muted { color: #C7C0BB; }
.tcrm-date-day.today { color: var(--color-wine); font-weight: 700; }
.tcrm-date-day.selected { background: var(--color-wine); color: #fff; }
.tcrm-date-day:disabled { color: #D9D2CB; cursor: not-allowed; }

.tcrm-date-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-thin); }
.tcrm-date-footer button {
  background: none; border: none; cursor: pointer; font-family: var(--font-sans);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-wine);
}
.tcrm-date-footer button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   7. TABLES
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted);
  padding: 13px 12px; border-bottom: 1px solid var(--text-dark); font-weight: 500;
}
.data-table td { padding: 15px 12px; border-bottom: 1px solid var(--border-thin); font-size: 12px; color: var(--text-dark); vertical-align: top; }
.data-table .row-title-cell { font-family: var(--font-serif); font-size: 14px; color: var(--color-wine); }
.data-table .row-sub { display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.data-table .cell-note { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.data-table .actions-cell { display: flex; gap: 8px; }
.data-table .actions-cell a,
.data-table .actions-cell button {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-wine);
  background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-sans);
}
.data-table .actions-cell button.danger { color: var(--danger); }
.table-scroll { overflow-x: auto; }

/* Підсумковий рядок таблиці (напр. "Витрати постачальникам" з мікс-валютами
   USD/EUR/UAH) — окрема візуальна вага від звичайних рядків, щоб борг
   зчитувався одразу, без підсумовування рядків в умі. UX-аудит, п.5. */
.data-table tfoot .data-table-subtotal-row td {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: none;
  border-top: 1px solid var(--text-dark);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--bg-main, #FBF8F0);
}
.data-table tfoot .data-table-subtotal-row td:first-child {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Компактні "пігулки" підсумку боргу по валютах над таблицею — дають
   миттєвий орієнтир ще до читання рядків. */
.cost-currency-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 14px;
}
.cost-currency-totals-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main, #FBF8F0);
  font-size: 11px;
  color: var(--text-muted);
}
.cost-currency-totals-pill strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
.cost-currency-totals-pill.is-debt strong { color: var(--danger); }
.cost-currency-totals-of { font-size: 10.5px; color: var(--text-muted); }

/* Пари ключ-значення (замінює .kv-row / .info-item з різних прототипів) */
.kv-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-thin); font-size: 12px; gap: 12px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--text-muted); }
.kv-row .v,
.kv-row .value { color: var(--text-dark); font-weight: 600; text-align: right; }

/* ============================================================
   8. BADGES / STATUS
   УНІФІКАЦІЯ. У прототипах цей самий компонент існував під
   іменами: .status-pill, .status-tag, .pill, .chip (у ролі
   статусу), .token-chip, .lang-chip, .lang-badge,
   .permission-badge — з майже ідентичним CSS (font-size
   9.5–10.5px, uppercase, letter-spacing .05–.08em, padding
   3–5px 8–10px, border 1px). Тепер — один клас .badge
   з модифікаторами кольору.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  padding: 3px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
  background: var(--bg-main);
  color: var(--text-muted);
  border-color: var(--border-thin);
}
.badge--ok      { background: var(--success-soft); color: var(--success); border-color: rgba(63,101,79,.28); }
.badge--warn    { background: var(--amber-soft);   color: var(--amber);   border-color: rgba(138,90,0,.25); }
.badge.badge--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(160,58,43,.25); font-weight: 400; }
/* КОРОТКО: золоті бейджі використовуються як тихі інформаційні маркери, а не
   як CTA. 400 відповідає тонким .badge--light/.pill у прототипі й прибирає
   надмірну вагу без створення дубльованого класу. */
.badge.badge--gold    { background: var(--color-gold-light); color: var(--color-wine); border-color: var(--color-gold); font-weight: 400; }
.badge--wine    { background: var(--color-wine); color: #fff; border-color: var(--color-wine); }
.badge.badge--muted   { background: var(--bg-main); color: var(--text-muted); border-color: var(--border-thin); font-weight: 400; }
.badge--sm      { font-size: 9px; padding: 2px 7px; }
.badge--mono    { font-family: 'Courier New', monospace; text-transform: none; letter-spacing: 0; }
/* .badge--light — тонший начерк (400 замість базових 700) для місць, де
   бейдж сидить поруч із заголовком і не повинен "кричати" — так само,
   як тонкі бейджі в прототипі (.tourist-pill там взагалі без
   font-weight, тобто 400). Використано для сигналів у hero-картці
   (ризик/етап), де раніше стояли різнорозмірні .operational-pill.big
   і .pill — обидва замінено на однаковий .badge.badge--gold.badge--light. */
.badge--light   { font-weight: 400; }

/* ============================================================
   9. TABS
   Два різні за призначенням патерни з прототипів — НЕ дублікати,
   тому лишаємо окремо: .tabs-underline (лінія знизу активного
   пункту) і .tabs-cards (плиткові вкладки типу довідників).
   ============================================================ */
.tabs-underline { display: flex; gap: 28px; border-bottom: 1px solid var(--border-thin); margin-bottom: 28px; }
.tabs-underline a {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 0 0 14px;
  color: var(--text-muted); text-decoration: none; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.tabs-underline a b {
  font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--text-muted);
  background: var(--color-gold-light); padding: 2px 7px;
}
.tabs-underline a.active { color: var(--color-wine); }
.tabs-underline a.active b { background: var(--color-wine); color: #fff; }
.tabs-underline a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-gold); }

.tabs-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.tabs-cards .tab-card {
  border: 1px solid var(--border-thin); background: var(--bg-card); padding: 16px 18px; cursor: pointer;
  text-align: left; transition: all .3s var(--cubic-luxury); display: flex; flex-direction: column; gap: 8px;
}
.tabs-cards .tab-card:hover { border-color: var(--color-gold); background: var(--color-gold-light); }
.tabs-cards .tab-card .tc-top { display: flex; justify-content: space-between; align-items: center; }
.tabs-cards .tab-card svg { width: 17px; height: 17px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; }
.tabs-cards .tab-card .tc-count { font-family: var(--font-serif); font-size: 17px; color: var(--text-dark); }
.tabs-cards .tab-card .tc-title { font-size: 12.5px; font-weight: 700; color: var(--text-dark); }
.tabs-cards .tab-card .tc-sub { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.tabs-cards .tab-card.active { border-color: var(--color-wine); box-shadow: 0 4px 14px rgba(88,24,37,.08); }
.tabs-cards .tab-card.active svg { stroke: var(--color-wine); }
.tabs-cards .tab-card.active .tc-count,
.tabs-cards .tab-card.active .tc-title { color: var(--color-wine); }
/* .tab-card.done — "пройдений" стан для tab-card, використаного як степер
   (напр. майстер бронювання, bookings.php). Раніше .tabs-cards мав лише
   active/hover (вибір розділу); степеру потрібен ще й третій, "вже
   заповнений" стан — золота, а не винна, рамка/маркер, щоб не плутати з
   активним кроком. Загальний клас тут, а не в bookings.php, бо той самий
   ３-стан (todo/active/done) стане в пригоді іншим степерам системи. */
.tabs-cards .tab-card.done:not(.active) { border-color: var(--color-gold); }

/* ============================================================
   10. KPI / STAT CARDS
   ============================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-thin); border: 1px solid var(--border-thin); margin-bottom: 22px; }
.kpi-card { background: var(--bg-card); padding: 22px 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; position: relative; transition: background .15s ease; }
.kpi-card:hover { background: var(--color-gold-light); }
.kpi-card .kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.kpi-card .kpi-value { font-family: var(--font-serif); font-size: 26px; color: var(--color-wine); line-height: 1; }
/* .kpi-value--md: коротший текстовий статус (напр. "Постійний клієнт")
   не влазить розкішним 26px — той самий .kpi-value, менший розмір. */
.kpi-value--md { font-size: 16px; }
.kpi-card .kpi-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.kpi-card.accent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-gold); }
.kpi-card.attention .kpi-value { color: var(--warning); }
.kpi-card.good .kpi-value { color: var(--success); }
.kpi-card.gold { background: var(--color-gold-light); }
.kpi-card.gold .kpi-value { color: var(--color-wine); }
.kpi-card.warn { background: var(--danger-soft); }
.kpi-card.warn .kpi-value { color: var(--danger); }

/* Проста статистична картка (одиночна, поза грідом) */
.stat-card { background: var(--bg-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-thin); }
.stat-card.bad { background: var(--danger-soft); }

/* ============================================================
   11. CHIPS
   Фільтри-теги (переключення зрізу списку) — НЕ те саме, що
   badge/status: тут інший рольовий сенс (toggle, а не стан).
   ============================================================ */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px;
  border: 1px solid var(--border-thin); background: var(--bg-card); color: var(--text-muted);
  text-decoration: none; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  transition: all .3s var(--cubic-luxury);
}
.chip b { font-weight: 700; }
.chip:hover { border-color: var(--color-gold); }
.chip.active { background: var(--color-wine); border-color: var(--color-wine); color: var(--color-gold); }

/* --- .chip-checkbox: той самий візуал .chip, але для чекбокс-мультивибору
   (не навігаційне посилання-фільтр, а форма з кількома значеннями,
   напр. "Сегменти" клієнта). Обгортку-контейнер бери .chip-row. --- */
.chip-checkbox {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px;
  border: 1px solid var(--border-thin); background: var(--bg-card); color: var(--text-muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  transition: all .3s var(--cubic-luxury);
}
.chip-checkbox input { width: 13px; height: 13px; accent-color: var(--color-wine); }
.chip-checkbox:hover { border-color: var(--color-gold); }
.chip-checkbox:has(input:checked) { background: var(--color-gold-light); border-color: var(--color-gold); color: var(--color-wine); font-weight: 700; }

/* ============================================================
   16. ENTITY ROW LIST
   Список-картки для сторінок типу "Клієнти/Агенти" — альтернатива
   .data-table там, де на запис припадає багато полів. Дослівно з
   clients-agents-refined. Обгортка лишає старий клас
   .table-wrap.entity-table-wrap, бо саме він відповідає за
   перемикання таблиця↔мобільний список у app.css (@media
   max-width:900px) — не дублюємо цю логіку тут.
   ============================================================ */
/* .grid/.grid.two/.grid.three — базова сітка для пар/трійок полів
   (booking-field-pair, booking-date-range, booking-rooming-room,
   booking-repeatable-service-fields, cost-row тощо в майстрі
   бронювання). Розмітка вже давно використовує ці класи, і скоуп-
   правила нижче (напр. ".booking-rooming-room > .grid") вже давали їм
   gap/margin — бракувало лише самого display:grid, тому все стояло
   стовпчиком на всю ширину. */
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .grid.two, .grid.three { grid-template-columns: 1fr; }
}

.filter-row { display: grid; gap: 22px; margin-bottom: 20px; align-items: end; }
/* .input-wrapper за замовчуванням має margin-bottom:20px (для звичайних
   форм) — тут це зайве, бо .filter-row вже розносить поля через gap,
   і той margin зсував .filter-submit нижче лінії інпутів. */
.filter-row .input-wrapper { margin-bottom: 0; }
.filter-row.r1 { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; }
.filter-row.r2 { grid-template-columns: 1fr 1fr 1fr auto; }
.booking-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 43px; }
.booking-filter-reset { color: var(--text-muted); font-size: 12px; line-height: 1.2; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.booking-filter-reset:hover { color: var(--color-wine); }
.filter-submit {
  height: 43px; padding: 0 26px; background: var(--color-wine); color: #fff; border: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; cursor: pointer;
  transition: background .3s var(--cubic-luxury);
}
.filter-submit:hover { background: var(--color-wine-dark); }

/* --- .search-bar: єдине поле пошуку + кнопка (+ опційний "скинути") —
   на відміну від .filter-row (сітка з 3-4 окремих select-фільтрів)
   тут один інпут, що росте, і компактні дії праворуч. --- */
.search-bar { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 20px; }
.search-bar .input-wrapper { flex: 1; margin-bottom: 0; }

.list-toolbar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.count-line { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.count-line span + span { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border-thin); }
.count-line b { color: var(--text-dark); font-weight: 600; }
.list-tools label { display: flex; align-items: center; gap: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 700; }
.list-tools select { height: 36px; border: 1px solid var(--border-thin); background: var(--bg-card); padding: 0 12px; font-size: 12.5px; color: var(--text-dark); font-family: var(--font-sans); }
/* .list-tools select теж проганяється через tcrm-select.js — стилізуємо
   видимий .tcrm-select-trigger боксом (на відміну від елегантного
   underline-стилю в .input-wrapper), саме так, як задумано в прототипі. */
.list-tools .tcrm-select-wrap { width: auto; }
.list-tools .tcrm-select-trigger {
  height: 36px; min-width: 220px; border: 1px solid var(--border-thin); border-radius: 0;
  background: var(--bg-card); padding: 0 12px; font-size: 12.5px; font-family: var(--font-sans);
  text-transform: none; letter-spacing: normal;
}
.list-tools .tcrm-select-trigger:hover,
.list-tools .tcrm-select-wrap.open .tcrm-select-trigger { border-color: var(--color-gold); }
.list-tools .tcrm-select-value {
  font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-dark);
}

/* app.css видалено, а разом з ним і логіка "мобільний список
   ховати на десктопі, показувати ≤900px". .rows/.row-main вже сам
   по собі адаптивний (@media 1100px нижче), тож старий дубльований
   entity-mobile-list ховаємо назавжди, а не відтворюємо стару
   медіа-логіку. */
.entity-mobile-list { display: none !important; }

.rows { display: flex; flex-direction: column; gap: 10px; }
.row { position: relative; background: var(--bg-card); border: 1px solid var(--border-thin); transition: all .3s var(--cubic-luxury); }
.row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.row:hover { border-color: var(--color-gold); box-shadow: 0 8px 24px rgba(88, 24, 37, .06); }
.row.tier-gold::before { background: var(--color-gold); }
.row-main { display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(220px, .9fr) minmax(190px, .6fr); gap: 22px; align-items: center; padding: 22px 26px; text-decoration: none; color: inherit; }
.row-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.row-title { font-family: var(--font-serif); font-size: 18px; color: var(--text-dark); letter-spacing: .01em; margin-bottom: 8px; }
.row-people { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-dark); margin-bottom: 8px; }
.row-people b { font-weight: 600; }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-muted); }

.row-actions { position: absolute; right: 16px; top: 16px; display: flex; gap: 6px; opacity: 0; transition: opacity .25s var(--cubic-luxury); }
.row:hover .row-actions, .row:focus-within .row-actions { opacity: 1; }
/* --- ">" (прямий нащадок), а не звичайний пробіловий селектор:
   .menu (розкрите випадне меню) фізично лежить ВСЕРЕДИНІ .row-actions
   (щоб .menu{position:absolute} рахувався від .row-actions details,
   а клік поза ним коректно закривав), тому без ">" це саме правило
   (30×30, display:grid, place-items:center) ловило й пункти .menu —
   кожен рядок меню стискався в квадратик, іконка й текст
   накладались одне на одне. --- */
.row-actions > a, .row-actions > details > summary {
  width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-thin);
  background: var(--bg-card); color: var(--text-muted); cursor: pointer; list-style: none;
}
.row-actions > details > summary::-webkit-details-marker { display: none; }
.row-actions > a:hover, .row-actions > details > summary:hover { border-color: var(--color-gold); color: var(--color-wine); }
.row-actions > a svg, .row-actions > details > summary svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.row-actions details { position: relative; }

.menu {
  position: absolute; right: 0; top: 38px; z-index: 5; min-width: 190px;
  background: var(--bg-card); border: 1px solid var(--border-thin); box-shadow: 0 10px 30px rgba(88, 24, 37, .12);
  display: flex; flex-direction: column; padding: 6px;
}
/* --- Без цього .row з відкритим меню може "провалюватись" під
   наступну картку списку: .row — position:relative без власного
   z-index, а такі елементи стекуються між собою за порядком DOM,
   а не за z-index своїх нащадків. Тобто .menu (z-index:5) виходить
   за нижню межу свого .row, але НАСТУПНИЙ .row (пізніше в DOM,
   непрозорий фон) все одно малюється поверх нього. Піднімаємо весь
   рядок, поки меню відкрите — той самий прийом, що вже був у
   локальному CSS bookings.php (.booking-row-v2:has(...[open])),
   тепер тут, у базовому компоненті, а не дублем на кожній сторінці. --- */
.row:has(> .row-actions details[open]) { z-index: 20; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text-dark); text-decoration: none;
}
.menu a:hover, .menu button:hover { background: var(--color-gold-light); color: var(--color-wine); }
.menu a.danger, .menu button.danger { color: var(--danger); }
.menu a.danger:hover, .menu button.danger:hover { background: var(--danger-soft); }

.type-badge { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 3px 9px; border: 1px solid transparent; display: inline-block; }
.type-badge--agent { background: var(--color-gold-light); color: var(--color-wine); border-color: var(--color-gold); }
.type-badge--client, .type-badge--b2c { background: transparent; color: var(--text-muted); border-color: var(--border-thin); }
.type-badge--b2b { background: var(--success-soft); color: var(--success); border-color: rgba(63, 101, 79, .28); }
.type-badge--foreign { background: var(--amber-soft); color: var(--amber); border-color: rgba(138, 90, 0, .25); }

.src-tag { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

.mid-stack { display: flex; flex-direction: column; gap: 10px; }
.mid-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mid-row.spaced { margin-top: 8px; }
.mid-row svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 4px 10px; border: 1px solid transparent; white-space: nowrap; }
.pill.up { background: var(--success-soft); color: var(--success); border-color: rgba(63, 101, 79, .28); }
.pill.down, .pill.inactive { background: var(--danger-soft); color: var(--danger); border-color: rgba(160, 58, 43, .25); }
.pill.stable { background: var(--bg-main); color: var(--text-dark); border-color: var(--border-thin); }
.pill.none, .pill.country, .pill.mixed, .pill.other { background: transparent; color: var(--text-muted); border-color: var(--border-thin); }
.pill.product, .pill.tour, .pill.accommodation { background: var(--color-gold-light); color: var(--color-wine); border-color: var(--color-gold); }
.pill.ok { background: var(--success-soft); color: var(--success); border-color: rgba(63, 101, 79, .28); }
.pill.warn { background: var(--amber-soft); color: var(--amber); border-color: rgba(138, 90, 0, .25); }
.pill.vip { background: var(--color-wine); color: var(--color-gold); }
.pill.regular { background: var(--color-gold-light); color: var(--color-wine); border-color: var(--color-gold); }

.ltv-pill { font-family: var(--font-serif); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: 4px 12px; border: 1px solid transparent; display: inline-block; }
.ltv-pill.vip { background: var(--color-wine); color: var(--color-gold); }
.ltv-pill.gold { background: var(--color-gold-light); color: var(--color-wine); border-color: var(--color-gold); }
.ltv-pill.standard { background: transparent; color: var(--text-muted); border-color: var(--border-thin); }

.value-block { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.value-amount { font-family: var(--font-serif); font-size: 20px; color: var(--color-wine); }
.value-note { font-size: 11px; color: var(--text-muted); }
.manager-line { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border-thin); width: 100%; text-align: right; font-size: 12px; }
.manager-line b { display: block; color: var(--text-dark); }
.manager-line span { color: var(--text-muted); font-size: 11px; }

@media (max-width: 1100px) {
  .filter-row.r1, .filter-row.r2 { grid-template-columns: 1fr 1fr; }
  .row-main { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .value-block { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .manager-line { width: auto; border-top: none; padding-top: 0; text-align: left; }
  .hero-top { grid-template-columns: 1fr; }
  .hero-copy { border-right: none; border-bottom: 1px solid var(--color-gold-light); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .op-card { flex-direction: column; align-items: flex-start; }
  .op-side { width: 100%; justify-content: space-between; }
}

/* ============================================================
   17. PAGINATION
   ============================================================ */
.pager { display: flex; gap: 6px; }
.pager a,
.pager span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border-thin); text-decoration: none; font-size: 12px; color: var(--text-muted);
}
.pager a:hover { border-color: var(--color-gold); color: var(--color-wine); }
/* .pager a.current:hover — без цього .pager a:hover вище перебивав би
   колір тексту на вино поверх вино-фону активної сторінки (нечитабельно). */
.pager a.current:hover { border-color: var(--color-wine); color: #fff; }
/* .pager a.current — виправлено 2 селектори (було лише "span.current",
   але Paginator::render() рендерить активну сторінку як <a class="current">,
   не <span> — тому підсвітка вином ніде не спрацьовувала: ні в головному
   списку бронювань, ні в новій пагінації "Історія еволюції заявки"
   (booking detail). CSS-фікс, метод Paginator::render() не чіпали. */
.pager a.current,
.pager span.current { background: var(--color-wine); border-color: var(--color-wine); color: #fff; font-weight: 600; }

.list-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-thin); flex-wrap: wrap; gap: 12px; }
.list-footer p { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   13. EMPTY STATE
   ============================================================ */
.empty-note { border: 1px dashed var(--border-thin); padding: 30px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* ============================================================
   14. MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(42,35,36,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
/* --- .entity-modal: клас-перемикач лишили як є (щоб не чіпати JS у
   clients.php, який керує показом через classList.add/remove('is-open')
   на елементі саме з цим класом) — тут лише міст до .modal-overlay:
   за замовчуванням прихована, .is-open показує. --- */
.modal-overlay.entity-modal { display: none; }
.modal-overlay.entity-modal.is-open { display: flex; }

/* JS перемикає body.classList.toggle('modal-open') при відкритті
   модалки (client.php, tourist.php) — без цього правила фон сторінки
   скролиться під відкритим діалогом. Раніше жило в app.css. */
body.modal-open { overflow: hidden; }

.modal {
  width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border-thin);
  box-shadow: 0 24px 64px rgba(59,15,24,.28); position: relative; overflow: hidden; text-align: center;
}
.modal-body { padding: 36px 32px; }
.modal-title { font-family: var(--font-serif); font-size: 19px; color: var(--color-wine); margin-bottom: 10px; }
.modal-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }

/* --- .modal--form: широкий, скролований, ліворуч вирівняний варіант
   для форм (клієнт/агент, імпорт) — на відміну від базового .modal,
   який є вузьким центрованим confirm-діалогом. Раніше для цього існував
   окремий паралельний набір .entity-modal/.entity-modal-card/... з
   вбудованого <style> у clients.php (старі токени --border/--card/--muted,
   яких більше нема — звідси й "голий" непристилізований вигляд форми).
   Тут той самий .modal-overlay, той самий .modal — тільки модифікатор. */
.modal--form {
  max-width: 820px;
  max-height: calc(100vh - 84px);
  overflow: auto;
  outline: none;
  text-align: left;
}
/* Chrome/Edge автоматично роблять будь-який overflow:auto-контейнер
   з переповненим вмістом фокусованим для скролу клавіатурою — звідси
   синій outline навколо всього вікна форми (клієнт/агент, імпорт)
   при відкритті. Сам скрол клавіатурою це не ламає, тільки прибирає
   зайву синю рамку, якої немає в дизайн-системі. */
.modal--form:focus,
.modal--form:focus-visible { outline: none; }
.modal--form.modal--wide { max-width: 920px; }

/* --- tourist.php реалізує клік-поза-модалкою-щоб-закрити через окремий
   <a class="tourist-passport-backdrop" data-close-modal> (а не перевіркою
   event.target === overlay, як у client.php) — цей <a> має фізично
   покрити весь .modal-overlay ПІД діалогом. Пізніший у DOM
   .tourist-passport-dialog (плюс .modal--form) сам собою малюється
   поверх, z-index не потрібен. --- */
.tourist-passport-backdrop { position: absolute; inset: 0; }

.modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 24px; border-bottom: 1px solid var(--border-thin); background: var(--bg-card);
}
.modal-head .modal-title { margin-bottom: 4px; }
.modal-head .modal-subtitle { font-size: 12px; color: var(--text-muted); }
.modal-close {
  flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--border-thin);
  background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1;
  display: grid; place-items: center; text-decoration: none !important;
}
.modal-close:hover { border-color: var(--color-gold); color: var(--color-wine); }
.modal-close span {
  display: block; width: 16px; height: 16px; position: relative; text-decoration: none !important;
}
.modal-close span::before,
.modal-close span::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 17px; height: 1.5px;
  background: currentColor; transform-origin: center;
}
.modal-close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal--form .modal-body { text-align: left; padding: 24px; }
/* --- .modal-delete-form: окрема форма видалення поза .modal-body
   (щоб не потрапляти в основний submit картки/документа) — тонка
   стрічка внизу діалогу, притиснута до країв. --- */
.modal-delete-form { padding: 14px 24px; border-top: 1px solid var(--border-thin); background: var(--bg-main); text-align: right; }

/* --- Скидання дефолтних браузерних стилів для нативного <dialog>
   (app.js: #dialog-new-client, #dialog-new-tourist,
   #booking-upcoming-departures-dialog — усі відкриваються через
   dialog.showModal(), а не через .modal-overlay/.entity-modal).
   Без цього Chrome малює синій outline навколо самого <dialog>,
   бо showModal() спершу фокусує сам елемент, якщо жодне поле
   всередині не встигло перехопити фокус. --- */
dialog { border: none; padding: 0; outline: none; }
dialog:focus,
dialog:focus-visible { outline: none; }

/* --- .form-section: згруповані блоки всередині довгої форми
   (наприклад "Дані агента", "Знижка клієнта", "Вподобання і сегменти"
   у формі клієнта/агента). Раніше не існувало в системі. --- */
.form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-thin); }
form.modal-body > .form-section:first-child,
.modal-body > form > .form-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-section-head { margin-bottom: 16px; }
.form-section-head h3 { font-family: var(--font-serif); font-size: 14px; font-weight: 500; color: var(--color-wine); margin-bottom: 4px; }
.form-section-head span { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }

/* --- .actions-row: рядок кнопок унизу форми (не модалки-підтвердження,
   де вже є .modal-actions) --- */
.actions-row { display: flex; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-thin); }

/* --- .notice: інлайн-повідомлення всередині форми/сторінки (помилка
   валідації, інформаційна підказка) — на відміну від .modal, який є
   блокуючим оверлеєм, і .badge, який є маленькою міткою статусу. --- */
.notice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border-thin); background: var(--bg-main); padding: 15px 17px; margin-bottom: 18px; }
.notice.is-leaving { opacity: 0; transition: opacity .36s ease; }
.notice p { font-size: 12px; color: var(--text-dark); line-height: 1.55; margin: 0; }
.notice svg { width: 16px; height: 16px; stroke: var(--text-muted); stroke-width: 1.6; fill: none; flex-shrink: 0; margin-top: 1px; }
.notice--info { border-left: 2px solid var(--color-gold); }
.notice--info svg { stroke: var(--color-wine); }
.notice--danger { border-left: 2px solid var(--danger); background: var(--danger-soft); }
.notice--danger svg { stroke: var(--danger); }
.notice--success { border-left: 2px solid var(--success); background: var(--success-soft); }
.notice--success svg { stroke: var(--success); }

/* ============================================================
   15. SESSION GUARD
   #tcrm-session-guard вставляється session-guard.js напряму в
   <body> (appendChild), поруч із .sidebar/.main-content —
   а body.app-body в нас display:flex. Тому контейнер ОБОВ'ЯЗКОВО
   position:fixed, інакше він стає flex-елементом і стискає
   layout (це і була причина бага з "розхристаним" банером).
   Стан "сесію завершено" навмисно НЕ отримує нових класів —
   там перевикористано .modal-overlay/.modal/.btn з розділу 14,
   бо це той самий візуальний патерн (блокуючий оверлей + картка).
   Тут новий клас лише для ненав'язливого тосту-попередження,
   якого в системі раніше не було.
   ============================================================ */
#tcrm-session-guard {
  position: fixed;
  inset: 0;
  /* Навмисно набагато вище за будь-який інший компонент системи:
     tcrm-select.js динамічно піднімає z-index відкритого .tcrm-select-wrap
     (щоб dropdown лежав над сусідніми полями фільтра) — цей рантайм-z-index
     на практиці перевищував нашу попередню позначку 1200, тому dropdown
     фільтра малювався ПОВЕРХ заблокованого/затемненого екрана сесії.
     Session-guard — системний перехоплювач, він має вигравати завжди. */
  z-index: 999999;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px;
}
#tcrm-session-guard:empty { display: none; }

/* КРИТИЧНО: pointer-events є успадковуваною властивістю. Батько
   #tcrm-session-guard має pointer-events:none (щоб порожній контейнер
   не перехоплював кліки), і без явного скидання це none тягнеться і на
   .modal-overlay, коли ми перевикористовуємо його тут для стану
   "сесію завершено". Наслідок був: кнопка "Увійти знову" виглядала
   активною, але не реагувала на клік, а всі кліки/скрол проходили
   наскрізь до сторінки під розмитим фоном (включно з відкриттям
   випадаючих фільтрів). Ось фікс. */
#tcrm-session-guard .modal-overlay { pointer-events: auto; }

.tcrm-session-toast {
  pointer-events: auto;
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--color-gold);
  box-shadow: 0 24px 64px rgba(59,15,24,.28);
  padding: 22px 24px;
}
.tcrm-session-toast-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-wine);
  margin-bottom: 8px;
}
.tcrm-session-toast-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.tcrm-session-toast-text strong { color: var(--color-wine); font-variant-numeric: tabular-nums; }

/* Оверлей "сесію завершено" використовує .modal-overlay/.modal/.modal-body/
   .modal-title/.modal-text з розділу 14 — див. session-guard.js. */

/* ============================================================
   16. УТИЛІТИ
   ============================================================ */
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-right { text-align: right; }
.mono { font-family: 'Courier New', monospace; }

/* --- Мобільна навігація (≤900px): off-canvas drawer, а не "сайдбар
   на всю ширину над контентом" (стара поведінка — довелось би
   проскролювати ~20 пунктів меню перш ніж дістатись контенту сторінки).
   .mobile-nav-toggle/.sidebar-backdrop — нові елементи, які виводить
   tcrm_sidebar() поруч з .sidebar; за замовчуванням приховані (мають
   сенс лише ≤900px). Відкриття/закриття — через клас
   html.sidebar-mobile-open, JS у tcrm_sidebar(). --- */
.mobile-nav-toggle {
  display: none;
  position: fixed; top: 16px; left: 16px; z-index: 902;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--color-wine-dark); border: 1px solid rgba(197, 168, 128, .35);
  color: var(--color-gold); cursor: pointer;
}
.mobile-nav-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 900;
  background: rgba(20, 10, 12, .5);
  opacity: 0; transition: opacity .3s var(--cubic-luxury);
}
html.sidebar-mobile-open .sidebar-backdrop { opacity: 1; }

@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .tabs-cards { grid-template-columns: repeat(3, 1fr); }
  .input-row { grid-template-columns: 1fr; }
  .input-row.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .main-content,
  .app-main { padding: 76px 20px 48px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }

  .mobile-nav-toggle { display: flex; }
  .sidebar-backdrop { display: block; pointer-events: none; }
  html.sidebar-mobile-open .sidebar-backdrop { pointer-events: auto; }

  /* Сайдбар стає фіксованою висувною панеллю, а не блоком у потоці —
     тому .app-layout лишається звичайним flex-рядком (.main-content
     нікуди не зсувається, коли сайдбар прихований за екраном). */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 901;
    width: min(300px, 84vw);
    transform: translateX(-100%);
    transition: transform .3s var(--cubic-luxury);
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  }
  html.sidebar-mobile-open .sidebar { transform: translateX(0); }

  /* Desktop-фіча "згорнути до іконок" не має сенсу для висувної
     панелі — на мобільному її просто ховаємо. */
  .sidebar-toggle { display: none; }
  html.sidebar-collapsed .sidebar { width: min(300px, 84vw); }
}


/* Booking detail header: metadata reads as a compact dossier, not a single long line.
   The workflow stage remains available to the system/reporting, but is intentionally
   omitted from this human-facing header because the current status already communicates
   the actionable state without duplicating terminology. */
.booking-header-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 3px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 760px;
}
.booking-header-meta > div { margin: 0; display: block; }
.booking-header-meta-secondary {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px;
  margin-top: 0 !important;
}
.booking-header-meta-secondary .badge {
  text-transform: none;
  letter-spacing: .01em;
}
.booking-meta-risk {
  display: inline-flex;
  align-items: center;
  font-weight: 400 !important;
}

/* ============================================================
   18. CUSTOMER PROFILE (картка клієнта/агента)
   Перед тим як додавати щось нове тут, я прогрепав файл на
   customer-* / module-card/mini-list/timeline/agent-card/workspace-grid —
   у design-system.css цих класів не було взагалі (сторінка client.php
   досі сиділа на старих класах з app.css і фактично не була
   мігрована). Те, що вже мало еквівалент, використане напряму в
   client.php БЕЗ додавання нового CSS: .luxury-card, .card-header/
   .card-kicker/.card-title/.card-subtitle, .kpi-grid/.kpi-card (+ .gold/
   .warn), .kv-row (.k/.v), .chip-row/.chip/.chip.active, .type-badge/
   .type-badge--agent/--b2c/--b2b/--foreign, .badge/.badge--muted,
   .notice, .data-table/.row-title-cell/.row-sub/.cell-note,
   .badge--ok/--danger, .pill(.tour/.accommodation/.other),
   .list-footer, .side-card/.side-card-header/.side-card-title,
   .btn-primary/.btn-secondary/.btn-minimal. Нижче — лише те, чому
   справді не було відповідника. */

/* Command-центр картки: два явні рядки, а не один "гумовий" flex-рядок.
   1) entity-header-top: лейбл "Customer profile" зліва + кнопки дій
      справа — завжди на одному рівні, незалежно від довжини бейджів
      нижче. 2) entity-header-identity: аватар-ініціал + імʼя + мета-
      бейджі. Раніше кнопки були flex-сусідом усього ідентити-блоку і
      "прилипали" під бейджами на вужчих екранах — тепер вони структурно
      в іншому рядку, тож так само не можуть. */
/* justify-content:space-between НЕ підходить тут: якщо кнопкам бракує
   місця в одному рядку з лейблом, вони переносяться на свій рядок —
   а для єдиного елемента на flex-лінії space-between резолвиться у
   flex-start (тобто зліва), а не праворуч, як треба. margin-left:auto
   на самому .entity-header-actions натомість притискає його праворуч
   завжди — і поруч з лейблом, і на власному рядку після переносу. */
.entity-header-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.entity-header-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.entity-header-identity { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.entity-avatar {
  width: 62px; height: 62px; background: var(--color-gold-light); border: 1px solid var(--color-gold);
  color: var(--color-wine); font-family: var(--font-serif); font-size: 24px; display: grid; place-items: center;
  flex-shrink: 0;
}
.entity-header-body h2 { font-family: var(--font-serif); font-size: 29px; color: var(--text-dark); font-weight: 500; letter-spacing: .01em; }
.entity-header-body .contact-person { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.entity-header-meta { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

/* Обгортка-"бокс" для рядка контактів (телефон/email/менеджер) під
   entity-header. Типографію розділювачів свідомо не дублюємо тут —
   в розмітці ця обгортка йде РАЗОМ із класом .count-line (див. розділ
   11, рядок ~645), який уже дає "span + span { border-left }"; тут
   додано лише бордер/фон/паддінг самого боксу, яких у .count-line
   немає (він завжди використовувався "голим", без рамки). */
.entity-info-strip { display: flex; flex-wrap: wrap; background: var(--bg-main); border: 1px solid var(--border-thin); padding: 13px 20px; margin-bottom: 24px; }

/* Плоский варіант .type-badge — без рамки/фону, для джерела клієнта
   (рекомендація/сайт/direct) у entity-header-meta. Решта .type-badge--*
   вже існує (--agent/--client/--b2c/--b2b/--foreign) і перевикористана
   як є для типу клієнта. */
.type-badge--plain { background: transparent; color: var(--text-muted); border: none; padding: 3px 0; font-weight: 500; letter-spacing: .04em; }

/* Проста рівна 2-колонкова сітка. НЕ перевикористовуємо .input-row —
   та стилізована під форми (тягне за собою відступи .input-wrapper),
   а тут просто потрібно поставити поруч дві .kv-row-групи або дві
   .luxury-card. Генерична, без прив'язки до customer/client — можна
   перевикористати на інших entity-сторінках (турист, бронювання). */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

/* Сторінковий workspace: основний стовпець + бічна колонка фіксованої
   ширини (Timeline/Задачі). Аналога такого 2-колонкового розкладу на
   рівні сторінки в системі ще не було (.split-2 — рівні колонки,
   тут навмисно нерівні). */
.workspace-grid { display: grid; grid-template-columns: 1fr 366px; gap: 22px; align-items: start; }

/* Виділена картка для агентських реквізитів (компанія/ІПН/договір) —
   золота рамка+фон, щоб відрізнялась від звичайних .luxury-card.
   Схожого "виділеного" варіанту картки в системі не було (є лише
   --color-gold-light як фон бейджів/hover, не як фон цілого блоку). */
.agent-details { border: 1px solid var(--color-gold); background: var(--color-gold-light); padding: 20px 22px; margin-top: 22px; }
.agent-details-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.agent-details-head h3 { font-family: var(--font-serif); font-size: 15px; color: var(--color-wine); font-weight: 500; }
.agent-details-head span { font-size: 11px; color: var(--text-muted); }
.agent-details .kv-row { border-bottom-color: rgba(197,168,128,.4); }

/* Заголовок-мітка над текстом .notice (розділ 14) — самому .notice
   бракувало підпису на кшталт "Нотатка"/"Сервісні нюанси", решта
   стилів блоку перевикористана з .notice як є. */
.notice-title { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-wine); margin-bottom: 6px; }
.notice + .notice { margin-top: 14px; }

/* Компактний повторюваний рядок-посилання для вкладених міні-списків
   (Туристи/Документи/Задачі всередині картки клієнта). Свідомо НЕ
   .row/.row-main з розділу 16 — той важчий компонент побудований під
   головний список клієнтів (hover-меню дій, абсолютне позиціювання,
   3-колонкова сітка), тут потрібен простий 2-рядковий пункт списку. */
.mini-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-thin); border: 1px solid var(--border-thin); }
.mini-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); padding: 15px 18px; text-decoration: none; color: inherit; gap: 14px; flex-wrap: wrap; }
.mini-row:hover { background: var(--color-gold-light); }
.mini-row .mini-title { display: block; font-family: var(--font-serif); font-size: 14.5px; color: var(--color-wine); }
.mini-row .mini-meta { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* Вертикальна хронологія подій. Аналога в системі не було. */
.timeline-list { list-style: none; position: relative; padding-left: 22px; }
.timeline-list::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 3px; width: 1px; background: var(--border-thin); }
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -22px; top: 6px; width: 7px; height: 7px; background: var(--color-wine); }
.timeline-date { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 2px; }
/* .timeline-text — посилання (елемент timeline у client.php веде на
   відповідне бронювання/подію), тому явно скидаємо декорацію лінка. */
.timeline-text { display: block; font-size: 12.5px; color: var(--text-dark); text-decoration: none; }
.timeline-text:hover { color: var(--color-wine); }

@media (max-width: 1280px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .split-2 { grid-template-columns: 1fr; }
}

/* Нижче 900px (той самий поріг, що й для .sidebar/.main-content вище)
   кнопки дій ростягуємо на всю ширину верхнього рядка — на вузькому
   екрані "Редагувати/Нове бронювання/До списку" в один рядок з лейблом
   не влізуть, а окремим повноширинним рядком читаються акуратніше. */
@media (max-width: 900px) {
  .entity-header-top { flex-direction: column; align-items: stretch; }
  .entity-header-actions { margin-left: 0; margin-top: 12px; width: 100%; }
}

/* ============================================================
   19. AUTH SCREENS (login / forgot-password / install-крок "адмін")
   Переносить прототип login-refined.html у канонічну систему.
   Свідомо перевикористовує .eyebrow, .notice/.notice--info/
   .notice--danger, .input-wrapper, .btn-primary.btn-block та
   .brand-title/.brand-subtitle (розділ 3, сайдбар) — нові класи
   нижче тільки для того, чого в системі ще не було: двоколонковий
   каркас, темна брендована панель, інпут з іконкою-префіксом,
   тумблер видимості пароля, вступна анімація "заставка → форма".
   ============================================================ */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

.brand-panel {
  position: relative;
  background: var(--color-wine-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  overflow: hidden;
}
/* Радіальне світіння + ледь помітна сітка-клітинка (як у
   brand-concept-itinera.html) — два шари ::before-градієнтів. */
.brand-panel::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(197, 168, 128, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 168, 128, .05) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(197, 168, 128, .16) 0, transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(197, 168, 128, .12) 0, transparent 45%);
  background-size: 56px 56px, 56px 56px, auto, auto;
  pointer-events: none;
  animation: breathe 6.5s ease-in-out infinite;
}
.brand-panel::after { content: ''; position: absolute; inset: 24px; border: 1px solid rgba(197, 168, 128, .22); pointer-events: none; }

/* .brand-centerpiece: лого-хіро + цитата центруються ЯК ОДИН блок
   через margin:auto у флекс-колонці .brand-panel (той самий трюк,
   що раніше стояв тільки на .brand-quote) — підпис-колофон лишається
   пришпилений знизу своїм власним margin-top:auto (розділ 3). */
.brand-centerpiece { margin: auto 0; display: flex; flex-direction: column; gap: 40px; position: relative; z-index: 1; }

/* .brand-hero: велике центроване лого — замінює колишній рядковий
   .brand-mark (лого+текст в один рядок зліва) на auth-екранах, де
   лого тепер головний бренд-момент, а не дрібна плашка. */
.brand-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.brand-hero .mark-box { width: 104px; height: 104px; font-size: 42px; }
.brand-hero .brand-copy { text-align: center; }
.brand-hero .brand-title { font-size: 19px; }
.brand-hero .brand-subtitle { font-size: 9.5px; margin-top: 6px; }

.mark-box {
  width: 52px; height: 52px; flex-shrink: 0;
  border: 1px solid rgba(197, 168, 128, .5);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-serif); font-size: 22px; color: var(--color-gold);
  position: relative;
}
.mark-box img { width: 100%; height: 100%; object-fit: contain; }
/* Текст поруч із лого свідомо верстається класами .brand-copy/
   .brand-title/.brand-subtitle з розділу 3 (сайдбар) — той самий
   "бренд поруч із лого" патерн, без дублювання правил тут. */

/* .mark-box--full: більший розмір для install.php (немає .brand-panel,
   лого стоїть само в .auth-card--centered). Рамку прибрано — у
   самого лого вже є власне коло, квадратна рамка навколо нього
   давала "рамка в рамці". */
.mark-box--full { width: 84px; height: 84px; border: none; font-size: 34px; }

.brand-quote { max-width: 420px; }
.brand-quote .eyebrow { margin-bottom: 18px; }
.brand-quote h2 { font-family: var(--font-serif); font-size: 32px; font-weight: 400; line-height: 1.35; color: #fff; letter-spacing: .01em; }
.brand-quote p { margin-top: 18px; font-size: 13px; color: #C9BFB8; line-height: 1.7; }

/* .sidebar-footer: колофон-підпис у .brand-panel на login.php,
   всередині .brand-centerpiece (третій блок після .brand-hero/
   .brand-quote — див. коментар вище). Класи .sidebar-footer/-rule/
   -label/-author вже викликались у розмітці (і в html.intro-ready
   анімації нижче), але базового вигляду не існувало — звідси
   нестилізований, притиснутий ліворуч текст системним шрифтом.
   Тут — власне горизонтальне центрування (align-items:center),
   що збігається з тією ж віссю, що й лого/.mark-box у .brand-hero
   вище, редакційним колофонним почерком (тонка золота риска,
   eyebrow-мітка, ім'я версткою серифа). */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.sidebar-footer-rule { width: 28px; height: 1px; background: rgba(197, 168, 128, .35); margin-bottom: 16px; }
.sidebar-footer-label { font-size: 9px; text-transform: uppercase; letter-spacing: .22em; color: rgba(244, 239, 230, .45); }
.sidebar-footer-author { margin-top: 6px; font-family: var(--font-serif); font-size: 12px; letter-spacing: .1em; color: var(--color-gold); }

.form-panel { display: flex; align-items: center; justify-content: center; padding: 40px; min-height: 100vh; background: var(--bg-main); }
.auth-card { width: 100%; max-width: 420px; }
.auth-title { font-family: var(--font-serif); font-size: 30px; font-weight: 500; color: var(--color-wine); letter-spacing: .02em; margin-bottom: 10px; }
.auth-lead { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }

/* Інпут з іконкою-префіксом зліва — .input-wrapper (розділ 6) сам
   лишається носієм label/underline/focus-стану, .input-shell лише
   додає місце під svg і, за потреби, кнопку видимості пароля. */
.input-shell { position: relative; }
.input-shell svg {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--text-muted); stroke-width: 1.6; fill: none;
  pointer-events: none; transition: stroke .3s;
}
.input-shell input { padding-left: 24px !important; }
.input-wrapper:focus-within .input-shell svg { stroke: var(--color-wine); }

.toggle-visibility { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; color: var(--text-muted); }
.toggle-visibility svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; display: block; }
.toggle-visibility:hover { color: var(--color-wine); }

.auth-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.remember input { width: 15px; height: 15px; accent-color: var(--color-wine); }
.link-quiet { font-size: 12px; color: var(--color-wine); text-decoration: none; border-bottom: 1px solid var(--color-gold); padding-bottom: 1px; }
.link-quiet:hover { color: var(--color-wine-dark); border-color: var(--color-wine); }

.auth-footer { margin-top: 26px; text-align: center; font-size: 11.5px; color: var(--text-muted); }
.auth-footer a { color: var(--color-wine); text-decoration: none; border-bottom: 1px solid var(--color-gold); padding-bottom: 1px; }

.divider-note { display: flex; align-items: center; gap: 12px; margin: 26px 0; }
.divider-note::before, .divider-note::after { content: ''; flex: 1; height: 1px; background: var(--border-thin); }
.divider-note span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted); }

@media (max-width: 940px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
}

/* ------------------------------------------------------------
   Вступна анімація "заставка → форма" (перенесено з
   login-intro-v2.html). Все під html.intro-ready — якщо JS
   (auth-intro.js) не завантажився, сторінка лишається у звичайній
   двоколонковій верстці без жодної анімації, нічого не ламається.
   ------------------------------------------------------------ */
html.intro-ready .auth-shell .brand-panel {
  position: fixed; inset: 0; width: 100vw; height: 100vh; left: 0; top: 0;
  z-index: 40; cursor: pointer;
  border-right: 1px solid transparent;
  transition: width 1.15s var(--cubic-luxury), padding 1.15s var(--cubic-luxury),
    border-color .3s ease, box-shadow .3s ease;
}
html.intro-ready .auth-shell.morph .brand-panel {
  width: 50vw; cursor: default;
  border-right-color: var(--color-gold);
  box-shadow: 14px 0 46px -8px rgba(197, 168, 128, .5);
}
html.intro-ready .auth-shell.settled .brand-panel {
  position: static; width: auto; height: auto; inset: auto; z-index: 1;
  border-right-color: transparent; box-shadow: none;
  transition: border-color .7s ease .15s, box-shadow .7s ease .15s;
}
html.intro-ready .brand-panel::after { opacity: 0; transition: opacity .9s ease .3s; }
html.intro-ready .auth-shell.morph .brand-panel::after { opacity: 1; }

html.intro-ready .brand-hero,
html.intro-ready .brand-quote,
html.intro-ready .auth-shell .sidebar-footer {
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s ease, transform .8s var(--cubic-luxury);
}
html.intro-ready .auth-shell.morph .brand-hero { opacity: 1; transform: none; transition-delay: .1s; }
html.intro-ready .auth-shell.morph .brand-quote { opacity: 1; transform: none; transition-delay: .35s; }
html.intro-ready .auth-shell.morph .sidebar-footer { opacity: 1; transform: none; transition-delay: .55s; }

html.intro-ready .form-panel { opacity: 0; transform: translateX(14px); transition: opacity .9s ease .25s, transform .9s var(--cubic-luxury) .25s; }
html.intro-ready .auth-shell.morph .form-panel { opacity: 1; transform: none; }

.mark-box::before {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 168, 128, .65), transparent 70%);
  opacity: 0; pointer-events: none;
}
html.play .brand-hero .mark-box { animation: stampPulse .55s var(--cubic-luxury) 1.2s; }
html.play .brand-hero .mark-box::before { animation: stampFlash .65s ease 1.2s; }

/* Буквений стаггер заголовка бренду в hero — span.lt генерує JS
   з фактичного тексту .brand-title (динамічний $appName, а не
   захардкоджений рядок). */
.brand-hero .brand-title .lt { display: inline-block; opacity: 0; transform: translateY(8px); white-space: pre; }
html.play .brand-hero .brand-title .lt { animation: letterIn .45s var(--cubic-luxury) forwards; animation-delay: calc(1s + var(--i) * 0.04s); }
html.no-anim .brand-hero .brand-title .lt,
html.no-anim .brand-hero .mark-box,
html.no-anim .brand-hero .mark-box::before { opacity: 1 !important; transform: none !important; animation: none !important; }

.skip-hint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 41;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 239, 230, .55);
  opacity: 0; transition: opacity .5s ease .6s; pointer-events: none; cursor: pointer;
}
html.play .skip-hint { opacity: 1; animation: skipPulse 2.6s ease-in-out infinite; pointer-events: auto; }
.auth-shell.morph .skip-hint { opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; }

@keyframes letterIn { to { opacity: 1; transform: translateY(0); } }
@keyframes skipPulse { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes stampPulse { 0% { transform: scale(1); } 38% { transform: scale(1.14); } 65% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes stampFlash { 0% { opacity: 0; } 32% { opacity: 1; } 100% { opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

@media (max-width: 940px) {
  html.intro-ready .auth-shell.settled .brand-panel { display: none; }
  html.intro-ready .auth-shell.morph .brand-panel { width: 100vw; }
}

/* --- Інсталятор: та сама .auth-card, але ширша (багатосекційна форма
   MySQL/адмін не влазить у вузькі 420px логіну) і без .brand-panel —
   це утилітарний екран, а не "момент бренду". --- */
.auth-card--wide { max-width: 640px; }
.auth-card--centered .mark-box { margin: 0 auto 20px; }
.auth-card--centered .eyebrow,
.auth-card--centered .auth-title,
.auth-card--centered .auth-lead { text-align: center; }

/* --- .checklist: перевірка вимог хостингу (PHP-версія, розширення,
   права на запис) — компактний список з .badge OK/FAIL зліва. --- */
.checklist { border: 1px solid var(--border-thin); margin: 22px 0; }
.checklist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; font-size: 12.5px; color: var(--text-dark);
}
.checklist-item + .checklist-item { border-top: 1px solid var(--border-thin); }

/* --- .checkbox-block: чекбокс-опція з підписом і поясненням в один-два
   рядки (напр. "Створити базу автоматично") — на відміну від .remember
   (одна коротка фраза) тут потрібен блок label+note. --- */
.checkbox-block { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 18px 0; }
.checkbox-block input { width: 15px; height: 15px; margin-top: 2px; accent-color: var(--color-wine); flex-shrink: 0; }
.checkbox-block strong { display: block; font-size: 12.5px; color: var(--text-dark); font-weight: 600; }
.checkbox-block small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

/* ============================================================
   20. OPERATIONS HUB (Робочий центр)
   Дослівно з operations-hub-refined, адаптовано під токени вище.
   Перевикористано без додавання нового CSS: .btn/.btn-minimal/
   .btn-secondary(.tiny), .topbar/.eyebrow/.page-title/
   .topbar-actions, .empty-note, .chip-row/.chip(.active) —
   контейнер/hover/active. .app-layout/.main-content — як скрізь.
   Нижче — лише те, чому справді не було відповідника.
   ============================================================ */

/* .hero: привітання + зведення дня. Ні .kpi-grid (суцільна смуга
   на всю ширину), ні жодна інша наявна картка не давали асиметрії
   "текст зліва / 4 числа справа" + виділений рядок "найближча дія"
   знизу — тому новий компонент. */
.hero { background: var(--bg-card); border: 1px solid var(--border-thin); margin-bottom: 20px; }
.hero-top { display: grid; grid-template-columns: 1.1fr 1.4fr; }
.hero-copy { padding: 30px 32px; border-right: 1px solid var(--color-gold-light); display: flex; flex-direction: column; justify-content: center; }
.hero-copy h2 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; color: var(--color-wine); margin: 0 0 10px; letter-spacing: .01em; }
.hero-copy p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.hero-copy .clock { font-family: var(--font-serif); color: var(--color-wine); font-weight: 600; margin: 0 6px; }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stat { padding: 22px 20px; border-left: 1px solid var(--color-gold-light); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: background .15s ease; }
.hero-stat:hover { background: var(--color-gold-light); }
.hero-stat .s-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); font-weight: 600; }
.hero-stat .s-value { font-family: var(--font-serif); font-size: 26px; color: var(--text-dark); line-height: 1; }
.hero-stat .s-note { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.hero-stat.is-critical { background: var(--color-gold-light); }
.hero-stat.is-critical .s-value { color: var(--color-wine); }
.hero-stat.is-muted .s-value { color: #B4ACA6; }

.hero-next { display: flex; align-items: center; gap: 18px; padding: 18px 32px; background: var(--color-wine); color: #fff; border-top: 1px solid var(--border-thin); text-decoration: none; }
.hero-next .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold); flex-shrink: 0; }
.hero-next .n-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--color-gold); font-weight: 600; margin-bottom: 3px; }
.hero-next .n-title { font-family: var(--font-serif); font-size: 15px; color: #fff; }
.hero-next .n-meta { font-size: 11.5px; color: #D5CFC9; margin-top: 2px; }
.hero-next .n-cta { margin-left: auto; flex-shrink: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-gold); text-decoration: none; white-space: nowrap; border: 1px solid var(--color-gold); padding: 8px 16px; transition: all .15s ease; }
.hero-next:hover .n-cta { background: var(--color-gold); color: var(--color-wine-dark); }

/* .birthday-strip: у прототипі показано лише порожній стан
   ("сьогодні немає..."). Стан "є іменинники" довелось домалювати
   самому — замість попереднього громіздкого .operation-birthday-card
   зі списком карток лишаємо той самий тонкий рядок, а імена йдуть
   інлайновим переліком посилань усередині нього
   (.birthday-strip-list), щоб не зраджувати задуму "тонкої стрічки". */
.birthday-strip { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border-thin); margin-bottom: 20px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.birthday-strip .b-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-gold); font-weight: 700; border-right: 1px solid var(--border-thin); padding-right: 14px; flex-shrink: 0; }
.birthday-strip-list { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.birthday-strip-list a { color: var(--color-wine); text-decoration: none; font-weight: 600; }
.birthday-strip-list a:hover { text-decoration: underline; }
.birthday-strip-list span { color: var(--text-muted); font-weight: 400; }

/* .workspace: картка "Що потребує дії". Не .workspace-grid (той —
   2-колонковий page-layout десь-інде, інша річ попри схожу назву). */
.workspace { background: var(--bg-card); border: 1px solid var(--border-thin); padding: 28px 32px; }
.workspace-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.workspace-head .eyebrow { margin-bottom: 4px; }
.workspace-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 20px; color: var(--color-wine); margin: 0 0 4px; }
.workspace-head p { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.workspace-head .btn { white-space: nowrap; }

/* Лічильник у .chip: сам .chip-row/.chip (контейнер, hover, .active)
   перевикористано з розділу 11 як є. Тут лише бейдж-лічильник —
   у звичайному .chip це голий жирний текст, а тут потрібен бейдж
   із фоном; новий клас, а не правка самого "b" в .chip, щоб не
   зачепити інші сторінки, де .chip уже використовується без бейджа. */
.chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; background: var(--color-gold-light); color: var(--text-dark); font-size: 10.5px; font-weight: 700; margin-left: 8px; }
.chip.active .chip-count { background: var(--color-gold); color: var(--color-wine-dark); }

/* Групи сигналів + сама картка сигналу (.op-*). Не .row/.row-main
   (той — зі списку клієнтів, важчий компонент з hover-меню дій) і
   не .mini-row (той — двострічковий пункт без бокової колонки дії).
   Новий компонент. */
.group { margin-bottom: 30px; }
.group:last-child { margin-bottom: 0; }
.group-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 12px; }
.group-title h3 { font-family: var(--font-serif); font-weight: 400; font-size: 16px; color: var(--text-dark); margin: 0; letter-spacing: .01em; }
.group-title .count { font-family: var(--font-serif); font-size: 13px; color: var(--color-wine); }
.group-hint { font-size: 11.5px; color: var(--text-muted); margin: 0 0 14px; }

.op-list { display: flex; flex-direction: column; gap: 8px; }
.op-card { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px 14px 20px; background: var(--bg-card); border: 1px solid var(--border-thin); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.op-card:hover { border-color: var(--color-gold); box-shadow: 0 4px 16px rgba(88, 24, 37, .05); }
.op-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.op-card.critical::before { background: var(--color-wine); }
.op-card.warning::before { background: var(--color-gold); }
.op-card.info::before { background: var(--border-thin); }

.op-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.op-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--color-gold); }
.op-card.critical .op-dot { background: var(--color-wine); }
.op-card.info .op-dot { background: var(--border-thin); }
.operation-funnel { margin: 18px 0; padding: 18px; border: 1px solid var(--border-thin); background: var(--bg-card); }
.operation-funnel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.operation-funnel-head h2 { margin: 3px 0 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 24px; font-weight: 500; }
.operation-funnel-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-thin); }
.operation-funnel-step { min-height: 86px; padding: 13px 15px; border-right: 1px solid var(--border-thin); background: var(--bg-soft); }
.operation-funnel-step:last-child { border-right: 0; }
.operation-funnel-step span { display: block; color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.operation-funnel-step strong { display: block; margin-top: 8px; color: var(--color-wine); font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; }
.operation-funnel-step.is-actionable { background: var(--color-gold-light); box-shadow: inset 0 3px 0 var(--color-gold); }
.operation-funnel-note { margin: 12px 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.45; }
@media (max-width: 700px) { .operation-funnel-head { align-items: flex-start; flex-direction: column; }.operation-funnel-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }.operation-funnel-step:nth-child(2) { border-right: 0; }.operation-funnel-step:nth-child(-n + 2) { border-bottom: 1px solid var(--border-thin); } }
.itinerary-convert-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.itinerary-convert-summary span { padding: 7px 10px; border: 1px solid var(--border-thin); background: var(--bg-soft); color: var(--text-main); font-size: .82rem; }
.itinerary-convert-warning { padding-left: 12px; border-left: 2px solid var(--color-gold); }
.itinerary-convert-blocked { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(173, 125, 61, .56); background: var(--bg-soft); color: var(--text-muted); }
.itinerary-convert-blocked strong { color: var(--color-wine); }
.op-body strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-dark); line-height: 1.3; }
.op-body .op-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.op-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.op-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 3px 8px; border: 1px solid var(--border-thin); color: var(--text-muted); display: inline-block; }
.op-tag.type-risk { border-color: var(--color-wine); color: var(--color-wine); }
.op-tag.type-passport { border-color: var(--color-gold); color: var(--warning); }
.op-tag.type-client_payment, .op-tag.type-supplier_payment { border-color: var(--success); color: var(--success); }
.op-tag.type-service { border-color: var(--color-gold); color: var(--color-wine); background: var(--color-gold-light); }
.op-tag.status-service { border-color: var(--border-thin); color: var(--text-muted); background: var(--bg-main); }
.op-tag.priority-urgent { background: var(--color-wine); border-color: var(--color-wine); color: #fff; }
.op-tag.status-open { background: var(--color-gold-light); border-color: var(--color-gold); }

.op-side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.op-side time { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; font-weight: 500; }
.op-side .op-action { height: 32px; padding: 0 16px; border: 1px solid var(--color-gold); background: transparent; color: var(--color-wine); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; transition: all .15s ease; }
.op-side .op-action:hover { background: var(--color-wine); border-color: var(--color-wine); color: #fff; }

.hidden-toggle { margin-top: 10px; }
.hidden-toggle summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--color-wine); font-weight: 600; display: flex; align-items: center; gap: 6px; padding: 8px 0; }
.hidden-toggle summary::-webkit-details-marker { display: none; }
.hidden-toggle summary::before { content: '▸'; font-size: 10px; color: var(--color-gold); }
.hidden-toggle[open] summary::before { content: '▾'; }
.hidden-toggle .op-list { margin-top: 8px; }

/* ============================================================
   20. TOURIST PROFILE (картка туриста)
   Нові компоненти — того, чого раніше не було. Скрізь, де підходив
   існуючий компонент, розмітка tourist.php перевикористовує його
   напряму: .badge (замість status-pill/status-tag), .mini-list/
   .mini-row (активні бронювання, звʼязки), .kpi-grid/.kpi-card
   (головні показники), .kv-row, .chip-row, .split-2, .timeline-list,
   .data-table, .entity-info-strip, .hidden-toggle (розгортання
   хронології).
   ============================================================ */

/* --- .tabs-pills: третій варіант вкладок (після .tabs-underline і
   .tabs-cards, розділ 9) — горизонтальні "таблетки" з лічильником,
   активна залита вином. Для секцій картки туриста (Огляд/Аналітика/
   Бронювання/Документи/Подорожі/Хронологія). --- */
.tabs-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.tabs-pills a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  padding: 9px 18px; border: 1px solid var(--border-thin);
  color: var(--text-muted); text-decoration: none; background: var(--bg-card);
}
.tabs-pills a:hover { border-color: var(--color-gold); color: var(--color-wine); }
.tabs-pills a.active { background: var(--color-wine); border-color: var(--color-wine); color: var(--color-gold); }
.tabs-pills a .tab-count {
  font-family: var(--font-serif); font-size: 10.5px; color: var(--color-wine);
  background: var(--color-gold-light); padding: 1px 7px; border: 1px solid var(--color-gold);
}
.tabs-pills a.active .tab-count { color: var(--color-gold); background: rgba(197,168,128,.16); border-color: rgba(197,168,128,.4); }

/* --- .action-list/.action-item: черга сигналів з тоном
   (bad/warn/soft), а не звичайний список. На відміну від .mini-row —
   зліва кольорова крапка-індикатор тону, праворуч явний заклик до дії. --- */
.action-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-thin); border: 1px solid var(--border-thin); }
.action-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--bg-main); padding: 16px 20px; text-decoration: none; }
.action-item:hover { background: var(--color-gold-light); }
.action-item-body { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.action-item-body .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--text-muted); }
.action-item.bad .dot { background: var(--danger); }
.action-item.warn .dot { background: var(--amber); }
.action-item.soft .dot { background: var(--color-gold); }
.action-item-text strong { display: block; font-family: var(--font-serif); font-size: 14.5px; color: var(--text-dark); font-weight: 500; margin-bottom: 3px; }
.action-item-text span { font-size: 11.5px; color: var(--text-muted); }
.action-item > b { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-wine); flex-shrink: 0; white-space: nowrap; }

/* --- .master-doc-card: паспорт як "головний документ" картки —
   візуально важча плашка (золота рамка). Показники всередині
   перевикористовують .kpi-label/.kpi-value (розділ 9). --- */
.master-doc-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--color-gold); background: var(--color-gold-light); padding: 22px 26px; margin-bottom: 18px; flex-wrap: wrap; }
.master-doc-card > div:not(.master-doc-actions) { display: flex; flex-direction: column; gap: 4px; }
.master-doc-card .kpi-label { margin-bottom: 0; }
.master-doc-card .kpi-value { font-size: 18px; }
.master-doc-actions { display: flex; flex-direction: column; gap: 8px; }

/* --- .checklist-grid/.check-card: швидкий чекліст документів (НЕ
   плутати з .checklist/.checklist-item із auth-екранів — там простий
   вертикальний список OK/FAIL для вимог хостингу; тут сітка карток
   is-ready/is-missing зі своєю дією "Відкрити"/"Додати"). --- */
.checklist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.check-card { border: 1px solid var(--border-thin); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.check-card.is-ready { border-color: rgba(63,101,79,.3); }
.check-card.is-missing { border-color: rgba(160,58,43,.22); }
.check-card > span:first-child { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--color-gold); font-weight: 700; }
.check-card strong { font-family: var(--font-serif); font-size: 15px; color: var(--text-dark); }
.check-card em { font-size: 11px; color: var(--text-muted); font-style: normal; }
.check-card a { align-self: flex-start; font-size: 10.5px; color: var(--color-wine); text-decoration: underline; text-underline-offset: 2px; margin-top: 4px; }

/* --- .insight-grid: рівна сітка показників без карткового вигляду
   .kpi-card — підпис+значення в один рядок сітки, для Tourist 360. --- */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-thin); border: 1px solid var(--border-thin); margin-bottom: 20px; }
.insight-grid p { background: var(--bg-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.insight-grid strong { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; }
.insight-grid span { font-family: var(--font-serif); font-size: 17px; color: var(--text-dark); }
.insight-grid.compact p { padding: 12px 14px; }

/* --- .mini-row модифікатори для звʼязків (агент/клієнт, через кого
   турист приходив) — той самий .mini-row/.mini-list, що й активні
   бронювання, тільки з тегом-міткою над заголовком і колонкою
   цифр праворуч замість суми. --- */
.mini-row .mini-tag { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--color-gold); font-weight: 700; margin-bottom: 4px; }
.mini-row.primary .mini-title { color: var(--color-wine); font-weight: 600; }
.mini-row.primary .mini-tag { color: var(--color-wine); }
.mini-row .mini-figures { text-align: right; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.mini-row .mini-figures b { color: var(--text-dark); }
/* --- Розгортання-картка: <details><summary class="card-header"> замість
   div — той самий заголовок картки, тільки клікабельний. Стрілку не
   малюємо окремо, .card-title вже досить виразний сам по собі. --- */
summary.card-header { cursor: pointer; list-style: none; }
summary.card-header::-webkit-details-marker { display: none; }
summary.card-header::marker { display: none; content: ''; }

/* --- .has-error/.field-warning: JS (tourist.php/tourists.php)
   перемикає .has-error на .input-wrapper при простроченому паспорті
   й показує приховану підказку .field-warning всередині. Раніше
   жило в убудованому <style> tourists.php. --- */
.input-wrapper.has-error input { border-color: var(--danger); }
.field-warning { display: none; margin-top: 6px; color: var(--danger); font-size: 12px; font-weight: 600; }
.input-wrapper.has-error .field-warning { display: block; }
.citizenship-input { text-transform: uppercase; }

.mini-row-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* --- .file-preview-card: "поточний файл" у формі редагування документа —
   мініатюра/іконка зліва, метадані і посилання "Відкрити" справа. --- */
.file-preview-card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--border-thin); background: var(--bg-main); padding: 14px; margin-bottom: 20px; }
.file-preview-card.is-empty { border-style: dashed; }
.file-preview-thumb { width: 52px; height: 52px; flex-shrink: 0; border: 1px solid var(--border-thin); background: var(--bg-card); display: grid; place-items: center; overflow: hidden; }
.file-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-preview-thumb svg { width: 22px; height: 22px; stroke: var(--color-gold); stroke-width: 1.4; fill: none; }
.file-preview-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.file-preview-kicker { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--color-gold); font-weight: 700; }
.file-preview-meta strong { font-family: var(--font-serif); font-size: 14px; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-meta small { font-size: 11px; color: var(--text-muted); }
.file-preview-meta a { font-size: 11.5px; color: var(--color-wine); text-decoration: underline; text-underline-offset: 2px; width: fit-content; }
.file-preview-meta .file-preview-muted { font-size: 11.5px; color: var(--text-muted); font-style: italic; }

/* --- .scale-banner: "показано 5 з 14" — підказка під довгими
   таблицями/списками, коли картка показує лише зріз даних. --- */
.scale-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--bg-main); border: 1px solid var(--border-thin); padding: 14px 18px; margin-top: 4px; flex-wrap: wrap; }
.scale-banner p { font-size: 11.5px; color: var(--text-muted); margin: 0; }
.scale-banner p b { color: var(--text-dark); font-weight: 600; }

/* --- .muted: генерична приглушена інлайн-мітка/речення (напр. "Перегляд"
   замість дій, пояснення під radio-опцією) — на відміну від .empty-note,
   який завжди є окремим бордерним блоком-заглушкою. --- */
.muted { color: var(--text-muted); font-size: 12px; }

/* ============================================================
   21. TOURISTS LIST (список туристів)
   Список-картки перевикористовує .rows/.row/.row-main/.row-title/
   .row-people/.row-meta/.row-actions/.menu/.pill/.mid-stack/.mid-row/
   .value-block/.manager-line (розділ 16, вже існували для сторінок
   типу "Клієнти/Агенти") — .entity-mobile-list/.data-table для
   списку тут НЕ використовуються, .rows сам по собі адаптивний.
   Нове нижче — тільки для того, чого справді не було: додатковий
   tier-колір лівої смужки рядка й картки порівняння дублів.
   ============================================================ */
.row.tier-danger::before { background: var(--danger); }

/* --- Дублі при створенні/редагуванні туриста: порівняння поточної
   картки з можливим дублем, і об'єднання. --- */
.duplicate-review-box { border: 1px solid var(--color-gold); background: var(--color-gold-light); padding: 20px; margin: 24px 0; }
.merge-review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.merge-review-head strong { display: block; font-family: var(--font-serif); font-size: 15px; color: var(--color-wine); margin-bottom: 4px; }
.merge-review-head p { font-size: 12px; color: var(--text-muted); margin: 0; }
.merge-note { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
.current-badge { display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 4px 10px; background: var(--color-wine); color: var(--color-gold); flex-shrink: 0; white-space: nowrap; }

.merge-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.merge-card { border: 1px solid var(--border-thin); background: var(--bg-card); padding: 16px 18px; }
.merge-card.is-current { border-color: rgba(63,101,79,.3); background: var(--success-soft); }
.merge-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.merge-card-head strong { display: block; font-family: var(--font-serif); font-size: 13.5px; color: var(--text-dark); margin-bottom: 3px; }
.merge-card-head span { font-size: 11px; color: var(--text-muted); }

.merge-compare { display: flex; flex-direction: column; border: 1px solid var(--border-thin); margin-bottom: 12px; }
.merge-compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 8px 12px; font-size: 11.5px; border-top: 1px solid var(--border-thin); }
.merge-compare-row:first-child { border-top: none; }
.merge-compare-row.head { background: var(--bg-main); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; }
.merge-compare-row span:first-child { color: var(--text-muted); }
.merge-compare-row strong { font-weight: 500; color: var(--text-dark); }
.merge-compare-row.different strong { color: var(--danger); font-weight: 600; }
.merge-compare-row.same strong { color: var(--success); }

.merge-actions { display: flex; justify-content: flex-end; }

/* --- .parser-choice: fieldset із двома radio-варіантами способу
   розпізнавання при масовому імпорті. --- */
.parser-choice { border: none; padding: 0; margin: 0 0 22px; }
.parser-choice legend { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 700; margin-bottom: 10px; padding: 0; }
.radio-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-thin); margin-bottom: 8px; cursor: pointer; font-size: 12.5px; color: var(--text-dark); }
.radio-option:has(input:checked) { border-color: var(--color-gold); background: var(--color-gold-light); }
.radio-option input { margin-top: 2px; accent-color: var(--color-wine); }
.radio-option .muted { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.radio-option.is-disabled { opacity: .5; cursor: not-allowed; }

/* --- .import-preview-box: результат перевірки перед масовим імпортом. --- */
.import-preview-box { border-top: 1px solid var(--border-thin); margin-top: 24px; padding-top: 20px; }
.import-preview-box h3 { font-family: var(--font-serif); font-size: 15px; color: var(--color-wine); margin-bottom: 6px; }
.import-preview-box .muted { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* ============================================================
   22. BOOKINGS LIST (список бронювань)
   Дослівно з bookings-list-refined, адаптовано під токени вище.
   Перед тим як додавати щось нове, прогрепано bookings.php і
   design-system.css. Перевикористано БЕЗ додавання нового CSS:
   .topbar/.eyebrow/.page-title/.topbar-actions/.user-chip,
   .btn/.btn-primary/.btn-ghost, .notice/.notice--success/
   .notice--danger, .tabs-underline (сканування режимів),
   .workspace-head (заголовок над сіткою KPI), .kpi-grid/.kpi-card
   (+ .accent/.attention — прототипні "payment/departure" це просто
   .accent, а "attention" вже дає теплий колір значення),
   .filter-bar (форма фільтрів) + .input-wrapper (кожне поле) +
   .filter-row.r1/.r2 (сітка рядів) — той самий патерн, що й у
   client.php, .chip-row/.chip,
   .list-toolbar/.count-line/.list-tools, .rows/.row/.row-main/
   .row-kicker/.row-title/.row-people/.row-meta/.row-actions/.menu,
   .value-block/.value-amount/.value-note, .pill(.ok/.warn/.down/
   .stable — покриває статуси балансу), .text-danger/.text-success
   (маржа), .empty-note, .pager (Paginator::render — не чіпали).
   Нижче — лише те, чого справді не було відповідника: прогрес-бар
   готовності заявки, компактна сітка "Менеджер/Створив/Офіс/...",
   і статусні пігулки (.operational-pill/.workflow-stage-pill/
   .doc-number-chip), які вже використовувались у розмітці списку,
   картки бронювання й форми редагування (спільні для 3 екранів),
   але без жодного визначення в design-system.css — раніше трималися
   на не наданому нам app.css. Означені тут одного разу, вони одразу
   підхоплюються і в картці/формі, без додаткових правок розмітки.
   ============================================================ */

/* --- .kpi-card як <button> (картка "Найближчі виїзди", коли виїздів
   кілька і клік відкриває модалку замість переходу за посиланням) —
   .kpi-card сама по собі скидає лише те, що потрібно для <a>-варіанта
   (text-decoration/color), тож нативні border/font/text-align кнопки
   лишаються — скидаємо їх тут окремо. --- */
.kpi-card.booking-upcoming-trigger { border: none; width: 100%; text-align: left; font: inherit; cursor: pointer; }

/* --- Другий .chip-row одразу під першим (зріз за етапами роботи) —
   стандартний .chip-row вже має власний margin-bottom:30px, разом з
   .list-toolbar це давало забагато повітря між двома рядами чіпів;
   тут лишень зменшено відступ САМЕ для другого ряду. --- */
.chip-row.booking-stage-chip-row { margin-top: -18px; }

/* --- Прогрес-бар готовності заявки всередині рядка списку. Аналога
   в системі не було (є .progress лише поза контекстом рядка-картки).
   Тон заповнення прив'язаний до PHP-класу readiness-ok/warn/bad,
   що вже виводиться на .row — нових PHP-полів не знадобилось. --- */
.row-progress { margin-top: 10px; max-width: 480px; }
.row-progress.empty { color: var(--text-muted); }
.row-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.row-progress-head strong { font-family: var(--font-serif); font-size: 12px; color: var(--color-wine); text-transform: none; letter-spacing: 0; }
.row-progress-track { height: 5px; background: var(--color-gold-light); overflow: hidden; }
.row-progress-track span { display: block; height: 100%; background: var(--color-wine); }
.row.readiness-warn .row-progress-track span { background: var(--warning); }
.row.readiness-bad .row-progress-track span { background: var(--danger); }
.row-progress-note { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 5px; }

/* --- Ліва акцентна смужка .row (вже існує як порожній ::before —
   розділ 16) під фінансовий тон рядка бронювання: PHP вже виводить
   клас finance-critical/partial/minor/paid на .row, тому тут лише
   кольори, той самий прийом, що й .row.tier-gold/.tier-danger. --- */
.row.finance-critical::before { background: var(--danger); }
.row.finance-partial::before { background: var(--warning); }
.row.finance-minor::before { background: var(--color-gold); }
.row.finance-paid::before { background: var(--success); }

/* --- Компактна 2-колонкова сітка "Менеджер/Створив/Офіс/Створено/
   Остання дія" всередині рядка списку. НЕ .kv-row (той — один рядок
   на всю ширину картки, тут потрібні кілька коротких пар в сітці) і
   НЕ .split-2 (той для двох рівних БЛОКІВ, а не дрібних міток). --- */
.row-owner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 10px; }
.row-owner-grid span { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; color: var(--text-dark); }
.row-owner-grid b { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }

/* --- Іконки в пунктах .menu (розділ 16): сам .menu раніше
   використовувався тільки з текстовими пунктами (без svg), тому
   вирівнювання іконки з текстом не було визначено. --- */
.menu svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }

/* --- .operational-pill: статус бронювання (Нове/В роботі/Готове/
   Очікує оплату/Прострочка/Ризик/Перед виїздом/Неповне/Завершено/
   Скасовано — ключі з booking_operational_status()). Використовується
   в списку, картці бронювання й формі редагування (спільний клас),
   але жодного визначення для нього в design-system.css не було —
   трималось на не наданому нам app.css. Структурно повторює .pill
   (розділ 16), але винесено окремим класом, а не розширенням .pill,
   бо тут власна фіксована палітра з 10 семантичних станів (а не
   довільні модифікатори .pill, використовувані по всій системі). --- */
.operational-pill {
  display: inline-flex; align-items: center; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; padding: 4px 10px; border: 1px solid var(--border-thin);
  white-space: nowrap; background: var(--bg-main); color: var(--text-muted);
}
.operational-pill.ready, .operational-pill.done { background: var(--success-soft); color: var(--success); border-color: rgba(63,101,79,.28); }
.operational-pill.incomplete { background: var(--amber-soft); color: var(--amber); border-color: rgba(138,90,0,.25); }
.operational-pill.risk, .operational-pill.overdue, .operational-pill.payment { background: var(--danger-soft); color: var(--danger); border-color: rgba(160,58,43,.25); }
.operational-pill.departure { background: var(--color-gold-light); color: var(--color-wine); border-color: var(--color-gold); }
.operational-pill.cancelled { background: transparent; color: var(--text-muted); }
.operational-pill.new, .operational-pill.work { background: var(--bg-main); color: var(--text-dark); }
/* .big — вже використовується в картці бронювання (шапка досьє), поки
   без стилю; додано наперед, щоб той екран не лишався зламаним. */
.operational-pill.big { font-size: 11px; padding: 6px 14px; }

/* --- .workflow-stage-pill: другорядний бейдж етапу воронки, коли він
   відрізняється від операційного статусу (рідкісний випадок) — та сама
   ситуація "спільний клас без визначення", що й .operational-pill. --- */
.workflow-stage-pill {
  display: inline-flex; align-items: center; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; padding: 4px 10px;
  background: var(--color-gold-light); color: var(--color-wine); border: 1px solid var(--color-gold);
}

/* --- .doc-number-chip: серифний номер документа (#BK-000032) —
   свідомо НЕ .badge (той sans-serif, uppercase) і не розширення
   .pill: тут потрібен саме "друкований бланк"-почерк номера, який
   ні один із них не дає. Спільний для списку/картки/форми клас без
   визначення — та сама ситуація, що й вище. --- */
.doc-number-chip { font-family: var(--font-serif); font-size: 11.5px; color: var(--color-wine); letter-spacing: .02em; background: var(--color-gold-light); padding: 2px 8px; border: 1px solid var(--color-gold); display: inline-block; }
/* .hero — вже використовується в шапці картки бронювання (крупний номер). */
.doc-number-chip.hero { font-size: 15px; padding: 4px 12px; }

@media (max-width: 1180px) {
  .row-owner-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 820px) {
  .row-owner-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   23. TCRM DATEPICKER (канонічний календар для полів дат)
   Перенесено з локального <style> bookings.php, де існували ДВІ
   власні копії того самого .tcrm-datepicker (застаріла компактна +
   пізніша, яка фактично й малювалась завдяки порядку каскаду) —
   класичний "тихий дубль", про який застерігає ТЗ. Обидві прибрані
   з bookings.php, і ось єдина канонічна версія, під токени Quiet
   Luxury замість --brand/--border/--card з app.css.

   НЕ те саме, що 6d (.tcrm-date-wrap/.tcrm-date-trigger) вище:
   6d ховає нативний <input type="date"> і показує кнопку-тригер;
   .tcrm-datepicker — це попап, що відкривається по фокусу звичайного
   <input type="text" data-tcrm-date">, і саме він реально
   використовується в bookings.php (усі поля дат). Жоден з наданих
   нам файлів не використовує розмітку 6d, тож 6d лишено як є —
   про об'єднання цих двох компонентів варто говорити окремим
   рішенням, коли буде видно, чи 6d взагалі живий десь у системі.
   ============================================================ */
.tcrm-datepicker {
  position: absolute; z-index: 30000; width: 304px; padding: 16px;
  border: 1px solid var(--border-thin); background: var(--bg-card);
  box-shadow: 0 14px 34px rgba(88, 24, 37, .14); font-family: var(--font-sans);
}
.tcrm-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.tcrm-dp-head strong { font-family: var(--font-serif); font-size: 13.5px; font-weight: 500; text-transform: capitalize; color: var(--color-wine); }
.tcrm-dp-head button {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--border-thin); background: var(--bg-card); color: var(--text-dark);
  cursor: pointer; transition: all .3s var(--cubic-luxury);
}
.tcrm-dp-head button:hover { border-color: var(--color-gold); color: var(--color-wine); }

/* --- .tcrm-dp-year: швидкий вибір року — раніше в шапці був лише
   текст "місяць рік" і стрілки на МІСЯЦЬ; щоб дістатись, наприклад,
   до дати народження туриста 30 років тому, довелось би клацнути
   "←" 360 разів. Тепер рік — окремий <select> між стрілками місяця
   (діапазон рахує JS: сьогодні−100…сьогодні+10, розширюється, якщо
   в полі вже стоїть дата поза цими межами).

   Без рамки взагалі (навіть без border-bottom): у деяких браузерах/ОС
   нативний <select> домальовує власне обрамлення поверх будь-якого
   заданого border, і з тонкою рамкою це виглядало тісно. Замість
   рамки — лише колір, жирність шрифту і власний SVG-шеврон
   (той самий, що й .input-wrapper select, розділ 6) як натяк, що
   це клікабельний контрол. --- */
.tcrm-dp-year {
  min-width: 80px;
  border: none; background: transparent;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23581825' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 12px;
  font-family: var(--font-serif); font-size: 13.5px; font-weight: 500; color: var(--color-wine);
  text-align: left; padding: 4px 20px 4px 6px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.tcrm-dp-year:hover, .tcrm-dp-year:focus { color: var(--color-gold); outline: none; }

.tcrm-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tcrm-dp-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.tcrm-dp-week span {
  display: grid;
  place-items: center;
  height: 22px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.tcrm-dp-grid span { display: grid; place-items: center; height: 22px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.tcrm-dp-grid i { min-height: 32px; }
.tcrm-dp-grid button {
  display: grid; place-items: center; min-height: 32px; border: 1px solid transparent;
  background: none; color: var(--text-dark); font-family: var(--font-sans); font-size: 12px;
  cursor: pointer; transition: all .2s;
}
.tcrm-dp-grid button:hover { border-color: var(--color-gold); }
.tcrm-dp-grid button.is-today { color: var(--color-wine); font-weight: 700; }
.tcrm-dp-grid button.is-selected { background: var(--color-wine); color: #fff; }

.tcrm-dp-today {
  width: 100%; height: 34px; margin-top: 12px; border: 1px solid var(--border-thin);
  background: none; color: var(--color-wine); font-family: var(--font-sans); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; cursor: pointer;
  transition: all .3s var(--cubic-luxury);
}
.tcrm-dp-today:hover { border-color: var(--color-gold); background: var(--color-gold-light); }

input[data-tcrm-date] { background: var(--bg-card); }

/* ============================================================
   24. BOOKING DETAIL — HERO (шапка картки бронювання)
   Перед додаванням прогрепано design-system.css: .attention-banner,
   .financial-grid/.fin-*, .progress-section/.progress-track/
   .progress-fill, .sla-badge, .tourist-pill, .todo-grid — жодного
   збігу, аналогів немає. Перевикористано без нового CSS:
   .luxury-card/.card-header/.card-kicker/.card-title/.card-subtitle
   (розділ 5), .btn/.btn-primary/.btn-ghost/.btn-secondary/.tiny
   (розділ 4), .tabs-underline (розділ 9), .operational-pill/
   .doc-number-chip (розділ 22 — той самий спільний клас, що й у
   списку бронювань), .pill (розділ 16, замість окремого .sla-badge —
   ok/warn/down з тим самим модифікатором booking_signal_class()).
   ============================================================ */
.attention-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px; margin-bottom: 20px; background: var(--danger-soft); border: 1px solid rgba(160, 58, 43, .28);
}
.attention-banner-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--danger); margin-bottom: 3px; }
.attention-banner-desc { font-size: 12.5px; color: var(--text-dark); }

.booking-detail-status {
  display: flex; align-items: flex-start; justify-content: flex-end; flex: 0 0 auto;
  margin-left: 20px;
}

/* Актуальний статус — інформаційний індикатор, не action-кнопка.
   Він стоїть праворуч у шапці та наслідує прототип: тонка рамка,
   нейтральний фон, без винної заливки. */
.booking-current-status {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 6px 12px;
  background: transparent; color: var(--color-wine);
  border: 1px solid var(--color-wine);
  border-radius: 0;
  font-size: 10px; font-weight: 500;
  text-transform: none; letter-spacing: .04em;
  white-space: nowrap;
}
.booking-meta-risk { color: var(--danger); font-weight: 500; }



/* КОРОТКО: .invoice-attach — окремий патерн для прикріплення рахунку до транзакції.
   Наявних .passport-recognize/.input-wrapper тут не можна перевикористати семантично:
   рахунок живе всередині рядка фінансової таблиці та має компактну дворядкову форму. */
.invoice-attach { display: block; margin-top: 2px; position: relative; }
.invoice-attach-trigger {
  display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px;
  border: 1px solid var(--border-thin); background: transparent; color: var(--color-wine);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
  list-style: none;
}
.invoice-attach-trigger::-webkit-details-marker { display: none; }
.invoice-attach[open] { z-index: 40; }
.invoice-attach[open] .invoice-attach-trigger { border-color: var(--color-gold); background: var(--color-gold-light); }
.invoice-attach-form {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  display: grid;
  gap: 12px;
  width: min(320px, calc(100vw - 48px));
  min-width: 260px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-thin, #DCD5CB);
  background: #FFFCFA;
  box-shadow: 0 12px 32px rgba(42, 35, 36, .12);
  border-radius: 0;
}
.invoice-attach-field { display: grid; gap: 5px; margin: 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.invoice-attach-field input[type="text"] {
  width: 100%; padding: 8px 0; border: none; border-bottom: 1px solid var(--border-thin);
  background: transparent; color: var(--text-dark); font: inherit; font-size: 12px; text-transform: none;
  letter-spacing: normal; outline: none;
}
.invoice-attach-field input[type="text"]:focus { border-color: var(--color-gold); }
.invoice-attach-field input[type="file"] { width: 100%; min-width: 0; font: inherit; font-size: 11px; color: var(--text-dark); }
.invoice-attach-field input[type="file"]::file-selector-button {
  font-family: var(--font-sans); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
  padding: 7px 11px; margin-right: 8px; cursor: pointer;
  background: var(--bg-card); color: var(--color-wine); border: 1px solid var(--border-thin);
  transition: all .3s var(--cubic-luxury);
}
.invoice-attach-field input[type="file"]::file-selector-button:hover { border-color: var(--color-gold); background: var(--color-gold-light); }
.invoice-attach-form .btn { justify-self: start; }

/* --- Панель швидких дій: рядок дрібних кнопок над фінансовою
   сіткою. .booking-actions-separator — вертикальна риска-розділювач
   між групами дій (Оплата/Маршрут/Документ/Задача | Підтвердити/
   Оплачено/Завершити | Редагувати/Automation). --- */
.booking-actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-thin); }
.booking-actions-bar form { display: inline-flex; }
.booking-actions-separator { width: 1px; height: 20px; background: var(--border-thin); margin: 0 2px; }
/* .booking-actions-bar--secondary — рядок швидкої зміни статусу
   (Підтвердити/Оплачено/Завершити/Automation), навмисно тихіший за
   основний ряд дій: менший відступ знизу, без нижньої лінії, кнопки
   притлумлені opacity. Це одноклікові form-submit без підтвердження —
   не повинні виглядати як рівноцінна навігація поруч з "Створити
   маршрут"/"+ Задача". */
.booking-actions-bar--secondary { padding-bottom: 20px; margin-bottom: 0; margin-top: -12px; border-bottom: 1px solid var(--border-thin); opacity: .72; }
.booking-actions-bar--secondary:hover { opacity: 1; }

.financial-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-thin);
  align-items: stretch;
  min-height: 106px;
}
.financial-grid .fin-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 24px 0;
  box-sizing: border-box;
}
.fin-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.fin-value { font-family: var(--font-serif); font-size: 17px; color: var(--color-wine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-value.positive { color: var(--success); }
.fin-value.debt { color: var(--danger); }
@media (max-width: 1180px) { .financial-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .financial-grid { grid-template-columns: 1fr 1fr; } }

.progress-section { margin-top: 20px; }
.progress-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.progress-label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted); font-weight: 500; }
.progress-value { font-family: var(--font-serif); font-size: 16px; color: var(--color-wine); font-weight: 600; }
/* .progress-track — було 6px/gold-light (грубо), прототип задає 2px/border-thin
   (тонка волосяна лінія) — вирівняно 1:1 з gemini-code-...html. */
.progress-track { height: 2px; background: var(--border-thin); overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--color-wine); transition: width .6s var(--cubic-luxury); }

/* ============================================================
   25. BOOKING DETAIL — ПЛОСКЕ ДОСЬЄ (заміна вкладок .tabs-underline
   /.booking-tab-panel у перегляді бронювання на суцільний список
   секцій за прототипом "Досьє бронювання" — gemini-code-...html).

   Перед додаванням прогрепано design-system.css цілком:
   - .data-table, .badge(--ok/--warn/--danger/--gold/--muted),
     .pager/.list-footer, .notice/.notice--info, .card-kicker,
     .timeline-list/.timeline-item/.timeline-date/.timeline-text,
     .empty-note, .btn/.btn-primary/.btn-minimal, .luxury-card/
     .card-header/.card-kicker/.card-title/.card-subtitle —
     ВСІ перевикористані як є нижче в bookings.php, нового CSS
     під них не було потрібно (замінили старі .status-chip/
     .booking-ops-table/.booking-action-list/.mini-table/
     .booking-note-card з app.css, які самі ніде не визначені —
     "видима" стилізація трималась виключно на застарілому app.css).
   - Нового аналога не було лише для трьох компонентів нижче.
   ============================================================ */

/* --- .todo-grid/.todo-card: "Що закрити зараз" — картка-рядок
   (лейбл+заголовок зліва, кнопка дії справа) у 3-колонковій сітці.
   НЕ .kpi-card (та інформаційна, без дії, колонковий вміст) і НЕ
   .stat-card (одна картка поза сіткою, без action-зони). --- */
.todo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.todo-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--border-thin); background: var(--bg-main); padding: 18px 20px;
}
.todo-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.todo-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; }
.todo-title { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-dark); }
@media (max-width: 1100px) { .todo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .todo-grid { grid-template-columns: 1fr; } }

/* --- .docs-grid/.doc-card: пакет документів по бронюванню.
   НЕ .doc-number-chip (той — інлайн-чіп номера в рядку/шапці, не
   самостійна картка) і не .tabs-cards (той — навігаційні вкладки,
   не картки-документи з власними діями Друк/PDF). --- */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.doc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
  padding: 16px;
  transition: border-color .3s var(--cubic-luxury), background .3s var(--cubic-luxury);
}
.doc-card:hover { border-color: var(--color-gold); background: var(--color-gold-light); }
.doc-card.is-generated { border-top: 2px solid #88A58B; }
.doc-card.is-pending { border-top: 2px solid #D7B7B0; }
.doc-type { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: var(--color-gold); font-weight: 700; margin-bottom: 6px; }
.doc-title { font-family: var(--font-serif); font-size: 17px; color: var(--color-wine); margin-bottom: 6px; }
.doc-meta { font-size: 11px; color: var(--text-muted); line-height: 1.55; margin-bottom: 18px; }
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.doc-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.booking-doc-card-menu { position: relative; flex: 0 0 auto; }
.booking-doc-card-menu > summary {
  display: grid; place-items: center; width: 34px; min-height: 32px; cursor: pointer;
  list-style: none; border: 1px solid var(--border-thin); color: var(--color-wine); font-weight: 700;
}
.booking-doc-card-menu > summary::-webkit-details-marker { display: none; }
.booking-doc-card-menu-popover {
  position: absolute; z-index: 20; right: 0; bottom: calc(100% + 5px); width: max-content; min-width: 190px;
  border: 1px solid var(--border-thin); background: var(--bg-card); box-shadow: 0 10px 28px rgba(40,20,24,.16); padding: 5px;
}
.booking-doc-card-menu-popover a, .booking-doc-card-menu-popover button {
  display: block; width: 100%; border: 0; background: transparent; padding: 8px 10px; color: var(--text-main); text-align: left;
  font: inherit; font-size: 11px; text-decoration: none; cursor: pointer;
}
.booking-doc-card-menu-popover a:hover, .booking-doc-card-menu-popover button:hover { background: var(--color-gold-light); color: var(--color-wine); }
.doc-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 1100px) { .docs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .docs-grid { grid-template-columns: 1fr; } }

/* --- .timeline-author: рядок автора дії під .timeline-text.
   Розширення наявної родини .timeline-list (розділ 18, вперше
   з'явилась для client.php) — там автора не було, бо клієнтський
   таймлайн лише лінкує на інші сутності. У досьє бронювання кожен
   запис ще й підписаний виконавцем/системою, тому додано окремий
   рядок, а не новий "паралельний" таймлайн-компонент. --- */
.timeline-author { font-size: 11px; color: var(--color-gold); font-weight: 600; margin-top: 2px; }

/* --- .data-table .row-title-cell.lg: збільшений варіант наявного
   .row-title-cell (14px) для назв послуг (готель/рейс) у таблиці
   маршруту — там серифний заголовок повинен читатись як окремий
   "продукт", а не як звичайний рядок таблиці. Модифікатор, а не
   новий клас: успадковує колір/шрифт .row-title-cell один-в-один. --- */
.data-table .row-title-cell.lg { font-size: 17px; margin-bottom: 2px; }

/* --- .input-group: "кінетичний" інпут з gemim-code-прототипу (тонка
   лінія знизу, що розгортається в золоту при фокусі). Використовується
   для примітки бронювання в hero-картці. НЕ .input-wrapper (той —
   повноцінне поле форми з label/border з усіх боків, для інших цілей
   у майстрі бронювання) — тут навмисно легший, "читацький" стиль. --- */
.input-group { position: relative; margin-top: 8px; }
.input-group input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-thin);
  padding: 8px 0; font-family: var(--font-sans); font-size: 13px; color: var(--text-dark); outline: none;
}
.input-group::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; height: 1px;
  background-color: var(--color-gold); transition: all .4s var(--cubic-luxury);
}
.input-group:focus-within::after { width: 100%; left: 0%; }


/* КОРОТКО: таблиці послуг і туристів на широкому екрані мають читатися як робочі
   списки, а не стискатися до надто вузьких клітинок. Це локальне обмеження лише
   для booking detail, тому глобальний .data-table не змінюємо. */
#overview-multiservices .table-scroll,
#booking-tourists .table-scroll { overflow-x: auto; }
#overview-multiservices .data-table { min-width: 760px; }
#booking-tourists .data-table { min-width: 820px; }

/* Актуальне розселення: менеджер працює з поточним станом, без UX-поняття "версій". */
.booking-rooming-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.rooming-list-current-note { margin-top: 14px; padding: 10px 12px; border-top: 1px solid var(--border-thin); color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.rooming-list-current-note strong { color: var(--text-dark); font-weight: 500; }
@media (max-width: 760px) {
  .booking-rooming-actions { width: 100%; justify-content: flex-start; }
}

/* --- [data-tourists-more]: кнопка "показати ще" для списку туристів
   (перші 10 рядків видно одразу, решта — у прихованому <tbody>).
   Стилю не потребує: кнопка — це наявний .btn.btn-minimal.tiny,
   прихований <tbody> — нативний атрибут [hidden]. Керується
   ізольованим скриптом при таблиці (без залежності від великого
   контролера майстра бронювання), той самий підхід, що й у
   data-rooming-list-generate вище. --- */

/* КОРОТКО: у шапці заявки великому статусу потрібна власна лінія, щоб він не
   конкурував за ширину з ризиком/етапом/періодом опрацювання. */
@media (max-width: 760px) {
  .booking-detail-status { margin-left: 0; width: 100%; justify-content: flex-start; }
  .booking-current-status { width: auto; }
  .invoice-attach-form { min-width: min(260px, calc(100vw - 80px)); }
}


/* Booking detail financials: center each KPI group inside the full
   band between the top and bottom rules. Padding belongs to the band,
   not to the individual content row, so labels and values cannot drift
   toward the upper rule when the card height changes. */
.financial-grid {
  min-height: 108px;
  padding: 0;
  align-items: stretch;
}
.financial-grid .fin-item {
  min-height: 108px;
  height: 100%;
  padding: 0;
  justify-content: center;
  align-items: flex-start;
}
.financial-grid .fin-label,
.financial-grid .fin-value {
  flex: 0 0 auto;
}

/* ============================================================
   BOOKING LIST — FINAL POLISH
   1) Більше повітря між панеллю пошуку та quick-filter chips.
   2) Товщина progress bar у рядку заявки узгоджена з detail view.
   ============================================================ */
.booking-list-shell > .workspace { margin-bottom: 0 !important; }
.booking-list-shell > .workspace > .filter-bar { margin-bottom: 0; }
/* Фактична DOM-структура: filter/workspace закривається перед першим chip-row.
   Відступ ставимо на сам chip-row, щоб він гарантовано був між двома блоками,
   а не збільшував висоту filter-bar. */
.booking-list-shell > .workspace + .chip-row { margin-top: 32px !important; }
.booking-list-shell .row-progress-track,
.booking-list-shell .booking-progress-track { height: 2px !important; }

/* ============================================================
   26. BOOKING WIZARD — КРОКИ 2–5
   Перед додаванням прогрепано: .luxury-card/.card-header/.card-title/
   .card-subtitle/.input-row/.input-wrapper/.btn/.empty-note/.progress-track
   уже є в системі. Тут не створюємо паралельних компонентів — стилізуємо
   існуючу production-розмітку кроків 2–5 під референс wizard-refined.
   Для динамічних блоків (готелі, rooming, service cards, витрати, платежі)
   зберігаємо існуючі JS-хуки та data-* без змін.
   ============================================================ */
.booking-page .form-step[data-step="2"],
.booking-page .form-step[data-step="3"],
.booking-page .form-step[data-step="4"],
.booking-page .form-step[data-step="5"] {
  background: var(--bg-card);
  border: 1px solid var(--border-thin);
  box-shadow: 0 4px 24px rgba(88, 24, 37, .015);
  padding: 34px;
  margin-bottom: 22px;
}

.booking-page .form-step[data-step="2"] .form-section-head,
.booking-page .form-step[data-step="3"] .form-section-head,
.booking-page .form-step[data-step="4"] .form-section-head,
.booking-page .form-step[data-step="5"] .form-section-head {
  display: block;
  margin-bottom: 26px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-gold-light);
}
.booking-page .form-step[data-step="2"] .form-section-head h3,
.booking-page .form-step[data-step="3"] .form-section-head h3,
.booking-page .form-step[data-step="4"] .form-section-head h3,
.booking-page .form-step[data-step="5"] .form-section-head h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-wine);
  letter-spacing: .02em;
}
.booking-page .form-step[data-step="2"] .form-section-head span,
.booking-page .form-step[data-step="3"] .form-section-head span,
.booking-page .form-step[data-step="4"] .form-section-head span,
.booking-page .form-step[data-step="5"] .form-section-head span {
  display: block;
  max-width: 760px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Поля кроків 2–5 у production-розмітці часто є прямими <label>,
   тому .input-wrapper їх не охоплює. Це локальна типографічна адаптація
   під той самий form-патерн, без нового компонента. */
.booking-page .form-step[data-step="2"] > label,
.booking-page .form-step[data-step="2"] .booking-route-main > label,
.booking-page .form-step[data-step="3"] > label,
.booking-page .form-step[data-step="4"] label,
.booking-page .form-step[data-step="5"] label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.booking-page .form-step[data-step="2"] > label > input,
.booking-page .form-step[data-step="2"] > label > select,
.booking-page .form-step[data-step="2"] > label > textarea,
.booking-page .form-step[data-step="2"] .booking-route-main > label > input,
.booking-page .form-step[data-step="2"] .booking-route-main > label > select,
.booking-page .form-step[data-step="2"] .booking-route-main > label > textarea,
.booking-page .form-step[data-step="3"] > label > textarea,
.booking-page .form-step[data-step="4"] label > input,
.booking-page .form-step[data-step="4"] label > select,
.booking-page .form-step[data-step="4"] label > textarea,
.booking-page .form-step[data-step="5"] label > input,
.booking-page .form-step[data-step="5"] label > select,
.booking-page .form-step[data-step="5"] label > textarea {
  width: 100%;
  padding: 11px 0;
  border: none;
  border-bottom: 1px solid var(--border-thin);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dark);
  outline: none;
}
.booking-page .form-step[data-step="3"] > label > textarea,
.booking-page .form-step[data-step="4"] label > textarea,
.booking-page .form-step[data-step="5"] label > textarea {
  border: 1px solid var(--border-thin);
  padding: 10px 12px;
  resize: vertical;
}

/* Крок 2: матриця послуг — production має .service-choice, а не окремий
   prototype-only .matrix-item. Використовуємо production-клас, щоб JS
   чекбоксів і data-service-choice залишилися недоторканими. */
.booking-page .service-picker-head {
  display: block;
  margin: 8px 0 12px;
}
.booking-page .service-picker-head strong {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
}
.booking-page .service-picker-head span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.booking-page .service-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 6px;
}
.booking-page .service-choice {
  position: relative;
  min-height: 78px;
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 16px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
  cursor: pointer;
  transition: all .3s var(--cubic-luxury);
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 12.5px !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}
.booking-page .service-choice:hover { border-color: var(--color-gold); background: var(--color-gold-light); }
.booking-page .service-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.booking-page .service-choice::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--border-thin);
  background: var(--border-thin);
  transition: all .3s var(--cubic-luxury);
}
.booking-page .service-choice:has(input:checked) {
  border-color: var(--color-gold);
  background: #FAF8F5;
  box-shadow: 0 4px 12px rgba(197,168,128,.1);
}
.booking-page .service-choice:has(input:checked)::after {
  background: var(--color-wine);
  border-color: var(--color-wine);
  box-shadow: 0 0 0 3px rgba(88,24,37,.15);
}
.booking-page .service-choice > span { padding-right: 18px; }

/* Крок 3: простий текстовий блок з тим самим вертикальним ритмом,
   що й prototype .input-wrapper. */
.booking-page .form-step[data-step="3"] > label { margin-bottom: 0; }
.booking-page .form-step[data-step="3"] > label::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  margin-top: -1px;
  background: var(--color-wine);
  transition: width .4s var(--cubic-luxury);
}
.booking-page .form-step[data-step="3"] > label:focus-within::after { width: 100%; }

/* Крок 4: quick-add і розгорнуті витрати залишаються функціональними
   details, але отримують форму карток з референсу. */
.booking-page .cost-quick-add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}
.booking-page .cost-quick-add .button,
.booking-page .cost-quick-add .btn {
  min-height: 36px;
}
.booking-page .cost-row {
  display: block;
  margin: 12px 0;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
}
.booking-page .cost-row > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  background: var(--bg-main);
}
.booking-page .cost-row > summary::-webkit-details-marker { display: none; }
.booking-page .cost-row-title { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.booking-page .cost-row-amount { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.booking-page .cost-row-remove,
.booking-page .payment-remove,
.booking-page .supplier-payment-remove {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-thin);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.booking-page .cost-row-remove:hover,
.booking-page .payment-remove:hover,
.booking-page .supplier-payment-remove:hover { border-color: var(--danger); color: var(--danger); }
.booking-page .cost-row > .field-note,
.booking-page .cost-row > .grid,
.booking-page .cost-row > label,
.booking-page .cost-row > .supplier-payment-plan { margin-left: 18px; margin-right: 18px; }
.booking-page .cost-row > .field-note { margin-top: 12px; }
.booking-page .cost-row > .grid:last-of-type { margin-bottom: 18px; }
.booking-page .cost-row-category-badge {
  display: inline-flex;
  margin-top: 6px;
  padding: 5px 9px;
  border: 1px solid var(--color-gold);
  background: var(--color-gold-light);
  color: var(--color-wine);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.booking-page .supplier-payment-plan {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
}
.booking-page .supplier-payment-plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.booking-page .supplier-payment-plan-head strong { display: block; font-size: 13px; color: var(--text-dark); }
.booking-page .supplier-payment-plan-head span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.booking-page .supplier-payment-rows { display: grid; gap: 8px; }
.booking-page .supplier-payment-row {
  display: grid;
  grid-template-columns: minmax(110px,.7fr) minmax(120px,.7fr) minmax(130px,.8fr) minmax(160px,1fr) auto;
  gap: 12px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid var(--border-thin);
}
.booking-page .supplier-payment-total { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--color-wine); }
.booking-page .supplier-payment-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  border-radius: 0;
}
.booking-page .supplier-payment-summary strong { font-size: 13px; }
.booking-page .supplier-payment-summary span { font-size: 12.5px; color: var(--text-muted); }
.booking-page .supplier-terms-hint {
  display: block;
  margin-top: 6px;
  padding: 7px 10px;
  border-left: 2px solid var(--color-gold);
  background: var(--bg-main);
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.booking-page .supplier-terms-hint[hidden] { display: none !important; }

/* Крок 5: фінансові блоки — спокійні картки замість старих округлених
   beige-компонентів. Розрахунки та data-* не змінюються. */
.booking-page .booking-exchange-box,
.booking-page .booking-margin-calculator,
.booking-page .booking-finance-preview,
.booking-page .booking-payment-plan {
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  border-radius: 0;
}
.booking-page .booking-exchange-box { padding: 16px 18px; }
.booking-page .booking-exchange-help { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }
.booking-page .booking-margin-calculator { margin-top: 10px; padding: 20px; }
.booking-page .booking-margin-calculator .form-section-head { margin-bottom: 20px; }
.booking-page .booking-margin-calculator .form-section-head h3 { font-size: 16px; }
.booking-page .booking-finance-preview { margin-top: 14px; padding: 16px 18px; }
.booking-page .booking-payment-plan { margin-top: 14px; padding: 0; overflow: hidden; }
.booking-page .booking-payment-plan-head,
.booking-page .payment-plan-summary {
  padding: 14px 18px;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-thin);
}
.booking-page .payment-plan-summary { border-top: 1px solid var(--border-thin); border-bottom: 0; font-size: 12px; color: var(--text-muted); }
.booking-page .payment-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: 16px;
  align-items: end;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-thin);
}
.booking-page .payment-row:last-child { border-bottom: 0; }
.booking-page .readonly-field.booking-pax-fixed {
  min-height: 40px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border-thin);
}
.booking-page .readonly-field.booking-pax-fixed span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
}
.booking-page .readonly-field.booking-pax-fixed strong { display: block; margin-top: 5px; font-size: 13px; color: var(--text-dark); }

.booking-page .form-step[data-step="2"] .step-nav,
.booking-page .form-step[data-step="3"] .step-nav,
.booking-page .form-step[data-step="4"] .step-nav,
.booking-page .form-step[data-step="5"] .step-nav {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border-thin);
}

@media (max-width: 1100px) {
  .booking-page .service-choice-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-page .supplier-payment-row { grid-template-columns: 1fr 1fr; }
  .booking-page .supplier-payment-remove { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 700px) {
  .booking-page .form-step[data-step="2"],
  .booking-page .form-step[data-step="3"],
  .booking-page .form-step[data-step="4"],
  .booking-page .form-step[data-step="5"] { padding: 22px 18px; }
  .booking-page .service-choice-grid { grid-template-columns: 1fr; }
  .booking-page .payment-row { grid-template-columns: 1fr; }
  .booking-page .supplier-payment-summary { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   BOOKING WIZARD — ACTIVE SERVICE DETAILS
   Крок 2: активні послуги використовують production-розмітку
   (.booking-service-card, .booking-field-pair, .booking-rooming-*).
   Нових компонентних класів не додаємо: стилізація накладається
   на вже існуючі JS/PHP-хуки. [hidden] тут навмисно має !important,
   щоб візуальний шар ніколи не перебивав логіку syncSmartServiceEngine().
   ============================================================ */

.booking-page .form-step[data-step="2"] [hidden] {
  display: none !important;
}

.booking-page .form-step[data-step="2"] .booking-service-card {
  display: block;
  grid-column: 1 / -1;
  margin-top: 20px;
  padding: 20px 22px 22px;
  border: 1px solid var(--border-thin);
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
  box-shadow: 0 2px 12px rgba(42, 35, 36, .02);
}

.booking-page .form-step[data-step="2"] .booking-service-card > strong,
.booking-page .form-step[data-step="2"] .booking-rooming-head > strong,
.booking-page .form-step[data-step="2"] .booking-extra-hotels-head > strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine);
}

.booking-page .form-step[data-step="2"] .booking-service-card > strong::after,
.booking-page .form-step[data-step="2"] .booking-rooming-head > strong::after,
.booking-page .form-step[data-step="2"] .booking-extra-hotels-head > strong::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 9px;
  background: var(--color-gold);
}

.booking-page .form-step[data-step="2"] .booking-service-card > .grid,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row > .grid,
.booking-page .form-step[data-step="2"] .booking-rooming-room > .grid {
  gap: 22px 22px;
  margin-top: 17px;
}

.booking-page .form-step[data-step="2"] .booking-service-card label,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label,
.booking-page .form-step[data-step="2"] .booking-rooming-room label,
.booking-page .form-step[data-step="2"] .booking-field-pair label,
.booking-page .form-step[data-step="2"] .booking-date-range label,
.booking-page .form-step[data-step="2"] .booking-org-fields label {
  display: block;
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  font-weight: 600;
}

.booking-page .form-step[data-step="2"] .booking-service-card label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-service-card label > select,
.booking-page .form-step[data-step="2"] .booking-service-card label > textarea,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > select,
.booking-page .form-step[data-step="2"] .booking-rooming-room label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-rooming-room label > select,
.booking-page .form-step[data-step="2"] .booking-rooming-room label > textarea,
.booking-page .form-step[data-step="2"] .booking-field-pair label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-field-pair label > select,
.booking-page .form-step[data-step="2"] .booking-field-pair label > textarea,
.booking-page .form-step[data-step="2"] .booking-date-range label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-date-range label > select {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border-thin);
  background: transparent;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
  transition: border-color .3s var(--cubic-luxury);
}

.booking-page .form-step[data-step="2"] .booking-service-card label > textarea,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > textarea,
.booking-page .form-step[data-step="2"] .booking-rooming-room label > textarea,
.booking-page .form-step[data-step="2"] .booking-field-pair label > textarea {
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--border-thin);
  resize: vertical;
}

/* Фокус: анімована лінія від центру (як .input-wrapper::after), без різкої зміни border */
.booking-page .form-step[data-step="2"] .booking-service-card label:not(.rooming-tourist-row):not(.booking-service-pax-item):not(.services-tourist-check),
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label:not(.rooming-tourist-row),
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label:not(.rooming-tourist-row),
.booking-page .form-step[data-step="2"] .booking-transfer-row label:not(.rooming-tourist-row):not(.booking-service-pax-item),
.booking-page .form-step[data-step="2"] .booking-svc-row label:not(.rooming-tourist-row):not(.booking-service-pax-item),
.booking-page .form-step[data-step="2"] .booking-field-pair label,
.booking-page .form-step[data-step="2"] .booking-date-range label,
.booking-page .form-step[data-step="2"] .booking-route-main > label {
  position: relative;
}
.booking-page .form-step[data-step="2"] .booking-service-card label:not(.rooming-tourist-row):not(.booking-service-pax-item):not(.services-tourist-check)::after,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label:not(.rooming-tourist-row)::after,
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label:not(.rooming-tourist-row)::after,
.booking-page .form-step[data-step="2"] .booking-transfer-row label:not(.rooming-tourist-row):not(.booking-service-pax-item)::after,
.booking-page .form-step[data-step="2"] .booking-svc-row label:not(.rooming-tourist-row):not(.booking-service-pax-item)::after,
.booking-page .form-step[data-step="2"] .booking-field-pair label::after,
.booking-page .form-step[data-step="2"] .booking-date-range label::after,
.booking-page .form-step[data-step="2"] .booking-route-main > label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-wine);
  transition: left .4s var(--cubic-luxury), width .4s var(--cubic-luxury);
  pointer-events: none;
}
.booking-page .form-step[data-step="2"] .booking-service-card label:not(.rooming-tourist-row):not(.booking-service-pax-item):not(.services-tourist-check):focus-within::after,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label:not(.rooming-tourist-row):focus-within::after,
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label:not(.rooming-tourist-row):focus-within::after,
.booking-page .form-step[data-step="2"] .booking-transfer-row label:not(.rooming-tourist-row):not(.booking-service-pax-item):focus-within::after,
.booking-page .form-step[data-step="2"] .booking-svc-row label:not(.rooming-tourist-row):not(.booking-service-pax-item):focus-within::after,
.booking-page .form-step[data-step="2"] .booking-field-pair label:focus-within::after,
.booking-page .form-step[data-step="2"] .booking-date-range label:focus-within::after,
.booking-page .form-step[data-step="2"] .booking-route-main > label:focus-within::after {
  left: 0;
  width: 100%;
}
.booking-page .form-step[data-step="2"] .booking-service-card label > input:focus,
.booking-page .form-step[data-step="2"] .booking-service-card label > select:focus,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > input:focus,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > select:focus,
.booking-page .form-step[data-step="2"] .booking-rooming-room label > input:focus,
.booking-page .form-step[data-step="2"] .booking-rooming-room label > select:focus,
.booking-page .form-step[data-step="2"] .booking-field-pair label > input:focus,
.booking-page .form-step[data-step="2"] .booking-field-pair label > select:focus,
.booking-page .form-step[data-step="2"] .booking-date-range label > input:focus,
.booking-page .form-step[data-step="2"] .booking-date-range label > select:focus,
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label > input:focus,
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label > select:focus,
.booking-page .form-step[data-step="2"] .booking-transfer-row label > input:focus,
.booking-page .form-step[data-step="2"] .booking-svc-row label > input:focus {
  border-bottom-color: var(--border-thin); /* лінія фокуса малює ::after */
}

.booking-page .form-step[data-step="2"] .booking-service-card label > input::placeholder,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > input::placeholder,
.booking-page .form-step[data-step="2"] .booking-rooming-room label > input::placeholder,
.booking-page .form-step[data-step="2"] .booking-field-pair label > input::placeholder,
.booking-page .form-step[data-step="2"] .booking-date-range label > input::placeholder {
  color: #B4ACA6;
}

.booking-page .form-step[data-step="2"] .booking-service-card label > select,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > select,
.booking-page .form-step[data-step="2"] .booking-rooming-room label > select,
.booking-page .form-step[data-step="2"] .booking-field-pair label > select,
.booking-page .form-step[data-step="2"] .booking-date-range label > select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7273' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 13px;
  padding-right: 22px;
  cursor: pointer;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="tour"],
.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] {
  display: block;
  grid-column: 1 / -1;
  margin-top: 18px;
  padding: 0 0 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="tour"] > select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 24px 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border-thin);
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7273' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 13px;
  color: var(--text-dark);
  font: 400 12.5px var(--font-sans);
  outline: none;
}

.booking-page .form-step[data-step="2"] .booking-inline-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 6px;
}

.booking-page .form-step[data-step="2"] .booking-inline-select-row select {
  margin-top: 0 !important;
}

.booking-page .form-step[data-step="2"] .booking-inline-select-row .btn {
  margin-bottom: 5px;
}

.booking-page .form-step[data-step="2"] .booking-date-range {
  margin-top: 18px;
  gap: 18px 22px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border-thin);
}

.booking-page .form-step[data-step="2"] .booking-nights-panel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 0;
  padding: 11px 0 0;
}

.booking-page .form-step[data-step="2"] .booking-nights-panel strong {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-wine);
}

.booking-page .form-step[data-step="2"] .booking-nights-panel span {
  font-size: 11px;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] .booking-field-pair[data-service-field="stay-details"] {
  margin-top: 2px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-thin);
}

.booking-page .form-step[data-step="2"] .booking-rooming-builder {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
}

.booking-page .form-step[data-step="2"] .booking-rooming-head {
  margin-bottom: 14px;
}

.booking-page .form-step[data-step="2"] .booking-rooming-head .field-note,
.booking-page .form-step[data-step="2"] .booking-extra-hotels-head .field-note {
  display: block;
  max-width: 760px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] .booking-rooming-rooms {
  display: grid;
  gap: 10px;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room {
  padding: 16px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room::before {
  content: 'НОМЕР';
  display: block;
  margin-bottom: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--color-gold);
}

.booking-page .form-step[data-step="2"] .booking-rooming-builder > .btn {
  margin-top: 12px;
}

/* Список туристів у номері (rooming builder): чекбокс + ім'я + нотатка
   про конфлікт + дві персональні дати заїзду/виїзду. Раніше без CSS —
   чекбокс ловився під загальне ".booking-rooming-room label > input"
   (width:100%), тому виглядав "з'їхавшим" у правий край рядка, а ім'я
   лишалось зліва. Тут чекбокс завжди першим і фіксованого розміру —
   не залежить від довжини імені. */
.booking-page .form-step[data-step="2"] .booking-rooming-tourists {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-thin);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dark);
  cursor: pointer;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--color-wine);
}

.booking-page .form-step[data-step="2"] .rooming-conflict-note {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--danger);
}

.booking-page .form-step[data-step="2"] .rooming-conflict-note:not(:empty) {
  padding: 1px 6px;
  border: 1px solid rgba(160,58,43,.3);
  background: var(--danger-soft);
}

/* Персональні дати відрізняються від дат номера лише за потреби — не
   мають виглядати як рівноцінна пара великих полів, тому компактні й
   притиснуті праворуч, а не на всю ширину рядка. */
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[type="date"][data-rooming-tourist-checkin],
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[type="date"][data-rooming-tourist-checkout] {
  flex-shrink: 0;
  margin-left: auto;
  width: auto;
  max-width: 130px;
  padding: 3px 4px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
  font-size: 10.5px;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] .booking-extra-hotels {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--border-thin);
}

.booking-page .form-step[data-step="2"] .booking-extra-hotels-head {
  margin-bottom: 14px;
}

.booking-page .form-step[data-step="2"] .booking-extra-hotel-row {
  margin-top: 12px;
  padding: 20px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
}

.booking-page .form-step[data-step="2"] .booking-extra-hotel-row > .grid {
  margin-top: 0;
}

.booking-page .form-step[data-step="2"] .booking-extra-hotel-row .booking-rooming-builder {
  margin-top: 16px;
  padding: 16px;
}

.booking-page .form-step[data-step="2"] .booking-extra-hotel-row > .btn[data-remove-extra-hotel] {
  margin-top: 12px;
  color: var(--danger);
}

.booking-page .form-step[data-step="2"] .booking-extra-hotels > [data-add-extra-hotel] {
  margin-top: 12px;
}

.booking-page .form-step[data-step="2"] .booking-service-card > label:last-child {
  margin-top: 18px;
}

.booking-page .form-step[data-step="2"] .booking-service-card .field-note {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] .booking-service-card .booking-field-pair {
  margin-top: 16px;
}

.booking-page .form-step[data-step="2"] .booking-service-card + .booking-service-card {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .booking-page .form-step[data-step="2"] .booking-service-card,
  .booking-page .form-step[data-step="2"] .booking-rooming-builder,
  .booking-page .form-step[data-step="2"] .booking-extra-hotel-row {
    padding: 16px;
  }

  .booking-page .form-step[data-step="2"] .booking-inline-select-row {
    grid-template-columns: 1fr;
  }

  .booking-page .form-step[data-step="2"] .booking-inline-select-row .btn {
    margin-bottom: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   Booking wizard — Stage A: repeatable service instances
   ───────────────────────────────────────────────────────────── */
.booking-page .booking-repeatable-services,
.booking-page .booking-repeatable-service-group {
  width: 100%;
}

.booking-page .booking-repeatable-service-group {
  border: 1px solid var(--border, #ddd7cd);
  background: #fff;
  padding: 18px 20px 20px;
  margin-top: 14px;
}

.booking-page .booking-repeatable-service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft, #ebe6de);
}

.booking-page .booking-repeatable-service-head > div {
  display: grid;
  gap: 4px;
}

.booking-page .booking-repeatable-service-head strong {
  color: var(--ink, #302c29);
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  font-weight: 500;
}

.booking-page .booking-repeatable-service-list {
  display: grid;
  gap: 12px;
}

.booking-page .booking-repeatable-service-card {
  position: relative;
  border: 1px solid #d9d1c6;
  background: #fff;
  padding: 16px 17px 17px;
}

.booking-page .booking-repeatable-service-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee9e2;
}

.booking-page .booking-repeatable-service-card-head > div {
  display: grid;
  gap: 3px;
}

.booking-page .booking-repeatable-service-index {
  color: var(--burgundy, #5b1723);
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px;
  font-weight: 600;
}

.booking-page .booking-repeatable-service-fields {
  display: grid;
  gap: 12px;
}

.booking-page .booking-repeatable-service-fields .grid {
  gap: 14px;
}

.booking-page .booking-repeatable-service-card label {
  color: #6e6861;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.booking-page .booking-repeatable-service-card input,
.booking-page .booking-repeatable-service-card select,
.booking-page .booking-repeatable-service-card textarea {
  margin-top: 6px;
  width: 100%;
  min-height: 38px;
  border: 1px solid #d5cec4;
  background: #fff;
  color: #302c29;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}

.booking-page .booking-repeatable-service-card textarea {
  min-height: 76px;
  resize: vertical;
}

.booking-page .booking-repeatable-service-card input:focus,
.booking-page .booking-repeatable-service-card select:focus,
.booking-page .booking-repeatable-service-card textarea:focus {
  outline: none;
  border-color: var(--burgundy, #5b1723);
  box-shadow: 0 0 0 1px var(--burgundy, #5b1723);
}

.booking-page .booking-repeatable-service-card [data-repeatable-service-remove] {
  color: #756e67;
  white-space: nowrap;
}

.booking-page .booking-repeatable-service-card [data-repeatable-service-remove]:hover {
  color: var(--burgundy, #5b1723);
}

.booking-page .booking-repeatable-service-group > .booking-repeatable-service-head .btn,
.booking-page .booking-repeatable-service-card .btn {
  min-height: 34px;
}

@media (max-width: 760px) {
  .booking-page .booking-repeatable-service-head,
  .booking-page .booking-repeatable-service-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-page .booking-repeatable-service-head .btn,
  .booking-page .booking-repeatable-service-card-head .btn {
    align-self: flex-start;
  }
}

/* ============================================================
   BOOKING WIZARD — STAGE A UI REFINEMENT
   Єдина візуальна мова для одиночних і повторюваних послуг.
   Це лише UI-шар: DOM/JS-контракти service_row_* не змінюються.
   ============================================================ */

.booking-page .form-step[data-step="2"] .booking-service-specific-grid {
  gap: 0;
}

/* --- Усі service sections: спокійна біла картка з чіткою ієрархією --- */
.booking-page .form-step[data-step="2"] .booking-service-card,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-group {
  position: relative;
  margin-top: 20px;
  padding: 20px 22px 22px;
  border: 1px solid var(--border-thin);
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
  box-shadow: 0 2px 12px rgba(42,35,36,.025);
}

.booking-page .form-step[data-step="2"] .booking-service-card > strong,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-head strong {
  display: block;
  margin: 0;
  color: var(--color-wine);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
}

.booking-page .form-step[data-step="2"] .booking-service-card > strong::after,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-head strong::after {
  width: 24px;
  height: 1px;
  margin-top: 8px;
  background: var(--color-gold);
}

/* --- Заголовок repeatable section --- */
.booking-page .form-step[data-step="2"] .booking-repeatable-service-head {
  align-items: center;
  gap: 20px;
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border-thin);
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-head > div {
  gap: 5px;
  min-width: 0;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-head .field-note {
  max-width: 620px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
}

/* Кнопка додавання — помітна, але не конкурує з основним CTA. */
.booking-page .form-step[data-step="2"] .booking-repeatable-service-head > .btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 13px;
  border-color: var(--color-gold);
  color: var(--color-wine);
  background: var(--color-gold-light);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-head > .btn:hover {
  background: var(--color-gold);
  color: var(--color-wine-dark);
}

/* --- Список екземплярів --- */
.booking-page .form-step[data-step="2"] .booking-repeatable-service-list {
  gap: 10px;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card {
  padding: 16px 18px 18px;
  border: 1px solid var(--border-thin);
  background: #FCFAF6;
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card:hover {
  border-color: #CFC3B4;
  background: #FFFDF9;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card-head {
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #E7E0D6;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card-head > div {
  gap: 2px;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-index {
  color: var(--color-wine);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card-head .field-note {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.35;
}

/* Видалення — другорядна дія, не така ж візуально важка, як додавання. */
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card [data-repeatable-service-remove] {
  min-height: 28px;
  padding: 5px 9px;
  border-color: transparent;
  color: var(--text-muted);
  background: transparent;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card [data-repeatable-service-remove]::before {
  content: '×';
  margin-right: 5px;
  color: currentColor;
  font-size: 13px;
  line-height: 0;
  vertical-align: -1px;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card [data-repeatable-service-remove]:hover {
  border-color: var(--border-thin);
  color: var(--danger);
  background: var(--danger-soft);
}

/* --- Поля repeatable cards: не плоскі, але й не важкі --- */
.booking-page .form-step[data-step="2"] .booking-repeatable-service-fields {
  gap: 12px;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-fields .grid {
  gap: 12px 14px;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card label,
.booking-page .form-step[data-step="2"] .booking-service-card label {
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card input,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card select,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card textarea {
  min-height: 36px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid #D9D1C7;
  background: #FFFFFF;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
  border-radius: 0;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card input:hover,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card select:hover,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card textarea:hover {
  border-color: #C9BBAA;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card input:focus,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card select:focus,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card textarea:focus {
  border-color: var(--color-wine);
  box-shadow: 0 0 0 1px var(--color-wine);
  background: #FFFFFF;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card input::placeholder,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card textarea::placeholder {
  color: #AAA19A;
}

.booking-page .form-step[data-step="2"] .booking-repeatable-service-card textarea {
  min-height: 72px;
  line-height: 1.45;
}

/* select — однакова стрілка з рештою майстра */
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23581825' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  cursor: pointer;
}

/* --- Одиночні service cards (віза / страхування) в тому ж ритмі --- */
.booking-page .form-step[data-step="2"] .booking-service-card > .grid,
.booking-page .form-step[data-step="2"] .booking-service-card > label {
  margin-top: 14px;
}

.booking-page .form-step[data-step="2"] .booking-service-card > label + label {
  margin-top: 12px;
}

.booking-page .form-step[data-step="2"] .booking-service-card label > input,
.booking-page .form-step[data-step="2"] .booking-service-card label > select,
.booking-page .form-step[data-step="2"] .booking-service-card label > textarea {
  min-height: 36px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid #D9D1C7;
  background: #FFFFFF;
  font-size: 12px;
  border-radius: 0;
}

.booking-page .form-step[data-step="2"] .booking-service-card label > input:focus,
.booking-page .form-step[data-step="2"] .booking-service-card label > select:focus,
.booking-page .form-step[data-step="2"] .booking-service-card label > textarea:focus {
  border-color: var(--color-wine);
  box-shadow: 0 0 0 1px var(--color-wine);
}

/* --- Порожні секції не повинні створювати зайву «білу стіну». --- */
.booking-page .form-step[data-step="2"] .booking-repeatable-service-list:empty {
  display: none;
}

/* --- Нижня щільність форми: менше вертикального шуму на довгих заявках --- */
@media (min-width: 761px) {
  .booking-page .form-step[data-step="2"] .booking-repeatable-service-card .grid.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .booking-page .form-step[data-step="2"] .booking-repeatable-service-group,
  .booking-page .form-step[data-step="2"] .booking-service-card {
    padding: 17px;
  }

  .booking-page .form-step[data-step="2"] .booking-repeatable-service-head,
  .booking-page .form-step[data-step="2"] .booking-repeatable-service-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-page .form-step[data-step="2"] .booking-repeatable-service-head > .btn,
  .booking-page .form-step[data-step="2"] .booking-repeatable-service-card-head [data-repeatable-service-remove] {
    align-self: flex-start;
  }
}

/* ============================================================
   BOOKING WIZARD — UI POLISH V2
   Placeholder typography + primary hotel block.
   Базується на stageA.ui-refined; функціональні/JS-хуки не змінюємо.
   ============================================================ */

/* --- Placeholder: спокійніший, тонший текст без browser-bold --- */
.booking-page .form-step[data-step="2"] input::placeholder,
.booking-page .form-step[data-step="2"] textarea::placeholder,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card input::placeholder,
.booking-page .form-step[data-step="2"] .booking-repeatable-service-card textarea::placeholder,
.booking-page .form-step[data-step="2"] .booking-service-card input::placeholder,
.booking-page .form-step[data-step="2"] .booking-service-card textarea::placeholder,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row input::placeholder,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row textarea::placeholder,
.booking-page .form-step[data-step="2"] .booking-rooming-room input::placeholder,
.booking-page .form-step[data-step="2"] .booking-rooming-room textarea::placeholder {
  color: #AAA19A !important;
  font-family: var(--font-sans) !important;
  font-size: .96em !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  opacity: 1;
}

/* На полях, які не входять у repeatable cards, не залишаємо випадкову жирність. */
.booking-page .form-step[data-step="2"] .booking-field-pair input,
.booking-page .form-step[data-step="2"] .booking-field-pair textarea,
.booking-page .form-step[data-step="2"] .booking-date-range input,
.booking-page .form-step[data-step="2"] [data-service-field="hotel"] input,
.booking-page .form-step[data-step="2"] [data-service-field="hotel"] select,
.booking-page .form-step[data-step="2"] [data-service-field="hotel"] textarea {
  font-weight: 400 !important;
}

/* --- Основний готель: той самий quiet-luxury патерн, що й repeatable services --- */
.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] {
  position: relative;
  margin-top: 20px;
  padding: 18px 20px 20px;
  border: 1px solid var(--border-thin);
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
  box-shadow: 0 2px 12px rgba(42,35,36,.025);
  /* font-size:0 ховає справжній текстовий вузол "Готель" (лишений у
     розмітці навмисно — label потребує реального тексту для
     accessibility), бо заголовок тепер малює ::before нижче. */
  font-size: 0;
  line-height: 1.35;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"]::before {
  content: 'ГОТЕЛЬ';
  display: block;
  margin-bottom: 5px;
  color: var(--color-wine);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"]::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin: 8px 0 14px;
  background: var(--color-gold);
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 0;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row select {
  min-height: 38px;
  margin-top: 0;
  padding: 8px 30px 8px 10px;
  border: 1px solid #D9D1C7;
  border-radius: 0;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23581825' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400 !important;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row select:hover {
  border-color: #C9BBAA;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row select:focus {
  border-color: var(--color-wine);
  box-shadow: 0 0 0 1px var(--color-wine);
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row .btn {
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #D9D1C7;
  color: var(--color-wine);
  background: #FFFDF9;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row .btn:hover {
  border-color: var(--color-gold);
  background: var(--color-gold-light);
}

.booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .field-note {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
}

/* Основні дати готелю — не legacy-рядок, а продовження hotel card. */
.booking-page .form-step[data-step="2"] .booking-date-range[data-stay-date-fields] {
  margin-top: 12px;
  padding: 16px 20px 0;
  border: 1px solid var(--border-thin);
  border-top: 0;
  background: var(--bg-card);
}

.booking-page .form-step[data-step="2"] .booking-date-range[data-stay-date-fields] label,
.booking-page .form-step[data-step="2"] .booking-field-pair[data-service-field="stay-details"] label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
}

.booking-page .form-step[data-step="2"] .booking-date-range[data-stay-date-fields] input,
.booking-page .form-step[data-step="2"] .booking-field-pair[data-service-field="stay-details"] input {
  min-height: 36px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid #D9D1C7;
  border-radius: 0;
  background: #FFFFFF;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400 !important;
  outline: none;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.booking-page .form-step[data-step="2"] .booking-date-range[data-stay-date-fields] input:focus,
.booking-page .form-step[data-step="2"] .booking-field-pair[data-service-field="stay-details"] input:focus {
  border-color: var(--color-wine);
}

/* Харчування + тип номера — компактна пара, а не два сирих поля. */
.booking-page .form-step[data-step="2"] .booking-field-pair[data-service-field="stay-details"] {
  margin-top: 0;
  padding: 14px 20px 18px;
  border: 1px solid var(--border-thin);
  border-top: 0;
  background: var(--bg-card);
}

/* Rooming теж має належати до візуальної системи готелю. */
.booking-page .form-step[data-step="2"] .booking-rooming-builder[data-rooming-parent-key="primary"] {
  margin-top: 12px;
  padding: 18px 20px 20px;
  border: 1px solid var(--border-thin);
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
  box-shadow: 0 2px 12px rgba(42,35,36,.02);
}

.booking-page .form-step[data-step="2"] .booking-rooming-builder[data-rooming-parent-key="primary"] .booking-rooming-head strong {
  font-size: 15px;
}

/* На вузькому екрані кнопка нового готелю переходить під select. */
@media (max-width: 760px) {
  .booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row {
    grid-template-columns: 1fr;
  }

  .booking-page .form-step[data-step="2"] .booking-route-main > label[data-service-field="hotel"] .booking-inline-select-row .btn {
    width: fit-content;
  }

  .booking-page .form-step[data-step="2"] .booking-date-range[data-stay-date-fields],
  .booking-page .form-step[data-step="2"] .booking-field-pair[data-service-field="stay-details"],
  .booking-page .form-step[data-step="2"] .booking-rooming-builder[data-rooming-parent-key="primary"] {
    padding-left: 17px;
    padding-right: 17px;
  }
}

/* ============================================================
   BOOKING WIZARD — DATE RANGE PICKER V3
   Діапазон для туру та готелю: старт → завершення → суцільний період.
   ============================================================ */
.tcrm-datepicker--range {
  /* Override the 304px single-month base width for the two-month range UI. */
  width: min(660px, calc(100vw - 20px));
  padding: 16px;
}
.tcrm-datepicker--range .tcrm-dp-head {
  margin-bottom: 12px;
}
.tcrm-dp-range-status {
  margin-left: auto;
  margin-right: 6px;
  color: var(--color-wine);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tcrm-dp-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.tcrm-dp-month {
  min-width: 0;
}
.tcrm-dp-month-label {
  margin: 0 0 8px;
  color: var(--color-wine);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
}
.tcrm-datepicker--range .tcrm-dp-grid {
  gap: 0;
  overflow: hidden;
}
.tcrm-datepicker--range .tcrm-dp-grid span {
  height: 24px;
  background: transparent;
}
.tcrm-datepicker--range .tcrm-dp-grid button {
  min-height: 34px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 0;
  z-index: 0;
}
.tcrm-datepicker--range .tcrm-dp-grid button:hover {
  border-color: var(--color-gold);
  z-index: 2;
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-in-range {
  background: var(--color-gold-light);
  color: var(--text-dark);
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-range-start,
.tcrm-datepicker--range .tcrm-dp-grid button.is-range-end {
  background: var(--color-wine);
  color: #fff;
  font-weight: 650;
  z-index: 3;
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-range-start {
  border-radius: 6px 0 0 6px;
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-range-end {
  border-radius: 0 6px 6px 0;
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-range-start.is-range-end {
  border-radius: 6px;
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-today:not(.is-range-start):not(.is-range-end) {
  color: var(--color-wine);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(88,24,37,.28);
}

/* Preview state while the user is choosing the second date. */
.tcrm-datepicker--range .tcrm-dp-grid button.is-preview-start {
  background: var(--color-wine);
  color: #fff;
  font-weight: 650;
  border-radius: 6px 0 0 6px;
  z-index: 3;
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-preview-range {
  background: var(--color-gold-light);
  color: var(--text-dark);
}
.tcrm-datepicker--range .tcrm-dp-grid button.is-preview-end {
  background: var(--color-wine);
  color: #fff;
  font-weight: 650;
  border-radius: 0 6px 6px 0;
  z-index: 3;
}
.tcrm-datepicker--range .tcrm-dp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-thin);
}
.tcrm-datepicker--range .tcrm-dp-footer > span {
  color: var(--text-muted);
  font-size: 10px;
}
.tcrm-datepicker--range .tcrm-dp-today {
  width: auto;
  min-width: 92px;
  height: 30px;
  margin-top: 0;
  padding: 0 12px;
}
/* Календарі для готелю/туру повинні візуально читатися як один компонент. */
.booking-page .form-step[data-step="2"] [data-date-range-picker] input[data-tcrm-date] {
  cursor: pointer;
}
.booking-page .form-step[data-step="2"] [data-date-range-picker] input[data-tcrm-date]:focus {
  border-color: var(--color-wine);
}
@media (max-width: 760px) {
  .tcrm-datepicker--range {
    width: min(420px, calc(100vw - 16px));
  }
  .tcrm-dp-months {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tcrm-dp-month:nth-child(2) {
    display: none;
  }
  .tcrm-dp-range-status {
    font-size: 9px;
  }
}

/* ============================================================
   BOOKING WIZARD — UI POLISH V4
   1) Рік у datepicker: жодної рамки/нативного box навколо select.
   2) operation-custom-label: окремий, спокійний блок після матриці послуг.
   3) field-note: тонкий службовий текст і чітке відділення від контенту picker.
   ============================================================ */

/* Заголовок матриці послуг: менше "жирного шуму", більше повітря. */
.booking-page .form-step[data-step="2"] .booking-service-picker .service-picker-head span,
.booking-page .form-step[data-step="2"] .booking-service-picker .booking-service-smart-note {
  font-size: 10.5px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--text-muted);
}

/* operation-custom-label — окрема службова секція, а не продовження picker. */
.booking-page .form-step[data-step="2"] .booking-service-picker .operation-custom-label {
  display: block;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-thin);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="2"] .booking-service-picker .operation-custom-label input {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 9px 10px;
  border: 1px solid var(--border-thin);
  border-radius: 0;
  background: #fffdf9;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.booking-page .form-step[data-step="2"] .booking-service-picker .operation-custom-label input::placeholder {
  color: #aaa19a;
  font-weight: 400;
  opacity: 1;
}
.booking-page .form-step[data-step="2"] .booking-service-picker .operation-custom-label input:focus {
  border-color: var(--color-wine);
  box-shadow: 0 0 0 1px var(--color-wine);
  background: #fff;
}

/* field-note: службовий текст не повинен виглядати як ще один label. */
.booking-page .form-step[data-step="2"] .field-note,
.booking-page .form-step[data-step="2"] .booking-service-picker .booking-service-smart-note {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* Smart-note виносимо в окремий нижній рівень picker, щоб він не зливався
   з operation-custom-label та карткою вибору послуг. */
.booking-page .form-step[data-step="2"] .booking-service-picker .booking-service-smart-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 191, 180, .65);
}

@media (max-width: 700px) {
  .booking-page .form-step[data-step="2"] .booking-service-picker .operation-custom-label {
    margin-top: 14px;
    padding-top: 12px;
  }
}

/* ============================================================
   BOOKING WIZARD — DATE RANGE PICKER — CANONICAL HEADER
   Єдиний блок стилів для року в шапці календаря.
   Native select залишається лише прозорою click/keyboard-зоною.
   ============================================================ */
.tcrm-datepicker .tcrm-dp-head-title,
.tcrm-datepicker--range .tcrm-dp-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
}

.tcrm-datepicker .tcrm-dp-head-title > strong,
.tcrm-datepicker--range .tcrm-dp-head-title > strong {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  line-height: 1.15;
}

.tcrm-datepicker .tcrm-dp-year-control,
.tcrm-datepicker--range .tcrm-dp-year-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 72px;
  min-width: 72px;
  height: 28px;
  margin: 0;
  padding: 0 18px 0 4px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--color-wine);
  cursor: pointer;
}

.tcrm-datepicker .tcrm-dp-year-label,
.tcrm-datepicker--range .tcrm-dp-year-label {
  display: block;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
  color: inherit;
  pointer-events: none;
}

.tcrm-datepicker .tcrm-dp-year-control::after,
.tcrm-datepicker--range .tcrm-dp-year-control::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23581825' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  opacity: .78;
}

.tcrm-datepicker .tcrm-dp-year-control:hover,
.tcrm-datepicker .tcrm-dp-year-control:focus-within,
.tcrm-datepicker--range .tcrm-dp-year-control:hover,
.tcrm-datepicker--range .tcrm-dp-year-control:focus-within {
  color: var(--color-gold);
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.tcrm-datepicker .tcrm-dp-year-control .tcrm-dp-year,
.tcrm-datepicker--range .tcrm-dp-year-control .tcrm-dp-year {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
}

.booking-page .form-step[data-step="2"] .booking-date-range input[data-tcrm-date],
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row input[data-tcrm-date] {
  cursor: pointer;
}

@media (max-width: 760px) {
  .tcrm-datepicker--range .tcrm-dp-head-title {
    gap: 6px;
  }

  .tcrm-datepicker--range .tcrm-dp-head-title > strong {
    font-size: 12px;
  }
}


/*
 * Новий .booking-hotel-stay-block об'єднує primary та extra hotel UI в один
 * візуальний патерн. Він потрібен саме для цієї уніфікації: backend уже має
 * одну модель hotel service period, тому окремі композиції для "основного"
 * та "чергового" готелю лише дублювали UX і створювали різні стани.
 */
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block {
  margin-top: 14px;
  padding: 18px 20px 20px;
  border: 1px solid var(--border-thin);
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
}

.booking-page .form-step[data-step="2"] .booking-hotel-stay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-thin);
}

.booking-page .form-step[data-step="2"] .booking-hotel-stay-head strong {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine);
}

.booking-page .form-step[data-step="2"] .booking-hotel-stay-head span {
  font-size: 10.5px;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] .booking-hotel-stay-block > .booking-date-range,
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block > .booking-field-pair[data-service-field="stay-details"] {
  background: var(--bg-card);
}

.booking-page .form-step[data-step="2"] .booking-hotel-stay-fields {
  margin-top: 0;
  padding-top: 16px;
}

.booking-page .form-step[data-step="2"] .booking-hotel-stay-block .booking-rooming-builder {
  margin-top: 14px;
  background: var(--bg-card);
}

/* Room card intentionally uses the light card surface: the hotel block's
   structure should come from borders and spacing, not a second cream panel. */
.booking-page .form-step[data-step="2"] .booking-rooming-room {
  background: var(--bg-card);
  padding: 16px 18px 18px;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-thin);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head strong {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head strong::after {
  display: none;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head span {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head .btn {
  margin: 0;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room::before {
  display: none;
}

/* Keep the previously corrected checkbox alignment, but give the control
   enough optical breathing room before the tourist name. */
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row {
  gap: 15px;
}

/* Примітка номера — службове поле під типом/місткістю, не конкурує з ПІБ. */
.booking-page .form-step[data-step="2"] .booking-rooming-note-field {
  display: block;
  margin: 12px 0 14px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="2"] .booking-rooming-note-field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #D9D1C7;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dark);
  outline: none;
}
.booking-page .form-step[data-step="2"] .booking-rooming-note-field input:focus {
  border-color: var(--color-wine);
}
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-name {
  flex: 1;
  min-width: 0;
}
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-conflict-note {
  flex: 0 1 auto;
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}


/* Personal tourist dates use the existing tcrm date input instead of the
   browser-native date control, so they do not reintroduce the blue calendar. */
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[data-rooming-tourist-checkin],
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[data-rooming-tourist-checkout] {
  flex-shrink: 0;
  margin-left: auto;
  width: auto;
  max-width: 130px;
  min-width: 110px;
  padding: 3px 4px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[data-rooming-tourist-checkout] {
  margin-left: 0;
}

/* Персональні дати туриста: показуємо лише після вибору в номері (JS ставить hidden). */
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[data-rooming-tourist-checkin][hidden],
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[data-rooming-tourist-checkout][hidden] {
  display: none !important;
}

.booking-page .form-step[data-step="2"] .booking-extra-hotels {
  margin-top: 24px;
}

.booking-page .form-step[data-step="2"] .booking-extra-hotels > [data-extra-hotel-rows] {
  display: grid;
  gap: 14px;
}

.booking-page .form-step[data-step="2"] .booking-extra-hotels > [data-extra-hotel-rows] .booking-hotel-stay-block {
  margin-top: 0;
}

.booking-page .form-step[data-step="2"] [data-rooming-empty-state] {
  margin: 14px 0 0;
  padding: 13px 15px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] [data-rooming-empty-state][hidden] {
  display: none !important;
}

.booking-page .form-step[data-step="2"] [data-rooming-rooms][hidden],
.booking-page .form-step[data-step="2"] [data-rooming-add-room][hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .booking-page .form-step[data-step="2"] .booking-hotel-stay-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head {
    grid-template-columns: 1fr auto;
  }

  .booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head span {
    grid-column: 1;
    grid-row: 2;
  }

  .booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[data-rooming-tourist-checkin],
  .booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row input[data-rooming-tourist-checkout] {
    max-width: 105px;
    min-width: 0;
  }
}

/* Preserve the earlier nights-status refinement: the status message needs
   internal breathing room so its text never touches the colored surface. */
.booking-page .form-step[data-step="2"] .booking-nights-panel {
  padding: 12px 14px;
  border: 1px solid var(--border-thin);
  gap: 7px 12px;
}

.booking-page .form-step[data-step="2"] .booking-nights-panel span {
  line-height: 1.5;
}


/* ============================================================
   BOOKING WIZARD — STEP 2 VISUAL HIERARCHY (org / hotels / services)
   Єдиний ритм карток, повітря між семантичними блоками, м’якші labels.
   ============================================================ */

/* Організація заявки (філія / менеджер) — окремий тихий блок перед послугами */
.booking-page .form-step[data-step="2"] .booking-org-block {
  margin: 8px 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--border-thin);
}
.booking-page .form-step[data-step="2"] .booking-org-fields {
  margin: 0;
  gap: 18px 28px;
}
.booking-page .form-step[data-step="2"] .booking-org-fields .field-note {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* Smart-note після матриці послуг — максимально тихий */
.booking-page .form-step[data-step="2"] .booking-service-smart-note,
.booking-page .form-step[data-step="2"] [data-service-smart-note] {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 191, 180, .55);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-muted);
}

/* Заголовки секцій послуг (Готелі тощо) */
.booking-page .form-step[data-step="2"] .booking-section-head,
.booking-page .form-step[data-step="2"] .booking-extra-hotels-head {
  display: block;
  margin: 6px 0 16px;
  padding: 0;
  border: 0;
}
.booking-page .form-step[data-step="2"] .booking-extra-hotels-head > strong,
.booking-page .form-step[data-step="2"] .booking-section-head > strong {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="2"] .booking-extra-hotels-head > strong::after,
.booking-page .form-step[data-step="2"] .booking-section-head > strong::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 10px;
  background: var(--color-gold);
}
.booking-page .form-step[data-step="2"] .booking-extra-hotels-head > .field-note,
.booking-page .form-step[data-step="2"] .booking-section-head > .field-note {
  display: block;
  max-width: 640px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* Готельні картки — більше повітря між блоками */
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block {
  margin-top: 16px;
  padding: 20px 22px 22px;
}
.booking-page .form-step[data-step="2"] .booking-hotel-stay-head {
  margin-bottom: 4px;
  padding-bottom: 14px;
}
.booking-page .form-step[data-step="2"] .booking-hotel-stay-head strong {
  font-size: 16px;
}
.booking-page .form-step[data-step="2"] .booking-hotel-stay-head span {
  font-size: 11px;
  letter-spacing: .02em;
}

/* Кнопка «у довідник» біля select — другорядна, не конкурує з CTA секції */
.booking-page .form-step[data-step="2"] .booking-inline-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.booking-page .form-step[data-step="2"] .booking-inline-select-row #btn-new-hotel {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 9.5px;
  letter-spacing: .08em;
  border-color: transparent;
  color: var(--text-muted);
  background: transparent;
}
.booking-page .form-step[data-step="2"] .booking-inline-select-row #btn-new-hotel:hover {
  border-color: var(--border-thin);
  color: var(--color-wine);
  background: var(--color-gold-light);
}

/* «+ Додати готель» — в кінці секції, як явний secondary CTA */
.booking-page .form-step[data-step="2"] .booking-add-hotel-row {
  margin-top: 16px;
  padding-top: 4px;
}
.booking-page .form-step[data-step="2"] .booking-add-hotel-row .btn {
  min-height: 36px;
  padding: 8px 16px;
}

/* Розселення всередині hotel card — чіткіше відділення */
.booking-page .form-step[data-step="2"] .booking-rooming-builder {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-thin);
}
.booking-page .form-step[data-step="2"] .booking-rooming-head {
  margin-bottom: 12px;
}
.booking-page .form-step[data-step="2"] .booking-rooming-head > strong {
  font-size: 15px;
}
.booking-page .form-step[data-step="2"] .booking-rooming-head > .field-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Картка номера: більше повітря між параметрами і гостями */
.booking-page .form-step[data-step="2"] .booking-rooming-room .booking-rooming-tourists {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #EBE4DA;
}
.booking-page .form-step[data-step="2"] .booking-rooming-note-field {
  margin-top: 14px;
  margin-bottom: 4px;
}

/* Інші послуги (віза, трансфер, авіа…) — той самий ритм полів */
.booking-page .form-step[data-step="2"] .booking-service-specific-grid {
  display: grid;
  gap: 0;
  margin-top: 8px;
}
.booking-page .form-step[data-step="2"] .booking-service-card > strong {
  margin-bottom: 4px;
  font-size: 16px;
}
.booking-page .form-step[data-step="2"] .booking-service-card > .grid {
  margin-top: 18px;
  gap: 22px 22px;
}
.booking-page .form-step[data-step="2"] .booking-service-card > label {
  margin-top: 20px;
}
/* Label має «дихати» над своїм полем і не прилипати до лінії попереднього */
.booking-page .form-step[data-step="2"] .booking-service-card label,
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label,
.booking-page .form-step[data-step="2"] .booking-date-range label,
.booking-page .form-step[data-step="2"] .booking-field-pair label {
  padding-top: 2px;
}
.booking-page .form-step[data-step="2"] .booking-service-card label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-service-card label > select,
.booking-page .form-step[data-step="2"] .booking-service-card label > textarea,
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block label > select,
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row label > select,
.booking-page .form-step[data-step="2"] .booking-date-range label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-field-pair label > input:not([type="checkbox"]):not([type="radio"]),
.booking-page .form-step[data-step="2"] .booking-field-pair label > select {
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 9px;
}
.booking-page .form-step[data-step="2"] .booking-service-card .grid.two,
.booking-page .form-step[data-step="2"] .booking-service-card > .grid {
  row-gap: 22px;
}
.booking-page .form-step[data-step="2"] .booking-service-card label > input,
.booking-page .form-step[data-step="2"] .booking-service-card label > select,
.booking-page .form-step[data-step="2"] .booking-service-card label > textarea {
  font-weight: 400;
}

/* Тур (select) — як звичайне поле секції, не «приклеєне» до Готелів */
.booking-page .form-step[data-step="2"] > label[data-service-field="tour"],
.booking-page .form-step[data-step="2"] label[data-service-field="tour"] {
  margin: 4px 0 22px;
  padding-bottom: 4px;
}

/* Ночі — спокійніша плашка */
.booking-page .form-step[data-step="2"] .booking-nights-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-thin);
  background: #F7F4EE;
  gap: 4px 12px;
}
.booking-page .form-step[data-step="2"] .booking-nights-panel strong {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="2"] .booking-nights-panel span {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text-muted);
}

/* Значення полів не bold */
.booking-page .form-step[data-step="2"] input,
.booking-page .form-step[data-step="2"] select,
.booking-page .form-step[data-step="2"] textarea,
.booking-page .form-step[data-step="2"] .tcrm-select-value {
  font-weight: 400;
}

@media (max-width: 700px) {
  .booking-page .form-step[data-step="2"] .booking-org-block {
    margin-bottom: 22px;
    padding-bottom: 18px;
  }
  .booking-page .form-step[data-step="2"] .booking-inline-select-row {
    grid-template-columns: 1fr;
  }
  .booking-page .form-step[data-step="2"] .booking-inline-select-row #btn-new-hotel {
    width: fit-content;
  }
}


/* ============================================================
   BOOKING WIZARD — ROOMING CARDS (less table, more distinct rooms)
   Менше горизонтальних ліній; кожен номер — окрема «картка» з фоном
   і повітрям, а не рядок таблиці.
   ============================================================ */
.booking-page .form-step[data-step="2"] .booking-rooming-rooms {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room {
  position: relative;
  padding: 18px 20px 16px;
  border: 1px solid #E5DDD2;
  background: #FCFAF6;
  box-shadow: none;
}

/* Ліва акцентна риска — одразу видно «окремий номер», без зайвих ліній всередині */
.booking-page .form-step[data-step="2"] .booking-rooming-room::before {
  content: '';
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-gold);
  opacity: .85;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 14px;
  padding: 0;
  border-bottom: none;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head strong {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head strong::after {
  display: none !important;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head span[data-rooming-room-count] {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid #E5DDD2;
  background: #fff;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head .btn {
  margin: 0;
  border-color: transparent;
  color: var(--text-muted);
  background: transparent;
  font-size: 9.5px;
}
.booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head .btn:hover {
  border-color: var(--border-thin);
  color: var(--danger);
  background: var(--danger-soft);
}

/* Параметри номера — без «табличних» роздільників між label-рядами */
.booking-page .form-step[data-step="2"] .booking-rooming-room > .grid {
  margin-top: 0;
  margin-bottom: 0;
  gap: 12px 18px;
  padding: 0;
  border: 0;
}

.booking-page .form-step[data-step="2"] .booking-rooming-note-field {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="2"] .booking-rooming-note-field input {
  margin-top: 5px;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid #E5DDD2;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
}
.booking-page .form-step[data-step="2"] .booking-rooming-note-field input:focus {
  border-bottom-color: var(--color-wine);
  box-shadow: none;
  outline: none;
}

/* Гості — окрема зона через повітря, не через ще одну лінію на всю ширину */
.booking-page .form-step[data-step="2"] .booking-rooming-room .booking-rooming-tourists {
  display: grid;
  gap: 2px;
  margin-top: 16px;
  padding: 12px 12px 8px;
  border: 0;
  border-top: none;
  background: rgba(255, 255, 255, .72);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dark);
  cursor: pointer;
}
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row:hover {
  background: var(--color-gold-light);
}
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-row:has(input:checked) {
  background: rgba(244, 239, 230, .9);
}
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-tourist-name {
  flex: 1;
  min-width: 0;
  font-weight: 400;
}
.booking-page .form-step[data-step="2"] .booking-rooming-room .rooming-conflict-note {
  font-size: 10px;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="2"] .booking-rooming-room [data-rooming-no-tourists-hint] {
  margin: 10px 0 0;
  padding: 0 8px;
  border: 0;
  font-size: 11px;
  color: var(--text-muted);
}

/* Кнопка + Номер — легший акцент під списком карток */
.booking-page .form-step[data-step="2"] [data-rooming-add-room] {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .booking-page .form-step[data-step="2"] .booking-rooming-room {
    padding: 16px 16px 14px;
  }
  .booking-page .form-step[data-step="2"] .booking-rooming-room > .booking-rooming-head span[data-rooming-room-count] {
    margin-left: 0;
  }
}


/* ============================================================
   Past-date confirm, focus rings, service/hotel collapse
   ============================================================ */

/* Чекбокс підтвердження минулої дати — у стилі rooming, без синього OS */
.booking-page .form-step[data-step="2"] .booking-past-confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--text-dark);
}
.booking-page .form-step[data-step="2"] .booking-past-confirm input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.booking-page .form-step[data-step="2"] .booking-past-confirm-box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid #C9BFB4;
  background: #fff;
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color .15s ease, background .15s ease;
}
.booking-page .form-step[data-step="2"] .booking-past-confirm input[type="checkbox"]:checked + .booking-past-confirm-box {
  border-color: var(--color-wine);
  background: var(--color-wine);
  box-shadow: inset 0 0 0 2px #fff;
}
.booking-page .form-step[data-step="2"] .booking-past-confirm input[type="checkbox"]:focus-visible + .booking-past-confirm-box {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.booking-page .form-step[data-step="2"] .booking-past-confirm-text {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--text-dark);
}

/* Focus/автокомпліт: тонка wine-лінія, без товстої «рамки-коробки» */
.booking-page .form-step[data-step="2"] input:not([type="checkbox"]):not([type="radio"]):focus,
.booking-page .form-step[data-step="2"] select:focus,
.booking-page .form-step[data-step="2"] textarea:focus {
  border-color: var(--color-wine) !important;
  border-width: 1px !important;
  box-shadow: none !important;
  outline: none !important;
}
.booking-page .form-step[data-step="2"] input:-webkit-autofill,
.booking-page .form-step[data-step="2"] input:-webkit-autofill:hover,
.booking-page .form-step[data-step="2"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-dark);
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  border-color: var(--border-thin) !important;
  transition: background-color 99999s ease-out;
}

/* Згортання карток готелю / послуг */
.booking-page .form-step[data-step="2"] .booking-hotel-stay-head[data-collapse-toggle],
.booking-page .form-step[data-step="2"] .booking-service-card-head[data-collapse-toggle] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.booking-page .form-step[data-step="2"] .booking-hotel-stay-head[data-collapse-toggle]:hover,
.booking-page .form-step[data-step="2"] .booking-service-card-head[data-collapse-toggle]:hover {
  opacity: .92;
}
.booking-page .form-step[data-step="2"] .booking-collapse-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.booking-page .form-step[data-step="2"] .booking-collapse-titles strong,
.booking-page .form-step[data-step="2"] .booking-service-card-head strong {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="2"] .booking-service-card-head strong::after {
  display: none;
}
.booking-page .form-step[data-step="2"] .booking-collapse-titles span,
.booking-page .form-step[data-step="2"] [data-collapse-summary] {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="2"] .booking-collapse-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--color-wine);
  border-bottom: 1.5px solid var(--color-wine);
  transform: rotate(45deg);
  opacity: .7;
  transition: transform .18s ease;
}
.booking-page .form-step[data-step="2"] [data-collapse-toggle][aria-expanded="false"] .booking-collapse-chevron {
  transform: rotate(-45deg);
  margin-top: 4px;
}
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block.is-collapsed,
.booking-page .form-step[data-step="2"] .booking-service-card.is-collapsed {
  padding-bottom: 14px;
}
.booking-page .form-step[data-step="2"] .booking-hotel-stay-block.is-collapsed .booking-hotel-stay-head,
.booking-page .form-step[data-step="2"] .booking-service-card.is-collapsed .booking-service-card-head {
  padding-bottom: 0;
  border-bottom: 0;
}
.booking-page .form-step[data-step="2"] [data-collapse-body][hidden] {
  display: none !important;
}

/* Кнопка «Прибрати готель» лишається видимою під згорнутим тілом */
.booking-page .form-step[data-step="2"] .booking-extra-hotel-row > [data-remove-extra-hotel] {
  margin-top: 10px;
}


/* ============================================================
   Multi-transfer + «хто їде» — в ритмі hotel stay / rooming
   ============================================================ */
.booking-page .form-step[data-step="2"] .booking-transfers-section {
  margin-top: 10px;
}
.booking-page .form-step[data-step="2"] .booking-transfers-section > .booking-section-head {
  margin-bottom: 14px;
}
.booking-page .form-step[data-step="2"] .booking-transfers-section > [data-transfer-rows] {
  display: grid;
  gap: 16px;
}
.booking-page .form-step[data-step="2"] .booking-transfer-row {
  margin-top: 0;
  padding: 18px 20px 16px;
  border: 1px solid #E5DDD2;
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
  box-shadow: 0 2px 12px rgba(42, 35, 36, .02);
}
.booking-page .form-step[data-step="2"] .booking-transfer-row .booking-service-card-head {
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.booking-page .form-step[data-step="2"] .booking-transfer-row.is-collapsed {
  padding-bottom: 14px;
}

/* Pax list = той самий ритм, що rooming tourists */
.booking-page .form-step[data-step="2"] .booking-service-pax {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EBE4DA;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-head strong {
  margin: 0;
  margin-right: auto;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine);
  text-transform: none;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-list {
  display: grid;
  gap: 0;
  padding: 6px 0 2px;
  background: rgba(252, 250, 246, .9);
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dark);
  cursor: pointer;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item:hover {
  background: var(--color-gold-light);
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item:has(input:checked) {
  background: rgba(244, 239, 230, .95);
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  flex: 0 0 15px;
  align-self: center;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  max-width: 15px;
  max-height: 15px;
  margin: 0;
  padding: 0;
  border: 1px solid #C9BFB4;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--color-wine);
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item input[type="checkbox"]:checked {
  border-color: var(--color-wine);
  accent-color: var(--color-wine);
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item span {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.booking-page .form-step[data-step="2"] .booking-transfer-row [data-remove-transfer] {
  margin-top: 14px;
}
.booking-page .form-step[data-step="2"] .booking-service-pax [data-transfer-pax-empty] {
  margin: 6px 0 0;
  font-size: 11px;
}


/* Pax-список трансферу = rooming-tourist-row (єдиний вигляд) */
.booking-page .form-step[data-step="2"] .booking-service-pax-list {
  display: grid;
  gap: 2px;
  margin-top: 0;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item.rooming-tourist-row,
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dark);
  cursor: pointer;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item.rooming-tourist-row:hover,
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-row:hover {
  background: transparent;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-item.rooming-tourist-row:has(input:checked),
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-row:has(input:checked) {
  background: transparent;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-row input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  flex: 0 0 15px;
  align-self: center;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  max-width: 15px;
  max-height: 15px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  accent-color: var(--color-wine);
}
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-name {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.booking-page .form-step[data-step="2"] .booking-service-pax {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
.booking-page .form-step[data-step="2"] .booking-service-pax-head {
  border-bottom: 1px solid var(--border-thin);
  padding-bottom: 10px;
  margin-bottom: 8px;
}


/* Повторювані послуги (віза/авіа/…) — той самий ритм, що трансфери */
.booking-page .form-step[data-step="2"] .booking-svc-section {
  margin-top: 10px;
}
.booking-page .form-step[data-step="2"] .booking-svc-section > [data-svc-rows] {
  display: grid;
  gap: 16px;
}
.booking-page .form-step[data-step="2"] .booking-svc-row {
  margin-top: 0;
  padding: 18px 20px 16px;
  border: 1px solid #E5DDD2;
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
}


/* ============================================================
   STEP 4 — Собівартість (ритм карток як на кроці 2)
   ============================================================ */
.booking-page .form-step[data-step="4"] .cost-quick-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.booking-page .form-step[data-step="4"] .booking-cost-rows {
  display: grid;
  gap: 14px;
}
.booking-page .form-step[data-step="4"] details.cost-row {
  margin: 0;
  padding: 0;
  border: 1px solid #E5DDD2;
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
  box-shadow: 0 2px 12px rgba(42, 35, 36, .02);
}
.booking-page .form-step[data-step="4"] details.cost-row > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="4"] details.cost-row > summary::-webkit-details-marker { display: none; }
.booking-page .form-step[data-step="4"] details.cost-row > summary .cost-row-title {
  flex: 1;
  min-width: 0;
}
.booking-page .form-step[data-step="4"] details.cost-row > summary .cost-row-amount {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="4"] .cost-row-lifecycle {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.booking-page .form-step[data-step="4"] .cost-row-lifecycle.is-requested,
.booking-page .form-step[data-step="4"] .cost-row-lifecycle.is-confirmed,
.booking-page .form-step[data-step="4"] .cost-row-lifecycle.is-documents_received {
  border-color: var(--color-gold);
  background: var(--color-gold-light);
  color: var(--color-wine);
}
.booking-page .form-step[data-step="4"] .cost-row-lifecycle.is-completed {
  border-color: rgba(63, 91, 69, .3);
  background: var(--success-soft);
  color: var(--success);
}
.booking-page .form-step[data-step="4"] .cost-row-lifecycle.is-cancelled {
  border-color: rgba(160, 58, 43, .3);
  background: var(--danger-soft);
  color: var(--danger);
}
.booking-page .form-step[data-step="4"] .cost-lifecycle-history {
  margin: 12px 18px 0;
  color: var(--text-muted);
  font-size: 11px;
}
.booking-page .form-step[data-step="4"] details.cost-row > summary .cost-row-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.booking-page .form-step[data-step="4"] details.cost-row > summary .cost-row-remove:hover {
  border-color: var(--border-thin);
  color: var(--danger);
}
.booking-page .form-step[data-step="4"] details.cost-row[open] > summary {
  border-bottom: 1px solid var(--border-thin);
}
.booking-page .form-step[data-step="4"] details.cost-row > :not(summary) {
  /* content padding via children */
}
.booking-page .form-step[data-step="4"] details.cost-row .grid,
.booking-page .form-step[data-step="4"] details.cost-row > label,
.booking-page .form-step[data-step="4"] details.cost-row > .grid,
.booking-page .form-step[data-step="4"] details.cost-row .supplier-payment-plan {
  margin-left: 18px;
  margin-right: 18px;
}
.booking-page .form-step[data-step="4"] details.cost-row > .grid:first-of-type {
  margin-top: 16px;
}
.booking-page .form-step[data-step="4"] details.cost-row > label:last-child,
.booking-page .form-step[data-step="4"] details.cost-row .supplier-payment-plan {
  margin-bottom: 16px;
}
.booking-page .form-step[data-step="4"] .cost-row-category-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border: 1px solid var(--color-gold);
  background: var(--color-gold-light);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="4"] details.cost-row label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="4"] details.cost-row label > input,
.booking-page .form-step[data-step="4"] details.cost-row label > select,
.booking-page .form-step[data-step="4"] details.cost-row label > textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--border-thin);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-dark);
  outline: none;
}
.booking-page .form-step[data-step="4"] details.cost-row label > input:focus,
.booking-page .form-step[data-step="4"] details.cost-row label > select:focus,
.booking-page .form-step[data-step="4"] details.cost-row label > textarea:focus {
  border-bottom-color: var(--color-wine);
}
.booking-page .form-step[data-step="4"] details.cost-row .field-note {
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="4"] .supplier-payment-plan {
  padding: 12px 14px;
  border: 1px solid #E5DDD2;
  background: #FCFAF6;
  border-radius: 0;
}


/* Cost card body — компактна ієрархія */
.booking-page .form-step[data-step="4"] details.cost-row > summary .cost-row-category-badge {
  flex: 0 0 auto;
  margin: 0;
}
.booking-page .form-step[data-step="4"] .cost-row-body {
  padding: 14px 18px 18px;
  display: grid;
  gap: 14px;
}
.booking-page .form-step[data-step="4"] .cost-row-body > .grid {
  margin: 0 !important;
}
.booking-page .form-step[data-step="4"] details.cost-row-sub {
  margin: 0;
  border: 1px solid #E5DDD2;
  background: #FCFAF6;
}
.booking-page .form-step[data-step="4"] details.cost-row-sub > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="4"] details.cost-row-sub > summary::-webkit-details-marker { display: none; }
.booking-page .form-step[data-step="4"] .cost-row-sub-meta {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="4"] details.cost-row-sub .supplier-payment-plan,
.booking-page .form-step[data-step="4"] details.cost-row-sub .grid {
  margin: 0 18px 18px !important;
  padding: 0;
  border: 0;
  background: transparent;
}
/* Вкладені блоки витрати не повинні прилипати до лівого краю картки.
   Це охоплює нотатки, вкладення інвойсу та textarea операційних деталей. */
.booking-page .form-step[data-step="4"] details.cost-row-sub > :not(summary) {
  margin-left: 18px !important;
  margin-right: 18px !important;
}
.booking-page .form-step[data-step="4"] details.cost-row-sub > :last-child {
  margin-bottom: 18px !important;
}
.booking-page .form-step[data-step="4"] .supplier-payment-plan-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.booking-page .form-step[data-step="4"] details.cost-row:not([open]) {
  /* згорнута картка — лише summary */
}
.booking-page .form-step[data-step="4"] .cost-quick-add .btn[disabled],
.booking-page .form-step[data-step="4"] .cost-quick-add .btn[hidden] {
  opacity: .35;
}


/* Крок 4: та сама анімація підкреслення */
.booking-page .form-step[data-step="4"] details.cost-row label {
  position: relative;
}
.booking-page .form-step[data-step="4"] details.cost-row label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-wine);
  transition: left .4s var(--cubic-luxury), width .4s var(--cubic-luxury);
  pointer-events: none;
}
.booking-page .form-step[data-step="4"] details.cost-row label:focus-within::after {
  left: 0;
  width: 100%;
}
.booking-page .form-step[data-step="4"] details.cost-row label > input:focus,
.booking-page .form-step[data-step="4"] details.cost-row label > select:focus,
.booking-page .form-step[data-step="4"] details.cost-row label > textarea:focus {
  border-bottom-color: var(--border-thin);
}


/* ============================================================
   STEP 5 — Розрахунок з клієнтом (quiet luxury cards)
   ============================================================ */
.booking-page .form-step[data-step="5"]:not([hidden]),
.booking-page .booking-finance-step:not([hidden]) {
  display: grid;
  gap: 18px;
}
/* display:grid вище перебивав нативний [hidden] — без цього крок 5
   світився всередині інших кроків майстра */
.booking-page .form-step[hidden],
.booking-page .booking-finance-step[hidden] {
  display: none !important;
}
.booking-page .form-step[data-step="5"] .form-section-head,
.booking-page .booking-finance-step .form-section-head {
  margin-bottom: 4px;
}
.booking-page .form-step[data-step="5"] > .grid,
.booking-page .booking-finance-step > .grid {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #E5DDD2;
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
}
.booking-page .form-step[data-step="5"] .booking-finance-card,
.booking-page .booking-finance-step .booking-finance-card,
.booking-page .form-step[data-step="5"] .booking-exchange-box,
.booking-page .form-step[data-step="5"] .booking-margin-box,
.booking-page .form-step[data-step="5"] .booking-pricing-panel,
.booking-page .form-step[data-step="5"] .booking-payment-plan {
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid #E5DDD2;
  border-top: 2px solid var(--color-gold);
  background: var(--bg-card);
  border-radius: 0;
  box-shadow: none;
}
.booking-page .form-step[data-step="5"] .booking-exchange-help {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.booking-page .form-step[data-step="5"] details.booking-finance-disclosure {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
}
.booking-page .form-step[data-step="5"] details.booking-finance-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--color-wine);
  font-weight: 700;
  list-style: none;
}
.booking-page .form-step[data-step="5"] details.booking-finance-disclosure > summary::-webkit-details-marker { display: none; }
.booking-page .form-step[data-step="5"] details.booking-finance-disclosure > summary span {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}
.booking-page .form-step[data-step="5"] details.booking-finance-disclosure[open] > summary {
  border-bottom: 1px solid var(--border-thin);
  background: var(--color-gold-light);
}
.booking-page .form-step[data-step="5"] details.booking-finance-disclosure > .grid,
.booking-page .form-step[data-step="5"] details.booking-finance-disclosure > .booking-margin-calculator {
  margin: 0;
  padding: 16px 18px;
}
.booking-page .form-step[data-step="5"] .booking-exchange-help span {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="5"] label {
  display: block;
  position: relative;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="5"] label > input,
.booking-page .form-step[data-step="5"] label > select,
.booking-page .form-step[data-step="5"] label > textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--border-thin);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dark);
  outline: none;
}
.booking-page .form-step[data-step="5"] label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-wine);
  transition: left .4s var(--cubic-luxury), width .4s var(--cubic-luxury);
  pointer-events: none;
}
.booking-page .form-step[data-step="5"] label:focus-within::after {
  left: 0;
  width: 100%;
}
.booking-page .form-step[data-step="5"] label > input:focus,
.booking-page .form-step[data-step="5"] label > select:focus {
  border-bottom-color: var(--border-thin);
}
.booking-page .form-step[data-step="5"] .readonly-field,
.booking-page .form-step[data-step="5"] .booking-pax-fixed {
  padding: 0;
  border: 0;
  background: transparent;
}
.booking-page .form-step[data-step="5"] .readonly-field > span,
.booking-page .form-step[data-step="5"] .booking-pax-fixed > span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="5"] .readonly-field > strong,
.booking-page .form-step[data-step="5"] .booking-pax-fixed > strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="5"] .field-note {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.booking-page .form-step[data-step="5"] .booking-finance-summary,
.booking-page .form-step[data-step="5"] .booking-pricing-summary,
.booking-page .form-step[data-step="5"] [data-pricing-summary] {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid #E5DDD2;
  background: #FCFAF6;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dark);
}
.booking-page .form-step[data-step="5"] .booking-payment-plan-head,
.booking-page .form-step[data-step="5"] [data-payment-rows] {
  margin-top: 8px;
}
.booking-page .form-step[data-step="5"] .payment-row {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(120px, .8fr) minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid #EBE4DA;
}
.booking-page .form-step[data-step="5"] .payment-row:last-child {
  border-bottom: 0;
}
.booking-page .form-step[data-step="5"] .step-nav {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0;
}
/* Заголовки блоків маржі / оплат */
.booking-page .form-step[data-step="5"] .booking-finance-card > strong,
.booking-page .form-step[data-step="5"] .booking-pricing-panel > strong,
.booking-page .form-step[data-step="5"] .booking-margin-box > strong {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="5"] .booking-finance-card > .field-note:first-of-type,
.booking-page .form-step[data-step="5"] .booking-pricing-panel > p,
.booking-page .form-step[data-step="5"] .booking-margin-box > p {
  margin: 0 0 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.booking-page .form-step[data-step="5"] .booking-margin-calculator {
  display: grid;
  gap: 12px;
}
.booking-page .form-step[data-step="5"] .booking-finance-preview {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid #E5DDD2;
  background: #FCFAF6;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dark);
}
.booking-page .form-step[data-step="5"] .payment-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.booking-page .form-step[data-step="5"] .payment-plan-head strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine);
}
.booking-page .form-step[data-step="5"] .payment-plan-head span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.booking-page .form-step[data-step="5"] .finance-amount-grid {
  align-items: end;
}



.booking-page .form-step[data-step="5"] .booking-margin-calculator .grid.three,
.booking-page .form-step[data-step="5"] .booking-margin-calculator .grid.two {
  align-items: end;
  gap: 14px 18px;
}
.booking-page .form-step[data-step="5"] .booking-margin-calculator label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 64px;
  margin: 0;
}
.booking-page .form-step[data-step="5"] .booking-margin-calculator label > input,
.booking-page .form-step[data-step="5"] .booking-margin-calculator label > select,
.booking-page .form-step[data-step="5"] .booking-margin-calculator label > button {
  margin-top: auto;
}
.booking-page .form-step[data-step="5"] .booking-margin-calculator label > .btn,
.booking-page .form-step[data-step="5"] .booking-margin-calculator label > button {
  width: 100%;
  margin-top: auto;
  min-height: 40px;
}
/* Довгі підписи в 2 рядки не штовхають сусідні інпути */
.booking-page .form-step[data-step="5"] .booking-margin-calculator label {
  line-height: 1.25;
}


/* ============================================================
   Margin calculator — 2 columns, native selects, clean underlines
   ============================================================ */
.booking-page .form-step[data-step="5"] .margin-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px 24px;
  align-items: end;
}
.booking-page .form-step[data-step="5"] .margin-calc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  position: relative;
  min-width: 0;
}
.booking-page .form-step[data-step="5"] .margin-calc-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}
/* Скидаємо загальні label::after на цих полях — лінія лише під control */
.booking-page .form-step[data-step="5"] .margin-calc-field::after {
  display: none !important;
  content: none !important;
}
.booking-page .form-step[data-step="5"] .margin-calc-field > input,
.booking-page .form-step[data-step="5"] .margin-calc-field > select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 8px 0;
  border: none !important;
  border-bottom: 1px solid var(--border-thin) !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  outline: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dark);
  line-height: 1.3;
}
.booking-page .form-step[data-step="5"] .margin-calc-field > select {
  cursor: pointer;
  /* лишаємо нативний appearance — стабільний вибір option */
  appearance: auto;
  -webkit-appearance: menulist;
  padding-right: 4px;
}
.booking-page .form-step[data-step="5"] .margin-calc-field > input:focus,
.booking-page .form-step[data-step="5"] .margin-calc-field > select:focus {
  border-bottom-color: var(--color-wine) !important;
}
.booking-page .form-step[data-step="5"] .margin-calc-action {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}
.booking-page .form-step[data-step="5"] .margin-calc-action .btn {
  width: auto;
  min-width: 220px;
  min-height: 40px;
  padding: 0 18px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .booking-page .form-step[data-step="5"] .margin-calc-grid {
    grid-template-columns: 1fr;
  }
  .booking-page .form-step[data-step="5"] .margin-calc-action .btn {
    width: 100%;
  }
}

/* tcrm-select у полях бронювання: одна лінія, без ::after на label */
.booking-page label:has(.tcrm-select-wrap)::after {
  content: none !important;
  display: none !important;
}
.booking-page .form-step[data-step="4"] details.cost-row label:has(.tcrm-select-wrap)::after,
.booking-page .form-step[data-step="5"] label:has(.tcrm-select-wrap)::after,
.booking-page .form-step[data-step="2"] label:has(.tcrm-select-wrap)::after {
  content: none !important;
  display: none !important;
}
.booking-page .tcrm-select-trigger {
  border: none;
  border-bottom: 1px solid var(--border-thin);
  border-radius: 0;
  box-shadow: none;
}
.booking-page .tcrm-select-wrap.open .tcrm-select-trigger,
.booking-page .tcrm-select-trigger:focus {
  border-bottom-color: var(--color-wine);
  box-shadow: none;
}
/* після закриття — без «залишку» другої лінії */
.booking-page .tcrm-select-wrap:not(.open) .tcrm-select-trigger:not(:focus) {
  border-bottom-color: var(--border-thin);
}

/* ============================================================
   Validation modal — quiet luxury
   ============================================================ */
.booking-error-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 35, 36, .55);
  backdrop-filter: blur(3px);
  box-sizing: border-box;
}
.booking-error-modal {
  position: relative;
  width: min(440px, 100%);
  margin: 0;
  padding: 28px 28px 24px;
  border: 1px solid #E5DDD2;
  border-top: 2px solid var(--color-wine, #581825);
  border-radius: 0;
  background: #FFFDF9;
  box-shadow: 0 24px 64px rgba(59, 15, 24, .28);
  color: var(--text-dark, #2A2324);
}
.booking-error-modal-accent {
  display: none;
}
.booking-error-modal h3,
.booking-error-modal #booking-error-title {
  margin: 0 0 10px;
  font-family: var(--font-serif, Cinzel, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-wine, #581825);
}
.booking-error-modal-lead,
.booking-error-modal > p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #7A7273);
}
.booking-error-list,
.booking-error-modal ul {
  margin: 0 0 20px;
  padding: 12px 14px 12px 28px;
  border: 1px solid #E5DDD2;
  background: #FCFAF6;
  list-style: disc;
}
.booking-error-list li,
.booking-error-modal ul li {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dark, #2A2324);
}
.booking-error-list li:last-child,
.booking-error-modal ul li:last-child {
  margin-bottom: 0;
}
.booking-error-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.booking-error-modal-actions .btn {
  min-height: 38px;
  padding: 0 16px;
}
.booking-error-focus {
  outline: 2px solid var(--color-wine, #581825) !important;
  outline-offset: 3px;
  transition: outline-color .2s ease;
}

/* Residual cost rows (service removed from step 2 but money remains) */
.booking-page .form-step[data-step="4"] details.cost-row.cost-row-orphan {
  border-color: #d4b896;
  background: #fcf8f2;
}
.booking-page .form-step[data-step="4"] details.cost-row .cost-row-orphan-note {
  margin: 0;
  padding: 10px 14px 12px;
  border-bottom: 1px solid #E5DDD2;
  font-size: 12px;
  line-height: 1.45;
  color: #6b5c4c;
  background: rgba(197, 168, 128, .12);
}
.booking-page .form-step[data-step="4"] details.cost-row .cost-row-orphan-note strong {
  color: var(--color-wine, #581825);
  font-weight: 600;
}

.booking-page .svc-room-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  max-width: 28rem;
}
.booking-page .svc-room-list li {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted, #7A7273);
  padding-left: 10px;
  position: relative;
}
.booking-page .svc-room-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold, #C5A880);
}

.booking-page a.pill.pill--action {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.booking-page a.pill.pill--action:hover {
  border-color: var(--color-wine, #581825);
  color: var(--color-wine, #581825);
  background: rgba(88, 24, 37, .06);
}
.booking-page a.pill.pill--action:focus-visible {
  outline: 2px solid var(--color-wine, #581825);
  outline-offset: 2px;
}

/* --- Tourist document modals: clean underlines, file input, visa actions --- */
.tourist-document-modal .input-wrapper {
  position: relative;
}
.tourist-document-modal .input-wrapper > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tourist-document-modal .input-wrapper input:not([type="file"]):not([type="hidden"]),
.tourist-document-modal .input-wrapper select,
.tourist-document-modal .input-wrapper textarea {
  border: 0;
  border-bottom: 1px solid var(--border-thin);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dark);
  outline: none;
}
.tourist-document-modal .input-wrapper input:focus,
.tourist-document-modal .input-wrapper select:focus,
.tourist-document-modal .input-wrapper textarea:focus {
  border-bottom-color: var(--color-wine);
}
/* одна лінія: без ::after на label у цій модалці */
.tourist-document-modal .input-wrapper label::after,
.tourist-document-modal .input-wrapper::after {
  content: none !important;
  display: none !important;
}
.tourist-document-modal .tcrm-select-trigger {
  border: none;
  border-bottom: 1px solid var(--border-thin);
  border-radius: 0;
  box-shadow: none;
}
.tourist-document-modal .field-note {
  margin-top: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
  line-height: 1.4;
  border: 0;
  padding: 0;
}
.tourist-document-modal .tcrm-file-field {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-thin);
  background: #FFFDF9;
}
.tourist-document-modal .tcrm-file-field input[type="file"] {
  width: 100%;
  border: 0 !important;
  padding: 0;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dark);
  background: transparent;
}
.tourist-document-modal .tcrm-file-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid var(--border-thin);
  border-radius: 0;
  background: #FFFDF9;
  color: var(--color-wine);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.tourist-document-modal .tcrm-file-field input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid var(--border-thin);
  border-radius: 0;
  background: #FFFDF9;
  color: var(--color-wine);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.check-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 6px;
}
.check-card-actions a {
  margin-top: 0;
}
.check-card-inline-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.check-card-text-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 10.5px;
  color: var(--color-wine);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.check-card-text-btn:hover {
  color: var(--text-dark);
}

.tourist-trip-context {
  margin-bottom: 16px;
}
.tourist-trip-context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0 !important;
}
.check-card-text-btn--danger {
  color: #9a5d55 !important;
}

.check-card.is-highlighted {
  box-shadow: 0 0 0 2px var(--color-wine, #581825);
  border-color: var(--color-wine, #581825);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.tourist-visa-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tourist-visa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.tourist-visa-action-form {
  display: inline;
  margin: 0;
}
.tourist-trip-visa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-thin, #E5DDD2);
}

/* Trip docs modal — quiet luxury, більше повітря, тонша типографіка */
.trip-doc-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.trip-doc-chip {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--border-thin, #E5DDD2);
  color: var(--text-muted, #7A7273);
  background: transparent;
}
.trip-doc-chip.is-ok {
  /* Потрібен і готовий */
  border-color: rgba(63, 101, 79, .32);
  color: #3f654f;
  background: rgba(63, 101, 79, .07);
}
.trip-doc-chip.is-missing {
  /* Потрібен, але ще немає / не підтверджено */
  border-color: rgba(136, 72, 58, .32);
  color: #8a4b40;
  background: rgba(136, 72, 58, .05);
}
.trip-doc-chip.is-na {
  /* Не потрібен для цієї заявки — неактивний */
  border-color: rgba(122, 114, 115, .22);
  color: #9a9293;
  background: rgba(122, 114, 115, .04);
  opacity: .85;
}
.trip-doc-chip.is-warn {
  /* legacy alias */
  border-color: rgba(136, 72, 58, .28);
  color: #8a4b40;
}
.trip-doc-chip.is-muted {
  opacity: .55;
}
.trip-doc-evidence {
  display: block;
  margin-top: 7px;
  color: var(--text-muted, #7A7273);
  font-size: 11px;
  line-height: 1.35;
}
.trip-doc-evidence.is-present {
  color: #3f654f;
}
.trip-doc-evidence.is-not-required {
  color: var(--text-muted, #7A7273);
}
.trip-doc-evidence a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.trip-docs-dialog.booking-status-dialog {
  width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: #FFFCFA;
  box-shadow: 0 24px 64px rgba(45, 28, 32, .12);
  overflow-x: hidden;
  overflow-y: hidden; /* скрол лише в body */
}
.trip-docs-dialog .booking-status-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 32px 18px 32px;
  border-bottom: 1px solid var(--border-thin, #E5DDD2);
  flex-shrink: 0;
}
.trip-docs-dialog .card-kicker {
  margin: 0 0 6px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold, #B8A07A);
}
.trip-docs-dialog .booking-status-dialog-head strong {
  display: block;
  font-family: var(--font-serif, "Cinzel", Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine, #581825);
  line-height: 1.25;
}
.trip-docs-dialog .modal-subtitle {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted, #7A7273);
  letter-spacing: .01em;
}
.trip-docs-dialog .booking-status-dialog-head button[data-dialog-close] {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: transparent;
  color: var(--text-muted, #7A7273);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.trip-docs-dialog .booking-status-dialog-head button[data-dialog-close]:hover {
  border-color: var(--color-gold, #B8A07A);
  color: var(--color-wine, #581825);
}

.trip-docs-body {
  display: grid;
  gap: 14px;
  padding: 18px 32px 28px 32px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 160px);
  /* vertical scrollbar — quiet luxury */
  scrollbar-width: thin;
  scrollbar-color: rgba(88, 24, 37, .28) transparent;
}
.trip-docs-body::-webkit-scrollbar {
  width: 6px;
}
.trip-docs-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.trip-docs-body::-webkit-scrollbar-thumb {
  background: rgba(88, 24, 37, .22);
  border-radius: 0;
}
.trip-docs-body::-webkit-scrollbar-thumb:hover {
  background: rgba(88, 24, 37, .38);
}

.trip-docs-row {
  border: 1px solid var(--border-thin, #E5DDD2);
  padding: 16px 18px 14px;
  background: #FFFDF9;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.trip-docs-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.trip-docs-row-head strong {
  font-family: var(--font-serif, "Cinzel", Georgia, serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-wine, #581825);
}
.trip-docs-row .cell-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted, #7A7273);
  letter-spacing: .01em;
}
.trip-docs-row .pill {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 0;
}
.trip-docs-row .pill.na {
  border-color: rgba(122, 114, 115, .25);
  color: #9a9293;
  background: rgba(122, 114, 115, .05);
}

.trip-docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2px;
}
.trip-docs-form {
  display: inline;
  margin: 0;
}
.trip-docs-actions .btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
}
.trip-docs-actions .btn-ghost {
  border-color: var(--border-thin, #E5DDD2);
  color: var(--text-muted, #7A7273);
  background: transparent;
}
.trip-docs-actions .btn-ghost:hover {
  border-color: var(--color-gold, #B8A07A);
  color: var(--color-wine, #581825);
}
.trip-passport-expiry {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1px solid rgba(184, 160, 122, .5);
  background: rgba(184, 160, 122, .07);
}
.trip-passport-expiry label {
  display: grid;
  flex: 1 1 180px;
  gap: 5px;
  color: var(--text-muted, #7A7273);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.trip-passport-expiry input[data-tcrm-date] {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23581825' stroke-width='1.7'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='1.5'/%3E%3Cpath d='M7.5 3.5v4M16.5 3.5v4M3.5 10h17'/%3E%3C/svg%3E") no-repeat right 9px center / 16px;
  color: var(--text-main, #2D1C20);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.trip-passport-expiry input[data-tcrm-date]:focus {
  outline: 0;
  border-color: var(--color-wine, #581825);
  box-shadow: 0 0 0 3px rgba(88, 24, 37, .09);
}

.trip-docs-more {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-thin, #E5DDD2);
}
.trip-docs-more > summary {
  cursor: pointer;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7273);
  list-style: none;
  padding: 2px 0 6px;
  user-select: none;
}
.trip-docs-more > summary::-webkit-details-marker { display: none; }
.trip-docs-more > summary::after {
  content: " ▾";
  font-size: 9px;
  opacity: .7;
}
.trip-docs-more[open] > summary::after {
  content: " ▴";
}
.trip-docs-more[open] > summary {
  color: var(--color-wine, #581825);
}

.trip-docs-upload {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 0;
  border: 0;
}
.trip-docs-file,
.trip-docs-archive {
  display: grid;
  gap: 6px;
  margin: 0;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7273);
}
.trip-docs-dialog .tcrm-file-field {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 4px 0 0;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: #FFFCFA;
  transition: border-color .15s ease;
}
.trip-docs-dialog .tcrm-file-field:hover,
.trip-docs-dialog .tcrm-file-field:focus-within {
  border-color: var(--color-gold, #B8A07A);
}
.trip-docs-dialog .tcrm-file-field input[type="file"] {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--text-main, #2D1C20);
  text-transform: none;
}
.trip-docs-dialog .tcrm-file-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: #FFFDF9;
  color: var(--color-wine, #581825);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.trip-docs-dialog .tcrm-file-field input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: #FFFDF9;
  color: var(--color-wine, #581825);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.trip-docs-archive select {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: #FFFCFA;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-main, #2D1C20);
  border-radius: 0;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7A7273 50%),
    linear-gradient(135deg, #7A7273 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.trip-docs-archive select:focus {
  outline: none;
  border-color: var(--color-gold, #B8A07A);
}
.trip-docs-upload > .btn {
  justify-self: start;
  min-height: 36px;
  padding: 0 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
}
.trip-docs-upload .cell-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #7A7273);
}

.tourist-trip-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.tourist-trip-context > p { margin: 0; max-width: 52rem; }

/* Two-layer readiness */
.readiness-layers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 0 8px;
}
@media (max-width: 840px) {
  .readiness-layers-grid { grid-template-columns: 1fr; }
}
.readiness-layer {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--border-thin, #E5DDD2);
  background: #FFFDF9;
  text-decoration: none;
  color: inherit;
}
a.readiness-layer:hover {
  border-color: var(--color-gold, #B8A07A);
}
.readiness-layer-kicker {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold, #B8A07A);
}
.readiness-layer strong {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-wine, #581825);
}
.readiness-layer p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted, #7A7273);
}
.readiness-layer-meter {
  height: 3px;
  background: rgba(88, 24, 37, .08);
  margin-top: 4px;
}
.readiness-layer-meter > span {
  display: block;
  height: 100%;
  background: var(--color-wine, #581825);
}
.readiness-layer.is-ready .readiness-layer-meter > span {
  background: #3f654f;
}
.readiness-layer-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.readiness-layer-foot b {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  font-variant-numeric: tabular-nums;
}
.readiness-layer.is-ready .readiness-layer-foot b {
  color: #3f654f;
}
.readiness-layer-foot span {
  font-size: 12px;
  color: var(--text-muted, #7A7273);
  text-align: right;
}

.trip-docs-body.is-saving {
  opacity: .72;
  pointer-events: none;
}
.trip-docs-flash {
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  border: 1px solid var(--border-thin, #E5DDD2);
  margin-bottom: 4px;
}
.trip-docs-flash.is-ok {
  border-color: rgba(63, 101, 79, .35);
  background: rgba(63, 101, 79, .06);
  color: #3f654f;
}
.trip-docs-flash.is-err {
  border-color: rgba(160, 58, 43, .3);
  background: rgba(160, 58, 43, .06);
  color: #8a4b40;
}
.trip-docs-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 32px 22px;
  border-top: 1px solid var(--border-thin, #E5DDD2);
  flex-shrink: 0;
}

/* ============================================================
   Booking detail — Next Action, ops finance, sticky bar, history
   ============================================================ */
.booking-next-action {
  display: block;
  margin: 4px 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--border-thin, #DCD5CB);
  background: #FFFCFA;
}
.booking-next-action.tone-critical {
  border-color: rgba(160, 58, 43, .35);
  background: rgba(160, 58, 43, .05);
}
.booking-next-action.tone-attention {
  border-color: rgba(138, 90, 0, .28);
  background: rgba(251, 243, 228, .55);
}
.booking-next-action.tone-ok {
  border-color: rgba(63, 91, 69, .28);
  background: rgba(238, 242, 236, .7);
}
.booking-next-action-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.booking-next-action-kicker {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold, #C5A880);
}
.booking-next-action-copy strong {
  display: block;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  line-height: 1.25;
}
.booking-next-action-copy p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted, #7A7273);
  max-width: 36rem;
}
.booking-next-action-btn {
  flex: 0 0 auto;
  align-self: center;
  min-height: 44px;
  min-width: 7.5rem;
  padding: 12px 22px;
}

.booking-finance-story {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-thin, #DCD5CB);
  background: #FFFCFA;
}
.booking-finance-story p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dark, #2A2324);
}
.financial-grid--ops {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
}
@media (max-width: 960px) {
  .financial-grid--ops {
    grid-template-columns: 1fr;
  }
}
.financial-grid--ops .fin-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.financial-grid--ops .fin-group-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold, #C5A880);
}
.financial-grid--ops .fin-item {
  min-width: 0;
}
.financial-grid--ops .fin-item--hero,
.financial-grid--ops .fin-item.is-emphasis {
  padding: 12px 14px;
  border: 1px solid var(--border-thin, #DCD5CB);
  background: #FFFDF9;
}
.financial-grid--ops .fin-item--hero.is-debt,
.financial-grid--ops .fin-item.is-emphasis:has(.debt) {
  border-color: rgba(160, 58, 43, .3);
  background: rgba(160, 58, 43, .04);
}
.financial-grid--ops .fin-item--hero.is-clear {
  border-color: rgba(63, 91, 69, .25);
  background: rgba(238, 242, 236, .5);
}
.financial-grid--ops .fin-item--hero .fin-label {
  font-size: 10px;
  letter-spacing: .1em;
}
.financial-grid--ops .fin-item--hero .fin-value {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-wine, #581825);
  margin-top: 4px;
  display: block;
}
.financial-grid--ops .fin-item--hero.is-debt .fin-value {
  color: var(--danger, #A03A2B);
}
.financial-grid--ops .fin-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted, #7A7273);
}

.booking-history-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}
.booking-history-details > summary::-webkit-details-marker { display: none; }
.booking-history-summary .card-title {
  margin: 0;
  font-size: 18px;
}
.booking-history-toggle {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-wine, #581825);
  border: 1px solid var(--border-thin, #DCD5CB);
  padding: 8px 12px;
  margin-top: 2px;
}
.booking-history-details[open] .booking-history-toggle {
  content: none;
}
.booking-history-details[open] .booking-history-toggle::before {
  content: none;
}
.booking-history-details[open] > summary .booking-history-toggle {
  /* label swap via attr would need JS; keep text, user understands */
}
.booking-history-details .timeline-list {
  margin-top: 16px;
}

/* Якорна навігація по картках досьє заявки — sticky під топбаром сторінки,
   щоб не губити контекст на довгому скролі. Активний пункт підсвічує
   :target-сусід через CSS (без JS: :has(+ [id]:target) непідтримуваний
   надійно, тому підсвічування навмисно не завʼязане на активність — це
   свідомий компроміс "просто, без нового JS-хука" за дисципліною ТЗ). */
.booking-jump-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 4px;
  margin: -6px 0 18px;
  background: rgba(251, 248, 240, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-thin);
}
.booking-jump-nav::-webkit-scrollbar { display: none; }
.booking-jump-nav a {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  border: 1px solid var(--border-thin);
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.booking-jump-nav a:hover,
.booking-jump-nav a:focus-visible {
  color: var(--color-wine);
  border-color: var(--color-gold, #C5A880);
}
@media (max-width: 640px) {
  .booking-jump-nav { margin-top: 0; }
}

/* Sticky bar */
.booking-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding: 12px 16px;
  background: rgba(255, 252, 250, .97);
  border: 1px solid var(--border-thin, #DCD5CB);
  box-shadow: 0 -6px 20px rgba(45, 28, 32, .06);
  backdrop-filter: blur(8px);
}
.booking-sticky-bar-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.booking-sticky-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7273);
}
.booking-sticky-bar-copy strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  font-variant-numeric: tabular-nums;
}
.booking-sticky-bar-copy strong.is-debt {
  color: var(--danger, #A03A2B);
}
.booking-sticky-cta {
  min-height: 44px;
  padding: 10px 18px;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .booking-sticky-bar {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .booking-sticky-cta {
    width: 100%;
  }
  .financial-grid--ops {
    grid-template-columns: 1fr;
  }
}

section[data-booking-detail] {
  padding-bottom: 12px;
}

/* Secondary actions quieter under Next Action */
.booking-page .booking-actions-bar .btn-primary {
  /* no competing primary under next-action */
}
.booking-page [data-booking-detail] .booking-actions-bar {
  opacity: .88;
}
.booking-page [data-booking-detail] .booking-actions-bar--secondary {
  opacity: .55;
}
.booking-page [data-booking-detail] .financial-grid--ops {
  margin-top: 6px;
}

.booking-next-action-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  width: 100%;
}
.booking-next-skip-btn {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted, #7A7273);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.booking-next-skip-btn:hover {
  color: var(--color-wine, #581825);
}
.booking-next-action-kicker [data-na-pos] {
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-muted, #7A7273);
  margin-left: 4px;
}
@media (max-width: 640px) {
  .booking-next-action-main {
    flex-direction: column;
    align-items: stretch;
  }
  .booking-next-action-btn {
    width: 100%;
  }
}

/* Step 2: secondary todos + booking doc checklist */
.booking-secondary-todos-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.booking-secondary-todos-summary::-webkit-details-marker { display: none; }
.booking-secondary-todos-summary .card-title { margin: 0; font-size: 18px; }
.booking-secondary-todos-toggle {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-wine, #581825);
  border: 1px solid var(--border-thin, #DCD5CB);
  padding: 8px 12px;
}
.booking-secondary-todos-toggle::before {
  content: "Показати";
}
.booking-secondary-todos-details[open] > .booking-secondary-todos-summary .booking-secondary-todos-toggle::before {
  content: "Згорнути";
}
/* порожній текст у HTML — підпис лише через CSS */
.booking-secondary-todos-toggle {
  font-size: 0;
}
.booking-secondary-todos-toggle::before {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.booking-secondary-todos .todo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.booking-secondary-todos .todo-card {
  min-width: 0;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.booking-secondary-todos .todo-info {
  min-width: 0;
  flex: 1 1 8rem;
}
.booking-secondary-todos .todo-card .btn {
  flex: 0 0 auto;
  margin-left: auto;
}
@media (max-width: 720px) {
  .booking-secondary-todos .todo-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1180px) {
  /* під rail — 2 колонки, не 3, щоб картки не вилазили */
  .booking-secondary-todos .todo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.booking-doc-checklist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 8px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border-thin, #E5DDD2);
}
.booking-doc-checklist-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 5.5rem;
}
.booking-doc-checklist-summary strong {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  font-variant-numeric: tabular-nums;
}
.booking-doc-checklist-summary span {
  font-size: 11.5px;
  color: var(--text-muted, #7A7273);
}
.booking-doc-checklist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.booking-doc-checklist-chips .trip-doc-chip {
  text-decoration: none;
}
.booking-docs-details-summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7273);
  list-style: none;
  padding: 4px 0;
}
.booking-docs-details-summary::-webkit-details-marker { display: none; }
.booking-docs-details[open] > .booking-docs-details-summary {
  color: var(--color-wine, #581825);
  margin-bottom: 4px;
}

/* Step 3: workflow pipeline + wide 2-column rail */
.booking-stage-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.booking-stage-pipeline.is-cancelled {
  display: block;
}
.booking-stage-pill {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--border-thin, #DCD5CB);
  color: var(--text-muted, #7A7273);
  background: transparent;
}
.booking-stage-pill.is-done {
  border-color: rgba(63, 101, 79, .28);
  color: #3f654f;
  background: rgba(63, 101, 79, .06);
}
.booking-stage-pill.is-current {
  border-color: var(--color-wine, #581825);
  color: var(--color-wine, #581825);
  background: rgba(88, 24, 37, .06);
  font-weight: 600;
}
.booking-stage-pill.is-todo {
  opacity: .55;
}

.booking-detail-layout {
  display: block;
}
.booking-detail-rail {
  display: none;
}

@media (min-width: 1180px) {
  .booking-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
  }
  .booking-detail-rail {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 16px;
  }
  /* sticky bottom bar only for touch / narrow */
  .booking-sticky-bar {
    display: none;
  }
}

.booking-rail-card {
  border: 1px solid var(--border-thin, #DCD5CB);
  background: #FFFCFA;
  padding: 14px 16px;
}
.booking-rail-card.is-debt {
  border-color: rgba(160, 58, 43, .28);
  background: rgba(160, 58, 43, .04);
}
.booking-rail-card.is-clear {
  border-color: rgba(63, 101, 79, .22);
  background: rgba(238, 242, 236, .45);
}
.booking-rail-kicker {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold, #C5A880);
  margin-bottom: 6px;
}
.booking-rail-status,
.booking-rail-action-title {
  display: block;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  line-height: 1.3;
}
.booking-rail-money {
  display: block;
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-wine, #581825);
}
.booking-rail-card.is-debt .booking-rail-money {
  color: var(--danger, #A03A2B);
}
.booking-rail-stage,
.booking-rail-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, #7A7273);
}
.booking-rail-note.is-warn {
  color: #8a4b40;
}
.booking-rail-cta {
  display: inline-flex;
  margin-top: 12px;
  min-height: 40px;
  width: 100%;
  justify-content: center;
}

/* Table scroll — quiet luxury, denser under rail */
.booking-page .table-scroll,
section[data-booking-detail] .table-scroll {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(88, 24, 37, .28) transparent;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px;
  padding-bottom: 4px;
}
.booking-page .table-scroll::-webkit-scrollbar,
section[data-booking-detail] .table-scroll::-webkit-scrollbar {
  height: 6px;
}
.booking-page .table-scroll::-webkit-scrollbar-track,
section[data-booking-detail] .table-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.booking-page .table-scroll::-webkit-scrollbar-thumb,
section[data-booking-detail] .table-scroll::-webkit-scrollbar-thumb {
  background: rgba(88, 24, 37, .22);
}
.booking-page .table-scroll::-webkit-scrollbar-thumb:hover,
section[data-booking-detail] .table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(88, 24, 37, .38);
}
section[data-booking-detail] .data-table {
  min-width: 0;
  width: 100%;
}
section[data-booking-detail] .data-table th,
section[data-booking-detail] .data-table td {
  padding: 10px 12px;
  font-size: 12.5px;
  vertical-align: top;
}
section[data-booking-detail] .data-table th {
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: .06em;
}
@media (min-width: 1180px) and (max-width: 1400px) {
  section[data-booking-detail] .data-table th,
  section[data-booking-detail] .data-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
  .booking-detail-rail {
    width: auto;
  }
  .booking-detail-layout {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
}
/* Hide secondary finance duplicate noise on very narrow */
@media (max-width: 640px) {
  .financial-grid--ops .fin-hint {
    font-size: 10.5px;
  }
}

/* Status dropdown in header */
.booking-status-menu {
  position: relative;
}
.booking-status-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.booking-status-menu > summary::-webkit-details-marker { display: none; }
.booking-current-status--action {
  border: 1px solid var(--border-thin, #DCD5CB);
  padding: 6px 10px;
  background: #FFFCFA;
}
.booking-status-caret {
  font-size: 10px;
  opacity: .7;
}
.booking-status-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 160px;
  border: 1px solid var(--border-thin, #DCD5CB);
  background: #FFFCFA;
  box-shadow: 0 12px 28px rgba(45, 28, 32, .08);
  padding: 6px;
  display: grid;
  gap: 2px;
}
.booking-status-menu-list form { margin: 0; }
.booking-status-menu-list button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-dark, #2A2324);
  cursor: pointer;
}
.booking-status-menu-list button:hover {
  background: rgba(88, 24, 37, .05);
  color: var(--color-wine, #581825);
}
.booking-status-menu-list button.is-danger {
  color: var(--danger, #A03A2B);
}

/* Compact client finance row */
.financial-grid--ops .fin-client-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.financial-grid--ops .fin-item--hero.is-overpay {
  border-color: rgba(138, 90, 0, .3);
  background: rgba(251, 243, 228, .55);
}
.financial-grid--ops .fin-item--hero.is-overpay .fin-value {
  color: var(--amber, #8A5A00);
}
.booking-rail-card.is-overpay {
  border-color: rgba(138, 90, 0, .28);
  background: rgba(251, 243, 228, .5);
}
.booking-rail-card.is-overpay .booking-rail-money {
  color: var(--amber, #8A5A00);
}

/* denser finance groups — no stretched empty air */
.financial-grid--ops .fin-group--client {
  gap: 8px;
}
.financial-grid--ops .fin-group--client .fin-item:not(.fin-item--hero) .fin-value {
  font-size: 14px;
  margin-top: 2px;
  display: block;
}

.fin-currency-stack {
  padding: 8px 0 2px;
}
.fin-currency-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.fin-currency-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark, #2A2324);
}
.fin-currency-code {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-muted, #7A7273);
  min-width: 2.5rem;
}
.booking-rail-currencies {
  list-style: none;
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border-thin, #E5DDD2);
  display: grid;
  gap: 4px;
}
.booking-rail-currencies li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.booking-rail-currencies span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-muted, #7A7273);
}

.financial-grid--ops .fin-item.is-muted-margin {
  border: 1px dashed var(--border-thin, #DCD5CB);
  background: #FFFCFA;
  opacity: .72;
}
.financial-grid--ops .fin-value.muted {
  color: var(--text-muted, #7A7273) !important;
  font-weight: 400;
}

/* Action Center */
.booking-action-center {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(160, 58, 43, .22);
  background: rgba(160, 58, 43, .04);
}
.booking-action-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.booking-action-center-kicker {
  margin: 0 0 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A03A2B;
}
.booking-action-center-title {
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  line-height: 1.25;
}
.booking-action-center-detail {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted, #7A7273);
}
.booking-action-alerts {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(88, 24, 37, .1);
  display: grid;
  gap: 8px;
}
.booking-action-alert {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.35;
  padding: 6px 0 6px 12px;
  border-left: 3px solid var(--border-thin, #DCD5CB);
}
.booking-action-alert.is-critical {
  border-left-color: #A03A2B;
  color: #6e2c24;
}
.booking-action-alert.is-attention {
  border-left-color: #C5A880;
  color: var(--text-dark, #2A2324);
}
.booking-action-alert.is-info {
  border-left-color: #8a9aaf;
  color: var(--text-muted, #7A7273);
}
.booking-action-alert-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-wine, #581825);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Next action compact when Action Center already shows primary CTA */
.booking-next-action.is-compact {
  padding: 10px 14px;
  margin-bottom: 14px;
  background: transparent;
}
.booking-next-action.is-compact .booking-next-action-copy strong,
.booking-next-action.is-compact .booking-next-action-copy p,
.booking-next-action.is-compact .booking-next-action-btn {
  display: none;
}
.booking-next-action.is-compact .booking-next-action-main {
  justify-content: flex-start;
}
.booking-next-action.is-compact .booking-next-action-meta {
  margin: 0;
}

.attention-banner--compact {
  padding: 12px 16px;
  margin-bottom: 14px;
}
.attention-banner--compact .attention-banner-title {
  font-size: 11px;
  margin-bottom: 2px;
}
.attention-banner--compact .attention-banner-desc {
  font-size: 12.5px;
  line-height: 1.35;
}

/* Booking detail polish — manager feedback (v2) */

/* Next Action: always sharp corners on detail (list hero may stay rounded) */
section[data-booking-detail] .booking-next-action,
section[data-booking-detail] .booking-next-action.tone-critical,
section[data-booking-detail] .booking-next-action.tone-attention,
section[data-booking-detail] .booking-next-action.tone-ok,
section[data-booking-detail] .booking-rail-card,
section[data-booking-detail] .booking-rail-action {
  border-radius: 0 !important;
}

/* Trip dates — higher visual weight */
.booking-trip-dates {
  margin: 14px 0 8px;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--border-thin, #ded7cf);
  border-bottom: 1px solid var(--border-thin, #ded7cf);
  background: transparent;
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  max-width: none;
}
.booking-trip-dates-label {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-wine, #581825);
}
.booking-trip-dates-range {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  line-height: 1.2;
  letter-spacing: .01em;
}
.booking-trip-dates-meta {
  font-size: 12.5px;
  color: var(--text-muted, #7A7273);
  margin-top: 2px;
}

/* Financial tables must stay inside their card. Long supplier, invoice and
   comment values wrap safely; a narrow viewport gets a deliberate horizontal
   scroll instead of content escaping the frame. */
#booking-payments .table-scroll,
#booking-costs .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
#booking-payments .data-table { min-width: 0; table-layout: fixed; }
#booking-costs .data-table { min-width: 720px; table-layout: fixed; }
#booking-payments .data-table th,
#booking-payments .data-table td,
#booking-costs .data-table th,
#booking-costs .data-table td {
  overflow-wrap: anywhere;
  word-break: normal;
}
#booking-payments .data-table th { white-space:normal; line-height:1.3; }
#booking-payments .data-table .row-title-cell { white-space:normal; line-height:1.35; }
#booking-payments .payment-ledger-date { width: 10%; }
#booking-payments .payment-ledger-type { width: 19%; }
#booking-payments .payment-ledger-original,
#booking-payments .payment-ledger-bvb { width: 13%; }
#booking-payments .payment-ledger-rate { width: 7%; }
#booking-payments .payment-ledger-note { width: 22%; }
#booking-payments .payment-ledger-invoice { width: 16%; }
#booking-payments .payment-ledger-type-cell .badge { max-width:100%; white-space:normal; line-height:1.25; }
#booking-payments .payment-ledger-supplier { display:block; margin-top:5px; color:var(--text-muted); font-size:11px; line-height:1.35; overflow-wrap:anywhere; }

/* Native file inputs retain accessibility while their action looks like a
   system button instead of an unstyled browser control. */
.booking-page input[type="file"] {
  max-width: 100%;
  min-width: 0;
  color: var(--text-muted, #7a7273);
  font: 12px/1.35 var(--font-sans, Arial, sans-serif);
}
.booking-page input[type="file"]::file-selector-button {
  margin: 0 10px 0 0;
  padding: 8px 11px;
  border: 1px solid var(--border, #d9d0c4);
  border-radius: 0;
  background: var(--bg-card, #fffdfa);
  color: var(--color-wine, #581825);
  font: 600 11px/1 var(--font-sans, Arial, sans-serif);
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
}
.booking-page input[type="file"]:hover::file-selector-button,
.booking-page input[type="file"]:focus-visible::file-selector-button {
  border-color: var(--color-gold, #c5a46a);
  background: var(--color-gold-light, #f3ead9);
}
@media (max-width: 640px) {
  .booking-trip-dates { grid-template-columns: 1fr; gap: 4px; }
  .booking-trip-dates-label { grid-row: auto; }
}

/* Status vs pipeline labels */
.booking-status-hand-label,
.booking-pipeline-hand-label {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7273);
  margin: 0 0 6px;
}
.booking-detail-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.booking-pipeline-hand-label {
  margin: 4px 0 8px;
}

/* Finance tiles — one style for all four groups */
.financial-grid--ops .fin-item,
.financial-grid--ops .fin-client-row .fin-item,
.financial-grid--ops .fin-item--hero,
.financial-grid--ops .fin-item.is-emphasis,
.financial-grid--ops .fin-item.is-muted-margin {
  padding: 12px 14px !important;
  border: 1px solid var(--border-thin, #DCD5CB) !important;
  background: #FFFCFA !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
.financial-grid--ops .fin-item.is-muted-margin .fin-value,
.financial-grid--ops .fin-value.muted,
.financial-grid--ops .fin-value.debt {
  color: var(--text-dark, #2A2324) !important;
  font-weight: 500 !important;
}
.financial-grid--ops .fin-value.positive {
  color: var(--color-wine, #581825);
}
/* no alarm styling on margin when numbers look test-like */
.financial-grid--ops .fin-item.is-muted-margin {
  border-style: solid !important;
}

/* Tourists table + jump-nav overflow (auditor fixes) */
section[data-booking-detail] #booking-tourists .table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
section[data-booking-detail] #booking-tourists .data-table {
  width: 100%;
  min-width: 640px;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}
section[data-booking-detail] #booking-tourists .data-table th,
section[data-booking-detail] #booking-tourists .data-table td {
  padding: 10px 12px;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}
section[data-booking-detail] #booking-tourists .data-table th {
  white-space: normal;
  line-height: 1.25;
  letter-spacing: .04em;
}
section[data-booking-detail] #booking-tourists .data-table th.th-trip-docs {
  min-width: 9.5rem;
  width: 30%;
}
section[data-booking-detail] #booking-tourists .data-table td:last-child {
  min-width: 9.5rem;
  max-width: 16rem;
}
section[data-booking-detail] #booking-tourists .trip-doc-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  max-width: 100%;
}
section[data-booking-detail] #booking-tourists .trip-doc-chip {
  flex: 0 1 auto;
  font-size: 9px;
  padding: 3px 7px;
  white-space: nowrap;
}
section[data-booking-detail] #booking-tourists .pill,
section[data-booking-detail] #booking-tourists [data-trip-docs-open] {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.25;
  font-size: 11px;
  text-align: left;
}

/* Jump-nav: wrap instead of clipping last tabs */
.booking-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  max-width: 100%;
  padding: 10px 0 14px;
  margin: 0 0 16px;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.booking-jump-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  padding: 6px 10px;
}

/* Payments: the ledger remains inside its card. Only an intentionally opened
   invoice form may extend vertically beyond the scroll area. */
#booking-payments .table-scroll {
  display:block;
  width:100%;
  box-sizing:border-box;
  overflow-x:auto;
  overflow-y:hidden;
}
#booking-payments .table-scroll:has(.invoice-attach[open]) { overflow:visible; }
#booking-payments .data-table td {
  overflow: hidden;
  position: relative;
}
#booking-payments .data-table td:last-child {
  min-width: 0;
}
#booking-payments .data-table td:has(.invoice-attach[open]) {
  overflow: visible;
  z-index: 60;
}

/* A booking note can be an operational instruction, not a one-line value.
   Keep line breaks and wrap it within the finance card instead of clipping it
   inside a readonly input. */
.booking-note-summary { margin-top: 28px; }
.booking-note-summary-value {
  margin-top: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border-thin, #DCD5CB);
  border-bottom: 1px solid var(--border-thin, #DCD5CB);
  color: var(--text-dark, #2A2324);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Services stay readable at desktop widths and never paint past the right
   boundary. On narrow layouts the surrounding table deliberately scrolls. */
#overview-multiservices .booking-services-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}
#overview-multiservices .booking-services-date { width: 17%; }
#overview-multiservices .booking-services-description { width: 38%; }
#overview-multiservices .booking-services-travellers { width: 22%; }
#overview-multiservices .booking-services-destination { width: 23%; }
#overview-multiservices .booking-services-table th,
#overview-multiservices .booking-services-table td {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}
#overview-multiservices .booking-services-destination-cell .row-title-cell,
#overview-multiservices .booking-services-destination-cell .cell-note {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Feedback for task actions must remain visible after a POST reload, even
   when the manager was working at the bottom of a long queue. */
.task-result-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60000;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  box-shadow: 0 12px 32px rgba(42, 35, 36, .16);
  transition: opacity .25s ease, transform .25s ease;
}
.task-result-toast.is-dismissing {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* Detail services editor — luxury form layout (JS may emit plain labels/inputs) */
[data-services-editor] {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}
[data-services-editor] [data-services-rows] {
  display: grid;
  gap: 20px;
}
[data-services-editor] [data-services-rows] > * {
  display: grid;
  gap: 12px 16px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--border-thin, #DCD5CB);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 720px) {
  [data-services-editor] [data-services-rows] > * {
    grid-template-columns: 1fr;
  }
}
[data-services-editor] label,
[data-services-editor] .field,
[data-services-editor] .input-group {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted, #7A7273);
}
[data-services-editor] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
[data-services-editor] select,
[data-services-editor] textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--border-thin, #DCD5CB);
  border-radius: 0;
  background: transparent;
  color: var(--text-dark, #2A2324);
  font: inherit;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
[data-services-editor] textarea {
  min-height: 64px;
  resize: vertical;
}
[data-services-editor] input:focus,
[data-services-editor] select:focus,
[data-services-editor] textarea:focus {
  border-bottom-color: var(--color-wine, #581825);
}
[data-services-editor] input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: middle;
}
[data-services-editor] button {
  font: inherit;
}
[data-services-editor] .booking-services-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}
.booking-services-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-thin, #DCD5CB);
}


/* ── Booking catalog selects (meal / room type) ── */
select.booking-catalog-select,
select.booking-catalog-select[data-native] {
  opacity: 1 !important;
  pointer-events: auto !important;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 32px 10px 0;
  border: none;
  border-bottom: 1px solid rgba(90, 70, 60, 0.22);
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A7A70' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary, #2c2420);
  cursor: pointer;
  transition: border-color .15s ease;
}
select.booking-catalog-select:hover { border-bottom-color: var(--color-gold, #c4a574); }
select.booking-catalog-select:focus {
  outline: none;
  border-bottom-color: var(--color-wine, #6b2c3e);
}
select.booking-catalog-select option {
  font-weight: 400;
  color: #2c2420;
  background: #fff;
}

.booking-rooming-room select.booking-catalog-select:focus {
  border-bottom-color: var(--color-wine, #5c1a1a);
}

.booking-rooming-room.is-over-capacity [data-rooming-room-count] { color: var(--danger, #9f635b); font-weight: 650; }
.rooming-tourist-row:has(input[type="checkbox"]:disabled) { opacity: 0.45; }


select.booking-catalog-select.tcrm-select-hidden,
select.tcrm-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Booking created success modal */
.booking-success-modal-backdrop {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(44, 36, 32, 0.45);
}
.booking-success-modal-backdrop:not(.is-open) { display: none; }
.booking-success-modal {
  width: min(560px, 100%);
  background: #fffdf8;
  border: 1px solid var(--border-soft, #e5d9cb);
  box-shadow: 0 24px 60px rgba(44, 36, 32, 0.18);
  padding: 28px 28px 24px;
  text-align: center;
}
.booking-success-icon {
  width: 48px; height: 48px; margin: 0 auto 12px;
  border-radius: 999px; background: rgba(111, 139, 114, 0.15);
  color: #5a7a5e; display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
}
.booking-success-modal h3 {
  margin: 0 0 8px; font-family: var(--font-serif, Cinzel, serif);
  color: var(--color-wine, #5c1a1a); font-size: 22px;
}
.booking-success-modal > p {
  margin: 0 0 14px; color: var(--text-muted, #7a716a); font-size: 14px; line-height: 1.5;
}
.booking-success-modal-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 18px;
}
.booking-success-modal-actions .btn,
.booking-success-modal-actions a.btn {
  min-height: 40px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}


/* === FINANCE PAGE (bridge to prototype) ===
   Мапить finance-pro* на quiet-luxury токени.
   Нові класи лише там, де немає готового аналога. */
.page-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--color-wine);
}
.tabs-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.tabs-row a,
.finance-pro-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 9px 18px;
  border: 1px solid var(--border-thin);
  color: var(--text-muted);
  text-decoration: none;
  background: var(--bg-card);
}
.tabs-row a:hover,
.finance-pro-nav a:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}
.tabs-row a.active,
.finance-pro-nav a.active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.finance-pro-nav a svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.4;
}
.finance-pro-toolbar,
.finance-pro-toolbar-info,
.filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: flex-end;
  background: var(--bg-main);
  border: 1px solid var(--border-thin);
  padding: 16px 18px;
  margin-bottom: 22px;
  font-size: 12px;
  color: var(--text-muted);
}
.finance-pro-toolbar label,
.filter-strip label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-pro-toolbar select,
.finance-pro-toolbar input,
.filter-strip select,
.filter-strip input {
  height: 34px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card);
  padding: 0 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-dark);
  min-width: 140px;
}
.finance-pro-toolbar select:focus,
.finance-pro-toolbar input:focus,
.filter-strip select:focus,
.filter-strip input:focus {
  outline: none;
  border-color: var(--color-gold);
}
.finance-pro-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-thin);
  border: 1px solid var(--border-thin);
  margin-bottom: 22px;
}
.finance-pro-card,
.finance-pro-hero > article {
  background: var(--bg-card);
  padding: 18px 20px;
}
.finance-pro-card .fin-label,
.finance-pro-card-head span,
.finance-pro-hero span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.finance-pro-card strong,
.finance-pro-hero strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--text-dark);
  margin-top: 6px;
  font-weight: 500;
}
.finance-pro-card.ok strong,
.finance-pro-profit.ok strong { color: var(--success); }
.finance-pro-card.danger strong,
.finance-pro-profit.danger strong { color: var(--danger); }
.finance-pro-grid {
  display: grid;
  gap: 22px;
  margin-bottom: 22px;
  align-items: start;
}
.finance-pro-grid.two { grid-template-columns: 1fr 1fr; }
.finance-pro-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.finance-pro-panel.luxury-card,
.luxury-card.finance-pro-panel {
  margin-bottom: 0;
}
.finance-pro-rank-list,
.finance-pro-rank,
.rank-list {
  display: flex;
  flex-direction: column;
}
.finance-pro-rank,
.finance-pro-rank-list > div {
  padding: 11px 0;
  border-bottom: 1px solid var(--border-thin);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: 12.5px;
}
.finance-pro-rank:last-child,
.finance-pro-rank-list > div:last-child { border-bottom: none; }
.finance-pro-rank b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 13.5px;
  font-weight: 500;
}
.finance-pro-rank small {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-muted);
}
.finance-pro-action-list a,
.finance-pro-export-grid a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-thin);
  color: var(--text-dark);
  text-decoration: none;
}
.finance-pro-action-list a:hover { color: var(--color-wine); }
.finance-pro-cashflow-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-thin);
  font-size: 12px;
}
.finance-pro-table-scroll { overflow-x: auto; }
.finance-pro-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-thin);
  border: 1px solid var(--border-thin);
  margin-bottom: 20px;
}
.finance-pro-kpi-row article {
  background: var(--bg-card);
  padding: 16px 18px;
}
.finance-pro-kpi-row span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.finance-pro-kpi-row strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-wine);
  font-weight: 500;
}
.finance-pro-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  margin-top: 12px;
}
.finance-pro-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.finance-pro-bar i {
  display: block;
  width: 100%;
  max-width: 28px;
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-wine) 130%);
}
.finance-pro-bar b {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-pro-bar span { font-size: 10px; color: var(--text-muted); }
.finance-pro-slices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.finance-pro-signal-list article,
.finance-pro-issue-list article {
  border: 1px solid var(--border-thin);
  border-left: 3px solid var(--border-thin);
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--bg-card);
}
.finance-pro-signal-list article.danger,
.finance-pro-issue-list article.danger { border-left-color: var(--danger); }
.finance-pro-signal-list article.warning,
.finance-pro-issue-list article.warning { border-left-color: var(--color-gold); }
.finance-pro-signal-list article.ok,
.finance-pro-issue-list article.ok { border-left-color: var(--success); }
.finance-currency-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.finance-currency-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
}
.finance-currency-line strong {
  font-family: var(--font-serif);
  color: var(--text-dark);
  font-weight: 500;
}
.finance-currency-line em {
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .06em;
}
.finance-currency-line.muted { color: var(--text-muted); }
.finance-booking-search { position: relative; min-width: 220px; }
.finance-booking-dropdown {
  display: none;
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 40;
  max-height: 260px;
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-thin);
  box-shadow: 0 14px 34px rgba(88, 24, 37, .12);
}
.finance-booking-dropdown.open { display: block; }
.finance-booking-option {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-thin);
  cursor: pointer;
}
.finance-booking-option:hover,
.finance-booking-option.highlighted {
  background: var(--color-gold-light);
}
.finance-booking-option strong {
  display: block;
  font-size: 12.5px;
  color: var(--color-wine);
}
.finance-booking-option span {
  font-size: 11px;
  color: var(--text-muted);
}
.finance-pro-export-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.finance-pro-export-grid a {
  border: 1px solid var(--border-thin);
  padding: 18px 16px;
  text-decoration: none;
  color: var(--text-dark);
  background: var(--bg-card);
}
.finance-pro-export-grid a:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}
.finance-pro-export-grid a strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  margin: 8px 0 4px;
  color: var(--color-wine);
  font-weight: 500;
}
.finance-pro-export-grid a span {
  font-size: 11.5px;
  color: var(--text-muted);
}
.finance-pro-export-grid a svg {
  width: 18px; height: 18px;
  stroke: var(--color-gold); fill: none; stroke-width: 1.4;
}
.finance-pro-agenda article {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-thin);
}
.finance-pro-agenda b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 16px;
  min-width: 32px;
}
.finance-pro-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-thin);
  border: 1px solid var(--border-thin);
}
.finance-pro-checks article {
  background: var(--bg-card);
  padding: 16px 18px;
}
.finance-pro-checks article.warning { background: var(--danger-soft, #FAF2F0); }
.finance-pro-checks span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.finance-pro-checks strong {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--font-serif);
  color: var(--color-wine);
}
.status-pill {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 3px 9px;
  border: 1px solid var(--border-thin);
}
.status-pill.high,
.status-pill.critical { background: var(--danger); color: #fff; border-color: var(--danger); }
.status-pill.medium,
.status-pill.warning { background: var(--danger-soft, #FAF2F0); color: var(--danger); }
.status-pill.normal,
.status-pill.ok { background: var(--success-soft, #EEF2EC); color: var(--success); }
.highlight-pulse {
  animation: financePulse 1.6s ease;
}
@keyframes financePulse {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px rgba(197,168,128,.35); }
}
@media (max-width: 1100px) {
  .finance-pro-hero,
  .finance-pro-kpi-row,
  .finance-pro-grid.three,
  .finance-pro-slices,
  .finance-pro-export-grid,
  .finance-pro-checks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .finance-pro-hero,
  .finance-pro-kpi-row,
  .finance-pro-grid.two,
  .finance-pro-grid.three,
  .finance-pro-slices,
  .finance-pro-export-grid,
  .finance-pro-checks { grid-template-columns: 1fr; }
}

.luxury-card.payments-card { margin-bottom: 22px; }
.finance-inline-pay {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.finance-inline-pay input {
  height: 32px; border: 1px solid var(--border-thin); background: var(--bg-main);
  padding: 0 10px; font-size: 11.5px; width: 100px;
}
.finance-inline-pay input[type="date"] { width: 128px; }
.finance-inline-pay input:focus { outline: none; border-color: var(--color-gold); }
.finance-pro form.grid,
.finance-pro .grid.four,
.finance-pro .grid.two {
  display: grid;
  gap: 16px 18px;
  margin-bottom: 12px;
}
.finance-pro .grid.four { grid-template-columns: repeat(4, 1fr); }
.finance-pro .grid.two { grid-template-columns: 1fr 1fr; }
.finance-pro form label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); font-weight: 600;
}
.finance-pro form input,
.finance-pro form select,
.finance-pro form textarea {
  height: 40px; border: 1px solid var(--border-thin); background: var(--bg-main);
  padding: 0 12px; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-dark);
}
.finance-pro form textarea { height: auto; min-height: 72px; padding: 10px 12px; }
.finance-pro form input:focus,
.finance-pro form select:focus,
.finance-pro form textarea:focus { outline: none; border-color: var(--color-gold); }
@media (max-width: 900px) {
  .finance-pro .grid.four,
  .finance-pro .grid.two { grid-template-columns: 1fr; }
}


/* === FINANCE LAYOUT FIXES (tables, ranks, charts) === */
.finance-natural-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}
.finance-natural-table > .head,
.finance-natural-table > div {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 1fr;
  gap: 10px 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-thin);
  font-size: 12.5px;
}
.finance-natural-table > .head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
  padding-top: 0;
  border-bottom-color: var(--text-dark);
}
.finance-natural-table > div:last-child { border-bottom: none; }
.finance-natural-table b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 14px;
  font-weight: 500;
}
.finance-natural-table span {
  color: var(--text-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.finance-natural-table > .head span { text-align: right; }
.finance-natural-table > .head span:first-child,
.finance-natural-table > div b { text-align: left; }

.finance-pro-action-list a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 8px 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-thin);
  color: var(--text-dark);
  text-decoration: none;
}
.finance-pro-action-list a:last-child { border-bottom: none; }
.finance-pro-action-list a:hover { color: var(--color-wine); }
.finance-pro-action-list a > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--text-muted);
}
.finance-pro-action-list a.high > span,
.finance-pro-action-list a.critical > span { color: var(--danger); }
.finance-pro-action-list a.medium > span,
.finance-pro-action-list a.warning > span { color: #9a6b2f; }
.finance-pro-action-list a > strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
}
.finance-pro-action-list a > small {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.finance-pro-cashflow-row {
  display: grid;
  grid-template-columns: 48px repeat(4, 1fr);
  gap: 8px 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-thin);
  font-size: 11.5px;
  color: var(--text-muted);
}
.finance-pro-cashflow-row:last-child { border-bottom: none; }
.finance-pro-cashflow-row > b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 14px;
  font-weight: 500;
}
.finance-pro-cashflow-row strong {
  display: block;
  margin-top: 2px;
  color: var(--text-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finance-pro-rank-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-thin);
  text-decoration: none;
  color: var(--text-dark);
  position: relative;
}
.finance-pro-rank-list a:last-child { border-bottom: none; }
.finance-pro-rank-list a:hover { color: var(--color-wine); }
.finance-pro-rank-list a span {
  font-size: 12.5px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-pro-rank-list a b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.finance-pro-rank-list a i {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  background: var(--color-gold);
  max-width: 100%;
}

/* Google ranks inside finance-google-dashboard */
.finance-google-ranks,
.finance-google-dashboard .finance-google-ranks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 18px;
}
.finance-google-ranks article h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-wine);
  font-weight: 500;
  margin-bottom: 10px;
}
.finance-google-ranks a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-thin);
  text-decoration: none;
  color: var(--text-dark);
}
.finance-google-ranks a:last-child { border-bottom: none; }
.finance-google-ranks a span { font-size: 12.5px; font-weight: 500; }
.finance-google-ranks a b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.finance-google-ranks a i {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--color-gold);
  display: block;
}

/* Charts: line only, no black fill */
.finance-natural-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.finance-natural-chart-card {
  border: 1px solid var(--border-thin);
  padding: 14px 16px 12px;
  background: var(--bg-card);
}
.finance-natural-chart-card > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.finance-natural-chart-card > div:first-child span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-natural-chart-card > div:first-child strong {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 16px;
  font-weight: 500;
}
.finance-natural-chart-card svg {
  width: 100%;
  height: 120px;
  display: block;
}
.finance-natural-chart-card svg path.grid {
  fill: none;
  stroke: var(--border-thin);
  stroke-width: 1;
}
.finance-natural-chart-card svg polyline.natural,
.finance-natural-chart-card svg polyline,
.finance-google-dashboard svg polyline,
.finance-pro-graph-card svg polyline {
  fill: none !important;
  stroke: var(--color-wine);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.finance-natural-chart-card svg circle,
.finance-google-dashboard svg circle,
.finance-pro-graph-card svg circle {
  fill: var(--color-wine);
  stroke: #fff;
  stroke-width: 1.5;
}
.finance-natural-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Google chart block */
.finance-google-dashboard svg {
  width: 100%;
  height: 220px;
  display: block;
}
.finance-google-dashboard svg path.grid,
.finance-google-dashboard svg .grid {
  fill: none;
  stroke: var(--border-thin);
  stroke-width: 1;
}
.finance-google-dashboard svg polyline.sales {
  fill: none !important;
  stroke: var(--color-wine);
  stroke-width: 2.2;
}
.finance-google-dashboard svg polyline.profit {
  fill: none !important;
  stroke: var(--color-gold);
  stroke-width: 2;
}
.finance-google-dashboard .finance-google-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0 12px;
}
.finance-google-dashboard .finance-google-legend b {
  color: var(--text-dark);
  font-weight: 600;
}

/* Hero KPI already grid — tighten notes */
.finance-pro-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-thin);
  border: 1px solid var(--border-thin);
  margin-bottom: 22px;
}
.finance-pro-hero > article,
.finance-pro-card {
  background: var(--bg-card);
  padding: 18px 20px;
}
.finance-pro-hero .finance-currency-stack {
  margin-top: 8px;
}
.finance-pro-hero .finance-currency-line {
  justify-content: space-between;
}

.card-header h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-wine);
  font-weight: 500;
  margin: 0;
}
.card-header .field-note {
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .finance-natural-chart-grid,
  .finance-google-ranks { grid-template-columns: 1fr; }
  .finance-pro-action-list a {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .finance-pro-action-list a > small { text-align: left; }
  .finance-pro-cashflow-row {
    grid-template-columns: 1fr 1fr;
  }
}

.finance-google-chart-main { margin-top: 6px; }
.finance-google-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.finance-google-chart-head span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-google-chart-head strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-wine);
  font-weight: 500;
  margin: 4px 0;
}
.finance-google-chart-head small {
  font-size: 11px;
  color: var(--text-muted);
}
.finance-google-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-muted);
}
.finance-google-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.finance-google-legend i.sales { background: var(--color-wine); }
.finance-google-legend i.profit { background: var(--color-gold); }
.finance-google-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.finance-google-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-thin);
}
.finance-google-rank-grid article h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-wine);
  font-weight: 500;
  margin: 0 0 8px;
}
.finance-google-rank-grid a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-thin);
  text-decoration: none;
  color: var(--text-dark);
}
.finance-google-rank-grid a:last-child { border-bottom: none; }
.finance-google-rank-grid a:hover { color: var(--color-wine); }
.finance-google-rank-grid a span {
  font-size: 12.5px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-google-rank-grid a b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.finance-google-rank-grid a i {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  background: var(--color-gold);
}
.finance-google-line-chart polyline.sales,
.finance-google-line-chart polyline.profit {
  fill: none !important;
}
@media (max-width: 1100px) {
  .finance-google-rank-grid { grid-template-columns: 1fr; }
}

.finance-due-week { margin-bottom: 22px; }
.finance-due-empty { padding: 8px 0 4px; }
.finance-due-table td.amount-strong,
.finance-due-table .amount-strong {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-dark);
  white-space: nowrap;
}
.finance-due-table tr.is-overdue td {
  background: rgba(160, 58, 43, 0.04);
}
.finance-due-table .row-sub {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.finance-due-table .row-title-cell {
  font-family: var(--font-serif);
  color: var(--color-wine);
  text-decoration: none;
  font-size: 13.5px;
}
.finance-due-table .finance-inline-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.finance-due-clients {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-thin);
}
.finance-due-clients h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-wine);
  font-weight: 500;
  margin: 0 0 12px;
}
.status-pill.danger {
  background: var(--danger-soft, #FAF2F0);
  color: var(--danger);
  border-color: rgba(160, 58, 43, .28);
}
.status-pill.warning {
  background: #F7F1E4;
  color: #8a5a1e;
  border-color: rgba(197, 168, 128, .5);
}
.status-pill.ok,
.status-pill.neutral {
  background: var(--bg-main);
  color: var(--text-muted);
  border-color: var(--border-thin);
}
.btn.tiny {
  padding: 7px 12px;
  font-size: 10px;
}

.finance-due-group-row td {
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid var(--border-thin) !important;
  background: var(--bg-main) !important;
}
.finance-due-group-row span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--text-muted);
}
.finance-due-group-row em {
  font-style: normal;
  margin-left: 8px;
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 12px;
}
.finance-due-group-row.group-overdue span { color: var(--danger); }
.finance-due-group-row.group-week span { color: #8a5a1e; }
.finance-due-group-row.group-nodate span { color: var(--text-muted); }

.finance-inline-pay--compact {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.finance-inline-pay--compact input[type="number"] {
  width: 88px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
}
.finance-inline-pay--compact input[type="date"] {
  width: 122px;
  height: 30px;
  padding: 0 8px;
  font-size: 11.5px;
}
.finance-inline-pay--compact .btn.tiny {
  height: 30px;
  padding: 0 12px;
  line-height: 28px;
}
.finance-due-table td:last-child {
  min-width: 320px;
}
.finance-due-table tr.is-overdue td {
  background: rgba(160, 58, 43, 0.035);
}
.finance-due-table tr.is-soon td {
  background: rgba(197, 168, 128, 0.06);
}
.finance-due-clients .field-note {
  margin: -6px 0 10px;
}
@media (max-width: 1100px) {
  .finance-inline-pay--compact {
    flex-wrap: wrap;
    white-space: normal;
  }
  .finance-due-table td:last-child {
    min-width: 0;
  }
}

.finance-kpi-link {
  color: var(--danger);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 58, 43, 0.35);
}
.finance-kpi-link:hover { color: var(--color-wine); border-bottom-color: var(--color-wine); }

.finance-cf-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  padding: 2px 0;
}
.finance-cf-cell:hover strong { color: var(--color-wine); }
.finance-cf-cell span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

/* Жорстко один рядок дій */
.finance-due-table td:last-child {
  width: 1%;
  white-space: nowrap;
}
.finance-inline-pay--compact {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 5px;
}
.finance-inline-pay--compact input[type="number"] {
  width: 78px !important;
  min-width: 78px;
  height: 30px !important;
}
.finance-inline-pay--compact input[type="date"] {
  width: 118px !important;
  min-width: 118px;
  height: 30px !important;
}
.finance-inline-pay--compact .btn.tiny {
  height: 30px !important;
  padding: 0 10px !important;
  line-height: 28px !important;
  flex-shrink: 0;
}
.finance-due-invoice {
  flex-shrink: 0;
}

.finance-agent-commissions { margin-bottom: 22px; }
.finance-agent-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.finance-agent-total-chip {
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 10px 14px;
  min-width: 120px;
}
.finance-agent-total-chip span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-agent-total-chip strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-wine);
  font-weight: 500;
}

/* === Payments tab === */
.finance-payment-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-thin);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.finance-payment-context__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.finance-payment-context strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-wine);
  font-weight: 500;
}
.finance-payment-context em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-muted);
}
.finance-payment-context__metrics {
  display: flex;
  gap: 18px;
  flex: 1;
  flex-wrap: wrap;
}
.finance-payment-context__metrics div {
  min-width: 100px;
}
.finance-payment-context__metrics span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-payment-context__metrics b {
  display: block;
  margin-top: 3px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-dark);
  font-weight: 500;
}
.finance-payment-context__metrics .is-debt b { color: var(--danger); }
.finance-payment-context__metrics .is-ok b { color: var(--success); }

.finance-payments-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 22px;
  align-items: start;
}
.finance-payments-layout > #add-payment { order: 1; }
.finance-payments-layout > #client-deposit { order: 2; }
.finance-payments-layout > #booking-balances { order: 3; }
.finance-payments-layout > #add-payment,
.finance-payments-layout > #client-deposit,
.finance-payments-layout > #booking-balances {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.finance-payments-layout > #add-payment {
  border-top: 2px solid var(--color-gold);
}
.finance-payments-layout > #client-deposit {
  background: var(--bg-main);
}

.finance-payment-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.finance-payment-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-payment-form input,
.finance-payment-form select,
.finance-payment-form textarea {
  height: 40px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.finance-payment-form textarea {
  height: auto;
  min-height: 64px;
  padding: 10px 12px;
  resize: vertical;
}
.finance-payment-form input:focus,
.finance-payment-form select:focus,
.finance-payment-form textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}
.finance-payment-form__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
}
@media (max-width: 900px) {
  .finance-payment-form__grid { grid-template-columns: 1fr 1fr; }
}
.finance-payment-form .field-hint {
  font-size: 10px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.finance-overpayment-confirmation {
  padding: 12px 14px;
  border: 1px solid var(--amber);
  background: var(--amber-soft);
}
.finance-overpayment-confirmation label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-dark);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
.finance-overpayment-confirmation input[type="checkbox"] {
  width: auto;
  height: auto;
  margin-top: 2px;
}
.finance-overpayment-confirmation [data-overpayment-message] {
  text-transform: none;
  letter-spacing: normal;
}
.finance-payment-form__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.finance-payment-form__actions .btn-primary {
  min-width: 180px;
}

.finance-balance-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.finance-balance-filters .btn.is-active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.finance-empty-state {
  padding: 12px 0 4px;
}
.finance-booking-text-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 12.5px;
}
.finance-booking-text-input:focus {
  outline: none;
  border-color: var(--color-gold);
}

/* Period + pagination */
.finance-dash-period {
  margin-bottom: 18px;
  padding: 16px 20px;
}
.finance-dash-period__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.finance-dash-period__head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-wine);
  font-weight: 500;
}
.finance-dash-period__label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .04em;
}
.finance-dash-period__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finance-period-chip {
  position: relative;
  cursor: pointer;
}
.finance-period-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.finance-period-chip span {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.finance-period-chip.is-active span,
.finance-period-chip input:checked + span {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.finance-dash-period__custom {
  display: none;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.finance-dash-period__custom.is-open {
  display: flex;
}
.finance-dash-period__custom label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-dash-period__custom input[type="date"] {
  height: 36px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 10px;
  font-size: 12.5px;
}

.finance-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border-thin);
  margin-top: 12px;
}
.finance-pagination__meta {
  font-size: 12px;
  color: var(--text-muted);
}
.finance-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.finance-pagination__pages .btn.is-active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.finance-pagination__gap {
  color: var(--text-muted);
  font-size: 12px;
  padding: 0 2px;
}

.finance-dash-period__custom input[data-tcrm-date] {
  height: 40px;
  min-width: 140px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-dark);
  cursor: pointer;
}
.finance-dash-period__custom input[data-tcrm-date]:focus {
  outline: none;
  border-color: var(--color-gold);
}
.finance-payment-form input[data-tcrm-date] {
  height: 40px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 12.5px;
  cursor: pointer;
}

/* Suppliers tab */
.finance-supplier-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.finance-supplier-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: end;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-thin);
}
.finance-supplier-search label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-supplier-search__q {
  flex: 1;
  min-width: 200px;
}
.finance-supplier-search input,
.finance-supplier-search select {
  height: 38px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 12.5px;
  font-family: var(--font-sans);
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.finance-supplier-search input:focus,
.finance-supplier-search select:focus {
  outline: none;
  border-color: var(--color-gold);
}

.finance-supplier-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 220px;
}
.finance-supplier-table td.finance-supplier-actions {
  white-space: normal;
}

.finance-file-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.finance-file-attach--row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-thin);
}
.finance-file-attach--row input[type="text"] {
  height: 36px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  min-width: 200px;
  font-size: 12.5px;
}
.finance-file-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
}
.finance-file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.finance-opex-form {
  margin-bottom: 18px;
}
.finance-opex-form__extra {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-top: 4px;
}
.finance-opex-note {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-opex-note input {
  height: 40px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text-dark);
}

/* Currencies tab */
.finance-rate-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.finance-rate-chip {
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-rate-chip__pair {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-rate-chip__value {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-wine);
  font-weight: 500;
  line-height: 1.1;
}
.finance-rate-chip__date {
  font-size: 11px;
  color: var(--text-muted);
}
.finance-inline-sync {
  display: inline;
  margin: 0;
}
tr.is-rate-test td {
  color: var(--text-muted);
  opacity: 0.75;
}
tr.is-rate-test .amount-strong {
  color: var(--text-muted);
}

/* Control / quality tab */
.finance-quality-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 720px) {
  .finance-quality-summary { grid-template-columns: 1fr; }
}
.finance-quality-stat {
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-quality-stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-quality-stat__value {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.1;
  color: var(--color-wine);
  font-weight: 500;
}
.finance-quality-stat.is-danger {
  border-color: rgba(160, 58, 43, 0.35);
  background: var(--danger-soft, #f7e8e5);
}
.finance-quality-stat.is-danger .finance-quality-stat__value { color: var(--danger); }
.finance-quality-stat.is-warning {
  border-color: rgba(196, 154, 74, 0.4);
  background: #f5ecd8;
}
.finance-quality-stat.is-warning .finance-quality-stat__value { color: #8a6a2a; }
.finance-quality-stat.is-ok .finance-quality-stat__value { color: var(--success, #4a6b4a); }

.finance-quality-issues {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.finance-quality-issue {
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  padding: 0;
  overflow: hidden;
}
.finance-quality-issue--critical,
.finance-quality-issue--danger {
  border-left: 3px solid var(--danger);
}
.finance-quality-issue--warning {
  border-left: 3px solid #c49a4a;
}
.finance-quality-issue--ok,
.finance-quality-issue--info {
  border-left: 3px solid var(--border-strong, #c9b9a8);
}
.finance-quality-issue__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-thin);
  background: var(--bg-main);
}
.finance-quality-issue__head h3 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine);
}
.finance-quality-issue__head p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 52rem;
}
.finance-quality-issue__count {
  flex-shrink: 0;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-thin);
  background: #fff;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-wine);
  font-weight: 500;
}
.finance-quality-issue__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.finance-quality-issue__list li {
  border-bottom: 1px solid var(--border-thin);
}
.finance-quality-issue__list li:last-child {
  border-bottom: none;
}
.finance-quality-issue__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
}
.finance-quality-issue__link:hover {
  background: var(--bg-main);
}
.finance-quality-issue__title {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.35;
}
.finance-quality-issue__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.finance-quality-issue__meta b {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-wine);
  font-variant-numeric: tabular-nums;
}
.finance-quality-issue__meta small {
  font-size: 11px;
  color: var(--text-muted);
}

.finance-closing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .finance-closing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .finance-closing-grid { grid-template-columns: 1fr; }
}
.finance-closing-card {
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
}
.finance-closing-card__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-closing-card__value {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-wine);
  font-weight: 500;
  line-height: 1.2;
}
.finance-closing-card__hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.finance-closing-card--danger,
.finance-closing-card--critical {
  border-color: rgba(160, 58, 43, 0.3);
  background: var(--danger-soft, #f7e8e5);
}
.finance-closing-card--warning {
  border-color: rgba(196, 154, 74, 0.35);
  background: #f5ecd8;
}
.finance-closing-card--ok {
  border-color: rgba(110, 140, 110, 0.3);
}

/* Analytics tab */
.finance-analytics-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}
@media (max-width: 1100px) {
  .finance-analytics-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.finance-analytics-filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.finance-analytics-filters input,
.finance-analytics-filters select {
  height: 40px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 12.5px;
  font-family: var(--font-sans);
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.finance-analytics-filters input:focus,
.finance-analytics-filters select:focus {
  outline: none;
  border-color: var(--color-gold);
}
.finance-analytics-filters__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  grid-column: 1 / -1;
}

.finance-analytics-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
@media (max-width: 900px) {
  .finance-analytics-kpi { grid-template-columns: 1fr 1fr; }
}

.finance-analytics-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  padding: 8px 4px 0;
  overflow-x: auto;
}
.finance-analytics-bar {
  flex: 1 1 56px;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.finance-analytics-bar__track {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.02));
  border-bottom: 1px solid var(--border-thin);
}
.finance-analytics-bar__track i {
  display: block;
  width: 70%;
  max-width: 36px;
  background: linear-gradient(180deg, var(--color-wine), #8a3a3a);
  min-height: 4px;
}
.finance-analytics-bar b {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}
.finance-analytics-bar span {
  font-size: 11px;
  color: var(--text-dark);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.finance-analytics-slices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
/* З урахуванням постійного сайдбару робоча ширина контенту стає вузькою
   ще на 1024px, тому складні звітні картки складаємо раніше. */
@media (max-width: 1200px) {
  .finance-analytics-slices { grid-template-columns: 1fr 1fr; }
}
.contract-type-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.contract-type-choice{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border-thin);background:#fff;cursor:pointer;text-transform:none!important;letter-spacing:normal!important}.contract-type-choice:has(input:checked){border-color:var(--color-wine);background:color-mix(in srgb,var(--color-wine) 5%,#fff)}.contract-type-choice input{appearance:none;-webkit-appearance:none;width:16px;height:16px;min-height:16px;margin:2px 0 0;border:1px solid var(--color-gold);border-radius:50%;background:#fff;flex:0 0 16px}.contract-type-choice input:checked{border:5px solid var(--color-wine)}.contract-type-choice strong{display:block;color:var(--text-dark);font-size:12px}.contract-type-choice small{display:block;margin-top:3px;color:var(--text-muted);font-size:10px;font-weight:400}@media(max-width:700px){.contract-type-choices{grid-template-columns:1fr}}
.contract-type-field{display:flex;flex-direction:column;gap:7px}.docs-field-label{color:var(--text-dark);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}

/* Internal finance: compact management breakdown sourced from the shared journal. */
.internal-expense-breakdown{margin:0 0 18px;border:1px solid var(--border-thin);background:var(--bg-card)}
.internal-expense-breakdown__head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:19px 20px 16px;border-bottom:1px solid var(--border-thin)}
.internal-expense-breakdown__head .eyebrow{margin:0;color:var(--color-gold);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.internal-expense-breakdown__head h2{margin:4px 0 0;color:var(--color-wine);font-family:var(--font-serif);font-size:24px;font-weight:500}
.internal-expense-breakdown__head p{max-width:480px;margin:0;color:var(--text-muted);font-size:11.5px;line-height:1.5}
.internal-expense-breakdown__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.internal-expense-breakdown__item{display:grid;align-content:start;gap:7px;min-height:130px;padding:17px 19px;border-right:1px solid var(--border-thin)}
.internal-expense-breakdown__item:last-child{border-right:0}
.internal-expense-breakdown__item>span{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.internal-expense-breakdown__item strong{color:var(--color-wine);font-family:var(--font-serif);font-size:21px;font-weight:500;line-height:1.2}
.internal-expense-breakdown__item small,.internal-expense-breakdown__item em{color:var(--text-muted);font-size:10px;line-height:1.4}
.internal-expense-breakdown__item em{font-style:normal}
.internal-expense-breakdown__item--salary{background:color-mix(in srgb,var(--color-gold-light) 50%,#fff)}
.internal-expense-breakdown__item--commission{background:color-mix(in srgb,var(--color-wine) 3%,#fff)}
.payroll-salary-card .section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.payroll-salary-card .section-heading>p{max-width:430px;margin:0;color:var(--text-muted);font-size:12px;line-height:1.48}.payroll-salary-card .payroll-filter{margin:16px 0 0}.payroll-salary-card .payroll-filter label{display:grid;gap:7px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.payroll-salary-card .payroll-filter select{min-width:145px;min-height:40px;border:1px solid var(--border-thin);border-radius:0;background:#fff;color:var(--text-dark);font:400 13px var(--font-sans,Arial,sans-serif)}
@media(max-width:1050px){.internal-expense-breakdown__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-expense-breakdown__item:nth-child(2){border-right:0}.internal-expense-breakdown__item:nth-child(-n+2){border-bottom:1px solid var(--border-thin)}}
@media(max-width:700px){.internal-expense-breakdown__head,.payroll-salary-card .section-heading{align-items:flex-start;flex-direction:column}.internal-expense-breakdown__grid{grid-template-columns:1fr}.internal-expense-breakdown__item{border-right:0;border-bottom:1px solid var(--border-thin)}.internal-expense-breakdown__item:last-child{border-bottom:0}}
@media (max-width: 640px) {
  .finance-analytics-slices { grid-template-columns: 1fr; }
}
.finance-analytics-slice h3 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine);
}
.finance-analytics-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.finance-analytics-rank li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-thin);
}
.finance-analytics-rank li:last-child { border-bottom: none; }
.finance-analytics-rank__label {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.35;
}
.finance-analytics-rank__nums {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.finance-analytics-rank__nums b {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-wine);
  font-variant-numeric: tabular-nums;
}
.finance-analytics-rank__nums small {
  font-size: 11px;
  color: var(--text-muted);
}

/* Strategy tab */
.finance-strategy-signals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finance-strategy-signal {
  border: 1px solid var(--border-thin);
  border-left-width: 3px;
  background: var(--bg-main);
  padding: 14px 16px;
}
.finance-strategy-signal--ok,
.finance-strategy-signal--info {
  border-left-color: var(--success, #4a6b4a);
}
.finance-strategy-signal--warning {
  border-left-color: #c49a4a;
  background: #f5ecd8;
}
.finance-strategy-signal--danger,
.finance-strategy-signal--critical {
  border-left-color: var(--danger);
  background: var(--danger-soft, #f7e8e5);
}
.finance-strategy-signal__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
}
.finance-strategy-signal__head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-wine);
}
.finance-strategy-signal__head strong {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-wine);
  font-variant-numeric: tabular-nums;
}
.finance-strategy-signal p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.finance-strategy-abc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .finance-strategy-abc { grid-template-columns: 1fr; }
}
.finance-strategy-abc-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine);
}
.finance-strategy-abc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.finance-strategy-abc-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-thin);
}
.finance-strategy-abc-list li:last-child { border-bottom: none; }
.finance-abc-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-thin);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-wine);
  background: #fff;
}
.finance-abc-badge--a {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold, #c4a35a);
}
.finance-abc-badge--b {
  background: #f5ecd8;
  border-color: #c49a4a;
  color: #8a6a2a;
}
.finance-strategy-abc-body {
  flex: 1;
  min-width: 0;
}
.finance-strategy-abc-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.finance-strategy-abc-top strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.finance-strategy-abc-top b {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-wine);
  font-variant-numeric: tabular-nums;
}
.finance-strategy-abc-body small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ===== Tasks module ===== */
.task-list-card {
  padding: 0 !important;
  overflow: hidden;
}
.task-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-thin);
  margin: 0;
}
.task-scope-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 14px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.task-scope-tab b {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--color-gold-light, #F4EFE6);
  padding: 2px 7px;
  border-radius: 20px;
}
.task-scope-tab.is-active {
  color: var(--color-wine);
}
.task-scope-tab.is-active b {
  background: var(--color-wine);
  color: #fff;
}
.task-scope-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-gold);
}
.task-scope-tab.is-zero { opacity: .45; }
.task-scope-tab.is-danger b { color: var(--danger); }

.task-hero {
  padding: 22px 24px 8px;
}
.task-hero__title h2 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-wine);
}
.task-hero__title p {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.task-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-thin);
  border: 1px solid var(--border-thin);
}
@media (max-width: 900px) {
  .task-kpi-grid { grid-template-columns: 1fr 1fr; }
}
.task-kpi {
  background: var(--bg-card, #fff);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background .15s ease;
}
.task-kpi:hover { background: var(--color-gold-light, #F4EFE6); }
.task-kpi__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.task-kpi__value {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--color-wine);
  line-height: 1;
  font-weight: 500;
}
.task-kpi small {
  font-size: 11.5px;
  color: var(--text-muted);
}
.task-kpi.is-overdue::before,
.task-kpi.is-attention::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.task-kpi.is-overdue::before { background: var(--danger); }
.task-kpi.is-overdue .task-kpi__value { color: var(--danger); }
.task-kpi.is-attention::before { background: var(--color-gold); }
.task-kpi.is-attention .task-kpi__value { color: #8a6a2a; }

.task-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1.1fr 1.1fr auto;
  gap: 14px;
  align-items: end;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-thin);
  margin: 16px 0 0;
}
@media (max-width: 900px) {
  .task-filter-bar { grid-template-columns: 1fr 1fr; }
}
.task-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.task-filter-bar input,
.task-filter-bar select {
  height: 38px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.task-filter-bar input:focus,
.task-filter-bar select:focus {
  outline: none;
  border-color: var(--color-gold);
}

.task-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px 4px;
}
.task-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}
.task-chip b {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 11px;
}
.task-chip:hover { border-color: var(--color-gold); }
.task-chip.is-active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: #fff;
}
.task-chip.is-active b { color: var(--color-gold); }
.task-chip.is-zero { opacity: .45; }

.task-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--color-gold-light, #F4EFE6);
}
.task-list-toolbar h2 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-wine);
}
.task-list-toolbar p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.task-list-toolbar p span {
  white-space: nowrap;
}
.task-list-toolbar p span + span {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--border-thin);
}
.task-list-toolbar p b {
  color: var(--text-dark);
  font-weight: 600;
}

.task-bulk-panel {
  margin: 12px 24px;
  padding: 14px 16px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  display: none;
}
.task-bulk-panel.is-visible,
.task-bulk-panel-clear.is-visible {
  display: block;
}
.task-bulk-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  margin-bottom: 12px;
}
.task-bulk-head strong {
  font-size: 13px;
  color: var(--color-wine);
}
.task-bulk-head span {
  font-size: 12px;
  color: var(--text-muted);
}
.task-bulk-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}
.task-bulk-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-thin);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.task-bulk-action b {
  font-size: 12px;
  color: var(--color-wine);
}
.task-bulk-action small {
  font-size: 11px;
  color: var(--text-muted);
}
.task-bulk-action-primary {
  background: var(--color-wine);
  border-color: var(--color-wine);
}
.task-bulk-action-primary b,
.task-bulk-action-primary small { color: #fff; }
.task-bulk-action-primary small { opacity: .8; }
.task-bulk-action-danger {
  border-color: rgba(160, 58, 43, 0.35);
}
.task-bulk-action-danger b { color: var(--danger); }
.task-bulk-control label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 5px;
}
.task-bulk-control > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.task-bulk-control select {
  height: 36px;
  border: 1px solid var(--border-thin);
  background: #fff;
  padding: 0 10px;
  font-size: 12.5px;
  min-width: 120px;
}

.task-list-card .table-wrap,
.task-list-card .entity-table-wrap {
  padding: 0 12px 12px;
}
.task-list-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.task-list-card thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-thin);
}
.task-list-card tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-thin);
  vertical-align: top;
}
.task-list-card tr.is-overdue {
  background: rgba(247, 232, 229, 0.45);
}
.task-title-cell strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.task-title-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.task-object-link {
  display: block;
  text-decoration: none;
  margin-bottom: 4px;
}
.task-object-link span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.task-object-link strong {
  font-size: 12.5px;
  color: var(--color-wine);
  font-weight: 600;
}
.task-created-line {
  font-size: 12px;
  color: var(--text-muted);
}
.status-pill.priority-urgent,
.status-pill.urgent {
  background: var(--color-wine);
  color: #fff;
  border-color: var(--color-wine);
}
.status-pill.priority-high {
  background: var(--color-gold-light, #F4EFE6);
  color: #8a6a2a;
  border-color: var(--color-gold);
}
.status-pill.priority-normal,
.status-pill.priority-low {
  background: transparent;
  border-color: var(--border-thin);
  color: var(--text-muted);
}

.task-form-dialog {
  border: 1px solid var(--border-thin);
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  background: var(--bg-card, #fff);
}
.task-form-dialog::backdrop {
  background: rgba(42, 35, 36, 0.45);
}
.task-form-card {
  padding: 24px;
  border: none;
  box-shadow: none;
}
.task-form-card h2 {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-wine);
}
.task-form-card .stack-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.task-form-card .stack-form input,
.task-form-card .stack-form select {
  height: 40px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text-dark);
  font-family: var(--font-sans);
}
.task-form-card .actions-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.task-dialog-close-form {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
}
.task-dialog-close-form button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-thin);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
}
.task-form-dialog {
  position: relative;
}

.task-menu-trigger {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-thin);
  background: #fff;
  cursor: pointer;
  color: var(--color-wine);
  font-size: 16px;
  line-height: 1;
}
.task-menu-panel {
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--border-thin);
  box-shadow: 0 8px 24px rgba(42, 35, 36, 0.12);
  padding: 6px 0;
  z-index: 50000;
}
.task-menu-panel.is-task-menu-floating {
  position: fixed !important;
  margin: 0;
  right: auto;
  bottom: auto;
}
.task-menu-panel a,
.task-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-dark);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.task-menu-panel a:hover,
.task-menu-panel button:hover {
  background: var(--bg-main);
}

.task-list-card .pagination,
.task-list-card nav.pagination {
  padding: 16px 24px 20px;
}

/* Task card rows (prototype) */
.task-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 24px 8px;
}
.task-rows-select-all {
  padding: 0 0 4px;
}
.task-rows-select-all label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.task-rows-select-all input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-wine);
}
.task-rows-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-thin);
  background: var(--bg-main);
}

.task-row {
  position: relative;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-thin);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.task-row:hover {
  border-color: var(--color-gold);
  box-shadow: 0 6px 20px rgba(88, 24, 37, 0.06);
}
.task-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--border-thin);
}
.task-row.status-urgent::before { background: var(--color-wine); }
.task-row.status-high::before { background: var(--color-gold); }
.task-row.status-normal::before,
.task-row.status-low::before { background: var(--border-thin); }
.task-row.is-overdue {
  background: rgba(247, 232, 229, 0.35);
}

.task-row-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(200px, 0.85fr) minmax(120px, 0.4fr);
  gap: 18px;
  align-items: center;
  padding: 18px 52px 18px 22px;
}
@media (max-width: 1100px) {
  .task-row-main {
    grid-template-columns: 1fr 1fr;
  }
  .task-row-status {
    grid-column: 1 / -1;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 720px) {
  .task-row-main { grid-template-columns: 1fr; padding-right: 48px; }
}

.task-row-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.task-doc-chip {
  font-family: var(--font-serif);
  font-size: 11.5px;
  color: var(--color-wine);
  letter-spacing: .02em;
  background: var(--color-gold-light, #F4EFE6);
  padding: 2px 8px;
  border: 1px solid var(--color-gold);
}
.task-svc-tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
}
.task-row-title {
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--text-dark);
  letter-spacing: .01em;
  margin-bottom: 6px;
  line-height: 1.3;
}
.task-row-people {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.task-row-people b {
  color: var(--text-muted);
  font-weight: 600;
}
.task-row-people a {
  color: var(--color-wine);
  text-decoration: none;
  font-weight: 500;
}
.task-row-people a:hover { text-decoration: underline; }
.task-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.task-row-meta span + span {
  position: relative;
  padding-left: 14px;
}
.task-row-meta span + span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-thin);
}
.task-row-meta .is-overdue-text {
  color: var(--danger);
  font-weight: 600;
}

.task-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.task-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid transparent;
}
.task-pill--urgent {
  background: var(--color-wine);
  color: #fff;
}
.task-pill--high {
  background: var(--color-gold-light, #F4EFE6);
  color: #8a6a2a;
  border-color: var(--color-gold);
}
.task-pill--normal,
.task-pill--low {
  background: transparent;
  border-color: var(--border-thin);
  color: var(--text-muted);
}
.task-pill--stage {
  background: transparent;
  border-color: var(--border-thin);
  color: var(--text-muted);
}
.task-pill--clarify {
  background: var(--color-gold-light, #F4EFE6);
  color: #8a6a2a;
  border-color: var(--color-gold);
}

.task-owner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 12px;
}
.task-owner-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.task-owner-field b {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
}
.task-owner-field span { color: var(--text-dark); }
.task-owner-field span.is-empty {
  color: #B4ACA6;
  font-style: italic;
}

.task-row-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  min-height: 48px;
}
.task-pay-status {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 5px 12px;
  border: 1px solid transparent;
}
.task-pay-status.is-due {
  color: var(--danger);
  border-color: var(--danger);
  background: #F7ECEA;
}
.task-pay-status.is-ok,
.task-pay-status.is-paid {
  color: var(--success, #3F5B45);
  border-color: var(--success, #3F5B45);
  background: #EEF2EC;
}
.task-pay-status.is-progress {
  color: #8a6a2a;
  border-color: var(--color-gold);
  background: var(--color-gold-light, #F4EFE6);
}
.task-pay-status.is-cancelled {
  color: var(--text-muted);
  border-color: var(--border-thin);
}

/* Shared branded check controls.  These stay real form inputs, but no browser-
   specific blue checkmark leaks into operational forms.  The selectors are
   deliberately limited to visible form controls; hidden state fields and
   specialized controls keep their own behaviour. */
.chip-checkbox input[type="checkbox"],
.task-row-check input[type="checkbox"],
.preset-check input[type="checkbox"],
.docs-check-set input[type="checkbox"],
.docs-check-chip input[type="checkbox"],
.document-templates-page .check-label input[type="checkbox"],
.document-settings-page .check-label input[type="checkbox"],
.exchange-rates-page .check-label input[type="checkbox"],
.api-settings-page .check-label input[type="checkbox"],
.claude-api-settings-page .check-label input[type="checkbox"],
.license-page .check-label input[type="checkbox"],
.backup-page .check-label input[type="checkbox"],
.users-page .checkbox-line input[type="checkbox"],
.profile-page .checkbox-line input[type="checkbox"],
.booking-page .form-step[data-step="2"] .booking-service-pax-item input[type="checkbox"],
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-row input[type="checkbox"] {
  -webkit-appearance:none !important;
  appearance:none !important;
  display:inline-grid !important;
  place-content:center !important;
  width:17px !important;
  min-width:17px !important;
  max-width:17px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--border-thin) !important;
  border-radius:0 !important;
  background-color:#fff !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:13px !important;
  box-shadow:none !important;
  cursor:pointer !important;
  vertical-align:middle;
}
.chip-checkbox input[type="checkbox"]:checked,
.task-row-check input[type="checkbox"]:checked,
.preset-check input[type="checkbox"]:checked,
.docs-check-set input[type="checkbox"]:checked,
.docs-check-chip input[type="checkbox"]:checked,
.document-templates-page .check-label input[type="checkbox"]:checked,
.document-settings-page .check-label input[type="checkbox"]:checked,
.exchange-rates-page .check-label input[type="checkbox"]:checked,
.api-settings-page .check-label input[type="checkbox"]:checked,
.claude-api-settings-page .check-label input[type="checkbox"]:checked,
.license-page .check-label input[type="checkbox"]:checked,
.backup-page .check-label input[type="checkbox"]:checked,
.users-page .checkbox-line input[type="checkbox"]:checked,
.profile-page .checkbox-line input[type="checkbox"]:checked,
.booking-page .form-step[data-step="2"] .booking-service-pax-item input[type="checkbox"]:checked,
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-row input[type="checkbox"]:checked {
  border-color:var(--color-wine) !important;
  background-color:var(--color-wine) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.3 11.4 13 4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.chip-checkbox input[type="checkbox"]:focus-visible,
.task-row-check input[type="checkbox"]:focus-visible,
.preset-check input[type="checkbox"]:focus-visible,
.docs-check-set input[type="checkbox"]:focus-visible,
.docs-check-chip input[type="checkbox"]:focus-visible,
.document-templates-page .check-label input[type="checkbox"]:focus-visible,
.document-settings-page .check-label input[type="checkbox"]:focus-visible,
.exchange-rates-page .check-label input[type="checkbox"]:focus-visible,
.api-settings-page .check-label input[type="checkbox"]:focus-visible,
.claude-api-settings-page .check-label input[type="checkbox"]:focus-visible,
.license-page .check-label input[type="checkbox"]:focus-visible,
.backup-page .check-label input[type="checkbox"]:focus-visible,
.users-page .checkbox-line input[type="checkbox"]:focus-visible,
.profile-page .checkbox-line input[type="checkbox"]:focus-visible,
.booking-page .form-step[data-step="2"] .booking-service-pax-item input[type="checkbox"]:focus-visible,
.booking-page .form-step[data-step="2"] .booking-service-pax-list .rooming-tourist-row input[type="checkbox"]:focus-visible {
  outline:2px solid var(--color-gold) !important;
  outline-offset:2px;
}

.task-row-actions {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  opacity: .6;
  transition: opacity .15s ease;
}
.task-row:hover .task-row-actions { opacity: 1; }
.task-row-check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  margin: 0;
  cursor: pointer;
}
.task-row-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-wine);
}

/* Hide old table-only mobile duplicate when using cards - keep mobile list for small screens if present */
@media (min-width: 821px) {
  .task-mobile-list { display: none !important; }
}

/* ===== Tasks compact density (v4) ===== */
.task-list-card.luxury-card,
.task-list-card {
  padding: 0 !important;
}
.task-scope-tabs {
  gap: 16px 22px;
  padding: 0 20px;
}
.task-scope-tab {
  padding: 12px 0 11px;
  font-size: 11px;
}
.task-hero {
  padding: 16px 20px 4px;
}
.task-hero__title h2 {
  font-size: 17px;
  margin-bottom: 2px;
}
.task-hero__title p {
  margin-bottom: 12px;
  font-size: 12px;
}
.task-kpi {
  padding: 14px 16px;
  gap: 4px;
}
.task-kpi__value {
  font-size: 22px;
}
.task-kpi small {
  font-size: 11px;
}
.task-filter-bar {
  gap: 12px;
  padding: 12px 20px;
  margin-top: 12px;
}
.task-filter-bar input,
.task-filter-bar select {
  height: 36px;
  font-size: 12.5px;
}
.task-chip-row {
  gap: 6px;
  padding: 10px 20px 2px;
}
.task-chip {
  height: 28px;
  padding: 0 11px;
  font-size: 11.5px;
}
.task-list-toolbar {
  padding: 12px 20px 8px;
}
.task-list-toolbar h2 {
  font-size: 15px;
}

.task-rows {
  gap: 6px;
  padding: 8px 16px 6px;
}
.task-row {
  border-radius: 0;
}
.task-row-main {
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 0.75fr) minmax(100px, 0.35fr);
  gap: 12px 16px;
  align-items: center;
  padding: 12px 48px 12px 16px;
}
.task-row-kicker {
  margin-bottom: 3px;
  gap: 6px;
}
.task-doc-chip {
  font-size: 10.5px;
  padding: 1px 6px;
}
.task-svc-tag {
  font-size: 9.5px;
  letter-spacing: .07em;
}
.task-row-title {
  font-size: 14px;
  margin-bottom: 3px;
  line-height: 1.25;
}
.task-row-people {
  gap: 1px;
  font-size: 12px;
  margin-bottom: 3px;
}
.task-row-meta {
  gap: 4px 12px;
  font-size: 11px;
}
.task-row-badges {
  gap: 4px;
  margin-bottom: 8px;
}
.task-pill {
  font-size: 9.5px;
  padding: 3px 8px;
  letter-spacing: .05em;
}
.task-owner-grid {
  gap: 2px 12px;
  font-size: 11.5px;
}
.task-owner-field b {
  font-size: 9px;
}
.task-row-status {
  min-height: 0;
}
.task-pay-status {
  font-size: 10px;
  padding: 4px 9px;
  letter-spacing: .05em;
}
.task-row-actions {
  right: 8px;
  top: 8px;
  gap: 4px;
}
.task-row-check {
  width: 28px;
  height: 28px;
}
.task-menu-trigger {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

/* Edit / create dialog: centered modal, not full-width strip */
.task-form-dialog {
  border: 1px solid var(--border-thin);
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--bg-card, #fff);
  margin: auto;
}
.task-form-dialog::backdrop {
  background: rgba(42, 35, 36, 0.4);
}
.task-form-card {
  padding: 20px 22px 18px;
}
.task-form-card h2 {
  font-size: 17px;
  margin-bottom: 12px;
}
.task-form-card .stack-form label {
  margin-bottom: 10px;
  gap: 4px;
}
.task-form-card .stack-form input,
.task-form-card .stack-form select {
  height: 36px;
  font-size: 12.5px;
}
.task-form-card .grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.task-form-card .actions-row {
  margin-top: 4px;
  gap: 8px;
}
.task-dialog-close-form {
  top: 10px;
  right: 10px;
}
.task-dialog-close-form button {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

@media (max-width: 1100px) {
  .task-row-main {
    grid-template-columns: 1fr 1fr;
    padding-right: 48px;
  }
  .task-row-status {
    grid-column: 1 / -1;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* Focused task edit (no queue behind) */
.task-form-card--focused {
  max-width: 560px;
  margin: 0 auto 24px;
  padding: 24px 28px !important;
}
.task-form-focused-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-thin);
}
.task-form-focused-head .eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.task-form-focused-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-wine);
}
.task-module-grid:has(.task-form-card--focused) {
  display: block;
}

/* ===== Calendar module ===== */
.cal-card {
  padding: 0 !important;
  overflow: hidden;
  margin-bottom: 24px;
}
.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px 18px;
  gap: 16px;
}
.cal-title-block {
  text-align: center;
}
.cal-title-block h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-wine);
  font-weight: 500;
  letter-spacing: .02em;
}
.cal-title-block p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.cal-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 1px;
  background: var(--border-thin);
  border-top: 1px solid var(--border-thin);
  border-bottom: 1px solid var(--border-thin);
}
.cal-summary-cell {
  background: var(--bg-card, #fff);
  padding: 16px 24px;
}
.cal-summary-cell .cs-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.cal-summary-cell .cs-value {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--color-wine);
  line-height: 1;
}
.cal-summary-cell .cs-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.cal-legend {
  background: var(--bg-card, #fff);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cal-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.load-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  display: inline-block;
}
.load-dot.low { background: var(--success, #3F5B45); }
.load-dot.medium { background: var(--color-gold, #C5A880); }
.load-dot.high { background: #A15A2C; }
.load-dot.critical { background: var(--danger, #A03A2B); }

.cal-filters {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-thin);
  padding: 16px 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.cal-filters .filter-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cal-filters .filter-group > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
  width: 108px;
  flex-shrink: 0;
}
.cal-filters .chip-set {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-filters .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  color: var(--text-dark);
  font-size: 12px;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.cal-filters .filter-chip input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 15px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.cal-filters .filter-chip input::before {
  content: '';
  width: 7px;
  height: 7px;
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--color-wine);
}
.cal-filters .filter-chip input:checked {
  border-color: var(--color-wine);
  background: var(--color-gold-light, #F4EFE6);
}
.cal-filters .filter-chip input:checked::before {
  transform: scale(1);
}
.cal-filters .filter-chip input:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.cal-filters .filter-chip:hover {
  border-color: var(--color-gold);
}
.cal-filters .filter-row-2 {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.cal-filters .filter-row-2 label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.cal-filters .filter-row-2 select {
  height: 36px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  padding: 0 12px;
  font-size: 12.5px;
  color: var(--text-dark);
  min-width: 180px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-family: var(--font-sans);
}
.cal-filters .filter-row-2 .btn {
  height: 36px;
  padding: 0 18px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-weekday {
  text-align: center;
  padding: 12px 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--text-dark);
  background: var(--bg-card, #fff);
}
.cal-weekday:nth-child(6),
.cal-weekday:nth-child(7) {
  color: var(--color-wine);
}

.cal-day {
  min-height: 148px;
  border-right: 1px solid var(--border-thin);
  border-bottom: 1px solid var(--border-thin);
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-card, #fff);
}
.cal-day.muted {
  background: var(--bg-main);
}
.cal-day:nth-child(7n) {
  border-right: none;
}
.cal-day.load-low { background: #EEF2EC; }
.cal-day.load-medium { background: #FBF3E4; }
.cal-day.load-high { background: #F8ECE1; }
.cal-day.load-critical { background: #FAF0EE; }
.cal-day.today {
  box-shadow: inset 0 0 0 2px var(--color-wine);
  z-index: 1;
}

.cal-date-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cal-date {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-dark);
}
.load-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--text-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.load-low .load-badge { background: var(--success, #3F5B45); }
.load-medium .load-badge { background: #8A5A00; }
.load-high .load-badge { background: #A15A2C; }
.load-critical .load-badge { background: var(--danger, #A03A2B); }

.day-flow {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.flow-pill {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid transparent;
}
.flow-pill.in {
  background: #EEF2EC;
  color: var(--success, #3F5B45);
  border-color: rgba(63, 91, 69, 0.28);
}
.flow-pill.out {
  background: var(--color-gold-light, #F4EFE6);
  color: var(--color-wine);
  border-color: var(--color-gold);
}

.cal-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  overflow: hidden;
}
.cal-event {
  display: block;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-thin);
  border-left: 2px solid var(--color-gold);
  padding: 4px 7px;
  text-decoration: none;
  color: inherit;
  line-height: 1.25;
}
.cal-event:hover {
  border-left-color: var(--color-wine);
  background: var(--color-gold-light, #F4EFE6);
}
.cal-event .ev-num {
  font-family: var(--font-serif);
  font-size: 10px;
  color: var(--color-wine);
  margin-right: 3px;
}
.cal-event .ev-route {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
}
.cal-event .ev-name {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
}
.cal-event .ev-meta {
  display: block;
  font-size: 9.5px;
  color: var(--text-muted);
  opacity: .85;
}
.cal-more {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-wine);
  text-decoration: none;
  margin-top: 1px;
}
.cal-more:hover {
  text-decoration: underline;
}

@media (max-width: 1200px) {
  .cal-summary {
    grid-template-columns: 1fr 1fr;
  }
  .cal-filters .filter-group > span {
    width: auto;
  }
  .cal-day {
    min-height: 120px;
  }
}
@media (max-width: 900px) {
  .cal-toolbar {
    flex-direction: column;
    gap: 10px;
  }
  .cal-grid {
    font-size: 12px;
  }
  .cal-event .ev-name,
  .cal-event .ev-meta {
    display: none;
  }
}

/* ===== Calendar v2: panel, compact events, my calendar ===== */
.cal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.cal-main--panel .cal-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}
@media (max-width: 1100px) {
  .cal-main--panel .cal-layout {
    grid-template-columns: 1fr;
  }
}

.cal-toolbar-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 140px;
}
.cal-toolbar-nav .btn {
  min-width: 36px;
  padding: 8px 12px;
  height: auto;
}
.cal-toolbar-nav .btn.is-current {
  border-color: var(--color-wine);
  color: var(--color-wine);
}
.cal-toolbar-spacer {
  min-width: 140px;
}

.cal-filters .filter-chip.is-active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: #fff;
}
a.filter-chip {
  text-decoration: none;
}

.cal-day {
  min-height: 132px;
}
.cal-day.is-selected {
  box-shadow: inset 0 0 0 2px var(--color-gold);
  z-index: 1;
}
.cal-day-hit {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cal-day-hit:hover .cal-date {
  color: var(--color-wine);
}

.cal-event--compact {
  padding: 3px 6px 3px 0;
  border: none;
  border-left: none;
  background: transparent;
  display: flex;
  align-items: stretch;
  gap: 0;
  line-height: 1.2;
}
.cal-event--compact:hover {
  background: var(--color-gold-light, #F4EFE6);
}
.cal-event-stripe {
  width: 2px;
  flex-shrink: 0;
  background: var(--color-gold);
  margin-right: 6px;
  align-self: stretch;
}
.cal-event--compact.status-confirmed .cal-event-stripe,
.cal-event--compact.status-paid .cal-event-stripe {
  background: var(--success, #3F5B45);
}
.cal-event--compact.status-new .cal-event-stripe {
  background: var(--color-gold);
}
.cal-event--compact.status-cancelled .cal-event-stripe {
  background: var(--text-muted);
}
.cal-event--compact .ev-line {
  font-size: 10.5px;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cal-event--compact .ev-line b {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-wine);
  margin-right: 3px;
}
.cal-event--compact .ev-line em {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 400;
}

.cal-event--task {
  border-left: 2px solid #8a6a2a;
  background: #fbf7f0;
  padding: 3px 6px;
}
.cal-event--task.priority-urgent {
  border-left-color: var(--color-wine);
  background: #f7ecea;
}
.cal-event--task.priority-high {
  border-left-color: #A15A2C;
}
.cal-event--task .ev-line {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event--task .ev-line b {
  color: #8a6a2a;
  margin-right: 3px;
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* У календарі короткі події мають лишатися читабельними: вміст не виходить
   за клітинку, а довгі назви відкриваються натисканням на день. */
.cal-events > a {
  min-width: 0;
}
.cal-more {
  padding-top: 2px;
}

@media (max-width: 760px) {
  .cal-toolbar {
    padding: 16px;
  }
  .cal-summary-cell,
  .cal-legend,
  .cal-filters {
    padding-left: 16px;
    padding-right: 16px;
  }
  .cal-summary {
    grid-template-columns: 1fr;
  }
  .cal-legend {
    gap: 10px;
  }
  .cal-filters .filter-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .cal-filters .filter-row-2 {
    align-items: stretch;
  }
  .cal-filters .filter-row-2 label,
  .cal-filters .filter-row-2 select,
  .cal-filters .filter-row-2 .btn {
    width: 100%;
  }
}

/* Day side panel */
.cal-day-panel {
  padding: 18px 18px 16px !important;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.cal-day-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-thin);
}
.cal-day-panel__head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-wine);
}
.cal-day-panel__head .eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cal-day-panel__head .field-note {
  margin: 4px 0 0;
}
.cal-day-panel__empty {
  padding: 12px 0;
}
.cal-day-panel__section {
  margin: 14px 0 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
}
.cal-day-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cal-day-panel__item {
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid var(--border-thin);
  border-left: 2px solid var(--color-gold);
}
.cal-day-panel__item.status-confirmed,
.cal-day-panel__item.status-paid {
  border-left-color: var(--success, #3F5B45);
}
.cal-day-panel__item.status-cancelled {
  border-left-color: var(--text-muted);
  opacity: .75;
}
.cal-day-panel__item--task {
  border-left-color: #8a6a2a;
}
.cal-day-panel__item--task.priority-urgent {
  border-left-color: var(--color-wine);
}
.cal-day-panel__item a {
  color: var(--color-wine);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.cal-day-panel__item a:hover {
  text-decoration: underline;
}
.cal-day-panel__item .row-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.cal-day-panel__item .row-sub a {
  font-weight: 500;
  font-size: inherit;
}
.flow-inline.in { color: var(--success, #3F5B45); }
.flow-inline.out { color: var(--color-wine); }
.cal-day-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-thin);
}

/* Calendar ON (in-service / mid-stay) */
.flow-pill.on {
  background: #e8eef5;
  color: #2c4a6e;
  border-color: rgba(44, 74, 110, 0.3);
}
.flow-pill.on.on-mid {
  background: #d9e4f0;
  font-weight: 800;
}
.cal-legend-sep {
  color: var(--border-thin);
  margin: 0 2px;
}
.cal-legend-pill {
  padding: 1px 5px !important;
  font-size: 8.5px !important;
  margin-right: 2px;
}
.cal-day.is-mid-stay {
  /* День без IN/OUT, але групи вже на місці — легка смуга зверху */
  box-shadow: inset 0 3px 0 0 rgba(44, 74, 110, 0.35);
}
.cal-day.is-mid-stay.today {
  box-shadow: inset 0 0 0 2px var(--color-wine), inset 0 3px 0 0 rgba(44, 74, 110, 0.35);
}
.cal-day.is-mid-stay.is-selected {
  box-shadow: inset 0 0 0 2px var(--color-gold), inset 0 3px 0 0 rgba(44, 74, 110, 0.35);
}

/* ===== Reports module luxury ===== */
.filter-strip.report-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  background: var(--bg-main);
  border: 1px solid var(--border-thin);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.report-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.report-filter-bar label select,
.report-filter-bar label input[type="date"],
.report-filter-bar label input[type="text"] {
  height: 34px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  min-width: 140px;
}
.report-filter-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}

.tabs-row.report-tabs-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: none;
}
.report-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 9px 16px;
  border: 1px solid var(--border-thin);
  color: var(--text-muted);
  text-decoration: none;
  background: var(--bg-card, #fff);
}
.report-tab-link:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}
.report-tab-link.active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.report-tab-badge {
  font-family: var(--font-serif);
  font-size: 10.5px;
  color: var(--color-wine);
  background: var(--color-gold-light, #F4EFE6);
  padding: 1px 7px;
  border: 1px solid var(--color-gold);
}
.report-tab-link.active .report-tab-badge {
  color: var(--color-gold);
  background: rgba(197,168,128,.16);
  border-color: rgba(197,168,128,.4);
}
.report-tab-badge.danger,
.report-tab-link .report-tab-badge.danger {
  color: #fff;
  background: var(--danger, #A03A2B);
  border-color: var(--danger, #A03A2B);
}

.sub-tabs-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.sub-tab-link {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 14px;
  border: 1px solid var(--border-thin);
  color: var(--text-muted);
  background: var(--bg-main);
  text-decoration: none;
}
.sub-tab-link:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}
.sub-tab-link.active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}

.luxury-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-thin);
  gap: 16px;
  flex-wrap: wrap;
}
.luxury-card .card-header h2,
.luxury-card .card-header h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-wine);
}
.luxury-card .card-header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.dashboard-grid.reports-summary,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-thin);
  border: 1px solid var(--border-thin);
  margin-bottom: 18px;
}
.metric-card {
  background: var(--bg-card, #fff);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.metric-card span,
.metric-card .fin-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.metric-card strong,
.metric-card .fin-value {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text-dark);
  font-weight: 500;
  line-height: 1.15;
}
.metric-card p,
.metric-card .fin-note,
.metric-card small {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}
.metric-card.danger-card strong,
.metric-card.danger-card .fin-value {
  color: var(--danger, #A03A2B);
}
.metric-card.warning-card {
  box-shadow: inset 0 3px 0 var(--color-gold, #C8A66A);
}
.metric-card.warning-card strong {
  color: var(--color-wine, #651927);
}
.metric-card.report-metric-link:hover {
  background: var(--color-gold-light, #F4EFE6);
}

.executive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(88px, auto);
  grid-auto-flow: dense;
  gap: 1px;
  background: var(--border-thin);
  border: 1px solid var(--border-thin);
  margin-bottom: 16px;
}
.executive-hero {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--color-gold-light, #F4EFE6);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.executive-hero span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  font-weight: 600;
}
.executive-hero strong {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--color-wine);
  font-weight: 500;
}
.executive-hero p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.executive-hero.danger {
  background: var(--danger-soft, #FAF2F0);
}
.executive-hero.danger strong {
  color: var(--danger, #A03A2B);
}
.executive-signal {
  background: var(--bg-card, #fff);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.executive-signal:hover {
  background: var(--color-gold-light, #F4EFE6);
}
.executive-signal span {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
}
.executive-signal strong {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--text-dark);
  font-weight: 500;
}
.executive-signal small {
  font-size: 10.5px;
  color: var(--text-muted);
}
.executive-signal.ok strong { color: var(--success, #3F5B45); }
.executive-signal.bad strong { color: var(--danger, #A03A2B); }
.executive-signal.warn strong { color: var(--color-wine); }

.delta-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}
.delta-badge.up,
.delta-badge.pos { color: var(--success, #3F5B45); }
.delta-badge.down,
.delta-badge.neg { color: var(--danger, #A03A2B); }
.delta-badge.flat { color: var(--text-muted); }
.yoy-note { display: block; margin-top: 2px; }
.period-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--border-thin);
}
.period-note a {
  color: var(--color-wine);
}

/* Tables */
.table-scroll {
  overflow-x: auto;
}
.table-scroll table,
.reports-page table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.table-scroll th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  padding: 12px 10px;
  border-bottom: 1px solid var(--text-dark);
  font-weight: 600;
  white-space: nowrap;
}
.table-scroll td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border-thin);
  font-size: 12px;
  color: var(--text-dark);
  vertical-align: top;
}
.table-scroll tr:last-child td { border-bottom: none; }
.table-scroll tr.row-danger { background: var(--danger-soft, #FAF2F0); }
.table-scroll .row-title {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--color-wine);
}
.table-scroll .row-title a,
.table-primary-link {
  color: var(--color-wine);
  text-decoration: none;
  font-family: var(--font-serif);
}
.table-scroll .muted-note,
.table-scroll td span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}
.table-scroll .amount-strong {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-dark);
}
.empty-row {
  text-align: center;
  color: var(--text-muted);
  padding: 24px !important;
}
.danger-text { color: var(--danger, #A03A2B) !important; }

/* Risk chips */
.risk-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.risk-chip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
  width: 100%;
}
.risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  color: var(--text-dark);
  font-size: 12px;
  text-decoration: none;
}
.risk-chip:hover { border-color: var(--color-gold); }
.risk-chip.active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.risk-chip.danger {
  border-color: rgba(160, 58, 43, 0.35);
  color: var(--danger, #A03A2B);
}
.risk-chip.active.danger {
  background: var(--danger, #A03A2B);
  border-color: var(--danger, #A03A2B);
  color: #fff;
}

.risk-hero-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid var(--border-thin);
  background: var(--color-gold-light, #F4EFE6);
  margin-bottom: 18px;
}
.risk-hero-banner.danger {
  background: var(--danger-soft, #FAF2F0);
  border-color: rgba(160, 58, 43, 0.25);
}
.risk-hero-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-wine);
  margin: 0 0 4px;
}
.risk-hero-count {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--color-wine);
}
.risk-hero-sub { font-size: 12px; color: var(--text-muted); }
.risk-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.inline-risk-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inline-risk-form select,
.inline-risk-form input,
.inline-risk-form textarea {
  font-size: 12px;
  border: 1px solid var(--border-thin);
  padding: 6px 8px;
  font-family: var(--font-sans);
  background: #fff;
}
.risk-history {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-thin);
  font-size: 11px;
}
.risk-history strong {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.risk-history-item {
  margin-bottom: 6px;
  color: var(--text-dark);
}
.risk-history-item small {
  color: var(--text-muted);
}
.risk-history-item em {
  display: block;
  font-style: normal;
  color: var(--text-muted);
  margin-top: 2px;
}
.risk-task-status { margin-top: 8px; font-size: 12px; }
.report-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.report-row-actions a {
  font-size: 11px;
  color: var(--color-wine);
  text-decoration: none;
}
.report-row-actions a:hover { text-decoration: underline; }

.status-tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 3px 9px;
  border: 1px solid transparent;
}
.status-tag.ok {
  background: var(--success-soft, #EEF2EC);
  color: var(--success, #3F5B45);
  border-color: rgba(63, 91, 69, 0.28);
}
.status-tag.warn {
  background: var(--danger-soft, #FAF2F0);
  color: var(--danger, #A03A2B);
  border-color: rgba(160, 58, 43, 0.28);
}
.status-tag.new {
  background: var(--bg-main);
  color: var(--text-muted);
  border-color: var(--border-thin);
}

/* Charts / ranks */
.report-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.report-chart-card.wide { grid-column: 1 / -1; }
.chart-legend,
.chart-legend-row {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.lite-chart-bars,
.lite-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
}
.lite-chart-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}
.lite-chart-columns {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
}
.lite-chart-columns span {
  display: block;
  width: 6px;
  background: var(--color-gold);
}
.lite-chart-columns .c-sales { background: var(--color-gold); }
.lite-chart-columns .c-payments { background: var(--success, #3F5B45); }
.lite-chart-columns .c-margin { background: var(--color-wine); }
.lite-chart-month.negative .c-margin { background: var(--danger, #A03A2B); }
.lite-chart-month strong {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.report-trend-list .trend-row,
.rank-list .rank-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-thin);
}
.rank-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.rank-top b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-weight: 500;
}
.rank-track,
.trend-track {
  height: 4px;
  background: var(--bg-main);
  position: relative;
}
.rank-fill,
.trend-track i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-gold);
}
.rank-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }

/* Presets */
.preset-popover-wrap { position: relative; }
.preset-popover {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-thin);
  box-shadow: 0 8px 24px rgba(42, 35, 36, 0.1);
  padding: 14px;
  min-width: 320px;
}
.preset-popover.open { display: block; }
.preset-popover h3 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-wine);
  font-weight: 500;
}
.preset-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-thin);
}
.preset-item-name {
  display: block;
  font-weight: 600;
  color: var(--color-wine);
  text-decoration: none;
}
.preset-item-meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
.icon-button {
  border: 1px solid var(--border-thin);
  background: transparent;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text-muted);
}
.icon-button.danger:hover {
  color: var(--danger, #A03A2B);
  border-color: var(--danger, #A03A2B);
}

.export-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.export-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
}

.load-forecast-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-thin);
}
.active-risk-filters {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

@media (max-width: 1100px) {
  .dashboard-grid.reports-summary,
  .metric-grid,
  .executive-grid {
    grid-template-columns: 1fr 1fr;
  }
  .executive-hero {
    grid-column: span 2;
    grid-row: span 1;
  }
  .report-chart-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .dashboard-grid.reports-summary,
  .metric-grid,
  .executive-grid {
    grid-template-columns: 1fr;
  }
  .executive-hero { grid-column: span 1; }
}

/* Reports bottom blocks + presets clarity */
.rank-list .rank-item { padding: 12px 0; border-bottom: 1px solid var(--border-thin); }
.rank-list .rank-item:last-child { border-bottom: none; }
.rank-list .rank-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.rank-list .rank-top a {
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 500;
  min-width: 0;
}
.rank-list .rank-top a:hover { color: var(--color-wine); }
.rank-list .rank-top b {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.rank-list .rank-track {
  height: 4px;
  background: var(--bg-main);
  position: relative;
  margin-bottom: 4px;
}
.rank-list .rank-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-gold);
  display: block;
}
.rank-list .rank-meta {
  font-size: 10.5px;
  color: var(--text-muted);
}

.report-trend-list .trend-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr minmax(100px, 130px);
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-thin);
}
.report-trend-list .trend-row:last-child { border-bottom: none; }
.report-trend-list .trend-row strong {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-dark);
  font-weight: 500;
  display: block;
}
.report-trend-list .trend-row span {
  font-size: 10.5px;
  color: var(--text-muted);
}
.report-trend-list .trend-bar {
  height: 6px;
  background: var(--bg-main);
  position: relative;
}
.report-trend-list .trend-bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-gold);
  display: block;
}
.report-trend-list .trend-row > small {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}

.load-forecast-list .load-forecast-item {
  display: grid;
  grid-template-columns: 1fr 120px 140px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-thin);
  text-decoration: none;
  color: inherit;
}
.load-forecast-list .load-forecast-item:last-child { border-bottom: none; }
.load-forecast-list .load-forecast-item:hover { background: transparent; }
.load-forecast-list .load-forecast-item strong {
  display: block;
  font-size: 13px;
  color: var(--color-wine);
  font-family: var(--font-serif);
  font-weight: 500;
}
.load-forecast-list .load-forecast-item span {
  font-size: 11px;
  color: var(--text-muted);
}
.load-forecast-list .load-bar {
  height: 6px;
  background: var(--bg-main);
  position: relative;
}
.load-forecast-list .load-bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-gold);
  display: block;
}
.load-forecast-list .load-forecast-item.peak .load-bar span,
.load-forecast-list .load-forecast-item.overbooked .load-bar span {
  background: var(--danger, #A03A2B);
}
.load-forecast-list .load-forecast-item.underfilled .load-bar span {
  background: #8A5A00;
}
.load-forecast-list .load-forecast-item small {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.preset-help {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.45;
}
.preset-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  font-size: 11px;
  background: var(--bg-main);
  border: 1px solid var(--border-thin);
  color: var(--text-dark);
}
.preset-popover form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.preset-popover form input[type="text"] {
  height: 34px;
  border: 1px solid var(--border-thin);
  padding: 0 10px;
  font-size: 13px;
}
.preset-popover form input[type="checkbox"] {
  accent-color: var(--color-wine);
}

.report-filter-bar input[data-tcrm-date] {
  min-width: 128px;
}

.dashboard-panels.report-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 1200px) {
  .dashboard-panels.report-panels {
    grid-template-columns: 1fr;
  }
  .report-trend-list .trend-row,
  .load-forecast-list .load-forecast-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .report-trend-list .trend-row > small,
  .load-forecast-list .load-forecast-item small {
    text-align: left;
  }
  .report-filter-bar label { min-width: 0; flex: 1 1 140px; }
  .report-filter-bar label .tcrm-select-wrap,
  .report-filter-bar label .tcrm-select-trigger { min-width: 0 !important; }
  .report-filter-bar label select,
  .report-filter-bar label input[type="date"],
  .report-filter-bar label input[type="text"] { min-width: 0; width: 100%; }
  .report-filter-actions { margin-left: 0; }
}

/* Reports overview scenarios + focused executive */
.report-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.report-scenarios-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
  margin-right: 4px;
}
.report-scenario {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  color: var(--text-dark);
  font-size: 12px;
  text-decoration: none;
}
.report-scenario:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}
.report-scenario.is-active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.report-scenario.is-warn {
  border-color: rgba(160, 58, 43, 0.4);
  color: var(--danger, #A03A2B);
}
.report-scenario.is-warn.is-active,
.report-scenario.is-active.is-warn {
  background: var(--danger, #A03A2B);
  border-color: var(--danger, #A03A2B);
  color: #fff;
}

.executive-grid--focus {
  grid-template-columns: repeat(4, 1fr);
}
.executive-grid--focus .executive-hero {
  grid-column: span 2;
  grid-row: span 2;
  text-decoration: none;
  color: inherit;
}
.executive-grid--focus .executive-hero:hover {
  filter: brightness(0.98);
}
@media (max-width: 1100px) {
  .executive-grid--focus {
    grid-template-columns: 1fr 1fr;
  }
  .executive-grid--focus .executive-hero {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 700px) {
  .executive-grid--focus {
    grid-template-columns: 1fr;
  }
  .executive-grid--focus .executive-hero {
    grid-column: span 1;
  }
}

/* Preset form + filter selects + exec lines */
.preset-save-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-thin);
}
.preset-save-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0 0 10px;
}
.preset-save-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.preset-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
}
.preset-field input[type="text"] {
  height: 36px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dark);
  font-family: var(--font-sans);
  width: 100%;
}
.preset-field input[type="text"]:focus {
  outline: none;
  border-color: var(--color-gold);
}
.preset-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dark);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.preset-check input {
  accent-color: var(--color-wine);
  width: 14px;
  height: 14px;
}
.preset-save-btn {
  width: 100%;
  height: 36px;
}
.preset-empty {
  margin: 0 0 8px;
}
.preset-popover {
  min-width: 340px;
  max-width: 380px;
}

.filter-strip.report-filter-bar select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 28px;
  border-radius: 0;
}

.executive-signal .exec-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.executive-signal .exec-lines span {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Reports daily queue + six signals + data quality */
.report-daily-queue {
  margin-bottom: 16px;
}
.daily-queue-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.daily-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-thin);
  text-decoration: none;
  color: inherit;
}
.daily-queue-item:last-child { border-bottom: none; }
.daily-queue-item:hover { background: transparent; }
.daily-queue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}
.daily-queue-item.is-danger .daily-queue-dot { background: var(--danger, #A03A2B); }
.daily-queue-item.is-warn .daily-queue-dot { background: #B8860B; }
.daily-queue-item.is-info .daily-queue-dot { background: var(--text-muted); }
.daily-queue-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.daily-queue-body strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  font-family: var(--font-serif);
}
.daily-queue-body small {
  font-size: 11px;
  color: var(--text-muted);
}
.daily-queue-go {
  color: var(--text-muted);
  font-size: 14px;
}
.daily-queue-item:hover .daily-queue-go { color: var(--color-wine); }

.executive-grid--six {
  grid-template-columns: repeat(4, 1fr);
}
.executive-grid--six .executive-hero {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 1100px) {
  .executive-grid--six {
    grid-template-columns: 1fr 1fr;
  }
  .executive-grid--six .executive-hero {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 700px) {
  .executive-grid--six { grid-template-columns: 1fr; }
  .executive-grid--six .executive-hero { grid-column: span 1; }
}

.data-quality-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px dashed rgba(160, 58, 43, 0.35);
  background: rgba(160, 58, 43, 0.04);
  font-size: 12px;
  color: var(--text-dark);
  line-height: 1.45;
}
.data-quality-note strong { color: var(--danger, #A03A2B); }
.text-warn { color: #8A5A00 !important; }

.load-forecast-item.no_capacity .load-bar span {
  background: var(--text-muted);
  opacity: 0.35;
}
.load-forecast-item.no_capacity strong {
  color: var(--text-muted);
}

/* Documents module */
.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.docs-side,
.docs-main,
.docs-form-card,
.docs-archive-card {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 1200px) {
  .docs-layout { grid-template-columns: 1fr; }
}
.docs-main--full { grid-column: 1 / -1; }
.docs-panel-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.docs-panel-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  color: var(--text-dark);
  font-size: 12px;
  text-decoration: none;
}
.docs-panel-link:hover { border-color: var(--color-gold); color: var(--color-wine); }
.docs-panel-link.is-active {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.docs-form-card {
  overflow: hidden;
}
.docs-form-card .card-header { margin-bottom: 14px; }
.docs-stack {
  width: 100%;
  max-width: 100%;
}
.docs-stack label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 10px;
  min-width: 0;
}
.docs-stack label input,
.docs-stack label select,
.docs-stack label textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dark);
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  padding: 0 10px;
  min-height: 36px;
  font-family: var(--font-sans);
}
.docs-stack label textarea {
  padding: 8px 10px;
  min-height: 64px;
  resize: vertical;
}
.docs-stack .grid.two,
.docs-stack .grid.three {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
  width: 100%;
  max-width: 100%;
}
.docs-stack .grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Позиції: опис на всю ширину, к-сть+ціна в ряд */
.docs-stack .invoice-item-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-thin);
}
.docs-stack .invoice-item-row:last-of-type { border-bottom: none; }
.docs-stack .invoice-item-row .invoice-item-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.docs-stack .grid.three { grid-template-columns: minmax(0, 1fr); }
.docs-section-label {
  margin: 14px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-thin);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
}
.invoice-items-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.invoice-items-head strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.docs-check-set {
  border: 1px solid var(--border-thin);
  padding: 12px;
  margin: 0 0 12px;
}
.docs-check-set legend {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 0 6px;
}
.docs-check-set .check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dark);
  font-weight: 400;
  margin-bottom: 6px;
}
.docs-check-set .check-label input { accent-color: var(--color-wine); }
.docs-file-label input[type="file"] {
  padding: 8px;
  min-height: auto;
  font-size: 12px;
}
.docs-archive-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.docs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}
.docs-table-wrap .data-table {
  width: 100%;
  min-width: 640px;
}
.docs-table-wrap td strong { display: block; font-weight: 500; }
.docs-table-wrap .table-sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.docs-table-wrap .row-actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}
.docs-table-wrap .row-actions a {
  font-size: 12px;
  color: var(--color-wine);
  text-decoration: none;
}
.docs-table-wrap .row-actions a:hover { text-decoration: underline; }
.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

/* Document view + numbering */
.doc-view-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.doc-view-wrap {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .doc-view-wrap { grid-template-columns: 1fr; }
}
.doc-view-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}
.doc-meta-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  font-size: 13px;
}
.doc-meta-dl dt { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.doc-meta-dl dd { margin: 0; font-weight: 500; color: var(--text-dark); }
.doc-view-note strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.doc-view-note p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-dark); }
.doc-view-preview {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  background: var(--bg-main);
}
.doc-view-preview img { max-width: 100%; max-height: 80vh; display: block; }
.doc-view-preview iframe { width: 100%; height: 80vh; border: none; background: #fff; }
.doc-view-nopreview {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
}
.doc-view-nopreview p { margin: 0 0 14px; }

.document-numbering-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .document-numbering-principles { grid-template-columns: 1fr; }
}
.document-numbering-principles div {
  border: 1px solid var(--border-thin);
  padding: 12px;
}
.document-numbering-principles strong {
  display: block;
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 500;
}
.document-numbering-principles span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.document-numbering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.document-numbering-card {
  border: 1px solid var(--border-thin);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.document-numbering-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.document-numbering-card-head span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.document-numbering-card-head strong {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 16px;
  font-weight: 500;
}
.document-numbering-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.document-numbering-card .grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.document-numbering-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}
.document-numbering-card input[type="text"],
.document-numbering-card input[type="number"] {
  height: 34px;
  border: 1px solid var(--border-thin);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dark);
}

.docs-type-block[hidden] { display: none !important; }
.contract-document .legal-header{padding:24px 28px 20px;border-bottom:2px solid var(--color-wine);background:#fff;color:var(--text-dark)}.contract-document .legal-company{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.contract-document .legal-requisites{margin-top:6px;color:var(--text-muted);font-size:10px;line-height:1.45}.contract-document .legal-title{margin-top:24px;text-align:center}.contract-document .legal-title h1{margin:0;color:var(--color-wine);font-family:var(--font-serif);font-size:28px;font-weight:500;text-transform:uppercase}.contract-document .legal-title div{margin-top:6px;color:var(--text-muted);font-size:11px}
.docs-template-field .field-note{display:block;margin-top:6px;color:var(--text-muted);font-size:11px;line-height:1.4;letter-spacing:normal;text-transform:none}.docs-full-template-toggle{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;margin-top:8px;color:var(--text-dark)!important;font-size:11px!important;letter-spacing:.04em!important}.docs-full-template-toggle input{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:18px;margin:0;border:1px solid var(--color-gold);border-radius:0;background:#fff;display:grid;place-content:center;cursor:pointer}.docs-full-template-toggle input::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0}.docs-full-template-toggle input:checked{border-color:var(--color-wine);background:var(--color-wine)}.docs-full-template-toggle input:checked::before{opacity:1}
.docs-archive-card { overflow: hidden; }
.docs-archive-head { width: 100%; }

/* Documents: один дропдаун поверх сусідніх полів */
.docs-form-card .tcrm-select-wrap {
  position: relative;
  z-index: 1;
}
.docs-form-card .tcrm-select-wrap.open {
  z-index: 40;
}
.docs-form-card .tcrm-select-dropdown {
  z-index: 41;
  max-height: 260px;
  overflow-y: auto;
}
.docs-side {
  position: relative;
  z-index: 2;
}
.docs-main {
  position: relative;
  z-index: 1;
}

.docs-result-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.docs-result-msg { font-size: 13.5px; font-weight: 500; }
.docs-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.docs-auto-note {
  border: 1px solid var(--border-thin);
  background: var(--color-gold-light, #F4EFE6);
  padding: 12px 14px;
  margin: 8px 0 12px;
}
.docs-auto-note strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-wine);
  margin-bottom: 4px;
}
.docs-auto-note p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dark);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.docs-advanced {
  margin: 8px 0 12px;
  border: 1px solid var(--border-thin);
  padding: 0 12px 8px;
}
.docs-advanced > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 0;
}
.docs-advanced > summary::-webkit-details-marker { display: none; }
.docs-advanced[open] > summary { color: var(--color-wine); border-bottom: 1px solid var(--border-thin); margin-bottom: 10px; }
.docs-row-actions {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
}
.docs-table-wrap .data-table th:last-child,
.docs-table-wrap .data-table td:last-child {
  position: sticky;
  right: 0;
  background: var(--bg-card, #fff);
  z-index: 1;
}

.docs-filter-bar {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) repeat(2, minmax(90px, 0.9fr)) repeat(2, minmax(100px, 0.85fr)) auto;
  gap: 10px 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-thin);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.docs-filter-bar .docs-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.docs-filter-bar .docs-filter-actions .btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.docs-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0;
}
.docs-filter-bar input,
.docs-filter-bar select {
  min-height: 34px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  padding: 0 10px;
  color: var(--text-dark);
  font-family: var(--font-sans);
}
.docs-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.docs-attention-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border-thin);
  background: #FBF6F0;
  font-size: 13px;
}
@media (max-width: 1280px) {
  .docs-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .docs-filter-bar .docs-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .docs-filter-bar { grid-template-columns: 1fr 1fr; }
}

.docs-sort-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.docs-sort-link:hover {
  color: var(--color-wine);
  border-bottom-color: var(--color-gold);
}
.docs-inline-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.docs-row-actions {
  flex-wrap: wrap;
  max-width: 280px;
}
.field-hint {
  display: block;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin: 0 0 6px;
  line-height: 1.35;
}
.docs-preview-note {
  margin: 8px 0 12px;
}

/* Documents: native control cleanup */
.docs-layout select.tcrm-select-hidden,
.docs-filter-bar select.tcrm-select-hidden,
.docs-form-card select.tcrm-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(0,0,0,0);
}
.docs-filter-bar .tcrm-select-wrap,
.docs-form-card .tcrm-select-wrap {
  width: 100%;
}
.docs-filter-bar .tcrm-select-trigger,
.docs-form-card .tcrm-select-trigger {
  width: 100%;
  min-height: 34px;
}
.docs-file-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.docs-file-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  overflow: hidden;
}
.docs-file-field input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.docs-file-ui {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  pointer-events: none;
}
.docs-file-ui.has-file {
  color: var(--text-dark);
  font-weight: 500;
}
.docs-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-thin);
  font-size: 12.5px;
  color: var(--text-muted);
}
.docs-pagination a,
.docs-pagination button,
.docs-pagination [data-pm],
.docs-pagination [data-nm] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.docs-pagination a:hover,
.docs-pagination button:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}
.docs-pagination .is-active,
.docs-pagination [aria-current="page"] {
  background: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-gold);
}
.docs-pagination button:disabled,
.docs-pagination a[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}
/* Table: avoid horizontal "native" scrollbar look when possible */
.docs-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) transparent;
}
.docs-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.docs-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-gold);
}
.docs-table-wrap .data-table {
  min-width: 720px;
}
.docs-row-actions .btn {
  flex: 0 0 auto;
}
.docs-archive-card,
.docs-form-card {
  overflow: visible;
}
.docs-filter-bar {
  overflow: visible;
  position: relative;
  z-index: 5;
}
.docs-filter-bar .tcrm-select-wrap.open {
  z-index: 30;
}


/* Documents archive composition fixes */
.docs-archive-head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
}
.docs-attention-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--danger, #A03A2B);
  background: var(--danger-soft, #FAF2F0);
  color: var(--danger, #A03A2B);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.docs-attention-inline:hover {
  background: #f5e8e5;
}
.docs-attention-inline strong {
  font-weight: 600;
}

/* Filter: search dominates width */
.docs-filter-bar {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(90px, 0.85fr) minmax(90px, 0.85fr) minmax(95px, 0.75fr) minmax(95px, 0.75fr);
  gap: 8px 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border-thin);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.docs-filter-bar .docs-filter-search {
  min-width: 0;
}
.docs-filter-bar .docs-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding-top: 2px;
}
@media (max-width: 900px) {
  .docs-filter-bar {
    grid-template-columns: 1fr 1fr;
  }
}

/* Package checkboxes: compact 2×2 chips, not full-width inputs */
.docs-stack .docs-check-set input[type="checkbox"],
.docs-check-set input[type="checkbox"],
.docs-check-chip input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  flex: 0 0 15px !important;
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  accent-color: var(--color-wine);
}
.docs-check-set {
  border: 1px solid var(--border-thin);
  padding: 10px 12px;
  margin: 0 0 14px;
}
.docs-check-set legend {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 0 6px;
}
.docs-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.docs-check-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid var(--border-thin);
  background: var(--bg-main, #F5F2EB);
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-dark) !important;
  cursor: pointer;
  min-height: 0 !important;
}
.docs-check-chip span {
  line-height: 1.2;
}
.docs-check-chip:has(input:checked) {
  border-color: var(--color-gold);
  background: #fff;
}

/* Table: 7 columns readable, actions always visible */
.docs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) transparent;
}
.docs-table-wrap .data-table {
  width: 100%;
  min-width: 860px;
  table-layout: fixed;
  border-collapse: collapse;
}
.docs-table-wrap .data-table th,
.docs-table-wrap .data-table td {
  vertical-align: top;
  padding: 10px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-table-wrap .data-table th:nth-child(1),
.docs-table-wrap .data-table td:nth-child(1) { width: 22%; }
.docs-table-wrap .data-table th:nth-child(2),
.docs-table-wrap .data-table td:nth-child(2) { width: 8%; }
.docs-table-wrap .data-table th:nth-child(3),
.docs-table-wrap .data-table td:nth-child(3) { width: 16%; }
.docs-table-wrap .data-table th:nth-child(4),
.docs-table-wrap .data-table td:nth-child(4) { width: 12%; }
.docs-table-wrap .data-table th:nth-child(5),
.docs-table-wrap .data-table td:nth-child(5) { width: 6%; }
.docs-table-wrap .data-table th:nth-child(6),
.docs-table-wrap .data-table td:nth-child(6) { width: 10%; }
.docs-table-wrap .data-table th:nth-child(7),
.docs-table-wrap .data-table td:nth-child(7) {
  width: 26%;
  position: sticky;
  right: 0;
  background: var(--bg-card, #fff);
  z-index: 2;
  overflow: visible;
}
.docs-table-wrap .data-table th:nth-child(7) {
  z-index: 3;
}
.docs-row-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 6px;
  max-width: none;
  white-space: normal;
  align-items: center;
}
.docs-row-actions .btn,
.docs-row-actions a.btn {
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 26px;
}
.docs-row-actions .docs-inline-form {
  display: inline;
  margin: 0;
}
.docs-table-wrap .table-primary-link {
  display: inline;
  white-space: normal;
  word-break: break-word;
}
.docs-table-wrap td strong {
  white-space: normal;
  word-break: break-word;
}



/* Documents protocol fixes 2026-08-29 */
.docs-attention-row {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 10px;
}
.docs-attention-row .docs-attention-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--danger, #A03A2B);
  background: var(--danger-soft, #FAF2F0);
  color: var(--danger, #A03A2B);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.docs-attention-row .docs-attention-inline:hover {
  background: #f5e8e5;
}

.docs-title-link {
  color: inherit;
  text-decoration: none;
}
.docs-title-link:hover strong {
  color: var(--color-wine);
  text-decoration: underline;
}
.docs-title-link strong {
  font-weight: 500;
}

/* Table: no forced horizontal scroll when possible; wrap text */
.docs-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.docs-table-wrap .data-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
  border-collapse: collapse;
}
.docs-table-wrap .data-table th,
.docs-table-wrap .data-table td {
  vertical-align: top;
  padding: 10px 8px;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.docs-table-wrap .data-table th {
  white-space: nowrap;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}
/* Column shares — sum ~100%, actions flexible */
.docs-table-wrap .data-table th:nth-child(1),
.docs-table-wrap .data-table td:nth-child(1) { width: 24%; }
.docs-table-wrap .data-table th:nth-child(2),
.docs-table-wrap .data-table td:nth-child(2) { width: 7%; }
.docs-table-wrap .data-table th:nth-child(3),
.docs-table-wrap .data-table td:nth-child(3) { width: 16%; }
.docs-table-wrap .data-table th:nth-child(4),
.docs-table-wrap .data-table td:nth-child(4) { width: 13%; }
.docs-table-wrap .data-table th:nth-child(5),
.docs-table-wrap .data-table td:nth-child(5) { width: 6%; text-align: center; }
.docs-table-wrap .data-table th:nth-child(6),
.docs-table-wrap .data-table td:nth-child(6) { width: 10%; white-space: nowrap; }
.docs-table-wrap .data-table th:nth-child(7),
.docs-table-wrap .data-table td:nth-child(7) {
  width: 24%;
  position: static;
  overflow: visible;
  white-space: normal;
}
.docs-table-wrap .status-pill,
.docs-table-wrap .badge,
.docs-table-wrap [class*="status"] {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  padding: 3px 8px;
  box-sizing: border-box;
}
.docs-row-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  white-space: normal !important;
}
.docs-row-actions .btn {
  height: auto;
  min-height: 26px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
}

/* Placeholders readable */
.docs-form-card input::placeholder,
.docs-stack input::placeholder,
.docs-filter-bar input::placeholder {
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Datepicker panel breathing room from viewport edge */
.tcrm-datepicker {
  max-width: calc(100vw - 24px);
}



/* Documents archive: 4-column readable table */
.docs-layout {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr) !important;
}
@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: 1fr !important; }
}
.docs-table-wrap .data-table {
  min-width: 0 !important;
  table-layout: fixed;
  width: 100%;
}
.docs-table-wrap .data-table th:nth-child(1),
.docs-table-wrap .data-table td:nth-child(1) { width: 34%; }
.docs-table-wrap .data-table th:nth-child(2),
.docs-table-wrap .data-table td:nth-child(2) { width: 24%; }
.docs-table-wrap .data-table th:nth-child(3),
.docs-table-wrap .data-table td:nth-child(3) { width: 16%; }
.docs-table-wrap .data-table th:nth-child(4),
.docs-table-wrap .data-table td:nth-child(4) { width: 26%; }
.docs-table-wrap .data-table th,
.docs-table-wrap .data-table td {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  vertical-align: top;
}
.docs-col-title strong {
  display: block;
  font-weight: 500;
  line-height: 1.35;
}
.docs-col-context .table-primary-link {
  display: inline;
  font-weight: 500;
  color: var(--color-wine);
  text-decoration: none;
  word-break: break-word;
}
.docs-col-context .table-primary-link:hover {
  text-decoration: underline;
}
.docs-status-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-thin);
  background: var(--bg-main);
  color: var(--text-muted);
}
.docs-status-badge.ok {
  background: var(--success-soft, #EEF2EC);
  border-color: var(--success, #3F5B45);
  color: var(--success, #3F5B45);
}
.docs-status-badge.bad {
  background: var(--danger-soft, #FAF2F0);
  border-color: var(--danger, #A03A2B);
  color: var(--danger, #A03A2B);
}
.docs-status-badge.muted {
  background: var(--bg-main);
  color: var(--text-muted);
}
.docs-col-status .table-sub {
  display: block;
  margin-top: 4px;
}
.docs-col-actions .docs-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.docs-col-actions .btn-sm {
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
}


/* Documents actions: always visible, never opacity:0 from generic .row-actions */
.docs-col-actions {
  position: relative;
  z-index: 2;
  overflow: visible !important;
}
.docs-col-actions .docs-row-actions {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  pointer-events: auto !important;
}
.docs-action-link,
.docs-action-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px !important;
  border: 1px solid var(--border-thin) !important;
  background: #fff !important;
  color: var(--color-wine) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.docs-action-link:hover,
.docs-action-btn:hover {
  border-color: var(--color-gold) !important;
  color: var(--color-wine) !important;
  background: var(--color-gold-light, #F4EFE6) !important;
}
.docs-action-muted {
  font-size: 11px;
  color: var(--text-muted);
}
.docs-inline-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Title must not cover actions column */
.docs-col-title {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.docs-title-link {
  position: relative;
  z-index: 0;
}


/* === Documents archive status column fix (no vertical letter stack) === */
.docs-table-wrap .data-table {
  table-layout: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
.docs-table-wrap .data-table col.docs-col-w-title { width: 32%; }
.docs-table-wrap .data-table th,
.docs-table-wrap .data-table td {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
.docs-table-wrap .data-table th:nth-child(1),
.docs-table-wrap .data-table td:nth-child(1) {
  width: auto !important;
  min-width: 140px;
  max-width: 280px;
}
.docs-table-wrap .data-table th:nth-child(2),
.docs-table-wrap .data-table td:nth-child(2) {
  width: auto !important;
  min-width: 110px;
  max-width: 200px;
}
.docs-table-wrap .data-table th:nth-child(3),
.docs-table-wrap .data-table td:nth-child(3),
.docs-col-status {
  width: 1% !important;
  min-width: 120px !important;
  max-width: 150px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.docs-table-wrap .data-table th:nth-child(4),
.docs-table-wrap .data-table td:nth-child(4),
.docs-col-actions {
  width: 1% !important;
  min-width: 160px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.docs-status-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 24px;
  padding: 4px 10px !important;
  margin: 0 !important;
  border: 1px solid var(--border-thin) !important;
  background: var(--bg-main) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  box-sizing: border-box;
}
.docs-status-badge.ok {
  background: var(--success-soft, #EEF2EC) !important;
  border-color: var(--success, #3F5B45) !important;
  color: var(--success, #3F5B45) !important;
}
.docs-status-badge.bad {
  background: var(--danger-soft, #FAF2F0) !important;
  border-color: var(--danger, #A03A2B) !important;
  color: var(--danger, #A03A2B) !important;
}
.docs-status-badge.muted {
  background: var(--bg-main) !important;
  color: var(--text-muted) !important;
}
.docs-col-status .table-sub {
  display: block !important;
  margin-top: 4px;
  white-space: nowrap !important;
  font-size: 11px;
  color: var(--text-muted);
}


/* Documents archive: tighter row rhythm */
.docs-table-wrap .data-table {
  border-collapse: collapse;
}
.docs-table-wrap .data-table thead th {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border-thin);
  vertical-align: bottom;
}
.docs-table-wrap .data-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-thin);
  vertical-align: middle !important;
}
.docs-table-wrap .data-table tbody tr:last-child td {
  border-bottom: none;
}
.docs-table-wrap .data-table tbody tr:hover td {
  background: rgba(245, 242, 235, 0.55);
}
.docs-col-title strong {
  display: block;
  line-height: 1.35;
  margin-bottom: 2px;
}
.docs-col-title .table-sub,
.docs-col-context .table-sub,
.docs-col-status .table-sub {
  display: block;
  margin-top: 2px;
  line-height: 1.35;
  color: var(--text-muted);
  font-size: 11px;
}
.docs-col-status {
  vertical-align: middle !important;
}
.docs-status-badge {
  vertical-align: middle;
}
.docs-col-actions {
  vertical-align: middle !important;
}
.docs-col-actions .docs-row-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}
.docs-action-link,
.docs-action-btn {
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
}
/* Keep status + actions on one visual baseline */
.docs-col-status,
.docs-col-actions {
  white-space: nowrap !important;
}


/* Documents: row hover + actions alignment + no blue focus */
.docs-table-wrap .data-table tbody tr:hover td {
  background: rgba(245, 242, 235, 0.7) !important;
}
.docs-table-wrap .data-table tbody td {
  vertical-align: top !important;
  padding: 14px 10px !important;
}
.docs-col-status {
  padding-top: 14px !important;
}
.docs-col-actions {
  padding-top: 14px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 170px !important;
}
.docs-col-actions .docs-row-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  max-width: 150px;
}
.docs-col-actions .docs-action-link,
.docs-col-actions .docs-action-btn {
  width: 100%;
  justify-content: center;
  min-height: 28px !important;
  padding: 0 6px !important;
  font-size: 9.5px !important;
  letter-spacing: .04em !important;
  box-sizing: border-box;
}
.docs-col-actions .docs-inline-form {
  display: contents;
}
/* If only 3 buttons, last spans full width look odd — keep grid */

/* Kill browser blue focus ring in documents module */
.docs-layout input:focus,
.docs-layout select:focus,
.docs-layout textarea:focus,
.docs-layout button:focus,
.docs-layout a:focus,
.docs-form-card input:focus,
.docs-form-card select:focus,
.docs-form-card textarea:focus,
.docs-filter-bar input:focus,
.docs-filter-bar select:focus,
.docs-filter-bar button:focus,
.docs-stack input:focus,
.docs-stack select:focus,
.docs-stack textarea:focus,
.docs-action-link:focus,
.docs-action-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
.docs-layout input:focus-visible,
.docs-form-card input:focus-visible,
.docs-stack input:focus-visible,
.docs-filter-bar input:focus-visible,
.docs-layout select:focus-visible,
.docs-form-card select:focus-visible,
.docs-stack select:focus-visible {
  outline: none !important;
  border-color: var(--color-wine) !important;
  box-shadow: none !important;
}
.docs-layout input[type="text"],
.docs-layout input[type="search"],
.docs-layout input[type="number"],
.docs-layout input[type="date"],
.docs-form-card input,
.docs-stack input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.docs-filter-bar input {
  border-radius: 0;
}
/* Left form grid alignment */
.docs-form-card .grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items: start;
}
.docs-form-card .grid.two > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.docs-form-card .grid.two input,
.docs-form-card .grid.two select {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
}
.docs-form-card .docs-stack > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}
.docs-form-card .docs-stack > label input,
.docs-form-card .docs-stack > label select {
  width: 100%;
  box-sizing: border-box;
}
/* tcrm-select focus without blue */
.docs-layout .tcrm-select-trigger:focus,
.docs-layout .tcrm-select-trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: var(--color-wine) !important;
}



/* Documents structural UX: full-width archive + drawer */
.docs-layout--archive {
  display: block !important;
  grid-template-columns: none !important;
  width: 100%;
  max-width: 100%;
}
.docs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.docs-main--full {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: auto !important;
}
.docs-archive-card {
  width: 100%;
}
.docs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

/* Drawer */
/* Documents generate/upload: centered modal (not side column) */
.docs-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}
.docs-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 35, 36, 0.42);
  cursor: pointer;
}
.docs-drawer {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(92vh, 920px);
  overflow: auto;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-thin);
  box-shadow: 0 16px 48px rgba(88, 24, 37, 0.18);
  padding: 28px 32px 36px;
  box-sizing: border-box;
}
.docs-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-thin);
}
.docs-drawer-head strong {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-wine);
  letter-spacing: .02em;
}
.docs-drawer-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-thin);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  text-decoration: none;
  background: #fff;
}
.docs-drawer-close:hover {
  color: var(--color-wine);
  border-color: var(--color-gold);
}
.docs-drawer .docs-panel-nav {
  margin-bottom: 18px;
}
.docs-drawer .docs-form-card {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.docs-drawer .docs-form-card .card-header {
  margin-bottom: 18px;
  padding-bottom: 12px;
}
.docs-drawer .docs-form-card .card-header h2 {
  font-size: 18px;
}
.docs-drawer .docs-stack .grid.two {
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.docs-drawer .docs-preview-frame {
  height: min(48vh, 420px);
}
@media (max-width: 640px) {
  .docs-drawer-root {
    padding: 0;
    align-items: stretch;
  }
  .docs-drawer {
    width: 100%;
    max-height: 100%;
    height: 100%;
    padding: 20px 16px 28px;
    border: none;
  }
  .docs-drawer .docs-stack .grid.two {
    grid-template-columns: 1fr;
  }
}

/* Compact filters */
.docs-filter-bar--compact {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  grid-template-columns: none !important;
}
.docs-filter-bar--compact .docs-filter-search {
  flex: 1 1 220px;
  min-width: 180px;
}
.docs-filter-bar--compact .docs-filter-actions {
  grid-column: auto !important;
  display: flex;
  gap: 8px;
}
.docs-filter-more {
  position: relative;
}
.docs-filter-more > summary {
  list-style: none;
  cursor: pointer;
}
.docs-filter-more > summary::-webkit-details-marker { display: none; }
.docs-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 320px;
  padding: 14px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-thin);
  box-shadow: 0 10px 28px rgba(88, 24, 37, 0.12);
}
.docs-filter-panel label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}
.docs-filter-panel input,
.docs-filter-panel select {
  min-height: 34px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* 3-col table */
.docs-table-wrap .data-table th:nth-child(1),
.docs-table-wrap .data-table td:nth-child(1) {
  width: auto !important;
  min-width: 220px;
  max-width: none !important;
}
.docs-table-wrap .data-table th:nth-child(2),
.docs-table-wrap .data-table td:nth-child(2) {
  width: 140px !important;
  min-width: 120px !important;
  max-width: 160px !important;
  white-space: nowrap !important;
}
.docs-table-wrap .data-table th:nth-child(3),
.docs-table-wrap .data-table td:nth-child(3),
.docs-th-actions,
.docs-col-actions {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 64px !important;
  text-align: right;
  white-space: nowrap !important;
  overflow: visible !important;
}
.docs-ctx-line {
  margin-top: 4px !important;
}
.docs-ctx-line .table-primary-link {
  color: var(--color-wine);
  text-decoration: none;
  font-weight: 500;
}
.docs-ctx-line .table-primary-link:hover {
  text-decoration: underline;
}

/* Kebab action menu */
.docs-action-menu {
  position: relative;
  display: inline-block;
  text-align: left;
}
.docs-action-menu-btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-thin);
  background: #fff;
  color: var(--text-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.docs-action-menu-btn::-webkit-details-marker { display: none; }
.docs-action-menu-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}
.docs-action-menu[open] .docs-action-menu-btn {
  border-color: var(--color-wine);
  color: var(--color-wine);
}
.docs-action-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 180px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--border-thin);
  box-shadow: 0 10px 28px rgba(88, 24, 37, 0.12);
}
.docs-action-menu-list a,
.docs-action-menu-list button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
  text-decoration: none;
  cursor: pointer;
}
.docs-action-menu-list a:hover,
.docs-action-menu-list button:hover {
  background: var(--bg-main, #F5F2EB);
  color: var(--color-wine);
}
.docs-action-menu-list form {
  margin: 0;
}


/* Hover: no layout jump / artifacts */
.docs-table-wrap .data-table tbody tr:hover td {
  background: rgba(245, 242, 235, 0.65) !important;
}
.docs-table-wrap .data-table tbody td {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}
.docs-action-menu-btn {
  position: relative;
  z-index: 1;
}
.docs-attention-row--active {
  display: flex;
  align-items: center;
  gap: 8px;
}
.docs-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-thin);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}
.docs-filter-clear:hover {
  color: var(--color-wine);
  border-color: var(--color-gold);
}
.docs-filter-panel-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
}
.docs-filter-panel-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-thin);
  background: #fff;
  color: var(--text-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.docs-filter-panel-close:hover {
  border-color: var(--color-gold);
  color: var(--color-wine);
}

/* 10: stable hover — only background, never move layout */
.docs-table-wrap .data-table tbody tr td {
  background-clip: padding-box;
}
.docs-table-wrap .data-table tbody tr:hover td {
  background-color: #F7F3EC !important;
}
.docs-table-wrap .data-table tbody tr:hover .docs-action-menu-btn {
  border-color: var(--color-gold);
}
.docs-action-menu-list {
  z-index: 50;
}
.docs-archive-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.docs-category-tabs .report-tab-link.active,
.docs-category-tabs .report-tab-link.is-active {
  background: var(--color-wine);
  color: var(--color-gold);
}


/* Documents table: one continuous row on hover */
.docs-archive-card .docs-table-wrap .data-table {
  border-collapse: collapse !important;
  width: 100%;
}
.docs-archive-card .docs-table-wrap .data-table tbody tr {
  background: transparent;
}
.docs-archive-card .docs-table-wrap .data-table tbody td {
  vertical-align: top !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-thin);
  padding: 14px 12px !important;
  position: static !important;
}
.docs-archive-card .docs-table-wrap .data-table tbody tr:hover td {
  background: #F7F3EC !important;
}
.docs-archive-card .docs-table-wrap .data-table tbody td:nth-child(1) {
  width: auto;
}
.docs-archive-card .docs-table-wrap .data-table tbody td:nth-child(2),
.docs-archive-card .docs-table-wrap .data-table tbody td.docs-col-status {
  width: 130px;
  min-width: 120px;
  white-space: nowrap;
}
.docs-archive-card .docs-table-wrap .data-table tbody td:nth-child(3),
.docs-archive-card .docs-table-wrap .data-table tbody td.docs-col-actions {
  width: 52px;
  min-width: 52px;
  max-width: 56px;
  text-align: right;
  overflow: visible !important;
}
.docs-archive-card .docs-status-badge {
  display: inline-flex !important;
  white-space: nowrap !important;
}
.docs-archive-card .docs-col-status .table-sub {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
}
/* Sticky/absolute leftovers from older rules — kill them here */
.docs-archive-card .docs-table-wrap .data-table th:last-child,
.docs-archive-card .docs-table-wrap .data-table td:last-child {
  position: static !important;
  right: auto !important;
  background: transparent !important;
}
.docs-archive-card .docs-table-wrap .data-table thead th {
  background: var(--bg-card, #fff) !important;
  position: static !important;
}



/* Booking detail: document cards stay inside card, open by default */
#booking-documents {
  overflow: hidden;
  max-width: 100%;
}
#booking-documents .docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin-top: 14px;
  box-sizing: border-box;
}
#booking-documents .doc-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 14px 16px;
  box-sizing: border-box;
}
#booking-documents .doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#booking-documents .doc-actions .btn.tiny {
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .06em;
}
.booking-docs-details {
  margin-top: 8px;
}
.booking-docs-details-summary {
  cursor: pointer;
  user-select: none;
}
.booking-docs-details-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted, #7A7273);
  font-size: 11px;
}
.booking-docs-details[open] .booking-docs-details-hint::before {
  content: none;
}
@media (max-width: 1200px) {
  #booking-documents .docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  #booking-documents .docs-grid {
    grid-template-columns: 1fr;
  }
}


/* Booking rooming table */
.booking-rooming-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-top: 8px;
}
.booking-rooming-table {
  width: 100%;
}
.booking-rooming-table th,
.booking-rooming-table td {
  vertical-align: top;
  font-size: 13px;
}

/* Documents: action menu not clipped; open upward near bottom */
.docs-table-wrap,
.docs-table-wrap .data-table,
.docs-table-wrap .data-table td.docs-col-actions {
  overflow: visible !important;
}
.docs-action-menu {
  position: relative;
  z-index: 5;
}
.docs-action-menu[open] {
  z-index: 40;
}
.docs-action-menu-list {
  z-index: 50 !important;
  max-height: min(240px, 50vh);
  overflow-y: auto;
}
.docs-action-menu-list.is-up {
  top: auto !important;
  bottom: calc(100% + 4px);
}
.docs-invoice-total {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-dark);
}
.docs-invoice-total strong {
  color: var(--color-wine);
  font-variant-numeric: tabular-nums;
}
/* Status: soon expiring ≠ expired */
.docs-status-badge.warn,
.docs-status-badge.soon {
  background: #FBF6E9 !important;
  border-color: #C5A880 !important;
  color: #8A6A2F !important;
}
.docs-status-badge.bad,
.docs-status-badge.expired {
  background: var(--danger-soft, #FAF2F0) !important;
  border-color: var(--danger, #A03A2B) !important;
  color: var(--danger, #A03A2B) !important;
}


/* Document preview before save */
.docs-generate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.docs-preview-panel {
  margin-top: 18px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main, #F5F2EB);
}
.docs-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-thin);
  background: #fff;
}
.docs-preview-head strong {
  display: block;
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 15px;
  font-weight: 500;
}
.docs-preview-frame {
  display: block;
  width: 100%;
  height: min(70vh, 720px);
  border: 0;
  background: #fff;
}

/* Generate modal: sticky action footer + steps */
.docs-generate-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 20px -32px -36px;
  padding: 14px 32px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 18%);
  border-top: 1px solid var(--border-thin);
  box-shadow: 0 -8px 24px rgba(88, 24, 37, 0.06);
}
.docs-generate-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.docs-step.is-done {
  color: var(--color-wine);
  font-weight: 600;
}
.docs-generate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.docs-generate-actions .btn-primary {
  min-width: 160px;
}
.docs-generate-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.docs-preview-panel.is-stale {
  border-color: var(--color-gold);
  background: #FBF6EC;
}
.docs-preview-stale-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-gold);
  background: #fff;
  font-size: 12px;
  color: var(--color-wine);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .docs-generate-footer {
    margin: 16px -16px -28px;
    padding: 12px 16px 16px;
  }
  .docs-generate-actions .btn {
    flex: 1 1 auto;
  }
}

/* Document type tiles + live composer preview */
.docs-type-picker { margin-bottom: 16px; }
.docs-type-picker-label {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.docs-type-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.docs-type-tile {
  display: flex;
  align-items: center;
  min-width: 0; /* grid: не вилазити за колонку */
  min-height: 40px;
  height: auto;
  padding: 8px 10px;
  border: 1px solid var(--border-thin);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-main);
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
  overflow: hidden;
}
.docs-type-tile:hover { border-color: var(--color-gold); }
.docs-type-tile-link { text-decoration: none; }
/* superseded: strong wine fill active tile below */

.docs-type-tile-title {
  display: block;
  min-width: 0;
  width: 100%;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.docs-composer-preview {
  margin: 18px 0 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main, #F5F2EB);
  padding: 12px;
}
.docs-composer-preview-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.docs-composer-preview-head strong {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-wine);
}
.docs-preview-status {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.docs-preview-status.is-error { color: var(--color-wine); font-weight: 600; }
.docs-preview-status.is-warning { color: #8a5a16; font-weight: 600; }
.docs-ver-inline {
  font-weight: 500;
  opacity: .85;
  margin-left: 4px;
}
@media (min-width: 900px) {
  .docs-drawer.docs-modal {
    width: min(980px, 100%);
  }
  #generate-document.docs-stack {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 20px 24px;
    align-items: start;
  }
  #generate-document .docs-composer-preview {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    top: 0;
    margin: 0;
    max-height: calc(92vh - 120px);
    display: flex;
    flex-direction: column;
  }
  #generate-document .docs-preview-frame {
    flex: 1;
    min-height: 420px;
    height: auto;
  }
  #generate-document .docs-generate-footer {
    grid-column: 1 / -1;
  }
}

/* Full-page Document Composer (not side modal) */
body.docs-composer-open .docs-layout--archive .docs-toolbar,
body.docs-composer-open .docs-layout--archive .docs-archive-wrap,
body.docs-composer-open .docs-layout--archive .docs-table-wrap,
body.docs-composer-open .docs-layout--archive .table-scroll,
body.docs-composer-open .docs-layout--archive .docs-archive-table,
body.docs-composer-open .docs-layout--archive .entity-mobile-list,
body.docs-composer-open .docs-layout--archive .pagination,
body.docs-composer-open .docs-layout--archive .docs-tabs,
body.docs-composer-open .docs-layout--archive .docs-filter-bar,
body.docs-composer-open .docs-layout--archive .docs-attention-row,
body.docs-composer-open .page-header .docs-header-actions { }
body.docs-composer-open .docs-layout--archive > *:not(.docs-composer-page) {
  display: none !important;
}
body.docs-composer-open .docs-layout--archive {
  display: block;
}
.docs-composer-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 40px;
}
.docs-composer-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-thin);
}
.docs-composer-back {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: .04em;
}
.docs-composer-back:hover { color: var(--color-wine); }
.docs-composer-page-head h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-wine);
}
.docs-composer-lead {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.docs-composer-page-body {
  width: 100%;
}
.docs-composer-page .docs-form-card {
  border: none;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.docs-package-box {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--border-thin);
  background: #fff;
}
.docs-package-box-head {
  margin-bottom: 10px;
}
.docs-package-box-head strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-wine);
}
.docs-package-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.docs-package-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main, #F5F2EB);
  font-size: 13px;
  cursor: pointer;
}
.docs-package-check input { width: 15px; height: 15px; accent-color: var(--color-wine); }
.docs-package-check:has(input:checked) {
  border-color: var(--color-wine);
  background: var(--color-gold-light, #F5EFE3);
}
@media (min-width: 960px) {
  .docs-composer-page #generate-document.docs-stack {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: 24px 28px;
    align-items: start;
  }
  .docs-composer-page #generate-document .docs-composer-preview {
    grid-column: 2;
    grid-row: 1 / span 30;
    position: sticky;
    top: 12px;
    margin: 0;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
  }
  .docs-composer-page #generate-document .docs-preview-frame {
    flex: 1;
    min-height: 480px;
  }
  .docs-composer-page #generate-document .docs-generate-footer,
  .docs-composer-page #generate-document .docs-package-box {
    grid-column: 1;
  }
}

.docs-booking-lock { margin-bottom: 14px; }
.docs-booking-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-thin);
  background: var(--color-gold-light, #F5EFE3);
}
.docs-booking-chip strong {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 16px;
  font-weight: 500;
}
.docs-booking-unlock {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.docs-booking-unlock:hover {
  color: var(--color-wine);
  border-bottom-color: var(--color-gold);
}

/* Composer footer: sticky in form column so Save is always reachable */
.docs-composer-page #generate-document .docs-generate-footer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  grid-column: 1 !important;
  margin-top: 12px;
  background: #fff;
  border-top: 1px solid var(--border-thin);
  padding-top: 12px;
  box-shadow: 0 -6px 16px rgba(88, 24, 37, 0.06);
}

.docs-composer-preview.is-error {
  border-color: var(--color-wine);
  background: #FBF3F4;
}
.docs-composer-preview.is-error .docs-preview-frame {
  opacity: 0.35;
  pointer-events: none;
}

.docs-package-check[hidden] {
  display: none !important;
}

/* Composer clarity: adjust guide, package details, meta row */
.docs-adjust-guide {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-thin);
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-main);
}
.docs-advanced > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border-thin);
  background: #fff;
}
.docs-advanced > summary::-webkit-details-marker { display: none; }
.docs-advanced-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-wine);
}
.docs-advanced-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.docs-advanced[open] > summary {
  border-bottom: none;
}
.docs-advanced .invoice-items-form {
  padding: 14px;
  border: 1px solid var(--border-thin);
  border-top: none;
  background: var(--bg-main, #F5F2EB);
}
.docs-package-box {
  margin: 16px 0 8px;
  border: none;
  padding: 0;
  background: transparent;
}
.docs-package-box > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border-thin);
  background: #fff;
}
.docs-package-box > summary::-webkit-details-marker { display: none; }
.docs-package-box[open] > summary {
  border-bottom-color: transparent;
}
.docs-package-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border-thin);
  border-top: none;
  background: #fff;
}
.docs-package-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-thin);
  background: var(--bg-main, #F5F2EB);
  font-size: 12px;
}
.docs-composer-meta {
  margin: 14px 0;
}
.docs-template-field {
  display: block;
  margin-bottom: 14px;
}
.docs-type-picker {
  margin-bottom: 4px;
}
.docs-auto-note {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--border-thin);
  background: #fff;
}
.docs-auto-note strong {
  display: block;
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.docs-auto-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Document package: same pattern as wizard service-choice-grid */
.docs-composer-page .docs-package-grid,
.docs-package-box .docs-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--border-thin);
  border-top: none;
  background: #fff;
}
@media (min-width: 520px) {
  .docs-composer-page .docs-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.docs-composer-page .docs-package-choice.service-choice,
.docs-package-box .docs-package-choice.service-choice {
  position: relative;
  min-height: 56px;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 36px 14px 14px;
  border: 1px solid var(--border-thin);
  background: var(--bg-card, #fff);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 12.5px !important;
  color: var(--text-dark, var(--text-main)) !important;
  font-weight: 600 !important;
  box-sizing: border-box;
  margin: 0;
}
.docs-composer-page .docs-package-choice.service-choice:hover {
  border-color: var(--color-gold);
  background: var(--color-gold-light, #F5EFE3);
}
.docs-composer-page .docs-package-choice.service-choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.docs-composer-page .docs-package-choice.service-choice::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--border-thin);
  background: var(--border-thin);
  transition: background .2s ease, border-color .2s ease;
}
.docs-composer-page .docs-package-choice.service-choice:has(input:checked) {
  border-color: var(--color-gold);
  background: #FAF8F5;
  box-shadow: 0 4px 12px rgba(88, 24, 37, 0.06);
}
.docs-composer-page .docs-package-choice.service-choice:has(input:checked)::after {
  border-color: var(--color-wine);
  background: var(--color-wine);
}
.docs-composer-page .docs-package-choice.service-choice span {
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.docs-package-choice.service-choice[hidden] {
  display: none !important;
}

/* Composer: only 2 columns — fields | preview (not every form control) */
.docs-composer-page #generate-document.docs-stack,
#generate-document.docs-stack {
  display: block;
}
@media (min-width: 960px) {
  .docs-composer-page #generate-document.docs-stack,
  #generate-document.docs-stack {
    display: grid;
    grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
    gap: 28px 32px;
    align-items: start;
  }
  .docs-composer-page #generate-document > .docs-composer-fields,
  #generate-document > .docs-composer-fields {
    grid-column: 1;
    min-width: 0;
  }
  .docs-composer-page #generate-document > .docs-composer-preview,
  #generate-document > .docs-composer-preview {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 12px;
    margin: 0;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .docs-composer-page #generate-document .docs-preview-frame,
  #generate-document .docs-preview-frame {
    flex: 1;
    min-height: 480px;
    height: auto;
  }
  .docs-composer-page #generate-document .docs-generate-footer {
    grid-column: auto;
    position: sticky;
    bottom: 0;
    margin-top: 16px;
  }
}

/* Ensure stack-form labels/inputs stay vertical inside composer */
.docs-composer-page .docs-composer-fields label,
.docs-composer-fields label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 12px;
}
.docs-composer-page .docs-composer-fields .grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.docs-composer-page .docs-composer-fields input[type="text"],
.docs-composer-page .docs-composer-fields input[type="number"],
.docs-composer-page .docs-composer-fields input:not([type]),
.docs-composer-page .docs-composer-fields select,
.docs-composer-page .docs-composer-fields textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.docs-composer-page .docs-section-label {
  display: block;
  width: 100%;
  margin: 16px 0 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-wine);
  font-weight: 600;
}

/* Type tile strong selected */
.docs-composer-page .docs-type-tile.is-active {
  border-color: var(--color-wine) !important;
  background: var(--color-wine) !important;
  color: #fff !important;
}
.docs-composer-page .docs-type-tile.is-active .docs-type-tile-title { color: #fff; }

.docs-advanced > summary,
.docs-package-box > summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.docs-summary-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.docs-chevron {
  flex-shrink: 0; width: 10px; height: 10px;
  border-right: 2px solid var(--color-wine);
  border-bottom: 2px solid var(--color-wine);
  transform: rotate(45deg);
  transition: transform .2s ease;
  opacity: .75; margin-top: -4px;
}
details[open] > summary .docs-chevron { transform: rotate(225deg); margin-top: 4px; }

.docs-composer-gated:not(.is-ready) .docs-composer-gated-body {
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}
.docs-composer-gate-msg {
  margin: 12px 0 16px; padding: 16px 18px;
  border: 1px solid var(--color-gold);
  background: var(--color-gold-light, #F5EFE3);
}
.docs-composer-gate-msg strong {
  display: block; font-family: var(--font-serif);
  color: var(--color-wine); font-size: 16px; font-weight: 500; margin-bottom: 6px;
}
.docs-composer-gate-msg p { margin: 0; font-size: 13px; line-height: 1.45; }

.docs-preview-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 140px; max-height: 200px; padding: 24px 16px; text-align: center;
}
.docs-preview-empty[hidden], .docs-preview-frame[hidden] { display: none !important; }
.docs-preview-empty-icon { font-size: 26px; color: var(--color-gold); line-height: 1; }
.docs-preview-empty strong {
  font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: var(--color-wine);
}
.docs-preview-empty p { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 260px; line-height: 1.4; }

.docs-composer-page-head .docs-panel-nav {
  display: flex; gap: 0; border-bottom: 1px solid var(--border-thin);
}
.docs-composer-page-head .docs-panel-link {
  border: none !important; background: transparent !important;
  padding: 10px 16px; border-bottom: 2px solid transparent !important;
  margin-bottom: -1px; color: var(--text-muted); text-decoration: none;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.docs-composer-page-head .docs-panel-link.is-active {
  color: var(--color-wine) !important;
  border-bottom-color: var(--color-wine) !important;
  font-weight: 600;
}
@media (min-width: 960px) {
  .docs-composer-page #generate-document.docs-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* === Composer layout FINAL (overrides older conflicting rules) === */
@media (min-width: 960px) {
  .docs-composer-page form#generate-document.docs-stack {
    display: grid !important;
    grid-template-columns: minmax(360px, 480px) minmax(0, 1fr) !important;
    grid-template-areas: "fields preview" !important;
    gap: 28px 32px !important;
    align-items: start !important;
  }
  .docs-composer-page form#generate-document > .docs-composer-fields {
    grid-area: fields !important;
    display: block !important;
    min-width: 0 !important;
  }
  .docs-composer-page form#generate-document > .docs-composer-preview {
    grid-area: preview !important;
    position: sticky !important;
    top: 12px !important;
    margin: 0 !important;
    max-height: calc(100vh - 100px) !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }
}
.docs-composer-page form#generate-document > .docs-composer-fields > * {
  max-width: 100%;
}

/* Document version badges in archive */
.docs-ver-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}
.docs-ver-badge {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--border-thin);
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}
.docs-ver-badge--pdf {
  border-color: var(--color-wine);
  color: var(--color-wine);
  background: #FBF3F4;
}
.docs-ver-badge--old {
  opacity: 0.75;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Тип визначає форма через атрибут hidden. Не покладаємось на додатковий
   клас: без нього активні ручні поля існували в DOM, але були невидимими. */
.docs-type-block[hidden],
.docs-type-block[style*="display: none"] {
  content-visibility: hidden;
  contain: layout style;
}
.docs-composer-gated-body .docs-type-block[hidden] {
  display: none !important;
}

/* Empty archive state — same language as preview empty */
.docs-empty-state,
.empty-row.docs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
  border: 1px solid var(--border-thin);
  background: #fff;
  color: var(--text-muted);
}
.docs-empty-state .docs-empty-icon,
.docs-empty-icon {
  font-size: 26px;
  color: var(--color-gold);
  line-height: 1;
}
.docs-empty-state strong {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-wine);
}
.docs-empty-state p {
  margin: 0;
  font-size: 13px;
  max-width: 320px;
  line-height: 1.45;
}

/* Composer is a full page view, not a drawer */
#docs-composer-view.docs-composer-page {
  /* identity alias for former #docs-drawer */
}

/* Strong active type tile — single source of truth */
.docs-composer-page .docs-type-tile.is-active,
.docs-type-tile.is-active {
  border-color: var(--color-wine) !important;
  background: var(--color-wine) !important;
  color: #fff !important;
  font-weight: 600;
}
.docs-composer-page .docs-type-tile.is-active .docs-type-tile-title,
.docs-type-tile.is-active .docs-type-tile-title {
  color: #fff !important;
}

/* Generate document full-page loader — quiet luxury */
.docs-gen-loader {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 242, 235, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.docs-gen-loader[hidden] {
  display: none !important;
}
body.docs-generating {
  overflow: hidden;
}
.docs-gen-loader-card {
  min-width: 280px;
  max-width: 360px;
  padding: 36px 40px;
  border: 1px solid var(--border-thin, #E5DFD3);
  background: #fff;
  box-shadow: 0 16px 48px rgba(88, 24, 37, 0.08);
  text-align: center;
}
.docs-gen-loader-ring {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 1.5px solid var(--border-thin, #E5DFD3);
  border-top-color: var(--color-wine, #581825);
  border-radius: 50%;
  animation: docs-gen-spin 0.85s linear infinite;
}
@keyframes docs-gen-spin {
  to { transform: rotate(360deg); }
}
.docs-gen-loader-title {
  display: block;
  font-family: var(--font-serif, Cinzel, serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-wine, #581825);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.docs-gen-loader-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #8A7F72);
}

/* Composer grid — force stable two columns */
@media (min-width: 960px) {
  .docs-composer-page form#generate-document.docs-stack {
    display: grid !important;
    grid-template-columns: minmax(380px, 1.05fr) minmax(320px, 0.95fr) !important;
    grid-template-areas: "fields preview" !important;
    gap: 24px 28px !important;
    align-items: start !important;
  }
  .docs-composer-page form#generate-document > .docs-composer-fields {
    grid-area: fields !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .docs-composer-page form#generate-document > .docs-composer-preview {
    grid-area: preview !important;
    min-width: 280px !important;
    width: auto !important;
    max-width: 100% !important;
  }
}
.docs-composer-preview-head {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.docs-composer-preview-head strong,
.docs-composer-preview-head .table-sub {
  display: block;
  writing-mode: horizontal-tb !important;
}

/* Loader always on top */
.docs-gen-loader {
  z-index: 20000 !important;
}
.docs-gen-loader:not([hidden]) {
  display: flex !important;
}

/* Result alert: keep in flow, no leak to topbar */
.docs-result-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 20px;
  padding: 15px 18px;
  border: 1px solid var(--border-thin, #E5DFD3);
  border-left: 3px solid var(--color-gold, #C5A880);
  background: #fff;
  box-shadow: 0 8px 22px rgba(50, 35, 30, .06);
}
.docs-result-alert.ok { border-left-color: var(--success, #4E7A5A); }
.docs-result-alert.bad { border-left-color: var(--danger, #A34236); }
.docs-result-alert--archived { border-left-color: var(--color-wine, #581825); }
.docs-result-icon { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid currentColor; color: var(--success, #4E7A5A); font-size: 13px; font-weight: 700; }
.docs-result-alert.bad .docs-result-icon { color: var(--danger, #A34236); }
.docs-result-alert--archived .docs-result-icon { color: var(--color-wine, #581825); }
.docs-result-msg {
  flex: 1 1 220px;
  min-width: 0;
}
.docs-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.doc-number-chip.hero {
  cursor: pointer;
  user-select: all;
}
.doc-number-chip.hero:hover {
  outline: 1px solid var(--color-gold, #C5A880);
}
.doc-number-chip.hero.is-copied {
  background: #F5EFE3;
  color: var(--color-wine, #581825);
}

/* Composer inside booking modal */
body.docs-embedded {
  background: #F7F3EC;
}
body.docs-embedded .topbar.is-embedded-hidden,
body.docs-embedded .app-sidebar,
body.docs-embedded .docs-composer-page-head a[href*="documents.php"]:not(.docs-panel-link) {
  display: none !important;
}
body.docs-embedded .app-main {
  margin: 0 !important;
  padding: 12px 16px 24px !important;
  max-width: none !important;
}
body.docs-embedded .docs-composer-page {
  border: none;
  box-shadow: none;
}
body.docs-embedded .docs-layout--archive {
  display: block;
}
.booking-doc-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(40, 20, 24, 0.45);
  backdrop-filter: blur(4px);
}
.booking-doc-modal[hidden] {
  display: none !important;
}
.booking-doc-modal-dialog {
  width: min(1180px, 96vw);
  height: 100vh;
  background: #F7F3EC;
  border: 1px solid var(--border-thin, #E5DFD3);
  box-shadow: -24px 0 64px rgba(40, 20, 24, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.booking-doc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-thin, #E5DFD3);
  background: #fff;
}
.booking-doc-modal-head strong {
  font-family: var(--font-serif, Cinzel, serif);
  font-size: 16px;
  color: var(--color-wine, #581825);
  font-weight: 500;
}
.booking-doc-modal-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #F7F3EC;
}

/* Спільний autocomplete контакту: роль агента — лише підказка, не окремий
   сценарій вибору. Сам контакт як і раніше обирається єдиним полем. */
.client-autocomplete-result-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.client-autocomplete-role {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid #D9C59D;
  border-radius: 999px;
  background: #F7F1E5;
  color: var(--color-wine, #581825);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

/* Documents archive — booking-oriented working list */
.docs-legacy-archive-list { display: none !important; }
.docs-archive-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.docs-archive-tabs { display: flex; gap: 26px; margin: 0 0 18px; border-bottom: 1px solid var(--border-thin); overflow-x: auto; }
.docs-archive-tab { flex: 0 0 auto; padding: 9px 0; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.docs-archive-tab:hover { color: var(--color-wine); }
.docs-archive-tab.docs-archive-active { border-bottom-color: var(--color-gold); color: var(--color-wine); font-weight: 700; }
.docs-archive-count { color: var(--text-muted); font-weight: 400; }
.docs-archive-groups { margin-top: 8px; }
.docs-archive-group { margin: 0 0 22px; padding: 20px 26px 4px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }
.docs-archive-group-head { margin: 0 0 6px; padding: 0 0 13px; border-bottom: 1px solid var(--color-gold); }
.docs-archive-group-head-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.docs-archive-group-head-left { display: flex; min-width: 0; align-items: center; gap: 14px; }
.docs-archive-booking-chip { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 28px; padding: 4px 11px; border: 1px solid var(--color-gold); background: var(--color-gold-light); color: var(--color-wine); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-decoration: none; }
.docs-archive-booking-chip:hover { background: var(--color-gold); }
.docs-archive-booking-chip--neutral { border-color: var(--border-thin); background: var(--bg-main); color: var(--text-muted); }
.docs-archive-head-divider { width: 1px; height: 18px; flex: 0 0 1px; background: var(--border-thin); }
.docs-archive-segment-tags { overflow: hidden; color: var(--text-dark); font-family: var(--font-serif); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.docs-archive-doc-count { flex: 0 0 auto; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.docs-archive-booking-client { display: block; margin-top: 8px; color: var(--text-muted); font-family: var(--font-serif); font-size: 13px; font-style: italic; }
.docs-archive-doc-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 4px 12px 10px; border-bottom: 1px solid var(--border-thin); }
.docs-archive-doc-card:last-child { border-bottom: 0; }
.docs-archive-doc-card::before { position: absolute; top: 9px; bottom: 9px; left: 0; width: 2px; background: var(--color-wine); content: ""; opacity: .42; }
.docs-archive-doc-card.docs-archive-uploaded::before { background: var(--text-muted); opacity: .35; }
.docs-archive-doc-card:hover { background: #F7F3EC; }
.docs-archive-doc-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; color: var(--text-muted); }
.docs-archive-doc-icon svg { width: 17px; height: 17px; }
.docs-archive-doc-main { min-width: 0; flex: 1 1 auto; }
.docs-archive-doc-title { display: block; overflow: hidden; color: var(--text-dark); font-family: var(--font-serif); font-size: 15px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.docs-archive-doc-title:hover { color: var(--color-wine); text-decoration: underline; text-decoration-color: var(--color-gold); text-underline-offset: 3px; }
.docs-archive-doc-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; color: var(--text-muted); font-size: 10.5px; }
.docs-archive-dot::before { margin-right: 5px; color: var(--border-thin); content: "·"; }
.docs-archive-doc-version { display: flex; width: 104px; flex: 0 0 104px; align-items: center; justify-content: flex-end; gap: 6px; color: var(--text-muted); font-size: 11px; }
.docs-archive-ver-badge { white-space: nowrap; }
.docs-archive-ver-history { overflow: hidden; max-width: 60px; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.docs-archive-status { display: flex; width: 124px; flex: 0 0 124px; align-items: center; gap: 6px; color: var(--text-dark); font-size: 11px; }
.docs-archive-dot-mark { width: 6px; height: 6px; flex: 0 0 6px; background: var(--amber); }
.docs-archive-is-active .docs-archive-dot-mark { background: var(--success); }
.docs-archive-is-overdue .docs-archive-dot-mark { background: var(--danger); }
.docs-archive-is-archived .docs-archive-dot-mark { background: var(--text-muted); }

/* Document centre — white-label configuration */
.document-settings-page .module-card { margin: 0 0 20px; padding: 24px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }
.document-settings-page .module-card-head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-thin); }
.document-settings-page .module-card h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 21px; font-weight: 500; }
.document-settings-page .module-card-head p { max-width: 780px; margin: 7px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.document-settings-page .settings-admin-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.document-settings-page .settings-admin-links a { display: flex; min-height: 104px; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid var(--border-thin); color: var(--text-dark); text-decoration: none; }
.document-settings-page .settings-admin-links a:hover { border-color: var(--color-gold); background: var(--color-gold-light); }
.document-settings-page .settings-admin-links strong { color: var(--color-wine); font-size: 12px; }
.document-settings-page .settings-admin-links span { color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.document-settings-page .settings-admin-links small { margin-top: auto; color: var(--text-dark); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.document-settings-page .settings-form { display: block; }
.document-settings-page .settings-form label, .document-settings-page .file-upload-field { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.document-settings-page .settings-form input:not([type=checkbox]):not([type=file]), .document-settings-page .settings-form select, .document-settings-page .settings-form textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.document-settings-page .settings-form textarea { min-height: auto; line-height: 1.5; resize: vertical; }
.document-settings-page .settings-form input:focus, .document-settings-page .settings-form select:focus, .document-settings-page .settings-form textarea:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-wine) 12%, transparent); }
.document-settings-page .form-hint, .document-settings-page .field-note { color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.5; text-transform: none; }
.document-settings-page .form-section h2 { margin: 0 0 6px; color: var(--color-wine); font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
.document-settings-page .file-upload-control { display: flex; min-height: 42px; align-items: center; flex-wrap: wrap; gap: 10px; }
.document-settings-page .file-upload-control input[type=file] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.document-settings-page .file-upload-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--color-wine); background: #fff; color: var(--color-wine); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.document-settings-page .file-upload-button:hover { background: var(--color-wine); color: #fff; }
.document-settings-page .file-upload-control input[type=file]:focus-visible + .file-upload-button { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.document-settings-page .file-upload-name { color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.4; text-transform: none; }
.document-settings-page .file-upload-name.is-selected { color: var(--text-dark); font-weight: 600; }
.document-settings-page .check-label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.document-settings-page .legal-profiles { display: grid; gap: 10px; }
.document-settings-page .legal-profile { border: 1px solid var(--border-thin); }
.document-settings-page .legal-profile summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; color: var(--color-wine); cursor: pointer; font-weight: 700; list-style: none; }
.document-settings-page .legal-profile summary::-webkit-details-marker { display: none; }
.document-settings-page .legal-profile summary small { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.document-settings-page .legal-profile[open] summary { border-bottom: 1px solid var(--border-thin); background: var(--color-gold-light); }
.document-settings-page .legal-profile[open] > :not(summary) { margin-right: 14px; margin-left: 14px; }
.document-settings-page .legal-profile .grid { margin-top: 14px; }
.document-settings-page .legal-profile > label { margin-top: 14px; }
.document-settings-page .actions-row { align-items: center; }
@media (max-width: 960px) { .document-settings-page .settings-admin-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .document-settings-page .module-card { padding: 16px; }.document-settings-page .settings-admin-links { grid-template-columns: 1fr; }.document-settings-page .actions-row { align-items: stretch; flex-direction: column; }.document-settings-page .actions-row .btn { width: 100%; }.document-settings-page .legal-profile summary { align-items: flex-start; flex-direction: column; } }

/* Document templates — library and editor */
.document-templates-page .document-template-summary { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 16px; margin: 0 0 20px; }
.document-templates-page .settings-readiness-card, .document-templates-page .document-template-kpis, .document-templates-page .module-card { border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }
.document-templates-page .settings-readiness-card { padding: 20px 22px; }
.document-templates-page .settings-readiness-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.document-templates-page .settings-readiness-head span, .document-templates-page .document-template-kpis span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.document-templates-page .settings-readiness-head strong { display: block; margin-top: 5px; color: var(--color-wine); font-family: var(--font-serif); font-size: 28px; font-weight: 500; }
.document-templates-page .settings-readiness-head p { max-width: 200px; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; text-align: right; }
.document-templates-page .settings-readiness-bar { height: 5px; margin: 15px 0; overflow: hidden; background: var(--color-gold-light); }
.document-templates-page .settings-readiness-bar span { display: block; height: 100%; background: var(--color-wine); }
.document-templates-page .document-template-coverage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.document-templates-page .document-template-coverage > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border-thin); }
.document-templates-page .document-template-coverage strong { color: var(--text-dark); font-size: 12px; }
.document-templates-page .document-template-coverage div div { display: flex; gap: 4px; }
.document-templates-page .document-template-coverage span { display: inline-flex; min-width: 29px; justify-content: center; padding: 3px 5px; border: 1px solid var(--border-thin); color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.document-templates-page .document-template-coverage span.ready { border-color: color-mix(in srgb, var(--success) 45%, var(--border-thin)); background: color-mix(in srgb, var(--success) 8%, #fff); color: var(--success); }
.document-templates-page .document-template-coverage span.missing { border-color: color-mix(in srgb, var(--danger) 35%, var(--border-thin)); color: var(--danger); }
.document-templates-page .document-template-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-content: start; }
.document-templates-page .document-template-kpis > div { min-height: 96px; padding: 18px; border-bottom: 1px solid var(--border-thin); }
.document-templates-page .document-template-kpis > div:first-child { border-right: 1px solid var(--border-thin); }
.document-templates-page .document-template-kpis strong { display: block; margin-top: 7px; color: var(--color-wine); font-family: var(--font-serif); font-size: 25px; font-weight: 500; }
.document-templates-page .document-template-kpis .btn { margin: 12px 18px 0; text-align: center; }
.document-templates-page .document-template-kpis .btn:last-child { margin-bottom: 18px; }
.document-templates-page .module-grid.finance-grid { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.6fr); gap: 18px; align-items: start; }
.document-templates-page .module-card { padding: 22px; }
.document-templates-page .module-card.wide { min-width: 0; }
.document-templates-page .module-card > h2, .document-templates-page .module-card-head h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 21px; font-weight: 500; }
.document-templates-page .stack-form { display: grid; gap: 14px; margin-top: 18px; }
.document-templates-page .stack-form label { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.document-templates-page .stack-form input:not([type=checkbox]), .document-templates-page .stack-form select, .document-templates-page .stack-form textarea, .document-templates-page .search-form input, .document-templates-page .search-form select { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.document-templates-page .stack-form textarea { line-height: 1.5; resize: vertical; }
.document-templates-page .stack-form input:focus, .document-templates-page .stack-form select:focus, .document-templates-page .stack-form textarea:focus, .document-templates-page .search-form input:focus, .document-templates-page .search-form select:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-wine) 12%, transparent); }
.document-templates-page .stack-form .check-label { flex-direction: row; align-items: flex-start; color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-transform: none; }
.document-templates-page .stack-form .check-label input { margin-top: 2px; }
.document-templates-page .template-placeholder-box { padding: 14px; border: 1px solid var(--border-thin); background: var(--color-gold-light); }
.document-templates-page .template-placeholder-box strong { color: var(--color-wine); font-size: 12px; }
.document-templates-page .template-placeholder-box p { margin: 5px 0 10px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.document-templates-page .placeholder-list { display: flex; flex-wrap: wrap; gap: 6px; }
.document-templates-page code { padding: 3px 5px; background: #fff; color: var(--color-wine); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; }
.document-templates-page .form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.document-templates-page .module-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-thin); }
.document-templates-page .search-form { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, .6fr)) auto; gap: 7px; align-items: end; min-width: 0; }
.document-templates-page .search-form .tcrm-select-wrap, .document-templates-page .search-form .tcrm-select-trigger { min-width: 0; }
.document-templates-page .search-form .btn { min-height: 40px; padding: 9px 13px; white-space: nowrap; }
.document-templates-page .table-wrap { overflow-x: auto; }
.document-templates-page table { width: 100%; min-width: 750px; border-collapse: collapse; }
.document-templates-page th { padding: 10px 10px; border-bottom: 1px solid var(--text-dark); color: var(--text-muted); font-size: 10px; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.document-templates-page td { padding: 13px 10px; border-bottom: 1px solid var(--border-thin); color: var(--text-dark); font-size: 12px; vertical-align: top; }
.document-templates-page td:first-child { min-width: 220px; }
.document-templates-page td > strong, .document-templates-page td > span { display: block; }
.document-templates-page td > strong { color: var(--color-wine); font-family: var(--font-serif); font-size: 15px; font-weight: 500; }
.document-templates-page td > span { margin-top: 4px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.document-templates-page .status-pill { display: inline-flex; padding: 4px 7px; border: 1px solid var(--border-thin); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.document-templates-page .status-pill.ok { border-color: color-mix(in srgb, var(--success) 45%, var(--border-thin)); color: var(--success); }.document-templates-page .status-pill.muted { color: var(--text-muted); }
.document-templates-page .template-token-preview { margin-top: 7px; color: var(--text-muted); font-size: 10px; }.document-templates-page .template-token-preview summary { cursor: pointer; }.document-templates-page .template-token-preview > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.document-templates-page td.row-actions { position: static; display: flex; min-width: 108px; flex-direction: column; gap: 6px; opacity: 1; }.document-templates-page td.row-actions form { margin: 0; }.document-templates-page .row-actions a, .document-templates-page .row-actions button { padding: 0; border: 0; background: transparent; color: var(--color-wine); cursor: pointer; font: inherit; font-size: 11px; text-align: left; text-decoration: none; }.document-templates-page .row-actions form:last-child button { color: var(--danger); }
.document-templates-page .empty-row { padding: 34px; color: var(--text-muted); text-align: center; }
/* У робочому shell за 1440px залишається приблизно 1050px контенту після
   сайдбару, тому перелік з шести фільтрів має перейти в два ряди раніше. */
@media (max-width: 1500px) { .document-templates-page .search-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }.document-templates-page .search-form input { grid-column: span 3; }.document-templates-page .document-template-kpis { grid-template-columns: 1fr; }.document-templates-page .document-template-kpis > div:first-child { border-right: 0; } }
@media (max-width: 1160px) { .document-templates-page .document-template-summary, .document-templates-page .module-grid.finance-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .document-templates-page .settings-readiness-head, .document-templates-page .module-card-head { flex-direction: column; }.document-templates-page .settings-readiness-head p { max-width: none; text-align: left; }.document-templates-page .document-template-coverage { grid-template-columns: 1fr; }.document-templates-page .document-template-kpis { grid-template-columns: 1fr; }.document-templates-page .document-template-kpis > div:first-child { border-right: 0; }.document-templates-page .module-card, .document-templates-page .settings-readiness-card { padding: 16px; }.document-templates-page .search-form { grid-template-columns: 1fr; width: 100%; }.document-templates-page .search-form input { grid-column: auto; }.document-templates-page .search-form .btn { width: 100%; }.document-templates-page .form-actions .btn { width: 100%; } }

/* Document markets and qualified e-signature adapters */
.document-markets-page .market-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 20px; padding: 22px 24px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }
.document-markets-page .market-intro h2 { margin: 3px 0 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 22px; font-weight: 500; }
.document-markets-page .market-intro p:not(.eyebrow) { max-width: 760px; margin: 8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.document-markets-page .market-intro--empty { display: block; }.document-markets-page .market-intro--empty .btn { margin-top: 16px; }
.document-markets-page .market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.document-markets-page .market-card { padding: 22px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }.document-markets-page .market-card--inactive { background: #FCFBF8; }
.document-markets-page .market-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border-thin); }
.document-markets-page .market-card-head h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 22px; font-weight: 500; }.document-markets-page .market-card-head div > span { display: inline-block; margin-top: 5px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.document-markets-page .market-status { display: inline-flex; padding: 5px 8px; border: 1px solid var(--border-thin); color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }.document-markets-page .market-status--active { border-color: color-mix(in srgb, var(--success) 45%, var(--border-thin)); background: color-mix(in srgb, var(--success) 8%, #fff); color: var(--success); }
.document-markets-page .stack-form { display: grid; gap: 14px; }.document-markets-page .stack-form label { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.document-markets-page .stack-form input:not([type=checkbox]), .document-markets-page .stack-form textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }.document-markets-page .stack-form textarea { line-height: 1.5; resize: vertical; }.document-markets-page .stack-form input:focus, .document-markets-page .stack-form textarea:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-wine) 12%, transparent); }.document-markets-page .stack-form .check-label { flex-direction: row; align-items: flex-start; color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-transform: none; }.document-markets-page .stack-form .check-label input { margin-top: 2px; }
@media (max-width: 860px) { .document-markets-page .market-grid { grid-template-columns: 1fr; } }
.document-markets-page .stack-form .check-label { align-items: center; cursor: pointer; }
.document-markets-page .stack-form .check-label input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; min-height: 17px; margin: 0; flex: 0 0 17px; display: grid; place-content: center; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.document-markets-page .stack-form .check-label input::before { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.document-markets-page .stack-form .check-label input:checked { border-color: var(--color-wine); background: var(--color-wine); }
.document-markets-page .stack-form .check-label input:checked::before { opacity: 1; }
.document-markets-page .stack-form .check-label input:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
@media (max-width: 700px) { .document-markets-page .market-intro { align-items: flex-start; flex-direction: column; padding: 16px; }.document-markets-page .market-intro .btn, .document-markets-page .market-card .btn { width: 100%; }.document-markets-page .market-card { padding: 16px; } }

/* Exchange rates — safe financial input and rate history */
.exchange-rates-page .module-grid.finance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.exchange-rates-page .module-card { margin: 0 0 18px; padding: 22px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }.exchange-rates-page .module-grid .module-card { margin: 0; }
.exchange-rates-page .module-card > h2, .exchange-rates-page .module-card-head h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 21px; font-weight: 500; }.exchange-rates-page .module-card-head { margin-bottom: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--border-thin); }
.exchange-rates-page .stack-form { display: grid; gap: 14px; margin-top: 18px; }.exchange-rates-page .stack-form label { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.exchange-rates-page .stack-form input:not([type=checkbox]), .exchange-rates-page .stack-form select, .exchange-rates-page .stack-form textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }.exchange-rates-page .stack-form textarea { line-height: 1.5; resize: vertical; }.exchange-rates-page .stack-form input:focus, .exchange-rates-page .stack-form select:focus, .exchange-rates-page .stack-form textarea:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-wine) 12%, transparent); }
.exchange-rates-page .stack-form .field-note { color: var(--text-muted); font-size: 11px; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-transform: none; }.exchange-rates-page .stack-form .check-label { flex-direction: row; align-items: flex-start; color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-transform: none; }.exchange-rates-page .stack-form .check-label input { margin-top: 2px; }
.exchange-rates-page .exchange-rate-actions { padding-top: 2px; }.exchange-rates-page .inline-form { display: inline-flex; }.exchange-rates-page .commercial-rate-wrap { padding: 14px; border: 1px solid var(--color-gold); background: var(--color-gold-light); }.exchange-rates-page .commercial-rate-wrap .muted { margin: 5px 0 0 !important; color: var(--text-muted); line-height: 1.45; }
.exchange-rates-page .table-wrap { overflow-x: auto; }.exchange-rates-page table { width: 100%; min-width: 660px; border-collapse: collapse; }.exchange-rates-page th { padding: 10px; border-bottom: 1px solid var(--text-dark); color: var(--text-muted); font-size: 10px; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }.exchange-rates-page td { padding: 13px 10px; border-bottom: 1px solid var(--border-thin); color: var(--text-dark); font-size: 12px; vertical-align: top; }.exchange-rates-page td strong { color: var(--color-wine); font-family: var(--font-serif); font-size: 15px; font-weight: 500; }.exchange-rates-page td span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }.exchange-rates-page .empty-row { padding: 34px; color: var(--text-muted); text-align: center; }
@media (max-width: 800px) { .exchange-rates-page .module-grid.finance-grid { grid-template-columns: 1fr; }.exchange-rates-page .module-card { padding: 16px; }.exchange-rates-page .stack-form .btn { width: 100%; }.exchange-rates-page .inline-form { display: flex; }.exchange-rates-page .inline-form .btn { width: 100%; } }

/* Itineraries — manager builder, program library and public client view */
.itineraries-page .metric-grid.reports-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 20px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }.itineraries-page .metric-card { min-height: 110px; padding: 17px; border-right: 1px solid var(--border-thin); }.itineraries-page .metric-card:last-child { border-right: 0; }.itineraries-page .metric-card span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.itineraries-page .metric-card strong { display: block; margin-top: 8px; color: var(--color-wine); font-family: var(--font-serif); font-size: 21px; font-weight: 500; }.itineraries-page .metric-card small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.itineraries-page .module-grid.itinerary-grid, .itinerary-templates-page .module-grid.finance-grid { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.55fr); gap: 18px; align-items: start; }.itineraries-page .module-card, .itinerary-templates-page .module-card { margin: 0 0 18px; padding: 22px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }.itineraries-page .module-grid .module-card, .itinerary-templates-page .module-grid .module-card { margin: 0; }.itineraries-page .module-card h2, .itinerary-templates-page .module-card h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 21px; font-weight: 500; }
.itineraries-page .stack-form, .itinerary-templates-page .stack-form { display: grid; gap: 14px; margin-top: 18px; }.itineraries-page .stack-form label, .itinerary-templates-page .stack-form label { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.itineraries-page .stack-form input:not([type=checkbox]):not([type=file]), .itineraries-page .stack-form select, .itineraries-page .stack-form textarea, .itinerary-templates-page input, .itinerary-templates-page select, .itinerary-templates-page textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }.itineraries-page textarea, .itinerary-templates-page textarea { line-height: 1.5; resize: vertical; }.itineraries-page input:focus, .itineraries-page select:focus, .itineraries-page textarea:focus, .itinerary-templates-page input:focus, .itinerary-templates-page select:focus, .itinerary-templates-page textarea:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-wine) 12%,transparent); }.itineraries-page .field-note { color: var(--text-muted); font-size: 11px; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-transform: none; }
.itineraries-page .button, .itinerary-templates-page .button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--color-wine); border-radius: 0; background: var(--color-wine); color: #fff; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }.itineraries-page .button.secondary, .itinerary-templates-page .button.secondary { background: var(--color-gold-light); border-color: var(--color-gold); color: var(--color-wine); }.itineraries-page .button.danger, .itinerary-templates-page .button.danger { border-color: var(--danger); background: #fff; color: var(--danger); }.itineraries-page .button.compact { min-height: 31px; padding: 6px 10px; font-size: 10px; }
.itineraries-page .itinerary-day { border: 1px solid var(--border-thin); background: #fff; }.itineraries-page .itinerary-day + .itinerary-day { margin-top: 10px; }.itineraries-page .itinerary-day summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; color: var(--color-wine); cursor: pointer; font-weight: 700; list-style: none; }.itineraries-page .itinerary-day summary::-webkit-details-marker { display: none; }.itineraries-page .itinerary-day summary small { color: var(--text-muted); font-size: 11px; font-weight: 400; }.itineraries-page .itinerary-day[open] summary { border-bottom: 1px solid var(--border-thin); background: var(--color-gold-light); }.itineraries-page .itinerary-day-body { padding: 14px; }.itineraries-page .actions-row.subtle { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--border-thin); }.itineraries-page .itinerary-item.service-card { margin-top: 12px; padding: 14px; border: 1px solid var(--border-thin); }.itineraries-page .service-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }.itineraries-page .service-card-head strong { color: var(--color-wine); font-size: 12px; }.itineraries-page .public-link-box, .itineraries-page .client-response-box { padding: 14px; border: 1px solid var(--color-gold); background: var(--color-gold-light); }.itineraries-page .public-link-box span, .itineraries-page .client-response-box span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.itineraries-page .public-link-box a { display: block; margin-top: 6px; color: var(--color-wine); font-size: 12px; overflow-wrap: anywhere; }.itineraries-page .itinerary-media-preview { width: 100%; max-height: 220px; object-fit: cover; border: 1px solid var(--border-thin); }
.itinerary-templates-page .module-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border-thin); }.itinerary-templates-page .search-form { display: flex; gap: 8px; }.itinerary-templates-page .search-form .button { min-height: 40px; white-space: nowrap; }.itinerary-templates-page .table-wrap { overflow-x: auto; }.itinerary-templates-page table { width: 100%; min-width: 720px; border-collapse: collapse; }.itinerary-templates-page th { padding: 10px; border-bottom: 1px solid var(--text-dark); color: var(--text-muted); font-size: 10px; letter-spacing: .09em; text-align: left; text-transform: uppercase; }.itinerary-templates-page td { padding: 12px 10px; border-bottom: 1px solid var(--border-thin); font-size: 12px; vertical-align: top; }.itinerary-templates-page td strong { color: var(--color-wine); font-family: var(--font-serif); font-size: 15px; font-weight: 500; }.itinerary-templates-page td span { color: var(--text-muted); font-size: 11px; }.itinerary-templates-page .row-actions { display: flex; flex-direction: column; gap: 6px; }.itinerary-templates-page .row-actions a, .itinerary-templates-page .row-actions button { padding: 0; border: 0; background: transparent; color: var(--color-wine); cursor: pointer; font: inherit; font-size: 11px; text-align: left; }.itinerary-templates-page .row-actions form:last-child button { color: var(--danger); }
.public-itinerary-body { margin: 0; background: #F7F3EC; color: var(--text-dark); font-family: var(--font-sans); }.public-print-toolbar { display: flex; justify-content: flex-end; gap: 8px; max-width: 1160px; margin: 16px auto; padding: 0 24px; }.public-print-toolbar a, .public-print-toolbar button { padding: 8px 12px; border: 1px solid var(--border-thin); background: #fff; color: var(--color-wine); font: inherit; font-size: 11px; text-decoration: none; }.public-itinerary-hero { min-height: 290px; background: var(--color-wine); color: #fff; background-position: center; background-size: cover; }.public-itinerary-hero-inner, .public-itinerary-main { max-width: 1060px; margin: 0 auto; padding-right: 24px; padding-left: 24px; }.public-itinerary-hero-inner { padding-top: 88px; padding-bottom: 62px; }.public-itinerary-hero h1 { max-width: 820px; margin: 7px 0; color: #fff; font-family: var(--font-serif); font-size: clamp(32px, 5vw, 54px); font-weight: 500; }.public-itinerary-hero p:last-child { margin: 0; color: #F1E7D6; }.public-itinerary-main { padding-top: 26px; padding-bottom: 50px; }.public-itinerary-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-thin); background: #fff; }.public-itinerary-summary > div { padding: 16px; border-right: 1px solid var(--border-thin); }.public-itinerary-summary > div:last-child { border-right: 0; }.public-itinerary-summary span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.public-itinerary-summary strong { display: block; margin-top: 7px; color: var(--color-wine); font-family: var(--font-serif); font-size: 16px; font-weight: 500; }.public-client-response { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; padding: 22px; border: 1px solid var(--border-thin); background: #fff; }.public-client-response h2 { margin: 5px 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 24px; font-weight: 500; }.public-client-response p { color: var(--text-muted); line-height: 1.5; }.public-response-form label { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.public-response-form textarea { padding: 10px; border: 1px solid var(--border-thin); font: inherit; }.public-response-form .actions-row { display: flex; gap: 8px; margin-top: 10px; }.public-response-form .button { padding: 9px 12px; border: 1px solid var(--color-wine); background: var(--color-wine); color: #fff; font: inherit; font-size: 11px; font-weight: 700; }.public-response-form .button.secondary { background: #fff; color: var(--color-wine); }.public-itinerary-days { margin-top: 28px; }.public-itinerary-day { display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid var(--border-thin); padding: 22px 0; }.public-day-marker span { display: block; color: var(--color-wine); font-family: var(--font-serif); font-size: 18px; }.public-day-marker time { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; }.public-day-content h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 27px; font-weight: 500; }.public-day-content > p { color: var(--text-muted); line-height: 1.55; }.public-itinerary-items { display: grid; gap: 10px; margin-top: 15px; }.public-itinerary-item { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--border-thin); background: #fff; }.public-itinerary-item.with-image { grid-template-columns: 180px minmax(0, 1fr); }.public-itinerary-item img { width: 100%; height: 100%; min-height: 145px; object-fit: cover; }.public-itinerary-item > div { padding: 16px; }.public-item-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.public-item-meta .included-badge { padding: 2px 5px; border: 1px solid var(--color-gold); color: var(--color-wine); }.public-itinerary-item h3 { margin: 8px 0 5px; color: var(--text-dark); font-family: var(--font-serif); font-size: 20px; font-weight: 500; }.public-itinerary-item p { margin: 5px 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }.public-itinerary-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-thin); color: var(--text-muted); font-size: 12px; }.public-itinerary-footer strong { color: var(--color-wine); font-family: var(--font-serif); font-size: 17px; font-weight: 500; }.public-itinerary-empty { max-width: 600px; margin: 12vh auto; padding: 28px; border: 1px solid var(--border-thin); background: #fff; }.public-itinerary-empty h1 { color: var(--color-wine); font-family: var(--font-serif); font-weight: 500; }
@media (max-width: 900px) { .itineraries-page .metric-grid.reports-summary, .public-itinerary-summary { grid-template-columns: repeat(2, 1fr); }.itineraries-page .metric-card:nth-child(2) { border-right: 0; }.itineraries-page .metric-card:nth-child(-n+2) { border-bottom: 1px solid var(--border-thin); }.itineraries-page .module-grid.itinerary-grid, .itinerary-templates-page .module-grid.finance-grid { grid-template-columns: 1fr; }.public-client-response { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .itineraries-page .metric-grid.reports-summary, .public-itinerary-summary { grid-template-columns: 1fr; }.itineraries-page .metric-card, .public-itinerary-summary > div { border-right: 0; border-bottom: 1px solid var(--border-thin); }.itineraries-page .metric-card:last-child, .public-itinerary-summary > div:last-child { border-bottom: 0; }.itineraries-page .module-card, .itinerary-templates-page .module-card { padding: 16px; }.itineraries-page .button, .itinerary-templates-page .button { width: 100%; }.itinerary-templates-page .module-card-head { flex-direction: column; }.itinerary-templates-page .search-form { width: 100%; }.public-print-toolbar { justify-content: flex-start; flex-wrap: wrap; }.public-itinerary-hero-inner, .public-itinerary-main { padding-right: 16px; padding-left: 16px; }.public-itinerary-hero { min-height: 230px; }.public-itinerary-hero-inner { padding-top: 60px; padding-bottom: 42px; }.public-itinerary-day { grid-template-columns: 1fr; gap: 10px; }.public-itinerary-item.with-image { grid-template-columns: 1fr; }.public-itinerary-item img { max-height: 210px; }.public-itinerary-footer { flex-direction: column; } }

/* Standalone B2B contract composer: intentionally separate from booking documents. */
.partner-contract-page .content-shell { max-width: 1180px; }
.partner-contract-page .partner-contract-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 22px; padding:0 0 20px; border-bottom:1px solid var(--border-thin); }
.partner-contract-page .partner-contract-header h1 { margin:5px 0 6px; color:var(--text-dark); font-size:34px; line-height:1.08; }
.partner-contract-page .partner-contract-header p { margin:0; color:var(--text-muted); font-size:14px; }
.partner-contract-page .partner-contract-header .btn { flex:0 0 auto; margin-bottom:2px; }
.partner-contract-page .partner-contract-result { display:flex; align-items:center; gap:9px; margin:0 0 18px; padding:12px 15px; border:1px solid var(--border-thin); color:var(--text-dark); background:#fff; font-size:13px; line-height:1.45; }
.partner-contract-page .partner-contract-result > span { display:grid; place-items:center; width:20px; height:20px; border:1px solid currentColor; font-size:12px; font-weight:700; }
.partner-contract-page .partner-contract-result.is-ok { border-left:3px solid var(--success,#56725d); background:var(--success-soft,#f2f7f2); color:#31533a; }
.partner-contract-page .partner-contract-result.is-bad { border-left:3px solid var(--danger,#9a4141); background:var(--danger-soft,#fbf0ef); color:#7f2f31; }
.partner-contract-page .module-card { margin: 0 0 22px; padding: 24px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }
.partner-contract-page .section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border-thin); }
.partner-contract-page .section-heading h2 { margin:0; color:var(--color-wine); font-family:var(--font-serif); font-size:24px; font-weight:500; }
.partner-contract-page .form-hint { margin:0 0 22px; padding:14px 16px; border-left:3px solid var(--color-wine); color:var(--text-muted); background:var(--bg-soft,#f6f1e9); line-height:1.55; }
.partner-contract-page .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
.partner-contract-page .form-grid label { display:flex; flex-direction:column; gap:7px; color:var(--text-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.partner-contract-page .form-grid input, .partner-contract-page .form-grid textarea { width:100%; box-sizing:border-box; border:1px solid var(--border-thin); background:#fff; color:var(--text-dark); padding:11px 12px; font:inherit; font-size:14px; letter-spacing:normal; text-transform:none; }
.partner-contract-page .form-grid select { width:100%; min-height:44px; box-sizing:border-box; border:1px solid var(--border-thin); border-radius:0; background:#fff; color:var(--text-dark); padding:10px 38px 10px 12px; font:inherit; font-size:14px; letter-spacing:normal; text-transform:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--color-wine) 50%),linear-gradient(135deg,var(--color-wine) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.partner-contract-page .form-grid textarea { resize:vertical; min-height:70px; }
.partner-contract-page .form-grid .wide { grid-column:1/-1; }
.partner-contract-page .form-actions { display:flex; justify-content:flex-end; padding-top:4px; }
.partner-contract-page .partner-contract-preview iframe { display:block; width:100%; height:760px; border:1px solid var(--border-thin); background:#fff; }
.partner-contract-print-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.partner-contract-print-actions .btn.is-active { border-color:var(--color-wine); background:var(--color-wine); color:#fff; }
@media (max-width:700px) { .partner-contract-page .partner-contract-header { align-items:flex-start; flex-direction:column; gap:14px; } .partner-contract-page .partner-contract-header h1 { font-size:30px; } .partner-contract-page .module-card { padding:16px; } .partner-contract-page .form-grid { grid-template-columns:1fr; } .partner-contract-page .form-grid .wide { grid-column:auto; } .partner-contract-page .section-heading { flex-direction:column; } .partner-contract-page .partner-contract-preview iframe { height:620px; } .partner-contract-print-actions { width:100%; } .partner-contract-print-actions .btn { flex:1 1 auto; } }
@media print { .public-print-toolbar { display: none; }.public-itinerary-body { background: #fff; }.public-itinerary-main { max-width: none; }.public-client-response { break-inside: avoid; }.public-itinerary-day { break-inside: avoid; } }

/* Users, individual permissions and personal document credentials */
.users-page .module-grid, .profile-page .module-grid { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }.users-page .module-card, .profile-page .module-card { padding: 22px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }.users-page .module-card h2, .profile-page .module-card h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 21px; font-weight: 500; }.users-page .module-card-head, .profile-page .module-card-head { margin-bottom: 17px; padding-bottom: 15px; border-bottom: 1px solid var(--border-thin); }.profile-page .module-card-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; }
.users-page .stack-form, .profile-page .stack-form { display: grid; gap: 14px; margin-top: 18px; }.users-page .stack-form label, .profile-page .stack-form label { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.users-page .stack-form input:not([type=checkbox]):not([type=radio]), .users-page .stack-form select, .profile-page .stack-form input:not([type=checkbox]):not([type=file]), .profile-page .stack-form select { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }.users-page .stack-form input:focus, .users-page .stack-form select:focus, .profile-page .stack-form input:focus, .profile-page .stack-form select:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-wine) 12%,transparent); }.users-page .field-note, .profile-page .field-note { color: var(--text-muted); font-size: 11px; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-transform: none; }.users-page .checkbox-line, .profile-page .checkbox-line { flex-direction: row !important; align-items: flex-start; color: var(--text-muted) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: normal !important; line-height: 1.45; text-transform: none !important; }.users-page .checkbox-line input, .profile-page .checkbox-line input { margin-top: 2px; }
.users-page .permissions-panel, .users-page .permissions-summary { padding: 15px; border: 1px solid var(--border-thin); }.users-page .permissions-panel > div > h3, .users-page .permissions-summary h3 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 17px; font-weight: 500; }.users-page .permission-group { margin: 14px 0 0; padding: 0; border: 0; }.users-page .permission-group legend { padding: 0; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.users-page .permission-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border-thin); }.users-page .permission-row strong, .users-page .permission-row span { display: block; }.users-page .permission-row strong { color: var(--text-dark); font-size: 12px; }.users-page .permission-row > div:first-child > span { margin-top: 3px; color: var(--text-muted); font-size: 10px; }.users-page .permission-options { display: flex; flex: 0 0 auto; border: 1px solid var(--border-thin); }.users-page .permission-options label { display: inline-flex !important; min-width: 31px; min-height: 28px; align-items: center; justify-content: center; gap: 0 !important; padding: 0 !important; border-right: 1px solid var(--border-thin); cursor: pointer; font-size: 10px !important; }.users-page .permission-options label:last-child { border-right: 0; }.users-page .permission-options input { position: absolute; opacity: 0; }.users-page .permission-options input:checked + span { color: var(--color-wine); font-weight: 800; }.users-page .permission-options label:has(input:checked) { background: var(--color-gold-light); }.users-page .permission-summary-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.users-page .permission-badge, .profile-page .permission-badge { display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border-thin); color: var(--text-muted); font-size: 10px; }.users-page .permission-badge.enabled, .profile-page .permission-badge.enabled { border-color: color-mix(in srgb,var(--success) 45%,var(--border-thin)); color: var(--success); }.users-page .permission-badge small, .profile-page .permission-badge small { font-size: 9px; color: var(--text-muted); }
.users-page .module-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.users-page .search-form { display: flex; gap: 8px; }.users-page .search-form input { width: 220px; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); font: inherit; font-size: 13px; }.users-page .table-wrap { overflow-x: auto; }.users-page table { width: 100%; min-width: 780px; border-collapse: collapse; }.users-page th { padding: 10px; border-bottom: 1px solid var(--text-dark); color: var(--text-muted); font-size: 10px; letter-spacing: .09em; text-align: left; text-transform: uppercase; }.users-page td { padding: 12px 10px; border-bottom: 1px solid var(--border-thin); font-size: 12px; vertical-align: top; }.users-page td strong, .users-page td span { display: block; }.users-page td strong { color: var(--color-wine); font-family: var(--font-serif); font-size: 15px; font-weight: 500; }.users-page td > span { margin-top: 4px; color: var(--text-muted); font-size: 11px; }.users-page .status-pill { display: inline-flex; margin: 2px 2px 0 0; padding: 4px 6px; border: 1px solid var(--border-thin); color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.users-page .status-pill.ok { border-color: color-mix(in srgb,var(--success) 45%,var(--border-thin)); color: var(--success); }.users-page .status-pill.warn { border-color: var(--color-gold); color: var(--color-wine); }.users-page .status-pill.bad { border-color: color-mix(in srgb,var(--danger) 45%,var(--border-thin)); color: var(--danger); }.users-page .row-actions { display: flex; flex-direction: column; gap: 6px; }.users-page .row-actions a, .users-page .row-actions button { padding: 0; border: 0; background: transparent; color: var(--color-wine); cursor: pointer; font: inherit; font-size: 11px; text-align: left; }.users-page .row-actions form:last-child button { color: var(--danger); }
.profile-page .soft-divider { width: 100%; height: 1px; margin: 4px 0; border: 0; background: var(--border-thin); }.profile-page .stack-form input[type=file] { padding: 8px; border: 1px dashed var(--border-thin); background: var(--color-gold-light); }.profile-page .stack-form img { display: block; padding: 8px; border: 1px solid var(--border-thin); background: #fff; }.profile-page .permission-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:0; }.profile-page .permission-badge { min-width:0; overflow-wrap:anywhere; }.profile-page .permission-badge small { display:block; }
/* Account fields must shrink with their card, including file selectors. */
.profile-page .module-grid > .module-card,
.profile-page .stack-form,
.profile-page .stack-form > *,
.profile-page .stack-form .grid > *,
.profile-page .stack-form .tcrm-select { min-width: 0; max-width: 100%; }
.profile-page .stack-form .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-page .stack-form input:not([type=checkbox]):not([type=radio]),
.profile-page .stack-form select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.profile-page .stack-form label,
.profile-page .stack-form .field-note { overflow-wrap: anywhere; }
.profile-page .stack-form img { max-width: 100% !important; }
.profile-page .module-card { container-type: inline-size; }
@container (max-width: 460px) {
  .profile-page .stack-form .grid.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .profile-page .stack-form .grid.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) { .users-page .module-grid, .profile-page .module-grid { grid-template-columns: 1fr; } }.users-page .module-card.wide, .profile-page .module-card.wide { min-width: 0; }
@media (max-width: 700px) { .users-page .module-card, .profile-page .module-card { padding: 16px; }.users-page .module-card-head { flex-direction: column; }.users-page .search-form, .users-page .search-form input { width: 100%; }.users-page .search-form .btn { width: 100%; }.users-page .permission-row { align-items: flex-start; flex-direction: column; }.users-page .actions-row .btn, .profile-page .actions-row .btn { width: 100%; } }
@media (max-width: 1180px) { .profile-page .permission-summary-grid { grid-template-columns:1fr; } }

/* Branded upload controls in secondary operational forms. */
.profile-page .stack-form input[type=file], .backup-page input[type=file], .itineraries-page input[type=file] { color:var(--text-muted); font:12px/1.3 var(--font-sans,Arial,sans-serif); }
.profile-page .stack-form input[type=file]::file-selector-button, .backup-page input[type=file]::file-selector-button, .itineraries-page input[type=file]::file-selector-button, .profile-page .stack-form input[type=file]::-webkit-file-upload-button, .backup-page input[type=file]::-webkit-file-upload-button, .itineraries-page input[type=file]::-webkit-file-upload-button { margin:0 10px 0 0; padding:8px 11px; border:1px solid var(--color-wine); border-radius:0; background:var(--color-wine); color:#fff; cursor:pointer; font:700 10px/1 var(--font-sans,Arial,sans-serif); letter-spacing:.08em; text-transform:uppercase; }
.profile-page .stack-form input[type=file]:hover::file-selector-button, .backup-page input[type=file]:hover::file-selector-button, .itineraries-page input[type=file]:hover::file-selector-button { background:var(--color-wine-dark); border-color:var(--color-wine-dark); }

/* Amounts and capacities stay keyboard-editable, without browser-specific steppers. */
input[type=number] { appearance:textfield; -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }

/* Client merge and audit trail — administrative actions need a calm,
   legible hierarchy and a stronger distinction for irreversible changes. */
.client-merge-page .module-card, .audit-page .module-card { border: 1px solid var(--border-thin); background: var(--bg-card, #fff); padding: 24px; }
.client-merge-page .module-card-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-thin); }.client-merge-page .module-card-head h2, .audit-page .module-card-head h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 24px; font-weight: 500; }.client-merge-page .module-card-head p { max-width: 680px; margin: 7px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.client-merge-page .merge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }.client-merge-page .merge-grid article { display: grid; gap: 7px; min-height: 124px; padding: 18px; border: 1px solid var(--border-thin); background: #fff; }.client-merge-page .merge-grid article:first-child { border-left: 3px solid var(--danger); }.client-merge-page .merge-grid article:last-child { border-left: 3px solid var(--success); }.client-merge-page .merge-grid span { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.client-merge-page .merge-grid strong { color: var(--text-dark); font-family: var(--font-serif); font-size: 19px; font-weight: 500; }.client-merge-page .merge-grid small { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.client-merge-page .reports-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 22px; }.client-merge-page .metric-card { min-height: 124px; padding: 16px; border: 1px solid var(--border-thin); background: var(--bg-main); }.client-merge-page .metric-card span { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.client-merge-page .metric-card strong { display: block; margin-top: 9px; color: var(--color-wine); font-family: var(--font-serif); font-size: 29px; font-weight: 500; }.client-merge-page .metric-card p { margin: 5px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.client-merge-page .merge-warning { display: grid; gap: 4px; margin: 0 0 18px; padding: 13px 16px; border: 1px solid color-mix(in srgb,var(--danger) 42%,var(--border-thin)); border-left: 3px solid var(--danger); background: color-mix(in srgb,var(--danger) 4%,#fff); }.client-merge-page .merge-warning strong { color: var(--danger); font-size: 12px; }.client-merge-page .merge-warning span { color: var(--text-muted); font-size: 12px; line-height: 1.45; }.client-merge-page .actions-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-dialog.merge-confirm-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border-thin); background: #fff; box-shadow: 0 24px 70px rgba(21, 15, 16, .3); }.app-dialog.merge-confirm-dialog::backdrop { background: rgba(39, 16, 22, .55); }.merge-confirm-dialog form { padding: 28px; }.merge-confirm-dialog h2 { margin: 7px 0 10px; color: var(--color-wine); font-family: var(--font-serif); font-size: 27px; font-weight: 500; }.merge-confirm-dialog p:not(.eyebrow) { margin: 0 0 22px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.audit-page .audit-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }.audit-page .metric-card { min-height: 126px; padding: 16px; border: 1px solid var(--border-thin); background: #fff; }.audit-page .metric-card span { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.audit-page .metric-card strong { display: block; margin: 8px 0 4px; color: var(--color-wine); font-family: var(--font-serif); font-size: 29px; font-weight: 500; }.audit-page .metric-card p { margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }.audit-page .metric-card.danger-card { border-top: 3px solid var(--danger); }.audit-page .metric-card.danger-card strong { color: var(--danger); }
.audit-page .module-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }.audit-page .search-form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.audit-page .search-form select, .audit-page .search-form input { min-height: 38px; padding: 8px 9px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 12px; }.audit-page .search-form input { width: 180px; }.audit-page .table-wrap { overflow-x: auto; }.audit-page table { width: 100%; min-width: 920px; border-collapse: collapse; }.audit-page th { padding: 10px; border-bottom: 1px solid var(--text-dark); color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.audit-page td { padding: 12px 10px; border-bottom: 1px solid var(--border-thin); color: var(--text-dark); font-size: 12px; vertical-align: top; }.audit-page td strong, .audit-page td span { display: block; }.audit-page td > span { margin-top: 3px; color: var(--text-muted); font-size: 10px; }.audit-page .status-pill { display: inline-flex; width: fit-content; margin: 0; padding: 4px 7px; border: 1px solid var(--border-thin); color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.audit-page .audit-details summary { color: var(--color-wine); cursor: pointer; font-size: 11px; }.audit-page .audit-details pre { max-width: 360px; max-height: 160px; margin: 8px 0 0; padding: 10px; overflow: auto; border: 1px solid var(--border-thin); background: var(--bg-main); color: var(--text-muted); font: 10px/1.4 var(--font-mono, monospace); white-space: pre-wrap; }.audit-page .empty-row { padding: 28px; color: var(--text-muted); text-align: center; }
@media (max-width: 1100px) { .client-merge-page .reports-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.audit-page .audit-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.audit-page .module-card-head { flex-direction: column; }.audit-page .search-form { justify-content: flex-start; } }
@media (max-width: 700px) { .client-merge-page .module-card, .audit-page .module-card { padding: 16px; }.client-merge-page .merge-grid, .client-merge-page .reports-summary, .audit-page .audit-summary { grid-template-columns: 1fr; }.client-merge-page .actions-row .btn, .merge-confirm-dialog .actions-row .btn { width: 100%; }.audit-page .search-form, .audit-page .search-form select, .audit-page .search-form input, .audit-page .search-form .btn { width: 100%; } }

/* Technical administration — API, diagnostics, licences, migrations and data safety. */
.health-page .health-summary, .migrations-page .health-summary, .api-settings-page .health-summary, .backup-page > .app-main > .dashboard-grid, .license-page .license-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }.api-settings-page .health-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.backup-page > .app-main > .dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.license-page .license-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.health-page .metric-card, .migrations-page .metric-card, .api-settings-page .metric-card, .backup-page .metric-card, .license-page .metric-card { min-height: 132px; padding: 17px; border: 1px solid var(--border-thin); background: #fff; }.health-page .metric-card span, .migrations-page .metric-card span, .api-settings-page .metric-card span, .backup-page .metric-card span, .license-page .metric-card span { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; }.health-page .metric-card strong, .migrations-page .metric-card strong, .api-settings-page .metric-card strong, .backup-page .metric-card strong, .license-page .metric-card strong { display: block; margin: 9px 0 5px; color: var(--color-wine); font-family: var(--font-serif); font-size: 26px; font-weight: 500; overflow-wrap: anywhere; }.health-page .metric-card p, .migrations-page .metric-card p, .api-settings-page .metric-card p, .backup-page .metric-card p, .license-page .metric-card p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.42; }.health-page .metric-card .btn, .backup-page .metric-card .btn { margin-top: 14px; }.health-page .danger-card, .migrations-page .danger-card, .api-settings-page .danger-card, .backup-page .danger-card, .license-page .danger-card { border-top: 3px solid var(--danger); }.health-page .danger-card strong, .migrations-page .danger-card strong, .api-settings-page .danger-card strong, .backup-page .danger-card strong, .license-page .danger-card strong { color: var(--danger); }
.health-page .module-card, .migrations-page .module-card, .api-settings-page .module-card, .claude-api-settings-page .module-card, .backup-page .module-card, .license-page .module-card { margin-bottom: 20px; padding: 22px; border: 1px solid var(--border-thin); background: #fff; }.health-page .module-card-head, .migrations-page .module-card-head, .backup-page .module-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border-thin); }.health-page .module-card-head h2, .migrations-page .module-card-head h2, .backup-page .module-card-head h2, .api-settings-page .module-card h2, .claude-api-settings-page .module-card h2, .license-page .module-card h2 { margin: 0; color: var(--color-wine); font-family: var(--font-serif); font-size: 22px; font-weight: 500; }.health-page .module-card-head p, .migrations-page .module-card-head p, .backup-page .module-card-head p { max-width: 690px; margin: 6px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.health-page .table-wrap, .migrations-page .table-wrap, .backup-page .table-wrap { overflow-x: auto; }.health-page table, .migrations-page table, .backup-page table { width: 100%; min-width: 700px; border-collapse: collapse; }.health-page th, .migrations-page th, .backup-page th { padding: 10px; border-bottom: 1px solid var(--text-dark); color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.health-page td, .migrations-page td, .backup-page td { padding: 12px 10px; border-bottom: 1px solid var(--border-thin); color: var(--text-dark); font-size: 12px; vertical-align: top; }.health-page td span, .migrations-page td span, .backup-page td span { color: var(--text-muted); font-size: 11px; }.health-page .status-pill, .migrations-page .status-pill, .backup-page .status-pill { display: inline-flex; width: fit-content; padding: 4px 7px; border: 1px solid var(--border-thin); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.health-page .status-pill.ok, .migrations-page .status-pill.ok, .backup-page .status-pill.ok { color: var(--success); border-color: color-mix(in srgb,var(--success) 45%,var(--border-thin)); }.health-page .status-pill.warn, .migrations-page .status-pill.warn { color: var(--color-wine); border-color: var(--color-gold); }.health-page .status-pill.bad, .backup-page .status-pill.bad { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 45%,var(--border-thin)); }.health-page .table-primary-link { color: var(--color-wine); font-size: 11px; font-weight: 700; text-decoration: none; }.health-page .table-primary-link:hover { text-decoration: underline; }
.health-page .demo-path { display: grid; gap: 0; margin: 0 0 20px; border: 1px solid var(--border-thin); }.health-page .demo-path-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-thin); }.health-page .demo-path-step:last-child { border-bottom: 0; }.health-page .demo-path-step > span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--border-thin); color: var(--text-muted); font-size: 10px; }.health-page .demo-path-step.ready > span { border-color: color-mix(in srgb,var(--success) 45%,var(--border-thin)); color: var(--success); }.health-page .demo-path-step.attention > span { border-color: var(--color-gold); color: var(--color-wine); }.health-page .demo-path-step strong { display: block; color: var(--text-dark); font-size: 12px; }.health-page .demo-path-step p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }.health-page .demo-path-step a { color: var(--color-wine); font-size: 11px; font-weight: 700; text-decoration: none; }
.api-settings-page .api-grid, .claude-api-settings-page .api-grid, .license-page .license-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; align-items: start; }.api-settings-page .module-card.wide, .claude-api-settings-page .module-card.wide, .license-page .module-card.wide { min-width: 0; }.api-settings-page .api-grid > .module-card.wide { grid-column: 1 / -1; }.api-settings-page .code-block { max-width: 100%; overflow-x: auto; }.api-settings-page .stack-form, .claude-api-settings-page .stack-form, .license-page .stack-form, .backup-page .stack-form { display: grid; gap: 14px; margin-top: 17px; }.api-settings-page label, .claude-api-settings-page label, .license-page label, .backup-page label { display: flex; flex-direction: column; gap: 7px; color: var(--text-dark); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.api-settings-page input:not([type=checkbox]), .api-settings-page textarea, .claude-api-settings-page input:not([type=checkbox]), .license-page input, .license-page select, .license-page textarea, .backup-page input:not([type=checkbox]), .backup-page select { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }.api-settings-page textarea, .license-page textarea { resize: vertical; }.api-settings-page input:focus, .api-settings-page textarea:focus, .claude-api-settings-page input:focus, .license-page input:focus, .license-page select:focus, .license-page textarea:focus, .backup-page input:focus, .backup-page select:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-wine) 12%,transparent); }.api-settings-page .check-label, .claude-api-settings-page .check-label { flex-direction: row; align-items: flex-start; gap: 9px; color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; }.api-settings-page .api-key-box { margin-top: 10px; padding: 10px; border: 1px solid var(--color-gold); background: var(--color-gold-light); color: var(--text-dark); font: 12px/1.4 var(--font-mono, monospace); overflow-wrap: anywhere; }.api-settings-page .grid.three, .license-page .grid.two { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.license-page .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.claude-api-settings-page .field-note, .api-settings-page .field-note, .backup-page .field-note { color: var(--text-muted); font-size: 12px; line-height: 1.5; }.claude-api-settings-page .details-list, .license-page .details-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-thin); }.claude-api-settings-page .details-list > div, .license-page .details-list > div { display: grid; gap: 5px; padding: 13px; border-right: 1px solid var(--border-thin); border-bottom: 1px solid var(--border-thin); }.claude-api-settings-page .details-list span, .license-page .details-list span { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.claude-api-settings-page .details-list strong, .license-page .details-list strong { color: var(--text-dark); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }.license-page .license-id { font-size: 17px; }.backup-page .row-actions { display: flex; flex-wrap: wrap; gap: 9px; }.backup-page .row-actions a, .backup-page .row-actions button { padding: 0; border: 0; background: transparent; color: var(--color-wine); cursor: pointer; font: inherit; font-size: 11px; text-decoration: none; }.backup-page .row-actions form button { color: var(--danger); }.backup-page input[type=file] { padding: 8px; border: 1px dashed var(--border-thin); background: var(--color-gold-light); }.backup-page .backup-validation-box { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-thin); }.backup-page .export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }.backup-page .export-tile { display: grid; gap: 5px; min-height: 78px; padding: 14px; border: 1px solid var(--border-thin); color: var(--text-dark); text-decoration: none; }.backup-page .export-tile:hover { border-color: var(--color-gold); background: var(--color-gold-light); }.backup-page .export-tile strong { color: var(--color-wine); font-family: var(--font-serif); font-size: 16px; font-weight: 500; }.backup-page .export-tile span { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
@media (max-width: 1150px) { .health-page .health-summary, .migrations-page .health-summary, .backup-page > .app-main > .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.api-settings-page .api-grid, .claude-api-settings-page .api-grid, .license-page .license-grid { grid-template-columns: 1fr; }.api-settings-page .health-summary { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .health-page .health-summary, .migrations-page .health-summary, .backup-page > .app-main > .dashboard-grid, .license-page .license-summary, .api-settings-page .grid.three, .license-page .grid.two, .claude-api-settings-page .details-list, .license-page .details-list { grid-template-columns: 1fr; }.health-page .module-card, .migrations-page .module-card, .api-settings-page .module-card, .claude-api-settings-page .module-card, .backup-page .module-card, .license-page .module-card { padding: 16px; }.health-page .module-card-head, .migrations-page .module-card-head, .backup-page .module-card-head, .health-page .demo-path-step { align-items: flex-start; flex-direction: column; }.health-page .demo-path-step { grid-template-columns: 28px 1fr; }.health-page .demo-path-step a { grid-column: 2; }.api-settings-page .stack-form .btn, .claude-api-settings-page .stack-form .btn, .license-page .stack-form .btn, .backup-page .stack-form .btn { width: 100%; } }

/* ── In-product assistant: safe help and navigation, never data actions ── */
.tcrm-assistant{position:fixed;right:24px;bottom:24px;z-index:950;display:grid;justify-items:end;gap:12px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);font-family:var(--font-sans,Arial,sans-serif)}
.has-tcrm-assistant .app-main{padding-bottom:96px}
.tcrm-assistant-launch{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 16px;border:1px solid var(--color-wine);border-radius:0;background:var(--color-wine);box-shadow:0 14px 34px rgba(59,15,24,.22);color:#fff;cursor:pointer;font:650 12px/1 var(--font-sans,Arial,sans-serif);letter-spacing:.075em;text-transform:uppercase;transition:transform .16s ease,background .16s ease}
.tcrm-assistant-launch:hover{background:var(--color-wine-dark);transform:translateY(-2px)}
.tcrm-assistant-launch-mark{display:grid;place-items:center;width:20px;height:20px;border:1px solid rgba(255,255,255,.65);color:var(--color-gold);font-size:13px}
.tcrm-assistant-panel{width:min(390px,calc(100vw - 32px));border:1px solid var(--border-thin,#dcd5cb);border-radius:0;background:#fffdf9;box-shadow:0 24px 56px rgba(44,24,28,.22);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px)}
.tcrm-assistant-panel[hidden]{display:none!important}

/* Internal finance — planning and cash-flow layer */
.internal-cashflow{margin:0 0 18px;border:1px solid var(--border-thin);background:var(--bg-card)}
.internal-cashflow__head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:18px 20px 15px;border-bottom:1px solid var(--border-thin)}
.internal-cashflow__head .eyebrow,.internal-budget .eyebrow{margin:0;color:var(--color-gold);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.internal-cashflow__head h2,.internal-budget h2{margin:4px 0 0;color:var(--color-wine);font-family:var(--font-serif);font-size:23px;font-weight:500}
.internal-cashflow__head p{max-width:520px;margin:0;color:var(--text-muted);font-size:11.5px;line-height:1.5}
.internal-cashflow__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.internal-cashflow__grid article{display:grid;gap:7px;padding:17px 19px;border-right:1px solid var(--border-thin)}
.internal-cashflow__grid article:last-child{border-right:0}
.internal-cashflow__grid span{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.internal-cashflow__grid strong{color:var(--success);font-family:var(--font-serif);font-size:22px;font-weight:500}
.internal-cashflow__grid small{color:var(--text-muted);font-size:10px;line-height:1.4}
.internal-cashflow__grid .is-negative strong{color:var(--danger,#a03a2b)}
.internal-cashflow__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-top:1px solid var(--border-thin);background:var(--color-gold-light);color:var(--text-muted);font-size:11px}
.internal-cashflow__foot strong{color:var(--color-wine);font-family:var(--font-serif);font-size:17px;font-weight:500}
.internal-budget{margin:0 0 20px;border:1px solid var(--border-thin);background:var(--bg-card)}
.internal-budget__head{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:19px 20px 14px;border-bottom:1px solid var(--border-thin)}
.internal-budget__head form{display:flex;align-items:center;gap:8px}
.internal-budget__head input,.internal-budget__head select,.internal-budget-form input,.internal-budget-form select,.internal-budget-form textarea{min-height:40px;padding:9px 10px;border:1px solid var(--border-thin);border-radius:0;background:#fff;color:var(--text-dark);font:400 13px var(--font-sans,Arial,sans-serif)}
.internal-budget>.field-note{margin:0;padding:12px 20px;color:var(--text-muted);font-size:11px;line-height:1.45;background:#fffdfa}
.internal-budget-table{width:100%;min-width:760px;border-collapse:collapse}
.internal-budget-table th{padding:10px;border-bottom:1px solid var(--text-dark);color:var(--text-muted);font-size:10px;letter-spacing:.08em;text-align:left;text-transform:uppercase}
.internal-budget-table td{padding:12px 10px;border-bottom:1px solid var(--border-thin);font-size:12px;vertical-align:top}
.internal-budget-table td strong{color:var(--color-wine)}.internal-budget-table td span{display:block;margin-top:3px;color:var(--text-muted);font-size:10px}.internal-budget-table .is-alert{color:var(--danger,#a03a2b);font-weight:700}
.internal-budget__form{border-top:1px solid var(--border-thin);background:#fffdfa}.internal-budget__form>summary{display:flex;align-items:center;gap:9px;padding:16px 19px;color:var(--color-wine);cursor:pointer;font-family:var(--font-serif);font-size:18px;list-style:none}.internal-budget__form>summary::-webkit-details-marker{display:none}.internal-budget__form>summary::before{content:'+';display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--color-gold);font:500 16px/1 var(--font-sans,Arial,sans-serif);color:var(--color-wine)}.internal-budget__form[open]>summary::before{content:'–'}
.internal-budget-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:0 19px 19px}.internal-budget-form label{display:flex;flex-direction:column;gap:7px;color:var(--text-dark);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.internal-budget-form .wide{grid-column:span 2}
.internal-finance-page .topbar-actions .user-menu{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px}.internal-finance-page .topbar-actions .user-menu a{color:var(--text-dark);text-decoration:none}.internal-finance-page .topbar-actions .user-menu a:hover{color:var(--color-wine);text-decoration:underline}
@media(max-width:850px){.internal-cashflow__head,.internal-cashflow__foot,.internal-budget__head{align-items:flex-start;flex-direction:column}.internal-cashflow__grid{grid-template-columns:1fr}.internal-cashflow__grid article{border-right:0;border-bottom:1px solid var(--border-thin)}.internal-cashflow__grid article:last-child{border-bottom:0}.internal-budget-form{grid-template-columns:1fr}.internal-budget-form .wide{grid-column:auto}}
.tcrm-assistant-head{display:flex;align-items:center;justify-content:space-between;min-height:76px;padding:15px 17px;background:var(--color-wine);color:#fff;flex:0 0 auto}
.tcrm-assistant-head>div{display:grid;gap:3px}.tcrm-assistant-head span{color:var(--color-gold);font-size:9px;font-weight:750;letter-spacing:.14em}.tcrm-assistant-head strong{font-family:var(--font-serif,Georgia,serif);font-size:23px;font-weight:500}
.tcrm-assistant-close{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.48);border-radius:0;background:transparent;color:#fff;cursor:pointer;font-size:23px;line-height:1}
.tcrm-assistant-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border-thin,#dcd5cb);background:#f7f2e9;flex:0 0 auto}.tcrm-assistant-tabs button{min-height:42px;border:0;border-right:1px solid var(--border-thin,#dcd5cb);background:transparent;color:var(--text-muted,#7a7273);cursor:pointer;font:700 10px/1 var(--font-sans,Arial,sans-serif);letter-spacing:.1em;text-transform:uppercase}.tcrm-assistant-tabs button:last-child{border-right:0}.tcrm-assistant-tabs button.is-active{background:#fffdf9;color:var(--color-wine);box-shadow:inset 0 -2px 0 var(--color-wine)}
.tcrm-assistant-view{min-height:0;padding:19px 18px 17px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}.tcrm-assistant-view h2{margin:0 0 6px;color:var(--text-dark,#292526);font-family:var(--font-serif,Georgia,serif);font-size:22px;font-weight:500}.tcrm-assistant-view>p{margin:0 0 14px;color:var(--text-muted,#7a7273);font-size:12px;line-height:1.5}
.tcrm-assistant-form{display:grid;gap:9px}.tcrm-assistant-form label{color:var(--text-muted,#7a7273);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.tcrm-assistant-form textarea{width:100%;min-height:86px;resize:vertical;padding:10px 11px;border:1px solid var(--border-thin,#dcd5cb);border-radius:0;background:#fff;color:var(--text-dark,#292526);font:14px/1.45 var(--font-sans,Arial,sans-serif)}.tcrm-assistant-form textarea:focus{outline:0;border-color:var(--color-wine);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-wine) 11%,transparent)}.tcrm-assistant-form small{color:var(--text-muted,#7a7273);font-size:10px;line-height:1.35}.tcrm-assistant-form .btn{justify-content:space-between;width:100%;min-height:42px}.tcrm-assistant-form .btn:disabled{opacity:.6;cursor:wait}
.tcrm-assistant-answer{margin:0 0 14px;padding:12px;border-left:3px solid var(--color-gold);background:var(--color-gold-light);color:var(--text-dark,#292526);white-space:pre-wrap;font-size:13px;line-height:1.52}.tcrm-assistant-answer.is-loading{color:var(--text-muted,#7a7273)}.tcrm-assistant-answer.is-error{border-left-color:#a14545;background:#fbefed;color:#7b3030}
.tcrm-assistant-help-list{display:grid;gap:0;border:1px solid var(--border-thin,#dcd5cb)}.tcrm-assistant-help-list article{padding:12px;border-bottom:1px solid var(--border-thin,#dcd5cb)}.tcrm-assistant-help-list article:last-child{border-bottom:0}.tcrm-assistant-help-list strong{display:block;margin-bottom:4px;color:var(--color-wine);font-size:12px;font-weight:700}.tcrm-assistant-help-list p{margin:0;color:var(--text-muted,#7a7273);font-size:12px;line-height:1.45}
.tcrm-assistant-foot{padding:10px 18px;border-top:1px solid var(--border-thin,#dcd5cb);background:#f7f2e9;color:var(--text-muted,#7a7273);font-size:10px;line-height:1.4;flex:0 0 auto}
@media(max-width:700px){.tcrm-assistant{right:14px;bottom:14px}.tcrm-assistant-panel{width:min(390px,calc(100vw - 28px))}.tcrm-assistant-launch{min-height:44px;padding:0 14px}}

/* Knowledge editor: grid children must be allowed to shrink inside a narrow app frame. */
.knowledge-layout,.knowledge-layout>*,.knowledge-list-wrap,.knowledge-editor,.knowledge-editor .field-grid,.knowledge-editor .field-grid>label{min-width:0}.knowledge-editor{overflow:hidden}.knowledge-editor input,.knowledge-editor textarea,.knowledge-editor select{box-sizing:border-box;min-width:0;max-width:100%}.knowledge-editor select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knowledge-editor .field-grid{grid-template-columns:minmax(0,1fr) minmax(0,.55fr)}.knowledge-editor .field-grid.compact{grid-template-columns:minmax(0,1fr) minmax(0,.35fr)}

/* ── Knowledge base: controlled training for the in-product assistant ── */
.knowledge-base-page .app-main{max-width:1560px}.knowledge-base-page .page-subtitle{margin:5px 0 0;color:var(--text-muted);font-size:13px}.knowledge-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.85fr);gap:30px;align-items:end;margin:0 0 18px;padding:26px 28px;border:1px solid var(--border-thin);background:#fff}.knowledge-hero .eyebrow,.knowledge-base-page .section-heading .eyebrow{margin:0 0 8px;color:var(--color-gold)}.knowledge-hero h2,.knowledge-base-page .section-heading h2,.knowledge-guide h2{margin:0;color:var(--color-wine);font-family:var(--font-serif);font-size:29px;font-weight:500}.knowledge-hero p:not(.eyebrow){max-width:760px;margin:10px 0 0;color:var(--text-muted);font-size:13px;line-height:1.55}.knowledge-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border-thin)}.knowledge-summary>div{display:grid;gap:7px;min-height:92px;padding:15px;border-right:1px solid var(--border-thin)}.knowledge-summary>div:last-child{border-right:0}.knowledge-summary span,.knowledge-list-wrap>.section-heading>span{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.knowledge-summary strong{color:var(--color-wine);font-family:var(--font-serif);font-size:25px;font-weight:500}.knowledge-summary>div:last-child strong{font-family:var(--font-sans);font-size:14px;line-height:1.25}.knowledge-base-page .notice-box{margin-bottom:18px}.knowledge-toolbar{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 18px;padding:17px 20px;border:1px solid var(--border-thin);background:#f8f4ec}.knowledge-search{display:grid;gap:7px;min-width:min(100%,560px)}.knowledge-search label,.knowledge-form label{display:grid;gap:7px;color:var(--text-dark);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.knowledge-search>div{display:flex;gap:8px}.knowledge-search input,.knowledge-form input,.knowledge-form textarea,.knowledge-form select{width:100%;min-height:40px;padding:9px 11px;border:1px solid var(--border-thin);border-radius:0;background:#fff;color:var(--text-dark);font:400 13px var(--font-sans);letter-spacing:normal;text-transform:none}.knowledge-search input:focus,.knowledge-form input:focus,.knowledge-form textarea:focus,.knowledge-form select:focus{outline:0;border-color:var(--color-wine);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-wine) 11%,transparent)}.knowledge-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.knowledge-form textarea{resize:vertical;line-height:1.5}.knowledge-form label small{font-size:10px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--text-muted)}.knowledge-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(330px,.8fr);gap:18px;align-items:start}.knowledge-list-wrap,.knowledge-editor,.knowledge-guide{border:1px solid var(--border-thin);background:#fff}.knowledge-list-wrap>.section-heading,.knowledge-editor>.section-heading{display:flex;align-items:start;justify-content:space-between;gap:14px;padding:19px 20px;border-bottom:1px solid var(--border-thin)}.knowledge-list-wrap>.section-heading .eyebrow,.knowledge-editor>.section-heading .eyebrow{font-size:9px}.knowledge-list-wrap>.section-heading h2,.knowledge-editor>.section-heading h2{font-size:23px}.knowledge-list{display:grid}.knowledge-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--border-thin)}.knowledge-row:last-child{border-bottom:0}.knowledge-row-main{min-width:0}.knowledge-row-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.knowledge-row h3{margin:0;color:var(--text-dark);font-size:15px;font-weight:650}.knowledge-row p{margin:7px 0 0;color:var(--text-muted);font-size:12px;line-height:1.5}.knowledge-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.knowledge-tags span{padding:3px 6px;border:1px solid var(--border-thin);background:#faf7f1;color:var(--text-muted);font-size:9px;line-height:1.25}.status-badge{display:inline-flex;padding:4px 6px;border:1px solid var(--border-thin);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.status-badge.ok{border-color:#a6b9a4;background:#f3f7f1;color:#4d6b52}.status-badge.muted{background:#f7f3ec;color:var(--text-muted)}.knowledge-row>.btn{flex:0 0 auto}.empty-state{padding:34px 20px;text-align:center;color:var(--text-muted);font-size:13px}.knowledge-guide{padding:24px}.knowledge-guide .eyebrow{margin:0 0 8px;color:var(--color-gold)}.knowledge-guide h2{font-size:25px}.knowledge-guide ol{display:grid;gap:12px;margin:18px 0;padding:0;list-style:none;counter-reset:guide}.knowledge-guide li{display:grid;grid-template-columns:24px 1fr;gap:10px;color:var(--text-dark);font-size:12px;line-height:1.48}.knowledge-guide li::before{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--color-gold);color:var(--color-wine);content:counter(guide);counter-increment:guide;font-size:10px;font-weight:700}.knowledge-guide>p:last-child,.editor-note{margin:0;color:var(--text-muted);font-size:12px;line-height:1.55}.knowledge-editor{padding-bottom:22px}.knowledge-editor .editor-note{padding:16px 20px 0}.knowledge-form{display:grid;gap:14px;padding:18px 20px 0}.field-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.55fr);gap:12px}.field-grid.compact{grid-template-columns:minmax(0,1fr) minmax(120px,.35fr)}.knowledge-form-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:3px}.knowledge-base-page .text-link{color:var(--color-wine);font-size:12px;text-decoration:none}.knowledge-base-page .text-link:hover{text-decoration:underline}@media(max-width:1050px){.knowledge-hero,.knowledge-layout{grid-template-columns:1fr}.knowledge-guide{display:none}}@media(max-width:700px){.knowledge-hero{padding:20px}.knowledge-summary{grid-template-columns:1fr}.knowledge-summary>div{min-height:auto;border-right:0;border-bottom:1px solid var(--border-thin)}.knowledge-summary>div:last-child{border-bottom:0}.knowledge-toolbar,.knowledge-row{align-items:stretch;flex-direction:column}.knowledge-search{min-width:0}.knowledge-search>div{flex-direction:column}.knowledge-toolbar>.btn,.knowledge-row>.btn{width:100%;justify-content:center}.field-grid,.field-grid.compact{grid-template-columns:1fr}.knowledge-row{gap:12px}}

/* ── Internal finance: management accounting stays separate from bookings ── */
.internal-finance-page .app-main{max-width:1540px}.internal-finance-intro{display:grid;gap:5px;margin:0 0 18px;padding:16px 18px;border:1px solid var(--border-thin);border-left:3px solid var(--color-gold);background:var(--color-gold-light)}.internal-finance-intro strong{color:var(--color-wine);font-family:var(--font-serif);font-size:18px;font-weight:500}.internal-finance-intro span{max-width:980px;color:var(--text-muted);font-size:12px;line-height:1.5}.internal-pnl{margin:0 0 18px;border:1px solid var(--border-thin);background:var(--bg-card)}.internal-pnl__head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:19px 20px 16px;border-bottom:1px solid var(--border-thin)}.internal-pnl__head .eyebrow{margin:0;color:var(--color-gold);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.internal-pnl__head h2{margin:4px 0 0;color:var(--color-wine);font-family:var(--font-serif);font-size:24px;font-weight:500}.internal-pnl__head p{max-width:480px;margin:0;color:var(--text-muted);font-size:11.5px;line-height:1.5}.internal-pnl__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.internal-pnl__grid article{display:grid;gap:7px;min-height:102px;padding:17px 19px;border-right:1px solid var(--border-thin);border-bottom:1px solid var(--border-thin)}.internal-pnl__grid article:nth-child(4n){border-right:0}.internal-pnl__grid article:nth-last-child(-n+4){border-bottom:0}.internal-pnl__grid span{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.internal-pnl__grid strong{color:var(--text-dark);font-family:var(--font-serif);font-size:20px;font-weight:500;line-height:1.2}.internal-pnl__grid .contribution{background:var(--color-gold-light)}.internal-pnl__grid .contribution strong{color:var(--color-wine)}.internal-pnl__grid .result{background:color-mix(in srgb,var(--color-wine) 5%,#fff)}.internal-pnl__grid .result strong{color:var(--color-wine);font-size:23px}.internal-pnl__grid .forecast{background:color-mix(in srgb,var(--color-gold-light) 62%,#fff)}.internal-pnl__grid .forecast strong{color:var(--color-wine);font-size:23px}.internal-pnl__grid .forecast small{color:var(--text-muted);font-size:10px;line-height:1.4}.internal-pnl__grid .is-negative strong{color:var(--danger,#a03a2b)}.internal-pnl--restricted{display:flex;align-items:baseline;gap:9px;padding:16px 18px;border-left:3px solid var(--color-gold);background:var(--color-gold-light);color:var(--text-muted);font-size:12px}.internal-pnl--restricted strong{color:var(--color-wine);font-family:var(--font-serif);font-size:18px;font-weight:500}.internal-finance-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 18px;border:1px solid var(--border-thin);background:var(--bg-card)}.internal-finance-summary article{display:grid;gap:8px;min-height:108px;padding:19px;border-right:1px solid var(--border-thin)}.internal-finance-summary article:last-child{border-right:0}.internal-finance-summary span{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.internal-finance-summary strong{color:var(--color-wine);font-family:var(--font-serif);font-size:23px;font-weight:500;line-height:1.14}.internal-finance-summary .result{background:color-mix(in srgb,var(--color-gold-light) 64%,#fff)}.internal-finance-card{margin-bottom:18px;padding:24px}.internal-finance-card .module-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px;padding-bottom:15px;border-bottom:1px solid var(--border-thin)}.internal-finance-card h2{margin:3px 0 0;color:var(--color-wine);font-family:var(--font-serif);font-size:24px;font-weight:500}.internal-finance-card .eyebrow{margin:0;color:var(--color-gold);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.internal-finance-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.internal-finance-form label,.internal-finance-filters label,.internal-finance-setup label{display:flex;flex-direction:column;gap:7px;color:var(--text-dark);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.internal-finance-form input,.internal-finance-form select,.internal-finance-form textarea,.internal-finance-filters input,.internal-finance-filters select,.internal-finance-setup input,.internal-finance-setup select{width:100%;min-height:40px;padding:9px 10px;border:1px solid var(--border-thin);border-radius:0;background:#fff;color:var(--text-dark);font:400 13px var(--font-sans,Arial,sans-serif);letter-spacing:normal;text-transform:none}.internal-finance-form textarea{resize:vertical;line-height:1.45}.internal-finance-form input:focus,.internal-finance-form select:focus,.internal-finance-form textarea:focus,.internal-finance-filters input:focus,.internal-finance-filters select:focus,.internal-finance-setup input:focus,.internal-finance-setup select:focus{outline:0;border-color:var(--color-wine);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-wine) 10%,transparent)}.internal-finance-form small{color:var(--text-muted);font-size:10px;font-weight:400;letter-spacing:normal;text-transform:none}.internal-finance-form .wide{grid-column:span 2}.internal-finance-actions{display:flex;align-items:end}.internal-finance-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:16px 18px;border:1px solid var(--border-thin);background:var(--bg-card)}.internal-finance-filters label{min-width:155px;flex:1}.internal-finance-filters .btn{min-height:40px}.internal-finance-table{width:100%;min-width:900px;border-collapse:collapse}.internal-finance-table th{padding:10px;border-bottom:1px solid var(--text-dark);color:var(--text-muted);font-size:10px;letter-spacing:.08em;text-align:left;text-transform:uppercase;white-space:nowrap}.internal-finance-table td{padding:13px 10px;border-bottom:1px solid var(--border-thin);color:var(--text-dark);font-size:12px;line-height:1.42;vertical-align:top}.internal-finance-table td strong{color:var(--color-wine);font-weight:650}.internal-finance-table td span{display:block;margin-top:3px;color:var(--text-muted);font-size:11px}.internal-finance-table .expense{color:#7b3030}.internal-finance-table .income{color:var(--success)}.internal-finance-setup{margin:22px 0 36px;border:1px solid var(--border-thin);background:var(--bg-card)}.internal-finance-setup details>summary{padding:16px 18px;color:var(--color-wine);cursor:pointer;font-family:var(--font-serif);font-size:19px}.internal-finance-setup details>p{max-width:850px;margin:0;padding:0 18px 16px;color:var(--text-muted);font-size:12px;line-height:1.5}.internal-finance-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:18px;border-top:1px solid var(--border-thin);background:#fffdfa}.internal-finance-setup-grid form{display:grid;align-content:start;gap:12px;padding:18px;border:1px solid var(--border-thin)}.internal-finance-setup-grid h3{margin:0;color:var(--color-wine);font-family:var(--font-serif);font-size:19px;font-weight:500}.internal-finance-setup .check{display:flex;flex-direction:row;align-items:center;gap:8px;color:var(--text-muted);font-size:11px;font-weight:400;letter-spacing:normal;text-transform:none}.internal-finance-setup .check input{width:15px;min-height:15px;padding:0}.internal-finance-setup .btn{justify-self:start}.internal-finance-page .table-wrap{overflow-x:auto}
@media(max-width:1050px){.internal-finance-form{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-finance-summary,.internal-pnl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-finance-summary article:nth-child(2),.internal-pnl__grid article:nth-child(2n){border-right:0}.internal-finance-summary article:nth-child(-n+2),.internal-pnl__grid article:nth-child(-n+6){border-bottom:1px solid var(--border-thin)}.internal-pnl__grid article:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:700px){.internal-finance-summary,.internal-finance-form,.internal-finance-setup-grid,.internal-pnl__grid{grid-template-columns:1fr}.internal-finance-summary article,.internal-pnl__grid article{border-right:0;border-bottom:1px solid var(--border-thin)}.internal-finance-summary article:last-child,.internal-pnl__grid article:last-child{border-bottom:0}.internal-pnl__head,.internal-pnl--restricted{align-items:flex-start;flex-direction:column}.internal-finance-form .wide{grid-column:auto}.internal-finance-card{padding:16px}.internal-finance-card .module-card-head{align-items:flex-start;flex-direction:column}.internal-finance-filters{align-items:stretch;flex-direction:column}.internal-finance-filters .btn,.internal-finance-setup .btn{width:100%;justify-content:center}}

/* Internal finance: cash positions and reconciliation */
.internal-account-balances{margin:0 0 18px;border:1px solid var(--border-thin);background:var(--bg-card)}
.internal-account-balances__head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:19px 20px 16px;border-bottom:1px solid var(--border-thin)}
.internal-account-balances__head .eyebrow{margin:0;color:var(--color-gold);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.internal-account-balances__head h2{margin:4px 0 0;color:var(--color-wine);font-family:var(--font-serif);font-size:24px;font-weight:500}
.internal-account-balances__head p{max-width:530px;margin:0;color:var(--text-muted);font-size:11.5px;line-height:1.5}
.internal-account-balances__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.internal-account-balances__grid article{display:grid;gap:7px;min-height:148px;padding:17px 19px;border-right:1px solid var(--border-thin)}
.internal-account-balances__grid article:last-child{border-right:0}.internal-account-balances__title{display:grid;gap:3px}.internal-account-balances__title span{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.internal-account-balances__title strong{color:var(--color-wine);font-family:var(--font-serif);font-size:19px;font-weight:500}.internal-account-balances__grid>b{color:var(--text-dark);font-family:var(--font-serif);font-size:24px;font-weight:500}.internal-account-balances__grid small{color:var(--text-muted);font-size:10.5px;line-height:1.4}.internal-account-balances__grid em{align-self:end;color:var(--success);font-size:10.5px;font-style:normal;font-weight:700}.internal-account-balances__grid .is-mismatch{background:#fffafa}.internal-account-balances__grid .is-mismatch em{color:var(--danger,#a03a2b)}
.internal-account-balances--restricted{display:flex;align-items:baseline;gap:9px;padding:16px 18px;border-left:3px solid var(--color-gold);background:var(--color-gold-light);color:var(--text-muted);font-size:12px}.internal-account-balances--restricted strong{color:var(--color-wine);font-family:var(--font-serif);font-size:18px;font-weight:500}
.internal-reconciliation{border-top:1px solid var(--border-thin);background:#fffdfa}.internal-reconciliation>summary{display:flex;align-items:center;gap:9px;padding:16px 19px;color:var(--color-wine);cursor:pointer;font-family:var(--font-serif);font-size:18px;list-style:none}.internal-reconciliation>summary::-webkit-details-marker{display:none}.internal-reconciliation>summary::before{content:'+';display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--color-gold);font:500 16px/1 var(--font-sans,Arial,sans-serif);color:var(--color-wine)}.internal-reconciliation[open]>summary::before{content:'–'}
.internal-reconciliation__form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:13px;padding:0 19px 19px}.internal-reconciliation__form label{display:flex;flex-direction:column;gap:7px;color:var(--text-dark);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.internal-reconciliation__form input,.internal-reconciliation__form select{min-height:40px;padding:9px 10px;border:1px solid var(--border-thin);border-radius:0;background:#fff;color:var(--text-dark);font:400 13px var(--font-sans,Arial,sans-serif);letter-spacing:normal;text-transform:none}.internal-reconciliation__form .wide{grid-column:span 2}
@media(max-width:1050px){.internal-account-balances__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-account-balances__grid article:nth-child(2n){border-right:0}.internal-reconciliation__form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.internal-account-balances__head{align-items:flex-start;flex-direction:column}.internal-account-balances__grid,.internal-reconciliation__form{grid-template-columns:1fr}.internal-account-balances__grid article{border-right:0;border-bottom:1px solid var(--border-thin)}.internal-account-balances__grid article:last-child{border-bottom:0}.internal-reconciliation__form .wide{grid-column:auto}.internal-reconciliation__form .btn{width:100%;justify-content:center}}
.app-dialog.backup-confirm-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border-thin); background: #fff; box-shadow: 0 24px 70px rgba(21, 15, 16, .3); }.app-dialog.backup-confirm-dialog::backdrop { background: rgba(39, 16, 22, .55); }.backup-confirm-dialog form { padding: 28px; }.backup-confirm-dialog h2 { margin: 7px 0 10px; color: var(--color-wine); font-family: var(--font-serif); font-size: 27px; font-weight: 500; }.backup-confirm-dialog p:not(.eyebrow) { margin: 0 0 22px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }.backup-confirm-dialog .actions-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Installer and error views are deliberately independent from the app shell:
   they must remain reliable before installation and after a failed request. */
.installer-page, .error-page { min-height: 100vh; margin: 0; padding: 48px 20px; background: var(--bg-main); color: var(--text-dark); }.installer-shell, .error-shell { width: min(860px, 100%); margin: 0 auto; }.installer-page .install-panel, .error-page .auth-panel { padding: 34px; border: 1px solid var(--border-thin); background: #fff; box-shadow: 0 18px 42px rgba(47, 24, 29, .07); }.installer-page h1, .error-page h1 { margin: 6px 0 10px; color: var(--color-wine); font-family: var(--font-serif); font-size: clamp(30px, 4vw, 42px); font-weight: 500; }.installer-page .install-panel > p:not(.eyebrow), .error-page .auth-panel > p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }.installer-page .alert, .error-page .alert { margin: 20px 0; padding: 13px 15px; border: 1px solid var(--border-thin); font-size: 12px; line-height: 1.45; }.installer-page .alert.ok { border-left: 3px solid var(--success); background: var(--success-soft); }.installer-page .alert.bad { border-left: 3px solid var(--danger); background: var(--danger-soft); }.installer-page .checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0; border: 1px solid var(--border-thin); }.installer-page .checklist .check { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-right: 1px solid var(--border-thin); border-bottom: 1px solid var(--border-thin); color: var(--text-dark); font-size: 12px; }.installer-page .checklist .check span { min-width: 35px; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; }.installer-page .checklist .check.ok span { color: var(--success); }.installer-page .checklist .check.bad span { color: var(--danger); }.installer-page .install-form { display: grid; gap: 18px; }.installer-page .form-section { padding: 20px; border: 1px solid var(--border-thin); }.installer-page .form-section h2 { margin: 0 0 16px; color: var(--color-wine); font-family: var(--font-serif); font-size: 22px; font-weight: 500; }.installer-page .install-form label { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; color: var(--text-dark); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.installer-page .install-form input:not([type=checkbox]), .installer-page .install-form select, .installer-page .install-form textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--border-thin); border-radius: 0; background: #fff; color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }.installer-page .install-form textarea { resize: vertical; }.installer-page .install-form input:focus, .installer-page .install-form select:focus, .installer-page .install-form textarea:focus { outline: 0; border-color: var(--color-wine); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-wine) 12%,transparent); }.installer-page .install-form .grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.installer-page .install-form fieldset { margin: 17px 0 0; padding: 12px; border: 1px solid var(--border-thin); }.installer-page .install-form legend { padding: 0 4px; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.installer-page .install-form .check-label { flex-direction: row; align-items: flex-start; color: var(--text-muted); font-size: 12px; font-weight:400; letter-spacing:normal; text-transform:none; }.installer-page .install-form .check-label small, .installer-page .form-hint { color: var(--text-muted); font-size: 11px; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; }.installer-page .install-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }.installer-page .note { margin: 20px 0 0 !important; padding: 13px 15px; border-left: 3px solid var(--color-gold); background: var(--color-gold-light); }.error-shell { width: min(610px, 100%); padding-top: 12vh; }.error-page .actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.installer-page { padding-block: 36px 64px; background: linear-gradient(135deg, #f8f5ee 0%, var(--bg-main) 45%, #eee7db 100%); }.installer-shell { width: min(930px, 100%); }.installer-page .install-panel { padding: clamp(22px, 4vw, 42px); }.install-hero { display: flex; align-items: center; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--border-thin); }.install-mark { display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; border:1px solid var(--color-gold); color:var(--color-gold); background:var(--color-wine); font:500 26px/1 var(--font-serif); }.install-hero .eyebrow { margin:0; }.install-hero h1 { margin:4px 0 6px; }.install-hero p:not(.eyebrow) { margin:0; max-width:620px; color:var(--text-muted); font-size:13px; line-height:1.5; }.install-steps { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:22px 0; border:1px solid var(--border-thin); background:var(--bg-main); }.install-steps span { display:flex; align-items:center; gap:8px; min-height:48px; padding:9px 12px; border-right:1px solid var(--border-thin); color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.install-steps span:last-child { border-right:0; }.install-steps b { display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--border-thin); border-radius:50%; color:var(--text-muted); font-size:10px; }.install-steps .is-current { color:var(--color-wine); background:var(--color-gold-light); }.install-steps .is-current b { border-color:var(--color-wine); background:var(--color-wine); color:#fff; }.installer-page .install-section { position:relative; padding:22px; background:#fffdfa; }.installer-page .install-section--optional { background:var(--bg-main); }.install-section-head { margin-bottom:17px; padding-bottom:14px; border-bottom:1px solid var(--border-thin); }.install-section-head > span { display:block; margin-bottom:4px; color:var(--color-gold); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.installer-page .install-section h2 { margin:0; font-size:23px; }.install-section-head p { margin:4px 0 0; color:var(--text-muted); font-size:12px; line-height:1.45; }.installer-page .install-form fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; background:var(--bg-main); }.installer-page .install-form fieldset legend { width:100%; }.installer-page .install-form .check-label { position:relative; min-height:28px; padding:5px 6px 5px 30px; cursor:pointer; }.installer-page .install-form .check-label input[type=checkbox] { position:absolute; top:6px; left:5px; width:17px; min-width:17px; height:17px; min-height:17px; margin:0; padding:0; appearance:none; -webkit-appearance:none; border:1px solid var(--border-thin); border-radius:0; background:#fff; cursor:pointer; }.installer-page .install-form .check-label input[type=checkbox]:checked { border-color:var(--color-wine); background-color:var(--color-wine); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.3 11.4 13 4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:13px; background-position:center; background-repeat:no-repeat; }.installer-page .install-form .check-label input[type=checkbox]:focus-visible { outline:2px solid color-mix(in srgb,var(--color-wine) 35%,transparent); outline-offset:2px; }.installer-page .install-option { margin-top:18px!important; padding:10px 12px 10px 36px!important; border:1px solid var(--border-thin); background:var(--color-gold-light); }.installer-page .install-option input[type=checkbox] { top:12px!important; left:12px!important; }.install-submit-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border:1px solid rgba(197,168,128,.55); background:var(--color-gold-light); }.install-submit-row p { max-width:470px; margin:0; color:var(--text-muted); font-size:12px; line-height:1.45; }.install-submit-row .btn { flex:0 0 auto; }
@media (max-width: 650px) { .installer-page, .error-page { padding: 24px 14px; }.installer-page .install-panel, .error-page .auth-panel { padding: 22px; }.installer-page .checklist, .installer-page .install-form .grid.two { grid-template-columns: 1fr; }.installer-page .checklist .check { border-right: 0; }.installer-page .install-actions .btn, .installer-page > .btn, .error-page .actions-row .btn { width: 100%; }.install-hero { align-items:flex-start; }.install-mark { flex-basis:42px; width:42px; height:42px; font-size:22px; }.install-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }.install-steps span:nth-child(2) { border-right:0; }.install-steps span:nth-child(-n+2) { border-bottom:1px solid var(--border-thin); }.installer-page .install-form fieldset { grid-template-columns:1fr; }.install-submit-row { align-items:stretch; flex-direction:column; }.install-submit-row .btn { width:100%; justify-content:center; } }
.docs-archive-action-menu { flex: 0 0 auto; }
.docs-archive-empty { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--border-thin); color: var(--text-muted); text-align: center; }
.docs-archive-empty strong { color: var(--text-dark); font-family: var(--font-serif); font-size: 17px; font-weight: 500; }
.docs-archive-pagination { margin-top: 28px; }
@media (max-width: 720px) {
  .docs-archive-group { padding: 16px 16px 2px; }
  .docs-archive-tabs { gap: 18px; }
  .docs-archive-group-head-top { align-items: flex-start; }
  .docs-archive-group-head-left { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .docs-archive-head-divider { display: none; }
  .docs-archive-segment-tags { width: 100%; white-space: normal; }
  .docs-archive-doc-card { align-items: flex-start; flex-wrap: wrap; padding-right: 0; }
  .docs-archive-doc-main { min-width: calc(100% - 46px); }
  .docs-archive-doc-version { width: auto; flex: 0 0 auto; margin-left: 36px; }
  .docs-archive-status { width: auto; flex: 1 1 auto; }
  .docs-archive-action-menu { margin-left: auto; }
}

/* Visual QA: preserve the page frame when technical labels are long. */
.backup-page .export-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
}
.backup-page .export-tile { min-width: 0; }
.backup-page .export-tile strong { overflow-wrap: anywhere; }

/* Payroll: the same restrained visual language as internal finance. */
.payroll-note { margin: 0 0 20px; padding: 15px 18px; border-left: 3px solid var(--accent, #7a2737); background: #f7f2e9; color: #574d49; }
.payroll-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 14px; margin: 0 0 22px; }
.payroll-payee-card { display: grid; gap: 7px; min-width: 0; padding: 18px; border: 1px solid var(--line, #ddd3c6); background: #fffdf9; color: inherit; text-decoration: none; }
.payroll-payee-card:hover { border-color: var(--accent, #7a2737); }
.payroll-payee-card span, .payroll-payee-card small { color: #756d68; }
.payroll-payee-card strong { font-family: Georgia, serif; font-size: 24px; color: var(--accent, #6b1d2a); }
.payroll-payee-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 0 2px; }
.payroll-payee-form label, .payroll-filter { min-width: 0; }
.payroll-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.payroll-filter input, .payroll-filter select { min-width: 130px; }
.payroll-page details summary { cursor: pointer; display: flex; justify-content: space-between; gap: 16px; color: var(--accent, #6b1d2a); }
.payroll-page details summary span { color: #766e69; font-weight: 400; }
@media (max-width: 760px) { .payroll-payee-form { grid-template-columns: 1fr; } .payroll-page details summary { flex-direction: column; } }

/* The payroll page is intentionally a compact working sheet, not a raw form. */
.payroll-shell { max-width: 1420px; padding-top: 34px; padding-bottom: 64px; }
.payroll-header { margin-bottom: 22px; align-items: end; }
.internal-finance-page .topbar > :first-child,
.payroll-header > :first-child { min-width: 0; flex: 1 1 520px; }
.internal-finance-page .topbar-actions,
.payroll-header > .tcrm-language-topbar-actions { flex: 0 0 auto; margin-left: auto; }
.payroll-header { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--border-thin); }
.payroll-header > .payroll-export-menu { flex: 0 0 auto; }
.payroll-header p { max-width: 720px; }
.payroll-entry-card, .payroll-payee-panel { margin-top: 22px; }
.payroll-operation-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; padding-top: 8px; }
.payroll-operation-form label, .payroll-payee-form label { display: grid; gap: 8px; color: #5c4548; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.payroll-operation-form input, .payroll-operation-form select, .payroll-payee-form input, .payroll-payee-form select, .payroll-filter input, .payroll-filter select { width: 100%; min-height: 46px; box-sizing: border-box; border: 1px solid #d9d0c4; border-radius: 0; background: #fffdfa; color: #2d2525; font: inherit; padding: 10px 12px; box-shadow: none; }
.payroll-operation-form select, .payroll-payee-form select, .payroll-filter select { appearance: auto; cursor: pointer; }
.payroll-operation-form input:focus, .payroll-operation-form select:focus, .payroll-payee-form input:focus, .payroll-payee-form select:focus, .payroll-filter input:focus, .payroll-filter select:focus { outline: 2px solid rgba(111,31,46,.26); outline-offset: 1px; border-color: #7a2737; }
.payroll-operation-form small { display: block; color: #8b817b; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.payroll-operation-form .wide { grid-column: span 3; }
.payroll-operation-form .payroll-submit { grid-column: span 1; display: flex; align-items: end; }
.payroll-submit .btn { width: 100%; min-height: 46px; }
.payroll-empty { grid-column: 1 / -1; padding: 26px; border: 1px dashed #d5c8b8; color: #716863; text-align: center; }
.payroll-payee-panel details { padding: 2px; }
.payroll-payee-panel summary { padding: 14px 8px; }
.payroll-payee-form { padding: 18px 8px 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.payroll-ledger-head { align-items: end; gap: 20px; }
.payroll-filter { justify-content: flex-end; }
.payroll-filter input, .payroll-filter select { min-width: 145px; }
.payroll-datepicker { z-index: 50000; }
.payroll-page [data-tcrm-date] { background-image: none; font-variant-numeric: tabular-nums; }
.payroll-page [data-tcrm-date]::placeholder { color: #aaa09a; }
.payroll-page input[type="checkbox"] { -webkit-appearance:none; appearance:none; width:20px; height:20px; min-height:20px; padding:0; margin:0 8px 0 0; vertical-align:middle; border:1px solid #bda781; border-radius:0; background:#fffdfa center/14px no-repeat; cursor:pointer; }
.payroll-page input[type="checkbox"]:checked { border-color:#6e1d2b; background-color:#6e1d2b; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.3 11.4 13 4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow:none; }
.payroll-page input[type="checkbox"]:focus-visible { outline:2px solid var(--color-gold); outline-offset:2px; }
.payroll-export-menu{position:relative;flex:0 0 auto}.payroll-export-menu>summary{list-style:none}.payroll-export-menu>summary::-webkit-details-marker{display:none}.payroll-export-menu>summary{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}.payroll-export-menu[open]>summary{border-color:var(--color-wine);background:var(--color-gold-light);color:var(--color-wine)}.payroll-export-menu>summary span{font-size:15px;line-height:1;transition:transform .16s ease}.payroll-export-menu[open]>summary span{transform:rotate(180deg)}.payroll-export-menu__list{position:absolute;z-index:30;right:0;top:calc(100% + 7px);display:grid;min-width:224px;border:1px solid var(--border-thin);background:#fffdf9;box-shadow:0 16px 30px rgba(53,30,31,.14)}.payroll-export-menu__list a{padding:12px 14px;border-bottom:1px solid var(--border-thin);color:var(--text-dark);font-size:12px;text-decoration:none}.payroll-export-menu__list a:last-child{border-bottom:0}.payroll-export-menu__list a:hover{background:var(--color-gold-light);color:var(--color-wine)}@media(max-width:700px){.payroll-header{align-items:stretch}.payroll-export-menu,.payroll-export-menu>summary{width:100%}.payroll-export-menu>summary{justify-content:space-between}.payroll-export-menu__list{right:auto;left:0;width:100%;box-sizing:border-box}}
.payroll-has-no-payees .payroll-entry-card { display: none; }
.payroll-has-no-payees .payroll-payee-panel { margin-top: 22px; border-color: #c9ac77; }
.payroll-has-no-payees .payroll-payee-panel summary { padding: 18px 8px; font-family: Georgia, serif; font-size: 22px; }
.payroll-has-no-payees .payroll-payee-panel details { display: block; }
.payroll-has-no-payees .payroll-payee-panel details > summary + form { display: grid; }
.payroll-policy-form { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 18px; align-items: end; }
.payroll-policy-form label { display: grid; gap: 8px; color: #5c4548; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.payroll-policy-form input { min-height: 46px; border: 1px solid #d9d0c4; border-radius: 0; padding: 10px 12px; background: #fffdfa; }
.payroll-commission-total { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #ded5c9; }
.payroll-commission-total strong { font-family: Georgia, serif; font-size: 27px; color: #6e1d2b; }
.payroll-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.payroll-trend { margin-top: 22px; }
.payroll-bars { height: 160px; display: flex; align-items: end; gap: 18px; padding: 12px 4px 0; border-bottom: 1px solid #ded5c9; }
.payroll-bar-group { flex: 1; min-width: 42px; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; text-align: center; color: #7a716c; font-size: 12px; }
.payroll-bar-track { display: flex; align-items: end; justify-content: center; gap: 5px; height: 100%; }
.payroll-bar-track i { display: block; width: min(24px, 36%); min-height: 2px; }
.payroll-bar-track .is-accrued, .payroll-legend .is-accrued { background: #c8aa73; }
.payroll-bar-track .is-paid, .payroll-legend .is-paid { background: #6e1d2b; }
.payroll-legend { display: flex; gap: 18px; margin-top: 12px; color: #756b67; font-size: 13px; }
.payroll-legend b { display: inline-block; width: 10px; height: 10px; margin-right: 5px; }
@media (max-width: 1100px) { .payroll-operation-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payroll-operation-form .wide { grid-column: span 2; } .payroll-operation-form .payroll-submit { grid-column: span 2; } .payroll-ledger-head { align-items: flex-start; flex-direction: column; } .payroll-filter { justify-content: flex-start; } }
@media (max-width: 640px) { .payroll-operation-form, .payroll-payee-form { grid-template-columns: 1fr; } .payroll-operation-form .wide, .payroll-operation-form .payroll-submit { grid-column: span 1; } .payroll-filter { width: 100%; } .payroll-filter > * { width: 100%; } }

@media (max-width: 1200px) {
  .users-page .module-grid { grid-template-columns: 1fr; }
  .users-page .module-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .users-page .search-form { width: 100%; }
  .users-page .search-form input { flex: 1 1 220px; }
}

/* Client proposal delivery — keeps the SMTP action inside the itinerary's branded sharing card. */
.itineraries-page .proposal-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--color-gold) 55%, transparent);
}
.itineraries-page .proposal-delivery-row strong {
  display: block;
  color: var(--color-wine);
  font-size: 12px;
}
.itineraries-page .proposal-delivery-row small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.itineraries-page .proposal-delivery-row .button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.itineraries-page .public-link-box .field-note {
  margin: 10px 0 0;
  font-size: 10px;
}
@media (max-width: 640px) {
  .itineraries-page .proposal-delivery-row { align-items: stretch; flex-direction: column; }
  .itineraries-page .proposal-delivery-row .button { width: 100%; }
}

/* Ownership is a sales-control field, so it reads as context rather than a spare form cell. */
.itineraries-page .itinerary-owner-row { align-items: stretch; }
.itineraries-page .itinerary-owner-note {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 78px;
  padding: 14px 16px;
  border-left: 3px solid var(--color-gold, #c8aa73);
  background: rgba(200, 170, 115, .08);
  color: var(--text-muted, #756b67);
  font-size: 12px;
  line-height: 1.45;
}
.itineraries-page .itinerary-owner-note strong {
  color: var(--color-wine, #6e1d2b);
  font-size: 12px;
}
@media (max-width: 760px) {
  .itineraries-page .itinerary-owner-note { min-height: 0; }
}

/* Operations: a manager starts with their own accountable work, then expands to the team. */
.operations-scope {
  display: inline-flex;
  gap: 0;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--color-gold, #c8aa73) 70%, transparent);
  background: rgba(255, 253, 249, .55);
}
.operations-scope a {
  padding: 8px 12px;
  color: var(--text-muted, #756b67);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.operations-scope a + a { border-left: 1px solid color-mix(in srgb, var(--color-gold, #c8aa73) 55%, transparent); }
.operations-scope a:hover,
.operations-scope a:focus-visible { color: var(--color-wine, #6e1d2b); background: rgba(200, 170, 115, .12); outline: none; }
.operations-scope a.is-active { color: #fffdf9; background: var(--color-wine, #6e1d2b); }

/* Knowledge editor: prevent long select/input content from expanding the frame. */
.knowledge-layout,.knowledge-layout>*,.knowledge-list-wrap,.knowledge-editor,.knowledge-editor .field-grid,.knowledge-editor .field-grid>label{min-width:0}.knowledge-editor{overflow:hidden}.knowledge-editor input,.knowledge-editor textarea,.knowledge-editor select{box-sizing:border-box;min-width:0;max-width:100%}.knowledge-editor select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knowledge-editor .field-grid{grid-template-columns:minmax(0,1fr) minmax(0,.55fr)}.knowledge-editor .field-grid.compact{grid-template-columns:minmax(0,1fr) minmax(0,.35fr)}

/* Mobile tab bars: keep the page frame intact and allow a deliberate
   horizontal swipe instead of letting a long set of labels widen the page. */
@media (max-width: 700px) {
  .tabs-row,
  .tabs-pills,
  .task-scope-tabs,
  .sub-tabs-nav,
  .docs-archive-tabs,
  .operations-scope {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tabs-row > *,
  .tabs-pills > *,
  .task-scope-tabs > *,
  .sub-tabs-nav > *,
  .docs-archive-tabs > *,
  .operations-scope > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Mobile list audit: record identity, context, totals and actions have their
   own full-width sections. Desktop grids retain their existing layout. */
@media screen and (max-width: 760px) {
  .app-body :is(.app-main, .main-content),
  :is(.app-main, .main-content) > section,
  :is(.app-main, .main-content) .workspace,
  :is(.app-main, .main-content) .entity-page-shell,
  :is(.app-main, .main-content) .dir-layout,
  :is(.app-main, .main-content) .dir-layout > * { min-width: 0; max-width: 100%; }

  :is(.app-main, .main-content) .topbar { align-items: flex-start; gap: 16px; }
  :is(.app-main, .main-content) .topbar-actions,
  :is(.app-main, .main-content) .topbar-actions .user-menu,
  :is(.app-main, .main-content) .topbar-actions .header-actions { min-width: 0; max-width: 100%; flex-wrap: wrap !important; gap: 10px; }
  :is(.app-main, .main-content) .topbar-actions { width: 100%; justify-content: flex-start !important; }
  :is(.app-main, .main-content) .topbar-actions > .user-menu { flex: 1 1 100%; justify-content: flex-start; border-left: 0; padding-left: 0; }
  :is(.app-main, .main-content) .topbar-actions > a { white-space: nowrap; }

  :is(.app-main, .main-content) .luxury-card,
  .directories-page .module-card { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 18px !important; }
  :is(.app-main, .main-content) .card-header { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
  :is(.app-main, .main-content) .card-header > div { min-width: 0; max-width: 100%; }
  :is(.app-main, .main-content) .card-header > div:last-child:not(:first-child),
  :is(.app-main, .main-content) .entity-header-actions { display: flex; width: 100%; flex-wrap: wrap; gap: 10px !important; }
  :is(.app-main, .main-content) .card-header .btn,
  :is(.app-main, .main-content) .entity-header-actions .btn { max-width: 100%; white-space: normal; line-height: 1.4; }
  .clients-page-shell .card-header > div:last-child .btn { flex: 1 1 100%; justify-content: center; text-align: center; }

  :is(.app-main, .main-content) .filter-row.r1,
  :is(.app-main, .main-content) .filter-row.r2 { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
  :is(.app-main, .main-content) .filter-bar,
  :is(.app-main, .main-content) .search-bar { min-width: 0; max-width: 100%; }
  :is(.app-main, .main-content) .search-bar { flex-wrap: wrap; gap: 12px; }
  :is(.app-main, .main-content) .search-bar > .input-wrapper { flex: 1 1 100%; min-width: 0; }
  :is(.app-main, .main-content) .input-wrapper,
  :is(.app-main, .main-content) .list-tools,
  :is(.app-main, .main-content) .list-tools label { min-width: 0; max-width: 100%; }
  :is(.app-main, .main-content) .list-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  :is(.app-main, .main-content) .list-tools { width: 100%; flex-wrap: wrap; }
  :is(.app-main, .main-content) .list-tools label { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  :is(.app-main, .main-content) .list-tools .tcrm-select-wrap { width: 100%; }
  :is(.app-main, .main-content) .list-tools .tcrm-select-trigger { min-width: 0; width: 100%; }
  :is(.app-main, .main-content) .count-line { max-width: 100%; flex-wrap: wrap; line-height: 1.6; }
  :is(.app-main, .main-content) .pager { max-width: 100%; flex-wrap: wrap; gap: 8px; }
  :is(.app-main, .main-content) .chip-row { flex-wrap: wrap; gap: 8px; }
  :is(.app-main, .main-content) .chip { max-width: 100%; white-space: normal; line-height: 1.4; }

  :is(.app-main, .main-content) .tabs-underline,
  :is(.app-main, .main-content) .booking-scope-tabs,
  :is(.app-main, .main-content) .booking-stage-tabs,
  :is(.app-main, .main-content) .tabs-row,
  :is(.app-main, .main-content) .task-scope-tabs,
  :is(.app-main, .main-content) .docs-archive-tabs { min-width: 0; max-width: 100%; width: 100%; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; }
  :is(.app-main, .main-content) .booking-scope-tabs > *,
  :is(.app-main, .main-content) .booking-stage-tabs > * { flex: 0 0 auto; }
  :is(.app-main, .main-content) .kpi-card { min-width: 0; padding: 18px 14px; }
  :is(.app-main, .main-content) .kpi-value { font-size: 25px; overflow-wrap: normal; }
  :is(.app-main, .main-content) .kpi-note { overflow-wrap: anywhere; }

  :is(.app-main, .main-content) .rows { min-width: 0; gap: 16px; }
  :is(.app-main, .main-content) .rows > .row { min-width: 0; max-width: 100%; }
  :is(.app-main, .main-content) .rows .row-main { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; padding: 18px !important; align-items: start; }
  :is(.app-main, .main-content) .rows .row-main > div { min-width: 0; max-width: 100%; }
  :is(.app-main, .main-content) .rows .row-main > div + div { padding-top: 14px; border-top: 1px solid var(--border-thin); }
  :is(.app-main, .main-content) .rows .row-title { font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
  :is(.app-main, .main-content) .rows .row-kicker { flex-wrap: wrap; line-height: 1.5; }
  :is(.app-main, .main-content) .rows .row-kicker .doc-number-chip { flex-shrink: 0; }
  :is(.app-main, .main-content) .rows .row-meta,
  :is(.app-main, .main-content) .rows .row-people { line-height: 1.6; overflow-wrap: anywhere; }
  :is(.app-main, .main-content) .rows .pill,
  :is(.app-main, .main-content) .rows .operational-pill,
  :is(.app-main, .main-content) .rows .workflow-stage-pill,
  :is(.app-main, .main-content) .rows .src-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; box-sizing: border-box; }
  :is(.app-main, .main-content) .rows .value-block { display: flex; flex-direction: column; grid-column: auto; align-items: flex-start; justify-content: flex-start; gap: 8px; text-align: left; }
  :is(.app-main, .main-content) .rows .value-amount { font-size: 24px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  :is(.app-main, .main-content) .rows .row-owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :is(.app-main, .main-content) .rows > .row > .row-actions { position: relative; top: auto; right: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; opacity: 1; padding: 12px 18px; border-top: 1px solid var(--border-thin); gap: 8px; }
  :is(.app-main, .main-content) .rows .row-actions > a,
  :is(.app-main, .main-content) .rows .row-actions > details > summary { width: 44px; height: 44px; }
  :is(.app-main, .main-content) .rows .menu { top: auto; bottom: 52px; max-width: min(270px, calc(100vw - 76px)); min-width: 190px; }

  :is(.app-main, .main-content) .task-row-main { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; padding: 16px !important; }
  :is(.app-main, .main-content) .task-row-main > div { min-width: 0; }
  :is(.app-main, .main-content) .task-row-secondary,
  :is(.app-main, .main-content) .task-row-status { border-top: 1px solid var(--border-thin); padding-top: 12px !important; }
  :is(.app-main, .main-content) .task-row-title { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
  :is(.app-main, .main-content) .task-row-actions { position: relative; top: auto; right: auto; justify-content: flex-end; padding: 0 16px 14px; opacity: 1; }
  :is(.app-main, .main-content) .task-row-kicker,
  :is(.app-main, .main-content) .task-row-badges,
  :is(.app-main, .main-content) .task-row-meta { flex-wrap: wrap; }

  .directories-page .dir-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .directories-page .dir-table-header { flex-wrap: wrap; gap: 14px; }
  .directories-page .dir-search-form { margin-left: 0; width: 100%; min-width: 0; }
  .directories-page .dir-search-form input { min-width: 0; flex: 1; }
  .directories-page .dir-layout .grid.two,
  .directories-page .dir-layout .grid.three { grid-template-columns: minmax(0, 1fr) !important; }

  :is(.app-main, .main-content) .docs-filter-more { width: 100%; min-width: 0; }
  :is(.app-main, .main-content) .docs-filter-panel { position: relative; top: auto; left: auto; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
  :is(.app-main, .main-content) .docs-filter-panel input,
  :is(.app-main, .main-content) .docs-filter-panel .tcrm-select-wrap { min-width: 0; max-width: 100%; }

  .finance-pro .finance-payment-form__grid { grid-template-columns: minmax(0, 1fr); }
  .finance-pro .finance-pro-hero { grid-template-columns: minmax(0, 1fr); }
  .finance-pro .finance-pro-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .finance-pro .finance-natural-table { min-width: 0; max-width: 100%; overflow-x: auto; }
  .finance-pro .finance-natural-table > div { min-width: 460px; }
  .finance-pro .finance-payment-form__grid > label { min-width: 0; }
  .finance-pro .finance-payment-form__grid > label[style] { grid-column: 1 / -1 !important; }

  :is(.app-main, .main-content) .table-wrap,
  :is(.app-main, .main-content) .table-scroll,
  :is(.app-main, .main-content) .finance-pro-table-scroll { min-width: 0; max-width: 100%; box-sizing: border-box; }
  :is(.app-main, .main-content) .mobile-record-table,
  :is(.app-main, .main-content) .mobile-record-table tbody { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; }
  :is(.app-main, .main-content) .mobile-record-table thead,
  :is(.app-main, .main-content) .mobile-record-table colgroup { display: none; }
  :is(.app-main, .main-content) .mobile-record-table tr { display: block; padding: 16px; margin-bottom: 14px; border: 1px solid var(--border-thin); background: var(--bg-card, #fff); }
  :is(.app-main, .main-content) .mobile-record-table td { display: block; width: auto !important; min-width: 0; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal !important; font-size: 13px; line-height: 1.5; }
  :is(.app-main, .main-content) .mobile-record-table td + td { margin-top: 14px; }
  :is(.app-main, .main-content) .mobile-record-table td[data-mobile-label]:not([data-mobile-label=""]):before { content: attr(data-mobile-label); display: block; margin-bottom: 4px; color: var(--text-muted); font: 600 10px/1.5 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; overflow-wrap: normal; }
  :is(.app-main, .main-content) .mobile-record-table .row-actions { position: static; opacity: 1; display: flex; flex-wrap: wrap; gap: 12px; }
  :is(.app-main, .main-content) .mobile-record-table .row-actions > a,
  :is(.app-main, .main-content) .mobile-record-table .row-actions button { display: inline-flex; align-items: center; justify-content: center; width: auto !important; height: auto !important; min-height: 40px; padding: 8px 12px !important; white-space: normal; }
  :is(.app-main, .main-content) .mobile-record-table .row-actions form { max-width: 100%; }
  :is(.app-main, .main-content) .mobile-record-table .mobile-record-summary { background: var(--bg-main); }
  :is(.app-main, .main-content) .mobile-record-table pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
  :is(.app-main, .main-content) .mobile-record-table button,
  :is(.app-main, .main-content) .mobile-record-table a { max-width: 100%; white-space: normal; }

  .app-body.has-tcrm-assistant .tcrm-assistant .tcrm-assistant-launch[aria-expanded="false"] { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
  .app-body.has-tcrm-assistant .tcrm-assistant .tcrm-assistant-launch[aria-expanded="false"] > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}