/* =====================================================================
   Дизайн-система Rental CRM — Material Design (vanilla, MUI-вид)
   Шрифт: Roboto. Глубина: Material elevation (умбра+пенумбра+ambient).
   Радиусы: Material 2 (4px). Кнопки: contained/outlined/text, UPPERCASE, ripple.
   Поля: Material outlined. Статусы: Material chips. Primary: янтарь проката.
   ===================================================================== */

/* ---------- Шрифт Roboto (self-hosted, кириллица + латиница) ---------- */
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/roboto-v51-cyrillic_latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/roboto-v51-cyrillic_latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/roboto-v51-cyrillic_latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/roboto-v51-cyrillic_latin-700.woff2') format('woff2');
}

/* ===================================================================== */
/* :root — Material токены                                               */
/* ===================================================================== */
:root {
  /* --- Material color system ---
     primary #C2410C: оранж-янтарь проката, белый текст AA 5.18:1 (≥4.5 ✓). */
  --primary:        #C2410C;   /* янтарно-оранжевый проката (Material-каркас) */
  --primary-dark:   #A8380A;   /* hover/active заливки */
  --primary-darker: #8F2F08;
  --on-primary:     #FFFFFF;   /* контраст с --primary = 5.18:1, AA ✓ */
  --primary-soft:   rgba(194,65,12,0.10);    /* state layer / подложка */
  --primary-hover:  rgba(194,65,12,0.08);    /* hover overlay outlined/text */
  --primary-text:   #B03A0A;   /* текст primary на белом, AA 5.6:1 (цена, ссылки, активная вкладка) */

  --secondary:      #00897B;   /* Material teal 600 */
  --secondary-dark: #00695C;
  --on-secondary:   #FFFFFF;

  --surface:        #FFFFFF;   /* карточка/диалог */
  --surface-variant:#F2F2F2;   /* filled-подложки, заголовки таблиц, hover-строки */
  --background:     #FAFAFA;   /* Material light background */
  --on-surface:     #212121;   /* Material text primary */
  --on-surface-med: #5F5F5F;   /* text secondary (~0.6) */
  --on-surface-dis: #9E9E9E;   /* disabled/placeholder (~0.38) */
  --divider:        rgba(0,0,0,0.12);
  --divider-strong: rgba(0,0,0,0.20);
  --hover-overlay:  rgba(0,0,0,0.04);   /* state layer на surface */

  /* --- Семантика статусов (Material) --- */
  --error:        #D32F2F;
  --error-dark:   #B71C1C;
  --error-soft:   rgba(211,47,47,0.12);
  --error-text:   #C62828;
  --success:      #2E7D32;
  --success-soft: rgba(46,125,50,0.12);
  --success-text: #2E7D32;
  --warning:      #F57C00;
  --warning-soft: rgba(245,124,0,0.14);
  --warning-text: #E65100;
  --info:         #0288D1;
  --info-soft:    rgba(2,136,209,0.12);
  --info-text:    #0277BD;
  --purple:       #7B1FA2;
  --purple-soft:  rgba(123,31,162,0.12);
  --neutral:      #616161;
  --neutral-soft: rgba(0,0,0,0.08);

  /* --- Радиусы Material 2 --- */
  --r-input: 4px;
  --r-btn:   4px;
  --r-card:  4px;
  --r-modal: 4px;
  --r-chip:  16px;   /* chips — pill */

  /* --- Спейсинг (база 4px / 8dp grid) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-6: 24px;  --s-8: 32px;

  /* --- Шрифты --- */
  --font:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- Material Elevation (умбра + пенумбра + ambient) --- */
  --elev-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --elev-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --elev-3: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
  --elev-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  --elev-6: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
  --elev-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
  --elev-16: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
  --elev-24: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);

  /* совместимость со старыми именами */
  --bg: var(--background);
  --card: var(--surface);
  --ink: var(--on-surface);
  --text: var(--on-surface);
  --text-2: var(--on-surface-med);
  --text-3: var(--on-surface-med);
  --muted: var(--on-surface-med);
  --line: var(--divider);
  --border: var(--divider);
  --accent: var(--primary);
  --radius: var(--r-card);
}

/* ===================================================================== */
/* База                                                                  */
/* ===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--background);
  color: var(--on-surface);
  font-size: 14px;            /* Material body */
  line-height: 1.5;
  letter-spacing: 0.00938em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===================================================================== */
/* Типографика — Material type scale                                     */
/* ===================================================================== */
h1, h2, h3 { margin: 0; color: var(--on-surface); }
h1 { font-size: 1.5rem;  font-weight: 500; line-height: 1.334; letter-spacing: 0; }   /* h5/h6 уровень */
h2 { font-size: 1.25rem; font-weight: 500; line-height: 1.6;   letter-spacing: 0.0075em; margin: 0 0 var(--s-2); } /* dialog title */
h3 { font-size: 1rem;    font-weight: 500; line-height: 1.6;   letter-spacing: 0.0094em; }  /* subtitle1 */

.label, .section-label, .overline {
  font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--on-surface-med);
}

/* tabular-nums для денег/чисел (шрифт остаётся Roboto) */
.num, .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ===================================================================== */
/* Кнопки — Material contained / outlined / text                         */
/* ===================================================================== */
button { font: inherit; cursor: pointer; }

.btn,
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  position: relative;
  overflow: hidden;                 /* ripple-clip */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  text-transform: uppercase;        /* Material 2 кнопки */
  letter-spacing: 0.08em;
  padding: 6px 16px;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--primary-text);
  transition: background-color .2s cubic-bezier(.4,0,.2,1),
              box-shadow .28s cubic-bezier(.4,0,.2,1),
              border-color .2s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Contained — primary заливка, elevation 2 → hover 4 */
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--elev-2);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--elev-4); }
.btn-primary:active { box-shadow: var(--elev-8); }

/* Outlined — контур primary, текст primary, без заливки */
.btn-secondary {
  background: transparent;
  color: var(--primary-text);
  border-color: var(--divider-strong);
}
.btn-secondary:hover {
  background: var(--primary-hover);
  border-color: var(--primary);
}

/* Text/Ghost — только текст, hover подложка */
.btn-ghost {
  background: transparent;
  color: var(--primary-text);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--primary-hover); }

/* Danger — text-кнопка error по умолчанию (для «Удалить» в строках) */
.btn-danger {
  background: transparent;
  color: var(--error-text);
  border-color: transparent;
}
.btn-danger:hover { background: var(--error-soft); }

/* Small — компактная text-кнопка (действия в строках/карточках) */
.btn-sm {
  position: relative; overflow: hidden;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--primary-text);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  line-height: 1.6;
  transition: background-color .2s cubic-bezier(.4,0,.2,1), box-shadow .28s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-sm:hover { background: var(--primary-hover); }
/* Композиции small + роль */
.btn-sm.btn-primary {
  background: var(--primary); color: var(--on-primary); box-shadow: var(--elev-2);
}
.btn-sm.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--elev-4); }
.btn-sm.btn-danger { background: transparent; color: var(--error-text); }
.btn-sm.btn-danger:hover { background: var(--error-soft); }

/* Disabled — Material */
.btn[disabled], button[disabled],
.btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-danger[disabled], .btn-sm[disabled] {
  color: var(--on-surface-dis);
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.btn-primary[disabled], .btn-sm.btn-primary[disabled] {
  background: rgba(0,0,0,0.12); color: var(--on-surface-dis);
}

/* ---- Ripple (создаётся ripple.js) ---- */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  transform: scale(0);
  pointer-events: none;
  animation: ripple-anim .55s cubic-bezier(.4,0,.2,1);
}
.ripple.ripple-light { background: #fff; opacity: 0.4; }
@keyframes ripple-anim {
  to { transform: scale(1); opacity: 0; }
}

/* ===================================================================== */
/* Поля ввода — Material outlined                                        */
/* ===================================================================== */
input, select, textarea {
  font: inherit;
  font-family: var(--font);
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--divider-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--on-surface);
  transition: border-color .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1);
}
input::placeholder, textarea::placeholder { color: var(--on-surface-dis); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--on-surface); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);   /* эмуляция 2px Material-рамки фокуса */
}
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="time"] {
  font-variant-numeric: tabular-nums;
}

/* Native select — Material chevron */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--on-surface-med) 50%),
    linear-gradient(135deg, var(--on-surface-med) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--primary) 50%),
    linear-gradient(135deg, var(--primary) 50%, transparent 50%);
}

input[type="date"], input[type="datetime-local"], input[type="time"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-height: 0;
  accent-color: var(--primary); cursor: pointer;
  box-shadow: none;
}
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }

input[type="file"] {
  padding: 9px 12px; min-height: 44px;
  background: var(--surface-variant);
  border: 1px solid var(--divider); cursor: pointer;
}

/* ===================================================================== */
/* Карточки — Material card (surface, elevation 1 → hover 2)             */
/* ===================================================================== */
.card {
  background: var(--surface);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  padding: var(--s-6);
}

.item-card, .client-row, .row-card, .booking-card {
  position: relative;
  background: var(--surface);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
}

