/* WWS Clubs — app styles */
/* Visual design copied from existing clubs.worldwaterskiers.com WP theme */

:root {
  --wsc-primary:       #2563eb; /* was #3f80ea — matched to the .contract-tab blue from LocalBuilderPro */
  --wsc-primary-rgb:   37, 99, 235;
  --wsc-primary-hover: #1d4ed8; /* ~15% darker, Bootstrap's usual hover mix */
  --wsc-primary-active:#1e40af; /* ~25% darker, Bootstrap's usual active mix */
  --wsc-sidebar-w:     240px;

  /* Extra badge colors beyond Bootstrap's default set (success/danger/warning/
     info/primary/secondary/dark/light) -- add a line here + a matching
     .badge.bg-<name> rule below to make a new color usable anywhere on the
     site as just class="badge bg-<name>", same as the built-in colors. */
  --wsc-purple: #7c3aed;
  --wsc-teal:   #0d9488;
  --wsc-pink:   #db2777;
  --wsc-indigo: #4f46e5;
  --wsc-orange: #ea580c;
}

/* ── General ─────────────────────────────────────────────────────────────────── */
body {
  background-color: #f7f9fc;
  font-size: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 { color: #495057; }
a { color: #568fed; text-decoration: none; }
a:hover { color: var(--wsc-primary); }
.text-theme-color { color: var(--wsc-primary) !important; }
.text-primary     { color: var(--wsc-primary) !important; }
.text-success     { color: #4bbf73 !important; }
.text-warning     { color: #e5a54b !important; }
.text-danger      { color: #d9534f !important; }

/* Setting Bootstrap's own --bs-btn-* variables (rather than !important overrides)
   so :hover/:active/:disabled/:focus all pick up the new color automatically —
   Bootstrap's compiled CSS already reads these per-state, it just ships with its
   own blue baked in until we override them here. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--wsc-primary);
  --bs-btn-border-color: var(--wsc-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wsc-primary-hover);
  --bs-btn-hover-border-color: var(--wsc-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--wsc-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wsc-primary-active);
  --bs-btn-active-border-color: var(--wsc-primary-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--wsc-primary);
  --bs-btn-disabled-border-color: var(--wsc-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--wsc-primary);
  --bs-btn-border-color: var(--wsc-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wsc-primary);
  --bs-btn-hover-border-color: var(--wsc-primary);
  --bs-btn-focus-shadow-rgb: var(--wsc-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wsc-primary);
  --bs-btn-active-border-color: var(--wsc-primary);
  --bs-btn-disabled-color: var(--wsc-primary);
  --bs-btn-disabled-border-color: var(--wsc-primary);
}
/* Matches .nav-tabs .nav-link (the global tab style) so outline buttons feel consistent with tabs. */
.btn-outline-secondary {
  --bs-btn-color: #64748b;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #e2e8f0;
  --bs-btn-border-radius: 20px;
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: .82rem;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #f1f5f9;
  --bs-btn-hover-border-color: #e2e8f0;
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #f1f5f9;
  --bs-btn-active-border-color: #e2e8f0;
  --bs-btn-disabled-color: #64748b;
  --bs-btn-disabled-border-color: #e2e8f0;
}

.btn-xs { padding: 0rem .5rem !important; font-size: .9rem !important; }

/* All Bootstrap buttons get a heavier 2px border (Bootstrap defaults to 1px). */
.btn { --bs-btn-border-width: 2px; }

.shadow-light { box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%); }

.badge-success-soft { font-size: 14px; font-weight: 400; color: #4bbf73; background-color: rgba(75,191,115,.175); }
.badge-warning-soft { font-size: 14px; font-weight: 400; color: #e5a54b; background-color: rgba(229,165,75,.175); }
.badge-danger-soft  { font-size: 14px; font-weight: 400; color: #d9534f; background-color: rgba(217,83,79,.175); }

/* ── Rounded pill badges (any "bg-*-subtle text-*" badge, e.g. status pills) ─
   Border/background are derived from whatever text color is set (currentColor),
   so this covers every semantic variant (success/danger/warning/info/primary/
   secondary) without needing a rule per color. */
.badge[class*="-subtle"] {
  border-radius: 50rem !important;
  border: 1.5px solid currentColor;
  background-color: color-mix(in srgb, currentColor 15%, #fff) !important;
  font-weight: 700;
  padding: .3em .75em;
}

/* ── Same pill treatment for plain "badge bg-*" badges (no -subtle/text-* pair
   in the markup) -- every existing solid-color badge across the site picks
   this up automatically, no markup changes needed. success/warning/danger/
   primary reuse this app's own brighter brand colors (same ones .text-success
   etc. and the .badge-*-soft classes above already use) rather than
   Bootstrap's duller stock hues; the rest fall back to Bootstrap's variable. */
.badge.bg-success, .badge.bg-danger, .badge.bg-warning, .badge.bg-info,
.badge.bg-primary, .badge.bg-secondary, .badge.bg-dark, .badge.bg-light,
.badge.bg-purple, .badge.bg-teal, .badge.bg-pink, .badge.bg-indigo, .badge.bg-orange {
  border-radius: 50rem !important;
  font-weight: 700;
  padding: .3em .75em;
}
.badge.bg-success  { background-color: color-mix(in srgb, #4bbf73 15%, #fff) !important; border: 1.5px solid #4bbf73;  color: #4bbf73  !important; }
.badge.bg-danger   { background-color: color-mix(in srgb, #d9534f 15%, #fff) !important; border: 1.5px solid #d9534f;  color: #d9534f  !important; }
.badge.bg-warning  { background-color: color-mix(in srgb, #e5a54b 15%, #fff) !important; border: 1.5px solid #e5a54b;  color: #e5a54b  !important; }
.badge.bg-info     { background-color: color-mix(in srgb, var(--bs-info)    15%, #fff) !important; border: 1.5px solid var(--bs-info);     color: var(--bs-info)     !important; }
.badge.bg-primary  { background-color: color-mix(in srgb, var(--wsc-primary) 15%, #fff) !important; border: 1.5px solid var(--wsc-primary); color: var(--wsc-primary) !important; }
.badge.bg-secondary{ background-color: color-mix(in srgb, var(--bs-secondary) 15%, #fff) !important; border: 1.5px solid var(--bs-secondary); color: var(--bs-secondary) !important; }
.badge.bg-dark     { background-color: color-mix(in srgb, var(--bs-dark)    15%, #fff) !important; border: 1.5px solid var(--bs-dark);     color: var(--bs-dark)     !important; }
.badge.bg-light    { background-color: color-mix(in srgb, var(--bs-light)   30%, #fff) !important; border: 1.5px solid var(--bs-secondary); color: var(--bs-secondary) !important; }
.badge.bg-purple   { background-color: color-mix(in srgb, var(--wsc-purple) 15%, #fff) !important; border: 1.5px solid var(--wsc-purple); color: var(--wsc-purple) !important; }
.badge.bg-teal     { background-color: color-mix(in srgb, var(--wsc-teal)   15%, #fff) !important; border: 1.5px solid var(--wsc-teal);   color: var(--wsc-teal)   !important; }
.badge.bg-pink     { background-color: color-mix(in srgb, var(--wsc-pink)   15%, #fff) !important; border: 1.5px solid var(--wsc-pink);   color: var(--wsc-pink)   !important; }
.badge.bg-indigo   { background-color: color-mix(in srgb, var(--wsc-indigo) 15%, #fff) !important; border: 1.5px solid var(--wsc-indigo); color: var(--wsc-indigo) !important; }
.badge.bg-orange   { background-color: color-mix(in srgb, var(--wsc-orange) 15%, #fff) !important; border: 1.5px solid var(--wsc-orange); color: var(--wsc-orange) !important; }

textarea { resize: none !important; font-size: .85rem !important; }

.dropdown-menu { border: 3px solid #e2e8f0; }
.dropdown-divider { border-top-color: #e2e8f0; }

/* ── Site-admin layout: fixed top header + horizontal nav ────────────────────── */
header#masthead { background: #293042; color: #98a6ad; font-size: 14px; padding: 0; }
header#masthead a { color: #98a6ad; }
header#masthead a:hover { color: #fff; }
#masthead .dropdown-menu { font-size: 14px; }

#masthead .page-nav { background: #fff; border-bottom: 1px solid #eee; }
#masthead .page-nav .nav-link { color: #848895; padding: .6rem 1rem; font-size: 14px; }
#masthead .page-nav .nav-link:hover { color: var(--wsc-primary); }
#masthead .page-nav .nav-link.active { color: var(--wsc-primary); border-bottom: 2px solid var(--wsc-primary); }

#content {
  background-color: #f7f9fc;
  padding-top: 118px;
  padding-bottom: 30px;
  min-height: calc(100vh - 200px);
}
main#main.site-main {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%);
}

.site-footer-wave { height: 150px; overflow: hidden; background-color: #f7f9fc; }
footer#colophon { color: #eee; background: #6c7a92; padding: 0; margin-top: -1px; font-size: 14px; }
footer#colophon a { color: #ddd; }
footer#colophon a:hover { color: #fff; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
body.app-layout {
  display: flex;
  min-height: 100vh;
  background: #f5f6fa;
}

.sidebar {
  width: var(--wsc-sidebar-w);
  min-height: 100vh;
  background: #00162b;
  color: #c8cfe0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: hidden;
}

/* Brand + club-switcher stay put; only the nav links below them scroll. */
.sidebar-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sidebar .brand {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  display: block;
}

.sidebar .nav-link {
  color: #c8cfe0;
  padding: .45rem 1rem;
  border-radius: 6px;
  margin: 1px .5rem;
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}

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

.sidebar .nav-section {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 1rem 1rem .25rem;
}

.main-content {
  margin-left: var(--wsc-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-body {
  padding: 1.5rem;
  flex: 1;
}

/* ── Login-As banner ─────────────────────────────────────────────────────── */
.login-as-banner {
  background: #fff3cd;
  border-bottom: 2px solid #ffc107;
  padding: .5rem 1.5rem;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.25rem;
  border: 1px solid #e9ecef;
}

/* Small caps heading used inside stat-cards throughout settings pages
   (e.g. club-payments.php's "Stripe Connect") — global so every page using
   this class looks the same, instead of each page needing its own copy. */
.section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: .3rem;
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
  color: #dee2e6;
  opacity: 1;
}

/* Native date/datetime inputs' empty mm/dd/yyyy segments don't take ::placeholder --
   app.js toggles .has-value once a real date is picked, so only the unset state gets
   dimmed to match every other placeholder above. */
input[type="date"]:not(.has-value)::-webkit-datetime-edit-text,
input[type="date"]:not(.has-value)::-webkit-datetime-edit-month-field,
input[type="date"]:not(.has-value)::-webkit-datetime-edit-day-field,
input[type="date"]:not(.has-value)::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:not(.has-value)::-webkit-datetime-edit-text,
input[type="datetime-local"]:not(.has-value)::-webkit-datetime-edit-month-field,
input[type="datetime-local"]:not(.has-value)::-webkit-datetime-edit-day-field,
input[type="datetime-local"]:not(.has-value)::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:not(.has-value)::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]:not(.has-value)::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]:not(.has-value)::-webkit-datetime-edit-ampm-field {
  color: #dee2e6;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  border-bottom: 1px solid #e9ecef;
}

/* ── Small pill tabs (event/source filters) ─────────────────────────────── */
.event-tab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.event-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: none;
  background: #eef1f4;
  color: #64748b;
  font-size: .78rem;
  font-weight: 500;
  padding: .32rem .85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.event-tab-pill:hover,
.event-tab-pill:hover:not(.active) { background: #e2e6ea; color: #64748b; }
.event-tab-pill.active { background: #64748b; color: #fff; }
.event-tab-pill.active:hover { color: #fff; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
#toastContainer {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ── Bare icon buttons (edit / delete) ────────────────────────────────────── */
/* Usage: <button class="btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
          <button class="btn-delete" title="Delete"><i class="bi bi-trash"></i></button> */
.btn-edit,
.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #adb5bd;
  padding: .25rem .35rem;
  border-radius: 5px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
  font-size: 1rem;
}
.btn-edit:hover   { color: var(--wsc-primary); }
.btn-delete:hover { color: #dc3545; }

/* ── Pill filter tabs ────────────────────────────────────────────────────── */
/* Usage: <a class="btn btn-sm rounded-pill tab-active">Active</a>
          <a class="btn btn-sm rounded-pill tab-inactive">Inactive</a> */
.tab-active  { background:#eef5ff !important; border-color:#eef5ff !important; color:#3366aa !important; }
.tab-active:hover { background:#ddeeff !important; border-color:#ddeeff !important; color:#2255aa !important; }
.tab-inactive { background:#f0f2f5 !important; border-color:#f0f2f5 !important; color:#999 !important; }
.tab-inactive:hover { background:#e9ecef !important; border-color:#e9ecef !important; color:#666 !important; }

/* nav-pills using the same tab style (for Bootstrap tab-pane pages) */
.nav-pills .nav-link           { background:#f0f2f5; color:#999; border-radius:50rem !important; font-size:.875rem; }
.nav-pills .nav-link:hover     { background:#e9ecef; color:#666; }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link   { background:#eef5ff !important; color:#3366aa !important; }

/* ── Segmented pill tabs (nav-tabs, e.g. Calendar/Bookings, Staff/Shifts) ─── */
/* Values copied from LocalBuilderPro's .contract-tab (public/assets/css/style.css) */
.nav-tabs { border-bottom:none; flex-wrap:wrap; gap:.5rem; }
.nav-tabs .nav-item { margin-bottom:0; }
.nav-tabs .nav-link {
  display:inline-flex; align-items:center; gap:.4rem;
  border:2px solid #e2e8f0; border-radius:20px;
  background:#fff; color:#64748b;
  padding:.28rem .9rem; font-weight:500; font-size:.82rem;
  transition:background-color .15s, color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover { background:#f1f5f9; color:#0f172a; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  background:var(--wsc-primary); border-color:var(--wsc-primary); color:#fff;
}

/* ── Event date box ──────────────────────────────────────────────────────── */
/* Usage: <div class="date-box"><div class="date-day">18</div><div class="date-month">OCT</div></div> */
.date-box   { display:inline-block; border-radius:8px; overflow:hidden; min-width:48px; text-align:center; vertical-align:middle; }
.date-day   { font-size:1.15rem; font-weight:700; line-height:1; padding:6px 10px 4px; background:#f5f7f9; color:#222; display:block; }
.date-month { font-size:.68rem; font-weight:600; text-transform:uppercase; background:#6fa8c9; color:#fff; padding:3px 10px; display:block; letter-spacing:.04em; }

/* ── Field help icons (? in circle) ───────────────────────────────────────── */
.field-help-icon {
  color: #c8d3dd !important;
  font-size: .85rem;
  cursor: help;
  flex-shrink: 0;
  line-height: 1;
  transition: color .15s;
  user-select: none;
}
.field-help-icon:hover { color: var(--wsc-primary) !important; }
.popover { font-size: .79rem !important; max-width: 280px; }
.popover .popover-body { color: #495057; }