:root{
  --paper:#FAFBFC; --surface:#F1F4F7; --ink:#1E2530; --muted:#5B6675;
  --line:#D9DEE6; --accent:#2B5EA7; --accent-ink:#244F8C; --accent-soft:#E4ECF6;
  --warn:#C05621; --warn-soft:#F9EAE0; --ok:#2F7D4F; --ok-soft:#E3F0E8;
  --card:#FFFFFF; --danger:#B3382E;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.55;
}
h1,h2,h3{font-family:"Archivo","Segoe UI",system-ui,sans-serif; margin:0; letter-spacing:-.01em; text-wrap:balance;}
h1{font-size:1.7rem; font-weight:700;}
h2{font-size:1.2rem; font-weight:600;}
h3{font-size:1rem; font-weight:600;}
a{color:var(--accent-ink); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1720px; margin:0 auto; padding:1.2rem 1rem 4rem;}

/* nav */
.topnav{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  background:var(--card); border-bottom:1px solid var(--line);
  padding:.6rem 1rem; position:sticky; top:0; z-index:20;
}
.topnav .brand{font-family:"Archivo",sans-serif; font-weight:700; font-size:1.1rem; color:var(--ink);}
.topnav .links{display:flex; gap:.2rem; flex-wrap:wrap;}
.topnav .links a{padding:.3rem .7rem; border-radius:6px; color:var(--muted); font-weight:600;}
.topnav .links a.on{background:var(--accent-soft); color:var(--accent-ink);}
.topnav .links a:hover{text-decoration:none; color:var(--accent-ink);}
.topnav .who{margin-left:auto; display:flex; gap:.8rem; align-items:center; font-size:.9rem; color:var(--muted);}
.topnav .who span{font-weight:600; color:var(--ink);}

/* opće */
.flash{border-radius:8px; padding:.6rem 1rem; margin-bottom:1rem; font-weight:600;}
.flash.ok{background:var(--ok-soft); color:var(--ok);}
.flash.err{background:var(--warn-soft); color:var(--danger);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start;}
@media (max-width:820px){ .grid2{grid-template-columns:1fr;} }
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.1rem;}
.card h2{margin-bottom:.6rem;}
.eyebrow{
  font-family:"IBM Plex Mono",Consolas,monospace; font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; color:var(--accent-ink);
}
.muted{color:var(--muted);}
.small{font-size:.88rem;}
.num{font-variant-numeric:tabular-nums;}
.head-row{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1rem;}
.head-row .spacer{flex:1;}

/* tablice */
.tbl-wrap{overflow-x:auto;}
table{border-collapse:collapse; width:100%; font-size:.94rem; background:var(--card);}
th,td{text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); vertical-align:top;}
th{
  font-family:"IBM Plex Mono",Consolas,monospace; font-size:.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.11em; color:var(--muted); background:var(--surface);
  white-space:nowrap;
}
tr:last-child td{border-bottom:none;}
.tbl-card{border:1px solid var(--line); border-radius:10px; overflow:hidden;}
td.r, th.r{text-align:right;}

/* chipovi i statusi */
.chip{
  display:inline-block; font-size:.78rem; font-weight:600; border-radius:999px;
  padding:.1rem .6rem; white-space:nowrap; background:var(--surface); color:var(--muted);
}
.chip.accent{background:var(--accent-soft); color:var(--accent-ink);}
.chip.ok{background:var(--ok-soft); color:var(--ok);}
.chip.warn{background:var(--warn-soft); color:var(--warn);}
.chip.mono{font-family:"IBM Plex Mono",Consolas,monospace; font-weight:500; font-size:.72rem;}
.due-late{color:var(--danger); font-weight:700;}
.due-soon{color:var(--warn); font-weight:600;}

