:root{
  --cyan:#00B8D9; --blue:#087EA4; --bg:#F4FAFC; --surface:#FFFFFF; --text:#172B3A; --muted:#5B7285; --line:#DCEAF0; --tint:#E6F7FB;
  --good:#0E8F5B; --good-bg:#DDF5EA; --warn:#9A6200; --warn-bg:#FFF1D1; --bad:#B42318; --bad-bg:#FDE3E0; --gray:#475A6A; --gray-bg:#E8EEF2;
  --shadow:0 1px 2px rgba(8,126,164,.06),0 6px 20px rgba(8,126,164,.08); --radius:14px; --sidebar:#FFFFFF; --focus:#00B8D9;
  --c1:#00B8D9;--c2:#087EA4;--c3:#7DD8EA;--c4:#F5A524;--c5:#12B76A;--c6:#8B7CF6;
}
[data-theme=dark]{
  --bg:#0B1A2B; --surface:#11263B; --text:#E6F1F7; --muted:#9DB4C4; --line:#1F3A52; --tint:#0F3045; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --sidebar:#0E2236; --good:#5BE0A8; --good-bg:#12372B; --warn:#FFC966; --warn-bg:#3B2E10; --bad:#FF9A90; --bad-bg:#42191A; --gray:#B7C7D3; --gray-bg:#1B3247;
  --c2:#3BB3DA;--c3:#2B6C85;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font:15px/1.5 "Segoe UI",Inter,system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
h1{font-size:1.5rem;margin:0} h2{font-size:1.1rem;margin:0 0 .75rem} h3{font-size:.95rem;margin:0 0 .5rem;color:var(--muted);font-weight:600}
a{color:var(--blue)} [data-theme=dark] a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--muted)} .right{text-align:right} .nowrap{white-space:nowrap} .mono{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* shell */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar);border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;font-weight:700;font-size:1.05rem}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--blue));display:grid;place-items:center;color:#fff;flex:none}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:500;transition:background .15s}
.nav a:hover{background:var(--tint)} .nav a.active{background:var(--cyan);color:#fff}
.sidebar .grow{flex:1}
.mbar,.scrim{display:none}
.user{font-size:.85rem;color:var(--muted);padding:8px 12px}
.main{padding:24px 28px 48px;min-width:0}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.topbar{display:flex;gap:8px;align-items:center}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* controls */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600;transition:transform .08s,background .15s}
.btn:hover{background:var(--tint)} .btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cyan);border-color:var(--cyan);color:#05222b} .btn-primary:hover{background:#19c6e4}
.btn-danger{color:var(--bad)} .btn-sm{padding:4px 10px;font-size:.85rem;border-radius:8px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
input[type=checkbox]{width:auto} textarea{min-height:70px;resize:vertical}
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px;color:var(--muted)}
.field{margin-bottom:12px} .hint{font-size:.8rem;color:var(--muted);margin-top:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}
.filters .field{margin:0;min-width:150px;flex:1 1 150px;max-width:230px}
.tabs{display:inline-flex;background:var(--tint);padding:4px;border-radius:12px;gap:4px;margin-bottom:14px}
.tabs button{border:0;background:transparent;padding:7px 16px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.stat .k{font-size:.8rem;color:var(--muted);font-weight:600} .stat .v{font-size:1.45rem;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.stat.accent{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border:0} .stat.accent .k{color:rgba(255,255,255,.85)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.error-box{background:var(--bad-bg);color:var(--bad);padding:10px 14px;border-radius:10px;margin-bottom:12px}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%} th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--tint);position:sticky;top:0}
tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--tint)} tr.click{cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;background:var(--tint)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.78rem;font-weight:700}
.b-active,.b-posted,.b-paid,.b-delivered{background:var(--good-bg);color:var(--good)}
.b-expiring_soon,.b-partial,.b-unpaid,.b-queued{background:var(--warn-bg);color:var(--warn)}
.b-expired,.b-overdue,.b-reversed,.b-voided,.b-failed,.b-disconnected{background:var(--bad-bg);color:var(--bad)}
.b-suspended,.b-cancelled{background:var(--gray-bg);color:var(--gray)}
.pager{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;gap:8px;flex-wrap:wrap}
.bulkbar{display:flex;gap:10px;align-items:center;background:var(--tint);padding:10px 14px;border-radius:12px;margin-bottom:12px;flex-wrap:wrap}
.bulkbar select{width:auto}

/* charts */
.chart svg{width:100%;height:auto;display:block} .bar{fill:var(--cyan);transition:opacity .15s} .bar:hover{opacity:.75} .bar2{fill:var(--blue)}
.axis{stroke:var(--line);stroke-width:1} .lbl{font-size:10px;fill:var(--muted)} .line{fill:none;stroke:var(--blue);stroke-width:2.5} .pt{fill:var(--cyan)}
.ring{fill:none;stroke-width:5.5} .c1{stroke:var(--c1);background:var(--c1)} .c2{stroke:var(--c2);background:var(--c2)} .c3{stroke:var(--c3);background:var(--c3)}
.c4{stroke:var(--c4);background:var(--c4)} .c5{stroke:var(--c5);background:var(--c5)} .c6{stroke:var(--c6);background:var(--c6)}
.legend{list-style:none;padding:0;margin:0;font-size:.9rem} .legend li{display:flex;gap:8px;align-items:center;margin:4px 0} .legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .donut-wrap svg{width:150px;height:150px;transform:rotate(-90deg)}
.hbar{margin:8px 0} .hbar .track{height:10px;background:var(--tint);border-radius:99px;overflow:hidden} .hbar .fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:99px}
.hbar .row{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:3px}

