/* ==========================================================================
   design.css -- skupni videz Justice.care (nov videz vstopne strani, 2026-11).
   Zakaj nova datoteka in ne theme.css: theme.css nalagajo VSE strani (tudi 404 in
   streznikove /primeri iz api/main.py). Ce bi nov videz (ponastavitev robov z "*",
   ozadje na fiksni plasti, steklene kartice, nove pisave) dali vanj, bi se takoj
   spremenile vse strani, ne samo vstopna. design.css je zato izbiren: stran ga vkljuci,
   ko jo preoblikujemo. theme.css ostane zaradi starih zetonov (--primary, --surface ...)
   in .op-h (naslovi v besedilu mnenja); design.css te zetone preslika na novo paleto.
   Vrstni red v <head>: theme.css -> assets/fonts/pisave.css -> design.css -> lastni <style> strani.
   Prvi del (do "NOVI SKUPNI GRADNIKI") je dobesedno prenesen iz index.html (razen pravila za
   svetel/temen logotip, ki je od 2. koraka v nav.js za vse strani); drugi del so
   gradniki, ki jih index.html ne uporablja, potrebujejo pa jih druge strani (gumbi drugotni/
   nevarni, polja, sporocila, tabele, znacke, splosno modalno okno, zavihki).
   ========================================================================== */

/* ===== Barve: svetlo (privzeto). Vrednosti iz navodila arhitekta (2026-11-06);
   modra #1c77c3 in rdeca #d63230 sta blagovni barvi iz logotipa / theme.css. ===== */
:root {
    --c-text: #0F1D2E; --c-muted: #566780; --c-blue: #1c77c3; --c-red: #d63230;
    --c-card: rgba(255,255,255,0.7); --c-card-border: #DDE4ED;
    --c-field: #F5F7FA; --c-field-border: #CBD6E3;
    --c-header: rgba(255,255,255,0.4);
    --c-hl: rgba(234,243,251,0.85);           /* poudarek: 5. korak */
    /* Za DROBNO besedilo v svetlem temnejsa odtenka iste modre/rdece: #1c77c3 in #d63230 na
       steklu nad modrim sijem slike padeta pod AA (izmerjeno ~3.6-4.3). Obrobe, gumbi, ikone
       in rdeca podcrta ostanejo v blagovnih barvah. #155a94 = --primary-hover iz theme.css. */
    --c-blue-text: #155a94; --c-red-text: #b3261e;
    --c-blue-img: #0F4A7D;                    /* oznaka nad naslovom lezi na modrem sijaju slike: z #155a94 izmerjeno 4.27 < 4.5 */
    --c-num: var(--c-blue-text);              /* stevilke korakov in oznak 01/02: v svetlem #155a94, v temnem #7DBBF0 */
    --c-btn: #1c77c3; --c-btn-text: #ffffff;
    --c-menu: #ffffff;                         /* polna podlaga za meni in okenca */
    /* Ozadje: ozadje-svetlo.webp je izpeljano iz lastnikove slike (Magnific, landing/Webpage/22001.jpg):
       invert, odtenek +180 st., 25 % #F5F7FA, odtenki zunaj turkizne -> modra. */
    --page-bg: #E3F0FB;
    --page-img: url(/assets/ozadje-svetlo.webp);
    --page-overlay: linear-gradient(transparent, transparent);
    --logo-img: url(/assets/logo-znak.svg);
    /* Skupni zetoni iz theme.css preslikani na to paleto (nav meni, okenca, JS barve stevca). */
    --primary: var(--c-blue); --primary-2: var(--c-blue); --primary-hover: #155a94; --link: var(--c-blue-text);
    --text: var(--c-text); --muted: var(--c-muted); --error: var(--c-red-text); --accent: var(--c-red);
    --border: var(--c-card-border); --surface: var(--c-menu); --bg: var(--c-field);
    --radius: 16px; --radius-sm: 10px;
    --f-head: 'Space Grotesk', 'Segoe UI', sans-serif;
    --f-body: 'Inter', 'Segoe UI', sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;
    color-scheme: light;
}
/* ===== Barve: temno. Velja ob prefers-color-scheme: dark, razen ce je uporabnik v meniju
   izbral svetlo (data-theme="light"); rocna izbira temne (data-theme="dark") velja vedno.
   Blok je zato dvakrat z istimi vrednostmi. Ozadje = lastnikova slika, pomanjsana na 2000 px. ===== */
