/* ============================================================
   xaray — radiographic YARA hunting UI
   ------------------------------------------------------------
   A design layer over Bootstrap 5.3. We do not fork Bootstrap;
   we (1) remap its semantic colour tokens to the xaray palette
   and (2) add a small custom component layer (top bar, film
   panel, scan-line, status tags). Light is the default theme;
   `data-bs-theme="dark"` flips to the full radiographic lightbox.

   Palette is intentionally narrow: light blues, blacks, greys,
   white — plus a single muted red reserved for errors and
   destructive actions. Status is read by luminosity (a match
   "lights up" blue) rather than by hue.
   ============================================================ */

:root {
  /* ---- core palette ---- */
  --xa-ink:#0A0E14;
  --xa-mist:#EDF1F5;
  --xa-paper:#FFFFFF;
  --xa-hair:#D5DEE7;
  --xa-ink-text:#0B1118;
  --xa-steel:#556579;
  --xa-steel-2:#7B8C9E;

  --xa-xray:#5BC2FF;        /* the signature glow */
  --xa-xray-soft:#8FD6FF;
  --xa-xray-deep:#1E7FD4;   /* primary actions / links */
  --xa-danger:#C9605B;      /* errors + destructive ONLY */
  --xa-danger-soft:#E08A86;

  --xa-mono:Consolas,"Cascadia Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,"Liberation Mono",monospace;

  /* ---- film / evidence panel ---- */
  --xa-film:#FFFFFF; --xa-film-2:#F5F9FC; --xa-film-line:#E6EEF5;
  --xa-film-hair:#D9E2EA; --xa-row-line:#EDF2F7;
  --xa-film-hd:#4C6A82; --xa-row-text:#3A4856; --xa-row-strong:#0B1118; --xa-row-mute:#54677A;
  --xa-clear:#8EA1B2;
  --xa-hit:#0E6FCB; --xa-hit-glow:none;
  --xa-scan-strength:.22;   /* scan-line opacity, bumped in dark */

  /* ---- top bar ---- */
  --xa-brand:#1769B3; --xa-brand-glow:none;
  --xa-bar-bg:#FFFFFF; --xa-bar-border:#D5DEE7; --xa-bar-text:#0B1118;
  --xa-bar-link:#5A6B7B; --xa-bar-link-hover:#0B1118; --xa-bar-link-hover-bg:#EDF1F5;
  --xa-toggle-bg:#F1F5F9; --xa-toggle-border:#D5DEE7; --xa-toggle-text:#5A6B7B;

  /* ---- primary button (New job etc.) ---- */
  --xa-btn-bg:#1E7FD4; --xa-btn-bg-hover:#1769B3; --xa-btn-text:#FFFFFF; --xa-btn-pl:#BFE4FF;

  /* ---- Bootstrap remap (light) ----
     These *-rgb vars feed .bg-*, .text-*, badges, table accents. */
  --bs-body-bg:var(--xa-mist);
  --bs-body-color:var(--xa-ink-text);
  --bs-border-color:var(--xa-hair);
  --bs-body-font-family:var(--xa-mono);
  --bs-font-sans-serif:var(--xa-mono);
  --bs-body-font-size:.9rem;

  --bs-primary:#1E7FD4;   --bs-primary-rgb:30,127,212;
  --bs-info:#6EC1E4;      --bs-info-rgb:110,193,228;
  --bs-success:#5B7184;   --bs-success-rgb:91,113,132;    /* finished/done -> slate (no green) */
  --bs-warning:#5BC2FF;   --bs-warning-rgb:91,194,255;    /* running/assigned -> xray blue */
  --bs-danger:#C9605B;    --bs-danger-rgb:201,96,91;      /* errors/destructive -> muted red */
  --bs-secondary:#5A6B7B; --bs-secondary-rgb:90,107,123;
  --bs-light:#F1F5F9;     --bs-light-rgb:241,245,249;
  --bs-dark:#0A0E14;      --bs-dark-rgb:10,14,20;
  --bs-link-color:#1769B3; --bs-link-color-rgb:23,105,179;
  --bs-link-hover-color:#0E5C9E; --bs-link-hover-color-rgb:14,92,158;
}

