/* =====================================================================
 *  Облік оренди — стилі.
 *  Напрям: технічний реєстр / кадастр. IBM Plex Sans — єдиний шрифт
 *  інтерфейсу.
 * ===================================================================== */

:root {
  --paper: #f5f7f3;
  --surface: #fbfcfa;
  --surface-alt: #f4f6f2;
  --ink: #19211c;
  --ink-soft: #5c665d;
  --line: #d7dcd3;
  --line-strong: #c2c9be;

  --accent: #2f6b4f; /* землемірна зелень */
  --accent-strong: #245a41;
  --accent-tint: #e4efe7;

  --danger: #b0462f;
  --danger-tint: #f5e4df;

  --radius: 8px;
  --shadow: 0 10px 30px rgba(20, 35, 25, 0.12);

  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Меню (фіксоване зверху на всіх сторінках) ----------------------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 2px solid var(--accent);
}

.topbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}

.brand__mark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  background: var(--accent);
  color: #fff;
  padding: 4px 7px;
  border-radius: 5px;
}

.brand__text {
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 15px;
}

.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  /* stretch на всю висоту топбара — щоб випадаюча панель ".nav__group"
     починалася від низу топбара, без щілини під курсором */
  align-self: stretch;
  align-items: center;
}

.nav__link {
  color: #c7d0c8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  transition:
    background 0.15s,
    color 0.15s;
}

.nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav__link--active {
  color: #fff;
  background: var(--accent);
}

/* Група меню з випадаючим списком ("Інше"). Розтягнута на всю висоту
   топбара — інакше між тригером і панеллю лишається щілина і курсор
   "провалюється" дорогою до пунктів. */
.nav__group {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav__link--group {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  min-width: 190px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(20, 35, 25, 0.18);
  /* overflow: hidden — щоб підсвітка крайніх пунктів обрізалася по
     заокругленню панелі, а не лізла прямим кутом у ріг */
  overflow: hidden;
}

/* focus-within — щоб панель відкривалася і з клавіатури, де hover недоступний */
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown {
  display: block;
}

.nav__dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__dropdown-item:hover {
  background: var(--accent-tint);
}

.nav__dropdown-item--active {
  color: var(--accent);
  font-weight: 600;
}

.nav__dropdown-item--logout {
  border-top: 2px solid var(--line-strong);
  color: var(--danger);
}

.nav__dropdown-item--logout:hover {
  background: var(--danger-tint);
}

/* --- Контент --------------------------------------------------------- */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 8px 80px;
}

.page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page__title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

/* --- Кнопки ---------------------------------------------------------- */
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-strong);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--surface-alt);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.control:focus-visible,
.nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icon-btn {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 8px;
  border-radius: 6px;
}
.icon-btn:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.row-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.row-btn:not([disabled]):hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.row-btn--danger:not([disabled]):hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-tint);
}
.row-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* --- Таблиця --------------------------------------------------------- */
.table-wrap {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #404a41;
  font-weight: 600;
  padding: 12px 16px 12px 22px;
  background: #edefea;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table tbody td {
  padding: 8px 16px 8px 22px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 13px;
}

.table tbody tr:last-child td {
  border-bottom: none;
}
.table tbody tr:nth-child(even) {
  background: #f0f2ee;
}
.table tbody tr:hover {
  background: var(--accent-tint);
}
.tr-clickable {
  cursor: pointer;
}

@keyframes row-flash {
  0%,
  30% {
    box-shadow: inset 0 0 999px 999px #c8e6ce; /* колір .tr-add — рядка додавання */
  }
  100% {
    box-shadow: inset 0 0 999px 999px rgba(200, 230, 206, 0);
  }
}
.row-flash td {
  animation: row-flash 1.5s ease-out;
}

.muted {
  color: var(--ink-soft);
}
.amount--pos {
  color: #3d8462;
  font-weight: 600;
}
.amount--neg {
  color: var(--danger);
  font-weight: 600;
}

