/* =========================================================
   IZGLED APLIKACIJE (Sport Master)
   Svaki dio je opisan samo jednom. Redoslijed:
    1. Boje            2. Osnova (tekst, polja, dugmad)   3. Raspored i gornja traka
    4. Prijava i lista klijenata   5. Profil klijenta    6. Članarina
    7. Program: sedmice, dani, vježbe   8. Premještanje   9. Plutajuće dugme i paneli
   10. Animacije      11. Telefon
   Ranije verzije izgleda su sačuvane u mapi dizajn/ (vidi dizajn/README.md).
   ========================================================= */

/* ---------- 1. BOJE ----------
   --ac narandžasta (glavna boja, dani)   --bl2 plava (vježbe)   --akt ljubičasta (označena vježba)
   --ok zelena (završeno, plaćeno)        --dg crvena (upozorenja, brisanje)
   --na = boja teksta na narandžastom dugmetu   --in = pozadina vježbe */
:root{--bg:#f5f4f2;--card:#fff;--tx:#17150f;--mu:#6f6a62;--ac:#e67000;--na:#fff;--bd:#e4e0da;--dg:#c92a2a;--ok:#2f9e44;
  --in:#f6f6f4;--bl2:#4c8fd6;--akt:#9c5bd1;--pro:color-mix(in srgb,#4c8fd6 80%,#6f6a62);--prj:#b58900;--prjb:color-mix(in srgb,#e0a800 60%,#e4e0da);--nar:#d9480f;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0b0c;--card:#161618;--tx:#f1efec;--mu:#a19c94;--ac:#ff8800;--na:#111;--bd:#2b2a28;--dg:#ff6b6b;--ok:#40c057;
  --in:#1f1f22;--bl2:#5aa3e8;--akt:#b98ae0;--pro:#8ec5ff;--prj:#ffd43b;--prjb:#ffd43b;--nar:#ffa94d}}
:root[data-theme="dark"]{--bg:#0b0b0c;--card:#161618;--tx:#f1efec;--mu:#a19c94;--ac:#ff8800;--na:#111;--bd:#2b2a28;--dg:#ff6b6b;--ok:#40c057;
  --in:#1f1f22;--bl2:#5aa3e8;--akt:#b98ae0;--pro:#8ec5ff;--prj:#ffd43b;--prjb:#ffd43b;--nar:#ffa94d}

/* ---------- 2. OSNOVA ---------- */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1{font-size:18px;margin:0 0 10px}h2{font-size:20px;margin:0 0 8px}
h3{font-size:13px;margin:16px 0 6px;color:var(--mu);text-transform:uppercase;letter-spacing:.04em}
h4{font-size:13px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px}
.mu{color:var(--mu);font-size:13px}
/* polja i dugmad */
input,textarea,button{font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:7px 9px;max-width:100%}
input,textarea{width:100%}
select{font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:7px 9px;width:100%;margin-top:3px}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px}
button{cursor:pointer;background:var(--card);white-space:nowrap;transition:background .15s,box-shadow .15s,transform .05s}
button:hover{box-shadow:0 1px 4px rgba(0,0,0,.12)}
button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(1px)}
button.p{background:var(--ac);color:var(--na);border-color:var(--ac);font-weight:600}button.p:hover{filter:brightness(1.08)}
button.x{border:none;background:none;color:var(--mu);padding:2px 6px}
button.d{color:var(--dg);border-color:var(--dg)}
button.nazad{font-weight:600;border-color:var(--ac);color:var(--ac)}
button.mali{font-size:13px;padding:5px 10px;min-height:0}
/* mreže i redovi */
.g{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:8px 0}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}.bar label{display:flex;gap:4px;align-items:center;font-size:13px}.bar input,.bar select{width:auto}
label.mu>input,label.mu>span,label.mu>select{margin-top:4px}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:12px;color:var(--mu);padding:4px}td{padding:3px}
td input.n{width:74px}  /* brojčana polja u tabeli (Kilaža i mjere) */
/* kartice (tabovi) u redu: podkartice profila i sedmice */
.tabs{display:flex;gap:6px;margin:10px 0;overflow-x:auto;padding-bottom:4px;position:relative}
.tabs button{border-radius:999px;padding:7px 16px;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .1s}
.tabs button.on{background:var(--ac);color:var(--na);border-color:var(--ac)}
.kr{display:none}  /* kratki natpis (samo na telefonu), npr. "S1" umjesto "Sedmica 1" */
/* kratka poruka dole na ekranu */
.tost{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:#111;color:#fff;border:1px solid #333;
  padding:10px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:calc(100vw - 32px);animation:ulaz .25s ease-out;transition:opacity .4s}
