/* ═══════════════════════════════════════════════════
   BELLE-ÎLE RP INTRANET — style.css v6.0 ULTRA
   Premium dark • Neon glow • Glassmorphism
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────── */
:root {
  /* Base */
  --bg:       #020408;
  --surface:  #050910;
  --panel:    #080d1b;
  --card:     #0b1120;
  --elevated: #0e1528;
  --hover:    #111929;

  /* Gendarmerie */
  --g1: #162f62; --g2: #0b1c40;
  --g-acc: #5b9cf6; --g-gold: #f0b429;

  /* SDIS */
  --s1: #7a1515; --s2: #5a0d0d;
  --s-acc: #f4623a; --s-gold: #fb923c;

  /* Active accent (JS updated) */
  --acc:    #5b9cf6;
  --acc2:   #f0b429;
  --acc-dim: rgba(91,156,246,.12);
  --acc-glow: rgba(91,156,246,.3);

  /* Status */
  --green:  #22d3a0; --green-dim: rgba(34,211,160,.12);
  --red:    #f87171; --red-dim: rgba(248,113,113,.1);
  --orange: #fb923c; --orange-dim: rgba(251,146,60,.1);
  --yellow: #fbbf24;
  --cyan:   #22d3ee;
  --purple: #a78bfa;

  /* Text */
  --t1: #e8eeff; --t2: #697ea8; --t3: #39496a;

  /* Borders */
  --b1: rgba(91,156,246,.07);
  --b2: rgba(91,156,246,.18);
  --b3: rgba(91,156,246,.38);

  /* Layout */
  --sb-w: 268px; --tb-h: 60px;
  --r: 8px; --rl: 12px; --rxl: 18px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:   0 16px 60px rgba(0,0,0,.7);
  --glow-acc:    0 0 30px rgba(91,156,246,.18);
}

body.theme-sp {
  --acc: #f4623a; --acc2: #fb923c;
  --acc-dim: rgba(244,98,58,.1);
  --acc-glow: rgba(244,98,58,.25);
  --b1: rgba(244,98,58,.07); --b2: rgba(244,98,58,.2); --b3: rgba(244,98,58,.4);
  --glow-acc: 0 0 30px rgba(244,98,58,.18);
}

body.theme-pref {
  --acc: #d4af37; --acc2: #b8860b;
  --acc-dim: rgba(212,175,55,.1);
  --acc-glow: rgba(212,175,55,.25);
  --b1: rgba(212,175,55,.07); --b2: rgba(212,175,55,.2); --b3: rgba(212,175,55,.4);
  --glow-acc: 0 0 30px rgba(212,175,55,.18);
}

body.theme-civil {
  --acc: #9ca3af; --acc2: #6b7280;
  --acc-dim: rgba(156,163,175,.1);
  --acc-glow: rgba(156,163,175,.25);
  --b1: rgba(156,163,175,.07); --b2: rgba(156,163,175,.2); --b3: rgba(156,163,175,.4);
  --glow-acc: 0 0 30px rgba(156,163,175,.18);
}

body.theme-justice {
  --acc: #a31d36; --acc2: #7a1528;
  --acc-dim: rgba(163,29,54,.1);
  --acc-glow: rgba(163,29,54,.25);
  --b1: rgba(163,29,54,.07); --b2: rgba(163,29,54,.2); --b3: rgba(163,29,54,.4);
  --glow-acc: 0 0 30px rgba(163,29,54,.18);
}

/* ── RESET ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif; color:var(--t1);
  background:var(--bg); min-height:100vh; overflow-x:hidden;
}
/* Subtle noise texture on bg */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 90%, rgba(22,47,98,.3) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(11,28,64,.25) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(91,156,246,.015) 48px, rgba(91,156,246,.015) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(91,156,246,.015) 48px, rgba(91,156,246,.015) 49px);
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; }
input,select,textarea,button { font-family:inherit; }

/* ── SCROLLBAR ──────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(91,156,246,.2); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--acc); }
::selection { background:rgba(91,156,246,.25); }

/* ════════════════════════════════════════════════════
   🔐 LOGIN PAGE
════════════════════════════════════════════════════ */
.login-overlay {
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.login-overlay.hidden { opacity:0; pointer-events:none; transition:opacity .4s; }

/* Animated gradient background */
.login-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 100% 70% at 30% 100%, rgba(22,47,98,.6) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 0%, rgba(11,22,52,.5) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(8,13,28,.8) 0%, var(--bg) 100%);
  animation:bgShift 12s ease-in-out infinite alternate;
}
@keyframes bgShift {
  0%   { filter:hue-rotate(0deg); }
  100% { filter:hue-rotate(10deg); }
}

/* Scanlines overlay */
.login-bg::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.12) 2px, rgba(0,0,0,.12) 4px);
  pointer-events:none;
}

/* Particles */
.login-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.lp {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--acc) 0%, transparent 70%);
  opacity:0;
  animation:floatUp linear infinite;
}
@keyframes floatUp {
  0%   { opacity:0; transform:translateY(30px) scale(.4); }
  20%  { opacity:.8; }
  80%  { opacity:.15; }
  100% { opacity:0; transform:translateY(-120px) scale(1.5); }
}

/* Login card */
.login-card {
  position:relative; z-index:2;
  width:min(480px, 95vw);
  background:rgba(6,10,22,.88);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(91,156,246,.16);
  border-radius:var(--rxl);
  padding:2.75rem 2.5rem 2.25rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 32px 80px rgba(0,0,0,.75),
    var(--glow-acc);
  animation:cardIn .7s cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(40px) scale(.96); }
  to   { opacity:1; transform:none; }
}
/* Animated corner accents */
.login-card::before, .login-card::after {
  content:''; position:absolute;
  width:28px; height:28px;
  animation:cornerPulse 3s ease infinite;
}
.login-card::before {
  top:-1px; left:-1px;
  border-top:2px solid var(--acc); border-left:2px solid var(--acc);
  border-radius:var(--rxl) 0 0 0;
}
.login-card::after {
  bottom:-1px; right:-1px;
  border-bottom:2px solid var(--acc); border-right:2px solid var(--acc);
  border-radius:0 0 var(--rxl) 0;
}
@keyframes cornerPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.4; }
}

/* Logo + title */
.login-island-title {
  display:flex; align-items:center; gap:1.1rem;
  justify-content:center; margin-bottom:2.25rem;
}
.login-coat {
  width:58px; height:58px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--g1), var(--g2));
  border:1.5px solid rgba(91,156,246,.3);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:0 0 24px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.08);
  animation:logoPulse 4s ease infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow:0 0 20px var(--acc-glow); }
  50%      { box-shadow:0 0 40px var(--acc-glow), 0 0 60px rgba(91,156,246,.12); }
}
.login-main-title {
  font-family:'Oswald',sans-serif; font-size:1.45rem; font-weight:700;
  letter-spacing:.1em; line-height:1.1;
  background:linear-gradient(90deg, var(--t1) 0%, var(--acc) 50%, var(--t1) 100%);
  background-size:200%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmer 4s linear infinite;
}
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }
.login-sub {
  font-family:'Rajdhani',sans-serif; font-size:.58rem;
  letter-spacing:.28em; color:var(--t3); margin-top:.1rem;
}

/* Service chooser */
.service-chooser { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1.85rem; }
.svc-btn {
  display:flex; align-items:center; gap:.75rem;
  background:rgba(255,255,255,.02); border:1.5px solid var(--b1);
  border-radius:var(--rl); padding:.85rem 1rem; cursor:pointer;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  text-align:left; position:relative; overflow:hidden;
}
.svc-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(91,156,246,.04), transparent);
  opacity:0; transition:opacity .2s;
}
.svc-btn:hover { border-color:var(--b2); transform:translateY(-3px) scale(1.01); }
.svc-btn:hover::after { opacity:1; }
.svc-btn img { width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; border:1px solid rgba(255,255,255,.08); }
.svc-name { display:block; font-family:'Rajdhani',sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.1em; color:var(--t1); }
.svc-sub { font-size:.6rem; color:var(--t3); }
.svc-btn.active.gend {
  border-color:var(--g-acc);
  background:linear-gradient(135deg, rgba(22,47,98,.5), rgba(11,28,64,.4));
  box-shadow:0 0 25px rgba(91,156,246,.18), inset 0 0 20px rgba(91,156,246,.05);
}
.svc-btn.active.sp {
  border-color:var(--s-acc);
  background:linear-gradient(135deg, rgba(122,21,21,.45), rgba(90,13,13,.35));
  box-shadow:0 0 25px rgba(244,98,58,.18), inset 0 0 20px rgba(244,98,58,.06);
}
.svc-btn.active.pref {
  border-color:#d4af37;
  background:linear-gradient(135deg, rgba(60,45,15,.45), rgba(30,20,5,.35));
  box-shadow:0 0 25px rgba(212,175,55,.18), inset 0 0 20px rgba(212,175,55,.06);
}
.svc-btn.active.justice {
  border-color:#a31d36;
  background:linear-gradient(135deg, rgba(80,10,20,.45), rgba(50,5,10,.35));
  box-shadow:0 0 25px rgba(163,29,54,.18), inset 0 0 20px rgba(163,29,54,.06);
}
.svc-btn.active.civil {
  border-color:#9ca3af;
  background:linear-gradient(135deg, rgba(40,40,45,.45), rgba(20,20,25,.35));
  box-shadow:0 0 25px rgba(156,163,175,.18), inset 0 0 20px rgba(156,163,175,.06);
}

/* Form inputs */
.field { display:flex; flex-direction:column; gap:.38rem; }
.field label {
  font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.2em; color:var(--t3); text-transform:uppercase;
}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=time],input[type=number],input[type=tel],textarea,.sel-box {
  width:100%; background:rgba(4,7,16,.85); border:1px solid var(--b1);
  border-radius:var(--r); color:var(--t1); font-size:.88rem;
  padding:.7rem .95rem; transition:all .22s; outline:none;
}
input:focus,.sel-box:focus,textarea:focus {
  border-color:var(--acc); background:rgba(4,7,16,.98);
  box-shadow:0 0 0 3px var(--acc-dim), 0 0 20px var(--acc-glow);
}
.sel-box {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b9cf6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.2rem;
}
textarea { resize:vertical; }
#loginForm { display:flex; flex-direction:column; gap:1.1rem; }

.login-err {
  background:var(--red-dim); border:1px solid rgba(248,113,113,.25);
  border-radius:var(--r); color:var(--red);
  font-size:.8rem; padding:.6rem 1rem; display:none;
  animation:shake .35s ease;
}
.login-err.show { display:block; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

.btn-login {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--g1) 0%, #0d2350 100%);
  border:1px solid rgba(91,156,246,.3);
  border-radius:var(--r); color:var(--t1); cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:.88rem; font-weight:700;
  letter-spacing:.2em; padding:.9rem;
  display:flex; align-items:center; justify-content:center; gap:.65rem;
  transition:all .28s;
}
.btn-login::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(91,156,246,.15), transparent);
  opacity:0; transition:opacity .2s;
}
.btn-login:hover { border-color:rgba(91,156,246,.6); transform:translateY(-2px); box-shadow:0 10px 40px rgba(91,156,246,.25); }
.btn-login:hover::before { opacity:1; }
.btn-login:active { transform:translateY(0); }
.btn-arrow { font-size:1.2rem; transition:transform .25s; }
.btn-login:hover .btn-arrow { transform:translateX(6px); }
.login-foot {
  display:flex; justify-content:space-between;
  margin-top:1.5rem; padding-top:.9rem;
  border-top:1px solid var(--b1);
  font-size:.58rem; color:var(--t3); font-family:'Rajdhani',sans-serif; letter-spacing:.1em;
}

/* ════════════════════════════════════════════════════
   🏗 APP LAYOUT
════════════════════════════════════════════════════ */
.app { display:flex; min-height:100vh; position:relative; z-index:1; }
.app.hidden { display:none; }

/* ── SIDEBAR ────────────────────────────────────── */
.sidebar {
  width:var(--sb-w); position:fixed; inset:0 auto 0 0; z-index:200;
  background:rgba(4,7,16,.95);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-right:1px solid var(--b1);
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
/* Glow line on right edge */
.sidebar::after {
  content:''; position:absolute; top:0; right:0; width:1px; height:100%;
  background:linear-gradient(180deg, transparent 0%, var(--acc) 30%, rgba(91,156,246,.3) 70%, transparent 100%);
  opacity:.4; pointer-events:none;
}
.sidebar.closed { transform:translateX(-100%); }

/* Sidebar header */
.sb-header {
  display:flex; align-items:center; gap:.8rem;
  padding:1.2rem 1.3rem;
  background:rgba(0,0,0,.3);
  border-bottom:1px solid var(--b1);
  flex-shrink:0;
}
#sbLogo {
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--acc-dim);
  box-shadow:0 0 15px var(--acc-glow);
  flex-shrink:0;
}
.sb-brand { flex:1; min-width:0; }
.sb-service {
  display:block; font-family:'Rajdhani',sans-serif;
  font-size:.8rem; font-weight:700; letter-spacing:.16em;
  color:var(--acc); text-shadow:0 0 14px var(--acc-glow);
}
.sb-isle { font-size:.6rem; color:var(--t3); font-family:'Rajdhani',sans-serif; }
.sb-toggle-svc {
  background:var(--acc-dim); border:1px solid var(--b2);
  border-radius:var(--r); color:var(--acc);
  width:32px; height:32px; cursor:pointer; font-size:.9rem;
  transition:all .22s; flex-shrink:0;
}
.sb-toggle-svc:hover { background:rgba(91,156,246,.2); box-shadow:var(--glow-acc); }

/* User panel */
.sb-user {
  position:relative; display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.3rem;
  background:rgba(0,0,0,.2);
  border-bottom:1px solid var(--b1);
  flex-shrink:0;
}
.sb-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--acc), var(--acc2));
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:700; color:#000;
  box-shadow:0 0 18px var(--acc-glow);
}
.sb-user-info { flex:1; min-width:0; }
.sb-user-info span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sbName { font-size:.88rem; font-weight:600; }
#sbGrade {
  font-family:'Rajdhani',sans-serif; font-size:.65rem; font-weight:700;
  letter-spacing:.1em; color:var(--acc);
}
#sbMatricule { font-size:.6rem; color:var(--t3); font-family:'JetBrains Mono',monospace; }
.online-dot {
  position:absolute; right:1.3rem; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 10px var(--green);
  animation:blink 2.5s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Nav */
.sb-nav { flex:1; padding:.5rem 0; }
.nav-section {
  display:flex; align-items:center; gap:.5rem;
  font-family:'Rajdhani',sans-serif; font-size:.52rem; font-weight:700;
  letter-spacing:.28em; color:var(--t3); padding:.9rem 1.6rem .3rem;
}
.nav-section::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--b2), transparent); }
.nav-a {
  display:flex; align-items:center; gap:.7rem;
  padding:.62rem 1.6rem; font-size:.84rem; font-weight:500;
  color:var(--t2); cursor:pointer;
  border-left:2px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
  position:relative; overflow:hidden;
}
.nav-a::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(91,156,246,.08), transparent);
  transform:translateX(-100%); transition:transform .25s;
}
.nav-a:hover { color:var(--t1); }
.nav-a:hover::before { transform:translateX(0); }
.nav-a.active {
  color:var(--acc); border-left-color:var(--acc);
  background:linear-gradient(90deg, var(--acc-dim), transparent);
  text-shadow:0 0 15px var(--acc-glow);
}
.nav-a.active::before { transform:translateX(0); }
.nav-a .ni { font-size:.9rem; width:20px; text-align:center; flex-shrink:0; }
.nav-a.active .ni { filter:drop-shadow(0 0 5px var(--acc)); }
.nbadge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:.52rem; font-weight:800; padding:2px 7px; border-radius:10px;
  box-shadow:0 0 10px rgba(248,113,113,.5);
  animation:blink 2s ease infinite;
}

/* Sidebar footer */
.sb-foot {
  padding:.9rem 1.6rem; border-top:1px solid var(--b1);
  background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.sb-status { display:flex; align-items:center; gap:.4rem; font-family:'Rajdhani',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.1em; color:var(--t3); }
.dot-green { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 2s infinite; }
.sb-time { font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--acc); text-shadow:0 0 10px var(--acc-glow); }

/* ── MAIN ───────────────────────────────────────── */
.main { flex:1; margin-left:var(--sb-w); display:flex; flex-direction:column; min-height:100vh; }

/* ── TOPBAR ─────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:100;
  height:var(--tb-h);
  background:rgba(3,5,13,.94);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--b1);
  display:flex; align-items:center; gap:.85rem; padding:0 1.5rem;
  box-shadow:0 1px 0 var(--b1), 0 4px 30px rgba(0,0,0,.4);
}
/* Animated topbar accent line */
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--acc) 25%, var(--acc) 75%, transparent 100%);
  opacity:.25;
}

