/* =============================================================
   NAO DéployManager — Charte « Classique Moderne »
   -------------------------------------------------------------
   SaaS admin propre inspiré OpenProject / Admindek :
   cards blanches, fond gris-bleu clair, sidebar/header charbon,
   accent orange RATP conservé pour CTA et brand.
   -------------------------------------------------------------
   Cette feuille surcharge le :root inline des pages via des
   sélecteurs à spécificité (0,1,1) — html[data-theme="…"] —
   qui l'emportent quel que soit l'ordre de chargement.
   ============================================================= */

/* ---------- Tokens transverses (fontes + motion) ---------- */
:root {
  --font-display: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui:      Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono-tech: "JetBrains Mono", Consolas, "Cascadia Code", monospace;

  --dur-fast: 120ms;
  --dur-ui:   180ms;
  --dur-panel: 260ms;
  --dur-cinematic: 600ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-enter:    cubic-bezier(.16, 1, .3, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);
}

/* =============================================================
   THÈME CLAIR — palette moderne, cards blanches, contrast doux
   ============================================================= */
html[data-theme="light"] {
  color-scheme: light;

  /* Fonds */
  --bg:          #F5F6FA;
  --bg-app:      #F5F6FA;
  --surface:     #FFFFFF;
  --surface-2:   #F5F6FA;
  --card:        #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-subtle:   #F9FAFB;

  /* Bordures */
  --border:        #E5E7EB;
  --border-l:      #F3F4F6;
  --border-soft:   #F3F4F6;
  --border-subtle: #E5E7EB;
  --border-strong: #D1D5DB;

  /* Texte */
  --text:        #111827;
  --text2:       #4B5563;
  --text-2:      #4B5563;
  --text-muted:  #6B7280;
  --muted:       #6B7280;
  --ash:         #9CA3AF;
  --text-inv:    #FFFFFF;
  --text-inverse:#FFFFFF;

  /* Structure sombre (bandeaux/rail latéral) — charbon neutre */
  --navy:      #1F2937;
  --navy-mid:  #374151;
  --navy-m:    #374151;
  --navy-l:    #4B5563;
  --sidebar-bg:          #1F2937;
  --sidebar-hover:       #374151;
  --sidebar-text:        #D1D5DB;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active:      rgba(232, 117, 39, .16);

  /* Accent orange RATP — conservé pour CTA et brand */
  --amber:      #E87527;
  --amber-l:    #F39A3E;
  --amber-d:    #C65A24;
  --amber-dark: #C65A24;
  --accent:      #E87527;
  --accent-dark: #C65A24;
  --ratp:        #E87527;
  --accent-soft: #FEE7D5;
  --focus-ring:  #3B82F6;

  /* Statuts (palette Tailwind-like, lisible) */
  --success:    #10B981;
  --success-bg: #ECFDF5;
  --jade:       #10B981;
  --warning:    #F59E0B;
  --warning-bg: #FEF3C7;
  --error:      #EF4444;
  --danger:     #EF4444;
  --danger-bg:  #FEE2E2;
  --info:       #3B82F6;
  --info-bg:    #DBEAFE;

  /* Ombres — plates et discrètes */
  --shadow:    0 1px 2px rgb(15 23 42 / 6%);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 8%);

  /* Graphiques */
  --chart-1: #E87527;
  --chart-2: #10B981;
  --chart-3: #3B82F6;
  --chart-4: #F59E0B;
  --chart-5: #8B5CF6;
  --chart-grid: rgb(107 114 128 / 15%);
}

