/* ==========================================================================
   BanSek Trade — B2B portal
   Loaded by b2b*.html only, after main.css. Same brand in a different
   register: this is a tool, not a brochure.

   Density is the main deliberate change. Base type drops to 15px, section
   padding to roughly half the marketing pages, and monospace carries far more
   of the load — part numbers, prices, stock states and dates are all read and
   transcribed rather than skimmed.

    1.  TOKENS + SHELL
    2.  PORTAL BAR
    3.  LEFT RAIL / BOTTOM TABS
    4.  PAGE FURNITURE
    5.  DATA PANEL + TABLES
    6.  STOCK STRIP
    7.  PRICE, CHIPS, QUANTITY
    8.  CARDS, TILES, LISTS
    9.  FORMS
   10.  MODAL, TOAST, ALERTS
   11.  EMPTY STATES + SKELETONS
   12.  SCREEN-SPECIFIC
   13.  MOTION + REDUCED MOTION
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS + SHELL
   -------------------------------------------------------------------------- */
body.portal {
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11px;

  --pbar-h: 60px;
  --rail-w: 232px;
  --rail-w-min: 64px;
  --tabs-h: 60px;
  --pad-block: clamp(24px, 3.2vw, 44px);
  --gutter: clamp(16px, 2.6vw, 34px);

  font-size: var(--fs-body);
  background: var(--bs-black);
  overflow-x: hidden;
}

@media (min-width: 900px) {
  body.portal {
    --pbar-h: 64px;
  }
}

.portal__main {
  min-height: calc(100vh - var(--pbar-h));
  padding-top: var(--pbar-h);
  padding-bottom: calc(var(--tabs-h) + 24px);
}

@media (min-width: 1000px) {
  .portal__main {
    padding-bottom: 48px;
    padding-left: var(--rail-w);
    transition: padding-left 260ms var(--ease-out-quart);
  }

  body.rail-collapsed .portal__main {
    padding-left: var(--rail-w-min);
  }
}

.portal__inner {
  width: min(1480px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: var(--pad-block);
}

/* Public screens (prijava, zahtev, lozinka) have no rail and no tabs. */
.portal--public .portal__main {
  padding-bottom: 0;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   2. PORTAL BAR
   -------------------------------------------------------------------------- */
.pbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-nav);
  display: flex;
  gap: 10px;
  align-items: center;
  height: var(--pbar-h);
  padding-inline: var(--gutter);
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--bs-line);
}

.pbar__brand {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  flex: none;
  min-height: 44px;
}

.pbar__mark {
  width: 34px;
  height: auto;
}

.pbar__word {
  display: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bs-white);
}

.pbar__word span {
  font-weight: 500;
  color: var(--bs-gray);
}

@media (min-width: 620px) {
  .pbar__word {
    display: inline;
  }
}

/* The DEMO chip is permanent and deliberately not subtle. Anyone looking at
   this screen over someone's shoulder has to know it is not the real thing. */
.demo-chip {
  flex: none;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bs-black);
  background: var(--bs-warn);
  border-radius: var(--radius-sm);
}

.pbar__spacer {
  flex: 1 1 auto;
}

.pbar__branch {
  display: none;
  align-items: center;
  gap: 7px;
}

@media (min-width: 820px) {
  .pbar__branch {
    display: inline-flex;
  }
}

.pbar__branchLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.pbar__select {
  min-height: 36px;
  padding: 0 26px 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bs-white);
  background: var(--bs-steel);
  background-image: linear-gradient(45deg, transparent 50%, var(--bs-gray) 50%),
    linear-gradient(135deg, var(--bs-gray) 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  appearance: none;
  cursor: pointer;
}

/* `<input type="date">` styled with this class reported no computed outline on
   focus — Chromium paints its own ring on an inner part, which the global
   `:focus-visible` rule never reaches. Stating it here makes the ring real
   rather than assumed. */
.pbar__select:focus-visible {
  outline: 2px solid var(--bs-lime);
  outline-offset: 2px;
}

