/* ============================================
   MADISON KILLER — Dark Hacker Theme
   Phishing Takedown Operations Panel
   ============================================ */

:root {
    --bg-dark: #0a0a0f;
    --bg-card: #12121a;
    --bg-sidebar: #0d0d14;
    --bg-input: #1a1a28;
    --border: #1e1e30;
    --text: #c8c8d0;
    --text-muted: #666680;
    --text-bright: #e0e0e8;
    --green: #00ff41;
    --green-dim: #00cc33;
    --red: #ff2d55;
    --yellow: #ffd60a;
    --blue: #0a84ff;
    --purple: #bf5af2;
    --cyan: #64d2ff;
    --orange: #ff9f0a;
    --success: #30d158;
    --danger: #ff453a;
    --warning: #ffd60a;
    --info: #0a84ff;
    --shadow: 0 0 20px rgba(0,255,65,0.05);
    --glow-green: 0 0 10px rgba(0,255,65,0.3);
    --glow-red: 0 0 10px rgba(255,45,85,0.3);
    --radius: 8px;
    --sidebar-width: 260px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body { font-family:'Courier New',monospace; background:var(--bg-dark); color:var(--text); line-height:1.6; overflow-x:hidden; }
a { color:var(--green); text-decoration:none; }
a:hover { color:var(--green-dim); text-decoration:underline; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-dark); }
::-webkit-scrollbar-thumb { background:var(--green-dim); border-radius:3px; }

/* ===== LOGIN PAGE ===== */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg-dark); position:relative; }
.login-page canvas { position:fixed; top:0; left:0; z-index:0; }
.login-container { position:relative; z-index:10; width:100%; max-width:420px; padding:20px; }
.login-box { background:rgba(18,18,26,0.95); border:1px solid var(--green-dim); border-radius:var(--radius); padding:40px 30px; box-shadow:var(--glow-green); }
.login-logo { text-align:center; margin-bottom:30px; }
.skull-icon { font-size:64px; display:block; margin-bottom:10px; filter:drop-shadow(0 0 20px rgba(0,255,65,0.5)); }
.skull-icon-sm { font-size:18px; }
.skull-animation { animation:pulse-glow 2s ease-in-out infinite; }
.login-logo h1 { font-size:28px; color:var(--green); letter-spacing:4px; margin-bottom:5px; }
.login-logo .subtitle { color:var(--text-muted); font-size:12px; letter-spacing:2px; }
.login-form .form-group { margin-bottom:20px; }
.login-form label { display:block; color:var(--green-dim); margin-bottom:6px; font-size:12px; letter-spacing:1px; }
.label-icon { margin-right:5px; }
.login-footer { text-align:center; margin-top:20px; color:var(--text-muted); font-size:11px; }
.btn-login { font-size:16px; letter-spacing:3px; padding:14px; }
.form-section-title { color:var(--green); font-size:14px; letter-spacing:1px; margin-bottom:15px; border-bottom:1px solid var(--border); padding-bottom:8px; }

/* ===== GLITCH EFFECT ===== */
.glitch { position:relative; }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; }
.glitch::before { left:2px; text-shadow:-2px 0 var(--red); animation:glitch-1 2s infinite linear alternate-reverse; clip-path:inset(0 0 50% 0); }
.glitch::after { left:-2px; text-shadow:2px 0 var(--blue); animation:glitch-2 3s infinite linear alternate-reverse; clip-path:inset(50% 0 0 0); }
@keyframes glitch-1 { 0%,100%{transform:translate(0)} 20%{transform:translate(-2px,2px)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px)} }
@keyframes glitch-2 { 0%,100%{transform:translate(0)} 30%{transform:translate(3px)} 50%{transform:translate(-2px,1px)} 70%{transform:translate(1px,-2px)} }
.glitch-text { font-size:28px; color:var(--green); letter-spacing:4px; font-weight:bold; position:relative; }

/* ===== APP LAYOUT ===== */
.app-container { display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar { width:var(--sidebar-width); background:var(--bg-sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; height:100vh; z-index:100; transition:transform 0.3s; }
.sidebar-header { padding:20px; text-align:center; border-bottom:1px solid var(--border); }
.logo { display:flex; align-items:center; justify-content:center; gap:10px; }
.logo-icon { font-size:36px; filter:drop-shadow(0 0 10px rgba(0,255,65,0.5)); }
.logo-text { font-size:16px; color:var(--green); letter-spacing:3px; font-weight:bold; line-height:1.2; }
.logo-text small { font-size:20px; letter-spacing:5px; color:var(--red); }
.version { color:var(--text-muted); font-size:10px; margin-top:5px; }
.sidebar-menu { list-style:none; padding:10px 0; flex:1; overflow-y:auto; }
.sidebar-menu li a { display:flex; align-items:center; gap:10px; padding:12px 20px; color:var(--text); transition:all 0.2s; border-left:3px solid transparent; }
.sidebar-menu li a:hover { background:rgba(0,255,65,0.05); color:var(--green); text-decoration:none; border-left-color:var(--green-dim); }
.sidebar-menu li.active a { background:rgba(0,255,65,0.1); color:var(--green); border-left-color:var(--green); }
.menu-label { padding:15px 20px 5px; font-size:10px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; }
.menu-badge { background:var(--red); color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; margin-left:auto; }
.icon { font-size:16px; }
.sidebar-footer { padding:15px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.user-info { display:flex; align-items:center; gap:10px; flex:1; }
.user-avatar { width:36px; height:36px; border-radius:50%; background:var(--green-dim); color:#000; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:16px; }
.user-name { color:var(--text-bright); font-size:13px; }
.user-role { color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.logout-btn { color:var(--red); font-size:20px; text-decoration:none !important; }

/* ===== MAIN CONTENT ===== */
.main-content { margin-left:var(--sidebar-width); flex:1; min-height:100vh; display:flex; flex-direction:column; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:15px 25px; border-bottom:1px solid var(--border); background:var(--bg-card); }
.topbar-left { display:flex; align-items:center; gap:15px; }
.sidebar-toggle { background:none; border:1px solid var(--border); color:var(--text); padding:5px 10px; cursor:pointer; border-radius:4px; display:none; }
.page-title { font-size:18px; color:var(--green); letter-spacing:1px; }
.topbar-right { display:flex; align-items:center; gap:15px; position:relative; }
.notification-bell { font-size:20px; cursor:pointer; position:relative; }
.notif-badge { position:absolute; top:-5px; right:-8px; background:var(--red); color:#fff; font-size:10px; padding:1px 5px; border-radius:10px; }
.notification-dropdown { position:absolute; top:40px; right:0; width:350px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,0.5); z-index:200; }
.notif-header { display:flex; justify-content:space-between; align-items:center; padding:12px 15px; border-bottom:1px solid var(--border); }
.notif-header h3 { font-size:14px; color:var(--green); }
.notif-header a { font-size:11px; }
.notif-list { max-height:300px; overflow-y:auto; }
.notif-item { padding:12px 15px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.2s; }
.notif-item:hover { background:rgba(0,255,65,0.05); }
.notif-title { color:var(--text-bright); font-size:13px; font-weight:bold; }
.notif-message { color:var(--text-muted); font-size:12px; margin-top:3px; }
.notif-time { color:var(--text-muted); font-size:10px; margin-top:5px; }
.notif-empty { padding:20px; text-align:center; color:var(--text-muted); }
.content { padding:25px; flex:1; }

/* ===== STATS GRID ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:15px; margin-bottom:20px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; align-items:center; gap:15px; transition:all 0.3s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-icon { font-size:28px; }
.stat-value { font-size:28px; font-weight:bold; color:var(--text-bright); }
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.stat-primary { border-left:3px solid var(--blue); }
.stat-warning { border-left:3px solid var(--yellow); }
.stat-info { border-left:3px solid var(--cyan); }
.stat-success { border-left:3px solid var(--success); }
.stat-danger { border-left:3px solid var(--danger); }
.stat-purple { border-left:3px solid var(--purple); }
.stat-secondary { border-left:3px solid var(--text-muted); }
.stat-cyan { border-left:3px solid var(--cyan); }

/* ===== CARDS ===== */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:20px; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; border-bottom:1px solid var(--border); }
.card-header h3 { font-size:14px; color:var(--green); letter-spacing:1px; }
.card-body { padding:20px; }
.card-danger { border-color:var(--red); }
.card-danger .card-header { background:rgba(255,45,85,0.1); }
.card-warning { border-color:var(--yellow); }
.card-warning .card-header { background:rgba(255,214,10,0.1); }
.card-purple { border-color:var(--purple); }
.card-purple .card-header { background:rgba(191,90,242,0.1); }

/* ===== TABLES ===== */
.table { width:100%; border-collapse:collapse; }
.table th { padding:10px 12px; text-align:left; color:var(--green-dim); font-size:11px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); background:rgba(0,255,65,0.03); }
.table td { padding:10px 12px; border-bottom:1px solid rgba(30,30,48,0.5); font-size:13px; }
.table tbody tr:hover { background:rgba(0,255,65,0.03); }
.table-sm td,.table-sm th { padding:6px 8px; font-size:12px; }
.domain-text { color:var(--cyan); font-weight:bold; }
.hash-text { font-family:monospace; font-size:11px; color:var(--text-muted); }
.row-highlight { background:rgba(255,214,10,0.05) !important; border-left:3px solid var(--yellow); }
.row-down { background:rgba(255,45,85,0.05) !important; }

/* ===== BADGES ===== */
.badge { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:bold; display:inline-block; }
.badge-success { background:rgba(48,209,88,0.15); color:var(--success); }
.badge-danger { background:rgba(255,69,58,0.15); color:var(--danger); }
.badge-warning { background:rgba(255,214,10,0.15); color:var(--warning); }
.badge-info { background:rgba(10,132,255,0.15); color:var(--info); }
.badge-purple { background:rgba(191,90,242,0.15); color:var(--purple); }
.badge-secondary { background:rgba(102,102,128,0.15); color:var(--text-muted); }
.badge-sm { font-size:9px; padding:2px 6px; }

/* ===== BUTTONS ===== */
.btn { padding:8px 18px; border:none; border-radius:var(--radius); cursor:pointer; font-family:inherit; font-size:13px; font-weight:bold; letter-spacing:0.5px; transition:all 0.2s; display:inline-block; text-align:center; }
.btn:hover { transform:translateY(-1px); text-decoration:none; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-success { background:var(--success); color:#000; }
.btn-danger { background:var(--danger); color:#fff; box-shadow:var(--glow-red); }
.btn-warning { background:var(--warning); color:#000; }
.btn-info { background:var(--cyan); color:#000; }
.btn-outline { background:transparent; border:1px solid var(--green-dim); color:var(--green); }
.btn-outline:hover { background:rgba(0,255,65,0.1); }
.btn-secondary { background:var(--text-muted); color:#fff; }
.btn-block { display:block; width:100%; }
.btn-lg { padding:14px 24px; font-size:16px; letter-spacing:2px; }
.btn-sm { padding:4px 10px; font-size:11px; }
.btn-group-sm { display:flex; gap:5px; flex-wrap:wrap; }
.btn-group-vertical { display:flex; flex-direction:column; gap:5px; }

/* ===== FORMS ===== */
.form-control { width:100%; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-bright); font-family:inherit; font-size:13px; transition:border-color 0.2s; }
.form-control:focus { outline:none; border-color:var(--green-dim); box-shadow:var(--glow-green); }
.form-control-lg { padding:14px 18px; font-size:16px; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; color:var(--text); margin-bottom:6px; font-size:12px; }
.form-group small { display:block; margin-top:4px; color:var(--text-muted); font-size:11px; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ff41' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
textarea.form-control { resize:vertical; min-height:80px; }
.checkbox-group { display:flex; flex-wrap:wrap; gap:12px; }
.checkbox-label { display:flex; align-items:center; gap:5px; cursor:pointer; padding:6px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); font-size:12px; transition:all 0.2s; }
.checkbox-label:hover { border-color:var(--green-dim); }
.checkbox-label input:checked + span,.checkbox-label:has(input:checked) { color:var(--green); }
.inline-form { display:inline; }
.filter-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.filter-group { display:flex; gap:5px; }
.filter-info { color:var(--text-muted); font-size:12px; margin-left:auto; }
.filters { display:flex; align-items:center; margin-bottom:15px; gap:10px; }

/* ===== LAYOUT ===== */
.row { display:flex; gap:20px; flex-wrap:wrap; }
.col-4 { flex:0 0 calc(33.33% - 14px); }
.col-5 { flex:0 0 calc(41.66% - 10px); }
.col-6 { flex:0 0 calc(50% - 10px); }
.col-7 { flex:0 0 calc(58.33% - 10px); }
.col-8 { flex:0 0 calc(66.66% - 14px); }
.mt-10 { margin-top:10px; }
.mt-20 { margin-top:20px; }
.mb-10 { margin-bottom:10px; }
.mb-20 { margin-bottom:20px; }
.text-center { text-align:center; }
.text-muted { color:var(--text-muted); }
.text-sm { font-size:11px; }
.section-title { color:var(--green); font-size:16px; letter-spacing:1px; margin-bottom:15px; }

/* ===== ALERTS ===== */
.alert { padding:12px 18px; border-radius:var(--radius); margin-bottom:15px; font-size:13px; border:1px solid; }
.alert-success { background:rgba(48,209,88,0.1); border-color:var(--success); color:var(--success); }
.alert-danger { background:rgba(255,69,58,0.1); border-color:var(--danger); color:var(--danger); }
.alert-warning { background:rgba(255,214,10,0.1); border-color:var(--warning); color:var(--warning); }
.alert-info { background:rgba(10,132,255,0.1); border-color:var(--info); color:var(--info); }

/* ===== PAGINATION ===== */
.pagination { display:flex; gap:5px; margin-top:15px; justify-content:center; }
.page-link { padding:6px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:12px; }
.page-link.active,.page-link:hover { background:var(--green-dim); color:#000; border-color:var(--green); text-decoration:none; }

/* ===== REPORT TEMPLATES ===== */
.report-template-card { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; }
.tmpl-header { display:flex; align-items:center; gap:15px; padding:12px 18px; cursor:pointer; background:rgba(0,255,65,0.03); transition:background 0.2s; }
.tmpl-header:hover { background:rgba(0,255,65,0.08); }
.tmpl-header h4 { flex:1; color:var(--text-bright); font-size:14px; }
.tmpl-method { color:var(--text-muted); font-size:11px; }
.tmpl-body { padding:18px; border-top:1px solid var(--border); }
.report-textarea { font-family:monospace; font-size:12px; background:var(--bg-dark); color:var(--green); }
.guide-box { background:rgba(10,132,255,0.05); border:1px solid rgba(10,132,255,0.2); border-radius:var(--radius); padding:15px; margin-top:10px; }
.guide-box h5 { color:var(--blue); margin-bottom:8px; }
.guide-steps { padding-left:20px; }
.guide-steps li { margin-bottom:6px; color:var(--text); font-size:12px; }

/* ===== TERMINAL OUTPUT ===== */
.terminal-output { background:#000; color:var(--green); padding:15px; border-radius:var(--radius); font-family:'Courier New',monospace; font-size:12px; line-height:1.8; overflow-x:auto; white-space:pre-wrap; max-height:400px; overflow-y:auto; border:1px solid var(--green-dim); }

/* ===== MONITORING ===== */
.monitor-status { display:flex; gap:20px; align-items:center; padding:10px 0; }
.status-indicator { padding:5px 15px; border-radius:20px; font-weight:bold; font-size:14px; }
.status-up { background:rgba(48,209,88,0.15); color:var(--success); }
.status-down { background:rgba(255,69,58,0.15); color:var(--danger); animation:pulse 1s infinite; }
.monitor-timeline { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.timeline-item { padding:5px 10px; border-radius:4px; font-size:11px; display:flex; gap:8px; }
.timeline-up { background:rgba(48,209,88,0.1); }
.timeline-down { background:rgba(255,69,58,0.1); }
.http-code { padding:2px 8px; border-radius:4px; font-size:11px; font-weight:bold; }
.http-2 { background:rgba(48,209,88,0.15); color:var(--success); }
.http-3 { background:rgba(255,159,10,0.15); color:var(--orange); }
.http-4,.http-0 { background:rgba(255,69,58,0.15); color:var(--danger); }
.http-5 { background:rgba(191,90,242,0.15); color:var(--purple); }

/* ===== PERFORMANCE ===== */
.perf-item { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.perf-label { color:var(--text-muted); font-size:12px; }
.perf-value { color:var(--text-bright); font-weight:bold; }

/* ===== PERIOD TABS ===== */
.period-tabs { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.period-custom { display:flex; gap:8px; align-items:center; margin-left:auto; }
.period-custom span { color:var(--text-muted); }

/* ===== MODAL ===== */
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-content { background:var(--bg-card); border:1px solid var(--green-dim); border-radius:var(--radius); padding:30px; max-width:450px; width:90%; box-shadow:var(--glow-green); }
.modal-content h3 { color:var(--green); margin-bottom:20px; }

/* ===== REQUEST DETAIL ===== */
.detail-header { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.detail-meta h2 { color:var(--cyan); font-size:20px; margin-bottom:10px; }
.meta-row { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:5px; color:var(--text-muted); font-size:12px; }
.action-buttons-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.info-list { list-style:none; padding:0; }
.info-list li { padding:6px 0; border-bottom:1px solid var(--border); color:var(--text-muted); font-size:12px; }
.info-list li::before { content:'→ '; color:var(--green); }

/* ===== TAKEDOWN ANIMATION ===== */
.takedown-animation { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); z-index:10000; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.3s; }
.anim-content { text-align:center; }
.hacker-icon-large { font-size:120px; animation:pulse-glow 1s infinite; display:block; margin-bottom:20px; }
.domain-sent { color:var(--cyan); font-size:20px; margin:15px 0; font-weight:bold; letter-spacing:2px; }
.anim-message { color:var(--green); font-size:18px; letter-spacing:1px; }
.cyber-lines { margin-top:20px; }
.cyber-lines .line { height:2px; background:linear-gradient(90deg, transparent, var(--green), transparent); margin:5px auto; animation:scanline 2s infinite; }
.cyber-lines .line:nth-child(1) { width:200px; animation-delay:0s; }
.cyber-lines .line:nth-child(2) { width:300px; animation-delay:0.3s; }
.cyber-lines .line:nth-child(3) { width:150px; animation-delay:0.6s; }

/* ===== POPUP NOTIFICATIONS ===== */
#popupContainer { position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:400px; }
.popup-notification { background:var(--bg-card); border:1px solid var(--green); border-radius:var(--radius); padding:18px; animation:slideIn 0.4s ease-out; box-shadow:var(--glow-green), 0 10px 30px rgba(0,0,0,0.5); position:relative; }
.popup-notification.popup-danger { border-color:var(--red); box-shadow:var(--glow-red); }
.popup-title { color:var(--green); font-weight:bold; margin-bottom:5px; }
.popup-danger .popup-title { color:var(--red); }
.popup-message { color:var(--text); font-size:12px; }
.popup-close { position:absolute; top:8px; right:12px; color:var(--text-muted); cursor:pointer; font-size:16px; }

/* ===== BLINK ===== */
.blink { animation:blink 1s infinite; }
.blink-border { animation:blink-border 1s infinite; }
.pulse { animation:pulse 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes blink-border { 0%,100%{border-color:var(--yellow)} 50%{border-color:transparent} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes pulse-glow { 0%,100%{filter:drop-shadow(0 0 10px rgba(0,255,65,0.5))} 50%{filter:drop-shadow(0 0 30px rgba(0,255,65,0.8))} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideIn { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes scanline { 0%{opacity:0.3} 50%{opacity:1} 100%{opacity:0.3} }

/* ===== CANVAS CHART ===== */
canvas { max-width:100%; }

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .sidebar-toggle { display:block; }
    .main-content { margin-left:0; }
    .row { flex-direction:column; }
    .col-4,.col-5,.col-6,.col-7,.col-8 { flex:0 0 100%; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    .action-buttons-grid { grid-template-columns:1fr; }
    .filter-form { flex-direction:column; }
}
@media(max-width:480px) {
    .stats-grid { grid-template-columns:1fr; }
    .content { padding:15px; }
}