/* ==========================================================================
   RESPONSIVE - Adaptation Tablette / Mobile
   ========================================================================== */

/* ---------- TABLETTE ---------- */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 200px;
  }

  .main-content {
    padding: 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- MOBILE / TABLETTE PORTRAIT ---------- */
@media (max-width: 768px) {
  /* On masque le menu latéral et on affiche la barre du bas */
  .sidebar {
    display: none;
  }

  .mobile-topbar {
    display: flex;
  }

  .bottom-nav {
    display: block;
  }

  .app-layout {
    display: block;
  }

  .main-content {
    padding: 16px;
    padding-bottom: calc(var(--bottom-nav-height) + 24px);
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header .btn {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  /* Sur mobile, on remplace les tableaux par des cartes */
  .table-wrapper {
    display: none;
  }

  .record-cards {
    display: flex;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .tabs {
    flex-wrap: nowrap;
  }

  .login-card {
    padding: 32px 22px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .product-picker-item {
    flex-wrap: wrap;
  }

  .fab-nouvelle-commande span.label {
    display: none;
  }

  .fab-nouvelle-commande {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }
}

/* ---------- PETITS TÉLÉPHONES ---------- */
@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .modal-box {
    padding: 18px;
  }
}

/* Empêche tout débordement horizontal sur petits écrans */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  img, table, .card {
    max-width: 100%;
  }
}