/* Generated from main.css's @imports at build time. Edit those files, not this one. */

/* 1-base/variables.css */
/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================
   Brand colors, spacing, breakpoints, etc.
   ============================================ */

:root {
    /* Brand Colors */
    --color-primary: #1C4932;
    --color-primary-dark: #153a26;
    --color-secondary: #198754;
    --color-info: #0077cc;
    --color-success: #198754;
    --color-warning: #ffc107;
    --color-danger: #dc3545;

    /* Bootstrap primary override — aligns btn-primary / text-primary / bg-primary with brand green */
    --bs-primary: #1C4932;
    --bs-primary-rgb: 28, 73, 50;

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-600: #6c757d;
    --color-gray-900: #212529;

    /* Scorecard motif (Memberships pricing page) */
    --scorecard-paper: #F6F1E4;
    --scorecard-line: #C9C2AC;
    --scorecard-gold: #7A5A16;
    --scorecard-ink: #2B2620;

    /* Typography — system fonts only (matches 1-base/typography.css body
       font). Kept as separate tokens so weight/spacing can carry a display
       vs. tabular-data distinction without a second, network-loaded family. */
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-circle: 50%;

    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Sidebar */
    --sidebar-width: 16.666667%;
    --sidebar-width-collapsed: 60px;
    --sidebar-bg: var(--color-primary);

    /* Z-Index Scale - Ensure modals appear above sidebar */
    --z-sidebar: 900;
    --z-sidebar-toggle: 901;
    --z-dropdown: 1000;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* 1-base/reset.css */
/* ============================================
   RESET / NORMALIZE
   ============================================
   Base element resets and normalizations
   ============================================ */

html {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

a {
    color: var(--color-info, #0077cc);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* 1-base/typography.css */
/* ============================================
   TYPOGRAPHY
   ============================================
   Font families, sizes, and text styles
   ============================================ */

/* Add custom font imports here if needed */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-gray-900, #212529);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.text-muted {
    color: var(--color-gray-600, #6c757d) !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

small, .small {
    font-size: 0.875em;
}

/* Card section label headings: h5 default (1.25rem) is too heavy next to accordion items */
.card-header h5 {
    font-size: 1rem;
}

/* ── Fluid typography ── */

/* Page headings (entity name h2): 22px → 32px across 375–768px */
.fluid-heading {
    font-size: clamp(1.375rem, 2.5vw + 0.75rem, 2rem);
}

/* Stat numbers in summary cards: 24px → 32px across 375–768px */
.fluid-stat {
    font-size: clamp(1.5rem, 3vw + 0.75rem, 2rem);
}

/* 2-components/buttons.css */
/* ============================================
   BUTTONS
   ============================================
   Button variants and states
   ============================================ */

/* Override Bootstrap 5 btn-primary component variables */
.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Override Bootstrap 5 btn-outline-primary component variables */
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Custom Green Button */
.btn-custom-green {
    background-color: var(--color-primary, #1C4932);
    color: var(--color-white, white);
    border: 1px solid var(--color-primary, #1C4932);
    border-radius: var(--radius-lg, 20px);
    transition: background-color var(--transition-base, 0.2s ease);
}

/* Bootstrap's own .btn:hover/:focus-visible/:active rules read --bs-btn-hover-bg /
   --bs-btn-hover-color / --bs-btn-active-* custom properties, which this custom
   variant never defines -- so on any of those states the button silently falls
   back to a transparent background and default body text color, becoming
   effectively invisible. Redeclare all three states explicitly instead of
   relying on Bootstrap's custom-property scheme. */
.btn-custom-green:hover,
.btn-custom-green:focus,
.btn-custom-green:active {
    background-color: var(--color-primary-dark, #153a26);
    color: var(--color-white, white);
    border-color: var(--color-primary-dark, #153a26);
}

/* Bootstrap's :focus-visible box-shadow ring depends on --bs-btn-focus-shadow-rgb,
   also never set for this variant -- redeclare it with this button's own color so
   keyboard focus still gets a visible ring (mouse-click focus does not). */
.btn-custom-green:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5);
}

/* Secondary CTA paired with .btn-custom-green (e.g. "View plans" / "Book a demo").
   btn-custom-green is pill-shaped; plain btn-outline-secondary isn't, so the two
   clash in shape when shown side by side as a primary/secondary action pair. */
.btn-cta-secondary {
    border-radius: var(--radius-lg, 20px);
}

/* Button Check (Radio/Checkbox Buttons) */
.btn-check:checked + label.btn {
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* Radio button card selections */
.btn-check:checked + .btn .text-muted {
    color: #fff !important;
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Form action button row — stacks full-width on mobile, side-by-side on desktop */
@media (max-width: 1023.98px) {
    .btn-row {
        flex-direction: column !important;
    }

    .btn-row .btn {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    .btn-row .btn:last-child {
        margin-bottom: 0;
    }
}

/* 2-components/cards.css */
/* ============================================
   CARDS
   ============================================
   Card components and variants
   ============================================ */

.card {
    border-radius: var(--radius-sm, 6px);
}

.card-header {
    border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
}

/* Card Ribbons */
.ribbon {
    width: 125px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid var(--color-primary-dark, #153a26);
}

.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    background-color: var(--color-primary, #1C4932);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    font: 600 17px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: capitalize;
    text-align: center;
}

.ribbon-top-right {
    top: -10px;
    right: -10px;
}

.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}

.ribbon-top-right::before {
    top: 0;
    left: 0;
}

.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}

.ribbon-top-right span {
    left: -25px;
    top: 30px;
    transform: rotate(45deg);
}

/* Vacant slot — a card whose whole message is "nothing is here yet" (e.g. the admin dashboard's
   season slot when no season is active). A dashed outline reads as an invitation to fill it,
   not as an alert. Pair with the normal border-* color class; this only changes the line style. */
.card--vacant {
    border-style: dashed;
}

.card--vacant > .card-header {
    border-bottom-style: dashed;
}

/* Collapsible list-card toggle — a per-card chevron for a list of many repeated cards (individual and
   team Flights), independent of every other card in the list (no accordion mutual-exclusion). Persisted
   per-browser by wwwroot/js/collapsible-cards.js via data-persist-collapse + the element's own id. */
.card-collapse-toggle {
    background: none;
    border: none;
    padding: 0.15rem 0.3rem;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.card-collapse-toggle:hover {
    color: var(--bs-body-color, #212529);
}

.card-collapse-chevron {
    transition: transform 0.2s ease;
}

.card-collapse-toggle[aria-expanded="true"] .card-collapse-chevron {
    transform: rotate(180deg);
}

/* 2-components/forms.css */
/* ============================================
   FORMS
   ============================================
   Form controls and validation styles
   ============================================ */

/* Color Picker Grid */
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle, 50%);
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--transition-fast, 0.1s ease),
                border-color var(--transition-fast, 0.1s ease);
}

.color-swatch:hover {
    transform: scale(1.15);
}

.btn-check:checked + .color-swatch {
    border-color: var(--color-gray-900, #212529);
    transform: scale(1.15);
}

.team-color-dot {
    border-radius: var(--radius-circle, 50%);
    display: inline-block;
}

/* Form validation */
.text-danger {
    color: var(--color-danger, #dc3545) !important;
}

.form-label {
    margin-bottom: 0.5rem;
}

.form-text {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--color-gray-600, #6c757d);
}

/* 2-components/page-hero.css */
/* ============================================
   PAGE HERO
   ============================================
   Eyebrow + headline + subhead pattern used at the top of Public
   marketing pages (Home, Features, About, Memberships) so the funnel
   reads as one system rather than one designed page among plain ones.
   ============================================ */

.page-hero {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
}

.page-hero__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.page-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--scorecard-ink);
    margin-bottom: 0.5rem;
}

/* For headings that are a full sentence rather than a short title/name —
   the full clamp() wraps into a wall of oversized text otherwise. */
.page-hero__title--compact {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

/* Home page only: the RELM Golf badge set as a crest at the top of the hero (the
   visible headline is the badge itself; the page h1 is visually hidden). */
.page-hero__crest {
    display: block;
    width: clamp(9.5rem, 22vw, 13.5rem);
    height: auto;
    margin: 0 auto 1.25rem;
}

.page-hero__subhead {
    color: var(--color-gray-600);
    max-width: 38rem;
    margin: 0 auto;
}

/* Confirmation pages (e.g. Demo → Thank You): a short message centered at the
   optical middle of the screen. The layout's white panel is min-vh-100 and starts
   below the nav, so a 70vh flex block lands the content slightly above center. */
.page-hero--confirm {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.page-hero__confirm-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.5rem;
}

/* 2-components/tables.css */
/* ============================================
   TABLES
   ============================================
   List-table layout (paginated lists) and ledger number columns.
   Base table styling is Bootstrap's own.
   ============================================ */

.table-row-spacer {
    background-color: transparent !important;
    pointer-events: none;
}

.table-row-spacer td {
    border-color: transparent !important;
}

/* Bootstrap stripes cells with an inset shadow; a filler row must not look like data. */
.table-row-spacer > td {
    box-shadow: none !important;
}

/* Paginated list tables — fixed layout so column widths hold steady across pagination pages;
   pairs with .table-row-spacer above, which solves the same "table shifts between pages"
   problem on the row-height axis instead. See docs "Paginated List Tables — Fixed Column
   Widths". Every <th> in a .list-table must declare a width in %, and they must add up to 100 —
   table-layout: fixed sizes every column from the first row's cells only, and Chrome leaves
   any leftover width blank when px columns sit next to % ones. */
.list-table {
    table-layout: fixed;
    width: 100%;
}

/* Phones and small tablets: a list keeps a usable width and scrolls sideways inside its .table-responsive wrapper,
   instead of squeezing to the screen (measured 249px tables, 7px # columns and 89–233px rows at 390px). Lists with 8+
   columns get more room (.list-table--wide; guarded by StylesheetImportTests). */
@media (max-width: 991.98px) {
    .list-table {
        min-width: 44rem;
    }

    .list-table.list-table--wide {
        min-width: 52rem;
    }
}

/* The Name column stays visible while a list scrolls sideways; the # column scrolls away. Pinned at left: 0 on purpose:
   a percentage offset resolves against the scroll area, not the table, so pinning # as well made Name slide over it.
   On desktop the list never scrolls, so this changes nothing there. */
.list-table .list-sticky-name {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 2px 0 3px -1px rgba(0, 0, 0, .15);
}

.list-table thead .list-sticky-name {
    z-index: 2;
}

/* A card's body never grows past the card to fit a wide table: in the card's flex column it took the table's natural
   width (measured 495px in a 358px card at 390px, #39), so the .table-responsive inside never scrolled and the page did. */
.card > .card-body {
    max-width: 100%;
}

/* Truncates ONE element's text with an ellipsis, full value on hover via title=. Apply to the
   specific text-bearing element (a <span>/<strong>/<small>) inside a cell — never the whole
   <td> when a badge/icon sits beside the text, since td-level nowrap+ellipsis risks clipping
   the badge along with the overflowing text. Pair with a flex wrapper
   (d-flex align-items-center gap-2) around the <td>'s content and flex-shrink-0 on the
   badge/icon sibling so the badge always renders in full and only the text shrinks.
   min-width: 0 is required here (not just overflow/white-space) because this element is
   almost always a flex child, and flex items default to a content-based min-width that
   silently defeats ellipsis truncation without this override. */
.col-truncate {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* A list's name with its badges (Guest, No handicap, Disqualified) on a line underneath, so the name keeps the
   column's whole width: on the same line the badges cut short names ("Frankie …", 2026-10-25). Only a row with a
   badge gets the extra line. min-width: 0 lets the name truncate inside the flex row, as for .col-truncate. */
.list-name-stack {
    flex: 1 1 auto;
    min-width: 0;
}

.list-name-stack > .col-truncate {
    display: block;
}

.list-name-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .125rem;
    line-height: 1;
}

/* A number column in a ledger-style table (scores, differentials): right-aligned with tabular
   figures, so a column of numbers lines up digit for digit like a scorecard. Goes on the <th>
   and each <td> of that column. */
.num-col {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Room before the next column, which is usually left-aligned text (Type, Result). Qualified with
   .table so it outranks Bootstrap's .table-sm cell padding. */
.table th.num-col,
.table td.num-col {
    padding-inline-end: 1rem;
}

/* 2-components/modals.css */
/* ============================================
   MODALS
   ============================================
   Modal dialog overrides and customizations
   ============================================ */

/* Ensure Bootstrap modal backdrop appears above sidebar */
.modal-backdrop {
    z-index: var(--z-modal-backdrop, 1040) !important;
}

/* Ensure Bootstrap modal appears above backdrop */
.modal {
    z-index: var(--z-modal, 1050) !important;
}


.modal-header {
    border-bottom: 1px solid var(--color-gray-200, #e9ecef);
}

.modal-footer {
    border-top: 1px solid var(--color-gray-200, #e9ecef);
}

/* 2-components/navigation.css */
/* ============================================
   NAVIGATION
   ============================================
   Navbar, breadcrumbs, and nav links
   ============================================ */

/* Navbar */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Navbar logo: the artwork itself bakes in the "GOLF" wordmark and a
   ball/lettering detail, so it needs real size to read — 64px reduced it
   to a blurry favicon-sized smudge. Sized up with matching navbar padding
   and nav-link type below so the bar reads as intentionally larger, not
   just a bigger image crammed into the old slot. */
.navbar-brand-logo {
    max-height: 90px;
    max-width: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.navbar {
    --bs-navbar-padding-y: 1rem;
}

/* Phones: still bigger than the old 48px, but the bar can't afford full desktop scale */
@media (max-width: 767.98px) {
    .navbar-brand-logo { max-height: 68px; }
}

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

/* Public marketing header links — bumped up from Bootstrap's 1rem default
   for better readability at the top of the page, and bumped again to
   1.25rem to balance the larger .navbar-brand-logo above. Scoped to
   .navbar so it doesn't touch nav-pills/tabs elsewhere in the app. */
.navbar .nav-link {
    font-size: 1.25rem;
}

/* Mobile collapsed nav (below navbar-expand-md's 768px breakpoint): the
   "View plans" CTA and language selector sit inline with the plain text
   links on desktop, but once the nav stacks vertically they don't inherit
   .nav-link's padding rhythm, so they land cramped together at a
   different visual weight than the links above them. */
@media (max-width: 767.98px) {
    .nav-item-cta {
        margin-top: 0.75rem;
    }

    .nav-item-cta .btn {
        width: 100%;
    }

    .nav-item-lang {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .nav-item-lang .dropdown,
    .nav-item-lang .btn {
        width: 100%;
    }
}

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 1rem;
    list-style: none;
    background-color: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--color-gray-600, #6c757d);
}

.breadcrumb-item.active {
    color: var(--color-gray-600, #6c757d);
}

/* ── Breadcrumb rows: prevent right-side action dropdown from being clipped ── */
nav[aria-label="breadcrumb"] ~ .dropdown {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* ============================================
   RESPONSIVE NAV TABS
   Mobile  : Bootstrap accordion (d-md-none)
   Desktop : JS-driven "More" overflow dropdown (d-none d-md-block)
   ============================================ */

/* ── Desktop tabs: visible only at ≥ 1024px ── */
.nav-tabs-responsive {
    position: relative;
}

@media (max-width: 1023.98px) {
    .nav-tabs-responsive {
        display: none;
    }
}

@media (min-width: 1024px) {
    .nav-tabs-responsive {
        overflow: visible;
    }

    .nav-tabs-responsive .nav-tabs {
        flex-wrap: nowrap;
    }

    /* Each tab keeps its natural one-line width. Without this, a long tab list shrinks every tab until its label
       wraps under its icon — and nav-tabs.js, which measures widths to decide what goes into "More", then sees
       everything fitting and never overflows. */
    .nav-tabs-responsive .nav-tabs > .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs-responsive .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

/* ── Mobile accordion: visible only below 1024px ── */
@media (min-width: 1024px) {
    .nav-tabs-mobile {
        display: none;
    }
}

/* ── Mobile accordion navigation (< 1024px) ── */
.nav-tabs-accordion .accordion-item {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.nav-tabs-accordion .accordion-button {
    font-weight: 600;
    font-size: 0.9375rem;
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

.nav-tabs-accordion .accordion-button:not(.collapsed) {
    background-color: var(--color-gray-200);
    color: var(--color-gray-900);
    box-shadow: none;
}

.nav-tabs-accordion .list-group-item {
    border-left: none;
    border-right: none;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
}

.nav-tabs-accordion .list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-gray-300);
    color: var(--color-white);
    font-weight: 600;
}

.nav-tabs-accordion .list-group-item.disabled {
    color: var(--color-gray-600);
    pointer-events: none;
    opacity: 0.65;
}

/* ── Summary cards: collapsible disclosure on mobile ── */

.summary-cards-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--color-gray-100, #f8f9fa);
    border: 1px solid var(--color-gray-300, #dee2e6);
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.summary-cards-toggle:hover {
    background-color: var(--color-gray-200, #e9ecef);
}

.summary-cards-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.summary-cards-toggle[aria-expanded="true"] .summary-cards-chevron {
    transform: rotate(180deg);
}

/* Hide toggle and always show cards on tablet/desktop */
@media (min-width: 1024px) {
    .summary-cards-toggle {
        display: none !important;
    }

    .summary-cards-collapse {
        display: block !important;
    }
}

/* Equal-height card headers across all summary card partials */
.summary-cards-collapse .card-header {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ── Responsive pagination ── */

/* Desktop / tablet: visible at ≥ 1024px, hidden below */
@media (max-width: 1023.98px) {
    .pagination-desktop {
        display: none !important;
    }
}

/* Mobile: visible below 1024px, hidden at ≥ 1024px */
@media (min-width: 1024px) {
    .pagination-mobile {
        display: none !important;
    }
}

.pagination-mobile .page-item-counter {
    flex: 1;
    text-align: center;
}

.pagination-mobile .page-counter-label {
    color: var(--color-gray-700, #495057);
    cursor: default;
    pointer-events: none;
    white-space: nowrap;
}

/* 2-components/footer.css */
/* ============================================
   SITE FOOTER
   ============================================
   Public marketing footer. Reads as the attest/total block at the bottom
   of a scorecard: mono column labels over hairline rules, one heavy rule
   above the closing bar. Tokens are scoped to .site-footer rather than
   :root, matching hub.css / join.css / live-board.css.

   --footer-ink doubles as the light chip behind images/relm-badge-footer.webp: the
   artwork is dark ink on a transparent background and would vanish on
   --footer-field without it (same idiom as live-board.css .board-header__logo).
   ============================================ */

.site-footer {
    --footer-field: #153A26;
    --footer-ink: #F1EDE2;
    --footer-ink-muted: #A8BDB0;
    --footer-accent: #8FC7A6;
    --footer-line: rgba(241, 237, 226, 0.16);
    --footer-rule: rgba(241, 237, 226, 0.30);

    background-color: var(--footer-field);
    color: var(--footer-ink-muted);
    padding: 3rem 0 1.75rem;
    /* defends against text-center inherited from a host layout */
    text-align: left;
}

/* The global link color (1-base/reset.css) is --color-info blue; it must
   not reach the footer. Scoped here rather than fought globally. */
.site-footer a {
    color: var(--footer-ink);
    text-decoration: none;
    transition: color var(--transition-base, 0.2s ease);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--footer-accent);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--footer-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Brand column ── */

/* The chip sits on the <img> itself (a replaced element takes background and
   padding). content-box so max-height governs the artwork, not artwork+padding
   (Bootstrap's reset makes everything border-box). */
.site-footer__lockup {
    display: block;
    max-height: 150px;
    width: auto;
    height: auto;
    padding: 0.5rem 0.75rem;
    background-color: var(--footer-ink);
    border-radius: 6px;
    box-sizing: content-box;
}

.site-footer__desc {
    margin: 1.25rem 0 1rem;
    max-width: 24rem;
}

.site-footer__address {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    font-style: normal;
    margin-bottom: 0.5rem;
}

.site-footer__email {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

/* ── Link columns ── */

.site-footer__col-label {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--footer-ink);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--footer-line);
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-footer__links a {
    font-size: 1.0625rem;
}

/* ── Closing bar ── */

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--footer-rule);
}

.site-footer__copy {
    margin: 0;
    font-size: 0.875rem;
}

.site-footer__stripe {
    max-height: 34px;
    width: auto;
}

.site-footer__recaptcha {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
}

.site-footer__usga {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .site-footer {
        padding: 2.25rem 0 1.5rem;
    }

    .site-footer__lockup {
        max-height: 96px;
    }

    .site-footer__bottom {
        justify-content: flex-start;
        margin-top: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer a {
        transition: none;
    }
}

/* 2-components/score-entry.css */
/* ============================================
   SCORE ENTRY — live scorecard notation
   Applied to the admin score-entry grids
   (Rounds/Scores/Group and Rounds/Scores/Teams)
   as values are typed. Convention matches the
   live board: red = under par, green = over par.
   Classes are set by each page's inline script.
   ============================================ */
.score-input {
    --se-under: #C42B1C;
    --se-over: #2F6B3F;
}
.score-input.se-birdie {
    border: 1.5px solid var(--se-under);
    border-radius: 999px;
    color: var(--se-under);
    font-weight: 600;
}
.score-input.se-eagle {
    border: 1.5px solid var(--se-under);
    border-radius: 999px;
    color: var(--se-under);
    font-weight: 600;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--se-under);
}
.score-input.se-bogey {
    border: 1.5px solid var(--se-over);
    border-radius: 0;
    color: var(--se-over);
    font-weight: 600;
}
.score-input.se-double {
    border: 1.5px solid var(--se-over);
    border-radius: 0;
    color: var(--se-over);
    font-weight: 600;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--se-over);
}
.score-input.se-x {
    border: 1.5px dashed #6c757d;
    color: #6c757d;
}
/* while editing, let Bootstrap's focus ring win over the double-ring shadow */
.score-input.se-eagle:focus,
.score-input.se-double:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* OUT / IN / TOTAL coloring vs par (set by the page scripts) */
.se-total-under { color: var(--se-under) !important; }
.se-total-over  { color: var(--se-over) !important; }
/* TOTAL row is .table-dark — use lighter tints for contrast */
#totalRow .se-total-under { color: #FFB4A8 !important; }
#totalRow .se-total-over  { color: #9FD7AE !important; }

/* ---- handicap stroke dots -------------------------------------------------
   Rendered inside a relatively-positioned wrapper and absolutely positioned, so
   they are OUT OF FLOW and can never widen a cell — every score input keeps its
   fixed width whether or not the player gets a stroke on that hole.
   Neutral grey on purpose: red/green mean under/over par everywhere in this app,
   so a coloured dot would read as a score judgement rather than an allocation. */
.score-cell {
    position: relative;
    display: inline-block;
}
.score-cell--fill {
    display: block;
    width: 100%;
}
.score-pops {
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .5px;
    color: #6c757d;
    pointer-events: none;   /* must never intercept a click meant for the input */
    white-space: nowrap;    /* two dots must never wrap */
}

/* 2-components/results-scorecard.css */
/* ============================================
   RESULTS SCORECARD — expandable player/team scorecards
   on Event Results + Round Leaderboard (admin portal).
   Convention matches score-entry.css / the live board:
   red = under par, green = over par.
   ============================================ */
.sc-toggle {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    line-height: 1;
}
.sc-chevron {
    display: inline-block;
    transition: transform 0.15s ease-in-out;
}
.sc-toggle[aria-expanded="true"] .sc-chevron {
    transform: rotate(90deg);
}
.sc-expansion > td {
    padding: 0 !important;
}
.sc-loading,
.sc-error {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}
.sc-loading {
    color: #6c757d;
}
.sc-error {
    color: #dc3545;
}

/* :root, not .rsc-panel — .rsc-legend (used by .rsc-eagle/.rsc-birdie/.rsc-bogey/.rsc-double
   swatches) renders as a SIBLING of .rsc-panel, not a descendant, so custom properties scoped to
   .rsc-panel never reach it (CSS variables cascade to descendants only, never siblings). */
:root {
    --rsc-under: #C42B1C;
    --rsc-over: #2F6B3F;
}
.rsc-panel {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
}
.rsc-panel + .rsc-panel {
    border-top: 1px solid #dee2e6;
    margin-top: 0.5rem;
    padding-top: 1rem;
}
.rsc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin-bottom: 0.5rem;
}
.rsc-header__round {
    font-weight: 600;
}
.rsc-header__label {
    font-weight: 600;
    margin-right: 0.5rem;
}
.rsc-header__tee,
.rsc-header__course {
    color: #6c757d;
    font-size: 0.85em;
}
.rsc-empty {
    color: #6c757d;
    padding: 0.5rem 0;
}

.rsc-table {
    border-collapse: collapse;
    /* 100%, not auto — with EVERY first-row column given an explicit width (see below), a
       fixed-layout table at a DEFINITE width (100%) distributes any leftover space
       PROPORTIONALLY across all of those columns instead of concentrating it in one. (table-layout:
       fixed + width: auto instead shrink-to-fits the whole table to the container, which stops the
       .table-responsive wrapper's horizontal scroll from ever kicking in on a narrow viewport —
       columns get squeezed below their declared width instead of the card scrolling.) */
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.rsc-table th,
.rsc-table td {
    text-align: center;
    padding: 0.2rem 0.3rem;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}
.rsc-table th.rsc-label {
    text-align: left;
    color: #6c757d;
    text-transform: uppercase;
    font-size: 0.75em;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* table-layout: fixed sizes every column from its FIRST row's cells only — this is what actually
   governs column widths for every row below, including the name rows. The first row is Hole /
   hole-numbers / Out / [hole-numbers / In / Total]: give every NUMERIC cell a narrow baseline width
   (they only ever hold 1-3 chars) and the leading label cell (the player/team name on data rows) a
   comfortable baseline in rem (root-relative, not the label's own smaller em context). With the
   table itself at width: 100%, these baselines all grow together, proportionally, to fill the card
   — no column is left empty and none is forced to eat 100% of the leftover alone. Names/team pairs
   longer than the label's resulting width still fall back to the ellipsis above. */
.rsc-table tr:first-child > td,
.rsc-table tr:first-child > th.rsc-label:not(:first-child) {
    width: 2.8em;
}
.rsc-table tr:first-child > th.rsc-label:first-child {
    width: 15rem;
}
.rsc-row--team td,
.rsc-row--team th.rsc-label {
    font-weight: 700;
}
/* Match scorecard — the MATCH row sits between the two player rows; LeanDirection tint on its
   cells is applied inline via Bootstrap's bg-success-subtle/bg-secondary-subtle utilities (mirrors
   the app's existing Gross/Net badge color pairing), not a bespoke palette. */
.rsc-row--match th.rsc-label {
    font-style: italic;
}
.msc-caption {
    font-weight: 600;
    color: #212529;
}
.msc-received {
    color: #6c757d;
    font-weight: 400;
}
.rsc-row-name {
    text-align: left !important;
    color: #212529;
    text-transform: none !important;
    font-size: 0.85rem !important;
}
.rsc-topar {
    color: #6c757d;
    font-weight: 600;
    margin-left: 0.4em;
}

.rsc-hole {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    font-weight: 700;
}
.rsc-eagle {
    border: 1.5px solid var(--rsc-under);
    border-radius: 50%;
    color: var(--rsc-under);
    box-shadow: 0 0 0 2px #f8f9fa, 0 0 0 3.5px var(--rsc-under);
}
.rsc-birdie {
    border: 1.5px solid var(--rsc-under);
    border-radius: 50%;
    color: var(--rsc-under);
}
.rsc-bogey {
    border: 1.5px solid var(--rsc-over);
    color: var(--rsc-over);
}
.rsc-double {
    border: 1.5px solid var(--rsc-over);
    color: var(--rsc-over);
    box-shadow: 0 0 0 2px #f8f9fa, 0 0 0 3.5px var(--rsc-over);
}
.rsc-par-swatch {
    border: 1.5px solid #ced4da;
    border-radius: 50%;
}

.rsc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin-top: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid #dee2e6;
}
.rsc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 700;
}
.rsc-legend-item .rsc-hole {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

/* 2-components/tee-marker.css */
/* ============================================
   TEE MARKER — a small colored disc standing in for the physical tee
   marker golfers recognize, shown wherever a tee name is displayed
   (Player Tees page, Member Bank "Default tees" card). The colour word
   comes from Presentation/Helpers/TeeMarker.cs, parsed out of the tee's
   name (e.g. "Gold", "White/Red Combo"). No motion is used, so there is
   nothing prefers-reduced-motion needs to disable.
   ============================================ */
.tee-marker {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    vertical-align: middle;
    background-color: currentColor;
}

/* Combo tee names (e.g. "White/Red Combo") get a diagonal half-fill instead of a solid disc. */
.tee-marker--combo {
    background-color: transparent;
    background-image: linear-gradient(135deg, currentColor 50%, #fff 50%);
}

.tee-marker--black { color: #1f1f1f; }
.tee-marker--blue { color: #1d4ed8; }
.tee-marker--white { color: #ffffff; box-shadow: inset 0 0 0 1px #6b7280; }
.tee-marker--gold { color: #d4a017; }
.tee-marker--yellow { color: #facc15; }
.tee-marker--red { color: #c0392b; }
.tee-marker--green { color: #1C4932; }
.tee-marker--silver { color: #9ca3af; }
.tee-marker--copper { color: #b87333; }
.tee-marker--jade { color: #2e8b57; }
.tee-marker--orange { color: #f97316; }
.tee-marker--purple { color: #7c3aed; }
.tee-marker--teal { color: #14b8a6; }
.tee-marker--bronze { color: #a97142; }
.tee-marker--neutral { color: #d1d5db; }

/* 2-components/branding.css */
.logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 12px;
    background: repeating-conic-gradient(var(--color-gray-200) 0 25%, #fff 0 50%) 0 0 / 16px 16px;
    border-bottom: 1px solid var(--color-gray-200);
}

.logo-tile img {
    max-height: 96px;
    max-width: 100%;
    object-fit: contain;
}

.brand-swatch {
    flex: 0 0 72px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.brand-swatch img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.brand-swatch--portalsidebar {
    flex-basis: 48px;
    border-radius: 50%;
    background: var(--color-primary);
}

.brand-swatch--portalsidebar img {
    background: #fff;
    border-radius: 50%;
    padding: 4px;
}

.brand-swatch--publicsite {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
}

.brand-swatch--liveboard {
    background: #111;
}

.brand-swatch--signin {
    background: var(--color-primary);
}

.brand-swatch--mobileapp {
    background: var(--color-primary);
    border-radius: 12px;
}

.brand-swatch--print {
    background: #fff;
    border: 1px solid var(--color-gray-300);
    border-top: 2px solid var(--color-primary);
}

.brand-swatch--email {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* 3-layout/sidebar.css */
/* ============================================
   SIDEBAR
   ============================================
   Fixed dockable sidebar navigation
   ============================================ */

/* Sidebar - Fixed Position. The rail itself never scrolls: only the link list
   (.sidebar-scroll) does, so the club header and the Profile/Help/Logout row
   stay visible on short or scaled-up viewports. */
#mainSidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--sidebar-width, 16.666667%);
    background-color: var(--sidebar-bg, #1C4932);
    z-index: var(--z-sidebar, 1000);
    transition: width var(--transition-slow, 0.3s ease);
    overflow-x: hidden;
    overflow-y: hidden;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;          /* lets a flex child shrink below its content so overflow can kick in */
    overflow-y: auto;
    overflow-x: hidden;     /* the hover nudge (translateX 5px) must not raise a horizontal scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Collapsed State */
#mainSidebar.collapsed {
    width: var(--sidebar-width-collapsed, 60px) !important;
}

#mainSidebar.collapsed .menu-text {
    display: none !important;
}

#mainSidebar.collapsed .logo-circle {
    display: none !important;
}

#mainSidebar.collapsed .border-bottom,
#mainSidebar.collapsed .border-top {
    border: none !important;
}

#mainSidebar.collapsed #menu .nav-link,
#mainSidebar.collapsed .sidebar-footer .nav-link {
    justify-content: center;
    padding: 10px 0;
}

#mainSidebar.collapsed .sidebar-footer {
    flex-direction: column;
    align-items: stretch;
}

#mainSidebar.collapsed .sidebar-footer-logout {
    margin-left: 0;
}

#mainSidebar.collapsed #menu .nav-link:hover {
    transform: none;
}

#mainSidebar.collapsed #sidebarToggle i {
    transform: rotate(180deg);
}

/* Sidebar Toggle Button */
#sidebarToggle {
    position: absolute;
    top: 20px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: var(--sidebar-bg, #1C4932);
    border: 2px solid var(--color-white, #fff);
    border-radius: var(--radius-circle, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-sidebar-toggle, 1001);
    transition: transform var(--transition-base, 0.2s ease);
}

#sidebarToggle:hover {
    transform: scale(1.1);
}

#sidebarToggle i {
    color: var(--color-white, white);
    font-size: 12px;
    transition: transform var(--transition-slow, 0.3s ease);
}

/* Sidebar Navigation Links */
#menu .nav-link {
    border-radius: var(--radius-sm, 6px);
    padding: 7px 12px;
    transition: all var(--transition-base, 0.2s ease);
}

#menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

/* aria-current="page" is set server-side on the current section's link (_Sidebar.cshtml, SidebarNav.IsCurrent). */
#menu .nav-link.active,
#menu .nav-link[aria-current="page"],
.sidebar-footer .nav-link[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Link rows sit 2px apart (was an 8px mb-2 under each) — the row padding above keeps
   each one ~36px tall, so this shortens the list without shrinking the click target. */
#menu .collapse > li + li {
    margin-top: 2px;
}

/* Logo Circle */
.logo-circle {
    width: 44px;
    height: 44px;
    background: var(--color-white, white);
    border-radius: var(--radius-circle, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    padding: 4px;
    flex-shrink: 0;
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Sidebar footer (Profile / Help / Logout icon row) */
.sidebar-footer {
    padding: 0.5rem 0 0.75rem;
}

.sidebar-footer .nav-link {
    border-radius: var(--radius-sm, 6px);
    padding: 8px 12px;
    transition: background-color var(--transition-base, 0.2s ease);
}

.sidebar-footer .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-footer-logout {
    margin-left: auto;
}

/* Responsive Sidebar */
@media (max-width: 1200px) {
    #mainSidebar {
        width: 25%;
    }
}

/* At iPad Pro / narrow desktop (1024–1200px), use a slightly narrower sidebar
   so the content area gains room and the toggle button doesn't crowd the content edge */
@media (min-width: 1024px) and (max-width: 1200px) {
    #mainSidebar {
        width: 21%;
    }
}

@media (max-width: 768px) {
    #mainSidebar {
        width: 33.333333%;
    }
}

/* Collapsible section groups */
.sidebar-group-toggle {
    background: transparent;
}

.sidebar-group-chevron {
    transition: transform 0.2s ease;
    font-size: 10px;
}

.sidebar-group-toggle[aria-expanded="false"] .sidebar-group-chevron {
    transform: rotate(-90deg);
}

/* Icon-collapsed sidebar (60px): section state is meaningless — always show all item icons,
   hide the chevrons (menu-text is already display:none in that mode). */
#mainSidebar.collapsed .sidebar-group .collapse {
    display: block !important;
}

#mainSidebar.collapsed .sidebar-group-chevron {
    display: none !important;
}

/* Phones (issue #17): the sidebar is a Bootstrap offcanvas drawer (offcanvas-md offcanvas-start on #mainSidebar in
   both portal layouts), opened from _PortalTopBar's ☰ and showing full labels and collapsible sections. Bootstrap's
   offcanvas classes lose to the #mainSidebar id rule above, so two overrides here are load-bearing: the z-index
   (1000 would sit under the 1040 backdrop) and the transition (width-only would kill the slide-in). */
@media (max-width: 767.98px) {
    #mainSidebar {
        width: min(280px, 85vw) !important;
        z-index: var(--bs-offcanvas-zindex, 1045);
        transition: transform 0.3s ease-in-out;
    }

    #sidebarToggle {
        display: none;
    }

    /* 44px touch targets in the drawer (desktop keeps its denser ~36px rows) */
    #menu .nav-link,
    .sidebar-footer .nav-link {
        min-height: 44px;
    }

    #menu .nav-link:hover {
        transform: none;
    }
}

/* Phone-only top bar holding the drawer's ☰ (Pages/Shared/_PortalTopBar.cshtml; d-md-none hides it from 768px up) */
.portal-topbar {
    background: var(--sidebar-bg, #1C4932);
    min-height: 48px;
    padding: 0.25rem 0.75rem;
    gap: 0.5rem;
}

.portal-topbar-menu {
    color: var(--color-white, #fff);
    min-width: 44px;
    min-height: 44px;
}

.portal-topbar-menu:hover,
.portal-topbar-menu:focus {
    color: var(--color-white, #fff);
}

.portal-topbar .logo-circle {
    width: 32px;
    height: 32px;
}

/* 3-layout/header.css */
/* ============================================
   HEADER
   ============================================
   Page headers and title sections
   ============================================ */

/* Page title sections */
.page-header {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.page-header h1,
.page-header h2 {
    margin-bottom: 0.25rem;
}

.page-header .text-muted {
    font-size: 0.875rem;
}

/* 3-layout/grid.css */
/* ============================================
   GRID & LAYOUT
   ============================================
   Main content area and layout helpers
   ============================================ */

/* Main Content Area (used with sidebar) */
#mainContent {
    margin-left: var(--sidebar-width, 16.666667%);
    width: calc(100% - var(--sidebar-width, 16.666667%));
    transition: margin-left var(--transition-slow, 0.3s ease),
                width var(--transition-slow, 0.3s ease);
    min-height: 100vh;
    /* The layout's .row gx-2 has negative gutters that stuck 4px past the screen, so every portal page scrolled
       sideways on a phone (#39). clip, not hidden: hidden would make this a scroll container and break sticky children. */
    overflow-x: clip;
}

#mainContent.sidebar-collapsed {
    margin-left: var(--sidebar-width-collapsed, 60px);
    width: calc(100% - var(--sidebar-width-collapsed, 60px));
}

/* Background Helpers */
.search-background {
    background: url('/images/dust_scratches.png');
}

.backgroundWhite {
    background-color: var(--color-white, white);
    padding: 30px;
    border-radius: var(--radius-md, 10px);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

/* The portal layouts' content panel: fills the window without scrolling it. min-vh-100 plus the 1rem alert slot
   above (mt-3) and .backgroundWhite's bottom margin made every portal page scroll at least 40px (issue #44).
   A min-height only, so a long page grows and scrolls exactly as before. Two classes on purpose: the breadcrumb-row rule
   below (div:has(> nav[aria-label="breadcrumb"]), specificity 0,1,2) also matches this panel on pages whose breadcrumb
   sits directly inside it (My Profile) and would shrink it to 2rem; min-vh-100 only won because Bootstrap utilities
   are !important. */
.backgroundWhite.portal-panel {
    min-height: calc(100vh - 1rem - var(--spacing-lg, 1.5rem));
}

.content-background {
    background-color: var(--color-gray-100, #f8f9fa);
}

/* Border Helpers */
.border-top {
    border-top: 1px solid var(--color-gray-300, #e5e5e5);
}

.border-bottom {
    border-bottom: 1px solid var(--color-gray-300, #e5e5e5);
}

.box-shadow {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

/* Breadcrumb row — keep consistent height whether or not an Actions button is present.
   btn-sm is ~31px tall; setting min-height here prevents the row from being shorter
   on pages without an Actions button, which would push the h1 up and break visual rhythm. */
div:has(> nav[aria-label="breadcrumb"]) {
    min-height: 2rem; /* 32px — matches btn-sm height */
}

@media (max-width: 575.98px) {
    div:has(> nav[aria-label="breadcrumb"]) {
        padding-right: 0.75rem;
    }
}

/* Phones (breadcrumb.js collapses the middle crumbs at the same breakpoint): the breadcrumb gets the whole first line
   and whatever sits beside it — Checklist / Actions buttons, a round page's bare checklist trigger — drops to its own
   right-aligned line, instead of squeezing the breadcrumb onto two lines. Those buttons keep their labels there
   (actions-and-buttons.md; guarded by ArchitectureTesting BreadcrumbRowLabelTests). A long last crumb (the event name) ends in
   "…" rather than wrapping. Desktop is unchanged. */
@media (max-width: 767.98px) {
    div:has(> nav[aria-label="breadcrumb"]) {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    div:has(> nav[aria-label="breadcrumb"]) > nav[aria-label="breadcrumb"] {
        flex: 1 0 100%;
        min-width: 0;
    }

    /* The second selector repeats navigation.css's `nav ~ .dropdown { margin-left: .5rem }` at the same specificity so
       this later rule wins for a season page's bare Actions dropdown. */
    div:has(> nav[aria-label="breadcrumb"]) > :not(nav),
    nav[aria-label="breadcrumb"] ~ .dropdown {
        margin-left: auto;
    }

    /* A group of labelled buttons wraps, still right-aligned, rather than overflowing when the labels are long (Spanish),
       and each button is a 44px tap target. */
    div:has(> nav[aria-label="breadcrumb"]) > :not(nav) {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.5rem;
    }

    div:has(> nav[aria-label="breadcrumb"]) > :not(nav) .btn:not(.btn-link):not(.dropdown-item) {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }

    nav[aria-label="breadcrumb"] .breadcrumb {
        flex-wrap: nowrap;
    }

    /* Earlier crumbs keep their size and never wrap inside themselves; only the last one gives way. */
    nav[aria-label="breadcrumb"] .breadcrumb-item {
        flex-shrink: 0;
        white-space: nowrap;
    }

    nav[aria-label="breadcrumb"] .breadcrumb-item.active {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Responsive Grid Adjustments */
@media (max-width: 1200px) {
    #mainContent {
        margin-left: 25%;
        width: calc(100% - 25%);
    }
}

/* At iPad Pro / narrow desktop (1024–1200px): sidebar is 21%, add 20px to clear
   the sidebar toggle button (right: -15px, 30px wide → protrudes 15px past sidebar edge) */
@media (min-width: 1024px) and (max-width: 1200px) {
    #mainContent {
        margin-left: calc(21% + 20px);
        width: calc(79% - 20px);
    }
}

@media (max-width: 768px) {
    #mainContent {
        margin-left: 33.333333%;
        width: calc(100% - 33.333333%);
    }
}

/* Phones: the sidebar is an offcanvas drawer over the page (sidebar.css), so the content takes the full width. */
@media (max-width: 767.98px) {
    #mainContent,
    #mainContent.sidebar-collapsed {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* 4-pages/about.css */
/* ============================================
   ABOUT PAGE
   ============================================ */

.about-portrait {
    max-width: 220px;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Mission statement — the page's one emphasised element: a pine rule and a slightly larger
   line, set apart from the story paragraphs below it. */
.about-mission {
    margin: 0 0 2.5rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 4px solid var(--color-primary);
}

.about-mission__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.about-mission__statement {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--scorecard-ink);
    margin: 0;
}

/* 4-pages/admin-dashboard.css */
/* ============================================
   ADMIN DASHBOARD
   ============================================
   Admin dashboard specific styles
   ============================================ */

/* Summary cards and stats */
/* Add dashboard-specific styles here */

/* 4-pages/contact.css */
/* ============================================
   CONTACT PAGE
   ============================================
   One scorecard stub in place of a grid of inbox cards.

   The page has a single job — hand over one address — so the address
   itself is the largest type on the page after the h1, set in mono
   like every other piece of data on this site (scores, prices).

   The attest strip borrows the closing device of a real scorecard:
   a round isn't official until a person signs it. It gives the legal
   entity block a reason to sit on the page instead of floating under
   it unattached.

   Deliberately NOT built on .score-card (4-pages/membership-pricing.css):
   that component is left-aligned and hover-lifts as an interactive
   pricing tile, and overriding it here would depend on this file being
   imported after it in main.css — an ordering nobody should have to
   preserve. The shared look comes from the scorecard *tokens* in
   1-base/variables.css, which are the real single source of truth.
   ============================================ */

.contact-card {
    max-width: 34rem;
    margin: 2rem auto 0;
    padding: 2rem 1.75rem 1.75rem;
    background-color: var(--scorecard-paper);
    border: 1px solid var(--scorecard-line);
    border-radius: var(--radius-md, 10px);
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Perforated top edge — the tear-off scorecard stub */
.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: radial-gradient(circle, var(--scorecard-line) 1.2px, transparent 1.2px);
    background-size: 10px 3px;
    background-repeat: repeat-x;
    opacity: 0.8;
}

.contact-card__lede {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--scorecard-ink);
    margin: 0 0 0.75rem;
}

.contact-card__body {
    color: var(--scorecard-ink);
    opacity: 0.85;
    max-width: 28rem;
    margin: 0 auto 1.75rem;
}

/* The focal point of the page. clamp() + overflow-wrap keep a long
   address inside a 320px viewport instead of blowing out the card. */
.contact-card__address {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: clamp(1rem, 4.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-base, 0.2s ease), color var(--transition-base, 0.2s ease);
}

.contact-card__address:hover {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary);
}

.contact-card__address:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm, 6px);
}

/* ---------- Attest strip ---------- */
.contact-attest {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--scorecard-line);
}

.contact-attest__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scorecard-gold);
    margin-bottom: 0.6rem;
}

.contact-attest__signature {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--scorecard-ink);
    margin: 0 0 0.1rem;
}

.contact-attest__role {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin: 0 0 1rem;
}

.contact-attest__entity {
    font-style: normal;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-gray-600);
    margin: 0;
}

/* 4-pages/season-details.css */
/* ============================================
   SEASON DETAILS
   ============================================
   Season details page styles
   ============================================ */

/* Season-specific components */
/* Add season page styles here */

/* 4-pages/member-search.css */
/* ============================================
   MEMBER ENTRY  (/Members, and the shell it shares with /Referrals)
   ============================================
   The member's front door: name your league, get sent to its portal.

   Modelled on care.lyrahealth.com's split — reasons on the left, one
   question on the right — but built from this site's own scorecard
   tokens rather than that page's palette.

   The signature is the input: a scorecard write-on blank (bottom rule
   only) instead of a boxed form control, because the whole page is one
   line to fill in. Affordance is carried by the label, the example
   placeholder, and the focus state rather than by a box.

   The card's `border-top: 0.35rem solid` tab is borrowed from join.css
   so the two player-entry surfaces read as siblings.

   .entry-nav / .entry-container are the shared _MembersPageLayout shell
   and are kept in this file — rather than a new 3-layout/ file — because
   Development loads main.css's @imports one by one, so an extra file is
   an extra request there for ~20 lines (stage and production load the
   build-time bundle, main.bundle.css).
   ============================================ */

/* ---------- shared entry shell (_MembersPageLayout) ---------- */

.entry-nav {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--scorecard-line);
}

/* Horizontal width/centering/gutters come from Bootstrap's .container class
   (added alongside this one in _EntryNav.cshtml) — matches the main nav and
   footer's own plain .container so all three line up at every breakpoint.
   Only vertical padding + flex layout belong here. */
.entry-nav__inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.entry-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

/* Same box as .navbar-brand-logo (2-components/navigation.css): the RELM Golf
   wordmark is ~4:1, so the width cap — not the height — is what sizes it. */
.entry-nav__logo {
    max-height: 90px;
    max-width: 260px;
    width: auto;
    height: auto;
}

/* /Referrals keeps the narrow document shell the layout used to supply */
.entry-container {
    max-width: 54em;
    margin: 0 auto;
    padding: 1.5rem 1rem 0;
    width: 100%;
}

/* ---------- /Members ---------- */

.member-entry {
    flex-grow: 1;
    background-color: var(--scorecard-paper);
    padding: clamp(2rem, 6vw, 4.5rem) 1.25rem;
}

.member-entry__grid {
    max-width: 62rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .member-entry__grid {
        grid-template-columns: 1fr minmax(24rem, 26rem);
        gap: 4rem;
        align-items: center;
    }
}

/* ---------- left: what's inside ---------- */

.member-entry__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scorecard-gold);
    margin-bottom: 0.75rem;
}

.member-entry__lede {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.125rem);
    line-height: 1.15;
    color: var(--scorecard-ink);
    margin: 0 0 1.75rem;
    max-width: 18ch;
}

.member-entry__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.member-entry__benefit {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.85rem;
    align-items: start;
}

.member-entry__check {
    color: var(--color-primary);
    margin-top: 0.25rem;
}

.member-entry__benefit-title {
    display: block;
    font-weight: 600;
    color: var(--scorecard-ink);
}

.member-entry__benefit-text {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-gray-600);
}

/* ---------- right: the card ---------- */

.member-card {
    background-color: var(--color-white);
    border: 1px solid var(--scorecard-line);
    border-top: 0.35rem solid var(--color-primary);
    border-radius: var(--radius-md, 10px);
    padding: 2rem 1.75rem;
    box-shadow: 0 1rem 2.5rem rgba(43, 38, 32, 0.10);
}

.member-card__title,
.member-card__welcome {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--scorecard-ink);
    margin: 0 0 1.5rem;
}

.member-card__welcome {
    margin-bottom: 0.5rem;
}

.member-card__welcome-text {
    color: var(--color-gray-600);
    margin: 0 0 1.5rem;
}

.member-card__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

/* The signature: a scorecard write-on blank, not a boxed input. */
.member-card__input {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--scorecard-line);
    border-radius: 0;
    background-color: transparent;
    padding: 0.5rem 0.25rem;
    min-height: 3rem;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    color: var(--scorecard-ink);
    transition: border-color var(--transition-base, 0.2s ease),
                background-color var(--transition-base, 0.2s ease);
}

.member-card__input::placeholder {
    color: var(--color-gray-600);
    opacity: 0.6;
}

/* Pointer focus: tint the blank, colour the rule, no ring. */
.member-card__input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    background-color: var(--scorecard-paper);
}

/* Keyboard focus additionally gets a real ring. Must stay AFTER :focus —
   equal specificity, later rule wins for elements matching both. */
.member-card__input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.member-card__error {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-danger);
}

.member-card__submit {
    width: 100%;
    margin-top: 1.5rem;
}

.member-card__aside {
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .member-card__input {
        transition: none;
    }
}

/* 4-pages/tournament-bank.css */
/* ============================================
   TOURNAMENT BANK
   ============================================
   Tournament bank wizard and template styles
   ============================================ */

/* Step Circle (Wizard Progress) */
.step-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle, 50%);
    background: var(--color-gray-200, #e9ecef);
    color: var(--color-gray-600, #6c757d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all var(--transition-slow, 0.3s ease);
}

.step-circle.active {
    background: var(--color-success, #198754);
    color: var(--color-white, white);
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.2);
}

.step-circle.completed {
    background: var(--color-success, #198754);
    color: var(--color-white, white);
}

/* Tournament format selection cards */
.tournament-format-card {
    cursor: pointer;
    transition: transform var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease);
}

.tournament-format-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 4-pages/membership-pricing.css */
/* ============================================
   MEMBERSHIP PRICING PAGE
   ============================================
   Scorecard-inspired pricing display. The signature device is the
   score mark on each plan — the same ring notation a golfer uses to
   circle a birdie or eagle on a real scorecard — used in place of a
   generic "Best Value" ribbon. Ring count escalates with the tier;
   the flagship plan (item.BestValue) always gets the gold mark.
   ============================================ */

/* Page header (eyebrow + title + subhead) lives in 2-components/page-hero.css
   and is shared with Home, Features, and About. */

/* ---------- Breadcrumb (Details page) ---------- */
/* Overrides the sitewide default link blue (1-base/reset.css) so it doesn't
   clash with the scorecard palette — scoped to this page only. */
.pricing-breadcrumb {
    margin-bottom: 1.5rem;
}

.pricing-breadcrumb .breadcrumb-item a {
    color: var(--scorecard-ink);
    text-decoration: none;
}

.pricing-breadcrumb .breadcrumb-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.pricing-breadcrumb .breadcrumb-item.active {
    color: var(--color-gray-600);
}

.pricing-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--scorecard-line);
}

/* ---------- Billing toggle ---------- */
.pricing-toggle {
    margin: 1.75rem 0 2rem;
}

/* ---------- Score cards ---------- */
.score-card {
    background-color: var(--scorecard-paper);
    border: 1px solid var(--scorecard-line);
    border-radius: var(--radius-md, 10px);
    padding: 1.75rem 1.5rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease);
}

.score-card:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(28, 73, 50, 0.1);
    transform: translateY(-2px);
}

/* Perforated top edge — evokes a tear-off scorecard stub */
.score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: radial-gradient(circle, var(--scorecard-line) 1.2px, transparent 1.2px);
    background-size: 10px 3px;
    background-repeat: repeat-x;
    opacity: 0.8;
}

.score-card--flagship {
    border-color: var(--scorecard-gold);
    box-shadow: 0 0.5rem 1.5rem rgba(184, 145, 47, 0.15);
}

.score-card--flagship:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(184, 145, 47, 0.25);
}

.score-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

/* Score mark — the scorecard notation (plain ring = par, single = birdie,
   double = eagle, gold = flagship). Purely decorative reinforcement of
   the plan name in the heading, so it's hidden from assistive tech. */
.score-mark {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.8rem;
    border: 1.5px solid var(--scorecard-line);
    color: var(--scorecard-ink);
    opacity: 0;
    animation: scoreMarkIn 0.45s ease forwards;
}

.score-mark--birdie {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.score-mark--eagle {
    border: 1.5px solid var(--color-primary);
    box-shadow: 0 0 0 3px var(--scorecard-paper), 0 0 0 4.5px var(--color-primary);
    color: var(--color-primary);
}

.score-mark--ace {
    border: 1.5px solid var(--scorecard-gold);
    box-shadow: 0 0 0 3px var(--scorecard-paper), 0 0 0 4.5px var(--scorecard-gold);
    color: var(--scorecard-gold);
}

@keyframes scoreMarkIn {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .score-mark {
        animation: none;
        opacity: 1;
    }
}

.score-card__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--scorecard-ink);
    margin: 0;
}

/* Positioned absolute (out of flow) on purpose — a block-level caption here used to add a line
   only to the flagship card, desyncing its price/feature rows from the other cards in the same
   row. A corner badge can never do that, regardless of viewport width or translated text length. */
.score-card__flagship-caption {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--scorecard-gold);
    background: rgba(184, 145, 47, 0.12);
    border: 1px solid var(--scorecard-gold);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.score-card__price {
    font-family: var(--font-mono);
    margin: 0.5rem 0 1.25rem;
    color: var(--scorecard-ink);
}

.score-card__amount {
    font-size: 2rem;
    font-weight: 600;
}

.score-card__unit {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-gray-600);
}

.score-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex-grow: 1;
}

.score-card__features li {
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--scorecard-line);
    font-size: 0.9rem;
}