/* ===================================================================== */
/* Топбар — Material app bar (primary фон, elevation 4)                  */
/* ===================================================================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: 0 var(--s-4);
  min-height: 64px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--elev-4);
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 1.25rem; font-weight: 500; color: var(--on-primary); letter-spacing: 0.0075em; }
.topbar-actions { display: flex; gap: var(--s-2); align-items: center; }
/* Кнопки на app bar — белый текст, белый hover-слой, белый ripple */
.topbar .btn-ghost, .topbar .btn-primary, .topbar .btn-secondary {
  color: var(--on-primary);
}
.topbar .btn-ghost { border-color: transparent; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,0.12); }
.topbar .btn-primary {
  background: rgba(255,255,255,0.16); box-shadow: none; color: var(--on-primary);
}
.topbar .btn-primary:hover { background: rgba(255,255,255,0.26); box-shadow: none; }
.topbar .btn-primary .ripple, .topbar .btn-ghost .ripple { background: #fff; opacity: 0.4; }

/* ===================================================================== */
/* Layout: drawer слева + content справа                                 */
/* ===================================================================== */
.layout { display: flex; align-items: flex-start; min-height: calc(100vh - 64px); }

.container { flex: 1 1 auto; min-width: 0; max-width: 1100px; margin: 0 auto; padding: var(--s-6) var(--s-4); }
.container:has(#tbl) { max-width: 1240px; }

/* Иконка-кнопка в app bar (гамбургер) — Material icon button */
.appbar-icon-btn {
  display: none; /* видна только в мобильном режиме */
  position: relative; overflow: hidden;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: calc(var(--s-2) * -1);
  background: transparent; border: none; border-radius: 50%;
  color: var(--on-primary); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.appbar-icon-btn:hover { background: rgba(255,255,255,0.12); }
.appbar-icon-btn .ripple { background: #fff; opacity: 0.4; }

/* ===================================================================== */
/* Navigation drawer — Material permanent (240px)                        */
/* ===================================================================== */
.drawer {
  flex: 0 0 240px; width: 240px;
  align-self: stretch;
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding: var(--s-2) 0;
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 9;
}
.nav-item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s-3);
  width: calc(100% - var(--s-2) * 2);
  margin: 0 var(--s-2);
  min-height: 48px; padding: 0 var(--s-3);
  background: transparent; border: none;
  border-radius: var(--r-btn);
  color: var(--on-surface-med);
  font-family: var(--font);
  font-size: 0.875rem; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-item .nav-ico { flex: 0 0 24px; color: var(--on-surface-med); transition: color .15s; }
.nav-item:hover { background: var(--primary-hover); color: var(--on-surface); }
.nav-item:hover .nav-ico { color: var(--on-surface); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-text); }
.nav-item.active .nav-ico { color: var(--primary-text); }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
}
.nav-item .ripple { background: var(--primary); opacity: 0.14; }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 19;
  background: rgba(0,0,0,0.32);
}

.section-title { font-size: 1.25rem; font-weight: 500; margin-bottom: var(--s-4); color: var(--on-surface); }

/* ===================================================================== */
/* Платежи                                                               */
/* ===================================================================== */
.pay-totals { display: flex; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.pay-total-card {
  flex: 1 1 180px; min-width: 160px;
  background: var(--surface); box-shadow: var(--elev-1);
  border-radius: var(--r-card); padding: var(--s-4) var(--s-4);
  border-left: 4px solid var(--divider-strong);
}
.pay-total-card.pay-income { border-left-color: var(--success); }
.pay-total-card.pay-expense { border-left-color: var(--error); }
.pay-total-lbl {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--on-surface-med); margin-bottom: var(--s-1);
}
.pay-total-val { font-size: 1.5rem; font-weight: 500; }
.pay-total-card.pay-income .pay-total-val { color: var(--success-text); }
.pay-total-card.pay-expense .pay-total-val { color: var(--error-text); }
.pay-table-wrap th.num-head, .pay-table-wrap td.pay-amount { text-align: right; }
.pay-amount { font-weight: 500; }
.pay-amount.pay-income { color: var(--success-text); }
.pay-amount.pay-expense { color: var(--error-text); }
.pay-chip {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-chip);
  font-size: 0.75rem; font-weight: 500;
}
.pay-chip.pay-income { background: var(--success-soft); color: var(--success-text); }
.pay-chip.pay-expense { background: var(--error-soft); color: var(--error-text); }

/* ===================================================================== */
/* Штрафы (реестр)                                                       */
/* ===================================================================== */
.fines-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap;
}
.fines-head .section-title { margin-bottom: 0; }
.fines-toolbar {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; margin-bottom: var(--s-4);
}
.fines-status-filter { flex: 1 1 auto; }
.fines-search { flex: 0 1 240px; max-width: 280px; }
.fines-total {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  background: var(--warning-soft); color: var(--warning-text);
  padding: 8px var(--s-4); border-radius: var(--r-chip);
  font-size: 0.875rem; font-weight: 500; margin-bottom: var(--s-4);
}
.fines-total[hidden] { display: none; }
.fines-total-val { font-weight: 600; }
.fines-table-wrap th:last-child, .fines-table-wrap td:last-child { text-align: right; }
.fines-table-wrap td.num { font-variant-numeric: tabular-nums; }
.fines-actions { justify-content: flex-end; }

/* Chip типа штрафа (нейтральный) */
.badge-fine-type { background: var(--info-soft); color: var(--info-text); }
.badge-fine-type::before { display: none; }
/* Chips статусов штрафа */
.badge-fine-open   { background: var(--warning-soft); color: var(--warning-text); }
.badge-fine-paid   { background: var(--success-soft); color: var(--success-text); }
.badge-fine-waived { background: var(--neutral-soft); color: var(--neutral); }

/* Мобильный: таблица штрафов схлопывается в карточки (как платежи) */
@media (max-width: 720px) {
  .fines-table-wrap { overflow-x: visible; border: none; background: transparent; box-shadow: none; }
  #finesTable { min-width: 0; border-collapse: separate; }
  #finesTable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #finesTable tbody tr {
    display: block; background: var(--surface);
    border-radius: var(--r-card); box-shadow: var(--elev-1);
    padding: var(--s-2) var(--s-4); margin-bottom: var(--s-3);
  }
  #finesTable tbody tr:hover { background: var(--surface); }
  #finesTable td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    padding: 10px 0; border-bottom: 1px solid var(--divider);
    text-align: right;
  }
  #finesTable td:last-child { border-bottom: none; }
  #finesTable td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 0.75rem; font-weight: 500; color: var(--on-surface-med);
  }
  .fines-table-wrap td:last-child, .fines-actions { justify-content: flex-end; flex-wrap: wrap; }
}

/* Тулбар фильтров */
.toolbar { display: flex; gap: var(--s-3); margin-bottom: var(--s-6); flex-wrap: wrap; align-items: center; }
.toolbar select, .toolbar input { width: auto; flex: 1 1 200px; max-width: 320px; }
.toolbar .btn-primary { flex: 0 0 auto; }

/* ===================================================================== */
/* Состояния: пусто / ошибка / загрузка                                  */
/* ===================================================================== */
.empty, .empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  text-align: center; color: var(--on-surface-med);
  padding: var(--s-8) var(--s-4);
  font-size: 0.875rem;
}
.empty[hidden], .empty-state[hidden] { display: none; }
.empty-ico { color: var(--on-surface-dis); margin-bottom: var(--s-1); }
.empty-title {
  color: var(--on-surface); font-weight: 500; font-size: 1.05rem;
}
.empty-hint { color: var(--on-surface-med); font-size: 0.875rem; max-width: 340px; }
/* состояние ошибки загрузки (отличается от «пусто») */
.empty.error .empty-ico { color: var(--error); }
.empty.error .empty-title { color: var(--error-text); }
.err {
  color: var(--error); font-size: 0.8125rem; min-height: 1.1em; font-weight: 400;
}
.loading { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--on-surface-med); }
.loading::before {
  content: ""; width: 18px; height: 18px;
  border: 2px solid var(--primary-soft); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================== */
/* Таблицы — Material data table                                         */
/* ===================================================================== */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
}
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
}
th {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--on-surface-med);
  letter-spacing: 0.02em;
}
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: var(--hover-overlay); }
tr:last-child td { border-bottom: none; }
td .num, td.num { font-variant-numeric: tabular-nums; }

.row-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; max-width: 260px; }
.login-link { white-space: nowrap; }
.login-link-code {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
  font-size: 0.8rem; color: var(--on-surface-med);
  background: var(--surface-variant); border: 1px solid var(--divider);
  border-radius: var(--r-input); padding: 3px 8px;
}

/* ===================================================================== */
/* Chips статусов — Material chips                                       */
/* ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  height: 24px;
  border-radius: var(--r-chip);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  border: none;
  white-space: nowrap;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}

/* Товары */
.badge-ok, .badge-available { background: var(--success-soft); color: var(--success-text); }
.badge-off { background: var(--neutral-soft); color: var(--neutral); }
.badge-rented { background: var(--warning-soft); color: var(--warning-text); }
.badge-repair { background: var(--error-soft); color: var(--error-text); }
/* Живая доступность объекта (вычислена из активных броней) */
.badge-out      { background: var(--error-soft);   color: var(--error-text); }   /* выдан, занят */
.badge-maint    { background: var(--warning-soft); color: var(--warning-text); } /* ручной ремонт (приоритет) */
.badge-reserved { background: var(--warning-soft); color: var(--warning-text); } /* забронирован на сейчас */
.badge-partial  { background: var(--info-soft);    color: var(--info-text); }    /* qty>1, частично занят */

