/* UI Kit: Design Tokens */
:root {
  /* Brand Colors */
  --color-primary-blue: #004A9F;
  --color-primary-blue-hover: #003D85;
  --color-primary-red: #E63946;
  --color-white: #FFFFFF;
  --color-dark-navy: #022B50;
  --color-soft-gray: #F4F6F8;
  --color-soft-gray-2: #F9FAFA;
  --color-medium-gray: #C8CCD1;
  --color-dark-gray: #5A5F65;
  --color-success-green: #2ECC71;
  --color-warning-yellow: #F1C40F;
  --color-error-red: #C0392B;

  /* Typography */
  --font-family-base: 'Inter', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --h1-size: 32px; --h1-weight: 700; --h1-letter: -0.5px;
  --h2-size: 26px; --h2-weight: 600; --h2-letter: -0.5px;
  --h3-size: 22px; --h3-weight: 600; --h3-letter: -0.5px;
  --body-lg-size: 18px; --body-lg-weight: 400; --body-lg-letter: 0px;
  --body-size: 17px; --body-weight: 400; --body-letter: 0px;
  --small-size: 13px; --small-weight: 400; --small-letter: 0px;

  /* Spacing (4pt grid) */
  --space-xs: 4px; --space-s: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 32px; --space-xxl: 48px;

  /* Radii */
  --radius-10: 10px; --radius-14: 14px; --radius-16: 16px; --radius-20: 20px;

  /* Shadows */
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Base */
html, body {
  font-family: var(--font-family-base);
  color: #111827;
}
/* Global overlay/backdrop neutralization: prevent stuck layers from blocking clicks */
.modal-backdrop,
.offcanvas-backdrop,
.backdrop,
.overlay,
.toast-overlay,
[class*="overlay"],
[class*="backdrop"],
.bs-backdrop,
.cdk-overlay-backdrop,
.sweet-overlay {
  background-color: transparent !important;
  pointer-events: none !important;
}
body.modal-open { overflow: auto !important; padding-right: 0 !important; }
/* Defensive: disable click capture on body pseudo elements that could overlay the page */
body::before, body::after { pointer-events: none !important; }
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-letter); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-letter); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-letter); }
p, li { font-weight: var(--body-weight); letter-spacing: var(--body-letter); }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.25px; }
/* Links hover to brand blue */
a { color: inherit; text-decoration-color: rgba(13,110,253,.35); }
a:hover { color: var(--color-primary-blue); text-decoration-color: var(--color-primary-blue); }
p { font-size: var(--body-size); }
small, .text-small { font-size: var(--small-size); }

/* Buttons: override Bootstrap palette to match UI kit */
.btn-primary {
  background-color: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: var(--color-white);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-soft);
  letter-spacing: 0.5px;
}
.btn-primary:hover {
  background-color: var(--color-primary-blue-hover);
  border-color: var(--color-primary-blue-hover);
}
.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-primary-blue);
  border: 2px solid var(--color-primary-blue);
  border-radius: var(--radius-10);
}
.btn-secondary:hover {
  background-color: #E4EEF9;
}
.btn-danger, .btn-accent {
  background-color: var(--color-primary-red);
  border-color: var(--color-primary-red);
  color: var(--color-white);
  border-radius: var(--radius-10);
}
.btn-outline-secondary, .btn-ghost {
  background-color: transparent;
  color: var(--color-dark-gray);
  border: 1px solid transparent;
}
.btn-outline-secondary:hover, .btn-ghost:hover {
  background-color: #EFEFEF;
}
.btn:disabled, .btn.disabled {
  background-color: var(--color-medium-gray) !important;
  color: #6F7376 !important;
  border-color: var(--color-medium-gray) !important;
}
.btn-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background-color: var(--color-soft-gray);
  color: var(--color-primary-blue);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Cards */
.card.ui-card {
  background-color: var(--color-white);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-soft);
  padding: var(--space-l);
  border: none;
  position: relative;
  z-index: 2;
}
.card.ui-card h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); }
.card.ui-card h4, .card.ui-card h5 { font-weight: 600; }
.highlight-card {
  border-radius: var(--radius-20);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.highlight-card.blue { background-color: var(--color-primary-blue); color: var(--color-white); }
.highlight-card.gray { background-color: var(--color-soft-gray); color: var(--color-dark-navy); }

/* Forms */
.form-control, .form-select {
  min-height: 48px;
  background-color: var(--color-soft-gray);
  border: 1px solid var(--color-medium-gray);
  border-radius: var(--radius-10);
}
.form-control::placeholder { color: #9CA3AF; }
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 74, 159, 0.15);
}
.form-check-input:checked { background-color: var(--color-primary-blue); border-color: var(--color-primary-blue); }