/* ORSEC Banner */
.orsec-banner {
  background: repeating-linear-gradient(45deg, #180000, #180000 10px, #300000 10px, #300000 20px);
  border-bottom: 2px solid var(--red);
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 40px rgba(255,0,0,0.3);
  animation: bgSlide 2s linear infinite;
  z-index: 101; /* just above topbar content if needed */
}
@keyframes bgSlide { from{background-position:0 0;} to{background-position:28px 0;} }
.orsec-banner.hidden { display: none; }
.orsec-content {
  display: flex; align-items: center; gap: 1.25rem;
  background: rgba(0,0,0,0.6); padding: 0.75rem 1.5rem; border-radius: var(--r);
  border: 1px solid rgba(255,0,0,0.5);
}
.orsec-icon {
  font-size: 2.2rem;
  animation: blink 1s infinite alternate;
}
.orsec-texts { flex: 1; }
.orsec-title {
  font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 700;
  letter-spacing: 0.2em; color: #ff4444; margin-bottom: 0.2rem; text-shadow: 0 0 10px red;
}
.orsec-desc { font-size: 0.85rem; color: #ffbaba; line-height: 1.4; }

.ham { display:none; background:none; border:none; color:var(--t2); font-size:1.2rem; cursor:pointer; }
.topbar-breadcrumb { flex:1; display:flex; align-items:center; gap:.45rem; }
.tb-service {
  font-family:'Rajdhani',sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.16em; color:var(--acc); text-shadow:0 0 12px var(--acc-glow);
}
.tb-sep { color:var(--t3); }
.tb-page { font-size:.86rem; color:var(--t2); }
.topbar-right { display:flex; align-items:center; gap:.8rem; }

.tb-clock {
  font-family:'JetBrains Mono',monospace; font-size:.95rem;
  letter-spacing:.1em; color:var(--acc);
  text-shadow:0 0 12px var(--acc-glow);
  background:var(--acc-dim); border:1px solid var(--b1);
  border-radius:var(--r); padding:.25rem .75rem;
}
.notif-bell {
  position:relative; cursor:pointer; font-size:.92rem;
  background:var(--acc-dim); border:1px solid var(--b1);
  border-radius:var(--r); padding:.28rem .65rem; transition:all .2s;
}
.notif-bell:hover { border-color:var(--b2); box-shadow:var(--glow-acc); }
.notif-count {
  position:absolute; top:-6px; right:-8px;
  background:var(--red); color:#fff;
  font-size:.52rem; font-weight:800; border-radius:10px; padding:1px 5px;
  box-shadow:0 0 10px rgba(248,113,113,.5); min-width:16px; text-align:center;
}
.tb-user-chip {
  display:flex; align-items:center; gap:.5rem;
  background:var(--acc-dim); border:1px solid var(--b1);
  border-radius:20px; padding:.3rem .85rem; font-size:.82rem;
  transition:border-color .2s;
}
.tb-user-chip:hover { border-color:var(--b2); }
#tbAvatar {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--acc), var(--acc2));
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:.7rem; font-weight:700; color:#000;
  box-shadow:0 0 10px var(--acc-glow);
}
.btn-logout {
  background:var(--red-dim); border:1px solid rgba(248,113,113,.2);
  border-radius:var(--r); color:var(--red);
  font-family:'Rajdhani',sans-serif; font-size:.65rem; font-weight:700;
  letter-spacing:.14em; padding:.36rem .9rem; cursor:pointer; transition:all .2s;
}
.btn-logout:hover { background:rgba(248,113,113,.18); box-shadow:0 0 16px rgba(248,113,113,.2); }

/* Notifications panel */
.notif-panel {
  position:fixed; top:calc(var(--tb-h) + 8px); right:1.25rem; z-index:500;
  width:360px;
  background:rgba(6,10,22,.97); backdrop-filter:blur(24px);
  border:1px solid var(--b2); border-radius:var(--rl);
  box-shadow:var(--shadow-lg), var(--glow-acc);
  animation:slideDown .28s cubic-bezier(.22,1,.36,1);
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px) scale(.97)} to{opacity:1;transform:none} }
.notif-panel.hidden { display:none; }
.notif-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--b1);
  font-family:'Rajdhani',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.14em; color:var(--t2);
}
.notif-header button { background:none; border:none; color:var(--t3); cursor:pointer; font-size:1rem; transition:color .2s; }
.notif-header button:hover { color:var(--red); }
.notif-item {
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.65rem;
  padding:.75rem 1.1rem; border-bottom:1px solid var(--b1);
  font-size:.8rem; color:var(--t2); transition:background .15s;
}
.notif-item:hover { background:var(--acc-dim); }
.notif-item.urgent { background:var(--red-dim); }
.ni-icon { font-size:1.05rem; }
.ni-time { font-size:.62rem; color:var(--t3); white-space:nowrap; }

/* ════════════════════════════════════════════════════
   📄 PAGES
════════════════════════════════════════════════════ */
.pages { flex:1; padding:1.5rem; }
.page { display:none; animation:pageIn .35s cubic-bezier(.22,1,.36,1); }
.page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

.page-hdr {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:1.4rem; gap:1rem; flex-wrap:wrap;
}
.page-hdr.mt2 { margin-top:2rem; }
.ptitle {
  font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:700;
  letter-spacing:.05em; line-height:1.2; margin-bottom:.15rem;
  background:linear-gradient(90deg, var(--t1) 0%, var(--acc) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ptitle.sm { font-size:1rem; }
.psub { font-size:.77rem; color:var(--t3); }

/* ── HERO BANNER ────────────────────────────────── */
.hero-banner {
  position:relative; height:210px; border-radius:var(--rxl); overflow:hidden;
  margin-bottom:1.4rem; border:1px solid var(--b1);
  box-shadow:var(--shadow-card);
}
.hero-banner img { width:100%; height:100%; object-fit:cover; }
/* Dramatic gradient overlay */
.hero-ov {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(2,4,8,.92) 0%, rgba(5,10,30,.55) 50%, rgba(2,4,8,.2) 100%),
    linear-gradient(0deg, rgba(2,4,8,.6) 0%, transparent 60%);
}
/* Scan lines */
.hero-ov::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.09) 2px, rgba(0,0,0,.09) 4px);
}
/* Right decorative glow */
.hero-ov::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 100% at 80% 50%, rgba(91,156,246,.06) 0%, transparent 70%);
}
.hero-txt { position:absolute; bottom:1.6rem; left:1.85rem; }
.hero-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Rajdhani',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.24em;
  color:var(--acc); background:var(--acc-dim);
  border:1px solid var(--b2); border-radius:4px; padding:3px 12px;
  margin-bottom:.5rem; text-shadow:0 0 10px var(--acc-glow);
}
.hero-tag::before { content:'●'; font-size:.5rem; animation:blink 1.5s ease infinite; }
.hero-txt h2 {
  font-family:'Oswald',sans-serif; font-size:1.75rem; font-weight:700;
  color:var(--t1); line-height:1.1; margin-bottom:.35rem;
  text-shadow:0 4px 30px rgba(0,0,0,.9), 0 0 60px rgba(91,156,246,.1);
}
.hero-txt p { font-size:.8rem; color:rgba(255,255,255,.45); }
/* Live badge in corner */
.hero-banner::after {
  content:'⬤  LIVE'; position:absolute; top:1.1rem; right:1.1rem;
  font-family:'Rajdhani',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.1em;
  color:var(--green); background:rgba(34,211,160,.08);
  border:1px solid rgba(34,211,160,.25); border-radius:4px; padding:3px 10px;
  animation:blink 2s infinite;
}

/* ── STATS ROW ──────────────────────────────────── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.1rem; margin-bottom:1.4rem;
}
.stat-c {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.2rem 1.3rem; position:relative; overflow:hidden;
  transition:all .28s cubic-bezier(.22,1,.36,1); cursor:default;
}
/* Top accent line */
.stat-c::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity:.7;
}
/* Background glow */
.stat-c::after {
  content:''; position:absolute; top:-40%; right:-20%;
  width:100px; height:100px;
  background:radial-gradient(circle, var(--acc-dim) 0%, transparent 70%);
}
.stat-c:hover {
  border-color:var(--b2); transform:translateY(-4px);
  box-shadow:var(--shadow-card), var(--glow-acc);
}
.stat-c-icon {
  font-size:1.6rem; margin-bottom:.65rem;
  filter:drop-shadow(0 0 8px var(--acc));
}
.stat-c-val {
  font-family:'Oswald',sans-serif; font-size:1.85rem; font-weight:700;
  color:var(--acc); line-height:1;
  text-shadow:0 0 25px var(--acc-glow);
}
.stat-c-lbl { font-size:.7rem; color:var(--t2); font-family:'Rajdhani',sans-serif; margin-top:.2rem; letter-spacing:.04em; }
.stat-c-sub { font-size:.62rem; color:var(--t3); margin-top:.1rem; font-family:'Rajdhani',sans-serif; }

/* ── DASHBOARD GRID ─────────────────────────────── */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

