/* ── WAF LOG ANALYZER TOKENS ─────────────────────── */
#wafLogView {
  --wf-bg:        #f0f4f8;
  --wf-surface:   #ffffff;
  --wf-surface2:  #f7f9fc;
  --wf-border:    #dde3ee;
  --wf-border2:   #e8ecf4;
  --wf-text:      #0f1923;
  --wf-muted:     #52657e;
  --wf-faint:     #9aaabb;
  --wf-red:       #dc2626;
  --wf-red-l:     #fdecec;
  --wf-azure:     #0078d4;
  --wf-success:   #107c10;
  --wf-warn:      #d83b01;
  --wf-amber:     #b45309;
  --wf-grid:      rgba(0,0,0,0.035);
  --wf-shadow:    0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.05);
  --wf-glow:      rgba(220,38,38,0.10);
}
body.dark #wafLogView {
  --wf-bg:        #0b0f1a;
  --wf-surface:   #111827;
  --wf-surface2:  #1a2235;
  --wf-border:    #1e2d42;
  --wf-border2:   #243044;
  --wf-text:      #e8edf8;
  --wf-muted:     #7a8aa8;
  --wf-faint:     #3a4a64;
  --wf-red:       #f87171;
  --wf-red-l:     #2a1414;
  --wf-azure:     #3aa0f3;
  --wf-success:   #4ec94e;
  --wf-warn:      #f97316;
  --wf-amber:     #f59e0b;
  --wf-grid:      rgba(255,255,255,0.028);
  --wf-shadow:    0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.2);
  --wf-glow:      rgba(248,113,113,0.12);
}
#wafLogView {
  min-height: 100vh;
  background: var(--wf-bg);
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--wf-text);
  display: flex;
  flex-direction: column;
  position: relative;
}
#wafLogView::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--wf-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wf-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* ── Header ── */
.wf-header {
  display:flex; align-items:center; gap:14px;
  padding:0 32px; height:58px;
  background: var(--wf-surface);
  border-bottom:2px solid var(--wf-red);
  box-shadow: 0 2px 8px var(--wf-glow);
  position:sticky; top:0; z-index:100;
  flex-shrink:0;
}
.wf-back-btn {
  display:flex; align-items:center; gap:6px;
  background:none; border:1.5px solid var(--wf-border);
  border-radius:7px; padding:5px 11px; cursor:pointer;
  color:var(--wf-muted); font-size:11px;
  font-family:'IBM Plex Mono',monospace; font-weight:600;
  transition:all .15s; flex-shrink:0;
}
.wf-back-btn:hover { border-color:var(--wf-red); color:var(--wf-red); }
.wf-header-logo {
  width:28px; height:28px; background:var(--wf-red);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow: 0 0 14px var(--wf-glow);
}
.wf-header-logo svg { width:16px; height:16px; }
.wf-header h1 { font-size:15px; font-weight:600; letter-spacing:-.01em; flex:1; }
.wf-header-badge {
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  color:var(--wf-red); border:1px solid var(--wf-red);
  background:var(--wf-red-l); padding:2px 9px; border-radius:20px; opacity:.85;
}
.wf-dark-toggle-btn {
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;cursor:pointer;border:1.5px solid var(--wf-border);
  background:var(--wf-surface2);color:var(--wf-muted);transition:all .15s;flex-shrink:0;
}
.wf-dark-toggle-btn:hover { border-color:var(--wf-red); color:var(--wf-red); }
/* ── Body ── */
.wf-body {
  position:relative; z-index:1;
  padding:24px 28px;
  max-width:1400px; margin:0 auto; width:100%;
  flex:1;
}
/* ── Dropzone ── */
.wf-dropzone {
  background:var(--wf-surface); border:2px dashed var(--wf-border);
  border-radius:12px; padding:36px; text-align:center; cursor:pointer;
  transition:all .15s; box-shadow:var(--wf-shadow);
}
.wf-dropzone:hover, .wf-dropzone.wf-drag { border-color:var(--wf-red); background:var(--wf-red-l); }
.wf-dropzone svg { margin:0 auto 10px; display:block; color:var(--wf-faint); }
.wf-dropzone-title { font-weight:600; font-size:14px; margin-bottom:4px; }
.wf-dropzone-sub { font-size:12px; color:var(--wf-muted); }
.wf-file-input { display:none; }
/* ── Status / error banners ── */
.wf-banner {
  border-radius:9px; padding:12px 16px; font-size:12.5px; margin-bottom:16px;
  display:flex; align-items:flex-start; gap:10px; line-height:1.5;
}
.wf-banner-error { background:var(--wf-red-l); border:1px solid var(--wf-red); color:var(--wf-red); }
.wf-banner-info { background:var(--wf-surface2); border:1px solid var(--wf-border); color:var(--wf-muted); }
.wf-banner svg { flex-shrink:0; margin-top:1px; }
/* ── Summary cards ── */
.wf-stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin:20px 0;
}
.wf-stat-card {
  background:var(--wf-surface); border:1px solid var(--wf-border);
  border-radius:10px; padding:14px 16px; box-shadow:var(--wf-shadow);
}
.wf-stat-label {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--wf-muted); font-weight:600; margin-bottom:6px;
}
.wf-stat-value {
  font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600;
}
.wf-stat-value.wf-red-text { color:var(--wf-red); }
.wf-stat-sub { font-size:11px; color:var(--wf-faint); margin-top:2px; }
/* ── Panels ── */
.wf-panels {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}
@media(max-width:900px){ .wf-panels{ grid-template-columns:1fr; } }
.wf-panel {
  background:var(--wf-surface); border:1px solid var(--wf-border);
  border-radius:10px; padding:16px 18px; box-shadow:var(--wf-shadow);
}
.wf-panel-title {
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--wf-muted); margin-bottom:12px;
}
.wf-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:12px; flex-wrap:wrap; }
.wf-rep-links { flex-basis:100%; display:flex; gap:8px; padding-left:160px; margin-top:-4px; }
.wf-rep-link { font-size:10px; color:var(--wf-azure); text-decoration:none; font-family:'IBM Plex Mono',monospace; }
.wf-rep-link:hover { text-decoration:underline; }
.wf-bar-label {
  width:150px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-size:11px;
}
.wf-bar-track { flex:1; height:8px; background:var(--wf-surface2); border-radius:5px; overflow:hidden; }
.wf-bar-fill { height:100%; background:var(--wf-red); border-radius:5px; }
.wf-bar-count { width:52px; text-align:right; flex-shrink:0; font-family:'IBM Plex Mono',monospace; color:var(--wf-muted); font-size:11px; }
/* ── Filter bar ── */
.wf-filter-bar {
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; align-items:center;
}
.wf-filter-bar input[type=text], .wf-filter-bar select {
  background:var(--wf-surface); border:1.5px solid var(--wf-border);
  border-radius:7px; padding:7px 11px; font-size:12px; color:var(--wf-text);
  font-family:'IBM Plex Sans',sans-serif;
}
.wf-filter-bar input[type=text] { flex:1; min-width:200px; }
.wf-filter-bar select { cursor:pointer; }
.wf-btn {
  background:var(--wf-red); color:#fff; border:none; border-radius:7px;
  padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:opacity .15s;
  font-family:'IBM Plex Sans',sans-serif;
}
.wf-btn:hover { opacity:.88; }
.wf-btn-outline {
  background:none; border:1.5px solid var(--wf-border); color:var(--wf-muted);
  border-radius:7px; padding:7px 13px; font-size:12px; font-weight:600; cursor:pointer;
}
.wf-btn-outline:hover { border-color:var(--wf-red); color:var(--wf-red); }
/* ── Table ── */
.wf-table-wrap {
  background:var(--wf-surface); border:1px solid var(--wf-border);
  border-radius:10px; overflow:hidden; box-shadow:var(--wf-shadow);
}
.wf-table { width:100%; border-collapse:collapse; font-size:11.5px; }
.wf-table th {
  background:var(--wf-surface2); text-align:left; padding:9px 12px;
  font-weight:600; color:var(--wf-muted); text-transform:uppercase;
  font-size:10px; letter-spacing:.04em; border-bottom:1px solid var(--wf-border);
  cursor:pointer; white-space:nowrap; user-select:none;
}
.wf-table th:hover { color:var(--wf-red); }
.wf-table td {
  padding:8px 12px; border-bottom:1px solid var(--wf-border2);
  font-family:'IBM Plex Mono',monospace; max-width:260px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
}
.wf-table tr:hover td { background:var(--wf-surface2); }
.wf-pill { padding:2px 8px; border-radius:20px; font-size:10px; font-weight:600; }
.wf-pill-blocked { background:var(--wf-red-l); color:var(--wf-red); }
.wf-pill-matched { background:rgba(216,59,1,.1); color:var(--wf-warn); }
.wf-pill-detected { background:rgba(0,120,212,.1); color:var(--wf-azure); }
.wf-pagination {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; font-size:11.5px; color:var(--wf-muted);
  border-top:1px solid var(--wf-border);
}
.wf-pagination button {
  background:none; border:1.5px solid var(--wf-border); border-radius:6px;
  padding:4px 10px; cursor:pointer; color:var(--wf-muted); font-size:11px;
}
.wf-pagination button:disabled { opacity:.4; cursor:not-allowed; }
.wf-pagination button:not(:disabled):hover { border-color:var(--wf-red); color:var(--wf-red); }
.wf-empty-state {
  text-align:center; padding:60px 20px; color:var(--wf-faint); font-size:12.5px; line-height:1.6;
}
.wf-empty-state svg { margin:0 auto 10px; display:block; }
/* ── Detail modal ── */
.wf-modal-overlay {
  position:fixed; inset:0; background:rgba(10,14,22,.55); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.wf-modal-overlay.wf-open { display:flex; }
.wf-modal {
  background:var(--wf-surface); border-radius:12px; max-width:640px; width:100%;
  max-height:80vh; overflow-y:auto; padding:22px 26px; box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.wf-modal h3 { font-size:14px; margin-bottom:14px; color:var(--wf-text); }
.wf-modal-row { margin-bottom:10px; }
.wf-modal-row label {
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--wf-muted); font-weight:600; margin-bottom:3px;
}
.wf-modal-row div {
  font-family:'IBM Plex Mono',monospace; font-size:12px; word-break:break-all;
  background:var(--wf-surface2); border-radius:6px; padding:7px 10px;
}
.wf-modal-close {
  margin-top:14px; background:var(--wf-red); color:#fff; border:none;
  border-radius:7px; padding:8px 16px; font-size:12px; font-weight:600; cursor:pointer;
}
/* ── Tabs ── */
.wf-tabs {
  display:flex; gap:4px; border-bottom:1px solid var(--wf-border);
  margin:18px 0 18px;
}
.wf-tab {
  background:none; border:none; border-bottom:2.5px solid transparent;
  padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--wf-muted);
  cursor:pointer; font-family:'IBM Plex Sans',sans-serif; display:flex; align-items:center; gap:6px;
}
.wf-tab:hover { color:var(--wf-text); }
.wf-tab.wf-tab-active { color:var(--wf-red); border-bottom-color:var(--wf-red); }
.wf-tab-badge {
  background:var(--wf-red); color:#fff; border-radius:20px; font-size:10px;
  font-weight:700; padding:1px 7px; font-family:'IBM Plex Mono',monospace;
}
/* ── Advanced exclusion filters ── */
.wf-adv-toggle {
  display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:12px; font-weight:600; color:var(--wf-muted); margin-bottom:10px;
}
.wf-adv-toggle:hover { color:var(--wf-red); }
.wf-adv-toggle.wf-adv-open #wfAdvChevron { transform:rotate(90deg); }
#wfAdvChevron { transition:transform .15s; }
.wf-adv-count {
  background:var(--wf-red-l); color:var(--wf-red); border-radius:20px; font-size:10px;
  font-weight:700; padding:1px 8px; font-family:'IBM Plex Mono',monospace;
}
.wf-adv-panel {
  background:var(--wf-surface); border:1px solid var(--wf-border); border-radius:10px;
  padding:16px 18px; margin-bottom:14px; box-shadow:var(--wf-shadow);
}
.wf-adv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .wf-adv-grid{ grid-template-columns:1fr; } }
.wf-chip-field label {
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--wf-muted); font-weight:600; margin-bottom:6px;
}
.wf-adv-hint { text-transform:none; font-weight:400; color:var(--wf-faint); font-size:10.5px; letter-spacing:0; }
.wf-chip-input-row { display:flex; gap:6px; margin-bottom:8px; }
.wf-chip-input-row input {
  flex:1; background:var(--wf-surface2); border:1.5px solid var(--wf-border);
  border-radius:6px; padding:6px 9px; font-size:11.5px; color:var(--wf-text);
  font-family:'IBM Plex Mono',monospace;
}
.wf-chip-list { display:flex; flex-wrap:wrap; gap:6px; min-height:22px; }
.wf-chip {
  display:flex; align-items:center; gap:6px; background:var(--wf-red-l); color:var(--wf-red);
  border-radius:20px; padding:3px 6px 3px 10px; font-size:11px; font-family:'IBM Plex Mono',monospace;
}
.wf-chip button {
  background:none; border:none; color:var(--wf-red); cursor:pointer; font-size:13px;
  line-height:1; padding:0 2px; font-weight:700;
}
/* ── Recommendations ── */
.wf-reco-disclaimer {
  display:flex; gap:12px; align-items:flex-start; background:var(--wf-surface2);
  border:1px solid var(--wf-border); border-radius:10px; padding:14px 16px;
  font-size:12px; line-height:1.6; color:var(--wf-muted); margin-bottom:16px;
}
.wf-reco-disclaimer svg { flex-shrink:0; margin-top:2px; color:var(--wf-amber); }
.wf-reco-disclaimer strong { color:var(--wf-text); }
.wf-reco-toolbar {
  display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px; align-items:flex-end;
}
.wf-reco-toolbar-group { display:flex; flex-direction:column; gap:5px; }
.wf-reco-toolbar-group label {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--wf-muted); font-weight:600;
}
.wf-reco-toolbar-group > div, .wf-reco-toolbar-group select, .wf-reco-toolbar-group input {
  display:inline-flex; gap:6px;
}
.wf-reco-toolbar select, .wf-reco-toolbar input[type=text] {
  background:var(--wf-surface); border:1.5px solid var(--wf-border); border-radius:7px;
  padding:6px 10px; font-size:12px; color:var(--wf-text); font-family:'IBM Plex Sans',sans-serif;
}
.wf-reco-summary { font-size:12.5px; color:var(--wf-muted); margin-bottom:16px; }
.wf-reco-summary strong { color:var(--wf-text); }
.wf-reco-card {
  background:var(--wf-surface); border:1px solid var(--wf-border); border-radius:10px;
  padding:16px 18px; margin-bottom:14px; box-shadow:var(--wf-shadow);
}
.wf-reco-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.wf-reco-title { font-size:13px; font-weight:600; color:var(--wf-text); }
.wf-reco-sub { font-size:11px; color:var(--wf-muted); font-family:'IBM Plex Mono',monospace; margin-top:2px; }
.wf-risk-badge {
  font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.wf-risk-low { background:rgba(16,124,16,.1); color:var(--wf-success); }
.wf-risk-medium { background:rgba(180,83,9,.12); color:var(--wf-amber); }
.wf-risk-high { background:var(--wf-red-l); color:var(--wf-red); }
.wf-reco-evidence {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:12px 0;
  font-size:11px;
}
.wf-reco-evidence div { background:var(--wf-surface2); border-radius:7px; padding:8px 10px; }
.wf-reco-evidence label { display:block; color:var(--wf-muted); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; }
.wf-reco-evidence span { font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--wf-text); }
.wf-reco-config {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; font-size:11.5px;
}
@media(max-width:800px){ .wf-reco-config{ grid-template-columns:1fr; } }
.wf-reco-config div { background:var(--wf-red-l); border-radius:7px; padding:8px 10px; }
.wf-reco-config label { display:block; color:var(--wf-red); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; opacity:.85; }
.wf-reco-config span { font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--wf-red); word-break:break-all; }
.wf-reco-note {
  font-size:11.5px; line-height:1.6; padding:10px 12px; border-radius:7px; margin-bottom:12px;
}
.wf-reco-note-caution { background:rgba(180,83,9,.08); color:var(--wf-muted); border-left:3px solid var(--wf-amber); }
.wf-reco-note-safe { background:rgba(16,124,16,.07); color:var(--wf-muted); border-left:3px solid var(--wf-success); }
.wf-reco-note-flag { background:var(--wf-red-l); color:var(--wf-muted); border-left:3px solid var(--wf-red); }
.wf-reco-snippet {
  position:relative; background:#0f1520; border-radius:8px; padding:12px 14px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:#d8e2f0; white-space:pre-wrap;
  word-break:break-all; max-height:220px; overflow-y:auto;
}
body.dark .wf-reco-snippet { background:#060a12; }
.wf-reco-copy-btn {
  position:absolute; top:8px; right:8px; background:rgba(255,255,255,.1); border:none;
  color:#d8e2f0; border-radius:5px; padding:4px 9px; font-size:10.5px; cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;
}
.wf-reco-copy-btn:hover { background:rgba(255,255,255,.2); }
.wf-reco-empty { text-align:center; padding:40px 20px; color:var(--wf-faint); font-size:12.5px; }