@keyframes mr-pulse-anim{0%,100%{opacity:1}50%{opacity:.3}}
.mr-pulse{animation:mr-pulse-anim 1.2s ease-in-out infinite;}
/* Bridge status strip */
.bridge-strip{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:12px 18px;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r2);margin-bottom:14px;font-size:0.86rem;color:var(--mist);box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.bridge-strip:empty{display:none;}
.bs-item{display:inline-flex;align-items:center;gap:8px;}
.bs-item strong{color:var(--snow);font-weight:600;font-variant-numeric:tabular-nums;}
.bs-item.bs-muted strong{color:var(--mist);}
.bs-sep{width:1px;height:14px;background:var(--line2);}
.bs-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.bs-dot-online{background:var(--teal);box-shadow:0 0 0 3px rgba(39,174,96,0.18);}
html.dark .bs-dot-online{box-shadow:0 0 0 3px rgba(20,184,166,0.18);}
.bs-dot-offline{background:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,0.16);}
.bs-dot-idle{background:var(--fog);opacity:0.6;}
@keyframes bs-pulse-anim{0%,100%{box-shadow:0 0 0 3px rgba(39,174,96,0.18)}50%{box-shadow:0 0 0 6px rgba(39,174,96,0.05)}}
.bs-pulse{animation:bs-pulse-anim 2s ease-in-out infinite;}
html, body { overflow: hidden; height: 100%; overscroll-behavior-y: none; }
:root {
  /* Premium light warm neutrals */
  --ink:#EDF2F3;--ink2:#FFFFFF;--ink3:#F6F9F9;--ink4:#DFE7E9; /* 11.10.: hladna svijetla s primjesom teala umjesto bež (bež i krem su tipičan AI izgled) */
  /* --card koristi 14 mjesta (modali, izbornici); bez njega su bili prozirni (UX-C05-1, UX-C06-1) */
  --card:#FFFFFF;
  /* Borders warm subtle */
  --line:rgba(0,0,0,0.06);--line2:rgba(0,0,0,0.1);
  /* Accent medical teal */
  --gold:#16776C;--gold2:#158174;--gold-dim:rgba(26,138,125,0.06);--gold-glow:rgba(26,138,125,0.12);
  /* Text hierarchy */
  --snow:#2D3748;--mist:#535965;--fog:#5f6776; /* UI-16: --fog 4,79:1 na --ink (bio 4,14:1) */
  /* Status */
  --red:#C0392B;--teal:#1A7741;--amber:#94690D; /* UI-16 val 12: --teal 4,95:1 na --ink (bio 4,39:1) */
  --kpi-plava:#2F5FC4;--kpi-ljub:#6D4BC4; /* Marketing pregled KPI: 5,9 i 6,1:1 na bijeloj (bili #5b8def 3,23 i #a78bfa 2,72) */
  /* Radii */
  --r:8px;--r2:12px;--r3:16px;
  /* Typography system stack */
  --fd:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--fb:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Spacing generous */
  --sp-xs:8px;--sp-sm:14px;--sp-md:18px;--sp-lg:24px;--sp-xl:32px;
  /* Timing */
  --ease:cubic-bezier(0.16,1,0.3,1);--duration:150ms;
  /* Sidebar navy */
  --sb:#1E2A3A;--sb-line:rgba(255,255,255,0.08);--sb-text:rgba(255,255,255,0.6);--sb-muted:rgba(255,255,255,0.52);
  /* Zubna karta. Boje su obitelji, ne duga: crvena = patologija, plava = restauracija,
     jantar = protetika, ljubicasta = implantat, teal = endodoncija.
     Zdrav zub NEMA boju, samo caklinu i konturu, da oko ide na patologiju a ne na zdravlje. */
  /* Prava zubna boja, ne bijela. Pravi zub je zuci pri vratu jer ondje prosijava
     dentin, a prema bridu prozirniji i hladniji jer je caklina tanja. Otud gradijent
     cerv (topli) → body → inc → edge (hladan, prozirni brid). Vita A2 raspon. */
  --enamel-cerv:#E7DABB;--enamel-body:#F2ECDC;--enamel-inc:#FAF8F2;--enamel-edge:#E4E8EE;
  --enamel:#F2ECDC;--enamel-line:#BFB39A;
  --root-apex:#D2BF9B;--root-cerv:#E9DCC1;--tooth-root:#E4D7BC;--tooth-root-line:#C3B294;
  /* Desni na vratu. Bez njih zub izgleda kao izvaden, a ne kao zub u ustima. */
  --gingiva:#DFA098;--gingiva-hi:#EBB9B2;--gingiva-line:#C4837B;
  --st-caries:#C0392B;--st-filled:#4A7BA7;--st-sealant:#7FA8C9;
  --st-crown:#B07D10;--st-bridge:#8C6114;--st-veneer:#9B7FB8;
  --st-implant:#6B5B95;--st-endo:#1A8A7D;--st-gone:#B4ADA2;
}
html.dark{
  /* Zub na tamnoj pozadini ostaje zub: prigusen, ali i dalje boje slonovace.
     Da ga zatamnimo do pozadine izgledao bi kao kamen, a on je subjekt ekrana. */
  --enamel-cerv:#B3A488;--enamel-body:#CDC4AE;--enamel-inc:#DBD5C6;--enamel-edge:#BFC5CE;
  --enamel:#CDC4AE;--enamel-line:#877D67;
  --root-apex:#96886C;--root-cerv:#AFA285;--tooth-root:#A69A7E;--tooth-root-line:#7D7259;
  --gingiva:#9E6560;--gingiva-hi:#B57C76;--gingiva-line:#7C4A46;
  --st-caries:#E05C4C;--st-filled:#6FA3D0;--st-sealant:#A5C8E4;
  --st-crown:#D9A72B;--st-bridge:#B98A2E;--st-veneer:#C0A5D9;
  --st-implant:#9B8BC4;--st-endo:#2EC4B6;--st-gone:#5A5A62;
  --ink:#09090b;--ink2:#111113;--ink3:#18181b;--ink4:#1f1f22;
  --card:#111113;
  --line:rgba(255,255,255,0.06);--line2:rgba(255,255,255,0.1);
  --gold:#2EC4B6;--gold2:#26A69A;--gold-dim:rgba(46,196,182,0.08);--gold-glow:rgba(46,196,182,0.15);
  --snow:#ededed;--mist:#a0a0a0;--fog:#868686;
  --red:#D7584A;--teal:#14b8a6;--amber:#f59e0b;
  --kpi-plava:#7AA2F7;--kpi-ljub:#B69CFB;
  --sb:#0D1117;--sb-line:rgba(255,255,255,0.06);--sb-text:rgba(255,255,255,0.6);--sb-muted:rgba(255,255,255,0.52);
}
/* Light is now default. html.light class kept for backward compat with existing selectors */
html.dark .btn-gold{color:#111;}
html.dark .nav-btn:hover{background:rgba(255,255,255,0.04);}
html.dark .nav-btn.active{background:var(--gold-dim);}
html.dark .card:hover{border-color:var(--line2);}
html.dark ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);}
html.dark ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15);}
html.dark .mo{background:rgba(0,0,0,0.6);}
html.dark .mc{background:var(--ink2);box-shadow:0 8px 30px rgba(0,0,0,0.3);}
.theme-toggle{background:none;border:none;cursor:pointer;color:var(--sb-text);padding:4px;border-radius:var(--r);transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
.theme-toggle:hover{color:#fff;background:rgba(255,255,255,0.08);}
.theme-toggle svg{width:16px;height:16px;}
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;}
body{font-family:var(--fb);background:var(--ink);color:var(--snow);min-height:100vh;display:flex;overflow:hidden;touch-action:manipulation;}
.sidebar{width:240px;background:var(--sb);border-right:1px solid var(--sb-line);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;}
.sidebar::after{content:none;}
.sb-brand{padding:14px 10px 12px;border-bottom:1px solid var(--sb-line);display:flex;align-items:center;gap:8px;overflow:hidden;}
.sb-icon{width:32px;height:32px;background:var(--gold);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:none;flex-shrink:0;color:#fff;}
.sb-icon svg{width:18px;height:18px;stroke-width:2;}
.sb-name{font-family:var(--fb);font-size:0.9375rem;font-weight:600;color:#fff;line-height:1.1;letter-spacing:-0.01em;}
.sb-sub{font-size:0.625rem;color:var(--sb-muted);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px;}
.sb-nav{flex:1;min-height:0;padding:12px 8px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;scrollbar-gutter:stable;}
.sb-nav::-webkit-scrollbar{width:6px;}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:99px;}
.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22);}
.nav-sec{font-size:0.6875rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--sb-muted);padding:16px 10px 4px;font-weight:500;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:6px;transition:color var(--duration);}
.nav-sec:hover{color:var(--sb-text);}
.nav-sec .nav-arrow{font-size:0.5rem;transition:transform var(--duration);margin-right:2px;color:var(--gold);}
.nav-sec.collapsed .nav-arrow{transform:rotate(-90deg);}
.nav-group{display:flex;flex-direction:column;gap:1px;}
.nav-group.collapsed{display:none;}
.nav-sec.parent{font-size:0.6875rem;letter-spacing:0.06em;color:var(--sb-muted);padding:20px 10px 4px;font-weight:600;}
.nav-sec.parent:hover{color:var(--sb-text);}
.nav-group .nav-sec{padding-left:12px;}
.nav-group .nav-group{padding-left:6px;}
.nav-btn{background:none;border:none;color:var(--sb-text);font-family:var(--fb);font-size:0.8125rem;font-weight:400;padding:7px 10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;text-align:left;transition:background var(--duration),color var(--duration);position:relative;}
.nav-btn:hover{background:rgba(255,255,255,0.06);color:#fff;}
.nav-btn.active{background:rgba(26,138,125,0.15);color:#fff;font-weight:500;}
.nav-btn.active::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:2px;background:var(--gold);border-radius:0 2px 2px 0;}
.nav-ic{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-style:normal;}
svg.nav-ic{stroke-width:1.5;}
.news-pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-left:auto;flex-shrink:0;animation:newsPulse 2s ease-in-out infinite;}
.mhub-card:hover{background:var(--ink4)!important;border-color:var(--gold-dim)!important;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12);}
@keyframes newsPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(26,138,125,0.5);}50%{opacity:0.7;box-shadow:0 0 8px 3px rgba(26,138,125,0.3);}}
.sb-foot{padding:12px 12px 16px;border-top:1px solid var(--sb-line);flex-shrink:0;}
.branch-switcher{padding:8px 10px 10px;}
.branch-select{width:100%;padding:8px 28px 8px 12px;background-color:transparent!important;border:1px solid var(--sb-line)!important;border-radius:6px;color:var(--sb-text)!important;font-family:var(--fb);font-size:0.8125rem;font-weight:400;cursor:pointer;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;transition:background var(--duration),color var(--duration),border-color var(--duration);background-image:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%2210%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22rgba(255,255,255,0.4)%22 stroke-width=%222%22><polyline points=%226 9 12 15 18 9%22/></svg>')!important;background-repeat:no-repeat!important;background-position:right 10px center!important;}
.branch-select:hover:not(:disabled){background-color:rgba(255,255,255,0.06)!important;color:#fff!important;}
.branch-select:focus{outline:none;border-color:var(--sb-text)!important;}
.branch-select:disabled{cursor:default;opacity:0.75;}
.branch-select option{background:var(--sb);color:#fff;padding:8px;}
.wa-status{display:flex;align-items:center;gap:8px;font-size:0.76rem;cursor:pointer;padding:6px 0;}
.wa-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background 0.3s;}
.wa-dot.connected{background:var(--teal);box-shadow:0 0 8px var(--teal);animation:pulse 2s infinite;}
.wa-dot.qr{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 0.8s infinite;}
.wa-dot.disconnected{background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.var-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px;}
.vc{background:rgba(255,255,255,0.04);border:1px solid var(--line);color:var(--gold);font-size:0.67rem;padding:2px 8px;border-radius:99px;cursor:pointer;transition:all 0.12s;font-family:monospace;}
.vc:hover{background:var(--gold-dim);border-color:var(--gold);}
.main{margin-left:240px;flex:1;padding:32px 36px;overflow-y:auto;height:100vh;}
.page{display:none;animation:fadeUp 0.2s var(--ease);}
.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ph{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}
.ph-eyebrow{font-size:0.6875rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--mist);font-weight:500;margin-bottom:4px;}
.ph-title{font-family:var(--fb);font-size:1.75rem;font-weight:600;color:var(--snow);line-height:1.15;letter-spacing:-0.02em;}
.ph-sub{font-size:0.8125rem;color:var(--mist);margin-top:4px;font-weight:400;}
.dash-sec{font-size:0.7rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--fog);margin:22px 0 8px;padding-left:2px;}
.dash-sec:first-child{margin-top:0;}
#page-dashboard>div>.dash-sec:first-child{margin-top:22px;}
.dash-link{cursor:pointer;transition:color .15s ease;}
.dash-link:hover{color:var(--gold);}
#page-dashboard>.g2,#page-dashboard>.card,#page-dashboard>.stats{margin-bottom:14px;}
.rev-chart{display:flex;gap:6px;padding:8px 0;flex-direction:column;}
.rev-chart-bars{display:flex;align-items:flex-end;gap:2px;height:100px;}
.rev-chart-labels{display:flex;gap:2px;}
.rev-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;}
.rev-bar{width:100%;border-radius:3px 3px 0 0;background:var(--gold);min-height:2px;transition:height 0.3s;}
.rev-bar-label{font-size:0.66rem;color:var(--mist);}
.rev-bar-val{font-size:0.68rem;color:var(--gold);font-weight:600;}
.rev-label-wrap{flex:1;text-align:center;min-width:0;}
.th-load-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px;}
.th-load-fill{height:100%;border-radius:3px;transition:width 0.3s;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-sm);margin-bottom:var(--sp-md);}
.sc{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r2);padding:20px;position:relative;overflow:hidden;transition:border-color var(--duration),transform .15s ease,box-shadow .15s ease;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.sc[onclick]{cursor:pointer;}
.sc[onclick]:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.sc:hover{border-color:var(--line2);}
.sc-icon{font-size:1.2rem;margin-bottom:12px;display:block;}
svg.sc-icon{width:22px;height:22px;stroke-width:1.5;margin-bottom:12px;}
.sc-val{font-family:var(--fb);font-size:2rem;font-weight:600;color:var(--snow);line-height:1;margin-bottom:4px;letter-spacing:-0.02em;}
.sc-lbl{font-size:0.75rem;color:var(--mist);font-weight:400;}

/* ─── Dashboard preslagivanje ────────────────────────────────────────────────
   Cetiri forme umjesto jedne kartice za sve. Forma nosi znacenje:
   alert = trazi akciju, hero = brojka s trendom, strip = sve je uredu,
   fold = gleda se rijetko. Prefiks dl- (dashboard layout). */

/* Forma 1: alert traka. Postoji samo kad brojka nije nula. */
.dl-alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.dl-alerts:empty{display:none;}
.dl-alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 13px;border-radius:var(--r);border-left:3px solid var(--amber);background:rgba(176,125,16,0.08);}
html.dark .dl-alert{background:rgba(245,158,11,0.12);}
.dl-alert.dl-alert-red{border-left-color:var(--red);background:rgba(192,57,43,0.07);}
html.dark .dl-alert.dl-alert-red{background:rgba(192,57,43,0.14);}
.dl-alert.dl-alert-gold{border-left-color:var(--gold);background:var(--gold-dim);}
.dl-alert-ico{width:16px;height:16px;flex-shrink:0;stroke-width:1.6;}
.dl-alert-txt{flex:1;min-width:140px;font-size:0.82rem;color:var(--snow);}
.dl-alert-txt b{font-weight:600;font-variant-numeric:tabular-nums;}
.dl-alert-btn{font-family:var(--fb);font-size:0.72rem;font-weight:600;color:var(--gold);background:transparent;border:1px solid var(--line2);border-radius:var(--r);padding:6px 10px;cursor:pointer;white-space:nowrap;transition:border-color var(--duration),background var(--duration);}
.dl-alert-btn:hover{border-color:var(--gold);background:var(--gold-dim);}
/* Sve preko tri trake ide u jedan tihi redak, da alert zona ne proguta ekran. */
.dl-alert-more{display:flex;align-items:center;flex-wrap:wrap;gap:0 12px;padding:7px 13px;font-size:0.74rem;color:var(--mist);}
.dl-alert-more-item{cursor:pointer;white-space:nowrap;transition:color var(--duration);}
.dl-alert-more-item:hover{color:var(--gold);}

