/* Navigo — stilovi.
   Vrijednosti su preuzete iz demoa i zapisane u STYLE.md.
   Nova boja se ne uvodi bez upisa u STYLE.md. */

:root{
  --bg:#fff; --side:#f7f6f4; --ink:#25231e; --ink2:#5f5c54; --ink3:#928e84;
  --line:#e9e7e2; --chip:#efede8; --sel:#e6e4de; --blue:#2a78d6;

  /* --- Podloge i crte ------------------------------------------------ */
  --card:#fff; --card2:#fcfbf9; --card3:#f4f2ed; --focus:#fffdf8; --line2:#d6d4cf;

  /* --- Obitelji boja: podloga i tekst --------------------------------- */
  --green:#1f8a4c;      --green-h:#166b3b;
  --green-ink:#1c5c2e;  --green-soft:#dcefe0;
  --red:#a8322a;        --red-h:#8c281f;
  --red-ink:#7d2a22;    --red-soft:#f7dcda;
  --yellow-ink:#6b5310; --yellow-soft:#faeecb;
  --blue-h:#1f66bd;     --blue-ink:#1c4a80;   --blue-soft:#dce8f8;
  --purple-ink:#4a3080; --purple-soft:#e8e0f5;
  --orange-ink:#7a4a15; --orange-soft:#f6e2cf;
  /* Tirkizna je sedma obitelj. Uvedena je zato što su u retku upita sve
     ostale bile zauzete, a prijava interesa i upit s obrasca moraju se
     razlikovati na prvi pogled. */
  --teal-ink:#155f61;   --teal-soft:#d6eeee;

  /* --- Točke prioriteta i trake --------------------------------------- */
  --dot1:#d93a2b; --dot2:#e08b1a; --dot3:#b8b4ab; --dot4:#2f9e4f;
  --bar-pos:#7fbf95; --bar-neg:#d9a6a0;

  /* --- Kalendar, razgovori, oznake ------------------------------------ */
  --today:#fdf7e8; --outside-ink:#c6c2b8;
  --mine:#e7f1e8; --mine-line:#cfe0d2;
  --unread-line:#e4b8b2; --unread-bg:#fdf3f1;
  --milan:#c9082a;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- raspored */

.app{display:flex;min-height:100vh}

.side{
  width:242px;flex:none;background:var(--side);border-right:1px solid var(--line);
  padding:12px 8px;font-size:13.5px;position:sticky;top:0;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;
}

.ws{display:flex;align-items:center;gap:9px;padding:6px 8px;font-weight:650;margin-bottom:4px}
/* Znak uz naziv je slika logotipa. Pravilo za <i> ostaje jer se isti razmak
   i oblik koriste ako slika ne učita — tada se vidi prazan zaobljeni kvadrat
   umjesto pomaknutog teksta. */
.ws img{width:22px;height:22px;border-radius:6px;display:block;flex:none}
.ws i{width:22px;height:22px;border-radius:6px;background:var(--milan);color:#fff;font-style:normal;
      font-size:12px;text-align:center;line-height:22px;font-weight:800}

.grp{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);
     padding:12px 8px 5px;font-weight:600}
.grp.lk{color:var(--yellow-ink)}
.grp.sh{color:var(--green-ink)}

.nav{display:flex;gap:9px;padding:5px 8px;border-radius:6px;color:var(--ink2);
     cursor:pointer;margin-bottom:1px;user-select:none;text-decoration:none}
.nav:hover{background:var(--chip)}
.nav.on{background:var(--sel);color:var(--ink);font-weight:600}
.nav em{font-style:normal;width:17px;text-align:center;flex:none}

/* Podstavka: paket ispod svoje stavke u izborniku.
   Uvučena je i sitnija od nadređene, s crtom slijeva koja pokazuje da pripada
   njoj. Dugi nazivi se skraćuju umjesto da razvuku izbornik. */
.nav.sub{padding-left:26px;font-size:12px;color:var(--ink3);
         border-left:2px solid var(--line);border-radius:0 6px 6px 0;margin-left:9px}
.nav.sub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav.sub:hover{color:var(--ink2)}
.nav.sub.on{background:var(--sel);color:var(--ink);font-weight:600;border-left-color:var(--ink3)}

.side-foot{margin-top:auto;padding:12px 8px 4px;border-top:1px solid var(--line);font-size:12px}
.side-foot .who{color:var(--ink2);font-weight:600;margin-bottom:3px}
.side-foot .signout{color:var(--ink3);text-decoration:none}
.side-foot .signout:hover{color:var(--ink);text-decoration:underline}

/* Bez ograničenja širine — tablice imaju deset i više stupaca.
   Tekstualni blokovi se i dalje sami sužavaju preko .desc. */
.main{flex:1;min-width:0;padding:24px 34px 80px;max-width:none}

/* ---------------------------------------------------------------- tekst */

.crumb{font-size:12px;color:var(--ink3);margin-bottom:12px}
h1{font-size:28px;margin:0 0 6px;letter-spacing:-.015em}
h1 .ic{margin-right:8px}
.desc{color:var(--ink2);margin:0 0 16px;max-width:80ch}
.desc.tight{margin-bottom:10px}
h3{font-size:14.5px;margin:24px 0 9px}
.hint{font-size:12px;color:var(--ink3);margin-top:22px;border-top:1px solid var(--line);padding-top:11px}
.hint.tight{margin-top:6px;border-top:0;padding-top:0}
.why{font-size:11.5px;color:var(--ink3)}

ul.plain{margin:8px 0 0;padding-left:18px}
ul.plain li{margin-bottom:3px}

/* ---------------------------------------------------------------- oznake */

.lock{display:inline-flex;align-items:center;gap:6px;background:var(--yellow-soft);color:var(--yellow-ink);
      border-radius:5px;padding:4px 10px;font-size:11.5px;font-weight:650;margin-bottom:12px}
.share{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:var(--green-ink);
       border-radius:5px;padding:4px 10px;font-size:11.5px;font-weight:650;margin-bottom:12px}

.tag{display:inline-block;padding:1.5px 8px;border-radius:4px;background:var(--chip);
     font-size:11px;color:var(--ink2);white-space:nowrap}
