/* Parkiris UI-A design system "A+B" — single CSS file, no framework.
   A = Linear-style base + violet accent. B = soft tinted semantic surfaces. */

:root {
  --bg:            #FAFAF9;
  --card-bg:       #FFFFFF;
  --border:        #E4E4E2;
  --border-inner:  #ECECEA;
  --text:          #1A1A18;
  --text-muted:    #8A8A86;

  --accent:        #534AB7;
  --accent-bg:     #EEEDFE;

  --success-bg:    #F0FBF6;
  --success-text:  #0E6245;
  --warning-bg:    #FFF7ED;
  --warning-text:  #C2410C;
  --danger-bg:     #FEE2E2;
  --danger-text:   #991B1B;
  --info-bg:       #F6F9FC;
  --info-text:     #1A1F36;

  --radius-card:   12px;
  --radius-input:  8px;
  --radius-pill:   20px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); }

/* C-5-lite: money-event note column — truncate with ellipsis, full text
   via the title="" attribute on hover (no JS expand needed). */
.note-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* CORE-UX3b item 15: a t.me link in a note is a compact button, never a
   raw URL stretching the column. */
.note-cell .note-tg { white-space: nowrap; text-decoration: none; }

/* CORE-UX3b D10: a cancelled deal in the «Все» list is muted, carries no
   badges and one «отменена {date} · {reason}» label. */
tr.row-cancelled > td { color: var(--text-muted, #6b7280); }
tr.row-cancelled > td a { color: inherit; }
tr.row-cancelled .cancelled-label { display: block; margin-top: 4px; font-size: 0.85em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.app-header .brand {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.app-header .spacer { flex: 1; }

.search-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-form input[type="text"] {
  min-width: 220px;
}

.locale-switch {
  display: flex;
  gap: 4px;
}

.locale-switch a {
  padding: 4px 8px;
  border-radius: var(--radius-input);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
}

.locale-switch a.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.app-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
}

/* UX3c (2026-09-14): the deals LIST spans the viewport — eight columns
   never fit 980 px. Only deals_list.html sets this block; the deal card
   and every other page keep the centred 980 px container. */
.app-main--wide {
  max-width: none;
  padding: 24px 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 16px;
}

/* ── Cards / blocks ─────────────────────────────────────────────────────── */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 16px;
}

.card + .card { margin-top: 0; }

.card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px 0;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.field { margin-bottom: 14px; }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

.form-row {
  display: flex;
  gap: 14px;
}

.form-row > .field { flex: 1; }

.radio-group {
  display: flex;
  gap: 16px;
  align-items: center;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 0;
}

.radio-group input[type="radio"] { margin: 0; }

/* CORE-JOINT1: co-investor roster picker (create form) */
.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 6px 0;
}
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 0;
}
.checkbox-list input[type="checkbox"] { margin: 0; }
.card-inner { margin: 12px 0; }
.section-subtitle { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }

button, .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

button:hover, .btn:hover { opacity: 0.92; }

.btn-secondary {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover { background: var(--bg); }

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

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  font-weight: 500;
  font-size: 12px;
}

/* HOTFIX UI-C.1: destructive action (role unbind) — same sizing as
   .btn-small, distinct color so it doesn't read as a routine "save". */
.btn-danger {
  background: #c0392b;
}

.btn-danger:hover { opacity: 0.9; }

.collapsible summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  padding: 8px 0;
  list-style: none;
}

.collapsible summary::-webkit-details-marker { display: none; }

.collapsible summary::before {
  content: "▸ ";
}

.collapsible[open] summary::before {
  content: "▾ ";
}

.form-error {
  background: var(--danger-bg);
  color: var(--danger-text);
  padding: 8px 12px;
  border-radius: var(--radius-input);
  font-size: 12px;
  margin-bottom: 12px;
}

/* C-1: persistent post-close/cancel notice on the deal card — same shape
   as .form-error but using the info tokens instead of danger ones. */
.form-note {
  background: var(--info-bg);
  color: var(--info-text);
  padding: 8px 12px;
  border-radius: var(--radius-input);
  font-size: 12px;
  margin-bottom: 12px;
}

/* CORE-JOINT1 final addendum: a WARNING (Σ eur_funded ≠ production price) —
   same shape as .form-error but with the warning tokens; deliberately NOT
   .form-error so scripts/operators do not read it as a failed write. */
.form-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  padding: 8px 12px;
  border-radius: var(--radius-input);
  font-size: 12px;
  margin-bottom: 12px;
}

