/* ═══════════════════════════════════════════════════════
   SHARED RESPONSIVE SYSTEM — The Infinity Coder
   Applied to all 10 dashboard systems
   ═══════════════════════════════════════════════════════ */

/* ── Sidebar overlay for mobile ── */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:99;backdrop-filter:blur(2px);
}
.sidebar-overlay.show{display:block;}

/* ── Hamburger button (shown on mobile) ── */
/* Works for both .mob-toggle (billing/crm etc.) and .hamburger-top (hospital/school etc.) */
.mob-toggle{
  display:none;width:36px;height:36px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  flex-direction:column;align-items:center;justify-content:center;
  gap:5px;cursor:pointer;flex-shrink:0;padding:0;
}
.mob-toggle span{
  width:18px;height:2px;background:#fff;border-radius:2px;
  display:block;transition:all .3s;pointer-events:none;
}
.mob-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.mob-toggle.open span:nth-child(2){opacity:0;}
.mob-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
/* hamburger-top used by hospital/school/ecommerce/restaurant systems */
.hamburger-top{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px;border:none;background:none;}
.hamburger-top span{width:20px;height:2px;background:#fff;border-radius:2px;display:block;transition:all .3s;}

/* ── Sidebar slide-in on mobile ── */
@media(max-width:768px){
  .sidebar,.sb-sidebar,aside.sidebar{
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:200;
    position:fixed!important;
  }
  .sidebar.open,.sb-sidebar.open,aside.sidebar.open{
    transform:translateX(0);
  }
  .main,.sb-main{margin-left:0!important;}
  .mob-toggle{display:flex!important;}
  .hamburger-top{display:flex!important;}
  /* hide search bar on mobile topbar */
  .topbar .search-box,.topbar-actions input,.tb-search{display:none!important;}
}

/* ═══ KPI GRID BREAKPOINTS ═══ */
.kpi-grid{display:grid;gap:14px;}
/* Default desktop: 4 cols */
.kpi-grid{grid-template-columns:repeat(4,1fr);}
/* 5-col variant used by tickets */
.kpi-grid.cols-5{grid-template-columns:repeat(5,1fr);}
/* 3-col variant */
.kpi-grid.cols-3{grid-template-columns:repeat(3,1fr);}

@media(max-width:1280px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;}
  .kpi-grid.cols-5{grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:768px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;}
  .kpi-grid.cols-5,.kpi-grid.cols-3{grid-template-columns:repeat(2,1fr)!important;}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr!important;}
  .kpi-grid.cols-5,.kpi-grid.cols-3{grid-template-columns:1fr!important;}
}

/* ═══ CHARTS ROW ═══ */
.charts-row{display:grid;gap:16px;}
.charts-row{grid-template-columns:2fr 1fr;}
@media(max-width:1024px){.charts-row{grid-template-columns:1fr!important;}}

/* ═══ GENERIC 2-COL → 1-COL ═══ */
@media(max-width:768px){
  /* any inline 2-col grids used in dashboard pages */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns: 2fr 1fr"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns:3fr 2fr"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns: 3fr 2fr"]{grid-template-columns:1fr!important;}
  /* POS layout */
  .pos-layout{grid-template-columns:1fr!important;height:auto!important;}
  .pos-cart{max-height:500px;}
  /* Kanban — horizontal scroll */
  .kanban{grid-template-columns:repeat(4,280px)!important;overflow-x:auto;padding-bottom:12px;}
  /* product grid cards */
  .product-grid,.prod-grid{grid-template-columns:repeat(2,1fr)!important;}
  /* table-map */
  .table-map{grid-template-columns:repeat(3,1fr)!important;}
  /* team/agent grids */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
  [style*="grid-template-columns: repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
  /* page padding */
  .page{padding:16px!important;}
  /* topbar */
  .topbar,.sb-topbar{padding:12px 16px!important;}
  /* modal */
  .modal{width:95vw!important;padding:20px!important;}
  .form-grid,.fg-grid{grid-template-columns:1fr!important;}
}
@media(max-width:480px){
  .product-grid,.prod-grid{grid-template-columns:1fr!important;}
  .table-map{grid-template-columns:repeat(2,1fr)!important;}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;}
  .kanban{grid-template-columns:repeat(4,260px)!important;}
  .page-header{flex-direction:column;align-items:flex-start!important;}
  .page-header div{flex-wrap:wrap;}
}

/* ═══ TABLE RESPONSIVE ═══ */
@media(max-width:768px){
  .tbl-wrap,.table-card{overflow-x:auto;}
  table{min-width:600px;}
  /* for very narrow tables keep at 100% */
  table.compact{min-width:unset;}
  th,td{padding:10px 12px!important;font-size:12px!important;}
}

/* ═══ PAGE HEADER ═══ */
.page-header,.dash-header{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:22px;flex-wrap:wrap;gap:12px;
}
.page-header h2,.dash-header h2{font-size:18px;font-weight:800;}
@media(max-width:480px){
  .page-header h2,.dash-header h2{font-size:16px;}
}

/* ═══ TOPBAR RESPONSIVE ═══ */
.topbar,.sb-topbar{
  display:flex;align-items:center;
  justify-content:space-between;gap:10px;
  flex-wrap:nowrap;overflow:hidden;
}
.topbar h2,.tb-title{
  font-size:16px;font-weight:700;
  white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;
}
@media(max-width:480px){
  .topbar h2,.tb-title{font-size:14px;}
  .topbar-actions,.tb-right,.topbar-right{gap:6px!important;}
  .icon-btn,.tb-btn{width:32px!important;height:32px!important;}
  .avatar,.tb-avatar{width:32px!important;height:32px!important;font-size:11px!important;}
}

/* ═══ CARD / PANEL ═══ */
.card,.table-card,.tbl-wrap{
  border-radius:14px;
  overflow:hidden;
}
@media(max-width:768px){
  .card,.table-card,.tbl-wrap{border-radius:12px;}
}

/* ═══ SIDEBAR WIDTH FIX ═══ */
/* Ensure sidebar is exactly 240px on desktop and overlays on mobile */
@media(min-width:769px){
  .sidebar,.sb-sidebar,aside.sidebar{
    transform:none!important;
    width:240px;
  }
  .main,.sb-main{margin-left:240px!important;}
  .topbar,.sb-topbar{left:240px!important;}
}

/* ═══ SCROLL CONTAINERS ═══ */
body{overflow-x:hidden;}
.main,.sb-main{overflow-x:hidden;}

/* ═══ FORM GRIDS ═══ */
@media(max-width:600px){
  .form-grid,.fg-grid,.form_grid{grid-template-columns:1fr!important;}
  .full,[class*="full"]{grid-column:1/-1!important;}
}

/* ═══ EXP GRID (about section) ═══ */
@media(max-width:640px){
  .exp-grid{grid-template-columns:1fr 1fr!important;}
}
@media(max-width:380px){
  .exp-grid{grid-template-columns:1fr!important;}
}

/* ═══ STAT ITEMS ═══ */
.stat-item,.stat{min-width:80px;}

/* ═══ MISC UTILITY ═══ */
.overflow-x-auto{overflow-x:auto;}
.w-full{width:100%!important;}
img{max-width:100%;}