/* The interface (redesign after the Spark Admin look): a dark green menu, a light page, white cards.
   Mobile first; the menu slides in below 1200 px and stays on the left from 1200 px. No inline styles anywhere.
   Layouts inside the page follow the width of the page itself (container queries), not of the window. */

/* --- the font: Onest (SIL Open Font License, fonts/OFL.txt) — Russian and Tajik letters included --- */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/Onest-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/Onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/Onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/Onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/Onest-symbols.woff2") format("woff2");
  unicode-range: U+2190, U+2192, U+2248; }  /* ← → ≈ */

:root {
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-2: #f7f9f8;
  --surface-3: #edf1ef;
  --text: #0b130f;
  --text-2: #2c3b33;
  --muted: #5d6f66;
  --placeholder: #66756e;
  --border: #e3eae6;
  --border-strong: #cdd8d2;
  --brand: #0a3324;
  --brand-hover: #114a35;
  --brand-ink: #062116;
  --brand-soft: #e6efea;
  --accent: #b4f105;
  --accent-soft: #f0fbd0;
  --accent-ink: #3a5000;
  --success: #15803d;
  --success-bg: #dcfce7;
  --danger: #c42b2b;
  --danger-hover: #a82222;
  --danger-bg: #fdecec;
  --warning: #9a5806;
  --warning-bar: #b7791f;  /* 3.6:1 on white: a stripe and a bar must be seen */
  --warning-bg: #fdf3d3;
  --info: #0a6596;
  --info-bg: #e2f2fc;
  /* The overview's chart: money in and out. Checked as a pair on white (dataviz validator: CVD ΔE 8.2, ≥ 3:1). */
  --series-in: #1b9e6e;
  --series-out: #eb6834;
  --radius-xl: 20px;
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(11, 19, 15, 0.05);
  --shadow-md: 0 1px 2px rgba(11, 19, 15, 0.04), 0 8px 24px rgba(11, 19, 15, 0.05);
  --shadow-lg: 0 16px 48px rgba(11, 19, 15, 0.18);
  --ring: 0 0 0 3px rgba(180, 241, 5, 0.55);
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --gap: 20px;
  --pad: 20px;  /* a card's inner padding */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (min-width: 640px) { :root { --radius-xl: 24px; --pad: 24px; } }

/* --- base ----------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); text-decoration-color: rgba(10, 51, 36, 0.35); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3 { margin: 0; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
h3 { font-size: 0.95rem; font-weight: 700; margin: 18px 0 8px; }
p { margin: 0 0 12px; }
s { color: var(--muted); }
strong { font-weight: 700; }
img { max-width: 100%; }
.icon { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
.icon-sm { width: 15px; height: 15px; vertical-align: -2px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.87rem; line-height: 1.5; margin: 6px 0 12px; max-width: 72ch; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-ok { color: var(--success); }
.text-danger { color: var(--danger); }
.optional-mark { color: var(--muted); font-weight: 450; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: flex; }
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 200; transform: translateY(-200%);
  padding: 10px 16px; border-radius: var(--radius-md); background: var(--brand); color: #fff; font-weight: 650; text-decoration: none;
}
.skip-link:focus { transform: none; color: #fff; }
.nav-open .skip-link { display: none; }  /* the open menu keeps the keyboard inside it */

/* --- the shell: menu on the left, a slim bar on top, the page ------------------------------------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  background: var(--brand-ink);
  color: rgba(255, 255, 255, 0.74);
}
.sidebar :focus-visible { outline-color: var(--accent); }
.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 11px; background: var(--accent); color: var(--brand-ink);
}
.brand-mark .icon { width: 20px; height: 20px; }
.brand-name { font-size: 1.06rem; font-weight: 750; letter-spacing: -0.01em; line-height: 1.2; }
.sidebar .nav-close {
  width: 38px; height: 38px; border-color: rgba(255, 255, 255, 0.14); border-radius: 11px;
  background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none;
}
.sidebar .nav-close:hover { background: rgba(255, 255, 255, 0.12); }
.nav-group { margin-bottom: 14px; }
.nav-title {
  margin: 0 0 6px; padding: 0 12px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.46);
}
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 42px; padding: 9px 12px; margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.74); text-decoration: none; font-weight: 500; font-size: 0.93rem; line-height: 1.25;
}
.nav-link .icon { color: rgba(255, 255, 255, 0.6); }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav-link[aria-current] { color: #fff; background: rgba(255, 255, 255, 0.08); font-weight: 650; }
.nav-link[aria-current] .icon { color: var(--accent); }
.nav-link[aria-current]::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--accent);
}
.nav-link span { min-width: 0; overflow-wrap: anywhere; }
.nav-object { font-size: 0.9rem; }
.sidebar-backdrop { display: none; }

.main { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 16px;
  background: rgba(243, 245, 244, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(11, 19, 15, 0.06);
}
.topbar-context { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; color: var(--muted); font-size: 0.9rem; }
.topbar-context a { color: var(--text-2); text-decoration: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-context a:hover { color: var(--brand); }
.topbar-brand { display: none; }
.content {
  width: 100%; max-width: 1600px; padding: 22px 16px 56px; flex: 1 0 auto;
  container: page / inline-size;
}

.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.icon-btn:hover { background: var(--surface-2); }

.user-menu { position: relative; margin-left: auto; flex: none; }
.user-menu > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px 4px 4px;
  border-radius: 999px; cursor: pointer; list-style: none; color: var(--text);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: rgba(11, 19, 15, 0.04); }
.user-menu .who { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.user-menu .who strong { font-size: 0.9rem; font-weight: 650; }
.user-menu .who span { font-size: 0.76rem; color: var(--muted); }
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--brand); color: var(--accent); font-weight: 750; font-size: 0.95rem; text-transform: uppercase;
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); }
.menu-panel .icon { color: var(--muted); }
.menu-panel form { margin: 0; }
.menu-panel hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }

@media (max-width: 1199.98px) {
  .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; box-shadow: var(--shadow-lg); }
  .nav-open .sidebar, .sidebar:target { transform: none; visibility: visible; transition: transform 0.22s ease; }
  .nav-open .sidebar-backdrop, .sidebar:target + .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(6, 33, 22, 0.42); }
  .nav-open body { overflow: hidden; }
  .topbar-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-weight: 750; text-decoration: none; }
  .topbar-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .topbar-brand .brand-mark .icon { width: 17px; height: 17px; }
  .topbar-context { display: none; }
}
@media (min-width: 1200px) {
  .main { margin-left: var(--sidebar-w); }
  .topbar { padding: 0 32px; }
  .topbar .nav-toggle, .sidebar .nav-close { display: none; }
}
@media (max-width: 767.98px) {
  .user-menu .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 640px) {
  h1 { font-size: 1.7rem; }
  .content { padding: 24px 24px 56px; }
}
@media (min-width: 1200px) { .content { padding: 28px 32px 64px; } }

/* --- page header, back link, object header and its sections --------------------------------------- */
.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  color: var(--muted); font-size: 0.9rem; font-weight: 550; text-decoration: none;
}
.back-link:hover { color: var(--brand); }
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px;
  margin-bottom: 18px;
}
.page-header > div:first-child { flex: 1 1 420px; min-width: 0; }
.page-header > .page-actions { flex: 0 1 auto; }
.page-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; max-width: 72ch; }
.page-subtitle .dot { margin: 0 6px; color: var(--border-strong); }
.page-actions, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.actions { margin-top: 6px; }
.obj-title { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.obj-title > div { min-width: 0; }
.obj-icon {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 14px; background: var(--brand); color: var(--accent);
}
.obj-icon .icon { width: 24px; height: 24px; }
.obj-title h1 { overflow-wrap: anywhere; }

/* The sections of an object: every tab stays in sight — they wrap instead of hiding in a scroller. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 22px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.tabs a {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 40px; padding: 8px 14px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap;
}
.tabs a .icon { width: 16px; height: 16px; }
.tabs a:hover { color: var(--text); background: var(--surface-2); }
.tabs a[aria-current="page"] { background: var(--brand); color: #fff; }
.tabs a[aria-current="page"] .icon { color: var(--accent); }
@media (min-width: 640px) { .tabs { display: inline-flex; max-width: 100%; } }
@container page (min-width: 560px) and (max-width: 819.98px) {
  .tabs a .icon { display: none; }
  .tabs a { padding-left: 11px; padding-right: 11px; }
}
@media (max-width: 639.98px) {
  .tabs a { flex: 1 1 auto; justify-content: center; min-height: 38px; padding: 7px 10px; font-size: 0.86rem; }
  .tabs a .icon { display: none; }
  .page-header { gap: 12px; margin-bottom: 14px; }
  /* the main button on a line of its own, the others two to a line (one left alone takes the whole line) */
  .page-header .page-actions { width: 100%; gap: 8px; align-items: stretch; }
  .page-header .page-actions .btn { flex: 1 1 calc(50% - 4px); min-height: 40px; padding: 8px 10px; font-size: 0.86rem; line-height: 1.2; }
  .page-header .page-actions .btn-primary { flex-basis: 100%; min-height: 46px; font-size: 0.95rem; }
  .obj-icon { width: 44px; height: 44px; border-radius: 13px; }
}

