/* CLT — Car Listing Tool. Chrome after the 2026-08-25 redesign (Daniel's Claude
   Design canvas): navy sidebar, white header. One deliberate light theme. The
   offline plate-confirm page keeps the system stack on purpose.

   Type: Inter + JetBrains Mono since 2026-08-28 (was IBM Plex, "too quirky" —
   Daniel wanted sleeker and more readable). Inter is drawn for UI at small
   sizes, which is what this tool is: 13px labels over money columns, read all
   day. Both cover Croatian diacritics (š ž ć č đ) — verified before the swap,
   because a missing glyph falls back mid-word and only shows up on a customer's
   name. This is the OPERATOR chrome only; the client-facing spec sheet
   (Manrope) and predugovor (Georgia) are brand and are deliberately untouched. */

:root{
  --ink:#10192B;          /* body text */
  --ink-soft:#3C4A61;     /* secondary headings */
  --navy:#001336;         /* sidebar */
  --primary:#002060;      /* primary actions, focus */
  --primary-600:#00307E;  /* primary hover */
  --accent:#0090D0;       /* cyan — publish, highlights, links on dark */
  --accent-600:#007AB4;
  --paper:#F4F6F8;        /* canvas */
  --surface:#ffffff;      /* cards */
  --surface-2:#F7F9FB;    /* inset panels */
  --line:#E3E7ED;         /* hairline */
  --line-2:#D5DBE4;       /* input borders */
  --muted:#5F6B7F;        /* secondary text */
  --muted-2:#8A94A6;      /* tertiary / placeholder */
  --link:#00639A;
  /* semantic — separate from the accent so cyan never means "warning" */
  --danger:#A9331F;
  --amber:#8A5300;
  --ok:#0F7B4F;
  --danger-bg:#FBEAE7; --amber-bg:#FFF4E3; --ok-bg:#E9F6EF;
  --radius:10px; --radius-sm:7px;
  --sidebar-w:264px;
  --shadow:0 1px 2px rgba(16,25,43,.04), 0 8px 24px -16px rgba(16,25,43,.18);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,"Cascadia Code",monospace;
  /* legacy names still used by older sections; same values as the new tokens */
  --orange:#002060; --orange-600:#00307E;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  font-variant-numeric:tabular-nums;
  line-height:1.45;font-size:14.5px;-webkit-font-smoothing:antialiased}
a{color:var(--link)} a:hover{color:var(--accent)}
.mono{font-family:var(--mono)}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;padding:10px 14px;
  border-radius:var(--radius-sm);background:var(--navy);color:#fff;font-weight:600;
  text-decoration:none;transform:translateY(calc(-100% - 16px))}
.skip-link:focus{transform:none}

