:root {
  --ozadje: #0E1614;
  --ploskev: #17221F;
  --ploskev2: #1F2D28;
  --crte: #2C3C36;
  --crke: #ECF1EC;
  --sivo: #93A79F;
  --zelena: #8BD05F;
  --zelena-tema: #2A4326;
  --jantar: #E9A94A;
  /* vrstica, ki je prišla na novo (od zadnjega ogleda) */
  --novo: #2E3B2C;
  --rdeca: #E4694F;
  --modra: #63B3D8;
  --senca: 0 6px 24px rgba(0,0,0,.35);
  --r: 18px;
  /* barve vrstic domacih narocil - iste kot v programu (nocna tema) */
  --n-odprto: #5A2A26; --n-konec: #2C4A21;
  --n-nujno: #7E6C0E;  --n-zamuda: #8A4F0C;
  --n-rdeca: #612925;  --n-oranzna: #5E3E1C; --n-rumena: #54491A;
  --n-zelena: #2E4C24; --n-modra: #243F5A;   --n-vijolicna: #3D2E55;
  --n-siva: #33372F;   --n-rok-nujno: #FFF7C9;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="temno"]) {
    --ozadje: #F3F5F1;
    --ploskev: #FFFFFF;
    --ploskev2: #EAEFE8;
    --crte: #DCE3DA;
    --crke: #16211D;
    --sivo: #61726B;
    --zelena: #3F8F2E;
    --zelena-tema: #E1F0D5;
    --jantar: #B77712;
    --novo: #EAF3E2;
    --rdeca: #C2452C;
    --modra: #256C8F;
    --senca: 0 4px 18px rgba(20,40,30,.10);
    --n-odprto: #F3C9C4; --n-konec: #CDE6C0;
    --n-nujno: #FFE84A;  --n-zamuda: #FFB627;
    --n-rdeca: #F1B0AB;  --n-oranzna: #F7CFA4; --n-rumena: #F4E9A8;
    --n-zelena: #C4E4B4; --n-modra: #B9D3EE;   --n-vijolicna: #D9C6EC;
    --n-siva: #DEDED6;   --n-rok-nujno: #8A6A00;
  }
}
:root[data-tema="svetlo"] {
  --ozadje: #F3F5F1; --ploskev: #FFFFFF; --ploskev2: #EAEFE8;
  --crte: #DCE3DA; --crke: #16211D; --sivo: #61726B;
  --zelena: #3F8F2E; --zelena-tema: #E1F0D5; --jantar: #B77712;
  --novo: #EAF3E2;
  --rdeca: #C2452C; --modra: #256C8F; --senca: 0 4px 18px rgba(20,40,30,.10);
  --n-odprto: #F3C9C4; --n-konec: #CDE6C0;
  --n-nujno: #FFE84A;  --n-zamuda: #FFB627;
  --n-rdeca: #F1B0AB;  --n-oranzna: #F7CFA4; --n-rumena: #F4E9A8;
  --n-zelena: #C4E4B4; --n-modra: #B9D3EE;   --n-vijolicna: #D9C6EC;
  --n-siva: #DEDED6;   --n-rok-nujno: #8A6A00;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--ozadje);
  color: var(--crke);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior-y: contain;
}

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

/* -- ogrodje ------------------------------------------------------------ */
.lupina { min-height: 100dvh; display: flex; flex-direction: column; }

.vrh {
  position: sticky; top: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: color-mix(in srgb, var(--ozadje) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--crte);
  display: flex; align-items: center; gap: 12px;
}
.vrh h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.2px; }
.vrh .pod { margin: 0; font-size: 12px; color: var(--sivo); }
.vrh .desno { margin-left: auto; display: flex; gap: 8px; }

.nazaj {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--crte);
  background: var(--ploskev); display: grid; place-items: center; font-size: 18px;
}

.vsebina { flex: 1; padding: 16px 16px 104px; }
.vsebina > * + * { margin-top: 14px; }
/* Ovoji znotraj vsebine (npr. izbira sezone pod Več) imajo isti razmik,
   sicer naslov odseka (margin -4px) zleze pod gumbe (4.91.1). */
.samo-ozko > * + * { margin-top: 14px; }

/* -- spodnja vrstica ---------------------------------------------------- */
.dno {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px);
  background: color-mix(in srgb, var(--ploskev) 92%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--crte);
}
.dno button {
  background: none; border: 0; padding: 7px 2px 5px; border-radius: 14px;
  display: grid; gap: 2px; justify-items: center; color: var(--sivo);
  /* Napis je drobcen, ker nosi pomen IKONA - Urh: »spodnji gumbi so zelo
     majhni zaradi teksta«. */
  font-size: clamp(9px, 2.4vw, 10.5px); font-weight: 550;
  min-width: 0; overflow: hidden;
}
/* Risana ikona: velika in pri vseh gumbih enako velika. */
.dno button .ikona {
  width: 27px; height: 27px; display: block;
}
.dno button .znak {          /* zasilno, ce ikone za razdelek se ni */
  font-size: clamp(17px, 5vw, 21px); line-height: 1;
}
/* Napis se raje skrajsa, kot da bi razbil vrstico. */
.dno button .napis {
  display: block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; line-height: 1.15;
}
/* Ko je gumbov vec kot sest, na ozkem telefonu napisi odpadejo: raje cela
   in lepo vidna ikona kot tri crke in tri pikice. Ime pove aria-label,
   na siroko pa se napisi vrnejo sami. */
@media (max-width: 460px) {
  .dno.veliko button .napis { display: none; }
  .dno.veliko button .ikona { width: 29px; height: 29px; }
  .dno.veliko button { padding: 11px 2px; }
}
.dno button[aria-current="page"] { color: var(--zelena); background: var(--zelena-tema); }

/* -- kartice ------------------------------------------------------------ */
.kartica {
  background: var(--ploskev); border: 1px solid var(--crte);
  border-radius: var(--r); padding: 16px; box-shadow: var(--senca);
}
.kartica.tesno { padding: 0; overflow: hidden; }

/* Agrolit future po poslovalnicah (4.105.2): kvadratki kot na TV. */
.fut-kartice {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
/* Na telefonu dva kvadratka v vrsti, da je pregled na enem zaslonu. */
@media (max-width: 520px) {
  .fut-kartice { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fut-kartica { padding: 10px 10px; border-left-width: 5px; }
  .fut-kartica .ime { font-size: 15px; }
  .fut-kartica .oz { font-size: 9px; letter-spacing: 0; }
  .fut-kartica .par .st { font-size: 14px; }
  .fut-kartica .glavna { font-size: 23px; }
}
.fut-kartica {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left;
  background: var(--ploskev); border: 1px solid var(--crte); border-left: 6px solid var(--crte);
  border-radius: var(--r); padding: 12px 14px; box-shadow: var(--senca);
  color: var(--crke); font: inherit; cursor: pointer;
}
.fut-kartica:hover { border-color: var(--zelena); }
.fut-kartica.izbrana { outline: 2px solid var(--zelena); outline-offset: 1px; }
.fut-kartica.caka { border-left-color: var(--jantar);
  background: color-mix(in srgb, var(--jantar) 8%, var(--ploskev)); }
.fut-kartica.manjka { border-left-color: var(--rdeca);
  background: color-mix(in srgb, var(--rdeca) 8%, var(--ploskev)); }
.fut-kartica.koncano { border-left-color: var(--zelena); }
.fut-kartica .ime { font-size: 17px; font-weight: 800; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fut-kartica .kolko { font-size: 12.5px; color: var(--sivo); }
.fut-kartica .kolko b { color: var(--jantar); }
.fut-kartica .oz { display: block; font-size: 10.5px; font-weight: 700; color: var(--sivo);
  letter-spacing: .06em; text-transform: uppercase; }
.fut-kartica .par { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.fut-kartica .par .st { font-size: 16px; font-weight: 700; white-space: nowrap; }
.fut-kartica .par .desno { text-align: right; }
.fut-kartica .loci { color: var(--sivo); padding: 0 2px; font-weight: 500; }
.fut-kartica .glavna { margin-top: 6px; font-size: 28px; font-weight: 800; line-height: 1.05;
  color: var(--crke); white-space: nowrap; }
.fut-kartica.caka .glavna { color: var(--jantar); }
.fut-kartica .glavna .oz { margin-bottom: 2px; }
.fut-kartica .par .st.minus { color: var(--rdeca); }
.kartica h2 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }

.naslov-odseka {
  margin: 22px 0 -4px; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--sivo);
}
.naslov-odseka .pomoc { margin-left: 6px; vertical-align: -2px; }

/* Krogec z vprasajem: pove, kaj nastavitev naredi. Dovolj velik, da ga
   zadenes s prstom (44 px s prozornim robom), a na pogled majhen. */
.pomoc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--crte); background: var(--ploskev);
  color: var(--sivo); font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer; flex: 0 0 auto; position: relative;
}
.pomoc::after {
  content: ''; position: absolute; top: -11px; left: -11px;
  right: -11px; bottom: -11px;
}
.pomoc:hover, .pomoc:focus-visible {
  border-color: var(--zelena); color: var(--zelena);
}

/* Oznaka nad vrsto cipov - na ozkem zaslonu ne sme stiskati cipov ob rob. */
.oz-vrstica {
  display: flex; align-items: center; gap: 2px; color: var(--sivo);
  font-size: 13px; margin-bottom: 8px;
}

/* Vrstica nastavitve: ime, pod njim pojasnilo, desno vprasaj in pusciica. */
.seznam li .pomoc { margin-left: 8px; }
.polje .pojasnilo, .pojasnilo {
  display: block; color: var(--sivo); font-size: 12.5px; line-height: 1.45;
  margin-top: 4px; font-weight: 400;
}
.okno .besedilo-okna.pojasni { white-space: pre-line; text-align: left; }

.mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Ce je ploscic liho stevilo, zadnja ne sme ostati sama na levi polovici -
   raztegne se cez celo sirino. Velja samo pri DVEH stolpcih (telefon); na
   sirokih zaslonih so stolpci trije ali stirje in tam bi bilo to narobe. */