:root[data-theme="dark"] {
    --c-text: #E8EEF5; --c-muted: #8FA3B8; --c-blue: #7DBBF0; --c-red: #F0807E;
    --c-card: rgba(6,12,28,0.62); --c-card-border: #1E3048;
    --c-field: rgba(0,5,26,0.55); --c-field-border: #2A4260;
    --c-header: rgba(0,5,26,0.35);
    --c-hl: rgba(20,45,75,0.7);
    --c-blue-text: #7DBBF0; --c-red-text: #F0807E; --c-blue-img: #7DBBF0;
    --c-btn: #7DBBF0; --c-btn-text: #0A1522;
    --c-menu: #0B1526; --primary-hover: #A6D1F5;
    --page-bg: #00051A;
    --page-img: url(/assets/ozadje-temno.webp);
    --page-overlay: linear-gradient(rgba(0,5,26,0.2), rgba(0,5,26,0.2));
    --logo-img: url(/assets/logo-znak-temno.svg);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-text: #E8EEF5; --c-muted: #8FA3B8; --c-blue: #7DBBF0; --c-red: #F0807E;
        --c-card: rgba(6,12,28,0.62); --c-card-border: #1E3048;
        --c-field: rgba(0,5,26,0.55); --c-field-border: #2A4260;
        --c-header: rgba(0,5,26,0.35);
        --c-hl: rgba(20,45,75,0.7);
        --c-blue-text: #7DBBF0; --c-red-text: #F0807E; --c-blue-img: #7DBBF0;
        --c-btn: #7DBBF0; --c-btn-text: #0A1522;
        --c-menu: #0B1526; --primary-hover: #A6D1F5;
        --page-bg: #00051A;
        --page-img: url(/assets/ozadje-temno.webp);
        --page-overlay: linear-gradient(rgba(0,5,26,0.2), rgba(0,5,26,0.2));
        --logo-img: url(/assets/logo-znak-temno.svg);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--f-body); color: var(--c-text); background-color: var(--page-bg); }
/* Ozadje na fiksni plasti: cover glede na okno (ne na dolzino strani), levo zgoraj, brez ponavljanja. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--page-bg); background-image: var(--page-overlay), var(--page-img);
    background-size: cover; background-position: left top; background-repeat: no-repeat; }

/* Glava: vsebino IN geometrijo (razmiki, velikosti, line-height) doloca samo nav.js.
   Tu le podlaga glave, pisava, barva in razmik crk -- nobenih velikosti ali robov.
   Logotip (svetla/temna razlicica) izbere nav.js iz zetona --logo-img (zgoraj). */
body > nav { background: var(--c-header); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-card-border); box-shadow: none; }
body > nav .logo-text { font-family: var(--f-head); font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; }
body > nav .logo-sub { font-family: var(--f-mono); font-style: normal; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--c-muted); }
body > nav .menu-btn { color: var(--c-text); }

.container { max-width: 680px; margin: 0 auto; padding: 36px 20px 60px; }

/* Stevilka 01-05 (koraki in oznaki 01/02 v karticah): mono, vse v isti modri barvi (--c-num).
   Rdeca ostane samo pri podcrti "mnenje." in v logotipu. */
.step-num { font-family: var(--f-mono); font-weight: 500; color: var(--c-num); margin-right: 0.35em; }

/* Kartice: stekleni slog */
.card { background: var(--c-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--c-card-border); border-radius: var(--radius); padding: 24px; margin-bottom: 14px;
    box-shadow: 0 8px 30px rgba(15,29,46,0.06); }