/* ── CARDS ──────────────────────────────────────── */
.card {
  background:rgba(8,13,28,.82);
  backdrop-filter:blur(12px);
  border:1px solid var(--b1); border-radius:var(--rl); overflow:hidden;
  transition:border-color .22s, box-shadow .22s;
}
.card:hover { border-color:var(--b2); box-shadow:var(--shadow-card); }
.card-hd {
  display:flex; align-items:center; gap:.65rem;
  padding:.85rem 1.25rem;
  background:rgba(0,0,0,.28);
  border-bottom:1px solid var(--b1);
  font-family:'Rajdhani',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.16em; color:var(--t2); text-transform:uppercase;
}
.chd-icon { color:var(--acc); font-size:.95rem; filter:drop-shadow(0 0 5px var(--acc)); }
.card-bd { padding:1rem 1.25rem; }

/* Events */
.ev-item { display:flex; align-items:flex-start; gap:.65rem; padding:.48rem 0; border-bottom:1px solid var(--b1); font-size:.81rem; }
.ev-item:last-child { border-bottom:none; }
.ev-dot { width:7px; height:7px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.ev-dot.g { background:var(--acc); box-shadow:0 0 8px var(--acc); }
.ev-dot.r { background:var(--red); box-shadow:0 0 8px var(--red); }
.ev-dot.o { background:var(--orange); box-shadow:0 0 8px var(--orange); }
.ev-dot.s { background:var(--s-acc); box-shadow:0 0 8px var(--s-acc); }
.ev-dot.b { background:var(--purple); box-shadow:0 0 8px var(--purple); }
.ev-body { flex:1; line-height:1.45; color:var(--t2); }
.ev-body strong { color:var(--t1); }
.ev-time { font-size:.63rem; color:var(--t3); white-space:nowrap; font-family:'JetBrains Mono',monospace; }

/* Planning */
.plan-item { display:flex; align-items:center; gap:.7rem; padding:.48rem 0; border-bottom:1px solid var(--b1); font-size:.81rem; }
.plan-item:last-child { border-bottom:none; }
.plan-time { font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--acc); min-width:50px; text-shadow:0 0 8px var(--acc-glow); }
.plan-agents { flex:1; color:var(--t2); }
.plan-sector { font-size:.68rem; color:var(--t3); }

/* Vehicles */
.veh-item { display:flex; align-items:center; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--b1); font-size:.81rem; }
.veh-item:last-child { border-bottom:none; }
.veh-call { font-family:'Oswald',sans-serif; color:var(--acc); font-size:.9rem; min-width:72px; text-shadow:0 0 8px var(--acc-glow); }
.veh-crew { color:var(--t2); flex:1; margin:0 .75rem; }

/* Radio frequencies */
.freq-row { display:flex; align-items:center; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--b1); font-size:.81rem; }
.freq-row:last-child { border-bottom:none; }
.freq-row.sp .freq-name { color:var(--s-acc); }
.freq-name { color:var(--t2); }
.freq-val { font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--green); text-shadow:0 0 10px rgba(34,211,160,.4); }

/* ── FILTER ROW ─────────────────────────────────── */
.filter-row { display:flex; gap:.65rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.search-box {
  flex:1; min-width:200px;
  background:rgba(4,7,16,.8); border:1px solid var(--b1);
  border-radius:var(--r); color:var(--t1); font-size:.85rem; padding:.62rem .95rem;
  outline:none; transition:all .22s;
}
.search-box:focus { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-dim); }
.sel-box { padding:.62rem .95rem; min-width:150px; }

/* ── DATA TABLE ─────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:.81rem; }
.data-table th {
  background:rgba(0,0,0,.4);
  border-bottom:1px solid var(--b2);
  padding:.72rem 1rem;
  font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.14em; color:var(--t3); text-align:left; text-transform:uppercase;
  white-space:nowrap;
}
.data-table td {
  padding:.68rem 1rem; border-bottom:1px solid var(--b1);
  color:var(--t2); vertical-align:middle; transition:background .12s;
}
.data-table tbody tr:hover td { background:rgba(91,156,246,.04); }
.data-table tbody tr:nth-child(even) td { background:rgba(91,156,246,.02); }
.data-table tbody tr:nth-child(even):hover td { background:rgba(91,156,246,.05); }
.data-table tr:last-child td { border-bottom:none; }
.td-actions { display:flex; gap:.4rem; }
.tr-urgent td { background:rgba(248,113,113,.04) !important; }

/* ── BUTTONS ────────────────────────────────────── */
.btn-sm {
  background:var(--acc-dim); border:1px solid var(--b2);
  border-radius:6px; color:var(--acc);
  font-size:.7rem; font-weight:600; padding:.3rem .7rem;
  cursor:pointer; transition:all .2s;
}
.btn-sm:hover { background:rgba(91,156,246,.2); box-shadow:0 0 12px var(--acc-glow); }
.btn-sm.red { color:var(--red); border-color:rgba(248,113,113,.25); background:var(--red-dim); }
.btn-sm.red:hover { background:rgba(248,113,113,.2); box-shadow:0 0 12px rgba(248,113,113,.2); }
.btn-sm.sp { color:var(--s-acc); border-color:rgba(244,98,58,.25); background:rgba(244,98,58,.07); }
.btn-sm.sp:hover { background:rgba(244,98,58,.2); }

.btn-prim {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--g1), var(--g2));
  border:1px solid rgba(91,156,246,.3); border-radius:var(--r);
  color:var(--t1); cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.14em; padding:.7rem 1.4rem;
  transition:all .28s; white-space:nowrap;
}
.btn-prim::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(91,156,246,.14), transparent); opacity:0; transition:opacity .2s;
}
.btn-prim:hover { border-color:rgba(91,156,246,.55); transform:translateY(-2px); box-shadow:0 8px 28px rgba(91,156,246,.22); }
.btn-prim:hover::before { opacity:1; }
.btn-prim:active { transform:translateY(0); }
.btn-prim.sp { background:linear-gradient(135deg, var(--s1), var(--s2)); border-color:rgba(244,98,58,.35); }
.btn-prim.sp:hover { border-color:rgba(244,98,58,.6); box-shadow:0 8px 28px rgba(244,98,58,.2); }

.btn-sec {
  background:rgba(255,255,255,.03); border:1px solid var(--b1);
  border-radius:var(--r); color:var(--t2); cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.1em; padding:.7rem 1.4rem; transition:all .2s;
}
.btn-sec:hover { border-color:var(--b2); color:var(--t1); background:var(--acc-dim); }

.filter-btn {
  background:var(--acc-dim); border:1px solid var(--b1);
  border-radius:var(--r); color:var(--t2); cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; padding:.45rem 1.05rem; transition:all .2s;
}
.filter-btn:hover,.filter-btn.active {
  background:rgba(91,156,246,.18); border-color:var(--b3); color:var(--acc);
  box-shadow:0 0 18px var(--acc-glow);
}

/* ── BADGES ─────────────────────────────────────── */
.badge {
  display:inline-block;
  font-family:'Rajdhani',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.08em;
  padding:3px 10px; border-radius:20px;
}
.badge.green  { background:rgba(34,211,160,.1); color:var(--green); border:1px solid rgba(34,211,160,.25); }
.badge.red    { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.25); }
.badge.orange { background:var(--orange-dim); color:var(--orange); border:1px solid rgba(251,146,60,.25); }
.badge.blue   { background:var(--acc-dim); color:var(--acc); border:1px solid var(--b2); }
.badge.grey   { background:rgba(60,75,105,.15); color:var(--t3); border:1px solid rgba(60,75,105,.2); }
.badge.sp     { background:rgba(244,98,58,.1); color:var(--s-acc); border:1px solid rgba(244,98,58,.25); }
.badge.gend   { background:var(--acc-dim); color:var(--g-acc); border:1px solid var(--b2); }

/* ── PERSON CARDS ───────────────────────────────── */
.person-grid,.personnel-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem;
}
.person-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.25rem; transition:all .28s; cursor:default;
}
.person-card:hover { border-color:var(--b2); transform:translateY(-4px); box-shadow:var(--shadow-card), var(--glow-acc); }
.pc-avatar {
  width:54px; height:54px; border-radius:50%; margin:0 auto .9rem;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; color:var(--t1); border:2px solid;
}
.pc-name { font-size:.9rem; font-weight:600; text-align:center; margin-bottom:.2rem; }
.pc-dob { font-size:.68rem; color:var(--t3); text-align:center; margin-bottom:.55rem; }
.pc-tags { display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; margin-bottom:.6rem; }
.pc-notes { font-size:.72rem; color:var(--t3); text-align:center; line-height:1.5; }