/* =============================================================
   THÈME SOMBRE — gris-bleu profond, contrastes propres
   ============================================================= */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Fonds */
  --bg:          #0F172A;
  --bg-app:      #0F172A;
  --surface:     #1E293B;
  --surface-2:   #273449;
  --card:        #1E293B;
  --bg-elevated: #1E293B;
  --bg-subtle:   #273449;

  /* Bordures */
  --border:        #334155;
  --border-l:      #273449;
  --border-soft:   #273449;
  --border-subtle: #334155;
  --border-strong: #475569;

  /* Texte */
  --text:        #F1F5F9;
  --text2:       #CBD5E1;
  --text-2:      #CBD5E1;
  --text-muted:  #94A3B8;
  --muted:       #94A3B8;
  --ash:         #94A3B8;
  --text-inv:    #0F172A;
  --text-inverse:#0F172A;

  /* Structure sombre */
  --navy:      #0B1220;
  --navy-mid:  #1E293B;
  --navy-m:    #1E293B;
  --navy-l:    #334155;
  --sidebar-bg:          #0B1220;
  --sidebar-hover:       #1E293B;
  --sidebar-text:        #CBD5E1;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active:      rgba(232, 117, 39, .20);

  /* Accent — orange plus lumineux sur fond sombre */
  --amber:      #F39A3E;
  --amber-l:    #FBB56A;
  --amber-d:    #E87527;
  --amber-dark: #E87527;
  --accent:      #F39A3E;
  --accent-dark: #E87527;
  --ratp:        #F39A3E;
  --accent-soft: #3B281E;
  --focus-ring:  #60A5FA;

  /* Statuts */
  --success:    #34D399;
  --success-bg: #0F2A21;
  --jade:       #34D399;
  --warning:    #FBBF24;
  --warning-bg: #2A2013;
  --error:      #F87171;
  --danger:     #F87171;
  --danger-bg:  #2A1515;
  --info:       #60A5FA;
  --info-bg:    #14243A;

  --shadow:    0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 34%);

  --chart-1: #F39A3E;
  --chart-2: #34D399;
  --chart-3: #60A5FA;
  --chart-4: #FBBF24;
  --chart-5: #A78BFA;
  --chart-grid: rgb(148 163 184 / 18%);
}

/* -------------------------------------------------------------
   Rattrapage sombre pour les surfaces codées en dur dans les
   <style> inline hérités (#fff, #f8fafc, gradients clairs…).
   ------------------------------------------------------------- */
html[data-theme="dark"] {
  input, select, textarea,
  .search-input, .filter, select.filter, .tb-filter,
  .gen-field input, .gen-field select {
    background: var(--surface) !important;
    color: var(--text);
    border-color: var(--border);
  }
  input::placeholder, textarea::placeholder { color: var(--text-muted); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

  thead th { background: var(--surface-2) !important; color: var(--text-muted); border-bottom-color: var(--border) !important; }
  tbody td { border-bottom-color: var(--border) !important; }
  tbody tr:hover td { background: rgba(255,255,255,.03) !important; }

  #topbar, #detail-panel, .modal, .dropdown, .drawer, .popover,
  .panel, .side-panel, .context-panel, .dp-body, .detail-panel {
    background: var(--surface) !important;
    color: var(--text);
    border-color: var(--border);
  }

  .loading-overlay, #loading-overlay,
  #gantt-wrap.loading::after, .overlay-light {
    background: rgba(15, 23, 42, .72) !important;
  }

  .gantt .grid-row:nth-child(even) { fill: rgba(255,255,255,.03) !important; }
  .gantt .grid-background, .gantt-container { background: transparent !important; }
  .gantt .tick { stroke: var(--border) !important; }
  .gantt .lower-text, .gantt .upper-text, .gantt .bar-label { fill: var(--text-muted) !important; }

  .card-header { background: var(--surface) !important; }
  .task-filters, .toolbar, .rtable th, .task-table th, thead th { background: var(--surface-2) !important; }
  .filter-chip, .filter-sel, .page-btn, .tb-filter, .search-input, select.filter, input[type="date"].filter {
    background: var(--surface) !important; color: var(--text); border-color: var(--border);
  }
  .progress-bar, .phase-bar, .progress, .track { background: var(--surface-2) !important; }
  .notif-item:hover, .activity-item:hover, .task-table tr:hover td { background: rgba(255,255,255,.03) !important; }
  .activity-icon, .kpi-icon { background: var(--surface-2) !important; }
  .urgent-row, .notif-item, .activity-item, .phase-row, .card-body [style*="#f1f5f9"] { border-bottom-color: var(--border) !important; }
  .station-sign { background: var(--surface-2); color: var(--text); }

  /* Titres sur fond charbon en clair — remis en clair pour rester lisibles */
  .page-title h1, .card-header h2, .card-header h3, .card-title,
  .kpi-val, .kpi-value, .sec-title, .section-title,
  [style*="color:var(--navy)"] { color: var(--text) !important; }
}