/* Аренды */
.badge-bk-new       { background: var(--neutral-soft); color: var(--neutral); }
.badge-bk-confirmed { background: var(--info-soft);    color: var(--info-text); }
.badge-bk-issued    { background: var(--warning-soft); color: var(--warning-text); }
.badge-bk-active    { background: var(--success-soft); color: var(--success-text); }
.badge-bk-returned  { background: var(--purple-soft);  color: var(--purple); }
.badge-bk-closed    { background: var(--neutral-soft); color: var(--neutral); }
.badge-bk-cancelled { background: var(--error-soft);   color: var(--error-text); }

.bk-sep { color: var(--on-surface-dis); }

/* Бейдж юрлица в списке клиентов */
.badge-company { background: var(--info-soft); color: var(--info-text); }

/* ===================================================================== */
/* Форма клиента: segmented-переключатель типа + реквизиты юрлица         */
/* ===================================================================== */
.segmented {
  display: inline-flex;
  background: var(--surface-2, var(--neutral-soft));
  border-radius: var(--r-chip);
  padding: 3px;
  gap: 2px;
  width: fit-content;
}
.segmented .seg-opt {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 18px;
  border-radius: calc(var(--r-chip) - 2px);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--on-surface-med);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.segmented .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.segmented .seg-opt span { line-height: 1; }
.segmented .seg-opt:has(input:checked) {
  background: var(--surface);
  color: var(--primary-text, var(--primary));
  box-shadow: var(--elev-1, 0 1px 2px rgba(0,0,0,0.12));
}
.segmented .seg-opt:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.fld[hidden] { display: none; }
.company-fields[hidden] { display: none; }
.company-fields {
  display: flex; flex-direction: column; gap: var(--s-3, 12px);
  padding: var(--s-3, 12px);
  margin-bottom: var(--s-2, 8px);
  background: var(--info-soft);
  border-radius: var(--r-card, 12px);
}
.company-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3, 12px);
}
@media (max-width: 560px) {
  .company-grid { grid-template-columns: 1fr; }
}

/* ===================================================================== */
/* Заявки с витрины (бейдж сайдбара, чипы фильтра, статус-бейджи)         */
/* ===================================================================== */
.nav-badge {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--error-text, #d32f2f); color: #fff;
  font-size: 0.75rem; font-weight: 600; line-height: 1;
}
.nav-item.active .nav-badge { background: var(--error-text, #d32f2f); }

.req-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.req-chip {
  padding: 6px 14px; border-radius: 16px;
  border: 1px solid var(--divider);
  background: var(--surface); color: var(--on-surface-med);
  font-family: var(--font); font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.req-chip:hover { background: var(--primary-hover); }
.req-chip.active {
  background: var(--primary-soft); color: var(--primary-text);
  border-color: transparent;
}

.badge-req-new      { background: var(--warning-soft); color: var(--warning-text); }
.badge-req-accepted { background: var(--success-soft); color: var(--success-text); }
.badge-req-rejected { background: var(--error-soft);   color: var(--error-text); }

.req-comment { font-style: italic; color: var(--on-surface-med); }
.req-created { font-size: 0.75rem; color: var(--on-surface-dis); margin-top: 2px; }

/* Витрина: блок ссылки (slug → URL) */
.shop-url-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2);
}
.shop-url-label { font-size: 0.875rem; color: var(--on-surface-med); }
.shop-url-link {
  color: var(--primary-text); font-size: 0.875rem;
  word-break: break-all; text-decoration: none;
}
.shop-url-link:hover { text-decoration: underline; }

/* Карточка объекта: переключатель публикации в витрине */
.item-publish {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border: 1px solid var(--divider); border-radius: var(--r-btn);
  background: var(--surface-2, transparent);
}
.item-publish .settings-card-hint { margin: 4px 0 0 48px; }

/* ===================================================================== */
/* Карточка аренды (модалка) — Material card-контент                     */
/* ===================================================================== */
.bkcard {
  max-width: 560px;
  position: relative;
}
/* Тонкая статусная полоса сверху диалога брони (Material — цветной акцент) */
.bkcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--neutral);
  border-radius: var(--r-modal) var(--r-modal) 0 0;
}
.bkcard-new::before, .bkcard-closed::before     { background: var(--neutral); }
.bkcard-confirmed::before               { background: var(--info); }
.bkcard-issued::before                  { background: var(--warning); }
.bkcard-active::before                  { background: var(--success); }
.bkcard-returned::before                { background: var(--purple); }
.bkcard-cancelled::before               { background: var(--error); }
.bkcard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.bk-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; }
.bk-dl dt {
  color: var(--on-surface-med); font-size: 0.8125rem; font-weight: 400;
  align-self: center;
}
.bk-dl dd { margin: 0; font-size: 0.9375rem; color: var(--on-surface); }
.bk-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }
.bk-sub { font-size: 0.9375rem; font-weight: 500; margin: var(--s-3) 0 var(--s-2); }
.bk-empty { padding: var(--s-3); font-size: 0.875rem; }

/* ===================================================================== */
/* Документы аренды — генерация + список                                 */
/* ===================================================================== */
.bk-doc-gen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.bk-doc-gen-label {
  font-size: 0.8125rem; color: var(--on-surface-med);
  margin-right: var(--s-1);
}
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.doc-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--divider);
  border-radius: var(--r-input);
  background: var(--surface);
}
.doc-item-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.doc-num { font-variant-numeric: tabular-nums; font-weight: 500; }
.doc-date { font-size: 0.8125rem; color: var(--on-surface-med); }
.doc-item-acts { display: flex; gap: var(--s-2); flex-shrink: 0; }
.chip-doc {
  display: inline-block; font-size: 0.75rem; font-weight: 500;
  padding: 2px 10px; border-radius: var(--r-chip); white-space: nowrap;
  background: var(--surface-variant); color: var(--on-surface-med);
}
.chip-doc-contract   { background: var(--primary-soft); color: var(--primary-text); }
.chip-doc-handover   { background: var(--info-soft);    color: var(--info-text); }
.chip-doc-return_act { background: var(--purple-soft);  color: var(--purple); }
.chip-doc-invoice    { background: var(--success-soft); color: var(--success-text); }

@media (max-width: 560px) {
  .doc-item { flex-direction: column; align-items: stretch; }
  .doc-item-acts { width: 100%; }
  .doc-item-acts .btn-sm { flex: 1 1 auto; min-height: 40px; }
}

/* ===================================================================== */
/* Доп. услуги и комплект — список позиций + пересчёт итога               */
/* ===================================================================== */
.extras-mini .extra-name { font-weight: 500; }
.extras-mini .extra-note { font-size: 0.75rem; color: var(--on-surface-med); margin-top: 2px; }
.badge-extra-service { background: var(--info-soft);    color: var(--info-text); }
.badge-extra-item    { background: var(--purple-soft);  color: var(--purple); }
.bk-totals {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin-top: var(--s-3); padding: 10px 14px;
  background: var(--surface-variant); border-radius: var(--r-input);
  font-size: 0.875rem; color: var(--on-surface-med);
}
.bk-totals .num { font-weight: 500; color: var(--on-surface); }
.bk-totals-sep { color: var(--on-surface-dis); }
.bk-totals-grand { font-weight: 600; color: var(--on-surface); }
.bk-totals-grand .num { font-weight: 700; }

@media (max-width: 560px) {
  .extras-mini, .extras-mini thead, .extras-mini tbody, .extras-mini tr, .extras-mini td, .extras-mini th { display: block; }
  .extras-mini thead { display: none; }
  .extras-mini tr { padding: var(--s-2) 0; border-bottom: 1px solid var(--divider); }
  .extras-mini td { padding: 2px 12px; }
  .extras-mini td[data-label]::before { content: attr(data-label) ': '; color: var(--on-surface-med); font-size: 0.75rem; }
  .extras-mini .row-actions { display: flex; gap: var(--s-2); margin-top: 4px; }
  .extras-mini .row-actions .btn-sm { flex: 1 1 auto; min-height: 40px; }
}

/* ===================================================================== */
/* Таблица платежей — Material data table (плотная)                      */
/* ===================================================================== */
.pay-table {
  min-width: 0;
  border: 1px solid var(--divider);
  border-radius: var(--r-input);
  overflow: hidden;
}
.pay-table th, .pay-table td { padding: 8px 12px; font-size: 0.8125rem; }
.pay-table td { font-variant-numeric: tabular-nums; }
.pay-income  { color: var(--success-text); font-weight: 500; }
.pay-expense { color: var(--error-text);   font-weight: 500; }

