/* =============================================================================
   fin — design-system stylesheet
   iOS / Telegram aesthetic: token layer + migrated components + status map
   Phase 16, Plan 01
   ============================================================================= */

/* === TOKENS ================================================================ */

:root {
  /* ── Accent ─────────────────────────────────────────────────────────────── */
  --pico-primary: #007AFF;
  --accent: #007AFF;
  --accent-hover: #0066D6;

  /* ── Font ───────────────────────────────────────────────────────────────── */
  --pico-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-modal: 20px;
  --radius-pill: 999px;

  /* Set PicoCSS global border-radius to the button radius */
  --pico-border-radius: var(--radius-button);

  /* ── Chart layout tokens (shared so both surfaces align identically) ──────── */
  /* Bar rows (По месяцам widget + G2 money): fixed label/value columns so the
     track left+right edges line up across EVERY row regardless of label length. */
  --bar-label-col: 135px;
  --bar-value-col: 100px;
  /* Line-chart Y-axis gutter (burn-up + cumulative): narrow, left-hugging labels. */
  --chart-y-gutter: 46px;

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease-out;

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  --shadow-card:  0 1px 4px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .12);

  /* ── Status color tokens (9 real Deal.status codes) ────────────────────── */
  --status-pending:          #8E8E93;   /* neutral gray   */
  --status-awaiting_payment: #FF9F0A;   /* warning amber  */
  --status-in_stock:         #FF9F0A;   /* warning amber  */
  --status-in_progress:      #007AFF;   /* info blue (=accent) */
  --status-on_hold:          #8E8E93;   /* neutral gray   */
  --status-completed:        #34C759;   /* success green  */
  --status-disputed:         #FF6B00;   /* orange         */
  --status-refunded:         #FF3B30;   /* danger red     */
  --status-cancelled:        #FF3B30;   /* danger red     */

}

/* ── Dark theme overrides ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --pico-primary: #0A84FF;
  --accent:       #0A84FF;
  --accent-hover: #338FFF;

  /* Status tints — slightly brighter on dark for readability */
  --status-pending:          #98989D;
  --status-awaiting_payment: #FFB340;
  --status-in_stock:         #FFB340;
  --status-in_progress:      #0A84FF;
  --status-on_hold:          #98989D;
  --status-completed:        #30D158;
  --status-disputed:         #FF8C00;
  --status-refunded:         #FF453A;
  --status-cancelled:        #FF453A;

  --shadow-card:  0 1px 4px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .22);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .35);
}

/* ── Reduced-motion guard ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .deals-list tbody tr.deal-row:hover {
    transform: none;
  }

  dialog.modal-form > article,
  dialog.modal-detail > article {
    animation: none !important;
  }
}


/* === COMPONENTS ============================================================ */

/* ── Summary grid ─────────────────────────────────────────────────────────── */
#summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Итого + По месяцам, equal width on desktop */
  gap: 16px;
}

@media (max-width: 768px) {
  #summary-grid {
    grid-template-columns: 1fr; /* stack vertically on mobile */
  }
}

/* «По месяцам» — one month per line, never wrapping (month left, ₽ right). */
.monthly-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

.monthly-breakdown li {
  /* Fixed-track 3-col bar row: [label | track | value].
     FIXED label/value columns (not auto) — auto sizes to each row's text, so
     different month-label lengths («Август 2025» vs «Сентябрь 2025») would push
     the track to a different x per row and the bar left-edges would not align.
     Fixed columns guarantee track left+right edges line up across every row.
     Mirrors .bar-chart__row (same tokens) so both surfaces are identical. */
  display: grid;
  grid-template-columns: var(--bar-label-col) minmax(0, 1fr) var(--bar-value-col);
  align-items: center;
  gap: 12px;
  /* No horizontal padding — the label left edge sits at the widget content edge
     (= the .widget-header icon), so months align with the «По месяцам» title.
     The freed horizontal space goes to the track. Vertical 6px for row breathing. */
  padding: 6px 0;
  white-space: nowrap;
}

.monthly-breakdown .mb-amounts {
  /* Grid col 3 (value column) — mirrors .bar-chart__value: right-aligned, tabular. */
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 0;
}

.monthly-breakdown .mb-prov {
  opacity: 0.75; /* provisional «в работе» reads as secondary */
}

/* ── Monthly breakdown mini-bars (inline data bars, no JS) ──────────────── */
/* .mb-month: label auto-width (CLAUDE.md: auto/max-content + nowrap, NOT min-content)
   Grid item in col 1 — same role as .bar-chart__label in the unified 3-col bar layout. */
.monthly-breakdown .mb-month {
  font-size: 13px;
  color: var(--pico-muted-color);
  white-space: nowrap;          /* never break label */
  min-width: 0;
}
/* .mb-track: grid col 2 — flexible groove between label and value.
   Shares visual token with .bar-chart__track (same border-radius/bg/overflow). */
.monthly-breakdown .mb-track {
  width: 100%;
  height: 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pico-muted-border-color, #e0e0e0) 60%, transparent);
  overflow: hidden;
}
/* .mb-fill: data bar — width set inline as a percentage */
.monthly-breakdown .mb-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  transition: width var(--transition-fast, 150ms ease-out);
}
/* Negative months — red-tinted bar */
.monthly-breakdown .mb-fill--negative {
  background: color-mix(in srgb, var(--status-refunded) 25%, transparent);
}

/* ── Amount helpers ──────────────────────────────────────────────────────── */
.amount-negative {
  color: var(--pico-del-color);
}

/* ── Numeric cells ───────────────────────────────────────────────────────── */
td.numeric, th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Deals table wrapper (sticky scroll) ────────────────────────────────── */
#deals-table-wrapper {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--pico-table-border-color, #e0e0e0);
  border-radius: 4px;
}

#deals-table-wrapper table {
  border-collapse: collapse;
  width: 100%;
}

/* Single-line rows: headers + cells never wrap */
#deals-table-wrapper th,
#deals-table-wrapper td {
  white-space: nowrap;
}

/* «Объект» + «Покупатель» truncate with ellipsis instead of wrapping; full text on
   hover via the cells' title attr (set in the template). Narrowed so the «Оплата»
   column has room (260621). */
#deals-table-wrapper td.subject-cell,
#deals-table-wrapper td.buyer-cell {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The whole row is clickable — the product link is plain text, not a link */
#deals-table-wrapper td.subject-cell a {
  text-decoration: none;
  color: inherit;
}

/* ── Deal row — clean hover lift (260616-ien: row tint removed; color in pill only) ─── */
/* Status color now lives exclusively in the per-row status pill (.status-chip-select).
   Rows are clean (no permanent tint); only a subtle hover lift signals interactivity. */
.deals-list tbody tr.deal-row {
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}

/* Thin bottom separator on cells — replaces the old border-top row separator */
.deals-list tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 18px;
}

/* Hover: subtle lighten + slight lift — compositor-friendly (transform/background only) */
.deals-list tbody tr.deal-row:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

/* ── Sticky table header ─────────────────────────────────────────────────── */
#deals-table-wrapper thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pico-card-background-color, #f9f9fb);
  font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--pico-table-border-color, #e0e0e0);
}

/* ── Status chips row ────────────────────────────────────────────────────── */
.status-chips {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 16px;
  /* Telegram-style category bar: subtle divider from the table below, and a
     single non-wrapping row that scrolls horizontally with a hidden scrollbar. */
  border-bottom: 1px solid var(--pico-muted-border-color);
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox */
}

.status-chips::-webkit-scrollbar {
  display: none;                  /* WebKit/Blink */
}

/* ── Base chip pill ──────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  border: 1px solid var(--pico-muted-border-color, #e0e0e0);
  border-radius: var(--radius-pill);   /* D-04: pill shape */
  background: var(--pico-card-background-color, #f9f9fb);
  color: var(--pico-color, #333);
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  text-decoration: none;   /* for <a> chips (attachment chips) */
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
}

.chip:hover:not(.chip-active) {
  background: var(--pico-muted-color, #e8e8e8);
  border-color: var(--pico-primary, #007AFF);
}

.chip:focus-visible {
  outline: 2px solid var(--pico-primary, #007AFF);
  outline-offset: 2px;
}

/* Active (selected) chip — filled solid */
.chip-active {
  background: var(--pico-primary, #007AFF);
  color: #fff;
  border-color: var(--pico-primary, #007AFF);
  font-weight: 600;
}

/* ── Status-color chip variants (D-04, 9 real codes) ───────────────────── */
/* Tinted: translucent colored bg + solid colored text + colored border */

.chip--pending {
  background: color-mix(in srgb, var(--status-pending) 14%, transparent);
  color: var(--status-pending);
  border-color: color-mix(in srgb, var(--status-pending) 35%, transparent);
}
.chip--pending.chip-active {
  background: var(--status-pending);
  color: #fff;
  border-color: var(--status-pending);
}

.chip--awaiting_payment {
  background: color-mix(in srgb, var(--status-awaiting_payment) 14%, transparent);
  color: var(--status-awaiting_payment);
  border-color: color-mix(in srgb, var(--status-awaiting_payment) 35%, transparent);
}
.chip--awaiting_payment.chip-active {
  background: var(--status-awaiting_payment);
  color: #fff;
  border-color: var(--status-awaiting_payment);
}

.chip--in_stock {
  background: color-mix(in srgb, var(--status-in_stock) 14%, transparent);
  color: var(--status-in_stock);
  border-color: color-mix(in srgb, var(--status-in_stock) 35%, transparent);
}
.chip--in_stock.chip-active {
  background: var(--status-in_stock);
  color: #fff;
  border-color: var(--status-in_stock);
}

.chip--in_progress {
  background: color-mix(in srgb, var(--status-in_progress) 14%, transparent);
  color: var(--status-in_progress);
  border-color: color-mix(in srgb, var(--status-in_progress) 35%, transparent);
}
.chip--in_progress.chip-active {
  background: var(--status-in_progress);
  color: #fff;
  border-color: var(--status-in_progress);
}

.chip--on_hold {
  background: color-mix(in srgb, var(--status-on_hold) 14%, transparent);
  color: var(--status-on_hold);
  border-color: color-mix(in srgb, var(--status-on_hold) 35%, transparent);
}
.chip--on_hold.chip-active {
  background: var(--status-on_hold);
  color: #fff;
  border-color: var(--status-on_hold);
}

.chip--completed {
  background: color-mix(in srgb, var(--status-completed) 14%, transparent);
  color: var(--status-completed);
  border-color: color-mix(in srgb, var(--status-completed) 35%, transparent);
}
.chip--completed.chip-active {
  background: var(--status-completed);
  color: #fff;
  border-color: var(--status-completed);
}

.chip--disputed {
  background: color-mix(in srgb, var(--status-disputed) 14%, transparent);
  color: var(--status-disputed);
  border-color: color-mix(in srgb, var(--status-disputed) 35%, transparent);
}
.chip--disputed.chip-active {
  background: var(--status-disputed);
  color: #fff;
  border-color: var(--status-disputed);
}

.chip--refunded {
  background: color-mix(in srgb, var(--status-refunded) 14%, transparent);
  color: var(--status-refunded);
  border-color: color-mix(in srgb, var(--status-refunded) 35%, transparent);
}
.chip--refunded.chip-active {
  background: var(--status-refunded);
  color: #fff;
  border-color: var(--status-refunded);
}

.chip--cancelled {
  background: color-mix(in srgb, var(--status-cancelled) 14%, transparent);
  color: var(--status-cancelled);
  border-color: color-mix(in srgb, var(--status-cancelled) 35%, transparent);
}
.chip--cancelled.chip-active {
  background: var(--status-cancelled);
  color: #fff;
  border-color: var(--status-cancelled);
}

/* ── Status badge pills (table status cell) ─────────────────────────────── */
.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.status-pending {
  background: color-mix(in srgb, var(--status-pending) 28%, transparent);
  color: var(--status-pending);
  border-color: color-mix(in srgb, var(--status-pending) 35%, transparent);
}
.status-awaiting_payment {
  background: color-mix(in srgb, var(--status-awaiting_payment) 28%, transparent);
  color: var(--status-awaiting_payment);
  border-color: color-mix(in srgb, var(--status-awaiting_payment) 35%, transparent);
}
.status-in_stock {
  background: color-mix(in srgb, var(--status-in_stock) 28%, transparent);
  color: var(--status-in_stock);
  border-color: color-mix(in srgb, var(--status-in_stock) 35%, transparent);
}
.status-in_progress {
  background: color-mix(in srgb, var(--status-in_progress) 28%, transparent);
  color: var(--status-in_progress);
  border-color: color-mix(in srgb, var(--status-in_progress) 35%, transparent);
}
.status-on_hold {
  background: color-mix(in srgb, var(--status-on_hold) 28%, transparent);
  color: var(--status-on_hold);
  border-color: color-mix(in srgb, var(--status-on_hold) 35%, transparent);
}
.status-completed {
  background: color-mix(in srgb, var(--status-completed) 28%, transparent);
  color: var(--status-completed);
  border-color: color-mix(in srgb, var(--status-completed) 35%, transparent);
}
.status-disputed {
  background: color-mix(in srgb, var(--status-disputed) 28%, transparent);
  color: var(--status-disputed);
  border-color: color-mix(in srgb, var(--status-disputed) 35%, transparent);
}
.status-refunded {
  background: color-mix(in srgb, var(--status-refunded) 28%, transparent);
  color: var(--status-refunded);
  border-color: color-mix(in srgb, var(--status-refunded) 35%, transparent);
}
.status-cancelled {
  background: color-mix(in srgb, var(--status-cancelled) 28%, transparent);
  color: var(--status-cancelled);
  border-color: color-mix(in srgb, var(--status-cancelled) 35%, transparent);
}

/* ── Inline status editor — always-visible <select> styled as the status pill ──
   Robust replacement for the old badge-reveal/onblur dance (260614-0zk): a native
   <select> with hx-post fires change→POST directly (no focus/blur race). It carries
   the status-{code} class for the tint/colour; the chevron is set here as LONGHAND
   background-image so it survives the status-{code} `background` shorthand above
   (later source order + longhand wins the background-image property; background-color
   stays the status tint). Placed AFTER the status-* colour block deliberately. */
.status-chip-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  width: auto;                     /* override PicoCSS select width:100% — size to content */
  max-width: 170px;                /* compact pill, not full-cell-width */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 3px 22px 3px 8px;       /* right padding leaves room for the chevron */
  border-radius: var(--radius-pill);
  border: 1px solid transparent;   /* status-{code} sets border-color */
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 11px;
}
.status-chip-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 8px;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

/* ── Buttons (D-06): filled accent primary, tinted secondary ────────────── */
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  border-radius: var(--radius-button);
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), opacity var(--transition-fast);
}

button.secondary,
a.secondary,
[role="button"].secondary {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

button.secondary:hover,
a.secondary:hover,
[role="button"].secondary:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

button.secondary:active,
a.secondary:active,
[role="button"].secondary:active {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ── Inputs + textarea — rounded radius + accent focus ring ─────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea {
  border-radius: var(--radius-button);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ── Select — unified look: appearance:none, custom chevron, accent focus ── */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--pico-card-background-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-button);
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  color: var(--pico-color);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ── Number inputs — remove ↑↓ spinner arrows globally ──────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Form: amount + currency row ─────────────────────────────────────────── */
.amount-currency-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.amount-currency-row input {
  flex: 1;
  margin-bottom: 0;
}
.amount-currency-row select {
  flex: 0 0 auto;
  width: auto;
  min-width: 7rem;   /* room for 3-letter code + Pico chevron */
  margin-bottom: 0;
}

/* ── Inline field error ───────────────────────────────────────────────────── */
.form-error {
  color: var(--pico-del-color);
  font-size: 14px;
  display: block;
  margin-top: 4px;
}

/* ── Form actions row ────────────────────────────────────────────────────── */
.form-actions {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 24px;
}
.form-actions > * {
  margin-bottom: 0;
}
.form-actions .secondary {
  flex: 1;
}
.form-actions button[type="submit"] {
  flex: 2;
}

/* ── Modal: frosted-glass backdrop (D-05) ────────────────────────────────── */
dialog.modal::backdrop {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, .35);
}

/* ── Modal dialog — add/edit form (modal-form): compact 560px ───────────── */
/* Modifier class on <dialog> avoids the descendant-leak bug where the old
   generic `dialog.modal article` selector clamped nested <article> cards in
   the detail modal to 560px (260613-ppn Fix C). */
dialog.modal-form > article {
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  /* padding-top 0 — the sticky <header> owns its top padding so it pins flush (260618-u67). */
  padding: 0 24px 24px;
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  animation: modal-slide-up 220ms cubic-bezier(0.32, 0, 0.21, 1) both;
}

/* ── Modal dialog — detail view (modal-detail): compact 720px (260617-1tj) ─ */
dialog.modal-detail > article {
  width: min(720px, 94vw);
  max-width: 720px;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* No bottom padding: the footer (last child) is flush to the bottom so its dark strip reaches
     the modal edge with no gap; the footer adds its own balanced inner padding (260617-2ey).
     No TOP padding either: the sticky #deal-header owns its top padding so it pins flush with no
     gap above (260618-u67). */
  padding: 0 32px 0;
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  animation: modal-slide-up 220ms cubic-bezier(0.32, 0, 0.21, 1) both;
}

/* Tighter padding on phones (detail only — form already uses 24px) */
@media (max-width: 768px) {
  dialog.modal-detail > article { padding: 0 24px 0; }
}

/* Nested section cards align flush within the detail modal card */
dialog.modal-detail > article > section { margin-left: 0; margin-right: 0; }

/* Inner detail cards fill the full modal width (no descendant-leak since the
   generic 560px rule is removed; explicit 100% for clarity). */
dialog.modal-detail > article > section,
dialog.modal-detail > article > section > article {
  width: 100%;
  max-width: 100%;
}

/* Long titles / values never overflow the detail modal bounds */
dialog.modal-detail > article :is(h1, h2, h3, p, dt, dd) { overflow-wrap: anywhere; }

/* Modal header carries only the × close button — strip PicoCSS's sectioning
   divider + shaded background so no horizontal line sits under/behind the
   button (both light and dark themes). Button position is unchanged. */
dialog.modal-detail > article > header {
  border-bottom: none;
  background: transparent;
}

/* ── Edit modal sticky header (260618-u67) ──────────────────────────────── */
/* Pinned «Редактировать сделку #N» + × row inside the form modal.
   article already scrolls (overflow-y:auto + max-height:90vh). Negative
   horizontal margins cancel the article's 24px padding so the opaque bg
   reaches edge-to-edge (no content peeks at the sides when scrolling). */
dialog.modal-form > article > header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pico-card-background-color);
  /* article padding-top moved onto the header + zeroed on the article → sticky top:0 pins flush,
     no padding band above for content to peek through (260618-u67). */
  margin-left: -24px;
  margin-right: -24px;
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 6px 12px -8px rgba(0, 0, 0, .5);
}

/* ── Compact form internals — modal-form (add/edit deal + widget settings) ── */
dialog.modal-form :is(input, select, textarea) {
  padding: 8px 12px;
  font-size: 14px;
  height: auto;            /* defeat PicoCSS computed min-height — size to padding */
  margin-bottom: 10px;     /* tighter vertical rhythm than PicoCSS --pico-spacing */
}
/* Keep the amount+currency row flush — re-assert zero margin at modal-form
   specificity (the broad rule above outranks the base .amount-currency-row rule). */
dialog.modal-form .amount-currency-row :is(input, select) {
  margin-bottom: 0;
}

/* Datepicker display: zero the modal-form input margin-bottom so the .datepicker wrapper
   hugs the input — otherwise the 10px margin inflates the wrapper and the absolutely-
   centered (top:50%) calendar icon sits ~5px below the input's centre. Row rhythm is kept
   by the sibling field + grid gap (same approach as the amount-currency-row carve-out). */
dialog.modal-form .datepicker__display {
  margin-bottom: 0;
}

dialog.modal-form label {
  font-size: 13px;
  margin-bottom: 8px;
}

dialog.modal-form fieldset { margin-bottom: 12px; }

dialog.modal-form legend { font-size: 13px; }

/* Footer: compact, right-aligned — NOT full-width flex:1/flex:2 */
dialog.modal-form .form-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* width:auto is REQUIRED — PicoCSS defaults buttons to width:100%; with flex-basis
   auto + flex-shrink:0 both buttons would resolve to 100% and overflow the modal
   (the secondary spills off the LEFT edge under justify-content:flex-end). The
   codebase convention (.add-deal-btn / .plan-fact-save / .widget-edit-actions)
   always sets width:auto to defeat this — the prior 260613-ppn footer rule omitted it. */
dialog.modal-form .form-actions .secondary,
dialog.modal-form .form-actions button[type="submit"] {
  flex: 0 0 auto;
  width: auto;
  padding: 8px 20px;
}

/* Modal open animation — sheet feel (slight translateY + opacity) */
@keyframes modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Typography: 2-weight system ─────────────────────────────────────────── */
h2, h3 {
  font-weight: 700;
}

/* ── Deal detail header row ──────────────────────────────────────────────── */
.deal-header-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 8px;
}
.deal-header-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  margin-bottom: 0;
}

