/* BAZA VOZAČA — RADNI RASPORED: korporativni izgled (tamnoplava, bela, zlatna), bez ugrađenih podataka. */
:root{
  --navy-900:#0a2342;--navy-800:#0f2f55;--navy-700:#12386b;--navy-500:#2a5ea8;
  --gold:#c9a227;--gold-100:#f6efd5;--gold-700:#7a5f0b;
  --bg:#f3f5f9;--text:#14213d;--muted:#55657d;--line:#d6dde8;--line-strong:#a9b8cc;
  --shadow:0 2px 8px #0a234214;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
[hidden]{display:none!important}

/* ZAGLAVLJE */
header{background:#0a2342;color:#fff;padding:0;border-bottom:4px solid var(--gold);box-shadow:0 3px 12px #0a234230}
.head{position:relative;margin:0 auto;display:block}
/* Baner se kadrira po visini (logo je u sredini slike, ne seče se); razmera slike se ne menja */
.bannerbox{height:clamp(150px,17vw,260px);overflow:hidden}
.banner{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media(min-width:1601px){.head{max-width:1600px}.bannerbox{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}}
/* Naslov strane preko praznog tamnoplavog dela banera (desno) */
.headright{position:absolute;right:2.5%;top:50%;transform:translateY(-50%);width:17%;text-align:right}
.headright b{display:none}
.headright small{display:none}
.headright strong{display:block;font-size:clamp(14px,1.9vw,30px);font-weight:700;letter-spacing:1px;line-height:1.15;color:#fff;text-shadow:0 2px 8px #000000a0;text-wrap:balance;min-height:0}

/* KARTICE I FILTERI */
main{max-width:1600px;margin:9px auto;padding:0 9px}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy-700);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:9px}
.controls{padding:9px;overflow:visible}
.filters{display:grid;grid-template-columns:.9fr 1.1fr 1.1fr .8fr 1.15fr 1.25fr;gap:7px}
label{display:block;font-size:10px;font-weight:900;color:var(--navy-800);margin-bottom:3px}
select,button,input{height:38px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;padding:0 9px;font-size:12px;width:100%;color:var(--text)}
select:disabled{opacity:.6}
button{background:var(--navy-700);color:#fff;border:0;font-weight:800;cursor:pointer;width:auto}
.f-month select{font-weight:900;color:var(--navy-700)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
select:focus,input:focus,button:focus-visible{outline:2px solid var(--navy-500);outline-offset:1px;border-color:var(--navy-500)}
button:hover{background:var(--navy-900)}
.quick button:hover{background:#dbe5f1}
.quick .primary:hover{background:var(--navy-900)}
.quick button{padding:0 12px;background:#e7eef4;color:var(--navy-700);border:1px solid var(--line-strong)}
.quick .primary{background:var(--navy-700);color:#fff}

/* STANJA I PRIJAVA */
.devicebar{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.accessnote{font-size:12px;font-weight:900;color:var(--navy-700)}
.accessnote:empty{display:none}
.devicebar button{padding:0 12px;background:#fff;color:#9b1c1c;border:1px solid #d9a3a3}
.state{padding:18px;font-size:15px;font-weight:700;text-align:center;color:var(--navy-800)}
.state.error{color:#9b1c1c;background:#fff5f5}
.login{padding:22px 24px;max-width:420px;margin:28px auto;border-top:3px solid var(--gold)}
.login h2{margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:19px;color:var(--navy-900)}
.login p{margin:0 0 10px;font-size:13px}
.login input{margin-bottom:8px}
.login button{width:100%}
.loginmsg{margin-top:8px;color:#9b1c1c;font-size:12px;font-weight:700;min-height:14px}
/* Stranica za prijavu: aerodromska pozadina i jasna bela kartica */
body.page-login{min-height:100vh;background:#01316b url("/img/airport-bg.png") 50% bottom/cover no-repeat fixed}
body.page-login .login{margin:4vh auto 24px;padding:28px 30px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:10px;box-shadow:0 14px 40px #0a234250}
body.page-login .login h2{font-size:21px}

/* INFO, PORUKA, STRANE */
.f-emp input{margin-bottom:4px}
.empmsg{display:block;min-height:13px;font-size:11px;font-weight:700;color:#9b1c1c}
.empmsg.ok{color:var(--muted)}
.emphead h2{margin:0;font-size:26px;font-weight:900;color:var(--navy-700);letter-spacing:.5px;line-height:1.2;overflow-wrap:anywhere}
.emphead div{margin-top:2px;font-size:13px;font-weight:700;color:var(--muted)}
.resulttable.emptable{min-width:0}
.info{padding:8px 10px;background:#f1f6f9;border-bottom:1px solid var(--line);font-size:12px}
.notice{padding:5px 9px;background:var(--gold-100);color:var(--gold-700);font-size:10px;font-weight:700;border-bottom:1px solid #e6d79a}
.n-mob{display:none}
.nav{display:flex;gap:5px;flex-wrap:wrap;padding:6px 9px;background:#f7fafc;border-bottom:1px solid var(--line)}
.nav:empty{display:none}
.nav button{height:29px;padding:0 11px;background:#e7eef4;color:var(--navy-700)}
.nav button.active{background:var(--navy-700);color:#fff}

/* TABELA RASPOREDA */
.tablewrap{overflow:auto;max-height:72vh}
table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-size:10.5px}
th,td{border-right:1px solid #9db1c0;border-bottom:1px solid #aabcc9;padding:2px;white-space:normal;overflow:hidden;text-align:center;height:35px;line-height:1.08}
col.c-name{width:13.5%}
col.c-sec{width:6.5%}
thead th{position:sticky;z-index:2}
thead tr:first-child th{top:0;background:#f1f4f6;color:#142638;font-size:13px;height:27px;font-weight:900}
thead tr:nth-child(2) th{top:27px;background:var(--navy-700);color:#fff;font-size:9.5px;height:25px;font-weight:900}
thead th.c-name,thead th.c-sec{background:var(--navy-700)!important;color:#fff!important}
th.c-name,td.c-name{text-align:left;position:sticky;left:0;z-index:1}
thead th.c-name{z-index:3}
td.c-name{background:#fff;font-weight:900;font-size:15px;line-height:1.05;padding-left:4px}
td.c-sec{font-weight:700;font-size:10px}
thead th.daySun{background:#d91d26!important;color:#fff!important}
thead th.daySat{background:#e7eef4!important;color:var(--navy-700)!important}
thead th.dayHol{background:#f4b400!important;color:#1d1300!important}
thead tr:first-child th.dayHol{background:#ffd76a!important}
thead th.dayRel{background:#7b5ea7!important;color:#fff!important}
thead tr:first-child th.dayRel{background:#b9a3dd!important;color:#1f1236!important}
thead th.dayBoth{background:linear-gradient(135deg,#f4b400 50%,#7b5ea7 50%)!important;color:#fff!important}

/* Ceo raspored: oznake odsustva su duže od kolone dana — manji font; tekst se nikad ne odseca */
table.full td{overflow-wrap:anywhere}
table.full td:is(.st-Holiday,.st-R,.st-PO,.st-SLAVA,.st-Sick,.st-other){font-size:9px;letter-spacing:-.1px}
@media(min-width:701px) and (max-width:1500px){
  col.c-name{width:11.5%}
  col.c-sec{width:5.5%}
  td.c-name{font-size:13px}
  table.full td{padding:2px 1px}
  table.full td:not(.c-name):not(.c-sec){font-size:9.5px}
  table.full td:not(.c-name):not(.c-sec):is(.st-Holiday,.st-R,.st-PO,.st-SLAVA,.st-Sick,.st-other){font-size:8.5px}
}

/* Srednja širina (701–1099 px): ceo raspored se pomera levo–desno SAMO unutar svog okvira
   (kao na telefonu); ime i sektor ostaju zalepljeni levo, zaglavlje gore.
   Kolone dana su dovoljno široke da vreme smene ("20:00 / 08:00") i oznake stanu u jedan red. */
@media(min-width:701px) and (max-width:1099px){
  table.full{min-width:2300px}
  col.c-name{width:160px}
  col.c-sec{width:84px}
  td.c-name{box-shadow:2px 0 0 #9db1c0}
  table.full td:not(.c-name):not(.c-sec){white-space:nowrap;overflow-wrap:normal;font-size:10px;padding:2px}
  table.full td:not(.c-name):not(.c-sec):is(.st-Holiday,.st-R,.st-PO,.st-SLAVA,.st-Sick,.st-other){font-size:9.5px}
  .n-desk{display:none}
  .n-mob{display:inline}
}

/* STATUSI (boje iz V18) */
.st-Smena{background:#f7fbfd}
.st-Slobodan{background:#f5f8fa;color:var(--muted)}
.st-Holiday{background:#dcebf5;color:var(--navy-800);font-weight:700}
.st-R{background:#9ed8ed;color:var(--navy-800);font-weight:900}
.st-PO{background:#63b9e7;font-weight:900;color:#083b61}
.st-SLAVA{background:#ef6ce2;color:#25103a;font-weight:900}
.st-Sick{background:#c9ccd1;color:#2b2f35;font-weight:900}
.st-other{background:#fde2e2;color:#7a1010}

/* TABELA REZULTATA FILTERA */
.resulttable{min-width:700px;font-size:12px}
.resulttable th{background:var(--navy-700);color:#fff;position:sticky;top:0;height:30px}
.resulttable td{height:34px}
.resulttable td:first-child{text-align:left;font-weight:900;font-size:14px;padding-left:6px}
.resulttable td.empty{text-align:center;font-weight:700;color:var(--muted)}

/* LEGENDA */
.legend{display:flex;gap:5px;align-items:center;flex-wrap:wrap;padding:7px 9px;border-top:2px solid var(--navy-800);font-size:10px;font-weight:700}
.legend span{padding:4px 8px;border:1px solid #9db1c0;border-radius:3px}
.legend .lg-sun{background:#d91d26;color:#fff}
.legend .lg-sat{background:#e7eef4;color:var(--navy-700)}
.legend .lg-hol{background:#f4b400;color:#1d1300}
.legend .lg-rel{background:#7b5ea7;color:#fff}

/* SATI */
.hourscard summary{cursor:pointer;padding:10px 12px;font-weight:900;color:var(--navy-700);background:#f1f6f9;font-size:13px}
.hoursinfo{padding:6px 10px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line)}
.hourswrap{overflow:auto;max-height:60vh}
.hourstable{min-width:940px;font-size:12px}
.hourstable th{background:var(--navy-700);color:#fff;position:sticky;top:0;height:30px}
.hourstable td{height:30px}
.hourstable td:first-child{text-align:left;font-weight:900;font-size:13px;padding-left:6px}
.hourstable td:first-child{white-space:nowrap}
/* Kolona ZAPOSLENI: sva imena u jednom redu (najduže ime ~153 px); ostale kolone ostaju ~85 px, pa tabela po potrebi ima pomeranje unutar okvira */
.hourstable thead th:first-child{width:176px}
.hourstable tr.total td{background:#e7eef4;font-weight:900}
.hourstable td.muted{color:#7a8894;font-weight:400;font-size:11px}

@media(max-width:1100px){.filters{grid-template-columns:repeat(3,1fr)}}


/* TELEFON */
@media(max-width:700px){
  /* Telefon: baner na celu širinu, naslov strane u traci ispod njega */
  /* Telefon: kadar sa krupnijim logoom (bez odsecanja), visina 112 px */
  .bannerbox{height:112px}
  .banner{width:172%;max-width:none;height:auto;margin-left:-18%;margin-top:-11%}
  .headright{position:static;transform:none;width:auto;text-align:center;padding:7px 10px;background:var(--navy-900);border-top:2px solid var(--gold)}
  .headright strong{font-size:18px;letter-spacing:1.5px;text-shadow:none}
  .login{margin:14px auto;padding:18px 16px}
  main{margin:6px auto;padding:0 6px}
  .controls{padding:8px}
  .filters{grid-template-columns:1fr 1fr;gap:7px}
  .f-month{grid-column:1 / -1}
  label{font-size:11px}
  select,button,input{height:42px;font-size:13px}
  .quick{display:grid;grid-template-columns:1fr 1fr}
  .quick button{height:42px;padding:0 5px;font-size:12px}
  .info{font-size:12px;padding:9px}
  .emphead h2{font-size:21px}
  .n-desk{display:none}
  .n-mob{display:inline}
  .rowsmode .notice{display:none}
  /* Strane: dovoljno veliko za prst */
  .nav button{height:40px;padding:0 12px;font-size:13px}
  thead tr:nth-child(2) th{font-size:11px}
  /* Ceo raspored: pomeranje SAMO unutar okvira; ime i zaglavlje ostaju vidljivi */
  .tablewrap{overflow:auto;max-height:75vh;-webkit-overflow-scrolling:touch}
  table.full{min-width:1750px}
  col.c-name{width:150px}
  col.c-sec{width:78px}
  td.c-name{font-size:14px;box-shadow:2px 0 0 #9db1c0}
  /* "Bolovanje" mora da stane u jedan red u ćeliji dana (bez "Bolovanj / e") */
  table.full td.st-Sick{overflow-wrap:normal;word-break:normal;font-size:8.5px;letter-spacing:-.2px;padding-left:1px;padding-right:1px}
  /* Rezultati filtera i sati: velike kartice */
  .cards,.cards thead,.cards tbody,.cards tr,.cards td{display:block;width:100%;min-width:0}
  .cards thead{display:none}
  .cards tr{background:#fff;border:1px solid #b7c6d1;border-radius:10px;margin:7px 0;padding:8px;box-shadow:0 2px 5px #18344a18}
  .cards td{border:0!important;height:auto!important;text-align:left!important;padding:5px 6px!important;font-size:14px!important}
  .cards td:nth-child(1){font-size:18px!important;font-weight:900!important;color:var(--navy-700)}
  .resulttable.cards td:nth-child(2){font-weight:700}
  .resulttable.cards td:nth-child(3),.resulttable.cards td:nth-child(4){display:inline-block;width:32%!important;font-weight:800}
  .resulttable.cards td:nth-child(5){display:inline-block;width:36%!important;font-weight:800}
  .cards td[data-label]::before{content:attr(data-label) ": ";font-size:11px;color:var(--muted);font-weight:700}
  .resulttable.cards td[data-label]::before{content:none}
  .cards td.empty{text-align:center!important}
  .hourswrap,.tablewrap.cardswrap{max-height:none}
}

/* KO MOŽE DA ME MENJA? i ROTACIJA SMENA (samo provera, zaposleni preko ličnog linka) */
.swapcard summary{cursor:pointer;padding:10px 12px;font-weight:900;color:var(--navy-700);background:#f1f6f9;font-size:13px}
.swapbody{padding:10px 12px}
.swapmode{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.swapmode button{height:36px;padding:0 14px;background:#e7eef4;color:var(--navy-700);border:1px solid var(--line-strong)}
.swapmode button.active{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.swaphint{margin:0 0 10px;font-size:12px;color:var(--muted)}
.swapbody select{max-width:520px;margin-bottom:6px}
.swapbody label{margin-top:4px}
.swapmsg{min-height:16px;margin-top:6px;font-size:12px;font-weight:700;color:var(--muted)}
.swapmsg.error{color:#9b1c1c}
.swapinfo{margin:10px 0 8px;padding:8px 10px;background:#f1f6f9;border:1px solid var(--line);border-radius:6px;font-size:12px}
.swaplists{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.swaplists>.swapinfo,.swaplists>.swapnotice,.swaplists>.rotresult{grid-column:1 / -1}
.swapcol h3{margin:0 0 6px;padding:7px 10px;border-radius:6px;font-size:12px;letter-spacing:.5px;color:#fff}
.swapcol h3 span{font-weight:400;opacity:.9}
.swapcol.yes h3{background:#2e7d32}
.swapcol.no h3{background:#b3261e}
.swaplist{list-style:none;margin:0;padding:0}
.swapitem{margin:0 0 6px;padding:8px 10px;border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:6px;background:#fff}
.swapitem.yes{border-left-color:#2e7d32}
.swapitem.no{border-left-color:#b3261e}
.swapname{font-size:14px;font-weight:900;color:var(--navy-900)}
.swapname small{margin-left:8px;font-size:11px;font-weight:700;color:var(--muted)}
.swapreasons{margin:4px 0 0;padding-left:18px;font-size:12px;color:#9b1c1c}
.swapempty{margin:4px 2px;font-size:12px;color:var(--muted)}
.swapnotice{margin:4px 0 0;font-size:11px;color:var(--muted)}
.rotresult{padding:12px;border-radius:8px;text-align:center;font-size:18px;font-weight:900;letter-spacing:1px;color:#fff}
.rotresult.yes{background:#2e7d32}
.rotresult.no{background:#b3261e}
.rotside{padding:8px 10px;border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:6px;background:#fff}
.rotside.yes{border-left-color:#2e7d32}
.rotside.no{border-left-color:#b3261e}
.rotside h4{margin:0;font-size:13px;color:var(--navy-900)}
.rotok{margin:4px 0 0;font-size:12px;color:#2e7d32;font-weight:700}
@media(max-width:700px){
  .swaplists{grid-template-columns:1fr}
  .swapbody select{max-width:none}
}

/* PWA: obaveštenja, instalacija, ponovni ulaz linkom */
.pwabar{padding:8px 9px;border-top-color:var(--gold)}
.pwa-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--navy-800)}
.pwa-row + .pwa-row{margin-top:8px}
.pwa-row span{flex:1 1 140px}
.pwa-x{background:#fff;color:var(--navy-700);border:1px solid var(--line-strong)}
.pastelink{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.offline-retry{display:inline-block;padding:11px 18px;background:var(--navy-700);color:#fff;border-radius:6px;font-weight:800;text-decoration:none}

/* Telefon / uređaj sa urezom: sigurne zone (0 na uređajima bez ureza, izgled se ne menja) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,select,input,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
header{padding-top:env(safe-area-inset-top)}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
/* Samo iOS: polja sa fontom manjim od 16px izazivaju automatsko zumiranje pri unosu */
@supports (-webkit-touch-callout:none){
  select,input{font-size:16px}
}