/* ──────────────────────────────────────────────────────────────────────────
 * theme.css — Carbon design language ported from soccerverse.com.
 *
 * Loaded LAST so it retones the legacy base.css / card-fix.css surfaces without
 * touching their layout. The old shell inverted the palette (near-white "chalk"
 * cards with navy text on a pure-blue #000733 page); this restyles those same
 * selectors to the site's glass-on-navy look: a faint stadium backdrop, the
 * 7-token Carbon palette, translucent blurred panels, and pitch-green accents.
 * No markup or JS changes — only appearance.
 * ────────────────────────────────────────────────────────────────────────── */

/* Remap the legacy base.css variables to the marketing-site palette, and add
   the surface scale the glass panels use. */
:root {
  --navy: #0f1117; /* rgb(15 17 23) — the Carbon page base, not pure blue */
  --ultra: #34384c;
  --chalk: #e8f1f9;
  --pitch: #3ff384;
  --surface-1: 24 26 34;
  --surface-2: 32 35 45;
  --surface-3: 42 45 58;
  --border-light: rgba(255, 255, 255, 0.08);
}

/* ─── Page + cinematic backdrop ─────────────────────────────────────────── */
body {
  background-color: var(--navy);
  color: rgb(var(--color-chalk, 232 241 249));
}

/* A heavily-darkened stadium photo fixed behind everything, then a navy wash —
   the "AAA game site" atmosphere the glass panels float on. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('/static/images/backdrops/stadium-aerial.webp') center top / cover no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 420px at 70% -5%, rgb(63 243 132 / 0.05), transparent 70%),
    linear-gradient(to bottom, rgb(15 17 23 / 0.82), rgb(15 17 23 / 0.62) 45%, rgb(15 17 23 / 0.96));
  pointer-events: none;
}

/* ─── Left rail + top bar ───────────────────────────────────────────────── */
.left-nav {
  background-color: rgb(15 17 23 / 0.7);
  backdrop-filter: blur(8px);
  border-right: 1px solid rgb(var(--surface-2) / 0.5);
}
.nav-item.active {
  background-color: rgb(63 243 132 / 0.08);
  border-left: 3px solid var(--pitch);
}
.nav-item:hover {
  background-color: rgb(var(--surface-2) / 0.5);
}
.nav-item .icon svg,
.submenu-icon svg {
  stroke: rgb(232 241 249 / 0.65);
}
.nav-item:hover .icon svg {
  stroke: var(--pitch);
}

.top-bar {
  background-color: rgb(15 17 23 / 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--surface-2) / 0.5);
}
.top-breadcrumb {
  color: rgb(232 241 249 / 0.6);
  border-right: 1px solid rgb(var(--surface-2) / 0.6);
}
.top-breadcrumb a,
.breadcrumb a {
  color: var(--pitch);
}

/* Search + sort controls → token glass inputs */
.search-bar input,
.sort-toggle {
  background-color: rgb(var(--surface-2) / 0.4);
  border: 1px solid rgb(var(--surface-2) / 0.7);
  color: rgb(var(--color-chalk, 232 241 249));
}
.search-bar input::placeholder {
  color: rgb(232 241 249 / 0.4);
}
.search-bar input:focus,
.sort-toggle:focus {
  outline: none;
  border-color: var(--pitch);
}
.sort-dropdown {
  background-color: rgb(24 26 34 / 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(var(--surface-2) / 0.7);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.45);
}
.sort-dropdown .dropdown-item:hover {
  background-color: rgb(var(--surface-2) / 0.6);
}
.sort-dropdown .dropdown-item.active {
  background-color: rgb(63 243 132 / 0.14);
  color: var(--pitch);
}

/* Submit CTA = pitch; outline login button */
.submit-btn,
.mobile-register-btn {
  background-color: var(--pitch);
  color: #0f1117;
  font-weight: 600;
}
.avatar {
  background-color: rgb(var(--surface-3));
}

/* ─── Content cards → glass ─────────────────────────────────────────────── */
.item-card {
  background: linear-gradient(135deg, rgb(24 26 34 / 0.75), rgb(24 26 34 / 0.45));
  backdrop-filter: blur(12px);
  border: 1px solid rgb(var(--surface-2) / 0.5);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.04);
  color: rgb(var(--color-chalk, 232 241 249));
}
.item-card:hover {
  transform: translateY(-3px);
  border-color: rgb(63 243 132 / 0.4);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(63 243 132 / 0.12);
}
.item-title {
  color: rgb(var(--color-chalk, 232 241 249));
}
.item-description {
  color: rgb(232 241 249 / 0.72);
}
.card-bottom-section,
.item-actions,
.featured-card-content .item-author {
  border-top-color: rgb(var(--surface-2) / 0.6) !important;
}
.item-author span {
  color: rgb(232 241 249 / 0.9);
}
.item-author:hover {
  background-color: rgb(var(--surface-2) / 0.5);
}
.author-avatar {
  border: 1px solid rgb(var(--surface-3));
  background-color: rgb(var(--surface-3));
}

