/* ==========================================================================
   Guts Tournament Management System – Modern SaaS UI
   Custom layout, sidebar, cards, tables, buttons. Use with Bootstrap.
   ========================================================================== */

:root {
  --tu-sidebar-bg: #2F3640;
  --tu-sidebar-text: #E8EAED;
  --tu-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --tu-sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --tu-main-bg: #F4F6F9;
  --tu-card-bg: #FFFFFF;
  --tu-card-radius: 10px;
  --tu-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --tu-primary: #1976D2;
  --tu-primary-hover: #1565C0;
  --tu-border-subtle: rgba(0, 0, 0, 0.06);
  --tu-text-muted: #5F6368;
  --tu-pool-1: #1976D2;
  --tu-pool-2: #388E3C;
  --tu-pool-3: #7B1FA2;
  --tu-pool-4: #E64A19;
  --tu-pool-5: #00796B;
  --tu-pool-6: #5D4037;
  --tu-metric-inprogress: #1976D2;
  --tu-metric-awaiting: #F57C00;
  --tu-metric-fields: #388E3C;
  --tu-metric-upcoming: #7B1FA2;
  --tu-sidebar-width: 240px;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #202124;
  background: var(--tu-main-bg);
}

.tu-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #202124;
}

.tu-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #202124;
}

.tu-subtitle {
  font-size: 0.875rem;
  color: var(--tu-text-muted);
  margin: 0 0 1rem 0;
}

/* --------------------------------------------------------------------------
   App shell: sidebar + main
   -------------------------------------------------------------------------- */
.tu-app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.tu-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--tu-sidebar-width);
  height: 100vh;
  background: var(--tu-sidebar-bg);
  color: var(--tu-sidebar-text);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.2s ease, width 0.2s ease;
}

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

.tu-sidebar-brand:hover {
  color: #fff;
  background: var(--tu-sidebar-hover-bg);
}

.tu-sidebar-nav {
  padding: 0.75rem 0;
  flex: 1;
}

