/* =========================================================================
   NetSec — Dashboard Design System
   ========================================================================= */

:root{
  --bg-0:#0a0e14;
  --bg-1:#0f141c;
  --bg-2:#141a24;
  --bg-3:#1b2330;
  --border:#232c3a;
  --border-light:#2c3648;

  --text-0:#e8edf5;
  --text-1:#aab4c5;
  --text-2:#6b7688;

  --accent:#00d9a3;
  --accent-dim:#00a37a;
  --accent-glow: rgba(0,217,163,.18);

  --blue:#3b82f6;
  --purple:#8b5cf6;

  --crit:#ff4757;
  --high:#ff9f43;
  --med:#ffd93d;
  --low:#4fd1c5;

  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 24px rgba(0,0,0,.35);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:var(--font);
  background:
    radial-gradient(circle at 15% 0%, rgba(0,217,163,.06), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(139,92,246,.05), transparent 40%),
    var(--bg-0);
  color:var(--text-0);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit;}

.auth-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,217,163,.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(139,92,246,.07), transparent 40%),
    var(--bg-0);
}
.auth-card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:40px 36px;
  box-shadow:var(--shadow);
}
.auth-logo{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:8px;}
.auth-logo .mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#04140f; font-size:18px;
  box-shadow:0 0 24px var(--accent-glow);
}
.auth-logo h1{font-size:22px; font-weight:700; letter-spacing:-.02em;}
.auth-sub{text-align:center; color:var(--text-2); font-size:13px; margin-bottom:28px;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; color:var(--text-1); margin-bottom:6px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.field input, .field select{
  width:100%; padding:11px 14px;
  background:var(--bg-3); border:1px solid var(--border-light);
  border-radius:var(--radius-sm); color:var(--text-0); font-size:14px;
  transition:.15s border-color, .15s box-shadow;
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
.field-hint{font-size:11px; color:var(--text-2); margin-top:5px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius-sm); border:none;
  font-weight:600; font-size:14px; transition:.15s all;
}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-dim)); color:#04140f; width:100%;}
.btn-primary:hover{filter:brightness(1.08); box-shadow:0 4px 20px var(--accent-glow);}
.btn-outline{background:transparent; border:1px solid var(--border-light); color:var(--text-0);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-sm{padding:7px 14px; font-size:12.5px;}
.btn-danger{background:var(--crit); color:#fff;}
.btn-block{width:100%;}

.alert-box{padding:11px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:18px; border:1px solid transparent;}
.alert-error{background:rgba(255,71,87,.1); border-color:rgba(255,71,87,.3); color:#ff8a94;}
.alert-success{background:rgba(0,217,163,.1); border-color:rgba(0,217,163,.3); color:var(--accent);}
.alert-warn{background:rgba(255,159,67,.1); border-color:rgba(255,159,67,.3); color:var(--high);}

.auth-footer{text-align:center; margin-top:20px; font-size:13px; color:var(--text-2);}
.auth-footer a{color:var(--accent); font-weight:600;}
.demo-creds{margin-top:22px; padding:12px 14px; background:var(--bg-3); border:1px dashed var(--border-light); border-radius:var(--radius-sm); font-size:12px; color:var(--text-1); font-family:var(--mono);}

.app{display:flex; min-height:100vh;}

.sidebar{
  width:248px; flex-shrink:0;
  background:var(--bg-1); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 20px; border-bottom:1px solid var(--border);
}
.sidebar-brand .mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg, var(--accent), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#04140f;
  box-shadow:0 0 20px var(--accent-glow);
}
.sidebar-brand span{font-weight:700; font-size:16.5px; letter-spacing:-.02em;}

.nav-section{padding:16px 12px 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2); font-weight:700;}
.nav-list{padding:4px 10px;}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:8px; margin-bottom:2px;
  color:var(--text-1); font-size:13.5px; font-weight:500;
  transition:.12s all; position:relative;
}
.nav-item .ic{width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.nav-item:hover{background:var(--bg-3); color:var(--text-0);}
.nav-item.active{background:rgba(0,217,163,.1); color:var(--accent);}
.nav-item.active::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; background:var(--accent); border-radius:2px;
}
.nav-badge{margin-left:auto; background:var(--crit); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px;}

.sidebar-user{
  margin-top:auto; padding:16px 18px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
}
.sidebar-user .u-name{font-size:13px; font-weight:600; color:var(--text-0);}
.sidebar-user .u-role{font-size:11px; color:var(--text-2);}
.sidebar-user .logout-link{margin-left:auto; color:var(--text-2); font-size:16px;}
.sidebar-user .logout-link:hover{color:var(--crit);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid var(--border);
  background:rgba(15,20,28,.6); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:19px; font-weight:700; letter-spacing:-.02em;}
.topbar .sub{font-size:12.5px; color:var(--text-2); margin-top:2px;}
.topbar-right{display:flex; align-items:center; gap:14px;}
.icon-btn{
  width:36px; height:36px; border-radius:9px; background:var(--bg-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-1); position:relative;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent);}
.dot-badge{position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:var(--crit); border:2px solid var(--bg-1);}