/* Category pill → pitch tint (was solid ultra) */
.category-pill {
  background-color: rgb(63 243 132 / 0.1);
  color: var(--pitch);
  box-shadow: inset 0 0 0 1px rgb(63 243 132 / 0.25);
  font-weight: 600;
}

/* Stat row icons */
.stats-container .bi-eye-fill {
  color: rgb(232 241 249 / 0.5) !important;
}
.stats-container .bi-chat-text-fill {
  color: rgb(232 241 249 / 0.55) !important;
}
.stats-container {
  color: rgb(232 241 249 / 0.7);
}

/* Like / share / favorite buttons → glass icon buttons */
.like-btn,
.share-btn {
  background-color: rgb(var(--surface-2) / 0.5);
  color: rgb(232 241 249 / 0.75);
}
.like-btn:hover,
.share-btn:hover {
  background-color: rgb(63 243 132 / 0.15);
  color: var(--pitch);
}

/* ─── Right-rail widgets → glass panels ─────────────────────────────────── */
.widget {
  background: linear-gradient(135deg, rgb(24 26 34 / 0.75), rgb(24 26 34 / 0.45));
  backdrop-filter: blur(12px);
  border: 1px solid rgb(var(--surface-2) / 0.4);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.04);
  color: rgb(var(--color-chalk, 232 241 249));
  padding: 0;
  overflow: hidden;
}
.widget-title {
  border-bottom: 1px solid rgb(var(--surface-2) / 0.4);
  background-color: rgb(15 17 23 / 0.4);
  padding: 12px 16px;
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--color-chalk, 232 241 249));
}
.events-list,
.tags-list,
.tools-list {
  padding: 12px 16px;
}
.event-item,
.tool-item {
  border-bottom: 1px solid rgb(var(--surface-2) / 0.35);
}
.event-date {
  color: rgb(232 241 249 / 0.5);
}
.tool-rating {
  color: var(--pitch);
}

/* Trending-tag chips → token chips with pitch hover */
.tag-chip {
  background-color: rgb(var(--surface-2) / 0.4);
  border: 1px solid rgb(var(--surface-2) / 0.7);
  color: rgb(232 241 249 / 0.7);
  font-family: 'Inter', sans-serif;
}
.tag-chip:hover {
  background-color: rgb(63 243 132 / 0.12);
  border-color: rgb(63 243 132 / 0.5);
  color: var(--pitch);
}
.tag-chip .badge {
  background-color: rgb(63 243 132 / 0.18) !important;
  color: var(--pitch) !important;
}

/* Category page header → glass */
.category-header {
  background: linear-gradient(135deg, rgb(24 26 34 / 0.7), rgb(24 26 34 / 0.4));
  border: 1px solid rgb(var(--surface-2) / 0.5);
  backdrop-filter: blur(12px);
}
.category-icon {
  background-color: rgb(63 243 132 / 0.12);
}
.category-icon svg {
  stroke: var(--pitch);
}

/* ─── Bootstrap surfaces used by auth/forms/dropdowns → dark tokens ─────── */
.card {
  background: linear-gradient(135deg, rgb(24 26 34 / 0.85), rgb(24 26 34 / 0.6));
  border: 1px solid rgb(var(--surface-2) / 0.5);
  color: rgb(var(--color-chalk, 232 241 249)) !important;
  backdrop-filter: blur(12px);
}
.card-header {
  background-color: rgb(15 17 23 / 0.5);
  border-bottom: 1px solid rgb(var(--surface-2) / 0.5);
  color: rgb(var(--color-chalk, 232 241 249));
}
.form-control,
.form-select {
  background-color: rgb(var(--surface-2) / 0.4) !important;
  border: 1px solid rgb(var(--surface-2) / 0.7) !important;
  color: rgb(var(--color-chalk, 232 241 249)) !important;
}
.form-control::placeholder {
  color: rgb(232 241 249 / 0.4) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--pitch) !important;
  box-shadow: 0 0 0 2px rgb(63 243 132 / 0.2) !important;
}
.form-label,
.form-text,
label {
  color: rgb(232 241 249 / 0.8);
}
.btn-primary {
  background-color: var(--pitch) !important;
  border-color: var(--pitch) !important;
  color: #0f1117 !important;
  font-weight: 600;
}
.btn-outline-light {
  border-color: rgb(var(--surface-3)) !important;
  color: rgb(var(--color-chalk, 232 241 249)) !important;
}
.dropdown-menu {
  background-color: rgb(24 26 34 / 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(var(--surface-2) / 0.7);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.45);
}
.dropdown-item {
  color: rgb(232 241 249 / 0.85);
}
.dropdown-item:hover {
  background-color: rgb(var(--surface-2) / 0.6);
  color: rgb(var(--color-chalk, 232 241 249));
}
.dropdown-divider {
  border-color: rgb(var(--surface-2) / 0.6);
}
.alert {
  background-color: rgb(var(--surface-2) / 0.5);
  border: 1px solid rgb(var(--surface-2) / 0.8);
  color: rgb(var(--color-chalk, 232 241 249));
}
.terms-content {
  color: rgb(232 241 249 / 0.85) !important;
}

/* Language flag dropdown items readable on dark */
.language-option {
  color: rgb(232 241 249 / 0.85);
}
.language-option.active {
  background-color: rgb(63 243 132 / 0.12);
  color: var(--pitch);
}
.language-option:hover {
  background-color: rgb(var(--surface-2) / 0.6);
}

/* ─── Tables (admin: manage_users, moderation, history, my_items) → glass ───
   Bootstrap 5.3 drives table colours from --bs-table-* vars, so retoning is a
   pure variable swap — no !important fights. Header/cell spacing is set here. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: rgb(232 241 249 / 0.85);
  --bs-table-border-color: rgb(255 255 255 / 0.06);
  --bs-table-striped-bg: rgb(255 255 255 / 0.025);
  --bs-table-striped-color: rgb(232 241 249 / 0.85);
  --bs-table-hover-bg: rgb(63 243 132 / 0.07);
  --bs-table-hover-color: rgb(232 241 249 / 1);
  color: rgb(232 241 249 / 0.85);
  border-color: rgb(255 255 255 / 0.06);
  margin-bottom: 0;
  vertical-align: middle;
}
.table > thead th,
.table > thead td {
  color: rgb(232 241 249 / 0.5);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding: 0.8rem 1rem;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: 0.8rem 1rem;
  border-color: rgb(255 255 255 / 0.05);
}
.table > :not(:first-child) {
  border-top: none;
}
.table a:not(.btn) {
  color: var(--pitch);
  text-decoration: none;
}
.table a:not(.btn):hover {
  text-decoration: underline;
}

/* ─── Bootstrap modals (e.g. moderation confirm) → glass ─────────────────── */
.modal-content {
  background: linear-gradient(135deg, rgb(24 26 34 / 0.97), rgb(24 26 34 / 0.9));
  border: 1px solid rgb(var(--surface-2) / 0.6);
  color: rgb(var(--color-chalk, 232 241 249));
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
}
.modal-header,
.modal-footer {
  border-color: rgb(255 255 255 / 0.07);
}
.btn-close {
  filter: invert(1) grayscale(1) brightness(1.7);
  opacity: 0.55;
}
.btn-close:hover {
  opacity: 1;
}

/* Bootstrap muted helper text → legible on dark */
.text-muted {
  color: rgb(232 241 249 / 0.55) !important;
}

/* ─── Featured cards (the white-on-white block + the "bars") ─────────────────
   The legacy card-fix.css layer used var(--chalk) — which we remapped to the
   near-white text colour — as (a) the featured content-panel BACKGROUND and
   (b) the colour the description fade-gradient melts into. On the dark theme
   that rendered the featured panel as a solid white block with invisible white
   text, and left a pale "bar" at the foot of every card description. Retone
   both to the glass surface (theme.css loads after card-fix.css, so these win). */
.featured-card {
  background-color: rgb(var(--surface-1)) !important;
}
.featured-card-content {
  background: linear-gradient(135deg, rgb(28 31 41 / 0.96), rgb(20 22 30 / 0.96)) !important;
  color: rgb(var(--color-chalk, 232 241 249));
  backdrop-filter: blur(6px);
}
.featured-card-content .item-title,
.featured-card-content .item-description,
.featured-card-content .item-author span {
  color: rgb(var(--color-chalk, 232 241 249));
}
/* Description fade-outs → fade to the dark card, NOT to white */
.featured-card-content .item-description::after {
  background: linear-gradient(to bottom, transparent, rgb(28 31 41) 92%) !important;
}
.item-card:not(.featured-card) .item-description::after {
  background: linear-gradient(to bottom, transparent, rgb(22 24 32) 92%) !important;
}
/* Card dividers were rgba(0,0,0,…) — invisible on dark → faint light hairline */
.card-bottom-section,
.featured-card-content .item-author {
  border-top-color: rgb(255 255 255 / 0.06) !important;
}