/* Forma 2: hero kartice. Samo brojke koje imaju trend i sparkline. */
.dl-menu-wrap{position:relative;display:inline-block;}
.dl-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:600;min-width:180px;background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:5px;display:flex;flex-direction:column;}
.dl-menu-item{font-family:inherit;font-size:0.82rem;font-weight:500;color:var(--snow);background:transparent;border:none;border-radius:var(--r);padding:9px 12px;text-align:left;cursor:pointer;white-space:nowrap;}
.dl-menu-item:hover{background:var(--gold-dim);color:var(--gold);}
.dl-today{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r2);padding:12px 16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.dl-today-next-lbl{font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);flex-shrink:0;}
.dl-today-time{font-size:0.95rem;font-weight:600;color:var(--snow);font-variant-numeric:tabular-nums;flex-shrink:0;}
.dl-today-name{font-size:0.9rem;font-weight:600;color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch;}
.dl-today-det{font-size:0.78rem;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;}
.dl-today-more{font-size:0.74rem;color:var(--fog);white-space:nowrap;font-variant-numeric:tabular-nums;}
.dl-today-quiet{font-size:0.84rem;color:var(--mist);flex:1;}
.dl-today-btn{font-family:inherit;font-size:0.74rem;font-weight:600;color:var(--gold);background:transparent;border:1px solid var(--line2);border-radius:var(--r);padding:6px 11px;cursor:pointer;margin-left:auto;white-space:nowrap;transition:border-color var(--duration);}
.dl-today-btn:hover{border-color:var(--gold);}
.dl-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-sm);margin-bottom:14px;}
@media (max-width:1100px){.dl-hero{grid-template-columns:repeat(2,1fr);}}
.dl-hc{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r2);padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:8px;min-width:0;transition:border-color var(--duration),transform .15s ease,box-shadow .15s ease;}
.dl-hc[onclick]{cursor:pointer;}
.dl-hc[onclick]:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.dl-hc-lbl{font-size:0.68rem;color:var(--mist);letter-spacing:0.03em;}
.dl-hc-val{font-family:var(--fb);font-size:1.75rem;font-weight:600;color:var(--snow);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.dl-hc-trend{font-size:0.7rem;display:flex;align-items:center;gap:4px;color:var(--mist);font-variant-numeric:tabular-nums;}
.dl-hc-trend.up{color:var(--teal);}
.dl-hc-trend.down{color:var(--red);}

/* Forma 3: statusna traka. Brojke koje samo potvrduju da nema posla.
   Namjerno bez kutije: tihi tekstualni redak, da se ne natjece s karticama. */
.dl-strip{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;padding:2px 6px;margin-bottom:10px;font-size:0.74rem;color:var(--mist);}
.dl-strip-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;transition:color var(--duration);}
.dl-strip-item:hover{color:var(--gold);}
.dl-strip-item b{color:var(--snow);font-weight:600;font-variant-numeric:tabular-nums;}
.dl-strip-sep{width:1px;height:12px;background:var(--line2);flex-shrink:0;}
.dl-strip-ok{color:var(--teal);font-weight:600;white-space:nowrap;}

/* Forma 4: sklopivo. Troskovi i rast se gledaju krajem mjeseca, ne ujutro. */
.dl-fold{border:1px solid var(--line);border-radius:var(--r2);background:var(--ink2);margin-bottom:14px;overflow:hidden;}
.dl-fold>summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;align-items:center;gap:8px;font-size:0.78rem;color:var(--mist);transition:color var(--duration);}
.dl-fold>summary::-webkit-details-marker{display:none;}
.dl-fold>summary:hover{color:var(--gold);}
.dl-fold>summary .dl-fold-chev{width:13px;height:13px;stroke:var(--fog);fill:none;stroke-width:2;flex-shrink:0;transition:transform var(--duration);}
.dl-fold[open]>summary .dl-fold-chev{transform:rotate(180deg);}
.dl-fold>summary .dl-fold-hint{margin-left:auto;font-size:0.7rem;color:var(--fog);font-variant-numeric:tabular-nums;}
.dl-fold-body{padding:0 14px 14px;}
.dl-fold-body>.dash-sec:first-child{margin-top:6px;}
.dl-fold-body>.stats:last-child{margin-bottom:0;}

/* Liste termina na dashboardu: prozor visok cetiri reda, ostalo scroll.
   Red je izmjeren na 49px lijevo (ima checkbox i gumbe) i 55px desno,
   pa 232px pokaze cetiri puna reda i vrh petog u obje liste. Taj virak
   je namjeran: bez njega se ne vidi da ispod ima jos termina. */
#dash-today-timeline,
#dash-appointments{max-height:232px;}
/* Prazna lista ne treba drzati visinu prozora. */
#dash-today-timeline:has(.empty),
#dash-appointments:has(.empty){max-height:none;}

/* Tabovi: 9 sekcija grupiranih u 4 teme, jutarnji dio ostaje iznad njih. */
.dl-tabs{display:flex;align-items:center;gap:2px;margin:18px 0 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.dl-tabs::-webkit-scrollbar{display:none;}
.dl-tab{
  font-family:var(--fb);font-size:0.82rem;font-weight:500;color:var(--mist);
  background:transparent;border:none;border-bottom:2px solid transparent;
  padding:9px 14px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  transition:color var(--duration),border-color var(--duration);margin-bottom:-1px;
}
.dl-tab:hover{color:var(--snow);}
.dl-tab[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold);font-weight:600;}
.dl-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:var(--r) var(--r) 0 0;}
.dl-tab-badge{
  font-size:0.66rem;font-weight:600;line-height:1;padding:3px 6px;border-radius:999px;
  background:var(--gold-dim);color:var(--gold);font-variant-numeric:tabular-nums;
}
html:not(.dark) .dl-tab-badge{color:#14695F;} /* UI-16 val 12: 5,3:1 (bio 4,46:1) */
.dl-tab-badge.dl-badge-quiet{background:var(--line);color:var(--fog);}
.dl-tabpanel[hidden]{display:none;}
.dl-tabpanel>.dash-sec:first-child{margin-top:4px;}
.dl-tabpanel:focus{outline:none;}
.dl-tab-empty{padding:34px 16px;text-align:center;color:var(--fog);font-size:0.82rem;}

@media (max-width:760px){
  .dl-hero{grid-template-columns:repeat(2,1fr);}
  .dl-hc{padding:13px 14px;}
  .dl-hc-val{font-size:1.35rem;}
  .dl-strip{gap:6px 10px;font-size:0.7rem;}
  .dl-strip-sep{display:none;}
  .dl-strip-item{background:var(--ink3);border-radius:999px;padding:3px 10px;}
  .dl-tabs{margin:14px 0 12px;}
  .dl-tab{padding:9px 11px;font-size:0.78rem;}
  .dl-today{padding:10px 12px;}
  .dl-today-det{display:none;}
}

/* Skeleton dok podaci ne stignu: staticni u HTML-u, render ih zamijeni */
.dl-hc-skel{min-height:86px;position:relative;overflow:hidden;}
.dl-hc-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--line),transparent);animation:dl-shimmer 1.4s infinite;}
@keyframes dl-shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}

/* Popunjenost: tanki bar ispod postotka */
.dl-occ-bar{height:4px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:2px;}
.dl-occ-bar span{display:block;height:100%;border-radius:999px;background:var(--gold);transition:width .4s ease;}