.tost.ode{opacity:0}

/* ---------- 3. RASPORED I GORNJA TRAKA ---------- */
.app{display:grid;grid-template-columns:270px 1fr;gap:16px;max-width:1150px;margin:0 auto;padding:16px 16px 90px}  /* 90px dole: mjesto za plutajuće dugme */
.app>*{min-width:0}  /* da široke tabele ne prošire stranicu na telefonu */
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
/* program preko cijelog ekrana: lista klijenata se sakrije (otvara se dugmetom ☰) */
body.pun .app{grid-template-columns:1fr;max-width:1500px}
/* crna gornja traka s logom i karticama otvorenih klijenata */
.top{position:sticky;top:0;z-index:20;display:flex;gap:8px;align-items:center;background:#000;border-bottom:1px solid #262422;padding:8px 12px}
.top .tl{height:30px;width:auto;flex:none}
#mn{display:none;background:#1a1918;color:#fff;border-color:#34312d}
body.pun #mn{display:inline-block}
#tabs{display:flex;gap:6px;overflow-x:auto;flex:1;padding:2px}
.top #tabs>.mu{color:#a19c94}
.tb{display:flex;align-items:center;gap:4px;padding:4px 6px 4px 12px;border:1px solid #34312d;border-radius:999px;white-space:nowrap;cursor:pointer;max-width:230px;
  background:#1a1918;color:#eeeae4;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;transition:background .2s,color .2s,border-color .2s,transform .15s}
.tb:hover{transform:translateY(-1px)}
.tb span{overflow:hidden;text-overflow:ellipsis}
.tb button{color:#a19c94}
.tb.on{background:#ff8800;color:#111;border-color:#ff8800}.tb.on button{color:#111}
#sy{font-size:12px;white-space:nowrap;transition:color .3s}#sy.sync{animation:puls 1s ease-in-out infinite}
#env{font-size:11px;font-weight:700;color:#fff;background:#e8590c;border-radius:999px;padding:2px 8px;white-space:nowrap}

/* ---------- 4. PRIJAVA I LISTA KLIJENATA ---------- */
.login{max-width:380px;margin:12vh auto 0;padding:0 16px}
.login .card{padding:22px;background:#000;color:#f1efec;border-color:#262422;animation:ulaz .45s ease-out both}
.login label{display:block;margin:10px 0}
.login .mu{color:#a19c94}
.login input{background:#141312;color:#f1efec;border-color:#34312d}
.login button.p{background:#ff8800;border-color:#ff8800;color:#111}
.login .greska{color:var(--dg);min-height:1.4em;margin:8px 0 0}
.lp{display:block;width:100%;max-width:280px;margin:0 auto 10px}
.dobro{background:#000;border-radius:14px;padding:22px 16px;text-align:center;margin-bottom:14px}
.dobro img{width:100%;max-width:320px}
/* lista lijevo: na računaru ostaje na mjestu dok se profil skrola */
@media(min-width:781px){#side{position:sticky;top:62px;align-self:start;max-height:calc(100vh - 78px);overflow-y:auto}}
body.pun #side{display:none}
body.pun #side.open{display:block;position:fixed;left:12px;top:58px;width:290px;max-width:calc(100vw - 24px);max-height:calc(100vh - 80px);overflow:auto;z-index:30;box-shadow:0 10px 40px rgba(0,0,0,.45)}
#sidez{display:none;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.45)}  /* tamna pozadina iza liste otvorene dugmetom ☰ */
.app:has(#side.open) #sidez{display:block}
#sidex{display:none;float:right;font-size:13px;font-weight:600;color:var(--ac);min-height:0}
#side.open #sidex{display:inline-block}
/* vide se 4 klijenta, ostalo se skrola */
#list{max-height:200px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ac) 50%,transparent) transparent}
#list::-webkit-scrollbar{width:6px}#list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ac) 50%,transparent);border-radius:6px}
.cl{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:11px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s}
.cl:hover{background:var(--bg);transform:translateX(3px)}.cl.on{border-color:var(--ac);background:var(--bg)}
.racun{margin-top:14px;padding-top:12px;border-top:1px solid var(--bd)}
.racun .mu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}
.upoz{color:var(--dg);font-size:13px;margin-top:6px}

/* ---------- 5. PROFIL KLIJENTA ---------- */
.hero{display:flex;gap:14px;align-items:center;margin-bottom:4px}
.hero .arh{margin-left:auto;font-size:13px}
.av{width:52px;height:52px;border-radius:50%;background:var(--ac);color:var(--na);display:grid;place-items:center;font-size:24px;font-weight:700;flex:none}
.arhn{background:var(--bg);border:1px dashed var(--bd);border-radius:10px;padding:8px 12px;color:var(--mu);margin:8px 0}
/* sekcije: tanka obojena linija gore (siva = podaci, zelena = članarina, narandžasta = trening) */
.sec{border:1px solid var(--bd);border-top:2px solid var(--bd);border-radius:14px;padding:16px;margin:18px 0;background:var(--card);transition:box-shadow .25s,border-color .25s,background .25s}
.sec>h3{font-size:16px;text-transform:none;letter-spacing:0;color:var(--tx);margin:0 0 12px}
.sec.info{border-top-color:#868e96}.sec.pay{border-top-color:#2f9e44}.sec.work{border-top-color:var(--ac)}
.sec button{transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .1s}
/* povrede: crveno upozorenje */
.povb{background:color-mix(in srgb,var(--dg) 10%,var(--card));border:1px solid var(--dg);color:var(--dg);border-radius:10px;padding:8px 12px;margin:10px 0;font-size:14px;white-space:pre-wrap}
.povb b{display:block;margin-bottom:2px}
textarea.pov{min-height:180px;line-height:1.5}
/* lista programa, novi program, kopija programa drugom klijentu */
.pr{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border:1px solid var(--bd);border-radius:12px;margin-bottom:8px;background:var(--bg);transition:box-shadow .25s,border-color .25s,background .25s}
.pr:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.sub{margin-top:22px;padding-top:6px;border-top:2px dashed var(--bd)}
.kpp{flex:1 1 100%;border-top:1px dashed var(--bd);padding-top:10px;margin-top:4px}
/* napredak */
.tot{font-size:20px;font-weight:700;color:var(--ac)}
/* sigurnosna kopija */
.kop{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bd)}

/* ---------- 6. ČLANARINA ---------- */
/* oznake stanja: zelena / narandžasta / crvena / siva */
.pil{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;padding:3px 10px;border-radius:999px;border:1px solid transparent;text-transform:none}
.pil.zel{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--card));border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.pil.nar{color:var(--nar);background:color-mix(in srgb,#fd7e14 14%,var(--card));border-color:color-mix(in srgb,#fd7e14 40%,transparent)}
.pil.crv{color:var(--dg);background:color-mix(in srgb,var(--dg) 12%,var(--card));border-color:color-mix(in srgb,var(--dg) 35%,transparent)}
.pil.siv{color:var(--mu);background:var(--bg);border-color:var(--bd)}
.pil.svi{color:var(--tx);background:var(--bg);border-color:var(--tx)}
.pst{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 8px}
/* četiri polja: početak, kraj, trajanje, ističe */
.pgr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px}
.pp{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg)}
.pp .mu{font-size:11px;text-transform:uppercase;letter-spacing:.05em}.pp b{font-size:15px;font-variant-numeric:tabular-nums}
/* godina i mjeseci (stalna mreža, ništa se ne pomjera kad se označi uplata) */
.pgod{display:flex;align-items:center;gap:8px;margin:6px 0 8px}.pgod b{font-size:16px;min-width:44px;text-align:center}.pgod .mu{margin-left:6px}
.mjes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sec.pay .mj{position:relative;width:100%;padding:8px 0 10px;text-align:center;font-variant-numeric:tabular-nums}
.sec.pay .mj,.sec.pay .mj:hover,.sec.pay .mj:active{transform:none}
.mj .ck{position:absolute;top:2px;right:5px;font-size:11px;line-height:1}
.mj.pl{background:var(--ok);border-color:var(--ok);color:#fff}
.mj.kas{border-color:var(--dg);color:var(--dg)}
.mj.pok::after{content:"";position:absolute;left:20%;right:20%;bottom:4px;height:3px;border-radius:2px;background:var(--mu);opacity:.6}  /* crta = mjesec koji paket pokriva */
.mj.pl.pok::after{background:#fff}
.leg{font-size:12px;margin:8px 0 0}
/* pregled članarina: grupe se otvaraju klikom */
.clg{margin:8px 0}
.clh{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;background:var(--card);min-height:48px}
.clh .str{color:var(--mu);width:14px}
.clh .clb{margin-left:auto;min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--mu);background:var(--bg);border:1px solid var(--bd);border-radius:999px;padding:1px 8px}
.clg.otv>.clh{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.cll{padding:6px 0 0 18px}
.clg>p.mu{padding:6px 0 0 18px;margin:0}
.clr{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;white-space:normal;padding:10px 12px;margin-bottom:6px;border-radius:12px;background:var(--bg)}
.cloz{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}  /* paket + oznake stanja u grupi "Svi klijenti" */
.cloz .pil{font-size:11px;padding:2px 8px}

/* ---------- 7. PROGRAM ---------- */
/* sedmice: zelena = završena, tačka = trenutna, ✕ = obriši */
.tabs button.gotovo{background:color-mix(in srgb,var(--ok) 10%,var(--card));border-color:var(--ok)}
.tabs button.on.gotovo{background:var(--ok);border-color:var(--ok);color:#fff}
.tren{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ac);margin-left:6px;vertical-align:middle}
.tabs button.on .tren{background:var(--na)}
.wx{margin-left:8px;padding:0 4px;border-radius:6px;color:var(--mu);font-size:13px}
.wx:hover{background:color-mix(in srgb,var(--dg) 15%,transparent);color:var(--dg)}
.tabs button.on .wx{color:inherit;opacity:.8}
.tabs button.pit{border-color:var(--dg)}.tabs button.pit .wx{background:var(--dg);color:#fff;opacity:1;font-weight:700}
.sedm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.svajp{display:none;font-size:12px;color:var(--mu);margin:-4px 0 8px}
@media (hover:none) and (pointer:coarse){.svajp{display:block}}
/* prenos iz sedmice 1: mala dugmad u jednom redu */
.prenos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 4px;padding-top:12px;border-top:1px dashed var(--bd)}
.prenos .mu{margin-right:4px}

/* DAN: narandžasta traka lijevo + narandžasto zaglavlje; završen dan je zelen */
.day{border:1px solid color-mix(in srgb,var(--ac) 35%,var(--bd));border-left:5px solid var(--ac);border-radius:12px;background:var(--card);padding:0 10px 4px;margin-bottom:10px;
  transition:box-shadow .25s,border-color .25s,background .25s}
.day:not(.otv){padding-bottom:2px}
.dh{display:flex;gap:6px;align-items:center;cursor:pointer;user-select:none}
.day>.dh{margin:0 -10px 8px;padding:8px 10px;border-radius:7px 11px 0 0;background:color-mix(in srgb,var(--ac) 12%,var(--card))}
.day:not(.otv)>.dh{margin-bottom:4px;border-radius:7px 11px 11px 7px}
.dh .str{display:grid;place-items:center;width:40px;height:40px;margin:-6px -4px -6px -6px;font-size:22px;line-height:1;color:var(--ac);text-align:center;border-radius:10px;cursor:pointer;flex:none;transition:transform .2s}  /* strelica: otvori/zatvori */
.dh .str:hover{background:color-mix(in srgb,var(--ac) 14%,transparent)}
.dh .dbr{white-space:nowrap}
.dh .vuci{font-size:16px}
.dh button.x.pit,.eh button.x.pit{background:var(--dg);color:#fff;border-radius:8px;padding:4px 10px;font-weight:700}
.dnm{max-width:240px}
.day .dnm{color:var(--ac);border-color:transparent;background:transparent;font-weight:700;font-size:16px;padding-left:4px}
.day .dnm:hover{border-color:color-mix(in srgb,var(--ac) 40%,transparent)}.day .dnm:focus{border-color:var(--ac);background:var(--card)}
.day.gotov{border-color:color-mix(in srgb,var(--ok) 35%,var(--bd));border-left-color:var(--ok)}
.day.gotov>.dh{background:color-mix(in srgb,var(--ok) 12%,var(--card))}
.day.gotov .dnm{color:var(--ok)}
.day.gotov .str{color:var(--ok)}
button.dok{padding:4px 10px;border-color:var(--ok);color:var(--ok);font-weight:700}
button.dok.on{background:var(--ok);color:#fff}
textarea.kru{min-height:160px;line-height:1.5;background:var(--card);border:1px dashed color-mix(in srgb,var(--ac) 50%,var(--bd))}  /* kružni dan */

/* VJEŽBA: siva kartica s plavom crtom lijevo; označena vježba je ljubičasta */
.ex{border:1px solid var(--bd);border-left:3px solid var(--bl2);border-radius:10px;padding:6px 8px;margin-bottom:6px;background:var(--in);
  -webkit-touch-callout:none;transition:box-shadow .25s,border-color .25s,background .25s}
.day .ex.akt{border-color:var(--akt);background:color-mix(in srgb,var(--akt) 6%,var(--in));box-shadow:0 0 0 1px var(--akt)}
.ex.akt.blic{animation:akt .6s ease-out}  /* kratak sjaj samo u trenutku kad se vježba izabere */
.eh{display:flex;gap:8px;align-items:center;margin-bottom:2px}
.eh .w{flex:1;min-width:150px;color:var(--tx);font-weight:600}
.eh label{display:flex;gap:4px;align-items:center}
select.pz{width:auto;min-width:96px;margin:0;padding:6px 6px}  /* pauza */
/* napomena + dugme za prepis u narednu sedmicu */
.napr{display:flex;gap:6px;align-items:center;margin:2px 0 6px}
input.nap{margin:0;flex:1;min-width:0;padding:5px 9px;font-size:13px;font-style:italic;background:transparent;border-style:dashed;color:var(--tx)}
input.nap::placeholder{color:var(--mu);opacity:.7}
/* tabela setova */
.ex table{width:auto}
.ex th,.ex td{padding:2px 10px 2px 0}
.ex td{vertical-align:top}.ex td.mu{padding-top:10px}
td select.n{width:76px;margin:0;padding:7px 4px}td select.kg{width:96px}
.pro{font-size:11px;line-height:1.2;color:var(--pro);margin-top:2px;white-space:nowrap}  /* vrijednost iz prošle sedmice */
button.kgn{font-size:12px;padding:3px 6px;color:color-mix(in srgb,var(--ac) 80%,var(--mu));border-color:color-mix(in srgb,var(--ac) 35%,var(--bd))}  /* →S prepis */
button.kgn:disabled{opacity:.35;cursor:default}
button.kgn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
button.prj{display:block;margin-top:3px;font-size:11px;padding:2px 6px;min-height:0;border-style:dashed;border-color:var(--prjb);color:var(--prj);background:transparent}  /* 💡 prijedlog */
/* superset: spojene vježbe u isprekidanom okviru */
.ssg{border:1.5px dashed color-mix(in srgb,var(--ac) 55%,var(--bd));border-radius:12px;padding:6px 6px 0;margin-bottom:8px;-webkit-touch-callout:none}
.ssl{font-size:12px;font-weight:700;color:var(--ac);margin:0 0 4px 2px;text-transform:uppercase;letter-spacing:.04em}
.ssn{font-size:12px;font-weight:700;color:var(--ac);min-width:22px}
button.ssb{border:1px solid var(--bd);padding:3px 8px}button.ssb.on{background:var(--ac);color:var(--na);border-color:var(--ac)}

/* NAZIVI dana i vježbe: zaključani izgledaju kao običan tekst; mijenjaju se dugmetom ✎ */
input.zak{padding-left:4px;cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}
input.zak,input.zak:hover,input.zak:focus,.day input.dnm.zak,.day input.dnm.zak:hover,.day input.dnm.zak:focus{border-color:transparent;background:transparent;outline:none;box-shadow:none;transition:none}
input.w.zak,input.pn.zak{cursor:default}
.pnaz{display:flex;gap:8px;align-items:center;margin:10px 0 8px}  /* naziv programa + ✎ */
input.pn{font-size:18px;font-weight:700}
input.uredi,.day input.dnm.uredi{caret-color:auto;-webkit-user-select:text;user-select:text;cursor:text;border-color:var(--ac);background:var(--card);
  outline:2px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px}
button.ured{flex:none;width:36px;height:36px;min-height:0;padding:0;display:grid;place-items:center;font-size:16px;color:var(--mu);background:transparent;border:1px solid var(--bd);border-radius:10px}
button.ured:hover{color:var(--ac);border-color:var(--ac)}
input.uredi+button.ured{display:none}

/* ---------- 8. PREMJEŠTANJE (vježbe, dani, kartice klijenata) ---------- */
.vuci{cursor:grab;color:var(--mu);font-size:18px;line-height:1;padding:0 2px;user-select:none;touch-action:none}  /* ručka ⠿ */
.vuce{opacity:.97;box-shadow:0 14px 34px rgba(0,0,0,.4)!important;position:relative;z-index:5;outline:2px solid var(--ac);border-radius:12px;will-change:transform}  /* ono što se vuče */
.tb.vuce{outline-offset:1px;border-radius:999px;z-index:5}
body.vucem{user-select:none;-webkit-user-select:none;cursor:grabbing}

/* ---------- 9. PLUTAJUĆE DUGME 👥 I BRZI PRELAZ IZMEĐU KLIJENATA ---------- */
#bzb{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;
  width:56px;height:56px;border-radius:50%;padding:0;display:grid;place-items:center;background:#ff8800;border:2px solid #000;color:#111;
  box-shadow:0 6px 20px rgba(0,0,0,.35);font-size:24px}
#bzn{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#111;color:#ff8800;font-size:12px;font-weight:700;line-height:20px;padding:0 5px}
#bzn:empty{display:none}
body.bzotv #bzb{display:none}
#bzp{position:fixed;inset:0;z-index:50}
.bzz{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:ulaz .2s ease-out}
.bzs{position:absolute;left:0;right:0;bottom:0;max-height:80vh;overflow-y:auto;background:var(--card);border-radius:18px 18px 0 0;
  padding:12px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  box-shadow:0 -10px 40px rgba(0,0,0,.4);animation:gore .22s ease-out}
@media(min-width:781px){.bzs{left:auto;right:16px;bottom:84px;width:380px;border-radius:18px;max-height:70vh}}
.bzh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px}
.bzlab{font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 6px}
.bzr{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;border-radius:12px;background:var(--bg);white-space:normal;min-height:56px}
.bzr.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,var(--bg))}
.bzr .av{width:38px;height:38px;font-size:17px}.bzr .av.mali{background:var(--bd);color:var(--tx)}
.bzt{display:flex;flex-direction:column;flex:1;min-width:0}.bzt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bzq{margin-top:6px}

/* ---------- 10. ANIMACIJE (blage; isključe se ako je na uređaju uključeno "smanji pokrete") ---------- */
@keyframes ulaz{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes otvori{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes sakrij{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
@keyframes gore{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes akt{0%{box-shadow:0 0 0 7px color-mix(in srgb,var(--akt) 0%,transparent),0 0 0 2px color-mix(in srgb,var(--akt) 70%,transparent)}100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--akt) 40%,transparent)}}
@keyframes izDesna{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes izLijeva{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes odbij{0%,100%{transform:none}30%{transform:translateX(-10px)}60%{transform:translateX(8px)}}
/* novi ekran (drugi klijent, program…) lagano uplovi */
#main.ulaz>*{animation:ulaz .32s ease-out both}
#main.ulaz>*:nth-child(2){animation-delay:.03s}#main.ulaz>*:nth-child(3){animation-delay:.06s}#main.ulaz>*:nth-child(4){animation-delay:.09s}#main.ulaz>*:nth-child(5){animation-delay:.12s}#main.ulaz>*:nth-child(n+6){animation-delay:.15s}
/* dan se otvara / zatvara, nova vježba, završena sedmica, grupa u pregledu članarina */
.day.anim>:not(.dh){animation:otvori .25s ease-out both}
.day.zatv>:not(.dh){animation:sakrij .2s ease-in both}
.day.zatv .dh .str{transform:rotate(-90deg)}
.ex.nova{animation:otvori .25s ease-out both}
.tabs button.gotovo.pop{animation:pop .35s ease-out}
.clg.anim>.cll,.clg.anim>p{animation:otvori .22s ease-out both}
/* svajp sedmica: dani uđu s desne (naredna) ili lijeve strane (prethodna) */
.dani.iz-desna{animation:izDesna .25s ease-out}.dani.iz-lijeva{animation:izLijeva .25s ease-out}.dani.odbij{animation:odbij .3s ease-out}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 11. TELEFON (uži ekran) ---------- */
@media(max-width:780px){
  input,select,textarea,button{font-size:16px}button{min-height:40px}  /* 16px: inače iPhone zumira kad se dodirne polje */
  .app{grid-template-columns:1fr;padding:8px 8px 90px;gap:10px}
  .card{padding:10px 8px}
  .sec{padding:12px 10px;margin:12px 0}
  .bar button{white-space:normal;text-align:left}
  .dug,.tbx{display:none}.kr{display:inline}
  /* gornja traka i kartice klijenata */
  .top{gap:6px;padding:6px 8px}.top .tl{height:24px}
  #mn{display:inline-block;min-height:36px;padding:4px 10px}
  .tb{padding:3px 4px 3px 10px;max-width:130px}.tb button.x{min-height:28px;padding:0 4px}
  #sy{max-width:28px;overflow:hidden}#env{font-size:10px;padding:2px 6px}
  /* lista klijenata se otvara preko ekrana dugmetom ☰ */
  #side{display:none}
  #side.open{display:block;position:fixed;left:8px;right:8px;top:calc(56px + env(safe-area-inset-top,0px));max-height:calc(100vh - 72px);overflow-y:auto;z-index:30;box-shadow:0 10px 40px rgba(0,0,0,.45)}
  .hero .av{width:42px;height:42px;font-size:20px}
  .wtabs button{padding:6px 12px}
  /* naslov dana: u prvom redu naziv, u drugom dugmad */
  .dh{flex-wrap:wrap;gap:4px}.dh .dnm{flex:1 1 calc(100% - 110px);min-width:0}.dh .dbr{display:none}
  .dh button{min-height:36px;padding:4px 10px}.dh button.ured{min-height:0;padding:0}
  /* vježba i tabela setova */
  .ex{padding:6px}
  .eh{gap:5px;flex-wrap:wrap}.eh .w{min-width:0;flex:1 1 150px}
  .ex th,.ex td{padding-right:4px}
  td select.n{width:56px}td select.kg{width:74px}td input.n{width:64px}
  button.kgn{font-size:11px;padding:2px 4px;min-height:34px}.ex td button.x{padding:2px 3px}
  button.mali{min-height:34px}
  input.nap,select.pz,textarea.kru,textarea.pov,#bzq,#q{font-size:16px}
}
/* vrlo uzak ekran: članarina u manje kolona */
@media(max-width:600px){
  .pgr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mjes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sec.pay .g{grid-template-columns:1fr}  /* paket, od i do: svaki u svom redu da se mjesec vidi cijeli */
}