/* ==========================================================================
   Cuda brand palette - matched to the club's own maroon/white/black fixtures
   graphic: white content on a deep maroon frame, black secondary accents.
   ========================================================================== */
:root {
  --brand-cream: #f6f3ef;
  --brand-white: #ffffff;
  --brand-black: #1c1614;
  --brand-border: rgba(143, 17, 22, 0.22);
  --brand-border-neutral: #e4dfda;

  --brand-red: #8f1116;
  --brand-red-dark: #5c0a0d;
  --brand-red-light: #b32530;
  --brand-red-lighter: #cf4a53;

  --brand-success: #2f8f52;
  --brand-success-dark: #256e40;
  --brand-danger: #c23b2e;
  --brand-danger-dark: #9c2e23;
  --brand-secondary: #6b6560;
  --brand-secondary-dark: #524d49;

  --brand-text: #1c1614;
  --brand-text-muted: rgba(28, 22, 20, 0.72);

  --brand-heading-font: "Oswald", "Segoe UI", system-ui, sans-serif;
}

/* ==========================================================================
   Retheme Bootstrap's own CSS variables so every stock component (cards,
   tables, badges, links, form controls) picks up the brand palette instead
   of Bootstrap's generic light-gray/blue defaults.
   ========================================================================== */
:root {
  --bs-body-bg: var(--brand-cream);
  --bs-body-color: var(--brand-text);
  --bs-emphasis-color: #000;
  --bs-secondary-color: var(--brand-text-muted);
  --bs-secondary-bg: #efe9e3;
  --bs-tertiary-bg: #f0ebe5;
  --bs-border-color: var(--brand-border-neutral);
  --bs-border-color-translucent: var(--brand-border);

  --bs-primary: var(--brand-red);
  --bs-primary-rgb: 143, 17, 22;
  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: 194, 59, 46;
  --bs-success: var(--brand-success);
  --bs-success-rgb: 47, 143, 82;
  --bs-secondary: var(--brand-secondary);
  --bs-secondary-rgb: 107, 101, 96;

  --bs-link-color: var(--brand-red);
  --bs-link-color-rgb: 143, 17, 22;
  --bs-link-hover-color: var(--brand-red-dark);
  --bs-link-hover-color-rgb: 92, 10, 13;
}

/* Component-level overrides: Bootstrap's precompiled CSS bakes literal hex
   into each button/nav variant's own scoped custom properties rather than
   referencing --bs-primary etc, so those need setting directly. */
.btn-primary {
  --bs-btn-bg: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red-dark);
  --bs-btn-hover-border-color: var(--brand-red-dark);
  --bs-btn-active-bg: var(--brand-red-dark);
  --bs-btn-active-border-color: var(--brand-red-dark);
  --bs-btn-disabled-bg: var(--brand-red);
  --bs-btn-disabled-border-color: var(--brand-red);
  --bs-btn-focus-shadow-rgb: 143, 17, 22;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red);
  --bs-btn-hover-border-color: var(--brand-red);
  --bs-btn-active-bg: var(--brand-red-dark);
  --bs-btn-active-border-color: var(--brand-red-dark);
  --bs-btn-disabled-color: var(--brand-red);
  --bs-btn-disabled-border-color: var(--brand-red);
  --bs-btn-focus-shadow-rgb: 143, 17, 22;
}

.btn-danger {
  --bs-btn-bg: var(--brand-danger);
  --bs-btn-border-color: var(--brand-danger);
  --bs-btn-hover-bg: var(--brand-danger-dark);
  --bs-btn-hover-border-color: var(--brand-danger-dark);
  --bs-btn-active-bg: var(--brand-danger-dark);
  --bs-btn-active-border-color: var(--brand-danger-dark);
  --bs-btn-disabled-bg: var(--brand-danger);
  --bs-btn-disabled-border-color: var(--brand-danger);
  --bs-btn-focus-shadow-rgb: 194, 59, 46;
}

.btn-outline-danger {
  --bs-btn-color: var(--brand-danger);
  --bs-btn-border-color: var(--brand-danger);
  --bs-btn-hover-bg: var(--brand-danger);
  --bs-btn-hover-border-color: var(--brand-danger);
  --bs-btn-active-bg: var(--brand-danger-dark);
  --bs-btn-active-border-color: var(--brand-danger-dark);
  --bs-btn-disabled-color: var(--brand-danger);
  --bs-btn-disabled-border-color: var(--brand-danger);
  --bs-btn-focus-shadow-rgb: 194, 59, 46;
}

