/* AutoServis PRO Puls: izgled. Boje i fontovi su tokeni na :root (svijetla i tamna tema). */

/* Raspored: zaglavlje, period i servisi, pa novac (prsten + tri stanja), red poslova, upozorenja, kartice servisa, ljudi i poslovi */
:root{
  --bg:#f3f4f1; --panel:#ffffff; --fg:#1c211f; --muted:#66706b; --line:#d9ddd8; --track:#e3e6e1;
  --s1:#e0561f; --s2:#138a7a; --s3:#5b62c9; --s4:#c2408a; --s5:#2f7fc4; --s6:#9a6a24; --s7:#5f8a1c; --s8:#5b6573;   /* 8 boja servisa, dodjeljuje ih api.js po redoslijedu */
  --good:#2f7d32; --bad:#d23c2a; --warn:#c98a10;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131715; --panel:#1c211f; --fg:#eef1ee; --muted:#9aa49f; --line:#2d3430; --track:#262c29;
    --s1:#ff7a42; --s2:#2fbfa9; --s3:#8b91f0; --s4:#f06bb4; --s5:#5aa9f0; --s6:#d1a050; --s7:#9cc44a; --s8:#a3adba; --good:#5cc062; --bad:#ff6b5b; --warn:#f0b33c; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131715; --panel:#1c211f; --fg:#eef1ee; --muted:#9aa49f; --line:#2d3430; --track:#262c29;
  --s1:#ff7a42; --s2:#2fbfa9; --s3:#8b91f0; --s4:#f06bb4; --s5:#5aa9f0; --s6:#d1a050; --s7:#9cc44a; --s8:#a3adba; --good:#5cc062; --bad:#ff6b5b; --warn:#f0b33c; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1rem;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
body.lock{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--s1);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:18px 16px 40px;display:flex;flex-direction:column;gap:18px}

