/* ==========================================================
   THÈME NOIR + BLANC + TEAL — Phase 4.12
   Variables principales utilisées partout
   ========================================================== */
:root {
  --bg-page: #000000;
  --bg-card: rgba(255,255,255,0.97);
  --bg-card-light: rgba(255,255,255,1);
  --bg-elevated: #0f0f0f;
  --text-primary: #ffffff;
  --text-on-card: #0a0a0a;
  --text-on-card-muted: #525252;
  --text-muted: rgba(255,255,255,0.55);
  --text-dim: rgba(255,255,255,0.35);
  --border-soft: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);

  /* Accents teal */
  --teal-light: #5eead4;
  --teal-medium: #14b8a6;
  --teal-deep: #0d9488;
  --teal-dark: #0f766e;
  --teal-bg-tint: rgba(94,234,212,0.06);
  --teal-bg-tint-strong: rgba(94,234,212,0.12);
  --teal-border: rgba(94,234,212,0.25);
  --teal-glow: rgba(94,234,212,0.35);

  /* Status */
  --status-success: #00ff88;
  --status-error: #f87171;
  --status-warn: #fbbf24;
}

/* === BASE === */
body {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* === HALOS — passer du rose/jaune au teal === */
.halo-1 { background: radial-gradient(circle, rgba(94,234,212,0.12), transparent 70%) !important; }
.halo-2 { background: radial-gradient(circle, rgba(13,148,136,0.10), transparent 70%) !important; }

/* === DASH STAT PILLS (header) === */
.dash-stats .stat-pill,
.dash-stats > a.stat-pill {
  background: var(--teal-bg-tint) !important;
  border: 1px solid var(--teal-border) !important;
  color: var(--teal-light) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease;
}
.dash-stats .stat-pill:hover,
.dash-stats > a.stat-pill:hover {
  background: var(--teal-bg-tint-strong) !important;
  border-color: var(--teal-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(94,234,212,0.15);
}
.dash-stats .stat-value { color: var(--teal-light) !important; }
.dash-stats .stat-label { color: var(--teal-light) !important; opacity: 0.85; }

/* === HEADER : nom utilisateur en teal === */
.hello-name {
  color: var(--teal-light) !important;
  background: none !important;
  -webkit-text-fill-color: var(--teal-light) !important;
}
.hello-eyebrow { color: var(--teal-light) !important; }

/* === GLASS CARDS → Cards BLANCHES (le coeur du nouveau thème) === */
.glass-card {
  background: var(--bg-card) !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 18px !important;
  color: var(--text-on-card) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.glass-card h2,
.glass-card h3,
.glass-card .card-head h2 { color: var(--text-on-card) !important; }
.glass-card p,
.glass-card .card-sub,
.glass-card label { color: var(--text-on-card-muted) !important; }
.glass-card .step-badge {
  background: var(--teal-deep) !important;
  color: #fff !important;
  border: none !important;
}

/* === Inputs / Selects sur card blanche === */
.glass-card input[type="text"],
.glass-card input[type="email"],
.glass-card input[type="date"],
.glass-card input[type="password"],
.glass-card input[type="number"],
.glass-card select,
.glass-card textarea {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: var(--text-on-card) !important;
  border-radius: 10px !important;
}
.glass-card input:focus,
.glass-card select:focus,
.glass-card textarea:focus {
  border-color: var(--teal-deep) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--teal-bg-tint-strong) !important;
}

/* === BOUTONS GÉNÉRER (CTA principal) === */
.btn-generate, .btn-primary, button[type="submit"]:not(.no-theme) {
  background: linear-gradient(135deg, var(--teal-light), var(--teal-deep)) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.btn-generate:hover, .btn-primary:hover, button[type="submit"]:not(.no-theme):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--teal-glow) !important;
}

/* Boutons secondaires petits */
.btn-primary-sm {
  background: linear-gradient(135deg, var(--teal-light), var(--teal-deep)) !important;
  color: #000 !important;
  border: none !important;
}
.btn-primary-sm:hover {
  box-shadow: 0 6px 18px var(--teal-glow) !important;
}

/* === MODALS (création user/projet) === */
.modal-content {
  background: #fafafa !important;
  color: var(--text-on-card) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
.modal-head h3 { color: var(--text-on-card) !important; }
.modal-head { border-bottom-color: rgba(0,0,0,0.08) !important; }
.modal-content label { color: var(--text-on-card-muted) !important; }
.modal-content input,
.modal-content select,
.modal-content textarea {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: var(--text-on-card) !important;
}
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--teal-deep) !important;
  box-shadow: 0 0 0 3px var(--teal-bg-tint-strong) !important;
}
.btn-ghost {
  border: 1px solid rgba(0,0,0,0.15) !important;
  color: var(--text-on-card-muted) !important;
  background: transparent !important;
}
.btn-ghost:hover { background: rgba(0,0,0,0.04) !important; color: var(--text-on-card) !important; }
.modal-actions { border-top-color: rgba(0,0,0,0.08) !important; }
.modal-close {
  color: var(--text-on-card-muted) !important;
}
.modal-close:hover { background: rgba(0,0,0,0.06) !important; color: var(--text-on-card) !important; }
.form-section-title {
  color: var(--text-on-card-muted) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
.form-info {
  background: var(--teal-bg-tint) !important;
  border: 1px solid var(--teal-border) !important;
  color: var(--teal-deep) !important;
}

/* Type-cards (Parti/Ministère/Entreprise) */
.type-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; }
.type-card:hover { background: rgba(0,0,0,0.06) !important; }
.type-card:has(input:checked) {
  border-color: var(--teal-deep) !important;
  background: var(--teal-bg-tint) !important;
  box-shadow: 0 0 0 1px var(--teal-deep) !important;
}
.type-name { color: var(--text-on-card) !important; }
.type-desc { color: var(--text-on-card-muted) !important; }

