*{box-sizing:border-box}
:root{
  --bg:#f4f6f8;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --sidebar:#0d1523;
  --sidebar-text:#dbe4ef;
  --sidebar-muted:#8c99aa;
  --ink:#182235;
  --muted:#6b7280;
  --line:#e4e8ee;
  --line-2:#d4dae3;
  --primary:#2457a6;
  --primary-hover:#1d488c;
  --success:#18794e;
  --warning:#9a6b08;
  --danger:#b42318;
  --info:#2457a6;
  --radius:10px;
  --shadow:0 8px 24px rgba(15,23,42,.045);
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
body{font-size:14px;line-height:1.45;letter-spacing:-.005em}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
/* Login */
.login-shell{min-height:100vh;display:grid;place-items:center;padding:28px;background:linear-gradient(180deg,#eef2f6,#f7f8fa)}
.login-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 60px rgba(15,23,42,.09);padding:32px}
.brand-lockup{display:flex;align-items:center;gap:15px;margin-bottom:28px}
.brand-lockup img{width:58px;height:58px;object-fit:contain;border-radius:12px}
.logo-mark{width:58px;height:58px;border-radius:12px;background:#162238;color:#83c9ff;display:grid;place-items:center;font-weight:900;font-size:23px}
.logo-mark.small{width:40px;height:40px;border-radius:10px;font-size:15px}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:800}
.brand-lockup h1{margin:2px 0 0;font-size:25px;letter-spacing:-.03em}
.brand-lockup p{margin:3px 0 0;color:var(--muted);font-size:12px}
.form-stack{display:grid;gap:15px}
.form-stack label,.field label{display:grid;gap:7px;font-size:12px;font-weight:750;color:#293548}
.form-stack input,.field input,.field select,.field textarea,table input,table select{width:100%;min-height:40px;border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:9px 10px;color:#182235;outline:none}
.form-stack input:focus,.field input:focus,.field select:focus,.field textarea:focus,table input:focus,table select:focus{border-color:#8eabd4;box-shadow:0 0 0 3px rgba(36,87,166,.08)}
.form-stack input::placeholder,.field input::placeholder,.field textarea::placeholder{color:#9aa3b0}
.password-wrap{position:relative}.password-wrap input{padding-right:42px}.password-toggle{position:absolute;right:7px;top:6px;width:30px;height:29px;border:0;background:transparent;color:#7d8795;border-radius:6px}.password-toggle:hover,.password-toggle.active{background:#eef3fa;color:var(--primary)}
.btn{min-height:38px;border-radius:8px;border:1px solid transparent;padding:8px 13px;font-weight:800;font-size:12px;letter-spacing:.005em;transition:.15s ease;white-space:nowrap}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 3px 8px rgba(36,87,166,.15)}.btn.primary:hover{background:var(--primary-hover)}
.btn.secondary{background:#edf3fb;border-color:#cfdaea;color:var(--primary)}.btn.secondary:hover{background:#e6eef9}
.btn.ghost{background:#fff;border-color:var(--line-2);color:#344054}.btn.ghost:hover{background:#f8fafc;border-color:#c5ccd6}
.btn.danger{background:#fff2f0;border-color:#f1c5bf;color:var(--danger)}.btn.danger:hover{background:#fde8e5}
.btn.xl{min-height:45px}
.form-error{min-height:18px;color:var(--danger);font-size:12px}.login-foot{text-align:center;margin-top:18px;color:#7c8796;font-size:11px}
/* Layout */
.app-shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar);color:var(--sidebar-text);padding:16px 12px 12px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06)}
.side-brand{display:flex;align-items:center;gap:11px;padding:7px 8px 16px;border-bottom:1px solid rgba(255,255,255,.075)}
.side-logo{width:40px;height:40px;object-fit:contain;border-radius:10px}.side-brand strong{display:block;font-size:14px;line-height:1.2}.side-brand span{display:block;font-size:10px;color:var(--sidebar-muted);margin-top:3px}
.nav{padding:13px 2px;overflow:auto;scrollbar-width:thin;scrollbar-color:#273346 transparent}.nav-group{margin:0 0 13px}.nav-group-title{padding:0 11px 6px;color:#66748a;font-size:9px;font-weight:900;letter-spacing:.14em}
.nav button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#bdc8d6;text-align:left;padding:9px 11px;border-radius:8px;font-weight:750;font-size:12px;margin:2px 0}.nav button:hover{background:rgba(255,255,255,.055);color:#fff}.nav button.active{background:#1b2535;color:#fff;box-shadow:inset 2px 0 0 #9ec4ef}.nav-icon{width:18px;text-align:center;color:#8ea1b8;font-size:13px}.nav button.active .nav-icon{color:#b8d9ff}
.side-user{margin-top:auto;display:grid;grid-template-columns:36px minmax(0,1fr) 34px;align-items:center;gap:9px;border-top:1px solid rgba(255,255,255,.075);padding:13px 4px 2px}.side-user strong{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-user span{font-size:10px;color:var(--sidebar-muted);display:block;text-transform:capitalize}.avatar{width:36px;height:36px;border-radius:50%;background:#1b2940;display:grid;place-items:center;color:#a6d3ff;font-weight:900}
.main{min-width:0}.topbar{height:72px;display:flex;align-items:center;gap:15px;padding:0 25px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.top-title{flex:1;min-width:0}.top-title h2{margin:2px 0 0;font-size:20px;letter-spacing:-.025em}.top-actions{display:flex;align-items:center;gap:8px}.status-pill{border-radius:999px;padding:6px 9px;font-size:11px;font-weight:850}.status-pill.online{background:#e9f8ef;color:var(--success)}.status-pill.offline{background:#fff0ee;color:var(--danger)}
.icon-btn{width:36px;height:36px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:#4b5565}.icon-btn:hover{background:#f8fafc}.mobile-only{display:none}
/* Main views */
.view{padding:24px 26px 36px;max-width:1720px;margin:0 auto}.grid{display:grid;gap:15px}.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:15px}.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.stat{padding:16px 17px;min-height:102px}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#7b8595;font-weight:850}.stat .value{font-size:24px;font-weight:900;letter-spacing:-.035em;margin-top:9px}.stat .hint{font-size:10px;color:#8a93a1;margin-top:4px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px 12px;border-bottom:1px solid #eef1f4}.section-head>div:first-child{min-width:0}.section-head h3{margin:0;font-size:14px;letter-spacing:-.015em}.section-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.section-body{padding:16px 17px 18px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar input,.toolbar select{min-height:36px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px}
/* Tables */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px;background:#fff}table{width:100%;border-collapse:separate;border-spacing:0;min-width:800px}th,td{padding:10px 12px;border-bottom:1px solid #edf0f3;text-align:left;font-size:11px;white-space:nowrap;vertical-align:middle}th{position:sticky;top:0;z-index:2;background:#f7f8fa;color:#677285;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}tbody tr:last-child td{border-bottom:0}tbody tr:nth-child(even) td{background:#fcfcfd}tbody tr:hover td{background:#f6f9fd}
/* Status / helpers */
.tag{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850;border:1px solid transparent}.tag.good{background:#edf8f1;border-color:#cee9d8;color:var(--success)}.tag.warn{background:#fff8e7;border-color:#f0dfb0;color:var(--warning)}.tag.bad{background:#fff0ef;border-color:#efc4c0;color:var(--danger)}.tag.info{background:#edf3fb;border-color:#cfdaea;color:var(--info)}.muted{color:var(--muted)}.empty{padding:36px 24px;text-align:center;color:#8b94a1}.search-empty{padding:16px;text-align:center;color:var(--muted)}
/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.field{min-width:0}.field.span2{grid-column:span 2}.field.span4{grid-column:1/-1}.field-help{font-size:10px;color:#7b8491;font-weight:500}.label-muted{font-weight:600;color:#8c95a2}.required-mark{color:#c0392b}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid #eef1f4}.text-btn{border:0;background:transparent;color:var(--primary);font-size:10px;font-weight:800;padding:0}.text-btn:hover{text-decoration:underline}
/* Sales / POS */
.sale-payment-panel{border:1px solid #d9e2ee;background:#f8fafc;border-radius:10px;padding:14px}.sale-panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.sale-panel-title strong{font-size:13px}.customer-select-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.sale-line-head{display:grid;grid-template-columns:1.55fr 1.55fr .65fr .95fr .9fr 40px;gap:8px;padding:0 8px 6px;color:#768194;font-size:9px;text-transform:uppercase;letter-spacing:.09em;font-weight:900}.line-list{display:grid;gap:7px}.line-row{display:grid;grid-template-columns:1.55fr 1.55fr .65fr .95fr .9fr 40px;gap:8px;align-items:center}.sale-line,.pur-line{padding:8px;background:#fff;border:1px solid var(--line);border-radius:9px}.sale-line:hover,.pur-line:hover{border-color:#cdd6e2}.line-row input,.line-row select{min-height:37px;border-radius:8px;padding:8px}.sale-summary{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border-radius:9px;background:#182436;color:#fff;font-size:14px;font-weight:850}.quick-pay{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}.mini-btn{width:34px;height:34px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:#4b5563}.mini-btn:hover{background:#f7f8fa}.danger-outline{color:var(--danger);border-color:#efcbc7}
/* Product variations */
.product-main-grid{margin-bottom:2px}.variation-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:18px 0 10px}.variation-section-head h4{margin:0;font-size:13px}.variation-section-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.variation-count{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#edf3fb;border:1px solid #cfdaea;color:var(--primary);font-size:10px;font-weight:850;white-space:nowrap}.variation-editor{border:1px solid var(--line);border-radius:10px;overflow:auto;background:#fbfcfd}.variation-head,.variation-row{min-width:1090px;display:grid;grid-template-columns:1.5fr 1.28fr 1fr 1fr 1fr 1fr 40px;gap:10px;align-items:start}.variation-head{padding:10px 12px;background:#f7f8fa;border-bottom:1px solid var(--line);color:#6b7482;font-size:9px;text-transform:uppercase;letter-spacing:.075em;font-weight:900}.variation-head small{display:block;font-size:8px;color:#9199a4;text-transform:none;letter-spacing:0}.variation-row{padding:11px 12px;background:#fff;border-bottom:1px solid #edf0f3}.variation-row:last-child{border-bottom:0}.variation-row .field-help{margin-top:2px}.variation-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}.variation-actions{display:flex;justify-content:flex-end;padding-top:2px}
/* Receivables */
.payment-head,.statement-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:13px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.payment-balance{display:flex;gap:7px;flex-wrap:wrap}.payment-balance span{padding:6px 8px;border-radius:7px;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:800}.payment-actions{display:flex;justify-content:flex-end;margin:10px 0}.due-text{color:var(--danger);font-weight:800}.people-due-invoice{max-width:220px;overflow:hidden;text-overflow:ellipsis;display:block}.customer-due-row{background:#fffaf9}.paid-text{color:var(--success);font-weight:800}.kpi-row{display:flex;gap:8px;flex-wrap:wrap}
/* Charts */
.chart-box{height:280px}.chart-box svg{width:100%;height:100%}.chart-box svg text{font-family:inherit}
/* Modal */
.modal-bg{position:fixed;inset:0;display:none;place-items:center;padding:22px;background:rgba(9,16,28,.56);backdrop-filter:blur(2px);z-index:80}.modal-bg.show{display:grid}.modal{width:min(1080px,100%);max-height:92vh;overflow:auto;background:#fff;border:1px solid #dce1e7;border-radius:12px;box-shadow:0 28px 84px rgba(0,0,0,.24)}.modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 17px;background:#fff;border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:15px;letter-spacing:-.015em}.modal-body{padding:17px}
/* Misc */
.logo-preview{width:128px;height:128px;border:1px dashed #c8d0db;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#f8fafc;color:#6b7480;font-weight:900;font-size:28px}.logo-preview img{width:100%;height:100%;object-fit:contain}.hint{color:var(--muted)}
/* Responsive */
@media(max-width:1200px){.view{padding:20px}.two-col,.three-col{grid-template-columns:1fr}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar{width:100%}.section-head{align-items:flex-start;flex-direction:column}.section-head>.toolbar{width:100%}.section-head>.toolbar input{flex:1;min-width:180px}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-275px;width:264px;z-index:70;transition:left .2s ease;box-shadow:16px 0 40px rgba(15,23,42,.2)}.sidebar.open{left:0}.mobile-only{display:block}.topbar{height:66px;padding:0 13px}.top-title h2{font-size:18px}.view{padding:13px 12px 24px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{min-height:92px;padding:14px}.stat .value{font-size:20px}.form-grid{grid-template-columns:1fr}.field.span2,.field.span4{grid-column:auto}.line-row{grid-template-columns:1fr 1fr}.sale-line-head{display:none}.customer-select-row{grid-template-columns:1fr}.sale-panel-title{flex-direction:column}.sale-summary{justify-content:flex-start}.toolbar input,.toolbar select{flex:1;min-width:0}.modal-bg{padding:10px}.modal{max-height:95vh}.login-card{padding:25px}.side-user{grid-template-columns:36px minmax(0,1fr) 34px}}