.form-note-secondary {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* CORE-UX1 Task 3.3 (2026-09-05 ruling): saved-state flash for the three
   controls that auto-submit with no separate save button (delivery leg
   logist select, delivery document received checkbox, receipt-check done
   checkbox — see each partial's own comment). A fresh <span> is rendered
   server-side only right after that specific control's own successful
   save, so the CSS animation (no JS) plays exactly once per real save and
   ends invisible (forwards) rather than looping or lingering. */
.save-flash-fade {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--success, #2e7d32);
  animation: save-flash-fadeout 2s ease-out forwards;
}

@keyframes save-flash-fadeout {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* UI-C (2026-08-02): post-DRAFT VIN/model warning-flow banner. */
.form-note-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  padding: 8px 12px;
  border-radius: var(--radius-input);
  font-size: 12px;
  margin-bottom: 12px;
}

.field-invalid input,
.field-invalid select {
  border-color: var(--danger-text);
}

.field-invalid label {
  color: var(--danger-text);
}

/* ── Status pills ───────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pill-neutral { background: var(--accent-bg); color: var(--accent); }
.pill-success { background: var(--success-bg); color: var(--success-text); }
.pill-warning { background: var(--warning-bg); color: var(--warning-text); }
.pill-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.pill-info    { background: var(--info-bg);    color: var(--info-text); }

/* C-2f: deals-list "Моя прибыль" column — 3 plain-text styles (no pill
   background, this is a table cell not a badge): positive/negative/none. */
.text-success { color: var(--success-text); font-weight: 600; }
.text-danger  { color: var(--danger-text);  font-weight: 600; }
.text-muted   { color: var(--text-muted); }

/* ── Metric tiles ───────────────────────────────────────────────────────── */

.metrics {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.metric-tile {
  flex: 1;
  background: var(--info-bg);
  color: var(--info-text);
  border-radius: var(--radius-card);
  padding: 14px 16px;
}

.metric-tile.success { background: var(--success-bg); color: var(--success-text); }
.metric-tile.warning { background: var(--warning-bg); color: var(--warning-text); }

.metric-label {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 4px;
}

.metric-value {
  font-size: 18px;
  font-weight: 500;
}

/* ── Deal header ────────────────────────────────────────────────────────── */

.deal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.deal-header h1 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px;
}

.deal-header .deal-sub {
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* UX2 / C-3: the header's single date never wraps mid-value; a long
   supplier name in the same flex row wraps instead. */
.deal-header .deal-date { white-space: nowrap; }

.stage-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-control select {
  width: auto;
  min-width: 220px;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

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

th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-inner);
}

td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-inner);
}

tr:last-child td { border-bottom: none; }

/* UX2 item 3 (2026-09-07, pulled forward from UI0): deals list — fixed
   column widths for Номер / Стадия / Прибыль / Дата, supplier/finclient
   truncated with an ellipsis (full name via title= on hover), the asset
   column absorbs whatever is left. table-layout: fixed makes the colgroup
   widths authoritative so no single long value can widen a column and
   push the row onto extra lines. */
.deals-table { table-layout: fixed; }
/* UX3c (2026-09-14) widths for the full-width list page, measured on the
   real data at a 1440 px viewport (table ≈ 1343 px with 20 px side
   padding): longest supplier name 231 px, longest model 232 px, longest
   finclient 106 px, reference 115 px, price 90 px, profit 95 px, state pill
   «Ожидание завершения расчётов» 198 px of text (wraps to two lines at
   ≥ 141 px: «Ожидание завершения» / «расчётов») + a delivery badge (≈ 92 px)
   beside it; every fixed width = text + 16 px cell padding.
   Fixed: 132 + 247 + 128 + 275 + 108 + 112 + 92 = 1094 px; the asset
   column (no width → absorbs the rest) gets ≈ 249 px and is the widest —
   model on one line where it fits, VIN below in mono. Supplier fits every
   current name in full; the ellipsis (title= kept) only kicks in beyond. */
.deals-table .col-reference { width: 132px; }
.deals-table .col-supplier  { width: 247px; }
.deals-table .col-finclient { width: 128px; }
.deals-table .col-state     { width: 275px; }
.deals-table .col-price     { width: 108px; } /* CORE-UX3b item 16 */
.deals-table .col-profit    { width: 112px; }
.deals-table .profit-note   { font-size: 0.85em; white-space: nowrap; }
.deals-table .col-date      { width: 92px; }
/* The date never wraps; a long state name may wrap inside its pill
   rather than spill over the profit column (pills are nowrap elsewhere). */
.deals-table td:last-child { white-space: nowrap; }
.deals-table .pill { white-space: normal; }
/* UX3c item 2: money and date columns right-aligned (header included). */
.deals-table .cell-num { text-align: right; white-space: nowrap; }
/* UX3c item 4: two-line header labels («Авто/оборудование») sit on the
   baseline of the row instead of overlapping the neighbouring header. */
