/* ==================== FORMULAIRE LOGIN - GRILLE 6 COLONNES ==================== */

/* Forcer la grille du formulaire sur 6 colonnes avec haute spécificité */
.dashboard-container .account-block .account-header-row.form-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  display: grid !important;
  gap: var(--box-gap) !important;
}

/* Classes span manquantes pour la grille 6 colonnes */
.account-header-row.form-grid .span-1 {
  grid-column: span 1;
}

.account-header-row.form-grid .span-5 {
  grid-column: span 5;
}

.account-header-row.form-grid .span-6 {
  grid-column: span 6;
}

:root[data-theme="dark"] .account-header-row.form-grid .account-box span-1 button[type="submit"] {
  background: #1a3d5c !important;
  color: #90caf9 !important;
  border-color: #64b5f6 !important;
}

/* ==================== VERSION MOBILE ==================== */

/* Sur mobile : passer à 1 colonne */
@media (max-width: 768px) {
  .dashboard-container .account-block .account-header-row.form-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  
  /* Toutes les cases prennent 1 colonne */
  .account-header-row.form-grid .span-1,
  .account-header-row.form-grid .span-5,
  .account-header-row.form-grid .span-6 {
    grid-column: span 1;
  }
}

/* Forcer 2 lignes égales qui s'adaptent à la hauteur du logo */
.header-auth-row {
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
}

/* ==================== RESPONSIVE HEADER LOGIN ==================== */

/* Tablette/Mobile (768px et moins) */
@media (max-width: 768px) {
  /* Passer la grille à 3 colonnes UNIQUEMENT pour login.php */
  .header-auth-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Logo : 1 colonne × 2 lignes */
  .site-logo-box {
    grid-column: span 1 !important;
    grid-row: span 2;
    height: auto !important;
  }
  
  /* Toutes les autres cases : 1 colonne */
  .header-auth-row .account-box:not(.site-logo-box),
  .header-auth-row .account-link:not(.site-logo-box) {
    grid-column: span 1 !important;
    max-height: none !important;
    min-height: auto !important;
  }
  
  /* Retirer la limite de hauteur du bloc */
  /*#header-container .account-block {
    max-height: none !important;
  } */
}

/* ==================== RESPONSIVE FORMULAIRE LOGIN ==================== */

/* Mobile/Tablette (768px et moins) */
@media (max-width: 768px) {
  /* HEADER : Passer en grille 3 colonnes */
  body .dashboard-container #header-container .header-auth-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Logo : 1 colonne × 2 lignes */
  body .dashboard-container #header-container .site-logo-box {
    grid-column: span 1 !important;
    grid-row: span 2;
    /* height: auto !important; */
  }
  
  /* Autres cases header : 1 colonne */
  body .dashboard-container #header-container .header-auth-row .account-box:not(.site-logo-box),
  body .dashboard-container #header-container .header-auth-row .account-link:not(.site-logo-box) {
    grid-column: span 1 !important;
    max-height: none !important;
    min-height: auto !important;
  }
  
  /* Retirer la limite de hauteur du bloc header */
  body .dashboard-container #header-container .account-block {
    max-height: none !important;
  }
  
  /* FORMULAIRE : Passer en grille 3 colonnes */
  body .dashboard-container .account-block .account-header-row.form-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Email et Password : 2 colonnes */
  body .dashboard-container .account-block .account-header-row.form-grid .span-4 {
    grid-column: span 2 !important;
  }
  
  /* Case Connexion+Rester : 1 colonne, 2 lignes */
  body .dashboard-container .account-block .account-header-row.form-grid .span-2 {
    grid-column: span 1 !important;
  }
}