.btn-success {
  --bs-btn-bg: var(--brand-success);
  --bs-btn-border-color: var(--brand-success);
  --bs-btn-hover-bg: var(--brand-success-dark);
  --bs-btn-hover-border-color: var(--brand-success-dark);
  --bs-btn-active-bg: var(--brand-success-dark);
  --bs-btn-active-border-color: var(--brand-success-dark);
  --bs-btn-focus-shadow-rgb: 47, 143, 82;
}

.btn-outline-secondary {
  --bs-btn-color: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: var(--brand-secondary);
  --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-active-bg: var(--brand-secondary-dark);
  --bs-btn-active-border-color: var(--brand-secondary-dark);
  --bs-btn-disabled-color: var(--brand-secondary);
  --bs-btn-disabled-border-color: var(--brand-secondary);
  --bs-btn-focus-shadow-rgb: 107, 101, 96;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand-red);
}

.list-group-item.active {
  --bs-list-group-active-bg: var(--brand-red);
  --bs-list-group-active-border-color: var(--brand-red);
}

.accordion-button:not(.collapsed) {
  --bs-accordion-active-bg: rgba(143, 17, 22, 0.08);
  --bs-accordion-active-color: var(--brand-red-dark);
}

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

.form-check-input:focus {
  border-color: var(--brand-red-light);
  box-shadow: 0 0 0 0.25rem rgba(143, 17, 22, 0.25);
}

/* Depth Planner's rating pill uses text-bg-light for a neutral chip; on a
   white/cream page that needs its own border to stay visible. */
.badge.text-bg-light {
  border: 1px solid var(--brand-border-neutral);
}

/* ==========================================================================
   Base layout
   ========================================================================== */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--brand-cream);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-heading-font);
  letter-spacing: 0.01em;
}

.btn, .badge {
  font-family: var(--brand-heading-font);
  letter-spacing: 0.02em;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--brand-white), 0 0 0 0.25rem var(--brand-red-light);
}

a {
  transition: color 0.15s ease;
}

/* ==========================================================================
   Navbar / footer - the maroon "frame" that carries the brand on every page
   ========================================================================== */
.site-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: linear-gradient(90deg, var(--brand-red-dark) 0%, var(--brand-red) 100%) !important;
  border-bottom: 3px solid var(--brand-black);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
}

.site-navbar .navbar-brand {
  font-family: var(--brand-heading-font);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff !important;
}

.site-navbar .nav-link {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.15s ease;
}

.site-navbar .nav-link.active {
  color: #fff !important;
  font-weight: 700;
}

.site-navbar .nav-link:hover {
  color: #fff !important;
}

.site-navbar .btn-link.nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
}

.site-footer {
  background: linear-gradient(90deg, var(--brand-red-dark) 0%, var(--brand-red) 100%);
  border-top: 3px solid var(--brand-black);
  color: rgba(255, 255, 255, 0.85);
}

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

/* ==========================================================================
   Cards, tables, forms
   ========================================================================== */
.card {
  --bs-card-bg: var(--brand-white);
  --bs-card-border-color: var(--brand-border-neutral);
  box-shadow: 0 0.15rem 0.6rem rgba(28, 22, 20, 0.08);
}

.card-header {
  font-family: var(--brand-heading-font);
  letter-spacing: 0.02em;
}

a.card:hover, .home-feature-card:hover {
  box-shadow: 0 0.4rem 1.1rem rgba(28, 22, 20, 0.14);
}

.table {
  --bs-table-striped-bg: rgba(143, 17, 22, 0.035);
  --bs-table-hover-bg: rgba(143, 17, 22, 0.06);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   Depth Planner
   ========================================================================== */
.depth-list {
  min-height: 3rem;
}

.depth-card {
  cursor: default;
}

.drag-handle {
  cursor: grab;
  margin-right: 0.5rem;
  color: var(--bs-secondary-color);
}

/* ==========================================================================
   Home page - the hero mirrors the fixtures graphic's bordered white panel.
   ========================================================================== */
.home-hero {
  background: var(--brand-white);
  border: 3px solid var(--brand-red);
  box-shadow: 0 0.5rem 1.5rem rgba(28, 22, 20, 0.12);
}

.home-feature-card {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-border-neutral);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-red);
}

.home-panel {
  background: var(--brand-white);
  border: 2px solid var(--brand-border);
  box-shadow: 0 0.3rem 1rem rgba(28, 22, 20, 0.1);
}

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

.quick-action-tile {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-border-neutral);
  color: var(--brand-text);
  text-decoration: none;
  display: block;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.quick-action-tile:hover {
  transform: translateY(-2px);
  border-color: var(--brand-red);
  box-shadow: 0 0.4rem 1.1rem rgba(28, 22, 20, 0.14);
  color: var(--brand-text);
}

.quick-action-tile .quick-action-title {
  color: var(--brand-red);
}