/* ===================================================================== */
/* Баланс клиента — Material surface-variant блок                        */
/* ===================================================================== */
.balance-box {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  padding: 12px 16px;
  background: var(--surface-variant);
  border: none;
  border-radius: var(--r-input);
  font-size: 0.875rem;
  color: var(--on-surface-med);
}
.balance-box span { display: inline-flex; gap: 6px; align-items: baseline; }
.balance-box b {
  font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--on-surface);
}
.balance-box .debt b { color: var(--error-text); }
.balance-box .debt { font-weight: 500; color: var(--error-text); }
.balance-box .balance-total {
  flex-basis: 100%;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.balance-box .balance-total b { font-weight: 700; }

/* Мини-список штрафов клиента (в модалке клиента) */
.client-fines { margin: 0 0 var(--s-2); }
.client-fines-title {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--on-surface-med);
  margin: var(--s-2) 0 6px;
}
.fines-mini { margin-top: 0; }

/* ===================================================================== */
/* Поля-метки / чекбоксы (в формах)                                      */
/* ===================================================================== */
.fld {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--on-surface-med);
}
.fld > select, .fld > input, .fld > textarea, .fld > span + input {
  color: var(--on-surface);
  font-size: 14px; font-weight: 400;
}
.fld > span { color: var(--on-surface-med); }
.chk {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 0.875rem; color: var(--on-surface);
}
.chk input { width: auto; }

/* ===================================================================== */
/* Сетка товаров — Material cards                                        */
/* ===================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-4);
  align-items: stretch;   /* карточки в ряду одной высоты */
}
.item-card {
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 100%;           /* тянем под высоту ряда */
}
.item-photo {
  width: 100%; height: 160px; object-fit: cover; display: block;
  background: var(--surface-variant);
}
.item-photo.placeholder {
  height: 160px;   /* паритет с фото — карточки в ряду одной высоты */
  display: flex; align-items: center; justify-content: center;
  color: var(--on-surface-dis);
  border-bottom: 1px solid var(--divider);
  background: var(--surface-variant);
}
.item-photo.placeholder svg { opacity: 0.7; }
.item-body { padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.item-name { font-weight: 500; font-size: 1rem; color: var(--on-surface); }
.item-cat {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--on-surface-med);
}
.item-price {
  color: var(--primary-text); font-weight: 500; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.item-meta {
  font-size: 0.8125rem; color: var(--on-surface-med);
  font-variant-numeric: tabular-nums;
}
.item-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-top: auto; padding-top: var(--s-2);   /* действия всегда у нижнего края карточки */
}
.item-actions .btn-sm { flex: 0 1 auto; }

.item-card { transition: box-shadow .28s cubic-bezier(.4,0,.2,1); }
.item-card:hover { box-shadow: var(--elev-3); }

/* ===================================================================== */
/* Список клиентов / аренд — Material cards                              */
/* ===================================================================== */
.list { display: flex; flex-direction: column; gap: var(--s-3); }
.client-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 14px 16px;
  transition: box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.client-info { min-width: 0; }
.client-name { font-weight: 500; font-size: 1rem; color: var(--on-surface); }
.client-sub {
  font-size: 0.875rem; color: var(--on-surface-med);
  font-variant-numeric: tabular-nums;
}
.client-actions { display: flex; gap: var(--s-2); flex-shrink: 0; align-items: center; flex-wrap: wrap; }

/* Строки аренд (есть статус-бейдж брони) — кликабельны, выраженный подъём */
.client-row:has([class*="badge-bk-"]) { cursor: pointer; }
.client-row:has([class*="badge-bk-"]):hover { box-shadow: var(--elev-3); }
.client-row .btn-sm { cursor: pointer; }

/* ===================================================================== */
/* Экран входа — Material card по центру                                 */
/* ===================================================================== */
body.auth {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--s-4);
  background: var(--background);
}
body.auth .card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: var(--s-4);
  box-shadow: var(--elev-8);
  padding: var(--s-8) var(--s-6);
}
body.auth h1 { text-align: center; margin-bottom: var(--s-2); color: var(--primary-text); }
body.auth .btn-primary { margin-top: var(--s-1); }

/* ===================================================================== */
/* Модалки — Material dialog (scrim 0.5, surface, elevation 24)          */
/* ===================================================================== */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s-8) var(--s-4); z-index: 30; overflow-y: auto;
  animation: scrim-in .2s ease;
}
@keyframes scrim-in { from { background: rgba(0,0,0,0); } }
.modal-bg[hidden] { display: none; }
.modal {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: var(--s-3);
  border-radius: var(--r-modal);
  box-shadow: var(--elev-24);
  padding: var(--s-6);
  animation: dialog-in .2s cubic-bezier(.4,0,.2,1);
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
.modal h2 { margin-bottom: var(--s-1); }
.modal .row2 { display: flex; gap: var(--s-3); }
.modal .row2 > * { flex: 1; min-width: 0; }
.file-label {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--on-surface-med); display: flex; flex-direction: column; gap: 6px;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: var(--s-2);
  margin-top: var(--s-3);
}

/* ===================================================================== */
/* Богатая карточка объекта (Material tabs + панели)                     */
/* ===================================================================== */
.itemcard {
  max-width: 760px;
  gap: var(--s-2);
}
.itemcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.itemcard-head h2 { margin: 0; }

/* Material-табы карточки: горизонтальный ряд с нижним индикатором.
   Sticky внутри прокручиваемой модалки (.modal-bg overflow-y:auto), чтобы при
   длинной форме полоса табов не уезжала вверх. Непрозрачный фон + z-index, чтобы
   контент панелей проходил под табами, а не сквозь них. */
.card-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--divider);
  overflow-x: auto;
  margin: var(--s-2) 0 var(--s-3);
  scrollbar-width: thin;
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
}
.card-tab {
  position: relative;
  flex: 0 0 auto;
  background: transparent; border: none;
  padding: 12px var(--s-4);
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-surface-med);
  cursor: pointer; white-space: nowrap;
  border-radius: var(--r-card) var(--r-card) 0 0;
  transition: color .15s, background .15s;
}
.card-tab:hover { background: var(--primary-hover); color: var(--on-surface); }
.card-tab.active { color: var(--primary-text); }
.card-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--primary);
}
.card-tab[disabled], .card-tab[hidden] { display: none; }

.card-panel {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.card-panel[hidden] { display: none; }

.card-subhead {
  margin-top: var(--s-2);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--on-surface-med);
}
.card-subhint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--on-surface-dis); }

.card-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px;
  color: var(--on-surface-dis); font-size: 0.95rem;
}

/* Доп. характеристики — динамические строки */
.attrs-list { display: flex; flex-direction: column; gap: var(--s-2); }
.attr-row { display: flex; gap: var(--s-2); align-items: center; }
.attr-row .attr-label { flex: 0 0 40%; min-width: 0; }
.attr-row .attr-value { flex: 1 1 auto; min-width: 0; }
.attr-row .attr-del {
  flex: 0 0 auto; min-width: 36px; padding: 6px 10px;
}
.attrs-add { align-self: flex-start; }

/* Карточка объекта в гриде — кликабельна целиком */
.item-card-click { cursor: pointer; }
.item-card-click:hover { box-shadow: var(--elev-4); }
.item-card-click:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===================================================================== */
/* Таб «Цены» — тарифные тиры + превью                                   */
/* ===================================================================== */
.price-base {
  background: var(--surface-variant);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
}
.price-base-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.price-base-lbl { font-size: 0.8125rem; color: var(--on-surface-med); }
.price-base-val { font-weight: 500; color: var(--on-surface); }
.price-base-hint { font-size: 0.75rem; color: var(--on-surface-dis); margin-top: 2px; }

.tiers-wrap { overflow-x: auto; border-radius: var(--r-card); }
.tiers-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tiers-table th, .tiers-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--divider);
}
.tiers-table thead th {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--on-surface-med); background: var(--surface-variant);
}
.tiers-table .num-head { text-align: right; }
.tiers-table td.tier-price { text-align: right; font-weight: 500; color: var(--primary-text); }
.tiers-table tbody tr:hover { background: var(--hover-overlay); }
.tier-more { color: var(--on-surface-med); font-style: italic; }
.tier-act { width: 1%; white-space: nowrap; text-align: right; }
.tiers-empty, .files-empty {
  font-size: 0.875rem; color: var(--on-surface-dis); padding: var(--s-2) 0;
}

.tier-form {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end;
}
.tier-form .fld { flex: 1 1 130px; min-width: 0; }
.tier-form .btn-sm { flex: 0 0 auto; min-height: 40px; }
.tier-hint { font-size: 0.75rem; color: var(--on-surface-dis); }

.tier-preview {
  display: flex; align-items: flex-end; gap: var(--s-4);
  background: var(--primary-soft); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); flex-wrap: wrap;
}
.tier-preview .fld { flex: 0 0 160px; }
.tier-preview-out { font-size: 1.125rem; font-weight: 500; color: var(--primary-text); }

