/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FoylGuard Email Security Gateway — Stylesheet
   Ficsit Inc. Pioneer Division Instance
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* Brand */
  --blue: #00AEEF; --cyan: #00D4FF; --teal: #00897B; --ocean: #005F87;
  --grad: linear-gradient(135deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);

  /* Backgrounds */
  --bg: #111009; --bg2: #161410; --surf: #1E1B15;
  --surf2: #262219; --surf3: #302C22;

  /* Borders */
  --border: rgba(255,245,210,.07); --border2: rgba(255,245,210,.13);

  /* Text */
  --tx: #ECE6D6; --tx2: #B8AFA0; --tx3: #706860;

  /* Severity */
  --crit: #FC4444;   --crit-bg: rgba(252,68,68,.1);    --crit-b: rgba(252,68,68,.25);
  --high: #F59E0B;   --high-bg: rgba(245,158,11,.1);   --high-b: rgba(245,158,11,.25);
  --med:  #FBBF24;   --med-bg:  rgba(251,191,36,.08);  --med-b:  rgba(251,191,36,.2);
  --low:  #3B82F6;   --low-bg:  rgba(59,130,246,.1);   --low-b:  rgba(59,130,246,.25);
  --ok:   #00897B;   --ok-bg:   rgba(0,137,123,.1);    --ok-b:   rgba(0,137,123,.25);
  --purple: #8B5CF6; --purple-bg: rgba(139,92,246,.1); --purple-b: rgba(139,92,246,.25);
  --danger: #C45A50; --warn: #C4942A;

  /* Email-specific threat type colors */
  --phish:    #F97316; --phish-bg:    rgba(249,115,22,.1);  --phish-b:    rgba(249,115,22,.25);
  --bec-c:    #A855F7; --bec-bg:      rgba(168,85,247,.1);  --bec-b:      rgba(168,85,247,.25);
  --ato-c:    #FC4444; --ato-bg:      rgba(252,68,68,.1);   --ato-b:      rgba(252,68,68,.25);
  --vendor-c: #F59E0B; --vendor-bg:   rgba(245,158,11,.1);  --vendor-b:   rgba(245,158,11,.25);
  --malware-c:#EF4444; --malware-bg:  rgba(239,68,68,.1);   --malware-b:  rgba(239,68,68,.25);
  --spam-c:   #6B7280; --spam-bg:     rgba(107,114,128,.1); --spam-b:     rgba(107,114,128,.2);

  /* Typography */
  --font: 'Outfit', sans-serif;
  --mono: 'DM Mono', monospace;
  --jakarta: 'Plus Jakarta Sans', sans-serif;
}

/* ── Light theme override ── */
[data-theme="light"] {
  --bg: #F5F3EE; --bg2: #EDEAE3; --surf: #E4E0D8;
  --surf2: #DEDAD0; --surf3: #D0CBBD;
  --border: rgba(60,50,30,.09); --border2: rgba(60,50,30,.16);
  --tx: #1A1610; --tx2: #4A4030; --tx3: #8A7A60;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESET
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
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;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; font-size: inherit; }
input, select { font-family: inherit; color: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surf3); border-radius: 3px; }

/* ── Animations ── */
@keyframes fade-in  { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
@keyframes pulse    { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes slide-in { from { transform:translateX(-8px); opacity:0 } to { transform:translateX(0); opacity:1 } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOPBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#topbar {
  height: 48px; flex-shrink: 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 16px; gap: 0; z-index: 100;
}
.tb-logo { display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.tb-logo img { height: 16px; width: auto; }
.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: 20px; background: var(--border2); margin: 0 14px; }
.tb-instance {
  font-family: var(--mono); font-size: 10px; color: var(--tx2);
  letter-spacing: .06em; display: flex; align-items: center; gap: 6px;
}
.tb-instance-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 3s infinite; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.tb-stat { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.tb-stat-val { color: var(--tx); font-weight: 400; }
.tb-stat-val.danger { color: var(--crit); }
.tb-clock { font-family: var(--mono); font-size: 11px; color: var(--tx2); }
.tb-icon-btn {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx3); transition: background .15s, color .15s;
}
.tb-icon-btn:hover { background: var(--surf); color: var(--tx2); }
.tb-theme-btn {
  font-family: var(--mono); font-size: 10px; color: var(--tx3);
  padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border2);
  background: transparent; cursor: pointer; transition: all .15s;
}
.tb-theme-btn:hover { background: var(--surf); color: var(--tx2); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#app-body { flex: 1; display: flex; 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; overflow-x: hidden;
}
.sb-section { padding: 8px 0; }
.sb-divider { height: 1px; background: var(--border); margin: 4px 0; }
.sb-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx3);
  padding: 8px 16px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  color: var(--tx3); transition: all .15s;
  position: relative; font-size: 13px; font-weight: 400;
  text-decoration: none;
}
.nav-item:hover { color: var(--tx2); background: var(--surf); }
.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: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit-b);
  padding: 1px 6px; border-radius: 10px; min-width: 20px; text-align: center;
}
.nav-badge.amber { background: var(--high-bg); color: var(--high); border-color: var(--high-b); }
.nav-badge.purple { background: var(--bec-bg); color: var(--bec-c); border-color: var(--bec-b); }
.sb-footer { margin-top: auto; border-top: 1px solid var(--border); padding: 12px 16px; }
.sb-version { font-family: var(--mono); font-size: 8px; color: var(--tx3); letter-spacing: .06em; line-height: 1.8; }