/* Sitna oznaka uz naziv događaja — stanje zalihe i brojke paketa.
   Manja od obične jer stoji uz naziv i ne smije se natjecati s njim. */
.tag.mini, .chip.mini{font-size:9px;padding:1px 5px}

/* Oznaka koja je ujedno poveznica — mora se vidjeti da se na nju klikne,
   ali ne smije izgledati kao gumb u retku tablice. */
/* Razdjelnik u traci klubova: „Ostali" nije klub nego ono što nije nijedan. */
.clubsep{width:1px;height:18px;background:var(--line);margin:0 4px;flex:none}
.clubtab.plain{font-style:italic}

/* Red čekanja za WhatsApp. Poslani posive i ostaju na mjestu, da se vidi
   dokle se stiglo — micanje bi popis preslagivalo pod rukom. */
.waqueue{display:flex;flex-direction:column;gap:4px;margin:8px 0;
         max-height:40vh;overflow-y:auto}
.waitem{display:flex;align-items:center;gap:8px;padding:5px 8px;
        border:1px solid var(--line);border-radius:6px;font-size:12.5px}
.waitem .ime{font-weight:600;flex:1}
.waitem.done{opacity:.5}

/* Točkica uz zalihu: stanje se vidi periferno, bez čitanja brojke.
   Zelena dostupno, narančasta pri kraju, crvena rasprodano. */
/* Točkica uz stanje. Pune, jake boje — prigušene se u retku ne razaznaju,
   a cijela svrha je da se stanje vidi bez čitanja. */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;
     margin-right:6px;vertical-align:middle;flex:none}