/* zaglavlje */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.brand h1{margin:0;font-family:var(--display);font-weight:700;font-size:1.9rem;letter-spacing:.02em;line-height:1}
.tools{display:flex;gap:8px}
.ico{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;font-size:1.2rem}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.8rem;color:var(--muted);margin-top:-8px}
.live{display:inline-flex;align-items:center;gap:6px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 var(--good);animation:puls 2s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
/* osvježavanje nije uspjelo: crvena tačka bez pulsiranja; bez podataka nema oka ni štampe */
.live.err i{background:var(--bad);box-shadow:none;animation:none}
body.bez-podataka .tools [data-act="oko"],body.bez-podataka .tools [data-act="izvjestaj"]{display:none}

/* period i servisi */
.seg{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:9px 6px;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.seg button.on{background:var(--fg);color:var(--bg)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:7px}
.chip i{width:9px;height:9px;border-radius:50%;display:inline-block}
.chip.on{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}

/* novac */
.hero{display:grid;grid-template-columns:1fr;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.ringcard{display:flex;flex-direction:column;align-items:center;gap:14px}
.phase{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ring{position:relative;width:min(70vw,250px);aspect-ratio:1;max-width:100%;container-type:inline-size}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:13}
.ring .trk{stroke:var(--track)}
.ring .seg-arc{stroke-linecap:butt;transition:stroke-dasharray .5s,stroke-dashoffset .5s}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.big{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,18cqw,4.4rem);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.unit{color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.trend{font-weight:700;font-size:.82rem;margin-top:6px;max-width:64%;line-height:1.25}
.up{color:var(--good)} .dn{color:var(--bad)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:.88rem}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}
.legend b{font-family:var(--display);font-size:1.05rem}

.money h3,.sec-t{margin:0;font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stack{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--track);margin:14px 0 6px}
.stack span{display:block;height:100%;transition:width .5s}
.stack span+span{border-left:2px solid var(--panel)}
.mrows{display:flex;flex-direction:column}
.mr{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.mr:last-child{border-bottom:0}
.mr i{width:10px;height:10px;border-radius:3px;align-self:center}
.mr .l{font-weight:600}
.mr .l small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.mr .v{font-family:var(--display);font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.mr .v small{font-size:.9rem;color:var(--muted);font-weight:500}
.debt{margin-top:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.debt .l{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.debt .v{font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--bad);font-variant-numeric:tabular-nums}
.debt .v small{font-size:.95rem;color:var(--muted);font-weight:500}
.debt .go{font-weight:700;font-size:.85rem;white-space:nowrap}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-width:0}
.stat .l{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--display);font-weight:700;font-size:2rem;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .v small{font-size:1rem;color:var(--muted);font-weight:500}
.stat .s{font-size:.8rem;color:var(--muted)}

/* cilj mjeseca */
.goal .top2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.goal .big2{font-family:var(--display);font-weight:700;font-size:1.9rem;font-variant-numeric:tabular-nums}
.goal .big2 small{font-size:1rem;color:var(--muted);font-weight:500}
.gbar{position:relative;height:14px;border-radius:7px;background:var(--track);margin:10px 0 6px}
.gbar span{position:absolute;left:0;top:0;bottom:0;border-radius:7px;transition:width .6s}
.gbar em{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--fg);border-radius:1px}
.gnote{font-size:.86rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.grows{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.grow .gl{display:flex;justify-content:space-between;font-size:.86rem;gap:8px}
.grow .gl b{font-family:var(--display);font-size:1.05rem}
.grow .gbar{height:8px;margin:4px 0 0}
.grow .gbar em{top:-3px;bottom:-3px}
.leg2{font-size:.76rem;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:6px}
.leg2 i{display:inline-block;width:2px;height:12px;background:var(--fg)}

/* potrošnja dijelova */
.parts .ptop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.parts .sum{font-size:.86rem;color:var(--muted);margin-top:4px}
.parts .sum b{color:var(--fg)}
.tgl{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.tgl button{border:0;background:transparent;border-radius:8px;padding:6px 10px;font-weight:600;font-size:.82rem;color:var(--muted)}
.tgl button.on{background:var(--fg);color:var(--bg)}
.prow{width:100%;text-align:left;border:0;background:transparent;padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:start}
.prow:last-of-type{border-bottom:0}
.prow .r{font-family:var(--display);font-weight:700;color:var(--muted);padding-top:2px}
.prow .nm{font-weight:600;line-height:1.25;min-width:0}
.prow .nm small{display:block;color:var(--muted);font-weight:500;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .q2{text-align:right;font-family:var(--display);font-weight:700;font-size:1.3rem;white-space:nowrap;line-height:1.1}
.prow .q2 small{display:block;font-family:var(--body);font-size:.76rem;color:var(--muted);font-weight:500}
.prow .bar3{grid-column:2 / 4;display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--track)}
.prow .bar3 span{display:block;height:100%}
.prow .bar3 span+span{border-left:2px solid var(--panel)}
.prow .badges{grid-column:2 / 4;display:flex;gap:6px;flex-wrap:wrap}
.bdg{font-size:.72rem;font-weight:700;border-radius:6px;padding:2px 7px;white-space:nowrap}
.bdg.all{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.bdg.price{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.pfil{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pfil input[type=search]{flex:1 1 200px;min-width:0;font:inherit;font-size:.95rem;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
.pfil input[type=search]:focus-visible{outline:3px solid var(--s1);outline-offset:1px}
.sw{display:flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;white-space:nowrap}
.sw input{width:18px;height:18px;accent-color:var(--good)}
.pcount{font-size:.78rem;color:var(--muted);text-align:center;margin-top:8px}
.more{width:100%;margin-top:6px;border:1px dashed var(--line);background:transparent;border-radius:10px;padding:9px;font-weight:600;font-size:.88rem;color:var(--muted)}
.pact{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:10px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:6px 6px 6px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:8px 6px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td.n,.tbl th.n{text-align:right;white-space:nowrap}
.tblw{overflow-x:auto}
.save{background:color-mix(in srgb,var(--good) 12%,transparent);border-radius:12px;padding:12px 14px;margin-top:12px;font-size:.92rem;line-height:1.45}
.save b{font-family:var(--display);font-size:1.25rem}

/* isti posao po servisima */
.jrow{width:100%;text-align:left;border:0;background:transparent;padding:10px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.jrow:last-child{border-bottom:0}
.jrow .r{font-family:var(--display);font-weight:700;color:var(--muted)}
.jrow .nm{font-weight:600;min-width:0}
.jrow .bar2{display:block}
.jrow .num{text-align:right;font-family:var(--display);font-weight:700;font-size:1.3rem;white-space:nowrap;line-height:1.1}
.jrow .num small{display:block;font-family:var(--body);font-size:.72rem;color:var(--muted);font-weight:500}
.jp{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;color:var(--muted);align-items:center}
.jp span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.jp i{width:8px;height:8px;border-radius:50%;display:inline-block}
.jp b{color:var(--fg);font-family:var(--display);font-size:1rem}
.jp .hi b{color:var(--good)}
.jp .lo b{color:var(--bad)}

/* naslovi sekcija */
.h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:6px 2px -4px}
.h h2{margin:0;font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase}
.h span{font-size:.82rem;color:var(--muted);text-align:right}

/* red poslova */
.queue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.q{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0;border-top:4px solid var(--qc)}
.q .l{font-weight:700;font-size:.92rem;line-height:1.2}
.q .v{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums}
.q .dots{display:flex;gap:4px;flex-wrap:wrap;min-height:10px}
.q .dots i{width:10px;height:10px;border-radius:50%}
.q .s{font-size:.78rem;color:var(--muted)}
.q.zero{opacity:.55}

/* upozorenja */
.alerts{display:flex;flex-direction:column;gap:8px}
.al{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:12px;padding:10px 14px;display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.al.bad{border-left-color:var(--bad)}
.al.ok{border-left-color:var(--good)}
.al em{font-style:normal;color:var(--muted);font-size:.82rem;display:block}

/* kartice servisa */
.svc{display:grid;grid-template-columns:1fr;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-align:left;width:100%;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.card .t{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card .n{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:.02em;line-height:1.05}
.card .c{font-size:.82rem;color:var(--muted)}
.mini{position:relative;width:62px;height:62px;flex:0 0 62px}
.mini svg{width:100%;height:100%;transform:rotate(-90deg)}
.mini circle{fill:none;stroke-width:9}
.mini .trk{stroke:var(--track)}
.mini .bar{stroke:var(--c);stroke-linecap:round}
.mini b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:1.05rem}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.kv div{background:var(--bg);border-radius:10px;padding:7px 9px;min-width:0}
.kv .l{white-space:nowrap;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kv .v{font-family:var(--display);font-weight:700;font-size:1.3rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.kv .v.red{color:var(--bad)}
.cmp{margin-top:10px;font-size:.86rem;line-height:1.45}
.cmp b{font-weight:700}
.empty{margin-top:10px;background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:10px;padding:8px 10px;font-size:.86rem;font-weight:600}
.card.idle .kv{opacity:.5}
.foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:.82rem;color:var(--muted)}
.foot .go{font-weight:700;color:var(--fg);white-space:nowrap}

/* mehaničari i poslovi */
.list{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px 16px}
.mrow{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow .r{font-family:var(--display);font-weight:700;color:var(--muted)}
.mrow .nm{font-weight:600;min-width:0}
.mrow .nm small{display:flex;align-items:center;gap:5px;color:var(--muted);font-weight:500;font-size:.8rem}
.mrow .nm small i{width:8px;height:8px;border-radius:50%}
.bar2{height:6px;border-radius:4px;background:var(--track);margin-top:5px;overflow:hidden}
.bar2 span{display:block;height:100%;border-radius:4px}
.mrow .num{text-align:right;font-family:var(--display);font-weight:700;font-size:1.3rem;white-space:nowrap}
.mrow .num small{display:block;font-family:var(--body);font-size:.75rem;color:var(--muted);font-weight:500}

.btn{border-radius:12px;padding:15px;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);background:var(--panel);width:100%}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* donji panel */
.sheet{position:fixed;inset:0;background:rgba(10,12,11,.45);display:none;align-items:flex-end;justify-content:center;z-index:20}
.sheet.open{display:flex}
.sh{background:var(--bg);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:20px 20px 0 0;padding:16px 16px calc(28px + env(safe-area-inset-bottom,0px));border-top:5px solid var(--c)}
.sh:focus{outline:none}
.sh .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.sh h3{margin:0;font-family:var(--display);font-size:1.7rem;letter-spacing:.02em}
.sh .sub{color:var(--muted);font-size:.9rem;margin-top:2px}
.ord{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.ord .a{font-weight:600}
.ord .b{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ord .b i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ord .amt{font-family:var(--display);font-weight:700;font-size:1.35rem;white-space:nowrap;text-align:right}
.ord .amt small{display:block;font-family:var(--body);font-size:.75rem;font-weight:600}
.tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 7px;white-space:nowrap;align-self:flex-start}
.tag.rad{background:color-mix(in srgb,var(--s3) 18%,transparent);color:var(--s3)}
.tag.cek{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.tag.pre{background:color-mix(in srgb,var(--s2) 18%,transparent);color:var(--s2)}
.tag.nap{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.old{color:var(--bad)}
.ro{font-size:.78rem;color:var(--muted);text-align:center;margin-top:14px}
.code{font-family:var(--display);font-weight:700;font-size:2.6rem;letter-spacing:.18em;text-align:center;background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:12px;margin:12px 0}
.steps{margin:0;padding-left:20px;line-height:1.6;font-size:.95rem}

@media (min-width:760px){
  .hero{grid-template-columns:minmax(290px,360px) 1fr}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .queue{grid-template-columns:repeat(4,minmax(0,1fr))}
  .svc{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lower{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
}

/* jezik */
.lang{display:flex;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:3px;gap:2px}
.lang button{border:0;background:transparent;border-radius:9px;padding:0 9px;height:34px;font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.04em;color:var(--muted)}
.lang button.on{background:var(--fg);color:var(--bg)}
.tools{align-items:center}
.sum-in{font-size:.86rem;color:var(--muted)}
.dot{display:inline-block;border-radius:50%;vertical-align:middle;margin-right:5px;flex:none}
.brand{min-width:0}
.tools{flex:none}
.meta .lang{margin-left:auto;padding:2px;border-radius:10px}
.meta .lang button{height:28px;padding:0 8px;font-size:.85rem;border-radius:8px}
.meta #napomena{flex:1 1 220px}

/* ===== v2: logo, gornji meni, dijelovi menija, podešavanja ===== */
.brand{display:flex;align-items:center;gap:12px}
.bt{min-width:0}
.logo{max-height:48px;max-width:120px;width:auto;height:auto;object-fit:contain;border-radius:8px;flex:none}
.ico.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* meni: običan tekst odmah ispod naziva grupe, izabrani dio podvučen; ostaje gore dok se skrola */
.tabs{position:sticky;top:0;z-index:10;display:flex;gap:4px 22px;overflow-x:auto;scrollbar-width:none;
  background:var(--bg);border-bottom:1px solid var(--line);margin:-6px -16px 0;padding:0 16px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;flex:0 0 auto;border:0;background:transparent;padding:10px 0 9px;
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--fg);border-bottom-color:var(--fg)}
.filt{display:flex;flex-direction:column;gap:12px}
.filt[hidden]{display:none}
.tabp{display:none;flex-direction:column;gap:18px}
.tabp.on{display:flex}
.alerts .more{margin-top:2px}
@media (max-width:420px){.tabs{gap:4px 16px}.tabs button{font-size:.98rem;letter-spacing:.04em}}

/* podešavanja */
.nazad{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 12px;font-weight:600;font-size:.88rem}
.pset{display:flex;flex-direction:column;gap:10px}
.pset .sec-t{margin:0}
.note{font-size:.82rem;color:var(--muted);margin:0}
.logobox{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logoprev{width:150px;height:72px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;padding:8px;background:var(--bg)}
.logoprev img{max-width:100%;max-height:100%;object-fit:contain}
.logoprev span{font-size:.8rem;color:var(--muted);text-align:center}
.logobtn{display:flex;gap:8px;flex-wrap:wrap}
.btn.sm{width:auto;padding:10px 14px;font-size:1rem;display:inline-flex;align-items:center}
label.btn{cursor:pointer}
.srow{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.sl{display:flex;gap:8px;align-items:flex-start;min-width:0}
.sl .dot{margin-top:6px}
.sl small,.sr small{display:block;color:var(--muted);font-size:.8rem}
.sr{text-align:right;white-space:nowrap}
.sr b{font-family:var(--display);font-size:1.15rem}
.prow2{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0}
.prow2 .lang button{height:32px;font-size:.9rem}

@media (min-width:760px){
}
@media (max-width:759px){
  .brand h1{font-size:1.65rem}
}
.top .brand{flex:1 1 auto;min-width:0}
.top .bt{flex:1 1 auto;min-width:0}
@media (max-width:759px){.logo{max-height:40px;max-width:84px}}
@media (max-width:759px){.brand:has(.logo:not([hidden])) h1{font-size:1.4rem}}
.tabs + .meta{margin-top:0}

/* ===== v3: podešavanja (polja), Javi servisu, kratka poruka ===== */
.al .alt{flex:1;min-width:0}
.vbr{flex:none;align-self:center;border:1px solid #7360f2;color:#7360f2;background:transparent;border-radius:999px;padding:6px 11px;font-weight:700;font-size:.78rem;white-space:nowrap}
.vbr::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#7360f2;margin-right:6px;vertical-align:middle}
.vbr.wide{display:block;width:100%;padding:11px;font-size:.95rem;margin-top:12px}
@media (max-width:420px){.al{flex-wrap:wrap}.al .vbr{margin-left:auto}}
.srow2{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:10px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.fgrid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--muted);font-weight:600}
.inw{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:0 10px;min-height:42px}
.inw:focus-within{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.inw input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;color:var(--fg);padding:9px 0;outline:none}
.inw em{font-style:normal;color:var(--muted);font-size:.85rem;margin-left:6px}
.inw.sm{width:120px;flex:none}
.inw.sm input{text-align:right}
.st{font-size:.76rem;font-weight:600;min-height:1em;color:var(--muted)}
.st.ok{color:var(--good)}
.st.err{color:var(--bad)}
.fld1{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;border-top:1px solid var(--line);padding:10px 0}
.fld1 .st{grid-column:1/-1;text-align:right}
.sw2 input{width:22px;height:22px;accent-color:var(--fg)}
.mailw{display:flex;flex-direction:column;gap:8px}
.mailw.off{opacity:.45}
.mrcp{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center}
@media (max-width:420px){.mrcp{grid-template-columns:1fr auto}.mrcp select{grid-column:1/2;grid-row:2}.mrcp .x{grid-row:1/3;grid-column:2}}
.mrcp input,.pset select{border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;font-size:.95rem;padding:9px 10px;min-width:0}
.mrcp input:focus,.pset select:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.x{border:1px solid var(--line);background:var(--panel);border-radius:10px;width:40px;height:40px;font-size:1.3rem;line-height:1}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--fg);color:var(--bg);padding:11px 16px;border-radius:12px;font-weight:600;font-size:.92rem;z-index:30;transition:.25s;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* v5: Pregled = prsten + novac, brojke, upozorenja */
.alw,.pdesno{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:760px){
  .tabp[data-tab="pregled"].on{display:grid;grid-template-columns:minmax(290px,360px) 1fr;align-items:stretch}
  .tabp[data-tab="pregled"] .stats,.tabp[data-tab="pregled"] .alw{grid-column:1/-1}
}

/* ===== v6: prilagođavanje širini ekrana =====
   telefon < 760 px: sve u jednoj koloni
   tablet 760 do 1099 px: prsten i novac jedno pored drugog, kartice servisa u 2 kolone
   računar od 1100 px: šire stranice, veći prsten, upozorenja u 2 kolone
   veliki ekran od 1500 px: sve malo krupnije (osnovni font raste), stranica do 1560 px */
.wrap{width:100%;max-width:1560px;padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)}
.tabs{margin-left:calc(-1 * clamp(16px,3vw,48px));margin-right:calc(-1 * clamp(16px,3vw,48px));padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)}
@media (min-width:760px) and (max-width:1099px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabp[data-tab="pregled"].on{grid-template-columns:minmax(280px,1fr) minmax(0,1.3fr)}
}
@media (min-width:1100px){
  .tabp[data-tab="pregled"].on{grid-template-columns:minmax(340px,440px) 1fr}
  .ring{width:min(26vw,320px)}
  .alerts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .alerts .al.ok{grid-column:1/-1}
  .svc{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1500px){
  html{font-size:17.5px}
  .ring{width:360px}
}
@media (min-width:1900px){html{font-size:19px}.ring{width:400px}}

/* ===== v7: Zarada, novac koji stoji, oko, klik na prsten ===== */
.zpanel{display:flex;flex-direction:column;gap:10px;min-width:0}
.zpanel .phase.zt{text-align:left}
.zbig{font-family:var(--display);font-weight:700;font-size:3rem;line-height:1;letter-spacing:.01em}
.zbig small{font-size:1.1rem;color:var(--muted);font-weight:600}
.zbig.sm{font-size:2.4rem;color:var(--bad)}
.zsub{color:var(--muted);font-size:.9rem;margin-top:-4px}
.zst{margin:6px 0 2px}
.mr.uk{border-top:2px solid var(--fg)}
.mr.uk .l{font-weight:700}
.btnrow{width:100%;border:0;background:transparent;text-align:left;font:inherit;color:inherit;padding-left:0;padding-right:0}
.btnrow:hover .l{text-decoration:underline}
.ztbl td small{color:var(--muted);font-size:.75rem}
.ztbl sup{color:var(--muted)}
.zline{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--muted);padding-top:8px;border-top:1px dashed var(--line)}
.zline b{color:var(--fg)}
.oko svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num .kmu{display:inline;font-size:.8rem}
.seg-arc{cursor:pointer;transition:opacity .15s}
.seg-arc:hover{opacity:.8}
@media (min-width:900px){
  .tabp[data-tab="zarada"].on{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .tabp[data-tab="zarada"] .zfull{grid-column:1/-1}
}
.ring .center{pointer-events:none}
.ztbl td:first-child{white-space:nowrap}
.zlist{display:none}
@media (max-width:640px){
  .ztw{display:none}
  .zlist{display:flex;flex-direction:column}
  .zrow{padding:10px 0;border-top:1px solid var(--line)}
  .zr1{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:600}
  .zr1 b{font-family:var(--display);font-size:1.3rem}
  .zr2{font-size:.82rem;color:var(--muted);margin-top:2px}
}

/* ===== v8: neto zarada i fiksni troškovi ===== */
.zdesno{display:flex;flex-direction:column;gap:18px;min-width:0}
.zbig.neg{color:var(--bad)}
.zbig.sm2{font-size:2.2rem}
.pl .mr.neg .v{color:var(--muted)}
.pl .mr.sum{border-top:1px solid var(--fg)}
.pl .mr.sum .l,.pl .mr.uk .l{font-weight:700}
.pl .mr.uk .v{color:var(--good)}
.pl .mr.uk.neg .v{color:var(--bad)}
.trl{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.trr{display:grid;grid-template-columns:minmax(0,9rem) 1fr auto;gap:10px;align-items:center;font-size:.9rem}
.trr .tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trr .tb{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.trr .tb span{display:block;height:100%;background:var(--warn);border-radius:4px}
.trr .tv{font-family:var(--display);font-weight:700;font-size:1.05rem;text-align:right;min-width:4.5rem}
.trchips{margin:10px 0 6px}
.trlist{display:flex;flex-direction:column}
.trow{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem auto 40px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.trow .tnaziv{font-weight:600;min-width:0}
.trow .tnaziv small{display:block;font-weight:500;color:var(--muted);font-size:.76rem}
.trow input.tnaziv{border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;padding:9px 10px}
.trow .inw.sm{width:auto}
.trow select,.trdod select{border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;font-size:.9rem;padding:9px 6px}
.trdod{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.trdod select{flex:1 1 12rem}
.trdod .more{flex:1 1 12rem;margin:0}
.trsum{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-weight:600}
.trsum b{font-family:var(--display);font-size:1.4rem}
@media (max-width:520px){
  .trow{grid-template-columns:minmax(0,1fr) auto 40px;grid-template-areas:"n n x" "i u u"}
  .trow .tnaziv{grid-area:n}.trow .x{grid-area:x}.trow .inw{grid-area:i}.trow select{grid-area:u}
}
@media (min-width:900px){
  .tabp[data-tab="zarada"].on{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
.zpanel .top2{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap}

/* podešavanja: dvije nezavisne kolone na računaru (svaka kartica odmah ispod prethodne), jedna na telefonu */
.pcols{display:flex;flex-direction:column;gap:18px}
.pcol{display:contents}
@media (min-width:760px){
  .pcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
  .pcol{display:flex;flex-direction:column;gap:18px;min-width:0}
}

/* ===== v9: 12 mjeseci, klijenti, iskorištenost, povratci ===== */
.t12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;margin-top:6px}
.t12c{border:0;background:transparent;padding:4px 0 0;display:flex;flex-direction:column;align-items:stretch;gap:6px;border-radius:8px;cursor:pointer;min-width:0}
.t12c:hover{background:var(--bg)}
.t12c.on{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.t12b{height:170px;display:flex;align-items:flex-end;justify-content:center;padding:0 3px}
.t12p{width:100%;max-width:46px;background:var(--track);border-radius:6px 6px 2px 2px;display:flex;align-items:flex-end;overflow:hidden;transition:height .4s}
.t12n{width:100%;background:var(--good);border-radius:4px 4px 2px 2px}
.t12n.neg{background:var(--bad)}
.t12c.cur .t12p{background:repeating-linear-gradient(135deg,var(--track) 0 5px,transparent 5px 9px);box-shadow:inset 0 0 0 1px var(--track)}
.t12c.on .t12p{box-shadow:inset 0 0 0 2px var(--fg)}
.t12l{font-size:.72rem;color:var(--muted);text-align:center;white-space:nowrap;padding-bottom:4px;font-weight:600}
.t12c.on .t12l{color:var(--fg)}
.t12d small{color:var(--muted);font-weight:600}
.t12kv{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px}
.kv .v.grn{color:var(--good)}
@media (max-width:520px){.t12{gap:2px}.t12b{height:130px;padding:0 1px}.t12l{font-size:.62rem}.t12kv{grid-template-columns:repeat(2,minmax(0,1fr))}}

.klr{align-items:center}
.klr .b + .b{margin-top:2px}
.tabp[data-tab="klijenti"] .stats .v.red{color:var(--bad)}
@media (min-width:900px){
  .tabp[data-tab="klijenti"].on{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
  .tabp[data-tab="klijenti"] .stats{grid-column:1/-1}
}

.rdva{display:flex;flex-direction:column;gap:18px}
@media (min-width:900px){.rdva{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.kap{padding:10px 0;border-top:1px solid var(--line)}
.kap1{display:flex;justify-content:space-between;align-items:baseline}
.kapp{font-family:var(--display);font-size:1.4rem}
.kapbar{position:relative;height:10px;border-radius:5px;background:var(--track);margin:6px 0;overflow:visible}
.kapbar span{display:block;height:100%;border-radius:5px}
.kapbar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg);opacity:.35}
.kap2{font-size:.82rem;color:var(--muted)}
.kap3{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;margin-top:4px;color:var(--muted)}
.kap3 b{color:var(--fg)}
.pmeh{margin-top:10px}
.pkv{margin-top:0}
.ord .amt.sm{font-size:1.05rem}
.fgrid > *{min-width:0}.inw input{width:100%}
.pkv .l,.t12kv .l{white-space:normal;line-height:1.2}.pkv > div,.t12kv > div{min-width:0}

/* ===== v10: stanje dijelova, prognoza, odsutnost ===== */
.lkv{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.lkv .l{white-space:normal;line-height:1.2}
.lkv > div{min-width:0}
@media (max-width:520px){.lkv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lsrv{margin-top:2px}
.lh{margin:10px 0 0;font-family:var(--display);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lrow{align-items:center}
.sif{color:var(--muted);font-weight:500;font-size:.78rem}
.ima{color:var(--good);font-weight:700}
.prog{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:8px 0 2px;font-size:.92rem}
.prog b{font-family:var(--display);font-size:1.25rem}
.prog small{color:var(--muted)}
.gpr{color:var(--muted);font-weight:500;margin-left:6px}
.ods{font-style:normal;color:var(--warn);font-weight:600}
.ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== izvještaj za štampu ===== */
.izvj{display:none}
@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#fff !important;color:#111 !important;font-size:10.5pt}
  body > *:not(#izvjestaj){display:none !important}
  .izvj{display:block !important;color:#111}
  .rh{display:flex;gap:14px;align-items:center;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:12px}
  .rh img{max-height:46px;max-width:140px}
  .rt{font-family:var(--display);font-size:20pt;font-weight:700;line-height:1}
  .rs{color:#555;font-size:9pt;margin-top:2px}
  .rsec{margin:0 0 12px;break-inside:avoid}
  .rsec h2{font-family:var(--display);font-size:11pt;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;color:#333}
  .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .rk{border:1px solid #ccc;border-radius:6px;padding:6px 8px}
  .rl{font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em;color:#666}
  .rv{font-family:var(--display);font-size:14pt;font-weight:700}
  .rv.neg{color:#b3261e}.rv.pos{color:#1e6b2a}
  .rtab{width:100%;border-collapse:collapse;font-size:9pt}
  .rtab th,.rtab td{border-bottom:1px solid #ddd;padding:3px 4px;text-align:right;white-space:nowrap}
  .rtab th:first-child,.rtab td:first-child{text-align:left}
  .rtab th{font-size:7.5pt;text-transform:uppercase;color:#666;letter-spacing:.04em}
  .rtab tfoot td{border-top:1.5px solid #111;font-weight:700}
  .r2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .rn{font-size:8pt;color:#666;margin:4px 0 0}
  .rf{margin-top:14px;border-top:1px solid #ccc;padding-top:6px;font-size:8pt;color:#777;text-align:center}
}

/* ===== v11: pouzdanost ===== */
.greske{display:flex;justify-content:space-between;align-items:center;gap:10px;background:color-mix(in srgb,var(--bad) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);color:var(--fg);border-radius:12px;padding:10px 14px;font-size:.9rem}
.greske[hidden]{display:none}
/* ekran prijave: uvijek taman, u stilu prijave u aplikaciji AutoServis PRO */
body.odjavljen{background:#0f1320}
body.odjavljen .wrap,body.odjavljen .izvj{display:none}
.prijava{--pbg:#0f1320;--pcard:#181c2a;--pline:#2a3042;--pin:#222737;--pinl:#343b50;--ptx:#e8ecf5;--pmu:#8b93a7;--pplav:#3b6fd8;--pplav2:#5b8cff;
  min-height:100vh;color:var(--ptx);font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(ellipse 900px 520px at 50% -8%,rgba(40,90,220,.28),transparent 70%),var(--pbg)}
.prijava[hidden]{display:none}
.pwrap{display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px 16px 28px}
.pslog{margin:0;color:var(--pmu);font-size:.95rem;text-align:center}
.plang{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.plang button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--pline);background:#161a26;color:var(--ptx);font:600 .88rem Inter,system-ui,sans-serif;border-radius:8px;padding:8px 12px}
.plang button.on{border-color:var(--pplav);background:#1b2a52}
.plang svg{width:20px;height:13px;border-radius:2px}
.plang svg.glob{width:16px;height:16px}
.pcard{width:100%;max-width:450px;background:var(--pcard);border:1px solid var(--pline);border-radius:16px;padding:30px 34px 28px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pcard h1{margin:0 0 18px;text-align:center;font:600 1.02rem Inter,system-ui,sans-serif;color:#c3c9d6}
.pcard form{display:flex;flex-direction:column;gap:16px}
.pfld{display:flex;flex-direction:column;gap:7px;font:700 .74rem Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--pmu)}
.pfld input{background:var(--pin);border:1px solid var(--pinl);border-radius:10px;color:var(--ptx);font:400 1rem Inter,system-ui,sans-serif;padding:13px 16px;outline:none;text-transform:none;letter-spacing:0}
.pfld input:focus{border-color:var(--pplav2);box-shadow:0 0 0 3px rgba(91,140,255,.25)}
.pchk{display:flex;align-items:center;gap:10px;font:400 .95rem Inter,system-ui,sans-serif;color:#c3c9d6;cursor:pointer;margin-top:-4px}
.pchk input{width:18px;height:18px;accent-color:var(--pplav);margin:0}
.pst{min-height:1em;font:600 .85rem Inter,system-ui,sans-serif;color:#ff7b6b}
.pst:empty{display:none}
.pbtn{background:var(--pplav);color:#fff;border:0;border-radius:10px;padding:15px;font:700 1.02rem Inter,system-ui,sans-serif;cursor:pointer}
.pbtn:hover{background:#4a7ce4}
.pbtn:disabled{opacity:.6}
.pinfo{margin:0;color:#b9c0cf;font-size:.93rem;line-height:1.5;text-align:center}
.plnk{text-align:center;color:#b9c0cf;font:600 .95rem Inter,system-ui,sans-serif}
.pzab{text-align:center;margin-top:-6px}
.lnk{border:0;background:transparent;padding:2px 0;font:700 .95rem Inter,system-ui,sans-serif;color:var(--ptx);cursor:pointer}
.lnk2{border:0;background:transparent;padding:2px 0;font:400 .9rem Inter,system-ui,sans-serif;color:var(--pmu);cursor:pointer}
.lnk:hover,.lnk2:hover{text-decoration:underline;text-underline-offset:3px}
.pkont{width:100%;max-width:450px;border:1px solid var(--pline);border-radius:12px;background:#141826;text-align:center;padding:16px;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--pmu)}
.pkont a{color:var(--pplav2);font:700 1.05rem Inter,system-ui,sans-serif;text-decoration:none}
.pkont a::before{content:"\260E\FE0E  ";color:#e0563f}
.pkont a.pmail{font:600 .95rem Inter,system-ui,sans-serif;margin-top:-2px}
.pkont a.pmail::before{content:"\2709\FE0E  ";color:var(--pmu)}
.pver{font-size:.8rem;color:#646c80}
@media (max-width:480px){.pcard{padding:24px 20px 22px}}
/* logotip Pulsa (tekst u stilu logotipa AutoServis PRO) */
.lgt{display:flex;flex-direction:column;align-items:center;gap:6px;user-select:none}
.lg1{font-family:"Exo 2",Inter,sans-serif;font-style:italic;font-weight:900;font-size:clamp(2.5rem,9vw,3.6rem);line-height:1;letter-spacing:-.01em}
.lg1 .a{background:linear-gradient(180deg,#fff 0%,#e9edf5 55%,#b9c2d3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.lg1 .s{background:linear-gradient(180deg,#36b4ff 0%,#1f7dff 50%,#1a56e8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(40,140,255,.45))}
.lg2{display:flex;align-items:center;gap:8px;margin-left:6px}
.brz{width:46px;height:18px;opacity:.9;background:linear-gradient(90deg,transparent,#2b8cff) 0 0/100% 2px no-repeat,linear-gradient(90deg,transparent,#2b8cff) 8px 8px/38px 2px no-repeat,linear-gradient(90deg,transparent,#2b8cff) 16px 16px/30px 2px no-repeat}
.bx{font-family:"Exo 2",Inter,sans-serif;font-style:italic;font-weight:900;font-size:clamp(1.25rem,4.6vw,1.75rem);line-height:1;padding:.32em .7em .3em;border-radius:7px;transform:skewX(-14deg);display:inline-flex;align-items:center}
.bx>span{transform:skewX(14deg);display:inline-flex;align-items:center;gap:.38em}
.bx.pro{background:linear-gradient(180deg,#2f7bff,#1546c9);color:#fff;border:1.5px solid #4fc3ff;box-shadow:0 0 16px rgba(60,160,255,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.bx.puls{background:linear-gradient(180deg,#f4f6fa,#c9d0dc);color:#13286b;border:1.5px solid #e9edf5;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.bx .pd{width:.42em;height:.42em;border-radius:50%;background:#e0561f;animation:lgpd 1.8s infinite}
@keyframes lgpd{0%{box-shadow:0 0 0 0 rgba(224,86,31,.65)}70%{box-shadow:0 0 0 .45em rgba(224,86,31,0)}100%{box-shadow:0 0 0 0 rgba(224,86,31,0)}}
@media (prefers-reduced-motion:reduce){.bx .pd{animation:none}}
/* odjava u zaglavlju (kao u aplikaciji) */
.ico.odj{width:auto;padding:0 12px;display:inline-flex;gap:7px;align-items:center;font:600 .9rem var(--body,inherit)}
.ico.odj[hidden]{display:none}
@media (max-width:640px){.ico.odj span{display:none}.ico.odj{width:42px;padding:0;justify-content:center}}
@media (max-width:420px){.ico.odj{width:38px}}
.btn:disabled{opacity:.55}
.btn.danger{background:var(--bad);color:#fff;border-color:var(--bad)}
.ikontakt{font-weight:600}
.ikontakt a{color:inherit}
/* Grupa u Podešavanjima */
.srow3{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:10px 0}
.srow3 small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.prow2.nalog{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.izasao{margin:0 0 6px;padding:8px 12px;border-left:4px solid var(--muted);background:var(--panel);border-radius:8px}
/* traka "demo podaci" */
.demo{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:0 0 12px;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--warn) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 55%,transparent)}
.demo[hidden]{display:none}
.demo .dt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 18rem}
.demo .dt b{font-size:1rem}
.demo .dt span{color:var(--muted);font-size:.9rem}
.demo .btn{width:auto;flex:0 0 auto;margin:0}
@media (max-width:560px){.demo .btn{width:100%}}
.prazno{text-align:center;padding:36px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.prazno h2{margin:0;font-family:var(--display);font-size:1.6rem}
.prazno p{margin:0 0 6px;color:var(--muted);max-width:32rem}
.prazno .btn{max-width:22rem}
body.bez-servisa .tabs,body.bez-servisa .filt,body.bez-servisa section[data-tab]:not([data-tab="postavke"]){display:none !important}
.probno{background:color-mix(in srgb,var(--warn) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:12px;padding:10px 14px;font-size:.88rem}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
@media (max-width:420px){.tools{gap:5px}.tools .ico{width:38px;height:38px}.tools .ico svg{width:18px;height:18px}.top{gap:8px}}

/* ===== marka: AutoServis PRO Puls, sa tačkom koja pulsira ===== */
.marka{display:flex !important;align-items:center;gap:7px}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--s1);flex:none;box-shadow:0 0 0 0 var(--s1);animation:pulsm 1.8s infinite}
@keyframes pulsm{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--s1) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ===== v12: periodi (Jučer, Danas, 7 dana, Mjesec, Godina, Od-do) ===== */
.seg{overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{white-space:nowrap}
@media (max-width:759px){.seg button{flex:0 0 auto;padding:9px 14px}}
.seg button.raspon.on{letter-spacing:.02em}
.rbrzi{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.rpolja{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rpolja input[type=date]{min-height:24px;font-family:var(--body)}

/* ===== v13: urađeno/naplaćeno, popusti, ostaje, sutra, pretraga ===== */
.rtgl{margin-top:-6px}
.rtgl button{padding:5px 12px}
.mr.info .l{font-weight:500;color:var(--muted)}
.mr.info .v{font-size:1.15rem;color:var(--muted)}
.ost{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;background:color-mix(in srgb,var(--good) 12%,transparent);border-radius:12px;padding:12px 14px}
.ost .l{font-weight:700}
.ost .l small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.ost .v{font-family:var(--display);font-weight:700;font-size:1.7rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ost .v small{font-size:.9rem;color:var(--muted);font-weight:500}
.ost .c{grid-column:1/-1;font-size:.86rem;color:var(--muted);margin-top:4px}
.ost .c b{color:var(--fg)}
.ost.neg{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.ost.neg .v{color:var(--bad)}
.sutg{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.sutg{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.sut{background:var(--bg);border-radius:12px;padding:12px 14px;min-width:0;display:flex;flex-direction:column}
.sut .kapbar{background:var(--track)}
.sutl{margin-top:8px;display:flex;flex-direction:column}
.sutr{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line);font-size:.88rem}
.sutr .sv{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.sutr .sn{min-width:0;font-weight:600}
.sutr .sn small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.sutr .sh2{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.sut .vbr.wide{margin-top:auto;padding-top:9px;padding-bottom:9px}
.sut .sutl + .vbr.wide,.sut .note + .vbr.wide{margin-top:10px}
.kltr,.jfil{margin-top:0}
.jfil{margin-bottom:8px}
@media (min-width:900px){.tabp[data-tab="klijenti"] .kltr{grid-column:1/-1}}
.kltr input[type=search],.jfil input[type=search]{flex:1 1 200px;min-width:0;font:inherit;font-size:.95rem;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg)}
.kltr input[type=search]:focus-visible,.jfil input[type=search]:focus-visible{outline:3px solid var(--s1);outline-offset:1px}

/* ===== v13b: istaknuti podnaslovi u Nabavci ===== */
.lh{margin:18px 0 2px;padding:2px 0 2px 10px;border-left:4px solid var(--fg);font-size:1.15rem;letter-spacing:.07em;color:var(--fg);line-height:1.2}
.lh.fali{border-left-color:var(--bad)}
.lh.mrtva{border-left-color:var(--warn)}
.parts .ptop .sec-t{color:var(--fg);padding-left:10px;border-left:4px solid var(--s2);line-height:1.2}
.xlsdl{display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;padding:14px 16px;text-align:left;font:inherit;color:var(--fg);
  background:color-mix(in srgb,#1e7145 8%,var(--panel));border:1px solid color-mix(in srgb,#1e7145 45%,transparent);border-radius:14px;cursor:pointer;transition:background .15s,transform .15s}
.xlsdl:hover{background:color-mix(in srgb,#1e7145 15%,var(--panel))}
.xlsdl:active{transform:scale(.99)}
.xlsdl .xi{flex:none;width:44px;height:44px;border-radius:11px;background:#1e7145;display:grid;place-items:center}
.xlsdl .xi svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8}
.xlsdl .xt{flex:1;min-width:0}
.xlsdl .xt b{display:block;font-family:var(--display);font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;color:#1e7145}
.xlsdl .xt small{display:block;color:var(--muted);font-size:.84rem;margin-top:1px}
.xlsdl .xa{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid #1e7145;display:grid;place-items:center}
.xlsdl .xa svg{width:20px;height:20px;fill:none;stroke:#1e7145;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .xlsdl .xt b{color:#5cc062}:root:not([data-theme="light"]) .xlsdl .xa{border-color:#5cc062}:root:not([data-theme="light"]) .xlsdl .xa svg{stroke:#5cc062}}
:root[data-theme="dark"] .xlsdl .xt b{color:#5cc062}:root[data-theme="dark"] .xlsdl .xa{border-color:#5cc062}:root[data-theme="dark"] .xlsdl .xa svg{stroke:#5cc062}
.lhn{font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:0;color:var(--muted);text-transform:none}