/* ══════════════════════════════════════════════════════════════════════════
   NET CARS · КП — application layer on top of the Industry design system.
   Every value comes from a design-system token; the block below only
   re-points the accent role to the brand violet the design doc specifies.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --color-accent:#5f3fde;
  --color-accent-100:#f0edfe; --color-accent-200:#ded7fd; --color-accent-300:#c3b7fb;
  --color-accent-400:#a692f6; --color-accent-500:#8a71ee; --color-accent-600:#5432c9;
  --color-accent-700:#4527a8; --color-accent-800:#2f1a76; --color-accent-900:#1e1150;
  --color-accent-2:#8a71ee; --color-accent-2-100:#f0edfe; --color-accent-2-200:#ded7fd;
  --color-accent-2-800:#2f1a76;

  --ground:#e4e4e6;
  --sheet-w:1200px;
}

body{background:var(--ground);font-family:var(--font-body)}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent)}

/* — text helpers carried over from the design doc — */
.kick{font:11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700)}
.h{font-family:var(--font-heading);font-weight:var(--font-heading-weight)}
.crow{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:5px 0;
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 7%,transparent)}
.crow>*:first-child{min-width:0}
.crow>*:last-child{white-space:nowrap;flex:none}
.spec{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0;
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 7%,transparent)}
.spec span:first-child{color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.ph{display:grid;place-items:center;text-align:center;font:11px/1.4 var(--font-body);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-600);
  background:repeating-linear-gradient(135deg,var(--color-neutral-200) 0 7px,var(--color-neutral-100) 7px 14px)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:var(--space-3)}
.grow{flex:1;min-width:0}
.pushr{margin-left:auto}
.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* — the page sheet: one card on the ground, like the design doc's frames — */
.app{padding:24px 20px 64px}
.sheet{max-width:var(--sheet-w);margin:0 auto;background:var(--color-bg);
  border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 8px rgba(0,0,0,.10)}
.sheet-narrow{max-width:820px}
.sheet > .nav{border-bottom:1px solid var(--color-divider);padding:14px 24px;
  position:sticky;top:0;z-index:20;background:var(--color-bg)}
.sheet-body{padding:24px 24px 32px;display:flex;flex-direction:column;gap:18px}

/* — list — */
.list-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.list-toolbar .input{max-width:280px}
.table td.right,.table th.right{text-align:right}
.table .rowlink{text-decoration:none;font-size:15px}
.table .rowlink:hover{text-decoration:underline}
.rowacts{display:flex;gap:10px;justify-content:flex-end;font-size:12px;white-space:nowrap}
.empty{border:1px dashed var(--color-divider);padding:40px 24px;text-align:center;
  display:flex;flex-direction:column;gap:10px;align-items:center}

/* — editor — */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 320px}
.editor-main{padding:24px;display:flex;flex-direction:column;gap:18px;
  border-right:1px solid var(--color-divider);min-width:0}
.editor-side{padding:24px;display:flex;flex-direction:column;gap:18px;
  background:var(--color-surface);align-self:start;position:sticky;top:57px}
