.htmx-indicator {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-in-out;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Tables scroll sideways on phones instead of squashing every column. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll::-webkit-scrollbar {
  height: 6px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: rgb(51 65 85);
  border-radius: 9999px;
}

/* Numbers line up column by column, which matters a lot in a ledger. */
.tabular {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible au clavier, sur tous les elements interactifs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Squelettes de chargement, le temps qu'une donnee arrive. */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: rgb(30 41 59);
  border-radius: 0.75rem;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent);
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  100% {
    transform: translateX(100%);
  }
}

/* ------------------------------------------------------------------ */
/* Theme clair : surcharges appliquees quand <html> n'a pas la classe  */
/* `dark`. L'app est concue en sombre ; on remappe ici les teintes      */
/* slate les plus courantes pour offrir un mode jour lisible.           */
/* ------------------------------------------------------------------ */
html:not(.dark) body {
  /* Fond teinte plutot que blanc : trois nuances froides qui se fondent, pour
     que les cartes blanches se detachent sans que l'ecran paraisse delave. */
  background-color: #e4ecf8;
  background-image: linear-gradient(155deg, #e4ecf8 0%, #eae8f7 45%, #e3f0ee 100%);
  background-attachment: fixed;
  color: #0f172a;
}

html:not(.dark) .skeleton {
  background-color: #e2e8f0;
}

/* Trois niveaux de surface au lieu d'un blanc unique : les cartes se posent sur
   le fond teinte, et les blocs imbriques dans les cartes se distinguent encore. */
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/40,
html:not(.dark) .bg-slate-900\/30,
html:not(.dark) .bg-slate-900\/95 {
  background-color: #f9fbff !important;
}

/* Blocs imbriques (details d'une carte, lignes de formulaire) : legerement plus teintes. */
html:not(.dark) .bg-slate-950\/60,
html:not(.dark) .bg-slate-950\/50,
html:not(.dark) .bg-slate-950\/40,
html:not(.dark) .bg-slate-950\/30 {
  background-color: #edf3fc !important;
}

/* Champs de saisie et menus deroulants : blanc franc, pour que la zone de saisie se voie. */
html:not(.dark) input.bg-slate-950,
html:not(.dark) select.bg-slate-950,
html:not(.dark) textarea.bg-slate-950,
html:not(.dark) input.bg-slate-900,
html:not(.dark) select.bg-slate-900,
html:not(.dark) textarea.bg-slate-900,
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/90 {
  background-color: #ffffff !important;
}

/* Les cartes prennent une ombre douce et une bordure teintée : du relief sans lourdeur. */
html:not(.dark) .rounded-2xl.border {
  border-color: #d3deee !important;
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.06), 0 8px 20px rgba(30, 58, 95, 0.07);
}