.pbar__cart {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bs-silver);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.pbar__cart:hover {
  color: var(--bs-white);
  background: rgba(255, 255, 255, 0.06);
}

.pbar__badge {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 18px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--bs-black);
  background: var(--bs-lime);
  border-radius: 9px;
}

.pbar__user {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--bs-silver);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart);
}

.pbar__user:hover {
  border-color: var(--bs-gray-dim);
}

.pbar__userText {
  display: none;
  text-align: left;
}

@media (min-width: 700px) {
  .pbar__userText {
    display: block;
  }
}

.pbar__company {
  display: block;
  max-width: 20ch;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-white);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pbar__tier {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--bs-lime);
}

.pbar__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: var(--gutter);
  z-index: 2;
  min-width: 220px;
  padding: 6px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-quart),
    visibility var(--dur);
}

.pbar__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pbar__menuItem {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--bs-silver);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart);
}

.pbar__menuItem:hover {
  color: var(--bs-white);
  background: var(--bs-steel-2);
}

.pbar__menuHead {
  padding: 10px 12px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray-dim);
  border-bottom: 1px solid var(--bs-line);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   3. LEFT RAIL / BOTTOM TABS
   -------------------------------------------------------------------------- */
.prail {
  display: none;
}

@media (min-width: 1000px) {
  .prail {
    position: fixed;
    top: var(--pbar-h);
    bottom: 0;
    left: 0;
    z-index: calc(var(--z-nav) - 1);
    display: flex;
    flex-direction: column;
    width: var(--rail-w);
    padding: 14px 10px;
    overflow-y: auto;
    background: var(--bs-carbon);
    border-right: 1px solid var(--bs-line);
    transition: width 260ms var(--ease-out-quart);
  }

  body.rail-collapsed .prail {
    width: var(--rail-w-min);
  }
}

.prail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.prail__link {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--bs-silver);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart);
}

.prail__link svg {
  flex: none;
  color: var(--bs-gray);
  transition: color var(--dur) var(--ease-out-quart);
}

.prail__link:hover {
  color: var(--bs-white);
  background: var(--bs-steel);
}

.prail__link[aria-current="page"] {
  color: var(--bs-white);
  background: var(--bs-steel);
  box-shadow: inset 2px 0 0 var(--bs-lime);
}

.prail__link[aria-current="page"] svg {
  color: var(--bs-lime);
}

body.rail-collapsed .prail__text {
  display: none;
}

body.rail-collapsed .prail__link {
  justify-content: center;
  padding-inline: 0;
}

.prail__toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  margin-top: auto;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
  border-top: 1px solid var(--bs-line);
  border-radius: 0;
  transition: color var(--dur) var(--ease-out-quart);
}

.prail__toggle:hover {
  color: var(--bs-white);
}

body.rail-collapsed .prail__toggle span {
  display: none;
}

body.rail-collapsed .prail__toggle svg {
  transform: rotate(180deg);
}

/* Bottom tabs — four most-used screens plus a sheet for the rest. */
.ptabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--tabs-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--bs-line);
}

@media (min-width: 1000px) {
  .ptabs {
    display: none;
  }
}

.ptabs__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-gray);
  transition: color var(--dur) var(--ease-out-quart);
}

.ptabs__item[aria-current="page"],
.ptabs__item:hover {
  color: var(--bs-lime);
}

.ptabs__sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  background: rgba(5, 5, 5, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out-quart), visibility var(--dur);
}

.ptabs__sheet.is-open {
  opacity: 1;
  visibility: visible;
}

.ptabs__sheetInner {
  width: 100%;
  padding: 18px var(--gutter) calc(var(--tabs-h) + 18px);
  background: var(--bs-carbon);
  border-top: 1px solid var(--bs-line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ptabs__sheetList {
  display: grid;
  gap: 4px;
  list-style: none;
}

/* --------------------------------------------------------------------------
   4. PAGE FURNITURE
   -------------------------------------------------------------------------- */
.phead {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--bs-line);
}

.phead__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.phead__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bs-white);
}

