/* RADNI RASPORED — izgled prema V18 (boje, veličine, raspored), bez ugrađenih podataka. */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:#eef2f5;color:#122b40;font-family:Arial,Helvetica,sans-serif}
[hidden]{display:none!important}

/* ZAGLAVLJE */
header{background:linear-gradient(100deg,#082d50,#0d4774 58%,#082c50);color:#fff;padding:9px 14px;border-bottom:4px solid #d9e4eb}
.head{max-width:1600px;margin:auto;display:flex;align-items:center;gap:16px}
.logo{width:64px;height:54px;border:2px solid #fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;flex:none}
.brand{font-size:19px;font-weight:900;letter-spacing:1px}
.brand span{font-weight:400}
.airport{font-size:10px;letter-spacing:2px;margin-top:3px}
.hr{height:36px;width:2px;background:#8fb3c9}
.headright{margin-left:auto;text-align:right}
.headright b{display:block;font-size:26px}
.headright small{display:block;font-size:10px;letter-spacing:2px;opacity:.8}
.headright strong{display:block;font-size:27px;color:#58c7f6;min-height:30px}

/* KARTICE I FILTERI */
main{max-width:1600px;margin:9px auto;padding:0 9px}
.card{background:#fff;border:2px solid #173f62;border-radius:9px;overflow:hidden;box-shadow:0 3px 10px #18344a18;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:#173f62;margin-bottom:3px}
select,button,input{height:38px;border:1px solid #9eb2c1;border-radius:6px;background:#fff;padding:0 9px;font-size:12px;width:100%;color:#122b40}
select:disabled{opacity:.6}
button{background:#123f64;color:#fff;border:0;font-weight:800;cursor:pointer;width:auto}
.f-month select{font-weight:900;color:#0d4169}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.quick button{padding:0 12px;background:#e7eef4;color:#123f64;border:1px solid #a8bbc9}
.quick .primary{background:#123f64;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:#123f64}
.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:#173f62}
.state.error{color:#9b1c1c;background:#fff5f5}
.login{padding:14px;max-width:420px}
.login h2{margin:0 0 6px;font-size:18px;color:#123f64}
.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}

/* 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:#526271}
.emphead h2{margin:0;font-size:26px;font-weight:900;color:#123f64;letter-spacing:.5px;line-height:1.2;overflow-wrap:anywhere}
.emphead div{margin-top:2px;font-size:13px;font-weight:700;color:#526271}
.resulttable.emptable{min-width:0}
.info{padding:8px 10px;background:#f1f6f9;border-bottom:1px solid #c8d5df;font-size:12px}
.notice{padding:5px 9px;background:#fff8df;color:#725b10;font-size:10px;font-weight:700;border-bottom:1px solid #e2d29b}
.n-mob{display:none}
.nav{display:flex;gap:5px;flex-wrap:wrap;padding:6px 9px;background:#f7fafc;border-bottom:1px solid #c8d5df}
.nav:empty{display:none}
.nav button{height:29px;padding:0 11px;background:#e7eef4;color:#123f64}
.nav button.active{background:#123f64;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:#0d4169;color:#fff;font-size:9.5px;height:25px;font-weight:900}
thead th.c-name,thead th.c-sec{background:#123f64!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:#123f64!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:#526271}
.st-Holiday{background:#dcebf5;color:#173f62;font-weight:700}
.st-R{background:#9ed8ed;color:#173f62;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:#123f64;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:#526271}

/* LEGENDA */
.legend{display:flex;gap:5px;align-items:center;flex-wrap:wrap;padding:7px 9px;border-top:2px solid #173f62;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:#123f64}
.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:#123f64;background:#f1f6f9;font-size:13px}
.hoursinfo{padding:6px 10px;font-size:11px;color:#526271;border-bottom:1px solid #c8d5df}
.hourswrap{overflow:auto;max-height:60vh}
.hourstable{min-width:840px;font-size:12px}
.hourstable th{background:#123f64;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 tr.total td{background:#e7eef4;font-weight:900}
.hourstable td.muted{color:#7a8894;font-weight:400;font-size:11px}
/* 701–879 px: šira kolona ZAPOSLENI (najduže ime ~152 px), ostale kolone ostaju ~86 px;
   tabela se po potrebi pomera unutar svog okvira (od 880 px ime staje i bez ovoga) */
@media(min-width:701px) and (max-width:879px){
  .hourstable{min-width:940px}
  .hourstable thead th:first-child{width:170px}
}

@media(max-width:1100px){.filters{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.headright b{font-size:18px}.headright strong{font-size:19px}}

/* TELEFON */
@media(max-width:700px){
  header{padding:10px}
  .head{gap:9px}
  .logo{width:48px;height:44px;font-size:25px}
  .hr,.brandbox{display:none}
  .headright{margin-left:0;text-align:left}
  .headright b{font-size:18px}
  .headright small{font-size:10px}
  .headright strong{font-size:20px}
  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}
  /* 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:#123f64}
  .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:#526271;font-weight:700}
  .resulttable.cards td[data-label]::before{content:none}
  .cards td.empty{text-align:center!important}
  .hourswrap,.tablewrap.cardswrap{max-height:none}
}