*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#E9EDF1;
     color:#171C22;font-size:14px}

/* --- traka --- */
.brand{font-weight:700;letter-spacing:1.4px;font-size:17px}
.brand span{color:#0E5A69}
.top{background:#171C22;color:#fff;padding:0 22px;display:flex;align-items:center;height:52px}
.top .brand span{color:#3FB6C9}
.who{color:#9FADBA;font-size:12px}
.nav{flex:1;margin-left:30px}
.nav a{color:#9FADBA;text-decoration:none;padding:16px 13px;font-size:12.5px;display:inline-block}
.nav a.on{color:#fff;box-shadow:inset 0 -3px 0 #3FB6C9}

/* --- stranica --- */
.page{padding:22px;max-width:1240px}
.page.wide{max-width:none}
h1{font-size:20px;margin-bottom:10px}
.eyebrow{font-size:10px;letter-spacing:2px;color:#0E5A69;text-transform:uppercase;margin-bottom:4px}

/* --- prijava --- */
.login-page{display:flex;align-items:center;justify-content:center;height:100vh}
.login-box{background:#fff;border:1px solid #CBD3DB;padding:28px;width:340px}
.login-box .brand{margin-bottom:20px;text-align:center}

/* --- polja --- */
label{display:block;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;
      color:#66727E;margin:12px 0 5px}
input,select{width:100%;border:1px solid #C3CCD5;border-radius:3px;padding:9px 11px;
      font-size:14px;background:#fff;font-family:inherit}
button{margin-top:18px;width:100%;background:#0E5A69;color:#fff;border:0;border-radius:3px;
       padding:10px;font-size:14px;cursor:pointer;font-family:inherit}
.linkbtn{width:auto;margin:0 0 0 10px;background:none;color:#3FB6C9;padding:0;font-size:12px}

/* --- poruke --- */
.error{background:#F7E3E1;color:#932E24;padding:9px 11px;font-size:12.5px;margin-top:10px}
.ok{background:#E4F1EA;color:#22684A;padding:9px 11px;font-size:12.5px;margin-top:10px}

/* --- panel i forma za unos --- */
.panel{background:#fff;border:1px solid #CBD3DB;margin-top:14px}
.form{padding:18px 16px 4px;display:flex;gap:3%}
.col{flex:1}
.fld{margin-bottom:13px}
.fld label{margin-top:0}
.codebox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:700;
         border:2px solid #0E5A69;background:#F2F9FA;padding:9px 11px;border-radius:3px}
.fhint{font-size:11px;color:#66727E;margin-top:5px}
.fhint.warn{color:#B33A2E;font-weight:600}
.fhint.ok-txt{color:#2E7D5B}
.calc{background:#F2F9FA;border:1px solid #B7D8DE;border-left:4px solid #0E5A69;
      padding:12px 14px;margin:4px 0 14px}
.calc .k{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:#0E5A69}
.calc .v{font-size:17px;font-weight:700;margin-top:4px}
.calc .h{font-size:11px;color:#66727E;margin-top:3px}
.actions{padding:14px 16px;border-top:1px solid #DCE2E8;background:#F8FAFB}
.actions button{width:auto;padding:10px 20px;margin:0}
.void{margin-top:14px;display:flex;gap:8px;align-items:center}
.void input{width:280px}
.ghost{width:auto;margin:0;background:#fff;color:#0E5A69;border:1px solid #0E5A69;padding:9px 14px}

/* --- filteri --- */
.filters{padding:12px 14px;background:#F4F6F9;border-bottom:1px solid #DCE2E8;
         display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end}
.filters .f{margin:0}
.filters label{margin:0 0 4px}
.filters select,.filters input{padding:7px 9px;font-size:12px;width:auto}
button.small,.ghost.small{width:auto;margin:0;padding:7px 14px;font-size:12px;
     display:inline-block;text-decoration:none;line-height:normal}

/* --- zaglavlje panela --- */
.ph{padding:11px 14px;border-bottom:1px solid #DCE2E8}
.ph:last-child{border-bottom:none;border-top:1px solid #DCE2E8}
.cnt{color:#66727E;font-size:11.5px}
.btn{float:right;background:#0E5A69;color:#fff;padding:6px 13px;font-size:11.5px;
     border-radius:3px;text-decoration:none}
.lnk{color:#0E5A69;font-size:11.5px;text-decoration:none;margin-left:12px}

/* --- tabela --- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;
   color:#66727E;font-weight:400;padding:9px 10px;background:#F4F6F9;
   border-bottom:1px solid #DCE2E8;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid #EDF0F3;font-size:12.5px;white-space:nowrap}
tr:last-child td{border-bottom:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.dim{color:#66727E;font-size:11.5px}
td.warn{color:#B33A2E;font-weight:600}
.pill{display:inline-block;padding:3px 9px;border-radius:11px;font-size:10.5px}
.pill.g{background:#E4F1EA;color:#22684A}
.pill.a{background:#FBEEDA;color:#96600B}
.pill.r{background:#F7E3E1;color:#932E24}

/* --- mobilni --- */
@media (max-width:820px){
  .form{flex-direction:column;gap:0}
  .nav a{padding:16px 8px}
}

/* --- kpi kartice --- */
.sub{color:#66727E;font-size:12px;margin-top:3px}
.kpis{margin:18px 0 0;display:flex;gap:11px;flex-wrap:wrap}
.kpi{flex:1;min-width:190px;background:#fff;border:1px solid #CBD3DB;border-top:3px solid #97A5B2;
     padding:12px 14px 13px;text-decoration:none;color:inherit;display:block}
.kpi .lab{font-size:11px;color:#66727E;letter-spacing:.4px}
.kpi .num{font-size:29px;font-weight:700;margin-top:5px;letter-spacing:-.5px}
.kpi.g{border-top-color:#2E7D5B} .kpi.g .num{color:#2E7D5B}
.kpi.a{border-top-color:#D98A16} .kpi.a .num{color:#B8730E}
.kpi.r{border-top-color:#B33A2E} .kpi.r .num{color:#B33A2E}
.kpi:hover{border-color:#0E5A69}

/* --- upozorenje --- */
.warnbox{display:block;margin-top:14px;background:#FBEEDA;color:#96600B;
         border-left:4px solid #D98A16;padding:11px 14px;font-size:12.5px;text-decoration:none}

/* --- traka preostalog vremena --- */
.ph h2{font-size:14px;display:inline-block;margin-right:8px}
.bar{width:118px;height:7px;background:#E4E9EE;border-radius:4px;display:inline-block;
     vertical-align:middle;overflow:hidden}
.bar i{display:block;height:7px;background:#D98A16}
.days{display:inline-block;font-size:11px;color:#66727E;vertical-align:middle;
      margin-left:9px;font-family:ui-monospace,monospace}

/* --- kundenportal --- */
.top.kunde{background:#0E5A69}
.top.kunde .brand span{color:#8FD3DF}
.top.kunde .nav a.on{box-shadow:inset 0 -3px 0 #8FD3DF}
.role{background:#083D47;color:#fff;padding:3px 8px;margin:0 4px 0 9px;
      border-radius:3px;font-size:10.5px;letter-spacing:.8px}
table.detalj td{white-space:normal;padding:10px 14px}
table.detalj td.k{color:#66727E;width:34%;font-size:12px}
.btnlink{display:inline-block;background:#0E5A69;color:#fff;padding:10px 20px;
         border-radius:3px;text-decoration:none;font-size:13px}
.hintline{float:right;color:#66727E;font-size:11.5px;padding-top:10px}

/* --- ispravka voda --- */
.fixed{border:1px solid #DCE2E8;background:#F4F6F9;color:#66727E;
       border-radius:3px;padding:9px 11px;font-size:14px}
.reason{padding:0 16px 14px;border-top:1px solid #DCE2E8;margin-top:4px;padding-top:14px}
.reason label{margin-top:0}
.reason input{max-width:560px}

/* --- korisnici --- */
.pwbox{background:#F2F9FA;border:1px solid #B7D8DE;border-left:4px solid #0E5A69;
       padding:14px;margin-top:14px;max-width:720px}
.pwbox .lab{font-size:12px;color:#0E5A69}
.pwbox .pw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;
           font-weight:700;letter-spacing:1px;margin:8px 0;user-select:all}
.akcije{display:flex;gap:6px}
.akcije form{display:inline}
.mini{width:auto;margin:0;padding:5px 10px;font-size:11px;background:#fff;
      color:#0E5A69;border:1px solid #0E5A69;border-radius:3px;cursor:pointer}
.mini.warn{color:#B33A2E;border-color:#B33A2E}

/* --- navigacija: zajednicki deo --- */
.top{display:flex;align-items:center;gap:0;flex-wrap:wrap}
a.brand{color:#fff;text-decoration:none}
.top.kunde a.brand{color:#fff}
.nav{flex:1;margin-left:26px;display:flex}
.nav a{white-space:nowrap}
.nav a:hover{color:#fff}
.who{display:flex;align-items:center;gap:0;white-space:nowrap}
.burger{display:none;width:auto;margin:0;background:none;color:#fff;
        font-size:20px;padding:0 10px;border:0;cursor:pointer}

@media (max-width:860px){
  .top{height:auto;padding:10px 14px;position:relative}
  .burger{display:block;order:3;margin-left:auto}
  .who{order:2;margin-left:auto;font-size:11px}
  .nav{order:4;flex-basis:100%;margin:0;display:none;flex-direction:column}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid #2A323B}
  .nav a.on{box-shadow:none;color:#3FB6C9}
  .hide-sm{display:none}
  .page{padding:16px 14px}
  .filters{gap:7px}
  .filters select,.filters input{width:100%;min-width:150px}
  .kpis{gap:8px}
  .kpi{min-width:calc(50% - 4px)}
}

/* --- dugme za skeniranje --- */
.scanbtn{width:auto;margin:0 0 0 18px;padding:6px 14px;font-size:12px;
         background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);
         border-radius:3px;cursor:pointer;white-space:nowrap}
.scanbtn:hover{background:rgba(255,255,255,.22)}
.scanbtn::before{content:"▣ ";font-size:13px}

/* --- sloj sa kamerom --- */
.scan-sloj{display:none;position:fixed;inset:0;background:rgba(10,14,18,.92);
           z-index:999;align-items:center;justify-content:center;padding:16px}
.scan-sloj.otvoren{display:flex}
.scan-box{position:relative;width:100%;max-width:460px;text-align:center}
.scan-box video{width:100%;border-radius:6px;background:#000;display:block;
                max-height:70vh;object-fit:cover}
.scan-okvir{position:absolute;left:12%;right:12%;top:50%;transform:translateY(-50%);
            aspect-ratio:1/1;border:3px solid rgba(63,182,201,.9);border-radius:10px;
            pointer-events:none;box-shadow:0 0 0 9999px rgba(0,0,0,.25)}
.scan-poruka{color:#fff;font-size:14px;margin-top:14px}
.scan-poruka.ok{color:#7FD6A6;font-weight:600}
.scan-poruka.greska{color:#F3A79C}
.scan-zatvori{width:auto;margin-top:14px;padding:9px 20px;background:#fff;color:#171C22;
              border:0;border-radius:3px;font-size:13px;cursor:pointer}

@media (max-width:860px){
  .scanbtn{order:2;margin-left:auto;margin-right:8px}
  .who{order:3;margin-left:0}
  .burger{order:4;margin-left:4px}
}

/* --- oznaka verzije --- */
.verzija{color:rgba(255,255,255,.4);font-size:10px;margin-left:7px;
         letter-spacing:.5px;align-self:center}
@media (max-width:860px){ .verzija{display:none} }

/* --- kompaktna tabela registra: sve staje bez skrolovanja --- */
table.kompakt{table-layout:auto}
table.kompakt th,
table.kompakt td{white-space:normal;vertical-align:top;padding:10px 12px}
table.kompakt td.b{font-weight:600}
table.kompakt .pod{font-size:11px;color:#7A8792;margin-top:3px;line-height:1.35}
table.kompakt .pod.warn{color:#B33A2E;font-weight:600}
table.kompakt .w-code{width:74px}
table.kompakt .w-datum{width:112px}
table.kompakt .w-gar{width:118px}
table.kompakt .w-akcija{width:84px}
table.kompakt .mono{font-size:12.5px}
table.kompakt tr:nth-child(even) td{background:#FAFBFC}
table.kompakt tr:first-child td{background:none}

/* --- na telefonu red postaje kartica --- */
@media (max-width:700px){
  table.kompakt,
  table.kompakt tr,
  table.kompakt td{display:block;width:auto}
  table.kompakt tr:first-child{display:none}          /* zaglavlje nema smisla */
  table.kompakt tr{border:1px solid #DCE2E8;border-radius:4px;
                   margin:0 10px 9px;padding:10px 12px}
  table.kompakt tr:nth-child(even) td{background:none}
  table.kompakt td{border:none;padding:3px 0}
  table.kompakt td.b{font-size:16px;margin-bottom:4px}
  table.kompakt td:nth-child(2)::before{content:"Produziert: ";color:#7A8792;font-size:11px}
  table.kompakt td:nth-child(4)::before{content:"Anschlüsse: ";color:#7A8792;font-size:11px}
  table.kompakt td:nth-child(6)::before{content:"Garantie bis: ";color:#7A8792;font-size:11px}
  table.kompakt td .pod{display:inline-block;margin-left:6px;margin-top:0}
}

/* ========== meni: hamburger desno, radi bez inline skripta ========== */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.burger{display:none;width:auto;margin:0 0 0 10px;background:none;color:#fff;
        font-size:22px;line-height:1;padding:4px 8px;border:0;cursor:pointer;order:9}

/* ========== pocetna strana ========== */
.plocice{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
         gap:14px;margin-top:20px}
.plocica{display:block;background:#fff;border:1px solid #CBD3DB;border-top:3px solid #97A5B2;
         padding:18px 18px 16px;text-decoration:none;color:inherit;
         transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.plocica:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(23,28,34,.10);
               border-color:#0E5A69;border-top-color:#0E5A69}
.plocica .ikona{font-size:22px;color:#0E5A69;line-height:1;margin-bottom:10px}
.plocica .naslov{font-size:16px;font-weight:700}
.plocica .opis{font-size:12px;color:#66727E;margin-top:4px;min-height:32px}
.plocica .broj{font-size:22px;font-weight:700;margin-top:10px;
               padding-top:10px;border-top:1px solid #EDF0F3}
.plocica .broj span{font-size:11px;font-weight:400;color:#66727E;margin-left:5px}
.plocica.prva{border-top-color:#0E5A69;background:#F7FBFC}
.plocica.upozorenje{border-top-color:#D98A16}
.plocica.upozorenje .broj{color:#B8730E}
.hint-red{color:#932E24;font-size:12.5px;margin-bottom:6px}
.hint-amber{color:#96600B;font-size:12.5px}

/* ========== stanje kodova ========== */
.kodstat{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid #DCE2E8}
.kodstat div{flex:1;min-width:120px;padding:12px 14px;border-right:1px solid #EDF0F3}
.kodstat div:last-child{border-right:0}
.kodstat b{display:block;font-size:20px;font-weight:700}
.kodstat span{font-size:11px;color:#66727E}
input[type=file]{border:1px dashed #C3CCD5;background:#FAFBFC;padding:10px}

/* ========== polje za kod u unosu ========== */
.codeinput{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;
           font-weight:700;letter-spacing:2px;text-transform:uppercase;
           border:2px solid #0E5A69;background:#F2F9FA}

/* ========== akcije u tabeli ========== */
table.kompakt .w-akcije{width:190px}
table.kompakt td.akcije{display:flex;gap:6px;flex-wrap:wrap}

/* ========== telefon ========== */
@media (max-width:860px){
  .burger{display:block;margin-left:auto}
  .who{order:8;margin-left:auto;font-size:11px}
  .scanbtn{order:7;margin-left:auto}
  .nav{order:10;flex-basis:100%;margin:0;display:none;flex-direction:column}
  .nav.open{display:flex}
  .plocica .opis{min-height:0}
}

@media (max-width:700px){
  /* tabele garancija i korisnika kao kartice, isto kao registar */
  table.kompakt td.akcije{display:flex;margin-top:8px}
  .kodstat div{min-width:50%;border-bottom:1px solid #EDF0F3}
}

/* --- detaljni prikaz na telefonu --- */
@media (max-width:700px){
  table.detalj td{display:block;padding:2px 14px}
  table.detalj td.k{width:auto;padding-top:9px;font-size:10px;
                    letter-spacing:1px;text-transform:uppercase}
  table.detalj tr{display:block;border-bottom:1px solid #EDF0F3;padding-bottom:7px}
  .actions .btnlink{display:block;text-align:center}
  .actions .hintline{float:none;display:block;text-align:center;padding-top:10px}
}

/* ========== HydroPro boje: traka i dugmad ========== */
:root{ --hp:#7D3A2C; --hp-zlatna:#D9A441; --hp-svetla:#F0C674; }

/* traka gore */
.top{background:var(--hp)}
.top .brand span{color:var(--hp-zlatna)}
.nav a{color:rgba(255,255,255,.75)}
.nav a:hover{color:#fff}
.nav a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--hp-zlatna)}
.who{color:rgba(255,255,255,.8)}
.linkbtn{color:var(--hp-svetla)}
.verzija{color:rgba(255,255,255,.5)}

/* dugmad */
button{background:var(--hp)}
.btn,.btnlink{background:var(--hp)}
.ghost,.ghost.small{color:var(--hp);border-color:var(--hp)}
.mini:not(.warn){color:var(--hp);border-color:var(--hp)}

/* meni na telefonu */
@media (max-width:860px){
  .nav a{border-bottom:1px solid rgba(255,255,255,.15)}
  .nav a.on{color:var(--hp-svetla);box-shadow:none}
}

/* ========== logo u traci ========== */
a.brand{display:flex;align-items:center;gap:9px}
a.brand .znak{display:inline-flex;align-items:center;justify-content:center;
              width:32px;height:32px;background:#fff;border-radius:6px;flex-shrink:0}
a.brand .znak img{width:26px;height:26px;display:block}

/* ========== stranica za prijavu ========== */
.login-logo{display:block;width:170px;height:auto;margin:0 auto 18px}
.login-box{border-top:4px solid var(--hp)}

/* ========== izbor teme ========== */
.teme{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
      gap:10px;padding:14px}
.tema{display:block;border:2px solid #DCE2E8;border-radius:6px;padding:8px;
      cursor:pointer;text-transform:none;letter-spacing:0;margin:0;color:#171C22;
      transition:border-color .12s ease, transform .12s ease}
.tema:hover{transform:translateY(-2px)}
.tema input{position:absolute;opacity:0;pointer-events:none}
.tema.izabrana,.tema:has(input:checked){border-color:#171C22}
.tema .uzorak{display:block;height:44px;border-radius:4px;position:relative;
              padding:7px 8px;color:#fff;font-size:10px;letter-spacing:1px}
.tema .uzorak i{font-style:normal}
.tema .uzorak em{position:absolute;left:8px;bottom:7px;width:26px;height:3px}
.tema .ime{display:block;font-size:12px;font-weight:600;margin:8px 0 6px}
.tema .dugmence{display:inline-block;color:#fff;font-size:10px;padding:3px 8px;border-radius:3px}