/* =====================================================================
   SMSVAGA — Pčelarski dnevnik
   Ista paleta kao portal i prodavnica:
     narandžasta   #ff8e02 / #dc9a1c
     tamna         #1f1c17
     pozadina      #eceaeb
     polja         #f2f0f1
     medeni okvir  rgba(220,154,28,.35)
     crvena        #e43935
   ===================================================================== */

:root{
  --accent:#ff8e02;
  --accent-deep:#dc9a1c;
  --accent-tamna:#e07d00;
  --charcoal:#1f1c17;
  --charcoal-2:#2b2721;
  --moss:#5c6b3e;
  --bg:#eceaeb;
  --papir-topli:#f6f1e2;   /* topla podloga dnevnika, ka kremu */
  --polje:#f2f0f1;
  --card:#fff;
  --okvir:rgba(220,154,28,.35);
  --okvir-jak:rgba(220,154,28,.55);
  --linija:#e0dad0;
  --text:#1c1c1c;
  --tiho:#6e6e6e;
  --crvena:#e43935;
  --zelena:#4caf50;
  --plava:#2196f3;
  --font:"Trebuchet MS","Segoe UI",Roboto,sans-serif;
  --radius:14px;
  --senka:0 2px 10px rgba(0,0,0,.07);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Klase poput .polje postavljaju display:flex i time gaze podrazumevano
   pravilo pregledača za [hidden]. Zato se ono ovde vraća izričito. */
[hidden]{display:none !important;}
body{
  color:var(--text);font-family:var(--font);
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%;

  /* Pozadina: sace u tankoj medenoj liniji, preko topline koja se spusta
     ispod trake, pa sivo. Sara je SVG u samom pravilu — nema dodatnog
     fajla ni zahteva ka serveru, a ostaje ostra na svakom ekranu. */
  background-color:var(--papir-topli);
}

/* Pašnjak sa košnicama — bleda ilustracija pri dnu ekrana, iznad boje
   papira a ispod sadržaja. Crtež je SVG upisan u samo pravilo, pa nema
   dodatnog fajla; stoji nepomično dok se strana skroluje. */
body::after{
  content:'';position:fixed;left:0;right:0;bottom:0;height:min(46vh,420px);
  z-index:-1;pointer-events:none;opacity:.62;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='460' viewBox='0 0 1600 460'%3E%3Cdefs%3E%3ClinearGradient id='nebo' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fffdf4' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f7e6b4' stop-opacity='.6'/%3E%3C/linearGradient%3E%3ClinearGradient id='daleko' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfd9a2'/%3E%3Cstop offset='1' stop-color='%23d6d295'/%3E%3C/linearGradient%3E%3ClinearGradient id='blizu' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfcc86'/%3E%3Cstop offset='1' stop-color='%23c3c478'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='460' fill='url(%23nebo)'/%3E%3Ccircle cx='1340' cy='92' r='48' fill='%23f3cf6a' fill-opacity='.6'/%3E%3Cpath d='M0 262 C 190 214, 330 256, 480 242 C 650 226, 780 262, 920 250 C 1100 234, 1250 264, 1400 246 C 1490 236, 1550 250, 1600 244 L1600 460 L0 460 Z' fill='url(%23daleko)' fill-opacity='.85'/%3E%3Crect x='87.0' y='241.0' width='6.0' height='21.0' fill='%23a98f56'/%3E%3Cellipse cx='90.0' cy='232.0' rx='19.5' ry='16.5' fill='%23b9be74'/%3E%3Crect x='247.8' y='246.6' width='4.4' height='15.4' fill='%23a98f56'/%3E%3Cellipse cx='250.0' cy='240.0' rx='14.3' ry='12.1' fill='%23b9be74'/%3E%3Crect x='1177.4' y='243.8' width='5.2' height='18.2' fill='%23a98f56'/%3E%3Cellipse cx='1180.0' cy='236.0' rx='16.9' ry='14.3' fill='%23b9be74'/%3E%3Crect x='1516.8' y='239.6' width='6.4' height='22.4' fill='%23a98f56'/%3E%3Cellipse cx='1520.0' cy='230.0' rx='20.8' ry='17.6' fill='%23b9be74'/%3E%3Crect x='698.0' y='248.0' width='4.0' height='14.0' fill='%23a98f56'/%3E%3Cellipse cx='700.0' cy='242.0' rx='13.0' ry='11.0' fill='%23b9be74'/%3E%3Cpath d='M0 314 C 200 288, 380 318, 560 310 C 740 302, 880 324, 1060 314 C 1240 304, 1420 324, 1600 310 L1600 460 L0 460 Z' fill='url(%23blizu)' fill-opacity='.9'/%3E%3Crect x='155.0' y='306.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='155.0' y='292.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='152.0' y='284.0' width='36.0' height='8.0' rx='2.0' fill='%23a87f3f'/%3E%3Crect x='166.0' y='314.0' width='8.0' height='3.0' rx='1.2' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='170.0' cy='318.0' rx='18.0' ry='2.5' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='284.2' y='305.4' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='284.2' y='290.7' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='281.1' y='282.3' width='37.8' height='8.4' rx='2.1' fill='%23a87f3f'/%3E%3Crect x='295.8' y='313.8' width='8.4' height='3.2' rx='1.3' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='300.0' cy='318.0' rx='18.9' ry='2.6' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='415.0' y='306.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='415.0' y='292.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='412.0' y='284.0' width='36.0' height='8.0' rx='2.0' fill='%23a87f3f'/%3E%3Crect x='426.0' y='314.0' width='8.0' height='3.0' rx='1.2' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='430.0' cy='318.0' rx='18.0' ry='2.5' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='544.2' y='305.4' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='544.2' y='290.7' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='541.1' y='282.3' width='37.8' height='8.4' rx='2.1' fill='%23a87f3f'/%3E%3Crect x='555.8' y='313.8' width='8.4' height='3.2' rx='1.3' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='560.0' cy='318.0' rx='18.9' ry='2.6' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='675.0' y='306.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='675.0' y='292.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='672.0' y='284.0' width='36.0' height='8.0' rx='2.0' fill='%23a87f3f'/%3E%3Crect x='686.0' y='314.0' width='8.0' height='3.0' rx='1.2' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='690.0' cy='318.0' rx='18.0' ry='2.5' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='994.2' y='305.4' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='994.2' y='290.7' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='991.1' y='282.3' width='37.8' height='8.4' rx='2.1' fill='%23a87f3f'/%3E%3Crect x='1005.8' y='313.8' width='8.4' height='3.2' rx='1.3' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='1010.0' cy='318.0' rx='18.9' ry='2.6' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='1125.0' y='306.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='1125.0' y='292.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='1122.0' y='284.0' width='36.0' height='8.0' rx='2.0' fill='%23a87f3f'/%3E%3Crect x='1136.0' y='314.0' width='8.0' height='3.0' rx='1.2' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='1140.0' cy='318.0' rx='18.0' ry='2.5' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='1254.2' y='305.4' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='1254.2' y='290.7' width='31.5' height='12.6' rx='2.1' fill='%23c9a463'/%3E%3Crect x='1251.1' y='282.3' width='37.8' height='8.4' rx='2.1' fill='%23a87f3f'/%3E%3Crect x='1265.8' y='313.8' width='8.4' height='3.2' rx='1.3' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='1270.0' cy='318.0' rx='18.9' ry='2.6' fill='%23a9a濃' fill-opacity='0'/%3E%3Crect x='1385.0' y='306.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='1385.0' y='292.0' width='30.0' height='12.0' rx='2.0' fill='%23c9a463'/%3E%3Crect x='1382.0' y='284.0' width='36.0' height='8.0' rx='2.0' fill='%23a87f3f'/%3E%3Crect x='1396.0' y='314.0' width='8.0' height='3.0' rx='1.2' fill='%238a6526' fill-opacity='.7'/%3E%3Cellipse cx='1400.0' cy='318.0' rx='18.0' ry='2.5' fill='%23a9a濃' fill-opacity='0'/%3E%3Cpath d='M0 372 C 220 356, 420 380, 640 372 C 860 364, 1060 384, 1280 374 C 1420 368, 1520 378, 1600 372 L1600 460 L0 460 Z' fill='%23bcbf6e' fill-opacity='.85'/%3E%3Ccircle cx='120' cy='404' r='5' fill='%23e0c14a' fill-opacity='.6'/%3E%3Ccircle cx='280' cy='412' r='4' fill='%23e0c14a' fill-opacity='.6'/%3E%3Ccircle cx='520' cy='400' r='5' fill='%23e0c14a' fill-opacity='.6'/%3E%3Ccircle cx='760' cy='410' r='4' fill='%23e0c14a' fill-opacity='.6'/%3E%3Ccircle cx='980' cy='402' r='5' fill='%23e0c14a' fill-opacity='.6'/%3E%3Ccircle cx='1220' cy='412' r='4' fill='%23e0c14a' fill-opacity='.6'/%3E%3Ccircle cx='1460' cy='402' r='5' fill='%23e0c14a' fill-opacity='.6'/%3E%3Ccircle cx='1560' cy='414' r='4' fill='%23e0c14a' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat center bottom/cover;
}

a{color:var(--accent-tamna);}
button{font-family:inherit;}

/* ---------- TRAKA ---------- */
/* TRAKA STANJA VEZE
   PLOVI IZNAD SADRŽAJA, ne stoji u toku. Prvo je bila `sticky` na vrhu — i
   svaki put kad bi se pojavila, gurnula bi celu stranu naniže. Pčelar čita
   red, traka iskoči, red mu pobegne ispod prsta. Sitnica koja izluđuje.

   Zato sada `fixed` na dnu, širine koliko joj treba, i ništa se ne pomera:
   pojavi se i nestane a strana ostane mirna. */
.traka-veze{
  position:fixed;z-index:90;
  left:50%;transform:translateX(-50%) translateY(0);
  bottom:calc(.85rem + env(safe-area-inset-bottom));
  max-width:calc(100% - 1.6rem);
  padding:.45rem .95rem;border-radius:999px;
  font-size:.82rem;font-weight:600;text-align:center;
  box-shadow:0 2px 14px rgba(0,0,0,.22);
  transition:opacity .25s ease, transform .25s ease;
}
/* Pojavljivanje i nestajanje idu blago — naglo iskakanje privlači pogled
   jače nego što sadržaj poruke to zaslužuje. */
.traka-veze[hidden]{display:block;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(8px);}

/* Zapisi čekaju, ali veze ima — žuto, obaveštenje. */
.traka-veze.ceka{background:#fdf3d6;color:#7a5a06;border:1px solid var(--okvir-jak);}
/* Veze nema — sivo, ne crveno. Nije kvar nego stanje, i prolazi samo od sebe. */
.traka-veze.bez-veze{background:#42403c;color:#f5f1e8;}
/* Priprema za teren — najtiša od sve tri. Posao je u pozadini i pčelar ne
   treba ništa da uradi povodom njega, pa i ne sme da mu vuče pogled. */
.traka-veze.sprema{background:rgba(66,64,60,.82);color:#efe9dc;font-weight:500;
  box-shadow:0 1px 8px rgba(0,0,0,.14);}
/* Kad ima šta da se pošalje, traka je i dugme. */
.traka-veze.moze-klik{cursor:pointer;}
.traka-veze.moze-klik:active{filter:brightness(.95);}

/* Zapis koji još nije stigao do servera. Isprekidan okvir i bleđi je — vidi
   se da postoji, ali i da nije dovršen. Dugmad za izmenu i brisanje nema,
   pa `.radnje` ni ne postoji u HTML-u. */
.osa li.ceka{border-style:dashed;opacity:.85;}
.ceka-oznaka{
  margin-top:.5rem;font-size:.78rem;color:var(--tiho);font-style:italic;
}

.traka{
  position:sticky;top:0;z-index:60;height:76px;background:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.09);
  display:flex;align-items:center;gap:1rem;padding:0 clamp(.9rem,3vw,1.6rem);
}

/* Narandzasti obrub koji polako tinja — kao okvir oko aktivnog taba u
   pregledacu. Crta se preko sloja iznad trake da ne pomera sadrzaj. */
.traka::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--accent), 0 0 22px rgba(255,142,2,.45);
  animation:sjaj-trake 3.6s ease-in-out infinite;
}
@keyframes sjaj-trake{
  0%,100%{opacity:.22;}
  50%    {opacity:.85;}
}
/* Ko je iskljucio animacije u sistemu, dobija miran obrub. */
@media (prefers-reduced-motion:reduce){
  .traka::after{animation:none;opacity:.5;}
}
.traka .znak{
  height:46px;width:113px;flex:none;background:#000;
  -webkit-mask:url('../SMSVaga-logo.png') no-repeat center/contain;
  mask:url('../SMSVaga-logo.png') no-repeat center/contain;
}
.traka .naslov{
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  font-size:1.22rem;color:var(--accent);white-space:nowrap;
}
/* Sve osim logoa i naslova stoji u jednom omotu. Na racunaru je to obicna
   linija dugmadi; na telefonu isti taj omot postaje padajuci meni. */