/* ===================================================================== */
/* Таб «Файлы» — галерея фото + документы                                */
/* ===================================================================== */
.files-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
}
.photo-cell {
  position: relative;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--elev-1); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s;
}
.photo-cell:hover { box-shadow: var(--elev-3); }
.photo-cell.is-main { outline: 2px solid var(--primary); outline-offset: -2px; }
.photo-thumb { width: 100%; aspect-ratio: 4 / 3; background: var(--surface-variant); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-main-badge {
  position: absolute; top: 6px; left: 6px;
  background: var(--primary); color: var(--on-primary);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: var(--r-chip); box-shadow: var(--elev-1);
}
.photo-cap {
  font-size: 0.75rem; color: var(--on-surface-med);
  padding: 6px var(--s-2) 0; word-break: break-word;
}
.photo-acts {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  padding: var(--s-2); margin-top: auto;
}
.photo-acts .btn-sm { flex: 1 1 auto; min-height: 34px; padding: 5px 8px; }

.files-docs { display: flex; flex-direction: column; gap: var(--s-1); }
.doc-row {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--r-card); padding: var(--s-2) var(--s-3);
}
.doc-ico { color: var(--on-surface-med); flex: 0 0 auto; }
.doc-name {
  flex: 1 1 auto; min-width: 0; color: var(--primary-text); font-size: 0.875rem;
  text-decoration: none; word-break: break-word;
}
.doc-name:hover { text-decoration: underline; }
.doc-del { flex: 0 0 auto; min-width: 34px; }

.files-upload { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.files-upload .fld { flex: 1 1 200px; min-width: 0; }
.files-upload .file-label { flex: 1 1 100%; }
.files-upload .btn-sm { flex: 0 0 auto; min-height: 40px; }

/* ===================================================================== */
/* Таб «Обслуживание» — журнал ТО + бейдж просрочки                      */
/* ===================================================================== */
.maint-overdue {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  background: var(--error-soft); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2);
}
.maint-overdue-txt { font-size: 0.8125rem; color: var(--error-text); }

.maint-wrap { overflow-x: auto; border-radius: var(--r-card); }
.maint-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.maint-table th, .maint-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
.maint-table thead th {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--on-surface-med); background: var(--surface-variant); white-space: nowrap;
}
.maint-table .num-head { text-align: right; }
.maint-table td.num-cell { text-align: right; white-space: nowrap; }
.maint-table tbody tr:hover { background: var(--hover-overlay); }
.maint-table tr.maint-row-overdue { background: var(--error-soft); }
.maint-table tr.maint-row-overdue:hover { background: rgba(211,47,47,0.18); }
.maint-act { width: 1%; white-space: nowrap; text-align: right; }
.maint-empty { font-size: 0.875rem; color: var(--on-surface-dis); padding: var(--s-2) 0; }

/* чипы типа обслуживания */
.chip-maint {
  display: inline-block; font-size: 0.75rem; font-weight: 500;
  padding: 2px 10px; border-radius: var(--r-chip); white-space: nowrap;
  background: var(--surface-variant); color: var(--on-surface-med);
}
.chip-maint-service { background: var(--primary-soft); color: var(--primary-text); }
.chip-maint-repair { background: var(--error-soft); color: var(--error-text); }
.chip-maint-insurance { background: rgba(25,118,210,0.12); color: #1565C0; }
.chip-maint-inspection { background: rgba(245,124,0,0.14); color: #E65100; }

.maint-form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.maint-form .fld { flex: 1 1 150px; min-width: 0; }
.maint-form .maint-fld-wide { flex: 1 1 240px; }
.maint-form .btn-sm { flex: 0 0 auto; min-height: 40px; }
.fld-hint { font-weight: 400; color: var(--on-surface-dis); font-size: 0.8em; }
.maint-hint { font-size: 0.75rem; color: var(--on-surface-dis); }

/* ===================================================================== */
/* Таб «История» — счётчики + список броней                              */
/* ===================================================================== */
.hist-counters { margin-bottom: var(--s-4); }
.hist-bookings { gap: 0; }
.hist-row { cursor: pointer; }
.hist-row-right { align-items: center; gap: var(--s-3); }
.hist-sum { font-weight: 500; color: var(--on-surface); white-space: nowrap; }
.hist-empty { font-size: 0.9375rem; color: var(--on-surface-med); padding: var(--s-6) var(--s-2); text-align: center; }

/* ===================================================================== */
/* Доступность — Material focus                                          */
/* ===================================================================== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.tab:focus-visible { outline-offset: -2px; }
.topbar :focus-visible { outline-color: #fff; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ===================================================================== */
/* Настройки — реквизиты + редактор шаблонов                             */
/* ===================================================================== */
.settings-tabs { position: static; max-width: 920px; }
.settings-card {
  max-width: 920px;
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.settings-card-head { margin-bottom: var(--s-4); }
.settings-card-title { font-size: 1.0625rem; font-weight: 500; color: var(--on-surface); }
.settings-card-hint {
  margin-top: 4px;
  font-size: 0.8125rem; color: var(--on-surface-med);
}
.settings-form { display: flex; flex-direction: column; gap: var(--s-4); }
.settings-form .row2 { display: flex; gap: var(--s-3); }
.settings-form .row2 > * { flex: 1; min-width: 0; }
.settings-actions {
  display: flex; gap: var(--s-3); justify-content: flex-end;
  flex-wrap: wrap;
}

/* Редактор шаблонов */
.tpl-toolbar {
  display: flex; align-items: flex-end; gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.tpl-type-fld { flex: 0 1 280px; min-width: 180px; }
.tpl-status {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: 12px;
  font-size: 0.75rem; font-weight: 500;
  margin-bottom: 8px;
}
.tpl-status-default { background: var(--surface-2, rgba(0,0,0,0.06)); color: var(--on-surface-med); }
.tpl-status-custom { background: var(--primary-soft, rgba(194,65,12,0.12)); color: var(--primary-text); }
.tpl-body {
  width: 100%;
  min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px; line-height: 1.55;
  white-space: pre;
  overflow-wrap: normal;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* ---------- Telegram-уведомления ---------- */
.ntf-block {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--divider);
}
.ntf-block:first-of-type { border-top: none; padding-top: 0; }
.ntf-block-title {
  font-size: 0.9375rem; font-weight: 500; color: var(--on-surface);
  margin-bottom: var(--s-2);
}
.ntf-hint { margin-top: 0; margin-bottom: var(--s-3); }
.ntf-hint a { color: var(--primary-text); }
.ntf-hint code, .ntf-block-title code {
  background: var(--surface-variant); border-radius: 3px;
  padding: 1px 5px; font-size: 0.85em;
}
.ntf-status-line {
  margin-bottom: var(--s-3);
  font-size: 0.875rem; color: var(--on-surface);
}
.ntf-ok { color: var(--success); }
.ntf-token-form { display: flex; flex-direction: column; gap: var(--s-3); }
.ntf-token-fld { max-width: 480px; }
.ntf-token-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ntf-chat-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.ntf-chat-actions a.btn-primary { text-decoration: none; }

/* Material-switch */
.ntf-switch {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0; cursor: pointer; user-select: none;
}
.ntf-switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.ntf-switch-track {
  position: relative; flex: 0 0 auto;
  width: 36px; height: 14px; border-radius: 7px;
  background: var(--on-surface-dis);
  transition: background 0.2s;
}
.ntf-switch-thumb {
  position: absolute; top: -3px; left: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fafafa; box-shadow: var(--elev-2);
  transition: transform 0.2s, background 0.2s;
}
.ntf-switch > input:checked + .ntf-switch-track { background: var(--primary-soft); }
.ntf-switch > input:checked + .ntf-switch-track .ntf-switch-thumb {
  transform: translateX(18px); background: var(--primary);
}
.ntf-switch > input:focus-visible + .ntf-switch-track {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.ntf-switch > input:disabled + .ntf-switch-track { opacity: 0.45; }
.ntf-switch > input:disabled ~ .ntf-switch-label { color: var(--on-surface-dis); }
.ntf-switch-label { font-size: 0.9375rem; color: var(--on-surface); }
.ntf-hour-row { margin: 0 0 var(--s-2) 48px; }
.ntf-hour-fld { max-width: 240px; }
.ntf-master {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--divider);
}
.ntf-test-actions { justify-content: flex-start; margin-top: 0; }

/* Инвайт клиента в карточке клиента */
.ntf-client-invite { margin: var(--s-2) 0 var(--s-3); }
.ntf-client-linked {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; color: var(--on-surface-med);
}
.ntf-client-link { margin-top: var(--s-3); }
.ntf-link-row { display: flex; gap: var(--s-2); align-items: stretch; }
.ntf-link-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--divider-strong); border-radius: var(--r-card);
  padding: 0 10px; font-size: 0.8125rem; color: var(--on-surface);
  background: var(--surface-variant);
}

.tpl-placeholders {
  border: 1px solid var(--divider);
  border-radius: var(--r-card, 4px);
  padding: 0;
}
.tpl-placeholders > summary {
  cursor: pointer; list-style: revert;
  padding: 10px var(--s-3);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--on-surface-med);
}
.tpl-placeholders[open] > summary { border-bottom: 1px solid var(--divider); }
.tpl-ph-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: var(--s-3);
}
.tpl-ph {
  display: inline-block;
  padding: 3px 8px;
  background: var(--surface-2, rgba(0,0,0,0.05));
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--on-surface);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tpl-ph:hover { background: var(--primary-hover); border-color: var(--primary); }