/* ============================================================
   Dark theme — full radiographic lightbox
   ============================================================ */
[data-bs-theme="dark"] {
  --xa-mist:#070A0F; --xa-paper:#0F1620; --xa-ink-text:#D7E3EE;
  --xa-hair:#1D2B3A; --xa-steel:#94AABE; --xa-steel-2:#8498AB;

  --xa-film:#0D1320; --xa-film-2:#0A1018; --xa-film-line:#13314A;
  --xa-film-hair:#1D2B3A; --xa-row-line:rgba(29,43,58,.6);
  --xa-film-hd:#8AA8C2; --xa-row-text:#C2D2E1; --xa-row-strong:#E6EDF3; --xa-row-mute:#A8BCCE;
  --xa-clear:#5E7890;
  --xa-hit:#5BC2FF; --xa-hit-glow:0 0 12px rgba(91,194,255,.5);
  --xa-scan-strength:.5;

  --xa-brand:#5BC2FF; --xa-brand-glow:0 0 16px rgba(91,194,255,.5);
  --xa-bar-bg:#0A0E14; --xa-bar-border:#000000; --xa-bar-text:#E6EDF3;
  --xa-bar-link:#9FB0C0; --xa-bar-link-hover:#FFFFFF; --xa-bar-link-hover-bg:#161D29;
  --xa-toggle-bg:#161D29; --xa-toggle-border:#243140; --xa-toggle-text:#9FB0C0;
  --xa-btn-bg:#5BC2FF; --xa-btn-bg-hover:#82D2FF; --xa-btn-text:#08121C; --xa-btn-pl:#0E5C9E;

  --bs-body-bg:var(--xa-mist);
  --bs-body-color:var(--xa-ink-text);
  --bs-border-color:var(--xa-hair);
  /* semantic colours keep the same hues across themes */
}

/* ============================================================
   Base typography
   ============================================================ */
body {
  font-family:var(--xa-mono);
  font-size:14px;
  background-color:var(--bs-body-bg);
  color:var(--bs-body-color);
}
.btn, .form-control, .form-select, .badge, .nav-link, .navbar-brand,
.input-group-text, h1, h2, h3, h4, h5, h6 { font-family:var(--xa-mono); }

a { color:var(--xa-xray-deep); }
a:hover { color:var(--bs-link-hover-color); }
[data-bs-theme="dark"] a { color:var(--xa-xray); }

.eyebrow {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--xa-steel);
}

/* ============================================================
   Top bar (.xa-bar replaces navbar-dark bg-dark)
   ============================================================ */
.xa-bar {
  background:var(--xa-bar-bg);
  color:var(--xa-bar-text);
  border-bottom:1px solid var(--xa-bar-border);
}
.xa-bar .navbar-brand {
  font-weight:700; letter-spacing:.02em;
  color:var(--xa-brand); text-shadow:var(--xa-brand-glow);
}
.xa-bar .navbar-brand:hover { color:var(--xa-brand); }
.xa-bar .nav-link { color:var(--xa-bar-link); border-radius:3px; padding:6px 12px; }
.xa-bar .nav-link:hover,
.xa-bar .nav-link:focus { color:var(--xa-bar-link-hover); background:var(--xa-bar-link-hover-bg); }
.xa-bar .nav-link.active { color:var(--xa-ink); background:var(--xa-xray); }

/* nav-item dividers (desktop only; navbar stacks below lg) */
@media (min-width: 992px) {
  .xa-bar .navbar-nav { align-items:center; }
  .xa-bar .navbar-nav .nav-item + .nav-item {
    position:relative; margin-left:6px; padding-left:6px;
  }
  .xa-bar .navbar-nav .nav-item + .nav-item::before {
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:1px; height:1.1em; background:var(--xa-hair);
  }
}
.xa-bar .navbar-text { color:var(--xa-bar-link); }
.xa-bar .navbar-text b,
.xa-bar .navbar-text strong { color:var(--xa-bar-text); font-weight:400; }
.xa-bar .navbar-text .xa-grp { color:var(--xa-brand); }
.xa-bar .navbar-text a { color:var(--xa-bar-link); }
.xa-bar .navbar-text a:hover { color:var(--xa-bar-link-hover); }
.xa-bar .navbar-toggler { border-color:var(--xa-bar-border); }