.traka-alatke{
  display:flex;align-items:center;gap:1rem;flex:1 1 auto;min-width:0;
}
/* Ko je prijavljen i Odjava idu na kraj linije, iako u HTML-u podatak o
   korisniku stoji prvi — na telefonu mu je mesto na vrhu menija. */
.traka-alatke .ko{order:2;}
.traka-alatke #dugmeOdjava{order:3;}

/* Dugme sa tri crte — vidi se samo na uskom ekranu. */
.traka-burger{
  display:none;flex:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:auto;cursor:pointer;
  background:var(--polje);border:1px solid var(--linija);border-radius:10px;
}
.traka-burger span,
.traka-burger span::before,
.traka-burger span::after{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--charcoal);
  transition:transform .18s,background .18s,top .18s;
}
.traka-burger span{position:relative;}
.traka-burger span::before{content:'';position:absolute;top:-6px;}
.traka-burger span::after{content:'';position:absolute;top:6px;}
.traka-burger.otvoren span{background:transparent;}
.traka-burger.otvoren span::before{top:0;transform:rotate(45deg);}
.traka-burger.otvoren span::after{top:0;transform:rotate(-45deg);}

/* Dva rastojanja dele preostalu sirinu; prvo je sire, pa „Dodaj pcelinjak"
   i „Zdravstvene mere" stoje desnije, a naslov dobija vazduha. */
.traka .rastojanje{flex:1 1 0;min-width:.5rem;}
.traka .rastojanje:first-of-type{flex-grow:1.7;}
#dugmeNoviPcelinjak{margin-left:clamp(.6rem,3vw,2.4rem);}
.dugme.zdravlje{margin-left:clamp(0px,2vw,1.6rem);}
/* Dugmad u traci idu velikim slovima — kratki natpisi, pa se tako lakše
   hvataju pogledom i traka deluje mirnije. */
.traka .dugme{text-transform:uppercase;letter-spacing:.05em;font-weight:800;}

/* Uputstvo, Profil i Odjava su na portalu obična siva slova, bez ivica —
   isto i ovde, da traka bude mirnija i da se istaknu samo dva dugmeta
   koja nešto rade (dodavanje pčelinjaka i zdravstvene mere). */
.traka .dugme.tiho{
  background:none;border:0;color:#8a8a8a;padding:.5rem .55rem;font-size:.8rem;
}
.traka .dugme.tiho:hover{background:none;color:var(--accent);}
.traka a.dugme.tiho{text-decoration:none;}

/* Zdravstvene mere stoje po sredini trake — dva rastojanja ih guraju
   sa obe strane, pa ostaju u sredini bez obzira na širinu susednog. */