/* ── Computed header values (margin, cycle) ──────────────────────────────── */
.deal-header-computed {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.deal-header-computed dt {
  font-size: 14px;
  color: var(--pico-muted-color);
  margin-bottom: 0;
}
.deal-header-computed dd {
  font-weight: 700;
  margin-bottom: 0;
  margin-left: 0;
}

/* ── Facts definition list ───────────────────────────────────────────────── */
.deal-facts-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 0;
}
.deal-facts-dl dt {
  color: var(--pico-muted-color);
  font-size: 14px;
  margin-bottom: 0;
  /* auto label column + nowrap: keep 'Дата начала' horizontal — never let the
     inherited overflow-wrap:anywhere collapse the label to one char per line */
  white-space: nowrap;
}
.deal-facts-dl dd {
  margin: 0;
  /* long values (e.g. '10.0000 USD (Курс неизвестен — ₽ недоступно)') wrap cleanly */
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .deal-facts-dl {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 24px;
  }
}

/* ── Comments timeline ────────────────────────────────────────────────────── */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.comment-entry {
  border-bottom: 1px solid var(--pico-table-border-color, #e0e0e0);
  padding: 8px 0;
}
.comment-entry:last-child {
  border-bottom: none;
}
.comment-timestamp {
  display: block;
  font-size: 14px;
  color: var(--pico-muted-color);
  margin-bottom: 4px;
}

/* ── Attachment chips row ─────────────────────────────────────────────────── */
.attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.attachment-chips .chip {
  text-decoration: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── HTMX loading — disable double-submit ────────────────────────────────── */
#deal-header.htmx-request select,
#comments-section.htmx-request button,
#attachments-section.htmx-request button {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Deal action footer (Edit + Delete) ──────────────────────────────────── */
.deal-actions {
  display: flex;
  justify-content: space-between;
  padding: 24px 32px;
  border-top: 1px solid var(--pico-muted-border-color);
  gap: 16px;
}

/* Destructive (delete) button — red outline, transparent bg */
.destructive {
  color: var(--pico-del-color, #dc3545);
  border-color: currentColor;
  background: transparent;
}

.destructive:hover {
  background: color-mix(in srgb, var(--pico-del-color, #dc3545) 12%, transparent);
}

@media (max-width: 640px) {
  .deal-actions {
    flex-direction: column-reverse;
  }
  .deal-actions button {
    width: 100%;
  }
}

/* ── Deals list table (dashboard) ─────────────────────────────────────────── */
/* All rules scoped under .deals-list — no leaks to nested tables (CONVENTIONS) */
.deals-list {
  width: 100%;
  table-layout: fixed;
}

.deals-list th,
.deals-list td {
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  /* Subtle vertical separator so adjacent money columns never read as merged. */
  border-right: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 50%, transparent);
}

/* All column headers centered — uniform header row regardless of each column's
   cell alignment (cells keep their own align: text left, numbers/status center). */
.deals-list thead th {
  text-align: center;
}

/* Columns (10): 1 № · 2 Дата · 3 Объект · 4 Кол-во · 5 Закуп · 6 Реализация
   · 7 Маржа · 8 Покупатель · 9 Оплата · 10 Статус. */

/* Last column (Статус) — no trailing separator. */
.deals-list th:nth-child(10),
.deals-list td:nth-child(10) {
  border-right: none;
}

/* Ellipsis truncation applies ONLY to the two flexible text columns' data
   cells (Объект col 3, Покупатель col 8) — never to headers (always full),
   money/qty/date/№ cells (always full), or status-chip badges (semantic).
   Each truncating cell carries title="full". */
.deals-list td:nth-child(3),
.deals-list td:nth-child(8) {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* col 1: № — deal id; 70px, centered, muted, tabular digits for a clean column */
.deals-list th:nth-child(1),
.deals-list td:nth-child(1) {
  width: 70px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--pico-muted-color);
}

/* col 2: Дата — 130px so the DD.MM.YYYY value ('11.06.2026') fully clears Объект
   (narrows to 100px on mobile, below). */
.deals-list th:nth-child(2),
.deals-list td:nth-child(2) {
  width: 130px;
}

/* col 3: Объект — flexible ellipsis column */
.deals-list th:nth-child(3),
.deals-list td:nth-child(3) {
  width: auto;
}

/* col 4: Кол-во — centered */
.deals-list th:nth-child(4),
.deals-list td:nth-child(4) {
  width: 90px;
  text-align: center;
}

/* col 5: Закуп — money, centered */
.deals-list th:nth-child(5),
.deals-list td:nth-child(5) {
  width: 140px;
  text-align: center;
}

/* col 6: Реализация */
.deals-list th:nth-child(6),
.deals-list td:nth-child(6) {
  width: 140px;
  text-align: center;
}

/* col 7: Маржа */
.deals-list th:nth-child(7),
.deals-list td:nth-child(7) {
  width: 140px;
  text-align: center;
}

/* col 8: Покупатель — flexible ellipsis column */
.deals-list th:nth-child(8),
.deals-list td:nth-child(8) {
  width: auto;
}

/* col 9: Оплата — payment-progress mini bar; compact fixed width (260621). */
.deals-list th:nth-child(9),
.deals-list td:nth-child(9) {
  width: 96px;
  text-align: center;
}

/* col 10: Статус — 180px so the inline <select> fits the longest label
   ('Ждёт оплаты') without truncation; centered, no ellipsis. */
.deals-list th:nth-child(10),
.deals-list td:nth-child(10) {
  width: 180px;
  text-align: center;
}

/* Inline status editor (col 10): centre the status pill in the column — pills form a
   tidy vertical column, not pinned left/right (260614-1mf). */
.status-cell {
  text-align: center;
  vertical-align: middle;
}
.status-chip-select {
  margin: 0 auto;   /* belt-and-suspenders centring alongside the cell text-align */
}
.status-cell .status-badge {
  cursor: pointer;
}

.status-inline-select {
  font-size: 13px;
  padding: 4px 28px 4px 8px; /* right padding clears unified chevron; left/vertical kept compact */
  width: 100%;               /* fill the 180px cell so the label isn't truncated */
  border-radius: var(--radius-button);
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
  color: var(--pico-color);
}

@media (max-width: 1024px) {
  .deals-list th,
  .deals-list td {
    padding: 5px 6px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  /* Hide Объект (col 3) and Покупатель (col 8) on narrow screens */
  .deals-list th:nth-child(3),
  .deals-list td:nth-child(3),
  .deals-list th:nth-child(8),
  .deals-list td:nth-child(8) {
    display: none;
  }

  /* Дата (col 2) back to 100px on mobile — smaller font still fits '10.06.2026'. */
  .deals-list th:nth-child(2),
  .deals-list td:nth-child(2) {
    width: 100px;
  }
}

/* ── «Оплата» payment-progress column (260621) ───────────────────────────── */
/* Header reads white like every other column header — no accent override. The
   column is monochrome white; the bar alone carries the threshold colour. The
   .pay-col-head class is kept as a hook but sets no colour. */

/* Bar + percent label sit on one baseline. The track is a fixed-width rounded
   pill; the fill width is data-driven (the one allowed inline style="width:N%").
   Fill colour is a SOLID band by threshold — NOT a gradient. */
.pay-cell {
  text-align: center;
  vertical-align: middle;
}
.pay-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pay-track {
  display: inline-block;
  width: 46px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  vertical-align: middle;
}
.pay-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.pay-fill--red {
  background: #ff6b6b;
}
.pay-fill--amber {
  background: #f0a83c;
}
.pay-fill--green {
  background: #30d158;
}
.pay-label {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  /* White percent text — only the BAR carries the threshold colour (260621). */
  color: #fff;
}
.pay-label--muted {
  color: rgba(255, 255, 255, 0.4);
}
.pay-dash {
  color: rgba(255, 255, 255, 0.4);
}

/* ── Bar chart (D-3: server-rendered, no JS/canvas) ──────────────────────── */
/* Pure CSS flex bars. Width is data-driven via inline style="width: N%"      */
/* (the ONE allowed inline style — data percentage cannot be expressed in      */
/* a static CSS class). All tokens reuse the existing accent / status system. */

.bar-chart {
  width: 100%;
}

.bar-chart__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pico-muted-color);
  margin-bottom: 8px;
  margin-top: 0;
}

.bar-chart__empty {
  color: var(--pico-muted-color);
  font-size: 14px;
  padding: 8px 0;
  margin: 0;
}

.bar-chart__row {
  display: grid;
  /* FIXED label/value columns (shared tokens with .monthly-breakdown li) so the
     track left+right edges align across every row regardless of label length —
     auto would size to each row's text and break cross-row alignment. */
  grid-template-columns: var(--bar-label-col) minmax(0, 1fr) var(--bar-value-col);
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  white-space: nowrap;
}

.bar-chart__label {
  font-size: 13px;
  color: var(--pico-muted-color);
  white-space: nowrap;   /* see CLAUDE.md CSS convention: label column = auto + nowrap */
  min-width: 0;
}

.bar-chart__track {
  background: color-mix(in srgb, var(--pico-muted-border-color, #e0e0e0) 60%, transparent);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
  width: 100%;
}

.bar-chart__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent, #007AFF);
  /* No transition: prefers-reduced-motion respected by omitting animation entirely */
}

.bar-chart__fill--negative {
  background: var(--status-refunded, #FF3B30);  /* reuse the danger-red status token */
}

.bar-chart__value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 0;
}

/* Dark theme — track color is naturally adaptive via pico-muted-border-color;
   fill colors use the design-system tokens which already have dark overrides. */

@media (max-width: 480px) {
  /* Collapse label column on very narrow screens — bars still read correctly */
  .bar-chart__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .bar-chart__label {
    display: none;
  }
}

/* Hover brighten on bar row */
.bar-chart__row:hover .bar-chart__fill {
  filter: brightness(1.12);
  transition: filter var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .bar-chart__row:hover .bar-chart__fill {
    transition: none;
  }
}


/* =============================================================================
   ANALYTICS PAGE
   Cards, period tabs, channel progress, responsive grid
   ============================================================================= */

/* ── Analytics responsive card grid ─────────────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Metric card surface ─────────────────────────────────────────────────────── */
.metric-card {
  background: var(--pico-card-background-color);
  border-radius: var(--radius-card);
  padding: 20px;
  border-left: 3px solid transparent;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.metric-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .metric-card:hover {
    transform: none;
  }
}

/* Per-group left accent modifiers.
   NOTE: --pipeline and --cycle classes are legacy (templates removed them in 260616-1et);
   their colored left stripes are neutralized here to uniform border (260618-0q8 audit). */
.metric-card--pipeline {
  border: 1px solid rgba(255, 255, 255, 0.08);  /* neutralized from status-awaiting_payment accent */
  border-radius: 16px;
}
.metric-card--money    {
  /* No status left-accent — uniform card border on all sides, like the other blocks.
     The `border` shorthand resets the base .metric-card `border-left:3px solid transparent`. */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}
.metric-card--channels {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #0d1320;
}
.metric-card--cycle    {
  border: 1px solid rgba(255, 255, 255, 0.08);  /* neutralized from status-pending accent */
  border-radius: 16px;
}

/* ── «Скорость капитала» card — mirrors .metric-card--money / --operations uniform border ── */
.metric-card--velocity {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);  /* override base 3px left-accent */
  border-radius: 16px;
  padding: 20px 22px;
}

/* No-data muted note */
.velocity-no-data {
  font-size: 14px;
  color: #7d8aa0;
  margin: 0;
}

/* Trend chart section */
.velocity-trend-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.velocity-trend-title {
  font-size: 12px;
  font-weight: 500;
  color: #7d8aa0;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bar chart row: columns flex-equal, bars aligned to bottom */
.velocity-trend {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
}

.velocity-trend__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 4px;
}

/* Bar wraps the full available height so height% on bar works correctly */
.velocity-trend__bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.velocity-trend__bar {
  width: 100%;
  background: #0a84ff;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.2s ease;
}

.velocity-trend__bar--empty {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
}

.velocity-trend__label {
  font-size: 10px;
  color: #7d8aa0;
  white-space: nowrap;
  line-height: 1;
}

/* ── Compact «Операции» card — exact approved mockup (4+2 tiles + scrollable footer) ──
   Fixed dark palette per the approved design — intentionally NOT theme-adaptive: this is
   the owner's signed-off look. The card is neutral (no status left-accent), tiles carry
   their own surface, and the longest-open rows are plain text (no Pico role=button blue). */

/* Neutral card — overrides the base .metric-card left-accent for the operations block. */
.metric-card--operations {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);  /* kill the 3px status accent */
  border-radius: 16px;
  padding: 20px 22px;
}

/* Objects analytics card — mirrors .metric-card--operations */
.metric-card--objects {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);  /* kill base 3px accent */
  border-radius: 16px;
  padding: 20px 22px;
}

/* ── «Прогноз» forecast block (ОБЗОР, 260627) — run-rate projection ──────────── */
.metric-card--forecast {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  /* Narrow + left-aligned — ~half-width, flush to the left of its section (under «Операции»). */
  max-width: 720px;
  margin: 14px auto 0 0;       /* below the top grid; left-flush (right margin auto) */
  -webkit-user-select: none;
  user-select: none;
}
.forecast-hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 14px 0 12px;
}
.forecast-hero__value {
  font-size: 26px;
  font-weight: 600;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
}
.forecast-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.forecast-pill--green {
  color: #30d158;
  background: color-mix(in srgb, #30d158 14%, transparent);
}
.forecast-pill--amber {
  color: #f0a83c;
  background: color-mix(in srgb, #f0a83c 14%, transparent);
}
/* Projection bar: muted track, solid-green факт + striped-green remainder + white goal tick. */
.forecast-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: visible;            /* goal marker sticks out */
  margin: 4px 0 16px;
}
.forecast-bar__fact,
.forecast-bar__proj {
  position: absolute;
  top: 0;
  height: 100%;
  background-clip: padding-box;
}
.forecast-bar__fact {
  left: 0;
  border-radius: 999px 0 0 999px;
  background: #30d158;
}
.forecast-bar__proj {
  border-radius: 0 999px 999px 0;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, #30d158 55%, transparent) 0,
    color-mix(in srgb, #30d158 55%, transparent) 5px,
    color-mix(in srgb, #30d158 22%, transparent) 5px,
    color-mix(in srgb, #30d158 22%, transparent) 10px
  );
}
.forecast-bar__goal {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: #fff;
  border-radius: 1px;
  transform: translateX(-1px);
}
.forecast-rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.forecast-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.forecast-row dt {
  font-size: 13px;
  color: #9aa6bd;
}
.forecast-row dd {
  margin: 0;
  font-size: 14px;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
}
.forecast-row__hint {
  font-size: 11px;
  color: #7d8aa0;
}
.forecast-row--total dt,
.forecast-row--total dd {
  font-weight: 600;
  color: #e8eef7;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.forecast-context {
  margin: 14px 0 0;
  font-size: 12px;
  color: #7d8aa0;
}
.forecast-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #9aa6bd;
}

/* ── «Свои vs Брокер» earning-model block (ОБЗОР, 260627) ────────────────────── */
.metric-card--models {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  /* Same narrow + left-aligned shell as «Прогноз». */
  max-width: 720px;
  margin: 14px auto 0 0;
  -webkit-user-select: none;
  user-select: none;
}
/* Stacked profit-share bar */
.models-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 8px;
  background: rgba(255, 255, 255, 0.06);
}
.models-bar__seg {
  height: 100%;
}
.models-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
}
.models-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9aa6bd;
}
.models-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Compact table */
.models-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.models-table th,
.models-table td {
  padding: 6px 4px;
  text-align: left;
}
.models-table th.num,
.models-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.models-table thead th {
  font-size: 11px;
  font-weight: 500;
  color: #7d8aa0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.models-table td {
  color: #e8eef7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.models-table td .models-dot {
  margin-right: 7px;
}
.models-table__total td {
  font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  padding-top: 8px;
}
.models-caption {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #7d8aa0;
}