/* ── Main content ── */
#main { flex: 1; overflow-y: auto; background: var(--bg); }
.page { padding: 24px; animation: fade-in .18s ease; }
.page-header { margin-bottom: 20px; }
.page-title { font-family: var(--jakarta); font-size: 19px; font-weight: 600; color: var(--tx); letter-spacing: -.02em; }
.page-sub { font-size: 13px; color: var(--tx2); margin-top: 3px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED COMPONENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Severity badges */
.sev-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 3px; font-weight: 500;
}
.sev-badge.critical { background: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit-b); }
.sev-badge.high     { background: var(--high-bg); color: var(--high); border: 1px solid var(--high-b); }
.sev-badge.medium   { background: var(--med-bg);  color: var(--med);  border: 1px solid var(--med-b); }
.sev-badge.low      { background: var(--low-bg);  color: var(--low);  border: 1px solid var(--low-b); }

/* Type badges */
.type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 3px; font-weight: 500;
  white-space: nowrap;
}
.type-badge.phishing     { background: var(--phish-bg);   color: var(--phish);    border: 1px solid var(--phish-b); }
.type-badge.bec          { background: var(--bec-bg);     color: var(--bec-c);    border: 1px solid var(--bec-b); }
.type-badge.ato          { background: var(--ato-bg);     color: var(--ato-c);    border: 1px solid var(--ato-b); }
.type-badge.vendor-fraud { background: var(--vendor-bg);  color: var(--vendor-c); border: 1px solid var(--vendor-b); }
.type-badge.malware      { background: var(--malware-bg); color: var(--malware-c);border: 1px solid var(--malware-b); }
.type-badge.spam         { background: var(--spam-bg);    color: var(--spam-c);   border: 1px solid var(--spam-b); }

/* Status badges */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 3px; font-weight: 500; white-space: nowrap;
}
.status-badge.blocked            { background: var(--ok-bg);    color: var(--ok);   border: 1px solid var(--ok-b); }
.status-badge.quarantined        { background: var(--high-bg);  color: var(--high); border: 1px solid var(--high-b); }
.status-badge.delivered-malicious{ background: var(--crit-bg);  color: var(--crit); border: 1px solid var(--crit-b); }
.status-badge.remediated         { background: var(--low-bg);   color: var(--low);  border: 1px solid var(--low-b); }
.status-badge.clean              { background: var(--ok-bg);    color: var(--ok);   border: 1px solid var(--ok-b); }
.status-badge.suspicious         { background: var(--high-bg);  color: var(--high); border: 1px solid var(--high-b); }
.status-badge.active             { background: var(--crit-bg);  color: var(--crit); border: 1px solid var(--crit-b); }
.status-badge.investigating      { background: var(--high-bg);  color: var(--high); border: 1px solid var(--high-b); }
.status-badge.resolved           { background: var(--ok-bg);    color: var(--ok);   border: 1px solid var(--ok-b); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 5px; font-size: 12px; font-weight: 500;
  cursor: pointer; border: none; transition: all .15s; font-family: inherit;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--cyan); }
.btn-ghost { background: transparent; color: var(--tx2); border: 1px solid var(--border2); }
.btn-ghost:hover { background: var(--surf); border-color: var(--border2); color: var(--tx); }
.btn-danger { background: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit-b); }
.btn-danger:hover { background: var(--crit); color: #fff; }
.btn-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-b); }
.btn-ok:hover { background: var(--ok); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* Tags */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10px; color: var(--tx3);
  background: var(--surf2); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 3px;
}