.phead__sub {
  max-width: 62ch;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bs-silver);
}

.phead__act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psection {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.psection__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.psection__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--bs-white);
}

.psection__link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
}

/* Demo-data banner — catalogue and documents. */
.demo-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-warn);
  background: rgba(255, 95, 31, 0.08);
  border: 1px solid rgba(255, 95, 31, 0.4);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   5. DATA PANEL + TABLES
   Part numbers, prices and stock go on paper. This is where legibility beats
   mood, and the rest of the portal stays dark around it.
   -------------------------------------------------------------------------- */
.panel {
  padding: clamp(14px, 1.8vw, 22px);
  color: var(--ink-body);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

/* No `overflow: hidden` here, however tempting it is for clipping the table's
   corners against the 4px radius. Any overflow value other than `visible`
   establishes a scrollport, and the sticky table header inside would then pin
   to *this* box — which never scrolls — instead of to the viewport. Four pixels
   of corner is not worth a header that looks sticky and is not. */
.panel--flush {
  padding: 0;
}

/* No overflow by default, deliberately.

   Setting `overflow-x: auto` here unconditionally made this a scroll container
   on *both* axes — CSS computes the other axis away from `visible` — and two
   things broke at once: the mouse wheel over a table scrolled the box instead
   of the page, and the sticky header could never pin, because sticky resolves
   against the nearest scrollport and that had become this box rather than the
   viewport. Neither is visible in a screenshot; both are obvious the moment you
   try to use the screen.

   So the horizontal scroller only exists where it is actually needed. Above
   1100px the tables fit. */
.panel__scroll {
  overflow: visible;
}

@media (max-width: 1099px) {
  .panel__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* A sticky header inside a scroll container pins to that container, which
     never scrolls vertically — so it would simply sit there looking sticky and
     doing nothing. Better to be honestly static. */
  .panel__scroll .dtable thead th {
    position: static;
  }
}

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dtable th,
.dtable td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}

.dtable thead th {
  position: sticky;
  top: var(--pbar-h);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-muted);
  background: var(--surface);
  border-bottom-color: var(--ink-faint);
}

.dtable tbody tr:hover {
  background: rgba(0, 0, 0, 0.035);
}

/* The header is sticky beneath a fixed portal bar, so anything the browser
   scrolls to on its own — keyboard focus, an anchor, scrollIntoView — lands
   underneath both unless the row reserves the room. */
.dtable tbody tr {
  scroll-margin-top: calc(var(--pbar-h) + 52px);
}

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

.dtable .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dtable .act {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.dtable th[data-sort] button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.dtable th[aria-sort="ascending"] button::after {
  content: "▲";
  font-size: 8px;
}

.dtable th[aria-sort="descending"] button::after {
  content: "▼";
  font-size: 8px;
}

.dtable__link {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dtable--sub {
  font-size: 12px;
}

.dtable--spec th {
  width: 40%;
  font-weight: 500;
  color: var(--ink-muted);
}

/* Article identity cell */
.acell__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acell__name {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-body);
}

.acell__brand {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

tr.is-overdue td {
  background: rgba(255, 95, 31, 0.07);
}

.doc__num {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
}

.doc__late {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bs-warn);
}

/* --------------------------------------------------------------------------
   6. STOCK STRIP
   The portal's centrepiece. Five cells, one per branch, state by colour and by
   accessible text — never a raw count, which the client has not authorised.
   -------------------------------------------------------------------------- */
.stock {
  display: inline-flex;
  gap: 3px;
  list-style: none;
}

.stock__cell {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.stock__cell.is-in {
  color: #2f4a00;
  background: rgba(204, 249, 12, 0.55);
  border-color: rgba(120, 150, 10, 0.5);
}

.stock__cell.is-low {
  color: #6b3400;
  background: rgba(255, 165, 31, 0.35);
  border-color: rgba(200, 120, 20, 0.45);
}

.stock__cell.is-none {
  color: var(--ink-muted);
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--hairline);
}

.stock__cell.is-request {
  color: var(--ink-muted);
  background: transparent;
  border-color: var(--ink-faint);
  border-style: dashed;
}

/* The user's own branch is the one they actually care about. */
.stock__cell.is-home {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.stock-list {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
}

.stock-list__row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface);
  font-size: 13px;
}

