:root{
  --sidebar-w:248px; --brand:#0d6efd; --brand-2:#0aa2c0;
  --bg:#f4f6fb; --card:#fff; --ink:#1f2430; --muted:#6b7280; --line:#e6e9f0;
}
[data-bs-theme="dark"]{
  --bg:#0f1115; --card:#181b22; --ink:#e7eaf0; --muted:#9aa3b2; --line:#262b34;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,#0b1220,#111a2e);color:#cdd5e3;
  position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:50;transition:transform .25s}
.brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.2rem;font-weight:700;font-size:1.05rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.brand i{font-size:1.4rem;color:var(--brand-2)}
.nav-menu{flex:1;overflow-y:auto;padding:.6rem .5rem}
.nav-menu a{display:flex;align-items:center;gap:.75rem;padding:.65rem .8rem;border-radius:.6rem;color:#aeb8c9;text-decoration:none;margin-bottom:.15rem;font-size:.92rem}
.nav-menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-menu a.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-weight:600}
.nav-menu a i{font-size:1.1rem;width:20px;text-align:center}
.sidebar-foot{padding:.8rem;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-foot a{display:flex;gap:.6rem;align-items:center;text-decoration:none;padding:.5rem .8rem;border-radius:.5rem}
.sidebar-foot a:hover{background:rgba(255,255,255,.06)}

/* Main */
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:1rem;background:var(--card);border-bottom:1px solid var(--line);
  padding:.7rem 1.2rem;position:sticky;top:0;z-index:40}
.page-title{font-size:1.15rem;margin:0;font-weight:700;flex:1}
.topbar-right{display:flex;align-items:center;gap:.8rem}
.user-chip{display:flex;align-items:center;gap:.5rem}
.user-chip i{font-size:1.7rem;color:var(--brand)}
.user-chip small{display:block;color:var(--muted);font-size:.72rem}
.content{padding:1.3rem;max-width:1400px;width:100%}
#menuToggle{display:none}

/* Cards & stats */
.card{background:var(--card);border:1px solid var(--line);border-radius:.9rem}
.stat{display:flex;align-items:center;gap:1rem;padding:1.1rem}
.stat .ic{width:54px;height:54px;border-radius:.8rem;display:grid;place-items:center;font-size:1.5rem;color:#fff}
.stat h3{margin:0;font-size:1.5rem;font-weight:800}
.stat small{color:var(--muted)}
.bg-grad-1{background:linear-gradient(135deg,#0d6efd,#0aa2c0)}
.bg-grad-2{background:linear-gradient(135deg,#198754,#20c997)}
.bg-grad-3{background:linear-gradient(135deg,#fd7e14,#ffc107)}
.bg-grad-4{background:linear-gradient(135deg,#6f42c1,#d63384)}
.bg-grad-5{background:linear-gradient(135deg,#dc3545,#fd7e14)}

/* POS layout */
.pos-grid{display:grid;grid-template-columns:1fr 380px;gap:1.1rem}
.service-btn{cursor:pointer;border:1px solid var(--line);border-radius:.7rem;padding:.9rem;text-align:left;background:var(--card);transition:.15s}
.service-btn:hover{border-color:var(--brand);transform:translateY(-2px)}
.cart-line{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px dashed var(--line)}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0b1220,#15233f);padding:1rem}
.login-card{background:var(--card);border-radius:1rem;padding:2rem;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* Status badges */
.badge-pending{background:#6c757d}.badge-washing{background:#0d6efd}
.badge-ready{background:#198754}.badge-claimed{background:#343a40}

@media(max-width:992px){
  .sidebar{transform:translateX(-100%);z-index:1050} .sidebar.open{transform:none}
  .main{margin-left:0} #menuToggle{display:inline-flex}
  .pos-grid{grid-template-columns:1fr}
}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1040;display:none}
.sidebar-backdrop.show{display:block}
@media(min-width:993px){ .sidebar-backdrop{display:none!important} }

/* Receipt print */
@media print{ body *{visibility:hidden} #receipt,#receipt *{visibility:visible}
  #receipt{position:absolute;left:0;top:0} .no-print{display:none!important} }

/* POS add-on buttons */
.addon-btn{border-style:dashed}
.addon-btn.disabled-addon{opacity:.5;pointer-events:none;filter:grayscale(1)}