@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   DESIGN SYSTEM - UNIFIED (Linear / Vercel Aesthetic)
   ========================================================================== */

:root {
  /* --- TYPOGRAPHY --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- LIGHT MODE (Default) --- */
  --bg-app: #FFFFFF;           /* Fond de page blanc pur */
  --bg-surface: #FFFFFF;       /* Fond des cartes */
  --bg-surface-hover: #FAFAFA;
  --bg-subtle: #F5F5F7;        /* Fond des inputs / zones grisées */
  
  --border-base: #EAEAEA;      /* Bordure standard très claire */
  --border-focus: #999999;     /* Bordure focus */
  
  --text-main: #000000;
  --text-muted: #666666;
  --text-faint: #999999;
  
  --shadow-card: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-float: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.08);
  
  --accent-color: #000000;
  --accent-contrast: #FFFFFF;
  
  --radius-base: 8px;
  --radius-sm: 6px;
}

html[data-theme="dark"] {
  /* --- DARK MODE (Linear) --- */
  --bg-app: #121315;           /* Charbon foncé (pas noir) */
  --bg-surface: #191A1D;       /* Surface légèrement plus claire */
  --bg-surface-hover: #202125;
  --bg-subtle: #242529;        /* Inputs */
  
  --border-base: rgba(255, 255, 255, 0.08); /* Bordure subtile */
  --border-focus: rgba(255, 255, 255, 0.2);
  
  --text-main: #EDEDED;
  --text-muted: #8F9095;
  --text-faint: #55565A;
  
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 8px rgba(0,0,0,0.4);
  --shadow-float: 0 0 0 1px rgba(255,255,255,0.06), 0 12px 24px rgba(0,0,0,0.6);
  
  --accent-color: #FFFFFF;
  --accent-contrast: #000000;
}

/* ==========================================================================
   GLOBAL RESET & BASE
   ========================================================================== */

* {
  font-family: var(--font-sans) !important;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-app) !important;
  color: var(--text-main) !important;
  line-height: 1.5;
  background-image: none !important;
}

/* ==========================================================================
   COMPONENT STANDARDIZATION (Ecraser Tailwind)
   ========================================================================== */

/* --- 1. SURFACES & CARTES --- */
/* On capture tous les conteneurs (blanc ou gris foncé) et on les normalise */
.bg-white, .bg-slate-900, .bg-slate-800, .rounded-xl, .rounded-2xl, .card {
  background-color: var(--bg-surface) !important;
  border: none !important; /* On remplace la border par un shadow interne pour plus de finesse */
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-base) !important;
  color: var(--text-main) !important;
  backdrop-filter: none !important;
}

/* Le conteneur principal 'root' doit être transparent */
#root > div, #root > div > div {
  box-shadow: none !important;
  background: transparent !important;
}

/* --- 2. TEXTES & TYPOGRAPHIE --- */
h1, h2, h3, .text-xl, .text-2xl, .text-3xl {
  color: var(--text-main) !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}

p, span, div, .text-sm, .text-xs, .text-slate-500, .text-gray-500 {
  color: var(--text-muted) !important;
}

/* Les chiffres clés (KPIs) doivent "popper" */
.text-3xl, .text-4xl, .font-bold {
  color: var(--text-main) !important;
  font-feature-settings: "tnum";
}

/* --- 3. INPUTS, SELECTS & BOUTONS --- */
input, select, textarea {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-base) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.15s ease;
}

input:focus, select:focus {
  outline: none !important;
  border-color: var(--text-muted) !important;
  box-shadow: 0 0 0 3px rgba(128,128,128,0.1) !important;
}

/* Boutons d'action */
button {
  cursor: pointer;
  font-weight: 500 !important;
  transition: all 0.15s ease;
}

/* --- 4. TABLEAUX --- */
table {
  border-collapse: collapse !important;
  width: 100%;
}
thead th {
  text-align: left;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border-base) !important;
  color: var(--text-faint) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600 !important;
}
tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border-base) !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
}
tbody tr:hover td {
  background-color: var(--bg-surface-hover) !important;
}

/* --- 5. ELEMENTS GRAPHIQUES & BADGES --- */

/* Tuer les dégradés moches */
[class*="bg-gradient-"] {
  background-image: none !important;
  background-color: var(--bg-subtle) !important;
}

/* Badges / Chips unifiés */
.rounded-full.bg-emerald-500\/20, .bg-emerald-900\/30,
.rounded-full.bg-blue-500\/20, .bg-blue-900\/30,
.rounded-full.bg-amber-500\/20, .bg-amber-900\/30,
.rounded-full.bg-red-500\/20, .bg-red-900\/30 {
  background-color: var(--bg-subtle) !important;
  border: 1px solid var(--border-base) !important;
  font-weight: 500 !important;
  padding: 2px 10px !important;
  border-radius: 99px !important;
}

/* Couleurs de texte pour les badges */
[class*="text-emerald-"], [class*="text-green-"] { color: #16A34A !important; }
[class*="text-blue-"] { color: #2563EB !important; }
[class*="text-amber-"], [class*="text-yellow-"] { color: #D97706 !important; }
[class*="text-red-"] { color: #DC2626 !important; }

/* Dark mode adjust for contrast */
html[data-theme="dark"] [class*="text-emerald-"] { color: #4ADE80 !important; }
html[data-theme="dark"] [class*="text-blue-"] { color: #60A5FA !important; }
html[data-theme="dark"] [class*="text-amber-"] { color: #FBBF24 !important; }
html[data-theme="dark"] [class*="text-red-"] { color: #F87171 !important; }


/* --- 6. LE TOGGLE BUTTON (Style "Floating Pill") --- */
#themeToggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  height: 36px;
  padding: 0 16px 0 12px;
  
  background-color: var(--bg-surface);
  border: 1px solid var(--border-base); /* Bordure fine */
  border-radius: 99px;
  box-shadow: var(--shadow-float);
  
  color: var(--text-main);
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 500;
  
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}

#themeToggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

#themeToggle:active {
  transform: translateY(0);
}

#themeToggleIcon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--text-main); /* Le point change de couleur selon le thème */
}

/* --- FIXES DIVERS --- */
/* Cacher tout bouton de thème qui serait généré PAR l'application React (doublon) */
#root button[aria-label*="theme" i], 
#root button[title*="theme" i] {
  display: none !important;
}

/* Cacher les effets de flou décoratifs */
.blur-3xl, .blur-2xl, .absolute.-z-10 {
  display: none !important;
}

/* Heatmap cells override */
[class*="rounded"][class*="w-"][class*="h-"][class*="bg-gradient-"] {
    border-radius: 2px !important;
}
/* Recolor cells */
[class*="from-emerald-900"] { background-color: var(--bg-subtle) !important; }
[class*="from-emerald-700"] { background-color: rgba(16, 185, 129, 0.3) !important; }
[class*="from-emerald-500"] { background-color: rgba(16, 185, 129, 0.6) !important; }
[class*="from-emerald-400"] { background-color: #10B981 !important; }