/* ==========================================================================
   SpamTrapDomain.com — underground/graffiti theme
   Dark brick-wall data surfaces + rainbow spray-paint brand moments.
   ========================================================================== */

@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/lib/fonts/bungee-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/lib/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/lib/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/lib/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/lib/fonts/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  /* -- surfaces -- */
  --ink: #0a0910;
  --ink-2: #100e18;
  --surface: #17141f;
  --surface-2: #1e1a29;
  --surface-3: #262032;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* -- text -- */
  --paper: #f3efe6;
  --muted: #a89bc4;
  --muted-2: #756a91;

  /* -- spray paint palette (lifted from the logo) -- */
  --spray-pink: #ff2f7e;
  --spray-magenta: #ef37ff;
  --spray-orange: #ff8a1f;
  --spray-yellow: #ffd23f;
  --spray-acid: #b6ff3c;
  --spray-mint: #2be89a;
  --spray-cyan: #2fd1ff;
  --spray-blue: #4f7dff;
  --spray-purple: #a748ff;

  --graffiti-gradient: linear-gradient(
    92deg,
    var(--spray-pink) 0%,
    var(--spray-orange) 22%,
    var(--spray-yellow) 38%,
    var(--spray-acid) 50%,
    var(--spray-mint) 62%,
    var(--spray-cyan) 76%,
    var(--spray-purple) 100%
  );

  --font-display: "Bungee", "Arial Black", sans-serif;
  --font-body: "IBM Plex Mono", "Consolas", monospace;

  --radius: 0.5rem;
  --shadow-drip: 0 10px 30px -12px rgba(255, 47, 126, 0.35), 0 4px 14px -6px rgba(47, 209, 255, 0.25);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 0;
  font-family: var(--font-body);
  color: var(--paper);
  background-color: var(--ink);
  background-image:
    /* corner paint blooms, matching the logo's splatter bleed */
    radial-gradient(560px circle at -5% -10%, rgba(255, 47, 126, 0.24), transparent 60%),
    radial-gradient(620px circle at 108% -8%, rgba(47, 209, 255, 0.22), transparent 60%),
    radial-gradient(680px circle at -8% 108%, rgba(255, 138, 31, 0.16), transparent 60%),
    radial-gradient(680px circle at 108% 108%, rgba(167, 72, 255, 0.2), transparent 60%),
    /* brick coursing */
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 42px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 84px
    );
  background-attachment: fixed;
  min-height: 100vh;
}

::selection {
  background: var(--spray-magenta);
  color: #16031a;
}

a {
  color: var(--spray-cyan);
}

a:hover {
  color: var(--spray-pink);
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 400;
}

h1, .h1 {
  background: var(--graffiti-gradient);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
  display: inline-block;
  padding-bottom: 0.1em;
  animation: hue-drift 14s linear infinite;
}

h2, .h2 {
  color: var(--paper);
  font-size: 1.3rem;
  border-left: 5px solid var(--spray-acid);
  padding-left: 0.6rem;
}

@keyframes hue-drift {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* ==========================================================================
   Navbar / brand
   ========================================================================== */

.navbar {
  background: linear-gradient(180deg, var(--ink-2), var(--ink) 85%) !important;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 24px -18px rgba(255, 47, 126, 0.4);
  position: relative;
}

.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--graffiti-gradient);
  background-size: 220% auto;
  animation: hue-drift 14s linear infinite;
  opacity: 0.9;
}

.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
}

.navbar-brand img {
  height: 40px;
  filter: drop-shadow(0 0 10px rgba(255, 47, 126, 0.45)) drop-shadow(0 0 18px rgba(47, 209, 255, 0.25));
  animation: brand-glow 3.2s ease-in-out infinite;
}

@keyframes brand-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 47, 126, 0.4)) drop-shadow(0 0 14px rgba(47, 209, 255, 0.2)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 210, 63, 0.55)) drop-shadow(0 0 22px rgba(167, 72, 255, 0.4)); }
}

.navbar .nav-link {
  color: var(--muted) !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.35rem !important;
  transition: color 0.15s ease;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--graffiti-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--paper) !important;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  transform: scaleX(1);
}

.navbar-toggler {
  border-color: var(--line-strong);
}

/* Below the sm breakpoint the collapse becomes a dropdown panel rather than
   an inline row - it had no styling of its own and just spilled bare links
   straight into the page content below. Scoped to mobile only so the
   horizontal desktop nav (already styled above) is untouched. */
@media (max-width: 575.98px) {
  .navbar-collapse {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    margin-top: 0.75rem;
    padding: 0.25rem 1rem;
    box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.6);
  }

  .navbar-collapse .nav-item {
    border-bottom: 1px solid var(--line);
  }

  .navbar-collapse .nav-item:last-child {
    border-bottom: none;
  }

  .navbar-collapse .nav-link {
    padding: 0.85rem 0.25rem !important;
  }

  /* The underline-on-hover effect reads oddly against a full-width divided
     row - a background highlight fits the stacked-list layout better. */
  .navbar-collapse .nav-link::after {
    display: none;
  }

  .navbar-collapse .nav-link:hover,
  .navbar-collapse .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
  }

  .navbar-collapse form {
    margin: 0.75rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-strong);
  }

  .navbar-collapse form .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 0.78rem;
  padding: 1rem 0;
  margin-top: 3rem;
}

