/* ============================================================================
   XSec CTF Platform — Custom Theme Stylesheet
   ----------------------------------------------------------------------------
   Loaded AFTER CTFd core's own compiled Bootstrap stylesheet (see base.html),
   so everything here layers on top via the cascade — nothing here forks or
   duplicates CTFd's actual functional CSS, it only restyles it.

   Structure:
     1. Design tokens (CSS custom properties) — the single source of truth
        for colors/spacing/radius used everywhere below AND reusable by
        later phases (dashboard, challenges, leaderboard, announcements).
     2. Global resets & typography
     3. Background treatment (the poster-matching hex/glow look)
     4. Navbar
     5. Buttons
     6. Cards, jumbotron, modals (glassmorphism)
     7. Forms (login/register/settings)
     8. Tables (scoreboard, users/teams listings)
     9. Badges, alerts, notifications
    10. Footer
    11. Scrollbar
    12. Motion (kept subtle — see the "not overly flashy" brand note)
    13. Utility classes future phases can reuse
    14. Reduced-motion & accessibility
   ============================================================================ */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette — matches the XSec poster series */
  --xsec-bg: #0a0a0c;
  --xsec-bg-alt: #131316;
  --xsec-red: #ff2a2a;
  --xsec-red-deep: #d21a2a;
  --xsec-red-soft: #ff6b60;
  --xsec-red-glow: rgba(255, 42, 42, 0.35);
  --xsec-text: #f4f5f7;
  --xsec-text-muted: #b4b9c2;
  --xsec-border: rgba(255, 42, 42, 0.25);
  --xsec-card-bg: rgba(255, 255, 255, 0.035);
  --xsec-card-border: rgba(255, 255, 255, 0.08);
  --xsec-radius-sm: 8px;
  --xsec-radius: 14px;
  --xsec-radius-lg: 20px;
  --xsec-shadow-glow: 0 0 24px var(--xsec-red-glow);
  --xsec-font: "Poppins", "Lato", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Re-point Bootstrap 5's own variables at our palette so every stock
     component (buttons, forms, alerts, tables, etc.) picks this up
     automatically without us having to override each one by hand. */
  --bs-body-bg: var(--xsec-bg);
  --bs-body-color: var(--xsec-text);
  --bs-primary: var(--xsec-red-deep);
  --bs-primary-rgb: 210, 26, 42;
  --bs-link-color: var(--xsec-red-soft);
  --bs-link-hover-color: var(--xsec-red);
  --bs-border-color: var(--xsec-card-border);
  --bs-secondary-color: var(--xsec-text-muted);
  --bs-font-sans-serif: var(--xsec-font);
}

/* -------------------------------------------------------------------------
   2. GLOBAL RESETS & TYPOGRAPHY
   ------------------------------------------------------------------------- */
body {
  font-family: var(--xsec-font);
  background-color: var(--xsec-bg);
  color: var(--xsec-text);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Gradient heading treatment — used sparingly (hero titles, page headers),
   matching the white-to-red gradient text on the poster series. Apply with
   class="xsec-gradient-text", not globally, so body copy stays readable. */
.xsec-gradient-text {
  background: linear-gradient(180deg, #ffffff 0%, var(--xsec-red-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* -------------------------------------------------------------------------
   3. BACKGROUND TREATMENT
   ------------------------------------------------------------------------- */
/* Two soft red glows (top + lower-mid) plus a very faint hex-grid, all pure
   CSS (no canvas/JS, so this costs nothing at 500-1000 concurrent users).
   Kept subtle deliberately — brand note says "not overly flashy." */
body {
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(205, 16, 20, 0.16), transparent 60%),
    radial-gradient(ellipse 800px 500px at 50% 60%, rgba(205, 16, 20, 0.08), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z' fill='none' stroke='rgba(255,60,55,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
}

/* -------------------------------------------------------------------------
   4. NAVBAR
   ------------------------------------------------------------------------- */
.navbar {
  background-color: rgba(10, 10, 12, 0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--xsec-border);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Toggled by xsec-theme.js once the page has scrolled a little, so the
   navbar gains a subtle glow instead of always having one. */
.navbar.xsec-scrolled {
  box-shadow: 0 2px 24px rgba(205, 16, 20, 0.25);
  border-bottom-color: var(--xsec-red);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.navbar .nav-link {
  color: var(--xsec-text-muted) !important;
  transition: color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--xsec-text) !important;
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--xsec-radius-sm);
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-position 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--xsec-red-deep), var(--xsec-red));
  background-size: 160% 160%;
  border: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-position: 100% 0;
  box-shadow: var(--xsec-shadow-glow);
  transform: translateY(-1px);
}

.btn-outline-primary,
.btn-outline-secondary {
  border-color: var(--xsec-border);
  color: var(--xsec-text);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--xsec-red-deep);
  border-color: var(--xsec-red-deep);
  box-shadow: var(--xsec-shadow-glow);
}

/* -------------------------------------------------------------------------
   6. CARDS, JUMBOTRON, MODALS — glassmorphism
   ------------------------------------------------------------------------- */
.card,
.jumbotron,
.modal-content,
.list-group-item,
.dropdown-menu {
  background-color: var(--xsec-card-bg) !important;
  border: 1px solid var(--xsec-card-border) !important;
  border-radius: var(--xsec-radius) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--xsec-text);
}

