/* ============================================================
   COMCYDEF — Feuille de style souveraine
   Plateforme de Commandement Cyber - Sénégal
   ============================================================ */

* { box-sizing: border-box; }

body {
  font-family: Inter, "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #030712;
  color: #e5e7eb;
}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ====== SECURITY ANIMATIONS ====== */
@keyframes scan-line {
  0% { transform: translateY(-100%); opacity: 0.5; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes pulse-critical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

@keyframes pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@keyframes blink-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-bottom {
  from { transform: translateX(100%) translateY(8px); opacity: 0; }
  to { transform: translateX(0) translateY(0); opacity: 1; }
}

@keyframes slide-in-top {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes data-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ====== CLASSIFICATION BADGES ====== */
.classify-public { background: #1f2937; color: #9ca3af; border: 1px solid #374151; }
.classify-dr { background: #172554; color: #93c5fd; border: 1px solid #1e3a8a; }
.classify-cd { background: #431407; color: #fbbf24; border: 1px solid #92400e; }
.classify-sd { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; }
.classify-tsd { background: #2e1065; color: #c084fc; border: 1px solid #4c1d95; }

/* ====== THREAT LEVEL COLORS ====== */
.threat-0 { background: #052e16; border-color: #166534; color: #4ade80; }
.threat-1 { background: #172554; border-color: #1e40af; color: #60a5fa; }
.threat-2 { background: #431407; border-color: #9a3412; color: #fb923c; }
.threat-3 { background: #450a0a; border-color: #7f1d1d; color: #f87171; }
.threat-4 { background: #2e1065; border-color: #4c1d95; color: #a78bfa; }

/* ====== STATUS INDICATORS ====== */
.status-critical { color: #ef4444; }
.status-elevated { color: #f97316; }
.status-vigilance { color: #eab308; }
.status-normal { color: #22c55e; }
.status-confirmed { color: #ef4444; }
.status-stabilized { color: #22c55e; }
.status-in_analysis { color: #f59e0b; }
.status-active { color: #22c55e; }
.status-pending { color: #9ca3af; }
.status-done { color: #22c55e; }
.status-in_progress { color: #3b82f6; }

.dot-critical { background: #ef4444; }
.dot-elevated { background: #f97316; }
.dot-vigilance { background: #eab308; }
.dot-normal { background: #22c55e; }

/* ====== CARDS ====== */
.card {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 1rem;
}
.card:hover { border-color: #374151; }

.card-critical {
  background: #1c0909;
  border: 1px solid #7f1d1d;
  border-radius: 10px;
  padding: 1rem;
  animation: pulse-critical 2s infinite;
}

.card-elevated {
  background: #1c1005;
  border: 1px solid #9a3412;
  border-radius: 10px;
  padding: 1rem;
  animation: pulse-warning 3s infinite;
}

/* ====== SENEGAL MAP ====== */
.map-container {
  position: relative;
  background: #0a1628;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  overflow: hidden;
}

.senegal-outline {
  fill: #1e3a5f;
  stroke: #2563eb;
  stroke-width: 1.5;
}

.region-marker {
  cursor: pointer;
  transition: all 0.2s;
}

.region-marker:hover { transform: scale(1.3); }

.region-critical { fill: #ef4444; filter: drop-shadow(0 0 8px #ef4444); }
.region-elevated { fill: #f97316; filter: drop-shadow(0 0 6px #f97316); }
.region-vigilance { fill: #eab308; filter: drop-shadow(0 0 4px #eab308); }
.region-normal { fill: #22c55e; }

/* ====== INCIDENT CARDS ====== */
.incident-card {
  background: #111827;
  border-left: 3px solid #374151;
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 0.5rem;
}
.incident-card:hover { background: #1f2937; transform: translateX(2px); }
.incident-card.critical { border-left-color: #ef4444; }
.incident-card.elevated { border-left-color: #f97316; }
.incident-card.vigilance { border-left-color: #eab308; }
.incident-card.normal { border-left-color: #22c55e; }

/* ====== TIMELINE ====== */
.timeline-step {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 1.5rem;
}

.timeline-step::before {
  content: '';
  position: absolute;
  left: 0.65rem;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: #1f2937;
}

.timeline-step:last-child::before { display: none; }

.timeline-dot {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  z-index: 1;
}

.timeline-step.done .timeline-dot { background: #052e16; border-color: #22c55e; }
.timeline-step.in_progress .timeline-dot { background: #172554; border-color: #3b82f6; animation: pulse-warning 2s infinite; }
.timeline-step.pending .timeline-dot { background: #111827; border-color: #4b5563; }

/* ====== KPI GAUGES ====== */
.kpi-gauge-ring {
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

/* ====== GRAPH NETWORK ====== */
.graph-container {
  background: #060d1a;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.graph-node {
  cursor: pointer;
  transition: all 0.2s;
}
.graph-node:hover { filter: brightness(1.3); }

/* ====== INFLUENCE CHARTS ====== */
.signal-bar {
  height: 6px;
  border-radius: 3px;
  transition: width 0.8s ease;
}

/* ====== NAV ITEMS ====== */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: #9ca3af;
  transition: all 0.15s;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

/* Navigation : typographie unique, indépendante du contenu de l'écran actif. */
#sidebar .nav-item,
#sidebar .nav-item-label {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-style: normal;
}

/* Les pictogrammes restent dans leur police dédiée : ne jamais les hériter
   de la typographie des libellés de navigation. */
#sidebar .nav-item .fa,
#sidebar .nav-item .fas,
#sidebar .nav-item .far,
#sidebar .nav-item .fab,
#sidebar .nav-item .fa-solid,
#sidebar .nav-item .fa-regular,
#sidebar .nav-item .fa-brands {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal !important;
  font-weight: 900 !important;
}
#sidebar .nav-item .fa-brands,
#sidebar .nav-item .fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}
.nav-item:hover { background: #1f2937; color: #e5e7eb; }
.nav-item.active { background: #1e3a5f; color: #60a5fa; border-left: 2px solid #3b82f6; }
.nav-item.restricted { opacity: 0.4; cursor: not-allowed; }
.nav-item .nav-level {
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  margin-left: auto;
}
.nav-item .nav-level.strategic { background: #2e1065; color: #a78bfa; }
.nav-item .nav-level.operational { background: #172554; color: #60a5fa; }
.nav-item .nav-level.analytical { background: #064e3b; color: #34d399; }

/* ====== BUTTONS ====== */
.btn-primary {
  background: #1d4ed8;
  color: white;
  border: 1px solid #2563eb;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-primary:hover { background: #1e40af; }

.btn-danger {
  background: #7f1d1d;
  color: #fca5a5;
  border: 1px solid #ef4444;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover { background: #991b1b; }

.btn-warning {
  background: #451a03;
  color: #fdba74;
  border: 1px solid #ea580c;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-success {
  background: #052e16;
  color: #86efac;
  border: 1px solid #16a34a;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-ghost {
  background: transparent;
  color: #9ca3af;
  border: 1px solid #374151;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost:hover { background: #1f2937; color: #e5e7eb; }

/* ====== TABLES ====== */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.data-table th {
  background: #1f2937;
  color: #9ca3af;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #374151;
}
.data-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #111827;
  vertical-align: middle;
}
.data-table tr:hover td { background: #1a2332; }

/* ====== MODAL ====== */
.modal-header {
  background: #111827;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #1f2937;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-body { padding: 1.5rem; }

/* ====== TOAST NOTIFICATIONS ====== */
.toast {
  background: #1f2937;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  animation: slide-in-bottom 0.3s ease;
  border-left: 3px solid;
  max-width: 320px;
  color: #f9fafb;
}
.toast.success { border-left-color: #22c55e; background: #052e16; }
.toast.error { border-left-color: #ef4444; background: #450a0a; }
.toast.warning { border-left-color: #f59e0b; background: #451a03; }
.toast.info { border-left-color: #3b82f6; background: #172554; }
.toast.critical {
  border-left-color: #ef4444;
  background: #450a0a;
  border: 1px solid #ef4444;
  animation: blink-alert 1s 3;
}

/* ====== HABILITATION LEVELS ====== */
.hab-0 { color: #6b7280; }
.hab-1 { color: #3b82f6; }
.hab-2 { color: #f59e0b; }
.hab-3 { color: #ef4444; }
.hab-4 { color: #7c3aed; }

/* ====== WAR ROOM ====== */
.war-room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 1024px) {
  .war-room-grid { grid-template-columns: 1fr; }
}

/* ====== SCREEN HEADER ====== */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #1f2937;
}

.screen-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.screen-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* ====== OPTION CARDS (CNS) ====== */
.option-card {
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.option-card:hover { border-color: #60a5fa; background: #172554; }
.option-card.selected { border-color: #3b82f6; background: #172554; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); }
.option-card.recommended { border-color: #16a34a; background: #052e16; }

/* ====== RISK MATRIX ====== */
.risk-bar {
  height: 8px;
  border-radius: 4px;
  transition: width 0.8s ease;
}

/* ====== LOG TERMINAL ====== */
.log-terminal {
  background: #000;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.7rem;
  line-height: 1.6;
  max-height: 250px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
}

.log-entry { padding: 0.1rem 0; }
.log-time { color: #6b7280; }
.log-actor { color: #60a5fa; }
.log-action { color: #34d399; }
.log-detail { color: #d1d5db; }

/* ====== SENEGAL SVG MAP ====== */
.sn-region { cursor: pointer; transition: all 0.2s; }
.sn-region:hover { opacity: 0.8; }

/* ====== EXERCISE BANNER ====== */
.exercise-banner {
  background: #2e1065;
  border: 2px solid #7c3aed;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  text-align: center;
  animation: blink-alert 2s infinite;
}

/* ====== AUDIT RECORD ====== */
.audit-record {
  border-left: 2px solid #374151;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
}
.audit-record.SENSITIVE { border-left-color: #ef4444; }
.audit-record.IMPORTANT { border-left-color: #f59e0b; }
.audit-record.NORMAL { border-left-color: #374151; }

/* ====== SECTOR GRID ====== */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}

.sector-card {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.sector-card:hover { border-color: #374151; transform: scale(1.02); }
.sector-card.critical { border-color: #7f1d1d; background: #1c0909; }
.sector-card.elevated { border-color: #9a3412; background: #1c1005; }

/* ====== LOADING / SPINNER ====== */
.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid #374151;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ====== IAM FORM STYLES ====== */
.iam-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.iam-input {
  display: block;
  width: 100%;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #f3f4f6;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  font-family: inherit;
}
.iam-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.iam-input:read-only {
  background: #0f172a;
  color: #6b7280;
  cursor: not-allowed;
}
.iam-input option {
  background: #1f2937;
  color: #f3f4f6;
}

/* Modal large (édition utilisateur) */
#modal-box.modal-large {
  max-width: 680px;
}

/* Tabs édition */
.iam-tab {
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.iam-tab:hover {
  color: #d1d5db;
}

/* Toggle switch fix */
.peer:checked ~ div.peer-checked\:bg-blue-600 {
  background-color: #2563eb;
}

/* Bouton styles dans les formulaires IAM */
.btn-warning {
  background: #78350f;
  color: #fbbf24;
  border: 1px solid #92400e;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.btn-warning:hover { background: #92400e; }

.btn-success {
  background: #052e16;
  color: #4ade80;
  border: 1px solid #166534;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.btn-success:hover { background: #166534; }

/* Agrandir le modal pour l'édition */
.modal-wide {
  max-width: 720px !important;
}

/* ====== RESPONSIVE ====== */
/* SUPPRIMÉ : la règle max-width:768px qui masquait les labels nav sur Android.
   Sur smartphone (<640px) la sidebar s'affiche en overlay pleine largeur via JS toggle.
   Sur tablette (641-1024px) elle fait 180px et les labels sont visibles.
   → Le mode "icônes seules" 3rem n'est plus utilisé car illisible sur Android. */

/* ====== Override critique — masquage fiable ====== */
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE / TABLETTE
   ═══════════════════════════════════════════════════════════ */

/* Viewport mobile : sidebar cachée par défaut */
@media (max-width: 640px) {
  #sidebar {
    transform: translateX(-100%);
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.6);
    /* Largeur explicite pour que les labels soient visibles en overlay */
    width: 240px !important;
    min-width: 240px !important;
    max-width: 80vw !important;
  }

  /* Sidebar ouverte — labels toujours visibles */
  #sidebar.mobile-open .nav-item span:not(.nav-level) {
    display: inline !important;
  }
  #sidebar.mobile-open .nav-sep-cmd,
  #sidebar.mobile-open .nav-sep-ops,
  #sidebar.mobile-open .nav-sep-ana,
  #sidebar.mobile-open .nav-sep-inf,
  #sidebar.mobile-open .nav-sep-ctr,
  #sidebar.mobile-open .nav-sep-adm,
  #sidebar.mobile-open .nav-sep-sec,
  #sidebar.mobile-open .nav-sep-ext {
    display: flex !important;
  }

  #content-area {
    padding: 0.5rem !important;
  }

  .screen-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .screen-header > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Grilles adaptatives */
  .grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  /* Tables scrollables horizontalement */
  .data-table { font-size: 0.65rem; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Modal plein écran mobile */
  #modal-box {
    max-width: 100% !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  #modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  /* Cards empilées */
  .card { padding: 0.75rem !important; }

  /* Header compact */
  #top-bar {
    padding: 0.5rem 0.75rem;
  }

  #top-bar .flex-1.max-w-md {
    display: none;
  }

  /* War Room map */
  #war-room-map {
    height: 200px !important;
  }
}

/* Tablette (640px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  #sidebar {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }

  .nav-item-label { font-size: 0.65rem; }

  .grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  #mobile-nav-toggle { display: none; }
}

/* Desktop */
@media (min-width: 1025px) {
  #mobile-nav-toggle { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   INSTITUTION THEMES
   ═══════════════════════════════════════════════════════════ */

.theme-anssi  { --accent: #22c55e; --accent-bg: #052e16; }
.theme-acris  { --accent: #f97316; --accent-bg: #431407; }
.theme-cns    { --accent: #a855f7; --accent-bg: #2e1065; }
.theme-bipe   { --accent: #14b8a6; --accent-bg: #042f2e; }
.theme-artp   { --accent: #06b6d4; --accent-bg: #083344; }

/* ═══════════════════════════════════════════════════════════
   CONFORMITÉ / COMPLIANCE
   ═══════════════════════════════════════════════════════════ */

.compliance-bar {
  height: 6px;
  background: #374151;
  border-radius: 999px;
  overflow: hidden;
}
.compliance-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════
   STICKY FOOTER IN MODALS
   ═══════════════════════════════════════════════════════════ */

.modal-body {
  max-height: calc(85vh - 60px);
  overflow-y: auto;
  padding: 1rem;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #374151;
  background: #111827;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════
   IMPUTATION BADGE
   ═══════════════════════════════════════════════════════════ */

.imputation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: bold;
  border: 1px solid;
}
.imputation-PRIMAIRE   { background: #450a0a; color: #fca5a5; border-color: #991b1b; }
.imputation-SECONDAIRE { background: #431407; color: #fdba74; border-color: #9a3412; }
.imputation-SURVEILLANCE { background: #1e1b4b; color: #a5b4fc; border-color: #3730a3; }
.imputation-TECHNIQUE  { background: #172554; color: #93c5fd; border-color: #1d4ed8; }
.imputation-COORDINATION { background: #042f2e; color: #5eead4; border-color: #0f766e; }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE AMÉLIORÉ v2 — TOUS ÉCRANS
   ═══════════════════════════════════════════════════════════ */

/* Sidebar overlay mobile */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99;
}
#sidebar-overlay.active { display: block; }

/* Sidebar ouverte mobile */
#sidebar.mobile-open {
  transform: translateX(0) !important;
}

/* Bouton retour mobile dans la topbar */
#mobile-back-btn {
  display: none;
}

/* Scrolling horizontal sur petits écrans pour les stat-grids */
.stats-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.stats-row::-webkit-scrollbar { display: none; }
.stats-row > * { flex-shrink: 0; min-width: 140px; }

/* Flex-wrap pour les boutons d'action header */
.screen-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Tableaux responsives */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cards grid responsive native */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* ── MOBILE (≤ 640px) ───────────────────────────────────── */
@media (max-width: 640px) {
  /* Top bar compact */
  #top-bar { padding: 0.4rem 0.6rem; gap: 0.5rem; }
  #top-bar .flex-1.max-w-md { display: none !important; }
  #mode-indicator { padding: 0.2rem 0.4rem; font-size: 0.6rem; }
  #user-name { display: none !important; }

  /* Content area */
  #content-area { padding: 0.5rem !important; overflow-x: hidden; }
  #screen-content { padding: 0.5rem !important; }

  /* Screen headers */
  .screen-header {
    flex-direction: column !important;
    gap: 0.5rem;
    align-items: flex-start;
  }
  .screen-header .flex.gap-2,
  .screen-header .flex.gap-3 {
    flex-wrap: wrap;
  }

  /* Grilles */
  .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid.grid-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
  .grid.grid-cols-5 { grid-template-columns: repeat(2,1fr) !important; }
  .grid.grid-cols-6 { grid-template-columns: repeat(2,1fr) !important; }

  /* Cards compactes */
  .card { padding: 0.6rem !important; }
  .card .text-2xl { font-size: 1.25rem !important; }
  .card .text-3xl { font-size: 1.5rem !important; }

  /* Boutons action */
  .btn-ghost, .btn-danger, .btn-primary, .btn-success {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.65rem !important;
  }

  /* Tableaux */
  table { display: block; overflow-x: auto; font-size: 0.65rem; }
  th, td { white-space: nowrap; padding: 0.3rem 0.5rem !important; }

  /* Progress bars */
  .progress-bar { height: 4px !important; }

  /* War room layout */
  .war-room-grid { grid-template-columns: 1fr !important; }

  /* Flex row → col sur mobile */
  .mobile-col { flex-direction: column !important; gap: 0.5rem !important; }

  /* IIV/OIV selector pills overflow */
  .oiv-selector { overflow-x: auto; flex-wrap: nowrap !important; }

  /* Timeline compact */
  .timeline-event { padding: 0.5rem !important; }

  /* Log lines compact */
  .log-line { font-size: 0.6rem !important; }
}

/* ── TABLETTE (641px – 1024px) ──────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  #sidebar {
    width: 200px !important;
    min-width: 200px !important;
  }
  #content-area { padding: 1rem !important; }
  .grid.grid-cols-6 { grid-template-columns: repeat(3,1fr) !important; }
  .grid.grid-cols-5 { grid-template-columns: repeat(3,1fr) !important; }
  .grid.grid-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
  .card .text-3xl { font-size: 1.75rem !important; }
  table { font-size: 0.7rem; }
}

/* ── LARGE (≥ 1280px) ──────────────────────────────────── */
@media (min-width: 1280px) {
  #content-area { padding: 1.5rem 2rem !important; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  #sidebar, #top-bar, .btn-ghost, .btn-danger, .btn-primary { display: none !important; }
  #content-area { padding: 0 !important; }
  body { background: white !important; color: black !important; }
  .card { border: 1px solid #ccc !important; background: white !important; }
}

/* ====== BOUTON PRÉCÉDENT INLINE ====== */
.back-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #9ca3af;
  background: transparent;
  border: 1px solid #374151;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.back-btn-inline:hover {
  color: #ffffff;
  background: #1f2937;
  border-color: #6b7280;
}

/* ====== CLASSIFICATION NIVEAUX — Badges étendus ====== */
.classif-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   CORRECTIFS ANDROID — Couleurs nav-item (Tailwind JIT bypass)
   Les classes dynamiques JS ne sont pas générées par le CDN
   → On les déclare explicitement ici en CSS pur
   ═══════════════════════════════════════════════════════════ */

/* Bordures latérales + couleurs texte des items de navigation */
.nav-item.nav-cmd  { border-left: 2px solid #b91c1c !important; color: #f87171 !important; }
.nav-item.nav-ops  { border-left: 2px solid #c2410c !important; color: #fb923c !important; }
.nav-item.nav-ana  { border-left: 2px solid #a16207 !important; color: #facc15 !important; }
.nav-item.nav-inf  { border-left: 2px solid #15803d !important; color: #4ade80 !important; }
.nav-item.nav-ctr  { border-left: 2px solid #1d4ed8 !important; color: #60a5fa !important; }
.nav-item.nav-adm  { border-left: 2px solid #6d28d9 !important; color: #a78bfa !important; }
.nav-item.nav-sec  { border-left: 2px solid #7e22ce !important; color: #c084fc !important; }
.nav-item.nav-ext  { border-left: 2px solid #1d4ed8 !important; color: #67e8f9 !important; }

/* Hover : maintenir lisibilité tout en éclairant légèrement */
.nav-item.nav-cmd:hover  { color: #fca5a5 !important; background: #1a0505 !important; }
.nav-item.nav-ops:hover  { color: #fdba74 !important; background: #1a0a05 !important; }
.nav-item.nav-ana:hover  { color: #fde047 !important; background: #1a1505 !important; }
.nav-item.nav-inf:hover  { color: #86efac !important; background: #05150a !important; }
.nav-item.nav-ctr:hover  { color: #93c5fd !important; background: #05101a !important; }
.nav-item.nav-adm:hover  { color: #c4b5fd !important; background: #0f0520 !important; }
.nav-item.nav-sec:hover  { color: #d8b4fe !important; background: #0f0520 !important; }
.nav-item.nav-ext:hover  { color: #a5f3fc !important; background: #05101a !important; }

/* État actif — override des couleurs de bloc */
.nav-item.active,
.nav-item.nav-cmd.active,
.nav-item.nav-ops.active,
.nav-item.nav-ana.active,
.nav-item.nav-inf.active,
.nav-item.nav-ctr.active,
.nav-item.nav-adm.active,
.nav-item.nav-sec.active,
.nav-item.nav-ext.active {
  background: #1e3a5f !important;
  color: #93c5fd !important;
  border-left: 2px solid #3b82f6 !important;
}

/* Icônes dans les nav-items (héritage de couleur) */
.nav-item.nav-cmd  i { color: inherit; }
.nav-item.nav-ops  i { color: inherit; }
.nav-item.nav-ana  i { color: inherit; }
.nav-item.nav-inf  i { color: inherit; }
.nav-item.nav-ctr  i { color: inherit; }
.nav-item.nav-adm  i { color: inherit; }
.nav-item.nav-sec  i { color: inherit; }
.nav-item.nav-ext  i { color: inherit; }

/* Éléments restreints — ne pas hériter des couleurs blocs */
.nav-item.restricted,
.nav-item.restricted i { color: #4b5563 !important; }

/* En-têtes de blocs nav (séparateurs) — couleurs texte */
.nav-sep-cmd  { color: #f87171 !important; }
.nav-sep-ops  { color: #fb923c !important; }
.nav-sep-ana  { color: #facc15 !important; }
.nav-sep-inf  { color: #4ade80 !important; }
.nav-sep-ctr  { color: #60a5fa !important; }
.nav-sep-adm  { color: #a78bfa !important; }
.nav-sep-sec  { color: #c084fc !important; }
.nav-sep-ext  { color: #60a5fa !important; }

/* État actif d'un item de nav */
.nav-item.active {
  background: #1e3a5f !important;
  color: #60a5fa !important;
}
/* Surlignage au tap sur Android (supprime le flash gris) */
.nav-item {
  -webkit-tap-highlight-color: rgba(96, 165, 250, 0.15);
  -webkit-touch-callout: none;
}

/* ═══════════════════════════════════════════════════════════
   MODAL DE CONFIRMATION CUSTOM (remplace confirm() Android)
   ═══════════════════════════════════════════════════════════ */

#custom-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#custom-confirm-box {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 25px 50px rgba(0,0,0,0.8);
}
#custom-confirm-box .ccb-icon {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.75rem;
}
#custom-confirm-box .ccb-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #f9fafb;
  text-align: center;
  margin-bottom: 0.5rem;
}
#custom-confirm-box .ccb-msg {
  font-size: 0.78rem;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
#custom-confirm-box .ccb-btns {
  display: flex;
  gap: 0.75rem;
}
#custom-confirm-box .ccb-cancel {
  flex: 1;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid #374151;
  background: #1f2937;
  color: #9ca3af;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#custom-confirm-box .ccb-cancel:hover,
#custom-confirm-box .ccb-cancel:active {
  background: #374151;
  color: #e5e7eb;
}
#custom-confirm-box .ccb-ok {
  flex: 1;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid #991b1b;
  background: #7f1d1d;
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#custom-confirm-box .ccb-ok:hover,
#custom-confirm-box .ccb-ok:active {
  background: #991b1b;
  color: #fee2e2;
}

/* ═══════════════════════════════════════════════════════════
   CORRECTIFS LAYOUT MULTI-TERMINAUX v3
   Résout : hauteur bloquée, dépassement, scroll interne, dvh
   ═══════════════════════════════════════════════════════════ */

/* Hauteur dynamique selon le viewport (iOS Safari, Android Chrome) */
html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

/* App principale : occuper exactement le viewport sans dépasser */
#app-main {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Zone flex centrale (sidebar + contenu) */
#app-main > .flex.flex-1 {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}

/* Zone de contenu : scroll vertical uniquement */
#content-area {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* screen-content : les écrans internes NE doivent PAS utiliser 100vh */
#screen-content {
  width: 100%;
}

/* Écrans internes qui utilisent min-height:100vh → les forcer à 100% */
#screen-content > div[style*="min-height:100vh"],
#screen-content > div[style*="min-height: 100vh"] {
  min-height: 0 !important;
  min-height: unset !important;
}

/* War Room, CNS, Timeline — containers internes */
#wr3, #cns4, #s3-wrap {
  overflow-y: auto;
  max-height: 100%;
}

/* Login screen : centrage vertical correct sur tous appareils */
#screen-login {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#screen-login .min-h-screen {
  min-height: 100dvh;
  min-height: 100vh;
}

/* Doctrinal home page : doit scroller, pas déborder */
#screen-content > div[style*="min-height:100vh"] {
  min-height: unset !important;
  height: auto !important;
}

/* ── Topbar : hauteur fixe, ne grandit pas ── */
#top-bar {
  flex-shrink: 0;
  height: auto;
  min-height: 48px;
}

/* ── Sidebar : hauteur complète disponible ── */
#sidebar {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── MOBILE : corrections spécifiques ── */
@media (max-width: 640px) {
  /* Sidebar overlay fixe sur tout le viewport */
  #sidebar {
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  /* Content area padding réduit */
  #content-area {
    padding: 0.375rem !important;
  }

  /* Topbar : cacher éléments non essentiels */
  #btn-declencher-crise span { display: none !important; }
  #btn-declencher-crise { padding: 0.3rem 0.5rem !important; }
  #global-refresh-btn span { display: none !important; }

  /* Écrans avec scroll interne : forcer scroll dans la zone */
  #screen-content {
    padding: 0 !important;
  }

  /* Tableaux et grilles CNS sur mobile */
  .cns-card {
    padding: 0.5rem !important;
  }
  .cns-opt {
    padding: 0.4rem !important;
  }

  /* War Room blocs empilés sur mobile */
  #wr3 .grid,
  #cns4 .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── TABLETTE : corrections ── */
@media (min-width: 641px) and (max-width: 1024px) {
  #content-area {
    padding: 0.75rem !important;
  }

  /* Sidebar légèrement plus étroite */
  #sidebar {
    min-width: 180px !important;
    width: 180px !important;
  }
}

/* ── Anti-flash au chargement ── */
#screen-login.hidden,
#app-main.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}