/* ═══════════════════════════════════════════
   РЕСУРСИ — ради з доступом і вільна земля в них
   Ширину, відступи, смугу лічильників і панель дає css/list-shell.css —
   спільні для всіх сторінок-списків (#262). Тут лише таблиця рад, рада в
   панелі й калькулятор РРП.
   Раніше тут було шістсот рядків вбудованого <style>: мобільне меню,
   плаваюча кнопка, анімації свайпу — усе для розмітки, якої вже не було.
   ═══════════════════════════════════════════ */

/* Кольори смислів — у одному місці, щоб таблиця, панель і лічильники
   говорили однаково: вільне — зелене, давня реєстрація — бурштин */
.page-resources {
  --rs-free: var(--color-primary-text);
  --rs-rent: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
  --rs-old:  var(--color-secondary-700);
  --rs-mid:  var(--color-tertiary);
}

.rs-head { margin-bottom: var(--space-5); }
.rs-head .page-title { font-family: var(--font-display); }
.rs-head .page-actions { flex-wrap: wrap; justify-content: flex-end; }
/* .btn задає display, і без цього hidden на кнопці не спрацьовував */
.rs-head [hidden], #rs-stats[hidden] { display: none; }

/* Зведенню понад місяць — кнопка «Аналіз» просить перерахувати */
#btnRunAnalysis.is-stale {
  border-color: var(--color-progress-warning);
  color: var(--color-progress-warning);
}
#btnRunAnalysis:disabled { opacity: .6; cursor: progress; }
.rs-analysis { font-variant-numeric: tabular-nums; }

/* Шість лічильників у два ряди по три виглядали б як таблиця — тримаємо
   в одному рядку, як у Реєстрі */
@media (min-width: 769px) {
  #rs-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
  #rs-stats .ls-stat { padding: var(--space-3); gap: var(--space-2); }
}

/* ─── Пошук ─── */

.rs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.rs-toolbar[hidden] { display: none; }

.rs-search {
  flex: 0 1 360px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  margin: 0;
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
  border-radius: var(--control-radius);
  transition: border-color var(--transition-fast);
}
.rs-search:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.rs-search .material-icons-round { font-size: 18px; color: var(--color-text-muted); }
.rs-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}

.rs-summary {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rs-summary strong { color: var(--color-text); font-weight: var(--font-semibold); }

/* ─── Таблиця рад ─── */

.rs-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.rs-scroll { overflow-x: auto; }

.rs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.rs-table[hidden] { display: none; }

.rs-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3);
  background: var(--color-surface-container);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-outline-subtle);
}
.rs-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-outline-subtle);
  vertical-align: middle;
  color: var(--color-text);
}
.rs-table tbody tr:last-child td { border-bottom: none; }

/* Сортування: заголовок-кнопка, як у Реєстрі */
.rs-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: -2px 0;
  padding: 2px 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.rs-sort .material-icons-round { font-size: 14px; opacity: .35; }
.rs-sort:hover { color: var(--color-text); }
.rs-sort:hover .material-icons-round { opacity: .7; }
.rs-sort.is-on { color: var(--color-primary-text); }
.rs-sort.is-on .material-icons-round { opacity: 1; }
.rs-sort:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }

.rs-tr { cursor: pointer; }
.rs-tr:hover td { background: var(--color-surface-variant); }
.rs-tr:focus-visible { outline: none; }
.rs-tr:focus-visible td { box-shadow: inset 0 2px 0 var(--color-primary), inset 0 -2px 0 var(--color-primary); }

/* Відкрита в панелі. Обвідка рядка таблиці малюється не скрізь, тож ще й фон */
.rs-tr.ls-selected { outline: none; }
.rs-tr.ls-selected td { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)); }
.rs-tr.ls-selected td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }

/* Шапка області — коли рад з кількох областей */
.rs-group td {
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.rs-group span {
  margin-left: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

.rs-c-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-c-name { min-width: 200px; }
.rs-name, .rs-sub { display: block; }
.rs-name { font-weight: var(--font-semibold); }
.rs-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.rs-strong { font-weight: var(--font-semibold); color: var(--rs-free); }
.rs-dash { color: var(--color-text-disabled); }

/* Вільних: число, смужка частки, відсоток — частку видно, не читаючи */
.rs-c-free { white-space: nowrap; }
.rs-free {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.rs-free-n { min-width: 3ch; text-align: right; font-weight: var(--font-semibold); color: var(--rs-free); }
.rs-free-p { min-width: 4ch; font-size: var(--text-xs); color: var(--color-text-muted); }

.rs-meter {
  display: inline-block;
  flex-shrink: 0;
  width: 56px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--rs-rent);
  overflow: hidden;
}
.rs-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rs-free);
}

.rs-reg { font-weight: var(--font-semibold); }
.rs-reg.is-old { color: var(--rs-old); }
.rs-reg.is-mid { color: var(--rs-mid); }