/* theme toggle */
.xa-toggle {
  background:var(--xa-toggle-bg); color:var(--xa-toggle-text);
  border:1px solid var(--xa-toggle-border); border-radius:4px;
  padding:5px 10px; font-family:var(--xa-mono); font-size:12px; cursor:pointer;
}
.xa-toggle:hover { color:var(--xa-bar-link-hover); border-color:var(--xa-xray); }

/* ============================================================
   Buttons — recolour each variant via Bootstrap's component vars
   (.btn-* set --bs-btn-* with literal hex, so --bs-primary alone
   won't reach them).
   ============================================================ */
.btn-primary {
  --bs-btn-bg:#1E7FD4; --bs-btn-border-color:#1E7FD4; --bs-btn-color:#fff;
  --bs-btn-hover-bg:#1769B3; --bs-btn-hover-border-color:#1769B3; --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:#155A99; --bs-btn-active-border-color:#155A99;
}
.btn-info {
  --bs-btn-bg:#6EC1E4; --bs-btn-border-color:#6EC1E4; --bs-btn-color:#06121F;
  --bs-btn-hover-bg:#86CEEC; --bs-btn-hover-border-color:#86CEEC; --bs-btn-hover-color:#06121F;
}
.btn-warning {
  --bs-btn-bg:#5BC2FF; --bs-btn-border-color:#5BC2FF; --bs-btn-color:#06121F;
  --bs-btn-hover-bg:#82D2FF; --bs-btn-hover-border-color:#82D2FF; --bs-btn-hover-color:#06121F;
}
.btn-success {
  --bs-btn-bg:#5B7184; --bs-btn-border-color:#5B7184; --bs-btn-color:#fff;
  --bs-btn-hover-bg:#4D6173; --bs-btn-hover-border-color:#4D6173; --bs-btn-hover-color:#fff;
}
.btn-danger {
  --bs-btn-bg:#C9605B; --bs-btn-border-color:#C9605B; --bs-btn-color:#fff;
  --bs-btn-hover-bg:#B5524D; --bs-btn-hover-border-color:#B5524D; --bs-btn-hover-color:#fff;
}
.btn-outline-primary {
  --bs-btn-color:#1769B3; --bs-btn-border-color:#1E7FD4;
  --bs-btn-hover-bg:#1E7FD4; --bs-btn-hover-border-color:#1E7FD4; --bs-btn-hover-color:#fff;
}
.btn-outline-secondary {
  --bs-btn-color:var(--xa-steel); --bs-btn-border-color:var(--xa-hair);
  --bs-btn-hover-bg:var(--xa-xray); --bs-btn-hover-border-color:var(--xa-xray); --bs-btn-hover-color:var(--xa-ink);
}
.btn-light {
  --bs-btn-bg:var(--xa-film); --bs-btn-border-color:var(--xa-film-hair); --bs-btn-color:var(--xa-row-text);
  --bs-btn-hover-bg:var(--xa-film-2); --bs-btn-hover-border-color:var(--xa-xray); --bs-btn-hover-color:var(--xa-row-strong);
}

/* The dashboard's primary CTA. */
.xa-btn {
  background:var(--xa-btn-bg); color:var(--xa-btn-text); border:0; border-radius:4px;
  padding:9px 16px; font-family:var(--xa-mono); font-size:13px; font-weight:700;
  letter-spacing:.02em; cursor:pointer; text-decoration:none; display:inline-block;
}
.xa-btn:hover { background:var(--xa-btn-bg-hover); color:var(--xa-btn-text); }
.xa-btn .pl { color:var(--xa-btn-pl); margin-right:7px; }

