/* =========================================================
   BREACH // NOIR — visual identity
   A digital-investigation-agency HUD: near-black glass panels,
   corner-bracket reticles, redacted-bar reveals, three-tone neon
   (blue = data/info, purple = risk/exposure, green = success/credits).
   ========================================================= */

:root{
  --bn-bg:            #05070c;
  --bn-bg-alt:        #090d16;
  --bn-panel:         rgba(14, 20, 34, 0.72);
  --bn-panel-solid:   #0d1220;
  --bn-border:        rgba(77, 216, 255, 0.18);
  --bn-border-strong: rgba(77, 216, 255, 0.45);

  --bn-blue:    #4dd8ff;
  --bn-blue-dim:#1c5f75;
  --bn-purple:  #b06bff;
  --bn-purple-dim: #4a2f70;
  --bn-green:   #39ff9c;
  --bn-green-dim: #1b6b47;
  --bn-red:     #ff4d6d;
  --bn-amber:   #ffb84d;

  --bn-text:      #dbe7ff;
  --bn-text-dim:  #7c8aad;
  --bn-text-faint:#4a5674;

  --bn-font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --bn-font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

*{ box-sizing: border-box; }

html, body {
  background: var(--bn-bg);
  color: var(--bn-text);
  font-family: var(--bn-font-mono);
  margin: 0;
  min-height: 100vh;
}

body{
  position: relative;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(176,107,255,0.10), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(77,216,255,0.08), transparent 45%),
    linear-gradient(var(--bn-bg-alt), var(--bn-bg));
  background-attachment: fixed;
}

/* ---------- ambient rain / scanline overlay ---------- */
.bn-rain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    100deg,
    rgba(77,216,255,0.035) 0px,
    rgba(77,216,255,0.035) 1px,
    transparent 2px,
    transparent 90px
  );
  background-size: 140% 140%;
  animation: bn-rain-fall 9s linear infinite;
}
@keyframes bn-rain-fall{
  0%   { background-position: 0 -10%; }
  100% { background-position: -40px 100%; }
}
.bn-scanline{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.12) 3px
  );
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce){
  .bn-rain{ animation: none; }
}

.bn-shell{ position: relative; z-index: 2; }