/* Cards */
.card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px;
}
.card-title {
  font-family: var(--jakarta); font-size: 13px; font-weight: 600;
  color: var(--tx); margin-bottom: 12px; letter-spacing: -.01em;
}
.card-sub { font-size: 12px; color: var(--tx2); margin-top: 2px; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-bottom: 20px; }
.stat-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.stat-card-val {
  font-family: var(--jakarta); font-size: 22px; font-weight: 700;
  color: var(--tx); line-height: 1; margin-bottom: 4px;
}
.stat-card-val.danger { color: var(--crit); }
.stat-card-val.warn   { color: var(--high); }
.stat-card-val.ok     { color: var(--ok); }
.stat-card-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3);
}
.stat-card-sub { font-size: 11px; color: var(--tx2); margin-top: 4px; }

/* Sec stat bar */
.sec-stat-bar {
  display: flex; gap: 0; margin-bottom: 20px;
  background: var(--surf2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.sec-stat {
  flex: 1; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--border);
}
.sec-stat:last-child { border-right: none; }
.sec-stat-num { font-family: var(--jakarta); font-size: 18px; font-weight: 600; color: var(--tx); line-height: 1; }
.sec-stat-num.danger { color: var(--crit); }
.sec-stat-num.warn   { color: var(--high); }
.sec-stat-num.ok     { color: var(--ok); }
.sec-stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DASHBOARD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dash-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 16px; margin-bottom: 16px; }
.dash-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Recent threats table */
.threat-table { width: 100%; border-collapse: collapse; }
.threat-table th {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx3); padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--border); font-weight: 400;
}
.threat-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.threat-table tr:last-child td { border-bottom: none; }
.threat-table tr:hover td { background: var(--surf2); cursor: pointer; }
.tt-sender-recipient { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tt-addr { font-size: 12px; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.tt-arrow { color: var(--tx3); font-size: 10px; flex-shrink: 0; }
.tt-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; font-size: 12px; }
.tt-time { font-family: var(--mono); font-size: 10px; color: var(--tx3); white-space: nowrap; }
.sev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sev-dot.critical { background: var(--crit); }
.sev-dot.high     { background: var(--high); }
.sev-dot.medium   { background: var(--med); }
.sev-dot.low      { background: var(--low); }

/* Bar chart */
.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bar-fill { width: 100%; background: var(--blue); border-radius: 2px 2px 0 0; opacity: .6; transition: opacity .2s; min-height: 2px; }
.bar-fill:hover { opacity: 1; }
.bar-fill.spike { background: var(--crit); opacity: .8; }
.bar-label { font-family: var(--mono); font-size: 8px; color: var(--tx3); }

/* Category bars */
.cat-bar-list { display: flex; flex-direction: column; gap: 8px; }
.cat-bar-item { display: flex; flex-direction: column; gap: 3px; }
.cat-bar-top { display: flex; justify-content: space-between; align-items: center; }
.cat-bar-name { font-size: 12px; color: var(--tx2); }
.cat-bar-count { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.cat-bar-track { height: 5px; background: var(--surf3); border-radius: 3px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 3px; }

/* Top targeted */
.targeted-list { display: flex; flex-direction: column; gap: 6px; }
.targeted-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surf2); border: 1px solid var(--border); border-radius: 5px; }
.targeted-rank { font-family: var(--mono); font-size: 9px; color: var(--tx3); min-width: 16px; }
.targeted-name { flex: 1; font-size: 13px; color: var(--tx); }
.targeted-email { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.targeted-count { font-family: var(--mono); font-size: 11px; background: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit-b); padding: 1px 7px; border-radius: 10px; }

/* Action items */
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; }
.action-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.action-dot.crit { background: var(--crit); }
.action-dot.high { background: var(--high); }
.action-dot.med  { background: var(--med); }
.action-text { font-size: 12px; color: var(--tx2); line-height: 1.4; }
.action-text strong { color: var(--tx); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   THREAT LOG
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.threat-log-layout { display: flex; gap: 0; height: calc(100vh - 48px); overflow: hidden; }
.threat-list-panel { width: 460px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.threat-detail-panel { flex: 1; overflow-y: auto; background: var(--bg); }

/* Filter bar */
.filter-bar {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg2); display: flex; flex-direction: column; gap: 8px;
}
.filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-pill {
  font-family: var(--mono); font-size: 10px; padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--border2); color: var(--tx3); cursor: pointer;
  transition: all .15s; background: transparent;
}
.filter-pill:hover { color: var(--tx2); border-color: var(--border2); background: var(--surf); }
.filter-pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.filter-pill.phishing.active  { background: var(--phish);   border-color: var(--phish); }
.filter-pill.bec.active       { background: var(--bec-c);   border-color: var(--bec-c); }
.filter-pill.ato.active       { background: var(--ato-c);   border-color: var(--ato-c); }
.filter-pill.vendor.active    { background: var(--vendor-c);border-color: var(--vendor-c); }
.filter-pill.malware.active   { background: var(--malware-c);border-color: var(--malware-c); }
.filter-pill.spam.active      { background: var(--spam-c);  border-color: var(--spam-c); }
.filter-search {
  flex: 1; background: var(--surf); border: 1px solid var(--border2);
  border-radius: 5px; padding: 6px 10px; font-size: 12px; color: var(--tx);
  outline: none; min-width: 160px;
}
.filter-search:focus { border-color: var(--blue); }
.filter-search::placeholder { color: var(--tx3); }
.filter-date { font-family: var(--mono); font-size: 10px; color: var(--tx3); white-space: nowrap; }

