/**
 * Dernière couche responsive — chargée APRÈS {% block extra_css %} pour
 * annuler les margin-left: 260px !important des templates individuels sur mobile/tablette.
 */

@media (max-width: 991px) {
  /* Drawer : sidebar hors écran par défaut (priorité sur règles tablette 769–1024px) */
  body:not(.page-login) .sidebar {
    width: min(85vw, 280px) !important;
    max-width: 280px !important;
    transform: translateX(-100%) !important;
    -webkit-transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2000 !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.25) !important;
  }

  body:not(.page-login) .sidebar.mobile-open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }

  body:not(.page-login) .sidebar-header .menu-toggle,
  body:not(.page-login) #menuToggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body:not(.page-login) .sidebar-overlay {
    display: none;
    z-index: 1999;
  }

  body:not(.page-login) .sidebar-overlay.active {
    display: block !important;
  }

  body:not(.page-login) .app-container > main.main-content,
  body:not(.page-login) .main-content,
  body:not(.page-login) main.main-content,
  body:not(.page-login) .page-container,
  body:not(.page-login) .dashboard-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  body:not(.page-login) .page-container,
  body:not(.page-login) .form-container,
  body:not(.page-login) .page-header-hl,
  body:not(.page-login) .card-hl,
  body:not(.page-login) .veille-pro,
  body:not(.page-login) .mpa-wrap,
  body:not(.page-login) .filters-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Largeurs calc(100% - 2 * var(--space-xl)) des listes stocks etc. */
  body:not(.page-login) .page-header-hl[style*="calc(100%"],
  body:not(.page-login) .card-hl[style*="calc(100%"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:not(.page-login) .top-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  body:not(.page-login) .footer-hl {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .table-responsive,
  .table-hl,
  .items-table,
  .table-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .table-hl table,
  .items-table {
    min-width: 520px;
  }

  .btn-hl,
  .btn,
  button[type="submit"] {
    min-height: 44px;
  }

  .mobile-menu-toggle {
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  body:not(.page-login) .dash-kpi-grid,
  body:not(.page-login) .dash-mod-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-login .login-card {
    border-radius: 12px;
  }
}