*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#f0f4f8; --white:#fff; --sidebar:#1e2a3a;
  --text:#1a202c; --text2:#4a5568; --muted:#718096;
  --border:#e2e8f0; --blue:#3182ce; --green:#38a169;
  --amber:#d97706; --red:#e53e3e; --purple:#6b46c1;
  --shadow:0 2px 12px rgba(0,0,0,0.07);
  --shadow-md:0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.14);
  --radius:16px;
  --g-green:linear-gradient(135deg,#48bb78,#2f855a);
  --g-blue:linear-gradient(135deg,#63b3ed,#2b6cb0);
  --g-purple:linear-gradient(135deg,#b794f4,#6b46c1);
  --g-orange:linear-gradient(135deg,#f6ad55,#c05621);
  --g-teal:linear-gradient(135deg,#4fd1c5,#2c7a7b);
  --g-red:linear-gradient(135deg,#fc8181,#c53030);
  --g-pink:linear-gradient(135deg,#f687b3,#b83280);
  --g-indigo:linear-gradient(135deg,#7f9cf5,#434190);
  --sidebar-w:220px;
  --topbar-h:60px;
}
html,body{height:100%;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;scroll-behavior:smooth;}
main{min-height:100vh;}
::-webkit-scrollbar{width:5px;height:5px;}
@media print{
  body{background:#fff !important;}
  #bottom-nav,#sidebar-overlay,.desktop-sidebar,.mobile-menu-btn,
  .no-print,[data-noprint]{display:none !important;}
  main{margin-left:0 !important;padding:0 !important;}
  .print-area{padding:24px;}
  .card{box-shadow:none !important;border:1px solid #e2e8f0 !important;}
  table{font-size:12px;}
  @page{margin:15mm;size:A4;}
}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px;}
input,select,textarea,button{font-family:'Nunito',sans-serif;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes progress{0%{transform:translateX(-100%)}50%{transform:translateX(0%)}100%{transform:translateX(200%)}}
.fu{animation:fadeUp .28s ease both;contain:layout style;}
.fi{animation:fadeIn .22s ease both;contain:layout style;}
.si{animation:scaleIn .2s ease both;}

/* ── RESPONSIVE GRID HELPERS ── */
.rg-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.rg-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.rg-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

/* ── BOTTOM NAV (mobile) ── */
#bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;
  background:var(--sidebar);z-index:300;border-top:1px solid rgba(255,255,255,0.08);
  display:none;align-items:center;justify-content:space-around;padding:0 4px;}
#bottom-nav .bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 8px;border-radius:10px;cursor:pointer;min-width:52px;gap:2px;transition:background .15s;}
#bottom-nav .bn-item.active{background:rgba(255,255,255,0.13);}
#bottom-nav .bn-item span.ico{font-size:18px;color:rgba(255,255,255,0.65);}
#bottom-nav .bn-item.active span.ico{color:#fff;}
#bottom-nav .bn-item span.lbl{font-size:9px;font-weight:700;color:rgba(255,255,255,0.5);white-space:nowrap;}
#bottom-nav .bn-item.active span.lbl{color:#fff;}

/* ── SIDEBAR OVERLAY (mobile) ── */
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:190;backdrop-filter:blur(2px);}

/* ── STAT CARD RESPONSIVE ── */
.sc-grid{display:grid;gap:12px;margin-bottom:18px;}
.sc-grid-2{grid-template-columns:repeat(2,1fr);}
.sc-grid-3{grid-template-columns:repeat(3,1fr);}
.sc-grid-4{grid-template-columns:repeat(4,1fr);}
.sc-grid-6{grid-template-columns:repeat(6,1fr);}

/* ── MODAL RESPONSIVE ── */
.modal-inner{overflow-y:auto;}

/* ── TABLE WRAPPER ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ── POS LAYOUT ── */
.pos-layout{display:grid;grid-template-columns:1fr 340px;gap:16px;min-height:calc(100vh - 110px);}
.pos-cart{position:sticky;top:80px;height:calc(100vh - 100px);overflow-y:auto;display:flex;flex-direction:column;}

/* ── BREAKPOINTS ── */
@media(max-width:1100px){
  .rg-4{grid-template-columns:repeat(2,1fr);}
  .sc-grid-4{grid-template-columns:repeat(2,1fr);}
  .sc-grid-6{grid-template-columns:repeat(3,1fr);}
  .pos-layout{grid-template-columns:1fr 300px;}
}
@media(max-width:900px){
  :root{--sidebar-w:0px !important;}
  .rg-3{grid-template-columns:repeat(2,1fr);}
  .sc-grid-3{grid-template-columns:repeat(2,1fr);}
  .pos-layout{grid-template-columns:1fr;grid-template-rows:auto auto;}
  .pos-cart{position:relative;top:0;height:auto;max-height:420px;}
  #bottom-nav{display:flex !important;}
}
@media(max-width:640px){
  :root{--radius:12px;}
  .rg-2{grid-template-columns:1fr;}
  .rg-3{grid-template-columns:1fr;}
  .rg-4{grid-template-columns:1fr;}
  .sc-grid-2{grid-template-columns:repeat(2,1fr);}
  .sc-grid-3{grid-template-columns:repeat(2,1fr);}
  .sc-grid-4{grid-template-columns:repeat(2,1fr);}
  .sc-grid-6{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:400px){
  .sc-grid-2{grid-template-columns:1fr;}
  .sc-grid-3{grid-template-columns:1fr;}
  .sc-grid-4{grid-template-columns:repeat(2,1fr);}
}
/* Mobile sidebar slide */
@media(max-width:900px){
  [class*="desktop-sidebar"] > div{
    transition:transform .25s cubic-bezier(.4,0,.2,1) !important;
  }
  .mobile-menu-btn{display:block !important;}
  .user-info{display:none;}
  main{margin-left:0 !important;}
  /* Topbar left = 0 on mobile */
  [style*="left:var(--sidebar-w"]{left:0 !important;}
}
@media(max-width:480px){
  main{padding:10px !important;}
}

/* Modal responsive */
@media(max-width:640px){
  .modal-backdrop{align-items:flex-end !important;padding:0 !important;}
  .modal-inner-wrap{border-radius:20px 20px 0 0 !important;width:100% !important;max-height:calc(100vh - 20px) !important;}
}
/* Performance */
.fi,.fu,.si{will-change:opacity,transform;}
table{table-layout:fixed;}
img{content-visibility:auto;}
.modal-inner-wrap{flex-shrink:0;}