/* =============================================================
   AJUSTEMENTS TRANSVERSES (clair + sombre)
   ============================================================= */
/* Chiffres clés : Inter tabulaire, resserré */
.kpi-val, .kpi-value, .stat-val, .kpi-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.mono, [data-mono], td.num, .tabular { font-variant-numeric: tabular-nums; }

/* Focus visible — anneau bleu 2px + décalage (WCAG 2.2) */
:where(a, button, input, select, textarea, [tabindex], [role="button"], summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Scrollbars discrètes, thème-aware */
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 40%, transparent);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* =============================================================
   TOGGLE DE THÈME (injecté par theme.js)
   ============================================================= */
.nao-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-ui) var(--ease-standard),
              border-color var(--dur-ui), background var(--dur-ui);
}
.nao-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.nao-theme-toggle:active { transform: translateY(0) scale(.96); }
.nao-theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.nao-theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .nao-theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .nao-theme-toggle .icon-moon { display: block; }

/* =============================================================
   FOND GLOBAL — panneau charbon + trame grille (repris du hero
   de la page login) appliqué sur toutes les pages.
   Les cartes/surfaces conservent leurs couleurs locales (--card,
   --surface, etc.) et restent lisibles au-dessus.
   ============================================================= */
@media screen {
  html body {
    background: linear-gradient(160deg, #1F2937 0%, #111827 100%) fixed !important;
    min-height: 100vh;
  }
  html body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(120% 90% at 30% 20%, #000 40%, transparent 85%);
            mask-image: radial-gradient(120% 90% at 30% 20%, #000 40%, transparent 85%);
    opacity: .6;
  }
  html body > * { position: relative; z-index: 1; }
}

/* =============================================================
   MASCOTTE NAO — supprimée. Cache tout résidu de markup hérité.
   ============================================================= */
.nao-bot-wrap,
.nao-bot,
.nao-bot-img { display: none !important; }

/* =============================================================
   NEUTRALISATION — anciens décors bio-cyberpunk (photos plein
   cadre, tunnel SVG, halo, rail lumineux, trames graphiques).
   Conservé en HTML mais éteint visuellement pour retour au
   look SaaS classique moderne.
   ============================================================= */
body.nao-photo,
body.nao-photo--hero { background: var(--bg) !important; }
body.nao-photo::before,
body.nao-photo::after { content: none !important; }

body.nao-photo .card,
body.nao-photo .kpi-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.nao-photo .card-header {
  background: var(--card) !important;
  border-bottom-color: var(--border) !important;
}
body.nao-photo .card-header::after { content: none !important; }
body.nao-photo .card-header h2,
body.nao-photo .card-header h3,
body.nao-photo .page-title h1 { color: var(--text) !important; }
body.nao-photo .kpi-val { color: var(--text) !important; }
body.nao-photo .kpi-label,
body.nao-photo .kpi-sub { color: var(--text-muted) !important; }
body.nao-photo #header {
  background: var(--navy) !important;
  backdrop-filter: none !important;
  border-bottom-color: var(--border) !important;
}
body.nao-photo .task-filters,
body.nao-photo .task-table th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
body.nao-photo .task-table td,
body.nao-photo .urgent-row,
body.nao-photo .notif-item,
body.nao-photo .activity-item { border-bottom-color: var(--border) !important; color: var(--text) !important; }
body.nao-photo .filter-chip {
  background: var(--surface); color: var(--text-muted); border-color: var(--border);
}
body.nao-photo .filter-chip.active { background: var(--amber); color: #fff; border-color: var(--amber); }
body.nao-photo .filter-sel { background: var(--card); color: var(--text); border-color: var(--border); }
body.nao-photo .task-table tr:hover td,
body.nao-photo .notif-item:hover,
body.nao-photo .urgent-row:hover { background: var(--bg-subtle) !important; }

/* Scène cinématique login : neutralisée (le nouveau login n'en dépend plus,
   mais tout ancien markup .nao-scene* ne s'affiche pas comme tunnel). */
.nao-scene { background: var(--bg); color: var(--text); }
.nao-scene__layer, .nao-scene__vault, .nao-scene__moss,
.nao-scene__glow, .nao-scene__rail { display: none !important; }
.nao-scene__title { animation: none !important; }

/* Motif rail-grain retiré — pas de trame graphique sous les tableaux */
.rail-grain::before { content: none !important; }

/* =============================================================
   MASCOTTE NAO — conservée mais épurée (statique, sans halo)
   ============================================================= */
.nao-bot { display: inline-block; overflow: visible; }
.nao-bot .bot-metal  { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.4; }
.nao-bot .bot-metal2 { fill: var(--border-strong); }
.nao-bot .bot-body   { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.4; }
.nao-bot .bot-visor  { fill: var(--navy); opacity: .92; }
.nao-bot .bot-glass  { fill: var(--amber-l); opacity: .28; }
.nao-bot .bot-eye    { fill: var(--amber); }
.nao-bot .bot-stroke { stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.nao-bot .bot-accent { fill: var(--amber); }
.nao-bot .bot-mouth  { stroke: var(--amber); stroke-width: 2; fill: none; stroke-linecap: round; }
.nao-bot .bot-mouth-o{ fill: none; stroke: var(--amber); stroke-width: 2; }
.nao-bot .bot-scan   { fill: none; stroke: var(--info); stroke-width: 1.4; opacity: .5; }
.nao-bot--ondark .bot-metal,
.nao-bot--ondark .bot-body   { fill: #273449; stroke: #475569; }
.nao-bot--ondark .bot-metal2 { fill: #475569; }
.nao-bot--ondark .bot-visor  { fill: #0B1220; }

/* Wrapper photo : image simple, sans mask ni halo orange */
.nao-bot-wrap { display: inline-flex; line-height: 0; position: relative; }
.nao-bot-wrap::before { content: none; }
.nao-bot-wrap .nao-bot-img {
  display: inline-block; height: auto; width: var(--bot-size, 96px);
  object-fit: contain;
  border-radius: 12px;
  filter: none;
  -webkit-mask: none; mask: none;
}
.nao-bot-wrap .nao-bot { display: none; }
.nao-bot-wrap.img-failed .nao-bot-img { display: none; }
.nao-bot-wrap.img-failed .nao-bot { display: inline-block; }

.nao-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px; text-align: center; color: var(--text-muted); }
.nao-empty p { font-size: 13px; }

/* =============================================================
   MICRO-INTERACTIONS DISCRÈTES (aucun effet spectaculaire)
   ============================================================= */
.nao-reveal { opacity: 0; transform: translateY(6px); }
.nao-reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity var(--dur-panel) var(--ease-enter),
              transform var(--dur-panel) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.kpi-val.nao-count { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.btn, .filter-chip, .page-btn, .h-btn, .h-nav-link, .kpi-card {
  transition: background var(--dur-ui) var(--ease-standard),
              border-color var(--dur-ui),
              color var(--dur-ui),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-ui);
}
.btn:active, .filter-chip:active, .page-btn:active, .h-btn:active { transform: translateY(1px) scale(.99); }
.filter-chip:hover { border-color: var(--accent); }
.kpi-card:hover { box-shadow: var(--shadow-md); }

/* Signal d'alerte discret : échéance en retard clignote lentement */
.date-overdue { animation: nao-signal 2.6s ease-in-out infinite; }
@keyframes nao-signal { 0%,100% { opacity: 1; } 55% { opacity: .55; } }

/* =============================================================
   MOUVEMENT RÉDUIT — état final immédiat partout
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .nao-reveal { opacity: 1 !important; transform: none !important; }
}