/*
 * AISTA Tennis — Stage 1 revamp theme
 * Bootstrap 5 CDN + this file replaces the old Bootstrap 4.1.0 / Now UI Dashboard combo.
 * Palette: "Classic Wimbledon" — deep forest green + soft ivory + a muted gold accent
 * reserved for primary calls-to-action, so the page reads as one calm color story
 * instead of green/orange/red competing for attention.
 */

:root {
  --aista-green: #1B4D3E;
  --aista-green-dark: #14372C;
  --aista-orange: #B8912B; /* gold accent — CTAs only */
  --aista-orange-hover: #8F701F;
  --aista-red: #A63D40;
  --aista-warning: #D4A94C;
  --aista-info: #5B7C99;
  --aista-bg: #F8F5EC;
  --aista-footer: #16302A;
  --aista-text: #2B2E28;

  --bs-primary: var(--aista-green);
  --bs-primary-rgb: 27, 77, 62;
  --bs-danger: var(--aista-red);
  --bs-danger-rgb: 166, 61, 64;
  --bs-warning: var(--aista-warning);
  --bs-info: var(--aista-info);
  --bs-body-color: var(--aista-text);
  /* Bootstrap's own `a` rule reads --bs-link-color-rgb (not --bs-link-color)
     for the actual color it paints -- both are set here so links aren't left
     on Bootstrap's default blue. */
  --bs-link-color: var(--aista-green);
  --bs-link-color-rgb: 27, 77, 62;
  --bs-link-hover-color: var(--aista-green-dark);
  --bs-link-hover-color-rgb: 20, 55, 44;

  --bs-body-font-size: 1.125rem; /* ~18px base for senior-friendly readability */
  --bs-body-line-height: 1.55;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--aista-bg);
  color: var(--aista-text);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--aista-green-dark);
}

/* Persistent, sticky top navbar — no hover-only menus, always visible */
.navbar.bg-primary {
  background-color: var(--aista-green) !important;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar .nav-link,
.navbar .navbar-brand {
  font-size: 1.05rem;
  color: #fff !important;
}

/* Bootstrap's navbar-dark toggler icon is a semi-transparent (55%) white
   stroke -- still a bit muted on our darker green. Solid white instead. */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar .nav-link.active,
.navbar .nav-item.active .nav-link {
  font-weight: 700;
  text-decoration: underline;
}

/* Generous, senior-friendly touch targets */
.btn {
  min-height: 48px;
  padding: 0.6rem 1.25rem;
  font-size: 1.05rem;
  border-radius: 0.5rem;
}

.btn-sm {
  min-height: 40px;
}

.form-control,
.form-select {
  min-height: 48px;
  font-size: 1.05rem;
}

/* Card header band — same deep green as the nav, so the page reads as one
   color story rather than a second competing brand color. */
.card-header.aista-band,
.card .card-header {
  background-color: var(--aista-green);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Nav-pills tabs (e.g. "View Players" / "Add Players") default to
   Bootstrap's stock blue. These normally sit inside a green .card-header,
   so inactive tabs stay white-on-transparent (readable against the green)
   and the active tab inverts to a white pill so it's the one that stands out. */
.card-header .nav-pills .nav-link {
  color: #fff;
}

.card-header .nav-pills .nav-link.active,
.card-header .nav-pills .show > .nav-link {
  color: var(--aista-green-dark);
  background-color: #fff;
}

/* Nav-pills used outside a card-header (light background): the reverse. */
.nav-pills .nav-link {
  color: var(--aista-green-dark);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--aista-green);
}

.card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(27, 77, 62, 0.08);
  margin-bottom: 1.5rem;
}

