/* ═══════════════════════════════════════════════════════════
   WAR INCIDENT TRACKER v2 — Simplified Dashboard Styles
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

#wit-root {
  --red:     #ff2828;
  --orange:  #ff8800;
  --yellow:  #ffd000;
  --green:   #00e87a;
  --blue:    #3b9eff;
  --cyan:    #00d4ff;
  --purple:  #bb55ff;
  --bg:      #09090c;
  --bg2:     #0e0f14;
  --bg3:     #141620;
  --bg4:     #1a1e2c;
  --border:  #1c2030;
  --border2: #252b3d;
  --text:    #e2e8f5;
  --muted:   #4a5570;
  --muted2:  #6b7a99;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'IBM Plex Sans', sans-serif;

  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
#wit-root *, #wit-root *::before, #wit-root *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ── TICKER ─────────────────────────────────────────────── */
#wit-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  background: #000;
  border-bottom: 1px solid var(--red);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 200;
}
#wit-ticker-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--red);
  flex-shrink: 0;
}
.wit-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; animation: wit-blink 1.2s ease-in-out infinite; }
.wit-dot.red { background:var(--red); box-shadow:0 0 8px var(--red); }
@keyframes wit-blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
#wit-ticker-track { flex:1; overflow:hidden; height:100%; display:flex; align-items:center; }
#wit-ticker-text {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  color: #9aa;
  padding-left: 100%;
  animation: wit-scroll 60s linear infinite;
}
@keyframes wit-scroll { from{transform:translateX(0);} to{transform:translateX(-100%);} }
#wit-clock { font-family:var(--mono); font-size:11px; color:var(--green); flex-shrink:0; }

/* ── STATS STRIP ────────────────────────────────────────── */
#wit-stats {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#wit-stats::-webkit-scrollbar { display:none; }
.wit-stat { display:flex; flex-direction:column; align-items:center; padding:0 18px; min-width:0; }
.wit-sn { font-family:var(--mono); font-size:18px; font-weight:700; color:var(--text); line-height:1; }
.wit-sn.confirmed { color:var(--green); }
.wit-sl { font-family:var(--mono); font-size:7px; letter-spacing:.18em; color:var(--muted2); margin-top:2px; }
.wit-sdiv { width:1px; height:24px; background:var(--border); flex-shrink:0; }
#wit-last-refresh { font-family:var(--mono); font-size:9px; color:var(--muted); margin-left:auto; flex-shrink:0; }

/* ── DATE FILTER BAR ────────────────────────────────────── */
#wit-date-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wit-date-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--muted2);
  flex-shrink: 0;
}
.wit-date-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--bg4);
  color: var(--muted2);
  cursor: pointer;
  transition: all .15s;
  text-transform: uppercase;
}
.wit-date-btn:hover { border-color: var(--blue); color: var(--blue); }
.wit-date-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 10px rgba(59,158,255,.35);
}
.wit-date-sep { flex:1; }
#wit-filter-type, #wit-filter-status {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}
#wit-filter-type:focus, #wit-filter-status:focus { border-color: var(--blue); }
#wit-refresh-btn {
  font-family: var(--mono);
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--bg4);
  color: var(--muted2);
  cursor: pointer;
  flex-shrink: 0;
}
#wit-refresh-btn:hover { color: var(--green); border-color: var(--green); }

/* ── CLASSIFICATION GRID ────────────────────────────────── */
#wit-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.wit-class-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.wit-class-card:hover {
  border-color: var(--border2);
  background: var(--bg4);
  transform: translateY(-1px);
}
.wit-class-card.active {
  border-color: var(--blue);
  background: rgba(59,158,255,.1);
  box-shadow: 0 0 12px rgba(59,158,255,.2);
}
.wcc-emoji { font-size: 20px; line-height: 1; }
.wcc-label {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted2);
  text-transform: uppercase;
  text-align: center;
}
.wcc-count {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.wit-class-card.active .wcc-count { color: var(--blue); }
.wit-class-card.active .wcc-label { color: var(--blue); }

/* ── PANEL ──────────────────────────────────────────────── */
#wit-panel { padding: 0 14px 40px; background: var(--bg); }
#wit-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
#wit-list-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted2);
  text-transform: uppercase;
}
#wit-active-filter {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--blue);
}