.agent-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.25rem; text-align:center; transition:all .28s;
}
.agent-card:hover { border-color:var(--b2); transform:translateY(-4px); box-shadow:var(--shadow-card), var(--glow-acc); }
.ag-av {
  width:56px; height:56px; border-radius:50%; margin:0 auto .85rem;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700;
  position:relative;
}
.ag-name { font-size:.9rem; font-weight:600; margin-bottom:.15rem; }
.ag-grade { font-family:'Rajdhani',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.1em; margin-bottom:.2rem; }
.ag-role { font-size:.68rem; color:var(--t3); margin-bottom:.4rem; }
.ag-mat { font-size:.62rem; color:var(--t3); font-family:'JetBrains Mono',monospace; }
.ag-online { position:absolute; bottom:2px; right:2px; width:11px; height:11px; border-radius:50%; border:2px solid var(--panel); }
.ag-online.on  { background:var(--green); box-shadow:0 0 10px var(--green); animation:blink 2s infinite; }
.ag-online.off { background:var(--t3); }

/* ── PATROL CARDS ───────────────────────────────── */
.patrol-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.patrol-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.25rem; border-left:3px solid var(--b2); transition:all .25s;
}
.patrol-card.active { border-left-color:var(--green); }
.patrol-card.stand  { border-left-color:var(--orange); }
.patrol-card:hover { box-shadow:var(--shadow-card); border-color:var(--b2); }
.ptrl-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.ptrl-id  { font-family:'Oswald',sans-serif; font-size:.88rem; color:var(--t3); letter-spacing:.05em; }
.ptrl-agents { font-size:.85rem; color:var(--t1); font-weight:600; margin-bottom:.3rem; }
.ptrl-sector { font-size:.81rem; color:var(--t2); margin-bottom:.35rem; }
.ptrl-time { font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--t3); }
.ptrl-veh { font-size:.72rem; color:var(--t3); margin-top:.35rem; }
.ptrl-note { font-size:.7rem; color:var(--acc); margin-top:.35rem; }

/* ── AVIS ───────────────────────────────────────── */
.avis-grid { display:flex; flex-direction:column; gap:1rem; }
.avis-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.4rem; display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem; align-items:start;
  transition:all .25s;
}
.avis-card.critical { border-color:rgba(248,113,113,.3); box-shadow:0 0 25px rgba(248,113,113,.06); }
.avis-card.urgent   { border-color:rgba(251,146,60,.2); }
.avis-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); }
.avis-prio {
  font-family:'Rajdhani',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.12em;
  padding:5px 14px; border-radius:6px; min-width:90px; text-align:center;
}
.avis-prio.critical { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.3); }
.avis-prio.urgent   { background:var(--orange-dim); color:var(--orange); border:1px solid rgba(251,146,60,.25); }
.avis-name  { font-size:.95rem; font-weight:600; margin-bottom:.3rem; }
.avis-info  { font-size:.8rem; color:var(--t2); line-height:1.65; }
.avis-date  { font-size:.67rem; color:var(--t3); white-space:nowrap; font-family:'JetBrains Mono',monospace; }

/* ── ARMURERIE ──────────────────────────────────── */
.armoury-gend { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.arm-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.25rem; transition:all .28s;
}
.arm-card:hover { border-color:var(--b2); transform:translateY(-4px); box-shadow:var(--shadow-card); }
.arm-icon { font-size:2.2rem; margin-bottom:.7rem; filter:drop-shadow(0 0 8px var(--acc-glow)); }
.arm-name { font-size:.9rem; font-weight:600; margin-bottom:.1rem; }
.arm-cat  { font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.1em; color:var(--t3); margin-bottom:.8rem; }
.arm-stock { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.arm-stock-lbl { font-size:.78rem; color:var(--t2); }
.arm-stock-val { font-family:'Oswald',sans-serif; font-size:.9rem; }
.arm-bar { height:4px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
.arm-bar-fill { height:100%; border-radius:2px; transition:width .7s cubic-bezier(.22,1,.36,1); }

/* ── RAPPORTS ───────────────────────────────────── */
.rapport-list { display:flex; flex-direction:column; gap:1rem; }
.rapport-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.4rem; transition:border-color .2s;
}
.rapport-card:hover { border-color:var(--b2); }
.rapp-hdr { display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; flex-wrap:wrap; }
.rapp-num  { font-family:'Oswald',sans-serif; font-size:.88rem; color:var(--acc); text-shadow:0 0 10px var(--acc-glow); }
.rapp-type { flex:1; }
.rapp-date { font-size:.68rem; color:var(--t3); white-space:nowrap; font-family:'JetBrains Mono',monospace; }
.rapp-title { font-size:.95rem; font-weight:600; margin-bottom:.5rem; }
.rapp-meta  { display:flex; gap:1.1rem; flex-wrap:wrap; margin-bottom:.7rem; }
.rapp-meta span { font-size:.78rem; color:var(--t2); }
.rapp-meta span strong { color:var(--t1); }
.rapp-excerpt { font-size:.81rem; color:var(--t3); line-height:1.65; }

/* ── SDIS INTERVENTIONS ─────────────────────────── */
.inter-ops { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.inter-card {
  background:var(--card); border:1px solid rgba(244,98,58,.14); border-radius:var(--rl);
  padding:1.35rem; border-left:3px solid var(--s-acc); transition:all .25s;
}
.inter-card.active-int {
  border-left-color:var(--red); animation:pulseLeft 2s infinite;
  box-shadow:0 0 30px rgba(248,113,113,.07);
}
@keyframes pulseLeft { 0%,100%{border-left-color:var(--red)} 50%{border-left-color:var(--orange)} }
.int-hdr  { display:flex; align-items:center; gap:.65rem; margin-bottom:.8rem; }
.int-num  { font-family:'Oswald',sans-serif; font-size:.85rem; color:var(--s-acc); }
.int-type { font-size:.92rem; font-weight:700; margin-bottom:.3rem; }
.int-loc  { font-size:.81rem; color:var(--t2); margin-bottom:.4rem; }
.int-engins { font-size:.78rem; color:var(--t3); margin-bottom:.25rem; }
.int-time { font-size:.72rem; color:var(--t3); }

/* ── PATIENTS ───────────────────────────────────── */
.patient-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.patient-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.25rem; border-left:3px solid;
}
.patient-card.stable   { border-left-color:var(--green); }
.patient-card.serious  { border-left-color:var(--orange); }
.patient-card.critical { border-left-color:var(--red); animation:pulseLeft 2s infinite; }
.pat-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; }
.pat-id   { font-family:'Oswald',sans-serif; font-size:.82rem; color:var(--s-acc); }
.pat-name { font-size:.92rem; font-weight:700; margin-bottom:.15rem; }
.pat-age  { font-size:.74rem; color:var(--t3); margin-bottom:.55rem; }
.pat-bilan  { font-size:.79rem; color:var(--t2); line-height:1.65; margin-bottom:.55rem; }
.pat-orient { font-size:.74rem; color:var(--t3); }

/* ── ENGINS ─────────────────────────────────────── */
.engins-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.engin-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.3rem; transition:all .28s;
}
.engin-card:hover { border-color:var(--b2); transform:translateY(-4px); box-shadow:var(--shadow-card); }
.engin-icon { font-size:2.5rem; margin-bottom:.85rem; filter:drop-shadow(0 0 10px rgba(244,98,58,.35)); }
.engin-name { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:700; color:var(--s-acc); margin-bottom:.15rem; text-shadow:0 0 12px rgba(244,98,58,.3); }
.engin-full { font-size:.8rem; color:var(--t2); margin-bottom:.75rem; }
.engin-grid { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.engin-f { display:flex; flex-direction:column; }
.ef-l { font-size:.58rem; color:var(--t3); font-family:'Rajdhani',sans-serif; letter-spacing:.1em; }
.ef-v { font-size:.8rem; color:var(--t1); font-weight:500; }

/* ── GARDES ─────────────────────────────────────── */
.gardes-wrap { display:flex; flex-direction:column; gap:1rem; }
.garde-day { background:var(--card); border:1px solid var(--b1); border-radius:var(--rl); overflow:hidden; }
.garde-day-hd {
  background:rgba(0,0,0,.3); padding:.85rem 1.3rem;
  font-family:'Oswald',sans-serif; font-size:.9rem; font-weight:600; color:var(--s-acc); letter-spacing:.05em;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--b1);
}
.garde-table { width:100%; border-collapse:collapse; }
.garde-table th { background:rgba(0,0,0,.2); padding:.55rem 1rem; font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.12em; color:var(--t3); text-align:left; text-transform:uppercase; }
.garde-table td { padding:.62rem 1rem; border-bottom:1px solid var(--b1); font-size:.81rem; color:var(--t2); }
.garde-table tbody tr:hover td { background:rgba(91,156,246,.04); }
.garde-table tbody tr:last-child td { border-bottom:none; }