/* ===================================================================== */
/* Адаптив                                                               */
/* ===================================================================== */
/* ≤900px — drawer прячется, появляется гамбургер → modal drawer со scrim */
@media (max-width: 900px) {
  .appbar-icon-btn { display: inline-flex; }
  .layout { display: block; }
  .drawer {
    position: fixed; top: 0; bottom: 0; left: 0;
    height: 100vh; z-index: 20;
    box-shadow: var(--elev-16);
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    padding-top: var(--s-2);
  }
  .drawer.open { transform: translateX(0); }
  .nav-item { min-height: 48px; }
}

@media (max-width: 700px) {
  .container { padding: var(--s-4) var(--s-3); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-3); }
  /* В узкой карточке два UPPERCASE-действия не влезают в строку → столбиком,
     каждое на всю ширину: ничего не обрезается, палец попадает (Material touch). */
  .item-actions { flex-direction: column; align-items: stretch; }
  .item-actions .btn-sm { width: 100%; min-height: 40px; padding: 6px 10px; }
  .client-row { flex-direction: column; align-items: stretch; }
  .client-actions { justify-content: flex-end; }
  .modal .row2 { flex-direction: column; }
  /* Богатая карточка на мобильном: на всю ширину, табы скроллятся, поля столбцом */
  .itemcard { max-width: none; }
  .card-tab { padding: 12px var(--s-3); }
  .attr-row { flex-wrap: wrap; }
  .attr-row .attr-label, .attr-row .attr-value { flex: 1 1 100%; }
  .attr-row .attr-del { flex: 0 0 auto; align-self: flex-end; }
  /* Цены: форма тарифа и превью — столбиком */
  .tier-form .fld, .tier-form .btn-sm { flex: 1 1 100%; }
  .tier-preview { flex-direction: column; align-items: stretch; }
  .tier-preview .fld { flex: 1 1 100%; }
  .tiers-table th, .tiers-table td { padding: 8px 10px; }
  /* Файлы: галерея 2 в ряд, загрузка столбиком */
  .files-gallery { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .files-upload .fld, .files-upload .btn-sm { flex: 1 1 100%; }
  /* Обслуживание: таблица → карточки строк, форма столбиком */
  .maint-form .fld, .maint-form .maint-fld-wide, .maint-form .btn-sm { flex: 1 1 100%; }
  .maint-wrap { overflow-x: visible; }
  .maint-table { min-width: 0; border-collapse: separate; }
  .maint-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .maint-table tbody tr {
    display: block; background: var(--surface);
    border-radius: var(--r-card); box-shadow: var(--elev-1);
    padding: var(--s-2) var(--s-4); margin-bottom: var(--s-3);
  }
  .maint-table tbody tr:hover { background: var(--surface); }
  .maint-table tbody tr.maint-row-overdue { background: var(--error-soft); }
  .maint-table td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    padding: 10px 0; border-bottom: 1px solid var(--divider);
    text-align: right; white-space: normal;
  }
  .maint-table td:last-child { border-bottom: none; }
  .maint-table td.num-cell { text-align: right; }
  .maint-table td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 0.75rem; font-weight: 500; color: var(--on-surface-med);
  }
  .maint-table td.maint-act::before { content: ""; }
  .maint-table td.maint-act { justify-content: flex-end; }
  /* История: счётчики 2×2, строка брони столбиком */
  .hist-counters { grid-template-columns: repeat(2, 1fr); }
  .hist-row-right { justify-content: flex-end; }
  /* Настройки: формы столбиком, textarea и действия на всю ширину */
  .settings-card { padding: var(--s-4); }
  .settings-form .row2 { flex-direction: column; }
  .settings-actions { flex-direction: column-reverse; align-items: stretch; }
  .settings-actions .btn-primary, .settings-actions .btn-secondary { width: 100%; min-height: 44px; }
  .tpl-toolbar { flex-direction: column; align-items: stretch; }
  .tpl-type-fld { flex: 1 1 100%; }
  .tpl-body { min-height: 260px; }
  /* Telegram-уведомления: кнопки/поля на всю ширину */
  .ntf-token-actions { flex-direction: column; }
  .ntf-token-actions .btn-sm { width: 100%; min-height: 44px; }
  .ntf-chat-actions { flex-direction: column; align-items: stretch; }
  .ntf-chat-actions .btn-sm, .ntf-chat-actions a.btn-primary { width: 100%; min-height: 44px; }
  .ntf-test-actions .btn-sm { width: 100%; min-height: 44px; }
  .ntf-hour-row { margin-left: 0; }
  .ntf-token-fld, .ntf-hour-fld { max-width: none; }
  .topbar { min-height: 56px; gap: var(--s-2); padding: 0 var(--s-3); }
  .topbar h1 { font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .topbar-actions { flex-shrink: 0; }
  .toolbar select, .toolbar input { flex: 1 1 100%; max-width: none; }
  th, td { padding: 12px; }

  /* Супер-админ: таблица арендодателей → карточки */
  .table-wrap { overflow-x: visible; border: none; background: transparent; box-shadow: none; }
  #tbl { min-width: 0; border-collapse: separate; }
  #tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #tbl tbody tr {
    display: block;
    background: var(--surface);
    border: none;
    border-radius: var(--r-card);
    box-shadow: var(--elev-1);
    padding: var(--s-2) var(--s-4);
    margin-bottom: var(--s-3);
  }
  #tbl tbody tr:hover { background: var(--surface); }
  #tbl td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    padding: 10px 0; border-bottom: 1px solid var(--divider);
    text-align: right; white-space: normal;
  }
  #tbl td:last-child { border-bottom: none; }
  #tbl td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: 0.75rem; font-weight: 500;
    color: var(--on-surface-med);
  }
  #tbl td.cell-name { font-size: 1rem; font-weight: 500; color: var(--on-surface); }
  #tbl .login-link { white-space: normal; }
  #tbl .login-link-code { max-width: 100%; }
  #tbl td.row-actions { max-width: none; }
  #tbl td.row-actions::before { align-self: center; }
  #tbl .row-actions { justify-content: flex-end; }
  #tbl .row-actions .btn-sm { min-height: 36px; }

  /* Платежи: таблица → карточки строк */
  .pay-table-wrap { overflow-x: visible; border: none; background: transparent; box-shadow: none; }
  #paymentsTable { min-width: 0; border-collapse: separate; }
  #paymentsTable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #paymentsTable tbody tr {
    display: block; background: var(--surface);
    border-radius: var(--r-card); box-shadow: var(--elev-1);
    padding: var(--s-2) var(--s-4); margin-bottom: var(--s-3);
  }
  #paymentsTable tbody tr:hover { background: var(--surface); }
  #paymentsTable td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    padding: 10px 0; border-bottom: 1px solid var(--divider);
    text-align: right;
  }
  #paymentsTable td:last-child { border-bottom: none; }
  #paymentsTable td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 0.75rem; font-weight: 500; color: var(--on-surface-med);
  }
}

/* Узкие телефоны: товары в одну колонку — кнопки действий не обрезаются */
@media (max-width: 430px) {
  .grid { grid-template-columns: 1fr; }
  .item-photo, .item-photo.placeholder { height: 180px; }
}

/* =================== КАЛЕНДАРЬ (Material timeline) =================== */
.cal-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.cal-nav { display: inline-flex; align-items: center; gap: var(--s-1); }
.cal-nav .btn-sm { min-width: 40px; }
.cal-range {
  font-size: 0.9375rem; font-weight: 500; color: var(--on-surface);
  font-variant-numeric: tabular-nums; flex: 1 1 auto; text-align: center;
}
.cal-spans {
  display: inline-flex; border: 1px solid var(--divider-strong);
  border-radius: var(--r-btn); overflow: hidden;
}
.cal-span-btn {
  appearance: none; background: var(--surface); border: none;
  position: relative; overflow: hidden;
  padding: 0 var(--s-3); min-height: 36px;
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--primary-text); cursor: pointer;
  border-right: 1px solid var(--divider-strong);
  transition: background .2s cubic-bezier(.4,0,.2,1);
}
.cal-span-btn:last-child { border-right: none; }
.cal-span-btn:hover { background: var(--primary-hover); }
.cal-span-btn.active { background: var(--primary); color: var(--on-primary); }

/* карточка-сетка */
#cal-grid {
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--elev-1); overflow-x: auto; overflow-y: hidden;
}
#cal-grid[hidden] { display: none; }
.cal-row { display: flex; align-items: stretch; min-width: max-content; }
.cal-row + .cal-row { border-top: 1px solid var(--divider); }

/* левая колонка объектов */
.cal-objcell {
  flex: 0 0 168px; width: 168px; box-sizing: border-box;
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  align-items: flex-start; justify-content: center;
  border-right: 1px solid var(--divider);
  position: sticky; left: 0; z-index: 3; background: var(--surface);
}
.cal-objname {
  font-size: 0.875rem; font-weight: 500; color: var(--on-surface);
  line-height: 1.3; overflow-wrap: anywhere;
}
.cal-objhead {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--on-surface-med);
  justify-content: center;
}

/* заголовок дней */
.cal-head { position: sticky; top: 0; z-index: 4; background: var(--surface); }
.cal-head .cal-objcell { background: var(--surface-variant); z-index: 5; }
.cal-head .cal-days { background: var(--surface); }

