/* =====================================================================
   Uncovered UFO — Modern dashboard skin (scoped to /dashboard)
   Loads AFTER style.css. Keeps the dark palette + green accent but
   restyles the analysis page to feel like a modern data tool
   (Grafana/Kibana dark mode): sans UI type, elevated cards, a
   prominent query bar, faceted results with match highlighting.
   ===================================================================== */
:root{
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --d-bg:#0b0e12; --d-panel:#12161c; --d-panel-2:#171c23; --d-line:#252c36;
  --d-text:#dfe6ee; --d-muted:#8b96a5; --d-accent:#33ff99; --d-accent-dim:#1f7d57;
  --d-chip:#1c2530; --d-radius:10px; --d-shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);
}
body{ background:var(--d-bg); }
/* Sans UI everywhere on the dashboard; keep mono only for numeric/data accents */
.dashboard-shell, .dashboard-shell input, .dashboard-shell select, .dashboard-shell button,
.dashboard-main, .query-bar, .panel, .panel p, .result-card, .news-card,
.dashboard-filters label, .dashboard-filters{ font-family:var(--ui); }
.kpi-card strong, .result-score, .timeline-axis, .graph-stats, .count-badge{ font-family:var(--font-mono); }

/* ---------- Header: calmer, less ALL-CAPS-typewriter ---------- */
.header h1{ font-family:var(--ui); font-weight:700; letter-spacing:.04em; }

/* ---------- Filters sidebar -> clean control panel ---------- */
.dashboard-filters{ background:var(--d-panel); border:1px solid var(--d-line); border-radius:var(--d-radius); }
.dashboard-filters h2{ font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; color:var(--d-muted); text-transform:uppercase; }
.dashboard-filters label{ color:var(--d-muted); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; margin-top:.5rem; }
.dashboard-filters input, .dashboard-filters select{
  background:var(--d-panel-2); border:1px solid var(--d-line); color:var(--d-text);
  border-radius:8px; padding:.55rem .65rem; font-size:.85rem; transition:border-color .12s, box-shadow .12s;
}
.dashboard-filters input:focus, .dashboard-filters select:focus, .query-bar input:focus{
  outline:none; border-color:var(--d-accent-dim); box-shadow:0 0 0 3px rgba(51,255,153,.15);
}
.dashboard-filters .checkbox-row{ color:var(--d-text); font-size:.82rem; text-transform:none; letter-spacing:0; }

/* ---------- Prominent ELK-style query bar ---------- */
.query-bar{
  position:sticky; top:0; z-index:30; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(18,22,28,.98), rgba(18,22,28,.92));
  backdrop-filter:blur(6px); border:1px solid var(--d-line); border-radius:var(--d-radius);
  padding:.6rem .7rem; margin-bottom:var(--s-4); box-shadow:var(--d-shadow);
}
.query-bar .q-wrap{ position:relative; flex:1; min-width:240px; }
.query-bar .q-wrap::before{ content:"⌕"; position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--d-muted); font-size:1.1rem; }
.query-bar input{
  width:100%; background:var(--d-bg); border:1px solid var(--d-line); color:var(--d-text);
  border-radius:8px; padding:.7rem .8rem .7rem 2.1rem; font-size:1rem;
}
.query-bar input::placeholder{ color:var(--d-muted); }
.count-badge{ white-space:nowrap; background:var(--d-chip); color:var(--d-accent); border:1px solid var(--d-accent-dim);
  border-radius:999px; padding:.4rem .8rem; font-size:.8rem; font-weight:600; }
.q-sort{ background:var(--d-panel-2); border:1px solid var(--d-line); color:var(--d-text); border-radius:8px; padding:.55rem .6rem; font-size:.82rem; }
/* active-filter chips */
.filter-chips{ display:flex; gap:.4rem; flex-wrap:wrap; width:100%; }
.filter-chips:empty{ display:none; }
.filter-chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--d-chip); border:1px solid var(--d-line);
  color:var(--d-text); border-radius:999px; padding:.25rem .6rem; font-size:.76rem; }
.filter-chip b{ color:var(--d-muted); font-weight:600; }
.filter-chip button{ background:none; border:none; color:var(--d-muted); cursor:pointer; font-size:.95rem; line-height:1; padding:0; }
.filter-chip button:hover{ color:var(--red-hot); }

/* ---------- Panels -> elevated cards ---------- */
.panel{ background:var(--d-panel); border:1px solid var(--d-line); border-radius:var(--d-radius); box-shadow:var(--d-shadow); }
.panel h2{ font-family:var(--ui); font-size:.78rem; letter-spacing:.12em; color:var(--d-muted); text-transform:uppercase; }
.panel p{ color:var(--d-text); }

/* ---------- KPI cards ---------- */
.kpi-grid{ border:none; background:none; gap:.6rem; }
.kpi-card{ background:var(--d-panel); border:1px solid var(--d-line); border-radius:var(--d-radius); box-shadow:var(--d-shadow); }
.kpi-card strong{ color:var(--d-accent); font-size:1.6rem; }
.kpi-card span{ color:var(--d-muted); }

/* ---------- Result cards (Evidence Queue) ---------- */
#results{ display:flex; flex-direction:column; gap:.5rem; }
.result-card{ background:var(--d-panel-2); border:1px solid var(--d-line); border-radius:var(--d-radius);
  padding:.7rem; gap:.7rem; transition:transform .1s, border-color .12s, box-shadow .12s; cursor:pointer; }
.result-card:hover{ transform:translateY(-1px); border-color:var(--d-accent-dim); box-shadow:var(--d-shadow); }
.result-card.active{ border-color:var(--d-accent); box-shadow:0 0 0 1px var(--d-accent-dim); }
.result-card strong{ color:var(--d-text); font-size:.9rem; }
.result-card small{ color:var(--d-muted); }
.result-card p{ color:#b9c2cd; font-size:.84rem; }
.result-chips{ display:flex; gap:.35rem; flex-wrap:wrap; margin:.3rem 0; }
.r-chip{ background:var(--d-chip); border:1px solid var(--d-line); color:var(--d-muted); border-radius:6px; padding:.1rem .45rem; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
.result-score{ background:var(--d-accent-dim); color:#04150d; border-radius:6px; padding:.1rem .45rem; font-size:.7rem; font-weight:700; }
/* match highlighting */
mark{ background:rgba(51,255,153,.22); color:var(--d-accent); padding:0 .1em; border-radius:2px; }

/* ---------- Balance the columns: panels scroll internally (Kibana-style) ----------
   Selected Record was unbounded and ballooned the right column, leaving a huge
   empty void beside the (short) Timeline+Graph column. Cap it with internal scroll. */
.detail-panel{ max-height:560px; overflow:auto; }
.result-list{ max-height:620px; }   /* keep the queue scroll a touch taller, in sync visually */
/* Let the left column's graph stretch to use the space instead of going blank */
.graph-wrap{ height:600px; }

/* ---------- Inputs sheen for range ---------- */
.dashboard-filters input[type=range]{ accent-color:var(--d-accent); }

/* ---------- Mobile polish ---------- */
@media (max-width:1100px){
  .query-bar{ position:static; }
}