/* ── «Воронка сделок» deal-funnel block (ОБЗОР, 260627) ──────────────────────── */
.metric-card--funnel {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  /* Same narrow + left-aligned shell as «Прогноз». */
  max-width: 720px;
  margin: 14px auto 0 0;
  -webkit-user-select: none;
  user-select: none;
}
.funnel-stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 4px;
}
.funnel-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 10px 12px;
}
.funnel-row__label {
  font-size: 13px;
  color: #9aa6bd;
}
.funnel-row__bar {
  height: 12px;
  border-radius: 999px;
  background: #131c2e;
  overflow: hidden;
}
.funnel-row__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-clip: padding-box;
}
.funnel-row__count {
  font-size: 13px;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Drop-off note sits under the bar (spans the bar + count columns). */
.funnel-row__drop {
  grid-column: 2 / -1;
  font-size: 11px;
  margin-top: -4px;
}
.funnel-row__drop--cancelled {
  color: #ff8585;
}
.funnel-row__drop--awaiting {
  color: #f0a83c;
}
.funnel-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 14px 0;
}
.funnel-rates {
  display: flex;
  gap: 28px;
}
.funnel-rate {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.funnel-rate__value {
  font-size: 22px;
  font-weight: 600;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
}
.funnel-rate__label {
  font-size: 12px;
  color: #9aa6bd;
}
.funnel-rate__sub {
  font-size: 11px;
  color: #7d8aa0;
}
.funnel-caption {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #7d8aa0;
}

/* No text-selection highlight on the non-interactive analytics cards (260627):
   clicking the «Операции» / «Деньги» / «Объекты» card chrome (titles, labels, stat
   tiles, chart text, button-rows) no longer blue-highlights the text. This is purely
   the selection highlight — keyboard focus (:focus-visible rings), the clickable
   «Дольше всего открыты» rows, the intentional chart current-month ring and the
   segmented toggles are unaffected (user-select never touches focus/click). */
.metric-card--operations,
.metric-card--money,
.metric-card--objects {
  -webkit-user-select: none;
  user-select: none;
}

/* Keep the real DATA selectable/copyable: the «Объекты» search field and the
   analytics table values. (The stat tiles and headers stay non-selectable above.) */
.metric-card--objects .obj-analytics-search,
.metric-card--objects .obj-analytics-table {
  -webkit-user-select: text;
  user-select: text;
}

/* Card header: icon + title on one line */
.operations-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}

/* «?» help badge → top-right corner of the block, vertically centered on the title line
   (flex header pushes it to the far right). Applies to every analytics block. (260619-v7n) */
.operations-header .help-badge-wrap {
  margin-left: auto;
}

.operations-header__icon {
  color: #0a84ff;
  display: flex;
  align-items: center;
}

.operations-header__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #9aa6bd;
}

/* Tile grid rows — the card is a HALF-width widget, so tiles flow 2-up (2×3 total):
   row 1 (4 tiles) wraps to [В работе | Капитал] / [Ждут оплаты | Под риском >30д];
   row 2 (2 tiles) = [Средний цикл | Завершено за месяц]. */
.operations-tiles {
  display: grid;
  gap: 10px;
}

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

.operations-tiles--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

/* 6 tiles, 2 columns × 3 rows — ½-width Операции card (quick 260617-an-top) */
.operations-tiles--2x3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Individual tile — always a surface, never flat/transparent. */
.operations-tile {
  background: #131c2e;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.operations-tile__label {
  font-size: 12px;
  color: #7d8aa0;
  line-height: 1.25;
}

/* Long label (e.g. «Нереализованная прибыль») — slightly smaller so it wraps to two
   lines cleanly inside the tile instead of overflowing (260616-wdn). */
.operations-tile__label--tight {
  font-size: 11px;
}

.operations-tile__value {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: #e8eef7;
}

.operations-tile__sub {
  font-size: 13px;
  font-weight: 400;
  color: #7d8aa0;
}

/* Inline formula caption — shown under complex metric values only (HHI, CRn, Pareto,
   turnover, ROIC, CCC). Muted, thin top border to separate from the value. */
.metric-caption {
  font-size: 11px;
  color: #7d8aa0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin-top: 6px;
  padding-top: 5px;
  line-height: 1.3;
}

/* Amber accent — at-risk tile value */
.operations-tile--amber .operations-tile__value {
  color: #f0a83c;
}

/* Green accent — завершено tile value */
.operations-tile--green .operations-tile__value {
  color: #30d158;
}

/* Footer section: divider + label above the scrollable list */
/* ── «Дольше всего открыты» full-width deal table (260616-wnp) ────────────────
   Standalone table (NOT .deals-list — that class carries 10-column nth-child widths
   tuned for the deals-list column order, which differs here). Dark card, horizontal
   scroll on narrow so columns never squish. */
/* «Дольше всего открыты» now lives INSIDE the Операции card, below the tiles (260617-19z):
   a top divider + a muted sub-header, then the table. */
.operations-longest-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.operations-longest-subheader {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #c3ccdd;
}
.operations-longest-subheader__icon {
  display: inline-flex;
  color: #7d8aa0;
}

/* «Дольше всего открыты» — COMPACT LIST (quick 260617-an-top): one row per deal,
   «#id · object» left + days-open right (risk-colored). Scrollable when long. */
.longest-open-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 232px;            /* ~6 rows; scroll beyond */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.longest-open-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 4px;
  cursor: pointer;
  /* Fully defeat Pico's [role="button"] styling (blue fill/border/shadow) in EVERY state —
   * this is a plain list row, not a button. Only a thin bottom separator + hover lighten. */
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  transition: background-color 120ms ease;
}
.longest-open-row:last-child {
  border-bottom: none;
}
.longest-open-row:hover,
.longest-open-row:focus,
.longest-open-row:focus-visible,
.longest-open-row:active {
  background: rgba(255, 255, 255, 0.04);  /* subtle lighten only — NO blue fill */
  outline: none;
  box-shadow: none;
}

.longest-open-row__label {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: #6f7a90;            /* the «·» separator + fallback */
}
.longest-open-row__id {
  color: #6f7a90;            /* muted «#id» */
}
.longest-open-row__obj {
  color: #e8eef7;            /* object name */
}

.longest-open-row__days {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}
.longest-open-row__days--red {
  color: #ff6b6b;
  font-weight: 600;
}
.longest-open-row__days--amber {
  color: #f0a83c;
  font-weight: 600;
}
.longest-open-row__days--muted {
  color: #7d8aa0;
}

.operations-longest__empty {
  font-size: 13px;
  color: #7d8aa0;
  margin: 6px 0 0;
}

/* ── Key-number typography helpers ───────────────────────────────────────────── */
.metric-card__label {
  font-size: 13px;
  color: var(--pico-muted-color);
  margin: 0 0 2px;
}

.metric-card__value {
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* .metric-card__value.amount-negative inherits global .amount-negative color — no extra rule needed */

.metric-card__sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 16px;
}

.metric-card__sub dt,
.submetric-label {
  font-size: 12px;
  color: var(--pico-muted-color);
  margin: 0;
}

.submetric-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Period toggle (sticky tab strip) ────────────────────────────────────────── */
/* Re-uses existing .chip / .chip-active styles for the pills themselves.
   Only the container rule lives here. */
.period-toggle {
  display: flex;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0;
  background: var(--pico-background-color, #fff);
  margin-bottom: 16px;
}

/* ── Channel progress rows (Spotify "top artists" style) ─────────────────────── */
/* label column: max-content + nowrap per CLAUDE.md CSS convention */
.channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.channel-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
}

.channel-row__name {
  font-size: 14px;
  white-space: nowrap;
}

.channel-row__track {
  background: color-mix(in srgb, var(--pico-muted-border-color) 60%, transparent);
  border-radius: var(--radius-pill);
  height: 10px;
  overflow: hidden;
}

.channel-row__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.channel-row__fill--negative {
  background: var(--status-refunded);
}

.channel-row__value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION LAYOUT (260612-t7p)
   Appended after existing rules — DO NOT modify rules above this block.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar shell ───────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 232px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0b1018;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  z-index: 900;
}

/* ── Header: «f» mark + «fin» wordmark + collapse toggle (260617-0jg) ───────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sidebar-logo-mark {
  position: relative;        /* anchors the hover chevron overlay + tooltip (260617-16i) */
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, #0A84FF, #3d9bff);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}
/* «f» glyph + hover «›» overlay share the centre; only one is visible at a time. */
.sidebar-logo-mark__f {
  transition: opacity var(--transition-fast);
}
.sidebar-logo-mark__chevron {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;                /* hidden until collapsed + hover/focus */
  transition: opacity var(--transition-fast);
}
.sidebar-logo-mark__chevron svg {
  transform: rotate(180deg); /* chevron-left → chevron-right «›» */
}
.sidebar-logo-word {
  font-size: 20px;
  font-weight: 700;
  color: #e8eef7;
  letter-spacing: 0.01em;
}
.sidebar-collapse-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 9px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9aa6bd;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-collapse-btn:hover {
  background: #1c2740;
  color: #e8eef7;
}

/* ── Nav items ───────────────────────────────────────────────────────────────── */
/* Label width: auto/max-content + white-space:nowrap per CLAUDE.md CSS convention #1 */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 11px;
  color: #9aa6bd;
  text-decoration: none;
  white-space: nowrap;
  /* Compositor-friendly transition (no 'all' — web perf rule) */
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #e8eef7;
}

.nav-item.active {
  background: rgba(10, 132, 255, 0.14);
  color: #5fa8ff;
  font-weight: 600;
}
.nav-item.active .nav-icon {
  color: #5fa8ff;
}
/* 3px rounded blue accent bar on the LEFT edge of the active item (both states). */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #0A84FF;
}

/* ── Disabled nav item (Анализ — coming soon) ───────────────────────────────── */
.nav-item-disabled {
  opacity: .55;
  pointer-events: none;
  cursor: default;
}

/* ── «soon» badge (expanded) ────────────────────────────────────────────────── */
.nav-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #9aa6bd;
  margin-left: auto;
}

/* ── «soon» dot (collapsed only) — top-right of the icon ─────────────────────── */
.nav-dot {
  display: none;
  position: absolute;
  top: -2px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0A84FF;
}

/* ── Footer: theme toggle + logout (separated by a top border) ──────────────── */
.sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-logout-form {
  margin: 0;
}
/* Theme + logout reuse .nav-item layout but are <button> — reset native button chrome. */
.sidebar-action {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.sidebar-action--danger,
.sidebar-action--danger .nav-icon {
  color: #ff6b6b;
}
.sidebar-action--danger:hover {
  background: rgba(255, 107, 107, 0.10);
  color: #ff6b6b;
}
/* Compact footer utility rows (Тема/Выйти) — expanded only; collapsed tiles + nav above unchanged. */
.sidebar:not(.collapsed) .sidebar-footer { gap: 2px; }
.sidebar:not(.collapsed) .sidebar-action { padding: 7px 12px; }
.sidebar:not(.collapsed) .sidebar-action .nav-icon svg { width: 16px; height: 16px; }
.sidebar:not(.collapsed) .sidebar-action .nav-label { font-size: 13px; }

/* ── Main content area: offset by sidebar width ─────────────────────────────── */
.main-content {
  margin-left: 232px;
  padding: 24px;
}

/* ── Mobile hamburger button (hidden ≥768px) ─────────────────────────────────── */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1001;
}

/* ── Responsive: <768px — sidebar off-canvas, hamburger visible ─────────────── */
@media (max-width: 767px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-fast);
    z-index: 1000;
    box-shadow: var(--shadow-modal);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    padding: 16px;
  }

  .sidebar-toggle {
    display: inline-flex;
  }
}

/* =============================================================================
   SIDEBAR COLLAPSE + TOOLTIPS + LOGO-TOGGLE (260612-v3z)
   Appended after existing rules — DO NOT modify rules above this block.
   ============================================================================= */

/* ── Sidebar width transition ───────────────────────────────────────────────── */
.sidebar {
  transition: width 200ms ease, padding 200ms ease;
}

/* ── Nav icon ───────────────────────────────────────────────────────────────── */
.nav-icon {
  position: relative;            /* anchor for the «soon» .nav-dot */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}
.sidebar-collapse-icon {
  display: inline-flex;
  align-items: center;
  transition: transform 200ms ease;
}
/* chevron-left → chevron-right (collapsed) via rotation */
.sidebar.collapsed .sidebar-collapse-icon svg {
  transform: rotate(180deg);
}

/* ════════════════════ COLLAPSED STATE (72px icon rail) ════════════════════ */
.sidebar.collapsed {
  width: 72px;
  padding: 16px 14px;
}
.sidebar.collapsed + .main-content,
body:has(.sidebar.collapsed) .main-content {
  margin-left: 72px;
}

/* Hide all text/label elements (CRITICAL: «Выйти» label gone → no two-line wrap) */
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sidebar-logo-word {
  display: none;
}

/* Header → centred column (mark on top, toggle below) */
.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* Collapsed: the «f» mark IS the expand control; the standalone chevron tile is removed (260617-16i). */
.sidebar.collapsed .sidebar-collapse-btn {
  display: none;
}
.sidebar.collapsed .sidebar-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 22px;
}
/* Hover/focus → swap «f» for «›» + blue focus ring → signals «click to expand». */
.sidebar.collapsed .sidebar-logo-mark:hover,
.sidebar.collapsed .sidebar-logo-mark:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
  outline: none;
}
.sidebar.collapsed .sidebar-logo-mark:hover .sidebar-logo-mark__f,
.sidebar.collapsed .sidebar-logo-mark:focus-visible .sidebar-logo-mark__f {
  opacity: 0;
}
.sidebar.collapsed .sidebar-logo-mark:hover .sidebar-logo-mark__chevron,
.sidebar.collapsed .sidebar-logo-mark:focus-visible .sidebar-logo-mark__chevron {
  opacity: 1;
}

/* Every actionable item → 44×44 centred icon tile, radius 12 */
.sidebar.collapsed .nav-item {
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 auto;
  border-radius: 12px;
}
/* Active item keeps the blue tint; the left accent bar stays pinned to the tile's left edge */
.sidebar.collapsed .nav-item.active::before {
  left: -14px;                   /* reach to the rail edge (cancels the 14px padding) */
}

/* «soon» dot visible only when collapsed (the pill is hidden) */
.sidebar.collapsed .nav-dot {
  display: block;
}

/* ── Collapsed tooltip (CSS ::after + data-label) — every .nav-item incl. footer + logo mark ── */
.sidebar.collapsed .nav-item:hover::after,
.sidebar.collapsed .sidebar-logo-mark:hover::after,
.sidebar.collapsed .sidebar-logo-mark:focus-visible::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: #1c2740;
  color: #e8eef7;
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  z-index: 1100;
  pointer-events: none;
  font-weight: 400;
  font-size: 13px;
}

/* =============================================================================
   Period picker — unified Год + Месяц two-dropdown period selector
   260612-vtg: replaces the month select (dashboard) and period chip toggle (/analytics)
   Selects inherit the unified select rule from theme.css; only layout added here.
   ============================================================================= */

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

.period-picker select {
  min-width: 130px;
}

.period-picker select:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── G2 cumulative profit line (analytics, Task 4) ─────────────────────── */
/* Pure Jinja transform of g2_monthly_usd — no router change; theme-aware via var(). */
.g2-cumline-title {
  margin-top: 1rem;
  margin-bottom: .25rem;
  font-size: .85em;
  opacity: .7;
}

.g2-cumline {
  display: block;
  width: 100%;
  height: 120px;
  overflow: visible;
  margin-bottom: .25rem;
}

.g2-cumline__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Per-point dot rule is now unused (replaced by single endpoint dot) — kept for safety */
.g2-cumline__dot {
  fill: var(--accent);
}

/* Single endpoint dot at last cumulative point */
.g2-cumline__endpoint-dot {
  fill: var(--accent);
  stroke: none;
}

/* Subtle area fill under the cumulative line */
.g2-cumline__area {
  stroke: none;
}

.g2-cumline-labels {
  display: flex;
  justify-content: space-between;
  font-size: .7em;
  opacity: .6;
  margin-bottom: .125rem;
}

.g2-cumline-label {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.g2-cumline-endpoint {
  font-size: .85em;
  text-align: right;
  margin: 0;
}

/* ── Burn-up sparkline (plan/fact widget, Task 3) ──────────────────────── */
/* No <script>/<canvas>. Theme-aware via CSS var(). vector-effect="non-scaling-stroke"
   on polylines/lines in SVG ensures 2px stays 2px regardless of preserveAspectRatio=none. */
.burnup-spark {
  display: block;
  width: 100%;
  height: 48px;
  overflow: visible;
  margin-top: .5rem;
  /* color: drives the fill gradient stop-color via currentColor */
  color: var(--status-completed);
}

/* Actual cumulative line — green (at/above pace) */
/* Actual (Факт) line — fixed orange, stroke-only (260613-* legend scheme).
   fill:none with !important so an open <polyline> never fills its implied
   closed region — and so no modifier can re-introduce a fill (the prior
   --behind rule set fill:amber here, which CSS applied over the inline
   fill="none" and produced the persistent orange band). */
.burnup-spark .spark-actual {
  fill: none !important;
  stroke: var(--status-awaiting_payment);  /* orange = Факт */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pace reference line (Темп к цели) — green dashed, stroke-only */
.burnup-spark .spark-pace {
  fill: none !important;
  stroke: var(--status-completed);  /* green = темп к цели */
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: .7;
}

/* Today vertical marker — dashed */
.burnup-spark .spark-today {
  stroke: var(--muted, currentColor);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .6;
}

/* Today marker label — small muted, under the marker on the x-axis row */
.burnup-today-label {
  position: absolute;
  transform: translateX(-50%);
  bottom: -2px;
  font-size: 10px;
  color: var(--pico-muted-color);
  white-space: nowrap;
}

/* Burn-up legend — orange solid = Факт, green dashed = Темп к цели */
.burnup-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
  color: var(--pico-muted-color);
}
.burnup-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.burnup-legend__swatch { flex-shrink: 0; overflow: visible; }
.burnup-legend__line--actual {
  stroke: var(--status-awaiting_payment);
  stroke-width: 2;
  stroke-linecap: round;
}
.burnup-legend__line--pace {
  stroke: var(--status-completed);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ── Chart axis + gridline helpers (cumulative widget) ───────────────────────
   Used by templates/widgets/_cumulative.html.
   .chart-with-axis: flex row (Y-axis gutter | SVG).
   .chart-y-axis: left gutter with positioned tick labels.
   .chart-y-tick: individual label, absolutely positioned by top%.
   .chart-gridline: horizontal 1px gridline inside SVG (rendered before data).
   .chart-axis-line: 1px x-axis baseline inside SVG at the zero tick.
   ─────────────────────────────────────────────────────────────────────────── */

.chart-with-axis {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.chart-y-axis {
  position: relative;
  width: var(--chart-y-gutter);
  flex-shrink: 0;
  /* ticks are absolutely positioned inside this gutter */
}

.chart-y-tick {
  position: absolute;
  left: 0;
  right: auto;   /* left-hugging — labels next to the card edge, not mid-gutter */
  font-size: 11px;
  color: var(--pico-muted-color);
  white-space: nowrap;
  transform: translateY(-50%);
  line-height: 1;
}

.chart-gridline {
  stroke: color-mix(in srgb, var(--pico-muted-border-color) 40%, transparent);
  stroke-width: 1;
  fill: none;
}

.chart-axis-line {
  stroke: var(--pico-muted-border-color, rgba(128,128,128,.3));
  stroke-width: 1;
  fill: none;
}

/* G2 cumulative line fills the remaining width after the Y-axis gutter */
.g2-cumline {
  flex: 1;
  width: 100%;
}

/* ── Sparkline reference gridlines (plan-fact widget) ────────────────────── */
/* Horizontal 1px gridlines at each Y tick, rendered behind data lines. */

.burnup-spark .spark-gridline {
  stroke: color-mix(in srgb, var(--pico-muted-border-color) 35%, transparent);
  stroke-width: 1px;
  fill: none;
}

/* ── Burn-up chart layout: Y-axis column + SVG (260613-mpw) ─────────────── */

/* Outer container: flex row, position:relative so absolute fact-label works */
.burnup-chart {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-top: .5rem;
  max-height: 140px;
}

/* Y-axis label column — sits LEFT of the SVG. Narrow gutter so the SVG uses
   the full remaining card width (no big empty band on the left). */
.burnup-yaxis {
  position: relative;
  width: var(--chart-y-gutter);
  flex: 0 0 auto;
}

/* Individual Y-axis tick label: positioned by top% of chart height.
   Left-hugging (left:0, not right:4px) so labels sit next to the card edge
   instead of floating mid-gutter with a wide empty band to their left. */
.burnup-ytick {
  position: absolute;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--pico-muted-color);
  white-space: nowrap;
  line-height: 1;
}

/* SVG fills the remaining width after Y-axis gutter */
.burnup-chart .burnup-spark {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 80px;
  max-height: 140px;
  margin-top: 0;  /* override the default .burnup-spark margin-top: .5rem */
}

/* X-axis day labels row below the chart area */
.burnup-xaxis {
  position: relative;
  height: 1.2em;
  margin-left: var(--chart-y-gutter);  /* align with the SVG area (skip Y-axis gutter) */
  margin-top: 2px;
}

/* Individual X-axis day label: centered on its x_coord% */
.burnup-xtick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--pico-muted-color);
  white-space: nowrap;
  line-height: 1;
}