.stock-list__name {
  color: var(--ink);
}

.stock-list__state {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.stock-list__row.is-in .stock-list__state {
  color: #4f6b00;
}

.stock-list__row.is-low .stock-list__state {
  color: #96530a;
}

.stock-list__row.is-none .stock-list__state,
.stock-list__row.is-request .stock-list__state {
  color: var(--ink-muted);
}

.stock-list__row.is-home {
  box-shadow: inset 3px 0 0 var(--ink);
}

/* --------------------------------------------------------------------------
   7. PRICE, CHIPS, QUANTITY
   -------------------------------------------------------------------------- */
.price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.price__list {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-decoration: line-through;
}

.price__net {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Naming the discount on every row is the point: a portal that silently
   applies a rebate gives the buyer no reason to believe they got one. */
.price__tier {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #3d4f00;
  background: rgba(204, 249, 12, 0.45);
  border-radius: var(--radius-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.chip--ok {
  color: #3d5400;
  background: rgba(204, 249, 12, 0.4);
  border-color: rgba(140, 175, 10, 0.5);
}

.chip--info {
  color: #10465f;
  background: rgba(60, 160, 210, 0.18);
  border-color: rgba(60, 160, 210, 0.45);
}

.chip--warn {
  color: #7a3a00;
  background: rgba(255, 140, 31, 0.2);
  border-color: rgba(220, 120, 20, 0.5);
}

.chip--off {
  color: var(--ink-muted);
  background: rgba(0, 0, 0, 0.05);
}

.chip--accent {
  color: var(--bs-black);
  background: var(--bs-lime);
  border-color: var(--bs-lime);
}

.chip--link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty__btn {
  width: 30px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--ink-body);
  background: rgba(0, 0, 0, 0.04);
  transition: background-color var(--dur) var(--ease-out-quart);
}

.qty__btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.qty__input {
  width: 46px;
  min-height: 34px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  color: var(--ink);
  background: var(--surface-input);
  border: none;
  border-inline: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.btn--sm {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
}

.btn--danger {
  color: var(--bs-white);
  background: var(--bs-error);
}

.btn--danger:hover {
  background: #a30f1a;
}

.linkbtn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out-quart);
}

.linkbtn:hover {
  color: var(--ink);
}

.linkbtn--danger:hover {
  color: var(--bs-error);
}

/* --------------------------------------------------------------------------
   8. CARDS, TILES, LISTS
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 8px;
}

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

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.tile:hover {
  background: var(--bs-steel-2);
  border-color: rgba(204, 249, 12, 0.4);
}

.tile__num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--bs-lime);
  font-variant-numeric: tabular-nums;
}

.tile__label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--bs-silver);
}

.cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.acard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.acard__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.acard__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.acard__brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.acard__foot {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.lists {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.listcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.listcard__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-white);
}

.listcard__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bs-gray);
}

.listcard .btn {
  margin-top: auto;
}

/* Duty-line card — the one lime accent in the dark column. */
.duty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(204, 249, 12, 0.06), transparent 60%), var(--bs-steel);
  border: 1px solid rgba(204, 249, 12, 0.35);
  border-radius: var(--radius);
}

.duty__label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
}

.duty__num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bs-white);
}

.duty__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--bs-silver);
}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.portal .field__control {
  min-height: 46px;
  padding: 16px 12px 5px;
  font-size: 14px;
}

.portal textarea.field__control {
  min-height: 96px;
  padding-top: 22px;
}

.portal .field__label {
  top: 13px;
  font-size: 13px;
}