.card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover lift — only on cards that are actually clickable (challenge cards,
   list items acting as links), not decorative/static cards, so this doesn't
   make static content feel falsely interactive. */
a .card:hover,
.card.xsec-interactive:hover {
  transform: translateY(-3px);
  border-color: var(--xsec-border) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--xsec-border);
}

.modal-header,
.modal-footer {
  border-color: var(--xsec-card-border) !important;
}

/* -------------------------------------------------------------------------
   7. FORMS
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--xsec-card-border) !important;
  color: var(--xsec-text) !important;
  border-radius: var(--xsec-radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--xsec-red) !important;
  box-shadow: 0 0 0 0.2rem var(--xsec-red-glow) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.form-control::placeholder {
  color: var(--xsec-text-muted);
  opacity: 0.7;
}

label,
.form-label {
  color: var(--xsec-text-muted);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   8. TABLES (scoreboard, users/teams listings)
   ------------------------------------------------------------------------- */
.table {
  color: var(--xsec-text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(255, 42, 42, 0.06);
  border-color: var(--xsec-card-border);
}

.table thead th {
  border-bottom: 2px solid var(--xsec-border);
  color: var(--xsec-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

/* -------------------------------------------------------------------------
   9. BADGES, ALERTS, NOTIFICATIONS
   ------------------------------------------------------------------------- */
.badge.bg-danger,
.badge-notification {
  background: var(--xsec-red-deep) !important;
  box-shadow: 0 0 8px var(--xsec-red-glow);
}

.alert {
  border-radius: var(--xsec-radius-sm);
  border: 1px solid var(--xsec-card-border);
  backdrop-filter: blur(10px);
}

.alert-info {
  background-color: rgba(92, 114, 143, 0.15);
}

.alert-danger {
  background-color: rgba(255, 42, 42, 0.12);
  border-color: var(--xsec-border);
}

/* -------------------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--xsec-card-border);
  padding: 1.5rem 0;
  margin-top: 3rem;
}

.footer a {
  color: var(--xsec-text-muted) !important;
}

/* -------------------------------------------------------------------------
   11. SCROLLBAR (WebKit — Chrome/Edge/Safari; Firefox gets the standard bar)
   ------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--xsec-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--xsec-red-deep);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--xsec-red);
}

/* -------------------------------------------------------------------------
   12. MOTION — subtle, deliberately not flashy
   ------------------------------------------------------------------------- */
@keyframes xsec-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

main[role="main"] {
  animation: xsec-fade-in-up 0.35s ease both;
}

/* -------------------------------------------------------------------------
   13. UTILITY CLASSES — for later phases (dashboard/challenges/leaderboard)
   ------------------------------------------------------------------------- */
.xsec-glow-border {
  border: 1px solid var(--xsec-border) !important;
  box-shadow: var(--xsec-shadow-glow);
}

.xsec-pill {
  border-radius: 999px !important;
}

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

/* -------------------------------------------------------------------------
   14. ACCESSIBILITY — respect reduced-motion preferences
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  main[role="main"] {
    animation: none;
  }
  .btn,
  .card,
  .navbar {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   15. DASHBOARD (Phase 5) — users/private.html
   ------------------------------------------------------------------------- */
.xsec-dash-hero {
  background:
    radial-gradient(ellipse 500px 260px at 15% 20%, rgba(255, 42, 42, 0.10), transparent 70%),
    var(--xsec-card-bg);
}

.xsec-dash-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--xsec-card-border);
}

/* Chips — used for team/affiliation/country/bracket tags in the dashboard
   hero. Distinct from Bootstrap's stock .badge (which core CTFd uses
   elsewhere) so this can look a little more refined without touching
   .badge globally and affecting other pages that rely on its default look. */
.xsec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xsec-card-border);
  color: var(--xsec-text);
  text-decoration: none !important;
}