.dot.g{background:#16a34a}
.dot.o{background:#f59e0b}
.dot.r{background:#dc2626}

/* Zaliha se upisuje u retku, bez prozorčića — kod cijele sezone je to
   nekoliko koraka manje po utakmici. */
/* Stanje i cijena u retku: brojka koja se klikne i postane polje.
   Kapacitet i cijena se mijenjaju rijetko, pa ne trebaju stalno zauzimati
   mjesto — ali kad zatrebaju, ne smiju tražiti prozorčić. */
.stanje, .cijena{text-decoration:none;color:var(--ink);cursor:pointer;
                 padding:2px 6px;border-radius:5px;white-space:nowrap}
.stanje:hover, .cijena:hover{background:var(--card2);outline:1px solid var(--line)}
.cijena.prazna{color:var(--ink3)}
.skriveno{display:none}

/* Kvačica s natpisom. Postojeći .chk je kvadratić bez teksta, pa mu se natpis
   nije vidio — ovo je zaseban oblik za slučaj kad natpis treba. */
.kvac{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
      border:1px solid var(--line);border-radius:6px;font-size:12.5px;
      color:var(--ink2);cursor:pointer;white-space:nowrap}
.kvac:hover{border-color:var(--ink3);color:var(--ink)}
.kvac input{margin:0;cursor:pointer}
.kvac:has(input:checked){background:var(--green-soft);border-color:var(--green-soft);
                         color:var(--green-ink);font-weight:600}

/* Barkod za plaćanje. Bijela podloga i rub su dio čitljivosti — čitači
   traže prazan prostor oko koda, pa se ne smije stisnuti uz okvir. */
/* Plan objava: nekoliko utakmica koje treba objaviti, jedna ispod druge.
   Klik vodi ravno na tekst objave. */
/* Dan u planu objava. Naziv dana stoji nad svojim stavkama, s crtom lijevo —
   tako se popis čita kao raspored, ne kao niz. */
.plandan{margin:10px 0 2px;padding-left:10px;border-left:2px solid var(--line)}
.plandan-n{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
           color:var(--ink2);font-weight:600;margin-bottom:4px}
.plandan:first-of-type{border-left-color:var(--teal-ink)}
.plandan:first-of-type .plandan-n{color:var(--teal-ink)}

.planlist{display:flex;flex-direction:column;gap:3px;margin:8px 0 2px}
.planitem{display:flex;align-items:baseline;gap:8px;padding:4px 8px;
          border-radius:6px;text-decoration:none;color:var(--ink);
          background:var(--card2)}
.planitem:hover{background:var(--chip)}
.planitem b{font-size:12.5px}

.barkod{background:#fff;padding:10px;border:1px solid var(--line);
        border-radius:6px;margin:6px 0;overflow-x:auto}
.barkod img{display:block;max-width:100%;height:auto;image-rendering:pixelated}

.stockform{display:inline-flex;align-items:center}
.stocknum{width:52px;padding:3px 6px;border:1px solid var(--line);border-radius:5px;
          font:600 12px inherit;background:var(--card);color:var(--ink);text-align:center}
.stocknum:hover{border-color:var(--ink3)}
.stocknum:focus{outline:2px solid var(--teal-soft);outline-offset:1px}

/* Poziv na potez u stupcu „Sljedeće". Za razliku od ostalih poruka, ova se
   klikne — pa mora izgledati kao nešto što se klikne, a ne kao obavijest. */
.cta{display:inline-block;padding:3px 10px;border-radius:6px;font-weight:600;
     font-size:12px;text-decoration:none;
     background:var(--teal-soft);color:var(--teal-ink)}
.cta:hover{filter:brightness(.94)}
.cta.hitno{background:var(--red-soft);color:var(--red-ink)}

a.tag{text-decoration:none;cursor:pointer}
a.tag:hover{filter:brightness(.93);text-decoration:underline}

.tag.g{background:var(--green-soft);color:var(--green-ink)}
.tag.y{background:var(--yellow-soft);color:var(--yellow-ink)}
.tag.r{background:var(--red-soft);color:var(--red-ink)}
.tag.b{background:var(--blue-soft);color:var(--blue-ink)}
.tag.p{background:var(--purple-soft);color:var(--purple-ink)}
.tag.o{background:var(--orange-soft);color:var(--orange-ink)}
.tag.t{background:var(--teal-soft);color:var(--teal-ink)}

.pos{color:var(--green-ink);font-weight:600}
.neg{color:var(--red-ink);font-weight:600}

.pd{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
.pd1{background:var(--dot1)}.pd2{background:var(--dot2)}.pd3{background:var(--dot3)}.pd4{background:var(--dot4)}

/* ---------------------------------------------------------------- tablice */

.scrollx{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-weight:500;color:var(--ink3);font-size:11px;padding:7px 8px;
   border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.t{font-weight:600}
tr.done td{opacity:.55}

/* Pročitanost upita — isto čitanje kao u pošti.
   Pročitan redak se povlači u drugi plan, nepročitan se drži naprijed.
   Stil je vezan uz .inq, da se ne odrazi na tablice drugih modula. */
.inq td.t{font-weight:500;color:var(--ink2)}
.inq tr.unseen td.t{font-weight:700;color:var(--ink)}
.inq tr.unseen td{background:var(--blue-soft)}
.inq tr.unseen td:first-child{box-shadow:inset 2px 0 0 var(--blue)}

/* ---------------------------------------------------------------- okviri */

.callout{background:var(--side);border-radius:8px;padding:12px 15px;margin:14px 0;
         font-size:13px;color:var(--ink2)}
.callout b{color:var(--ink)}

.rule{border-left:3px solid var(--dot1);background:var(--side);border-radius:0 8px 8px 0;
      padding:12px 15px;margin:14px 0;font-size:13px;color:var(--ink2)}
.rule b{color:var(--ink)}

.pinbox{border:1px solid var(--line2);background:var(--card2);border-radius:10px;padding:2px 14px 14px;margin:6px 0 14px}

.cards{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.card{border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:150px}
.card .big{font-size:22px;font-weight:700}
a.card.link{text-decoration:none;color:var(--ink)}
a.card.link:hover{background:var(--side)}

.addrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0;padding:12px;
        border:1px dashed var(--line2);border-radius:10px;background:var(--card2)}

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

/* ---------------------------------------------------------------- poruke */

.flash{border-radius:6px;padding:8px 12px;font-size:13px;margin-bottom:14px}
.flash.success{background:var(--green-soft);color:var(--green-ink)}
.flash.error{background:var(--red-soft);color:var(--red-ink)}
.flash.info{background:var(--blue-soft);color:var(--blue-ink)}

/* ---------------------------------------------------------------- polja */

input.f,select,input.srch,textarea.f{
  border:1px solid var(--line2);border-radius:8px;padding:8px 12px;font-size:13.5px;
  background:var(--card2);color:var(--ink);font-family:inherit;box-sizing:border-box;max-width:100%
}
input.f:focus,select:focus,input.srch:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
input.srch{width:100%;max-width:420px;margin:2px 0 6px}
/* Vrijedi za input, select i textarea — ranije je bilo vezano samo uz input,
   pa je padajući izbornik ostajao bez širine i izlazio iz prozorčića. */
.f.wide{width:100%;max-width:420px;display:block;box-sizing:border-box}

label.lbl,form label{display:block;font-size:12px;color:var(--ink2);margin:12px 0 3px;font-weight:600}

.check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);
       margin:0;padding:4px 0;font-weight:400;cursor:pointer}
.check input{margin:0;accent-color:var(--blue)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px;margin-bottom:6px}

form.inline{display:inline}

/* ---------------------------------------------------------------- gumbi */

.gbtn{display:inline-block;background:var(--green);color:#fff;border:0;border-radius:6px;
      padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none}
.gbtn:hover{background:var(--green-h)}
.gbtn.wide{width:100%;margin-top:18px;padding:10px}

/* Gumb za nepovratnu radnju — namjerno se razlikuje od zelenog. */
.dbtn{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:6px;
      padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none}
.dbtn:hover{background:var(--red-h)}

.obtn{display:inline-block;background:var(--card);border:1px solid var(--line2);border-radius:6px;
      padding:7px 12px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink);text-decoration:none}
.obtn:hover{background:var(--chip)}

.sbtn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:5px;
      padding:4px 10px;font-size:10.5px;font-weight:600;white-space:nowrap;cursor:pointer;
      font-family:inherit;text-decoration:none}
.sbtn:hover{background:var(--blue-h)}
.sbtn.grey{background:var(--chip);color:var(--ink2)}
.sbtn.grey:hover{background:var(--sel)}
.sbtn[disabled]{opacity:.35;cursor:default}
.sbtn[disabled]:hover{background:var(--chip)}

button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------------------------------------------------------------- kalendar */

.calnav{display:flex;align-items:center;gap:10px;margin:12px 0}
.calnav b{font-size:15px;min-width:150px}

.legend{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}

.calwrap{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);background:var(--side)}
.calhead div{padding:6px 8px;font-size:11px;color:var(--ink3);font-weight:600;
             text-transform:uppercase;letter-spacing:.05em;text-align:left}

.calweek{position:relative}
.calrow{display:grid;grid-template-columns:repeat(7,1fr)}
.calcell{min-height:92px;border-top:1px solid var(--line);border-right:1px solid var(--line);
         padding:4px 5px;overflow:hidden}
.calrow .calcell:last-child{border-right:0}
.calcell.outside{background:var(--card2)}
.calcell.outside .calday{color:var(--outside-ink)}
.calcell.today{background:var(--today)}
.calday{font-size:11px;line-height:15px;height:15px;color:var(--ink3);font-weight:600;margin-bottom:3px;
        display:block;text-decoration:none;position:relative;z-index:3;width:fit-content}
a.calday:hover{color:var(--ink);text-decoration:underline}
.calcell.today .calday{color:var(--yellow-ink)}
.calspacer{width:100%}

/* Trake višednevnih događaja leže iznad ćelija, poravnate po stupcima.
   Gornji odmak od 22px odgovara visini broja dana (4px razmak + 15px + 3px). */
.calbars{position:absolute;left:0;right:0;top:22px;pointer-events:none;z-index:2}
.calbar{position:absolute;height:13px;line-height:13px;font-size:9.5px;font-weight:600;
        border-radius:3px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        pointer-events:auto;cursor:default;box-sizing:border-box}
.calbar.cont-l{border-top-left-radius:0;border-bottom-left-radius:0}
.calbar.cont-r{border-top-right-radius:0;border-bottom-right-radius:0}