/* ============================================================
   Forms — blue focus ring
   ============================================================ */
.form-control, .form-select {
  background-color:var(--xa-paper); border-color:var(--xa-hair); color:var(--xa-ink-text);
}
.form-control:focus, .form-select:focus {
  border-color:var(--xa-xray);
  box-shadow:0 0 0 .2rem rgba(91,194,255,.25);
}
.form-check-input:checked { background-color:var(--xa-xray-deep); border-color:var(--xa-xray-deep); }
.form-check-input:focus { border-color:var(--xa-xray); box-shadow:0 0 0 .2rem rgba(91,194,255,.25); }

/* Repository checkboxes (/jobs/add) — solid outline so the boxes read on
   both the light sheet (black) and the dark lightbox (white). */
#form_add .form-check-input { border-color:#000; border-width:1.5px; }
[data-bs-theme="dark"] #form_add .form-check-input { border-color:#fff; }

/* ============================================================
   YARA editor (CodeMirror, /jobs/add)
   Styled to match form inputs and follow the light/dark toggle.
   Monochrome-blue syntax keeps the radiographic identity. We set
   theme:"xaray" on the editor so CodeMirror's default-theme token
   colours don't apply and these rules win cleanly.
   ============================================================ */
.CodeMirror {
  height:400px; border:1px solid var(--xa-hair); border-radius:5px;
  background:var(--xa-paper); color:var(--xa-ink-text);
  font-family:var(--xa-mono); font-size:13px; line-height:1.55;
}
.CodeMirror-focused {
  border-color:var(--xa-xray); box-shadow:0 0 0 .2rem rgba(91,194,255,.25);
}
.CodeMirror-gutters { background:var(--xa-mist); border-right:1px solid var(--xa-hair); }
.CodeMirror-linenumber { color:var(--xa-steel-2); }
.CodeMirror-cursor { border-left:1px solid var(--xa-ink-text); }
.CodeMirror-selected { background:rgba(91,194,255,.20) !important; }
.CodeMirror-matchingbracket {
  color:var(--xa-xray) !important; font-weight:700; text-decoration:underline;
}

