/* Osnovna paleta je usaglasena sa CRM-om (dashboard/css/base.css), da dva
   proizvoda istog sistema ne izgledaju kao dva razlicita programa.
   CRM -> B2B: --blue -> --brand, --background -> --bg, --text -> --ink,
   --line -> --line, --sidebar/-soft se preuzimaju kako jesu.
   Boja firme (tenant_companies.primary_color) prepisuje --brand u toku rada;
   vrednosti ispod su podrazumevane, kada firma nema svoju boju. */
:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-soft: #f9fbfd;
  --ink: #1f2f46;
  --ink-soft: #3d5068;
  --muted: #69788d;
  --muted-soft: #92a0b3;
  --line: #dde6f0;
  --line-strong: #c6d4e4;
  --brand: #1f6feb;
  --brand-dark: #12408f;
  --brand-soft: #e8f1ff;
  --brand-ink: #ffffff;
  --accent: #5aa9ff;
  --warn: #b7791f;
  /* Sidebar uzima boje sa CRM login ekrana (login/style.css: --navy, --navy-deep),
     ne sa CRM dashboarda. To su ujedno vrednosti koje je B2B imao od pocetka. */
  --sidebar: #06205a;
  --sidebar-soft: #13233f;
  --sidebar-glow: rgba(4, 190, 234, 0.14);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 10px 30px rgba(16, 24, 40, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.portal-active {
  height: 100vh;
  overflow: hidden;
}

body.portal-active #app {
  height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(560px, 680px) minmax(360px, 1fr);
}

.auth-panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 36px;
  overflow: auto;
  min-width: 0;
}

.auth-cover {
  padding: 48px;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(132% 65% at 8% 4%, #0b4dbb 0%, transparent 60%),
    radial-gradient(84% 52% at 96% 96%, #04beea 0%, transparent 55%),
    linear-gradient(158deg, #06205a, #13233f 82%);
  background-size: cover;
  background-position: center;
  color: white;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.auth-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: radial-gradient(#8fd7f5 1px, transparent 1px);
  background-size: 18px 18px;
}

.cover-copy {
  max-width: 660px;
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  flex: 0 0 auto;
}

.brand-mark {
  width: 52px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    radial-gradient(90% 90% at 82% 18%, rgba(4, 190, 234, 0.42), transparent 54%),
    linear-gradient(158deg, var(--brand), var(--brand-dark));
  color: white;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(6, 32, 90, 0.24);
}

.brand-logo-frame {
  width: 64px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  padding: 6px;
  box-shadow: 0 10px 24px rgba(6, 32, 90, 0.18);
}

.brand-logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-title {
  font-size: 17px;
  font-weight: 760;
  line-height: 1.15;
}

/* Kartica „ko je prijavljen" (od v1.0.60): dno bocnog menija i vrh fioke „Jos".
   Zajednicki raspored ovde, boje posebno za tamni meni i svetlu fioku. */
.kartica-ja {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.kartica-ja-krug {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 12.5px;
  font-weight: 760;
}

.kartica-ja.ton-upozorenje .kartica-ja-krug {
  background: #b7791f;
  color: #ffffff;
}

.kartica-ja-tekst {
  min-width: 0;
  display: grid;
  justify-items: start;
}

.kartica-ja-ime,
.kartica-ja-drugi {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kartica-ja-ime {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
}

.kartica-ja-drugi {
  font-size: 12px;
  line-height: 1.25;
}

.kartica-ja-oznaka {
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-ja {
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: white;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebar-ja:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-ja .kartica-ja-drugi {
  color: rgba(255, 255, 255, 0.72);
}

.sidebar-ja .kartica-ja-oznaka {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.sidebar-ja.ton-clan .kartica-ja-oznaka {
  background: rgba(4, 190, 234, 0.22);
  color: #9fe6ff;
}

.sidebar-ja.ton-upozorenje .kartica-ja-oznaka {
  background: rgba(255, 190, 80, 0.22);
  color: #ffd28a;
}

.sidebar-ja + .logout-button {
  margin-top: 8px;
}

.store-context {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
}

.store-context span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.platform-login-note {
  display: grid;
  gap: 5px;
  margin-bottom: 22px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
}

.platform-login-note span {
  color: var(--muted);
  line-height: 1.45;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 24px;
}

.tab {
  height: 42px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 650;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tab.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

/* .table-field je polje koje stoji u celiji tabele (klase kupaca, izbor klase
   kod kupca). Bez njega su takva polja do v0.9.83 ostajala gola — onakva
   kakvim ih Windows iscrta, jer stil polja visi na omotacu .field. */
/* Kvacice i radio dugmad su izuzeti namerno: ovo pravilo opisuje polje u koje
   se kuca, pa je kvacici davalo `width: 100%`, visinu od 40 px, ram i padding.
   U obrascu ponude je kvacica kategorije tako izlazila 189 x 40 px i gurala
   naziv u tri reda. Isti efekat je pre ovoga gasen rucno na tri mesta
   (`.check-row input`, `.checkbox-field input`, `.cell-check`), pa se gasi
   jednom, na izvoru. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.table-field,
.class-discount-row input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  background: white;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.table-field:focus,
.class-discount-row input:focus,
.toolbar input:focus,
.qty-input:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.16);
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
}

.check-row input {
  width: 18px;
  height: 18px;
}

.button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 13px;
  background: var(--brand);
  color: var(--brand-ink, white);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(16, 24, 40, 0.12);
}

.button.secondary:hover {
  background: #1f2937;
}

.button.ghost:hover {
  border-color: #b8c1ce;
  background: #f8fafc;
}

.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.icon-only {
  width: 36px;
  min-width: 36px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
}

.button.secondary {
  background: #111827;
  /* uvek belo: pozadina je fiksno tamna i ne zavisi od boje firme */
  color: white;
}

.button.ghost {
  color: var(--ink-soft);
  background: white;
  border: 1px solid var(--line);
}

.wishlist-toggle.active {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: var(--brand);
}

.wishlist-toggle.active .filled-icon {
  fill: currentColor;
  stroke: currentColor;
}

.button.danger {
  background: var(--brand);
}

.button.ghost-danger {
  color: var(--brand-dark);
  background: white;
  border: 1px solid #fecdd3;
}

.is-hidden {
  display: none !important;
}

/* Browser skriva `[hidden]` preko svog podrazumevanog `display: none`, koji gubi
   od bilo kog naseg pravila sa `display`. Zato su pretrage artikala u ponudama i
   u klasama kupaca izgledale kao da ne rade: JS je redovima postavljao
   `hidden = true`, a `.category-checks label { display: flex }` i
   `.class-discount-row { display: grid }` su ih i dalje crtali. */
[hidden] {
  display: none !important;
}

/* Porudzbine: redovi posle prvih 20 (telefon) ili 50 (racunar, od v1.0.151)
   cekaju „Prikazi jos". Atribut postavlja samo vezeFilterePorudzbina(). */
.orders-table tr[data-van-strane] {
  display: none !important;
}

.orders-more {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
}

.message {
  display: none;
  padding: 12px;
  border-radius: 8px;
  background: #eef6f5;
  color: var(--accent);
  border: 1px solid #b7ddda;
}

.message.visible {
  display: block;
}

.message.error {
  background: #fff1f2;
  color: var(--brand-dark);
  border-color: #fecdd3;
}

.app-shell {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: 248px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  /* Isti sloj kao na CRM login ekranu, samo umeren za usku traku:
     tamnoplavi prelaz odozgo nadole i blag cijan odsjaj pri dnu. */
  background:
    radial-gradient(120% 34% at 50% 100%, var(--sidebar-glow) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    linear-gradient(168deg, var(--sidebar), var(--sidebar-soft) 88%);
  color: white;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar .nav {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 12px;
  scrollbar-width: thin;
}

.sidebar .nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar .nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.nav {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.logout-button {
  width: 100%;
  min-height: 44px;
  flex: 0 0 auto;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.logout-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
}

.logout-button span:first-child {
  display: inline-flex;
}

.lucide-icon {
  width: 19px;
  height: 19px;
  display: block;
  flex: 0 0 auto;
}

.filled-icon {
  fill: currentColor;
}

.nav-group {
  display: grid;
  gap: 6px;
}

.nav-heading {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 9px 12px;
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-heading:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.15);
}

.nav-chevron {
  transform: rotate(0deg);
  transition: transform 0.15s ease;
  opacity: 0.72;
}

.nav-group.open .nav-chevron {
  transform: rotate(90deg);
}

.nav-items {
  display: none;
  gap: 4px;
  padding: 2px 0 2px 6px;
}

.nav-group.open .nav-items {
  display: grid;
}

.nav-items button {
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-items button.active,
.nav-items button:hover {
  color: white;
  background: rgba(255, 255, 255, 0.12);
}

.content {
  height: 100vh;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 30px 32px 0;
  overflow: hidden;
}

#view {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0 4px 124px 0;
  scrollbar-gutter: stable;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}

/* Logo kupca u zaglavlju stoji samo tamo gde bocnog menija nema (ispod 900 px).
   Na racunaru bi ponavljao ono sto vec stoji u bocnom meniju. */
.topbar-brand {
  display: none;
}

.topbar-title {
  min-width: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.topbar-icon-button {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.topbar-icon-button:hover {
  transform: translateY(-1px);
  border-color: #aeb8c7;
  background: #f8fafc;
}

.topbar-icon-button .lucide-icon {
  width: 20px;
  height: 20px;
}

.topbar-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.topbar-badge.empty {
  background: #64748b;
}

.profile-menu-wrap {
  position: relative;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 1100;
  width: 250px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu-head {
  display: grid;
  gap: 3px;
  padding: 10px 11px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
}

.profile-menu-head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu button {
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.profile-menu button:hover {
  background: #f1f5f9;
}

.profile-menu .profile-logout {
  margin-top: 5px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  color: var(--brand-dark);
  font-weight: 700;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.muted {
  color: var(--muted);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.panel:hover {
  border-color: var(--line-strong);
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar input,
.toolbar select,
.orders-toolbar input,
.orders-toolbar select,
.orders-toolbar button {
  min-height: 38px;
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.offer-group-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

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

.offer-product-search {
  margin-bottom: 8px;
}

.product-checks label {
  align-items: flex-start;
  line-height: 1.35;
}

.category-checks {
  max-height: 260px;
  overflow: auto;
  display: grid;
  /* `auto-fill`, ne `auto-fit`: sa `auto-fit` se prazne kolone skupljaju, pa su
     se tri kategorije razvlacile preko cele sirine. */
  /* 240 px, ne 210: na sirokom admin ekranu je 210 davalo cetiri kolone od
     225 px, u kojima se „Kancelarija i potrosni materijal" prelamao u dva reda
     dok su susedi ostajali u jednom. Sa 240 staju tri sire kolone. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* `align-content` drzi redove pri vrhu — bez njega grid razvlaci redove da
     popune visinu koju mu da roditelj, pa je red od 18 px teksta bio visok 60.
     `align-items` se namerno NE postavlja na `start`: tako se stavke u istom
     redu izjednace po visini, pa red sa prelomljenim nazivom ne ispada raspao.
     Izmereno 22.09.2026, na produkciji i u probi. */
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

/* Kategorija je red koji se ceo klikce, ne gola kvacica sa tekstom pored.
   Izabrane se vide i kad se ne gleda u kvacicu — u spisku od sedam kategorija
   se inace mora traziti sta je stiklirano. */
.category-checks label {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.3;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.category-checks label:hover {
  border-color: var(--line-strong);
}

/* `:has` je ovde ukras, ne oslonac: gde ga nema, kvacica i dalje kaze sve. */
.category-checks label:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  font-weight: 650;
}

.category-checks input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  accent-color: var(--brand);
}

.class-manual-discounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.class-discount-list {
  max-height: 320px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.class-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}

.class-discount-row span {
  min-width: 0;
}

/* Broj u tabeli (kolona „Kupaca") ide desno, kao svaki drugi broj u portalu. */
.cell-number {
  text-align: right;
  white-space: nowrap;
}

/* Polje sa merom uz njega — procenat kod popusta. Znak stoji u samom polju,
   jer „30" bez njega ne kaze da li je to procenat ili dinar. */
.field-with-suffix {
  position: relative;
}

.field-with-suffix .table-field {
  padding-right: 30px;
}

.field-suffix {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}

.field-with-suffix .table-field:disabled + .field-suffix {
  opacity: 0.4;
}

/* Traka za cuvanje klasa. Pojavljuje se tek kad ima izmena i kaze koliko ih
   je, da se ne cuva red po red. */
.class-save-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: var(--brand-soft);
}

.class-save-count {
  margin-right: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-dark);
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.list-row:last-child {
  border-bottom: 0;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.download-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.download-card img,
.pdf-preview,
.pdf-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--brand);
  font-weight: 900;
  font-size: 28px;
}

.pdf-preview {
  display: block;
  overflow: hidden;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 24px;
  align-items: start;
}

/* ——— Savijeni blokovi na naplati ———
   Popunjeni podaci za isporuku i spisak artikala. Oba su `details`, pa rade i
   kada JS ne stigne dokraja — a upravo ta dva bloka su na telefonu cinila
   najveci deo od 1999 px koliko je korak bio visok do v1.0.16. */
.checkout-fields-fold > summary,
.checkout-lines-fold > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  cursor: pointer;
  list-style: none;
}

.checkout-fields-fold > summary::-webkit-details-marker,
.checkout-lines-fold > summary::-webkit-details-marker {
  display: none;
}

.checkout-fields-fold[open] > summary,
.checkout-lines-fold[open] > summary {
  margin-bottom: 14px;
}

.fold-tekst {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* Sazetak u najvise dva reda: adresa, PIB i telefon u tri reda bi od savijanja
   napravili blok skoro iste visine kao i sam obrazac. Do v1.0.133 jedan red, pa
   se na telefonu sekla vec adresa („… 21000 Novi Sad ·"), a to je podatak koji
   kupac tu proverava (29.09.2026). */
.fold-tekst small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
}

.fold-akcija {
  flex: none;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
}

/* Povratak u korpu. Do v1.0.16 je na koraku 2 jedino dugme bilo „Dalje" —
   koraci u zaglavlju su `span`-ovi, ne dugmad, pa nazad se islo samo sistemskim
   dugmetom pregledaca. */
.checkout-back {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 620px) {
  /* Portal svuda drzi dodirnu metu od 44 px; polja naplate su bila 42, a
     „Izmeni" na koraku 3 svega 20. Mereno 22.09.2026 na produkciji. */
  .checkout-form-panel .field input:not([type="checkbox"]):not([type="radio"]),
  .checkout-form-panel .field select {
    min-height: 44px;
  }

  .confirm-head .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 24px;
  align-items: start;
}

.cart-table th,
.cart-table td {
  vertical-align: middle;
}

.cart-table th:first-child,
.cart-table td:first-child {
  width: 52px;
  text-align: center;
}

.cart-table th:nth-child(2),
.cart-table td:nth-child(2) {
  width: 56%;
}

.cart-table th:nth-child(3),
.cart-table td:nth-child(3),
.cart-table th:nth-child(5),
.cart-table td:nth-child(5) {
  white-space: nowrap;
}

.money-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.cart-table td:nth-child(3),
.cart-table td:nth-child(5) {
  font-size: 14px;
}

.cart-table th:nth-child(3),
.cart-table td:nth-child(3) {
  width: 120px;
}

.cart-table th:nth-child(4),
.cart-table td:nth-child(4) {
  width: 168px;
}

.cart-table th:nth-child(5),
.cart-table td:nth-child(5) {
  width: 130px;
}

.cart-product-cell {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.cart-product-cell.no-image {
  grid-template-columns: minmax(0, 1fr);
}

.cart-product-name {
  display: block;
  max-width: none;
  line-height: 1.35;
  white-space: normal;
}

/* „4 × " ispred cene: objasnjava iznos tamo gde zaglavlja tabele nema, dakle
   samo na telefonu. Na racunaru kolona „Cena" vec kaze sta je broj. */
.cart-qty-prefix {
  display: none;
}

.remove-line {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.remove-line .lucide-icon {
  width: 15px;
  height: 15px;
}

.cart-product-cell img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

/* Dve linije u brojacu su razmaci kroz koje se vidi pozadina, a ne ivice
   celija. Dok su bile `border-right` na dugmetu i na polju, leva se videla a
   desna nije: polje je uz `appearance: textfield` i uvecan ekran (DPR 1.5)
   svoju ivicu iscrtavalo na pola uredjajskog piksela, pa je nestajala. Isti
   simptom je v0.9.70 imao iz drugog razloga (polje sire od svoje kolone), pa
   je ovo drugi popravak istog izgleda — sada nezavisan od zaokruzivanja. */
.quantity-stepper {
  display: inline-grid;
  grid-template-columns: 32px 52px 32px;
  gap: 1px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
  overflow: hidden;
}

.quantity-stepper button,
.quantity-stepper input {
  border: 0;
  min-height: 40px;
  text-align: center;
  background: white;
}

/* Polje mora da stane u svoju kolonu. Do v0.9.70 je `.qty-input` nosio
   `width: 84px` u koloni od 52 px, pa je prelazio preko dugmeta „+", a
   `overflow: hidden` je odsecao njegovu desnu ivicu. */
.quantity-stepper > input[type="number"] {
  width: 100%;
  min-width: 0;
}

.quantity-stepper button {
  cursor: pointer;
  font-weight: 700;
}

/* Dugme na granici je sivo, a ne samo neaktivno: korpa je to oduvek radila, a
   od v1.0.4 isto vazi i u prodavnici i u detalju artikla. Bez ovoga je „−" na
   minimumu izgledao spremno, tiho ne reagovao, pa ga je kupac dodirivao opet. */
.quantity-stepper button:disabled {
  cursor: not-allowed;
  color: var(--muted-soft, #92a0b3);
  background: var(--panel-soft);
}

.line-total,
.summary-total span,
.checkout-order .summary-line span {
  color: var(--brand);
  white-space: nowrap;
}

.cart-table .line-total {
  display: inline-block;
  font-size: 14px;
  line-height: 1.2;
}

.cart-summary,
.checkout-order {
  border-width: 2px;
}

.summary-line,
.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.summary-total {
  border-bottom: 0;
  font-size: 18px;
}

.summary-section {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.summary-options {
  display: grid;
  gap: 8px;
}

.summary-options label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cart-confirm {
  width: 100%;
  margin-top: 18px;
  min-height: 44px;
  text-transform: uppercase;
}

.checkout-lines {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.25;
}

.checkout-lines div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 16px;
  align-items: start;
}

.checkout-lines span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-lines strong {
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
}

.checkout-form-panel,
.checkout-order,
.cart-summary {
  min-width: 0;
}

.checkout-order {
  position: sticky;
  top: 0;
}

.payment-box {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.payment-option {
  padding: 10px 0;
}

.payment-option span {
  display: grid;
  gap: 2px;
}

.payment-option small,
.payment-description,
.payment-warning {
  font-size: 12px;
  line-height: 1.35;
}

.payment-option.disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.shipping-option.disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.shipping-option span {
  display: grid;
  gap: 2px;
}

.shipping-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.payment-warning {
  margin: -2px 0 8px;
  color: #b45309;
}

.settings-rows {
  display: grid;
  gap: 10px;
}

/* Jedna mreza za obe vrste reda dostave. Do v1.0.24 su obicna i besplatna
   dostava imale razlicit broj kolona, pa cena jednog reda nije stajala iznad
   cene drugog — a zaglavlja nije bilo da se to primeti. */
.settings-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 0.9fr) minmax(110px, 0.8fr) minmax(90px, 0.7fr) 38px;
  gap: 10px;
  align-items: center;
}

.settings-rows-head {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Polje koje ova vrsta reda nema. Crtica drzi kolonu, da se susedni redovi
   poklapaju. */
.settings-cell-empty {
  color: var(--muted-soft);
  text-align: center;
}

/* Traka za cuvanje podesavanja. Lepi se za dno dok se forma skroluje, jer
   forma ide nekoliko ekrana u dubinu, a dugme je do v1.0.24 stajalo na samom
   kraju. */
/* Od v1.0.218 traka je uokvirena, sa senkom i stalnim objasnjenjem: samo
   dugme uz ivicu je izgledalo kao da „negde lebdi" (Dejan, 03.10.2026), i
   nije bilo jasno da cuva sve tabove. Kad ima nesacuvanih izmena, okvir je
   zut, a dugme puno plavo. */
.settings-save-bar {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.12);
}

.settings-save-bar.ima-izmena {
  background: #fff8e8;
  border-color: #f2c66d;
}

.settings-save-note {
  margin-right: auto;
  font-size: 13.5px;
  color: var(--muted);
}

.settings-save-note.ima-izmena {
  color: #8a5a00;
  font-weight: 700;
}

.settings-save-bar .button {
  flex: none;
}

/* Na racunaru `bottom` se racuna od donjeg razmaka #view (124 px), a ne od
   statusne trake (61 px), pa je traka lebdela 73 px iznad nje i na laptopu
   pokrivala polja (PIB i maticni broj u Detaljima kupca). 10 + 61 - 124 =
   -53: traka stoji 10 px iznad statusne trake. Mereno 04.10.2026 na
   1280x720 i 1920x1080, Detalji kupca i Podesavanja. (v1.0.226) */
@media (min-width: 901px) {
  .settings-save-bar {
    bottom: -53px;
  }
}

@media (max-width: 900px) {
  /* Pet kolona ne staje na telefon; red se slaze jedan ispod drugog, pa
     zaglavlje nema sta da natkrili i sklanja se. */
  .settings-row {
    grid-template-columns: 1fr 38px;
  }

  .settings-rows-head,
  .settings-cell-empty {
    display: none;
  }

  /* Dno ekrana drzi donja navigacija (58 px + sigurna zona iPhone-a, isto kao
     kod .orders-bulkbar); sa `bottom: 0` bi traka stajala ispod nje. */
  .settings-save-bar {
    bottom: calc(58px + 8px + env(safe-area-inset-bottom, 0px));
  }
}

.shipping-price-fixed {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.payment-setting-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}

.payment-setting-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.switch-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.switch-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

/* Tok porudzbine u Podesavanjima (v1.0.181): prekidac, opis koraka, mejl. */
.settings-tok {
  max-width: 820px;
}

.tok-koraci {
  display: grid;
  gap: 0;
}

.tok-korak {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid #eef1f5;
}

.tok-korak:last-child {
  border-bottom: 0;
}

.tok-korak .switch-line {
  padding-top: 1px;
}

.tok-korak-tekst {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tok-korak-tekst small {
  line-height: 1.4;
}

.tok-korak-mejl {
  font-size: 12px;
  white-space: nowrap;
  padding-top: 2px;
}

.tok-korak.is-off .tok-korak-tekst strong,
.tok-korak.is-off .tok-korak-mejl {
  color: #94a3b8;
}

.tok-mejl-napomena {
  margin: 10px 0 0;
}
.gateway-settings {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  background: white;
}

.gateway-settings summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--ink-soft);
}

.payment-gateway-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 14px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.payment-gateway-state strong,
.payment-gateway-state small {
  display: block;
}

.payment-gateway-state small {
  margin-top: 3px;
  color: var(--muted);
}

.settings-email-layout {
  display: grid;
  gap: 16px;
}

.settings-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.settings-card p {
  margin: 0;
}

.api-connection-card {
  border-style: solid;
}

.api-connection-grid {
  display: grid;
  gap: 12px;
}

.readonly-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.readonly-copy-row input {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.api-connection-actions {
  display: flex;
  justify-content: flex-end;
}

.email-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.email-switch {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.email-switch input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
}

.email-switch strong,
.email-switch small {
  display: block;
}

.email-switch small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.payment-note-card {
  background: #f8fafc;
}

.email-template-help {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.email-template-help code {
  color: var(--ink);
  font-weight: 700;
}

.settings-template-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 0;
}

.email-template-card {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.email-template-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  background: #fbfcfe;
}

.email-template-card summary::-webkit-details-marker {
  display: none;
}

.email-template-card summary::after {
  content: "⌄";
  color: var(--muted);
}

.email-template-card[open] summary::after {
  transform: rotate(180deg);
}

.email-template-card summary::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
}

.email-template-card[open] summary::after {
  content: "-";
  transform: none;
}

.email-template-card summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.email-template-body {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--line);
}

.email-template-actions {
  display: flex;
  justify-content: flex-end;
}

.customer-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}

.customer-detail-tab {
  min-width: 132px;
}

.customer-detail-tab-panel {
  display: grid;
  gap: 14px;
}

.customer-page-panel {
  display: grid;
  gap: 18px;
}

.customer-detail-form {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

/* Traka „Stigle su nove porudzbine" nad spiskom (v1.0.183). */
.orders-nove {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid #bfd3f6;
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  background: #eef4fe;
  font-weight: 700;
}

.orders-nove[hidden] {
  display: none;
}

.orders-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

/* Pretraga uzima sav visak sirine; period i dugmad ostaju svoje velicine. */
.orders-toolbar #order-search {
  flex: 1 1 260px;
  min-width: 200px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 12px;
  background: white;
  color: var(--ink);
  outline: none;
}

.orders-toolbar #admin-new-order {
  margin-left: auto;
}

/* Omotac perioda, izvoza i trebovanja. Na racunaru je `display: contents`, pa
   se njegova deca ponasaju kao da omotaca nema i raspored alatke ostaje
   nepromenjen; telefon ga od v1.0.30 pretvara u red koji se sklapa. */
.orders-extra {
  display: contents;
}

.orders-filter-toggle {
  display: none;
}

/* Od v1.0.34 u celiji statusa stoje oznaka i dugme sledeceg koraka, umesto
   padajuce liste sa svih devet statusa. */
.orders-table .cell-status {
  white-space: nowrap;
}

.orders-table .order-next-step {
  min-height: 28px;
  margin-left: 6px;
  padding: 3px 10px;
  font-size: 12px;
}

/* Red kupca: druga linija u celiji je od v1.0.30 `span` umesto `<br>` + span,
   da bi telefon mogao da je skloni. Na racunaru izgleda isto. */
.customer-row .cell-mesto,
.customer-row .cell-posta,
.customer-row .cell-mb,
.customer-row .cell-ime {
  display: block;
}

/* Klasa kao tekst stoji samo na telefonu, gde je padajuca lista sakrivena —
   i kod saradnika, koji klasu ne bira (od v1.0.35), pa liste ni nema. */
.customer-row .klasa-tekst {
  display: none;
}

.customer-row .cell-klasa.samo-tekst .klasa-tekst {
  display: inline;
}

/* Cip je i filter i brojac: klik filtrira, broj kaze koliko bi ostalo. */
.order-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.order-chip {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink-soft, #3d5068);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.order-chip b {
  font-weight: 800;
  margin-left: 3px;
}

.order-chip:hover {
  border-color: var(--line-strong, #c6d4e4);
}

.order-chip.on {
  background: var(--brand-dark, #12408f);
  border-color: var(--brand-dark, #12408f);
  color: white;
}

/* Masovna traka se pojavljuje tek kad nesto bude oznaceno — do tada bi samo
   zauzimala mesto trakom koja se retko koristi. */
.orders-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft, #f9fbfd);
}

.orders-bulkbar[hidden] {
  display: none;
}

.orders-bulk-info {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--muted);
}

.orders-bulkbar select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  background: white;
  color: var(--ink);
}

.orders-table .order-relative {
  font-size: 12px;
}

.orders-empty-note {
  margin: 14px 0 0;
}

.order-detail-modal {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  overflow-x: hidden;
}

.order-document-meta {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(260px, 0.9fr);
  gap: 18px;
  margin: 12px 0 20px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}

.order-document-meta h3 {
  margin: 0 0 14px;
}

/* Kolona minmax(0, 1fr): bez nje se ravna po sazetku u savijenom stanju, koji
   je jedan red bez prelamanja (332 px), pa je na telefonu sirila list (K3). */
.order-billing-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  font-size: 13px;
  line-height: 1.45;
}

/* Blok naplate je `details`, jer se kupcu na telefonu savija: to su njegovi
   sopstveni podaci, a artikli i zbir su ono zbog cega pregled uopste otvara.
   Adminu i na racunaru dolazi sa `open` u markup-u, pa izgleda kao i pre. */
.order-billing-fold > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  list-style: none;
}

.order-billing-fold > summary::-webkit-details-marker {
  display: none;
}

.order-billing-fold > summary h3 {
  margin: 0;
  flex: none;
}

/* Sazetak stoji umesto bloka dok je savijen — jedan red, bez prelamanja. */
.order-billing-sazetak {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.order-billing-fold[open] > summary .order-billing-sazetak {
  display: none;
}

.order-billing-fold > summary::after {
  content: "Prikaži";
  flex: none;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}

.order-billing-fold[open] > summary::after {
  content: "Sakrij";
}

.order-method-details {
  display: grid;
  align-content: start;
  gap: 10px;
  font-size: 13px;
}

.order-method-details > div {
  display: grid;
  gap: 5px;
}

.order-method-details span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.order-method-details .status {
  width: fit-content;
  color: var(--ink);
  font-size: 12px;
}

/* Odeljak statusa u pregledu (od v1.0.34): traka koraka, radnje, istorija.
   Zamenjuje „Promena statusa" sa padajucom listom i „Sacuvaj status". */
.order-status-panel {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.order-steps {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-steps li {
  position: relative;
  display: grid;
  flex: 1 1 0;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

/* Linija izmedju tacaka: od sredine prethodne do sredine ove. */
.order-steps li + li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
}

.order-steps li.done::before,
.order-steps li.current::before {
  background: var(--brand);
}

.order-step-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
}

.order-steps li.done .order-step-dot {
  border-color: var(--brand);
  background: var(--brand);
}

.order-steps li.current .order-step-dot {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.order-step-name {
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.order-steps li.done .order-step-name,
.order-steps li.current .order-step-name {
  color: var(--ink);
}

.order-steps li.current .order-step-name {
  font-weight: 750;
}

.order-step-date {
  min-height: 15px;
  color: var(--muted);
  font-size: 11px;
}

/* Adminu uz tekuci korak: kupceva rec za isti status (v2.0.80). */
.order-step-kupac {
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  line-height: 1.25;
}

.order-exit {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-left: 3px solid #e11d48;
  border-radius: 6px;
  background: #fff1f2;
}

.order-exit span {
  color: var(--ink-soft);
}

.order-status-actions,
.order-reason-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Otkazivanje i odbijanje su crveni samo ovde. Globalno `.button.danger` je
   plavo (vidi gore), pa ga ovaj odeljak ne nasledjuje. */
.order-status-panel .button.danger {
  background: #be123c;
  color: #fff;
}

.order-status-panel .button.ghost.danger {
  border-color: #fecdd3;
  background: var(--panel);
  color: #be123c;
}

.order-status-closed {
  margin: 0;
}

.order-reason {
  display: grid;
  gap: 8px;
}

.order-reason label {
  font-weight: 700;
}

.order-correction {
  border-top: 1px dashed var(--line-strong);
  padding-top: 10px;
}

.order-correction summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 700;
}

.order-correction-body {
  display: grid;
  gap: 8px;
}

.order-correction-body p {
  margin: 6px 0 0;
  font-size: 13px;
}

.order-correction .button {
  justify-self: start;
}

.order-history h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.order-history ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.order-history li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.order-history-time {
  min-width: 92px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Ispravka se vidi drugom bojom: „neko je popravio gresku", ne „porudzbina se
   vratila korak". */
.order-history li.correction strong {
  color: var(--warn);
}

.order-history-reason {
  flex-basis: 100%;
  padding-left: 102px;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .order-step-name {
    font-size: 11px;
  }

  .order-history-reason {
    padding-left: 0;
  }
}

/* Tri dokumenta iz iste porudzbine, odmah ispod zaglavlja pregleda. */
.order-print-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.order-print-bar .muted {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 2px;
}

.order-print-bar .button {
  gap: 7px;
}

.orders-table .cell-open {
  white-space: nowrap;
}

/* „Poruci ponovo" u redu spiska. Ikona i rec u istom redu: bez ovoga `.button`
   u uskoj koloni prelama rec pod ikonu i red tabele naraste za 18 px. */
.order-repeat-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.order-detail-modal .table-wrap {
  margin-top: 22px;
}

.order-detail-modal table th,
.order-detail-modal table td {
  padding-block: 10px;
  font-size: 13px;
}

.order-detail-modal table td:nth-child(4),
.order-detail-modal table td:nth-child(5),
.order-invoice-summary strong,
.order-invoice-summary span {
  white-space: nowrap;
}

/* Zaglavlje se lepi za vrh modala pri skrolovanju kroz stavke. Do v0.9.83 je
   stajalo na „top: 0" unutar paddinga od 22px, pa je kroz tu traku iznad njega
   prolazio sadrzaj — na skrolu je red tabele (ŠIFRA / PROIZVOD) nalegao preko
   naslova „Porudžbina #NN". Negativna margina povlaci zaglavlje u padding, da
   pokrije celu sirinu do ivice modala. */
.order-detail-modal .modal-head {
  position: sticky;
  top: -22px;
  z-index: 3;
  margin: -22px -22px 14px;
  padding: 22px 22px 14px;
  background: white;
}

.checkout-notice {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #f4c7cb;
  border-radius: 7px;
  background: #fff5f6;
  color: #8a1420;
  line-height: 1.5;
}

.price-class-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.price-class-box p {
  margin: 5px 0 0;
}

.class-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.danger-zone {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  background: #fff7f8;
}

.danger-zone p {
  margin: 4px 0 0;
}

.danger-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.row-actions.no-wrap {
  flex-wrap: nowrap;
}

.shop-table .row-actions,
.wishlist-table .row-actions {
  flex-wrap: nowrap;
  align-items: center;
  min-width: 96px;
}

.shop-table .icon-only,
.wishlist-table .icon-only {
  flex: 0 0 auto;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.link-button:hover {
  color: var(--brand);
}

.import-map {
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.import-map-head {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.import-map-head h3 {
  margin: 0;
}

.import-map-head p {
  margin: 5px 0 0;
}

/* Preskoceni redovi uvoza i dugme sablona (v1.0.196). `.panel` lomi reci bilo
   gde, pa je na telefonu bilo „Preu-zmi šabl-on" i „ŠIF-RA" u zaglavlju. */
#import-template {
  flex: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

.import-preskoceni th,
.import-preskoceni td {
  overflow-wrap: normal;
  word-break: normal;
}

.import-preskoceni th,
.import-preskoceni td:first-child {
  white-space: nowrap;
}

/* Naziv kolone i izbor stoje jedan uz drugi (v1.0.197). Do tada je prva kolona
   bila 1fr, pa je na sirokom ekranu izbor odlazio na suprotni kraj reda. */
.import-map-row {
  display: grid;
  grid-template-columns: minmax(220px, 380px) minmax(260px, 360px);
  justify-content: start;
  gap: 18px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.import-map-row:last-child {
  border-bottom: 0;
}

.import-map-row span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

/* Izbor polja izgleda kao svaki drugi izbor u portalu (v1.0.198); do tada je
   bio golo polje pregledaca, jedino takvo u aplikaciji. */
.import-map-row select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 12px;
  background: white;
  color: var(--ink);
  outline: none;
}

.import-map-row select:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.16);
}

/* Kolona koja se ne uvozi je utisana, da se na prvi pogled vidi sta ulazi. */
.import-map-row.ne-uvozi strong,
.import-map-row.ne-uvozi select {
  color: var(--muted);
}

.import-map-row.ne-uvozi select {
  background: #f8fafc;
}

/* Slike po sifri (v1.0.201). */
.slike-po-sifri-zona {
  margin: 4px 0 12px;
}

.sps-izbor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 8px;
}

.sps-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px;
}

.sps-slika {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: white;
}

.sps-slika img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f8fafc;
}

.sps-slika figcaption {
  padding: 7px 8px 8px;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.sps-slika figcaption b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sps-slika figcaption span {
  display: block;
  color: var(--muted);
}

.sps-slika figcaption .uvoz-ishod {
  display: inline-block;
  margin-top: 4px;
}

.sps-slika.bez {
  border-color: #fecaca;
  background: #fef2f2;
}

.sps-slika.bez img {
  opacity: 0.55;
}

.sps-slika.bez figcaption span,
.sps-bez {
  color: #b91c1c;
}

@media (max-width: 720px) {
  .sps-mreza {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* „Pripremite katalog" na Tabli (v1.0.202). */
.priprema-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.priprema-korak {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.priprema-kvacica {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.priprema-korak.gotovo .priprema-kvacica {
  border-color: #16a34a;
  background: #16a34a;
}

.priprema-tekst b {
  display: block;
}

.priprema-tekst small {
  display: block;
  color: var(--muted);
  overflow-wrap: normal;
  word-break: normal;
}

.priprema-korak.gotovo .priprema-tekst b {
  color: var(--muted);
}

/* „Vaša proba" na Tabli (v1.0.216): isti redovi kao „Pripremite katalog",
   uz traku napretka i dno sa „Želim da nastavim". */
.vodic-probe-veze {
  display: flex;
  gap: 14px;
  flex: none;
}

/* Dolazak sa linka iz mejla (v1.0.217): kartica se kratko istakne, da bude
   jasno odakle se počinje. */
.vodic-probe.istaknuta {
  box-shadow: 0 0 0 3px #f08a24, 0 10px 30px rgba(240, 138, 36, 0.25);
  transition: box-shadow 0.4s ease;
}

.vodic-probe-traka {
  height: 6px;
  margin: 8px 0 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.vodic-probe-traka i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #16a34a;
}

.vodic-probe-dno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .vodic-probe-dno {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Brzi unos tabelom (v1.0.202). */
.stock-modes.uvoz-izvor {
  grid-template-columns: repeat(2, minmax(0, 240px));
}

.uvoz-tabela-uputstvo {
  margin: 0;
}

.uvoz-tabela {
  min-width: 760px;
  border-collapse: collapse;
}

.uvoz-tabela th,
.uvoz-tabela td {
  padding: 0;
  border: 1px solid var(--line);
  overflow-wrap: normal;
  word-break: normal;
}

.uvoz-tabela th {
  padding: 6px 8px;
  background: #f8fafc;
  font-size: 12px;
  white-space: nowrap;
}

.uvoz-tabela td:first-child,
.uvoz-tabela th:first-child {
  width: 38px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.uvoz-tabela input {
  width: 100%;
  min-height: 34px;
  border: 0;
  padding: 0 8px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.uvoz-tabela input:focus {
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px #93c5fd;
}

.uvoz-tabela-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Uvoz artikala: namena, proba, ishod, raniji uvozi (v1.0.200). */
.stock-modes.uvoz-namena {
  grid-template-columns: repeat(3, minmax(0, 240px));
}

.uvoz-brojevi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.uvoz-broj {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
}

.uvoz-broj span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.uvoz-broj b {
  font-size: 22px;
}

.uvoz-broj.novi b { color: #15803d; }
.uvoz-broj.izmena b { color: #1d4ed8; }
.uvoz-broj.isto b { color: var(--muted); }
.uvoz-broj.ne b { color: #b91c1c; }

.uvoz-kategorije {
  margin: 0 14px 14px;
  border: 1px solid #f3d9a4;
  border-radius: 9px;
  background: #fffbeb;
  padding: 10px 12px;
}

.uvoz-kategorije h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.uvoz-kategorija {
  display: grid;
  grid-template-columns: minmax(200px, 380px) minmax(220px, 320px);
  justify-content: start;
  gap: 18px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #f3e3bf;
}

.uvoz-kategorija small {
  display: block;
  color: #92400e;
}

.uvoz-kategorija select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 12px;
  background: white;
  color: var(--ink);
}

.uvoz-filteri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 10px;
}

.uvoz-redovi td,
.uvoz-istorija td {
  overflow-wrap: normal;
  word-break: normal;
}

.uvoz-redovi td:first-child,
.uvoz-redovi th,
.uvoz-istorija th {
  white-space: nowrap;
}

.uvoz-promena {
  display: block;
}

.uvoz-promena s {
  color: #b91c1c;
}

.uvoz-promena ins {
  color: #15803d;
  font-weight: 650;
  text-decoration: none;
}

.uvoz-ishod {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  background: #f1f5f9;
  color: var(--muted);
}

.uvoz-ishod.novi { background: #dcfce7; color: #15803d; }
.uvoz-ishod.izmena { background: #dbeafe; color: #1d4ed8; }
.uvoz-ishod.ne { background: #fee2e2; color: #b91c1c; }

.uvoz-dugmad {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
}

.uvoz-ishod-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.uvoz-ishod-glava .uvoz-dugmad {
  padding: 0;
}

.uvoz-napomena {
  padding: 0 14px;
}

@media (max-width: 720px) {
  .stock-modes.uvoz-namena,
  .stock-modes.uvoz-izvor,
  .uvoz-kategorija {
    grid-template-columns: 1fr;
  }

  .uvoz-brojevi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Redovi probe kao kartice: pet kolona na 375 px je secalo „Šta". */
  .uvoz-redovi thead {
    display: none;
  }

  .uvoz-redovi,
  .uvoz-redovi tbody {
    display: block;
    width: 100%;
  }

  .uvoz-redovi tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "red naziv ishod"
      "red sifra ishod"
      "sta sta sta";
    gap: 2px 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }

  .uvoz-redovi td {
    padding: 0;
    border: 0;
  }

  .uvoz-redovi td:nth-child(1) { grid-area: red; color: var(--muted); font-size: 12px; }
  .uvoz-redovi td:nth-child(2) { grid-area: sifra; color: var(--muted); font-size: 12px; }
  .uvoz-redovi td:nth-child(3) { grid-area: naziv; font-weight: 650; }
  .uvoz-redovi td:nth-child(4) { grid-area: ishod; }
  .uvoz-redovi td:nth-child(5) { grid-area: sta; margin-top: 4px; }
  .uvoz-redovi td[colspan] { grid-column: 1 / -1; }

  .uvoz-istorija thead {
    display: none;
  }

  .uvoz-istorija,
  .uvoz-istorija tbody {
    display: block;
    width: 100%;
  }

  .uvoz-istorija tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kada"
      "fajl"
      "ko"
      "ishod"
      "akcija";
    gap: 2px 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }

  .uvoz-istorija td {
    padding: 0;
    border: 0;
  }

  .uvoz-istorija td:nth-child(1) { grid-area: kada; font-weight: 650; }
  .uvoz-istorija td:nth-child(2) { grid-area: fajl; }
  .uvoz-istorija td:nth-child(3) { grid-area: ko; color: var(--muted); font-size: 13px; }
  .uvoz-istorija td:nth-child(4) { grid-area: ishod; color: var(--muted); font-size: 13px; }
  .uvoz-istorija td:nth-child(5) { grid-area: akcija; margin-top: 4px; }
  .uvoz-istorija td:nth-child(5) .uvoz-ishod { white-space: normal; }
}

.toolbar input {
  max-width: 360px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 11px;
  outline: none;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

/* Zaglavlje spiska artikala ostaje na vrhu dok se skroluje.
   Skrol kontejner ovde nije prozor nego `#view` (.content je `overflow: hidden`).
   Zamka: `overflow-x: auto` na omotacu pravi sopstveni skrolport, a posto se taj
   omotac po visini ne skroluje, `sticky` u njemu nema za sta da se uhvati i
   zaglavlje odlazi sa tabelom. Zato ovaj omotac ne prelama vodoravno — tabela je
   po sirini preneta na `#view`. */
.table-wrap.lepljivo-zaglavlje {
  overflow-x: visible;
}

.table-wrap.lepljivo-zaglavlje thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--line);
}

/* Ispod 900 px `#view` prelazi na „overflow: visible" i skroluje se ceo prozor,
   pa lepljenje ionako ne bi radilo kroz omotac. Vazniji je vodoravni skrol:
   izmereno na 390 px, tabela je siroka 420 px i bez njega se sece, a sa njom i
   poslednja kolona sa dugmadima „Uredi" i „Obriši". */
@media (max-width: 900px) {
  .table-wrap.lepljivo-zaglavlje {
    overflow-x: auto;
  }

  .table-wrap.lepljivo-zaglavlje thead th {
    position: static;
    box-shadow: none;
  }
}

/* Izmereno stanje zalihe. Namerno drugaciji oblik od `.stock-badge`, kojim se
   ispisuje politika artikla kome se zaliha ne vodi — u istoj koloni stoje dve
   vrste podatka i moraju da se razlikuju na prvi pogled. */
.stock-count {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

/* Traka sa stranicama ispod spiska. */
.strane {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.strane-dugmad {
  display: flex;
  align-items: center;
  gap: 10px;
}

.strane-broj {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.strane-dugmad .button[disabled] {
  opacity: 0.45;
  cursor: default;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 760;
  letter-spacing: 0.02em;
  background: var(--panel);
}

tbody tr {
  transition: background 0.15s ease;
}

tbody tr:hover {
  background: #fbfcff;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 750;
}

.status.pending {
  background: #fff7ed;
  color: var(--warn);
}

.status.approved {
  background: #ecfdf5;
  color: #047857;
}

.status.rejected {
  background: #fff1f2;
  color: var(--brand-dark);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.metric strong {
  display: block;
  font-size: 26px;
  margin-top: 8px;
  line-height: 1.15;
  font-weight: 780;
}

.metric small {
  color: var(--muted);
  font-size: 12px;
}

/* Brojka koja vodi na svoj ekran. „Ceka odobrenje 3" bez klika je obavestenje;
   sa klikom je pocetak posla. */
.cards.admin-cards .metric {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cards.admin-cards .metric > span {
  color: var(--muted);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cards.admin-cards .metric:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.cards.admin-cards .metric-live {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.cards.admin-cards .metric-live strong {
  color: var(--brand-dark);
}

/* ——— „Trazi tvoju paznju" ——— */
.attention-panel {
  padding-block: 14px;
}

.attention-title {
  margin: 0 0 4px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.attention-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.attention-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.attention-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

.attention-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--muted-soft);
}

.attention-row.posao .attention-dot {
  background: var(--brand);
}

.attention-row.ceka .attention-dot {
  background: var(--warn);
}

.attention-row.uredu .attention-dot {
  background: #1f8a4c;
}

.attention-row.uredu .attention-text {
  color: var(--muted);
}

.attention-ok {
  font-size: 12.5px;
}

@media (max-width: 620px) {
  .attention-row {
    flex-wrap: wrap;
  }

  .attention-row .button {
    width: 100%;
    min-height: 44px;
  }

  .cards.admin-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cards.admin-cards .metric {
    padding: 13px;
  }

  .cards.admin-cards .metric strong {
    font-size: 20px;
  }
}

.page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.section-head {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-head h2,
.company-card h3,
.subsection h3 {
  margin: 0 0 5px;
}

.company-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
}

.company-card {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.status-badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  padding: 3px 8px;
}

.status-badge.active { background: #dcfce7; color: #166534; }
.status-badge.inactive { background: #fee2e2; color: #991b1b; }
.status-badge.trial { background: #fef3c7; color: #92400e; }

/* Proba firme (v1.0.87): oznaka ispod naslova strane kod tima firme. */
.trial-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-top: 4px;
  padding: 3px 10px;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.trial-pill.trial-pill-hitno {
  border-color: #ef4444;
  background: #fee2e2;
  color: #991b1b;
}

.super-company-state {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
}

.super-company-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.super-company-state textarea {
  width: 100%;
  min-height: 64px;
}

/* „Traži pažnju" iznad spiska firmi (v1.0.94). */
.super-attention h2 {
  margin: 0 0 10px;
}

.super-attention-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.super-attention-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.super-attention-list li:last-child {
  border-bottom: 0;
}

.super-attention-list .link-button {
  font-weight: 700;
}

.company-facts {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.company-facts div { min-width: 0; }
.company-facts dt { color: var(--muted); font-size: 12px; }
.company-facts dd { font-weight: 600; margin: 3px 0 0; overflow-wrap: anywhere; }

.icon-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #111827;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.icon-button:hover { background: #f3f4f6; border-color: #9ca3af; }
.icon-button .lucide-icon,
.icon-only .lucide-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.button:disabled { cursor: not-allowed; opacity: .45; }

.super-company-modal { max-width: 860px; }
.compact-modal { max-width: 520px; }
.subsection { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.narrow-panel { max-width: 760px; }

#platform-settings-form {
  display: grid;
  gap: 14px;
}

/* Sest plocica u ravnim redovima: 6, ispod 1.500 px 3, na telefonu 2. Do
   v1.0.152 mreza od 7 (prazna kolona), u v1.0.153–155 auto-fit, koji je na
   1.366 px dao 5 + 1. */
.platform-analytics-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1500px) {
  .platform-analytics-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .company-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}

@media (max-width: 720px) {
  .company-grid { grid-template-columns: 1fr; }
  .section-head { align-items: stretch; flex-direction: column; }
  .company-facts { grid-template-columns: 1fr; }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.dashboard-tile {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-tile:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.tile-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  background: #f9fafb;
  color: var(--brand);
  line-height: 1;
}

.tile-icon .lucide-icon {
  width: 21px;
  height: 21px;
}

.customer-dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: stretch;
}

.customer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.customer-dashboard-grid .dashboard-tile {
  min-height: 92px;
  padding: 14px;
}

.tile-kratko {
  display: none;
}

/* Brze radnje u jednom redu. Na telefonu su tri adminove plocice stajale jedna
   ispod druge, svaka ~84 px za jedan red teksta — trecina ekrana, a „Kupci koji
   cute" ispod prvog kadra. Nacrt: docs/b2b-admin-telefon-pre-posle.html, odeljak 3. */
@media (max-width: 620px) {
  .admin-dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-dashboard-grid .dashboard-tile {
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    text-align: center;
  }

  .admin-dashboard-grid .tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .admin-dashboard-grid .tile-icon .lucide-icon {
    width: 18px;
    height: 18px;
  }

  .admin-dashboard-grid .dashboard-tile strong {
    font-size: 12.5px;
    line-height: 1.2;
  }

  .admin-dashboard-grid .tile-puno {
    display: none;
  }

  .admin-dashboard-grid .tile-kratko {
    display: inline;
  }
}

.dashboard-store {
  margin-top: 18px;
}

.empty-state {
  max-width: 720px;
}

.empty-state h2,
.panel h2 {
  margin-top: 0;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.54);
}

.modal {
  width: min(720px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.product-modal {
  width: min(1080px, 100%);
}

/* Lepljivo zaglavlje prozora artikla je od v1.0.106 zajednicko: .modal-head.lepljivo
   (odeljak „Lepljiva zaglavlja obrazaca" na kraju fajla). */

.product-detail-modal {
  width: min(1120px, 100%);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-head h2 {
  margin: 0;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  cursor: pointer;
}

/* Razmazana kopija slike ispod ostre. Postoji u HTML-u svih pogleda, a vidi se
   samo u izlogu na telefonu — vidi productImage() u js/catalog-modules/products.js. */
.product-thumb-bg {
  display: none;
}

.product-thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  float: left;
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

.compact-thumb {
  float: none;
  display: block;
  margin: 0;
}

/* Ponude/akcije drze sliku i naziv u ISTOJ celiji, za razliku od prodavnice
   koja ih ima u dve kolone. Blokovska slicica je zato gurala naziv u novi red
   iako je celija siroka preko 500px. */
.offer-group-panel tbody td {
  vertical-align: middle;
}

.offer-group-panel tbody td .compact-thumb {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.shop-table td,
.shop-table th {
  vertical-align: middle;
}

.shop-table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}

.shop-table th,
.shop-table td {
  padding-inline: 9px;
}

/* Sirine prate redosled kolona: Slika, Naziv, Kategorija, Zaliha, Cena,
   Kolicina, akcija. Ako se kolona doda ili ukloni, OVDE se mora prebrojati —
   tabela je table-layout: fixed, pa pogresan redosled stisne naziv artikla. */
.shop-table th:nth-child(1),
.shop-table td:nth-child(1) {
  width: 64px;
}

.shop-table th:nth-child(2),
.shop-table td:nth-child(2) {
  width: auto;
  min-width: 220px;
  word-break: normal;
  overflow-wrap: break-word;
}

.shop-table th:nth-child(3),
.shop-table td:nth-child(3) {
  width: 132px;
}

.shop-table th:nth-child(4),
.shop-table td:nth-child(4) {
  width: 104px;
}

.shop-table th:nth-child(5),
.shop-table td:nth-child(5) {
  width: 150px;
}

.shop-table th:nth-child(6),
.shop-table td:nth-child(6) {
  width: 104px;
}

.shop-table th:nth-child(7),
.shop-table td:nth-child(7) {
  width: 92px;
}

.shop-table .product-title-link {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.28;
}

.shop-table .product-thumb {
  width: 46px;
  height: 46px;
}

.shop-table .qty-input {
  width: 62px;
  padding-inline: 7px;
}

.wishlist-table td,
.wishlist-table th {
  vertical-align: middle;
}

.wishlist-table .product-thumb {
  width: 58px;
  height: 58px;
}

.qty-input {
  width: 84px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  outline: none;
}

.image-preview-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.image-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-preview-grid img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 28px;
  align-items: start;
}

.product-detail-main-image {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.product-detail-image-frame {
  position: relative;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 46px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.gallery-prev {
  left: 10px;
}

.gallery-next {
  right: 10px;
}

.gallery-thumb {
  width: 74px;
  height: 74px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  cursor: pointer;
}

.gallery-thumb.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(201, 31, 47, 0.12);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail-price {
  margin: 0 0 18px;
  color: var(--brand);
  font-size: 24px;
  font-weight: 800;
}

.product-description {
  margin: 18px 0;
  color: var(--muted);
  line-height: 1.55;
}

.product-description p {
  margin: 0 0 10px;
}

.product-detail-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfd;
}

.pending-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.pending-screen .panel {
  max-width: 560px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.analytics-grid .panel:first-child,
.analytics-wide {
  grid-column: 1 / -1;
}

/* Omotac ostalih filtera. Na racunaru `display: contents`, pa mreza filtera
   izgleda kao da omotaca nema; telefon ga od v1.0.30 sklapa pod dugme. */
.analytics-extra {
  display: contents;
}

.analytics-filter-toggle {
  display: none;
}

/* Brojac postavljenih filtera na dugmetu „Filteri". Stoji i na racunaru u
   markupu, ali se tamo ne vidi jer se ne vidi ni samo dugme. */
.analytics-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

/* Red u „Najboljim kupcima" suzava analitiku na tog kupca (od v1.0.43). */
.an-klik {
  cursor: pointer;
}

.an-klik:hover td,
.an-klik:focus-visible td {
  background: var(--brand-soft);
}

.an-klik:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* Traka iznad kartica kad je analitika suzena na jednog kupca: bez nje bi
   brojke izgledale kao promet cele firme. */
.an-kupac-traka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--brand-soft);
}

.an-kupac-traka .button {
  min-height: 44px;
}

.analytics-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

/* Gotovi opsezi. Do v1.0.25 su ovde stajala dva filtera koja znace isto —
   lista „Period" i dva polja za datum — a tiho je pobedjivao datum. */
.analytics-ranges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.range-chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: white;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.range-chip:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.range-chip.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
}

.analytics-dates {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.analytics-dates label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.analytics-dates input {
  width: auto;
  min-width: 160px;
}

/* Polja za datum crta pregledac i format uzima iz svog jezika: na engleskom
   Chrome-u to je „mm/dd/yyyy" i `lang` na polju tu ne pomaze (mereno). Zato
   izabrani opseg stoji jos jednom, srpski, u svom redu ispod filtera. */
.analytics-date-echo {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.analytics-filters label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analytics-filters select,
.analytics-filters input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
}

.analytics-filter-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.analytics-filter-actions .button {
  min-height: 40px;
}

.toolbar select,
.danger-actions select,
.analytics-filters select {
  appearance: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 0 12px;
  background-color: #fff;
  color: var(--ink);
  font: inherit;
}

.import-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.import-actions .button {
  min-width: 150px;
}

/* Promet po danima kao linija. Spisak vodoravnih traka je za 30 dana bio 30
   redova, za godinu dana 365, i ni u jednom slucaju se nije video oblik — a
   dani bez prometa se uopste nisu pojavljivali. */
/* Uniformno skaliranje drzi odnos 720:150, pa visina prati sirinu. Donja
   granica je tu da grafikon u uskoj koloni ne spadne na dva-tri piksela. */
.revenue-chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 110px;
  overflow: visible;
}

.revenue-area {
  fill: var(--brand-soft);
}

.revenue-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.revenue-axis {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.revenue-dots circle {
  fill: var(--brand);
  stroke: white;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Datumi po x osi (v1.0.96): svaki stoji tacno ispod svoje crtice, u
   procentima sirine. Prvi je poravnat levo, poslednji desno, da ne izlete
   van panela. */
.revenue-ticks line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.revenue-scale {
  position: relative;
  height: 16px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.revenue-scale span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.revenue-scale span:first-child {
  transform: none;
}

.revenue-scale span:last-child:not(:first-child) {
  transform: translateX(-100%);
}

.revenue-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Tri brojke koje admin zaista gleda su vece; ostale stoje u redu ispod. */
.cards-glavne {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 12px;
}

.cards-glavne .metric strong {
  font-size: 30px;
}

.cards-sporedne {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.cards-sporedne .metric {
  padding: 12px 14px;
  background: var(--panel-soft);
  box-shadow: none;
}

.cards-sporedne .metric strong {
  font-size: 19px;
  margin-top: 4px;
}

.cards-sporedne .metric small {
  font-size: 11.5px;
}

/* Snaga portala (v1.0.174): sedam pokazatelja, na racunaru cetiri pa tri u redu.
   Stalan broj kolona, ne auto-fit: sa auto-fit je na 1440 px bilo sest u redu
   i sedma sama, a uz bocni meni pet pa dve. */
.cards-snaga {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .cards-snaga {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-snaga .metric:last-child {
    grid-column: 1 / -1;
  }
}

.cards-snaga .metric {
  padding: 12px 14px;
  background: var(--panel-soft);
  box-shadow: none;
  min-width: 0;
}

.cards-snaga .metric strong {
  font-size: 24px;
  margin-top: 4px;
}

.cards-snaga .metric small {
  font-size: 11.5px;
}

/* Kartica koja vodi na spisak u kartici „Portal" (v1.0.194). Dugme, pa mu se
   vracaju izgled i poravnanje kartice. */
.cards-snaga .metric-idi {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cards-snaga .metric-idi:hover,
.cards-snaga .metric-idi:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.cards-snaga .metric-idi small {
  color: var(--brand);
}

.bar-chart {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 140px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.app-version {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 1000;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.app-version.hidden {
  display: none;
}

/* Polje za URL i dugme „Ucitaj sliku" u istom redu; na telefonu dugme pada
   ispod polja, jer 44 px visine i puna sirina polja ne staju jedno uz drugo. */
.logo-upload-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.logo-upload-row input[name="logoUrl"] {
  flex: 1 1 260px;
  min-width: 0;
}
.logo-upload-row button {
  flex: none;
}

.brand-logo-preview {
  display: inline-grid;
  gap: 8px;
  align-items: center;
  justify-items: start;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.brand-logo-preview img {
  width: min(220px, 100%);
  max-height: 86px;
  object-fit: contain;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.price-stack {
  display: grid;
  gap: 4px;
  justify-items: start;
  line-height: 1.15;
}

.price-stack .price-gross,
.price-stack .price-net {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.price-stack .price-gross {
  color: var(--muted);
  font-size: 12px;
}

.price-stack .price-gross del {
  text-decoration-thickness: 2px;
}

/* Tabelarne cifre: u proporcionalnom fontu je „1" uza od ostalih cifara, pa se
   iznosi iste duzine ne poklapaju po sirini i poredjenje na oko vara. */
.price-stack .price-net {
  color: var(--brand-dark);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.product-detail-price .price-net {
  font-size: 24px;
}

.price-discount {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
}

body.customer-portal .content {
  padding-bottom: 0;
}

body.customer-portal #view {
  padding-bottom: 132px;
}

.admin-status-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 248px;
  z-index: 900;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 32px;
  border-top: 3px solid var(--brand);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.admin-status-bar > div:first-child {
  display: grid;
  gap: 2px;
}

.admin-status-bar span {
  color: var(--muted);
  font-size: 11px;
}

.admin-status-bar strong {
  font-size: 14px;
}

body:not(.customer-portal) .content {
  padding-bottom: 0;
}

.customer-cart-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 248px;
  z-index: 900;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  border-top: 3px solid var(--brand);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(10px);
}

.customer-cart-summary {
  display: grid;
  gap: 3px;
  min-width: 210px;
}

.customer-cart-summary > span {
  color: var(--muted);
  font-size: 12px;
}

.customer-cart-summary strong {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
}

.customer-cart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-cart-actions .button {
  min-width: 104px;
}

/* Glavno dugme koraka u traci (v2.0.59, uskladiDugmeKoraka() u js/cart.js).
   „Ispravi" crveno kao na telefonu. Na telefonu ga nema: tamo isti posao radi
   .checkout-mobile-bar, a traka korpe u koracima ne stoji ili je pretesna. */
#footer-korak.ispravi {
  background: #b23b23;
  border-color: #b23b23;
  color: #fff;
}

@media (max-width: 900px) {
  #footer-korak,
  #footer-nastavi-kupovinu {
    display: none !important;
  }
}

.customer-cart-version {
  justify-self: end;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 11px;
  font-weight: 700;
}

.order-invoice-summary {
  width: min(430px, 100%);
  margin: 18px 0 0 auto;
}

.order-invoice-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.order-invoice-summary .summary-total {
  padding-top: 14px;
  border-bottom: 0;
}

@media (max-width: 1200px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    border-right: 0;
  }

  .customer-dashboard-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .order-document-meta {
    grid-template-columns: 1fr 1fr;
  }

  .auth-cover {
    display: none;
  }
}

@media (max-width: 900px) {
  body.portal-active,
  body.portal-active #app {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  /* #app ne sme biti skrol kontejner: visina mu nije ogranicena, pa u njemu
     nista ne skroluje (skroluje prozor), a `position: sticky` se lepi za
     najblizi predak sa `overflow` — dakle za #app — i ostaje prikovan na dnu
     sadrzaja. Do v1.0.105 zato na telefonu nijedan lepljivi element u strani
     nije radio (traka Podesavanja je bila 2.794 px nize). Izmereno 25.09.:
     nijedan ekran ne sire od #app, pa `visible` ne pravi vodoravni skrol. */
  body.portal-active #app {
    overflow: visible;
  }

  .auth-shell,
  .app-shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
  }

  .auth-panel {
    border-right: 0;
  }

  .auth-cover {
    min-height: 280px;
    align-items: center;
  }

  .sidebar {
    position: static;
    height: auto;
    min-height: 0;
  }

  .content {
    height: auto;
    min-height: 100vh;
    display: block;
    overflow: visible;
    padding: 24px 18px 0;
  }

  #view {
    overflow: visible;
    padding-bottom: 132px;
  }

  .customer-cart-bar {
    left: 0;
    grid-template-columns: 1fr auto;
    padding-inline: 18px;
  }

  .admin-status-bar {
    left: 0;
  }

  .customer-cart-version {
    display: none;
  }

  .cards,
  .form-grid,
  .offer-target-grid,
  .class-manual-discounts {
    grid-template-columns: 1fr;
  }

  .danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .import-map-row {
    grid-template-columns: 1fr;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .download-grid,
  .cart-layout,
  .checkout-layout,
  .settings-template-grid,
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  /* `1fr` ne pusta kolonu uze od sadrzaja: grafikon prometa u super admin
     analitici je gurao panel na 392 px na ekranu od 390. Dok je #app bio skrol
     kontejner (do v1.0.105), visak se krio kao njegov unutrasnji skrol; sada bi
     se pomerala cela strana. Ostale mreze iz liste iznad nisu merene sire. */
  .analytics-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Filteri analitike sklopljeni. Vide se samo cipovi perioda i dugme
     „Filteri"; status, kupac, kategorija, datumi i dugmad cekaju iza njega.
     Do v1.0.29 je ceo blok bio 428 px na 390x844 — prva brojka je bila oko
     1.000 px od vrha strane, pa se nijedna nije videla bez skrolovanja.

     Nacrt i merenje: docs/b2b-saradnik-telefon-mokap.html */
  .analytics-filter-toggle {
    display: inline-flex;
    flex: none;
    margin-left: auto;
  }

  .analytics-extra {
    display: none;
  }

  .analytics-extra.open {
    display: grid;
    gap: 12px;
    margin-top: 12px;
  }

  .analytics-filters {
    padding: 12px;
  }

  .analytics-ranges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .checkout-order {
    position: static;
  }

  .analytics-grid .panel:first-child {
    grid-column: auto;
  }

  .analytics-filters {
    grid-template-columns: 1fr;
  }

  .bar-row {
    grid-template-columns: 64px 1fr;
  }

  .bar-row strong {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  body.customer-portal .content {
    padding-bottom: 0;
  }

  .customer-cart-bar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 10px;
  }

  .cart-table,
  .cart-table thead,
  .cart-table tbody,
  .cart-table tr,
  .cart-table th,
  .cart-table td {
    display: block;
  }

  .cart-table thead {
    display: none;
  }

  /* — Stavka korpe u dva sprata —
     Do v0.9.98 je stavka bila visoka 277 px (mereno na 390 px), pa su u kadar
     stajale dve: slika 64 px sa nazivom, pa tri sprata ispod nje — „cena po
     komadu", brojac i „ukupno za stavku", svaki sa svojim natpisom. Korpa koja
     se ne vidi cela je korpa koja se ne proverava.

     Dva natpisa su postojala samo zato sto je zaglavlje tabele na telefonu
     sakriveno. Zamenio ih je racun uz iznos („4 × 1.664,00"), koji kaze isto u
     jednom redu — pa stavka staje u 115 px i u kadar ih ide cetiri.

     Usput je ispravljena i tiha greska: red je bio mreza `44px 1fr` u kojoj
     dugme za brisanje uzima `grid-row: span 3`, pa je peta celija — ona sa
     iznosom stavke — automatskim rasporedjivanjem padala u kolonu od 44 px.
     Mereno nad v0.9.98: sirina 52 px, iznos prelomljen u tri reda. Zato sada
     svaka celija ima svoje `grid-area`, a nijedna se ne oslanja na redosled.

     Nacrt i merenje: docs/b2b-korpa-izlog-dodavanje.html */
  .cart-table tr {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "slika naziv x"
      "slika racun iznos"
      "slika kolicina kolicina";
    align-items: center;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .cart-table td {
    width: auto !important;
    padding: 0;
  }

  /* Slika i naziv su u istoj celiji, a treba im razlicito mesto u mrezi, pa
     celija prepusta svoju decu mrezi reda.

     Dva puta `display: contents`, jer su dva omotaca: prvo sama celija
     (`<td>`), pa `div.cart-product-cell` u njoj. Samo na divu nije dovoljno —
     slika i naziv bi tada postali deca celije, a celija nije mreza, pa
     `grid-area` na njima ne bi znacilo nista. */
  .cart-table td:nth-child(2),
  .cart-table .cart-product-cell {
    display: contents;
  }

  /* Tri imena klasa, a ne dva: bazno pravilo `.cart-table .thumb-placeholder`
     (48 px) stoji nize u fajlu, pa bi pregazilo istu specificnost. */
  .cart-table .cart-product-cell img,
  .cart-table .cart-product-cell .thumb-placeholder {
    grid-area: slika;
    align-self: start;
    width: 44px;
    height: 44px;
  }

  .cart-table .cart-product-cell .thumb-placeholder {
    display: grid;
    place-items: center;
    font-size: 8.5px;
    line-height: 1.1;
    text-align: center;
  }

  /* Naziv u najvise dva reda: treci bi vratio stavku na visinu od pre izmene.
     Odsecanje ide preko `max-height`, kao i u prodavnici. */
  .cart-table .cart-product-name {
    grid-area: naziv;
    min-width: 0;
    max-height: 33px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
  }

  .cart-table td:first-child {
    grid-area: x;
    align-self: start;
    justify-self: end;
  }

  .cart-table td:nth-child(3) {
    grid-area: racun;
    justify-self: start;
    font-size: 11.5px;
    color: var(--muted);
  }

  .cart-table td:nth-child(4) {
    grid-area: kolicina;
    justify-self: start;
  }

  .cart-table td:nth-child(5) {
    grid-area: iznos;
    justify-self: end;
  }

  /* Natpisi kolona: na telefonu ih zamenjuje racun uz iznos. */
  .cart-table .cell-tag {
    display: none;
  }

  .cart-table .cart-qty-prefix {
    display: inline;
  }

  .cart-table .money-value {
    font-size: 11.5px;
    font-weight: 600;
  }

  .customer-cart-summary {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
  }

  .customer-cart-actions {
    width: 100%;
  }

  .customer-cart-actions .button {
    flex: 1;
  }

  .customer-dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* minmax(0, 1fr), ne 1fr: kolona sa 1fr ne sme biti uza od najsireg
     sadrzaja, a sazetak naplate je jedan red bez prelamanja — list se do
     v1.0.73 sirio na 346 px u sloju od 323 (K3, prolaz na telefonu). */
  .order-document-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.thank-you {
  max-width: 720px;
  margin: 48px auto;
  padding: 40px;
  text-align: center;
}

.thank-you-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  place-items: center;
  border-radius: 50%;
  background: #e8f7ef;
  color: #18794e;
  font-size: 28px;
  font-weight: 700;
}

.thank-you-summary {
  display: flex;
  justify-content: space-between;
  max-width: 360px;
  margin: 28px auto;
  padding: 18px 0;
  border-block: 1px solid #dfe4ec;
}

.thank-you-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Final QA guards: long product names, empty tables and order modal stability. */
.table-wrap table {
  table-layout: auto;
}

td,
th,
.panel,
.card,
.modal {
  overflow-wrap: anywhere;
}

td strong,
.product-title-link,
.cart-product-name,
.order-detail-modal td:nth-child(2) {
  line-height: 1.35;
  word-break: normal;
}

.money-value,
.line-total,
.summary-line span,
.summary-total span,
td:last-child strong {
  white-space: nowrap;
  overflow-wrap: normal;
}

.empty-state,
.table-empty,
.panel.empty-state {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 6px;
  color: var(--muted);
}

.order-detail-modal {
  width: min(1240px, calc(100vw - 48px));
}

/* Prazna korpa (od v1.0.32): recenica i dugme nazad u prodavnicu. Dugme nosi
   ikonu, pa mu treba flex; siroko je koliko tekst, osim na telefonu. */
.cart-empty h2 {
  color: var(--ink);
}

.cart-empty-actions {
  margin-top: 8px;
}

.cart-empty-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
}

.cart-empty-actions .button svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 620px) {
  /* `.empty-state` je grid koji omotac stiska na sirinu dugmeta, pa sirinu
     mora da dobije i omotac, ne samo dugme. */
  .cart-empty-actions,
  .cart-empty-actions .button {
    width: 100%;
  }
}

.order-detail-modal .order-document-meta {
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
}

body.customer-portal .customer-dashboard-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

body.customer-portal .customer-dashboard-grid .dashboard-tile {
  min-height: 58px;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 8px;
}

body.customer-portal .customer-dashboard-grid .tile-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

body.customer-portal .customer-dashboard-grid .tile-icon .lucide-icon {
  width: 16px;
  height: 16px;
}

body.customer-portal .customer-dashboard-grid .dashboard-tile strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.customer-portal .dashboard-store {
  margin-top: 10px;
}

body.customer-portal .dashboard-store .panel {
  padding: 16px 18px;
}

body.customer-portal .dashboard-store .toolbar {
  margin-bottom: 12px;
}

.shop-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.shop-table th,
.shop-table td {
  overflow-wrap: anywhere;
  word-break: normal;
  padding-inline: 8px;
}

.shop-table th {
  white-space: nowrap;
}

.shop-table th:nth-child(1),
.shop-table td:nth-child(1) {
  width: 60px;
  white-space: normal;
}

.shop-table th:nth-child(2),
.shop-table td:nth-child(2) {
  width: auto;
  min-width: 180px;
}

.shop-table th:nth-child(3),
.shop-table td:nth-child(3) {
  width: 120px;
}

.shop-table th:nth-child(4),
.shop-table td:nth-child(4) {
  width: 96px;
}

.shop-table th:nth-child(5),
.shop-table td:nth-child(5) {
  width: 138px;
}

.shop-table th:nth-child(6),
.shop-table td:nth-child(6) {
  width: 96px;
}

.shop-table th:nth-child(7),
.shop-table td:nth-child(7) {
  width: 84px;
}

.shop-table .row-actions {
  flex-wrap: nowrap;
  min-width: 0;
}

.shop-table .product-title-link {
  overflow-wrap: anywhere;
}

.shop-table .product-thumb {
  width: 44px;
  height: 44px;
}

.shop-table .qty-input {
  width: 58px;
}

@media (max-width: 900px) {
  body.customer-portal .customer-dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.customer-portal .customer-dashboard-grid {
    grid-template-columns: 1fr;
  }

  body.customer-portal .customer-dashboard-grid .dashboard-tile strong {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .free-shipping-row {
    grid-template-columns: 1fr;
  }

  .order-detail-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  /* Modal ovde ima manji padding, pa lepljivo zaglavlje mora da ga prati. */
  .order-detail-modal .modal-head {
    top: -16px;
    margin: -16px -16px 12px;
    padding: 16px 16px 12px;
  }

  .order-detail-modal .order-document-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .money-value,
  .line-total {
    font-size: 14px;
  }
}

/* ——— Kratka poruka (toast) ———
   Koristi se kada portal izmeni ono sto je korisnik uneo — pre svega kolicinu.
   Ranije se izmena izvodila tiho, pa je kupac video broj koji nije ukucao. */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  /* Iznad prozora (.modal-backdrop 1500, v2.0.73): poruka iz prozora porudzbine
     („Upišite razlog…") se do sada crtala ispod zatamnjenja i nije se videla. */
  z-index: 2500;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 10px;
  background: #111827;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
  border-left: 4px solid #64748b;
  display: none;
}

.app-toast.ok {
  border-left-color: #22c55e;
}

.app-toast.warn {
  border-left-color: #f59e0b;
}

@media (max-width: 860px) {
  .app-toast {
    bottom: 110px;
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
  }
}

/* ——— Brojac kataloga i "Ucitaj jos" ——— */
.catalog-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.catalog-more:empty {
  display: none;
}

.catalog-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.catalog-count strong {
  color: var(--ink);
}

/* ——— Izbor boje portala ——— */
.color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.color-preset {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2px solid transparent;
  outline: 1px solid rgba(15, 35, 55, 0.16);
  outline-offset: -1px;
  background: var(--preset);
  cursor: pointer;
  padding: 0;
}

.color-preset.is-active {
  border-color: var(--ink);
}

/* ——— Okvir kada artikal nema fotografiju ———
   Ranije je prodavnica crtala goli "-", a korpa nista, pa su redovi bez slike
   ispadali iz linije sa ostalima. Okvir je iste velicine kao prava slicica. */
.thumb-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  border: 1px dashed var(--line-strong);
  background: var(--panel-soft);
  color: var(--muted-soft);
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.02em;
  flex: none;
}

.shop-table .thumb-placeholder {
  width: 46px;
  height: 46px;
}

.cart-table .thumb-placeholder {
  width: 48px;
  height: 48px;
}

.offer-group-panel tbody td .thumb-placeholder {
  vertical-align: middle;
  margin-right: 10px;
}

/* ——— Brojevi u tabelama ———
   Cene, kolicine i iznosi se citaju poredjenjem, pa idu uz desnu ivicu i
   tabelarnim ciframa: tako se zarezi poklope jedan ispod drugog. */
.num,
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.col-currency {
  font-weight: 700;
}

.col-currency small {
  font-weight: 600;
  color: var(--muted);
}

/* Sifra ispod naziva umesto u svojoj koloni: sifre u ovom katalogu idu do
   14 cifara i lomile su usku kolonu u dva-tri reda, razvlaceci ceo red. */
.row-sku {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* U koloni sa cenom vrednosti idu uz desnu ivicu, i kada su u bloku sa popustom. */
td.num .price-stack {
  align-items: flex-end;
}

th.num small {
  font-weight: 600;
  color: var(--muted);
}

/* Reset lozinke (v0.9.50). „Zaboravili ste lozinku?" stoji ispod dugmeta za
   prijavu, centrirano i sitnije, da ne konkurise glavnoj radnji. */
.form .link-button {
  margin-top: 4px;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
}

.form .link-button:hover {
  color: var(--brand);
}

.customer-password-box {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Korisnici firme u detalju kupca (od v1.0.50). */
.customer-member-form {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.customer-member-form h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.customer-members .pill {
  margin-left: 6px;
  font-size: 11px;
}

/* Na telefonu tabela od cetiri kolone lomi mejl po slovima (izmereno na
   375 px), pa svaki red postaje kartica: ime, ispod mejl i telefon, dugme desno. */
@media (max-width: 620px) {
  .table-wrap .customer-members thead {
    display: none;
  }

  .table-wrap .customer-members tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .table-wrap .customer-members td {
    display: block;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
    grid-column: 1;
  }

  .table-wrap .customer-members td:nth-child(2),
  .table-wrap .customer-members td:nth-child(3) {
    color: var(--muted);
    font-size: 13px;
  }

  .table-wrap .customer-members td:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .table-wrap .customer-members td:empty {
    display: none;
  }
}

/* Objekti kupca u detalju kupca (v1.1.15): na telefonu isto kao korisnici —
   red je kartica, naziv i adresa jedno ispod drugog, „Ukloni" desno. */
@media (max-width: 620px) {
  .table-wrap .customer-addresses thead {
    display: none;
  }

  .table-wrap .customer-addresses tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .table-wrap .customer-addresses td {
    display: block;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
    grid-column: 1;
  }

  .table-wrap .customer-addresses td:nth-child(2) {
    color: var(--muted);
    font-size: 13px;
  }

  .table-wrap .customer-addresses td:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .table-wrap .customer-addresses td:empty {
    display: none;
  }
}

.customer-password-box h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.customer-password-box .muted {
  margin: 0 0 12px;
}

.field-actions {
  display: flex;
  align-items: flex-end;
}

.field-actions .button {
  width: 100%;
}

/* ——— „Zapamti me" na prijavi ———
   Kvacica je namerno NIJE cekirana unapred: do v0.9.51 je sesija trajala 7 dana
   bezuslovno, pa je i onaj ko se prijavi sa tudjeg racunara ostajao prijavljen. */
.remember-option {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
}

.remember-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
  flex: none;
}

/* Napomena o PDV-u ispod tabele sa cenama. */
.price-note {
  margin: 10px 0 0;
  font-size: 12.5px;
}

/* ——— Polje za kolicinu bez strelica browsera ———
   Uz dugmad − i + native strelice su drugi nacin za istu stvar, i jos sitan:
   dva reda po 8px koja se vide tek kad se predje misem. Sklanjaju se. */
.quantity-stepper input[type="number"],
.qty-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity-stepper input[type="number"]::-webkit-outer-spin-button,
.quantity-stepper input[type="number"]::-webkit-inner-spin-button,
.qty-input[type="number"]::-webkit-outer-spin-button,
.qty-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ——— Zalihe ———
   Oznaku i njenu boju bira firma (Podesavanja -> Zalihe), a racuna je server u
   app/services/stock-service.php. Tonovi su namerno prigluseni: u tabeli sa 50
   redova jaka boja u svakom redu pojede paznju koja treba ceni i kolicini. */
.stock-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink-soft);
  white-space: nowrap;
}

.stock-badge + .stock-badge {
  margin-left: 6px;
}

.stock-badge.green {
  background: #e9f6ee;
  border-color: #a8d7bd;
  color: #1a7a43;
}

.stock-badge.amber {
  background: #fdf4e3;
  border-color: #e7cb8d;
  color: #8a5f0f;
}

.stock-badge.red {
  background: #fbedea;
  border-color: #e4b1a4;
  color: #a5391f;
}

/* Vreme poslednjeg osvezavanja stoji ispod oznake i namerno je sitno: bitno je
   kada kupac posumnja u broj, ne dok samo pregleda katalog. */
.stock-synced {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted-soft);
  white-space: nowrap;
}

.stock-detail {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.stock-band-row {
  grid-template-columns: minmax(110px, 0.6fr) minmax(200px, 1.6fr) minmax(110px, 0.6fr) 38px;
}

/* Zalihe sa adrese (v1.0.129): dugme i ishod poslednjeg ucitavanja u istom redu,
   a na uskom ekranu ishod pada ispod dugmeta. */
.stock-feed-schedule {
  margin-top: 10px;
}

.stock-feed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}

.stock-feed-last {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.stock-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.stock-preview .stock-badge + .stock-badge {
  margin-left: 0;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.checkbox-field input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--brand);
}

@media (max-width: 720px) {
  .stock-band-row {
    grid-template-columns: 1fr 1fr;
  }

  .stock-band-row [data-stock-band-text] {
    grid-column: 1 / -1;
  }
}

/* ——— Telefon: donja traka, fioka „Još“ i prodavnica u karticama ———
   Do v0.9.54 se bocni meni ispod 900px samo spustao iznad sadrzaja (.sidebar
   postaje position:static), pa je kupac prvo video navigaciju, a tek onda artikle.
   Prodavnica je pritom ostajala tabela od sedam kolona i vukla se postrance.
   Traka ispod drzi pet odredista, a ostalo ide u fioku; .shop-table se lomi u
   kartice istim postupkom kojim se .cart-table vec lomi. */
.mobile-tabbar,
.mobile-more-backdrop {
  display: none;
}

@media (max-width: 900px) {
  /* Od v1.0.29 traku i sakriven bocni meni dobijaju i admin uloge, pa uslov
     nije vise `customer-portal` nego `portal-active` — svaki prijavljen
     korisnik. Do tada je komercijalista na telefonu imao meni od 467 px iznad
     sadrzaja, a sadrzaj je pocinjao na 553 px od 844. */
  body.portal-active .sidebar {
    display: none;
  }

  /* Kupcu traka nosi korpu sa brojacem, pa mu donja traka sa zbirom ne treba.
     U trebovanju ostaje: komercijalista zbir cita naglas kod kupca, a Korpa mu
     je u traci samo odrediste. */
  body.customer-portal .customer-cart-bar {
    display: none;
  }

  /* Status traka admina („Menadzer prodaje · DPX" + verzija) na telefonu bi
     stajala tacno ispod donje trake i uzela jos 58 px. Uloga i firma se vide u
     profilu, a verzija u fioci „Jos" (`div.mobile-more-version`). */
  .admin-status-bar {
    display: none;
  }

  body.portal-active .content {
    padding-bottom: 0;
  }

  body.portal-active #view {
    padding-bottom: 76px;
  }

  /* U trebovanju stoje obe trake — zbir korpe i navigacija — pa razmak ispod
     sadrzaja mora da pokrije obe. Mereno: traka korpe 103 px + donja traka. */
  body.staff-ordering #view {
    padding-bottom: 180px;
  }

  /* Traka korpe stoji IZNAD donje trake, ne preko nje. Do v1.0.31 su obe bile
     `bottom: 0`, a traka korpe ima z-index 900 naspram 40 — pa je u trebovanju
     na telefonu prekrivala celu donju traku: Izlog, Kupac i Izadji se nisu
     videli, i komercijalista iz trebovanja (ni iz prazne korpe) nije imao
     kuda. 58 px je visina donje trake, mereno na 360 px. */
  body.staff-ordering .customer-cart-bar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 8px;
    min-height: 0;
  }

  /* „Korpa" je vec u donjoj traci, sa brojacem, pa ovde ostaju zbir i
     „Nastavi" u jednom redu — traka pada sa 103 na ~60 px. */
  body.staff-ordering #footer-cart {
    display: none;
  }

  /* Dve radnje trake trebovanja („Promeni kupca", „Odustani") su na telefonu
     u donjoj traci kao „Kupac" i „Izadji", pa ih gornja traka ne ponavlja —
     oslobodjenu sirinu uzimaju ime firme i klasa cena. */
  body.staff-ordering .staff-order-actions {
    display: none;
  }

  /* Ispod 900 px bocnog menija nema, pa je zaglavlje jedino mesto na kom se
     vidi cija je ovo prodavnica — i kupcu i adminu. */
  body.portal-active .topbar-brand {
    display: flex;
    align-items: center;
    flex: none;
  }

  /* Admin uloge (komercijalista, menadzer, admin firme) ime ekrana zadrzavaju,
     jer mnogi njihovi ekrani nemaju svoju stavku u donjoj traci — stoje u
     fioci „Jos". Do v1.0.31 je naslov ostajao u istom redu sa logom i
     ikonama, velicine sa racunara (28 px), pa se na 360 px lomio u dva reda i
     podvlacio pod korpu i avatar. Sada ide u svoj red ispod loga, manjim
     slovima; logo i ikone ostaju zajedno u prvom redu. Kupcu je naslov na
     telefonu sakriven (nize, 620 px), pa ga ovo ne dira. */
  body.portal-active:not(.customer-portal) .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
    margin-bottom: 14px;
  }

  body.portal-active:not(.customer-portal) .topbar-title {
    order: 3;
    flex: 1 0 100%;
  }

  body.portal-active:not(.customer-portal) #page-title {
    font-size: 22px;
    line-height: 1.2;
  }

  .topbar-brand-logo {
    height: 34px;
    max-width: 150px;
    object-fit: contain;
  }

  .topbar-brand-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  body.portal-active .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.06);
  }

  body.portal-active .mobile-tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--muted);
    /* 11,5 px, ne 10 (29.09.2026): najduze oznake („Porudzbine",
       „Prodavnica") i dalje staju u kolonu od ~70 px na 360 px. */
    font-size: 11.5px;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
  }

  body.portal-active .mobile-tabbar button.active {
    color: var(--brand);
    font-weight: 600;
  }

  body.portal-active .mobile-tabbar .lucide-icon {
    width: 21px;
    height: 21px;
  }

  .mobile-tab-icon {
    position: relative;
    display: grid;
    place-items: center;
  }

  .mobile-tab-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--brand);
    border: 1.5px solid var(--panel);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
  }

  .mobile-tab-badge.empty {
    display: none;
  }

  /* „Još" nosi zbir fioke (v2.0.90); boja je najhitnija stavka, kao u meniju. */
  .mobile-tab-badge.upozorenje {
    background: #d9a53a;
    color: #1a1300;
  }

  /* Broj uz stavku fioke stoji desno u redu; krije ga `.nav-broj[hidden]`. */
  .mobile-more-sheet button .nav-broj {
    margin-left: auto;
  }

  body.portal-active .mobile-more-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    background: rgba(6, 32, 90, 0.4);
  }

  .mobile-more-sheet {
    width: 100%;
    background: var(--panel);
    border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.22);
    /* Admin ima 14 stavki (774 px); na ekranu od 516 px gornje su bile iznad
       ivice i nedostupne — profil, Porudzbine, Analitika (v2.0.71). */
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-more-grab {
    width: 38px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: var(--line-strong);
  }

  .mobile-more-sheet button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }

  .mobile-more-sheet button .lucide-icon {
    width: 20px;
    height: 20px;
    color: var(--brand);
    flex: 0 0 auto;
  }

  .mobile-more-logout {
    color: #b23b23 !important;
    border-bottom: 0 !important;
  }

  .mobile-more-logout .lucide-icon {
    color: #b23b23 !important;
  }

  .mobile-more-version {
    padding-top: 10px;
    text-align: center;
    font-size: 11px;
    color: var(--muted-soft);
  }

  /* Kartica „ko je prijavljen" na vrhu fioke. Selektor mora biti jaci od
     `.mobile-more-sheet button`, koji svakom dugmetu daje donju liniju. */
  .mobile-more-sheet button.mobile-more-ja {
    margin-bottom: 6px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--ink);
  }

  .mobile-more-ja .kartica-ja-drugi {
    color: var(--muted);
  }

  .mobile-more-ja .kartica-ja-oznaka {
    background: var(--panel);
    color: var(--brand-dark);
    border: 1px solid var(--line);
  }

  .mobile-more-ja.ton-upozorenje .kartica-ja-oznaka {
    color: #9a6b12;
  }
}

@media (max-width: 620px) {
  .shop-table,
  .shop-table thead,
  .shop-table tbody,
  .shop-table tr,
  .shop-table th,
  .shop-table td {
    display: block;
  }

  .shop-table thead {
    display: none;
  }

  .shop-table tr {
    display: grid;
    grid-template-columns: 58px 1fr;
    grid-template-areas:
      "slika naziv"
      "slika cena"
      "zaliha kolicina"
      "akcije akcije";
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }

  .shop-table td {
    width: auto !important;
    max-width: none !important;
    padding: 0;
    border: 0;
    text-align: left !important;
  }

  .shop-table .cell-image { grid-area: slika; align-self: start; }
  .shop-table .cell-name { grid-area: naziv; }
  .shop-table .cell-price { grid-area: cena; }
  .shop-table .cell-stock { grid-area: zaliha; }
  .shop-table .cell-qty { grid-area: kolicina; justify-self: end; }
  .shop-table .cell-actions { grid-area: akcije; }

  /* Kategorija je na telefonu suvisna: kupac je vec bira cipom ili pretragom,
     a u kartici bi uzela ceo red. */
  .shop-table .cell-category {
    display: none;
  }

  .shop-table .product-thumb,
  .shop-table .thumb-placeholder {
    width: 58px;
    height: 58px;
  }

  .shop-table .product-title-link {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    text-align: left;
  }

  /* Cena u jednom redu: cenovnik, tvoja cena i rabat jedno uz drugo. U mrezi
     jedno ispod drugog uzimala je tri reda kartice. */
  .shop-table .price-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
  }

  .shop-table .price-net {
    font-size: 17px;
  }

  /* ——— Cetiri pogleda na telefonu ———

     Do v0.9.82 su se cetiri izgleda ovde svodila na dve gustine: `list`+`large`
     u karticu preko reda, `grid`+`showcase` u dve kartice u redu. Mereno
     21.09.2026: kartica preko reda je davala 2,3 artikla u kadru, dve u redu
     oko 3,3 (lista ima ~530 px na telefonu 375x812). Razlika premala za
     prekidac, jer su obe gustine nosile isti sadrzaj — samo presavijen: usteda
     na sirini se potrosila na visinu.

     Zato od v0.9.83 svaki izgled izbacuje ili zadrzava drugo, pa radi drugi
     posao. Merenje i nacrt: docs/b2b-mobilni-pogledi.html

       list      cenovnik, 8,1 artikla u kadru — trazim poznatu sifru
       large     red sa slicicom, 4,8 — redovna porudzbina
       grid      tri plocice u redu, 7,6 — razgledam kategoriju
       showcase  izlog, 1,7 — gledam akciju

     Raspored iznad ovog komentara ostaje kakav je bio i vazi kada atributa
     nema (nepoznat kljuc, prodavnica pre prvog izbora). */

  /* — Sifra, zaliha i pakovanje u jednom redu —
     U nacrtu (docs/b2b-mobilni-pogledi.html) meta red stoji ispod naziva kao
     jedna linija: sifra, zaliha, pakovanje. U HTML-u su to tri razlicita
     mesta — sifra i pakovanje su unutar <td class="cell-name">, a zaliha je
     svoja celija — pa ih obican raspored ne moze staviti u isti red.

     Zato `display: contents` na celiji naziva: njena deca (naslov, sifra,
     pakovanje) postaju polja iste mreze kao i zaliha, i svako dobija svoje
     mesto. Bez toga je zaliha morala u zaseban red i red je bio visi za 20 px.

     Ako `display: contents` negde ne radi, celija ostaje blok i raspored se
     vraca na naziv-pa-zaliha — citljivo, samo vise. */

  /* — list: cenovnik —
     Bez slike i bez brojaca: kupac koji zna sifru ne gleda sliku, a kolicina
     mu je pakovanje. Brojac ostaje u DOM-u (skriven), pa dugme i dalje dodaje
     minimalnu kolicinu; drugu kolicinu kupac bira u „Vecoj slici" ili u
     detalju artikla. */

  /* Naziv uzima ceo red, a cena silazi u meta liniju ispod njega.

     Do v0.9.94 je bilo obrnuto: cena je imala svoju kolonu i nikad se nije
     sekla, a nazivu je od 390 px ostajalo 106 — pa se sekao uvek. Mereno kod
     pravog kupca 21.09.2026: svi artikli pocinju istom recju („Advancis…"), a
     razlikuju se tek na kraju naziva, koji je bas bio odsecen. Sada naziv ima
     289 px i staje u jedan red, a red ostaje na 59 px — isti broj artikala u
     kadru, samo se vidi sta je sta. */
  /* Od v1.0.2 cena stoji na kraju meta reda, uz desnu ivicu, a ne na pocetku.
     Cene se citaju poredjenjem sa cenom iznad i ispod, a levo poravnate se
     porede po duzini reci: „815,00" pocinje na istom mestu kao „1.011,00" i
     deluje duze, dakle vece. Uz desnu ivicu i tabelarne cifre zarezi se
     poklope jedan ispod drugog i poredjenje je tacno. Isto pravilo koje
     `.num` vec nosi u tabelama na racunaru. */
  .table-wrap[data-prikaz="list"] .shop-table tr {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "naziv  naziv naziv     naziv akcije"
      "zaliha sifra pakovanje cena  akcije";
    align-items: center;
    /* 6, ne 8 (v1.0.134): na 360 px su „×12" falila 4 px. */
    gap: 1px 6px;
    margin-bottom: 6px;
    padding: 7px 10px;
  }

  .table-wrap[data-prikaz="list"] .shop-table .cell-price {
    grid-area: cena;
    justify-self: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .table-wrap[data-prikaz="list"] .shop-table .cell-image,
  .table-wrap[data-prikaz="list"] .shop-table .cell-qty {
    display: none;
  }

  /* — Dugme koje se pretvara u brojac —
     Dok artikla nema u korpi, u redu stoji dugme sa ikonicom korpe. Prvi dodir
     ubaci pakovanje, red dobije podlogu i na mesto dugmeta dodje brojac koji
     od tada pomera kolicinu u korpi; „−" na minimumu izbacuje artikal.

     Oba elementa vec postoje u HTML-u i stoje u istoj koloni („akcije"), pa se
     samo smenjuju — nista se ne docrtava. Stanje nosi klasa `u-korpi`, koju
     postavlja oznaciRedUKorpi() u js/catalog-modules/products.js.

     Cena izmene je merena: red artikla koji je u korpi raste sa 66 na 78 px,
     jer je brojac visi od meta linije koju pokriva. Nacrt i merenje:
     docs/b2b-korpa-izlog-dodavanje.html (predlog 1). */
  .table-wrap[data-prikaz="list"] .shop-table tr.u-korpi .cell-qty {
    display: block;
    grid-area: akcije;
  }

  .table-wrap[data-prikaz="list"] .shop-table tr.u-korpi .cell-actions {
    display: none;
  }

  /* Red sa oznakom akcije („Akcija do 13.10.", „10+1 gratis"): cena ide u svoj,
     treci red, i dalje uz desnu ivicu. U drugom redu su zaliha, sifra, cena sa
     oznakom i dugme trazili ~269 px od 245 na 360 px, pa je pakovanje imalo
     0 px, a dugme izlazilo 10 px iz kartice (mereno 29.09.2026). */
  .table-wrap[data-prikaz="list"] .shop-table tr:not(.u-korpi):has(.cell-price .offer-tag) {
    grid-template-areas:
      "naziv  naziv naziv     naziv     akcije"
      "zaliha sifra pakovanje pakovanje akcije"
      "cena   cena  cena      cena      akcije";
  }

  .table-wrap[data-prikaz="list"] .shop-table tr:not(.u-korpi):has(.cell-price .offer-tag) .cell-price {
    justify-self: end;
  }

  /* U svom redu cena i oznaka stoje jedna pored druge, ne jedna ispod druge. */
  .table-wrap[data-prikaz="list"] .shop-table tr:not(.u-korpi) .cell-price .price-stack:has(.offer-tag) {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  /* Red u korpi u tri reda: naziv, pa meta sa cenom preko cele sirine, pa
     brojac uz desnu ivicu. Kad je brojac (120 px) zauzimao kolonu „akcije" u
     oba reda, pakovanju je ostajalo 0 px — „×6" je nestajao bas kod artikla
     koji kupac dodaje (11 od 50 redova na 360 px, mereno 29.09.2026). Ni brojac
     uz naziv nije isao: red kupca je na 360 px sirok 267 px, pa su naziv i
     pakovanje dobijali 119 i 23 px. Ovako naziv i meta imaju celu sirinu, a
     cena stoji uz brojac, desno — cena sa oznakom akcije je dva reda visoka,
     pa bi u meti podigla red na 119 px; uz brojac od 40 px ne dodaje nista.
     Nacrt: docs/b2b-kupac-telefon-pre-posle.html, odeljak 2. */
  .table-wrap[data-prikaz="list"] .shop-table tr.u-korpi {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "naziv  naziv  naziv     naziv"
      "zaliha sifra  pakovanje pakovanje"
      "akcije akcije akcije    cena";
  }

  .table-wrap[data-prikaz="list"] .shop-table tr.u-korpi .cell-qty {
    justify-self: start;
    margin-top: 3px;
  }

  /* Brojac u cenovniku: 36 / 44 / 36 umesto 40 / 36 / 40.

     Ukupna sirina ostaje 118 px, pa se nista u redu ne pomera — menja se samo
     podela. Razlog je merenje od 22.09.2026: polje od 36 px prima dve cifre, a
     brojac u ovom pogledu pokazuje koliko je artikla U KORPI. Kupac sa 120
     komada video je „12", bez ikakvog znaka da cifra fali. Sa 44 px staje sve
     do 9.999.

     Dodirna meta dugmadi pada sa 40 na 36 px. To je svesna razmena: promasen
     dodir se vidi i ispravlja, a odsecena cifra se ne vidi uopste.

     Mere se pisu i na dugmad i na polje, ne samo na kolone: nize u fajlu stoji
     opste mobilno pravilo `.quantity-stepper button { width: 44px; height: 44px }`,
     koje bi inace razvuklo dugmad preko kolona i `overflow: hidden` bi im
     odsekao ivice. */
  .table-wrap[data-prikaz="list"] .shop-table .quantity-stepper {
    grid-template-columns: 36px 44px 36px;
    min-height: 40px;
  }

  .table-wrap[data-prikaz="list"] .shop-table .quantity-stepper button {
    width: 36px;
    height: 40px;
    min-height: 40px;
    font-size: 15px;
  }

  .table-wrap[data-prikaz="list"] .shop-table .quantity-stepper input {
    height: 40px;
    min-height: 40px;
  }

  .table-wrap[data-prikaz="list"] .shop-table tr.u-korpi {
    border-color: var(--brand);
    background: var(--brand-soft);
  }

  .table-wrap[data-prikaz="list"] .shop-table .cell-name {
    display: contents;
  }

  /* Dva reda naziva: kod dugackog naziva red poraste na ~76 px, a to je jedino
     mesto gde kupac razlikuje artikle. Odsecanje ide preko visine, ne preko
     `-webkit-line-clamp`, jer je naslov <button> — Chrome na dugmetu svede
     `display: -webkit-box` na `flow-root` i clamp tiho ne radi nista. */
  .table-wrap[data-prikaz="list"] .shop-table .product-title-link {
    grid-area: naziv;
    display: block;
    min-width: 0;
    width: 100%;
    max-height: 34px;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.25;
    white-space: normal;
  }

  .table-wrap[data-prikaz="list"] .shop-table .row-sku {
    grid-area: sifra;
    margin-top: 0;
  }

  /* Pakovanje uzima ono sto od reda pretekne i odseca se — „pakovanje 6 kom ·
     min 6" je najduzi deo mete, a najmanje hitan. */
  .table-wrap[data-prikaz="list"] .shop-table .row-packaging {
    grid-area: pakovanje;
    min-width: 0;
    margin-top: 0;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table-wrap[data-prikaz="list"] .shop-table .cell-stock {
    grid-area: zaliha;
  }

  /* ——— Rabat i cena pre rabata izlaze iz svih pogleda na telefonu ———
     Ne zbog mesta, nego zbog znacenja: „1.664,00  −30%" jedan kupac cita kao
     „ovo je vec snizeno", drugi kao „na ovo ide jos 30%". Razlaganje cene
     (cenovnik → rabat → tvoja cena) stoji u detalju artikla, gde ima mesta da
     se napise recima, i tamo se dolazi dodirom na naziv ili na sliku.
     U redu ostaje jedan broj: cena koju kupac placa.

     Odluka: Dejan, 21.09.2026. */
  .table-wrap[data-prikaz="list"] .shop-table .price-gross,
  .table-wrap[data-prikaz="large"] .shop-table .price-gross,
  .table-wrap[data-prikaz="grid"] .shop-table .price-gross,
  .table-wrap[data-prikaz="showcase"] .shop-table .price-gross,
  .table-wrap[data-prikaz="list"] .shop-table .price-discount,
  .table-wrap[data-prikaz="large"] .shop-table .price-discount,
  .table-wrap[data-prikaz="grid"] .shop-table .price-discount,
  .table-wrap[data-prikaz="showcase"] .shop-table .price-discount {
    display: none;
  }

  .table-wrap[data-prikaz="list"] .shop-table .price-stack {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Slika je dugme, ali ne sme da izgleda kao dugme. */
  .shop-table .product-image-link {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* U meta redu zaliha je jedna rec uz sifru, a ne pilula: okvir i podloga bi
     uz dve sitne sive linije povukli pogled na sebe. Boja teksta ostaje ona
     koju je firma izabrala, pa se „nema na stanju" i dalje razlikuje. */
  .table-wrap[data-prikaz="list"] .shop-table .stock-badge,
  .table-wrap[data-prikaz="large"] .shop-table .stock-badge {
    padding: 0;
    border-color: transparent;
    background: none;
    font-size: 10.5px;
    line-height: 1.5;
    white-space: nowrap;
  }

  .table-wrap[data-prikaz="list"] .shop-table .stock-badge.green,
  .table-wrap[data-prikaz="large"] .shop-table .stock-badge.green {
    color: #1a7a43;
  }

  .table-wrap[data-prikaz="list"] .shop-table .stock-badge.amber,
  .table-wrap[data-prikaz="large"] .shop-table .stock-badge.amber {
    color: #8a5f0f;
  }

  .table-wrap[data-prikaz="list"] .shop-table .stock-badge.red,
  .table-wrap[data-prikaz="large"] .shop-table .stock-badge.red {
    color: #a5391f;
  }

  .table-wrap[data-prikaz="list"] .shop-table .price-net {
    font-size: 15px;
  }

  /* — large: red sa slicicom —
     Slika 44 px je dovoljna da se prepozna poznato pakovanje, a ne uzima red
     za sebe. Brojac ostaje, jer je ovo pogled za redovnu porudzbinu. */

  /* Dugme „Dodaj u korpu" ostaje, iako ga nacrt nema: bez njega se artikal ne
     moze dodati, a brojac koji sam dodaje u korpu je izmena ponasanja, ne
     rasporeda.

     Zato tri reda umesto dva. U dva reda su slika (44), brojac (124) i dugme
     (44) ostavljali nazivu 119 px, pa se sekao na „Deter…" a zaliha na „Na s".
     Ovako naziv ima ceo red (303 px), meta je linija ispod njega kao u
     nacrtu, a cena, brojac i dugme stoje u svom redu.

     Cena se prostire preko kolone sa sifrom i one rastegljive: visak sirine
     tako ode na rastegljivu, a kolona sa sifrom ostane uska — inace je cena
     razvuce i zaliha odleti na sredinu reda, daleko od sifre.

     Od v0.9.95 sifra deli red sa nazivom, a ne stoji u svom: firma koja ne
     prati zalihe ostavljala je tu liniju gotovo praznu, pa je red imao sprat
     vise ni za sta. Mereno kod pravog kupca: 101 px po redu, od cega je jedan
     ceo sprat nosio samo sifru. */
  .table-wrap[data-prikaz="large"] .shop-table tr {
    /* min-content za cenu i brojac, a ne auto: naziv se prostire preko sve tri
       desne kolone, pa bi sa auto gurao kolonu cene i stezao zalihu na
       „Na sta…". Ovako obe uzimaju tacno koliko im treba, a zaliha dobija
       ostatak. */
    /* Od v1.0.134 zaliha i cena stoje jedna iznad druge, a brojac zauzima oba
       reda. U jednom redu (cena | zaliha | brojac) je zalihi ostajalo 38 px od
       75 koliko trazi „Poslednjih 2", pa se prelivala ispod brojaca — na 360 px
       prekrivena u skoro svakom redu (mereno 29.09.2026). Red ostaje iste
       visine: brojac od 44 px je visi od zalihe i cene zajedno.
       Nacrt: docs/b2b-kupac-telefon-pre-posle.html, odeljak 1. */
    grid-template-columns: 44px minmax(0, 1fr) min-content;
    grid-template-areas:
      "slika naziv  naziv"
      "slika zaliha kolicina"
      "slika cena   kolicina";
    align-items: center;
    gap: 2px 8px;
    margin-bottom: 7px;
    padding: 8px 10px;
  }

  /* Dugmeta „Dodaj u korpu" ovde nema: brojac od v0.9.88 pokazuje koliko je
     artikla u korpi, pa je svaki dodir na „+" i „−" vec upis u korpu.
     Logika je u brojacJeKorpa() u js/catalog-modules/products.js i vezana je
     za isti prag od 620 px. */
  .table-wrap[data-prikaz="large"] .shop-table .cell-actions {
    display: none;
  }

  /* Red artikla koji je u korpi. Bez ovoga se „0" i „6" razlikuju samo brojem,
     a kupac koji skroluje trazi ono sto je vec uzeo. */
  .table-wrap[data-prikaz="large"] .shop-table tr.u-korpi {
    border-color: var(--brand);
    background: var(--brand-soft);
  }

  .table-wrap[data-prikaz="large"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="large"] .shop-table .thumb-placeholder {
    width: 44px;
    height: 44px;
  }

  /* Naziv i sifra u istoj liniji: naslov tece kao tekst, pa sifra staje odmah
     iza njega. Celija je ta koja odseca na dva reda — naslov je <button>, na
     kom `-webkit-line-clamp` ne radi. */
  .table-wrap[data-prikaz="large"] .shop-table .cell-name {
    grid-area: naziv;
    min-width: 0;
    max-height: 33px;
    overflow: hidden;
    line-height: 1.25;
  }

  .table-wrap[data-prikaz="large"] .shop-table .product-title-link {
    display: inline;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
  }

  .table-wrap[data-prikaz="large"] .shop-table .row-sku {
    display: inline;
    margin: 0 0 0 6px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .cell-stock {
    grid-area: zaliha;
    min-width: 0;
    justify-self: start;
  }

  /* Slika stoji uz naziv i metu, a ne uz red sa cenom — zato se prostire samo
     preko prva dva reda. */
  .table-wrap[data-prikaz="large"] .shop-table .cell-image {
    align-self: center;
  }

  .table-wrap[data-prikaz="large"] .shop-table .cell-price {
    justify-self: start;
  }

  /* Pakovanje u ovom pogledu ne stoji u meti: brojac ga vec postuje korakom,
     a red bi zbog njega dobio trecu liniju. Ostaje u cenovniku i u izlogu. */
  .table-wrap[data-prikaz="large"] .shop-table .row-packaging {
    display: none;
  }

  .table-wrap[data-prikaz="large"] .shop-table .price-stack {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .table-wrap[data-prikaz="large"] .shop-table .stock-badge {
    padding: 0 7px;
    font-size: 10.5px;
    line-height: 1.5;
  }

  /* — grid: dve plocice u redu —
     Za razgledanje kategorije. Sifra i zaliha izlaze iz plocice; ono sto je
     izaslo stoji u detalju artikla, na tap po naslovu.

     Do v1.0.1 su bile tri u redu, i to je palo na merenju: na ekranu od 360 px
     plocica ima 106 px unutrasnje sirine, a brojac 97 — ostajalo je 2 px levo i
     7 px desno, pa je „−" dodirivao ivicu; na 320 px je izlazio iz plocice.
     Gore od toga, polje za broj je bilo 30 px, a „100" trazi 34, „1.000" 41,
     „100.000" cak 54 px: kolicina se secala vec na tri cifre, i to nemo —
     kupac vidi „10" tamo gde pise „100".

     Sa dve u redu plocica ima 167 px, brojac dobija pune dodirne mete od 44 px
     i polje koje se siri, pa staje i sestocifrena kolicina. Slika raste sa 56
     na 88 px, naziv sa 11,5 na 12,5 px, a dugme „Dodaj u korpu" uzima celu
     sirinu plocice i vraca svoju rec.

     Cena je gustina: u kadar staju cetiri artikla umesto devet. Odluka: Dejan,
     22.09.2026, uz merenje u docs/b2b-mreza-brojac.html (predlog A). Ko bude
     vracao tri u redu, mora prvo da resi brojac — problem nije bio u broju
     kolona nego u tome sto brojac ne staje u 106 px. */

  .table-wrap[data-prikaz="grid"] .shop-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table tr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "slika"
      "naziv"
      "cena"
      "pakovanje"
      "akcije";
    /* Stalne visine, a ne „auto": artikal sa pravilom pakovanja je inace bio
       visi od susednih, pa su dugmad u istom redu stajala na dve visine.
       Mereno kod pravog kupca 21.09.2026 — vidi docs/b2b-pogledi-dorada.html.
       Red za pakovanje ostaje i kad pravila nema, jer prazan red od 14 px
       kosta manje od neporavnatih dugmadi.

       Poslednji red je 44 px, koliko i dodirna meta: u njemu stoji ili dugme
       „Dodaj u korpu" ili brojac, i oba su iste visine, pa plocice ostaju
       poravnate bez obzira na to sta je u korpi. */
    /* Red cene je `1fr`, ne `auto` (v2.0.92, nalaz testa): akcija (oznaka
       ili precrtana cena) ga je cinila visim, pa je dugme te plocice stajalo
       nize od susedne. Sada visak ide u red cene, a pakovanje i dugme stoje
       na dnu svake plocice u redu. */
    grid-template-rows: 88px 30px 1fr 14px 44px;
    align-content: start;
    align-items: center;
    justify-items: center;
    gap: 4px;
    margin-bottom: 0;
    padding: 6px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .cell-stock,
  .table-wrap[data-prikaz="grid"] .shop-table .cell-qty,
  .table-wrap[data-prikaz="grid"] .shop-table .row-sku {
    display: none;
  }

  /* Cena ostaje odmah ispod naziva; prazno iz reda `1fr` je ispod nje. */
  .table-wrap[data-prikaz="grid"] .shop-table .cell-price {
    align-self: start;
  }

  /* Isti obrazac kao u cenovniku: dugme dok artikla nema u korpi, brojac cim
     ude. Oba uzimaju celu sirinu plocice i visoka su 44 px, pa se zamena ne
     vidi kao pomeranje rasporeda.
     Nacrt: docs/b2b-korpa-izlog-dodavanje.html (predlog 1) i
     docs/b2b-mreza-brojac.html (predlog A). */
  .table-wrap[data-prikaz="grid"] .shop-table tr.u-korpi .cell-qty {
    display: block;
    grid-area: akcije;
  }

  .table-wrap[data-prikaz="grid"] .shop-table tr.u-korpi .cell-actions {
    display: none;
  }

  /* Brojac uzima celu sirinu plocice: dugmad su pune dodirne mete od 44 px, a
     polje uzima ono sto pretekne (`minmax(0, 1fr)`, a ne fiksnih 30 px) — pa
     raste zajedno sa plocicom i sestocifrena kolicina staje bez secenja.
     Fiksno polje je bilo prava greska starog rasporeda; broj kolona je bio
     samo povod. */
  .table-wrap[data-prikaz="grid"] .shop-table .cell-qty {
    width: 100%;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .quantity-stepper {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    width: 100%;
    min-height: 44px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .quantity-stepper button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    font-size: 16px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .quantity-stepper input {
    height: 44px;
    min-height: 44px;
    font-size: 13px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table tr.u-korpi {
    border-color: var(--brand);
    background: var(--brand-soft);
  }

  /* Brojaca u plocici nema, pa dugme dodaje pakovanje — i onda mora da pise
     koliko je to. Bez ovog reda kupac tapne „u korpu" i tek u korpi vidi da
     mu je stiglo sest komada. */
  .table-wrap[data-prikaz="grid"] .shop-table .cell-name {
    display: contents;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .row-packaging {
    grid-area: pakovanje;
    display: block;
    max-width: 100%;
    margin-top: 0;
    font-size: 9.5px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* U cenovniku, plocici i u izlogu stoji kratki zapis („pak 5 · min 5"): puni se lomio
     u dva reda ili secao na „pakovanje 5 k…". Oba zapisa pravi packagingNote()
     u js/catalog-modules/products.js. */
  .table-wrap[data-prikaz="list"] .shop-table .pakovanje-puno,
  .table-wrap[data-prikaz="grid"] .shop-table .pakovanje-puno,
  .table-wrap[data-prikaz="showcase"] .shop-table .pakovanje-puno {
    display: none;
  }

  .pakovanje-kratko {
    display: none;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .pakovanje-kratko,
  .table-wrap[data-prikaz="showcase"] .shop-table .pakovanje-kratko {
    display: inline;
  }

  /* U cenovniku ni kratki zapis ne staje: kolona pakovanja je na 360 px imala
     32 px, a „pak 6 · min 6" trazi 61 — odsecen u svih 25 redova (mereno
     29.09.2026). Tu stoji znak „×6" od ~24 px. Nacrt:
     docs/b2b-admin-telefon-pre-posle.html, odeljak 1. */
  .table-wrap[data-prikaz="list"] .shop-table .pakovanje-znak {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ecd6a8;
    border-radius: 5px;
    background: #fbf3e3;
    color: var(--warn);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
  }

  .table-wrap[data-prikaz="list"] .shop-table .zaliha-puno {
    display: none;
  }

  .table-wrap[data-prikaz="list"] .shop-table .zaliha-kratko {
    display: inline;
  }

  /* Adminova Prodavnica: isti raspored alatki koji kupac ima od ranije
     (body.customer-portal .shop-panel .toolbar) — pretraga, mikrofon i skener
     gore, kategorija i „Samo akcije" dole. Kod admina su bila cetiri reda, a
     mikrofon sam u poslednjem (mereno 29.09.2026). „Pretrazi" se sakriva kao
     i kod kupca: pretraga krece dok se kuca, Enter i dalje radi.
     Nacrt: docs/b2b-admin-telefon-pre-posle.html, odeljak 5. */
  body:not(.customer-portal) .shop-panel .toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  body:not(.customer-portal) .shop-panel .toolbar input {
    order: 1;
    min-width: 0;
    max-width: none;
    flex: 1 1 calc(100% - 112px);
  }

  body:not(.customer-portal) .shop-panel .toolbar .dictate-button {
    order: 2;
    flex: none;
  }

  body:not(.customer-portal) .shop-panel .toolbar .scan-button:not(.dictate-button) {
    order: 3;
    flex: none;
  }

  body:not(.customer-portal) .shop-panel .toolbar select {
    order: 4;
    min-width: 0;
    flex: 1 1 0;
  }

  body:not(.customer-portal) .shop-panel .toolbar #offer-filter {
    order: 5;
    flex: none;
  }

  body:not(.customer-portal) .shop-panel .toolbar #search-button {
    display: none;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="grid"] .shop-table .thumb-placeholder {
    width: 100%;
    height: 88px;
    object-fit: contain;
  }

  /* Naziv u dva reda: treci bi razvukao obe plocice u redu, jer im je
     visina zajednicka. Odsecanje ide preko visine celije, a ne preko
     `-webkit-line-clamp`: naslov je <button>, a Chrome na dugmetu svede
     `display: -webkit-box` na `flow-root`, pa clamp tiho ne radi nista i naziv
     ostane u jednom odsecenom redu. */
  .table-wrap[data-prikaz="grid"] .shop-table .product-title-link {
    grid-area: naziv;
    display: block;
    min-width: 0;
    width: 100%;
    min-height: 30px;
    max-height: 30px;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  /* Cenovnicka cena, kupceva cena i rabat u plocici padnu u tri reda, a obe
     plocice u redu dele visinu — pa jedan rabat podigne ceo red. Ostaje
     kupceva cena i oznaka rabata. */
  .table-wrap[data-prikaz="grid"] .shop-table .price-gross {
    display: none;
  }

  /* Cena i rabat u istom redu: rabat u svom redu podigne samo jednu plocicu,
     a obe u redu dele visinu, pa red poskoci. */
  .table-wrap[data-prikaz="grid"] .shop-table .price-stack {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .price-discount {
    font-size: 10px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .price-net {
    font-size: 15px;
  }

  /* — showcase: izlog —
     Suprotan kraj: jedan artikal do pola ekrana i sve sto red ima na racunaru.
     Za akcije i nov asortiman, ne za katalog od nekoliko hiljada artikala. */

  /* Sifra, zaliha i pakovanje u jednom redu ispod naziva — isto kao u
     cenovniku, i isto preko `display: contents`. Ranije su stajali u tri reda
     i kartica je bila visa 40 px bez ijednog novog podatka. */
  /* Od v1.0.134 tri kolone, a zaliha u rastegljivoj. Sa cetiri (sifra i zaliha
     „auto", brojac 143 px) su sifra, zaliha i brojac zajedno trazili ~297 px, a
     kartica na 360 px ima 245 unutra: slika i brojac su izlazili 40 px preko
     desne ivice kartice, a desna ivica „+" nije primala dodir (mereno
     29.09.2026). Duzi natpis zalihe sada prelazi u drugi red. */
  .table-wrap[data-prikaz="showcase"] .shop-table tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "slika  slika  slika"
      "naziv  naziv  naziv"
      "sifra  zaliha pakovanje"
      "cena   cena   kolicina"
      "akcije akcije akcije";
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
    padding: 12px;
  }

  /* — Praznina pored slike u izlogu —
     Slika drzi ceo red sirine (366 px), ali ga `contain` ne puni: uspravna
     fotografija 3 : 4 na 120 px visine daje 90 px sirine, pa ostaje po ~138 px
     belog sa svake strane. Praznina ne nestaje sama — `contain` na fiksnoj
     visini je uvek ostavlja.

     Zato iza ostre slike stoji ista fotografija, razmazana i preliva se preko
     celog okvira (`cover`). Prazan prostor tako dobija boje samog artikla i
     postaje deo kartice. Slika je u okviru od 120 px spustena na 104, da
     razmazana podloga ima vidljiv rub.

     Fotografija na beloj podlozi daje belu podlogu — kod nje se nista ne menja,
     i to je prihvaceno: bolje nego seci sliku na `cover`, sto bi kod etikete
     odseklo bas ime proizvoda. Nacrt: docs/b2b-korpa-izlog-dodavanje.html (B1). */
  .table-wrap[data-prikaz="showcase"] .shop-table .product-image-link {
    position: relative;
    display: grid;
    place-items: center;
    /* Slika je u dugmetu, a dugme se siri samo do sadrzaja: bez `width: 100%`
       okvir ostaje uz sliku i podloga nema sta da popuni. */
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--panel-soft);
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .product-thumb-bg {
    display: block;
    position: absolute;
    /* Preko ivica, jer zamucenje inace razvodni rub okvira u sivo. */
    inset: -12%;
    width: 124%;
    height: 124%;
    object-fit: cover;
    filter: blur(18px);
    opacity: 0.55;
  }

  /* Bez bele podloge i okvira: `.product-thumb` ih nosi iz baznog pravila, a
     slika je ovde sira od same fotografije (`contain` ostavlja prazno sa
     strane) — pa bi bas ta bela povrsina prekrila razmazanu podlogu i praznina
     bi ostala bela. Sa providnom podlogom kroz nju prolazi podloga, a sama
     fotografija ostaje netaknuta. */
  .table-wrap[data-prikaz="showcase"] .shop-table .product-thumb {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 104px;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .thumb-placeholder {
    width: 100%;
    height: 120px;
    object-fit: contain;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .cell-name {
    display: contents;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .product-title-link {
    grid-area: naziv;
    font-size: 15px;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .row-sku {
    grid-area: sifra;
    margin-top: 0;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .cell-stock {
    grid-area: zaliha;
    min-width: 0;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .cell-stock .stock-badge {
    max-width: 100%;
    white-space: normal;
  }

  /* Uz nagovestaj akcije („· jos 6 pak do gratisa", u istom polju sa sifrom)
     sifra dobija ceo red, a zaliha i pakovanje red ispod: nagovestaj je inace
     sirio kolonu sifre na 110 px i zaliha je ostajala na 0. */
  .table-wrap[data-prikaz="showcase"] .shop-table tr:has(.row-tier-wrap) {
    grid-template-areas:
      "slika  slika  slika"
      "naziv  naziv  naziv"
      "sifra  sifra  sifra"
      "zaliha zaliha pakovanje"
      "cena   cena   kolicina"
      "akcije akcije akcije";
  }

  /* Cena sa oznakom akcije („10+1 gratis") je svojom najmanjom sirinom sirila
     kolonu sifre, pa je zaliha ostajala na 0 px. */
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-price {
    min-width: 0;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .cell-price .price-stack {
    flex-wrap: wrap;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .row-packaging {
    grid-area: pakovanje;
    min-width: 0;
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .price-net {
    font-size: 19px;
  }

  /* Brojac u izlogu deli red sa cenom. Mobilni raspored mu daje `1fr` u
     sredini, pa se razvuce i podvuce pod cenu — ovde mu je polje fiksno. */
  .table-wrap[data-prikaz="showcase"] .shop-table .quantity-stepper {
    grid-template-columns: 44px 52px 44px;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .cell-price {
    min-width: 0;
    justify-self: start;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .cell-qty {
    justify-self: end;
  }

  /* — zajednicko za tri gusta pogleda —
     Rec „Dodaj u korpu" uz ikonu i srce za omiljeno traze red za sebe; u
     cenovniku, redu i plocici tog reda nema. Oba ostaju u izlogu i u detalju
     artikla. */

  /* Od v1.0.2 plocica ima dve u redu, pa joj se rec vratila: dugme preko cele
     sirine nosi i ikonu i „Dodaj u korpu", kao u izlogu. U cenovniku i u redu
     sa slicicom te reci i dalje nema — tamo dugme deli red sa cenom. */
  .table-wrap[data-prikaz="list"] .shop-table .cell-actions .button.icon-only[data-add]::after,
  .table-wrap[data-prikaz="large"] .shop-table .cell-actions .button.icon-only[data-add]::after {
    content: none;
  }

  .table-wrap[data-prikaz="list"] .shop-table .wishlist-toggle,
  .table-wrap[data-prikaz="large"] .shop-table .wishlist-toggle,
  .table-wrap[data-prikaz="grid"] .shop-table .wishlist-toggle {
    display: none;
  }

  .table-wrap[data-prikaz="list"] .shop-table .cell-actions .row-actions,
  .table-wrap[data-prikaz="large"] .shop-table .cell-actions .row-actions,
  .table-wrap[data-prikaz="grid"] .shop-table .cell-actions .row-actions {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* Dugme u plocici ide preko cele sirine, od v1.0.2. Dok su bile tri u redu
     bio je kvadrat od 44 px, jer je traka preko 110 px plocice izgledala kao
     glavna radnja ekrana. Na plocici od 167 px traka je obicno dugme, a dobija
     se dodirna meta koju nije lako promasiti i mesto za rec „Dodaj u korpu".
     Visina je ista kao kod brojaca koji ga menja, pa plocice ostaju poravnate. */
  /* `justify-self: stretch`, a ne samo `width: 100%`: plocica ima
     `justify-items: center`, pa se celija skuplja na svoj sadrzaj i sirina od
     100% racuna se od te skupljene sirine. */
  .table-wrap[data-prikaz="grid"] .shop-table .cell-actions,
  .table-wrap[data-prikaz="grid"] .shop-table .cell-qty {
    justify-self: stretch;
    width: 100%;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .cell-actions .row-actions {
    width: 100%;
  }

  /* Ikona i rec u istom redu: dugme je mreza sa jednom kolonom, pa bi inace
     „Dodaj u korpu" stalo ispod ikone i oboje bi se stisnulo u 44 px. */
  .table-wrap[data-prikaz="grid"] .shop-table .cell-actions .button.icon-only {
    width: 100%;
    min-height: 44px;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
  }

  /* Dodirne mete od 44 px ostaju i u gustim pogledima — to je merena odluka iz
     v0.9.67 i gustina se ne kupuje na racun prsta. Zato dugme u cenovniku i u
     redu ostaje kvadrat od 44 px, a visinu stedimo na tekstu. */
  .table-wrap[data-prikaz="list"] .shop-table .cell-actions .button.icon-only,
  .table-wrap[data-prikaz="large"] .shop-table .cell-actions .button.icon-only {
    width: 44px;
  }

  /* Polje 48 px izmedju dva dugmeta od 40, ukupno i dalje 128 px — zaliha se ne
     pomera. Do v1.0.3 je bilo 44 / 40 / 44, a komentar je tvrdio da se
     „cetvorocifrene kolicine i ovde vide": mereno 22.09.2026, nisu se videle —
     polje od 40 px seklo je sve od 1.000 navise. Ovaj pogled nema ni red sa
     pravilom pakovanja, pa je brojac jedini izvor istine o kolicini. */
  /* Od v1.0.134 dugmad 36 umesto 40 (ukupno 120): 8 px vise za zalihu i cenu
     pored brojaca. Polje ostaje 48 zbog cetvorocifrenih kolicina. */
  .table-wrap[data-prikaz="large"] .shop-table .quantity-stepper {
    grid-template-columns: 36px 48px 36px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .quantity-stepper button {
    width: 36px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .cell-stock {
    min-width: 0;
    overflow: hidden;
  }

  /* „Nema" umesto „Nema na zalihama", kao u spisku; duzi natpis iz lestvice
     („Ima na zalihama") prelazi u drugi red umesto da se sece. */
  .table-wrap[data-prikaz="large"] .shop-table .zaliha-puno {
    display: none;
  }

  .table-wrap[data-prikaz="large"] .shop-table .zaliha-kratko {
    display: inline;
  }

  .table-wrap[data-prikaz="large"] .shop-table .cell-stock .stock-badge {
    max-width: 100%;
    white-space: normal;
  }

  /* Panel na telefonu ne treba 22px sa svake strane - to je 44px od 375. */
  body.customer-portal .panel {
    padding: 14px;
  }

  /* ——— Zaglavlje nosi logo, a ne ime ekrana ———
     Ime ekrana pise u donjoj traci, na plavoj stavci, pa ga zaglavlje ne
     ponavlja; klasa kupca stoji uz zbir u korpi i u profilu, tamo gde se o
     ceni odlucuje. Oslobodjen red dobija traka sa pretragom, koja se lepi za
     vrh i ostaje na ekranu dok kupac lista katalog — do sada je morao da se
     vrati na vrh da bi pretrazio.

     Merenje i nacrt: docs/b2b-zaglavlje-predlozi.html */
  body.customer-portal .topbar-title {
    display: none;
  }

  body.customer-portal .topbar {
    margin-bottom: 12px;
  }

  body.customer-portal .toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel);
    /* Podloga ide do ivica panela, inace se artikli vide kroz razmak sa strane
       dok prolaze ispod trake. */
    margin: -14px -14px 0;
    padding: 12px 14px 8px;
  }

  /* Polje pretrage uzima ceo prvi red, a filter kategorija, skener i mikrofon
     padaju u drugi.

     Do v0.9.78 je ovde stajalo `flex-wrap: nowrap`, napisano kada su u traci
     bili samo polje i dugme „Pretrazi". U traku su u medjuvremenu dosli filter
     kategorija, skener i mikrofon, pa je pet elemenata u jednom redu steglo
     polje pretrage na 72 px od 375, a poslednje dugme je izlazilo preko desne
     ivice. Dugme „Pretrazi" je na telefonu ionako sakriveno, pa razlog za
     nowrap vise ne postoji. */
  body.customer-portal .toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Dva reda po dva: polje pretrage i mikrofon gore, filter kategorija i
     skener dole — mikrofon tacno iznad skenera. Oba se ticu unosa artikla
     (rec i bar kod), pa stoje jedan nad drugim i prst ih nalazi na istom
     mestu. Prelom je izracunat, a ne prepusten slucaju: polje i filter uzimaju
     sirinu reda minus dugme (44) i razmak (8), pa sledeci element pada u novi
     red sam od sebe (dugme je 45 px sa ivicama, pa se odbija 58 sa razmakom
     i rezervom). */
  body.customer-portal .toolbar input {
    order: 1;
    min-width: 0;
    flex: 1 1 calc(100% - 58px);
    max-width: none;
  }

  body.customer-portal .toolbar .dictate-button {
    order: 2;
    flex: none;
  }

  body.customer-portal .toolbar select {
    order: 3;
    min-width: 0;
    flex: 1 1 calc(100% - 58px);
  }

  body.customer-portal .toolbar .scan-button:not(.dictate-button) {
    order: 4;
    flex: none;
  }

  body.customer-portal #page-title {
    font-size: 20px;
  }

  .shop-table .cell-actions .row-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .shop-table .cell-actions .button.icon-only {
    width: 100%;
  }

  /* Dugme "Dodaj u korpu" na telefonu nosi i rec, ne samo ikonu: u kartici ima
     mesta, a ikona sama nije dovoljno jasna kada je kolicina odmah pored.
     Ponude idu uz prodavnicu (od v1.0.15): tamo je dugme do tada bilo gola
     ikona uz brojac koji je i sam bio stisnut. */
  .shop-table .cell-actions .button.icon-only[data-add]::after,
  .shop-table .cell-actions .button.icon-only[data-offer-add]::after {
    content: "Dodaj u korpu";
    font-size: 13px;
    font-weight: 600;
  }
}

/* ——— Detalj artikla ———
   Razlaganje cene (cenovnik -> rabat -> tvoja cena) i tabela podataka. Do sada je
   detalj pokazivao samo konacnu cenu, pa kupac nije video odakle mu ona dolazi. */
.product-detail-pricebox {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--panel-soft);
}

.detail-price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.detail-price-line:last-child {
  border-bottom: 0;
}

.detail-price-line del {
  color: var(--muted);
}

.detail-price-line.total {
  padding-top: 10px;
  font-size: 16px;
}

.detail-price-line.total strong {
  font-size: 22px;
  font-weight: 700;
}

.detail-discount {
  color: #1f8a4c;
}

.product-detail-facts {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}

.product-detail-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.product-detail-facts span {
  color: var(--muted);
}

.product-detail-packaging {
  margin-bottom: 12px;
}

.product-detail-action {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.product-detail-action .button {
  min-width: 220px;
  justify-content: center;
}

@media (max-width: 620px) {
  /* Na telefonu detalj nije prozorcic nego ceo ekran: naslov gore, akcija dole,
     sadrzaj izmedju se skroluje. Isti modal, drugi raspored. */
  #product-detail-modal.modal-backdrop {
    padding: 0;
    place-items: stretch;
  }

  #product-detail-modal .product-detail-modal {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #product-detail-modal .modal-head {
    flex: none;
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  #product-detail-modal .modal-head h2 {
    font-size: 16px;
    line-height: 1.3;
  }

  #product-detail-modal .product-detail-layout {
    flex: 1;
    overflow: auto;
    padding: 14px;
    gap: 16px;
  }

  #product-detail-modal .product-detail-main-image {
    max-height: 210px;
  }

  #product-detail-modal .product-detail-action {
    flex: none;
    margin: 0;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.06);
  }

  #product-detail-modal .product-detail-action .button {
    height: 46px;
    flex: 1;
    min-width: 0;
  }

  /* Brojac u detalju dobija tacno onoliko koliko mu treba, a ne `1fr` iz
     mobilnih dodirnih meta. Mereno na produkciji 21.09.2026, kupcev detalj na
     390 px: brojac je uzimao 269 od 375, pa je dugmetu „Dodaj u korpu ·
     8.498,05" ostajalo 68 px i tekst se lomio na „Dodaj u". Dugmad ostaju
     44 px siroka, samo polje sa brojem prestaje da se razvlaci. */
  #product-detail-modal .product-detail-action .quantity-stepper {
    grid-template-columns: 44px 56px 44px;
    flex: none;
  }
}

/* ——— Tri koraka do porudzbine: Korpa -> Podaci -> Potvrda ——— */
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
}

.checkout-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* Crta izmedju koraka; ne crta se ispred prvog. */
.checkout-steps li + li::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  margin-right: 7px;
}

.step-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
}

.checkout-steps .active {
  color: var(--ink);
  font-weight: 600;
}

.checkout-steps .active .step-mark {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.checkout-steps .done .step-mark {
  background: #edf6f0;
  border-color: #1f8a4c;
  color: #1f8a4c;
}

.confirm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.confirm-head h2 {
  margin: 0;
}

.confirm-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 0;
  background: var(--panel-soft);
  line-height: 1.5;
}

.confirm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.confirm-items-title {
  margin: 20px 0 8px;
}

.confirm-lines div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.confirm-lines div:last-child {
  border-bottom: 0;
}

/* „× 4" ostaje na okupu: bez ovoga se broj odvaja od znaka u novi red. */
.confirm-qty {
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* Na telefonu tri naziva koraka ne staju uz crte, pa crte otpadaju
     a nazivi se sabijaju. */
  .checkout-steps {
    gap: 6px;
    font-size: 12px;
  }

  .checkout-steps li + li::before {
    width: 12px;
    margin-right: 6px;
  }

  .confirm-head h2,
  .confirm-items-title {
    font-size: 17px;
  }
}

/* ——— Brza lista ———
   Gust spisak bez slika: kupac koji ponavlja porudzbinu treba da vidi sto vise
   artikala odjednom, a ne fotografije robe koju vec poznaje. */
.quick-repeat {
  width: 100%;
  height: 44px;
  justify-content: center;
  font-size: 15px;
}

.quick-repeat-note {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.quick-missing {
  color: var(--warn);
}

/* Unos po sifri je svoja kartica, odvojena od spiska ispod: do v1.0.23 su
   polje, kolicina i dugmad stajali goli u panelu, pa je red sa kolicinom
   izgledao kao zaglavlje spiska „Najcesce narucujete", a ne kao nastavak polja
   iznad. */
.quick-find {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 12px;
}

.quick-find-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
}

.quick-find .field-hint {
  margin: 0 0 10px;
}

.quick-find-button {
  width: 100%;
  margin-top: 8px;
  min-height: 42px;
  justify-content: center;
  font-size: 14px;
}

.quick-sku-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.quick-sku-row input:first-child {
  flex: 1;
  min-width: 0;
}

/* Kartica nadjenog artikla: sve sto treba za odluku o kolicini, u jednom
   pogledu. Kolicina je namerno ispod cene i pravila pakovanja — to je redosled
   kojim kupac odlucuje. */
.quick-hit {
  margin-top: 10px;
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px;
}

.quick-hit-warn {
  margin: 0 0 8px;
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
}

.quick-hit-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.quick-hit-top .product-image-link {
  flex: none;
  width: 64px;
  height: 64px;
}

.quick-hit-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: start;
}

.quick-hit-info .product-title-link {
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
}

/* U kartici pogotka cena staje u jedan red: stara, nova i popust jedno pored
   drugog. Uspravan raspored iz spiska bi ovde uzeo tri reda i odgurao kolicinu
   ispod prevoja na telefonu. */
.quick-hit-price .price-stack {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
}

.quick-hit-rule {
  margin: 8px 0 0;
  padding: 6px 8px;
  border-radius: 7px;
  background: #fdf6e7;
  border: 1px solid #e6c98a;
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}

.quick-hit-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.quick-hit-action {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.quick-qty-label {
  grid-column: 1;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.quick-hit-action .quantity-stepper {
  grid-column: 1;
}

.quick-hit-add {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.quick-hit-total {
  font-variant-numeric: tabular-nums;
}

/* Promasaj nudi kuda dalje: bez ovoga kupac ostaje pred praznim poljem. */
.quick-miss {
  margin-top: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px;
}

.quick-miss-title {
  margin: 0 0 4px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.quick-miss-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.quick-miss-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-miss-actions .button {
  flex: 1 1 140px;
  min-height: 40px;
  justify-content: center;
}

.quick-title {
  margin: 22px 0 10px;
  font-size: 18px;
}

.quick-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.quick-row:last-child {
  border-bottom: 0;
}

.quick-row-info {
  min-width: 0;
}

.quick-row-info .product-title-link {
  display: block;
  text-align: left;
  font-weight: 600;
  white-space: normal;
}

.quick-row-price {
  text-align: right;
  white-space: nowrap;
}

/* Cenovnik, tvoja cena i rabat u jednom redu; u mrezi bi uzeli tri reda. */
.quick-row-price .price-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 8px;
}

@media (max-width: 620px) {
  /* Na telefonu cena ide ispod naziva, a kolicina i dugme ostaju u istom redu. */
  .quick-row {
    grid-template-columns: 1fr auto auto;
    gap: 8px 10px;
  }

  .quick-row-info {
    grid-column: 1 / -1;
  }

  .quick-row-price {
    text-align: left;
  }

  .quick-row-price .price-stack {
    justify-content: flex-start;
  }

  /* Red „Najcesce narucujete" od 146 na ~113 px (v1.0.134). Cena je u koloni
     od ~98 px pored brojaca i dugmeta stajala u cetiri reda (stara, nova, „-10%",
     „Akcija do 09.10."), a pakovanje je imalo svoj red. Sada: nova cena i
     rabat, pa stara cena i rok — dva reda, oba ispod visine brojaca — i
     pakovanje kao znak „×6" u redu sa sifrom, isto kao u prodavnici.
     Nacrt: docs/b2b-kupac-telefon-pre-posle.html, odeljak 6. */
  .quick-row-price .price-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    min-width: 0;
  }

  .quick-row-price .price-stack > * {
    max-width: 100%;
  }

  .quick-row-price .offer-tag {
    font-size: 11px;
  }

  .quick-row-price .price-net { order: 1; }
  .quick-row-price .price-discount { order: 2; }
  .quick-row-price .price-gross { order: 3; font-size: 11.5px; }
  .quick-row-price .offer-tag { order: 4; white-space: normal; }

  /* Cena ne sme da suzi brojac: bez ovoga je na 360 px polje za kolicinu
     spadalo na 18 px (kolona brojaca je „auto" i popusta prva). */
  .quick-row {
    grid-template-columns: minmax(0, 1fr) 132px auto;
  }

  .quick-row-price .offer-tag-rec {
    display: none;
  }

  .quick-row-info .row-sku {
    display: inline;
  }

  .quick-row-info .row-packaging {
    display: inline;
    margin-left: 6px;
  }

  .quick-row-info .pakovanje-puno {
    display: none;
  }

  .quick-row-info .pakovanje-znak {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ecd6a8;
    border-radius: 5px;
    background: #fbf3e3;
    color: var(--warn);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
  }

  .quick-hit-top .product-image-link {
    width: 56px;
    height: 56px;
  }
}

/* Pomocni tekst ispod polja u obrascu (npr. cemu sluzi bar kod). */
.field-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Karton i paleta u obrascu artikla (v1.1.18). Bez align-items: start napomena
   „= 40 kartona" ispod palete rasteze red, pa je polje kartona vise od palete. */
.form-grid[data-pakovanja] {
  align-items: start;
  margin-top: 12px;
}

.field-hint.pakovanje-upozorenje {
  color: #8a5f0f;
  font-weight: 600;
}

/* Pravilo pakovanja uz naziv artikla (min kolicina i korak). */
.row-packaging {
  display: block;
  margin-top: 2px;
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
}

/* Znak „×6" i „Nema" su samo za cenovnik na telefonu (v. @media 620px). */
.pakovanje-znak,
.zaliha-kratko {
  display: none;
}

/* Kratki zapis pakovanja je do v1.0.131 bio sakriven samo u bloku za telefon,
   pa je na racunaru pisalo oba: „pakovanje 6 kom · min 6 pak 6 · min 6"
   (uoceno 29.09.2026). Na racunaru: pun zapis u spisku, kratki u plocici i
   izlogu — isto pravilo koje telefon vec ima. */
.pakovanje-kratko {
  display: none;
}

.table-wrap[data-prikaz="grid"] .shop-table .pakovanje-puno,
.table-wrap[data-prikaz="showcase"] .shop-table .pakovanje-puno {
  display: none;
}

.table-wrap[data-prikaz="grid"] .shop-table .pakovanje-kratko,
.table-wrap[data-prikaz="showcase"] .shop-table .pakovanje-kratko {
  display: inline;
}

/* ——— Izbor nacina prikaza zalihe ———
   Cetiri rezima stoje jedan pored drugog. U padajucoj listi se videla samo
   izabrana vrednost, pa admin nije imao nacina da sazna da portal ume opsege. */
.stock-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.stock-mode {
  position: relative;
  display: block;
  cursor: pointer;
}

.stock-mode input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.stock-mode span {
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--panel);
  transition: border-color .12s, background .12s;
}

.stock-mode strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.stock-mode small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.stock-mode:hover span {
  border-color: var(--brand);
}

.stock-mode input:checked + span {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.stock-mode input:checked + span strong {
  color: var(--brand-dark);
}

/* Okvir fokusa mora da ostane vidljiv: pravi radio je sakriven, pa bez ovoga
   kretanje tastaturom kroz grupu nema nikakav znak gde se nalazis. */
.stock-mode input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Lestvica ostaje na ekranu i kada rezim nije „Opsezi" — priguseno, da se vidi
   da postoji. Ranije je bila potpuno skrivena i niko je nije nalazio. */
.stock-bands-field.is-muted .settings-rows,
.stock-bands-field.is-muted [data-add-stock-band] {
  opacity: .5;
}

.stock-bands-note {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .stock-modes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stock-modes {
    grid-template-columns: 1fr;
  }
}

/* Dugme za dodavanje stepenika ne sme da se razvuce preko cele sirine: tako
   izgleda kao glavna radnja obrasca, a nije. */
.stock-bands-field [data-add-stock-band] {
  align-self: flex-start;
  width: auto;
}

/* ——— Boja firme: izbor sa pregledom uzivo ———
   Boja se primenjuje na ceo portal dok se bira (js/brand-theme.js). Do v0.9.62
   se rezultat video tek posle cuvanja i osvezavanja stranice, pa je admin birao
   naslepo. */
.brand-color-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.brand-color-row input[type="color"] {
  width: 42px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  flex: none;
}

.brand-color-row input[data-primary-color] {
  width: 120px;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.brand-contrast {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}

.brand-contrast.dobro {
  background: #e9f6ee;
  border-color: #a8d7bd;
  color: #1a7a43;
}

.brand-contrast.granicno {
  background: #fdf4e3;
  border-color: #e7cb8d;
  color: #8a5f0f;
}

.brand-contrast.slabo {
  background: #fbedea;
  border-color: #e4b1a4;
  color: #a5391f;
}

.brand-preview {
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.brand-preview-label {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.brand-preview-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* Dugmad u pregledu su samo slika, ne rade nista — ali ne smeju da izgledaju
   onesposobljeno, jer bi tada prikazivala pogresnu boju. */
.brand-preview-row .button[disabled] {
  opacity: 1;
  cursor: default;
}

.brand-unsaved {
  margin: 9px 0 0;
  font-size: 12.5px;
  color: var(--warn);
}

.brand-unsaved .link-button {
  font-size: 12.5px;
  font-weight: 700;
}

/* „Udji kao kupac" — traka iznad celog portala dok admin gleda kupcevim ocima.
   Visina se oduzima od .app-shell jer je portal visok tacno 100vh i ima
   overflow:hidden na body-ju: bez toga bi dno portala (donja traka na telefonu,
   traka korpe) ispalo ispod ivice ekrana. */
:root {
  --impersonation-bar-h: 52px;
}

.impersonation-bar {
  height: var(--impersonation-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(180deg, #8a4b00, #6f3c00);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.impersonation-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.impersonation-text strong {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.impersonation-text span {
  font-size: 12px;
  opacity: 0.85;
}

.impersonation-bar .button {
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.impersonation-bar .button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Ljuska se skracuje za visinu trake samo tamo gde uopste ima fiksnu visinu —
   na racunaru. Ispod 900px ljuska je `height: auto` i skroluje se cela strana,
   pa bi fiksna visina ovde secla sadrzaj.

   Zasto `@media`, a ne oslanjanje na mobilni blok: `@media` ne donosi
   specificnost. `body.impersonating .app-shell` je (0,2,1) i tuce
   `.app-shell { height: auto }` (0,1,0) iz `@media (max-width: 900px)`, bez
   obzira na redosled. Izmereno 22.09.2026. nad v1.0.26 na 390x844: ljuska je
   ostajala 844px, bocni meni se sabijao sa 467 na 44px, a njegov sadrzaj
   (184px, `overflow: visible`) ispadao preko zaglavlja i naslova ekrana —
   ime korisnika se stampalo preko reci „Prodavnica". */
@media (min-width: 901px) {
  body.impersonating .app-shell {
    height: calc(100vh - var(--impersonation-bar-h));
  }
}

.impersonation-note {
  border-left: 3px solid var(--warn);
  color: var(--warn);
  font-weight: 600;
}

@media (max-width: 700px) {
  :root {
    --impersonation-bar-h: 46px;
  }

  /* Na 375px ne staje ceo uvod, a ime kupca je jedino sto se ne sme skratiti:
     „Gledate portal kao Nikola Nik..." ne kaze ciji je portal otvoren.
     Zato na telefonu ostaje „Kao Nikola Nikolic", a druga linija se sklanja. */
  .impersonation-text span {
    display: none;
  }

  .impersonation-text strong::before {
    content: "Kao ";
  }
}

/* ——— Skener bar koda ———
   Pun ekran preko portala. Kamera stoji iza, a rezultat dolazi kao list sa dna:
   po mokapu se kamera NE zatvara posle pogotka, jer se u radnji skenira dvadeset
   artikala zaredom. Dugme za rucni unos stoji na samom ekranu, ne u podmeniju. */
body.scanner-open {
  overflow: hidden;
}

.scanner {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #05070b;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scanner-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.scanner-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nisan: pravougaonik u sredini, u odnosu 2:1 kao i sam bar kod. */
.scanner-frame {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: min(78vw, 420px);
  aspect-ratio: 2 / 1;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(5, 7, 11, 0.45);
}

.scanner-top,
.scanner-hint,
.scanner-bottom,
.scanner-sheet {
  position: relative;
  z-index: 1;
}

.scanner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
}

.scanner-close {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.scanner-hint {
  margin: 0 16px;
  text-align: center;
  font-size: 13.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.scanner-hint p {
  margin: 0 0 4px;
}

.scanner-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
}

.scanner-bottom .button {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.scanner-count {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* List sa rezultatom. Ne prekriva ceo ekran: kamera se vidi iza, pa je jasno da
   skeniranje nije prekinuto. */
.scanner-sheet {
  background: var(--panel);
  color: var(--ink);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 72vh;
  overflow-y: auto;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
}

.scanner-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 10px;
}

.scanner-label.ok {
  color: #1f8a4c;
}

.scanner-label.warn {
  color: var(--warn);
}

.scanner-label.bad {
  color: #b23b23;
}

.scanner-note {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.scanner-error {
  color: #b23b23;
}

.scanner-loading {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}

.scanner-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}

.scanner-hit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scanner-hit-meta {
  font-size: 12px;
  color: var(--muted);
}

/* Pravilo pakovanja mora da stoji PRE dodavanja: ako je korak 4, skeniranje
   jednog komada dodaje 4, i to kupac mora da vidi na ekranu. */
.scanner-hit-rule {
  font-size: 12px;
  color: var(--warn);
  font-weight: 600;
}

.scanner-hit-price {
  font-weight: 700;
  white-space: nowrap;
}

.scanner-hit .quantity-stepper {
  grid-column: 1 / -1;
  justify-self: start;
}

.scanner-actions {
  display: grid;
  gap: 8px;
}

.scanner-choices {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.scanner-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.scanner-choice:hover {
  border-color: var(--brand);
}

.scanner-choice-name {
  font-weight: 600;
}

.scanner-choice-meta {
  font-size: 12px;
  color: var(--muted);
}

.scanner-search {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.scanner-search label {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.scanner-results:empty {
  display: none;
}

/* Dugme skenera uz pretragu i uz polje bar koda u obrascu artikla. */
.scan-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.field-with-scan {
  display: flex;
  gap: 8px;
  align-items: center;
}

.field-with-scan input {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 620px) {
  /* Na telefonu ostaje sama ikona: red pretrage je i bez teksta pun. */
  .scan-button-text {
    display: none;
  }
}

/* Uputstvo stoji pri dnu, ispod nisana, i sklanja se cim se otvori list sa
   rezultatom — inace pada preko oba. */
.scanner-hint {
  margin-top: auto;
  margin-bottom: 10px;
  background: rgba(5, 7, 11, 0.55);
  border-radius: 10px;
  padding: 10px 14px;
}

.scanner.scanner-busy .scanner-hint {
  display: none;
}

/* Kad kamere nema (iPhone, ili odbijena dozvola), prazan nisan na crnom ekranu
   samo zbunjuje — sklanja se, a razlog stoji u listu iznad polja za unos. */
.scanner.scanner-no-camera .scanner-stage {
  display: none;
}

/* ——— v0.9.70: doterivanje po nalazu sa telefona ———
   Nalaz i mokapi: docs/b2b-mobilni-nalaz.html i docs/b2b-mobilni-mokap.html.
   Sve ispod je natpis, velicina ili redosled — nijedna nova funkcija. */

/* Oznake iznosa u korpi. Na sirokom ekranu ih nosi zaglavlje tabele, pa su
   ovde sakrivene.

   Na telefonu zaglavlja nema, pa su do v0.9.98 bile prikazane — dva gola broja
   (cena i zbir stavke) su inace nerazlucivi. Od v0.9.99 tu ulogu nosi racun uz
   iznos („6 × 1.164,00"), koji kaze isto u jednom redu, pa su natpisi sakriveni
   i na telefonu. Valuta uz iznos je i dalje izuzetak: nju mobilni blok vraca. */
.cell-tag,
.cart-table .money-value small,
.cart-table .line-total small {
  display: none;
}

/* Sekundarno dugme je bilo #111827 — crna koja nije iz palete portala i tuce
   se sa bojom firme. Sada je belo sa okvirom, kao i ostala sporedna dugmad. */
.button.secondary {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.button.secondary:hover {
  background: var(--panel-soft);
  border-color: var(--brand);
  color: var(--brand);
}

@media (max-width: 620px) {
  /* Natpisi „cena po komadu" i „ukupno za stavku" su ovde do v0.9.98 bili
     vidljivi, jer zaglavlja tabele na telefonu nema. Od v0.9.99 ih zamenjuje
     racun uz iznos („4 × 1.664,00"), pa su sakriveni u bloku stavke korpe
     iznad. Pravilo koje ih je pokazivalo je uklonjeno, a ne prepravljeno: dva
     pravila iste specificnosti za isti natpis su se inace gazila po redosledu
     u fajlu. */

  .cart-table .money-value small,
  .cart-table .line-total small {
    display: inline;
    font-size: 11px;
    color: var(--muted);
  }

  /* Dodirne mete. Mereno na produkciji v0.9.67: dugmad kolicine 32x40, glavna
     dugmad 36 px visine. Preporuka je 44 px, i na 375 px se razlika oseti. */
  .quantity-stepper {
    grid-template-columns: 44px 1fr 44px;
  }

  .quantity-stepper button {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .quantity-stepper input {
    height: 44px;
  }

  .shop-table .cell-actions .button.icon-only:not([data-add]):not([data-wishlist-add]) {
    min-width: 44px;
  }

  .shop-table .cell-actions .button,
  .quick-row .button,
  .cart-confirm,
  .customer-cart-actions .button,
  .auth-card .button {
    min-height: 44px;
  }

  /* Kvacica „Zapamti me" je bila 16x16; sada je ceo red meta za prst. */
  .check-row,
  .remember-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
  }

  .check-row input[type="checkbox"],
  .remember-option input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: none;
  }

  /* Prvi ekran kupca: do v0.9.69 je sest plocica zauzimalo 388 px od 812, pa je
     prvi artikal pocinjao na 551 px — ispod ivice ekrana. Roba ide gore, a
     plocice postaju jedan red precica. Na sirokom ekranu ostaje kako je bilo. */
  body.customer-portal #view {
    display: flex;
    flex-direction: column;
  }

  body.customer-portal .dashboard-store {
    order: 1;
  }

  /* Precice ispod robe su uklonjene u v1.0.2.
     U v0.9.69 su plocice sa prvog ekrana pomerene ispod prodavnice, da roba ide
     gore — tada je donja traka imala samo cetiri odredista i fioka „Jos" jos
     nije postojala. Danas svih sest vodi tamo gde vodi i traka: „Porudzbine" su
     u traci, a „Moja omiljena lista", „Ponude / akcije", „Katalozi" i profil
     („Adrese", „Detalji naloga") u fioci „Jos". Red pilula ispod artikala je
     time postao drugi meni za isto, koji jos i preseca kraj spiska artikala.
     Na racunaru plocice ostaju — tamo su prvi ekran, a ne dodatak. */
  body.customer-portal .customer-dashboard-grid {
    display: none;
  }

  body.customer-portal .customer-dashboard-grid::-webkit-scrollbar {
    display: none;
  }

  body.customer-portal .customer-dashboard-grid .dashboard-tile {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 9px 14px 9px 10px;
    gap: 8px;
    border-radius: 999px;
    white-space: nowrap;
  }

  body.customer-portal .customer-dashboard-grid .tile-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }

  body.customer-portal .customer-dashboard-grid .dashboard-tile strong {
    font-size: 12.5px;
    font-weight: 600;
  }

  /* Poruka „Dodato u korpu" je stajala na 92 px od dna i pokrivala glavno dugme
     iznad donje trake. Podignuta je iznad oba. */
  .app-toast {
    bottom: 150px;
  }
}

/* ——— v0.9.72: liste, pretraga dok se kuca i dugme „nazad" ———
   Nalaz sa telefona: porudzbine i omiljena lista su bile gole tabele, pa se na
   375 px morala pomerati u stranu da bi se videla cena. Sada obe imaju isti
   kartican oblik koji prodavnica i korpa vec koriste. */

/* Dugme za diktiranje stoji uz skener. Dok slusa, pulsira — jedini znak da
   mikrofon radi, jer browser svoj pokazivac drzi u traci adrese. */
.dictate-button.slusa {
  border-color: var(--brand);
  color: var(--brand);
  animation: dictate-puls 1.1s ease-in-out infinite;
}

@keyframes dictate-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 111, 235, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(31, 111, 235, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dictate-button.slusa {
    animation: none;
  }
}

/* Brojac uz pretragu kupaca: „7 od 214 kupaca". Bez njega admin ne zna da li
   prazan spisak znaci „nema pogodaka" ili „nesto nije ucitano". */
.customer-search-count {
  font-size: 13px;
  white-space: nowrap;
}

/* Meni „⋯" u redu tabele. Do v1.0.24 su „Uđi kao kupac", „Odbij" i brisanje
   stajali kao ravnopravna dugmad uz „Detalji" — pet kontrola u jednom redu, od
   kojih dve nepovratne. */
.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: white;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}

/* Bez ovoga Safari i stariji WebKit crtaju trougao ispred sadrzaja. */
.row-menu-toggle::-webkit-details-marker {
  display: none;
}

.row-menu-toggle:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.row-menu[open] .row-menu-toggle {
  border-color: var(--brand);
  color: var(--brand);
}

.row-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

/* js/main.js (v1.0.166) ga pri otvaranju meri i stavlja fiksno uz dugme, pa ga
   ne sece `overflow` modala ni tabele. Do tog trenutka je skriven: `toggle`
   stize posle prvog crtanja, pa bi inace jedan kadar bljesnuo na starom mestu. */
.row-menu[open] > .row-menu-list:not(.fiksno) {
  visibility: hidden;
}

.row-menu-list.fiksno {
  position: fixed;
  right: auto;
  z-index: 1200;
}

.row-menu-item {
  border: none;
  background: none;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.row-menu-item:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.row-menu-item.danger {
  color: #b23b23;
}

.row-menu-item.danger:hover {
  background: #fbeeea;
  color: #8f2d18;
}

/* Omotac tabele inace prelama vodoravno, a sopstveni skrolport bi isekao meni
   cim se otvori. Na sirokom ekranu skrol i nije potreban; ispod 900 px se
   vraca, jer se tamo tabela stvarno ne uklapa. */
.table-wrap-menu {
  overflow: visible;
}

@media (max-width: 900px) {
  .table-wrap-menu {
    overflow-x: auto;
  }
}

/* Potvrda da je klasa kupca upisana. Stoji uz sam red, a ne kao toast preko
   ekrana, jer admin menja klasu vise kupaca zaredom i treba da vidi koji je
   red prosao. */
.class-saved {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #047857;
}

/* „Ponovi porudzbinu" u pregledu porudzbine. Stoji odmah ispod zaglavlja, jer
   je to najcesci razlog zbog kog kupac uopste otvara staru porudzbinu. */
/* „Ponovi porudzbinu" stoji u redu sa naslovom, unutar zaglavlja modala koje je
   vec lepljivo (position: sticky) — pa dugme ostaje na ekranu i kad kupac
   skroluje dugacku porudzbinu. Ranije je stajalo ispod zaglavlja i pobeglo bi
   gore posle nekoliko stavki, bas kad kupac vidi da mu ta porudzbina treba. */
.modal-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Ikona i tekst u jednom redu: `.button` je blok, pa su se lomili jedno ispod
   drugog cim bi dugme uslo u uzi prostor. */
.repeat-order-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.order-repeat-note {
  font-size: 12.5px;
  margin: -6px 0 12px;
}

@media (max-width: 620px) {
  /* Na telefonu ostaje „Ponovi" uz ikonu — cela recenica bi u redu sa naslovom
     i dugmetom za zatvaranje potisnula broj porudzbine. Puno znacenje nosi
     naslov iznad („Pregled porudzbine") i `title` dugmeta. */
  .repeat-long {
    display: none;
  }

  .repeat-order-button {
    min-height: 44px;
    padding-inline: 11px;
  }

  /* Napomena o cenama ide samo na racunaru: na telefonu je red teksta izmedju
     zaglavlja i stavki, a isto pise u `title` dugmeta. */
  .order-repeat-note {
    display: none;
  }

  /* ——— Spisak porudzbina kao kartice ——— */
  .orders-table,
  .orders-table thead,
  .orders-table tbody,
  .orders-table tr,
  .orders-table th,
  .orders-table td {
    display: block;
  }

  .orders-table thead {
    display: none;
  }

  .orders-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 10px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }

  .orders-table td {
    width: auto !important;
    padding: 0;
    border: 0;
    text-align: left !important;
  }

  .orders-table .cell-number {
    font-weight: 700;
    font-size: 15px;
  }

  .orders-table .cell-status {
    justify-self: end;
  }

  .orders-table .cell-date {
    color: var(--muted);
    font-size: 12.5px;
  }

  .orders-table .cell-total {
    justify-self: end;
    font-weight: 700;
    white-space: nowrap;
  }

  .orders-table .cell-items {
    justify-self: end;
    font-size: 12.5px;
    color: var(--muted);
  }

  /* ——— Adminova kartica porudzbine u tri reda ———
     Do v1.0.29 su celije isle automatskim rasporedom, jedna ispod druge:
     kvadratic, broj, ime, firma, stavke, datum, iznos, padajuca lista statusa
     i dva dugmeta. Izmereno 22.09.2026. na 390x844 — red je bio **307 px**, pa
     ispod menija, alatke i cipova u prvi kadar nije stajala nijedna
     porudzbina, a u pun ekran 2,7. Isti postupak kojim je kupcev red sreden u
     v1.0.15, samo sa tri podatka vise.

     Nacrt i merenje: docs/b2b-saradnik-telefon-mokap.html */
  .orders-table .order-row:not(.order-row-customer) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kvadratic broj   status"
      "kupac     kupac  ukupno"
      "datum     datum  stavke";
    gap: 4px 10px;
  }

  .orders-table .cell-check { grid-area: kvadratic; }
  .orders-table .cell-number { grid-area: broj; }
  .orders-table .cell-customer { grid-area: kupac; min-width: 0; }
  .orders-table .cell-total { grid-area: ukupno; }
  .orders-table .cell-date { grid-area: datum; }
  .orders-table .cell-items { grid-area: stavke; }

  .orders-table .cell-status {
    grid-area: status;
    justify-self: end;
  }

  /* Firma i ime u jednom redu, sa tri tacke kad ne stanu: u kartici od tri reda
     svaki prelom je trecina jednog od njih. Ko je tacno porucio vidi se u
     pregledu, koji se otvara dodirom na red. */
  .orders-table .cell-customer strong,
  .orders-table .cell-customer .muted {
    display: inline;
    font-size: 13px;
  }

  .orders-table .cell-customer .muted::before {
    content: " · ";
  }

  .orders-table .order-row:not(.order-row-customer) .cell-customer {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ko je uneo trebovanje odlazi sa spiska. Izmereno 22.09.2026. na produkciji,
     na 384 px: taj tekst ne staje u celiju (232 px u 173), pa ga `overflow`
     sece **na pola reci i bez tri tacke** — tri tacke vaze za sam tekst
     celije, ne i za ugnezdjen blok. Podatak stoji u pregledu porudzbine, koji
     se otvara dodirom na red; u spisku ostaje samo pilula „Trebovanje", po
     kojoj se na prvi pogled vidi koje porudzbine je uneo tim. */
  .orders-table .order-row:not(.order-row-customer) .order-entered-by-row {
    display: none;
  }

  /* Oznaka „Ukupno" nema sta da objasni — to je jedini iznos u kartici.
     Oznaka „Stavki" ostaje, ali u istom redu sa brojem, jer bi go broj uz
     datum izgledao kao deo datuma. */
  .orders-table .order-row:not(.order-row-customer) .cell-total .cell-tag {
    display: none;
  }

  .orders-table .order-row:not(.order-row-customer) .cell-items .cell-tag {
    display: inline;
    font-size: 11px;
    margin-right: 3px;
  }

  /* Datum i „pre 12 dana" u istom redu — isto kao kod kupca. */
  .orders-table .order-row:not(.order-row-customer) .order-relative {
    display: inline;
    margin-left: 5px;
  }

  /* Padajuca lista statusa i kolona sa dugmadima odlaze: lista stisnuta u
     trecinu reda nije upotrebljiva, a dva dugmeta su trosila cetvrtinu visine
     kartice. Status se vidi kao oznaka, a pregled se otvara dodirom na ceo red
     (js/catalog-modules/products.js). Promena statusa ostaje u pregledu
     porudzbine i u masovnoj traci, koje su obe na telefonu tu. */
  .orders-table .order-row:not(.order-row-customer) .cell-open {
    display: none;
  }

  .orders-table .order-status-chip {
    display: inline-flex;
    font-size: 12px;
    min-height: 22px;
    padding: 2px 8px;
  }

  /* Ceo red je meta, pa mora i da izgleda kao meta. */
  .orders-table .order-row:not(.order-row-customer) {
    cursor: pointer;
  }

  /* ——— Spisak kupaca kao kartice ———
     Jedini admin spisak koji se do v1.0.29 nije prelomio: ostao je tabela od
     sest kolona u kadru od 305 px, pa se vukla postrance (359 px) i zaglavlje
     se lomilo slogovima („FI R", „KLA SA"). Red je bio 473-554 px — jedan
     kupac nije stajao ni u pun ekran. Isti postupak kao kod porudzbina.

     Nacrt i merenje: docs/b2b-saradnik-telefon-mokap.html */
  .customers-table,
  .customers-table thead,
  .customers-table tbody,
  .customers-table tr,
  .customers-table th,
  .customers-table td {
    display: block;
  }

  .customers-table thead {
    display: none;
  }

  .customers-table .customer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "firma   status"
      "pib     klasa"
      "kontakt kontakt"
      "akcije  akcije";
    gap: 4px 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }

  .customers-table td {
    width: auto !important;
    padding: 0;
    border: 0;
    text-align: left !important;
  }

  .customers-table .cell-firma { grid-area: firma; min-width: 0; }
  .customers-table .cell-status { grid-area: status; justify-self: end; }
  .customers-table .cell-pib { grid-area: pib; }
  .customers-table .cell-klasa { grid-area: klasa; justify-self: end; }
  .customers-table .cell-kontakt { grid-area: kontakt; min-width: 0; }
  .customers-table .cell-akcije { grid-area: akcije; margin-top: 4px; }

  .customers-table .cell-firma strong {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Adresa i maticni broj odlaze: u kartici od cetiri reda nose manje od
     mesta koje uzmu, a oba stoje u „Detalji". PIB ostaje — po njemu se kupac
     trazi i po njemu se proverava racun. */
  .customers-table .cell-mesto,
  .customers-table .cell-mb {
    display: none;
  }

  .customers-table .cell-pib {
    font-size: 12.5px;
    color: var(--muted);
  }

  .customers-table .cell-pib::before {
    content: "PIB ";
  }

  /* Ime i e-posta u jednom redu, sa tri tacke kad ne stanu. */
  .customers-table .cell-ime,
  .customers-table .cell-posta {
    display: inline;
    font-size: 12.5px;
  }

  .customers-table .cell-posta::before {
    content: " · ";
  }

  .customers-table .cell-kontakt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Klasa se na telefonu cita, a menja u „Detalji": padajuca lista stisnuta u
     pola reda nije upotrebljiva, a promasen izbor menja cene celoj firmi. */
  .customers-table .cell-klasa .table-field,
  .customers-table .cell-klasa .class-saved {
    display: none;
  }

  .customers-table .klasa-tekst {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
  }

  .customers-table .cell-akcije {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .customers-table .cell-akcije .button {
    flex: 1 1 auto;
    min-height: 40px;
    justify-content: center;
  }

  .customers-table .cell-akcije .row-menu-toggle {
    flex: none;
  }

  .customers-table .status {
    font-size: 11.5px;
    min-height: 22px;
    padding: 2px 8px;
  }

  /* Cipovi ostaju u jednom redu, sa bocnim skrolom — prelamanje na cetiri reda
     gura tabelu ispod ekrana. */
  .order-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .order-chips::-webkit-scrollbar {
    display: none;
  }

  .order-chip {
    flex: none;
    min-height: 36px;
  }

  /* Alatka se sklapa: pretraga i dugme ostaju u redu, period i izvoz padaju
     pod njega. Do v1.0.29 je alatka na 390px bila 146 px visoka, jer su cetiri
     kontrole isle jedna ispod druge. „Novo trebovanje" je na telefonu u donjoj
     traci, pa ga alatka ne ponavlja. */
  .orders-filter-toggle {
    display: inline-flex;
    flex: none;
  }

  .orders-toolbar input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .orders-extra {
    display: none;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .orders-extra.open {
    display: flex;
  }

  .orders-extra #admin-new-order {
    display: none;
  }

  .orders-toolbar #admin-new-order,
  .orders-toolbar #export-orders,
  .orders-toolbar #print-orders {
    flex: 1 1 140px;
    margin-left: 0;
    min-height: 44px;
  }

  /* Na 375 px „Štampaj spisak" sa ikonom ne staje u pola reda (141 px): natpis
     se prelamao i vukao i „Export CSV" sa 44 na 53 px (v1.0.69). */
  .orders-toolbar #print-orders {
    white-space: nowrap;
  }

  .orders-toolbar #print-orders svg {
    display: none;
  }

  /* Lepljenje i raspored masovne trake su od v1.0.64 na jednom mestu, na kraju
     fajla („Masovna traka porudzbina"). Ovde je do tada stajalo `bottom: 8px`,
     pa je traka na telefonu padala ispod donje navigacije. */

  /* Kupceva kartica ide u tri kolone, jer nosi tri podatka manje od adminove
     (nema kupca, kvadratic za oznacavanje ni padajucu listu statusa) i sve
     staje u dva reda iznad dugmadi. Do v1.0.15 je delila raspored sa adminskom
     i trosila 189 px na cetiri podatka; status je uzimao ceo red zbog padajuce
     liste koju kupac nema, a broj stavki mu se uopste nije prikazivao. */
  .orders-table .order-row-customer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "broj   broj   ukupno"
      "datum  stavke status"
      "radnje radnje radnje";
  }

  .orders-table .order-row-customer .cell-number { grid-area: broj; }
  .orders-table .order-row-customer .cell-date { grid-area: datum; }
  .orders-table .order-row-customer .cell-items { grid-area: stavke; justify-self: start; }
  .orders-table .order-row-customer .cell-total { grid-area: ukupno; }
  .orders-table .order-row-customer .cell-open { grid-area: radnje; }

  .orders-table .order-row-customer .cell-status {
    grid-area: status;
    grid-column: auto;
    justify-self: end;
  }

  /* Datum i vreme u jednom redu: u kartici od tri kolone „pre sat vremena"
     ispod datuma lomi visinu reda bez ikakve dobiti. */
  .orders-table .order-row-customer .order-relative {
    display: inline;
    margin-left: 5px;
  }

  /* Oznake „Ukupno" i „Stavki" u kupcevoj kartici nemaju sta da objasne: iznos
     je jedini iznos u redu, a broj stavki stoji uz rec „artikala". */
  .orders-table .order-row-customer .cell-tag {
    display: none;
  }

  /* Nacin isporuke, placanja i status u pregledu porudzbine: na telefonu oznaka
     i vrednost u istom redu. Jedno ispod drugog su tri bloka uzimala 190 px
     iznad tabele sa artiklima — a artikli su ono zbog cega se pregled otvara.
     Mereno 22.09.2026: do tabele je bilo 437 px cak i sa savijenim blokom
     naplate. */
  .order-document-meta {
    gap: 12px;
    padding: 12px 0;
  }

  .order-method-details {
    gap: 6px;
  }

  .order-method-details > div {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }

  .order-method-details span {
    font-size: 11px;
  }

  /* Ikona oka sama u redu kartice ne govori sta radi; ovde ima mesta za rec. */
  .orders-table .cell-open {
    display: flex;
    gap: 8px;
  }

  .orders-table .cell-open .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    /* Dva dugmeta dele red. Osnova je 0, pa bi oba trebalo da dobiju pola —
       ali `min-width: auto` na flex stavci znaci „ne uzi od sopstvenog
       sadrzaja", pa „Poruci ponovo" zadrzi svojih 149 px, a ostatak ide oku.
       To je i dalje tacno ono sto treba: nijedan natpis se ne odseca. */
    flex: 1 1 0;
    width: auto;
    min-height: 44px;
    gap: 8px;
  }

  /* Stampa ostaje ikona: uz nju u istom redu stoji „Pregledaj porudzbinu",
     a dve reci u redu od 375 px se ne citaju. */
  .orders-table .cell-open .button[data-order-print] {
    flex: none;
    width: 44px;
  }

  /* Rec se ubacuje samo oku. Do v1.0.15 je selektor hvatao svako dugme u
     celiji, pa je i dugme za stampu u adminovoj kartici pisalo „Pregledaj
     porudzbinu". */
  .orders-table .cell-open .button[data-order-detail]::after {
    content: "Pregledaj porudžbinu";
    font-size: 13px;
    font-weight: 600;
  }

  /* U kupcevoj kartici dugme deli red sa „Poruci ponovo", pa mu ostaje pola
     sirine: puna recenica se tu odseca, a rec „porudzbinu" ionako ne dodaje
     nista — u kartici se ne gleda nista drugo. */
  .orders-table .order-row-customer .cell-open .button[data-order-detail]::after {
    content: "Pregledaj";
  }

  /* „Poruci ponovo" je na telefonu glavna radnja kartice, pa nosi punu boju;
     u tabeli na racunaru ostaje mirno `ghost` dugme, da stotinu redova ne
     bude stotinu plavih pravougaonika. */
  .orders-table .cell-open .button[data-order-repeat] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
  }

  /* Oznaka „Ukupno" uz iznos: u kartici nema zaglavlja koje bi ga objasnilo. */
  .orders-table .cell-tag,
  .order-items-table .cell-tag {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1px;
    font-weight: 600;
  }

  /* ——— Stavke porudzbine u pregledu, isto kao kartice ——— */
  .order-items-table,
  .order-items-table thead,
  .order-items-table tbody,
  .order-items-table tr,
  .order-items-table th,
  .order-items-table td {
    display: block;
  }

  .order-items-table thead {
    display: none;
  }

  /* Stavka u dva reda, kao na racunu: naziv i ukupno gore, „sifra · kolicina ×
     cena" dole. Do v1.0.130 je svaka stavka bila kartica od ~95 px sa tri
     oznake (KOLICINA / CENA / UKUPNO), pa je ispod statusa stajalo 2,5 stavke
     (mereno 29.09.2026). Nacrt: docs/b2b-admin-telefon-pre-posle.html, odeljak 7. */
  .order-items-table tbody {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }

  .order-items-table tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "naziv naziv naziv ukupno"
      "sifra kolicina cena cena";
    align-items: baseline;
    gap: 1px 6px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
  }

  .order-items-table tr:last-child {
    border-bottom: 0;
  }

  /* Sa `.order-detail-modal`: opste `.order-detail-modal table td` (padding-block
     10px) je jace od golog `.order-items-table td` i stavka je ostajala 95 px. */
  .order-items-table td,
  .order-detail-modal .order-items-table td {
    width: auto !important;
    padding: 0;
    border: 0;
    text-align: left !important;
  }

  .order-items-table .cell-tag {
    display: none;
  }

  .order-items-table .cell-name {
    grid-area: naziv;
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
  }

  .order-items-table .cell-sku {
    grid-area: sifra;
    color: var(--muted);
    font-size: 11.5px;
  }

  .order-items-table .cell-sku:not(:empty)::after {
    content: " ·";
  }

  .order-items-table .cell-qty {
    grid-area: kolicina;
    color: var(--muted);
    font-size: 11.5px;
  }

  .order-items-table .cell-price {
    grid-area: cena;
    color: var(--muted);
    font-size: 11.5px;
  }

  .order-items-table .cell-price::before {
    content: "× ";
  }

  /* Ukupno ide uz desnu ivicu, da se iznosi stavki porede pogledom. */
  .order-items-table td.cell-total {
    grid-area: ukupno;
    font-weight: 700;
    text-align: right !important;
    white-space: nowrap;
  }

  /* Modal pregleda porudzbine ide skoro preko celog ekrana: okvir backdropa je
     na telefonu uzimao 48 px sirine koja fali sadrzaju. */
  .modal-backdrop {
    padding: 8px;
  }

  .order-detail-modal {
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    padding: 14px;
  }

  /* Od v1.0.24 u redu stoje samo polje, skener i mikrofon — kolicina je otisla
     na karticu nadjenog artikla, a „Pronadji" ide ispod, preko cele sirine. Red
     zato vise ne mora da se lomi: tri elementa staju i na 375 px. */
  .quick-sku-row input:first-child {
    min-height: 44px;
  }

  .quick-sku-row .button {
    min-height: 44px;
  }

  /* Dugme za dodavanje nosi i iznos, pa na uskom ekranu ide u svoj red ispod
     brojaca — inace se „Dodaj u korpu · 8.498,05" secka. */
  .quick-hit-action {
    grid-template-columns: 1fr;
  }

  .quick-hit-add {
    grid-column: 1;
    grid-row: auto;
    margin-top: 4px;
  }

  /* Pretraga sada krece dok se kuca, pa dugme „Pretrazi" na telefonu samo uzima
     sirinu polju — u redu ionako stoje jos skener i mikrofon. Enter i dalje radi. */
  body.customer-portal .toolbar #search-button {
    display: none;
  }

  /* Dugme „Dodaj u korpu" u omiljenoj listi nosi i rec, isto kao u prodavnici. */
  .shop-table .cell-actions .button.icon-only[data-wishlist-add]::after {
    content: "Dodaj u korpu";
    font-size: 13px;
    font-weight: 600;
  }
}

/* ——— Kategorije artikala ———
   Preimenovanje i spajanje se otvaraju u samom redu tabele, pa obe forme dele
   isti red: polje ili padajuci meni, pa „Sacuvaj" i „Odustani". Na telefonu se
   red lomi u kolonu, jer tri elementa u nizu na 375 px isteraju tabelu u
   vodoravno pomeranje. */
.category-new {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.category-new .field {
  flex: 1 1 240px;
  margin: 0;
}

.category-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.category-inline label {
  margin: 0;
  font-weight: 600;
}

.category-inline input,
.category-inline select {
  flex: 1 1 180px;
  min-width: 140px;
}

.cell-category-actions {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .category-inline {
    align-items: stretch;
    flex-direction: column;
  }

  .category-inline .button {
    min-height: 44px;
  }
}

/* ——— Izgled prodavnice: cetiri gustine prikaza ———

   Prodavnica i dalje salje istu <table class="shop-table"> iz productTable();
   menja se samo CSS koji je raspodjeljuje. Isti postupak koji mobilni prikaz
   (@media max-width: 620px) koristi od v0.9.70: tabela ide u display:block, a
   red postaje kartica preko grid-template-areas.

     list      tabela sa slicicom 46 px — izgled koji portal ima od pocetka
     large     isti raspored, slika 96 px
     grid      mreza kartica, cetiri u redu na sirokom ekranu
     showcase  izlog, dve kartice u redu

   Atribut stoji na #products-table (.table-wrap). Sve ispod vazi tek od 621 px:
   na telefonu prelom u kartice vec postoji i ne sme da se duplira. */

@media (min-width: 621px) {

  /* — large: isti raspored, krupnija slika — */

  .table-wrap[data-prikaz="large"] .shop-table th:nth-child(1),
  .table-wrap[data-prikaz="large"] .shop-table td:nth-child(1) {
    width: 112px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="large"] .shop-table .thumb-placeholder {
    width: 96px;
    height: 96px;
  }

  .table-wrap[data-prikaz="large"] .shop-table td {
    padding-block: 10px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .product-title-link {
    font-size: 15px;
  }

  /* — grid i showcase: tabela postaje mreza kartica — */

  .table-wrap[data-prikaz="grid"] .shop-table,
  .table-wrap[data-prikaz="grid"] .shop-table tbody,
  .table-wrap[data-prikaz="grid"] .shop-table tr,
  .table-wrap[data-prikaz="grid"] .shop-table td,
  .table-wrap[data-prikaz="showcase"] .shop-table,
  .table-wrap[data-prikaz="showcase"] .shop-table tbody,
  .table-wrap[data-prikaz="showcase"] .shop-table tr,
  .table-wrap[data-prikaz="showcase"] .shop-table td {
    display: block;
  }

  /* Zaglavlje nosi nazive kolona kojih u kartici nema. */
  .table-wrap[data-prikaz="grid"] .shop-table thead,
  .table-wrap[data-prikaz="showcase"] .shop-table thead {
    display: none;
  }

  .table-wrap[data-prikaz="grid"] .shop-table tbody,
  .table-wrap[data-prikaz="showcase"] .shop-table tbody {
    display: grid;
    gap: 14px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table tbody {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  }

  .table-wrap[data-prikaz="showcase"] .shop-table tbody {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }

  .table-wrap[data-prikaz="grid"] .shop-table tr,
  .table-wrap[data-prikaz="showcase"] .shop-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "slika    slika"
      "naziv    naziv"
      "kategorija kategorija"
      "zaliha   zaliha"
      "cena     cena"
      "kolicina akcije";
    align-content: start;
    align-items: center;
    gap: 7px 10px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }

  /* Red naziva nosi visak visine, pa cena i kontrole stoje na dnu kod svake
     plocice. Bez ovoga su svi redovi `auto` i slazu se odozgo: artikal sa
     redom „pakovanje" ima celiju imena od 56 px umesto 38, pa mu kontrole
     stoje 18 px nize od susednih. Mereno na produkciji 22.09.2026 nad v1.0.3 —
     rezerva do dna je tada padala sa 31 px na 13, a plocica ima `padding: 12px`,
     dakle jos jedan sitan red i kontrole izlaze iz okvira.

     Telefon isti kvar resava stalnim visinama (v1.0.3, `@media max-width: 620px`).
     Ovde ne moze isto: stalna visina sece naziv, sto je prihvatljivo na plocici
     od 97 px, ali ne i na 228 px gde pun naziv staje.

     Vazi i za `showcase`. Do v1.0.12 je ovde stajalo da u izlogu raskoraka nema
     — netacno: tamo je bio i veci nego u mrezi, jer izlog uz „pakovanje" pokazuje
     i kategoriju. Mereno 22.09.2026 nad v1.0.12, sest artikala na 1400 px: u
     mrezi 0 px razlike, u izlogu 38 px — kartica sa pravilom pakovanja nosila je
     unos kolicine 38 px nize od susednih u istom redu. Sa ovim pravilom 0 px, a
     kontrole ostaju unutar kartice. Nacrt i mere: docs/b2b-pogledi-mokap.html */
  .table-wrap[data-prikaz="grid"] .shop-table tr,
  .table-wrap[data-prikaz="showcase"] .shop-table tr {
    grid-template-rows: auto 1fr repeat(4, auto);
  }

  /* Sirine kolona iz table-layout: fixed ovde nemaju smisla — svaka celija je
     red kartice. Bez ovoga se naziv artikla stisne na sirinu kolone. */
  .table-wrap[data-prikaz="grid"] .shop-table td,
  .table-wrap[data-prikaz="showcase"] .shop-table td {
    width: auto !important;
    max-width: none !important;
    padding: 0;
    border: 0;
    text-align: left !important;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .cell-image,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-image { grid-area: slika; }
  .table-wrap[data-prikaz="grid"] .shop-table .cell-name,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-name { grid-area: naziv; }
  .table-wrap[data-prikaz="grid"] .shop-table .cell-category,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-category { grid-area: kategorija; }
  .table-wrap[data-prikaz="grid"] .shop-table .cell-stock,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-stock { grid-area: zaliha; }
  .table-wrap[data-prikaz="grid"] .shop-table .cell-price,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-price { grid-area: cena; }
  .table-wrap[data-prikaz="grid"] .shop-table .cell-qty,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-qty { grid-area: kolicina; justify-self: start; }
  .table-wrap[data-prikaz="grid"] .shop-table .cell-actions,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-actions { grid-area: akcije; justify-self: end; }

  /* Kategorija u mrezi uzima ceo red kartice, a kupac je vec bira pretragom.
     U izlogu ostaje: tamo kartica ima mesta i opis pomaze. */
  .table-wrap[data-prikaz="grid"] .shop-table .cell-category {
    display: none;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .cell-category {
    font-size: 12px;
    color: var(--muted-soft);
  }

  /* Slika nosi karticu: puna sirina, fiksna visina da se kartice u redu
     poravnaju i kad su fotografije raznih proporcija. */
  .table-wrap[data-prikaz="grid"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="grid"] .shop-table .thumb-placeholder,
  .table-wrap[data-prikaz="showcase"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="showcase"] .shop-table .thumb-placeholder {
    width: 100%;
    height: 150px;
    display: block;
    margin: 0;
    float: none;
    object-fit: contain;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="showcase"] .shop-table .thumb-placeholder {
    height: 260px;
  }

  /* Slika je u dugmetu, a dugme se siri samo do sadrzaja: `width: 100%` na
     slici je zato bila sirina same fotografije, i uspravna (cips, flasa) je
     stajala uz levu ivicu — 189 od 326 px u izlogu, 115 od 230 u mrezi.
     Od v1.0.72 (predlog B) dugme je preko cele sirine, svaka kartica ima isti
     okvir, fotografija je u sredini, a prazno oko nje je svetla podloga.
     Nacrt: docs/b2b-izlog-slike-i-oznake.html. */
  .table-wrap[data-prikaz="grid"] .shop-table .product-image-link,
  .table-wrap[data-prikaz="showcase"] .shop-table .product-image-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* „Veca slika": dugme je imalo podrazumevani `padding` pregledaca (8 px), pa
     je oznaka V2, koja stoji uz ivicu dugmeta, virila 3 px levo od slike. */
  .table-wrap[data-prikaz="large"] .shop-table .product-image-link {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="showcase"] .shop-table .product-thumb {
    background: var(--panel-soft);
  }

  .table-wrap[data-prikaz="grid"] .shop-table .thumb-placeholder,
  .table-wrap[data-prikaz="showcase"] .shop-table .thumb-placeholder {
    font-size: 11px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .product-title-link,
  .table-wrap[data-prikaz="showcase"] .shop-table .product-title-link {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    text-align: left;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .product-title-link {
    font-size: 16px;
  }

  /* Cena u jednom redu, isto kao na telefonu: cenovnik, tvoja cena i rabat
     jedno uz drugo. Jedno ispod drugog uzimalo bi tri reda kartice. */
  .table-wrap[data-prikaz="grid"] .shop-table .price-stack,
  .table-wrap[data-prikaz="showcase"] .shop-table .price-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .price-net {
    font-size: 17px;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .price-net {
    font-size: 20px;
  }

  /* Kolicina ostaje u kartici. Ako bi se sklonila u detalj artikla, prodavnica
     bi prestala da bude B2B alat — kupac koji narucuje 40 stavki bi se vratio
     na spisak i vise nikad ne bi probao drugi prikaz.

     Sirina se daje KOLONI steppera, nikad samom polju: polje sire od svoje
     kolone prelazi preko dugmeta „+", a `overflow: hidden` na stepperu odseca
     njegovu desnu ivicu — pa linija izmedju broja i plusa nestane. Ista greska
     je vec bila popravljena u v0.9.70 (v. komentar uz `.quantity-stepper`), pa
     se ovde vratila kao `width: 72px` na `.qty-input`. */
  .table-wrap[data-prikaz="grid"] .shop-table .quantity-stepper,
  .table-wrap[data-prikaz="showcase"] .shop-table .quantity-stepper {
    grid-template-columns: 32px 72px 32px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .row-packaging,
  .table-wrap[data-prikaz="showcase"] .shop-table .row-packaging {
    display: block;
  }
}

/* — Izbor izgleda: jedno dugme u zaglavlju, uz korpu —
   Do v0.9.89 su cetiri ikone stajale u traci sa pretragom. Izgled se bira
   retko, a kroz tu traku kupac prolazi svaki dan, pa je ostalo jedno dugme sa
   ikonom trenutnog izgleda; izbor se otvara na dodir. Markup pravi
   prekidacIzgleda() u js/catalog-modules/products.js, a mesto za njega drzi
   zaglavlje u js/portal.js. */

.topbar-layout-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-layout-wrap:empty {
  display: none;
}

.shop-layout-trigger.active,
.shop-layout-trigger[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand);
}

.shop-layout-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 1100;
  width: 226px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.shop-layout-menu[hidden] {
  display: none;
}

.shop-layout-menu-head {
  padding: 5px 9px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.shop-layout-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.shop-layout-menu button:hover {
  background: var(--panel-soft);
}

.shop-layout-menu button.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

/* Kvacica uz izabrani izgled: boja sama ne kaze da je to trenutno stanje, a
   ovo je meni u koji se ulazi retko — kupac mora da vidi odakle krece. */
.shop-layout-menu button.active::after {
  content: "✓";
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
}

.shop-layout-menu .lucide-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Na telefonu izbor ne visi ispod dugmeta nego sedne uz donju ivicu: palac je
   tamo, a i sirine ima za ceo naziv izgleda. */
@media (max-width: 620px) {
  .shop-layout-menu {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    width: auto;
    padding: 9px;
    border-radius: 14px;
  }

  .shop-layout-menu button {
    min-height: 48px;
    font-size: 15px;
  }
}

.shop-layout-choices {
  gap: 6px;
}

small.warn {
  color: var(--warn);
}

.shop-layout-default {
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 14px;
}

/* ——— Pretraga po izgovoru ———
   Traka iznad rezultata kada tacan pogodak ne postoji, pa su artikli nadjeni
   po tome kako zvuce. Boja je „paznja", ne „greska": rezultati jesu tu, samo
   nisu sigurni. */

.search-note {
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 13.5px;
}

/* Izbor artikla u brzoj listi: uvodna recenica i spisak pogodaka. Svaki je
   dugme preko celog reda — naziv artikla zna da ima pedeset znakova, a na
   telefonu se bira prstom. Slika i cena su u redu jer se dva pakovanja istog
   artikla po samom nazivu ne razlikuju. */

.quick-choice-lead {
  margin: 10px 0 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.quick-choice {
  display: grid;
  gap: 6px;
}

.quick-choice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.quick-choice-item:hover {
  border-color: var(--brand);
}

.quick-choice-thumb {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel-soft);
}

.quick-choice-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quick-choice-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.quick-choice-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.quick-choice-meta {
  color: var(--muted);
  font-size: 12px;
}

.quick-choice-price {
  flex: none;
  text-align: right;
}

.quick-choice-rest {
  display: block;
  margin: 8px 0 0;
  font-size: 12.5px;
}

/* Artikli iz ponude koji vise nisu aktivni: stoje odvojeno od spiska za izbor,
   da se ne pomesaju sa ponudjenima, ali ostaju stiklirani da ih izmena ne
   izbaci iz ponude bez pitanja. */
.offer-inactive-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--panel-soft);
}

.offer-inactive-note p {
  margin: 0 0 6px;
  font-size: 13px;
}

.offer-inactive-note label {
  display: block;
  font-size: 13px;
}

/* ——— Trebovanje za kupca ———
   Traka deli izgled sa „Uđi kao kupac" (ista visina, isti raspored), ali drugu
   boju: narandžasta znači „gledaš tuđim očima i ništa ne možeš", plava znači
   „radiš svojim rukama za tuđi račun". Dve različite stvari ne smeju da izgledaju
   isto — komercijalista u toku dana vidi obe. */
.staff-order-bar {
  height: var(--impersonation-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(180deg, #123a7a, #0c2a5c);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.staff-order-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.staff-order-text strong {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Direktno dete, ne bilo koji `span`: druga linija od v1.0.28 u sebi nosi
   imenovane delove (uvod, klasa, PIB) koje telefon gasi pojedinacno. */
.staff-order-text > span {
  font-size: 12px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-order-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.staff-order-bar .button {
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.staff-order-bar .button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Isto pravilo i isti razlog kao kod `body.impersonating .app-shell` —
   vidi komentar tamo. Obe trake stoje iznad ljuske i obe su lomile telefon. */
@media (min-width: 901px) {
  body.staff-ordering .app-shell {
    height: calc(100vh - var(--impersonation-bar-h));
  }
}

/* Ekran izbora kupca */
.pick-search {
  width: 100%;
  margin: 12px 0 14px;
}

.pick-head,
.pick-row {
  display: grid;
  grid-template-columns: 1fr 140px 150px 120px;
  gap: 10px;
  align-items: center;
}

.pick-head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 6px;
}

.pick-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.pick-row.selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.pick-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pick-main strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-action {
  text-align: right;
}

/* Kartica kupca na ekranu podataka za isporuku */
.staff-order-customer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
}

.staff-order-customer-card .muted {
  display: block;
  font-size: 12.5px;
}

.order-source-pill {
  margin-top: 4px;
}

.order-entered-by {
  margin-top: 6px;
  font-weight: 600;
}

@media (max-width: 700px) {
  /* Na telefonu traka mora da stane u dva reda: ime firme i klasa cena.
     Do v1.0.27 je odlazila cela druga linija, pa je traka pisala samo
     „MAXI DOO" — a klasa je podatak zbog kog traka i postoji: cena procitana
     naglas bez nje je pogodak u prazno.

     Od v1.0.29 dugmad trake su na telefonu u donjoj traci („Kupac", „Izadji"),
     pa oslobodjena sirina prima i PIB. Odlazi samo uvod „cene klase", koji ne
     nosi podatak. */
  .staff-order-prefix,
  .staff-order-klasa-uvod {
    display: none;
  }

  .staff-order-actions .button {
    padding: 6px 10px;
    font-size: 12px;
  }

  .pick-head {
    display: none;
  }

  .pick-row {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }

  .pick-class,
  .pick-last {
    font-size: 12px;
  }
}

/* Ko je uneo porudzbinu umesto kupca. U spisku stoji u istom redu sa oznakom
   „Trebovanje" — svaki dodatni red po porudzbini pojede ekran kod 300 redova.
   U pregledu ide odmah uz broj porudzbine; do v1.0.9 je stajalo samo medju
   adresnim redovima naplate, gde se u praksi ne vidi. */
.order-source-line {
  display: block;
  margin-top: 3px;
  line-height: 1.5;
}

/* Ime tece odmah iza oznake, u istom inline toku — flex bi ga kod uske kolone
   prelomio u svoj red, a ustedeti taj red je cela svrha. */
.order-entered-by-row {
  font-size: 12px;
  margin-left: 6px;
}

.order-entered-by {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.0.18 — Pokret
   ═══════════════════════════════════════════════════════════════════════════

   Logika je u js/pokret.js, nacrt sa zivim prikazima u
   docs/b2b-mobilne-animacije.html. Ovde su samo oblici i vremena.

   Animira se iskljucivo `transform`, `opacity` i `clip-path` — sve troje ide na
   GPU. Sirina, visina, `top` i margine traze proracun rasporeda na svakom
   kadru i na jeftinom Androidu se vide kao trzanje.

   Sve sto se ovde doda mora da ima i svoj red u bloku
   `@media (prefers-reduced-motion: reduce)` na kraju ovog odeljka. */

/* ——— 1. Potvrda porudzbine preko celog ekrana ——— */

.order-flash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 0 28px;
  text-align: center;
  color: #ffffff;
  background: #12a05e;
  /* Krug se siri iz dugmeta koje je kupac pritisnuo; JS upisuje --flash-x/y. */
  clip-path: circle(0% at var(--flash-x, 50%) var(--flash-y, 76%));
  transition: clip-path 0.62s cubic-bezier(0.3, 0.85, 0.35, 1);
}

.order-flash.vidi {
  clip-path: circle(140% at var(--flash-x, 50%) var(--flash-y, 76%));
}

/* Sloj se uklanja 420 ms posle sklanjanja, koliko traje skupljanje kruga. U tom
   razmaku zahvalnica je vec nacrtana ispod njega — bez ovoga bi nevidljivi sloj
   pokupio prvi dodir na „Moje porudzbine". */
.order-flash:not(.vidi) {
  pointer-events: none;
}

/* Stranica ispod ne sme da se skroluje dok zeleno stoji. */
body.order-flash-open {
  overflow: hidden;
}

.order-flash-mark {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
}

.order-flash-ring {
  display: block;
  width: 76px;
  height: 76px;
  border: 3px solid rgba(255, 255, 255, 0.34);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: flash-vrti 0.8s linear infinite;
}

@keyframes flash-vrti {
  to { transform: rotate(360deg); }
}

/* Prsten stane cim odgovor stigne — dalje vrtenje bi govorilo da se jos ceka. */
.order-flash.gotovo .order-flash-ring {
  animation: none;
  border-color: rgba(255, 255, 255, 0.55);
}

.order-flash svg {
  position: absolute;
  inset: 0;
  width: 76px;
  height: 76px;
}

.order-flash svg path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Kvacica se iscrtava: puna duzina poteza je sakrivena, pa se otkriva. */
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  transition: stroke-dashoffset 0.38s ease 0.05s;
}

.order-flash.gotovo svg path {
  stroke-dashoffset: 0;
}

.order-flash-title {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
}

.order-flash-note {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.92);
}

.order-flash-order {
  display: inline-block;
  margin: 16px 0 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease 0.34s;
}

.order-flash.gotovo .order-flash-order {
  opacity: 1;
}

/* Naslov i napomena se podignu odozdo tek kad je odgovor tu. */
.order-flash-title,
.order-flash-note {
  transform: translateY(9px);
  opacity: 0.82;
  transition: transform 0.3s ease 0.12s, opacity 0.3s ease 0.12s;
}

.order-flash.gotovo .order-flash-title,
.order-flash.gotovo .order-flash-note {
  transform: none;
  opacity: 1;
}

/* ——— 2. Let u korpu ——— */

.cart-fly {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  z-index: 1900;
  border-radius: 10px;
  background: var(--brand);
  background-size: cover;
  background-position: center;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.32);
  /* Bez ovoga letac presretne sledeci klik na putu do korpe. */
  pointer-events: none;
  opacity: 0;
}

.mobile-tab-badge.kucni,
.topbar-cart-count.kucni,
#topbar-cart-count.kucni {
  animation: bedz-kucni 0.42s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes bedz-kucni {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* ——— 3. Kostur dok se ceka server ——— */

.kostur-red {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.kostur-red .kostur-tekst {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.kostur {
  display: block;
}

/* Kostur mora da lici na spisak koji stize, inace sadrzaj posle njega „skoci".
   Zato iste kolone i isti razmak kao mreza izloga: dve kolone na telefonu
   (`.table-wrap[data-prikaz="grid"] .shop-table tbody` iznad), sire na
   racunaru. */
.kostur:has(.kostur-plocica) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

@media (max-width: 620px) {
  .kostur:has(.kostur-plocica) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
}

.kostur-plocica {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.kostur-blok {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--panel-soft) 8%, var(--bg) 22%, var(--panel-soft) 36%);
  background-size: 600px 100%;
  animation: kostur-sjaj 1.2s linear infinite;
}

.kostur-blok.slika {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex: none;
}

.kostur-plocica .kostur-blok.slika {
  width: 100%;
  height: 84px;
}

.kostur-blok.sirok { width: 62%; }
.kostur-blok.uzak { width: 38%; }
.kostur-plocica .kostur-blok.sirok { width: 88%; }

@keyframes kostur-sjaj {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}

/* ——— 4. Traka koraka koja se puni ——— */

/* Crta izmedju koraka se puni s leva kad se korak predje. Boja se ne menja
   skokom — punjenje je jedini znak da je nesto zavrseno, a on traje 0,45 s. */
.checkout-steps li + li::before {
  background: linear-gradient(to right, #1f8a4c 0 50%, var(--line-strong) 50% 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
}

.checkout-steps li.active + li::before,
.checkout-steps li.done + li::before {
  animation: korak-puni 0.45s ease forwards;
}

/* Druga crta krece malo kasnije, pa se traka puni s leva na desno umesto da
   obe crte krenu u isti cas. Selektor mora da ponovi i `.active`/`.done`: bez
   toga je specificnost manja od pravila iznad, cija skracenica `animation`
   postavlja kasnjenje na nulu — izmereno, delay je ostajao 0 s. */
.checkout-steps li.active + li:nth-child(3)::before,
.checkout-steps li.done + li:nth-child(3)::before {
  animation-delay: 0.1s;
}

@keyframes korak-puni {
  to { background-position: 0 0; }
}

/* ——— 5. Poruka sa „Ponisti" ——— */

.app-toast.sa-povratkom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  overflow: hidden;
}

.app-toast-text {
  min-width: 0;
}

/* „Ponisti" stoji uz desnu ivicu trake, odvojeno od teksta: tako je uvek na
   istom mestu bez obzira koliko je naziv artikla dugacak, pa ga palac nalazi
   bez citanja. `margin-left: auto` cuva to i kada tekst stane u pola trake. */
.app-toast-undo {
  flex: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 6px 2px 6px 12px;
  color: #7fd3a3;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* Linija istice tacno onoliko koliko i poruka: trajanje dolazi iz JS-a, pa se
   dve mere ne mogu razici. */
.app-toast-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #7fd3a3;
  transform-origin: left;
  animation: toast-istice var(--toast-trajanje, 5000ms) linear forwards;
}

@keyframes toast-istice {
  to { transform: scaleX(0); }
}

/* Mis na poruci sa „Ponisti" zaustavlja i traku vremena (v2.0.71, js/ui.js). */
.app-toast.zastala .app-toast-time {
  animation-play-state: paused;
}

/* ——— 6. Prevlacenje reda korpe ulevo ——— */

@media (max-width: 620px) {
  /* Red je na telefonu vec mreza (`display: grid`), pa moze da nosi i
     `position: relative` i `overflow: hidden` — na pravom `<tr>` ni jedno ni
     drugo ne bi radilo. */
  .cart-table tbody tr {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Crveno se ne crta ispod reda nego u prostoru koji red oslobodi klizeci
     ulevo. Time nema drugog sloja koji bi morao da prati pomeraj.

     Bez prevlacenja sirina je nula i od crvenog se ne vidi nista. Do v1.0.19 je
     ovde stajao `padding-right: 14px`, a padding se ne moze sabiti u sirinu nula
     — pa je na desnoj ivici svakog reda korpe stajala crvena crta od 14 px,
     stalno, i kad se nista ne prevlaci. Zato razmak oko teksta daje `place-items`
     i `overflow: hidden`, ne padding. */
  .cart-table tbody tr::after {
    content: "Ukloni";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(0px - var(--prevuci, 0px));
    min-width: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: #b42318;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Pomera se sadrzaj, ne sam red: `tr` mora da ostane na mestu da bi crvena
     traka iza njega imala od cega da se meri. Druga celija je
     `display: contents`, pa njena deca sama ulaze u mrezu — zato i ona ovde. */
  .cart-table tbody tr > td,
  .cart-table tbody tr .cart-product-cell > * {
    transform: translateX(var(--prevuci, 0px));
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  /* Dok prst vuce, pomeraj prati prst bez zaostajanja. */
  .cart-table tbody tr.prevlaci > td,
  .cart-table tbody tr.prevlaci .cart-product-cell > * {
    transition: none;
  }

  .cart-table tbody tr.odlazi {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
}

/* ——— 7. Fioka: detalj artikla klizi odozdo ——— */

.fioka-hvat {
  display: none;
}

@media (max-width: 620px) {
  #product-detail-modal .product-detail-modal {
    height: calc(100% - 34px);
    border-radius: 18px 18px 0 0;
    /* Prevlacenje nadole upisuje --fioka-pomeraj; ulazak ide iz 100%. */
    transform: translateY(var(--fioka-pomeraj, 0px));
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    animation: fioka-ulazi 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    touch-action: pan-y;
  }

  #product-detail-modal .product-detail-modal.prevlaci {
    transition: none;
  }

  /* Detalj vise ne pocinje na samom vrhu ekrana: traka izloga koja viri iznad
     govori da je spisak i dalje tu, ispod — pa detalj deluje kao sloj preko
     prodavnice, a ne kao nova stranica sa koje se kupac mora vracati. */
  #product-detail-modal.modal-backdrop {
    place-items: end stretch;
  }

  .fioka-hvat {
    display: block;
    width: 40px;
    height: 4px;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: var(--line-strong);
    flex: none;
  }

  /* Hvat i zaglavlje moraju da imaju `touch-action: none`. Sa `pan-y` (koji
     fioka nosi zbog skrola sadrzaja) prst koji krene nadole pripada browseru:
     on pocne da skroluje, posalje `pointercancel` i prevlacenje se prekine pre
     nego sto je i pocelo — zato zatvaranje povlacenjem do v1.0.19 nije radilo.
     Sadrzaj ispod i dalje ima `pan-y`, pa se opis artikla skroluje normalno. */
  .fioka-hvat,
  #product-detail-modal .modal-head {
    touch-action: none;
  }
}

@keyframes fioka-ulazi {
  from { transform: translateY(100%); }
}

/* ——— Kome je pokret iskljucen ———
   Sve radi isto — samo odmah. Nijedna grana iznad ne sme da preskoci posao,
   jer bi se tada portal razlicito ponasao za dva kupca. */
@media (prefers-reduced-motion: reduce) {
  .order-flash,
  .order-flash svg path,
  .order-flash-title,
  .order-flash-note,
  .order-flash-order,
  .cart-table tbody tr > td,
  .cart-table tbody tr .cart-product-cell > *,
  #product-detail-modal .product-detail-modal {
    transition-duration: 0.01ms;
  }

  .order-flash-ring,
  .kostur-blok,
  .mobile-tab-badge.kucni,
  #topbar-cart-count.kucni,
  .checkout-steps li.active + li::before,
  .checkout-steps li.done + li::before,
  .app-toast-time,
  #product-detail-modal .product-detail-modal {
    animation: none;
  }

  /* Bez animacije linija koraka mora da bude puna odmah, inace pređeni korak
     izgleda kao nezapocet. */
  .checkout-steps li.active + li::before,
  .checkout-steps li.done + li::before {
    background-position: 0 0;
  }

  /* Traka vremena bez animacije ne sme da stoji puna preko cele sirine kao da
     vreme ne tece — poruka i dalje istice, samo se to ne crta. */
  .app-toast-time {
    display: none;
  }
}

/* Kartice rola na ekranu Korisnici firme (od v1.0.35). Zamenjuju padajucu
   listu od sedam rola: izbor se vidi ceo, i svaka kaze sta nosi. */
.role-cards {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 0;
  border: 0;
}

.role-cards legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
}

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

.role-card {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
}

.role-card:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}

.role-card input {
  flex: none;
  margin-top: 3px;
}

.role-card-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.role-card-body ul {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--ink-soft);
  font-size: 13px;
}

.role-cards-note {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 720px) {
  .role-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ——— Analitika na telefonu: rang liste (v1.0.33) ———
   Svaki red tabele analitike nosi i poslednju celiju `td.an-m` sa istom
   stavkom u obliku rang liste. Na racunaru se ona ne vidi; ispod 620 px se
   vidi SAMO ona. Do v1.0.33 je na telefonu stajala tabela sa racunara stisnuta
   na 316 px: kolone uze od jedne reci, a `overflow-wrap: anywhere` je lomio
   reci slovo po slovo — zaglavlje „Najboljih kupaca" 114 px, ekran 7.215 px.

   Nacrt i merenje: docs/b2b-analitika-telefon-mokap.html */
.an-rang td.an-m,
.an-vise,
.an-status-traka {
  display: none;
}

/* „Kupci koji cute" (v1.0.36): prag ispod naslova i broj dana u boji
   upozorenja — to je broj zbog kog se panel gleda. */
.an-podnaslov {
  margin: -6px 0 10px;
  font-size: 13px;
}

.an-cuti {
  color: var(--warn);
  font-weight: 800;
}

@media (max-width: 620px) {
  /* Snaga portala: dve po dve, kao sporedne kartice (v1.0.174). */
  .cards-snaga {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cards-snaga .metric {
    padding: 10px 12px;
  }

  .cards-snaga .metric strong {
    font-size: 18px;
  }

  /* Kartice: promet preko cele sirine, ostale cetiri dve po dve. Do sada je
     sedam kartica islo jedna ispod druge, 791 px. */
  .cards-glavne,
  .cards-sporedne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
  }

  .cards-glavne .metric,
  .cards-sporedne .metric {
    padding: 10px 12px;
    min-width: 0;
  }

  .cards-glavne .metric:first-child {
    grid-column: 1 / -1;
  }

  .cards-glavne .metric strong,
  .cards-sporedne .metric strong {
    font-size: 18px;
    margin-top: 2px;
    overflow-wrap: normal;
  }

  .cards-glavne .metric:first-child strong {
    font-size: 24px;
  }

  .cards-glavne .metric small,
  .cards-sporedne .metric small {
    font-size: 11px;
  }

  .analytics-grid {
    gap: 12px;
  }

  /* Tabela se rasklapa u blokove, a od celija ostaje samo `an-m`. */
  .an-rang table,
  .an-rang tbody,
  .an-rang tr {
    display: block;
    width: 100%;
  }

  .an-rang thead,
  .an-rang td.an-d {
    display: none;
  }

  .an-rang td.an-m {
    display: block;
    padding: 0;
    border: 0;
  }

  .an-rang tr {
    border-bottom: 1px solid var(--line);
  }

  .an-rang tr:last-child {
    border-bottom: 0;
  }

  /* Prvih pet; ostatak iza dugmeta „Prikazi svih N". */
  .an-skraceno:not(.an-sve) tbody tr:nth-child(n + 6) {
    display: none;
  }

  .an-skraceno:not(.an-sve) tbody tr:nth-child(5) {
    border-bottom: 0;
  }

  .an-vise {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
  }

  /* Stavka: redni broj | naziv | iznos, ispod meta i udeo, pa traka udela. */
  .an-stavka {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: baseline;
    padding: 9px 0;
  }

  .an-rb {
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Naziv se prelama, ne sece (v2.0.92, nalaz testa): u „Traženo, a nije
     bilo" je od naziva artikla ostajalo „Artikal sa prilično dugim naziv…", a
     artikli se razlikuju bas po kraju naziva (gramaza, pakovanje). Isto je bilo
     u svim rang listama analitike — kupci, artikli, kategorije, klase, ulaze a
     ne poručuju. Iznos ostaje u prvom redu (`align-items: baseline`). */
  .an-naziv {
    min-width: 0;
    font-weight: 650;
    font-size: 13.5px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .an-oznaka {
    display: inline-block;
    margin-right: 2px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand-soft, #e8f1ff);
    color: var(--brand-dark, #12408f);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
  }

  .an-iznos {
    font-weight: 700;
    font-size: 13.5px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
  }

  .an-iznos small {
    font-weight: 500;
    font-size: 10.5px;
    color: var(--muted);
  }

  .an-meta {
    grid-column: 2;
    min-width: 0;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  /* „(od toga gratis: 31)" je bilo 9,6 px — `small` u meta redu od 11,5. */
  .an-meta small {
    font-size: 1em;
  }

  .an-udeo {
    grid-column: 3;
    font-size: 11.5px;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .an-traka {
    grid-column: 2 / 4;
    height: 4px;
    margin-top: 2px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
  }

  .an-traka i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--brand);
  }

  /* Statusi: naziv | broj | iznos u jednom redu, ispod trake statusa. */
  /* Spiskovi bez rednog broja (klase, kategorije, bez prodaje, zalihe) idu
     do leve ivice; prazna kolona od 18 px bi ih samo uvukla. */
  .an-stavka.an-bez-broja {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .an-bez-broja .an-rb {
    display: none;
  }

  .an-bez-broja .an-meta {
    grid-column: 1;
  }

  .an-bez-broja .an-udeo {
    grid-column: 2;
  }

  .an-bez-broja .an-traka {
    grid-column: 1 / -1;
  }

  /* Redni broj se ovde gasi, pa kolone nema — naziv je prva kolona. Sa
     praznom kolonom od 0 px naziv je padao bas u nju i nije se video. */
  .an-stavka.an-jedan-red {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 10px;
    padding: 7px 0;
  }

  .an-jedan-red .an-rb {
    display: none;
  }

  .an-jedan-red .an-meta {
    grid-column: 2;
    grid-row: 1;
    font-size: 12.5px;
    text-align: right;
  }

  .an-jedan-red .an-iznos {
    grid-column: 3;
    grid-row: 1;
  }

  .an-tacka {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 3px;
    vertical-align: -1px;
  }

  .an-status-traka {
    display: flex;
    height: 12px;
    margin: 2px 0 8px;
    border-radius: 6px;
    overflow: hidden;
  }

  .an-status-traka i {
    display: block;
    height: 100%;
  }

  /* Prazan panel u jednom redu: naslov i recenica jedno do drugog. Prazna
     kartica od ~200 px je na telefonu cetvrtina ekrana koja ne kaze nista. */
  .analytics-grid .panel:has(> .empty-state.compact) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
    padding: 12px 14px;
  }

  .analytics-grid .panel:has(> .empty-state.compact) h2 {
    margin: 0;
    font-size: 15px;
  }

  .analytics-grid .panel > .empty-state.compact {
    display: block;
    min-height: 0;
  }

  .analytics-grid .panel > .empty-state.compact p {
    margin: 0;
    font-size: 13px;
  }
}

/* Mejlovi o statusu porudzbine (od v1.0.37): napomena ispod prekidaca i
   „Obavesti kupce" u masovnoj traci porudzbina. */
.email-switch-note {
  margin: 10px 0 0;
  font-size: 13px;
}

.orders-bulk-notify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

/* ——— Porudzbina na telefonu (od v1.0.45) ———
   Mere i mokapi: docs/b2b-porudzbina-telefon.html. */

/* ——— Podaci porudzbine B2B (od v1.0.46): isporuka, broj narudzbenice,
   napomena ——— */
.checkout-order-fields {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.checkout-order-fields textarea {
  resize: vertical;
}

.confirm-delivery {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.confirm-note,
.order-customer-note p {
  white-space: pre-line;
}

.order-customer-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}

.order-customer-extra > div {
  display: grid;
  gap: 2px;
}

/* ——— Vise objekata iz iste korpe (od v1.0.49) ———
   Nacrt: docs/b2b-vise-korisnika-i-objekata.html, B1, B2 i B4. */
.delivery-mode {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 10px;
}

.delivery-mode label {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.delivery-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.delivery-mode label > span {
  display: block;
  padding: 9px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.delivery-mode input:checked + span {
  background: var(--brand);
  color: var(--brand-ink);
}

.delivery-mode input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: -4px;
}

/* `.field` je display: grid, a [hidden] gubi od svakog display-a iz stila —
   bez ovoga bi i spisak i kvacice stajali na ekranu u isto vreme. */
.delivery-one[hidden],
.delivery-many[hidden] {
  display: none;
}

.delivery-many {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.delivery-many legend {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.delivery-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}

.delivery-pick:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.delivery-pick input {
  margin-top: 3px;
  flex: none;
}

.delivery-pick span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.delivery-pick small {
  color: var(--muted);
  font-size: 12px;
}

.delivery-many-sum {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ——— Korak 2: izbori levo, zbir desno (v1.0.171) ———
   Nacrt i merenje: docs/b2b-tok-porudzbine-kupac.html. Sekcije idu odozgo
   nadole — racun, kuda ide roba, dostava, placanje — a izbor je plocica cija je
   cela povrsina meta klika. Radio je u njoj, skriven; „izabrano" crta :has(). */
.checkout-sekcija {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
}

.checkout-sekcija > h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.izbor-ploce {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* `display: grid` iznad bi pobedio [hidden] (rezim „vise objekata"). */
.izbor-ploce[hidden] {
  display: none;
}

.izbor-ploca {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
}

.izbor-ploca input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.izbor-ploca > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.izbor-ploca strong {
  font-size: 14px;
  line-height: 1.25;
}

.izbor-ploca small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.izbor-ploca:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.izbor-ploca:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.izbor-ploca.disabled {
  border-style: dashed;
  opacity: 0.6;
  cursor: not-allowed;
}

.izbor-jedini {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.izbor-jedini small {
  color: var(--muted);
  font-size: 12px;
}

/* ——— Korak 2 kompaktno (v1.1.16, docs/b2b-podaci-isporuke-predlog.html) ———
   Objekti su redovi od jednog reda (naziv levo, ulica desno) umesto pločica
   od dva: sa tri objekta i sedištem „Kuda ide roba" je imala 319 px na
   telefonu. Kružić je jedini znak izbora, jer redovi stoje jedan uz drugi. */
.izbor-ploce.izbor-redovi {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.izbor-redovi .izbor-ploca {
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
}

.izbor-redovi .izbor-ploca::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  box-sizing: border-box;
}

.izbor-redovi .izbor-ploca:has(input:checked)::before {
  border: 5px solid var(--brand);
}

/* Naziv objekta se ne sece nikad; adresa staje desno dok ima mesta, a u uskoj
   koloni (1024 px sa bocnim menijem: ~150 px) prelazi u svoj red ispod naziva. */
.izbor-redovi .izbor-ploca > span {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.izbor-redovi .izbor-ploca strong {
  flex: none;
  max-width: 100%;
}

/* Adresa (i opis placanja) staje cela desno ili cela prelazi u drugi red —
   nikad odsecena (v1.2.08, O4). Do tada je osnova od 140 px secla adresu sa
   „…" kad je imala izmedju 140 px i svoje pune sirine: „Sediste firme ·
   Bulevar oslobodjenja 12, Novi Sad" je na 390 px imalo 171 od 177 px. Sa
   osnovom `auto` flex-wrap meri punu sirinu teksta pa ga, kad ne staje, ceo
   spusta ispod naziva. */
.izbor-redovi .izbor-ploca small {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Sekcija sa jednom mogucnoscu (dostava, placanje) je jedan red: naslov
   levo, mogucnost desno, bez okvira — nema sta da se bira. */
.checkout-sekcija:has(> .izbor-jedini) {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.checkout-sekcija > .izbor-jedini {
  padding: 0;
  border: 0;
  background: none;
  text-align: right;
}

.delivery-mode-link {
  justify-self: start;
  min-height: 32px;
  font-size: 13px;
}

.checkout-dodatno > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--brand);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.checkout-dodatno > summary::-webkit-details-marker {
  display: none;
}

.checkout-dodatno[open] > summary {
  margin-bottom: 4px;
}

.checkout-dodatno .field + .field {
  margin-top: 12px;
}

/* PIB i maticni broj kao tekst, ne kao polje (polje je skriveno u obrascu). */
.field-samo-citanje {
  gap: 2px;
}

.field-samo-citanje-natpis {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.field-samo-citanje strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.checkout-order .checkout-lines-fold {
  margin-bottom: 6px;
}

.checkout-order .message {
  margin-top: 14px;
}

.checkout-order .message + .cart-confirm {
  margin-top: 10px;
}

/* Korpa: dostava se od v1.0.171 bira u koraku 2. */
.summary-napomena {
  margin: -4px 0 6px;
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

/* ——— Korak 3 i zahvalnica (v1.0.173) ———
   Tri bloka na potvrdi: kuda ide roba (krupno), dostava i placanje, racun.
   Nacrt: docs/b2b-tok-porudzbine-kupac.html, odeljak 3. */
.confirm-blok {
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.confirm-blok .confirm-head h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.confirm-gde {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}

.confirm-gde strong {
  font-size: 18px;
  line-height: 1.25;
}

.confirm-gde span {
  color: var(--ink-soft);
  font-size: 14px;
}

.confirm-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  margin: 6px 0 0;
  font-size: 14px;
}

.confirm-kv dt {
  color: var(--muted);
}

.confirm-kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.confirm-racun {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.thank-you-isporuka {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  max-width: 420px;
  margin: 20px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  font-size: 14px;
  text-align: left;
}

.thank-you-isporuka dt {
  color: var(--muted);
}

.thank-you-isporuka dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.confirm-objects {
  display: grid;
  gap: 4px;
}

.confirm-object {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}

.confirm-object strong.money-value {
  white-space: nowrap;
}

/* Objekat u spisku porudzbina: kupcu ispod broja, adminu ispod firme. */
.order-object {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  text-align: left;
  white-space: normal;
}

.order-object-name {
  font-weight: 600;
  color: var(--ink-soft);
}

.order-group-pill {
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}

@media (max-width: 620px) {
  /* Na 375 px drugo dugme prekidaca se lomilo u dva reda. Da su kolicine iste
     kaze i recenica ispod kvacica. */
  .delivery-mode .delivery-mode-dodatak {
    display: none;
  }

  /* Adminova kartica ima jedan red za kupca, sa tri tacke. Kad porudzbina ima
     objekat, on staje umesto imena osobe: po njemu se razlikuju porudzbine iz
     iste korpe, a ime je isto na svima. */
  .orders-table .order-row:not(.order-row-customer) .cell-customer.ima-objekat .muted {
    display: none;
  }

  .orders-table .order-row:not(.order-row-customer) .cell-customer .order-object {
    display: inline;
    font-size: 13px;
  }

  .orders-table .order-row:not(.order-row-customer) .cell-customer .order-object::before {
    content: " · ";
  }
}

.order-customer-extra .muted {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Napomena kupca je jedino sto admin mora da procita pre sledeceg koraka. */
.order-customer-note {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  background: var(--panel-soft);
}

.order-customer-note p {
  margin: 0;
}

.delivery-addresses {
  margin-top: 16px;
}

.delivery-address-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
}

.delivery-address-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.delivery-address-list li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Kurir i broj posiljke u pregledu porudzbine, i kupcu i adminu. */
.order-shipment {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 13px;
}

/* Istorija je od v1.0.45 <details>: na racunaru otvorena, na telefonu
   savijena. Naslov i broj unosa stoje u istom redu. */
.order-history > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.order-history > summary::-webkit-details-marker {
  display: none;
}

/* Strelica kao kod „Ispravka statusa": bez nje savijena istorija na telefonu
   ne izgleda kao nesto sto se otvara. */
.order-history > summary::before {
  content: "▸";
  color: var(--muted);
}

.order-history[open] > summary::before {
  content: "▾";
}

.order-history > summary h3 {
  margin: 0 0 6px;
}

.order-history:not([open]) > summary h3 {
  margin-bottom: 0;
}

/* Traka „Za placanje · Dalje" u tri koraka porudzbine. Na racunaru je nema:
   tamo zbir i dugme stoje u desnom panelu. */
.checkout-mobile-bar {
  display: none;
}

@media (max-width: 900px) {
  /* Kupcu i, od v2.0.27 (T2 iz docs/b2b-korpa-telefon-provera.html), i
     komercijalisti u trebovanju. Do tada je komercijalista na istom mestu imao
     traku korpe (`body.staff-ordering .customer-cart-bar`), u koracima
     porudzbine samo sa zbirom, pa je zbir trebovanja ostajao ceo (459 px) sa
     velikim „Dalje" na dnu; korak 2 bio je 1.612 px naspram kupcevih 1.143.
     Sada traka korpe u tri koraka ustupa mesto ovoj, da ne stoje dve. */
  body.staff-ordering:has(#view .checkout-mobile-bar) .customer-cart-bar {
    display: none;
  }

  :is(body.customer-portal, body.staff-ordering) .checkout-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    /* Iznad donje trake, ne preko nje: izmerena visina trake je 58 px, a
       iznos u samu traku ne ide (odluka od 18.09.2026). */
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 39;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-top: 2px solid var(--brand);
    background: var(--panel);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
  }

  :is(body.customer-portal, body.staff-ordering) .checkout-mobile-sum {
    display: grid;
    line-height: 1.2;
  }

  :is(body.customer-portal, body.staff-ordering) .checkout-mobile-sum small {
    color: var(--muted);
    font-size: 11.5px;
  }

  :is(body.customer-portal, body.staff-ordering) .checkout-mobile-sum strong {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
  }

  :is(body.customer-portal, body.staff-ordering) .checkout-mobile-bar .button {
    min-height: 44px;
    padding-inline: 22px;
  }

  /* „Ispravi" umesto sivog „Dalje" kad stavka nema dovoljno (v1.0.134,
     trakaKaziRazlog() u js/cart.js). */
  :is(body.customer-portal, body.staff-ordering) .checkout-mobile-bar .button.ispravi {
    background: #b23b23;
    border-color: #b23b23;
    color: #fff;
  }

  :is(body.customer-portal, body.staff-ordering) .checkout-mobile-bar:has(.ispravi) .checkout-mobile-sum small {
    color: #b23b23;
    font-weight: 600;
  }

  /* Poslednji red sadrzaja ne sme da ostane ispod trake. Razmak pokriva OBE
     trake: ova (62 px) stoji iznad donje (58 px). Do v1.0.175 je bilo 72 px,
     sto je zamenilo 76 px donje trake umesto da se doda na njih — pa se od
     plavog „Posalji porudzbinu" na dnu koraka 3 videlo 12 px od 44. */
  :is(body.customer-portal, body.staff-ordering) #view:has(.checkout-mobile-bar) {
    padding-bottom: calc(58px + 62px + 16px + env(safe-area-inset-bottom, 0px));
  }

  /* Zbir ispod obrasca (v1.2.08, O2 iz docs/b2b-korpa-telefon-pre-posle.html).
     Na racunaru je to kolona desno; na telefonu pada ispod svega i ponavlja
     traku „Za placanje · Dalje" — u koraku 2 bio je 444 px, u korpi 412.
     Ostaje red „Stavke (N) · Prikaži"; obracun se vidi kad se on otvori.
     Veliko dugme se ne crta, ali ostaje u DOM-u: traka klikne bas njega.
     Na potvrdi (korak 3) zbir ostaje ceo — to je poslednji pogled pre slanja. */
  :is(body.customer-portal, body.staff-ordering) .checkout-order:has(#to-confirm) > h2,
  :is(body.customer-portal, body.staff-ordering) .checkout-order:has(#to-confirm) #to-confirm,
  :is(body.customer-portal, body.staff-ordering) .checkout-zbir:has(> .checkout-lines-fold:not([open])) > :not(.checkout-lines-fold) {
    display: none;
  }

  :is(body.customer-portal, body.staff-ordering) .checkout-order:has(#to-confirm) .checkout-lines-fold {
    margin-bottom: 0;
  }

  /* Korpa: obracun ostaje, jer kaze i koliko fali do besplatne dostave;
     naslov, „Za placanje" i „Dalje" su vec u traci. */
  :is(body.customer-portal, body.staff-ordering) .cart-summary > h2,
  :is(body.customer-portal, body.staff-ordering) .cart-summary > .summary-total,
  :is(body.customer-portal, body.staff-ordering) .cart-summary > #go-checkout {
    display: none;
  }

  :is(body.customer-portal, body.staff-ordering) .cart-summary > .cart-print-offer {
    min-height: 36px;
    margin-top: 10px;
  }
}

/* Zavrsen korak na vrhu je dugme nazad (v1.2.08): izgleda kao do sada,
   samo je natpis podvucen na prelaz. */
.step-nazad {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.step-nazad:hover .step-label,
.step-nazad:focus-visible .step-label {
  text-decoration: underline;
}

/* Polje racuna koje fali stoji ispod savijenog reda (v1.2.08, O1). */
.checkout-fali {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f0c9a8;
  border-radius: 10px;
  background: #fff8f2;
}

.checkout-fali-naslov {
  margin: 0 0 8px;
  color: #9a4a12;
  font-size: 13px;
  font-weight: 600;
}

.checkout-fali .field:last-of-type {
  margin-bottom: 0;
}

/* Porudzbina ne moze da se posalje: fali maticni broj ili PIB, koje menja
   samo prodavac (v1.2.10). Crveno, jer se ne resava na ovom ekranu. */
.checkout-zaustavlja {
  border-color: #e4b0a3;
  background: #fbecea;
}

.checkout-zaustavlja .checkout-fali-naslov {
  color: #a5391f;
}

.checkout-zaustavlja p:last-child {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  /* Pregled porudzbine: radnja statusa odmah ispod zaglavlja, pa stavke i
     zbir, pa naplata; stampa na kraju. Do v1.0.45 je adminu redosled bio
     stampa → naplata → status, i „U pripremu" je stajalo na 595 px od 772. */
  .order-detail-modal {
    display: flex;
    flex-direction: column;
  }

  /* Bez ovoga se deca skupljaju da stanu u `max-height` sloja, a .table-wrap
     (kontejner sa skrolom, min-height 0) se skupi na 0 px — tabela stavki
     nestane. Sloj treba da skroluje, a ne da gnjeci sadrzaj. */
  .order-detail-modal > * {
    flex-shrink: 0;
  }

  .order-detail-modal > .modal-head { order: 0; }
  .order-detail-modal > .order-repeat-note { order: 1; }
  .order-detail-modal > .order-status-panel { order: 2; }
  .order-detail-modal > .order-customer-extra { order: 2; }
  .order-detail-modal > .table-wrap { order: 3; }
  .order-detail-modal > .order-invoice-summary { order: 4; }
  .order-detail-modal > .order-document-meta { order: 5; margin-top: 14px; }
  .order-detail-modal > .order-print-bar { order: 6; margin-top: 14px; }

  .order-print-bar .button {
    min-height: 36px;
    padding: 6px 10px;
  }

  /* Dugme sledeceg koraka u redu spiska: 64 × 28 px je bilo malo za prst. */
  .orders-table .cell-status .button {
    min-height: 40px;
  }
}

/* ——— Štampa analitike (v1.0.45) ———
   Naslov bloka dobija ikonicu štampača u desnom uglu, kao u DPX CRM
   izveštajima; „Štampaj" gore otvara izbor blokova. Sam papir se ne stilizuje
   ovde — ima svoj stil u analitika-stampa.js i štampa se iz <iframe>. */
.an-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.an-glava h2 {
  margin: 0;
  min-width: 0;
}

.an-glava + .an-podnaslov {
  margin-top: -4px;
}

.an-stampaj-blok {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink-soft);
}

/* Na telefonu se pojedinacan blok ne stampa: devet dugmadi od 30 px u
   zaglavljima blokova, a stampa sa telefona se ne koristi. Stampa cele
   analitike ostaje (29.09.2026). */
@media (max-width: 620px) {
  .an-stampaj-blok {
    display: none;
  }
}

.an-stampaj-blok .lucide-icon,
.an-stampa-dugme .lucide-icon {
  width: 16px;
  height: 16px;
}

.an-stampaj-blok[aria-busy="true"],
.an-stampa-dugme[aria-busy="true"],
#an-stampaj-izabrano[aria-busy="true"] {
  cursor: progress;
  opacity: .55;
}

.an-stampa-dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Četvrto dugme je red dugmadi učinilo širim od kolone `auto` u mreži
   filtera: izmereno 47 px van forme na 860 px sadržaja (laptop sa menijem).
   Sa prelomom kolona sme da se suzi, pa dugmad pređu u drugi red. */
.analytics-filter-actions {
  flex-wrap: wrap;
}

.an-stampa-dugme[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand);
}

.an-stampa-izbor {
  margin-top: 12px;
}

/* `.panel` nosi svoj display, a `[hidden]` gubi od njega. */
.an-stampa-izbor[hidden] {
  display: none;
}

.an-stampa-izbor-glava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.an-stampa-spisak {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
}

.an-stampa-spisak label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  cursor: pointer;
}

.an-stampa-spisak input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
}

.an-stampa-spisak small {
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

.an-stampa-akcije {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ——— Akcije (v1.0.51) ———
   Oznaka „Akcija do 31.10." stoji uz cenu u prodavnici, ponudama i korpi.
   Namerno bez procenta: na telefonu red nosi samo cenu koju kupac placa
   (odluka od 21.09.2026, gore u @media za .shop-table), a rec i rok ne mogu da
   se procitaju kao „ide jos toliko popusta". Crvena, a ne boja brenda, da se
   ne pomesa sa rabatom klase (`.price-discount`). */
.offer-tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 5px;
  padding: 2px 6px;
  background: #d9381e;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}

.cart-product-name .offer-tag {
  margin-left: 8px;
  vertical-align: 2px;
}

.stock-badge.blue {
  background: #e8eefc;
  border-color: #b9c9f3;
  color: #1d4ed8;
}

.offer-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.offer-group-head h2 {
  margin: 0;
}

.offer-facts {
  margin: 6px 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
}

.offer-savings strong,
.offer-savings span {
  color: #1f8a4c;
}

.detail-price-line.offer-deadline {
  color: #b23b23;
  font-size: 13px;
}

/* Obrazac akcije. `[hidden]` gubi od `display: grid` na .form-grid i
   .category-checks, pa se sakrivanje ovde mora reci izricito. */
.offer-form [hidden] {
  display: none !important;
}

.offer-step {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.offer-step span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 12px;
}

.offer-benefit-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.offer-benefit {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
}

.offer-benefit input {
  grid-row: span 2;
  margin: 2px 0 0;
  accent-color: var(--brand);
}

.offer-benefit small {
  color: var(--muted);
  font-size: 12.5px;
}

.offer-benefit:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.offer-benefit:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.offer-fixed-prices {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
}

.offer-fixed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 13.5px;
}

.offer-fixed-row small {
  display: block;
  font-size: 12px;
}

.offer-fixed-row input {
  text-align: right;
}

.offer-class-checks {
  max-height: 180px;
}

.offer-preview {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  margin-bottom: 14px;
}

.offer-preview dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.offer-preview dl > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
}

.offer-preview dt {
  color: var(--muted);
}

.offer-preview dd {
  margin: 0;
  font-weight: 600;
}

.offer-preview-warn {
  margin: 10px 0 0;
  color: #b23b23;
  font-weight: 700;
  font-size: 13.5px;
}

/* „Pogledaj kao kupac" (v2.0.80): pregled akcije pre objave, istim crtanjem. */
.offer-kao-kupac-dugme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.offer-kao-kupac {
  /* Stavka grid obrasca: bez min-width tabela siri ceo obrazac udesno. */
  min-width: 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
}

.offer-kao-kupac p {
  margin: 0 0 6px;
}

.offer-kao-kupac-okvir {
  margin-top: 10px;
  min-width: 0;
}

.offer-kao-kupac-mesto {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 12px !important;
}

.offer-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.offer-filters .button {
  padding: 6px 12px;
  font-size: 13px;
}

.offer-admin-facts {
  margin: 4px 0;
  font-weight: 600;
  font-size: 14px;
}

.offer-admin-sold {
  margin: 4px 0 0;
  color: #1f8a4c;
  font-size: 13.5px;
}

@media (max-width: 620px) {
  .offer-fixed-row {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .offer-preview dl > div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Telefon: u prikazu „spisak" je cena jedan broj uz desnu ivicu (vidi odluku od
   21.09.2026 gore). Oznaka akcije u istom redu ju je gurala ulevo, pa cene u
   koloni vise nisu stajale jedna ispod druge — zato oznaka ide ispod cene.
   „Samo akcije" dobija `order` posle kategorija: traka na telefonu redja polja
   po `order`, a dugme bez njega (0) je stajalo iznad pretrage. */
@media (max-width: 620px) {
  .table-wrap[data-prikaz="list"] .shop-table .price-stack:has(.offer-tag),
  .table-wrap[data-prikaz="large"] .shop-table .price-stack:has(.offer-tag) {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }

  body.customer-portal .toolbar #offer-filter {
    order: 5;
  }
}

/* Mreza na telefonu: cena je centrirana i ne lomi se (`nowrap`), pa je oznaka
   pored nje izlazila iz kartice od 160 px i secala cenu na „.020,00". */
@media (max-width: 620px) {
  .table-wrap[data-prikaz="grid"] .shop-table .price-stack:has(.offer-tag) {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  /* Izlog na telefonu: cena i brojac dele red. Do v1.0.73 je cena dobijala
     samo kolone sifre i zalihe (sirine njihovog teksta, 97 px na 320), a
     visak reda brojac — pa je „Akcija do 08.10." od v1.0.49 stajala ispod
     brojaca. Sada cena uzima sve do brojaca (red „cena cena cena kolicina"
     gore), oznaka ide ispod cene kao u ostala tri pogleda, a na najuzim
     ekranima rok prelazi u drugi red oznake umesto da se sece. */
  .table-wrap[data-prikaz="showcase"] .shop-table .price-stack:has(.offer-tag) {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .price-stack .offer-tag,
  .table-wrap[data-prikaz="grid"] .shop-table .price-stack .offer-tag {
    max-width: 100%;
    white-space: normal;
  }
}

/* Izlog ispod 360 px: brojac od 143 px i cena od sest cifara („145.230,50",
   98 px) ne staju u karticu od 227 px ni kad cena uzme sve do brojaca.
   Brojac se suzi na 120 px, cena na 17 px. */
@media (max-width: 359px) {
  .table-wrap[data-prikaz="showcase"] .shop-table .quantity-stepper {
    grid-template-columns: 36px 48px 36px;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .price-net {
    font-size: 17px;
  }
}

/* Korpa na telefonu: naziv se lomi, pa oznaka ide u svoj red, bez uvlake koju
   na racunaru pravi razmak od naziva. */
@media (max-width: 620px) {
  .cart-product-name .offer-tag {
    display: flex;
    margin: 4px 0 0;
  }
}

/* Oznaka i nagovestaj u korpi (v1.0.71). Na racunaru omotaca kao da nema. */
.cart-offer-line {
  display: contents;
}

/* Na telefonu se sece samo naziv (dva reda, kao do sada); oznaka „10+1" i
   „jos 6 pak do gratisa" idu ispod, u jedan red, i ne seku se. Do v1.0.71 su
   bili u istom elementu od 33 px, pa se kod dugog naziva nagovestaj nije
   video. Specificnost 0,3,0 namerno: pravilo iznad (0,2,0) daje oznaci
   `margin-top`, a @media ne dize specificnost. */
@media (max-width: 620px) {
  .cart-table .cart-product-name {
    max-height: none;
    overflow: visible;
  }

  .cart-table .cart-product-name .cart-name-text {
    display: block;
    max-height: 33px;
    overflow: hidden;
  }

  .cart-table .cart-product-name .cart-offer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    margin-top: 3px;
  }

  .cart-table .cart-offer-line .offer-tag,
  .cart-table .cart-offer-line .offer-next {
    margin: 0;
  }
}

/* Oznaka „Akcija" u uglu slicice (v1.0.53). Dugme sa slikom i omot `.offer-thumb`
   (ponude, omiljeni) nose `position: relative`, da oznaka ima u odnosu na sta
   da stoji; `top` i `left` oba izricito, jer absolute bez njih ostaje tamo gde
   bi element stajao u toku. Na telefonu u prikazu „spisak" slicice nema, pa
   akciju tamo nosi oznaka uz cenu. */
.product-image-link,
.offer-thumb {
  position: relative;
}

.offer-thumb {
  display: inline-block;
  vertical-align: middle;
}

.offer-corner {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: #d9381e;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
}

/* Dva dela oznake (v1.0.72): krupno „−15%" / „10+1" i sitno „AKCIJA" /
   „GRATIS". Osnovno je jedan red, kao do sada — sitna rec se vidi samo u
   velikim slikama (pravila ispod, mokap V2). */
.offer-corner b {
  font: inherit;
}

.offer-corner i {
  display: none;
  font-style: normal;
}

/* V2 na racunaru: izlog (slika 260 px), mreza (150 px), veca slika (96 px).
   Ugao u dva reda, raste sa slikom; do v1.0.72 je svuda bio 32 × 15 px sa
   slovima od 9 px. Nacrt: docs/b2b-izlog-slike-i-oznake.html. */
@media (min-width: 621px) {
  .table-wrap[data-prikaz="showcase"] .shop-table .offer-corner,
  .table-wrap[data-prikaz="grid"] .shop-table .offer-corner,
  .table-wrap[data-prikaz="large"] .shop-table .offer-corner {
    top: 8px;
    left: 8px;
    padding: 5px 10px 6px;
    border-radius: 7px;
    text-align: center;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.25);
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .offer-corner b,
  .table-wrap[data-prikaz="grid"] .shop-table .offer-corner b,
  .table-wrap[data-prikaz="large"] .shop-table .offer-corner b {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .offer-corner i,
  .table-wrap[data-prikaz="grid"] .shop-table .offer-corner i,
  .table-wrap[data-prikaz="large"] .shop-table .offer-corner i {
    display: block;
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .offer-corner {
    top: 6px;
    left: 6px;
    padding: 4px 8px 5px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .offer-corner b {
    font-size: 17px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .offer-corner i {
    font-size: 8px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .offer-corner {
    top: 3px;
    left: 3px;
    padding: 3px 5px 4px;
    border-radius: 5px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .offer-corner b {
    font-size: 13px;
  }

  .table-wrap[data-prikaz="large"] .shop-table .offer-corner i {
    margin-top: 2px;
    font-size: 6.5px;
    letter-spacing: 0.08em;
  }

  /* Prazna sitna rec (admin: „Akcija" bez procenta) ne pravi drugi red. */
  .table-wrap[data-prikaz] .shop-table .offer-corner i:empty {
    display: none;
  }
}

/* V2 i u izlogu na telefonu, gde je slika preko cele sirine (okvir 120 px):
   srednja mera, ista kao u mrezi na racunaru. Mreza i „veliko" na telefonu
   imaju slicice od 56 i 44 px i ostaju u jednom redu. */
@media (max-width: 620px) {
  .table-wrap[data-prikaz="showcase"] .shop-table .offer-corner {
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 4px 8px 5px;
    border-radius: 7px;
    text-align: center;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.25);
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .offer-corner b {
    display: block;
    font-size: 17px;
    font-weight: 800;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .offer-corner i {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .offer-corner i:empty {
    display: none;
  }
}

/* Male slicice (telefon, prikaz „veliko": 44 px): oznaka od 46 px je virila
   preko ivice slike, pa se tu smanjuje na ~32 px. Ista mera vazi i za slicicu
   bez fotografije u mrezi, koja je uza od prave slike. */
@media (max-width: 620px) {
  .table-wrap[data-prikaz="large"] .shop-table .offer-corner,
  .table-wrap[data-prikaz="grid"] .shop-table .thumb-placeholder ~ .offer-corner {
    top: 2px;
    left: 2px;
    padding: 1px 3px;
    font-size: 7px;
    letter-spacing: 0;
    border-radius: 3px;
  }
}

/* Telefon, prikaz „veliko": oznaka „Akcija do 25.09." ispod cene sirila je
   kolonu cene za 13 px, pa je brojac kolicine izlazio iz kartice (v1.0.51,
   videno probom 23.09.2026). Od v1.0.53 akciju tu nosi oznaka na slicici, a rok
   ostaje u detalju artikla i na strani ponuda. */
@media (max-width: 620px) {
  .table-wrap[data-prikaz="large"] .shop-table .price-stack .offer-tag {
    display: none;
  }
}

/* Traka iznad prodavnice (v1.0.54, mokap C): akcija koja najpre istice. Ista
   crvena kao oznake akcije, da se vidi da je to ista stvar. */
.offer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #d9381e, #ef6a3a);
  color: #fff;
}

.offer-banner-tekst {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.offer-banner-tekst strong {
  font-size: 15px;
  line-height: 1.25;
}

.offer-banner-tekst span {
  font-size: 13px;
  opacity: 0.92;
}

.offer-banner .offer-banner-dugme {
  flex: none;
  background: #fff;
  color: #b3301a;
  border-color: #fff;
}

@media (max-width: 620px) {
  .offer-banner {
    padding: 9px 11px;
    gap: 10px;
  }

  .offer-banner-tekst strong {
    font-size: 14px;
  }

  .offer-banner-tekst span {
    font-size: 12px;
  }
}

/* Sitne slicice u tabelama ponuda i omiljenih (44 px na racunaru, 58–68 px na
   telefonu): oznaka od 46 px je prekrivala celu sirinu slike, videno na
   produkciji 23.09.2026 posle v1.0.54. Ista manja mera kao na telefonu u
   prikazu „veliko". */
.offer-thumb .offer-corner {
  top: 2px;
  left: 2px;
  padding: 1px 3px;
  font-size: 7px;
  letter-spacing: 0;
  border-radius: 3px;
}

/* ——— Porudzbina: obavestenja i zbir (v1.0.57) ———
   A3 oznaka „otkazao kupac" u spisku, A5 kvacica „obavesti kupca" u
   pregledu, K5 red dostave sa iznosom i pragom besplatne dostave. */
.order-cancelled-by {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #be123c;
}

.order-notify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.summary-free-shipping {
  margin: -2px 0 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.summary-free-shipping .link-button {
  margin-left: 4px;
}

/* Nova lozinka korisnika firme (v1.0.59): polje u redu ispod osobe. */
.member-password {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.member-password label {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--ink-soft);
}

.member-password input {
  flex: 1 1 180px;
  min-width: 0;
}

/* ——— Kolicinski rabat (v1.0.62, faza 2a) ———
   Stepenice u obrascu akcije, nagovestaj „jos 4 kom do −10%" u redu
   prodavnice (mokap F) i ispod naziva u korpi. */
.offer-tier-rows {
  display: grid;
  gap: 8px;
  margin: 6px 0 12px;
}

.offer-tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.offer-tier-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.offer-tier-row input {
  width: 88px;
}

.row-tier-hint,
.offer-next {
  color: #b42318;
  font-weight: 700;
}

/* Nagovestaj se ne lomi usred izraza („od 10 kom / −5%"): ako ne stane uz
   sifru, ceo prelazi u sledeci red. */
.row-tier-hint {
  white-space: nowrap;
}

.offer-next {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

/* ——— Stampa oznacenih porudzbina (od v1.0.61) ———
   Svoj red u masovnoj traci: zbirna lista za magacin i otpremnice. Red ide
   ispod statusa (flex-basis 100%), da traka ne pomesa „promeni" i „stampaj". */
.orders-bulk-print {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.orders-bulk-print .muted {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.orders-bulk-print .button,
.orders-toolbar #print-orders {
  /* `.button` je ovde blok, a ikona blok, pa je ikona padala iznad teksta i
     dugme bilo visoko 53 px (izmereno u v1.0.64; isto i za „Štampaj spisak"
     u alatki, v1.0.69). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

@media (max-width: 620px) {
  .orders-bulk-print .muted {
    display: none;
  }

  .orders-bulkbar .orders-bulk-print .button {
    flex: 1 1 120px;
    min-height: 40px;
  }
}

/* Poruka o porudzbinama koje ne idu na stampu (od v1.0.63). Stoji u traci dok
   se oznake ne promene — toast od 5 s je pokrivao dijalog za stampu. */
.orders-bulk-poruka {
  flex: 1 1 100%;
  margin: 0;
  padding: 7px 10px;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  background: #fffbeb;
  color: var(--ink);
  font-size: 13px;
}

.orders-bulk-poruka[hidden] {
  display: none;
}

/* ——— Masovna traka porudzbina uvek na dnu ekrana (od v1.0.64) ———
   Do sada je na racunaru stajala posle poslednje porudzbine: sa 300 porudzbina
   admin oznaci jednu gore i ne vidi da su radnje dole. Sada se lepi za dno
   vidljivog dela spiska cim je nesto oznaceno. Na kraju spiska sedi na svom
   mestu, pa ne pokriva poslednji red.
   Racunar: skroluje se `#view`, a dno ekrana drzi `.admin-status-bar`
   (58 px + 3 px ivica) — traka staje iznad nje.
   Do 900 px: skroluje se prozor, a dno drzi donja navigacija (58 px + sigurna
   zona iPhone-a) — traka staje iznad nje, ne ispod. */
.orders-bulkbar {
  position: sticky;
  /* Lepljenje se racuna od unutrasnje ivice skrol kontejnera, a `#view` ima
     `padding-bottom: 124px` (da sadrzaj ide iznad statusne trake). Traka treba
     72 px iznad dna ekrana (61 px statusne trake + razmak): 72 - 124 = -52.
     Izmereno: sa `bottom: 72px` je visila 196 px iznad dna, preko spiska. */
  bottom: -52px;
  z-index: 5;
  background: var(--panel);
  box-shadow: 0 -6px 22px rgba(15, 23, 42, 0.12);
}

/* Do 900 px `sticky` ovde ne moze: `body.portal-active #app` ima `overflow:
   auto` (odeljak @media 900px na vrhu fajla), pa se lepi za #app — koji je
   visok koliko i sadrzaj i nikad se ne skroluje — a ne za ekran. Izmereno na
   768 px: traka je ostajala na 4.377 px, ispod poslednje porudzbine. Zato
   `fixed`, iznad donje navigacije; spisak dobija prostor ispod sebe dok je
   traka vidljiva, da je poslednja porudzbina ne pokrije. */
@media (max-width: 900px) {
  .orders-bulkbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 45;
    margin: 0;
  }

  body:has(#orders-bulkbar:not([hidden])) #view {
    padding-bottom: 300px;
  }
}

/* Telefon: tri reda umesto pet. Broj i „Primeni" gore, status i „Obavesti"
   u sredini, stampa dole; poruka o preskocenim ispod svega. */
@media (max-width: 620px) {
  .orders-bulkbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .orders-bulkbar[hidden] {
    display: none;
  }

  .orders-bulk-info {
    grid-column: 1;
    grid-row: 1;
    font-size: 13px;
  }

  .orders-bulkbar #apply-order-bulk {
    grid-column: 2;
    grid-row: 1;
    min-height: 44px;
    padding: 8px 14px;
  }

  .orders-bulkbar #bulk-order-status {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    min-height: 44px;
  }

  .orders-bulkbar .orders-bulk-notify {
    grid-column: 2;
    grid-row: 2;
  }

  .orders-bulkbar .orders-bulk-print {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    padding-top: 8px;
  }

  .orders-bulkbar .orders-bulk-print .button {
    flex: 1 1 0;
    flex-direction: row;
    white-space: nowrap;
    min-height: 42px;
  }

  .orders-bulkbar .orders-bulk-poruka {
    grid-column: 1 / -1;
  }
}

/* ——— Sortiranje tabela (od v1.0.66, js/sortiranje.js) ———
   Zaglavlje kolone je dugme koje nasledjuje izgled <th>; strelica pokazuje
   smer samo na aktivnoj koloni, ostale nose bledu dvosmernu. Na telefonu su
   tabele kartice bez zaglavlja, pa isti izbor ide kroz .sort-izbor. */
th .sort-dugme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}

th .sort-dugme:hover,
th.sortirano .sort-dugme {
  color: var(--ink);
}

th .sort-dugme:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
  border-radius: 4px;
}

.sort-strelica {
  font-size: 10px;
  opacity: 0.35;
}

th.sortirano .sort-strelica {
  opacity: 1;
}

.sort-izbor {
  display: none;
}

.orders-limit-note {
  margin: 0 0 8px;
  font-size: 12px;
}

@media (max-width: 620px) {
  .toolbar .sort-izbor,
  .orders-toolbar .sort-izbor {
    display: block;
    flex: 0 1 auto;
    max-width: 42%;
    min-height: 44px;
  }

  /* Pretraga i Redosled u istom redu. Bez osnove 0 pretraga trazi celu sirinu
     i gura izbor u drugi red — 48 px manje za spisak u prvom kadru.
     Pravilo za #order-search vazi i kad izbora u redu nema (admin): ranije
     `.orders-toolbar input` iz bloka za 900 px gubi od `.orders-toolbar
     #order-search` po specificnosti, pa je dugme „Period i izvoz" padalo ispod
     pretrage umesto desno od nje. */
  .toolbar:has(> .sort-izbor) #customer-search,
  .orders-toolbar #order-search {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Kupci (v2.0.92): u redu su pretraga, mikrofon i Redosled; brojac
     „N od M kupaca" ide u svoj red ispod, inace je polju ostajalo 45 px. */
  .toolbar:has(> #customer-search) {
    flex-wrap: wrap;
  }

  .toolbar:has(> #customer-search) .dictate-button {
    flex: none;
  }

  .toolbar .customer-search-count {
    order: 1;
    flex-basis: 100%;
  }

  .toolbar .customer-search-count:empty {
    display: none;
  }

  .orders-extra .sort-izbor {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* ——— Naturalni rabat „10+1" (v1.0.67, faza 2b) ———
   Gratis red u korpi (mokap E) stoji ispod placene stavke: bez brisanja, bez
   brojaca, zelen kao „Usteda na akcijama", da se ne procita kao jos jedna
   stavka za placanje. Oznaka „10+1" u uglu i „na 10 kom 1 gratis" uz cenu
   koriste postojece .offer-corner i .offer-tag. */
.cart-table tr.cart-free-row {
  background: #f1faf4;
}

.cart-free-row .cart-product-name {
  color: #1f7a45;
  font-size: 13.5px;
  font-weight: 700;
}

.cart-free-mark {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1f8a4c;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.cart-free-qty {
  display: inline-block;
  min-width: 44px;
  color: #1f7a45;
  font-weight: 700;
  text-align: center;
}

.cart-free-row .line-total,
.confirm-lines .confirm-free,
.checkout-lines .checkout-free {
  color: #1f7a45;
}

/* Telefon: gratis red je kartica od dva sprata (naziv, pa racun „1 × 0,00"
   i iznos). Brojaca nema, pa ni treceg sprata; kolicinu nosi racun. */
@media (max-width: 620px) {
  .cart-table tr.cart-free-row {
    grid-template-areas:
      "slika naziv x"
      "slika racun iznos";
    padding: 6px 0;
  }

  .cart-table .cart-product-cell .cart-free-mark {
    grid-area: slika;
    align-self: center;
    width: 22px;
    height: 22px;
    font-size: 14px;
  }

  .cart-table tr.cart-free-row td:nth-child(4) {
    display: none;
  }
}

/* Oznaka gratisa uz cenu: „na 10 kom 1 gratis" na racunaru, „10+1 gratis" na
   telefonu. Duzi oblik je u prikazu „spisak" sirio kolonu cene za ~40 px, pa
   su brojac i dugme korpe izlazili iz reda (izmereno na 375 px, v1.0.67). */
.offer-tag-free .gratis-kratko {
  display: none;
}

@media (max-width: 620px) {
  .offer-tag-free .gratis-dugo {
    display: none;
  }

  .offer-tag-free .gratis-kratko {
    display: inline;
  }
}

/* Telefon, prikaz „spisak", artikal u korpi: brojac (118 px) i cena ostave
   sifri ~60 px, pa je nagovestaj („jos 3 kom do gratisa", i od v1.0.62 „jos 4
   kom do −10%") gurao brojac van reda — izmereno 28-117 px preko ivice na
   375 px. Tu se nagovestaj sklanja; kupac ga vidi u korpi, ispod stavke, i u
   redu cim artikal nije u korpi. */
@media (max-width: 620px) {
  .table-wrap[data-prikaz="list"] .shop-table tr.u-korpi .row-tier-wrap {
    display: none;
  }
}

/* ——— Prolaz na telefonu, K1 i K3–K5 (v1.0.73) ———
   Mere i mokapi: docs/b2b-telefon-prolaz-nalazi.html. */

/* K5: kvadratic za oznacavanje porudzbine. Kvadratic je 13 px, a do v1.0.73
   je bio sam u celiji od 20 × 21 px; promasaj za par piksela padao je na red
   i otvarao pregled umesto da oznaci. Meta je sada label, pa dodir bilo gde u
   njemu menja kvadratic, a klik na label red ne otvara pregled
   (products.js, preskace „label"). */
.order-check-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* „Klasa · 2 kupca" postoji samo u kartici na telefonu; u tabeli na racunaru
   zaglavlje kolone vec kaze sta je broj. */
.class-card-tag {
  display: none;
}

@media (max-width: 620px) {
  /* Meta od 44 × 44 px, a raspored kartice se ne pomera: negativna margina
     vraca prostor koji je padding dodao. */
  .orders-table .order-check-meta {
    min-width: 44px;
    min-height: 44px;
    margin: -15px;
  }

  /* K1: Klase kupaca kao kartice. Tabela od pet kolona je na 360 px bila
     sabijena na 274 px: polje za naziv je dobijalo 26 px i „Veleprodaja" se
     nije mogla procitati. Ista polja, samo raspored — naziv u punoj sirini,
     ispod nacin cena i popust. */
  .classes-table,
  .classes-table tbody,
  .classes-table td {
    display: block;
  }

  .classes-table thead {
    display: none;
  }

  .classes-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    /* Do v1.0.214 je raspored cekao pet celija (broj, brisanje), a red ih ima
       cetiri: kanta je upadala u polje „broj", gore levo iznad naziva. */
    grid-template-areas:
      "naziv  brisanje"
      "nacin  popust";
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 10px;
    padding: 10px 12px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
  }

  .classes-table td {
    padding: 0;
    border: 0;
  }

  .classes-table td:nth-child(1) { grid-area: naziv; }
  .classes-table td:nth-child(2) { grid-area: nacin; min-width: 0; }
  .classes-table td:nth-child(3) { grid-area: popust; }

  .classes-table td:nth-child(4) {
    grid-area: brisanje;
    justify-self: end;
  }

  /* Cenovnik u redu samo na racunaru; na telefonu je jedno dugme u zaglavlju. */
  .classes-table .cenovnik-u-redu {
    display: none;
  }

  .classes-table .class-card-tag {
    display: inline;
  }

  .classes-table [data-class-name] {
    font-weight: 700;
  }

  /* K3: sloj pregleda ovde ima padding 14 px (ne 16), a lepljivo zaglavlje
     je izlazilo za -16 px — sloj se pomerao postrance jos 2 px. */
  .order-detail-modal .modal-head {
    top: -14px;
    margin: -14px -14px 12px;
    padding: 12px 14px 10px;
  }

  /* Zaglavlje od 129 na ~64 px (v1.0.134): natpis „Pregled porudzbine" ne
     dodaje nista uz „Porudzbina #263", a naslov od 22 px se pored dugmeta
     „Ponovi" lomio u tri reda. Zaglavlje je lepljivo, pa je visak falio celo
     vreme skrolovanja. Nacrt: docs/b2b-kupac-telefon-pre-posle.html, odeljak 7. */
  .order-detail-modal .modal-head .eyebrow {
    display: none;
  }

  .order-detail-modal .modal-head h2 {
    font-size: 17px;
    line-height: 1.2;
  }

  .order-detail-modal .modal-head > div:first-child .muted {
    margin: 1px 0 0;
    font-size: 12px;
  }

  /* K3: nazivi koraka u pregledu porudzbine nasledjuju „overflow-wrap:
     anywhere" i u koloni od ~60 px lomili su se usred reci („Isporučen/a").
     Rec ostaje cela; „Priprema se" ide u dva reda. */
  .order-step-name {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: 10px;
  }

  /* K4: kupceva kartica porudzbine. Status je u prvom redu, desno od broja;
     datum, broj stavki i iznos u drugom. Do v1.0.73 su „2 artikla" i status
     delili drugi red i na ekranu uzem od ~345 px preklapali se 5–13 px.
     „Pre sat vremena" otpada: datum i vreme vec stoje, a u drugom redu sada
     ima i iznos. */
  .orders-table .order-row-customer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "broj   broj   status"
      "datum  stavke ukupno"
      "radnje radnje radnje";
  }

  .orders-table .order-row-customer .cell-status {
    align-self: center;
  }

  .orders-table .order-row-customer .order-relative {
    display: none;
  }

  .orders-table .order-row-customer .cell-items {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .orders-table .order-row-customer .cell-items::before {
    content: "· ";
  }

  .orders-table .order-row-customer .cell-total {
    font-size: 14px;
  }
}

/* K4: ispod 360 px „Poruci ponovo" i „Pregledaj" ne staju u red, pa je
   natpis gubio poslednje slovo. Pregled ostaje ikona oka; ceo red ionako
   nije jedina meta — oko je i dalje tu. */
@media (max-width: 359px) {
  .orders-table .order-row-customer .cell-open .button[data-order-detail] {
    flex: none;
    width: 44px;
  }

  .orders-table .order-row-customer .cell-open .button[data-order-detail]::after {
    content: none;
  }
}

/* ——— Artikli na telefonu, K2 (v1.0.75) ———
   Izmereno na 360 px (docs/b2b-telefon-prolaz-nalazi.html): prvi artikal na
   982 px, tabela od 10 kolona u 255 px, naziv u 37 px pa red od 433 px, a
   „Masovne izmene" otvorene i bez oznacenog. Sada: pretraga i filteri u dva
   reda, kartica po artiklu, a masovne izmene samo dok je nesto oznaceno —
   traka na dnu, ista mehanika kao kod porudzbina. Racunar se ne menja. */
.product-card-meta,
.product-card-stanje,
.product-bulk-info {
  display: none;
}

.product-check-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 620px) {
  /* „Proizvodi / Pregled artikala..." ponavlja dugme iznad; na telefonu je
     to 60 px iznad prvog artikla. */
  .product-list-panel > .topbar {
    display: none;
  }

  .product-list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .product-list-toolbar #admin-product-search {
    grid-column: 1 / -1;
  }

  .product-list-toolbar select {
    width: 100%;
    min-width: 0;
  }

  /* Pretraga krece sama posle 250 ms, pa dugme na telefonu samo zauzima red. */
  .product-list-toolbar #admin-product-search-button {
    display: none;
  }

  /* Masovne izmene: nevidljive dok nista nije oznaceno, zatim traka iznad
     donje navigacije. „Cela prodavnica u obrisane" ostaje samo na racunaru —
     radnja nad celim katalogom ne pripada traci „oznaceni". */
  .product-bulk {
    display: none;
  }

  .product-bulk.ima-oznacenih {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 45;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    padding: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(15, 23, 42, 0.12);
  }

  body:has(#product-bulk.ima-oznacenih) #view {
    padding-bottom: 200px;
  }

  .product-bulk .product-bulk-opis,
  .product-bulk #delete-all-products {
    display: none;
  }

  .product-bulk .product-bulk-info {
    display: block;
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 700;
  }

  .product-bulk .danger-actions {
    display: contents;
  }

  .product-bulk #bulk-product-status {
    min-width: 0;
    min-height: 44px;
  }

  .product-bulk #apply-product-bulk-status {
    min-height: 44px;
    padding: 8px 14px;
  }

  /* Kartica: kvadratic | slicica | naziv, sifra · kategorija, stanje | cena i
     brisanje. Ostale celije su vec u „stanju", pa se na telefonu ne crtaju. */
  .admin-products-table,
  .admin-products-table tbody,
  .admin-products-table td {
    display: block;
  }

  .admin-products-table thead,
  .admin-products-table .cell-sku,
  .admin-products-table .cell-category,
  .admin-products-table .cell-stock,
  .admin-products-table .cell-status,
  .admin-products-table .cell-featured,
  .admin-products-table [data-edit-product] {
    display: none;
  }

  .admin-products-table tr {
    display: grid;
    grid-template-columns: 30px 48px minmax(0, 1fr) auto;
    grid-template-areas:
      "kvadratic slika naziv cena"
      "kvadratic slika naziv radnje";
    align-items: center;
    gap: 2px 10px;
    margin-bottom: 8px;
    padding: 10px 10px 10px 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
  }

  .admin-products-table td {
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .admin-products-table .cell-check { grid-area: kvadratic; justify-self: center; }
  .admin-products-table .cell-image { grid-area: slika; }
  .admin-products-table .cell-name { grid-area: naziv; }

  .admin-products-table .cell-price {
    grid-area: cena;
    align-self: start;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
  }

  .admin-products-table .cell-actions {
    grid-area: radnje;
    justify-self: end;
    align-self: end;
  }

  /* Meta od 44 px oko kvadratica, bez pomeranja rasporeda (isto kao K5). */
  .admin-products-table .product-check-meta {
    min-width: 44px;
    min-height: 44px;
    margin: -12px;
  }

  .admin-products-table .cell-image .product-thumb,
  .admin-products-table .cell-image .thumb-placeholder {
    width: 48px;
    height: 48px;
    font-size: 9px;
  }

  .admin-products-table .cell-name strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
  }

  .admin-products-table .product-card-meta {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .admin-products-table .product-card-stanje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 3px;
    font-size: 12px;
  }

  .admin-products-table .product-card-stanje .stock-badge {
    font-size: 11px;
    padding: 1px 6px;
  }

  .admin-products-table .product-card-status {
    font-weight: 700;
    color: #15803d;
  }

  .admin-products-table .product-card-status.draft { color: #b45309; }
  .admin-products-table .product-card-status.deleted { color: #b91c1c; }

  .admin-products-table .product-card-status::after {
    content: " ·";
    color: var(--muted);
    font-weight: 400;
  }

  .admin-products-table .cell-actions .row-actions {
    flex-wrap: nowrap;
  }

  .admin-products-table .cell-actions .button {
    width: 36px;
    min-height: 36px;
  }
}

/* K2, drugi krug merenja: sa cenom i kantom desno naziv je dobijao 94 px na
   360, pa je kartica bila 116–220 px. Kanta na telefonu odlazi — pojedinacno
   brisanje je „oznaci pa Premesti u obrisano" u traci, ista radnja kao za vise
   artikala. Panel gubi deo sopstvenog paddinga, a tri dugmeta iznad staju u
   jedan red. */
@media (max-width: 620px) {
  .admin-products-table .cell-actions {
    display: none;
  }

  .admin-products-table tr {
    grid-template-areas: "kvadratic slika naziv cena";
    align-items: start;
  }

  .admin-products-table .cell-check,
  .admin-products-table .cell-image {
    align-self: center;
  }

  .product-list-panel {
    padding: 12px 10px;
  }

  .product-subnav {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .product-subnav .button {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* K2, treci krug: cena ide u red stanja, desno, pa naziv dobija celu sirinu
   kartice (bio je 120 px uz „299,00 RSD" u svojoj koloni). */
@media (max-width: 620px) {
  .admin-products-table .cell-price {
    display: none;
  }

  .admin-products-table tr {
    grid-template-columns: 30px 48px minmax(0, 1fr);
    grid-template-areas: "kvadratic slika naziv";
  }

  .admin-products-table .product-card-cena {
    margin-left: auto;
    font-size: 13px;
    white-space: nowrap;
  }

  .admin-products-table .product-card-stanje .stock-count {
    display: inline;
  }
}

/* ——— P2 i P4 (v1.0.79) ———
   P2: red „jos 6 kom do gratisa" u detalju artikla prati brojac. `hidden` bi
   izgubio od `display: flex` reda cene, pa se gasi izricito. */
.detail-gratis-fali {
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
}

.detail-gratis-fali[hidden] {
  display: none;
}

#detail-gratis-dobija {
  color: #15803d;
}

/* P4: gde ugao slike vec kaze sta je (izlog, mreza, veca slika), oznaka uz
   cenu nosi samo ono cega u uglu nema. Akcija: ostaje rok („do 08.10."), rec
   „Akcija" odlazi; bez roka odlazi cela. Gratis u uglu: oznaka „10+1 gratis"
   uz cenu odlazi — pravilo recima stoji uz sifru. Kartica deterdzenta je do
   sada isto rekla tri puta. U spisku (bez slike) ostaje sve kao do sada. */
.offer-tag-akcija .offer-tag-rok {
  margin-left: 0.3em;
}

.table-wrap[data-prikaz="showcase"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-rec,
.table-wrap[data-prikaz="grid"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-rec,
.table-wrap[data-prikaz="large"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-rec {
  display: none;
}

.table-wrap[data-prikaz="showcase"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-rok,
.table-wrap[data-prikaz="grid"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-rok,
.table-wrap[data-prikaz="large"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-rok {
  margin-left: 0;
}

.table-wrap[data-prikaz="showcase"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-akcija:not(:has(.offer-tag-rok)),
.table-wrap[data-prikaz="grid"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-akcija:not(:has(.offer-tag-rok)),
.table-wrap[data-prikaz="large"] .shop-table tr:has(.offer-corner-akcija) .price-stack .offer-tag-akcija:not(:has(.offer-tag-rok)),
.table-wrap[data-prikaz="showcase"] .shop-table tr:has(.offer-corner-gratis) .price-stack .offer-tag-free,
.table-wrap[data-prikaz="grid"] .shop-table tr:has(.offer-corner-gratis) .price-stack .offer-tag-free,
.table-wrap[data-prikaz="large"] .shop-table tr:has(.offer-corner-gratis) .price-stack .offer-tag-free {
  display: none;
}

/* ——— P3: stavka korpe na telefonu (v1.0.80) ———
   Do sada tri sprata: naziv, pa „12 × 711,55" i iznos, pa brojac u svom redu,
   razvucen na 221 px. Izmereno na 360 px: tri stavke i gratis red 532 px, u
   kadar 2,5 stavke. Sada brojac ide ispod slicice i naziva, levo, a iznos i
   racun desno od njega, jedan ispod drugog — tako staje i „2 × 161.367,22"
   uz „322.734,44" na 320 px, gde su se do sada preklapali. Gratis red je
   jedan red: „+ 1 × Deterdzent … · gratis   0,00". Nacrt: prolaz na telefonu, P3. */
.cart-free-kol {
  display: none;
}

@media (max-width: 620px) {
  /* Druga kolona 78, ne 66: brojac je od v1.0.134 sirok 132 px (44 + 78 + razmak 10). */
  .cart-table tr {
    grid-template-columns: 44px 78px minmax(0, 1fr) auto;
    grid-template-areas:
      "slika    naziv    naziv  x"
      "kolicina kolicina iznos  iznos"
      "kolicina kolicina racun  racun";
    gap: 2px 10px;
  }

  /* 44 · 44 · 44, a ne 36 · 48 · 36: opste mobilno pravilo daje dugmadi 44 px,
     pa je „−" lezao 7 px preko broja, a „+" izlazio 12 px preko ivice brojaca,
     koja ga je secla — desna cetvrtina „+" se nije ni videla ni dodirivala
     (mereno 29.09.2026). Nacrt: docs/b2b-kupac-telefon-pre-posle.html, odeljak 3. */
  /* Polje uzima ostatak (42 px): 132 ukljucuje i ivicu od 1 px sa svake strane,
     pa bi tri kolone od 44 isterale „+" 2 px preko okvira. */
  .cart-table .quantity-stepper {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    width: 132px;
    min-height: 44px;
  }

  .cart-table .quantity-stepper button {
    width: 44px;
    height: 44px;
  }

  .cart-table td:nth-child(4) {
    align-self: center;
  }

  .cart-table td:nth-child(5) {
    align-self: end;
    justify-self: end;
    white-space: nowrap;
  }

  .cart-table td:nth-child(3) {
    align-self: start;
    justify-self: end;
    text-align: right;
  }

  .cart-table tr.cart-free-row {
    grid-template-areas: "slika naziv naziv iznos";
    align-items: center;
    padding: 6px 0;
  }

  .cart-table tr.cart-free-row td:nth-child(3),
  .cart-table tr.cart-free-row td:nth-child(4) {
    display: none;
  }

  .cart-table tr.cart-free-row td:nth-child(5) {
    align-self: center;
  }

  .cart-table tr.cart-free-row .cart-product-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cart-table tr.cart-free-row .cart-free-kol {
    display: inline;
  }

  .cart-table tr.cart-free-row .cart-free-mark {
    justify-self: center;
  }
}

/* P3: u gratis redu na telefonu samo „1 × gratis" (mokap). Sa nazivom je
   trotacka secla bas rec „gratis"; red stoji odmah ispod svoje stavke. */
@media (max-width: 620px) {
  .cart-table tr.cart-free-row .cart-free-naziv {
    display: none;
  }
}

/* ——— P1: vrh prodavnice na telefonu (v1.0.82) ———
   Izmereno na 360 px (prolaz na telefonu): traka akcije 72 px, alatka 150 px
   u tri reda, pa je prvi artikal bio na 235 px od vrha sadrzaja, a u izlogu je
   u prvi kadar stajao jedan artikal. Sada: traka u jednom redu (naziv i rok,
   ceo opis ostaje na racunaru i na strani ponuda), alatka u dva reda
   (pretraga, mikrofon, skener; kategorije i „Samo akcije"), a panel
   prodavnice nema svoj okvir, pa kartice i slike dobijaju tu sirinu. */
.offer-banner-rok {
  display: none;
}

@media (max-width: 620px) {
  .offer-banner {
    min-height: 44px;
    padding: 6px 6px 6px 12px;
    margin-bottom: 8px;
  }

  /* Od v1.0.134 dva reda: naziv, pa opis (pogodnost · rok · broj artikala).
     U jednom redu, uz rok, naziv je na 360 px dobijao 127 px od 155 i secao
     se bas na kraju — „Jesenja akcija: pica -1…", bez podatka koliko se
     stedi (mereno 29.09.2026). Traka raste sa 44 na ~56 px.
     Nacrt: docs/b2b-kupac-telefon-pre-posle.html, odeljak 4. */
  .offer-banner-tekst {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .offer-banner-tekst strong,
  .offer-banner-tekst .offer-banner-opis {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .offer-banner-tekst strong {
    font-size: 13.5px;
  }

  .offer-banner-tekst .offer-banner-opis {
    display: block;
    font-size: 11.5px;
  }

  /* Rok je vec u opisu. */
  .offer-banner-tekst .offer-banner-rok {
    display: none;
  }

  .offer-banner .offer-banner-dugme {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12.5px;
  }

  /* Panel prodavnice bez okvira i paddinga: artikli su vec kartice, pa je
     treca uvucena povrsina samo trosila sirinu (slika u izlogu 250 od 360). */
  body.customer-portal .shop-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Lepljiva alatka ide preko cele sirine sadrzaja, na boji strane — panel
     vise nije bela povrsina iza nje. */
  body.customer-portal .shop-panel .toolbar {
    margin: 0 0 8px;
    padding: 8px 0;
    background: var(--bg);
  }

  /* Dva reda: pretraga + mikrofon + skener, pa kategorije + „Samo akcije". */
  body.customer-portal .shop-panel .toolbar input {
    order: 1;
    flex: 1 1 calc(100% - 112px);
  }

  body.customer-portal .shop-panel .toolbar .dictate-button {
    order: 2;
  }

  body.customer-portal .shop-panel .toolbar .scan-button:not(.dictate-button) {
    order: 3;
  }

  body.customer-portal .shop-panel .toolbar select {
    order: 4;
    flex: 1 1 0;
  }

  body.customer-portal .shop-panel .toolbar #offer-filter {
    order: 5;
    flex: none;
    min-height: 44px;
    white-space: nowrap;
  }
}

/* Super admin — spisak firmi (v1.0.79): tabela na racunaru, kartice na telefonu.
   Oba prikaza su u DOM-u; pravila sa dve klase jer `.company-grid` i
   `.table-wrap` vec postavljaju display ranije u fajlu. */
.company-grid.super-company-cards {
  display: none;
}

.super-company-table td {
  vertical-align: top;
}

.super-company-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 250px;
}

.super-company-row-actions .button {
  min-height: 32px;
  padding: 4px 10px;
}

@media (max-width: 720px) {
  .table-wrap.super-company-table-wrap {
    display: none;
  }

  .company-grid.super-company-cards {
    display: grid;
  }
}

/* ——— Sitnice sa prolaza na telefonu (v1.0.84) ——— */

/* Trebovanje, izbor kupca: polje pretrage nije imalo stil polja, pa je bilo
   25 px visoko uz polja od 39–44 px. Isti izgled kao .table-field. */
.pick-search {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
}

@media (max-width: 620px) {
  .pick-search {
    min-height: 44px;
  }

  /* Analitika: „2 porudzbine · poslednja pre 8 dana" se na telefonu secao
     tri tacke usred broja dana. Delovi se ne lome, a opis sme u drugi red. */
  .an-meta:has(.an-deo) {
    white-space: normal;
    overflow: visible;
  }

  .an-deo {
    white-space: nowrap;
  }
}

/* Paneli jedan ispod drugog (v1.0.84). `.panel` nema svoju marginu, a
   `.cards` ima 18 px ispod sebe — pa su na Kontrolnoj tabli „Trazi tvoju
   paznju" i kartice sa brojevima stajali slepljeni, isto „Kupci koji cute" i
   plocice ispod, i dva panela na ekranu Kategorija (Dejanov snimak 24.09.).
   Jedno pravilo za svaki panel koji je neposredno u #view i nije poslednji;
   margine se sa susedovom slazu (ne sabiraju), pa gde razmak vec postoji
   ostaje isti. */
#view > .panel:not(:last-child) {
  margin-bottom: 18px;
}

/* Poruka i napomena iznad sadrzaja (v1.1.11). `.message` nema svoju marginu,
   pa je u blok-toku stajala slepljena za ono ispod: napomena „dolaze iz CRM-a"
   za pretragu na Artiklima (Dejanov snimak 05.10.) i za cipove na Kupcima,
   za panel na Kategorijama, a poruka posle cuvanja za filtere Ponuda, tabelu
   Klasa, formu Podesavanja, spisak Korisnika firme i tabove kupca. U grid i
   flex roditelju (forma, prozor) razmak vec daje `gap`, zato samo #view i
   .panel; margina se sa susedovom slaze, ne sabira. */
#view > .message.visible:not(:last-child),
.panel > .message.visible:not(:last-child) {
  margin-bottom: 14px;
}

/* PDF katalog u adminu (v1.0.89): stanje, rok i prekidac. Katalog koji kupac
   ne vidi (sakriven ili istekao) je bledji, da se u mrezi odmah razlikuje. */
.download-card.is-hidden-catalog > img,
.download-card.is-hidden-catalog > .pdf-preview,
.download-card.is-hidden-catalog > strong {
  opacity: 0.55;
}

.pdf-catalog-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pdf-catalog-state .stock-badge + .stock-badge {
  margin-left: 0;
}

.pdf-catalog-rok {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.pdf-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Traka „Dostupna je nova verzija" (v1.0.93, skripta u index.php). Pri vrhu,
   iznad svega, jer dole vec stoje donja navigacija i traka koraka. */
.nova-verzija {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  transform: translateX(-50%);
}

.nova-verzija-osvezi {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: var(--brand-ink, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.nova-verzija-zatvori {
  width: 36px;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 620px) {
  .nova-verzija {
    left: 12px;
    right: 12px;
    justify-content: space-between;
    transform: none;
    font-size: 13px;
  }
}

/* Primeri u probi (v1.0.100): oznaka u spiskovima tima i traka na Tabli.
   Isprekidan okvir, da se ne pomesa sa statusima porudzbine i zaliha. */
.oznaka-primer {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px dashed #9fb0c5;
  border-radius: 999px;
  background: #eef2f7;
  color: #50627a;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: middle;
  white-space: nowrap;
}

.traka-primera {
  background: #fffaeb;
  border-color: #f3c96b;
  line-height: 1.5;
}

.trial-fill-choice {
  margin: -4px 0 8px 26px;
}

/* Blok „Primeri" na stranici probe (v1.0.103). */
.super-samples h3 .oznaka-primer {
  margin-left: 8px;
}

.super-samples-warning {
  padding: 8px 10px;
  border: 1px solid #f3c96b;
  border-radius: 8px;
}

/* ——— Slike artikla u obrascu (v1.0.102) ———
   Zona prima fajlove prevucene iz foldera; ispod nje su slicice, prva je glavna.
   Sakriveni input za fajl ide klasom, ne atributom `hidden`: `hidden` gubi od
   svakog `display` pravila koje ga pogodi (v. .is-hidden). */
.slike-fajl {
  display: none;
}

.slike-zona {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 18px 12px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

.slike-zona strong {
  color: var(--ink);
  font-size: 14px;
}

.slike-zona:hover,
.slike-zona:focus-visible,
.slike-zona.aktivna {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
  outline: none;
}

.slike-zona.aktivna {
  border-style: solid;
}

.slike-niz {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.slike-niz:empty {
  display: none;
}

.slika-plocica {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}

.slika-plocica[data-slika="0"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.slika-plocica img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slika-oznaka {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 10px;
  font-weight: 700;
}

.slika-stanje {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 4px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 10.5px;
  text-align: center;
}

.slika-plocica.greska {
  border-color: #e11d48;
}

.slika-plocica.greska .slika-stanje {
  background: #be123c;
}

.slika-plocica.salje img {
  opacity: 0.55;
}

.slika-ukloni {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

.slike-url-otvori {
  margin-top: 8px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
}

.slike-url {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.slike-url input {
  flex: 1;
  min-width: 0;
}

/* Na ekranu na dodir nema prevlacenja iz foldera, pa zona kaze sta tamo radi. */
.slike-zona .samo-dodir {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .slike-zona .samo-mis {
    display: none;
  }

  .slike-zona .samo-dodir {
    display: inline;
  }
}

/* ——— Lepljiva zaglavlja obrazaca (v1.0.106) ———
   Pravilo iz docs/b2b-dugmad-cuvanja.html: obrazac duzi od ekrana ima dugme za
   cuvanje u zaglavlju koje se lepi za vrh; donje dugme ostaje. Dugmad u
   zaglavlju su vezana za obrazac atributom `form`, pa prolaze kroz istu proveru
   obaveznih polja. Prvo je napisano za „Dodaj proizvod" (v1.0.104) i „Uredi
   proizvod" (22.09.), ovde je izvuceno da ga koriste svi obrasci.

   Strana: lepi se za vrh #view (racunar) odnosno prozora (telefon, od v1.0.105).
   Negativne margine ga vracaju na ivice panela, da sadrzaj koji prolazi ispod
   nema kroz sta da se vidi. Poruka o gresci stoji u samom zaglavlju, pa se vidi
   i kad je admin skrolovao do dna i kliknuo donje dugme. */
.lepljivo-zaglavlje-strane {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: -22px -22px 18px;
  padding: 18px 22px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
}

.lepljivo-zaglavlje-strane h2 {
  margin: 0;
}

.lepljivo-zaglavlje-strane > .message {
  flex: 1 1 100%;
  margin: 0;
}

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

/* Prozor: zaglavlje se lepi za vrh prozora koji skroluje sam. `-22px`, a ne
   `0`: lepljivi element racuna odstojanje od unutrasnje ivice prozora, pa je sa
   nulom ostajao pojas od 22 px kroz koji se video sadrzaj ispod (izmereno
   22.09.2026, „Uredi proizvod"). */
.modal-head.lepljivo {
  position: sticky;
  top: -22px;
  z-index: 3;
  flex-wrap: wrap;
  margin: -22px -22px 14px;
  padding: 18px 22px 14px;
  background: white;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
}

.modal-head.lepljivo > .message {
  flex: 1 1 100%;
  margin: 0;
}

@media (max-width: 620px) {
  .lepljivo-zaglavlje-strane {
    margin-bottom: 12px;
    padding: 10px 14px;
  }

  .lepljivo-zaglavlje-strane h2 {
    font-size: 17px;
  }

  .lepljivo-zaglavlje-strane p.muted {
    display: none;
  }

  /* Gde naslov vec stoji na aktivnoj kartici iznad (Dodaj proizvod), zaglavlje
     na telefonu nosi samo dugmad: sa naslovom i opisom je uzimalo 161 px od 786
     vidljivih, bez njih 57 px (izmereno 25.09.). */
  .lepljivo-zaglavlje-strane.samo-dugmad-na-telefonu > :first-child {
    display: none;
  }

  /* Zaglavlje prozora u jednom redu: naslov, dugme, ×. Sa prelomom je
     „Uredi proizvod" imalo 112 px od 742 vidljivih, a obrazac je dug 2.492 px
     (izmereno 29.09.2026). Nacrt: docs/b2b-admin-telefon-pre-posle.html, odeljak 4. */
  /* Prelom (flex-wrap) ostaje: poruka forme (.message) i dalje ide u svoj red. */
  .modal-head.lepljivo {
    gap: 8px;
    padding: 10px 14px;
  }

  .modal-head.lepljivo > h2 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modal-head.lepljivo .modal-head-actions {
    gap: 8px;
  }

  .modal-head.lepljivo .zaglavlje-dodatak {
    display: none;
  }

  .zaglavlje-dugmad {
    width: 100%;
  }

  .zaglavlje-dugmad .button {
    flex: 1 1 0;
  }
}

/* ——— PDV po artiklu (v1.0.107) ——— */

/* Oznaka uz cenu: samo kad stopa artikla nije podrazumevana. */
.pdv-oznaka {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}

.price-stack .pdv-oznaka {
  margin-left: 0;
}

/* U prodavnici oznake stope nema ni u jednom prikazu — Spisak, Veca slika,
   Mreza, Izlog (v2.0.93, Dejan; v2.0.92 samo Mreza, gde je plocicu cinila
   visom od susednih). Stopa se vidi u detalju artikla i u korpi. */
.table-wrap[data-prikaz] .shop-table .pdv-oznaka {
  display: none;
}

.detail-pdv {
  margin-top: 6px;
}

/* Izbor stope u obrascu artikla: dugmad umesto padajuceg menija, jer stopa
   ima dve-tri vrednosti i bira se jednim dodirom. */
.pdv-izbor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pdv-cip {
  position: relative;
  cursor: pointer;
}

.pdv-cip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pdv-cip span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  font-weight: 700;
}

.pdv-cip small {
  color: var(--muted);
  font-weight: 600;
}

.pdv-cip input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
}

.pdv-cip input:checked + span small {
  color: var(--brand-ink);
}

.pdv-cip input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Stope u Podesavanjima: red po stopi, poslednji je nova stopa. */
.pdv-stope-spisak {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.pdv-stopa-red {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 110px auto auto 60px auto;
  gap: 8px 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.pdv-stopa-red.nova {
  border-style: dashed;
  background: var(--panel);
}

.pdv-stopa-red.ugasena {
  opacity: 0.7;
}

.pdv-stopa-broj {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdv-stopa-broj input {
  min-width: 0;
}

.pdv-stopa-kvacica {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  white-space: nowrap;
}

.pdv-stopa-artikli {
  font-size: 12.5px;
  text-align: right;
}

.pdv-stopa-razlog {
  grid-column: 1 / -1;
}

/* U levoj koloni rasporeda P1 (v1.0.141) red ima 290-480 px, a sest kolona
   iznad je trazilo vise: naziv je pao na 0 px, dugme na 38 px (test, 30.09.).
   Ispod 1.100 px kolona je jedna i vazi mreza iznad. */
@media (min-width: 1101px) {
  .settings-columns-portal .pdv-stopa-red {
    display: flex;
    flex-wrap: wrap;
  }

  .settings-columns-portal .pdv-stopa-red > [data-pdv="name"] {
    flex: 1 1 calc(100% - 120px);
    min-width: 0;
  }

  .settings-columns-portal .pdv-stopa-broj {
    flex: 0 0 110px;
  }

  .settings-columns-portal .pdv-stopa-artikli {
    margin-left: auto;
  }

  .settings-columns-portal .pdv-stopa-razlog {
    flex: 1 1 100%;
  }
}

@media (max-width: 760px) {
  .pdv-stopa-red {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .pdv-stopa-red .button {
    grid-column: 1 / -1;
  }
}

/* Super admin po tabovima (v1.0.109, docs/b2b-super-admin-tabovi.html):
   broj uz tab, plocice sa brojkama, „Traži potez" sa bojom po tezini,
   sklopljeni spiskovi (zaustavljene, ne prati se) i tab Probe. */
.super-tab-n {
  background: var(--brand-soft);
  border-radius: 999px;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
}

.super-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.super-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
}

.super-tile strong {
  font-size: 22px;
  line-height: 1.1;
}

.super-tile span {
  color: var(--muted);
  font-size: 12.5px;
}

.super-tile.pazi strong {
  color: var(--warn);
}

.super-moves h2 {
  margin: 0 0 10px;
}

.super-move {
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px 8px 12px;
}

.super-move.crv { border-left-color: #dc2626; background: #fef6f6; }
.super-move.zut { border-left-color: #d97706; background: #fffbf2; }
.super-move.pla { border-left-color: var(--brand); }

.super-move-text {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font: inherit;
  gap: 2px;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.super-move-text:hover strong {
  color: var(--brand);
}

.super-move-text .muted {
  font-size: 12.5px;
}

.super-move-arrow {
  color: var(--muted-soft);
  font-size: 20px;
  line-height: 1;
}

.super-moves-empty {
  margin: 4px 0 8px;
}

.super-moves-note {
  font-size: 12px;
  margin: 8px 0 0;
}

.super-collapsed {
  margin-top: 16px;
}

.super-collapsed summary {
  cursor: pointer;
  font-weight: 700;
}

.super-collapsed[open] summary {
  margin-bottom: 8px;
}

.super-collapsed .super-attention-list li {
  align-items: center;
}

.super-phase {
  background: var(--brand-soft);
  border-radius: 999px;
  color: var(--brand-dark);
  font-size: 12px;
  padding: 2px 8px;
  white-space: nowrap;
}

.super-trials-table td {
  vertical-align: top;
}

.super-trials-table td .button {
  margin-left: 4px;
  min-height: 0;
  padding: 3px 9px;
}

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

  .super-move {
    flex-wrap: wrap;
  }

  .super-move-text {
    flex-basis: 100%;
  }

  .super-move-arrow {
    display: none;
  }
}

/* Signali super admina (v1.0.111): stanje firme, trend 15 d, „raste" na Danas. */
.super-move.zel { border-left-color: #16a34a; background: #f3fbf5; }

.super-state {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  white-space: nowrap;
}

.super-state.crvena { background: #fee2e2; color: #991b1b; }
.super-state.zelena { background: #dcfce7; color: #166534; }
.super-state.zuta { background: #fef3c7; color: #92400e; }
.super-state.plava { background: var(--brand-soft); color: var(--brand-dark); }
.super-state.siva { background: #eef2f7; color: var(--muted); }

.super-trend {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.super-trend.gore { color: #166534; font-weight: 600; }
.super-trend.dole { color: #b91c1c; font-weight: 600; }

/* Tabele super admina u uskom prozoru (izmereno 25.09.: sadrzaj ~600 px) su
   se sabijale do jednog slova po redu; sada se pomeraju vodoravno.
   Od v1.0.227 bez najmanje sirine tabele i kolona: reci se od v1.0.161 ne
   lome (#super-content .table-wrap td), pa tabela sama ne ide ispod svoje
   najuze sirine, a ispod 1.100 px su obe kartice. Sa min-width 980/880 i 96 px
   po koloni su na laptopu od 1.280 px Klijenti bili 1.025 px u okviru od 903
   (lepljiva kolona radnji je pokrivala „Promet 30 d"), a Probe 943 u 903. */
.super-company-table td:first-child,
.super-trials-table td:first-child {
  min-width: 160px;
}

/* Paneli jedan ispod drugog u super admin tabu (v1.1.01): do sada slepljeni,
   kao Probe i Istorija. Paneli u mrezi analitike imaju svoj gap. */
#super-content > .panel + .panel {
  margin-top: 16px;
}

/* Isto i kad posle panela dolazi drugi blok (v2.0.38): panel Kampanje na vrhu
   Proba bio je slepljen za pločice ispod sebe, jer pravilo iznad hvata samo
   panel posle panela. */
#super-content > .panel + :not(.panel) {
  margin-top: 16px;
}

/* Panel-harmonika (Istorija proba): naslov je dugme, strelica desno. */
.super-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.super-fold > summary::-webkit-details-marker {
  display: none;
}

.super-fold > summary h2 {
  margin: 0;
}

.super-fold > summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s;
}

.super-fold[open] > summary::after {
  transform: rotate(180deg);
}

.super-fold[open] > summary {
  margin-bottom: 12px;
}

/* Skloni iz istorije (v1.1.02): sitno dugme ispod ishoda; sklonjene bledje. */
.super-trial-hide {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.super-trials-hidden-toggle {
  margin: 12px 0 0;
}

.super-trials-hidden td {
  opacity: 0.7;
}

/* Klijenti na 1.280 px: i bez najmanjih sirina tabela je 926 px u okviru od
   903; uzi razmak u celijama je vraca u okvir, visina redova ostaje ista. */
@media (max-width: 1400px) {
  .super-company-table th,
  .super-company-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Tab „Naplata" i dijalog (v1.0.124). */
.super-billing-table {
  min-width: 860px;
}

.super-billing-table td:first-child {
  min-width: 180px;
}

.super-billing-cards {
  display: grid;
  gap: 8px;
}

.super-billing-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
}

.super-billing-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.super-billing-modal {
  max-width: 460px;
}

.super-activate-billing {
  max-width: 360px;
  margin-top: 10px;
}

/* Tab „Korišćenje" i detalj korišćenja (v1.0.122). Od v1.0.227 bez min-width
   900 px (ispod 1.100 px je ionako kartica), a zaglavlja kolona sa brojevima
   se prelamaju: „Tim: dani sa ulaskom" u jednom redu je uzimalo 168 px, pa je
   na 1.280 px tabela bila 927 px u okviru od 903, a „Ne koristi" je ostajala
   na 75 px i isla u sedam redova (red 169 px; sada 3 reda, 88 px, bez
   klizanja). Do 1.500 px: na 1.536 px bi samo zaglavlje poraslo (44 -> 61). */
@media (max-width: 1500px) {
  .super-usage-table th {
    white-space: normal;
  }
}

.super-usage-table td:first-child {
  min-width: 180px;
}

.super-usage-detail-row > td {
  background: var(--panel-soft);
}

.super-usage-detail {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  padding: 8px 0;
}

.super-usage-detail h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

/* Visina je zadata, pa stubac dana (stretch) ima punu visinu i procenti rade. */
.super-usage-chart {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 120px;
  border-bottom: 1px solid var(--line);
}

.super-usage-day {
  display: flex;
  flex: 1 1 0;
  flex-direction: column-reverse;
  min-width: 2px;
}

.super-usage-day .tim {
  background: var(--brand);
}

.super-usage-day .kupci {
  background: var(--line-strong);
}

.super-usage-axis {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.super-usage-parts {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}

.super-usage-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.super-usage-bar > span {
  display: block;
  height: 100%;
  background: var(--brand);
}

@media (max-width: 900px) {
  .super-usage-detail {
    grid-template-columns: 1fr;
  }
}

/* ——— Obrazac artikla u pet celina (v1.0.113) ———
   Levo sta je artikal (osnovno, slike, cena), desno kako se prodaje (zaliha,
   vidljivost). Dve kolone tek od 1100 px ekrana: prozor artikla je siroki do
   1080 px, a strana „Dodaj proizvod" ima bocni meni; ispod toga su kolone uske
   za tri polja u redu. Kolone su zadate izricito, ne `auto-fit` (v. memoriju
   „CSS zamke na telefonu": auto kolone). */
.artikal-kolone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.artikal-kolona {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

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

.artikal-celina {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.artikal-celina > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--brand-dark);
  font-size: 14px;
}

.artikal-celina > h3 span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11.5px;
}

/* Blok slika nosi svoj natpis „Slike"; u celini koja se tako zove on je visak. */
.artikal-celina .slike-artikla > label {
  display: none;
}

/* Cene po klasama su vec u celini „Cena i PDV", pa njihov okvir ne treba. */
.artikal-celina .price-class-box {
  padding: 0;
  border: 0;
  background: transparent;
}

.artikal-celina .form-grid,
.artikal-celina .field {
  margin: 0;
}

/* Na telefonu celine nemaju okvir, samo liniju izmedju: sa okvirom i unutrasnjim
   razmakom obrazac je bio 2.358 px, 158 px duzi nego pre podele (izmereno 25.09.). */
@media (max-width: 620px) {
  .artikal-kolone,
  .artikal-kolona {
    gap: 0;
  }

  .artikal-celina {
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }

  .artikal-kolona:first-child > .artikal-celina:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* Stranica klijenta (v1.0.118, docs/b2b-stranica-klijenta.html): zaglavlje sa
   stanjem, meni „⋯", podtabovi, kartice Pregleda i cipovi filtera. */
.super-client-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.super-client-title h2 {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}

.super-client-title p {
  margin: 0;
}

.super-client-back {
  color: var(--muted);
  font-weight: 600;
}

.super-client-actions {
  align-items: center;
  display: flex;
  flex: none;
  gap: 8px;
}

.super-menu {
  position: relative;
}

.super-menu [data-menu-toggle] {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.super-menu-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 4px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
}

.super-menu-list[hidden] {
  display: none;
}

.super-menu-list button {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 8px 14px;
  text-align: left;
}

.super-menu-list button:hover {
  background: var(--panel-soft);
}

.super-menu-list button.opasno {
  color: #b91c1c;
}

.super-menu-list hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 0;
}

.super-subtabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 2px;
  margin: 16px 0 14px;
  overflow-x: auto;
}

.super-subtabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  font: inherit;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 8px 12px;
}

.super-subtabs button.on {
  border-bottom-color: var(--brand);
  color: var(--brand);
}

/* Mreza najvise 1.100 px (v1.0.120): na sirokom ekranu je kartica bila
   1.083 px, pa je naziv polja stajao daleko od vrednosti. Dve kartice u redu,
   svaka do ~545 px; ispod ~812 px sadrzaja jedna. */
.super-client-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  margin-top: 12px;
  max-width: 1100px;
}

.super-client-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}

.super-client-card h3 {
  font-size: 15px;
  margin: 0 0 8px;
}

.super-client-group {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 10px 0 2px;
  text-transform: uppercase;
}

.super-client-row {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 6px 0;
}

.super-client-row:last-of-type {
  border-bottom: 0;
}

.super-client-row .muted {
  text-align: right;
}

.super-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.super-chip {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  margin: 0 4px 4px 0;
  padding: 3px 10px;
}

.super-chip.on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 700;
}

.super-tile strong small {
  font-size: 13px;
  font-weight: 600;
}

.super-client-table {
  min-width: 760px;
}

/* Red kupca otvara kupca u panelu firme (v1.0.122). */
.super-client-klik {
  cursor: pointer;
}

.super-client-klik:hover td {
  background: var(--brand-soft);
}

/* Isto u panelu firme (v1.0.143): kupci, porudzbine kupca, tim, artikli. Ceo
   red otvara zapis; senka samo na misu, telefon je nema. */
.klik-red {
  cursor: pointer;
}

@media (hover: hover) {
  .klik-red:hover td {
    background: var(--brand-soft);
  }
}

@media (max-width: 900px) {
  .super-client-head {
    flex-direction: column;
  }

  .super-client-actions {
    width: 100%;
  }

  .super-client-actions > .button {
    flex: 1 1 auto;
  }

  .super-client-grid {
    grid-template-columns: 1fr;
  }
}

/* Aktivna firma: okvir stanja nosi samo skriveni obrazac „Zaustavi" i poruku. */
.super-company-state.samo-forma {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.super-subtabs {
  scrollbar-width: none;
}

.super-subtabs::-webkit-scrollbar {
  display: none;
}

/* Podaci firme (v1.0.119): sta nedostaje jednom gore, cetiri kartice,
   traka popunjenosti limita (crvena od 90 %). */
.super-facts-head {
  max-width: 1100px;
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 14px;
}

.super-client-row > span:last-child {
  text-align: right;
}

.super-client-row.super-limit {
  border-bottom: 0;
  padding-bottom: 2px;
}

.super-limit-bar {
  background: var(--line);
  border-radius: 999px;
  height: 6px;
  margin: 0 0 8px;
  overflow: hidden;
}

.super-limit-bar i {
  background: var(--brand);
  display: block;
  height: 100%;
}

.super-limit-bar.pun i {
  background: #dc2626;
}

/* Roba koja ceka dopremu (v1.0.126): napomena iznad stavki porudzbine i na
   zahvalnici, i oznaka „12 odmah / 8 ceka dopremu" uz kolicinu stavke. Boje
   su iste kao zuta oznaka zalihe, da se vide kao ista vrsta podatka. */
.doprema-napomena {
  margin: 14px 0;
  padding: 11px 14px;
  border: 1px solid #e7cb8d;
  border-left-width: 3px;
  border-radius: 7px;
  background: #fdf4e3;
  color: #6f4c0c;
  line-height: 1.45;
  text-align: left;
}

.stavka-doprema {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-top: 4px;
}

.stavka-doprema .stock-badge {
  font-size: 11px;
  white-space: nowrap;
}

.stavka-doprema .stock-badge + .stock-badge {
  margin-left: 0;
}

@media (max-width: 620px) {
  .order-items-table .stavka-doprema {
    align-items: flex-start;
  }
}

/* Zaliha u korpi (v1.0.127): traka iznad stavki i red ispod naziva stavke
   kojoj stanje ne pokriva kolicinu, sa „Uzmi N" i „Ukloni". Stroga traka je
   crvenkasta (porudzbina ne ide), meka zuta (ide, deo ceka dopremu). */
.cart-stock-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid #f4c7cb;
  border-left-width: 3px;
  border-radius: 7px;
  background: #fff5f6;
  color: #8a1420;
  line-height: 1.45;
}

.cart-stock-notice.soft {
  border-color: #e7cb8d;
  background: #fdf4e3;
  color: #6f4c0c;
}

.cart-stock-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.cart-stock-line .stock-badge + .button,
.cart-stock-line .button + .button {
  margin-left: 0;
}

.cart-stock-notice .button,
.cart-stock-line .button {
  min-height: 30px;
  padding: 4px 11px;
  font-size: 12.5px;
}

.cart-table tr.ima-nedostatak > td {
  background: #fffaf0;
}

#go-checkout:disabled,
[data-checkout-proxy]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cart-table tr.cart-stock-row > td {
  padding-top: 0;
  background: #fffaf0;
}

.cart-table tr.ima-nedostatak > td {
  border-bottom: 0;
}

@media (max-width: 620px) {
  .cart-table tr.cart-stock-row {
    display: block;
    padding: 0 0 10px;
  }

  .cart-table tr.cart-stock-row > td {
    display: block;
    padding: 0;
    background: transparent;
  }

  .cart-table tr.cart-stock-row > td:first-child {
    display: none;
  }

  .cart-table tr.ima-nedostatak {
    border-bottom: 0;
  }

  .cart-table tr.ima-nedostatak > td {
    background: transparent;
  }
}

/* „Javi mi kad stigne" (v1.0.129): posle zahteva dugme ostaje, ali zeleno i
   sa kvacicom, da kupac vidi da je zahtev primljen i da moze da ga povuce. */
.button.javi-mi-trazeno {
  border-color: #a9d8be;
  background: #e8f6ed;
  color: #1a7a43;
}

.detail-javi-mi {
  display: block;
  margin-top: 6px;
}

/* U redu cenovnika (v1.0.170): ispod oznake zalihe, u istoj celiji. */
.javi-mi-u-redu {
  display: block;
  margin-top: 4px;
}

.javi-mi-u-redu .button {
  white-space: nowrap;
}

/* Na telefonu je kartica artikla gusta: puno dugme od 36 px ju je dizalo za
   trecinu. Pilula od 30 px staje uz oznaku zalihe. */
@media (max-width: 900px) {
  .javi-mi-u-redu .button {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
  }
}

/* Ekran „Čekam robu" (v1.0.170): red po artiklu — slika, naziv, stanje,
   „Otkaži". Na telefonu stanje prelazi ispod naziva. */
.cekam-spisak {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.cekam-red {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "slika naziv stanje otkazi";
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line, #e5e7eb);
}

.cekam-slika { grid-area: slika; }
.cekam-naziv { grid-area: naziv; display: grid; gap: 2px; min-width: 0; }
.cekam-stanje { grid-area: stanje; display: grid; gap: 4px; justify-items: start; min-width: 0; }
.cekam-otkazi { grid-area: otkazi; }

.cekam-slika .product-thumb,
.cekam-slika .thumb-placeholder {
  width: 56px;
  height: 56px;
}

@media (max-width: 640px) {
  .cekam-red {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas:
      "slika naziv otkazi"
      "slika stanje otkazi";
    gap: 6px 10px;
  }

  .cekam-slika .product-thumb,
  .cekam-slika .thumb-placeholder {
    width: 48px;
    height: 48px;
  }
}

/* „Čeka N kupaca" u spisku artikala (v1.0.170): dugme u obliku oznake, otvara
   spisak kupaca koji su trazili „javi mi". */
button.stock-waiting {
  margin-left: 6px;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.stock-waiting-spisak {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.stock-waiting-spisak li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line, #e5e7eb);
}

/* ——— Dug kupcima (v1.0.136) ———
   Cip „Duguje se" u porudzbinama otvara panel iznad spiska. Prikaz „po
   artiklu" sakriva sam spisak porudzbina (klasa na .panel), „po porudzbini"
   ostavlja filtriran spisak. Oznaka „duguje N" stoji uz broj porudzbine. */
.order-owed {
  display: block;
  width: fit-content;
  margin-top: 4px;
  font-size: 11px;
  padding: 1px 7px;
}

.stock-owed {
  margin-left: 6px;
}

.dug-panel {
  margin: 0 0 14px;
}

.dug-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 10px;
}

.dug-prikaz {
  display: flex;
  gap: 6px;
}

.dug-zbir {
  font-size: 13px;
}

.dug-po-artiklu .orders-table,
.dug-po-artiklu .orders-more,
.dug-po-artiklu .orders-empty-note,
.dug-po-artiklu .orders-limit-note {
  display: none;
}

.dug-artikli {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.dug-zaglavlje,
.dug-artikal > summary {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
}

.dug-zaglavlje {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}

.dug-artikal + .dug-artikal {
  border-top: 1px solid var(--line);
}

.dug-artikal > summary {
  cursor: pointer;
  list-style: none;
}

.dug-artikal > summary::-webkit-details-marker {
  display: none;
}

.dug-artikal > summary:hover {
  background: var(--panel-soft);
}

.dug-naziv strong::before {
  content: "▸ ";
  color: var(--ink-soft);
}

.dug-artikal[open] .dug-naziv strong::before {
  content: "▾ ";
}

.dug-naziv small {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
}

.dug-broj small {
  display: none;
}

.dug-broj b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dug-broj b .stock-badge,
.dug-broj b .muted {
  font-weight: 600;
}

.dug-stavke {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  background: var(--panel-soft);
}

.dug-stavka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px 12px;
  align-items: center;
  padding: 8px 12px 8px 28px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.dug-porudzbina small {
  display: block;
}

.dug-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--brand-dark, #12408f);
  cursor: pointer;
  text-decoration: underline;
}

.dug-kolicina {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dug-otpis {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dug-otpis input {
  flex: 1 1 260px;
  min-width: 0;
}

.dug-otpis[hidden],
.dug-radnje [hidden] {
  display: none;
}

.order-history li.writeoff strong {
  color: #8a5f0f;
}

@media (max-width: 620px) {
  .dug-zaglavlje {
    display: none;
  }

  .dug-artikal > summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }

  .dug-naziv {
    grid-column: 1 / -1;
  }

  .dug-broj small {
    display: block;
    font-size: 11px;
    color: var(--ink-soft);
  }

  .dug-stavka {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 12px;
  }

  .dug-starost {
    grid-column: 1;
  }

  .dug-radnje {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

/* Dug kupcima, faza 2 (v1.0.137): „Pokrij sa stanja" iznad stavki artikla i
   „Dodeli" uz „Otpiši". */
.dug-pokrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 9px 12px 9px 28px;
  background: #fdf4e3;
  border-top: 1px solid #e7cb8d;
  font-size: 14px;
}

.dug-radnje {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 620px) {
  .dug-pokrij {
    padding-left: 12px;
  }
}

/* Dug posle „Poslata" (v1.0.138): izbor dopuna / otpis u pregledu porudzbine,
   i dve oznake uz broj porudzbine jedna ispod druge. */
.order-dug-izbor {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e7cb8d;
  border-radius: 10px;
  background: #fdf4e3;
}

.order-dug-izbor[hidden],
.order-dug-izbor input[hidden] {
  display: none;
}

.order-dug-stavke {
  margin: 0;
  font-size: 14px;
}

.order-dug-opcija {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  cursor: pointer;
}

.order-dug-opcija input {
  margin-top: 3px;
}

.order-dug-opcija small {
  display: block;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.order-owed + .order-owed {
  margin-left: 0;
}

.order-history li.dopuna strong {
  color: #1a7a43;
}

.dug-kolicina .stock-badge {
  margin-left: 6px;
}

@media (max-width: 620px) {
  /* Dva dugmeta dopune u „auto" koloni su prvu kolonu stiskala na 0 px
     (v1.0.138, mereno na 375 px): radnje dobijaju ceo red i prelamaju se. */
  .dug-stavka .dug-radnje {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-wrap: wrap;
    justify-self: stretch;
    justify-content: flex-end;
  }

  .dug-kolicina {
    white-space: normal;
    text-align: right;
  }

  .dug-kolicina .stock-badge {
    display: inline-block;
    margin: 4px 0 0;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  /* Red stavke na telefonu: porudzbina preko cele sirine, ispod kolicina i
     starost, pa dugmad — zelena oznaka dopune je drugu kolonu sirila na racun
     prve (100 px od 311). */
  .dug-stavka .dug-porudzbina {
    grid-column: 1 / -1;
  }

  .dug-stavka .dug-kolicina {
    grid-column: 1;
    text-align: left;
  }

  .dug-stavka .dug-starost {
    grid-column: 2;
    grid-row: auto;
    justify-self: end;
  }
}

/* ——— Podesavanja: raspored B (v1.0.140) ———
   docs/b2b-zalihe-podesavanja-mokap.html i docs/b2b-podesavanja-kartice-mokap.html.
   Na sirokom monitoru (1.880 px) svako polje je islo preko cele sirine: u broj
   „0" je stajalo 360 px, a strelica liste ~1.700 px od teksta. Sada sirina ima
   gornju granicu, podesavanja idu u kartice u dve kolone, a lista je siroka
   koliko joj treba tekst. */
.settings-panel {
  max-width: 1240px;
}

.settings-panel .field > select {
  width: auto;
  min-width: 200px;
  max-width: 100%;
  /* .field je mreza: bez ovoga se i lista sa width:auto razvuce preko reda. */
  justify-self: start;
}

.settings-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.settings-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-columns .settings-card {
  gap: 12px;
  padding: 16px;
}

.settings-columns .settings-card h3 {
  font-size: 16px;
}

.settings-columns .settings-card .field {
  margin: 0;
}

.settings-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.settings-panel .field input.polje-broj {
  width: 96px;
}

/* Izbor na dugmadima: dve ili tri opcije jedna pored druge (isti izgled kao
   „Kako se prikazuje zaliha"). */
.choice-cards.c2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-cards.c3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Prikaz zalihe u kartici od pola sirine: cetiri nacina u dva reda. */
.settings-columns .stock-modes:not(.c2):not(.c3) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-columns .stock-detail,
.stock-detail.settings-columns {
  border-top: 0;
  padding-top: 4px;
}

/* Lestvica opsega: broj uzak, tekst sirok, boja kao cetiri kruzica. */
.stock-band-head,
.stock-band-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto 32px;
  gap: 8px;
  align-items: center;
}

.stock-band-head {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.stock-bands {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.stock-tone-pick {
  display: inline-flex;
  gap: 6px;
}

.stock-tone {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 2px #fff;
}

.stock-tone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.stock-tone.green { background: #1a7a43; }
.stock-tone.amber { background: #d9a53a; }
.stock-tone.red { background: #c0492f; }
.stock-tone.neutral { background: #9aa6b8; }

.stock-tone:has(input:checked) {
  border-color: var(--ink);
}

.stock-tone:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

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

@media (max-width: 620px) {
  .choice-cards.c2,
  .choice-cards.c3 {
    grid-template-columns: 1fr;
  }

  .stock-band-head {
    display: none;
  }

  .stock-band-row {
    grid-template-columns: 72px minmax(0, 1fr) 32px;
  }

  .stock-band-row .stock-tone-pick {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .settings-panel .field > select {
    width: 100%;
    min-width: 0;
  }
}

/* Staro pravilo iz v1.0.54 (ispod 720 px tekst preko celog reda) bi u novoj
   mrezi gurnulo kruzice i dugme u novi red. */
.stock-band-row [data-stock-band-text] {
  grid-column: auto;
}

/* Izabrana boja se vidi odmah: ostale su blede. */
.stock-tone:not(:has(input:checked)) {
  opacity: .4;
}

.stock-tone:hover {
  opacity: 1;
}

.settings-panel .stock-bands-field [data-add-stock-band] {
  justify-self: start;
  width: auto;
}

/* ——— Podesavanja: Portal (P1) i Podaci firme (F2), v1.0.141 ——— */
.settings-columns-portal {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.settings-inline-top {
  align-items: flex-start;
  gap: 12px;
}

.settings-inline-top > .field {
  margin: 0;
}

.settings-panel .field input.polje-valuta {
  width: 96px;
}

.settings-panel .field input.polje-iznos {
  width: 150px;
}

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

/* Placanje: kompaktan red — prekidac, naziv i tip, „Uredi", ×. */
.settings-panel .payment-setting-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 32px;
  gap: 10px;
  align-items: center;
}

.payment-setting-title strong {
  display: block;
  font-size: 14px;
}

.payment-setting-title small {
  display: block;
  font-size: 12px;
}

.payment-setting-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.payment-setting-body[hidden] {
  display: none;
}

/* Podaci firme: pregled desno ostaje na ekranu dok se levo skroluje. */
.settings-column-sticky {
  position: sticky;
  top: 12px;
}

.firma-pregled-oznaka {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.firma-pregled-meni {
  --firma-boja: #1f6feb;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--firma-boja);
  color: #fff;
}

.firma-pregled-meni img,
.firma-inicijali {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: contain;
  background: #fff;
  flex: none;
}

.firma-inicijali {
  display: grid;
  place-items: center;
  color: var(--firma-boja);
  font-size: 12px;
  font-weight: 800;
}

.firma-pregled-papir {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgba(15, 30, 60, .06);
}

.firma-papir-glava {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1c2433;
}

.firma-papir-logo {
  display: block;
  max-width: 80px;
  max-height: 34px;
  margin-bottom: 4px;
  object-fit: contain;
}

.firma-papir-naslov {
  text-align: right;
  white-space: nowrap;
}

.firma-papir-stavke {
  margin: 8px 0 0;
  color: var(--muted);
}

.firma-nema {
  color: #b23b23;
  font-style: italic;
}

@media (max-width: 1100px) {
  .settings-columns-portal {
    grid-template-columns: 1fr;
  }

  .settings-column-sticky {
    position: static;
  }
}

/* Red dostave u kartici od pola sirine: najmanje sirine kolona (150/120/110/90)
   su na 1.200 px gurale karticu 95 px van ekrana (mereno, v1.0.141). */
.settings-card .settings-row:not(.stock-band-row) {
  grid-template-columns: minmax(100px, 1.2fr) minmax(76px, .9fr) minmax(76px, .8fr) minmax(64px, .7fr) 32px;
  gap: 8px;
}

.settings-column > .settings-card {
  min-width: 0;
}

/* ——— Podesavanja: E-mail (E2) i Izgled prodavnice (L1), v1.0.142 ——— */
.settings-email-layout {
  max-width: 1000px;
}

.email-rows {
  display: grid;
}

.email-group-title {
  padding: 12px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.email-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 190px) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 9px 4px;
  border-top: 1px solid var(--line);
}

.email-row.is-open {
  background: var(--panel-soft);
}

.email-row-switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.email-row-name strong {
  display: block;
  font-size: 14px;
}

.email-row-name small {
  display: block;
  font-size: 12px;
}

.email-row-to {
  font-size: 13px;
}

.email-row-edit {
  grid-column: 2 / -1;
  display: grid;
  gap: 10px;
  padding: 8px 0 4px;
}

.email-row-edit[hidden] {
  display: none;
}

.email-template-help summary {
  cursor: pointer;
  font-weight: 600;
}

/* Izgled prodavnice: kartica po izgledu, sa skicom rasporeda. */
.shop-layout-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.shop-layout-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
}

.shop-layout-card.is-default {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.shop-layout-card small {
  font-size: 12px;
}

.shop-layout-sketch {
  display: grid;
  gap: 4px;
  height: 64px;
  padding: 6px;
  border-radius: 7px;
  background: var(--panel-soft);
}

.shop-layout-sketch i {
  display: block;
  border-radius: 3px;
  background: var(--line-strong);
}

.shop-layout-sketch.list { grid-template-rows: repeat(4, 1fr); }
.shop-layout-sketch.large { grid-template-columns: 26px 1fr; grid-template-rows: 1fr 1fr; }
.shop-layout-sketch.grid { grid-template-columns: repeat(4, 1fr); }
.shop-layout-sketch.showcase { grid-template-columns: repeat(2, 1fr); }

.shop-layout-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.shop-layout-pick input {
  accent-color: var(--brand);
}

[data-shop-photo-note] .warn {
  display: block;
  padding: 9px 12px;
  border: 1px solid #e7cb8d;
  border-radius: 9px;
  background: #fdf4e3;
  color: #8a5f0f;
}

@media (max-width: 900px) {
  .shop-layout-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .email-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .email-row-to {
    display: none;
  }

  .email-row-edit {
    grid-column: 1 / -1;
  }
}

/* Na telefonu red dostave ide jedan ispod drugog, kao i van kartice (pravilo
   iz v1.0.24 ispod 900 px); gornje pravilo ga je nadjacavalo i kartica je na
   390 px izlazila 48 px van ekrana. */
@media (max-width: 900px) {
  .settings-card .settings-row:not(.stock-band-row) {
    grid-template-columns: 1fr 38px;
  }
}

/* ——— Brojevi uz stavke bocnog menija (v1.0.147) ——— */
.nav-items button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-broj {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.nav-broj.upozorenje {
  background: #d9a53a;
  color: #1a1300;
}

.nav-broj[hidden] {
  display: none;
}

/* ——— Zaglavlje admin ekrana: broj zapisa i „+ Dodaj …" (v1.0.147) ——— */
.naslov-red {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.page-count {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-count:empty,
.topbar-glavno:empty {
  display: none;
}

.glavno-dugme-ekrana {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.glavno-dugme-ekrana > span:first-child {
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}

.nazad-na-spisak {
  margin-bottom: 12px;
}

@media (max-width: 620px) {
  .glavno-dugme-tekst {
    display: none;
  }

  .glavno-dugme-ekrana {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }
}

/* ——— Kupci: cekaju odobrenje, cipovi, klasa kao oznaka (v1.0.147) ———
   Zelena pozadina odobrenog kupca (do v1.0.146) je stajala na 11 od 12 redova
   i nije nosila informaciju; boja je sada samo tamo gde nesto ceka odluku. */
.cekaju-odobrenje {
  border-color: #e6c98a;
  background: #fffaf0;
}

.cekaju-odobrenje h2 {
  margin: 0 0 8px;
  font-size: 16px;
}

.cekaju-red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-top: 1px solid #f0e2c2;
}

.cekaju-red > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cekaju-dugmad {
  display: flex;
  gap: 8px;
}

.order-chip.cip-upozorenje:not(.on) {
  border-color: #e6c98a;
  color: #8a5f0f;
  background: #fffaf0;
}

.customer-row.kupac-ceka td {
  background: #fffaf0;
}

.customer-row .cell-klasa .klasa-tekst {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.row-menu-naslov {
  padding: 6px 10px 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.row-menu-item.trenutna {
  color: var(--brand-dark);
  font-weight: 700;
}

.row-menu-razmak {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}

/* ——— Artikli: traka spiska i masovne izmene (v1.0.147) ———
   Do v1.0.146 je crveni blok „Masovne izmene" sa dugmetom „Premesti celu
   prodavnicu u obrisane" stajao stalno otvoren iznad tabele. Sada se na
   racunaru, kao na telefonu od v1.0.75, pojavljuje tek kad je nesto oznaceno,
   a radnja nad celim katalogom je u meniju „⋯" u traci. */
.toolbar-razmak {
  flex: 1 1 0;
}

@media (min-width: 621px) {
  .product-bulk {
    display: none;
  }

  .product-bulk.ima-oznacenih {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 10px 13px;
    border: 1px solid #b9c9f5;
    border-radius: 10px;
    background: var(--brand-soft);
  }

  .product-bulk.ima-oznacenih .product-bulk-info {
    display: inline;
    font-weight: 700;
    color: var(--brand-dark);
  }

  .product-bulk.ima-oznacenih .danger-actions {
    margin-left: auto;
  }
}

@media (max-width: 620px) {
  .product-list-toolbar .toolbar-razmak {
    display: none;
  }

  .product-list-toolbar .product-list-meni {
    justify-self: end;
  }
}

.nav-group.open .nav-broj-grupe {
  display: none;
}

.nav-heading .nav-broj-grupe {
  margin-left: auto;
  margin-right: 6px;
}

/* ——— Detalji kupca na jednoj strani (v1.0.148) ———
   Zaglavlje kupca (ime, status, klasa, brojke, radnje), tabovi kao podvuceni
   natpisi, a podaci u cetiri kartice u dve kolone — kao Podesavanja. */
.kupac-zaglavlje {
  display: grid;
  gap: 12px;
}

.kupac-zaglavlje-red {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.kupac-ime {
  min-width: 0;
}

.kupac-ime h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 22px;
}

.kupac-ime p {
  margin: 0;
}

.klasa-oznaka {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* „· iz CRM-a" uz naziv: u uskoj koloni (klase, v1.1.26) lomio se na crtici. */
.iz-crma {
  white-space: nowrap;
}

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

.kupac-brojke {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.kupac-brojke b {
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.kupac-tabovi {
  display: flex;
  gap: 22px;
  margin: 4px 0 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.kupac-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 8px 2px;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

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

.kupac-tab.on {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}

.kupac-kartice {
  max-width: 1180px;
}

.kupac-polja-uska {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 170px));
  gap: 12px;
}

.kupac-polja-grad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 12px;
}

.kupac-lozinka {
  display: flex;
  gap: 8px;
  max-width: 380px;
}

.kupac-lozinka input {
  flex: 1;
  min-width: 0;
}

.stock-modes.kupac-izbor-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stock-modes.kupac-izbor-klase {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.stock-mode input:disabled + span {
  cursor: default;
  opacity: 0.7;
}

.stock-mode input:disabled:checked + span {
  opacity: 1;
}

@media (max-width: 620px) {
  .stock-modes.kupac-izbor-3 {
    grid-template-columns: 1fr;
  }

  .kupac-radnje {
    width: 100%;
  }

  .kupac-radnje .button {
    flex: 1;
  }
}

/* Forma kupca je od v1.0.148 niz kartica; okvir .customer-detail-form (ostaje
   za formu novog kupca) bi ih uokvirio jos jednom. */
.customer-detail-form.kupac-kartice {
  padding: 0;
  border: 0;
  background: none;
}

/* ——— Pregled porudzbine za admina (v1.0.148) ———
   Gore broj, status i stampa; ispod traka koraka sa jednim dugmetom sledeceg
   koraka i „⋯"; zatim stavke levo i kolona sa kupcem, dostavom i istorijom
   desno. Kupcev pregled ima svoje (stare) klase i ne menja se. */
.order-admin-pregled .modal-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.order-admin-pregled .modal-head h2 .status {
  font-size: 13px;
}

.order-admin-pregled .modal-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-print-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}

.order-print-menu > summary::-webkit-details-marker {
  display: none;
}

.order-admin-telo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}

.order-admin-stavke {
  min-width: 0;
}

.order-admin-strana {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  font-size: 13px;
}

.order-admin-kupac {
  display: grid;
  gap: 3px;
  line-height: 1.45;
}

.order-admin-kupac h3,
.order-admin-strana .order-history summary h3 {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-admin-strana .order-method-details {
  grid-template-columns: 1fr 1fr;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.order-admin-strana .order-customer-extra {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.order-admin-strana .order-history {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.order-status-more {
  align-self: center;
}

@media (max-width: 900px) {
  .order-admin-telo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  /* Adminov pregled (v1.0.148): status odmah ispod zaglavlja, pa stavke i
     kolona kupca. Bez reda bi .order-admin-telo (order 0) stao ispred statusa. */
  .order-admin-pregled > .order-admin-telo { order: 3; }
}

/* Forma klase (v1.0.148, v1.0.150): naziv i procenat uski. */
.klasa-naziv {
  max-width: 420px;
}

.klasa-procenat {
  max-width: 140px;
}

.klasa-redosled {
  max-width: 760px;
  margin: 0;
  font-size: 13px;
}

@media (min-width: 621px) {
  /* „Prikazi jos" na racunaru (v1.0.151): sirina teksta, na sredini. */
  .orders-table + .orders-more {
    width: auto;
    min-width: 260px;
    margin: 12px auto 0;
  }
}

/* ——— Analitika (v1.0.151): jedan red filtera, pet brojki, tri kartice ———
   docs/b2b-admin-ekrani-raspored.html, odeljak 8. Telefon zadrzava svoj
   raspored (rang liste, „Filteri"), menjaju se samo kartice i skracivanje. */
.an-tabovi {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

@media (min-width: 901px) {
  .analytics-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
  }

  .analytics-filters .analytics-ranges {
    flex: 0 0 auto;
  }

  .analytics-filters .analytics-dates,
  .analytics-filters .analytics-date-echo {
    flex: 1 0 100%;
  }

  .analytics-filters select {
    width: auto;
    min-width: 150px;
    max-width: 230px;
  }

  .analytics-filter-actions {
    margin-left: auto;
  }

  .an-brojke {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 16px;
  }

  .an-brojke > .cards {
    margin: 0;
  }
}

@media (min-width: 621px) {
  /* Prvih osam; ostatak iza „Prikazi svih N". */
  .an-skraceno-siroko:not(.an-sve) tbody tr:nth-child(n + 9) {
    display: none;
  }

  .an-vise.an-vise-siroko {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
  }
}

/* ——— Ponude u jednom redu i PDF katalozi (v1.0.151) ——— */
.offers-admin-table td {
  vertical-align: top;
}

.offers-admin-table .link-button {
  margin-right: 6px;
}

.offer-red-opis {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
}

.offer-red-meni {
  width: 48px;
  text-align: right;
}

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

.pdf-zaglavlje h2 {
  margin: 0;
}

.pdf-forma {
  max-width: 820px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.stock-modes.pdf-izbor {
  grid-template-columns: repeat(2, minmax(0, 220px));
  margin-bottom: 8px;
}

.pdf-fajl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdf-fajl-dugme {
  position: relative;
  cursor: pointer;
}

.pdf-fajl-ulaz {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pdf-forma-dugmad {
  display: flex;
  gap: 8px;
}

@media (max-width: 620px) {
  .stock-modes.pdf-izbor {
    grid-template-columns: 1fr 1fr;
  }

  .offers-admin-table thead {
    display: none;
  }

  .offers-admin-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .offers-admin-table td {
    padding: 0;
    border: 0;
  }

  .offers-admin-table td:first-child {
    grid-column: 1 / 2;
  }

  .offers-admin-table td.offer-red-meni {
    grid-column: 2;
    grid-row: 1;
  }

  .offers-admin-table td:nth-child(2),
  .offers-admin-table td.num {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* ——— Super admin: raspored (v1.0.153, docs/b2b-super-admin-raspored.html) ———
   Poslovi su u bocnom meniju; Klijenti imaju prekidac pogleda (Puls ·
   Korišćenje · Naplata); stranica firme ima desnu kolonu sa podacima firme,
   naplatom i limitima; red tabele ima jedno dugme i meni „⋯". */
.super-pogledi {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: inline-flex;
  gap: 2px;
  margin-bottom: 14px;
  max-width: 100%;
  overflow-x: auto;
  padding: 3px;
}

.super-pogledi button {
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
}

.super-pogledi button.on {
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--brand);
}

.super-client-dvo {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.super-client-main {
  min-width: 0;
}

.super-client-main .super-client-grid {
  max-width: none;
}

.super-client-rail {
  display: grid;
  gap: 10px;
}

.super-client-rail .super-client-card h3 {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.super-client-rail .super-client-card h3 .link-button {
  font-size: 13px;
  font-weight: 600;
}

.super-client-rail .super-client-row > span:last-child {
  overflow-wrap: anywhere;
  text-align: right;
}

.super-rail-nema {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 0;
}

.super-verzija {
  font-weight: 700;
  margin: 0;
}

/* Komercijalna politika (v1.1.21): fajl, Otvori/Preuzmi, pa otpremanje. */
.super-politika-fajl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
}

.super-politika-fajl svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.super-politika-fajl strong,
.super-politika-fajl small {
  display: block;
  overflow-wrap: anywhere;
}

.super-politika-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.super-politika-forma {
  margin-top: 24px;
}

/* Slanje mejlom (v1.1.22). `.form` je grid, pa bez ovoga [hidden] ne skriva. */
.super-politika-mejl {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e5e7eb);
}

.super-politika-mejl[hidden] {
  display: none;
}

/* v1.1.24: „Pošalji mejlom" ostaje oznaceno dok je obrazac otvoren. */
.super-politika-dugmad .button.ghost.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.super-politika-dugmad {
  position: relative;
  align-items: center;
}

.super-politika-naslov {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

/* Polje za fajl je skriveno, a otvara ga dugme „Izaberi PDF" (label). Ne
   `display: none`: tako ostaje dostupno tastaturi, a fokus se vidi na dugmetu. */
/* Specificnost kao `.field input:not(...):not(...)` (width 100%, min-height
   40px), inace to pravilo pobedi i nevidljivo polje ima 714 px. */
.super-politika-forma .field input.super-politika-fajl-polje {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  min-height: 0;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.super-politika-fajl-polje:focus-visible + .button {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.super-politika-dugmad [data-politika-izabran] {
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Meni reda u tabeli: .table-wrap ima overflow, pa bi apsolutni meni bio
   odsecen; JS mu daje top/right uz samo dugme. */
.super-menu-list.fiksno {
  position: fixed;
  top: auto;
  z-index: 60;
}

.super-company-row-actions {
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.super-company-card-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.super-company-card-head h3 {
  margin: 0;
}

/* „⋯" na desnom kraju: meni se kaci desnom ivicom, pa bi uz levo dugme
   izasao 29 px van ekrana od 375 px (izmereno 30.09.2026). */
.super-company-card .super-company-row-actions {
  justify-content: space-between;
  margin-top: 10px;
}

/* Naplata: oba prikaza su u DOM-u, CSS bira (do v1.0.152 je JS birao
   jednom, pri crtanju, pa promena sirine prozora nije menjala prikaz). */
.super-billing-cards {
  display: none;
}

/* Desna kolona pored sadrzaja tek od 1.500 px (v1.0.159; do tada od 1.100):
   na 1.366 px je glavna kolona bila 673 px, pa su tabele kupaca i porudzbina
   klizile ili imale redove od 169 px. */
@media (max-width: 1500px) {
  .super-client-dvo {
    grid-template-columns: 1fr;
  }

  /* Ispod sadrzaja kartice idu u red (Firma, Portal, Naplata, Limiti). */
  .super-client-rail {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  }
}

@media (max-width: 900px) {
  .super-billing-cards {
    display: grid;
  }

  .table-wrap.super-billing-table-wrap {
    display: none;
  }

  .super-pogledi {
    display: flex;
  }

  .super-pogledi button {
    flex: 1 0 auto;
  }
}

/* Kolona radnji u tabeli Klijenata stoji uz desnu ivicu dok se tabela klizi:
   na 1.024 px je tabela 1.074 px u okviru od 647, pa su „Uđi u panel" i „⋯"
   bili van kadra (izmereno 30.09.2026). */
.super-company-table th:last-child,
.super-company-table td:last-child {
  background: var(--panel);
  box-shadow: -10px 0 10px -10px rgba(15, 31, 61, 0.25);
  position: sticky;
  right: 0;
}

/* Lepljiva celija (position: sticky) pravi svoj sloj, pa bi z-index menija
   vazio samo unutar nje: celije sledecih redova su prekrivale otvoren meni
   (v1.0.153 na testu: u prvom redu vidljiva 1 od 6 stavki). Celija sa
   otvorenim menijem ide iznad ostalih. */
.super-company-table td:last-child:has(.super-menu-list:not([hidden])) {
  z-index: 70;
}

/* Meni koji ne staje ispod dugmeta otvara se iznad njega (v1.0.154). */
.super-menu-list.nagore {
  bottom: calc(100% + 6px);
  top: auto;
}

/* „Uđi u panel" se ne prelama: bez toga tabela na ~1.366 px stisne kolonu
   radnji na sirinu jednog slova i tekst ide uspravno (v1.0.153 na testu). */
.super-company-row-actions .button {
  white-space: nowrap;
}

/* Puls („nije mereno — nema porudžbina") je bio najsira kolona (228 px) i
   gurao tabelu u klizanje na laptopu od 1.366 px; tekst sme u dva reda. */
.super-company-table td:nth-child(3) {
  max-width: 150px;
  white-space: normal;
}

.super-company-table th {
  white-space: normal;
}

/* Analitika platforme: tabele imaju po 5–6 kolona, pa u dve kolone na
   laptopu (panel ~509 px) sifre, datumi i imena firmi idu u tri reda.
   Ispod 1.500 px jedna ispod druge. Analitika firme (js/analytics.js) ostaje. */
@media (max-width: 1500px) {
  .super-analytics-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tabele Super admin centra: `.panel` ima overflow-wrap: anywhere, pa je na
   telefonu tabela stiskala kolonu na jedno slovo (Dnevnik 25 px, Analitika
   14 px — „Mo j Sm art Ne t"). Reci se ne lome; tabela klizi u svom okviru. */
#super-content .table-wrap th,
#super-content .table-wrap td {
  overflow-wrap: normal;
}

/* Dnevnik: red je blok (vreme i radnja, pa firma i ko, pa detalji) umesto pet
   kolona. Od v1.0.161 do 1.100 px, ne samo na telefonu: na testu je na
   1.024 px tabela bila 766 px u okviru od 641 (dugi detalji). */
@media (max-width: 1100px) {
  .super-dnevnik-table thead {
    display: none;
  }

  .super-dnevnik-table,
  .super-dnevnik-table tbody {
    display: block;
  }

  .super-dnevnik-table tr {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 2px 10px;
    grid-template-columns: auto 1fr;
    padding: 10px 0;
  }

  .super-dnevnik-table td {
    border: 0;
    padding: 0;
  }

  .super-dnevnik-table td:nth-child(1) {
    color: var(--muted);
    font-size: 13px;
  }

  .super-dnevnik-table td:nth-child(2) {
    font-weight: 700;
  }

  .super-dnevnik-table td:nth-child(3),
  .super-dnevnik-table td:nth-child(4) {
    font-size: 13px;
  }

  .super-dnevnik-table td:nth-child(4) {
    color: var(--muted);
  }

  .super-dnevnik-table td:nth-child(5) {
    color: var(--muted);
    font-size: 13px;
    grid-column: 1 / -1;
  }

  .super-dnevnik-table td[colspan] {
    grid-column: 1 / -1;
  }
}

/* Podtabovi firme na telefonu u dva reda: klizac je sakriven (v1.0.118), pa
   se na 375 px nije videlo da postoje Tim, Korišćenje i Dnevnik. */
@media (max-width: 720px) {
  .super-subtabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ——— Super admin na telefonu: tabele kao kartice (v1.0.155) ———
   Probe (u toku i istorija), Korišćenje i tabele stranice firme (kupci,
   porudzbine, tim, dnevnik). Do sada 760–966 px siroke u okviru od 290 px,
   pa se klizilo levo-desno. Prva kolona je naslov kartice; ostale su red
   „natpis — vrednost", natpis dolazi iz data-label (js/super-admin.js,
   natpisiKolona). */
/* Od v1.0.159 do 1.100 px, ne samo na telefonu: na 1.024 px (tablet, mali
   laptop) su tabele od 760–966 px klizile u okviru od 647 px. */
@media (max-width: 1100px) {
  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) {
    display: block;
    min-width: 0;
    width: 100%;
  }

  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) thead {
    display: none;
  }

  /* Kartice po dve (ili vise) u redu kad ima mesta; na telefonu jedna. */
  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) tbody {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  }

  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
  }

  /* Natpis levo (float), vrednost desno u svom toku: celija sa dve vrednosti
     („0" pa „pre 15 dana") u flex-u se razvlacila preko cele sirine. */
  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) td {
    border: 0;
    display: block;
    min-width: 0;
    padding: 0;
    text-align: right;
  }

  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) td::before {
    color: var(--muted);
    content: attr(data-label);
    float: left;
    font-size: 12px;
    margin-right: 12px;
    max-width: 48%;
    text-align: left;
  }

  /* Naslov kartice: prva celija, bez natpisa, preko cele sirine. */
  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) td:first-child {
    display: block;
    font-size: 15px;
    min-width: 0;
    padding-bottom: 4px;
    text-align: left;
  }

  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) td:first-child::before,
  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) td:not([data-label])::before {
    content: none;
  }

  :is(.super-trials-table, .super-usage-table, .super-client-table, .super-analitika-table) td[colspan] {
    display: block;
    text-align: left;
  }

  /* Klikabilna kartica (kupac, porudzbina) ima istu senku kao red na racunaru. */
  .super-client-klik:active {
    background: var(--brand-soft);
  }
}

/* Analitika platforme na telefonu: sest plocica po dve u redu (do sada po
   jedna, sest ekrana visine pre prve tabele). */
@media (max-width: 720px) {
  .platform-analytics-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Promet („8.270.831,42 RSD") u plocici od ~160 px: manja slova, valuta
     sme u sledeci red. */
  .platform-analytics-metrics .metric {
    padding: 12px;
  }

  .platform-analytics-metrics .metric strong {
    font-size: 18px;
    white-space: normal;
  }
}

/* Filteri Analitike platforme (v1.0.157): Period i dugme „Filteri" su jedan
   red na telefonu; na racunaru omotac ne postoji za mrezu filtera. Ostalo
   (datumi, firma, status, dugmad) je u .analytics-extra, kao u analitici firme. */
.super-period-red {
  display: contents;
}

@media (max-width: 900px) {
  .super-period-red {
    align-items: flex-end;
    display: flex;
    gap: 10px;
  }

  .super-period-red > div {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ——— Pogledi kupca, v1.0.158 ———
   Nalaz i mokapi: docs/b2b-kupac-pogledi-pre-posle.html (odluka: Dejan,
   30.09.2026, predlog B i stavke 1–11). Sve je na kraju fajla namerno: pravila
   za mrezu su rasuta kroz tri @media bloka, a ovde moraju da pobede svako. */

/* 1. Srce na uglu slike u mrezi i izlogu.
   Kartica je imala donji red „kolicina | korpa + srce": brojac 141 px, pa jos
   10 + 80 px — 231 px, a mreza je davala i kartice od 213 px (minmax 215 px,
   unutra 189). Dugmad su izlazila iz svake kartice, a u poslednjoj koloni je
   `.table-wrap` (overflow: auto) srce odsecao. Mereno 30.09.2026: kvar na
   1280, 2200 i 2560 px sirine. Srce se crta dvaput (products.js, productTable),
   a ovde se bira koje se vidi. */
.shop-table .cell-image .srce-na-slici {
  display: none;
}

.table-wrap[data-prikaz="grid"] .shop-table .cell-image,
.table-wrap[data-prikaz="showcase"] .shop-table .cell-image {
  position: relative;
}

/* `top` i `right` izricito: absolute bez njih ostaje na mestu iz toka (css
   zamke, 2026-09). */
.table-wrap[data-prikaz="grid"] .shop-table .cell-image .srce-na-slici,
.table-wrap[data-prikaz="showcase"] .shop-table .cell-image .srce-na-slici {
  display: grid;
  place-items: center;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
}

.table-wrap[data-prikaz="grid"] .shop-table .cell-image .srce-na-slici.active,
.table-wrap[data-prikaz="showcase"] .shop-table .cell-image .srce-na-slici.active {
  background: #eff6ff;
}

.table-wrap[data-prikaz="grid"] .shop-table .cell-actions .wishlist-toggle,
.table-wrap[data-prikaz="showcase"] .shop-table .cell-actions .wishlist-toggle {
  display: none;
}

/* Na telefonu je dugme 34 px, a meta za prst 44 (odluka iz v0.9.67): ivica
   od 5 px oko njega hvata dodir, a ne vidi se. */
@media (max-width: 620px) {
  .table-wrap[data-prikaz="grid"] .shop-table .cell-image .srce-na-slici::after,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-image .srce-na-slici::after {
    content: "";
    position: absolute;
    inset: -5px;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .cell-image .srce-na-slici {
    top: 2px;
    right: 2px;
  }
}

/* Brojac se skuplja kad nema mesta: kolona minmax(0, 1fr), a polje u sredini
   uzima ono sto pretekne. Bez ovoga ista greska se vraca cim neko doda treci
   element u red ili suzi mrezu. */
@media (min-width: 621px) {
  .table-wrap[data-prikaz="grid"] .shop-table tr,
  .table-wrap[data-prikaz="showcase"] .shop-table tr {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .cell-qty,
  .table-wrap[data-prikaz="showcase"] .shop-table .cell-qty {
    justify-self: stretch;
    min-width: 0;
  }

  .table-wrap[data-prikaz="grid"] .shop-table .quantity-stepper,
  .table-wrap[data-prikaz="showcase"] .shop-table .quantity-stepper {
    display: grid;
    grid-template-columns: 32px minmax(28px, 1fr) 32px;
    width: 100%;
    max-width: 200px;
  }
}

/* Srce uz dugme za zatvaranje u detalju artikla (4). */
.modal-head-dugmad {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.modal-head-dugmad .wishlist-toggle {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

/* 2. Detalji za naplatu u jednom redu.
   Blok je `details` sa `display: grid`, ali Chrome decu elementa `details` ne
   slaze direktno nego u svoj okvir `::details-content`, pa grid nije vazio i
   `span`-ovi su stajali jedan do drugog („d.o.o.Milica…"). Redovi su zato
   blokovi uvek, a na racunaru dve kolone: adresa levo, kontakt i brojevi
   desno — gde okvir ne postoji, ostaje jedna kolona, sto je i dalje citko. */
.order-billing-fold > :not(summary) {
  display: block;
}

@media (min-width: 621px) {
  .order-billing-fold[open]::details-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 2px 18px;
  }
}

/* 3. Brza lista: polje za sifru nije imalo nijedno pravilo (bez klase, van
   `.toolbar`), pa je bilo golo polje pregledaca — siva ivica, uglovi 0, 25 px.
   Sada isto kao pretraga u prodavnici, a „Pronadji" je u istom redu. */
.quick-sku-row .quick-sku-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  font: inherit;
  outline: none;
}

.quick-sku-row .quick-sku-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.quick-sku-row .quick-find-button {
  width: auto;
  margin-top: 0;
  min-height: 40px;
  padding-inline: 18px;
}

.quick-repeat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.quick-repeat-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.quick-repeat-card .quick-repeat-note {
  margin: 2px 0 0;
}

/* „Ponovi" i, u trebovanju, „Ponovi × 2" (v1.1.14) jedno uz drugo. */
.quick-repeat-dugmad {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
}

/* Dva dugmeta pored teksta su na telefonu stiskala naslov na po cetiri slova
   u redu (kartica 234 px visoka na 375 px); kad nema mesta, dugmad idu u red
   ispod, preko cele sirine. */
#trebovanje-poslednja .quick-repeat-card {
  flex-wrap: wrap;
  margin: 0 0 12px;
}

#trebovanje-poslednja .quick-repeat-info {
  flex: 1 1 220px;
  min-width: 0;
}

@media (max-width: 620px) {
  #trebovanje-poslednja .quick-repeat-dugmad {
    flex: 1 1 100%;
  }

  #trebovanje-poslednja .quick-repeat-dugmad .quick-repeat {
    flex: 1 1 0;
    justify-content: center;
  }
}

.quick-repeat-card .quick-repeat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  min-height: 40px;
  flex: none;
  font-size: 14px;
}

/* Srce u redu Brze liste (4); na telefonu red nema mesta, kao u cenovniku,
   pa sirina kolona dolazi samo za racunar. */
@media (min-width: 621px) {
  .quick-row {
    grid-template-columns: 1fr auto auto auto auto;
  }
}

@media (max-width: 620px) {
  .quick-row .quick-row-srce {
    display: none;
  }

  .quick-sku-row {
    flex-wrap: wrap;
  }

  /* `input.` zbog specificnosti: `.quick-sku-row input:first-child` (0,2,1)
     odozgo inace zadrzi `flex: 1` sa osnovom 0 i polje ostane 74 px. */
  .quick-sku-row input.quick-sku-input {
    flex: 1 1 100%;
    min-height: 44px;
  }

  .quick-sku-row .quick-find-button {
    flex: 1;
    min-height: 44px;
  }
}

/* 5. Ponude: cena u dva reda umesto cetiri. Rok akcije uz svaku cenu ponavlja
   ono sto zaglavlje ponude vec kaze („Vazi do 09.10."), a jedna kategorija za
   celu akciju ne treba kolonu (lists.js, `bez-kategorije`). */
.offer-group-panel .offer-tag-akcija {
  display: none;
}

.offer-table.bez-kategorije .cell-category {
  display: none;
}

/* Ponude na telefonu: kratko „Nema" umesto oznake koja se sekla (lists.js,
   zalihaUPonudi). Isto pravilo kao cenovnik prodavnice. */
@media (max-width: 620px) {
  .offer-table .zaliha-puno {
    display: none;
  }

  .offer-table .zaliha-kratko {
    display: inline;
  }
}

@media (min-width: 621px) {
  .offer-group-panel .offer-table .price-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0 6px;
  }

  .offer-group-panel .offer-table .price-net { order: 1; }
  .offer-group-panel .offer-table .price-discount { order: 2; }

  .offer-group-panel .offer-table .price-gross {
    order: 3;
    flex-basis: 100%;
    text-align: right;
    font-size: 12px;
  }

  .offer-group-panel .offer-table .price-stack > .offer-tag {
    order: 4;
  }
}

/* 6. Porudzbine kupca: broj je bio poravnat desno u celiji od 265 px, pa je
   stajao na sredini tabele, a objekat ispod njega levo. `.cell-number` je
   desno zbog kolone „Kupaca" kod admina; kupcev broj je naziv reda, ne iznos. */
@media (min-width: 621px) {
  .orders-table .order-row-customer .cell-number {
    text-align: left;
    font-weight: 700;
  }
}

/* 7. Adrese: adresa firme za citanje, objekti sa tihim brisanjem. `.button
   .danger` je u ovom portalu plavo (vidi gore), pa je „Obrisi" do v1.0.157
   bilo najjace dugme ekrana. */
.adresa-firme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.adresa-firme > div {
  display: grid;
  gap: 2px;
}

.adresa-firme .eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.delivery-addresses-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.delivery-addresses-head h2 {
  margin: 0;
}

.delivery-address-list .obrisi-tiho {
  flex: none;
  min-height: 34px;
  padding: 0 6px;
  color: #b42318;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 620px) {
  .delivery-address-list .obrisi-tiho {
    min-height: 44px;
  }
}

/* 8. Moj nalog kupca: ko sam, pa tri odredista sa opisom. */
.account-ja {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-ja .kartica-ja-krug {
  flex: none;
  width: 48px;
  height: 48px;
  font-size: 16px;
}

.account-ja p {
  margin: 2px 0 0;
}

.account-ja-ime {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 18px;
}

.account-ja-ime .pill {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.account-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.account-link:hover {
  border-color: var(--brand);
}

.account-link > span:last-child {
  display: grid;
  gap: 2px;
}

.account-link .muted {
  font-size: 13px;
}

.account-link-ikona {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
}

.field-procitaj p {
  margin: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 9. Traka korpe: prazna se skuplja na samu verziju, tihu, u uglu. U
   trebovanju ostaje cela: komercijalista iz nje ide u korpu i kad je prazna
   (`body.staff-ordering`). Verzija je tiha i kad traka ima sadrzaj — plava
   pilula iste boje kao „Nastavi" se takmicila sa dugmetom. */
.customer-cart-bar .customer-cart-version {
  padding: 0;
  background: none;
  color: var(--muted-soft);
  font-weight: 500;
}

body.customer-portal.korpa-prazna:not(.staff-ordering) .customer-cart-bar {
  min-height: 0;
  padding-block: 6px;
  border-top: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
  grid-template-columns: 1fr;
}

body.customer-portal.korpa-prazna:not(.staff-ordering) .customer-cart-summary,
body.customer-portal.korpa-prazna:not(.staff-ordering) .customer-cart-actions {
  display: none;
}

/* 10. „Omiljeni" u traci pretrage, pored „Samo akcije". */
.omiljeni-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.omiljeni-filter .lucide-icon {
  width: 16px;
  height: 16px;
}

/* Dugme vise u traci: na 1440 px zbir je bio 1141 px u traci od 1071, pa je
   „Diktiraj" padao u drugi red. Pretraga je do sada bila stalnih 360 px; sada
   se skuplja do 220, pa sve staje u red od 1440 px nadalje. */
@media (min-width: 621px) {
  .shop-panel .toolbar #product-search {
    flex: 1 1 220px;
    min-width: 220px;
  }
}

/* Na telefonu drugi red trake nosi kategorije i „Samo akcije"; srce staje uz
   njih kao ikona od 44 px, a natpis ostaje u aria-label. */
@media (max-width: 620px) {
  body.customer-portal .shop-panel .toolbar #omiljeni-filter {
    order: 5;
    flex: none;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 10px;
  }

  body.customer-portal .shop-panel .toolbar #omiljeni-filter span {
    display: none;
  }
}

.omiljeni-filter:not(.ghost) .lucide-icon {
  fill: currentColor;
}

/* 11. Pregled porudzbine: ispod datuma je bilo 36 px praznog — margina datuma
   (14), donji padding zaglavlja (14) i njegova margina (14), minus -6 napomene.
   Datum sada stoji uz naslov. Telefon ima svoje zaglavlje, pa samo racunar. */
@media (min-width: 621px) {
  .order-detail-modal .modal-head > div:first-child > p.muted {
    margin: 4px 0 0;
  }
}

/* 11. Klasa kupca samo na Prodavnici i Ponudama (portal.js, renderView). */
.topbar-class[hidden] {
  display: none;
}

/* ——— PIB i maticni broj samo za citanje, v1.0.159 ———
   Menja ih samo admin (odluka 30.09.2026). Na naplati polje ostaje u obrascu
   (readonly), ali ne izgleda kao da se kuca u njega. */
.field-samo-citanje input[readonly] {
  background: var(--panel-soft);
  color: var(--ink-soft);
  cursor: default;
}

.field-samo-citanje small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

/* Klijenti (Puls) i Naplata do 1.100 px kao kartice (v1.0.159): na 1.024 px su
   tabele od 980 i 860 px klizile u okviru od 647 px. Kartice vec postoje za
   telefon; ovde se samo pomera granica. */
@media (max-width: 1100px) {
  .table-wrap.super-company-table-wrap,
  .table-wrap.super-billing-table-wrap {
    display: none;
  }

  .company-grid.super-company-cards {
    display: grid;
  }

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

/* Stranica firme sa desnom kolonom (od v1.0.153): glavna kolona je na
   1.366 px 673 px, a tabele kupaca, porudzbina, tima i dnevnika su imale
   min-width 760 px i klizile. Reci se ne lome (v1.0.154), pa tabela staje. */
.super-client-main .super-client-table {
  min-width: 0;
}

.super-client-main .super-client-table th,
.super-client-main .super-client-table td.num {
  white-space: normal;
}

/* Mejl ispod imena kupca je jedna rec bez razmaka; sme da se prelomi. */
.super-client-main .super-client-table td small {
  overflow-wrap: anywhere;
}

/* ——— Dug kupcu: vidljivost (v1.0.177) ———
   Kartica „Zalihe" na Kontrolnoj tabli, prozor posle „Učitaj stanje",
   oznaka nastavka porudzbine i redovi istorije o stigloj robi.
   Predlog: docs/b2b-dug-kupcu-tok-predlog.html. */
.zalihe-kartica {
  padding-block: 14px;
}

.zalihe-kartica-glava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.zalihe-kartica-glava .muted {
  font-size: 13px;
}

.zalihe-kartica-brojevi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.zalihe-broj {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.zalihe-broj:disabled {
  cursor: default;
}

.zalihe-broj b {
  font-size: 20px;
}

.zalihe-broj span {
  font-size: 12.5px;
  color: var(--muted);
}

.zalihe-broj.dug b {
  color: #8a5f0f;
}

.zalihe-broj.nisko b {
  color: #a5391f;
}

.zalihe-kartica-radnja {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.ucitaj-stanje-modal {
  max-width: 560px;
}

.ucitaj-kompletne {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid #a9d8be;
  border-radius: 10px;
  background: #e8f6ed;
}

.ucitaj-kompletne ul {
  margin: 6px 0 10px;
  padding-left: 18px;
}

.ucitaj-poruka {
  line-height: 1.5;
  color: var(--muted);
}

/* Ishod ucitavanja po odeljcima (v1.0.189): zbir, umanjeni artikli, dug,
   nepoznate sifre. Do tada je sve bilo jedna recenica. */
.ucitaj-zbir {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 14px;
}

.ucitaj-zbir > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f9fc;
}

.ucitaj-zbir strong {
  font-size: 20px;
  line-height: 1.1;
}

.ucitaj-zbir span {
  font-size: 13px;
  color: var(--muted);
}

.ucitaj-odeljak {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ucitaj-odeljak h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.ucitaj-odeljak p {
  margin: 0 0 6px;
  line-height: 1.45;
}

.ucitaj-objasnjenje {
  font-size: 13px;
  color: var(--muted);
}

.ucitaj-artikli {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ucitaj-artikli li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.ucitaj-artikal-vrh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
}

.ucitaj-duguje {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fdf1e1;
  color: #8a4b00;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ucitaj-pokriveno {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f6ed;
  color: #1f6b3f;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ucitaj-racun {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 16px;
  margin: 8px 0 0;
  font-size: 13px;
}

.ucitaj-racun > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ucitaj-racun dt {
  font-size: 12px;
  color: var(--muted);
}

.ucitaj-racun dd {
  margin: 0;
  overflow-wrap: normal;
}

.ucitaj-sifre {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ucitaj-sifre code {
  padding: 1px 6px;
  border-radius: 6px;
  background: #f1f4f8;
  font-size: 12px;
}

.order-nastavak {
  display: block;
  width: fit-content;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink-soft);
}

.order-history li.dopremljeno strong {
  color: #1a7a43;
}

.order-history li.nastavak strong {
  color: #012a6b;
}

@media (max-width: 620px) {
  .orders-ucitaj {
    flex: 0 0 auto;
  }
}

/* Izbor kupca kad robe nema dovoljno (v1.0.177): tri opcije ispod stavke u
   korpi, i napomena o vec izabranom iznad korpe. */
.manjak-izbor {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}

.manjak-opcija {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel, #fff);
  cursor: pointer;
}

.manjak-opcija:has(input:checked) {
  border-color: #1d4ed8;
  background: #eef3ff;
}

.manjak-opcija input {
  margin-top: 3px;
}

.manjak-opcija span {
  display: grid;
  gap: 1px;
}

.manjak-opcija small {
  color: var(--muted);
}

.manjak-napomena {
  display: grid;
  gap: 4px;
}

.izbor-napomena ul,
.nastavak-napomena ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* Cip „Ispod praga" u Artiklima i prag uz stanje (v1.0.178). Na cip vodi
   kartica „Zalihe" sa Kontrolne table. */
.artikli-ispod-praga {
  flex: 0 0 auto;
}

.stock-count.nisko {
  color: #8a5f0f;
  font-weight: 700;
}

.stock-count.nema {
  color: #a5391f;
  font-weight: 700;
}

.stock-prag {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* Izbor kupca za trebovanje: polje pretrage i diktat u jednom redu (v1.0.184).
   Razmak koji je polje nosilo samo prelazi na red. */
.pick-trazi {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 12px 0 14px;
}

.pick-trazi .pick-search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pick-trazi .dictate-button {
  flex: none;
}

/* Srce u mrezi ide u ugao KARTICE, ne u ugao slike (v1.0.184). Do tada je
   stajalo u uglu polja slike, a to polje je na telefonu tacno sirine slike —
   srce je uvek lezalo preko nje. Proizvod je najcesce uspravan (0,67), pa
   slika zauzme sredinu kartice, a levo i desno ostane 45 px praznog (izmereno
   na 390 px: kartica 149, slika 59); srce od 34 px tu staje. Isto kao u
   izlogu, gde je kartica siroka pa srce vec sedi u praznom uglu. Polozena
   slika i dalje sme da zadje pod srce — slika se namerno ne smanjuje. */
.table-wrap[data-prikaz="grid"] .shop-table tbody tr {
  position: relative;
}

.table-wrap[data-prikaz="grid"] .shop-table .cell-image {
  position: static;
}

.table-wrap[data-prikaz="grid"] .shop-table .cell-image .srce-na-slici {
  top: 4px;
  right: 4px;
}

@media (max-width: 620px) {
  .table-wrap[data-prikaz="grid"] .shop-table .cell-image .srce-na-slici {
    top: 3px;
    right: 3px;
  }
}

/* Diktat u pretrazi porudzbina (v1.0.184). Sa natpisom „Diktiraj" je na
   1280 px gurnuo „Novo trebovanje za kupca" u drugi red (116 -> 164 px).
   Zato ovde ostaje sama ikona, a pretraga krece od 200 umesto 260 px; i
   dalje uzima sav visak, pa je na 1280 siroka 243 px. Telefon ima svoje
   pravilo za ovaj red, pa ga osnova od 200 px ne sme dirati. */
.orders-toolbar .dictate-button .scan-button-text {
  display: none;
}

@media (min-width: 621px) {
  .orders-toolbar #order-search {
    flex-basis: 200px;
  }
}

/* Iznos u traci korpe ostaje u jednom redu (v1.0.186, predlog A, Dejan
   02.10.2026). Na telefonu su natpis i iznos stajali jedan pored drugog, pa
   je iznosu ostajalo ~130 px i „RSD" je padao u drugi red vec od 538,65 RSD:
   traka 76 px. Sada je natpis sitno iznad, iznos ispod u 24 px: traka 63 px,
   a i „1.234.567,89 RSD" na 360 px staje sa 23 px do „Nastavi". Varijante sa
   iznosom u istom redu (manja slova, sitno „RSD") su lomile natpis u dva reda.
   Na telefonu ovu traku ima samo trebovanje; kupcu je sakrivena. */
.customer-cart-summary strong {
  white-space: nowrap;
}

@media (max-width: 620px) {
  .customer-cart-summary {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0;
  }

  .customer-cart-summary > span {
    line-height: 1.2;
  }

  .customer-cart-summary strong {
    font-size: 24px;
  }
}

/* ——— Kartica artikla (v1.0.189, docs/b2b-kartica-artikla-predlog.html) ——— */
.kartica-art-naslov {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.kartica-art-naslov h2 {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kartica-art-naslov p {
  margin: 0;
}

.kartica-art-filteri {
  margin: 12px 0 0;
  align-items: center;
}

.kartica-art-kupac {
  min-height: 32px;
  max-width: 260px;
}

.kartica-art-brojke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.kartica-art-plocica {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--panel-soft);
  min-width: 0;
}

.kartica-art-plocica span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.kartica-art-plocica b {
  display: block;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kartica-art-plocica.uzak b {
  font-size: 15px;
}

.kartica-art-plocica i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.kartica-art-plocica.upozorenje {
  background: #fdf3e0;
  border-color: #e6c98a;
}

.kartica-art-plocica.upozorenje b {
  color: #8a5f0f;
}

.kartica-art-telo {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.kartica-art-telo > .panel {
  min-width: 0;
}

.kartica-art-sekcija {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kartica-art-sekcija h3,
.kartica-art-kupci h3 {
  margin: 0 0 8px;
}

.kartica-art-sekcija .order-chips {
  margin-bottom: 8px;
}

.kartica-art-tabela {
  width: 100%;
}

.kartica-art-tabela td,
.kartica-art-tabela th {
  overflow-wrap: normal;
  word-break: normal;
}

.kartica-art-tabela .broj {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kartica-art-tabela tr.kartica-art-ucitano td {
  background: var(--panel-soft);
}

.kartica-art-tabela .link-button {
  text-align: left;
}

.kartica-art-tabela .order-nastavak {
  display: inline-block;
  margin: 2px 0 0;
}

.kartica-art-plus {
  color: #1a7a43;
  font-weight: 800;
}

.kartica-art-minus {
  color: #a5391f;
  font-weight: 800;
}

.kartica-art-napomena {
  font-size: 12px;
  margin: 10px 0 0;
}

.kartica-art-podnaslov {
  margin: 14px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.kartica-art-ranije {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kartica-art-jos {
  margin-top: 8px;
}

/* Kupac je redovno uzimao artikal, a sada ga nema (v1.0.189). */
tr.kupac-stao td {
  background: #fdf6f3;
}

@media (max-width: 1100px) {
  .kartica-art-telo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Na telefonu red tabele postaje kartica: oznaka levo, vrednost desno. */
@media (max-width: 700px) {
  .kartica-art-brojke {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kartica-art-tabela thead {
    display: none;
  }

  .kartica-art-tabela,
  .kartica-art-tabela tbody,
  .kartica-art-tabela tr,
  .kartica-art-tabela td {
    display: block;
    width: 100%;
  }

  .kartica-art-tabela tr {
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }

  .kartica-art-tabela td {
    border: 0;
    padding: 2px 0;
    text-align: left;
  }

  .kartica-art-tabela td.broj {
    text-align: left;
  }

  .kartica-art-tabela td.prazno {
    display: none;
  }

  .kartica-art-tabela td[data-oznaka]:not([data-oznaka=""])::before {
    content: attr(data-oznaka) ": ";
    color: var(--muted);
    font-size: 12px;
  }

  .kartica-art-kupac {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

/* ——— Odobri / Odbij kupca (v1.0.195) ———
   Prozor odluke iz spiska kupaca i sa detalja kupca na cekanju. */
.odluka-kupca {
  width: min(760px, 100%);
}

.odluka-kupca .modal-head p {
  margin: 2px 0 0;
}

.stock-modes.odluka-izbor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 6px;
}

.odluka-odeljak {
  padding: 14px 0 4px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}

.odluka-odeljak h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.odluka-odeljak > p.muted {
  margin: 0 0 10px;
}

.odluka-odeljak textarea {
  width: 100%;
}

.odluka-polja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.odluka-polja .field {
  margin: 0;
}

.odluka-fali input {
  border-color: var(--warning, #d97706);
}

.odluka-fali-oznaka {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
}

.stock-modes.odluka-razlozi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}

.stock-modes.kupac-izbor-roka {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.rok-drugi input {
  width: 110px;
}

.odluka-limit {
  margin-top: 12px;
}

.odluka-limit input {
  max-width: 240px;
}

.odluka-mejl {
  margin-top: 16px;
}

.kupac-otvoreno,
.kupac-odluka {
  margin: 4px 0 10px;
}

.limit-napomena {
  border-color: #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
}

@media (max-width: 620px) {
  .odluka-kupca {
    max-height: 94vh;
    padding: 14px;
  }

  .odluka-polja,
  .stock-modes.odluka-razlozi {
    grid-template-columns: 1fr;
  }

  .stock-modes.kupac-izbor-roka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .odluka-kupca .modal-actions .button {
    flex: 1;
  }
}

/* ——— Pomoć (v1.0.203) ———
   „?" u zaglavlju otvara fioku sa uputstvima za tekuci ekran; stavka „Pomoć"
   u meniju vodi na stranicu sa pretragom (js/pomoc.js). Na racunaru je fioka
   uz desnu ivicu, na telefonu list odozdo — isti pokret kao fioka „Još".
   Predlog: docs/b2b-pomoc-predlog.html */
.nav-pomoc {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-pomoc .lucide-icon {
  width: 17px;
  height: 17px;
}

.nav-pomoc.active,
.nav-pomoc:hover {
  color: white;
  background: rgba(255, 255, 255, 0.12);
}

.pomoc-pozadina {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  justify-content: flex-end;
  background: rgba(17, 24, 39, 0.38);
}

.pomoc-fioka {
  width: min(420px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(16, 24, 40, 0.18);
}

.pomoc-fioka-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pomoc-fioka-glava strong {
  font-size: 18px;
}

.pomoc-fioka-telo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.pomoc-fioka-dno {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Raspored fioke od v1.0.205 (po Dejanovom primeru 02.10.2026): zaglavlje sa
   imenom ekrana, glavno dugme za ceo centar, pretraga, „Šta je novo", spisak,
   i „Postavite pitanje" uvek na dnu. */
.pomoc-fioka-naslov {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pomoc-fioka-nadnaslov {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pomoc-fioka-naslov strong {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pomoc-centar {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  font-weight: 800;
}

.pomoc-pitaj {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--brand);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.pomoc-pitaj:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.pomoc-novo-kartica {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pomoc-novo-kartica.ima-novo {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.pomoc-novo-kartica > span:last-child {
  display: grid;
  gap: 2px;
}

.pomoc-novo-kartica small {
  color: var(--muted);
  font-size: 13px;
}

.pomoc-novo-tacka {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}

.ima-novo .pomoc-novo-tacka {
  background: var(--brand);
}

.pomoc-novo-naslov {
  margin: 0 0 10px;
  font-size: 20px;
}

.pomoc-novost {
  position: relative;
  padding: 10px 0 12px 14px;
  border-bottom: 1px solid var(--line);
}

.pomoc-novost.nova::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.pomoc-novost-datum {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pomoc-novost h3 {
  margin: 2px 0 4px;
  font-size: 15px;
}

.pomoc-novost p {
  margin: 0 0 6px;
  line-height: 1.5;
}

.pomoc-novost-vodi {
  color: var(--brand);
  font-size: 14px;
}

.pomoc-pitanje h2,
.pomoc-pitanje-poslato h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.pomoc-pitanje textarea {
  width: 100%;
  min-height: 130px;
  margin: 8px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.pomoc-pitanje-uz {
  margin: 0 0 10px;
  font-size: 12.5px;
}

/* Obrazac pitanja (v1.2.23) i „Šta je novo" (v1.2.24) na stranici Pomoć: u panelu ispod pretrage,
   sirine kao AI odgovor, da polje za tekst ne bude preko celog ekrana. */
.pomoc-pitanje-strana,
.pomoc-novosti-strana {
  max-width: 760px;
}

.pomoc-strana-novo {
  max-width: 480px;
}

.pomoc-dno {
  display: grid;
  gap: 12px;
}

.pomoc-trazi {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.pomoc-trazi:focus {
  outline: 2px solid var(--brand-soft);
  border-color: var(--brand);
}

.pomoc-oznaka {
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pomoc-spisak {
  display: grid;
  gap: 8px;
}

.pomoc-stavka {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pomoc-stavka:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.pomoc-stavka-naslov {
  font-weight: 750;
  font-size: 14.5px;
}

.pomoc-stavka-opis {
  color: var(--muted);
  font-size: 13px;
}

.pomoc-nazad {
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 14px;
}

.pomoc-clanak h2 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
}

.pomoc-clanak p {
  margin: 0 0 10px;
  line-height: 1.5;
}

.pomoc-obecanje {
  color: var(--muted);
}

/* Podnaslov odeljka u dugom uputstvu (npr. kartice jednog taba Podesavanja). */
.pomoc-clanak h3 {
  margin: 16px 0 6px;
  font-size: 15px;
}

.pomoc-koraci {
  margin: 12px 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: korak;
  display: grid;
  gap: 10px;
}

.pomoc-koraci li {
  position: relative;
  padding-left: 34px;
  line-height: 1.5;
  counter-increment: korak;
}

.pomoc-koraci li::before {
  content: counter(korak);
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 12.5px;
  font-weight: 800;
}

/* Vodič za probu (v1.0.217): urađen korak dobija zelenu kvačicu umesto broja,
   a svaki korak dugme „Otvori →" na ekran tog koraka. */
.pomoc-koraci li.pomoc-korak-gotov::before {
  content: "✓";
  background: #16a34a;
  color: #fff;
}

.pomoc-korak-vodi {
  display: inline-block;
  margin-left: 4px;
  font-weight: 700;
  white-space: nowrap;
}

/* Slika ekrana u uputstvu (v1.0.211, mokap docs/b2b-pomoc-slike-mokap.html,
   varijanta A): jedan isecak oko dugmeta, izmedju obecanja i koraka. Narandzasti
   krug sa brojem na slici je nacrtan u samom snimku (tools/snimi-pomoc.mjs);
   isti prsten dobija broj tog koraka u spisku, da se vidi na koji se odnosi.
   width/height na <img>/<source> drze mesto dok slika stize. */
.pomoc-slika {
  margin: 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #f5f7fa;
}

.pomoc-slika img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.pomoc-slika.uvecava img {
  cursor: zoom-in;
}

.pomoc-koraci li.pomoc-korak-slika::before {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px #e8590c;
}

/* Uvecana slika preko ekrana i fioke (samo racunar; klik ili Esc zatvara). */
.pomoc-slika-uvecana {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.72);
  cursor: zoom-out;
}

.pomoc-slika-uvecana img {
  display: block;
  max-width: min(1440px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  background: #fff;
}

.pomoc-savet {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #f2d59b;
  border-radius: 9px;
  background: #fff8e8;
  color: #6d4c0c;
  line-height: 1.45;
}

.pomoc-vodi {
  margin-top: 6px;
}

/* Uputstva za korake vodiča (v1.0.216, `veze`). */
.pomoc-veze {
  margin: 14px 0 8px;
}

.pomoc-prazno {
  margin: 8px 0 14px;
}

.pomoc-kontakt {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.pomoc-kontakt a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Stranica „Pomoć" */
.pomoc-strana {
  max-width: 980px;
}

.pomoc-trazi-velika {
  min-height: 50px;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
}

.pomoc-strana > #pomoc-rezultat {
  margin-top: 18px;
}

/* Pretraga i „Pitaj AI" u jednom redu, na stranici i u fioci (v1.2.18,
   docs/b2b-pomoc-stranica-mokap.html). Dugme je ljubicasto kao kartica
   ispod rezultata; mesto je prazno dok stanje firme ne stigne. */
.pomoc-trazi-red {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pomoc-trazi-red .pomoc-trazi {
  flex: 1 1 auto;
  min-width: 0;
}

.pomoc-ai-mesto {
  display: flex;
  flex: none;
}

.pomoc-ai-mesto:empty {
  display: none;
}

.pomoc-ai-dugme {
  padding: 0 14px;
  border: 1.5px solid #6b4fd8;
  border-radius: 10px;
  background: #f1edfd;
  color: #6b4fd8;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.pomoc-ai-dugme:hover,
.pomoc-ai-dugme:focus-visible {
  background: #e7e0fb;
}

.pomoc-ai-dugme:disabled {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: default;
}

.pomoc-ai-red {
  margin: -6px 2px 0;
  color: #6b4fd8;
  font-size: 13px;
  line-height: 1.4;
}

.pomoc-strana > .pomoc-ai-red {
  margin: 7px 2px 0;
}

.pomoc-ai-red.iscrpljeno {
  color: var(--muted);
}

/* Pocetak stranice: plocice tema, najcesca pitanja, kontakt (v1.2.18). */
.pomoc-strana-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.pomoc-strana-glava h2 {
  margin: 0;
  font-size: 17px;
}

.pomoc-novo-kartica.mala {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  align-items: center;
}

.pomoc-novo-kartica.mala > span:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.pomoc-novo-kartica.mala small {
  font-size: 12.5px;
}

.pomoc-plocice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pomoc-plocica {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pomoc-plocica:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.pomoc-plocica-ikona {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
}

.pomoc-plocica-ikona svg {
  width: 20px;
  height: 20px;
}

.pomoc-plocica-tekst {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pomoc-plocica-tekst strong {
  font-size: 15px;
}

.pomoc-plocica-tekst small {
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.pomoc-plocica-tekst > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.pomoc-strana-dno {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.pomoc-strana-dno .pomoc-dno {
  margin-top: 0;
  max-width: none;
}

.pomoc-otvorena-tema {
  max-width: 680px;
}

.pomoc-tema h2 {
  margin: 0 0 4px;
  font-size: 17px;
}

.pomoc-tema > .muted {
  margin: 0 0 12px;
  font-size: 13.5px;
}

.pomoc-dno {
  margin-top: 16px;
  max-width: 480px;
}

.panel.pomoc-strana .pomoc-clanak {
  max-width: 680px;
}

@media (max-width: 900px) {
  .pomoc-pozadina {
    align-items: flex-end;
  }

  .pomoc-fioka {
    width: 100%;
    height: auto;
    max-height: 86vh;
    border-left: 0;
    border-radius: 16px 16px 0 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.22);
  }

  /* Plocice u dve kolone, ikonica iznad naziva, bez opisa (mokap, telefon). */
  .pomoc-plocice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pomoc-plocica {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 11px;
  }

  .pomoc-plocica-ikona {
    width: 32px;
    height: 32px;
  }

  .pomoc-plocica-tekst > span {
    display: none;
  }

  .pomoc-strana-dno {
    grid-template-columns: minmax(0, 1fr);
  }

  .pomoc-ai-dugme {
    padding: 0 11px;
  }

  /* Slika ispod koraka na telefonu (v1.0.214, Dejan 03.10.2026, varijanta D).
     Iznad koraka je slika od ~290 px gurala sve korake ispod prvog ekrana
     fioke (0-1 od 2-4 vidljivo na 390x844). Redosled u HTML-u ostaje isti
     (citac ekrana cita sliku pre koraka); ovde se samo crta posle njih. */
  .pomoc-clanak {
    display: flex;
    flex-direction: column;
  }

  .pomoc-clanak > .pomoc-slika {
    order: 1;
  }

  .pomoc-clanak > .pomoc-koraci ~ * {
    order: 2;
  }

  .pomoc-clanak > .pomoc-vodi {
    align-self: flex-start;
  }

  /* Otvoreno uputstvo u fioci: bez „Centar pomoći" i pretrage (~120 px za
     tekst); vracaju se na „← Nazad" (js/pomoc.js, uUputstvu). */
  .pomoc-u-uputstvu .pomoc-centar,
  .pomoc-u-uputstvu .pomoc-trazi-red,
  .pomoc-u-uputstvu .pomoc-ai-red {
    display: none;
  }
}

/* Prazan ekran sa uputom (v1.0.207, js/prazno-stanje.js). Kalup je prazna
   korpa (.empty-state.cart-empty); ovde su samo veze na uputstva i adresa
   prodavnice. Veza otvara fioku Pomoci na tom uputstvu. */
.prazno-stanje .cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prazno-uputstva {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 6px;
}

.prazno-uputstva[hidden] {
  display: none;
}

.prazno-vodi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--brand);
  font-weight: 700;
}

.prazno-vodi:hover span:last-child {
  text-decoration: underline;
}

.prazno-vodi-znak {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

.prazno-adresa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.prazno-adresa code {
  padding: 6px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .prazno-stanje .cart-empty-actions {
    flex-direction: column;
  }
}

/* ——— Redosled koji redja server (v1.0.209, js/sortiranje.js vezeSortiranjeServer) ———
   Admin Artikli: na telefonu je traka mreza od dve kolone, pa izbor zauzima
   celu svoju celiju (opsti .toolbar .sort-izbor ga sece na 42%).
   Prodavnica: „Redosled" stoji uz kategorije i na racunaru i na telefonu —
   kartice izloga nemaju zaglavlje kolone. */
@media (max-width: 620px) {
  .product-list-toolbar .sort-izbor {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

.shop-panel .toolbar .prodavnica-redosled {
  flex: 0 1 auto;
  max-width: 190px;
}

@media (max-width: 620px) {
  .shop-panel .toolbar .prodavnica-redosled {
    max-width: none;
    min-height: 44px;
  }
}

/* Stampa P5 i P6 (v1.0.208, docs/b2b-stampa-i-sortiranje.html). Dugme sa
   ikonom stampe treba flex, kao „Štampaj spisak" u Porudzbinama. */
.cart-print-offer,
.thank-you-print .button,
#customer-print-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cart-print-offer {
  width: 100%;
  margin-top: 8px;
  min-height: 40px;
}

/* „← Nastavi kupovinu" ispod tabele korpe (v2.0.58), levo kao u mokapu. */
.cart-continue {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

/* Od v2.0.65 je na racunaru u donjoj traci (#footer-nastavi-kupovinu), gde se
   vidi bez skrolovanja; ovde ostaje samo za telefon, gde te trake nema. */
@media (min-width: 901px) {
  .cart-continue {
    display: none;
  }
}

.cart-print-offer svg,
.thank-you-print svg,
#customer-print-card svg {
  width: 17px;
  height: 17px;
}

.thank-you-print {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Padajuci „Redosled" u kartici kupca i Kategorijama (v1.0.208). .sort-izbor
   je skriven na racunaru (tamo se sortira klikom na zaglavlje); na telefonu
   tabela postaje kartice bez zaglavlja, pa izbor stoji iznad nje. */
@media (max-width: 620px) {
  .customer-page-panel .sort-izbor,
  #categories-sort {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
  }
}

/* Tacka na „?" (v1.0.210): u „Šta je novo" ima vesti koje korisnik nije
   video. Gasi se kad otvori „Šta je novo" (js/pomoc-stanje.js). */
.pomoc-dugme .pomoc-tacka {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--brand);
  pointer-events: none;
}

/* „Redosled" u izlogu (v1.0.210): na racunaru je omotac nevidljiv i izbor
   stoji kao do sada; na telefonu je izbor kvadrat od 44 px sa ikonom ⇅, a
   dodir otvara isti spisak. Pravilo za select mora biti jace od
   `body.customer-portal .shop-panel .toolbar select` (flex: 1 1 0). */
.redosled-omot {
  display: contents;
}

.redosled-znak {
  display: none;
}

@media (max-width: 620px) {
  body .shop-panel .toolbar .redosled-omot {
    order: 4;
    flex: none;
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
  }

  body .shop-panel .toolbar .redosled-omot select.prodavnica-redosled {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    color: transparent;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    cursor: pointer;
  }

  body .shop-panel .toolbar .redosled-omot select.prodavnica-redosled option {
    color: var(--ink);
  }

  .redosled-omot .redosled-znak {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink);
    pointer-events: none;
  }

  .redosled-omot .redosled-znak svg {
    width: 20px;
    height: 20px;
  }

  .redosled-omot.promenjen .redosled-znak {
    color: var(--brand);
  }
}

/* Uz „Samo akcije" i srce kategorija na 390 px dobija 122 px; sa razmakom od
   12 px i strelicom „Sve kategorije" je gubila poslednje slovo (mereno 03.10.). */
@media (max-width: 620px) {
  body .shop-panel .toolbar #category-filter {
    padding-left: 8px;
    padding-right: 6px;
  }
}

/* „Samo akcije" na telefonu piše „Akcije" (v1.0.212): kategorija dobija oko
   30 px, pa „Sve kategorije" staje i u uzoj traci admina (280 px). */
.offer-filter .akcije-kratko {
  display: none;
}

@media (max-width: 620px) {
  .offer-filter .akcije-puno {
    display: none;
  }

  .offer-filter .akcije-kratko {
    display: inline;
  }
}

/* ——— Cenovnik za klasu (v1.0.215, mokap docs/b2b-cenovnik-klase-mokap.html) ———
   Dugme u zaglavlju ide uz „+ Dodaj klasu"; ikonica u redu stoji pored kante.
   Dijalog je prozor na racunaru i list odozdo na telefonu, kao fioka Pomoci. */
.topbar-glavno {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cenovnik-dugme svg,
.klasa-radnje svg,
.cenovnik-dno svg,
.zaglavlje-dugmad [data-cenovnik-forma] svg {
  width: 17px;
  height: 17px;
}

.cenovnik-dugme {
  order: -1;
}

.classes-table td:first-child {
  min-width: 9em;
}

.klasa-radnje {
  white-space: nowrap;
  text-align: right;
}

.klasa-radnje .button + .button {
  margin-left: 6px;
}

.cenovnik-pozadina {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(17, 24, 39, 0.38);
}

.cenovnik-dijalog {
  width: min(520px, 100%);
  max-height: min(760px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.cenovnik-glava {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 8px;
}

.cenovnik-glava h2 {
  margin: 0 0 2px;
  font-size: 19px;
}

.cenovnik-glava p {
  margin: 0;
}

.cenovnik-telo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 18px 4px;
  display: grid;
  gap: 14px;
}

.cenovnik-upozorenje {
  margin: 0;
  padding: 9px 12px;
  border-left: 3px solid var(--warn);
  background: #fff8ec;
  color: var(--ink);
  font-size: 14px;
}

.cenovnik-grupa {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 4px;
}

.cenovnik-grupa legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cenovnik-kategorije {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  max-height: 168px;
  overflow-y: auto;
  padding-left: 22px;
}

.cenovnik-izbor {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-weight: 500;
  cursor: pointer;
}

.cenovnik-izbor input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
}

.cenovnik-izbor span {
  min-width: 0;
}

.cenovnik-dno {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}

.cenovnik-dno [data-cenovnik-broj] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
}

.cenovnik-dno [data-cenovnik-stampaj] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 900px) {
  .cenovnik-pozadina {
    place-items: end stretch;
    padding: 0;
  }

  .cenovnik-dijalog {
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }

  .cenovnik-dno {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 620px) {
  .cenovnik-kategorije {
    grid-template-columns: minmax(0, 1fr);
  }

  .cenovnik-dno [data-cenovnik-zatvori] {
    display: none;
  }

  /* Uz „Preuzmi za Excel" (v2.0.84) broj artikala ide u svoj red, a dva
     dugmeta dele sirinu ispod njega. */
  .cenovnik-dno {
    flex-wrap: wrap;
  }

  .cenovnik-dno [data-cenovnik-broj] {
    flex-basis: 100%;
  }

  .cenovnik-dno [data-cenovnik-excel],
  .cenovnik-dno [data-cenovnik-stampaj] {
    flex: 1 1 0;
    justify-content: center;
  }

  .zaglavlje-dugmad [data-cenovnik-forma] span {
    display: none;
  }
}

/* Javno uputstvo za kupce (v1.0.222, /<slug>/uputstvo): bez prijave, u boji
   prodavnice (--brand iz brand-theme.js). Spiskovi i uputstva su isti delovi
   kao u Pomoci (.pomoc-*); ovde je samo okvir strane. */
body.javno-uputstvo-strana {
  background: var(--bg, #f4f6fb);
}

.javno-uputstvo {
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

.javno-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.javno-brend {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.javno-brend b,
.javno-brend small {
  display: block;
}

.javno-brend small {
  color: var(--muted);
}

.javno-logo,
.javno-znak {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  object-fit: contain;
}

.javno-znak {
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
}

.javno-telo {
  padding: 22px;
}

.javno-naslov {
  margin: 0 0 6px;
  font-size: 24px;
}

.javno-tema {
  margin-top: 18px;
}

.javno-tema h2 {
  margin: 0 0 4px;
  font-size: 17px;
}

a.pomoc-stavka {
  text-decoration: none;
}

/* „Otvori Prodavnicu →" iz uputstva vodi u portal, a ovde prijave nema;
   umesto njega je „Prijavi se i poruči" na dnu strane. */
.javno-telo .pomoc-vodi {
  display: none;
}

.javno-dno {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.javno-poruci {
  justify-self: start;
}

.auth-uputstvo {
  display: inline-block;
  margin-top: 6px;
  text-decoration: none;
}

@media (max-width: 560px) {
  .javno-telo {
    padding: 16px;
  }

  .javno-naslov {
    font-size: 20px;
  }

  .javno-poruci {
    justify-self: stretch;
    text-align: center;
  }
}

.javno-uputstvo a.button,
.javno-uputstvo a.link-button {
  text-decoration: none;
}

/* ——— Laptop i veliki ekran (v1.0.221) ———
   Merenje 03.10.2026 nad v1.0.217, sest velicina od 1280x720 do 3440x1440:
   docs/b2b-ekrani-laptop-veliki.html. Nista nije izlazilo u stranu; problem
   je bio u visini laptopa i u sirini velikog ekrana. */

/* Izlog na laptopu: kartica od 330 px davala je 2 kolone na 1366 i 1280, a
   prodavnica je bila duga 20 ekrana. Od 260 px su 3 kolone. Iznad 1600 px
   ostaje kao pre, tamo mreza ionako dodaje kolone (6 na 2560). */
@media (min-width: 621px) and (max-width: 1599px) {
  .table-wrap[data-prikaz="showcase"] .shop-table tbody {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  /* Traka filtera na 1536 px: mikrofon je sam padao u drugi red (58 px
     vise od trake). Kategorije su bile siroke koliko najduzi naziv (232 px). */
  .shop-panel .toolbar #category-filter {
    max-width: 190px;
  }

  .shop-panel .toolbar #product-search {
    min-width: 200px;
  }
}

/* Nizak ekran (laptop do 900 px visine): na 1366x768 zaglavlje, akcija i
   filteri uzimali su 312 px, traka korpe 82, a kartica izloga 469 (slika 260)
   — kupac na prvom ekranu nije video nijednu cenu. */
@media (min-width: 901px) and (max-height: 900px) {
  .content {
    padding-top: 18px;
  }

  .topbar {
    margin-bottom: 14px;
  }

  .table-wrap[data-prikaz="showcase"] .shop-table .product-thumb,
  .table-wrap[data-prikaz="showcase"] .shop-table .thumb-placeholder {
    height: 170px;
  }

  /* Skeniraj i Diktiraj kao ikonice: sa tekstom su obarali traku filtera u
     drugi red. Naziv ostaje u title i aria-label. */
  .shop-panel .toolbar .scan-button .scan-button-text {
    display: none;
  }
}

/* Kartica „Zalihe" na Tabli: „Učitaj stanje" je imalo svoj red ispod brojeva.
   Uz brojeve je tabela „Kupci koji ćute" ~50 px bliže prvom ekranu. */
@media (min-width: 901px) {
  .zalihe-kartica:has(.zalihe-kartica-radnja) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .zalihe-kartica:has(.zalihe-kartica-radnja) .zalihe-kartica-glava {
    grid-column: 1 / -1;
  }

  .zalihe-kartica:has(.zalihe-kartica-radnja) .zalihe-kartica-radnja {
    align-self: center;
  }
}

/* Veliki ekran: spiskovi se razvlace od ivice do ivice — u Brzoj listi na
   3440 px naziv i cena bili su 2.576 px daleko. Najveca sirina, uz levu
   ivicu kao i naslov (odluka O2, 03.10.2026). Artikli (10 kolona) i
   Prodavnica ostaju preko cele sirine. Ime ekrana stavlja renderView(). */
@media (min-width: 1600px) {
  body.customer-portal #view:is([data-ekran="quick"], [data-ekran="orders"], [data-ekran="offers"], [data-ekran="wishlist"], [data-ekran="cekam-robu"], [data-ekran="downloads"]) > * {
    max-width: 1440px;
  }

  body:not(.customer-portal) #view:is([data-ekran="orders"], [data-ekran="admin"], [data-ekran="classes"], [data-ekran="categories"], [data-ekran="offers"], [data-ekran="staff"]) > * {
    max-width: 1600px;
  }
}

/* ——— Laptop: svi prikazi (v1.0.225) ———
   Prolaz kroz sve ekrane kupca i admina na 1280x720, 1366x768 i 1536x864,
   03.10.2026 (docs/b2b-ekrani-laptop-veliki.html, poglavlje 8). */
@media (min-width: 901px) and (max-width: 1599px) {
  /* Korpa: Cena, Kolicina i Ukupno drze ~340 px po sadrzaju, a pregled korpe
     380. Na 1280 je za naziv ostajalo ~10 px i „Baterije AA 4/1" se pisalo
     uspravno, slovo po slovo; na 1366 u dva reda od 86 px. */
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px);
    gap: 18px;
  }

  .cart-product-cell:not(.no-image) {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .cart-product-cell img,
  .cart-product-cell .thumb-placeholder {
    width: 48px;
    height: 48px;
  }

  /* Traka filtera prodavnice u jednom redu i na 1280: falio je 1 px, pa je
     mikrofon padao sam u drugi red. „Akcije" kao na telefonu, srce bez
     natpisa, Skeniraj i Diktiraj kao ikonice; naziv ostaje u aria-label.
     Pretraga krece od 200 px (osnova je bila 220). „Pretraži" ostaje. */
  .shop-panel .toolbar #product-search {
    flex: 1 1 200px;
  }

  .shop-panel .toolbar .scan-button .scan-button-text,
  .shop-panel .toolbar .omiljeni-filter span,
  .shop-panel .toolbar .offer-filter .akcije-puno {
    display: none;
  }

  .shop-panel .toolbar .offer-filter .akcije-kratko {
    display: inline;
  }
}

/* `.panel` ima `overflow-wrap: anywhere`, pa tabela sa auto rasporedom sme da
   stisne kolonu i usred reci: na 1280 su u Kupcima PIB i maticni broj bili
   prelomljeni („9000000 / 61"), mejl („invali d"), a dugme „Trebovan / je".
   `break-word` lomi samo rec koja zaista ne staje i ne spusta kolonu ispod
   najduze reci. Na telefonu tabele vec idu u kartice. */
@media (min-width: 901px) {
  .panel table td,
  .panel table th {
    overflow-wrap: break-word;
  }

  .customers-table .cell-akcije .button {
    white-space: nowrap;
  }
}

/* Analitika na laptopu: rang tabele su stajale dve u redu po 421 px (1280)
   do 549 px (1536), a sadrzaj trazi do 598 — bez leka iznad je „Standard"
   bio uspravan, sa njim bi tabela klizila. Jedna ispod druge. Brojke na
   vrhu: na 1536 je treca glavna kartica padala sama u drugi red. */
@media (min-width: 901px) and (max-width: 1599px) {
  .analytics-grid,
  .an-brojke {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards-sporedne {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ——— AI pomoć pri porudžbini (v1.1.07; mokap docs/b2b-diktat-trebovanje.html) ——— */
.ai-diktat-dugme {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--brand-dark);
  color: var(--brand-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ai-diktat-dugme:hover { background: var(--brand); }
.ai-diktat-mic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-dark);
}
.ai-diktat-mic svg { width: 18px; height: 18px; }
.ai-diktat-tekst { display: flex; flex-direction: column; min-width: 0; }
.ai-diktat-tekst b { font-size: 15px; }
.ai-diktat-tekst span { font-size: 12.5px; opacity: 0.85; }

.ai-diktat-modal { width: min(640px, 100%); }
.ai-diktat-uputstvo { margin: 0 0 10px; }
.ai-diktat-polje {
  width: 100%;
  min-height: 150px;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.ai-diktat-akcije {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.ai-diktat-akcije .button { display: inline-flex; align-items: center; gap: 6px; }
.ai-diktat-akcije .button svg { width: 16px; height: 16px; }
#ai-diktat-govor.slusa { background: #fbeaea; border-color: #b23b23; color: #b23b23; }
.ai-diktat-napomena { margin: 8px 0 0; font-size: 13px; }
.ai-diktat-rad { display: flex; align-items: center; gap: 12px; padding: 28px 4px; }
.ai-diktat-rad p { margin: 0; }
.ai-diktat-krug {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--brand-soft);
  border-top-color: var(--brand);
  animation: ai-krug 0.9s linear infinite;
}
@keyframes ai-krug { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-diktat-krug { animation: none; } }

.ai-predlog-zbir { display: flex; gap: 6px; margin-bottom: 10px; }
.ai-z { flex: 1; text-align: center; border-radius: 7px; padding: 4px 0; font-size: 13px; font-weight: 700; }
.ai-z-ok { background: #edf6f0; color: #1f8a4c; }
.ai-z-am { background: #fbf3e3; color: #9a6b12; }
.ai-z-no { background: #f8efeb; color: #b23b23; }
.ai-predlog-spisak { display: flex; flex-direction: column; gap: 7px; }
.ai-stavka {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 9px;
  padding: 7px 10px;
  background: var(--panel);
}
.ai-s-ok { border-left-color: #1f8a4c; }
.ai-s-am { border-left-color: #c58b17; background: #fffcf5; }
.ai-s-no { border-left-color: #b23b23; background: #fdf8f6; }
.ai-izgovoreno { display: block; font-size: 12px; color: var(--muted); font-style: italic; }
.ai-red { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 2px; }
.ai-sredina { min-width: 0; flex: 1; }
.ai-naziv { display: block; font-weight: 700; font-size: 14px; }
.ai-s-no .ai-naziv { color: #b23b23; font-weight: 600; }
/* Kandidati žute stavke (v2.0.89, docs/b2b-pristigle-cena-mokap.html, predlog B):
   red po artiklu, cena desno jedna ispod druge. Do v2.0.88 čipovi .ai-izbor. */
.ai-kandidati { display: grid; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.ai-kandidat {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ai-kandidat:first-child { border-top: 0; }
.ai-kandidat:hover { background: var(--panel-soft); }
.ai-kandidat.on { background: var(--brand-soft); }
.ai-kandidat-krug { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--panel); }
.ai-kandidat.on .ai-kandidat-krug { border: 4px solid var(--brand); }
.ai-kandidat-naziv { min-width: 0; display: grid; gap: 2px; }
.ai-kandidat-naziv b { font-weight: 600; overflow-wrap: anywhere; }
.ai-kandidat.on .ai-kandidat-naziv b { font-weight: 700; color: var(--brand-dark); }
.ai-kandidat-naziv small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.ai-kandidat-cena { display: grid; justify-items: end; gap: 3px; text-align: right; }
.ai-kandidat-preskoci { grid-template-columns: 16px minmax(0, 1fr); color: var(--muted); }
.ai-cena { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-kandidat .ai-cena { font-size: 14px; }
.ai-cena del { margin-right: 5px; font-weight: 400; color: var(--muted-soft); }
.ai-stavka-iznos { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-stavka-iznos b { color: var(--ink); }
.ai-ukupno { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1.5px solid var(--ink); font-size: 13px; color: var(--muted); }
.ai-ukupno b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-cip {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--panel);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-height: 32px;
}
.ai-cip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.ai-kolicina { flex: none; display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.ai-kolicina input { width: 76px; text-align: right; font-size: 16px; }
.ai-izvor { display: block; margin-top: 3px; font-size: 12px; color: #1f8a4c; font-weight: 600; }

.ai-podesavanje-red { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ai-podesavanje-red > span:first-child { display: flex; flex-direction: column; }
.ai-standard {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #1f8a4c;
  border: 1px solid #1f8a4c;
  border-radius: 999px;
  padding: 1px 9px;
}
.ai-podesavanje-zakljucano { margin: 8px 0 0; padding: 7px 10px; border-radius: 7px; background: #fbf3e3; color: #8a5f0f; font-size: 13px; }
.ai-podesavanje-potrosnja { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 13px; }
.ai-merac { display: block; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ai-merac i { display: block; height: 100%; background: var(--brand-dark); }
/* Rečnik diktata (v1.1.17): broj zapamćenih naziva i dugme za brisanje. */
.ai-podesavanje-recnik { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; font-size: 13px; }

/* Tab „AI pomoć" u Podešavanjima (v1.1.31, docs/b2b-ai-pomoc-tab-mokap.html):
   izveštaj iznad kartice sa prekidačima. */
.ai-tab { display: grid; gap: 14px; max-width: 1100px; margin-bottom: 14px; }
.ai-tab .button.small, .super-ai-panel .button.small { min-height: 30px; padding: 4px 11px; font-size: 13px; }
.ai-tab .ai-podesavanje-zakljucano { margin: 0; }
/* Povezane adrese (v2.0.72; od v2.0.76 kartica u tabu „Porudžbine mejlom"). */
.povezane-adrese { display: grid; gap: 8px; }
.povezane-adrese-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.povezane-trazi { width: min(100%, 280px); }
/* Pretraga adresa i polje adrese firme nisu u .field, pa su do v2.0.83 imali
   oštre ivice pregledača (Dejan 16.10.2026). Isto što i .field input. */
.povezane-trazi,
.ai-adresa-forma input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  background: white;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.povezane-trazi:focus,
.ai-adresa-forma input:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.16);
}
/* Količina u predlogu AI-ja, polje diktata i poruka za dopunu paketa: isto, do
   v2.0.85 ivice pregledača (Dejan 16.10.2026). Bez min-height, da diktat
   zadrži svojih 150 px; širina količine ostaje 76 px. */
.ai-kolicina input,
.ai-diktat-polje,
.ai-zahtev-forma textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ai-diktat-polje,
.ai-zahtev-forma textarea { padding: 10px 12px; }
.ai-kolicina input { min-height: 40px; padding: 7px 10px; }
.ai-kolicina input:focus,
.ai-diktat-polje:focus,
.ai-zahtev-forma textarea:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.16);
}

/* Tabovi AI centra: Porudžbine mejlom · Paket · Podešavanja (v2.0.76,
   docs/b2b-ai-podesavanja-mokap.html). */
.ai-strana[data-ai-tab] { display: grid; gap: 14px; }
.ai-tab-uvod { margin: 0; }
.ai-grupa { gap: 0; }
.ai-grupa-naslov { margin: 0 0 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ai-red { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ai-red:last-child { border-bottom: 0; }
.ai-red.uvucen { padding-left: 22px; padding-top: 4px; }
.ai-red-tekst { display: grid; gap: 3px; min-width: 0; }
.ai-red-naziv strong, .ai-red-tekst > strong { font-size: 15px; }
.ai-red-vise summary { cursor: pointer; font-size: 13px; color: var(--brand-dark); width: max-content; }
.ai-red-dodatak { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.ai-red-dodatak .ai-harmonika { margin: 0; }
.ai-oznaka { display: inline-block; margin-left: 4px; padding: 0 8px; border: 1px solid; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: 2px; }
.ai-oznaka.paket { color: #5a3fc4; border-color: #cbbff5; background: #f4f1fd; }
.ai-oznaka.besplatno { color: #1f8a4c; border-color: #b7dcc4; background: #edf6f0; }
.ai-oznaka.standard { color: var(--muted); border-color: var(--line); background: #f4f6fa; }
.ai-prekidac { position: relative; flex: none; width: 44px; height: 26px; margin-top: 2px; cursor: pointer; }
.ai-prekidac input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ai-prekidac-klizac { position: absolute; inset: 0; border-radius: 999px; background: #cfd6e2; transition: background .15s; pointer-events: none; }
.ai-prekidac-klizac::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.ai-prekidac input:checked + .ai-prekidac-klizac { background: #1f8a4c; }
.ai-prekidac input:checked + .ai-prekidac-klizac::after { left: 21px; }
.ai-prekidac input:disabled + .ai-prekidac-klizac { opacity: .45; }
.ai-prekidac input:focus-visible + .ai-prekidac-klizac { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.ai-korak { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; overflow-wrap: anywhere; }
.ai-korak-znak { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: #1f8a4c; }
.ai-korak-znak.ne { background: #d98c1a; }
.ai-adresa-forma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px 29px; }
.ai-adresa-forma input { flex: 1 1 260px; min-width: 0; }
.ai-adresa-forma small { flex-basis: 100%; }
.ai-potrosnja td { vertical-align: middle; }
.ai-potrosnja td:first-child { width: 48%; overflow-wrap: normal; }
.ai-potrosnja-stub { width: 24%; }
.ai-potrosnja-stub span { display: block; height: 8px; min-width: 2px; border-radius: 4px; background: #6b4fd8; }
.ai-potrosnja-van td { color: var(--muted); }
/* „?" u uglu pločice na tabu Porudžbine mejlom (v2.0.80). */
.ai-ploca:has(> .ai-ploca-info) { position: relative; }
.ai-ploca-info { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel, #fff); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
.ai-ploca-info[aria-expanded="true"] { background: #5a3fc4; border-color: #5a3fc4; color: #fff; }
.ai-ploca-objasnjenje { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; line-height: 1.4; color: var(--text, inherit); }
.ai-ploca:has(> .ai-ploca-info) .ai-ploca-k { padding-right: 26px; }
@media (max-width: 720px) {
  .ai-red-naziv strong, .ai-red-tekst > strong { font-size: 14px; }
  .ai-adresa-forma { margin-left: 0; }
  .ai-potrosnja-stub { display: none; }
}
.povezane-adrese-spisak { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.povezana-adresa { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; }
.povezana-adresa-tekst { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ai-paket { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.ai-iznos { font-size: 30px; font-weight: 800; line-height: 1.1; }
.ai-iznos small { font-size: 15px; font-weight: 500; color: var(--muted); }
.ai-merac-velik { height: 10px; margin: 10px 0 6px; }
.ai-paket .ai-podesavanje-zakljucano { margin-top: 10px; }
.ai-paket-red { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ai-paket-red:last-child { border-bottom: 0; }
.ai-paket-red > b { white-space: nowrap; text-align: right; }
.ai-paket-red.is-hidden { display: none; }
.ai-zahtev-forma { display: grid; gap: 6px; padding-top: 8px; }
.ai-zahtev-forma.is-hidden { display: none; }
.ai-zahtev-forma textarea { width: 100%; font: inherit; font-size: 16px; }
.ai-zahtev-dugmad { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-tab-naslov { margin: 4px 0 -4px; font-size: 16px; }
.ai-ploce { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ai-ploca { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ai-ploca-k { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ai-ploca strong { font-size: 26px; line-height: 1.15; }
.ai-tab-dve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ai-tabela { width: 100%; font-size: 14px; }
.ai-tabela tr.is-hidden { display: none; }
.ai-stubici { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.ai-stubici > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; font-size: 12px; color: var(--muted); }
.ai-stubici b { display: block; width: 100%; max-width: 40px; background: var(--brand); opacity: .55; border-radius: 4px 4px 0 0; }
.ai-stubici .je-ovaj { font-weight: 700; }
.ai-stubici .je-ovaj b { opacity: 1; }
.ai-ishod { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 9px; border: 1px solid; white-space: nowrap; }
.ai-ishod.da { color: #1f8a4c; border-color: #1f8a4c; background: #edf6f0; }
.ai-ishod.uz { color: #8a5f0f; border-color: #c99a3a; background: #fbf3e3; }
.ai-ishod.ne { color: #a03320; border-color: #c4553d; background: #f8efeb; }
.ai-recnik-dno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; }
.ai-recnik-dno [data-ai-zaboravi-sve] { margin-left: auto; }
.ai-ponuda-spisak { margin: 0; padding-left: 20px; }
/* Harmonike u tabu AI pomoć (v1.2.02): Podešavanja, Poslednji diktati, Rečnik firme. */
.ai-tab-podesavanja { max-width: 1100px; margin-bottom: 14px; }
.ai-harmonika > summary { align-items: center; cursor: pointer; list-style: none; }
.ai-harmonika > summary::-webkit-details-marker { display: none; }
.ai-harmonika > summary h3 { margin: 0; }
.ai-harmonika > summary::after { content: "⌄"; color: var(--muted); font-size: 20px; line-height: 1; transition: transform 0.15s; }
.ai-harmonika[open] > summary::after { transform: rotate(180deg); }
.ai-harmonika:not([open]) { padding-top: 14px; padding-bottom: 14px; }
.ai-harmonika-broj { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); vertical-align: 2px; }
.ai-harmonika-telo { display: grid; gap: 14px; }
@media (max-width: 900px) {
  .ai-paket, .ai-tab-dve { grid-template-columns: minmax(0, 1fr); }
  .ai-ploce { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.super-ai-panel { margin-top: 16px; }
.super-ai-blizu { color: #9a6b12; font-weight: 700; }
/* Paket, dopune i zahtevi (v1.1.31); polje „Granica troška" je ukinuto. */
.super-ai-zahtev { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid #c99a3a; border-radius: 9px; background: #fbf3e3; }
.super-ai-zahtev > span:first-child, .super-ai-dva > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.super-ai-redovi { display: grid; margin-bottom: 14px; }
.super-ai-stavka { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.super-ai-dva { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.super-ai-dugmad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.super-ai-dugmad input { width: 90px; text-align: right; }
.super-ai-naslov { margin: 6px 0 8px; font-size: 16px; }
.super-ai-ploce { margin-bottom: 4px; }

@media (max-width: 620px) {
  .ai-red { flex-direction: column; align-items: stretch; }
  .ai-kolicina { justify-content: flex-end; }
  .ai-diktat-akcije .button { flex: 1; justify-content: center; }
  /* Tri dugmeta (Govori, PDF, Napravi predlog) u jednom redu od 375 px lome
     natpise u dva reda; glavno dugme ide u svoj red (v2.0.34). */
  .ai-diktat-akcije #ai-diktat-predlog { flex-basis: 100%; }
}
.ai-oznake { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ai-akcija { font-size: 12px; font-weight: 700; color: #b23b23; border: 1px solid #e5b4a6; border-radius: 999px; padding: 0 8px; background: #fdf3ef; }
.ai-pakovanje { display: block; margin-top: 3px; font-size: 12px; color: #8a5f0f; }
/* Količina van pakovanja (v2.0.55): izbor manje ili veće dozvoljene. */
.ai-pakovanje-izbor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: #8a5f0f; }
.ai-pakovanje-izbor > span { flex-basis: 100%; }
.ai-diktat-zvezdice { margin: 8px 0 0; padding: 7px 10px; border-radius: 7px; background: #fbf3e3; color: #8a5f0f; font-size: 13px; }

/* PDF narudžbenica u diktatu (v2.0.34) */
.ai-pdf-spisak { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-pdf { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px 5px 10px; background: var(--panel); min-width: 0; }
.ai-pdf-ikona svg { width: 16px; height: 16px; display: block; color: #b23b23; }
.ai-pdf-ime { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ai-pdf-velicina { font-size: 12.5px; color: var(--muted, #6b7280); white-space: nowrap; }
.ai-pdf-skloni svg { width: 14px; height: 14px; }
.ai-drugi-kupac { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #fbf3e3; border: 1px solid #ecd9a8; color: #6b4a0a; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }

/* Pristigle porudžbine (v2.0.36) */
.pristigle-ucitaj { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.pristigle-ucitaj-tekst { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pristigle-ucitaj-tekst span { font-size: 13px; color: var(--muted, #6b7280); }
.pristigle-ucitaj .button { display: inline-flex; align-items: center; gap: 6px; }
.pristigle-ucitaj .button svg { width: 16px; height: 16px; }
.pristigle-napomena { flex-basis: 100%; margin: 0; font-size: 13px; }
.pristigle-red { flex-basis: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pristigle-red li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px; background: var(--panel-soft, #f5f6f8); min-width: 0; }
.pristigle-red li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pristigle-red li span:last-child { white-space: nowrap; }
.pristigle-red-cita span:last-child { color: var(--brand); font-weight: 600; }
.pristigle-red-gotovo span:last-child { color: #1f8a4c; }
.pristigle-red-greska span:last-child { color: #b23b23; white-space: normal; text-align: right; }
.pristigle-naslov { margin: 0 0 10px; font-size: 15px; }
/* Tabovi Cekaju / Poslato i odbaceno (v2.0.90) i red na dnu koji prebacuje tab. */
.pristigle-tabovi { margin-top: 0; }
.pristigle-jos-reseno { display: block; margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--brand); }
.pristigle-jos-reseno:hover { text-decoration: underline; }
.pristigla { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pristigla-resena { opacity: 0.7; }
.pristigla-vrh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pristigla-ko { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pristigla-ko .pristigle-kupac { font-size: 15px; }
.pristigla-grupa { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--brand-soft); color: var(--brand); }
.pristigle-sitno { font-size: 12.5px; color: var(--muted, #6b7280); overflow-wrap: anywhere; }
.pristigle-izbor { display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; }
.pristigli-razlog { color: #8a5a00; }
.pristigli-razlog-detalj { display: block; color: var(--muted, #6b7280); font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }
.pristigle-izbor select { max-width: 100%; }
.pristigla-nov { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pristigla-nov input { flex: 1 1 140px; min-width: 0; }
.pristigla-dno { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pristigla-brojevi { display: flex; gap: 4px; }
.pristigla-brojevi .ai-z { flex: none; padding: 1px 8px; }
.pristigle-pdf { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; min-width: 0; max-width: 100%; }
.pristigle-pdf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pristigle-pdf svg { flex: none; width: 14px; height: 14px; }
.pristigla-dugmad { margin-left: auto; display: flex; gap: 6px; }
.pristigla-status { margin-left: auto; font-size: 13px; font-weight: 600; }
/* Pristigle iz mejla (v2.0.43): kartica mejla koji traži čoveka. */
.pristigli-mejl { border-style: dashed; }
.pristigli-mejl-stanje { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--panel-soft, #f5f6f8); color: var(--muted, #6b7280); white-space: nowrap; }
.pristigli-mejl-nepoznat, .pristigli-mejl-bez_ai, .pristigli-mejl-greska, .pristigli-mejl-rucno, .pristigli-mejl-ponovo, .pristigli-mejl-slican { background: #fff4e0; color: #8a5a00; }
.pristigli-mejl-red, .pristigli-mejl-citaj { background: var(--brand-soft); color: var(--brand); }
/* Predlozi iz ovog mejla (v2.0.62): ko, stanje, klik skroluje do kartice predloga. */
.pristigli-mejl-predlozi ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pristigli-mejl-predlozi li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.pristigli-mejl-predlozi .link-button { font-weight: 600; text-align: left; }
.pristigli-mejl-predlog-stanje { font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); }
.pristigli-mejl-predlog-ceka { color: #8a5a00; }
.pristigli-mejl-predlog-poslato { color: #1f7a3d; }
@keyframes pristigla-istaknuta { from { box-shadow: 0 0 0 3px var(--brand); } to { box-shadow: 0 0 0 3px transparent; } }
.pristigla-istaknuta { animation: pristigla-istaknuta 1.6s ease-out; }
.pristigli-prilozi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pristigli-prilozi li { min-width: 0; overflow-wrap: anywhere; }
.pristigli-tekst summary { cursor: pointer; font-size: 12.5px; color: var(--muted, #6b7280); }
.pristigli-tekst p { margin: 6px 0 0; white-space: pre-line; font-size: 13px; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.ai-pdf-izvor { margin: 0 0 8px; font-size: 13px; overflow-wrap: anywhere; }

/* „Zaboravio je…" u korpi trebovanja (v2.0.34) */
.zaboravio { margin-top: 14px; border: 1px solid #ecd9a8; border-radius: 10px; background: #fffaf0; padding: 10px 12px; }
.zaboravio-naslov { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.zaboravio-spisak { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zaboravio-red { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #f1e5c4; }
.zaboravio-red:first-child { border-top: 0; }
.zaboravio-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zaboravio-ime { font-size: 14px; font-weight: 600; }
.zaboravio-opis { font-size: 12.5px; color: #6b5a2e; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zaboravio-red .button { white-space: nowrap; }
.zaboravio-nema { font-size: 12.5px; color: #b23b23; white-space: nowrap; }
.zaboravio-akcije { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ——— „Pitaj AI" u Pomoći (v1.1.34) ———
   Mokap docs/b2b-ai-pitanja-mokap.html: ljubicasta kartica ispod rezultata
   pretrage, odgovor u istoj fioci, savet ispod isprekidane linije. Ljubicasta
   je namerno druga boja od boje firme: kupac/tim mora da vidi da je ovo AI. */
.pomoc-ai-kartica {
  width: 100%;
  display: grid;
  gap: 2px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1.5px solid #6b4fd8;
  border-radius: 10px;
  background: #f1edfd;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pomoc-ai-kartica strong {
  color: #6b4fd8;
  font-size: 15px;
}

.pomoc-ai-kartica span {
  color: var(--muted);
  font-size: 13px;
}

.pomoc-ai-kartica:hover,
.pomoc-ai-kartica:focus-visible {
  background: #e7e0fb;
}

.pomoc-ai-pitanje {
  margin: 8px 0 12px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--muted);
  font-style: italic;
  overflow-wrap: anywhere;
}

.pomoc-ai-ceka {
  margin: 4px 0;
}

.pomoc-ai-odgovor {
  line-height: 1.5;
  overflow-wrap: break-word;
}

.pomoc-ai-odgovor p {
  margin: 0 0 9px;
}

.pomoc-ai-odgovor ol,
.pomoc-ai-odgovor ul {
  margin: 0 0 9px;
  padding-left: 20px;
}

.pomoc-ai-odgovor li {
  margin-bottom: 5px;
}

.pomoc-ai-linija {
  margin: 10px 0 6px;
  padding-top: 7px;
  border-top: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pomoc-ai-savet {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.pomoc-ai-izvori {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: 12px 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.pomoc-ai-izvori .pomoc-oznaka {
  margin: 0 0 3px;
}

.pomoc-ai-izvor {
  text-align: left;
}

.pomoc-ai-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}

.pomoc-ai-sitno {
  margin: 12px 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* AI odgovor na stranici Pomoć (v1.2.21): isti delovi kao u fioci, u panelu
   ispod pretrage; sirina kao otvoreno uputstvo, da red teksta ne bude predug. */
.pomoc-ai-strana {
  max-width: 760px;
}

.pomoc-ai-strana .pomoc-pitaj {
  margin-top: 12px;
}

/* Super admin: „Pitanja iz pomoći" (v1.1.34). */
.pitanja-ploce {
  margin-top: 12px;
}

/* Pločica je prečica do taba (v2.0.08): dugme koje izgleda kao pločica. */
.pitanja-precica {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.pitanja-precica:hover {
  border-color: var(--brand);
}

.pitanja-precica:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.pitanja-jos {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.pitanja-tabela td.num,
.pitanja-tabela th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pitanja-red {
  cursor: pointer;
}

.pitanja-red:hover td,
.pitanja-red.otvoren td {
  background: var(--brand-soft);
}

.pitanja-razvij td {
  padding: 8px 12px 12px 22px;
  color: var(--ink-soft);
  font-size: 13px;
  white-space: normal;
}

.pitanja-razvij p {
  margin: 0 0 6px;
  white-space: pre-line;
}

.pitanja-t {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.pitanja-t.zelja { border-color: #6b4fd8; background: #f1edfd; color: #6b4fd8; }
.pitanja-t.ne { border-color: #b7791f; background: #fbf3e3; color: #8a5a10; }
.pitanja-t.gr { border-color: #b23b23; background: #f8efeb; color: #b23b23; }

.pitanja-merac {
  max-width: 160px;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--line);
}

.pitanja-merac i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--brand);
}

/* ——— Grupa „AI" u bocnom meniju (v1.2.03) ———
   Isti znak (✦) i ista ljubicasta kao grupa „AI" u CRM-u i AI dugmad tamo
   (#6b4fd8). Jedina grupa sa bojom: treba da se vidi i kad firma AI ne koristi. */
.nav-group-ai {
  border-left: 3px solid #8f78f0;
  border-radius: 10px;
  padding-left: 4px;
  background: rgba(107, 79, 216, 0.16);
}

.nav-group-ai .nav-heading {
  color: #e4dcff;
  background: rgba(107, 79, 216, 0.38);
  border-color: rgba(185, 168, 255, 0.45);
}

.nav-group-ai .nav-heading:hover {
  background: rgba(107, 79, 216, 0.55);
  border-color: rgba(185, 168, 255, 0.7);
}

.nav-group-znak {
  margin-right: 7px;
  color: #c9bbff;
}

.nav-group-ai .nav-items button {
  color: #f1edff;
  font-weight: 650;
}

.nav-group-ai .nav-items button.active,
.nav-group-ai .nav-items button:hover {
  color: #fff;
  background: #6b4fd8;
}

/* Fioka „Još" na telefonu: AI pomoć prva, sa istim znakom i bojom. */
.mobile-more-sheet button.mobile-more-ai {
  color: #5a3fc4;
  font-weight: 700;
}

.ikona-ai {
  width: 20px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  color: #6b4fd8;
}

/* Stranica AI pomoć: dugme za cuvanje u kartici Podesavanja. */
.ai-strana > h2 { margin-top: 0; }
.ai-strana > .muted { margin: 0 0 14px; max-width: 820px; }
.ai-podesavanja-dno { display: flex; justify-content: flex-end; }

/* Nedeljna provera modela kod Anthropic-a (v1.2.19), ispod izbora AI modela. */
.ai-provera {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

.ai-provera-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-provera-spisak summary {
  cursor: pointer;
  font-weight: 650;
}

.ai-provera-spisak ul {
  margin: 8px 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.ai-provera-spisak code {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ai-provera-novo {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: #6b4fd8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* Kartica „AI ovog meseca" na vrhu ekrana AI modela (v1.2.27). */
.ai-mesec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1.5px solid #6b4fd8;
  border-radius: 12px;
  background: #f1edfd;
}

.ai-mesec > div {
  display: grid;
  gap: 2px;
}

.ai-mesec-naslov {
  color: #6b4fd8;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-mesec strong {
  font-size: 22px;
}

/* Poređenje sa računom Anthropic-a (v1.2.20). */
.ai-racun h3 {
  margin: 0;
  font-size: 15px;
}

.ai-racun-forma {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ai-racun-tabela {
  width: 100%;
  margin: 8px 0;
  border-collapse: collapse;
  font-size: 13px;
}

.ai-racun-tabela th,
.ai-racun-tabela td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.ai-racun-tabela td:not(:first-child),
.ai-racun-tabela thead th:not(:first-child) {
  text-align: right;
}

.ai-racun-tabela tbody th {
  font-weight: 500;
  color: var(--muted);
}

.ai-racun-lose,
.ai-racun-lose td {
  color: #b23b23;
}

@media (max-width: 640px) {
  .ai-racun-tabela {
    display: block;
    overflow-x: auto;
  }
}

/* ——— AI za direktora (v1.2.13): Pregled dana i Upozorenja na Kontrolnoj tabli ——— */
.tabla-ai:empty {
  display: none;
}

/* Pregled dana i Upozorenja su u omotacu, pa ih `#view > .panel` ne razmice:
   bili su slepljeni medjusobno i za Zalihe ispod (Dejanov snimak 08.10.). */
#view > .tabla-ai:not(:empty):not(:last-child),
.tabla-ai > .panel:not(:last-child) {
  margin-bottom: 18px;
}

.pregled-dana {
  border: 1.5px solid #6b4fd8;
  background: #f1edfd;
}

.pregled-dana-glava {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.pregled-dana-znak {
  color: #6b4fd8;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pregled-dana-naslov {
  margin: 6px 0 8px;
  font-size: 16.5px;
  line-height: 1.35;
}

.pregled-dana-stavke {
  margin: 0;
  padding-left: 20px;
}

.pregled-dana-stavke li {
  margin: 0 0 8px;
  line-height: 1.45;
}

.pregled-dana-stavke li .link-button {
  margin-left: 6px;
  white-space: nowrap;
}

.pregled-dana-dobro {
  margin: 8px 0 0;
  color: #1f8a4c;
}

.pregled-dana-izvor {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.pregled-dana.prazan p {
  margin: 6px 0 0;
}

.pregled-dana-dugme {
  margin-top: 10px;
  background: #6b4fd8;
  border-color: #6b4fd8;
}

/* Pitaj svoje brojeve (v1.2.31, mokap 4.2): ispod Pregleda dana, ista boja AI-a. */
.pitaj-brojeve {
  border: 1.5px solid #6b4fd8;
}

.pitaj-brojeve-opis {
  margin: 4px 0 10px;
  font-size: 13px;
}

.pitaj-brojeve-unos {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pitaj-brojeve-unos input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #6b4fd8;
}

.pitaj-brojeve-unos .button {
  flex: none;
  background: #6b4fd8;
  border-color: #6b4fd8;
}

.pitaj-brojeve-predlozi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pitaj-brojeve-predlog {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.pitaj-brojeve-predlog:hover {
  border-color: #6b4fd8;
  color: #6b4fd8;
}

.pitaj-brojeve-razgovor {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.pitaj-brojeve-pitanje,
.pitaj-brojeve-odgovor {
  border-radius: 9px;
  padding: 9px 12px;
  line-height: 1.45;
}

.pitaj-brojeve-pitanje {
  border: 1px solid var(--line);
}

.pitaj-brojeve-odgovor {
  background: #f1edfd;
}

.pitaj-brojeve-pitanje small,
.pitaj-brojeve-odgovor small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pitaj-brojeve-odgovor small {
  color: #6b4fd8;
}

.pitaj-brojeve-odgovor p {
  margin: 4px 0 0;
}

.pitaj-brojeve-odgovor ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.pitaj-brojeve-odbijen {
  color: #9a6b12;
}

.pitaj-brojeve-kako {
  margin-top: 8px;
  border-top: 1px dashed var(--muted);
  padding-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.pitaj-brojeve-kako summary {
  cursor: pointer;
}

/* „Štampaj" i „Kopiraj" ispod AI odgovora (P1, ai-papir.js): Pregled dana,
   Pitaj svoje brojeve i Pitaj AI u Pomoći. */
.ai-odgovor-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 13px;
}

/* Vreme odgovora uz „✦ Odgovor": bez velikih slova, „u 08:05" a ne „U 08:05". */
.pitaj-brojeve-kada {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.ai-odgovor-dugmad .link-button {
  color: #6b4fd8;
}

.pregled-dana-dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 13px;
}

.pregled-dana-dno .ai-odgovor-dugmad {
  margin-top: 0;
}

.pregled-dana-dno .link-button,
.pregled-arhiva .link-button {
  color: #6b4fd8;
}

/* Sačuvani AI odgovori (P2, js/ai-sacuvano.js). */
.ai-sacuvano-uvod p {
  margin: 0;
}

.ai-sacuvano-stavka {
  border: 1.5px solid rgba(107, 79, 216, 0.45);
}

.ai-sacuvano-pitanje {
  margin: 8px 0 6px;
  font-weight: 700;
  line-height: 1.4;
}

.ai-sacuvano-odgovor {
  background: #f1edfd;
  border-radius: 9px;
  padding: 9px 12px;
  line-height: 1.45;
}

.ai-sacuvano-odgovor p,
.ai-sacuvano-odgovor ul,
.ai-sacuvano-odgovor ol {
  margin: 0 0 6px;
}

.ai-sacuvano-odgovor ul,
.ai-sacuvano-odgovor ol {
  padding-left: 20px;
}

.ai-sacuvano-odgovor h3 {
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--muted);
}

.ai-sacuvano-dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
}

.ai-sacuvano-obrisi {
  margin-top: 8px;
  font-size: 13px;
  color: #b42318;
}

.ai-sacuvano-starije {
  margin: 4px auto 0;
  display: block;
}

/* Raniji pregledi (P4): spisak dana u istoj kartici, svaki dan kao <details>. */
.pregled-arhiva {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(107, 79, 216, 0.3);
}

.pregled-arhiva-dan {
  border-bottom: 1px solid rgba(107, 79, 216, 0.18);
  padding: 7px 0;
}

/* Bez display: flex na summary — tada nestaje strelica otvaranja. */
.pregled-arhiva-dan summary {
  cursor: pointer;
  line-height: 1.4;
}

.pregled-arhiva-dan summary span {
  color: var(--muted);
  margin-left: 8px;
}

.pregled-arhiva-telo {
  padding: 6px 0 4px 16px;
  line-height: 1.45;
}

.pregled-arhiva-telo h3 {
  margin: 4px 0 6px;
  font-size: 15px;
}

.pregled-arhiva-telo ol {
  margin: 0 0 6px;
  padding-left: 20px;
}

.pregled-arhiva-telo p {
  margin: 0 0 6px;
}

.upozorenja-panel {
  padding-block: 14px;
}

.upozorenje-red {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.upozorenje-red[hidden] {
  display: none;
}

.upozorenje-red:last-of-type {
  border-bottom: none;
}

.upozorenje-ikona {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

.ton-r .upozorenje-ikona { background: #f8efeb; color: #b23b23; }
.ton-a .upozorenje-ikona { background: #fbf3e3; color: #9a6b12; }
.ton-g .upozorenje-ikona { background: #edf6f0; color: #1f8a4c; }

.upozorenje-tekst b {
  display: block;
  line-height: 1.35;
}

.upozorenje-tekst small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px;
}

.upozorenje-radnje {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 13px;
  white-space: nowrap;
}

.upozorenje-oznaka {
  font-size: 12px;
  color: var(--muted);
}

.upozorenja-sva,
.upozorenja-prazno,
.upozorenja-nedostaje {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .upozorenje-red {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .upozorenje-radnje {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
}

/* ——— Brifing (v2.0.02, do v2.0.03 „Pre posete"; mokap 5.1): kartica o kupcu na
   vrhu izloga u trebovanju. Bez AI-a siva (činjenice), sa AI-em boja AI-a kao
   Pregled dana. Redovi artikala iz v2.0.02 su ispali u v2.0.03 (mokap „na zahtev"). ——— */
#pre-posete-mesto:empty {
  display: none;
}

.pre-posete {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--line, #dfe4ec);
}

.pre-posete.sa-ai {
  border: 1.5px solid #6b4fd8;
  background: #f1edfd;
}

/* Od v2.0.06 karticu otvara i sklanja znak „✦ AI" u gornjoj traci, pa
   zaglavlje više nije <summary> sa strelicom. */
#pre-posete-mesto[hidden] {
  display: none;
}

.pre-posete-glava {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pre-posete-znak {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pre-posete.sa-ai .pre-posete-znak {
  color: #6b4fd8;
}

/* Ime kupca se skraćuje, a strelica ostaje u istom redu (na 375 px je
   padala u svoj red). */
.pre-posete-znak {
  flex: none;
}

.pre-posete-kupac {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.pre-posete-spisak,
.pre-posete-cinjenice ul {
  margin: 8px 0 4px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
}

.pre-posete-spisak li,
.pre-posete-cinjenice li {
  margin: 0 0 4px;
}

.pre-posete li.ton-r {
  color: #b23b23;
}







.pre-posete-cinjenice {
  margin-top: 6px;
  font-size: 13px;
}

.pre-posete-cinjenice > summary {
  cursor: pointer;
  color: #6b4fd8;
}

.pre-posete-izvor {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.pre-posete-jos > summary,
.pre-posete-cinjenice > summary {
  padding: 6px 0 2px;
  font-size: 13px;
  cursor: pointer;
  color: #6b4fd8;
}

/* Brifing na zahtev (v2.0.03): sačuvan AI tekst sa starošću, dugme, istorija. */
.brifing-ai {
  margin: 9px 0 2px;
  padding: 9px 11px;
  border: 1px dashed #6b4fd8;
  border-radius: 8px;
  background: #fff;
}

.brifing-ai.ima {
  border-style: solid;
}

.brifing-red {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.brifing-red b {
  color: #6b4fd8;
  font-weight: 600;
}

.brifing-recenice p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

.brifing-ai.bajato .brifing-recenice {
  color: var(--muted);
}

.brifing-st {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 9px;
  border: 1px solid;
  white-space: nowrap;
}

.brifing-st.sv {
  color: #1f8a4c;
  border-color: #1f8a4c;
  background: #edf6f0;
}

.brifing-st.zr {
  color: #9a6b12;
  border-color: #9a6b12;
  background: #fbf3e3;
}

.brifing-st.bj {
  color: #b23b23;
  border-color: #b23b23;
  background: #f8efeb;
}

.brifing-potvrda {
  margin: 8px 0 0;
  padding: 7px 10px;
  border: 1px solid #9a6b12;
  border-radius: 8px;
  background: #fbf3e3;
  font-size: 13px;
}

.brifing-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}



.brifing-podaci {
  margin-top: 8px;
}

.brifing-podaci > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brifing-istorija {
  margin-top: 8px;
}

.brifing-ist {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  font-size: 13px;
}

.brifing-ist > summary {
  cursor: pointer;
}

.brifing-ist > summary span {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brifing-ist p {
  margin: 5px 0 0;
}

/* Na računaru: levo sačuvan tekst, desno današnji podaci. */
@media (min-width: 900px) {
  .brifing-dve {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
}

@media (max-width: 620px) {
  .brifing-recenice p {
    font-size: 14.5px;
  }

  .brifing-dugmad .button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* „✦ AI" brifinga u gornjoj traci, ispred izbora izgleda (v2.0.06, Dejan: „kao
   u CRM-u" — ista ljubičasta i isti znak). U v2.0.05 je stajao u traci sa korpom. */
.topbar-brifing {
  display: flex;
  align-items: center;
}

.topbar-brifing:empty {
  display: none;
}

.topbar-icon-button.brifing-znak {
  width: auto;
  padding: 0 11px;
  border-color: #6b4fd8;
  background: #6b4fd8;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.topbar-icon-button.brifing-znak:hover:not(:disabled) {
  border-color: #5a3fc4;
  background: #5a3fc4;
  color: #fff;
}

.topbar-icon-button.brifing-znak[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(107, 79, 216, 0.25);
}

/* „✦ Novi brifing" u kartici: obris u boji AI-a, kao u CRM-u. */
.brifing-dugmad .brifing-novi {
  border-color: #6b4fd8;
  background: rgba(107, 79, 216, 0.1);
  color: #6b4fd8;
}

/* Na telefonu peto dugme u redu (ime firme + ✦ AI, izgled, korpa, pomoć,
   profil) gura ikonice u poseban red: na 375 px je falilo ~6 px, a duže ime
   firme bi izguralo još. Ime se zato skraćuje tačkicama, a razmak je manji. */
@media (max-width: 900px) {
  .topbar:has(.brifing-znak) .topbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    /* Red ikonica je ~233 px + razmak 16; traka se prelama pre nego što bi se ime skupilo. */
    max-width: calc(100% - 252px);
    overflow: hidden;
  }

  .topbar:has(.brifing-znak) .topbar-brand-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar:has(.brifing-znak) .topbar-actions {
    gap: 6px;
  }

  .topbar-icon-button.brifing-znak {
    padding: 0 9px;
  }
}

/* ——— ✦ AI centar (v2.0.11, docs/b2b-ai-centar-mokap.html, korak 1) ———
   Ista ljubičasta kao grupa „AI" i CRM (#6b4fd8). Tamnoljubičasta površina
   postoji samo na bloku u meniju i na heroju: oko je prepoznaje kao „AI". */
.ai-centar-blok {
  width: 100%;
  display: grid;
  gap: 2px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(150deg, #7c5cf0 0%, #5a3fc4 60%, #3d2a96 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 6px 16px rgba(107, 79, 216, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-centar-blok:hover,
.ai-centar-blok.active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) inset, 0 8px 20px rgba(107, 79, 216, 0.6);
}

.ai-centar-blok-red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  font-weight: 750;
}

.ai-centar-blok-znak {
  margin-right: 7px;
  color: #e9e2ff;
}

.ai-centar-blok small {
  color: #e2dafc;
  font-size: 12px;
  line-height: 1.3;
}

.ai-centar-broj {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ff6b5a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* Tabovi stoje između zaglavlja i #view: .content dobija treći red samo dok se vide. */
.content:has(> .ai-centar-tabovi:not([hidden])) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.ai-centar-tabovi-red {
  display: flex;
  gap: 4px;
  margin: -8px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.ai-centar-tab {
  padding: 8px 14px;
  border: 0;
  border-bottom: 2.5px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ai-centar-tab.on {
  color: #5a3fc4;
  border-bottom-color: #6b4fd8;
}

/* Heroj: Pregled dana kao naslovna strana AI centra. */
.ai-heroj {
  margin-bottom: 16px;
  padding: 20px 22px 16px;
  border-radius: 16px;
  color: #ffffff;
  background:
    radial-gradient(120% 140% at 100% 0%, #8d6ff7 0%, transparent 55%),
    linear-gradient(135deg, #2a1d6e 0%, #4b33b0 55%, #6b4fd8 100%);
  box-shadow: 0 14px 34px rgba(61, 42, 150, 0.28);
}

.ai-heroj-kad {
  margin: 0;
  color: #cdbffd;
  font-size: 12.5px;
  font-weight: 650;
}

.ai-heroj-pozdrav {
  margin: 6px 0 0;
  color: #e6defd;
  font-size: 15px;
}

.ai-heroj-naslov {
  margin: 2px 0 14px;
  color: #ffffff;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ai-heroj-opis {
  max-width: 760px;
  margin: -6px 0 12px;
  color: #e6defd;
}

.ai-heroj-stvari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.ai-stvar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.ai-stvar p {
  flex: 1;
  margin: 0;
  color: #f4f0ff;
  line-height: 1.4;
}

.ai-stvar-broj {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 12.5px;
  font-weight: 800;
}

.ai-heroj .link-button {
  color: #ffffff;
  font-weight: 700;
}

.ai-stvar .link-button {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 8px;
  background: #ffffff;
  color: #3d2a96;
  text-decoration: none;
}

.ai-heroj-dobro {
  margin: 0 0 8px;
  color: #b9f5cf;
}

.ai-heroj-izvor {
  margin: 0;
  color: #cdbffd;
  font-size: 12.5px;
}

.ai-heroj-dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* „Štampaj" i „Kopiraj" su u svom bloku sa margin-top i 13 px; u heroju se
   to poništava, da „Raniji pregledi" stoji u istoj liniji (v2.0.28). */
.ai-heroj-dno .ai-odgovor-dugmad {
  margin-top: 0;
  font-size: inherit;
}

.ai-heroj.zakljucan .ai-heroj-dno,
.ai-heroj.prazan .ai-heroj-dno {
  border-top: 0;
  padding-top: 0;
}

.ai-heroj-dno .button,
.ai-heroj-svetlo {
  background: #ffffff;
  border-color: #ffffff;
  color: #3d2a96;
}

.ai-heroj-dno .button.ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* Raniji pregledi se otvaraju u heroju, ali na svetloj podlozi, da se čitaju. */
.ai-heroj-arhiva:not([hidden]) {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
}

.ai-heroj-arhiva .link-button {
  color: var(--brand);
}

/* Heroj na telefonu (v2.0.25, mokap odeljak 5, H-1..H-3): glava stavke
   (oznaka, naslov, iznos) postoji samo ispod 900 px; tekst i dugme se vide
   tek kad se stavka dodirne. Posle tri stavke dugme „Još N". */
.ai-stvar-glava,
.ai-heroj-jos {
  display: none;
}

@media (max-width: 899px) {
  .ai-heroj-stvari {
    gap: 8px;
  }

  .ai-stvar {
    gap: 0;
    padding: 0;
  }

  .ai-stvar.otvorena {
    gap: 8px;
    padding-bottom: 12px;
  }

  .ai-stvar > .ai-stvar-broj,
  .ai-stvar:not(.otvorena) > p,
  .ai-stvar:not(.otvorena) > .link-button,
  .ai-heroj-stvari:not(.sve) > .ai-stvar.visak {
    display: none;
  }

  .ai-stvar.otvorena > p {
    padding: 0 12px;
  }

  .ai-stvar.otvorena > .link-button {
    margin-left: 12px;
  }

  .ai-stvar-glava {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 10px 34px 10px 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  /* Strelica: dole kad je zatvorena, gore kad je otvorena. */
  .ai-stvar-glava::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
  }

  .ai-stvar.otvorena .ai-stvar-glava::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  .ai-stvar-vrsta {
    color: #ffd4cc;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ai-stvar-vrsta.z {
    color: #ffe39a;
  }

  .ai-stvar-vrsta.p {
    color: #b9f5cf;
  }

  .ai-stvar-vrsta.a {
    color: #cfe0ff;
  }

  .ai-stvar-naslov {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
  }

  .ai-stvar-igra {
    color: #e6defd;
    font-size: 13px;
  }

  .ai-stvar-igra b {
    color: #ffffff;
    font-weight: 800;
  }

  .ai-heroj-jos {
    display: block;
    width: 100%;
    margin: -4px 0 12px;
    padding: 9px 12px;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
}

.ai-centar-kolone {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.ai-centar-kolone > .panel {
  margin: 0;
}

@media (max-width: 1100px) {
  .ai-centar-kolone {
    grid-template-columns: minmax(0, 1fr);
  }
}

.upozorenja-uvod {
  margin: -4px 0 8px;
  font-size: 13px;
}

.pitaj-brojeve.zakljucano {
  border-style: dashed;
}

/* Traka „✦ AI za danas" na Kontrolnoj tabli. */
.ai-traka {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(120% 140% at 100% 0%, #8d6ff7 0%, transparent 55%),
    linear-gradient(135deg, #2a1d6e 0%, #4b33b0 55%, #6b4fd8 100%);
  box-shadow: 0 10px 24px rgba(61, 42, 150, 0.22);
}

.ai-traka-tekst {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ai-traka-tekst small {
  color: #cdbffd;
  font-size: 12.5px;
  font-weight: 650;
}

.ai-traka-tekst b {
  font-size: 15px;
  line-height: 1.3;
}

.ai-traka-dugme {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 9px;
  background: #ffffff;
  color: #3d2a96;
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ai-heroj {
    padding: 16px 15px 13px;
    border-radius: 14px;
  }

  .ai-heroj-stvari {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-traka {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  .ai-traka-dugme {
    text-align: center;
  }

  /* ✦ u donjoj traci (O-4): izdignut ljubičasti krug u sredini. */
  body.portal-active .mobile-tabbar button.mobile-tab-ai {
    color: #5a3fc4;
    font-weight: 700;
  }

  body.portal-active .mobile-tabbar button.mobile-tab-ai .mobile-tab-icon {
    width: 40px;
    height: 40px;
    margin-top: -18px;
    border-radius: 50%;
    background: linear-gradient(150deg, #7c5cf0, #3d2a96);
    box-shadow: 0 4px 12px rgba(107, 79, 216, 0.5);
  }

  body.portal-active .mobile-tabbar button.mobile-tab-ai .ikona-ai {
    color: #ffffff;
  }

  .ai-centar-tabovi-red {
    margin-top: -4px;
  }
}

/* ——— Signali sa iznosom u igri (v2.0.13, AI centar korak 2) ———
   Iznos je krupan broj desno: on kaže koji signal ide prvi. Dugme ispod
   teksta kaže šta se radi. */
.signal-red .upozorenje-tekst small {
  margin-bottom: 7px;
}

.signal-radnje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.signal-radnje .button {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 13px;
}

.signal-radnje .signal-glavno:not(.ghost) {
  background: #6b4fd8;
  border-color: #6b4fd8;
  color: #ffffff;
}

.signal-radnje .signal-glavno.ghost {
  border-color: #6b4fd8;
  color: #5a3fc4;
}

.signal-znam {
  color: var(--muted);
  font-size: 13px;
}

.signal-iznos {
  display: grid;
  justify-items: end;
  min-width: 110px;
  text-align: right;
  white-space: nowrap;
}

.signal-iznos b {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ton-r .signal-iznos b { color: #b23b23; }
.ton-g .signal-iznos b { color: #1f8a4c; }

.signal-iznos small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 640px) {
  /* Iznos ide u prvi red, pored naslova, a ne ispod dugmadi. */
  .signal-red {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .signal-iznos {
    min-width: 0;
  }

  .signal-iznos b {
    font-size: 14px;
  }
}

/* ——— „✦ Uvid o kupcu" i „✦ Traženo" (v2.0.14, AI centar korak 4) ———
   Između zaglavlja kupca i tabova. Svetla ljubičasta, ne tamni heroj: heroj
   je samo u AI centru i bloku menija (mokap, odeljak 3). Ne zatvara se,
   samo se skuplja u jedan red; na telefonu je skupljena od početka. */
.kupac-uvid-mesto:empty {
  display: none;
}

.kupac-uvid {
  margin: 0 0 14px;
  padding: 11px 14px 12px;
  border: 1.5px solid #6b4fd8;
  border-radius: 12px;
  background: #f8f6ff;
}

.kupac-uvid-glava {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kupac-uvid-skupi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.kupac-uvid-znak {
  color: #5a3fc4;
  font-weight: 800;
  white-space: nowrap;
}

.kupac-uvid-naslov {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  background: #eef1f6;
  color: #4a5568;
}

.kupac-uvid-naslov.ton-r { background: #fbecea; color: #a5391f; }
.kupac-uvid-naslov.ton-a { background: #fdf3e0; color: #8a5f0f; }
.kupac-uvid-naslov.ton-g { background: #e8f6ed; color: #1a7a43; }

.kupac-uvid-strelica {
  margin-left: auto;
  color: #6b4fd8;
  transition: transform 0.15s ease;
}

.kupac-uvid.skupljeno .kupac-uvid-strelica {
  transform: rotate(-90deg);
}

.kupac-uvid-radnje {
  display: flex;
  gap: 8px;
  flex: none;
}

.kupac-uvid-radnje .button {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 13px;
}

.kupac-uvid-radnje .kupac-uvid-trebovanje {
  background: #6b4fd8;
  border-color: #6b4fd8;
  color: #ffffff;
}

.kupac-uvid-radnje .kupac-uvid-brifing-dugme {
  border-color: #6b4fd8;
  color: #5a3fc4;
  background: #ffffff;
}

.kupac-uvid-telo {
  margin-top: 8px;
}

.kupac-uvid.skupljeno .kupac-uvid-telo {
  display: none;
}

.kupac-uvid-spisak {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 14px;
  line-height: 1.4;
}

.kupac-uvid-spisak li::marker { color: #b9abef; }
.kupac-uvid-spisak li.ton-r::marker { color: #b23b23; }
.kupac-uvid-spisak li.ton-a::marker { color: #c58a1c; }
.kupac-uvid-spisak li.ton-g::marker { color: #1f8a4c; }

.kupac-uvid-jos summary {
  margin-top: 6px;
  color: #5a3fc4;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.kupac-uvid-izvor {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Ritam kao tačke na osi; prazan krug je porudžbina koja je izostala. */
.uvid-ritam {
  position: relative;
  height: 18px;
  margin: 4px 8px 0;
}

.uvid-ritam-osa {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ddd5fb;
}

.uvid-tacka,
.uvid-danas {
  position: absolute;
  top: 3px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #6b4fd8;
}

.uvid-tacka.izostala {
  background: #ffffff;
  border: 2px dashed #b23b23;
}

.uvid-danas {
  top: 0;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  border-radius: 0;
  background: #8a92a3;
}

.uvid-ritam-opis {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.kupac-uvid-brifing {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid #ddd5fb;
  line-height: 1.45;
}

.kupac-uvid-brifing p {
  margin: 0 0 6px;
}

.kupac-uvid-brifing-red b {
  color: #5a3fc4;
}

/* Ocena rizika 0–100 (v2.0.19): iste boje kao prsten u CRM-u
   (visits-forms-reminders.css, .ai-uvid-prsten). Boja nivoa je značenje, ne
   AI — zato nije ljubičasta. Granice prate prag firme (admin.js, stanjeOcene). */
.uvid-prsten {
  --uvid-nivo: #9a988f;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
}

.uvid-prsten.uvid-prsten-mali {
  width: 28px;
  height: 28px;
}

.uvid-prsten.is-ispod { --uvid-nivo: #2e8b4f; }
.uvid-prsten.is-rizik { --uvid-nivo: #d98a1f; }
.uvid-prsten.is-visok { --uvid-nivo: #d1453b; }

.uvid-prsten-staza,
.uvid-prsten-luk {
  fill: none;
  stroke-width: 10;
}

.uvid-prsten-staza { stroke: var(--line); }

.uvid-prsten-luk {
  stroke: var(--uvid-nivo);
  stroke-linecap: round;
}

.uvid-prsten-mali .uvid-prsten-staza,
.uvid-prsten-mali .uvid-prsten-luk {
  stroke-width: 14;
}

.uvid-prsten-broj {
  fill: var(--text, #1f2f46);
  font-size: 24px;
  font-weight: 700;
}

.uvid-prsten-mali .uvid-prsten-broj { font-size: 34px; }

.uvid-prsten-od {
  fill: var(--muted);
  font-size: 10px;
}

.uvid-ocena {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 2px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd5fb;
}

.uvid-ocena-opis {
  flex: 1 1 auto;
  min-width: 0;
}

.uvid-ocena-glava {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 0;
}

.uvid-ocena-stanje {
  font-weight: 700;
  color: var(--muted);
}

.uvid-ocena-stanje.is-ispod { color: #2e8b4f; }
.uvid-ocena-stanje.is-rizik { color: #b86f12; }
.uvid-ocena-stanje.is-visok { color: #c2392f; }

.uvid-ocena-prag {
  color: var(--muted);
  font-size: 12px;
}

.uvid-ocena-pravila {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5a3fc4;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.uvid-ocena-pravila:hover { text-decoration: underline; }

.uvid-ocena-podnaslov {
  margin: 6px 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.uvid-ocena-znakovi {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.uvid-ocena-znakovi li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.uvid-ocena-znakovi li:last-child { border-bottom: 0; }

.uvid-ocena-znakovi b {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.uvid-ocena-napomena {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Mali prsten u glavi trake: jedino što se vidi skupljeno i na telefonu. */
.kupac-uvid-rizik {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}

.kupac-uvid-rizik b { color: var(--text, #1f2f46); }
.kupac-uvid-rizik.is-ispod b { color: #2e8b4f; }
.kupac-uvid-rizik.is-rizik b { color: #b86f12; }
.kupac-uvid-rizik.is-visok b { color: #c2392f; }

/* Kretanje ocene u uvidu (v2.0.23): kriva 30 dana, boja nivoa kao prsten. */
.uvid-kretanje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
}

.uvid-kriva {
  --uvid-nivo: #9a988f;
  flex: none;
  width: 160px;
  height: 44px;
  overflow: visible;
}

.uvid-kriva.is-ispod { --uvid-nivo: #2e8b4f; }
.uvid-kriva.is-rizik { --uvid-nivo: #d98a1f; }
.uvid-kriva.is-visok { --uvid-nivo: #d1453b; }

.uvid-kriva-linija {
  fill: none;
  stroke: var(--uvid-nivo);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.uvid-kriva-prag {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.uvid-kriva-tacka {
  fill: var(--uvid-nivo);
}

.uvid-kretanje-tekst {
  color: var(--muted);
  font-size: 12px;
}

/* Spisak Kupaca (v2.0.21): mali prsten uz ime i čip „U riziku". */
.kupac-rizik-mesto {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}

.kupac-rizik-mesto:empty {
  display: none;
}

.kupac-rizik-mesto .uvid-prsten.uvid-prsten-mali {
  width: 24px;
  height: 24px;
}

/* [hidden] gubi od display iz .order-chip. */
.order-chip.cip-rizik[hidden] {
  display: none;
}

.order-chip.cip-rizik b {
  color: #b86f12;
}

.order-chip.cip-rizik.on {
  border-color: #d98a1f;
}

/* Proba pravila u Podešavanjima (v2.0.21). */
.rizik-proba {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #fbf8ef;
  border: 1px solid #f0e3c4;
  font-size: 14px;
}

.rizik-proba.is-cekanje {
  opacity: 0.6;
}

.rizik-proba-prvi {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Podešavanja -> Ocena rizika (v2.0.19). */
.rizik-pravila {
  display: grid;
  gap: 16px;
}

.rizik-prag-polje input {
  max-width: 110px;
}

.rizik-lestvica {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.rizik-lestvica li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rizik-tacka {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9a988f;
}

.rizik-lestvica .is-ispod .rizik-tacka { background: #2e8b4f; }
.rizik-lestvica .is-rizik .rizik-tacka { background: #d98a1f; }
.rizik-lestvica .is-visok .rizik-tacka { background: #d1453b; }
.rizik-lestvica .is-ispod b { color: #2e8b4f; }
.rizik-lestvica .is-rizik b { color: #b86f12; }
.rizik-lestvica .is-visok b { color: #c2392f; }

.rizik-zbir {
  margin: 10px 0 0;
  font-size: 13px;
}

.rizik-znaci {
  display: grid;
  gap: 0;
  margin-bottom: 12px;
}

.rizik-znak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.rizik-znak:last-child {
  border-bottom: 0;
}

.rizik-znak-naziv {
  font-weight: 700;
}

.rizik-poeni {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  white-space: nowrap;
}

.rizik-poeni input,
.rizik-broj {
  width: 72px;
  min-height: 34px;
  padding: 4px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Okvir kao kod ostalih polja (v2.0.42): do sada je pregledac crtao svoj,
     sa ostrim uglovima — jedina polja u portalu bez zaobljenja. */
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
  outline: none;
}

.rizik-poeni input:focus,
.rizik-broj:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.16);
}

.rizik-broj {
  display: inline-block;
  margin: 2px 2px;
}

.rizik-broj.rizik-broj-iznos {
  width: 120px;
}

.rizik-recenica,
.rizik-opis {
  grid-column: 1 / -1;
  margin: 0;
}

.rizik-recenica {
  line-height: 2.1;
}

.rizik-znak.is-off .rizik-recenica,
.rizik-znak.is-off .rizik-poeni,
.rizik-znak.is-off .rizik-opis {
  opacity: 0.5;
}

/* Kartica artikla: jedan red iznad tela. */
.kartica-art-trazeno {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 1.5px solid #6b4fd8;
  border-radius: 10px;
  background: #f8f6ff;
  line-height: 1.4;
}

.kartica-art-trazeno-znak {
  color: #6b4fd8;
  font-weight: 800;
}

.kartica-art-trazeno b {
  color: #a5391f;
}

.kartica-art-trazeno.stiglo b {
  color: #8a5f0f;
}

@media (max-width: 899px) {
  /* Jedan red: „✦ Kasni 14 dana · Brifing". Trebovanje je već u zaglavlju. */
  .kupac-uvid {
    padding: 8px 11px;
  }

  .kupac-uvid-glava {
    flex-wrap: nowrap;
  }

  .kupac-uvid-znak {
    font-size: 0;
  }

  .kupac-uvid-znak::before {
    content: "✦";
    font-size: 15px;
  }

  .kupac-uvid-radnje .kupac-uvid-trebovanje {
    display: none;
  }

  /* Na telefonu ostaje samo prsten sa brojem; reč „Rizik" bi gurnula naslov. */
  .kupac-uvid-rizik > span {
    display: none;
  }

  .uvid-ocena {
    gap: 10px;
  }

  .uvid-ocena .uvid-prsten:not(.uvid-prsten-mali) {
    width: 64px;
    height: 64px;
  }
}

/* ——— Traka „✦ Pitaj" (v2.0.14, AI centar korak 3) ———
   Prvi red Table, Analitike, Kupaca, Porudžbina i Artikala (Dejan, 09.10.).
   Stoji van #view, pa .content dobija treći red dok se vidi, kao kod tabova
   AI centra. Na podekranu sa „← Nazad" (stranica kupca, kartica artikla) se
   ne vidi: tamo je uvid, a pitanje pripada spisku. */
.content:has(> .ai-pitaj-traka:not([hidden])) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.content:has(#view .nazad-na-spisak) > .ai-pitaj-traka {
  display: none;
}

.content:has(#view .nazad-na-spisak):has(> .ai-pitaj-traka:not([hidden])) {
  grid-template-rows: auto minmax(0, 1fr);
}

.pitaj-traka {
  margin: -6px 0 16px;
  padding: 10px 14px 11px;
  border: 1.5px solid #6b4fd8;
  border-radius: 12px;
  background: #f8f6ff;
}

.pitaj-traka-red {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pitaj-traka-znak {
  flex: none;
  color: #5a3fc4;
  font-weight: 800;
  white-space: nowrap;
}

.pitaj-traka-red input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  border: 1.5px solid #cfc4f7;
  background: #ffffff;
}

.pitaj-traka-red input:focus {
  border-color: #6b4fd8;
}

.pitaj-traka-red .pitaj-traka-posalji {
  flex: none;
  background: #6b4fd8;
  border-color: #6b4fd8;
}

/* Mikrofon (v2.0.24): diktat iz pretrage, samo ikona i na računaru, u boji
   trake; kvadrat visine polja. */
.pitaj-traka-red .dictate-button {
  flex: none;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 8px;
  border: 1.5px solid #cfc4f7;
  background: #ffffff;
  color: #5a3fc4;
}

.pitaj-traka-red .dictate-button .scan-button-text {
  display: none;
}

.pitaj-traka-red .dictate-button.slusa {
  border-color: #6b4fd8;
  color: #6b4fd8;
}

.pitaj-traka-predlozi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pitaj-traka-predlozi .pitaj-brojeve-predlog {
  background: #ffffff;
}

.pitaj-traka-napomena {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.pitaj-traka.zakljucano {
  border-style: dashed;
  background: transparent;
}

.pitaj-traka.zakljucano .pitaj-traka-red .pitaj-traka-posalji {
  background: #b9abef;
  border-color: #b9abef;
}

/* Odgovor ispod trake; na računaru ima svoj klizač, da ekran ostane ispod. */
.pitaj-traka-odgovor {
  margin-top: 10px;
  max-height: 42vh;
  overflow: auto;
}

.pitaj-traka-odgovor .pitaj-brojeve-razgovor {
  margin-bottom: 6px;
}

.pitaj-traka-zatvori {
  font-size: 13px;
}

@media (max-width: 899px) {
  /* Jedan red: znak, polje, mikrofon, dugme (v2.0.24, mokap odeljak 5; do
     tada dva reda, 92 px na 375). Predlozi se vide tek kad je traka u fokusu
     (.otvorena, portal.js) i tada klize vodoravno. */
  .pitaj-traka {
    margin: 0 0 12px;
    padding: 8px 10px;
  }

  .pitaj-traka-red {
    gap: 8px;
  }

  .pitaj-traka:not(.otvorena) .pitaj-traka-predlozi {
    display: none;
  }

  .pitaj-traka-znak {
    font-size: 0;
  }

  .pitaj-traka-znak::before {
    content: "✦";
    font-size: 16px;
  }

  .pitaj-traka-predlozi {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pitaj-traka-predlozi .pitaj-brojeve-predlog {
    flex: none;
    white-space: nowrap;
  }

  .pitaj-traka-odgovor {
    max-height: none;
  }
}

/* ——— Red dokaza u heroju AI centra (v2.0.15, korak 5, mokap potez E) ——— */
.ai-heroj-dokaz {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 6px;
}

.ai-heroj-dokaz p {
  margin: 0;
  line-height: 1.45;
}

.ai-dokaz-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  color: #e9e3ff;
}

.ai-dokaz-ai small,
.ai-dokaz-posle small {
  color: #cdbffd;
  font-size: 12.5px;
}

.ai-dokaz-ai b,
.ai-dokaz-posle b {
  color: #ffffff;
  font-size: 15px;
}

.ai-dokaz-posle {
  color: #e9e3ff;
}

.ai-dokaz-posle b {
  color: #b9f5cf;
}

.ai-dokaz-posle small {
  display: block;
}

.dokaz-kratko {
  display: none;
}

/* Telefon (v2.0.29, Dejan 13.10.): jedan red „posle signala poručili";
   AI deo i napomena o roku otvaraju se dodirom. Bio je 202 px. */
@media (max-width: 899px) {
  .ai-heroj-dokaz {
    position: relative;
    padding-right: 30px;
    cursor: pointer;
  }

  /* „posle signala poručili: 5 kupaca · 212.000 RSD" je 290 px, a mesta
     ima 247: zatvoren red nosi kratak natpis i 13 px (233 px). */
  .ai-heroj-dokaz:not(.otvoren) .dokaz-dugo {
    display: none;
  }

  .ai-heroj-dokaz:not(.otvoren) .dokaz-kratko {
    display: inline;
  }

  .ai-heroj-dokaz .ai-dokaz-posle {
    font-size: 13px;
  }

  .ai-heroj-dokaz > .ai-dokaz-posle {
    order: -1;
  }

  .ai-heroj-dokaz:not(.otvoren) > .ai-dokaz-ai,
  .ai-heroj-dokaz:not(.otvoren) .ai-dokaz-posle small {
    display: none;
  }

  .ai-heroj-dokaz .ai-dokaz-posle b {
    font-size: 14px;
  }

  /* Strelica kao na stavkama heroja. */
  .ai-heroj-dokaz::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
  }

  .ai-heroj-dokaz.otvoren::after {
    top: 19px;
    transform: rotate(-135deg);
  }
}

/* ===== Deljeni demo nalog kampanje (v2.0.34) =====
   docs/b2b-demo-deljeni-nalog-mokap.html. Traka stoji iznad ljuske kao traka
   „Gledate portal kao" i oduzima istu visinu (--impersonation-bar-h); zuta je,
   da se ne pomesa sa portalom firme. Uz traku trebovanja ljuska gubi obe. */
.demo-deljeni-traka {
  height: var(--impersonation-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: #fff6e0;
  border-bottom: 1px solid #ecd28f;
  color: #5b4108;
}

.demo-deljeni-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.demo-deljeni-tekst strong {
  font-size: 13.5px;
  white-space: nowrap;
}

.demo-deljeni-tekst > span {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-deljeni-traka .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (min-width: 901px) {
  body.demo-deljeni .app-shell {
    height: calc(100vh - var(--impersonation-bar-h));
  }
  body.demo-deljeni.staff-ordering .app-shell {
    height: calc(100vh - 2 * var(--impersonation-bar-h));
  }
}

/* Na telefonu ostaje „Demo nalog · važi do" i kratko dugme; ostatak je u
   prozoru „Zatraži svoju probu". */
@media (max-width: 700px) {
  .demo-deljeni-traka {
    padding: 0 10px;
    gap: 8px;
  }
  .demo-deljeni-duze {
    display: none;
  }
  .demo-deljeni-traka .button {
    padding: 6px 10px;
    font-size: 12.5px;
  }
}

/* Prozor „Zatraži svoju probu": levo sta firma dobija, desno obrazac. */
.modal.proba-zahtev {
  width: min(860px, 100%);
  padding: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow-wrap: normal;
}

.proba-zahtev-levo {
  background: var(--sidebar);
  color: #dbe4f3;
  padding: 24px 22px;
  border-radius: 14px 0 0 14px;
}

.proba-zahtev-levo h2 {
  color: #fff;
  margin: 0 0 6px;
  font-size: 20px;
}

.proba-zahtev-pod {
  color: #a9bbdc;
  font-size: 13.5px;
  margin: 0 0 16px;
}

.proba-zahtev-levo ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.proba-zahtev-levo li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.42;
}

.proba-zahtev-levo li i {
  font-style: normal;
  color: #6ee7a8;
  font-weight: 800;
}

.proba-zahtev-levo li b {
  color: #fff;
}

.proba-zahtev-dno {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 14px 0 0;
  padding-top: 10px;
  font-size: 12.5px;
  color: #a9bbdc;
}

.proba-zahtev-desno {
  padding: 22px;
  min-width: 0;
}

.proba-zahtev-desno .modal-head h2 {
  margin: 0;
}

.proba-zahtev-desno .form-grid {
  grid-template-columns: 1fr 1fr;
}

/* Polje za botove: van ekrana, ne `display: none` (neki botovi to preskacu). */
.proba-zahtev-sajt {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 760px) {
  .modal.proba-zahtev {
    grid-template-columns: 1fr;
  }
  .proba-zahtev-levo {
    border-radius: 14px 14px 0 0;
    padding: 18px 16px;
  }
  .proba-zahtev-levo li {
    font-size: 13px;
    margin-bottom: 7px;
  }
  .proba-zahtev-desno {
    padding: 16px;
  }
  .proba-zahtev-desno .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Kartica kad server odbije radnju deljenog naloga. */
.demo-zabrana {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1600;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 34px 12px 14px;
  border-radius: 12px;
  background: #1d2a40;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.demo-zabrana-veza {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #8ec5ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.demo-zabrana-x {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  color: #c9d4e5;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .demo-zabrana {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* Prijava posle isteka roka. */
.demo-istekao {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #ecd28f;
  border-radius: 10px;
  background: #fff6e0;
  color: #5b4108;
  font-size: 14px;
}

.demo-istekao .button {
  align-self: flex-start;
  margin-top: 4px;
}

/* Kampanje u Super admin centru (ekran Probe, v2.0.34). */
.kampanja-kartica {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  background: var(--panel-soft);
}

.kampanja-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.kampanja-glava h3 {
  margin: 0;
}

/* Harmonika (v2.0.96): sazetak u zatvorenom redu, strelica je iz .super-fold. */
.kampanja-kartica > summary .kampanja-sazetak {
  flex: 1;
  font-size: 13.5px;
}

.kampanja-adresa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.kampanja-adresa p {
  margin: 0;
}

.kampanja-kartica .modal-actions {
  flex-wrap: wrap;
}

.kampanja-izbor {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #ecd28f;
  border-radius: 10px;
  background: #fff6e0;
}

.kampanja-nalozi {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  font-size: 14px;
  line-height: 1.6;
  user-select: all;
}

/* Izbor statusa zahteva za probu (v2.0.42): pregledacev izbor je imao ostre
   uglove; sada isti okvir kao polja u obrascima. */
.demo-zahtevi select {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
  outline: none;
}

.demo-zahtevi select:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.16);
}

/* Radnje u redu zahteva za probu (v2.0.43): Otvori probu i Obriši jedno do drugog. */
.demo-zahtevi .zahtev-radnje {
  white-space: nowrap;
}

.demo-zahtevi .zahtev-radnje .button + .button {
  margin-left: 6px;
}

/* Super admin: mejlovi bez firme (v2.0.60; od v2.0.64 van pravila .demo-zahtevi select,
   u koje je upao pri prenosu izmene na noviji test). */
.super-mejlovi-spisak { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.super-mejlovi-spisak li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; overflow-wrap: anywhere; }
.super-mejlovi-red { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.super-mejlovi-uputstvo { font-size: 12.5px; color: #8a5a00; }

/* Pogresno polje (v2.0.73, nalaz testa dema #9 i #10): crveni okvir dok se ne
   ispravi. Postavlja ga pokaziPogresnoPolje() u ui.js. */
input.polje-greska,
select.polje-greska,
textarea.polje-greska,
.field input.polje-greska:not([type="checkbox"]):not([type="radio"]),
.field select.polje-greska,
.field textarea.polje-greska {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Sta trosi AI paket (v2.0.76): svoj red ispod „Iskorisceno“. */
.ai-paket-trose { display: block; margin-top: 4px; }

/* ===== Super admin: izgled platforme (v2.0.86) =====
   docs/b2b-super-admin-izgled-mokap.html, predlog A. U centru (body.super-platforma)
   ljuska je grafitna sa tirkiznim akcentom umesto tamnoplave firme. Promenljive
   stoje na body-ju, pa tuku i boju firme koju brand-theme.js upisuje na :root.
   Tirkiz je slobodan: plavo je firma, ljubicasto AI, smedje pregled kao kupac. */
body.super-platforma {
  --brand: #0f766e;
  --brand-dark: #0b4f4a;
  --brand-soft: #e6f4f2;
  --brand-ink: #ffffff;
  --accent: #2dd4bf;
  --sidebar: #16181d;
  --sidebar-soft: #25282f;
  --sidebar-glow: rgba(45, 212, 191, 0.12);
}

body.super-platforma .nav-items button.active {
  background: rgba(45, 212, 191, 0.16);
  box-shadow: inset 3px 0 0 #2dd4bf;
}

.brand-pod {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5eead4;
}

/* Oznaka „Super admin" u kartici prijavljenog: tirkizna, ne zuta. */
.kartica-ja.ton-platforma .kartica-ja-krug {
  background: #0f766e;
  color: #ffffff;
}

.sidebar-ja.ton-platforma .kartica-ja-oznaka {
  background: rgba(45, 212, 191, 0.2);
  color: #99f6e4;
}

/* Super admin u firmi: meni ostaje firmin, a traka iznad kaze da je to
   platforma. Visina je ista kao kod trake pregleda (--impersonation-bar-h). */
.super-u-firmi-traka {
  height: var(--impersonation-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(180deg, #25282f, #16181d);
  border-bottom: 2px solid #2dd4bf;
  color: #ffffff;
}

.super-u-firmi-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.super-u-firmi-tekst strong {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.super-u-firmi-oznaka {
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #2dd4bf;
  color: #05302b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.super-u-firmi-duze {
  font-size: 12px;
  opacity: 0.8;
}

.super-u-firmi-traka .button {
  flex: 0 0 auto;
  white-space: nowrap;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.super-u-firmi-traka .button:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (min-width: 901px) {
  body.super-u-firmi .app-shell {
    height: calc(100vh - var(--impersonation-bar-h));
  }
  body.super-u-firmi.staff-ordering .app-shell {
    height: calc(100vh - 2 * var(--impersonation-bar-h));
  }
  /* Meni i sadrzaj su visoki 100vh; uz bilo koju traku iznad ljuske ispadnu
     ispod skracene ljuske, a body ima overflow: hidden — „Odjavi se" i dno
     sadrzaja se ne vide. Do v2.0.87 je to vazilo za sve trake (izmereno
     16.10.2026: ljuska 716 px, dno „Odjavi se" na 798 px pri prozoru 768). */
  body.super-u-firmi .app-shell > .sidebar,
  body.super-u-firmi .app-shell > .content,
  body.impersonating .app-shell > .sidebar,
  body.impersonating .app-shell > .content,
  body.staff-ordering .app-shell > .sidebar,
  body.staff-ordering .app-shell > .content,
  body.demo-deljeni .app-shell > .sidebar,
  body.demo-deljeni .app-shell > .content {
    height: 100%;
  }
}

/* Telefon: bocnog menija nema, pa razliku nosi donja traka (grafitna) i
   tirkizna linija iznad zaglavlja. U traci u firmi ostaje oznaka i ime firme. */
@media (max-width: 900px) {
  body.super-platforma.portal-active .mobile-tabbar {
    background: #16181d;
    border-top-color: #2a2d34;
  }
  body.super-platforma.portal-active .mobile-tabbar button {
    color: #9aa1ad;
  }
  body.super-platforma.portal-active .mobile-tabbar button.active {
    color: #2dd4bf;
  }
  body.super-platforma .mobile-tab-badge {
    border-color: #16181d;
  }
  body.super-platforma .content {
    border-top: 3px solid #2dd4bf;
  }
  .mobile-more-ja.ton-platforma .kartica-ja-oznaka {
    color: #0f766e;
  }
}

@media (max-width: 700px) {
  .super-u-firmi-traka {
    padding: 0 10px;
    gap: 8px;
  }
  .super-u-firmi-duze,
  .super-u-firmi-uvod {
    display: none;
  }
  .super-u-firmi-traka .button {
    padding: 6px 10px;
    font-size: 12.5px;
  }
}

/* Polja za datum dd.mm.gggg (v2.0.95, js/datum-polje.js). Pravo polje
   (type=date) ostaje u formi radi vrednosti i kalendara, ali se ne vidi;
   !important jer `.field input:not(...)` ima jaci selektor. */
input.datum-izvor {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

input.datum-tekst {
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8597' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
}