/* ============================================================
   RESPONSIVE.CSS
   ============================================================ */
@media (max-width: 1100px){
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 860px){
  :root{--sidebar-w:0px}
  #app-shell{grid-template-columns:1fr}
  .app-sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(82vw,280px);z-index:170;
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:18px 0 40px rgba(0,0,0,.18)
  }
  .app-sidebar.open{transform:translateX(0)}
  #btn-sidebar-toggle{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto}
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;z-index:160;background:rgba(8,23,14,.42);
    opacity:0;visibility:hidden;pointer-events:none;transition:.2s
  }
  .sidebar-backdrop.on{opacity:1;visibility:visible;pointer-events:auto}
  body.sidebar-mobile-open{overflow:hidden}
  .app-header{padding:11px 14px;gap:10px}
  .app-header h1{font-size:17px}
  .app-header .user-chip{display:none}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  #content-main{padding:14px}
}