:root {--bg:#0a0a1a;--panel:#001122;--neon:#00ffea;--red: #ff3366;--success:#39ff14;--critical:#ff0040;--gold:#ffd700;--muted: #94a3b8;--glitch: #ff00ff;--top-secret: #00ff9d;--classified: #0066ff;--access-gold: #ffd700;--access-red: #ff3333;}
* {margin:0;padding:0;box-sizing:border-box;}
body,html {height:100%;background:var(--bg);color:#e0f7fa;font-family: 'Roboto Mono', monospace;overflow:hidden;}

/* Styles pour la page de connexion */
.login-page {background: radial-gradient(circle at top, #0b1a2a, #02070d);height: 100vh;display: flex;align-items: center;justify-content: center;
}
.login-box {background: rgba(5, 15, 30, 0.95);border: 1px solid rgba(127,211,255,0.3);padding: 32px;border-radius: 6px;
}
.login-box h6 {color: #7fd3ff;font-weight: 600;letter-spacing: 1px;
}
.form-control {background: transparent;border: 1px solid rgba(127,211,255,0.4);color: #7fd3ff;
}
.form-control:focus {box-shadow: none;border-color: #7fd3ff;
}
.btn-secure {background: rgba(127,211,255,0.9);color: #02070d;font-weight: 600;letter-spacing: 1px;
}
.btn-secure:hover {background: #7fd3ff;
}
.terminal {font-size: 12px;background: #02070d;border: 1px solid rgba(127,211,255,0.3);padding: 10px;height: 120px;overflow-y: auto;margin-top: 15px;color: #7fd3ff;font-family: Consolas, "Courier New", monospace;
}
.legal {font-size: 10px;color: rgba(127,211,255,0.6);margin-top: 10px;text-align: center;
}
.login-label {color: #7fd3ff;font-size: 0.85rem;margin-bottom: 5px;
}

.stat-item {padding: 6px;background: rgba(0, 0, 0, 0.3);border-radius: 6px;border: 1px solid rgba(0, 255, 234, 0.2);text-align: center;
}
.stat-value {color: var(--neon);font-size: 1rem;font-weight: bold;
}
.stat-label {font-size: 0.7rem;color: var(--muted);
}

/* Styles pour la recherche */
.hl {background-color: #ffd700; color: #000; padding: 1px 3px; border-radius: 2px; font-weight: bold;}
.search-result-item {background: rgba(0, 20, 40, 0.5);border: 1px solid rgba(0, 102, 255, 0.3);border-radius: 8px;padding: 15px;margin-bottom: 10px;transition: all 0.3s;}
.search-result-item:hover {background: rgba(0, 30, 60, 0.7);border-color: var(--neon);}
.result-db {color: var(--neon);font-weight: bold;font-size: 0.9rem;}
.result-table {color: #7fd3ff;font-size: 0.85rem;}
.result-column {color: #ffd700;font-size: 0.8rem;}
.result-value {color: #e0f7fa;font-size: 0.9rem;margin-top: 8px;padding: 10px;background: rgba(0, 0, 0, 0.3);border-radius: 5px;border-left: 3px solid var(--neon);}
.pagination-container {display: flex;justify-content: center;margin-top: 20px;}
.page-link {background: rgba(0, 20, 40, 0.7);border: 1px solid rgba(0, 255, 234, 0.3);color: var(--neon);margin: 0 2px;}
.page-link:hover {background: rgba(0, 102, 255, 0.3);border-color: var(--neon);}
.page-item.active .page-link {background: var(--neon);color: #000;border-color: var(--neon);}
.stats-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;margin-bottom: 20px;}
.stat-card {background: rgba(0, 20, 40, 0.5);border: 1px solid rgba(0, 102, 255, 0.3);border-radius: 8px;padding: 10px;text-align: center;}
.stat-card-title {color: var(--muted);font-size: 0.8rem;margin-bottom: 5px;}
.stat-card-value {color: var(--neon);font-size: 1.2rem;font-weight: bold;}

/* Styles pour le tableau de bord */
.header-top {background:#000814;padding:8px;border-bottom:1px solid var(--gold);display:flex;justify-content:space-between;}
.access-badge {background:#8b0000;color:white;padding:4px 12px;border-radius:3px;font-size:0.8rem;border:1px solid var(--gold);}
.main-header {background:rgba(0,10,30,0.95);padding:1px 20px;border-bottom:1px solid #0066ff;display:flex;justify-content:space-between;align-items:center;}
.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}
.agency-logo {width: 50px;height: 50px;background: radial-gradient(circle, #001f3f, #000814);border: 2px solid var(--classified);border-radius: 10px;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;
}
.agency-logo::after {content: "";position: absolute;width: 100%;height: 2px;background: var(--neon);animation: scan 2s linear infinite;
}
@keyframes scan {
    0% { top: 0; }
    100% { top: 100%; }
}
.agency-text {color: #7fd3ff; font-weight: 800;font-size: 1.8rem;}
.status-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:6px;background:rgba(0,20,40,0.6);border-radius:8px;border:0px solid rgba(0,102,255,0.3);}
.status-item {text-align:center;padding:6px;background:rgba(0,30,60,0.5);border:1px solid rgba(0,255,234,0.2);border-radius:5px;}
.status-value {font-size:1.2rem;font-weight:bold;color:var(--neon);text-shadow:0 0 10px currentColor;}
.main-content {padding:20px;height:calc(100vh - 100px);overflow-y:auto;}
.panel {background:var(--panel);border:1px solid rgba(0,102,255,0.3);border-radius:12px;padding:20px;box-shadow:0 4px 30px rgba(0,0,0,0.8);margin-bottom:20px;position:relative;}
.panel::before {content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);animation:pulse 3s infinite;}
@keyframes pulse {0%,100%{opacity:0.3;}50%{opacity:1;}}
.panel-title {color:var(--neon);border-bottom:1px solid rgba(0,255,234,0.3);padding-bottom:10px;margin-bottom:20px;font-weight:bold;}
.radar-container {position: relative;width: 100%;height: 280px;background: radial-gradient(circle at center, rgba(0, 30, 60, 0.9) 0%, rgba(0, 0, 20, 0.95) 70%), repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0, 255, 157, 0.03) 2px, transparent 3px);border-radius: 10px;overflow: hidden;border: 1px solid rgba(0, 255, 157, 0.3); box-shadow: inset 0 0 50px rgba(0, 255, 234, 0.1), 0 0 30px rgba(0, 255, 234, 0.2); }
.radar-canvas {width: 100%;height: 100%;image-rendering: crisp-edges;filter: drop-shadow(0 0 10px #00ff9d) drop-shadow(0 0 20px rgba(0, 255, 157, 0.3));}
#map {width:100%;height:100%;min-height:490px;border-radius:10px;}
.map-container {height:490px;border-radius:12px;overflow:hidden;border:2px solid #0066ff;box-shadow:0 0 30px rgba(0,102,255,0.4);}
.intel-terminal {background:#000;border-radius:8px;overflow:hidden;border:1px solid #ff3333;height:350px;display:flex;flex-direction:column;}
.terminal-body {flex:1;overflow-y:auto;padding:15px;background:#000;font-family:monospace;font-size:0.9rem;}
.terminal-line {margin-bottom:5px;line-height:1.3;}
.cmd{color:var(--gold);}.intel{color:var(--success);}.alert{color:var(--critical);}.sys{color:var(--neon);}
.terminal-input {background:#111;border:none;border-top:1px solid #333;padding:10px 15px;color:var(--gold);font-family:monospace;width:100%;}
.alert-banner {background:linear-gradient(90deg,#8b0000,#ff0000,#8b0000);padding:10px;text-align:center;border:2px solid var(--gold);margin:10px 0;animation:alert-pulse 1s infinite;}
@keyframes alert-pulse {0%,100%{opacity:1;}50%{opacity:0.7;}}
.control-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:15px;}
.control-btn {background:linear-gradient(45deg,#001f3f,#003366);border:1px solid #0066ff;color:white;padding:12px;border-radius:6px;text-align:center;cursor:pointer;transition:all 0.3s;}
.control-btn:hover {background:linear-gradient(45deg,#003366,#0066cc);border-color:var(--neon);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,255,234,0.3);}
.footer {position:fixed;bottom:0;left:0;right:0;background: rgba(0, 10, 30, 0.9);color: var(--muted);padding:8px;text-align:center;font-size:0.8rem;border-top:1px solid var(--classified);z-index: 1000;}
.user-profile {padding: 15px;border-radius: 8px;margin-top: 20px;}
.profile-avatar {width: 80px;height: 80px;border-radius: 40px;border: 2px solid var(--neon);object-fit: cover;margin: 0 auto 15px;display: block;background: rgba(0, 30, 60, 0.8);display: flex;align-items: center;justify-content: center;}
.profile-avatar i {font-size: 2.5rem;color: var(--neon);}
.scan-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;align-items: center;justify-content: center;z-index: 10;}
.scan-frame {width: 250px;height: 250px;border: 3px solid var(--neon);position: relative;}
.scan-line {position: absolute;width: 100%;height: 3px;background: var(--neon);box-shadow: 0 0 10px var(--neon);animation: scanline 2s linear infinite;}
@keyframes scanline {
    0% { top: 0; }
    100% { top: 100%; }
}
#qrResult {position: absolute;bottom: 20px;left: 0;right: 0;text-align: center;color: var(--success);font-weight: bold;background: rgba(0, 0, 0, 0.7);padding: 10px;margin: 0 20px;border-radius: 5px;}
.notification-form {padding: 15px;border-radius: 10px;border: 0px solid rgba(0, 102, 255, 0.3);margin-top: 15px;}
.form-label {color: var(--neon);font-size: 0.9rem;margin-bottom: 5px;}
.form-control {background: rgba(0, 10, 30, 0.9);border: 1px solid rgba(0, 255, 234, 0.2);color: #e0f7fa;}
.form-control:focus {background: rgba(0, 10, 30, 0.9);border-color: var(--neon);color: #e0f7fa;box-shadow: 0 0 0 0.2rem rgba(0, 255, 234, 0.25);}
.form-select {background: rgba(0, 10, 30, 0.9);border: 1px solid rgba(0, 255, 234, 0.2);color: #e0f7fa;}
.form-select:focus {background: rgba(0, 10, 30, 0.9);border-color: var(--neon);color: #e0f7fa;box-shadow: 0 0 0 0.2rem rgba(0, 255, 234, 0.25);}
.send-btn {background: linear-gradient(45deg, var(--classified), #0099ff);border: 1px solid var(--neon);color: white;}
.send-btn:hover {background: linear-gradient(45deg, #0099ff, var(--classified));transform: translateY(-2px);}
.error-text {
    color: #ff6b6b;
    font-size: 0.8rem;
    margin-top: 5px;
}
.terminal-modal .modal-content{background: rgba(5, 15, 30, 0.95);border:1px solid var(--muted);}
.terminal-modal .modal-header{background:var(--bg-darker);border-bottom:1px solid var(--bg-light);color:var(--primary-color);}
.terminal-modal .modal-body{padding:15px;font-family:'Roboto Mono',monospace;font-size:0.9rem;color:var(--text-light);}
.terminal-table{width:100%;border-collapse:collapse;}
.terminal-table td{padding:6px 10px;border-bottom:1px solid rgba(0,255,234,0.1);}
.terminal-prop{color:var(--cyan);}
.terminal-val{color:#ffffff;}
.search-input-container {display: flex;gap: 10px;margin-top: 15px;}
.search-input {flex: 1;}
@media (max-width: 991.98px){
  .main-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .status-grid{
    width:100%;
    margin-top:15px;
    grid-template-columns:repeat(4,1fr);
  }
}