.card-label { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--c-blue-text); margin-bottom: 12px; }
.card-label.sub { margin: 18px 0 10px; }
textarea { width: 100%; height: 180px; background: var(--c-field); border: 1px solid var(--c-field-border);
    border-radius: var(--radius-sm); padding: 14px; font-size: 0.95rem; font-family: inherit; resize: none;
    outline: none; color: var(--c-text); line-height: 1.6; transition: border-color 0.2s; }
textarea:focus, .code-input:focus { border-color: var(--c-blue); }
textarea::placeholder, .code-input::placeholder { color: var(--c-muted); }
.char-counter { font-family: var(--f-mono); font-size: 0.72rem !important; }
.error { color: var(--c-red-text); font-size: 0.84rem; margin-top: 8px; display: none; }

.tos-row { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 0.88rem; color: var(--c-muted); }
.tos-row input { margin-top: 3px; accent-color: var(--c-blue); }
.tos-row a { color: var(--c-blue-text); }
.err-msg { color: var(--c-red-text); font-size: 0.82rem; margin-bottom: 10px; display: none; }
.btn-primary { width: 100%; padding: 14px; background: var(--c-btn); color: var(--c-btn-text); border: none;
    border-radius: var(--radius-sm); font-weight: 600; font-size: 1rem; cursor: pointer; font-family: inherit; }


.ico-inline { display: inline-block; vertical-align: -0.18em; width: 1.15em; height: 1.15em; }   /* <img> ikona ob besedilu (stara, barvna); nove ikone: .icon spodaj */