.calev{font-size:9.5px;line-height:1.35;border-radius:3px;padding:2px 4px;margin-bottom:2px;
       background:var(--chip);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.calev b{font-weight:700}
.calev.g{background:var(--green-soft);color:var(--green-ink)}
.calev.y{background:var(--yellow-soft);color:var(--yellow-ink)}
.calev.r{background:var(--red-soft);color:var(--red-ink)}
.calev.b{background:var(--blue-soft);color:var(--blue-ink)}
.calev.p{background:var(--purple-soft);color:var(--purple-ink)}
.calev.o{background:var(--orange-soft);color:var(--orange-ink)}

.calmore{font-size:9.5px;color:var(--ink3);padding:1px 4px;display:block;text-decoration:none}
a.calmore:hover{color:var(--ink);text-decoration:underline}

a.calev,a.calbar{text-decoration:none;display:block}
a.calev:hover,a.calbar:hover{filter:brightness(.93)}

/* Panel s podacima o događaju */
.evbox{border:1px solid var(--line2);background:var(--card2);border-radius:10px;padding:4px 16px 16px;margin:12px 0}
.evhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.evhead h3{margin:14px 0 8px}
.evtable{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px}
.evtable th{width:150px;text-align:left;vertical-align:top;color:var(--ink3);font-weight:500;
            font-size:12px;padding:5px 8px 5px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.evtable td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:top}
.evtext{font-size:13px;color:var(--ink2);background:var(--card);border:1px solid var(--line);
        border-radius:8px;padding:10px 12px}

@media(max-width:820px){
  .calwrap{overflow-x:auto}
  .calhead,.calrow{min-width:640px}
  .calcell{min-height:74px}
}

.reading{border:1px solid var(--line);border-radius:8px;padding:9px 14px;margin:10px 0;background:var(--card2)}
.reading summary{cursor:pointer;font-size:12.5px;color:var(--ink2)}
.reading summary:hover{color:var(--ink)}
.reading[open] summary{margin-bottom:8px}

/* Prozorčić — otvara se preko adrese (#id), bez JavaScripta.
   Zatvara se poveznicom na # ili tipkom Odustani. */
.modal{display:none;position:fixed;inset:0;background:rgba(20,18,14,.35);
       align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:50}
/* Klik po pozadini namjerno NE zatvara: prečesto se dogodi slučajno i pojede
   ispunjen obrazac. Zatvara se tipkom Esc ili gumbom Odustani. */
.modal:target{display:flex}
.mbox{background:var(--card);border-radius:14px;padding:20px 22px;width:100%;max-width:420px;
      box-shadow:0 20px 60px rgba(0,0,0,.25)}
.mbox h3{margin:0 0 4px}
.mfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* Filtri u obliku pilula */
/* Odabir pogleda. Kartice s donjom crtom umjesto niza poveznica — inače
   izgleda kao tekst i ne vidi se da se bira jedno od nekoliko.
   Koriste ih Upiti, Start sezone i Sezona. */
.views{display:flex;gap:2px;flex-wrap:wrap;margin:10px 0 14px;
       border-bottom:1px solid var(--line)}
.views a{font-size:12.5px;padding:7px 14px;color:var(--ink2);text-decoration:none;
         border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.views a:hover{color:var(--ink);background:var(--card2)}
.views a.on{color:var(--teal-ink);border-bottom-color:var(--teal-ink);font-weight:600}
.views .cnt{font-size:10px;background:var(--chip);color:var(--ink2);
            padding:1px 6px;border-radius:10px;margin-left:5px}
.views a.on .cnt{background:var(--teal-soft);color:var(--teal-ink)}

/* Kratka oznaka u tablici — zamjenjuje široki padajući izbornik.
   Klik otvara prozorčić za taj redak. */
.chip{display:inline-block;min-width:34px;text-align:center;padding:2px 7px;border-radius:4px;
      background:var(--chip);color:var(--ink2);font-size:10.5px;font-weight:700;
      text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.chip:hover{filter:brightness(.94)}
.chip.g{background:var(--green-soft);color:var(--green-ink)}
.chip.y{background:var(--yellow-soft);color:var(--yellow-ink)}
.chip.r{background:var(--red-soft);color:var(--red-ink)}
.chip.b{background:var(--blue-soft);color:var(--blue-ink)}
.chip.p{background:var(--purple-soft);color:var(--purple-ink)}
.chip.o{background:var(--orange-soft);color:var(--orange-ink)}

.legendbox{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:12px 0;
           font-size:12px;display:flex;flex-direction:column;gap:6px}
.legendbox .chip{margin-left:6px}
.legendbox .why{margin-right:4px}

/* Odabir statusa u retku */
.statusform{display:flex;gap:4px;align-items:center}
.statusform select{font-size:11px;padding:3px 6px;border-radius:5px;max-width:190px;
                   border:1px solid var(--line2);background:var(--card);font-family:inherit}

/* Zarada sezone */
.seasonbox{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:8px 0 14px}
.seasonhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px}
.seasonhead .big{font-size:26px;font-weight:700;line-height:1.1}
.seasongoal{text-align:right}
.seasongoal b{font-size:15px}

.progress{height:14px;background:var(--chip);border-radius:7px;overflow:hidden;margin-bottom:6px}
.progress span{display:block;height:100%;border-radius:7px}
.progress span.p{background:var(--dot4)}
.progress span.n{background:var(--blue)}
/* Preko kapaciteta. Plava je značila „drukčije", a ovdje treba značiti
   „pazi" — traženo je više karata nego što ih možemo dati. */
.progress span.over{background:var(--red)}
.progress.small{height:8px;margin-bottom:2px}

/* Redak zbroja u tablici */
tr.sumrow td{border-top:2px solid var(--line);border-bottom:0;font-weight:600;background:var(--card2)}
/* U dugačkoj tablici prodaja zbroj ostaje vidljiv pri dnu okvira. */
table.sheet tr.sumrow td{position:sticky;bottom:0;background:var(--card3);z-index:2}

/* Tablica koja teče s glavnim klizačem nema svoj okvir, pa se zbroj ne lijepi:
   inače bi cijelo vrijeme lebdio pri dnu prozora i prekrivao retke.
   Zaglavlje ostaje ljepljivo — ono se lijepi za vrh prozora i tu je od koristi. */
table.sheet.flow tr.sumrow td{position:static}

/* Poveznica za sortiranje u zaglavlju tablice */
a.sortlink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line)}
a.sortlink:hover{color:var(--ink);border-bottom-color:var(--ink3)}