.portal select.field__control {
  padding-top: 16px;
}

.facets {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.facet {
  padding: 12px 14px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.facet__title {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
}

.facet__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
}

.facet__item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--bs-silver);
}

.facet__item input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: #94b800;
}

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

.facet__range input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bs-white);
  background: var(--bs-steel-2);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 4px;
}

.radio,
.acc__check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-body);
}

.radio input,
.acc__check input {
  flex: none;
  width: 17px;
  height: 17px;
}

/* --------------------------------------------------------------------------
   10. MODAL, TOAST, ALERTS
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 5, 5, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-in 220ms var(--ease-out-quart);
}

.modal__box {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}

.modal__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 18px 0;
}

.modal__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--bs-white);
}

.modal__body {
  padding: 14px 18px 18px;
}

.modal__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-silver);
}

.modal__text + .modal__text {
  margin-top: 10px;
}

.modal__text--muted {
  font-size: 13px;
  color: var(--bs-gray);
}

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 18px 18px;
}

.toasts {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabs-h) + 16px);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@media (min-width: 1000px) {
  .toasts {
    bottom: 16px;
  }
}

.toast {
  max-width: 340px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bs-black);
  background: var(--bs-lime);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  animation: toast-in 260ms var(--ease-out-quart);
}

.toast--warn {
  color: var(--bs-white);
  background: var(--bs-warn);
}

.toast.is-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 380ms linear, transform 380ms var(--ease-out-quart);
}

.alert {
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: var(--radius);
}

.alert--warn {
  color: #ffd7bd;
  background: rgba(255, 95, 31, 0.12);
  border: 1px solid rgba(255, 95, 31, 0.45);
}

.alert--error {
  color: #ffd9dc;
  background: rgba(193, 18, 31, 0.16);
  border: 1px solid rgba(193, 18, 31, 0.5);
}

.panel .alert--warn {
  color: #8a3c00;
}

/* --------------------------------------------------------------------------
   11. EMPTY STATES + SKELETONS
   The `novi-partner` account sees an empty state on every screen. Each one has
   to read as a deliberate starting point rather than a failure.
   -------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: clamp(28px, 5vw, 56px) 20px;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--ink-faint);
  border: 1px solid var(--hairline);
  border-radius: 50%;
}

.empty__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.empty__body {
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.empty__action {
  margin-top: 6px;
}

.skel__bar {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, rgba(125, 135, 145, 0.16), rgba(125, 135, 145, 0.3), rgba(125, 135, 145, 0.16));
  background-size: 200% 100%;
  border-radius: 3px;
  animation: skel 1.2s linear infinite;
}

.skel-card {
  height: 132px;
  background: linear-gradient(90deg, rgba(125, 135, 145, 0.1), rgba(125, 135, 145, 0.22), rgba(125, 135, 145, 0.1));
  background-size: 200% 100%;
  border-radius: var(--radius);
  animation: skel 1.2s linear infinite;
}

/* --------------------------------------------------------------------------
   12. SCREEN-SPECIFIC
   -------------------------------------------------------------------------- */

/* ---- Prijava ---- */
.auth {
  display: grid;
  min-height: calc(100vh - var(--pbar-h));
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.auth__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px) var(--gutter);
  background: var(--bs-carbon);
}

.auth__inner {
  width: min(420px, 100%);
  margin-inline: auto;
}

.auth__title {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bs-white);
}

.auth__sub {
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bs-silver);
}

.auth__field {
  margin-bottom: 12px;
}

.auth .field__control {
  color: var(--bs-white);
  background: var(--bs-steel-2);
  border-color: var(--bs-line);
}

.auth .field__label {
  color: var(--bs-gray);
}

.auth__reveal {
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 34px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
  border-radius: var(--radius-sm);
}

.auth__reveal:hover {
  color: var(--bs-white);
}

.auth__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 18px;
  font-size: 13px;
  color: var(--bs-silver);
}