@media (max-width: 699px) {
  .mreza > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ploscica {
  background: var(--ploskev); border: 1px solid var(--crte);
  border-radius: var(--r); padding: 16px 14px; text-align: left;
  display: grid; gap: 6px; box-shadow: var(--senca); position: relative;
}
.ploscica .znak { font-size: 26px; line-height: 1; }
/* Ista risana ikona kot v spodnji vrstici - da je plošcica in gumb spodaj
   ocitno ista stvar. V barvi programa, ker je tu prostora dovolj. */
.ploscica .ikona { width: 28px; height: 28px; color: var(--zelena); }
.ploscica .ime { font-weight: 620; }
.ploscica .opis { font-size: 12px; color: var(--sivo); }
.ploscica:active { transform: scale(.98); }

.stevec {
  position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px; background: var(--rdeca); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

/* Stevilke na vrhu zaslona: VSE v eni vrsti, ne glede na to, ali jih je
   tri ali stiri. Prej je bila mreza trdno tristolpicna in cetrto polje je
   padlo v novo vrsto, samo na levi - videti je bilo kot napaka. */
.stat { display: flex; gap: 8px; }
.stat > div {
  flex: 1 1 0; min-width: 0;
  background: var(--ploskev); border: 1px solid var(--crte);
  border-radius: 14px; padding: 11px 6px; text-align: center;
}
.stat .st {
  font-size: 19px; font-weight: 700; letter-spacing: -.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat .oz { font-size: 10.5px; line-height: 1.25; color: var(--sivo); }
/* Štiri ploščice (zaslon delavca): na ozkem zaslonu dve in dve. */
@media (max-width: 559px) {
  .stat.stiri { flex-wrap: wrap; }
  .stat.stiri > div { flex: 1 1 calc(50% - 4px); }
}
/* Drobna vrstica pod ploščico: kile pod gajbicami, cena na kg pod zneskom. */
.stat .pod-st .drobno { font-size: 10px; font-weight: 500; opacity: .8; }
/* Ploščica, ki jo je mogoče klikniti (popravek cene). */
.stat .klikljiv { cursor: pointer; }
.stat .klikljiv:active { transform: scale(.98); }
.stat .svincnik { opacity: .55; font-size: 10px; }
/* -- Pregled dela: dan se razpre na mestu ------------------------------- */
.dnevi-dela li.dan-dela { display: block; padding: 0; }
.glava-dneva {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; color: inherit; font: inherit;
  text-align: left; padding: 13px 16px; cursor: pointer;
}
.glava-dneva:active { background: var(--ploskev2); }
.glava-dneva .glavno { flex: 1; min-width: 0; }
.glava-dneva .ime { display: block; font-weight: 570; }
.glava-dneva .pod { display: block; font-size: 12.5px; color: var(--sivo); }
.glava-dneva .pusca {
  font-size: 20px; color: var(--sivo); transition: transform .15s ease;
}
.dan-dela.odprt .glava-dneva .pusca { transform: rotate(90deg); }
/* zaprt dan: imena na kratko; odprt: cel seznam vpisov */
.dan-dela .vpisi-dneva { display: none; padding: 0 10px 10px; }
.dan-dela.odprt .vpisi-dneva { display: block; }
.dan-dela.odprt .glava-dneva .imena-kratko { display: none; }
/* Zložljiv sklop (npr. Delo zadnjih 7 dni na prvi strani). */
.sklop {
  background: var(--ploskev); border: 1px solid var(--crte);
  border-radius: var(--r); margin-top: 14px; overflow: hidden;
}
.glava-sklopa {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; color: inherit; font: inherit;
  text-align: left; padding: 13px 16px; cursor: pointer;
}
.glava-sklopa:active { background: var(--ploskev2); }
.glava-sklopa .glavno { flex: 1; min-width: 0; }
.glava-sklopa .ime { display: block; font-weight: 620; }
.glava-sklopa .pod { display: block; font-size: 12.5px; color: var(--sivo); }
.glava-sklopa .pusca {
  font-size: 20px; color: var(--sivo); transition: transform .15s ease;
}
.sklop.odprt .glava-sklopa .pusca { transform: rotate(90deg); }
.sklop .telo-sklopa { display: none; padding: 0 10px 12px; }
.sklop.odprt .telo-sklopa { display: block; }
.sklop .telo-sklopa .kartica { margin: 0; }

/* Na prvi strani je dan vedno odprt in brez glave-gumba. */
.zadnje-delo li.dan-dela { padding: 12px 14px; }
.zadnje-delo .glavno .ime { display: block; font-weight: 570; }
.zadnje-delo .glavno .pod { display: block; font-size: 12.5px; color: var(--sivo); }
.zadnje-delo .vpisi-dneva { padding: 4px 0 0; }

/* Vpis dela: besedilo levo, velik gumb za popravek desno - da se ga da
   zadeti s prstom. */
.vpis-dela {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-top: 1px solid var(--crte);
}
.vpis-dela .besedilo { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.vpis-dela .kdaj {
  display: inline-block; min-width: 74px; padding-right: 6px;
  color: var(--sivo); font-weight: 600;
}
.uredi-delo {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  background: var(--ploskev2); border: 1px solid var(--crte);
  color: var(--zelena); font-size: 19px; line-height: 1; cursor: pointer;
}
.uredi-delo:active { background: var(--zelena-tema); }
/* Izbris vpisa dela - enak gumb kot svincnik, samo rdec, da se na prvi
   pogled loci od urejanja. Sam izbris se vedno zahteva se kljukico. */
.brisi-delo {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  background: var(--ploskev2); border: 1px solid var(--crte);
  color: var(--rdeca); font-size: 19px; line-height: 1; cursor: pointer;
  margin-left: 6px;
}
.brisi-delo:active { background: var(--rdeca); color: #fff; }
/* Kljukica z besedilom ob njej - v oknu za potrditev izbrisa in na zaslonu
   za prijavo v Google. Velika, da se je na telefonu ne zgresi. */
.kljukica-potrditve {
  display: flex; gap: 10px; align-items: center; margin: 12px 0 0;
  font-size: 13.5px; line-height: 1.4; color: var(--crke); cursor: pointer;
}
.kljukica-potrditve input { width: 22px; height: 22px; flex: 0 0 auto; }
.okno .kljukica-potrditve {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0;
  font-size: 13.5px; line-height: 1.4; color: var(--crke); cursor: pointer;
}
.okno .kljukica-potrditve input { width: 22px; height: 22px; flex: 0 0 auto; }
.gumb.nevarni {
  background: var(--rdeca); border-color: var(--rdeca); color: #fff;
}
.stat .pod-st {
  font-size: 11px; line-height: 1.3; margin-top: 3px; font-weight: 600;
  /* sme se preliti v dve vrsti - »brez DDV 103,04 €« je bilo prej odrezano */
  color: var(--sivo); overflow-wrap: anywhere;
}
/* Vrstica z evri: zadnja ploščica je vsota, zato izstopa. */
.stat.denar { margin-top: 8px; }
.stat.denar .st { font-size: 18px; }
.stat.denar .skupaj {
  background: var(--zelena-tema); border-color: var(--zelena);
}
.stat.denar .skupaj .st { color: var(--zelena); font-size: 20px; }
.stat.denar .skupaj .oz { color: var(--zelena); font-weight: 700; }
.stat.denar .skupaj .pod-st { color: var(--zelena); opacity: .85; }
/* Vsota v vrsti ploščic (informativno tehtanje): zadnja izstopa, da se
   takoj vidi, koliko je SKUPAJ. */
.stat .skupaj { background: var(--zelena-tema); border-color: var(--zelena); }
.stat .skupaj .st, .stat .skupaj .oz { color: var(--zelena); }
.stat .skupaj .oz { font-weight: 700; }
.stat .skupaj .pod-st { color: var(--zelena); opacity: .85; }
/* Mirno pojasnilo na vrhu zaslona - ne opozorilo, samo pojasnilo. */
.kartica.opozorilo-tiho {
  border-left: 3px solid var(--zelena); background: var(--ploskev);
}

/* -- seznami ------------------------------------------------------------ */
.seznam { list-style: none; margin: 0; padding: 0; }
.seznam li {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--crte);
}
.seznam li:last-child { border-bottom: 0; }
.seznam .glavno { flex: 1; min-width: 0; }
/* ime in podnapis sta vsak v svoji vrstici - brez tega se zlepita skupaj */
.seznam .ime, .seznam .pod { display: block; }
.seznam .ime { font-weight: 570; }
.seznam .pod { font-size: 12.5px; color: var(--sivo); }
.seznam .ime .znacka { display: inline-block; }
.seznam .desno { text-align: right; white-space: nowrap; }
/* Podatkovna vrstica (ime levo, vrednost desno): dolga vrednost se mora
   LOMITI in ne sme zlesti cez ime - Urh je pri opombi videl prekrito
   besedilo. Zelo dolge vrednosti gredo v svojo vrstico pod imenom. */
.seznam.podatki li { align-items: flex-start; }
.seznam.podatki .desno {
  white-space: normal; overflow-wrap: anywhere; max-width: 62%;
}
.seznam.podatki li.dolga { display: block; }
.seznam.podatki li.dolga .desno {
  display: block; text-align: left; max-width: 100%; margin-top: 3px;
}
/* Opozorila pri računih so rdeča, ne bela - da se jih opazi. */
.seznam.opozorila .ime { color: var(--rdeca); }
.seznam.opozorila .pod { color: var(--rdeca); opacity: .85; }
/* Razlaga pod kratkim napisom je vedno oranžna - Urh: »barva te opombe
   naj bo oranžna, da se vidi«. */
.seznam.opozorila .pod.opomba { color: var(--jantar); opacity: 1; }
/* Čakajoči uvoz ni napaka, ampak odločitev - jantarno, ne rdeče. */
.seznam.opozorila li.caka .ime, .seznam.opozorila li.caka .pod {
  color: var(--jantar);
}
.seznam .desno .st { font-weight: 650; }
.seznam li[data-klik]:active { background: var(--ploskev2); }

.znacka {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 650; background: var(--ploskev2); color: var(--sivo);
}
.znacka.zelena { background: var(--zelena-tema); color: var(--zelena); }
/* Moj meni: gumbi so vecji (s prstom se jih mora dati zadeti), puscica na
   robu seznama pa je bleda - ne onemogocena, da ni videti pokvarjeno. */
.seznam.meni-izbira .desno { display: flex; gap: 6px; align-items: center; }
.seznam.meni-izbira .mali { padding: 9px 12px; font-size: 13px; }
.seznam.meni-izbira .mali[data-ni="1"] { opacity: .3; }
/* Dobavnica je bila poslana po e-posti - napisano, ne kljukica (Urh). */
b.poslano { color: var(--zelena); font-weight: 800; letter-spacing: .02em; }
.znacka.rdeca { background: color-mix(in srgb, var(--rdeca) 18%, transparent); color: var(--rdeca); }
.znacka.jantar { background: color-mix(in srgb, var(--jantar) 18%, transparent); color: var(--jantar); }

/* -- gumbi -------------------------------------------------------------- */
.gumb {
  border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 650;
  background: var(--zelena); color: #0B1408; width: 100%;
}
.gumb.tih { background: var(--ploskev2); color: var(--crke); border: 1px solid var(--crte); }
.gumb.rob { background: transparent; border: 1px solid var(--crte); color: var(--crke); }
.gumb.rdec { background: var(--rdeca); color: #fff; }
/* Tih gumb za nevarno dejanje (izprazni koš, zbriši za vedno): obroba in
   črke rdeče, ozadje pa mirno - da se loči od navadnega, a ne kriči. */
.gumb.tih.rdec {
  background: var(--ploskev2); color: var(--rdeca); border-color: var(--rdeca);
}
/* Zastavica v seznamu pošte. Rdeča (Urh, 19. 9. 2026) - da takoj pade v oči;
   jantarna se je preveč zlila z ozadjem. */
.seznam .zastavica { color: var(--rdeca); }
.gumb:active { opacity: .85; }
.gumb[disabled] { opacity: .5; }
/* Skrito je skrito. Brez tega vsak nas 'display' premaga privzeto pravilo
   brskalnika za [hidden] - in polja, ki naj se ne vidijo, ostanejo na
   zaslonu (npr. Narocilo in Gratis, ko skeniras na dobavnico). */
[hidden] { display: none !important; }

textarea.veliko {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  border: 1px solid var(--crte); border-radius: 12px; padding: 10px 12px;
  background: var(--ploskev2); color: var(--crke); margin: 8px 0 4px;
}

.znak-app {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  align-self: center;
}
.znak-app-gumb { display: flex; flex: none; align-self: center; border-radius: 11px; }
/* logo visok kot naslov s podnapisom (Urh: »naj pare tekstu«) */
.znak-app-gumb .znak-app { width: 42px; height: 42px; border-radius: 11px; }
.znak-app-gumb:active { transform: scale(.94); }
/* Naslov zaslona: na ozkem zaslonu manjsi in tesen, da ne zasede pol
   glave, ko ga gumbi desno potisnejo v dve vrsti. */
.vrh > div:not(.desno) { min-width: 0; flex: 1 1 auto; }
.vrh h1 { line-height: 1.15; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .vrh { gap: 10px; }
  .vrh h1 { font-size: 17px; }
  .gumb-novo { padding: 0 11px; }
}

/* DOMACA NAROCILA - strnjeni filtri (4.104.1). Urh: »ta del je prevec
   nametan«. Namesto treh vrst cipov: kraj prevzema v eni drsni vrsti,
   stanje in razvrstitev skupaj v drugi. */
.filtri-narocil { display: grid; gap: 8px; margin-bottom: 10px; }
.filtri-narocil .cipi { gap: 6px; }
.filtri-narocil .cip { padding: 6px 11px; font-size: 12.5px; }
.filtri-narocil .vrsta { display: flex; align-items: center; gap: 8px; }
.segment {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--ploskev2); border: 1px solid var(--crte); flex: none;
}
.segment button {
  border: 0; background: none; color: var(--sivo); border-radius: 999px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 650; white-space: nowrap;
}
.segment button[aria-pressed="true"] { background: var(--zelena-tema); color: var(--zelena); }
/* Izbira načina pri pošiljanju več računov (4.106.1): dve enaki polovici,
   napis se lahko prelomi - okno ne sme postati širše od zaslona. */
.segment.nacin-posiljanja { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.segment.nacin-posiljanja button { white-space: normal; line-height: 1.2; min-width: 0; }
/* 4.109.0: zavihki Računi / Predračuni / Dobropisi - čez vso širino */
.segment.racuni-vrste { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.segment.racuni-vrste button { font-size: 14px; padding: 9px 6px; min-width: 0; }
.segment.racuni-vrste small { opacity: .7; font-weight: 600; }
.cip.razvrsti-gumb { margin-left: auto; flex: none; }
.filtri-narocil + .vrstica-iskanja { margin-top: 0; }
.filtri-narocil .vsota-dostave { margin: 0; }

/* Gumbi drug ob drugem: dva v vrsti, in ce jih je liho stevilo, se zadnji
   raztegne cez celo sirino - nikoli ne ostane na pol zaslona. */
.gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gumbi > * { width: 100%; }
@media (max-width: 959px) {
  .gumbi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.mali {
  border: 1px solid var(--crte); background: var(--ploskev2); color: var(--crke);
  border-radius: 11px; padding: 8px 12px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
}
.mali.zelen { background: var(--zelena); border-color: var(--zelena); color: #0B1408; }
.mali.rdec { background: var(--rdeca); border-color: var(--rdeca); color: #fff; }

/* -- domaca narocila: barve vrstic in opozorila -------------------------- */
/* Iste barve kot na racunalniku (svetla tema), spodaj temne razlicice. */
.opozorilo-narocil {
  border: 1px solid color-mix(in srgb, var(--jantar) 45%, transparent);
  background: color-mix(in srgb, var(--jantar) 14%, transparent);
  color: var(--jantar); border-radius: 13px; padding: 11px 14px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 10px;
}
.opozorilo-narocil.zamuda {
  border-color: color-mix(in srgb, var(--rdeca) 45%, transparent);
  background: color-mix(in srgb, var(--rdeca) 14%, transparent);
  color: var(--rdeca);
}
.vrstica-iskanja { display: flex; gap: 8px; margin-bottom: 10px; }
.vrstica-iskanja input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px;
  border: 1px solid var(--crte); border-radius: 12px; padding: 10px 12px;
  background: var(--ploskev); color: var(--crke);
}
/* Napis levo, polje desno, vse v eni vrsti cez celo sirino - prej je bilo
   ozko polje samo na levi in je bilo videti, kot da manjka pol vrstice. */
label.polje.vrstica-opozorila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  background: var(--ploskev); border: 1px solid var(--crte);
  border-radius: 14px; padding: 8px 12px;
}
label.polje.vrstica-opozorila > span {
  display: block; margin: 0; font-size: 13px; color: var(--sivo);
}
label.polje.vrstica-opozorila input {
  width: 84px; flex: 0 0 auto; text-align: center; padding: 8px 10px;
}
.vsote-narocil {
  margin-top: 10px; font-size: 13px; color: var(--sivo); line-height: 1.5;
}
.vsote-narocil b { color: var(--crke); }
.seznam.narocila .rok { font-weight: 700; }
.seznam.narocila .rok.nujno { color: var(--n-rok-nujno); }
.seznam.narocila .rok.zamuda { color: var(--rdeca); }
.seznam.narocila li { border-left: 5px solid transparent; }
.seznam.narocila li.n-odprto { border-left-color: var(--n-odprto); }
.seznam.narocila li.n-konec { border-left-color: var(--n-konec); }
.seznam.narocila li.n-nujno { border-left-color: var(--n-nujno);
  background: color-mix(in srgb, var(--n-nujno) 30%, transparent); }
.seznam.narocila li.n-zamuda { border-left-color: var(--n-zamuda);
  background: color-mix(in srgb, var(--n-zamuda) 30%, transparent); }
.seznam.narocila li.n-rdeca { border-left-color: var(--n-rdeca);
  background: color-mix(in srgb, var(--n-rdeca) 30%, transparent); }
.seznam.narocila li.n-oranzna { border-left-color: var(--n-oranzna);
  background: color-mix(in srgb, var(--n-oranzna) 30%, transparent); }
.seznam.narocila li.n-rumena { border-left-color: var(--n-rumena);
  background: color-mix(in srgb, var(--n-rumena) 30%, transparent); }
.seznam.narocila li.n-zelena { border-left-color: var(--n-zelena);
  background: color-mix(in srgb, var(--n-zelena) 30%, transparent); }
.seznam.narocila li.n-modra { border-left-color: var(--n-modra);
  background: color-mix(in srgb, var(--n-modra) 30%, transparent); }
.seznam.narocila li.n-vijolicna { border-left-color: var(--n-vijolicna);
  background: color-mix(in srgb, var(--n-vijolicna) 30%, transparent); }
.seznam.narocila li.n-siva { border-left-color: var(--n-siva);
  background: color-mix(in srgb, var(--n-siva) 30%, transparent); }

/* -- domača naročila 4.104.0: pasica, zavihka, skupine, dostava ---------- */
.pasica-narocil {
  display: flex; align-items: stretch; gap: 8px; margin: -4px 0 14px;
  border-radius: 14px; background: var(--rdeca); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--rdeca) 35%, transparent);
}
.pasica-narocil button { background: none; border: 0; color: inherit; font: inherit; }
.pasica-glavno {
  flex: 1; min-width: 0; text-align: left; padding: 11px 4px 11px 14px;
  display: grid; gap: 2px;
}
.pasica-glavno b { font-size: 14.5px; }
.pasica-glavno span {
  font-size: 12.5px; opacity: .9; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.pasica-skrij {
  flex: 0 0 auto; padding: 0 14px; font-size: 12px; font-weight: 650;
  border-left: 1px solid rgba(255,255,255,.35) !important; opacity: .9;
}
.dno button { position: relative; }
.znacka-meni {
  position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px;
  height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rdeca);
  color: #fff; font-size: 11px; font-weight: 750; line-height: 18px;
  text-align: center; box-shadow: 0 0 0 2px var(--ploskev);
}
.gumb-novo {
  border: 0; border-radius: 12px; padding: 0 14px; height: 38px;
  background: var(--zelena); color: #0B1408; font-weight: 700;
  font-size: 14px; white-space: nowrap;
}
.zavihki-narocil {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  margin-bottom: 12px; border-radius: 14px; background: var(--ploskev2);
  border: 1px solid var(--crte);
}
.zavihki-narocil button {
  border: 0; border-radius: 11px; padding: 10px 6px; background: none;
  color: var(--sivo); font-weight: 650; font-size: 14px;
}
.zavihki-narocil button[aria-pressed="true"] {
  background: var(--ploskev); color: var(--crke); box-shadow: var(--senca);
}
.st-zav {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 10px; background: var(--crte); color: var(--crke);
  font-size: 12px; line-height: 20px;
}
.st-zav.rdeca { background: var(--rdeca); color: #fff; }
.st-zav.jantar { background: var(--jantar); color: #1b1300; }
.znacka.modra { background: color-mix(in srgb, var(--modra) 20%, transparent); color: var(--modra); }
.znacka.rdeca.polna { background: var(--rdeca); color: #fff; }
.cip.modra[aria-pressed="true"] { background: var(--modra); border-color: var(--modra); color: #fff; }
.vsota-dostave {
  margin: -2px 0 12px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--modra); color: var(--crke);
  background: color-mix(in srgb, var(--modra) 12%, transparent); font-size: 14px;
}
.naslov-odseka .st-skupine {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 9px;
  background: var(--ploskev2); color: var(--sivo); font-size: 11.5px;
}
.naslov-odseka.skupina-reklamacija, .naslov-odseka.skupina-zamuda { color: var(--rdeca); }
.naslov-odseka.skupina-danes { color: var(--jantar); }
/* Velike kartice za reklamacije, zamujena in današnja naročila. */
.seznam.narocila.velike { display: grid; gap: 10px; margin-bottom: 4px; }
.seznam.narocila.velike li.velika {
  border: 1px solid var(--crte); border-left-width: 6px; border-radius: 14px;
  background: var(--ploskev); box-shadow: var(--senca); padding: 14px 14px;
}
.seznam.narocila.velike li.velika .ime { font-size: 16.5px; font-weight: 700; }
.seznam.narocila.velike li.velika.s-reklamacija {
  border-left-color: var(--rdeca);
  background: color-mix(in srgb, var(--rdeca) 10%, var(--ploskev));
}
.seznam.narocila.velike li.velika.s-zamuda {
  border-left-color: var(--rdeca);
  background: color-mix(in srgb, var(--rdeca) 6%, var(--ploskev));
}
.seznam.narocila.velike li.velika.s-danes {
  border-left-color: var(--jantar);
  background: color-mix(in srgb, var(--jantar) 9%, var(--ploskev));
}
/* Moji opomniki: kljukica in besedilo. */
.seznam.opomniki li { gap: 12px; }
.seznam.opomniki .kljukica {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--sivo); background: none; color: #fff;
  font-weight: 800; display: grid; place-items: center;
}
.seznam.opomniki li.konec .kljukica { background: var(--zelena); border-color: var(--zelena); }
.seznam.opomniki li.konec .ime { text-decoration: line-through; color: var(--sivo); }
.seznam.opomniki li.zdaj .kljukica { border-color: var(--jantar); }
.seznam.opomniki li.zdaj .ime { color: var(--jantar); }
/* Izbira »＋ Novo«. */
.okno.izbira-novega { display: grid; gap: 8px; }
.okno.izbira-novega .skupni-blok { border-top: 1px solid var(--crte); padding-top: 10px; margin-top: 4px; }
.okno.izbira-novega .skupni-blok .izbira { width: 100%; }
.vsota-racvec { margin: 10px 0; font-size: 14px; color: var(--sivo); }
.vsota-racvec b { color: var(--crke); }
.seznam.racvec li { padding: 0; }
.seznam.racvec label.rac-izbira { display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; width: 100%; cursor: pointer; }
.okno.izbira-novega .izbira {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--crte);
  background: var(--ploskev2); color: var(--crke); font: inherit;
}
.okno.izbira-novega .izbira .znak { font-size: 22px; width: 28px; text-align: center; }
.okno.izbira-novega .izbira b { display: block; font-size: 15px; }
.okno.izbira-novega .izbira .pod { display: block; font-size: 12.5px; color: var(--sivo); }
/* Obrazec: opomnik nima količin in prevzema. */
#obrazec.je-opomnik .del-kolicine, #obrazec.je-opomnik .skrij-opomnik { display: none; }
.polje.dostava-drugo[hidden] { display: none !important; }

/* -- skeniranje po klasah (stolpci kot na racunalniku) ------------------- */
.dnevi { display: flex; gap: 6px; align-items: center; }
.dnevi input[type="date"] { flex: 1; min-width: 0; }
/* polje za datum DD/MM/LLLL (4.90.0) - glej okrasiDatum() */
.datum-dmy { display: flex; position: relative; align-items: stretch; gap: 6px; min-width: 0; width: 100%; }
.dnevi .datum-dmy { flex: 1; }
label.polje span.datum-dmy, span.datum-dmy {
  display: flex; font-size: inherit; color: inherit; margin: 0;
}
label.polje span.datum-dmy { font-size: 16px; color: var(--crke); }
.datum-dmy .datum-vidno { flex: 1 1 0; min-width: 0; width: 0; }
.datum-dmy .datum-vidno.napacen { border-color: var(--rdeca, #c0392b); }
.datum-dmy .datum-gumb {
  flex: 0 0 auto; border: 1px solid var(--crte); background: var(--ploskev);
  border-radius: 10px; padding: 0 10px; font-size: 16px; cursor: pointer;
}
.datum-dmy .datum-gumb:disabled { opacity: .5; cursor: default; }
.datum-dmy input.datum-skrit {
  position: absolute; right: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.klase { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.klasa-gumb {
  flex: 1; min-width: 120px; border: 1px solid var(--crte);
  background: var(--ploskev2); color: var(--crke); border-radius: 13px;
  padding: 14px 12px; font-size: 15px; font-weight: 700;
}
.klasa-gumb.izbrana {
  background: var(--jantar); border-color: var(--jantar); color: #24170B;
}
.pod.slabo { color: var(--rdeca); font-weight: 600; }
.stolpci { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 700px) { .stolpci { grid-template-columns: 1fr 1fr; } }
.stolpec {
  border: 1px solid var(--crte); border-radius: var(--r);
  background: var(--ploskev); overflow: hidden;
}
.stolpec.izbran { border-color: var(--jantar); }
.stolpec .glava {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 14px; font-weight: 700; border-bottom: 1px solid var(--crte);
  background: var(--ploskev2);
}
.stolpec .glava span { font-weight: 600; font-size: 13px; color: var(--sivo); }
.stolpec .prazen { padding: 14px; color: var(--sivo); font-size: 13px; }
.stolpec .teze {
  padding: 9px 14px; font-size: 12px; color: var(--sivo);
  border-top: 1px solid var(--crte); word-break: break-word;
}
ul.vrstice { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
ul.vrstice .vrstica {
  display: flex; gap: 10px; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--crte); font-size: 14px;
}
ul.vrstice .vrstica:nth-child(odd) { background: var(--ploskev2); }
ul.vrstice .vrstica .st { width: 26px; color: var(--sivo); font-size: 12px; }
ul.vrstice .vrstica .koda { flex: 1; font-family: ui-monospace, monospace; font-size: 13px; }
ul.vrstice .vrstica .teza { font-weight: 700; }
/* Svincnik ob gajbici: povsod, kjer je koda - odpre rocni popravek. */
.pisalo {
  border: 1px solid var(--crte); background: var(--ploskev);
  color: var(--sivo); border-radius: 10px; padding: 4px 9px;
  font-size: 14px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.pisalo:active { background: var(--ploskev2); }
.seznam .desno .pisalo { margin-right: 4px; }
.pisalo.kuverta { font-size: 16px; padding: 3px 9px; color: var(--zelena); }
/* Izbor računov za skupno pošiljanje (4.106.0). */
input.racun-izbor { width: 20px; height: 20px; margin: 0; padding: 0; cursor: pointer;
  accent-color: var(--zelena); }
table.dobavnice-t td.izbor-st, table.dobavnice-t th.izbor-st { width: 34px; text-align: center; }
table.dobavnice-t tr.izbran td { background: color-mix(in srgb, var(--zelena) 12%, transparent); }
.izbor-racunov {
  position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px; margin: 12px 0; padding: 10px 14px;
  border-radius: var(--r); border: 1px solid var(--zelena);
  background: color-mix(in srgb, var(--zelena) 14%, var(--ploskev)); box-shadow: var(--senca);
}
.izbor-racunov[hidden] { display: none; }
.izbor-racunov > span { flex: 1 1 auto; font-size: 14px; }
.izbor-racunov .gumb { width: auto; padding: 10px 14px; }
.pisalo.urh-gumb { font-size: 14px; font-weight: 800; padding: 3px 9px; color: var(--crke); }
.pisalo.urh-gumb.vpisano { color: var(--zelena); }
table.dobavnice-t td .pisalo.urh-gumb { margin: -2px 0; }
table.dobavnice-t td .pisalo.kuverta { margin: -2px 0; }
.pisalo.brisi { color: var(--rdeca); border-color: var(--rdeca); margin-left: 4px;
                font-size: 17px; padding: 2px 8px; }
/* Rdeca vrstica: koda pripada drugi klasi - klikni jo in skeniraj znova. */
ul.vrstice .vrstica.napaka {
  background: color-mix(in srgb, var(--rdeca) 22%, var(--ploskev));
  color: var(--rdeca);
}
ul.vrstice .vrstica.popravek {
  background: color-mix(in srgb, var(--jantar) 30%, var(--ploskev));
  color: var(--crke);
}

/* -- polja -------------------------------------------------------------- */
label.polje { display: block; }
label.polje span { display: block; font-size: 12px; color: var(--sivo); margin-bottom: 5px; }
/* znacka (npr. "svoja cena") naj stoji ZRAVEN napisa, ne cez celo sirino */
label.polje span .znacka { display: inline-block; margin-bottom: 0; }
/* vrstica s kljukico (npr. "pred vpisom vprašaj za potrditev") */
label.stikalo {
  display: flex; align-items: center; gap: 11px; margin: 10px 0 0;
  border: 1px solid var(--crte); border-radius: 13px; padding: 12px 14px;
  background: var(--ploskev);
}
label.stikalo input[type="checkbox"] {
  width: 22px; height: 22px; flex: 0 0 auto; margin: 0; padding: 0;
  accent-color: var(--zelena);
}
label.stikalo span { font-size: 13.5px; color: var(--crke); margin: 0; }
input, select, textarea {
  width: 100%; padding: 13px 14px; border-radius: 13px;
  border: 1px solid var(--crte); background: var(--ploskev2);
  color: var(--crke); outline: 0;
}
/* Polje, v katerem pišeš, mora biti JASNO označeno - Urh: »polje se samo
   posveti in nato izgine«. Zato debelejši rob in mehak obroč naokoli, ki
   ostane, dokler je polje v fokusu. */
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--zelena);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zelena) 30%, transparent);
  background: var(--ploskev);
}
/* Napis nad poljem, v katerem pišeš, se obarva - tako se vidi, kje si,
   tudi ko je polje na dnu zaslona. */
label.polje:focus-within > span { color: var(--zelena); font-weight: 650; }
.polja { display: grid; gap: 12px; }

.cipi { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cipi::-webkit-scrollbar { display: none; }
/* Kadar so napisi dolgi (imena dejavnosti, leta sezon), naj se prelomijo v
   novo vrsto - drugace zadnji cip visi cez rob in ga ni videti. */
.cipi.ovij { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
.cipi.razvrsti { align-items: center; }
/* Gumbi e-naslovov nad posto - vsak svoj, s stevilom nove poste. */
.cipi.racuni-poste { margin-bottom: 10px; }
.cip.racun { font-weight: 600; }
/* Vrsta, ki naj zasede celo sirino kartice (npr. A- 100% A+), ne pa da
   se stisne na levo in pusti desno polovico prazno. */
.cipi.razpri { justify-content: space-between; }
.cipi.razvrsti .napis {
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sivo); align-self: center;
}
.cip {
  border: 1px solid var(--crte); background: var(--ploskev); color: var(--sivo);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.cip[aria-pressed="true"] { background: var(--zelena-tema); color: var(--zelena); border-color: var(--zelena); }

/* -- skeniranje --------------------------------------------------------- */
.kamera {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: #000; aspect-ratio: 4 / 3;
}
.kamera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kamera .okvir {
  position: absolute; inset: 18% 8%; border: 3px solid rgba(255,255,255,.85);
  border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.28);
}
.kamera.zadetek .okvir { border-color: var(--zelena); }

.vnos-kode { display: flex; gap: 10px; margin: 10px 0; }
/* Okno za posiljanje: naslov z gumbom @, besedilo veliko in vidno. */
.okno.posiljanje { max-width: 640px; }
.okno.posiljanje .dnevi { display: flex; gap: 8px; }
.okno.posiljanje .dnevi input { flex: 1 1 auto; min-width: 0; }
.okno.posiljanje .afna { font-size: 18px; font-weight: 800; min-width: 48px; }
.okno.posiljanje textarea.veliko { min-height: 200px; font-size: 15px; }
.okno.posiljanje .cipi { margin-top: 4px; }

/* Gajbica, ki caka na streznik: siva in posevna, dokler je streznik ne
   potrdi. Napis pod poljem za kodo pove, koliko jih caka. */
.stolpec .vrstica.caka { opacity: .55; font-style: italic; }
.vrsta-stanje {
  margin: -4px 0 8px; font-size: 12.5px; color: var(--sivo);
}
.vrsta-stanje.slabo { color: var(--rdeca); font-weight: 600; }

/* Vrstica s stevilko dobavnice - tik nad gumbi za klaso. */
.vrstica-stevilke .dnevi { display: flex; gap: 8px; }
.vrstica-stevilke input { flex: 1 1 auto; min-width: 0; }
.vrstica-stevilke .pod {
  display: block; color: var(--sivo); font-size: 12.5px; margin-top: 4px;
}
/* Ključavnica: vrstica pod datumom, ki jo je nemogoče spregledati. */
.kljucavnica-vrstica {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0; padding: 10px 12px; border-radius: 12px; font-size: 13px;
  background: color-mix(in srgb, var(--rdeca) 12%, transparent);
  border: 1px solid var(--rdeca); color: var(--rdeca);
}
.kljucavnica-vrstica span { flex: 1 1 160px; min-width: 0; }
.kljucavnica-vrstica.odklenjena {
  background: var(--zelena-tema); border-color: var(--zelena);
  color: var(--zelena);
}
.vnos-kode input { font-size: 20px; letter-spacing: 2px; text-align: center; }

/* -- stolpci ------------------------------------------------------------ */
.palica { height: 8px; border-radius: 4px; background: var(--ploskev2); overflow: hidden; }
.palica i { display: block; height: 100%; background: var(--zelena); }

table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabela th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sivo); font-weight: 700; padding: 0 0 8px;
}
table.tabela td { padding: 9px 0; border-top: 1px solid var(--crte); }
table.tabela td.d, table.tabela th.d { text-align: right; }
/* Izmenične barve vrstic - Urh: »da so tabele bolj pregledne«. Barva gre
   na celice, ne na vrstico, zato glava (th) ostane, kakršna je. */
table.tabela tr:nth-child(even) td { background: var(--ploskev2); }
/* Vrstica, ki je prišla na novo (od zadnjega ogleda) - malo svetlejša. */
table.tabela tr.novo td { background: var(--novo); }

/* Dobavnice: tabela z razvrscanjem po kliku na glavo stolpca. Na telefonu
   se vodoravno podrsa, na racunalniku gre cela na zaslon. */
.drsni { overflow-x: auto; padding: 12px 14px 4px; }
table.dobavnice-t { min-width: 520px; font-size: 13.5px; }
table.dobavnice-t th, table.dobavnice-t td { padding-right: 10px; }
table.dobavnice-t th:last-child, table.dobavnice-t td:last-child {
  padding-right: 0;
}
table.dobavnice-t td { white-space: nowrap; }
table.dobavnice-t td.kdo {
  white-space: normal; font-weight: 600; min-width: 120px;
}
table.dobavnice-t tr[data-klik] { cursor: pointer; }
table.dobavnice-t tr[data-klik]:hover td { background: var(--ploskev2); }
table.dobavnice-t .brez-st {
  color: var(--rdeca); font-weight: 700;
  background: color-mix(in srgb, var(--rdeca) 14%, transparent);
  border-radius: 6px; padding: 1px 6px;
}
button.razvrsti {
  background: none; border: 0; padding: 0 0 8px; margin: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; display: inline-flex; gap: 4px; align-items: center;
}
button.razvrsti:hover { color: var(--zelena); }
th.d button.razvrsti { justify-content: flex-end; width: 100%; }
button.razvrsti[aria-sort="ascending"],
button.razvrsti[aria-sort="descending"] { color: var(--zelena); }
button.razvrsti .pusca { font-size: 11px; }

/* O programu: oznaka levo, vrednost desno - da se dolg naslov ali e-posta
   prelomi in ne gre cez rob */
.vrsta-podatka {
  display: flex; gap: 12px; justify-content: space-between;
  padding: 7px 0; border-top: 1px solid var(--crte);
}
.vrsta-podatka:first-child { border-top: 0; padding-top: 0; }
.vrsta-podatka .oz { color: var(--sivo); font-size: 13px; flex: 0 0 auto; }
.vrsta-podatka .vr { text-align: right; word-break: break-word; min-width: 0; }
.seznam .pod + .pod { margin-top: 2px; }

/* kdo zdaj dela: ime in stoparica v prvi vrsti, gumbi pod njo, da so na
   telefonu dovolj veliki za prst (44 px) in ne stiskajo imena */
.seznam li.delavec { flex-wrap: wrap; }
.seznam li.delavec .gumbi-dela {
  display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 8px;
}
.seznam li.delavec .gumbi-dela .mali { min-height: 40px; flex: 1 1 auto; }
.seznam li.na-pavzi .st.stoparica { color: var(--sivo); }
.seznam li.na-pavzi .pod b { color: var(--jantar); }

/* posta */
.iskanje { display: flex; gap: 8px; }
.iskanje input {
  flex: 1; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--crte);
  background: var(--ploskev); min-width: 0;
}
.seznam.posta .zadeva { display: block; font-size: 14px; }
.seznam.posta .neprebrano .ime, .seznam.posta .neprebrano .zadeva { font-weight: 700; }
.seznam.posta .neprebrano { border-left: 3px solid var(--zelena); }
.seznam.posta .pod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Barva posiljatelja pobarva CELO vrstico; crke dolocimo po podlagi, da so
   berljive tudi na temni barvi. Sive podvrstice morajo barvo podedovati,
   sicer bi na barvi izginile. */
.seznam.posta li.obarvan { border-radius: 10px; }
.seznam.posta li.obarvan .pod,
.seznam.posta li.obarvan .ime,
.seznam.posta li.obarvan .zadeva { color: inherit; }
.seznam.posta li.obarvan .pod { opacity: .82; }
.seznam.posta li.obarvan .mali {
  color: inherit; border-color: currentColor; background: transparent;
}

/* Izbiranje sporocil (4.88.0). Urh: »en mail selectan, tako kot ima to
   gmail, preden ga odpres« in »selectam vec mailov na enkrat, brez da se
   odprejo«. Kvadratek na levi izbira, klik drugje po vrstici odpre - tako
   kot pri Gmailu. Shift + klik na kvadratek izbere ves razpon vmes. */
.seznam.posta .kljukica {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 2px; border-radius: 9px;
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--sivo); font-size: 17px; line-height: 1;
}
.seznam.posta .kljukica:hover { background: var(--ploskev2); }
.seznam.posta li.izbran .kljukica { color: var(--zelena); }
.seznam.posta li.izbran {
  background: color-mix(in srgb, var(--zelena) 14%, transparent);
}
.seznam.posta li.izbran.obarvan { box-shadow: inset 0 0 0 2px var(--zelena); }
/* Vrstica z opravili nad seznamom, ko je kaj izbrano. Drzi se vrha, da je
   pri dolgem seznamu vedno pri roki. */
.posta-izbrani {
  position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; margin-bottom: 10px; padding: 10px 12px;
  border: 1px solid var(--zelena); border-radius: 12px;
  background: var(--ploskev);
}
.posta-izbrani .koliko { font-weight: 650; margin-right: auto; }
.posta-izbrani select { max-width: 190px; }
/* Na telefonu ostanejo samo znaki (napis je v 'title') - z napisi vred bi
   vrstica zrasla cez pol zaslona. */
@media (max-width: 700px) {
  .posta-izbrani { gap: 6px; padding: 10px; }
  .posta-izbrani .koliko { flex: 1 0 100%; margin: 0 0 2px; }
  .posta-izbrani .besedilo { display: none; }
  .posta-izbrani .mali { min-width: 42px; text-align: center; }
}
/* Gumb za zastavico je rdec, kadar je sporocilo ZE oznaceno - tako se brez
   branja namiga vidi, kaj je oznaceno in kaj ne. */
.seznam.posta .mali.zastavljen,
.gumb.tih.zastavljen {
  color: var(--rdeca); border-color: var(--rdeca);
  background: color-mix(in srgb, var(--rdeca) 12%, transparent);
}

/* Meni ob desnem kliku (ali dolgem pritisku na zaslon na dotik). */
.kontekst-ozadje { position: fixed; inset: 0; z-index: 130; }
.kontekst {
  position: fixed; min-width: 210px; max-width: min(86vw, 300px);
  background: var(--ploskev); border: 1px solid var(--crte); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); padding: 6px; overflow: hidden;
}
.kontekst .naslov-menija {
  font-size: 12px; color: var(--sivo); padding: 6px 10px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kontekst button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--crke); font: inherit; padding: 11px 10px; border-radius: 8px;
  min-height: 44px; cursor: pointer;
}
.kontekst button:hover, .kontekst button:focus { background: var(--ploskev2); }
.kontekst button.rdec { color: var(--rdeca); }
.kontekst hr { border: 0; border-top: 1px solid var(--crte); margin: 5px 8px; }

/* Izbirnik barve: drsniki R/G/B in sestavljen zapis #RRGGBB. */
.barvnik .vzorec {
  height: 64px; border-radius: 12px; border: 1px solid var(--crte);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin-bottom: 12px;
}
.barvnik .drsnik { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.barvnik .drsnik span.oznaka { width: 16px; font-weight: 700; }
.barvnik .drsnik input[type=range] { flex: 1; min-width: 0; height: 28px; }
.barvnik .drsnik output { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.barvnik .hex { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.barvnik .hex input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--crte); background: var(--ploskev); color: var(--crke);
  text-transform: uppercase;
}
.barvnik .hitre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.barvnik .hitre button {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--crte);
  padding: 0; cursor: pointer;
}
.sporocilo .glava-sporocila { margin-bottom: 10px; }
.sporocilo .glava-sporocila .pod { font-size: 12.5px; color: var(--sivo); word-break: break-all; }
.priponke { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.mali.nevarna {
  border-color: var(--rdeca); color: var(--rdeca);
  background: color-mix(in srgb, var(--rdeca) 12%, transparent);
}
.telo-html { width: 100%; border: 0; border-radius: 10px; background: #fff; min-height: 120px; }
.telo-besedilo { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 0; }
.polja .dvojno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dvojno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.polje.vrsta { display: flex; align-items: center; gap: 8px; }
.polje.vrsta input { width: 20px; height: 20px; }

/* narocila Agrolit: obarvana je samo stevilka, ki jo je Agrolit spremenil */
.agrolit table.tabela { font-size: 13.5px; }
.agrolit td .ime { display: block; font-weight: 600; }
.agrolit td .pod { display: block; font-size: 11.5px; color: var(--sivo); }
.agrolit td.d { white-space: nowrap; vertical-align: top; padding-left: 6px; }
/* Tabela Agrolit: trdni stolpci, da je ista stevilka vedno na istem mestu
   in se da brati navzdol. Sirine so dolocene (table-layout: fixed), zato se
   tabela ne more razleteti cez rob zaslona, kot se je prej. */
table.agrolit-t { table-layout: fixed; width: 100%; }
table.agrolit-t col.s { width: 62px; }
table.agrolit-t th, table.agrolit-t td { padding: 8px 0 8px 4px; }
table.agrolit-t td:first-child, table.agrolit-t th:first-child {
  padding-left: 0; padding-right: 6px;
}
table.agrolit-t td .ime {
  display: block; font-weight: 650; font-size: 14px; line-height: 1.25;
  overflow-wrap: anywhere;
}
table.agrolit-t td .pod {
  display: block; font-size: 11.5px; color: var(--sivo); line-height: 1.3;
}
table.agrolit-t td.d {
  white-space: nowrap; vertical-align: top; font-size: 15px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
table.agrolit-t td.ostane b { color: var(--zelena); font-weight: 700; }
/* Kartica, ki nosi slabo novico (kopija ni uspela) - rdec rob, da se opazi. */
.kartica.slaba { border-color: var(--rdeca); }
.namig-klas {
  color: var(--sivo); font-size: 12.5px; margin: 10px 0 -4px;
}
.namig-klas b { color: var(--crke); }

/* Gratis za prodajalce na skenirnem zaslonu - ločeno od dobavnice. */
.gratis-prodajalci { margin-top: 14px; }
.gratis-prodajalci .naslov-gratis {
  font-weight: 700; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jantar); margin-bottom: 6px;
}
.gratis-prodajalci.vklopljeno {
  border-color: var(--jantar);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jantar) 25%, transparent);
}
.gratis-prodajalci .gumbi { margin-top: 8px; }
.gratis-seznam li { cursor: pointer; }
.gratis-seznam .pusca { color: var(--sivo); margin-left: 4px; }
.znacka.jantar {
  background: color-mix(in srgb, var(--jantar) 16%, transparent);
  color: var(--jantar); border-color: transparent;
}
/* Okno »skeniraj v naročilo«: kodo vpišeš ali prebereš, brez menjave zaslona. */
.okno.sken-okno { max-width: 520px; }
.okno.sken-okno .vnos-kode { margin: 8px 0 6px; }
.okno.sken-okno .vnos-kode input { font-size: 19px; }
.sken-v-izid { min-height: 22px; font-weight: 650; font-size: 13.5px; }
.sken-v-izid.uspeh { color: var(--zelena); }
.sken-v-izid.pozor { color: var(--jantar); }
.sken-v-izid.slabo { color: var(--rdeca); }
.sken-v-seznam { max-height: 210px; overflow-y: auto; }
.skeniraj-v { padding: 6px 10px; }
/* Domače naročilo: vrstice po sadežih (asimina, kutine ...). */
.naslov-postavk {
  font-weight: 700; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sivo); margin: 6px 0 2px;
}
.postavka {
  display: grid; grid-template-columns: 1.4fr 1fr 84px 112px auto auto;
  gap: 8px; align-items: end; padding: 6px 0;
  border-top: 1px solid var(--crte);
}
.postavka:first-child { border-top: 0; }
.postavka .polje { margin: 0; }
.postavka .mali.rdec { align-self: center; margin-bottom: 4px; }
.pod-sadez { font-weight: 600; color: var(--sivo); font-size: 13px; }
@media (max-width: 620px) {
  .postavka { grid-template-columns: 1fr 1fr; }
  .postavka .mali.zelen.skeniraj-v { grid-column: 1; justify-self: start; }
  .postavka .mali.rdec { grid-column: 2; justify-self: end; }
}
/* Priprava za skeniranje: gumb desno od »Kam / Trgovina«. */
.sken-vrh { display: grid; grid-template-columns: 1fr auto; gap: 12px;
            align-items: stretch; margin-bottom: 12px; }
.sken-vrh > .kartica { margin: 0; }
.priprava-gumb { display: flex; flex-direction: column; align-items: center;
                 justify-content: center; gap: 4px; min-width: 170px;
                 padding: 14px 16px; margin: 0; }
.priprava-gumb .ikona { font-size: 26px; line-height: 1; }
.priprava-gumb small { font-weight: 600; color: var(--sivo); font-size: 12px; }
@media (max-width: 700px) {
  .sken-vrh { grid-template-columns: 1fr; }
  .priprava-gumb { flex-direction: row; min-width: 0; }
}
/* Palete (4.101.0): narisane palete, klik na paleto jo izbere, klik na
   poslovalnico spodaj jo doda na izbrano paleto ali umakne z nje. */
.sken-vrh.s-paletami { grid-template-columns: 1fr auto auto; }
@media (max-width: 700px) {
  .sken-vrh.s-paletami { grid-template-columns: 1fr 1fr; }
  .sken-vrh.s-paletami > .kartica { grid-column: 1 / -1; }
  .sken-vrh.s-paletami .priprava-gumb { flex-direction: column; }
}
.pal-stevec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pal-stevec .st { font-size: 30px; font-weight: 800; min-width: 44px;
                  text-align: center; }
.pal-stevec .gumb { margin: 0; width: auto; flex: 0 0 auto; min-width: 56px;
                    font-size: 22px; padding: 8px 16px; }
.pal-stevila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
               margin-top: 10px; }