/* Analitika */
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.warn td{background:var(--today)}

.bar{height:9px;background:var(--chip);border-radius:5px;overflow:hidden}
.bar span{display:block;height:100%}
.bar span.p{background:var(--bar-pos)}
.bar span.n{background:var(--bar-neg)}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
@media(max-width:900px){.twocol{grid-template-columns:1fr}}

/* Kartice listova */
.tabsbar{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:10px 0 0}
.tab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;
     color:var(--ink2);text-decoration:none;border:1px solid transparent;border-bottom:0;
     border-radius:7px 7px 0 0;position:relative;top:1px}
.tab:hover{background:var(--chip)}
.tab.on{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600}
.tab .cnt{font-size:10px;color:var(--ink3);background:var(--chip);border-radius:9px;padding:1px 6px}
.tab.on .cnt{background:var(--sel)}

/* Ispis Google lista */
.sheetbox{border:1px solid var(--line);border-radius:0 8px 8px 8px;max-height:560px;overflow:auto}
table.sheet{font-size:11.5px;min-width:100%}
table.sheet th{background:var(--side);font-weight:600;color:var(--ink2);font-size:11px;
               white-space:nowrap;position:sticky;top:0;z-index:2}
table.sheet td{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}

/* Traka prolaza: tri kartice s brojem i stanjem, uvijek istim redoslijedom.
   U 08:00 se s nje vidi jesu li sva tri prolaza odrađena, bez listanja. */
.passbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 20px}
.passchip{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;
          border:1px solid var(--line);border-radius:10px;padding:9px 14px;min-width:150px}