.score-card__features li:last-child {
    border-bottom: none;
}

.score-card__actions {
    margin-top: auto;
}

/* Secondary CTA — Bootstrap's outline-secondary gray is tuned for a white
   background and all but disappears against the parchment card surface,
   so this uses the scorecard ink tone instead for real contrast. Radius
   matches btn-custom-green above it since the two sit stacked, full-width,
   in the same action group — a shape mismatch there reads as a mistake. */
.score-card__details-btn {
    border: 1px solid var(--scorecard-ink);
    border-radius: var(--radius-lg, 20px);
    color: var(--scorecard-ink);
    background-color: transparent;
}

.score-card__details-btn:hover {
    background-color: var(--scorecard-ink);
    border-color: var(--scorecard-ink);
    color: var(--scorecard-paper);
}

/* ---------- Detail card (Memberships/Details) ---------- */
/* Single wide scorecard stub — same surface/perforation as the pricing
   tiles, sized up for a one-plan deep-dive instead of a 4-up grid. */
.score-card--detail {
    padding: 2rem 2rem 1.75rem;
}

.score-card--detail:hover {
    transform: none;
    box-shadow: none;
}

.score-card--detail.score-card--flagship:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(184, 145, 47, 0.15);
}

.score-card__name--detail {
    font-size: 1.9rem;
}

