/* PULSE ISP - Soft UI Dashboard look (tokens taken from the Soft UI React theme) */
:root{
  --bg:#f8f9fa; --text:#67748e; --dark:#344767; --white:#fff; --line:#e9ecef;
  --card:#fff; --card-rgb:255,255,255; --soft:#f6f9fc; --inp-b:#d2d6da; --inp-t:#495057; --side-bg:#fff; --r:1rem; --rs:.6rem;
  --font-body:"Open Sans"; --font-head:"Open Sans"; --c1:#2152ff; --c2:#21d4fd;
  --primary:#cb0c9f; --info:#17c1e8; --success:#82d616; --warning:#fbcf33; --danger:#ea0606; --secondary:#8392ab;
  --g-primary:linear-gradient(310deg,#7928ca,#ff0080);
  --g-info:linear-gradient(310deg,#2152ff,#21d4fd);
  --g-success:linear-gradient(310deg,#17ad37,#98ec2d);
  --g-warning:linear-gradient(310deg,#f53939,#fbcf33);
  --g-danger:linear-gradient(310deg,#ea0606,#ff667c);
  --g-dark:linear-gradient(310deg,#141727,#3a416f);
  --g-secondary:linear-gradient(310deg,#627594,#a8b8d8);
  --shadow:0 20px 27px 0 rgba(0,0,0,.05);
  --shadow-sm:0 3px 5px -1px rgba(0,0,0,.09),0 2px 3px -1px rgba(0,0,0,.07);
}
*{box-sizing:border-box}
html{font-size:var(--fs,15px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body),"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-head),var(--font-body),system-ui,sans-serif;color:var(--dark);margin:0 0 .4rem;font-weight:700;line-height:1.25}
h3{font-size:1.15rem}h4{font-size:1rem}h5{font-size:.9rem}
.hero-bar{position:absolute;top:0;left:0;right:0;height:300px;background:var(--g-info);border-radius:0 0 calc(var(--r)*1.5) calc(var(--r)*1.5);z-index:0;overflow:hidden}
.hero-bar.dark{background:var(--g-dark)}

/* layout */
.sidenav{position:fixed;top:0;left:0;bottom:0;width:260px;margin:16px;height:calc(100vh - 32px);background:var(--side-bg);border-radius:var(--r);box-shadow:var(--shadow);z-index:1030;display:flex;flex-direction:column;transition:transform .25s}
.sidenav .brand{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem;font-weight:700;color:var(--dark);font-size:1rem}
.sidenav .brand .logo{width:34px;height:34px;border-radius:.6rem;background:var(--g-info);display:grid;place-items:center;color:#fff;font-size:1rem}
.sidenav hr{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.15),transparent);margin:0 0 .5rem}
.sidenav nav{overflow-y:auto;flex:1;padding:.5rem .9rem 1rem}
.nav-head{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dark);opacity:.6;margin:1rem 0 .4rem .6rem}
.nav-link{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;margin-bottom:2px;border-radius:var(--rs);font-size:.85rem;font-weight:600;color:var(--dark);opacity:.85;transition:all .15s}
.nav-link .ico{width:32px;height:32px;border-radius:.6rem;background:var(--card);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--dark);font-size:.8rem;flex:0 0 32px}
.nav-link:hover{background:var(--soft);opacity:1}
.nav-link.active{background:var(--card);box-shadow:0 20px 27px 0 rgba(0,0,0,.05);opacity:1}
.nav-link.active .ico{background:var(--g-info);color:#fff;box-shadow:none}
.nav-sub{margin:0 0 .3rem 2.6rem;border-left:1px dashed var(--inp-b);padding-left:.6rem}
.nav-sub a{display:block;padding:.3rem .5rem;font-size:.8rem;border-radius:.5rem;color:var(--text)}
.nav-sub a.active,.nav-sub a:hover{color:var(--dark);font-weight:700}
.nav-link .chev{margin-left:auto;font-size:.65rem;transition:transform .2s}
.nav-link.open .chev{transform:rotate(90deg)}
.side-foot{padding:.9rem;margin:.5rem;border-radius:.9rem;background:var(--g-info);color:#fff;font-size:.78rem}
.side-foot b{display:block;font-size:.9rem}
.side-foot .mode-pill{display:inline-block;margin-top:.4rem;padding:.15rem .6rem;border-radius:99px;background:rgba(255,255,255,.25);font-weight:700;font-size:.7rem;letter-spacing:.05em}

.main{margin-left:292px;padding:1rem 1.25rem 2rem 0;min-height:100vh;position:relative;z-index:1}
.topbar{display:flex;align-items:center;gap:1rem;padding:.8rem 0 1.4rem;flex-wrap:wrap}
.topbar .crumbs{font-size:.8rem;color:rgba(255,255,255,.75)}
.topbar .crumbs b{color:#fff;display:block;font-size:1rem;margin-top:.1rem}
.topbar .sp{flex:1}
.topbar .tb-item{color:#fff;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:.5rem;cursor:pointer;background:none;border:0;padding:.35rem .6rem;border-radius:.6rem}
.topbar .tb-item:hover{background:rgba(255,255,255,.15)}
.burger{display:none}
.mode-switch{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.18);padding:.3rem .7rem;border-radius:99px;color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.04em}
.mode-switch .dot{width:9px;height:9px;border-radius:50%;background:#98ec2d;box-shadow:0 0 0 3px rgba(152,236,45,.35)}
.mode-switch.off .dot{background:#ff667c;box-shadow:0 0 0 3px rgba(255,102,124,.35)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--g-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.usermenu{position:relative}
.usermenu .dd{display:none;position:absolute;right:0;top:110%;background:var(--card);border-radius:.8rem;box-shadow:0 10px 30px rgba(0,0,0,.15);min-width:180px;padding:.4rem;z-index:50}
.usermenu.open .dd{display:block}
.dd a{display:block;padding:.5rem .8rem;color:var(--dark);font-size:.82rem;border-radius:.5rem;font-weight:600}
.dd a:hover{background:var(--soft)}

/* cards */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:1.25rem;position:relative}
.card-h{display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.4rem .6rem;flex-wrap:wrap}
.card-h h3{margin:0;display:flex;align-items:center;gap:.5rem}
.card-h .sp{flex:1}
.card-b{padding:.6rem 1.4rem 1.3rem}
.grid{display:grid;gap:1.25rem}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.g-7-5{grid-template-columns:7fr 5fr}
.stat{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem}
.stat .lbl{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--text)}
.stat .val{font-size:1.35rem;font-weight:700;color:var(--dark);margin-top:.15rem}
.stat .sub{font-size:.75rem;font-weight:600}
.stat .sub.up{color:#17ad37}.stat .sub.down{color:var(--danger)}
.stat .ico{width:48px;height:48px;border-radius:.8rem;color:#fff;display:grid;place-items:center;font-size:1.1rem;box-shadow:var(--shadow-sm)}
.bg-info{background:var(--g-info)}.bg-success{background:var(--g-success)}.bg-warning{background:var(--g-warning)}.bg-danger{background:var(--g-danger)}.bg-primary{background:var(--g-primary)}.bg-dark{background:var(--g-dark)}.bg-secondary{background:var(--g-secondary)}

/* forms */
label{display:block;font-size:.75rem;font-weight:700;color:var(--dark);margin:0 0 .3rem .15rem}
.inp,select,textarea,input[type=text],input[type=number],input[type=date],input[type=password],input[type=email],input[type=tel]{width:100%;padding:.55rem .8rem;border:1px solid var(--inp-b);border-radius:var(--rs);background:var(--card);font:inherit;font-size:.85rem;color:var(--inp-t);outline:0;transition:box-shadow .15s,border-color .15s}
input:focus,select:focus,textarea:focus{border-color:#35d1f5;box-shadow:0 0 0 2px rgba(53,209,245,.25)}
input[disabled],select[disabled]{background:var(--line)}
textarea{min-height:80px;resize:vertical}
.fg{margin-bottom:.85rem}
.row{display:grid;gap:.9rem;grid-template-columns:repeat(12,1fr)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}.c5{grid-column:span 5}.c7{grid-column:span 7}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;align-items:end;padding:.4rem 1.4rem 1rem}
.searchbox{display:flex}
.searchbox input{border-radius:var(--rs) 0 0 var(--rs)}
.searchbox button{border-radius:0 var(--rs) var(--rs) 0}
.switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 40px}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--line);border:1px solid var(--inp-b);border-radius:99px;transition:.2s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.switch input:checked+span{background:var(--g-info);border-color:transparent}
.switch input:checked+span:before{transform:translateX(18px)}
.switch.big{width:64px;height:34px;flex-basis:64px}.switch.big span:before{width:28px;height:28px}.switch.big input:checked+span:before{transform:translateX(30px)}
.switch.big input:checked+span{background:var(--g-success)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border:0;border-radius:var(--rs);font:inherit;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .1s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08)}
.btn.sm{padding:.35rem .7rem;font-size:.65rem}
.btn.ico-only{padding:.5rem .65rem}
.btn.info{background:var(--g-info)}.btn.success{background:var(--g-success)}.btn.danger{background:var(--g-danger)}.btn.dark{background:var(--g-dark)}.btn.primary{background:var(--g-primary)}.btn.warning{background:var(--g-warning)}.btn.secondary{background:var(--g-secondary)}
.btn.light{background:var(--card);color:var(--dark)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-icon{width:30px;height:30px;border:0;border-radius:.5rem;display:inline-grid;place-items:center;color:#fff;cursor:pointer;font-size:.72rem}

/* tables */
.tbl-wrap{overflow-x:auto;padding:0 .4rem}
table.tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.tbl th{padding:.7rem .9rem;text-align:left;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th a{color:inherit}.tbl th a:hover{color:var(--dark)}
.tbl td{padding:.65rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--dark)}
.tbl tr:hover>td{background:var(--soft)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .empty{text-align:center;color:var(--secondary);padding:2rem}
.tbl .exp{width:26px;color:var(--info);cursor:pointer}
.tbl tr.detail td{background:var(--soft);font-size:.78rem}
.tbl a.name{color:var(--primary);font-weight:700}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.4rem 1.5rem}
.dgrid span{display:block;font-size:.65rem;text-transform:uppercase;color:var(--secondary);font-weight:700}
.badge{display:inline-block;padding:.28rem .65rem;border-radius:.5rem;font-size:.62rem;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:.03em;white-space:nowrap}
.badge.success{background:var(--g-success)}.badge.danger{background:var(--g-danger)}.badge.warning{background:var(--g-warning)}.badge.info{background:var(--g-info)}.badge.secondary{background:var(--g-secondary)}.badge.dark{background:var(--g-dark)}.badge.primary{background:var(--g-primary)}
.pager{display:flex;gap:.3rem;justify-content:flex-end;padding:1rem 1.4rem;flex-wrap:wrap;align-items:center}
.pager .info{margin-right:auto;font-size:.78rem}
.pager a,.pager span{min-width:32px;height:32px;display:grid;place-items:center;padding:0 .6rem;border-radius:.5rem;font-size:.78rem;font-weight:700;border:1px solid var(--line);color:var(--info);background:var(--card)}
.pager .cur{background:var(--g-info);color:#fff;border-color:transparent}
.pager .dis{color:#adb5bd}

/* modal / toast */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:2000;overflow-y:auto;padding:2rem 1rem;backdrop-filter:blur(2px)}
.modal-bg.show{display:block}
.modal{background:var(--card);border-radius:var(--r);max-width:760px;margin:0 auto;box-shadow:0 25px 60px rgba(0,0,0,.3)}
.modal.sm{max-width:480px}.modal.lg{max-width:980px}
.modal-h{display:flex;align-items:center;padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;flex:1}
.modal-h .x{background:none;border:0;font-size:1.2rem;cursor:pointer;color:var(--secondary)}
.modal-b{padding:1.2rem 1.4rem}
.modal-f{padding:.9rem 1.4rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:.6rem}
.sect{font-size:.95rem;font-weight:700;color:var(--dark);margin:.8rem 0 .5rem;padding-top:.4rem}
#toasts{position:fixed;right:1.2rem;top:1.2rem;z-index:3000;display:flex;flex-direction:column;gap:.6rem}
.toast{background:var(--card);border-left:5px solid var(--info);box-shadow:0 10px 30px rgba(0,0,0,.18);padding:.8rem 1.1rem;border-radius:.6rem;font-size:.85rem;font-weight:600;color:var(--dark);min-width:240px;animation:tin .25s}
.toast.ok{border-color:#17ad37}.toast.err{border-color:var(--danger)}
@keyframes tin{from{opacity:0;transform:translateX(30px)}to{opacity:1}}
.alert{padding:.8rem 1rem;border-radius:.7rem;font-size:.82rem;font-weight:600;color:#fff;margin-bottom:1rem}
.alert.info{background:var(--g-info)}.alert.warning{background:var(--g-warning)}.alert.danger{background:var(--g-danger)}.alert.success{background:var(--g-success)}
.tabs{display:flex;gap:.3rem;padding:0 1.4rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a{padding:.6rem 1rem;font-size:.8rem;font-weight:700;color:var(--text);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.tabs a.on{color:var(--dark);border-color:#17c1e8}
.tabpane{display:none}.tabpane.on{display:block}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.staff{text-align:center;padding:1.4rem 1rem}
.staff .pic{width:84px;height:84px;margin:0 auto .7rem;border-radius:50%;background:var(--g-primary);color:#fff;display:grid;place-items:center;font-size:1.8rem;font-weight:700;overflow:hidden;box-shadow:var(--shadow-sm)}
.staff .pic img{width:100%;height:100%;object-fit:cover}
.staff .acts{display:flex;gap:.4rem;justify-content:center;margin-top:.8rem}
.kv{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.82rem}
.kv b{color:var(--dark)}
.area-row{display:flex;align-items:center;gap:.8rem;padding:.5rem .2rem;border-bottom:1px solid var(--line);font-size:.83rem;color:var(--dark)}
.area-row .cnt{margin-left:auto;font-size:.75rem;color:var(--secondary)}
.mut{color:var(--secondary)}.right{text-align:right}.center{text-align:center}.bold{font-weight:700}.sm{font-size:.8rem}
.chart-box{position:relative;height:290px}

/* login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(380px,520px) 1fr;background:var(--card)}
.login-form{padding:4rem 3rem;display:flex;flex-direction:column;justify-content:center}
.login-form h1{font-size:2rem;background:var(--g-info);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-art{background:var(--g-info) center/cover;margin:1rem;border-radius:1.2rem;position:relative;overflow:hidden;display:grid;place-items:center;color:#fff;text-align:center;padding:2rem}
.login-art:before{content:"";position:absolute;inset:0;background:url(../img/login-bg.jpg) center/cover;opacity:.55;mix-blend-mode:overlay}
.login-art div{position:relative}
.login-art h2{color:#fff;font-size:1.7rem}

/* receipt */
.receipt{max-width:380px;margin:2rem auto;background:var(--card);padding:1.5rem;border-radius:.8rem;box-shadow:var(--shadow);font-size:.85rem}
.receipt h3{text-align:center;margin:0}
.receipt .c{text-align:center;color:var(--secondary);font-size:.75rem}

@media (max-width:1199px){
  .sidenav{transform:translateX(-120%)}
  body.nav-open .sidenav{transform:none}
  .main{margin-left:0;padding:1rem}
  .burger{display:inline-flex}
  .g4{grid-template-columns:repeat(2,1fr)}.g-7-5{grid-template-columns:1fr}
  .login-wrap{grid-template-columns:1fr}.login-art{display:none}
}
@media (max-width:640px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .row>*{grid-column:span 12!important}
  .modal-bg{padding:.5rem}
}
@media print{
  .sidenav,.topbar,.hero-bar,.no-print,.filters,.pager,.btn,#toasts{display:none!important}
  .main{margin:0;padding:0}.card{box-shadow:none}body{background:#fff}
}

/* client picker */
.picker{position:relative}
.pick-list{position:absolute;left:0;right:0;top:100%;background:var(--card);border-radius:.6rem;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:30;max-height:260px;overflow-y:auto}
.pick-list button{display:flex;justify-content:space-between;gap:1rem;width:100%;text-align:left;border:0;background:none;padding:.55rem .8rem;font:inherit;font-size:.8rem;color:var(--dark);cursor:pointer;border-bottom:1px solid var(--line)}
.pick-list button:hover{background:var(--soft)}
.pick-list small{color:var(--secondary);white-space:nowrap}
.dropdown{position:relative;display:inline-block}
.dropdown .dd-menu{display:none;position:absolute;right:0;top:110%;background:var(--card);border-radius:.7rem;box-shadow:0 10px 30px rgba(0,0,0,.18);min-width:210px;padding:.4rem;z-index:40}
.dropdown.open .dd-menu{display:block}
.dd-menu a,.dd-menu button{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:.82rem;font-weight:600;color:var(--dark);padding:.5rem .8rem;border-radius:.5rem;cursor:pointer}
.dd-menu a:hover,.dd-menu button:hover{background:var(--soft)}
.tot-row td{font-weight:700;background:var(--soft)}