.pane{padding:16px;gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hint{font-size:12px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.hint-sm{font-size:11px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}

/* car card */
.car{padding:0;gap:0}
.car-head{display:flex;align-items:center;gap:10px;padding:12px 16px}
.car.open > .car-head{border-bottom:1px solid var(--color-divider)}
.car-title{font:600 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-accent-700);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.car-sum{font:var(--font-heading-weight) 15px var(--font-heading)}
.car-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;padding:16px}
.car-money{padding:0 16px 16px}
.car.draft{border-style:dashed}
.car.draft > .car-head{border-bottom-style:dashed}
.toggle{background:none;border:0;cursor:pointer;font:12px var(--font-body);padding:2px 4px;
  color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.toggle:hover{color:var(--color-accent)}
.iconbtn{background:none;border:0;cursor:pointer;font-size:12px;padding:2px 4px;
  color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.iconbtn:hover{color:var(--color-accent)}

/* photos */
.shots{display:flex;flex-direction:column;gap:6px;min-width:0}
.shot-main{position:relative;height:140px;background:var(--color-neutral-200)}
.shot-main img{width:100%;height:100%;object-fit:cover}
.shot-badge{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.62);color:#fff;
  font-size:10px;padding:2px 6px;letter-spacing:.06em}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.thumb{position:relative;height:36px;background:var(--color-neutral-200);cursor:pointer;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.cover{outline:2px solid var(--color-accent);outline-offset:-2px}
.thumb .x{position:absolute;top:0;right:0;width:14px;height:14px;line-height:13px;text-align:center;
  background:rgba(0,0,0,.6);color:#fff;font-size:10px;cursor:pointer}
.thumb .mv{position:absolute;bottom:0;width:14px;height:14px;line-height:13px;text-align:center;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;cursor:pointer}
.thumb .mv-l{left:0}
.thumb .mv-r{right:0}
.thumb .mv.off{opacity:.25;pointer-events:none;cursor:default}
.thumb-more{display:grid;place-items:center;font-size:11px;background:var(--color-neutral-200);cursor:pointer}
.drop{height:120px;display:grid;place-items:center;text-align:center;cursor:pointer;
  border:1px dashed var(--color-neutral-400);color:var(--color-accent-700);font-size:11px;line-height:1.4;
  padding:8px}
.drop.over{background:var(--color-accent-100);border-color:var(--color-accent)}
.thumb-add{display:grid;place-items:center;height:36px;cursor:pointer;
  border:1px dashed var(--color-neutral-400);color:var(--color-accent-700);font-size:14px}

/* money tables inside the editor */
.mtable .input{min-height:30px;text-align:right}
/* Валюта цены живёт в заголовке колонки 1-го этапа */
select.cur-pick{min-height:24px;padding:1px 4px;width:auto;text-align:left;
  font:inherit;font-size:11px;letter-spacing:.04em;text-transform:none;
  color:var(--color-text);background:var(--color-surface)}
.mtable td.right{text-align:right;padding-right:11px}
.mtable tr.total{background:var(--color-accent-100)}
.mtable tr.total td{font-family:var(--font-heading);font-weight:var(--font-heading-weight)}
.mtable tbody tr:hover{background:none}
.mtable tr.total:hover{background:var(--color-accent-100)}
.keyrow{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;gap:12px}
.auto-mark{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.reset-link{font-size:11px;cursor:pointer;color:var(--color-accent-700);background:none;border:0;padding:0}
.reset-link:hover{text-decoration:underline}

/* import panel */
.import-row{display:flex;gap:10px;flex-wrap:wrap}
.import-row .input{flex:1;min-width:220px}
.paste-box{display:flex;flex-direction:column;gap:8px;padding-top:4px}

/* — toasts + dialogs — */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--color-neutral-900);color:#fff;font-size:13px;padding:9px 16px;
  box-shadow:var(--shadow-md);max-width:560px}
.toast.err{background:#7a1c1c}
.toast.ok{background:var(--color-accent-800)}
#overlay:empty{display:none}

/* — постоянный индикатор состояния локального сервера — не тост, висит,
   пока не пропадёт причина; кликабельна для ручной перепроверки — */
.conn-status{position:fixed;left:0;right:0;top:0;z-index:300;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:9px 16px;font-size:13px;text-align:center;
  background:#7a1c1c;color:#fff;cursor:pointer}
.conn-status[hidden]{display:none}
.conn-status.ok{background:var(--color-accent-800)}
.conn-status .retry{text-decoration:underline;white-space:nowrap}

/* — кнопка «Выйти»: свой угол, чтобы не спорить за место с conn-status
   (та растянута на всю ширину сверху) — */
.logout-bar{position:fixed;right:16px;bottom:16px;z-index:250;
  background:var(--color-bg);border:1px solid rgba(0,0,0,.12);box-shadow:var(--shadow-md);
  padding:8px 12px;font-size:12px}
.logout-bar[hidden]{display:none}

/* — spinner — */
.spin{width:13px;height:13px;border:1.5px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════════════
   Клиентское предложение — A4 pages, on screen and on paper
   ══════════════════════════════════════════════════════════════════════ */

.pdf-bar{max-width:794px;margin:0 auto 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pdf-warn{max-width:794px;margin:-4px auto 16px;padding:10px 14px;font-size:13px;line-height:1.5;
  background:var(--color-accent-100);border:1px solid var(--color-accent-300);color:var(--color-accent-800)}
.pdf-doc{display:flex;flex-direction:column;gap:24px;align-items:center}
.pdf{width:794px;min-height:1123px;background:#fff;padding:48px 56px;
  display:flex;flex-direction:column;gap:22px;box-sizing:border-box;
  border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 8px rgba(0,0,0,.10)}
.pdf-head{display:flex;align-items:flex-start;gap:16px}
.pdf-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:34px;line-height:1;margin-top:8px}
.pdf-strip{display:flex;border:1px solid var(--color-divider)}
.pdf-strip > div{flex:1;padding:10px 12px;min-width:0}
.pdf-strip > div + div{border-left:1px solid var(--color-divider)}
.pdf-strip .v{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Три валюты сразу («₩ · ¥ · $») в строку с именем клиента не помещаются —
   этой ячейке нужны свои правила: без обрезания многоточием и помельче. */
.pdf-strip .v.rates{font-size:14px;white-space:normal;overflow:visible;text-overflow:clip}
/* Имя и фамилия клиента длиннее «Алексей Ромашов» из макета обрезались бы
   многоточием — оно должно быть видно целиком, в две строки при нужде. */
.pdf-strip .v.name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
.pdf-foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--color-divider);
  display:flex;gap:16px;font-size:11px}
.pdf-logo{width:110px;height:60px;margin-left:auto;flex:none;object-fit:contain}
.pdf-shots{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.pdf-shots .big{height:220px}
.pdf-shots .col{display:grid;gap:8px}
.pdf-shots .sm{height:106px}
.pdf-shots img{width:100%;height:100%;object-fit:cover}
.pdf-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pdf-total{display:flex;align-items:center;gap:16px;padding:14px 16px;
  background:var(--color-accent);color:#fff}
.pdf-total .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.pdf-total .v{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:32px;line-height:1;margin-left:auto}
.pdf-comment{margin-top:14px;padding:12px 14px;font-size:13px;line-height:1.5;
  background:var(--color-surface);border:1px solid var(--color-divider)}

/* margin:0, not the 12mm/14mm the page actually needs — a real page margin is
   exactly the strip Chrome draws its own header/footer into (the page URL and
   "3/5" page count), and there is no CSS switch to turn that off, only the
   "Headers and footers" checkbox in the print dialog, which nobody reliably
   remembers to touch. With no margin there, Chrome has nowhere to put them.
   The margin itself moves onto .pdf's own padding below instead, so the
   printed page looks exactly the same as before. */
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff}
  .app{padding:0}
  .no-print{display:none !important}
  .pdf-doc{display:block;gap:0}
  .pdf{width:auto;min-height:0;padding:12mm 14mm;border:0;box-shadow:none;
    break-after:page;page-break-after:always;display:flex}
  .pdf:last-child{break-after:auto;page-break-after:auto}
  .pdf-total,.btn-primary{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .crow,.mtable tr.total{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ══════════════════════════════════════════════════════════════════════════
   Narrow screens — the design is a desktop workbench, but the editor has to
   survive a laptop half-window and a tablet.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width:1040px){
  .editor{grid-template-columns:minmax(0,1fr)}
  .editor-main{border-right:0;border-bottom:1px solid var(--color-divider)}
  .editor-side{position:static}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .app{padding:12px 10px 48px}
  .sheet > .nav{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .sheet-body,.editor-main,.editor-side{padding:16px}
  .car-body{grid-template-columns:minmax(0,1fr)}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid4{grid-template-columns:minmax(0,1fr)}
  .table{font-size:13px}
  .pdf{width:100%;min-height:0;padding:24px 20px}
  .pdf-bar{max-width:100%}
  .pdf-cols{grid-template-columns:1fr;gap:16px}
  .pdf-title{font-size:26px}
  .pdf-strip{flex-wrap:wrap}
  .pdf-strip > div{flex:1 1 50%}
}