/* ═══════════════════════════════════════════════════════════════════════
   FileFerret — Securitas Machina corporate theme
   Security-console aesthetic shared with www.securitasmachina.org:
   deep slate canvas, signal-green accent, cyan secondary, mono detailing.
   All tokens mirror the corporate site (assets/css/style.css). No external
   assets — fully self-hosted.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Shared, theme-independent brand tokens (accent identity + geometry). */
  --sm-accent: #29e0a8;       /* signal green */
  --sm-accent-ink: #001b12;   /* text on top of the green accent (works on both themes) */
  --sm-accent-2: #36b8ff;     /* cyan — links/code (dark theme) */
  --sm-danger: #ff5d6c;
  --sm-warn: #f7b955;
  --sm-radius: 14px;
  --sm-radius-sm: 9px;
  --sm-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, monospace;

  /* Default = DARK palette (so a no-JS / pre-script paint is the brand dark, no flash). */
  --sm-bg: #0b0f14;
  --sm-bg-elev: #11171f;
  --sm-bg-card: #131b25;
  --sm-border: #1f2a37;
  --sm-border-hi: #2b3a4d;
  --sm-text: #e6edf3;
  --sm-text-dim: #9aa7b4;
  --sm-muted: #6b7785;
  --sm-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --sm-glow: 8%;
}

/* ── Light theme — professional, mirrors www.securitasmachina.org light mode ── */
[data-bs-theme="light"] {
  --sm-bg: #f4f6fa;           /* soft slate-tinted white canvas */
  --sm-bg-elev: #ffffff;
  --sm-bg-card: #ffffff;
  --sm-border: #e3e8ef;
  --sm-border-hi: #cdd5e0;
  --sm-text: #0d1620;         /* near-black slate for crisp reading */
  --sm-text-dim: #46566a;
  --sm-muted: #75839a;
  --sm-accent-2: #0f73c4;     /* darker blue so links/code stay readable on white */
  --sm-shadow: 0 8px 24px -14px rgba(20, 40, 70, .22);
  --sm-glow: 5%;
}

/* ── Bootstrap remap (drives both themes via the theme-aware --sm-* tokens) ── */
[data-bs-theme="dark"], [data-bs-theme="light"] {
  --bs-body-bg: var(--sm-bg);
  --bs-body-color: var(--sm-text);
  --bs-secondary-color: var(--sm-text-dim);
  --bs-tertiary-color: var(--sm-muted);
  --bs-tertiary-bg: var(--sm-bg-elev);
  --bs-border-color: var(--sm-border);
  --bs-link-color: var(--sm-accent-2);
  --bs-link-hover-color: color-mix(in srgb, var(--sm-accent-2) 78%, var(--sm-text));
  --bs-primary: var(--sm-accent);
  --bs-primary-rgb: 41, 224, 168;
  --bs-danger: var(--sm-danger);
  --bs-warning: var(--sm-warn);
  --bs-info: var(--sm-accent-2);
  /* Navbar links adapt to the active theme. */
  --bs-navbar-color: var(--sm-text-dim);
  --bs-navbar-hover-color: var(--sm-text);
  --bs-navbar-active-color: var(--sm-text);
  --bs-navbar-brand-color: var(--sm-text);
  --bs-navbar-toggler-border-color: var(--sm-border-hi);
}
[data-bs-theme="dark"]  { --bs-emphasis-color: #ffffff; }
[data-bs-theme="light"] { --bs-emphasis-color: #0d1620; }

/* Hamburger toggler icon must flip stroke colour with the theme. */
[data-bs-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(13,22,32,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body {
  background-color: var(--sm-bg);
  /* Corporate atmosphere: faint accent/cyan radials, fixed. Glow strength is
     theme-aware (--sm-glow) so light mode stays clean and professional. Derives
     from the accent variable so end-customer branding carries into the canvas. */
  background-image:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--sm-accent) var(--sm-glow), transparent), transparent 60%),
    radial-gradient(700px 400px at 10% 0%, color-mix(in srgb, var(--sm-accent-2) var(--sm-glow), transparent), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ── Header / navigation ────────────────────────────────────────────── */
.navbar.bg-dark {
  background: color-mix(in srgb, var(--sm-bg) 82%, transparent) !important;
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--sm-border) !important;
  /* backdrop-filter creates a stacking context on the navbar; without an explicit z-index
     it sits at z-index:auto (~0), so positioned page content (e.g. the Indexer "Live Progress"
     sticky panel, z-index:2) paints OVER the nav dropdown trapped inside this context.
     Lift the whole navbar above page content so its dropdowns render on top. */
  position: relative;
  z-index: 1030;
}
/* Ensure open nav dropdowns clear sticky page panels regardless of theme. */
.navbar .dropdown-menu { z-index: 1031; }
.nav-brand { font-weight: 700; letter-spacing: -0.01em; color: var(--sm-text) !important; }
.nav-brand .brand-mark { color: var(--sm-accent); }
.navbar .nav-link { border-radius: var(--sm-radius-sm); transition: background .15s, color .15s; }
.navbar .nav-link:hover { color: var(--sm-text) !important; background: var(--sm-bg-elev); }
.navbar .nav-link.text-white {
  color: var(--sm-accent) !important;
  background: color-mix(in srgb, var(--sm-accent) 12%, transparent);
  font-weight: 600;
}

/* ── Surfaces ───────────────────────────────────────────────────────── */
.card {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border) !important;
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow);
}
.card-header {
  background: var(--sm-bg-elev);
  border-bottom: 1px solid var(--sm-border) !important;
  border-radius: var(--sm-radius) var(--sm-radius) 0 0 !important;
}
.list-group-item { background: var(--sm-bg-card); border-color: var(--sm-border); color: var(--sm-text); }
.list-group-item.active {
  background: color-mix(in srgb, var(--sm-accent) 14%, var(--sm-bg-card));
  border-color: var(--sm-accent);
  color: var(--sm-text);
}
.modal-content { background: var(--sm-bg-card); border: 1px solid var(--sm-border-hi); border-radius: var(--sm-radius); }
/* Dropdowns adapt to the active theme (the markup uses .dropdown-menu-dark, but the
   colours come from theme-aware tokens so it reads correctly in light mode too). */
