/* Styles pour les images de fond dynamiques */

/* Container de fond — z-index NÉGATIF et non 0 (contrairement à la classe Tailwind "z-0" posée
   dans index.html) : un élément positionné (fixed) à z-index:0 se peint APRÈS le contenu normal
   non positionné (<main> et tout ce qu'il contient, dont les cartes .bg-white) dans l'ordre
   d'empilement CSS — le fond apparaissait donc PAR-DESSUS le contenu, pas derrière, juste assez
   discrètement (7%) pour passer inaperçu sur des écrans chargés (tuiles du tableau de bord) mais
   bien visible sur une grande surface blanche unie (ex. formulaire de saisie quotidienne). Un
   z-index réellement négatif place le fond dans le tout premier plan peint, systématiquement
   derrière tout contenu non positionné, quelle que soit sa densité visuelle. Le bug était resté
   invisible tant que le fond était masqué (display:none) après connexion — révélé seulement en
   le rendant visible partout pour l'essai en cours. */
#backgroundContainer {
  pointer-events: none; /* Permet de cliquer à travers le fond */
  z-index: -1 !important;
}

/* Essai : fond très estompé sur le reste du site une fois connecté (au lieu de masqué) — la
   quasi-totalité des écrans reposent sur des cartes opaques (--paper/blanc), donc le fond ne
   transparaît que dans les marges/interstices, jamais derrière le texte ou les tableaux. */
#backgroundImage.background-subtle {
  opacity: 0.07;
}

/* Container de connexion avec fond amélioré - FORCÉ */
body #loginSection .bg-white {
  background: rgba(251, 248, 241, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 2px dashed var(--thread) !important;
  box-shadow: 0 8px 32px rgba(30, 27, 22, 0.12) !important;
}

/* Correction des couleurs du menu déroulant utilisateur */
#userMenu {
  background: var(--paper) !important;
  border: 2px dashed var(--thread) !important;
  box-shadow: 0 4px 6px rgba(30, 27, 22, 0.1) !important;
}

#userMenu button {
  color: var(--ink) !important;
  background: transparent !important;
}

#userMenu button:hover {
  background: var(--paper-alt) !important;
  color: var(--ink) !important;
}

/* Animation de fondu pour l'image de fond */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#backgroundImage {
  animation: fadeIn 1s ease-in-out;
}

/* PRÉSERVER LA VISIBILITÉ DU HEADER — reste visible en permanence au scroll */
header.app-header {
  position: sticky;
  top: 0;
  z-index: 40; /* Au-dessus du fond */
  background: rgba(30, 27, 22, 0.85) !important;
}

header h1,
header .text-white,
header button {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* PRÉSERVER LA VISIBILITÉ DU TEXTE DE CONNEXION */
#loginSection h2.text-2xl {
  color: var(--ink) !important;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

#loginSection label.block {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

#loginSection input[type="text"],
#loginSection input[type="password"] {
  background: #ffffff !important;
  border: 1px solid var(--thread) !important;
  color: var(--ink) !important;
}

#loginSection input[type="text"]:focus,
#loginSection input[type="password"]:focus {
  background: #ffffff !important;
  border-color: var(--patch) !important;
  box-shadow: 0 0 0 3px var(--patch-soft) !important;
}

#loginSection button[type="submit"] {
  background: var(--patch) !important;
  color: var(--patch-ink) !important;
  font-weight: bold;
  text-shadow: none;
}

#loginSection button[type="submit"]:hover {
  background: var(--patch-deep) !important;
  color: white !important;
}

/* Responsive design */
@media (max-width: 768px) {
  #loginSection {
    margin: 1rem;
    max-width: none;
  }
}