/* ============================================================
   Colour palette & Bootstrap overrides
   ============================================================ */
:root {
    --srm-navy:        #1a3a5c;
    --srm-navy-dark:   #112640;
    --srm-navy-light:  #2a5280;
    --srm-gold:        #c8971a;
    --srm-gold-light:  #e8b84b;
    --srm-bg:          #f4f7fb;
    --srm-bg-card:     #ffffff;
    --srm-text:        #1a2636;
    --srm-text-muted:  #5a6f85;
    --srm-border:      #ccd8e8;

    /* Bootstrap 5 CSS-variable overrides */
    --bs-primary:          var(--srm-navy);
    --bs-primary-rgb:      26, 58, 92;
    --bs-body-bg:          var(--srm-bg);
    --bs-body-color:       var(--srm-text);
    --bs-body-font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    --bs-font-monospace:   'DM Mono', ui-monospace, 'Cascadia Code', monospace;
    --bs-border-color:     var(--srm-border);
    --bs-link-color:       var(--srm-navy);
    --bs-link-hover-color: var(--srm-navy-light);
}

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

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

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

body {
    margin-bottom: 60px;
    font-family: var(--bs-body-font-family);
    color: var(--srm-text);
    background-color: var(--srm-bg);
}

/* Monospace: times, numbers, codes */
code, kbd, pre, samp,
.stopwatch-input,
.time-mono {
    font-family: var(--bs-font-monospace);
}

/* ============================================================
   Skip to main content (WCAG 2.1 AA)
   ============================================================ */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 0.5rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--srm-navy);
    color: #fff;
    border-radius: 0 0 0.25rem 0.25rem;
    text-decoration: none;
    font-weight: 600;
}
.skip-to-main:focus {
    top: 0;
    outline: 3px solid var(--srm-gold);
    outline-offset: 2px;
}

/* ============================================================
   Focus rings
   ============================================================ */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(26, 58, 92, 0.45);
}

/* ============================================================
   Navbar
   ============================================================ */
.srm-navbar {
    background-color: var(--srm-navy) !important;
    border-bottom: 3px solid var(--srm-gold) !important;
}

.srm-navbar .navbar-brand {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.srm-navbar .navbar-brand:hover {
    color: var(--srm-gold-light);
}

.srm-navbar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.srm-navbar .nav-link:hover,
.srm-navbar .nav-link:focus {
    color: var(--srm-gold-light);
}

.srm-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.srm-navbar .btn-link {
    color: rgba(255, 255, 255, 0.85);
}

.srm-navbar .btn-link:hover,
.srm-navbar .btn-link:focus {
    color: var(--srm-gold-light);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    background-color: var(--srm-navy-dark);
    border-top: 3px solid var(--srm-gold) !important;
    color: rgba(255, 255, 255, 0.65);
}

.footer a {
    color: var(--srm-gold-light);
}

.footer a:hover {
    color: #fff;
}

/* ============================================================
   Buttons: primary
   ============================================================ */
.btn-primary {
    --bs-btn-bg:               var(--srm-navy);
    --bs-btn-border-color:     var(--srm-navy);
    --bs-btn-hover-bg:         var(--srm-navy-dark);
    --bs-btn-hover-border-color: var(--srm-navy-dark);
    --bs-btn-active-bg:        var(--srm-navy-dark);
    --bs-btn-active-border-color: var(--srm-navy-dark);
    --bs-btn-focus-shadow-rgb: 26, 58, 92;
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color:             var(--srm-navy);
    --bs-btn-border-color:      var(--srm-navy);
    --bs-btn-hover-bg:          var(--srm-navy);
    --bs-btn-hover-border-color: var(--srm-navy);
    --bs-btn-active-bg:         var(--srm-navy-dark);
    --bs-btn-active-border-color: var(--srm-navy-dark);
}

/* ============================================================
   Tables
   ============================================================ */
.table-dark {
    --bs-table-bg:         var(--srm-navy);
    --bs-table-color:      #fff;
    --bs-table-border-color: var(--srm-navy-light);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    border-color: var(--srm-border);
    background-color: var(--srm-bg-card);
}

.card-header {
    background-color: rgba(26, 58, 92, 0.06);
    border-bottom-color: var(--srm-border);
}

/* ============================================================
   Global typography & hierarchy
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--srm-navy);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.85rem; margin-bottom: 1rem; }
h2 { font-size: 1.45rem; margin-bottom: 0.85rem; }
h3 { font-size: 1.2rem;  margin-bottom: 0.7rem; }
h4 { font-size: 1.05rem; margin-bottom: 0.6rem; }

a {
    color: var(--srm-navy-light);
    text-decoration: none;
}

a:hover {
    color: var(--srm-navy);
    text-decoration: underline;
}

/* ============================================================
   Tables (global)
   ============================================================ */
.table {
    --bs-table-striped-bg: rgba(26, 58, 92, 0.035);
    --bs-table-hover-bg:   rgba(26, 58, 92, 0.07);
    border-color: var(--srm-border);
    font-size: 0.93rem;
}

.table th {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.table-dark th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    border-left-width: 4px;
    border-radius: 0.4rem;
}

/* ============================================================
   Cards (global)
   ============================================================ */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(26, 58, 92, 0.08);
}