.score-card__limit {
    color: var(--color-gray-600);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.score-card__description {
    color: var(--scorecard-ink);
    opacity: 0.85;
}

/* Lede treatment — with the feature list gone (the comparison matrix below
   covers that detail), the description is the card's only prose. */
.score-card__description--lede {
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 58ch;
    margin-bottom: 0;
}

/* ---------- Plan crest (Details right column) ---------- */
/* RELM Golf wordmark + thin rule + plan name — echoes the brand lockup's
   wordmark/rule/tagline structure with the plan name in the tagline slot.
   Purely decorative (aria-hidden in markup). Serif treatment inherited from
   the retired .brand-wordmark nav lockup (Georgia stack, no webfont). */
.plan-crest {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.plan-crest__mark {
    width: min(200px, 55%);
    height: auto;
}

.plan-crest__rule {
    width: min(200px, 55%);
    border-top: 1px solid var(--scorecard-ink);
    opacity: 0.6;
    margin: 1rem 0 0.65rem;
}

.plan-crest__name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scorecard-ink);
}

.plan-crest__name--primary { color: var(--color-primary); }
.plan-crest__name--gold    { color: var(--scorecard-gold); }

/* ---------- Comparison table ---------- */
.score-table-wrap {
    margin-top: 2.5rem;
}