.cell-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* --- Бейджі статусу -------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--on {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.badge--off {
  background: var(--surface-alt);
  color: var(--ink-soft);
}

/* --- Порожній стан --------------------------------------------------- */
.empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.empty strong {
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

/* --- Модалка --------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 22, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal__body {
  padding: 20px 22px;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.modal__body > * {
  min-width: 0;
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
}

.modal--wide {
  max-width: 840px;
}

/* --- Деталі контрагента ------------------------------------------------ */
.detail-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  align-items: baseline;
}
.detail-key {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.detail-table > span:not(.detail-key) {
  font-size: 14px;
}
.detail-table > span:not(.detail-key) * {
  font-size: inherit;
}

.detail-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.detail-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.detail-section__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.icon-btn--spinning svg {
  animation: spin 0.7s linear infinite;
}

/* --- Блок "Оренди" в детальному перегляді контрагента ---------------- */
.detail-rentals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-rentals__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

/* --- Мультивибір (checklist) у openModal, напр. місця оренди ---------- */
.checklist-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
}

/* --- Ledger (стан розрахунків) --------------------------------------- */
.ledger-loading,
.ledger__empty {
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
}

.ledger {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ledger__saldo {
  width: 220px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.ledger__saldo-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.ledger__saldo-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: normal;
  padding: 6px 0;
}
.ledger__saldo-item--total {
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.ledger__scroll {
  width: 100%;
  overflow-x: auto;
}

/* --- Один блок (оренда) у ledger контрагента з декількома орендами --- */
.ledger__rental-block + .ledger__rental-block {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.ledger__rental-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.ledger__table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
}
.ledger__table th,
.ledger__table td {
  padding: 5px 12px;
  text-align: right;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.ledger__table thead th {
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.ledger__row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  /* width: 1px + nowrap = стовпчик по ширині тексту. Інакше при малій
     кількості періодів таблиця (min-width: 100%) розтягує саме його;
     тепер надлишок дістається стовпчикам періодів. */
  width: 1px;
  text-align: left !important;
  color: var(--ink);
  font-size: 12px;
  background: var(--surface) !important;
  font-weight: normal !important;
  box-shadow: inset -2px 0 0 var(--line-strong);
}
.ledger__total-row td {
  border-top: 2px solid var(--line-strong);
  font-weight: 600;
}
.ledger__table thead .ledger__row-label {
  background: var(--surface-alt) !important;
}

.ledger--debt {
  color: var(--danger);
}
.ledger--credit {
  color: var(--accent);
}

/* --- Поля форми ------------------------------------------------------ */
.field {
  display: grid;
  gap: 6px;
}

.field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.field--inline {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.field--inline input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.control {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 9px 11px;
  width: 100%;
}
.control:focus {
  border-color: var(--accent);
  outline: none;
}

/* --- Тости ----------------------------------------------------------- */
#toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
}

.toast {
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  box-shadow: var(--shadow);
  animation: toast-in 0.18s ease-out;
}
.toast--ok {
  background: var(--accent-strong);
}
.toast--err {
  background: var(--danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Тулбар над таблицею --------------------------------------------- */
.table-toolbar {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* --- Стовпчик коментар (Каса) ---------------------------------------- */
.col-phone,
.col-nowrap {
  white-space: nowrap;
}

.col-comment {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Кастомний тултіп ------------------------------------------------ */
.custom-tooltip {
  position: fixed;
  z-index: 400;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  max-width: 360px;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.1s;
}
.custom-tooltip.visible {
  opacity: 1;
}

/* --- Рядок додавання (таблиця Каса) ---------------------------------- */
.tr-add td {
  background: #c8e6ce;
  padding: 8px 16px 8px 22px;
}

.table-input {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 5px 6px;
  width: 100%;
  min-width: 0;
}

.table-input:focus {
  background: var(--surface);
  outline: none;
}

.table-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.5;
}
select.table-input {
  padding-left: 0;
  cursor: pointer;
}

/* --- Поле вибору місяця --------------------------------------------- */
.month-field {
  position: relative;
}
.month-field__native {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  pointer-events: none;
}

/* --- Комбобокс з фільтрацією ----------------------------------------- */
.combobox {
  position: relative;
}

.combobox__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
}

.combobox__item {
  padding: 7px 12px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}
.combobox__item:hover {
  background: var(--accent-tint);
}

/* Список у модалці вибору регулярної витрати (Каса) */
.expense-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.expense-picker-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  font-family: var(--sans);
  text-align: left;
}
.expense-picker-item + .expense-picker-item {
  border-top: 1px solid var(--line);
}
.expense-picker-empty {
  padding: 7px 12px;
}

.btn--sm {
  padding: 6px 13px;
  font-size: 13px;
}

/* Поля рядка додавання — компактніші, на світлій підкладці */
.tr-add .table-input {
  font-size: 13px;
  background: var(--surface);
  border-radius: 4px;
  margin-left: -6px;
  width: calc(100% + 6px);
}

/* Фіксована ширина полів дати і місяця */
#inp-date {
  width: calc(10ch + 14px);
}
#inp-period {
  width: calc(7ch + 14px);
}

/* Спадне меню контрагентів — вдвічі ширше за поле вводу */
#cp-list {
  min-width: 200%;
}

/* --- Підсумки по рахунках -------------------------------------------- */
.account-summary {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.account-summary__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 9px;
  border: 1.5px solid var(--summary-color, transparent);
  overflow: hidden;
}
.account-summary__badge {
  min-width: 0;
  border-radius: 0;
}
.account-summary__amount {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px 3px 20px;
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* --- Бейджі рахунку та категорії -------------------------------------- */
.account-badge,
.category-badge {
  display: inline-block;
  text-align: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.account-badge {
  min-width: 140px;
}
.category-badge {
  min-width: 150px;
}
.account-badge--1 {
  background: #97c9a3;
  color: #2a5c38;
}
.account-badge--2 {
  background: #2f6b4f;
  color: #fff;
}
.account-badge--3 {
  background: #a8d4ee;
  color: #1a5278;
}
.account-badge--4 {
  background: #1a4a7a;
  color: #fff;
}
.account-badge--5 {
  background: #d6b0ee;
  color: #5b2080;
}

.category-badge--1 {
  background: #ead5f5;
  color: #5b2080;
}
.category-badge--2 {
  background: #cce5f5;
  color: #1a5278;
}
.category-badge--3 {
  background: #f5e09a;
  color: #7a5800;
}

/* --- Квадратна кнопка-іконка 28×28 ----------------------------------- *
 * .ext-link — посилання на теку (Контрагенти); .sq-btn — та сама коробка
 * для звичайних <button> (Лічильники: додати оренду / видалити лічильник). */
.ext-link,
.sq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.ext-link:hover,
.sq-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}

.sq-btn--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-tint);
}

/* --- Фільтри таблиці ------------------------------------------------- */
.th-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  color: var(--ink-soft);
  opacity: 0.4;
  border-radius: 4px;
  line-height: 0;
  flex-shrink: 0;
}
.filter-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.07);
}
.filter-btn--active {
  opacity: 1;
  color: var(--accent);
}

.filter-dropdown {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(20, 35, 25, 0.18);
  min-width: 230px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  z-index: 300;
}

.filter-dropdown__head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line);
}

.filter-dropdown__search {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--ink);
}
.filter-dropdown__search:focus {
  border-color: var(--accent);
  outline: none;
}

.filter-dropdown__body {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.filter-dropdown__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  color: var(--ink);
}
.filter-item:hover {
  background: var(--accent-tint);
}
.filter-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.filter-item--all {
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
  padding-bottom: 7px;
}

/* --- Нарахування: горизонтальний скрол і sticky-колонки -------------- */
.table-wrap--scroll {
  overflow: auto;
}

.show-inactive-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.table--accruals,
.table--expenses {
  table-layout: fixed;
}

.table--accruals thead th,
.table--accruals tbody td,
.table--expenses thead th,
.table--expenses tbody td,
.table--meters thead th,
.table--meters tbody td {
  white-space: nowrap;
}

.table--accruals th.col-name,
.table--accruals td.col-name,
.table--expenses th.col-name,
.table--expenses td.col-name {
  white-space: normal;
}

/* Sticky-колонки (Статус і Назва) */
.col-sticky {
  position: sticky;
  z-index: 2;
}

.col-status {
  left: 0;
  width: 120px;
  min-width: 120px;
}

.col-name {
  left: 120px;
  width: 200px;
  min-width: 200px;
  box-shadow: inset -2px 0 0 0 var(--line-strong);
}

/* Фони sticky-клітинок заголовку */
.table--accruals thead th.col-sticky,
.table--expenses thead th.col-sticky,
.table--meters thead th.col-sticky {
  z-index: 3;
  background: var(--surface-alt);
}

/* Фони sticky-клітинок тіла — дублюємо правила рядка, бо sticky не успадковує tr */
.table--accruals tbody td.col-sticky,
.table--expenses tbody td.col-sticky,
.table--meters tbody td.col-sticky {
  background: var(--surface);
}
.table--accruals tbody tr:nth-child(even) td.col-sticky,
.table--expenses tbody tr:nth-child(even) td.col-sticky,
.table--meters tbody tr:nth-child(even) td.col-sticky {
  background: var(--surface-alt);
}
.table--accruals tbody tr:hover td.col-sticky,
.table--expenses tbody tr:hover td.col-sticky,
.table--meters tbody tr:hover td.col-sticky {
  background: var(--accent-tint);
}

/* Зменшуємо відступи sticky-клітинок, щоб уміщались бейджі */
.table--accruals th.col-status,
.table--accruals td.col-status,
.table--expenses th.col-status,
.table--expenses td.col-status {
  padding: 10px 8px 10px 12px;
}
.table--accruals th.col-name,
.table--accruals td.col-name,
.table--expenses th.col-name,
.table--expenses td.col-name {
  padding: 10px 12px;
}

/* Заголовки місяців */
.col-month {
  width: 101px;
  min-width: 101px;
  text-align: center !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  padding: 8px 4px !important;
}

/* Ширша перша sticky-колонка (чекбокс "активна" + кнопка Змінити) —
   .col-name треба зсунути на ту саму ширину, інакше найде на col-status */
.table--expenses th.col-status,
.table--expenses td.col-status {
  width: 108px;
  min-width: 108px;
  padding-left: 6px;
  padding-right: 4px;
}
.table--expenses th.col-name,
.table--expenses td.col-name {
  left: 108px;
  width: 280px;
  min-width: 280px;
  padding-left: 20px;
  padding-right: 20px;
}

.expense-status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.expense-status-cell input[type="checkbox"] {
  transform: scale(1.25);
  accent-color: var(--accent);
}

/* Клітинка нарахувань */
.accrual-cell {
  padding: 3px 4px !important;
  vertical-align: top;
}

/* Поле введення в клітинці */
.accrual-input {
  font-family: var(--sans);
  font-size: 12px;
  display: block;
  width: 100%;
  padding: 3px 5px 3px 18px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  text-align: right;
  color: var(--ink);
}
.accrual-input:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.55);
}
.accrual-input:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}
.accrual-input::placeholder {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.4;
}

.accrual-field {
  position: relative;
}

/* --- Нарахування: клітинка як статичний текст -------------------------
 *  Таблиця — це десятки тисяч клітинок, тож живий <input> у кожній
 *  зʼїдав ~1 ГБ памʼяті. Тепер поле — просто текст, а <input> один на всю
 *  сторінку і переїжджає в те поле, яке редагують (accruals.js). Через це
 *  саме поле мусить повторювати геометрію інпута — інакше текст стрибає
 *  при відкритті редактора. Усе скоуплено під .table--accruals, бо
 *  .accrual-field / .accrual-input / .cell-status спільні з Лічильниками,
 *  де інпути лишаються справжніми.
 *  Висота: 16px тексту + 6px padding + 2px border = 24px, і в поля, і в інпута.
 *  line-height задаємо явно обом: div успадкував би 1.5 від body (=18px),
 *  а інпут лишився б на UA-шному normal — і поле стрибало б при відкритті.
 */
.table--accruals .accrual-field {
  font-size: 12px;
  line-height: 16px;
  height: 24px;
  padding: 3px 5px 3px 18px;
  border: 1px solid transparent;
  border-radius: 3px;
  text-align: right;
  color: var(--ink);
  overflow: hidden;
}

.table--accruals .accrual-input {
  line-height: 16px;
}

.table--accruals .accrual-field:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.55);
}

/* Поле з редактором віддає відступи інпуту — коробка лишається та сама.
   Саме border-width: 0, а не border-color: transparent — прозора рамка все
   одно займала б 1px і рядок стрибав би на 2px при кожному кліку. */
.table--accruals .accrual-field.is-editing {
  padding: 0;
  border-width: 0;
  background: transparent;
  overflow: visible;
}

/* Плейсхолдери порожніх полів — без жодного зайвого елемента в DOM */
.table--accruals .accrual-field:empty::before {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.4;
}
.table--accruals .accrual-field[data-field="rent"]:empty::before {
  content: "Орен.";
}
.table--accruals .accrual-field[data-field="utilities"]:empty::before {
  content: "Кому.";
}

/* Індикатор збереження — на самому полі, замість окремого .cell-status.
   Центруємо через margin-top, а не translateY: transform потрібен спінеру
   під обертання (@keyframes spin перезаписав би translateY). */
.table--accruals .accrual-field.is-saving::after,
.table--accruals .accrual-field.is-saved::after {
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 1;
}
.table--accruals .accrual-field.is-saving::after {
  content: "";
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.table--accruals .accrual-field.is-saved::after {
  content: "✓";
  font-size: 11px;
  font-weight: 600;
  line-height: 10px;
  text-align: center;
  color: var(--accent-strong);
}

.cell-status {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 1;
}

.cell-status--saving::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.cell-status--saved::after {
  content: "✓";
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 10px;
  color: var(--accent-strong);
}

/* Спільна анімація обертання (спінер збереження, кнопка оновлення) */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Лічильники: карусель періодів + широка таблиця ------------------- */

/* Ряд над таблицею: карусель періодів ліворуч, "Експорт PDF" праворуч */
.period-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* Кнопка тримає свою ширину — стискається лише карусель */
.period-bar > .btn {
  flex: 0 0 auto;
}

/* На відміну від .floor-switch кнопки НЕ переносяться на новий рядок —
   періодів багато, тож смуга гортається горизонтально (див. wheel-слухач
   у meters.js). */
.period-switch {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  /* min-width: 0 обовʼязково: без нього flex-елемент не стискається менше
     за свій вміст і горизонтальний скрол не вмикається взагалі. */
  flex: 1 1 auto;
  min-width: 0;
  /* Смуга прокрутки прихована, сама прокрутка лишається: колесо миші
     (wheel-слухач у meters.js), scrollIntoView активного періоду й
     перетягування тачпадом працюють як раніше. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* старий Edge */
}
.period-switch::-webkit-scrollbar {
  display: none; /* Chrome / Safari / новий Edge */
}

.period-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.period-btn__x {
  font-size: 16px;
  line-height: 1;
  opacity: 0.5;
}
.period-btn__x:hover {
  opacity: 1;
}

/* Колонка "Контрагент": назва ліворуч, квадратна кнопка праворуч —
   і в заголовку («+»), і в рядку (кошик). */
.col-name__head,
.meter-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.meter-name__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Підсумкова колонка "До оплати" */
.table--meters td.col-strong {
  font-weight: 600;
}

/* Sticky-колонка "Контрагент" тут перша (немає колонки "Статус"),
   тому left: 0 замість глобального left: 120px */
.table--meters th.col-name,
.table--meters td.col-name {
  left: 0;
  width: 240px;
  min-width: 240px;
  padding: 10px 12px;
  white-space: normal;
}

/* Числові колонки */
.col-num {
  min-width: 86px;
  text-align: right !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  padding: 8px 6px !important;
}

.table--meters .accrual-cell,
.table--meters td.col-num {
  padding: 3px 4px !important;
}

/* Поля вводу тим самим кеглем, що й пораховані значення (.col-num — 13px).
   Базові 12px у .accrual-input лишаємо Нарахуванням: там клітинка — це
   статичний текст на 12px, і збільшення кеглю лише інпуту зробило б
   стрибок при відкритті редактора. */
.table--meters .accrual-input {
  font-size: 13px;
}

/* Заголовки груп (Електроенергія / Вода / Газ) */
.table--meters thead th.col-group {
  text-align: center !important;
  padding: 8px 6px !important;
}

/* Товста сіра риска між групами — той самий прийом, що відділяє
   "Контрагент" у Нарахуваннях: inset-тінь, а не border (border зникає
   при border-collapse і "пливе" на sticky-колонці). */
.grp-end {
  box-shadow: inset -2px 0 0 0 var(--line-strong);
}

/* --- Адаптив --------------------------------------------------------- */
@media (max-width: 720px) {
  .topbar__inner {
    gap: 12px;
    padding: 0 16px;
  }
  .brand__text {
    display: none;
  }
  .nav__link {
    padding: 8px 10px;
  }
  .page {
    padding: 24px 16px 64px;
  }
  .page__head {
    flex-direction: column;
    align-items: stretch;
  }
  .table thead {
    display: none;
  }
  .table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-soft);
    font-weight: 600;
  }
  .table tbody tr {
    display: block;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
  }
  .cell-actions {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Сторінка входу -------------------------------------------------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrap {
  width: 100%;
  max-width: 380px;
  padding: 24px;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 24px;
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-brand__name {
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-error {
  margin: 0;
  font-size: 13px;
  color: var(--danger);
  min-height: 1.3em;
}

/* --- План будівлі: перемикач поверхів + растр з SVG-оверлеєм --------- */
.floor-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.plan-wrap {
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

#plan-wrap,
#map-wrap {
  width: fit-content;
  max-width: 100%;
}

.plan-wrap.empty {
  width: 60%;
}

.plan-inner {
  position: relative;
}

.plan-inner img {
  display: block;
  height: clamp(360px, 60vh, 700px);
  width: auto;
  max-width: 100%;
}

.plan-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.plan-svg .room {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  transition:
    fill 0.15s ease,
    stroke 0.15s ease;
}

.plan-svg .room:hover {
  fill: rgba(47, 107, 79, 0.35);
  stroke: var(--accent-strong);
  stroke-width: 5;
}

/* Підпис кімнати (id + площа): біле гало навколо тексту, щоб читався
   поверх будь-якої ділянки растрового плану. */
.room-label {
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--ink);
  stroke: #fff;
  stroke-width: 4px;
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
}

/* --- План: геокарта "Бережанська" (Leaflet + Geoman) ------------------ */
.berezhanska-map {
  height: clamp(360px, 60vh, 700px);
  /* Фіксована (не відсоткова) ширина навмисно: #map-wrap має
     width: fit-content, а відсоток тут ("100%") при обчисленні
     fit-content розмір батька схлопнув би контейнер карти до 0. */
  width: 1350px;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  /* Leaflet виставляє власні панелі/контроли аж до z-index:1000 — без
     ізоляції вони "протікають" поверх .modal-overlay (z-index:100) і
     ховають модалку за картою. */
  isolation: isolate;
}

.berezhanska-map,
.berezhanska-map .leaflet-container {
  font-family: var(--sans);
}

/* Підпис ділянки на карті — те саме біле гало, що й .room-label, але
   через text-shadow: тултіп Leaflet рендериться в HTML, не SVG. */
.shape-label {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  text-shadow:
    0 0 3px #fff,
    0 0 3px #fff,
    0 0 3px #fff,
    0 0 3px #fff;
}

.shape-label::before {
  display: none;
}

/* --- Логи ------------------------------------------------------------ */
.logs-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.logs-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.logs-filter__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}
.logs-filter .control {
  width: auto;
  min-width: 150px;
  padding: 7px 10px;
}

/* Бейджі дій — поряд із .badge--on / .badge--off */
.badge--log-create {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.badge--log-update {
  background: #e6edf7;
  color: #2c4d7a;
}
.badge--log-delete {
  background: var(--danger-tint);
  color: var(--danger);
}
.badge--log-auth {
  background: var(--surface-alt);
  color: var(--ink-soft);
}

/* Рядок журналу розгортається кліком */
.log-row {
  cursor: pointer;
}
.log-row--open > td {
  background: var(--surface-alt);
}

.log-details > td {
  background: var(--surface-alt);
  padding: 14px 16px 16px;
}

.log-changes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.log-changes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.log-changes__key {
  min-width: 180px;
  font-weight: 500;
  color: var(--ink-soft);
}
.log-changes__old {
  color: var(--danger);
  text-decoration: line-through;
}
.log-changes__arrow {
  color: var(--ink-soft);
}
.log-changes__new {
  color: var(--accent-strong);
  font-weight: 500;
}

.log-details__none,
.log-details__meta {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.log-details__meta {
  margin-top: 10px;
}

.log-json {
  margin-top: 10px;
}
.log-json summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  user-select: none;
}
/* Моношрифт свідомо не додаємо — IBM Plex Sans єдиний в інтерфейсі. */
.log-json pre {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

@media (max-width: 720px) {
  .logs-filter {
    flex: 1 1 140px;
  }
  .logs-filter .control {
    width: 100%;
    min-width: 0;
  }
  /* Деталі — суцільний блок, а не картка "колонка: значення": глобальне
     правило .table tbody td у цьому ж медіа-запиті інакше дописало б
     порожній ::before і розтягнуло вміст у flex-рядок. */
  .log-details > td {
    display: block;
  }
  .log-details > td::before {
    content: none;
  }
  .log-changes__key {
    min-width: 0;
    width: 100%;
  }
}