/* ============================================================
   Thème Excelia CRM v2 — chargé APRÈS tailwind-crm.css.
   Design « Admin Central » (maquette Mehdi 2026-08-02) :
   primaire violet #5300b7, fond #f9f9ff, cartes blanches
   arrondies avec élévation au survol, sidebar blanche à
   indicateur actif, topbar en verre. Re-skin CSS pur : la
   disposition et le JS du SPA ne changent pas.
   Les couleurs fonctionnelles (vert succès, rouge erreur,
   WhatsApp) sont volontairement conservées.
   ============================================================ */

:root {
  --xc-primary: #5300b7;
  --xc-primary-hover: #4a00a4;
  --xc-on-surface: #151c27;
  --xc-muted: #4a4455;
}

/* ---- Base ---- */
body {
  background-color: #f9f9ff !important;
  color: var(--xc-on-surface) !important;
}

/* ---- Accent : tout ce qui était violet foncé passe au violet maquette ---- */
.bg-secondary { background-color: var(--xc-primary) !important; }
.hover\:bg-secondary:hover { background-color: var(--xc-primary-hover) !important; }
.text-secondary,
.hover\:text-secondary:hover,
.group-hover\:text-secondary { color: var(--xc-primary) !important; }
.bg-secondary\/10, .hover\:bg-secondary\/10:hover { background-color: rgba(83, 0, 183, 0.08) !important; }
.bg-secondary\/20, .hover\:bg-secondary\/20:hover { background-color: rgba(83, 0, 183, 0.16) !important; }
.bg-secondary\/5 { background-color: rgba(83, 0, 183, 0.05) !important; }
.border-secondary\/30 { border-color: rgba(83, 0, 183, 0.30) !important; }