.deals-table th { vertical-align: bottom; line-height: 1.3; white-space: normal; }
/* UX3c item 3: stage cell = line 1 (state pill + delivery pill, one line)
   and an optional line 2 of small badges (remainder «≈… · оценка»,
   partner unpaid, carried debt). Never a third row of pills. */
.deals-table .cell-stage .stage-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}
/* A long state name («Расчёты завершены в порту, партнёру не выплачено»)
   wraps INSIDE its pill rather than pushing the delivery pill down. */
.deals-table .cell-stage .stage-line .pill { white-space: normal; flex: 1 1 auto; min-width: 0; padding: 3px 10px; }
.deals-table .cell-stage .stage-line .badge-sm { flex: 0 0 auto; }
.deals-table .cell-stage .stage-line--secondary { flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.deals-table .cell-stage .cancelled-label { white-space: normal; }

.cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tabular figures on money and date cells so digits line up down a column. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* CORE-UX3a A1 (2026-09-14): row editors. An edit form never lives inside
   the narrow last <td> of its row anymore — it is a SEPARATE following
   <tr class="row-editor"> spanning every column (colspan), toggled by the
   row's «Изменить» button (data-row-editor="<id>", delegated JS in
   base.html) and closed by the form's own «Отменить»
   (data-row-editor-close). Hidden by default via the hidden attribute. */
.row-editor[hidden] { display: none !important; }
tr.row-editor > td {
  padding: 12px 14px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-inner);
}
tr.row-editor .form-row { flex-wrap: wrap; }
tr.row-editor .form-row > .field { flex: 0 1 auto; min-width: 14ch; }
/* Help text under a field is a paragraph, never one word per line. */
tr.row-editor .form-note-secondary,
.collapsible .form-note-secondary { white-space: normal; min-width: 22ch; max-width: 60ch; }

/* Inputs sized to their content — a rate is ~12 chars (1.15790366), an
   amount ~14 (15000.00 EUR), a currency 5, a date-time ~18. Applies to
   the row editors AND the collapsible add/edit forms (same inputs). */
.input-rate     { width: 14ch !important; }
.input-amount   { width: 16ch !important; }
.input-currency { width: 8ch  !important; }
.input-date     { width: 20ch !important; }
.input-pct      { width: 10ch !important; }

/* «Сохранить …» + «Отменить» always side by side, in this order. */
.form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

/* UI-C.3 (item 4): tighter row density for the parties registry table —
   scoped to .table-compact only, deals_list.html keeps the default
   padding. */
.table-compact th,
.table-compact td { padding: 4px 8px; }

/* ── Login page ─────────────────────────────────────────────────────────── */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  width: 320px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
}

.login-card h1 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 20px;
  text-align: center;
}

/* ── Search results list ────────────────────────────────────────────────── */

.search-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px;
  text-align: center;
}

/* ── Modal (party inline create) ───────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-box {
  width: 360px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 20px;
}

.modal-box h2 {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 16px;
}

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

/* ── Spacing utilities (kept out of templates as inline "margin:" strings
   on purpose — see UI-A DoD [4]/[8]: templates must grep-clean for the
   business "margin" fields, so all layout spacing lives here instead). ─── */

.spacer-top-sm  { margin-top: 6px; }
.spacer-top-md  { margin-top: 10px; }
.spacer-top-lg  { margin-top: 16px; }
.spacer-bottom-md { margin-bottom: 10px; }
.spacer-left-sm { margin-left: 8px; }
.no-gap { margin: 0; }

/* ── Tabs (UI-C parties registry) ──────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}

.tab, .tab-active {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}

.tab:hover { color: var(--text); text-decoration: none; }

.tab-active {
  color: var(--accent);
  font-weight: 500;
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* ── Small stage badges (UI-C deals-list "Стадия" second tier) ──────────── */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.badge-sm {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-sm.badge-neutral { background: var(--accent-bg); color: var(--accent); }
.badge-sm.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-sm.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.badge-sm.badge-success { background: var(--success-bg); color: var(--success-text); }

/* C-2L.1.1: leg status "режим исправления" — distinct border on the
   correction <select> while its toggle is checked (the ONLY visual
   cue that the wider own-chain-including-passed-statuses list is
   active, since the two <select> elements are otherwise identical). */
.leg-status-correction-active {
  border: 2px solid var(--warning-text);
  border-radius: var(--radius-sm, 4px);
}

/* C-2L.2 item 8: Zoho posting figures strip — read-only, copy-friendly. */
.figures-strip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.figures-strip-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.figures-strip-label {
  color: var(--text-muted);
  font-size: 12px;
}

.figures-strip-value {
  font-weight: 500;
}