/* modal / toast */
.overlay{position:fixed;inset:0;background:rgba(8,20,32,.55);display:grid;place-items:center;padding:16px;z-index:50;animation:fade .15s}
.modal{background:var(--surface);border-radius:16px;width:min(680px,100%);max-height:92vh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal h2{font-size:1.2rem} .modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none}
.toast{background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);animation:fade .2s;max-width:360px}
.toast.err{background:var(--bad);color:#fff}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .hero{background:linear-gradient(145deg,var(--cyan),var(--blue) 70%);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.login .hero h1{font-size:2.2rem;line-height:1.15} .login .hero p{font-size:1.05rem;opacity:.92;max-width:420px}
.login .panel{display:grid;place-items:center;padding:32px} .login form{width:min(380px,100%)}
.kpi-row{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:900px){
  :root{--bar-h:56px}
  .shell{grid-template-columns:minmax(0,1fr)} .main{padding:16px}
  .login{grid-template-columns:1fr} .login .hero{padding:28px} .grid2,.grid3{grid-template-columns:1fr}
  .filters .field{flex:1 1 calc(50% - 10px);min-width:0;max-width:none}

  /* top bar with hamburger */
  .mbar{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:40;height:var(--bar-h);padding:0 10px;background:var(--sidebar);border-bottom:1px solid var(--line)}
  .mbar .brand{padding:0;min-width:0;font-size:1rem} .mbar .brand .logo{width:32px;height:32px}
  .burger{width:44px;height:44px;flex:none;border:0;background:transparent;color:var(--text);border-radius:12px;display:grid;place-content:center;gap:5px;cursor:pointer;transition:background .15s}
  .burger:hover,.burger:active{background:var(--tint)}
  .burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s}
  body.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0;transform:scaleX(.2)}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* sidebar becomes a slide-in drawer under the bar */
  .sidebar{position:fixed;z-index:45;top:var(--bar-h);left:0;bottom:0;width:min(300px,84vw);height:auto;padding:12px;overflow-y:auto;overscroll-behavior:contain;
    border-right:1px solid var(--line);transform:translateX(-102%);visibility:hidden;
    transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,visibility 0s linear .35s}
  body.menu-open .sidebar{transform:none;visibility:visible;box-shadow:12px 0 40px rgba(8,20,32,.28);transition-delay:0s}
  .sidebar>.brand{display:none}
  .nav{display:flex;flex-direction:column;gap:2px} .nav a{padding:13px 12px}
  .nav a{opacity:0;transform:translateX(-12px);transition:opacity .15s,transform .15s,background .15s}
  body.menu-open .nav a{opacity:1;transform:none;transition:opacity .35s ease calc(var(--i,0)*40ms + 120ms),transform .35s cubic-bezier(.22,1,.36,1) calc(var(--i,0)*40ms + 120ms),background .15s}
  /* stagger order (inline styles are blocked by the server's CSP) */
  .sidebar>.nav:first-of-type a:nth-child(1){--i:0}
  .sidebar>.nav:first-of-type a:nth-child(2){--i:1}
  .sidebar>.nav:first-of-type a:nth-child(3){--i:2}
  .sidebar>.nav:first-of-type a:nth-child(4){--i:3}
  .sidebar>.nav:first-of-type a:nth-child(5){--i:4}
  .sidebar>.nav:first-of-type a:nth-child(6){--i:5}
  .sidebar>.nav:first-of-type a:nth-child(7){--i:6}
  .sidebar>.nav:first-of-type a:nth-child(8){--i:7}
  .sidebar>.nav:first-of-type a:nth-child(9){--i:8}
  .sidebar>.nav:last-child a:nth-child(1){--i:9} .sidebar>.nav:last-child a:nth-child(2){--i:10}
  .scrim{display:block;position:fixed;inset:var(--bar-h) 0 0 0;z-index:44;background:rgba(8,20,32,.5);opacity:0;pointer-events:none;transition:opacity .3s}
  body.menu-open .scrim{opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}
}
@media print{
  .sidebar,.mbar,.scrim,.noprint,#toasts,.tabs,.filters,.pager,.btn{display:none!important} .shell{display:block} .main{padding:0}
  body{background:#fff;color:#000} .card,.stat,.table-wrap{box-shadow:none;border-color:#bbb} th{background:#eee;color:#000} .printonly{display:block!important}
}
.printonly{display:none}

/* utilities (the CSP forbids inline style attributes) */
.mb10{margin-bottom:10px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.btn-block{width:100%;justify-content:center}
.search-field{flex:2 1 260px;max-width:340px}
.check-row{display:flex;gap:6px;align-items:center}

/* receipts */
.receipt-preview{font:12.5px/1.3 "Cascadia Mono",Consolas,"Courier New",monospace;white-space:pre-wrap;background:var(--tint);border:1px dashed var(--line);border-radius:10px;padding:14px;margin:8px 0;overflow-x:auto}
pre.receipt-preview{white-space:pre}
.receipt-print{display:none;font:11px/1.25 "Courier New",monospace;white-space:pre;margin:0;padding:0}
.receipt-print.w58{width:58mm}.receipt-print.w80{width:80mm}
@media print{
  body.printing-receipt #app,body.printing-receipt .overlay,body.printing-receipt #toasts{display:none!important}
  body.printing-receipt .receipt-print{display:block!important;color:#000;background:#fff}
}