footer.footer a {
  color: var(--muted);
}

/* ==========================================================================
   Cards / panels
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-drip);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--graffiti-gradient);
  background-size: 220% auto;
}

.card-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

.alert {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.alert-warning {
  background: rgba(255, 210, 63, 0.12);
  color: #ffe28a;
  border-color: rgba(255, 210, 63, 0.35);
}

.alert-success {
  background: rgba(182, 255, 60, 0.1);
  color: #d4ff9a;
  border-color: rgba(182, 255, 60, 0.3);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--paper);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 47, 126, 0.08);
  --bs-table-border-color: var(--line);
}

.table thead th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spray-acid);
  border-bottom: 2px solid var(--line-strong);
  font-weight: 600;
}

.table tbody tr {
  transition: background-color 0.12s ease;
}

.font-monospace {
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
}

.btn-primary {
  background: linear-gradient(120deg, var(--spray-pink), var(--spray-purple));
  border: none;
  box-shadow: 0 6px 16px -6px rgba(255, 47, 126, 0.55);
}

.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(120deg, var(--spray-magenta), var(--spray-blue));
  box-shadow: 0 8px 20px -6px rgba(239, 55, 255, 0.6);
}

.btn-danger {
  background: linear-gradient(120deg, #ff3b5c, var(--spray-orange));
  border: none;
}

.btn-outline-secondary {
  color: var(--muted);
  border-color: var(--line-strong);
}

.btn-outline-secondary:hover {
  background: var(--surface-3);
  border-color: var(--spray-cyan);
  color: var(--paper);
}

.btn-outline-danger {
  color: #ff8fa8;
  border-color: rgba(255, 59, 92, 0.5);
}

.btn-outline-danger:hover {
  background: rgba(255, 59, 92, 0.15);
  border-color: #ff3b5c;
  color: #ffd7de;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem var(--ink), 0 0 0 0.3rem var(--spray-cyan);
}

.btn-group .btn-outline-secondary.active {
  background: var(--graffiti-gradient);
  border-color: transparent;
  color: #16031a;
  font-weight: 700;
}

/* ==========================================================================
   Badges — keep semantic meaning, recolor to the palette
   ========================================================================== */

.badge.bg-success { background-color: rgba(182, 255, 60, 0.18) !important; color: #d4ff9a !important; border: 1px solid rgba(182, 255, 60, 0.4); }
.badge.bg-warning { background-color: rgba(255, 210, 63, 0.18) !important; color: #ffe28a !important; border: 1px solid rgba(255, 210, 63, 0.4); }
.badge.bg-info { background-color: rgba(47, 209, 255, 0.18) !important; color: #9fe9ff !important; border: 1px solid rgba(47, 209, 255, 0.4); }
.badge.bg-danger { background-color: rgba(255, 59, 92, 0.2) !important; color: #ffb0bd !important; border: 1px solid rgba(255, 59, 92, 0.45); }
.badge.bg-primary { background-color: rgba(167, 72, 255, 0.2) !important; color: #ddb8ff !important; border: 1px solid rgba(167, 72, 255, 0.45); }
.badge.bg-secondary { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--muted) !important; border: 1px solid var(--line-strong); }
.badge.text-dark { color: #16031a !important; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control, .form-select {
  background-color: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--paper);
}

.form-control:focus, .form-select:focus {
  background-color: var(--surface-2);
  color: var(--paper);
  border-color: var(--spray-cyan);
}

.form-control::placeholder {
  color: var(--muted-2);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   Misc
   ========================================================================== */

.text-muted { color: var(--muted-2) !important; }

.stat-number {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.1;
  background: var(--graffiti-gradient);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-drift 14s linear infinite;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--spray-pink), var(--spray-cyan));
  border-radius: 8px;
  border: 2px solid var(--ink);
}

.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: twinkle 2.6s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.15) rotate(20deg); }
}

/* ==========================================================================
   Standalone pages (Login / AuthNotConfigured) — spray-paint-on-brick showcase
   ========================================================================== */

.wall-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background-color: var(--ink);
  background-image:
    radial-gradient(700px circle at 15% 20%, rgba(255, 47, 126, 0.28), transparent 60%),
    radial-gradient(760px circle at 85% 15%, rgba(47, 209, 255, 0.25), transparent 60%),
    radial-gradient(760px circle at 20% 90%, rgba(255, 138, 31, 0.2), transparent 60%),
    radial-gradient(760px circle at 88% 92%, rgba(167, 72, 255, 0.25), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 84px);
}

.wall-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-drip);
  position: relative;
  overflow: hidden;
}

.wall-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--graffiti-gradient);
  background-size: 220% auto;
  animation: hue-drift 14s linear infinite;
}

.wall-logo {
  display: block;
  max-width: 320px;
  width: 100%;
  margin: 0 auto 1.75rem;
  filter: drop-shadow(0 0 22px rgba(255, 47, 126, 0.35)) drop-shadow(0 0 40px rgba(47, 209, 255, 0.2));
}

.wall-card h1 {
  font-size: 1.4rem;
  display: block;
  text-align: center;
}