.content{padding:26px 28px; flex:1;}

.stat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:24px;}
.stat-card{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; position:relative; overflow:hidden;
}
.stat-card::after{
  content:''; position:absolute; top:0; right:0; width:90px; height:90px;
  background:radial-gradient(circle, var(--accent-glow), transparent 70%);
  transform:translate(30%,-30%);
}
.stat-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.stat-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px;}
.stat-icon.green{background:rgba(0,217,163,.12); color:var(--accent);}
.stat-icon.red{background:rgba(255,71,87,.12); color:var(--crit);}
.stat-icon.orange{background:rgba(255,159,67,.12); color:var(--high);}
.stat-icon.blue{background:rgba(59,130,246,.12); color:var(--blue);}
.stat-trend{font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:20px;}
.trend-up{background:rgba(0,217,163,.12); color:var(--accent);}
.trend-down{background:rgba(255,71,87,.12); color:var(--crit);}
.stat-value{font-size:28px; font-weight:800; letter-spacing:-.02em; margin-bottom:4px;}
.stat-label{font-size:12.5px; color:var(--text-2); font-weight:500;}

.panel{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:22px; overflow:hidden;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border);}
.panel-head h3{font-size:14.5px; font-weight:700;}
.panel-head .sub{font-size:12px; color:var(--text-2); margin-top:2px;}
.panel-body{padding:20px;}
.panel-body.no-pad{padding:0;}

.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:20px;}

.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:left; padding:11px 20px; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-2); font-weight:700; border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:13px 20px; border-bottom:1px solid var(--border); color:var(--text-1); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(255,255,255,.015);}
td.strong, .cell-strong{color:var(--text-0); font-weight:600;}
.mono{font-family:var(--mono); font-size:12.5px;}

.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:capitalize;}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-critical{background:rgba(255,71,87,.12); color:var(--crit);}
.badge-high{background:rgba(255,159,67,.12); color:var(--high);}
.badge-medium{background:rgba(255,217,61,.12); color:var(--med);}
.badge-low{background:rgba(79,209,197,.12); color:var(--low);}
.badge-online{background:rgba(0,217,163,.12); color:var(--accent);}
.badge-offline{background:rgba(255,71,87,.12); color:var(--crit);}
.badge-warning{background:rgba(255,159,67,.12); color:var(--high);}
.badge-neutral{background:rgba(255,255,255,.06); color:var(--text-1);}

.action-link{color:var(--text-2); padding:5px; border-radius:6px;}
.action-link:hover{color:var(--accent); background:var(--bg-3);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.card-form{background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}

.progress{height:6px; background:var(--bg-3); border-radius:20px; overflow:hidden;}
.progress > div{height:100%; border-radius:20px;}
.progress .p-green{background:var(--accent);}
.progress .p-orange{background:var(--high);}
.progress .p-red{background:var(--crit);}

.empty-state{padding:50px 20px; text-align:center; color:var(--text-2);}
.empty-state .ic{font-size:32px; margin-bottom:10px;}

.modal-overlay{position:fixed; inset:0; background:rgba(5,8,12,.7); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-box{width:100%; max-width:480px; background:var(--bg-2); border:1px solid var(--border-light); border-radius:var(--radius); box-shadow:var(--shadow);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border);}
.modal-body{padding:20px;}
.modal-foot{padding:16px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px;}

.filters-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.filters-bar select, .filters-bar input{
  padding:9px 12px; background:var(--bg-2); border:1px solid var(--border-light);
  border-radius:8px; color:var(--text-0); font-size:13px;
}
.search-input{position:relative; flex:1; min-width:220px;}
.search-input input{width:100%; padding-left:34px;}
.search-input .ic{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-2);}

.pagination{display:flex; gap:6px; padding:16px 20px; justify-content:flex-end;}
.pagination a{padding:6px 12px; border-radius:6px; background:var(--bg-3); font-size:12.5px; color:var(--text-1); border:1px solid var(--border);}
.pagination a.active{background:var(--accent); color:#04140f; border-color:var(--accent); font-weight:700;}

.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-10{gap:10px;} .gap-14{gap:14px;}
.mb-16{margin-bottom:16px;} .mb-20{margin-bottom:20px;} .mt-10{margin-top:10px;}
.text-dim{color:var(--text-2);} .text-accent{color:var(--accent);}
.w-full{width:100%;}

code.key{background:var(--bg-3); padding:2px 8px; border-radius:5px; font-family:var(--mono); font-size:12px; border:1px solid var(--border-light);}

.scan-console{
  background:#050708; border:1px solid var(--border-light); border-radius:var(--radius-sm);
  padding:14px 16px; font-family:var(--mono); font-size:12px; color:var(--accent);
  max-height:220px; overflow-y:auto; white-space:pre-wrap; line-height:1.6;
}

@media (max-width: 1100px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
}
@media (max-width: 780px){
  .sidebar{position:fixed; left:-260px; z-index:50; transition:.2s; box-shadow:var(--shadow);}
  .sidebar.open{left:0;}
  .stat-grid{grid-template-columns:1fr;}
  .content{padding:18px;}
}