/* ============================================================================
   Voxigo — stilovi aplikacije
   Izvor istine za izgled: resources/Voxigo Ekrani IX26.html (00/0.6).
   Pisano ručno, bez build alata (00/2).

   Fontovi su lokalni jer CSP dozvoljava `font-src 'self'` (00/7.9) — oba su
   varijabilna, pa jedan fajl po podskupu pokriva sve debljine.
   ========================================================================== */

/* --- Fontovi -------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokeni iz dizajna ---------------------------------------------------- */

:root {
  --navy:        #0A1470;   /* brend plava, vrh pozadine */
  --navy-deep:   #060C4E;   /* dno pozadine */
  --navy-ink:    #051177;   /* tekst i linkovi na svijetloj podlozi */
  --accent:      #FF9E1B;   /* akcent — dugmad, logo */
  --accent-soft: #FFC46A;   /* sporedni linkovi na tamnoj podlozi */
  --selected:    #E0E0E0;   /* izabrani segment i kartica (odluka naručioca) */
  --text:        #ffffff;
  --text-muted:  #A8AEDC;
  --text-faint:  #8F94BC;
  --text-dark:   #101321;
  --placeholder: #9FA5CE;
  --danger:      #FF9C8A;
  --danger-bg:   rgba(255, 92, 71, .18);
  --danger-line: rgba(255, 110, 90, .55);
  --success:     #6EE7A8;
  --success-bg:  rgba(46, 190, 110, .18);
  --success-line: rgba(46, 190, 110, .55);

  --field-bg:     rgba(242, 243, 248, .16);
  --field-border: rgba(255, 255, 255, .38);
  --field-bg-on:     rgba(242, 243, 248, .22);
  --field-border-on: rgba(255, 255, 255, .65);

  --radius-pill: 999px;
  /* Visina pilule; njena polovina je poluprečnik zaobljenja (vidi .pw-meter). */
  --pill-h:      56px;
  --radius-lg:   18px;

  --font:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand: 'Quicksand', 'Hanken Grotesk', system-ui, sans-serif;
}

/* --- Osnova --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Ekrani autentifikacije: tamna brend pozadina sa dva odsjaja, po dizajnu 3a. */
body.auth {
  background:
    radial-gradient(ellipse 90% 45% at 50% 30%, rgba(63, 80, 220, .35), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 108%, rgba(63, 80, 220, .3), transparent 70%),
    linear-gradient(180deg, var(--navy) 55%, var(--navy-deep));
  background-attachment: fixed;
}

/* Na širokom ekranu odsjaji su uži i nešto niži — dizajn 3b ih tako i crta. */
@media (min-width: 768px) {
  body.auth {
    background:
      radial-gradient(ellipse 70% 55% at 50% 32%, rgba(63, 80, 220, .35), transparent 70%),
      radial-gradient(ellipse 55% 35% at 50% 108%, rgba(63, 80, 220, .3), transparent 70%),
      linear-gradient(180deg, var(--navy) 55%, var(--navy-deep));
    background-attachment: fixed;
  }
}

/* Vodeni žig — veliko „V" iz znaka (dizajn 3a za telefon, 3b za desktop).
   Dva crteža na dva platna; prikazuje se onaj koji odgovara ekranu, jer im se
   razlikuju i proporcije i položaj vrha slova. */
.auth-watermark {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.auth-watermark-desktop { display: none; }

@media (min-width: 768px) {
  .auth-watermark-mobile { display: none; }
  .auth-watermark-desktop { display: block; }
}

/* --- Raspored ------------------------------------------------------------- */

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 20px 32px;
}

.auth-logo {
  font-family: var(--brand);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .5px;
  color: var(--accent);
  text-align: center;
  text-decoration: none;
  display: block;
}

.auth-card {
  width: 100%;
  max-width: 390px;
  margin: auto 0;
  padding: 34px 0 0;
}

.auth-title {
  font-weight: 200;
  font-size: 22px;
  line-height: 1.25;
  text-align: center;
  margin: 0;
}

.auth-subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  margin: 6px 0 0;
  text-wrap: pretty;
}

.auth-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-foot a { color: var(--accent-soft); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* Na širokom ekranu kartica se centrira, po dizajnu 3b. */
@media (min-width: 768px) {
  .auth-shell { justify-content: center; padding: 40px 20px; }

  .auth-card {
    max-width: 430px;
    margin: 24px 0 0;
    padding: 38px 40px 34px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(3, 7, 40, .45);
  }

  .auth-title { font-size: 26px; }
}

/* --- Polja ---------------------------------------------------------------- */

.field { margin-top: 12px; }
.field:first-of-type { margin-top: 0; }

.field-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--pill-h);
  padding: 0 22px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .15s, background .15s;
}

.field-pill:focus-within {
  background: var(--field-bg-on);
  border-color: var(--field-border-on);
}

.field-pill svg { flex: none; stroke: var(--placeholder); }

.field-pill input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-weight: 300;
  font-size: 15px;
  color: var(--text);
}

/*
 * Dizajn crta opis polja debljinom 100, ali je tako tanak potez na staklenoj
 * podlozi jedva vidljiv (primjedba naručioca).  Debljina je ista kao unesen
 * tekst, a razliku nosi samo boja.
 */
.field-pill input::placeholder { font-weight: 300; color: var(--placeholder); opacity: 1; }

/*
 * Autofill (i prijedlog dok se kuca) u Chrome-u i Safari-ju boji pozadinu polja.
 * Puna boja preko nje bila bi tamni pravougaonik na staklenom polju, pa se
 * pozadina pregledača umjesto toga odgađa praktično zauvijek — polje ostaje
 * providno, kao kad se kuca ručno.
 */
.field-pill input:-webkit-autofill,
.field-pill input:-webkit-autofill:hover,
.field-pill input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 600000s 0s, color 600000s 0s;
}

.field-pill.has-error { border-color: var(--danger-line); background: var(--danger-bg); }

/* Dugme za prikaz lozinke */
.field-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--placeholder);
}

.field-error {
  display: block;
  margin: 7px 0 0 22px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--danger);
}

.field-hint {
  display: block;
  margin: 8px 0 0 22px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* --- Polja za kod verifikacije (dizajn 3d) --------------------------------
   Pet kutija 52×60 sa radijusom 14, istog staklastog materijala kao i pilule.
   Na uskim ekranima se skupljaju umjesto da izlaze iz okvira.                */

.code-input {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.code-box {
  width: 52px;
  height: 60px;
  min-width: 0;
  flex: 0 1 52px;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  /* Unesena slova u boji znaka „voxigo" — isto kako kod stoji i u mailu. */
  color: var(--accent);
  text-transform: uppercase;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  outline: none;
  transition: border-color .15s, background .15s;
}

.code-box::placeholder { color: transparent; }

.code-box:focus {
  background: var(--field-bg-on);
  border-width: 1.5px;
  border-color: var(--field-border-on);
  caret-color: var(--accent-soft);
}

/* Popunjena kutija je nešto svjetlija — vidi se dokle se stiglo. */
.code-box:not(:placeholder-shown) { background: var(--field-bg-on); }

.code-input.has-error .code-box { border-color: var(--danger-line); background: var(--danger-bg); }

@media (max-width: 380px) {
  .code-input { gap: 7px; }
  .code-box { height: 56px; font-size: 21px; }
}

/* --- Indikator jačine lozinke (Z2.1) -------------------------------------- */

/*
 * Linija prati ravni dio polja iznad sebe: počinje tamo gdje se završava lijevo
 * zaobljenje pilule, a staje tamo gdje počinje desno.  Poluprečnik pilule je
 * pola njene visine, pa se odmak računa iz istog tokena — kad se pilula smanji
 * (wizard, podešavanja), linija se poravna sama.
 *
 * Bez natpisa: linija se samo puni (odluka naručioca).  Širinu postavlja
 * auth.js kroz CSSOM, jer je to procenat, a ne nekoliko stepenika.  Boje su
 * pune verzije crvene i zelene iz tokena `--danger-bg` / `--success-bg`, da
 * sva tri stanja budu jednako jasna uz narandžasti akcent.
 */
.pw-meter {
  --pw-weak:   #FF5C47;
  --pw-fair:   var(--accent);
  --pw-strong: #2EBE6E;
  margin: 10px calc(var(--pill-h) / 2) 0;
}

.pw-meter-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.pw-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--pw-weak);
  transition: width .2s, background .2s;
}

/* Do 40 % crvena, 40–70 % narandžasta, preko zelena. */
.pw-meter[data-level="weak"]   .pw-meter-fill { background: var(--pw-weak); }
.pw-meter[data-level="fair"]   .pw-meter-fill { background: var(--pw-fair); }
.pw-meter[data-level="strong"] .pw-meter-fill { background: var(--pw-strong); }

/* Savjet i greška stoje poravnati sa linijom iznad sebe. */
.pw-meter .field-hint,
.pw-meter .field-error { margin: 7px 0 0; }

/* --- Dugmad --------------------------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(255, 158, 27, .35);
}

.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  min-height: 50px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--placeholder);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--field-border-on); }

.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Glavno dugme dok se ne izabere firma (4a): blijedi akcent, bez sjene. */
.btn-primary:disabled {
  opacity: 1;
  background: rgba(255, 158, 27, .35);
  color: rgba(10, 20, 112, .55);
  box-shadow: none;
}

.link-accent {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-soft);
  text-decoration: none;
}

.link-accent:hover { text-decoration: underline; }

.link-right { display: block; text-align: right; padding: 0 8px; font-size: 13px; }

/* --- Poruke --------------------------------------------------------------- */

.notice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 13px 18px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

.notice svg { flex: none; margin-top: 1px; }

/* Ikona poruke uvijek po sredini visine — i kad tekst ide u dva reda (naručilac, 19.09.2026). */
.notice > svg:first-child { align-self: center; margin-top: 0; }

.notice-error   { background: var(--danger-bg);  border: 1px solid var(--danger-line);  color: #FFD5CC; }
.notice-success { background: var(--success-bg); border: 1px solid var(--success-line); color: #C7F5DC; }
.notice-info    { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: var(--text-muted); }

.notice a { color: inherit; font-weight: 700; }

/* --- Stanje sa ikonom (verifikacija, reset) ------------------------------- */

.state { display: flex; flex-direction: column; align-items: center; text-align: center; }

.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
}

.state-icon.is-success {
  background: var(--success-bg);
  border: 1.5px solid var(--success-line);
  box-shadow: 0 0 34px rgba(46, 190, 110, .35);
}

.state-icon.is-error {
  background: var(--danger-bg);
  border: 1.5px solid var(--danger-line);
  box-shadow: 0 0 34px rgba(255, 92, 71, .35);
}

.state-title { font-weight: 200; font-size: 24px; margin: 22px 0 0; }
.state-title.is-error { color: var(--danger); }

.state-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 10px 0 0;
  text-wrap: pretty;
}

.state-text strong { color: var(--text); font-weight: 700; }

.state .btn { margin-top: 28px; }
.state-form { display: flex; justify-content: center; width: 100%; }
.state .link-accent { margin-top: 16px; }

.state-hint {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
}

/* --- Razdvajač i social dugmad (neaktivna do S5/S6) ----------------------- */

.divider { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; }
.divider::before { background: linear-gradient(90deg, transparent, rgba(255, 158, 27, .9)); }
.divider::after  { background: linear-gradient(90deg, rgba(255, 255, 255, .35), transparent); }
.divider span { font-weight: 200; font-size: 15px; white-space: nowrap; }

.social-row { display: flex; justify-content: center; gap: 18px; margin-top: 20px; }

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #F2F3F8;
  border: 2px solid #060D45;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  text-decoration: none;
}

/* Dok social prijava nije uključena (S5/S6), dugmad ostaju vidljiva tačno onako
   kako ih dizajn pokazuje — ne prigušuju se — ali ne vode nikuda.  Da je stanje
   ipak primjetno, kursor i blagi pomak pri prelazu miša govore da nisu spremna. */
.social-btn.is-soon { cursor: not-allowed; }
.social-btn.is-soon:hover { filter: grayscale(.35); }

/* --- Pristanak (Z2.1) ----------------------------------------------------- */

.consent {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
  text-wrap: pretty;
}

.consent a {
  color: var(--accent-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Donji list sa pravnim tekstom (dizajn 3h) ---------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 7, 40, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sheet[hidden] { display: none; }

.sheet-panel {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #F8F9FC;
  color: var(--text-dark);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -14px 44px rgba(3, 7, 40, .45);
  animation: sheet-in .22s ease-out;
}

@media (min-width: 768px) {
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 26px; max-height: 78vh; }
}

@keyframes sheet-in { from { transform: translateY(26px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sheet-panel { animation: none; }
}

.sheet-grip {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(16, 19, 33, .16);
  margin: 10px auto 0;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 12px;
  border-bottom: 1px solid rgba(16, 19, 33, .08);
}

.sheet-title { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }

.sheet-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 19, 33, .06);
  color: var(--text-dark);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.sheet-body {
  padding: 18px 22px 26px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
  color: #3A3F55;
}

.sheet-body h3 { margin: 20px 0 6px; font-size: 14.5px; color: var(--text-dark); }
.sheet-body h3:first-child { margin-top: 0; }
.sheet-body p  { margin: 0 0 10px; }
.sheet-body ul { margin: 0 0 10px; padding-left: 20px; }
.sheet-body .doc-version { margin-top: 18px; font-size: 12px; color: #8A8FA3; }

/* --- Stranice grešaka (404, 405, 403, 500) --------------------------------
   Iste boje, isti font i isti vodeni žig kao ostatak aplikacije.  Stranica je
   inače samostalna — ne prolazi kroz layout i ne dodiruje bazu, jer mora raditi
   i onda kad je pao upravo taj dio sistema (02/Z1.1).  Jedino na šta se oslanja
   jeste ovaj stilski fajl, a njega poslužuje Apache nezavisno od PHP-a.        */

.error-box {
  position: relative;
  z-index: 1;
  max-width: 430px;
  margin: auto;
  padding: 40px 28px;
  text-align: center;
}

.error-code {
  font: 700 64px/1 var(--brand);
  color: var(--accent);
  letter-spacing: -1px;
}

.error-title { font-weight: 200; font-size: 24px; line-height: 1.3; margin: 18px 0 8px; }

.error-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}

.error-box .btn { margin-top: 30px; }

/* --- Razmaci --------------------------------------------------------------
   Nekoliko klasa umjesto `style=""` atributa: CSP je `style-src 'self'` bez
   `unsafe-inline`, pa pregledač ugrađeni stil u atributu ne bi primijenio
   (00/7.9).  Broj klasa je namjerno mali — nije ovo sistem uslužnih klasa.  */

.mt-form { margin-top: 26px; }
.mt-sm   { margin-top: 12px; }
.mt-md   { margin-top: 18px; }
.mt-lg   { margin-top: 20px; }
.w-full  { width: 100%; }

/* --- Pomoćno -------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Onboarding wizard (dizajn 4a–4d za telefon, 4e–4g za desktop)
   ========================================================================== */

/* Logotip iznad wizarda (naručilac, 20.09.2026). */
.wizard-logo {
  position: relative;
  z-index: 1;
  padding: 26px 20px 0;
  font-size: 34px;
}

.wizard {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 70px);
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.wizard-head { padding: 60px 20px 0; flex: none; }

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
}

.wizard-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -6px;
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
}

.wizard-back:hover { background: rgba(255, 255, 255, .08); color: var(--text); }

.wizard-progress {
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width .3s ease;
}

/* Koraka je tačno tri, pa širina ide klasom — CSP ne dozvoljava ugradjeni stil. */
.wizard-progress-fill.is-step-1 { width: 33%; }
.wizard-progress-fill.is-step-2 { width: 66%; }
.wizard-progress-fill.is-step-3 { width: 100%; }

