:root{--bg:#eef2f4;--card:#fff;--ink:#263238;--muted:#78909c;--line:#e3e8eb;--primary:#1e9e4f;--primary-d:#16803f;--primary-l:#e3f5e9;--bad:#e53935;--pink:#e91e63;--warn:#fff8e1;--side:#263238;--shadow:0 1px 3px rgba(38,50,56,.12),0 1px 2px rgba(38,50,56,.08)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14.5px/1.5 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3{margin:0}a{color:var(--primary-d)}
.muted{color:var(--muted)}.small{font-size:12.5px}.grow{flex:1}.num{text-align:right}
.ic{flex:none;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* shell */
.shell{display:flex;min-height:100vh}
.sidebar{width:232px;background:var(--side);color:#cfd8dc;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .18s;overflow:hidden;flex:none}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:8px}
.sidebar nav a{display:flex;align-items:center;gap:12px;color:#cfd8dc;text-decoration:none;padding:8px 10px;border-radius:8px;white-space:nowrap}
.sidebar nav a:hover{background:rgba(255,255,255,.07)}
.sidebar nav a.active{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.tile{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.c-teal{background:#26a69a}.c-blue{background:#42a5f5}.c-orange{background:#ffa726}.c-green{background:#66bb6a}.c-purple{background:#ab47bc}.c-grey{background:#78909c}.c-red{background:#ef5350}
.count{margin-left:auto;background:#ffb300;color:#3e2c00;border-radius:10px;padding:0 7px;font-size:12px;font-weight:700}
.side-foot{margin-top:auto;padding:14px 18px;font-size:12px;color:#78909c;white-space:nowrap}
body.mini .sidebar{width:64px}body.mini .brand .full{display:none}body.mini .brand .mark{display:block}body.mini .lbl,body.mini .count,body.mini .side-foot{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:56px;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;padding:0 14px;position:sticky;top:0;z-index:20}
.topbar form{margin:0}
.page-title{font-size:19px;font-weight:600}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}
.uname{font-size:13.5px;color:var(--muted)}
.content{padding:20px 22px 40px;max-width:1280px;width:100%}
.side-scrim{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 18px;border:1px solid #cfd8dc;border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;font:inherit;font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:13px;min-height:38px}
.btn:hover{background:#f5f7f8}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--primary-d)}
.btn.text{border-color:transparent;background:none;color:var(--primary-d)}.btn.text:hover{background:var(--primary-l)}
.btn.text.off{color:#b0bec5;pointer-events:none}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.locate{background:var(--bad);border-color:var(--bad);color:#fff;padding:4px 14px;min-height:30px;font-size:12px;box-shadow:var(--shadow)}
.btn.small{padding:4px 12px;min-height:30px;font-size:12px}
.btn.outline{color:var(--primary-d);border-color:var(--primary)}
.icon-btn{width:36px;height:36px;border-radius:50%;border:0;background:none;color:#546e7a;display:inline-grid;place-items:center;cursor:pointer;text-decoration:none;padding:0}
.icon-btn:hover{background:rgba(0,0,0,.06)}
.icon-btn.edit{color:var(--primary)}.icon-btn.del{color:var(--pink)}.icon-btn.view{color:#1e88e5}.icon-btn.sms{color:#2e7d32}
.icon-btn.disabled{color:#cfd8dc;cursor:not-allowed}.icon-btn.disabled:hover{background:none}
.icon-btn.light{color:#fff}.icon-btn.light:hover{background:rgba(255,255,255,.18)}
.fab,.round{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;text-decoration:none;cursor:pointer;border:0;padding:0}
.fab{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(30,158,79,.45)}.fab:hover{background:var(--primary-d)}
.round{background:#fff;color:#546e7a;border:1px solid #cfd8dc}.round:hover{background:#f5f7f8}
.fab.red{background:var(--bad);box-shadow:0 2px 6px rgba(229,57,53,.4)}
.actions{display:flex;gap:2px;align-items:center;justify-content:flex-end}.actions form{margin:0}

/* panels, toolbar */
.panel{background:var(--card);border-radius:12px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.panel.pad,.pad{padding:20px}
.panel.narrow{max-width:520px}.panel.wide{max-width:760px}
.panel-head{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.search{position:relative;flex:1;min-width:200px;max-width:380px;margin:0}
.search input{margin:0;padding-left:40px;border-radius:22px;height:40px;background:#f4f7f8;border-color:transparent}
.search input:focus{background:#fff}
.search button{position:absolute;left:2px;top:2px;width:36px;height:36px;border:0;background:none;color:#78909c;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0}
.tabs{display:flex;gap:4px;background:#f0f3f4;padding:3px;border-radius:22px}
.tab{padding:5px 14px;border-radius:18px;text-decoration:none;color:#546e7a;font-weight:600;font-size:13px}
.tab.active{background:#fff;color:var(--primary-d);box-shadow:var(--shadow)}
.summary{padding:10px 16px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.alert{padding:11px 14px;border-radius:10px;margin-bottom:14px;background:var(--primary-l);color:#0f5a2b}
.alert.warn{background:var(--warn);color:#6d4c00;border:1px solid #ffe082}
.alert.js-error{margin:0 0 12px}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:#fafbfc}
th.num,td.num{text-align:right}
tbody tr:hover{background:#fafcfc}
tr.inactive td{opacity:.5}tr.inactive td:last-child,tr.inactive td.keep{opacity:1}
.who{display:flex;align-items:center;gap:10px}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.av.c0{background:#26a69a}.av.c1{background:#42a5f5}.av.c2{background:#ab47bc}.av.c3{background:#ff7043}.av.c4{background:#5c6bc0}.av.c5{background:#8d6e63}
.nm{font-weight:600}.sub{font-size:12.5px;color:var(--muted)}
.chip{display:inline-block;padding:1px 9px;border-radius:12px;font-size:12px;font-weight:600;margin:1px 3px 1px 0}
.chip.rental{background:#e3f2fd;color:#1565c0}.chip.home{background:#e8f5e9;color:#2e7d32}.chip.shop{background:#fff3e0;color:#e65100}.chip.hotel{background:#f3e5f5;color:#7b1fa2}.chip.bag{background:#efebe9;color:#5d4037}.chip.others{background:#fce4ec;color:#c2185b}
.chip.ok{background:#e3f5e9;color:#16803f}.chip.gray{background:#eceff1;color:#546e7a}
.owe{color:#c62828;font-weight:700}.paid{color:#2e7d32;font-weight:600}
.pct{font-weight:700;color:#546e7a}.pct.bad{color:#fff;background:var(--bad);padding:2px 9px;border-radius:12px}
.switch{position:relative;width:40px;height:22px;border:0;border-radius:11px;background:#b0bec5;cursor:pointer;padding:0;transition:background .15s}
.switch::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.switch.on{background:var(--primary)}.switch.on::before{transform:translateX(18px)}
.switch.busy{opacity:.5;cursor:progress}
.empty{text-align:center;color:var(--muted);padding:34px 10px!important}
.pager{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;flex-wrap:wrap;gap:8px}
.pager-btns{display:flex;align-items:center;gap:8px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.stat{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:16px;display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit}
a.stat:hover{box-shadow:0 3px 10px rgba(38,50,56,.18)}
.stat .tile{width:46px;height:46px;border-radius:12px}
.stat .v{font-size:21px;font-weight:700;line-height:1.2}.stat .k{font-size:12.5px;color:var(--muted)}
.two{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.quick{display:flex;flex-direction:column;gap:10px;padding:16px}
.quick .btn{justify-content:flex-start}
.panel h2{font-size:16px;padding:14px 16px 0}.panel .panel-head h2{padding:0}

/* forms */
label{display:block}
.field{display:block;margin:0 0 14px}
.lbl{display:block;font-size:12.5px;font-weight:600;color:#546e7a;margin-bottom:4px}
.inp{position:relative;display:block}
.inp>.ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#90a4ae;pointer-events:none}
input,select,textarea{display:block;width:100%;padding:9px 12px;border:1px solid #cfd8dc;border-radius:8px;font:inherit;background:#fff;color:var(--ink);min-height:42px}
.inp>.ic+input,.inp>.ic+select{padding-left:40px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(30,158,79,.35);border-color:var(--primary)}
input.invalid{border-color:var(--bad)}
input:disabled{background:#f0f3f4}
input[type=checkbox]{display:inline-block;width:18px;height:18px;min-height:0;accent-color:var(--primary);padding:0}
input[type=file]{padding:14px;border-style:dashed;background:#fafcfc}
textarea{min-height:200px}
.check{display:flex;align-items:center;gap:10px;font-size:14px;margin:6px 0 14px;cursor:pointer}
.error{color:var(--bad);font-size:12.5px;margin-top:3px}
.hint{background:#f3f6f7;border-radius:8px;padding:9px 12px;font-size:13px;color:#546e7a;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.five{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 10px}
.grid .full{grid-column:1/-1}
.sect{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:6px 0 8px}
.totalbar{display:flex;justify-content:space-between;align-items:center;background:var(--primary-l);color:#0f5a2b;border-radius:10px;padding:10px 14px;font-weight:700;margin-bottom:14px}
.totalbar .t{font-size:20px}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto}
.modal[hidden]{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(20,30,36,.55);animation:fade .15s}
.modal-box{position:relative;width:100%;max-width:560px;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);animation:pop .16s ease-out;max-height:92vh;overflow:auto}
.modal-box.sm{max-width:420px}.modal-box.lg{max-width:940px}
.modal-head{display:flex;align-items:center;gap:10px;padding:12px 8px 12px 20px;background:var(--primary);color:#fff;position:sticky;top:0;z-index:2}
.modal-head h2{font-size:18px;font-weight:600;flex:1}
.modal-body{padding:20px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff}
.modal-loading{padding:60px;text-align:center;color:var(--muted)}
.spinner{width:30px;height:30px;border:3px solid #cfd8dc;border-top-color:var(--primary);border-radius:50%;margin:0 auto 10px;animation:spin .8s linear infinite}
.confirm-text{font-size:15px;margin:0}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
body.modal-open{overflow:hidden}

/* toast */
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#263238;color:#fff;padding:11px 18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.3);animation:pop .2s;max-width:90vw;pointer-events:auto}
.toast.err{background:#c62828}.toast.ok::before{content:"✓ ";color:#a5e3b8;font-weight:700}

/* progress on buttons */
button.loading,button.busy{position:relative;overflow:hidden;cursor:progress}
button.loading::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:35%;background:currentColor;opacity:.7;animation:dc-bar 1s ease-in-out infinite}
button.icon-btn.busy,button.search-go.busy{opacity:.5}
@keyframes dc-bar{0%{left:-35%}100%{left:100%}}
button:disabled{cursor:progress}

/* invoice */
.invoice{max-width:640px;margin:0 auto}
.invoice .meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.invoice h3{font-size:20px}
.invoice td,.invoice th{white-space:normal}.invoice .total td{font-weight:700;border-top:2px solid var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.tiles div{border-radius:10px;padding:10px 12px;background:#f3f6f7}.tiles b{display:block;font-size:20px}
.tiles .g{background:#e8f5e9}.tiles .y{background:#fff8e1}.tiles .b{background:#e3f2fd}
.dropzone p{margin:8px 0 0}

/* login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f5a2b,#1e9e4f 55%,#6fcf8e);padding:16px}
.login{width:100%;max-width:380px;background:#fff;border-radius:16px;padding:30px 26px;box-shadow:0 14px 50px rgba(0,0,0,.3)}
.login .login h1{text-align:center;font-size:22px}.login .sub{text-align:center;margin-bottom:18px}
.login .btn{width:100%;margin-top:6px}

/* responsive */
@media (max-width:900px){.two{grid-template-columns:1fr}}
@media (max-width:820px){
 .sidebar{position:fixed;z-index:60;left:0;top:0;transform:translateX(-100%);transition:transform .2s;width:250px!important}
 body.nav-open .sidebar{transform:none}
 body.nav-open .side-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}
 body.mini .brand .full{display:block}body.mini .brand .mark{display:none}body.mini .lbl,body.mini .count,body.mini .side-foot{display:revert}
 .content{padding:14px 12px 40px}.uname{display:none}
 .grid,.grid.three{grid-template-columns:1fr}.grid.five{grid-template-columns:repeat(3,1fr)}
 .modal{padding:0;align-items:flex-end}.modal-box,.modal-box.lg,.modal-box.sm{max-width:100%;border-radius:16px 16px 0 0;max-height:94vh}
}
@media print{
 body.modal-open .shell,.modal-backdrop,.modal-head,.modal-foot,#toasts,.noprint{display:none!important}
 body.modal-open .modal{position:static;padding:0;display:block}.modal-box{box-shadow:none;max-height:none;overflow:visible}
 .sidebar,.topbar{display:none}body{background:#fff}.panel{box-shadow:none}
}

/* sortable column headings */
th.sortable a,table.js-sort thead th{color:inherit;text-decoration:none}
th.sortable a{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
th.sortable a:hover,table.js-sort thead th:hover{color:var(--primary-d)}
th.num a{flex-direction:row-reverse}
.arrow{font-size:10px;opacity:.35}
th.sorted .arrow,th.sorted{opacity:1;color:var(--primary-d)}th.sorted .arrow{opacity:1}
table.js-sort thead th{cursor:pointer;user-select:none}
table.js-sort thead th:not(:empty):not(.sorted)::after{content:" ↕";font-size:10px;opacity:.35}
table.js-sort thead th.sorted[aria-sort=ascending]::after{content:" ▲";font-size:10px}
table.js-sort thead th.sorted[aria-sort=descending]::after{content:" ▼";font-size:10px}

/* brand logo */
.brand{display:flex;align-items:center;justify-content:center;height:68px;margin:10px 10px 4px;padding:6px 10px;background:transparent;border-radius:12px;text-decoration:none}
.brand img{display:block;max-width:100%}
.brand .full{height:48px;width:auto}
.brand .mark{display:none;height:36px;width:36px}
body.mini .brand{margin:10px 8px 4px;padding:4px;height:48px}
.login .logo-img{display:block;margin:0 auto 8px;height:84px;width:auto;max-width:100%}

/* ---------- dark theme (default) ---------- */
#theme-btn .t-sun{display:none}
html[data-theme=dark] #theme-btn .t-moon{display:none}
html[data-theme=dark] #theme-btn .t-sun{display:block}
html[data-theme=dark]{--bg:#0f1519;--card:#192227;--ink:#e4ebee;--muted:#8fa3ad;--line:#27343b;--primary-d:#4cc77a;--primary-l:rgba(30,158,79,.18);--warn:rgba(255,179,0,.12);--shadow:0 1px 3px rgba(0,0,0,.5);color-scheme:dark}
html[data-theme=dark] body{background:var(--bg);color:var(--ink)}
html[data-theme=dark] .sidebar{background:#0b1013}
html[data-theme=dark] .topbar{background:#151d21}
html[data-theme=dark] .icon-btn{color:#b0bec5}
html[data-theme=dark] .icon-btn:hover{background:rgba(255,255,255,.08)}
html[data-theme=dark] .icon-btn.edit{color:#4cc77a}html[data-theme=dark] .icon-btn.del{color:#f06292}html[data-theme=dark] .icon-btn.view{color:#64b5f6}html[data-theme=dark] .icon-btn.sms{color:#66bb6a}
html[data-theme=dark] .icon-btn.disabled{color:#3b4a52}
html[data-theme=dark] .icon-btn.light{color:#fff}
html[data-theme=dark] .btn{background:#1f2b31;border-color:#34444d;color:var(--ink)}
html[data-theme=dark] .btn:hover{background:#26343b}
html[data-theme=dark] .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
html[data-theme=dark] .btn.primary:hover{background:#16803f}
html[data-theme=dark] .btn.text{background:none;border-color:transparent;color:#4cc77a}
html[data-theme=dark] .btn.text:hover{background:rgba(76,199,122,.12)}
html[data-theme=dark] .btn.text.off{color:#44545c}
html[data-theme=dark] .btn.outline{color:#4cc77a;border-color:#2d7d4d;background:transparent}
html[data-theme=dark] .btn.danger,html[data-theme=dark] .btn.locate{background:var(--bad);border-color:var(--bad);color:#fff}
html[data-theme=dark] .round{background:#1f2b31;border-color:#34444d;color:#b0bec5}
html[data-theme=dark] .round:hover{background:#26343b}
html[data-theme=dark] a{color:#4cc77a}
html[data-theme=dark] .panel-head,html[data-theme=dark] .summary,html[data-theme=dark] .modal-foot{border-color:var(--line)}
html[data-theme=dark] .search input{background:#101a1e;border-color:transparent}
html[data-theme=dark] .search input:focus{background:#0d1519}
html[data-theme=dark] .search button{color:#8fa3ad}
html[data-theme=dark] .tabs{background:#101a1e}
html[data-theme=dark] .tab{color:#9fb1ba}
html[data-theme=dark] .tab.active{background:#26343b;color:#4cc77a}
html[data-theme=dark] th{background:#1d282e;color:#8fa3ad}
html[data-theme=dark] tbody tr:hover{background:#1e2a30}
html[data-theme=dark] th,html[data-theme=dark] td{border-color:var(--line)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:#101a1e;border-color:#34444d;color:var(--ink)}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#5f7480}
html[data-theme=dark] input:disabled{background:#161f24;color:#7d909a}
html[data-theme=dark] input[type=file]{background:#101a1e}
html[data-theme=dark] input:focus,html[data-theme=dark] select:focus,html[data-theme=dark] textarea:focus{outline-color:rgba(76,199,122,.45);border-color:#2d9b5a}
html[data-theme=dark] .lbl{color:#9fb1ba}
html[data-theme=dark] .inp>.ic{color:#6b7f8a}
html[data-theme=dark] .hint{background:#202c32;color:#9fb1ba}
html[data-theme=dark] .modal-backdrop{background:rgba(0,0,0,.7)}
html[data-theme=dark] .modal-box{background:#192227;box-shadow:0 12px 40px rgba(0,0,0,.7)}
html[data-theme=dark] .modal-foot{background:#192227}
html[data-theme=dark] .alert{color:#b9efce}
html[data-theme=dark] .alert.warn{color:#ffd980;border-color:rgba(255,193,7,.3)}
html[data-theme=dark] .totalbar{color:#b9efce}
html[data-theme=dark] .tiles div{background:#202c32}
html[data-theme=dark] .tiles .g{background:rgba(76,199,122,.14)}html[data-theme=dark] .tiles .y{background:rgba(255,193,7,.13)}html[data-theme=dark] .tiles .b{background:rgba(100,181,246,.13)}
html[data-theme=dark] .chip.rental{background:rgba(66,165,245,.18);color:#90caf9}
html[data-theme=dark] .chip.home{background:rgba(102,187,106,.18);color:#a5d6a7}
html[data-theme=dark] .chip.shop{background:rgba(255,167,38,.18);color:#ffcc80}
html[data-theme=dark] .chip.hotel{background:rgba(171,71,188,.22);color:#ce93d8}
html[data-theme=dark] .chip.bag{background:rgba(141,110,99,.25);color:#bcaaa4}
html[data-theme=dark] .chip.others{background:rgba(240,98,146,.18);color:#f48fb1}
html[data-theme=dark] .chip.ok{background:rgba(76,199,122,.18);color:#81e0a3}
html[data-theme=dark] .chip.gray{background:#26343b;color:#9fb1ba}
html[data-theme=dark] .owe{color:#ff7a70}html[data-theme=dark] .paid{color:#66d08c}
html[data-theme=dark] .pct{color:#9fb1ba}
html[data-theme=dark] .switch{background:#46555d}html[data-theme=dark] .switch.on{background:var(--primary)}
html[data-theme=dark] .toast{background:#2a3940;box-shadow:0 6px 20px rgba(0,0,0,.6)}
html[data-theme=dark] .spinner{border-color:#34444d;border-top-color:#4cc77a}
html[data-theme=dark] .stat{background:var(--card)}
html[data-theme=dark] a.stat:hover{box-shadow:0 3px 12px rgba(0,0,0,.6)}
html[data-theme=dark] th.sortable a:hover,html[data-theme=dark] table.js-sort thead th:hover,html[data-theme=dark] th.sorted,html[data-theme=dark] th.sorted .arrow{color:#4cc77a}
html[data-theme=dark] .invoice .total td{border-top-color:#8fa3ad}
html[data-theme=dark] .count{color:#3e2c00}
html[data-theme=dark] .login{background:#192227}
html[data-theme=dark] .login-page{background:linear-gradient(135deg,#071a10,#0f5a2b 60%,#16803f)}
@media print{html[data-theme=dark]{--bg:#fff;--card:#fff;--ink:#000;--muted:#444;--line:#ccc}html[data-theme=dark] body,html[data-theme=dark] .modal-box{background:#fff;color:#000}html[data-theme=dark] th{background:#eee;color:#000}html[data-theme=dark] .owe,html[data-theme=dark] .paid{color:#000}}

/* clients list: fit on one screen */
.content{max-width:1700px}
table.compact{font-size:13.5px}
table.compact th,table.compact td{padding:7px 8px;white-space:normal}
table.compact th{white-space:nowrap}
table.compact td.num,table.compact td.keep,table.compact td:nth-child(4){white-space:nowrap}
table.compact .svc{min-width:120px}
table.compact .chip{font-size:11.5px;padding:0 7px;margin:1px 2px 1px 0}
table.compact .av{width:28px;height:28px;font-size:13px}
table.compact .who{gap:8px}
table.compact .actions .icon-btn{width:30px;height:30px}
table.compact .actions .ic{width:18px;height:18px}
table.compact .pct.bad{padding:1px 7px}
@media (max-width:1100px){table.compact th:nth-child(5),table.compact td.svc{display:none}}

.smscol{width:44px;padding-left:6px!important;padding-right:2px!important}
@media (max-width:820px){table.compact .smscol{position:sticky;left:0;z-index:1;background:var(--card)}table.compact thead .smscol{background:#fafbfc}html[data-theme=dark] table.compact thead .smscol{background:#1d282e}}

/* dashboard */
.periodbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.periodbar .round{font-size:22px;line-height:1;color:var(--ink)}.periodbar .round.off{opacity:.35;cursor:default}
.periodbar input[type=month]{width:190px}
.chartwrap{display:flex;padding:18px 14px 6px 8px}
.yaxis{position:relative;width:64px;height:280px;flex:none;margin-bottom:22px}
.yaxis span{position:absolute;right:8px;transform:translateY(50%);font-size:11.5px;color:var(--muted)}
.chart{position:relative;flex:1;height:302px;display:flex;gap:3px;padding-bottom:22px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.chart .grid{position:absolute;left:0;right:0;border-top:1px solid var(--line);opacity:.7;pointer-events:none;margin-bottom:22px}
.chart .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.bar-slot{width:100%;height:280px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.bar{width:78%;max-width:34px;border-radius:4px 4px 0 0;background:rgba(30,158,79,.55);border:1px solid #1e9e4f;transition:background .15s}
.bar.top{background:#1e9e4f}
.col:hover .bar{background:#1e9e4f}
.bar-slot .val{font-size:10px;color:var(--muted);margin-bottom:2px;white-space:nowrap}
.col .day{position:absolute;bottom:-20px;font-size:11px;color:var(--muted)}
.chartnote{padding:2px 16px 14px}
tfoot td{border-top:2px solid var(--line);background:rgba(128,128,128,.07)}
@media (max-width:820px){.yaxis{width:46px}.bar-slot .val{display:none}.col .day{font-size:9px}.periodbar .muted{display:none}}

/* rows-per-page footer */
.pager{border-top:1px solid var(--line);justify-content:flex-end;gap:22px;padding:8px 16px}
.pager .rows{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted)}
.pager .rows select{width:auto;min-height:32px;padding:3px 8px;margin:0}
.pager .pg{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:50%;text-decoration:none;font-size:22px;line-height:1;color:var(--ink)}
.pager a.pg:hover{background:rgba(128,128,128,.15)}
.pager .pg.off{opacity:.3}

/* ---- client statement ---- */
.st-head{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;margin-bottom:14px}
.st-name{font-size:20px;font-weight:700;line-height:1.25}.st-no{color:var(--muted);font-weight:600}
.st-svc{margin-top:6px}
.st-amt{font-size:24px;font-weight:700;line-height:1.2}
.st-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 14px;padding-top:12px;border-top:1px solid var(--line)}
.st-dates{display:flex;gap:14px;margin:0}.st-dates .field{margin:0}
.st-presets{display:flex;gap:4px;flex-wrap:wrap;padding-bottom:6px}
.st-find{display:flex;gap:6px;align-items:center;margin:0;padding-bottom:2px}.st-find input{width:130px;margin:0}
.st-range{margin:0 0 8px}
.statement tr.bf td{background:transparent;color:var(--muted)}
@media(max-width:760px){.st-head{grid-template-columns:1fr}}
.st-brand{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.st-brand img{height:54px;width:auto;display:block}
.st-mail{margin:0}

/* ---- expenses ---- */
.catlist{padding:6px 16px 14px}
.catrow{display:grid;grid-template-columns:190px 1fr 220px;gap:12px;align-items:center;padding:6px 8px;border-radius:8px;text-decoration:none;color:inherit}
.catrow:hover,.catrow.on{background:rgba(30,158,79,.10)}
.catrow .cbar{height:10px;border-radius:6px;background:rgba(120,144,156,.22);overflow:hidden}
.catrow .cbar i{display:block;height:100%;background:#1e9e4f;border-radius:6px}
.catrow .camt{text-align:right;font-weight:600;white-space:nowrap}
@media(max-width:700px){.catrow{grid-template-columns:1fr 90px}.catrow .cbar{display:none}}