.cal-days {
  display: grid;
  grid-template-columns: repeat(var(--cols, 7), minmax(44px, 1fr));
  flex: 1 1 auto; min-width: 0;
}

.cal-dayhead {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: var(--s-2) 2px;
  border-right: 1px solid var(--divider);
  text-align: center;
}
.cal-dayhead:last-child { border-right: none; }
.cal-wd {
  font-size: 0.6875rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--on-surface-med);
}
.cal-dnum { font-size: 0.875rem; font-weight: 500; color: var(--on-surface); }
.cal-dayhead.weekend { background: var(--surface-variant); }
.cal-dayhead.weekend .cal-dnum { color: var(--on-surface-med); }
.cal-dayhead.today { box-shadow: inset 0 -2px 0 0 var(--primary); }
.cal-dayhead.today .cal-dnum { color: var(--primary-text); font-weight: 700; }

/* трек объекта (слоты + полосы наложены в одной grid) */
.cal-track {
  position: relative;
  grid-auto-rows: minmax(44px, auto);
}
.cal-slot {
  grid-row: 1; min-height: 44px;
  border-right: 1px solid var(--divider);
  cursor: pointer; position: relative;
  transition: background .15s cubic-bezier(.4,0,.2,1);
}
.cal-slot:last-child { border-right: none; }
.cal-slot.weekend { background: var(--surface-variant); }
.cal-slot.today { box-shadow: inset 2px 0 0 -1px var(--primary); }
.cal-slot:hover, .cal-slot:focus-visible {
  background: var(--primary-soft); outline: none;
}
.cal-slot:hover::after, .cal-slot:focus-visible::after {
  content: '+'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 400; color: var(--primary-text);
  line-height: 1;
}

/* полоса брони */
.cal-bar {
  align-self: center; z-index: 2;
  margin: 3px 4px; min-height: 28px; box-sizing: border-box;
  display: flex; align-items: center;
  padding: 0 var(--s-2); border-radius: var(--r-card);
  box-shadow: var(--elev-1); cursor: pointer; overflow: hidden;
  position: relative; /* clip ripple */
  font-size: 0.8125rem; font-weight: 500; line-height: 1;
  transition: box-shadow .15s cubic-bezier(.4,0,.2,1), filter .15s cubic-bezier(.4,0,.2,1);
}
.cal-bar-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-bar:hover, .cal-bar:focus-visible {
  box-shadow: var(--elev-3); filter: brightness(.97); outline: none;
}
/* цвета полос по статусу — плотная заливка статусным цветом + белый текст
   (Material filled-полоса). Контраст белого на каждом фоне ≥ AA 4.5:
   new/closed 6.19 · confirmed 4.80 · issued 5.60 · active 5.13
   · returned 8.20 · cancelled 4.98 */
.cal-bar.badge-bk-new,
.cal-bar.badge-bk-closed    { background: #616161; color: #fff; }
.cal-bar.badge-bk-confirmed { background: #0277BD; color: #fff; }
.cal-bar.badge-bk-issued    { background: #BF360C; color: #fff; }
.cal-bar.badge-bk-active    { background: #2E7D32; color: #fff; }
.cal-bar.badge-bk-returned  { background: #7B1FA2; color: #fff; }
.cal-bar.badge-bk-cancelled { background: #D32F2F; color: #fff; }
.cal-bar::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 16px;
  border-radius: 2px; margin-right: var(--s-2);
  background: rgba(255,255,255,0.75);
}
/* двойная занятость: вторая (и далее) полоса уходит на под-строку и помечается */
.cal-bar-conflict {
  outline: 2px solid var(--error);
  outline-offset: -1px;
}

/* адаптив */
@media (max-width: 700px) {
  .cal-objcell { flex-basis: 132px; width: 132px; padding: var(--s-2) var(--s-3); }
  .cal-days { grid-template-columns: repeat(var(--cols, 7), minmax(48px, 1fr)); }
}
@media (max-width: 430px) {
  .cal-toolbar { gap: var(--s-2); }
  .cal-range { order: 3; flex-basis: 100%; text-align: left; }
  .cal-objcell { flex-basis: 116px; width: 116px; }
  .cal-slot, .cal-dayhead { min-height: 48px; }
  .cal-bar { min-height: 32px; }
}

/* ===================================================================== */
/* Дашборд «Сегодня»                                                     */
/* ===================================================================== */
.dash-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap;
}
.dash-head .section-title { margin-bottom: 0; }
.dash-head .btn-primary { flex: 0 0 auto; }

/* Полоса счётчиков: 4×1 десктоп, 2×2 мобайл */
.dash-counters {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4); margin-bottom: var(--s-6);
}
.dash-counter {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev-1);
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  position: relative; overflow: hidden;
}
.dash-counter::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--divider-strong);
}
.dash-counter.is-error::before { background: var(--error); }
.dash-counter.is-success::before { background: var(--success); }
.dash-counter.is-muted::before { background: var(--divider); }
.dash-counter.is-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dash-counter.is-clickable:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.dash-counter.is-clickable:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.dash-num {
  font-size: 2.25rem; font-weight: 500; line-height: 1.1; color: var(--on-surface);
}
.dash-counter.is-error .dash-num { color: var(--error-text); }
.dash-counter.is-success .dash-num { color: var(--success-text); }
.dash-num-sub { font-size: 1rem; font-weight: 400; color: var(--on-surface-med); }
.dash-cap {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--on-surface-med);
}