/* Chips / badges « secondary-container » */
.bg-secondary-container { background-color: #ebddff !important; }
.text-on-secondary-container { color: #5300b7 !important; }

/* ---- Surfaces (dominante lavande très claire) ---- */
.bg-surface { background-color: #f9f9ff !important; }
.bg-surface-container-lowest { background-color: #ffffff !important; }
.bg-surface-container-low, .hover\:bg-surface-container-low:hover { background-color: #f0f3ff !important; }
.bg-surface-container, .hover\:bg-surface-container:hover { background-color: #e7eefe !important; }
.bg-surface-container-high, .hover\:bg-surface-container-high:hover { background-color: #e2e8f8 !important; }
.bg-surface-container-highest { background-color: #dce2f3 !important; }
.text-on-surface { color: var(--xc-on-surface) !important; }
.text-on-surface-variant { color: var(--xc-muted) !important; }
.border-outline-variant { border-color: rgba(204, 195, 215, 0.8) !important; }

/* ---- Cartes : coins 16px + élévation au survol (maquette card-shadow) ---- */
.soft-shadow {
  border-radius: 16px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.soft-shadow:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-4px) scale(1.01);
}

/* ---- Boutons pleins : coins 12px, gras, ombre violette au survol ---- */
button.bg-secondary, a.bg-secondary {
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
button.bg-secondary:hover, a.bg-secondary:hover {
  box-shadow: 0 10px 20px -5px rgba(83, 0, 183, 0.25);
}
button.bg-secondary:active, a.bg-secondary:active { transform: scale(0.98); }

/* ---- Sidebar : blanche, items arrondis, actif = teinte + indicateur ---- */
#sidebar {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border-right: 1px solid rgba(204, 195, 215, 0.6) !important;
  color: var(--xc-on-surface) !important;
}
#sidebar h1 { color: var(--xc-primary) !important; font-weight: 900; letter-spacing: -0.01em; }
/* Fenêtre réduite : le menu défile, le bloc utilisateur reste visible en bas */
#sidebar { overflow: hidden; }
#sidebar nav { overflow-y: auto; min-height: 0; scrollbar-width: thin; }
#sidebar .sidebar-item {
  color: var(--xc-muted);
  border-radius: 12px;
  position: relative;
  transition: all 0.2s;
}
#sidebar .sidebar-item:hover { background: #f0f3ff; color: var(--xc-primary); }
#sidebar .sidebar-item.bg-secondary {
  background: rgba(83, 0, 183, 0.06) !important;
  color: var(--xc-primary) !important;
  font-weight: 600;
  box-shadow: none !important;
}
#sidebar .sidebar-item.bg-secondary:hover { background: rgba(83, 0, 183, 0.10) !important; }
#sidebar .sidebar-item.bg-secondary::before {
  content: "";
  position: absolute;
  left: -16px; /* padding p-4 de l'aside → colle au bord */
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--xc-primary);
  border-radius: 0 4px 4px 0;
}
#sidebar .sidebar-item.bg-secondary .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}
#sidebar [class*="text-on-primary-container"] { color: var(--xc-muted); }
#sidebar [class*="bg-white/5"] { background: #f0f3ff !important; border-radius: 16px; }
#sidebar #side-name { color: var(--xc-on-surface) !important; }
#sidebar #logout { color: var(--xc-muted); transition: color 0.2s; }
#sidebar #logout:hover { color: #ba1a1a; }
#sidebar .border-t { border-color: rgba(204, 195, 215, 0.5) !important; }

/* ---- Pied de page collé en bas même sur écran court ---- */
main.min-h-screen {
  min-height: calc(100vh - 64px) !important;
  display: flex;
  flex-direction: column;
}
main.min-h-screen > #view { flex: 1 1 auto; }
main.min-h-screen > footer { margin-top: auto; }

/* ---- Titres d'écrans uniformes (maquette : 32px, très gras) ---- */
#view h2.text-2xl { font-size: 28px; }
@media (min-width: 768px) { #view h2.text-2xl { font-size: 32px; } }

/* ---- Topbar en verre ---- */
body > header.fixed {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(249, 249, 255, 0.8) !important;
  border-bottom-color: rgba(204, 195, 215, 0.6) !important;
}
#search {
  background: #ffffff !important;
  border: 1px solid rgba(204, 195, 215, 0.6) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.2s, border-color 0.2s;
}
#search:focus {
  border-color: var(--xc-primary) !important;
  box-shadow: 0 0 0 4px rgba(83, 0, 183, 0.10) !important;
}

/* ---- Formulaires ---- */
input:focus, select:focus, textarea:focus {
  --tw-ring-color: rgba(83, 0, 183, 0.35) !important;
  border-color: var(--xc-primary) !important;
}
input:where([type="checkbox"]):checked, input:where([type="radio"]):checked {
  background-color: var(--xc-primary) !important;
  border-color: var(--xc-primary) !important;
}

/* ---- Pilules de filtres (onglets arrondis) ---- */
.rounded-full.bg-secondary { box-shadow: 0 4px 10px -2px rgba(83, 0, 183, 0.25); }

/* ---- Titres de pages : plus noirs, tracking serré (maquette) ---- */
#view h2.text-2xl { font-weight: 900 !important; letter-spacing: -0.02em; }

/* ---- Barres de progression violettes ---- */
.bg-secondary.h-full { border-radius: 9999px; }

/* ---- Animations (maquette Admin Central v2) ---- */
@keyframes xc-slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes xc-grow { from { width: 0; } }
@keyframes xc-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
.xc-pulse { animation: xc-pulse 2s infinite ease-in-out; }

/* Entrée en cascade : chaque écran anime ses sections à l'affichage */
#view > * { animation: xc-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
#view > *:nth-child(1) { animation-delay: 0.03s; }
#view > *:nth-child(2) { animation-delay: 0.1s; }
#view > *:nth-child(3) { animation-delay: 0.17s; }
#view > *:nth-child(4) { animation-delay: 0.24s; }
#view > *:nth-child(5) { animation-delay: 0.31s; }
#view > *:nth-child(n+6) { animation-delay: 0.38s; }

/* Barres de progression : remplissage animé */
.bg-secondary.h-full, .bg-green-500.h-full {
  animation: xc-grow 1.2s 0.3s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

/* Boutons : enfoncement au clic */
button:active:not(:disabled), a.bg-secondary:active { transform: scale(0.96); }
button { transition: transform 0.15s ease, background-color 0.2s, box-shadow 0.2s, color 0.2s; }

/* Icônes du menu : glissement au survol */
#sidebar .sidebar-item .material-symbols-outlined { transition: transform 0.2s ease; }
#sidebar .sidebar-item:hover .material-symbols-outlined { transform: translateX(3px); }
#sidebar .sidebar-item.bg-secondary:hover .material-symbols-outlined { transform: none; }

/* Recherche : léger zoom au focus */
#search { transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; }
#search:focus { transform: scale(1.01); }

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #view > *, .bg-secondary.h-full, .bg-green-500.h-full { animation: none !important; }
  .soft-shadow, .soft-shadow:hover { transform: none !important; }
}

/* ============================================================
   MODE SOMBRE — html.dark : plus spécifique que les overrides
   clairs ci-dessus, donc prioritaire quand la classe est posée.
   ============================================================ */
html.dark body { background-color: #0f1117 !important; color: #e7e9f4 !important; }
html.dark .bg-surface { background-color: #0f1117 !important; }
html.dark .bg-surface-container-lowest { background-color: #171a24 !important; }
html.dark .bg-surface-container-low, html.dark .hover\:bg-surface-container-low:hover { background-color: #1c1f2b !important; }
html.dark .bg-surface-container, html.dark .hover\:bg-surface-container:hover { background-color: #232736 !important; }
html.dark .bg-surface-container-high, html.dark .hover\:bg-surface-container-high:hover { background-color: #2a2f40 !important; }
html.dark .bg-surface-container-highest { background-color: #323850 !important; }
html.dark .text-on-surface { color: #e7e9f4 !important; }
html.dark .text-on-surface-variant { color: #a5a0b8 !important; }
html.dark .border-outline-variant { border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .text-secondary,
html.dark .hover\:text-secondary:hover,
html.dark .group-hover\:text-secondary { color: #c4b5fd !important; }
html.dark .bg-secondary { background-color: #6d28d9 !important; }
html.dark .hover\:bg-secondary:hover { background-color: #7c3aed !important; }
html.dark .bg-secondary\/10, html.dark .hover\:bg-secondary\/10:hover { background-color: rgba(167, 139, 250, 0.14) !important; }
html.dark .bg-secondary\/5 { background-color: rgba(167, 139, 250, 0.08) !important; }
html.dark .bg-secondary-container { background-color: #3b2a63 !important; }
html.dark .text-on-secondary-container { color: #d6c7ff !important; }
html.dark .bg-primary-container { background-color: #171a24 !important; }
html.dark .soft-shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .soft-shadow:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important; }
html.dark #sidebar { background: #12141c !important; border-right-color: rgba(255, 255, 255, 0.08) !important; color: #e7e9f4 !important; }
html.dark #sidebar h1 { color: #c4b5fd !important; }
html.dark #sidebar .sidebar-item { color: #a5a0b8; }
html.dark #sidebar .sidebar-item:hover { background: #1c1f2b; color: #c4b5fd; }
html.dark #sidebar .sidebar-item.bg-secondary { background: rgba(167, 139, 250, 0.12) !important; color: #c4b5fd !important; }
html.dark #sidebar .sidebar-item.bg-secondary::before { background: #a78bfa; }
html.dark #sidebar [class*="bg-white/5"] { background: #1c1f2b !important; }
html.dark #sidebar #side-name { color: #e7e9f4 !important; }
html.dark body > header.fixed { background-color: rgba(15, 17, 23, 0.85) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
html.dark #search { background: #1c1f2b !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e7e9f4; }
html.dark #search:focus { border-color: #a78bfa !important; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.15) !important; }
html.dark input, html.dark select, html.dark textarea { color: #e7e9f4; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #6f6a85; }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !important; }
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
html.dark .bg-amber-100 { background-color: rgba(217, 119, 6, 0.18) !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .bg-error\/5, html.dark .bg-error\/10 { background-color: rgba(255, 107, 107, 0.12) !important; }
html.dark .text-error { color: #ff8a8a !important; }
html.dark #bottomnav { background: #12141c !important; border-top-color: rgba(255, 255, 255, 0.08) !important; }
html.dark .glass-header { background-color: rgba(15, 17, 23, 0.85) !important; }

/* ---- Utilitaires absents du tailwind-crm.css précompilé ---- */
.font-black { font-weight: 900; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight { line-height: 1.25; }
.inline-flex { display: inline-flex; }
.p-2\.5 { padding: 0.625rem; }
.p-7 { padding: 1.75rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.pt-5 { padding-top: 1.25rem; }
.gap-7 { gap: 1.75rem; }
.gap-2\.5 { gap: 0.625rem; }
.text-\[13px\] { font-size: 13px; }
.text-\[22px\] { font-size: 22px; }
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bg-green-600 { background-color: #16a34a; }
.hover\:bg-green-600:hover { background-color: #15803d; }
.text-green-600 { color: #16a34a; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-amber-100 { background-color: #fef3c7; }
.text-amber-700 { color: #b45309; }
.rounded-\[24px\] { border-radius: 24px; }
.overflow-y-auto { overflow-y: auto; }
.max-h-\[70vh\] { max-height: 70vh; }

/* Modals : jamais plus hauts que l'écran, contenu défilant, en-tête/pied fixes */
#tn-modal, #tpl-modal, #mail-modal, #imp-modal { overflow-y: auto; }
#tn-modal > div, #tpl-modal > div, #mail-modal > div, #imp-modal > div {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  margin: auto;
}
#tn-modal form, #tpl-modal form { overflow-y: auto; flex: 1 1 auto; min-height: 0; }