/* Compléments au design Tailwind (thème violet/slate du template). */

.tab-btn { color: #64748b; }
.tab-btn.active { background: #7c3aed; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .6rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}

tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background-color: #faf5ff; } /* violet-50 */

/* Barre de défilement discrète */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.fade-in { animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Barre de progression globale (haut de page) ---- */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #7c3aed, #d946ef);
  z-index: 9999; opacity: 0;
  transition: width .2s ease, opacity .4s ease;
  box-shadow: 0 0 8px rgba(124, 58, 237, .55);
}
#progress-bar .progress-peg {
  position: absolute; right: 0; top: 0; height: 100%; width: 90px;
  box-shadow: 0 0 10px #7c3aed, 0 0 6px #d946ef; opacity: .6;
}

/* ---- Spinner inline (boutons, modale) ---- */
.spinner {
  display: inline-block; width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -.15em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Squelettes de chargement (tableaux, listes) ---- */
.skeleton { position: relative; overflow: hidden; background: #e2e8f0; border-radius: .375rem; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---- Barre indéterminée (traitement long : « Marquer comme complet ») ---- */
.indeterminate { position: relative; height: 6px; border-radius: 9999px; background: #ede9fe; overflow: hidden; }
.indeterminate::before {
  content: ""; position: absolute; top: 0; left: -40%; height: 100%; width: 40%; border-radius: 9999px;
  background: linear-gradient(90deg, #7c3aed, #d946ef); animation: indet 1.1s infinite ease-in-out;
}
@keyframes indet { 0% { left: -40%; } 100% { left: 100%; } }

/* ===================================================================== */
/*  Pop-ups stylés (alerte / confirmation / saisie)                       */
/* ===================================================================== */
.ui-overlay {
  position: fixed; inset: 0; z-index: 10000; padding: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s ease;
}
.ui-overlay.show { opacity: 1; }
.ui-modal {
  width: 100%; max-width: 460px; background: #fff; color: #0f172a;
  border: 1px solid #e2e8f0; border-radius: 1rem;
  box-shadow: 0 24px 60px -12px rgba(2, 6, 23, .5);
  padding: 1.25rem; transform: translateY(10px) scale(.98); transition: transform .18s ease;
  display: flex; flex-direction: column; max-height: calc(100vh - 2rem);
}
.ui-overlay.show .ui-modal { transform: none; }
.ui-modal__head { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.ui-modal__title { font-size: 1.05rem; font-weight: 600; margin: 0; }
/* Le corps défile si le contenu dépasse ; en-tête et actions restent visibles. */
.ui-modal__body { margin-top: .6rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ui-text { font-size: .9rem; line-height: 1.5; color: #475569; white-space: pre-wrap; }
.ui-modal__actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.ui-ico {
  flex: none; width: 2rem; height: 2rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700;
}
.ui-ico--error { background: #fee2e2; color: #e11d48; }
.ui-ico--success { background: #d1fae5; color: #059669; }
.ui-ico--info { background: #ede9fe; color: #7c3aed; }
.ui-ico--question { background: #ede9fe; color: #7c3aed; }
.ui-label { display: block; font-size: .75rem; color: #64748b; margin-bottom: .3rem; }
.ui-input {
  width: 100%; border: 1px solid #cbd5e1; border-radius: .6rem;
  padding: .55rem .75rem; font-size: .9rem; font-family: inherit; color: #0f172a;
}
.ui-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.ui-error { min-height: 1em; margin-top: .4rem; font-size: .8rem; color: #e11d48; }
.ui-btn {
  border: 1px solid transparent; border-radius: .6rem; padding: .5rem .95rem;
  font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.ui-btn--primary { background: #7c3aed; color: #fff; }
.ui-btn--primary:hover { background: #6d28d9; }
.ui-btn--danger { background: #e11d48; color: #fff; }
.ui-btn--danger:hover { background: #be123c; }
.ui-btn--ghost { background: #fff; color: #334155; border-color: #cbd5e1; }
.ui-btn--ghost:hover { background: #f1f5f9; }
.ui-btn:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

.dark .ui-modal { background: #1e293b; color: #e5e7eb; border-color: #334155; }
.dark .ui-text { color: #cbd5e1; }
.dark .ui-input { background: #0f172a; color: #e5e7eb; border-color: #475569; }
.dark .ui-btn--ghost { background: #1e293b; color: #e2e8f0; border-color: #475569; }
.dark .ui-btn--ghost:hover { background: #334155; }
.dark .ui-ico--error { background: #4c0d1c; color: #fb7185; }
.dark .ui-ico--success { background: #053e2b; color: #34d399; }
.dark .ui-ico--info, .dark .ui-ico--question { background: #3b0764; color: #c4b5fd; }

/* ===================================================================== */
/*  Barres de progression chiffrées (pourcentage visible qui défile)      */
/* ===================================================================== */
.ui-bar { padding: .35rem 0; }
.ui-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.ui-bar__label { font-size: .85rem; color: #475569; }
.ui-bar__pct { font-size: .85rem; font-weight: 700; color: #7c3aed; font-variant-numeric: tabular-nums; }
.ui-bar__track { height: 8px; border-radius: 9999px; background: #ede9fe; overflow: hidden; }
.ui-bar__fill {
  height: 100%; width: 0%; border-radius: 9999px;
  background: linear-gradient(90deg, #7c3aed, #d946ef); transition: width .18s ease;
}
.ui-bar--done .ui-bar__pct { color: #059669; }
.ui-bar--done .ui-bar__fill { background: linear-gradient(90deg, #059669, #34d399); }
.dark .ui-bar__label { color: #cbd5e1; }
.dark .ui-bar__track { background: #312e81; }

/* Pastille numérique de la barre de progression globale (haut de page) */
#progress-pct {
  position: fixed; top: 7px; right: 10px; z-index: 10000;
  background: #7c3aed; color: #fff; font-size: .68rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1; padding: .2rem .45rem;
  border-radius: 9999px; box-shadow: 0 2px 6px rgba(124, 58, 237, .5);
  opacity: 0; transition: opacity .3s ease;
}

/* ===================================================================== */
/*  Interactivité : cartes qui réagissent au survol                       */
/* ===================================================================== */
body { transition: background-color .25s ease, color .25s ease; }
.ao-card {
  transition: transform .15s ease, box-shadow .15s ease, background-color .25s ease, border-color .25s ease;
}
.ao-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(2, 6, 23, .35); }
.clickable { cursor: pointer; }
summary { transition: color .15s ease; }
details[open] > summary { color: #7c3aed; }
/* Cartes du guide : léger soulèvement au survol */
[data-guide] .rounded-2xl.shadow-sm { transition: transform .15s ease, box-shadow .15s ease, background-color .25s ease, border-color .25s ease; }
[data-guide] .rounded-2xl.shadow-sm:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(2, 6, 23, .35); }

/* ===================================================================== */
/*  MODE NUIT (.dark) — surcharges des utilitaires Tailwind utilisés      */
/* ===================================================================== */
.dark { color-scheme: dark; }
.dark body { background-color: #0b1120; color: #e5e7eb; }

/* Surfaces */
.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-white\/80 { background-color: rgba(15, 23, 42, .85) !important; }
.dark .bg-slate-50 { background-color: #0f172a !important; }
.dark .bg-slate-100 { background-color: #1f2937 !important; }
.dark .bg-primary\/10 { background-color: rgba(124, 58, 237, .22) !important; }
.dark .bg-primary\/5 { background-color: rgba(124, 58, 237, .14) !important; }

/* Texte */
.dark .text-slate-900 { color: #f1f5f9 !important; }
.dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #e2e8f0 !important; }
.dark .text-slate-600 { color: #cbd5e1 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-400 { color: #8595ab !important; }

/* Bordures */
.dark .border-slate-200 { border-color: #334155 !important; }
.dark .border-slate-100 { border-color: #243044 !important; }
.dark .border-slate-300 { border-color: #475569 !important; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #243044 !important; }
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }

/* Survols */
.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
.dark .hover\:bg-slate-50:hover { background-color: #1f2937 !important; }
.dark tbody tr:hover { background-color: #1e1b4b !important; }

/* Champs de formulaire */
.dark input, .dark select, .dark textarea { background-color: #0f172a; color: #e5e7eb; border-color: #475569; }
.dark input::placeholder, .dark textarea::placeholder { color: #64748b; }

/* Squelettes */
.dark .skeleton { background: #334155; }
.dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
.dark .indeterminate { background: #312e81; }

/* Cartes/teintes colorées */
.dark .bg-amber-50 { background-color: #3a2a06 !important; }
.dark .border-amber-300 { border-color: #a16207 !important; }
.dark .text-amber-700 { color: #fcd34d !important; }
.dark .text-amber-600 { color: #fbbf24 !important; }
.dark .bg-violet-50 { background-color: #2e1065 !important; }
.dark .bg-emerald-50 { background-color: #052e1b !important; }
.dark .bg-rose-50 { background-color: #3f0d17 !important; }
.dark .border-violet-200 { border-color: #5b21b6 !important; }
.dark .border-emerald-200 { border-color: #065f46 !important; }
.dark .border-rose-200 { border-color: #9f1239 !important; }
.dark .text-emerald-700 { color: #34d399 !important; }
.dark .text-rose-600, .dark .text-rose-500 { color: #fb7185 !important; }
.dark .text-violet-700 { color: #c4b5fd !important; }

/* Badges (teinte claire -> teinte sombre) */
.dark .bg-violet-100 { background-color: #3b0764 !important; }
.dark .bg-blue-100 { background-color: #0c2a52 !important; }
.dark .bg-emerald-100 { background-color: #053e2b !important; }
.dark .bg-rose-100 { background-color: #4c0d1c !important; }
.dark .bg-amber-100 { background-color: #3a2a06 !important; }
.dark .text-blue-700 { color: #93c5fd !important; }

/* Barre de défilement */
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }