/* Masque les éléments Alpine.js avant leur initialisation (évite le flash) */
[x-cloak] { display: none !important; }

/* Custom theme overrides for GAEL - Indigo palette */
:root {
  /* Primary brand colors - Indigo */
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;
  --brand-950: #1e1b4b;
}

/* Light mode helpers */
.text-brand { color: var(--brand-600); }
.bg-brand { background-color: var(--brand-600); }

.btn-brand {
  background-color: var(--brand-600);
  color: #fff !important;
  padding: 0.45rem 0.9rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s;
}
.btn-brand:hover { background-color: var(--brand-700); }

.badge-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Card elevation */
.card-elevated {
  box-shadow: 0 4px 12px rgba(49, 46, 129, 0.1);
}

/* Form focus rings - Indigo accent */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
  border-color: var(--brand-500);
}

/* Dark mode adjustments */
.dark {
  --brand-500: #818cf8;
  --brand-600: #6366f1;
}

/* Demandes: structure de carte homogène (header / body / footer). */
.demande-card {
  display: flex;
  flex-direction: column;
  /* Permet à toutes les cartes d'une même ligne de s'étirer pareil. */
  height: 100%;
}

.demande-card-header {
  /* Réserve la même hauteur d'entête même si le contenu varie. */
  min-height: 3.5rem;
}

.demande-card-body {
  display: flex;
  /* Le body prend l'espace restant entre header et footer. */
  flex: 1 1 auto;
  flex-direction: column;
  /* Hauteur minimale pour garder un rythme visuel régulier en grille. */
  min-height: 13.5rem;
}

/* En mode compact, on supprime les hauteurs mini imposées. */
.compact-mode .demande-card-header {
  min-height: auto;
}

.compact-mode .demande-card-body {
  min-height: auto;
}

.demande-ref {
  display: inline-block;
  /* Coupe la référence longue sans casser la mise en page. */
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.demande-justification {
  /* Limite la justification à 4 lignes pour aligner les cartes. */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* Zone centrale principale: largeur etendue pour les tableaux budget. */
.layout-main-container {
  max-width: 1600px;
}