/* Okvir za dokaze (Preklici / Oddaj) */
.files-modal { position: fixed; inset: 0; background: rgba(0,5,26,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.files-modal.hidden { display: none; }
.files-modal-inner { background: var(--c-menu); color: var(--c-text); border: 1px solid var(--c-card-border);
    padding: 24px; border-radius: var(--radius); max-width: 500px; width: 90%; }
.files-modal-title { font-family: var(--f-head); font-size: 1.2rem; font-weight: 700; color: var(--c-text); margin-bottom: 12px; }
.btn-confirm { flex: 1; padding: 11px 16px; border: none; border-radius: var(--radius-sm); background: var(--c-btn);
    color: var(--c-btn-text); font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.file-item { padding: 8px 12px; background: var(--c-field); border-radius: 6px; margin-bottom: 6px; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; }
.file-remove { color: var(--c-red-text); cursor: pointer; font-weight: 700; }

/* "ali imate kodo primera?" + Koda primera */
.divider { text-align: center; color: var(--c-text); font-size: 0.82rem; margin: 18px 0; position: relative; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 22%; height: 1px; background: var(--c-field-border); }
.divider::before { left: 0; } .divider::after { right: 0; }
.code-row { display: flex; gap: 10px; }
.code-input { flex: 1; min-width: 0; padding: 12px 16px; background: var(--c-field); border: 1px solid var(--c-field-border);
    border-radius: var(--radius-sm); font-size: 0.95rem; font-family: var(--f-mono); outline: none; color: var(--c-text); transition: border-color 0.2s; }
.btn-open { padding: 12px 22px; background: var(--c-btn); color: var(--c-btn-text); border: none; border-radius: var(--radius-sm);
    font-family: inherit; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
/* Lebdenje: v svetlem gumb potemni (bel napis na posvetljeni #1c77c3 pade pod AA: izmerjeno 4.09),
   v temnem posvetli (temen napis na svetlo modri: kontrast zraste). */
.btn-open:hover, .btn-confirm:hover, .btn-primary:hover { filter: brightness(0.9); }
:root[data-theme="dark"] :is(.btn-open, .btn-confirm, .btn-primary):hover { filter: brightness(1.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.btn-open, .btn-confirm, .btn-primary):hover { filter: brightness(1.08); } }
@media (max-width: 360px) {   /* zelo ozki zasloni: vec prostora za dolge besede (npr. pl opisi) */
    .container { padding-left: 14px; padding-right: 14px; }
    .card { padding: 18px; }
}

/* ===== NOVI SKUPNI GRADNIKI (index.html jih ne uporablja; za druge strani) ===== */
/* Zetona za uspeh: drobno besedilo mora dosegati AA. #1b6e3e na #fff 6.28, na #E3F0FB 5.42;
   #6FD39A na #0B1526 9.97, na #00051A 11.06 (izracun po WCAG 2.x). */
:root { --c-ok: #1b6e3e; }
:root[data-theme="dark"] { --c-ok: #6FD39A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-ok: #6FD39A; } }

/* Naslov strani in razdelka (kot ime mediatorja / naslov okna: Space Grotesk). */
.page-title { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.2rem);
    line-height: 1.1; letter-spacing: -0.02em; color: var(--c-text); margin-bottom: 18px; }
/* Glava strani (naslov z ikono + dejanje desno, npr. Odjava) na steklu: brez podlage lezi na liniji slike
   ozadja in pade pod AA (profil, 1280 px: e-naslov izmerjen 1.66 v temnem, 1.91 v svetlem). */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px;
    padding: 14px 20px; background: var(--c-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--c-card-border); border-radius: var(--radius); }
.page-head h1 { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--f-head); font-weight: 700;
    font-size: clamp(1.2rem, 4.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--c-text); }
.section-title { font-family: var(--f-head); font-weight: 600; font-size: 1.1rem; color: var(--c-text); margin-bottom: 10px; }
.muted { color: var(--c-muted); }

/* Povezava v besedilu: drobna modra (AA), podcrtana. */
.link { color: var(--c-blue-text); text-decoration: underline; text-underline-offset: 0.15em; }
.link:hover { color: var(--c-blue); }

/* Polja: enak videz kot textarea in .code-input (podlaga, obroba, zaobljenost, modra ob fokusu). */
.field { width: 100%; padding: 12px 16px; background: var(--c-field); border: 1px solid var(--c-field-border);
    border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit; outline: none; color: var(--c-text);
    transition: border-color 0.2s; }
.field:focus { border-color: var(--c-blue); }
.field::placeholder { color: var(--c-muted); }
.field-label { display: block; font-size: 0.82rem; color: var(--c-muted); margin-bottom: 6px; }

/* Gumbi: glavni = .btn-primary (polna sirina) / .btn-open / .btn-confirm zgoraj.
   Drugotni: obroba brez polnila. Nevarni: rdece besedilo in obroba (rdeca = napaka/brisanje). */
.btn-secondary, .btn-danger { padding: 11px 18px; background: transparent; border: 1px solid var(--c-field-border);
    border-radius: var(--radius-sm); font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
    color: var(--c-text); transition: border-color 0.2s; }
.btn-secondary:hover { border-color: var(--c-blue); }
.btn-danger { color: var(--c-red-text); border-color: var(--c-red-text); }
.btn-danger:hover { background: rgba(214,50,48,0.08); }
.btn-primary:disabled, .btn-open:disabled, .btn-confirm:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: 0.5; cursor: default; }

/* Sporocila (vidna, za razliko od .error / .err-msg, ki ju prikaze JS). */
.msg-err, .msg-ok { font-size: 0.85rem; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid; margin: 10px 0; }
.msg-err { color: var(--c-red-text); border-color: var(--c-red-text); background: rgba(214,50,48,0.06); }
.msg-ok { color: var(--c-ok); border-color: var(--c-ok); background: rgba(46,158,91,0.07); }

/* Tabele: ovoj z vodoravnim drsenjem (ozki zasloni, dolge tabele), glava z mono pisavo kot .card-label. */
.tbl-wrap { width: 100%; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; color: var(--c-text); }
.tbl th { font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--c-muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-field-border); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--c-card-border); vertical-align: top; }
.tbl tr:hover td { background: var(--c-hl); }

/* Znacke (stanje primera, paket ...): mono, obroba v barvi besedila. */
.badge { display: inline-block; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: var(--c-blue-text); white-space: nowrap; }
.badge-ok { color: var(--c-ok); } .badge-err { color: var(--c-red-text); } .badge-muted { color: var(--c-muted); }
/* Jantarna znacka (npr. primer v teku): drobno besedilo, zato --c-amber-text (svetlo #8f4700, temno #f39237; zeton spodaj). */
.badge-warn { color: var(--c-amber-text); }