.pal-stevilo { min-width: 42px; height: 42px; border-radius: 10px; font-weight: 800;
               font-size: 17px; border: 2px solid var(--crte); background: var(--ploskev2);
               color: var(--crke); cursor: pointer; }
.pal-stevilo.predlog { border-style: dashed; border-color: var(--jantar); }
.pal-stevilo.izbrano { background: var(--zelena); color: #10200C; border-color: var(--zelena); }
.pal-stevila input { width: 74px; height: 42px; font-size: 17px; text-align: center;
                     border-radius: 10px; border: 2px solid var(--crte);
                     background: var(--ploskev2); color: var(--crke); }
.pal-stevila small { color: var(--sivo); font-size: 12.5px; }
.pal-mreza { display: grid; gap: 12px; margin: 12px 0;
             grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.paleta { background: var(--ploskev); border: 2px solid var(--crte);
          border-radius: 14px; padding: 10px 10px 8px; cursor: pointer;
          display: flex; flex-direction: column;
          -webkit-tap-highlight-color: transparent; }
.paleta.izbrana { border-color: var(--jantar);
                  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jantar) 35%, transparent); }
.paleta.prevec { border-color: var(--rdeca); }
.paleta .glava { display: flex; justify-content: space-between;
                 align-items: baseline; font-weight: 800; gap: 6px; }