.xsec-chip-primary {
  background: rgba(255, 42, 42, 0.14);
  border-color: var(--xsec-border);
  color: var(--xsec-red-soft);
}

.xsec-stat-tile {
  text-align: center;
  padding: 1rem 0.5rem;
  border-radius: var(--xsec-radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--xsec-card-border);
}

.xsec-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--xsec-red-soft);
  line-height: 1.1;
}

.xsec-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--xsec-text-muted);
  margin-top: 0.25rem;
}

.xsec-field-row {
  padding: 0.6rem 0.9rem;
  border-radius: var(--xsec-radius-sm);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--xsec-card-border);
  height: 100%;
}

.xsec-badge-tile {
  text-align: center;
  padding: 1.25rem 0.75rem;
  border-radius: var(--xsec-radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--xsec-card-border);
  height: 100%;
}

.xsec-badge-icon {
  color: var(--xsec-red-soft);
}

/* Slightly taller/rounder progress bars than Bootstrap's stock 1rem —
   the dashboard uses two side-by-side breakdowns, so a touch more height
   reads better at a glance. */
.xsec-progress {
  height: 0.85rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------------------------------------
   16. CHALLENGES (Phase 6) — challenges.html (board) + challenge.html (modal)
   ------------------------------------------------------------------------- */

/* ---- Category headers with icons ---- */
.category-header {
  position: relative;
  padding-left: 2.1rem;
  border-bottom: 1px solid var(--xsec-card-border);
  padding-bottom: 0.6rem;
}

.category-header::before {
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--xsec-red-soft);
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* 900 = FA6's solid style weight */
  font-size: 1.2rem;
}

/* Exact category names from the spec. Falls back to no icon (just the
   text) for any category an admin names differently — never breaks,
   just less decorated. */
.category-header[data-category="Web"]::before { content: "\f0ac"; }              /* fa-globe */
.category-header[data-category="Cryptography"]::before { content: "\f023"; }     /* fa-lock */
.category-header[data-category="OSINT"]::before { content: "\f002"; }           /* fa-magnifying-glass */
.category-header[data-category="Digital Forensics"]::before { content: "\f002"; }
.category-header[data-category="Steganography"]::before { content: "\f03e"; }   /* fa-image */

/* ---- Challenge board buttons/cards ---- */
.challenge-button {
  position: relative;
  background: var(--xsec-card-bg) !important;
  border: 1px solid var(--xsec-card-border) !important;
  border-radius: var(--xsec-radius) !important;
  backdrop-filter: blur(10px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.challenge-button:hover {
  transform: translateY(-3px);
  border-color: var(--xsec-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--xsec-border);
}

/* Solved state — a filled green-tinted border rather than changing the
   whole card color, so it reads as "complete" without looking like an
   error/warning state. */
.challenge-button.challenge-solved {
  border-color: rgba(0, 209, 64, 0.5) !important;
  background: rgba(0, 209, 64, 0.06) !important;
}

.xsec-solved-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgb(0, 209, 64);
  color: #06130a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.xsec-diff-pill {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.xsec-diff-easy   { background: rgba(0, 209, 64, 0.16);  color: rgb(96, 219, 137); }
.xsec-diff-medium { background: rgba(255, 176, 32, 0.18); color: rgb(255, 197, 92); }
.xsec-diff-hard    { background: rgba(255, 42, 42, 0.18); color: var(--xsec-red-soft); }

/* Same three tiers, used on the modal's larger badge (challenge.html) */
.xsec-diff-badge {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.xsec-diff-badge.xsec-diff-easy   { background: rgba(0, 209, 64, 0.16);  color: rgb(96, 219, 137); }
.xsec-diff-badge.xsec-diff-medium { background: rgba(255, 176, 32, 0.18); color: rgb(255, 197, 92); }
.xsec-diff-badge.xsec-diff-hard    { background: rgba(255, 42, 42, 0.18); color: var(--xsec-red-soft); }

.xsec-solved-badge {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
  background: rgba(0, 209, 64, 0.16);
  color: rgb(96, 219, 137);
}

/* ---- Challenge modal ---- */
#challenge-window .modal-content {
  background: rgba(15, 15, 18, 0.92) !important;
  border: 1px solid var(--xsec-border) !important;
  backdrop-filter: blur(16px);
}

#challenge-window .nav-tabs {
  border-bottom-color: var(--xsec-card-border);
}

#challenge-window .nav-tabs .nav-link {
  color: var(--xsec-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
}

#challenge-window .nav-tabs .nav-link.active {
  color: var(--xsec-text);
  background: transparent;
  border-bottom-color: var(--xsec-red);
}

