/* ==========================================================================
   admin-responsive.css
   Loaded AFTER admin.css. Handles tablet + phone breakpoints:
   - 1200px: tighten KPI/stat grids
   - 1024px: sidebar becomes an off-canvas drawer (tablets, incl. landscape)
   - 700px:  single-column layouts, mobile topbar takes over
   - 480px:  data tables collapse into stacked cards
   ========================================================================== */

/* ---------- ≤1200px : laptop / small desktop ---------- */
@media (max-width:1200px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .cols{grid-template-columns:1fr 1fr}
}

/* ---------- ≤1024px : tablets — sidebar becomes a drawer ---------- */
@media (max-width:1024px){
  .app{grid-template-columns:1fr}

  .side{
    position:fixed; top:0; left:0; height:100dvh; width:min(280px,82vw);
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 0 0 rgba(0,0,0,0); z-index:100;
  }
  .side.open{transform:translateX(0); box-shadow:8px 0 30px rgba(0,0,0,.25)}

  .side-close{
    display:block; margin-left:auto; margin-bottom:8px; background:none; border:none;
    color:#cfccc6; font-size:22px; line-height:1; cursor:pointer; padding:4px 8px;
  }

  .sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(20,18,16,.45);
    z-index:90; opacity:0; transition:opacity .2s ease;
  }
  .sidebar-overlay.open{display:block; opacity:1}
  body.sidebar-open{overflow:hidden}

  .mobile-topbar{
    display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:40;
    background:var(--sidebar); color:#e9e7e2; padding:12px 16px;
  }
  .mobile-topbar .menu-btn{
    background:none; border:1px solid #423f3b; color:#e9e7e2; border-radius:8px;
    width:38px; height:38px; font-size:18px; cursor:pointer; flex-shrink:0;
  }
  .mobile-topbar .mt-logo{font-family:Georgia,serif; letter-spacing:.4px; font-size:15px}

  .main{padding:20px 20px 80px}
}

/* ---------- ≤900px : hi-res phones / small tablets portrait ---------- */
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .health-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .row2,.uploads{grid-template-columns:1fr}
}

/* ---------- ≤700px : phones ---------- */
@media (max-width:700px){
  body{font-size:13.5px}
  .main{padding:16px 14px 88px}
  .kpis{grid-template-columns:1fr 1fr; gap:10px}
  .kpi{padding:13px 14px}
  .kpi .k-val{font-size:22px}
  .cols{grid-template-columns:1fr}
  .topbar{flex-direction:column; align-items:stretch}
  .btn-row{width:100%}
  .btn-row .btn{flex:1; justify-content:center}
  .dev-head{flex-direction:column; align-items:stretch}
  .dev-title{gap:8px}
  .strip{gap:12px 20px}
  .panel-head{flex-direction:column; align-items:stretch}
  .search{width:100%}
  .toolbar{flex-direction:column; align-items:stretch}
  .search-wrap{max-width:none}
  .chips{overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px}
  .form-actions{flex-direction:column-reverse; align-items:stretch}
  .form-actions .left-note{margin-right:0; text-align:center; order:99}
  .form-actions .btn{width:100%; justify-content:center}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* ---------- ≤480px : narrow phones ---------- */
@media (max-width:480px){
  .health-grid{grid-template-columns:1fr}

  /* .kpis and .stats stay at the 2-column layout set by the ≤700px/≤900px
     rules above — revenue/status cards keep showing 2 per row even on
     narrow phones. */
  /* Tables (including .rtable) stay real tables on mobile and scroll
     horizontally via the .tbl-scroll wrapper already around them,
     rather than collapsing into stacked cards. */
}