/* Threat list */
.threat-list { flex: 1; overflow-y: auto; }
.threat-row {
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .12s; position: relative;
  display: flex; align-items: stretch; gap: 0;
}
.threat-row:hover { background: var(--surf2); }
.threat-row.selected { background: rgba(0,174,239,.06); }
.threat-row.selected::after { content:''; position:absolute; right:0; top:0; bottom:0; width:2px; background:var(--blue); }
.threat-sev-bar { width: 4px; flex-shrink: 0; }
.threat-sev-bar.critical { background: var(--crit); }
.threat-sev-bar.high     { background: var(--high); }
.threat-sev-bar.medium   { background: var(--med); }
.threat-sev-bar.low      { background: var(--low); }
.threat-row-content { flex: 1; padding: 10px 12px; min-width: 0; }
.threat-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.threat-row-mid { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tx2); overflow: hidden; margin-bottom: 3px; }
.threat-row-mid .addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.threat-row-subject { font-size: 12px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threat-row-time { font-family: var(--mono); font-size: 9px; color: var(--tx3); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.threat-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 20px; background: var(--bg2); }
.threat-tab {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px; color: var(--tx3); cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .15s; margin-bottom: -1px;
}
.threat-tab:hover { color: var(--tx2); }
.threat-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.threat-tab-content { padding: 20px; }

/* Tab panels */
.indicator-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.indicator-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--tx2); }
.indicator-check { color: var(--ok); flex-shrink: 0; margin-top: 1px; }
.indicator-x     { color: var(--crit); flex-shrink: 0; margin-top: 1px; }

.body-preview-box {
  background: var(--surf); border: 1px solid var(--border2);
  border-radius: 6px; padding: 12px 14px;
  font-family: var(--mono); font-size: 11px; color: var(--tx2);
  white-space: pre-wrap; line-height: 1.6; margin-top: 10px;
  max-height: 200px; overflow-y: auto;
}

.header-table { width: 100%; border-collapse: collapse; }
.header-table tr { border-bottom: 1px solid var(--border); }
.header-table tr:last-child { border-bottom: none; }
.header-table td { padding: 6px 8px; font-size: 12px; vertical-align: top; }
.header-key { font-family: var(--mono); font-size: 10px; color: var(--tx3); min-width: 150px; }
.header-val { font-family: var(--mono); font-size: 10px; color: var(--tx2); word-break: break-all; }
.header-val.pass { color: var(--ok); }
.header-val.fail { color: var(--crit); }