/* ---------- header (white, per page title) ---------- */
.hd{background:var(--surface);color:var(--ink);padding:0 28px;height:60px;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
.hd-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.hd-title b{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.hd-sub{color:var(--muted-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd .wm{font-weight:600;letter-spacing:.02em;font-size:16px}
.hd .grow{flex:1}
.hd form{margin:0;display:flex}
.hd-actions{display:flex;align-items:center;gap:8px}

/* ---------- navigation: drawer on narrow screens, sidebar from --sidebar-at ---------- */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;padding:8px;margin-left:-6px;border-radius:8px;cursor:pointer}
.nav-burger span{display:block;height:2px;border-radius:2px;background:var(--ink-soft);transition:background .15s}
.nav-burger:hover span{background:var(--ink)}
.nav-overlay{position:fixed;inset:0;background:rgba(0,19,54,.44);opacity:0;visibility:hidden;
  transition:opacity .2s;z-index:40}
.tray{position:fixed;top:0;left:0;height:100dvh;width:var(--sidebar-w);max-width:82vw;
  background:var(--navy);color:#fff;z-index:41;transform:translateX(-100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.nav-toggle:checked ~ .nav-overlay{opacity:1;visibility:visible}
.nav-toggle:checked ~ .tray{transform:none}
.tray-brand{display:flex;align-items:center;gap:9px;padding:20px 18px 16px;flex:none}
.tray-mark{width:26px;height:32px;border-radius:7px;background:var(--accent);display:grid;place-items:center;
  color:var(--navy);font-size:12.5px;font-weight:700;letter-spacing:-.3px;flex:none}
.tray-name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.tray-name b{color:#fff;font-size:16px;font-weight:600;letter-spacing:.02em}
.tray-name span{color:rgba(255,255,255,.45);font-size:12px;letter-spacing:.04em}
.tray-x{margin-left:auto;cursor:pointer;font-size:15px;line-height:1;color:rgba(255,255,255,.55);padding:6px 9px;border-radius:6px}
.tray-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.tray-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.tray-sec{padding:0 10px 10px;display:flex;flex-direction:column;gap:2px}
.tray-sec + .tray-sec{margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.tray-h{margin:8px 8px 4px;color:rgba(255,255,255,.34);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
.tray-link{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:6px;
  color:rgba(255,255,255,.78);text-decoration:none;font-weight:500;font-size:14px;
  border-left:2px solid transparent}
a.tray-link:hover{background:rgba(255,255,255,.07);color:#fff}
.tray-ico{width:16px;height:16px;display:grid;place-items:center;opacity:.8;flex:none}
.tray-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tray-badge{margin-left:auto;font-family:var(--mono);font-size:12.5px;background:#B25E00;color:#fff;
  padding:1px 6px;border-radius:9px;line-height:1.4}
.tray-step{padding:7px 11px;font-size:13.5px;color:rgba(255,255,255,.62)}
.tray-dot{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-family:var(--mono);background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);flex:none}
.tray-job{display:block;padding:2px 11px 6px;color:rgba(255,255,255,.5);font-size:13px}
.tray-step.is-current,.tray-link.is-current{color:#fff;background:rgba(255,255,255,.1);border-left-color:var(--accent)}
.tray-step.is-current .tray-dot{background:var(--accent);color:var(--navy)}
.tray-link.is-disabled{color:rgba(255,255,255,.35);cursor:default}
.tray-link.is-disabled em{font-style:normal;font-size:11.5px;opacity:.8}
.tray-foot{flex:none;padding:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}
.tray-user{display:flex;align-items:center;gap:8px;padding:0 4px}
.tray-user .tray-name b{font-size:13px;font-weight:500;color:rgba(255,255,255,.86)}
.tray-user .tray-name span{font-size:11.5px;color:rgba(255,255,255,.38)}
.tray-user form{margin-left:auto}
.tray-avatar{width:24px;height:30px;border-radius:50%;background:var(--primary);border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#fff;font-size:11px;font-weight:600;flex:none}
.tray-feed{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.62);font-size:12px;text-decoration:none}
.tray-feed:hover{background:rgba(255,255,255,.09);color:#fff}
.tray-feed-dot{width:6px;height:6px;border-radius:50%;background:#3FBE7E;flex:none}
.tray-feed-dot.is-warn{background:#E0A33C}

.page{display:flex;flex-direction:column;min-height:100dvh}
@media (min-width:1100px){
  body.has-nav .page{padding-left:var(--sidebar-w)}
  body.has-nav .tray{transform:none;z-index:30}
  body.has-nav .nav-burger,body.has-nav .tray-x{display:none}
  body.has-nav .nav-overlay{display:none}
  .nav-toggle:checked ~ .nav-overlay{opacity:0;visibility:hidden}
}

/* ---------- pipeline stepper ---------- */
.stepper{background:var(--surface);border-bottom:1px solid var(--line);
  padding:12px 28px;display:flex;justify-content:flex-start}
.stepper ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:8px;max-width:1120px;width:100%;overflow-x:auto}
.stepper li{display:flex;align-items:center;gap:8px;color:var(--muted-2);font-size:13px;
  white-space:nowrap}
.stepper li .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-family:var(--mono);font-weight:600;border:1px solid var(--line-2);color:var(--muted-2);
  background:var(--surface);flex:none}
.stepper li .lbl{font-weight:500}
.stepper li::after{content:"";width:22px;height:1px;background:var(--line-2);border-radius:2px}
.stepper li:last-child::after{display:none}
.stepper li.done{color:var(--ink)}
.stepper li.done .dot{background:var(--primary);border-color:var(--primary);color:#fff}
.stepper li.current{color:var(--ink)}
.stepper li.current .dot{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.stepper li.current .lbl{font-weight:600}
.stepper a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:8px}
.stepper a:hover .lbl{text-decoration:underline}
@media (max-width:640px){
  .stepper li:not(.current) .lbl{display:none}
  .stepper li::after{width:12px}
}

/* ---------- layout ---------- */
.body{max-width:1120px;width:100%;margin:0;padding:26px 28px 60px}
.body--wide{max-width:1500px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px}
.card + .card{margin-top:16px}
.card.narrow{max-width:420px;margin:56px auto}

h1{font-size:24px;line-height:1.2;margin:0 0 4px;color:var(--ink);font-weight:600;
  letter-spacing:-.015em;text-wrap:balance}
h2{font-size:15px;font-weight:600;margin:0 0 8px}
.card > h1:first-child{margin-top:0}

/* ---------- forms ---------- */
label{display:block;font-weight:600;font-size:12px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
input[type=password],input[type=text],input[type=number],input[type=month],input[type=email],input[type=date],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14px;background:var(--surface);color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(0,144,208,.16)}
textarea{font-family:var(--mono);font-size:12.5px;line-height:1.55;resize:vertical;min-height:180px}
select{appearance:none;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b655c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
select:disabled{background-color:var(--paper);color:var(--muted-2);cursor:not-allowed}
.social-form .fld{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.social-form .fld > span,.social-form .fld > small{display:block}
.social-form input[type="file"]{width:100%;padding:9px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit}
.social-form input[type="file"]::file-selector-button{margin-right:12px;padding:9px 12px;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);
  font:inherit;font-weight:700;cursor:pointer}
/* field grid (PPMV panel): 2 columns when the PANEL is wide enough, else 1.
   Container-query based so it adapts to the 3-across offer row, not the viewport. */
.form-grid{display:grid;grid-template-columns:1fr;gap:0 16px}
.form-grid .field{min-width:0}
.form-grid .field.full{grid-column:1/-1}
.form-grid .field > label:first-child{margin-top:12px}
.form-grid .field .hint{margin-top:6px}
@container (min-width:380px){.form-grid{grid-template-columns:1fr 1fr}}

/* ---------- buttons ---------- */
.btn,button,a.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;border:1px solid transparent;
  border-radius:var(--radius-sm);padding:0 14px;height:37px;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
button,a.button,.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}
button:hover,a.button:hover,.btn--primary:hover{background:var(--primary-600);border-color:var(--primary-600);color:#fff}
button[type=submit]{margin-top:18px}
.btn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-600);border-color:var(--accent-600)}
.btn--dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--dark:hover{background:var(--primary);border-color:var(--primary)}
.btn--ghost,button.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);
  font-weight:500;margin:0}
.btn--ghost:hover,button.ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--surface)}
.btn--sm{height:33px;padding:0 11px;font-size:13px}
/* the sidebar logout sits on navy */
.tray button.ghost{background:none;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6);height:26px;padding:0 7px;font-size:12px}
.tray button.ghost:hover{border-color:rgba(255,255,255,.4);color:#fff;background:none}
.btn--link{background:none;border:0;padding:6px 2px;height:auto;color:var(--link);font-weight:600}
.btn--link:hover{color:var(--accent);text-decoration:underline;background:none}
.btn[disabled],button[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* action bar: back-link left, primary/secondary right */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.actions .spacer{flex:1}
.actions.tight{border-top:0;padding-top:0;margin-top:16px}
.actions button[type=submit]{margin-top:0}

/* ---------- offer panels: 2–3 across, collapse by available width ---------- */
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.cols3 > .card{container-type:inline-size}

/* Ponuda page rows (2026-07-16): each section is a full-width card; inside it the
   form (fields) sits LEFT and its output/result RIGHT — instead of tall stacked
   columns that forced scrolling. Panes are containers so .form-grid can go 2-col. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 36px;align-items:start}
.split > .pane{min-width:0;container-type:inline-size}
.split > .pane > h2{margin:6px 0 2px;font-size:14px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted-2)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- alerts (flash) ---------- */
/* Sticky: an action returns the operator to the car it acted on, which can be
   hundreds of pixels down — a message pinned to the top of the document would
   never be read. */
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-sm);
  padding:11px 14px;font-size:13.5px;line-height:1.45;margin:0 0 14px;border:1px solid transparent;
  position:sticky;top:8px;z-index:20;box-shadow:var(--shadow)}
.alert::before{font-weight:800;flex:none;line-height:1.4}
.alert-msg{flex:1}
/* a real 44px target on touch, visually small */
.alert-x{flex:none;border:0;background:transparent;color:inherit;font:inherit;
  font-size:20px;line-height:1;cursor:pointer;opacity:.6;margin:-8px -6px -8px 0;
  min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:6px}
.alert-x:hover,.alert-x:focus-visible{opacity:1;background:rgba(0,0,0,.06)}
.alert--err{background:var(--danger-bg);color:#8f231e;border-color:#f2cbc8}
.alert--err::before{content:"!"}
.alert--warn{background:var(--amber-bg);color:#7a5510;border-color:#eddcb8}
.alert--warn::before{content:"▲"}
.alert--ok{background:var(--ok-bg);color:#166437;border-color:#c2e4d0}
.alert--ok::before{content:"✓"}
/* legacy inline <p class="err/warn"> keep working as coloured blocks */
.err{background:var(--danger-bg);color:#8f231e;border:1px solid #f2cbc8;
  border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px;margin:0 0 14px}
.warn{background:var(--amber-bg);color:#7a5510;border:1px solid #eddcb8;
  border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px;margin:0 0 14px}

/* ---------- status pill + severity callout (margin) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
  border:1px solid transparent}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill--danger{background:var(--danger-bg);color:var(--danger);border-color:#f2cbc8}
.pill--amber{background:var(--amber-bg);color:var(--amber);border-color:#eddcb8}
.pill--ok{background:var(--ok-bg);color:var(--ok);border-color:#c2e4d0}
.callout{border-left:4px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;
  background:var(--paper);font-size:13.5px;line-height:1.5;margin:12px 0 0}
.callout--danger{border-left-color:var(--danger);background:var(--danger-bg);color:#8f231e}
.callout--amber{border-left-color:var(--amber);background:var(--amber-bg);color:#7a5510}
.callout--ok{border-left-color:var(--ok);background:var(--ok-bg);color:#166437}

/* ---------- hints & meta ---------- */
.hint{color:var(--muted);font-size:13px;line-height:1.5}
.hint a{color:var(--orange-600);font-weight:600}
.subhead{color:var(--muted);font-size:13.5px;margin:2px 0 0}
.subhead b{color:var(--ink);font-weight:700}

/* ---------- calculation table ---------- */
.ktable{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:14px}
.ktable td{padding:9px 10px;border-bottom:1px solid var(--line)}
.ktable .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.ktable tr:last-child td{border-bottom:0}
.ktable .total td{background:var(--paper);color:var(--ink);font-weight:800;font-size:15px;
  border-top:2px solid var(--ink);border-bottom:0}
.ktable .total .num{color:var(--orange-600)}

/* ---------- photo gallery ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:18px 0}
.thumb{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);
  transition:transform .12s,box-shadow .12s,border-color .12s}
.thumb:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--muted-2)}
.thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper)}
.thumb span{display:block;padding:8px 10px;font-size:12px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---- Ponude tracker ---- */
.hd-link{color:inherit;text-decoration:none;font-weight:600;margin-right:1rem;opacity:.85}
.hd-link:hover{opacity:1}
.ponude-tbl{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.94rem}
.ponude-tbl th,.ponude-tbl td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid rgba(128,128,128,.22);vertical-align:middle}
.ponude-tbl th{font-weight:700;opacity:.7;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.ponude-tbl tr:hover td{background:rgba(0,144,208,.06)}
.ponude-tbl .row-actions a{margin-right:.6rem;text-decoration:none;white-space:nowrap}
.inline{display:inline}
.track-box{margin:1.25rem 0;padding:1rem 1.1rem;border:1px solid rgba(0,144,208,.35);border-radius:10px;background:rgba(0,144,208,.05)}
.track-box h2{margin:0 0 .3rem}
/* PPMV calibration: quoted K vs real rjesenje */
.cal-summary{margin:.6rem 0 0;padding:.5rem .7rem;border-radius:8px;background:rgba(40,160,90,.1);font-size:.9rem}
.cal-summary--bad{background:rgba(210,60,40,.12)}
.cal-actual form{display:inline-flex;gap:.25rem;align-items:center}
.cal-actual input{width:5.5rem;padding:.25rem .4rem;font:inherit}
.cal-actual button{padding:.25rem .5rem}
.cushion{display:inline-block;margin-left:.4rem;font-weight:700;color:#1c9b57}
.cushion--bad{color:#d23c28}
/* Naša marža (R) vs the house policy: floor €1500, target €2000 */
.marza{white-space:nowrap}
.marza--floor{color:#d23c28;font-weight:700}
.marza--target{color:#b7791f;font-weight:600}

/* ---------- off-stock admin ---------- */
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.92em}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:150px}
.stack{display:flex;flex-direction:column;gap:10px;margin:0}
form.inline{display:inline-block;margin:0 8px 0 0}
.card--warn{border-color:#eddcb8;background:var(--amber-bg)}
.card--ok{border-color:#c2e4d0;background:var(--ok-bg)}
.lst{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.lst li{font-size:13.5px}
.tbl{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:13.5px}
.tbl th{text-align:left;color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;padding:6px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.chk{display:flex;align-items:center;gap:8px;font-weight:600;margin:5px 0;cursor:pointer}
.chk input{width:auto;margin:0}
.btn--sm{padding:5px 10px;font-size:12.5px}
.kpi-strip{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 18px;min-width:96px;box-shadow:var(--shadow)}
.kpi-n{display:block;font-size:24px;font-weight:800;line-height:1.1}
.kpi-l{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin-top:2px}
.pill--katalog{background:#eef1f4;color:#4a5561;border-color:#dde2e8}
.pill--extended{background:var(--ok-bg);color:var(--ok);border-color:#c2e4d0}
.pill--virtual{background:#fdeede;color:var(--orange-600);border-color:#f6d5ab}
.pill--kandidat,.pill--warn{background:var(--amber-bg);color:var(--amber);border-color:#eddcb8}
.pill--prodano{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill--nedostupno,.pill--odbijeno{background:var(--danger-bg);color:var(--danger);border-color:#f2cbc8}
pre.code{background:var(--ink);color:#f3efe8;padding:11px 14px;border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:12.5px;overflow-x:auto;margin:8px 0}

/* ---------- confidence meter ----------
   Confidence is ORDINAL (visoka / srednja / niska), not a percentage, so this is
   a segmented meter rather than a continuous bar: filling 2 of 3 segments states
   exactly what we know, where "67%" would invent precision we do not have.
   Replaces a grey caption nobody read (Daniel, 2026-07-23). */
.meter{display:flex;align-items:center;gap:7px;margin-top:3px}
.meter-track{display:flex;gap:2px}
.meter-seg{width:15px;height:6px;border-radius:2px;background:var(--line)}
.meter-lab{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.meter--3 .meter-seg:nth-child(-n+3){background:var(--ok)}
.meter--3 .meter-lab{color:var(--ok)}
.meter--2 .meter-seg:nth-child(-n+2){background:var(--amber)}
.meter--2 .meter-lab{color:var(--amber)}
.meter--1 .meter-seg:nth-child(1){background:var(--danger)}
.meter--1 .meter-lab{color:var(--danger)}
.meter--0 .meter-lab{color:var(--muted-2)}

/* ---------- vehicle cards (the nabava pipeline) ----------
   A salesperson triages by LOOKING, so the photo leads and the money reads in
   one line each. Same tokens as everything else — this is information design,
   not a second visual language. */
.vehgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.veh{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.veh-img{display:block;aspect-ratio:4/3;background:#e9e5df;overflow:hidden}
.veh-img img{width:100%;height:100%;object-fit:cover;display:block}
.veh-noimg{display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--muted-2);font-size:12px}
.veh-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:11px;flex:1}
.veh-hd{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.veh-txt{min-width:0;flex:1}
.veh h3{margin:0;font-size:15px;line-height:1.3;text-wrap:balance}
.veh h3 a{color:inherit;text-decoration:none}
.veh h3 a:hover{color:var(--orange-600)}
.veh .spec{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.veh-foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.veh-foot form{margin:0}
.badge{flex:none;font-size:11px;font-weight:800;letter-spacing:.02em;padding:4px 9px;
  border-radius:999px;border:1px solid;white-space:nowrap}
.badge--ok{background:var(--ok-bg);color:var(--ok);border-color:#c2e4d0}
.badge--amber{background:var(--amber-bg);color:var(--amber);border-color:#eddcb8}
.badge--danger{background:var(--danger-bg);color:var(--danger);border-color:#f2cbc8}
.badge--info{background:#eef1f4;color:#4a5561;border-color:#dde2e8}
.lines{display:flex;flex-direction:column;gap:4px}
.ln{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.ln b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.why{margin:0;padding-left:1.1em;font-size:12.5px;color:var(--amber);display:flex;
  flex-direction:column;gap:3px}
.note-soft{margin:0;font-size:12.5px;color:var(--muted)}
.note-ok{margin:0;font-size:12.5px;color:var(--ok);font-weight:650}

/* tick for bulk selection */

/* margin / price, the two views of one number */
.setprice{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;margin:0}
.sp{display:flex;flex-direction:column;gap:4px;flex:1;min-width:96px}
.sp span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2)}
.sp input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-weight:800;font-variant-numeric:tabular-nums;background:var(--surface)}
.sp--big input{font-size:17px}
.sp input:focus{outline:2px solid var(--orange);outline-offset:-1px;border-color:var(--orange)}
.eq{padding-bottom:9px;color:var(--muted-2);font-weight:800}

/* market orientation */
.mkt{border-top:1px solid var(--line);padding-top:10px}
.mkt-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:5px}
.mkt-t{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-2)}
.src{font-size:11px;color:var(--muted-2)}
.scale-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.scale-ends b{color:var(--ink)}

/* bulk bar */
.barline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;
  box-shadow:var(--shadow);margin-bottom:16px}
.barline p{margin:0;color:var(--muted)}
.barline .grow{flex:1}
.barline form{margin:0}

/* Market position — the marking that used to sit by the title describing the
   MARGIN while the market figures were the smallest text on the card. It now
   lives ON the market scale and is computed from the selling price, so the
   colour and the numbers it refers to cannot drift apart (Daniel, 2026-07-24). */
.mkt-bar{position:relative;height:6px;margin:9px 0 7px;border-radius:3px;
  background:linear-gradient(90deg,var(--line),var(--muted-2),var(--line))}
.mkt-avg{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink);
  opacity:.55;transform:translateX(-1px)}
.mkt-dot{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;
  transform:translateX(-7px);border:2px solid var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.28)}
.mkt-dot--ok{background:var(--ok,#1a7f4b)}
.mkt-dot--amber{background:var(--amber,#c47f16)}
.mkt-dot--danger{background:var(--danger,#c0392b)}
.mkt-mark{margin:7px 0 0;font-size:12.5px;font-weight:600;display:flex;gap:6px;
  align-items:baseline}
.mkt-mark::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.mkt-mark--ok{color:var(--ok,#1a7f4b)}
.mkt-mark--ok::before{background:var(--ok,#1a7f4b)}
.mkt-mark--amber{color:var(--amber,#c47f16)}
.mkt-mark--amber::before{background:var(--amber,#c47f16)}
.mkt-mark--danger{color:var(--danger,#c0392b)}
.mkt-mark--danger::before{background:var(--danger,#c0392b)}
.mkt-mark--info{color:var(--muted)}
.mkt-mark--info::before{background:var(--muted-2)}


/* --- Inventory list view -------------------------------------------------
   A SEPARATE rendering, not the card grid reflowed. Hiding a card's photo in
   CSS still downloads it, and with a few hundred cars that is the whole cost of
   the page — so the list is its own markup (offstock_popis.html) that never
   emits an image, and the server decides which of the two to send. */
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.viewtog a{padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted);
  text-decoration:none;background:var(--surface)}
.viewtog a.on{background:var(--ink,#222);color:#fff}
/* An action lands on `#v-<car_id>`; without this the car sits under the sticky
   message that explains what just happened to it. */
.veh[id],.vehtbl tr[id],.card[id]{scroll-margin-top:76px}
.tblwrap{overflow-x:auto}                  /* narrow screens scroll the table, not the page */
.vehtbl{margin-top:0}
.vehtbl td{vertical-align:middle}
.vehtbl tbody tr:hover{background:var(--surface-2,#f7f8fa)}
.vehtbl .veh-col{font-weight:600;min-width:220px}
.vehtbl .veh-col a{color:inherit;text-decoration:none}
.vehtbl .veh-col a:hover{text-decoration:underline}
.vehtbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vehtbl th.num{text-align:right}
.vehtbl .tick-col{width:34px;padding-right:0}
.vehtbl .tick-col input{width:auto;margin:0}
.pill--info{background:#eef1f4;color:#4a5561;border-color:#dde2e8}
/* a label only a screen reader needs */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* foldable card: × in the header folds the body to a one-line summary */
.card-x{flex:none;border:0;background:transparent;color:var(--muted,#667);font:inherit;
  font-size:20px;line-height:1;padding:2px 8px;border-radius:var(--radius-sm);cursor:pointer;opacity:.7}
.card-x:hover,.card-x:focus-visible{opacity:1;background:rgba(0,0,0,.06)}
.linklike{border:0;background:transparent;padding:0;font:inherit;color:var(--orange-600);font-weight:600;
  text-decoration:underline;cursor:pointer}


/* ================= sourcing page (redesign 2026-08-25) ================= */
.src-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.src-head .grow,.grow{flex:1}
.viewtog{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:3px}
.viewtog a{border-radius:5px;padding:4px 10px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none}
.viewtog a.on{background:var(--primary);color:#fff}
.importbox{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:5px 8px;margin:0}
.importbox label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:500}
.importbox input{width:64px;height:30px;border:1px solid var(--line-2);border-radius:5px;padding:0 6px;
  font-size:13.5px;text-align:right;margin:0}
.importbox button{margin:0}

/* run bar under the header — one job at a time */
.runbar{background:var(--navy);color:#fff;padding:12px 28px;display:flex;align-items:center;gap:14px;font-size:13.5px}
.runbar b{font-weight:600;white-space:nowrap}
.runbar-track{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.runbar-fill{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .35s ease}
.runbar .mono{font-size:13px;color:rgba(255,255,255,.8)}
.runbar-note{font-size:12.5px;color:rgba(255,255,255,.55)}
.runbar-link{color:#fff;font-weight:500}
.runbar--done{background:var(--surface);color:var(--ink-soft);border-bottom:1px solid var(--line);padding:10px 28px}
.runbar--done .bad{color:var(--danger);font-weight:600}

/* stage tabs — CSS-only (radio + labels), no JS → CSP-safe */
.tabs{display:flex;flex-direction:column;gap:14px}
.tabin{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tabbar{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:4px;align-self:flex-start;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:7px;border-radius:6px;padding:6px 12px;font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;margin:0;
  cursor:pointer;color:var(--muted);user-select:none}
.tab:hover{color:var(--ink);background:var(--paper)}
.tab-n{font-size:12px;opacity:.65}
.tab .n{font-family:var(--mono);font-size:12.5px;padding:0 6px;border-radius:8px;background:var(--paper);color:var(--muted)}
.tab .n--warn{background:var(--amber-bg);color:var(--amber)}
.tab .n--ok{background:var(--ok-bg);color:var(--ok)}
#bk-nova:checked ~ .tabbar [for=bk-nova],
#bk-pregled:checked ~ .tabbar [for=bk-pregled],
#bk-spremni:checked ~ .tabbar [for=bk-spremni],
#bk-u_feedu:checked ~ .tabbar [for=bk-u_feedu],
#bk-na_njuskalu:checked ~ .tabbar [for=bk-na_njuskalu]{
  background:var(--primary);color:#fff}
#bk-nova:checked ~ .tabbar [for=bk-nova] .n,
#bk-pregled:checked ~ .tabbar [for=bk-pregled] .n,
#bk-spremni:checked ~ .tabbar [for=bk-spremni] .n,
#bk-u_feedu:checked ~ .tabbar [for=bk-u_feedu] .n,
#bk-na_njuskalu:checked ~ .tabbar [for=bk-na_njuskalu] .n{
  background:rgba(255,255,255,.18);color:#fff}
.tabpane{display:none;flex-direction:column;gap:14px}
/* one selector per stage in offstock.stages.STAGES — tests/test_dashboard_css_stages.py pins it */
#bk-nova:checked ~ #tp-nova,
#bk-pregled:checked ~ #tp-pregled,
#bk-spremni:checked ~ #tp-spremni,
#bk-u_feedu:checked ~ #tp-u_feedu,
#bk-na_njuskalu:checked ~ #tp-na_njuskalu{display:flex}

/* the stage bar: what this tab holds + the one action that moves it */
.barline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:12px 18px;margin:0}
.barline p{margin:0;font-size:14px;color:var(--ink-soft)}
.barline button{margin:0}
.barline.sticky{position:sticky;top:8px;z-index:10}
.selall{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;font-weight:500;text-transform:none;letter-spacing:0;margin:0}
.selall input{width:14px;height:14px;accent-color:var(--primary);margin:0}

/* vehicle cards */
.vehgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(450px,1fr));gap:16px}
.vc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;position:relative}
.vc-head{display:flex;gap:12px;padding:16px 18px 10px}
.vc-photo{width:118px;flex:0 0 118px;height:88px;border-radius:7px;background:linear-gradient(160deg,#1C2A44,#0B1526);
  display:flex;flex-direction:column;justify-content:flex-end;padding:6px;position:relative;overflow:hidden;text-decoration:none}
.vc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,21,38,.85))}
.vc-photo-n,.vc-photo-src{position:relative;z-index:1;font-size:11px;letter-spacing:.02em;line-height:1.3}
.vc-photo-n{color:rgba(255,255,255,.85)}
.vc-photo-src{color:rgba(255,255,255,.5)}
.vc-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.vc-title{display:flex;align-items:flex-start;gap:8px}
.vc-title h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.vc-title h3 a{color:var(--ink);text-decoration:none}
.vc-title h3 a:hover{color:var(--primary);text-decoration:underline}
.vc-band{margin-left:auto;flex:0 0 auto;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:var(--paper);color:var(--muted)}
.vc-band--ok{background:var(--ok-bg);color:var(--ok)}
.vc-band--amber{background:var(--amber-bg);color:var(--amber)}
.vc-band--danger{background:var(--danger-bg);color:var(--danger)}
.vc-spec{margin:0;color:var(--muted);font-size:13px}
.vc-figs{display:flex;gap:14px;margin-top:4px;flex-wrap:wrap}
.vc-figs span{display:flex;flex-direction:column;line-height:1.25}
.vc-figs small{color:var(--muted-2);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.vc-figs b{font-size:14px;font-weight:500}
.vc-tick{display:grid;place-items:center;cursor:pointer;padding:4px;margin:-2px -4px 0 0;flex:none}
.vc-tick input{width:15px;height:15px;accent-color:var(--accent);margin:0;cursor:pointer}
.vc-note{margin:0 14px 10px;font-size:13px;color:var(--muted-2)}
.vc-note--warn{color:var(--amber)}
.vc-why{margin:0 14px 10px;padding:11px 14px 11px 30px;background:#FFF8EE;border:1px solid #F3E0C4;border-radius:7px;
  color:#6B4A16;font-size:13px;display:flex;flex-direction:column;gap:3px}
.vc-price{margin:0 14px 10px;display:flex;align-items:flex-end;gap:8px;padding:13px 14px;background:var(--surface-2);
  border:1px solid #E8ECF2;border-radius:7px;flex-wrap:wrap}
.vc-price .sp{display:flex;flex-direction:column;gap:3px}
.vc-price .sp>span{color:var(--muted-2);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.vc-price .sp input{width:86px;height:33px;border:1px solid var(--line-2);border-radius:5px;background:#fff;padding:0 7px;
  font-family:var(--mono);font-size:14px;text-align:right;margin:0}
.vc-price .sp--big input{width:106px;border-color:var(--primary);font-size:15.5px;font-weight:500}
.vc-price .eq{color:var(--muted-2);font-size:13.5px;padding-bottom:6px}
.vc-price button{margin:0}
.vc-price-note{font-size:12.5px;font-weight:500;color:var(--amber);padding-bottom:8px}
.vc-price--ro .sp b{font-size:15.5px;font-weight:600}
.vc-ok{align-self:center;font-size:13px;color:var(--ok)}
.vc-mkt{margin:0 14px 12px;padding-top:10px;border-top:1px dashed #E8ECF2}
.vc-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid #EEF1F5;background:#FCFDFE}
.vc-foot form{margin:0}
.vc-link{font-size:13px}
.vc-id{font-size:12.5px;color:#A3ACBB}
.btn--quiet{background:none;border-color:transparent;color:var(--muted-2);font-weight:500}
.btn--quiet:hover{border-color:#E3B4AE;color:#C0392B;background:none}

/* market scale */
.mkt-hd{display:flex;align-items:baseline;gap:8px}
.mkt-t{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}
.mkt .src{font-size:12px;color:var(--muted-2)}
.mkt-bar{position:relative;height:6px;margin:9px 0 6px;border-radius:3px;background:linear-gradient(90deg,#E6F4FB,#DCE6F0)}
.mkt-avg{position:absolute;top:-3px;width:1px;height:12px;background:var(--muted-2)}
.mkt-dot{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 1px 3px rgba(16,25,43,.28);margin-left:-6px;background:var(--muted)}
.mkt-dot--ok{background:#3FBE7E}.mkt-dot--amber{background:#E0A33C}.mkt-dot--danger{background:#C0392B}.mkt-dot--info{background:var(--accent)}
.scale-ends{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:var(--muted)}
.scale-ends span{color:var(--muted-2)}
.mkt-mark{margin:7px 0 0;font-size:13px;color:var(--ink-soft)}
.mkt-mark--ok{color:var(--ok)}.mkt-mark--amber{color:var(--amber)}.mkt-mark--danger{color:var(--danger)}

/* cards for the whole card area, bottom cards */
.src-bottom{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;margin-top:18px}
.src-bottom .card{margin:0}
.card-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.card-hd h2{margin:0}
.card-hd form{margin:0}


/* ================= home dashboard ================= */
.home{display:flex;flex-direction:column;gap:18px}
.home-hd{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.metric-l{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.metric-v{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.metric-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.metric-delta{font-size:12px;font-weight:600;padding:1px 6px;border-radius:5px;background:var(--paper);color:var(--muted)}
.metric-delta--ok{background:var(--ok-bg);color:var(--ok)}
.metric-delta--warn{background:var(--amber-bg);color:var(--amber)}
.metric-delta--info{background:#E6F1FB;color:#00507F}
.home-row{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch}
.home-card{margin:0;display:flex;flex-direction:column}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.bars{display:flex;align-items:flex-end;gap:12px;height:168px;margin-top:16px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.bar-pair{width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;height:136px}
.bar{width:14px;border-radius:3px 3px 0 0;display:block;min-height:2px}
.spark{width:100%;height:96px;display:block;margin-top:14px}
.spark-labels{display:flex;justify-content:space-between;margin-top:6px}
.attn{display:flex;flex-direction:column;gap:8px}
.attn-row{display:flex;align-items:center;gap:12px;background:#FCFDFE;border:1px solid #E8ECF2;border-radius:8px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.attn-row:hover{border-color:var(--primary);background:#fff;color:var(--ink)}
.attn-ico{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center}
.attn-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.attn-ico--warn{background:var(--amber-bg);color:var(--amber)}
.attn-ico--info{background:#E6F1FB;color:#00507F}
.attn-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.attn-txt b{font-size:13.5px;font-weight:600}
.attn-n{margin-left:auto;font-size:14px;font-weight:600}
.attn-n--warn{color:var(--amber)}.attn-n--info{color:#00507F}
.funnel{display:flex;flex-direction:column;gap:12px}
.funnel-row{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--ink)}
.funnel-hd{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-soft)}
.funnel-hd b{font-size:13.5px}
.funnel-track{display:block;height:8px;border-radius:4px;background:#EEF1F5;overflow:hidden}
.funnel-fill{display:block;height:100%;border-radius:4px}
.cal{display:flex;flex-direction:column;gap:10px}
.cal-row{display:flex;align-items:center;gap:10px}
.cal-car{width:96px;flex:0 0 96px;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-track{flex:1;position:relative;height:8px;border-radius:4px;background:#EEF1F5}
.cal-mid{position:absolute;top:0;bottom:0;width:1px;background:#C9D1DB;left:50%}
.cal-bar{position:absolute;top:-2px;height:12px;border-radius:3px}
.cal-bar--ok{background:#3FBE7E}.cal-bar--bad{background:#C0392B}
.ok{color:var(--ok)}.bad{color:var(--danger)}
.activity{display:flex;flex-direction:column}
.act-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--paper);font-size:13.5px}
.act-row:last-child{border-bottom:0}
.act-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%}

/* inline filter row (offers tracking) */
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
.filters input,.filters select{width:auto;min-width:180px;height:37px;margin:0}
.filters button{margin:0}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-top:12px;font-size:13px;color:var(--ink-soft)}
.kv b{font-weight:600;color:var(--ink)}

/* ---------- VAT band on the offer header ----------
   The purchase basis (J) is net×1,25 on a u-PDV car and the gross unchanged on
   a margin-scheme one — a ~5% swing on the whole quote that used to live in a
   13px grey parenthesis. Both regimes are stated, and coloured differently, so
   the operator reads the colour before he reads the number. */
.spec-line{color:var(--muted);font-size:14.5px;line-height:1.5;margin:2px 0 0;
  font-variant-numeric:tabular-nums}

.vat-band{margin:14px 0 0;padding:12px 16px 11px;border-radius:var(--radius);
  border:1px solid transparent;border-left-width:5px}
.vat-band--pdv{background:var(--amber-bg);border-color:#eddcb8;border-left-color:var(--amber)}
.vat-band--marza{background:#eef1f4;border-color:#dde2e8;border-left-color:#7c8899}

.vat-band__head{margin-bottom:7px}
.vat-tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase}
.vat-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.vat-tag--pdv{color:var(--amber)}
.vat-tag--marza{color:#4a5561}

.vat-band__sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  font-variant-numeric:tabular-nums}
.vat-part{font-size:17px;color:var(--ink)}
.vat-part b{font-weight:700}
.vat-op{font-size:15px;font-weight:700;color:var(--muted)}
.vat-basis{font-size:27px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.vat-band--pdv .vat-basis{color:var(--amber)}
.vat-band--marza .vat-basis{color:var(--ink)}
.vat-basis__tag{font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}

.vat-band__note{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.vat-band--pdv .vat-band__note{color:#7a5510}
.vat-band__note b{font-weight:750}

@media (max-width:560px){
  .vat-basis{font-size:23px}
  .vat-band__sum{gap:7px}
}

/* Off-stock stock filter — one compact row UNDER the tab bar, governing all four. */
.stockfilter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
               padding: 10px 14px; border-bottom: 1px solid #e3e3e3 }
.stockfilter label { display: flex; flex-direction: column; gap: 3px;
                     text-transform: uppercase; letter-spacing: .04em;
                     font-size: 11px; color: #6b7280 }
.stockfilter select, .stockfilter input { font-size: 13px; padding: 4px 6px }
.stockfilter select { max-width: 190px }