/* --- cards ----------------------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--pad);
  margin-bottom: var(--gap);
  min-width: 0;
}
.card > h2 { margin-bottom: 14px; }
.card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 16px;
}
.card-head h2 { margin: 0; }
.card-head .link { font-size: 0.9rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.card-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; max-width: 72ch; }
.card-flush { padding: 0; overflow: hidden; }
.form-card { max-width: 760px; }
.grid-2 { display: grid; gap: 0 var(--gap); grid-template-columns: minmax(0, 1fr); }
@container page (min-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
  .grid-2.form-aside > :first-child { grid-column: 2; grid-row: 1; }  /* first in the page, on the right */
  .grid-2.form-aside > :last-child { grid-column: 1; grid-row: 1; }
}
.split { display: grid; gap: 0 var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.split > .kpi { margin-bottom: var(--gap); }
@container page (min-width: 760px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }

/* --- figures at the top of a page ------------------------------------------------------------------- */
.kpis, .stats { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--gap); }
@container page (min-width: 520px) { .kpis, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 600px) { .kpis.kpis-3, .stats.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container page (min-width: 900px) { .kpis, .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container page (min-width: 600px) and (max-width: 1099.98px) {
  .kpis .kpi-value, .stats .stat-value { font-size: 1.3rem; }
  .kpis .kpi { padding: 16px 18px; }
}
@container page (min-width: 520px) { .kpis.kpis-1 { grid-template-columns: minmax(0, 440px); } }
.kpi, .stat {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 18px 20px; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  color: var(--text); text-decoration: none;
}
a.kpi:hover { border-color: var(--border-strong); box-shadow: 0 2px 4px rgba(11, 19, 15, 0.05), 0 12px 28px rgba(11, 19, 15, 0.07); color: var(--text); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.kpi-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 12px; background: var(--brand-soft); color: var(--brand);
}
.kpi-label, .stat-label { color: var(--muted); font-size: 0.86rem; font-weight: 550; }
/* Big figures use proportional digits: tabular ones leave gaps in Onest. Tables keep tabular digits. */
.kpi-value, .stat-value { font-size: 1.55rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.kpi-sub { color: var(--muted); font-size: 0.83rem; line-height: 1.45; }
.kpi > .progress { margin-top: auto; }  /* the bars of a row line up at the bottom */
.kpi > :has(+ .progress) { margin-bottom: 12px; }
.kpi-hero { background: var(--brand); border-color: transparent; color: #fff; overflow: hidden; }
.kpi-hero > * { position: relative; z-index: 1; }
.kpi-hero::after {
  content: ""; position: absolute; right: -48px; bottom: -48px; width: 96px; height: 96px;
  border-radius: 50%; border: 14px solid rgba(180, 241, 5, 0.18); pointer-events: none;
}
.kpi-hero > .kpi-sub { padding-right: 36px; }  /* clear of the ring */
a.kpi-hero:hover { color: #fff; border-color: transparent; background: var(--brand-hover); }
.kpi-hero .kpi-label, .kpi-hero .kpi-sub, .kpi-hero .stat-label, .kpi-hero .muted { color: rgba(255, 255, 255, 0.74); }
.kpi-hero .kpi-icon { background: rgba(180, 241, 5, 0.16); color: var(--accent); }
.kpi-hero .num, .kpi-hero .text-danger { color: inherit; }
.kpi-value.negative, .negative { color: var(--danger); }
.kpi-hero .kpi-value.negative { color: #ffb4a8; }
@media (max-width: 639.98px) {
  .kpis, .stats { gap: 10px; }
  .kpi, .stat { padding: 14px 16px; gap: 2px; }
  .kpi-top { margin-bottom: 2px; }
  .kpi-icon { width: 32px; height: 32px; border-radius: 10px; }
  .kpi-icon .icon { width: 16px; height: 16px; }
  .kpi-value, .stat-value { font-size: 1.4rem; }
}

progress.progress, .progress {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--surface-3); color: var(--brand);
}
progress.progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
progress.progress::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
progress.progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
.kpi-hero progress.progress { background: rgba(255, 255, 255, 0.14); }
.kpi-hero progress.progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.14); }
.kpi-hero progress.progress::-webkit-progress-value { background: var(--accent); }
.kpi-hero progress.progress::-moz-progress-bar { background: var(--accent); }
progress.progress.warn::-webkit-progress-value { background: var(--warning-bar); }
progress.progress.warn::-moz-progress-bar { background: var(--warning-bar); }
progress.progress.over::-webkit-progress-value { background: var(--danger); }
progress.progress.over::-moz-progress-bar { background: var(--danger); }
.kpi-hero progress.progress.over::-webkit-progress-value { background: #ff8a7a; }
.kpi-hero progress.progress.over::-moz-progress-bar { background: #ff8a7a; }
.progress-sm { height: 6px; }

/* --- buttons ----------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; font-size: 0.92rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn-primary .icon { color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: rgba(11, 19, 15, 0.05); border-color: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }
.btn-whatsapp { background: #e8f8ee; border-color: #b9e6c8; color: #11713a; }
.btn-whatsapp:hover { background: #d6f2e0; border-color: #8fd5a8; color: #0d5c2f; }
.btn-small { min-height: 34px; padding: 6px 12px; font-size: 0.85rem; border-radius: 10px; gap: 6px; }
.btn-block { width: 100%; }
.btn .icon { width: 17px; height: 17px; }
.btn-upload { position: relative; }
.btn-upload:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 639.98px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .btn-small { min-height: 40px; }
}

/* --- badges and alerts ------------------------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2);
  font-size: 0.75rem; font-weight: 650; line-height: 1.5; white-space: nowrap; text-decoration: none;
}
a.badge:hover { background: var(--border); color: var(--text); }
.badge-ok { background: var(--success-bg); color: var(--success); }
.badge-warn { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-dark { background: var(--brand); color: #fff; }

.alert {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--text-2); font-size: 0.92rem; line-height: 1.5;
}
.alert > .icon { margin-top: 1px; color: var(--muted); }
.alert > div, .alert > span { min-width: 0; flex: 1 1 auto; }
.alert-error { background: var(--danger-bg); border-color: #f5c6c6; color: #8f1d1d; }
.alert-error > .icon { color: var(--danger); }
.alert-ok { background: var(--success-bg); border-color: #b9ebc9; color: #14532d; }
.alert-ok > .icon { color: var(--success); }
.alert-warn { background: var(--warning-bg); border-color: #f3dc9b; color: #6b3d03; }
.alert-warn > .icon { color: var(--warning); }
.alert-info { background: var(--info-bg); border-color: #bfe2f6; color: #0b4a6e; }
.alert-info > .icon { color: var(--info); }
.alert .inline-form { margin: 8px 0 0; }
.alert form .btn { margin-top: 2px; }

/* --- forms ------------------------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { font-weight: 600; font-size: 0.88rem; color: var(--text-2); padding: 0; }
.field > .hint { margin: 0; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.field > legend { margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="search"],
input[type="number"], select, textarea {
  font: inherit; font-size: 16px; /* keeps iOS from zooming on focus */
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="search"],
input[type="number"], select { height: 44px; }  /* a date field is as tall as the rest */
textarea { line-height: 1.45; resize: vertical; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  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='%235d6f66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:hover, select:hover, textarea:hover { border-color: #b6c4bd; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[type="file"] { font: inherit; font-size: 0.9rem; max-width: 100%; min-width: 0; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 10px; padding: 8px 12px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--brand); flex: none; margin: 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 0 8px; cursor: pointer; }
@media (pointer: fine) { .check { min-height: 32px; margin-bottom: 4px; } }
.field-error { color: var(--danger); margin: 2px 0 0; font-size: 0.86rem; font-weight: 550; }
.row { display: flex; gap: 10px; align-items: flex-start; }
.row > input, .row > .field { flex: 1 1 auto; min-width: 0; }
.row > select { flex: 0 0 88px; }
.row > .field { margin-bottom: 0; }
.row .short, .row > .field.short { flex: 0 0 120px; }
.row + .row, .row + input, fieldset.field .row + .field-error + .row { margin-top: 10px; }
fieldset.field input + input, fieldset.field .row + input { margin-top: 10px; }
fieldset.bare { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
.form-grid > .row { margin-bottom: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span-2 { grid-column: 1 / -1; } }
.form-section { border: 0; margin: 4px 0 8px; padding: 18px 0 0; border-top: 1px solid var(--border); min-width: 0; }
.form-section > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 12px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.form-section > legend + * { clear: left; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
details.optional { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 0 14px; margin: 0 0 16px; }
details.optional > summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 8px; }
details.optional > summary::-webkit-details-marker { display: none; }
details.optional > summary::before { content: "+"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--surface-3); font-weight: 700; }
details.optional[open] > summary::before { content: "−"; }
details.optional[open] { padding-bottom: 14px; }
details.optional .row + .field-error, details.optional .field-error + .row { margin-top: 6px; }
details.optional .row ~ .row { margin-top: 12px; }

/* --- filters: a search line, the rest folded under «Фильтры» -------------------------------------- */
.filters {
  display: grid; gap: 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px 16px 4px; margin-bottom: 16px;
}
.filters .field { margin-bottom: 12px; }
.filters .field.wide, .filters .actions, .filters .check { grid-column: 1 / -1; }
.filters .actions { margin: 0 0 12px; }
@container page (min-width: 860px) {
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; padding: 18px 20px 6px; }
  .filters .field.wide { grid-column: span 2; }
  .filters .check { grid-column: auto; margin-bottom: 14px; }
  .filters .actions { grid-column: span 2; margin-bottom: 14px; }
}
.form-narrow .field > select, .form-narrow .field > input { max-width: 440px; }
@container page (min-width: 1100px) {
  .filters { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
  .filters .actions { grid-column: auto; }
}
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px var(--pad); }
.search-field { position: relative; flex: 1 1 260px; min-width: 0; margin: 0; }
.search-field > .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--placeholder); pointer-events: none; }
.search-field > input { padding-left: 40px; }
.filters-more { flex: 0 0 auto; }
.filters-more[open] { flex: 1 1 100%; }  /* closed: a pill beside the search; open: its own line */
.filters-more > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; cursor: pointer; list-style: none;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 0.88rem;
}
.filters-more > summary::-webkit-details-marker { display: none; }
.filters-more > summary:hover { border-color: var(--border-strong); }
.filters-more > summary .chevron { transition: transform 0.15s ease; }
.filters-more[open] > summary .chevron { transform: rotate(180deg); }
.filters-more > summary .badge { margin-left: 2px; }
.filters-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 14px; }
.filters-grid .field { margin-bottom: 12px; }
.filters-grid .check { grid-column: 1 / -1; }
@container page (min-width: 760px) { .filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; } .filters-grid .check { grid-column: auto; margin-bottom: 14px; } }
@media (max-width: 459.98px) { .filters-grid { grid-template-columns: minmax(0, 1fr); } }
.list-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  padding: 14px var(--pad); border-top: 1px solid var(--border); background: var(--surface-2);
}
.list-summary .count { color: var(--muted); font-size: 0.9rem; }
.list-summary .total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.list-summary .total-label { color: var(--muted); font-size: 0.9rem; font-weight: 550; }
.list-summary .total-value { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; }
.list-summary .total-alt { color: var(--muted); font-size: 0.92rem; white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px var(--pad); border-top: 1px solid var(--border); }
.pager .pager-info { color: var(--muted); font-size: 0.9rem; }
.pager .pager-spacer { min-width: 1px; }
.list-card > .list-summary { background: var(--surface); }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 18px var(--pad) 14px; }
.list-head h2 { margin: 0; }
.list-card > .empty { border-top: 1px solid var(--border); }
.phone-only { display: none; }
/* Phones and tablets: the list's rows are cards themselves, so the list is not a card around them. */
@media (max-width: 899.98px) {
  .list-card { overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .list-card > .list-toolbar {
    padding: 12px; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  }
  .list-card > .list-toolbar .btn-primary { flex: 1 1 auto; }
  .list-card > .list-summary { padding: 2px 4px 12px; border: 0; background: none; }
  .list-card > .list-head { padding: 4px 4px 10px; }
  .list-card > .pager { padding: 6px 0 0; border: 0; }
  .list-card > .empty { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
  .table-compact .phone-only { display: inline; }
}
.totals { margin: 0 0 12px; padding: 0 4px; color: var(--muted); font-size: 0.92rem; line-height: 1.7; max-width: 72ch; }
.totals strong { color: var(--text); }

/* --- tables ----------------------------------------------------------------------------------------- */
/* A table wider than its box scrolls; soft shadows at the cut edge say there is more. */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, var(--surface) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11, 19, 15, 0.16), rgba(11, 19, 15, 0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 19, 15, 0.16), rgba(11, 19, 15, 0)) right / 14px 100% no-repeat scroll,
    var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  margin-bottom: var(--gap);
}
.card .table-wrap { border-radius: var(--radius-lg); box-shadow: none; margin-bottom: 12px; }
.card-flush .table-wrap { border: 0; border-radius: 0; margin: 0; }
.table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; white-space: nowrap; }
.table thead th {
  background: var(--surface-2); color: var(--muted); vertical-align: bottom;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: normal;
  padding-top: 11px; padding-bottom: 11px;
}
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr:hover td { background: #fafcf8; }
@media (max-width: 1439.98px) { .table th, .table td { padding-left: 10px; padding-right: 10px; } }  /* laptops: room for every column */
.table th:first-child, .table td:first-child { padding-left: 18px; }
.table th:last-child, .table td:last-child { padding-right: 18px; }
.table td.num, .table th.num { text-align: right; }
.table td.wrap { white-space: normal; min-width: 140px; overflow-wrap: break-word; }
@container page (min-width: 900px) { .table td.item { white-space: nowrap; } }  /* an item's name on one line */
@container page (max-width: 899.98px) {
  .table td.wrap { min-width: 0; }
  .table th, .table td { padding-left: 8px; padding-right: 8px; }
  .table .sales-cost { display: none; }  /* = paid + left, and in the figures above */
}
@media (max-width: 479.98px) { .table td.wrap { min-width: 96px; } }  /* small phones: a two-column table fits */
.table a { color: var(--text); font-weight: 600; text-decoration: none; }
.table a:hover { color: var(--brand); text-decoration: underline; }
.table a.badge { font-weight: 650; }
.table a.btn { font-weight: 600; text-decoration: none; }
.table tfoot td { font-weight: 750; background: var(--surface-2); border-top: 1px solid var(--border-strong); border-bottom: 0; }
.table tr.inactive td { color: var(--muted); }
.table tr.inactive a { color: var(--muted); }
.table .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 0.82rem; font-weight: 450; white-space: normal; }
.table .sub.text-danger { color: var(--danger); font-weight: 650; }
.table .sub.text-ok { color: var(--success); font-weight: 650; }
.table td .badge { margin-left: 4px; white-space: nowrap; }
.table td .badge:first-child { margin-left: 0; }
.table td.pct { min-width: 150px; white-space: nowrap; }
.table td.pct .progress { display: inline-block; width: 72px; margin: 0 0 0 12px; vertical-align: middle; }
.table .row-edit {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px 0 -4px 6px; vertical-align: middle;
  border-radius: 8px; color: var(--muted);
}
.table .row-edit:hover { background: var(--surface-3); color: var(--brand); text-decoration: none; }
.table .row-edit .icon { width: 15px; height: 15px; }
/* Budget lines: a stripe on the left says «90–100 %» (amber) or «over» (red); the whole row is not painted. */
.table tbody tr.status-over td { background: #fffafa; }
.table tbody tr.status-over td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.table tbody tr.status-warn td:first-child { box-shadow: inset 3px 0 0 var(--warning-bar); }
.table tbody tr.status-over:hover td { background: #fff3f3; }
.legend { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.legend.status-warn { background: var(--warning-bg); color: var(--warning); }
.legend.status-over { background: var(--danger-bg); color: var(--danger); }
.matrix .sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.matrix thead .sticky { background: var(--surface-2); }
.access-cell { display: flex; align-items: center; gap: 8px; margin: 0; }
.access-cell select { min-width: 130px; height: 38px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.access-cell .short { width: 90px; height: 38px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.saved { color: var(--success); font-weight: 650; }

/* Tables inside a card reach the card's edges (no frame inside a frame). */
@media (min-width: 900px) {
  .card:not(.card-flush) > .table-wrap, .card:not(.card-flush) > .more-rows > .table-wrap {
    margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); border-width: 1px 0; border-radius: 0;
  }
  .card > .table-wrap + .more-rows[open] > .table-wrap { margin-top: -13px; }  /* the folded rows continue the table */
  .card:not(.card-flush) > .table-wrap:last-child { margin-bottom: calc(-1 * var(--pad)); border-bottom: 0; border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px); }
  .card > .table-wrap .table th:first-child, .card > .table-wrap .table td:first-child,
  .card > .more-rows > .table-wrap .table td:first-child { padding-left: var(--pad); }
  .card > .table-wrap .table th:last-child, .card > .table-wrap .table td:last-child,
  .card > .more-rows > .table-wrap .table td:last-child { padding-right: var(--pad); }
}

/* Phones and tablets (a wide table would scroll there): rows become small cards; each cell carries its column's name
   in data-label. */
@media (max-width: 899.98px) {
  .table-stack { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .card .table-stack { border: 0; }
  .table-stack .table, .table-stack tbody, .table-stack tr, .table-stack td { display: block; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack tbody tr {
    position: relative; display: flex; flex-direction: column; padding: 12px 14px; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  }
  .card .table-stack tbody tr { box-shadow: none; }
  .table-stack tbody tr:hover td { background: transparent; }
  .table-stack tbody tr.status-over { border-color: #f3c4c4; background: #fffafa; box-shadow: inset 3px 0 0 var(--danger); }
  .table-stack tbody tr.status-warn { border-color: #f1df9e; box-shadow: inset 3px 0 0 var(--warning-bar); }
  .table-stack .table tbody tr.status-over td, .table-stack .table tbody tr.status-warn td,
  .table-stack .table tbody tr.status-over td:first-child, .table-stack .table tbody tr.status-warn td:first-child,
  .table-stack .table tbody tr.status-over:hover td { background: transparent; box-shadow: none; }
  .table-stack td {
    display: flow-root; padding: 4px 0; border: 0; white-space: normal; text-align: right; min-width: 0;
  }
  .table-stack td:first-child, .table-stack td:last-child { padding-left: 0; padding-right: 0; }
  .table-stack td::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--muted); font-size: 0.82rem; font-weight: 550; text-align: left; }
  .table-stack td.lead { order: -1; display: block; text-align: left; padding: 0 0 6px; font-size: 0.98rem; }
  .table-stack td.lead::before { content: none; }
  .table-stack td:empty { display: none; }
  .table-stack td.wrap, .table-stack td.pct { min-width: 0; }
  .table-stack td.pct { text-align: right; }
  .table-stack td.pct .progress { display: block; width: 100%; margin: 8px 0 2px; }
  /* the whole card opens the record; other links and buttons in it stay on top */
  .table-stack td.lead > a:first-of-type::after { content: ""; position: absolute; inset: 0; }
  .table-stack td:not(.lead) a, .table-stack td .btn, .table-stack td form, .table-stack .row-edit { position: relative; z-index: 1; }
  .table-stack tfoot, .table-stack tfoot tr, .table-stack tfoot td { display: block; }
  .table-stack tfoot tr { padding: 12px 14px; border: 0; border-radius: var(--radius-lg); background: var(--brand); color: #fff; box-shadow: none; }
  .table-stack tfoot td { display: flow-root; text-align: right; padding: 3px 0; border: 0; background: transparent; color: #fff; }
  .table-stack tfoot td::before { content: attr(data-label); float: left; color: rgba(255, 255, 255, 0.7); font-weight: 550; }
  .table-stack tfoot td:empty { display: none; }
  .table-stack tfoot td.lead::before { content: none; }

  /* Compact rows (long lists): title and the main sum on the first line, details small under them.
     Cells say where they go: c-r1 = right of the title; c-l2 / c-r2 = second line; c-l3 / c-r3 = third; c-full = a line. */
  .table-compact tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: baseline;
    padding: 12px 14px; margin-bottom: 8px;
  }
  .table-compact tbody td { display: block; padding: 0; text-align: left; font-size: 0.84rem; color: var(--muted); }
  .table-compact tbody td::before { content: none; }
  .table-compact tbody td.lead { grid-column: 1; grid-row: 1; padding: 0 0 2px; font-size: 0.95rem; line-height: 1.35; color: var(--text); }
  .table-compact tbody td.c-r1 { grid-column: 2; grid-row: 1; text-align: right; font-size: 0.98rem; color: var(--text); }
  .table-compact tbody td.c-l2 { grid-column: 1; grid-row: 2; }
  .table-compact tbody td.c-r2 { grid-column: 2; grid-row: 2; text-align: right; }
  .table-compact tbody td.c-l3 { grid-column: 1; grid-row: 3; }
  .table-compact tbody td.c-r3 { grid-column: 2; grid-row: 3; text-align: right; }
  .table-compact tbody td.c-full { grid-column: 1 / -1; grid-row: 4; padding-top: 2px; }
  .table-compact tbody td.c-hide { display: none; }
  .table-compact tbody td[data-prefix]::before { content: attr(data-prefix) "\00a0"; float: none; display: inline; margin: 0; font: inherit; color: inherit; }
  .table-compact tbody tr.inactive td, .table-compact tbody tr.inactive td.lead, .table-compact tbody tr.inactive td.c-r1 { color: var(--muted); }
  .table-compact tbody td.c-r2 .sub { display: inline; margin-left: 4px; }
  .table-compact tbody td.c-r2 .sub::before { content: "· "; }
  .table-compact tbody td.c-l3 .sub { display: block; }

  /* Budget lines: the name and % on top, the bar, then plan / fact / difference side by side. */
  .table-budget tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 4px; padding: 12px 14px; margin-bottom: 8px; }
  .table-budget tbody td, .table-budget tbody td.num { display: block; padding: 0; text-align: left; font-size: 0.9rem; }
  .table-budget tbody td::before { float: none; display: block; margin: 0; font-size: 0.72rem; line-height: 1.3; }
  .table-budget tbody td.lead { grid-column: 1 / 3; grid-row: 1; padding: 0 0 4px; font-size: 0.95rem; }
  .table-budget tbody td.pct { grid-column: 3; grid-row: 1; text-align: right; font-weight: 650; }
  .table-budget tbody td.pct::before { content: none; }
  /* the bar closes the card, under the figures (a long name may take two lines) */
  .table-budget tbody tr:has(td.pct progress) { padding-bottom: 30px; }
  .table-budget tbody td.pct .progress { position: absolute; left: 14px; right: 14px; bottom: 14px; width: auto; margin: 0; }
  .table-budget tbody td.num:not(.pct) { grid-row: 2; }
}

/* --- lists of records (the dashboard's latest records, debts, moves) --------------------------------- */
.records, .list-rows { list-style: none; margin: 0; padding: 0; }
.records li, .list-rows li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.records li:last-child, .list-rows li:last-child { border-bottom: 0; }
.records li > a { flex: 1 1 200px; }
.list-rows .row-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 12px; background: var(--surface-3); color: var(--text-2);
}
.list-rows .row-icon.in { background: var(--success-bg); color: var(--success); }
.list-rows .row-icon.out { background: var(--brand-soft); color: var(--brand); }
.list-rows .row-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-rows .row-main a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.list-rows .row-main a:hover { color: var(--brand); text-decoration: underline; }
.list-rows .row-meta { color: var(--muted); font-size: 0.83rem; }
.list-rows .row-amount { margin-left: auto; font-weight: 700; white-space: nowrap; }
.list-rows .row-amount.in { color: var(--success); }
.list-rows .row-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; padding-left: 50px; }
@media (min-width: 720px) { .list-rows .row-actions { width: auto; padding-left: 0; } }
.more-rows > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer; list-style: none; color: var(--brand); font-weight: 650; font-size: 0.9rem; }
.more-rows > summary::-webkit-details-marker { display: none; }
.more-rows[open] > summary { display: none; }

/* --- details of a record ----------------------------------------------------------------------------- */
.props { display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr); gap: 0; margin: 0; }
.props dt { color: var(--muted); font-size: 0.84rem; font-weight: 550; }
.props dt, .props dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.props dt { padding-right: 24px; }  /* one continuous rule under each row */
.props dt:last-of-type, .props dd:last-of-type { border-bottom: 0; }
@media (max-width: 639.98px) {
  .props dt { padding-right: 14px; }
  .props dd { text-align: right; }  /* label left, value right, like a receipt */
  .empty:has(+ .upload) { display: none; }  /* «Фото нет.» above the button that adds them */
}
/* A statement (the cash): labels on the left, sums on the right, the result under a strong rule. */
.props.props-money { grid-template-columns: minmax(0, 1fr) auto; }
.props.props-money dt, .props.props-money dd { padding: 11px 0; border-bottom: 1px solid var(--border); }
.props.props-money dt { padding-right: 16px; }
.props.props-money dd { text-align: right; }
.props.props-money .total { margin-top: -1px; border-top: 2px solid var(--text); border-bottom: 0; color: var(--text); font-weight: 750; }
.props.props-money .total.negative { color: var(--danger); }
.record-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }

/* --- history ----------------------------------------------------------------------------------------- */
.history { list-style: none; margin: 0; padding: 0; }
.history > li { position: relative; padding: 0 0 18px 26px; }
.history > li::before {
  content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand);
}
.history > li::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: 2px; width: 2px; background: var(--border); }
.history > li:last-child { padding-bottom: 0; }
.history > li:last-child::after { content: none; }
.history .when { color: var(--muted); font-size: 0.86rem; }
.ai-log-text { margin: 6px 0; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-2); white-space: pre-line; overflow-wrap: anywhere; font-size: 0.9rem; }
.changes {
  display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 14px;
  margin: 6px 0 0; padding: 10px 12px; list-style: none; border-radius: var(--radius-md); background: var(--surface-2);
  color: var(--text-2); font-size: 0.87rem; overflow-wrap: anywhere;
}
.changes li { display: contents; }
.changes .change-field { color: var(--muted); }
.history-more > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; cursor: pointer; list-style: none; color: var(--brand); font-weight: 600; font-size: 0.86rem; }
.history-more > summary::-webkit-details-marker { display: none; }
.history-more[open] > summary .icon { transform: rotate(180deg); }

/* --- objects on the home page ---------------------------------------------------------------------- */
.cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--gap); }
@container page (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 1000px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.object-card { display: flex; flex-direction: column; gap: 14px; margin: 0; color: var(--text); text-decoration: none; }
a.object-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 4px rgba(11, 19, 15, 0.05), 0 14px 32px rgba(11, 19, 15, 0.08); color: var(--text); }
.object-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.object-card-head > div { min-width: 0; }
.object-card-head .obj-icon { width: 44px; height: 44px; border-radius: 13px; }
.object-name { display: block; font-weight: 750; font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.object-kind { display: block; color: var(--muted); font-size: 0.85rem; }
.object-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.object-figures > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); min-width: 0; }
.object-figures .label { color: var(--muted); font-size: 0.78rem; font-weight: 550; }
.object-figures .value { font-weight: 750; overflow-wrap: anywhere; }
.object-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 0.84rem; }
.object-card > .object-foot:last-child { margin-top: auto; }
.archive { margin: 8px 0 var(--gap); }
.archive > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 14px; margin-bottom: 14px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; color: var(--text-2); list-style: none;
}
.archive > summary::-webkit-details-marker { display: none; }
.card .archive > summary { background: var(--surface-2); }

/* --- the overview: all objects together and money by month (DECISIONS З.57) ------------------------- */
.overview-kpis { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--gap); }
.overview-kpis > .kpi-hero { grid-column: 1 / -1; }
@container page (min-width: 900px) {
  .overview-kpis { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
  .overview-kpis > .kpi-hero { grid-column: 1; grid-row: span 2; justify-content: center; }
  .overview-kpis > .kpi-hero .kpi-value { font-size: 2rem; }
}
@container page (max-width: 299.98px) { .overview-kpis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) {
  .overview-kpis { gap: 10px; }
  .overview-kpis > .kpi:not(.kpi-hero) .kpi-icon { display: none; }  /* two to a row: the words need the room */
  .overview-kpis > .kpi:not(.kpi-hero) .kpi-value { font-size: 1.15rem; }
}

.months-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.months-head h2 { margin: 0; }
.months-filter { display: flex; align-items: center; gap: 10px; }
.months-filter label { color: var(--muted); font-size: 0.86rem; font-weight: 550; }
.months-filter select { min-width: 190px; max-width: 100%; }
.months:has(.htmx-request) { opacity: 0.6; transition: opacity 0.2s; }  /* the old figures stay while the new come */

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 0.86rem; color: var(--text-2); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.key-line { display: inline-block; width: 12px; height: 3px; border-radius: 2px; flex: none; }
.key-in { background: var(--series-in); }
.key-out { background: var(--series-out); }

/* Bars of a month side by side, at most 24px thick, 2px apart, rounded at the top and square at the baseline. */
.flow-chart { padding: 8px 0 40px 58px; margin-bottom: 8px; }
.flow-plot { position: relative; height: 230px; border-bottom: 1px solid var(--border-strong); }
.flow-tick { position: absolute; left: 0; right: 0; bottom: var(--at); border-top: 1px solid var(--border); }
.flow-tick:first-child { border-top: 0; }  /* the baseline is the plot's own border */
.flow-tick > span {
  position: absolute; right: calc(100% + 10px); top: 0; transform: translateY(-50%);
  color: var(--muted); font-size: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.flow-cols { position: absolute; inset: 0; display: flex; margin: 0; padding: 0; list-style: none; }
.flow-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.flow-bar { width: min(24px, 38%); height: var(--h); border-radius: 4px 4px 0 0; }
.flow-in { background: var(--series-in); }
.flow-out { background: var(--series-out); }
.flow-x {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; text-align: center;
  color: var(--muted); font-size: 0.75rem; line-height: 1.25; white-space: nowrap;
}
.flow-x small { display: block; font-size: 0.68rem; }
.flow-tip {
  position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 4px; min-width: 168px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: 0.82rem; white-space: nowrap; pointer-events: none;
}
.flow-tip > span { display: flex; align-items: center; gap: 8px; }
.flow-tip .num { font-weight: 700; }
.tip-start .flow-tip { left: 0; transform: none; }
.tip-end .flow-tip { left: auto; right: 0; transform: none; }
@media (hover: hover) {
  .flow-col:hover { background: var(--surface-2); border-radius: 8px 8px 0 0; }
  .flow-col:hover .flow-tip { display: flex; }
}
@container page (max-width: 559.98px) {
  .flow-chart { padding-left: 46px; }
  .flow-plot { height: 190px; }
  .flow-bar { width: 34%; }  /* the months stay apart */
  .flow-col:nth-child(even) .flow-x { visibility: hidden; }  /* every other month: the labels need the room */
}

.table-months { margin-top: 4px; }
.table-months .table td:first-child { white-space: nowrap; }
@media (min-width: 900px) { .table-months .table td { padding-top: 10px; padding-bottom: 10px; } }  /* a dense report */
.table-compact.table-months tbody td.c-r1.negative { color: var(--danger); }
@container page (max-width: 339.98px) {  /* a narrow phone: «расход» under «приход», not over it */
  .table-compact.table-months tbody td.c-r2 { grid-column: 1; grid-row: 3; text-align: left; }
}
.table-stack.table-months tfoot td.negative { color: #ffb4a8; }  /* the dark total card on phones */

/* --- empty states, danger zone, toast --------------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--muted); }
.empty .icon { width: 30px; height: 30px; color: var(--border-strong); }
.empty p { margin: 0; }
/* Deleting is quiet until opened: a red text button, then a card with the reason and a red button. */
.danger-zone { margin-bottom: var(--gap); }
.danger-zone > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  cursor: pointer; color: var(--danger); font-weight: 650; list-style: none;
}
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary:hover { background: var(--danger-bg); }
.danger-zone:not([open]) { padding: 0; background: none; border: 0; box-shadow: none; }
.danger-zone[open] { border-color: #efc7c7; box-shadow: none; }
.danger-zone[open] > summary { margin: -8px 0 12px -12px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-lg); font-weight: 550;
}

/* --- AI input, cards, photos --------------------------------------------------------------------------- */
.ai-box { border-color: #d7ecb0; background: linear-gradient(180deg, #fbfff0 0%, var(--surface) 70%); }
.ai-box.ai-box-off { padding: 12px 16px; background: var(--surface); border-color: var(--border); box-shadow: none; }
.ai-box textarea { min-height: 72px; background: var(--surface); }
.ai-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ai-title > div, .ai-title h1, .ai-title h2 { min-width: 0; overflow-wrap: anywhere; }
.ai-title .kpi-icon { background: var(--accent-soft); color: var(--accent-ink); }
.ai-send { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ai-send input[type="text"] { flex: 1 1 200px; }
.ai-photos, .file-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; max-width: 100%; }
.ai-photos .hint, .file-pick .hint { margin: 0; overflow-wrap: anywhere; }
.ai-off { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--muted); font-size: 0.9rem; }
.ai-off .icon { color: var(--accent-ink); margin-top: 1px; }
.ai-off a { white-space: nowrap; }
.ai-question { margin: 14px 0; padding: 14px; border-radius: var(--radius-lg); background: var(--warning-bg); border: 1px solid #f3dc9b; }
.ai-cards { margin-top: 14px; }
.ai-card { border-left: 4px solid var(--accent); }
.ai-card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.ai-card-head select { flex: 1 1 auto; font-weight: 650; }
.ai-totals { font-weight: 700; margin: 4px 0 10px; }
.busy { align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; margin: 10px 0 0; }
.busy::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy::before { animation: none; } .sidebar { transition: none !important; } }
.confidence-high { background: var(--success-bg); color: var(--success); }
.confidence-medium { background: var(--warning-bg); color: var(--warning); }
.confidence-low { background: var(--danger-bg); color: var(--danger); }
.photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 14px; }
.photo { margin: 0; }
.photo img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-3); }
.photo-deleted img { opacity: 0.4; }
.photo figcaption { font-size: 0.84rem; margin-top: 6px; }
.photo details summary { cursor: pointer; }
.photo details form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.upload { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); }
.upload .hint { margin: 0; }