.paleta .glava small { font-weight: 700; font-size: 12.5px; color: var(--sivo); }
.paleta .glava small.izbr { color: var(--jantar); }
.paleta .telo-p { display: flex; gap: 10px; margin-top: 8px; align-items: flex-end; }
.paleta .stran { flex: 1; min-width: 0; }
/* Stranski pogled: višina = 70 gajbic (7 plasti), bloki po količini. */
.paleta .sklad { position: relative; height: 196px; display: flex;
                 flex-direction: column-reverse; margin: 0 4px;
                 border: 2px dashed var(--crte); border-bottom: 0;
                 border-radius: 6px 6px 0 0; overflow: hidden;
                 background: repeating-linear-gradient(to top, transparent 0,
                   transparent 27px, color-mix(in srgb, var(--crte) 70%, transparent) 27px,
                   color-mix(in srgb, var(--crte) 70%, transparent) 28px); }
.paleta .blok { position: relative; display: flex; align-items: center;
                justify-content: center; text-align: center; color: #1F2418;
                font-weight: 700; font-size: 13px; line-height: 1.15;
                border-top: 1px solid rgba(0,0,0,.35); overflow: hidden;
                padding: 0 26px 0 6px; min-height: 0; }
.paleta .blok small { display: block; font-weight: 600; font-size: 11.5px; opacity: .85; }
.paleta .blok .vrst { min-width: 0; max-width: 100%; overflow: hidden; }
.paleta .blok .vrst, .paleta .blok small { white-space: nowrap; text-overflow: ellipsis;
                                           overflow: hidden; }