.attach-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; }
.attach-icon { width: 36px; height: 36px; border-radius: 6px; background: var(--crit-bg); border: 1px solid var(--crit-b); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.attach-name { font-size: 13px; font-weight: 500; color: var(--tx); }
.attach-meta { font-family: var(--mono); font-size: 10px; color: var(--tx3); margin-top: 2px; }
.attach-hash { font-family: var(--mono); font-size: 9px; color: var(--tx3); word-break: break-all; margin-top: 4px; }

.mitre-list { display: flex; flex-direction: column; gap: 8px; }
.mitre-item { padding: 10px 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: 5px; }
.mitre-id { font-family: var(--mono); font-size: 10px; color: var(--blue); margin-bottom: 2px; }
.mitre-name { font-size: 13px; font-weight: 500; color: var(--tx); }
.mitre-tactic { font-size: 11px; color: var(--tx3); margin-top: 2px; }

/* Detail panel */
.detail-panel-inner { padding: 20px; }
.detail-threat-id { font-family: var(--mono); font-size: 10px; color: var(--tx3); margin-bottom: 8px; }
.detail-confidence { font-family: var(--jakarta); font-size: 42px; font-weight: 700; color: var(--crit); line-height: 1; }
.detail-confidence-label { font-family: var(--mono); font-size: 9px; color: var(--tx3); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.detail-reasons { margin-top: 14px; }
.detail-reasons-title { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.detail-reason-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--tx2); margin-bottom: 6px; line-height: 1.4; }
.detail-reason-item::before { content: '›'; color: var(--blue); flex-shrink: 0; }
.detail-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.detail-link { font-family: var(--mono); font-size: 10px; color: var(--blue); text-decoration: underline; cursor: pointer; }

/* Sticky action bar — top of detail panels */
.detail-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--bg2); border-bottom: 1px solid var(--border2);
  margin: -20px -20px 28px -20px;
  position: sticky; top: 0; z-index: 10;
}
.detail-action-bar-left { display: flex; flex-direction: column; gap: 5px; }
.detail-action-bar-id { font-family: var(--mono); font-size: 10px; color: var(--tx3); letter-spacing: .08em; }
.detail-action-bar-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.detail-action-bar-btns { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MESSAGE SEARCH
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.search-layout { display: flex; gap: 16px; height: calc(100vh - 48px - 80px); }
.search-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.search-results { flex: 1; overflow-y: auto; }

.search-bar-wrap { display: flex; gap: 8px; margin-bottom: 14px; }
.search-input-main {
  flex: 1; background: var(--surf); border: 1px solid var(--border2);
  border-radius: 6px; padding: 9px 14px; font-size: 13px; color: var(--tx);
  outline: none; transition: border-color .15s;
}
.search-input-main:focus { border-color: var(--blue); }
.search-input-main::placeholder { color: var(--tx3); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; color: var(--tx2);
  background: var(--surf2); border: 1px solid var(--border2);
  padding: 3px 8px; border-radius: 12px;
}
.chip-remove { cursor: pointer; color: var(--tx3); font-size: 12px; }
.chip-remove:hover { color: var(--crit); }

.sb-filter-section { margin-bottom: 14px; }
.sb-filter-title { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); margin-bottom: 6px; }
.sb-filter-opts { display: flex; flex-direction: column; gap: 3px; }
.sb-filter-opt {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px;
  border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--tx3);
  transition: all .12s;
}
.sb-filter-opt:hover { background: var(--surf2); color: var(--tx2); }
.sb-filter-opt.active { background: rgba(0,174,239,.08); color: var(--blue); }
.sb-filter-opt input[type=checkbox] { accent-color: var(--blue); }

.saved-searches { display: flex; flex-direction: column; gap: 4px; }
.saved-search-link {
  font-size: 12px; color: var(--blue); cursor: pointer; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0,174,239,.3);
}
.saved-search-link:hover { text-decoration-color: var(--blue); }