.dugme.zdravlje{
  background:#fdecea;color:#a5261e;border:1px solid rgba(196,42,32,.3);
  font-size:.92rem;font-weight:800;padding:.55rem 1.1rem;white-space:nowrap;gap:.5rem;
}
.dugme.zdravlje:hover{background:#c42a20;color:#fff;border-color:#c42a20;}
.dugme.zdravlje .krst{display:inline-flex;width:16px;height:16px;flex:none;}
.dugme.zdravlje .krst svg{width:100%;height:100%;fill:#c42a20;}
.dugme.zdravlje:hover .krst svg{fill:#fff;}
.traka .ko{font-size:.82rem;color:var(--tiho);text-align:right;line-height:1.25;}
.traka .ko b{display:block;color:var(--text);font-size:.9rem;}

/* Podnožje — samo obavezno: veza ka politici privatnosti i ko stoji iza. */
.podnozje-dnevnika{
  position:relative;z-index:1;
  display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;
  padding:0 1rem 1.6rem;margin-top:-2.4rem;
  font-size:.82rem;color:var(--tiho);
}
.podnozje-dnevnika a{color:var(--tiho);text-decoration:underline;}
.podnozje-dnevnika a:hover{color:var(--accent);}

/* ---------- OSNOVNI RASPORED ---------- */
.sadrzaj{max-width:1180px;margin:0 auto;padding:clamp(1rem,3vw,1.8rem) clamp(.9rem,3vw,1.6rem) 4rem;}
.putanja{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.85rem;color:var(--tiho);margin-bottom:1rem;
}
.putanja a{text-decoration:none;font-weight:700;}
.putanja span.sep{opacity:.5;}

h1{font-size:clamp(1.3rem,3.2vw,1.7rem);font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin:0 0 .2rem;}
h2{font-size:1.05rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .8rem;}
.podnaslov{color:var(--tiho);margin:0 0 1.4rem;}

/* ---------- KARTICE ---------- */
.kartica{
  background:var(--card);border:1px solid var(--okvir);border-radius:var(--radius);
  box-shadow:var(--senka);padding:1.1rem 1.2rem;margin-bottom:1.1rem;
}
.kartica-vrh{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem;}
.kartica-vrh h2{margin:0;}

/* ---------- DUGMAD ---------- */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  border:0;border-radius:10px;padding:.62rem 1.1rem;cursor:pointer;
  font-weight:700;font-size:.92rem;background:var(--accent);color:#fff;
  transition:background .15s,transform .1s;
}
.dugme:hover{background:var(--accent-tamna);}
.dugme:active{transform:scale(.97);}
.dugme.crno{background:#000;}
.dugme.crno:hover{background:#2b2b2b;}
.dugme.tiho{background:var(--polje);color:var(--text);border:1px solid var(--linija);}
.dugme.tiho:hover{background:#e8e4de;}
.dugme.opasno{background:var(--crvena);}
.dugme.opasno:hover{background:#b61c1b;}
.dugme.malo{padding:.4rem .75rem;font-size:.84rem;}
.dugme[disabled]{opacity:.55;cursor:default;}

/* ---------- POLJA ---------- */
.red{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.85rem;}
.polje{display:flex;flex-direction:column;gap:.28rem;margin-bottom:.85rem;}
.polje label{font-size:.78rem;font-weight:700;color:var(--tiho);letter-spacing:.04em;text-transform:uppercase;}
.polje input, .polje select, .polje textarea{
  font-family:inherit;font-size:.98rem;color:var(--text);
  background:var(--polje);border:1px solid var(--okvir);border-radius:10px;
  padding:.6rem .75rem;width:100%;
}
.polje textarea{min-height:84px;resize:vertical;}
.polje input:focus, .polje select:focus, .polje textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
}
.polje .pomoc{font-size:.78rem;color:var(--tiho);}

/* Datum se kuca u našem obliku (dd.mm.gggg.), a ugrađeni kalendar stoji
   uz njega kao mali birač — njegov tekstualni deo je sakriven jer bi
   pisao po jeziku pregledača. */
.datum-polje{display:flex;gap:.4rem;align-items:stretch;}
.datum-polje .datum-tekst{flex:1;letter-spacing:.03em;}
.datum-polje .datum-kalendar{
  width:46px;flex:none;padding:0;overflow:hidden;color:transparent;cursor:pointer;
  border:1px solid var(--okvir);border-radius:10px;
  /* sopstvena ikonica — ugrađena zavisi od pregledača i ume da nestane */
  background:var(--polje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='1.1' fill='%236e6e6e' stroke='none'/%3E%3Ccircle cx='12' cy='14.5' r='1.1' fill='%236e6e6e' stroke='none'/%3E%3Ccircle cx='15.5' cy='14.5' r='1.1' fill='%236e6e6e' stroke='none'/%3E%3C/svg%3E") no-repeat center/20px 20px;
}
.datum-polje .datum-kalendar::-webkit-datetime-edit,
.datum-polje .datum-kalendar::-webkit-clear-button,
.datum-polje .datum-kalendar::-webkit-inner-spin-button{display:none;}
.datum-polje .datum-kalendar::-webkit-calendar-picker-indicator{
  width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;
}
.datum-polje .datum-kalendar:hover{border-color:var(--accent);background-color:#fff;}

/* ---------- PRETRAGA MESTA NA MAPI ---------- */
.pretraga-mesta{display:flex;gap:.45rem;margin-bottom:.5rem;}
.pretraga-mesta input{
  flex:1;font-family:inherit;font-size:.95rem;color:var(--text);
  background:var(--polje);border:1px solid var(--okvir);border-radius:10px;padding:.55rem .7rem;
}
.pretraga-mesta input:focus{outline:none;border-color:var(--accent);background:#fff;}
.pretraga-mesta .dugme{flex:none;}

ul.spisak-mesta{list-style:none;margin:0 0 .6rem;padding:0;
  border:1px solid var(--okvir);border-radius:10px;overflow:hidden;background:#fff;}
ul.spisak-mesta li + li{border-top:1px solid var(--linija);}
ul.spisak-mesta button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.55rem .7rem;font-size:.88rem;color:var(--text);line-height:1.35;
}
ul.spisak-mesta button:hover{background:#fff6e6;}

/* prekidači (checkbox) */
.cek-grupa{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:.5rem;}
.cek{
  display:flex;align-items:center;gap:.55rem;background:var(--polje);
  border:1px solid var(--okvir);border-radius:10px;padding:.55rem .7rem;cursor:pointer;
  font-size:.92rem;user-select:none;
}
.cek input{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0;}
.cek.ukljucen{background:#fff4e3;border-color:var(--okvir-jak);}

/* ocene 1-5 */
.ocena{display:flex;gap:.3rem;}
.ocena button{
  flex:1;background:var(--polje);border:1px solid var(--okvir);border-radius:9px;
  padding:.5rem 0;font-weight:800;cursor:pointer;color:var(--tiho);
}
.ocena button.izabran{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---------- ZBIRNE PLOČICE NA POČETNOJ ---------- */
/* Donja margina drži isto rastojanje do kartica pčelinjaka kao kad je
   ispod stajalo dugme „Dodaj pčelinjak" (sada je u traci). */
.zbir{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.9rem;margin:0 0 3.5rem;
}
.zbir-plocica{
  border:1px solid;border-radius:var(--radius);padding:.9rem 1.1rem;
  display:flex;flex-direction:column;gap:.1rem;box-shadow:var(--senka);
}
.zbir-plocica strong{font-size:2.1rem;font-weight:900;line-height:1.05;letter-spacing:-.01em;}
.zbir-plocica span{
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.82;
}
/* tri boje iz iste palete — med, mahovina, nebo */
.zbir-plocica.med     {background:#fff3dd;border-color:var(--okvir-jak);color:#8a5b0e;}
.zbir-plocica.mahovina{background:#eef2e2;border-color:rgba(92,107,62,.35);color:#46532c;}
.zbir-plocica.nebo    {background:#e6eef6;border-color:rgba(47,111,159,.32);color:#25506f;}

/* ---------- SPISAK PČELINJAKA ---------- */
.naslov-red{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;}
.naslov-red h1{margin:0;}
.naslov-znak{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:14px;
  background:#fff3dd;border:1px solid var(--okvir-jak);color:var(--accent-deep);
}
.mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1rem;}
.pcelinjak-vrh{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;}
.pcelinjak-znak{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:12px;
  background:var(--polje);border:1px solid var(--okvir);color:var(--accent-deep);
}

/* ---------- ZDRAVSTVENE MERE ---------- */
.izbor-oblasti{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:.45rem;}
.izbor-oblasti button{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:var(--polje);border:1.5px solid var(--okvir);border-radius:11px;
  padding:.6rem .35rem;cursor:pointer;transition:border-color .15s,background .15s;
}
.izbor-oblasti button:hover{border-color:var(--accent);background:#fffaf2;}
.izbor-oblasti button .ikona{font-size:1.25rem;line-height:1;}
.izbor-oblasti button .ime{font-size:.72rem;font-weight:700;line-height:1.2;text-align:center;color:var(--text);}
.izbor-oblasti button.izabran{
  border-color:var(--accent);background:#fff3dd;box-shadow:0 2px 10px rgba(220,154,28,.22);
}

.veza-dugme{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--accent-tamna);font-weight:700;text-decoration:underline;
}

/* katalog preparata */
.katalog-oblast{
  font-size:.86rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-tamna);margin:1.4rem 0 .6rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--okvir);
}
.katalog-oblast:first-child{margin-top:0;}
.katalog-grupa{margin-bottom:.8rem;}
.katalog-naslov{font-size:.8rem;font-weight:800;color:var(--tiho);letter-spacing:.04em;margin-bottom:.3rem;}
ul.katalog-spisak{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.4rem;}
ul.katalog-spisak button{
  width:100%;text-align:left;background:var(--polje);border:1px solid var(--okvir);
  border-radius:10px;padding:.5rem .65rem;cursor:pointer;font:inherit;color:var(--text);
  display:flex;flex-direction:column;gap:.15rem;
}
ul.katalog-spisak button[disabled]{cursor:default;opacity:1;}
ul.katalog-spisak button:not([disabled]):hover{border-color:var(--accent);background:#fffaf2;}
.katalog-detalji{font-size:.76rem;color:var(--tiho);line-height:1.3;}

/* dijalog povrh dijaloga */
.pozadina.povrhu{background:rgba(20,17,12,.45);z-index:2100;}

/* ---------- IZBOR NAČINA DRŽANJA ---------- */
.izbor-nacina{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:.5rem;}
.izbor-nacina button{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:var(--polje);border:1.5px solid var(--okvir);border-radius:12px;
  padding:.7rem .4rem .6rem;cursor:pointer;color:var(--tiho);
  transition:border-color .15s,background .15s,color .15s;
}
.izbor-nacina button:hover{border-color:var(--accent);background:#fffaf2;}
.izbor-nacina button .ime{
  font-size:.74rem;font-weight:700;line-height:1.2;text-align:center;color:var(--text);
}
.izbor-nacina button.izabran{
  border-color:var(--accent);background:#fff3dd;color:var(--accent-deep);
  box-shadow:0 2px 10px rgba(220,154,28,.22);
}
.pcelinjak{
  background:var(--card);border:1px solid var(--okvir);border-radius:var(--radius);
  box-shadow:var(--senka);padding:1rem 1.1rem;cursor:pointer;text-align:left;width:100%;
  transition:border-color .15s,transform .1s;
}
.pcelinjak:hover{border-color:var(--accent);transform:translateY(-1px);}
.pcelinjak h3{margin:0 0 .2rem;font-size:1.08rem;font-weight:800;}
.pcelinjak .mesto{font-size:.86rem;color:var(--tiho);margin-bottom:.7rem;}
.pcelinjak .brojke{display:flex;gap:.5rem;flex-wrap:wrap;}
.znacka{
  background:var(--polje);border:1px solid var(--okvir);border-radius:8px;
  padding:.2rem .6rem;font-size:.8rem;font-weight:700;
}
.znacka.narandzasta{background:#ffe4c2;border-color:var(--okvir-jak);}
.znacka.plava{background:#e6eef6;border-color:rgba(47,111,159,.32);color:#25506f;}
/* oznaka registra lekova (ALIMS) */
.znacka.reg{background:#e8f0e2;border-color:rgba(91,106,61,.4);color:#3f5228;}
.znacka.van{background:#f3efe6;border-color:var(--okvir);color:#8a8171;font-weight:600;}
.znacka.bio{background:#e8f3e4;border-color:rgba(76,140,60,.45);color:#35652a;}

/* ---------- ZASTAVICE REGISTARA ----------
   Skracenica agencije (ALIMS, BVL) starijem coveku ne znaci nista, zastava
   znaci odmah. Crtane su kao SVG u `js/zastave.js` — emodzi zastave na
   Windowsu ne postoje, tamo se `RS` prikaze kao dva slova.

   Neupisan lek dobija PRIGUSENU zastavicu, ne crveno upozorenje: dnevnik
   belezi ono sto je pcelar uradio, nije mu mesto da mu deli packe. */
.registri{display:inline-flex;gap:3px;vertical-align:middle;margin-left:.3rem;}
.reg-zastava{
  display:inline-block;width:18px;height:12px;border-radius:2px;overflow:hidden;
  border:1px solid rgba(32,24,15,.25);line-height:0;cursor:help;
}
.reg-zastava svg{width:100%;height:100%;display:block;}
.reg-zastava.nije{opacity:.3;filter:grayscale(1);}

/* Lek koji u toj zemlji nije registrovan, ali se legalno nabavlja preko
   izuzeća (Norveška). Nije ni „upisan" ni „nije upisan" — zato ni puna ni
   ugašena zastavica, nego poluprovidna sa isprekidanim okvirom. Objašnjenje
   stoji u naslovu, na prelaz mišem. */
.reg-zastava.fritak{opacity:.6;border-style:dashed;border-color:rgba(32,24,15,.5);}

/* Zabranjen preparat. Jedino mesto u katalogu gde se koristi crvena — zato
   što je ovo jedina oznaka koja pčelara od nečega odvraća, a ne obaveštava.
   Zastavica se precrtava kosom crtom da se vidi i bez boje. */
.reg-zastava.zabranjen{
  border-color:#a3231b;box-shadow:0 0 0 1px #a3231b;position:relative;
}
.reg-zastava.zabranjen::after{
  content:"";position:absolute;left:-1px;right:-1px;top:50%;
  height:2px;background:#a3231b;transform:rotate(-20deg);
}

/* „+7" uz zastavice — ostatak registara koji se ne prikazuje. Pun spisak
   stoji u naslovu, na prelaz mišem. */
.reg-jos{
  display:inline-block;font-size:.72rem;line-height:1;padding:.18rem .3rem;
  border:1px solid var(--okvir);border-radius:3px;color:var(--tiho);
  background:#fbf9f6;cursor:help;vertical-align:top;
}


/* ---------- KOŠNICE ----------
   Pločice u mreži po pet u redu. Košnica sa vagom se crta povišeno —
   stoji na vagi — pa joj je i pločica viša od ostalih, da se odmah vidi
   koja je merena. Zato je mreza poravnata po dnu (align-items:end). */
.kosnice{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;align-items:end;
}
.kosnica{
  background:var(--card);border:1px solid var(--okvir);border-radius:12px;
  padding:.85rem .6rem .7rem;cursor:pointer;text-align:center;width:100%;
  transition:border-color .15s,transform .1s;position:relative;
  display:flex;flex-direction:column;align-items:center;
}
.kosnica:hover{border-color:var(--accent);transform:translateY(-2px);}
.kosnica.izabrana{border-color:var(--accent);background:#fff8ef;}
.kosnica svg{display:block;margin:0 auto .4rem;}
.kosnica .oznaka{font-weight:800;font-size:.92rem;word-break:break-all;line-height:1.2;}
.kosnica .ime{font-size:.82rem;color:var(--tiho);margin-top:.1rem;}
.kosnica .stanje{
  position:absolute;top:.45rem;right:.45rem;width:9px;height:9px;border-radius:50%;
}

/* košnica koja stoji na vagi */
.kosnica.sa-vagom{
  border-color:var(--okvir-jak);
  background:linear-gradient(#fffaf2,#fff);
  box-shadow:0 2px 12px rgba(220,154,28,.22);
}
.kosnica.sa-vagom:hover{border-color:var(--accent);}
.kosnica .znacka-vaga{
  display:inline-flex;align-items:center;gap:.22rem;margin-top:.35rem;
  background:#ffe4c2;border:1px solid var(--okvir-jak);border-radius:7px;
  padding:.1rem .42rem;font-size:.7rem;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:#7a5c1e;
}

@media (max-width:980px){ .kosnice{grid-template-columns:repeat(4,1fr);} }
@media (max-width:760px){ .kosnice{grid-template-columns:repeat(3,1fr);} }
/* Ispod 600px raspored košnica preuzima mobilni deo pri dnu fajla. */

/* ---------- MERENJE SA VAGE ---------- */
.merenje-vrh{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem;}
.merenje-vrh .vreme{font-size:.85rem;color:var(--tiho);}
.merenje-plocice{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.6rem;}
.merenje-plocica{
  background:var(--polje);border:1px solid var(--okvir);border-radius:11px;
  padding:.7rem .5rem;text-align:center;
}
.merenje-plocica .naziv{
  font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tiho);
}
.merenje-plocica strong{display:block;font-size:1.25rem;font-weight:800;margin-top:.15rem;}
.merenje-plocica.istaknuta strong{font-size:1.5rem;font-weight:900;}
.merenje-plocica strong.minus{color:var(--crvena);}
.merenje-plocica strong.plus{color:#2e7d32;}
.stanje.ok{background:var(--zelena);}
.stanje.staro{background:var(--accent);}
.stanje.nikad{background:#c9c5c6;}
.kosnica .biranje{position:absolute;top:.4rem;left:.4rem;width:18px;height:18px;accent-color:var(--accent);}
.kosnica.neaktivna{opacity:.5;}

/* ---------- VREMENSKA OSA ZAPISA ---------- */
.osa{list-style:none;margin:0;padding:0;}
.osa li{
  background:var(--polje);border:1px solid var(--okvir);border-left:4px solid var(--accent);
  border-radius:10px;padding:.75rem .9rem;margin-bottom:.6rem;
}
.osa li.tip-tretman{border-left-color:var(--crvena);}
.osa li.tip-hranjenje{border-left-color:var(--moss);}
.osa li.tip-vrcanje{border-left-color:var(--accent-deep);}
.osa li.tip-varoa{border-left-color:#8e44ad;}
.osa li.tip-selidba{border-left-color:var(--plava);}
.osa .zaglavlje{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.osa .vrsta{font-weight:800;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;}
.osa .datum{font-size:.84rem;color:var(--tiho);}
.osa .telo{margin-top:.4rem;font-size:.93rem;}
.osa .telo b{font-weight:700;}
.osa .parovi{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.35rem;font-size:.88rem;}
.osa .parovi span{color:var(--tiho);}
.osa .parovi span b{color:var(--text);}
.osa .radnje{display:flex;gap:.4rem;margin-top:.5rem;}
.karenca{
  display:inline-block;background:#fde8e6;color:var(--crvena);border-radius:7px;
  padding:.12rem .5rem;font-size:.8rem;font-weight:800;
}
.karenca.istekla{background:#e8f5e9;color:#2e7d32;}

/* ---------- DIJALOG ----------
   Leaflet svojim slojevima daje z-index do 1000 (.leaflet-top je 1000),
   pa bi mapa probijala kroz dijalog. Zato dijalog ide iznad toga, a mapa
   dobija svoj kontekst slaganja (position+z-index) da joj unutrašnji
   slojevi ostanu zatvoreni u njoj. */
.pozadina{
  position:fixed;inset:0;background:rgba(20,17,12,.55);z-index:2000;
  display:flex;align-items:flex-start;justify-content:center;padding:1rem;overflow-y:auto;
}
.dijalog{
  position:relative;z-index:1;
  background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3);
  width:100%;max-width:620px;margin:auto;padding:1.3rem 1.4rem 1.5rem;
}
.dijalog.siroki{max-width:840px;}
.dijalog h2{margin-bottom:1rem;}
.dijalog-dno{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem;flex-wrap:wrap;}

/* ---------- MAPA ---------- */
#mapa, .mapa{
  height:320px;border-radius:12px;border:1px solid var(--okvir);
  /* zatvoren kontekst slaganja — Leafletovi slojevi ne izlaze iz mape */
  position:relative;z-index:0;isolation:isolate;
}
.mapa-uputstvo{font-size:.84rem;color:var(--tiho);margin:.5rem 0 0;}

/* ---------- PORUKE ---------- */
.poruka{
  border-radius:10px;padding:.7rem .95rem;margin-bottom:1rem;font-size:.93rem;
  border:1px solid;
}
.poruka.greska{background:#fdecea;border-color:#f5c6c2;color:#a5261e;}
.poruka.uspeh{background:#eaf6ea;border-color:#c3e3c4;color:#2e6930;}
.poruka.info{background:#fff6e6;border-color:#f0dcb4;color:#7a5c1e;}
.prazno{
  text-align:center;color:var(--tiho);padding:2.4rem 1rem;
  border:1px dashed var(--okvir);border-radius:var(--radius);background:#fbf9f6;
}
.prazno p{margin:.3rem 0 1rem;}

/* =====================================================================
   PRIJAVA — iste mere i boje kao prijava na portalu:
     papir (krem)  #f7f2e4      mastilo #20180f / #4a3f30
     med (zlatna)  #dc9a1c      tamnija #a86a12
   Pozadina je crtež otvorenog dnevnika sa saćem i pčelama (img/pozadina.svg),
   preko koga ide topao taman prekrivač da tekst ostane čitljiv.
   ===================================================================== */

body.prijava-strana{
  background:var(--charcoal);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.2rem,4vh,3rem) 1.2rem;position:relative;
}

.prijava-pozadina{
  position:fixed;inset:0;z-index:0;
  background:
    linear-gradient(rgba(28,23,16,.88),rgba(60,42,8,.55)),
    url('../img/pozadina.svg') center/cover no-repeat;
}

.prijava-okvir{position:relative;z-index:1;width:100%;max-width:360px;}

/* ---------- zaglavlje: logo, pozdrav, podnaslov ---------- */
.prijava-zaglavlje{text-align:center;margin-bottom:1.6rem;text-shadow:0 2px 12px rgba(20,14,5,.6);}
.prijava-logo{display:inline-block;margin-bottom:16px;transition:transform .25s,opacity .25s;}
.prijava-logo:hover,.prijava-logo:focus{transform:translateY(-2px);opacity:.85;}
.prijava-logo-znak{
  display:block;height:58px;aspect-ratio:4470/1820;background-color:#f4ecd8;
  -webkit-mask:url('../SMSVaga-logo.png') no-repeat center/contain;
  mask:url('../SMSVaga-logo.png') no-repeat center/contain;
}
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .prijava-logo{display:none;}
}
.prijava-zaglavlje h1{
  color:#f4ecd8;text-transform:uppercase;letter-spacing:.045em;
  font-weight:800;font-size:27px;line-height:1.2;margin:0;
}
.prijava-podnaslov{
  color:rgba(244,236,216,.72);font-size:15px;font-weight:400;margin:8px 0 0;
}

/* ---------- kartica ---------- */
.prijava-kartica{
  background:#f7f2e4;border-radius:14px;
  border:1px solid rgba(32,24,15,.14);
  box-shadow:0 25px 30px -13px rgba(20,14,5,.5);
  padding:1.6rem 1.5rem 1.4rem;
}
.prijava-kartica .kartica-naslov{
  text-align:center;color:#20180f;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.5rem;margin:0 0 1.2rem;
}
.prijava-kartica .uputstvo{
  color:#4a3f30;font-size:.86rem;margin:-.5rem 0 1.1rem;text-align:center;line-height:1.45;
}
/* Proba od 14 dana — izdvojena iz uputstva.
   Ista boja i ista leva traka kao u okviru u poruci o potvrdi adrese, da
   covek koji je video jedno prepozna drugo. */
.prijava-kartica .proba-okvir{
  background:#fdf6e7;border:1px solid var(--okvir-jak);border-left:4px solid var(--accent);
  border-radius:10px;padding:.6rem .85rem;margin:-.4rem 0 1.2rem;
  color:#20180f;font-size:.86rem;line-height:1.45;text-align:center;font-weight:600;
}
.prijava-kartica .polje label{color:#4a3f30;font-weight:600;}
.prijava-kartica .polje input{
  background:#fff;border:1px solid rgba(32,24,15,.22);border-radius:8px;color:#20180f;
}
.prijava-kartica .polje input:focus{
  border-color:#dc9a1c;box-shadow:0 0 0 3px rgba(220,154,28,.25);background:#fff;
}
.dugme.oblo{
  width:100%;border-radius:999px;padding:.7rem;font-size:1rem;font-weight:700;
  background:#dc9a1c;color:#20180f;margin-top:.3rem;
}
.dugme.oblo:hover:not([disabled]){background:#a86a12;color:#f7f2e4;}
.dugme.oblo[disabled]{background:#dc9a1c;opacity:.75;}

.prijava-veze{text-align:center;margin:.9rem 0 0;}
.prijava-veze button{
  background:none;border:0;cursor:pointer;color:#a86a12;font-weight:600;font-size:.9rem;
}
.prijava-veze button:hover{color:#dc9a1c;text-decoration:underline;}

.prebaci{
  text-align:center;margin:.9rem 0 0;font-size:.88rem;color:#4a3f30;
  border-top:1px solid rgba(32,24,15,.12);padding-top:.9rem;
}
.prebaci button{background:none;border:0;color:#a86a12;font-weight:700;cursor:pointer;font-size:.88rem;}
.prebaci button:hover{color:#dc9a1c;text-decoration:underline;}

.prijava-pomoc{
  text-align:center;color:rgba(244,236,216,.75);font-size:14px;
  margin:22px auto 0;text-shadow:0 1px 6px rgba(20,14,5,.5);
}
.prijava-pomoc a{color:#dc9a1c;font-weight:600;border-bottom:1px solid rgba(220,154,28,.45);text-decoration:none;}
.prijava-pomoc a:hover{color:#f0b23a;}

/* ---------- prekidač jezika ---------- */
.jezik-prekidac{
  position:absolute;top:18px;right:22px;z-index:5;
  display:flex;align-items:flex-start;gap:.55rem;
}
.jezik-prekidac button{
  background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.22rem;line-height:1;
}
.jezik-prekidac .flag{
  display:block;width:28px;height:19px;border-radius:3px;overflow:hidden;
  border:1px solid rgba(244,236,216,.3);transition:transform .25s,box-shadow .2s;
}
.jezik-prekidac .flag svg{width:100%;height:100%;display:block;}
.jezik-prekidac .lbl{
  font-size:.64rem;font-weight:700;letter-spacing:.08em;
  color:rgba(244,236,216,.75);transition:color .2s;
}
.jezik-prekidac button:hover .flag{transform:translateY(-2px);}
.jezik-prekidac button:hover .lbl{color:#f4ecd8;}
.jezik-prekidac button.is-active{cursor:default;}
.jezik-prekidac button.is-active .flag{box-shadow:0 0 0 2px #dc9a1c;}
.jezik-prekidac button.is-active .lbl{color:#dc9a1c;}

/* Ostali jezici — padajuća lista pored tri zastavice. Native <select> je
   ovde namerno: na telefonu ga sistem otvori kao svoj točak, pa
   osamnaest jezika ne pravi spisak preko pola ekrana. */
.jezik-prekidac .jezik-ostali{
  appearance:none;-webkit-appearance:none;
  margin-top:1px;height:21px;max-width:132px;
  padding:0 1.35rem 0 .5rem;
  background:rgba(20,16,10,.45);
  border:1px solid rgba(244,236,216,.3);border-radius:3px;
  color:rgba(244,236,216,.75);
  font-family:inherit;font-size:.64rem;font-weight:700;letter-spacing:.06em;
  cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f4ecd8' stroke-opacity='.75' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .45rem center;background-size:8px 5px;
}
.jezik-prekidac .jezik-ostali:hover{color:#f4ecd8;border-color:rgba(244,236,216,.55);}
.jezik-prekidac .jezik-ostali.is-active{color:#dc9a1c;border-color:#dc9a1c;box-shadow:0 0 0 1px #dc9a1c;}
/* Spisak koji otvori pregledač crta sistem, ne mi — ove dve boje su jedino
   što se tu može reći, i bez njih je na tamnoj temi beo tekst na belom. */
.jezik-prekidac .jezik-ostali option{background:#231d14;color:#f4ecd8;}

@media (max-width:600px){
  .prijava-zaglavlje h1{font-size:22px;}
  .prijava-logo-znak{height:48px;}
  .jezik-prekidac{top:12px;right:12px;gap:.4rem;}
  .jezik-prekidac .flag{width:24px;height:16px;}
  .jezik-prekidac .lbl{font-size:.58rem;}
  .jezik-prekidac .jezik-ostali{height:18px;max-width:104px;font-size:.58rem;padding:0 1.15rem 0 .4rem;}
}

/* ---------- TABELA (administracija) ---------- */
table.spisak{width:100%;border-collapse:collapse;font-size:.9rem;}
table.spisak th,table.spisak td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--linija);}
table.spisak th{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tiho);}
.stanje-oznaka{font-weight:800;font-size:.82rem;}
.stanje-oznaka.ceka{color:var(--accent-tamna);}
.stanje-oznaka.odobren{color:#2e7d32;}
.stanje-oznaka.odbijen{color:var(--crvena);}

/* ---------- SITNO ---------- */
.alatke{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.tiho{color:var(--tiho);font-size:.88rem;}
.samo-desktop{display:inline;}

/* =====================================================================
   TELEFON I TABLET

   Dnevnik se drži uz košnice, a tamo se nosi telefon, ne računar. Zato
   ovaj deo nije ukras nego pravi drugi raspored:

     · traka se skuplja u meni sa tri crte
     · sve što se dodiruje visoko je bar 44 px — prst nije miš
     · polja za unos idu na 16 px, jer iPhone ispod toga sam uveća stranu
       čim se polje dodirne, pa se posle mora ručno vraćati
     · dijalozi se otvaraju odozdo, kao fioka, i drže dugmad na dohvat
       palca
     · razmaci prate „safe area" — deo ekrana oko zareza i donje crte
   ===================================================================== */

/* ---------- TRAKA KAO MENI ---------- */
@media (max-width:860px){
  .samo-desktop{display:none;}

  .traka{
    height:56px;gap:.6rem;
    padding-left:max(.9rem,env(safe-area-inset-left));
    padding-right:max(.9rem,env(safe-area-inset-right));
  }
  .traka .znak{width:78px;height:32px;}
  .traka-burger{display:inline-flex;}
  .traka .rastojanje{display:none;}

  .traka-alatke{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:.5rem;
    background:#fff;border-top:1px solid var(--linija);
    box-shadow:0 14px 28px rgba(0,0,0,.18);
    padding:.85rem clamp(.9rem,4vw,1.2rem) calc(1.1rem + env(safe-area-inset-bottom));
    max-height:calc(100vh - 56px);overflow-y:auto;
  }
  .traka-alatke:not(.otvoren){display:none;}

  /* Ko je prijavljen — na vrhu menija, odvojen linijom. */
  .traka-alatke .ko{
    order:-1;text-align:left;padding-bottom:.6rem;
    border-bottom:1px solid var(--linija);
  }
  .traka-alatke #dugmeOdjava{order:9;}

  .traka-alatke .dugme{
    width:100%;justify-content:flex-start;min-height:48px;
    font-size:.95rem;padding:.7rem .9rem;text-transform:none;letter-spacing:0;
  }
  /* Tihe stavke u meniju moraju da se vide kao dugmad — na telefonu nema
     prelaska mišem preko njih da bi se otkrile. */
  .traka-alatke .dugme.tiho{
    background:var(--polje);color:var(--text);border:1px solid var(--linija);
  }
  .traka-alatke .dugme.zdravlje{justify-content:center;font-size:.95rem;}
  .traka-alatke .dugme.zdravlje .krst:last-child{display:none;}
  #dugmeNoviPcelinjak,.dugme.zdravlje{margin-left:0;}
}

/* ---------- SADRŽAJ NA TELEFONU ---------- */
@media (max-width:600px){
  .sadrzaj{
    padding-left:max(.9rem,env(safe-area-inset-left));
    padding-right:max(.9rem,env(safe-area-inset-right));
    padding-bottom:5rem;
  }
  .kartica{padding:.9rem 1rem;}
  .putanja{font-size:.82rem;}

  /* Dodir umesto miša: ništa što se pritiska nije niže od 44 px. */
  .dugme{min-height:44px;padding:.6rem 1rem;}
  .dugme.malo{min-height:40px;}
  .veza-dugme{min-height:40px;display:inline-flex;align-items:center;}

  /* iPhone uveća stranu kad se dodirne polje manje od 16 px. */
  .polje input,.polje select,.polje textarea,
  .pretraga-mesta input{font-size:16px;padding:.65rem .75rem;}
  .polje{margin-bottom:1rem;}
  .red{grid-template-columns:1fr;}
  .cek-grupa{grid-template-columns:1fr;}
  .cek{min-height:48px;}
  .ocena button{min-height:46px;font-size:1.05rem;}

  /* Tri zbirne pločice ostaju u jednom redu, samo sitnije — tako se stanje
     pčelinjaka vidi bez skrolovanja. */
  .zbir{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:2rem;}
  .zbir-plocica{padding:.7rem .55rem;}
  .zbir-plocica strong{font-size:1.5rem;}
  .zbir-plocica span{font-size:.6rem;letter-spacing:.05em;}

  .naslov-red{gap:.7rem;margin-bottom:1rem;}
  .naslov-znak{width:48px;height:48px;border-radius:12px;}
  .naslov-znak svg{width:26px;height:26px;}

  .mreza{grid-template-columns:1fr;gap:.8rem;}
  .kosnice{grid-template-columns:repeat(3,1fr);gap:.6rem;}

  .merenje-plocice{grid-template-columns:repeat(2,1fr);}
  .merenje-plocica strong{font-size:1.15rem;}
  .merenje-plocica.istaknuta strong{font-size:1.35rem;}

  .izbor-oblasti{grid-template-columns:repeat(3,1fr);}
  .izbor-nacina{grid-template-columns:repeat(2,1fr);}
  ul.katalog-spisak{grid-template-columns:1fr;}
  ul.katalog-spisak button{min-height:48px;}
  ul.spisak-mesta button{min-height:48px;}

  .osa li{padding:.7rem .8rem;}
  .osa .radnje .dugme{flex:1;min-height:42px;}

  #mapa,.mapa{height:260px;}
  .pretraga-mesta{flex-wrap:wrap;}
  .pretraga-mesta input{flex:1 1 100%;}
  .pretraga-mesta .dugme{flex:1;}

  .podnozje-dnevnika{margin-top:0;padding-bottom:calc(1.6rem + env(safe-area-inset-bottom));}
}

@media (max-width:380px){
  .kosnice{grid-template-columns:repeat(2,1fr);}
  .izbor-oblasti{grid-template-columns:repeat(2,1fr);}
  .zbir-plocica strong{font-size:1.3rem;}
}

/* ---------- DIJALOG KAO FIOKA ---------- */
@media (max-width:700px){
  /* Na telefonu dijalog izlazi odozdo i staje uz donju ivicu: tamo je
     palac, pa su dugmad na dohvat. */
  .pozadina{align-items:flex-end;padding:0;}
  .dijalog{
    margin:0;max-width:none;border-radius:18px 18px 0 0;
    padding:1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
    max-height:92vh;overflow-y:auto;
    animation:fioka-gore .22s ease-out;
  }
  .dijalog.siroki{max-width:none;}
  @keyframes fioka-gore{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}

  /* Potvrda ide gore i preko cele širine, otkazivanje ispod nje. */
  .dijalog-dno{
    flex-direction:column-reverse;gap:.5rem;margin-top:1.1rem;
    position:sticky;bottom:calc(-1.2rem - env(safe-area-inset-bottom));
    background:#fff;padding-top:.8rem;
  }
  .dijalog-dno .dugme{width:100%;min-height:48px;font-size:1rem;}
}

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

/* ---------- TABELE ---------- */
@media (max-width:700px){
  /* Tabela sa nalozima ne staje u širinu telefona; umesto lomljenja
     redova, ceo blok se pomera prstom u stranu. */
  table.spisak{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.spisak th,table.spisak td{white-space:nowrap;}
}

/* ==========================================================================
   MOBILNI STANDARDI

   Raspored je već prilagođen telefonu (hamburger meni, kartice jedna ispod
   druge, tabele se pomeraju u stranu). Ovde su stvari koje se ne vide dok ne
   zasmetaju: zumiranje pri kucanju, kašnjenje dodira, povlačenje strane.
   ========================================================================== */

/* iOS zumira stranu kad se klikne u polje čije je slovo manje od 16px, i
   posle toga ostaje uvećana. Zato na dodirnim ekranima sva polja idu na 16px;
   na računaru ostaje zatečena veličina. */
@media (max-width:900px){
  .polje input, .polje select, .polje textarea,
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=search], input[type=date],
  input[type=time], input[type=tel], select, textarea{
    font-size:16px;
  }
}

/* Bez ovoga stariji iOS čeka ~300ms posle dodira (proverava dvoklik), pa
   aplikacija deluje troma. */
button, .dugme, .veza-dugme, a, input, select, textarea, [role=button]{
  touch-action:manipulation;
}

/* Sivi pravougaonik koji Android nacrta preko dugmeta pri dodiru — smeta
   preko naših zaobljenih dugmadi. */
button, .dugme, .veza-dugme, a, [role=button]{
  -webkit-tap-highlight-color:rgba(220,154,28,.18);
}

/* Kad se dođe do kraja spiska u dijalogu, pomeranje ne sme da „procuri" na
   stranu ispod, niti da povuče osvežavanje strane. */
.dijalog{overscroll-behavior:contain;}
html{overscroll-behavior-y:none;}

/* Dodato na početni ekran, aplikacija nema adresnu traku, pa sadržaj mora
   sam da se skloni od zareza i donje crte. */
@media (display-mode:standalone){
  body{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* Duga imena pčelinjaka i e-adrese znaju da razvuku karticu u stranu. */
.karta h3, .karta h2, .oznaka, .stavka-naziv{
  overflow-wrap:anywhere;
}

/* ==========================================================================
   DUGAČKI OBRASCI NA TELEFONU

   Zdravstvena mera, novi pčelinjak i nova košnica imaju mnogo polja koja se
   biraju, kucaju i štikliraju. Raspored je već rešen (fioka odozdo, jedna
   kolona, dugmad zalepljena za dno); ovde je ono što smeta kad se takav
   obrazac popunjava jednom rukom, na suncu, pored košnice.
   ========================================================================== */
@media (max-width:700px){

  /* Naslov ostaje na vrhu dok se obrazac pomera. Na dugačkom obrascu se
     inače izgubi šta se uopšte upisuje — pregled ili tretman. */
  .dijalog h2{
    position:sticky;top:calc(-1.1rem - 1px);
    background:#fff;margin:0 -1.1rem 1rem;padding:.9rem 1.1rem .7rem;
    border-bottom:1px solid var(--linija);z-index:2;
    font-size:1.05rem;
  }

  /* Natpisi polja i pomoćni tekst su bili računarski sitni. */
  .polje label{font-size:.84rem;}
  .polje .pomoc{font-size:.85rem;line-height:1.35;}

  /* Pločice za izbor (oblast tretmana, način držanja) — ime je bilo 0.72rem,
     što se na suncu praktično ne vidi. Uz to im se garantuje visina da se
     pogađaju prstom. */
  .izbor-oblasti button, .izbor-nacina button{min-height:74px;}
  .izbor-oblasti button .ime, .izbor-nacina button .ime{font-size:.82rem;}
  .izbor-oblasti button .ikona{font-size:1.45rem;}

  /* Štiklirna polja preko cele širine — dva u redu su na 400px pretesna za
     natpise tipa „Dodat satna osnova / gradnja". */
  .cek-grupa{grid-template-columns:1fr;}
  .cek{font-size:1rem;padding:.7rem .8rem;}

  /* Poslednje polje ume da ostane ispod zalepljene dugmadi. */
  .dijalog form, .dijalog > div:last-of-type{padding-bottom:.4rem;}
}

/* Na najužim telefonima pločice idu dve u red, ali sa punim natpisom. */
@media (max-width:380px){
  .izbor-oblasti button .ime, .izbor-nacina button .ime{font-size:.78rem;}
}

/* ---------- TARIRANJE PROČITANO SA VAGE ----------
   Dodavanje i skidanje nastavka je posao na košnici kao i svaki drugi, samo
   ga pčelar nije kucao ovde — vaga ga je sama zabeležila. Zato stoji uz
   merenja, a ne u osi zapisa: nije unos iz dnevnika i ovde se ne uređuje. */
.tariranja{margin-top:1rem;}
.tariranja h4{margin:0 0 .5rem;font-size:.95rem;}
.tariranja-spisak{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;}
.tariranja-spisak li{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:.45rem .6rem;border:1px solid var(--okvir);border-radius:.5rem;background:#fff;
}
.tariranje-kg{font-weight:700;min-width:5.2rem;}
.tariranje.plus .tariranje-kg{color:#3f5228;}
.tariranje.minus .tariranje-kg{color:#8c3a2e;}
.tariranje-kada{font-size:.85rem;}
.tariranje-sta{font-size:.82rem;color:#7a7264;}
.znacka.siva{background:#f1eee8;border-color:var(--okvir);color:#6f6858;}

/* Datum dopune kataloga preparata — v. `KATALOG_DOPUNJEN` u lib/preparati.php.
   Prigušeno, jer je obaveštenje a ne podatak koji se unosi. */
.katalog-dopunjen {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: #8a7f6b;
}

/* Red na dnu spiska pčelinjaka: poziv da nam se javi predlog.
   Namerno tih — ovo nije radnja zbog koje je pčelar otvorio dnevnik, pa ne
   sme da se otima od dugmadi iznad. Ista boja i veličina kao podnožje. */
.predlog-dno{
  margin: 2.2rem 0 .6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.07);
  text-align: center;
  font-size: .85rem;
  color: #8a7f6b;
}
.predlog-dno a{
  color: #a86a12;
  margin-left: .35rem;
  text-decoration: underline;
}
.predlog-dno a:hover{ color: #dc9a1c; }

/* ---------------- VREMENSKA PROGNOZA ----------------
   Pet dana u redu. Na telefonu se red SKUPLJA, ne prelama i ne kliza — pet
   uskih kolona staje i na 320px, a vodoravno klizanje u pčelinjaku, sa
   rukavicama, niko ne pogodi. */
.prognoza-red{
  display: flex;
  gap: .3rem;
}
/* Pločica je DUGME — otvara prozor dana. Izgled ostaje kakav je bio; skidaju
   se samo okvir i pozadina koje pregledač sam daje dugmetu. */
.prognoza-dan{
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: .35rem .15rem .4rem;
  border-radius: .5rem;
  background: var(--polje);
  border: 1px solid transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.prognoza-dan:hover{ border-color: var(--linija); }
.prognoza-dan:focus-visible{ outline: 2px solid var(--linija); outline-offset: 2px; }

/* ---------------- PROZOR DANA ---------------- */
.dan-telo{ text-align: left; }
.dan-grupa{ margin-top: .9rem; }
.dan-grupa:first-child{ margin-top: .2rem; }
.dan-naslov{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tiho); font-weight: 800; margin-bottom: .2rem;
}
/* Red nosi tri stvari jednu pod drugom, pa NIJE flex — flex je `.dan-vrh`,
   samo naziv i broj. Pre 28.9.2026. je i red bio flex; kad su ispod broja
   došla dva objašnjenja, sve troje je stajalo u istoj liniji. */
.dan-red{
  padding: .5rem 0;
  border-bottom: 1px solid var(--linija);
}
.dan-red:last-child{ border-bottom: 0; }
.dan-vrh{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem;
}
.dan-vrh b{ white-space: nowrap; }

/* „Šta je ovaj podatak" — sitno i tiho, čita se jednom pa se preskače. */
.dan-sta{
  font-size: .74rem; line-height: 1.35; color: var(--tiho);
  margin-top: .2rem;
}

/* „Šta ovaj broj znači za pčelara" — zbog ovoga se prozor i otvara, pa stoji
   uočljivije: jača boja i tanka crta uz levu ivicu. */
.dan-znaci{
  font-size: .82rem; line-height: 1.4; margin-top: .25rem;
  padding-left: .5rem; border-left: 2px solid var(--okvir-jak);
}
.prognoza-ime{
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; color: var(--tiho);
}
/* Znak je tekst, ne slika — v. objašnjenje uz `VREME_ZNAK` u app.js. */
.prognoza-znak{ font-size: 1.5rem; line-height: 1.5; }
.prognoza-temp b{ font-size: .95rem; }
.prognoza-temp span{ font-size: .82rem; color: var(--tiho); margin-left: .15rem; }
.prognoza-kisa{ font-size: .75rem; color: #2f7fd0; }
.prognoza-vetar{ font-size: .7rem; color: var(--tiho); }

/* Savet za obilazak: ✓ / ~ / ✕ pod svakim danom.
   Uz boju ide i RAZLIČIT ZNAK, ne samo boja — svaki dvanaesti čovek slabije
   razlikuje zeleno i crveno, a pčelarstvo nije poziv koji to isključuje. */
.prognoza-savet{
  margin-top: .25rem;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: .3rem;
}
.prognoza-savet.savet-dobro{ color: #1f7a3d; background: #e6f4ea; }
.prognoza-savet.savet-moze { color: #8a6a12; background: #fbf3dd; }
.prognoza-savet.savet-ne   { color: #a33; background: #fbeaea; }

.prognoza-zakljucak{
  margin: .5rem 0 0;
  font-weight: 700;
}

/* ---------------- DIKTIRANJE ----------------
   Mikrofon stoji NA VRHU POLJA, po sredini. Ranije je bio u uglu, uz donju
   ivicu — tamo ga je pčelar previđao, a to je dugme koje se pritiska prvo.

   BOJA NOSI STANJE, ne samo znak:
     plavo + 🎙   mirno, pritisni da diktiraš
     crveno + ■   sluša, pritisni da staneš
   Sa rukavicama i na suncu se boja vidi pre nego što se znak pročita, a
   kvadrat „stani" kaže i šta drugi pritisak radi — to iz samog mikrofona
   nije bilo jasno, pa se dešavalo da pčelar čeka da se ugasi sam. */
.polje.sa-mikrofonom, .red.sa-mikrofonom{ position: relative; }

.mikrofon-vrh{
  display: flex;
  justify-content: center;
  margin: .15rem 0 .45rem;
}

.mikrofon{
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid #2f6fb0;
  border-radius: 50%;
  background: #3b82c4;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.mikrofon:hover{ background: #3576b2; }

/* Znak „stani" se ne vidi dok je mirno, i obrnuto. Oba stoje u HTML-u da
   promena stanja ne zavisi od JavaScripta — v. `mikrofonHtml` u app.js. */
.mikrofon .mik-stani{ display: none; }
.mikrofon.slusa .mik-mirno{ display: none; }
.mikrofon.slusa .mik-stani{ display: inline; font-size: .95rem; }

/* Dok sluša — crveno i kuca, da se vidi i krajičkom oka. Ko ne podnosi
   kretanje, ne dobija ga. */
.mikrofon.slusa{
  background: #d64545;
  border-color: #b93636;
  animation: mikKuca 1.1s ease-in-out infinite;
}
@keyframes mikKuca{
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,.55); }
  70%      { box-shadow: 0 0 0 .55rem rgba(214,69,69,0); }
}
@media (prefers-reduced-motion: reduce){
  .mikrofon.slusa{ animation: none; }
}

.diktat-poruka{
  margin-top: .3rem;
  font-size: .8rem;
  color: #a33;
}

/* Nalepnica sa QR kodom — kako izgleda u dijalogu. Za štampu postoji zaseban
   stil u `app.js` (STIL_NALEPNICA), jer tabak ima svoja pravila preloma. */
.nalepnica{
  display:inline-block;
  border:1px dashed var(--linija);
  border-radius:.6rem;
  padding:.6rem;
  background:#fff;
  text-align:center;
}
.nalepnica svg{width:170px;height:170px;display:block;margin:0 auto;}
.nalepnica-ispod{margin-top:.35rem;}
.nalepnica-kosnica{font-weight:800;font-size:1.05rem;color:#000;}
.nalepnica-znak{
  font-family:Consolas,"SF Mono",monospace;
  font-size:.95rem;letter-spacing:.12em;color:#000;
}
/* Adresa se ne prelama — pčelar je prepisuje ili kopira. */
#adresaNalepnice{font-family:Consolas,"SF Mono",monospace;font-size:.85rem;}
/* Dok sluša, poruka ispod polja nije upozorenje nego obaveštenje. */
.diktat-poruka.radi{ color: var(--tiho); }

/* Diktiranje celog pregleda — stoji na vrhu dijaloga. */
.diktat-pregled{
  background: var(--polje);
  border: 1px dashed var(--linija);
  border-radius: .6rem;
  padding: .7rem .8rem .6rem;
  margin-bottom: 1rem;
}
.diktat-pregled textarea{ min-height: 3.4rem; }

/* Mikrofon celog pregleda — na vrhu, po sredini, veći od ostalih.
   U uglu polja (kao kod ostalih mikrofona) pčelar ga je previđao, a ovo je
   dugme koje se ovde pritiska PRVO. `position: static` poništava apsolutno
   postavljanje iz `.mikrofon` — inače bi i dalje visio u uglu, samo bi se
   njegovo mesto u toku strane praznilo. */
/* U kutiji „Izdiktirajte ceo pregled" mikrofon je krupniji nego drugde — to
   je dugme kojim ceo unos pregleda počinje. */
.diktat-pregled .mikrofon{
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.diktat-pregled .mikrofon.slusa .mik-stani{ font-size: 1.25rem; }
.diktat-dno{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.45rem;
}
/* Ishod ume da bude dugačak spisak polja — ne sme da razvuče dijalog. */
.diktat-dno .tiho{ flex:1 1 12rem; font-size:.82rem; line-height:1.35; }

/* ---------- ZADACI ----------
   Spisak je namerno gust: pred polazak se čita odjednom, a ne prelistava.
   Boja je samo na roku koji je prošao — kad bi svaka stavka nešto bojila,
   crveno više ne bi značilo „ovo kasni". */

.zadaci-naslov{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tiho);margin:1rem 0 .4rem;font-weight:800;
}
.zadaci-naslov:first-child{margin-top:0;}

ul.zadaci{list-style:none;margin:0;padding:0;}
ul.zadaci li.zadatak{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .2rem;border-bottom:1px solid var(--okvir);
}
ul.zadaci li.zadatak:last-child{border-bottom:none;}

.zadatak .stikla{
  display:flex;align-items:center;gap:.55rem;flex:1;cursor:pointer;min-width:0;
}
.zadatak .stikla input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent);}
.zadatak .stikla span{line-height:1.3;}

/* Znak da je stavku pčelar sam ukucao. Ne piše „vaše" rečima — red bi
   postao dvostruko duži, a znak kaže isto. */
.zadatak .svoja{color:var(--tiho);font-size:.85em;margin-left:.25rem;}

.zadatak .rok{
  flex:0 0 auto;font-size:.8rem;color:var(--tiho);white-space:nowrap;
}
.zadatak .rok.kasni{color:var(--crvena);font-weight:800;}

/* Oprema se čita kao spisak za torbu, pa je količina napred i podebljana. */
ul.zadaci.poneti .stikla span b{font-variant-numeric:tabular-nums;}

/* Brojka na crtežu košnice. Stoji u gornjem desnom uglu, nasuprot tačkice
   stanja u levom — dve različite stvari ne smeju da dele isto mesto. */
.kosnica{position:relative;}
.kosnica .znacka-zadaci{
  position:absolute;top:.35rem;right:.35rem;
  min-width:19px;height:19px;padding:0 .22rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border-radius:10px;
  font-size:.72rem;font-weight:800;line-height:1;
}
.kosnica .znacka-zadaci.kasni{background:var(--crvena);}

@media (max-width:600px){
  .zadatak .rok{font-size:.74rem;}
  ul.zadaci li.zadatak{padding:.62rem .2rem;}  /* prst, ne miš */
}

/* ---------- SKENER PLOČICE (js/skener.js) ----------
   Ceo ekran, crno: kamera je jedino što se gleda. Iznad svega — otvara se iz
   dijaloga košnice (.pozadina je 2000, .povrhu 2100). Okvir je širok i nizak
   jer je takav i bar-kod na pločici; tu traku skener i čita. */
.skener{
  position:fixed;inset:0;z-index:2200;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.skener video{width:100%;height:100%;object-fit:cover;}
.skener-okvir{
  position:absolute;left:8%;right:8%;top:30%;height:40%;
  border:3px solid var(--accent);border-radius:10px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45);pointer-events:none;
}
.skener-poruka{
  position:absolute;top:calc(env(safe-area-inset-top) + 1.2rem);left:1rem;right:1rem;
  margin:0;text-align:center;color:#fff;font-size:1rem;text-shadow:0 1px 3px #000;
}
.skener .dugme{
  position:absolute;bottom:calc(env(safe-area-inset-bottom) + 1.6rem);
  background:#fff;color:var(--charcoal);min-width:9rem;
}
.oznaka-red{display:flex;gap:.5rem;align-items:stretch;}
.oznaka-red input{flex:1;min-width:0;}
.oznaka-red .dugme{white-space:nowrap;}