.tu-sidebar-nav .nav-link {
  color: var(--tu-sidebar-text);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  border-radius: 0 6px 6px 0;
  margin: 0 0.5rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.tu-sidebar-nav .tu-nav-icon {
  width: 1.125rem;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.tu-sidebar-nav .tu-nav-separator {
  height: 1px;
  background: #fff9c4;
  margin: 0.5rem 1rem;
}

.tu-sidebar-nav .tu-nav-parent {
  margin-bottom: 0.25rem;
}

.tu-sidebar-nav .tu-nav-selected-tournament {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.2rem 1rem 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tu-sidebar-nav .tu-nav-children {
  padding-left: 0.5rem;
}

.tu-sidebar-nav .tu-nav-child {
  padding-left: 2.125rem;
  flex-shrink: 0;
}

/* About → Profile: align child link with top-level items (no extra indent). */
.tu-sidebar-nav .tu-nav-parent--flush-children .tu-nav-children {
  padding-left: 0;
}

.tu-sidebar-nav .tu-nav-parent--flush-children .tu-nav-child {
  padding-left: 1rem;
}

/* Logo area: force same as sidebar so no visible panel (sidebar is #2F3640 from --tu-sidebar-bg) */
.tu-sidebar .tu-sidebar-logo {
  padding: 1rem 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 148px;
  background-color: #2F3640 !important;
  flex-shrink: 0;
}

/* Masthead stack (not .tu-sidebar-brand — that class is reserved for legacy top link + hover styles) */
.tu-sidebar .tu-sidebar-logo-masthead,
.tu-sidebar .tu-sidebar-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent !important;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.tu-sidebar .tu-sidebar-logo-masthead:hover,
.tu-sidebar .tu-sidebar-logo-link:hover {
  background: transparent !important;
}

.tu-sidebar .tu-sidebar-logo-link:hover .tu-sidebar-brand-img {
  opacity: 0.9;
}

.tu-sidebar .tu-sidebar-brand-img {
  max-width: calc(130px * 2 / 3);
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 6px;
  box-sizing: border-box;
}

.tu-sidebar .tu-sidebar-logo .tu-sidebar-brand-tagline {
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Cool off-white with APR blue undertone — beats .tu-sidebar-logo { color: white !important } inheritance */
  color: #dce4f7 !important;
  text-shadow: 0 1px 0 rgba(0, 40, 104, 0.45);
}

.tu-sidebar .tu-logo-placeholder {
  max-width: 130px;
  max-height: 130px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background-color: #2F3640 !important;
  padding: 4px;
  box-sizing: border-box;
}

.tu-sidebar-user {
  padding: 0.75rem 1rem;
  min-height: 3.25rem;
  text-align: center;
  color: var(--tu-sidebar-text);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.tu-sidebar-username {
  font-weight: 600;
  margin-bottom: 0.2rem;
  word-break: break-word;
}

.tu-sidebar-role {
  font-size: 0.75rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tu-sidebar-nav .nav-link:hover {
  background: var(--tu-sidebar-hover-bg);
  color: #fff;
}

.tu-sidebar-nav .nav-link.active {
  background: var(--tu-sidebar-active-bg);
  color: #fff;
  font-weight: 500;
}

.tu-sidebar-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
}

.tu-sidebar-footer .nav-link,
.tu-sidebar-footer .btn-link {
  color: var(--tu-sidebar-text);
  padding: 0.2rem 0.45rem;
  margin: 0 !important;
  font-size: 0.875rem;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  width: auto;
  text-align: center;
  border-radius: 6px;
  white-space: nowrap;
}

.tu-sidebar-footer .nav-link:hover,
.tu-sidebar-footer .btn-link:hover {
  color: #fff;
  background: var(--tu-sidebar-hover-bg);
}

.tu-account-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  line-height: 1.2;
}

.tu-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  flex-wrap: nowrap;
}

.tu-account-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tu-account-role {
  font-size: 0.75rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tu-account-button {
  flex: 0 0 auto;
}

.tu-account-action {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Main content wrapper: size to content so tall pages (e.g. graphical bracket) use one scroll */
.tu-main {
  flex: 1 1 auto;
  align-self: flex-start;  /* don't stretch to fill shell; height = content so no inner scroll */
  margin-left: var(--tu-sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top header (page title area) */
.tu-header {
  background: var(--tu-card-bg);
  padding: 1rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tu-header .tu-page-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.tu-header .tu-header-back {
  flex-shrink: 0;
}

.tu-header--profile-subnav {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.tu-profile-header-subnav nav {
  margin-bottom: 0;
}

/* Public directory tables (tournaments, players, teams) — USA Guts player card table style */
.tu-tournaments-directory__table-wrap,
.tu-players-directory__table-wrap,
.tu-teams-directory__table-wrap {
  --ug-navy: #0c1e3c;
  --ug-slate: #334155;
  --ug-line: #e2e8f0;
  border: 1px solid var(--ug-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.tu-tournaments-directory__table,
.tu-players-directory__table,
.tu-teams-directory__table {
  width: 100%;
  font-size: 0.72rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  color: var(--ug-slate);
  margin-bottom: 0;
}

.tu-tournaments-directory__table caption,
.tu-players-directory__table caption,
.tu-teams-directory__table caption {
  caption-side: top;
  background: #f8fafc;
  color: var(--ug-navy);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.65rem;
  text-align: center;
  border-bottom: 1px solid var(--ug-line);
}

.tu-tournaments-directory__table thead th,
.tu-players-directory__table thead th,
.tu-teams-directory__table thead th {
  background: #edf2f7;
  color: #475569;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--ug-line);
  white-space: nowrap;
}

.tu-tournaments-directory__table tbody td,
.tu-players-directory__table tbody td,
.tu-teams-directory__table tbody td {
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid var(--ug-line);
  vertical-align: middle;
}

.tu-tournaments-directory__table tbody tr:nth-child(even) td,
.tu-players-directory__table tbody tr:nth-child(even) td,
.tu-teams-directory__table tbody tr:nth-child(even) td {
  background: #fafafa;
}

.tu-tournaments-directory__table tbody tr:last-child td,
.tu-players-directory__table tbody tr:last-child td,
.tu-teams-directory__table tbody tr:last-child td {
  border-bottom: none;
}

.tu-tournaments-directory__table .tu-tournaments-directory__tournament-name {
  font-weight: 600;
  color: var(--ug-navy);
}

.tu-tournaments-directory__table .tu-tournaments-directory__tournament-name-link {
  color: var(--ug-navy);
  text-decoration: none;
}

.tu-tournaments-directory__table .tu-tournaments-directory__tournament-name-link:hover {
  text-decoration: underline;
}

/* Tournament directory — sortable column headers (same pattern as public schedule) */
.tu-tournaments-directory__table thead th.public-schedule-sort-th {
  white-space: nowrap;
}

.tu-tournaments-directory__table thead th.public-schedule-sort-th a {
  color: inherit;
  text-decoration: none;
}

.tu-tournaments-directory__table thead th.public-schedule-sort-th a:hover {
  text-decoration: underline;
}

.tu-tournaments-directory__table thead th.tu-sort-active a {
  font-weight: 600;
}

.tu-tournaments-directory__table thead th .tu-sort-icon {
  margin-left: 0.25rem;
  font-size: 0.75em;
  opacity: 0.85;
}

.tu-teams-directory__table .tu-teams-directory__team-name {
  font-weight: 600;
}

.tu-teams-directory__table .tu-teams-directory__team-name-link {
  color: var(--ug-navy);
  text-decoration: none;
}

.tu-teams-directory__table .tu-teams-directory__team-name-link:hover {
  text-decoration: underline;
}

.tu-players-directory__table .tu-players-directory__name {
  font-weight: 600;
}

.tu-players-directory__table .tu-players-directory__name-link {
  color: var(--ug-navy);
  text-decoration: none;
}

.tu-players-directory__table .tu-players-directory__name-link:hover {
  text-decoration: underline;
}

.tu-players-directory__table .tu-players-directory__nick {
  color: var(--ug-navy);
  font-weight: 600;
}

/* Main content container: grow with content so no inner vertical scroll on tall content */
.tu-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.5rem;
}

/* Content card: wrap page content in a white card */
.tu-content-card {
  background: var(--tu-card-bg);
  border-radius: var(--tu-card-radius);
  box-shadow: var(--tu-card-shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Bracket page: the content pane (title + match codes + bracket) must not have its own vertical scrollbar */
.tu-main:has(.bracket-standard) {
  height: auto;       /* size to content so only window scrolls */
  max-height: none;
}
.tu-content:has(.bracket-standard),
.tu-content-card:has(.bracket-standard) {
  overflow-y: visible;
}
.tu-content:has(.bracket-standard) {
  min-height: auto;
  height: auto;
  max-height: none;
  flex: 0 1 auto;     /* size to content, don't fill viewport */
}
.tu-content-card:has(.bracket-standard) {
  max-height: none;
  flex: 0 1 auto;
}

.tu-content-card:last-child {
  margin-bottom: 0;
}

/* Spacing between multiple cards on a page */
.tu-cards > .card,
.tu-cards > .tu-content-card {
  margin-bottom: 1.5rem;
}

.tu-cards > .card:last-child,
.tu-cards > .tu-content-card:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cards (override Bootstrap cards to match design)
   -------------------------------------------------------------------------- */
.tu-content .card,
body .card {
  border: none;
  border-radius: var(--tu-card-radius);
  box-shadow: var(--tu-card-shadow);
  margin-bottom: 1.5rem;
}

.tu-content .card .card-header,
body .card .card-header {
  background: var(--tu-card-bg);
  border-bottom: 1px solid var(--tu-border-subtle);
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-radius: var(--tu-card-radius) var(--tu-card-radius) 0 0;
}

.tu-content .card .card-body,
body .card .card-body {
  padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   Metric cards (dashboard KPIs)
   -------------------------------------------------------------------------- */
.tu-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tu-metric-card {
  background: var(--tu-card-bg);
  border-radius: var(--tu-card-radius);
  box-shadow: var(--tu-card-shadow);
  padding: 1.25rem;
  border-left: 4px solid var(--tu-primary);
}

.tu-metric-card.tu-metric-inprogress { border-left-color: var(--tu-metric-inprogress); }
.tu-metric-card.tu-metric-awaiting  { border-left-color: var(--tu-metric-awaiting); }
.tu-metric-card.tu-metric-fields   { border-left-color: var(--tu-metric-fields); }
.tu-metric-card.tu-metric-upcoming { border-left-color: var(--tu-metric-upcoming); }

.tu-metric-card .tu-metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #202124;
}

.tu-metric-card .tu-metric-label {
  font-size: 0.8125rem;
  color: var(--tu-text-muted);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Pool cards (color-coded headers for standings/pools)
   -------------------------------------------------------------------------- */
.tu-pool-card {
  border: none;
  border-radius: var(--tu-card-radius);
  box-shadow: var(--tu-card-shadow);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.tu-pool-card .card-header {
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border: none;
}

.tu-pool-card.tu-pool-1 .card-header { background: var(--tu-pool-1); }
.tu-pool-card.tu-pool-2 .card-header { background: var(--tu-pool-2); }
.tu-pool-card.tu-pool-3 .card-header { background: var(--tu-pool-3); }
.tu-pool-card.tu-pool-4 .card-header { background: var(--tu-pool-4); }
.tu-pool-card.tu-pool-5 .card-header { background: var(--tu-pool-5); }
.tu-pool-card.tu-pool-6 .card-header { background: var(--tu-pool-6); }

.tu-pool-card .card-body {
  padding: 1rem 1.25rem;
}

/* Standings: same column grid for Overall / Pool / Bracket (per division + across page) */
.tu-standings-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}
.tu-standings-table-wrap:last-child {
  margin-bottom: 0;
}
.tu-pool-card .table.tu-standings-grid,
body .tu-pool-card .table.tu-standings-grid {
  width: 950px;
  max-width: none;
  table-layout: fixed;
  margin-bottom: 0;
}
.tu-standings-table-wrap > h6:not(:first-child) {
  margin-top: 1.25rem;
}
.tu-pool-card .table.tu-standings-grid thead th,
.tu-pool-card .table.tu-standings-grid tbody td,
body .tu-pool-card .table.tu-standings-grid thead th,
body .tu-pool-card .table.tu-standings-grid tbody td {
  padding: 0.4rem 0.35rem;
  font-size: 0.8125rem;
  vertical-align: middle;
}
.tu-pool-card .table.tu-standings-grid .tu-standings-num,
body .tu-pool-card .table.tu-standings-grid .tu-standings-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tu-pool-card .table.tu-standings-grid .tu-standings-center,
body .tu-pool-card .table.tu-standings-grid .tu-standings-center {
  text-align: center;
}
.tu-pool-card .table.tu-standings-grid th.tu-standings-team,
.tu-pool-card .table.tu-standings-grid td.tu-standings-team,
body .tu-pool-card .table.tu-standings-grid th.tu-standings-team,
body .tu-pool-card .table.tu-standings-grid td.tu-standings-team {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Tables (modern, minimal, soft row separators)
   -------------------------------------------------------------------------- */
.tu-content .table,
body .table {
  margin-bottom: 0;
  border-collapse: collapse;
}

.tu-content .table thead th,
body .table thead th {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--tu-text-muted);
  text-transform: none;
  border: none;
  border-bottom: 1px solid var(--tu-border-subtle);
  padding: 0.75rem 1rem;
  background: transparent;
}

.tu-content .table tbody td,
body .table tbody td {
  border: none;
  border-bottom: 1px solid var(--tu-border-subtle);
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.tu-content .table tbody tr:last-child td,
body .table tbody tr:last-child td {
  border-bottom: none;
}

.tu-content .table tbody tr:hover td,
body .table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

.tu-content .table.table-sm thead th,
body .table.table-sm thead th,
.tu-content .table.table-sm tbody td,
body .table.table-sm tbody td {
  padding: 0.5rem 0.75rem;
}

/* Pool standings: align columns across all pool tables (e.g. Pool A, B, C) */
.tu-content .table-pool-standings,
body .table-pool-standings {
  table-layout: fixed;
  width: auto;
  min-width: 320px;
}
.tu-content .table-pool-standings th:nth-child(1),
.tu-content .table-pool-standings td:nth-child(1),
body .table-pool-standings th:nth-child(1),
body .table-pool-standings td:nth-child(1) { width: 2rem; }
.tu-content .table-pool-standings th:nth-child(2),
.tu-content .table-pool-standings td:nth-child(2),
body .table-pool-standings th:nth-child(2),
body .table-pool-standings td:nth-child(2) { min-width: 6rem; }
.tu-content .table-pool-standings th:nth-child(3),
.tu-content .table-pool-standings td:nth-child(3),
body .table-pool-standings th:nth-child(3),
body .table-pool-standings td:nth-child(3) { width: 2.5rem; text-align: center; }
.tu-content .table-pool-standings th:nth-child(4),
.tu-content .table-pool-standings td:nth-child(4),
body .table-pool-standings th:nth-child(4),
body .table-pool-standings td:nth-child(4) { width: 2.5rem; text-align: center; }
.tu-content .table-pool-standings th:nth-child(5),
.tu-content .table-pool-standings td:nth-child(5),
body .table-pool-standings th:nth-child(5),
body .table-pool-standings td:nth-child(5) { width: 4rem; text-align: center; }
.tu-content .table-pool-standings th:nth-child(6),
.tu-content .table-pool-standings td:nth-child(6),
body .table-pool-standings th:nth-child(6),
body .table-pool-standings td:nth-child(6) { width: 4rem; text-align: center; }

/* Remove Bootstrap table bordered styling when inside our layout */
.tu-content .table-bordered,
body .table-bordered {
  border: none;
}

.tu-content .table-bordered th,
.tu-content .table-bordered td,
body .table-bordered th,
body .table-bordered td {
  border: none;
  border-bottom: 1px solid var(--tu-border-subtle);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.tu-content .btn-primary,
body .btn-primary {
  background: var(--tu-primary);
  border-color: var(--tu-primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.tu-content .btn-primary:hover,
body .btn-primary:hover {
  background: var(--tu-primary-hover);
  border-color: var(--tu-primary-hover);
  color: #fff;
}

.tu-content .btn-secondary,
body .btn-secondary {
  border-radius: 8px;
  font-weight: 500;
}

.tu-content .btn-outline-primary,
body .btn-outline-primary {
  border-radius: 8px;
  color: var(--tu-primary);
  border-color: var(--tu-primary);
}

.tu-content .btn-outline-primary:hover,
body .btn-outline-primary:hover {
  background: rgba(25, 118, 210, 0.08);
  color: var(--tu-primary-hover);
  border-color: var(--tu-primary-hover);
}

.tu-content .btn-outline-secondary,
body .btn-outline-secondary {
  border-radius: 8px;
}

.tu-content .btn-sm,
body .btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  border-radius: 6px;
}

/* Keep button heights visually consistent across pages */
.tu-content .btn,
body .btn {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.tu-content .btn.btn-sm,
body .btn.btn-sm {
  min-height: 1.9rem;
}

/* Preserve left-aligned text on full-width header/action buttons. */
.tu-content .btn.w-100.text-start,
body .btn.w-100.text-start {
  justify-content: flex-start;
}

.tu-content .btn-link.nav-link,
body .btn-link.nav-link {
  color: #202124;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   List groups (softer look)
   -------------------------------------------------------------------------- */
.tu-content .list-group-item,
body .list-group-item {
  border-color: var(--tu-border-subtle);
  border-radius: 0;
}

.tu-content .list-group-flush .list-group-item:first-child,
body .list-group-flush .list-group-item:first-child {
  border-top: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.tu-footer {
  background: var(--tu-card-bg);
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--tu-text-muted);
  border-top: 1px solid var(--tu-border-subtle);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Responsive: collapse sidebar on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .tu-sidebar {
    transform: translateX(-100%);
    width: var(--tu-sidebar-width);
  }

  .tu-sidebar.tu-sidebar-open {
    transform: translateX(0);
  }

  .tu-main {
    margin-left: 0;
  }

  .tu-header {
    padding-left: 3.5rem; /* space for hamburger */
  }

  .tu-content {
    padding: 1rem;
  }

  .tu-content-card {
    padding: 1rem;
  }

  .tu-metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tu-sidebar .tu-sidebar-brand-img {
    max-width: calc(100px * 2 / 3);
  }
}

@media (max-width: 575.98px) {
  .tu-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile menu toggle button */
.tu-nav-toggle {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1031;
  background: var(--tu-sidebar-bg);
  color: var(--tu-sidebar-text);
  border: none;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 991.98px) {
  .tu-nav-toggle {
    display: flex;
  }
}

.tu-nav-toggle:hover {
  background: var(--tu-sidebar-hover-bg);
  color: #fff;
}

/* Overlay when sidebar is open on mobile */
.tu-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1029;
}

.tu-sidebar-overlay.tu-open {
  display: block;
}

/* --------------------------------------------------------------------------
   Page-level headings (inside content): make h2/h5 look like section titles
   -------------------------------------------------------------------------- */
.tu-content h2,
.tu-content .h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #202124;
}

.tu-content h5,
.tu-content .h5,
.tu-content h6,
.tu-content .h6 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #202124;
}

.tu-content .lead {
  color: var(--tu-text-muted);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Bracket display in card
   -------------------------------------------------------------------------- */
.tu-bracket-card .card-body {
  overflow-x: auto;
  min-height: 120px;
}

/* --------------------------------------------------------------------------
   Classical bracket (tree with connecting lines)
   -------------------------------------------------------------------------- */
/* Horizontal scroll in inner wrapper so outer can grow vertically and use page scroll only */
.bracket-standard {
  --bracket-slot-h: 32px;
  --bracket-match-h: 88px;   /* total match box height: header + 2 slots */
  --bracket-match-gap: 12px;
  --bracket-match-w: 164px;
  --bracket-connector-w: 28px;
  --bracket-line: #444;
  font-size: 0.875rem;
  overflow: visible;
  padding: 0.5rem 0;
  min-height: fit-content;
}

/* Horizontal scroll only; no inner vertical scroll — page scroll shows full bracket */
.bracket-standard .bracket-scroll-x {
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  display: block;
  min-width: 100%;
  min-height: fit-content;
  height: auto;
}

.bracket-standard .bracket-section.bracket-winners,
.bracket-standard .bracket-section.bracket-losers {
  overflow: visible;
  max-height: none;
}

.bracket-standard .bracket-section-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.bracket-standard .bracket-losers-label {
  font-weight: 600;
  margin: 1.5rem 0 0.5rem 0;
  font-size: 0.95rem;
}

/* Loser's bracket graphic: clear visual separation and proper box/connector layout */
.bracket-standard .bracket-losers-graphic {
  box-sizing: border-box;
  /* Override .bracket-section flex row — graphic uses absolute children only */
  display: block;
}

.bracket-standard .bracket-section.bracket-losers-graphic .bracket-match {
  z-index: 1;
}

/* Tree: horizontal row of rounds + connectors */
.bracket-standard .bracket-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.bracket-standard .bracket-tree-rounds {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-shrink: 0;
}

/* One column per round */
.bracket-standard .bracket-round {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  min-width: var(--bracket-match-w);
}

.bracket-standard .bracket-round-label {
  font-size: 0.7rem;
  color: var(--tu-text-muted);
  text-align: center;
  margin-bottom: 0.35rem;
  min-height: 1.2em;
}

.bracket-standard .bracket-round-matches {
  position: relative;
  width: var(--bracket-match-w);
}

/* Each match positioned absolutely; space between matches from view (top offset) */
.bracket-standard .bracket-match {
  position: absolute;
  left: 0;
  width: var(--bracket-match-w);
  height: var(--bracket-match-h);
  min-height: var(--bracket-match-h);
  box-sizing: border-box;
  border: 1px solid #333;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.bracket-standard .bracket-match.bracket-conditional {
  border-style: dashed;
  border-width: 1.5px;
  background: #f8f9fa;
}

.bracket-standard .bracket-match-num {
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.25rem 0.35rem;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}

/* Title row: match code + optional score-entry control (staff) */
.bracket-standard .bracket-match-num-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-right: 1.85rem;
  gap: 0.25rem;
}

.bracket-standard .bracket-match-num-row .bracket-match-code {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.bracket-standard .bracket-score-entry-btn {
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.1rem 0.35rem;
  line-height: 1;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
}

.bracket-standard .bracket-score-entry-btn:hover,
.bracket-standard .bracket-score-entry-btn:focus {
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.08);
}

.bracket-standard .bracket-match-feed,
.bracket-standard .bracket-match-conditional {
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--tu-text-muted);
  padding: 0.25rem 0.35rem;
  flex-shrink: 0;
}

.bracket-standard .bracket-slot {
  flex: 1;
  min-height: var(--bracket-slot-h);
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.25;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  word-break: normal;
  white-space: nowrap;
  min-width: 0;
}

.bracket-standard .bracket-slot:last-child {
  border-bottom: none;
}

.bracket-standard .bracket-slot-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.bracket-standard .bracket-team-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bracket-standard .bracket-slot-scores {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: baseline;
  flex: 0 0 auto;
}

.bracket-standard .bracket-game-score {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bracket-standard .bracket-game-score sup {
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 0.08em;
}

/* Series leader / winner row (explicit .bracket-match child so flex slot paints over white card) */
.bracket-standard .bracket-match .bracket-slot.bracket-slot-match-winner {
  background: #d4edda;
  color: #1b5e20;
}

.bracket-standard .bracket-slot-match-winner {
  background: #d4edda;
  color: #1b5e20;
}

/* WB loser feeding LB (e.g. L-WB1); winner styling overrides when both apply */
.bracket-standard .bracket-l-wb-drop:not(.bracket-slot-match-winner) {
  color: #0d47a1;
  background: #e3f2fd;
}

.bracket-standard .bracket-losers-td {
  padding: 0.25rem 0.4rem;
  vertical-align: middle;
}

.bracket-standard .bracket-losers-td.bracket-slot-match-winner {
  background: #d4edda;
  color: #1b5e20;
}

.bracket-standard .bracket-losers-td.bracket-l-wb-drop:not(.bracket-slot-match-winner) {
  color: #0d47a1;
  background: #e3f2fd;
}

.bracket-standard .bracket-match-advance {
  display: none;
}

/* Connector column: lines from center-right of each match to center-left of next */
.bracket-standard .bracket-connector {
  flex-shrink: 0;
  width: var(--bracket-connector-w);
  align-self: stretch;
  position: relative;
  margin-left: 2px;
}

.bracket-standard .bracket-connector svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bracket-standard .bracket-connector line {
  stroke: var(--bracket-line);
  stroke-width: 1.5;
  fill: none;
}

/* --------------------------------------------------------------------------
   Legacy box-only styles (if tree structure not used)
   -------------------------------------------------------------------------- */
.bracket-standard .bracket-match-box {
  border: 1px solid #212529;
  border-radius: 2px;
  padding: 0.35rem 0.5rem;
  background: #fff;
  min-width: 100px;
  max-width: 140px;
}

.bracket-standard .bracket-match-box.bracket-conditional {
  border-style: dashed;
  border-width: 1.5px;
  background: #f8f9fa;
}

.bracket-standard .bracket-match-teams {
  font-size: 0.8rem;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Forms (optional refinements)
   -------------------------------------------------------------------------- */
.tu-content .form-control:focus,
body .form-control:focus {
  border-color: var(--tu-primary);
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.2);
}

.tu-content .form-select:focus,
body .form-select:focus {
  border-color: var(--tu-primary);
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.2);
}

/* --------------------------------------------------------------------------
   Hero / banner card (sports-themed visual)
   -------------------------------------------------------------------------- */
.tu-hero-banner {
  position: relative;
  border-radius: var(--tu-card-radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
  min-height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #5B9BD5;
}

.tu-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.tu-hero-banner .tu-hero-content {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.75rem;
  color: #fff;
}

.tu-hero-banner .tu-hero-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tu-hero-banner .tu-hero-subtitle {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.95;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* GutsSwoosh used as full banner background (same size as default hero) */
.tu-hero-banner.tu-hero-banner-guts {
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------------------------
   Intro card with image beside text
   -------------------------------------------------------------------------- */
.tu-intro-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.tu-intro-card .tu-intro-text {
  flex: 1;
  min-width: 260px;
}

.tu-intro-card .tu-intro-image {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
}

.tu-intro-card .tu-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .tu-intro-card {
    flex-direction: column;
    align-items: center;
  }
  .tu-intro-card .tu-intro-image {
    width: 120px;
    height: 120px;
  }
}

/* --------------------------------------------------------------------------
   Home page footer (logos, copyright, version)
   -------------------------------------------------------------------------- */
.tu-home-footer .tu-footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
}
.tu-home-footer .tu-footer-logo-img {
  max-height: 56px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tu-home-footer .tu-footer-copyright {
  font-size: 0.875rem;
  color: var(--tu-text-muted);
}

/* --------------------------------------------------------------------------
   Credits card (About page)
   -------------------------------------------------------------------------- */
.tu-credits-card {
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.08) 0%, rgba(25, 118, 210, 0.04) 100%);
  border: 1px solid rgba(25, 118, 210, 0.2);
  border-radius: var(--tu-card-radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}

.tu-credits-card .tu-credits-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tu-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem 0;
}

.tu-credits-card .tu-credits-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #202124;
  margin: 0;
}

/* Collapsible section chevron (Tournament Details) */
.tu-collapse-icon {
  transition: transform 0.2s ease;
}
[data-bs-toggle="collapse"][aria-expanded="false"] .tu-collapse-icon {
  transform: rotate(-90deg);
}

/* Tournament Details: equal spacing between subsection cards */
.tu-details-card {
  margin-bottom: 1rem;
}
.tu-details-card:last-child {
  margin-bottom: 0;
}
.tu-details-no-gap-below {
  margin-bottom: 0 !important;
}

/* Tournament Details section: uniform tight spacing (overrides .tu-details-card 1rem) */
.tu-tournament-details-section {
  margin-bottom: 0.5rem;
}
.tu-tournament-details-section .tu-details-card {
  margin-bottom: 0.5rem !important;
}
/* No extra margin below Divisions/Fields row — card margins are enough */
.tu-tournament-details-section > .row {
  margin-bottom: 0 !important;
}

/* Same vertical rhythm as inside Tournament Details (no double gap before Registered teams) */
.tu-main .tu-content-card .tu-details-after-tournament-section {
  margin-top: 0 !important;
}
.tu-main .tu-content-card .col-12 > .tu-details-card {
  margin-bottom: 0.5rem !important;
}
/* APR THEME OVERRIDES */
:root {
  --apr-red: #B22234;
  --apr-blue: #002868;
  --apr-white: #FFFFFF;
}

.tu-sidebar {
  background: var(--apr-red) !important;
  color: var(--apr-white) !important;
}

.tu-sidebar .nav-link,
.tu-sidebar .tu-nav-icon,
.tu-sidebar .tu-sidebar-username,
.tu-sidebar .tu-sidebar-role,
.tu-sidebar .tu-sidebar-footer,
.tu-sidebar .tu-sidebar-logo {
  color: var(--apr-white) !important;
}

.tu-sidebar .nav-link.active,
.tu-sidebar .nav-link:hover {
  background: var(--apr-blue) !important;
  color: var(--apr-white) !important;
}

.tu-page-title {
  color: var(--apr-blue) !important;
}

a {
  color: var(--apr-red);
}

a:hover,
a:focus {
  color: var(--apr-blue);
}

.tu-content,
.tu-content-card,
.tu-main {
  background: #FFFFFF;
}

table thead th {
  background: var(--apr-blue) !important;
  color: #FFFFFF !important;
}

table tbody tr:hover {
  background: #f0f4ff !important;
}

.apr-rating-large {
  font-size: 3.5rem;
  font-weight: 700;
  color: #B22234;
  line-height: 1;
}

.apr-rating-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
}

.apr-rating-deviation {
  font-size: 0.9rem;
  color: #888;
}

.apr-badge-style {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #002868;
  color: #FFFFFF;
}

.apr-trend-up { color: #198754; }
.apr-trend-down { color: #dc3545; }
.apr-trend-flat { color: #888; }

.apr-prediction-table {
  width: 100%;
  font-size: 0.9rem;
}

.apr-profile-card {
  border-left: 4px solid #B22234;
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.apr-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  font-weight: 700;
}

.apr-profile-breadcrumb {
  font-size: 0.875rem;
}

.apr-profile-breadcrumb a {
  color: #64748b;
  text-decoration: none;
}

.apr-profile-breadcrumb a:hover {
  color: var(--apr-blue, #002868);
  text-decoration: underline;
}

.apr-player-profile-card {
  border: 1px solid #e2e8f0;
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(12, 30, 60, 0.08);
  overflow: hidden;
  background: #fff;
}

.apr-player-profile-card__brand-bar {
  height: 6px;
  background: linear-gradient(90deg, #B22234 0%, #B22234 35%, #fff 35%, #fff 40%, #002868 40%, #002868 100%);
}

.apr-player-profile-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.apr-player-profile-card__name {
  font-size: clamp(1.35rem, 3.2vw, 1.65rem);
  font-weight: 700;
  color: #0c1e3c;
  letter-spacing: -0.02em;
}

.apr-player-profile-card__vitals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.apr-player-profile-card__vital {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.apr-player-profile-card__vital-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
}

.apr-player-profile-card__vital-label::after {
  content: ":";
  margin-left: 0.1em;
  color: #94a3b8;
}

.apr-player-profile-card__vital-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e293b;
}

.apr-player-profile-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Country flag on archer profile: 150% of default flag-icons size */
.apr-player-profile-card__actions .apr-country-flag {
  transform: scale(1.5);
  transform-origin: center center;
}

.apr-player-profile-card__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 1.1rem;
}

.apr-player-profile-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-content: flex-start;
}

.apr-player-profile-card__stat-chip {
  min-width: 6.2rem;
  text-align: center;
  padding: 0.45rem 0.55rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(12, 30, 60, 0.04);
}

.apr-player-profile-card__stat-chip strong {
  display: block;
  font-size: 1rem;
  color: #002868;
  font-weight: 700;
  line-height: 1.2;
}

.apr-player-profile-card__stat-chip span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.62rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.apr-profile-table-wrap {
  --apr-table-line: #e2e8f0;
  --apr-table-head-bg: #edf2f7;
  --apr-table-head-text: #475569;
  border: 1px solid var(--apr-table-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 30, 60, 0.03);
}

.apr-profile-table {
  margin-bottom: 0;
  font-size: 0.75rem;
  color: #334155;
  font-variant-numeric: tabular-nums;
}

.apr-profile-table caption {
  caption-side: top;
  background: #f8fafc;
  color: #0c1e3c;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.65rem;
  text-align: center;
  border-bottom: 1px solid var(--apr-table-line);
}

.apr-profile-table.table thead th {
  background: var(--apr-table-head-bg) !important;
  color: var(--apr-table-head-text) !important;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid var(--apr-table-line);
  white-space: nowrap;
}

.apr-profile-table.table tbody td {
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid var(--apr-table-line);
  vertical-align: middle;
}

.apr-profile-table.table tbody tr:nth-child(even) td {
  background: #fafafa;
}

.apr-profile-table.table tbody tr:last-child td {
  border-bottom: none;
}

.apr-profile-table.table tbody tr:hover td {
  background: #f3f6fb !important;
}