/* =====================================================================
   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;
  --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{
  background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%;
}
a{color:var(--accent-tamna);}
button{font-family:inherit;}

/* ---------- TRAKA ---------- */
.traka{
  position:sticky;top:0;z-index:60;height:62px;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);
}
.traka .znak{
  height:34px;width:84px;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:.92rem;}
.traka .rastojanje{margin-left:auto;}
.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;}

/* ---------- 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:44px;flex:none;padding:0;overflow:hidden;color:transparent;
  background:var(--polje);border:1px solid var(--okvir);border-radius:10px;cursor:pointer;
}
.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:.65;cursor:pointer;
}
.datum-polje .datum-kalendar:hover{border-color:var(--accent);}

/* ---------- 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;}

/* ---------- SPISAK PČELINJAKA ---------- */
.mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1rem;}
.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);}

/* ---------- 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);} }
@media (max-width:480px){ .kosnice{grid-template-columns:repeat(2,1fr);} }

/* ---------- 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;
}
.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;}

@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;}
}

/* ---------- 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;}
@media (max-width:620px){
  .samo-desktop{display:none;}
  .traka{height:56px;}
  .traka .znak{width:70px;height:28px;}
  .dijalog{padding:1.1rem;}
}