.wizard-title { font-weight: 200; font-size: 24px; line-height: 1.25; margin: 22px 0 0; }

.wizard-subtitle {
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-faint);
  margin: 5px 0 0;
  text-wrap: pretty;
}

.wizard-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.wizard-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 0;
}

.wizard-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px 24px;
}

.wizard-foot .btn { min-height: 54px; }

/* Napomena uz dugme (4a): na telefonu iznad njega, centrirana. */
.wizard-foot-note {
  order: -1;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
  text-wrap: pretty;
}

.btn-skip {
  min-height: 44px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.btn-skip:hover { color: var(--text); }

/* --- Polja sa oznakom iznad (onboarding i podesavanja) -------------------- */

.field-label {
  display: block;
  padding: 2px 8px 7px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
}

.field-optional { font-weight: 400; color: var(--text-faint); }

/* Niža pilula u wizardu i podešavanjima; token nasljeđuje i indikator lozinke. */
.wizard-fields,
.settings-form { --pill-h: 52px; }

.field-row { display: flex; gap: 10px; }
.field-zip { flex: 0 0 34%; }
.field-city { flex: 1; }

.input-iban { letter-spacing: .5px; }

/* --- Segmentirana dugmad (pravna forma, MwSt, rok placanja) --------------- */

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

.segment { flex: 1; min-width: 0; cursor: pointer; }

.segment input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segment span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  transition: background .15s, color .15s;
}

/* Izabrano je svijetlo sivo (ne čisto bijelo) sa tamnoplavim tekstom —
   narandžasta ostaje samo za poziv na akciju (dugmad), po odluci naručioca.
   Isto važi za aktivnu karticu podešavanja. */
.segment input:checked + span {
  background: var(--selected);
  border-color: var(--selected);
  font-weight: 700;
  color: var(--navy);
}

.segment input:focus-visible + span { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* --- Prijedlozi iz registra (04/Z3.2, dizajn 4a) ------------------------- */

/* Spisak je sloj ispod polja za naziv — ne gura formu niti razvlači okvir. */
.registry-anchor { position: relative; }

.registry-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(248, 249, 252, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 38px rgba(3, 7, 40, .4);
  overflow: hidden;
}

.registry-list-head {
  padding: 10px 18px 4px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #9AA0B8;
}

.registry-item,
.registry-manual {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.registry-item { min-height: 48px; padding: 11px 18px; }

/* Razdjelnik kao u 4a: tanka linija koja se gubi prema krajevima. */
[data-registry-items] > * + *::before {
  content: '';
  position: absolute;
  top: 0;
  left: 17%;
  right: 17%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29, 47, 160, .14), transparent);
}

.registry-item:hover,
.registry-manual:hover { background: rgba(29, 47, 160, .05); }

.registry-item:focus-visible,
.registry-manual:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; background: rgba(29, 47, 160, .06); }

/* Naziv, a ispod njega sjedište i pravna forma. */
.registry-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.registry-item-name { font-weight: 700; font-size: 14.5px; color: var(--text-dark); }
.registry-item-note { font-size: 12px; color: #8A8FA3; }
.registry-item svg { flex: none; color: #1D2FA0; }

/* Izabrana firma dok iz registra stižu njeni detalji (adresa). */
.registry-item[aria-busy="true"] { opacity: .55; cursor: progress; }

/* „Kein Treffer? …" — ručni unos, na dnu spiska. */
.registry-manual { padding: 12px 18px; font-weight: 600; font-size: 13px; color: #1D2FA0; }

/* Lupa u polju dok je vidljiv samo naziv (4a). */
.field-pill .field-search { flex: none; }

/*
 * Svjež korak 1 počinje samo nazivom firme.  Sve ostalo je u `.step1-rest`,
 * koji nema svoju kutiju (`display: contents`), pa polja ostaju u mreži koraka
 * kao da omotača nema; `hidden` ih skriva dok se ne otvore.
 */
.step1-rest { display: contents; }

/* --- Korak 3: logotip, boje, pregled racuna ------------------------------- */

.appearance { display: flex; flex-direction: column; align-items: center; }

.logo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 124px;
  height: 124px;
  margin: 8px 0 10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .35);
  cursor: pointer;
  overflow: hidden;
}

.logo-drop:hover { border-color: rgba(255, 255, 255, .6); }
.logo-drop.has-logo { border-style: solid; background: rgba(255, 255, 255, .06); }
.logo-drop img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }

.logo-drop-label { font-weight: 600; font-size: 12px; color: var(--text-muted); text-align: center; }

.logo-hint { margin: 0 0 14px; text-align: center; }

.swatches { display: flex; gap: 10px; align-items: center; justify-content: center; }

.swatch {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.swatch-2743b3 { background: #2743B3; }
.swatch-ff9e1b { background: #FF9E1B; }
.swatch-1e9e5a { background: #1E9E5A; }
.swatch-b3301f { background: #B3301F; }
.swatch-353535 { background: #353535; }

/* Izabrana boja dobija prsten u boji pozadine pa bijeli obod (dizajn 4d). */
.swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--navy-deep), 0 0 0 5.5px #fff; }

.swatch-custom {
  background: none;
  border: 1.5px dashed rgba(255, 255, 255, .45);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-muted);
}

.hex-field { width: 100%; max-width: 200px; margin-top: 14px; }
.hex-field .field-pill { min-height: 44px; }

/* --- Pregled racuna ------------------------------------------------------- */

.preview {
  --preview-accent: var(--navy);
  margin-top: 18px;
  padding: 16px;
  background: rgba(248, 249, 252, .96);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(3, 7, 40, .4);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.preview-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.preview-logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
  background: var(--preview-accent);
  overflow: hidden;
}

.preview-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.preview-company { font-weight: 700; font-size: 13px; color: var(--text-dark); }
.preview-address { font-size: 10.5px; color: #8A8FA3; }

.preview-tag {
  flex: none;
  font-weight: 600;
  font-size: 10px;
  color: #9AA0B8;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.preview-rule { height: 2px; border-radius: 1px; background: var(--preview-accent); }

.preview-meta { font-size: 10px; color: #8A8FA3; }

.preview-line { display: flex; justify-content: space-between; font-weight: 500; font-size: 11.5px; }

.preview-total {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid rgba(16, 19, 33, .1);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--preview-accent);
}

.preview-qr { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

.preview-qr-square {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, #D8DAE4 0 3px, #E8EAF1 3px 6px);
}

.preview-qr-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.preview-qr-lines span { height: 5px; border-radius: 3px; background: #E1E3EC; }
.preview-qr-lines span:nth-child(2) { width: 70%; }
.preview-qr-lines span:nth-child(3) { width: 45%; }

/* --- Start ekran (kartice poslije wizarda) -------------------------------- */

.start-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

.start-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  color: var(--text);
}

.start-card:hover { background: var(--field-bg-on); border-color: var(--field-border-on); }

.start-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  /* Bijeli krug i plava ikona (naručilac, 19.09.2026) — isti par kao brze akcije na početnoj. */
  background: #F2F3F8;
  color: #1D2FA0;
}

.start-card-text { flex: 1; min-width: 0; }
.start-card-title { display: block; font-weight: 700; font-size: 15px; }
.start-card-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-faint); }
.start-card-arrow { flex: none; color: var(--text-faint); }

/* --- Desktop: dvije kolone, kontrole lijevo, pregled desno (dizajn 4e–4g) - */

@media (min-width: 768px) {
  /*
   * Širina polja je po koraku, kao u dizajnu: 880 px, 520 px i 940 px.
   *
   * Dizajn (4e–4g) formu nema u okviru; staklena kartica je ostala po odluci
   * naručioca.  Kartica zato raste za svoj unutrašnji razmak i okvir
   * (2 × 32 px + 2 × 1 px), a
   * polja unutra zadržavaju mjere iz dizajna.
   */
  .wizard {
    --wizard-w: 880px;
    max-width: calc(var(--wizard-w) + 66px + 48px);
    justify-content: center;
    padding: 40px 24px;
  }

  .wizard.is-step-2 { --wizard-w: 520px; }
  .wizard.is-step-3 { --wizard-w: 940px; }

  .wizard-logo { padding: 34px 24px 0; font-size: 38px; }
  .wizard { min-height: calc(100vh - 92px); }
  .wizard-head { padding: 0 4px; }
  .wizard-title { font-size: 26px; margin-top: 20px; }
  .wizard-subtitle { font-size: 14px; }

  .wizard-body {
    flex: none;
    margin-top: 24px;
    padding: 30px 32px 26px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(3, 7, 40, .45);
  }

  .wizard-fields { padding: 0; }

  .wizard-foot {
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 26px 0 0;
  }

  /* Dugme od 300 px, desno (4e). */
  .wizard-foot .btn { width: 300px; }
  .btn-skip { min-height: 0; }

  /* Napomena lijevo, „Weiter" desno — kao kad je cijela forma otvorena (naručilac, 20.09.2026).
     Traka je `row-reverse`, pa napomena mora izgubiti `order: -1` da ne ode desno. */
  .wizard-foot-note { order: 0; margin-right: auto; max-width: 440px; text-align: left; }

  /*
   * Korak 3: kontrole 460 px lijevo, živi pregled desno (4g).  Kolone se
   * razvlače na visinu reda (podrazumijevano `stretch`), pa `.step3-controls`
   * logotip i boje stavlja vertikalno u sredinu, naspram pregleda.  Ovdje se
   * poravnanje ne smije zadati: ovaj selektor je jači od `.step3-grid`.
   */
  .wizard-fields:has(.preview) {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 56px;
  }

  .wizard-fields:has(.preview) .notice { grid-column: 1 / -1; }
  .preview { margin-top: 0; }
}

/* --- Ispravke rasporeda ---------------------------------------------------- */

/*
 * Atribut `hidden` mora nadjačati svaki `display` iz naših pravila.  Bez ovoga
 * `.step1-rest { display: contents }` pobjeđuje podrazumijevani
 * `[hidden] { display: none }` iz pregledača i element ostaje vidljiv.
 */
[hidden] { display: none !important; }

/*
 * Polja u redu moraju smjeti da se skupe (`min-width: 0`), inače pilula sa
 * svojim unutrašnjim razmakom gura sadržaj van ekrana.  Razmak odozgo se
 * poništava da oznake u istom redu stoje poravnate.
 */
.field-row .field { margin-top: 0; min-width: 0; }

/* ==========================================================================
   Prijavljeni dio aplikacije: zaglavlje, navigacija, pocetni ekran
   (dizajn 1a za telefon, 2a za desktop)
   ========================================================================== */

.app-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*
 * U 1a zaglavlje počinje 56 px od vrha jer dizajn crta i statusnu traku
 * iPhone-a; u pregledaču je ona van stranice, pa je dovoljno 16 px (više samo
 * gdje ekran ima zarez — `safe-area-inset-top`).
 */
.app-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: max(16px, env(safe-area-inset-top)) 20px 0;
}

.app-logo {
  font-family: var(--brand);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: .5px;
  color: #FFAA27;
  text-decoration: none;
}

.head-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--text);
  cursor: pointer;
}

.head-btn:hover { background: rgba(255, 255, 255, .2); }
.head-btn.is-soon { cursor: not-allowed; color: var(--text-faint); }

/* Krug naloga je žut sa plavom ikonom (odluka naručioca). */
.head-btn.head-btn-accent,
.head-btn.head-btn-accent:hover { background: var(--accent); color: var(--navy); }
.head-btn.head-btn-accent:hover { filter: brightness(1.06); }

/* --- Meni „+" (novi zapis) -------------------------------------------------
   „+" otvara meni sa istim stavkama i ikonama kao brze akcije na početnoj.  Na
   telefonu je „+" lijevo, pa se meni otvara nadesno; na desktopu je desno, pa
   se otvara nalijevo.                                                        */

.create { position: relative; }

.create-menu {
  position: absolute;
  top: 52px;
  left: 0;
  z-index: 30;
  min-width: 240px;
  padding: 6px;
  border-radius: 16px;
  background: #F8F9FC;
  box-shadow: 0 18px 44px rgba(3, 7, 40, .45);
}

.create-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 14px 7px 7px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.create-item:hover { background: rgba(29, 47, 160, .07); }

/* Ikona stavke u bijelom krugu — ista u meniju „+" i u meniju naloga. */
.menu-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(16, 19, 33, .08);
}

/* --- Desno u zaglavlju: birač jezika i nalog ------------------------------
   Na telefonu „+" i ova grupa dijele ostatak širine napola, pa logotip ostaje
   tačno u sredini i kad je desno dugme više.                                */

.create,
.head-end { flex: 1 1 0; }

.head-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* --- Meni naloga, birač jezika i lista države ----------------------------- */

.account,
.language { position: relative; }

.account-menu,
.language-menu,
.menu-select-list {
  position: absolute;
  top: 52px;
  right: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border-radius: 16px;
  background: #F8F9FC;
  box-shadow: 0 18px 44px rgba(3, 7, 40, .45);
}

/* Stavke su kao u meniju „+": ikona u krugu, pa natpis. */
.account-menu a,
.account-menu button,
.language-menu button,
.menu-select-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 14px 7px 7px;
  white-space: nowrap;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu a:hover,
.account-menu button:hover,
.language-menu button:hover,
.menu-select-list button:hover,
.menu-select-list button:focus-visible { background: rgba(29, 47, 160, .07); outline: none; }