/* syntax tokens — light */
.cm-comment    { color:#8A99A8; font-style:italic; }
.cm-keyword    { color:#1769B3; font-weight:700; }
.cm-def        { color:#1E7FD4; font-weight:700; }
.cm-builtin    { color:#1E7FD4; }
.cm-atom       { color:#556579; }
.cm-variable-2 { color:#0E6FCB; }
.cm-string,
.cm-string-2   { color:#2F6F8F; }
.cm-number     { color:#7B8C9E; }

/* syntax tokens — dark */
[data-bs-theme="dark"] .cm-comment    { color:#7E93A6; }
[data-bs-theme="dark"] .cm-keyword    { color:#5BC2FF; }
[data-bs-theme="dark"] .cm-def        { color:#8FD6FF; }
[data-bs-theme="dark"] .cm-builtin    { color:#82D2FF; }
[data-bs-theme="dark"] .cm-atom       { color:#94AABE; }
[data-bs-theme="dark"] .cm-variable-2 { color:#5BC2FF; }
[data-bs-theme="dark"] .cm-string,
[data-bs-theme="dark"] .cm-string-2   { color:#7FC4E0; }
[data-bs-theme="dark"] .cm-number     { color:#A8BCCE; }

/* ============================================================
   Badges (status) — utilities already read --bs-*-rgb, but pin
   text colour for legibility.
   ============================================================ */
.badge { letter-spacing:.06em; font-weight:600; }
.badge.bg-warning, .badge.bg-info { color:#06121F !important; }

/* ============================================================
   Tables, code plates
   ============================================================ */
.table {
  --bs-table-bg:transparent;
  --bs-table-color:var(--xa-row-text);
  --bs-table-border-color:var(--xa-hair);
  --bs-table-striped-bg:rgba(91,194,255,.05);
  --bs-table-striped-color:var(--xa-row-text);
  --bs-table-hover-bg:rgba(91,194,255,.09);
  --bs-table-hover-color:var(--xa-row-strong);
}

pre {
  background:var(--xa-film); color:var(--xa-row-text);
  border:1px solid var(--xa-film-hair) !important; border-radius:5px;
}
.bg-light { background-color:var(--xa-film) !important; color:var(--xa-row-text); }
.pre-scrollable { max-height:400px; overflow-y:auto; }

#form_error_box, #form_info_box { padding-bottom:10px; text-align:center; }

/* ============================================================
   Signature: the film panel + scan-line
   ============================================================ */
.xa-film {
  position:relative;
  background:linear-gradient(var(--xa-film), var(--xa-film-2));
  border:1px solid var(--xa-film-hair); border-radius:6px; overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(10,14,20,.4);
}
.xa-film::before {            /* faint radiographic grid */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--xa-film-line) 1px, transparent 1px);
  background-size:100% 34px; opacity:.5;
}
/* keep all real content above the grid (DataTables injects its own wrapper) */
.xa-film .dataTables_wrapper,
.xa-film .dt-container { position:relative; z-index:2; }
.xa-film-hd {
  position:relative; z-index:2; display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--xa-film-hair); color:var(--xa-film-hd);
}
.xa-film-hd .dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--xa-xray); box-shadow:0 0 10px var(--xa-xray);
}
.xa-film-hd .rt {
  margin-left:auto; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.xa-film .table { position:relative; z-index:2; margin-bottom:0; }
.xa-film .table > :not(caption) > * > * { background-color:transparent; color:var(--xa-row-text); }
.xa-film thead th {
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  color:var(--xa-film-hd); border-bottom-color:var(--xa-film-hair);
}
.xa-film tbody td { border-bottom-color:var(--xa-row-line); }
.xa-film .rule { color:var(--xa-row-strong); }
.xa-film .repo, .xa-film .agent { color:var(--xa-row-mute); }
.xa-film .id { color:var(--xa-film-hd); }

/* match = exposed (glows); clear = dim */
.xa-hit { color:var(--xa-hit); font-weight:700; text-shadow:var(--xa-hit-glow); }
.xa-clear { color:var(--xa-clear); }

/* status tags (used where a compact inline status reads better than a button) */
.xa-tag {
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px;
  border-radius:3px; border:1px solid var(--xa-film-hair); color:var(--xa-row-mute);
}
.xa-tag.run { color:var(--xa-xray); border-color:rgba(91,194,255,.4); background:rgba(91,194,255,.08); }
.xa-tag.fin { color:var(--xa-row-mute); border-color:var(--xa-film-hair); }
.xa-tag.err { color:var(--xa-danger-soft); border-color:rgba(201,96,91,.45); background:rgba(201,96,91,.1); }

/* the scan-line sweep — runs once on load */
.xa-scan {
  position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none; z-index:3;
  background:linear-gradient(180deg, transparent,
              rgba(91,194,255,calc(var(--xa-scan-strength) * .7)) 60%,
              rgba(143,214,255,var(--xa-scan-strength)) 88%, transparent);
  box-shadow:0 0 22px rgba(91,194,255,calc(var(--xa-scan-strength) * .7));
  animation:xa-sweep 2.1s cubic-bezier(.45,.05,.3,1) .25s 1 both;
}
@keyframes xa-sweep { from { transform:translateY(-130px); } to { transform:translateY(120vh); } }

/* command strip above the film */
.xa-strip { display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.xa-strip .count { display:flex; align-items:baseline; gap:10px; }
.xa-strip .count .n { font-size:30px; font-weight:700; letter-spacing:-.02em; }
.xa-strip .grow { flex:1; }

/* ============================================================
   Footer
   ============================================================ */
footer .border-top { border-top-color:var(--xa-hair) !important; }
footer .text-muted { color:var(--xa-steel) !important; }

/* ============================================================
   Accessibility
   ============================================================ */
:focus-visible { outline:2px solid var(--xa-xray); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
  .xa-scan { animation:none; display:none; }
}