*{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;}
#root{min-height:100vh;background:#1a1f2e;}
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:420px 1fr;gap:12px;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:360px 1fr;}
}
@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 !important;grid-template-rows:1fr auto !important;height:calc(100vh - 130px) !important;}
  .pos-cart{position:relative;top:0;height:auto;max-height:50vh;overflow-y:auto;}
  #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;padding-bottom:70px !important;}
  .pos-layout{gap:10px;}
  .pos-cart{max-height:360px;}
}

/* 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;}
  /* Stack 2-col form grids to 1 column */
  [style*="gridTemplateColumns"],[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
}

/* Mobile-specific optimizations */
@media(max-width:480px){
  /* Reduce font sizes */
  body{font-size:13px;}
  /* Smaller card padding */
  .card,[class*="Card"]{padding:12px !important;}
  /* Compact stat cards */
  .sc-grid{gap:8px;margin-bottom:12px;}
  /* Tables: smaller text & padding */
  table th,table td{padding:6px 8px !important;font-size:11px !important;}
  table th{font-size:10px !important;}
  /* Buttons: better touch targets */
  button{min-height:36px;}
  /* Hide less important table columns on mobile */
  .hide-mobile{display:none !important;}
  /* Dashboard grid stacking */
  [style*="1.5fr 1fr 1fr"]{grid-template-columns:1fr !important;}
  [style*="1fr 1fr 1fr"]{grid-template-columns:1fr !important;}
}

@media(max-width:360px){
  main{padding:8px !important;padding-bottom:70px !important;}
  table th,table td{padding:4px 6px !important;font-size:10px !important;}
}

/* Performance */
.fi,.fu,.si{will-change:opacity,transform;}
table{table-layout:auto;}
img{content-visibility:auto;}
.modal-inner-wrap{flex-shrink:0;}

/* Mobile utility classes */
@media(max-width:640px){
  .mobile-stack{flex-direction:column !important;}
  .mobile-full{width:100% !important;min-width:0 !important;max-width:100% !important;}
  .mobile-hide{display:none !important;}
}

/* ── DEFENSIVE MOBILE FIXES ── */
@media(max-width:768px){
  /* Modal body max-height to prevent giant modals */
  .modal-inner-wrap{max-width:100vw !important;}
  /* Sticky topbar elements need room */
  [style*="position:sticky"]{z-index:50;}
  /* Generic overflow for table wrappers (Card children containing tables) */
  .card:has(> table),.card:has(table){overflow-x:auto;}
}
@media(max-width:640px){
  /* Kill any accidental min-width on form inputs */
  input[type="text"],input[type="number"],input[type="email"],input[type="tel"],input[type="date"],input[type="password"],select,textarea{
    min-width:0 !important;max-width:100% !important;
  }
  /* Any container with explicit pixel width becomes flexible */
  [style*="width:420px"],[style*="width:400px"],[style*="width:380px"],[style*="width:360px"]{
    width:100% !important;max-width:100% !important;
  }
  /* Force flex rows with many children to wrap */
  [style*="display:flex"]:not([style*="flex-direction:column"]){flex-wrap:wrap;}
  /* Fat headings shrink */
  h1,h2{font-size:18px !important;}
  h3{font-size:15px !important;}
}
@media(max-width:480px){
  /* Toast positioning */
  .toast,[class*="toast"]{left:10px !important;right:10px !important;max-width:calc(100vw - 20px) !important;}
  /* Buttons: comfortable touch, avoid tiny taps */
  button,.btn{min-height:40px;padding:8px 12px;}
  /* Compact labels */
  label{font-size:11px !important;}
  /* Scroll fix for long lists */
  [style*="overflowY:auto"],[style*="overflow-y:auto"]{-webkit-overflow-scrolling:touch;}
}

/* Landscape tablet refinement */
@media(min-width:641px) and (max-width:1024px){
  .rg-4{grid-template-columns:repeat(2,1fr);}
  .sc-grid-6{grid-template-columns:repeat(3,1fr);}
}