/* Styles de cartes (génériques + variantes) */

.card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm, none);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  max-width: var(--card-max-width, 1000px);
  margin-left: auto;
  margin-right: auto;
}

/* Variante compacte horizontale pour listes (plus longue et moins haute) */
.card-compact {
  padding: 8px 14px;
  margin-bottom: 8px;
  border-radius: 6px;
}

/* Alignement horizontal serré pour texte + badge fin */
.card-compact strong { white-space: nowrap; }
.card-compact .badge { white-space: nowrap; }

/* Carte pleine largeur / plein écran (utilisée pour le modal Planning) */
.card-full-bleed {
  margin: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Variantes sans bordure latérale colorée (accent retiré) */
.card-success { border-left: none; }
.card-green   { border-left: none; }
.card-gray    { border-left: none; }
.card-purple  { border-left: none; }
.card-orange  { border-left: none; }

.card-danger { border-left: none; background-color: #fdf2f2; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.card-subtitle {
  color: #666;
  font-size: 0.9rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
}

/* Variante d'avertissement (utilisée pour la vérification d'email) */
.card-warning {
  background-color: var(--surface);
  background: color-mix(in srgb, var(--warning) 18%, var(--surface) 82%);
  border: 2px solid var(--warning);
  border-radius: 12px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--warning) 24%, transparent);
}

.card-warning .overlay-title { color: var(--warning); color: color-mix(in srgb, var(--warning) 85%, black 15%); }
.card-warning .overlay-subtitle { color: var(--warning); color: color-mix(in srgb, var(--warning) 70%, black 30%); }
.card-warning .error-message { color: var(--warning); color: color-mix(in srgb, var(--warning) 60%, black 40%); }


/* --- Chrono page specific cards & layout --- */
.chrono-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 14px;
  align-items: start;
  margin: 0 auto;
  width: min(1400px, 96vw);
}

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

.card-slot-now {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.card-slot-next {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

/* === Modale Gérer les familles === */

/* Zone de sélection de famille - style subtil */
#fam-manager-selected-info {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Amélioration des checkbox dans les cartes familles */
.fam-manager-section .checkbox-row {
  padding: 0.5rem;
  border-radius: var(--radius);
  transition: background-color 0.2s ease;
}

.fam-manager-section .checkbox-row:hover {
  background: var(--bg);
}