.passchip b{font-size:14px}
.passchip.open{border-color:#c8452f;background:var(--card2)}
.passchip.done{opacity:.55}
.passchip.empty{opacity:.7}
.passchip:hover{border-color:var(--ink3)}

/* Naziv događaja vodi u detalj. Podcrtava se tek na prijelaz mišem, jer bi
   stalna crta u tablici od dvadeset redaka stvarala šum. */
/* Odabir razdoblja — segmentirani prekidač.
   Spojene tipke s jednim okvirom, umjesto niza poveznica: odmah se vidi da je
   riječ o izboru jednog od tri, a ne o tri zasebne radnje. */
.segbar{display:inline-flex;border:1px solid var(--line);border-radius:8px;
        overflow:hidden;margin:10px 0 14px}
.seg{padding:6px 14px;font-size:12.5px;color:var(--ink2);text-decoration:none;
     background:var(--card);border-right:1px solid var(--line);white-space:nowrap}
.seg:last-child{border-right:0}
.seg:hover{background:var(--card2)}
.seg.on{background:var(--teal-soft);color:var(--teal-ink);font-weight:600}

/* Brojka u segmentu — ista oznaka kao u karticama, inače se broj slijepi
   uz tekst i čita kao dio naziva. */
.seg .cnt{font-size:10px;background:var(--chip);color:var(--ink2);
          padding:1px 6px;border-radius:10px;margin-left:5px}
.seg.on .cnt{background:#fff;color:var(--teal-ink)}

/* Narančasto upozorenje u tekstu — za odbrojavanje od 7 do 14 dana i za
   dostavu, koja je jedina stavka koja se ne smije odgoditi.
   Postojeći .warn boja pozadinu retka, pa je ovdje potrebna zasebna klasa. */
b.warn, .warn{color:var(--orange-ink);font-weight:600}
tr.warn td{background:var(--today);color:inherit}

/* Popis utakmica izvan popisa klubova. Oznake u nizu, s brojem uz svaku —
   služi pregledu, ne kliktanju, pa nisu poveznice. */
.otherlist{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.otherlist .tag{font-size:11px}

.evlink{color:var(--teal-ink);text-decoration:none;font-weight:600}
.evlink:hover{text-decoration:underline}

/* Događaj koji traži potez. Žuta podloga, a ne obrub — na listi od dvadeset
   redaka obrub se izgubi, podloga se vidi periferno. Zatvoreni događaji su
   obični i pogled ih preskače. */
table.sheet tr.todo td{background:var(--yellow-soft)}
table.sheet tr.todo td b{color:var(--yellow-ink)}

/* Crta zdesna govori koliko je hitno, u tri stupnja.
   Crta umjesto obojene pozadine: pozadina bi se tukla s bojama statusa, a
   upravo su oni ono zbog čega se redak i gleda.
   Negativan pomak stavlja je uz desni rub zadnje ćelije. */
table.sheet tr.w1 td:last-child{box-shadow:inset -3px 0 0 var(--red-ink)}
table.sheet tr.w2 td:last-child{box-shadow:inset -3px 0 0 var(--orange-ink)}
table.sheet tr.w3 td:last-child{box-shadow:inset -3px 0 0 var(--green-ink)}
/* Gumbi u zadnjoj ćeliji ne smiju naletjeti na crtu. */
table.sheet tr.w1 td:last-child,
table.sheet tr.w2 td:last-child,
table.sheet tr.w3 td:last-child{padding-right:12px}

/* Izbornik statusa u retku ploče.
   Izgleda kao oznaka, ne kao polje obrasca — mijenja se često, a redak mora
   ostati čitljiv kao tablica. Boja prati odabranu vrijednost. */
.statuspick{border:0;border-radius:4px;padding:2px 5px;font:700 10.5px inherit;
            background:var(--chip);color:var(--ink2);cursor:pointer;max-width:104px}
.statuspick:hover{filter:brightness(.94)}
.statuspick.g{background:var(--green-soft);color:var(--green-ink)}
.statuspick.y{background:var(--yellow-soft);color:var(--yellow-ink)}
.statuspick.r{background:var(--red-soft);color:var(--red-ink)}
.statuspick.b{background:var(--blue-soft);color:var(--blue-ink)}
.statuspick.p{background:var(--purple-soft);color:var(--purple-ink)}
.statuspick.o{background:var(--orange-soft);color:var(--orange-ink)}

/* Poslana potvrda ili informacija: zatamnjena, ali i dalje otvoriva —
   ponovno slanje se otvara samo kad se status promijeni. */
.sbtn.sent{opacity:.45}
.sbtn.ready{background:var(--green);border-color:var(--green);color:#fff}

/* Popis obveza pred utakmicu. Stavke stoje u redu, svaka sa svojom kvačicom;
   označena posivi da se na prvi pogled vidi što još fali. */
.cheklist{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px}
.cheklist form{display:flex;align-items:center;gap:6px;font-size:13px}

/* Točkica stanja uz datum događaja. Ista tri stanja kao stupac Status, samo
   svedena na boju — to je ono što se čita na prvi pogled i što ide u objavu. */
.tocka{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;
       vertical-align:middle;flex:none}
.tocka.g{background:#2f9e5f}
.tocka.o{background:#e08a1e}
.tocka.r{background:#c8452f}
.tocka.b{background:var(--blue)}

/* Prijelaz među stranicama. Brojka u sredini kaže koliko se od ukupno vidi,
   da se ne pomisli kako su ostali upiti nestali. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
       margin:12px 0;flex-wrap:wrap}

/* Brojevi stranica. Kvadratne tipke jednake širine, da traka ne poskakuje
   kad se prijeđe s jednoznamenkaste na dvoznamenkastu stranicu. */
.pagenums{display:inline-flex;align-items:center;gap:3px}
.pnum{min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
      border:1px solid var(--line);border-radius:6px;font-size:12px;
      color:var(--ink2);text-decoration:none;padding:0 6px}
.pnum:hover{border-color:var(--ink3);color:var(--ink)}
.pnum.on{background:var(--teal-soft);border-color:var(--teal-soft);
         color:var(--teal-ink);font-weight:600}
.pgap{color:var(--ink3);font-size:12px;padding:0 2px}

/* Sklopiva cjelina — za duge dijelove stranice koji se rijetko otvaraju.
   Naslov je ujedno prekidač i nosi sažetak stanja, da se bez otvaranja vidi
   ima li se što unutra. Radi bez JavaScripta, jer je to obična HTML oznaka. */
.fold{border:1px solid var(--line);border-radius:10px;margin:18px 0;background:var(--card)}
.fold summary{display:flex;align-items:center;gap:9px;cursor:pointer;
              padding:12px 16px;list-style:none;user-select:none}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover{background:var(--card2);border-radius:10px}
.fold .foldnaslov{font-weight:600;font-size:14px;color:var(--ink)}
.fold .foldznak{margin-left:auto;color:var(--ink3);font-size:12px}
.fold .foldznak::after{content:'▸ otvori'}
.fold[open] .foldznak::after{content:'▾ zatvori'}
.fold[open] summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.fold > *:not(summary){padding-left:16px;padding-right:16px}
.fold > *:last-child{padding-bottom:16px}

/* Popis utakmica kluba: visok koliko treba, ali ne preko pola ekrana.
   Klub zna imati tridesetak termina, a ispod njih stoje prijave — bez ovoga
   se do njih mora listati do dna stranice. */
.matchbox{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.matchbox table.sheet th, .matchbox th{position:sticky;top:0;background:var(--side);z-index:2}

/* Kartice po klubovima za prijave interesa.
   Odvojene su od gornjih kartica jer ne biraju isto: gornje biraju stanje
   upita, ove sužavaju popis na jedan klub. Kad su iste, čovjek ne zna
   isključuju li se međusobno. */
.clubbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
         margin:0 0 14px;padding:8px 10px;background:var(--side);border-radius:9px}
.clubbar .why{margin-right:2px}
.clubtab{display:inline-flex;align-items:center;gap:6px;font-size:12px;
         padding:4px 11px;border-radius:15px;background:var(--card);
         border:1px solid var(--line2);color:var(--ink2);text-decoration:none}
.clubtab:hover{border-color:var(--ink3);color:var(--ink)}
.clubtab.on{background:var(--teal-soft);border-color:var(--teal-ink);
            color:var(--teal-ink);font-weight:600}
.clubtab .cnt{font-size:10px;color:var(--ink3)}
.clubtab.on .cnt{color:var(--teal-ink)}
.clubtab .x{font-size:13px;line-height:1;opacity:.7}

/* Oznaka gotovog zadatka.
   Znakovi ☐ i ☑ ne postoje u svim fontovima, pa se crtaju kao prazna kocka.
   Zato je to gumb: prazna kućica dok nije gotovo, zelena s kvačicom kad jest.
   Kvačica stoji i u praznom stanju, samo prozirna — tako gumb ne mijenja
   veličinu pri prebacivanju i redak ne poskakuje. */
.chk{width:20px;height:20px;padding:0;border-radius:5px;
     border:1.5px solid var(--line2);background:var(--card);color:transparent;
     font-size:12px;line-height:1;cursor:pointer;
     display:inline-flex;align-items:center;justify-content:center}
.chk:hover{border-color:var(--ink3);color:var(--ink3)}
.chk.on{background:var(--green);border-color:var(--green);color:#fff}
.chk.on:hover{background:var(--green-h);border-color:var(--green-h);color:#fff}

/* Kontakt ispod imena: manji, blijedi, i smije prelomiti.
   Ćelije inače skraćuju tekst trotočjem, a odrezana adresa se ne može
   pročitati ni prepisati — a upravo zbog prepisivanja i stoji ovdje. */
.ctline{font-size:10.5px;color:var(--ink3);white-space:normal;line-height:1.5}
.ctline a{color:var(--ink2);text-decoration:none}
.ctline a:hover{color:var(--ink);text-decoration:underline}
table.sheet .rowno{color:var(--outside-ink);font-size:10px;text-align:right;width:34px;
                   background:var(--card2);position:sticky;left:0;z-index:1}

/* ---------------------------------------------------------------- prijava */

body.centered{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:var(--side)}
/* Kutija je šira nego prije: u 380 px nije stajala ni cijela adresa
   e-pošte, pa se pri prijavi nije vidjelo što je upisano — a upravo se ondje i
   griješi, jer se lozinka ne vidi. */
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 28px;
          width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.06)}

/* Polja prijave su veća i od ostalih u programu: tipka se rijetko, često na
   mobitelu i bez gledanja u ekran. */
/* Polje ide preko cijele širine kutije. Osnovno pravilo za .f nema širinu,
   pa se polje raširi samo do sadržaja — a lozinka se ne vidi, e-pošta ne stane,
   i pri prijavi se ne zna što je upisano. */
.loginbox .f{width:100%;font-size:16px;padding:12px 14px}
.loginbox label{margin-top:12px}
.loginbox .gbtn{font-size:15px;padding:12px 16px;margin-top:18px}
.loginbox.wide-box{max-width:520px}
.loginbox h1{font-size:20px;margin:10px 0 4px}
.loginbox .desc{font-size:13px;margin-bottom:16px}

/* ---------------------------------------------------------------- mobitel */

@media(max-width:820px){
  .app{flex-direction:column}
  .side{width:100%;height:auto;position:static;border-right:0;border-bottom:1px solid var(--line);
        display:flex;flex-wrap:wrap;gap:5px;padding:11px}
  .ws{width:100%}
  .grp{width:100%;padding:7px 0 1px}
  .nav{margin:0;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:5px 11px}
  .nav.on{background:var(--ink);color:#fff}
  .side-foot{width:100%;margin-top:4px}
  .main{padding:16px 14px 60px}
  h1{font-size:21px}
  .scrollx table{min-width:660px}
  .checks{grid-template-columns:1fr}
}


/* ---------------------------------------------------------------- Razgovori
   Poruke se čitaju kao razgovor: kupčevo lijevo, naše desno.
   Popis mailova s naslovima nije pregledan kad se izmjenjuje više poruka. */

.thread{border:1px solid var(--line);border-radius:10px;background:var(--card);margin:14px 0;overflow:hidden}

.threadhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
            padding:12px 16px;background:var(--chip);border-bottom:1px solid var(--line);font-size:13px}
.threadhead .why{font-size:11.5px}

.chat{padding:14px 16px;display:flex;flex-direction:column;gap:10px;
      max-height:460px;overflow-y:auto;background:var(--card3)}

.bubblerow{display:flex;justify-content:flex-start}
.bubblerow.mine{justify-content:flex-end}

.bubble{max-width:78%;background:var(--card);border:1px solid var(--line);border-radius:12px 12px 12px 3px;
        padding:9px 12px;font-size:13px;line-height:1.5}
.bubblerow.mine .bubble{background:var(--mine);border-color:var(--mine-line);border-radius:12px 12px 3px 12px}

.bubbletext{white-space:normal;word-break:break-word}
.bubblemeta{margin-top:5px;font-size:10.5px;color:var(--ink3)}

.bubble details.quote{margin-top:7px;border-top:1px dashed var(--line);padding-top:6px}
.bubble details.quote summary{cursor:pointer;font-size:11px;color:var(--ink3)}
.bubble details.quote div{margin-top:6px;font-size:12px;color:var(--ink2);
                          white-space:pre-wrap;max-height:200px;overflow:auto}

.replybar{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.replybar textarea{flex:1;resize:vertical}

.thread .toolbar{padding:0 16px 12px;margin:0}

@media (max-width:700px){
  .bubble{max-width:92%}
  .threadhead{flex-direction:column;gap:6px}
}


/* Crvena oznaka nepročitanog */
.navbadge{float:right;margin-top:1px}
.badge{display:inline-block;min-width:17px;padding:1px 6px;border-radius:9px;
       background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
       text-align:center;vertical-align:middle;margin-left:4px}

/* Sklopljen razgovor: zaglavlje je klikabilan redak, ne cijeli razgovor */
.thread.unread{border-color:var(--unread-line)}
.thread.unread .threadhead{background:var(--unread-bg)}
.thread .preview{margin-top:5px;font-size:12px;color:var(--ink2);
                 max-width:640px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.threadhead .sbtn{margin-top:6px}


/* ------------------------------------------------------------- Uređivač
   Polje za tekst ponude. Izgleda kao obično polje, ali prima oblikovanje. */

.editor{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);margin-top:4px}

.edtools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;
         padding:6px 8px;background:var(--chip);border-bottom:1px solid var(--line)}
.edtools button{background:var(--card);border:1px solid var(--line);border-radius:5px;
                padding:4px 9px;font:600 12px inherit;cursor:pointer;color:var(--ink2)}
.edtools button:hover{background:var(--sel)}
.edsep{width:1px;height:18px;background:var(--line);margin:0 4px}

.edbody{min-height:340px;max-height:620px;overflow:auto;padding:14px 16px;
        font-size:13.5px;line-height:1.6;outline:none}
.edbody:focus{background:var(--focus)}
.edbody h3{font-size:15px;margin:14px 0 5px}
.edbody h4{font-size:13.5px;margin:12px 0 4px}
.edbody p{margin:7px 0}
.edbody ul,.edbody ol{margin:7px 0;padding-left:22px}
.edbody li{margin:3px 0}
.edbody a{color:var(--green)}


/* ==========================================================================
   Tamni način
   ==========================================================================
   Mijenjaju se samo vrijednosti, ne i pravila — zato je sve u jednom bloku.
   Boje nisu jednostavno obrnute: na tamnoj podlozi jaka boja zamara, pa su
   podloge oznaka prigušene, a tekst na njima posvijetljen. */

html[data-theme="dark"]{
  --bg:#17181a; --side:#1d1f22; --ink:#e8e6e1; --ink2:#a8a49c; --ink3:#78746c;
  --line:#2c2f33; --chip:#24262a; --sel:#2e3237; --blue:#5b9bea;

  --card:#1e2023; --card2:#232629; --card3:#25282c; --focus:#252a26; --line2:#33373c;

  --green:#2f9e5c;      --green-h:#278a4f;
  --green-ink:#7ed3a0;  --green-soft:#1d3227;
  --red:#c04a3e;        --red-h:#a83c31;
  --red-ink:#f0a49b;    --red-soft:#3a2320;
  --yellow-ink:#e3c67a; --yellow-soft:#332d1c;
  --blue-h:#4a86d0;     --blue-ink:#9cc4f5;   --blue-soft:#1c2836;
  --purple-ink:#c3aef0; --purple-soft:#282234;
  --orange-ink:#f0b57e; --orange-soft:#33261b;
  --teal-ink:#8ad4d4;   --teal-soft:#1a2c2d;

  --dot3:#6f6b64;
  --bar-pos:#3f7d58; --bar-neg:#8a4b45;

  --today:#2b2718; --outside-ink:#55524c;
  --mine:#22302a; --mine-line:#31463a;
  --unread-line:#5a3833; --unread-bg:#2a1f1d;
}

/* Kad je izabrano „prema uređaju", vrijedi postavka sustava. */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#17181a; --side:#1d1f22; --ink:#e8e6e1; --ink2:#a8a49c; --ink3:#78746c;
    --line:#2c2f33; --chip:#24262a; --sel:#2e3237; --blue:#5b9bea;
    --card:#1e2023; --card2:#232629; --card3:#25282c; --focus:#252a26; --line2:#33373c;
    --green:#2f9e5c; --green-h:#278a4f; --green-ink:#7ed3a0; --green-soft:#1d3227;
    --red:#c04a3e; --red-h:#a83c31; --red-ink:#f0a49b; --red-soft:#3a2320;
    --yellow-ink:#e3c67a; --yellow-soft:#332d1c;
    --blue-h:#4a86d0; --blue-ink:#9cc4f5; --blue-soft:#1c2836;
    --purple-ink:#c3aef0; --purple-soft:#282234;
    --orange-ink:#f0b57e; --orange-soft:#33261b;
    --teal-ink:#8ad4d4; --teal-soft:#1a2c2d;
    --dot3:#6f6b64; --bar-pos:#3f7d58; --bar-neg:#8a4b45;
    --today:#2b2718; --outside-ink:#55524c;
    --mine:#22302a; --mine-line:#31463a;
    --unread-line:#5a3833; --unread-bg:#2a1f1d;
  }
  html[data-theme="auto"] input,
  html[data-theme="auto"] select,
  html[data-theme="auto"] textarea{
    background:var(--card2); color:var(--ink); border-color:var(--line2);
  }
}

/* Polja u tamnom moraju imati vlastitu podlogu, inače ostaju bijela. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--card2); color:var(--ink); border-color:var(--line2);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:var(--ink3) }

/* Slike i logotipi na tamnoj podlozi ne smiju svijetliti punom snagom. */
html[data-theme="dark"] .thread img,
html[data-theme="dark"] .bubble img{ filter:brightness(.92) }

/* Prekidač teme u podnožju izbornika. */
.themeswitch{display:flex;gap:4px;margin-top:10px}
.themeswitch button{flex:1;background:var(--chip);border:1px solid var(--line);
                    border-radius:6px;padding:5px 0;font:600 11px inherit;
                    color:var(--ink2);cursor:pointer}
.themeswitch button:hover{background:var(--sel)}
.themeswitch button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* --- Poveznica za putnike: kartica ugovora -------------------------------- */

/* Kartica se čita odozgo prema dolje: tko, poveznica, što ima, pa alati.
   Prije su alati bili nizovi polja u stupcu, pa se nije znalo koje polje
   pripada kojem gumbu. */
.ugovor .linkred{
  display:flex;align-items:center;gap:8px;background:var(--card2);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:10px 0 12px;
}
.ugovor .linkred code{
  flex:1;min-width:0;font-size:12px;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Alat je uokviren i naslovljen — odvaja ono što se radi od onoga što stoji. */
.alat{
  border:1px dashed var(--line2);border-radius:10px;padding:12px 14px;
  margin-top:10px;background:var(--card2);
}
.alat h4{
  margin:0 0 10px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);
}

/* Polja u JEDNOM retku, široka koliko trebaju; gumb na kraju svog retka.
   Na uskom zaslonu se sama slože jedno ispod drugoga. */
.uredak{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.uredak .polje{display:flex;flex-direction:column;gap:4px;min-width:0}
.uredak .polje label{font-size:11px;color:var(--ink3)}
.uredak .polje.rast{flex:1;min-width:170px}
.uredak .polje .f{margin:0;width:100%}

/* --- Upiti: kartica po utakmici ------------------------------------------- */

/* Kartica je jedinica posla: na utakmicu se odgovara, ne na pojedini upit. */
.utk{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--card)}
.utkvrh{display:flex;align-items:center;gap:12px;padding:14px 16px}
.utkvrh .naz{font-weight:700;font-size:15.5px}
.utkbroj{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:13px;color:var(--ink2);
         flex-wrap:wrap;justify-content:flex-end}
.utkbroj b{color:var(--ink)}
.utkalat{display:flex;gap:8px;align-items:center;padding:0 16px 14px;flex-wrap:wrap}

/* Traka odgovorenosti: koliko je te utakmice riješeno. */
.pruga{height:4px;border-radius:2px;background:var(--line2);flex:0 0 110px;overflow:hidden}
.pruga i{display:block;height:100%;background:var(--green-ink)}

/* --- Skupno slanje ponude: popis primatelja ------------------------------- */

/* Prije se slalo „svima s kanalom mail", bez popisa — nije se vidjelo ni kome
   ide ni ko je već dobio. Popis s kvačicama to rješava. */
.primatelji{border:1px solid var(--line);border-radius:10px;margin:8px 0 12px;
            max-height:260px;overflow:auto}
.primatelji .pr{display:flex;align-items:center;gap:10px;padding:9px 12px;
                border-top:1px solid var(--line);cursor:pointer}
.primatelji .pr:first-child{border-top:0}
.primatelji .pr:hover{background:var(--side)}
.primatelji .pr input{margin:0;flex:none}
.primatelji .pr .ime{font-weight:600}
.primatelji .pr .why{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Već poslano: prigušeno, ali vidljivo — po tome se zna da nije zaboravljeno. */
.primatelji .pr.poslan{opacity:.55}