.auth__links {
  margin-top: 18px;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--bs-gray);
  border-top: 1px solid var(--bs-line);
}

.auth__links a {
  color: var(--bs-silver);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth__error {
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #ffd9dc;
  background: rgba(193, 18, 31, 0.16);
  border: 1px solid rgba(193, 18, 31, 0.5);
  border-radius: var(--radius);
}

.auth__notice {
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--bs-silver);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-left: 2px solid var(--bs-lime);
  border-radius: var(--radius);
}

.login__help {
  display: block;
  margin-top: 6px;
}

/* Demo credentials panel — printed on the page on purpose. */
.demopanel {
  margin-top: 20px;
  padding: 14px;
  border: 1px dashed var(--bs-gray-dim);
  border-radius: var(--radius);
}

.demopanel__title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-warn);
}

.demopanel__note {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bs-gray);
}

.demopanel__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.demopanel__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-sm);
}

.demopanel__who {
  font-size: 12px;
  color: var(--bs-silver);
}

.demopanel__who b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--bs-white);
}

.auth__aside {
  position: relative;
  display: none;
  padding: clamp(32px, 5vw, 72px);
  overflow: hidden;
  background: var(--bs-black);
}

@media (min-width: 940px) {
  .auth__aside {
    display: flex;
    align-items: flex-end;
  }
}

.auth__asideImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: grayscale(0.4);
}

/* The photograph has bright areas — white vans in sunlight — and the value
   statement sits on top of them. Opacity alone left the text at roughly 3:1
   over the brightest region; this scrim is what makes it legible rather than
   merely visible. Strongest at the bottom, where the text is. */
.auth__aside::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0.35) 0%,
    rgba(5, 5, 5, 0.72) 55%,
    rgba(5, 5, 5, 0.92) 100%
  );
}

.auth__asideBody {
  position: relative;
  z-index: 1;
  max-width: 40ch;
}

.auth__asideTitle {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--bs-white);
}

.auth__asideList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  list-style: none;
}

.auth__asideList li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bs-silver);
}

.auth__asideList svg {
  flex: none;
  margin-top: 2px;
  color: var(--bs-lime);
}

/* ---- Dashboard ---- */
.dash__hello {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.dash__company {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bs-white);
}

.dash__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bs-gray);
}

.dash__grid {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
  .dash__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }
}

.searchcard {
  padding: 16px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.searchcard__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.searchcard__tab {
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart);
}

.searchcard__tab[aria-pressed="true"] {
  color: var(--bs-black);
  background: var(--bs-lime);
}

.searchcard__field {
  display: flex;
  gap: 8px;
}

.searchcard__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--bs-white);
  background: var(--bs-steel-2);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.qres {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 12px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
}

.qres__row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
}

@media (min-width: 760px) {
  .qres__row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }
}

.dash__hint,
.dash__noresult p {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--bs-gray);
}

.dash__more {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bs-lime);
}

.dash__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- Catalogue ---- */
.catalog {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1100px) {
  .catalog {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

.catalog__facets {
  display: none;
}

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

@media (min-width: 1100px) {
  .catalog__facets {
    display: block;
    position: sticky;
    top: calc(var(--pbar-h) + 16px);
    max-height: calc(100vh - var(--pbar-h) - 32px);
    overflow-y: auto;
  }

  #facet-toggle {
    display: none;
  }
}

.catalog__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.catalog__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bs-gray);
}

.catalog__views {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.catalog__view {
  min-height: 32px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
  border-radius: var(--radius-sm);
}

.catalog__view[aria-pressed="true"] {
  color: var(--bs-black);
  background: var(--bs-lime);
}

.catalog__vehicle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--bs-silver);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-left: 2px solid var(--bs-lime);
  border-radius: var(--radius);
}

.catalog__clear {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
}

/* ---- Article ---- */
.art__head {
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bs-line);
}

.art__crumbs {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.art__crumbs a {
  color: var(--bs-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.art__num {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bs-lime);
}

.art__name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bs-white);
}