/* --- the new-object wizard ------------------------------------------------------------------------------ */
.wizard-items input { height: 40px; min-height: 40px; padding: 7px 10px; }
.wizard-items .num-input { width: 96px; }
.wizard-items .unit-input { width: 64px; }
.wizard-items .aliases-input { min-width: 140px; }
.wizard-items .item-name { min-width: 170px; }
.wizard-items tr.suggested td { background: #fbfff0; }

/* --- the login page and the error page ------------------------------------------------------------------ */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background:
    radial-gradient(420px 320px at 8% 10%, rgba(180, 241, 5, 0.22), rgba(180, 241, 5, 0) 70%),
    radial-gradient(460px 360px at 95% 92%, rgba(180, 241, 5, 0.18), rgba(180, 241, 5, 0) 70%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 440px; padding: 32px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 24px 60px rgba(11, 19, 15, 0.1);
}
.auth-card .btn-block { min-height: 48px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; text-align: center; }
.auth-brand .brand-mark { width: 52px; height: 52px; border-radius: 16px; background: var(--brand); color: var(--accent); }
.auth-brand .brand-mark .icon { width: 28px; height: 28px; }
.auth-brand h1 { font-size: 1.45rem; }
.auth-brand p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.auth-brand .error-code {
  margin: 4px 0 0; color: var(--brand); font-size: clamp(4rem, 10vw, 6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}
.error-card { text-align: center; }
.error-card .btn { min-height: 46px; }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--placeholder); pointer-events: none; }
.input-icon > input { padding-left: 40px; background: var(--surface-2); }
.input-icon > input:focus { background: var(--surface); }
.languages { display: flex; justify-content: center; gap: 6px; margin: 20px 0 0; }
.languages a, .languages strong { padding: 6px 12px; border-radius: 999px; font-size: 0.86rem; text-decoration: none; }
.languages a { color: var(--muted); font-weight: 600; }
.languages a:hover { background: var(--surface-2); color: var(--text); }
.languages strong { background: var(--brand); color: #fff; font-weight: 650; }

/* --- spacing helpers last: they win over the components' own margins ------------------------------------ */
.section-gap { margin-top: 16px; }

/* --- print: the page without the menu ------------------------------------------------------------------------ */
@media print {
  .sidebar, .sidebar-backdrop, .topbar, .tabs, .page-actions, .danger-zone, .btn, .back-link, .skip-link,
  .filters, .list-toolbar, .pager, .ai-box, .upload, .row-edit, details.optional, .more-rows > summary,
  .history-more > summary { display: none !important; }
  .main { margin: 0; }
  .content { max-width: none; padding: 0; }
  body { background: #fff; }
  .card, .kpi, .table-wrap { box-shadow: none; }
  .kpi-hero { background: none; border-color: var(--border); color: var(--text); }
  .kpi-hero::after { content: none; }
  .kpi-hero .kpi-label, .kpi-hero .kpi-sub, .kpi-hero .muted { color: var(--muted); }
  .kpi-hero .kpi-value.negative { color: var(--danger); }
  .months-filter, .flow-tip { display: none !important; }
  .flow-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table-wrap { overflow: visible; background: none; }
  .table th, .table td { white-space: normal; }
  a { color: inherit; text-decoration: none; }
}