/* Threat Checker — console theme layered on top of Bootstrap 5.3 dark.
   Direction: security operations panel. Deep graphite surfaces, a calm cyan
   accent (status colours stay reserved for verdicts), monospace for the data
   that is literally code-like (domains, IPs, timestamps). */

:root,
[data-bs-theme="dark"] {
  --tc-bg:        #0b0e14;
  --tc-surface:   #121826;
  --tc-surface-2: #171e2e;
  --tc-border:    #263041;
  --tc-text:      #e7ebf3;
  --tc-muted:     #8b95ab;
  --tc-accent:    #38bdf8;
  --tc-accent-2:  #22d3ee;

  --bs-body-bg: var(--tc-bg);
  --bs-body-color: var(--tc-text);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-bg: var(--tc-surface);
  --bs-tertiary-bg: var(--tc-surface-2);
  --bs-border-color: var(--tc-border);
  --bs-border-color-translucent: var(--tc-border);

  --bs-primary: var(--tc-accent);
  --bs-primary-rgb: 56, 189, 248;
  --bs-link-color: var(--tc-accent);
  --bs-link-hover-color: var(--tc-accent-2);

  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .45rem;

  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(56,189,248,.06), transparent 60%),
    var(--tc-bg);
  color: var(--tc-text);
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  letter-spacing: .1px;
}

.mono, .font-mono { font-family: var(--bs-font-monospace); }

/* ---- top bar ------------------------------------------------------------ */
.navbar {
  background: color-mix(in oklab, var(--tc-surface) 88%, transparent) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tc-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 24px -18px rgba(0,0,0,.8);
}
.navbar::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--tc-accent), var(--tc-accent-2), transparent 70%);
  opacity: .8;
}
.brand-mark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; letter-spacing: .2px;
}
.brand-mark .glyph {
  width: 1.6rem; height: 1.6rem; border-radius: .45rem;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(56,189,248,.25), rgba(34,211,238,.12));
  border: 1px solid rgba(56,189,248,.4);
  color: var(--tc-accent);
}
.navbar .nav-link {
  color: var(--tc-muted); font-weight: 500; font-size: .95rem;
  padding: .35rem .8rem; border-radius: .5rem; transition: .15s;
}
.navbar .nav-link:hover { color: var(--tc-text); background: rgba(255,255,255,.04); }
.navbar .nav-link.active {
  color: var(--tc-text);
  background: rgba(56,189,248,.12);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.25);
}
.user-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .6rem; border-radius: .5rem;
  background: var(--tc-surface-2); border: 1px solid var(--tc-border);
  font-size: .85rem;
}
.user-chip .avatar {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: linear-gradient(160deg, var(--tc-accent), var(--tc-accent-2));
  color: #05202b;
}

/* ---- surfaces ----------------------------------------------------------- */
.card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--bs-border-radius);
}
.table { --bs-table-bg: transparent; border-color: var(--tc-border); }
.table > :not(caption) > * > * { border-color: var(--tc-border); }
.table thead th {
  color: var(--tc-muted); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.table-hover > tbody > tr:hover > * { background: rgba(255,255,255,.03); }

hr { border-color: var(--tc-border); opacity: 1; }
h4, h5, h6 { letter-spacing: .2px; }
.text-secondary { color: var(--tc-muted) !important; }

/* ---- controls ----------------------------------------------------------- */
.form-control, .form-select {
  background: var(--tc-surface-2); border-color: var(--tc-border); color: var(--tc-text);
}
.form-control:focus, .form-select:focus {
  background: var(--tc-surface-2); color: var(--tc-text);
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 .2rem rgba(56,189,248,.18);
}
.btn { border-radius: .5rem; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--tc-accent); --bs-btn-border-color: var(--tc-accent);
  --bs-btn-hover-bg: var(--tc-accent-2); --bs-btn-hover-border-color: var(--tc-accent-2);
  --bs-btn-active-bg: var(--tc-accent-2);
  --bs-btn-color: #04222e; --bs-btn-hover-color: #04222e; --bs-btn-active-color: #04222e;
  font-weight: 600;
}
.form-switch .form-check-input:checked {
  background-color: var(--tc-accent); border-color: var(--tc-accent);
}
.form-check-input:focus { border-color: var(--tc-accent); box-shadow: 0 0 0 .2rem rgba(56,189,248,.18); }

/* verdict / status pills keep their semantic colours but sit better on dark */
.badge { font-weight: 600; letter-spacing: .2px; }
.dot { box-shadow: 0 0 0 3px rgba(255,255,255,.04); }

/* subtle entrance so pages don't pop harshly */
main, .container-fluid > .fade-in { animation: tc-fade .25s ease-out; }
@keyframes tc-fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(56,189,248,.10), transparent 60%),
    var(--tc-bg);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--tc-surface); border: 1px solid var(--tc-border);
  border-radius: 1rem; padding: 2rem 1.75rem;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
}