.paleta .blok.ena { line-height: 1; }
.paleta .blok .x { position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
                   width: 22px; height: 22px; border-radius: 50%; border: 0;
                   background: rgba(0,0,0,.18); color: #1F2418; font-weight: 800;
                   font-size: 13px; line-height: 22px; padding: 0; cursor: pointer; }
.paleta .prosto { position: absolute; top: 6px; left: 0; right: 0; text-align: center;
                  color: var(--sivo); font-size: 12.5px; font-weight: 600; }
.paleta .les .deska { height: 8px; background: #B98B55; border: 1px solid #7C5A33;
                      border-radius: 2px; }
.paleta .les .noge { display: flex; justify-content: space-between; padding: 0 6px; }
.paleta .les .noge i { width: 22px; height: 10px; background: #7C5A33; }
/* Tloris: 3 spredaj, 2 + 2 ob straneh, 3 zadaj; številka = gajbic v stolpcu. */
.tloris { position: relative; width: 74px; height: 111px; flex: none;
          border: 2px solid #7C5A33; border-radius: 3px; background: #B98B55; }
.tloris i { position: absolute; display: flex; align-items: center;
            justify-content: center; font-style: normal; font-weight: 800;
            font-size: 11px; color: #1F2418; border: 1px solid rgba(0,0,0,.45);
            border-radius: 2px; box-sizing: border-box; }
.tloris i.k1 { background: #A8D5A2; }
.tloris i.k2 { background: #F4DC7A; }
.tloris i.prevec { background: var(--rdeca); color: #fff; }
.tloris i.prazen { background: transparent; border-style: dashed; color: transparent; }
.tloris-oz { font-size: 11px; color: var(--sivo); text-align: center; margin-top: 3px; }
.tloris-oz b { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
               margin: 0 2px 0 6px; vertical-align: -1px; }
.paleta .skupaj { text-align: center; color: var(--sivo); font-size: 13px;
                  font-weight: 600; margin-top: 6px; }
.paleta .opomba-p { text-align: center; color: var(--sivo); font-size: 12px;
                    margin-top: 2px; white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; }
.pal-cipi { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pal-cip { border: 2px solid var(--rdeca); background: var(--ploskev);
           color: var(--crke); border-radius: 999px; padding: 9px 14px;
           font-weight: 700; font-size: 15px; cursor: pointer; }
.pal-cip.na { color: #1F2418; border-color: rgba(0,0,0,.25); }
.pal-cip.del { border-style: dashed; border-color: var(--jantar); }
.pal-cip.na-izbrani { border-color: var(--jantar);
                      box-shadow: 0 0 0 3px color-mix(in srgb, var(--jantar) 45%, transparent); }
.pal-cip small { font-weight: 600; opacity: .85; margin-left: 6px; }
/* Plan v stolpcu klase: manjka (jantar) / vse (zeleno) / preveč (rdeče). */
.plan-vrstica { padding: 6px 10px; font-size: 13.5px; font-weight: 600;
                border-bottom: 1px solid var(--crte); }
.plan-vrstica.manjka, .plan-manjka { color: var(--jantar); }
.plan-vrstica.vse, .plan-vse { color: var(--zelena); }
.plan-vrstica.prevec, .plan-prevec { color: var(--rdeca); }
.plan-vrstica.prevec { background: color-mix(in srgb, var(--rdeca) 14%, transparent); }
.stolpec.plan-st-prevec { border-color: var(--rdeca); }
.stolpec.plan-st-vse { border-color: var(--zelena); }
.plan-polje.gratis span { color: var(--sivo); }
.rac-izbira { display: flex; gap: 12px; align-items: center; width: 100%; cursor: pointer; }
.rac-izbira input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin: 0; padding: 0; }
.rac-izbira .glavno { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.plan-polje.dodatno span { color: var(--jantar); font-weight: 650; white-space: nowrap; }
.plan-polje.dodatno input { color: var(--jantar); }
.plan-polje small.plan-narocilo { color: var(--sivo); font-weight: 500; }
.plan-dodatno { display: block; font-weight: 500; font-size: 12.5px; color: var(--jantar); }
.plan-dodatno b { color: var(--jantar); }
.plan-polje.plan-opomba { grid-column: 1 / -1; }
.plan-polje.plan-opomba input { text-align: left; font-size: 13.5px; font-weight: 500;
                                padding: 6px 8px; }
.plan-opomba-sken { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-radius: 8px;
                    background: var(--ploskev2); font-size: 13.5px; }
.plan-opomba-sken b { color: var(--zelena); }
/* Zaslon priprave: ena vrstica na trgovino. */
.plan-seznam { padding: 4px 12px; }
.plan-vrsta { display: grid; grid-template-columns: 1fr 76px 70px 62px 76px 70px 62px; gap: 8px;
              align-items: start; padding: 10px 0; border-top: 1px solid var(--crte); }
.plan-vrsta:first-child { border-top: 0; }
.plan-vrsta.planirana .plan-ime { font-weight: 700; }
.plan-ime { padding-top: 8px; overflow-wrap: anywhere; }
.plan-agrolit { display: block; font-size: 12px; color: var(--sivo); margin-top: 3px; }
.plan-agrolit .mali { padding: 2px 8px; font-size: 11.5px; margin-left: 4px; }
.plan-polje { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px;
              color: var(--sivo); }
.plan-polje input { text-align: center; font-size: 18px; font-weight: 700;
                    padding: 8px 4px; width: 100%; }
.plan-polje small { font-weight: 600; font-size: 11.5px; text-align: center; }
.plan-polje small.plan-brez { color: var(--sivo); }
.plan-ostale summary { cursor: pointer; margin: 12px 0 8px; font-weight: 650;
                       color: var(--sivo); }
@media (max-width: 480px) {
  .plan-vrsta { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .plan-vrsta .plan-ime { grid-column: 1 / -1; padding-top: 4px; }
  .plan-polje input { font-size: 16px; padding: 7px 2px; }
}
.vnos-kode .darilo {
  flex: 0 0 auto; min-width: 62px; padding: 8px 14px; color: var(--sivo);
}
.vnos-kode .darilo[aria-pressed="true"] {
  background: var(--jantar); border-color: var(--jantar); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jantar) 30%, transparent);
}
.gratis-opozorilo {
  margin: 6px 0 8px; padding: 9px 12px; border-radius: 10px;
  font-weight: 650; color: var(--jantar);
  background: color-mix(in srgb, var(--jantar) 14%, transparent);
  border: 1px solid var(--jantar);
}
/* Pregled dela: kdo je kaj delal - dve vrstici na osebo. */
.osebe-dela li { display: block; padding: 8px 14px; }
.osebe-dela .oseba-vrh {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
}
.osebe-dela .ime { font-weight: 650; font-size: 15px; }
.osebe-dela .znesek {
  display: flex; gap: 10px; align-items: baseline; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.osebe-dela .znesek .ure { color: var(--sivo); font-size: 13px; }
.osebe-dela .znesek b { color: var(--zelena); font-size: 15px; font-weight: 700; }
.osebe-dela .oseba-kaj {
  color: var(--sivo); font-size: 12.5px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.osebe-dela .oseba-kaj .kos { white-space: nowrap; }
.osebe-dela .kaj-pob { color: var(--zelena); font-weight: 600; }
.osebe-dela .kaj-zl { color: var(--crke); font-weight: 600; }

/* Tabela, ki je za zaslon presiroka, naj se da podrsati - ne odrezati. */
.tabela-ovoj { overflow-x: auto; }
.tabela-ovoj table.tabela { min-width: 360px; }
.tabela-ovoj table.tabela td, .tabela-ovoj table.tabela th { padding-left: 6px; }
.tabela-ovoj table.tabela td:first-child { padding-left: 0; }
.od-koliko {
  font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--sivo); opacity: .8;
}
.dnevi-dela .kdo-je-delal {
  margin-top: 6px; line-height: 1.7; color: var(--crke);
  font-variant-numeric: tabular-nums;
}
.spr0 { color: var(--rdeca); font-weight: 700; }
.spr1 { color: var(--jantar); font-weight: 700; }
.spr2 { color: var(--zelena); font-weight: 700; }

/* -- urejevalnik dokumenta (4.86.0) ------------------------------------- */
/* Urh: »naj bo malo bolj urejeno in ne tako zmesano«, in »dve verziji: za
   racunalnik ali tablico in za telefon«. Postavitev je ENA, odloca pa sirina
   zaslona: na telefonu je vsaka postavka kartica z napisanimi polji, na
   sirokem zaslonu pa vrstica v tabeli - kot v programih, ki jih pozna. */
.ur-glava { display: grid; gap: 12px; }
.ur-glava .par { display: grid; gap: 10px; }
.ur-postavka {
  border: 1px solid var(--crte); border-radius: 14px; padding: 12px;
  margin-bottom: 10px; background: var(--ploskev);
}
.ur-postavka .ime { display: grid; gap: 8px; }
.ur-postavka .polja {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.ur-postavka .orodja {
  display: flex; gap: 6px; align-items: center; justify-content: flex-end;
  margin-top: 10px;
}
.ur-postavka .vsota {
  margin-right: auto; font-weight: 700; font-size: 15px; align-self: center;
}
/* Znesek postavke: na telefonu v vrstici z gumbi, na sirokem v svojem stolpcu. */
.ur-skupaj { display: none; }
/* Popust je stevilka in poleg nje izbira % ali €. */

.ur-glave { display: none; }
/* Vsote so v kartici brez notranjega roba ('.kartica.tesno'), zato si ga
   morajo dati same - sicer se zneski prilepijo na rob in so videti, kot da
   tecejo cezenj. Urh (19. 9. 2026): »naj bodo te st. vedno odmaknjene malo
   od roba.« */
.ur-vsote {
  display: grid; gap: 6px; justify-items: end; margin-top: 12px;
  padding: 12px 16px 16px; border-top: 1px solid var(--crte);
}
.ur-vsote div { display: flex; gap: 18px; align-items: baseline; }
.ur-vsote .kon { font-size: 19px; font-weight: 800; }
.ur-vsote .oz { color: var(--sivo); font-size: 13px; }
/* Polje v urejevalniku: napis nad poljem, da se na telefonu ve, kaj je kaj. */
/* 'min-width: 0' je nujen: brez njega se polje v mrezi razsiri na sirino
   svoje vsebine in stece cez stolpec. */
.ur-polje { display: grid; gap: 4px; min-width: 0; }
.ur-polje > .nap {
  font-size: 11.5px; color: var(--sivo); text-transform: uppercase;
  letter-spacing: .04em;
}
.ur-polje input, .ur-polje select, .ur-polje textarea {
  width: 100%; box-sizing: border-box;
}
/* Popust je stevilka in poleg nje izbira % ali €. Izbira naj bo ozka -
   prostor potrebuje stevilka, ne ta znak. */
.ur-polje .ur-popust { display: flex; gap: 4px; min-width: 0; }
.ur-polje .ur-popust input { flex: 1 1 0; width: auto; min-width: 40px; }
.ur-polje .ur-popust select {
  flex: 0 0 50px; width: 50px; padding-left: 5px; padding-right: 2px;
}
.ur-opozorilo {
  border: 1px solid var(--jantar); border-radius: 12px; padding: 10px 12px;
  margin-bottom: 12px; font-size: 13.5px; color: var(--jantar);
}
/* Vrstica z gumboma Shrani in Pošlji se drži dna zaslona. Na telefonu mora
   biti NAD spodnjim menijem - sicer se skrije za njim. */
.ur-napaka, input.ur-napaka, select.ur-napaka {
  border-color: var(--rdeca) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rdeca) 35%, transparent) !important;
}
.ur-dno {
  position: sticky; bottom: calc(env(safe-area-inset-bottom) + 66px);
  z-index: 3; margin-top: 18px; padding: 10px 0;
  background: linear-gradient(to bottom, transparent, var(--ozadje) 22%);
}
@media (min-width: 960px) {
  /* Na širokem zaslonu je meni ob strani, zato dno ostane dno. */
  .ur-dno { bottom: 0; padding-bottom: 10px; }
}

/* Kdaj so postavke TABELA in kdaj kartice, ne sme odlocati sirina OKNA,
   ampak sirina, ki je res na voljo - pri sirokem zaslonu vzame meni ob
   strani 210 px in tabela je lahko sirsa od prostora. Urh (19. 9. 2026):
   »pri praznem racunu je tekst zamaknjen v stran«. Zato meri kar ovoj
   tabele (container query), stolpci pa se smejo skrciti. */
.ur-tabela { container-type: inline-size; }

@media (min-width: 900px) {
  .ur-glava { grid-template-columns: 1fr 1fr; align-items: start; }
  .ur-glava .par { grid-template-columns: 1fr 1fr; }
  /* Vrstica z enim samim poljem (naslovnik, zadeva) naj gre čez vso širino -
     sicer je pol kartice prazne. */
  .ur-glava .par.eno { grid-template-columns: 1fr; }
}

@container (min-width: 800px) {
  /* Tabela postavk: napisi polj se skrijejo, glave stolpcev pa pokazejo. */
  .ur-glave {
    display: grid; gap: 8px; padding: 0 12px 6px;
    font-size: 11.5px; color: var(--sivo); text-transform: uppercase;
    letter-spacing: .04em;
  }
  /* Vsak stolpec ima najmanjso sirino in delez preostanka: tako se tabela
     zmeraj prilega in nic ne stece cez rob. */
  .ur-glave, .ur-postavka {
    grid-template-columns:
      minmax(140px, 2.3fr) minmax(62px, .8fr) minmax(78px, .85fr)
      minmax(70px, .85fr) minmax(88px, .95fr) minmax(108px, 1.1fr)
      minmax(84px, 1fr) minmax(102px, .95fr);
    gap: 8px;
    align-items: start;
  }
  .ur-postavka {
    display: grid; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--crte); padding: 12px; margin: 0;
    background: transparent;
  }
  .ur-postavka:nth-child(even) { background: var(--ploskev2); }
  .ur-postavka .polja {
    display: contents;                 /* polja gredo naravnost v stolpce */
  }
  .ur-postavka .ime { grid-column: 1; }
  .ur-postavka .orodja {
    grid-column: 8; margin: 0; justify-content: flex-end; align-self: center;
    gap: 4px;
  }
  .ur-postavka .orodja .mali { padding: 8px 9px; }
  .ur-postavka .vsota { display: none; }
  /* V tabeli napisi polj niso potrebni - nad stolpci so glave. V GLAVI
     dokumenta pa ostanejo, sicer se ne ve, kaj je kateri datum. */
  .ur-postavka .ur-polje > .nap { display: none; }
  .ur-glave span:not(:first-child) { text-align: right; }
  .ur-postavka .ur-polje input, .ur-postavka .ur-polje select { text-align: right; }
  .ur-postavka .ime .ur-polje input,
  .ur-postavka .ime .ur-polje textarea { text-align: left; }
  .ur-skupaj {
    display: block; grid-column: 7; align-self: center; text-align: right;
    font-weight: 700; padding-top: 9px; white-space: nowrap;
  }
}

/* -- tablica in racunalnik ---------------------------------------------- */
/* Ista aplikacija, druga postavitev: na tablici sirse mreze in obrazci v
   dveh stolpcih, na racunalniku pa stranska vrstica z zavihki namesto
   spodnje. Kaj je kaj, doloca sirina zaslona (html[data-naprava] je za
   drobne razlike v JS). */
@media (min-width: 700px) {
  .vsebina { padding: 20px 24px 104px; width: 100%; max-width: 1100px; margin: 0 auto; }
  .vrh { padding-left: 24px; padding-right: 24px; }
  /* Ploscice na sirokih zaslonih: flex namesto trdne mreze, da se zadnja
     vrsta RAZTEGNE cez preostanek. Pri trdnih stolpcih je ob devetih
     ploscicah zadnja ostala sama, z veliko praznine na desni. */
  .mreza { display: flex; flex-wrap: wrap; gap: 12px; }
  .mreza > * { flex: 1 1 200px; }
  .prijava form { max-width: 420px; }
}
/* Profil in odjava v stranskem meniju (4.90.2) - samo ob strani. */
.stranski-profil { display: none; }
.stranski-profil .profil-vrsta { display: flex; align-items: center; gap: 10px; min-width: 0;
  cursor: pointer; border-radius: 10px; padding: 4px; margin: -4px; }
.stranski-profil .profil-vrsta:hover { background: var(--ploskev2); }
.profil-znak { overflow: hidden; }
.profil-znak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-glava { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; }
.profil-glava .profil-znak.velik {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; font-weight: 700; background: var(--zelena-tema); color: var(--zelena);
}
.profil-glava .profil-imena { display: grid; gap: 2px; min-width: 0; }
.profil-glava .profil-imena b { font-size: 20px; overflow-wrap: anywhere; }
.profil-glava .profil-imena span { color: var(--sivo); font-size: 13px; }
.profil-glava .profil-slika-gumbi { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.profil-glava .profil-slika-gumbi .gumb { width: auto; flex: 1 1 160px; }
.profil-odjavi-napravo { flex: 0 0 auto; align-self: center; color: var(--rdeca); }
.stranski-profil .profil-znak {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--zelena-tema); color: var(--zelena);
}
.stranski-profil .profil-besedilo { display: grid; min-width: 0; line-height: 1.2; }
.stranski-profil .profil-besedilo b {
  font-size: 14px; color: var(--crke); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.stranski-profil .profil-besedilo span {
  font-size: 12px; color: var(--sivo); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.dno .stranski-profil .profil-odjava {
  display: block; width: 100%; margin-top: 10px; padding: 7px 10px;
  border: 1px solid var(--crte); border-radius: 10px; background: var(--ploskev);
  color: var(--rdeca); font-size: 13px; font-weight: 600; text-align: center;
}
/* Izbira sezone v stranskem meniju - samo, ko je meni ob strani. */
.stranske-sezone { display: none; }
.stranske-sezone .naslov-sezon {
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sivo); padding: 0 12px 4px;
}
.nova-sezona-cip { border-style: dashed !important; opacity: .85; }
.nova-sezona-cip b { color: var(--zelena); }
.dno .stranske-sezone .sezona-cip {
  display: flex; gap: 8px; align-items: baseline; justify-content: flex-start;
  grid-template-columns: none; padding: 8px 12px; font-size: 14px;
  border-radius: 10px; width: 100%;
}
.dno .stranske-sezone .sezona-cip span { color: var(--sivo); font-size: 12.5px; font-weight: 400; }
.dno .stranske-sezone .sezona-cip[aria-pressed="true"] {
  background: var(--zelena-tema); color: var(--zelena);
}
.dno .stranske-sezone .sezona-cip[aria-pressed="true"] span { color: var(--zelena); }
@media (min-width: 960px) {
  .lupina { padding-left: 210px; }
  .dno {
    left: 0; top: 0; bottom: 0; right: auto; width: 210px;
    grid-template-columns: 1fr !important; grid-auto-rows: max-content;
    align-content: start; gap: 4px;
    padding: calc(env(safe-area-inset-top) + 18px) 12px 18px;
    border-top: 0; border-right: 1px solid var(--crte);
  }
  /* Ime programa z ikono nad stranskim seznamom (siroki zasloni). */
  .dno::before {
    /* Ikona naj bo posredi imena, ki se prelomi v dve vrstici. */
    content: "Triloba Accounting"; display: flex; align-items: center;
    min-height: 36px; margin: 2px 0 14px; padding: 0 10px 0 48px;
    background: url("ikona-192.png") no-repeat 6px center;
    background-size: 32px 32px; line-height: 1.15;
    font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--crke);
  }
  .dno button {
    grid-template-columns: 30px 1fr; justify-items: start; align-items: center;
    gap: 10px; font-size: 15px; padding: 10px 12px; width: 100%; text-align: left;
  }
  .dno button .znak { font-size: 20px; }
  .dno button .ikona { width: 22px; height: 22px; }
  /* V stranskem meniju je napis vedno viden, tudi pri veliko razdelkih. */
  .dno.veliko button .napis { display: block; }
  /* Značka pri Naročilih: v stranskem meniju čisto desno v vrstici, da ne
     pokrije napisa (Urh: »krogec je preveč čez tekst«). */
  .dno button .znacka-meni {
    left: auto; right: 10px; top: 50%; transform: translateY(-50%);
  }
  .dno button .napis { padding-right: 30px; }
  /* izbira sezone pod »Več« v stranskem meniju (4.90.1) */
  .stranski-profil { display: block; padding: 4px 6px 14px; margin-bottom: 10px;
    border-bottom: 1px solid var(--crte); }
  .stranske-sezone { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--crte); }
  .samo-ozko { display: none; }
  .vsebina { padding: 24px 32px 48px; max-width: 1240px; }
  /* BREZ umetnih omejitev sirine. Prej so bili gumbi, obrazci in stevilke
     omejeni na 760 px in poravnani na LEVO, kartice ob njih pa cez celo
     sirino - zato je bilo videti, kot da je pol strani prazne in da je vse
     zamaknjeno v levo. Zdaj imajo vsi isti levi in desni rob. */
  .stat, .kartica.polja, form.polja, .gumb, .cipi { max-width: none; }
  /* Gumbov ne raztegujemo cez cel zaslon: toliko jih gre v vrsto, kolikor
     jih gre, vsi enako siroki. */
  .gumbi {
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .skener .skener-dno { max-width: 760px; margin: 0 auto; }
  .zavesa .okno { max-width: 560px; }
}
@media (min-width: 1400px) {
  .vsebina { max-width: 1400px; }
}

/* -- prijava ------------------------------------------------------------ */
.prijava {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.prijava form { width: 100%; max-width: 360px; display: grid; gap: 14px; }
.prijava .logo {
  width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 6px;
  display: block;
}
.prijava h1 { text-align: center; margin: 0; font-size: 24px; }
.prijava p { text-align: center; margin: 0; color: var(--sivo); font-size: 13px; }

/* -- drobno ------------------------------------------------------------- */
.prazno { text-align: center; color: var(--sivo); padding: 42px 12px; }
.prazno .znak { font-size: 34px; display: block; margin-bottom: 8px; opacity: .6; }
.napaka { color: var(--rdeca); font-size: 13px; }
.brez-signala {
  background: color-mix(in srgb, var(--jantar) 16%, transparent);
  color: var(--jantar); border-radius: 12px; padding: 9px 12px; font-size: 12.5px;
}

/* -- skener ------------------------------------------------------------- */
/* Cez cel zaslon, kot pri pravem citalniku: kamera tece, program sam
   prepozna kodo in jo vpise. Nic slikanja, nic potrjevanja. */
.skener {
  position: fixed; inset: 0; z-index: 90; background: #000;
  display: grid; grid-template-rows: auto 1fr auto;
}
.skener video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.skener > * { position: relative; z-index: 1; }

.skener-vrh {
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,0));
  color: #fff;
}
.skener-vrh .kje { flex: 1; min-width: 0; }
.skener-vrh .kje b { display: block; font-size: 16px; }
.skener-vrh .kje span { font-size: 12.5px; opacity: .8; }
.skener-vrh button {
  width: 44px; height: 44px; border-radius: 14px; font-size: 19px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35);
  color: #fff; display: grid; place-items: center;
}
.skener-vrh button[aria-pressed="true"] { background: var(--jantar); color: #241a05; }

.skener-okvir {
  margin: 0 10%; border-radius: 18px; align-self: center;
  aspect-ratio: 5 / 3; position: relative;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.5);
  overflow: hidden;
}
.skener-okvir i {
  position: absolute; left: 6%; right: 6%; height: 3px; border-radius: 3px;
  background: #FF5A4E; box-shadow: 0 0 12px #FF5A4E;
  animation: zarek 2.1s ease-in-out infinite;
}
@keyframes zarek {
  0%, 100% { top: 12%; } 50% { top: 86%; }
}
.skener.zadetek .skener-okvir { border-color: #8BD05F; }
.skener.zadetek .skener-okvir i { background: #8BD05F; box-shadow: 0 0 14px #8BD05F; }
/* koda, ki ni nasa: vpise se, a se mora poznati */
.skener.pozor .skener-okvir { border-color: #E8A33D; }
.skener.pozor .skener-okvir i { background: #E8A33D; box-shadow: 0 0 14px #E8A33D; }

.skener-dno {
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 14px);
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.82) 22%);
  color: #fff; display: grid; gap: 10px;
}
.skener-stanje {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px;
}
/* Gumb za branje vec gajbic z ene slike - v skenerju, na temni podlagi. */
.skener-vec {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35);
  color: #fff;
}
/* Zakljucek naročila kar iz skenerja - zelen, da se loci od ostalih. */
.skener-konec {
  background: var(--zelena); border-color: var(--zelena); color: #fff;
  font-weight: 700;
}
.skener-stanje > div {
  background: rgba(255,255,255,.10); border-radius: 14px; padding: 10px;
  text-align: center;
}
.skener-stanje .st { font-size: 19px; font-weight: 700; }
.skener-stanje .oz { font-size: 11px; opacity: .75; }
.skener-zadnje {
  list-style: none; margin: 0; padding: 0; max-height: 22dvh; overflow-y: auto;
}
.skener-zadnje li {
  display: flex; gap: 10px; align-items: center; font-size: 13.5px;
  padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.skener-zadnje li span:first-child { flex: 1; }
.skener-sporocilo {
  border-radius: 12px; padding: 9px 12px; font-size: 13.5px; font-weight: 600;
  background: rgba(255,255,255,.12);
}
.skener-sporocilo.uspeh { background: rgba(139,208,95,.22); color: #CFF0B4; }
.skener-sporocilo.slabo { background: rgba(228,105,79,.25); color: #FFD5CB; }
.skener-sporocilo.pozor { background: rgba(232,163,61,.28); color: #FFE3B8; }
/* med drzanjem kode: modro-nevtralno, da se loci od uspeha in napake */
.skener-sporocilo.cakam { background: rgba(255,255,255,.22); color: #FFFFFF; }
.skener-zadnje li.pozor { color: #FFE3B8; }
.skener-zadnje li.pozor span:nth-child(2) { font-weight: 700; }

/* Potrditev prebrane kode TAKOJ POD SLIKO - ne v oknu cez cel zaslon.
   Tako skenerja ni treba zapirati: koda se pokaze tu, spodaj pa sta gumba. */
.skener-potrditev {
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.35);
  border-radius: 16px; padding: 12px; display: grid; gap: 10px;
}
.skener-potrditev.pozor { border-color: #E8A33D; }
.skener-potrditev .koda {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 23px; font-weight: 700; letter-spacing: 1.2px;
  text-align: center; word-break: break-all;
}
.skener-potrditev .kaj {
  display: flex; gap: 10px; justify-content: center; font-size: 15px;
}
.skener-potrditev .kaj b { font-size: 19px; }
.skener-potrditev .zakaj { font-size: 12.5px; color: #FFE3B8; line-height: 1.3; }
.skener-potrditev .rocno { display: flex; gap: 8px; }
.skener-potrditev .rocno input,
.skener-potrditev .rocno select {
  padding: 10px 12px; border-radius: 12px; font-size: 15px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}
.skener-potrditev .rocno input { flex: 1; min-width: 0; }
.skener-potrditev .gumbi { display: flex; gap: 10px; }
.skener-potrditev .gumbi button {
  flex: 1; padding: 15px 10px; border-radius: 14px; border: 0;
  font-size: 16px; font-weight: 700; color: #12200f; background: #8BD05F;
}
.skener-potrditev .gumbi button.tih {
  background: rgba(255,255,255,.18); color: #fff;
}

/* -- vprasanje v oknu --------------------------------------------------- */
/* z-index mora biti VISJI od skenerja (90): vprašanja se odpirajo tudi med
   odprtim skenerjem (pregled več kod s slike, zaključek naročila). Dokler je
   bilo 70, je okno obviselo pod kamero in ga ni bilo mogoče niti videti niti
   klikniti. */
.zavesa {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(0,0,0,.45); padding: 20px; backdrop-filter: blur(3px);
}
.zavesa .okno {
  width: 100%; max-width: 380px; display: grid; gap: 12px;
  background: var(--ploskev); border: 1px solid var(--crte);
  border-radius: var(--r); padding: 18px; box-shadow: var(--senca);
  max-height: 84dvh; overflow-y: auto;
}
.zavesa h3 { margin: 0; font-size: 17px; }

/* potrditev prebrane kode - koda, kile in klasa, preden gre v bazo */
.okno.pozor { border-color: var(--jantar); }
.koda-velika {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: 1.5px;
  text-align: center; padding: 10px 6px; border-radius: 12px;
  background: var(--ploskev2); word-break: break-all;
}
/* Polje, ki se pokaze, ko pri potrditvi klikneš svinčnik ob kodi. */
.koda-vnos {
  width: 100%; margin: 6px 0 0; font-family: ui-monospace, monospace;
  font-size: 16px; letter-spacing: 1px; text-align: center;
}
.skener-potrditev .koda { display: flex; align-items: center; gap: 8px;
  justify-content: center; }
.potrjeno { display: flex; gap: 10px; }
.potrjeno > div {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: 12px;
  background: var(--ploskev2);
}
.potrjeno .st { font-size: 22px; font-weight: 700; }
.potrjeno .oz { font-size: 11.5px; color: var(--sivo); }
.okno .opozorilo {
  font-size: 13px; color: var(--jantar); border: 1px solid var(--jantar);
  border-radius: 12px; padding: 9px 11px; line-height: 1.35;
}
.okno .slabo-opozorilo {
  font-size: 13px; color: var(--rdeca); border: 1px solid var(--rdeca);
  border-radius: 12px; padding: 9px 11px; line-height: 1.35;
}
/* Besedilo v oknu (zgodovina dokumenta, seznami za potrditev). Prelomi
   vrstic se morajo videti - brez tega je bil izpis en sam kup besed. */
.okno .besedilo-okna {
  font-size: 13.5px; line-height: 1.45; color: var(--sivo);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 46dvh;
  overflow-y: auto;
}
.okno .besedilo-okna.slabo-opozorilo { color: var(--rdeca); }
/* Zgodovina: ena sprememba na vrsto, kdaj v svoji vrstici. */
.okno ul.dogodki {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  max-height: 46dvh; overflow-y: auto;
}
.okno ul.dogodki li {
  border: 1px solid var(--crte); border-radius: 12px; padding: 8px 10px;
  display: grid; gap: 2px;
}
.okno ul.dogodki .kdaj {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sivo);
}
.okno ul.dogodki .kaj { font-size: 14px; font-weight: 600; }
.okno ul.dogodki .opis { font-size: 12.5px; color: var(--sivo); }

/* seznam narocil, ki jih je treba kmalu dobaviti */
/* Kartica ima sicer .tesno (padding 0), ker je v njej seznam do roba. Tu je
   v njej naslov in seznam z lastnimi okvirji - brez odmika je rob kartice
   segal cez besedilo. */
.pozor-kartica { border-color: var(--jantar); padding: 14px; }
ul.nujna { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.nujna li {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--crte); border-radius: 12px; padding: 10px 12px;
}
ul.nujna li.zdaj { border-color: #E4694F; background: rgba(228,105,79,.10); }
ul.nujna .rok {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; white-space: nowrap; padding-top: 2px;
  color: var(--sivo);
}
ul.nujna li.zdaj .rok { color: #E4694F; }
ul.nujna .kdo { display: grid; gap: 2px; flex: 1; min-width: 0; }
ul.nujna .kdo b { font-size: 15px; }
ul.nujna .kdo span { font-size: 12.5px; color: var(--sivo); }
ul.nujna .tel {
  text-decoration: none; font-size: 20px; padding: 2px 6px;
  border-radius: 10px; background: var(--ploskev2); color: var(--crke);
}

.obvestilo {
  position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 84px);
  /* nad skenerjem (90), da se obvestilo vidi tudi med skeniranjem */
  z-index: 110; background: var(--ploskev); border: 1px solid var(--crte);
  border-radius: 14px; padding: 13px 16px; box-shadow: var(--senca);
  transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: .22s ease; font-size: 14px;
}
.obvestilo.vidno { transform: none; opacity: 1; }
.obvestilo.uspeh { border-color: var(--zelena); }
.obvestilo.slabo { border-color: var(--rdeca); }

.vrtavka {
  width: 22px; height: 22px; border-radius: 50%; margin: 30px auto;
  border: 3px solid var(--crte); border-top-color: var(--zelena);
  animation: vrti .8s linear infinite;
}
@keyframes vrti { to { transform: rotate(360deg); } }

/* tablica: spodnja vrstica ostane, a je ozja in zaobljena */
@media (min-width: 720px) and (max-width: 959px) {
  .dno { max-width: 720px; margin: 0 auto; border-radius: 20px 20px 0 0; }
}
@media (min-width: 960px) {
  .obvestilo { left: 226px; max-width: 760px; bottom: 24px; }
}

/* -- prikaz na televizorju ------------------------------------------------
   Zaslon, ki se gleda s treh do stirih metrov: brez menija, brez glave,
   vedno temen (tudi podnevi) in z velikimi crkami. Velikosti so relativne
   na zaslon, ker gre lahko za televizor 1920x1080 ali zrcaljen zavihek
   poljubne velikosti. Brez drsenja - kar ne gre na zaslon, se ne kaze. */
.tv {
  position: fixed; inset: 0; overflow: hidden;
  background: #0c1210; color: #f2f6f3;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  /* --z je velikost pisave na televizorju (gumba A- in A+). */
  --z: 1;
  /* --sw in --sh sta velikost ODRA - pravokotnika, v katerem je vse. Brez
     izbranega razmerja je oder cel zaslon (torej tako, kot je bilo doslej);
     ob izbranem razmerju ju postavi tvOderSlog() v pikah. Vse velikosti
     spodaj se ravnajo po njiju, ne po oknu - zato je zaslon pri 16:9 videti
     enako, naj bo okno na racunalniku kakrsno koli. */
  --sw: 100vw; --sh: 100vh;
}
/* Ob izbranem razmerju so robovi okoli odra crni - tak je tudi televizor,
   kadar sam doda crnino, in prehod se ne vidi. */
.tv.omejeno { background: #000; }
.tv .tv-oder {
  width: var(--sw); height: var(--sh);
  background: #0c1210;
  padding: calc(var(--sh) * .022) calc(var(--sw) * .024);
  display: flex; flex-direction: column; gap: calc(var(--sh) * .014);
  overflow: hidden;
}
.tv * { min-width: 0; }
.tv .tv-glava {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--sw) * 0.02); flex: 0 0 auto;
}
.tv .tv-kdo {
  font-size: calc(clamp(20px, calc(var(--sw) * 0.034), 64px) * var(--z));
  font-weight: 700; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv .tv-kdaj {
  font-size: calc(clamp(13px, calc(var(--sw) * 0.017), 30px) * var(--z)); color: #8fa89a;
  white-space: nowrap;
}
.tv .tv-znacke { display: flex; gap: calc(var(--sw) * 0.01); flex: 0 0 auto; }
.tv .tv-znacka {
  font-size: calc(clamp(13px, calc(var(--sw) * 0.017), 30px) * var(--z)); font-weight: 700;
  padding: .3em .8em; border-radius: 999px;
  background: #3a2020; color: #ff9a8f;
}
.tv .tv-znacka.info { background: #17301f; color: #7ee0a1; }
/* Drobne vrstice v stolpcu Skupaj (povprecna, najlazja, najtezja gajbica). */
.tv .tv-drobno {
  flex: 0 0 auto; margin-top: calc(var(--sh) * 0.012);
  border-top: 1px solid #22322b; padding-top: calc(var(--sh) * 0.01);
  font-size: calc(clamp(13px, calc(var(--sw) * 0.016), 30px) * var(--z));
  color: #93ab9e;
}
.tv .tv-drobno .vrsta {
  display: flex; justify-content: space-between; gap: calc(var(--sw) * 0.01);
  padding: .12em 0; white-space: nowrap;
}
.tv .tv-drobno .vrsta b { color: #dff0e6; }
.tv .tv-klase {
  display: flex; gap: calc(var(--sw) * 0.016); flex: 1 1 auto; align-items: stretch;
  min-height: 0;
}
.tv .tv-klasa {
  flex: 1 1 0; background: #141d19; border-radius: calc(var(--sh) * 0.014);
  padding: calc(var(--sh) * 0.014) calc(var(--sw) * 0.014); display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}

/* Seznam gajbic pod stevilko: sam se pomika na dno, z daljincem pa se da
   pogledati nazaj. Drsnika ni - premikamo ga sami. */
.tv .tv-seznam {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  border-top: 1px solid #22322b; margin-top: calc(var(--sh) * 0.008); padding-top: calc(var(--sh) * 0.008);
  scrollbar-width: none;
}
.tv .tv-seznam::-webkit-scrollbar { display: none; }
.tv .tv-seznam .g {
  display: flex; justify-content: space-between; gap: calc(var(--sw) * 0.01);
  font-size: calc(clamp(12px, calc(var(--sw) * 0.015), 26px) * var(--z));
  color: #b9cfc2; padding: .18em 0; white-space: nowrap;
}
.tv .tv-seznam .g .t { color: #8fa89a; flex: 0 0 auto; }
/* V majhnem odru (ozko okno, izbrano razmerje) se koda raje skrajša, kot da
   bi štrlela čez rob stolpca. */
.tv .tv-seznam .g > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.tv .tv-klasa.premikam { outline: calc(var(--sh) * 0.004) solid #4d7f5e; outline-offset: -calc(var(--sh) * 0.002); }
.tv .tv-klasa .ime {
  flex: 0 0 auto;
  font-size: calc(clamp(14px, calc(var(--sw) * 0.02), 36px) * var(--z)); color: #8fa89a;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv .tv-stevilo {
  flex: 0 0 auto;
  font-size: calc(clamp(30px, calc(var(--sw) * 0.074), 150px) * var(--z)); font-weight: 800;
  line-height: 1;
}
.tv .tv-kg {
  flex: 0 0 auto;
  font-size: calc(clamp(15px, calc(var(--sw) * 0.021), 40px) * var(--z)); color: #93ab9e;
  font-weight: 600; white-space: nowrap;
}
/* Skupaj: ta stolpec nima seznama gajbic, zato je v njem prostora na pretek
   - skupno stevilo je zato VECJE od stevil po klasah (Urh: »prostora je
   dovolj, naj zgleda bolj estetsko«). */
.tv .tv-klasa.skupaj { background: #17301f; }
.tv .tv-klasa.skupaj .tv-stevilo {
  color: #7ee0a1;
  font-size: calc(clamp(40px, calc(var(--sw) * 0.105), 210px) * var(--z));
}
.tv .tv-klasa.skupaj .ime {
  font-size: calc(clamp(18px, calc(var(--sw) * 0.026), 46px) * var(--z));
}
.tv .tv-klasa.skupaj .tv-kg {
  font-size: calc(clamp(20px, calc(var(--sw) * 0.028), 52px) * var(--z));
  color: #a8c4b3;
}
/* Napacno skenirana klasa: CEL stolpec rdec, da se vidi s treh metrov -
   dokler je zadnja gajbica v njem napacna. */
.tv .tv-klasa.napaka { background: #6a1f1a; }
.tv .tv-klasa.napaka .ime, .tv .tv-klasa.napaka .tv-kg,
.tv .tv-klasa.napaka .tv-seznam .g, .tv .tv-klasa.napaka .tv-seznam .g .t {
  color: #ffd6d0;
}
.tv .tv-klasa.napaka .tv-stevilo { color: #fff; }
.tv .tv-klasa.napaka .tv-seznam { border-top-color: #8f3a33; }
.tv .tv-klasa .tv-opozorilo {
  flex: 0 0 auto; margin-top: calc(var(--sh) * 0.004);
  font-size: calc(clamp(13px, calc(var(--sw) * 0.017), 30px) * var(--z)); font-weight: 800;
  color: #ff9a8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv .tv-klasa.napaka .tv-opozorilo { color: #fff; }
/* Plan na televizorju: »12 / 15« in pod tem manjka / ✓ vse / PREVEČ. */
.tv .tv-plan { color: #7f988b; font-weight: 700; font-size: .55em; }
.tv .tv-dodatno { flex: 0 0 auto; color: #f0b650; font-weight: 600; white-space: nowrap;
  font-size: calc(clamp(14px, calc(var(--sw) * 0.019), 36px) * var(--z)); }
.tv .tv-dodatno b { color: #ffd38a; }
.tv .tv-plan-stanje {
  flex: 0 0 auto; margin-top: calc(var(--sh) * 0.004);
  font-size: calc(clamp(15px, calc(var(--sw) * 0.024), 44px) * var(--z));
  font-weight: 800; white-space: nowrap;
}
.tv .tv-plan-stanje.manjka { color: #f0b650; }
.tv .tv-plan-stanje.vse { color: #7ee0a1; }
.tv .tv-plan-stanje.prevec { color: #fff; }
.tv .tv-klasa.plan-prevec { background: #6a1f1a; }
.tv .tv-klasa.plan-vse { box-shadow: inset 0 0 0 calc(var(--sh) * 0.005) #3f9e62; }
.tv .tv-cakam.s-planom { flex-direction: column; }
.tv .tv-plan-cakam { margin-top: .6em; font-size: .8em; color: #b9cfc2; }
.tv .tv-klasa.plan-prevec .tv-stevilo { color: #fff; }
.tv .tv-klasa.plan-prevec .tv-plan { color: #ffd6d0; }
.tv .tv-plan-cakam b { color: #fff; }
.tv .tv-seznam .g.napacna { color: #ff9a8f; font-weight: 700; }
.tv .tv-zadnja.napaka { background: #6a1f1a; }
.tv .tv-zadnja.napaka .teza, .tv .tv-zadnja.napaka .kdaj { color: #ffd6d0; }
.tv .tv-zadnja {
  flex: 0 0 auto; background: #141d19; border-radius: calc(var(--sh) * 0.014);
  padding: calc(var(--sh) * 0.014) calc(var(--sw) * 0.016); display: flex; align-items: baseline;
  justify-content: space-between; gap: calc(var(--sw) * 0.02);
  transition: background .35s ease;
}
.tv .tv-zadnja.utrip { background: #2c5a38; }
.tv .tv-zadnja .koda {
  font-size: calc(clamp(20px, calc(var(--sw) * 0.038), 76px) * var(--z)); font-weight: 800;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden;
}
.tv .tv-zadnja .teza {
  font-size: calc(clamp(20px, calc(var(--sw) * 0.038), 76px) * var(--z)); font-weight: 800;
  color: #7ee0a1; white-space: nowrap;
}
.tv .tv-zadnja .kdaj {
  font-size: calc(clamp(13px, calc(var(--sw) * 0.017), 30px) * var(--z)); color: #8fa89a;
  white-space: nowrap;
}
.tv .tv-cakam {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  font-size: calc(clamp(22px, calc(var(--sw) * 0.044), 88px) * var(--z)); font-weight: 700;
  color: #8fa89a;
  text-align: center;
}

/* preglednica (Agrolit, narocila) - brez drsenja, vrstice se stisnejo */
.tv .tv-mreza {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  gap: calc(var(--sh) * 0.005); overflow: hidden; --vrstic: 10;
}
/* Pisava se ravna po stevilu vrstic: cela tabela mora na zaslon, tudi ce
   je poslovalnic petindvajset. */
.tv .tv-vrstica {
  display: grid; align-items: center; gap: calc(var(--sw) * 0.012);
  background: #141d19; border-radius: calc(var(--sh) * 0.008);
  padding: 0 calc(var(--sw) * 0.012); min-height: 0;
  flex: 1 1 0;
  font-size: calc(min(calc(var(--sw) * 0.021), calc(calc(var(--sh) * 0.74) / var(--vrstic) / 1.55), 40px)
                  * var(--z));
}
.tv .tv-vrstica .loci { color: #5d7367; padding: 0 .12em; }
.tv .tv-vrstica.agro { grid-template-columns: 2.4fr 1fr 1fr 1fr; }
.tv .tv-vrstica.naro { grid-template-columns: 2.2fr 1.6fr 1fr; }
.tv .tv-vrstica .kdo {
  font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.tv .tv-vrstica .st {
  text-align: right; font-weight: 700; white-space: nowrap;
}
.tv .tv-vrstica .pod {
  color: #8fa89a; font-size: .62em; font-weight: 600;
}
.tv .tv-vrstica.manjka { background: #2a2417; }
.tv .tv-vrstica.manjka .st.ostane { color: #ffc65c; }
.tv .tv-vrstica.zamuda { background: #3a2020; }
.tv .tv-vrstica.zamuda .rok { color: #ff9a8f; }
.tv .tv-vrstica.nujno { background: #2a2417; }
.tv .tv-vrstica.nujno .rok { color: #ffc65c; }
.tv .spr0 { color: #7ee0a1; }
.tv .spr1 { color: #ffc65c; }
.tv .spr2 { color: #8fa89a; }
/* Domaca narocila: vrstice obarvane kot v zavihku Narocila (nocne barve,
   televizor je vedno temen - tudi ce je telefon v svetli temi). */
.tv {
  --n-odprto: #5A2A26; --n-konec: #2C4A21;
  --n-nujno: #7E6C0E;  --n-zamuda: #8A4F0C;
  --n-rdeca: #612925;  --n-oranzna: #5E3E1C; --n-rumena: #54491A;
  --n-zelena: #2E4C24; --n-modra: #243F5A;   --n-vijolicna: #3D2E55;
  --n-siva: #33372F;
}
.tv .tv-vrstica.naro { border-left: calc(var(--sw) * 0.009) solid transparent; }
.tv .tv-vrstica.naro.n-odprto { border-left-color: var(--n-odprto); }
.tv .tv-vrstica.naro.n-konec { border-left-color: var(--n-konec); }
.tv .tv-vrstica.naro.n-nujno { border-left-color: var(--n-nujno);
  background: color-mix(in srgb, var(--n-nujno) 45%, #141d19); }
.tv .tv-vrstica.naro.n-zamuda { border-left-color: var(--n-zamuda);
  background: color-mix(in srgb, var(--n-zamuda) 45%, #141d19); }
.tv .tv-vrstica.naro.n-rdeca { border-left-color: var(--n-rdeca);
  background: color-mix(in srgb, var(--n-rdeca) 55%, #141d19); }
.tv .tv-vrstica.naro.n-oranzna { border-left-color: var(--n-oranzna);
  background: color-mix(in srgb, var(--n-oranzna) 55%, #141d19); }
.tv .tv-vrstica.naro.n-rumena { border-left-color: var(--n-rumena);
  background: color-mix(in srgb, var(--n-rumena) 55%, #141d19); }
.tv .tv-vrstica.naro.n-zelena { border-left-color: var(--n-zelena);
  background: color-mix(in srgb, var(--n-zelena) 55%, #141d19); }
.tv .tv-vrstica.naro.n-modra { border-left-color: var(--n-modra);
  background: color-mix(in srgb, var(--n-modra) 55%, #141d19); }
.tv .tv-vrstica.naro.n-vijolicna { border-left-color: var(--n-vijolicna);
  background: color-mix(in srgb, var(--n-vijolicna) 55%, #141d19); }
.tv .tv-vrstica.naro.n-siva { border-left-color: var(--n-siva);
  background: color-mix(in srgb, var(--n-siva) 55%, #141d19); }
.tv .tv-vrstica.naro .znacka-gratis {
  font-size: .55em; font-weight: 800; color: #7ee0a1; margin-left: .6em;
  vertical-align: middle;
}

/* Agrolit: vsaka poslovalnica ima svoj kvadratek - ime zgoraj, naroceno
   levo in dobavljeno desno, spodaj veliko, koliko je se dobaviti. Cela
   mreza gre na zaslon brez drsenja; velikost pisave se ravna po stevilu
   stolpcev (--st) in vrstic (--vr). */
.tv .tv-kartice {
  flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: repeat(var(--st, 5), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr); gap: calc(var(--sh) * 0.008) calc(var(--sw) * 0.006); overflow: hidden;
  --st: 5; --vr: 5;
  font-size: calc(min(calc(calc(var(--sw) * 0.92) / var(--st) / 10.5),
                      calc(calc(var(--sh) * 0.76) / var(--vr) / 6.4), 40px) * var(--z));
}
.tv .tv-kartica {
  background: #141d19; border-radius: calc(var(--sh) * 0.01); padding: .35em .6em .3em;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow: hidden; border-left: .45em solid #22322b;
}
.tv .tv-kartica.manjka { background: #2a2417; border-left-color: #ffc65c; }
.tv .tv-kartica.koncano { background: #17301f; border-left-color: #4d7f5e; }
.tv .tv-kartica.prazno { opacity: .45; }
/* Z miško (ali prstom na zrcaljenem zavihku) se kvadratek poudari. */
.tv .tv-kartica:hover { outline: calc(var(--sh) * 0.0035) solid #eafff1; outline-offset: -calc(var(--sh) * 0.0035); }
/* Ime gre lahko v dve vrstici (»Murska Sobota«, »Kostanjevica«) - prostora
   pod njim je dovolj, odrezano ime pa s treh metrov ni za nic. */
.tv .tv-kartica .ime {
  font-weight: 800; font-size: 1em; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.tv .tv-kartica .sifra { color: #8fa89a; font-weight: 600; margin-right: .35em; }
.tv .tv-kartica .par {
  display: flex; justify-content: space-between; gap: .6em;
  margin-top: .3em; line-height: 1.15;
}
.tv .tv-kartica .par > span { min-width: 0; }
.tv .tv-kartica .oz {
  display: block; color: #8fa89a; font-size: .52em; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv .tv-kartica .par .st { display: block; font-size: .95em; font-weight: 700; white-space: nowrap; }
.tv .tv-kartica .par .desno { text-align: right; }
.tv .tv-kartica .ostane {
  margin-top: auto; padding-top: .25em; min-width: 0;
  font-size: 1.7em; font-weight: 800; line-height: 1; white-space: nowrap;
  color: #ffc65c; overflow: hidden;
}
.tv .tv-kartica .ostane .oz { font-size: .34em; margin-bottom: .15em; }
.tv .tv-kartica.koncano .ostane { color: #7ee0a1; }
.tv .tv-kartica.prazno .ostane, .tv .tv-kartica .ostane.nic { color: #5d7367; }
.tv .tv-kartica .loci { color: #5d7367; padding: 0 .1em; }
.tv .tv-naslovna {
  background: none; padding: calc(var(--sh) * 0.002) calc(var(--sw) * 0.014); color: #8fa89a;
  font-size: calc(clamp(12px, calc(var(--sw) * 0.015), 26px) * var(--z)); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.tv .tv-vsota {
  flex: 0 0 auto; display: flex; gap: calc(var(--sw) * 0.02); justify-content: flex-end;
  font-size: calc(clamp(16px, calc(var(--sw) * 0.026), 48px) * var(--z)); font-weight: 800;
  color: #7ee0a1;
}
.tv .tv-vsota .oz { color: #8fa89a; font-weight: 600; }

/* Vrstica z gumbi: pokaze se ob pritisku tipke na daljincu (ali ob premiku
   miske) in se po petih sekundah sama skrije. Pri zrcaljenju zavihka je
   torej vse tako, kot je bilo - zaslon je cist. */
.tv .tv-gumbi {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: .5vh;
  padding: 1.1vh 1.4vw; background: rgba(8, 13, 11, .94);
  border-top: 1px solid #22322b;
  opacity: 0; transform: translateY(100%);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.tv.kaze .tv-gumbi {
  opacity: 1; transform: none; pointer-events: auto;
}
/* Ko je vrstica zunaj, se vsebina umakne, da je ne pokrije. Vrstica je
   pripeta na dno OKNA, zato je tu vh (okno), ne oder. */
.tv.kaze .tv-oder { padding-bottom: calc(2.2vh + 9.8vh * var(--z)); }
.tv .tv-gumbi button {
  background: #1d2a24; color: #d8e6dd; border: .3vh solid #2f4438;
  border-radius: 999px; padding: .45em 1.3em;
  font-size: calc(clamp(13px, 1.5vw, 26px) * var(--z));
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tv .tv-gumbi button[aria-pressed="true"] { background: #2c5a38; color: #fff; }
/* Gumbi so v svoji vrsti, da napis nad njimi ne tisci nanje. */
.tv .tv-gumbi .tv-vrsta {
  display: flex; gap: .8vw; justify-content: center; flex-wrap: wrap;
}
/* Kaksno je vsebinsko polje okna - natanko to gre pri zrcaljenju na
   televizor, zato se tu takoj vidi, od kod so crne proge. */
.tv .tv-gumbi .tv-okno {
  color: #8fa89a; text-align: center; max-width: 92vw;
  font-size: calc(clamp(11px, 1.2vw, 20px) * var(--z));
}
.tv .tv-gumbi .tv-okno.slabo { color: #ffc65c; font-weight: 700; }
/* Izbrani gumb mora biti ociten s treh metrov - debela svetla obroba in
   druga podlaga, ne le tanek outline. Velja tudi, kadar je fokus prisel s
   tipkovnice (daljinec je za brskalnik tipkovnica). */
.tv .tv-gumbi button:focus,
.tv .tv-gumbi button:focus-visible {
  outline: none; border-color: #eafff1; background: #3b6f4a; color: #fff;
  box-shadow: 0 0 0 .45vh rgba(234, 255, 241, .55);
  transform: translateY(-.4vh);
}
.tv .tv-brez {
  position: fixed; left: 1.4vw; bottom: 1.4vh; color: #ff9a8f;
  font-size: clamp(12px, 1.4vw, 24px); font-weight: 700;
}
/* Kdaj so bili podatki nazadnje prebrani. Majhno in sivo, da ne moti - a
   dovolj, da se s treh metrov vidi, ali zaslon se ZIVI. Kadar zaostaja
   (okno zamrznjeno, mrtva povezava), postane rumeno in pove, koliko. */
.tv .tv-cas {
  position: fixed; left: 1.2vw; bottom: .9vh; color: #7d938a;
  font-size: clamp(11px, 1.2vw, 20px); font-weight: 600;
  /* Napis lezi cez spodnjo ploscico, zato ima svojo temno podlago - tako
     je citljiv in ne zgleda, kot da je pomotoma cez. */
  background: rgba(8, 13, 11, .8); padding: .15em .7em; border-radius: 999px;
}
.tv .tv-cas.zastara { color: #ffc65c; font-weight: 800; }

/* -- izmenične barve vrstic: konci trakov ------------------------------- */
/* Urh: »na robu zgleda čudno, saj gre čisto do roba«. Trak izmenične barve
   zato dobi zaobljena konca in malo zraka levo in desno. Zaobljeni vogali
   celic se izrišejo samo pri 'separate' - pri 'collapse' jih brskalnik
   ne nariše, zato je tabela odslej 'separate' z ničelnim razmikom (videz
   ostane isti, ker črte rišejo zgornji robovi celic). */
table.tabela { border-collapse: separate; border-spacing: 0; }
table.tabela tr td:first-child {
  border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
table.tabela tr td:last-child {
  border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
table.tabela tr td:first-child, table.tabela tr th:first-child {
  padding-left: 10px;
}
table.tabela tr td:last-child, table.tabela tr th:last-child {
  padding-right: 10px;
}
/* Preglednice, ki so imele prvo oziroma zadnjo celico poravnano z robom,
   dobijo isti zrak - sicer bi se besedilo dotikalo konca traku. */
.tabela-ovoj table.tabela tr td:first-child,
.tabela-ovoj table.tabela tr th:first-child,
table.agrolit-t tr td:first-child, table.agrolit-t tr th:first-child {
  padding-left: 10px;
}
table.dobavnice-t tr td:last-child, table.dobavnice-t tr th:last-child {
  padding-right: 10px;
}
/* Tabela v kartici brez notranjega roba: trak ne sme teči do roba kartice. */
.kartica.tesno > table.tabela { width: calc(100% - 20px); margin: 0 10px; }