/* Gumb z ikono v vrstici seznama (PDF, ogled, odstrani): 34 px tarca, brez besedila -> OBVEZNA
   title in aria-label. Ikona 20 px v --c-blue; .danger = rdeca (odstrani) prek .icon-cur. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
    padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    color: var(--c-text); text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.icon-btn.danger { color: var(--c-red-text); }
.icon-btn .icon { width: 20px; height: 20px; vertical-align: middle; }
.icon-btn:hover { background: var(--c-hl); border-color: var(--c-field-border); }
.icon-btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }

/* Splosno modalno okno: barve, obroba in zaobljenost kot okvir za dokaze (.files-modal) zgoraj;
   dodano: 20 px odmika od roba zaslona in drsenje predolge vsebine (max 85 % visine). */
.modal { position: fixed; inset: 0; background: rgba(0,5,26,0.5); display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px; }
.modal.hidden { display: none; }
.modal-inner { background: var(--c-menu); color: var(--c-text); border: 1px solid var(--c-card-border); padding: 24px;
    border-radius: var(--radius); max-width: 500px; width: 100%; max-height: 85vh; overflow-y: auto; }
.modal-title { font-family: var(--f-head); font-size: 1.2rem; font-weight: 700; color: var(--c-text); margin-bottom: 12px; }

/* Zavihki (legal.html; uporabni tudi drugje): vrstica gumbov na podlagi polja, izbran zavihek
   v barvi glavnega gumba. Oznaka: <div class="tabs" role="tablist"><button class="tab" role="tab"
   aria-selected="true">...</button>...</div>; izbranega oznaci .active ALI aria-selected="true".
   Neizbran zavihek ima barvo besedila (ne drugotne): podlaga polja je v temnem prosojna, pod njo steklo. Dolge oznake
   (npr. de "Nutzungsbedingungen" na 390 px) se ne lomijo sredi besede: zavihki gredo v novo vrstico. */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--c-field);
    border: 1px solid var(--c-field-border); border-radius: var(--radius-sm); }
.tab { flex: 1 1 auto; padding: 9px 14px; background: transparent; border: none; border-radius: 7px;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
    color: var(--c-text); cursor: pointer; text-align: center; transition: background 0.15s; }