/* forme */
input[type=text], input[type=password], input[type=date], input[type=url],
select, textarea{
  font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:7px; padding:.42rem .6rem; max-width:100%;
}
input:focus, select:focus, textarea:focus, button:focus{outline:2px solid var(--accent); outline-offset:1px;}
textarea{width:100%; resize:vertical;}
label{font-size:.8rem; font-weight:600; color:var(--muted); display:block; margin-bottom:.15rem;}
.frm{display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end;}
.frm .field{display:flex; flex-direction:column;}
/* jednoredna forma: sve u jednom redu, polja se stišću/rastežu da red stane bez skrolanja */
.frm.line{flex-wrap:nowrap; gap:.45rem; overflow:visible;}
.frm.line .field{flex:1 1 auto; min-width:0;}
.frm.line .field input, .frm.line .field select{width:100%; min-width:0; padding:.4rem .45rem; font-size:.88rem;}
.frm.line label{font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.frm.line button, .frm.line .chip{flex:0 0 auto;}
@media (max-width:900px){ .frm.line{flex-wrap:wrap;} .frm.line .field{flex:1 1 140px;} }
button, .btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:7px;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  padding:.42rem .95rem;
}
button:hover{filter:brightness(1.08);}
button.ghost{background:transparent; color:var(--accent-ink); border-color:var(--line);}
button.tiny{padding:.15rem .55rem; font-size:.8rem;}
button.danger{background:transparent; border-color:transparent; color:var(--danger); padding:.15rem .3rem; font-size:.8rem;}
form.inline{display:inline;}

/* sekcije projekta */
details.sec{border:1px solid var(--line); border-radius:10px; background:var(--card); margin-bottom:.9rem;}
details.sec > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.7rem;
  padding:.75rem 1rem; font-family:"Archivo",sans-serif; font-weight:600; font-size:1.05rem;
}
details.sec > summary::-webkit-details-marker{display:none;}
details.sec > summary::before{content:"▸"; color:var(--accent-ink); font-size:.9rem; transition:transform .12s;}
details.sec[open] > summary::before{transform:rotate(90deg);}
details.sec > summary .count{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--muted); font-weight:400;}
details.sec .sec-body{padding:0 1rem 1rem; display:flex; flex-direction:column; gap:.8rem;}

/* hodogram faze */
.phase{display:grid; grid-template-columns:2.2rem 1fr; gap:.2rem .8rem; padding:.7rem 0; border-bottom:1px solid var(--line);}
.phase:last-child{border-bottom:none;}
.phase .pnum{font-family:"IBM Plex Mono",monospace; color:var(--accent-ink); font-size:.9rem; padding-top:.2rem;}
.phase.off{opacity:.45;}
.phase .ptitle{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-weight:600;}
.phase .pform{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.35rem;}
.phase .pform input[type=text]{flex:1; min-width:180px;}
.st-nije{background:var(--surface); color:var(--muted);}
.st-tijek{background:var(--accent-soft); color:var(--accent-ink);}
.st-ceka{background:var(--warn-soft); color:var(--warn);}
.st-gotovo{background:var(--ok-soft); color:var(--ok);}

/* progres */
.prog{display:inline-flex; align-items:center; gap:.45rem;}
.prog .bar{width:90px; height:6px; border-radius:3px; background:var(--surface); overflow:hidden;}
.prog .bar i{display:block; height:100%; background:var(--accent);}

/* dnevnik */
.logline{padding:.55rem 0; border-bottom:1px solid var(--line);}
.logline:last-child{border-bottom:none;}
.logline .lmeta{font-size:.8rem; color:var(--muted); display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;}
.logline p{margin:.2rem 0 0; white-space:pre-wrap;}

/* login */
.login-box{max-width:360px; margin:14vh auto 0; display:flex; flex-direction:column; gap:1rem;}
.login-box .card{display:flex; flex-direction:column; gap:.8rem; padding:1.4rem;}
.login-box input{width:100%;}
.login-box button{width:100%;}

/* stat pločice */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem;}
.stat .k{font-family:"IBM Plex Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.stat .v{font-family:"Archivo",sans-serif; font-weight:700; font-size:1.25rem; margin-top:.15rem;}

@media (max-width:560px){
  body{font-size:15px;}
  .topnav{gap:.6rem; padding:.5rem .7rem;}
  .topnav .who span{display:none;}
  th,td{padding:.45rem .5rem;}
}