.art__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.art__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1000px) {
  .art__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }
}

.art__block {
  padding: 16px;
  margin-bottom: 14px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.art__blockTitle {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
}

.art__block .dtable {
  color: var(--bs-silver);
}

.art__block .dtable th,
.art__block .dtable td {
  border-bottom-color: var(--bs-line);
}

.art__block .dtable--spec th {
  color: var(--bs-gray);
}

.art__block .dtable--spec td {
  color: var(--bs-white);
}

.art__lead {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bs-silver);
}

.art__note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--bs-gray);
}

.art__block .stock-list {
  background: var(--bs-line);
  border-color: var(--bs-line);
}

.art__block .stock-list__row {
  background: var(--bs-carbon);
}

.art__block .stock-list__name {
  color: var(--bs-white);
}

.art__block .stock-list__row.is-in .stock-list__state {
  color: var(--bs-lime);
}

.art__block .stock-list__row.is-low .stock-list__state {
  color: #ffa63a;
}

.art__block .stock-list__row.is-home {
  box-shadow: inset 3px 0 0 var(--bs-lime);
}

.oelist {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  list-style: none;
}

.oelist__item {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bs-carbon);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-sm);
}

.oelist__code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bs-white);
}

.oelist__copy {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.oelist__copy:hover {
  color: var(--bs-lime);
}

.dl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.dl__row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--bs-silver);
  background: var(--bs-carbon);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-sm);
}

.buybox {
  position: sticky;
  top: calc(var(--pbar-h) + 16px);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.buybox__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 14px;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.04) 0 8px, transparent 8px 16px);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
}

.buybox__placeholder {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-faint);
}

.buybox__caption {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.buybox .price {
  align-items: flex-start;
}

.buybox .price__net {
  font-size: 26px;
}

.buybox__vat,
.buybox__hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.buybox__act {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.buybox__act .btn {
  flex: 1;
}

.related-arts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.rart {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--bs-carbon);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease-out-quart);
}

.rart:hover {
  border-color: rgba(204, 249, 12, 0.5);
}

.rart__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bs-lime);
}

.rart__name {
  font-size: 13px;
  line-height: 1.35;
  color: var(--bs-white);
}

.rart__price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bs-gray);
}

/* ---- Quick order ---- */
.qo__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.qo__panel {
  padding: 16px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.qo__area {
  width: 100%;
  min-height: 190px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--bs-white);
  background: var(--bs-steel-2);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  resize: vertical;
}

.qo__drop {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--bs-gray-dim);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.qo__drop:hover,
.qo__drop.is-over {
  background: rgba(204, 249, 12, 0.05);
  border-color: var(--bs-lime);
}

.qo__dropTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-white);
}

.qo__dropNote {
  max-width: 40ch;
  font-size: 12px;
  line-height: 1.55;
  color: var(--bs-gray);
}

.qo__summary {
  padding: 10px 12px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bs-silver);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.qo__summary.is-ok {
  color: #d7f36a;
  border-color: rgba(204, 249, 12, 0.4);
}

.qo__summary.is-warn {
  color: #ffc79a;
  border-color: rgba(255, 95, 31, 0.45);
}

.qo__raw {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  word-break: break-all;
}

.qo__msg {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.qo__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.qo__name {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
}

.qo__fail {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.qo-row.is-off td {
  background: rgba(0, 0, 0, 0.05);
}

.qo-row.is-warn td {
  background: rgba(255, 140, 31, 0.09);
}

/* ---- Cart ---- */
.cart__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1000px) {
  .cart__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  }
}

.cart__lines {
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

/* Same reasoning as .panel__scroll: only scroll horizontally where the table
   genuinely does not fit. */
@media (max-width: 1099px) {
  .cart__lines {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.cart__bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px;
  border-top: 1px solid var(--hairline);
}

.cart__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart__alt {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
}

.cart__alt a {
  color: var(--bs-lime);
}

.sumcard,
.deliv {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.sumcard__title {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sumcard__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink-body);
  font-variant-numeric: tabular-nums;
}

.sumcard__row.is-muted {
  color: var(--ink-muted);
}

.sumcard__row.is-save {
  color: #4f6b00;
  font-weight: 600;
}

.sumcard__row--total {
  padding-top: 12px;
  margin-top: 6px;
  font-size: 16px;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
}

.sumcard__note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-muted);
}