/* ── MATÉRIEL ───────────────────────────────────── */
.materiel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; }
.mat-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.25rem; transition:border-color .2s;
}
.mat-card:hover { border-color:var(--b2); }
.mat-icon { font-size:1.9rem; margin-bottom:.7rem; }
.mat-name { font-size:.9rem; font-weight:600; margin-bottom:.1rem; }
.mat-cat  { font-size:.7rem; color:var(--t3); margin-bottom:.75rem; }
.mat-row  { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color:var(--t2); margin-bottom:.3rem; padding-bottom:.3rem; border-bottom:1px solid var(--b1); }
.mat-row:last-child { border-bottom:none; margin-bottom:0; }
.mat-row strong { color:var(--t1); }

/* ── MAP ────────────────────────────────────────── */
.map-wrap {
  position:relative; background:var(--card); border:1px solid var(--b1);
  border-radius:var(--rl); overflow:hidden; box-shadow:var(--shadow-card);
}
#mapCanvas { display:block; width:100%; cursor:crosshair; }
.map-legend {
  position:absolute; bottom:1rem; left:1rem;
  background:rgba(3,5,13,.94); backdrop-filter:blur(12px);
  border:1px solid var(--b1); border-radius:var(--r); padding:.85rem;
  display:flex; flex-direction:column; gap:.45rem;
}
.ml-item { display:flex; align-items:center; gap:.5rem; font-size:.72rem; color:var(--t2); }
.ml-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.map-ctrl { position:absolute; top:1rem; right:1rem; display:flex; flex-direction:column; gap:.38rem; }
.mbtn {
  background:rgba(3,5,13,.94); backdrop-filter:blur(8px);
  border:1px solid var(--b1); border-radius:var(--r); color:var(--t1);
  width:36px; height:36px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:all .2s;
}
.mbtn:hover { border-color:var(--acc); color:var(--acc); box-shadow:var(--glow-acc); }
.map-coords {
  position:absolute; bottom:1rem; right:1rem;
  font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--t3);
  background:rgba(3,5,13,.9); border:1px solid var(--b1); border-radius:4px; padding:3px 9px;
}

/* ── ANNONCES ───────────────────────────────────── */
.annonces-list { display:flex; flex-direction:column; gap:1rem; }
.ann-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.4rem; display:grid; grid-template-columns:130px 1fr; gap:1.35rem;
  transition:all .22s;
}
.ann-card:hover { border-color:var(--b2); transform:translateY(-1px); }
.ann-card.urgent { border-left:3px solid var(--red); }
.ann-card.gend   { border-left:3px solid var(--g-acc); }
.ann-card.sp     { border-left:3px solid var(--s-acc); }
.ann-left { display:flex; flex-direction:column; gap:.45rem; }
.ann-type-badge {
  font-family:'Rajdhani',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.14em;
  padding:4px 10px; border-radius:6px; text-align:center;
}
.ann-type-badge.info   { background:var(--acc-dim); color:var(--acc); border:1px solid var(--b2); }
.ann-type-badge.urgent { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.25); }
.ann-type-badge.op     { background:rgba(34,211,160,.07); color:var(--green); border:1px solid rgba(34,211,160,.2); }
.ann-type-badge.event  { background:rgba(167,139,250,.1); color:var(--purple); border:1px solid rgba(167,139,250,.2); }
.ann-svc  { font-size:.68rem; color:var(--t3); }
.ann-date { font-size:.67rem; color:var(--t3); font-family:'JetBrains Mono',monospace; }
.ann-body h3 { font-size:.95rem; font-weight:700; margin-bottom:.5rem; }
.ann-body p  { font-size:.82rem; color:var(--t2); line-height:1.65; margin-bottom:.8rem; }
.ann-author  { display:flex; align-items:center; gap:.5rem; font-size:.74rem; color:var(--t3); }
.ann-av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:.65rem; font-weight:700; color:#000; }

/* ── RÈGLEMENT ──────────────────────────────────── */
.reg-layout { display:grid; grid-template-columns:180px 1fr; gap:1.25rem; }
.reg-toc {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:.95rem; position:sticky; top:calc(var(--tb-h) + 1.5rem); height:fit-content;
}
.reg-toc-title { font-family:'Rajdhani',sans-serif; font-size:.56rem; font-weight:700; letter-spacing:.24em; color:var(--t3); margin-bottom:.8rem; }
.reg-toc-a {
  display:block; padding:.45rem .65rem; font-size:.8rem; color:var(--t2);
  border-radius:6px; border-left:2px solid transparent; margin-bottom:.2rem; transition:all .2s;
}
.reg-toc-a:hover { background:var(--acc-dim); color:var(--acc); border-left-color:var(--acc); }
.reg-body { display:flex; flex-direction:column; gap:1.1rem; }
.reg-sec { background:var(--card); border:1px solid var(--b1); border-radius:var(--rl); padding:1.45rem; }
.reg-sec h3 { font-family:'Oswald',sans-serif; font-size:1rem; color:var(--acc); margin-bottom:1rem; letter-spacing:.04em; text-shadow:0 0 15px var(--acc-glow); }
.reg-sec ul { display:flex; flex-direction:column; gap:.55rem; }
.reg-sec li { font-size:.84rem; color:var(--t2); line-height:1.65; padding-left:1.2rem; position:relative; }
.reg-sec li::before { content:'›'; position:absolute; left:0; color:var(--acc); font-weight:700; }
.sanct-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.sanct-table th { background:rgba(0,0,0,.25); padding:.55rem .8rem; font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.12em; color:var(--t3); text-align:left; text-transform:uppercase; }
.sanct-table td { padding:.55rem .8rem; border-bottom:1px solid var(--b1); color:var(--t2); }
.sanct-table tr:hover td { background:var(--acc-dim); }
.sanct-table tr:last-child td { border-bottom:none; }