.card{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r2);padding:var(--sp-lg);transition:border-color var(--duration),box-shadow var(--duration);box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.card--flush{padding:0;overflow:hidden;}
.stat-card{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-sm);text-align:center;}
.stat-card .stat-val{font-family:var(--fb);font-weight:600;line-height:1;letter-spacing:-0.02em;}
.stat-card .stat-lbl{font-size:0.68rem;color:var(--fog);text-transform:uppercase;letter-spacing:0.04em;margin-top:2px;}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.ct{font-family:var(--fb);font-size:0.9375rem;font-weight:600;color:var(--snow);letter-spacing:-0.01em;}
.cs{font-size:0.75rem;color:var(--mist);margin-top:2px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.btn{padding:8px 16px;border-radius:var(--r);border:none;font-family:var(--fb);font-size:0.8125rem;font-weight:500;cursor:pointer;transition:opacity var(--duration),background var(--duration),color var(--duration),border-color var(--duration);display:inline-flex;align-items:center;gap:6px;}
.btn-gold{background:var(--gold);color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(26,138,125,0.2);}
.btn-gold:hover{opacity:0.9;box-shadow:0 2px 6px rgba(26,138,125,0.3);}
.btn-ghost{background:transparent;color:var(--mist);border:1px solid var(--line);}
.btn-ghost:hover{background:rgba(255,255,255,0.04);color:var(--snow);border-color:var(--line2);}
.btn-danger{background:rgba(192,57,43,0.08);color:var(--red);border:1px solid rgba(192,57,43,0.15);}
.btn-danger:hover{background:rgba(192,57,43,0.14);}
.btn-sm{padding:6px 12px;font-size:0.75rem;}
.btn-xs{padding:4px 10px;font-size:0.6875rem;}
.em-camp-filter-btn.active{background:var(--gold);color:#1a1207;font-weight:600;}
.card:hover{border-color:var(--line2);}
.fg{margin-bottom:14px;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fr.fr3{grid-template-columns:1fr 1fr 1fr;}
.chip{background:var(--ink3);border:1px solid var(--line);border-radius:var(--r);color:var(--mist);font-size:0.82rem;padding:8px 12px;cursor:pointer;transition:all 0.15s;font-family:var(--fb);}
.chip:hover{border-color:var(--gold);color:var(--snow);}
.chip.active{background:var(--gold);border-color:var(--gold);color:#000;font-weight:600;}
.dx-chip{background:rgba(26,138,125,0.05);border:1px solid var(--line);color:var(--mist);transition:all 0.15s;}
.dx-chip.dx-active{background:rgba(26,138,125,0.2);border-color:var(--gold);color:var(--gold);}
label{display:block;font-size:0.72rem;color:var(--mist);margin-bottom:6px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;}
input,select,textarea{width:100%;background:var(--ink3);border:1px solid var(--line);border-radius:var(--r);color:var(--snow);font-family:var(--fb);font-size:0.875rem;font-weight:400;padding:9px 12px;outline:none;transition:border-color var(--duration),box-shadow var(--duration);}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-dim);}
input::placeholder{color:var(--fog);}
textarea{resize:vertical;min-height:80px;}
select option{background:var(--ink3);}
input[type=checkbox]{width:auto;accent-color:var(--gold);}
label:has(> input[type=checkbox]),label:has(> input[type=radio]),input[type=checkbox]+label,input[type=radio]+label{text-transform:none;letter-spacing:0;font-size:0.86rem;color:var(--snow);}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){display:flex;align-items:center;gap:8px;cursor:pointer;}
input[type=checkbox],input[type=radio]{width:auto !important;flex-shrink:0;} /* UI-17: na mobitelu kvačica nije bila u retku s tekstom */
.tw{overflow-x:auto;overflow-y:auto;max-height:70vh;}
table{width:100%;border-collapse:collapse;font-size:0.8125rem;}
th{text-align:left;padding:var(--sp-sm) var(--sp-md);color:var(--fog);font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.04em;font-weight:500;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ink2);z-index:2;}
td{padding:var(--sp-sm) var(--sp-md);border-bottom:1px solid var(--line);vertical-align:middle;transition:background var(--duration);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(0,0,0,0.015);}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:0.6875rem;font-weight:500;letter-spacing:0.01em;border:none;}
.badge-stalni{background:rgba(26,138,125,0.1);color:var(--gold);}
.badge-podsjetnik{background:rgba(245,158,11,0.1);color:var(--amber);}
.badge-opcenito{background:rgba(20,184,166,0.1);color:var(--teal);}
.badge-pending{background:rgba(245,158,11,0.1);color:var(--amber);}
.badge-done{background:rgba(20,184,166,0.1);color:var(--teal);}
.badge-failed{background:rgba(192,57,43,0.1);color:var(--red);}
.badge-cancelled{background:rgba(255,255,255,0.05);color:var(--fog);}
.badge-sent{background:rgba(20,184,166,0.1);color:var(--teal);}
.badge-scheduled{background:rgba(245,158,11,0.1);color:var(--amber);}
.badge-completed{background:rgba(20,184,166,0.1);color:var(--teal);}
.badge-no_show{background:rgba(192,57,43,0.1);color:var(--red);}
.badge-checked_in{background:rgba(139,92,246,0.1);color:#7D48F5;}
.badge-active{background:rgba(20,184,166,0.1);color:var(--teal);}
.badge-nacrt{background:rgba(255,255,255,0.05);color:var(--fog);}
.badge-issued{background:rgba(245,158,11,0.1);color:var(--amber);}
.badge-paid{background:rgba(20,184,166,0.1);color:var(--teal);}
.badge-crm-novi{background:rgba(245,158,11,0.1);color:var(--amber);}
.badge-crm-kontaktiran{background:rgba(26,138,125,0.1);color:var(--gold);}
.badge-crm-zakazan{background:rgba(26,138,125,0.15);color:var(--gold);}
.badge-crm-dosao{background:rgba(20,184,166,0.1);color:var(--teal);}
.badge-crm-stalni{background:rgba(20,184,166,0.15);color:var(--teal);font-weight:600;}
.badge-crm-izgubljeno{background:rgba(192,57,43,0.1);color:var(--red);}
.loyalty-bar{height:8px;background:var(--ink3);border-radius:4px;overflow:hidden;margin-top:4px;}
.loyalty-fill{height:100%;background:var(--gold);border-radius:4px;transition:width 0.3s;}
.pkg-progress{height:6px;background:var(--ink3);border-radius:3px;overflow:hidden;margin-top:4px;}
.pkg-fill{height:100%;background:var(--teal);border-radius:3px;}
.kt-card{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r2);padding:var(--sp-lg);text-align:center;transition:border-color var(--duration);cursor:pointer;position:relative;overflow:hidden;}
.kt-card:hover{border-color:var(--line2);}
.kt-card.slobodan{border-color:rgba(20,184,166,0.3);}
.kt-card.slobodan:hover{border-color:var(--teal);}
.kt-card.u_najmu{border-color:rgba(192,57,43,0.3);}
.kt-card.u_najmu:hover{border-color:var(--red);}
.kt-card.ne-stigli{border-color:rgba(234,140,40,0.35);background:rgba(234,140,40,0.04);}
.kt-card.ne-stigli:hover{border-color:#ea8c28;}
.kt-card.ne-stigli .kt-num{color:#ea8c28;}
.kt-num{font-family:var(--fb);font-size:1.75rem;font-weight:700;color:var(--gold);line-height:1;letter-spacing:-0.02em;}
.kt-label{font-size:0.78rem;color:var(--mist);margin-top:6px;font-weight:500;}
.kt-status{display:inline-block;padding:4px 14px;border-radius:20px;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-top:12px;}
.kt-status.slobodan{background:rgba(78,205,196,0.15);color:#4ecdc4;}
.kt-status.u_najmu{background:rgba(239,83,80,0.15);color:#ef5350;}
.kt-status.ne-stigli{background:rgba(234,140,40,0.15);color:#ea8c28;}
.kt-btn-active-green{background:#4ecdc4 !important;color:#111 !important;border-color:#4ecdc4 !important;}
.kt-btn-active-red{background:#ef5350 !important;color:#fff !important;border-color:#ef5350 !important;}
.kt-btn-active-yes{background:#4ecdc4 !important;color:#111 !important;border-color:#4ecdc4 !important;}
.kt-btn-active-no{background:#ef5350 !important;color:#fff !important;border-color:#ef5350 !important;}
.kt-card .kt-info{font-size:0.7rem;color:var(--fog);margin-top:8px;line-height:1.4;}
.kt-card .kt-contract{display:inline-block;margin-top:6px;font-size:0.65rem;padding:2px 8px;border-radius:10px;font-weight:600;}
.kt-contract.yes{background:rgba(78,205,196,0.12);color:#4ecdc4;}
.kt-contract.no{background:rgba(239,83,80,0.1);color:#ef5350;}
/* Notification bell */
.notif-bell{position:relative;cursor:pointer;background:none;border:none;color:var(--sb-text);padding:4px;border-radius:var(--r);transition:all 0.2s;display:flex;align-items:center;}
.notif-bell:hover{color:#fff;background:rgba(255,255,255,0.08);}
.notif-bell svg{width:16px;height:16px;}
.notif-badge{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;font-size:0.58rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;animation:notifPulse 2s infinite;}
@keyframes notifPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
.notif-panel{position:fixed;top:0;right:-380px;width:360px;height:100vh;background:var(--ink2);border-left:1px solid var(--line);z-index:200;transition:right 0.25s var(--ease);display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,0.3);}
.notif-panel.open{right:0;}
.notif-panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.notif-panel-head h3{font-size:0.92rem;color:var(--snow);margin:0;}
.notif-panel-body{flex:1;overflow-y:auto;padding:8px;}
.notif-item{padding:14px 16px;border-radius:var(--r);cursor:pointer;transition:background 0.15s;border-left:3px solid transparent;margin-bottom:2px;}
.notif-item:hover{background:rgba(255,255,255,0.04);}
.notif-item.unread{background:rgba(26,138,125,0.06);border-left-color:var(--gold);}
.notif-item .ni-title{font-size:0.82rem;font-weight:600;color:var(--snow);margin-bottom:3px;}
.notif-item .ni-msg{font-size:0.76rem;color:var(--mist);line-height:1.4;}
.notif-item .ni-time{font-size:0.66rem;color:var(--fog);margin-top:6px;}
.notif-empty{text-align:center;color:var(--fog);padding:60px 20px;font-size:0.84rem;}
/* Klijent Dosje */
.dosje-header{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.dosje-avatar{width:64px;height:64px;border-radius:50%;background:var(--ink3);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:600;overflow:hidden;flex-shrink:0;border:2px solid var(--line);}
.dosje-avatar img{width:100%;height:100%;object-fit:cover;}
.dosje-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:20px;}
.dosje-stat{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-md);text-align:center;}
.dosje-stat .ds-val{font-size:1.25rem;font-weight:700;font-family:var(--fb);letter-spacing:-0.02em;}
.dosje-stat .ds-lbl{font-size:0.68rem;color:var(--fog);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px;}
.vas-chart{position:relative;height:160px;background:var(--ink3);border-radius:var(--r);padding:12px 16px;overflow:hidden;}
.vas-chart svg{width:100%;height:100%;}
.vas-dot{cursor:pointer;transition:r 0.15s;}
.vas-dot:hover{r:6;}
.timeline-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.timeline-item:last-child{border-bottom:none;}
.tl-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.82rem;}
.tl-icon.tl-appt{background:rgba(26,138,125,0.15);color:var(--gold);}
.tl-icon.tl-msg{background:rgba(78,205,196,0.15);color:var(--teal);}
.tl-icon.tl-note{background:rgba(168,130,255,0.15);color:#a882ff;}
.tl-icon.tl-doc{background:rgba(108,155,242,0.15);color:#6C9BF2;}
.pipeline-board{display:flex;gap:12px;padding-bottom:12px;min-height:500px;}
.pipeline-col{flex:1;min-width:0;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r2);display:flex;flex-direction:column;overflow:hidden;}
.pipeline-col-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.pipeline-col-head .pcol-title{font-size:0.82rem;font-weight:600;color:var(--snow);}
.pipeline-col-head .pcol-count{background:rgba(255,255,255,0.08);color:var(--mist);font-size:0.7rem;font-weight:700;min-width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.pipeline-col-head .pcol-dot{width:8px;height:8px;border-radius:50%;margin-right:8px;flex-shrink:0;}
.pipeline-col-body{flex:1;padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:80px;max-height:920px;transition:background 0.15s;}
.pipeline-col-body.drag-over{background:rgba(26,138,125,0.08);border-radius:0 0 var(--r2) var(--r2);}
.lead-card{background:var(--ink3);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-sm);cursor:grab;transition:border-color var(--duration);position:relative;}
.lead-card:hover{border-color:var(--line2);}
.lead-card:active{cursor:grabbing;opacity:0.8;}
.lead-card.dragging{opacity:0.3;}
.lead-card .lc-name{font-weight:600;font-size:0.86rem;color:var(--snow);margin-bottom:4px;}
.lead-card .lc-phone{font-size:0.76rem;color:var(--mist);}
.lead-card .lc-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.lead-card .lc-tag{font-size:0.66rem;padding:2px 8px;border-radius:10px;font-weight:500;}
.lc-src{background:rgba(26,138,125,0.12);color:var(--gold);}
.lc-svc{background:rgba(78,205,196,0.12);color:var(--teal);}
.lc-val{background:rgba(20,184,166,0.12);color:var(--teal);}
.lc-fu{background:rgba(240,160,80,0.15);color:var(--amber);font-size:0.64rem;margin-top:6px;display:flex;align-items:center;gap:4px;}
.lc-fu.overdue{background:rgba(192,57,43,0.15);color:var(--red);}
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
.social-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--ink2);border:1px solid var(--sc-border,var(--line));border-radius:var(--r2);padding:var(--sp-xl) var(--sp-lg);text-decoration:none;color:var(--snow);transition:border-color var(--duration);position:relative;overflow:hidden;}
.social-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sc-brand);opacity:0;transition:opacity var(--duration);}
.social-card:hover{border-color:var(--sc-brand,var(--line2));}
.social-card:hover::before{opacity:1;}
.social-card:hover .social-icon{background:var(--sc-brand);color:#fff;}
.social-card:hover .social-link{opacity:1;transform:translateY(0);}
.social-icon{width:48px;height:48px;border-radius:12px;background:var(--sc-bg);color:var(--sc-brand);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:background var(--duration),color var(--duration);}
.social-icon svg{width:24px;height:24px;}
.social-name{font-family:var(--fb);font-size:1rem;font-weight:600;margin-bottom:4px;letter-spacing:-0.01em;}
.social-desc{font-size:0.78rem;color:var(--mist);margin-bottom:14px;}
.social-link{font-size:0.76rem;color:var(--sc-brand);font-weight:500;opacity:0;transform:translateY(6px);transition:all 0.25s;}
.social-link span{display:inline-block;transition:transform 0.2s;}
.social-card:hover .social-link span{transform:translateX(4px);}
.task-card{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-md);display:flex;gap:var(--sp-sm);align-items:flex-start;}
.task-card.high{border-left:3px solid #ef5350;}
.task-card.normal{border-left:3px solid var(--gold);}
.task-card.low{border-left:3px solid var(--fog);}
.task-card.done{opacity:0.5;}
.task-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--fog);cursor:pointer;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;}
.task-check.checked{background:var(--teal);border-color:var(--teal);color:#111;}
.badge-paid{background:rgba(78,205,196,0.12);color:#237D77;padding:2px 10px;border-radius:12px;font-size:0.72rem;font-weight:600;}
.badge-unpaid{background:rgba(239,83,80,0.12);color:#BF1411;padding:2px 10px;border-radius:12px;font-size:0.72rem;font-weight:600;}
.badge-overdue{background:rgba(239,83,80,0.25);color:#BF1411;padding:2px 10px;border-radius:12px;font-size:0.72rem;font-weight:600;}
.inv-low{color:#ef5350;font-weight:600;}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.gallery-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);cursor:pointer;border:1px solid var(--line);transition:transform 0.15s;}
.gallery-img:hover{transform:scale(1.05);}
.bmi-gauge{display:flex;align-items:center;gap:20px;padding:14px;background:var(--ink3);border-radius:var(--r);border:1px solid var(--line);}
.bmi-value{font-family:var(--fb);font-size:2rem;font-weight:600;line-height:1;letter-spacing:-0.02em;}
.bmi-bar{flex:1;height:12px;border-radius:6px;background:linear-gradient(90deg,#4ecdc4 0%,#4ecdc4 25%,#E8B84E 25%,#E8B84E 50%,#f0a050 50%,#f0a050 75%,#e05555 75%,#e05555 100%);position:relative;}
.bmi-marker{position:absolute;top:-4px;width:4px;height:20px;background:var(--snow);border-radius:2px;transform:translateX(-50%);box-shadow:0 0 6px rgba(255,255,255,0.4);}
.bmi-labels{display:flex;justify-content:space-between;font-size:0.62rem;color:var(--fog);margin-top:2px;}
.compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;}
.compare-label{font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--fog);margin-bottom:6px;}
.compare-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);}
.doc-item{display:flex;gap:12px;align-items:center;padding:12px;background:var(--ink3);border:1px solid var(--line);border-radius:var(--r);margin-bottom:6px;transition:border-color 0.15s;}
.doc-item:hover{border-color:var(--gold);}
.doc-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.doc-icon.pdf{background:rgba(192,57,43,0.12);color:#e05555;}
.doc-icon.img{background:rgba(78,205,196,0.12);color:var(--teal);}
.doc-icon.other{background:rgba(144,151,171,0.12);color:var(--mist);}
.doc-type-badge{font-size:0.66rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:rgba(26,138,125,0.1);color:var(--gold);}
.waiting-item{display:flex;gap:var(--sp-md);align-items:center;padding:var(--sp-md);background:var(--ink3);border:1px solid var(--line);border-radius:var(--r2);margin-bottom:var(--sp-xs);}
.waiting-time{font-size:0.7rem;color:var(--amber);font-weight:600;}
.tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:0.6875rem;font-weight:500;margin:1px 2px;border:none;}
.tag-0{background:rgba(26,138,125,0.1);color:var(--gold);}
.tag-1{background:rgba(20,184,166,0.1);color:var(--teal);}
.tag-2{background:rgba(245,158,11,0.1);color:var(--amber);}
.tag-3{background:rgba(139,92,246,0.1);color:#8b5cf6;}
.tag-4{background:rgba(236,72,153,0.1);color:#ec4899;}
.tag-5{background:rgba(34,197,94,0.1);color:#22c55e;}
.tags-wrap{display:flex;flex-wrap:wrap;gap:2px;}
.tag-input-wrap{display:flex;flex-wrap:wrap;gap:5px;background:var(--ink3);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;min-height:40px;cursor:text;transition:all 0.15s;}
.tag-input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim);background:var(--ink4);}
.tag-input-wrap .tag{cursor:pointer;}.tag-input-wrap .tag:hover{opacity:0.7;text-decoration:line-through;}
.tag-input-wrap input{background:none;border:none;color:var(--snow);font-family:var(--fb);font-size:0.84rem;outline:none;flex:1;min-width:80px;padding:2px 4px;}
.fb-bar{display:flex;gap:var(--sp-sm);align-items:center;margin-bottom:var(--sp-md);flex-wrap:wrap;}
.fb-bar input{max-width:270px;}
.fb-bar select{max-width:175px;}
.mo{display:none;position:fixed;inset:0;background:rgba(30,42,58,0.5);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center;padding:20px;}
.mo.open{display:flex;}
.modal{background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r3);padding:var(--sp-xl);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,0.12);animation:mIn 0.2s var(--ease);position:relative;}
@keyframes mIn{from{opacity:0;transform:scale(0.98) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mtitle{font-family:var(--fb);font-size:1.125rem;font-weight:600;color:var(--snow);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);letter-spacing:-0.01em;}
.mfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);}
.ibox{background:rgba(26,138,125,0.07);border:1px solid rgba(26,138,125,0.18);border-radius:var(--r);padding:12px 15px;font-size:0.82rem;color:var(--gold);}
.prev-box{background:var(--ink3);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-top:12px;}
.prev-item{padding:11px 0;border-bottom:1px solid var(--line);}
.prev-item:last-child{border-bottom:none;}
.prev-name{font-size:0.72rem;color:var(--gold);font-weight:600;margin-bottom:4px;letter-spacing:0.05em;text-transform:uppercase;}
.prev-msg{font-size:0.86rem;color:var(--snow);line-height:1.55;font-weight:300;}
.dz{background:var(--ink3);border:2px dashed rgba(255,255,255,0.1);border-radius:var(--r2);padding:38px 24px;text-align:center;cursor:pointer;transition:all 0.18s;}
.dz:hover,.dz.drag-over{border-color:var(--gold);background:var(--gold-dim);}
.dz-icon{font-size:1.8rem;margin-bottom:10px;opacity:0.5;}
.dz-txt{font-weight:500;color:var(--mist);margin-bottom:3px;}
.dz-sub{font-size:0.76rem;color:var(--fog);}
.qi{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.qi:last-child{border-bottom:none;}
.qi-av{width:34px;height:34px;border-radius:9px;background:var(--gold-dim);border:1px solid rgba(26,138,125,0.2);display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;color:var(--gold);flex-shrink:0;overflow:hidden;}
.qi-av img{width:100%;height:100%;object-fit:cover;}
.avatar-upload{position:relative;cursor:pointer;}
.avatar-upload:hover::after{content:'📷';position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;font-size:0.9rem;border-radius:9px;}
.qi-name{font-size:0.87rem;font-weight:500;color:var(--snow);}
.qi-det{font-size:0.75rem;color:var(--mist);margin-top:1px;font-weight:300;}
.tc{position:fixed;bottom:26px;right:26px;z-index:999;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r);padding:12px 16px;font-size:0.8125rem;display:flex;align-items:center;gap:8px;animation:sIn 0.2s var(--ease);box-shadow:0 4px 16px rgba(0,0,0,0.3);min-width:260px;}
.toast.success{border-color:rgba(20,184,166,0.25);}
.toast.error{border-color:rgba(192,57,43,0.25);}
@keyframes sIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.empty{text-align:center;padding:52px 24px;}
/* CALENDAR DAY POPUP */
#cal-day-popup{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;padding:16px;}
.cdp-modal{width:420px;max-width:100%;background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 24px 64px rgba(0,0,0,0.6);overflow:hidden;}
.cdp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--ink3);border-bottom:1px solid var(--line);}
.cdp-title{font-size:.9rem;font-weight:600;color:var(--snow);text-transform:capitalize;}
.cdp-close{background:none;border:none;color:var(--fog);font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1;border-radius:var(--r);transition:color .15s;}
.cdp-close:hover{color:var(--snow);}
.cdp-list{max-height:400px;overflow-y:auto;}
.cdp-row{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line);transition:background .12s;}
.cdp-row:last-child{border-bottom:none;}
.cdp-row:hover{background:var(--gold-dim);}
.cdp-time{font-size:.78rem;font-weight:700;color:var(--gold);padding:12px 8px 12px 12px;align-self:stretch;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);white-space:nowrap;}
.cdp-info{flex:1;min-width:0;padding:10px 16px;}
.cdp-name{font-size:.86rem;font-weight:500;color:var(--snow);display:flex;align-items:center;gap:6px;}
.cdp-service{font-size:.74rem;color:var(--mist);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cdp-status{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;}
.cdp-status.scheduled{background:var(--gold);}
.cdp-status.completed{background:var(--teal);}
.cdp-status.checked_in{background:#a882ff;}
.cdp-foot{padding:10px 18px;border-top:1px solid var(--line);background:var(--ink3);}
.date-shortcuts{display:flex;gap:5px;margin-top:6px;}
.date-sc-btn{padding:3px 10px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--fog);font-size:0.72rem;cursor:pointer;transition:all .15s;}
.date-sc-btn:hover{border-color:var(--gold);color:var(--gold);}
.date-sc-btn.active{border-color:var(--gold);background:rgba(26,138,125,0.12);color:var(--gold);font-weight:600;}
.ei{font-size:2rem;margin-bottom:12px;opacity:0.3;}
.ei-svg{width:36px;height:36px;margin-bottom:12px;opacity:0.25;color:var(--fog);display:block;margin-left:auto;margin-right:auto;}
.empty p{font-size:0.88rem;color:var(--fog);font-weight:300;}
.rr{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.rr:last-child{border-bottom:none;}
.rr-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.rr-ic.on{background:var(--gold-dim);border:1px solid rgba(26,138,125,0.25);}
.rr-ic.off{background:rgba(255,255,255,0.04);border:1px solid var(--line);opacity:0.5;}
.tr2{display:flex;gap:18px;align-items:start;padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.tr2:last-child{border-bottom:none;}
.gold{color:var(--gold);}.mist{color:var(--mist);}.fog{color:var(--fog);}
.teal{color:var(--teal);}.amber{color:var(--amber);}.red{color:var(--red);}
.mt-1{margin-top:8px;}.mt-2{margin-top:16px;}.mb-1{margin-bottom:8px;}.mb-2{margin-bottom:16px;}
.w-full{width:100%;}.flex{display:flex;}.gap-2{gap:10px;}
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;padding:10px 0;}
#qr-canvas{background:#fff;border-radius:12px;padding:16px;}
.qr-steps{background:var(--ink3);border-radius:var(--r);padding:14px 18px;font-size:0.84rem;color:var(--mist);line-height:1.8;}
.qr-steps strong{color:var(--snow);}
.cal-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:4px;}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--ink3);}
.cal-head div{text-align:center;font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--fog);padding:10px 0;border-bottom:1px solid var(--line);}
.cal-head div:not(:last-child){border-right:1px solid var(--line);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.cal-day{min-height:100px;padding:8px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);cursor:pointer;transition:background 0.12s;position:relative;overflow:hidden;}
.cal-day:nth-child(7n){border-right:none;}
.cal-grid .cal-day:nth-last-child(-n+7){border-bottom:none;}
.cal-day:hover{background:rgba(255,255,255,0.04);}
.cal-day.today{background:var(--gold-dim);}
.cal-day.other-month{background:rgba(0,0,0,0.15);}
.cal-day.other-month .cal-day-num{opacity:0.3;}
.cal-day-num{font-size:0.82rem;font-weight:500;color:var(--mist);margin-bottom:2px;line-height:1;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;}
.cal-day.today .cal-day-num{font-weight:700;color:var(--gold);}
.cal-day.weekend{background:rgba(0,0,0,0.04);}
.cal-day.weekend .cal-day-num{color:var(--fog);}
.cal-day.closed-day{background:rgba(220,38,38,0.10);}
.cal-day.closed-day .cal-day-num{color:#ef4444;}
html.light .cal-day.closed-day{background:rgba(220,38,38,0.08);}
html.light .cal-day.closed-day .cal-day-num{color:#dc2626;}
.cal-head div:nth-child(6),.cal-head div:nth-child(7){color:var(--red);} /* UI-16: ista boja kao tjedni prikaz */
.cal-events{display:flex;flex-direction:column;gap:2px;}
.cal-event{display:flex;align-items:center;gap:4px;font-size:0.68rem;padding:3px 8px 3px 10px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:all 0.12s;line-height:1.35;background:rgba(255,255,255,0.04);color:var(--mist);border-left:3px solid var(--fog);position:relative;}
html.light .cal-event{background:rgba(0,0,0,0.03);}
html.light .cal-week-slot,html.light .cal-day-slot{border-bottom:1px solid rgba(0,0,0,0.12) !important;}
html.light .cal-week-col{border-right:1px solid rgba(0,0,0,0.12) !important;}
html.light .cal-day-tcol .cal-time{color:#374151 !important;}
html.light .cal-week-event,html.light .cal-day-event{border-left-width:3px;border-left-style:solid;}
.cal-event.scheduled{border-left-color:var(--amber);color:var(--snow);}
.cal-event.completed{border-left-color:var(--teal);color:var(--snow);}
.cal-event.no_show{border-left-color:var(--red);color:var(--fog);text-decoration:line-through;opacity:0.7;}
.cal-event.cancelled{border-left-color:var(--fog);color:var(--fog);text-decoration:line-through;opacity:0.5;}
.noshow-warn{background:rgba(192,57,43,0.1);border:1px solid rgba(192,57,43,0.25);border-radius:var(--r);padding:10px 14px;font-size:0.82rem;color:var(--red);margin-top:8px;display:flex;align-items:center;gap:8px;}
.cal-event:hover{background:rgba(255,255,255,0.08);transform:translateX(1px);}
html.light .cal-event:hover{background:rgba(0,0,0,0.06);}
.cal-more{font-size:0.64rem;color:var(--fog);padding:2px 6px;cursor:pointer;}
.cal-more:hover{color:var(--mist);}
.cal-view-btns{display:flex;gap:3px;}
.cal-view-btn{padding:5px 14px;border-radius:var(--r);border:1px solid var(--line);background:none;color:var(--mist);font-family:var(--fb);font-size:0.76rem;font-weight:500;cursor:pointer;transition:all 0.15s;}
.cal-view-btn.active{background:var(--gold-dim);color:var(--gold);border-color:rgba(26,138,125,0.3);}
.cal-view-btn:hover:not(.active){background:rgba(255,255,255,0.05);color:var(--snow);}
.cal-set-day{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--mist);font-family:var(--fb);font-size:0.72rem;font-weight:600;cursor:pointer;transition:all 0.15s;}
.cal-set-day.active{background:var(--pri);color:#fff;border-color:var(--pri);}
.cal-set-day:hover:not(.active){background:rgba(255,255,255,0.08);color:var(--snow);}
.cal-day-count{position:absolute;top:6px;right:7px;background:rgba(26,138,125,0.15);color:var(--gold);font-size:0.6rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.cal-week{border:1px solid var(--line);border-radius:var(--r);overflow:auto;display:flex;--cal-h:60px;--cal-head-h:56px;max-height:calc(100vh - 220px);}
/* min-height:min-content je nužan: kao flex stavka kolona bi se rastegla samo na
   vidljivu visinu okvira, pa bi zadnji sati ostali bez pozadine (bijela rupa) */
.cal-time-col{width:60px;flex-shrink:0;border-right:1px solid var(--line);background:var(--ink3);position:sticky;left:0;z-index:9;min-height:min-content;}
.cal-time-head{height:var(--cal-head-h);border-bottom:1px solid var(--line);box-sizing:border-box;background:var(--ink3);position:sticky;top:0;z-index:10;}
.cal-time-label{height:var(--cal-h);display:flex;align-items:flex-start;justify-content:flex-end;padding:3px 10px 0;font-size:0.7rem;color:var(--fog);font-weight:500;font-feature-settings:'tnum';line-height:1;box-sizing:border-box;}
.cal-week-cols{flex:1;display:grid;grid-template-columns:repeat(7,1fr);}
.cal-week-col{border-right:1px solid var(--line);min-width:0;}.cal-week-col:last-child{border-right:none;}
.cal-week-head{height:var(--cal-head-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 4px;border-bottom:1px solid var(--line);background:var(--ink3);cursor:pointer;transition:background 0.12s;box-sizing:border-box;position:sticky;top:0;z-index:8;}
.cal-week-head:hover{background:rgba(255,255,255,0.04);}
.cal-week-head .dow{font-size:0.62rem;color:var(--fog);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;}
.cal-week-head .dnum{font-family:var(--fb);font-size:0.95rem;font-weight:600;color:var(--snow);width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;letter-spacing:-0.02em;}
.cal-week-head.today .dnum{background:#157367;color:#fff;font-weight:700;} /* UI-16: 5,7:1 (teal s tamnim brojem bio 3,43:1) */
.cal-week-head.weekend .dow{color:var(--red);} /* QA UI-16: bio 1,66:1 u tamnoj temi (crvena s 50 % prozirnosti) */
.cal-week-body{position:relative;}
.cal-week-slot{height:var(--cal-h);border-bottom:1px solid var(--line);position:relative;box-sizing:border-box;}
.cal-week-slot::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,0.04);pointer-events:none;}
html.light .cal-week-slot::before{border-top-color:rgba(0,0,0,0.06);}
.cal-week-slot:hover{background:rgba(255,255,255,0.02);}
.cal-week-slot.unavailable{background:rgba(192,57,43,0.07);border-top:none;}
.cal-week-slot.break-slot{background:rgba(245,158,11,0.1);position:relative;}
.cal-week-slot.break-slot::after{content:"pauza";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.6rem;color:var(--amber);opacity:0.6;letter-spacing:0.04em;}
.cal-week-slot.blocked{background:rgba(192,57,43,0.18);position:relative;}
.cal-week-slot.blocked::after{content:attr(data-reason);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.58rem;color:#ef4444;opacity:0.7;letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;font-weight:500;}
.cal-week-event{position:absolute;border-radius:6px;padding:4px 6px;font-size:0.68rem;overflow:hidden;cursor:pointer;z-index:2;transition:all 0.12s;line-height:1.3;border-left:3px solid transparent;box-sizing:border-box;}
.cal-week-event:hover{filter:brightness(1.25);z-index:5;transform:scale(1.02);}
.cal-week-event .ev-time{font-weight:600;font-size:0.64rem;opacity:0.85;}
.cal-week-event .ev-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-week-event .ev-service{font-size:0.6rem;opacity:0.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Appointment hover tooltip (Fresha-style, dark theme) */
.appt-tooltip{position:fixed;z-index:2000;pointer-events:none;background:#1a1a1f;border-radius:12px;padding:0;min-width:280px;max-width:320px;box-shadow:0 12px 40px rgba(0,0,0,0.6),0 4px 12px rgba(0,0,0,0.3);opacity:0;transform:translateY(6px) scale(0.97);transition:opacity 0.18s,transform 0.18s;font-size:0.82rem;line-height:1.5;overflow:hidden;border:1px solid rgba(255,255,255,0.1);}
.appt-tooltip.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.appt-tooltip .att-header{padding:16px 18px 12px;display:flex;align-items:flex-start;gap:6px;justify-content:space-between;}
.appt-tooltip .att-time-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:0.72rem;font-weight:600;letter-spacing:0.02em;}
.appt-tooltip .att-time-badge.b-scheduled{background:rgba(245,158,11,0.15);color:var(--amber);}
.appt-tooltip .att-time-badge.b-completed{background:rgba(20,184,166,0.15);color:var(--teal);}
.appt-tooltip .att-time-badge.b-no_show{background:rgba(192,57,43,0.15);color:var(--red);}
.appt-tooltip .att-time-badge.b-cancelled{background:rgba(255,255,255,0.06);color:var(--fog);}
.appt-tooltip .att-time-badge.b-checked_in{background:rgba(96,165,250,0.15);color:#60a5fa;}
html.light .appt-tooltip .att-time-badge.b-checked_in{color:#2563eb;}
html.light .appt-tooltip{background:#fff;box-shadow:0 12px 40px rgba(0,0,0,0.12),0 4px 12px rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.08);}
.appt-tooltip .att-client{display:flex;align-items:center;gap:14px;padding:0 18px 14px;}
.appt-tooltip .att-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.95rem;color:#fff;flex-shrink:0;letter-spacing:0.02em;}
.appt-tooltip .att-client-info{min-width:0;flex:1;}
.appt-tooltip .att-client-name{font-weight:700;font-size:0.92rem;color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appt-tooltip .att-client-email{font-size:0.74rem;color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appt-tooltip .att-client-phone{font-size:0.74rem;color:var(--fog);}
.appt-tooltip .att-body{padding:14px 18px;background:#141416;border-top:1px solid rgba(255,255,255,0.08);}
html.light .appt-tooltip .att-body{background:var(--ink1);border-color:rgba(0,0,0,0.06);}
.appt-tooltip .att-service-name{font-weight:600;font-size:0.84rem;color:var(--snow);margin-bottom:2px;}
.appt-tooltip .att-service-detail{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.appt-tooltip .att-dur{font-size:0.76rem;color:var(--fog);}
.appt-tooltip .att-price{font-weight:700;font-size:1rem;color:var(--gold);white-space:nowrap;}
.appt-tooltip .att-therapist{font-size:0.74rem;color:var(--fog);margin-top:8px;display:flex;align-items:center;gap:6px;}
.appt-tooltip .att-th-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

.cal-week-event.dragging,.cal-day-event.dragging{opacity:0.3;z-index:1;}
.cal-drag-ghost{position:fixed;pointer-events:none;z-index:1000;opacity:0.85;box-shadow:0 8px 32px rgba(0,0,0,0.5);transform:scale(1.05);border-radius:6px;}
.cal-drop-indicator{position:absolute;left:4px;right:4px;height:2px;background:var(--gold);z-index:20;pointer-events:none;box-shadow:0 0 8px rgba(26,138,125,0.5);border-radius:1px;}
.cal-now-line{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:6;pointer-events:none;}
.cal-now-line::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--red);}
.stat-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.stat-bar{width:100%;max-width:52px;border-radius:6px 6px 0 0;min-height:4px;transition:height 0.4s ease;position:relative;cursor:default;}
.stat-bar:hover{filter:brightness(1.2);}
.stat-bar-label{font-size:0.64rem;color:var(--fog);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.stat-bar-val{font-size:0.7rem;font-weight:600;color:var(--mist);}
.stat-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.stat-row:last-child{border-bottom:none;}
.stat-row-bar{flex:1;height:8px;background:var(--ink3);border-radius:4px;overflow:hidden;}
.stat-row-fill{height:100%;border-radius:4px;transition:width 0.4s ease;}
.cal-day-view{border:1px solid var(--line);border-radius:var(--r);overflow:auto;display:flex;--cal-h:60px;--cal-head-h:56px;max-height:calc(100vh - 220px);}
.cal-day-tcol{width:60px;flex-shrink:0;border-right:1px solid var(--line);background:var(--ink3);position:sticky;left:0;z-index:9;min-height:min-content;}
.cal-day-tcol .cal-time-head{height:var(--cal-head-h);border-bottom:1px solid var(--line);box-sizing:border-box;background:var(--ink3);position:sticky;top:0;z-index:10;}
.cal-day-tcol .cal-time-label{height:var(--cal-h);display:flex;align-items:flex-start;justify-content:flex-end;padding:3px 10px 0;font-size:0.7rem;color:var(--fog);font-weight:500;font-feature-settings:'tnum';line-height:1;box-sizing:border-box;}
.cal-day-cols{flex:1;display:flex;min-height:min-content;}
.cal-day-col{flex:1;min-width:120px;border-right:1px solid var(--line);position:relative;min-height:min-content;}
.cal-day-col:last-child{border-right:none;}
.cal-day-col-head{height:var(--cal-head-h);display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--ink3);cursor:pointer;transition:background 0.12s;box-sizing:border-box;position:sticky;top:0;z-index:8;}
.cal-day-col-head:hover{background:rgba(255,255,255,0.04);}
.th-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;border-width:2px !important;}
.th-avatar-initials{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;color:#fff;flex-shrink:0;border-width:2px !important;}
.th-head-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.th-head-info .th-name{font-size:0.8rem;font-weight:600;color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.th-head-info .th-count{font-size:0.62rem;color:var(--fog);margin-top:1px;}
.cal-day-body{position:relative;}
.cal-day-slot{height:var(--cal-h);border-bottom:1px solid var(--line);position:relative;box-sizing:border-box;}
.cal-day-slot::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,0.04);pointer-events:none;}
html.light .cal-day-slot::before{border-top-color:rgba(0,0,0,0.06);}
.cal-day-slot:hover{background:rgba(255,255,255,0.02);}
.cal-day-slot.unavailable{background:rgba(192,57,43,0.07);pointer-events:none;}
.cal-day-slot.break-slot{background:rgba(245,158,11,0.1);pointer-events:none;position:relative;}
.cal-day-slot.break-slot::after{content:'pauza';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.6rem;color:var(--amber);opacity:0.6;letter-spacing:0.04em;}
.cal-day-slot.blocked{background:rgba(192,57,43,0.18);pointer-events:none;position:relative;}
.cal-day-slot.blocked::after{content:attr(data-reason);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.6rem;color:#ef4444;opacity:0.7;letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;font-weight:500;}
.cal-day-event{position:absolute;left:3px;right:3px;border-radius:6px;padding:4px 7px;font-size:0.72rem;overflow:hidden;cursor:pointer;z-index:2;transition:all 0.12s;line-height:1.35;border-left:3px solid transparent;}
.cal-day-event:hover{filter:brightness(1.25);z-index:5;transform:scale(1.02);}
.cal-day-event .ev-time{font-weight:600;font-size:0.66rem;opacity:0.85;}
.cal-day-event .ev-name{font-weight:500;}
.cal-day-event .ev-detail{font-size:0.64rem;opacity:0.7;}
.profile-tabs{display:flex;gap:2px;margin-bottom:18px;}
.profile-tab{padding:7px 16px;border-radius:var(--r);border:none;background:none;color:var(--mist);font-family:var(--fb);font-size:0.8rem;cursor:pointer;transition:all 0.12s;}
.profile-tab.active{background:var(--gold-dim);color:var(--gold);}
.profile-tab:hover:not(.active){background:rgba(255,255,255,0.05);}
.profile-stat{text-align:center;padding:14px 0;}
.profile-stat .ps-val{font-family:var(--fb);font-size:1.5rem;font-weight:600;color:var(--snow);letter-spacing:-0.02em;}
.profile-stat .ps-lbl{font-size:0.7rem;color:var(--mist);margin-top:3px;text-transform:uppercase;letter-spacing:0.06em;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:99px;transition:background 0.2s;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15);}
.login-overlay{position:fixed;inset:0;background:var(--ink);z-index:9999;display:flex;align-items:center;justify-content:center;}
.login-overlay::before{content:none;}
.login-box{background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r2);padding:40px 36px;width:360px;text-align:center;position:relative;box-shadow:0 8px 30px rgba(0,0,0,0.3);}
.login-box h1{font-family:var(--fb);font-size:1.5rem;color:var(--snow);margin-bottom:6px;font-weight:600;letter-spacing:-0.02em;}
.login-box p{color:var(--mist);font-size:0.8125rem;margin-bottom:24px;}
.login-box input{width:100%;padding:11px;border-radius:var(--r);border:1px solid var(--line);background:var(--ink3);color:var(--snow);font-size:0.9375rem;margin-bottom:10px;box-sizing:border-box;text-align:center;transition:border-color var(--duration),box-shadow var(--duration);}
.login-box input[type="password"]{letter-spacing:3px;}
.login-box input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-dim);}
.login-box .login-btn{width:100%;padding:11px;border:none;border-radius:var(--r);background:var(--gold);color:#1a1207;font-weight:600;font-size:0.9375rem;cursor:pointer;margin-top:4px;transition:opacity var(--duration);}
.login-box .login-btn:hover{opacity:0.88;}
.login-box .login-err{color:var(--red);font-size:0.75rem;margin-top:10px;min-height:20px;}
@media print {
  body{background:#fff;color:#000;}
  .sidebar,.sb-foot,.toast,.tc,.fb-bar,.cal-view-btns,.cal-legend,.ph-eyebrow,.ph-sub,.mo,.stats,.btn,select#cal-therapist-filter{display:none!important;}
  .main{margin-left:0;padding:10px;}
  .card{border:1px solid #ddd;background:#fff;box-shadow:none;}
  .cal-week-event,.cal-day-event{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .cal-week-slot,.cal-day-slot{border-color:#eee;}
  .cal-time-col,.cal-day-tcol,.cal-week-head,.cal-day-col-head{background:#f5f5f5!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .ph-title{color:#000;}
  .cal-week-head .dnum,.th-name{color:#000;}
  .cal-time-label{color:#666;}
  .page{display:none!important;}
  .page.active{display:block!important;}
}
/* ─── MODERN BODY MAP ─────────────────────────────────────── */
.body-map-container{background:var(--ink3);border:1px solid var(--line);border-radius:var(--r2);padding:16px;margin-bottom:8px}
.body-map-title{font-size:0.72rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--mist);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.body-map-wrap{display:flex;justify-content:center;gap:24px;margin-bottom:12px}
.body-map-col{text-align:center;position:relative;padding:8px 4px;border-radius:12px}
.body-map-label{font-size:0.72rem;color:var(--gold-dim);margin-bottom:8px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase}
.body-svg{cursor:pointer;max-width:100%;filter:drop-shadow(0 0 8px rgba(26,138,125,0.08))}
.body-svg .zone{fill:rgba(255,255,255,0.05);stroke:rgba(255,255,255,0.15);stroke-width:0.8;cursor:pointer;transition:all 0.25s ease;rx:6}
html.light .body-svg .zone{fill:rgba(0,0,0,0.04);stroke:rgba(0,0,0,0.1)}
html.light .body-svg .zone:hover{fill:rgba(26,138,125,0.22);stroke:var(--gold)}
html.light .body-svg .zone.active,html.light .body-svg .zone.active:hover{fill:rgba(239,83,80,0.4);stroke:rgba(239,83,80,0.7)} /* bez ovoga je svijetla tema gazila označenu zonu */
.body-svg .zone:hover{fill:rgba(26,138,125,0.22);stroke:var(--gold);stroke-width:1.2;filter:drop-shadow(0 0 6px rgba(26,138,125,0.3))}
.body-svg .zone.active{fill:rgba(239,83,80,0.4);stroke:rgba(239,83,80,0.7);stroke-width:1.5;filter:drop-shadow(0 0 8px rgba(239,83,80,0.4))}
.body-svg .zone.active:hover{fill:rgba(239,83,80,0.55);stroke:rgba(239,83,80,0.9)}
.body-outline,.body-detail{pointer-events:none}
html.light .body-outline{stroke:rgba(0,0,0,0.12)}
html.light .body-detail{stroke:rgba(0,0,0,0.06)}
.pain-tag{background:rgba(239,83,80,0.15);color:#ef5350;padding:4px 12px;border-radius:14px;font-size:0.73rem;font-weight:600;cursor:pointer;transition:all 0.2s;border:1px solid rgba(239,83,80,0.2);display:inline-flex;align-items:center;gap:4px}
.pain-tag:hover{background:rgba(239,83,80,0.3);border-color:rgba(239,83,80,0.4)}
.pain-tag .x{font-size:0.65rem;opacity:0.7}
.pain-tag .x:hover{opacity:1}
/* ── Odontogram (zubna karta) ───────────────────────────────────────────────
   Vlastite odo- klase namjerno. Stare .tooth-btn/.tooth-svg dolje dijeli
   clinical-exams.js za svoj odabir zuba, pa se ne smiju prenamijeniti.
   Sirina zuba NIJE fiksirana: kutnjak je siri od sjekutica i dolazi iz SVG-a.
   Nema ni .odo-svg path{fill:...} pravila jer bi CSS pregazio fill atribut. */
/* Zubi se pozicioniraju apsolutno po paraboli iz _archAt(), pa je .odo-jaw
   relativni kontejner fiksne visine. Visina = najveci y (_ARCH_A) + zub + broj. */
.odo-arch{min-width:700px;display:flex;flex-direction:column;gap:4px}
.odo-jaw{position:relative;height:150px}
.odo-jaw-up .odo-tooth{transform-origin:50% 0}
.odo-jaw-low .odo-tooth{transform-origin:50% 100%}
.odo-jaw-lbl{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.09em;color:var(--fog);text-align:center;font-weight:600}
.odo-tooth{position:absolute;background:none;border:none;padding:2px 1px;cursor:pointer;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background 0.12s}
.odo-tooth:hover{background:var(--gold-dim)}
.odo-tooth:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.odo-tooth svg{display:block;overflow:visible}
.odo-num{font-size:0.6rem;line-height:1;color:var(--fog);font-weight:600;font-variant-numeric:tabular-nums}
.odo-tooth:hover .odo-num{color:var(--gold)}
.odo-tooth[data-caries="1"] .odo-num{color:var(--st-caries);font-weight:700}
/* Mali križ ploha na luku (QA ST-02): isti raspored kao veliki u panelu, B gore, L dolje, D lijevo, M desno */
.odo-plohe{display:grid;grid-template-columns:repeat(3,7px);grid-template-rows:repeat(3,7px);gap:1px;flex-shrink:0}
.odo-plohe i{border-radius:1px;outline:0.5px solid var(--line)}
.odo-ploha-b{grid-area:1/2}.odo-ploha-d{grid-area:2/1}.odo-ploha-c{grid-area:2/2}.odo-ploha-m{grid-area:2/3}.odo-ploha-l{grid-area:3/2}
.odo-legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.odo-lg-grp{display:flex;align-items:center;gap:8px}
.odo-lg-grp-lbl{font-size:0.58rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fog);font-weight:600}
.odo-lg{display:inline-flex;align-items:center;gap:5px;font-size:0.7rem;color:var(--mist)}
.odo-lg i{width:9px;height:9px;border-radius:2px;display:inline-block;flex-shrink:0}
.odo-lg.odo-lg-ghost i{background:none;border:1.5px solid var(--enamel-line)}
@media(prefers-reduced-motion:reduce){.odo-tooth{transition:none}}

/* ─── ZUBNA KARTA: luk pune sirine, panel ISPOD na klik ─── */
/* Luk ostaje velik (puna sirina kartice). Panel se otvara ISPOD i sadrzaj mu
   je u stupce (auto-fit) da koristi sirinu i kartica ne bude predugacka. */
.odo-left{overflow-x:auto}
.odo-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--ink2);padding:18px 20px;margin-top:14px}
/* U modalu okvir daje .modal pa panel ide bez vlastitog okvira i razmaka. */
#dental-tooth-modal .odo-panel{border:0;border-radius:0;background:transparent;padding:0;margin-top:0}
/* Panel usklađen sa širinom luka (~720px) i centriran pa luk i panel djeluju
   kao jedna cjelina, bez razvučenih polja i praznina. */
.odo-panel-inner{max-width:720px;margin:0 auto}
.odo-panel-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:640px){.odo-panel-cols{grid-template-columns:1fr}}
.odo-col{min-width:0}
/* Zapisi gusto ispod oba stupca, pune širine. */
.odo-recs-wrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#tr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.odo-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.odo-panel-tooth{width:46px;height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.odo-panel-tooth svg{height:100%;width:auto;overflow:visible}
.odo-panel-tt{font-size:.95rem;font-weight:600;color:var(--snow)}
.odo-panel-ts{font-size:.72rem;color:var(--fog);margin-top:1px}
/* Kvadrat ploha: shematski okluzalni prikaz, križ oblik (B gore, L dolje, D lijevo, M desno, O/I sredina) */
.odo-surf{position:relative;width:99px;height:99px;margin:2px 0 16px}
.odo-surf-z{position:absolute;width:33px;height:33px;border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:600;color:var(--fog);background:var(--ink);transition:background .12s,color .12s}
.odo-surf-z:hover{outline:1.5px solid var(--gold);z-index:2}
.odo-surf-z[data-b]{top:0;left:33px}
.odo-surf-z[data-l]{top:66px;left:33px}
.odo-surf-z[data-d]{top:33px;left:0}
.odo-surf-z[data-m]{top:33px;left:66px}
.odo-surf-z[data-c]{top:33px;left:33px}
.odo-sec-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--fog);font-weight:600;margin:14px 0 8px;display:flex;align-items:center;gap:6px}
.odo-col>.odo-sec-lbl:first-child{margin-top:0}
.odo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.odo-form-grid .fg-full{grid-column:1/-1}
.odo-rec{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--ink)}
.odo-rec-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.odo-rec-proc{font-size:.82rem;font-weight:600;color:var(--snow)}
.odo-surf-pick{display:flex;gap:6px}
.odo-surf-btn{flex:1;padding:7px 0;border:1px solid var(--line);border-radius:6px;background:var(--ink);color:var(--fog);font-size:.72rem;font-weight:600;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.odo-surf-btn:hover{border-color:var(--teal);color:var(--snow)}
.odo-surf-btn.on{background:var(--teal);border-color:var(--teal);color:#fff}
.odo-rec-surf{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--teal);border-radius:4px;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--teal);vertical-align:middle}
.odo-rec-price{font-size:.78rem;color:var(--teal);font-weight:600;white-space:nowrap}
.odo-rec-meta{font-size:.7rem;color:var(--fog);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.odo-rec-note{font-size:.75rem;color:var(--mist);margin-top:4px;white-space:pre-wrap}
.odo-rec-img{margin-top:6px;max-width:100%;max-height:130px;border-radius:6px;cursor:pointer;display:block}
.odo-rec-del{background:none;border:none;color:var(--fog);cursor:pointer;font-size:.72rem;padding:2px 0;margin-top:4px}
.odo-rec-del:hover{color:var(--st-caries)}
.odo-empty-rec{font-size:.76rem;color:var(--fog);padding:6px 0}

.tooth-btn{display:inline-flex;flex-direction:column;align-items:center;gap:1px;width:21px;border:none;background:none;cursor:pointer;padding:1px 0;transition:transform 0.12s}
.tooth-btn:active{transform:scale(0.9)}
.tooth-svg{width:17px;height:22px;display:block}
.tooth-svg path{fill:var(--ink2);stroke:var(--line);stroke-width:1.4;transition:fill 0.15s,stroke 0.15s}
.tooth-upper .tooth-svg{transform:scaleY(-1)}
.tooth-btn:hover .tooth-svg path{fill:rgba(26,138,125,0.18);stroke:var(--gold)}
.tooth-btn.active .tooth-svg path{fill:var(--teal);stroke:var(--teal)}
.tooth-num{font-size:0.5rem;line-height:1;color:var(--fog);font-weight:600}
.tooth-btn:hover .tooth-num{color:var(--gold)}
.tooth-btn.active .tooth-num{color:var(--teal)}

/* Redak zahvata po zubu u modalu termina */
.tp-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;background:var(--ink2);border:1px solid var(--line);border-radius:8px}
.tp-tooth{min-width:34px;font-weight:700;font-size:.82rem;color:var(--teal)}
.tp-row select{flex:1;min-width:150px}
.tp-row input{min-width:0}
.tp-price{width:74px}
.tp-note{flex:1;min-width:120px}
.tp-empty{font-size:.78rem;color:var(--fog);padding:6px 0}

/* ─── WHATSAPP DASHBOARD ──────────────────────────────────────────────────── */
.wa-conn{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px;flex-wrap:wrap;}
.wa-conn-txt{font-size:.8rem;color:var(--fog);flex:1;}
.wa-auto-list{display:flex;flex-direction:column;gap:1px;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:20px;}
.wa-row{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--line);}
.wa-row:last-child{border-bottom:none;}
.wa-row:hover{background:rgba(255,255,255,.03);}
.wa-row-left{display:flex;align-items:center;gap:8px;min-width:180px;}
.wa-row-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.wa-row-dot.on{background:var(--teal);}
.wa-row-dot.off{background:var(--fog);opacity:.4;}
.wa-row-name{font-size:.82rem;font-weight:500;color:var(--snow);}
.wa-row-desc{flex:1;font-size:.75rem;color:var(--fog);}
.wa-row svg{flex-shrink:0;opacity:.4;}
.wa-row:hover svg{opacity:.7;}
.wa-recent{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.wa-recent-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.8rem;font-weight:500;color:var(--mist);}
.wa-log-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:.8rem;}
.wa-log-row:last-child{border-bottom:none;}
.wa-log-name{flex:1;color:var(--snow);font-weight:400;}
.wa-log-status{font-size:.7rem;font-weight:500;padding:2px 8px;border-radius:4px;}
.wa-log-status.sent{color:var(--teal);background:rgba(20,184,166,.08);}
.wa-log-status.err{color:var(--red);background:rgba(192,57,43,.08);}
.wa-log-time{font-size:.72rem;color:var(--fog);min-width:120px;text-align:right;}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bottom tab bar hidden on desktop */
.bottom-tab-bar{display:none;}

/* Mobile calendar header hidden on desktop */
.cal-mob-header{display:none;}

/* Quick-add overlay hidden on desktop */
.quick-add-overlay{display:none;}

/* Hamburger button hidden on desktop */
.hamburger-btn{display:none;background:none;border:none;cursor:pointer;color:var(--mist);padding:6px;border-radius:var(--r);transition:all 0.2s;align-items:center;justify-content:center;}
.hamburger-btn:hover{color:var(--gold);background:var(--gold-dim);}
.hamburger-btn svg{width:20px;height:20px;}

/* Mobile header hidden on desktop */
.mobile-header{display:none;}

/* Sidebar overlay hidden by default */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:49;opacity:0;transition:opacity 0.3s;}
.sidebar-overlay.open{display:block;opacity:1;}

/* ─── TABLET: ≤1024px ────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .main{padding:24px 20px;}
  .ph-title{font-size:1.5rem;}
  .g3{grid-template-columns:1fr 1fr;}
}

/* ─── TABLET PORTRET: 769–1024px ─────────────────────────────────────────────
   iPad portret: sidebar postaje off-canvas drawer (hamburger), sadržaj dobiva
   punu širinu. Zadržavamo desktop raspored sadržaja (bez donje trake/FAB-a). */
@media(min-width:769px) and (max-width:1024px){
  body{display:block;overflow:hidden;position:fixed;inset:0;width:100%;max-width:100vw;height:100%;}

  /* Gornja traka s hamburgerom */
  .mobile-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--line);padding:10px 18px;gap:12px;height:56px;box-sizing:border-box;}
  .mobile-header-title{font-weight:600;font-size:1rem;color:var(--snow);flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hamburger-btn{display:flex;color:var(--snow);width:44px;height:44px;padding:9px;flex-shrink:0;align-items:center;justify-content:center;}
  .hamburger-btn svg{width:24px;height:24px;}

  /* Sidebar → drawer */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);z-index:100;box-shadow:none;}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,0.5);}

  /* Sadržaj puna širina */
  .main{margin-left:0;padding:24px 28px;height:100%;width:100%;max-width:100vw;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}

  /* Touch-friendlije mete u drawer navigaciji */
  .nav-btn{padding:10px 12px;font-size:0.875rem;}
  .nav-ic{width:18px;height:18px;}

  /* ── Kalendar: alatna traka umjesto razvučene → uredno lomljenje + veće mete ── */
  /* Suvišni naslov "Kalendar termina / Klikni na dan" jede širinu → sakrij */
  .cal-desktop-header > div:first-child{display:none;}
  .cal-desktop-header{flex-wrap:wrap;justify-content:flex-start;gap:10px 12px;}
  .cal-desktop-header > div:last-child{flex-wrap:wrap;width:100%;justify-content:flex-start;gap:8px 10px;}
  /* Prebacivanje prikaza: veći gumbi za dodir */
  .cal-view-btn{padding:9px 18px;font-size:0.85rem;}
  /* Navigacija i akcije: min 40px visina za prst */
  .cal-desktop-header .btn-sm,.cal-desktop-header .btn-xs{min-height:40px;padding:8px 14px;font-size:0.8rem;}
  .cal-desktop-header .btn-sm{min-width:44px;justify-content:center;}
  /* Datum labela ne mora gutati 200px na tabletu */
  #cal-month-label{min-width:150px !important;font-size:1.05rem !important;}
  /* Filteri terapeut/status: šire touch mete */
  #cal-therapist-filter,#cal-status-filter{min-height:40px;padding:8px 12px !important;font-size:0.82rem !important;}
  /* Termini malo veći za čitljivost/dodir (samo tipografija, geometrija ostaje) */
  .cal-event{font-size:0.74rem;}

  /* ── Globalne touch mete: mali gumbi na tabletu ugodniji za prst ── */
  .btn{min-height:42px;}
  .btn-sm{min-height:40px;}
  .btn-xs{min-height:36px;}
}

/* ─── MOBILE: ≤768px ─────────────────────────────────────────────────────── */
@media(max-width:768px){

  /* Mobile header bar */
  .mobile-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--line);padding:10px 14px;gap:8px;height:52px;box-sizing:border-box;overflow:hidden;max-width:100vw;width:100%;}
  .mobile-header-title{font-weight:600;font-size:0.92rem;color:var(--snow);flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em;}

  /* Hamburger visible */
  .hamburger-btn{display:flex;color:var(--snow);width:38px;height:38px;padding:6px;flex-shrink:0;}
  .hamburger-btn svg{width:22px;height:22px;}

  /* Bottom tab bar: plutajuća traka odvojena od rubova, aktivna stavka na sivoj podlozi */
  .bottom-tab-bar{display:flex;position:fixed;left:12px;right:12px;bottom:max(8px,calc(env(safe-area-inset-bottom,0px) - 14px));z-index:60;background:var(--ink2);border:1px solid var(--line2);border-radius:28px;padding:6px;gap:2px;box-shadow:0 8px 28px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.06);}
  html.dark .bottom-tab-bar{box-shadow:0 8px 28px rgba(0,0,0,0.55);}
  .tab-btn,.tab-fab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 0 7px;background:none;border:none;border-radius:22px;color:var(--fog);font-size:0.72rem;cursor:pointer;transition:color 0.15s,background 0.15s;letter-spacing:0.01em;font-weight:500;}
  .tab-btn svg,.tab-fab svg{width:24px;height:24px;stroke-width:1.6;}
  .tab-btn.active{color:var(--snow);background:rgba(127,127,127,0.12);font-weight:600;}
  .tab-btn:active,.tab-fab:active{background:rgba(127,127,127,0.08);}

  /* Dodaj (+): ista stavka kao ostale, ikona u boji akcije */
  .tab-fab{color:var(--gold);}

  /* "Sljedeći pacijent" widget: iste veličine, spušten ispred plutajuće trake; povlačenjem ulijevo (ili ×) nestaje (inline stil → !important) */
  #next-patient-widget{bottom:max(8px,calc(env(safe-area-inset-bottom,0px) - 14px)) !important;right:12px !important;max-width:calc(100vw - 24px);}

  /* Quick Add bottom sheet */
  .quick-add-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:200;align-items:flex-end;justify-content:center;}
  .quick-add-overlay.open{display:flex;}
  .quick-add-sheet{background:var(--ink2);border-radius:20px 20px 0 0;padding:24px 20px calc(env(safe-area-inset-bottom,16px) + 20px);width:100%;max-width:100%;animation:slideUp 0.25s ease-out;}
  .quick-add-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--fog);cursor:pointer;padding:8px;}
  .quick-add-close svg{width:24px;height:24px;}
  .quick-add-title{font-size:1.3rem;font-weight:700;color:var(--snow);margin:0 0 20px;}
  .quick-add-item{display:flex;align-items:center;gap:16px;width:100%;padding:16px 4px;background:none;border:none;color:var(--snow);font-size:1rem;font-weight:500;cursor:pointer;border-radius:12px;transition:background 0.12s;}
  .quick-add-item:active{background:rgba(255,255,255,0.05);}
  .quick-add-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .quick-add-icon svg{width:22px;height:22px;}
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

  /* Main padding-bottom for tab bar */
  .main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important;}

  /* Sidebar off-screen drawer */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);z-index:100;box-shadow:none;}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,0.5);}

  /* Main content full width */
  body{display:block;overflow:hidden;width:100%;max-width:100vw;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;}
  .main{margin-left:0;padding:16px 20px;height:100%;-webkit-overflow-scrolling:touch;width:100%;max-width:100vw;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;}

  /* Page header */
  .ph{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:24px;}
  .ph-title{font-size:1.35rem;}
  .ph-sub{font-size:0.8rem;}
  .ph .btn,.ph .btn-gold,.ph .btn-ghost{width:100%;justify-content:center;min-height:46px;font-size:0.9rem;}

  /* Grid layouts → stack */
  .g2,.g3,.fr{grid-template-columns:1fr !important;gap:12px;overflow:hidden;}

  /* Stat cards 3 per row, compact */
  .stats{grid-template-columns:repeat(3,1fr) !important;gap:10px;}
  .sc{padding:14px 10px;text-align:center;border-radius:var(--r2);}
  .sc-val{font-size:1.35rem;font-weight:700;}
  .sc-lbl{font-size:0.68rem;margin-top:2px;}
  .sc-icon,.sc-icon svg{margin-bottom:6px;font-size:1rem;}
  svg.sc-icon{width:18px;height:18px;margin-bottom:6px;}

  /* Cards */
  .card{padding:var(--sp-lg) var(--sp-md);border-radius:var(--r2);}
  .ch{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px;padding-bottom:14px;}

  /* Tables card stack layout on mobile */
  .tw{overflow:visible;max-height:none;-webkit-overflow-scrolling:touch;}
  .card:has(> table.tbl),
  .card:has(> .tw){overflow:visible !important;padding:10px 10px 6px;}

  /* Hide thead visually but keep accessible */
  table.tbl thead,
  .tw table thead{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

  /* Turn table into block layout */
  table.tbl,
  table.tbl tbody,
  .tw table,
  .tw table tbody{display:block;width:100%;}

  /* Each row = card (kompaktno da stane više po ekranu) */
  table.tbl tbody tr,
  .tw table tbody tr{
    display:block;
    background:var(--ink3);
    border:1px solid var(--line);
    border-radius:var(--r2);
    padding:9px 12px;
    margin-bottom:7px;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
  }
  html.light table.tbl tbody tr,
  html.light .tw table tbody tr{background:#fff;}

  /* Empty-state row (colspan full) stays readable */
  table.tbl tbody tr:has(td[colspan]),
  .tw table tbody tr:has(td[colspan]){padding:18px 14px;text-align:center;}

  table.tbl tbody tr:hover td,
  .tw table tbody tr:hover td{background:transparent;}

  /* Each cell = label:value row */
  table.tbl tbody td,
  .tw table tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:4px 0;
    border:none;
    border-bottom:1px dashed var(--line);
    font-size:0.88rem;
    min-height:26px;
    text-align:right;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  table.tbl tbody td:last-child,
  .tw table tbody td:last-child{border-bottom:none;}

  /* Prazne placeholder ćelije ("...") ne troše red na mobilnoj kartici (desktop ih zadržava) */
  table.tbl tbody td:has(> .cell-dash),
  .tw table tbody td:has(> .cell-dash){display:none;}

  /* Label from data-label (auto-filled by JS from th) */
  table.tbl tbody td[data-label]::before,
  .tw table tbody td[data-label]::before{
    content:attr(data-label);
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--fog);
    font-weight:500;
    flex-shrink:0;
    max-width:45%;
    text-align:left;
    line-height:1.3;
  }

  /* Empty-label cell (action column) = full-width row, right-aligned buttons */
  table.tbl tbody td[data-label=""],
  .tw table tbody td[data-label=""]{
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
    padding-top:7px;
    margin-top:2px;
    border-top:1px solid var(--line);
    border-bottom:none;
  }
  table.tbl tbody td[data-label=""]::before,
  .tw table tbody td[data-label=""]::before{display:none;}

  /* Action buttons inside action cell touch-friendly */
  table.tbl tbody td[data-label=""] .btn,
  table.tbl tbody td[data-label=""] button,
  table.tbl tbody td[data-label=""] a.btn,
  .tw table tbody td[data-label=""] .btn,
  .tw table tbody td[data-label=""] button,
  .tw table tbody td[data-label=""] a.btn{
    min-height:36px;padding:6px 12px;font-size:0.8rem;
  }

  /* Full-colspan empty state center it */
  table.tbl tbody td[colspan],
  .tw table tbody td[colspan]{
    justify-content:center;
    text-align:center;
    border:none;
  }
  table.tbl tbody td[colspan]::before,
  .tw table tbody td[colspan]::before{display:none;}

  /* Filter bar kontrole wrap-aju u čitljive redove umjesto da se stisnu/odrežu u jedan red */
  .fb-bar{gap:6px;}
  .fb-bar input,.fb-bar select{min-width:0;flex:1 1 calc(50% - 3px);max-width:100% !important;}
  .fb-bar input[type="text"],.fb-bar input[type="search"]{flex-basis:100%;}
  .fb-bar .btn,.fb-bar button{flex:1 1 auto;}

  /* Modals plutajući panel (odmaknut od rubova, ugodnije oku) */
  .mo{padding:20px 16px calc(16px + env(safe-area-inset-bottom));align-items:flex-end;overflow:hidden;}
  .modal{max-width:100%;width:100%;border-radius:var(--r3);padding:var(--sp-xl) var(--sp-md);max-height:76vh;margin:0;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;}
  .modal *{max-width:100%;box-sizing:border-box;}
  .modal input,.modal select,.modal textarea{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;}
  .modal input[type="date"],.modal input[type="time"]{width:100% !important;max-width:100% !important;-webkit-appearance:none;appearance:none;}
  .modal .fg,.modal .grid,.modal [style*="grid"]{max-width:100%;overflow:hidden;}
  .modal [style*="display:flex"],.modal [style*="display: flex"]{flex-wrap:wrap;max-width:100%;}
  .mtitle{font-size:1.1rem;margin-bottom:16px;padding-bottom:12px;font-weight:600;}
  .mfoot{flex-wrap:wrap;gap:8px;padding-top:8px;}
  .mfoot .btn{flex:1;min-width:0;justify-content:center;min-height:46px;}

  /* Login */
  .login-box{width:calc(100% - 32px);max-width:360px;padding:32px 24px;}

  /* Notification panel full width */
  .notif-panel{width:100%;right:-100%;}

  /* Toasts above bottom tab bar */
  .tc{left:14px;right:14px;bottom:100px;}
  .toast{min-width:auto;width:100%;font-size:0.88rem;padding:14px 18px;}

  /* Calendar month view compact */
  .cal-day{min-height:60px;padding:5px;}
  .cal-day-num{font-size:0.78rem;margin-bottom:3px;width:24px;height:24px;}
  .cal-event{font-size:0.66rem;padding:3px 5px 3px 9px;}
  .cal-more{font-size:0.64rem;}
  .cal-head div{font-size:0.64rem;padding:8px 0;letter-spacing:0.06em;}
  .cal-day-count{font-size:0.6rem;min-width:16px;height:16px;top:3px;right:3px;}

  /* Calendar week view */
  .cal-time-col,.cal-day-tcol{width:44px;}
  .cal-time-label{font-size:0.64rem;padding:0 4px;}
  .cal-week-cols{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .cal-week-col{min-width:90px;}
  .cal-week-head .dow{font-size:0.62rem;}
  .cal-week-head .dnum{font-size:1.1rem;}
  .cal-week-event{font-size:0.68rem;padding:3px 5px;border-radius:6px;}
  .cal-week-event .ev-time{font-size:0.62rem;}
  .cal-week-event .ev-service{display:none;}

  /* Calendar day view (Fresha style) */
  .cal-day-view{border:none;border-radius:0;overflow-x:hidden;max-width:100vw;}
  /* overflow-x:hidden bi prisilio overflow-y:auto (CSS spec) → kolone bi scrollale
     neovisno o sticky vremenskoj osi i termini bi bili vertikalno pomaknuti.
     overflow:visible drži scroll na .cal-day-view razini (os + kolone zajedno). */
  .cal-day-cols{flex:1;overflow:visible;}
  .cal-day-col{flex:1;min-width:0;}
  .cal-day-col-head{flex-direction:column;align-items:center;text-align:center;padding:14px 8px;gap:6px;}
  .th-avatar{width:52px;height:52px;}
  .th-avatar-initials{width:52px;height:52px;font-size:1.1rem;}
  .th-head-info{align-items:center;}
  .cal-day-col-head .th-name{font-size:0.82rem;font-weight:600;}
  .cal-day-col-head .th-count{display:none;}
  .cal-day-event{font-size:0.8rem;padding:5px 10px;border-radius:8px;left:4px;right:6px;border-left-width:4px;overflow:hidden;line-height:1.25;}
  .cal-day-event .ev-time{font-size:0.7rem;font-weight:600;}
  .cal-day-event .ev-name{font-size:0.78rem;font-weight:600;}
  .cal-day-event .ev-detail{font-size:0.62rem;}
  .cal-time-label{font-size:0.72rem;font-weight:600;color:var(--snow);}
  .cal-day-tcol{width:52px;}
  .cal-now-line{height:2.5px;}
  .cal-now-line::before{width:10px;height:10px;left:-5px;top:-4px;}

  /* Calendar week view (Fresha style) */
  .cal-week-view{border:none;border-radius:0;}
  .cal-week-col{min-width:calc((100vw - 52px) / 3);}
  .cal-week-head{padding:10px 4px;text-align:center;}
  .cal-week-head .dnum{font-size:1.15rem;font-weight:700;}
  .cal-week-head .dow{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.05em;}

  /* Fresha-style week grid */
  .fw-grid{width:100%;overflow:hidden;}
  .fw-head{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:var(--ink2);}
  .fw-head .fw-th-cell{width:60px;flex-shrink:0;}
  .fw-day-cell{flex:1;text-align:center;padding:10px 2px;cursor:pointer;}
  .fw-dnum{font-size:1.05rem;font-weight:700;color:var(--mist);}
  .fw-dow{font-size:0.6rem;color:var(--fog);text-transform:uppercase;letter-spacing:0.04em;margin-top:2px;}
  .fw-today .fw-dnum{color:#fff;background:var(--gold);width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
  .fw-today .fw-dow{color:var(--gold);font-weight:600;}
  .fw-body{display:flex;flex-direction:column;overflow:hidden;}
  .fw-row{display:flex;border-bottom:1px solid var(--line);flex:1;min-height:0;}
  .fw-row .fw-th-cell{width:60px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:4px;border-right:1px solid var(--line);}
  .fw-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:3px solid;border-color:inherit;}
  .fw-avatar-init{display:flex;align-items:center;justify-content:center;font-size:0.88rem;font-weight:700;color:#fff;}
  .fw-th-name{font-size:0.54rem;color:var(--mist);text-align:center;line-height:1.15;max-width:56px;overflow:hidden;word-break:break-word;}
  .fw-cell{flex:1;display:flex;flex-direction:column;gap:3px;padding:4px 2px;border-right:1px solid rgba(255,255,255,0.06);min-width:0;align-content:flex-start;}
  html.light .fw-cell{border-right-color:rgba(0,0,0,0.1);}
  html.light .fw-row{border-bottom-color:rgba(0,0,0,0.1);}
  html.light .fw-head{border-bottom-color:rgba(0,0,0,0.12);background:var(--ink3);}
  html.light .fw-row .fw-th-cell{border-right-color:rgba(0,0,0,0.1);}
  html.light .fw-badge{border-left-width:3px;}
  .fw-badge{font-size:0.62rem;font-weight:600;padding:4px 6px;border-radius:6px;border-left:2px solid;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 0.12s;}
  .fw-badge:active{opacity:0.7;}
  .fw-more{font-size:0.56rem;color:var(--fog);padding:1px 4px;}

  /* Calendar hide extras on mobile, Fresha-clean */
  #page-appointments .ph,
  #page-appointments .stats,
  #page-appointments .fb-bar,
  #page-appointments #appt-bulk-bar,
  #page-appointments [onclick="openApptImport()"],
  #page-appointments [onclick="printDailySchedule()"],
  #page-appointments .cal-wrap .cs,
  #page-appointments #cal-therapist-filter,
  #page-appointments #cal-legend,
  #page-appointments > .card:has(#appointments-tbody){display:none !important;}
  .cal-desktop-header{display:none !important;}
  body.hide-mob-header .mobile-header{display:none !important;}
  #page-appointments .card{padding:0;border:none;background:none;box-shadow:none;}
  #page-appointments.active{display:flex !important;flex-direction:column;height:100%;overflow:hidden;padding:0 !important;}
  #page-appointments .card.mb-2{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}
  .cal-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
  .cal-head{flex-shrink:0;}
  .cal-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;overflow:hidden;}
  .cal-grid .cal-day{min-height:0;overflow-y:auto;overflow-x:hidden;}
  .fw-grid{display:flex;flex-direction:column;height:100%;}
  .fw-head{flex-shrink:0;}
  .fw-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
  .fw-row{flex:1;display:flex;min-height:0;overflow:hidden;}
  .fw-row .fw-cell{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;}
  .fw-row:last-child{border-bottom:none;}
  #cal-day-wrap{height:calc(100vh - 48px - 80px - env(safe-area-inset-bottom,0px));overflow-y:auto;}
  #cal-week-wrap{height:calc(100vh - 48px - 80px - env(safe-area-inset-bottom,0px));overflow:hidden;display:flex;flex-direction:column;}
  #cal-week-wrap .fw-grid{flex:1;display:flex;flex-direction:column;height:100%;}

  /* Mobile Fresha-style calendar header */
  .cal-mob-header{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;position:relative;}
  .cal-mob-left{display:flex;align-items:center;gap:4px;}
  .cal-mob-right{display:flex;align-items:center;gap:8px;}
  .cal-mob-menu{background:none;border:none;color:var(--mist);padding:8px;cursor:pointer;border-radius:8px;}
  .cal-mob-menu svg{width:22px;height:22px;stroke-width:1.8;}
  .cal-mob-menu:active{background:rgba(255,255,255,0.06);}
  .cal-mob-date{background:none;border:none;color:var(--fog);padding:6px;cursor:pointer;border-radius:6px;}
  .cal-mob-date:active{background:rgba(255,255,255,0.06);}
  .cal-mob-label{font-size:1rem;font-weight:700;color:var(--snow);cursor:pointer;white-space:nowrap;padding:4px 2px;}
  .cal-mob-icon{background:none;border:none;color:var(--fog);padding:8px;cursor:pointer;border-radius:8px;}
  .cal-mob-icon:active{background:rgba(255,255,255,0.06);}
  .cal-mob-view-menu{display:none;position:absolute;top:100%;left:4px;background:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:6px;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,0.4);min-width:140px;}
  .cal-mob-view-menu.open{display:block;}
  .cal-mob-view-opt{display:block;width:100%;padding:12px 16px;background:none;border:none;color:var(--mist);font-size:0.9rem;text-align:left;cursor:pointer;border-radius:8px;font-weight:500;}
  .cal-mob-view-opt:active,.cal-mob-view-opt.active{background:rgba(255,255,255,0.06);color:var(--gold);}
  /* Tjedni prikaz nema smisla na mobitelu (7 kolona presitno) → skriven, koristi se dnevni */
  .cal-mob-view-opt[data-view="week"]{display:none;}

  /* Dashboard hide podsjetnici stat card on mobile */
  #page-dashboard .sc:has(#dt-noshow),
  #page-appointments .sc:has(#apst-remind){display:none;}

  /* WhatsApp dashboard */
  .wa-row{flex-wrap:wrap;gap:6px;padding:12px 14px;}
  .wa-row-left{min-width:0;flex:1;}
  .wa-row-desc{flex-basis:100%;padding-left:14px;order:2;}
  .wa-row svg{order:1;} /* QA UI-32: strelica u prvom retku uz naziv, ne sama ispod opisa */
  .wa-log-row{flex-wrap:wrap;gap:4px;}
  .wa-log-time{min-width:0;flex-basis:100%;text-align:left;padding-left:0;}

  /* Pipeline board */
  .pipeline-board{min-height:300px;overflow-x:auto;}
  .pipeline-col{min-width:200px;max-width:none;}

  /* Social cards */
  .social-grid{grid-template-columns:1fr !important;gap:12px;}
  .social-card{padding:var(--sp-lg) var(--sp-md);}

  /* Dosje */
  .dosje-header{flex-direction:column;text-align:center;gap:12px;}
  .dosje-avatar{margin:0 auto;}
  .dosje-stats{grid-template-columns:1fr 1fr !important;}

  /* Body map */
  .body-map-wrap{flex-direction:column;align-items:center;gap:16px;}

  /* Profile tabs */
  .profile-tabs{flex-wrap:wrap;gap:6px;}
  .profile-tab{padding:9px 16px;font-size:0.82rem;border-radius:8px;}

  /* Compare pairs */
  .compare-pair{grid-template-columns:1fr !important;}

  /* BMI gauge */
  .bmi-gauge{flex-direction:column;text-align:center;gap:10px;}
  .bmi-bar{max-width:100%;width:100%;}

  /* Drop zones */
  .dz{padding:24px 16px;}

  /* Quick items / rows */
  .qi{gap:8px;padding:8px 0;}
  .rr{gap:10px;padding:12px 0;flex-wrap:wrap;}
  .tr2{flex-direction:column;gap:10px;padding:14px 0;}

  /* Sidebar brand tighter on mobile */
  .sb-brand{padding:18px 16px 14px;}

  /* Nav buttons bigger tap targets */
  .nav-btn{padding:12px 14px;font-size:0.9rem;}

  /* Inputs 16px prevents iOS auto-zoom */
  input,select,textarea{font-size:16px !important;min-width:0;max-width:100%;}

  /* Buttons bigger on mobile */
  .btn{min-height:46px;padding:12px 20px;font-size:0.9rem;}
  .btn-sm{min-height:40px;padding:9px 16px;font-size:0.84rem;}

  /* Empty state */
  .empty{padding:40px 20px;font-size:0.9rem;}

  /* Dashboard sections inline grids */
  #dash-leads-grid{grid-template-columns:1fr !important;}
  #kt-aparati-grid{grid-template-columns:1fr 1fr !important;}
  #ig-media-grid{grid-template-columns:1fr 1fr !important;}

  /* Waiting room items */
  .waiting-item{flex-wrap:wrap;padding:var(--sp-sm);gap:var(--sp-sm);}

  /* Tags */
  .tag-input-wrap{min-height:42px;}

  /* Inline style overrides for common patterns */
  [style*="grid-template-columns: repeat(3"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns: repeat(auto-fill,minmax(300px"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:repeat(auto-fill,minmax(300px"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns: repeat(auto-fill,minmax(340px"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:repeat(auto-fill,minmax(340px"]{grid-template-columns:1fr !important;}

  /* Schedule grid  */
  [style*="grid-template-columns:100px 1fr"]{grid-template-columns:80px 1fr !important;}
  [style*="grid-template-columns: 100px 1fr"]{grid-template-columns:80px 1fr !important;}

  /* Overlap fix: inline flex button groups in page headers wrap */
  .ph > div[style*="display:flex"],
  .ph > div[style*="display: flex"]{flex-wrap:wrap;width:100%;gap:8px !important;}
  .ph > div[style*="display:flex"] > *,
  .ph > div[style*="display: flex"] > *{flex:1 1 auto;min-width:0;}
  .ph > div[style*="display:flex"] > select,
  .ph > div[style*="display: flex"] > select,
  .ph > div[style*="display:flex"] > input,
  .ph > div[style*="display: flex"] > input{max-width:100%;min-width:0;}

  /* Stats grids from inline styles (4-6 columns) stack to 2 per row */
  [style*="grid-template-columns:repeat(auto-fill,minmax(180px"]{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;}
  [style*="grid-template-columns: repeat(auto-fill,minmax(180px"]{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;}
  [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="grid-template-columns: repeat(6,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="grid-template-columns: repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}

  /* Sidebar-off guard: bilo koji horizontalni container unutar main ne ispušta scroll */
  .main > *{max-width:100%;box-sizing:border-box;}

  /* Sav direktni sadržaj kartice ostaje unutar granica */
  .card > *{max-width:100%;}

  /* Dugi inline flex rowovi s CTA grupama wrap-aju */
  .page > div[style*="display:flex"],
  .page > div[style*="display: flex"]{flex-wrap:wrap;}

  /* Fiksne širine u inline stilovima postaju fluidne */
  [style*="width:130px"],[style*="width: 130px"],
  [style*="width:140px"],[style*="width: 140px"],
  [style*="width:160px"],[style*="width: 160px"],
  [style*="width:180px"],[style*="width: 180px"],
  [style*="width:200px"],[style*="width: 200px"]{width:auto !important;min-width:0;max-width:100%;flex:1 1 120px;}

  /* Page header meta red (subtitle + filter inline) ne smije overflowati */
  .ph-sub{word-break:break-word;}
}

/* Calendar day name abbreviations */
.cal-day-short{display:none;}
@media(max-width:768px){.cal-day-full{display:none;}.cal-day-short{display:inline;}}

/* iOS standalone PWA: donju traku pozicionira JS (public/js/modules/mobile-safearea.js)
   jer env(safe-area-inset-bottom) u standalone kontekstu zna vraćati 0. */

/* ─── SMALL PHONES: ≤400px ───────────────────────────────────────────────── */
@media(max-width:400px){
  .main{padding:12px 16px;}
  .stats{grid-template-columns:repeat(3,1fr) !important;}
  .sc{padding:8px;}
  .sc-val{font-size:1rem;}
  .sc-lbl{font-size:0.58rem;}
  .ph-title{font-size:1.125rem;}
  .card{padding:var(--sp-sm) var(--sp-sm);}
  .modal{padding:var(--sp-md) var(--sp-sm);}
  #kt-aparati-grid{grid-template-columns:1fr !important;}
  .dosje-stats{grid-template-columns:repeat(3,1fr) !important;gap:6px;} /* QA UI-10: 3x2 umjesto 6 kartica jedna ispod druge */
  .cal-day{min-height:0;padding:2px;}
  .cal-day-num{font-size:0.66rem;width:18px;height:18px;}
  .cal-events{display:flex;flex-direction:column;gap:1px;}
  .cal-event{font-size:0;padding:0;height:5px;border-radius:2px;border-left:none;min-height:5px;background:currentColor !important;opacity:0.85;}
  html.light .cal-event{opacity:1;}
  html.light .cal-event.scheduled{color:var(--amber);}
  html.light .cal-event.completed{color:var(--teal);}
  html.light .cal-event.no_show{color:var(--red);}
  html.light .cal-event.cancelled{color:var(--fog);}
  html.light .cal-event:not(.scheduled):not(.completed):not(.no_show):not(.cancelled){color:var(--gold);}
  .cal-more{font-size:0.46rem;}
  .cal-day-count{display:none;}
}

/* ─── Pull-to-refresh ────────────────────────────────────────────────────── */
.mo.open{overscroll-behavior:contain;}
.mo.open .modal,.mo.open .mc{overscroll-behavior:contain;}
.ptr-indicator{display:none;text-align:center;padding:12px 0;color:var(--fog);font-size:0.8rem;transition:opacity 0.2s;}
.ptr-indicator.visible{display:block;}
.ptr-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:ptr-spin 0.6s linear infinite;}
@keyframes ptr-spin{to{transform:rotate(360deg);}}

/* ─── SMOOTH ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes mOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.96) translateY(10px)}}
.mo.closing .modal,.mo.closing .mc{animation:mOut 0.2s var(--ease) forwards;}
.mo.closing{pointer-events:none;}
/* Bez fill-mode: zadrzani transform iz zadnjeg keyframea pretvara .page u containing block
   za position:fixed potomke, pa se modali unutar stranice centriraju na sredinu cijele
   stranice umjesto na sredinu ekrana (vidljivo kod dugih stranica poput dosjea). */
.page{animation:pageIn 0.3s var(--ease);}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.skeleton{background:var(--ink3);border-radius:var(--r);position:relative;overflow:hidden;min-height:18px;}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);animation:skeleton-shimmer 1.5s ease-in-out infinite;}
html.light .skeleton::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent);}
@keyframes skeleton-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton-text{height:14px;margin-bottom:8px;border-radius:4px;}
.skeleton-text.w-75{width:75%;}.skeleton-text.w-50{width:50%;}
.skeleton-circle{border-radius:50%;}
.skeleton-card{height:80px;margin-bottom:12px;border-radius:var(--r2);}
.skeleton-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.skeleton-row .skeleton-circle{width:36px;height:36px;flex-shrink:0;}
.skeleton-row .skeleton-lines{flex:1;display:flex;flex-direction:column;gap:6px;}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:ptr-spin 0.6s linear infinite;vertical-align:middle;}
.spinner-lg{width:28px;height:28px;border-width:3px;}
.page-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px;}
.page-loader span{font-size:0.8125rem;color:var(--fog);}
.toast.toast-exit{animation:sOut 0.2s var(--ease) forwards;}
@keyframes sOut{from{transform:translateY(0);opacity:1}to{transform:translateY(8px);opacity:0}}
.btn:active{transform:scale(0.97);}