/* Fact end-label: muted value near the actual line end */
.burnup-fact-label {
  position: absolute;
  /* left/top set inline via style= in template */
  transform: translate(-105%, -130%);
  font-size: 11px;
  color: var(--pico-muted-color);
  white-space: nowrap;
  pointer-events: none;
  /* Offset to land ABOVE and LEFT of the actual line endpoint */
  margin-left: var(--chart-y-gutter);  /* account for Y-axis gutter so % is relative to SVG area */
}

/* «настроить цель» button — right-aligned in .widget-header flex row (260613-ppn Fix A) */
.plan-fact-edit-btn {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-pill, 999px);
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Add-deal button — compact, size-to-content (260613-ppn Fix B) ─────────── */
/* ── Header actions row: Refresh (LEFT) + Add-deal (RIGHT) ──────────────────
   justify-content:space-between places refresh on the left, add-deal on the right.
   align-items:stretch → refresh square auto-matches the add button's native height.
   margin:0 reset kills PicoCSS's default button margin-bottom offset.
   260616-kb1: add-deal moved to RIGHT; refresh stays LEFT. */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.header-actions > * {
  margin: 0;
}
.header-actions__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Add-deal button — blue #0A84FF pill (260616-kb1) ──────────────────────
   Blue fill, white text, radius 10, ~40px height, soft shadow, hover lighter/raised.
   Compositor-safe transitions (background, transform, box-shadow — no layout props). */
/* `a.add-deal-btn` (0,1,1) ties + beats Pico `a[role=button]{display:inline-block}` (0,1,1) by
   load order — a bare `.add-deal-btn` (0,1,0) LOST, so the button stayed inline-block and the
   block-level '+' SVG wrapped onto its own line (icon stacked above text). 260616-w96. */
a.add-deal-btn {
  display: inline-flex;
  flex-direction: row;  /* icon + label are inline siblings on ONE row, never stacked */
  align-items: center;
  justify-content: center;
  text-align: center;   /* defeat Pico [role=button] text-align:left so content is truly centered */
  gap: 7px;
  background: #0A84FF;
  color: #fff;
  border: none;
  border-radius: 10px;
  min-height: 44px;
  height: 44px;
  padding: 0 18px;      /* symmetric — no vertical bias */
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  box-sizing: border-box;
  width: auto;
}
/* '+' icon is a flex child: blockified, no inline descender gap, no baseline push (260616-vr3) */
.add-deal-btn svg {
  display: block;
  flex-shrink: 0;
}
.add-deal-btn:hover {
  background: #1f90ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.45);
  color: #fff;
  text-decoration: none;
}
.add-deal-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
}

/* ── Refresh button — 44×44 icon tile matching the gear (260616-uyn) ──────── */
.refresh-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;          /* icon centered */
  justify-content: center;
  padding: 0;                   /* icon-only — size from width/height, not padding */
  margin: 0;
  box-sizing: border-box;
  border-radius: 10px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #7d8aa0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.refresh-btn:hover {
  background: #1a2436;
  border-color: rgba(255, 255, 255, 0.16);
  color: #e8eef7;
}
.refresh-btn svg { display: block; }

/* Spin while the request is in flight — htmx adds .htmx-request to the button. */
.refresh-btn.htmx-request {
  pointer-events: none;         /* disable repeat-click during the request */
  color: var(--accent);
}
.refresh-btn.htmx-request svg {
  animation: refresh-spin 0.8s linear infinite;
}
@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Compact inline goal-edit form (260613-*) ─────────────────────────────── */
/* Goal-edit panel sizes to the button row's natural width (260616-ni1): the form is a
   max-content wrapper, the actions grid (auto 1fr columns) defines that width, and the
   input stretches to 100% of it → input width == button-row width. Not full-widget, not centered. */
.plan-fact-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
  width: max-content;
  max-width: 100%;   /* never overflow on narrow screens */
}
.plan-fact-label {
  display: block;
  width: 100%;
  font-size: 13px;
  color: var(--pico-muted-color);
  margin: 0;
}
/* input.plan-fact-input (0,1,1) ties + beats Pico's tall
   `input:not([type=checkbox],[type=radio],[type=range]){height:calc(...)}` (also 0,1,1) by load
   order — without this, Pico's ~50px+ height + 0.75rem vertical padding override a plain
   `.plan-fact-input` (0,1,0) and the input renders double-height (260616-q8x). */
input.plan-fact-input {
  width: 100%;
  box-sizing: border-box;
  height: 46px;            /* compact single line, matches the 46px buttons */
  min-height: 0;           /* defeat any inherited min-height */
  padding: 0 14px;         /* explicit height owns the box; trim Pico's vertical padding */
  line-height: normal;
  font-size: 16px;
  margin: 4px 0 0;
  border-radius: 11px;
}
.plan-fact-form-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;  /* equal columns, each sized to the widest button (Сбросить (авто)) */
  gap: 12px;
}
/* Equal-width, equal-height (46px), centered action buttons (260616-ni1). */
.plan-fact-save,
.plan-fact-reset,
.plan-fact-cancel {
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
}
/* Primary — Сохранить */
.plan-fact-save {
  background: #0A84FF;
  border-color: #0A84FF;
  color: #fff;
}
.plan-fact-save:hover { background: #2b96ff; border-color: #2b96ff; }
/* Secondary — Сбросить (авто) + Отмена */
.plan-fact-reset,
.plan-fact-cancel {
  background: #131c2e;
  border-color: rgba(255, 255, 255, 0.12);
  color: #c3ccdd;
}
.plan-fact-reset:hover,
.plan-fact-cancel:hover {
  background: #1a2436;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Widget-settings modal footer — compact row, primary+secondary right-aligned */
.widget-edit-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-end;
}
.widget-edit-actions button {
  width: auto;
  margin: 0;
  font-size: 14px;
  padding: 8px 20px;
}

/* ── Widget card system ───────────────────────────────────────────────────── */

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .widget-grid {
    grid-template-columns: 1fr;
  }
}

/* Wide analytics blocks (money, monthly, objects) span the full grid row.
   On mobile the grid is already 1-col so no extra rule needed there. */
.widget-grid__wide {
  grid-column: 1 / -1;
}

/* Analytics grid — EXACTLY 2 equal columns (50/50), scoped so the shared dashboard
   .widget-grid (auto-fill) is untouched. Non-wide blocks fill exactly one 50% column;
   widget-grid__wide + widget-grid__group blocks span both via grid-column: 1/-1.
   align-items:stretch keeps paired half-width blocks even height. (260616-38f, 260618-0q8) */
.widget-grid--analytics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

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

/* Full-width cells inside the analytics grid */
.widget-grid__wide,
.widget-grid__group {
  grid-column: 1 / -1;
}

/* Section group labels inside the analytics widget grid */
.widget-grid__group {
  color: #7d8aa0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Explicit section divider: a visible rule + generous space above each band (260619-v7n). */
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* «ОБЗОР» label above the .analytics-top pinned section */
.analytics-group-label {
  color: #7d8aa0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-bottom: 8px;
}

/* Top section (quick 260617-an-top): 2 equal columns — LEFT = Операции (tiles + longest-open
   list), RIGHT = reserved/empty. Single column below 900px (matches analytics grid breakpoint). */
.analytics-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .analytics-top {
    grid-template-columns: 1fr;
  }
}

/* Reserved right column — subtle empty-state card awaiting a future widget. */
.analytics-reserved {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px;
  background: #0d1320;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}
.analytics-reserved__hint {
  margin: 0;
  max-width: 240px;
  text-align: center;
  font-size: 13px;
  color: #7d8aa0;
}
/* Hide the reserved placeholder on mobile (single column) — no value stacked alone. */
@media (max-width: 900px) {
  .analytics-top__right {
    display: none;
  }
}

.widget {
  border-radius: var(--radius-card, 16px);
  padding: 20px 24px;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-muted-border-color, rgba(128,128,128,.15));
  box-shadow: var(--shadow-card, 0 1px 4px rgba(0,0,0,.08));
  overflow: hidden;
}

.widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.widget-header svg {
  color: var(--pico-muted-color);
  flex-shrink: 0;
}

.widget-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--pico-muted-color);
  margin: 0;
}

.widget-hero-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.widget-footnote {
  font-size: 13px;
  color: var(--pico-muted-color);
  margin-top: 8px;
}

.widget-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  margin: 4px 0;
  font-size: 14px;
}

.widget-line-label {
  color: var(--pico-muted-color);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Widget subtitle — muted period label below the title ───────────────── */
.widget-subtitle {
  display: block;
  font-size: 12px;
  color: var(--pico-muted-color);
  font-weight: 400;
  margin-top: 1px;
}

/* ── Totals widget — vertical column layout (260613-ort) ─────────────────
   3 groups (Реализовано / В работе / Убытки) each with 3 stacked value rows.
   label column: auto + nowrap (CLAUDE.md); value column: flex-end right-aligned.
   ─────────────────────────────────────────────────────────────────────────── */
.totals-group-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0;
  padding: 0;
}

.totals-group {
  border-left: 2px solid var(--pico-muted-border-color, rgba(128,128,128,.2));
  padding-left: 10px;
}

.totals-group__label {
  font-size: 13px;
  color: var(--pico-muted-color);
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
}

.totals-group__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

/* Each row: label (auto, nowrap) | right-aligned value */
.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.totals-row__key {
  font-size: 13px;
  color: var(--pico-muted-color);
  white-space: nowrap;   /* CLAUDE.md: label uses nowrap, NOT min-content */
  flex-shrink: 0;
}

.totals-row__val {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Monthly breakdown bars inside widget card — same tokens, 8px radius */
.widget .monthly-breakdown .mb-track {
  border-radius: 8px;
}

.widget .monthly-breakdown .mb-fill {
  border-radius: 8px;
}

/* ── Widget settings (gear) button — now in top bar (260616-uyn) ────────── */
.widget-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #131c2e;
  color: #7d8aa0;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
  margin-bottom: 0;             /* was 12px when in widget grid — not needed in top bar */
}

.widget-edit-btn svg {
  display: block;               /* no baseline offset from inline SVG */
}

.widget-edit-btn:hover {
  background: #1a2436;
  border-color: rgba(255, 255, 255, 0.16);
  color: #e8eef7;
}

/* ── Widget edit modal rows ──────────────────────────────────────────────── */
.widget-edit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.widget-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.widget-edit-row:last-child {
  border-bottom: none;
}

.widget-edit-row label {
  flex: 1;
  margin-bottom: 0;
  cursor: pointer;
}

.widget-reorder-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--pico-muted-color);
  border-radius: 6px;
}

.widget-reorder-btn:hover {
  background: var(--pico-muted-border-color);
  color: var(--pico-color);
}

/* ── Pipeline widget ─────────────────────────────────────────────────────── */
.pipeline-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 50%, transparent);
  font-size: 14px;
}

.pipeline-stat-row:last-child {
  border-bottom: none;
}

.pipeline-stat-label {
  color: var(--pico-muted-color);
}

/* ── Top channels widget ─────────────────────────────────────────────────── */
.top-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
}

.top-channel-label {
  min-width: 80px;
  white-space: nowrap;
  color: var(--pico-muted-color);
}

.top-channel-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--pico-muted-border-color, rgba(128,128,128,.15));
  overflow: hidden;
}

.top-channel-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

.top-channel-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Interactive chart hover overlay (260613-nsm) ───────────────────────── */
/* Progressive enhancement: these rules are additive. Static charts read
   fine without JS. All overlay elements carry aria-hidden="true".         */

/* Vertical crosshair line inside SVG (rendered inside the overlay <g>) */
.chart-crosshair {
  stroke: var(--pico-muted-border-color, rgba(128, 128, 128, .5));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Tooltip card — floats above everything, theme-aware via Pico card vars */
.chart-tooltip {
  position: absolute;
  z-index: 1000;
  display: none;                /* shown by JS via style.display = 'block' */
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-card-border-color, rgba(128, 128, 128, .2));
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .08);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  min-width: 140px;
}

/* Tooltip title (point label: date or month) */
.chart-tooltip__label {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--pico-color, inherit);
}

/* One row per series */
.chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pico-color, inherit);
}

/* Colour swatch — 10px square, rounded */
.chart-tooltip__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Delta row (Отставание / Опережение) — colour set inline by JS */
.chart-tooltip__delta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* =============================================================================
   DEAL SEARCH BAR (260613-qki)
   Compact search bar below status chips; focus-preserving sub-region targeting.
   ============================================================================= */

/* ── Search bar container ──────────────────────────────────────────────────── */
.deal-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  /* Defeat Pico's [role=search] input-GROUP focus ring: it sets box-shadow via these vars
     and the form is width:100%, so the ring spans the full row (reads as a long line on the
     right). Overriding the vars to transparent beats Pico's high-specificity :has() rule
     without !important; the focus ring then belongs to the input only (global input:focus). */
  --pico-group-box-shadow: 0 0 0 transparent;
  --pico-group-box-shadow-focus-with-input: 0 0 0 transparent;
  --pico-group-box-shadow-focus-with-button: 0 0 0 transparent;
}

/* Magnifier icon — inset left, muted, non-interactive */
.deal-search > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pico-muted-color);
  pointer-events: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Search input: left padding makes room for the inset icon; right padding
   leaves space for the ✕ flex sibling (clear button is NOT overlaid, so
   padding-right does not need to match its width — just a comfortable gap). */
.deal-search input[type="search"] {
  /* icon at left:14px + 16px wide ends ~30px; 48px padding → ~18px clear gap before text */
  padding-left: 48px;
  padding-right: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
}

/* Hide the native WebKit search chrome — redundant with the custom .deal-search__clear ✕. */
.deal-search input[type="search"]::-webkit-search-cancel-button,
.deal-search input[type="search"]::-webkit-search-decoration,
.deal-search input[type="search"]::-webkit-search-results-button,
.deal-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Clear ✕ button — small, muted, width:auto defeats PicoCSS full-width default */
.deal-search__clear {
  width: auto;
  padding: 5px 10px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-button);
  color: var(--pico-muted-color);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin: 0;
  flex-shrink: 0;
}

.deal-search__clear:hover {
  background: color-mix(in srgb, var(--pico-muted-color) 12%, transparent);
  color: var(--pico-color);
}

/* ── Pagination ────────────────────────────────────────────────────────────── */

/* Count / info line above the table */
.pagination__info {
  font-size: 13px;
  color: var(--pico-muted-color);
  margin: 0 0 6px;
}

/* Pagination nav row */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}

/* Shared base for all pagination buttons */
.pagination__page,
.pagination__prev,
.pagination__next {
  width: auto;            /* defeat PicoCSS full-width button default */
  min-width: 32px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.4;
  background: transparent;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-button);
  color: var(--pico-color);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
  margin: 0;
}

.pagination__page:hover:not(:disabled),
.pagination__prev:hover:not(:disabled),
.pagination__next:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pico-muted-color) 10%, transparent);
  border-color: var(--pico-muted-color);
}

/* Active page — filled accent */
.pagination__page--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

/* Disabled prev/next */
.pagination__prev:disabled,
.pagination__next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ellipsis gap */
.pagination__gap {
  font-size: 13px;
  color: var(--pico-muted-color);
  padding: 4px 2px;
  user-select: none;
}

/* =============================================================================
   OBJECTS STATS TABLE — «Статистика по объектам» (260613-w4n)
   Full-width section below the analytics grid; sticky header; compact rows.
   ============================================================================= */

/* Section wrapper — full width outside the analytics grid */
.obj-stats-section {
  margin-top: 24px;
}

.obj-stats-section > article {
  padding: var(--pico-card-sectioning-block-padding, 16px);
}

.obj-stats-subtitle {
  font-size: 13px;
  color: var(--pico-muted-color);
  margin-top: 4px;
  margin-bottom: 12px;
}

.obj-stats-empty {
  font-size: 14px;
  color: var(--pico-muted-color);
  margin: 8px 0;
}

/* Scrollable wrapper with sticky header — mirrors #deals-table-wrapper */
.obj-stats-wrapper {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--pico-table-border-color, #e0e0e0);
  border-radius: 4px;
}

