/* ===========================
   Simple Sports Sims — Boxing
   Dark/Ring Theme + UI fixes
   =========================== */

/* --- Theme variables --- */
:root {
  --ring-deep: #08111f;
  --ring-dark: #0b1422;
  --ring-blue: #0f1d33;
  --ring-line: rgba(255,255,255,0.10);
  --ink: #e9edff;
  --muted: #a8b3d1;
  --accent: #ffd86b;
  --accent-2: #7ad0ff;
}

/* --- Background arena gradient --- */
.bg-arena {
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(800px 400px at 10% 10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, var(--ring-deep), var(--ring-blue));
  min-height: 100vh;
}

/* --- Base text colors on dark --- */
body, p, td, th, label, input, select, textarea {
  color: var(--ink) !important;
}
small, .small, .text-muted { color: var(--muted) !important; }

/* --- Accent helpers --- */
.text-accent { color: var(--accent) !important; }
.tracking-wide { letter-spacing: .08em; text-transform: uppercase; }

/* --- Navbar / ring bars --- */
.bg-ring {
  background: linear-gradient(180deg, #0e1a2d, #0a1526);
}
.bg-ring-dark {
  background: linear-gradient(180deg, #0a1322, #070f1b);
}
.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: var(--ink) !important;
}
.navbar-dark .nav-link:hover { color: #fff !important; }

/* --- Ropes (decor bars) --- */
.rope {
  height: 6px;
  background: linear-gradient(90deg, #d33, #eee, #d33);
  opacity: .35;
}
.rope-top   { box-shadow: 0 2px 0 rgba(0,0,0,.25) inset; }
.rope-mid   { margin: .5rem 0; }
.rope-bottom{ box-shadow: 0 -2px 0 rgba(0,0,0,.25) inset; }

/* --- Hero header --- */
.hero-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  padding: 1rem 0 0.5rem 0;
  border-bottom: 1px solid var(--ring-line);
}
.logo-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.logo-left, .logo-right {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.brand-title h1 { color: var(--ink); }
.brand-title h2 { color: var(--accent); }

/* --- Cards / tables --- */
.card {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ring-line);
  color: var(--ink);
  backdrop-filter: blur(2px);
}
.card-header {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--ring-line);
  color: var(--ink);
}
.table {
  --bs-table-bg: rgba(255,255,255,.03);
  --bs-table-striped-bg: rgba(255,255,255,.06);
  --bs-table-color: var(--ink);
  border-color: var(--ring-line);
}
.table thead th {
  color: var(--ink);
  border-bottom: 1px solid var(--ring-line);
}
.table-hover tbody tr:hover {
  background-color: rgba(255,255,255,.06);
}

/* --- Alerts --- */
.alert-success { background: rgba(60,180,90,.15); color: #c7f5d9; border: 1px solid rgba(60,180,90,.35); }
.alert-danger  { background: rgba(200,40,60,.15); color: #ffd0d6; border: 1px solid rgba(200,40,60,.35); }
.alert-warning { background: rgba(240,170,50,.15); color: #ffe9c4; border: 1px solid rgba(240,170,50,.35); }
.alert-info    { background: rgba(80,160,220,.15); color: #d1ebff; border: 1px solid rgba(80,160,220,.35); }

/* --- Buttons --- */
.btn-primary {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  border-color: #1e40af;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #1e40af, #1d4ed8);
  border-color: #1e3a8a;
}
.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline-primary:hover {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
}

/* --- Links --- */
a, .nav-link { color: var(--accent) !important; }
a:hover, .nav-link:hover { color: #fff !important; }

/* --- Forms (dark theme) --- */
.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  background: rgba(0,0,0,.45) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.form-control::placeholder { color: #c8d0e6 !important; }
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(255,216,107,.15);
}

/* --- Select / option legibility on dark --- */
form select,
.form-select,
select.form-select {
  background-color: #0b1422 !important;
  color: #fff !important;
  border: 1px solid #445 !important;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(255,255,255,0.08);
}
form select option,
.form-select option {
  background-color: #0b1422 !important;
  color: #fff !important;
}
.form-select option:hover {
  background-color: #1e2b42 !important;
}

/* --- Footer --- */
footer { border-top: 1px solid var(--ring-line); }

/* --- Utilities --- */
.shadow-soft { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.badge.bg-secondary {
  background: rgba(255,255,255,.12) !important;
  color: var(--ink);
  border: 1px solid var(--ring-line);
}