h1, h2, h3, h4, .bn-display{
  font-family: var(--bn-font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.bn-glow-blue   { text-shadow: 0 0 10px rgba(77,216,255,0.55), 0 0 2px rgba(77,216,255,0.9); }
.bn-glow-purple { text-shadow: 0 0 10px rgba(176,107,255,0.55), 0 0 2px rgba(176,107,255,0.9); }
.bn-glow-green  { text-shadow: 0 0 10px rgba(57,255,156,0.55), 0 0 2px rgba(57,255,156,0.9); }
.bn-glow-red    { text-shadow: 0 0 10px rgba(255,77,109,0.55), 0 0 2px rgba(255,77,109,0.9); }

a{ color: var(--bn-blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- HUD panel: corner-bracket reticle frame ---------- */
.bn-panel{
  position: relative;
  background: var(--bn-panel);
  border: 1px solid var(--bn-border);
  backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.bn-panel::before, .bn-panel::after,
.bn-panel > .bn-corner-tl, .bn-panel > .bn-corner-br{
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--bn-blue);
  opacity: 0.85;
}
.bn-panel::before{ top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.bn-panel::after{ bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.bn-panel-purple::before, .bn-panel-purple::after{ border-color: var(--bn-purple); }
.bn-panel-red::before, .bn-panel-red::after{ border-color: var(--bn-red); }
.bn-panel-green::before, .bn-panel-green::after{ border-color: var(--bn-green); }
.bn-panel-amber::before, .bn-panel-amber::after{ border-color: var(--bn-amber); }

/* ---------- stamped ribbon (case status) ---------- */
.bn-stamp{
  display: inline-block;
  font-family: var(--bn-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: rotate(-2deg);
}
.bn-stamp-active{ color: var(--bn-blue); }
.bn-stamp-solved{ color: var(--bn-green); }
.bn-stamp-failed{ color: var(--bn-red); }

/* ---------- redacted bar (locked source teaser) ---------- */
.bn-redacted{
  display: inline-block;
  background: repeating-linear-gradient(45deg, #111827, #111827 6px, #0a0e18 6px, #0a0e18 12px);
  color: transparent;
  border-radius: 2px;
  user-select: none;
}

/* ---------- expandable Intel Source content ---------- */
.bn-source-toggle{
  cursor: pointer;
  list-style: none;
}
.bn-source-toggle::-webkit-details-marker{ display: none; }
.bn-source-preview-text{
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--bn-text);
}
.bn-toggle-closed, .bn-toggle-open{
  display: block;
  font-size: 0.78rem;
  color: var(--bn-blue);
  margin-top: 0.4rem;
}
.bn-toggle-open{ display: none; }
details[open] > .bn-source-toggle .bn-source-preview-text{ display: none; }
details[open] > .bn-source-toggle .bn-toggle-closed{ display: none; }
details[open] > .bn-source-toggle .bn-toggle-open{ display: block; }
.bn-source-full{ display: none; }
details[open] > .bn-source-full{ display: block; margin-top: 0.6rem; animation: bn-source-reveal 0.15s ease; }
@keyframes bn-source-reveal{ from{ opacity: 0; } to{ opacity: 1; } }

/* ---------- buttons ---------- */
.bn-btn{
  font-family: var(--bn-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-blue);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bn-btn:hover:not(:disabled){
  background: rgba(77,216,255,0.12);
  box-shadow: 0 0 14px rgba(77,216,255,0.35);
  text-decoration: none;
}
.bn-btn:disabled{ opacity: 0.35; cursor: not-allowed; }
.bn-btn-purple{ border-color: rgba(176,107,255,0.55); color: var(--bn-purple); }
.bn-btn-purple:hover:not(:disabled){ background: rgba(176,107,255,0.12); box-shadow: 0 0 14px rgba(176,107,255,0.35); }
.bn-btn-green{ border-color: rgba(57,255,156,0.55); color: var(--bn-green); }
.bn-btn-green:hover:not(:disabled){ background: rgba(57,255,156,0.12); box-shadow: 0 0 14px rgba(57,255,156,0.35); }
.bn-btn-solid{ background: var(--bn-blue); color: #04121a; border-color: var(--bn-blue); font-weight: 700; }
.bn-btn-solid:hover:not(:disabled){ box-shadow: 0 0 20px rgba(77,216,255,0.5); }

/* ---------- inputs ---------- */
.bn-input{
  width: 100%;
  background: #070a12;
  border: 1px solid var(--bn-border);
  color: var(--bn-text);
  font-family: var(--bn-font-mono);
  padding: 0.65rem 0.8rem;
}
.bn-input:focus{ outline: none; border-color: var(--bn-blue); box-shadow: 0 0 0 3px rgba(77,216,255,0.15); }
.bn-input::placeholder{ color: var(--bn-text-faint); }
textarea.bn-input{ resize: vertical; min-height: 4.5rem; } /* never horizontal-resize past the container */

/* ---------- responsive tables: scroll within their own box instead of
   blowing out the page's width on narrow screens ---------- */
/* ---------- shared admin modal component ----------
   Used by every "Edit" action across the admin panel (case sources,
   achievements, titles, source types, credit packages, user suspend).
   Backed by the native <dialog> element + a couple of small handlers in
   app.js (see [data-bn-modal-open]/[data-bn-modal-close]) — a <dialog>
   opened via .showModal() renders in the browser's top layer, so it can
   never be clipped by an ancestor table's overflow-x:auto the way the
   old position:absolute popover was, and centers itself with zero extra
   positioning code. New admin modals should reuse this same markup
   pattern rather than introducing another one-off implementation. */
dialog.bn-modal{
  width: min(640px, 92vw);
  max-height: min(720px, 88vh);
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--bn-panel-solid);
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-text);
  position: relative;
}
dialog.bn-modal::before, dialog.bn-modal::after{
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--bn-blue);
  opacity: 0.85;
}
dialog.bn-modal::before{ top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
dialog.bn-modal::after{ bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
dialog.bn-modal::backdrop{ background: rgba(5,7,12,0.75); backdrop-filter: blur(2px); }
dialog.bn-modal h2, dialog.bn-modal h3{ font-size: 1rem; margin: 0 0 1rem; color: var(--bn-purple); }
.bn-modal-actions{ display: flex; gap: 0.75rem; margin-top: 0.25rem; flex-wrap: wrap; }
@media (max-width: 640px){
  dialog.bn-modal{ width: 94vw; max-height: 92vh; padding: 1.1rem; }
}

.bn-table-scroll{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bn-table-scroll table.bn-table{ min-width: 640px; } /* keeps columns legible; the wrapper scrolls, not the page */

/* ---------- responsive field grids: wrap instead of squeezing on narrow screens ---------- */
.bn-field-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

/* ---------- credit / exposure meters ---------- */
.bn-meter{
  height: 10px;
  background: #0a0e18;
  border: 1px solid var(--bn-border);
  overflow: hidden;
  position: relative;
}
.bn-meter > span{ display: block; height: 100%; transition: width 0.4s ease; }
.bn-meter-credits > span{ background: linear-gradient(90deg, var(--bn-green-dim), var(--bn-green)); }
.bn-meter-exposure > span{ background: linear-gradient(90deg, var(--bn-purple-dim), var(--bn-red)); }
.bn-meter-xp > span{ background: linear-gradient(90deg, var(--bn-blue-dim), var(--bn-blue)); }

/* ---------- flash messages ---------- */
.bn-flash{ border-left: 3px solid; padding: 0.75rem 1rem; margin-bottom: 0.75rem; font-size: 0.9rem; }
.bn-flash-success{ border-color: var(--bn-green); background: rgba(57,255,156,0.06); color: var(--bn-green); }
.bn-flash-error{ border-color: var(--bn-red); background: rgba(255,77,109,0.06); color: var(--bn-red); }
.bn-flash-info{ border-color: var(--bn-blue); background: rgba(77,216,255,0.06); color: var(--bn-blue); }
.bn-flash-warning{ border-color: var(--bn-amber); background: rgba(255,184,77,0.06); color: var(--bn-amber); }

/* ---------- misc ---------- */
.bn-mono{ font-family: var(--bn-font-mono); }
.bn-dim{ color: var(--bn-text-dim); }
.bn-faint{ color: var(--bn-text-faint); }
.bn-divider{ border: none; border-top: 1px solid var(--bn-border); margin: 1.25rem 0; }

/* ---------- admin layout: header, sidebar, content, footer ---------- */
.bn-admin-shell{ display:flex; flex-direction:column; min-height:100vh; }
.bn-admin-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85rem 1.5rem; border-bottom:1px solid var(--bn-border);
  background:rgba(5,7,12,0.9); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:20;
}
.bn-admin-brand{ display:flex; flex-direction:column; line-height:1.2; text-decoration:none; font-family:var(--bn-font-display); font-size:1.05rem; }
.bn-admin-body{ display:flex; flex:1; }
.bn-admin-sidebar{
  width:220px; flex-shrink:0; padding:1.25rem 0.75rem; border-right:1px solid var(--bn-border);
  display:flex; flex-direction:column; gap:0.15rem;
}
.bn-admin-nav-link{
  display:block; padding:0.5rem 0.75rem; border-radius:3px; font-size:0.85rem;
  color:var(--bn-text-dim); text-decoration:none;
}
.bn-admin-nav-link:hover{ background:rgba(77,216,255,0.08); color:var(--bn-blue); text-decoration:none; }
.bn-admin-nav-heading{
  margin:0.9rem 0 0.2rem 0.75rem; font-family:var(--bn-font-mono); font-size:0.68rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--bn-text-faint);
}
.bn-admin-content{ flex:1; min-width:0; padding:1.5rem 1.75rem 3rem; }
.bn-admin-footer{
  padding:1rem 1.5rem; border-top:1px solid var(--bn-border); color:var(--bn-text-faint);
  font-size:0.72rem; text-align:center;
}

@media (max-width: 820px){
  .bn-admin-body{ flex-direction:column; }
  .bn-admin-sidebar{
    width:auto; border-right:none; border-bottom:1px solid var(--bn-border);
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:0.3rem; padding:0.75rem;
  }
  .bn-admin-nav-heading{ display:none; }
  .bn-admin-nav-link{ white-space:nowrap; }
  .bn-admin-content{ padding:1.25rem 1rem 2.5rem; }
}
/* ---------- accessibility: visible-on-focus skip link ---------- */
.bn-skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bn-blue);
  color: #04121a;
  padding: 0.6rem 1rem;
  font-family: var(--bn-font-mono);
  font-weight: 700;
  text-decoration: none;
}
.bn-skip-link:focus{
  left: 1rem;
  top: 1rem;
}

/* ---------- accessibility: visible keyboard focus ring on interactive elements ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 2px solid var(--bn-blue);
  outline-offset: 2px;
}

/* ---------- investigation graph / unlock tree: connected nested list ---------- */
.bn-tree, .bn-tree ul{ list-style:none; margin:0; padding-left:0; }
.bn-tree ul{ padding-left:1.5rem; margin-top:0.4rem; border-left:1px dashed var(--bn-border-strong); }
.bn-tree li{ position:relative; padding:0.35rem 0 0.35rem 1rem; }
.bn-tree li::before{
  content:'';
  position:absolute;
  left:0; top:1rem;
  width:0.85rem; height:1px;
  background:var(--bn-border-strong);
}

/* ---------- cookie consent banner: small, discreet, never blocks the page ---------- */
.bn-cookie-banner{
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(9,12,20,0.97);
  border: 1px solid var(--bn-border-strong);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.bn-cookie-banner-text{ flex: 1 1 260px; }
.bn-cookie-banner-actions{ display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; position: relative; }
.bn-cookie-manage[open] > .bn-cookie-manage-panel{
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 0.5rem;
  width: 260px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 91;
}

.bn-flicker{ animation: bn-flicker 4s infinite; }
@keyframes bn-flicker{
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.6; }
  98% { opacity: 1; }
  99% { opacity: 0.75; }
}

table.bn-table{ width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.bn-table th{ text-align: left; color: var(--bn-text-dim); font-weight: 500; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--bn-border); font-family: var(--bn-font-display); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.75rem;}
table.bn-table td{ padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(77,216,255,0.08); }
table.bn-table tr:hover td{ background: rgba(77,216,255,0.04); }