/* === PROJET CARDS (dashboard) === */
.project-card {
  background: var(--bg-card) !important;
  color: var(--text-on-card) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.project-card .proj-meta h3 { color: var(--text-on-card) !important; }
.project-card .proj-meta p,
.project-card .proj-tag,
.project-card .proj-sg { color: var(--text-on-card-muted) !important; }

/* === ADMIN TABLES === */
.users-table thead tr {
  color: var(--text-on-card-muted) !important;
  border-bottom-color: rgba(0,0,0,0.1) !important;
}
.users-table tbody tr {
  border-bottom-color: rgba(0,0,0,0.04) !important;
}
.users-table tbody tr:hover { background: rgba(0,0,0,0.02) !important; }
.user-name { color: var(--text-on-card) !important; }
.user-email, .mono-cell { color: var(--text-on-card-muted) !important; }
.user-notes { color: var(--text-on-card-muted) !important; opacity: 0.75; }
.action-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: var(--text-on-card-muted) !important;
}
.action-btn:hover { background: rgba(0,0,0,0.08) !important; color: var(--text-on-card) !important; border-color: rgba(0,0,0,0.2) !important; }

/* === ADMIN PROJECTS CARDS === */
.proj-card-admin {
  background: var(--bg-card) !important;
  color: var(--text-on-card) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-left: 3px solid var(--accent, var(--teal-deep)) !important;
}
.proj-card-admin .proj-admin-meta h3 { color: var(--text-on-card) !important; }
.proj-card-admin .proj-admin-meta .proj-sg { color: var(--text-on-card-muted) !important; }
.tag-pill {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: var(--text-on-card-muted) !important;
}
.tag-label { color: var(--text-on-card-muted) !important; opacity: 0.7; }
.proj-admin-extra code { background: rgba(0,0,0,0.04) !important; color: var(--text-on-card-muted) !important; }
.proj-admin-actions { border-top-color: rgba(0,0,0,0.06) !important; }
.proj-admin-slug, .proj-admin-slug code {
  color: var(--text-on-card-muted) !important;
}
.proj-admin-slug code { background: rgba(0,0,0,0.04) !important; }

