/* ==========================================================================
   DSB - responsive.css
   Breakpoints : 768px (tablette) et 480px (mobile)
   ========================================================================== */

@media (max-width: 768px) {
  .sidebar-toggle {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .page-content {
    padding: 16px;
  }

  .topbar {
    padding: 12px 16px;
  }

  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-label {
    font-size: 14px;
  }

  /* Module Planning : reste en vue "mois" à toutes les tailles (contrairement à l'ancien
     calendrier intermittent de Disponibilités, retiré le 31/08/2026 — voir CLAUDE.md). Colonnes
     resserrées en largeur (contenu minimal : numéro du jour + un badge d'une lettre) pour tenir
     nativement dans la largeur d'un smartphone — la contrainte de largeur ne s'applique pas à la
     hauteur : les lignes peuvent être plus hautes sans casser le "tient à l'écran" (le défilement
     vertical d'un calendrier mensuel est normal), donc le badge reste un bouton confortable au
     doigt (padding généreux) plutôt que resserré comme les colonnes. */
  .calendrier-planning td {
    height: auto;
    min-height: 56px;
    padding: 4px 2px;
  }

  .calendrier-planning .jour-numero {
    font-size: 11px;
  }

  .calendrier-planning .statut-badge {
    font-size: 13px;
    padding: 8px 3px;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .page-title {
    font-size: 17px;
  }

  .user-menu-name {
    display: none;
  }

  .card {
    padding: 14px;
  }

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

  .table-actions {
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
  }

  .login-card {
    padding: 24px;
  }
}