:root{
  --bg:#eef2f1; --surface:#ffffff; --ink:#14201e; --muted:#5f6f6b; --line:#dbe3e0;
  --brand:#1b6b58; --brand-ink:#ffffff; --side:#0f2e2a; --side-ink:#cfe3de; --amber:#e8a33d;
  --ok:#1b7f4b; --warn:#b7791f; --bad:#c0392b;
  --ok-bg:#dff3e7; --warn-bg:#fbeccb; --bad-bg:#f9dcd8; --muted-bg:#e6ebe9;
  --radius:10px; --shadow:0 1px 2px rgba(15,46,42,.08);
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --display:'Sora','DM Sans',system-ui,sans-serif;
}
:root[data-theme=dark]{
  --bg:#0c1715; --surface:#132421; --ink:#e4efec; --muted:#93a8a3; --line:#233a35;
  --brand:#3fb596; --brand-ink:#06201a; --side:#08110f; --side-ink:#a9c4bd;
  --ok-bg:#12382a; --warn-bg:#3d2f10; --bad-bg:#421d18; --muted-bg:#1c2f2b; --shadow:none;
}
*{box-sizing:border-box} html{font-size:15px}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.45}
h1,h2,h3{font-family:var(--display);margin:0 0 .6rem;letter-spacing:-.01em}
h2{font-size:1.1rem} h3{font-size:.98rem}
a{color:var(--brand)} .muted{color:var(--muted)} small{font-size:.82rem}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:30;transition:transform .2s}
.brand{display:flex;align-items:center;gap:.7rem;padding:1.2rem 1.2rem 1rem;font-family:var(--display);font-weight:700;font-size:1.15rem;color:#fff}
.logo-mark{width:26px;height:26px;border-radius:7px 7px 13px 13px;background:linear-gradient(180deg,var(--amber) 0 38%,var(--brand) 38%);display:inline-block;flex:none}
.sidebar nav{flex:1;overflow-y:auto;padding:.4rem .7rem}
.sidebar nav a{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;border-radius:8px;color:var(--side-ink);text-decoration:none;margin-bottom:2px;font-weight:500}
.sidebar nav a:hover{background:rgba(255,255,255,.07)}
.sidebar nav a.active{background:var(--amber);color:#2a1c02}
.sidebar-foot{padding:1rem 1.2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.who{display:flex;flex-direction:column;min-width:0} .who strong{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .who small{opacity:.7}
.main{margin-left:248px;flex:1;min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:.7rem 1.4rem}
.page-title{font-size:1.15rem;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:.6rem}
.content{padding:1.4rem;max-width:1400px}
.menu-toggle{display:none} .scrim{display:none}

/* Components */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow);margin-bottom:1.1rem}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.card-head h2{margin:0}
.grid{display:grid;gap:1rem} .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;margin-bottom:1.1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);padding:.9rem 1rem}
.kpi.amber{border-left-color:var(--amber)} .kpi.bad{border-left-color:var(--bad)}
.kpi .label{color:var(--muted);font-size:.85rem} .kpi .value{font-family:var(--display);font-size:1.45rem;font-weight:700;margin-top:.15rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:.5rem .9rem;border-radius:8px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .btn-primary:hover{filter:brightness(1.08)}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-ghost{background:transparent;color:inherit;border-color:rgba(127,127,127,.35)}
.btn-sm{padding:.3rem .6rem;font-size:.85rem} .btn-block{width:100%}
.icon-btn{position:relative;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:1rem}
.dot{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;font-size:.7rem;border-radius:99px;padding:0 5px;min-width:18px;line-height:18px}
.dropdown{position:relative} .dropdown-panel{display:none;position:absolute;right:0;top:46px;width:290px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.dropdown-panel.open{display:block} .notif{display:flex;justify-content:space-between;gap:.5rem;padding:.35rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
input,select,textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.5rem .65rem;width:100%}
input[type=checkbox]{width:auto} input:focus,select:focus,textarea:focus{border-color:var(--brand)}
label{display:flex;flex-direction:column;gap:.25rem;font-weight:500;font-size:.9rem}
label.inline{flex-direction:row;align-items:center;gap:.5rem}
.search{width:240px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;align-items:end}
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-bottom:.9rem}
.toolbar label{min-width:150px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:700;color:var(--muted);font-size:.85rem;white-space:nowrap}
tbody tr:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} tfoot td{font-weight:700}
.badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.78rem;font-weight:700}
.badge-ok{background:var(--ok-bg);color:var(--ok)} .badge-warn{background:var(--warn-bg);color:var(--warn)} .badge-bad{background:var(--bad-bg);color:var(--bad)} .badge-muted{background:var(--muted-bg);color:var(--muted)}
.alert{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;border:1px solid}
.alert-success{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)} .alert-error{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.thumb{width:42px;height:42px;object-fit:cover;border-radius:8px;background:var(--muted-bg)}
.actions{display:flex;gap:.35rem;flex-wrap:wrap}
dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);padding:1.2rem;width:min(560px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.chart-box{position:relative;height:280px}
.bar-row{display:flex;align-items:center;gap:.6rem;margin:.4rem 0;font-size:.9rem}
.bar-row .bar{height:10px;border-radius:99px;background:var(--brand);min-width:4px}
.bar-row .name{width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
.tabs a{padding:.35rem .8rem;border-radius:99px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.9rem}
.tabs a.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* POS */
.pos{display:grid;grid-template-columns:1fr 380px;gap:1rem;align-items:start}
.pos-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.product-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:.25rem}
.product-tile:hover{border-color:var(--brand)} .product-tile:disabled{opacity:.45;cursor:not-allowed}
.product-tile img,.product-tile .ph{width:100%;height:84px;object-fit:cover;border-radius:8px;background:var(--muted-bg);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.product-tile .pn{font-weight:700;font-size:.9rem;line-height:1.2} .product-tile .pp{color:var(--brand);font-weight:700}
.cart{position:sticky;top:76px}
.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:.5rem;align-items:center;padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.qty{display:flex;align-items:center;gap:.3rem} .qty button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.qty span{min-width:22px;text-align:center}
.cart-total{display:flex;justify-content:space-between;font-family:var(--display);font-size:1.4rem;margin:.8rem 0}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.chip{padding:.3rem .8rem;border-radius:99px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.chip.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* Login */
.login-body{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,var(--side),#1b6b58)}
.login-card{background:var(--surface);width:min(400px,92vw);padding:2rem;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-card form{display:grid;gap:1rem;margin-top:1rem}
.login-brand{display:flex;align-items:center;gap:.7rem} .login-brand h1{margin:0}

@media (max-width:980px){
  .sidebar{transform:translateX(-100%)} .sidebar.open{transform:none}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25}
  .main{margin-left:0} .menu-toggle{display:inline-block} .search{width:150px}
  .pos{grid-template-columns:1fr} .cart{position:static}
  .content{padding:1rem}
}
@media (max-width:560px){ .search{display:none} .topbar{padding:.6rem .8rem} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}