.score-table {
    --bs-table-bg: transparent;
}

.score-table th,
.score-table td {
    vertical-align: middle;
}

.score-table thead th {
    border-bottom: 2px solid var(--scorecard-line);
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.score-table tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--scorecard-ink);
}

.score-table tbody tr td,
.score-table tbody tr th {
    border-bottom: 1px dashed var(--scorecard-line);
}

.score-table tbody tr:last-child td,
.score-table tbody tr:last-child th {
    border-bottom: none;
}

.score-table .score-mark {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
    margin: 0 auto 0.4rem;
}

.score-table__name {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--scorecard-ink);
}

.score-table tbody td icon.fa-check {
    color: var(--color-primary);
}

.score-table__col--selected {
    background-color: rgba(28, 73, 50, 0.06);
}

.score-table thead .score-table__col--selected {
    background-color: var(--color-primary);
    border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
}

.score-table thead .score-table__col--selected .score-table__name {
    color: var(--color-white);
}

.score-table thead .score-table__col--selected .score-mark {
    border-color: var(--color-white);
    color: var(--color-white);
    box-shadow: none;
}

.score-table thead .score-table__col--selected .score-mark--eagle,
.score-table thead .score-table__col--selected .score-mark--ace {
    box-shadow: 0 0 0 3px var(--color-primary), 0 0 0 4.5px var(--color-white);
}