.challenge-tag {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--xsec-text) !important;
  border: 1px solid var(--xsec-card-border);
  font-weight: 500;
}

/* Hint accordions — native <details>/<summary>, restyled to match cards
   rather than the browser default disclosure triangle look. */
.challenge-hints details {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--xsec-card-border);
  border-radius: var(--xsec-radius-sm);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
}

.challenge-hints summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--xsec-red-soft);
}

.challenge-hints details[open] summary {
  margin-bottom: 0.5rem;
}

/* File download buttons */
.btn-file {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--xsec-card-border) !important;
  color: var(--xsec-text) !important;
}

.btn-file:hover {
  border-color: var(--xsec-border) !important;
  background: rgba(255, 42, 42, 0.08) !important;
}

/* Flag input + submit */
.challenge-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--xsec-card-border) !important;
  color: var(--xsec-text) !important;
}

.challenge-input:focus {
  border-color: var(--xsec-red) !important;
  box-shadow: 0 0 0 0.2rem var(--xsec-red-glow) !important;
}

.challenge-submit {
  background: linear-gradient(135deg, var(--xsec-red-deep), var(--xsec-red)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
}

.challenge-submit:hover {
  box-shadow: var(--xsec-shadow-glow);
}

/* -------------------------------------------------------------------------
   17. LEADERBOARD (Phase 7) — scoreboard.html
   ------------------------------------------------------------------------- */
.xsec-bracket-nav .nav-link {
  color: var(--xsec-text-muted);
  border-radius: 999px;
  margin: 0.15rem;
  border: 1px solid var(--xsec-card-border);
}

.xsec-bracket-nav .nav-link.active {
  background: var(--xsec-red-deep);
  color: #fff;
  border-color: var(--xsec-red-deep);
}

.xsec-lb-table thead th {
  background: transparent;
}

.xsec-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Top-3 medal treatment — subtle row tint + a colored rank pill, not a
   full color change of the row (keeps the table easy to scan). */
tr.xsec-rank-1 .xsec-rank-pill { background: rgba(255, 205, 74, 0.25); color: rgb(255, 205, 74); }
tr.xsec-rank-2 .xsec-rank-pill { background: rgba(208, 213, 221, 0.25); color: rgb(224, 227, 231); }
tr.xsec-rank-3 .xsec-rank-pill { background: rgba(212, 132, 60, 0.25); color: rgb(224, 159, 102); }

tr.xsec-rank-1 { background: rgba(255, 205, 74, 0.04); }
tr.xsec-rank-2 { background: rgba(208, 213, 221, 0.03); }
tr.xsec-rank-3 { background: rgba(212, 132, 60, 0.04); }

/* Small reusable label style (mirrors the landing site's .xsec-eyebrow,
   since both should look the same even though they're two separate CSS
   files/frameworks — Tailwind there, plain CSS here). */
.xsec-eyebrow {
  display: block;
  color: var(--xsec-red-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* -------------------------------------------------------------------------
   18. ANNOUNCEMENTS (Phase 8) — notifications.html + components/notifications.html
   ------------------------------------------------------------------------- */

/* Popup toast (bottom-right corner) */
.xsec-toast {
  background: rgba(15, 15, 18, 0.95) !important;
  border: 1px solid var(--xsec-border) !important;
  border-radius: var(--xsec-radius-sm);
  backdrop-filter: blur(14px);
  box-shadow: var(--xsec-shadow-glow);
  color: var(--xsec-text);
}

.xsec-toast-header {
  background: transparent !important;
  color: var(--xsec-red-soft) !important;
  border-bottom: 1px solid var(--xsec-card-border) !important;
}

.xsec-toast-body {
  color: var(--xsec-text);
}

/* Popup announcement modal */
.xsec-announcement-modal {
  background: rgba(15, 15, 18, 0.95) !important;
  border: 1px solid var(--xsec-border) !important;
  backdrop-filter: blur(16px);
}

/* Announcements list page — highlight the most recent one */
.xsec-announcement-latest {
  border-color: var(--xsec-border) !important;
  box-shadow: var(--xsec-shadow-glow);
}