/* ============================================================
   Responsive sidebar
   ============================================================ */

/* Backdrop overlay */
.srm-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.srm-nav-overlay.srm-overlay-active {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar header row — always hidden on desktop, shown on mobile via media query */
.srm-sidebar-head {
    display: none;
}

@media (max-width: 991.98px) {
    /* Override Bootstrap's navbar-collapse to become a slide-in sidebar */
    .srm-navbar .navbar-collapse {
        display: flex !important;           /* stay in DOM; don't let Bootstrap use display:none */
        position: fixed !important;
        inset: 0 auto 0 0;                 /* top right bottom left */
        width: 270px;
        height: 100dvh !important;
        overflow-y: auto;
        flex-direction: column !important;
        align-items: flex-start !important;
        background: var(--srm-navy-dark);
        z-index: 1045;
        padding: 0;
        /* Hidden: slid off-screen */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.28s;
    }

    .srm-navbar .navbar-collapse.srm-sidebar-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s;
    }

    /* Sidebar header */
    .srm-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.9rem 1.25rem;
        background: var(--srm-navy);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
    }

    .srm-sidebar-head-brand {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    /* Nav links in sidebar */
    .srm-navbar .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        padding: 0.5rem 0;
    }

    .srm-navbar .navbar-collapse .nav-link {
        padding: 0.65rem 1.25rem;
        border-radius: 0.375rem;
        margin: 0.1rem 0.75rem;
        width: calc(100% - 1.5rem);
    }

    .srm-navbar .navbar-collapse .nav-link:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }
}

/* ============================================================
   Rendered markdown (home page README)
   ============================================================ */
.srm-readme {
    max-width: 860px;
    margin: 1.5rem auto;
}

.srm-readme .card-body {
    padding: 2rem 2.25rem;
}

.srm-readme h1 {
    font-size: 2rem;
    border-bottom: 2px solid var(--srm-gold);
    padding-bottom: 0.4rem;
    margin-bottom: 1.25rem;
}

.srm-readme h2 {
    font-size: 1.3rem;
    border-bottom: 1px solid var(--srm-border);
    padding-bottom: 0.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.srm-readme h3 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
    color: var(--srm-navy-light);
}

.srm-readme p {
    line-height: 1.75;
    color: var(--srm-text);
    margin-bottom: 0.75rem;
}

.srm-readme ul, .srm-readme ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.srm-readme li {
    line-height: 1.7;
    margin-bottom: 0.2rem;
}

.srm-readme code {
    background: rgba(26, 58, 92, 0.07);
    border-radius: 0.25rem;
    padding: 0.1em 0.35em;
    font-size: 0.88em;
    color: var(--srm-navy);
}

.srm-readme pre {
    background: var(--srm-navy-dark);
    color: #e8f0f8;
    border-radius: 0.45rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.87rem;
}

.srm-readme pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.srm-readme blockquote {
    border-left: 3px solid var(--srm-gold);
    padding-left: 1rem;
    color: var(--srm-text-muted);
    margin: 1rem 0;
}

.srm-readme hr {
    border-color: var(--srm-border);
    margin: 1.5rem 0;
}

/* ============================================================
   Enrollment chips
   ============================================================ */
.enrollment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: flex-start;
}

.enrollment-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 10rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #b6d4fe;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #f8fbff 0%, #e7f1ff 100%);
    color: #0a2540;
    line-height: 1.15;
}

.enrollment-chip:hover {
    border-color: #7caef0;
    background: linear-gradient(180deg, #eef6ff 0%, #deecff 100%);
    color: #0a2540;
}

.enrollment-chip-season {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #24538a;
}

.enrollment-chip-series {
    font-size: 0.84rem;
    font-weight: 600;
    color: #102a43;
}

.enrollment-more {
    display: inline-block;
}

.enrollment-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #8ea6c1;
    background-color: #f1f5f9;
    color: #1e3a5f;
    font-size: 0.75rem;
    font-weight: 700;
}

.enrollment-more > summary::-webkit-details-marker {
    display: none;
}

/* ============================================================
   Season handicap chips
   ============================================================ */
.season-handicap-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: flex-start;
}

.season-handicap-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 9rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #c6e4d8;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #f7fcf9 0%, #e6f4ec 100%);
    color: #0f2f24;
    line-height: 1.15;
}

.season-handicap-chip:hover {
    border-color: #9fceb9;
    background: linear-gradient(180deg, #effaf4 0%, #ddf1e6 100%);
    color: #0f2f24;
}

.season-handicap-chip-season {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2b6a53;
}

.season-handicap-chip-value {
    font-size: 0.84rem;
    font-weight: 600;
    color: #173a2d;
}

/* ============================================================
   Active nav link
   ============================================================ */
.srm-navbar .nav-link.active {
    color: #fff !important;
    background-color: rgba(200, 151, 26, 0.2);
    border-radius: 0.375rem;
}

/* ============================================================
   Page header
   ============================================================ */
.srm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--srm-border);
}