/* Compact table */
.obj-stats-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

/* Sticky header — mirrors #deals-table-wrapper thead th */
.obj-stats-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pico-card-background-color, #f9f9fb);
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 10px;
  box-shadow: inset 0 -1px 0 var(--pico-table-border-color, #e0e0e0);
}

/* Body cells: compact + no wrapping */
.obj-stats-table tbody td {
  padding: 6px 10px;
  white-space: nowrap;
  border-top: 1px solid var(--pico-table-border-color, #e0e0e0);
}

/* Subject column — allow long names to truncate */
.obj-stats-subject {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rank column — muted */
.obj-stats-rank {
  color: var(--pico-muted-color);
  font-size: 12px;
}

/* ── Tier cell tints (avg_profit cell bg) ────────────────────────────────── */
/* Relative-scale tiers: top third green, middle amber, bottom/negative red  */

.obj-tier--high {
  background: color-mix(in srgb, var(--status-completed, #34C759) 10%, transparent);
}

.obj-tier--mid {
  background: color-mix(in srgb, var(--status-awaiting_payment, #FF9F0A) 10%, transparent);
}

.obj-tier--low {
  background: color-mix(in srgb, var(--status-cancelled, #FF3B30) 10%, transparent);
}

/* ── Totals row ──────────────────────────────────────────────────────────── */
.obj-stats-total td {
  padding: 8px 10px;
  border-top: 2px solid var(--pico-table-border-color, #e0e0e0);
  background: color-mix(in srgb, var(--pico-muted-color, #888) 6%, transparent);
  white-space: nowrap;
  font-size: 13px;
}

/* =============================================================================
   Login page (Phase 260614-2wh) — standalone, no sidebar
   Uses PicoCSS tokens + theme tokens; works in light and dark modes.
   ============================================================================= */

.login-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  background: var(--pico-background-color);
}

.login-card {
  width: 100%;
  max-width: 360px;
  padding: 40px 32px 32px;
  background: var(--pico-card-background-color, var(--pico-background-color));
  border: 1px solid var(--pico-card-border-color, var(--pico-muted-border-color));
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-modal);
}

.login-logo {
  display: block;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent, #007AFF);
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--pico-muted-color);
}

.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

.login-card button[type="submit"] {
  width: 100%;
  margin-top: 4px;
}

.login-error {
  margin: 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--pico-del-color, #FF3B30) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pico-del-color, #FF3B30) 30%, transparent);
  border-radius: var(--radius-button, 12px);
  color: var(--pico-del-color, #FF3B30);
  font-size: 14px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   260616-3iw: 4-block analytics redesign
   Money block, Tops block, Objects block
   ═══════════════════════════════════════════════════════════════════ */

/* ── Money block: monthly list ────────────────────────────────────── */

.money-monthly-divider {
  border-top: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 40%, transparent);
  margin: 12px 0 8px;
}

.money-monthly-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pico-muted-color);
  margin: 0 0 8px;
}

.money-monthly-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: none;
}

.money-monthly-list::-webkit-scrollbar { display: none; }

.money-monthly-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.money-monthly-row__month {
  font-size: 13px;
  white-space: nowrap;
  color: var(--pico-muted-color);
  min-width: 7em;
}

.money-monthly-row__track {
  background: color-mix(in srgb, var(--pico-muted-border-color) 60%, transparent);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}

.money-monthly-row__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: #0A84FF;
}

.money-monthly-row__fill--negative {
  background: var(--status-refunded, #FF3B30);
}

.money-monthly-row__value {
  font-size: 13px;
  white-space: nowrap;
  text-align: right;
}

/* ── Деньги period-adaptive STACKED bar chart (phase 22) ──────────────────────
   Reuses the .plan-fact-chart scaffold (axis | plot | gridlines | bars) + chart-hover.js
   tooltip overlay. Each .money-bar (a .plan-fact-bar, height=revenue%) holds a column-reverse
   stack: Затраты (bottom, dark) + Прибыль (top, green). Loss → dark bar + red top marker. */

/* Bars track — explicit 108px height (matches .plan-fact-axis / .plan-fact-gridlines) so each
   .money-bar's inline height:% (revenue) resolves. Unlike План/Факт (bars wrap a fixed-height
   __track), money bars set height directly, so the FLEX ROW itself must carry the track height. */
.plan-fact-bars.money-bars {
  height: 108px;
  flex: none;                       /* beat .plan-fact-bars{flex:1} so the 108px height holds */
}
/* Each bar: bottom-anchored column whose inline height:% is revenue; stack fills it. */
.money-bar {
  align-self: flex-end;
}
.money-bar__stack {
  width: 62%;                       /* leaves breathing room between buckets (mock spacing) */
  height: 100%;
  display: flex;
  flex-direction: column-reverse;   /* first child (cost) at the bottom, profit above */
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.money-bar__seg {
  display: block;
  width: 100%;
  flex-shrink: 0;
}
.money-bar__seg--cost {
  background: #2f3d5c;
}
.money-bar__seg--profit {
  background: #30d158;
}
/* Loss bucket: thin red marker pinned to the top of the dark (revenue) bar. */
.money-bar--loss .money-bar__stack {
  position: relative;
  background: #2f3d5c;               /* whole bar dark = revenue */
}
.money-bar__loss-marker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6b6b;
}
/* Current bucket: subtle ring so it reads as "now". */
.money-bar.is-current .money-bar__stack {
  outline: 1px solid rgba(10, 132, 255, 0.55);
  outline-offset: 0;
}

/* Bucket labels — axis-offset flex row mirrors .plan-fact-bars distribution. */
.money-bar-labels {
  display: flex;
  gap: 2px;
  padding-left: 46px;               /* == .plan-fact-axis width, so labels sit under bars */
  margin-top: 6px;
}
.money-bar-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  color: #7d8aa0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.money-bar-label.is-current {
  color: #e8eef7;
  font-weight: 600;
}

/* Legend */
.money-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: #7d8aa0;
}
.money-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.money-legend__swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.money-legend__swatch--profit { background: #30d158; }
.money-legend__swatch--cost { background: #2f3d5c; }
.money-legend__item--muted { color: #5d6a82; }

/* ── Tops block: segmented toggle ─────────────────────────────────── */

/* .tops-toggle keeps only layout — the pill look comes from the shared .seg-pills / .seg-pills__btn
   class (260618-vys). The old .tops-segment / --active look rules were removed (now shared). */
.tops-toggle { margin-bottom: 14px; width: fit-content; }

/* ── Tops views: only active one shown ────────────────────────────── */

.tops-view {
  display: none;
}

.tops-view--active {
  display: block;
}

/* ── Tops rows — stacked head + bar ──────────────────────────────── */

.tops-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tops-row { display: flex; flex-direction: column; gap: 6px; }
.tops-row__head { display: flex; align-items: center; gap: 8px; }
.tops-row__rank { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: #1c2740; color: #9aa6bd; }
.tops-row__rank--first { background: rgba(48, 209, 88, 0.16); color: #5fd97e; }
.tops-row__label { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.tops-row__name { font-size: 14px; font-weight: 500; color: #e8eef7; white-space: nowrap; flex-shrink: 0; }
.tops-row__meta { font-size: 12px; color: #9aa6bd; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tops-row__value { flex-shrink: 0; margin-left: 8px; font-size: 15px; font-weight: 600; color: #e8eef7; text-align: right; white-space: nowrap; }
.tops-row__value--first { color: #30d158; }
.tops-row__value--loss { color: #ff6b6b; }
.tops-row__track { width: 100%; height: 6px; border-radius: 999px; background: #131c2e; overflow: hidden; }
.tops-row__fill { height: 100%; border-radius: 999px; background: #0A84FF; }
.tops-row__fill--first { background: linear-gradient(90deg, #0A84FF, #30d158); }
.tops-row__fill--negative { background: var(--status-refunded, #FF3B30); }

.tops-empty {
  color: var(--pico-muted-color);
  font-size: 14px;
}

.tops-repeat-footer {
  margin-top: 12px;
  font-size: 13px;
  color: var(--pico-muted-color);
  border-top: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 40%, transparent);
  padding-top: 8px;
}

.tops-repeat-footer strong {
  color: var(--pico-color);
  margin-left: 4px;
}

/* ── Objects analytics block ──────────────────────────────────────── */

.obj-analytics-section { container-type: inline-size; }

.obj-analytics-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.obj-analytics-search {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  min-width: 180px;
}

/* .obj-analytics-sort-group layout supplied by .seg-pills (shared class added in markup).
   .obj-analytics-sort-btn and --active look supplied by .seg-pills__btn (260618-vms). */

.obj-analytics-wrapper {
  overflow-x: auto;
  scrollbar-width: thin;
  max-height: 480px;
  overflow-y: auto;
}

.obj-analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.obj-analytics-table thead th {
  position: sticky;
  top: 0;
  background: var(--pico-card-background-color, #111b2e);
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--pico-muted-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  white-space: nowrap;
  cursor: default;
}

.obj-analytics-table thead th.numeric { text-align: right; }

.obj-analytics-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 40%, transparent);
  transition: background 120ms;
}

.obj-analytics-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--pico-muted-border-color) 15%, transparent);
}

.obj-analytics-table tbody tr:hover {
  background: color-mix(in srgb, var(--pico-muted-border-color) 30%, transparent);
}

.obj-analytics-table td {
  padding: 6px 8px;
  vertical-align: middle;
}

.obj-analytics-table td.numeric { text-align: right; }

.obj-analytics-subject {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-analytics-total {
  font-size: 13px;
  border-top: 2px solid var(--pico-muted-border-color);
  background: color-mix(in srgb, var(--pico-muted-border-color) 20%, transparent) !important;
}

.obj-analytics-total td {
  padding: 8px;
}

.obj-analytics-empty {
  color: var(--pico-muted-color);
  font-size: 14px;
}

/* Trend arrows */
.trend--up   { color: #30d158; font-size: 12px; }
.trend--down { color: #FF3B30; font-size: 12px; }
.trend--flat { color: var(--pico-muted-color); font-size: 12px; }

/* Margin % coloring */
.margin--high { color: #30d158; }
.margin--low  { color: #f0a83c; }

/* ── Plan/Fact hybrid widget (260616-4yl) ─────────────────────────────────
   Layout: 3-column body row.
     Left  (.plan-fact-gauge-col): radial SVG ring gauge
     Center (.plan-fact-middle): remaining / needed-per-day text
     Right  (.plan-fact-bars): 6-month column bars
   No client charting library. Bars sized by CSS height% set at render time.
   Compositor-safe: only height% is set (not animated after paint).
   ─────────────────────────────────────────────────────────────────────────── */

/* Header title + subtitle stacked */
.plan-fact-header-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}

/* 'auto' source badge — small muted pill beside the widget title */
.plan-fact-source-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--pico-muted-color);
  border: 1px solid var(--pico-muted-border-color);
  vertical-align: middle;
  white-space: nowrap;
}

/* Full-width: the widget spans the whole dashboard widget-grid row (260616-gor). */
.plan-fact-widget {
  grid-column: 1 / -1;
  box-sizing: border-box;
}

/* Body: horizontal row — gauge (fixed) + stat tiles (fixed) + trend (fills). */
.plan-fact-body {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .plan-fact-body {
    flex-wrap: wrap;
  }
  .plan-fact-chart {
    flex-basis: 100%;
    order: 3;
  }
}

/* ── Gauge column ─────────────────────────────────────────────────────────── */

.plan-fact-gauge-col {
  flex-shrink: 0;
}

/* Gauge SVG itself — size comes from gauge_size (124px) */
.plan-fact-gauge {
  display: block;
  overflow: visible;
}

/* Large percent text inside gauge */
.plan-fact-gauge__pct {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Small fact / goal sub-line inside gauge */
.plan-fact-gauge__sub {
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}

/* ── Middle: 2×2 stat tiles (fixed width, never collapse) ───────────────────── */

.plan-fact-tiles {
  flex-shrink: 0;
  width: 280px;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.plan-fact-tile {
  background: #131c2e;
  border-radius: 11px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* CRITICAL: nowrap + normal overflow-wrap defeats the global overflow-wrap:anywhere
   that otherwise collapses these to one-character width (letter-by-letter vertical
   wrap) — same min-content-collapse class documented in CLAUDE.md. */
.plan-fact-tile__label {
  font-size: 11px;
  color: #7d8aa0;
  white-space: nowrap;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-fact-tile__value {
  font-size: 18px;
  font-weight: 500;
  color: #e8eef7;
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

.plan-fact-tile__value--green { color: #30d158; }
.plan-fact-tile__value--amber { color: #f0a83c; }

/* ── 6-month bar chart column ─────────────────────────────────────────────── */

.plan-fact-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;                /* slim gap — spacing now comes from the 30% intra-slot margin (260617-110) */
  flex: 1;
  min-width: 0;
}

/* Single month column — each grows equally to spread across the available width */
.plan-fact-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* Bar track — fixed-height column; the bar occupies ~70% of its month slot, centred (260617-110).
   Transparent background: empty months show only the baseline gridline (a thin baseline sliver),
   not a full-width grey block; the .plan-fact-gridlines behind provide the visual reference. */
.plan-fact-bar__track {
  position: relative;
  width: 70%;
  max-width: none;
  height: 108px;
  background: transparent;
  border-radius: 5px 5px 0 0;
  overflow: visible;
}

/* Fact fill — height% set inline by server; compositor-safe */
.plan-fact-bar__fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 2px;         /* empty/near-zero months still show a thin baseline sliver (260617-110) */
  border-radius: 5px 5px 0 0;
  /* height set inline: style="height: X%; background: #color" */
}

/* Plan (goal) tick line — spans the full width of the (now wider) bar (260617-110) */
.plan-fact-bar__tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--pico-muted-color) 60%, transparent);
  border-radius: 1px;
  /* bottom set inline: style="bottom: X%" */
}

/* Month label below each bar */
.plan-fact-bar__label {
  font-size: 10px;
  color: var(--pico-muted-color);
  white-space: nowrap;
  line-height: 1;
}

/* Current month label — brighter */
.plan-fact-bar__label.is-current {
  color: #0A84FF;
  font-weight: 600;
}

/* ── Per-bar hover/focus tooltip (260616-kb1) ─────────────────────────────── */

/* position:relative on bar so absolute tip is relative to the bar column,
   NOT to __track (which has overflow:hidden). */
.plan-fact-bar {
  position: relative;
}

/* Hovered/focused bar — outline on the track (compositor-safe: outline, not border) */
.plan-fact-bar:hover .plan-fact-bar__track,
.plan-fact-bar:focus-within .plan-fact-bar__track {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

/* Popover card — shown above the bar, centered horizontally.
   --tip-shift is set by clampPlanFactTips() JS to nudge edge bars inward.
   Default hidden: opacity:0 + visibility:hidden (no layout shift). */
.plan-fact-bar__tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(-10px);
  width: 194px;
  background: #1a2436;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 11px 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;    /* no layout influence, no mouse interaction */
  opacity: 0;
  visibility: hidden;
  z-index: 30;
  transition: opacity var(--transition-fast, 150ms);
  /* No width/height/margin animation — compositor-friendly */
}

/* Down-caret (triangle pointing at the bar) */
.plan-fact-bar__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - var(--tip-shift, 0px));   /* mirrors translateX offset */
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a2436;
}

/* Reveal on hover or keyboard focus */
.plan-fact-bar:hover .plan-fact-bar__tip,
.plan-fact-bar:focus-within .plan-fact-bar__tip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip title */
.plan-fact-bar__tip-title {
  font-size: 13px;
  font-weight: 600;
  color: #e8eef7;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Each label:value row */
.plan-fact-bar__tip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.plan-fact-bar__tip-row:last-child {
  margin-bottom: 0;
}
.plan-fact-bar__tip-label {
  color: #7d8aa0;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.plan-fact-bar__tip-value {
  color: #e8eef7;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}
.plan-fact-bar__tip-value--cost   { color: #c3ccdd; }
.plan-fact-bar__tip-value--green  { color: #30d158; }
.plan-fact-bar__tip-value--margin { color: #5fd97e; }
.plan-fact-bar__tip-value--loss   { color: #ff6b6b; }
.plan-fact-bar__tip-value--amber  { color: #f0a83c; }

/* ── Y-axis + gridlines + chart layout (260616-lji) ──────────────────────────
   .plan-fact-chart wraps (.plan-fact-axis | .plan-fact-plot) with flex layout.
   Track height (108px) shared between axis, gridlines, and bars so bottom:pct%
   positions align correctly across all three.
   ─────────────────────────────────────────────────────────────────────────── */

/* Chart = axis column + plot area (gridlines behind bars) */
.plan-fact-chart {
  display: flex;
  align-items: flex-end;
  flex: 1;
  min-width: 0;
}

/* Left axis column — fixed width, same height as bar tracks */
.plan-fact-axis {
  flex: 0 0 46px;
  width: 46px;
  position: relative;
  height: 108px;    /* must match .plan-fact-bar__track height */
  flex-shrink: 0;
}

/* Individual axis tick label — absolute, bottom matches gridline */
.plan-fact-axis__tick {
  position: absolute;
  right: 6px;
  transform: translateY(50%);
  color: #5d6a82;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  line-height: 1;
  /* bottom set inline */
}

/* Plot area — fills remaining width, position:relative for gridlines overlay */
.plan-fact-plot {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Gridlines container — absolute over the full plot area */
.plan-fact-gridlines {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 108px;   /* same as bar track height */
  bottom: auto;
  z-index: 0;
  pointer-events: none;
}

/* Individual gridline — thin horizontal rule */
.plan-fact-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  /* bottom set inline */
}

/* Baseline (value=0) slightly brighter */
.plan-fact-gridline.is-baseline {
  background: rgba(255, 255, 255, 0.10);
}

/* Bars layer sits above gridlines */
.plan-fact-bars {
  position: relative;
  z-index: 1;
}

/* ── Hide the old per-bar CSS popover (replaced by JS overlay) ────────────── */

/* The .plan-fact-bar__tip nodes stay in the DOM (JS clones them for the overlay)
   but are NEVER shown via CSS hover — the JS overlay handles display entirely.
   Drop the :hover / :focus-within reveal rules that were the old mechanism. */
.plan-fact-bar__tip {
  display: none !important;
}

/* ── Cursor-following tooltip overlay (260616-lji) ──────────────────────────
   Single fixed-position body overlay. Content is cloned from .plan-fact-bar__tip.
   position:fixed → no scroll-offset math, no layout shift.
   ─────────────────────────────────────────────────────────────────────────── */

.plan-fact-tip-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  background: #1a2436;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 11px 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  min-width: 194px;
  /* display:none / block toggled by JS */
}

/* Caret — small triangle pointing LEFT toward cursor (default: tooltip right of cursor) */
.plan-fact-tip-overlay__caret {
  position: absolute;
  top: 50%;
  left: -7px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid #1a2436;
}

/* Flipped state: tooltip is LEFT of cursor — caret points RIGHT */
.plan-fact-tip-overlay.is-flipped .plan-fact-tip-overlay__caret {
  left: auto;
  right: -7px;
  border-right: none;
  border-left: 7px solid #1a2436;
}

/* Content wrapper inside the overlay (mirrors .plan-fact-bar__tip styles) */
.plan-fact-tip-overlay__content .plan-fact-bar__tip-title {
  font-size: 13px;
  font-weight: 600;
  color: #e8eef7;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-fact-tip-overlay__content .plan-fact-bar__tip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.plan-fact-tip-overlay__content .plan-fact-bar__tip-row:last-child {
  margin-bottom: 0;
}

.plan-fact-tip-overlay__content .plan-fact-bar__tip-label {
  color: #7d8aa0;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-fact-tip-overlay__content .plan-fact-bar__tip-value {
  color: #e8eef7;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.plan-fact-tip-overlay__content .plan-fact-bar__tip-value--cost   { color: #c3ccdd; }
.plan-fact-tip-overlay__content .plan-fact-bar__tip-value--green  { color: #30d158; }
.plan-fact-tip-overlay__content .plan-fact-bar__tip-value--margin { color: #5fd97e; }
.plan-fact-tip-overlay__content .plan-fact-bar__tip-value--loss   { color: #ff6b6b; }
.plan-fact-tip-overlay__content .plan-fact-bar__tip-value--amber  { color: #f0a83c; }

/* ── Legend ───────────────────────────────────────────────────────────────── */

.plan-fact-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--pico-muted-color);
  flex-wrap: wrap;
}

.plan-fact-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Color swatch — green or amber square */
.plan-fact-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Plan tick swatch — dashed horizontal line */
.plan-fact-legend__tick-swatch {
  width: 14px;
  height: 2px;
  background: color-mix(in srgb, var(--pico-muted-color) 60%, transparent);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Plan/Fact form (goal input) — reused from Phase-17 ─────────────────── */
/* .plan-fact-form, .plan-fact-label, .plan-fact-input, etc. already defined above */

/* Error message paragraph */
.plan-fact-error {
  color: var(--pico-del-color, #ff4d4f);
  font-size: 13px;
  margin: 4px 0 0;
}


/* =============================================================================
   Deal window dark-tile redesign — Phase 260616-gxa
   Fixed dark palette: card #0d1320, tile #131c2e (matches Операции / plan-fact).
   Intentionally NOT theme-adaptive: same signed-off look as the operations card.
   Modal sizing uses direct-child selectors (CLAUDE.md convention — no descendant leak).
   Compositor-friendly properties only (transform/opacity/clip-path).
   ============================================================================= */

/* ── Deal detail header (title row + status pill) ─────────────────────────── */

/* ── Sticky pin for #deal-header (260618-u67) ───────────────────────────── */
/* article (scroll container: overflow-y:auto + max-height:92vh) is the sticky
   ancestor. #deal-detail-body has no overflow so sticky travels through it.
   Negative margins cancel the article's 32px padding (24px on phones) so the
   opaque background spans full width and no content bleeds at the edges. */
#deal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pico-card-background-color);
  /* The article's top padding is moved ONTO the header (padding-top below) and zeroed on the
     article, so the scrollport top == the header top — sticky top:0 pins flush with NO padding
     band above where scrolled content could peek (260618-u67 UAT). L/R negative margins fill the
     article's side padding so the opaque bg spans full width. */
  margin-left: -32px;
  margin-right: -32px;
  padding-top: 32px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 6px 12px -8px rgba(0, 0, 0, .5);
}
@media (max-width: 768px) {
  #deal-header {
    padding-top: 24px;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── One-line detail header (260617-1tj): #id + object (left) · status + date + × (right) ── */
/* ONE flat flex row (260617-3mm): #id, subject, status form, X are all DIRECT children and
   every child carries a 40px line-box, so their text optical centres land on one midline.
   ROOT CAUSE of the prior misalignment: the title sat in a ~19px line-box (line-height:1) while
   the controls were 40px; align-items:center matched their BOX centres but the title's text
   optical centre rode ~1px high because the line-boxes were unequal. Equalising the line-box to
   40px on the title makes all four items centre their text identically. */
.deal-detail-header-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 18px;
}

.deal-detail-id {
  font-size: 19px;          /* same size as the object title — one cohesive line (260617-24x) */
  color: #6f7a90;           /* slightly muted but matched in size */
  font-weight: 600;
  height: 40px;             /* same line-box as the pill/date so text centres identically (260617-3mm) */
  line-height: 40px;
  white-space: nowrap;
  flex: 0 0 auto;
  margin: 0;
}

.deal-detail-subject {
  font-size: 19px;
  font-weight: 600;
  color: #e8eef7;
  margin: 0 auto 0 0;       /* margin-right:auto pushes the controls to the right edge */
  height: 40px;             /* matched 40px line-box (260617-3mm) */
  line-height: 40px;
  /* ellipsis when the object name is long */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

/* Close (×) button on the header row */
.deal-detail-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #7d8aa0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.deal-detail-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}

/* ── Status pill — wraps the <select> for inline status edit ─────────────── */
/* The pill is a colored tinted button that reveals the select for editing.
   All hx-*/onchange attributes live on the form/select — CSS is display-only. */

.deal-status-pill-form {
  display: inline-flex;
  align-items: center;     /* pill + compact date inline on the header row (260617-1tj) */
  gap: 10px;
  margin: 0;               /* now a direct flex child of the header row — kill Pico's form margin (260617-3mm) */
  flex: 0 0 auto;
}

.deal-status-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;            /* matched pair with the «Дата завершения» field (260617-2ey) */
  box-sizing: border-box;
  border-radius: 999px;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

/* Color tints per status (matches --status-* tokens) */
.deal-status-pill--pending          { background: rgba(152, 152, 157, 0.18); border-color: rgba(152, 152, 157, 0.35); }
.deal-status-pill--awaiting_payment { background: rgba(255, 179, 64, 0.18);  border-color: rgba(255, 179, 64, 0.35); }
.deal-status-pill--awaiting_buyer   { background: rgba(10, 132, 255, 0.18);  border-color: rgba(10, 132, 255, 0.35); }
.deal-status-pill--in_stock         { background: rgba(255, 179, 64, 0.18);  border-color: rgba(255, 179, 64, 0.35); }
.deal-status-pill--in_progress      { background: rgba(10, 132, 255, 0.18);  border-color: rgba(10, 132, 255, 0.35); }
.deal-status-pill--on_hold          { background: rgba(152, 152, 157, 0.18); border-color: rgba(152, 152, 157, 0.35); }
.deal-status-pill--completed        { background: rgba(48, 209, 88, 0.18);   border-color: rgba(48, 209, 88, 0.35); }
.deal-status-pill--disputed         { background: rgba(255, 140, 0, 0.18);   border-color: rgba(255, 140, 0, 0.35); }
.deal-status-pill--refunded         { background: rgba(255, 69, 58, 0.18);   border-color: rgba(255, 69, 58, 0.35); }
.deal-status-pill--cancelled        { background: rgba(255, 69, 58, 0.18);   border-color: rgba(255, 69, 58, 0.35); }

.deal-status-pill__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0 28px 0 14px;   /* vertical 0 + height/line-height 38 centres text in the 40px pill */
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  color: #e8eef7;
  height: 38px;             /* 40px pill − 1px×2 border (260617-2ey) */
  line-height: 38px;
  box-sizing: border-box;
  margin: 0;
  /* Chevron icon via background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8aa0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.deal-status-pill__select:focus {
  outline: none;
}

/* Compact inline «Дата завершения» date field — ~pill height, calendar icon (260617-1tj).
   Wave 3 (260617-uqq): native <input type=date> replaced by custom datepicker macro; target
   .datepicker__display inside .deal-close-date-compact instead of input[type="date"]. */
.deal-close-date-compact {
  display: inline-flex;
  align-items: center;
  position: relative;
}
/* Override the 52px form height — compact context matches the 40px status pill. */
.deal-close-date-compact .datepicker__display {
  height: 40px;
  padding: 0 34px 0 12px;  /* right pad for the calendar icon, left matches the pill */
  font-size: 14px;
  color: #c3ccdd;
}
/* .datepicker is display:block by default; switch to inline so it sits in the flex row. */
.deal-close-date-compact .datepicker {
  display: inline-block;
}
/* The popover must escape the compact wrapper — it is position:absolute but its nearest
   positioned ancestor is .datepicker (position:relative), so it already pops out correctly
   even if .deal-close-date-compact had overflow:hidden (it does not). No extra rule needed. */

.deal-detail-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* HTMX in-flight: dim the select so user knows request is pending */
#deal-header.htmx-request .deal-status-pill__select {
  opacity: 0.5;
  pointer-events: none;
}

/* ── 4-tile stat grid (Закуп / Реализация / Маржа / Цикл) ─────────────────── */

.deal-detail-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 600px) {
  .deal-detail-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.deal-detail-tile {
  background: #131c2e;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deal-detail-tile__label {
  font-size: 12px;
  color: #7d8aa0;
  line-height: 1.25;
}

.deal-detail-tile__value {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: #e8eef7;
}

.deal-detail-tile__sub {
  font-size: 12px;
  color: #7d8aa0;
  line-height: 1.25;
}

/* Маржа tile: green when ≥ 0, red when < 0 */
.deal-detail-tile--green .deal-detail-tile__value {
  color: #30d158;
}

.deal-detail-tile--red .deal-detail-tile__value {
  color: #ff6b6b;
}

/* Цикл tile: amber when close_date < occurred_at (invalid backwards cycle) — quick-260617.
   Pairs with title="дата завершения раньше начала" on the value. */
.deal-detail-tile__value--warn {
  color: #ffb340;
  cursor: help;
}

/* ── 2-col details grid (Дата / Завершение / Количество / Цена / Продавец / Покупатель) ── */

.deal-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .deal-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.deal-detail-grid__row {
  display: grid;
  /* Label column: max-content + nowrap (CLAUDE.md: auto/max-content, not min-content) */
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* All 6 rows (incl. the last «Покупатель») carry the same separator (260617-1tj). */

.deal-detail-grid__label {
  font-size: 13px;
  color: #7d8aa0;
  white-space: nowrap;  /* CLAUDE.md: nowrap for label columns */
}

.deal-detail-grid__value {
  font-size: 13px;
  color: #c3ccdd;
  overflow-wrap: anywhere;
}

.deal-own-stock-badge {
  font-style: normal;
  color: #f0a83c;
  font-size: 13px;
}

/* ── Section headers (Комментарии / Файлы) ───────────────────────────────── */

.deal-detail-section {
  margin-bottom: 16px;
}

.deal-detail-section__title {
  font-size: 14px;
  font-weight: 600;
  color: #7d8aa0;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.deal-detail-empty {
  font-size: 13px;
  color: #7d8aa0;
  margin: 0 0 10px 0;
}

/* ── Comment cards ──────────────────────────────────────────────────────────── */

.deal-comments-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deal-comment-card {
  display: flex;            /* body (left) + delete × (right) — 260617-373 */
  align-items: flex-start;
  gap: 8px;
  background: #131c2e;
  border-radius: 10px;
  padding: 10px 14px;
}
.deal-comment-card__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Small × delete button on comment + attachment rows (muted → red on hover). 260617-373 */
.deal-row-delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #7d8aa0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.deal-row-delete:hover {
  background: rgba(255, 107, 107, 0.12);
  color: #ff6b6b;
}

.deal-comment-card__date {
  display: block;
  font-size: 12px;
  color: #7d8aa0;
  margin-bottom: 4px;
}

.deal-comment-card__body {
  font-size: 14px;
  color: #c3ccdd;
  margin: 0;
}

/* Comment add form */
.deal-comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.deal-comment-form__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #7d8aa0;
}

.deal-comment-form__textarea {
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: #e8eef7;
  resize: vertical;
  min-height: 72px;
}

.deal-comment-form__submit {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 8px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c3ccdd;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.deal-comment-form__submit:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Attachment chips ────────────────────────────────────────────────────────── */

.deal-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Each file = a download chip + a delete × side by side (260617-373). */
.deal-attachment-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.deal-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 5px 10px;
  text-decoration: none;
  color: #c3ccdd;
  font-size: 13px;
  max-width: 200px;
  transition: background var(--transition-fast);
}

.deal-attachment-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8eef7;
}

.deal-attachment-chip__icon {
  flex-shrink: 0;
  font-size: 14px;
}

.deal-attachment-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Attachment upload form */
.deal-attachment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.deal-attachment-form__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #7d8aa0;
}

.deal-attachment-form__input {
  font-size: 13px;
  color: #c3ccdd;
}

.deal-attachment-form__submit {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 8px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c3ccdd;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.deal-attachment-form__submit:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Blue full-width detail submit pill (comment + file upload, 260616-twb) ── */
/* Distinct from .deal-submit-pill (auto-width, radius 999) — this is full-width h44 */

.deal-detail-submit-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: #0A84FF;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.deal-detail-submit-pill:hover {
  background: var(--accent-hover, #338FFF);
}

.deal-detail-submit-pill:active {
  opacity: 0.85;
}

.deal-detail-submit-pill svg {
  flex-shrink: 0;
}

/* ── Styled file-picker control (260616-twb) ─────────────────────────────── */

.deal-file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.deal-file-picker__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c3ccdd;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.deal-file-picker__label:hover {
  background: #1a2436;
  border-color: rgba(255, 255, 255, 0.2);
}

.deal-file-picker__label svg {
  flex-shrink: 0;
}

.deal-file-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.deal-file-picker__name {
  font-size: 13px;
  color: #7d8aa0;
  overflow-wrap: anywhere;
}

/* ── Drag-and-drop file zone (260617-2tu) ────────────────────────────────────
   Hidden until a file is dragged over the form (JS toggles .is-dragover); then the picker +
   submit are swapped for this dashed drop zone, and the form gets a subtle blue ring. */
.deal-file-dropzone {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  border: 2px dashed #0A84FF;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.08);
  color: #5fa8ff;
  text-align: center;
  cursor: pointer;
}
.deal-file-dropzone__icon { color: #5fa8ff; }
.deal-file-dropzone__title { font-size: 14px; font-weight: 600; color: #cfe0ff; }
.deal-file-dropzone__hint { font-size: 12px; color: #7d8aa0; }

/* While dragging: show the zone, hide the normal controls, ring the form. */
.deal-attachment-form.is-dragover {
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
  border-radius: 12px;
}
.deal-attachment-form.is-dragover .deal-file-dropzone {
  display: flex;
}
.deal-attachment-form.is-dragover .deal-file-picker,
.deal-attachment-form.is-dragover .deal-detail-submit-pill {
  display: none;
}

/* ── Detail footer (Удалить / Редактировать) ─────────────────────────────── */

/* Footer bar — top border + slightly darker bg; Удалить (red ghost) left, Редактировать
   (filled secondary) right (260617-1tj). Negative margins make the darker bar span the modal
   padding edge-to-edge. */
.deal-detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* Side margins extend the strip to the article edges; the article has 0 bottom padding so the
     footer is flush to the modal bottom. Balanced top/bottom padding centres the buttons in the
     strip (no empty gap below). overflow clips to the rounded corners (260617-2ey). */
  margin: 18px -32px 0;
  padding: 18px 32px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom-left-radius: var(--radius-modal);
  border-bottom-right-radius: var(--radius-modal);
  background: #0a0f1a;
}

@media (max-width: 768px) {
  .deal-detail-footer {
    margin: 18px -24px 0;
    padding: 18px 24px 18px;
  }
}

@media (max-width: 480px) {
  .deal-detail-footer {
    flex-direction: column-reverse;
  }

  .deal-detail-footer__delete,
  .deal-detail-footer__edit {
    width: 100%;
    justify-content: center;
  }
}

/* Shared: icon + label inline */
.deal-detail-footer__delete,
.deal-detail-footer__edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  /* ROOT CAUSE (debug 260617-4fh): Pico's default button margin-bottom:20px was never reset on
     these footer buttons. In the align-items:center flex strip that 20px inflates each button's
     OUTER box, so the visible button centres at the TOP of its margin-box and the 20px margin
     shows as empty black BELOW it (footer 100px, buttons at +20, 39px gap below). Reset to 0 →
     footer 80px, buttons centred (gap 20/19), flush bottom. */
  margin: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Удалить — understated red ghost (transparent, no border) */
.deal-detail-footer__delete {
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: #ff6b6b;
}
.deal-detail-footer__delete:hover {
  background: rgba(255, 107, 107, 0.12);
}

/* Редактировать — prominent filled secondary */
.deal-detail-footer__edit {
  padding: 10px 22px;
  background: #22304d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.deal-detail-footer__edit:hover {
  background: #2a3a5c;
  color: #fff;
}

/* ── Dark add/edit form (deal-form-* classes) ────────────────────────────── */

/* Error banner */
.deal-form-error-banner {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.30);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #ff6b6b;
  margin-bottom: 12px;
}

.deal-form-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deal-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deal-form-field--full {
  grid-column: 1 / -1;
}

.deal-form-label {
  font-size: 12px;
  color: #7d8aa0;
  font-weight: 500;
  margin: 0;
}

.deal-form-input {
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  color: #e8eef7;
  height: 52px;   /* restored comfortable row height — uniform across all fields (260616-w96) */
  box-sizing: border-box;
  margin: 0;
  transition: border-color var(--transition-fast);
}

.deal-form-input:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
}

.deal-form-input[aria-invalid="true"] {
  border-color: rgba(255, 107, 107, 0.5);
  /* The app signals errors with a red border + a .form-error message — suppress Pico's default
     aria-invalid background icon (it tiled across the narrow defect amount input). !important to
     beat Pico's higher-specificity [aria-invalid] icon rule. (260619-vng) */
  background-image: none !important;
}

.deal-form-select {
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  color: #e8eef7;
  height: 52px;   /* uniform with .deal-form-input (260616-w96) */
  box-sizing: border-box;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8aa0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: #131c2e;
  padding-right: 32px;
  transition: border-color var(--transition-fast);
}

.deal-form-select:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
}

/* 2-column row */
.deal-form-row-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 420px) {
  .deal-form-row-2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Amount + currency side-by-side (price rows) */
.deal-form-amount-row {
  display: flex;
  gap: 8px;
  /* stretch — both cells share IDENTICAL top + bottom edges (not just a shared centre line);
     safe because both children are pinned to 52px below, so the row is exactly 52 and matches
     the neighbouring fields / Маржа strip (260617-0vo, was center per 260616-x1y). */
  align-items: stretch;
}

/* Pin BOTH price children (amount input + currency box) to the Маржа field's 52px at amount-row
   scope. Specificity (0,2,0) beats Pico's input height (0,1,1) by specificity itself — not merely
   load order — so the price elements can never render taller than the rest. margin:0 + align-self
   reset kill any stray vertical offset that could push one cell off-level (260617-0vo). */
.deal-form-amount-row .deal-form-input,
.deal-form-amount-row .deal-form-currency {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  margin: 0;
  align-self: stretch;
}

.deal-form-amount-row .deal-form-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Currency selector — overlay (260617-0fg) ────────────────────────────────
   The native <select> can't reliably centre its closed value, so the visible symbol is a
   real centred <span>; the native select sits invisibly on top for clicks/keyboard. */
.deal-form-currency {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;     /* the «$» span is dead-centre */
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.deal-form-currency .cur-symbol {
  color: #e8eef7;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;        /* clicks fall through to the select underneath */
}
.deal-form-currency .cur-chevron {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #7d8aa0;
  pointer-events: none;
}
/* The real control: invisible, fills the box, captures clicks + keyboard. */
.deal-form-currency .deal-form-currency__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
}

/* ── Uniform field height — beat Pico's form-element sizing (260616-wjz) ──────
   Pico defines `input:not([type=checkbox],[type=radio],[type=range]){height:calc(…)}`
   and `input:not(…),select,textarea{padding:…}` at specificity (0,1,1) — these OUTRANK
   the single-class `.deal-form-input` / `.deal-form-select` (0,1,0) above, so our height
   + vertical padding never applied to <input> elements; the price amount inputs rendered
   TALLER than the Маржа <div> (a plain div Pico never touches → exactly its min-height 52).
   Element-qualified selectors below are (0,1,1): they tie Pico and win by load order
   (theme.css loads after pico-2.min.css), pinning EVERY field to the Маржа field's 52px.
   Full padding re-asserted here so nothing leaks back to Pico's spacing. */
input.deal-form-input,
select.deal-form-select {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
}
input.deal-form-input {
  padding: 0 12px;       /* vertical 0 + height 52 → text centred by the input box */
}
select.deal-form-select {
  padding: 0 32px 0 12px; /* room for the chevron on the right */
}

/* Own-stock toggle */
.deal-form-own-stock-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #c3ccdd;
  margin: 0;
}

.deal-form-own-stock-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0a84ff;
  cursor: pointer;
}

.deal-form-own-stock-toggle__text {
  font-size: 14px;
}

/* dim cost field when own_stock active */
[data-cost-field].own-stock-dim .deal-form-input {
  opacity: 0.45;
}

/* hide seller when own_stock active */
[data-seller-field][hidden] {
  display: none;
}

/* ── Service mode (Phase 20): «Услуга (получаю %)» ───────────────────────────── */
/* Native [hidden] does NOT win over .deal-form-field{display:flex}/.row{display:grid},
   so force it for the goods/service show-hide markers + sub-panels + the panel itself. */
[data-goods-only][hidden],
[data-service-only][hidden],
[data-service-sub][hidden] {
  display: none !important;
}

.deal-form-mode-toggles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 18px;
}

/* Blue-tint service-income panel */
.deal-service-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: rgba(10, 132, 255, 0.07);
  border: 1px solid rgba(10, 132, 255, 0.22);
  border-radius: 12px;
}

/* Segmented «Фикс. сумма | % от суммы» — compact, content-width, NO track box.
   Just an active blue pill + plain-text inactive option on the panel background. */
.deal-service-seg {
  display: inline-flex;
  align-self: flex-start;   /* hug content — don't stretch to the panel's column width */
  gap: 6px;
}

.deal-service-seg__opt {
  position: relative;
  cursor: pointer;
}

.deal-service-seg__opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.deal-service-seg__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 18px;
  font-size: 13px;
  color: #9aa6bd;            /* inactive: transparent bg + muted text */
  background: transparent;
  border-radius: 9px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.deal-service-seg__opt input:checked + span {
  background: #0a84ff;       /* active: solid blue pill */
  color: #fff;
}

/* % row: «Сумма операции» (amount + inline currency) flex | «Ставка %» fixed. */
.deal-service-percent-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.deal-service-base-field {
  flex: 1 1 0;
  min-width: 0;
}
.deal-service-rate-field {
  flex: 0 0 96px;
}

/* Compact fields inside the panel: 46px inputs, 12px labels, ~64px inline currency.
   The currency selector must EXACTLY match the amount input height — beat
   `.deal-form-amount-row .deal-form-currency`'s height:52 + min-height:52 (0,2,0) with a
   (0,3,0) selector that pins BOTH height and min-height. */
.deal-service-panel input.deal-form-input {
  height: 46px;
  min-height: 46px;
}
.deal-service-panel .deal-form-amount-row .deal-form-currency {
  width: 64px;
  height: 46px;
  min-height: 46px;
}
.deal-service-panel .deal-form-label {
  font-size: 12px;
}

/* Compact result line: label (left) + green income (right) with a thin top border. */
.deal-service-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.deal-service-result__label {
  color: #9aa6bd;
}
.deal-service-result__value {
  color: #30d158;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Margin preview strip ─────────────────────────────────────────────────── */

.deal-margin-preview {
  display: flex;
  align-items: center;   /* vertically centre the text in the taller strip (260616-w96) */
  min-height: 52px;      /* uniform with the form inputs */
  box-sizing: border-box;
  font-size: 13px;
  color: #7d8aa0;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.deal-margin-preview--positive {
  color: #30d158;
  background: rgba(48, 209, 88, 0.08);
  border-color: rgba(48, 209, 88, 0.20);
}

.deal-margin-preview--negative {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.20);
}

/* ── Blue submit pill (unified, matches .add-deal-btn accent) ─────────────── */
/* Selector class on <button type="submit"> in _new_modal.html / _edit_modal.html.
   Modal sizing binds to dialog.modal-form > article (direct-child — CLAUDE.md). */

.deal-submit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  height: 44px;               /* fixed height — label vertically centred via align-items */
  box-sizing: border-box;
  background: #0A84FF;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 22px;            /* symmetric — no vertical bias */
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: auto;
  flex: 0 0 auto;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  letter-spacing: 0.01em;
}

/* '+' icon is a flex child: blockified, no inline descender gap, no baseline push (260616-vr3) */
.deal-submit-pill svg {
  display: block;
  flex-shrink: 0;
}

.deal-submit-pill:hover {
  background: var(--accent-hover, #338FFF);
}

.deal-submit-pill:active {
  opacity: 0.85;
}

/* Matched-pair secondary pill — same full-pill radius + height as .deal-submit-pill (260616-r3h) */
.deal-cancel-pill {
  background: #131c2e;
  color: #0A84FF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: auto;
  flex: 0 0 auto;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.deal-cancel-pill:hover {
  background: #1a2436;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Form error messages in dark context */
.deal-form-body .form-error {
  font-size: 12px;
  color: #ff6b6b;
  margin: 0;
}

/* =============================================================================
   KPI STRIP + DEALS CARD (260616-ien)
   Dark-tile palette: matches Операции card + 260616-gxa modal.
   Fixed palette (intentionally not theme-adaptive — same signed-off dark look).
   ============================================================================= */

/* ── KPI strip — 4-tile current-month grid ──────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Individual KPI tile — mirrors .operations-tile dark surface */
.kpi-tile {
  background: #131c2e;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kpi-tile__label {
  font-size: 12px;
  color: #7d8aa0;
  line-height: 1.25;
}

.kpi-tile__value {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: #e8eef7;
}

/* Green accent — profit tile value */
.kpi-tile__value--green {
  color: #30d158;
}

/* ── Deals card wrapper — dark card with rounded corners ─────────────────── */
.deals-card {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}

/* #deals-table-wrapper inside the card: remove its own border+radius since the
   card clips the corners; keep scroll behaviour intact. */
.deals-card #deals-table-wrapper {
  border: none;
  border-radius: 0;
}

/* Sticky header inside the dark card: dark background so it reads correctly */
.deals-card #deals-table-wrapper thead th {
  background: #0d1320;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Status chips — adjust border-bottom for the dark surface ────────────── */
/* The chips sit above the dark deals card; drop the divider so there's no
   double-border effect between the chips bar and the card edge. */
.status-chips {
  border-bottom: none;
}

/* ── Pagination — 32×32 dark-surface restyle (260616-ien) ───────────────── */
/* Override the existing .pagination rules with dark-tile sizing + active blue */

.pagination {
  justify-content: flex-end;
  align-items: center;
}

/* Info line left-aligned — push to left via margin-right:auto trick */
.pagination__info {
  margin-right: auto;
}

.pagination__page,
.pagination__prev,
.pagination__next {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Active page — solid blue (overrides base rule) */
.pagination__page--active {
  background: #0A84FF;
  border-color: #0A84FF;
  color: #fff;
}

/* Hover on non-active page/prev/next (existing rule covers this but reinforce) */
.pagination__page:hover:not(:disabled):not(.pagination__page--active),
.pagination__prev:hover:not(:disabled),
.pagination__next:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Segmented «За период» control (260616-t2l) ──────────────────── */
/* Track-box look removed (260618-vms) — separated pills via .seg-pills shared class.
   Keep: height:44px (row alignment), flex-shrink:0 (no-wrap), width:fit-content,
   margin-bottom (standalone spacing). */
.segmented-period {
  height: 44px;              /* fixed so all segments match the 44px row (260618-p4s) */
  box-sizing: border-box;
  margin-bottom: 12px;       /* standalone (error/empty) spacing; zeroed inside .analytics-topbar */
  width: fit-content;
  flex-shrink: 0;            /* never compress in the top row → «Всё время» can't be forced to wrap */
}
/* .segmented-period__btn and --active look supplied by .seg-pills__btn (shared class in markup) */

/* ── Analytics top bar — one row: period · Настроить аналитику (left) · refresh (right) ──
   Mirrors the dashboard .header-actions pattern (260616-x5n). */
.analytics-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.analytics-topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Inside the row neither the segmented control nor the period navigator carries a bottom
   margin — otherwise the nav's margin-box makes __left taller than 44px and align-items:center
   pushes it ~10px above its neighbors (260618-p4s). The row owns spacing. */
.analytics-topbar .segmented-period,
.analytics-topbar .period-nav {
  margin-bottom: 0;
}

/* ── Period navigator pill «‹ Label ›» (260617-to0 wave 3) ─────────────────────────────
   Sits in .analytics-topbar__left right after the segmented type selector.
   Tokens mirror the segmented-period pill (#131c2e / #0A84FF / #7d8aa0 / #5d6a82). */
.period-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  height: 44px;              /* match the segmented toggle + buttons + refresh (260618-p4s) */
  padding: 0 4px;
  box-sizing: border-box;
  /* NO flex-shrink:0 here — it combines with an inherited flex-grow and balloons the pill to
     fill the row (260618-p4s); the nav stays compact at its content width. */
}

.period-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: #7d8aa0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  padding: 0;
  flex-shrink: 0;
}

.period-nav__arrow:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}

.period-nav__arrow:disabled,
.period-nav__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.period-nav__label {
  background: transparent;
  border: none;
  color: #e8eef7;
  font-size: 14px;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms;
  line-height: 1;
}

.period-nav__label:hover {
  color: #ffffff;
}

/* ── Period picker popover (260617-to0 Wave 4) ──────────────────────────────
   Positioned absolutely relative to .period-nav (position:relative added below).
   Hidden by default (display:none); .is-open shows it.
   Tokens: #1a2436 surface / #0A84FF accent / #7d8aa0 muted / #c3ccdd text. */

.period-nav {
  position: relative;
}

.period-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: #1a2436;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  padding: 12px;
  z-index: 60;
  display: none;
}

.period-picker-popover.is-open {
  display: block;
}

/* Empty container stays hidden without is-open */
.period-picker-popover:empty {
  display: none;
}

/* ── Year stepper row ───────────────────────────── */
.period-picker__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.period-picker__stepper-year {
  color: #e8eef7;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

.period-picker__stepper-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #7d8aa0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 150ms, color 150ms;
}

.period-picker__stepper-arrow:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}

.period-picker__stepper-arrow:disabled,
.period-picker__stepper-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Month grid 3×4 ─────────────────────────────── */
.period-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* ── Quarter row (4 equal buttons) ─────────────── */
.period-picker__quarters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* ── Year list (column of buttons) ─────────────── */
.period-picker__years {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.period-picker__year-btn {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #c3ccdd;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

.period-picker__year-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}

.period-picker__year-btn.is-selected {
  background: #0A84FF;
  color: #ffffff;
}

/* ── Shared cell style (month + quarter buttons) ─ */
.period-picker__cell {
  height: 34px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #c3ccdd;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  padding: 0;
}

.period-picker__cell:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}

.period-picker__cell.is-selected {
  background: #0A84FF;
  color: #ffffff;
}

.period-picker__cell:disabled,
.period-picker__cell[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* «сейчас» hint in Операции card header — shown when a non-current period is selected */
.operations-header__now-hint {
  font-size: 11px;
  color: #5d6a82;
  font-weight: 400;
  margin-left: 4px;
  white-space: nowrap;
}

/* ── datepicker component (wave 1/4) ────────────────────────────────────────── */

.datepicker {
  position: relative;
  display: block;
}

.datepicker__display {
  padding-right: 34px;
  cursor: pointer;
}

.datepicker__icon {
  position: absolute;
  right: 10px;
  top: 50%;
  /* -3px optical nudge: the calendar glyph sits low in its viewBox, so pure box-centering
     reads below the date text. -3px is the level middle (-2 read low, -5 too high). */
  transform: translateY(calc(-50% - 3px));
  color: #7d8aa0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* display:block drops the inline-SVG baseline gap that nudged the icon below center */
.datepicker__icon svg {
  display: block;
}

/* Popover */
.datepicker__popover {
  /* fixed → viewport-anchored; works whether parented to <body> or re-parented into a
     <dialog> top layer (the modal has no transformed ancestor). High z-index so it renders
     above modal content when hosted inside the dialog (was z-index:70 / position:absolute,
     which rendered BEHIND a <dialog showModal()> top layer → invisible inside modals). */
  position: fixed;
  z-index: 1000;
  background: #1a2436;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  padding: 12px;
  box-sizing: border-box;
  /* width = 7 day columns (34px) + 6 gaps (3px) + 2×12 padding = 280px → tidy near-square */
  width: 280px;
  display: none;
}

.datepicker__popover.is-open {
  display: block;
}

/* Reset Pico's default button margin-bottom for ALL popover buttons (day cells, year
   cells, nav arrows, month label, footer) — it was spreading the grid rows ~16px apart
   and bloating the calendar height. */
.datepicker__popover button {
  margin: 0;
}

/* Header */
.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 4px;
}

.dp-nav-btn {
  background: transparent;
  border: none;
  color: #c3ccdd;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms;
  min-width: 28px;
}

.dp-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8eef7;
}

.dp-month-label {
  flex: 1;
  background: transparent;
  border: none;
  color: #e8eef7;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms;
}

.dp-month-label:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Weekday row */
.dp-weekdays {
  margin-bottom: 2px;
}

.dp-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #5d6a82;
  padding: 2px 0;
}

/* Day grid — fixed 34px columns + 3px gap → square cells, tight rows */
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 34px);
  gap: 3px;
}

.dp-days {
  margin-bottom: 6px;
}

.dp-day {
  height: 34px;
  width: 34px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #c3ccdd;
  font-size: 13px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  padding: 0;
  margin: 0;            /* reset Pico's button margin-bottom — was spreading the rows ~16px apart */
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-day:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}

.dp-day:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 1px;
}

.dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px #0a84ff;
}

.dp-day.is-selected {
  background: #0a84ff;
  color: #ffffff;
  font-weight: 600;
}

.dp-day.is-selected.is-today {
  box-shadow: none;
}

.dp-day.is-adjacent {
  color: #41506e;
}

/* Year list quick-jump */
.dp-year-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.dp-year-cell {
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #c3ccdd;
  font-size: 13px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  padding: 0;
}

.dp-year-cell:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}

.dp-year-cell.is-selected {
  background: #0a84ff;
  color: #ffffff;
  font-weight: 600;
}

/* Footer */
.dp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
  margin-top: 4px;
}

.dp-footer-btn {
  background: transparent;
  border: none;
  color: #7d8aa0;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 150ms, background 150ms;
}

.dp-footer-btn:hover {
  color: #e8eef7;
  background: rgba(255, 255, 255, 0.06);
}

.dp-footer-btn--today {
  color: #0a84ff;
}

.dp-footer-btn--today:hover {
  color: #4fa8ff;
  background: rgba(10, 132, 255, 0.08);
}

/* ── Concentration block ─────────────────────────────────────────── */

/* Card surface — mirrors .metric-card--velocity uniform border */
.metric-card--concentration {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
}

/* View containers — only active one shown (same pattern as .tops-view) */
.conc-view {
  display: none;
}

.conc-view--active {
  display: block;
}

/* No-data muted note */
.conc-no-data {
  font-size: 14px;
  color: #7d8aa0;
  margin: 0;
}

/* ── HHI gauge row ───────────────────────────────────────────────── */

.conc-gauge-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

/* Three-zone track: green 0-15% / amber 15-25% / red 25-100% (1500/2500/10000) */
.conc-gauge__track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  /* Smooth green→amber→red blend that still turns over AROUND the risk thresholds
     (transition zones, not hard blocks) so the marker colour stays meaningful — a
     'высокая' value lands in solid red, not amber (260627). */
  background: linear-gradient(
    90deg,
    #30d158 0%,
    #30d158 10%,
    #f0a83c 18%,
    #ff6b6b 28%,
    #ff6b6b 100%
  );
  /* Clip the gradient to the rounded pill (no colour spill past the corners). overflow
     stays visible so the white marker tick can still stick out above/below the track. */
  background-clip: padding-box;
  overflow: visible;
}

/* Marker: a vertical tick at the HHI position */
.conc-gauge__marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 16px;
  background: #e8eef7;
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* HHI value + zone pill row */
.conc-gauge-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conc-hhi-value {
  font-size: 22px;
  font-weight: 600;
  color: #e8eef7;
  font-variant-numeric: tabular-nums;
}

/* Zone pill */
.conc-zone-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: lowercase;
}

.conc-zone-pill--low {
  background: rgba(48, 209, 88, 0.15);
  color: #30d158;
}

.conc-zone-pill--moderate {
  background: rgba(240, 168, 60, 0.15);
  color: #f0a83c;
}

.conc-zone-pill--high {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

/* ── CR tiles: 3-up grid ─────────────────────────────────────────── */

.operations-tiles--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.conc-cr-tiles {
  margin-bottom: 14px;
}

/* ── Pareto note ─────────────────────────────────────────────────── */

.conc-pareto-note {
  font-size: 13px;
  color: #7d8aa0;
  margin: 0 0 8px;
}

.conc-pareto-note strong {
  color: #e8eef7;
}

/* ── Pareto cumulative bar ───────────────────────────────────────── */

.conc-pareto {
  margin-top: 4px;
}

.conc-pareto__track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #131c2e;
  overflow: visible;
}

.conc-pareto__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0a84ff, #f0a83c);
  /* Clip the fill to the rounded pill so the gradient never spills past the corners. */
  background-clip: padding-box;
}

/* 80% marker line */
.conc-pareto__marker80 {
  position: absolute;
  left: 80%;
  top: -4px;
  width: 2px;
  height: 18px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 1px;
  transform: translateX(-50%);
}

/* Tick labels beneath the bar */
.conc-pareto__ticks {
  position: relative;
  height: 16px;
  margin-top: 4px;
}

.conc-pareto__tick {
  position: absolute;
  font-size: 10px;
  color: #5d6a82;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── LTV / повторные block ───────────────────────────────────────── */

/* Card surface — mirrors .metric-card--velocity / --concentration uniform border */
.metric-card--ltv {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);  /* override base 3px left-accent */
  border-radius: 16px;
  padding: 20px 22px;
}

/* «за всё время» badge — muted pill next to the card title */
.ltv-lifetime-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: #7d8aa0;
  background: rgba(125, 138, 160, 0.12);
  border: 1px solid rgba(125, 138, 160, 0.20);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* No-data muted note */
.ltv-no-data {
  font-size: 14px;
  color: #7d8aa0;
  margin: 0;
}

/* Top-5 section header */
.ltv-top-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ltv-top-title {
  font-size: 12px;
  font-weight: 500;
  color: #7d8aa0;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =============================================================================
   Payments «Оплата» section (Wave 4 — 260618-lpx)
   Consistent with .deal-detail-section pattern (КОММЕНТАРИИ / ФАЙЛЫ).
   No colored left-stripes; compact for the ½-width detail modal.
   ============================================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.deal-payments {
  margin-bottom: 16px;
}

/* ── Header row: «ОПЛАТА» title (left) + paid summary (right) ────────────── */
.deal-payments__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px 0;
}

/* «ОПЛАТА» — mirrors .deal-detail-section__title exactly */
.deal-payments__title {
  font-size: 14px;
  font-weight: 600;
  color: #7d8aa0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Summary right-aligned muted */
.deal-payments__summary {
  font-size: 13px;
  color: #7d8aa0;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.pay-progress {
  height: 12px;
  border-radius: 999px;
  background: #131c2e;
  overflow: hidden;
  width: 100%;
  margin-bottom: 8px;
}

.pay-progress__fill {
  /* display:block is required — the fill is a <span> (inline by default), and inline
     elements ignore height/width, so the gradient rendered with a 0-height box and the
     bar looked empty (260618-nis). block makes height:100% + the inline width:{percent}% real. */
  display: block;
  height: 100%;
  border-radius: 999px;
  /* Single shared payment-scale fill — red→amber→green. Reuse `.pay-progress__fill`
     anywhere a payment progress scale is rendered so the gradient stays consistent. */
  background: linear-gradient(90deg, #ff6b6b, #f0a83c, #30d158);
  transition: width 200ms ease-out;
}

/* ── Meta row: count (left) + remaining (right) ──────────────────────────── */
.deal-payments__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.deal-payments__count {
  font-size: 12px;
  color: #7d8aa0;
}

.deal-payments__remaining {
  font-size: 12px;
  color: #f0a83c;  /* amber */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Payments list ───────────────────────────────────────────────────────── */
.pay-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.pay-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pay-list__item:last-child {
  border-bottom: none;
}

.pay-list__icon {
  flex-shrink: 0;
  color: #7d8aa0;
  display: inline-flex;
  align-items: center;
}

.pay-list__date {
  font-size: 13px;
  color: #9aa6bd;
  white-space: nowrap;
}

.pay-list__amount {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Credit = received payment — green */
.pay-list__amount--credit {
  color: #30d158;
}

/* Empty state */
.pay-list__empty {
  font-size: 13px;
  color: #7d8aa0;
  padding: 6px 0;
}

/* Auto-payment tag — subtle muted pill, mirrors .defect-badge--free */
.pay-auto-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
  background: rgba(125, 138, 160, 0.10);
  color: #7d8aa0;
  flex-shrink: 0;
}

/* ── Delete button ───────────────────────────────────────────────────────── */
/* Reuses the .deal-row-delete pattern (muted → red on hover); scoped to
   .pay-del to keep specificity clean. */
.pay-del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #7d8aa0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pay-del:hover {
  background: rgba(255, 107, 107, 0.12);
  color: #ff6b6b;
}

/* ── Add-payment form — compact inline row ───────────────────────────────── */
/* Wraps gracefully inside the ½-width detail modal. */
.pay-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  margin-top: 10px;
}

/* Amount input: grows to fill space, mirrors .deal-form-input dark look. */
/* Scoped within .deal-payments to never touch global <input>. */
.deal-payments .pay-add-form__amount {
  flex: 1 1 90px;
  min-width: 72px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 0 10px;
  height: 42px;
  /* min-height defeats the inherited input.deal-form-input min-height (~52px) which,
     under the row's align-items:stretch, was making this field + the datepicker taller
     than the currency box. All three add-row fields share one height (260618-mni). */
  min-height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  color: #e8eef7;
  margin: 0;
  transition: border-color var(--transition-fast);
}

.deal-payments .pay-add-form__amount:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
  box-shadow: none;
}

/* Currency box — compact version of .deal-form-currency. */
.deal-payments .pay-add-form__currency {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

/* The currency <select> is invisible but covers the full box for interaction. */
.deal-payments .deal-form-currency__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
}

/* Datepicker widget in the add-row — same 42px height as the amount + currency fields.
   The .datepicker wrapper is the flex child; give it the height so it stops stretching
   to the inherited min-height, and let the display fill it. */
.deal-payments .pay-add-form .datepicker {
  flex: 1 1 130px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
}

.deal-payments .datepicker__display {
  height: 42px;
  min-height: 42px;
  margin: 0;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  font-size: 14px;
  color: #e8eef7;
  padding: 0 10px;
  box-sizing: border-box;
}

.deal-payments .datepicker__display:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
  box-shadow: none;
}

/* «Внести» submit button — blue primary, compact. */
.pay-add-form__submit {
  flex: 0 0 auto;
  height: 42px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  background: #0A84FF;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
}

.pay-add-form__submit:hover {
  background: #338FFF;
}

.pay-add-form__submit:active {
  opacity: 0.85;
}

/* Inline error below the form */
.pay-add-form__error {
  flex: 1 0 100%;
  font-size: 12px;
  color: #ff6b6b;
  margin: 0;
}

/* ── Complete banner + «Завершить сделку» button ─────────────────────────── */
.pay-complete-banner {
  font-size: 14px;
  font-weight: 600;
  color: #30d158;
  margin-bottom: 8px;
}

.pay-complete-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid rgba(48, 209, 88, 0.35);
  background: rgba(48, 209, 88, 0.10);
  color: #30d158;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pay-complete-btn:hover {
  background: rgba(48, 209, 88, 0.18);
  border-color: rgba(48, 209, 88, 0.55);
}

/* =============================================================================
   Defects «Брак / замена» section
   Tokens: bg #0d1320 / surface #131c2e / border rgba(255,255,255,.08)
   blue #0A84FF / amber #f0a83c / red #ff6b6b / muted #7d8aa0
   ============================================================================= */

.deal-defects {
  margin-bottom: 16px;
}

/* ── Header row: «БРАК / ЗАМЕНА» title (left) + impact summary (right) ──────── */
.deal-defects__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px 0;
}

/* «БРАК / ЗАМЕНА» — mirrors .deal-payments__title exactly */
.deal-defects__title {
  font-size: 14px;
  font-weight: 600;
  color: #7d8aa0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Right-hand impact summary (shown only when defects exist) */
.deal-defects__summary {
  font-size: 13px;
  color: #7d8aa0;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* The «−X cur» impact number in the summary — red */
.deal-defects__impact-num {
  color: #ff6b6b;
  font-weight: 600;
}

/* ── Defect list ──────────────────────────────────────────────────────────── */
.defect-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.defect-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.defect-list__item:last-child {
  border-bottom: none;
}

.defect-list__icon {
  flex-shrink: 0;
  color: #f0a83c;  /* amber — defect indicator */
  display: inline-flex;
  align-items: center;
}

.defect-list__meta {
  font-size: 13px;
  color: #9aa6bd;
  white-space: nowrap;
}

/* Muted note text */
.defect-note {
  font-size: 12px;
  color: #7d8aa0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Right cluster: badge + delete button */
.defect-list__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Empty state */
.defect-list__empty {
  font-size: 13px;
  color: #7d8aa0;
  padding: 6px 0;
}

/* ── Resolution badges ───────────────────────────────────────────────────── */
.defect-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* own_cost + refund: red pill (financial loss) */
.defect-badge--cost,
.defect-badge--refund {
  background: rgba(255, 107, 107, 0.12);
  color: #ff6b6b;
}

/* seller_free: muted pill (no financial impact) */
.defect-badge--free {
  background: rgba(125, 138, 160, 0.12);
  color: #7d8aa0;
}

/* ── Delete button — mirrors .pay-del exactly ────────────────────────────── */
.defect-del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #7d8aa0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.defect-del:hover {
  background: rgba(255, 107, 107, 0.12);
  color: #ff6b6b;
}

/* ── Shared separated-pill segmented toggle (seg-pills) ─────────────────────
   Used by: defect resolution, period selector, object-metric sort.
   align-items:stretch → pills fill the container's cross-axis height:
   44px in the period row, ~34px elsewhere — one block, contextual height. */
.seg-pills {
  display: flex;
  gap: 8px;
  align-items: stretch;
  /* Neutralize Pico's [role=group] box-shadow ring (260627). The toggle containers carry
     role=group, so Pico draws a blue box-shadow around the WHOLE group when any button inside
     is focused (after a click, while focus persists) via --pico-group-box-shadow-focus-with-button.
     Earlier fixes targeted .seg-pills__btn, but the ring lives on the GROUP container. Selection
     is shown by the solid-blue .is-active pill, so no group ring is needed. */
  --pico-group-box-shadow: none;
  --pico-group-box-shadow-focus-with-button: 0 0 0 transparent;
  --pico-group-box-shadow-focus-with-input: 0 0 0 transparent;
}

.seg-pills__btn {
  flex: 1;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* fully-rounded pill on EVERY segment (per brief). !important overrides Pico's [role=group]
     button-group rounding (it rounds only first/last + squares the middle) on the period +
     object-metric toggles, which carry role=group (260618-vys). */
  border-radius: 999px !important;
  background: #131c2e;        /* inactive = dark tile (per brief) — all 3 toggles identical */
  color: #7d8aa0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}

.seg-pills__btn.is-active {
  background: #0A84FF;
  border-color: #0A84FF;
  color: #fff;
}

.seg-pills__btn:hover:not(.is-active) {
  background: rgba(10, 132, 255, 0.10);
  border-color: rgba(10, 132, 255, 0.35);
}

/* No blue focus ring on the segmented toggles — for BOTH mouse clicks AND the focus
   HTMX programmatically restores to the button after the hx-get fragment swap (browsers
   treat programmatic focus as :focus-visible, so the old :focus:not(:focus-visible) reset
   below did not catch it). Selection is already shown by the solid-blue .is-active pill, so
   no ring is needed (260627). Note: also drops the keyboard focus ring on these toggles. */
.seg-pills__btn:focus:not(:focus-visible),
.seg-pills__btn:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── Segmented resolution toggle — transparent track, solid active pill ───── */
.defect-seg {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
/* .defect-seg__btn look supplied by .seg-pills__btn (shared class added in markup) */

/* ── Add-defect form — compact 42px equal-height row ─────────────────────── */
.defect-add-form {
  margin-top: 4px;
}

.defect-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
}

/* Units field (~80px) */
.deal-defects .defect-add-form__units {
  flex: 0 0 80px;
  width: 80px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 0 10px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  color: #e8eef7;
  margin: 0;
  transition: border-color var(--transition-fast);
}

.deal-defects .defect-add-form__units:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
  box-shadow: none;
}

/* Amount + currency wrapper — hides as a unit for seller_free */
.defect-amount-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 0;
}

/* Amount input */
.deal-defects .defect-add-form__amount {
  flex: 1 1 90px;
  min-width: 72px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 0 10px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  color: #e8eef7;
  margin: 0;
  transition: border-color var(--transition-fast);
}

.deal-defects .defect-add-form__amount:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
  box-shadow: none;
}

/* Inline-validation error: red border (overrides the base + focus border for this input,
   which otherwise win by source order over .deal-form-input[aria-invalid]). (260619-vng) */
.deal-defects .defect-add-form__amount[aria-invalid="true"],
.deal-defects .defect-add-form__amount[aria-invalid="true"]:focus {
  border-color: rgba(255, 107, 107, 0.7);
}

/* Currency box — mirrors .deal-payments .pay-add-form__currency */
.deal-defects .defect-add-form__currency {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

/* The currency <select> is invisible but covers the full box */
.deal-defects .deal-form-currency__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
}

/* Note input */
.deal-defects .defect-add-form__note {
  flex: 1 1 120px;
  min-width: 80px;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 0 10px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  color: #e8eef7;
  margin: 0;
  transition: border-color var(--transition-fast);
}

.deal-defects .defect-add-form__note:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
  box-shadow: none;
}

/* Datepicker widget in the add-row — 42px, mirrors .deal-payments .pay-add-form .datepicker */
.deal-defects .defect-add-row .datepicker {
  flex: 1 1 130px;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
}

.deal-defects .datepicker__display {
  height: 42px;
  min-height: 42px;
  margin: 0;
  background: #131c2e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  font-size: 14px;
  color: #e8eef7;
  padding: 0 10px;
  box-sizing: border-box;
}

.deal-defects .datepicker__display:focus {
  border-color: rgba(10, 132, 255, 0.5);
  outline: none;
  box-shadow: none;
}

/* «Отметить» submit button — mirrors .pay-add-form__submit */
.defect-add-form__submit {
  flex: 0 0 auto;
  height: 42px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  background: #0A84FF;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
}

.defect-add-form__submit:hover {
  background: #338FFF;
}

.defect-add-form__submit:active {
  opacity: 0.85;
}

/* ── Маржа tile: red «−X cur брак» annotation ────────────────────────────── */
.deal-margin-defect {
  color: #ff6b6b;
}

/* ── Analytics help badge + popover ─────────────────────────────────────────
   Clip-safety note: .metric-card has NO overflow:hidden (base rule uses only
   border-left + border-radius + padding + transition), so z-index:1000 is
   sufficient to place the popover above siblings.
   .operations-header also has no overflow:hidden (display:flex + align-items +
   gap + margin-bottom only).
   However, as a defensive measure we explicitly set overflow:visible on any
   .operations-header that hosts the badge so future changes don't silently clip.
   ──────────────────────────────────────────────────────────────────────────── */

/* Defensive: keep header overflow visible so the popover is never clipped */
.metric-card .operations-header {
  overflow: visible;
}

/* Wrapper — relative anchor for the absolutely-positioned popover */
.help-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The «?» circle button */
.help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #7d8aa0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.help-badge:hover,
.help-badge:focus-visible {
  background: rgba(10, 132, 255, 0.12);
  border-color: rgba(10, 132, 255, 0.5);
  color: #0A84FF;
  outline: none;
}

/* Popover panel — hidden by default */
.help-pop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* position:fixed so the popover is viewport-relative and JS can clamp it to the screen
     edges (no clipping on left/right blocks). left/top are set by analytics-help.js on show;
     the 0/0 fallback only applies for the brief moment before JS positions it. (260619-tih) */
  position: fixed;
  top: 0;
  left: 0;
  width: 236px;
  max-width: calc(100vw - 16px);
  z-index: 1000;

  background: #1a2438;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 11px 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  text-align: left;

  display: flex;
  flex-direction: column;
  gap: 3px;

  transition: opacity 120ms ease-out, visibility 120ms ease-out;
}

/* Visibility is JS-driven via `.is-open` (analytics-help.js) — NO CSS :hover/:focus-within rule:
   the popover is portaled to <body> on open, so it's no longer a descendant of the badge wrap and
   those selectors couldn't match anyway. JS adds .is-open on hover/focus/tap after positioning. */
.help-pop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Section labels: «ЧТО ПОКАЗЫВАЕТ» / «КАК СЧИТАЕТСЯ» */
.help-pop__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5d6a82;
  font-weight: 600;
  line-height: 1.2;
}

/* Second label gets a small top gap to visually separate the two sections */
.help-pop__label--gap {
  margin-top: 6px;
}

/* Body text */
.help-pop__text {
  font-size: 12px;
  color: #c3ccdd;
  line-height: 1.4;
  white-space: pre-line;   /* render the newlines in the «как» text as separate lines (260619-u17) */
}

/* ── Надёжность каналов — per-seller defect rate (260619-w8d) ──────────────── */
.reliability-empty {
  color: #5d6a82;
  font-size: 14px;
  margin: 8px 0 0;
}
.reliability-summary {
  color: #9aa7bd;
  font-size: 13px;
  margin: 0 0 14px;
}
.reliability-summary strong {
  color: #e8eef7;
  font-weight: 600;
}
.reliability-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reliability-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 12px;
}
.reliability-row__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.reliability-row__name {
  color: #e8eef7;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reliability-row__meta {
  color: #5d6a82;
  font-size: 12px;
}
.reliability-row__mid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.reliability-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.reliability-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width var(--transition-fast);
}
.reliability-bar__fill--reliable { background: #30d158; }
.reliability-bar__fill--ok { background: #f0a83c; }
.reliability-bar__fill--risky { background: #ff6b6b; }
.reliability-row__sub {
  color: #7d8aa0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reliability-row__right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}
.reliability-row__pct {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reliability-row__pct--reliable { color: #30d158; }
.reliability-row__pct--ok { color: #f0a83c; }
.reliability-row__pct--risky { color: #ff6b6b; }
.reliability-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.reliability-pill--reliable { background: rgba(48, 209, 88, 0.15); color: #30d158; }
.reliability-pill--ok { background: rgba(240, 168, 60, 0.15); color: #f0a83c; }
.reliability-pill--risky { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; }