/* --- Modern dark UI (no CDN) --- */
:root{
  --bg:#0b1020; --panel:#0f1833; --muted:#1a2447; --text:#e8f0ff; --sub:#a8b7d9;
  --accent:#6bd5ff; --accent2:#7cfab7; --danger:#ff6b6b; --warn:#ffd166;
  --good:#3ddc97; --border:#22304d; --shadow:0 10px 25px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:14px/1.45 ui-sans-serif,system-ui,Segoe UI,Arial;
  color:var(--text); background:
  radial-gradient(1200px 800px at -10% -10%, #11224a 0%, transparent 60%),
  radial-gradient(1200px 800px at 110% 110%, #0c2a33 0%, transparent 60%),
  var(--bg);
}
a{color:var(--accent); text-decoration:none}
.header{position:sticky;top:0;z-index:10;background:linear-gradient(0deg,rgba(11,16,32,.85),rgba(11,16,32,.85));backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border)}
.shell{max-width:1200px;margin:0 auto;padding:16px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--accent)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.07)); transition:.2s}
.tab.active{border-color:var(--accent); box-shadow:0 0 0 1px rgba(107,213,255,.2) inset}
main{padding:22px}
.grid{display:grid; gap:16px}
@media (min-width:900px){ .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)} }
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.08)), var(--panel);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:16px;
}
.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi h3{margin:0;font-size:13px;color:var(--sub);font-weight:600}
.kpi .num{font-size:26px;font-weight:800;letter-spacing:.3px}
.badge{padding:3px 8px;border-radius:999px;border:1px solid var(--border);color:var(--sub)}
.badge.good{color:var(--good); border-color:rgba(61,220,151,.35); background:rgba(61,220,151,.08)}
.badge.warn{color:#111;background:var(--warn)}
.badge.danger{color:#fff;background:var(--danger)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.1)); color:var(--text); cursor:pointer}
.btn.accent{border-color:rgba(107,213,255,.4); box-shadow:0 0 0 1px rgba(107,213,255,.2) inset}
.btn.danger{border-color:rgba(255,107,107,.3); background:linear-gradient(180deg,rgba(255,107,107,.15),rgba(0,0,0,.1))}
.input,select{background:var(--muted); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border); text-align:left}
.pill{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.right{margin-left:auto}
.canvas{width:100%;height:220px}
.toast{position:fixed;right:16px;bottom:16px;background:var(--panel);border:1px solid var(--border);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.25s}
.toast.show{opacity:1;transform:translateY(0)}

/* Stats boxes for cybersecurity metrics */
.stat-box{
  text-align:center;
  padding:8px;
  background:rgba(107,213,255,.05);
  border:1px solid var(--border);
  border-radius:8px;
  transition: all 0.2s ease;
}
.stat-box:hover{
  background:rgba(107,213,255,.1);
  border-color:rgba(107,213,255,.3);
}
.stat-box .num{
  font-size:24px;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}
.stat-box .label{
  font-size:11px;
  color:var(--sub);
  line-height:1.2;
}


/* Enhanced Incidents Table Styling */
.incidents-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.incidents-table thead th {
  background: rgba(107,213,255,.08);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  padding: 16px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.incidents-table tbody tr {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(34,48,77,0.3);
}

.incidents-table tbody tr:hover {
  background: rgba(107,213,255,.04);
}

.incidents-table td {
  padding: 16px 12px;
  vertical-align: top;
  line-height: 1.4;
}

/* Column-specific styling */
.incidents-table .col-when { 
  width: 140px; 
  min-width: 140px;
  font-size: 12px;
  color: var(--sub);
  white-space: nowrap;
}

.incidents-table .col-id { 
  width: 80px; 
  min-width: 80px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 11px;
}

.incidents-table .col-id a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(107,213,255,.2);
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(107,213,255,.05);
  transition: all 0.2s ease;
}

.incidents-table .col-id a:hover {
  background: rgba(107,213,255,.15);
  border-color: rgba(107,213,255,.4);
}

.incidents-table .col-device { 
  width: 120px; 
  min-width: 120px;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

.incidents-table .col-severity { 
  width: 90px; 
  min-width: 90px;
  text-align: center;
}

.incidents-table .col-categories { 
  width: 140px; 
  min-width: 140px;
}

.incidents-table .col-summary { 
  width: auto; 
  min-width: 200px;
  max-width: 400px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.incidents-table .col-actions { 
  width: 120px; 
  min-width: 120px;
  text-align: center;
}

/* Summary text styling */
.summary-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em;
  color: var(--text);
}

/* Improved pill styling */
.pill { 
  background: rgba(107,213,255,.15); 
  color: var(--accent); 
  padding: 4px 8px; 
  border-radius: 12px; 
  font-size: 10px; 
  font-weight: 600;
  margin: 2px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid rgba(107,213,255,.3);
}

.pill.category {
  background: rgba(124,250,183,.15);
  color: var(--accent2);
  border-color: rgba(124,250,183,.3);
}

.pill.action {
  background: rgba(255,209,102,.15);
  color: #eab308;
  border-color: rgba(255,209,102,.3);
}

/* Enhanced severity badges */
.badge.danger {
  background: rgba(239, 68, 68, 0.2);
  color: #ff4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  padding: 6px 10px;
}

.badge.warn {
  background: rgba(245, 158, 11, 0.2);
  color: #ff9500;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  padding: 6px 10px;
}

.badge.good {
  background: rgba(34, 197, 94, 0.2);
  color: #00cc66;
  border: 1px solid rgba(34, 197, 94, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  padding: 6px 10px;
}

#view-list, #view-table {
  display: block;
}

body[data-view="detail"] #view-list,
body[data-view="detail"] #view-table {
  display: none;
}

body[data-view="detail"] #view-detail {
  display: grid !important;
}

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

@media (max-width: 768px) {
  .grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

.detail-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:0}
.dtab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 18px;cursor:pointer;color:var(--sub);font-size:14px;font-weight:600;transition:all .15s;margin-bottom:-1px}
.dtab.active{color:var(--accent);border-bottom-color:var(--accent)}
.dtab:hover:not(.active){color:var(--text)}

.act-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.act-legend{display:flex;gap:16px;font-size:12px;color:var(--sub);margin-bottom:14px;flex-wrap:wrap}

.act-user-block{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.act-user-header{display:flex;align-items:center;padding:10px 14px;background:rgba(107,213,255,.04);border-bottom:1px solid var(--border)}
.act-user-apps{display:flex;flex-direction:column;gap:0}

.act-app-row{padding:10px 14px;border-bottom:1px solid rgba(107,213,255,.06)}
.act-app-row:last-child{border-bottom:none}
.act-row-header{display:flex;align-items:center;gap:8px}
.act-expand-btn{background:none;border:none;cursor:pointer;color:var(--sub);font-size:14px;padding:0;min-width:16px;transition:color .1s;flex-shrink:0}
.act-expand-btn:hover{color:var(--accent)}
.act-icon{font-size:15px;flex-shrink:0}
.act-name{flex:1;font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-time{font-size:13px;color:var(--text);font-weight:700;white-space:nowrap}
.act-pct{font-size:11px;font-weight:700;min-width:34px;text-align:right}
.act-bar-wrap{height:3px;background:rgba(107,213,255,.08);border-radius:2px;margin-top:8px;overflow:hidden}
.act-bar{height:100%;border-radius:2px;transition:width .4s}
.act-docs{overflow:hidden}
.act-docs-inner{max-height:200px;overflow-y:auto}

/* EDR tier badges (Tier 1 MDE / Tier 2 Native / Tier 3 Sysmon) */
.tier-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.tier-tier1 { background: rgba(16,185,129,.2); color: #10b981; }
.tier-tier2 { background: rgba(59,130,246,.2); color: #3b82f6; }
.tier-tier3 { background: rgba(107,114,126,.2); color: #9ca3af; }