.dropdown-menu-dark {
  background: var(--sm-bg-elev); border: 1px solid var(--sm-border-hi);
  --bs-dropdown-color: var(--sm-text);
  --bs-dropdown-link-color: var(--sm-text);
  --bs-dropdown-link-hover-color: var(--sm-text);
  --bs-dropdown-link-hover-bg: var(--sm-bg-card);
  --bs-dropdown-link-active-color: var(--sm-text);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--sm-accent) 18%, var(--sm-bg-elev));
}
.toast { background: var(--sm-bg-elev); border: 1px solid var(--sm-border-hi); color: var(--sm-text); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--sm-border); }
.progress { background-color: var(--sm-border); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: var(--sm-bg-elev);
  color: var(--sm-text);
  border-color: var(--sm-border-hi);
  border-radius: var(--sm-radius-sm);
}
.form-control:focus, .form-select:focus {
  background-color: var(--sm-bg-elev);
  color: var(--sm-text);
  border-color: var(--sm-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sm-accent) 20%, transparent);
}
.form-control::placeholder { color: var(--sm-muted); }
.form-check-input:checked { background-color: var(--sm-accent); border-color: var(--sm-accent); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn { border-radius: var(--sm-radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--sm-accent);
  --bs-btn-border-color: var(--sm-accent);
  --bs-btn-color: var(--sm-accent-ink);
  /* Hover/active shades derive from the accent so end-customer branding only
     needs to change ONE variable to re-theme coherently. */
  --bs-btn-hover-bg: color-mix(in srgb, var(--sm-accent) 86%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sm-accent) 86%, black);
  --bs-btn-hover-color: var(--sm-accent-ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--sm-accent) 76%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--sm-accent) 76%, black);
  --bs-btn-active-color: var(--sm-accent-ink);
  --bs-btn-disabled-bg: var(--sm-border-hi);
  --bs-btn-disabled-border-color: var(--sm-border-hi);
  --bs-btn-disabled-color: var(--sm-text-dim);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--sm-accent);
  --bs-btn-border-color: var(--sm-accent);
  --bs-btn-hover-bg: var(--sm-accent);
  --bs-btn-hover-border-color: var(--sm-accent);
  --bs-btn-hover-color: var(--sm-accent-ink);
  --bs-btn-active-bg: var(--sm-accent);
  --bs-btn-active-color: var(--sm-accent-ink);
}
.btn-outline-secondary {
  --bs-btn-color: var(--sm-text-dim);
  --bs-btn-border-color: var(--sm-border-hi);
  --bs-btn-hover-bg: var(--sm-bg-elev);
  --bs-btn-hover-border-color: var(--sm-border-hi);
  --bs-btn-hover-color: var(--sm-text);
}

.form-range::-webkit-slider-thumb { background: var(--sm-accent); }
.form-range::-moz-range-thumb { background: var(--sm-accent); }
.form-range::-webkit-slider-runnable-track { background: var(--sm-border-hi); }
.form-range::-moz-range-track { background: var(--sm-border-hi); }

code { color: var(--sm-accent-2); font-family: var(--sm-mono); }
kbd { background: var(--sm-bg-elev); border: 1px solid var(--sm-border-hi); color: var(--sm-text); }

/* ── App-specific shared pieces (moved out of _Layout inline styles) ── */
.pw-toggle { min-width: 2.6rem; }
.badge-score { font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; font-family: var(--sm-mono); }
pre { font-family: var(--sm-mono); font-size: .88rem; }
#answer-text { font-size: .95rem; line-height: 1.65; }
/* Theme-aware so text stays high-contrast in BOTH themes. The old rule dimmed
   text (opacity .8) and the markup forced a dark panel (bg-dark), which left
   near-black text on a dark box in the light theme — unreadable. */
.snippet-preview { max-height: 320px; overflow: auto; font-size: .85rem; background: var(--sm-bg-elev); color: var(--sm-text); }
/* Large, readable file-preview modal (replaces the cramped, dimmed snippet box). */
.file-preview-dialog { max-width: min(1400px, 94vw); }
.file-preview-content { flex: 1 1 auto; min-height: 60vh; max-height: 78vh; overflow: auto; background: var(--sm-bg-elev); color: var(--sm-text); font-size: .92rem; line-height: 1.55; }
.cursor-blink::after {
  content: '▍'; display: inline-block; animation: sm-blink 1s step-start infinite; color: var(--sm-accent);
}
@keyframes sm-blink { 50% { opacity: 0; } }

/* Lower-left build stamp + activity widget */
.build-stamp { position: fixed; left: .75rem; bottom: .75rem; z-index: 1000; font-size: .68rem; color: var(--sm-text-dim); font-family: var(--sm-mono); }
#activity-widget {
  position: fixed; left: .75rem; bottom: .75rem; z-index: 1000;
  background: color-mix(in srgb, var(--sm-bg-elev) 92%, transparent);
  border: 1px solid var(--sm-border-hi); border-radius: var(--sm-radius-sm);
  padding: .35rem .5rem; font-size: .68rem; color: var(--sm-text-dim);
  backdrop-filter: blur(4px);
}
#activity-widget .build-line { font-family: var(--sm-mono); }

/* Scroll-to-top */
#scroll-top-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; display: none;
  width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; opacity: .75;
}