/* ── INCIDENT ROWS ──────────────────────────────────────── */
.wit-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s;
  animation: wit-fadeIn .25s ease both;
}
@keyframes wit-fadeIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }
.wit-row:hover { border-color: var(--border2); background: var(--bg3); }
.wit-row-sev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 56px;
  flex-shrink: 0;
  font-size: 16px;
}
.wit-row-body {
  flex: 1;
  padding: 8px 6px;
  min-width: 0;
}
.wit-row-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wit-row-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.wit-row-type-tag {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wit-row-loc {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted2);
}
.wit-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px 8px 6px;
  flex-shrink: 0;
  min-width: 70px;
}
.wit-row-time {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted2);
  text-align: right;
}
.wit-conf-pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}
.wit-row-arrow {
  font-size: 16px;
  color: var(--muted);
}

/* ── BADGES ─────────────────────────────────────────────── */
.wit-badge {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.wit-badge.confirmed { background:rgba(0,232,122,.12); color:var(--green); border:1px solid rgba(0,232,122,.25); }
.wit-badge.unverified { background:rgba(255,208,0,.1); color:var(--yellow); border:1px solid rgba(255,208,0,.25); }
.wit-badge.sources { background:rgba(59,158,255,.1); color:var(--blue); border:1px solid rgba(59,158,255,.25); }
.wit-cas-chip {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255,40,40,.12);
  color: var(--red);
  border: 1px solid rgba(255,40,40,.3);
}

/* ── EMPTY / LOADING ────────────────────────────────────── */
.wit-empty {
  padding: 40px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
}
.wit-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted2);
}
.wit-spin {
  width: 16px; height: 16px;
  border: 2px solid var(--border2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: wit-spinAnim .7s linear infinite;
}
@keyframes wit-spinAnim { to{transform:rotate(360deg);} }
#wit-load-more {
  display: block;
  width: 100%;
  margin: 12px 0;
  padding: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--muted2);
  border-radius: 6px;
  cursor: pointer;
}
#wit-load-more:hover { color: var(--blue); border-color: var(--blue); }

/* ── DRAWER ─────────────────────────────────────────────── */
#wit-backdrop {
  display: none; position:fixed; inset:0; background:rgba(0,0,0,.7);
  z-index:900; backdrop-filter:blur(3px);
}
#wit-backdrop.open { display:block; }
#wit-drawer {
  position: fixed;
  right: -100%;
  top: 0;
  width: min(480px, 96vw);
  height: 100%;
  background: var(--bg2);
  border-left: 1px solid var(--border2);
  z-index: 1000;
  overflow-y: auto;
  transition: right .28s cubic-bezier(.4,0,.2,1);
}
#wit-drawer.open { right: 0; }
#wit-drawer-inner { padding: 20px 20px 40px; }
#wit-drawer-close {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--muted2);
  cursor: pointer;
  text-transform: uppercase;
}
#wit-drawer-close:hover { color: var(--red); border-color: var(--red); }
#wd-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
#wd-type-emoji { margin-bottom:10px; display:flex; align-items:center; gap:10px; }
#wit-drawer h2 { font-size:16px; font-weight:700; line-height:1.4; margin-bottom:12px; }
#wd-cas {
  padding: 8px 12px;
  background: rgba(255,40,40,.1);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  margin-bottom: 12px;
}
#wd-meta-box { margin-bottom:16px; }
.wd-meta-row { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); }
.wd-mkey { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--muted2); min-width:110px; flex-shrink:0; text-transform:uppercase; }
.wd-mval { font-family:var(--mono); font-size:11px; color:var(--text); }
.wd-src-link {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--blue);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wd-src-link:hover { text-decoration: underline; }
#wd-actions { margin-top: 18px; }
#wd-primary-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 10px 20px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}
#wd-primary-link:hover { opacity: .85; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 600px) {
  #wit-class-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
  #wit-date-bar { gap: 6px; padding: 8px 10px; }
  .wit-date-sep { display: none; }
  #wit-filter-type, #wit-filter-status { font-size: 9px; padding: 4px 6px; }
  #wit-panel { padding: 0 10px 30px; }
  .wit-stat { padding: 0 10px; }
}