.account-menu form { margin: 4px 0 0; border-top: 1px solid rgba(16, 19, 33, .08); padding-top: 4px; }
.account-menu form button { color: #B3301F; }

/* Crta između dijelova podešavanja firme i promjene lozinke — ista kao iznad
   odjave.  Promjena lozinke je u Voxigo plavoj (odluka naručioca). */
.account-menu-sep { margin: 4px 0; border: 0; border-top: 1px solid rgba(16, 19, 33, .08); }
.account-menu a.account-menu-password { color: #2743B3; }

/* Stranica na kojoj je korisnik — kartica na vrhu podešavanja više nema. */
.account-menu a[aria-current="page"] { background: rgba(29, 47, 160, .07); }

/* Jezik i država: oznaka u krugu, naziv, a uz izabranu stavku kvačica. */
.language-menu { min-width: 200px; }
.language-menu button[aria-current],
.menu-select-list button[aria-selected="true"] { background: rgba(29, 47, 160, .07); }
.menu-code { font-weight: 700; font-size: 12px; letter-spacing: .04em; color: #1D2FA0; }
.menu-name { flex: 1; }
.menu-check { flex: none; color: #1D2FA0; }

/* Jezik bez prevoda i država koja još nije dostupna: vide se, ali prigušeno. */
.language-menu button.is-soon,
.menu-select-list button[aria-disabled="true"] { color: #8A8FA3; cursor: not-allowed; }
.language-menu button.is-soon .menu-code,
.menu-select-list button[aria-disabled="true"] .menu-code { color: #8A8FA3; }
.menu-select-list button[aria-disabled="true"]:hover { background: none; }

/* --- Navigacija ----------------------------------------------------------- */

.app-nav-top { display: none; }

.app-main {
  flex: 1;
  min-height: 0;
  padding: 18px 20px 0;
  display: flex;
  flex-direction: column;
}

.app-nav-bottom {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4px;
  margin: 18px 20px 20px;
  padding: 10px 8px 8px;
  border-radius: 22px;
  background: #F2F3F8;
}

.nav-item {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px 8px;
  border-radius: 14px;
  font-size: 10.5px;
  font-weight: 600;
  color: #6B7192;
  text-decoration: none;
  text-align: center;
}

.nav-item.is-active { color: var(--navy); }
.nav-item.is-soon { color: #A9AEC4; cursor: not-allowed; }

.nav-dot {
  position: absolute;
  bottom: 1px;
  width: 16px;
  height: 4px;
  border-radius: 3px;
  background: var(--accent);
}

/* --- Pocetni ekran: diktat zona ------------------------------------------- */

.home { display: flex; flex-direction: column; align-items: center; }

.mic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 190px;
  flex: none;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.mic-ring,
.mic-halo,
.mic-core {
  position: absolute;
  border-radius: 50%;
  display: block;
}

.mic-ring {
  width: 190px;
  height: 190px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  animation: vx-ring 2.4s ease-in-out infinite;
}

.mic-halo {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 158, 27, .14) 55%, rgba(255, 158, 27, .05) 68%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.mic-core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  background: radial-gradient(circle at 50% 32%, #FFC24D, #FF9E1B 62%, #F78A00);
  box-shadow: 0 0 44px rgba(255, 158, 27, .45), 0 10px 26px rgba(0, 0, 0, .35);
  animation: vx-pulse 2.4s ease-out infinite;
}

@keyframes vx-pulse {
  0%, 100% { box-shadow: 0 0 44px rgba(255, 158, 27, .45), 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 158, 27, .35); }
  70%      { box-shadow: 0 0 44px rgba(255, 158, 27, .45), 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 26px rgba(255, 158, 27, 0); }
}

@keyframes vx-ring {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .mic-ring, .mic-core { animation: none; }
}

.home-title { font-weight: 200; font-size: 24px; margin: 10px 0 0; text-align: center; }

.home-subtitle {
  font-weight: 400;
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 6px 0 0;
  text-align: center;
  text-wrap: pretty;
}

.home-input {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  min-height: 64px;
  margin-top: 32px;
  margin-bottom: 18px;
  padding: 10px 10px 10px 22px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

/* Isti izgled kao placeholder pretrage kupaca (`.list-search input::placeholder`). */
.home-input-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 400;
  font-size: 15px;
  color: var(--placeholder);
}

/*
 * Prijedlozi se ispisuju slovo po slovo (app.js), uz tanak kursor: dok se
 * piše ili briše stoji, dok tekst miruje treperi.  Tekst duži od polja se
 * pomjera kao u pravom polju za unos — vidi se kraj, a početak se gubi u
 * lijevu ivicu.
 */
.home-input-text.is-typing::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.18em;
  background: currentColor;
  animation: caret-blink 1.05s steps(2, jump-none) infinite;
}

.home-input-text.is-busy::after { animation: none; }

.home-input-text.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
  mask-image: linear-gradient(90deg, transparent, #000 28px);
}

@keyframes caret-blink {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.home-input-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 19, 33, .18);
}

/* --- Checklist kartica ---------------------------------------------------- */

/* Checklist je odmah ispod polja za unos, a widgeti sa brojkama ispod nje
   (odluka naručioca). */
.checklist {
  align-self: stretch;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.checklist-title { font-weight: 600; font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.checklist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

/* Cijeli red je klikabilan (veza ili „Kommt bald") i vodi tamo gdje se stavka
   ispunjava — i kad je gotova, da se može promijeniti.  Strelica desno kaže
   da je red klikabilan. */
.checklist-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% + 16px);
  margin: -5px -8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Prelaz mišem samo posvijetli red — tekst se ne podvlači (odluka naručioca). */
.checklist-link:hover { background: rgba(255, 255, 255, .06); }

.checklist-label { color: var(--accent-soft); font-weight: 600; }
.checklist-item.is-done .checklist-label,
.checklist-link.is-soon .checklist-label { color: var(--text-faint); font-weight: 400; }

.checklist-go { flex: none; margin-left: auto; color: var(--text-faint); }

.checklist-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: var(--success);
}

.checklist-item.is-done .checklist-mark { border-color: var(--success-line); background: var(--success-bg); }

/* --- Sumarne brojke (van Faze 1, prikazane kao crtice) -------------------- */

/*
 * Tri widgeta ispod checkliste (odluka naručioca): tačkica u boji i naziv
 * velikim slovima, iznos sa sitnom valutom, red ispod.  Bezahlt zelen, Offen
 * narandžast, Überfällig crven — boja je na tačkici i iznosu, a kartica je
 * ista kao checklist.  Kad checkliste nema, stoje odmah ispod polja za unos.
 */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-self: stretch;
  margin-top: 12px;
}

.home-input + .stats { margin-top: 0; }

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 11px 12px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.stat:hover { background: rgba(255, 255, 255, .1); }

.stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-weight: 600;
  font-size: 9.5px;
  line-height: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-label::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stat-tone);
}

.stat-amount { display: flex; align-items: baseline; gap: 5px; margin-top: 3px; white-space: nowrap; }
.stat-value { font-weight: 700; font-size: 19px; line-height: 26px; color: var(--stat-value, var(--text)); }
.stat-currency { font-size: 11px; color: var(--text-faint); }
.stat-sub { margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--text-faint); }

.stat-paid    { --stat-tone: var(--success); }
.stat-open    { --stat-tone: var(--accent); --stat-value: var(--accent-soft); }
.stat-overdue { --stat-tone: #FF7A66;       --stat-value: var(--danger); }

@media (min-width: 768px) {
  .stats { gap: 10px; max-width: 600px; width: 100%; align-self: center; }
  .stat { padding: 13px 18px 12px; border-radius: 16px; }
  .stat-label { gap: 7px; font-size: 11px; }
  .stat-label::before { width: 7px; height: 7px; }
  .stat-amount { gap: 6px; }
  .stat-value { font-size: 24px; line-height: 30px; }
  .stat-currency { font-size: 13px; }
  .stat-sub { margin-top: 3px; font-size: 12px; line-height: 16px; }
}

/* --- Brze akcije ---------------------------------------------------------- */

.home .divider { align-self: stretch; margin-top: 20px; }
.home .divider span { font-size: 20px; }

/* Krugovi su 5 % manji nego u dizajnu (1a 86 px, 2a 92 px) — odluka naručioca. */
.quick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #F2F3F8;
  border: 2px solid #060D45;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

/*
 * Natpis je uvijek pun i u jednom redu; pilula ne prelazi širinu akcije.
 * Kad tekst ne stane, kraj mu se gubi prema desnoj ivici pilule.  Maska je
 * samo na tekstu, pa pozadina pilule ostaje cijela; `is-clipped` dodaje
 * app.js samo natpisima koji zaista ne stanu.
 */
.quick-label {
  display: block;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
}

.quick-label-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.quick-label-text.is-clipped {
  text-align: left;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}

/* --- Obavjestenje (toast) ------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 104px;
  z-index: 50;
  max-width: 320px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: rgba(8, 14, 60, .94);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 14px 38px rgba(3, 7, 40, .5);
  font-size: 13.5px;
  color: var(--text);
  text-align: center;
  transform: translateX(-50%);
  animation: vx-toast .2s ease-out;
}

@keyframes vx-toast { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* --- Poruke u uglu (desktop) ----------------------------------------------
 *
 * Poruke uspjeha i obavjestenja js/toast.js na desktopu prenosi ovamo, u donji
 * desni ugao.  Greske ostaju u formi.  Spremnik ne hvata klikove — samo same
 * poruke — pa prazan prostor oko njih ne blokira nista ispod.
 */

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.toast-stack .notice {
  --toast-base: rgba(8, 14, 60, .96);
  width: 100%;
  margin: 0;
  padding: 12px 10px 12px 16px;
  pointer-events: auto;
  box-shadow: 0 16px 40px rgba(3, 7, 40, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: vx-toast-in .22s ease-out;
}

/* Tamna podloga ispod boje poruke, da se ne pomijesa sa sadrzajem iza nje. */
.toast-stack .notice-success { background: linear-gradient(var(--success-bg), var(--success-bg)), var(--toast-base); }
.toast-stack .notice-info    { background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)), var(--toast-base); }

.toast-stack .notice > span { flex: 1; min-width: 0; }

.toast-stack .notice.is-leaving { animation: vx-toast-out .22s ease-in forwards; }

.notice-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -3px 0 -3px 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: .7;
  cursor: pointer;
}

.notice-close:hover,
.notice-close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .1); }

.notice-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

@keyframes vx-toast-in  { from { opacity: 0; transform: translateX(16px); } }
@keyframes vx-toast-out { to   { opacity: 0; transform: translateX(16px); } }

@media (min-width: 768px) {
  .toast-stack { right: 24px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast-stack .notice,
  .toast-stack .notice.is-leaving { animation: none; }
}

/* --- Desktop: gornja navigacija, siri raspored (dizajn 2a) ---------------- */

@media (min-width: 768px) {
  /*
   * Zaglavlje po 2a: preko cijele širine, logotip lijevo, odmah uz njega
   * navigacija — tanki Hanken Grotesk, aktivna stavka bijela sa narandžastom
   * crticom ispod — a „+" i nalog krajnje desno, krugovi od 44 px.  Tačne
   * mjere iz 2a važe od 1024 px; ispod toga je sve malo zbijenije, da stane.
   */
  .app-head {
    justify-content: flex-start;
    gap: 0;
    padding: 22px 24px;
  }

  /* Na desktopu logotip ide prvi, pa navigacija, pa dugmad desno. */
  .app-logo { order: 1; font-size: 36px; }
  .app-nav-top { order: 2; display: flex; align-items: center; gap: 4px; margin-left: 32px; }
  .create { order: 3; flex: none; margin-left: auto; }
  .head-end { order: 4; flex: none; gap: 12px; margin-left: 12px; }

  /* „+", jezik i nalog su 44 px kao na telefonu — 2a crta 34 px, ali su bili
     premali (odluka naručioca).  Meniji se otvaraju 8 px ispod kruga. */
  .create-menu { left: auto; right: 0; }

  /*
   * Glavni meni kao pilule sa ikonama (odluka naručioca; 2a crta samo tekst
   * sa crticom ispod).  Neaktivna: bez pozadine i bordera, tekst i ikona
   * #A8AEDC, težina 200.  Aktivna: prozirna pilula sa borderom, bijeli tekst
   * težine 300 i ikona #FF9E1B — jedini element menija u toj boji.  Cijela
   * pilula je veza.  Natpis je 18 px; dok za njega nema mjesta (ispod
   * 1180 px) vide se samo ikone, a natpis ostaje za čitače ekrana.
   */
  .nav-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: none;
    font-family: inherit;
    font-weight: 200;
    font-size: 18px;
    color: #A8AEDC;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
  }

  .nav-pill svg { flex: none; }

  .nav-pill-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nav-pill:hover { background: rgba(255, 255, 255, .06); color: #fff; }

  .nav-pill.is-active {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    font-weight: 300;
  }

  .nav-pill.is-active svg { color: #FF9E1B; }

  .nav-pill:focus-visible { outline: 2px solid #FF9E1B; outline-offset: 2px; }

  .nav-pill.is-soon { cursor: not-allowed; }

  .app-nav-bottom { display: none; }

  .app-main {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 24px 40px;
  }

  .home-title { font-size: 30px; }

  /* Polje za unos po 2a: 600 × 66 px, dugme 44 px — počinje odmah iza prvog
     kruga brzih akcija i završava pred petim.  Checklist je iste širine. */
  .home-input { max-width: 600px; min-height: 66px; padding-left: 26px; align-self: center; width: 100%; }
  .home-input-send { width: 44px; height: 44px; }
  .checklist { max-width: 600px; align-self: center; width: 100%; }

  /* Naslov je širok 720 px, kao u 2a, a karusel ispod njega pet akcija —
     oba šira od kolone od 652 px, pa izlaze podjednako na obje strane. */
  .home .divider { width: 720px; max-width: calc(100vw - 48px); align-self: center; }

  .toast { bottom: 40px; }
}

/* Mjere zaglavlja iz 2a: razmaci 40 / 56 px. */
@media (min-width: 1024px) {
  .app-head { padding: 22px 40px; }
  .app-nav-top { margin-left: 56px; }
}

/* Od 1180 px pilule imaju i natpis — tu staje i duži engleski (26 px do „+"). */
@media (min-width: 1180px) {
  .nav-pill { width: auto; padding: 0 18px 0 15px; }
  .nav-pill-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill { transition: none; }
}

/* ==========================================================================
   Podesavanja (04/Z3.3)
   ========================================================================== */

.settings-title { font-weight: 200; font-size: 26px; margin: 0 0 16px; }

/*
 * Naslov „Firmeneinstellungen" u stilu razdjelnika sa početne („In wenigen
 * Schritten…"), a odmah ispod, u novom redu, sitniji podnaslov koji kaže
 * šta se na stranici radi.  Oko cijelog bloka ima vazduha.
 */
.settings-head { margin: 16px 0 32px; text-align: center; }
.settings-divider { margin: 0; font-size: inherit; font-weight: inherit; color: var(--text); }
.settings-divider span { font-size: 20px; }

.settings-lead {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .settings-head { margin: 24px 0 44px; }
}

.settings-form { display: flex; flex-direction: column; gap: 18px; }

.settings-block {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.settings-block-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 14px;
}

.settings-block .appearance { align-items: flex-start; }
.settings-block .logo-hint { text-align: left; margin-left: 0; }
.settings-block .swatches { justify-content: flex-start; }

.settings-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
}

.settings-foot .btn { width: auto; min-width: 180px; }

.settings-note { margin-left: 0; }

/* --- Podešavanja firme: tri sklopive sekcije -------------------------------
 *
 * Jedna stranica, jedna forma (odluka naručioca): „Firmenangaben", „Bankkonto"
 * i „Logo & Farbe" su stakleni okviri koji se otvaraju i sklapaju (`<details>`),
 * a jedno „Speichern" ispod njih čuva sve.  Zatvorena sekcija u zaglavlju
 * pokazuje sažetak (npr. IBAN i rok plaćanja).  Polja su ista kao u
 * onboarding-u (`company/fields_*.php`).
 */
.settings-acc { display: flex; flex-direction: column; gap: 14px; }

.acc,
.settings-card {
  position: relative;
  scroll-margin-top: 16px;   /* veza iz menija skroluje do sekcije, uz malo vazduha */
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(3, 7, 40, .35);
}

/* Otvorena (aktivna) sekcija ima jasniji okvir. */
.acc[open] { border-color: rgba(255, 255, 255, .5); }

/*
 * Promjena lozinke: isti stakleni okvir kao otvorena sekcija podešavanja
 * firme, sa poljima i „Speichern" (`.acc-foot`) na dnu (odluka naručioca).
 */
.settings-card { padding: 22px 16px; border-color: rgba(255, 255, 255, .5); }
.settings-card .field { margin-top: 18px; }
.settings-card .field:first-of-type { margin-top: 0; }
.settings-card .settings-note { margin: 16px 0 0; text-align: center; }

/* Prijedlozi iz registra su sloj preko okvira ispod, pa okvir u kojem se kuca
   mora biti iznad njih. */
.acc:focus-within { z-index: 2; }

/* Zaglavlje: naslov i podnaslov, sažetak (samo zatvorena), krug sa strelicom. */
.acc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titles toggle" "summary summary";
  align-items: center;
  column-gap: 16px;
  padding: 18px 16px;
  border-radius: 22px;
  list-style: none;
  cursor: pointer;
}

.acc-head::-webkit-details-marker { display: none; }
.acc-head:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.acc-titles { grid-area: titles; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acc-title { font-weight: 300; font-size: 19px; color: var(--text); }
.acc-sub { font-size: 12.5px; color: var(--text-muted); }

.acc-summary {
  grid-area: summary;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  font-size: 13px;
  color: #C8CDEB;
  overflow-wrap: anywhere;
}

.acc[open] .acc-summary { display: none; }

/* Sekcija sa greškom poslije „Speichern": crvenkast okvir, a zatvorena umjesto
   sažetka kaže „Bitte prüfen". */
.acc.has-error { border-color: rgba(255, 156, 138, .55); }
.acc-error { font-weight: 600; color: var(--danger); }

/* Boja računa u sažetku; bez izabrane je brend plava, kao i sam račun. */
.acc-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: var(--navy);
}

.acc-toggle {
  grid-area: toggle;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}

.acc-toggle svg { transition: transform .2s; }
.acc[open] .acc-toggle svg { transform: rotate(180deg); }

.acc-body { padding: 0 16px 22px; }

/* Crta između zaglavlja i polja otvorene sekcije. */
.acc-body::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, .12);
}