.tab:hover { background: var(--c-hl); }
.tab.active, .tab[aria-selected="true"] { background: var(--c-btn); color: var(--c-btn-text); }
.tab:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* ===== IKONE: en gradnik za vse strani =====
   Enobarvna SVG (assets/icons/ui-*.svg, mediator-*.svg) kot CSS maska: oblika iz datoteke, barva
   iz teme (privzeto --c-blue: svetlo #1c77c3, temno #7DBBF0), zato ikona sledi temi brez dveh datotek.
   Uporaba: <span class="icon i-lock" aria-hidden="true"></span>; velikost po vlogi z enim razredom:
     (brez)       ob besedilu, v gumbu, vrstici seznama: 1.15em
     .icon-menu   glava / meni: 22 px
     .icon-badge  znacka / stanje: 15 px
     .icon-ill    ilustracija (mediator): 28 px (okvir 46 px: .j-icon na index, .med-ico spodaj za payment/response)
   Barva: .icon-cur = barva besedila starsa (npr. rdeca pri "Odjava"); drugace --icon-c ali --c-blue.
   nav.js ima rezervno kopijo tega gradnika za strani brez design.css (glej tam). */
.icon { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.18em;
    background-color: var(--icon-c, var(--c-blue));
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-menu { width: 22px; height: 22px; vertical-align: middle; }
.icon-badge { width: 15px; height: 15px; vertical-align: -0.15em; }
.icon-ill { width: 28px; height: 28px; vertical-align: middle; }
.icon-cur { --icon-c: currentColor; }
/* Vmesnik: Flaticon 12231613 lancip-user-interface (obris izluscen). Ilustracije: 1566533 law-and-justice. */
.i-user     { --icon: url(/assets/icons/ui-user.svg); }
.i-cases    { --icon: url(/assets/icons/ui-cases.svg); }
.i-finance  { --icon: url(/assets/icons/ui-finance.svg); }
.i-language { --icon: url(/assets/icons/ui-language.svg); }
.i-theme    { --icon: url(/assets/icons/ui-theme.svg); }
.i-legal    { --icon: url(/assets/icons/ui-legal.svg); }
.i-login    { --icon: url(/assets/icons/ui-login.svg); }
.i-logout   { --icon: url(/assets/icons/ui-logout.svg); }
.i-lock     { --icon: url(/assets/icons/ui-lock.svg); }
.i-cookie   { --icon: url(/assets/icons/ui-cookie.svg); }   /* lastna risba v geometriji lancip (paket nima piskotka) */
.i-price    { --icon: url(/assets/icons/ui-price.svg); }     /* cenik */
.i-buy      { --icon: url(/assets/icons/ui-buy.svg); }       /* nakup tock */
.i-promo    { --icon: url(/assets/icons/ui-promo.svg); }     /* promo koda (kupon) */
.i-history  { --icon: url(/assets/icons/ui-history.svg); }   /* zgodovina transakcij */
.i-pdf      { --icon: url(/assets/icons/ui-pdf.svg); }       /* prenos PDF; datoteka v seznamu prilog */
.i-view     { --icon: url(/assets/icons/ui-view.svg); }      /* ogled objave */
.i-delete   { --icon: url(/assets/icons/ui-delete.svg); }    /* odstrani / izbrisi */
.i-hourglass { --icon: url(/assets/icons/ui-hourglass.svg); } /* cakanje, rok, priprava mnenja */
.i-chat     { --icon: url(/assets/icons/ui-chat.svg); }      /* odgovor */
.i-share    { --icon: url(/assets/icons/ui-share.svg); }     /* poslji povezavo */
.i-idea     { --icon: url(/assets/icons/ui-idea.svg); }      /* namig */
.i-warning  { --icon: url(/assets/icons/ui-warning.svg); }   /* opozorilo, pritozba */
.i-coffee   { --icon: url(/assets/icons/ui-coffee.svg); }    /* napitnina; lastna risba v geometriji lancip */
.i-attach   { --icon: url(/assets/icons/ui-attach.svg); }    /* priloge; lastna risba v geometriji lancip */
.i-mediator-1 { --icon: url(/assets/icons/mediator-osnovni.svg); }
.i-mediator-2 { --icon: url(/assets/icons/mediator-prijateljski.svg); }
.i-mediator-3 { --icon: url(/assets/icons/mediator-profesionalni.svg); }

/* ===== Jantarna (oranzna) kot poudarek =====
   --c-amber = blagovna oranzna #f39237 (theme.css --warning) za obrobe, crte in ikone v obeh temah.
   --c-amber-text = DROBNO besedilo: v svetlem temnejsi jantar #8f4700, ker #f39237 na svetli podlagi
   pade pod AA (na kartici prijave izmerjeno najmanj 1.89). #8f4700 na steklenih karticah login/404
   (1280 in 390 px) izmerjeno najmanj 5.52; na #fff 6.84, na #E3F0FB 5.90. V temnem ostane #f39237:
   na istih karticah izmerjeno najmanj 7.06 (na #0B1526 7.81). */
:root { --c-amber: #f39237; --c-amber-text: #8f4700; }
:root[data-theme="dark"] { --c-amber-text: #f39237; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-amber-text: #f39237; } }
/* Varovalo prevoda (skrito besedilo do prevoda) je v theme.css, ker velja za vse strani. */

/* ===== PRIMER: gradniki, skupni payment.html (stran A) in response.html (stran B) =====
   Veriga dogodkov (#history), mnenje, pritozba, odstevalnik roka, napitnina, PDF, povezava za
   soudelezenca, izbrani mediator in gumbi pritozbe, priloge. Strani imata le se svoja pravila postavitve. */

/* Dogodek verige: steklena .card z oznako (.card-label + ikona) in besedilom. Besedilo iz API ohrani
   prelome (pre-wrap) in se lomi tudi v dolgih besedah; barva besedila, ne drugotna (dolgo branje). */
.card-label .icon { margin-right: 6px; }
.ev-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.65; color: var(--c-text); }
.ev-text strong { font-weight: 600; }            /* Inter je gostovan do 600; 700 bi brskalnik ponaredil */
/* Mnenje: modra crta levo; naslovi iz markdowna (.op-h iz md.js) v Space Grotesk. */
.ev-opinion { border-left: 3px solid var(--c-blue); }
.ev-opinion .ev-text { font-size: 0.98rem; line-height: 1.7; }
.ev-text .op-h { font-family: var(--f-head); font-weight: 600; font-size: 1.08em; color: var(--c-text); }
/* Pritozba: jantarna samo kot crta levo (poudarek), besedilo v barvi besedila. */
.ev-appeal { border-left: 3px solid var(--c-amber); }
.ev-appeal .card-label .icon { --icon-c: var(--c-amber-text); }
/* Cakanje / priprava mnenja: sredinsko, krepko, ikona pescene ure v jantarni za drobno besedilo. */
.ev-wait { text-align: center; font-weight: 600; color: var(--c-text); }
.ev-wait .icon { margin-right: 6px; --icon-c: var(--c-amber-text); }

/* Besedilo, ki ga je uporabnik pravkar vpisal (predogled pritozbe): podlaga polja, jantarna crta. */
.quote { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; background: var(--c-field); border: 1px solid var(--c-field-border);
    border-left: 3px solid var(--c-amber); border-radius: var(--radius-sm); font-size: 0.93rem; line-height: 1.6; color: var(--c-text); }

/* Odstevalnik roka: steklo, jantarna crta levo, mono stevilke. Ikona pescene ure je ::before, ker JS
   besedilo vsakih 1 s zapise s textContent (renderDeadline); barva --c-amber-text (graficni AA 3:1). */
.deadline { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; padding: 10px 14px;
    background: var(--c-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--c-card-border); border-left: 3px solid var(--c-amber); border-radius: var(--radius-sm);
    font-family: var(--f-mono); font-size: 0.85rem; font-weight: 500; color: var(--c-text); text-align: center; }
.deadline::before { content: ''; flex: none; width: 1.15em; height: 1.15em; background-color: var(--c-amber-text);
    -webkit-mask: url(/assets/icons/ui-hourglass.svg) center / contain no-repeat; mask: url(/assets/icons/ui-hourglass.svg) center / contain no-repeat; }

/* Stanje primera (response.html): mono "tableta"; v teku jantarna (drobno -> --c-amber-text), obdelan zelena. */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; margin-bottom: 18px; border-radius: 999px;
    border: 1px solid var(--c-amber); background: var(--c-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font-family: var(--f-mono); font-size: 0.76rem; font-weight: 500; color: var(--c-amber-text); }
.status-pill .icon { --icon-c: currentColor; }
.status-pill.judged { color: var(--c-ok); border-color: var(--c-ok); }

/* Napitnina: steklena kartica z jantarno crto (poudarek); gumb je navaden .btn-open z ikono skodelice. */
.tip { text-align: center; border-left: 3px solid var(--c-amber); }
.tip-q { font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; color: var(--c-text); margin-bottom: 6px; }
.tip-hint { font-size: 0.88rem; color: var(--c-text); margin-bottom: 12px; }
.tip .btn-open { display: inline-flex; align-items: center; gap: 8px; }
.tip .btn-open .icon { --icon-c: currentColor; }
.tip-msg { margin-top: 10px; font-size: 0.85rem; color: var(--c-red-text); }
.tip-msg a { color: var(--c-blue-text); }
.tip-thanks { font-size: 1.05rem; font-weight: 600; color: var(--c-ok); }
.tip-thanks .icon { margin-right: 6px; --icon-c: currentColor; }

/* Vrstica dejanj pod verigo (PDF): drugotni gumb z ikono. Gumb lezi zunaj kartice na sliki ozadja,
   zato stekleno podlago kartice (brez nje ikona na liniji slike izmerjena 1.67 < 3). */
.case-actions-row { text-align: center; margin: 4px 0 14px; }
.case-actions-row .btn-secondary { background: var(--c-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn-secondary.with-icon { display: inline-flex; align-items: center; gap: 8px; }

/* Povezava za soudelezenca: polje z mono povezavo + Kopiraj; koda primera kot mono znacka. */
.link-box { padding: 14px; background: var(--c-field); border: 1px solid var(--c-field-border); border-radius: var(--radius-sm); }
.link-label { font-size: 0.82rem; font-weight: 600; color: var(--c-ok); }
.link-row { display: flex; gap: 8px; margin-top: 8px; }
.link-text { flex: 1; min-width: 0; padding: 9px 12px; background: var(--c-card); border: 1px solid var(--c-field-border); border-radius: 8px;
    font-family: var(--f-mono); font-size: 0.82rem; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-chip { display: inline-block; margin-top: 6px; padding: 3px 10px; border: 1px solid var(--c-field-border); border-radius: 8px;
    font-family: var(--f-mono); font-size: 0.88rem; font-weight: 500; color: var(--c-text); background: var(--c-card); }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: var(--c-text); margin-top: 10px; line-height: 1.5; }
.note .icon { margin-top: 1px; }

/* Mediator (izbrani na payment, gumbi pritozbe): kot na index -- okvir 46 px z enobarvno ikono (.icon-ill),
   vsi trije enaki, brez barvnega poudarka po stopnji. .med je vrstica, button.med je gumb. */
.med { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; text-align: left;
    background: var(--c-field); border: 1px solid var(--c-card-border); border-radius: var(--radius-sm);
    font-family: inherit; color: var(--c-text); }
button.med { cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
button.med:hover { border-color: var(--c-blue); transform: translateY(-1px); }
.med-ico { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-field-border); border-radius: var(--radius-sm); background: var(--c-card); }
.med-info { flex: 1; min-width: 0; }
.med-name { display: block; font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: var(--c-text); }
.med-desc { display: block; font-size: 0.8rem; color: var(--c-muted); margin-top: 2px; line-height: 1.4; }

/* Okno pritozbe v kartici mnenja: podlaga polja, crtkana obroba. Gumba mediatorjev drug pod drugim. */
.appeal-box { display: none; margin-top: 4px; padding: 18px; background: var(--c-field); border: 1px dashed var(--c-field-border); border-radius: var(--radius-sm); }
.appeal-title { font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: var(--c-text); margin-bottom: 12px; }
.appeal-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ta-sm { height: 120px; }
.char-counter { text-align: right; margin-top: 4px; color: var(--c-muted); }

/* Priloge: izbirnik (naslov s sponko, namig, polje) in seznam, ki ga izrise i18n.js (_izrisiPriloge). */
.att-block { margin-top: 10px; }
.att-title { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--c-text); margin-bottom: 4px; }
.att-hint { font-size: 0.8rem; color: var(--c-muted); margin-bottom: 6px; }
.att-block input[type=file] { font-family: inherit; font-size: 0.85rem; color: var(--c-text); max-width: 100%; }
.att-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; margin-top: 4px;
    background: var(--c-card); border: 1px solid var(--c-field-border); border-radius: 8px; font-size: 0.85rem; color: var(--c-text); }
.att-row > span { min-width: 0; overflow-wrap: anywhere; }
.att-row .icon-btn { width: 28px; height: 28px; }
.att-row .icon-btn .icon { width: 16px; height: 16px; }
.att-rej { font-size: 0.85rem; color: var(--c-red-text); margin-top: 4px; }
.att-sum { font-family: var(--f-mono); font-size: 0.78rem; color: var(--c-muted); margin-top: 6px; }

/* Skrito (JS preklaplja razred). Na koncu datoteke, da premaga display gradnikov z enako specificnostjo. */
.hidden { display: none; }
.fade { animation: jc-fade 0.5s ease; }
@keyframes jc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }