/* ── Foyl NGFW — Stylesheet ── */
:root {
  --blue:#00AEEF; --cyan:#00D4FF; --teal:#00897B; --ocean:#005F87;
  --grad:linear-gradient(135deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);
  --bg:#111009; --bg2:#161410; --surf:#1E1B15; --surf2:#262219; --surf3:#302C22;
  --border:rgba(255,245,210,.07); --border2:rgba(255,245,210,.13);
  --tx:#ECE6D6; --tx2:#B8AFA0; --tx3:#706860;
  --danger:#C45A50; --warn:#C4942A; --ok:#00897B;
  --crit:#FC4444; --high:#E07B39; --med:#C4942A; --low:#7AB648; --info:#8B9BB4;
  --purple:#8B5CF6;
  --font:'Outfit',sans-serif; --mono:'DM Mono',monospace; --jakarta:'Plus Jakarta Sans',sans-serif;

  /* action colors */
  --allow:#00897B; --deny:#C4942A; --drop:#C45A50;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--tx); font-family:var(--font); font-weight:300; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surf3); border-radius:3px; }

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }
@keyframes slide-in { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }

/* ── TOPBAR ── */
#topbar {
  position:fixed; top:0; left:0; right:0; z-index:200; height:48px;
  background:rgba(17,16,9,.96); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 16px; gap:0;
}
.tb-logo { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tb-logo img { height:16px; }
.tb-product { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); background:rgba(0,174,239,.1); border:1px solid rgba(0,174,239,.2); padding:2px 8px; border-radius:3px; }
.tb-sep { width:1px; height:18px; background:var(--border2); margin:0 14px; flex-shrink:0; }
.tb-instance { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; color:var(--tx2); }
.tb-instance-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 3s infinite; flex-shrink:0; }
.tb-instance-ha { font-size:9px; color:var(--ok); background:rgba(0,137,123,.12); border:1px solid rgba(0,137,123,.25); padding:2px 7px; border-radius:3px; font-family:var(--mono); letter-spacing:.08em; }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.tb-stat { font-family:var(--mono); font-size:10px; color:var(--tx3); display:flex; align-items:center; gap:5px; }
.tb-stat-val { color:var(--tx); font-weight:400; }
.tb-clock { font-family:var(--mono); font-size:11px; color:var(--tx2); letter-spacing:.04em; }
.tb-threat-db { font-family:var(--mono); font-size:9px; color:var(--tx3); display:flex; align-items:center; gap:4px; }
.tb-threat-db-dot { width:5px; height:5px; border-radius:50%; background:var(--ok); }

/* ── APP BODY ── */
#app-body { display:flex; padding-top:48px; height:100vh; overflow:hidden; }

/* ── SIDEBAR ── */
#sidebar {
  width:220px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto; height:100%;
}
.sb-section { padding:8px 0; }
.sb-divider { height:1px; background:var(--border); margin:4px 0; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 16px;
  font-size:13px; color:var(--tx3); cursor:pointer; transition:all .15s;
  text-decoration:none; white-space:nowrap; position:relative; font-weight:400;
}
.nav-item:hover { background:var(--surf); color:var(--tx2); }
.nav-item.active { color:var(--blue); background:rgba(0,174,239,.08); }
.nav-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--blue); border-radius:0 2px 2px 0; }
.nav-item svg { flex-shrink:0; opacity:.7; }
.nav-item.active svg { opacity:1; }
.nav-badge { margin-left:auto; font-family:var(--mono); font-size:9px; background:rgba(252,68,68,.1); color:var(--crit); border:1px solid rgba(252,68,68,.25); padding:1px 6px; border-radius:10px; }
.sb-footer { margin-top:auto; padding:12px 16px; border-top:1px solid var(--border); }
.sb-device { font-family:var(--mono); font-size:9px; color:var(--tx3); letter-spacing:.06em; }
.sb-model { font-size:11px; color:var(--tx2); margin-top:2px; }
.sb-version { font-family:var(--mono); font-size:9px; color:var(--tx3); margin-top:2px; }

/* ── MAIN ── */
#main { flex:1; overflow-y:auto; min-width:0; }
.page { padding:24px 28px 48px; max-width:1600px; }
.page-header { margin-bottom:20px; }
.breadcrumb { font-family:var(--mono); font-size:9px; color:var(--tx3); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.bc-sep { opacity:.4; }
.page-title { font-family:var(--jakarta); font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--tx); }
.page-sub { font-size:11px; color:var(--tx3); margin-top:3px; }

/* ── STAT STRIP ── */
.stat-strip { display:flex; background:var(--surf); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:20px; }
.ss-item { flex:1; padding:12px 18px; border-right:1px solid var(--border); }
.ss-item:last-child { border-right:none; }
.ss-val { font-family:var(--jakarta); font-size:22px; font-weight:600; color:var(--tx); line-height:1; margin-bottom:3px; }
.ss-label { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); }
.ss-sub { font-size:10px; color:var(--tx3); margin-top:2px; }

/* ── CARDS / GRID ── */
.dash-grid { display:grid; grid-template-columns:1fr 340px; gap:16px; margin-bottom:16px; }
.dash-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px; }
.dash-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.card { background:var(--surf); border:1px solid var(--border); border-radius:8px; padding:16px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title { font-size:12px; font-weight:500; color:var(--tx); }
.card-meta { font-family:var(--mono); font-size:9px; color:var(--tx3); }
.card-meta-link { font-family:var(--mono); font-size:9px; color:var(--blue); text-decoration:none; }
.card-meta-link:hover { text-decoration:underline; }

/* ── THROUGHPUT CHART ── */
.chart-wrap { display:flex; flex-direction:column; gap:0; flex:1; min-height:0; }
.chart-bars-wrap { display:flex; gap:3px; align-items:flex-end; flex:1; min-height:80px; }
.chart-col { display:flex; flex-direction:column; align-items:center; gap:1px; flex:1; height:100%; justify-content:flex-end; }
.bar-in { width:100%; background:rgba(0,174,239,.5); border-radius:2px 2px 0 0; transition:opacity .15s; cursor:pointer; }
.bar-out { width:100%; background:rgba(0,137,123,.4); border-radius:2px 2px 0 0; transition:opacity .15s; cursor:pointer; }
.bar-in.spike { background:rgba(252,68,68,.55); }
.bar-out.spike { background:rgba(196,148,42,.55); }
.bar-in.dimmed,.bar-out.dimmed { opacity:.25; }
.bar-in:hover,.bar-out:hover { filter:brightness(1.3); }
.chart-x { position:relative; height:16px; margin-top:4px; font-family:var(--mono); font-size:9px; color:var(--tx3); }
.chart-x span { position:absolute; white-space:nowrap; }
.chart-legend { display:flex; gap:14px; margin-top:8px; }
.chart-legend-item { display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; color:var(--tx3); }
.chart-card { display:flex; flex-direction:column; }

/* ── TOP APPS ── */
.app-list { display:flex; flex-direction:column; gap:8px; }
.app-row { display:flex; align-items:center; gap:10px; }
.app-name { font-family:var(--mono); font-size:10px; color:var(--tx2); min-width:120px; }
.app-bar-wrap { flex:1; height:4px; background:var(--surf2); border-radius:2px; overflow:hidden; }
.app-bar { height:100%; border-radius:2px; }
.app-sessions { font-family:var(--mono); font-size:9px; color:var(--tx3); min-width:52px; text-align:right; }

/* ── SEVERITY BADGES ── */
.sev-badge { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:3px; white-space:nowrap; flex-shrink:0; }
.sev-crit  { color:var(--crit);  background:rgba(252,68,68,.12);  border:1px solid rgba(252,68,68,.25); }
.sev-high  { color:var(--high);  background:rgba(224,123,57,.12); border:1px solid rgba(224,123,57,.25); }
.sev-med   { color:var(--med);   background:rgba(196,148,42,.12); border:1px solid rgba(196,148,42,.25); }
.sev-low   { color:var(--low);   background:rgba(122,182,72,.12); border:1px solid rgba(122,182,72,.25); }
.sev-info  { color:var(--info);  background:rgba(139,155,180,.1); border:1px solid rgba(139,155,180,.2); }

/* ── ACTION BADGES ── */
.act-badge { font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:3px; white-space:nowrap; }
.act-allow { color:var(--ok);   background:rgba(0,137,123,.12); border:1px solid rgba(0,137,123,.25); }
.act-deny  { color:var(--warn); background:rgba(196,148,42,.12); border:1px solid rgba(196,148,42,.25); }
.act-drop  { color:var(--danger);background:rgba(196,90,80,.12); border:1px solid rgba(196,90,80,.25); }

/* ── ZONE TAGS ── */
.zone-tag { font-family:var(--mono); font-size:9px; padding:1px 6px; border-radius:3px; border:1px solid var(--border2); color:var(--tx3); white-space:nowrap; }
.zone-External   { color:#E07B39; border-color:rgba(224,123,57,.3); background:rgba(224,123,57,.07); }
.zone-Internal   { color:var(--blue); border-color:rgba(0,174,239,.25); background:rgba(0,174,239,.06); }
.zone-DMZ        { color:#8B5CF6; border-color:rgba(139,92,246,.25); background:rgba(139,92,246,.07); }
.zone-SCADA      { color:var(--warn); border-color:rgba(196,148,42,.3); background:rgba(196,148,42,.07); }
.zone-Management { color:var(--tx3); border-color:var(--border2); background:var(--surf2); }
.zone-VPN        { color:var(--ok); border-color:rgba(0,137,123,.25); background:rgba(0,137,123,.06); }

/* ── TABLES ── */
.fw-table { width:100%; border-collapse:collapse; font-size:11px; }
.fw-table th { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; background:var(--bg2); font-weight:400; }
.fw-table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--tx2); vertical-align:middle; }
.fw-table tr:last-child td { border-bottom:none; }
.fw-table tr:hover td { background:rgba(255,245,210,.02); }
.fw-table .mono { font-family:var(--mono); font-size:10px; }
.fw-table .ip { font-family:var(--mono); font-size:10px; color:var(--tx2); }

/* ── TRAFFIC ROW STATUS DOT ── */
.status-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.status-dot.up   { background:var(--ok); }
.status-dot.down { background:var(--danger); }
.status-dot.degraded { background:var(--warn); }

/* ── THREAT CARDS ── */
.threat-list { display:flex; flex-direction:column; gap:6px; }
.threat-row {
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  background:var(--bg2); border:1px solid var(--border); border-radius:6px;
  cursor:pointer; transition:border-color .12s;
}
.threat-row:hover { border-color:var(--border2); }
.threat-row.expanded { border-color:var(--border2); }
.threat-row-left { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.threat-row-body { flex:1; min-width:0; }
.threat-name { font-size:12px; font-weight:500; color:var(--tx); margin-bottom:4px; }
.threat-meta { font-family:var(--mono); font-size:9px; color:var(--tx3); display:flex; flex-wrap:wrap; gap:8px; }
.threat-detail { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:11px; color:var(--tx2); line-height:1.6; display:none; }
.threat-row.expanded .threat-detail { display:block; }
.threat-siem-link { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9px; color:var(--blue); margin-top:8px; }

/* ── POLICY TABLE ── */
.policy-table { width:100%; border-collapse:collapse; font-size:11px; }
.policy-table th { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; background:var(--bg2); font-weight:400; white-space:nowrap; }
.policy-table td { padding:0; border-bottom:1px solid var(--border); }
.policy-row-header { display:flex; align-items:center; gap:0; padding:8px 10px; cursor:pointer; transition:background .1s; gap:8px; }
.policy-row-header:hover { background:rgba(255,245,210,.02); }
.policy-num { font-family:var(--mono); font-size:10px; color:var(--tx3); min-width:28px; }
.policy-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.policy-dot.disabled { background:var(--tx3); }
.policy-name { font-size:11px; font-weight:500; color:var(--tx); min-width:220px; flex:0 0 auto; }
.policy-zones { display:flex; gap:4px; flex-wrap:nowrap; min-width:160px; }
.policy-addrs { font-family:var(--mono); font-size:9px; color:var(--tx3); min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.policy-apps { font-family:var(--mono); font-size:9px; color:var(--tx3); min-width:100px; }
.policy-hits { font-family:var(--mono); font-size:10px; color:var(--tx2); min-width:80px; text-align:right; }
.policy-body { display:none; padding:14px 16px 16px; border-top:1px solid var(--border); background:var(--bg2); }
.policy-row.expanded .policy-body { display:block; }
.policy-row.expanded .policy-row-header { background:rgba(255,245,210,.02); }
.policy-body-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:12px; }
.pb-label { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); margin-bottom:5px; }
.pb-val { font-size:11px; color:var(--tx2); font-family:var(--mono); }
.pb-val.desc { font-family:var(--font); font-size:12px; line-height:1.6; color:var(--tx2); }
.pb-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.pb-tag { font-family:var(--mono); font-size:9px; color:var(--tx3); background:var(--surf3); border:1px solid var(--border); padding:1px 6px; border-radius:3px; }
.policy-chevron { margin-left:auto; color:var(--tx3); transition:transform .15s; }
.policy-row.expanded .policy-chevron { transform:rotate(90deg); }

/* ── TRAFFIC SEARCH ── */
.trf-search-row { display:flex; gap:10px; margin-bottom:12px; align-items:center; }
.trf-searchbar { display:flex; align-items:center; gap:8px; flex:1; background:var(--surf2); border:1px solid var(--border); border-radius:6px; padding:7px 12px; }
.trf-searchbar input { flex:1; background:none; border:none; outline:none; font-family:var(--mono); font-size:11px; color:var(--tx); }
.trf-searchbar input::placeholder { color:var(--tx3); }
.trf-btn { font-family:var(--mono); font-size:10px; padding:7px 14px; border-radius:5px; border:1px solid var(--border2); background:var(--surf2); color:var(--tx2); cursor:pointer; transition:all .12s; white-space:nowrap; }
.trf-btn:hover { background:var(--surf3); color:var(--tx); }
.trf-btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.trf-btn.primary:hover { background:#00C5FF; }
.trf-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; min-height:0; }
.trf-chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; color:var(--tx2); background:var(--surf2); border:1px solid var(--border2); padding:3px 8px; border-radius:4px; }
.trf-chip-remove { background:none; border:none; color:var(--tx3); cursor:pointer; padding:0; font-size:12px; line-height:1; display:flex; align-items:center; }
.trf-chip-remove:hover { color:var(--tx); }

/* ── FILTER PILLS ── */
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.fpill { font-family:var(--mono); font-size:9px; letter-spacing:.06em; padding:4px 10px; border-radius:4px; border:1px solid var(--border2); color:var(--tx3); cursor:pointer; transition:all .12s; }
.fpill:hover { color:var(--tx2); border-color:var(--border2); background:var(--surf2); }
.fpill.active { color:var(--tx); background:var(--surf2); border-color:var(--border2); }
.fpill.act-crit { color:var(--crit); border-color:rgba(252,68,68,.3); background:rgba(252,68,68,.07); }
.fpill.act-high { color:var(--high); border-color:rgba(224,123,57,.3); background:rgba(224,123,57,.07); }
.fpill.act-med  { color:var(--med);  border-color:rgba(196,148,42,.3); background:rgba(196,148,42,.07); }
.fpill.act-allow-f { color:var(--ok); border-color:rgba(0,137,123,.3); background:rgba(0,137,123,.07); }
.fpill.act-deny-f  { color:var(--warn); border-color:rgba(196,148,42,.3); background:rgba(196,148,42,.07); }
.fpill.act-drop-f  { color:var(--danger); border-color:rgba(196,90,80,.3); background:rgba(196,90,80,.07); }

/* ── NETWORK PAGE ── */
.tab-bar { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.tab-btn { font-size:12px; color:var(--tx3); padding:8px 16px; cursor:pointer; border-bottom:2px solid transparent; transition:all .12s; background:none; border-top:none; border-left:none; border-right:none; }
.tab-btn:hover { color:var(--tx2); }
.tab-btn.active { color:var(--tx); border-bottom-color:var(--blue); }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ── INTERFACE CARDS ── */
.iface-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.iface-card { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
.iface-card-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.iface-name { font-family:var(--mono); font-size:11px; font-weight:500; color:var(--tx); }
.iface-type { font-family:var(--mono); font-size:9px; color:var(--tx3); }
.iface-ip { font-family:var(--mono); font-size:10px; color:var(--tx2); margin-bottom:4px; }
.iface-meta { display:flex; gap:10px; flex-wrap:wrap; }
.iface-meta-item { font-family:var(--mono); font-size:9px; color:var(--tx3); }
.iface-traffic { display:flex; gap:16px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.iface-traffic-item { flex:1; }
.iface-traffic-val { font-family:var(--mono); font-size:11px; color:var(--tx2); }
.iface-traffic-label { font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); margin-top:1px; }

/* ── ZONE GRID ── */
.zone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.zone-card { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
.zone-card-name { font-size:14px; font-weight:600; color:var(--tx); margin-bottom:6px; font-family:var(--jakarta); }
.zone-card-type { font-family:var(--mono); font-size:9px; color:var(--tx3); margin-bottom:8px; }
.zone-card-ifaces { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.zone-card-iface { font-family:var(--mono); font-size:9px; color:var(--tx3); background:var(--surf); border:1px solid var(--border); padding:2px 7px; border-radius:3px; }
.zone-card-sessions { font-family:var(--mono); font-size:11px; color:var(--tx2); }
.zone-card-desc { font-size:11px; color:var(--tx3); margin-top:6px; line-height:1.5; }

/* ── REPORTS ── */
.rpt-list { display:flex; flex-direction:column; gap:8px; }
.rpt-row { display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--surf); border:1px solid var(--border); border-radius:6px; cursor:pointer; transition:border-color .12s; }
.rpt-row:hover { border-color:var(--border2); }
.rpt-row-id { font-family:var(--mono); font-size:10px; color:var(--tx3); min-width:120px; }
.rpt-row-name { flex:1; font-size:12px; font-weight:500; color:var(--tx); }
.rpt-row-date { font-family:var(--mono); font-size:10px; color:var(--tx3); }
.rpt-status { font-family:var(--mono); font-size:9px; padding:2px 8px; border-radius:3px; }
.rpt-status.final { color:var(--ok); background:rgba(0,137,123,.1); border:1px solid rgba(0,137,123,.25); }
.rpt-status.draft { color:var(--warn); background:rgba(196,148,42,.1); border:1px solid rgba(196,148,42,.25); }

/* ── MISC ── */
.empty-state { font-size:12px; color:var(--tx3); padding:40px; text-align:center; }
.chip-row { display:flex; gap:5px; flex-wrap:wrap; }
.chip { font-family:var(--mono); font-size:9px; color:var(--tx3); background:var(--surf2); border:1px solid var(--border); padding:2px 7px; border-radius:3px; }
.mono { font-family:var(--mono); }
.text-crit { color:var(--crit); }
.text-high { color:var(--high); }
.text-med  { color:var(--med); }
.text-ok   { color:var(--ok); }
.text-tx3  { color:var(--tx3); }