.acc-body .wizard-fields { padding: 0; }

/*
 * „Speichern" na dnu sekcije, u sredini, sa sjajem kao i ostala glavna dugmad;
 * nešto niže nego u onboarding-u.  Pojavljuje se (fade in) tek kad se u sekciji
 * nešto promijeni i nestaje kad se vrati staro — to vodi onboarding.js; bez
 * skripte je uvijek vidljivo (odluka naručioca).
 */
.acc-foot { display: flex; justify-content: center; padding-top: 30px; }

.acc-foot .btn {
  min-height: 48px;
  font-size: 15px;
}

.acc-foot.is-entering { animation: acc-foot-in .28s ease-out both; }
.acc-foot.is-leaving { animation: acc-foot-out .18s ease-in both; }

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

@keyframes acc-foot-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Zatvorena sekcija sa nesnimljenom izmjenom: umjesto sažetka „Nicht gespeichert". */
.acc-unsaved { display: none; font-weight: 600; color: var(--accent-soft); }
.acc.is-dirty .acc-unsaved { display: inline; }
.acc.is-dirty .acc-summary-text,
.acc.is-dirty .acc-dot { display: none; }

@media (min-width: 768px) {
  .acc-head {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "titles summary toggle";
    padding: 22px 30px;
  }

  .acc-summary { margin-top: 0; }
  .acc-body { padding: 0 30px 30px; }
  .settings-card { padding: 30px; }
  .acc-body::before { margin-bottom: 24px; }
  .acc-foot .btn { width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-toggle svg { transition: none; }
  .acc-foot.is-entering,
  .acc-foot.is-leaving { animation: none; }
}

/* Adresa koja ceka potvrdu (04/Z3.3). */
.field-pending {
  display: block;
  margin: 7px 0 0 22px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-soft);
}

