:root {
  --brand: #ea6f9c;
  --brand-dark: #8e0048;
  --brand-light: #fde3f0;
  --accent: #ff6fa8;
  --navbar-bg: #178a4b;

  --bs-primary: var(--brand);
  --bs-primary-rgb: 234, 111, 156;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 234, 111, 156;
  --bs-link-hover-color: var(--brand-dark);
  --bs-link-hover-color-rgb: 142, 0, 72;
}

body {
  font-family: 'Sarabun', 'Segoe UI', sans-serif;
  background-color: #fbf3f7;
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: 214, 0, 111;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: 214, 0, 111;
}

.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.pagination .page-link {
  color: var(--brand);
}

.pagination .page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}

.navbar-brand {
  font-weight: 700;
}

/*
 * Top navbar gradient: green -> pink, top to bottom.
 * The 3 stops control the ratio: navbar-bg stays solid until the 2nd
 * stop's percentage, then blends into brand over the remainder.
 * e.g. "70%" below = ~70% green / 30% pink. Lower it for more pink,
 * raise it for more green. Swap var(--navbar-bg) / var(--brand) for
 * different colors, or change the direction (180deg = top-to-bottom,
 * 90deg = left-to-right).
 */
.navbar-gradient {
  background: linear-gradient(180deg, var(--navbar-bg) 0%, var(--navbar-bg) 90%, var(--brand) 100%);
}

/*
 * Decorative effect for the pink hero/header area: soft glowing light
 * blobs + a subtle dotted texture layered on top of the existing
 * background gradient, plus a gentle floating animation on the trophy
 * icon. Purely CSS, no extra images.
 */
.hero-decor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-decor::before,
.hero-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-decor::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 80% 90%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 10% 95%, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, 0) 35%);
}

.hero-decor::after {
  background-image: radial-gradient(rgba(255, 255, 255, .3) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: .25;
}

.hero-decor > .container {
  position: relative;
  z-index: 1;
}

.hero-decor .bi-trophy {
  display: inline-block;
  animation: hero-float 3s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-decor .bi-trophy { animation: none; }
}

.app-sidebar {
  width: 260px;
  min-height: calc(100vh - 56px);
  background: linear-gradient(180deg, var(--brand-dark), var(--brand));
}

.sidebar-close {
  color: rgba(255, 255, 255, .85);
}

.sidebar-close:hover {
  color: #fff;
}

.app-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  border-radius: .5rem;
  margin-bottom: .15rem;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.app-sidebar .nav-link i {
  width: 1.4rem;
  display: inline-block;
  text-align: center;
}

.card {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
}

.stat-card {
  border-left: 4px solid var(--brand);
}

.stat-card-link {
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.stat-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

html {
  scroll-behavior: smooth;
}

.scroll-anchor {
  scroll-margin-top: 1rem;
}

.tournament-card {
  transition: transform .15s ease, box-shadow .15s ease;
}

.tournament-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

.bg-brand-light {
  background-color: var(--brand-light);
}

.text-brand-dark {
  color: var(--brand-dark) !important;
}

.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-brand:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.badge-status-draft { background-color: #6c757d; }
.badge-status-submitted { background-color: #0d6efd; }
.badge-status-approved { background-color: #198754; }
.badge-status-rejected { background-color: #dc3545; }

.avatar-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: .5rem;
  background: #e9ecef;
}

.player-card {
  text-align: center;
}

.player-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: .5rem;
  background: #e9ecef;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, var(--accent));
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

@media (max-width: 767.98px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1045;
    width: 82%;
    max-width: 280px;
    height: 100vh !important;
    min-height: 0;
    overflow-y: auto;
    box-shadow: .5rem 0 2rem rgba(0, 0, 0, .35);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 0, 15, .5);
    z-index: 1040;
  }

  .sidebar-backdrop.show {
    display: block;
  }

  body.sidebar-open {
    overflow: hidden;
  }
}