/* Message result cards */
.msg-card {
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s;
}
.msg-card:hover { background: var(--surf2); }
.msg-card-inner { padding: 11px 14px; }
.msg-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.msg-from { font-size: 13px; font-weight: 500; color: var(--tx); }
.msg-from-addr { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.msg-to { font-size: 12px; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-subject { font-size: 13px; font-weight: 500; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.msg-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.msg-threat-link { font-family: var(--mono); font-size: 10px; color: var(--blue); text-decoration: underline; margin-left: auto; }

/* Inline email viewer */
.email-viewer { border-top: 1px solid var(--border); background: var(--bg2); }
.email-header-block { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.email-header-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.email-hdr-key { font-family: var(--mono); font-size: 10px; color: var(--tx3); min-width: 50px; }
.email-hdr-val { color: var(--tx2); }
.email-subject-line { font-size: 14px; font-weight: 600; color: var(--tx); padding: 10px 14px; border-bottom: 1px solid var(--border); }
.email-body { padding: 14px; font-size: 13px; color: var(--tx2); white-space: pre-wrap; line-height: 1.7; }
.email-attach-row { padding: 8px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx2); }
.raw-headers-toggle { padding: 8px 14px; border-top: 1px solid var(--border); }
.raw-headers-btn { font-family: var(--mono); font-size: 10px; color: var(--tx3); cursor: pointer; }
.raw-headers-btn:hover { color: var(--blue); }
.raw-headers-dump { font-family: var(--mono); font-size: 10px; color: var(--tx3); white-space: pre-wrap; padding: 8px; background: var(--surf); border-radius: 4px; margin-top: 6px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ATO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ato-layout { display: flex; gap: 0; height: calc(100vh - 48px); overflow: hidden; }
.ato-list-panel { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.ato-detail-panel { flex: 1; overflow-y: auto; padding: 20px; }

.ato-case-card {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.ato-case-card:hover { background: var(--surf2); }
.ato-case-card.selected { background: rgba(0,174,239,.06); border-right: 2px solid var(--blue); }
.ato-case-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ato-initials {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--jakarta); font-size: 13px; font-weight: 600; color: #fff;
}
.ato-initials.critical { background: linear-gradient(135deg,var(--crit),#a33); }
.ato-initials.high     { background: linear-gradient(135deg,var(--high),#b06a00); }
.ato-initials.medium   { background: linear-gradient(135deg,var(--blue),var(--ocean)); }
.ato-initials.low      { background: linear-gradient(135deg,var(--ok),#005f50); }
.ato-name { font-size: 13px; font-weight: 500; color: var(--tx); }
.ato-email { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.ato-risk-bar-wrap { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.ato-risk-track { flex: 1; height: 5px; background: var(--surf3); border-radius: 3px; overflow: hidden; }
.ato-risk-fill { height: 100%; border-radius: 3px; }
.ato-risk-fill.critical { background: var(--crit); }
.ato-risk-fill.high     { background: var(--high); }
.ato-risk-fill.medium   { background: var(--med); }
.ato-risk-fill.low      { background: var(--low); }
.ato-risk-num { font-family: var(--mono); font-size: 11px; font-weight: 500; min-width: 26px; text-align: right; }
.ato-risk-num.critical { color: var(--crit); }
.ato-risk-num.high     { color: var(--high); }
.ato-risk-num.medium   { color: var(--med); }
.ato-risk-num.low      { color: var(--low); }
.ato-indicator-tag { font-family: var(--mono); font-size: 9px; color: var(--tx3); }
.ato-ts { font-family: var(--mono); font-size: 9px; color: var(--tx3); margin-top: 3px; }

/* ATO detail */
.ato-user-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surf); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; }
.ato-user-initials-lg {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--jakarta); font-size: 18px; font-weight: 700; color: #fff;
}
.ato-user-name { font-family: var(--jakarta); font-size: 16px; font-weight: 600; color: var(--tx); }
.ato-user-title { font-size: 12px; color: var(--tx2); }
.ato-user-dept { font-size: 11px; color: var(--tx3); }
.ato-user-email { font-family: var(--mono); font-size: 10px; color: var(--blue); margin-top: 3px; }
.compromised-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; background: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit-b); padding: 2px 8px; border-radius: 3px; margin-top: 4px; }

.ato-risk-breakdown { margin-bottom: 16px; }
.risk-factor-list { display: flex; flex-direction: column; gap: 7px; }
.risk-factor-item { display: flex; align-items: center; gap: 10px; }
.risk-factor-label { font-size: 12px; color: var(--tx2); min-width: 180px; }
.risk-factor-track { flex: 1; height: 6px; background: var(--surf3); border-radius: 3px; overflow: hidden; }
.risk-factor-fill { height: 100%; border-radius: 3px; background: var(--crit); }
.risk-factor-score { font-family: var(--mono); font-size: 10px; color: var(--tx3); min-width: 30px; text-align: right; }

.indicator-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.indicator-card { padding: 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; border-left: 3px solid var(--high); }
.indicator-card.crit { border-left-color: var(--crit); }
.indicator-card-title { font-size: 12px; font-weight: 500; color: var(--tx); margin-bottom: 4px; }
.indicator-card-text { font-size: 11px; color: var(--tx2); line-height: 1.5; }

/* Session timeline */
.session-timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; position: relative; }
.timeline-item:not(:last-child)::before { content:''; position:absolute; left:30px; top:24px; bottom:0; width:1px; background:var(--border); }
.timeline-time { font-family: var(--mono); font-size: 10px; color: var(--tx3); min-width: 36px; padding-top: 2px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; border: 2px solid var(--bg2); }
.timeline-dot.auth         { background: var(--blue); }
.timeline-dot.access       { background: var(--ok); }
.timeline-dot.anomaly      { background: var(--crit); }
.timeline-dot.mfa          { background: var(--high); }
.timeline-dot.mfa-success  { background: var(--crit); }
.timeline-dot.blocked      { background: var(--ok); }
.timeline-dot.remediation  { background: var(--low); }
.timeline-dot.flag         { background: var(--high); }
.timeline-text { font-size: 12px; color: var(--tx2); flex: 1; line-height: 1.4; }

/* MFA fatigue */
.mfa-push-list { display: flex; flex-direction: column; gap: 6px; }
.mfa-push { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 5px; font-size: 12px; }
.mfa-push.denied { background: var(--ok-bg); border: 1px solid var(--ok-b); color: var(--ok); }
.mfa-push.approved { background: var(--crit-bg); border: 1px solid var(--crit-b); color: var(--crit); }
.mfa-push-num { font-family: var(--mono); font-size: 10px; min-width: 40px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BEC
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bec-layout { display: flex; gap: 0; height: calc(100vh - 48px); overflow: hidden; }
.bec-list-panel { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.bec-detail-panel { flex: 1; overflow-y: auto; padding: 20px; }

.bec-case-card { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.bec-case-card:hover { background: var(--surf2); }
.bec-case-card.selected { background: rgba(168,85,247,.05); border-right: 2px solid var(--bec-c); }
.bec-case-type { margin-bottom: 4px; }
.bec-case-from { font-size: 13px; font-weight: 500; color: var(--tx); margin-bottom: 2px; }
.bec-impersonating { font-size: 11px; color: var(--tx3); margin-bottom: 4px; }
.bec-arrow-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx2); }
.bec-amount { font-family: var(--jakarta); font-size: 14px; font-weight: 600; color: var(--crit); }
.bec-case-ts { font-family: var(--mono); font-size: 9px; color: var(--tx3); margin-top: 4px; }

/* BEC detail */
.bec-explainer { padding: 12px 14px; background: var(--purple-bg); border: 1px solid var(--purple-b); border-radius: 7px; margin-bottom: 16px; }
.bec-explainer-type { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); margin-bottom: 4px; }
.bec-explainer-desc { font-size: 12px; color: var(--tx2); line-height: 1.5; }

.bec-checklist { display: flex; flex-direction: column; gap: 6px; }
.bec-check-item { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--tx2); line-height: 1.4; }
.bec-check-icon { color: var(--ok); flex-shrink: 0; margin-top: 1px; font-size: 13px; }

/* Email preview with highlights */
.email-preview-card { background: var(--surf2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; margin-bottom: 16px; }
.email-preview-hdr { padding: 10px 14px; background: var(--surf); border-bottom: 1px solid var(--border); }
.email-preview-hdr-row { display: flex; gap: 8px; font-size: 12px; margin-bottom: 2px; }
.email-hdr-k { font-family: var(--mono); font-size: 10px; color: var(--tx3); min-width: 40px; }
.email-hdr-v { color: var(--tx2); }
.email-preview-body { padding: 14px; font-size: 13px; color: var(--tx2); white-space: pre-wrap; line-height: 1.8; }
.highlight-danger { background: rgba(252,68,68,.18); color: var(--crit); border-radius: 2px; padding: 0 2px; }
.highlight-warn   { background: rgba(245,158,11,.18); color: var(--high); border-radius: 2px; padding: 0 2px; }

/* Similarity analysis */
.similarity-card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 14px; background: var(--surf2); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 16px; }
.sim-side { display: flex; flex-direction: column; gap: 2px; }
.sim-label { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.sim-name { font-size: 14px; font-weight: 600; color: var(--tx); }
.sim-email { font-family: var(--mono); font-size: 10px; }
.sim-email.legit  { color: var(--ok); }
.sim-email.spoof  { color: var(--crit); }
.sim-vs { font-family: var(--jakarta); font-size: 11px; color: var(--tx3); text-align: center; }
.sim-pct { font-family: var(--jakarta); font-size: 22px; font-weight: 700; color: var(--crit); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VENDOR FRAUD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vendor-layout { display: flex; gap: 0; height: calc(100vh - 48px); overflow: hidden; }
.vendor-list-panel { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.vendor-detail-panel { flex: 1; overflow-y: auto; padding: 20px; }

.vendor-case-card { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.vendor-case-card:hover { background: var(--surf2); }
.vendor-case-card.selected { background: rgba(245,158,11,.05); border-right: 2px solid var(--vendor-c); }
.vendor-case-name { font-size: 13px; font-weight: 500; color: var(--tx); margin-bottom: 3px; }
.vendor-case-domains { font-family: var(--mono); font-size: 10px; color: var(--tx3); margin-bottom: 5px; }
.vendor-case-amount { font-family: var(--jakarta); font-size: 13px; font-weight: 600; color: var(--high); }
.vendor-case-ts { font-family: var(--mono); font-size: 9px; color: var(--tx3); margin-top: 4px; }

/* Domain comparison */
.domain-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; padding: 20px; background: var(--surf); border: 1px solid var(--border2); border-radius: 8px; margin-bottom: 16px; }
.domain-side {}
.domain-label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.domain-name { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--ok); margin-bottom: 6px; letter-spacing: .04em; }
.domain-name.spoof { color: var(--crit); }
.domain-char-highlight { color: var(--crit); text-decoration: underline; text-decoration-color: var(--crit); text-underline-offset: 3px; }
.domain-age { font-size: 12px; color: var(--tx2); margin-bottom: 2px; }
.domain-age.new { color: var(--crit); font-weight: 500; }
.domain-registrar { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.domain-vs { font-family: var(--jakarta); font-size: 11px; color: var(--tx3); text-align: center; padding-top: 30px; }

.domain-note { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--crit); margin-top: 6px; }
.domain-note::before { content: '▲'; font-size: 9px; }

/* WHOIS comparison */
.whois-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.whois-card { padding: 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; }
.whois-card.spoof { border-color: var(--crit-b); background: var(--crit-bg); }
.whois-title { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.whois-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.whois-row:last-child { border-bottom: none; margin-bottom: 0; }
.whois-key { color: var(--tx3); }
.whois-val { color: var(--tx2); font-family: var(--mono); font-size: 10px; }
.whois-val.danger { color: var(--crit); }
.whois-val.ok { color: var(--ok); }

/* Invoice card */
.invoice-card { padding: 16px; background: var(--surf2); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 16px; }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.invoice-co { font-size: 14px; font-weight: 600; color: var(--tx); }
.invoice-num { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.invoice-amount { font-family: var(--jakarta); font-size: 22px; font-weight: 700; color: var(--crit); }
.invoice-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--tx2); padding: 5px 0; border-bottom: 1px solid var(--border); }
.invoice-line:last-child { border-bottom: none; }
.invoice-line-key { color: var(--tx3); }
.invoice-line-val { font-family: var(--mono); font-size: 11px; }
.invoice-line-val.danger { color: var(--crit); }
.invoice-line-val.ok { color: var(--ok); }

/* Vendor history */
.vendor-history { padding: 12px 14px; background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 16px; }
.vendor-history-title { font-size: 12px; font-weight: 500; color: var(--tx); margin-bottom: 8px; }
.vendor-history-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--tx2); padding: 4px 0; border-bottom: 1px solid var(--border); }
.vendor-history-row:last-child { border-bottom: none; }
.bank-mismatch { font-size: 12px; color: var(--crit); margin-top: 8px; padding: 7px 10px; background: var(--crit-bg); border: 1px solid var(--crit-b); border-radius: 4px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REPORTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reports-layout { display: grid; grid-template-columns: 1fr 400px; gap: 16px; }
.reports-table-wrap { display: flex; flex-direction: column; gap: 14px; }

.reports-table { width: 100%; border-collapse: collapse; }
.reports-table th { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 400; }
.reports-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.reports-table tr:last-child td { border-bottom: none; }
.reports-table tr:hover td { background: var(--surf2); cursor: pointer; }
.reports-table tr.selected td { background: rgba(0,174,239,.06); }
.report-name { font-weight: 500; color: var(--tx); }
.report-period { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.report-generated { font-family: var(--mono); font-size: 10px; color: var(--tx3); }

/* Report preview */
.report-preview { background: var(--surf); border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
.report-preview-title { font-family: var(--jakarta); font-size: 16px; font-weight: 600; color: var(--tx); margin-bottom: 4px; }
.report-preview-period { font-family: var(--mono); font-size: 10px; color: var(--tx3); margin-bottom: 16px; }
.report-stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.report-stat-row:last-child { border-bottom: none; }
.report-stat-key { color: var(--tx3); }
.report-stat-val { font-family: var(--mono); font-size: 11px; color: var(--tx); font-weight: 500; }
.report-incident-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--blue); padding: 4px 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.report-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.report-bar-item { display: flex; align-items: center; gap: 10px; }
.report-bar-label { font-size: 11px; color: var(--tx2); min-width: 80px; }
.report-bar-track { flex: 1; height: 6px; background: var(--surf3); border-radius: 3px; overflow: hidden; }
.report-bar-fill { height: 100%; border-radius: 3px; background: var(--blue); }
.report-bar-val { font-family: var(--mono); font-size: 10px; color: var(--tx3); min-width: 20px; }

/* Quick actions */
.quick-actions { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surf); border: 1px solid var(--border); border-radius: 7px; }

/* ── In-app toast notifications ── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.toast-item {
  background: var(--surf2); border: 1px solid var(--border2);
  border-left: 3px solid var(--blue);
  border-radius: 6px; padding: 10px 16px;
  font-family: var(--mono); font-size: 11px; color: var(--tx2);
  max-width: 340px; line-height: 1.4;
  animation: toast-in .2s ease;
  pointer-events: auto;
}
.toast-item.ok      { border-left-color: var(--ok); }
.toast-item.warn    { border-left-color: var(--high); }
.toast-item.danger  { border-left-color: var(--crit); }
.toast-item.info    { border-left-color: var(--blue); }
@keyframes toast-in  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(8px); } }
.quick-actions select { background: var(--surf2); border: 1px solid var(--border2); border-radius: 5px; padding: 5px 10px; font-size: 12px; color: var(--tx); outline: none; }