/* Rampa — praćenje čekanja na pružnom prijelazu */
:root{
  --bg:#f5f3ef; --surface:#ffffff; --surface2:#eceae4; --text:#1c2026; --muted:#5d6570;
  --line:#dcd8d0; --red:#d93a40; --red-soft:#fbe9ea; --green:#2f9e50; --green-soft:#e6f4ea;
  --amber:#c78a1e; --accent:#d93a40; --radius:16px; --shadow:0 1px 3px rgba(20,23,28,.08);
}
[data-theme="dark"]{
  --bg:#14171c; --surface:#1e232b; --surface2:#262c36; --text:#eef1f5; --muted:#8b93a1;
  --line:#313947; --red:#e5484d; --red-soft:#3a2224; --green:#46a758; --green-soft:#1f3326;
  --amber:#e0a63c; --shadow:0 1px 3px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --bg:#14171c; --surface:#1e232b; --surface2:#262c36; --text:#eef1f5; --muted:#8b93a1;
    --line:#313947; --red:#e5484d; --red-soft:#3a2224; --green:#46a758; --green-soft:#1f3326;
    --amber:#e0a63c; --shadow:0 1px 3px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.45;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
.mono{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}

/* Zaglavlje s "rampom" */
header.top{position:sticky; top:0; z-index:20; background:var(--bg)}
.rampa-stripe{height:8px; background:repeating-linear-gradient(-45deg,var(--red) 0 14px,#f5f3ef 14px 28px)}
.top-bar{display:flex; align-items:center; justify-content:space-between; padding:12px 16px 8px}
.top-bar h1{font-size:20px; margin:0; font-weight:800; letter-spacing:-.02em}
.top-bar h1 small{display:block; font-size:12px; font-weight:500; color:var(--muted)}
.icon-btn{background:var(--surface); border:1px solid var(--line); border-radius:12px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; color:var(--text); font-size:20px; cursor:pointer}

main{padding:8px 16px 24px; max-width:640px; margin:0 auto}
h2{font-size:17px; font-weight:800; margin:20px 0 10px}
h3{font-size:15px; font-weight:700; margin:16px 0 8px}
.hint{color:var(--muted); font-size:13px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin:10px 0; box-shadow:var(--shadow)}
.card.flat{box-shadow:none}

/* Statistika na početnoj */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.stat .v{font-size:24px; font-weight:800; letter-spacing:-.02em}
.stat .l{font-size:12px; color:var(--muted); margin-top:2px}

/* Gumbi */
button{font:inherit}
.btn{display:block; width:100%; padding:15px; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-weight:700; font-size:16px; cursor:pointer}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff}
.btn.danger{background:transparent; border-color:var(--red); color:var(--red)}
.btn.small{width:auto; display:inline-block; padding:9px 14px; font-size:14px; border-radius:12px}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex; gap:10px}
.btn-row .btn{flex:1}

/* Segmentirani izbor */
.seg{display:flex; background:var(--surface2); border-radius:12px; padding:4px; gap:4px}
.seg button{flex:1; border:0; background:transparent; color:var(--muted); padding:10px 6px;
  border-radius:9px; font-weight:700; font-size:14px; cursor:pointer}
.seg button.on{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}

/* Obrazac */
label.f{display:block; margin:14px 0 6px; font-weight:700; font-size:14px}
label.f .opt{color:var(--muted); font-weight:500}
input[type=date],input[type=time],input[type=number],input[type=text],select,textarea{
  width:100%; padding:13px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-size:16px; font-family:inherit}
input[type=time]{font-family:ui-monospace,Menlo,Consolas,monospace}
textarea{resize:vertical; min-height:70px}
.field-err{color:var(--red); font-size:13px; margin-top:4px}
.err-box{background:var(--red-soft); color:var(--red); border:1px solid var(--red);
  border-radius:12px; padding:10px 12px; margin:12px 0; font-size:14px}

/* Signalne točke i oznake */
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:baseline}
.dot.g{background:var(--green)} .dot.r{background:var(--red)}
.chip{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px}
.chip.g{background:var(--green-soft); color:var(--green)}
.chip.r{background:var(--red-soft); color:var(--red)}
.chip.n{background:var(--surface2); color:var(--muted)}

/* Povijest */
.rec{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.rec .t1{font-weight:800}
.rec .t2{font-size:13px; color:var(--muted); margin-top:2px}
.rec .times{text-align:right; white-space:nowrap}
.rec .times .big{font-size:17px; font-weight:800}
.rec-actions{display:flex; gap:8px; margin-top:10px}
.filters{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.filters .wide{grid-column:1 / -1}

/* Tablice */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{color:var(--muted); font-weight:600; text-align:right; padding:6px 4px; border-bottom:1px solid var(--line)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:7px 4px; border-bottom:1px solid var(--line); text-align:right}
.tbl tr:last-child td{border-bottom:0}
.tbl .best{color:var(--green); font-weight:700}
.tbl .worst{color:var(--red); font-weight:700}

/* Grafovi */
.chart{margin:6px 0 2px; overflow-x:auto}
.chart svg{display:block}
.legend{display:flex; gap:14px; font-size:12px; color:var(--muted); margin-top:4px; flex-wrap:wrap}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px}

/* Preporuka */
.reco{border-left:4px solid var(--green); padding-left:12px}
.reco.warn{border-left-color:var(--amber)}
.conf{font-size:12px; color:var(--muted); margin-top:6px}

/* Navigacija */
nav.bottom{position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
nav.bottom button{flex:1; border:0; background:transparent; color:var(--muted);
  font-size:11px; font-weight:700; padding:7px 2px; border-radius:12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px}
nav.bottom button .ic{font-size:20px; line-height:1}
nav.bottom button.on{color:var(--red)}

/* Toast i dijalozi */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(86px + env(safe-area-inset-bottom));
  background:var(--text); color:var(--bg); padding:11px 18px; border-radius:99px; font-weight:700;
  font-size:14px; z-index:50; box-shadow:0 4px 16px rgba(0,0,0,.25); opacity:0; transition:opacity .2s}
.toast.show{opacity:1}
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40;
  display:flex; align-items:center; justify-content:center; padding:24px}
.dialog{background:var(--surface); border-radius:var(--radius); padding:18px; max-width:420px; width:100%}
.dialog h3{margin-top:0}
.dialog .btn-row{margin-top:16px}

.empty{color:var(--muted); text-align:center; padding:26px 10px; font-size:14px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }