*{box-sizing:border-box}
:root{--navy:#0f1c2e;--navy2:#14243a;--green:#0aaa73;--green2:#079564;--bg:#f4f7fb;--text:#172033;--muted:#64748b;--line:#e7ecf3;--red:#dc3545}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}.app{display:flex;min-height:100vh}
.sidebar{width:312px;background:linear-gradient(180deg,var(--navy),#0b1727);color:#fff;padding:20px 14px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;overflow-y:auto;z-index:30}
.brand-wrap{display:flex;align-items:center;gap:12px;padding:4px 10px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.brand-icon{font-size:34px}.brand{font-size:27px;font-weight:700}.brand strong{color:#18d38c}.brand-wrap small{color:#aebbd0}
.main-nav{display:flex;flex-direction:column;gap:4px}.main-nav a,.admin-box a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:9px;color:#e1e7ef;font-size:15px}
.main-nav a span{width:20px;text-align:center;opacity:.92}.main-nav a:hover,.admin-box a:hover,.main-nav a.active,.admin-box a.active{background:rgba(255,255,255,.08);color:#fff}
.main-nav a.active{background:linear-gradient(90deg,#0bb47c,#0aa06f);box-shadow:0 7px 18px rgba(0,170,115,.18)}
.admin-box{margin-top:16px;border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:8px;background:rgba(255,255,255,.025)}
.admin-title{padding:8px 10px 10px;font-weight:800;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.admin-box a{padding-left:16px}
.logout-side{margin-top:14px;padding:12px 14px;border-radius:9px;color:#ffb5b5;border:1px solid rgba(255,100,100,.18)}
.logout-side:hover{background:rgba(220,53,69,.12);color:#fff}
.content{margin-left:312px;width:calc(100% - 312px);padding:0 26px 30px}
.topbar{min-height:84px;display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px;background:#fff;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top-title{display:flex;align-items:center;gap:14px}.topbar h1{margin:0;font-size:28px}.topbar p{margin:4px 0 0;color:var(--muted)}
.menu-button{display:none;border:0;background:#eef2f7;border-radius:8px;font-size:22px;padding:8px 10px;cursor:pointer}
.top-actions{display:flex;align-items:center;gap:9px}.user-chip{background:#f8fafc;border:1px solid var(--line);padding:9px 13px;border-radius:12px;display:flex;flex-direction:column;min-width:150px}
.user-chip span{font-size:12px;color:var(--muted);margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#fff;border-radius:16px;padding:20px;border:1px solid var(--line);box-shadow:0 4px 18px rgba(15,28,46,.05)}
.metric{font-size:29px;font-weight:800;margin-top:7px}.muted{color:var(--muted)}
.panel{background:#fff;border-radius:16px;padding:20px;margin-top:18px;border:1px solid var(--line);box-shadow:0 4px 18px rgba(15,28,46,.045)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.toolbar strong{font-size:18px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:separate;border-spacing:0}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{font-size:12px;color:#526074;background:#f8fafc}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:9px;padding:10px 14px;background:#172033;color:#fff;cursor:pointer;font-weight:600}.btn.green{background:var(--green)}.btn.green:hover{background:var(--green2)}.btn.light{background:#eef2f7;color:#172033}.btn.danger,.logout-top{background:var(--red)}.admin-btn{background:#172033}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:700;font-size:14px}
input,select,textarea{padding:11px 12px;border:1px solid #cfd8e4;border-radius:9px;background:#fff;font-size:15px;outline:none}input:focus,select:focus,textarea:focus{border-color:#0aaa73;box-shadow:0 0 0 3px rgba(10,170,115,.10)}
.help{font-size:12px;color:var(--muted)}.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:12px;font-weight:700}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px}.alert.ok{background:#ecfdf5;color:#065f46}.alert.err{background:#fef2f2;color:#991b1b}
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f1c2e,#17365a)}.login-box{width:min(430px,92vw);background:#fff;padding:30px;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.20)}.login-box h1{margin-top:0}.login-box form{display:flex;flex-direction:column;gap:14px}
.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:4px 0 16px}.dashboard-hero h2{font-size:28px;margin:0}.date-pill{background:#fff;border:1px solid var(--line);padding:11px 14px;border-radius:10px;color:#526074}
.kpi-card{position:relative;overflow:hidden}.kpi-card .kpi-icon{width:48px;height:48px;border-radius:12px;background:#ecfdf5;display:grid;place-items:center;font-size:22px;margin-bottom:12px}
.kpi-card:nth-child(2) .kpi-icon{background:#eef6ff}.kpi-card:nth-child(3) .kpi-icon{background:#fff5df}.kpi-card:nth-child(4) .kpi-icon{background:#fff0f0}
.dashboard-2col{display:grid;grid-template-columns:1.4fr .9fr;gap:18px}.empty-state{text-align:center;padding:34px;color:#8492a6;font-size:14px}
.report-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.report-filters .field{min-width:160px}.report-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.report-kpis .card{padding:16px}
.pdv-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:18px;align-items:start}.search-box{display:flex;gap:8px;margin-bottom:14px}.search-box input{flex:1;font-size:18px;padding:14px}
.product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:62vh;overflow:auto}.product-btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;text-align:left;cursor:pointer}
.cart-table input.qty{width:95px}.cart-total{font-size:30px;font-weight:800;text-align:right;margin:12px 0}.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checkout-grid .full{grid-column:1/-1}
.cash-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cash-value{font-size:24px;font-weight:800;margin-top:6px}.cash-status{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}.cash-open{background:#ecfdf5;color:#047857}.cash-closed{background:#f3f4f6;color:#4b5563}
.purchase-items{width:100%;border-collapse:collapse}.purchase-total{font-size:28px;font-weight:800;text-align:right;margin-top:14px}.small-input{width:120px}
.bar-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,3fr) 100px;gap:10px;align-items:center;margin:8px 0}.bar-track{background:#e5e7eb;border-radius:999px;height:12px;overflow:hidden}.bar-fill{background:#172033;height:100%;border-radius:999px}
@media(max-width:1100px){.sidebar{width:250px}.content{margin-left:250px;width:calc(100% - 250px)}.top-actions .admin-btn{display:none}.grid,.report-kpis{grid-template-columns:repeat(2,1fr)}.dashboard-2col{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s;width:280px}.menu-open .sidebar{transform:translateX(0)}.content{margin-left:0;width:100%;padding:0 14px 22px}.menu-button{display:inline-block}.topbar{padding:10px 4px}.top-actions .btn.light,.top-actions .admin-btn,.user-chip{display:none}.grid,.form-grid,.report-kpis{grid-template-columns:1fr}.dashboard-hero{align-items:flex-start;flex-direction:column}.pdv-layout{grid-template-columns:1fr}}