.srm-page-header h1,
.srm-page-header h2 {
    margin-bottom: 0;
}

.srm-page-header-sub {
    color: var(--srm-text-muted);
    font-size: 0.88rem;
    margin-top: 0.2rem;
    font-weight: 400;
}

/* ============================================================
   Status badges
   ============================================================ */
.srm-status {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.srm-status-planned   { background: #e0eaff; color: #1a3a5c; border-color: #b6c8f0; }
.srm-status-sailed    { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.srm-status-abandoned { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.srm-status-postponed { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.srm-status-cancelled { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.srm-status-verified  { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.srm-status-draft     { background: #fef9c3; color: #713f12; border-color: #fde047; }

/* ============================================================
   Sort links in table headers
   ============================================================ */
.table th a,
.table th a.srm-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--srm-navy);
}

.table th a:hover,
.table th a.srm-sort-link:hover {
    color: var(--srm-navy-light);
    text-decoration: none;
}

.table-dark th a,
.table-dark th a.srm-sort-link {
    color: rgba(255, 255, 255, 0.85);
}

.table-dark th a:hover,
.table-dark th a.srm-sort-link:hover {
    color: var(--srm-gold-light);
}

.srm-sort-icon {
    font-size: 0.72rem;
    opacity: 0.45;
}

.srm-sort-icon.srm-sort-active {
    opacity: 1;
    color: var(--srm-gold);
}

.table-dark .srm-sort-icon.srm-sort-active {
    color: var(--srm-gold-light);
}

/* ============================================================
   Race report — pinned card (home page)
   ============================================================ */
.srm-report-pin {
    border-color: var(--srm-border);
    box-shadow: 0 2px 8px rgba(26, 58, 92, 0.1);
    border-top: 3px solid var(--srm-gold);
}

.srm-report-pin-photo {
    overflow: hidden;
    max-height: 280px;
    border-radius: 0.5rem 0 0 0.5rem;
}

.srm-report-pin-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.srm-report-pin-body {
    padding: 1.5rem;
}

.srm-report-pin-meta {
    font-size: 0.8rem;
}

.srm-report-pin-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--srm-navy);
}

.srm-report-pin-title a {
    color: inherit;
    text-decoration: none;
}

.srm-report-pin-title a:hover {
    color: var(--srm-navy-light);
    text-decoration: underline;
}

.srm-report-pin-excerpt {
    font-size: 0.93rem;
    line-height: 1.6;
}

/* ============================================================
   Race report — archive card (index page)
   ============================================================ */
.srm-report-card {
    border-color: var(--srm-border);
    transition: box-shadow 0.15s ease;
}

.srm-report-card:hover {
    box-shadow: 0 2px 8px rgba(26, 58, 92, 0.12);
}

.srm-report-card-photo {
    overflow: hidden;
    max-height: 180px;
    border-radius: 0.5rem 0 0 0.5rem;
}

.srm-report-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Race report — detail photo grid
   ============================================================ */
.srm-report-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.srm-report-photo-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 0.45rem;
    border: 1px solid var(--srm-border);
    display: block;
    transition: opacity 0.15s;
}

.srm-report-photo-item img:hover {
    opacity: 0.88;
}

.srm-report-photo-caption {
    font-size: 0.78rem;
    color: var(--srm-text-muted);
    margin-top: 0.3rem;
    margin-bottom: 0;
    text-align: center;
}

/* ============================================================
   Race report — create form editor
   ============================================================ */
.srm-report-editor {
    font-family: var(--bs-font-monospace);
    font-size: 0.9rem;
    resize: vertical;
}

/* ============================================================
   Dashed empty-state border
   ============================================================ */
.border-dashed {
    border-style: dashed !important;
    border-color: var(--srm-border) !important;
}

/* ============================================================
   Standings — podium + bar list
   ============================================================ */
.srm-podium-gold  { background-color: rgba(255, 215,   0, 0.12); }
.srm-podium-silver{ background-color: rgba(192, 192, 192, 0.18); }
.srm-podium-bronze{ background-color: rgba(205, 127,  50, 0.13); }
.srm-podium-medal { font-size: 1.35rem; line-height: 1; }
.srm-podium-row   { border-left: 3px solid transparent; }
.srm-podium-row.gold   { border-left-color: #ffc107; }
.srm-podium-row.silver { border-left-color: #adb5bd; }
.srm-podium-row.bronze { border-left-color: #cd7f32; }
.srm-bar-row      { font-size: 0.875rem; }
.srm-bar-row .progress { height: 5px; border-radius: 2px; }
.srm-standings-pos { width: 2rem; text-align: right; flex-shrink: 0; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

/* ============================================================
   Standings — collapsible group chevron
   ============================================================ */
.srm-collapse-icon {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
[aria-expanded="true"] .srm-collapse-icon {
    transform: rotate(180deg);
}