/* ─── ČEKAONICA KANBAN ──────────────────────────────────────── */
.wb-card{background:var(--ink3);transition:background 0.15s,border-color 0.15s;}
.wb-card.wb-st-scheduled{background:var(--ink3);}
.wb-card.wb-st-checked-in{background:var(--gold-dim);border-color:var(--gold)!important;border-left:3px solid var(--gold)!important;}
.wb-card.wb-st-in-progress{background:rgba(176,125,16,0.06);border-color:var(--amber)!important;border-left:3px solid var(--amber)!important;}
.wb-card.wb-st-completed{background:var(--ink2);opacity:0.7;}
.wb-card.wb-st-no-show{background:rgba(192,57,43,0.05);border-color:var(--line2)!important;opacity:0.85;}
.wb-badge{font-size:0.68rem;padding:2px 8px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}
.wb-badge.wb-st-scheduled{background:var(--ink);color:var(--fog);border:1px solid var(--line);}
.wb-badge.wb-st-checked-in{background:var(--gold-dim);color:var(--gold);}
.wb-badge.wb-st-in-progress{background:rgba(176,125,16,0.12);color:var(--amber);}
.wb-badge.wb-st-completed{background:var(--ink);color:var(--mist);border:1px solid var(--line);}
.wb-badge.wb-st-no-show{background:var(--ink);color:var(--mist);border:1px solid var(--line);}
.wb-filter.active{background:#157367;color:#fff;border-color:#157367;} /* UI-16: bijelo na tamnom tealu 5,7:1 u obje teme (bilo 4,22 i 2,16:1) */
.wb-mode.active{background:var(--gold-dim);color:var(--gold);}
html:not(.dark) .wb-mode.active{color:#14695F;} /* UI-16: Po terapeutu 5,7:1 (bio 4,46:1) */
@media(max-width:768px){
  #wb-board{grid-template-columns:1fr!important;}
  /* Čekaonica: strelice lijevo/desno od datuma u jednom redu (ne stacked) */
  .wb-datenav{width:100%;}
  .wb-datenav #wb-date{flex:1;min-width:0;text-align:center;}
  .ph .wb-datenav .wb-nav-arrow{width:auto!important;flex:0 0 52px;min-width:52px;padding-left:0;padding-right:0;}
  /* Kinetek aparati: red najma se prelama umjesto da gura širinu (točkice+grad padnu u 2. red) */
  .kt-rent-row{flex-wrap:wrap;}
  /* ─── Mobilni overflow audit (2026-07-14): stranice koje su gurale širinu ─── */
  /* Dashboardi (ga4/gads/meta/meta-ads): red stat-kartica se prelama umjesto nowrap */
  .stat-row{flex-wrap:wrap;}
  /* Modules hub: kategorija ne smije blowoutati širinu (grid unutar flex-column) */
  .mhub-category{min-width:0;}
  .mhub-category>div[style*="grid"]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;}
  /* Anatomija: 2-stupčani grid (340px 1fr) se slaže u 1 stupac */
  .anatomy-grid{grid-template-columns:1fr!important;}
  /* UTM tracker: dugi booking link (bez razmaka) se prelama umjesto da gura širinu */
  .ibox code{word-break:break-all;overflow-wrap:anywhere;}
  /* cezih-hub: red pretrage pacijenta (OIB/MBO + gumbi) se prelama */
  .cezih-search-row{flex-wrap:wrap;}
}

/* ─── CALENDAR EVENT COMPACT VARIANTS ───────────────────────── */
.cal-week-event,.cal-day-event{display:flex;flex-direction:column;gap:1px;}
.cal-week-event.compact-xs,.cal-day-event.compact-xs{padding:1px 5px;justify-content:center;}
.cal-week-event.compact-xs .ev-time,.cal-day-event.compact-xs .ev-time{font-size:0.62rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;}
.cal-week-event.compact-sm,.cal-day-event.compact-sm{padding:2px 6px;}
.cal-week-event.compact-sm .ev-time,.cal-day-event.compact-sm .ev-time{font-size:0.62rem;line-height:1.15;}
.cal-week-event.compact-sm .ev-name,.cal-day-event.compact-sm .ev-name{font-size:0.68rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-week-event .ev-name,.cal-day-event .ev-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-day-event{left:auto;right:auto;}
/* ─── KASKADNO PREKLAPANJE (2 termina u istom slotu) ───────────── */
/* Sloj se postavlja preko --ev-z (ne inline z-index, inače :hover ne može podići karticu) */
.cal-week-event,.cal-day-event{z-index:var(--ev-z,2);}
/* Ime pacijenta uz vrijeme na najnižim karticama (15 min termini) */
.cal-week-event .ev-inline-name,.cal-day-event .ev-inline-name{font-weight:600;opacity:1;}
/* Razlog dolaska (usluga) uz ime, prigušeno da se ime i dalje čita prvo */
.cal-week-event .ev-inline-svc,.cal-day-event .ev-inline-svc{font-weight:400;opacity:0.72;}
/* Gornja kartica u kaskadi: neprozirna podloga (ista nijansa kao samostalna
   kartica, ali se donja ne prosijava kroz nju) + sjena da se vidi sloj */
.cal-week-event.cascade-top,.cal-day-event.cascade-top{background:var(--ink2);box-shadow:-4px 0 10px rgba(0,0,0,0.4);}
html.light .cal-week-event.cascade-top,html.light .cal-day-event.cascade-top{box-shadow:-4px 0 10px rgba(30,42,58,0.2);}

/* ─── CALENDAR EVENT SOLID TINTED BACKGROUNDS ──────────────── */
/* Ni cal-week-event ni cal-day-event NE smiju dobiti position:relative, moraju ostati
   absolute (linije 513 i 560) inače termini padnu u normalni tok i "cure" ispod grida
   umjesto u svoj sat. isolation:isolate je dovoljan za ::before overlay. */
.cal-week-event{background:var(--ink2);color:var(--snow);isolation:isolate;}
.cal-day-event{background:var(--ink2);color:var(--snow);isolation:isolate;}
.cal-week-event::before,.cal-day-event::before{content:'';position:absolute;inset:0;background:rgb(var(--ev-r,80),var(--ev-g,80),var(--ev-b,80));opacity:0.32;border-radius:inherit;pointer-events:none;z-index:-1;}
.cal-week-event .ev-time,.cal-day-event .ev-time{color:var(--snow);opacity:0.92;}
.cal-week-event .ev-name,.cal-day-event .ev-name{color:var(--snow);}
.cal-week-event .ev-service,.cal-week-event .ev-detail,.cal-day-event .ev-service,.cal-day-event .ev-detail{color:var(--snow);opacity:0.78;}
.cal-week-event:hover::before,.cal-day-event:hover::before{opacity:0.48;}
html.light .cal-week-event,html.light .cal-day-event{background:#fff;color:#1f2937;}
html.light .cal-week-event::before,html.light .cal-day-event::before{opacity:0.22;}
html.light .cal-week-event .ev-time,html.light .cal-day-event .ev-time,html.light .cal-week-event .ev-name,html.light .cal-day-event .ev-name{color:#1f2937;}
html.light .cal-week-event .ev-service,html.light .cal-week-event .ev-detail,html.light .cal-day-event .ev-service,html.light .cal-day-event .ev-detail{color:#4b5563;}

/* ─── CAPACITOR NATIVE APP, SAFE AREA & iOS SCROLL ───────────── */
html.capacitor-native .sidebar{padding-top:calc(env(safe-area-inset-top) + 8px);padding-bottom:env(safe-area-inset-bottom);}
html.capacitor-native .mo .modal{max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);}

/* iOS standalone PWA (dodano na home screen): isti safe-area tretman kao native.
   Header dobiva razmak od status bara, sidebar isto. Donja traka: vidi .bottom-tab-bar
   koja već ima padding-bottom:env(safe-area-inset-bottom). */
html.capacitor-native .mobile-header,
html.ios-standalone .mobile-header{padding-top:calc(env(safe-area-inset-top) + 10px);height:auto;min-height:52px;}
html.ios-standalone .sidebar{padding-top:calc(env(safe-area-inset-top) + 8px);}
/* Native app: contentInset:'never' → WebView puni cijeli fizički ekran, pa env() vraća
   stvarne vrijednosti. Gornji/donji razmak rješavaju sami elementi (header padding-top,
   traka/sidebar padding-bottom); body pokriva samo bočni notch (landscape) da se
   gore/dolje ne dupla s tim paddinzima. */
html.capacitor-native body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
/* iOS WebView gestures (pull to refresh disable, bez bounce) */
html.capacitor-native,html.capacitor-native body{overscroll-behavior-y:contain;}
/* Disable text selection za default UI elemente (kao native app) */
html.capacitor-native .nav-btn,html.capacitor-native .btn,html.capacitor-native .dash-sec{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}

/* Skip link — tipkovnicni korisnici preskacu navigaciju (a11y, WCAG 2.1 AA) */
.skip-link{position:absolute;top:-48px;left:8px;z-index:10000;padding:10px 18px;background:var(--teal,#1a8a7d);color:#fff;border-radius:6px;font-size:15px;text-decoration:none;transition:top .18s ease;}
.skip-link:focus{top:8px;outline:3px solid #fff;outline-offset:2px;}
/* T64 pristupačnost. Kontrast: tokeni u :root su potamnjeni do WCAG AA (4,5:1) na bijeloj i svijetloj
   pozadini; tamni sidebar zadržava svjetlije nijanse jer je ondje tekst na tamnom. */
html:not(.dark) .sidebar{--gold:#2EC4B6;--teal:#34D399;--amber:#F0B429;--fog:#AAB1BC;--red:#ff8a7a;} /* UI-16: na navy (#1e2a3a do #303b4a) tekst .Hub 6,7:1, Spojen 6,7:1, CEZIH u certifikaciji 6,9:1, sivi status 5,3:1, crveni 6,3:1 */
html.dark .sidebar,html.dark .md-badge-pill{--fog:#9A9A9A;--red:#EF7B6E;} /* UI-16: sivi 5,5:1 i crveni status 5,7:1 na #20242a i #2e1f22 (crveni bio 3,99 i 4,03:1) */ /* UI-16: sivi status na #20242a 5,5:1 (bio 4,28:1) */
html.dark .badge-checked_in{color:#8b5cf6;}
html.dark .badge-paid{color:#4ecdc4;}
html.dark .badge-unpaid,html.dark .badge-overdue{color:#ef5350;}
/* Vidljiv fokus s tipkovnice (teal), samo kod navigacije tipkovnicom */
.btn:focus-visible,.tab-btn:focus-visible,.mo button:focus-visible,[role="button"]:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sidebar button:focus-visible,.sidebar a:focus-visible,.sidebar select:focus-visible,.sidebar [role="button"]:focus-visible{outline:2px solid #2EC4B6;outline-offset:-2px;}
.mo [role="dialog"]:focus,.mo .modal:focus{outline:none;}

/* Hover stanja bez inline onmouseover/onmouseout (T68 C05; CSP bez 'unsafe-inline' za skripte).
   !important jer isti elementi imaju inline style (anatomija: showAnatomyRegion postavlja fill). */
#page-anatomy svg [data-region]:hover{fill:var(--gold-dim)!important}
.hover-odjava:hover{background:rgba(192,57,43,0.2)!important;border-color:rgba(192,57,43,0.4)!important}
.hover-dx-oznaka:hover{background:rgba(192,57,43,0.2)!important;border-color:rgba(192,57,43,0.6)!important}
.hover-dx-izbor:hover{border-color:var(--gold)!important}
.ctx-item:hover{background:var(--ink3)}
/* C06: hover iz modula (boja dolazi kroz --hov-bg / --hov-bd na elementu, umjesto onmouseover) */
.hov-bg:hover{background:var(--hov-bg)!important}
.hov-bd:hover{border-color:var(--hov-bd)!important}

/* QA UI-19 val 11: zatvaranje modala (×, bilo 17x22) i Danas/Sutra/Prekosutra (bilo 20 px) dovoljno veliki i na računalu */
.modal-close{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;}
.date-sc-btn{min-height:28px;}
/* QA UI-19: dodirni ciljevi na mobitelu najmanje 44 px (bili 24 do 38 px); veća površina, ne veća ikona */
@media (max-width:768px){
  .date-sc-btn{min-height:44px;padding:3px 14px;}
  .mobile-header .hamburger-btn,.mobile-header .notif-bell,
  .cal-mob-menu,.cal-mob-date,.cal-mob-icon,.modal-close,.quick-add-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .mo input[type=checkbox],.page input[type=checkbox]{width:20px !important;height:20px;}
}

/* QA UI-18: KPI kartice kalendara u jednom tankom redu, da se na 1440x900 vidi više sati rasporeda */
#page-appointments .stats.apst-kompakt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
#page-appointments .stats.apst-kompakt .sc{flex:1 1 0;min-width:140px;padding:8px 12px !important;}
#page-appointments .stats.apst-kompakt .sc-icon{display:none;}
#page-appointments .stats.apst-kompakt .sc-val{font-size:1.15rem;}
@media (max-width:768px){#page-appointments .stats.apst-kompakt{display:none;}}

/* QA UI-10: na mobitelu kontakt je kompaktan (ime, telefon, zadnji dolazak), prazne ćelije kartice se ne crtaju */
@media (max-width:768px){
  #contacts-tbody td:nth-child(3),#contacts-tbody td:nth-child(4),#contacts-tbody td:nth-child(5),#contacts-tbody td:nth-child(6){display:none !important;}
  #contacts-tbody td:first-child{font-size:0.95rem;font-weight:600;}
  #contacts-tbody td:first-child::before{display:none;}
  table.tbl tbody td:empty,.tw table tbody td:empty{display:none;}
  .dosje-stat{padding:8px 6px;}
  .dosje-stat .ds-val{font-size:1rem;}
}

/* QA UI-24: cjenik čarobnjaka na mobitelu u jednom retku po usluzi (globalni input{width:100%} ga je lomio u 6 redaka);
   poruka (toast) na mobitelu ide gore, da ne pokriva gumb Dalje u podnožju prozora */
@media (max-width:768px){
  .onb-svc-row{flex-wrap:nowrap !important;}
  .onb-svc-row .onb-svc-price{width:70px !important;flex:0 0 70px;}
  .onb-svc-row .onb-svc-dur{width:52px !important;flex:0 0 52px;}
  #toast-container{top:calc(env(safe-area-inset-top,0px) + 60px) !important;bottom:auto !important;} /* ispod mobilnog zaglavlja (52 px) */
}

/* QA UI-38: u cjeniku čarobnjaka na mobitelu naziv usluge se prelama umjesto da se reže */
@media (max-width:768px){ .onb-svc-row .onb-svc-name{white-space:normal !important;overflow:visible !important;line-height:1.25;} }

/* QA UI-18: oznaka "+N" za treći i daljnje preklopljene termine u tjednom prikazu */
.cal-week-more{position:absolute;z-index:3;height:22px;border-radius:6px;background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold);font-size:0.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.cal-week-more:hover{background:var(--gold);color:#fff;}