/* 4-pages/player-portal.css */
/* ============================================
   PLAYER PORTAL (MyEvents / MyBrackets / MyScores / MyAnalytics)
   ============================================
   One card language for the player-facing pages.
   Status rails and podium tints encode state; they never decorate.
   ============================================ */

/* Event/bracket cards — the left rail carries registration state */
.event-card {
    border-left: 3px solid transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .event-card {
        transition: transform var(--transition-base), box-shadow var(--transition-base);
    }

    .event-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.375rem 0.75rem rgba(28, 73, 50, 0.12);
    }
}

.event-card--open       { border-left-color: var(--color-success); }
.event-card--waitlist   { border-left-color: var(--color-warning); }
.event-card--registered { border-left-color: var(--color-primary); }
.event-card--closed     { border-left-color: var(--color-gray-300); }

/* Deep-link target from a /Join email link or the registration-closed sign-in redirect */
.event-card--focus {
    box-shadow: 0 0 0 0.2rem rgba(28, 73, 50, 0.35);
}

/* Analytics stat tiles — numerals speak in the data voice */
.stat-tile .stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.stat-tile__eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    margin-bottom: 0.25rem;
}

.stat-tile--hero .stat-value {
    color: var(--color-primary);
    font-size: 3rem;
    line-height: 1.1;
}