/* === BADGES rôles dans table === */
.role-badge.role-admin  { background: var(--teal-bg-tint) !important; color: var(--teal-deep) !important; border-color: var(--teal-border) !important; }
.role-badge.role-editor { background: rgba(0,0,0,0.05) !important; color: var(--text-on-card) !important; border-color: rgba(0,0,0,0.12) !important; }
.role-badge.role-viewer { background: rgba(0,0,0,0.04) !important; color: var(--text-on-card-muted) !important; border-color: rgba(0,0,0,0.1) !important; }

/* === FLASH messages === */
.flash-success {
  background: var(--teal-bg-tint) !important;
  border-color: var(--teal-border) !important;
  color: var(--text-on-card) !important;
}
.flash-content strong { color: var(--text-on-card) !important; }
.flash-content p { color: var(--text-on-card-muted) !important; }
.password-display {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}
.password-display code { color: var(--teal-deep) !important; }
.copy-btn {
  background: var(--teal-bg-tint-strong) !important;
  border: 1px solid var(--teal-border) !important;
  color: var(--teal-deep) !important;
}
.copy-btn:hover { background: var(--teal-deep) !important; color: #fff !important; }

.flash-info {
  background: var(--teal-bg-tint) !important;
  border-color: var(--teal-border) !important;
  color: var(--teal-light) !important;
}

/* === LOGIN PAGE === */
.login-shell {
  background: var(--bg-page) !important;
}
.login-card,
.login-form-wrapper {
  background: var(--bg-card) !important;
  color: var(--text-on-card) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.login-card h1, .login-card h2 { color: var(--text-on-card) !important; }
.login-card label { color: var(--text-on-card-muted) !important; }
.login-card input {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: var(--text-on-card) !important;
}
.login-card input:focus { border-color: var(--teal-deep) !important; box-shadow: 0 0 0 3px var(--teal-bg-tint-strong) !important; }
.login-card .brand-mark, .login-card .login-brand {
  background: linear-gradient(135deg, var(--teal-light), var(--teal-deep)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* === Status badges === */
.status-active { color: var(--status-success) !important; }
.status-inactive { color: var(--status-error) !important; }

/* === Smooth scroll, transitions globales === */
* { scroll-behavior: smooth; }
button, a, input, select, textarea { transition: all 0.18s ease; }

/* ============================================================
   FIX visibilité texte sur cards blanches (Bloc 03 dashboard)
   ============================================================ */

/* Tous les textes à l'intérieur d'une glass-card doivent être SOMBRES */
.glass-card,
.glass-card * {
  --text-on-bright: #0a0a0a;
}

/* Labels de section dans le bloc Blocs (TRONC COMMUN, MINISTÈRES PI, VUE GOUVERNEMENTALE) */
.glass-card .blocs-group-label,
.glass-card .blocs-group h4,
.glass-card .group-label,
.glass-card .col-title,
.glass-card .col-eyebrow {
  color: #14b8a6 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* Items "Bloc 1, Bloc 2..." labels à droite de chaque ligne */
.glass-card .bloc-num,
.glass-card .bloc-id,
.glass-card .bloc-tag,
.glass-card .bloc-meta,
.glass-card .bloc-side {
  color: #525252 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}

/* Noms des blocs (Décomposition générale, Influenceurs, etc.) */
.glass-card .bloc-name,
.glass-card .bloc-label,
.glass-card .bloc-title,
.glass-card label.bloc-row,
.glass-card .bloc-row label {
  color: #0a0a0a !important;
  font-weight: 500 !important;
}

/* Le SG/Ministre dans les sub-labels (Baraka, Mezzour…) */
.glass-card .bloc-sg,
.glass-card .bloc-person {
  color: #14b8a6 !important;
  font-weight: 600 !important;
}

/* Sub-text général */
.glass-card .small,
.glass-card small,
.glass-card .sub,
.glass-card .hint,
.glass-card span[style*="color: rgba(255"],
.glass-card span[style*="color:rgba(255"] {
  color: #525252 !important;
}

/* Bouton "Tout cocher / Tout décocher" */
.glass-card .toggle-all,
.glass-card .check-toggle,
.glass-card a.text-toggle {
  color: #0d9488 !important;
  font-weight: 500 !important;
}
.glass-card .toggle-all:hover { color: #5eead4 !important; }

/* === Card "Mensuel" auto-detect : la rendre visible === */
.glass-card .auto-period,
.glass-card .period-detected,
.glass-card .detect-card,
.glass-card .period-card {
  background: rgba(13,148,136,0.08) !important;
  border: 1px solid rgba(13,148,136,0.25) !important;
  color: #0a0a0a !important;
}
.glass-card .auto-period strong,
.glass-card .period-detected .period-label,
.glass-card .period-card-title {
  color: #0d9488 !important;
}
.glass-card .auto-period span,
.glass-card .period-detected .period-sub,
.glass-card .period-card-sub {
  color: #525252 !important;
}

/* Date inputs : icones calendrier visibles */
.glass-card input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6 !important;
  filter: invert(0) !important;
  cursor: pointer;
}
.glass-card input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
}

/* === Cards projets (PI / MTEDD / etc.) sur le bloc 01 === */
.glass-card .project-card { color: #0a0a0a !important; }
.glass-card .project-card .proj-name { color: #0a0a0a !important; }
.glass-card .project-card .proj-tag { color: #14b8a6 !important; opacity: 1 !important; }
.glass-card .project-card .proj-sg { color: #525252 !important; }

/* Badges dans avatar SG : garder leurs couleurs propres */
.glass-card .avatar-initials { color: #fff !important; }

/* === Force reload pour TOUS les enfants directs avec span/p en blanc === */
.glass-card span:not([style*="color"]):not(.brand-mark):not(.tag-pill),
.glass-card p:not([style*="color"]):not(.fans-count):not(.kpi-num) {
  color: inherit;
}

/* === HUB dans login — gradient teal === */
.login-shell .login-name,
.login-shell .login-brand-text,
.login-shell h1 .hub,
.login-shell h1 span,
.login-shell .brand-text-hub,
.login-shell .brand-mark,
.login-shell h1 strong {
  background: linear-gradient(135deg, #5eead4, #0d9488) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Header login : InsightHub gradient */
body.is-login h1, body.is-login .brand-mark,
.login-shell .h1, .login-shell h1 {
  position: relative;
}

/* Plus large : tout titre contenant "Hub" sur fond noir doit être teal */
.hub-text, .insight-hub-text {
  background: linear-gradient(135deg, #5eead4, #0d9488) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


/* ============================================================
   "Hub" en gradient teal sur page login
   ============================================================ */
.hub-grad {
  background: linear-gradient(135deg, #5eead4, #14b8a6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 700 !important;
}

/* ============================================================
   FIX : remplacer toutes les couleurs jaunes (--yellow) par teal
   sur les éléments brand/nav/login
   ============================================================ */

/* Override la variable --yellow elle-même pour propager */
:root {
  --yellow: #5eead4 !important;
  --yellow-light: #99f6e4 !important;
}

/* Sécurité : forcer la nav brand "Hub" en teal */
.brand-text strong { color: #fff !important; }
.brand-text .hub-grad,
.login-sub .hub-grad,
.hub-grad {
  background: linear-gradient(135deg, #5eead4, #14b8a6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 700 !important;
  /* Annule tout text-decoration jaune hérité */
  text-decoration: none !important;
  border: none !important;
}

/* Force tous les éléments qui utilisaient var(--yellow) en teal */
.nav-link:hover { color: #5eead4 !important; }
.login-sub strong { color: #5eead4 !important; }
.login-footer a {
  color: #5eead4 !important;
  border-bottom: 1px dotted #5eead4 !important;
}

/* === Footer "InsightHub" === */
.footer span:first-child {
  color: rgba(255,255,255,0.5) !important;
}

/* === Brand-logo (logo OV jaune dans la navbar) === */
/* Si le logo OV a un fond/bordure jaune, on neutralise */
.brand-logo {
  filter: none !important;
}

/* === Period-weekly (badge "hebdo") === */
.period-weekly { color: #5eead4 !important; }