/* ============================================================
   STYLES.CSS · Table of Contents (FOLLOWUP-003 v3)
   ============================================================
   Production CSS для Oblik. 16k+ lines.
   Search by section banner: `Cmd+F → §<id>`.

   §00  RESPONSIVE  · viewport QA matrix (this header)
   §01  FONTS       · self-hosted @font-face declarations
   §02  TOKENS      · :root --u-* canonical v3 namespace
   §03  GLOBALS     · *, html, body, focus-visible ring
   §04  SHELL       · .app / .sidebar / .topbar / .nav / .breadcrumb
   §05  SAVE-STATUS · .save-status pill + menu
   §06  NOTICES     · .notice / .notices toasts
   §07  DASHBOARD   · .dashboard / .card / .panel base
   §08  BUTTONS     · v3 5 variants + states (REBUILD-101)
   §09  TABS        · .tabs / .page-tab / .page-tabs (REBUILD-206)
   §10  TABLES      · .solar-matrix / .consumer-matrix / .input-v2 / etc.
   §11  CASHFLOW    · .cf-row stripes + bars (Сводный финрезультат)
   §12  KPI cards   · 5 namespaces + unified .kpi-card v3 (REBUILD-201)
   §13  CONTROL     · .control-dot / .control-kpi / control signals
   §14  AUTH/USERS  · .auth-users-table SPA
   §15  WIZARD      · .monthly-step + #11 onboarding wizard scaffolding
   §16  PARTY MODALS · .oblik-modal-* family + mountModal target
   §17  INVOICE     · .invoice-* slide-out, templates, journal
   §18  RENT        · .rent-* (Аренда) helpers
   §19  COMBINED    · .combined-kpi-* + cashflow
   §20  INPUT V2    · .input-v2-* (Показания) matrix
   §21  PERIOD NAV  · .period-nav + .ds-stepper
   §22  v3 FOUNDATION · @font-face / fonts setup (REBUILD-001)
   §23  v3 FORMS    · .sg-input / .sg-select / .toggle (REBUILD-102)
   §24  v3 BADGE    · .sg-badge pill + tones (REBUILD-103)
   §25  v3 MATRIX   · unified .matrix primitive (REBUILD-202)
   §26  v3 KPI      · unified .kpi-card primitive (REBUILD-201)
   §27  v3 PERIOD   · .period-nav-* helpers (REBUILD-204)
   §28  v3 SAVE PILL · .save-pill 3 states + pulse (REBUILD-105)
   §29  v3 CALLOUT  · .sg-callout family (REBUILD-207)
   §30  v3 DETAIL HDR · .detail-header sticky (REBUILD-006)
   §31  MOTION      · global prefers-reduced-motion guard (REBUILD-401)
   §32  MISC FIXES  · ad-hoc utility classes, tabular nums, scroll indicators
   ============================================================ */

/* ============================================================
   §00 RESPONSIVE BREAKPOINTS · v3 spec section 14 (REBUILD-402)
   ============================================================
   Target viewports (QA matrix):
     phone-sm     360px   smallest acceptable phone
     phone        414px   modern phone
     tablet       768px   iPad portrait
     desktop-sm  1024px   small laptop
     desktop-md  1280px   no horizontal scroll required
     desktop-lg  1440px   common MacBook 14
     desktop-xl  1728px   MacBook 16 owner baseline

   Hard rule: ≥1280px viewport — все 12 month columns matrix fit
   WITHOUT horizontal scroll. Touch targets ≥44px on phone.

   Production реальность: 17 различных breakpoints (340/520/599/600/640/
   720/760/767/900/980/1023/1100/1120/1180/1200/720). Постепенная
   унификация — отдельный refactor slice вне rebuild (high risk —
   ломает layouts тщательно отлаженных за period iterations).
   v3 tokens (--u-pad-page-x/y, --u-row-h) applied automatically,
   что улучшает baseline density.
   ============================================================ */

/* ============================================================
   FONTS · self-hosted (DS Rebuild Phase 0 · REBUILD-001 v3)
   ============================================================
   v3 spec требует Geist Sans + Geist Mono self-hosted (NOT CDN).
   Inter + JetBrains Mono — fallback chain. font-display: swap. */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist/GeistVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist/GeistVariable-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist/GeistMonoVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/InterVariable-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* ==========================================================
     v3 TOKENS · Oblik Design System (--u-* canonical namespace)
     ==========================================================
     Source: docs/design-system/DESIGN_SYSTEM.html :root (lines 14-72).
     Phase 0 v3 · REBUILD-002 · 2026-05-25. */

  /* —— Surfaces —— */
  --u-bg:          #f6f7f9;
  --u-surface:     #ffffff;
  --u-surface-2:   #f1f3f7;
  --u-table-head:  #f1f3f7;

  /* —— Ink —— */
  --u-ink:         #0f1115;
  --u-muted:       #6b7280;
  --u-muted-2:     #98a0ad;
  --u-muted-tone:  #9ca3af;
  --u-muted-soft:  #f3f4f6;

  /* —— Lines —— */
  --u-line:         #e6e8ee;
  --u-line-strong:  #d6dae3;

  /* —— Accent · indigo —— */
  --u-accent:        #5B57EB;
  --u-accent-hover:  #4A47D6;
  --u-accent-active: #3C39BA;
  --u-accent-soft:   #EFEEFE;
  --u-accent-soft-2: #DDDDFC;
  --u-accent-ink:    #ffffff;

  /* —— Status —— */
  --u-ok:           #16a34a;
  --u-ok-soft:      #e8f5ee;
  --u-warn:         #d97706;
  --u-warn-bright:  #f59e0b;
  --u-warn-soft:    #fff4e0;
  --u-error:        #dc2626;
  --u-error-bright: #ef4444;
  --u-error-soft:   #fdecea;
  --u-info:         var(--u-accent);
  --u-info-soft:    var(--u-accent-soft);

  /* —— Sidebar —— */
  --u-sidebar-bg:     #0e0f12;
  --u-sidebar-ink:    #e6e7ec;
  --u-sidebar-muted:  #8a8d96;
  --u-sidebar-line:   #1d1f25;
  --u-sidebar-active: #1a1c22;

  /* —— Radii —— */
  --u-radius-sm: 6px;       /* inputs · badges · small cells */
  --u-radius:    8px;       /* cards · buttons · panels — DEFAULT v3 */
  --u-radius-lg: 12px;      /* modals · hero */
  --radius-pill: 999px;     /* production-local (v3 spec не имеет, оставляем) */

  /* —— Spacing —— */
  --u-space-1: 4px;
  --u-space-2: 8px;
  --u-space-3: 12px;
  --u-space-4: 16px;
  --u-space-5: 24px;
  --u-space-6: 36px;

  /* —— Component paddings —— */
  --u-pad-card-x: 12px;
  --u-pad-card-y: 10px;
  --u-pad-page-x: 28px;
  --u-pad-page-y: 24px;
  --u-row-h: 36px;

  /* —— Shadow —— */
  --u-shadow-sm:    0 1px 2px rgba(15, 17, 21, .04), 0 1px 1px rgba(15, 17, 21, .03);
  --u-shadow:       0 1px 3px rgba(15, 17, 21, .06), 0 8px 24px rgba(15, 17, 21, .05);
  --u-shadow-modal: 0 18px 50px rgba(15, 17, 21, .22);

  /* —— Focus ring (v3 single-token) —— */
  --u-ring-focus: 0 0 0 3px var(--u-accent-soft-2);

  /* —— Fonts —— */
  --u-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --u-font-mono: "JetBrains Mono", "SF Mono", "Geist Mono", ui-monospace, "Cascadia Code", monospace;

  /* —— Motion —— */
  --u-ease:      cubic-bezier(.2, .8, .2, 1);
  --u-ease-in:   cubic-bezier(.4, 0, .8, .2);
  --u-dur-fast:  120ms;
  --u-dur:       160ms;
  --u-dur-slow:  240ms;

  /* —— Production-local (not in v3 spec, preserved) —— */
  --topbar-height: 61px;

  /* —— Chart aliases (production-local, alias to status tokens) —— */
  --chart-error: var(--u-error);
  --chart-warn:  var(--u-warn);
  --chart-info:  var(--u-accent);
  --chart-ok:    var(--u-ok);

  /* —— Z-index ladder · v3 spec sticky shell hierarchy ——————
     200 modal · 150 dropdown · 100 tooltip · 80 sidebar ·
     70 topbar · 60 tabs · 50 detail-header · 40 table-head.
     v3 DESIGN_SYSTEM.html section 10b. */
  --u-z-modal:          200;
  --u-z-dropdown:       150;
  --u-z-tooltip:        100;
  --u-z-sidebar:         80;
  --u-z-topbar:          70;
  --u-z-tabs:            60;
  --u-z-detail-header:   50;
  --u-z-table-head:      40;
}

/* C.1 — глобальный focus-visible ring через --focus-ring token.
   WCAG 2.1 SC 2.4.7 (focus visible). Override в специфичных местах
   допустим (см. .auth-btn, .btn-outline etc.). */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[data-action]:focus-visible {
  outline: none;
  box-shadow: var(--u-ring-focus);
  border-radius: var(--u-radius-sm);
  position: relative;
  z-index: 2;
}

/* C.2 — глобальный row-hover highlight для всех таблиц owner-facing.
   Sticky первая колонка должна сохранить hover. Escape-hatch:
   data-no-row-hover="1" на таблице. */
.table-wrap tbody tr:hover td,
.input-v2-table tbody tr:hover td,
.consumer-matrix tbody tr:hover td,
.solar-matrix tbody tr:hover td,
.control-matrix tbody tr:hover td,
.invoice-list table tbody tr:hover td {
  background: var(--u-surface-2);
}
table[data-no-row-hover="1"] tbody tr:hover td { background: inherit; }

/* D.1 — текстовые tones для status-tags / inline-text.
   AA-passing замена для --ok / --warn / --error в текстах. */
.tag.ok, .status-pill.status-ok, .badge.ok, .pill.ok,
.text-ok { color: var(--u-ok); }
.tag.warn, .status-pill.status-warn, .badge.warn, .pill.warn,
.text-warn { color: var(--u-warn); }
.tag.err, .tag.error, .status-pill.status-err, .badge.err, .pill.err,
.text-err { color: var(--u-error); }

/* B.2 — будущие месяцы в матрицах: приглушены, owner видит "ещё не наступило". */
tr.is-future-row td,
tr.is-future-row td.num { opacity: 0.5; }
tr.is-future-row:hover td { opacity: 0.85; }

/* E.1 — form validation visual feedback. invalid state на input
   (на blur через JS-добавление class is-invalid). */
.cell-input.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--u-error);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}
.cell-input.is-warn,
input.is-warn,
select.is-warn,
textarea.is-warn {
  border-color: var(--u-warn);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}

/* J.2 — universal client avatar helper. Hash-based hue для consistent цвета. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--u-accent-soft);
  color: var(--u-accent-active);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* B.1 — universal empty-state. Иконка 32px, title 15px ink, hint 13px muted, CTA primary. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
  color: var(--u-muted);
}
.empty-state-icon {
  color: var(--u-muted-2);
  margin-bottom: 4px;
}
.empty-state-icon svg { width: 32px; height: 32px; }
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--u-ink);
}
.empty-state-hint {
  font-size: 13px;
  color: var(--u-muted);
  max-width: 420px;
  line-height: 1.5;
}
.empty-state-cta { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Phase 4 Mercury shell */
.app {
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--u-bg);
}

.app.is-sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr);
}

.sidebar {
  background: var(--u-sidebar-bg);
  color: var(--u-sidebar-ink);
  border-right: 1px solid var(--u-sidebar-line);
  padding: 18px 12px;
}

.brand {
  padding: 6px 8px 14px;
  gap: 10px;
  border-bottom: 1px solid var(--u-sidebar-line);
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #605bff 0%, #b388ff 100%);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px 5px auto auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
}

.brand-text strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
}

.brand span {
  color: var(--u-sidebar-muted);
  font-size: 11px;
}

.sidebar-toggle {
  width: 28px;
  height: 28px;
  border-color: var(--u-sidebar-line);
  background: var(--u-sidebar-active);
  color: var(--u-sidebar-muted);
  border-radius: 8px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 14px;
}

.nav-section {
  margin: 14px 8px 6px;
  color: var(--u-sidebar-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sidebar-context {
  margin: 12px 0 8px;
  padding: 10px 8px;
  border: 1px solid var(--u-sidebar-line);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}

.context-title {
  margin-bottom: 8px;
  color: var(--u-sidebar-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.context-controls {
  display: grid;
  gap: 8px;
}

.context-controls label {
  display: grid;
  gap: 4px;
  color: var(--u-sidebar-muted);
  font-size: 11px;
}

.context-controls select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--u-sidebar-line);
  border-radius: 6px;
  background: var(--u-sidebar-active);
  color: var(--u-sidebar-ink);
  padding: 7px 8px;
  font-size: 12px;
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav-mode-btn {
  margin-top: 4px;
  font-weight: 650;
}

.nav-caret {
  margin-left: auto;
  color: var(--u-sidebar-muted);
  transform: rotate(0deg);
  transition: transform .14s ease;
}

.nav-group.is-open .nav-caret {
  transform: rotate(90deg);
}

.nav-children {
  display: none;
  gap: 1px;
  padding-left: 10px;
  margin-left: 17px;
}

.nav-group.is-open .nav-children {
  display: grid;
}

.nav-sub-btn {
  min-height: 32px;
  padding: 7px 9px;
  font-size: 12px;
  color: #c9ccd4;
}

.nav-sub-btn .nav-icon {
  width: 16px;
  height: 16px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--u-sidebar-ink);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--u-sidebar-muted);
  flex-shrink: 0;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-btn:hover,
.nav-btn.is-active {
  background: var(--u-sidebar-active);
  color: #fff;
}

.nav-btn.is-active .nav-icon {
  color: #fff;
}

.app.is-sidebar-collapsed .sidebar {
  padding: 18px 10px;
}

.app.is-sidebar-collapsed .brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 14px;
}

.app.is-sidebar-collapsed .brand-text,
.app.is-sidebar-collapsed .nav-section,
.app.is-sidebar-collapsed .sidebar-context,
.app.is-sidebar-collapsed .nav-children,
.app.is-sidebar-collapsed .nav-caret,
.app.is-sidebar-collapsed .nav-label {
  display: none;
}

.app.is-sidebar-collapsed .nav-btn {
  justify-content: center;
  padding: 9px 0;
  font-size: 13px;
}

.app.is-sidebar-collapsed .nav-btn::first-letter {
  font-size: inherit;
}

.app.is-sidebar-collapsed .sidebar-toggle {
  position: static;
  flex: 0 0 auto;
}

body.density-compact {
  --pad-x: 16px;
  --pad-y: 12px;
  --row-h: 28px;
  --topbar-height: 53px;
  font-size: 13px;
}

body.density-compact .topbar {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.density-compact .dashboard {
  gap: 8px;
  margin-bottom: 12px;
}

body.density-compact .metric {
  min-height: 72px;
  padding: 10px 12px;
}

body.density-compact .metric strong {
  font-size: 20px;
}

body.density-compact .page {
  gap: 12px;
}

body.density-compact .page-title {
  font-size: 22px;
}

body.density-compact .panel-head,
body.density-compact .card-head {
  padding: 10px 12px;
}

body.density-compact .card-pad,
body.density-compact .quick-actions {
  padding: 12px;
}

body.density-compact .btn {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

body.density-compact .tab {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

body.density-compact th,
body.density-compact td {
  padding: 5px 7px;
  font-size: 12px;
}

body.density-compact input.cell-input,
body.density-compact select,
body.density-compact .month-picker-button {
  min-height: 26px;
}

body.density-compact .control-chip {
  min-height: 30px;
  padding: 3px 7px;
}

body.density-roomy {
  --pad-x: 44px;
  --pad-y: 38px;
  --row-h: 50px;
  --topbar-height: 73px;
  font-size: 15px;
}

body.density-roomy .topbar {
  padding-top: 20px;
  padding-bottom: 20px;
}

body.density-roomy .dashboard {
  gap: 18px;
  margin-bottom: 28px;
}

body.density-roomy .metric {
  min-height: 124px;
  padding: 22px 24px;
}

body.density-roomy .metric strong {
  font-size: 30px;
}

body.density-roomy .page {
  gap: 28px;
}

body.density-roomy .page-title {
  font-size: 30px;
}

body.density-roomy .panel-head,
body.density-roomy .card-head {
  padding: 18px 22px;
}

body.density-roomy .card-pad,
body.density-roomy .quick-actions {
  padding: 24px;
}

body.density-roomy .btn {
  min-height: 40px;
  padding: 9px 18px;
  font-size: 14px;
}

body.density-roomy .tab {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
}

body.density-roomy th,
body.density-roomy td {
  padding: 10px 12px;
  font-size: 13px;
}

body.density-roomy input.cell-input,
body.density-roomy select,
body.density-roomy .month-picker-button {
  min-height: 36px;
}

body.density-roomy .control-chip {
  min-height: 40px;
  padding: 6px 12px;
}

.main {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--u-bg);
}

.topbar {
  margin: 0;
  padding: 12px var(--u-pad-page-x);
  align-items: center;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  /* P.2a v2 sticky: topbar прилипает к верху viewport — owner хочет
     чтобы кнопки «Сохранить», поиск и Месяц/Квартал/Год оставались
     видны при скролле длинных страниц. */
  position: sticky;
  top: 0;
  z-index: 1800;
}

.topbar-title {
  min-width: 0;
}

.topbar h1 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.topbar p {
  margin-top: 5px;
}

/* Phase M.5 v3.7 — breadcrumb стиль. */
.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2, #64748b);
  flex-wrap: wrap;
  min-width: 0;
}

.breadcrumb-mode {
  color: var(--text-2, #64748b);
}

.breadcrumb-sep {
  color: var(--text-2, #94a3b8);
}

.breadcrumb-tab {
  color: var(--text-1, #0f172a);
  font-weight: 700;
  font-size: 16px;
}

.breadcrumb-context {
  color: var(--text-2, #94a3b8);
  font-size: 13px;
}

.save-status-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Save-status pill — заменяет старый .save-dirty-indicator. */
.save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.25);
  white-space: nowrap;
  cursor: pointer;
}

.save-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
}

/* G.1 + B.3: muted = idle «Без изменений». Прятать pill полностью,
   чтобы он не занимал ~120px topbar когда не несёт информации. Pill
   возвращается при dirty/saving/saved/error. */
.save-status[data-state="muted"] {
  display: none;
}

.save-status[data-state="warn"] {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}

.save-status[data-state="warn"] .save-status-dot {
  background: var(--u-warn, #c2701b);
  animation: save-status-pulse 1.6s ease-in-out infinite;
}

.save-status[data-state="saving"] {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.3);
}

.save-status[data-state="saving"] .save-status-dot {
  background: #6366f1;
  animation: save-status-pulse 0.9s ease-in-out infinite;
}

.save-status[data-state="error"] {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.3);
}

.save-status[data-state="error"] .save-status-dot {
  background: #dc2626;
}

.save-status-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1400;
  width: 220px;
  padding: 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.save-status-menu[hidden] {
  display: none;
}

.save-status-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-1, #0f172a);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.save-status-menu-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--u-accent, #5b5cf6);
}

.save-status-menu-item.is-primary {
  color: #b45309;
}

@keyframes save-status-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Settings money redesign (2026-05-17): pill превратился в кнопку,
   menu открывается под ней с пунктами «Сохранить» / «Перечитать с сервера». */
.save-status-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* I-1: отдельный topbar-слот слева от правого блока. margin-left:auto
     прижимает плашку к правому блоку, но её появление/смена ширины
     («Сохранение…»→«Сохранено») больше не двигают period/object/year. */
  margin-left: auto;
  flex: 0 0 auto;
}

.save-status[data-action="save-status-menu"] {
  cursor: pointer;
  border-style: solid;
}

.save-status[data-action="save-status-menu"]:hover {
  filter: brightness(.97);
}

.save-status-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--u-surface, #fff);
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.10);
  padding: 4px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.save-status-menu[hidden] {
  display: none;
}

.save-status-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--u-ink, #0f1115);
  text-align: left;
}

.save-status-menu-item:hover {
  background: var(--u-surface-2, #f1f3f7);
}

.save-status-menu-item.is-primary {
  background: var(--u-accent-soft, #eeedff);
  color: var(--u-accent-active, #4d48e6);
  font-weight: 600;
}

.save-status-menu-item.is-primary:hover {
  background: var(--u-accent, #6366f1);
  color: #fff;
}

/* Settings page: локальная Save-кнопка справа от вкладок настроек.
   Видима только когда dirty (body.has-dirty-settings). */
.settings-local-save {
  margin-left: auto;
  display: none;
}

body.has-dirty-settings .settings-local-save {
  display: inline-flex;
  align-items: center;
}

.topbar-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar-notif-icon {
  font-size: 16px;
}

.topbar-notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
}

#topbar-search,
#topbar-notifications {
  position: relative;
  font-size: 16px;
}

.actions {
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.topbar-controls {
  gap: 8px;
  margin-right: 0;
}

.control-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
  color: var(--u-muted);
  font-size: 12px;
}

.control-chip select {
  min-width: 92px;
  border: 0;
  background: transparent;
  color: var(--u-ink);
  padding: 0;
}

.auth-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: var(--u-surface);
  padding: 4px 10px;
  color: var(--u-ink);
  font-size: 12px;
  font-weight: 600;
}

.notices,
.dashboard,
.content {
  margin-left: var(--u-pad-page-x);
  margin-right: var(--u-pad-page-x);
}

.notices {
  margin-top: 16px;
}

/* Phase M.5 v3.8 — пустой notices/dashboard не должны "съедать"
   вертикальное пространство над контентом. */
.notices:empty {
  margin: 0;
  padding: 0;
}

.dashboard[hidden] {
  display: none !important;
  margin: 0;
}

.overview-page {
  padding-top: 4px;
}

.content {
  padding-bottom: var(--u-pad-page-y);
}

.dashboard {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-top: var(--u-pad-page-y);
  margin-bottom: 18px;
}

.metric,
.panel,
.card,
.notice,
.login-card {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  box-shadow: var(--u-shadow-sm);
}

.metric {
  min-height: 96px;
  padding: 16px 18px;
}

.metric span {
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 500;
}

.metric strong {
  color: var(--u-ink);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.page {
  padding: 0 0 var(--u-pad-page-y);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.page-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.02em;
}

.page-sub {
  color: var(--u-muted);
  font-size: 13px;
}

.page-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
}

.card {
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-surface);
}

.card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.card-pad {
  padding: 18px 20px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.quick-action {
  min-height: 82px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-surface);
  color: var(--u-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.quick-action span {
  color: var(--u-accent);
}

.overview-status strong {
  display: block;
  font-size: 24px;
  letter-spacing: -.02em;
}

.flow-lane-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow-lane {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) 22px minmax(180px, 1fr) 22px minmax(130px, .8fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-surface);
}

.pill-node {
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: var(--u-surface);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* —— BUTTONS · v3 spec section 06 (REBUILD-101) ——
   5 variants: .btn (default) · .btn-primary (accent fill) · .btn-ghost
   · .btn-danger · .btn-icon. Plus .btn-small (height 28) и legacy
   .btn-outline (F.4 production), .btn-warn-primary (force-edit).
   Full states: default / hover / focus / active / disabled.
   Note: блок duplicated в styles.css (lines 1200 + 7964) — sweep TODO. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
  background: var(--u-surface);
  color: var(--u-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--u-dur) var(--u-ease);
  box-shadow: none;
}

.btn:hover {
  background: var(--u-surface-2);
  border-color: var(--u-muted-2);
  box-shadow: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--u-ring-focus);
  border-color: var(--u-accent);
}

.btn:active {
  background: var(--u-accent-soft);
}

.btn[disabled],
.btn:disabled {
  background: var(--u-surface-2);
  color: var(--u-muted-2);
  border-color: var(--u-line);
  cursor: not-allowed;
  opacity: .65;
}

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

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

.btn-primary:active {
  background: var(--u-accent-active);
  border-color: var(--u-accent-active);
}

.btn-primary[disabled],
.btn-primary:disabled {
  background: var(--u-accent-soft);
  color: var(--u-accent-hover);
  border-color: var(--u-accent-soft-2);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--u-ink);
}

.btn-ghost:hover {
  background: var(--u-surface-2);
  border-color: transparent;
}

.btn-ghost:active {
  background: var(--u-accent-soft);
}

.btn-warn-primary {
  background: var(--u-error);
  border-color: var(--u-error);
  color: #fff;
}

.btn-warn-primary:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.btn-warn-primary:active {
  background: #991b1b;
  border-color: #991b1b;
}

.btn-small {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}

.btn-icon {
  padding: 5px;
  min-height: 26px;
  min-width: 26px;
  width: auto;
  justify-content: center;
  gap: 0;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--u-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--u-surface-2);
  color: var(--u-ink);
}

.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--u-line);
}

.tab {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--u-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 550;
}

.tab:hover,
.tab.active {
  color: var(--u-ink);
}

.tab.active {
  border-bottom-color: var(--u-accent);
}

.panel {
  overflow: hidden;
}

.panel-head {
  background: var(--u-surface);
  padding: 14px 18px;
}

.panel-head h2 {
  font-size: 15px;
  font-weight: 650;
}

.table-wrap {
  background: var(--u-surface);
}

/* #7 — кнопка «Добавить …» под таблицей (клик → новая строка снизу). */
.rent-table-add {
  margin-top: var(--u-space-3, 12px);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  min-height: var(--u-row-h);
  border-right: 0;
  border-bottom: 1px solid var(--u-line);
  padding: 7px 9px;
  font-size: 12px;
}

th {
  background: var(--u-table-head);
  color: var(--u-ink);
  font-weight: 650;
  padding: 6px 9px;
}

input.cell-input,
select,
.month-picker-button {
  min-height: 30px;
  border: 1px solid var(--u-line-strong);
  border-radius: 6px;
  /* It2 #1: background-color вместо shorthand — не вытаптывает
     chevron-down background-image у select (заданный на :3220). */
  background-color: var(--u-surface);
  color: var(--u-ink);
}

/* #6 (owner 2026-06-28) — базовое правило ширины колонок плотных таблиц.
   Фиксированные колонки (c-fixed) жмутся к содержимому с равными малыми
   отступами; одна гибкая колонка-текст (c-note, напр. «Примечание») забирает
   остаток и сжимается ПЕРВОЙ до своего min-width; дальше — горизонтальный
   скролл во .table-wrap. Применяется через class="flex-table" + поколоночные
   c-fixed / c-note (см. table() helper, opts.tableClass/headerClasses).
   Специфичность выше, чем у `.editable-rent .cell-input { min-width:112px }`,
   поэтому фикс-колонки больше не раздуваются до одинаковой ширины. */
.flex-table { width: 100%; table-layout: auto; }
.flex-table th.c-fixed,
.flex-table td.c-fixed { width: 1%; white-space: nowrap; }
/* Текст/числовые инпуты заполняют ячейку; селекты — по содержимому (иначе
   width:100% в узкой колонке обрезает выбранное значение «Уборо…»). */
.flex-table td.c-fixed .cell-input { width: 100%; min-width: 72px; }
/* Денежная колонка («Сумма») шире — чтобы влезало «130 000,00» (owner 2026-06-28). */
.flex-table td.c-fixed .cell-input.money { min-width: 104px; }
.flex-table td.c-fixed select { width: auto; min-width: 64px; max-width: 200px; }
.flex-table th.c-note,
.flex-table td.c-note { width: auto; }
.flex-table td.c-note .cell-input,
.flex-table td.c-note select { width: 100%; min-width: 150px; }
/* owner 2026-06-28 (#1): read-only «Примечание» (марки) в журнале взаиморасчётов
   заполняет свободное пространство колонки и выровнено слева — как инпут в
   Начислениях/Расходах (а не узкий центрированный бокс). Scroll-on-hover сохранён. */
.flex-table td.c-note .oblik-marquee {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 150px;
  text-align: left;
}
/* owner 2026-06-28 (#3): «Статья» в журнале взаиморасчётов — к левому краю,
   как «Примечание» (текстовая колонка), а не по центру. */
.flex-table td.rent-shared-article-cell { text-align: left; }
.table-wrap:has(> .flex-table) { overflow-x: auto; }

.toggle-control {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 22px;
  cursor: pointer;
}

/* Settings-redesign Слайс 1b (2026-06-20): тогглы в таблицах настроек — по
   центру колонки (горизонталь) и на одной линии с инпутами (вертикаль).
   `td:has(> .toggle-control)` бьёт только ПРОСТЫЕ тоггл-ячейки (clients/services/
   meters/money_flow/retention); матрица «Правил счетов» не задета — там тоггл
   вложен в .rule-cell-body, не прямой ребёнок td. Высота 30px = высоте
   .cell-input/select (трек 20px центрируется внутри), убирает «тогглы на разной
   высоте». */
.settings-page td:has(> .toggle-control) {
  text-align: center;
}
.settings-page td:has(> .toggle-control) > .toggle-control {
  height: 30px;
}

.toggle-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Видимый фокус с клавиатуры (WCAG 2.4.7): чекбокс визуально скрыт, рамку
   рисуем на дорожке; .slider-toggle — кнопка, фокус прямо на ней. */
.toggle-control input:focus-visible + .toggle-track,
.slider-toggle:focus-visible {
  outline: 2px solid var(--u-accent, #5B57EB);
  outline-offset: 2px;
}

.toggle-track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--u-line-strong);
  position: relative;
  transition: background-color var(--u-dur) var(--u-ease);
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,17,21,.22);
  transition: transform var(--u-dur) var(--u-ease);
}

.toggle-control input:checked + .toggle-track {
  background: var(--u-accent);
}

.toggle-control input:checked + .toggle-track::after {
  transform: translateX(14px);
}

.settings-page {
  gap: 16px;
}

.settings-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-top: -2px;
  /* Sticky под topbar — owner: при скролле длинных вкладок (Деньги,
     Привязки) переключение должно быть на месте. top: 60px — тот же
     якорь что .period-nav и .topbar (.topbar high z-index, period-nav
     z-index: 90). Settings page не имеет period-nav, поэтому 60 ниже
     period-nav безопасно. */
  position: sticky;
  top: 60px;
  /* FOLLOWUP-006: v3 spec --u-z-tabs (60) — semantic match. Fallback 60. */
  z-index: var(--u-z-tabs, 60);
  padding-block: 6px;
  background: var(--u-surface, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--u-line, #e2e8f0) 50%, transparent);
}

.settings-tabs .tab {
  flex: 0 0 auto;
}

.settings-local-save {
  display: none;
  align-items: center;
  margin-left: auto;
  padding-left: 12px;
  flex: 0 0 auto;
}

body.has-dirty-settings .settings-local-save {
  display: inline-flex;
}

.settings-save-button {
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18), 0 8px 22px rgba(99, 102, 241, 0.18);
  animation: settings-save-pulse 1.8s ease-in-out infinite;
}

@keyframes settings-save-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18), 0 8px 22px rgba(99, 102, 241, 0.14);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.26), 0 10px 26px rgba(99, 102, 241, 0.24);
  }
}

.settings-grid {
  display: grid;
  gap: 14px;
}

.ui-prefs-panel {
  position: fixed;
  right: 18px;
  top: 72px;
  z-index: 1500;
  width: 304px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  background: color-mix(in srgb, var(--u-surface) 82%, transparent);
  color: var(--u-ink);
  box-shadow: 0 16px 44px rgba(15,17,21,.18);
  backdrop-filter: blur(24px) saturate(160%);
}

.ui-prefs-head,
.ui-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ui-pref-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
}

.ui-pref-row > span {
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 600;
}

.segmented {
  /* E.2 — size = content-fit, max 480px. Не full-width — для 2-3 коротких опций. */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--u-surface-2);
  max-width: 480px;
}

.segmented button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--u-muted);
  min-height: 24px;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.segmented button.active {
  background: var(--u-surface);
  color: var(--u-ink);
  box-shadow: var(--u-shadow-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--u-surface-2);
  color: var(--u-muted);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 650;
}

.flow-service-chip,
.tag {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 650;
}

@media (max-width: 980px) {
  .app,
  .app.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    height: auto;
    overflow: visible;
  }

  .nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .nav-group {
    min-width: max-content;
  }

  .nav-group.is-open .nav-children {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }

  .nav-section {
    display: none;
  }

  .nav-btn {
    width: auto;
    min-width: max-content;
  }

  .topbar,
  .page-header,
  .overview-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .actions,
  .page-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-actions,
  .flow-lane {
    grid-template-columns: 1fr;
  }

  .ui-prefs-panel {
    left: 14px;
    right: 14px;
    top: 82px;
    width: auto;
  }
}

* {
  box-sizing: border-box;
}

html {
  /* Safari/WebKit: отключить text-autosizing — иначе текст в широких
     контейнерах (контент-таблицы) раздувается крупнее sidebar и не реагирует
     на зум (owner 2026-05-30). Делает рендер = авторским размерам везде. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--u-bg);
  color: var(--u-ink);
  /* v3 typography spec (REBUILD-004): body 13/400/1.5, tabular nums для money. */
  font-family: var(--u-font-sans);
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* v3 spec type scale (REBUILD-004):
   page-title 20/600/1.2  · section 15/600/1.3
   card-title 13/600/1.35 · body 13/400/1.5
   small      12/500/1.4  · micro 11/600/1.3 uppercase tracking .04em
   Money / digits / IDs — Mono с tabular-nums. */
.t-page-title { font: 600 20px/1.2 var(--u-font-sans); letter-spacing: -0.005em; }
.t-section    { font: 600 15px/1.3 var(--u-font-sans); }
.t-card-title { font: 600 13px/1.35 var(--u-font-sans); }
.t-body       { font: 400 13px/1.5 var(--u-font-sans); }
.t-small      { font: 500 12px/1.4 var(--u-font-sans); }
.t-micro      { font: 600 11px/1.3 var(--u-font-sans); text-transform: uppercase; letter-spacing: 0.04em; }
.t-money,
.t-mono       { font-family: var(--u-font-mono); font-variant-numeric: tabular-nums; }

body.theme-dark {
  color-scheme: dark;
  --bg: #0b0c0f;
  --surface: #14161b;
  --surface-2: #1b1e25;
  --surface-3: #181b21;
  --panel: var(--u-surface);
  --panel-2: var(--u-surface-2);
  --ink: #f3f4f6;
  --ink-2: #d3d6dd;
  --muted: #8d93a0;
  --muted-2: #6c727e;
  --line: #232730;
  --line-2: #1d2028;
  --line-strong: #2c313c;
  --accent: #7d79ff;
  --accent-soft: #1f1d3d;
  --accent-strong: #9591ff;
  --table-head: #1b1e25;
  --input: #111319;
  --sidebar-bg: #07080a;
  --sidebar-line: #14161b;
  --sidebar-active-bg: #14161b;
}

body.density-compact {
  --pad-x: 16px;
  --pad-y: 12px;
  --row-h: 28px;
}

body.density-roomy {
  --pad-x: 44px;
  --pad-y: 38px;
  --row-h: 50px;
}

button,
input,
select {
  font: inherit;
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  transition: grid-template-columns .16s ease;
}

.app.is-sidebar-collapsed {
  grid-template-columns: 70px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: #15211d;
  color: #f5fbf8;
  padding: 20px 14px;
  border-right: 1px solid #0e1714;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: relative;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #e6f4ee;
  color: #12684d;
  border-radius: 8px;
  font-weight: 800;
}

.brand span {
  display: block;
  margin-top: 2px;
  color: #a8bbb2;
  font-size: 13px;
}

.sidebar-toggle {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #f5fbf8;
  border-radius: 6px;
  cursor: pointer;
}

.app.is-sidebar-collapsed .sidebar {
  padding: 18px 10px;
}

.app.is-sidebar-collapsed .brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 14px;
}

.app.is-sidebar-collapsed .brand-text,
.app.is-sidebar-collapsed .nav-btn {
  font-size: 0;
}

.app.is-sidebar-collapsed .brand-mark {
  width: 34px;
  height: 34px;
}

.app.is-sidebar-collapsed .sidebar-toggle {
  position: static;
  flex: 0 0 auto;
  font-size: 14px;
}

.app.is-sidebar-collapsed .nav-btn {
  text-align: center;
  padding: 10px 0;
}

.app.is-sidebar-collapsed .nav-btn::first-letter {
  font-size: 14px;
}

.nav {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

.nav-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: #dbe8e2;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-btn:hover,
.nav-btn.is-active {
  background: rgba(255,255,255,.1);
  color: #ffffff;
}

.main {
  min-width: 0;
  padding: 24px;
}

.topbar {
  position: sticky;
  top: 0;
  /* Keep the whole topbar stacking context above sticky period-nav, so the
     object selector dropdown is never sliced by the period controls. */
  z-index: 1800;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: -24px -24px 16px;
  padding: 18px 24px 14px;
  background: rgba(247, 250, 248, .94);
  border-bottom: 1px solid var(--u-line);
  backdrop-filter: blur(12px);
}

h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

p {
  margin: 6px 0 0;
  color: var(--u-muted);
}

.topbar-controls {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-right: 10px;
}

.topbar-controls label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.auth-chip {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface-2);
  color: var(--u-muted);
  font-size: 13px;
}

.source-meta {
  display: inline-block;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Старый дубль .btn удалён 2026-06-20 — перекрывал v3 (radius 8px / padding 9px)
   неверными значениями. Канон — .btn v3 выше (~1275). */

.login-card {
  max-width: 460px;
  margin: 9vh auto 0;
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--u-line);
  border-radius: 10px;
  background: var(--u-surface);
  box-shadow: 0 12px 34px rgba(21, 33, 29, .08);
}

.login-card h2 {
  margin: 0;
  font-size: 22px;
}

.login-card label {
  display: grid;
  gap: 6px;
  color: var(--u-muted);
  font-size: 13px;
}

.muted-text {
  display: block;
  margin-top: 3px;
  color: var(--u-muted);
  font-size: 12px;
}

.auth-create-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1fr) minmax(120px, .7fr) minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.auth-create-grid label {
  display: grid;
  gap: 6px;
  color: var(--u-muted);
  font-size: 12px;
}

.auth-permission-grid {
  display: grid;
  gap: 8px;
  min-width: 420px;
}

.auth-permission-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(74px, auto));
  gap: 8px;
  align-items: center;
}

.auth-permission-row label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--u-muted);
  white-space: nowrap;
  font-size: 12px;
}

/* === SPA «Мой аккаунт» (R4.2) === */

.account-info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 16px;
  align-items: baseline;
}

.account-info-grid dt {
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 500;
}

.account-info-grid dd {
  margin: 0;
  font-size: 13px;
  color: var(--u-ink);
}

.account-actions {
  margin: 0 0 24px;
}

.account-subhead {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--u-ink);
}

.settings-help-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--u-surface-2);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  font-size: 12px;
  color: var(--u-muted);
}

.auth-form-error {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--u-radius);
  color: var(--u-err, #ef4444);
  font-size: 12px;
}

/* === SPA «Пользователи и доступ» === */

/* slice 3.3 v3: .auth-users-table polish — v3 tokens + matrix-aligned header */
.auth-users-table-wrap {
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  overflow: hidden;
  background: var(--u-surface);
}

.auth-users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  table-layout: auto;
  min-width: 0;
}

.auth-users-table th,
.auth-users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--u-line);
  vertical-align: middle;
  text-align: left;
}

.auth-users-table thead th {
  background: var(--u-table-head);
  color: var(--u-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--u-line);
}

.auth-users-table tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--u-muted-tone) 3.5%, var(--u-surface));
}

.auth-users-table tbody tr:last-child td {
  border-bottom: 0;
}

.auth-users-table tbody tr:hover td {
  background: var(--u-surface);
}

.auth-users-table th.auth-cell-role,
.auth-users-table th.auth-cell-status,
.auth-users-table td.auth-cell-role,
.auth-users-table td.auth-cell-status {
  width: 1%;
  white-space: nowrap;
}

.auth-users-table td.auth-cell-actions,
.auth-users-table th.auth-cell-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.auth-users-table .auth-empty {
  text-align: center;
  color: var(--u-muted);
  padding: 20px;
}

.auth-user-name {
  font-weight: 600;
  color: var(--u-ink, #0f1115);
  font-size: 13px;
  line-height: 1.3;
}

.auth-user-email {
  color: var(--u-muted);
  font-size: 12px;
  line-height: 1.3;
  margin-top: 2px;
}

.auth-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--u-line-strong);
  background: var(--u-surface);
  color: var(--u-ink, #0f1115);
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.auth-btn:hover {
  background: var(--u-surface-2);
  border-color: var(--u-line-strong);
}

.auth-btn:focus-visible {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3px var(--u-accent-soft);
}

.auth-btn-primary {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--u-accent-ink, #fff);
}

.auth-btn-primary:hover {
  background: var(--u-accent-active, #4d48e6);
  border-color: var(--u-accent-active, #4d48e6);
}

.auth-btn-warn {
  color: #b45309;
  border-color: #f4c891;
  background: var(--u-surface);
}

.auth-btn-warn:hover {
  /* FOLLOWUP-007: exact match v3 tokens. Fallbacks preserve visual. */
  background: var(--u-warn-soft, #fff4e0);
  border-color: var(--u-warn, #d97706);
}

.auth-btn-danger {
  color: var(--u-error, #b91c1c);
  border-color: #f3b9b9;
  background: var(--u-surface);
}

.auth-btn-danger:hover {
  background: var(--u-error-soft, #fff1f1);
  border-color: var(--u-error, #dc2626);
}

.auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  background: var(--u-surface-2);
  color: var(--u-muted);
  white-space: nowrap;
}

.auth-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.auth-pill-active {
  /* FOLLOWUP-007: exact match v3 token --u-ok-soft. Fallback preserves visual. */
  background: var(--u-ok-soft, #e8f5ee);
  color: var(--u-ok, #15803d);
}

.auth-pill-pending {
  /* FOLLOWUP-007: exact match v3 tokens. */
  background: var(--u-warn-soft, #fff4e0);
  color: var(--u-warn, #b45309);
}

.auth-pill-disabled,
.auth-pill-deleted {
  background: var(--u-error-soft, #fdecea);
  color: var(--u-error, #b91c1c);
}

.auth-muted {
  color: var(--u-muted);
  font-size: 12px;
}

.auth-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--u-muted);
  cursor: pointer;
  user-select: none;
}

.auth-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-toggle-track {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--u-line-strong);
  border-radius: 999px;
  transition: background .15s ease;
}

.auth-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 17, 21, .15);
  transition: transform .15s ease;
}

.auth-toggle input:checked + .auth-toggle-track {
  background: var(--u-accent);
}

.auth-toggle input:checked + .auth-toggle-track::after {
  transform: translateX(14px);
}

.auth-create-form {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 8px;
}

.auth-create-form > summary {
  cursor: pointer;
  color: var(--u-muted);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  list-style: none;
}

.auth-create-form > summary::-webkit-details-marker {
  display: none;
}

.auth-create-form > summary::before {
  content: "+ ";
  color: var(--u-accent);
  font-weight: 700;
}

.auth-create-form[open] > summary {
  margin-bottom: 12px;
}

.auth-create-form[open] > summary::before {
  content: "− ";
}

.auth-create-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(120px, .8fr) minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 900px) {
  .auth-create-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.auth-field {
  display: grid;
  gap: 4px;
}

.auth-field > span {
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.auth-input {
  height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--u-line-strong);
  border-radius: 6px;
  background: var(--u-surface);
  color: var(--u-ink, #0f1115);
  font: inherit;
  font-size: 13px;
}

.auth-input:focus {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3px var(--u-accent-soft);
}

/* permissions modal */
.auth-perms-card {
  max-width: 640px;
  width: 100%;
}

.auth-perms-body {
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 4px;
}

.auth-perms-empty {
  color: var(--u-muted);
  font-size: 13px;
}

.auth-perms-section h4 {
  margin: 0 0 10px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--u-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.auth-perms-section + .auth-perms-section {
  padding-top: 4px;
}

.auth-perms-object {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 10px;
}

.auth-perms-object:last-child {
  margin-bottom: 0;
}

.auth-perms-object-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.auth-perms-object-head strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--u-ink, #0f1115);
}

.auth-perms-object-summary {
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 500;
}

.auth-perms-grant-btn {
  display: none;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--u-accent);
  border-radius: 999px;
  background: var(--u-surface);
  color: var(--u-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.auth-perms-grant-btn:hover {
  background: var(--u-accent);
  color: var(--u-accent-ink, #fff);
}

.auth-perms-object.is-collapsed {
  padding: 10px 14px;
}

.auth-perms-object.is-collapsed .auth-perms-presets,
.auth-perms-object.is-collapsed .auth-perms-checks,
.auth-perms-object.is-collapsed .auth-perms-object-summary {
  display: none;
}

.auth-perms-object.is-collapsed .auth-perms-grant-btn {
  display: inline-flex;
}

.auth-perms-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auth-perms-preset {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--u-line-strong);
  border-radius: 999px;
  background: var(--u-surface);
  color: var(--u-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.auth-perms-preset:hover {
  background: var(--u-surface-2);
  border-color: var(--u-line-strong);
  color: var(--u-ink, #0f1115);
}

.auth-perms-preset.is-active {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--u-accent-ink, #fff);
}

.auth-perms-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.auth-perms-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.auth-perms-check:hover {
  border-color: var(--u-line-strong);
}

.auth-perms-check input[type="checkbox"] {
  margin: 1px 0 0 0;
  flex-shrink: 0;
  accent-color: var(--u-accent);
  width: 15px;
  height: 15px;
}

.auth-perms-check-label {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.auth-perms-check-label strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-ink, #0f1115);
  line-height: 1.2;
}

.auth-perms-check-hint {
  font-size: 11px;
  color: var(--u-muted);
  line-height: 1.25;
}

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

.btn:hover {
  background: #eef6f1;
  border-color: var(--u-accent);
  box-shadow: 0 3px 10px rgba(33, 94, 72, .12);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:disabled {
  opacity: .65;
  cursor: default;
}

.btn-primary {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--u-accent-ink);
}

.btn-primary:hover {
  background: #14613f;
  border-color: #14613f;
}

/* Старый дубль .btn-small удалён 2026-06-20 — канон v3 выше (~1377). */

/* .btn-danger · v3 spec: text + border error, hover soft fill, active filled. */
.btn-danger {
  color: var(--u-error);
  border-color: var(--u-error-soft);
}

.btn-danger:hover {
  background: var(--u-error-soft);
  border-color: var(--u-error);
}

.btn-danger:active {
  background: var(--u-error);
  color: #fff;
  border-color: var(--u-error);
}

/* F.4 legacy: outline-стиль для secondary-actions (например «Выпустить»
   на индивидуальной строке счёта когда primary CTA — group-level bulk-кнопка
   сверху). v3 не имеет .btn-outline отдельно — оставлено для production. */
.btn-outline {
  background: transparent;
  border-color: var(--u-accent);
  color: var(--u-accent);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--u-accent-soft);
  border-color: var(--u-accent-active);
  color: var(--u-accent-active);
}

.action-delete {
  /* Settings-redesign Слайс D (2026-06-20): удаление = иконка-корзина 28×28 во
     ВСЕХ таблицах настроек (был легаси min-width:76px под текст «Удалить» —
     раздувал иконку до базовой ширины и давал H-scroll). Маленький аккуратный
     размер — как на вкладке Счётчики. Текст «Удалить» остался только в
     danger-зонах (у них нет .action-delete). */
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
}

/* Иконка-корзинка в плотных таблицах: компактный квадрат (как в «Счётчиках»),
   НЕ наследует min-width: 76px от текстового .action-delete. */
.btn-icon.action-delete {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
}

.notices {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.notice {
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  border-left: 4px solid var(--u-accent);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.notice.error {
  border-left-color: var(--u-error);
}

.notice-text { flex: 1 1 auto; }

.notice-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  padding: 4px 8px;
  border-radius: 4px;
}

.notice-close:hover {
  background: var(--bg-soft, #f3f4f6);
  color: var(--text, #111827);
}

.dirty-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(22, 32, 28, .32);
}

.dirty-modal-card {
  width: min(440px, 100%);
  border: 1px solid var(--u-line-strong);
  border-radius: 10px;
  background: var(--u-surface);
  box-shadow: 0 18px 50px rgba(33, 47, 41, .22);
  padding: 18px;
}

.dirty-modal-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.dirty-modal-card p,
.dirty-modal-card ul {
  margin: 0 0 12px;
  color: var(--u-muted);
}

.dirty-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.invoice-confirm-card {
  width: min(560px, calc(100vw - 40px));
  display: grid;
  gap: 14px;
  border: 1px solid var(--u-line-strong, #cbd5e1);
  border-radius: 12px;
  background: var(--u-surface, #fff);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
  padding: 22px;
  color: var(--text-1, #0f172a);
}

.invoice-confirm-head {
  display: grid;
  gap: 6px;
}

.invoice-confirm-eyebrow {
  color: var(--accent-1, #6366f1);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.invoice-confirm-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: 0;
}

.invoice-confirm-head p {
  margin: 0;
  color: var(--text-2, #64748b);
  font-size: 14px;
  line-height: 1.45;
}

.invoice-confirm-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.invoice-confirm-summary > div {
  min-width: 0;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 8px;
  background: var(--u-surface-2, #f8fafc);
  padding: 10px 12px;
}

.invoice-confirm-summary span,
.invoice-confirm-reason > span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-2, #64748b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.invoice-confirm-summary strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
}

.invoice-confirm-reason {
  display: grid;
  gap: 6px;
}

.invoice-confirm-reason .cell-input {
  width: 100%;
  box-sizing: border-box;
}

.invoice-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

@media (max-width: 640px) {
  .invoice-confirm-summary {
    grid-template-columns: 1fr;
  }
}

/* «Что запечётся» в счёт + soft-предупреждение о пустых реквизитах (confirm-модалка выпуска). */
.invoice-confirm-supplier {
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 8px;
  background: var(--u-surface-2, #f8fafc);
  padding: 10px 12px;
}

.invoice-confirm-supplier-title {
  margin-bottom: 8px;
  color: var(--text-2, #64748b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.invoice-confirm-supplier-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.invoice-confirm-supplier-list > div {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 4px 12px;
  align-items: baseline;
}

.invoice-confirm-supplier-list dt {
  color: var(--text-2, #64748b);
  font-size: 12px;
  font-weight: 600;
}

.invoice-confirm-supplier-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 640;
  line-height: 1.25;
}

.invoice-confirm-supplier.is-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-color: var(--u-warn, #d97706);
  background: var(--u-warn-soft, #fff4e0);
  color: var(--u-warn, #b45309);
}

.invoice-confirm-supplier.is-warning svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.invoice-confirm-supplier-text {
  display: grid;
  gap: 3px;
}

.invoice-confirm-supplier-text strong {
  font-size: 13px;
  font-weight: 720;
  line-height: 1.2;
}

.invoice-confirm-supplier-text span {
  color: var(--text, #334155);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.metric {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 8px;
  padding: 12px;
  min-height: 86px;
}

.metric span {
  display: block;
  color: var(--u-muted);
  font-size: 12px;
}

.muted {
  color: var(--u-muted);
  font-size: 12px;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.15;
}

.overview-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 600;
}

.overview-compare-toggle input {
  margin: 0;
}

.overview-delta-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--u-surface);
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 650;
}

.overview-delta-chip.is-up {
  color: var(--u-error);
}

.overview-delta-chip.is-down {
  color: var(--u-ok);
}

.content {
  min-width: 0;
}

.panel {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 8px;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-surface-2);
}

.panel-head h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.panel-head p {
  font-size: 13px;
}

.panel-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 2026-05-25: select «+ Из участников ▾» в panel-actions Settings.
   Подражает btn.btn-small чтобы стоять рядом с «Добавить» без визуального
   диссонанса. Используется для инвесторов сейчас; если потребуется для
   других collections — оставляем тот же класс. */
.settings-add-from-registry {
  font: inherit;
  font-size: 13px;
  padding: 6px 24px 6px 10px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--surface, #fff);
  border-radius: 6px;
  color: var(--ink, #0f172a);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
  min-height: 30px;
}
.settings-add-from-registry:hover { border-color: var(--accent, #6366f1); }
.settings-add-from-registry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(99, 102, 241, 0.18)), 0 0 0 3px var(--accent, #6366f1);
}

/* Single in-page tab (:only-child): заголовок дублирует имя вкладки — скрываем
   h2+p и весь head. МНОГОпанельные вкладки (Настройки аренды: Стороны/Структура)
   заголовки секций СОХРАНЯЮТ — паритет с Коммунальными (карточки «Основное»/«Солнце…»
   с заголовком+подзаголовком). Раунд-2 Фаза 4: было `> .panel` (прятало и в много-
   панельных) → `:only-child`. Кнопку «Свернуть» прячем во ВСЕХ табах (как в
   Коммунальных — без коллапса). На «Все разделы» (.is-all) head — разделитель. */
.page-tab-panel:not(.is-all) > .panel:only-child > .panel-head > div:first-child { display: none; }
.page-tab-panel:not(.is-all) > .panel > .panel-head [data-action="toggle-panel"] { display: none; }
.page-tab-panel:not(.is-all) > .panel:only-child > .panel-head:not(:has(.panel-actions > *:not([data-action="toggle-panel"]))) {
  display: none;
}

.panel-body[hidden] {
  display: none;
}

.column-controls {
  padding: 4px 10px;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-surface);
}

.column-controls summary {
  cursor: pointer;
  color: var(--u-muted);
  font-size: 11px;
  display: inline-block;
  margin-right: 8px;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.column-controls summary::-webkit-details-marker { display: none; }
.column-controls summary:hover { background: var(--u-surface-2); color: var(--u-ink); }

.column-controls[open] summary { color: var(--u-ink); background: var(--u-surface-2); }

.column-controls-menu {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.column-controls .btn {
  font-size: 11px;
}

.btn.is-muted {
  color: var(--u-muted);
  background: var(--u-surface-2);
}

.table-wrap {
  overflow: auto;
  max-width: 100%;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--u-line);
  border-right: 1px solid var(--u-line);
  padding: 5px 7px;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
}

th:first-child,
td:first-child {
  text-align: left;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--u-table-head);
  color: #2b3832;
  font-weight: 650;
  white-space: pre-line;
  line-height: 1.1;
  padding: 3px 7px;
}

.column-title,
.column-unit {
  display: block;
}

.column-unit {
  margin-top: 1px;
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 500;
}

th[draggable="true"] {
  cursor: grab;
}

td:has(.action-delete) {
  /* Settings-redesign Слайс D (2026-06-20): иконка-корзина вместо текста
     «Удалить» → колонка сузилась с 96px до 48px (текст остался только в
     danger-зонах, они не в .action-delete-ячейках таблиц). */
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
}

tr.start-row td {
  background: #f1f6fa;
  font-weight: 650;
}

tfoot td {
  background: #f7faf8;
  font-weight: 700;
  border-top: 2px solid var(--u-line-strong);
}

input.cell-input {
  width: 78px;
  min-width: 0;
  border: 1px solid #ccd8d2;
  border-radius: 6px;
  background: var(--u-surface);
  padding: 5px 6px;
  text-align: center;
}

/* owner 2026-06-28: нативные стрелки-спиннеры number-инпутов — убраны (уродские,
   наезжали на число). Значение вводится руками; паддинг под спиннер больше не нужен. */
input.cell-input[type="number"]::-webkit-outer-spin-button,
input.cell-input[type="number"]::-webkit-inner-spin-button,
.rent-shared-pct-input::-webkit-outer-spin-button,
.rent-shared-pct-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.cell-input[type="number"],
.rent-shared-pct-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

input.cell-input.text {
  width: 150px;
  text-align: left;
}

input.cell-input.full-width,
input.meter-name-input {
  width: 100%;
  min-width: 180px;
  box-sizing: border-box;
}

input.cell-input.date {
  width: 128px;
}

input.cell-input.money,
input.cell-input.rate {
  width: 86px;
}

input.cell-input.kwh,
input.cell-input.quantity,
input.cell-input.number {
  width: 96px;
}

input.cell-input.compact {
  width: 64px;
  margin-top: 6px;
}

input.cell-input::placeholder {
  color: var(--u-muted, #64748b);
  opacity: 0.72;
  font-weight: 500;
}

select {
  min-width: 70px;
  border: 1px solid #ccd8d2;
  border-radius: 6px;
  background: var(--u-surface);
  padding: 5px 24px 5px 8px;
  /* G.2 — стилизованный native dropdown: chevron справа, тонкие отступы,
     OS-style выпадающий список сохраняется (нет custom popover). */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px 12px;
  cursor: pointer;
}
select:disabled { opacity: 0.6; cursor: not-allowed; }
select[multiple] {
  background-image: none;
  padding-right: 8px;
}

.settings-grid {
  display: grid;
  gap: 14px;
}

.settings-table-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 8px;
}

.settings-table-controls label {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  margin: 0;
}

.settings-table-controls input[type="search"] {
  min-width: 180px;
}

.settings-table-controls select {
  min-width: 150px;
}

.input-origin-block {
  display: grid;
  gap: 8px;
}

.input-origin-block[data-input-origin-group="supplier"] {
  border-left: 3px solid var(--u-accent);
  padding-left: 10px;
}

.input-origin-block[data-input-origin-group="service"] {
  border-left: 3px solid var(--u-accent);
  padding-left: 10px;
}

.input-origin-block[data-input-origin-group="readings"] {
  border-left: 3px solid var(--u-line-strong);
  padding-left: 10px;
}

.settings-groups {
  display: grid;
  gap: 22px;
}

.settings-group {
  display: grid;
  gap: 12px;
}

.settings-group-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.settings-group-head h2 {
  margin: 0;
  font-size: 18px;
}

.consumer-stack,
.investor-stack {
  grid-template-columns: minmax(0, 1fr);
}

.consumer-year-matrix {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.consumer-year-matrix .panel {
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

.consumer-year-matrix .panel-head {
  align-items: flex-start;
  background: var(--u-surface, #fff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 14px 16px 8px;
}

.consumer-year-matrix .panel-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.consumer-year-matrix .panel-head p {
  margin: 6px 0 0;
  color: var(--text-2, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.consumer-year-matrix .panel-actions .btn {
  border-color: var(--border, #e2e8f0);
  background: transparent;
  color: var(--text-2, #64748b);
}

.consumer-matrix {
  --consumer-label-width: 200px;
  min-width: 0;
  table-layout: fixed;
}

.consumer-matrix .consumer-row-label,
.consumer-matrix th.consumer-row-label-head {
  min-width: var(--consumer-label-width);
  width: var(--consumer-label-width);
  white-space: normal;
}

.consumer-matrix .consumer-row-label {
  position: sticky;
  padding: 7px 10px 7px 10px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}

.consumer-matrix .consumer-row-name {
  display: block;
  overflow: visible;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  text-overflow: clip;
}

/* 2026-05-23 ui-followup #4А: единый стиль первой колонки на всех
   таблицах — unit/sub строкой под именем, muted 11px. Заменяет старый
   absolute right/bottom accent-вариант. */
.consumer-matrix .consumer-row-unit {
  display: block;
  margin-top: 2px;
  color: var(--u-muted, var(--u-muted, #6e7280));
  font-weight: 400;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.consumer-matrix .consumer-month-head {
  min-width: 0;
  width: calc((100% - var(--consumer-label-width)) / 12);
}

.consumer-month-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.consumer-status-row .status-wrap,
.consumer-money-cell .money-explain {
  justify-content: center;
}

/* dual-ячейка расшифровки: сумма (грн) сверху + кол-во (единица) снизу.
   Единый стиль для электро/воды/газа (owner 2026-06-14). Ложится в готовый
   вертикальный flex-стек money-explain в readonly-ячейке. */
.consumer-money-cell .consumer-dual {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.consumer-money-cell .consumer-dual .dual-main {
  font-variant-numeric: tabular-nums;
}

.consumer-money-cell .consumer-dual .dual-sub {
  font-size: 11px;
  line-height: 1.1;
  color: var(--u-muted, #6e7280);
  font-variant-numeric: tabular-nums;
}

/* Панель «Проверки»: чип с коротким ярлыком/счётчиком проблем в ячейке
   (вместо пустой точки) — видно ЧТО и сколько не так (owner 2026-06-14). */
.consumer-check-chip {
  display: inline-block;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: pointer;
}

.consumer-check-chip.is-error {
  background: color-mix(in srgb, var(--u-error, #ef4444) 16%, var(--u-surface, #fff));
  color: var(--u-error, #b91c1c);
}

.consumer-check-chip.is-warn {
  background: color-mix(in srgb, var(--u-warn, #c2701b) 18%, var(--u-surface, #fff));
  color: var(--u-warn, #a16207);
}

.consumer-total-row .consumer-row-label,
.consumer-subtotal-row .consumer-row-label {
  background: color-mix(in srgb, var(--u-muted) 5%, var(--u-surface));
}

.consumer-total-row .consumer-row-name,
.consumer-subtotal-row .consumer-row-name {
  font-weight: 700;
}

/* D.3: total/key rows — ink + bold, не accent.
   Tone-цвет резервируем для status-dots / сигналов, не для подитогов. */
.consumer-key-row .consumer-row-name,
.consumer-key-row .consumer-month-cell {
  color: var(--text-1, #0f172a);
  font-weight: 700;
}

.consumer-key-row .consumer-row-unit {
  color: var(--u-muted, #6e7280);
}

.consumer-key-row .money-explain {
  font-weight: 700;
}

.consumer-matrix tbody tr:nth-child(odd) .consumer-row-label,
.consumer-matrix tbody tr:nth-child(odd) .input-v2-cell:not(.is-selected):not(.is-closed) {
  background-color: color-mix(in srgb, var(--u-accent, #6366f1) 3%, var(--u-surface, #fff));
}

.consumer-matrix tbody tr:nth-child(even) .consumer-row-label,
.consumer-matrix tbody tr:nth-child(even) .input-v2-cell:not(.is-selected):not(.is-closed) {
  background-color: var(--u-surface, #fff);
}

.consumer-year-matrix .input-v2-table-wrap {
  overflow-x: hidden;
}

.consumer-matrix .consumer-group-row .consumer-group-label {
  padding: 10px 12px 9px;
  color: color-mix(in srgb, var(--u-accent, #6366f1) 42%, var(--text-1, #0f172a));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--u-accent, #6366f1) 8%, var(--u-surface, #fff)) 0%,
    color-mix(in srgb, var(--u-accent, #6366f1) 4%, var(--u-surface, #fff)) 38%,
    var(--u-surface, #fff) 100%
  );
  border-top: 1px solid color-mix(in srgb, var(--u-accent, #6366f1) 14%, var(--border, #e2e8f0));
  border-bottom: 1px solid color-mix(in srgb, var(--u-accent, #6366f1) 10%, var(--border, #e2e8f0));
  border-left: 2px solid color-mix(in srgb, var(--u-accent, #6366f1) 42%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.consumer-matrix .consumer-month-cell:last-child {
  border-right: 2px solid transparent;
}

.consumer-matrix tbody tr .consumer-row-label {
  border-left-color: transparent;
  border-right-color: transparent;
}

.consumer-matrix tbody tr .consumer-month-cell:last-child {
  border-right-color: transparent;
}

.consumer-matrix tbody tr:nth-child(odd) .consumer-row-label {
  border-left-color: color-mix(in srgb, var(--u-accent, #4f46e5) 42%, transparent);
  border-right-color: transparent;
}

.consumer-matrix tbody tr:nth-child(odd) .consumer-month-cell:last-child {
  border-right: 2px solid color-mix(in srgb, var(--u-accent, #4f46e5) 28%, transparent);
}

.consumer-matrix tbody tr:nth-child(even) .consumer-row-label {
  border-left-color: transparent;
  border-right-color: transparent;
}

.consumer-matrix tbody tr:nth-child(even) .consumer-month-cell:last-child {
  border-right-color: transparent;
}

.consumer-matrix tbody tr:last-child .consumer-month-cell.is-selected {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.solar-year-matrix {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.solar-year-matrix .panel {
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

.solar-year-matrix .panel-head {
  align-items: flex-start;
  background: var(--u-surface, #fff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 14px 16px 8px;
}

.solar-year-matrix .panel-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.solar-year-matrix .panel-head p {
  margin: 6px 0 0;
  color: var(--text-2, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.solar-year-matrix .panel-actions .btn {
  border-color: var(--border, #e2e8f0);
  background: transparent;
  color: var(--text-2, #64748b);
}

.solar-matrix {
  --solar-label-width: 200px;
  min-width: 0;
  table-layout: fixed;
}

.solar-matrix .solar-row-label,
.solar-matrix th.solar-row-label-head {
  min-width: var(--solar-label-width);
  width: var(--solar-label-width);
  white-space: normal;
}

.solar-matrix .solar-row-label {
  position: sticky;
  padding: 7px 10px 7px 10px;
}

.solar-matrix .solar-row-name {
  display: block;
  overflow: visible;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  text-overflow: clip;
}

/* C.3: inline SVG arrow в подписях маршрутов солнца — вместо литерала «→». */
.route-arrow {
  display: inline-block;
  vertical-align: -2px;
  margin: 0 2px;
  color: var(--u-muted, #6e7280);
}

/* 2026-05-23 ui-followup #4А: единый стиль — unit muted под именем,
   как solar-row-meta. Старый accent right/bottom вариант снят. */
.solar-matrix .solar-row-unit {
  display: block;
  margin-top: 2px;
  color: var(--u-muted, var(--u-muted, #6e7280));
  font-weight: 400;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.solar-matrix .solar-month-head {
  min-width: 0;
  width: calc((100% - var(--solar-label-width)) / 12);
}

.solar-month-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.solar-status-row .status-wrap,
.solar-money-cell .money-explain {
  justify-content: center;
}

.solar-status-cell .status {
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.solar-total-row .solar-row-label {
  background: color-mix(in srgb, var(--u-muted) 5%, var(--u-surface));
}

.solar-total-row .solar-row-name {
  font-weight: 700;
  color: var(--text-1, #0f172a);
}

/* D.3: total/key rows — ink + bold, не accent.
   Tone-цвет резервируем для status-dots, не для подитогов. */
.solar-key-row .solar-row-name {
  color: var(--text-1, #0f172a);
  font-weight: 700;
}

.solar-matrix tbody tr:nth-child(odd) .solar-row-label,
.solar-matrix tbody tr:nth-child(odd) .input-v2-cell:not(.is-selected),
.solar-matrix tbody tr:nth-child(odd) .input-v2-start-cell {
  background-color: color-mix(in srgb, var(--u-accent, #6366f1) 3%, var(--u-surface, #fff));
}

.solar-matrix tbody tr:nth-child(even) .solar-row-label,
.solar-matrix tbody tr:nth-child(even) .input-v2-cell:not(.is-selected),
.solar-matrix tbody tr:nth-child(even) .input-v2-start-cell {
  background-color: var(--u-surface, #fff);
}

.solar-diff-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.15;
}

.solar-diff-percent {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.solar-diff-percent.is-ok {
  color: var(--u-ok);
}

.solar-diff-percent.is-warn {
  color: var(--u-warn);
}

.solar-diff-percent.is-danger {
  color: var(--u-error);
}

.solar-text-cell {
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.solar-final {
  display: grid;
  gap: 14px;
}

.solar-year-matrix .input-v2-table-wrap {
  overflow-x: hidden;
}

.solar-hero-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.solar-hero-kpi-grid.control-kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 0;
}

.solar-hero-kpi-card {
  min-width: 0;
}

.solar-hero-kpi-card.is-energy {
  border-color: color-mix(in srgb, #16a34a 22%, var(--u-line, #e2e8f0));
}

.solar-hero-kpi-card.is-money,
.solar-hero-kpi-card.is-bank,
.solar-hero-kpi-card.is-investor {
  border-color: color-mix(in srgb, #c2701b 22%, var(--u-line, #e2e8f0));
}

.solar-hero-kpi-card.is-client {
  border-color: color-mix(in srgb, #0ea5e9 22%, var(--u-line, #e2e8f0));
}

.solar-hero-kpi-card.is-warn {
  border-color: color-mix(in srgb, var(--u-warn, #c2701b) 32%, var(--u-line, #e2e8f0));
  background: color-mix(in srgb, var(--u-warn, #c2701b) 5%, var(--u-surface));
}

.solar-hero-kpi-card.is-ok {
  border-color: color-mix(in srgb, var(--u-ok, #22c55e) 28%, var(--u-line, #e2e8f0));
}

.solar-hero-kpi-label,
.solar-hero-kpi-hint {
  color: var(--text-2, #64748b);
  font-size: 11px;
  line-height: 1.25;
}

.solar-hero-kpi-label {
  text-transform: uppercase;
}

.solar-hero-kpi-value {
  color: var(--text);
  font-size: 19px;
  line-height: 1.1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.solar-hero-kpi-value span {
  color: var(--text-2, #64748b);
  font-size: 11px;
  font-weight: 600;
}

.solar-matrix .solar-row-label {
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}

.solar-matrix .solar-month-cell:last-child {
  border-right: 2px solid transparent;
}

.solar-matrix tbody tr .solar-row-label {
  border-left-color: transparent;
  border-right-color: transparent;
}

.solar-matrix tbody tr .solar-month-cell:last-child {
  border-right-color: transparent;
}

.solar-matrix tbody tr:nth-child(odd) .solar-row-label {
  border-left-color: color-mix(in srgb, var(--u-accent, #4f46e5) 42%, transparent);
  border-right-color: transparent;
}

.solar-matrix tbody tr:nth-child(odd) .solar-month-cell:last-child {
  border-right: 2px solid color-mix(in srgb, var(--u-accent, #4f46e5) 28%, transparent);
}

.solar-matrix tbody tr:nth-child(even) .solar-row-label {
  border-left-color: transparent;
  border-right-color: transparent;
}

.solar-matrix tbody tr:nth-child(even) .solar-month-cell:last-child {
  border-right-color: transparent;
}

tr.is-muted td {
  color: var(--u-muted);
  background: #f8faf9;
}

.text-cell {
  min-width: 320px;
  max-width: 520px;
  white-space: normal;
  text-align: left;
}

.rule-cell {
  min-width: 150px;
  text-align: left;
}

.rule-cell label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.mini-controls {
  display: grid;
  grid-template-columns: 62px 82px;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.mini-controls select {
  min-width: 0;
  width: 62px;
  height: 32px;
  padding: 5px 6px;
}

.mini-controls input.cell-input.compact {
  width: 82px;
  height: 32px;
  margin-top: 0;
}

.flow-service-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-right: 10px;
}

.flow-service-picker {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: #fbfcfb;
  cursor: pointer;
  text-align: left;
}

.flow-service-picker:hover,
.month-picker-button:hover {
  border-color: #9bb8ad;
  box-shadow: 0 0 0 2px rgba(28, 127, 92, 0.08);
}

.flow-service-chip {
  display: inline-flex;
  align-items: center;
  max-width: 210px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eaf3ef;
  color: #20362c;
  font-size: 12px;
  line-height: 1.25;
}

.flow-service-chip.service-electricity,
.flow-service-option.service-electricity span {
  background: #edf7ef;
  color: #245a3b;
}

.flow-service-chip.service-water,
.flow-service-option.service-water span {
  background: #edf6fa;
  color: #24576a;
}

.flow-service-chip.service-gas,
.flow-service-option.service-gas span {
  background: #f8f3e7;
  color: #6a5326;
}

.flow-service-chip.service-reactive,
.flow-service-option.service-reactive span {
  background: #f2eff8;
  color: #55446e;
}

.flow-service-chip.service-solar_bank,
.flow-service-option.service-solar_bank span {
  background: #fff7df;
  color: #66511c;
}

.flow-service-chip.service-bank_fee,
.flow-service-option.service-bank_fee span {
  background: #f0f2f7;
  color: #3d4a5d;
}

.flow-service-chip.service-compensation,
.flow-service-option.service-compensation span {
  background: #f7eff3;
  color: #684255;
}

.flow-service-empty {
  color: var(--u-muted);
  font-size: 12px;
}

.floating-popover {
  position: fixed;
  z-index: 1000;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(20, 35, 28, 0.18);
}

.flow-services-popover {
  width: min(540px, 78vw);
  padding: 9px;
  text-align: left;
  white-space: normal;
}

.flow-services-popover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 6px 10px;
}

.flow-services-popover label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow-service-option span {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.25;
}

.popover-message {
  min-height: 18px;
  margin-top: 7px;
  color: var(--u-error);
  font-size: 12px;
  white-space: normal;
}

.popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.month-picker-button {
  width: 132px;
  min-width: 132px;
  height: 32px;
  border: 1px solid #ccd8d2;
  border-radius: 6px;
  background: var(--u-surface);
  padding: 5px 8px;
  text-align: left;
  cursor: pointer;
}

.month-picker-popover {
  width: 260px;
  padding: 10px;
}

.month-picker-year-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.month-picker-year-input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: var(--u-surface);
  text-align: center;
  font: inherit;
  font-weight: 700;
}

.month-picker-title {
  margin-bottom: 8px;
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 700;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.month-option {
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: #fbfcfb;
  padding: 6px 5px;
  cursor: pointer;
  font-size: 12px;
}

.month-option:hover,
.month-option.is-active {
  border-color: var(--u-accent);
  background: #eef7f2;
  color: var(--u-accent);
}

.metric-accent {
  background: transparent;
  color: color-mix(in srgb, var(--u-accent, #6366f1) 30%, var(--text-1, #0f172a));
  font-weight: 700;
}

.meter-title {
  display: block;
}

.meter-header {
  min-width: 110px;
  max-width: 138px;
}

.meter-header .meter-name,
.meter-header .meter-number,
.meter-header .meter-title,
.meter-header .column-unit {
  display: block;
  margin: 0;
  line-height: 1.08;
  white-space: nowrap;
}

.meter-header .meter-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2b3832;
  font-size: 13px;
  font-weight: 650;
}

.meter-header .meter-number {
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 550;
}

.meter-header .meter-title {
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 550;
}

.meter-header .column-unit {
  font-size: 11px;
}

.signed-negative {
  color: var(--u-error);
  font-weight: 700;
}

.signed-positive,
.signed-ok {
  color: var(--u-ok);
  font-weight: 700;
}

.signed-info {
  color: var(--u-accent);
  font-weight: 500;
}

.signed-warn {
  color: var(--u-warn);
  font-weight: 500;
}

.meter-mode-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8f1ee;
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.meter-no-start {
  display: inline-block;
  color: var(--u-muted);
  font-size: 12px;
}

/* Phase M.9 v2 → v7 — денежные потоки на Сводный → Обзор.
   v7: single-row layout (dot + label + bar + amount + status в одной
   строке). Padding 14px 16px = совпадает с .panel-head padding,
   чтобы labels выровнялись с заголовком панели. */
.cashflow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px 16px;
}

/* #5 — на Обзоре Аренды cashflow-блоки (Доход по объектам / Расходы по статьям)
   лежат прямо в panel-body без обёртки .cashflow-grid → добавляем те же
   отступы, чтобы строки не прилипали к краям панели. */
.panel-body > .cashflow-section {
  padding: 14px 16px;
}

.cashflow-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cashflow-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* Phase M.9 v9 — section-level settlement hint под «К распределению». */
.cashflow-section-hint {
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 0 2px;
}

/* REBUILD-208 v3 polish: cashflow stripes (Сводный финрезультат).
   Hardcoded text colors (#15803d, #b45309, #64748b, #0f172a) →
   v3 spec tokens. Owner explicit request «привести в общий стиль». */
.cashflow-section-hint[data-tone="ok"] {
  color: var(--u-ok);
}

.cashflow-section-hint[data-tone="warn"] {
  color: var(--u-warn);
}

.cashflow-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--u-muted);
}

.cashflow-section-total {
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--u-ink);
}

.cashflow-section-total[data-tone="warn"] {
  color: var(--u-warn);
}

.cashflow-section-total[data-tone="ok"] {
  color: var(--u-ok);
}

.cashflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Phase M.9 v7 → v8 → v9 — Single-row layout.
   v9: 4 фиксированных колонки — left edge bars одинаковый,
   right edge тоже (amount column fixed 140px).
   Status-chip per-row убран — settlement info через section-hint
   под header «К распределению» + bar tooltip. */
.cashflow-row {
  display: grid;
  grid-template-columns: 10px 180px 1fr 160px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  min-height: 22px;
}

.cashflow-row-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.cashflow-row-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 900px) {
  .cashflow-row {
    grid-template-columns: 10px 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
  }
  .cashflow-row-bar {
    grid-column: 1 / -1;
  }
}

.cashflow-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.cashflow-row-label {
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.cashflow-row-bar {
  display: block;
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--card-muted, #f1f5f9);
  overflow: visible;
}

.cashflow-row-fill {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 0.2s ease-out;
}

/* Phase M.9 v6 — target-marker и зоны excess/gap для receivers.
   Marker — вертикальная пунктирная линия в точке справедливой доли
   (toDistribute / receiversCount). Excess — оранжевый overlay над
   правой частью fill (= то что владелец должен отдать). Gap —
   штриховка между концом bar и marker (= то что владелец должен
   получить). */
.cashflow-bar-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 1.5px dashed rgba(15, 23, 42, 0.45);
  pointer-events: none;
}

.cashflow-bar-excess {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(180, 83, 9, 0.7);
  border-radius: 0 4px 4px 0;
}

.cashflow-bar-gap {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(22, 163, 74, 0.25),
    rgba(22, 163, 74, 0.25) 4px,
    transparent 4px,
    transparent 8px
  );
  border-radius: 0 4px 4px 0;
}

/* Phase M.9 v10 — delta-метка «+N ₴» / «−N ₴» над/под bar,
   привязанная к target-маркеру (начинается / заканчивается на нём).
   Цвет соответствует tone зоны (excess = orange, gap = green). */
.cashflow-bar-delta-top,
.cashflow-bar-delta-bottom {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cashflow-bar-delta-top {
  bottom: calc(100% + 4px);
  padding-left: 3px;
  color: #b45309;
}

.cashflow-bar-delta-bottom {
  top: calc(100% + 4px);
  padding-right: 3px;
  color: #15803d;
}

.cashflow-row.has-delta-top {
  min-height: 32px;
}

.cashflow-row.has-delta-bottom {
  min-height: 32px;
}

.cashflow-row-amount {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}


/* Phase M.8 — Anomaly badge для подозрительных показаний счётчика.
   Жёлтый кружок справа от input. Warn (default) — оранжевый.
   Error (отрицательная дельта) — красный.
   Phase M.8 v6 — wrapper full-width, slot всегда 22px (резерв даже
   когда badge пуст). Так input стабильной ширины во всех строках,
   не «уезжает влево» при появлении значка. */
.meter-cell-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  width: 100%;
}

.meter-cell-wrapper > input,
.meter-cell-wrapper > .tariff-copy-cell {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tariff-copy pill — появляется в пустой ячейке при фокусе. */
.tariff-copy-cell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.tariff-copy-cell > input {
  flex: 1 1 auto;
  min-width: 0;
}

.input-v2-cell .tariff-copy-cell {
  justify-content: center;
}

.input-v2-cell .tariff-copy-cell > input {
  flex: 0 1 80px;
  width: 100%;
  max-width: 80px;
}

.tariff-copy-pill {
  position: absolute;
  /* v2.4 fix: pill под cell (не поверх input) — input остаётся читаемым,
     pill не перекрывает соседние месяцы по горизонтали (overflow vertical).
     При focus on input pill всплывает below; click на pill применяет
     тариф (через global delegate `apply-tariff-from-month`). mousedown
     preventDefault держит focus, чтобы blur не убрал pill раньше click. */
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--u-accent);
  background: var(--u-surface);
  color: var(--u-accent);
  cursor: pointer;
  font-family: inherit;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.tariff-copy-pill:hover,
.tariff-copy-pill:focus-visible {
  background: var(--u-accent);
  color: var(--u-surface);
  outline: none;
}

.tariff-copy-cell.is-focused .tariff-copy-pill {
  display: inline-flex;
}

.meter-anomaly-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
}

/* B.4: anomaly dot — компактный signal-dot 7px с белым outline и
   color-coded border. Сама обёртка (.meter-anomaly-badge) — невидимый
   hit-target для tooltip. Раньше badge был chip 18×18 с border, dot
   внутри не виден — owner просил «увеличить и сделать видимым». */
.meter-anomaly-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  cursor: help;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}

.meter-anomaly-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--u-surface, #fff);
}

.meter-anomaly-badge[data-severity="warn"] .meter-anomaly-dot {
  background: var(--u-warn, #c2701b);
}

.meter-anomaly-badge[data-severity="error"] .meter-anomaly-dot {
  background: var(--u-error, #c2362a);
}

.meter-anomaly-badge:hover .meter-anomaly-dot {
  filter: brightness(0.92);
}

/* ADR-0023 Phase 5: marker «↻ замена». Inline-кружок-чип с глифом
   ↻, использует accent цвет (purple/indigo) чтобы отличать от anomaly
   (warn/error). Дополняется (а не заменяет) anomaly badge в meter-cell-
   wrapper. Tooltip — формула split-расчёта на YYYY-MM. */
.meter-replacement-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: var(--u-accent-soft, #ede9fe);
  color: var(--u-accent, #6366f1);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
  flex-shrink: 0;
  vertical-align: middle;
}

.meter-replacement-badge:hover {
  filter: brightness(0.95);
}

/* UX-аудит 2026-05-24 v3 #1: таблица счётчиков fit в 1728 × MacBook
   viewport (минус sidebar 239 → main 1488 → panel 1430).
   Бюджет колонок 1160px + padding/gaps ≈ 1430. */
table[data-settings-table-collection="meters"] {
  table-layout: fixed;
  width: 100%;
}
table[data-settings-table-collection="meters"] th,
table[data-settings-table-collection="meters"] td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Колонка «Услуга» убрана (2026-06-20): услуга задаётся в модалке «Настройки
   счётчика» и видна по заголовку группы — в строке дублировалась. 10 колонок. */
table[data-settings-table-collection="meters"] th:nth-child(1),
table[data-settings-table-collection="meters"] td:nth-child(1) { width: 180px; }   /* Название */
table[data-settings-table-collection="meters"] th:nth-child(2),
table[data-settings-table-collection="meters"] td:nth-child(2) { width: 80px; }    /* № */
table[data-settings-table-collection="meters"] th:nth-child(3),
table[data-settings-table-collection="meters"] td:nth-child(3) { width: 150px; }   /* Тип */
table[data-settings-table-collection="meters"] th:nth-child(4),
table[data-settings-table-collection="meters"] td:nth-child(4) { width: 160px; }   /* Назначение */
table[data-settings-table-collection="meters"] th:nth-child(5),
table[data-settings-table-collection="meters"] td:nth-child(5) { width: 160px; }   /* Участник */
table[data-settings-table-collection="meters"] th:nth-child(6),
table[data-settings-table-collection="meters"] td:nth-child(6) { width: 150px; }   /* Потребление */
table[data-settings-table-collection="meters"] th:nth-child(7),
table[data-settings-table-collection="meters"] td:nth-child(7) { width: 100px; text-align: center; }   /* Учитывается */
table[data-settings-table-collection="meters"] th:nth-child(8),
table[data-settings-table-collection="meters"] td:nth-child(8) { width: 80px; text-align: center; }    /* Активен */
table[data-settings-table-collection="meters"] th:nth-child(9),
table[data-settings-table-collection="meters"] td:nth-child(9) { width: 60px; text-align: center; }   /* Настройки */
table[data-settings-table-collection="meters"] th:nth-child(10),
table[data-settings-table-collection="meters"] td:nth-child(10) { width: 50px; text-align: center; }   /* Удалить (иконка) */

/* Inputs/selects внутри клеток — принудительно сжимаются под cell.
   .cell-input имеет min-width:160px который перебивает max-width:100% в
   table-layout:fixed контексте. !important нужен здесь чтобы перекрыть.
   Также `.settings-select-with-help` wrapper — он не sized сам, и его
   child select растягивает в виде 160px по дефолту. */
table[data-settings-table-collection="meters"] td .cell-input,
table[data-settings-table-collection="meters"] td input,
table[data-settings-table-collection="meters"] td select,
table[data-settings-table-collection="meters"] td .settings-select-with-help,
table[data-settings-table-collection="meters"] td .settings-select-with-help > select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
table[data-settings-table-collection="meters"] td select {
  text-overflow: ellipsis;
}
/* btn-icon в ячейке Замена/Удалить — заполнить cell, центр. */
/* (2026-06-20) meters-специфичный размер иконки удаления убран — теперь это
   глобальный стандарт `.action-delete` (28×28) для всех таблиц настроек. */

/* UX-аудит 2026-05-24 #1: блок «Счётчики» растёт под количество строк
   без вертикальной прокрутки (override на случай если panel-body имеет
   ограничение). */
.panel-body { overflow: visible; }

/* UX-аудит 2026-05-24 #6: подзаголовок группы услуг в таблице счётчиков. */
tr.meter-group-header td {
  background: var(--u-surface-2, #f1f5f9);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--u-muted, #64748b);
  padding: 8px 12px;
  border-top: 1px solid var(--u-line, #e2e8f0);
}

/* UX-аудит 2026-05-24 #9 + #10: custom tooltip через JS portal в body.
   CSS pseudo-element подход обрезался parent'ами с overflow:auto
   (например input-v2-table-wrap). Portal в body — всегда поверх всего. */
.oblik-tooltip {
  position: fixed;
  background: #1e293b;
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  max-width: 320px;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.oblik-tooltip[data-visible="1"] { opacity: 1; }
.oblik-tooltip[data-wrap] { white-space: normal; width: 280px; }
.oblik-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1e293b;
}
.oblik-tooltip[data-pos="top"]::before {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: #1e293b;
}

/* ADR-0027 (2026-05-25): modal «Настройки счётчика» — компактнее.
   Был 900px (UX-аудит 2026-05-24, под девайс-таблицу). Стал 640px —
   для пустых состояний меньше воздуха, таблица устройств получает
   horizontal scroll через .table-wrap.overflow-x. */
.oblik-modal-card.meter-devices-card {
  max-width: min(620px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  width: min(620px, 95vw);
  /* Компактнее: меньше межблочный gap и padding (owner: «слишком размашисто»). */
  gap: 10px;
  padding: 20px 22px;
}
/* «+ Замена учёта/счётчика» — компактные, не на всю ширину карточки. */
.oblik-modal-card.meter-devices-card > .btn {
  align-self: flex-start;
}
.meter-devices-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.meter-devices-table th {
  text-align: left;
  padding: 6px 8px;
  background: var(--u-surface-2, #f1f5f9);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--u-muted, #64748b);
  border-bottom: 1px solid var(--u-line, #e2e8f0);
}
.meter-devices-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--u-line, #e2e8f0);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meter-devices-table th:nth-child(1),
.meter-devices-table td:nth-child(1) { width: 100px; }   /* Номер */
.meter-devices-table th:nth-child(2),
.meter-devices-table td:nth-child(2) { width: 110px; }   /* Установлен */
.meter-devices-table th:nth-child(3),
.meter-devices-table td:nth-child(3) { width: 110px; }   /* Снят */
.meter-devices-table th:nth-child(4),
.meter-devices-table td:nth-child(4) { width: 90px; text-align: right; }   /* Начальное */
.meter-devices-table th:nth-child(5),
.meter-devices-table td:nth-child(5) { width: 90px; text-align: right; }   /* Конечное */
.meter-devices-table th:nth-child(6),
.meter-devices-table td:nth-child(6) { width: auto; }     /* Заметка — гибкая */
.meter-devices-table th:nth-child(7),
.meter-devices-table td:nth-child(7) { width: 90px; text-align: right; white-space: nowrap; overflow: visible; }   /* Actions */
.meter-devices-table tr.is-editing td {
  background: var(--u-accent-soft, #ede9fe);
}
.meter-devices-row-actions {
  white-space: nowrap;
  text-align: right;
  width: 80px;
}
.meter-devices-row-actions .btn {
  margin-left: 4px;
}
.meter-devices-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 14px;
  background: var(--u-surface-2, #f1f5f9);
  border-radius: 6px;
  margin: 8px 0;
}
.meter-devices-form .oblik-modal-field {
  margin: 0;
}
.meter-devices-form textarea,
.meter-devices-form .full-width:not([type="checkbox"]) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.meter-devices-form .oblik-modal-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .meter-devices-form { grid-template-columns: 1fr; }
}

/* ADR-0026 / ADR-0027: кнопка-иконка ⋯ в колонке «Настройки» (была «Замена»).
   Открывает модал «Настройки счётчика» с секциями «Учёт» и
   «Физические устройства». */
.meter-settings-col {
  text-align: center;
  width: 56px;
}
.meter-settings-btn {
  position: relative;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
}
.meter-settings-history-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--u-accent, #6366f1);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}

/* ADR-0026 / ADR-0027: derived text pill для колонки «Тип» в таблице
   счётчиков. Заменил dropdown — режим теперь меняется через модал. */
/* Ячейка участника: селект + кнопка «Отвязать» в одну строку. */
.meter-participant-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.meter-participant-cell .settings-select-with-help {
  min-width: 0;
  flex: 1 1 auto;
}
.meter-unbind-btn {
  flex: 0 0 auto;
  color: var(--u-muted, #6b7280);
}
.meter-unbind-btn:hover {
  color: var(--u-error, #dc2626);
  border-color: var(--u-error, #dc2626);
}

.meter-type-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--u-surface-2, #f1f5f9);
  color: var(--u-ink, #0f172a);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  max-width: 100%;
}
.meter-type-pill[data-mode="period"] {
  background: #eef2ff;
  color: #4338ca;
}
.meter-type-pill small {
  color: var(--u-muted, #64748b);
  font-weight: 400;
  font-size: 10px;
  display: block;
  margin-top: 1px;
  white-space: nowrap;
}

/* ADR-0027: эффективный режим — крупная плашка в секции «Учёт». */
.meter-mode-effective {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 8px;
  background: var(--u-surface, #fff);
}
.meter-mode-effective-title {
  font-size: 12px;
  color: var(--u-muted, #64748b);
}
.meter-mode-effective-value {
  font-size: 15px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--u-surface-2, #f1f5f9);
}
.meter-mode-effective-value[data-mode="period"] {
  background: #eef2ff;
  color: #4338ca;
}
.meter-mode-effective-source {
  font-size: 11px;
  color: var(--u-muted, #64748b);
  flex-basis: 100%;
}

/* ADR-0027: таблица overrides учёта в модале «Настройки счётчика». */
.meter-mode-overrides-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.meter-mode-overrides-table th,
.meter-mode-overrides-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--u-line, #e2e8f0);
  text-align: left;
}
.meter-mode-overrides-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--u-muted, #64748b);
  background: var(--u-surface-2, #f1f5f9);
}

/* ADR-0027: ряд «Исходный тип:» в Учёт-секции модала. */
.meter-mode-kind-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 8px;
}
.meter-mode-kind-label {
  font-size: 13px;
  color: var(--u-ink, #0f172a);
  font-weight: 600;
}
.meter-mode-kind-row select {
  height: 32px;
  padding: 4px 28px 4px 10px;   /* правый отступ — место под стрелку, текст не упирается в край */
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 6px;
  background: var(--u-surface, #fff);
  font-size: 13px;
}

/* «Услуга» + «Тип учёта» — один ряд, две равные колонки (компактно). */
.meter-mode-basics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 2px 0 4px;
}
.meter-mode-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.meter-mode-field .meter-mode-kind-label {
  font-size: 12px;
  color: var(--u-muted, #64748b);
  font-weight: 600;
}
.meter-mode-field select {
  width: 100%;
  height: 32px;
  padding: 4px 28px 4px 10px;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 6px;
  background: var(--u-surface, #fff);
  font-size: 13px;
}

/* Подсказка про auto-detect когда система переопределила kind. */
.meter-mode-autodetect-hint {
  margin: 6px 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--u-accent, #6366f1);
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1.4;
}

/* ADR-0027: radio group для выбора режима в «+ Замена учёта» форме. */
.meter-mode-override-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meter-mode-override-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 6px;
  background: var(--u-surface, #fff);
  font-size: 13px;
  cursor: pointer;
}
.meter-mode-override-radio:hover {
  border-color: var(--u-accent, #6366f1);
  background: var(--u-surface-2, #f1f5f9);
}
.meter-mode-override-radio input[type="radio"] {
  margin: 0;
}

.settings-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 9px;
  margin: 0 0 8px;
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: #f8fbfa;
  color: var(--u-muted);
  font-size: 12px;
  white-space: normal;
}

.readonly-rent {
  gap: var(--u-space-4);
}

.rent-dashboard {
  margin-bottom: var(--u-space-2);
}

.rent-metric strong {
  font-variant-numeric: tabular-nums;
}

.rent-cam-coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}

.rent-cam-coverage-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: linear-gradient(135deg, #fbfdfc 0%, var(--u-surface) 100%);
  padding: 14px;
  box-shadow: var(--u-shadow-sm);
}

.rent-cam-coverage-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.rent-cam-coverage-head h4 {
  margin: 3px 0;
  font-size: 15px;
}

.rent-cam-coverage-head strong {
  min-width: 62px;
  text-align: right;
  color: var(--u-accent);
  font-size: 24px;
  line-height: 1;
}

.rent-cam-coverage-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.rent-cam-coverage-flow div {
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
  padding: 8px;
}

.rent-cam-coverage-flow span,
.rent-cam-coverage-meta dt {
  display: block;
  color: var(--u-muted);
  font-size: 11px;
}

.rent-cam-coverage-flow strong {
  display: block;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.rent-cam-coverage-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.rent-cam-coverage-meta div,
.rent-cam-coverage-meta dd {
  min-width: 0;
}

.rent-cam-coverage-meta dd {
  margin: 2px 0 0;
  font-size: 12px;
}

.rent-document-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--u-space-2);
}

.rent-document-controls .cell-input {
  min-width: 100px;
}

.readonly-rent .subsection-title {
  margin: var(--u-space-3) 0 var(--u-space-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.editable-rent .table-wrap {
  overflow-x: auto;
}

.editable-rent .cell-input,
.editable-rent select {
  min-width: 112px;
}

.editable-rent .cell-input.text {
  min-width: 148px;
}

.rent-hub {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.rent-hub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rent-hub-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rent-hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rent-hub-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.rent-hub-kpi-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-surface);
  box-shadow: var(--u-shadow-sm);
}

.rent-hub-kpi-label {
  color: var(--u-muted);
  font-size: 12px;
  line-height: 1.1;
}

.rent-hub-kpi-value {
  font-size: 20px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.rent-hub-kpi-ytd {
  color: var(--u-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rent-hub-actions {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-surface);
  box-shadow: var(--u-shadow-sm);
}

.rent-hub-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rent-hub-actions-head h3 {
  margin: 0;
  font-size: 15px;
}

.rent-hub-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.rent-hub-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--u-line);
  border-radius: 10px;
  background: var(--u-surface, #f8fafc);
  min-width: 0; /* #5 — даём детям сжиматься, без wrap (одна строка = ровная высота) */
}

/* #5 — длинный лейбл (напр. «Предупреждения договоров») усекаем многоточием,
   а не переносим значение вниз. Полный текст — в title (см. рендер). */
.rent-hub-action .tag {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rent-hub-action strong {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* #4 — объединённый график «Динамика по месяцам» (серии-галочки + линии). */
.rent-trend-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.rent-trend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: var(--u-surface);
  color: var(--muted, #64748b);
  font-size: 12px;
  cursor: pointer;
}
.rent-trend-toggle .rent-trend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--series-color);
  opacity: 0.3;
}
.rent-trend-toggle.is-on { color: var(--u-ink, #0f172a); border-color: var(--series-color); }
.rent-trend-toggle.is-on .rent-trend-dot { opacity: 1; }
.rent-trend-svg {
  width: 100%;
  height: 230px;
  display: block;
  margin-top: 8px;
}
.rent-trend-zero { stroke: var(--u-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rent-trend-guide { stroke: var(--u-line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

/* #4 — столбики дохода + зоны наведения с цифрами (<title>). */
.rent-trend-bar { fill: var(--chart-info); opacity: 0.72; }
.rent-trend-bar.is-sel { opacity: 1; }
.rent-trend-hover { fill: transparent; cursor: default; }
.rent-trend-hover:hover { fill: var(--u-line); opacity: 0.35; }
.rent-trend-hover.is-sel { fill: var(--u-line); opacity: 0.22; }
.rent-trend-dot.is-bar { border-radius: 2px; }

.rent-trend-xaxis {
  display: flex;
  padding: 4px 12px 0;
  font-size: 11px;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
}
.rent-trend-xaxis span {
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
}
.rent-trend-xaxis span.is-empty { opacity: 0.4; }
.rent-trend-xaxis span.is-sel { color: var(--u-ink); font-weight: 600; }

/* owner 2026-06-29: вкладки-«папки» (стиль monobank). Скос боков «ушками»
   (radial-mask, вогнутая дуга → бока расширяются книзу), чистые скруглённые
   верхние углы (без perspective). Активная БЕЛАЯ вкладка сливается с белым телом
   .page-tab-panel в ОДНУ сплошную фигуру: текст-фон вкладки = фон тела, активная
   поверх тела (z-index), потому линии/тени между ними НЕТ. Тень одна — мягкая у
   тела; под активной её перекрывает белая вкладка. Бар прозрачный (фон страницы),
   первая вкладка — чистый левый угол (без ушка), выровнена с телом. */
.page-tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  overflow: visible;
  padding: 8px 0 0 0;
  background: var(--u-bg, #f6f7f9);
  margin-bottom: 0;
  position: sticky;
  top: 60px;
  /* FOLLOWUP-006: v3 spec --u-z-tabs (60) — semantic match. Fallback 60. */
  z-index: var(--u-z-tabs, 60);
}

.page-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 28px 13px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: var(--u-surface-2, #f1f3f7);
  color: var(--u-muted);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  z-index: 1;
  transition: color var(--u-dur) var(--u-ease), background var(--u-dur) var(--u-ease);
}

/* Скос боков — ПРЯМАЯ диагональ (clip-path-треугольник, НЕ дуга): бок расширяется
   книзу под углом, как в monobank. Цвет = фон вкладки (inherit). top:7px — скос
   начинается ниже скруглённого верхнего угла. */
.page-tab::before,
.page-tab::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 0;
  width: 13px;
  background: inherit;
}
.page-tab::after {
  right: -13px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.page-tab::before {
  left: -13px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
/* Первая вкладка — чистый ровный левый край (без скоса), выровнена с телом. */
.page-tab:first-child::before {
  display: none;
}

.page-tab:hover {
  color: var(--u-ink);
}

.page-tab:focus-visible {
  outline: none;
  color: var(--u-ink);
  box-shadow: var(--u-ring-focus);
}

.page-tab.is-active {
  color: var(--u-ink);
  font-weight: 650;
  background: var(--u-surface, #fff);
  z-index: 3;
}

/* Раунд-2 эпик (owner 2026-06-30) Фаза 1 — распор страницы. .page-section-folder —
   grid-айтем .settings-grid; без min-width:0 он раздувается до min-content широкой
   таблицы Договоров (→ обрезка справа + растянутые пустоты). min-width:0 даёт ему
   сжаться до колонки, и .table-wrap внутри начинает скроллить таблицу. */
.page-section-folder {
  min-width: 0;
}

/* Тело контента — белая «папка»: одна мягкая тень, без рамки. Активная вкладка
   (z-index 3) перекрывает верхний край тела → под язычком нет тени/линии. */
.page-tab-panel {
  min-width: 0;
  position: relative;
  z-index: 2;
  background: var(--u-surface, #fff);
  border: 0;
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  padding: 16px;
  margin-top: -1px;
}

/* Одиночная панель внутри тела «раздевается» (без рамки/фона/паддинга), чтобы не
   было «короба в коробе» — контент идёт единой папкой (Счета, P&L). Много-
   панельные разделы (Настройки) сохраняют карточки внутри тела. */
.page-tab-panel > .panel:only-child {
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.rent-row-index {
  width: 1%;
  white-space: nowrap;
  color: var(--u-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  cursor: help;
}

.combined-breakdown-total td {
  background: var(--u-surface, #f8fafc);
  border-top: 2px solid var(--u-line);
}

.combined-row-settled td {
  background: rgba(16, 185, 129, 0.08);
  color: var(--text-2, #475569);
}

.combined-row-settled td:first-child {
  border-left: 3px solid rgba(16, 185, 129, 0.55);
}

.settlement-hero {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--u-line, #e2e8f0);
  background: var(--u-surface-2, #ffffff);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.settlement-hero-open {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));
  border-color: rgba(99, 102, 241, 0.35);
}

.settlement-hero-closed {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.02));
  border-color: rgba(16, 185, 129, 0.35);
}

.settlement-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2, #64748b);
  padding: 2px 8px;
  background: rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  white-space: nowrap;
}

.settlement-hero-direction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-1, #0f172a);
}

.settlement-hero-arrow {
  color: var(--text-2, #64748b);
  font-weight: 400;
}

/* Phase D.7 — aggregate widget for open settlements across multiple
   counterparties. Sits above the per-counterparty selector when ≥2
   counterparties have a non-zero open balance. */
/* Phase G.2 — виджет «Открытые взаиморасчёты» одной строкой. Каждый
   открытый долг — clickable chip, между ними расстояние из flex-gap.
   Только counterparty с balance ≠ 0 попадают, без «нет долга»-плашек. */
/* #7 (owner 2026-06-28) — шапка-бар Взаиморасчётов: контрагент + долг слева,
   «＋ Контрагент» + Печать/PDF/Excel справа (вместо болтающихся блоков). */
.rent-shared-headerbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-surface);
}
/* Таблица исключений в карточке-правиле — компактная, по содержимому (не на всю
   ширину: в ней нет текстовой колонки, которой нужен flex). Колонки выровнены. */
.rent-shared-rule-table { width: auto; max-width: 100%; }
.rent-shared-rule-table td.num .cell-input { min-width: 54px; }
.rent-shared-headerbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rent-shared-headerbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rent-shared-headerbar-eyebrow { font-size: 12px; color: var(--u-muted); }
.rent-shared-headerbar-cp { font-weight: 600; }
.rent-shared-headerbar .settings-row { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.rent-shared-headerbar .oblik-print-actions { display: inline-flex; gap: 6px; margin: 0; }

.rent-shared-open-balances {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.rent-shared-open-balances-empty {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.18);
}

.rent-shared-open-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2, #475569);
  white-space: nowrap;
}

.rent-shared-open-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rent-shared-open-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-1, #cbd5e1);
  border-radius: 999px;
  background: var(--surface-1, #fff);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1, #0f172a);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.rent-shared-open-chip:hover {
  border-color: var(--accent-1, #6366f1);
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.18);
}

.rent-shared-open-chip-active {
  border-color: var(--accent-1, #6366f1);
  background: rgba(99, 102, 241, 0.1);
}

.rent-shared-open-sep {
  color: var(--text-2, #94a3b8);
}

.rent-shared-open-cp {
  font-weight: 600;
}

.rent-shared-open-prose {
  font-variant-numeric: tabular-nums;
  color: var(--text-2, #475569);
}

/* Phase E.3 — компактная карточка контрагента + список article-правил.
   Owner: «у тебя сейчас здесь очень-очень-очень это всё размазано, не
   помещается в экран». Целимся в одну строку на header, одну на базовое
   правило, и однострочные article rules без табличной сетки. */
.rent-shared-cp-block {
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  background: var(--surface-1, #fff);
}

.rent-shared-cp-block.rent-asset-inactive {
  opacity: 0.55;
}

.rent-shared-cp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rent-shared-cp-row .cell-input {
  min-width: 0;
}

.rent-shared-cp-row > input[type="text"]:nth-of-type(1) {
  flex: 1 1 200px;
  min-width: 160px;
  font-weight: 600;
}

.rent-shared-cp-row > input[type="text"]:nth-of-type(2) {
  flex: 2 1 240px;
  min-width: 200px;
}

.rent-shared-cp-base-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 6px 0;
  padding: 8px 10px;
  background: rgba(241, 245, 249, 0.55);
  border-radius: 6px;
  font-size: 13px;
}

.rent-shared-cp-base-rule input[type="number"] {
  width: 70px;
  text-align: right;
}

.rent-shared-cp-base-rule select {
  min-width: 160px;
}

.rent-shared-cp-base-label {
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.rent-shared-cp-base-suffix {
  color: var(--text-2, #475569);
}

.rent-shared-cp-base-hint {
  font-size: 11px;
}

.rent-shared-cp-rules {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

/* owner 2026-06-28: «Создать правило» — обычная DS-кнопка, а не растянутая на
   всю ширину flex-колонки (иначе похоже на drop-zone, не на кнопку). */
.rent-shared-cp-rules > .btn {
  align-self: flex-start;
}

.rent-shared-cp-rules-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
}

.rent-shared-cp-rules-empty {
  margin: 4px 0;
  font-size: 12px;
}

.rent-shared-article-rule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 6px;
  border: 1px dashed var(--border-1, #e2e8f0);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.6);
  font-size: 13px;
}

.rent-shared-article-rule-row select {
  flex: 1 1 160px;
  min-width: 140px;
}

.rent-shared-article-rule-row input[type="number"] {
  width: 64px;
  text-align: right;
}

.rent-shared-article-rule-percent {
  color: var(--text-2, #475569);
}

/* Phase E.5 — monthly drill-down without per-month subtotal rows.
   First charge of each month gets a stronger top border so months
   stay visually separated. Settlement dividers (rendered between
   periods) use the same accent on top. */
.rent-shared-month-boundary > td {
  border-top: 2px solid var(--border-1, #cbd5e1);
}

.rent-shared-settlement-divider > td {
  background: rgba(16, 185, 129, 0.08);
  border-top: 2px solid rgba(16, 185, 129, 0.4);
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
  font-style: italic;
}

.system-mode-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.system-help {
  display: grid;
  gap: 14px;
  max-width: 1120px;
  width: 100%;
}

.system-mode-section > .page-tabs,
.system-mode-section > .page-tab-panel {
  max-width: 1120px;
  width: 100%;
}

.system-help-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.system-help-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
}

.system-help-card h4 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.25;
}

.system-help-card p {
  margin: 0;
  color: var(--u-muted);
  line-height: 1.45;
}

.system-help-flow {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-help-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.system-help-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--u-accent-soft, rgba(99, 102, 241, 0.12));
  color: var(--u-accent, #6366f1);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.system-help-step strong {
  display: block;
  margin-bottom: 2px;
}

.system-help-step span span {
  color: var(--u-muted);
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .system-help-card-grid {
    grid-template-columns: 1fr;
  }
}

.ui-prefs-inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

/* Phase F.8 — бегущая строка для длинных «Примечание» / «Заметка».
   Применяется ко всем read-only ячейкам note через `marqueeText(text)`
   helper. По умолчанию текст обрезан ellipsis-ом; на hover (если
   реально overflow) внутренний span медленно прокручивается, owner
   видит весь текст без скачка к новой странице. Title-tooltip
   дублирует full text как мгновенный fallback. */
.oblik-marquee {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
  position: relative;
}

.oblik-marquee .oblik-marquee-inner {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
}

.oblik-marquee:hover .oblik-marquee-inner {
  max-width: none;
  animation: oblik-marquee-scroll 10s linear infinite;
  text-overflow: clip;
}

@keyframes oblik-marquee-scroll {
  0%, 10% { transform: translateX(0); }
  90%, 100% { transform: translateX(calc(-100% + 240px)); }
}

/* Phase F.5 — приглушённая «Зафиксировать» на ранее незакрытых
   месяцах (backdate). На latest unsettled месяце остаётся primary. */
.btn.rent-shared-settle-secondary {
  background: transparent;
  color: var(--accent-1, #6366f1);
  border: 1px dashed var(--accent-1, #6366f1);
  opacity: 0.75;
}

.btn.rent-shared-settle-secondary:hover {
  opacity: 1;
  background: rgba(99, 102, 241, 0.05);
}

/* Phase G.3 — owner: «Не делить этот раз нужно в таком же стиле, как
   Иван Стефанов по правилу. Такой же размер кнопки, такой же размер
   шрифта. Может отличаться по цвету». Кнопка теперь pill-badge той
   же высоты что .tag — visually две одинаковые pill-таблетки одна
   под другой, отличаются только цветом. */
.rent-shared-flag-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 220px;
}

/* ADR-0071: расход из счёта общих зон — бейдж + плашка «счёт изменился». */
.rent-linked-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.rent-linked-update {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--u-warn-soft);
  color: var(--u-warn);
  font-size: 12px;
}

.rent-shared-flag-cell .tag,
.rent-shared-flag-btn.btn,
.rent-shared-flag-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--surface-1, #fff);
}

.rent-shared-flag-auto .tag {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.35);
  color: rgb(67, 56, 202);
}

.rent-shared-flag-excluded .tag {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(100, 116, 139, 0.35);
  color: var(--text-2, #475569);
}

.rent-shared-flag-auto .rent-shared-flag-btn {
  background: var(--surface-1, #fff);
  border-color: rgba(100, 116, 139, 0.35);
  color: var(--text-2, #475569);
}

.rent-shared-flag-auto .rent-shared-flag-btn:hover {
  background: rgba(148, 163, 184, 0.12);
}

.rent-shared-flag-excluded .rent-shared-flag-btn {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.35);
  color: rgb(67, 56, 202);
}

.rent-shared-flag-excluded .rent-shared-flag-btn:hover {
  background: rgba(99, 102, 241, 0.14);
}

.oblik-print-actions {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.oblik-print-actions .btn {
  text-decoration: none;
}

/* owner 2026-06-28: в шапке панели (panel-actions) Печать/PDF/Excel стоят
   вровень со «Свернуть» — убираем body-margin (12px), который опускал ряд ниже. */
.panel-actions .oblik-print-actions {
  margin: 0;
}

.settlement-hero-prose {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-1, #0f172a);
  margin-bottom: 4px;
}

.settlement-hero-amount {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-1, #0f172a);
  line-height: 1.1;
  white-space: nowrap;
}

.settlement-hero-currency {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2, #64748b);
}

.combined-amount-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
}

.combined-amount-main {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-1, #0f172a);
}

.combined-amount-delta {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  opacity: 0.85;
}

.combined-delta-up {
  color: rgb(180, 83, 9);
}

.combined-delta-down {
  color: rgb(15, 118, 110);
}

.combined-delta-muted {
  color: var(--text-3, #94a3b8);
  font-size: 12px;
}

.combined-direction-arrow {
  font-weight: 500;
  white-space: nowrap;
}

.combined-direction-paritet {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-2, #64748b);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.combined-settle-btn {
  white-space: nowrap;
}

.combined-settled-badge {
  white-space: nowrap;
}

/* Pyramid layout: total centered on top, rent left and solar right below.
   Uses inline-flex so the cell shrinks to content width — the breakdown row
   defines width (rent + small gap + solar) and total naturally centers above
   it. No `space-between` edges, no min-width forcing the column wider. */
.combined-party-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.combined-party-header-name {
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.combined-party-header-hint {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  opacity: 0.85;
  color: var(--text-2, #64748b);
}

.combined-party-header-plus {
  color: var(--text-3, #94a3b8);
  margin: 0 1px;
  font-weight: 600;
}

.combined-party-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
}

.combined-party-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-1, #0f172a);
}

/* Phase G.1 — breakdown в одну строку «Аренда + Взаиморасчёт + Солнце».
   Все компоненты inline-flex с разделителем-span « + », без переноса. */
.combined-party-breakdown {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  opacity: 0.95;
  line-height: 1.3;
}

.combined-party-breakdown-rent {
  color: rgb(79, 70, 229);
  white-space: nowrap;
}

.combined-party-breakdown-settlement {
  color: rgb(16, 185, 129);
  white-space: nowrap;
}

.combined-party-breakdown-solar {
  color: rgb(217, 119, 6);
  white-space: nowrap;
}

.combined-party-breakdown-plus {
  color: var(--text-2, #64748b);
  padding: 0 2px;
  font-weight: 500;
}

.combined-party-breakdown-empty {
  color: var(--text-3, #cbd5e1);
}


.page-tab-panel.is-all {
  display: grid;
  gap: 14px;
}

.page-tab-panel.is-all > .page-tab-panel-section + .page-tab-panel-section {
  border-top: 1px dashed var(--u-line);
  padding-top: 14px;
}

.rent-asset-inactive td {
  opacity: 0.55;
  background: rgba(148, 163, 184, 0.06);
}

.rent-review-scope-hint {
  margin: 0 0 10px;
  padding: 6px 12px;
  border-left: 3px solid var(--u-line);
  background: rgba(148, 163, 184, 0.08);
  border-radius: 4px;
  font-size: 12px;
}

/* 2026-06-20 (#2) — единая шапка аренды: объекты слева, статус месяца справа,
   в одну строку. Статус больше не full-width плашка, а компактный блок. */
.rent-month-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rent-month-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.rent-month-header-left:empty {
  display: none;
}

.rent-month-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
}

.rent-month-header .rent-month-header-left .overview-chart-toggles {
  margin: 0;
}

.rent-month-status {
  display: flex;
  justify-content: flex-end;
}

.rent-month-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* 2026-06-20 — чип-светофор готовности (объединяет «Готовность» + «N пунктов»). */
.rent-readiness-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--u-ink);
  white-space: nowrap;
}
.rent-readiness-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--u-muted);
  flex-shrink: 0;
}
.rent-readiness-chip[data-tone="ok"] .rent-readiness-dot { background: var(--u-ok); }
.rent-readiness-chip[data-tone="warn"] .rent-readiness-dot { background: var(--u-warn); }
.rent-readiness-chip[data-tone="err"] .rent-readiness-dot { background: var(--u-err); }
.rent-readiness-chip[data-tone="closed"] .rent-readiness-dot { background: var(--u-muted); }

/* 2026-06-28 — чип-светофор как кнопка: ведёт к единому блоку «Проверки месяца». */
button.rent-readiness-chip { font-family: inherit; cursor: pointer; }
.rent-readiness-chip-click:hover { border-color: var(--u-line-strong); background: var(--u-surface-2); }
.rent-readiness-chip-click:focus-visible { outline: none; box-shadow: var(--u-ring-focus); }

/* 2026-06-28 — единый блок «Проверки месяца» (заменяет поповер «Подробнее» в
   шапке + старую диагностику <details>). Готовность к закрытию + начисления по
   договорам + валютные разницы в одном месте, сортировка по важности. */
.rent-month-checks-panel {
  margin-top: 14px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-surface);
  box-shadow: var(--u-shadow-sm);
  overflow: hidden;
}
.rent-month-checks-panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
}
.rent-month-checks-panel > summary::-webkit-details-marker { display: none; }
.rent-month-checks-panel > summary::before {
  content: "▸";
  color: var(--u-muted);
  font-size: 11px;
  flex: none;
  margin-right: 2px;
}
.rent-month-checks-panel[open] > summary::before { content: "▾"; }
.rent-checks-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.rent-checks-title { font-size: 14px; font-weight: 650; color: var(--u-ink); }
.rent-checks-sub { font-size: 12px; color: var(--u-muted); }
.rent-checks-counts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; margin-left: auto; }
.rent-checks-body { padding: 0 16px 14px; }
/* #2 (owner 2026-06-28) — блокеры/предупреждения в две колонки (компактнее).
   «В порядке» (ok-line) — во всю ширину снизу. На узком экране складывается. */
.rent-checks-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.rent-checks-cols > .rent-checks-col { min-width: 0; }
.rent-checks-cols > .rent-checks-ok-line { grid-column: 1 / -1; }
@media (max-width: 900px) { .rent-checks-cols { grid-template-columns: 1fr; } }
.rent-checks-group-head {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 14px 0 4px;
}
.rent-checks-group-head.err { color: var(--u-error); }
.rent-checks-group-head.warn { color: var(--u-warn); }
.rent-checks-item {
  margin-top: 6px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
}
.rent-checks-item.tone-err { border-left: 3px solid var(--u-error); }
.rent-checks-item.tone-warn { border-left: 3px solid var(--u-warn); }
.rent-checks-item-main { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
.rent-checks-item-lead { flex: 1; min-width: 0; }
.rent-checks-item-name { font-size: 13px; font-weight: 600; color: var(--u-ink); }
.rent-checks-item-desc { font-size: 12px; color: var(--u-muted); margin-top: 1px; }
.rent-checks-item-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--u-ink); white-space: nowrap; }
.rent-checks-subrows { border-top: 1px solid var(--u-line); padding: 6px 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.rent-checks-subrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--u-surface-2); border: 1px solid var(--u-line); border-radius: 6px; padding: 5px 9px; font-size: 12px; }
.rent-checks-subrow .num { font-variant-numeric: tabular-nums; }
.rent-checks-ok-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 11px; border-radius: 8px; background: var(--u-ok-soft); color: #15803d; font-size: 12.5px; }
.rent-checks-ok-line svg { flex: none; color: var(--u-ok); }

/* Фаза 0 мультивалюты — форма загрузки курса из НБУ/Приватбанка. */
.exchange-fetch-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 10px;
  font-size: 13px;
}
.exchange-fetch-label { font-weight: 500; }
.exchange-fetch-form input[type="date"],
.exchange-fetch-form select {
  padding: 4px 8px;
  border: 1px solid var(--u-line);
  border-radius: 6px;
  font-size: 13px;
  background: var(--u-surface);
}

/* Фаза 0 — календарь курсов (год/месяц/валюта + дни). */
.rates-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rates-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rates-switch-label {
  min-width: 90px;
  text-align: center;
  font-weight: 600;
  font-size: 13.5px;
}
.rates-cur-toggle {
  display: inline-flex;
  gap: 4px;
}
.rates-cur-btn {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  color: var(--u-muted);
  cursor: pointer;
}
.rates-cur-btn.is-on {
  background: var(--accent, #6366f1);
  color: #fff;
  border-color: var(--accent, #6366f1);
}
.rates-calendar-card {
  border: 1px solid var(--u-line);
  border-radius: 12px;
  overflow-x: auto;
  max-width: 760px;
}
.rates-calendar {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rates-calendar th {
  text-align: right;
  padding: 8px 12px;
  background: var(--u-surface, #f8fafc);
  color: var(--u-muted);
  font-weight: 500;
  font-size: 12px;
}
.rates-calendar th:first-child,
.rates-calendar td:first-child {
  text-align: left;
}
.rates-calendar td {
  padding: 6px 12px;
  border-top: 1px solid var(--u-line);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rates-calendar tr.rates-weekend td {
  background: #fafbfc;
  color: var(--u-muted);
}
.rates-calendar .rates-base {
  color: var(--u-info, #0e7490);
  font-weight: 600;
}
.rates-manual {
  margin-top: 14px;
}
.rates-manual > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--u-muted);
  padding: 6px 0;
}

/* Курсы: управление (год+месяц+валюта+Обновить) в общей топбар-шапке. */
.rates-topbar-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rates-topbar-month {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rates-topbar-month-label {
  min-width: 64px;
  text-align: center;
  font-weight: 600;
  font-size: 13.5px;
}
.rates-statenote {
  margin-bottom: 8px;
}

/* Статус месяца, встроенный в ряд табов (Финансы/Контроль): табы слева,
   статус прижат вправо, всё в одну строку. owner 2026-06-29: без базовой линии —
   край папки задаёт тень; без зазора до панели (одна фигура). */
.page-tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: nowrap;
  margin-bottom: 0;
}

.page-tabs-row > .page-tabs {
  margin-bottom: 0;
  border-bottom: none;
  flex: 1 1 auto;
}

.page-tabs-row-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-bottom: 8px;
}

/* «Подробнее» — инлайн в строке статуса; раскрытый список = поповер
   (absolute), чтобы не занимать вторую строку. */
.rent-month-status-details {
  position: relative;
  display: inline-block;
}

.rent-month-status-details > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--u-muted);
  padding: 4px 0;
  list-style: none;
  user-select: none;
}

.rent-month-status-details > summary::-webkit-details-marker {
  display: none;
}

.rent-month-status-details > summary::after {
  content: " ▾";
  font-size: 10px;
  color: var(--u-muted);
}

.rent-month-status-details[open] > summary::after {
  content: " ▴";
}

.rent-close-checklist-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

/* Раскрытый «Подробнее» — поповер над контентом, не двигает высоту строки. */
.rent-month-status-details[open] > .rent-close-checklist-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 360px;
  max-width: 80vw;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--u-line);
  border-radius: 10px;
  background: var(--u-surface);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
}

.rent-close-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--u-surface, #f8fafc);
  flex-wrap: wrap;
}

.rent-close-checklist-item strong {
  font-variant-numeric: tabular-nums;
}

.rent-close-checklist-item .btn {
  margin-left: auto;
}

/* 2026-06-20 (#5) — «Контроль аренды»: список-баннеров с цветным левым
   бордером по уровню вместо сырой таблицы Уровень/Сообщение. */
.rent-control-banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.rent-control-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--u-line);
  border-left: 3px solid var(--u-muted);
  border-radius: 0 8px 8px 0;
  background: var(--u-surface);
}

.rent-control-banner[data-tone="err"] {
  border-left-color: var(--u-err);
}

.rent-control-banner[data-tone="warn"] {
  border-left-color: var(--u-warn);
}

.rent-control-banner[data-tone="info"] {
  border-left-color: var(--u-info);
}

.rent-control-banner .tag {
  flex-shrink: 0;
}

.rent-control-banner-msg {
  font-size: 13px;
  color: var(--u-ink);
}

/* 2026-06-20 (#3) — сводка удаляемой строки в модалке подтверждения. */
.rent-delete-summary {
  display: grid;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
}

.rent-delete-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.rent-delete-summary-row span {
  color: var(--u-muted);
}

.rent-delete-summary-row strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* #4 ADR-0058 — редактируемый % дележа на конкретном расходе во Взаиморасчётах. */
.rent-shared-cp-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.rent-shared-pct-edit {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  color: var(--u-muted);
}
/* owner 2026-06-28 (#1): поле ввода % — в стиле остальных табличных инпутов
   (cell-input: рамка, паддинг, высота, центр), а не мелкий «голый» бокс. */
.rent-shared-pct-input {
  width: 44px;
  flex-shrink: 0;
  text-align: center;
  padding: 5px 6px;
  min-height: 30px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #ccd8d2;
  border-radius: 6px;
  background: var(--u-surface);
}
.rent-shared-pct-edit.is-override .rent-shared-pct-input {
  border-color: var(--u-warn);
  color: var(--u-warn);
  font-weight: 600;
}

.rent-ledger-sticky-summary {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  padding: 10px 0;
  margin-bottom: 8px;
  background: linear-gradient(180deg, var(--u-surface) 0%, rgba(255, 255, 255, .94) 100%);
  border-bottom: 1px solid var(--u-line);
}

.rent-ledger-sticky-summary .metric-card {
  min-width: 0;
  border: 1px solid var(--u-line);
  border-radius: 10px;
  background: var(--u-surface);
  padding: 10px 12px;
  box-shadow: var(--u-shadow-sm);
}

.rent-ledger-sticky-summary .metric-card span,
.rent-ledger-sticky-summary .metric-card small {
  color: var(--u-muted);
}

.rent-ledger-sticky-summary .metric-card strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 18px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.rent-ledger-dual-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.rent-ledger-pane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-surface);
}

.rent-ledger-pane .subsection-title {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-surface);
}

.rent-ledger-pane .table-wrap {
  border: 0;
  border-radius: 0;
}

/* Журнал-редизайн (2026-06-25): секции во всю ширину, валюта в одну строку */
.rent-ledger-section {
  margin: 0 0 16px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-surface);
  overflow: hidden;
}
.rent-ledger-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-surface);
}
.rent-ledger-section .subsection-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
/* «Колонки» — кнопка в правом углу шапки в стиле btn (как «Закрыть месяц»),
   со стрелкой ▾; меню раскрывается плавающим дропдауном-оверлеем и НЕ двигает
   вёрстку (owner 2026-06-27) */
.rent-ledger-section-head .column-controls {
  position: relative;
  flex: none;
  border: 0;
  padding: 0;
  background: transparent;
}
.rent-ledger-section-head .column-controls summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
  color: var(--u-text-2, #475569);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.rent-ledger-section-head .column-controls summary:hover {
  background: var(--u-surface-2);
  border-color: var(--u-border-strong, #cbd5e1);
  color: var(--u-ink);
}
.rent-ledger-section-head .column-controls summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}
.rent-ledger-section-head .column-controls[open] summary::after { transform: rotate(180deg); }
.rent-ledger-section-head .column-controls-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  width: max-content;
  max-width: 420px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  z-index: 40;
}
.rent-ledger-section .table-wrap { border: 0; border-radius: 0; }
.rent-ledger-section .rent-table-add {
  padding: 10px 14px;
  margin: 0;
  border-top: 1px solid var(--u-line);
}
.ledger-cur-cell select { min-width: 54px; }
.ledger-uah-col { color: var(--u-text-2, #475569); background: color-mix(in srgb, var(--u-accent, #6366f1) 4%, transparent); }
.ledger-uah-derived { font-variant-numeric: tabular-nums; font-weight: 600; }
.rent-ledger-diagnostics {
  margin-top: 2px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-surface);
}
.rent-ledger-diagnostics > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  list-style: none;
}
.rent-ledger-diagnostics > summary::-webkit-details-marker { display: none; }
.rent-ledger-diagnostics > summary::before { content: "▸ "; color: var(--u-muted, #94a3b8); }
.rent-ledger-diagnostics[open] > summary::before { content: "▾ "; }
.rent-ledger-diagnostics-body { padding: 4px 14px 12px; }

/* «Проверки месяца» — спокойный чек-лист (ADR-0066 / owner 2026-06-26) */
.rent-ledger-diagnostics-body.rent-checks { padding: 0; }
.rent-check { display: flex; gap: 10px; padding: 11px 14px; align-items: flex-start; }
.rent-check + .rent-check { border-top: 1px solid var(--u-line); }
.rent-check-icon { flex: none; display: inline-flex; margin-top: 1px; }
.rent-check-ok .rent-check-icon { color: var(--u-ok, #16a34a); }
.rent-check-warn .rent-check-icon { color: var(--u-warn, #c2701b); }
.rent-check-title { font-size: 13px; font-weight: 600; }
.rent-check-warn .rent-check-title { color: var(--u-warn, #c2701b); }
.rent-check-sub { font-size: 12px; color: var(--u-muted); margin-top: 1px; }
.rent-check-items { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.rent-check-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--u-surface-2); border: 1px solid var(--u-line); border-radius: 6px; padding: 5px 9px; font-size: 12px; }
.rent-check-item .num { font-variant-numeric: tabular-nums; }
.rent-check-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--u-warn, #c2701b); color: #fff; font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: middle; }

/* Оплата начисления в строке (ADR-0066) */
.ledger-pay-col { min-width: 210px; }
.ledger-pay { display: flex; align-items: center; gap: 6px; }
.ledger-pay-mark {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--u-line); border-radius: 6px;
  background: var(--u-surface); color: #94a3b8; cursor: pointer; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ledger-pay-mark.is-on { background: var(--u-ok, #16a34a); color: #fff; border-color: var(--u-ok, #16a34a); }
/* owner 2026-06-28: галочка-тумблер «Б/Н» (безнал) рядом с «оплачено» — взамен
   выпадашки «Канал». Отмечена (синяя) = безнал; снята = наличные. */
.ledger-pay-channel {
  flex: none; height: 22px; min-width: 30px; padding: 0 6px; border: 1px solid var(--u-line); border-radius: 6px;
  background: var(--u-surface); color: #94a3b8; cursor: pointer; font-size: 10px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.ledger-pay-channel.is-on { background: #2563eb; color: #fff; border-color: #2563eb; }
.ledger-pay-input { width: 88px; }
/* owner 2026-06-28: фикс min-width стабилизирует ширину — «Оплачено» и «Долг N»
   занимают одинаково (строка не «прыгает»); сумма долга видна в ярлыке. */
.ledger-pay-badge { flex: none; min-width: 92px; text-align: center; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; white-space: nowrap; }
.ledger-pay-badge.pay-paid { background: #dcfce7; color: #166534; }
.ledger-pay-badge.pay-partial { background: #fef9c3; color: #854d0e; }
.ledger-pay-badge.pay-unpaid { background: #fee2e2; color: #991b1b; }

/* Журнал · Вариант A — валюта рядом с суммой */
.ledger-amount-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.ledger-amount-cell input {
  width: auto;
  max-width: 96px;
  min-width: 0;
}

.ledger-amount-cell select {
  width: auto;
  min-width: 44px;
  padding-right: 6px;
  flex: 0 0 auto;
}

.ledger-derived-sub {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--u-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.ledger-rate-cell input {
  width: auto;
  max-width: 78px;
}

.ledger-currency-default {
  color: var(--u-muted);
  font-variant-numeric: tabular-nums;
}

/* Документы аренды · образец «Коммунальные Счета» */
.rent-doc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.rent-doc-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Фаза 4 B1 — KPI-чипы + фильтры списка счетов (reuse .invoice-kpi-chip / .filter-inline). */
.rent-doc-kpis {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}


/* Фаза 4 B3 — живой превью печатного счёта в редакторе шаблона. */
.rent-template-preview-wrap {
  margin: 14px 0 4px;
}

.rent-template-preview-head {
  font-size: 13px;
  color: var(--u-muted, #64748b);
  margin-bottom: 6px;
}

.rent-template-preview {
  width: 100%;
  height: 560px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
}

.rent-doc-row {
  cursor: pointer;
}

.rent-doc-row:hover > td {
  background: var(--u-surface-2, #f1f5f9);
}

.rent-doc-row.is-active-preview:hover > td {
  background: #f0fdf4;
}

.rent-doc-open {
  width: 1%;
  text-align: right;
  color: var(--u-muted, #64748b);
}

.rent-doc-open svg {
  vertical-align: middle;
  opacity: 0.55;
}

/* Фаза 1 — rent-слайдер компактнее Счетов и стартует под топбаром периода,
   чтобы шапка панели и сам топбар не перекрывались. */
.invoice-slide-out.rent-document-slide-out {
  top: var(--topbar-height, 61px);
  /* owner 2026-06-28 (#5): превью счёта в ширину A4 (контент ≈794px @96dpi +
     паддинги), чтобы видеть документ так, как он реально печатается. */
  width: min(840px, 96vw);
}

/* Тело слайдера = печатный счёт в iframe (как в Коммунальных). */
.rent-document-slide-out .invoice-slide-out-preview {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 0 14px 14px;
}

.rent-doc-slideout-preview {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  background: #fff;
}

/* Фаза 4 — редактор шаблона аренды: «Изменить» разворачивает карточку в
   редактор (слева) + живой превью (справа), как в Коммунальных. */
.rent-template-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.supplier-grid.rent-template-grid-focus {
  grid-template-columns: 1fr;
}

.rent-template-card.is-open {
  grid-column: 1 / -1;
}

.rent-template-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.rent-template-card-header strong {
  font-size: 15px;
}

.rent-template-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: start;
}

.rent-template-editor-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.rent-template-editor-preview .rent-doc-slideout-preview {
  min-height: 580px;
  height: 580px;
}

@media (max-width: 980px) {
  .rent-template-editor-grid {
    grid-template-columns: 1fr;
  }
}

.invoice-slide-out-backdrop.rent-document-backdrop {
  top: var(--topbar-height, 61px);
}

/* Блок «Отозванные счета» (ADR-0062) — свёрнутая история под списком. */
.rent-doc-withdrawn {
  margin-top: 16px;
}

.rent-doc-withdrawn > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--u-muted, #64748b);
  padding: 6px 0;
}

/* Фаза 3 — форма реквизитов арендодателя (Настройки → Реквизиты). */
.rent-req-grid,
.rent-req-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 6px 0 16px;
}

.rent-req-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rent-req-label {
  font-size: 12px;
  color: var(--u-muted, #64748b);
}

.rent-req-hint {
  font-size: 11px;
  color: var(--u-muted, #94a3b8);
}

.rent-req-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 9px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 9px;
  background: #fff;
}

/* В узком rent-слайдере таблицы строк/расшифровки должны вписываться в ширину
   панели (без горизонтального обреза колонки «Сумма»). */
.rent-document-slide-out .invoice-slide-out-body table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.rent-document-slide-out .invoice-slide-out-body td,
.rent-document-slide-out .invoice-slide-out-body th {
  white-space: normal;
  overflow-wrap: anywhere;
}

.rent-doc-group th {
  background: var(--u-surface-2, #f1f5f9);
  text-align: left;
  padding: 8px 10px;
}

.rent-doc-group-title {
  font-weight: 600;
}

tr.is-active-preview > td {
  background: #f0fdf4;
}

.rent-doc-preview {
  margin-top: 14px;
}

/* Счёт · расшифровка по валюте (Фаза 3) */
.rent-doc-breakdown {
  margin: 12px 0 4px;
  border: 1px solid var(--u-line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--u-surface-2, #f8fafc);
}

.rent-doc-breakdown-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
}

.rent-doc-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rdb-cell {
  background: var(--u-surface, #fff);
  border: 1px solid var(--u-line);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}

.rdb-cell span {
  display: block;
  font-size: 12px;
  color: var(--u-muted);
}

.rdb-cell strong {
  display: block;
  font-size: 15px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.rdb-cell small {
  display: block;
  font-size: 11px;
  color: var(--u-muted);
  margin-top: 1px;
}

@media (max-width: 767px) {
  .rent-doc-breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ledger-row-hint {
  display: grid;
  gap: 4px;
  margin-top: 5px;
}

.ledger-row-hint small {
  color: var(--u-muted);
}

.ledger-compact-field {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ledger-compact-field span {
  color: var(--u-muted);
  font-size: 11px;
  line-height: 1.1;
}

.tag {
  display: inline-block;
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #bad5e8;
  background: #f0f7fc;
  color: var(--u-accent);
  font-size: 11px;
  line-height: 1.2;
}

.tag.warn {
  border-color: #e6cc9f;
  background: #fff7e8;
  color: var(--u-warn);
}

.tag.danger {
  border-color: #f3b6b6;
  background: #fff1f1;
  color: var(--u-error);
}

.tag.ok {
  border-color: #b7dfca;
  background: var(--u-ok-soft);
  color: var(--u-ok);
}

.tag.info {
  border-color: #bad5e8;
  background: var(--u-accent-soft);
  color: var(--u-accent);
}

.tag.muted {
  border-color: var(--u-line);
  background: var(--u-surface, #f8fafc);
  color: var(--u-muted);
}

.meter-select-cell {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.template-layout {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.template-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: #fbfdfc;
  padding: 8px;
}

.template-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.template-chip.is-active {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--u-accent-ink);
}

.template-other {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--u-muted);
  font-size: 12px;
}

.template-create {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.template-create label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--u-muted);
}

.template-layout h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.template-list {
  display: grid;
  gap: 10px;
}

.template-card {
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

/* It4 A1: двухуровневая meta-row. Row 1 — основные настройки (Название /
   Клиент / Префикс №), Row 2 — линейка переключателей «Показывать в
   счёте» (Логотип / Поставщик / НДС / Подпись). Старый .template-meta
   остался legacy для других вызовов; новые классы template-meta-row*. */
.template-meta-row {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.template-meta-essentials {
  border-bottom: 1px solid var(--u-line);
  margin-bottom: 4px;
  padding-bottom: 12px;
}

/* It4.B2: meta-field inline — label слева, control справа, всё в одной
   узкой строке. Компактнее чем grid stacked. */
.template-meta-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--u-muted);
  min-width: 0;
}

.template-meta-field > span {
  white-space: nowrap;
  font-weight: 600;
}

.template-meta-field input,
.template-meta-field select {
  font-size: 13px;
  height: 30px;
  padding: 4px 8px;
}

/* owner 2026-07-06 (вариант A): «Поставщик» — список + кнопка «Реквизиты» в ряд,
   в строке «Основное» рядом с «Клиентом». */
.template-supplier-field-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.template-supplier-field-row select { max-width: 200px; }
/* кнопка «Реквизиты» — той же высоты, что список (30px), иначе поле выше
   соседних и «съезжает» вверх (ряд выровнен по низу). */
.template-supplier-field-row .btn { height: 30px; min-height: 0; }

.template-meta-spacer { flex: 1 1 auto; min-width: 0; }

.template-meta-delete {
  align-self: end;
}

/* It4 A1 v2: блок «Показывать в счёте» — заголовок сверху, под ним
   2-колонка: слева простые toggle (Логотип/Подпись), справа toggle
   с inline-controls (Поставщик/НДС). DOM order: Логотип, Поставщик,
   Подпись, НДС → grid с 2 cols → row 1 [Логотип | Поставщик],
   row 2 [Подпись | НДС]. */
.template-meta-toggles-section {
  padding: 12px 0 4px;
}

.template-meta-section-title {
  margin: 0 0 10px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--u-muted);
}

/* owner 2026-07-06: адаптивная сетка — сама подбирает число колонок под ширину
   (2 на планшете → 3-4 на десктопе), чтобы блок «Показывать в счёте» не рос
   в много строк. Богатые ячейки (Поставщик/НДС с inline-контролом) занимают
   2 трека, простые on/off — один. */
.template-meta-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: 24px;
  row-gap: 12px;
  align-items: start;
}

.template-meta-toggle-simple {
  /* один трек — простой on/off */
}

.template-meta-toggle-rich {
  /* toggle + inline control (dropdown/%); на узкой ячейке контрол переносится
     под тумблер (flex-wrap в .template-meta-toggle-row) — колонки одинаковые,
     чтобы блок укладывался в 2 строки на десктопе. */
}

.template-meta-toggle-cell {
  display: grid;
  gap: 6px;
  min-height: 52px;
  align-content: start;
}

.template-meta-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--u-muted);
  white-space: nowrap;
}

.template-meta-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.template-meta-toggle-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.template-meta-toggle-inline select {
  min-width: 160px;
  max-width: 220px;
  font-size: 12px;
  height: 28px;
  padding: 2px 6px;
}

.template-meta-toggle-inline input.cell-input {
  width: 60px;
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
  text-align: right;
}

.template-meta-toggle-inline .object-config-rate-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Legacy .template-meta (не используется в template editor после it4 A1).
   Оставляем стиль для других callsite'ов если есть. */
.template-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.template-meta label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--u-muted);
}

.template-meta-toggle {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  font-size: 12px;
  color: var(--u-muted);
}

/* Accordion-обёртка для секций редактора шаблона (Шапка / Низ).
   Owner: «настройка должна помещаться в один экран MacBook» — Шапка
   открыта по умолчанию, Низ свёрнут, можно переключаться. */
.template-section {
  border-top: 1px solid var(--u-line);
  padding-top: 0;
  margin-top: 8px;
}

.template-section > summary.template-section-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-weight: 600;
  color: var(--text, #111827);
}

.template-section > summary.template-section-head::-webkit-details-marker {
  display: none;
}

.template-section-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  color: var(--text-2, #64748b);
}

.template-section[open] > summary.template-section-head .template-section-chevron {
  transform: rotate(180deg);
}

.template-section-count {
  font-size: 11px;
  font-weight: 500;
}

.template-section-body {
  padding-bottom: 6px;
}

.template-section-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

/* It4.B4: labeled row — select variable (160px slim) слева, label
   input (1fr wider) справа, hint, 👁, ✕. Все на одной линии. */
.template-row-labeled {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, auto) 28px 28px;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  padding: 3px 4px;
  border: 1px solid var(--u-line);
  border-radius: 5px;
  background: var(--u-surface);
  min-height: 32px;
}

.template-row-labeled input.template-row-override-input,
.template-row-labeled select.template-row-value-select {
  height: 26px;
  padding: 2px 6px;
  font-size: 12px;
  min-width: 0;
  width: 100%;
}

.template-row-labeled .template-field-hint {
  font-size: 11px;
  color: var(--text-2, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  padding: 0 2px;
}

/* It4 B1: picker «+ Добавить строку…» — replaces двух кнопок
   (+ Строка / + Поле) одним select с готовыми presets. */
.template-section-actions select[data-template-preset-picker] {
  font-size: 12px;
  height: 30px;
  padding: 4px 28px 4px 10px;
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: var(--u-surface, #fff);
  color: var(--u-accent, #5b57eb);
  font-weight: 600;
  cursor: pointer;
}

.template-section-actions select[data-template-preset-picker]:hover {
  border-color: var(--u-accent);
}

/* It3 п.7 + it3.2 fix-3: supplier + VAT inline в template-meta.
   Layout как у .template-meta-toggle (label сверху, controls снизу) —
   унификация с Клиент/Префикс/Логотип. */
.template-meta-supplier,
.template-meta-vat {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  font-size: 12px;
  color: var(--u-muted);
}

.template-meta-supplier > span:first-child,
.template-meta-vat > span:first-child {
  font-size: 12px;
  color: var(--u-muted);
  white-space: nowrap;
}

.template-meta-supplier-row,
.template-meta-vat-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.template-meta-supplier-inline,
.template-meta-vat-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.template-meta-supplier-inline select {
  min-width: 160px;
  max-width: 220px;
  font-size: 12px;
  height: 26px;
  padding: 2px 6px;
}

.template-meta-vat-inline .object-config-rate-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.template-meta-vat-inline input.cell-input {
  width: 60px;
  height: 26px;
  padding: 2px 6px;
  font-size: 12px;
  text-align: right;
}

.template-row {
  display: grid;
  gap: 4px;
  border-radius: 4px;
  padding: 2px 0;
  margin-top: 2px;
  background: transparent;
}

.template-fields {
  display: flex;
  gap: 4px;
  flex-direction: column;
  flex-wrap: nowrap;
}

.template-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, auto) 28px 28px;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--u-line);
  border-radius: 5px;
  background: var(--u-surface);
  padding: 3px 4px;
  min-height: 30px;
}

.template-field .template-field-hint {
  font-size: 11px;
  color: var(--text-2, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  padding: 0 4px;
}

/* Одиночное поле-переменная: select (что подставить) + override (кастом / пусто=авто)
   в одной ячейке грида — не ломают 5-колоночную раскладку строки. */
.template-field-variable-cell {
  display: flex;
  gap: 4px;
  min-width: 0;
}
.template-field-variable-cell select { flex: 0 1 auto; min-width: 0; }
.template-field-variable-cell input.template-field-override-input { flex: 1 1 auto; min-width: 0; }

.template-field select {
  min-width: 0;
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  font-size: 12px;
}

.template-field input.cell-input.text {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 6px;
  font-size: 12px;
}

.template-visible-toggle {
  background: transparent;
  border: 1px solid var(--u-line);
  border-radius: 4px;
  width: 26px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--u-muted);
}
.template-visible-toggle:hover { border-color: var(--u-line-strong); }
.template-visible-toggle.is-on { color: var(--u-accent); background: rgba(91, 87, 235, 0.08); border-color: var(--u-accent); }
.template-visible-toggle svg { width: 14px; height: 14px; }

.drag-handle {
  color: var(--u-muted);
  cursor: grab;
  user-select: none;
}

.template-service-table {
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: #f8fbfa;
  color: var(--u-muted);
  font-size: 12px;
}

.requisites-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 8px;
}

.requisites-grid label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--u-muted);
}

.requisites-grid input.cell-input.text {
  width: 100%;
  height: 30px;
}

.document-toolbar {
  display: grid;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: #f4f8f6;
}

.invoice-preview-controls,
.invoice-filters {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(180px, 1fr) minmax(260px, auto);
}

.invoice-preview-controls label,
.invoice-filters label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--u-ink);
  font-weight: 600;
}

.invoice-preview-controls select,
.invoice-filters select,
.invoice-filters input {
  width: 100%;
  height: 36px;
}

.invoice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.invoice-preview-frame {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: #fff;
}

.readme-block {
  padding: 14px 16px;
  line-height: 1.5;
}

.readme-block p {
  max-width: 980px;
}

.status {
  display: inline-block;
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: #f8fbfa;
  text-align: center;
  font-size: 12px;
}

.status-col {
  width: 74px;
  min-width: 74px;
  text-align: center;
}

.col-check {
  width: 74px;
  min-width: 74px;
}

.status-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

/* M.13a — Контроль: цветной dot вместо emoji-status в compact-таблице.
   Сохраняем тот же tooltip-механизм через data-status-detail. */
.control-dot-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: help;
  outline: none;
}

.control-dot-wrap:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-1, #6366f1);
  border-radius: 50%;
}

/* REBUILD-106 v3 spec section 12: 9px circle, tokens, no border.
   Size kept 12px production-local для visual continuity (можем уменьшить
   до 9px later если owner предпочтёт). Tokens заменили hard-coded hex. */
.control-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--u-muted-tone);
}

.control-dot[data-tone="ok"]    { background: var(--u-ok); }
.control-dot[data-tone="warn"]  { background: var(--u-warn-bright); }
.control-dot[data-tone="error"] { background: var(--u-error-bright); }
.control-dot[data-tone="info"]  { background: var(--u-accent); }
.control-dot[data-tone="muted"] { background: var(--u-muted-tone); }

/* M.13a — KPI «Состояние года» сверху страницы. 4 карточки в ряд. */
.control-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .control-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.control-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 10px;
  background: var(--card, #fff);
}

.control-kpi-card[data-tone="ok"] {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.05);
}

.control-kpi-card[data-tone="warn"] {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.05);
}

.control-kpi-card[data-tone="error"] {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}

.control-kpi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted, #9ca3af);
}

.control-kpi-card[data-tone="ok"] .control-kpi-dot { background: #16a34a; }
.control-kpi-card[data-tone="warn"] .control-kpi-dot { background: #c2701b; }
.control-kpi-card[data-tone="error"] .control-kpi-dot { background: #ef4444; }

.control-kpi-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.control-kpi-label {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.control-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
}

.control-kpi-hint {
  font-size: 11px;
}

/* M.13d — Контроль использует общий `.input-v2-table .solar-matrix`
   стиль (rounded month-pick, zebra, sticky первая колонка) — не
   дублируем CSS. Здесь только Контроль-специфика поверх. */

.control-matrix .control-check-cell {
  /* Центрирование dot в ячейке статуса; sizing наследуется от
     .input-v2-cell-status. */
  text-align: center;
}

.control-matrix .control-check-row-final th.input-v2-row-label,
.control-matrix .control-check-row-final td.input-v2-cell {
  /* «Итог» — итоговая строка матрицы. Чуть выделена бордером
     сверху и жирностью. */
  border-top: 1px solid var(--border, #e6e8ec);
  font-weight: 600;
}

/* M.13a — Сигналы: группировка по месяцу. Заголовок группы — лёгкая
   полоска. Цвет уровня — слева на строке. */
.control-signal-group th {
  background: var(--bg-soft, #f9fafb);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  text-align: left;
  padding: 6px 10px;
  font-weight: 600;
  border-top: 1px solid var(--border, #e6e8ec);
}

/* M.13e — выбранный месяц подсвечен и поднят в начало списка сигналов. */
.control-signal-group.is-selected-month th {
  background: rgba(99, 102, 241, 0.10);
  color: var(--accent-1, #6366f1);
  border-top: 1px solid rgba(99, 102, 241, 0.35);
  box-shadow: inset 3px 0 0 var(--accent-1, #6366f1);
}

.control-signal-row.is-selected-month {
  background: rgba(99, 102, 241, 0.04);
}

.control-signal-empty-selected td {
  padding: 10px 12px;
  background: rgba(22, 163, 74, 0.06);
  color: var(--text, #111827);
  font-size: 13px;
  border-top: 1px solid rgba(22, 163, 74, 0.30);
  box-shadow: inset 3px 0 0 #16a34a;
}

.control-signal-empty-selected .control-dot {
  vertical-align: middle;
  margin-right: 6px;
}

.control-signal-row[data-tone="error"] {
  box-shadow: inset 3px 0 0 #ef4444;
}

.control-signal-row[data-tone="warn"] {
  box-shadow: inset 3px 0 0 #c2701b;
}

.control-signal-row[data-tone="info"] {
  box-shadow: inset 3px 0 0 #6366f1;
}

/* M.13a/b — новая раскладка сигналов: 3 колонки. Уровень+раздел /
   Сигнал и числа (заголовок + список) / Что проверить (список). */
.control-signals-table {
  table-layout: fixed;
  width: 100%;
}

.control-signals-th-level { width: 14%; }
.control-signals-th-detail { width: 46%; }
.control-signals-th-actions { width: 40%; }

.control-signals-table td {
  vertical-align: top;
  padding: 10px 12px;
}

.control-signal-level {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-signal-section-label {
  font-weight: 500;
  font-size: 13px;
}

.control-signal-detail {
  font-variant-numeric: tabular-nums;
}

.control-signal-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text, #111827);
}

.control-signal-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.control-signal-numbers li {
  font-size: 12px;
  line-height: 1.45;
}

.control-signal-num {
  display: inline;
}

.control-signal-num strong {
  font-weight: 600;
}

.control-signal-num.warn strong { color: #d97706; }
.control-signal-num.info strong { color: #6366f1; }

.control-signal-actions ul.control-signal-actions-list {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.control-signal-actions ul.control-signal-actions-list li {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #4b5563);
}

.control-signal-text-line {
  display: block;
  font-size: 12px;
  line-height: 1.45;
}

/* E.3: aggregated signal row + per-month detail rows. */
.control-signal-aggregated .control-signal-aggregate-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
}

.control-signal-aggregate-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--u-accent-soft, #eeedff);
  color: var(--u-accent-active, #4d48e6);
  font-size: 12px;
  font-weight: 600;
}

.control-signal-aggregated.is-open {
  background: color-mix(in srgb, var(--u-accent, #6366f1) 5%, var(--u-surface, #fff));
}

.control-signal-aggregated-detail .control-signal-detail-month {
  display: inline-block;
  font-size: 12px;
}

.control-signal-detail-month {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
}

/* E.4: severity tooltip-icon в шапке колонки «Уровень». */
.control-signals-level-th-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--u-accent-soft, #eeedff);
  color: var(--u-accent-active, #4d48e6);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  user-select: none;
}

.info-icon:focus-visible {
  outline: 2px solid var(--u-accent, #6366f1);
  outline-offset: 2px;
}

.status-tooltip {
  display: none;
}

.status-floating-tooltip {
  position: fixed;
  z-index: 1400;
  width: max-content;
  max-width: 320px;
  border: 1px solid var(--u-line-strong);
  border-radius: 6px;
  background: #13201b;
  color: #fff;
  padding: 7px 9px;
  box-shadow: 0 12px 30px rgba(18, 32, 26, .22);
  white-space: normal;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}

.status-floating-tooltip.tooltip-left {
  text-align: left;
}

.status-floating-tooltip.tooltip-below {
  box-shadow: 0 10px 24px rgba(18, 32, 26, .2);
}

.money-explain {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

/* Подсказка-расшифровка кВт/%-ячейки «Потребителей»: без значка «?», но
   курсор-help и тонкое подчёркивание при наведении сигналят, что есть ховер. */
.consumer-qty-tip {
  cursor: help;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.12s ease;
}

.consumer-qty-tip:hover,
.consumer-qty-tip:focus-visible {
  border-bottom-color: var(--u-line-strong);
  outline: none;
}

/* «Итого за год» — 13-я колонка после декабря в матрицах Потребители/Солнце.
   Мягкий акцент + разделитель слева, чтобы читалась как сводка, не как месяц. */
.matrix-total-head,
.matrix-total-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-left: 1px solid var(--u-line-strong);
}


/* Развёрнуто — акцентная заливка + жирные значения (колонка = сводка). */
.matrix-total-cell.is-open {
  background: var(--u-accent-soft);
  font-weight: 600;
}

/* Показания: месячные заголовки в .input-v2-col-stack стоят на ~8px выше голого
   пилла (baseline line-box). Стековый «Итого» (только Показания) поднимаем на
   ту же величину, чтобы стоять ровно на уровне месяцев. На Потребителях/Солнце
   «Итого» голый (без .input-v2-col-stack) — этот сдвиг их не касается. */
.matrix-total-head .input-v2-col-stack {
  margin-bottom: 13px;
}

/* Двойной итог (кВт + грн) — стекуем один-в-один как в месячных ячейках:
   кВт сверху жирным, грн снизу серым и мельче (со значком ₴). */
.matrix-total-cell .consumer-dual {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.matrix-total-cell .consumer-dual .dual-main {
  font-variant-numeric: tabular-nums;
}

.matrix-total-cell .consumer-dual .dual-sub {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--u-muted, #6e7280);
  font-variant-numeric: tabular-nums;
}

.money-val {
  display: block;
  font-variant-numeric: tabular-nums;
}

.money-trace {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid var(--u-line-strong);
  border-radius: 50%;
  color: var(--u-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.money-explain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--u-line-strong);
  border-radius: 50%;
  color: var(--u-accent);
  font-size: 10px;
  line-height: 1;
}

.status.ok {
  color: var(--u-ok);
  border-color: #b9dbc9;
  background: #eff8f3;
}

.status.info {
  color: var(--u-accent);
  border-color: #bad5e8;
  background: #f0f7fc;
}

.status.warn {
  color: var(--u-warn);
  border-color: #e6cc9f;
  background: #fff7e8;
}

.status.error {
  color: var(--u-error);
  border-color: #e4b6b6;
  background: #fff1f1;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .45fr);
  gap: 14px;
}

.side-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.issue {
  border: 1px solid var(--u-line);
  border-left: 4px solid var(--u-accent);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.issue.warn {
  border-left-color: var(--u-warn);
}

.issue.error {
  border-left-color: var(--u-error);
}

.issue strong {
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 980px) {
  .app,
  .app.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    height: auto;
    overflow: visible;
    padding: 12px;
  }

  .brand {
    padding-bottom: 10px;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    margin-top: 10px;
  }

  .nav-btn {
    white-space: nowrap;
    width: auto;
  }

  .main {
    padding: 14px;
  }

  .topbar,
  .panel-head,
  .two-col {
    display: block;
  }

  .actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-create-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .auth-permission-grid {
    min-width: 0;
  }

  .auth-permission-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Phase 4 final Mercury overrides. Kept last intentionally. */
.app {
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--u-bg);
}

.app.is-sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr);
}

.sidebar {
  background: var(--u-sidebar-bg);
  color: var(--u-sidebar-ink);
  border-right: 1px solid var(--u-sidebar-line);
  padding: 18px 12px;
}

.brand {
  padding: 6px 8px 14px;
  gap: 10px;
  border-bottom: 1px solid var(--u-sidebar-line);
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #605bff 0%, #b388ff 100%);
  font-size: 14px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px 5px auto auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
}

.brand-text strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
}

.brand span {
  color: var(--u-sidebar-muted);
  font-size: 11px;
}

.sidebar-toggle {
  width: 28px;
  height: 28px;
  border-color: var(--u-sidebar-line);
  background: var(--u-sidebar-active);
  color: var(--u-sidebar-muted);
  border-radius: 8px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 14px;
}

.nav-section {
  display: block;
  margin: 14px 8px 6px;
  color: var(--u-sidebar-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--u-sidebar-ink);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--u-sidebar-muted);
  flex-shrink: 0;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-btn:hover,
.nav-btn.is-active {
  background: var(--u-sidebar-active);
  color: #fff;
}

.nav-btn.is-active .nav-icon {
  color: #fff;
}

.app.is-sidebar-collapsed .sidebar {
  padding: 18px 10px;
}

.app.is-sidebar-collapsed .brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 14px;
}

.app.is-sidebar-collapsed .brand-text,
.app.is-sidebar-collapsed .nav-section,
.app.is-sidebar-collapsed .nav-label {
  display: none;
}

.app.is-sidebar-collapsed .nav-btn {
  justify-content: center;
  padding: 9px 0;
  font-size: 13px;
}

.app.is-sidebar-collapsed .nav-btn::first-letter {
  font-size: inherit;
}

.app.is-sidebar-collapsed .sidebar-toggle {
  position: static;
  flex: 0 0 auto;
}

/* Sidebar v2 polish — owner context + bottom user card. */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  position: relative;
  padding: 0 0 14px;
}

.brand-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  padding: 4px 2px;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.brand-link:hover,
.brand-link:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.brand-lockup {
  display: block;
  width: 126px;
  height: auto;
}

.brand-favicon {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.brand span {
  display: none;
}

.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--u-sidebar-muted);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.sidebar-toggle:hover {
  border-color: rgba(255,255,255,.16);
  background: var(--u-sidebar-active);
  color: var(--u-sidebar-ink);
  transform: translateY(calc(-50% - 1px));
}

.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 18px;
}

.sidebar-context {
  margin: 18px 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.context-title {
  display: none;
}

.context-controls {
  display: grid;
  gap: 12px;
}

.context-field {
  position: relative;
  display: grid;
  gap: 8px;
}

.context-label {
  padding-left: 2px;
  color: var(--u-sidebar-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.context-select-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
}

.context-select-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: var(--u-sidebar-ink);
  padding: 0 42px 0 42px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.context-select-button:hover,
.context-select-button[aria-expanded="true"] {
  border-color: rgba(96, 91, 255, .55);
  background: rgba(96, 91, 255, .14);
  box-shadow: 0 0 0 3px rgba(96, 91, 255, .12);
}

.context-select-value {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-select-chevron {
  position: absolute;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(230, 231, 236, .72);
  border-bottom: 1.5px solid rgba(230, 231, 236, .72);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}

.context-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 70;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: #121820;
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.context-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--u-sidebar-ink);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.context-menu-option:hover,
.context-menu-option.is-active {
  background: rgba(96, 91, 255, .16);
}

.context-menu-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--u-accent);
  box-shadow: 0 0 0 4px rgba(96, 91, 255, .11);
  flex: 0 0 auto;
}

.context-menu-spacer {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.context-menu-separator {
  height: 1px;
  margin: 4px 2px;
  background: rgba(255,255,255,.10);
}

.context-menu-create {
  color: #d8ddff;
  font-weight: 650;
}

.context-menu-create:hover {
  background: rgba(96, 91, 255, .20);
}

.context-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  color: var(--u-accent);
  flex: 0 0 auto;
}

.context-menu-text {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-select-shell::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(230, 231, 236, .72);
  border-bottom: 1.5px solid rgba(230, 231, 236, .72);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}

.context-dot {
  position: absolute;
  left: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--u-accent);
  box-shadow: 0 0 0 4px rgba(96, 91, 255, .12);
  pointer-events: none;
}

.context-controls select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--u-sidebar-ink);
  padding: 0 36px 0 42px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.topbar-context {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 190px;
  max-width: 260px;
  z-index: 1810;
}

/* #3 — статус месяца аренды в топбаре (Месяц открыт · N пунктов · Закрыть месяц). */
.topbar-rent-status { display: inline-flex; align-items: center; }
.topbar-rent-status[hidden] { display: none; }
.topbar-rent-status .rent-month-status { display: inline-flex; justify-content: flex-start; }
.topbar-rent-status .rent-month-status-row { gap: 7px; flex-wrap: nowrap; }

.topbar-context .context-controls {
  display: flex;
  gap: 8px;
  width: 100%;
}

.topbar-context .context-field {
  width: 100%;
  gap: 0;
}

.topbar-context .context-label {
  display: none;
}

.topbar-context .context-select-button {
  min-height: 34px;
  border-color: var(--u-line, #e2e8f0);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(96, 91, 255, .08), rgba(179, 136, 255, .04)),
    var(--u-surface, #fff);
  color: var(--text-1, #0f172a);
  padding: 0 34px 0 38px;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.topbar-context .context-select-button:hover,
.topbar-context .context-select-button[aria-expanded="true"] {
  border-color: rgba(96, 91, 255, .5);
  background: var(--u-surface, #fff);
  box-shadow: 0 0 0 3px rgba(96, 91, 255, .10);
}

.topbar-context .context-dot {
  left: 12px;
  width: 9px;
  height: 9px;
}

/* Brand glint pulse — live indicator near object name in topbar/sidebar.
   REBUILD-205: refreshed to v3 accent #5B57EB (was hardcoded #605bff). */
.context-brand-pulse {
  position: absolute;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--u-accent);
  box-shadow: 0 0 0 4px rgba(91, 87, 235, 0.10);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--u-accent) 10%, transparent);
  pointer-events: none;
}

.context-brand-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(91, 87, 235, 0.36);
  border: 1px solid color-mix(in srgb, var(--u-accent) 36%, transparent);
  animation: context-pulse-dot 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* reduce-motion: без пульсации, но кольцо остаётся видимым (статичный индикатор). */
  .context-brand-pulse::after { animation: none; opacity: 0.5; transform: scale(1); }
}

@keyframes context-pulse-dot {
  0% {
    opacity: .75;
    transform: scale(.55);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

.topbar-context .context-select-chevron {
  right: 13px;
  border-color: var(--text-2, #64748b);
}

.topbar-context .context-menu {
  min-width: 220px;
  right: auto;
  z-index: 1900;
  border-color: var(--u-line, #e2e8f0);
  background: var(--u-surface, #fff);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.topbar-context .context-menu-option {
  color: var(--text-1, #0f172a);
}

.topbar-context .context-menu-separator {
  background: var(--u-line, #e2e8f0);
}

.topbar-context .context-menu-create {
  color: #3730a3;
  font-weight: 700;
}

.topbar-context .context-menu-create .context-menu-icon {
  color: #3730a3;
}

.nav-children {
  border-left: 0;
}

.sidebar-user {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 58px;
  margin-top: auto;
  padding: 14px 8px 4px;
  border-top: 1px solid var(--u-sidebar-line);
}

.sidebar-version {
  margin: 6px 0 2px;
  padding: 0 14px;
  color: var(--u-sidebar-muted);
  font-family: var(--u-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .02em;
  text-align: center;
  opacity: .7;
  user-select: text;
}

.app.is-sidebar-collapsed .sidebar-version {
  display: none;
}

.sidebar-user-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 6px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}

.sidebar-user-button:hover,
.sidebar-user-button[aria-expanded="true"] {
  background: rgba(255,255,255,.06);
}

.sidebar-user-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #605bff 0%, #7c5cff 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  flex: 0 0 auto;
}

.sidebar-user-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sidebar-user-meta strong {
  overflow: hidden;
  color: var(--u-sidebar-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-meta span {
  overflow: hidden;
  color: var(--u-sidebar-muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-menu {
  position: absolute;
  right: 8px;
  bottom: 64px;
  left: 8px;
  z-index: 40;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: #121820;
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.sidebar-user-menu-head {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-user-menu-head strong {
  color: var(--u-sidebar-ink);
  font-size: 13px;
  line-height: 1.2;
}

.sidebar-user-menu-head span {
  overflow: hidden;
  color: var(--u-sidebar-muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--u-sidebar-ink);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
}

.sidebar-user-menu-item:hover {
  background: rgba(255,255,255,.07);
}

.app.is-sidebar-collapsed .sidebar-user {
  justify-content: center;
  padding: 12px 0 4px;
}

.app.is-sidebar-collapsed .sidebar-user-button {
  justify-content: center;
  padding: 4px 0;
}

.app.is-sidebar-collapsed .sidebar-user-meta {
  display: none;
}

.app.is-sidebar-collapsed .sidebar-user-menu {
  right: auto;
  bottom: 8px;
  left: calc(100% + 10px);
  width: 220px;
}

.app.is-sidebar-collapsed .brand {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 8px 3px;
}

.app.is-sidebar-collapsed .brand-link {
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  position: static;
}

.app.is-sidebar-collapsed .brand-lockup {
  display: none;
}

.app.is-sidebar-collapsed .brand-favicon {
  display: block;
}

.app.is-sidebar-collapsed .brand-mark {
  width: 28px;
  height: 28px;
}

.app.is-sidebar-collapsed .sidebar-toggle {
  position: static;
  width: 18px;
  height: 22px;
  margin: 0;
  font-size: 11px;
  transform: none;
  box-shadow: none;
}

.app.is-sidebar-collapsed .sidebar-toggle:hover {
  transform: translateY(-1px);
}

/* === Свёрнутый сайдбар (Variant A) — чистый рельс + всплывашка (owner) ===
   Свёрнуто видны ТОЛЬКО иконки разделов (они разные → нет каши/повторов).
   Активный раздел — в акцентной рамке. Подпункты скрыты, всплывают панелью
   справа при наведении на иконку раздела (с подписями). */

/* Подпункты скрыты в свёрнутом (всплывают по hover). */
.app.is-sidebar-collapsed .nav-children {
  display: none;
}

/* Раздел — контейнер для всплывашки + воздух между разделами. */
.app.is-sidebar-collapsed .nav-group {
  position: relative;
}

.app.is-sidebar-collapsed .nav-group + .nav-group {
  margin-top: 6px;
}

/* В свёрнутом 4 иконки влезают без скролла → снимаем overflow, чтобы всплывашка
   не обрезалась справа. */
.app.is-sidebar-collapsed .sidebar,
.app.is-sidebar-collapsed .nav {
  overflow: visible;
}

/* Активный РАЗДЕЛ — чёткая акцентная пилюля (видно, где ты). */
.app.is-sidebar-collapsed .nav-mode-btn.is-active {
  background: var(--u-accent, #5b57eb);
  border-radius: 10px;
  color: #fff;
}

.app.is-sidebar-collapsed .nav-mode-btn.is-active .nav-icon {
  color: #fff;
}

/* #1 (2026-06-20): свёрнутый сайдбар — выше контента. Сам сайдбар = z-index 5
   (sticky), а flyout (z 2000) заперт в этом контексте → sticky-блоки контента
   (z 40-100) красились ПОВЕРХ flyout. Поднимаем стекинг-контекст сайдбара выше
   контента, ниже notices(2100)/модалок(2400+). `aside.sidebar` — повышенная
   специфичность (0,2,1), чтобы выиграть у media-правил `.sidebar{z-index:5}`. */
.app.is-sidebar-collapsed aside.sidebar {
  z-index: 2050;
}

/* Всплывашка — тёмная панель с подпунктами справа от иконки раздела. */
.app.is-sidebar-collapsed .nav-group.is-flyout-open > .nav-children {
  display: grid;
  gap: 2px;
  position: absolute;
  left: calc(100% + 6px);
  top: -6px;
  z-index: 2000;
  min-width: 212px;
  margin: 0;
  padding: 7px;
  background: var(--u-sidebar, #0e0f12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

/* Открытие/закрытие всплывашки управляется JS (initSidebarFlyoutHoverIntent):
   класс .is-flyout-open ставится мгновенно при наведении и снимается с
   задержкой ~240ms — кратковременный проход курсора через зазор иконка↔панель
   не схлопывает её. CSS-:hover-мост для высокой панели был принципиально
   дырявым на диагональном движении к нижним пунктам. */

/* Подпункты в всплывашке — иконка + подпись слева. */
.app.is-sidebar-collapsed .nav-group.is-flyout-open > .nav-children .nav-btn {
  justify-content: flex-start;
  width: 100%;
  padding: 8px 10px;
  gap: 10px;
  font-size: 13px;
}

.app.is-sidebar-collapsed .nav-group.is-flyout-open > .nav-children .nav-label {
  display: inline;
}

/* Активная страница в всплывашке — акцент. */
.app.is-sidebar-collapsed .nav-group.is-flyout-open > .nav-children .nav-sub-btn.is-active {
  background: var(--u-accent, #5b57eb);
  border-radius: 8px;
  color: #fff;
}

.main {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--u-bg);
}

.topbar {
  margin: 0;
  padding: 14px var(--u-pad-page-x);
  align-items: center;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-line);
}

.topbar h1 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.actions {
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.topbar-command-bar {
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.topbar-period {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.topbar-period[hidden] {
  display: none;
}

.period-nav.topbar-period-nav {
  position: static;
  top: auto;
  z-index: auto;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

.period-nav.topbar-period-nav .ds-stepper {
  flex: 0 0 auto;
}

.period-nav.topbar-period-nav .ds-stepper-tail {
  flex: 0 0 auto;
}

.topbar-context {
  min-width: auto;
  max-width: 190px;
  flex: 0 1 auto;
}

.topbar-context .context-select-button {
  min-height: 32px;
  border-radius: 10px;
  background: var(--u-surface, #fff);
  padding: 0 30px 0 34px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.topbar-context .context-select-value {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-context .context-brand-pulse,
.topbar-context .context-dot {
  left: 13px;
  width: 8px;
  height: 8px;
}

.topbar-history {
  display: inline-flex;
  align-items: center;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 10px;
  background: var(--u-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.topbar-history .topbar-history-btn {
  width: 32px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--u-ink, #0f172a);
  box-shadow: none;
}

.topbar-history .topbar-history-btn + .topbar-history-btn {
  border-left: 1px solid var(--u-line, #e2e8f0);
}

.topbar-history .topbar-history-btn:hover:not(:disabled) {
  background: var(--u-accent-soft, #eeedff);
  color: var(--u-accent, #605bff);
}

.topbar-history .topbar-history-btn:disabled {
  color: var(--u-muted, #6b7280);
  opacity: 1;
}

.topbar-scale {
  display: inline-flex;
  align-items: center;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 10px;
  background: var(--u-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.topbar-scale .topbar-scale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--u-ink, #0f172a);
  cursor: pointer;
}

.topbar-scale .topbar-scale-btn:hover:not(:disabled) {
  background: var(--u-accent-soft, #eeedff);
  color: var(--u-accent, #605bff);
}

.topbar-scale .topbar-scale-btn:disabled {
  color: var(--u-muted-2, #98a0ad);
  cursor: default;
}

.topbar-scale .topbar-icon-svg {
  display: inline-flex;
}

.topbar-scale .topbar-icon-svg svg {
  width: 14px;
  height: 14px;
}

.topbar-scale-value {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0 2px;
  font: 600 12px/1 var(--u-font-sans, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--u-ink, #0f172a);
  border-left: 1px solid var(--u-line, #e2e8f0);
  border-right: 1px solid var(--u-line, #e2e8f0);
  user-select: none;
}

.save-status {
  height: 32px;
  padding: 0 10px 0 12px;
  border-radius: 10px;
  gap: 8px;
  box-sizing: border-box;
}

.topbar-action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 1px;
  overflow: visible;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 10px;
  background: color-mix(in srgb, var(--u-surface, #fff) 82%, var(--u-surface-2, #f8fafc));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, background .15s ease;
}

.topbar-action-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--u-muted, #64748b);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.topbar-action-btn:hover,
.topbar-action-btn:focus-visible,
.topbar-action-btn[aria-pressed="true"] {
  outline: none;
  background: var(--u-surface, #fff);
  border-color: var(--u-line-strong, #cbd5e1);
  color: var(--u-ink, #0f172a);
}

.topbar-action-btn svg {
  width: 15px;
  height: 15px;
}

.topbar-search-slot {
  display: inline-flex;
  align-items: center;
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width .22s ease, opacity .15s ease;
}

.topbar-action-cluster.is-search-open .topbar-search-slot {
  width: 184px;
  opacity: 1;
}

.topbar-search-input {
  width: 184px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 8px 0 10px;
  border: 0;
  border-left: 1px solid var(--u-line, #e2e8f0);
  outline: none;
  background: transparent;
  color: var(--u-ink, #0f172a);
  font: 500 12.5px/1 var(--u-font-sans);
}

.topbar-search-input::placeholder {
  color: var(--u-muted-2, #94a3b8);
}

.topbar-notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 2;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, #ef4444 18%, var(--u-surface, #fff));
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 10%, var(--u-surface, #fff));
  color: #dc2626;
  font-family: var(--u-font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--u-surface, #fff);
  pointer-events: none;
}

.topbar-notif-badge[hidden] {
  display: none;
}

body.theme-dark .topbar-action-cluster,
body.theme-dark .topbar-history,
body.theme-dark .topbar-context .context-select-button {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .topbar-action-btn:hover,
body.theme-dark .topbar-action-btn:focus-visible,
body.theme-dark .topbar-action-btn[aria-pressed="true"],
body.theme-dark .topbar-history .topbar-history-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}

body.theme-dark .topbar-history .topbar-history-btn {
  color: rgba(255, 255, 255, .82);
}

body.theme-dark .topbar-history .topbar-history-btn:disabled {
  color: rgba(255, 255, 255, .32);
}

body.theme-dark .topbar-scale {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .topbar-scale .topbar-scale-btn {
  color: rgba(255, 255, 255, .82);
}

body.theme-dark .topbar-scale .topbar-scale-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .08);
}

body.theme-dark .topbar-scale .topbar-scale-btn:disabled {
  color: rgba(255, 255, 255, .32);
}

body.theme-dark .topbar-scale .topbar-scale-value {
  color: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .topbar-search-input {
  border-left-color: rgba(255, 255, 255, .10);
  color: var(--u-ink, #f8fafc);
}

.control-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
  color: var(--u-muted);
  font-size: 12px;
}

.control-chip select {
  min-width: 92px;
  border: 0;
  background: transparent;
  color: var(--u-ink);
  padding: 0;
}

.auth-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: var(--u-surface);
  padding: 4px 10px;
  color: var(--u-ink);
  font-size: 12px;
  font-weight: 600;
}

.notices,
.dashboard,
.content {
  margin-left: var(--u-pad-page-x);
  margin-right: var(--u-pad-page-x);
}

/* owner 2026-06-02: тосты выведены ИЗ ПОТОКА в плавающий слой (правый нижний
   угол) — раньше #notices стоял между шапкой и контентом и при появлении
   сообщения сдвигал весь контент вниз («дёрганье экрана»). Теперь появление/
   исчезновение сообщения ничего не двигает. Статус сохранения живёт в плашке
   шапки (#save-status); сюда попадают ошибки / подтверждения / инфо. */
.notices {
  position: fixed;
  inset: auto 16px 16px auto;
  margin: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  z-index: 2100;
  pointer-events: none;
}
.notice {
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.content {
  padding-bottom: var(--u-pad-page-y);
}

.dashboard {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-top: var(--u-pad-page-y);
  margin-bottom: 18px;
}

.metric,
.panel,
.card,
.notice,
.login-card {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  box-shadow: var(--u-shadow-sm);
}

.metric {
  min-height: 96px;
  padding: 16px 18px;
}

.metric strong {
  color: var(--u-ink);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.page {
  padding: 0 0 var(--u-pad-page-y);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.page-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.02em;
}

.page-sub {
  color: var(--u-muted);
  font-size: 13px;
}

.page-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
}

.card {
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-surface);
}

.card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.card-pad {
  padding: 18px 20px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.quick-action {
  min-height: 82px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-surface);
  color: var(--u-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.quick-action span {
  color: var(--u-accent);
}

.flow-lane {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) 22px minmax(180px, 1fr) 22px minmax(130px, .8fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-surface);
}

.pill-node {
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: var(--u-surface);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* V-002 (slice 17.V2.11) — duplicate .icon-btn definition removed.
   Canonical rule lives at top of buttons section (~line 1387).
   Two semantic intents preserved:
   - .icon-btn: standalone 32×32 transparent icon button (legacy, ui-prefs)
   - .btn.btn-icon: button modifier для compact icon buttons (modern, wizards) */

.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--u-line);
}

.tab {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--u-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 550;
}

.tab.active {
  color: var(--u-ink);
  border-bottom-color: var(--u-accent);
}

.panel-head {
  background: var(--u-surface);
  padding: 14px 18px;
}

.panel-head h2 {
  font-size: 15px;
  font-weight: 650;
}

th,
td {
  border-right: 0;
  border-bottom: 1px solid var(--u-line);
  padding: 7px 9px;
  font-size: 12px;
}

th {
  background: var(--u-table-head);
  color: var(--u-ink);
  font-weight: 650;
  padding: 6px 9px;
}

.settings-tabs {
  overflow-x: auto;
  scrollbar-width: thin;
}

.ui-prefs-panel {
  position: fixed;
  right: 18px;
  top: 72px;
  z-index: 1500;
  width: 304px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  background: var(--u-surface);
  color: var(--u-ink);
  box-shadow: 0 16px 44px rgba(15,17,21,.18);
}

.ui-prefs-head,
.ui-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ui-pref-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
}

.segmented {
  /* E.2 — size = content-fit, max 480px. Не full-width — для 2-3 коротких опций. */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--u-surface-2);
  max-width: 480px;
}

.segmented button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--u-muted);
  min-height: 24px;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.segmented button.active {
  background: var(--u-surface);
  color: var(--u-ink);
  box-shadow: var(--u-shadow-sm);
}

.badge,
.flow-service-chip,
.tag {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 650;
}

@media (max-width: 980px) {
  .app,
  .app.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    height: auto;
    overflow: visible;
  }

  .nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .nav-section {
    display: none;
  }

  .nav-btn {
    width: auto;
    min-width: max-content;
  }

  .topbar,
  .page-header,
  .overview-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .actions,
  .page-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-actions,
  .flow-lane {
    grid-template-columns: 1fr;
  }

  .rent-ledger-sticky-summary,
  .rent-cam-coverage-flow,
  .rent-cam-coverage-meta {
    grid-template-columns: 1fr;
  }

  .rent-ledger-sticky-summary {
    position: static;
  }
}

/* Phase D.3 — generic owner-facing radio modal (settlement receiver
   picker is the first user). Replaces window.prompt with a portal-style
   overlay that fits the existing design language. */
.oblik-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 24px;
}

.oblik-modal-card {
  background: var(--surface-1, #ffffff);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  max-width: 480px;
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oblik-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--text-1, #0f172a);
}

.oblik-modal-prose {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--text-2, #475569);
}

.oblik-modal-form {
  gap: 14px;
}

.oblik-modal-field {
  display: grid;
  gap: 6px;
}

.oblik-modal-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-2, #475569);
}

.oblik-modal-input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  color: var(--text-1, #0f172a);
  padding: 7px 10px;
  font: inherit;
}

.oblik-modal-input:focus {
  border-color: var(--accent-1, #6366f1);
  outline: 2px solid rgba(99, 102, 241, .16);
  outline-offset: 0;
}

.oblik-modal-error {
  min-height: 16px;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.35;
}

/* A.5 (ADR-0016): roles + service_tags в форме Add/Edit Party. */
.party-roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding: 0;
  border: none;
  margin: 4px 0 0;
}

.party-roles-grid legend {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-2, #475569);
  padding: 0;
  margin-bottom: 6px;
}

.party-roles-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-1, #0f172a);
  cursor: pointer;
}

/* ADR-0058: форма каталога услуг (компактно — owner: «ровно, в ряд»). */
.catalog-modal-form { max-width: min(560px, 95vw); width: min(560px, 95vw); }
.catalog-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.catalog-dist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  padding: 0;
  border: none;
  margin: 2px 0 0;
}
.catalog-dist-grid legend {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-2, #475569);
  padding: 0;
  margin-bottom: 4px;
}
.catalog-dist-grid label,
.catalog-form-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-1, #0f172a);
  cursor: pointer;
}
.catalog-form-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
/* Каталог услуг: колонки по ширине контента (иначе «Название» забирает лишнюю
   ширину при width:100% и распирает данные вправо — заголовки не над данными).
   Содержимое — слева, заголовки строго над колонками. */
.service-catalog-table.settings-compact-table { width: auto; }
.service-catalog-table th,
.service-catalog-table td { text-align: left; }
/* Действия каталога не переносятся (кнопка «Архивировать» не уезжает). */
.service-catalog-table .parties-actions-cell { white-space: nowrap; }
.service-catalog-table td:last-child { text-align: left; }

/* B.5/B.3 hotfix: secondary modal role grouping. Pre-checked role
   подсвечена (контекст «создаём арендатора»), остальные роли свёрнуты
   в <details>. На один column — primary highlight, ниже details span'ит
   обе колонки grid. */
.party-roles-grid-secondary {
  grid-template-columns: 1fr;
  gap: 8px;
}

.party-role-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--u-accent, #605bff) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--u-accent, #605bff) 28%, transparent);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1, #0f172a);
  cursor: pointer;
}

.party-roles-extra {
  margin-top: 4px;
}

.party-roles-extra > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--u-muted, #6b7280);
  padding: 4px 0;
  list-style: revert; /* возвращаем дисклоужер-стрелку */
  user-select: none;
}

.party-roles-extra > summary:hover {
  color: var(--text-1, #0f172a);
}

.party-roles-extra > label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text-1, #0f172a);
  cursor: pointer;
}

.party-service-tags-input {
  display: none;
  padding: 0;
  border: none;
  margin: 0;
}

.party-service-tags-input.is-visible {
  display: grid;
  gap: 6px;
}

.party-service-tags-input legend {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-2, #475569);
  padding: 0;
  margin-bottom: 6px;
}

/* Badges для ролей в списке Сторон. Tone-mapping: provider — accent
   (главный коммерческий партнёр), tenant — info, coordinator — warn
   (оранжевый, чтобы выделялся как pivot), investor — ok (зелёный
   ассоциирован с инвестициями), self — muted, solar_recipient —
   warn-tinted (рядом с investor по смыслу, но не дублирует). */
.tag-role {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 4px;
  border: 1px solid transparent;
  line-height: 1.4;
}

.tag-role[data-role="provider"] {
  background: color-mix(in srgb, var(--u-accent, #605bff) 12%, transparent);
  color: var(--u-accent, #605bff);
  border-color: color-mix(in srgb, var(--u-accent, #605bff) 30%, transparent);
}

.tag-role[data-role="tenant"] {
  background: var(--u-accent-soft, #eaf1fc);
  color: var(--u-accent, #2c6dd4);
  border-color: color-mix(in srgb, var(--u-accent, #2c6dd4) 30%, transparent);
}

.tag-role[data-role="coordinator"] {
  background: var(--u-warn-soft, #fff2dd);
  color: var(--u-warn, #c2701b);
  border-color: color-mix(in srgb, var(--u-warn, #c2701b) 30%, transparent);
}

.tag-role[data-role="investor"] {
  background: var(--u-ok-soft, #e8f5ee);
  color: var(--u-ok, #1c8e5a);
  border-color: color-mix(in srgb, var(--u-ok, #1c8e5a) 30%, transparent);
}

.tag-role[data-role="self"] {
  background: var(--u-surface, #fafbfc);
  color: var(--u-muted, #6b7280);
  border-color: var(--u-line, #e6e8ee);
}

.tag-role[data-role="solar_recipient"] {
  background: color-mix(in srgb, #facc15 14%, transparent);
  color: #92660a;
  border-color: color-mix(in srgb, #facc15 35%, transparent);
}

.party-roles-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.party-service-tags-hint {
  font-size: 11px;
  color: var(--u-muted, #6b7280);
  font-style: italic;
  margin-left: 6px;
}

.party-name {
  font-weight: 500;
}

/* A.6 sides consolidation: tab bar внутри renderPartiesPanel + group
   sections по ролям. Tab bar — простой horizontal pattern, active tab
   подсвечена accent border-bottom. Group section — collapsible через
   <details>, open by default, count в title справа. */
.parties-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--u-line, #e6e8ee);
  margin-bottom: 16px;
}

.parties-tab {
  font: inherit;
  background: transparent;
  border: none;
  padding: 10px 16px;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--u-muted, #6b7280);
  border-bottom: 2px solid transparent;
  transition: color var(--u-dur-fast) var(--u-ease), border-color var(--u-dur-fast) var(--u-ease);
}

.parties-tab:hover {
  color: var(--u-ink, #0f1115);
}

.parties-tab.is-active {
  color: var(--u-accent, #605bff);
  border-bottom-color: var(--u-accent, #605bff);
  font-weight: 600;
}

.parties-tab:focus-visible {
  outline: 2px solid var(--u-accent, #605bff);
  outline-offset: 2px;
  border-radius: 4px;
}

.parties-list-tab {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.parties-group-section {
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 8px;
  overflow: hidden;
}

.parties-group-section > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--u-surface-2, #f1f3f7);
  cursor: pointer;
  user-select: none;
}

.parties-group-section[open] > summary {
  border-bottom: 1px solid var(--u-line, #e6e8ee);
}

.parties-group-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--u-ink, #0f1115);
}

.parties-group-count {
  font-size: 12px;
  color: var(--u-muted, #6b7280);
  background: var(--u-surface, #fff);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--u-line, #e6e8ee);
  min-width: 24px;
  text-align: center;
}

.parties-group-section .parties-table {
  margin: 0;
}

/* Settings → Объект: 2-col DS-canonical grid с карточками на одном
   уровне. Раньше использовали flat .object-settings-section с border-top,
   что выглядело как «огромные плоские блоки». Теперь — карточки 1px solid
   var(--u-line) borderRadius:10px, тот же визуальный язык что .supplier-card
   и .invoice-template-card. Danger-zone — одна карточка с warn-tone,
   объединяющая архив, hard-delete и список архивных. */
.object-config-grid {
  /* Settings-redesign 2026-06-20: multicol-упаковка вместо row-grid. Карточки
     пакуются по колонкам ПЛОТНО (нет межрядных дыр под короткой карточкой) и
     авто-балансятся под ЛЮБОЙ набор карточек объекта (нет солнца → нет высокой
     карточки и т.д. — хардкод-раскладка сломалась бы). Прежний row-grid +
     align-items:start оставлял до ~400px пустоты слева, когда соседняя карточка
     была вдвое выше. */
  columns: 2;
  column-gap: 14px;
}

.object-config-card {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 10px;
  background: var(--u-surface, #fff);
  /* multicol: карточку не разрывать между колонками + вертикальный ритм
     (column-gap покрывает только горизонталь). */
  break-inside: avoid;
  margin-bottom: 14px;
}

.object-config-card-head {
  display: grid;
  gap: 3px;
}

.object-config-card-head strong {
  color: var(--text-1, #0f172a);
  font-size: 14px;
  font-weight: 700;
}

.object-config-card-head span {
  color: var(--u-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.object-config-fields {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Компактное горизонтальное поле (редизайн 2026-06-20): лейбл слева, контрол
   справа в ту же строку, хинт одной строкой под контролом (полный текст по
   наведению через data-tooltip). Раньше всё стояло стопкой — каждое поле
   занимало 3+ строки и оставляло «пропасть» справа. */
.object-config-field {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
}

.object-config-label {
  grid-column: 1;
  grid-row: 1;
  color: var(--text-2, #475569);
  font-size: 12px;
  font-weight: 700;
}

/* контрол поля (input/select/toggle/диапазон) — правая колонка, верхний ряд */
.object-config-field > :not(.object-config-label):not(.object-config-hint) {
  grid-column: 2;
  grid-row: 1;
}

.object-config-hint {
  grid-column: 2;
  grid-row: 2;
  color: var(--u-muted, #64748b);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.object-config-field .cell-input,
.object-config-field select {
  width: 100%;
  max-width: none;
}

/* Диапазон «с…по…» в одну строку (солнце активно): два месяце-пикера
   делят ширину поровну, разделитель «по» между ними. */
.object-config-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.object-config-range-row > .cell-input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.object-config-range-sep {
  flex: 0 0 auto;
  color: var(--u-muted, #6b7280);
  font-size: 13px;
}

select.select-empty-state,
.object-config-field select.select-empty-state {
  color: var(--u-muted, #64748b);
  background: color-mix(in srgb, var(--u-muted, #64748b) 5%, var(--u-surface, #fff));
  border-color: color-mix(in srgb, var(--u-muted, #64748b) 24%, var(--border, #e5e7eb));
  font-weight: 500;
}

.object-config-rate-row {
  display: inline-grid;
  grid-template-columns: minmax(86px, 128px) auto;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.object-config-rate-row .cell-input {
  width: 128px;
}

.object-config-rate-unit {
  color: var(--u-muted, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.object-config-vat-control {
  display: grid;
  gap: 8px;
  align-items: start;
}

.object-config-vat-toggle {
  max-width: 260px;
}

.object-config-vat-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2, #475569);
  font-size: 12px;
  font-weight: 650;
}

/* 2026-05-26: compensation control — toggle row + rate row отдельно
   (column layout). Owner-feedback: «текст наезжает, под кнопкой какое-то
   окно для ввода» возникал при flex-wrap row layout, где toggle button
   и rate input могли визуально overlap. Полный split row на 2 row
   решает collision risks и упрощает touch target. */
.object-config-compensation-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.object-config-compensation-toggle-row {
  display: flex;
  align-items: center;
}

/* Компенсационный тоггл переиспользует общий .slider-toggle (слияние
   2026-06-20). Был дубль-класс .object-config-compensation-toggle с тем же
   видом — удалён. Кнопка остаётся в .object-config-compensation-toggle-row. */

/* Общий slider-toggle (button + .is-on, без <input>) — тот же вид, что
   compensation toggle. Для тогглов «Покупное солнце» (Настройки) и
   «Компенсация» (мастер Шаг 1). Переопределяет базовый .toggle-control
   (38×22 inline-grid) на flex-row с подписью рядом + ползунок по .is-on. */
.slider-toggle {
  display: inline-flex;
  align-items: center;
  align-self: start;
  /* родитель .object-config-field — grid; элемент иначе растягивается на всю
     ячейку. justify-self:start держит контентную ширину пилюли. */
  justify-self: start;
  gap: 10px;
  width: auto;
  height: auto;
  min-height: 28px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--u-surface, #fff);
  border: 1px solid var(--u-line, #e2e8f0);
  font: inherit;
  color: var(--u-ink, #0f172a);
  cursor: pointer;
}
.slider-toggle:hover { border-color: var(--u-accent, #6366f1); }
.slider-toggle > .toggle-track { flex: 0 0 auto; }
.slider-toggle > span:not(.toggle-track) { font-size: 13px; font-weight: 500; }
.slider-toggle .toggle-track { background: var(--u-line-strong, #cbd5e1); }
.slider-toggle.is-on .toggle-track { background: var(--u-accent, #6366f1); }
.slider-toggle.is-on .toggle-track::after { transform: translateX(14px); }

/* 2026-05-26 R2.C: setup-progress deep-link highlight. Row кратко
   подсвечивается жёлтым после клика на broken pill — owner видит
   куда конкретно идти настраивать. */
@keyframes setupFlash {
  0%, 100% { background: transparent; }
  20%, 70% { background: rgba(255, 196, 0, 0.32); }
}
tr.is-flash,
[data-settings-row].is-flash {
  animation: setupFlash 2.2s ease-in-out;
}

.object-config-compensation-rate-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.object-config-compensation-rate-label {
  color: var(--text-2, #475569);
  font-size: 12px;
  font-weight: 650;
}

.object-config-muted {
  margin: 0;
  color: var(--u-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.object-config-card-danger {
  border-color: color-mix(in srgb, var(--u-warn, #c2701b) 32%, var(--u-line, #e2e8f0));
  background: color-mix(in srgb, var(--u-warn, #c2701b) 4%, var(--u-surface, #fff));
}

.object-config-danger-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--u-warn, #c2701b) 22%, var(--line-soft, #eef2f7));
}

.object-config-danger-row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.object-config-danger-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  max-width: 46ch;
}

.object-config-danger-copy strong {
  font-size: 13px;
  color: var(--text-1, #0f172a);
}

.object-config-danger-copy p {
  margin: 0;
  color: var(--u-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.object-config-danger-reason {
  color: var(--u-warn, #c2701b);
  font-size: 12px;
}

.object-config-archive-list {
  display: grid;
  gap: 0;
}

.object-config-archive-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--u-warn, #c2701b) 22%, var(--line-soft, #eef2f7));
}

.object-config-archive-row:first-child {
  padding-top: 8px;
}

.object-config-archive-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.object-config-archive-copy strong {
  font-size: 13px;
  color: var(--text-1, #0f172a);
}

.object-config-archive-copy span {
  font-size: 12px;
  color: var(--u-muted, #64748b);
}

.object-config-archive-empty {
  margin: 0;
  padding-top: 8px;
  color: var(--u-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .object-config-grid {
    columns: 1;
  }

  .object-config-card {
    min-height: 0;
    height: auto;
    padding: 12px 14px;
  }

  .object-config-danger-row,
  .object-config-archive-row {
    flex-direction: column;
    align-items: stretch;
  }

  .object-config-rate-row,
  .object-config-vat-toggle {
    width: 100%;
  }

  .object-config-rate-row .cell-input {
    width: 100%;
  }
}

.oblik-modal-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oblik-modal-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.oblik-modal-radio:hover {
  border-color: var(--accent-1, #6366f1);
  background: rgba(99, 102, 241, 0.04);
}

.oblik-modal-radio input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}

.oblik-modal-radio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-1, #0f172a);
}

.oblik-modal-radio-hint {
  font-size: 12px;
  color: var(--text-2, #64748b);
}

.oblik-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Phase M.10 Step 4 — destructive modal flavour для cascade-delete. */
.oblik-modal-danger {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.oblik-modal-danger:hover {
  background: #991b1b;
  border-color: #991b1b;
}

.oblik-modal-detail-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-1, #0f172a);
}

.oblik-modal-detail-list li {
  margin: 2px 0;
}

/* Phase M.10 Step 4 — three-state delete button в Аренда → Объекты. */
.rent-asset-delete-cascade {
  border-color: #b45309;
  color: #b45309;
}

.rent-asset-delete-cascade:hover:not(:disabled) {
  background: rgba(180, 83, 9, 0.08);
}

.rent-asset-delete-frozen,
.rent-asset-delete-no-permission {
  border-color: var(--border-1, #cbd5e1);
  color: var(--text-2, #64748b);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Task 6/7 — Rent → Объекты: карточка объекта. */
.rent-asset-card {
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-surface);
  overflow: hidden;
  box-shadow: var(--u-shadow-sm);
}

.rent-asset-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--u-line) 60%, transparent);
  background: var(--u-surface-2);
}

.rent-asset-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rent-asset-card-active-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.rent-asset-card-active-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.rent-asset-card-active-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--u-muted-2);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.rent-asset-card-active-dot[data-active="true"] {
  background: var(--u-ok);
  box-shadow: 0 0 0 3px var(--u-ok-soft);
}

.rent-asset-card-active-toggle:focus-within .rent-asset-card-active-dot,
.rent-asset-card-active-toggle:hover .rent-asset-card-active-dot {
  outline: 2px solid var(--u-accent-soft);
  outline-offset: 2px;
}

.rent-asset-card-title-row input[type="text"][data-rent-field="name"] {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--u-ink);
  padding: 4px 8px;
  transition: border-color 0.15s, background 0.15s;
}

.rent-asset-card-title-row input[type="text"][data-rent-field="name"]:hover,
.rent-asset-card-title-row input[type="text"][data-rent-field="name"]:focus {
  border-color: var(--u-line);
  background: var(--u-surface);
}

.rent-asset-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Раунд-2 Фаза 2 — адрес/заметка компактными инпутами с плейсхолдером (без uppercase-
   лейблов и пустой полосы): подложка видна, поле читается как «пустое, необязательное». */
.rent-asset-card-sub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 8px;
}

.rent-asset-card-sub-row .cell-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  border-radius: var(--u-radius-sm, 7px);
  font-size: 12.5px;
  color: var(--u-ink);
  padding: 5px 9px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rent-asset-card-sub-row .cell-input::placeholder { color: var(--u-muted); }

.rent-asset-card-sub-row .cell-input:hover { border-color: var(--u-line-strong); }
.rent-asset-card-sub-row .cell-input:focus { border-color: var(--u-accent); box-shadow: 0 0 0 2px var(--u-accent-soft); outline: none; }

/* Эпик Фаза 4 — единая карточка объекта: секция «Договоры» отбита от «Помещений»;
   компактная таблица договоров (Период = 2 month-пикера, Ставка = режим + сумма). */
.rent-asset-card-section-head--gap { margin-top: 18px; }
.rent-period-cell { display: flex; align-items: center; gap: 5px; }
.rent-period-cell .cell-input { min-width: 0; width: 100%; }
.rent-period-dash { color: var(--u-muted); flex: 0 0 auto; }
.rent-rate-cell { display: flex; align-items: center; gap: 6px; }
.rent-rate-cell select { min-width: 0; }
.rent-rate-cell .cell-input { min-width: 0; width: 100%; }
.rent-rate-hint { font-size: 12px; white-space: nowrap; }

/* Раунд-2 Фаза 2 — помещения компактными плашками (вместо таблицы во всю ширину). */
.rent-premise-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rent-premise-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: var(--u-surface);
}
.rent-premise-chip .cell-input { border: 0; background: transparent; padding: 2px 4px; font-size: 12.5px; min-width: 0; }
.rent-premise-chip .cell-input[data-rent-field="room_number"] { width: 92px; min-width: 0; font-weight: 500; }
.rent-premise-chip-area { display: inline-flex; align-items: center; gap: 2px; color: var(--u-muted); font-size: 12px; }
.rent-premise-chip-area .cell-input { width: 52px; min-width: 0; text-align: right; color: var(--u-ink); }
.rent-premise-chip .btn-icon { width: 24px; height: 24px; }

/* Раунд-2 Фаза 2 — таблица договоров: table-layout:fixed + проценты колонок, чтобы
   «Ставка»/«Арендатор» не распирали; шире колонки → горизонтальный скролл в .table-wrap. */
.rent-contracts-table table { table-layout: fixed; width: 100%; min-width: 880px; }
.rent-contracts-table th, .rent-contracts-table td { overflow: hidden; }
.rent-contracts-table col { width: auto; }
.rent-contracts-table th:nth-child(1), .rent-contracts-table td:nth-child(1) { width: 40px; }     /* № */
.rent-contracts-table th:nth-child(2), .rent-contracts-table td:nth-child(2) { width: 15%; }       /* Арендатор */
.rent-contracts-table th:nth-child(3), .rent-contracts-table td:nth-child(3) { width: 12%; }       /* Помещение */
.rent-contracts-table th:nth-child(4), .rent-contracts-table td:nth-child(4) { width: 17%; }       /* Период */
.rent-contracts-table th:nth-child(5), .rent-contracts-table td:nth-child(5) { width: 8%; }        /* Площадь */
.rent-contracts-table th:nth-child(6), .rent-contracts-table td:nth-child(6) { width: 18%; }       /* Ставка */
.rent-contracts-table th:nth-child(7), .rent-contracts-table td:nth-child(7) { width: 11%; }       /* Статус */
.rent-contracts-table th:nth-child(8), .rent-contracts-table td:nth-child(8) { width: 118px; }     /* Оплата */
.rent-contracts-table th:nth-child(9), .rent-contracts-table td:nth-child(9) { width: 44px; }      /* удалить */
.rent-contracts-table td:nth-child(8) { overflow: visible; }                                        /* кнопка «Оплата» не режется */
.rent-contracts-table .cell-input, .rent-contracts-table select { min-width: 0; width: 100%; }

/* Раунд-2 Фаза 4 — таблица «Связь коммуналки»: table-layout:fixed (10 колонок вместо 11,
   «Период» одной колонкой), чтобы не распирала; шире → горизонтальный скролл в .table-wrap. */
.rent-links-table table { table-layout: fixed; width: 100%; min-width: 900px; }
.rent-links-table th, .rent-links-table td { overflow: hidden; }
.rent-links-table th:nth-child(1), .rent-links-table td:nth-child(1) { width: 40px; }    /* № */
.rent-links-table th:nth-child(7), .rent-links-table td:nth-child(7) { width: 14%; }      /* Период */
.rent-links-table th:nth-child(8), .rent-links-table td:nth-child(8) { width: 9%; }        /* Источник */
.rent-links-table th:nth-child(10), .rent-links-table td:nth-child(10) { width: 44px; }   /* удалить */
.rent-links-table .cell-input, .rent-links-table select { min-width: 0; width: 100%; }

/* Phase M.3.a — структура вкладки Счета: заголовок + KPI-карточки +
   tabbed page. Стили совместимы с density-compact/roomy через rem. */
.invoice-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.invoice-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.invoice-page-title h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
}

.invoice-page-title p {
  margin: 0;
  font-size: 13px;
}

/* Phase M.3.b — Шаблоны счетов как карточная сетка (2×2 на десктопе,
   1 колонка на узких экранах). Card-внутренний layout: title row,
   tag row, actions row. */
.invoice-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .invoice-template-grid {
    grid-template-columns: 1fr;
  }
}

/* N.4 — раскрытая карта шаблона расширяется на всю ширину grid-а,
   чтобы редактор не теснился в полу-колонке. */
.invoice-template-card.is-open {
  grid-column: 1 / -1;
  border-color: var(--accent-1, #6366f1);
  box-shadow: inset 3px 0 0 var(--accent-1, #6366f1), 0 1px 8px rgba(99, 102, 241, 0.15);
}

/* Focus mode: когда template editor открыт, прячем panel-head
   («Шаблоны счетов» + описание). Sub-tabs и KPI chip'ы остаются
   видимыми всегда — owner просил «верхняя информационная панель». */
.invoice-page.is-template-focus .page-tab-panel > .panel > .panel-head {
  display: none;
}

/* Topbar: sub-tabs (слева) + KPI chip'ы (справа) в одной sticky
   строке. Заменяет старый KPI row (4 карты) и отдельный nav.page-tabs. */
.invoice-topbar {
  position: sticky;
  top: 60px;
  z-index: var(--u-z-tabs, 60);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  /* owner 2026-06-29: серый (фон страницы, непрозрачный для sticky), БЕЗ базовой
     линии — контур даёт сама папка; активная белая вкладка сливается с телом. */
  background: var(--u-bg, #f6f7f9);
  margin-bottom: 0;
}

.invoice-topbar > nav.page-tabs {
  position: static;
  margin-bottom: 0;
  border-bottom: 0;
  background: transparent;
  flex: 0 1 auto;
  min-width: 0;
}

.invoice-topbar-kpis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 6px 0 8px 12px;
}

.invoice-kpi-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  background: rgba(99, 102, 241, 0.08);
  color: var(--text, #111827);
  white-space: nowrap;
}

.invoice-kpi-chip[data-tone="ok"] {
  background: rgba(34, 197, 94, 0.1);
  color: var(--accent-ok, #15803d);
}

.invoice-kpi-chip[data-tone="muted"] {
  background: var(--u-bg-soft, #f1f5f9);
  color: var(--text-2, #64748b);
}

.invoice-kpi-chip-label {
  font-weight: 600;
  color: inherit;
  opacity: 0.85;
}

.invoice-kpi-chip-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.invoice-kpi-chip-unit {
  font-size: 11px;
  color: var(--text-2, #64748b);
}

.invoice-kpi-chip svg {
  align-self: center;
}

/* F.2: на пустом «Реквизиты» (empty supplier list) гарантируем что
   sub-tabs остаются видны — это уже обеспечивает .invoice-topbar
   (не зависит от is-suppliers-subtab). */

.invoice-page.is-suppliers-subtab .supplier-empty {
  padding: 32px 20px;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 8px;
  background: var(--u-surface, #fff);
  margin-top: 12px;
}

/* N.4d-fix — toolbar над сеткой шаблонов: заголовок + кнопка
   «+ Новый шаблон». Заменил panel-head, который был лишним. */
.invoice-template-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 12px 0;
}

.invoice-template-toolbar-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #111827);
}

/* В focus mode toolbar скрываем тоже (карта раскрыта на всю ширину). */
.invoice-page.is-template-focus .invoice-template-toolbar {
  display: none;
}

/* N.4c-fix — slim header в раскрытой карте: title + actions в одной
   строке, без subtitle/badges/tags. Это убирает ~40-60px вертикального
   шума и даёт editor / preview больше места. */
.invoice-template-card-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 8px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.invoice-template-card-header-compact h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #111827);
  flex: 0 0 auto;
  min-width: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-template-card-header-compact .invoice-template-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.invoice-template-card.is-open {
  /* Уменьшаем внутренние отступы в open mode для компактности. */
  padding: 12px 14px;
  gap: 0;
}

/* N.4b — split layout: слева редактор, справа live-превью. */
.invoice-template-editor-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
}

@media (max-width: 1200px) {
  .invoice-template-editor-inline {
    grid-template-columns: 1fr;
  }
}

.invoice-template-editor-form {
  min-width: 0;
}

.invoice-template-editor-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.invoice-template-preview-label {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}

.invoice-template-preview-frame {
  width: 100%;
  height: 560px;
  min-height: 480px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 8px;
  background: #fff;
}

/* Inline-редактор внутри карты — те же template-* классы что в Настройках. */
.invoice-template-editor-inline .template-card {
  background: var(--bg-soft, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
}

/* It2 #7: statusbar inline в header карточки рядом с title. */
.invoice-template-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}

.invoice-template-statusbar-inline {
  flex: 1 1 auto;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
}

.template-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 11px;
  background: var(--bg-soft, #f3f4f6);
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border, #e6e8ec);
  white-space: nowrap;
}

.template-status-chip.ok {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.30);
}

.template-status-chip.warn {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.30);
}

.template-status-link {
  margin-left: auto;
  color: var(--accent-1, #6366f1);
  font-weight: 500;
  text-decoration: none;
}

.template-status-link:hover {
  text-decoration: underline;
}

/* N.5b — реквизиты постачальника inline в template editor (раскрываемый
   <details>, default открыт). Глобально на объект, не per-template. */
.template-supplier-section {
  margin: 10px 0;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.20);
  border-radius: 6px;
}

.template-supplier-section > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #111827);
  padding: 2px 0;
  user-select: none;
}

.template-supplier-section > summary:hover {
  color: var(--accent-1, #6366f1);
}

.template-supplier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 8px;
}

.template-supplier-grid label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

.template-supplier-grid label > span {
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}

.template-supplier-grid input {
  font-size: 12px;
  padding: 3px 6px;
}

/* N.8 — template editor: dropdown «Постачальник» + hint о переезде. */
.template-supplier-controls {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 8px;
}

.template-supplier-controls > label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  min-width: 240px;
  flex: 1;
}

.template-supplier-controls > label > span {
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}

.template-supplier-hint {
  font-size: 11px;
  margin-top: 6px;
  font-style: italic;
}

/* N.8 / N.8a — вкладка «Реквизиты»: справочник поставщиков. Карточки
   в 2-колоночной сетке (auto-fill min 320px), в стиле .template-card. */
.supplier-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
  color: var(--u-muted);
}

.supplier-empty-text {
  font-size: 14px;
  max-width: 520px;
}

.supplier-empty-cta {
  margin-top: 4px;
}

.supplier-card-name.is-empty {
  font-style: italic;
  color: var(--text-2, #64748b);
  font-weight: 500;
}

.supplier-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 16px;
}

.supplier-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--u-line);
}

.supplier-page-hint {
  font-size: 12px;
  color: var(--u-muted);
  max-width: 720px;
}

/* N.8b — сетка зеркалит .invoice-template-grid: фиксированные 2 колонки,
   на узких экранах падает в 1. Раньше был auto-fill 340px, но при
   открытом сайдбаре панель узкая и карта оставалась одна в ряду. */
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .supplier-grid {
    grid-template-columns: 1fr;
  }
}

.supplier-card {
  background: #fff;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supplier-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--u-line);
}

.supplier-card-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-card-usage {
  font-size: 12px;
  color: var(--u-muted);
  padding: 2px 0;
}

.supplier-card-usage.is-free {
  color: var(--u-muted-2, #94a3b8);
  font-style: italic;
}

.supplier-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  max-width: 760px;
  align-items: end;
}

.supplier-card-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}

.supplier-card-grid label > span {
  color: var(--u-muted);
  font-weight: 500;
}

/* Инпуты тянутся на всю ширину ячейки грида. Перебиваем базовые
   фикс-ширины (input.cell-input.text{width:150px} и т.п. — 0,2,1) равной
   специфичностью + позже по коду. */
.supplier-card-grid input.cell-input,
.supplier-card-grid select {
  font-size: 12px;
  padding: 4px 7px;
  width: 100%;
  box-sizing: border-box;
}

/* Поле «Должность» — select + (опционально) свой текст в одной строке,
   оба тянутся на всю ширину ячейки. */
.supplier-signature-title-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.supplier-signature-title-row > * {
  flex: 1;
  min-width: 0;
}

.supplier-card-grid-wide {
  grid-column: 1 / -1;
}

.supplier-delete-btn {
  background: transparent;
  border: 1px solid var(--u-line);
  padding: 4px 6px;
  height: 26px;
  width: 26px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--u-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.supplier-delete-btn:hover:not(.is-blocked) {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.40);
  color: #b91c1c;
}

.supplier-delete-btn.is-blocked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* N.4d — inline-помощь над секцией шапки: что есть Текст vs Поле. */
.template-field-help {
  font-size: 12px;
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.06);
  border-left: 3px solid var(--accent-1, #6366f1);
  border-radius: 4px;
  color: var(--text, #111827);
}

/* N.4e — flash-подсветка ячейки/строки в Настройках, когда туда
   перенаправили кликом из карты шаблона. 2-секундная вспышка
   фиолетовым accent, потом тихо. */
@keyframes settings-flash {
  0%   { background: rgba(99, 102, 241, 0.35); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45); }
  60%  { background: rgba(99, 102, 241, 0.15); }
  100% { background: transparent; box-shadow: none; }
}

.is-flash {
  animation: settings-flash 2s ease-out;
}

/* N.4e+fix — chip-теги в карте шаблона теперь button-элементы. Полностью
   сбрасываем browser-defaults кнопки (чёрная толстая обводка), оставляя
   только chip-стиль от .invoice-template-tag. */
button.invoice-template-tag {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  /* base .invoice-template-tag handles bg/color/padding/radius */
}

button.invoice-template-tag:hover {
  background: rgba(99, 102, 241, 0.16);
}

button.invoice-template-tag:focus-visible {
  outline: 2px solid var(--accent-1, #6366f1);
  outline-offset: 1px;
}

/* N.4d — resolved value рядом с dropdown «Поле». */
.template-field-hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.template-field-hint[data-empty="1"] {
  color: #b45309;
}

/* N.4d — density polish: ужать вертикальные отступы в template editor
   inline, чтобы помещалось больше без скролла. */
.invoice-template-editor-inline .template-section {
  margin: 8px 0;
}

.invoice-template-editor-inline .template-section-head {
  padding: 4px 0;
  font-size: 13px;
}

.invoice-template-editor-inline .template-row {
  padding: 6px 0;
}

.invoice-template-editor-inline .template-field {
  padding: 3px 6px;
  gap: 6px;
}

.invoice-template-editor-inline .template-field .drag-handle {
  font-size: 10px;
  opacity: 0.5;
  cursor: grab;
}

.invoice-template-editor-inline .template-field select,
.invoice-template-editor-inline .template-field input {
  font-size: 12px;
  padding: 3px 6px;
}

.invoice-template-editor-inline .template-meta {
  gap: 8px;
  padding: 4px 0;
}

.invoice-template-editor-inline .template-meta label {
  font-size: 12px;
}

.invoice-template-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.invoice-template-card:hover {
  border-color: var(--accent-1, #6366f1);
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.12);
}

.invoice-template-card.is-muted {
  opacity: 0.65;
  background: var(--card-muted, #fafafa);
}

.invoice-template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.invoice-template-card-title h3 {
  margin: 0 0 2px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1, #0f172a);
}

.invoice-template-card-title p {
  margin: 0;
  font-size: 12px;
}

.invoice-template-card-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.invoice-template-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.invoice-template-badge-accent {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}

.invoice-template-badge-muted {
  background: var(--card-muted, #f1f5f9);
  color: var(--text-2, #64748b);
}

.invoice-template-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.invoice-template-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
}

.invoice-template-tag::before {
  content: "●";
  font-size: 7px;
  opacity: 0.6;
}

.invoice-template-tag-more {
  background: var(--card-muted, #f1f5f9);
  color: var(--text-2, #64748b);
}

.invoice-template-tag-more::before {
  content: "";
}

.invoice-template-tag-empty {
  background: transparent;
  color: var(--text-2, #94a3b8);
  font-style: italic;
}

.invoice-template-tag-empty::before {
  content: "";
}

.invoice-template-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.invoice-template-card-actions .btn-primary {
  margin-left: auto;
}

/* Phase M.3.d — таблицы Готовы/Черновики/Журнал. Единый layout
   для consistency. Avatar-кружок + двухстрочная ячейка получателя. */
.invoice-list-filters {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.invoice-list-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #64748b);
}

/* owner 2026-06-28: Счета (аренда И коммунальные) — колонки по содержимому с
   ОДИНАКОВЫМ отступом (width:auto + равный паддинг), а не растянуты на всю
   ширину с неравными зазорами. Каждая колонка оцентрована (шапка + данные
   вместе); первый столбец (Клиент/Арендатор с аватаром) — слева. */
.invoice-list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.invoice-list-table thead th {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
  padding: 6px 26px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.invoice-list-table thead th.num,
.invoice-list-table tbody td.num {
  text-align: center;
}

.invoice-list-table thead th:first-child,
.invoice-list-table tbody td:first-child {
  text-align: left;
}

/* owner 2026-06-28: колонка действий абсорбирует остаток ширины → кнопки
   ПРИЛИПАЮТ к правому краю во ВСЕХ строках (и где 1 кнопка, и где 4). Лишнее
   место уходит сюда, а не растягивает data-колонки. Зазоры между data-колонками
   задаёт паддинг (умеренно больше, не «максимально»). */
.invoice-list-table thead th:last-child,
.invoice-list-table tbody td:last-child {
  width: 100%;
}

.invoice-list-table tbody td {
  padding: 8px 26px;
  text-align: center;
  border-bottom: 1px solid var(--border, #f1f5f9);
  vertical-align: middle;
}

.invoice-list-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.03);
}

/* N.1 — групповой заголовок месяца внутри объединённой ленты счетов. */
.invoice-list-group th {
  background: var(--bg-soft, #f9fafb);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  text-align: left;
  padding: 6px 12px;
  font-weight: 600;
  border-top: 1px solid var(--border, #e6e8ec);
  border-bottom: 1px solid var(--border, #f1f5f9);
}

/* F.3: крупный заголовок группы — крупнее текст, бренд-цвет, без CAPS.
   C10: высота строки-месяца = высоте строки счёта (owner: «слишком
   маленькая, всё сливается»). padding соразмерен строке потребителя. */
.invoice-list-group-big th {
  font-size: 0;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-1, #0f172a);
  padding: 13px 16px;
  background: color-mix(in srgb, var(--u-accent, #6366f1) 4%, var(--u-surface, #fff));
  border-top: 1px solid var(--u-accent-soft, #eeedff);
  line-height: 1.3;
}

.invoice-list-group-big .invoice-list-group-row {
  font-size: 13px;
  line-height: 1.3;
}

.invoice-list-group-title { font-size: 13px; }
.invoice-list-group-meta { font-size: 12px; }

.invoice-list-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.invoice-list-group-title {
  font-size: 13px;
  font-weight: 700;
}

.invoice-list-group-meta {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* F.3: zebra-pattern для строк внутри группы. */
.invoice-list-row.is-zebra-odd:not([data-tone="muted"]) td {
  background: color-mix(in srgb, var(--u-accent, #6366f1) 2%, var(--u-surface, #fff));
}

.invoice-list-row.is-zebra-even:not([data-tone="muted"]) td {
  background: var(--u-surface, #fff);
}

.invoice-list-row[data-tone="muted"] td {
  opacity: 0.55;
}

.invoice-list-row[data-tone="muted"]:hover {
  background: transparent;
}

/* N.1 — chip состояния счёта. Tone применяется через data-tone (ok / warn
   / info / muted), синхронно со shared токенами проекта. */
.invoice-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-soft, #f3f4f6);
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border, #e6e8ec);
  white-space: nowrap;
  line-height: 1.3;
}

.invoice-state-chip[data-tone="ok"] {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.30);
}

.invoice-state-chip[data-tone="info"] {
  background: rgba(99, 102, 241, 0.10);
  color: var(--accent-1, #6366f1);
  border-color: rgba(99, 102, 241, 0.30);
}

.invoice-state-chip[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.30);
}

.invoice-state-chip[data-tone="muted"] {
  background: var(--bg-soft, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

/* Shared compact chips — invoice templates, invoice states and service pickers. */
.flow-service-chip,
.flow-service-option span,
.invoice-template-tag,
.invoice-template-badge,
.invoice-state-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent-1, #6366f1) 24%, var(--border, #e6e8ec));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-1, #6366f1) 7%, var(--u-surface, #fff));
  color: color-mix(in srgb, var(--accent-1, #6366f1) 72%, var(--text-1, #0f172a));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

button.invoice-template-tag {
  border: 1px solid color-mix(in srgb, var(--accent-1, #6366f1) 24%, var(--border, #e6e8ec));
  background: color-mix(in srgb, var(--accent-1, #6366f1) 7%, var(--u-surface, #fff));
}

button.invoice-template-tag:hover {
  border-color: color-mix(in srgb, var(--accent-1, #6366f1) 40%, var(--border, #e6e8ec));
  background: color-mix(in srgb, var(--accent-1, #6366f1) 12%, var(--u-surface, #fff));
}

.invoice-template-tag::before {
  color: currentColor;
  opacity: 0.48;
}

.invoice-template-tag-more {
  border-color: color-mix(in srgb, var(--text-2, #64748b) 18%, var(--border, #e6e8ec));
  background: var(--bg-soft, #f8fafc);
  color: var(--text-2, #64748b);
}

.invoice-template-tag-empty {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text-2, #64748b) 24%, var(--border, #e6e8ec));
  background: var(--u-surface, #fff);
  color: var(--text-2, #94a3b8);
}

.invoice-template-badge-accent {
  border-color: color-mix(in srgb, var(--accent-1, #6366f1) 24%, var(--border, #e6e8ec));
  background: color-mix(in srgb, var(--accent-1, #6366f1) 7%, var(--u-surface, #fff));
  color: color-mix(in srgb, var(--accent-1, #6366f1) 72%, var(--text-1, #0f172a));
}

.invoice-template-badge-muted {
  border-color: color-mix(in srgb, var(--text-2, #64748b) 18%, var(--border, #e6e8ec));
  background: var(--bg-soft, #f8fafc);
  color: var(--text-2, #64748b);
}

.flow-service-picker {
  border-color: var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--u-surface, #fff);
  box-shadow: inset 0 0 0 1px transparent;
}

.flow-service-picker:hover,
.flow-service-picker:focus-visible {
  border-color: color-mix(in srgb, var(--accent-1, #6366f1) 34%, var(--border, #e5e7eb));
  background: color-mix(in srgb, var(--accent-1, #6366f1) 3%, var(--u-surface, #fff));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-1, #6366f1) 10%, transparent);
}

.flow-service-summary {
  align-items: center;
}

.flow-service-chip.service-electricity,
.flow-service-option.service-electricity span,
.invoice-template-tag.service-electricity,
.flow-service-chip.service-water,
.flow-service-option.service-water span,
.invoice-template-tag.service-water,
.flow-service-chip.service-gas,
.flow-service-option.service-gas span,
.invoice-template-tag.service-gas,
.flow-service-chip.service-reactive,
.flow-service-option.service-reactive span,
.invoice-template-tag.service-reactive,
.flow-service-chip.service-solar_bank,
.flow-service-option.service-solar_bank span,
.invoice-template-tag.service-solar_bank,
.flow-service-chip.service-bank_fee,
.flow-service-option.service-bank_fee span,
.invoice-template-tag.service-bank_fee,
.flow-service-chip.service-compensation,
.flow-service-option.service-compensation span,
.invoice-template-tag.service-compensation {
  border-color: color-mix(in srgb, var(--chip-color, var(--accent-1, #6366f1)) 24%, var(--border, #e6e8ec));
  background: color-mix(in srgb, var(--chip-color, var(--accent-1, #6366f1)) 8%, var(--u-surface, #fff));
  color: color-mix(in srgb, var(--chip-color, var(--accent-1, #6366f1)) 78%, var(--text-1, #0f172a));
}

.flow-service-chip.service-electricity,
.flow-service-option.service-electricity span,
.invoice-template-tag.service-electricity {
  --chip-color: #4f46e5;
}

.flow-service-chip.service-water,
.flow-service-option.service-water span,
.invoice-template-tag.service-water {
  --chip-color: #0284c7;
}

.flow-service-chip.service-gas,
.flow-service-option.service-gas span,
.invoice-template-tag.service-gas {
  --chip-color: #b45309;
}

.flow-service-chip.service-reactive,
.flow-service-option.service-reactive span,
.invoice-template-tag.service-reactive {
  --chip-color: #7c3aed;
}

.flow-service-chip.service-solar_bank,
.flow-service-option.service-solar_bank span,
.invoice-template-tag.service-solar_bank {
  --chip-color: #ca8a04;
}

.flow-service-chip.service-bank_fee,
.flow-service-option.service-bank_fee span,
.invoice-template-tag.service-bank_fee {
  --chip-color: #475569;
}

.flow-service-chip.service-compensation,
.flow-service-option.service-compensation span,
.invoice-template-tag.service-compensation {
  --chip-color: #be185d;
}

.invoice-state-chip[data-tone="ok"] {
  border-color: color-mix(in srgb, #16a34a 30%, var(--border, #e6e8ec));
  background: color-mix(in srgb, #16a34a 9%, var(--u-surface, #fff));
  color: #15803d;
}

.invoice-state-chip[data-tone="info"] {
  border-color: color-mix(in srgb, var(--accent-1, #6366f1) 30%, var(--border, #e6e8ec));
  background: color-mix(in srgb, var(--accent-1, #6366f1) 9%, var(--u-surface, #fff));
  color: var(--accent-1, #6366f1);
}

.invoice-state-chip[data-tone="warn"] {
  border-color: color-mix(in srgb, #c2701b 30%, var(--border, #e6e8ec));
  background: color-mix(in srgb, #c2701b 9%, var(--u-surface, #fff));
  color: #b45309;
}

.invoice-state-chip[data-tone="muted"] {
  border-color: color-mix(in srgb, var(--text-2, #64748b) 18%, var(--border, #e6e8ec));
  background: var(--bg-soft, #f8fafc);
  color: var(--text-2, #64748b);
}

.settings-table-controls .toggle-control,
.rule-cell .toggle-control,
.settings-inline-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  min-width: 38px;
  height: auto;
  min-height: 22px;
  white-space: normal;
}

.settings-table-controls .toggle-track,
.rule-cell .toggle-track,
.settings-inline-toggle .toggle-track {
  flex: 0 0 auto;
}

.settings-table-controls .toggle-control > span:not(.toggle-track),
.rule-cell .toggle-control > span:not(.toggle-track),
.settings-inline-toggle > span:not(.toggle-track) {
  color: var(--text-2, #64748b);
  line-height: 1.2;
}

.invoice-state-chip svg {
  flex-shrink: 0;
}

/* Settings / Money compact layout */
.settings-money-page {
  display: grid;
  gap: 14px;
}

.settings-money-page > .panel {
  margin: 0;
}

.settings-money-summary {
  /* Read-only статус денег: один приглушённый бар, компактные чипы «подпись
   * значение» в ряд (раньше — 4 карточки с крупными непонятными цифрами). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-soft, #f4f6f9);
}

.settings-money-metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.settings-money-metric-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--metric-color, var(--text-2, #64748b));
  flex: 0 0 auto;
}

.settings-money-metric-label {
  color: var(--text-2, #64748b);
  font-size: 13px;
}
.settings-money-metric-value {
  color: var(--text-1, #0f172a);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.settings-money-metric.is-ok { --metric-color: #16a34a; }
.settings-money-metric.is-info { --metric-color: var(--accent-1, #6366f1); }
.settings-money-metric.is-warn { --metric-color: #c2701b; }
.settings-money-metric.is-muted { --metric-color: #94a3b8; }

.settings-money-table-wrap {
  overflow-x: auto;
}

.settings-compact-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.settings-compact-table th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border, #e6e8ec);
  background: var(--bg-soft, #f8fafc);
  color: var(--text-2, #64748b);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.settings-compact-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-soft, #eef1f5);
  vertical-align: middle;
}

.settings-compact-table tr:last-child td {
  border-bottom: 0;
}

.settings-compact-table tr.is-muted {
  opacity: .58;
}

.invoice-rule-matrix th:not(:first-child),
.invoice-rule-matrix td:not(:first-child) {
  text-align: left;
}

.invoice-rule-matrix th:first-child,
.invoice-rule-matrix td:first-child {
  width: 150px;
  min-width: 150px;
}

.invoice-rule-matrix .rule-cell {
  min-width: 180px;
}

.invoice-rule-matrix .rule-cell.service-bank_fee {
  min-width: 260px;
}

.invoice-rule-cell-body {
  /* СТАТИЧНАЯ раскладка: тоггл в фикс-слоте (auto) слева, extra (источник/
   * сумма) — в правом 1fr-слоте, зарезервированном ВСЕГДА. Тоггл не сдвигается
   * при включении/выключении. Заголовки колонок выровнены влево над тогглами. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
/* источник/ставка/сумма — сразу за тогглом (слева в правом слоте), под своим
 * заголовком; не прижимаем к правому краю, иначе «прилипает» к след. колонке. */
.invoice-rule-cell-body > .rule-extra {
  justify-self: start;
  width: auto;
}

.rule-cell .rule-charge-toggle {
  justify-content: center;
}

.rule-extra {
  width: 100%;
}

.rule-rate-extra,
.rule-fixed-amount-extra {
  display: inline-grid;
  grid-template-columns: auto minmax(74px, 1fr);
  align-items: center;
  gap: 6px;
  max-width: 118px;
  color: var(--text-2, #64748b);
  font-size: 12px;
}

/* Фикс-сумма: чуть шире (суммы до 4-5 знаков «6000.00») + правое
   выравнивание числа, чтобы поле не выглядело узким/обрезанным. */
.rule-fixed-amount-extra {
  max-width: 138px;
}
.rule-fixed-amount-extra .cell-input.compact,
.rule-rate-extra .cell-input.compact {
  /* Перебиваем глобальный input.cell-input.compact{width:64px;margin-top:6px}
   * (выше специфичность через .compact) — иначе «600»/«6000.00» режется и
   * поле съезжает вниз в строке. Число по центру (owner). */
  text-align: center;
  width: 76px;
  margin-top: 0;
}
/* Скрыть стрелки-спиннер у числового поля суммы/ставки (owner: «не справа»). */
.rule-fixed-amount-extra .cell-input[type="number"],
.rule-rate-extra .cell-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.rule-fixed-amount-extra .cell-input::-webkit-outer-spin-button,
.rule-fixed-amount-extra .cell-input::-webkit-inner-spin-button,
.rule-rate-extra .cell-input::-webkit-outer-spin-button,
.rule-rate-extra .cell-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rule-fee-grid {
  display: grid;
  grid-template-columns: minmax(54px, .7fr) minmax(98px, 1.2fr) minmax(74px, .9fr);
  gap: 6px;
  align-items: end;
}

.rule-fee-grid label,
.settings-rule-period label,
.investor-compact-field {
  display: grid;
  gap: 4px;
}

.rule-fee-grid label > span,
.settings-rule-period label > span,
.investor-compact-field > span:first-child {
  color: var(--text-2, #64748b);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .01em;
}

.rule-fee-grid select,
.rule-fee-grid .cell-input,
.settings-rule-period .month-picker-button {
  width: 100%;
  min-width: 0;
}

.money-flow-rules-table th:nth-child(2),
.money-flow-rules-table td:nth-child(2) {
  min-width: 310px;
}

.settings-rule-period {
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-rule-period .month-picker-button {
  flex: 1 1 0;
}
.settings-rule-period-sep {
  flex: 0 0 auto;
  color: var(--text-2, #64748b);
  font-size: 12px;
}

.settings-compact-table td:last-child {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.investor-compact-grid {
  /* Фикс 2 колонки вместо auto-fit — карточки не «прыгают» (6→4→3) при смене
   * ширины/числа инвесторов. На узком — 1 колонка (media ниже). */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.investor-compact-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(86px, .65fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 10px;
  background: var(--u-surface, #fff);
}

.investor-share-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

/* #5: ячейка «Период аренды» — с [месяц] по [месяц] в одну строку. */
.client-active-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.client-active-period-label {
  color: var(--text-2, #64748b);
  font-size: 12px;
}

.investor-share-input > span {
  color: var(--text-2, #64748b);
  font-size: 12px;
}

.investor-share-total {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--share-color, #64748b) 24%, var(--border, #e6e8ec));
  border-radius: 999px;
  background: color-mix(in srgb, var(--share-color, #64748b) 8%, var(--u-surface, #fff));
  color: color-mix(in srgb, var(--share-color, #64748b) 78%, var(--text-1, #0f172a));
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.investor-share-total.is-ok { --share-color: #16a34a; }
.investor-share-total.is-warn { --share-color: #c2701b; }

@media (max-width: 1180px) {
  .settings-money-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .settings-money-summary,
  .investor-compact-grid,
  .investor-compact-card {
    grid-template-columns: 1fr;
  }
}

.invoice-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
  border: 1px solid var(--border, #e6e8ec);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--u-surface, #fff);
}

/* Owner-rule: все 4 фильтра равной ширины (Поиск чуть шире как primary),
   прогрессивная адаптация 1 row → 2×2 → 2×2 на mobile. Selectы видимо
   dropdown — chevron-down через global select style + явный padding-right. */
.invoice-list-toolbar .filter-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2, #64748b);
  font-size: 12px;
  line-height: 1.15;
  min-width: 0;
  flex: 1 1 0;
}

.invoice-list-toolbar .filter-search {
  flex: 1.5 1 0;
}

.invoice-list-toolbar .filter-inline > span {
  font-weight: 650;
  white-space: nowrap;
}

.invoice-list-toolbar .filter-inline > input,
.invoice-list-toolbar .filter-inline > select {
  min-width: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto;
  height: 30px;
}

/* Усиливаем dropdown визуал: chevron-down справа + явный padding,
   чтобы select не выглядел как text input. */
.invoice-list-toolbar .filter-inline > select {
  padding-right: 28px;
  background-position: right 8px center;
}

.invoice-list-toolbar .filter-inline > select:hover {
  border-color: var(--u-accent, #5b57eb);
}

/* 880px: 2×2 (Поиск+Клиент | Состояние+Сортировка) */
@media (max-width: 880px) {
  .invoice-list-toolbar .filter-inline {
    flex: 1 1 calc(50% - 7px);
  }
  .invoice-list-toolbar .filter-search {
    flex: 1 1 calc(50% - 7px);
  }
}

/* Mobile: остаётся 2×2 (не 1-col) — компактнее. */
@media (max-width: 480px) {
  .invoice-list-toolbar {
    gap: 6px 8px;
    padding: 6px 8px;
  }
}

.invoice-withdrawn-history {
  margin-top: 8px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 10px;
  background: var(--u-surface, #fff);
  overflow: hidden;
}

.invoice-withdrawn-history-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  cursor: pointer;
  background: color-mix(in srgb, var(--u-surface-2, #f8fafc) 42%, #fff);
  color: var(--text-1, #0f172a);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.invoice-withdrawn-history-summary::-webkit-details-marker {
  display: none;
}

.invoice-withdrawn-history-summary::marker {
  content: "";
}

.invoice-withdrawn-history-summary:hover {
  background: color-mix(in srgb, var(--accent-1, #6366f1) 4%, var(--u-surface, #fff));
}

.invoice-withdrawn-history-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.invoice-withdrawn-history-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  position: relative;
  opacity: .72;
  transition: transform .15s ease, opacity .15s ease;
}

.invoice-withdrawn-history-caret::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 5px;
  height: 8px;
  border-right: 1.6px solid var(--text-2, #64748b);
  border-bottom: 1.6px solid var(--text-2, #64748b);
  transform: rotate(-45deg);
}

.invoice-withdrawn-history[open] .invoice-withdrawn-history-caret {
  transform: rotate(90deg);
  opacity: 1;
}

.invoice-withdrawn-history-count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 999px;
  background: var(--u-surface, #fff);
  color: var(--text-2, #64748b);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.invoice-withdrawn-history-state {
  flex: 0 0 auto;
  color: var(--text-2, #64748b);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.invoice-withdrawn-history-body {
  border-top: 1px solid var(--border, #e6e8ec);
  background: color-mix(in srgb, var(--u-surface-2, #f8fafc) 34%, var(--u-surface, #fff));
}

.invoice-withdrawn-history-note {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #eef2f7);
  color: var(--text-2, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.invoice-withdrawn-history-table thead th {
  background: color-mix(in srgb, var(--u-surface-2, #f8fafc) 72%, var(--u-surface, #fff));
}

.invoice-withdrawn-history-table .invoice-list-row td {
  background: color-mix(in srgb, var(--u-surface-2, #f8fafc) 46%, var(--u-surface, #fff));
}

.invoice-withdrawn-history-table .invoice-row-actions {
  opacity: .55;
}

@media (max-width: 720px) {
  .invoice-withdrawn-history-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .invoice-withdrawn-history-state {
    white-space: normal;
  }
}

/* It3 п.3: открытая строка просто подсвечена. Slide-out панель
   справа поверх списка, sub-tabs и KPI chip'ы всегда видны сверху,
   sticky на td больше не нужен. */
.invoice-list-row.is-open td {
  background: color-mix(in srgb, var(--u-accent, #6366f1) 5%, var(--u-surface, #fff));
}

.invoice-row-expansion-row td {
  padding: 0;
  background: rgba(99, 102, 241, 0.04);
  border-bottom: 1px solid var(--border, #e6e8ec);
  box-shadow: inset 3px 0 0 var(--accent-1, #6366f1);
}

.invoice-row-expansion {
  padding: 16px 18px;
}

.invoice-row-expansion-grid {
  display: grid;
  grid-template-columns: minmax(460px, .95fr) minmax(520px, 1.25fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .invoice-row-expansion-grid {
    grid-template-columns: 1fr;
  }
}

.invoice-row-expansion-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.invoice-row-expansion-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}

.invoice-row-expansion-row-inputs {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 96px 28px;
  gap: 8px;
  align-items: center;
}

.invoice-row-expansion-row-inputs .invoice-manual-title-input {
  width: 100%;
  min-width: 0;
}

.invoice-row-expansion-row-inputs .invoice-manual-amount-input {
  width: 96px;
  min-width: 0;
}

/* ADR-0032 — repeater ручных строк счёта */
.invoice-manual-lines {
  margin: 0;
  padding: 8px 10px 6px;
  background: var(--u-surface-2, #f8fafc);
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: var(--u-radius, 6px);
}

.invoice-manual-lines.is-compact {
  padding: 8px 10px 6px;
}

/* C6 (B.3/B.4): компактная шапка-разделитель блока — тёмный bold-лейбл +
   hairline снизу, единый стиль с блоком комиссии. */
.invoice-manual-lines-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--u-line, #e2e8f0);
}

.invoice-manual-lines-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--u-ink, #0f172a);
}

.invoice-manual-lines-label .muted {
  font-weight: 400;
}

/* Adaptive column layout без горизонтального скролла. Title растёт,
   числовые колонки имеют min-width и сжимаются равномерно. Owner-rule:
   no horizontal scroll внутри раскрытого счёта. */
.invoice-manual-lines-table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.invoice-manual-lines-table th {
  text-align: left;
  font-weight: 500;
  color: var(--u-muted, #64748b);
  padding: 4px 4px;
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.invoice-manual-lines-table th.col-num,
.invoice-manual-lines-table td.col-num {
  text-align: right;
}

.invoice-manual-lines-table td {
  padding: 2px 3px;
  vertical-align: middle;
}

.invoice-manual-lines-table input.cell-input {
  width: 100%;
  min-width: 0;
  /* C-fix: margin:0 убирает сдвиг — глобальное input.cell-input.compact
     {margin-top:6px} опускало Ед./К-во/Цену ниже Наименования и ×. */
  margin: 0;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--u-line, #e2e8f0);
  background: var(--u-surface, #fff);
  border-radius: 4px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.invoice-manual-lines-table input.cell-input:focus {
  border-color: var(--u-accent, #5b57eb);
  outline: none;
  box-shadow: 0 0 0 1px var(--u-accent, #5b57eb);
}

.invoice-manual-lines-table input.cell-input.compact {
  text-align: right;
  margin-top: 0;
}

.invoice-manual-lines-table .col-title { width: auto; min-width: 140px; }
.invoice-manual-lines-table .col-unit { width: 60px; }
.invoice-manual-lines-table .col-num { width: auto; min-width: 60px; }
.invoice-manual-lines-table .col-remove { width: 28px; padding: 0 0 0 4px; }
.invoice-manual-lines-table .col-remove .btn-icon {
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
}

/* Two-row fallback при очень узком container — title в строке 1,
   остальные поля во второй компактной row. */
@media (max-width: 580px) {
  .invoice-manual-lines-table,
  .invoice-manual-lines-table thead,
  .invoice-manual-lines-table tbody,
  .invoice-manual-lines-table tr {
    display: block;
  }
  .invoice-manual-lines-table thead { display: none; }
  .invoice-manual-lines-table tr {
    padding: 6px;
    border: 1px solid var(--u-line);
    border-radius: 5px;
    margin-bottom: 6px;
    background: var(--u-surface);
    display: grid;
    grid-template-columns: 1fr 24px;
    gap: 4px 6px;
  }
  .invoice-manual-lines-table .col-title { grid-column: 1; }
  .invoice-manual-lines-table .col-remove { grid-column: 2; grid-row: 1; }
  .invoice-manual-lines-table .col-unit,
  .invoice-manual-lines-table .col-num {
    grid-column: span 1;
    width: auto;
  }
  .invoice-manual-lines-table tr > .col-unit { grid-column: 1 / 3; display: grid; grid-template-columns: 60px 1fr 1fr 1fr 1fr; gap: 4px; }
}

.invoice-manual-lines-empty {
  padding: 6px 0;
  font-size: 12px;
}

.invoice-manual-lines-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.invoice-row-expansion-total {
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

.invoice-row-expansion-total strong {
  font-size: 16px;
  font-weight: 700;
}

.invoice-row-expansion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.invoice-row-expansion-preview {
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.invoice-row-expansion-frame {
  width: 100%;
  height: 600px;
  min-height: 600px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 8px;
  background: #fff;
}

/* После того, как JS измерил scrollHeight и выставил `style.height`,
   зацепим переход для плавного роста. */
.invoice-row-expansion-frame[data-autosized="done"] {
  height: auto;
}

.invoice-list-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-row-recipient {
  display: flex;
  align-items: center;
  gap: 10px;
}

.invoice-row-recipient-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invoice-row-recipient-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1, #0f172a);
  line-height: 1.2;
}

.invoice-row-recipient-text .muted {
  font-size: 11px;
  color: var(--text-2, #64748b);
  line-height: 1.2;
}

.invoice-row-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.invoice-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
  /* заполняем ячейку, чтобы flex-end гарантированно прижимал кнопки к правому
     краю даже в строках с одной кнопкой (owner 2026-06-28). */
  width: 100%;
}

.invoice-row-actions .btn {
  font-size: 12px;
}

/* owner 2026-06-28: CTA-кнопки состояния «Выпустить» (btn-outline) и «Отозвать»
   (btn-danger) — одного размера (min-width), чтобы «Отозвать» не казалась меньше.
   Действует на обеих страницах Счетов (аренда + коммунальные). */
.invoice-row-actions .btn-outline,
.invoice-row-actions .btn-danger {
  min-width: 110px;
  justify-content: center;
}

/* Phase M.3.c — right-side slide-out для «Сформировать счёт».
   Backdrop затемняет фон + ловит клик для закрытия. Сама панель
   slide-in справа, fixed позиционирование, ~520px ширина.
   Внутри: header (title + close) / scrollable body (selectors +
   total + iframe-preview) / footer (Отменить / PDF / Сформировать). */
.invoice-page-actions {
  display: flex;
  gap: 8px;
}

.invoice-slide-out-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 90;
  animation: invoice-slide-fade-in 0.18s ease-out;
}

@keyframes invoice-slide-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.invoice-slide-out {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  background: var(--card, #fff);
  border-left: 1px solid var(--border, #e5e7eb);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: invoice-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes invoice-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Row slide-out шире — внутри manual lines table + preview iframe,
   нужно больше места чем для draft "Сформировать счёт". */
.invoice-row-slide-out {
  width: min(820px, 100vw);
}

.invoice-slide-out-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.invoice-slide-out-header-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-slide-out-header-text span {
  font-size: 12px;
}

.invoice-slide-out-section {
  display: flex;
  flex-direction: column;
}

.invoice-slide-out-note {
  font-size: 12px;
  line-height: 1.4;
}

.invoice-slide-out-template-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoice-slide-out-template-selector label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 12px;
  color: var(--u-muted, #64748b);
}

.invoice-slide-out-template-selector label > span {
  font-weight: 600;
  white-space: nowrap;
}

.invoice-slide-out-template-selector select {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}

.invoice-slide-out-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.invoice-slide-out-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.invoice-slide-out-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* It4.B5: controls row над manual lines — Шаблон + Дата документа inline. */
.invoice-slide-out-controls-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.invoice-slide-out-control {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-2, #64748b);
  flex: 1 1 200px;
  min-width: 0;
}

.invoice-slide-out-control > span {
  font-weight: 600;
}

.invoice-slide-out-control input,
.invoice-slide-out-control select {
  height: 30px;
  padding: 4px 8px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.invoice-slide-out-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(160px, .65fr);
  gap: 10px;
}

.invoice-slide-out-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #64748b);
}

.invoice-slide-out-controls input,
.invoice-slide-out-controls select {
  width: 100%;
  box-sizing: border-box;
}

.invoice-slide-out-manual-title {
  grid-column: 1;
}

.invoice-slide-out-manual-amount {
  grid-column: 2;
}

.invoice-slide-out-controls .invoice-manual-title-input,
.invoice-slide-out-controls .invoice-manual-amount-input {
  width: 100%;
  min-width: 0;
}

.invoice-slide-out-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

/* B6: дата документа слева внутри блока «Итог». */
.invoice-slide-out-total-date {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.invoice-slide-out-total-date > span {
  font-size: 11px;
  font-weight: 600;
}

.invoice-slide-out-total-date > input.cell-input.compact {
  /* C6 (B.2): фикс ширины — браузерному date-полю нужно место под
     «дд.мм.гггг 📅», иначе обрезается (регрессия B6). Специфичность выше
     глобального input.cell-input.compact {width:64px}. */
  height: 30px;
  padding: 3px 8px;
  font-size: 13px;
  width: 150px;
  min-width: 150px;
  margin-top: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* B6/C3: «Итог» группой справа. Сверху мелкая разбивка «из-за чего»
   (услуги + комиссия + ПДВ), снизу — крупная сумма К оплате. */
.invoice-slide-out-total-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}

.invoice-slide-out-total-breakdown {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.invoice-slide-out-total-breakdown:empty {
  display: none;
}

.invoice-slide-out-total-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.invoice-slide-out-total-main strong {
  font-size: 16px;
  font-weight: 700;
}

.invoice-slide-out-preview {
  /* C10 (owner): превью показывает ВЕСЬ документ — без фикс. высоты и без
     обрезки. iframe авторазмеряется по контенту (resizeInvoicePreviewFrame),
     а тело slide-out (overflow-y:auto) прокручивается, если не помещается.
     Раньше height:480px + overflow:hidden обрезали подпись внизу. */
  flex: 0 0 auto;
  min-height: 300px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: visible;
  background: #f8fafc;
}

.invoice-slide-out-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.invoice-slide-out-preview-empty {
  padding: 16px;
}

.invoice-slide-out-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--card-muted, #fafafa);
}

@media (max-width: 720px) {
  .invoice-slide-out {
    width: 100vw;
  }
  .invoice-slide-out-controls {
    grid-template-columns: 1fr;
  }
  .invoice-slide-out-manual-title,
  .invoice-slide-out-manual-amount {
    grid-column: auto;
  }
}

/* Phase L.3 — постоянный visible-индикатор «есть несохранённые
   изменения» рядом с кнопкой Сохранить. По умолчанию скрыт; виден
   когда body имеет класс `has-dirty-settings` (его ставит markDirty()
   во всех скоупах: settings/rent/combined/exchange_rates/etc.).
   Сама кнопка Сохранить уже умеет flash «Сохранение..»/«Сохранено»/
   «Ошибка» через setSaveButtonState() — это дополняет картину. */
.save-dirty-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
  white-space: nowrap;
  user-select: none;
}

.save-dirty-indicator::before {
  content: "●";
  font-size: 8px;
  color: #c2701b;
  animation: save-dirty-pulse 1.6s ease-in-out infinite;
}

@keyframes save-dirty-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

body.has-dirty-settings .save-dirty-indicator {
  display: inline-flex;
}

/* Phase J.10 — fix наезжающих ячеек в таблицах Настройки → Клиенты
   /Услуги/Счётчики. Длинные имена клиентов и услуг визуально вылазят
   за свою ячейку и накладываются на соседнюю. Здесь:
   - даём text-input минимальную ширину, чтобы он не схлопывался,
     и одновременно фиксируем box-sizing (без него padding ломает
     инлайн расчёт ширины);
   - padding для td/th таблицы настроек, чтобы между ячейками был
     визуальный зазор, и vertical-align: top — длинные значения и
     bool-селекты не «прыгают» по высоте;
   - white-space: normal на td, чтобы текст внутри ячейки переносился
     вместо горизонтального скролла. */
[data-settings-table-collection] {
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

[data-settings-table-collection] th,
[data-settings-table-collection] td {
  padding: 6px 10px;
  vertical-align: middle;
  white-space: normal;
}

[data-settings-table-collection] input.cell-input.text {
  min-width: 160px;
  box-sizing: border-box;
}

[data-settings-table-collection] input.cell-input::placeholder,
.investor-compact-card input.cell-input::placeholder,
.supplier-card input.cell-input::placeholder {
  color: var(--u-muted, #64748b);
  opacity: 0.72;
}

[data-settings-table-collection] select {
  box-sizing: border-box;
}

.settings-role-cell {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.settings-select-with-help {
  position: relative;
  display: block;
  min-width: 160px;
}

.settings-select-with-help select {
  width: 100%;
}

/* Подсказку для [data-tooltip] рисует ЕДИНЫЙ JS-портал .oblik-tooltip
   (_oblikShowTooltip, app.js): поверх всего, не обрезается overflow, единый
   стиль для селектов/кнопок/заголовков. Прежний CSS ::after давал ВТОРОЙ
   бубл внахлёст с порталом (двойной тултип) — убран 2026-06-20. Скорость
   селектов сохранена через data-tooltip-fast (120 мс) на обёртке. */

.settings-role-hint {
  width: 24px;
  height: 24px;
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: var(--u-surface);
  color: var(--u-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: help;
}

.utility-provider-panel {
  margin-top: 12px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}

.utility-provider-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--u-line);
}

.utility-provider-panel-head p {
  margin: 4px 0 0;
  color: var(--u-muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-muted-value {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  color: var(--u-muted);
  font-size: 12px;
}

.meter-form-adaptive {
  gap: 14px;
}

.meter-form-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
}

.meter-form-types legend {
  padding: 0 4px;
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 700;
}

.meter-form-types label,
.meter-form-adaptive-block label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

.meter-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

/* Текстовые поля (Номер, Название) — на всю ячейку, вровень с селектами:
   глобальный input.cell-input.text{width:150px} делал их узкими в ячейке 210px. */
.meter-form-grid input.cell-input.text {
  width: 100%;
}

.meter-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
}

.meter-form-adaptive-block {
  padding: 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: #f8fafc;
}

.meter-form-toggle {
  margin-top: 8px;
}

/* Phase M.4 — журнал действий: filter chips + controls. */
.audit-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.audit-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.audit-filter-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #64748b);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.audit-filter-chip:hover {
  border-color: var(--accent-1, #6366f1);
  color: var(--text-1, #0f172a);
}

.audit-filter-chip.is-active {
  background: var(--accent-1, #6366f1);
  border-color: var(--accent-1, #6366f1);
  color: #fff;
}

.audit-filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.audit-filter-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.audit-table-wrap {
  overflow-x: auto;
}

.audit-log-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.audit-log-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  vertical-align: top;
}

.audit-log-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #f1f5f9);
  vertical-align: top;
  font-size: 12px;
  word-break: break-word;
}

.audit-log-table colgroup col,
.audit-log-table thead th:nth-child(1) { width: 14%; }
.audit-log-table thead th:nth-child(2) { width: 20%; }
.audit-log-table thead th:nth-child(3) { width: 14%; }
.audit-log-table thead th:nth-child(4) { width: 12%; }
.audit-log-table thead th:nth-child(5) { width: 40%; }

.audit-cell-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.audit-cell-action strong {
  display: block;
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.audit-tech-key {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  background: var(--card-muted, #f1f5f9);
  color: var(--text-2, #64748b);
  border-radius: 4px;
}

.audit-cell-details {
  font-size: 12px;
}

/* Phase M.5 v2 — полная переработка Коммунальные → Обзор.
   Структура: period-nav (mode+arrows) → hero-row (main number + status
   light) → trend chart → grid (suggested actions + invoices). */
.overview-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Phase M.5 v3.6 — period-nav компактнее: оба контрола (mode + arrows)
   слева, занимают одну row без лишнего пустого пространства. */
/* Phase M.5 v3.9 — period-nav компактнее и справа: Месяц/Год чётче
   разделён бордером, label центрирован между стрелками,
   шрифты/размеры уменьшены. */
.overview-period-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.overview-period-mode {
  display: inline-flex;
  padding: 2px;
  background: var(--card-muted, #f1f5f9);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  gap: 2px;
}

.overview-mode-btn {
  padding: 3px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #64748b);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.overview-mode-btn:hover {
  color: var(--text-1, #0f172a);
}

.overview-mode-btn.is-active {
  background: var(--card, #fff);
  color: var(--text-1, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.overview-period-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  padding: 2px;
  background: var(--card, #fff);
}

.overview-period-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-2, #64748b);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.overview-period-arrow:hover:not(:disabled) {
  background: var(--card-muted, #f1f5f9);
  color: var(--accent-1, #6366f1);
}

.overview-period-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.overview-period-label {
  font-size: 12px;
  font-weight: 700;
  min-width: 96px;
  text-align: center;
  color: var(--text-1, #0f172a);
  letter-spacing: 0.01em;
}

/* Period stepper — canonical ds-stepper (DESIGN_SYSTEM.md → «Period
   stepper»). .period-nav остаётся внешним sticky-контейнером (top: 60px
   под topbar), внутри живёт .ds-stepper + .ds-stepper-tail. */
.period-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px var(--u-pad-page-x, 24px) 8px;
  background: var(--u-surface);
  position: sticky;
  top: 60px;
  z-index: 90;
  border-bottom: 1px solid color-mix(in srgb, var(--u-line) 50%, transparent);
}

.ds-stepper {
  --ds-h: 32px;
  --ds-pad: 4px;
  --ds-step-w: 22px;
  --ds-name-px: 12px;
  display: inline-flex;
  align-items: center;
  height: var(--ds-h);
  padding: var(--ds-pad);
  background: var(--u-surface-2);
  border-radius: var(--u-radius);
  font-family: var(--u-font-sans);
  color: var(--u-muted);
  line-height: 1;
  user-select: none;
}
.ds-stepper.is-compact {
  --ds-h: 28px;
  --ds-pad: 3px;
  --ds-step-w: 18px;
  --ds-name-px: 9px;
  border-radius: 6px;
}

.ds-stepper-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(var(--ds-h) - var(--ds-pad) * 2);
  border-radius: 6px;
  background: transparent;
  color: var(--u-muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ds-stepper-seg[data-active="true"] {
  background: var(--u-surface);
  color: var(--u-ink);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06);
}
.ds-stepper.is-compact .ds-stepper-seg[data-active="true"] {
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06), inset 0 0 0 1px var(--u-line);
}

.ds-stepper-name,
.ds-stepper-step {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 6px;
  padding: 0 var(--ds-name-px);
  transition: width 0.2s ease, opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ds-stepper-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
/* 2026-05-25 B.2: native <select> для переключения года в period-nav.
   Owner: «не пишет какой год / не переключается» — без явного chevron
   dropdown визуально неотличим от текста. */
.ds-stepper-year-select {
  font: inherit;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0 16px 0 2px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 10px;
}
.ds-stepper-year-select:hover { color: var(--u-ink); }
.ds-stepper-year-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--u-accent-soft), 0 0 0 3px var(--u-accent);
  border-radius: 4px;
}
.ds-stepper-seg[data-active="true"] .ds-stepper-year-select { color: var(--u-ink); }
.ds-stepper.is-compact .ds-stepper-name { font-size: 12px; }
.ds-stepper-name:hover { color: var(--u-ink); }
.ds-stepper-seg[data-active="true"] .ds-stepper-name { color: var(--u-ink); }

.ds-stepper-step {
  width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  color: var(--u-muted);
}
.ds-stepper-step svg { width: 12px; height: 12px; display: block; }
.ds-stepper.is-compact .ds-stepper-step svg { width: 10px; height: 10px; }
.ds-stepper-seg[data-active="true"] .ds-stepper-step {
  width: var(--ds-step-w);
  opacity: 1;
  pointer-events: auto;
}
.ds-stepper-step:hover { color: var(--u-ink); background: var(--u-surface-2); }
.ds-stepper-step:focus-visible,
.ds-stepper-name:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--u-accent-soft), 0 0 0 3px var(--u-accent);
}
.ds-stepper-step:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

.ds-stepper-tail {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  height: var(--ds-h, 32px);
}
.ds-stepper-divider {
  width: 1px;
  height: 16px;
  background: var(--u-line);
  margin-right: 12px;
}
.ds-stepper.is-compact + .ds-stepper-tail .ds-stepper-divider { height: 14px; }
.ds-stepper-label {
  font-size: 13px;
  font-weight: 550;
  color: var(--u-ink);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ds-stepper.is-compact + .ds-stepper-tail .ds-stepper-label { font-size: 12px; }
.ds-stepper-label-sub { color: var(--u-muted); font-weight: 500; }

/* Solo — единственный сегмент, фон/тень убираются, стрелки всегда видны. */
.ds-stepper.is-solo {
  background: transparent;
  padding: 0;
}
.ds-stepper.is-solo .ds-stepper-seg {
  background: transparent;
  box-shadow: none;
}
.ds-stepper.is-solo .ds-stepper-seg .ds-stepper-step {
  width: var(--ds-step-w);
  opacity: 1;
  pointer-events: auto;
  color: var(--u-muted);
}
.ds-stepper.is-solo .ds-stepper-seg .ds-stepper-name {
  color: var(--u-ink);
  font-weight: 600;
  cursor: default;
}

/* Disabled — закрытый период / readonly. */
.ds-stepper[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* ============================================================
   Period picker · style A (owner-approved 2026-05-29, раскатан
   на всё приложение). Месяц-трек ‹ [select] › + год-трек
   ‹ [select] › раздельно (year-only страницы — только год-трек).
   Шеврон — уголок из двух бордеров, как у селектора объекта
   (.context-select-chevron). Ширина месяца фиксирована.
   Заменяет старый .ds-stepper в renderPeriodNav.
   ============================================================ */
.period-picker { display: inline-flex; align-items: center; gap: 10px; }
.period-picker-grp {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 32px;
  padding: 3px;
  box-sizing: border-box;
  background: var(--u-surface-2);
  border-radius: 8px;
}
.period-picker-arrow {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--u-muted);
  width: 22px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.period-picker-arrow:hover { color: var(--u-ink); background: var(--u-surface); }
.period-picker-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  background: transparent;
  color: var(--u-muted);
  pointer-events: none;
}
.period-picker-arrow svg { width: 11px; height: 11px; display: block; }
.period-picker-val {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* фикс ширины: занимает место под самый длинный месяц («Сентябрь») /
   «Весь год» — при листании стрелками ничего не дёргается. */
.period-picker-month { width: 100px; }
.period-picker-year { width: 66px; }
.period-picker-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 26px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: var(--u-surface);
  color: var(--u-ink);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06), inset 0 0 0 1px var(--u-line);
  font: 600 13px/1 var(--u-font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  padding: 0 24px 0 9px;
  text-align: left;
}
.period-picker-select:hover {
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06), inset 0 0 0 1px var(--u-line-strong);
}
.period-picker-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--u-accent-soft), 0 0 0 3px var(--u-accent);
}
/* шеврон — точь-в-точь как у селектора объекта (.context-select-chevron):
   уголок из border-right + border-bottom, повёрнутый на 45°. */
.period-picker-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #64748b;
  border-bottom: 1.5px solid #64748b;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

/* Топбар: кастомные списки месяца/года (renderPeriodNav placement=topbar) — те же
   .context-menu/.context-menu-option, что у объекта → единый стиль + открытие
   ВНИЗ. Меню скрыто; раскрывается при aria-expanded="true" на триггере. Светлая
   тема — как .topbar-context .context-menu. */
.period-context-menu {
  display: none;
  min-width: 168px;
  right: auto;
  z-index: 1900;
  border-color: var(--u-line, #e2e8f0);
  background: var(--u-surface, #fff);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}
.period-picker-trigger[aria-expanded="true"] + .period-context-menu { display: grid; }
.period-context-menu .context-menu-option { color: var(--text-1, #0f172a); }

/* owner 2026-06-01: топбар-селекторы месяца/года/объекта — без ▼ на ВСЕХ вьюпортах
   (десктоп тоже, не только мобайл). У триггеров месяца/года ▼ убран из разметки;
   у объекта прячем здесь. Без ▼ — компактный паддинг + центр текста в чипах
   месяца/года (объект остаётся точка+имя). In-page нативные <select> не затронуты. */
.topbar-context .context-select-chevron { display: none; }
.topbar-context .context-select-button { padding-right: 14px; }
.period-picker-trigger { padding: 0 10px; text-align: center; }

/* Phase M.5 v3.3 — KPI grid: 4 metric-карточки в ряд, status-card
   полной ширины ниже. На узких экранах перенос. */
.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .overview-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .overview-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Нет солнца → 2 KPI (Счёт DTEK + Потребление) тянутся на всю ширину
   (в 2× шире обычной карточки). Только десктоп — на узких уже 2-кол/1-кол. */
@media (min-width: 1101px) {
  .overview-kpi-grid[data-cards="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.overview-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.01));
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 12px;
  min-width: 0;
}

.overview-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2, #64748b);
  font-weight: 600;
}

.overview-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1, #0f172a);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  word-break: break-word;
}

.overview-kpi-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2, #64748b);
}

/* Phase M.5 v3.11 — sparkline под главной цифрой: 100% ширина,
   высота 24px, чёткий контраст с фоном карточки. */
.overview-kpi-sparkline {
  width: 100%;
  height: 22px;
  display: block;
  margin: 2px 0 4px;
  opacity: 0.85;
}

.overview-kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-2, #64748b);
  width: fit-content;
  margin-top: 2px;
}

.overview-kpi-chip[data-trend="up"] {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.overview-kpi-chip[data-trend="down"] {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.overview-kpi-chip-pct {
  font-weight: 700;
}

.overview-kpi-chip-abs {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Release UI DS bridge: renderOverviewMetricCard emits .u-kpi-card
   and .u-kpi-card-spark. Keep the SVG contract explicit so paths never
   fall back to the browser's default black fill/stroke. */
.u-kpi-card {
  color: var(--u-ink, #0f1115);
}

.u-kpi-card[data-fill="error"] {
  --chart-color: var(--chart-error);
  background: linear-gradient(180deg, var(--u-error-soft), var(--u-surface, #fff));
  border-color: color-mix(in srgb, var(--u-error) 24%, transparent);
}

.u-kpi-card[data-fill="warn"] {
  --chart-color: var(--chart-warn);
  background: linear-gradient(180deg, var(--u-warn-soft), var(--u-surface, #fff));
  border-color: color-mix(in srgb, var(--u-warn) 24%, transparent);
}

.u-kpi-card[data-fill="info"] {
  --chart-color: var(--chart-info);
  background: linear-gradient(180deg, var(--u-accent-soft), var(--u-surface, #fff));
  border-color: color-mix(in srgb, var(--u-accent) 24%, transparent);
}

.u-kpi-card[data-fill="ok"] {
  --chart-color: var(--chart-ok);
  background: linear-gradient(180deg, var(--u-ok-soft), var(--u-surface, #fff));
  border-color: color-mix(in srgb, var(--u-ok) 24%, transparent);
}

.u-kpi-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--u-muted, #6b7280);
  font-weight: 700;
}

.u-kpi-card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--u-ink, #0f1115);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.u-kpi-card-value .unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-muted, #6b7280);
}

.u-kpi-card-delta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: var(--u-muted, #6b7280);
  font-size: 12px;
}

.u-delta-pct {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 2px 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.u-delta-pct[data-tone="good"] {
  color: var(--u-ok, #1c8e5a);
  background: var(--u-ok-soft, #e8f5ee);
}

.u-delta-pct[data-tone="bad"] {
  color: var(--u-error, #c2362a);
  background: var(--u-error-soft, #fdecea);
}

.u-delta-pct[data-tone="neutral"] {
  color: var(--u-muted, #6b7280);
  background: var(--u-surface-2, #f1f3f7);
}

.u-delta-pct .arrow::before {
  content: "→";
}

.u-delta-pct[data-direction="up"] .arrow::before {
  content: "↑";
}

.u-delta-pct[data-direction="down"] .arrow::before {
  content: "↓";
}

.u-kpi-card-spark {
  width: 100%;
  height: 36px;
  display: block;
  margin-top: auto;
}

.u-kpi-card-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.u-kpi-card-spark path.line {
  fill: none;
  stroke: var(--chart-color, var(--u-accent));
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.u-kpi-card-spark path.fill {
  fill: color-mix(in srgb, var(--chart-color, var(--u-accent)) 14%, transparent);
  stroke: none;
}

/* Phase M.5 v3.5 + v3.8 — bottom row: 2 col равные (Состояние | Счета),
   same height/width как chart-карточки сверху. */
.overview-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.overview-bottom-grid > * {
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .overview-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* M.12 Слайс A — Monthly stepper. 4 шага в строку (на узких экранах
   wrap). Каждый шаг — карточка с номером, лейблом, деталью и иконкой
   статуса. Цвет рамки/иконки = tone. Locked = visually disabled. */
.monthly-stepper {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 12px;
  padding: 14px 16px;
}

.monthly-stepper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.monthly-stepper-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.monthly-stepper-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

/* Приоритетная строка «что дальше» в шапке степпера (перенесена из
   убранной карточки «Состояние месяца»). */
.monthly-stepper-lead {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--u-warn-soft, #fff4e0);
  color: var(--text, #0f172a);
  border-left: 3px solid var(--u-warn, #c2701b);
}

.monthly-stepper-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .monthly-stepper-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .monthly-stepper-list {
    grid-template-columns: 1fr;
  }
}

.monthly-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 10px;
  background: var(--bg-soft, #f9fafb);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.monthly-step:hover:not([aria-disabled="true"]) {
  border-color: var(--accent-1, #6366f1);
  background: var(--card, #fff);
}

.monthly-step:active:not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.monthly-step[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.monthly-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e8ec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.monthly-step-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.monthly-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthly-step-detail {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthly-step-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--text-muted, #6b7280);
}

.monthly-step[data-status="done"] {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.06);
}
.monthly-step[data-status="done"] .monthly-step-num {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.monthly-step[data-status="done"] .monthly-step-icon {
  color: #16a34a;
}

.monthly-step[data-status="todo"] {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.06);
}
.monthly-step[data-status="todo"] .monthly-step-num {
  background: var(--accent-1, #6366f1);
  border-color: var(--accent-1, #6366f1);
  color: #fff;
}
.monthly-step[data-status="todo"] .monthly-step-icon {
  color: var(--accent-1, #6366f1);
}

.monthly-step[data-status="warn"] {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.07);
}
.monthly-step[data-status="warn"] .monthly-step-num {
  background: #c2701b;
  border-color: #c2701b;
  color: #fff;
}
.monthly-step[data-status="warn"] .monthly-step-icon {
  color: #c2701b;
}

.monthly-step[data-status="blocked"] {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.07);
}
.monthly-step[data-status="blocked"] .monthly-step-num {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
.monthly-step[data-status="blocked"] .monthly-step-icon {
  color: #ef4444;
}

.monthly-step[data-status="locked"] {
  background: var(--bg-soft, #f9fafb);
}

/* Phase M.5 v3.11 — mini-progress dots для «Счета: выпущено N из M».
   Маленькие точки 6px, filled = accent, empty = border-color. */
.overview-mini-progress {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-right: 4px;
}

.overview-mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border, #e5e7eb);
  border: 1px solid var(--border, #e5e7eb);
}

.overview-mini-dot.is-filled {
  background: #16a34a;
  border-color: #16a34a;
}

/* Action-кнопки «Проверить / Выпустить / Все» — стандартные DS-кнопки
   (.btn .btn-small добавлены в рендере app.js, owner: «у нас другие кнопки»).
   Здесь только layout: min-width для выравнивания Проверить/Выпустить по
   ширине на десктопе (на мобиле снимается — кнопка под текстом). */
.overview-status-action {
  min-width: 120px;
}

/* Invoices card — компактный список + footer total */
.overview-invoices-card {
  padding: 16px 18px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overview-invoices-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.overview-invoices-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
}

.overview-invoice-row {
  grid-template-columns: 1fr auto auto;
  padding: 8px 0;
  font-size: 13px;
}

.overview-invoice-row:first-child {
  padding-top: 0;
}

.overview-invoice-status {
  font-size: 14px;
  width: 22px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.overview-invoice-status[data-tone="ok"] { color: #16a34a; }
.overview-invoice-status[data-tone="warn"] { color: #c2701b; }

.overview-invoice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--border, #f1f5f9);
  font-size: 12px;
  flex-wrap: wrap;
}
.overview-invoice-chips { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.overview-invoice-footer--empty { justify-content: flex-end; }

.overview-invoice-footer strong {
  font-variant-numeric: tabular-nums;
}

/* Phase M.5 v3.11 — Pending/OK attention chips в футере. */
.overview-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid transparent;
}

.overview-pending-chip[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
  color: #b45309;
}

.overview-pending-chip[data-tone="warn"] strong { color: #92400e; }
.overview-pending-chip[data-tone="warn"] .muted { color: #b45309; }
.overview-pending-chip[data-tone="warn"] svg { color: #d97706; }

.overview-pending-chip[data-tone="ok"] {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
  color: #166534;
}

.overview-pending-chip[data-tone="ok"] strong { color: #14532d; }
.overview-pending-chip[data-tone="ok"] .muted { color: #166534; }
.overview-pending-chip[data-tone="ok"] svg { color: #16a34a; }

/* 2026-05-25 E.1: anomaly detector banner */
.overview-anomalies-banner {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid var(--u-warn, #f59e0b);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.overview-anomalies-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.overview-anomalies-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
}
.overview-anomalies-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--warn-strong, #c2701b);
  background: var(--u-warn-soft, #fef3c7);
  padding: 2px 8px;
  border-radius: 999px;
}
.overview-anomalies-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.overview-anomaly-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--u-ink, #0f172a);
  padding: 4px 0;
}
.overview-anomaly-icon {
  font-size: 13px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.overview-anomaly-text { font-variant-numeric: tabular-nums; }
.overview-anomaly-overflow {
  color: var(--u-muted, #64748b);
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px dashed var(--u-line, #e2e8f0);
  margin-top: 4px;
}

/* Status light */
.overview-status-card {
  padding: 16px 18px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overview-status-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
}

/* Онбординг-подсказка «с чего начать» (аудит 2026-06-11, item 7) —
   приоритетный следующий шаг внутри карточки «Состояние месяца». */
.overview-status-lead {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2, #f1f5f9);
  color: var(--text, #0f172a);
  border-left: 3px solid #94a3b8;
}
.overview-status-lead[data-tone="ok"] { border-left-color: #16a34a; }
.overview-status-lead[data-tone="warn"] {
  border-left-color: var(--u-warn, #c2701b);
  background: var(--u-warn-soft, #fff4e0);
}
.overview-status-lead[data-tone="error"] {
  border-left-color: var(--u-error, #c2362a);
  background: #fdecea;
}

.overview-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.overview-status-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.overview-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-2, #94a3b8);
}

.overview-status-item[data-tone="ok"] .overview-status-dot { background: #16a34a; }
.overview-status-item[data-tone="warn"] .overview-status-dot { background: var(--u-warn, #c2701b); }
.overview-status-item[data-tone="error"] .overview-status-dot { background: var(--u-error, #c2362a); }
.overview-status-item[data-tone="muted"] .overview-status-dot { background: #cbd5e1; }

/* A.2: иерархия — critical row крупнее и жирнее (главное), muted-row
   отделена dashed-сепаратором и слегка приглушена (неактуально). */
.overview-status-item.is-critical strong {
  font-size: 14px;
  font-weight: 600;
}

.overview-status-item.is-muted-row {
  border-top: 1px dashed var(--u-line, #e6e8ee);
  margin-top: 6px;
  padding-top: 8px;
  color: var(--u-muted, #6e7280);
}

.overview-status-item.is-muted-row strong {
  font-weight: 500;
  color: var(--u-muted, #6e7280);
}

.overview-status-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.overview-status-text strong {
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.overview-status-text .muted {
  font-size: 12px;
}

/* Phase M.5 v3 — charts grid: 2 на ширину на десктопе, 1 на узком.
   Phase M.5 v3.6 — grid-auto-rows: 1fr выравнивает высоты всех 4
   карточек (Income / Tariff / Consumption / Coverage) даже когда
   header-controls у них разной высоты. */
.overview-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .overview-charts-grid {
    grid-template-columns: 1fr;
  }
}

.overview-chart-card {
  padding: 14px 16px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Phase M.5 v3.11 + v3.12 — когда наводим на KPI карточку, связанный
   чарт подсвечивается своим цветом (через --chart-color) — owner
   видит источник данных в его собственной color-семантике. */
.overview-chart-card.is-kpi-linked {
  border-color: var(--chart-color, var(--accent-1, #6366f1));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-color, #6366f1) 18%, transparent);
}

/* Phase M.5 v3.11 — KPI карточка тоже визуально подсвечивается
   при hover, чтобы pair был bi-directional. */
.overview-kpi-card[data-overview-related-chart] {
  cursor: default;
  transition: border-color 0.2s, transform 0.15s;
}

.overview-kpi-card[data-overview-related-chart]:hover {
  border-color: color-mix(in srgb, var(--chart-color, #6366f1) 50%, transparent);
  transform: translateY(-1px);
}

.overview-chart-card > .overview-chart-scroll {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
}

.overview-chart-card > .overview-chart-scroll > svg {
  flex: 1 1 auto;
}

.overview-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.overview-chart-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
}

.overview-chart-meta {
  font-size: 11px;
  color: var(--text-2, #64748b);
}

/* #1: пояснение для покупного солнца (под заголовком) + приглушённая строка
   долга соседу-поставщику (под графиком) — аккуратно, не мешая доходу. */
.overview-chart-subnote {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--u-muted, #6b7280);
}
.overview-chart-foot {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line, #e2e8f0);
  font-size: 12px;
  color: var(--u-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.overview-chart-foot strong {
  color: var(--text-1, #0f172a);
  font-weight: 600;
}

.overview-chart-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* «Поставщику солнца» в шапке карточки «Доход» (вынесено из тела, чтобы не
   тянуло высоту карточки). */
.overview-chart-supplier {
  font-size: 12px;
  color: var(--text-2, #64748b);
  white-space: nowrap;
}
.overview-chart-supplier strong {
  color: var(--text-1, #0f172a);
  font-variant-numeric: tabular-nums;
}

.overview-chart-toggles {
  display: inline-flex;
  padding: 2px;
  background: var(--card-muted, #f1f5f9);
  border-radius: 999px;
  gap: 2px;
}

.overview-chart-toggle {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2, #64748b);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.overview-chart-toggle:hover {
  color: var(--text-1, #0f172a);
}

.overview-chart-toggle.is-active {
  background: var(--card, #fff);
  color: var(--text-1, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.overview-chart-select {
  padding: 4px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 12px;
  background: var(--card, #fff);
  color: var(--text-1, #0f172a);
}

.overview-chart-scroll {
  width: 100%;
  overflow-x: auto;
  /* position relative — для overview-chart-avg-marker overlay (P.1c v2).
     Подпись «ср X» абсолютно позиционируется относительно scroll, а не
     внутри SVG viewBox — так она реально прижата к правому краю DOM
     контейнера, независимо от preserveAspectRatio. */
  position: relative;
}

.overview-chart-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 160px;
}

/* HTML overlay для подписи среднего. Позиционирована относительно
   .overview-chart-scroll: right=10px = реально у правого края DOM.
   top=var(--avg-top) — процент от высоты scroll (= высота SVG в DOM),
   что совпадает с avgY на SVG-линии. transform translateY(-50%)
   центрирует текст по линии. Background var(--card) перекрывает
   пунктирную линию под текстом, чтобы было читаемо. */
.overview-chart-avg-marker {
  position: absolute;
  right: 10px;
  top: var(--avg-top, 50%);
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  background: var(--card, #fff);
  padding: 0 6px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Phase M.5 v3.12 — bar fill через chart-card CSS-переменную
   --chart-color, чтобы Доход (amber) / Потребление (purple) /
   и другие чарты могли иметь разные цвета баров. */
.overview-chart-card {
  --chart-color: #6366f1;
}

.overview-chart-bar rect {
  fill: var(--chart-color);
  fill-opacity: 0.65;
  transition: fill-opacity 0.15s;
}

.overview-chart-bar {
  cursor: pointer;
}

.overview-chart-bar:hover rect {
  fill-opacity: 0.9;
}

.overview-chart-bar.is-selected rect {
  fill-opacity: 1;
}

/* P.1c: подсветка квартала — 3 столбца квартала выделяются вместе
   при scope=quarter. Чуть плотнее обычных столбцов, бордюр одинаковый,
   чтобы 3 шт читались как одна группа. На bar-чартах. */
.overview-chart-bar.is-quarter-active rect {
  fill-opacity: 0.95;
  stroke: var(--chart-color, var(--accent-1, #6366f1));
  stroke-width: 1.5;
}
.overview-chart-bar.is-quarter-active .overview-chart-value-label {
  font-weight: 700;
}
/* Аналог для line-point. Точка чуть крупнее, обводка accent. */
.overview-chart-line-point.is-quarter-active .overview-chart-dot {
  r: 5;
  stroke: var(--chart-color, var(--accent-1, #6366f1));
  stroke-width: 2;
}

/* Phase M.5 v3.14 — две версии подписи месяца: short (янв) видна
   по умолчанию, full (январь) скрыта и показывается при hover/selected.
   Жирность + цвет чарта на активном. */
.overview-chart-axis-full {
  opacity: 0;
  transition: opacity 0.12s;
}

.overview-chart-axis-short {
  transition: opacity 0.12s;
}

.overview-chart-bar:hover .overview-chart-axis-short,
.overview-chart-bar.is-selected .overview-chart-axis-short,
.overview-chart-line-point:hover .overview-chart-axis-short,
.overview-chart-line-point.is-selected .overview-chart-axis-short {
  opacity: 0;
}

.overview-chart-bar:hover .overview-chart-axis-full,
.overview-chart-bar.is-selected .overview-chart-axis-full,
.overview-chart-line-point:hover .overview-chart-axis-full,
.overview-chart-line-point.is-selected .overview-chart-axis-full {
  opacity: 1;
  font-weight: 700;
  fill: var(--chart-color, var(--text-1, #0f172a));
}

/* Phase M.5 v3.6 + v3.8 + v3.9 — line-chart точка: hover увеличивает +
   bold значение + еле видная вертикальная пунктирная линия.
   Selected месяц = orange dot + opacity 0.22 на vline. */
.overview-chart-line-point {
  cursor: pointer;
}

.overview-chart-vline {
  transition: opacity 0.15s;
}

.overview-chart-line-point:hover .overview-chart-vline {
  opacity: 0.22 !important;
}

.overview-chart-line-point .overview-chart-dot {
  transition: r 0.15s, stroke-width 0.15s, fill 0.15s;
}

.overview-chart-line-point:hover .overview-chart-dot {
  r: 5;
  stroke: #fff;
  stroke-width: 2;
}

.overview-chart-line-point.is-selected .overview-chart-value-label {
  font-weight: 700;
}

.overview-chart-line-point:hover .overview-chart-value-label {
  font-weight: 700;
}

.overview-chart-axis {
  font-size: 10px;
  fill: var(--text-2, #64748b);
}

.overview-chart-value-label {
  font-size: 10px;
  font-weight: 600;
  fill: var(--text-1, #0f172a);
  font-variant-numeric: tabular-nums;
}

/* Phase M.5 v3.11 — Year-mode avg reference label на чартах. */
.overview-chart-avg-label {
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* Invoices card */
.overview-invoices-card {
  display: flex;
  flex-direction: column;
}

.overview-invoice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.overview-invoice-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border, #f1f5f9);
  font-size: 13px;
}

.overview-invoice-row:first-child {
  border-top: 0;
}

/* Полноширинная карточка «Счета месяца» (после удаления «Состояние месяца»):
   список в две колонки, чтобы не растягивался редкими строками. */
.overview-invoices-card--wide .overview-invoice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
.overview-invoices-card--wide .overview-invoice-row:nth-child(-n+2) {
  border-top: 0;
}

.overview-invoice-row[data-tone="muted"] {
  color: var(--text-2, #64748b);
}

.overview-invoice-name {
  font-weight: 500;
  color: var(--text-1, #0f172a);
}

.overview-invoice-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* E.1: empty-text — лёгкий пояснительный параграф под empty-state.
   Используется вместе с .cta-link чтобы сначала объяснить, что нужно
   настроить, а потом дать ссылку. */
.empty-text {
  margin: 8px 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2, #64748b);
}

/* A.3 / E.1: CTA-link для empty-state. Не button-pill, а
   text-link с accent-цветом и underline-on-hover. */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--u-accent, #605bff);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border-radius: 4px;
}

.cta-link:hover,
.cta-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: 2px solid transparent;
}

.cta-link:focus-visible {
  outline-color: var(--u-accent, #605bff);
  outline-offset: 2px;
}

/* 2026-05-23 ui-followup #6А: empty-state-card — универсальный card
   для empty states по design system. Icon (emoji или SVG), title,
   description, primary CTA. Центрированный, на neutral surface, с
   dashed border для «pending setup» интонации. */
.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: var(--u-surface, #fff);
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 10px;
  text-align: center;
}

.empty-state-icon {
  font-size: 36px;
  line-height: 1;
  opacity: 0.55;
  margin-bottom: 4px;
}

.empty-state-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.empty-state-desc {
  margin: 0;
  max-width: 480px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2, #64748b);
}

.empty-state-card .btn-primary {
  margin-top: 6px;
}

.overview-invoice-empty {
  padding: 12px 8px;
}

.overview-invoice-empty-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

/* Phase M.5 — sparkline (мини-график тренда 12 месяцев) на metric-картах. */
.metric-sparkline {
  display: block;
  width: 100%;
  height: 24px;
  color: var(--accent-1, #6366f1);
  margin-top: 4px;
}

/* Phase M.6 — sparkline на rent-hub KPI карточках. */
.rent-hub-kpi-sparkline {
  display: block;
  width: 100%;
  height: 22px;
  color: var(--accent-1, #6366f1);
  margin-top: 6px;
}

/* Phase M.7 — Сводный финрезультат → Обзор: KPI hero ряд с sparklines.
   Featured карточка («Итог») визуально выделена крупнее. */
.combined-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 1200px) {
  .combined-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .combined-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.combined-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  min-width: 0;
  color: var(--accent-1, #6366f1);
}

.combined-kpi-card[data-tone="ok"] { color: #16a34a; }
.combined-kpi-card[data-tone="warn"] { color: #b45309; }
.combined-kpi-card[data-tone="info"] { color: #6366f1; }

.combined-kpi-card.is-featured {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0.02));
  border-color: rgba(99, 102, 241, 0.3);
  grid-column: span 1;
}

.combined-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #64748b);
  font-weight: 600;
}

.combined-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1, #0f172a);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.combined-kpi-card.is-featured .combined-kpi-value {
  font-size: 22px;
}

.combined-kpi-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2, #64748b);
}

/* Phase M.5 — компактный details cell: 1-строчная сводка + expand-кнопка. */
.audit-details-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-summary-line {
  display: inline-block;
  color: var(--text-1, #0f172a);
  word-break: break-word;
  line-height: 1.4;
}

.audit-expand-btn {
  align-self: flex-start;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.audit-expand-btn:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(99, 102, 241, 0.3);
}

/* Phase J.9 — журнал действий: metadata рендерится как
   определение-список вместо «k: v; k: v» строки. dt/dd идут парами
   в две колонки, длинные значения переносятся внутри своей ячейки. */
.audit-metadata-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.audit-metadata-list dt {
  font-weight: 600;
  color: var(--text-2, #64748b);
  white-space: nowrap;
}

.audit-metadata-list dd {
  margin: 0;
  color: var(--text-1, #0f172a);
  word-break: break-word;
}

/* ===== Показания · новые (input_v2) ================================ */

.input-v2-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Электр. panel — anchor для sticky panel-head: при скролле длинных
   таблиц заголовок «Электр.» с кнопкой «Скрыть стартовые показания»
   едет с topbar. Scoped к input-v2 wrapper — на других страницах
   panel-head остаётся обычным. z-index ниже topbar:1800. */
.input-v2-electricity-panel > .panel {
  /* Глобальное .panel { overflow: hidden } для round-corners ломает
     position: sticky у дочерних элементов — sticky требует, чтобы у
     scrolling ancestor не было clipping context. Здесь снимаем clip
     точечно (border-radius всё ещё работает, обрезание ничего не
     теряет — таблица сама не выходит за рамку панели). */
  overflow: visible;
}

.input-v2-electricity-panel .panel-head {
  position: sticky;
  top: var(--topbar-height, 80px);
  z-index: 5;
}

.input-v2-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--u-warn, #c2701b);
  background: color-mix(in srgb, var(--u-warn, #c2701b) 8%, var(--u-surface, #fff));
  border-radius: 10px;
  font-size: 13px;
}

.input-v2-banner.is-closed {
  border-color: var(--text-2, #64748b);
  background: color-mix(in srgb, var(--text-2, #64748b) 6%, var(--u-surface, #fff));
}

.input-v2-banner-title {
  font-weight: 600;
}

.input-v2-banner-text {
  color: var(--text-2, #64748b);
}

.input-v2-kpi-bar {
  display: grid;
  /* v2.4: auto-fit вместо fixed 4 — «Покрыто солнцем» может быть скрыта
   * для объектов без солнца, и оставшиеся 3 карты должны заполнить
   * ширину равномерно. auto-fit с minmax даёт responsive поведение
   * без отдельного media query. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* v2.1: уменьшенный padding/font для KPI — меньше вертикального места. */
.input-v2-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
}

.input-v2-kpi-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.input-v2-kpi-value {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.input-v2-kpi-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2, #64748b);
  margin-left: 2px;
}

.input-v2-kpi-meta {
  font-size: 12px;
  color: var(--text-2, #64748b);
  min-height: 16px;
}

.input-v2-kpi-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}

.input-v2-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-2, #64748b);
}

/* A11y fix #5: затемнённый ready-зелёный для AA-контраста (>=4.5:1 на
   светло-зелёном фоне). Был #16a34a (3.0:1) → стал #0f6b34 (5.3:1). */
.input-v2-kpi-status.is-status-ready {
  color: #0f6b34;
  background: color-mix(in srgb, var(--accent-green, #16a34a) 14%, transparent);
}

.input-v2-kpi-status.is-status-ready .input-v2-status-dot {
  background: var(--accent-green, #16a34a);
}

.input-v2-kpi-status.is-status-check {
  color: var(--u-warn, #b45309);
  background: color-mix(in srgb, var(--u-warn, #c2701b) 14%, transparent);
}

.input-v2-kpi-status.is-status-check .input-v2-status-dot {
  background: var(--u-warn, #c2701b);
}

.input-v2-kpi-status.is-status-blocked {
  color: var(--u-error, #b91c1c);
  background: color-mix(in srgb, var(--u-error, #dc2626) 12%, transparent);
}

.input-v2-kpi-status.is-status-blocked .input-v2-status-dot {
  background: var(--u-error, #dc2626);
}

.input-v2-kpi-status.is-status-new {
  color: var(--text-2, #64748b);
  background: color-mix(in srgb, var(--text-2, #64748b) 10%, transparent);
}

.input-v2-kpi-status.is-status-new .input-v2-status-dot {
  background: var(--text-2, #64748b);
  opacity: 0.5;
}

.input-v2-section {
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
}

.input-v2-section-header {
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.input-v2-section-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.input-v2-table-wrap {
  overflow-x: auto;
}

.input-v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.input-v2-table thead th {
  position: sticky;
  top: 0;
  background: var(--u-surface, #fff);
  font-weight: 500;
  font-size: 11px;
  color: var(--text-2, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  vertical-align: bottom;
}

.input-v2-table th.input-v2-row-label-head {
  text-align: left;
  padding-left: 14px;
  width: 180px;
  min-width: 180px;
  /* v2.4: top-left угол sticky (top + left). Пересечение sticky-top
     col-headers и sticky-left row-labels — z-index выше обоих, чтобы
     при горизонтальном скролле текст не просвечивал. */
  left: 0;
  z-index: 3;
}

.input-v2-col-header {
  width: 86px;
  min-width: 86px;
}

/* v2: 3 видимых уровня — default «таблетка» с лёгким бордером, hover
   усилен, selected ярко выделен. Owner ловил «всё сливается» в v1. */
.input-v2-col-pick {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 4px;
  background: transparent;
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  font: inherit;
  color: var(--text-2, #64748b);
  border-radius: 6px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.input-v2-col-pick:hover {
  background: color-mix(in srgb, var(--u-accent, #6366f1) 10%, transparent);
  border-color: color-mix(in srgb, var(--u-accent, #6366f1) 40%, transparent);
  color: var(--text-1, #0f172a);
}

.input-v2-col-header.is-selected .input-v2-col-pick {
  background: color-mix(in srgb, var(--u-accent, #6366f1) 16%, transparent);
  border-color: var(--u-accent, #6366f1);
  color: var(--u-accent, #6366f1);
  font-weight: 600;
  /* Кольцо вокруг активной пиллы — owner иначе не понимает, что
     остальные месяцы потому readonly, что они не выбраны. */
  box-shadow: 0 0 0 2px var(--u-accent, #6366f1);
}

/* Закрытый месяц: БЕЗ заливок. Только замок в шапке + тонкая верхняя полоска
   цвета выделения (не новый цвет). Значения чуть приглушены (75%, см. ячейку).
   Невыбранный закрытый — полоска сверху пилюли. Выбранный — своё кольцо. */
.input-v2-col-header.is-closed:not(.is-selected) .input-v2-col-pick {
  box-shadow: inset 0 2px 0 var(--u-accent, #6366f1);
}

.input-v2-col-name {
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* 2026-05-23 ui-followup #5: pill месяца + дата снятия — вертикальный
   stack. Pill (button) сверху, дата (отдельная кнопка) сразу под ним.
   Stack компактный, нет gap'ов «прыжков» при смене выбранного месяца. */
.input-v2-col-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

/* E·В2 (2026-06-17): дата снятия — кнопка-chip под месяцем. Ряд дат рендерится
   только в ВЕРХНЕМ блоке (showDate), дубля по блокам больше нет. Chip явно
   кликабелен (рамка + accent) — не путается с пассивной подписью, как раньше. */
.input-v2-col-date-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin-top: 3px;
  padding: 2px 4px;
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: var(--u-accent, #6366f1);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.input-v2-col-date-link svg {
  flex: 0 0 auto;
  opacity: 0.8;
}
.input-v2-col-date-link.is-empty {
  color: var(--text-2, #64748b);
  font-weight: 500;
  border-style: dashed;
}
.input-v2-col-date-link:hover,
.input-v2-col-date-link:focus-visible {
  border-color: var(--u-accent, #6366f1);
  background: color-mix(in srgb, var(--u-accent, #6366f1) 8%, transparent);
  outline: none;
}
.input-v2-col-date-link:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ADR-0055 — панель закрытия месяца на вкладке Контроль. .panel-body без
   базового padding (панели опираются на контент), поэтому отступы — здесь. */
.control-close-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
}
.control-close-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2, #64748b);
}
.control-close-select {
  min-width: 150px;
}

.input-v2-row-label {
  text-align: left;
  padding: 8px 12px 8px 14px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-1, #0f172a);
  vertical-align: middle;
  background: var(--u-surface, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 50%, transparent);
  /* v2.4: первая колонка sticky при горизонтальном скролле. Сохраняем
     контекст какой именно строки сейчас в фокусе. Background обязателен,
     чтобы перекрывать едущие ячейки. */
  position: sticky;
  left: 0;
  z-index: 2;
}

.input-v2-row-name {
  display: block;
  line-height: 1.3;
}

.input-v2-row-sub {
  display: block;
  font-size: 11px;
  color: var(--text-2, #64748b);
  font-weight: 400;
}

.input-v2-table.solar-matrix .input-v2-meter-row .solar-row-label,
.input-v2-table.solar-matrix .input-v2-sum-row .solar-row-label,
.input-v2-table.solar-matrix .input-v2-delta-row .solar-row-label,
.input-v2-table.solar-matrix .input-v2-status-row .solar-row-label {
  padding-right: 12px;
  padding-bottom: 7px;
}

.input-v2-table.solar-matrix .input-v2-meter-row .solar-row-name,
.input-v2-table.solar-matrix .input-v2-sum-row .solar-row-name,
.input-v2-table.solar-matrix .input-v2-delta-row .solar-row-name,
.input-v2-table.solar-matrix .input-v2-status-row .solar-row-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
}

.input-v2-table.solar-matrix .solar-row-meta {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: var(--u-muted, var(--u-muted, #6b7280));
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.input-v2-group-row .input-v2-group-label {
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2, #64748b);
  background: color-mix(in srgb, var(--text-2, #64748b) 5%, transparent);
  border-top: 1px solid var(--border, #e2e8f0);
}

/* v2.1: цифры центрируются под меткой месяца. Anomaly-badge ставится
   абсолютно справа — input не съёжается. */
.input-v2-cell {
  padding: 4px 4px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 50%, transparent);
  position: relative;
}

.input-v2-cell .input-v2-readonly,
.input-v2-cell output.input-v2-readonly {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.input-v2-cell .meter-cell-wrapper {
  position: relative;
  display: block;
}

/* Значок-слот — полоса по правому краю ячейки на всю высоту. Предупреждение
   «аномалия» = оранжевая полоса справа (как метка-«шапка», но справа), цифры
   не трогает. Замена «↻» = глиф по центру строки, без круглой заливки. */
.input-v2-cell .meter-cell-wrapper .meter-anomaly-slot {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
/* Аномалия → оранжевая (warn) / красная (error) «шапка» по правому краю,
   СО СКРУГЛЕНИЕМ по углам (inset-тень на скруглённой обёртке — как в мокапе). */
.input-v2-cell .meter-cell-wrapper[data-badge="warn"] {
  border-radius: 6px;
  box-shadow: inset -4px 0 0 var(--u-warn, #d97706);
}
.input-v2-cell .meter-cell-wrapper[data-badge="warn"]:has(.meter-anomaly-badge[data-severity="error"]) {
  box-shadow: inset -4px 0 0 var(--u-error, #c2362a);
}
/* badge — прозрачная зона наведения для тултипа (визуал даёт inset-тень).
   Шире самой «шапки» (8px → 20px), чтобы по тултипу было легко попасть
   мышью: 6px-полоса у края была почти недосягаема. */
.input-v2-cell .meter-cell-wrapper .meter-anomaly-badge {
  align-self: stretch;
  width: 20px;
  height: auto;
  background: transparent;
  border: 0;
  cursor: help;
  pointer-events: auto;
}
.input-v2-cell .meter-cell-wrapper .meter-anomaly-badge .meter-anomaly-dot { display: none; }
/* Замена «↻» → плоский глиф (без чипа-заливки), по центру строки, справа. */
.input-v2-cell .meter-cell-wrapper .meter-replacement-badge {
  background: transparent;
  color: var(--u-accent, #6366f1);
  min-width: auto;
  height: auto;
  margin: 0;
  padding: 0 3px;
  border-radius: 0;
  pointer-events: auto;
}
/* Резерв справа нужен только под центрированный глиф «↻». Оранжевая полоса
   аномалии — на самом краю, число центрировано её не задевает. */
.input-v2-cell .meter-cell-wrapper[data-badge="replacement"] > input.cell-input[type="text"],
.input-v2-cell .meter-cell-wrapper[data-badge="replacement"] > input.cell-input[type="number"] {
  padding-right: 16px;
}

.input-v2-cell.is-selected {
  /* v2.5: selected month column is rendered as a separate capsule inside
     the table cells. It visually matches the month button width without
     attaching to the header, and keeps row dividers quiet. */
  background: transparent;
}

.input-v2-cell.is-selected::before {
  content: "";
  position: absolute;
  inset: 0 4px;
  pointer-events: none;
  background: color-mix(in srgb, var(--u-accent, #6366f1) 8%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--u-accent, #6366f1) 38%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--u-accent, #6366f1) 38%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--u-accent, #6366f1) 18%, transparent);
}

.input-v2-table tbody tr:first-child .input-v2-cell.is-selected::before {
  border-top: 1px solid color-mix(in srgb, var(--u-accent, #6366f1) 38%, transparent);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.input-v2-table tbody tr:last-child .input-v2-cell.is-selected::before {
  border-bottom: 1px solid color-mix(in srgb, var(--u-accent, #6366f1) 38%, transparent);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.input-v2-cell.is-closed {
  /* Закрытый месяц: БЕЗ своей заливки — зебра видна как у обычных ячеек.
     Приглушаем ТОЛЬКО значение (75%), не фон, чтобы зебра осталась полной. */
}
.input-v2-cell.is-closed input,
.input-v2-cell.is-closed output,
.input-v2-cell.is-closed .input-v2-readonly {
  opacity: 0.75;
}

.input-v2-cell input {
  /* /goal item 5: stable layout — без shift при focus. box-sizing: border-box
     удерживает width: 100% даже когда browser добавляет 1px border на focus.
     Padding одинаковый для type="text" (форматированное отображение) и
     type="number" (raw на focus). Глобальный
     input.cell-input[type="number"] { padding-right: 24px } даёт spinner
     space; здесь принудительно сбрасываем — input-v2 input не имеет
     spinner-arrows (suppressed выше через inputmode и кастомное
     форматирование). */
  width: 100%;
  /* I-2: инпут (80px) вылезал за капсулу выбранного месяца — она inset 4px
     с боков (ширина ячейки − 8px), и на сжатых колонках (< ~88px) была уже
     инпута. min(100%,80px) прижимает инпут к ширине ячейки на узких колонках
     и держит компактные 80px на широких. min-width:0 — чтобы flex-инпут мог
     сжаться. Замерено на 5095: правый край инпута −4 = ровно по капсуле. */
  min-width: 0;
  max-width: min(100%, 80px);
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  color: inherit;
}

/* Task 2 (курсор с первого клика): readonly-инпут неактивного месяца НЕ
   перехватывает клик. Иначе mousedown фокусит его → focusin-churn ломает
   клик select-month → месяц не переключается (курсор застревает в readonly).
   pointer-events:none → клик проходит на td → переключение + setTimeout-фокус
   ставит курсор в активный инпут с первого клика. Проверка — реальной мышью
   (preview_click не кликает pointer-events:none, headless не воспроизводится). */
.input-v2-cell input.cell-input:read-only {
  pointer-events: none;
}
.input-v2-cell input.cell-input[type="number"],
.input-v2-cell input.cell-input[type="text"] {
  /* Сбрасываем глобальный padding-right: 24px (spinner space) — в input-v2
     ячейке spinner отключён и нужен симметричный padding, иначе текст
     смещается влево при focus (когда type переключается на number). */
  padding: 4px 6px;
}

/* Скрываем native number spinner — input-v2 использует кастомное
   форматирование, spinner добавлял бы лишний chrome и вызывал бы
   layout shift при focus. */
.input-v2-cell input[type="number"]::-webkit-outer-spin-button,
.input-v2-cell input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.input-v2-cell input[type="number"] {
  -moz-appearance: textfield;
}

.input-v2-cell input:focus {
  outline: none;
  border-color: var(--u-accent, #6366f1);
  background: var(--u-surface, #fff);
}

.input-v2-cell input:disabled {
  cursor: not-allowed;
  color: var(--text-2, #64748b);
}

.input-v2-cell.is-selected input {
  /* v2.4: input border 30% → 40% — согласовано с мягкой заливкой 8%. */
  border-color: color-mix(in srgb, var(--u-accent, #6366f1) 40%, transparent);
}

.input-v2-cell-readonly .input-v2-readonly {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text-1, #0f172a);
}

.input-v2-cell-readonly .money-explain {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
}

.input-v2-cell-readonly .money-explain .money-trace {
  position: static;
  transform: none;
  align-self: center;
}

/* v2.2: signed-tone — положительная зелёная (солнце покрыло),
   отрицательная красная (потери), ноль нейтральный. */
.input-v2-delta-row .input-v2-cell.is-tone-zero .input-v2-readonly {
  color: var(--text-2, #64748b);
  font-weight: 500;
}

.input-v2-delta-row .input-v2-cell.is-tone-positive .input-v2-readonly {
  color: #0f6b34;
  font-weight: 600;
}

.input-v2-delta-row .input-v2-cell.is-tone-negative .input-v2-readonly {
  color: var(--u-error, #b91c1c);
  font-weight: 600;
}

.input-v2-delta-row .input-v2-cell.is-tone-muted .input-v2-readonly {
  color: var(--text-2, #64748b);
}

.input-v2-sum-row .input-v2-row-label,
.input-v2-delta-row .input-v2-row-label {
  font-weight: 600;
  background: color-mix(in srgb, var(--text-2, #64748b) 3%, var(--u-surface, #fff));
}

.input-v2-sum-row,
.input-v2-delta-row {
  border-top: 1px solid var(--border, #e2e8f0);
}

.input-v2-start {
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 4px 16px;
}

.input-v2-start summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

.input-v2-start summary::-webkit-details-marker { display: none; }

.input-v2-start summary::before {
  content: "›";
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
  color: var(--text-2, #64748b);
  font-weight: 600;
}

.input-v2-start[open] summary::before {
  transform: rotate(90deg);
}

.input-v2-start-title {
  font-weight: 600;
}

.input-v2-start-summary {
  color: var(--text-2, #64748b);
  font-size: 12px;
}

.input-v2-start-body {
  padding-bottom: 12px;
}

.input-v2-start-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.input-v2-start-table th,
.input-v2-start-table td {
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 50%, transparent);
}

.input-v2-start-table th {
  text-align: left;
  font-weight: 500;
}

/* v2.1: start-toggle — отдельная кнопка в section header (НЕ в шапке
   таблицы). Колонка стартовых показаний появляется в таблице только
   когда expanded — alignment с DTEK / Солнце сохраняется. */
.input-v2-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Тоггл стартовых показаний — каретка в шапке «Счётчик» (слева от старт-
   колонки). Заменила прежнюю кнопку «Скрыть стартовые показания» справа. */
/* Счётчик-шапка: «Счётчик» слева, каретка «старт» прижата ВПРАВО (вплотную к
   старт-колонке/дате). Флекс — на ВНУТРЕННЕМ span, не на th (table-cell + flex
   глючит с высотой потомков). */
/* Ряд шапки высокий, дата-пилюля по центру th → каретку тоже по ЦЕНТРУ
   (th vertical-align:middle + align-items:center), иначе она уезжает по вертикали. */
.input-v2-table th.input-v2-row-label-head:has(.input-v2-counter-head-inner) {
  vertical-align: middle;
}
.input-v2-counter-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.input-v2-start-toggle-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 0;
  /* Высота как у пилюли месяца: те же вертикальные отступы/шрифт/бордюр,
     без жёсткого min-height (иначе каретка ниже месяца). */
  padding: 6px 11px;
  line-height: 1;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: var(--text-2, #64748b);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.input-v2-start-toggle-caret:hover,
.input-v2-start-toggle-caret:focus-visible {
  border-color: var(--u-accent, #6366f1);
  color: var(--u-accent, #6366f1);
  outline: none;
}
.input-v2-start-toggle-caret[aria-expanded="true"] {
  color: var(--u-accent, #6366f1);
  border-color: color-mix(in srgb, var(--u-accent, #6366f1) 40%, var(--border, #e2e8f0));
}

/* E2/L-A (2026-06-18): старт-колонка = столбец месяца. «Старт» сверху
   (пилюля-метка) + дата снизу. Нормальная ширина, в линию с месяцами.
   Распорка (.input-v2-start-spacer) — пустая колонка в блоках без старта
   (DTEK), чтобы месяцы стояли в одну вертикаль по всей странице. */
/* Старт-колонка = пилюля как месяц (та же ширина/высота/форма): ТОЛЬКО дата
   (слово «Старт» не дублируем — оно в каретке слева). Клик → пикер даты. */
.input-v2-start-col {
  width: 92px;
  min-width: 92px;
}
.input-v2-start-pick {
  font-variant-numeric: tabular-nums;
}
.input-v2-start-pick-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--u-accent, #6366f1);
}
.input-v2-start-spacer {
  background: transparent;
  border-top: 0;
}

/* v2.3a: статус-строка внизу каждой таблицы (как колонка «Проверка» в renderInput). */
.input-v2-status-row .input-v2-cell-status {
  padding: 4px 2px;
  text-align: center;
  vertical-align: middle;
}

.input-v2-status-row .input-v2-row-label {
  font-weight: 600;
  background: color-mix(in srgb, var(--text-2, #64748b) 3%, var(--u-surface, #fff));
}

/* v2.3a: lock-бейдж в шапке закрытых месяцев (visible для всех закрытых,
   не только selected). */
.input-v2-col-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--text-2, #64748b);
  opacity: 0.85;
  vertical-align: middle;
}
.input-v2-col-lock svg { display: block; }

/* v2.4: scoped — CHECK/READY pills в input_v2 status row делаем тише.
   Глобальный .status оставляем для overview/rent/combined как есть. */
.input-v2-cell-status .status {
  border-color: transparent;
  background: transparent;
  font-size: 11px;
  padding: 1px 6px;
  min-width: 0;
}
.input-v2-cell-status .status.ok {
  color: var(--text-2, #64748b);
}
.input-v2-cell-status .status.warn {
  color: var(--u-warn, #b45309);
  background: color-mix(in srgb, var(--u-warn, #c2701b) 8%, transparent);
}
.input-v2-cell-status .status.error {
  color: var(--u-error, #b91c1c);
  background: color-mix(in srgb, var(--u-error, #dc2626) 8%, transparent);
}

/* v2.4: row hover — при наведении любая строка таблицы тинтуется accent-ом,
   чтобы глаз не «терялся» при чтении длинных горизонтальных строк. Это
   касается ручных input rows и расчётных sum/delta/status rows. is-selected
   ячейки сохраняют свой accent, чтобы выбранный месяц оставался главным. */
.input-v2-table tbody tr:hover .input-v2-row-label,
.input-v2-table tbody tr:hover .input-v2-group-label {
  background-color: color-mix(in srgb, var(--u-accent, #6366f1) 4%, var(--u-surface, #fff));
}

.input-v2-table tbody tr:hover .input-v2-cell:not(.is-selected):not(.is-closed),
.input-v2-table tbody tr:hover .input-v2-start-cell:not(.is-closed) {
  background-color: color-mix(in srgb, var(--u-accent, #6366f1) 4%, transparent);
}

.input-v2-start-cell {
  padding: 4px 2px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 50%, transparent);
  /* Без своего background — зебра .solar-matrix tr:nth-child(odd/even)
     красит и .input-v2-cell, и .input-v2-start-cell одинаково, чтобы
     СТАРТ-колонка не выпадала оттенком. */
  width: 96px;
  min-width: 96px;
  text-align: center;
}

.input-v2-start-cell input {
  width: 100%;
  max-width: 86px;
  padding: 4px 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
}

.input-v2-start-cell input:focus {
  border-color: var(--u-accent, #6366f1);
  background: var(--u-surface, #fff);
  outline: none;
}

.input-v2-start-cell.is-na {
  background: transparent;
}

.input-v2-start-cell.is-na .meter-no-start {
  font-size: 10px;
  font-style: italic;
}

/* Дата под label месяца («МАЙ 01.06»). */
.input-v2-col-date {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-2, #64748b);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Y5: editable date input под label выбранного месяца. Компактный,
   подключён к autosave через data-month + data-field="date". */
.input-v2-col-date-input {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 2px 4px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--u-surface, #fff);
  color: var(--text-2, #64748b);
  border-radius: 3px;
  cursor: text;
}
.input-v2-col-date-input:focus {
  outline: none;
  border-color: var(--u-accent, #6366f1);
  color: var(--text-1, #0f172a);
}
.input-v2-col-header.is-closed .input-v2-col-date-input {
  opacity: 0.55;
  cursor: not-allowed;
}

/* A11y helper: visually hidden, но доступно screen-reader'у. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oblik-modal-card.setup-wizard {
  max-width: 1080px;
  width: min(1080px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.setup-wizard-header {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
}
.setup-wizard-header p {
  margin: 0;
  max-width: 700px;
  color: var(--u-muted, #64748b);
  line-height: 1.45;
}

.setup-wizard-shell {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.setup-wizard-main {
  min-width: 0;
}

.setup-wizard-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-wizard-step {
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  text-align: left;
}

.setup-wizard-body {
  min-height: 330px;
}

.setup-wizard-panel {
  display: grid;
  gap: 14px;
}
.setup-wizard-panel > .btn {
  justify-self: start;
}

.setup-wizard-panel h4 {
  margin: 0;
  font-size: 16px;
}

.setup-wizard-panel p {
  margin: -6px 0 0;
  color: var(--u-muted, #64748b);
}

.setup-wizard-catalog,
.setup-wizard-list {
  display: grid;
  gap: 8px;
}

.setup-wizard-catalog {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

.setup-wizard-check,
.setup-wizard-provider,
.setup-wizard-row,
.setup-wizard-inline-fields {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.setup-wizard-check {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--u-surface, #fff);
}

.setup-wizard-check small,
.setup-wizard-provider span,
.setup-wizard-inline-fields span,
.setup-wizard-inline-fields small {
  display: block;
  color: var(--u-muted, #64748b);
}
.setup-wizard-check strong,
.setup-wizard-provider strong {
  display: block;
  color: var(--u-ink, #0f172a);
}
.setup-wizard-check small,
.setup-wizard-provider small {
  line-height: 1.35;
}

.setup-wizard-row {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) 36px;
}

.setup-wizard-provider,
.setup-wizard-inline-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.setup-wizard-provider-choice {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.setup-wizard-inline-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.setup-wizard-role-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
}

.setup-wizard-provider-note {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 8px;
  background: color-mix(in srgb, var(--u-accent, #6366f1) 5%, var(--u-surface, #fff));
}
.setup-wizard-provider-note span {
  color: var(--u-muted, #64748b);
  line-height: 1.4;
}

.setup-wizard-note {
  margin-top: 4px;
}

.setup-wizard-matrix,
.setup-wizard-meter-list,
.setup-wizard-review {
  display: grid;
  gap: 8px;
}

.setup-wizard-matrix {
  overflow: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}

.setup-wizard-matrix-head,
.setup-wizard-matrix-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(var(--setup-wizard-service-count, 4), minmax(112px, 1fr));
  gap: 0;
  min-width: 620px;
}

.setup-wizard-matrix-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--muted-surface, #f8fafc);
  color: var(--u-muted, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.setup-wizard-matrix-head span,
.setup-wizard-matrix-row > strong,
.setup-wizard-matrix-cell {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft, #eef2f7);
}

.setup-wizard-matrix-row > strong {
  color: var(--text-1, #0f172a);
}

.setup-wizard-matrix-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2, #475569);
}

.setup-wizard-matrix-toggle {
  width: auto;
  height: auto;
  justify-content: flex-start;
  place-items: center start;
}

.setup-wizard-matrix-toggle .toggle-track {
  flex: 0 0 auto;
  pointer-events: none;
}

.setup-wizard-toggle-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-wizard-investor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 20px 36px;
  gap: 8px;
  align-items: center;
}

.setup-wizard-percent {
  color: var(--u-muted, #64748b);
  font-weight: 700;
}

.setup-wizard-meter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--u-surface, #fff);
}

.setup-wizard-meter-row strong,
.setup-wizard-meter-row small {
  display: block;
}

.setup-wizard-meter-row small {
  color: var(--u-muted, #64748b);
}

.setup-wizard-review {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.setup-wizard-review > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--muted-surface, #f8fafc);
}

.setup-wizard-review strong {
  color: var(--u-accent, #6366f1);
  font-size: 20px;
  line-height: 1;
}

.setup-wizard-review span {
  color: var(--u-muted, #64748b);
  font-size: 12px;
  line-height: 1.25;
}

.setup-wizard-custom {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.setup-wizard .oblik-modal-actions {
  position: sticky;
  bottom: -18px;
  margin: 16px -2px -2px;
  padding-top: 12px;
  background: linear-gradient(to bottom, transparent, var(--u-surface, #fff) 22%);
}

.setup-progress-banner {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--u-surface, #fff);
  box-shadow: var(--u-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.settings-grid > .setup-progress-banner {
  margin-bottom: 0;
}

.setup-progress-banner.is-compact {
  padding: 10px 14px;
}

/* #19 Phase 1 (audit 2026-05-22 issue #4): collapsed state — только head с
   summary + toggle. Body со списком rows скрыт. */
.setup-progress-banner.is-collapsed {
  padding: 10px 14px;
}

.setup-progress-banner.is-collapsed .setup-progress-body {
  display: none;
}

.setup-progress-summary .setup-progress-toggle {
  margin-left: 6px;
}

/* slice 3.1 v3: setup nudge получает accent left border + accent-soft
   bg как .sg-callout (но preserves layout with status dot + button). */
.setup-overview-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 0;
  border-left: 3px solid var(--u-accent);
  border-radius: var(--u-radius-sm);
  background: var(--u-accent-soft);
  box-shadow: none;
}

.setup-overview-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.setup-overview-copy small {
  color: var(--u-muted, #64748b);
}

.setup-progress-title,
.setup-progress-head,
.setup-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setup-progress-title .control-dot-wrap,
.setup-progress-row > .control-dot-wrap {
  width: 16px;
  flex: 0 0 16px;
}

.setup-progress-head {
  justify-content: space-between;
}

.setup-progress-head div:first-child {
  display: grid;
  gap: 2px;
}

.setup-progress-head span,
.setup-progress-row small {
  color: var(--u-muted, #64748b);
}

.setup-progress-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--u-muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.setup-progress-summary strong,
.setup-progress-percent {
  font-weight: 700;
  color: var(--u-accent, #6366f1);
  font-variant-numeric: tabular-nums;
}

.setup-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted, #f1f5f9);
}

.setup-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--u-accent, #6366f1);
}

.setup-progress-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.setup-progress-row {
  width: 100%;
  min-height: 56px;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--u-surface, #fff);
  cursor: pointer;
}

.setup-progress-row:hover {
  border-color: var(--u-accent, #6366f1);
  background: color-mix(in srgb, var(--u-accent, #6366f1) 5%, var(--u-surface, #fff));
}

.setup-progress-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.setup-progress-row em {
  margin-left: auto;
  font-style: normal;
  font-weight: 700;
  color: var(--u-accent, #6366f1);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .setup-wizard-shell {
    grid-template-columns: 1fr;
  }
  .setup-wizard-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .setup-wizard-step {
    justify-content: center;
    text-align: center;
  }
  .setup-wizard-catalog,
  .setup-wizard-meter-row,
  .setup-wizard-review,
  .setup-progress-rows {
    grid-template-columns: 1fr;
  }
}

.settings-empty-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: color-mix(in srgb, var(--u-muted, #64748b) 6%, var(--u-surface, #fff));
  color: var(--u-muted, #64748b);
}

/* === #11 B Wizard rebuild — scaffolding ===
   Новый wizard создания объекта (параллельно со старым
   data-create-utility-object-form до B.8). См. spec
   docs/superpowers/specs/2026-05-21-wizard-rebuild-design.md. */
/* B.2 polish: header wizard'а с крестиком в правом верхнем углу +
   subtitle «Шаг N из M — Название». Right-padding оставляет место под
   absolute-кнопку, чтобы длинный title не подползал. */
.wizard-modal-header {
  position: relative;
  padding-right: 56px;
}

.wizard-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-step-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--u-muted, #6b7280);
  letter-spacing: 0.01em;
}

.wizard-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--u-muted, #6b7280);
  cursor: pointer;
  transition: background var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
  font-size: 0; /* убирает прежний текстовый «×»-fallback, если кэш не сбросился */
}

.wizard-close-btn:hover {
  background: var(--u-surface-2, #f1f3f7);
  color: var(--u-ink, #0f1115);
  border-color: var(--u-line, #e6e8ee);
}

.wizard-close-btn:focus-visible {
  outline: 2px solid var(--u-accent, #605bff);
  outline-offset: 2px;
}

.wizard-close-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.wizard-modal-card {
  max-width: 980px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.wizard-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.wizard-section-lead {
  font-size: 16px;
  font-weight: 600;
  color: var(--u-ink, #0f1115);
  margin: 0 0 20px;
}
.wizard-type-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wizard-type-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--u-surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--u-ink, #0f1115);
  transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.wizard-type-card:hover,
.wizard-type-card:focus-visible {
  border-color: var(--u-accent, #4f46e5);
  box-shadow: 0 0 0 1px var(--u-accent, #4f46e5);
  outline: none;
}
.wizard-type-card-icon {
  font-size: 32px;
  line-height: 1;
}
.wizard-type-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--u-ink, #0f1115);
}
.wizard-type-card-description {
  font-size: 13px;
  line-height: 1.4;
  color: var(--u-muted, #64748b);
}
.wizard-step-placeholder {
  padding: 60px 20px;
  text-align: center;
  color: var(--u-muted, #64748b);
  background: var(--u-surface-2, #f7f7fb);
  border-radius: 6px;
  margin: 0 0 20px;
}
.wizard-progress-bar {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
}
.wizard-progress-bar-segment {
  flex: 1;
  height: 4px;
  background: var(--border, #e2e8f0);
  border-radius: 2px;
  transition: background var(--u-dur-slow) var(--u-ease), box-shadow var(--u-dur-slow) var(--u-ease);
}
.wizard-progress-bar-segment.is-done {
  background: var(--u-accent, #4f46e5);
}
.wizard-progress-bar-segment.is-current {
  background: var(--u-accent, #4f46e5);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u-accent, #4f46e5) 30%, transparent);
}
.wizard-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid var(--border, #e2e8f0);
  background: var(--u-surface, #fff);
}

/* B.2 — Шаг 1 (Название). Lead уже отстилен через .wizard-section-lead;
   ниже даём input + hint + единое поле под inline-error. */
.wizard-step-name {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wizard-section-hint {
  margin: 0;
  color: var(--u-muted, #64748b);
  font-size: 13px;
}

.wizard-name-input {
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: var(--u-surface, #fff);
  color: var(--u-ink, #0f1115);
  font-family: inherit;
}

.wizard-name-input:focus {
  outline: 2px solid var(--u-accent, #4f46e5);
  outline-offset: 1px;
  border-color: var(--u-accent, #4f46e5);
}

.wizard-validation-error {
  color: var(--u-error, #b91c1c);
  font-size: 13px;
  min-height: 18px;
}

/* P0-2/P0-3 — базовые ставки на Шаге 1 (НДС / компенсация). */
.wizard-base-rates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.wizard-rate-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.wizard-rate-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 150px;
}
.wizard-rate-field > span {
  font-size: 13px;
  color: var(--u-muted, #64748b);
}

/* Защита от двойного НДС — предупреждение при включённой «Строке НДС» в шаблоне. */
.template-vat-warning {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
}

/* B.6 — Шаг «Счётчики». Один service-block на каждую eligible услугу
   (distribution=показания). Header: имя услуги + tag статус (✓ или
   «Добавьте вводной»). Table: 5 колонок (Назначение / Имя / Номер /
   Участник / actions). Под — кнопка «+ Добавить счётчик». */
.wizard-step-counters {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wizard-counters-service-block {
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 8px;
  padding: 16px;
  background: var(--u-surface, #fff);
}

.wizard-counters-service-block > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.wizard-counters-service-block > header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--u-ink, #0f1115);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* designer-pilot: info icon рядом с service title в Шаге Счётчики.
   Переиспользует .settings-role-hint визуально, добавляет hover acent. */
.wizard-counters-service-block > header h4 .settings-role-hint {
  width: 22px;
  height: 22px;
  transition: border-color var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease);
}

.wizard-counters-service-block > header h4 .settings-role-hint:hover,
.wizard-counters-service-block > header h4 .settings-role-hint:focus-visible {
  border-color: var(--u-accent, #6366f1);
  color: var(--u-accent, #6366f1);
  outline: none;
}

.wizard-counters-service-block > header .tag {
  font-size: 12px;
}

.wizard-meters-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
}

.wizard-meters-table th,
.wizard-meters-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--u-line, #e6e8ee);
  vertical-align: middle;
}

.wizard-meters-table th {
  font-size: 11px;
  color: var(--u-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
}

.wizard-meters-table tbody tr:last-child td {
  border-bottom: none;
}

.wizard-meters-table .wizard-meter-role,
.wizard-meters-table .wizard-meter-name,
.wizard-meters-table .wizard-meter-number,
.wizard-meters-table .wizard-meter-participant {
  width: 100%;
  padding: 4px 6px;
  font: inherit;
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 4px;
  background: var(--u-surface, #fff);
}

.wizard-meter-row td:last-child,
.wizard-meter-actions {
  text-align: center;
  width: 32px;
}

/* B.2 — Шаг 2 (Услуги). Таблица 2 или 3 колонок (Поставщик скрыт
   для tenant). Toggle — pill-кнопка, провайдер — обычный select. */
.wizard-step-services {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-services-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  /* 2026-05-26 fix: явное распределение колонок чтобы «Поставщик» не
     обрезался при длинных названиях провайдеров (DTEK / Розподільні
     мережі Київщини). table-layout:fixed + percentage column widths. */
  table-layout: fixed;
}

.wizard-services-table th,
.wizard-services-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  text-align: left;
  vertical-align: middle;
}

/* Column widths. tenant mode (без Поставщика) = 2 columns; primary/self
   mode (.has-provider) = 3 columns с явными widths чтобы dropdown не
   обрезался при длинных названиях провайдеров. */
.wizard-services-table.has-provider th:nth-child(1),
.wizard-services-table.has-provider td:nth-child(1) { width: 38%; }
.wizard-services-table.has-provider th:nth-child(2),
.wizard-services-table.has-provider td:nth-child(2) { width: 14%; min-width: 96px; }
.wizard-services-table.has-provider th:nth-child(3),
.wizard-services-table.has-provider td:nth-child(3) { width: 48%; min-width: 260px; }
.wizard-services-table:not(.has-provider) th:nth-child(1),
.wizard-services-table:not(.has-provider) td:nth-child(1) { width: 70%; }
.wizard-services-table:not(.has-provider) th:nth-child(2),
.wizard-services-table:not(.has-provider) td:nth-child(2) { width: 30%; min-width: 96px; }

.wizard-services-table th {
  font-weight: 600;
  color: var(--u-muted, #64748b);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.wizard-services-meta {
  color: var(--u-muted, #64748b);
  font-size: 12px;
  margin-left: 6px;
}

.wizard-services-toggle {
  font: inherit;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--u-surface, #fff);
  color: var(--u-ink, #0f1115);
  padding: 4px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 72px;
  transition: background var(--u-dur-fast) var(--u-ease), border-color var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease);
}

.wizard-services-toggle:hover {
  border-color: var(--u-accent, #4f46e5);
}

.wizard-services-toggle.is-on {
  background: var(--u-accent, #4f46e5);
  color: #fff;
  border-color: var(--u-accent, #4f46e5);
}

.wizard-services-provider {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  background: var(--u-surface, #fff);
  font: inherit;
  /* Длинные option text «обрезаются» нативно браузером, но min-width:0
     гарантирует что select не пытается расти за пределы cell. */
  text-overflow: ellipsis;
}

.wizard-services-provider-empty {
  color: var(--u-muted, #64748b);
  text-align: center;
}

/* 2026-05-25 Тема 1 / 2026-05-26 fix: radio «модель электричества» в
   отдельном full-width row под service row (colspan=3). Vertical stack
   (1fr) — текст не обрезается, не растягивает соседние columns. */
.wizard-electricity-model-row > td {
  padding: 4px 12px 12px;
  background: var(--u-surface-2, #f1f5f9);
  border-top: none !important;
}
.wizard-electricity-model {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
}
.wizard-electricity-model-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 8px;
  background: var(--u-surface, #fff);
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.wizard-electricity-model-option:hover { border-color: var(--u-accent, #6366f1); }
.wizard-electricity-model-option.is-selected {
  border-color: var(--u-accent, #6366f1);
  background: var(--u-accent-soft, rgba(99, 102, 241, 0.08));
  box-shadow: 0 0 0 1px var(--u-accent, #6366f1);
}
.wizard-electricity-model-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--u-accent, #6366f1);
  flex-shrink: 0;
}
.wizard-electricity-model-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.4;
}
.wizard-electricity-model-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--u-muted, #64748b);
  background: transparent;
  color: var(--u-muted, #64748b);
  font: 600 9px/1 -apple-system, sans-serif;
  cursor: help;
  vertical-align: middle;
  padding: 0;
}
.wizard-electricity-model-hint:hover {
  border-color: var(--u-accent, #6366f1);
  color: var(--u-accent, #6366f1);
}
.wizard-electricity-model-option strong {
  font-weight: 600;
  color: var(--u-ink, #0f172a);
  font-size: 13px;
}
.wizard-electricity-model-option small {
  font-size: 11px;
  color: var(--u-muted, #64748b);
}
.wizard-electricity-model-option.is-selected strong { color: var(--u-accent, #6366f1); }

/* 2026-05-25 Тема 2: dropdown «Тип ввода» в meter row */
.wizard-meter-kind {
  min-width: 130px;
  font-size: 12px;
}

/* B.3 — Шаг 3 «Стороны». primary mode = 3 секции через горизонтальный
   разделитель, tenant = одна секция по центру. Secondary modal живёт
   в собственном root'е и лежит поверх wizard через повышенный z-index. */
.wizard-step-stakeholders {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wizard-step-stakeholders-tenant {
  /* Tenant mode — одна секция, центрируем содержимое и расширяем select. */
  max-width: 520px;
  margin: 0 auto;
}

.wizard-stakeholders-section {
  border-top: 1px solid var(--u-line, #e6e8ee);
  padding-top: 16px;
}

.wizard-stakeholders-section:first-child {
  border-top: none;
  padding-top: 0;
}

.wizard-stakeholders-section h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--u-ink, #0f1115);
}

.wizard-stakeholders-section .hint {
  font-size: 12px;
  color: var(--u-muted, #6b7280);
  margin: 0 0 12px;
}

.wizard-stakeholders-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wizard-stakeholder-select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 6px;
  background: var(--u-surface, #fff);
  font: inherit;
  color: var(--u-ink, #0f1115);
}

.wizard-stakeholder-select:focus {
  outline: 2px solid var(--u-accent, #605bff);
  outline-offset: 1px;
  border-color: var(--u-accent, #605bff);
}

.wizard-participants-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.wizard-participant-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) auto;
  gap: 12px;
  padding: 10px 12px;
  background: var(--u-surface-2, #f1f3f7);
  border-radius: 8px;
  align-items: center;
}

.wizard-participant-name {
  font-weight: 500;
  color: var(--u-ink, #0f1115);
}

.wizard-participant-services-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--u-ink, #0f1115);
}

.wizard-participant-services-pills label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.wizard-participants-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wizard-empty-state {
  margin: 4px 0 12px;
  color: var(--u-muted, #6b7280);
}

/* Secondary modal — поверх primary wizard'а. baseline overlay z-index
   2000, secondary поднимаем до 2100, чтобы крестик / submit / overlay-click
   ловились секондарным, а не wizard'ом, пока mini-modal открыт. */
.wizard-secondary-modal-overlay {
  z-index: 2100;
}

/* B.5 — Шаг 4 «Инвесторы». Таблица party × share_percent + sum-row.
   Sum-row тонируется: ok (зелёный) при 100.00, warn (оранжевый) при
   иной сумме, muted (серый) когда инвесторов ещё нет. */
.wizard-step-investors {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-investors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wizard-investors-table th,
.wizard-investors-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--u-line, #e6e8ee);
  vertical-align: middle;
  text-align: left;
}

.wizard-investors-table th {
  color: var(--u-muted, #6b7280);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.wizard-investor-name {
  font-weight: 500;
}

.wizard-investor-share {
  width: 1%;
  white-space: nowrap;
}

.wizard-investor-share-input {
  width: 88px;
  padding: 6px 8px;
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 6px;
  background: var(--u-surface, #fff);
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.wizard-investor-share-input:focus {
  outline: 2px solid var(--u-accent, #605bff);
  outline-offset: 1px;
  border-color: var(--u-accent, #605bff);
}

.wizard-investor-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.wizard-investors-sum-row td {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--u-surface-2, #f1f3f7);
}

.wizard-investors-sum-row.is-ok td {
  color: var(--u-ok, #1c8e5a);
  background: var(--u-ok-soft, #e8f5ee);
}

.wizard-investors-sum-row.is-warn td {
  color: var(--u-warn, #c2701b);
  background: var(--u-warn-soft, #fff2dd);
}

.wizard-investors-sum-row.is-muted td {
  color: var(--u-muted, #6b7280);
}

.wizard-investors-sum-hint {
  margin: 0;
  font-size: 12px;
  color: var(--u-muted, #6b7280);
}

.wizard-investors-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wizard-investors-add .wizard-stakeholder-select {
  flex: 1;
}

/* B.7 — Шаг «Маршруты денег + Правила счетов» (ADR-0017). Таблица routes
   expanded, invoice rules matrix — collapsed details. Использует те же
   токены что counters/investors. */
.wizard-step-routes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* T-C-1/C-2: self_billable checkbox для self-mode wizard. */
.wizard-self-billable-row {
  padding: 12px 16px;
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: 8px;
  background: var(--u-accent-soft, #eeedff);
}

.wizard-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.wizard-checkbox-row input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
}

.wizard-checkbox-row > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.wizard-checkbox-row strong {
  font-weight: 600;
  color: var(--text-1, #0f172a);
}

.wizard-routes-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--u-ink, #0f1115);
  margin: 0 0 8px;
}

.wizard-routes-section-title-inline {
  display: inline;
  font-size: 14px;
  font-weight: 600;
  color: var(--u-ink, #0f1115);
}

.wizard-routes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wizard-routes-table th,
.wizard-routes-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--u-line, #e6e8ee);
  vertical-align: middle;
  text-align: left;
}

.wizard-routes-table th {
  font-size: 11px;
  color: var(--u-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.wizard-routes-table td.numeric,
.wizard-routes-table th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wizard-routes-table tbody tr:last-child td {
  border-bottom: none;
}

.wizard-route-row.is-inactive td {
  opacity: 0.55;
}

.wizard-route-actions {
  white-space: nowrap;
  text-align: right;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.wizard-invoice-rules-matrix {
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--u-surface, #fff);
}

.wizard-invoice-rules-matrix summary {
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
}

.wizard-invoice-rules-matrix summary::-webkit-details-marker {
  display: none;
}

.wizard-invoice-rules-matrix[open] summary {
  border-bottom: 1px solid var(--u-line, #e6e8ee);
}

.wizard-invoice-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0;
}

.wizard-invoice-matrix-table th,
.wizard-invoice-matrix-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--u-line, #e6e8ee);
  vertical-align: middle;
}

.wizard-invoice-matrix-table th {
  font-size: 11px;
  color: var(--u-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-align: left;
}

.wizard-invoice-matrix-table tbody tr:last-child td {
  border-bottom: none;
}

.wizard-invoice-matrix-table td.numeric {
  text-align: center;
}

.wizard-routes-actions {
  display: flex;
  gap: 8px;
}

/* #12.A hotfix: compact year action buttons + modal year picker. */
.years-section-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.year-picker-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  min-width: 320px;
  max-width: 420px;
}

.year-picker-card .oblik-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.year-picker-card .oblik-modal-hint {
  margin: 0;
  color: var(--u-muted, #6b7280);
  font-size: 13px;
}

.year-picker-card .year-picker-input {
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 6px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}

.year-picker-card .oblik-modal-error {
  color: var(--u-warn, #c2701b);
  font-size: 12px;
  min-height: 16px;
}

.year-picker-card .oblik-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* B.8 polish-2: warning bar когда routes устарели (состав изменился)
   и есть manual edits — silent regen skipped, owner должен явно
   нажать «Перегенерировать всё». */
.wizard-routes-stale-warning {
  padding: 10px 12px;
  margin: 8px 0;
  border-radius: 6px;
  background: var(--u-warn-soft, #fff2dd);
  color: var(--u-warn, #c2701b);
  font-size: 13px;
  line-height: 1.4;
}

/* B.7 polish — edit party button (pencil) рядом с select/row. */
.wizard-edit-party-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--u-line, #e6e8ee);
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--u-muted, #6b7280);
  padding: 0;
  transition: background var(--u-dur-fast) var(--u-ease), border-color var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease);
}

.wizard-edit-party-btn:hover {
  background: var(--u-surface-2, #f7f7fb);
  color: var(--u-ink, #0f1115);
  border-color: var(--u-accent, #605bff);
}

.wizard-edit-party-btn:focus-visible {
  outline: 2px solid var(--u-accent, #605bff);
  outline-offset: 1px;
}

.wizard-edit-party-btn svg {
  width: 13px;
  height: 13px;
}

/* B.8 — Шаг «Проверка» (review). Read-only preview всех собранных данных
   + большая primary кнопка «Создать объект». */
.wizard-step-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard-review-section {
  border: 1px solid var(--u-line, #e6e8ee);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--u-surface, #fff);
}

.wizard-review-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.wizard-review-section p,
.wizard-review-section ul {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--u-ink, #0f1115);
}

.wizard-review-section ul {
  padding-left: 20px;
}

.wizard-review-sub {
  margin: 6px 0;
}

.wizard-review-sub summary {
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
}

.wizard-review-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.wizard-submit-btn-large {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
}

.wizard-submit-btn-large[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* B.7 polish — solar block в Шаге Счётчики (отдельный визуальный tone). */
.wizard-counters-solar-block {
  border-color: color-mix(in srgb, #facc15 35%, var(--u-line, #e6e8ee));
  background: color-mix(in srgb, #facc15 6%, var(--u-surface, #fff));
}

.wizard-counters-solar-block > header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 980px) {
  .wizard-type-cards {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   RESPONSIVE PHASE P0 (2026-05-23)
   ---------------------------------------------------------------------
   Owner constraint: desktop XL 1728 (MacBook 16) baseline неприкосновенен.
   Каждое правило ниже — guarded media query. На viewport ≥1024 layout
   НЕ меняется. Изменения только для tablet / mobile.
   Audit findings: M.S.1, M.S.2, M.S.3, M.S.4, M.S.5, M.L.1, M.L.2,
                   M.L.3, M.L.4, M.L.5, T.1, T.2, T.3.
   ===================================================================== */

/* Hamburger button в topbar — спрятан на desktop, видим только <768. */
.sidebar-drawer-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  color: var(--u-ink);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  flex-shrink: 0;
}

.sidebar-drawer-toggle:hover {
  background: var(--u-surface-2);
}

.sidebar-drawer-toggle:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
}

.sidebar-drawer-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* Backdrop overlay для drawer — невидим по умолчанию, всплывает при open.
   UX polish 2026-05-23: добавлен backdrop-filter:blur для матового эффекта
   за drawer'ом (более native ощущение). Safari/Chrome/Firefox 76+. */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.sidebar-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Overflow safeguard (P0.6 — finding cross-cutting).
   Предотвращает horizontal scroll целой страницы из-за случайного
   overflow в дочерних блоках. Не трогает internal scrolling таблиц. */
html, body {
  overflow-x: hidden;
}

/* Sticky первая колонка для year-matrix таблиц (P0.2 — M.S.3, M.L.2, T.2).
   Применяется на ВСЕХ viewport (горизонтальный scroll возможен и на
   desktop при множестве колонок). Box-shadow создаёт визуальную границу
   при горизонтальном scroll. Z-index держится ниже sticky thead (z:3 в
   `input-v2-row-label-head` уже выше). */
.input-v2-table tbody td:first-child,
.input-v2-table tbody th:first-child {
  position: sticky;
  left: 0;
  background: var(--u-surface, #fff);
  z-index: 2;
  box-shadow: 1px 0 0 var(--u-line, #e6e8ee);
}

/* Zebra-фон полос для odd/even строк должен оставаться на sticky-cell.
   Background-color: inherit берёт цвет из самой ячейки (consumer-row-label
   / solar-row-label уже имеют background через nth-child rules выше). */
.consumer-matrix tbody tr .consumer-row-label,
.solar-matrix tbody tr .solar-row-label {
  left: 0;
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Breakpoint: <1024 (tablet landscape) — topbar 2-row + main reflow.
   Перебивает legacy @980 правило `display: grid` для .topbar (line 1340).
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Topbar wraps в 2 строки: title + actions. flex с !important нужен,
     чтобы перекрыть legacy @980 grid (1-col). */
  .topbar {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 8px 12px;
    grid-template-columns: none;
  }
  .topbar .topbar-breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar .topbar-command-bar,
  .topbar .actions {
    flex: 1 1 100%;
    order: 3;
    margin-top: 4px;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------
   Breakpoint: <768 (mobile portrait + small tablet) — drawer sidebar.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Hamburger показывается. */
  .sidebar-drawer-toggle {
    display: inline-flex;
  }

  /* Грид → одна колонка, sidebar выпадает из flow. */
  .app,
  .app.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  /* Sidebar становится off-canvas drawer.
     UX polish 2026-05-23: display:flex + flex-direction:column сохраняем,
     чтобы `.sidebar-user { margin-top: auto }` приклеивал user-menu к низу
     drawer (раньше display:block ломал margin-top:auto). Sidebar overflow:
     hidden — nav scrollит внутри себя, user-menu стационарен. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    overflow: hidden;
    z-index: 1950;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* Nav scrollит сам — user-menu не уезжает вниз с контентом. */
  .sidebar > .nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }

  /* User-menu прилипает к низу drawer; margin-top:auto уже в базовом
     правиле .sidebar-user (line 6650), но дублируем чтобы перебить
     возможные @980 overrides на flex-shrink. */
  .sidebar > .sidebar-user {
    flex-shrink: 0;
    margin-top: auto;
  }

  .app.is-sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Восстановить nav как column (не horizontal scroll, как было в @980). */
  .nav {
    display: flex;
    flex-direction: column;
    overflow: visible;
    margin-top: 14px;
  }
  .nav-group {
    min-width: 0;
  }
  /* @980 rule делает .nav-children flex row для horizontal scroll —
     перебиваем обратно к grid (как на desktop) внутри drawer. */
  .nav-group.is-open .nav-children {
    display: grid;
    flex-direction: column;
    padding-left: 10px;
    margin-left: 17px;
  }
  .nav-section {
    display: block;
  }
  .nav-btn {
    white-space: normal;
    width: 100%;
    min-width: 0;
  }

  /* Main съезжает на всю ширину, без бокового padding. */
  .main {
    padding: 0;
  }

  /* Topbar в mobile — уменьшенный padding. */
  .topbar {
    padding: 8px 12px;
  }

  /* Прячем sidebar-toggle (старый «свернуть/развернуть»), хамбургер заменяет. */
  .brand-link {
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------------
   KPI grids: 2-col на 380-600, 1-col fallback на <380 (UX polish 2026-05-23).
   Owner: 1-col съедал слишком много вертикального места, 2-col на phone
   читается нормально и помещается. Только очень узкие экраны (<380) идут
   в 1-col, чтобы значения не теснили лейблы.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  .control-kpi-row,
  .combined-kpi-row,
  .overview-kpi-grid,
  .input-v2-kpi-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Очень узкие телефоны (<340) — 1-col fallback. На iPhone SE (375) ещё
   2-col работает нормально, на iPhone 5 / Galaxy Fold front display — нет. */
@media (max-width: 340px) {
  .control-kpi-row,
  .combined-kpi-row,
  .overview-kpi-grid,
  .input-v2-kpi-bar {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Modal — viewport-fixed + mobile full-screen sheet (P0.4 — M.S.5, M.L.5).
   На desktop modal остаётся центрированным card. На <600 — full-screen
   sheet без скруглений (нативный sense на phone). 100vw/100vh — не % от
   parent, чтобы не сжиматься внутри transformed контейнера.
   --------------------------------------------------------------------- */
.oblik-modal-overlay {
  /* Уже было inset: 0 + position: fixed. Подтверждаем viewport-relative size. */
  width: 100vw;
  height: 100vh;
}

@media (max-width: 600px) {
  .oblik-modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .oblik-modal-card {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------------------
   min-width: 0 hardening — flex/grid children с overflow контентом.
   Без min-width:0 flex item не сжимается ниже content min-content и
   создаёт horizontal overflow на mobile. Уже в ряде .actions / .main /
   .nav-label / .actions item-ы в коде, добавляем универсальный hook.
   --------------------------------------------------------------------- */
.main,
.main > section,
.topbar > *,
.actions > * {
  min-width: 0;
}

/* =====================================================================
   RESPONSIVE PHASE P1a (2026-05-23) — sidebar icon-rail @768-1279.
   ---------------------------------------------------------------------
   Между tablet portrait и laptop (~13"): sidebar становится узким
   icon-rail-ом (68px) автоматически — без `is-sidebar-collapsed` класса.
   На <768 уже drawer (P0); на >=1280 — full sidebar (240px). Перебиваем
   legacy @980 (line 1302 + 6021) которые делали sidebar full-width top
   stripe с horizontal-scroll nav.
   Findings: TL.3, D.1.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Grid columns: узкая rail колонка вместо 240px. */
  .app,
  .app.is-sidebar-collapsed {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  /* Sidebar back to vertical sticky pane (not the @980 top-stripe). */
  .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    overflow-x: visible;
    padding: 18px 10px;
    /* Flex-колонка (как в развёрнутом виде): height:100vh + nav flex-grow:1
       + .sidebar-user margin-top:auto прижимают карточку аккаунта к низу
       рельса. display:block ломал это (аккаунт прилипал к низу nav). */
    display: flex;
    flex-direction: column;
  }

  /* Nav возвращается к column flow (legacy @980 делал row + scroll). */
  .nav {
    display: flex;
    flex-direction: column;
    overflow: visible;
    gap: 1px;
    margin-top: 14px;
  }
  .nav-group {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .nav-section {
    display: none;
  }

  /* Brand: rail mode — только favicon, скрываем lockup. */
  .brand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0 14px;
  }
  .brand-lockup {
    display: none;
  }
  .brand-favicon {
    display: block;
    width: 30px;
    height: 30px;
  }

  /* nav-btn — icon-only, label скрыта; sub-buttons остаются tooltip
     через title attr (см. labels в index.html). */
  .nav-btn {
    justify-content: center;
    padding: 9px 0;
    width: 100%;
    min-height: 36px;
  }
  .nav-label,
  .nav-caret {
    display: none;
  }
  .nav-icon {
    width: 22px;
    height: 22px;
    font-size: 20px;
  }

  /* Sub-buttons: показываем только если родительская группа открыта
     (без caret — toggle на mode-btn click, см. existing JS). */
  .nav-children {
    padding-left: 0;
    margin-left: 0;
  }
  /* Унифицировано (2026-06-17): узкое окно теперь использует тот же режим
     is-sidebar-collapsed (JS applySidebarMode добавляет класс по ширине) —
     подпункты НЕ показываются инлайн-столбиком (он давал «сплошняк» из
     одинаковых иконок без подписей), а выезжают панелью С ПОДПИСЯМИ по
     наведению, как при ручном «Свернуть». Прежнее правило
     .nav-group.is-open .nav-children { display:grid } удалено. */
  .nav-sub-btn {
    min-height: 30px;
    padding: 6px 0;
  }

  /* User chip и sidebar-context — скрываем (нет места). User остаётся
     compact в bottom. */
  .sidebar-context,
  .sidebar-version {
    display: none;
  }
  .sidebar-user {
    padding: 8px 4px;
  }
  .sidebar-user-meta {
    display: none;
  }
  .sidebar-user-button {
    justify-content: center;
    padding: 6px 0;
  }

  /* Topbar: P0 wrap правило для @<1024 остаётся в силе — на 768-1023 он
     wrap в 2 row внутри узкого main. На 1024-1279 topbar single row
     (P0 @1023 уже не активен). Сюда специальных правил не пишем. */
}

/* =====================================================================
   RESPONSIVE PHASE P1b (2026-05-23) — touch + polish.
   ---------------------------------------------------------------------
   Findings: M.S.7 (touch targets), M.L.7 (tap-popover), M.L.8 (tabular
   nums), XL.1 (mobile labels), M.L.6 (fade-edge gradient).
   ===================================================================== */

/* P1.5 — Touch targets 44px минимум на coarse pointer (touch screens).
   На MacBook (fine pointer) ничего не меняется. iPad / touch tablet —
   buttons / pills / inputs становятся 44×44 minimum hit area. */
@media (pointer: coarse) {
  button,
  [data-action],
  .month-pill,
  .icon-button,
  .btn,
  .btn-icon,
  .topbar-action-btn,
  .nav-btn,
  .nav-sub-btn,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Inputs с padding 8px+ остаются читаемы без раздувания. */
  .cell-input,
  .oblik-modal-input,
  select,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="search"] {
    min-height: 44px;
  }
  /* Pill chips и control-dots не должны раздуваться (визуальная плотность). */
  .month-pill {
    padding: 10px 12px;
  }
}

/* P1.7 — Tabular nums для всех numeric контейнеров. На desktop visual
   diff минимален (Inter / Geist уже близко к tabular), но при пересчётах
   колонки больше не "пляшут". */
.cell-input,
.money-value,
.money-val,
.kwh-value,
[data-money],
[data-kwh],
[data-numeric],
.input-v2-cell input,
.input-v2-start-cell input {
  font-variant-numeric: tabular-nums;
}

/* P1.7b — Mobile-shortened labels. Использование:
   `<span data-mobile-label="Кор.">Корректировка</span>` — на <600 заменяет
   текст на короткий через ::before. Long-label элемент скрывается. */
@media (max-width: 600px) {
  [data-mobile-label]::before {
    content: attr(data-mobile-label);
  }
  [data-mobile-label] > .full-label,
  [data-mobile-label] .full-text {
    display: none;
  }
  /* По умолчанию контент элемента остаётся видимым; data-mobile-label
     добавляет короткий префикс. Если разработчик хочет полную замену —
     вешает class `mobile-label-replace` на родителя. */
  [data-mobile-label].mobile-label-replace {
    font-size: 0;
  }
  [data-mobile-label].mobile-label-replace::before {
    font-size: 13px;
  }
}

/* UX polish 2026-05-23 — снижаем боковые отступы на mobile.
   Default --pad-x=28px съедает 56px на 375-экране (15% ширины). На
   <640 ужимаем до 12px (24px суммарно — 6.4%). Также --pad-y, чтобы
   topbar и content не выглядели «толстыми» сверху/снизу. */
@media (max-width: 640px) {
  :root {
    --pad-x: 12px;
    --pad-y: 10px;
  }
}

/* UX polish 2026-05-23 — на <600 топбар становится компактным:
   - search-button скрыт (поиск редко нужен на mobile, доступен через
     drawer → Система → Аудит/etc если нужно)
   - period nav (Месяц/Квартал/Год) ужимается через padding/gap
   - history undo/redo группируются плотно
   - save-status показывает только dot, label hidden
   Topbar по-прежнему wrap в 2 строки (@1023 правило сохраняется).
   На MacBook (>=1024) ничего не меняется. */
@media (max-width: 599px) {
  /* Search кнопку убираем — переход к нужному разделу через drawer. */
  #topbar-search,
  .topbar-search-slot {
    display: none !important;
  }
  /* Save-status показывает только dot (label hidden). При expanded меню
     ещё видит детали. */
  .save-status .save-status-label {
    display: none;
  }
  .save-status {
    min-width: 0;
    padding: 6px;
  }
  /* Topbar context — узкая ширина чтобы не растягивать строку. */
  .topbar-context {
    max-width: 140px;
  }
  .topbar-context .context-select-value {
    max-width: 90px;
  }
  /* History группа плотнее. */
  .topbar-history {
    gap: 0;
  }
  /* Topbar action cluster — оставляем bell и settings, search скрыт выше. */
  .topbar-action-cluster {
    flex-shrink: 0;
  }
}

/* UX polish 2026-05-23 — на <1024 даже year-matrix wrap'ы должны
   позволять horizontal scroll (на desktop они hidden ради чистой подложки).
   Перебивает `.consumer-year-matrix .input-v2-table-wrap { overflow-x:
   hidden }` (line 2968) и `.solar-year-matrix` (line 3230). */
@media (max-width: 1023px) {
  .consumer-year-matrix .input-v2-table-wrap,
  .solar-year-matrix .input-v2-table-wrap,
  .input-v2-table-wrap,
  .table-wrap,
  .settings-money-table-wrap,
  .audit-table-wrap,
  .auth-users-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* P1.8 — Fade-edge gradient на scrollable tables. JS detector добавляет
   class `.has-scroll-right` когда scrollWidth > clientWidth и scroll не
   ушёл до конца. Создаёт визуальный hint что справа ещё контент. */
.input-v2-table-wrap {
  position: relative;
}

.input-v2-table-wrap.has-scroll-right::after,
.input-v2-table-wrap.has-scroll-left::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
  /* Используем opacity transition для smooth fade-in при появлении. */
  transition: opacity 0.18s ease;
}

.input-v2-table-wrap.has-scroll-right::after {
  right: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--u-surface, #fff));
}

.input-v2-table-wrap.has-scroll-left::before {
  left: 0;
  background: linear-gradient(to left, rgba(255,255,255,0), var(--u-surface, #fff));
}


/* ADR-0025 V1 inline commission editor. Все rows в едином grid layout
   (4 колонки: услуга / toggle / input / итог) — no wrap, всё в одну
   линию. Все цвета через DS токены (light/dark theme auto-flip). */
/* C6 (B.4): блок комиссии — карточка как «Ручные строки» (единый ритм),
   с явной шапкой-разделителем. Раньше был borderless с border-top —
   шапка сливалась («нет понятия где шапка»). */
.invoice-commission-editor {
  margin: 0;
  padding: 8px 10px 6px;
  background: var(--u-surface-2, #f8fafc);
  border: 1px solid var(--u-line, #e2e8f0);
  border-radius: var(--u-radius, 6px);
  /* Owner-rule: no horizontal scroll inside expansion. Контент адаптируется
     к ширине container; commission-row сама уходит в 2 строки если узко. */
  max-width: 100%;
  overflow-x: visible;
  min-width: 0;
}

.invoice-commission-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--u-line, #e2e8f0);
  min-width: 0;
}

.invoice-commission-editor-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--u-ink);
}

.invoice-commission-editor-head .muted {
  font-weight: 400;
}

.invoice-commission-editor-head .muted {
  font-size: 11px;
  white-space: normal;
  min-width: 0;
  flex: 1 1 200px;
}

.invoice-commission-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Flex-wrap layout — owner-rule: no horizontal scroll. Когда не влазит
   в одну строку — wrap во вторую без overflow. Label flex-grows на
   доступной ширине, остальные блоки прижимаются вправо. */
.invoice-commission-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  /* B6: padding-right создаёт breathing room — Фикс/% и input не липнут
     к правому краю, текст в input не «уезжает» при наборе цифр. */
  padding: 3px 8px 3px 0;
}

.invoice-commission-row > .invoice-commission-row-label {
  flex: 1 1 200px;
  min-width: 0;
}

.invoice-commission-row > :not(.invoice-commission-row-label) {
  flex: 0 0 auto;
}

/* It4.B5: label inline — service + base в одну строку (раньше column). */
.invoice-commission-row-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.invoice-commission-service {
  font-size: 13px;
  font-weight: 500;
  color: var(--u-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-commission-base {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-commission-kind-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--u-surface-2);
  border: 1px solid var(--u-line);
  border-radius: 8px;
  padding: 2px;
}

.invoice-commission-kind-btn {
  border: none;
  background: transparent;
  min-height: 24px;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--u-muted);
}

.invoice-commission-kind-btn.is-active {
  background: var(--u-surface);
  color: var(--u-accent);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.08);
}

.invoice-commission-value-label {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--u-line);
  border-radius: 8px;
}

.invoice-commission-value-input {
  border: none;
  width: 80px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  background: transparent;
  color: var(--u-ink);
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.invoice-commission-value-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--u-surface-2);
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 600;
  border-left: 1px solid var(--u-line);
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

.invoice-commission-amount-value {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--u-ink);
  text-align: right;
  white-space: nowrap;
  /* B6: резерв ширины под типичную сумму ~«12 345,60 грн». Без min-width
     элемент стартует как «—» (12px) и при наборе цифр в input раздувается
     до ~90px, утаскивая input/toggle влево. Фиксированная ширина = нет
     визуального дёрганья. */
  min-width: 100px;
}


/* ============================================================
   DETAIL-HEADER · sticky sub-header pattern (REBUILD-006 v3)
   ============================================================
   Per v3 spec section 10b: sticky shell hierarchy включает
   .detail-header — sticky под page-tabs для invoice slide-out,
   asset open view, contract detail.

   Использование (Phase 3 REBUILD-305 invoices / 308 rent assets):
     <header class="detail-header">
       <h2 class="detail-header-title">...</h2>
       <div class="detail-header-meta">...</div>
       <div class="detail-header-actions">...</div>
     </header>
   ============================================================ */

.detail-header {
  position: sticky;
  /* sit под topbar + page-tabs (topbar 61px + tabs ~40px ≈ 96px) */
  top: calc(var(--topbar-height) + 36px);
  z-index: var(--u-z-detail-header);
  display: flex;
  align-items: baseline;
  gap: var(--u-space-4);
  padding: var(--u-pad-card-y) var(--u-pad-page-x);
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-line);
  box-shadow: var(--u-shadow-sm);
}

.detail-header-title {
  margin: 0;
  font: 600 15px/1.3 var(--u-font-sans);
  color: var(--u-ink);
  letter-spacing: -0.005em;
}

.detail-header-meta {
  flex: 1 1 auto;
  display: flex;
  gap: var(--u-space-3);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--u-muted);
}

.detail-header-actions {
  display: flex;
  gap: var(--u-space-2);
  margin-left: auto;
}

/* ============================================================
   FORM FIELDS · v3 spec section 11 (REBUILD-102)
   ============================================================
   New .sg-input / .sg-input.is-money / .sg-input.is-error / .sg-select
   per v3 spec. Production existing .cell-input / .toggle-control /
   .toggle-track preserved; new helpers готовы для Phase 3 per-screen apply.
   ============================================================ */

.sg-input {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 13px;
  padding: 6px 11px;
  min-height: 30px;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-sm);
  color: var(--u-ink);
  transition: all var(--u-dur) var(--u-ease);
  width: 220px;
  max-width: 100%;
}

.sg-input:hover {
  border-color: var(--u-muted-2);
}

.sg-input:focus,
.sg-input:focus-visible {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: var(--u-ring-focus);
}

.sg-input[disabled],
.sg-input:disabled {
  background: var(--u-surface-2);
  color: var(--u-muted-2);
  cursor: not-allowed;
}

.sg-input.is-error {
  border-color: var(--u-error);
}

.sg-input.is-error:focus,
.sg-input.is-error:focus-visible {
  box-shadow: 0 0 0 3px var(--u-error-soft);
}

.sg-input.is-money {
  font-family: var(--u-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sg-select {
  font: inherit;
  font-size: 13px;
  padding: 6px 30px 6px 11px;
  min-height: 30px;
  background: var(--u-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-sm);
  color: var(--u-ink);
  width: 220px;
  max-width: 100%;
  cursor: pointer;
}

.sg-select:hover {
  border-color: var(--u-muted-2);
}

.sg-select:focus,
.sg-select:focus-visible {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: var(--u-ring-focus);
}

.sg-select[disabled],
.sg-select:disabled {
  background-color: var(--u-surface-2);
  color: var(--u-muted-2);
  cursor: not-allowed;
}

/* ============================================================
   PILL / BADGE · v3 spec section 12 (REBUILD-103)
   ============================================================
   .sg-badge pill — tones via data-tone="ok|warn|err|info|muted|prod|draft".
   Soft-fill backgrounds (v3 retains soft tokens).
   Production .tag / .invoice-state-chip / .flow-service-chip preserved.
   ============================================================ */

.sg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  background: var(--u-surface-2);
  color: var(--u-muted);
  border: 1px solid var(--u-line);
}

.sg-badge[data-tone="ok"]    { background: var(--u-ok-soft);     color: var(--u-ok);     border-color: transparent; }
.sg-badge[data-tone="warn"]  { background: var(--u-warn-soft);   color: var(--u-warn);   border-color: transparent; }
.sg-badge[data-tone="err"]   { background: var(--u-error-soft);  color: var(--u-error);  border-color: transparent; }
.sg-badge[data-tone="info"]  { background: var(--u-info-soft);   color: var(--u-info);   border-color: transparent; }
.sg-badge[data-tone="muted"] { background: var(--u-muted-soft);  color: var(--u-muted);  border-color: transparent; }
.sg-badge[data-tone="prod"]  { background: #e0f2fe;              color: #075985;         border-color: transparent; }
.sg-badge[data-tone="draft"] { background: #fef3c7;              color: #92400e;         border-color: transparent; }

/* ============================================================
   SAVE PILL · v3 spec section 11 (REBUILD-105)
   ============================================================
   3 states (saved | dirty | saving) с dot indicator.
   Saving state — pulse 1.4s. Respects prefers-reduced-motion.
   Production .save-status / .save-status-dot preserved.
   ============================================================ */

.save-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--u-surface-2);
  color: var(--u-muted);
  line-height: 1.6;
}

.save-pill[data-state="saved"]  { background: var(--u-ok-soft);    color: var(--u-ok); }
.save-pill[data-state="dirty"]  { background: var(--u-warn-soft);  color: var(--u-warn); }
.save-pill[data-state="saving"] { background: var(--u-info-soft);  color: var(--u-info); }

.save-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.save-pill[data-state="saving"] .dot {
  animation: u-save-pulse 1.4s ease-in-out infinite;
}

@keyframes u-save-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .save-pill[data-state="saving"] .dot { animation: none; }
}

/* ============================================================
   KPI · v3 spec section 07 unified (REBUILD-201)
   ============================================================
   Canonical .kpi-card primitive per v3 spec. 5 production namespaces
   (.combined-kpi-* / .control-kpi-* / .invoice-kpi-* / .overview-kpi-*
   / .u-kpi-card-*) preserved — Phase 3 per-screen rewrite постепенно
   мигрирует на этот primitive.

   Usage:
     <div class="kpi-card" data-tone="ok">
       <div class="kpi-label">Базовая аренда</div>
       <div class="kpi-value">123 456 <span class="unit">₴</span></div>
       <div class="kpi-sub">+5.2% к прошлому месяцу</div>
     </div>
   ============================================================ */

.kpi-card {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 72px;
  position: relative;
}

.kpi-card .kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--u-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kpi-card .kpi-value {
  font-size: 20px;
  font-weight: 650;
  color: var(--u-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.kpi-card .kpi-value .unit {
  font-size: 12px;
  color: var(--u-muted);
  font-weight: 500;
  margin-left: 4px;
}

.kpi-card .kpi-sub {
  font-size: 11px;
  color: var(--u-muted);
  margin-top: 1px;
}

.kpi-card .kpi-context {
  font-size: 11px;
  color: var(--u-muted-2);
  border-top: 1px dashed var(--u-line);
  padding-top: 5px;
  margin-top: 4px;
}

.kpi-card[data-tone="ok"]    { border-left: 3px solid var(--u-ok); }
.kpi-card[data-tone="warn"]  { border-left: 3px solid var(--u-warn); }
.kpi-card[data-tone="error"] { border-left: 3px solid var(--u-error); }
.kpi-card[data-tone="info"]  { border-left: 3px solid var(--u-accent); }
.kpi-card[data-tone="muted"] { border-left: 3px solid var(--u-muted-tone); opacity: 0.85; }

.kpi-card-spark {
  height: 30px;
  margin-top: 4px;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: var(--u-space-3);
}

/* KPI-RELAYOUT-001 (2026-05-25, owner feedback batch 4)
   ────────────────────────────────────────────────────────────
   Top row: label слева, delta-pct chip справа (right-aligned).
   Карточка остаётся компактной (.kpi-card 72px min-h), при этом
   процент сравнения vs прошлый период всегда виден.

   Sub-delta line: мелкий subtext под значением — либо «+X ₴ к
   прошлому месяцу» (delta), либо «Σ за N мес. · в среднем X/мес»
   (year/quarter context). */
.kpi-card .kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 14px;
}

.kpi-card .kpi-head .kpi-label,
.kpi-card .kpi-head .u-kpi-card-label {
  flex: 1 1 auto;
  min-width: 0;
}

.kpi-card .kpi-head-chip {
  flex: 0 0 auto;
  /* Compact chip variant для top-row: padding tighter, font ровно
     11px чтобы не разбалансировать высоту row. */
  font-size: 11px;
  padding: 1px 6px;
  letter-spacing: 0;
}

/* C (owner): чип-дельта + контекст («к марту») вместе в правом верхнем углу —
   контекст относится к дельте справа, а не к значению снизу. Карточка
   компактнее (sub больше не занимает отдельную строку под значением). */
.kpi-head-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  text-align: right;
  min-width: 0;
}
.kpi-head-meta .kpi-sub-delta { margin-top: 0; }

.kpi-card .kpi-sub-delta {
  font-size: 11px;
  color: var(--u-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  margin-top: 1px;
  /* Single-line truncation чтобы длинные «к прошлому кварталу»
     не ломали высоту в узких grid-колонках. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-card .kpi-sub-delta-muted {
  color: var(--u-muted-2, var(--u-muted));
}

/* RELAYOUT-EXT-003: dot indicator slot для kpi-head (Solar/Bank/Control).
   Раньше dot был в отдельном flex-item card-level (left-side), теперь
   sits inline with label inside .kpi-head. Размер сохраняем 10×10
   (как было в .control-kpi-dot). */
.kpi-card .kpi-head-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--u-muted-tone, var(--u-muted));
  flex-shrink: 0;
}
.kpi-card[data-tone="ok"]    .kpi-head-dot { background: var(--u-ok); }
.kpi-card[data-tone="warn"]  .kpi-head-dot { background: var(--u-warn); }
.kpi-card[data-tone="error"] .kpi-head-dot { background: var(--u-error); }
.kpi-card[data-tone="info"]  .kpi-head-dot { background: var(--u-accent); }

/* ============================================================
   TABLES · v3 spec section 09 unified (REBUILD-202)
   ============================================================
   Canonical .matrix-wrap + .solar-matrix structure per v3 spec.
   Production .solar-matrix / .consumer-matrix / .input-v2-table /
   .meter-devices-table / .audit-log-table / .auth-users-table /
   .wizard-meters-table / .wizard-routes-table preserved.
   Phase 3 per-screen rewrite постепенно мигрирует.

   Hybrid units: длинные (kWh) под названием row, короткие (₴/m³) inline.
   Sticky 220px row-label. Grey zebra (не coloured). Bookmark dot
   для selected month via thead .is-selected.
   ============================================================ */

.matrix-wrap {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  overflow: hidden;
}

/* Canonical matrix primitive — для new tables в Phase 3.
   Existing .solar-matrix / .consumer-matrix / .input-v2-table preserved
   с их historical CSS. */
.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

.matrix thead th {
  font-family: var(--u-font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--u-muted);
  font-weight: 600;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
  background: var(--u-table-head);
}

.matrix tbody td {
  font-family: var(--u-font-mono);
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
  height: var(--u-row-h);
  color: var(--u-ink);
  vertical-align: middle;
}

.matrix .row-label {
  text-align: left;
  padding: 8px 12px;
  background: var(--u-surface);
  font-family: var(--u-font-sans);
  vertical-align: middle;
  width: 220px;
  position: sticky;
  left: 0;
  z-index: var(--u-z-table-head);
}

.matrix thead .row-label {
  background: var(--u-table-head);
}

.matrix .row-name {
  display: block;
  font-weight: 550;
  color: var(--u-ink);
  font-size: 12px;
  line-height: 1.25;
}

.matrix .row-unit {
  display: block;
  font-family: var(--u-font-mono);
  color: var(--u-muted);
  font-size: 11px;
  margin-top: 2px;
}

.matrix .unit-in {
  color: var(--u-muted);
  font-size: 11px;
  margin-left: 2px;
  font-weight: 400;
}

/* Grey zebra (per v3 spec — not coloured) */
.matrix tbody tr { border-bottom: 1px solid var(--u-line); }
.matrix tbody tr:last-child { border-bottom: 0; }
.matrix tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--u-muted-tone) 3.5%, var(--u-surface));
}
.matrix tbody tr:nth-child(odd) .row-label {
  background: color-mix(in srgb, var(--u-muted-tone) 2.5%, var(--u-surface));
}

/* Selected month state — accent underline + soft fill + bold */
.matrix thead th.is-selected {
  color: var(--u-accent-active);
  box-shadow: inset 0 -2px 0 0 var(--u-accent);
  background: color-mix(in srgb, var(--u-accent) 6%, var(--u-table-head));
}

.matrix tbody td.is-selected {
  background: var(--u-accent-soft) !important;
  color: var(--u-accent-active);
  font-weight: 600;
}

.matrix tbody td.is-selected .unit-in {
  color: color-mix(in srgb, var(--u-accent-active) 70%, transparent);
}

/* Closed month — muted italic, без background fill (per v3 spec) */
.matrix tbody td.is-closed {
  color: var(--u-muted-2);
  font-style: italic;
}

/* ============================================================
   PERIOD-NAV children · v3 spec section 10 (REBUILD-204)
   ============================================================
   Production .period-nav (sticky container) + .ds-stepper preserved.
   Эти helpers — small additions для consistent button/label styling
   внутри period-nav (готовы для Phase 3 per-screen apply).
   ============================================================ */

.period-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--u-radius-sm);
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: color var(--u-dur) var(--u-ease), background var(--u-dur) var(--u-ease);
}

.period-nav-btn:hover {
  color: var(--u-ink);
  background: var(--u-surface-2);
}

.period-nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--u-ring-focus);
}

.period-nav-btn[data-active="true"] {
  color: var(--u-ink);
  background: var(--u-surface);
  border-color: var(--u-line);
}

.period-nav-label {
  font-size: 13px;
  font-weight: 550;
  color: var(--u-ink);
  font-variant-numeric: tabular-nums;
}

.period-nav-label-sub {
  color: var(--u-muted);
  font-weight: 500;
  margin-left: 4px;
}

.period-nav-popover {
  position: absolute;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-modal);
  padding: 8px;
  z-index: var(--u-z-dropdown);
  min-width: 220px;
}

/* ============================================================
   CALLOUT family · v3 spec (REBUILD-207)
   ============================================================
   Inline callout (не toast) для информационных блоков внутри панелей.
   Production .notice / .notice-* family (toasts) preserved.
   ============================================================ */

.sg-callout {
  border-left: 3px solid var(--u-accent);
  background: var(--u-accent-soft);
  padding: 10px 14px;
  border-radius: var(--u-radius-sm);
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--u-ink);
}

.sg-callout.info  { background: var(--u-accent-soft); border-color: var(--u-accent); }
.sg-callout.warn  { background: var(--u-warn-soft);   border-color: var(--u-warn); }
.sg-callout.err   { background: var(--u-error-soft);  border-color: var(--u-error); }
.sg-callout.ok    { background: var(--u-ok-soft);     border-color: var(--u-ok); }

.sg-callout .sg-callout-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--u-accent);
  display: block;
  margin-bottom: 4px;
}

.sg-callout.warn .sg-callout-label { color: var(--u-warn); }
.sg-callout.err  .sg-callout-label { color: var(--u-error); }
.sg-callout.ok   .sg-callout-label { color: var(--u-ok); }

/* ============================================================
   MOTION · global prefers-reduced-motion guard (REBUILD-401)
   ============================================================
   v3 spec: respects prefers-reduced-motion система-wide.
   Все non-essential motion отключается, focus/state changes
   остаются мгновенными (без анимации). */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ADR-0033 Phase 3.5 (#8 + #9): app shell layout — sidebar остаётся
   видим, content scrollит независимо.
   ============================================================
   Owner-quote: «Левый sidebar скроллится со страницей — для чего?»

   Стандартный desktop-app shell:
   - html / body: height:100% + overflow:hidden — не scrollят window.
   - .app: height:100vh — full viewport.
   - .sidebar: sticky top:0 height:100vh (внутри .app row).
   - .main: height:100vh + overflow-y:auto — scrollит content внутри себя.
   - .topbar остаётся sticky внутри .main scroll container.

   Это override в конце файла перебивает дубликаты declarations выше.
*/

html, body {
  height: 100%;
  overflow: hidden;
}

.app {
  height: 100vh;
  min-height: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  z-index: 5;
}

.main {
  /* zoom масштабирует ТОЛЬКО контент (правая часть) — левое меню (.sidebar)
     остаётся 100% (owner). height = calc(100vh/scale): после zoom ровно 100vh,
     без мёртвой полосы снизу. Флоат-слои — снаружи .main, не масштабируются. */
  zoom: var(--ui-scale, 0.9);
  height: calc(100vh / var(--ui-scale, 0.9));
  overflow-y: auto;
  min-height: 0;
}

/* ⓘ-описание панели (#1 owner): на десктопе описание видно, значок ⓘ скрыт.
   На мобиле — наоборот (см. @767 ниже): описание прячется под ⓘ, тап раскрывает. */
.panel-hint-toggle { display: none; }

/* === Мобильный фундамент (Ф0) — max-width:767px (там сайдбар → drawer) === */
@media (max-width: 767px) {
  /* Мобильный масштаб 90% (owner): мельче текст, больше влезает. Высота
     calc(100dvh/0.9) — чтобы при zoom 0.9 .main заполнял экран по высоте (низ
     не обрезался). round 8 (owner 2026-06-02): 100vh → 100dvh. На iOS 100vh не
     учитывает клавиатуру: после ввода в ячейку и скрытия клавиатуры высота
     оставалась «старой», топбар (sticky внутри .main) обрезался и не
     восстанавливался без перезагрузки. dvh — динамическая высота, сама
     пересчитывается при появлении/скрытии клавиатуры. */
  .main {
    zoom: 0.9;
    height: calc(100dvh / 0.9);
  }
  /* Регулятор масштаба в топбаре прячем на мобиле. */
  #topbar-scale {
    display: none;
  }

  /* Контент почти на всю ширину (owner): #content имеет боковые margin 28px —
     на телефоне это съедало ~15% ширины. Оставляем по 8px. Расширяет всё —
     KPI, таблицы, панели. */
  #content {
    margin-left: 8px;
    margin-right: 8px;
  }
  /* КРИТИЧНО: восстановить off-canvas drawer. Канонический `.sidebar{position:
     sticky}` в конце файла перебивал mobile `position:fixed` (drawer-блок выше) →
     сайдбар занимал grid-строку 100vh → весь контент уезжал ВНИЗ за экран (пустой
     экран на телефоне). Этот блок стоит ПОСЛЕ канонического → перебивает обратно. */
  .sidebar {
    position: fixed;
    z-index: 1950;
    overflow: hidden;
  }

  /* Drawer = полноценное развёрнутое меню с подписями. Desktop-collapse
     (иконки-рельс + флайаут) на мобиле не применяем — drawer широкий. */
  .app.is-sidebar-collapsed .brand-text { display: block; }
  .app.is-sidebar-collapsed .brand-favicon { display: none; }
  .app.is-sidebar-collapsed .brand-lockup { display: block; }
  .app.is-sidebar-collapsed .nav-label { display: inline; }
  .app.is-sidebar-collapsed .nav-btn {
    justify-content: flex-start;
    padding: 8px 10px;
  }
  .app.is-sidebar-collapsed .nav-group.is-open .nav-children,
  .app.is-sidebar-collapsed .nav-group:hover > .nav-children {
    position: static;
    left: auto;
    top: auto;
    min-width: 0;
    z-index: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 10px;
    margin: 2px 0 0 17px;
  }
  .app.is-sidebar-collapsed .nav-mode-btn.is-active,
  .app.is-sidebar-collapsed .nav-sub-btn.is-active {
    background: var(--u-sidebar-active);
    border-radius: 6px;
  }
  .app.is-sidebar-collapsed .nav-mode-btn.is-active .nav-icon,
  .app.is-sidebar-collapsed .nav-sub-btn.is-active .nav-icon {
    color: #fff;
  }

  /* === Топбар на мобиле: 2 ряда (путь + одна строка управления) ===
     @1023 уже разбивает на путь-ряд + командный-ряд, но командный переносился
     в несколько линий (много кнопок). Здесь: убираем лишнее + не переносим. */

  /* Хвост крошек «· Надра / 2026» дублирует селекторы объекта и года в ряду
     ниже — на мобиле прячем, остаётся «Коммунальные / Обзор» (где ты). */
  .breadcrumb-context { display: none; }

  /* Командный ряд — в одну линию, без переноса; плотный gap. Спецификность
     `.topbar …` перебивает @1023 `flex-wrap:wrap` (корень переноса ↶↷ на 2-й ряд). */
  .topbar .topbar-command-bar { flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
  /* owner: командный ряд прижат ВПРАВО (justify-content:flex-end выше) — телефон в
     правой руке, контролы под большой палец; группа компактна, без большого зазора
     год↔объект (раньше период уезжал влево через margin-right:auto → провал; убрано). */

  /* Быстрые действия (поиск / 🔔 уведомления / ⚙ настройки) убираем из топбара —
     они есть в меню «Система». А историю (↶↷ отменить/повторить) ставим справа
     от объекта (частое действие при редактировании); не сжимается/не переносится. */
  .topbar-action-cluster { display: none; }
  .topbar-history { flex: 0 0 auto; }

  /* Период компактнее; у года прячем стрелки — год = компактный чип-селектор
     (меняешь редко), стрелки оставляем только у месяца (листать — часто). */
  .period-picker { gap: 6px; }
  .period-picker-arrow[data-action="period-year-step"] { display: none; }
  /* ▼ топбар-селекторов и центровка чипов вынесены в глобальные правила (без ▼
     на десктопе тоже, owner 2026-06-01) — см. .topbar-context .context-select-chevron
     / .period-picker-trigger возле .period-context-menu. */

  /* Реальный iPhone 14 Pro Max (owner 2026-06-01): (a) триггеры месяца/года — по
     контенту, без фикс-ширины 100/66px (иначе сумма ширин > доступной и ↶↷
     переносятся); (b) высота чипов 32px = как у объекта (был разнобой 26 vs 32);
     (c) кнопки листания ‹› нормального размера (svg получил интринсик в renderArrowSvg). */
  .period-picker-topbar .period-picker-month,
  .period-picker-topbar .period-picker-year { width: auto; }
  .period-picker-topbar .period-picker-trigger { min-width: 0; padding: 0 8px; height: 32px; }
  .period-picker-topbar .period-picker-grp { height: 32px; padding: 0; }
  .period-picker-arrow { width: 26px; height: 32px; flex: none; }
  .period-picker-arrow svg { width: 12px; height: 12px; }

  /* Объект — справа от года; сжимается (ellipsis), не толкает строку за край. */
  .topbar-context { flex: 0 1 auto; min-width: 0; max-width: 130px; }

  /* owner 2026-06-01 (#5): на реальном iPhone кнопка объекта была ВЫШЕ месяца/года,
     хотя в Chromium-превью все одинаковые. Причина: объект жил на min-height:32px
     + font 15px + line-height 1.2 (контент ≈18px), а месяц/год — фикс height:32px +
     13px/line-height 1; iOS иначе считает zoom/высоту → разнобой. Приводим объект к
     тем же метрикам: фикс height (не только min), font 13px, line-height 1 — высоты
     совпадают на любой платформе. Триггеры месяца/года и стрелки уже были едины
     (height:32px, 13px/1) — их НЕ трогаем (иначе всплывала бы скрытая стрелка года). */
  .topbar-context .context-select-button {
    height: 32px;
    max-height: 32px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1;
    /* round 7 (owner 3-я итерация: месяц/год ВЫШЕ объекта на iPhone, в Chromium
       одинаковы): корень — объект-кнопка БЕЗ appearance:none → iOS даёт ей
       нативную push-button метрику (иную высоту), а триггеры месяца/года уже
       appearance:none (плоский бокс). Уравниваем режим рендера. */
    -webkit-appearance: none;
    appearance: none;
  }
  .topbar-context .context-select-value { font-size: 13px; line-height: 1; }
  /* round 7: жёсткий потолок высоты на все контролы ряда — iOS не сможет
     раздуть месяц/год выше 32px (max-height + border-box). Стрелки/триггеры
     уже 32px; display НЕ трогаем (иначе всплывёт скрытая стрелка года). */
  .period-picker-topbar .period-picker-grp,
  .period-picker-topbar .period-picker-trigger {
    max-height: 32px;
    box-sizing: border-box;
  }

  /* Панель «Настройки интерфейса»: на мобиле — нижняя шторка во всю ширину.
     Плавающая версия (right:18/top:72/width:304) не помещалась — строки
     выезжали, уходила под слои. Сегменты Язык/Тема/Плотность — во всю ширину. */
  .ui-prefs-panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    z-index: 2400;
    max-height: 80vh;
    overflow-y: auto;
  }
  .ui-prefs-panel .segmented { width: 100%; max-width: none; }
  .ui-prefs-panel .segmented button { flex: 1 1 auto; }

  /* === Полировка drawer / Обзора на мобиле (owner feedback) === */

  /* ① Выпадашка объекта прижата к правому краю кнопки — иначе вылезала за
     правый край экрана (кнопка стоит у правого края топбара). */
  .topbar-context .context-menu {
    left: auto;
    right: 0;
    min-width: 200px;
    max-width: calc(100vw - 24px);
  }

  /* ② Логотип в drawer — нормального размера. В rail-режиме .brand-link зажат
     в 42px (см. .is-sidebar-collapsed .brand-link) → 126px-lockup скукоживался
     до иконки. В drawer показываем полный lockup слева, как на десктопе. */
  .app.is-sidebar-collapsed .brand {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-height: 42px;
    padding: 0 0 8px;
  }
  .app.is-sidebar-collapsed .brand-link {
    width: auto;
    height: auto;
    justify-content: flex-start;
    padding: 4px 2px;
  }
  .app.is-sidebar-collapsed .brand-lockup { width: 104px; height: auto; }

  /* ③ Аккаунт в drawer: показываем имя/роль (не только аватар); меню
     пользователя открываем НАД кнопкой во всю ширину drawer (rail-режим
     уводил его вправо за край: left = 100% + 10). */
  .app.is-sidebar-collapsed .sidebar-user {
    justify-content: flex-start;
    padding: 12px 8px 4px;
  }
  .app.is-sidebar-collapsed .sidebar-user-button {
    justify-content: flex-start;
    gap: 12px;
    padding: 6px;
  }
  .app.is-sidebar-collapsed .sidebar-user-meta { display: grid; }
  .app.is-sidebar-collapsed .sidebar-user-menu {
    left: 8px;
    right: 8px;
    bottom: 64px;
    width: auto;
  }

  /* ④ KPI-карточки (Обзор + Показания и др.): одна в ряд (1 колонка), вёрстка
     как на десктопе — заголовок + дельта-чип сверху, значение, мини-график во
     всю ширину снизу (owner: «как десктоп, график снизу от края до края»).
     Полная ширина строки = заголовок и процент-чип больше не налезают.
     Карточки сохраняют дефолтную flex-column раскладку (не трогаем). */
  .overview-kpi-grid,
  .input-v2-kpi-bar,
  .control-kpi-row,
  .combined-kpi-row,
  .rent-hub-kpi,
  .solar-hero-kpi-grid.control-kpi-row { grid-template-columns: 1fr; }
  /* C (owner): высота KPI-карточки меньше — короче мини-график + плотнее. */
  .input-v2-kpi-card { gap: 4px; padding-top: 12px; padding-bottom: 12px; }
  .input-v2-kpi-card .u-kpi-card-spark { height: 30px; }

  /* owner 2026-06-01 (#1): на карточках Обзора дельта «−N ₴ к прошлому месяцу»
     висела под значением слева и «не смотрелась». Переносим её ВПРАВО, под
     %-чип: левая колонка = текущее значение, правая = сравнение (% сверху,
     дельта под ним). Grid с областями; .kpi-head раскрываем (display:contents),
     чтобы label/чип стали ячейками. Карточки Показаний (.input-v2-kpi-card)
     держат дельту в шапке справа сами — их не трогаем. */
  .overview-kpi-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label chip"
      "value delta"
      "spark spark";
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
  }
  .overview-kpi-card .kpi-head { display: contents; }
  .overview-kpi-card .kpi-label { grid-area: label; align-self: center; }
  .overview-kpi-card .kpi-head-chip { grid-area: chip; justify-self: end; }
  .overview-kpi-card .kpi-value { grid-area: value; align-self: center; }
  .overview-kpi-card .kpi-sub-delta {
    grid-area: delta;
    justify-self: end;
    text-align: right;
    align-self: center;
    margin: 0;
    line-height: 1.25;
  }
  .overview-kpi-card .u-kpi-card-spark { grid-area: spark; }

  /* ⑤ «Шаги месяца» на мобиле скрываем — дублируют блок «Состояние месяца»
     ниже (те же статусы + кнопки Проверить / Выпустить). */
  .monthly-stepper { display: none; }

  /* === Нижний Обзор (owner feedback) === */

  /* A. Карточки-графики: убираем выравнивание высот (grid-auto-rows:1fr —
     равняло все 4 карточки по самой высокой). На мобиле колонка одна, равнять
     не с чем, а растяжка давала пустоту снизу/сверху от графика. Высота — по
     контенту; сам график чуть ниже. */
  .overview-charts-grid { grid-auto-rows: auto; }
  .overview-chart-card { height: auto; }
  /* SVG графика по аспект-соотношению viewBox (без фикс. высоты) — иначе
     viewBox ~3.7:1 вписывался в бокс 2.4:1 с preserveAspectRatio и центрировал
     контент → пустые полосы сверху/снизу. height:auto убирает леттербокс. */
  .overview-chart-svg { height: auto; }

  /* owner: тогглы графика (Всего/На инвестора/Выработка) по центру карточки.
     Только мобайл — на десктопе header space-between (заголовок слева / тогглы
     справа) корректен. После wrap контролы занимают всю ширину → pill центрируется. */
  .overview-chart-header { align-items: center; }
  .overview-chart-controls { width: 100%; justify-content: center; }

  /* owner: «Состояние месяца» — кнопка (Проверить/Выпустить) ВПРАВО на строку
     метки (карточка уже). grid «точка | текст | кнопка» как на десктопе; detail
     («есть предупреждения») обрезается ellipsis и не выталкивает кнопку. */
  .overview-status-item { grid-template-columns: 12px 1fr auto; align-items: center; }
  .overview-status-item > .overview-status-action { min-width: 0; margin-top: 0; white-space: nowrap; }
  .overview-status-item > .overview-status-text { min-width: 0; }
  .overview-status-item > .overview-status-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* owner: iOS Safari зумит страницу при тапе в поле, если font-size < 16px.
     Поднимаем редактируемые инпуты до 16px на мобиле (при zoom:0.9 ≈ 14.4px
     визуально). Не отключаем viewport-зум — pinch-зум жестами сохранён. */
  input, select, textarea,
  input.cell-input,
  [data-input-v2-shell] .input-v2-cell input,
  .input-v2-cell input,
  .input-v2-start-cell input { font-size: 16px; }

  /* owner 2026-06-02 (round 8): бокс инпута расширен к ширине ячейки (был 80px в
     ячейке ~94px → editable «зажато», 6-значное показание обрезалось на iOS при
     16px). Шире бокс + поджатый padding → длинное число влезает; editable и серый
     предыдущий месяц одной ширины и одного размера (16px). */
  [data-input-v2-shell] .input-v2-cell input,
  .input-v2-cell input {
    max-width: min(100%, 92px);
    padding-left: 3px;
    padding-right: 3px;
  }

  /* round 8: серые output-ячейки (Сумма субсчётчиков / Разница) — тот же 16px,
     что и инпуты ввода/предыдущего месяца (owner: все ячейки одного размера). */
  [data-input-v2-shell] .input-v2-cell-readonly .input-v2-readonly,
  [data-input-v2-shell] .input-v2-cell output.input-v2-readonly,
  .input-v2-cell-readonly .input-v2-readonly,
  .input-v2-cell output.input-v2-readonly { font-size: 16px; }

  /* round 8: ярлыки месяцев в шапке таблицы (Мар/Апр/Май) были 11px — мелко. */
  [data-input-v2-shell] .input-v2-col-header,
  .input-v2-col-header { font-size: 13px; }

  /* owner 2026-06-01 (#2): редактируемые ячейки выбранного месяца наследовали
     жирность 700 от родителя .is-selected (через `font: inherit` на input) →
     казались крупнее серых readonly (тоже 16px, но вес 400) и 6-значные числа
     не влезали (на iOS SF Pro bold шире, чем fallback-шрифт Chromium-превью, где
     не обрезалось). Снимаем жирность до обычной (как у серых) + плотнее цифры
     (letter-spacing, меньше боковой padding) → длинные числа влезают, ячейки не
     выглядят крупнее. Размер 16px СОХРАНЯЕМ (тап не зумит страницу, owner-выбор).
     Десктоп не затронут (правило в @767; там колонки шире, жирность ок). */
  .input-v2-cell.is-selected input {
    /* owner 2026-06-02 (round 8): scale(0.81) убран — делал editable мельче и уже
       серого предыдущего месяца (тоже 16px-инпут). Owner: все ячейки (ввод+вывод)
       одного размера. Теперь editable = readonly = 16px; чтобы 6-значное влезло
       в 16px на iOS — бокс расширен к ширине ячейки (см. .input-v2-cell input
       ниже в @767) + поджат padding. De-bold сохраняем. */
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  /* === Показания: фокус на выбранном месяце ===
     Страница Показаний всегда месяц-ориентирована (getSelectedMonthIdxV2
     всегда возвращает месяц). На мобиле скрываем колонки невыбранных месяцев
     → остаётся «Метка │ выбранный месяц», ввод без горизонтальной прокрутки
     (owner: «выбрал месяц сверху → он зафиксировался для ведения показаний»).
     Колонка-метка уже sticky (.input-v2-row-label). Старт-колонка
     (.input-v2-start-*) — отдельные классы, не трогается.
     Ограничено [data-input-v2-shell] — чтобы НЕ задеть year-матрицы
     Потребителей/Солнца (.consumer-year-matrix/.solar-year-matrix), где нужны
     все месяцы; их адаптируем отдельно.

     Owner-уточнение: слева от выбранного показываем ПРЕДЫДУЩИЙ месяц (справочно,
     для сравнения) — выбранный остаётся справа. Поэтому скрываем колонки, что
     НЕ выбраны И НЕ являются соседом слева от выбранного (`:has(+ .is-selected)`
     = элемент, сразу за которым идёт выбранный). Тап по «Мар» делает его
     выбранным (существующий select-month) → карусель «съезжает». */
  /* Owner-вижн «карусель»: предыдущий (слева, справочно) │ выбранный (фокус,
     ввод) │ следующий (справа, чуть выглядывает → тап = «вперёд»). Прячем все
     колонки месяцев, показываем 3: выбранный (.is-selected), сосед слева
     (предыдущий) и сосед справа (следующий). Hide-all-then-show — чтобы не
     воевать со специфичностью :not(:has). Старт-колонка/метка (отдельные
     классы) не трогаются. */
  /* Карусель — Показания + Потребители + Солнце (owner). Колонки месяцев 100px;
     подгляд следующего чуть шире (было 108). Контроль — НЕ карусель (скролл ниже). */
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-col-header,
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-cell { display: none; width: 100px; min-width: 100px; }
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-col-header.is-selected,
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-col-header:has(+ .input-v2-col-header.is-selected),
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-col-header.is-selected + .input-v2-col-header,
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-cell.is-selected,
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-cell:has(+ .input-v2-cell.is-selected),
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-cell.is-selected + .input-v2-cell { display: table-cell; }
  /* Скролл выключен → следующий клипается в «подгляд» (без горизонт. прокрутки). */
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table-wrap { overflow: hidden; }
  /* owner: колонки держат натуральную ширину 100px (max-content → таблица ШИРЕ wrap),
     поэтому следующий месяц КЛИПАЕТСЯ правым краем wrap = подгляд у самого края, без
     пустоты справа. Раньше фикс-ширина next делала таблицу ýже wrap → пустота.
     Размер подгляда регулируется шириной метки (140 базово; на 430px метка шире — ниже @414). */
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table { width: max-content; }
  /* Узкая метка (sticky) — чтобы предыдущий+выбранный влезли, а следующий вышел
     за правый край на «подгляд». На десктопе метка остаётся 180px. */
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table th.input-v2-row-label-head,
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-row-label { width: 140px; min-width: 140px; }
  /* Предыдущий и следующий — справочные (приглушены); фокус на выбранном. */
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-cell:has(+ .input-v2-cell.is-selected),
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-cell.is-selected + .input-v2-cell { opacity: 0.55; }

  /* #1 (owner): второстепенное описание панели на мобиле прячем под ⓘ — тап по
     значку раскрывает. Декларация .hint-open ставится JS-обработчиком
     toggle-panel-hint. Десктоп не затронут (ⓘ скрыт, описание видно). */
  .panel-head .panel-hint { display: none; }
  .panel.hint-open .panel-head .panel-hint { display: block; }
  .panel-hint-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--u-muted, #6e7280);
    cursor: pointer;
    vertical-align: middle;
  }
  .panel-hint-toggle:hover { background: var(--u-surface-2); color: var(--u-ink); }

  /* #2 (owner): тоггл стартовых показаний — каретка-пилюля в шапке, по высоте
     как ячейки месяца (~20px). */
  [data-input-v2-shell] .input-v2-start-toggle-caret { font-size: 9.5px; padding: 5px 8px; line-height: 1; }
  /* Электроэнергия: длинный заголовок + широкая кнопка «Стартовые показания» не
     умещаются в один ряд → заголовок занимает строку целиком (1 строка вместо
     трёх), кнопка аккуратно переносится под него. */
  .input-v2-electricity-panel .panel-head { flex-wrap: wrap; gap: 6px; }
  .input-v2-electricity-panel .panel-head > div:first-child { min-width: 100%; }

  /* Шапки панелей единообразно компактные — описание ушло в ⓘ, высоту под него
     больше не резервируем; заголовок и «Свернуть» — в один ряд по центру.
     Перебиваем и спец-падинги year-матриц (Потребители/Солнце, 0,2,0).
     display:flex перебивает старое мобильное `.panel-head{display:block}`
     (line ~7262), из-за которого заголовок и «Свернуть» шли стопкой. */
  .panel-head { display: flex; padding-top: 9px; padding-bottom: 9px; align-items: center; }
  .consumer-year-matrix .panel-head,
  .solar-year-matrix .panel-head { padding-top: 9px; padding-bottom: 9px; align-items: center; }

  /* Матрица Контроля (статусы по месяцам — НЕ карусель): на мобиле горизонт.
     скролл + читаемые колонки, метка sticky. (Показания/Потребители/Солнце —
     карусель выше.) */
  .control-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .control-matrix-wrap .input-v2-table { width: max-content; min-width: 100%; table-layout: auto; }
  .control-matrix-wrap .input-v2-col-header,
  .control-matrix-wrap .input-v2-cell { min-width: 56px; }
}

/* Sub-tabs внутри страницы (Счета/Шаблоны/Реквизиты + др. page-tabs).
   Sticky под topbar — owner видит их при scroll content вниз.
   Канонический класс — .page-tabs (см. /static/app.js renderPageWithSectionTabs).
   Topbar height measured = 61px → top:61. */
.page-tabs,
.page-section-tabs,
.invoice-page-tabs,
.section-tabs {
  position: sticky;
  top: 61px;
  z-index: 40;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-line);
}

/* owner 2026-06-29: бар папок-вкладок — серый (фон страницы, непрозрачный для
   sticky) и БЕЗ базовой линии. Контур/тень даёт сама папка (тело). */
.page-tabs { background: var(--u-bg, #f6f7f9); border-bottom: none; }

/* Topbar тоже sticky к top: 0 .main (внутренний scroll). */
.topbar { background: var(--u-surface); }

/* owner (#8): вкладка «Счета» на телефоне — шапка обрезалась (табы «Ре…», сводка
   наезжала), список счетов (5 колонок + до 4 кнопок действий) уезжал за край.
   Шапку в столбик; список — в карточки. В конце файла, чтобы перебить глобальный
   `.page-tabs{position:sticky}` выше. */
@media (max-width: 767px) {
  /* Шапка: саб-табы своей строкой (горизонт. скролл, не клип), сводка под ними. */
  .invoice-topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .invoice-topbar > nav.page-tabs { flex: 1 1 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* owner: чипы «К оплате/Выпущено» — вправо (инфо-баланс к табам слева, к правой руке). */
  .invoice-topbar-kpis { justify-content: flex-end; padding: 0; flex-wrap: wrap; }

  /* Список счетов: таблицу из 5 колонок + кнопки действий не уместить → карточки
     (заголовки колонок прячем, каждая строка — карточка со stacked-ячейками). */
  /* min-width:0 перебивает десктопный .invoice-list-table{min-width:760px} —
     иначе таблица 760px переполняет панель и карточка (чип/«Выпустить») клипается. */
  .invoice-list-table { display: block; width: 100%; min-width: 0; }
  .invoice-list-table > tbody,
  .invoice-list-table > tbody > tr { display: block; width: 100%; }
  .invoice-list-table > thead { display: none; }
  /* owner: компактная карточка — строка1: имя + статус-чип («Ждёт выпуска»);
     строка2: период; строка3: сумма слева + «Выпустить» справа. Через flex+order
     по ячейкам (порядок td: 1 имя, 2 период, 3 сумма.num, 4 чип, 5 действия). */
  .invoice-list-table .invoice-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border: 1px solid var(--u-line); border-radius: 10px; margin-bottom: 8px; padding: 8px 10px; }
  .invoice-list-row > td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .invoice-list-row > td:nth-child(1) { order: 1; flex: 1 1 auto; min-width: 0; }     /* имя */
  .invoice-list-row > td:nth-child(4) { order: 2; flex: 0 0 auto; }                    /* статус-чип в шапке */
  .invoice-list-row > td:nth-child(2) { order: 3; flex: 1 1 100%; }                    /* период — своя строка */
  .invoice-list-row > td.num { order: 4; flex: 1 1 auto; text-align: left; font-weight: 700; font-size: 15px; }  /* сумма слева */
  .invoice-list-row > td.invoice-row-actions { order: 5; flex: 0 0 auto; margin-left: auto; }                    /* действия справа от суммы */
  /* owner: у выпущенного счёта 4 кнопки (Печать/PDF/Отправить/Отозвать) не влезали.
     «Отправить» — заглушка (нет интеграции) → прячем на мобиле; остальные компактнее,
     чтобы Печать/PDF/Отозвать встали в ряд с суммой. */
  .invoice-row-actions [data-action="share-invoice"] { display: none; }
  .invoice-list-row .invoice-row-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .invoice-list-row .invoice-row-actions .btn { padding: 4px 8px; font-size: 12px; gap: 4px; min-height: 0; }
  /* Заголовок-разделитель месяца (colspan) — блоком на всю ширину. */
  .invoice-list-group th { display: block; }

  /* owner: фильтры в один ряд. Подписи скрыты (плейсхолдеры/значения самоочевидны). */
  .invoice-list-toolbar { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; align-items: center; }
  .invoice-list-toolbar .filter-inline { flex: 1 1 0; min-width: 0; gap: 0; }
  .invoice-list-toolbar .filter-inline > span { display: none; }
  .invoice-list-toolbar .filter-inline > .cell-input,
  .invoice-list-toolbar .filter-inline > select { width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; }
  /* owner: селекты не влезали (шрифт 16). <select> НЕ вызывает iOS-зум (открывает
     пикер, не текстовый ввод) → 13px безопасно, текст читается. Поиск-инпут (текст)
     остаётся 16px (но он свёрнут в лупу — шрифт виден только в развёрнутом). */
  .invoice-list-toolbar .filter-inline > select { font-size: 13px; padding-left: 6px; padding-right: 4px; }
  /* owner: поиск свёрнут в значок-лупу (как в топбаре) → по тапу/фокусу
     разворачивается на всю ширину, а селекты Клиент/Состояние/Сортировка уезжают
     (прячутся). В свёрнутом виде 3 селекта читаемы (поиск освобождает место). */
  .invoice-list-toolbar .filter-search { flex: 0 0 40px; transition: flex-basis 0.18s ease; }
  .invoice-list-toolbar .filter-search > .cell-input {
    padding-left: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 16px;
  }
  .invoice-list-toolbar:has(.filter-search input:focus) .filter-search { flex: 1 1 100%; }
  .invoice-list-toolbar:has(.filter-search input:focus) .filter-client,
  .invoice-list-toolbar:has(.filter-search input:focus) .filter-state,
  .invoice-list-toolbar:has(.filter-search input:focus) .filter-sort { display: none; }

  /* owner: редактор счёта («Выпустить» → slide-out) компактнее на телефоне. */
  /* (a) контейнер во всю ширину; опускаем под топбар (top:0 уходил ПОД него →
     верх «Ручные строки» обрезался); плотнее отступы; футер (до 5 кнопок) переносится. */
  .invoice-slide-out { width: 100vw; top: var(--topbar-height, 108px); }
  .invoice-slide-out-header { padding: 12px; }
  .invoice-slide-out-body { padding: 12px; gap: 8px; }
  .invoice-slide-out-footer { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  /* (b) строки комиссии — мельче подписи/кнопки/суффикс (инпуты НЕ опускаем ниже
     16px — iOS-зум, #7; компактим шириной). */
  .invoice-commission-editor { padding: 6px 8px 5px; }
  .invoice-commission-row { gap: 3px 6px; padding: 2px 0; }
  .invoice-commission-service { font-size: 12px; }
  .invoice-commission-base { font-size: 10px; }
  .invoice-commission-kind-btn { min-height: 24px; min-width: 30px; padding: 2px 6px; font-size: 11px; }
  .invoice-commission-value-input { width: 64px; padding: 3px 6px; }
  .invoice-commission-value-suffix { padding: 0 6px; font-size: 11px; }
  .invoice-commission-amount-value { min-width: 60px; font-size: 12px; }
  /* (c) дата + итог — в столбик: итог своей строкой (не переносится 39 425,18),
     дата на всю ширину (нативный date-picker iOS + значок видны). */
  .invoice-slide-out-total { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; }
  .invoice-slide-out-total-date { justify-content: space-between; align-items: center; gap: 8px; }
  /* поле даты компактное (не 100%) → «Дата документа» + поле в ОДИН ряд (owner). */
  .invoice-slide-out-total-date > input.cell-input.compact { width: 152px; min-width: 0; flex: 0 0 auto; }
  .invoice-slide-out-total-amount { align-items: flex-start; }
  .invoice-slide-out-total-main strong { font-size: 15px; }
}

/* —— REPORTS (Отчёты аренды: KPI-плашки + .report-table с итогами) — owner
   2026-06-29. Паттерн «отчёт на чтение»: крупные KPI сверху → чистая таблица →
   пояснения под «i» (не баннеры). Деньги — вправо (tabular-nums), один формат;
   подытог/итог выделены жирным + линией. —— */
.report-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.report-kpi {
  background: var(--u-surface-2, #f1f3f7);
  border-radius: 10px;
  padding: 14px 16px;
}
.report-kpi-label { font-size: 13px; color: var(--u-muted); margin-bottom: 6px; }
.report-kpi-value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.report-kpi-unit { font-size: 14px; color: var(--u-muted); font-weight: 400; margin-left: 4px; }
.report-kpi-year { font-size: 12px; color: var(--u-muted); margin-top: 4px; }
.report-kpi-accent { background: var(--u-ok-soft, #e8f5ee); }
.report-kpi-accent .report-kpi-label,
.report-kpi-accent .report-kpi-value,
.report-kpi-accent .report-kpi-year { color: var(--u-ok, #16a34a); }
.report-kpi-accent .report-kpi-unit { color: var(--u-ok, #16a34a); opacity: .8; }

/* Фаза 4 — мини-тренд (спарклайн) в KPI Финрезультата. currentColor наследуется:
   обычные плашки — приглушённый, акцентная (Чистая) — зелёный. */
.report-kpi-spark { display: block; width: 100%; height: 30px; margin-top: 10px; color: var(--u-muted); overflow: visible; }
.report-kpi-spark-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.report-kpi-spark-area { fill: currentColor; opacity: .12; stroke: none; }
.report-kpi-spark-dot { fill: currentColor; }
.report-kpi-accent .report-kpi-spark { color: var(--u-ok, #16a34a); }

.report-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.report-section-period { margin-left: auto; font-size: 12px; color: var(--u-muted); }

/* «i» — пояснение по наведению (вместо баннеров-простыней). */
.report-info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--u-surface-2, #f1f3f7); color: var(--u-muted);
  font-size: 12px; font-style: italic; cursor: help; flex: 0 0 auto;
  vertical-align: middle;
}

/* Финансовая таблица «на чтение» (без авто-контрола «Колонки»). */
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table thead th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--u-muted); padding: 6px 10px; text-align: left;
  border-bottom: 1px solid var(--u-line);
}
.report-table th.num, .report-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--u-line); }
.report-table tbody tr:last-child td { border-bottom: none; }
.report-row-note { color: var(--u-muted); font-size: 11px; }

/* Строка-подытог и строка-итог (DS-паттерн финансовых таблиц). */
.report-table tr.is-subtotal td { font-weight: 600; border-top: 1px solid var(--u-line-strong); }
.report-table tr.is-total td { font-weight: 700; border-top: 2px solid var(--u-ink); padding-top: 9px; padding-bottom: 9px; }
/* Справочная строка (напр. «Валютные разницы») — приглушена, пунктир сверху. */
.report-table tr.is-aux td { color: var(--u-muted); border-top: 1px dashed var(--u-line); }

/* Плашка NOI. */
.report-noi-plate {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--u-surface-2, #f1f3f7); border-radius: 10px;
  padding: 12px 16px; margin: 18px 0 10px;
}
.report-noi-label { font-size: 13px; color: var(--u-muted); }
.report-noi-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.report-noi-year { font-size: 12px; color: var(--u-muted); }
.report-noi-plate .report-info-dot { margin-left: auto; align-self: center; }

.report-doli-head { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--u-line); }
.report-doli-sub { margin: 0 0 10px; font-size: 12px; }
.report-row-note { font-weight: 400; }

/* Фаза 1 — чип-фильтр охвата Финрезультата (Все | объект). */
.report-scope-filter { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.report-scope-label { font-size: 12px; color: var(--u-muted); margin-right: 2px; }
.report-scope-chip {
  font-size: 12px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--u-line); background: var(--u-surface, #fff);
  color: var(--u-muted); cursor: pointer;
  transition: color var(--u-dur) var(--u-ease), background var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.report-scope-chip:hover { color: var(--u-ink); border-color: var(--u-line-strong); }
.report-scope-chip.is-active {
  background: var(--u-accent-soft, #EFEEFE); color: var(--u-accent, #5B57EB);
  border-color: var(--u-accent, #5B57EB); font-weight: 500;
}
/* Фаза 2 — зависимый ряд помещений: отступ + левая планка под рядом объектов. */
.report-scope-filter + .report-scope-premise { margin-top: -8px; }
.report-scope-premise { padding-left: 14px; border-left: 2px solid var(--u-line); }

/* owner 2026-07-07 — конструктор сводного отчёта Коммунальных (вкладка «Отчёт»). */
.report-builder { display: grid; gap: 18px; }
.report-builder-controls { display: flex; flex-direction: column; gap: 10px; }
.report-field-row { display: flex; align-items: flex-start; gap: 12px; }
.report-field-label { flex: 0 0 92px; font-size: 12px; font-weight: 600; color: var(--u-muted); padding-top: 6px; }
.report-chip-group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.report-actions { display: flex; gap: 8px; margin-top: 6px; }
/* owner 2026-07-07: чипы отчёта пониже (ближе к KPI-чипам «К оплате»), scoped
   в .report-builder — rent-чипы Финрезультата не трогаем. */
.report-builder .report-scope-chip { padding: 4px 11px; font-size: 12px; line-height: 1.2; }
.report-builder .report-actions .btn { padding: 5px 12px; }
.report-quick { color: var(--u-ink); border-color: var(--u-line-strong); }
.report-quick-sep { display: inline-block; width: 1px; align-self: stretch; background: var(--u-line); margin: 2px 4px; }
.report-builder-preview .invoice-template-preview-label { margin-bottom: 8px; }
.report-preview-frame { width: 100%; min-height: 320px; border: 1px solid var(--u-line, #e6e8ec); border-radius: 8px; background: #fff; }
.report-preview-empty { padding: 24px; border: 1px dashed var(--u-line); border-radius: 8px; text-align: center; }

/* Фаза 3 — хаб «Отчёты»: меню-список отчётов (чипы) над активным отчётом. */
/* Эпик «Настройки аренды» Фаза 3 — Аналитика = рейл слева + колонка отчёта справа.
   In-panel рейл под-навигации (см. DESIGN_SYSTEM): визуальный язык .sg-sidebar-link,
   но на токенах панели (accent-soft активный, без тёмной сайдбар-палитры). */
.report-hub-panel { padding: 16px 18px; }
.report-hub-rail-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 22px; align-items: start; }
.report-rail { display: flex; flex-direction: column; gap: 15px; border-right: 1px solid var(--u-line); padding-right: 10px; }
.report-rail-group { display: flex; flex-direction: column; gap: 1px; }
.report-rail-group-label { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--u-muted); padding: 0 10px; margin-bottom: 4px; }
.report-rail-link { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; line-height: 1.3; color: var(--u-muted); background: none; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer; transition: color var(--u-dur) var(--u-ease), background var(--u-dur) var(--u-ease); }
.report-rail-link:hover { color: var(--u-ink); background: var(--u-surface-2); }
.report-rail-link.is-active { color: var(--u-accent); background: var(--u-accent-soft); box-shadow: inset 2px 0 0 var(--u-accent); font-weight: 500; }
.report-rail-col { min-width: 0; }
/* 2 отчёта сами в panel() — сплющиваем chrome, чтобы не было карточки-в-карточке;
   их собственный заголовок остаётся (как у прочих отчётов их H3). */
.report-rail-col > .panel { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.report-rail-col > .panel > .panel-head { padding: 0 0 12px; border-bottom: 0; background: transparent; }
.report-rail-col > .panel > .panel-body { padding: 0; }
@media (max-width: 880px) {
  .report-hub-rail-layout { grid-template-columns: 1fr; gap: 14px; }
  .report-rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--u-line); padding: 0 0 12px; }
}
.report-tenant-cell { display: inline-flex; align-items: center; gap: 9px; }
/* Строка-итог финансовой таблицы в <tfoot>/последнем <tbody> — линия сверху. */
.report-table tbody + tbody tr.is-total td { border-top: 2px solid var(--u-ink); }

/* Фаза 3.2 — выписка по арендатору: селектор + цвет баланса (долг/аванс). */
.report-tenant-select-wrap { font-size: 13px; color: var(--u-muted); display: inline-flex; align-items: center; gap: 6px; }
.report-tenant-select { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--u-line-strong); border-radius: var(--u-radius-sm, 8px); background: var(--u-surface); color: var(--u-ink); font-weight: 500; cursor: pointer; }
.report-bal-debt { color: var(--u-warn, #d97706); }
.report-bal-credit { color: var(--u-ok, #16a34a); }
.report-statement-note { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 14px 0 0; }
.report-statement-note strong { font-weight: 600; }
.report-statement-note svg { flex: 0 0 auto; }

/* Фаза 3.3 — матрица «Расходы по статьям»: горизонтальный скролл на узком/полном
   годе; колонка «За год» отделена линией. */
.report-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.report-matrix { min-width: 540px; font-size: 12.5px; }
.report-matrix th, .report-matrix td { padding: 6px 8px; white-space: nowrap; }
.report-matrix .report-col-total { border-left: 1px solid var(--u-line); }

/* Фаза 3.4 — заполняемость: приглушённая колонка «Объект» + статус-бейдж. */
.report-cell-sub { color: var(--u-muted); }
/* #4 — «Свод по объектам»: мелкая подпись «за год» под месячным значением. */
.report-cell-year { font-size: 10.5px; color: var(--u-muted); font-weight: 400; margin-top: 1px; }

/* IA Фаза 3 — раскрывающиеся секции-редакторы в ленте Контроля. */
.rent-control-section { border: 0.5px solid var(--u-line); border-radius: 12px; margin-top: 14px; background: var(--u-surface); overflow: hidden; }
.rent-control-section-summary { cursor: pointer; padding: 13px 16px; font-size: 14px; font-weight: 500; list-style: none; user-select: none; display: flex; align-items: center; gap: 8px; }
.rent-control-section-summary::-webkit-details-marker { display: none; }
.rent-control-section-summary::before { content: "\203A"; font-size: 17px; line-height: 1; color: var(--u-muted); transition: transform .15s ease; }
.rent-control-section[open] > .rent-control-section-summary::before { transform: rotate(90deg); }
.rent-control-section[open] > .rent-control-section-summary { border-bottom: 1px solid var(--u-line); }
.rent-control-section-body { padding: 6px 16px 14px; }

.report-status-badge { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 500; }
.report-status-badge.is-occupied { background: var(--u-ok-soft, #e8f5ee); color: var(--u-ok, #16a34a); }
.report-status-badge.is-vacant { background: var(--u-surface-2, #f1f1f4); color: var(--u-muted); }

/* #4б — «Подтянуть реквизиты»: пикер реквизитов из других объектов (копия). */
.supplier-page-head-actions { display: inline-flex; gap: 8px; align-items: center; }
.req-picker-card { background: var(--u-surface); border-radius: 14px; max-width: 560px; width: 92vw; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.req-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--u-line); }
.req-picker-head strong { font-size: 15px; }
.req-picker-sub { font-size: 12px; color: var(--u-muted); font-weight: 400; }
.req-picker-list { overflow-y: auto; padding: 6px 0 10px; }
.req-picker-group { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--u-muted); padding: 11px 18px 4px; }
.req-picker-row { display: flex; align-items: center; gap: 12px; padding: 9px 18px; }
.req-picker-row:hover { background: var(--u-surface-2); }
.req-picker-row-main { flex: 1; min-width: 0; }
.req-picker-name { font-size: 14px; font-weight: 500; }
.req-picker-meta { font-size: 11.5px; color: var(--u-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-picker-empty { padding: 30px 18px; text-align: center; color: var(--u-muted); font-size: 13px; }

/* Строки/значения вне операционного среза объекта — приглушены, прочерк. */
.report-table tr.report-row-na td { color: var(--u-muted); }
.report-cell-na { color: var(--u-muted); cursor: help; }

/* «Доли» при выбранном объекте — подпись вместо таблицы. */
.report-doli-na {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--u-line);
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--u-muted);
}
.report-doli-na b { font-weight: 600; color: var(--u-ink); }
.report-doli-na svg { flex: 0 0 auto; color: var(--u-muted); }

/* owner: на 430px (14 Pro Max) метка карусели шире (168) → следующий месяц
   клипается правым краем ≈наполовину. На 390 базовых 140px подгляд меньше, но
   предыдущий+выбранный полностью влезают (см. карусель в @767 выше). */
@media (min-width: 414px) and (max-width: 767px) {
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table th.input-v2-row-label-head,
  :is([data-input-v2-shell], .consumer-year-matrix, .solar-year-matrix) .input-v2-table .input-v2-row-label { width: 190px; min-width: 190px; }
}

/* ── Раздельная оплата (ADR-0070) ─────────────────────────────────────────── */
.rent-split-btn {
  font: inherit; font-size: 12px; line-height: 1;
  padding: 5px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--u-line-strong, #c8ccd2); background: var(--u-surface, #fff); color: var(--u-text-muted, #6b7280);
}
.rent-split-btn:hover { border-color: var(--u-accent, #5B57EB); color: var(--u-accent, #5B57EB); }
.rent-split-btn.is-on { border-color: color-mix(in srgb, var(--u-accent, #5B57EB) 45%, transparent); background: color-mix(in srgb, var(--u-accent, #5B57EB) 10%, transparent); color: var(--u-accent, #5B57EB); font-weight: 600; }

/* Окно раздельной оплаты — шире дефолтных 480px под 7 полей (ДС mountModal size). */
.oblik-modal-card.oblik-modal-wide { max-width: 560px; }
.rent-split-modal { display: flex; flex-direction: column; gap: 16px; }
/* Тумблер: .toggle-control (38px) держит только переключатель; подпись и подсказка
   ВНЕ его — иначе caption зажимался в 38px и наезжал (owner 2026-07). */
.rent-split-head { display: flex; flex-direction: column; }
.rent-split-toggle { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; }
.rent-split-toggle .toggle-control { flex: none; }
.rent-split-toggle-cap { font-weight: 600; font-size: 15px; }
.rent-split-toggle-hint { margin: 6px 0 0 49px; color: var(--u-text-muted, #6b7280); font-size: 13px; line-height: 1.4; }
.rent-split-fields { display: flex; flex-direction: column; gap: 14px; }
.rent-split-fields.is-hidden { display: none; }
.rent-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
/* month-picker-button в сетке — на всю ширину ячейки, как инпут. */
.rent-split-grid > label > .month-picker-button { width: 100%; text-align: left; }
/* Календарь-поповер (.floating-popover z-index:1000) при открытии из окна (overlay
   z-index:2000) уходил ЗА окно. Поднимаем месяц-пикер выше модалки. */
.month-picker-popover { z-index: 2100; }
.rent-split-grid > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.rent-split-grid > label > span { color: var(--u-text-muted, #6b7280); font-weight: 500; }
.rent-split-grid .rent-split-wide { grid-column: 1 / -1; }
.rent-split-info { margin: 0; }
.rent-split-preview { background: color-mix(in srgb, var(--u-accent, #5B57EB) 7%, transparent); border: 1px solid color-mix(in srgb, var(--u-accent, #5B57EB) 25%, transparent); border-radius: 10px; padding: 11px 13px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.rent-split-preview b { color: var(--u-accent-active, #3C39BA); }
.rent-split-warn { color: #b4460a; font-weight: 600; }

.rent-split-auto-row td { background: color-mix(in srgb, var(--u-accent, #5B57EB) 4%, transparent); }
.rent-auto-badge { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--u-accent, #5B57EB); background: color-mix(in srgb, var(--u-accent, #5B57EB) 14%, transparent); border-radius: 20px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.rent-auto-lock { color: var(--u-text-muted, #9aa1a9); font-size: 13px; }