.stat-delta {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.stat-delta--improving { color: var(--color-success); }
.stat-delta--worsening { color: var(--color-danger); opacity: 0.75; }

/* Analytics scope strip — the filter states what the numbers cover */
.analytics-scope {
    border-bottom: 1px solid var(--color-gray-300);
}

.analytics-scope__line {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

/* Scores table — fixed layout so column widths hold steady across pagination pages;
   without this, browser auto-layout re-measures per page from whichever row's Event/Course
   text is currently longest (e.g. "Bear Course" vs "Duke at Rancho El Dorado, The"). */
.scores-table {
    table-layout: fixed;
    width: 100%;
}

.scores-table th,
.scores-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scores-table .col-event    { width: 30%; }
.scores-table .col-date     { width: 13%; }
.scores-table .col-course   { width: 27%; }
.scores-table .col-gross,
.scores-table .col-net,
.scores-table .col-position { width: 10%; }

/* On a phone the six columns squeezed to "D…", "G…" (#39): keep them readable and let the table scroll sideways inside
   its .table-responsive, as list tables do (tables.css). */
@media (max-width: 991.98px) {
    .scores-table {
        min-width: 40rem;
    }
}

/* League Standings' pinned name keeps the row's colour as the other columns scroll under it (the "You" row is green). */
#standingsTable .list-sticky-name { background-color: #fff; }
#standingsTable thead .list-sticky-name { background-color: #f8f9fa; }
#standingsTable tr.table-success .list-sticky-name { background-color: #d1e7dd; }

/* Scores table — tabular numerals + podium positions */
.scores-table td .badge,
.scores-table .score-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.pos-badge--1 { background-color: #F5EAD0 !important; color: var(--scorecard-gold) !important; border: 1px solid #E3D3A6; }
.pos-badge--2 { background-color: var(--color-gray-200) !important; color: #495057 !important; border: 1px solid var(--color-gray-300); }
.pos-badge--3 { background-color: #EFE0D1 !important; color: #8C5A2B !important; border: 1px solid #E0C9B2; }

/* Chart.js needs a sized parent once maintainAspectRatio is off */
.trend-chart-wrap {
    position: relative;
    height: 320px;
}

/* Chart.js needs a sized parent once maintainAspectRatio is off — same rule as .trend-chart-wrap,
   shorter because a donut has no time axis to stretch. */
.donut-chart-wrap {
    position: relative;
    height: 260px;
}

/* Score-distribution legend. This is a table view, not decoration: eight ordered colour classes is
   past what a donut carries by colour alone, so label + count + percent are always readable. */
.dist-legend {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dist-legend li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.dist-legend li:last-child {
    border-bottom: 0;
}

.dist-swatch {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
}

.dist-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dist-count,
.dist-pct {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.dist-count {
    margin-left: auto;
    font-weight: 600;
}

.dist-pct {
    color: var(--color-gray-600);
    min-width: 3.5em;
    text-align: right;
}

/* ============================================
   My Profile — bag tag
   The read-only summary at the top of /Portal/Profile, drawn as the tag a club
   member hangs on their golf bag: pine leather, a brass-ringed punch hole and a
   faint stitched edge. It is the page's only decorative element.
   ============================================ */

.bag-tag {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.5rem;
    padding: 1rem 1.75rem 1rem 5rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--color-primary-dark);
    outline: 1px dashed rgba(255, 255, 255, 0.28);
    outline-offset: -8px;
}

.bag-tag__hole {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.75rem;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #B08D3C;
}

.bag-tag__who {
    min-width: 0;
}

.bag-tag__name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.bag-tag__email {
    margin: 0.15rem 0 0.35rem;
    opacity: 0.8;
    overflow-wrap: anywhere;
}

.bag-tag__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.85rem;
}

    .bag-tag__status::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: #7CD992;
    }

.bag-tag__status--inactive::before {
    background: #F5A3A3;
}

.bag-tag__figures {
    display: flex;
    gap: 2.5rem;
    margin: 0 0 0 auto;
}

/* column-reverse puts the value (dd) first; flex-end packs it at the top, so every value sits on one
   line even when a label below it runs to two lines (Handicap Index + its update date). */
.bag-tag__figure {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

    .bag-tag__figure dd {
        margin: 0;
        font-size: 2rem;
        font-weight: 600;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .bag-tag__figure dt {
        margin-top: 0.35rem;
        font-size: 0.8rem;
        font-weight: 400;
        opacity: 0.8;
    }

.bag-tag__note {
    display: block;
    font-size: 0.75rem;
    opacity: 0.85;
}

.profile-section + .profile-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-300);
}

@media (max-width: 575.98px) {
    .bag-tag {
        padding: 1.25rem 1.25rem 1.25rem 3.75rem;
    }

    /* A taller, stacked tag: keep the hole level with the name, not halfway down. */
    .bag-tag__hole {
        left: 1.1rem;
        top: 1.6rem;
        margin-top: 0;
    }

    .bag-tag__email {
        font-size: 0.875rem;
    }

    .bag-tag__figures {
        margin-left: 0;
        gap: 1.75rem;
    }

    .bag-tag__figure dd {
        font-size: 1.6rem;
    }
}

/* 5-utilities/helpers.css */
/* ============================================
   UTILITY HELPERS
   ============================================
   Utility classes and helpers
   ============================================ */

/* Alert Styles */
.compact-alert {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.compact-alert .btn-close {
    padding: 0.5rem;
}

/* Copy Button */
.copy-btn {
    opacity: 0;
    transition: opacity var(--transition-base, 0.2s ease);
}

.code-wrapper:hover .copy-btn {
    opacity: 1;
}

/* reCAPTCHA Badge Positioning */
.grecaptcha-badge {
    bottom: 80px !important;
    z-index: 9999 !important;
}

/* On narrow viewports, page content (hero copy, benefit lists) pushes forms
   further down before the fold, so the default offset above isn't enough
   clearance — e.g. it lands on top of the Demo page's first input. Lift it
   further and shrink it slightly on small screens rather than reserving
   that much space on every viewport. */
@media (max-width: 575.98px) {
    .grecaptcha-badge {
        bottom: 160px !important;
        transform: scale(0.85);
        transform-origin: bottom right;
    }
}

/* Spacing Helpers */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

/* Text Alignment */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }

/* Float Helpers */
.float-end { float: right !important; }
.float-start { float: left !important; }


/* Horizontal Validation */
.horizontal-validation ul {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping if there are many errors */
    list-style-type: none; /* Removes default bullets */
    padding: 0;
    margin: 0;
    gap: 15px; /* Adds space between error messages */
}

    .horizontal-validation ul li {
        display: inline;
    }