/* Button colors, set via Bootstrap's own --bs-btn-* variables rather than
   plain background-color/border-color overrides. Bootstrap 5's precompiled
   CSS bakes literal hex colors into each variant (it does NOT read
   --bs-primary at the component level), and its .btn.active /
   .btn-check:checked+.btn rule (used for real toggle-button "pressed"
   state) has higher specificity than a single custom class -- so a plain
   .btn-primary{background-color:...} override loses to Bootstrap's own
   default the moment a leftover `active` class lands on the button and
   falls back to invalid/transparent --bs-btn-active-bg. Setting the
   variables instead makes every state (hover/focus/active/disabled)
   resolve correctly through Bootstrap's own mechanism. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--aista-green);
  --bs-btn-border-color: var(--aista-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--aista-green-dark);
  --bs-btn-hover-border-color: var(--aista-green-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--aista-green-dark);
  --bs-btn-active-border-color: var(--aista-green-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--aista-green);
  --bs-btn-disabled-border-color: var(--aista-green);
}

.btn-outline-primary {
  --bs-btn-color: var(--aista-green);
  --bs-btn-border-color: var(--aista-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--aista-green);
  --bs-btn-hover-border-color: var(--aista-green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--aista-green);
  --bs-btn-active-border-color: var(--aista-green);
  --bs-btn-disabled-color: var(--aista-green);
  --bs-btn-disabled-border-color: var(--aista-green);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--aista-red);
  --bs-btn-border-color: var(--aista-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #832F32;
  --bs-btn-hover-border-color: #832F32;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #832F32;
  --bs-btn-active-border-color: #832F32;
}

.btn-outline-danger {
  --bs-btn-color: var(--aista-red);
  --bs-btn-border-color: var(--aista-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--aista-red);
  --bs-btn-hover-border-color: var(--aista-red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--aista-red);
  --bs-btn-active-border-color: var(--aista-red);
}

.btn-outline-success {
  --bs-btn-color: var(--aista-green);
  --bs-btn-border-color: var(--aista-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--aista-green);
  --bs-btn-hover-border-color: var(--aista-green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--aista-green);
  --bs-btn-active-border-color: var(--aista-green);
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--aista-info);
  --bs-btn-border-color: var(--aista-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4A6880;
  --bs-btn-hover-border-color: #4A6880;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4A6880;
  --bs-btn-active-border-color: #4A6880;
}

/* The one accent color in the whole theme — reserved for primary calls to
   action (New Player Registration, Add Tournament, Approve, ...) so it stays
   meaningful instead of blending into a crowd of bright colors. */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--aista-orange);
  --bs-btn-border-color: var(--aista-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--aista-orange-hover);
  --bs-btn-hover-border-color: var(--aista-orange-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--aista-orange-hover);
  --bs-btn-active-border-color: var(--aista-orange-hover);
}

/* Footer bar */
.site-footer {
  background-color: var(--aista-footer);
  color: #fff;
  padding: 1.5rem 0;
  margin-top: 3rem;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
}

/* Table readability */
table.table {
  background-color: #fff;
}

/* !important is required here: DataTables' own CSS ships
   `table.table.dataTable > :not(caption) > * > * { background-color:
   var(--bs-table-bg); }`, which has higher specificity (two classes) than
   a plain `table.table thead th` selector (one class) -- so once
   DataTables initializes a table, its white background-color wins over
   ours regardless of source order, leaving white text on a white header
   (readable in the DOM, invisible on screen -- looked like the column
   names had vanished). */
table.table thead th {
  background-color: var(--aista-green) !important;
  color: #fff;
  vertical-align: middle;
}

/* --- DataTables / Bootstrap 5 integration --- */
table.dataTable {
  width: 100% !important;
  margin-bottom: 1rem !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  min-height: 40px;
  font-size: 1rem;
}

/* Sticky first columns (Rank/Code/Name) on wide matrix tables, via DataTables FixedColumns */
.dtfc-fixed-left {
  background-color: #fff;
  z-index: 2;
}

/* Small screens: keep table scroll affordance obvious */
@media (max-width: 767.98px) {
  body {
    font-size: 1rem;
  }

  .btn-primary-action {
    width: 100%;
  }

  .card-header {
    font-size: 1.1rem;
  }
}