/* Shared by all four screens: colour themes (incl. dark), alert-tone settings, complaints, ratings, RTL fixes */
:root{--ink:var(--dark);--on-primary:#fff}
body{color:var(--ink)}
/* RTL: on/off switches slide the other way */
html[dir=rtl] .toggle::after{left:auto;right:3px}
html[dir=rtl] .toggle.on::after{transform:translateX(-18px)}
.timer,.timer *{direction:ltr;unicode-bidi:isolate}
.off,[dir=ltr]{unicode-bidi:isolate}

/* ---------- dark themes ---------- */
html[data-mode=dark] body{background:#000}
html[data-mode=dark] body.portal{background:var(--bg)}
html[data-mode=dark] :is(.iconbtn,.search,.cat .ci,.chip,.fcard,.dod,.rcard,.rhead,.addbtn,.btn.ghost,.card,.trk,.kpi,.tabs button,.ocard,.preview .pv-top,.pc,.inp,.sel,.ocd,.seg2 button.on,.login .box,.modal .mb,.drawer,.appr,.dd,.field input,.field select,.field textarea,.coupon input,.opt,.seg button,.citem,.tonecard .tc-opt,.tsw,.tl-card,.qa-box,.tk,.rv){background:var(--card);color:var(--ink);border-color:var(--line)}
html[data-mode=dark] .tabbar{background:rgba(20,22,28,.94);border-color:var(--line)}
html[data-mode=dark] .bnav{background:rgba(20,22,28,.96);border-color:var(--line)}
html[data-mode=dark] :is(.stats b,.empty b,.addr b,.tl li.done,.chart .cb em,.search input,h1,h2,h3,b,strong){color:inherit}
html[data-mode=dark] .search input::placeholder{color:var(--muted)}
html[data-mode=dark] .bottombar{background:linear-gradient(transparent,var(--bg) 30%)}
html[data-mode=dark] .tbl th,html[data-mode=dark] .tbl td{border-color:var(--line)}
html[data-mode=dark] .demo-note{color:var(--ink);background:rgba(var(--accent-rgb),.16)}
html[data-mode=dark] .side,html[data-mode=dark] .demobar{background:#05060a}
html[data-mode=dark] img{filter:brightness(.92)}
html[data-mode=dark] .leaflet-tile-pane{filter:brightness(.75) contrast(1.05)}
/* light primary (e.g. lime): dark text on primary surfaces */
html[data-onp=dark] :is(.btn,.bigbtn,.badge,.logo,.off,.tag.promo,.stepper,.tabs button.on,.side a .cnt,.bnav a .cnt,.tagnew,.demobar .brandlink,.deal){color:#111}
html[data-onp=dark] .deal :is(b,small,span){color:#111}
html[data-onp=dark] .btn.ghost{color:var(--ink)}

/* ---------- theme picker ---------- */
.themepick{display:grid;gap:14px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.tsw{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:14px;border:2px solid var(--line);background:#fff;text-align:start;cursor:pointer}
.tsw.on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2)}
.tsw-pv{position:relative;display:block;height:64px;border-radius:10px;border:1px solid;overflow:hidden}
.tsw-pv i{position:absolute;inset:0 0 auto 0;height:14px}
.tsw-pv em{position:absolute;left:8px;top:20px;font-style:normal;font-weight:800;font-size:12px;padding:2px 6px;border-radius:6px}
.tsw-pv b{position:absolute;right:8px;bottom:8px;min-width:30px;height:22px;border-radius:7px;font-size:11px;display:grid;place-items:center;padding:0 6px}
.tsw-pv u{position:absolute;left:8px;bottom:9px;width:26px;height:8px;border-radius:4px}
html[dir=rtl] .tsw-pv em,html[dir=rtl] .tsw-pv u{left:auto;right:8px}html[dir=rtl] .tsw-pv b{right:auto;left:8px}
.tsw-n{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-weight:750;font-size:13px}
.tsw-n small{font-size:10.5px;font-weight:750;padding:1px 6px;border-radius:6px;background:rgba(var(--primary-rgb),.1);color:var(--muted)}
.tsw-n small.tdark{background:#16131F;color:#fff}
.tsw-c{font-size:11px;font-weight:750}.tsw-c.ok{color:#0c7a3c}.tsw-c.warn{color:#b45309}
html[data-mode=dark] .tsw-c.ok{color:#5ee08f}
.tlive h4{font-size:13px;margin-bottom:8px;color:var(--muted)}
.tl-phone{border-radius:16px;padding:10px;display:grid;gap:8px;max-width:340px;border:1px solid var(--line)}
.tl-top{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;border:1px solid}
.tl-logo{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:900}
.tl-card{position:relative;display:grid;gap:2px;padding:10px;border-radius:12px;border:1px solid}
.tl-badge{position:absolute;top:8px;right:8px;font-size:11px;font-weight:850;padding:2px 7px;border-radius:7px}
html[dir=rtl] .tl-badge{right:auto;left:8px}
.tl-link{font-size:12.5px;font-weight:800}
.tl-btn{display:block;text-align:center;font-weight:800;padding:11px;border-radius:12px}
.tcheck{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tcheck span{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(18,161,80,.12);color:#0c7a3c}
.tcheck span.warn{background:rgba(245,158,11,.16);color:#92400e}
html[data-mode=dark] .tcheck span{color:#7ee2a8}
.tcustom{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tcustom .colorin{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.tcustom input[type=color]{width:42px;height:34px;border:0;background:none;padding:0}

/* ---------- alert tones ---------- */
.tonecard{display:grid;gap:12px}
.tc-src{font-size:13px;font-weight:700;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tc-src.own{color:#0c7a3c}
.tc-src .lnk{color:var(--primary);font-weight:800;text-decoration:underline}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tc-opt{display:flex;align-items:center;border:2px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.tc-opt.on{border-color:var(--primary);background:rgba(var(--primary-rgb),.06)}
.tc-pick{flex:1;display:flex;align-items:center;gap:8px;padding:10px;font-weight:750;font-size:13.5px;text-align:start;min-width:0}
.tc-pick span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-ic{font-size:18px}
.tc-play{width:40px;align-self:stretch;font-size:14px;color:var(--primary);border-inline-start:1px solid var(--line)}
.tc-vol{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px}
.tc-vol input{flex:1;accent-color:var(--primary)}
.tc-vol b{min-width:42px;text-align:end}
.tc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tc-rep{justify-content:space-between;flex-wrap:nowrap}
.tc-rep small{display:block}
.tc-up{cursor:pointer}
.muted{color:var(--muted)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- complaints / tickets ---------- */
.stchip{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px}
.stchip.open{background:#FEE2E2;color:#991B1B}.stchip.review{background:#FEF3C7;color:#92400E}.stchip.resolved{background:#DCFCE7;color:#166534}
.cats2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cats2 button{display:flex;align-items:center;gap:8px;padding:11px;border:2px solid var(--line);border-radius:12px;background:var(--card);font-weight:700;font-size:13.5px;text-align:start}
.cats2 button.on{border-color:var(--primary);background:rgba(var(--primary-rgb),.07)}
.thread{display:grid;gap:8px}
.msg{padding:10px 12px;border-radius:14px;background:rgba(var(--primary-rgb),.07);max-width:92%}
.msg.customer{justify-self:end;background:var(--primary);color:var(--on-primary)}
.msg.customer small{color:inherit;opacity:.8}
.msg.system{justify-self:center;background:transparent;color:var(--muted);font-size:12.5px;text-align:center;padding:2px}
.msg small{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:2px}
.msg img{max-width:180px;border-radius:10px;margin-top:6px}
.tk{display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.tk .tt{flex:1;min-width:0}.tk .tt b{display:block;font-size:14px}.tk .tt small{color:var(--muted);font-size:12.5px}
.photo-in{display:flex;align-items:center;gap:10px}
.photo-in img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.notice{display:flex;gap:10px;align-items:center;padding:12px 14px;margin:8px 16px;border-radius:14px;background:rgba(18,161,80,.12);color:#0c5c2e;font-weight:700;font-size:13.5px}
html[data-mode=dark] .notice{color:#9ff0c0}
.notice .x{margin-inline-start:auto;font-weight:900;opacity:.7}
/* ---------- ratings ---------- */
.stars{display:flex;gap:6px}
.stars button{font-size:30px;line-height:1;color:#D4D1DC}
.stars button.on{color:#F59E0B}
.rv{padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;gap:6px}
.rv .rs{color:#F59E0B;font-weight:800;letter-spacing:1px}
.rv .reply{background:rgba(var(--primary-rgb),.07);border-radius:10px;padding:8px 10px;font-size:13px}
.rv.hidden{opacity:.55}
.ratingpill{display:inline-flex;gap:4px;align-items:center;font-weight:800}
/* ---------- timeline / misc ---------- */
.tline{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.tline li{display:flex;gap:10px;font-size:13.5px;align-items:baseline}
.tline li time{color:var(--muted);font-size:12px;min-width:46px;font-variant-numeric:tabular-nums}
.schedbadge{display:inline-flex;align-items:center;gap:4px;background:#EDE9FE;color:#5B21B6;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.cxbadge{display:inline-flex;align-items:center;gap:4px;background:#FEE2E2;color:#991B1B;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.rfbadge{display:inline-flex;align-items:center;gap:4px;background:#DCFCE7;color:#166534;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.zonewarn{background:#FEF2F2;color:#991B1B;border-radius:12px;padding:10px 12px;font-weight:700;font-size:13.5px}
html[data-mode=dark] .zonewarn{background:#3b1414;color:#fecaca}
.slotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:240px;overflow:auto;padding:2px}
.slotgrid button{padding:10px 4px;border:2px solid var(--line);border-radius:12px;font-weight:750;font-size:13px;background:var(--card)}
.slotgrid button.on{border-color:var(--primary);background:rgba(var(--primary-rgb),.08)}

.tabbar{grid-template-columns:repeat(5,1fr)}
.btn.red{background:#DC2626;color:#fff}
.iconbtn.dot{position:relative}.iconbtn.dot::after{content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:#DC2626;border:2px solid var(--card)}

html[data-mode=dark] .btn.ghost{background:var(--card)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--line)}
html[data-mode=dark] .btn.dark{background:#2B3142!important;color:#fff!important}
html[data-mode=dark] .cat.on{color:var(--ink)}
html[data-mode=dark] .pill.p5{background:var(--line);color:var(--ink)}
.tc-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}

.chev{display:inline-block}html[dir=rtl] .chev{transform:scaleX(-1)}
html[data-mode=dark] :is(.tc-opt.on,.tsw.on,.opt.on,.slotgrid button.on,.cats2 button.on){border-color:var(--primary)!important;background:rgba(var(--primary-rgb),.14)!important}
html[data-mode=dark] :is(.seg button.on,.chip.on,.tabs button.on,.seg2 button.on){background:var(--primary)!important;color:var(--on-primary)!important}
/* dark: tinted labels need light text */
html[data-mode=dark] .pill.p0{background:rgba(var(--primary-rgb),.22);color:var(--ink)}
html[data-mode=dark] :is(.pill.p1,.pill.p2){background:rgba(var(--accent-rgb),.22);color:#FFE6A3}
html[data-mode=dark] .pill.p3{background:rgba(18,161,80,.25);color:#9EF0C0}
html[data-mode=dark] .pill.p4{background:rgba(10,102,255,.25);color:#B8D2FF}
html[data-mode=dark] :is(.demo-lbl,.demo-note){color:#FFE6A3}
html[data-mode=dark] .col{background:rgba(255,255,255,.05)}
html[data-mode=dark] .col h4{color:var(--ink)}
html[data-mode=dark] .col h4 .cnt{background:var(--line);color:var(--ink)}
html[data-mode=dark] :is(.ocd ul,.ocard ul){color:var(--ink)}
html[data-mode=dark] .chip2.g,html[data-mode=dark] .cstep div.done,html[data-mode=dark] .applied,html[data-mode=dark] .st.active{color:#9EF0C0}
html[data-mode=dark] .chip2.y,html[data-mode=dark] .st.pending{color:#FFE6A3}
html[data-mode=dark] .chip2.r{background:rgba(220,40,40,.25);color:#FFC2C2}
html[data-mode=dark] .chip2.b{background:rgba(10,102,255,.25);color:#B8D2FF}
html[data-mode=dark] .st.rejected{color:#FFA8A8}
.bigbtn:disabled{opacity:1;background:#BDBAC6!important;color:#3c3948!important}
html[data-mode=dark] .bigbtn:disabled{background:#3a3846!important;color:#c9c6d4!important}
textarea,input[type=text],input:not([type]){unicode-bidi:plaintext}
.trk.nomap{margin-top:0!important}