.deliv .field {
  margin-bottom: 10px;
}

.deliv__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ---- Orders ---- */
.orow__num {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
}

.odetail td {
  padding: 0;
  background: rgba(0, 0, 0, 0.04);
}

.odetail__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  padding: 16px;
}

@media (min-width: 900px) {
  .odetail__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.odetail__title {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ometa {
  display: grid;
  gap: 3px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  font-size: 12px;
}

.ometa dt {
  color: var(--ink-muted);
}

.ometa dd {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
  list-style: none;
}

.tline__step {
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}

.tline__step.is-done {
  color: #3d5400;
  background: rgba(204, 249, 12, 0.35);
  border-color: rgba(140, 175, 10, 0.5);
}

.tline__step.is-bad {
  color: #7a1018;
  background: rgba(193, 18, 31, 0.12);
  border-color: rgba(193, 18, 31, 0.4);
}

.odetail__act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- Documents ---- */
.docs__out {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-left: 2px solid var(--bs-warn);
  border-radius: var(--radius);
}

.docs__outLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.docs__outValue {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--bs-white);
}

/* ---- Fleet ---- */
.fleet {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.vcard2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.vcard2__head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.vcard2__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bs-white);
  overflow-wrap: anywhere;
}

.vcard2__head .chip {
  color: var(--bs-gray);
  border-color: var(--bs-line);
}

.vcard2__specs {
  display: grid;
  gap: 3px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  font-size: 12px;
}

.vcard2__specs dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-gray);
}

.vcard2__specs dd {
  color: var(--bs-white);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vcard2__note {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bs-silver);
  background: var(--bs-carbon);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.vcard2__act {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--bs-line);
}

.vcard2__log summary {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
  cursor: pointer;
}

.vlog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  list-style: none;
}

.vlog__row {
  display: grid;
  gap: 2px 10px;
  grid-template-columns: auto auto;
  padding: 8px 10px;
  font-size: 12px;
  background: var(--bs-carbon);
  border-radius: var(--radius-sm);
}

.vlog__date,
.vlog__km {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bs-gray);
}

.vlog__text {
  grid-column: 1 / -1;
  color: var(--bs-silver);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fleet__cta {
  margin-top: 14px;
  text-align: center;
}

.fleetform {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fleetform .field:first-child,
.fleetform .field:last-of-type,
.fleetform .field__error {
  grid-column: 1 / -1;
}

/* ---- Account ---- */
.acc {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .acc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.acc__block {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.acc__block--wide {
  grid-column: 1 / -1;
}

.acc__blockTitle {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.acc__subTitle {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.acc__grid {
  display: grid;
  gap: 5px 14px;
  grid-template-columns: auto minmax(0, 1fr);
  font-size: 13px;
}

.acc__grid dt {
  color: var(--ink-muted);
}

.acc__grid dd {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.acc__note,
.acc__lead {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.acc__lead {
  font-size: 13px;
}

.acc__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.acc__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc__dataActs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   13. MOTION
   Deliberately little. A tool that animates at you is a tool people stop
   using. What is left: rows arriving on first render, skeleton shimmer, and
   feedback on an action the user took.
   -------------------------------------------------------------------------- */
@keyframes skel {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.row-in {
  animation: row-in 380ms var(--ease-out-quart) both;
  animation-delay: var(--row-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .row-in,
  .modal,
  .toast {
    animation: none !important;
  }

  .skel__bar,
  .skel-card {
    animation: none !important;
    background-position: 0 0;
  }

  .prail,
  .portal__main,
  .pbar__menu {
    transition: none !important;
  }
}