/* Галочка РРП у рядку: клік по ній не відкриває раду (resources.js) */
.rs-rrp-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) 0;
  cursor: pointer;
}
.rs-rrp-cell input, .rs-check input {
  width: 15px; height: 15px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.rrp-cost.is-off { color: var(--color-text-disabled); text-decoration: line-through; }

/* ─── Порожньо / завантаження ─── */

.rs-empty {
  padding: var(--space-12) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}
.rs-empty[hidden] { display: none; }
.rs-empty > .material-icons-round {
  font-size: 44px;
  color: var(--color-primary);
  opacity: .7;
}
.rs-empty h2 {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.rs-empty p { max-width: 420px; margin: 0 auto; font-size: var(--text-sm); }
.rs-empty-acts { display: flex; justify-content: center; margin-top: var(--space-5); }

.rs-spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid var(--color-outline-subtle);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: rs-spin .8s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rs-spinner { animation-duration: 2.4s; } }

/* ─── Панель: рада й калькулятор ─── */

.rs-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.rs-panel[hidden] { display: none; }
.rs-panel [hidden] { display: none !important; }

.rs-label {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.rs-muted { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Три головні числа ради */
.rs-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-outline-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rs-kpis > div { padding: var(--space-3); }
.rs-kpis > div + div { border-left: 1px solid var(--color-outline-subtle); }
.rs-kpis b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.rs-kpis span { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.rs-kpis .is-free { background: color-mix(in srgb, var(--rs-free) 8%, transparent); }
.rs-kpis .is-free b, .rs-kpis .is-free span { color: var(--rs-free); }

/* Вільні / в оренді за площею */
.rs-split {
  display: flex;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--rs-rent);
}
.rs-split .is-free { background: var(--rs-free); }
.rs-split .is-rent { background: var(--rs-rent); }
.rs-split-l {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.rs-split-l .is-free { color: var(--rs-free); font-weight: var(--font-semibold); }

/* Давня реєстрація */
.rs-opps { display: flex; flex-direction: column; gap: var(--space-2); }
.rs-opp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  --tone: var(--rs-old);
  background: color-mix(in srgb, var(--tone) 9%, transparent);
  color: var(--color-text);
}
.rs-opp.is-mid { --tone: var(--rs-mid); }
.rs-opp .material-icons-round { align-self: center; font-size: 16px; color: var(--tone); }
.rs-opp b { color: var(--tone); font-size: var(--text-base); }
.rs-opp > span:last-child { flex-basis: 100%; padding-left: 20px; font-size: var(--text-xs); color: var(--color-text-muted); }

/* Призначення */
.rs-purposes { list-style: none; margin: 0; padding: 0; }
.rs-purpose {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-outline-subtle);
}
.rs-purpose:last-child { border-bottom: none; }
.rs-purpose-h { display: flex; align-items: baseline; gap: var(--space-2); }
.rs-purpose-n {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.rs-purpose.is-main .rs-purpose-n { font-weight: var(--font-semibold); color: var(--color-text); }
.rs-purpose-t {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.rs-purpose-f {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.rs-purpose-free { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--rs-free); }
.rs-purpose-r { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font-size: var(--text-xs); }

.rs-badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 5px;
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 9px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.rs-badge.is-soft {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary-text);
}

/* Галочки: рада в РРП, перелік рад і призначень у калькуляторі */
.rs-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.rs-check.is-all {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-outline-subtle);
  font-weight: var(--font-semibold);
}
.rs-check-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-check-n { flex-shrink: 0; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rs-terr-rrp .rs-check { font-variant-numeric: tabular-nums; }
.rs-terr-rrp b { color: var(--rs-free); }

/* ─── Калькулятор РРП ─── */

.rs-rrp { gap: var(--space-4); }

.rs-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.rs-price > span:first-child { flex: 1; }
.rs-price input {
  width: 80px;
  height: var(--control-height);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-outline);
  border-radius: var(--control-radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-align: center;
}
.rs-price input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }

/* Підсумок — головне, заради чого калькулятор відкривають */
.rs-rrp-sum {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.rs-rrp-total {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color: var(--color-primary-text);
  font-variant-numeric: tabular-nums;
}
.rs-rrp-total small { font-size: var(--text-base); font-weight: var(--font-semibold); }
.rs-rrp-calc { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Перелік рад і призначень — розгортається; <details> працює й без скрипта */
.rs-dd {
  border: 1px solid var(--color-outline-subtle);
  border-radius: var(--radius-sm);
}
.rs-dd > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}
.rs-dd > summary::-webkit-details-marker { display: none; }
.rs-dd > summary::after {
  content: 'expand_more';
  font-family: 'Material Icons Round';
  font-size: 18px;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.rs-dd[open] > summary::after { transform: rotate(180deg); }
.rs-dd > summary:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.rs-dd > summary .material-icons-round { font-size: 16px; color: var(--color-text-muted); }
.rs-dd-t { flex: 1; }
.rs-dd-n { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rs-dd-body {
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-outline-subtle);
}

.rs-rrp-note { margin-bottom: var(--space-2); font-size: var(--text-xs); }

.rs-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.rs-mini th {
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-align: right;
  border-bottom: 1px solid var(--color-outline);
}
.rs-mini td {
  padding: var(--space-1) 0;
  text-align: right;
  border-bottom: 1px solid var(--color-outline-subtle);
}
.rs-mini th:first-child, .rs-mini td:first-child { text-align: left; padding-right: var(--space-2); }
.rs-mini td + td { padding-left: var(--space-3); white-space: nowrap; }
.rs-mini td:last-child { font-weight: var(--font-semibold); color: var(--rs-free); }
.rs-mini tfoot td {
  border-top: 1px solid var(--color-outline);
  border-bottom: none;
  font-weight: var(--font-bold);
}

/* ─── Телефон ─── */

@media (max-width: 768px) {
  .rs-head .page-actions { justify-content: flex-start; }
  /* На вузькому екрані — лише назва, вільні й вільна площа; решта в панелі
     ради, що відкривається дотиком */
  .rs-opt { display: none; }
  .rs-c-name { min-width: 0; }
  .rs-meter { width: 36px; }
  .rs-search { flex: 1 1 100%; }
  .rs-summary { margin-left: 0; }
}

@media (max-width: 480px) {
  .rs-btn-l { display: none; }
}