/* =====================================================================
   Cyber Surveillance — retouches visuelles partagées
   Bloc 100 % additif : aucune règle existante n'est modifiée.
   Pour tout annuler : retirer le <link> de ce fichier dans les pages.
   ===================================================================== */

/* --- Cartes (KPI / statistiques) : liseré coloré, profondeur, survol --- */
.kpi-card, .stat-card { position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,0.022),transparent 60%),var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,0.40),0 4px 14px rgba(0,0,0,0.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kpi-card::before, .stat-card::before { content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--accent); }
.kpi-card:has(.kpi-value.green)::before  { background:var(--green); }
.kpi-card:has(.kpi-value.yellow)::before { background:var(--yellow); }
.kpi-card:has(.kpi-value.red)::before    { background:var(--red); }
.kpi-card:has(.kpi-value.purple)::before { background:var(--purple); }
.kpi-card:has(.kpi-value.teal)::before   { background:var(--teal); }
.kpi-card:hover, .stat-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.14);
  box-shadow:0 2px 4px rgba(0,0,0,0.45),0 10px 26px rgba(0,0,0,0.28); }

/* --- Cartes de contenu / tableaux : profondeur + en-tête détaché --- */
.table-card, .card { box-shadow:0 1px 2px rgba(0,0,0,0.40),0 4px 14px rgba(0,0,0,0.16); }
.table-header, .card-header { background:linear-gradient(180deg,rgba(255,255,255,0.025),transparent); }

/* --- Tableaux : lignes aérées, survol lisible, en-tête collant --- */
td { padding:0.85rem 1.25rem; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:rgba(255,255,255,0.035); }
thead th { position:sticky; top:0; z-index:2; background:var(--surface); }

/* --- Badges : fin anneau coloré --- */
.badge-green  { box-shadow:inset 0 0 0 1px rgba(72,187,120,0.35); }
.badge-red    { box-shadow:inset 0 0 0 1px rgba(252,129,129,0.35); }
.badge-yellow { box-shadow:inset 0 0 0 1px rgba(246,173,85,0.35); }
.badge-blue   { box-shadow:inset 0 0 0 1px rgba(79,142,247,0.35); }
.badge-purple { box-shadow:inset 0 0 0 1px rgba(159,122,234,0.35); }
.badge-gray   { box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }

/* --- Menu : barre d'accent sur l'actif, léger décalage au survol --- */
.nav-item.active { background:linear-gradient(90deg,rgba(79,142,247,0.22),rgba(79,142,247,0.06));
  box-shadow:inset 3px 0 0 var(--accent); }
.nav-item:hover:not(.active) { transform:translateX(2px); }

/* --- Apparition en fondu au changement de section --- */
.section.active { animation:sectionFade .25s ease; }
@keyframes sectionFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* --- Thème clair : ombres et surlignages adoucis --- */
html[data-theme="light"] .kpi-card, html[data-theme="light"] .stat-card,
html[data-theme="light"] .table-card, html[data-theme="light"] .card {
  box-shadow:0 1px 2px rgba(16,24,40,0.06),0 4px 12px rgba(16,24,40,0.05); }
html[data-theme="light"] .kpi-card, html[data-theme="light"] .stat-card { background:var(--surface); }
html[data-theme="light"] .kpi-card:hover, html[data-theme="light"] .stat-card:hover {
  border-color:rgba(16,24,40,0.14); box-shadow:0 2px 5px rgba(16,24,40,0.08),0 10px 22px rgba(16,24,40,0.08); }
html[data-theme="light"] .table-header, html[data-theme="light"] .card-header {
  background:linear-gradient(180deg,rgba(16,24,40,0.02),transparent); }
html[data-theme="light"] tbody tr:hover td { background:rgba(16,24,40,0.03); }
html[data-theme="light"] .badge-gray { box-shadow:inset 0 0 0 1px rgba(16,24,40,0.12); }

/* --- Respecte le réglage système « animations réduites » --- */
@media (prefers-reduced-motion:reduce) {
  .kpi-card, .stat-card, .nav-item, tbody tr { transition:none; }
  .kpi-card:hover, .stat-card:hover, .nav-item:hover:not(.active) { transform:none; }
  .section.active { animation:none; }
}