/* Tables */
table.ui-table thead tr {
  background-color: var(--color-primary-blue);
  color: var(--color-white);
}
table.ui-table thead th { font-weight: 600; height: 52px; vertical-align: middle; }
table.ui-table tbody tr:nth-child(even) { background-color: var(--color-soft-gray-2); }
table.ui-table tbody tr:hover { background-color: #F0F6FF; }
table.ui-table tbody tr.active { border-left: 4px solid var(--color-primary-blue); }
.pagination .page-link {
  border-radius: 18px; min-width: 36px; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1;
}
.pagination .page-item { margin: 0 4px; }
.pagination .page-link-prev,
.pagination .page-link-next { min-width: 72px; padding: 0 16px; }
.pagination .page-link-number { width: 36px; min-width: 36px; padding: 0; }
.pagination .page-link-ellipsis { width: 36px; min-width: 36px; padding: 0; }
.pagination .page-item.active .page-link {
  background-color: var(--color-primary-blue); border-color: var(--color-primary-blue); color: var(--color-white);
}

/* Sidebar & Topbar */
.topbar {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
}
.sidebar {
  background-color: var(--color-dark-navy);
  color: rgba(255,255,255,0.9);
}
.sidebar .nav-link { color: rgba(255,255,255,0.7); border-radius: var(--radius-10); }
.sidebar .nav-link.active {
  background-color: var(--color-primary-blue);
  color: var(--color-white);
  position: relative;
}
.sidebar .nav-link.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--color-primary-red); border-top-left-radius: var(--radius-10); border-bottom-left-radius: var(--radius-10); z-index: 0; pointer-events: none;
}

/* Ensure main content sits above any decorative elements and isolates stacking */
main.container { position: relative; z-index: 1; isolation: isolate; }

/* Status Chips */
.chip { display: inline-block; padding: 6px 12px; border-radius: var(--radius-14); font-weight: 600; font-size: 13px; }
.chip.booked { background-color: var(--color-primary-red); color: var(--color-white); }
.chip.available { background-color: var(--color-success-green); color: var(--color-white); }
.chip.pending { background-color: var(--color-warning-yellow); color: var(--color-dark-navy); }
.chip.completed { background-color: var(--color-primary-blue); color: var(--color-white); }
.chip.cancelled { background-color: var(--color-error-red); color: var(--color-white); }
/* Players-specific status */
.chip.active { background-color: var(--color-primary-red); color: var(--color-white); }
.chip.inactive { background-color: var(--color-medium-gray); color: var(--color-dark-navy); }

/* Small tags for categories (e.g., U12, Junior) */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--color-soft-gray);
  border: 1px solid var(--color-medium-gray);
  color: var(--color-dark-gray);
  font-size: 12px;
}

/* Players table hover actions */
.players-table tbody tr { transition: background-color 120ms ease-in-out; }
.players-table-row .row-actions { opacity: 0; transition: opacity 120ms ease-in-out; }
.players-table-row:hover .row-actions { opacity: 1; }

/* Generic row actions layout */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.row-actions .btn { margin: 0; }

/* Toasts */
.toast-success { background-color: var(--color-success-green); color: var(--color-white); }
.toast-error { background-color: var(--color-primary-red); color: var(--color-white); }
.toast-info { background-color: var(--color-primary-blue); color: var(--color-white); }
.toast {
  animation: slideIn 300ms ease-out;
}
@keyframes slideIn {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Utilities */
.text-muted-2 { color: var(--color-dark-gray); }
.bg-soft-gray { background-color: var(--color-soft-gray); }
.radius-16 { border-radius: var(--radius-16); }

/* Reveal animations for page blocks */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 420ms ease; will-change: opacity, transform; }
.reveal--visible { opacity: 1; transform: none; }
.reveal.fade-in { transform: none; }
.reveal.zoom-in { transform: scale(0.98); }
.reveal.zoom-in.reveal--visible { transform: scale(1); }
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }