/* ============================================================
   EbolaWatch RDC — Surveillance Épidémiologique Ebola
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red-critical: #dc2626;
  --orange-high: #ea580c;
  --amber-mid: #d97706;
  --green-low: #16a34a;
  --navy: #0f172a;
  --navy-light: #1e293b;
  --sidebar-w: 240px;
  --header-h: 58px;
  --card-bg: #ffffff;
  --bg: #f1f5f9;
  --text-primary: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --radius: 10px;
}

html, body { height: 100%; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text-primary); font-size: 14px; line-height: 1.5; }
a { text-decoration: none; color: inherit; }
.hidden { display: none !important; }

/* --- Layout shell --- */
#app-shell { display: flex; height: 100vh; overflow: hidden; }

/* --- Sidebar --- */
#sidebar {
  width: var(--sidebar-w);
  background: var(--navy);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
}

.sidebar-logo {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  background: var(--red-critical);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.sidebar-logo .logo-text { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.sidebar-logo .logo-sub { font-size: 10px; color: #94a3b8; letter-spacing: .5px; text-transform: uppercase; }

.sidebar-section { padding: 12px 10px 4px; font-size: 10px; font-weight: 600; color: #475569; letter-spacing: .8px; text-transform: uppercase; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 1px 6px;
  cursor: pointer;
  font-size: 13px;
  color: #94a3b8;
  transition: all .15s;
}
.nav-item:hover { background: rgba(255,255,255,0.07); color: #e2e8f0; }
.nav-item.active { background: rgba(220,38,38,0.18); color: #fca5a5; }
.nav-item .nav-icon { width: 20px; text-align: center; font-size: 15px; }
.nav-item .nav-badge {
  margin-left: auto;
  background: var(--red-critical);
  color: white;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11px; color: #475569;
}
.sidebar-footer .clock { color: #94a3b8; font-weight: 600; font-size: 12px; }
.sidebar-footer .refresh { margin-top: 4px; }

/* --- Main Content --- */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Header --- */
#header {
  height: var(--header-h);
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.header-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.header-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.header-spacer { flex: 1; }

.outbreak-badge {
  display: flex; align-items: center; gap: 6px;
  background: #fef2f2; border: 1px solid #fca5a5;
  color: var(--red-critical);
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}
.outbreak-badge .pulse-dot {
  width: 8px; height: 8px;
  background: var(--red-critical); border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}

.header-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--border);
  background: white; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--text-primary); transition: all .15s;
}
.header-btn:hover { background: var(--bg); border-color: #cbd5e1; }
.header-btn.primary { background: var(--red-critical); color: white; border-color: var(--red-critical); }
.header-btn.primary:hover { background: #b91c1c; }

/* --- Page area --- */
#page-area { flex: 1; overflow-y: auto; padding: 18px 20px; }

/* --- Section header --- */
.section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.section-header h2 { font-size: 15px; font-weight: 700; color: var(--navy); }
.section-header .section-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.section-header .spacer { flex: 1; }

/* --- KPI Grid --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-card {
  background: white;
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-left: 4px solid transparent;
  transition: transform .2s, box-shadow .2s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card.danger { border-left-color: var(--red-critical); }
.kpi-card.warning { border-left-color: var(--amber-mid); }
.kpi-card.info { border-left-color: #3b82f6; }
.kpi-card.success { border-left-color: var(--green-low); }

.kpi-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.kpi-value {
  font-size: 28px; font-weight: 800;
  color: var(--navy); line-height: 1;
  transition: color .3s;
}
.kpi-value.kpi-updated { animation: flash-kpi .5s; }
.kpi-sublabel { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.kpi-icon { font-size: 22px; opacity: .6; }

/* --- Grid layouts --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.grid-main { display: grid; grid-template-columns: 60% 40%; gap: 14px; margin-bottom: 14px; }
.grid-charts { display: grid; grid-template-columns: 60% 40%; gap: 14px; margin-bottom: 14px; }
.grid-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* --- Cards --- */
.card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  background: #fafafa;
}
.card-title { font-size: 13px; font-weight: 700; color: var(--navy); }
.card-sub { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.card-body { padding: 14px 16px; }

/* --- Map --- */
#epidmap {
  height: 420px;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 1;
}

.map-legend {
  background: rgba(255,255,255,0.95);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11px;
  box-shadow: var(--shadow-md);
}
.map-legend h4 { font-weight: 700; margin-bottom: 6px; color: var(--navy); font-size: 11px; }
.map-legend div { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.map-legend span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

.custom-marker { background: none !important; border: none !important; }
.marker-bubble { transition: transform .2s; }
.marker-bubble:hover { transform: scale(1.15); }

.popup-zone { min-width: 240px; font-size: 13px; }
.popup-header { padding: 6px 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.popup-header strong { font-size: 15px; color: var(--navy); display: block; }
.popup-province { font-size: 11px; color: var(--text-muted); }
.popup-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.popup-stat { text-align: center; background: var(--bg); border-radius: 6px; padding: 5px; }
.popup-label { display: block; font-size: 10px; color: var(--text-muted); }
.popup-value { display: block; font-size: 15px; font-weight: 700; }
.popup-perf { font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 6px; display: flex; gap: 10px; }
.popup-footer { font-size: 11px; color: var(--text-muted); padding-top: 5px; }

/* --- Alertes --- */
#alertes-list { display: flex; flex-direction: column; gap: 8px; }
.alerte-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px; border: 1px solid;
}
.alerte-item.alerte-critique { background: #fef2f2; border-color: #fca5a5; }
.alerte-item.alerte-warning { background: #fff7ed; border-color: #fed7aa; }
.alerte-item.alerte-info { background: #eff6ff; border-color: #bfdbfe; }
.alerte-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alerte-msg { font-size: 12px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.alerte-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.alerte-statut { margin-left: auto; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.badge-active { background: #fef2f2; color: var(--red-critical); }
.badge-en_investigation { background: #fff7ed; color: var(--orange-high); }
.badge-resolue { background: #f0fdf4; color: var(--green-low); }

/* --- Table zones --- */
.province-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.province-filter-btn {
  padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border);
  background: white; cursor: pointer; font-size: 11px; font-weight: 500;
  color: var(--text-muted); transition: all .15s;
}
.province-filter-btn:hover { border-color: #94a3b8; color: var(--text-primary); }
.province-filter-btn.active { background: var(--navy); color: white; border-color: var(--navy); }

.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead th {
  padding: 8px 10px; text-align: left;
  background: var(--bg); border-bottom: 2px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; cursor: pointer; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table td { padding: 9px 10px; vertical-align: middle; }
.text-center { text-align: center; }
.text-confirme { color: var(--red-critical); font-weight: 700; }
.text-deces { color: #374151; font-weight: 700; }
.text-danger { color: var(--red-critical); }
.text-ok { color: var(--green-low); }

.badge-alerte {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; flex-shrink: 0;
}
.badge-critique { background: var(--red-critical); }
.badge-eleve { background: var(--orange-high); }
.badge-modere { background: var(--amber-mid); }
.badge-faible { background: var(--green-low); }

.province-tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
}

.taux-badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.taux-haut { background: #fef2f2; color: var(--red-critical); }
.taux-moyen { background: #fff7ed; color: var(--orange-high); }
.taux-bas { background: #f0fdf4; color: var(--green-low); }

.attente-badge {
  display: inline-block; background: #fef3c7; color: #92400e;
  border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}

.tendance { font-weight: 600; font-size: 11px; }
.tendance.hausse { color: var(--red-critical); }
.tendance.baisse { color: var(--green-low); }
.tendance.stable { color: var(--amber-mid); }

.perf-cell { font-weight: 600; }
.perf-low { color: var(--red-critical); }
.perf-mid { color: var(--amber-mid); }
.perf-high { color: var(--green-low); }

/* --- Flux activité --- */
#flux-activite { display: flex; flex-direction: column; gap: 8px; }
.flux-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  transition: background .15s;
}
.flux-item:hover { background: #f1f5f9; }
.flux-statut {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; margin-top: 2px;
}
.badge-cas-confirme { background: #fef2f2; color: var(--red-critical); }
.badge-cas-probable { background: #fff7ed; color: var(--orange-high); }
.badge-cas-suspect { background: #fffbeb; color: #92400e; }
.badge-cas-infirme { background: #f0fdf4; color: var(--green-low); }
.flux-details { flex: 1; }
.flux-info { font-size: 12px; font-weight: 500; color: var(--navy); }
.flux-symptomes { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.flux-issue { font-size: 10px; font-weight: 600; margin-top: 3px; }
.issue-deces { color: var(--red-critical); }
.issue-guerison { color: var(--green-low); }
.issue-traitement { color: #3b82f6; }
.flux-date { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* --- Charts --- */
.chart-wrapper { height: 220px; position: relative; }
.chart-wrapper-sm { height: 200px; position: relative; }

/* --- Status bar de semaine épidémique --- */
.epi-week-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--navy-light); color: #e2e8f0;
  padding: 6px 16px; font-size: 11px;
}
.epi-week-bar strong { color: #fca5a5; }
.epi-week-bar .sep { color: #475569; }

/* --- Animations --- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.2); }
}
@keyframes pulse-marker {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
}
@keyframes flash-kpi {
  0% { color: var(--red-critical); }
  100% { color: var(--navy); }
}

/* --- Responsive hints (pas prioritaire Phase 1) --- */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-main, .grid-charts { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #sidebar { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* --- Table scroll wrapper --- */
.table-wrapper { overflow-x: auto; }

/* ============================================================
   Phase 3 — Authentification UI
   ============================================================ */

/* --- Sidebar user block --- */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  margin: 6px 6px 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  font-size: 12px;
}

.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #3b82f6;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.user-name {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
}

.logout-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 13px;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}

.logout-btn:hover {
  color: #fca5a5;
  border-color: rgba(220,38,38,.4);
  background: rgba(220,38,38,.08);
}

/* ============================================================
   ESPACE DE SAISIE TERRAIN — Phase 7
   ============================================================ */

/* Formulaires */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #94a3b8;
}

.form-control {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 8px 11px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.form-control:focus {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.form-control::placeholder {
  color: #334155;
}

select.form-control option {
  background: #1e293b;
  color: #e2e8f0;
}

textarea.form-control {
  resize: vertical;
  min-height: 72px;
}

/* Bouton de soumission */
.btn-submit {
  background: linear-gradient(135deg, rgba(99,102,241,0.8), rgba(79,70,229,0.9));
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 8px;
  color: #e0e7ff;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 10px 20px;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .2px;
}

.btn-submit:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.95), rgba(79,70,229,1));
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
  transform: translateY(-1px);
}

.btn-submit:active {
  transform: translateY(0);
}

/* Panneaux de formulaire */
.saisie-panel {
  animation: fadeInUp .2s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Onglets saisie */
.saisie-tab {
  transition: all .2s;
}

.saisie-tab:hover {
  background: rgba(99,102,241,0.1) !important;
  color: #a5b4fc !important;
}

.saisie-tab.active {
  background: rgba(99,102,241,0.25) !important;
  color: #a5b4fc !important;
  font-weight: 600 !important;
  border-color: rgba(99,102,241,0.3) !important;
}

/* Feedback soumission */
.feedback-success {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  color: #6ee7b7;
}

.feedback-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
}

.feedback-loading {
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  color: #a5b4fc;
}