/* Секции-списки */
.dash-section { padding: var(--s-4) var(--s-6); margin-bottom: var(--s-4); }
.dash-sec-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--divider);
}
.dash-sec-title { font-size: 1rem; font-weight: 500; color: var(--on-surface); margin: 0; }
.dash-sec-count {
  min-width: 24px; height: 24px; padding: 0 var(--s-2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-chip); background: var(--surface-variant);
  color: var(--on-surface-med); font-size: 0.8125rem; font-weight: 500;
}
.dash-list { display: flex; flex-direction: column; }
.dash-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--divider);
  cursor: pointer; transition: background 0.15s cubic-bezier(.4,0,.2,1);
  margin: 0 calc(-1 * var(--s-2)); padding-left: var(--s-2); padding-right: var(--s-2);
  border-radius: var(--r-input);
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--hover-overlay); }
.dash-row.overdue { background: var(--error-soft); }
.dash-row.overdue:hover { background: rgba(211,47,47,0.18); }
.dash-rinfo { min-width: 0; }
.dash-rtitle { font-weight: 500; font-size: 0.9375rem; color: var(--on-surface); }
.dash-rsub {
  font-size: 0.8125rem; color: var(--on-surface-med);
  margin-top: 2px; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.dash-ractions { flex-shrink: 0; }
.badge-overdue {
  background: var(--error-soft); color: var(--error-text);
}
.badge-overdue::before { background: var(--error-text); }

/* Пустая секция — дружелюбно */
.dash-empty {
  padding: var(--s-6) var(--s-2); text-align: center;
  color: var(--on-surface-med); font-size: 0.9375rem;
}
.dash-check { color: var(--success); font-weight: 700; margin-left: 4px; }

@media (max-width: 640px) {
  .dash-counters { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .dash-num { font-size: 1.875rem; }
  .dash-section { padding: var(--s-4); }
  .dash-row { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .dash-ractions { display: flex; justify-content: flex-end; gap: var(--s-2); }
}

/* ===================================================================== */
/* Отчёты — панель периода, пресеты, таблицы, бар-график                  */
/* ===================================================================== */
.rep-period {
  display: flex; align-items: flex-end; gap: var(--s-4);
  flex-wrap: wrap; margin-bottom: var(--s-4);
  padding: var(--s-4);
}
.rep-period-dates { display: flex; gap: var(--s-3); }
.rep-date-fld { margin: 0; min-width: 140px; }
.rep-presets { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.rep-preset {
  background: var(--surface-variant); border: 1px solid var(--divider);
  color: var(--on-surface-med);
  padding: 8px var(--s-3); border-radius: var(--r-chip);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rep-preset:hover { background: var(--primary-hover); color: var(--on-surface); }
.rep-preset.active {
  background: var(--primary-soft); color: var(--primary-text);
  border-color: var(--primary);
}

.reports-tabs { position: static; margin-top: 0; }
.report-panel { margin-top: var(--s-2); }

.rep-counters { grid-template-columns: repeat(3, 1fr); }

.rep-block { margin-top: var(--s-6); }
.rep-block-title {
  font-size: 1rem; font-weight: 500; color: var(--on-surface);
  margin: 0 0 var(--s-3);
}
.rep-table-wrap table { min-width: 320px; }
.rep-table th.num-head, .rep-table td.rep-amount { text-align: right; }
.rep-table td.rep-amount { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Бар-график по дням */
.rep-chart-scroll {
  overflow-x: auto;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--elev-1); padding: var(--s-4) var(--s-3) var(--s-2);
}
.rep-chart {
  display: flex; align-items: flex-end; gap: var(--s-2);
  height: 180px; min-width: min-content;
}
.rep-chart-many .rep-chart { gap: 3px; }
.rep-bar-col {
  display: flex; flex-direction: column; align-items: center;
  flex: 1 1 0; min-width: 22px;
}
.rep-chart-many .rep-bar-col { min-width: 10px; }
.rep-bar-wrap {
  width: 100%; height: 150px;
  display: flex; align-items: flex-end; justify-content: center;
}
.rep-bar {
  width: 70%; max-width: 28px; min-height: 2px;
  background: var(--primary); border-radius: 3px 3px 0 0;
  transition: background .15s;
}
.rep-bar-col:hover .rep-bar { background: var(--primary-dark); }
.rep-bar-lbl {
  margin-top: var(--s-1); font-size: 0.6875rem; color: var(--on-surface-med);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rep-chart-empty, .rep-soon, .rep-empty {
  color: var(--on-surface-med);
}
.rep-chart-empty {
  padding: var(--s-6); text-align: center;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--elev-1); font-size: 0.9375rem;
}

.rep-counters-5 { grid-template-columns: repeat(5, 1fr); }

/* Итоговая строка таблиц отчётов */
.rep-table tfoot td { font-weight: 600; border-top: 2px solid var(--divider); }
.rep-total-row td { color: var(--on-surface); }

/* Объекты: загрузка — число + мини-бар */
.rep-util { display: flex; align-items: center; gap: var(--s-2); min-width: 120px; }
.rep-util-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 500; width: 38px; text-align: right; }
.rep-util-bar {
  flex: 1 1 auto; height: 8px; border-radius: 4px;
  background: var(--surface-variant); overflow: hidden; min-width: 60px;
}
.rep-util-fill { display: block; height: 100%; background: var(--primary); border-radius: 4px; }

/* Клиенты: подсветка должников */
.rep-debtor { background: var(--error-soft, rgba(211, 47, 47, 0.06)); }
.rep-debtor:hover { background: var(--error-soft, rgba(211, 47, 47, 0.1)); }
.rep-table td.rep-debt { color: var(--error, #d32f2f); font-weight: 600; }

/* Брони: горизонтальные бары по статусам */
.rep-hbars {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--elev-1); padding: var(--s-4);
}
.rep-hbar-row { display: flex; align-items: center; gap: var(--s-3); }
.rep-hbar-lbl { flex: 0 0 128px; }
.rep-hbar-track {
  flex: 1 1 auto; height: 12px; border-radius: 6px;
  background: var(--surface-variant); overflow: hidden;
}
.rep-hbar-fill { display: block; height: 100%; border-radius: 6px; background: var(--primary); transition: width .2s; }
.rep-hbar-val { flex: 0 0 auto; min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

@media (max-width: 640px) {
  .rep-counters { grid-template-columns: repeat(2, 1fr); }
  .rep-counters-5 { grid-template-columns: repeat(2, 1fr); }
  .rep-period { gap: var(--s-3); }
  .rep-period-dates { width: 100%; }
  .rep-date-fld { flex: 1 1 0; min-width: 0; }
  .rep-chart { height: 150px; }
  .rep-bar-wrap { height: 120px; }
  .rep-hbar-lbl { flex: 0 0 110px; }

  /* Таблицы отчётов (Объекты/Клиенты) → карточки строк */
  .rep-table-wrap { overflow-x: visible; border: none; background: transparent; box-shadow: none; }
  .rep-table-items, .rep-table-clients { min-width: 0; border-collapse: separate; }
  .rep-table-items thead, .rep-table-clients thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .rep-table-items tbody tr, .rep-table-clients tbody tr,
  .rep-table-items tfoot tr, .rep-table-clients tfoot tr {
    display: block; background: var(--surface);
    border-radius: var(--r-card); box-shadow: var(--elev-1);
    padding: var(--s-2) var(--s-4); margin-bottom: var(--s-3);
  }
  .rep-table-items tbody tr:hover, .rep-table-clients tbody tr:hover { background: var(--surface); }
  .rep-table-items td, .rep-table-clients td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    padding: 10px 0; border-bottom: 1px solid var(--divider);
    text-align: right; white-space: normal;
  }
  .rep-table-items td:last-child, .rep-table-clients td:last-child { border-bottom: none; }
  .rep-table-items td::before, .rep-table-clients td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 0.75rem; font-weight: 500; color: var(--on-surface-med);
  }
  .rep-table-items td.cell-name, .rep-table-clients td.cell-name {
    font-size: 1rem; font-weight: 500; color: var(--on-surface);
  }
  .rep-table tfoot td { border-top: none; }
  .rep-table-items tfoot tr, .rep-table-clients tfoot tr { border: 1px solid var(--divider); }
  .rep-util { min-width: 0; width: 60%; }
}

/* ============ Material snackbar (тосты) ============ */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  min-width: 288px;
  max-width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px 16px;
  background: #323232;            /* Material surface-inverse */
  color: #FFFFFF;                 /* on-surface-inverse */
  font-size: 0.875rem;
  line-height: 1.4;
  border-radius: 4px;
  box-shadow: var(--elev-6);
  z-index: 1000;                  /* выше модалок (30) и drawer */
  opacity: 0;
  pointer-events: none;
  word-break: break-word;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}
.snackbar.snackbar-show {
  transform: translate(-50%, 0);
  opacity: 1;
}
/* акцентная левая полоса по типу */
.snackbar-error { border-left: 4px solid var(--error); padding-left: 12px; }
.snackbar-success { border-left: 4px solid #66BB6A; padding-left: 12px; }

@media (max-width: 640px) {
  .snackbar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    transform: translateY(140%);
    min-width: 0;
    max-width: none;
  }
  .snackbar.snackbar-show { transform: translateY(0); }
}

/* ---------- GPS-трекинг (Настройки / Местоположение / Карта) ---------- */
/* Настройки GPS используют общие .ntf-block/.ntf-status-line/.ntf-switch */
#gpsCredForm .fld { max-width: 480px; }

/* Таб «Местоположение» в карточке объекта */
.loc-body { display: flex; flex-direction: column; gap: var(--s-3); }
.loc-loading { color: var(--on-surface-dis); padding: var(--s-3) 0; }
.loc-empty, .loc-empty-title { color: var(--on-surface); }
.loc-empty-title { font-weight: 600; margin-bottom: var(--s-1); }
.loc-empty-hint { color: var(--on-surface-dis); font-size: 0.875rem; }
.loc-link-head, .loc-linked-head { font-size: 0.95rem; }
.loc-pos {
  background: var(--surface-2, rgba(0,0,0,0.04));
  border-radius: var(--radius, 12px);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.loc-pos-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 0.9rem; }
.loc-pos-row span { color: var(--on-surface-dis); }
.loc-nodata { color: var(--on-surface-dis); font-size: 0.9rem; }
.loc-map-link { text-decoration: none; align-self: flex-start; }
.loc-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Раздел «Карта» — список привязанных объектов */
.map-row {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--divider);
  border-radius: var(--radius, 12px);
  background: var(--card);
  margin-bottom: var(--s-2);
}
.map-row-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.map-row-name { font-weight: 600; }
.map-row-sub { font-size: 0.825rem; color: var(--on-surface-dis); }
.map-row-pos { font-size: 0.875rem; color: var(--on-surface); }
.map-row-addr { font-size: 0.875rem; color: var(--on-surface); margin: 2px 0; }
.map-row-nodata { color: var(--on-surface-dis); }
.gps-state { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; vertical-align: middle; margin-left: 6px; }
.gps-state-ok { background: var(--success-soft, #e6f4ea); color: var(--success-text, #1e7e34); }
.gps-state-warn { background: var(--warning-soft, #fef3e0); color: var(--warning-text, #b25e02); }
.gps-state-muted { background: var(--surface-2, #f1f3f4); color: var(--on-surface-dis); }
.map-row a.btn-sm { text-decoration: none; flex: 0 0 auto; }

/* Раздел «Карта» — интерактивная Яндекс.Карта */
.map-head-actions { display: flex; align-items: center; gap: var(--s-3); }
.map-count { font-size: 0.875rem; color: var(--on-surface-dis); white-space: nowrap; }
.map-key-hint {
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  background: var(--surface-variant);
  color: var(--on-surface);
  font-size: 0.9rem;
}
.map-key-hint a { color: var(--primary-text); }
.map-canvas-wrap {
  position: relative;
  margin-bottom: var(--s-4);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--elev-2);
  /* Локальный stacking-контекст на ОБЁРТКЕ (не на самом Leaflet-контейнере, иначе
     ломается отрисовка тайлов): внутренние Leaflet-панели/контролы (z-index до 1000)
     остаются под сайдбаром/drawer/модалками (z-index 19–30), не перекрывают их. */
  z-index: 0;
  isolation: isolate;
}
.map-canvas {
  width: 100%;
  height: 480px;
  background: var(--surface-variant);
}
/* Фон под тайлами Leaflet, пока они грузятся */
.map-canvas.leaflet-container { background: #ddd; }
.map-canvas-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--s-4);
  background: var(--surface-variant);
  color: var(--on-surface-dis);
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .map-row a.btn-sm { flex: 1 1 auto; }
  .map-canvas { height: 360px; }
  .loc-map-link { align-self: stretch; text-align: center; }
}