/* ── MODALS ─────────────────────────────────────── */
.modal-ov {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.82); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.modal-ov.open { display:flex; }
.modal {
  background:rgba(6,10,22,.98); backdrop-filter:blur(24px);
  border:1px solid var(--b2); border-radius:var(--rxl);
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg), var(--glow-acc);
  animation:modalIn .32s cubic-bezier(.22,1,.36,1);
}
.modal.modal-lg { max-width:690px; }
@keyframes modalIn { from{opacity:0;transform:scale(.92) translateY(24px)} to{opacity:1;transform:none} }
.modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem 1.45rem; border-bottom:1px solid var(--b1);
  position:sticky; top:0; background:rgba(6,10,22,.99); z-index:1;
}
.modal-hd h3 {
  font-family:'Oswald',sans-serif; font-size:1rem; font-weight:700; letter-spacing:.04em;
  background:linear-gradient(90deg, var(--acc), var(--t1));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.modal-hd button {
  background:none; border:none; color:var(--t3); cursor:pointer; font-size:1.1rem;
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.modal-hd button:hover { color:var(--red); background:var(--red-dim); }
.modal-bd { padding:1.45rem; display:flex; flex-direction:column; gap:1rem; }
.modal-ft {
  padding:1.05rem 1.45rem; border-top:1px solid var(--b1);
  display:flex; justify-content:flex-end; gap:.75rem;
  background:rgba(0,0,0,.2);
}
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.form-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.9rem; }

/* ── GAV ────────────────────────────────────────── */
.gav-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(395px,1fr)); gap:1.15rem; margin-bottom:1.35rem; }
.gav-card {
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.35rem; border-left:4px solid var(--green); transition:all .22s;
  box-shadow:var(--shadow-card);
}
.gav-card.warning  { border-left-color:var(--orange); box-shadow:0 4px 24px rgba(0,0,0,.5), 0 0 25px rgba(251,146,60,.05); }
.gav-card.critical { border-left-color:var(--red); animation:pulseLeft 1.5s infinite; box-shadow:0 4px 24px rgba(0,0,0,.5), 0 0 30px rgba(248,113,113,.08); }
.gav-card-hd { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.95rem; }
.gav-id   { font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--acc); margin-bottom:.2rem; }
.gav-name { font-size:1.05rem; font-weight:700; }
.gav-dob  { font-size:.7rem; color:var(--t3); }
.gav-timer-block { text-align:center; }
.gav-timer {
  font-family:'JetBrains Mono',monospace; font-size:1.65rem; font-weight:700;
  letter-spacing:.1em; color:var(--green);
  text-shadow:0 0 20px rgba(34,211,160,.5);
}
.gav-card.warning  .gav-timer { color:var(--orange); text-shadow:0 0 20px rgba(251,146,60,.5); }
.gav-card.critical .gav-timer { color:var(--red); text-shadow:0 0 25px rgba(248,113,113,.6); animation:blink 1s infinite; }
.gav-timer-lbl { font-family:'Rajdhani',sans-serif; font-size:.55rem; letter-spacing:.2em; color:var(--t3); margin-top:.1rem; }
.gav-progress-bar { height:5px; background:rgba(255,255,255,.04); border-radius:3px; margin-bottom:.95rem; overflow:hidden; }
.gav-progress-fill { height:100%; border-radius:3px; background:var(--green); transition:width 1s cubic-bezier(.22,1,.36,1); }
.gav-progress-fill.warning  { background:var(--orange); }
.gav-progress-fill.critical { background:var(--red); }
.gav-meta-row { display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; margin-bottom:.95rem; }
.gav-meta { display:flex; flex-direction:column; }
.gm-l { font-family:'Rajdhani',sans-serif; font-size:.57rem; letter-spacing:.12em; color:var(--t3); }
.gm-v { font-size:.82rem; color:var(--t1); font-weight:500; }
.gav-droits-row { display:flex; flex-direction:column; gap:.45rem; margin-bottom:.95rem; padding:.9rem; background:rgba(0,0,0,.22); border-radius:var(--r); border:1px solid var(--b1); }
.gav-droit  { display:flex; align-items:flex-start; gap:.55rem; }
.gd-ico { font-size:.9rem; flex-shrink:0; }
.gd-l { display:block; font-family:'Rajdhani',sans-serif; font-size:.57rem; letter-spacing:.1em; color:var(--t3); }
.gd-v { display:block; font-size:.8rem; color:var(--t1); }
.gav-auditions { margin-bottom:.95rem; }
.gav-aud-title { font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.12em; color:var(--t3); margin-bottom:.45rem; }
.gav-aud-item { display:grid; grid-template-columns:52px 90px 62px 1fr; gap:.4rem; padding:.38rem 0; border-bottom:1px solid var(--b1); font-size:.78rem; }
.gav-aud-item:last-child { border-bottom:none; }
.ga-time  { color:var(--acc); font-family:'JetBrains Mono',monospace; }
.ga-agent { color:var(--t2); font-weight:600; }
.ga-duree { color:var(--t3); }
.ga-res   { color:var(--t2); }
.gav-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.gav-legal-box {
  display:flex; gap:1.1rem; align-items:flex-start;
  background:rgba(91,156,246,.04); border:1px solid var(--b1);
  border-radius:var(--rl); padding:1.35rem; margin-bottom:1.5rem;
}
.glb-icon { font-size:1.5rem; flex-shrink:0; }
.glb-content h4 { font-family:'Oswald',sans-serif; font-size:.9rem; color:var(--acc); margin-bottom:.75rem; text-shadow:0 0 15px var(--acc-glow); }
.glb-items { display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; }
.glb-item { display:flex; flex-direction:column; }
.glb-label { font-family:'Rajdhani',sans-serif; font-size:.6rem; letter-spacing:.1em; color:var(--t3); }
.glb-val   { font-size:.82rem; color:var(--t1); }
.gav-droits-form { background:rgba(0,0,0,.2); border:1px solid var(--b1); border-radius:var(--r); padding:1.1rem; }
.gav-droits-form h4 { font-family:'Rajdhani',sans-serif; font-size:.67rem; font-weight:700; letter-spacing:.14em; color:var(--t3); margin-bottom:.85rem; }

/* ── AMENDES ────────────────────────────────────── */
.pv-result {
  display:flex; gap:2rem; align-items:center;
  background:rgba(91,156,246,.06); border:1px solid var(--b2);
  border-radius:var(--r); padding:.95rem 1.2rem;
}
.pv-amount,.pv-pts { display:flex; align-items:center; gap:.65rem; font-size:.88rem; color:var(--t2); }
.pv-amount strong { font-family:'Oswald',sans-serif; font-size:1.55rem; color:var(--green); text-shadow:0 0 18px rgba(34,211,160,.4); }
.pv-pts    strong { font-family:'Oswald',sans-serif; font-size:1.25rem; color:var(--red); text-shadow:0 0 18px rgba(248,113,113,.4); }

/* ── MESSAGERIE ─────────────────────────────────── */
.msg-layout { display:grid; grid-template-columns:290px 1fr; height:620px; background:var(--card); border:1px solid var(--b1); border-radius:var(--rl); overflow:hidden; }
.msg-sidebar { border-right:1px solid var(--b1); display:flex; flex-direction:column; }
.msg-folders { flex-shrink:0; background:rgba(0,0,0,.25); }
.msg-folder {
  display:flex; align-items:center; gap:.6rem;
  padding:.78rem 1.1rem; font-size:.83rem; color:var(--t2);
  cursor:pointer; transition:all .2s;
  border-bottom:1px solid var(--b1); border-left:2px solid transparent;
}
.msg-folder:hover { background:var(--acc-dim); color:var(--t1); }
.msg-folder.active { background:var(--acc-dim); color:var(--acc); border-left-color:var(--acc); }
.msg-unread { margin-left:auto; background:var(--red); color:#fff; font-size:.55rem; font-weight:800; padding:2px 6px; border-radius:10px; box-shadow:0 0 10px rgba(248,113,113,.4); }
.msg-list { flex:1; overflow-y:auto; }
.msg-item { padding:.7rem 1.1rem; cursor:pointer; border-bottom:1px solid var(--b1); transition:background .12s; border-left:2px solid transparent; }
.msg-item:hover  { background:var(--acc-dim); }
.msg-item.selected { background:rgba(91,156,246,.12); border-left-color:var(--acc); }
.msg-item.unread   { border-left-color:var(--acc2); }
.msg-item.urgent   { border-left-color:var(--red) !important; background:var(--red-dim); }
.mi-from { font-size:.81rem; font-weight:600; color:var(--t1); margin-bottom:.15rem; }
.mi-sub  { font-size:.78rem; color:var(--t2); margin-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-meta { display:flex; align-items:center; justify-content:space-between; }
.mi-date { font-size:.63rem; color:var(--t3); font-family:'JetBrains Mono',monospace; }
.mi-unread-dot { width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc); }
.msg-item.unread .mi-from { color:var(--acc); }
.msg-content { display:flex; flex-direction:column; overflow-y:auto; }
.msg-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:.85rem; color:var(--t3); font-size:.85rem; }
.msg-empty span { font-size:2.8rem; opacity:.3; }
.msg-view { padding:1.65rem; display:flex; flex-direction:column; height:100%; }
.mv-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; margin-bottom:1.35rem; padding-bottom:1.1rem; border-bottom:1px solid var(--b1); }
.mv-subject { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.mv-meta    { display:flex; flex-direction:column; gap:.2rem; font-size:.8rem; color:var(--t2); }
.mv-body    { flex:1; font-size:.88rem; color:var(--t2); line-height:1.78; white-space:pre-line; }
.mv-actions { display:flex; gap:.5rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--b1); }

/* ── STATISTIQUES ───────────────────────────────── */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.chart-card  { background:var(--card); border:1px solid var(--b1); border-radius:var(--rl); padding:1.2rem; }
.chart-card.chart-full { grid-column:1/-1; }
.chart-title { font-family:'Rajdhani',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.16em; color:var(--t3); text-transform:uppercase; margin-bottom:.9rem; }
.chart-legend { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.85rem; }
.chart-leg-item { display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:var(--t2); }
.chart-leg-item strong { color:var(--t1); margin-left:.25rem; }
.kpi-card {
  background:linear-gradient(135deg, rgba(11,17,32,.9), rgba(8,13,28,.95));
  border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.05rem 1.25rem; position:relative; overflow:hidden; cursor:default; transition:all .28s;
}
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--acc), transparent); opacity:.6; }
.kpi-card:hover { border-color:var(--b2); transform:translateY(-3px); box-shadow:var(--shadow-card); }
.kpi-icon { font-size:1.3rem; margin-bottom:.5rem; filter:drop-shadow(0 0 6px var(--acc)); }
.kpi-val  { font-family:'Oswald',sans-serif; font-size:1.6rem; font-weight:700; color:var(--acc); line-height:1; text-shadow:0 0 20px var(--acc-glow); }
.kpi-lbl  { font-size:.67rem; color:var(--t3); font-family:'Rajdhani',sans-serif; margin:.2rem 0; }
.kpi-delta { font-size:.7rem; font-weight:700; font-family:'Rajdhani',sans-serif; letter-spacing:.06em; }

/* ── PROCÉDURES ─────────────────────────────────── */
.proc-list { display:flex; flex-direction:column; gap:.85rem; }
.proc-card { background:var(--card); border:1px solid var(--b1); border-radius:var(--rl); overflow:hidden; transition:border-color .22s; }
.proc-card:hover { border-color:var(--b2); }
.proc-hdr  { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.35rem; cursor:pointer; transition:background .2s; }
.proc-hdr:hover { background:var(--acc-dim); }
.proc-hdr-left { display:flex; align-items:center; gap:1rem; }
.proc-icon    { font-size:1.4rem; filter:drop-shadow(0 0 6px var(--acc-glow)); }
.proc-title   { font-size:.93rem; font-weight:600; margin-bottom:.2rem; }
.proc-meta    { display:flex; align-items:center; gap:.5rem; }
.proc-chevron { font-size:1.3rem; color:var(--t3); transition:transform .3s cubic-bezier(.22,1,.36,1); flex-shrink:0; }
.proc-steps   { padding:0 1.35rem 1.35rem; border-top:1px solid var(--b1); }
.proc-ol      { padding-left:1.35rem; display:flex; flex-direction:column; gap:.58rem; margin-top:.9rem; }
.proc-ol li   { font-size:.85rem; color:var(--t2); line-height:1.68; padding-left:.25rem; }
.proc-ol li::marker { color:var(--acc); font-weight:700; }
.proc-foot    { display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--b1); font-size:.72rem; color:var(--t3); }

/* ── FORMATIONS ─────────────────────────────────── */
.training-sched { display:flex; flex-direction:column; gap:.85rem; }
.training-item  {
  display:flex; align-items:flex-start; gap:1.1rem;
  background:var(--card); border:1px solid var(--b1); border-radius:var(--rl);
  padding:1.2rem 1.35rem; transition:all .25s;
}
.training-item:hover { border-color:var(--b2); transform:translateY(-1px); }
.tr-date  { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:700; color:var(--s-acc); min-width:68px; flex-shrink:0; text-shadow:0 0 12px rgba(244,98,58,.3); }
.tr-title { font-size:.92rem; font-weight:600; margin-bottom:.45rem; }
.tr-info  { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.76rem; color:var(--t2); }
.tr-body  { flex:1; }

/* ── TOAST NOTIFICATIONS ────────────────────────── */
.toast-container { position:fixed; bottom:1.75rem; right:1.75rem; z-index:9999; display:flex; flex-direction:column; gap:.6rem; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:.75rem;
  background:rgba(6,10,22,.97); backdrop-filter:blur(24px);
  border:1px solid var(--b2); border-radius:10px;
  padding:.85rem 1.15rem; font-size:.83rem; color:var(--t1);
  box-shadow:var(--shadow-lg), var(--glow-acc);
  animation:toastSlide .38s cubic-bezier(.22,1,.36,1);
  pointer-events:all; min-width:275px; max-width:410px;
}
.toast-success { border-color:rgba(34,211,160,.35);  box-shadow:var(--shadow-lg), 0 0 20px rgba(34,211,160,.08); }
.toast-error   { border-color:rgba(248,113,113,.35); box-shadow:var(--shadow-lg), 0 0 20px rgba(248,113,113,.08); }
.toast-warning { border-color:rgba(251,146,60,.3); }
.toast-urgent  { border-color:rgba(248,113,113,.55); background:rgba(248,113,113,.08); }
.toast-info    { border-color:var(--b2); }
.toast-icon    { font-size:1.1rem; flex-shrink:0; }
.toast-exit    { animation:toastSlide .35s ease reverse forwards; }
@keyframes toastSlide { from{opacity:0;transform:translateX(24px) scale(.92)} to{opacity:1;transform:none} }

/* ── INFOS ──────────────────────────────────────── */
.info-alert {
  background: var(--acc-dim);
  border-left: 3px solid var(--acc);
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--t2);
  border-radius: 0 var(--r) var(--r) 0;
}

/* ── TAJ / DOSSIER CITOYEN  ──────────────────────────────────────── */
.taj-profil {
  display: flex; gap: 1.5rem; margin-bottom: 2rem;
}
.taj-photo {
  width: 150px; height: 180px; background: var(--bg2); border: 2px solid var(--b2);
  border-radius: var(--r); object-fit: cover; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.taj-id { flex: 1; }
.taj-name { font-family: 'Oswald', sans-serif; font-size: 2rem; margin-bottom: 0.5rem; letter-spacing: 1px; }
.taj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.taj-grid > div { background: var(--b1); padding: 0.5rem 1rem; border-radius: var(--r); border: 1px solid var(--b2); }

.permis-pts { 
  display:inline-flex; align-items:center; justify-content:center;
  width: 40px; height: 40px; background: var(--bg1); border: 2px solid var(--green); border-radius: 50%;
  font-weight: 700; font-size: 1.2rem; cursor: pointer; user-select:none; margin-left:1rem;
}
.permis-pts.low { border-color: var(--orange); color: var(--orange); }
.permis-pts.zero { border-color: var(--red); color: var(--red); }

/* ── INVESTIGATION CORKBOARD  ──────────────────────────────────────── */
.c-node {
  position: absolute; min-width: 180px; padding: 1rem;
  background: var(--bg2); border: 2px solid var(--b3);
  border-radius: var(--r); box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  cursor: grab; user-select: none; z-index: 20; color:var(--text);
  display:flex; flex-direction:column; gap:.5rem;
}
.c-node:active { cursor: grabbing; z-index: 100; opacity:0.9; }
.c-node.photo-node { padding:0; overflow:hidden; border-color:#d4af37; }
.c-node.photo-node img { width:100px; height:120px; object-fit:cover; display:block; pointer-events:none;}
.c-node-title { font-weight:600; font-size:1rem; font-family:'Rajdhani'; border-bottom:1px solid var(--b2); padding-bottom:.2rem;}
.c-node-sub { font-size:0.75rem; color:var(--t3); }

/* Connection pin styling */
.c-node::before {
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #c0392b);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.8), inset -2px -2px 4px rgba(0,0,0,0.5);
  z-index: 21;
}

/* ── MAIN COURANTE TIMELINE ─────────────────────────────────────── */
.mc-timeline { padding: 1.5rem 0; }
.fol-item { display: flex; gap: 1rem; margin-bottom: 2rem; position: relative; }
.fol-time { width: 70px; text-align: right; flex-shrink: 0; padding-top: .4rem; }
.fol-line { width: 30px; position: relative; display: flex; justify-content: center; flex-shrink: 0; }
.fol-line::before { content:''; position:absolute; top:35px; bottom:-35px; width:2px; background:var(--b3); }
.fol-item:last-child .fol-line::before { display: none; }
.fol-dot { 
  width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; 
  justify-content: center; background: var(--bg2); border: 2px solid var(--acc);
  position: relative; z-index: 2; box-shadow: 0 0 10px rgba(0,0,0,0.5); font-size: 1.2rem;
}
.fol-dot.orange { border-color: var(--orange); }
.fol-dot.grey { border-color: #666; }
.fol-dot.blue { border-color: var(--blue); }
.fol-content {
  flex: 1; background: var(--b1); border: 1px solid var(--b2); border-radius: var(--r);
  padding: 1.25rem; font-family: 'Rajdhani', sans-serif;
}
.fol-item.urgent .fol-content { border-left: 4px solid var(--red); background: rgba(255,0,0,0.03); }
.fol-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--b1); padding-bottom: .5rem; }
.fol-desc { font-family: 'Inter', sans-serif; font-size: .95rem; line-height: 1.5; color: var(--text); margin-bottom: 1rem; }
.fol-meta { display: flex; gap: 1.5rem; color: var(--t2); font-size: .85rem; margin-bottom: 1rem; }
.fol-actions { display: flex; gap: .5rem; }

/* ── MISC ───────────────────────────────────────── */
.mc-table-wrap,.veh-table-wrap { overflow-x:auto; }
.stat-c-sub { font-size:.62rem; color:var(--t3); margin-top:.12rem; font-family:'Rajdhani',sans-serif; }
.tr-urgent td { background:rgba(248,113,113,.04) !important; }
.ag-role { font-size:.68rem; color:var(--t3); margin-bottom:.35rem; }

/* ════════════════════════════════════════════════════
   📱 RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .dash-grid { grid-template-columns:1fr; }
  .reg-layout { grid-template-columns:1fr; }
  .charts-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .msg-layout { grid-template-columns:1fr; height:auto; min-height:500px; }
  .msg-sidebar { border-right:none; border-bottom:1px solid var(--b1); }
  .msg-list { max-height:200px; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .ham { display:flex; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .ann-card,.avis-card { grid-template-columns:1fr; }
  .form-row2,.form-row3 { grid-template-columns:1fr; }
  .pv-result { flex-direction:column; gap:.8rem; }
  .gav-grid { grid-template-columns:1fr; }
  .topbar-right .tb-clock { display:none; }
  .btn-logout { display:none; }
  .tb-user-chip span:last-child { display:none; }
  .charts-grid { grid-template-columns:1fr; }
}