/* Barre latérale et barre mobile teintées pour se détacher nettement du contenu. */
html:not(.dark) aside.md\:flex,
html:not(.dark) nav.fixed {
  background-color: #eff4fd !important;
}
html:not(.dark) header.sticky {
  background-color: rgba(239, 244, 253, 0.94) !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/30,
html:not(.dark) .bg-slate-800\/20,
html:not(.dark) .bg-slate-700,
html:not(.dark) .bg-slate-700\/50,
html:not(.dark) .hover\:bg-slate-800:hover,
html:not(.dark) .hover\:bg-slate-800\/50:hover,
html:not(.dark) .hover\:bg-slate-800\/30:hover,
html:not(.dark) .hover\:bg-slate-700:hover {
  background-color: #e3eaf6 !important;
}

/* Pastilles et encarts colores : en mode clair, un fond a 5-15 % d'opacite est
   presque invisible et le texte clair illisible. On renforce les deux. */
html:not(.dark) .bg-emerald-500\/15,
html:not(.dark) .bg-emerald-500\/10 {
  background-color: #d7f5e4 !important;
}
html:not(.dark) .bg-rose-500\/15,
html:not(.dark) .bg-rose-500\/10 {
  background-color: #fde0e4 !important;
}
html:not(.dark) .bg-amber-500\/15,
html:not(.dark) .bg-amber-500\/10,
html:not(.dark) .bg-amber-500\/5 {
  background-color: #fdf0d5 !important;
}
html:not(.dark) .bg-sky-500\/15,
html:not(.dark) .bg-sky-500\/10,
html:not(.dark) .bg-sky-500\/5 {
  background-color: #dcecfd !important;
}
html:not(.dark) .bg-indigo-500\/15,
html:not(.dark) .bg-indigo-500\/10,
html:not(.dark) .bg-indigo-500\/5 {
  background-color: #e4e5fd !important;
}

/* Textes d'accent : les teintes 300/400 concues pour le sombre manquent de
   contraste sur fond clair ; on descend de deux crans. */
html:not(.dark) .text-emerald-400 { color: #047857 !important; }
html:not(.dark) .text-rose-400    { color: #be123c !important; }
html:not(.dark) .text-amber-400   { color: #b45309 !important; }
html:not(.dark) .text-sky-400,
html:not(.dark) .text-sky-300     { color: #0369a1 !important; }
html:not(.dark) .text-indigo-400,
html:not(.dark) .text-indigo-300  { color: #4338ca !important; }

/* Teintes 100/200 : concues pour ressortir sur fond sombre, elles deviennent
   quasi invisibles sur fond clair. Elles servent surtout dans les encarts
   d'avertissement, dont la lisibilite est justement essentielle. */
html:not(.dark) .text-amber-100,
html:not(.dark) .text-amber-200,
html:not(.dark) .text-amber-100\/70,
html:not(.dark) .text-amber-200\/70,
html:not(.dark) .text-amber-200\/90 { color: #92400e !important; }
html:not(.dark) .text-rose-300      { color: #be123c !important; }
html:not(.dark) .hover\:text-amber-300:hover { color: #92400e !important; }
html:not(.dark) .hover\:text-amber-200:hover { color: #78350f !important; }
html:not(.dark) .hover\:text-sky-300:hover   { color: #075985 !important; }

/* Bordures colorees des encarts, sinon fondues dans le fond. */
html:not(.dark) .border-sky-500\/30,
html:not(.dark) .border-sky-500\/20    { border-color: #a9d3f7 !important; }
html:not(.dark) .border-amber-500\/25,
html:not(.dark) .border-amber-500\/20  { border-color: #f2ce8a !important; }
html:not(.dark) .border-emerald-500\/20 { border-color: #93dfb8 !important; }
html:not(.dark) .border-indigo-500\/20  { border-color: #b6b8f5 !important; }

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-300 {
  color: #1e293b !important;
}

html:not(.dark) .text-slate-400 {
  color: #475569 !important;
}

html:not(.dark) .text-slate-500 {
  color: #64748b !important;
}

html:not(.dark) .text-slate-600 {
  color: #94a3b8 !important;
}

html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700 {
  border-color: #d6e0ee !important;
}

/* Le texte blanc redevient sombre en mode clair... */
html:not(.dark) .text-white {
  color: #0f172a !important;
}

/* ...sauf sur les boutons et pastilles colores, qui restent lisibles en blanc. */
html:not(.dark) .bg-sky-600,
html:not(.dark) .bg-sky-500,
html:not(.dark) .bg-emerald-600,
html:not(.dark) .bg-emerald-600\/90,
html:not(.dark) .bg-amber-600\/90,
html:not(.dark) .bg-indigo-600,
html:not(.dark) .file\:bg-sky-600::file-selector-button,
html:not(.dark) .bg-gradient-to-br {
  color: #ffffff !important;
}

/* Onglet actif et badge de reference : un gris pale ne se distinguerait pas
   assez du fond blanc des onglets inactifs. */
html:not(.dark) .bg-slate-700.text-white {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
}
html:not(.dark) .bg-slate-800.text-white {
  background-color: #dbe6f8 !important;
  color: #0f172a !important;
}

/* ------------------------------------------------------------------ */
/* Infobulles pedagogiques : declencheur discret + panneau flottant     */
/* positionne par JS (app.js) pour ne jamais etre coupe par un tableau. */
/* ------------------------------------------------------------------ */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.25rem;
  color: #64748b;
  cursor: help;
  border-radius: 9999px;
  transition: color 120ms ease-in-out;
}

.help:hover,
.help:focus-visible {
  color: #38bdf8;
}

.help-tip {
  position: absolute;
  z-index: 80;
  max-width: 20rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.75rem;
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.55);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: left;
  font-weight: 400;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease-in-out;
  pointer-events: none;
}

.help-tip.is-open {
  opacity: 1;
  visibility: visible;
}

.help-tip strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #ffffff;
  font-weight: 600;
}

.help-tip-formula {
  display: block;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid #1e293b;
  color: #93c5fd;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
}

html:not(.dark) .help-tip {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
}

html:not(.dark) .help-tip strong {
  color: #0f172a;
}

html:not(.dark) .help-tip-formula {
  color: #2563eb;
  border-top-color: #e2e8f0;
}