/* ==========================================================================
   CG CARS ERP - Styles responsives
   ========================================================================== */

@media (max-width: 1024px){
  .navbar-search input{width:200px;}
  .navbar-search input:focus{width:240px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 900px){
  :root{--sidebar-w:240px;}
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg);}
  .sidebar.mobile-open{transform:translateX(0);}
  .sidebar.collapsed{width:var(--sidebar-w);transform:translateX(-100%);}
  .sidebar.collapsed.mobile-open{transform:translateX(0);}
  .main-wrap, .sidebar.collapsed ~ .main-wrap{margin-left:0!important;}
  .navbar-search{display:none;}
  #mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:190;}
  #mobile-backdrop.show{display:block;}
}

@media (max-width: 720px){
  .content{padding:16px;}
  .page-header{flex-direction:column;align-items:stretch;}
  .page-actions{width:100%;}
  .page-actions .btn{flex:1;}
  .form-row{grid-template-columns:1fr;}
  .modal-box{width:100%!important;border-radius:16px 16px 0 0;margin-top:auto;}
  .modal-overlay{align-items:flex-end;padding:0;}
  .kpi-card{flex-direction:row;}
  .dossier-meta{gap:16px;}
  table.data-table{font-size:12px;}
  .navbar{padding:0 14px;}
  .login-card{padding:32px 22px 24px;}
}

@media (max-width: 480px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
  .navbar-user .avatar{width:34px;height:34px;}
  .kpi-card .kpi-value{font-size:18px;}
  .table-toolbar{flex-direction:column;align-items:stretch;}
  .table-search{max-width:none;}
}