@media (min-width: 768px) {
  .settings-form { max-width: 620px; }

  /* Sekcije firme traže isti prostor kao koraci u onboarding-u (dizajn 4e–4g). */
  .app-main:has(.settings-acc) { max-width: 880px; }

  /* Podešavanja su uža od 940 px iz 4g, pa kolone „Logo & Farbe" dijele prostor napola. */
  .settings-acc .step3-grid,
  .settings-acc .wizard-fields:has(.preview) { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ==========================================================================
   Doradа po dizajnu: dvokolonski korak 1 (4e), korak 3 (4g), karusel akcija (1a)
   ========================================================================== */

/* --- Kvačica u popunjenom polju (4b, 4e) --------------------------------- */

/*
 * Zelena kvačica u popunjenom polju (#7FDCA4 iz 4b i 4e).  Opšte pravilo
 * `.field-pill svg` boji ikone u boju opisa polja, pa kvačica mora biti
 * određenija od njega — inače ispada siva.
 */
.field-pill .field-check { flex: none; stroke: #7FDCA4; }

.field-required { color: var(--accent); font-weight: 700; }

/* --- Korak 1: raspored po 4b (telefon) i 4e (desktop) ---------------------
 *
 * Razmaci idu kroz mrežu, a ne kroz margine polja.  Uz margine je prvo polje
 * u grupi bilo bez gornje, a ostala sa njom, pa „PLZ" i „Ort" nisu stajali u
 * visini „Strasse und Nummer", niti „Rechtsform" u visini „Firmenname".
 */

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

.step1-grid .field { margin-top: 0; }

/* Vrijednosti u poljima kao u dizajnu: 16 px, obična debljina. */
.wizard-fields .field-pill input { font-weight: 400; font-size: 16px; }

/* Adresa: na telefonu ulica sama u redu, pa PLZ (96 px) i grad (4b). */
.field-address {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
}

.field-address .field-street { grid-column: 1 / -1; }

/* PLZ je uzak: četiri cifre i kvačica staju tek uz manji unutrašnji razmak. */
.field-zip .field-pill { padding: 0 14px; gap: 6px; }

/* Na telefonu PLZ i grad nemaju vidljiv natpis (4b); čitač ekrana ga i dalje
   dobija.  Naziv firme ga ima — po želji naručioca, iako ga 4a/4b ne crtaju. */
@media (max-width: 767.98px) {
  .label-wide {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --- Kontakt e-mail i država: red ispod adrese (odluka naručioca) ----------
   Na telefonu država ide prva, pa e-mail tačno iznad telefona; na desktopu
   e-mail lijevo, država desno, u kolonama mreže koraka.                      */

.contact-row { display: flex; flex-direction: column-reverse; gap: 10px; }

/* Birač u polju: tekst lijevo, strelica desno. */
.field-select { position: relative; }

.field-select select {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  padding: 0 26px 0 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  appearance: none;
}

.field-select .field-chevron {
  position: absolute;
  right: 22px;
  top: 50%;
  margin-top: -7px;
  pointer-events: none;
}

.field-select option { background: #12162C; color: #fff; }
.field-select option:disabled { color: #7C819C; }

/*
 * Birač u stilu menija (država): onboarding.js skriva `<select>` — on ostaje u
 * formi i nosi vrijednost — i stavlja dugme preko cijele pilule, a ispod nje
 * listu kao meni jezika u zaglavlju.  Otvorena lista je iznad polja ispod.
 */
.menu-select { position: relative; }
.menu-select.is-open { z-index: 5; }

.menu-select-trigger {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  margin: 0 -22px;
  padding: 0 48px 0 22px;
  border: 0;
  border-radius: inherit;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.menu-select-list { top: calc(100% + 8px); left: 0; right: 0; min-width: 0; }

.menu-select .field-chevron { transition: transform .15s; }
.menu-select.is-open .field-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-select .field-chevron { transition: none; }
}

@media (min-width: 768px) {
  .contact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    column-gap: 16px;
    align-items: start;
  }
}

/* --- Telefon: birač pozivnog broja + broj (4b, 4e) ------------------------ */

.phone-row { display: flex; gap: 8px; }

.field-prefix {
  position: relative;
  width: 96px;
  flex: none;
  padding: 0 14px;
}

.phone-row > .field-pill:last-child { flex: 1; min-width: 0; }

.field-prefix select {
  width: 100%;
  padding: 0 14px 0 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  text-align: center;
  text-align-last: center;
}

/* Strelica birača; klik prolazi kroz nju do samog birača. */
.field-prefix .field-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -7px;
  pointer-events: none;
}

/* Lista se otvara u sistemskom stilu, pa opcije moraju biti čitljive. */
.field-prefix option { background: #12162C; color: #fff; }

/* --- Pravna forma i PDV ------------------------------------------------------ */

/* Pravne forme su različite dužine: svaka je široka koliko natpis plus 10 px sa
   strane, a višak prostora se dijeli — „Einzelfirma" šira, „AG" uža, i nijedan
   natpis ne dodiruje okvir. */
.field-legal .segment { flex: 1 1 auto; }
.field-legal .segment span { padding: 0 10px; font-size: 12.5px; }

/* Na telefonu PDV nema okvir (4b); dugmad su viša, tekst veći. */
.vat-box { display: flex; flex-direction: column; }
.vat-box .segment span { min-height: 48px; gap: 7px; font-size: 14px; }

/* Kvačica uz „Ja" samo kad je izabrano — inače bi djelovalo potvrđeno i uz „Nein". */
.vat-box .segment input:not(:checked) + span svg { display: none; }

.vat-hint {
  display: block;
  padding: 6px 8px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 356px;
    column-gap: 16px;
    row-gap: 12px;
    align-items: start;
  }

  .form-grid > .notice { grid-column: 1 / -1; }
  .form-span { grid-column: 1 / -1; }

  /* Ulica, PLZ 96 px i grad 260 px u jednom redu (4e). */
  .field-address { grid-template-columns: minmax(0, 1fr) 96px 260px; }
  .field-address .field-street { grid-column: auto; }

  /*
   * Okvir sa PDV-om desno, uz telefon i UID, preko dva reda (4e): proteže se
   * do dna UID polja, a sadržaj stoji u sredini.  Mreža inače poravnava na
   * vrh (`align-items: start`), pa bi okvir bio visok samo koliko mu treba.
   */
  .vat-box {
    grid-column: 2;
    grid-row: span 2;
    align-self: stretch;
    justify-content: center;
    margin-top: 12px;
    padding: 12px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .18);
  }

  .vat-box .segment span { min-height: 42px; font-size: 13px; }
}

/* --- Korak 3: kontrole lijevo, pregled desno (4g) ------------------------- */

.step3-grid { display: flex; flex-direction: column; gap: 18px; }

.step3-controls { display: flex; flex-direction: column; }

.step3-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }

.logo-remove {
  margin: 2px 0 0;
  padding: 4px 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
}

@media (min-width: 768px) {
  .step3-grid {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 56px;
    align-items: stretch;
  }

  .step3-grid > .notice { grid-column: 1 / -1; }
  .step3-controls { justify-content: center; }
  .step3-actions { margin-top: 30px; }
  .step3-actions .btn { width: 100%; }

  .logo-drop { width: 136px; height: 136px; }
  .swatch { width: 34px; height: 34px; }
}

/* --- Birač boje: šesti krug otvara Pickr ---------------------------------- */

.swatch-custom {
  position: relative;
  overflow: hidden;
  background: none;
  border: 1.5px dashed rgba(255, 255, 255, .45);
}

.swatch-custom.is-chosen { border-style: solid; }

/* Dugme prekriva cio krug; klik bilo gdje na njemu otvara birač. */
.swatch-custom-button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.swatch-custom-button:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

.swatch-custom-mark {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Kad je izabrana svoja boja, krug je nosi umjesto ljestvice. */
.swatch-custom.is-chosen .swatch-custom-mark { color: transparent; }

/*
 * Sam birač (Pickr, tema „nano") ostaje u svom izvornom izgledu, onakav kakav
 * je na stranici biblioteke.  Jedino dugme — potvrda — je u stilu aplikacije:
 * pilula u Voxigo plavoj (#2743B3) sa žutom kvačicom (boja loga).  Polje za kôd i dugme
 * dijele donji red napola, oba kao pilule.
 *
 * Pickr pravi `<input type="button">`, u koji SVG ne može, pa kvačica ide kao
 * pozadina (data: URI — CSP `img-src` ga dozvoljava), a tekst dugmeta je
 * providan i ostaje samo za čitač ekrana (aria-label „Übernehmen").
 * Selektori su određeniji od Pickr-ovih, jer se njegov CSS učitava poslije.
 */
/*
 * Polje i dugme su iste širine: ista osnova (40 %), pa rastu jednako.  Sa
 * osnovom 0 svako bi krenulo od svog unutrašnjeg razmaka i ostalo različito.
 */
.pcr-app[data-theme="nano"] .pcr-interaction .pcr-result,
.pcr-app[data-theme="nano"] .pcr-interaction .pcr-save {
  flex: 1 1 40%;
  min-width: 0;
  box-sizing: border-box;
  height: 34px;
  margin-top: 1.25em;
}

.pcr-app[data-theme="nano"] .pcr-interaction .pcr-save {
  width: auto;
  border-radius: var(--radius-pill);
  background-color: #2743B3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9E1B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  color: transparent;
  box-shadow: 0 4px 12px rgba(39, 67, 179, .35);
}

.pcr-app[data-theme="nano"] .pcr-interaction .pcr-save:hover { filter: brightness(1.1); }

.pcr-app[data-theme="nano"] .pcr-interaction .pcr-save:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}

/* Ponuđene boje su već ispod forme, pa ih birač ne ponavlja; na njihovom
   mjestu je razdjelnik (`<hr>` koji ubacuje onboarding.js). */
.pcr-app[data-theme="nano"] .pcr-swatches { display: none; }

.pcr-app .pcr-divider {
  margin: .9em .6em 0;
  border: 0;
  border-top: 1px solid rgba(16, 19, 33, .1);
}

/* Polje za kôd je pilula, kao i dugme pored njega. */
.pcr-app[data-theme="nano"] .pcr-interaction .pcr-result {
  border-radius: var(--radius-pill);
  padding-left: 1em;
  padding-right: 1em;
}

/* --- Providan logotip ------------------------------------------------------
   PNG sa alfa kanalom bi se na tamnoj podlozi izgubio.  Zato i u biraču i u
   pregledu iza njega stoji svijetla ploča — ista koju ima i sam račun, pa se
   odmah vidi kako će logotip izgledati odštampan.                           */

.logo-drop.has-logo {
  background: #F8F9FC;
  border-color: rgba(255, 255, 255, .55);
}

.logo-drop.has-logo img { padding: 14px; }

.preview-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(16, 19, 33, .08);
}

/* Bez logotipa mjesto drži ploča u akcentnoj boji, kako 4g i pokazuje. */
.preview-logo.is-empty { background: var(--preview-accent); border-color: transparent; }
.preview-logo img { background: none; padding: 3px; }

/* --- Pregled računa: podnožje sa kontaktom (4g) --------------------------- */

.preview { justify-content: space-between; }
.preview-top { display: flex; flex-direction: column; gap: 8px; }

.preview-ident { min-width: 0; }

.preview-meta { display: flex; flex-direction: column; gap: 2px; }
.preview-meta .preview-number { font-weight: 700; color: var(--text-dark); }

.preview-foot { margin-top: 10px; }

.preview-foot-rule {
  height: 1px;
  margin-bottom: 8px;
  background: rgba(16, 19, 33, .1);
}

.preview-contact {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-size: 10px;
  color: #8A8FA3;
}

@media (min-width: 768px) {
  .preview { padding: 26px; gap: 12px; }
  .preview-company { font-size: 15px; }
  .preview-address { font-size: 11px; }
  .preview-line { font-size: 12.5px; }
  .preview-total { font-size: 14px; }
}

/* --- Brze akcije kao karusel (1a) ----------------------------------------- */

.quick {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}

.quick-track {
  display: flex;
  gap: 10px;
  width: 100%;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.quick-track::-webkit-scrollbar { display: none; }

.quick-item {
  flex: 0 0 calc((100% - 20px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.quick-item.is-soon { cursor: not-allowed; }

.quick-dots { display: flex; gap: 6px; align-items: center; margin-top: 14px; }

.quick-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .3);
  transition: width .2s, background .2s;
}

.quick-dot.is-active { width: 16px; border-radius: 3px; background: var(--accent); }

@media (min-width: 768px) {
  /*
   * Desktop po 2a: krugovi 87 px (2a 92, −5 %), natpis 12,5 px, a vidi se svih pet akcija.
   * Akcije su jednako široke (krugovi u pravilnom ritmu), sa korakom od
   * 182 px kao u 2a — tako polje za unos iznad (600 px) počinje odmah iza
   * prvog kruga i završava pred petim.  Kad prozor nema 872 px za svih pet,
   * traka se pomjera i tačkice pokazuju položaje; kad sve stanu, stoje u
   * sredini (automatske margine krajnjih).
   */
  .quick {
    --quick-slot: 144px;
    --quick-gap: 38px;
    width: calc(5 * var(--quick-slot) + 4 * var(--quick-gap));
    max-width: calc(100vw - 48px);
    align-self: center;
    margin-top: 22px;
  }
  .quick-track { gap: var(--quick-gap); }
  .quick-item { flex: 0 0 var(--quick-slot); }
  .quick-item:first-child { margin-left: auto; }
  .quick-item:last-child { margin-right: auto; }
  .quick-icon { width: 87px; height: 87px; }
  .quick-label { font-size: 12.5px; padding: 8px 16px; }
  .quick-dots { margin-top: 20px; }
}

/* ==========================================================================
   Kupci — lista (05/S4, dizajn 8a–8d)
   ========================================================================== */

/*
 * Mjere i boje su iz dizajnerovog HTML-a (8a–8d).  Svijetli panel je nova
 * cjelina: tamna pozadina aplikacije, a sadržaj na gotovo bijeloj, zamućenoj
 * ploči — pravi se tako da ga katalog u S5 preuzme bez izmjena.
 */
:is(.customers, .articles) { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }

/* --- Traka: pretraga, uvoz, izvoz, novi kupac ----------------------------- */

.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* Pretraga najviše 2/3 trake, dugmad uz desnu ivicu — kupci i katalog (naručilac, 19.09.2026). */
@media (min-width: 768px) {
  .list-toolbar .list-search { max-width: calc(200% / 3); }
  .list-toolbar .list-actions { margin-left: auto; }
}

.list-search {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 8px 8px 24px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-pill);
  background: rgba(242, 243, 248, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.list-search:focus-within { background: var(--field-bg-on); border-color: var(--field-border-on); }

.list-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-weight: 400;
  font-size: 15px;
  color: #fff;
}

/* Isti izgled kao prijedlozi u polju na početnoj (`.home-input-text`). */
.list-search input::placeholder { font-weight: 400; color: var(--placeholder); opacity: 1; }

/* Pregledač ima svoj „×" u polju za pretragu; dizajn ima svoje dugme. */
.list-search input::-webkit-search-cancel-button { display: none; }

.list-search-clear {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.list-search-clear:hover { background: rgba(255, 255, 255, .28); }

.list-search-submit {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #2743B3;
  box-shadow: 0 2px 8px rgba(16, 19, 33, .18);
  cursor: pointer;
}

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

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-pill);
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.toolbar-btn:hover { background: rgba(255, 255, 255, .08); }

.toolbar-btn-primary {
  padding: 0 20px;
  border-color: transparent;
  background: var(--accent);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(255, 158, 27, .3);
}

.toolbar-btn-primary:hover { background: var(--accent); filter: brightness(1.05); }

/* Sporedno dugme na svijetlom panelu (8d „Kunden importieren"). */
.toolbar-btn-light {
  padding: 0 20px;
  border-color: #D8DAE5;
  background: #fff;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
}

.toolbar-btn-light:hover { background: #F4F5FA; }

.toolbar-btn:focus-visible,
.list-search-submit:focus-visible,
.list-search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * Sporedne akcije liste (uvoz, izvoz, startni katalog): okrugla dugmad samo sa
 * ikonom; natpis je oblačić ispod dugmeta na prelaz mišem i fokus tastature
 * (naručilac, 19.09.2026).  Natpis ostaje u dugmetu, pa je i njegovo ime za
 * čitač ekrana — bez `title`, da se ne čita dvaput.  Izgled kao oblačić greške.
 */
.toolbar-btn-icon { position: relative; width: 44px; padding: 0; justify-content: center; }
/* Veća ikona u okruglom dugmetu (naručilac, 19.09.2026). */
.toolbar-btn-icon > svg { width: 20px; height: 20px; }

.toolbar-btn-icon > span {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 30;
  padding: 7px 11px;
  border-radius: 10px;
  background: #101321;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .12s ease, transform .12s ease;
}

.toolbar-btn-icon > span::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-bottom-color: #101321;
  transform: translateX(-50%);
}

.toolbar-btn-icon:is(:hover, :focus-visible) > span { opacity: 1; transform: translate(-50%, 0); }

/* „+ Aus Startkatalog": plava pilula u panelu, prva u redu prije čipova tipa (naručilac, 19.09.2026). */
.starter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px 0 13px;
  border-radius: var(--radius-pill);
  background: #1D2FA0;
  box-shadow: 0 1px 4px rgba(16, 19, 33, .12);
  font-weight: 700;
  font-size: 12.5px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.starter-pill:hover { background: #2A3DB5; }
.starter-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .toolbar-btn-icon > span { transition: none; }
}

/* --- Svijetli panel -------------------------------------------------------- */

.light-panel {
  --ink:   #101321;
  --ink-2: #3A4060;
  --ink-3: #8A8FA3;
  --line:  #E2E4EE;
  --link:  #1D2FA0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 20px;
  background: rgba(248, 249, 252, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 38px rgba(3, 7, 40, .35);
  color: var(--ink);
}

/* Pogodak pretrage (View::highlight). */
.light-panel mark { padding: 0 1px; border-radius: 3px; background: rgba(255, 170, 39, .38); color: inherit; }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px 6px;
}

/* Čipovi tipa: Alle · Firmen · Privatpersonen. */
.chips {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 1px 4px rgba(16, 19, 33, .08);
}

.chip {
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 11.5px;
  color: #7A7F96;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { color: var(--navy); }
.chip[aria-current] { font-weight: 700; color: var(--navy); background: #FFAA27; }
.chip:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.chip-count { font-weight: 500; opacity: .7; }

/* Sortiranje: `<details>`, pa se otvara i bez skripte. */
.sort-menu { position: relative; }

.sort-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 1px 4px rgba(16, 19, 33, .08);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.sort-button::-webkit-details-marker { display: none; }
.sort-button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.sort-icon { display: flex; color: var(--link); }
.sort-chevron { display: flex; color: var(--ink-3); transition: transform .15s; }
.sort-menu[open] .sort-chevron { transform: rotate(180deg); }

.sort-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 19, 33, .18);
}

.sort-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.sort-list a:hover,
.sort-list a[aria-current] { background: rgba(29, 47, 160, .07); }
.sort-list svg { flex: none; color: var(--link); }

/* „Zuletzt verwendet": pet kartica. */
.recent-title {
  margin: 0;
  padding: 10px 22px 4px;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.recent-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0 22px 12px;
  list-style: none;
}

.recent-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
}

.recent-card:hover { border-color: #C9CDE0; }
.recent-card:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.recent-text { display: flex; flex-direction: column; min-width: 0; }
.recent-name { overflow: hidden; font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.recent-city { font-size: 11.5px; color: var(--ink-3); }

.avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 19, 33, .14);
  font-weight: 700;
  font-size: 12px;
  color: var(--link);
}

.avatar-soft { background: #F2F3F8; box-shadow: none; }

/* --- Tabela --------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

:is(.customers-table, .articles-table) { width: 100%; border-collapse: collapse; table-layout: fixed; }

:is(.customers-table, .articles-table) thead th,
:is(.customers-table, .articles-table) thead td {
  padding: 10px 8px;
  background: #DFE2EC;
  font-weight: 700;
  font-size: 11px;
  color: #6A7089;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .5px;
}

:is(.customers-table, .articles-table) th:first-child,
:is(.customers-table, .articles-table) td:first-child { padding-left: 22px; }
:is(.customers-table, .articles-table) th:last-child,
:is(.customers-table, .articles-table) td:last-child { padding-right: 22px; }

.col-name   { width: 33%; }
.col-city   { width: 13%; }
.col-email  { width: 27%; }
.col-phone  { width: 15%; }
.col-type   { width: 5.5%; }
.col-actions { width: 96px; }
:is(.customers-table, .articles-table) thead .col-type { text-align: center; }

/* Cijeli red je veza na izmjenu (razvučena veza na nazivu). */
:is(.customer-row, .article-row) { position: relative; }
:is(.customer-row, .article-row):hover { background: #EEF0F6; }

:is(.customer-row, .article-row) td {
  height: 54px;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(29, 47, 160, .08);
  vertical-align: middle;
}

:is(.customer-row, .article-row):last-child td { border-bottom: 0; }

.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }

.row-link {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row-link::after { content: ''; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--link); outline-offset: -3px; border-radius: 6px; }

.customer-number { flex: none; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

.cell-text {
  overflow: hidden;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cell-type { color: var(--ink-2); text-align: center; }
.type-icon { display: inline-flex; vertical-align: middle; }
.cell-actions { text-align: right; }

/* Ikone „Bearbeiten" i „Löschen" iznad razvučene veze; vide se na prelaz mišem i fokus. */
.row-actions { display: inline-flex; gap: 6px; vertical-align: middle; }

.row-action {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--link);
  opacity: 0;
  transition: opacity .15s;
}

:is(.customer-row, .article-row):hover .row-action,
:is(.customer-row, .article-row):focus-within .row-action { opacity: 1; }
.row-action:hover { background: #F4F5FA; }
.row-action:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.row-action-danger { color: #C8402E; }
.row-action-danger:hover { background: rgba(200, 64, 46, .08); }
.row-action-danger:focus-visible { outline-color: #C8402E; }

@media (hover: none) {
  .row-action { opacity: 1; }
}

.list-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 12px 22px 16px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

.load-more {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--navy);
  text-decoration: none;
}

.load-more:hover { background: #F4F5FA; }
.load-more:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* --- Prazna stanja (8c, 8d) ------------------------------------------------ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px 72px;
  text-align: center;
}

.empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-3);
}

.empty-title { margin: 16px 0 0; font-weight: 600; font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.empty-title-large { margin-top: 22px; font-weight: 200; font-size: 24px; }

.empty-text {
  max-width: 380px;
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.empty-actions .toolbar-btn-primary span { overflow: hidden; max-width: 60vw; text-overflow: ellipsis; }

/*
 * Ikona u krugu (naručilac, 19.09.2026): u žutom dugmetu bijeli krug sa plavom
 * ikonom, u bijelom dugmetu plavi krug sa bijelom ikonom.  Krug je sam <svg>
 * (pozadina + padding), bez izmjene markupa.
 */
.empty-actions .toolbar-btn { padding-left: 8px; }

.empty-actions .toolbar-btn > svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 6px;
  border-radius: 50%;
}

.empty-actions .toolbar-btn-primary > svg { background: #fff; color: #1D2FA0; }
.empty-actions .toolbar-btn-light > svg { background: #1D2FA0; color: #fff; }

/*
 * Prazna lista (katalog, kupci) — polje za diktat (naručilac, 19.09.2026): žuti okrugli
 * mikrofon na početku, primjeri kao na početnoj, isto dugme za slanje na kraju.
 * Na svijetlom panelu je polje bijelo, a tekst primjera siv.
 */
.dictate-field { width: min(560px, 100%); margin: 16px auto 14px; }
.dictate-field-label { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-align: center; text-wrap: pretty; }

.dictate-field-input {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 19, 33, .06);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.dictate-field-input:hover { border-color: #C9CDE0; }
.dictate-field-input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.dictate-field-mic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Bijela ikona i puls kao veliki mikrofon na početnoj (naručilac, 19.09.2026). */
  background: radial-gradient(circle at 50% 32%, #FFC24D, #FF9E1B 62%, #F78A00);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 158, 27, .35);
  animation: vx-pulse-small 2.4s ease-out infinite;
}

@keyframes vx-pulse-small {
  0%, 100% { box-shadow: 0 6px 16px rgba(255, 158, 27, .35), 0 0 0 0 rgba(255, 158, 27, .45); }
  70%      { box-shadow: 0 6px 16px rgba(255, 158, 27, .35), 0 0 0 12px rgba(255, 158, 27, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dictate-field-mic { animation: none; }
}

.dictate-field-input .home-input-text { color: var(--ink-3); }

/* Ilustracija praznog stanja: zgrada, osoba, osoba u isprekidanim krugovima. */
.empty-art { display: flex; align-items: flex-end; }

.empty-art-side,
.empty-art-main { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; }

.empty-art-side { width: 52px; height: 52px; border: 1.5px dashed #C9CBDA; color: #C9CBDA; }
.empty-art-side:first-child { margin-right: -10px; }
.empty-art-side:last-child { margin-left: -10px; }

.empty-art-main {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border: 1.5px dashed var(--accent);
  color: var(--link);
}

/*
 * Telefon (izvedeno dok mobilni dizajn ne stigne, odluka #6): „Neuer Kunde"
 * preko cijele širine iznad uvoza i izvoza, čipovi i „Zuletzt verwendet"
 * klize vodoravno, a red tabele postaje kartica — naziv i tip u prvom redu,
 * ispod mjesto, e-mail i telefon.  Kartica je i dalje cijela veza na izmjenu.
 */
@media (max-width: 767.98px) {
  :is(.customers, .articles) { gap: 14px; }

  .list-toolbar { gap: 10px; }
  .list-search { flex-basis: 100%; min-height: 52px; padding-left: 20px; }

  /* „Neuer Kunde" preko reda, uvoz i izvoz kao okrugle ikone pored njega —
     jedan red manje iznad liste (natpis ostaje za čitač ekrana). */
  .list-actions { width: 100%; display: flex; gap: 8px; }
  .list-actions .toolbar-btn { flex: none; width: 44px; padding: 0; justify-content: center; }

  .list-actions .toolbar-btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .list-actions .toolbar-btn-primary { order: -1; flex: 1; width: auto; padding: 0 16px; }
  .list-actions .toolbar-btn-primary > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

  .panel-head { padding: 12px 14px 4px; }
  .chips { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }

  .recent-title { padding: 8px 14px 4px; }

  .recent-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 62%);
    overflow-x: auto;
    padding: 0 14px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .recent-list::-webkit-scrollbar { display: none; }
  .recent-list li { scroll-snap-align: start; }

  .table-scroll { overflow: visible; }
  :is(.customers-table, .articles-table) { table-layout: auto; }
  :is(.customers-table, .articles-table) thead { display: none; }

  :is(.customers-table, .articles-table) tbody,
  :is(.customer-row, .article-row) td { display: block; }

  :is(.customer-row, .article-row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(29, 47, 160, .08);
  }

  :is(.customer-row, .article-row):last-child { border-bottom: 0; }

  :is(.customers-table, .articles-table) :is(.customer-row, .article-row) td {
    height: auto;
    padding: 0;
    border: 0;
  }

  .cell-name { grid-column: 1; }
  .cell-type { grid-column: 2; grid-row: 1; align-self: center; }
  /* Kartice nemaju ikone reda (nema prelaza mišem); brisanje ide kroz formu → „…". */
  :is(.customers-table, .articles-table) :is(.customer-row, .article-row) .cell-actions { display: none; }

  /* Mjesto, e-mail i telefon ispod naziva, poravnati sa njim (krug 34 + 10). */
  :is(.customers-table, .articles-table) :is(.customer-row, .article-row) .cell-text { grid-column: 1; padding-left: 44px; font-size: 12.5px; line-height: 1.45; }
  .cell-text:empty { display: none; }

  .customer-number { overflow: hidden; text-overflow: ellipsis; }

  .empty-state { padding: 44px 16px 52px; }
}

@media (min-width: 768px) {
  /* Lista traži širinu iz dizajna (panel 1160 px na 1280). */
  .app-main:has(:is(.customers, .articles)) { max-width: 1208px; }
}

@media (prefers-reduced-motion: reduce) {
  .sort-chevron,
  .row-action { transition: none; }
}

/* ==========================================================================
   Kupci — forma (05/S4, dizajn 8e)
   ========================================================================== */

/* Forma je isti svijetli panel kao lista; zaobljeni uglovi sijeku sadržaj. */
.customer-form { overflow: clip; }

.form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 16px 28px 12px;
  border-bottom: 1px solid #E8EAF2;
}

.icon-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--link);
}

.icon-btn:hover { background: #F4F5FA; }
.icon-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.form-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.form-title h1 { margin: 0; font-weight: 200; font-size: 24px; color: var(--ink); overflow-wrap: anywhere; }
.form-sub { font-weight: 500; font-size: 13px; color: var(--ink-3); }

/* Prekidač tipa u zaglavlju: natpis postoji za čitač ekrana, a ne vidi se (8e). */
.field-type .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0 40px;
  padding: 18px 28px 28px;
}

.form-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Naslov sekcije sa narandžastom linijom koja se gubi (8e). */
.form-section {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 2px;
  font-weight: 200;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
}

.form-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 158, 27, .9), transparent);
}

.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; }
.form-zip { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px 12px; }
.form-group { display: contents; }

/* Firma / Privatperson bez skripte: polja drugog tipa se ne prikazuju. */
.customer-form:has(input[name="type"][value="person"]:checked) [data-for="company"],
.customer-form:has(input[name="type"][value="company"]:checked) [data-for="person"] { display: none; }

/* --- Polja na svijetlom panelu -------------------------------------------- */

.light-panel .field { margin: 0; min-width: 0; }
.light-panel .field-label { padding: 0 8px 6px; font-weight: 600; font-size: 12px; color: #4A5070; }
.light-panel .field-optional { font-weight: 400; color: var(--ink-3); }

.light-panel .field-pill {
  min-height: 46px;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid #D8DAE5;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-panel .field-pill:focus-within {
  border-color: var(--link);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(29, 47, 160, .12);
}

.light-panel .field-pill input,
.light-panel .field-pill textarea {
  font-family: inherit;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ink);
}

.light-panel .field-pill input::placeholder,
.light-panel .field-pill textarea::placeholder { font-weight: 300; color: #9AA0B8; opacity: 1; }

.light-panel .field-pill input:-webkit-autofill,
.light-panel .field-pill input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--ink);
}

.light-panel .field-pill .field-check { stroke: #1E9E5A; }

/* Greška (odluka #14): crven okvir, ikona „!" u polju i poruka ispod polja. */
.light-panel .field-pill.has-error {
  border: 1.5px solid #C8402E;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 64, 46, .12);
}

.field-alert { display: none; flex: none; color: #C8402E; }
.field-pill.has-error .field-alert { display: block; }
.light-panel .field-error { margin: 6px 8px 0; font-size: 12.5px; color: #C8402E; }

/* Poruka greške kao tamni oblačić iznad „!" (8e): na prelaz mišem i dok je polje u fokusu. */
.field-tip-anchor { position: relative; flex: none; display: flex; }
.field-pill:not(.has-error) .field-tip-anchor { display: none; }

.light-panel .field-tip {
  position: absolute;
  right: -8px;
  bottom: calc(100% + 10px);
  z-index: 4;
  display: none;
  width: max-content;
  max-width: min(360px, calc(100vw - 64px));
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #101321;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  color: #fff;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  /* Pomak udesno kad oblačić ne bi stao u panel (customers.js); strelica ostaje iznad „!". */
  transform: translateX(var(--tip-shift, 0px));
}

.light-panel .field-tip::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #101321;
  transform: translateX(calc(-1 * var(--tip-shift, 0px))) rotate(45deg);
}

.field-tip-anchor:hover .field-tip,
.field-pill.has-error:focus-within .field-tip { display: block; }
.light-panel .field-hint { margin: 0; padding: 0 8px; font-size: 12px; color: var(--ink-3); }

/* Napomena: višeredno polje. */
.light-panel .field-area { align-items: stretch; padding: 12px 18px; border-radius: 18px; }

.field-area textarea {
  flex: 1;
  min-height: 106px;
  border: 0;
  background: none;
  outline: none;
  line-height: 1.5;
  resize: vertical;
}

/* Birač države na svijetlom panelu. */
.light-panel .menu-select-trigger { margin: 0 -18px; padding: 0 44px 0 18px; font-size: 14.5px; color: var(--ink); }
.light-panel .field-select .field-chevron { right: 18px; color: var(--ink-3); }

/* --- Segmenti na svijetlom panelu (tip, Anrede, rok, jezik) ---------------- */

.seg-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: #fff;
}

.seg { position: relative; cursor: pointer; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.seg > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 13px;
  color: #7A7F96;
  white-space: nowrap;
}

.seg:hover input:not(:checked) + span { color: var(--navy); }
.seg input:checked + span { font-weight: 700; color: #fff; background: var(--navy); }
.seg input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }

.field-terms .seg-group,
.field-language .seg-group { align-self: flex-start; }
.field-terms .seg > span { padding: 0 16px; }

/* --- Traka na dnu --------------------------------------------------------- */

/* Traka „Abbrechen · Speichern" na kraju forme — klizi sa stranicom (naručilac). */
.form-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 28px;
  border-top: 1px solid #E8EAF2;
  background: #F8F9FC;
}

.text-btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
}

.text-btn:hover { background: rgba(29, 47, 160, .06); }
.text-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.form-save { min-width: 220px; min-height: 46px; justify-content: center; font-size: 14.5px; }

/* Telefon: jedna kolona, prekidač tipa ispod naslova, traka preko cijele širine. */
@media (max-width: 767.98px) {
  .form-head { padding: 14px 16px 12px; }
  .form-head .field-type { flex-basis: 100%; }
  .form-head .field-type .seg-group { width: 100%; flex-wrap: nowrap; }
  .form-head .field-type .seg { flex: 1; }

  .form-body { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 20px; }
  .form-col + .form-col { margin-top: 14px; }

  .form-pair { grid-template-columns: minmax(0, 1fr); }
  .form-zip { grid-template-columns: 100px minmax(0, 1fr); }

  .seg > span { padding: 0 14px; }

  /* Rok i jezik u jednom redu: rok bez jedinice, „(Tage)" stoji uz natpis. */
  .field-terms .seg-group,
  .field-language .seg-group { align-self: stretch; flex-wrap: nowrap; gap: 2px; }
  .field-terms .seg,
  .field-language .seg { flex: 1 1 auto; }
  .field-terms .seg > span,
  .field-language .seg > span { padding: 0 8px; }

  .field-terms .seg-unit {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .field-terms .field-label::after { content: ' (' attr(data-unit) ')'; font-weight: 400; color: var(--ink-3); }

  .form-foot { padding: 12px 16px; }
  .form-foot .text-btn { padding: 0 14px; }
  .form-save { flex: 1; min-width: 0; }
}

/* ==========================================================================
   Kupci — brisanje, „Rückgängig", pretraga dok se kuca (05/S4, 8b, 8f, 8g)
   ========================================================================== */

/* Dok stiže novi panel ili nova stranica: blago utišano, tek ako potraje. */
:is(.customers-panel, .articles-panel) { transition: opacity .15s .12s; }
:is(.customers-panel, .articles-panel)[aria-busy="true"] { opacity: .6; }
.load-more[aria-busy="true"] { opacity: .6; cursor: progress; }

/* --- Meni „…" u zaglavlju forme (8e, odluka #16) --------------------------- */

.more-menu { position: relative; flex: none; }
.more-button { list-style: none; cursor: pointer; color: #3A4060; border-color: #E2E4EE; }
.more-button::-webkit-details-marker { display: none; }
.more-menu[open] .more-button { background: #F4F5FA; }
.more-list { min-width: 180px; }

.sort-list .more-danger { color: #C8402E; }
.sort-list .more-danger svg { color: currentColor; }
.sort-list .more-danger:hover { background: rgba(200, 64, 46, .08); }
.sort-list a:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }

/* --- Potvrda brisanja (8f) ------------------------------------------------- */

.confirm-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 26px 26px 22px;
  border: 0;
  border-radius: 22px;
  background: #F8F9FC;
  box-shadow: 0 24px 60px rgba(3, 7, 40, .5);
  color: #101321;
}

.confirm-dialog::backdrop {
  background: rgba(3, 7, 40, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.confirm-dialog[open] { animation: vx-confirm-in .18s ease-out; }
.confirm-dialog[open]::backdrop { animation: vx-fade-in .18s ease-out; }

@keyframes vx-confirm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes vx-fade-in { from { opacity: 0; } }

.confirm-head { display: flex; align-items: center; gap: 12px; }

.confirm-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(200, 64, 46, .12);
  color: #C8402E;
}

.confirm-title { margin: 0; font-weight: 200; font-size: 22px; line-height: 1.25; color: #101321; }

.confirm-text {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3A4060;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.confirm-text b { font-weight: 700; color: #101321; }

.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.confirm-actions .text-btn { min-height: 44px; padding: 0 20px; }

button.text-btn { border: 0; background: none; font-family: inherit; cursor: pointer; }

.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: #C8402E;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.danger-btn:hover { background: #B3371F; }
.danger-btn:focus-visible { outline: 2px solid #C8402E; outline-offset: 2px; }
.danger-btn:disabled { opacity: .7; cursor: progress; }

/* Bez skripte potvrda je stranica: ista kartica, na sredini. */
.confirm-page { align-items: center; padding: 48px 0; }
.confirm-dialog.is-page { width: min(440px, 100%); }

/* --- „Kunde gelöscht · Rückgängig" (8g) ------------------------------------
 *
 * Donji desni ugao, kao ostale poruke (naručilac); na desktopu ga skripta
 * premjesti u spremnik poruka.  Odbrojavanje (prsten) i nestajanje su CSS
 * animacije od pet sekundi — rade i bez skripte — i stoje dok su miš ili
 * fokus na toastu (WCAG 2.2.1).
 */

.undo-toast {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  border-radius: var(--radius-pill);
  background: #101321;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  pointer-events: auto;
  animation: vx-undo-in .22s ease-out, vx-undo-life 5s linear forwards;
}

.undo-check { flex: none; color: #7FDCA4; }
.undo-text { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undo-toast form { display: contents; }

.undo-btn {
  flex: none;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: #FFC46A;
  cursor: pointer;
}

.undo-btn:hover { background: rgba(255, 255, 255, .2); }
.undo-btn:focus-visible { outline: 2px solid #FFC46A; outline-offset: 2px; }

.undo-ring { flex: none; transform: rotate(-90deg); }
.undo-ring circle { fill: none; stroke-width: 2; }
.undo-ring-track { stroke: rgba(255, 255, 255, .25); }

/* Obim kruga r = 12: 2π · 12 ≈ 75.4. */
.undo-ring-bar {
  stroke: #FFC46A;
  stroke-dasharray: 75.4;
  stroke-dashoffset: 0;
  animation: vx-undo-ring 5s linear forwards;
}

.undo-toast:hover,
.undo-toast:focus-within,
.undo-toast:hover .undo-ring-bar,
.undo-toast:focus-within .undo-ring-bar { animation-play-state: paused; }

@keyframes vx-undo-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes vx-undo-ring { to { stroke-dashoffset: 75.4; } }

@keyframes vx-undo-life {
  0%, 96% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; }
}

/* U spremniku poruka (desktop) mjesto određuje spremnik. */
.toast-stack .undo-toast { position: static; }

@media (min-width: 768px) {
  .undo-toast { left: auto; }
  .undo-text { flex: none; }
}

@media (max-width: 767.98px) {
  /* Zaglavlje forme: nazad, naslov i „…" u prvom redu, prekidač tipa ispod. */
  .form-head .field-type { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.customers-panel, .articles-panel) { transition: none; }
  .confirm-dialog[open],
  .confirm-dialog[open]::backdrop { animation: none; }
  .undo-toast { animation: vx-undo-life 5s linear forwards; }
}

/* ==========================================================================
   Katalog — lista (06a §5.1–5.4, dizajn 10a–10d, 10h, 10h2)
   ========================================================================== */

/*
 * Traka, svijetli panel, čipovi, sortiranje, tabela i prazna stanja su
 * zajednički sa kupcima (`:is(.customers, .articles)` gore); ovdje je samo
 * ono čega kod kupaca nema.  Mjere i boje su iz dizajnerovog HTML-a (10a–10h2).
 */

/* 10d: dok je katalog prazan, pretraga je utišana, a akcije su u panelu. */
.articles.is-empty .list-search { opacity: .5; }

/* Čipovi, „ohne Preis" i sortiranje su u katalogu visoki 38 px (10a). */
/* Visina čipova tipa i sortiranja ista kod kupaca i u katalogu (naručilac, 19.09.2026). */
:is(.customers, .articles) .chips,
:is(.customers, .articles) .sort-button { height: 38px; }
.customers .chip { padding-top: 7px; padding-bottom: 7px; }
.articles .chip { padding: 7px 15px; }

.panel-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; }

/* Desno: filter „ohne Preis" odmah do sortiranja (naručilac, 19.09.2026). */
.panel-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }

/* --- „N ohne Preis · Anzeigen" i aktivan filter (10a, 10b) ----------------- */

.missing-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 14px;
  border: 1px solid #FFD7A3;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 1px 4px rgba(16, 19, 33, .08);
  font-weight: 700;
  font-size: 12px;
  color: #B25E00;
  text-decoration: none;
  white-space: nowrap;
}

.missing-chip:hover { border-color: #FFB75E; }
.missing-chip:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.missing-icon { flex: none; color: #E07B00; }

.missing-chip-show {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #FFF1DC;
  font-size: 11.5px;
}

.missing-chip.is-active { gap: 7px; padding: 0 14px; border-color: var(--accent); background: var(--accent); color: var(--navy); }
.missing-chip.is-active:hover { filter: brightness(1.05); }
.missing-chip.is-active .missing-icon { color: var(--navy); }

/* --- Banner poslije startnog kataloga (10b) ---------------------------------- */

.list-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 22px 0;
  padding: 12px 16px;
  border: 1px solid #FFD7A3;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: #fff;
}

.list-banner-check { flex: none; color: #1E9E5A; }
.list-banner-text { flex: 1; min-width: 0; margin: 0; font-weight: 500; font-size: 13.5px; color: var(--ink); }
.list-banner-text a { font-weight: 700; color: var(--link); }
.list-banner-hint { font-weight: 600; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

.list-banner-close {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-3);
}

.list-banner-close:hover { background: #F4F5FA; }
.list-banner-close:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* --- Tabela (10a, 10c) ------------------------------------------------------- */

/* Kolone iz 10a: naziv uzima ostatak; ispod ~860 px tabela klizi vodoravno. */
.articles-table { min-width: 860px; }
.col-category    { width: 150px; }
.col-unit        { width: 90px; }
.col-price       { width: 130px; }
.col-vat         { width: 80px; }
.col-art         { width: 100px; }
.col-row-actions { width: 132px; }

/* Tablet: uže kolone, da naziv ne ostane na par slova. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .articles-table { min-width: 700px; }
  .col-category    { width: 110px; }
  .col-unit        { width: 72px; }
  .col-price       { width: 104px; }
  .col-vat         { width: 62px; }
  .col-art         { width: 88px; }
  .col-row-actions { width: 118px; }
}

.articles-table thead .col-price,
.articles-table thead .col-vat { text-align: right; }
.articles-table thead .col-art { text-align: center; }

.article-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.article-sku { flex: none; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.price-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #FFF1DC;
  font-weight: 700;
  font-size: 10.5px;
  color: #B25E00;
  white-space: nowrap;
}

/* „gefunden über: Warmwasserboiler" (10c). */
.found-via { margin-top: 1px; overflow: hidden; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.light-panel .found-via mark { padding: 0 3px; border-radius: 4px; background: #FFE7BF; color: var(--ink); }

/* Kategorija · jedinica ispod naziva — samo na telefonu (10h). */
.article-meta { display: none; }

.cell-plain { overflow: hidden; font-size: 13px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }

.cell-price { text-align: right; white-space: nowrap; }
.price-value { font: 600 13.5px ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }
.is-missing .price-value { color: #E07B00; }
.cell-price .price-pill { display: none; }

.cell-vat { font-size: 13px; color: var(--ink-2); text-align: right; white-space: nowrap; }
/* Firma nije obveznik MwSt: stopa se čuva, ali se ne primjenjuje (00/6). */
.cell-vat.is-muted { color: #B4B8C8; }

.cell-art { text-align: center; }

.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 600;
  font-size: 11.5px;
  color: #6A7089;
  white-space: nowrap;
}

/* Natpisi akcija vide se samo u swipe traci na telefonu. */
.swipe-label { display: none; }

/* 10d: „CSV importieren" kao tiha veza ispod dugmadi. */
.empty-link {
  margin-top: 16px;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
}

.empty-link:hover { color: var(--ink-2); }
.empty-link:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }

/* Filter je samo na telefonu. */
.filter-sheet { display: none; }

/*
 * Telefon (10h, 10h2): pretraga, okrugli „+" i „Filter" u jednom redu; čipovi,
 * kategorije i sortiranje sele u donji sheet; u panelu ostaje traka „ohne
 * Preis".  Stavka: naziv + Artikel-Nr., ispod kategorija · jedinica, desno
 * cijena ili „Preis fehlt".  Swipe ulijevo otkriva Bearbeiten / Löschen
 * (articles.js, K8); bez skripte je dodir na stavku izmjena.
 */
@media (max-width: 767.98px) {
  .articles .list-toolbar { flex-wrap: nowrap; }
  .articles .list-search { flex: 1 1 auto; min-width: 0; }
  .articles .list-actions { width: auto; flex: none; }
  .articles .list-actions .toolbar-btn:not(.toolbar-btn-primary) { display: none; }
  .articles .list-actions .toolbar-btn-primary { order: 0; flex: none; width: 44px; padding: 0; justify-content: center; }

  .articles .list-actions .toolbar-btn-primary > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* --- Dugme „Filter" sa brojčićem ------------------------------------------ */

  .filter-sheet { display: block; flex: none; }

  .filter-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: #fff;
    list-style: none;
    cursor: pointer;
  }

  .filter-btn::-webkit-details-marker { display: none; }
  .filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    font-weight: 800;
    font-size: 11px;
    color: var(--navy);
  }

  /* --- Donji sheet (10h2) ---------------------------------------------------- */

  .filter-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(3, 7, 40, .5); animation: vx-fade-in .18s ease-out; }

  .filter-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 71;
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: #F8F9FC;
    box-shadow: 0 -12px 40px rgba(3, 7, 40, .4);
    color: #101321;
    animation: vx-sheet-in .22s ease-out;
  }

  .filter-handle { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: #C9CBDA; }
  .filter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .filter-title { margin: 0; font-weight: 200; font-size: 22px; color: #101321; }
  .filter-reset { padding: 8px 0; font-weight: 600; font-size: 13px; color: #8A8FA3; text-decoration: none; }
  .filter-reset:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }

  .filter-group { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
  .filter-group[hidden] { display: none; }
  .filter-group legend { margin-bottom: 8px; padding: 0 4px; font-weight: 600; font-size: 12px; color: #4A5070; }
  .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .filter-chip { position: relative; }
  .filter-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }

  .filter-chip span {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #D8DAE5;
    border-radius: var(--radius-pill);
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    color: #3A4060;
    cursor: pointer;
  }

  .filter-chip input:checked + span { border-color: var(--navy); background: var(--navy); font-weight: 700; color: #fff; }
  .filter-chip input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }

  .filter-submit {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    box-shadow: 0 6px 18px rgba(255, 158, 27, .3);
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    color: var(--navy);
    cursor: pointer;
  }

  .filter-submit:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

  /* --- Panel: samo traka „ohne Preis" (10h) ---------------------------------- */

  .articles-panel .chips,
  .articles-panel .sort-menu,
  .articles-panel .starter-pill,
  .articles-panel .category-cards { display: none; }

  .articles-panel .panel-head { padding: 12px 16px 6px; }
  .articles-panel .panel-head:not(:has(.missing-chip)) { display: none; }
  .articles-panel .panel-filters { display: none; }
  .articles-panel .panel-tools { width: 100%; }

  .articles-panel .missing-chip {
    flex: 1;
    height: auto;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #FFF1DC;
    box-shadow: none;
  }

  .articles-panel .missing-chip-show { margin-left: auto; padding: 0; background: none; font-weight: 600; font-size: 12px; color: var(--navy); }
  .articles-panel .missing-chip.is-active { background: var(--accent); }
  .articles-panel .missing-chip.is-active svg:last-child { margin-left: auto; }

  .list-banner { flex-wrap: wrap; margin: 12px 16px 0; padding: 10px 12px; }
  .list-banner-text { font-size: 13px; }
  .list-banner-hint { display: none; }

  /* --- Stavke (10h) ----------------------------------------------------------- */

  .articles-table { min-width: 0; }

  .articles-table .article-row {
    position: relative;
    align-items: center;
    min-height: 56px;
    overflow: hidden;
    touch-action: pan-y;
  }

  .articles-table .article-row .cell-name { grid-column: 1; grid-row: 1; }
  .articles-table .article-row .cell-price { grid-column: 2; grid-row: 1; }
  .articles-table .article-row :is(.cell-plain, .cell-vat, .cell-art) { display: none; }

  .article-line .row-link { font-size: 14.5px; }
  .article-line .price-pill { display: none; }
  .article-meta { display: block; margin-top: 1px; overflow: hidden; font-size: 12px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }

  .price-value { font-size: 14.5px; }
  .is-missing .price-value { display: none; }
  .cell-price .price-pill { display: inline-flex; }

  /* Swipe: akcije dolaze zdesna preko cijene; `--swipe` je pomak dok prst vuče. */
  .articles-table .article-row .cell-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    padding: 0;
    transform: translateX(calc(100% - var(--swipe, 0px)));
    visibility: hidden;
    transition: transform .2s ease, visibility 0s .2s;
  }

  .articles-table .article-row.is-open .cell-actions { transform: none; visibility: visible; transition: transform .2s ease; }
  .articles-table .article-row.is-dragging .cell-actions { visibility: visible; transition: none; }

  .articles-table .article-row .row-actions { display: flex; gap: 0; height: 100%; }

  .articles-table .article-row .row-action {
    width: 76px;
    height: 100%;
    flex-direction: column;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: var(--link);
    font-weight: 700;
    font-size: 11.5px;
    color: #fff;
    text-decoration: none;
    opacity: 1;
  }

  .articles-table .article-row .row-action-danger { background: #C8402E; }
  .articles-table .article-row .row-action-copy { display: none; }
  .articles-table .article-row .row-action:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  .swipe-label { display: block; }
}

@keyframes vx-sheet-in { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  .filter-panel,
  .filter-backdrop { animation: none; }
  .articles-table .article-row .cell-actions { transition: none; }
}

/* ==========================================================================
   Katalog — forma (06a §5.6, dizajn 10f, 10f2, 10j, 10k)
   ========================================================================== */

/*
 * Zaglavlje, polja, oblačić greške, segmenti i traka su iz forme kupaca
 * (gore); ovdje raspored 10f i ono čega kod kupaca nema: sufiks u polju,
 * jedinica sa „weitere …", sklopiva „Weitere Angaben" i čipovi sinonima.
 */

/* Bez sječenja: lista „weitere …" izlazi preko ivice panela.  Uglove zato
   nosi traka na dnu. */
.article-form { overflow: visible; }
.article-form .form-foot { border-radius: 0 0 20px 20px; }

/* Lijevo 440 px (Art, Name, Einheit, Preis, MwSt), desno kartica iste visine kao lijeva kolona (naručilac). */
.article-body { grid-template-columns: 440px minmax(0, 1fr); align-items: stretch; }

.article-form .field-hint { margin-top: 6px; }
.article-form .field-area textarea { min-height: 72px; }

/* Sufiks u polju: „CHF" uz cijenu, strelica uz kategoriju. */
.field-suffix { flex: none; display: flex; align-items: center; font-weight: 600; font-size: 13px; color: var(--ink-3); }

/* Prazna cijena znači „Preis fehlt" (06a §2): narandžast okvir kao u 10f. */
.field-price .field-pill:not(.has-error):not(:focus-within):has(input:placeholder-shown) { border-color: #FFD7A3; background: #FFFBF5; }

/* Segment koji se dijeli na jednake dijelove (jedinica, Art, MwSt). */
.seg-fill { flex-wrap: nowrap; }
.seg-fill .seg { flex: 1; min-width: 0; }
.seg-fill .seg > span { padding: 0 10px; }

/* --- Jedinica: segment i „weitere …" --------------------------------------- */

.unit-row { display: flex; align-items: center; gap: 8px; }
.unit-seg { flex: 1; min-width: 0; flex-wrap: nowrap; }
.unit-seg .seg { flex: 1; min-width: 0; }
.unit-seg .seg > span { padding: 0 8px; }

.unit-more { position: relative; flex: none; }

.unit-more-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.unit-more-button::-webkit-details-marker { display: none; }
.unit-more-button svg { color: var(--ink-3); transition: transform .15s; }
.unit-more[open] .unit-more-button svg { transform: rotate(180deg); }
.unit-more-button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Izabrana jedinica iz „weitere …" ili slobodan unos: dugme kao izabran segment. */
.unit-more-button.is-chosen { border-color: var(--navy); background: var(--navy); font-weight: 700; color: #fff; }
.unit-more-button.is-chosen svg { color: #fff; }

.unit-more-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 19, 33, .18);
}

.unit-more-list .seg-group { padding: 0; border: 0; border-radius: 0; }
.unit-more-list .seg > span { padding: 0 14px; border: 1px solid var(--line); }
.unit-more-list .seg input:checked + span { border-color: var(--navy); }

.unit-free { display: flex; align-items: center; gap: 8px; padding: 2px 4px 0; font-weight: 600; font-size: 12px; color: #4A5070; cursor: pointer; }

.unit-free input {
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  border: 1.5px solid #C9CBDA;
  border-radius: 50%;
  background: #fff;
  appearance: none;
  cursor: pointer;
}

.unit-free input:checked { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 3px #fff; }
.unit-free input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Kategorija ima svoju strelicu; Chrome uz `list` crta još jednu. */
.article-form input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* Kategorija kao padajuća lista (articles.js, naručilac 19.09.2026) — izgled kao meni sortiranja. */
.field-category { position: relative; }
.field-category .combo-toggle { cursor: pointer; }
.field-category .combo-toggle svg { transition: transform .15s; }
.field-category.is-open .combo-toggle svg { transform: rotate(180deg); }

.combo-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 19, 33, .18);
  list-style: none;
}

.combo-list li {
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  overflow-wrap: anywhere;
  cursor: pointer;
}

.combo-list li:hover,
.combo-list li.is-active { background: rgba(29, 47, 160, .07); }
.combo-list li[aria-selected="true"] { color: var(--link); }

/* --- Dodatni podaci: kartica desno, uvijek otvorena (naručilac, 19.09.2026) -- */

.article-extra { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }

/* Sačuvani sinonimi kao čipovi — samo prikaz (06a §5.6). */
.term-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0 8px; list-style: none; }

.term-chips li {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: #EEF0F6;
  font-weight: 600;
  font-size: 12px;
  color: var(--navy);
  overflow-wrap: anywhere;
}

/* Firma nije obveznik MwSt: stopa se bira, ali je prigušena (00/6). */
.field-vat.is-muted .seg-group { opacity: .55; }

/* … a zašto, kaže oblačić ispod izbora na prelaz mišem i fokus (naručilac, 19.09.2026) — izgled kao ostali oblačići. */
.field-vat.is-muted { position: relative; }

.vat-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: min(340px, calc(100vw - 48px));
  padding: 8px 12px;
  border-radius: 10px;
  background: #101321;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .12s ease, transform .12s ease;
}

.vat-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-bottom-color: #101321;
  transform: translateX(-50%);
}

.field-vat.is-muted .seg-group:is(:hover, :focus-within) + .vat-tip { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .vat-tip { transition: none; }
}

/* „Speichern" čeka naziv (articles.js). */
.form-save:disabled { opacity: .5; box-shadow: none; filter: none; cursor: not-allowed; }

/* Poruka sa akcijom („Gespeichert — Preis fehlt noch · Preis erfassen"). */
.notice:has(.notice-action) > span { flex: 1; min-width: 0; }

.notice .notice-action {
  flex: none;
  align-self: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  font-weight: 700;
  font-size: 13px;
  color: #FFC46A;
  text-decoration: none;
  white-space: nowrap;
}

.notice .notice-action:hover { background: rgba(255, 255, 255, .2); }
.notice .notice-action:focus-visible { outline: 2px solid #FFC46A; outline-offset: 2px; }

/*
 * Telefon (10j, 10k): jedna kolona; traka „Abbrechen · Speichern" ljepljiva na
 * dnu i iznad tastature (K4) — `--keyboard` je visina tastature iz
 * `visualViewport` (articles.js), jer iOS ne pomjera `position: sticky`.
 */
@media (max-width: 767.98px) {
  .article-body { grid-template-columns: minmax(0, 1fr); }

  .unit-row { flex-wrap: wrap; }
  .unit-seg { flex-basis: 100%; }
  .unit-seg .seg > span { padding: 0 4px; }
  .unit-more-list { right: auto; left: 0; }


  /* Kupci isto kao artikli (naručilac, 19.09.2026). */
  :is(.article-form, .customer-form) .form-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(248, 249, 252, .98);
    transform: translateY(calc(-1 * var(--keyboard, 0px)));
  }

  :is(.article-form, .customer-form) .form-save { min-height: 50px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .unit-more-button svg,
  .field-category .combo-toggle svg { transition: none; }
}

/* ==========================================================================
   Katalog — startni katalog, unos cijena, unos u tabeli (06a §5.2, §5.5, §5.7;
   dizajn 10b2, 10e, 10i, 10l–10o)
   ========================================================================== */

/* --- Fokusiran tok (PLAN-S5 K6) ---------------------------------------------
 * Startni katalog i unos cijena na telefonu nemaju zaglavlje ni donji meni —
 * vlastito zaglavlje (nazad + naslov) stoji na tamnoj pozadini, a sadržaj je
 * svijetli list do dna ekrana.  Na desktopu ostaje zaglavlje aplikacije.
 */

.focus-page { width: 100%; max-width: 760px; margin: 0 auto; }

.focus-head,
.starter-page .starter-head { display: flex; align-items: center; gap: 12px; }

.focus-back {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.focus-back:hover { background: rgba(255, 255, 255, .2); }
.focus-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* „Später" — izlaz iz toka cijena jednim dodirom (naručilac, 20.09.2026). */
.focus-later {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.focus-later:hover { background: rgba(255, 255, 255, .2); }
.focus-later:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.focus-title { flex: 1; min-width: 0; }
.focus-title h1,
.starter-page .starter-title h1 { margin: 0; overflow: hidden; font-weight: 200; font-size: 22px; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.focus-sub,
.starter-page .starter-sub { margin: 0; font-size: 12.5px; color: #8F94BC; }

@media (max-width: 767.98px) {
  .app-shell.is-focus .app-head,
  .app-shell.is-focus .app-nav-bottom { display: none; }
  .app-shell.is-focus .app-main { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .focus-page { flex: 1; display: flex; flex-direction: column; }
  .articles.focus-page { padding-bottom: 0; }
}

/* --- Startni katalog (10e modal, 10i stranica) ------------------------------ */

.starter { display: flex; flex-direction: column; color: #101321; }
.starter-title { flex: 1; min-width: 0; }
.starter-title h2 { margin: 0; font-weight: 200; font-size: 24px; color: #101321; }
.starter-sub { margin: 2px 0 0; font-size: 13px; color: #8A8FA3; }
.starter-sub-short { display: none; }

.starter-industries { min-width: 0; margin: 0; padding: 0; border: 0; }

/* `float` vraća legend u tok (inače stoji na gornjoj ivici fieldseta). */
.starter-label {
  float: left;
  width: 100%;
  padding: 0 4px 8px;
  font-weight: 600;
  font-size: 12px;
  color: #4A5070;
}

.starter-label span { font-weight: 400; color: #8A8FA3; }

.starter-chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.starter-chip { position: relative; cursor: pointer; }
.starter-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.starter-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #D8DAE5;
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 600;
  font-size: 13px;
  color: #3A4060;
  white-space: nowrap;
}

.starter-chip svg { display: none; color: var(--accent); }
.starter-chip input:checked + span { border-color: var(--navy); background: var(--navy); font-weight: 700; color: #fff; }
.starter-chip input:checked + span svg { display: block; }
.starter-chip input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }

.starter-sheet { display: flex; flex-direction: column; min-height: 0; }
.starter-body { display: flex; flex-direction: column; gap: 12px; }

.starter-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 6px 0 18px;
  border: 1px solid #D8DAE5;
  border-radius: var(--radius-pill);
  background: #fff;
}

.starter-search:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px rgba(29, 47, 160, .12); }

.starter-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 14.5px;
  color: #101321;
}

.starter-search input::placeholder { font-weight: 300; color: #9AA0B8; opacity: 1; }
.starter-search input::-webkit-search-cancel-button { display: none; }

.starter-search-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 19, 33, .18);
  color: #2743B3;
}

.starter-nomatch { margin: 4px 8px; font-size: 13.5px; color: #8A8FA3; overflow-wrap: anywhere; }

/* `flex: none`: grupa u klizećem tijelu se ne skuplja (overflow bi joj dao min-height 0). */
.starter-group { flex: none; overflow: hidden; border: 1px solid #E2E4EE; border-radius: 14px; background: #fff; }

.starter-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 18px;
  list-style: none;
  cursor: pointer;
}

.starter-group-head::-webkit-details-marker { display: none; }
.starter-group-head:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 14px; }
.starter-group-head svg { flex: none; color: #3A4060; transform: rotate(-90deg); transition: transform .15s; }
.starter-group[open] .starter-group-head { border-bottom: 1px solid #E8EAF2; background: #F5F6FA; }
.starter-group[open] .starter-group-head svg { transform: none; }
.starter-group-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: #101321; }
.starter-group-count { flex: none; font-weight: 600; font-size: 12.5px; color: #8A8FA3; }

.starter-items { margin: 0; padding: 0; list-style: none; }

.starter-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 18px; }
.starter-item + .starter-item { border-top: 1px solid #F0F1F6; }
.starter-item.is-existing { opacity: .55; }

/*
 * `position: relative` drži skriveni checkbox u njegovom redu.  Bez toga je
 * apsolutni input vezan za sam <dialog>: 81 input „visi" ispod liste, dijalog
 * dobija visinu za klizanje, a čim ga išta pomjeri (fokus, tastatura) forma
 * izađe iz vidnog polja i ostaje prazan bijeli okvir (naručilac, 19.09.2026).
 */
.starter-pick { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.starter-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.starter-box {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #C9CBDA;
  border-radius: 6px;
  background: #fff;
  color: transparent;
}

.starter-pick input:checked + .starter-box { border-color: var(--navy); background: var(--navy); color: #fff; }
.starter-pick input:focus-visible + .starter-box { outline: 2px solid var(--link); outline-offset: 2px; }

.starter-done { flex: none; display: flex; color: #1E9E5A; }
.starter-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.starter-name { font-weight: 600; font-size: 14px; color: #101321; }
.starter-meta { font-size: 12px; color: #8A8FA3; }
.starter-existing { flex: none; font-weight: 600; font-size: 11.5px; color: #1E7A48; }

.starter-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 26px;
  border-top: 1px solid #E8EAF2;
  background: rgba(248, 249, 252, .98);
}

/* Modal (10e): 760 px, zaglavlje i branše stoje, grupe klize. */
.starter-dialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  height: min(880px, calc(100vh - 48px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #F8F9FC;
  box-shadow: 0 24px 60px rgba(3, 7, 40, .5);
}

.starter-dialog::backdrop {
  background: rgba(3, 7, 40, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.starter-dialog[open] { animation: vx-confirm-in .18s ease-out; }
.starter-dialog .starter { height: 100%; }
.starter-dialog .starter-head { display: flex; align-items: center; gap: 12px; padding: 20px 26px 14px; border-bottom: 1px solid #E8EAF2; }
.starter-dialog .starter-industries { padding: 16px 26px 0; }
.starter-dialog .starter-sheet { flex: 1; }
.starter-dialog .starter-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 26px 18px; }

/* Stranica (10i): zaglavlje i branše na tamnoj pozadini, grupe u svijetlom listu. */
.starter-page { flex: 1; gap: 16px; }
.starter-page .starter-label { color: #A8AEDC; }
.starter-page .starter-label span { color: #8F94BC; }
.starter-page .starter-chip span { height: 34px; padding: 0 13px; border-color: rgba(255, 255, 255, .3); background: none; font-size: 12.5px; color: #fff; }
.starter-page .starter-chip input:checked + span { border-color: #fff; background: #fff; color: var(--navy); }
.starter-page .starter-chip input:focus-visible + span { outline-color: var(--accent); }

.starter-page .starter-sheet {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 20px;
  background: rgba(248, 249, 252, .94);
  box-shadow: 0 14px 38px rgba(3, 7, 40, .35);
}

.starter-page .starter-body { padding: 14px 16px 16px; }
.starter-page .starter-foot { border-radius: 0 0 20px 20px; }

@media (max-width: 767.98px) {
  .starter-sub-long { display: none; }
  .starter-sub-short { display: block; }

  /* List do ivica i do dna ekrana; traka dole ljepljiva. */
  .starter-page .starter-sheet { margin: 0 -20px; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .starter-page .starter-foot {
    position: sticky;
    bottom: 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }

  .starter-page .starter-foot .form-save { flex: 1; min-width: 0; min-height: 50px; font-size: 15px; }
  .starter-item { padding: 10px 14px; }
  .starter-group-head { padding: 12px 14px; }
}

/* --- Tok unosa cijena (10l–10o) ---------------------------------------------- */

.prices-page { gap: 14px; }

.prices-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  appearance: none;
}

.prices-progress::-webkit-progress-bar { border-radius: 2px; background: rgba(255, 255, 255, .14); }
.prices-progress::-webkit-progress-value { border-radius: 2px; background: var(--accent); }
.prices-progress::-moz-progress-bar { border-radius: 2px; background: var(--accent); }

.prices-card { display: flex; flex-direction: column; overflow: visible; }

.prices-body { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 24px; text-align: center; }
.prices-name { margin: 0; font-weight: 200; font-size: 26px; line-height: 1.2; color: #101321; text-wrap: pretty; overflow-wrap: anywhere; }
.prices-meta { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #8A8FA3; text-wrap: pretty; }

.prices-field {
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0 24px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 20, 112, .12);
}

.prices-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: 600 30px ui-monospace, Menlo, Consolas, monospace;
  color: #101321;
  text-align: right;
}

.prices-field input::placeholder { font-weight: 200; color: #C9CBDA; opacity: 1; }
.prices-currency { flex: none; font-weight: 600; font-size: 16px; color: #8A8FA3; }

.prices-field.has-error { border-color: #C8402E; box-shadow: 0 0 0 3px rgba(200, 64, 46, .12); }
.prices-error { max-width: 460px; margin: 10px 0 0; font-weight: 500; font-size: 12.5px; color: #C8402E; }
.prices-hint { margin: 10px 0 0; font-size: 12px; color: #8A8FA3; }

/* „Weiter" je prvo u formi (Return), a prikazuje se desno od „Überspringen". */
.prices-foot { border-radius: 0 0 20px 20px; }
.prices-foot .text-btn { order: -1; border: 0; background: none; font-family: inherit; cursor: pointer; }

/* Završno stanje (10o). */
.prices-done { align-items: center; padding: 48px 24px 40px; text-align: center; }

.prices-done-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 8px rgba(30, 158, 90, .14);
  color: #1E9E5A;
}

.prices-done-title { margin: 22px 0 0; font-weight: 200; font-size: 26px; color: #101321; }
.prices-done-text { max-width: 420px; margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: #8A8FA3; text-wrap: pretty; }
.prices-done-actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 26px; }
.prices-done-actions .form-save { min-width: 0; min-height: 50px; font-size: 15px; }
.prices-done-actions .text-btn { justify-content: center; min-height: 44px; }

@media (min-width: 768px) {
  .prices-page { max-width: 560px; }
}

@media (max-width: 767.98px) {
  .prices-card { flex: 1; margin: 0 -20px; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .prices-body { flex: 1; }

  .prices-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    background: rgba(248, 249, 252, .98);
    transform: translateY(calc(-1 * var(--keyboard, 0px)));
  }

  .prices-foot .form-save { flex: 1; min-width: 0; min-height: 50px; font-size: 15px; }
  .prices-done { justify-content: center; }
}

/* --- Unos cijene u tabeli (10b2) --------------------------------------------- */

/* Iznos je veza iznad razvučene veze reda: bez skripte vodi na formu (#price). */
.price-edit {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin: -4px -6px;
  padding: 4px 6px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.has-inline-price .price-edit { cursor: text; }
.has-inline-price .price-edit:hover { background: rgba(29, 47, 160, .07); }
.price-edit:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

.price-inline {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 130px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 20, 112, .12);
  vertical-align: middle;
}

.price-inline input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  font: 600 14px ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink);
  text-align: right;
}

.price-inline-currency { flex: none; font-weight: 600; font-size: 11px; color: var(--ink-3); }
.price-inline.has-error { border-color: #C8402E; box-shadow: 0 0 0 3px rgba(200, 64, 46, .12); }

/* Greška lijevo od polja — u redu, pa je vodoravno klizanje tabele ne siječe. */
.price-inline-error {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  z-index: 4;
  width: max-content;
  max-width: 300px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #101321;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  color: #fff;
  text-align: left;
  white-space: normal;
  transform: translateY(-50%);
}

/* Poslije unosa cijene red više nije „Preis fehlt". */
.article-row:not(.is-missing) .price-pill { display: none; }

/*
 * Red pod mišem (i sa fokusom tastature) dobija žutu liniju lijevo, 3 px
 * (naručilac, 19.09.2026).  Unutrašnja sjenka na prvoj ćeliji, da se red ne
 * pomjeri; samo tabela na desktopu — na telefonu su redovi kartice.
 */
@media (min-width: 768px) {
  :is(.customers-table, .articles-table) :is(.customer-row, .article-row):is(:hover, :focus-within) > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
}

/*
 * Kategorije kao kartice „Zuletzt verwendet" (naručilac, 19.09.2026): iste mjere
 * kao kod kupaca — pet kartica u širini panela — ali uvijek u jednom redu;
 * višak se pomjera vodoravno.  Izabrana kartica: samo krug postaje tamnoplav sa bijelim tekstom.
 */
.category-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 10px) / 5);
  gap: 10px;
  margin: 0;
  padding: 0 22px 12px;
  overflow-x: auto;
  scroll-padding: 0 22px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  list-style: none;
}

.category-list li { min-width: 0; scroll-snap-align: start; }
.category-card[aria-current] .avatar { background: var(--navy); color: #fff; }
.category-card .avatar svg { color: currentColor; }

.inline-hint { display: none; flex-basis: 100%; margin: 0; font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.inline-hint a { margin-left: 4px; font-weight: 600; color: var(--navy); text-decoration: none; }
.inline-hint a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .has-inline-price .inline-hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .starter-dialog[open] { animation: none; }
  .starter-group-head svg { transition: none; }
}

/* ==========================================================================
   CSV uvoz — kupci i katalog (06 Z5.2, 06a §8)
   ========================================================================== */

/*
 * Za uvoz nema dizajna (PLAN-S5 K9): tri koraka na svijetlom panelu, sa
 * zaglavljem, poljima i trakom kao forma kupca (8e).
 */

.import-page { width: 100%; max-width: 960px; display: flex; flex-direction: column; gap: 18px; margin: 0 auto; padding-bottom: 24px; }
.import-panel { overflow: visible; }
.import-panel .form-foot { border-radius: 0 0 20px 20px; }

/* --- Koraci ------------------------------------------------------------------ */

.import-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.import-step {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-3);
}

.import-step-number {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-weight: 700;
  font-size: 11.5px;
}

.import-step.is-current { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(16, 19, 33, .08); }
.import-step.is-current .import-step-number { border-color: var(--navy); background: var(--navy); color: #fff; }
.import-step.is-done .import-step-number { border-color: #1E9E5A; background: #1E9E5A; color: #fff; }

/* --- Sadržaj ---------------------------------------------------------------- */

.import-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 28px 26px; }
.import-title { margin: 0; font-weight: 200; font-size: 22px; color: var(--ink); }
.import-subtitle { margin: 10px 0 0; font-weight: 600; font-size: 13px; color: #4A5070; }
.import-intro,
.import-hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.import-file { margin: 0; font-weight: 600; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* Korak 1: polje za fajl u isprekidanom okviru; fajl se može i prevući. */
.import-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 20px;
  border: 1.5px dashed #C9CBDA;
  border-radius: 18px;
  background: #fff;
  text-align: center;
  cursor: pointer;
}

.import-drop.is-over { border-color: var(--accent); background: #FFFBF5; }

.import-drop-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F2F3F8;
  color: var(--link);
}

.import-drop-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.import-drop input[type="file"] { max-width: 100%; font-family: inherit; font-size: 13px; color: var(--ink-2); }

.import-drop input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 16px;
  border: 1px solid #D8DAE5;
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
}

.import-drop input[type="file"]:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 8px; }

/* Korak 2: mapiranje (polje ← kolona, primjer) i pregled. */
.import-page .table-scroll { border: 1px solid var(--line); border-radius: 12px; background: #fff; }

.import-map,
.import-preview,
.import-skipped { width: 100%; border-collapse: collapse; font-size: 13px; }

.import-map thead th,
.import-preview th,
.import-skipped th {
  padding: 9px 12px;
  background: #DFE2EC;
  font-weight: 700;
  font-size: 11px;
  color: #6A7089;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}

.import-map tbody th,
.import-map td,
.import-preview td,
.import-skipped td { padding: 8px 12px; border-top: 1px solid rgba(29, 47, 160, .08); color: var(--ink-2); text-align: left; vertical-align: middle; }

.import-map tbody th { width: 32%; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.import-map tbody th label { cursor: pointer; }

.import-required {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: #FFF1DC;
  font-weight: 700;
  font-size: 10.5px;
  color: #B25E00;
  white-space: nowrap;
}

.light-panel .import-select { min-height: 40px; padding: 0 14px; }
.light-panel .import-select select { font-size: 13.5px; color: var(--ink); }
.light-panel .import-select option { background: #fff; color: var(--ink); }
.light-panel .import-select .field-chevron { right: 14px; }

.import-example { max-width: 240px; overflow: hidden; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }

.import-preview td { max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.import-preview:has(thead tr:empty) { display: none; }

/* Korak 3: rezultat i preskočeni redovi. */
.import-result { display: flex; align-items: center; gap: 18px; }

.import-result-icon {
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(30, 158, 90, .14);
  color: #1E9E5A;
}

.import-summary { margin: 4px 0 0; font-weight: 700; font-size: 15px; color: var(--ink); }
.import-skipped td { vertical-align: top; }
.import-skipped td:first-child { width: 64px; font-weight: 600; color: var(--ink); }
.import-content { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }

.import-foot { flex-wrap: wrap; }

@media (min-width: 768px) {
  .app-main:has(.import-page) { max-width: 1008px; }
}

/* Telefon: mapiranje kao lista (natpis, izbor, primjer jedan ispod drugog). */
@media (max-width: 767.98px) {
  .import-body { padding: 16px 16px 20px; }

  /* Lista kupaca na telefonu gasi klizanje tabele (kartice); pregled uvoza klizi. */
  .import-page .table-scroll { overflow-x: auto; }
  .import-steps { flex-basis: 100%; }

  .import-map thead { display: none; }
  .import-map tr { display: grid; gap: 6px; padding: 10px 12px; border-top: 1px solid rgba(29, 47, 160, .08); }
  .import-map tbody tr:first-child { border-top: 0; }
  .import-map tbody th,
  .import-map td { width: auto; max-width: none; padding: 0; border: 0; }
  .import-example:empty { display: none; }

  .import-result { align-items: flex-start; }
  .import-foot .form-save { flex: 1 1 100%; min-width: 0; }
  .import-foot .text-btn { padding: 0 12px; }
}