/**
 * EventOps v1 — Global Stylesheet
 * Design: Tablet-first, landscape primary, high contrast for sunlight.
 * Theme: Dark (#1e2a38).
 */

/* ─── CSS Reset ──────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Design Tokens ──────────────────────────────────── */
:root {
    /* Colors */
    --color-bg: #1e2a38;
    --color-bg-light: #263545;
    --color-bg-card: #2d3f52;
    --color-surface: #344a60;
    --color-border: #3d566e;
    --color-text: #e8edf2;
    --color-text-muted: #8fa3b8;
    --color-primary: #4f9cf7;
    --color-primary-hover: #3a8ae0;
    --color-success: #34c759;
    --color-warning: #ff9f0a;
    --color-error: #ff453a;
    --color-info: #64d2ff;
    /* Helper / footnote text on dark modal headers & bodies (Bootstrap + legacy popups) */
    --color-modal-note: #b8cad8;
    --color-modal-note-emphasis: #dce6ef;
    --color-modal-danger-text: #ffb4a8;
    /* Readable text on white/light card surfaces */
    --color-text-on-light: #1a1a1a;
    --color-text-muted-on-light: #5a6570;

    /* Admin modal light theme (app-shell) */
    --modal-bg: #ffffff;
    --modal-bg-subtle: #f8fafc;
    --modal-text: #1e2a38;
    --modal-text-muted: #64748b;
    --modal-border: #dbe3ef;
    --modal-input-bg: #ffffff;
    --modal-input-border: #ced4da;
    --modal-input-placeholder: #6c757d;
    --modal-backdrop: rgba(0, 0, 0, 0.6);

    /* Status colors */
    --status-ready: #ff9f0a;
    --status-started: #4f9cf7;
    --status-finished: #34c759;
    --status-locked: #8e8e93;

    /* Connection status */
    --conn-online: #34c759;
    --conn-offline: #8e8e93;
    --conn-syncing: #4f9cf7;
    --conn-error: #ff453a;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    /* Layout */
    --sidebar-width: 260px;
    --top-bar-height: 64px;
    --touch-target: 70px;
    --border-radius: 8px;
    --border-radius-sm: 4px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* ─── Base ───────────────────────────────────────────── */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-hover);
}

/* ─── Major headings: max 2 lines, then ellipsis ───────── */
h1, h2, h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
    word-break: break-word;
}

/* Allow override when heading must show full content */
h1.heading-full, h2.heading-full, h3.heading-full {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    text-overflow: unset;
}

/* ─── App Shell Layout ───────────────────────────────── */
.app-shell {
    --eventops-table-row-hover-bg: #e9ecef;
    --app-table-row-even: #ffffff;
    --app-table-row-odd: #f1f3f5;
    --eventops-membership-row-warning-bg: #fce8e8;
    --eventops-membership-row-warning-hover-bg: #f8d4d4;
    display: grid;
    grid-template-areas:
        "topbar topbar"
        "sidebar main";
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--top-bar-height) 1fr;
    min-height: 100vh;
}

/* ─── Top Bar ────────────────────────────────────────── */
.top-bar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    padding: 0.35rem var(--space-lg);
    min-height: var(--top-bar-height);
    height: auto;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: var(--space-sm);
}

.top-bar__left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
    min-width: 0;
}

.top-bar__logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.top-bar__version {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--color-text-muted);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    user-select: text;
}

.top-bar__club {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

.top-bar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
}

.top-bar__active-event-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
    padding: 0.32rem 0.7rem 0.32rem 0.85rem;
    background: var(--color-bg-card);
    border: 2px solid var(--color-warning);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    max-width: min(100%, 40rem);
    min-width: 0;
    min-height: 2.25rem;
}

.top-bar__active-event-pill-label {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    line-height: 1.2;
    white-space: nowrap;
}

.top-bar__active-event-pill-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.top-bar__active-event-pill-value--none {
    color: var(--color-warning);
    font-style: italic;
    font-weight: 600;
}

.top-bar__active-event-pill-value--name {
    font-weight: 600;
}

.top-bar__active-event-pill-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    flex-shrink: 0;
}

.top-bar__active-event-pill-btn {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.25;
}

.top-bar__active-event-pill-actions .btn-primary {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #1a1a1a;
}

.top-bar__active-event-pill-actions .btn-primary:hover {
    background: #e68f00;
    border-color: #e68f00;
    color: #1a1a1a;
}

.top-bar__active-event-pill-actions .btn-outline-light {
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.35);
}

.top-bar__active-event-pill-actions .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.5);
}

.top-bar__active-event-pill-actions .btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.top-bar__active-event-pill-actions .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .top-bar__active-event-pill {
        flex-wrap: wrap;
        padding: 0.35rem 0.55rem;
        gap: 0.45rem;
        border-radius: 12px;
        max-width: 100%;
    }

    .top-bar__active-event-pill-value {
        flex: 1 1 100%;
        font-size: 0.82rem;
    }

    .top-bar__active-event-pill-actions {
        margin-left: auto;
    }

    .top-bar__active-event-pill-btn {
        padding: 0.26rem 0.55rem;
        font-size: 0.68rem;
    }
}

/* Legacy aliases kept for any stale references */
.top-bar__active-event {
    display: contents;
}

#globalEventSelectModal .selected-event-picker__clear-row {
    border-color: var(--color-border) !important;
}

#globalEventSelectModal .btn-outline-secondary {
    color: var(--color-text);
    border-color: var(--color-border);
}

#globalEventSelectModal .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.top-bar__event-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.15em;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.top-bar__event {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-bar__event-sep {
    flex-shrink: 0;
}

.top-bar__date {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10em;
}

.top-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Hamburger: visible only on narrow (d-lg-none in markup) */
.top-bar__toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 -0.5rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--border-radius);
}
.top-bar__toggler:hover {
    background: var(--color-surface);
    color: var(--color-text);
}
.top-bar__toggler-icon {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}

/* Small status indicator (dot) */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot--online { background: var(--conn-online); }
.status-dot--offline { background: var(--conn-offline); }

/* User menu button (icon + optional name) */
.top-bar__user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    cursor: pointer;
    min-height: 38px;
}
.top-bar__user-btn:hover {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
.top-bar__user-icon {
    flex-shrink: 0;
}
.top-bar__user-btn::after {
    display: none; /* icon is enough; no caret */
}
.top-bar__user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-bar__user-menu.dropdown-menu {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 0.25rem 0;
    min-width: 200px;
}
.top-bar__user-menu .dropdown-item {
    color: var(--color-text);
}
.top-bar__user-menu .dropdown-item:hover {
    background: var(--color-surface);
    color: var(--color-text);
}
.top-bar__user-menu .dropdown-header {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.top-bar__user-menu .dropdown-divider {
    border-color: var(--color-border);
}
.top-bar__user-menu .text-danger {
    color: var(--color-error) !important;
}

/* Mobile nav offcanvas: match app dark theme */
.app-nav-offcanvas.offcanvas {
    background: var(--color-bg-light);
    color: var(--color-text);
}
.app-nav-offcanvas .offcanvas-header {
    border-color: var(--color-border) !important;
}
.app-nav-offcanvas .btn-close-white {
    filter: invert(1) grayscale(1) brightness(2);
}
#appNavOffcanvasBody .sidebar__nav--offcanvas {
    list-style: none;
    padding: 0;
    margin: 0;
}
#appNavOffcanvasBody .sidebar__nav--offcanvas li a {
    display: block;
    padding: var(--space-md) var(--space-lg);
    color: var(--color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    min-height: 44px;
    line-height: 1.35;
}
#appNavOffcanvasBody .sidebar__nav--offcanvas li a:hover,
#appNavOffcanvasBody .sidebar__nav--offcanvas li.active a {
    background: var(--color-surface);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}
#appNavOffcanvasBody .sidebar__nav--offcanvas .sidebar__subnav {
    list-style: none;
    padding-left: 0;
}
#appNavOffcanvasBody .sidebar__nav--offcanvas .sidebar__subnav li a {
    padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-xl);
    font-size: var(--font-size-sm);
    min-height: 44px;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    border-left: 3px solid transparent;
}
#appNavOffcanvasBody .sidebar__nav--offcanvas .sidebar__subnav li.active a {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* ─── Status Badge (legacy, kept for any other use) ────── */
.status-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge--online {
    background: var(--conn-online);
    color: #fff;
}

.status-badge--offline {
    background: var(--conn-offline);
    color: #fff;
}

.status-badge--syncing {
    background: var(--conn-syncing);
    color: #fff;
}

.status-badge--error {
    background: var(--conn-error);
    color: #fff;
}

.status-badge--ready {
    background: var(--status-ready);
    color: #000;
}

.status-badge--started {
    background: var(--status-started);
    color: #fff;
}

.status-badge--finished {
    background: var(--status-finished);
    color: #fff;
}

.status-badge--locked {
    background: var(--status-locked);
    color: #fff;
}

/* ─── Sidebar ────────────────────────────────────────── */
.sidebar {
    grid-area: sidebar;
    background: var(--color-bg-light);
    border-right: 1px solid var(--color-border);
    padding: var(--space-md) 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
}

.sidebar__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar__nav > li {
    position: relative;
}

.sidebar__nav li a {
    display: block;
    padding: var(--space-md) var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: 1.35;
    transition: all var(--transition-fast);
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    min-height: 44px;
    border-left: 3px solid transparent;
}

.sidebar__nav li a:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

.sidebar__nav li.active a {
    background: var(--color-surface);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* Parent item when a child is active: emphasize text and border only (no filled background) */
.sidebar__nav li.active-parent > a {
    background: transparent;
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* Desktop sidebar flyout submenus (e.g. Club Management) */
.sidebar .sidebar__subnav {
    display: none;
    position: static;
    min-width: 0;
    list-style: none;
    padding: 0.2rem 0 0.35rem 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: auto;
}

.sidebar .sidebar__nav > li:hover > .sidebar__subnav,
.sidebar .sidebar__nav > li:focus-within > .sidebar__subnav,
.sidebar .sidebar__nav > li.active-parent > .sidebar__subnav,
.sidebar .sidebar__nav > li.active > .sidebar__subnav,
.sidebar .sidebar__nav > li.open > .sidebar__subnav {
    display: block;
}

.sidebar__submenu-toggle::after {
    content: " ▸";
    font-size: 0.85em;
}

.sidebar__nav > li.open > .sidebar__submenu-toggle::after,
.sidebar__nav > li:hover > .sidebar__submenu-toggle::after,
.sidebar__nav > li:focus-within > .sidebar__submenu-toggle::after {
    content: " ▾";
}

.sidebar .sidebar__subnav li a {
    padding: 0.55rem var(--space-lg) 0.55rem calc(var(--space-lg) + 1rem);
    font-size: var(--font-size-sm);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    min-height: 44px;
    border-left: none;
    color: var(--color-text-muted);
}

.sidebar .sidebar__subnav li a:hover,
.sidebar .sidebar__subnav li.active a {
    background: var(--color-surface);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* Nested group inside Club admin (Bracelets & readers) — inline, not flyout */
.sidebar .sidebar__subnav li.has-submenu > .sidebar__subnav--nested {
    position: static;
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 0.1rem 0 0.35rem 0.5rem;
    min-width: 0;
    width: auto;
}
.sidebar .sidebar__submenu-toggle--nested {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    pointer-events: none;
    cursor: default;
    padding-top: 0.45rem;
    padding-bottom: 0.15rem;
}
.sidebar .sidebar__subnav--nested li a {
    font-size: 0.875rem;
}
#appNavOffcanvasBody .sidebar__nav--offcanvas .sidebar__subnav .sidebar__subnav--nested {
    position: static;
    display: block !important;
    padding-left: 0.75rem;
}

.sidebar .sidebar__subnav li .sidebar__link--disabled,
.sidebar .sidebar__subnav li a.sidebar__link--disabled {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem var(--space-lg) 0.45rem calc(var(--space-lg) + 1rem);
    font-size: var(--font-size-sm);
    line-height: 1.35;
    color: var(--color-text-muted);
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: none;
}

.sidebar__link-lock {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.7;
    line-height: 0;
}

.sidebar__group--locked > .sidebar__submenu-toggle.sidebar__group-label--locked {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--color-text-muted);
}

.sidebar__subnav-hint {
    list-style: none;
}

.sidebar__subnav-hint-text {
    display: block;
    padding: 0.35rem var(--space-lg) 0.5rem calc(var(--space-lg) + 1rem);
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-text-muted);
    font-style: italic;
}

.sidebar__subnav-context {
    list-style: none;
    padding: 0.15rem var(--space-lg) 0.4rem calc(var(--space-lg) + 1rem);
    margin-bottom: 0.15rem;
    border-left: 3px solid var(--color-primary);
}

.sidebar__subnav-context-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.sidebar__subnav-context-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#appNavOffcanvasBody .sidebar__nav--offcanvas .sidebar__link--disabled {
    display: block;
    padding: 0.65rem var(--space-lg);
    color: var(--color-text-muted);
    opacity: 0.55;
    cursor: not-allowed;
}

#globalEventSelectModal .modal-content {
    background: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--modal-text);
}

#globalEventSelectModal .modal-header {
    background: var(--modal-bg);
    border-bottom-color: var(--modal-border);
}

#globalEventSelectModal .modal-title {
    color: var(--modal-text);
}

#globalEventSelectModal .modal-body {
    color: var(--modal-text);
    background: var(--modal-bg);
}

#globalEventSelectModal .selected-event-picker__select {
    background: var(--modal-input-bg);
    border-color: var(--modal-input-border);
    color: var(--modal-text);
}

.dashboard-meta__value--muted {
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Offcanvas keeps submenu inline for touch devices */
#appNavOffcanvasBody .sidebar__nav--offcanvas .sidebar__subnav {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* ─── Main Content ───────────────────────────────────── */
.main-content {
    grid-area: main;
    /* Less top padding so page headings sit closer to top bar */
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    overflow-y: auto;
    overflow-x: auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

/* ─── Admin Menu ─────────────────────────────────────── */
.admin-menu {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.admin-menu__name {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.admin-menu__logout {
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* Buttons: use Bootstrap .btn utilities (bootstrap.min.css loads before this file). */

/* ─── Form Elements ──────────────────────────────────── */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Autocomplete: wrap so dropdown sits directly under the input */
.autocomplete-wrap {
    position: relative;
}

.autocomplete-wrap > .autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    z-index: 30;
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Popup autocomplete list items must be readable/clickable on light dropdowns. */
.autocomplete-list .autocomplete-item {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.autocomplete-list .autocomplete-item:first-child {
    border-top: 0;
}

.autocomplete-list .autocomplete-item:hover,
.autocomplete-list .autocomplete-item:focus {
    background: var(--color-bg-light);
    color: var(--color-text);
    outline: none;
}

.text-input,
.select-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    min-height: 44px;
}

.text-input:focus,
.select-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(79, 156, 247, 0.2);
}

/* ─── Alerts ─────────────────────────────────────────── */
.alert {
    padding: var(--space-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-md);
}

.alert-error {
    background: rgba(255, 69, 58, 0.15);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-success {
    background: rgba(52, 199, 89, 0.15);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-info {
    background: rgba(100, 210, 255, 0.15);
    border: 1px solid var(--color-info);
    color: var(--color-info);
}

/* ─── Legacy modal (only when no Bootstrap .modal-dialog) ─── */
.modal:not(:has(.modal-dialog)) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above Bootstrap .sticky-lg-top (~1020) so the overlay actually covers the page; was 200 and
       clicks hit “Event Fleets” / sidebar. Below toasts (12000) and premium modals (50000). */
    z-index: 2000;
    /* Bootstrap’s .modal uses pointer-events: none so only .modal-dialog receives hits; we have no
       .modal-dialog, so clicks passed through to the page — restore capture on the full-screen overlay. */
    pointer-events: auto;
}

.modal:not(:has(.modal-dialog)) .modal-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    justify-content: flex-end;
}

/* ─── Admin modals: global light theme (app-shell) ─── */
body.app-shell .modal:not(:has(.modal-dialog)) .modal-content,
body.app-shell .modal .modal-dialog .modal-content,
body.app-shell .modal .modal-content {
    background: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--modal-text);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
}

body.app-shell .modal .modal-header {
    background: var(--modal-bg);
    border-bottom-color: var(--modal-border);
    color: var(--modal-text);
}

body.app-shell .modal .modal-title {
    color: var(--modal-text);
}

body.app-shell .modal .modal-body {
    background: var(--modal-bg);
    color: var(--modal-text);
}

body.app-shell .modal .modal-footer {
    background: var(--modal-bg-subtle);
    border-top-color: var(--modal-border);
}

body.app-shell .modal .modal-content h1,
body.app-shell .modal .modal-content h2,
body.app-shell .modal .modal-content h3,
body.app-shell .modal .modal-content h4,
body.app-shell .modal .modal-content h5,
body.app-shell .modal .modal-content h6,
body.app-shell .modal .modal-content .fw-semibold,
body.app-shell .modal .modal-content .form-check-label,
body.app-shell .modal .modal-content .form-label:not(.text-muted) {
    color: var(--modal-text) !important;
}

body.app-shell .modal .form-text,
body.app-shell .modal .modal-body .form-text,
body.app-shell .modal .modal-content .text-muted,
body.app-shell .modal .modal-content .text-body-secondary,
body.app-shell .modal .modal-content > .text-muted,
body.app-shell .modal .modal-content > p.text-body-secondary,
body.app-shell .modal .modal-body .text-muted,
body.app-shell .modal .modal-body .text-body-secondary,
body.app-shell .modal .modal-body small.text-muted,
body.app-shell .modal .modal-body p.small:not(.text-white),
body.app-shell .modal .modal-footer .text-muted,
body.app-shell .modal .modal-footer .text-body-secondary,
body.app-shell .modal .modal-header .text-muted,
body.app-shell .modal .modal-header .text-body-secondary,
body.app-shell .modal .form-check-label.text-muted,
body.app-shell .modal .modal-content .form-label.text-muted,
body.app-shell .modal .modal-content .form-label.small.text-muted,
body.app-shell .modal .modal-content .small.text-muted:not(.form-check-label) {
    color: var(--modal-text-muted) !important;
}

body.app-shell .modal .modal-body .text-danger,
body.app-shell .modal .modal-body p.text-danger,
body.app-shell .modal .modal-body .text-danger.small,
body.app-shell .modal .modal-content .text-danger {
    color: #b91c1c !important;
}

body.app-shell .modal .modal-body .text-danger strong,
body.app-shell .modal .form-text strong {
    color: #991b1b;
}

body.app-shell .modal .alert.alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

body.app-shell .modal .alert.alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

body.app-shell .modal .alert.alert-danger strong {
    color: #991b1b;
}

body.app-shell .modal .alert.alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

body.app-shell .modal .alert.alert-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

body.app-shell .modal .alert.alert-secondary {
    background: var(--modal-bg-subtle);
    border-color: var(--modal-border);
    color: var(--modal-text-muted);
}

body.app-shell .modal .modal-content .border.rounded,
body.app-shell .modal .modal-content .border.rounded.p-2,
body.app-shell .modal .modal-content .border.rounded.p-3 {
    background: var(--modal-bg-subtle);
    border-color: var(--modal-border) !important;
}

body.app-shell .modal .form-control,
body.app-shell .modal .form-select,
body.app-shell .modal .input-group-text {
    background-color: var(--modal-input-bg) !important;
    border-color: var(--modal-input-border);
    color: var(--modal-text);
}

body.app-shell .modal .form-control::placeholder {
    color: var(--modal-input-placeholder);
}

body.app-shell .modal .form-control:focus,
body.app-shell .modal .form-select:focus {
    background-color: var(--modal-input-bg) !important;
    border-color: var(--color-primary);
    color: var(--modal-text);
    box-shadow: 0 0 0 0.2rem rgba(79, 156, 247, 0.25);
}

body.app-shell .modal .form-control:disabled,
body.app-shell .modal .form-select:disabled,
body.app-shell .modal .form-control.entries-modal-field-readonly,
body.app-shell .modal .form-control:read-only:not(:disabled) {
    background-color: var(--modal-bg-subtle) !important;
    color: var(--modal-text-muted);
    opacity: 1;
}

body.app-shell .modal .form-check-input {
    width: 1em;
    height: 1em;
    min-width: unset;
    min-height: unset;
    margin-top: 0.25em;
    background-color: var(--bs-form-check-bg, #fff);
    border-color: var(--modal-input-border);
}

body.app-shell .modal .form-check-input:checked {
    background-color: var(--bs-form-check-checked-bg-color, var(--bs-primary));
    border-color: var(--bs-form-check-checked-border-color, var(--bs-primary));
}

body.app-shell .modal .form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.app-shell .modal .form-switch .form-check-input {
    width: 2em;
    height: 1em;
    margin-top: 0.15em;
}

body.app-shell .modal .btn-close {
    filter: none;
    opacity: 0.55;
}

body.app-shell .modal .btn-close:hover,
body.app-shell .modal .btn-close:focus {
    opacity: 0.85;
}

body.app-shell .modal .btn-secondary {
    background: #fff;
    border-color: #cbd5e1;
    color: #475569;
}

body.app-shell .modal .btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}

body.app-shell .modal .btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

body.app-shell .modal .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

body.app-shell .modal .btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

body.app-shell .modal .btn-outline-primary {
    border-color: #2563eb;
    color: #2563eb;
}

body.app-shell .modal .btn-outline-primary:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

body.app-shell .modal .btn-outline-secondary {
    border-color: #cbd5e1;
    color: #475569;
}

body.app-shell .modal .btn-outline-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}

body.app-shell .modal .bg-light.text-dark,
body.app-shell .modal .club-fleet-picker-list {
    background: var(--modal-bg-subtle) !important;
    color: var(--modal-text) !important;
    border-color: var(--modal-border) !important;
}

body.app-shell .modal .list-group-item {
    background: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--modal-text);
}

body.app-shell .modal .list-group-item-action:hover,
body.app-shell .modal .list-group-item-action:focus {
    background: var(--modal-bg-subtle);
    color: var(--modal-text);
}

.app-shell .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.app-shell .btn-close:hover {
    opacity: 1;
}

.app-shell .form-label {
    color: var(--color-text);
}

.app-shell .form-control,
.app-shell .form-select {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.app-shell .form-control::placeholder {
    color: var(--color-text-muted);
}

.app-shell .form-control:focus,
.app-shell .form-select:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-text);
}

.app-shell .form-control:disabled,
.app-shell .form-select:disabled {
    background: var(--color-bg-light);
    color: var(--color-text-muted);
}

.app-shell .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    color: var(--color-text);
}

.app-shell .table-light {
    --bs-table-bg: var(--color-bg-light);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
}

.app-shell .table-light th {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-border);
}

.app-shell .table td,
.app-shell .table th {
    border-color: var(--color-border);
}

.app-shell .text-body-secondary,
.app-shell .text-muted {
    color: var(--color-text-muted) !important;
}

.app-shell .form-check-input {
    /* Slightly larger than Bootstrap default so the tick reads clearly; square box */
    width: 1.5em;
    height: 1.5em;
    min-width: 1.5em;
    min-height: 1.5em;
    margin-top: 0.125em;
    flex-shrink: 0;
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.app-shell .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.app-shell .form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 156, 247, 0.25);
}

/* Club list modal (Bootstrap modal-xl): table column widths and row styles only */
.club-list-modal .club-list-table {
    min-width: 520px;
    table-layout: auto;
}

.club-list-modal .club-list-th-cb {
    width: 2.5rem;
    min-width: 2.5rem;
}

.club-list-modal .club-list-table th.club-list-col-sailor,
.club-list-modal .club-list-table td.club-list-col-sailor { min-width: 0; }
.club-list-modal .club-list-table th.club-list-col-club,
.club-list-modal .club-list-table td.club-list-col-club { min-width: 0; }
.club-list-modal .club-list-table th.club-list-col-fleet,
.club-list-modal .club-list-table td.club-list-col-fleet { min-width: 160px; }
.club-list-modal .club-list-table th.club-list-col-status,
.club-list-modal .club-list-table td.club-list-col-status { min-width: 100px; white-space: nowrap; }
.club-list-modal .club-list-table th.club-list-col-sailno,
.club-list-modal .club-list-table td.club-list-col-sailno { min-width: 88px; }
.club-list-modal .club-list-table th.club-list-col-crew,
.club-list-modal .club-list-table td.club-list-col-crew { min-width: 160px; }

.club-list-modal .club-list-table td.club-list-col-sailor,
.club-list-modal .club-list-table td.club-list-col-club {
    white-space: normal;
    /* Wrap only at normal word boundaries so names like "Manly" are not split */
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.35;
}

/* Light modals: keep body text dark (app-shell default text may be light) */
.club-list-modal .club-list-table tbody td,
.club-list-modal .club-list-table tbody th,
.bulk-conflict-modal .data-table tbody td,
.bulk-conflict-modal .data-table tbody th {
    color: #1a1a1a;
}

.club-list-modal .club-list-table .form-select,
.club-list-modal .club-list-table .form-control {
    min-width: 0;
}

.club-list-modal .club-list-row-excluded {
    opacity: 0.7;
}

.club-list-modal .club-list-row-excluded td {
    color: var(--color-text-muted);
}

.club-list-modal .club-list-separator-row td {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 6px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-light);
}

/* ─── Shared table striping, hover, sticky first column ─ */
/*
 * Row-level background token (all body cells read --eventops-row-bg from tr).
 * Add Bulk: Sailor is td.club-list-col-sailor (not :first-child); checkbox is :first-child.
 */
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr:nth-of-type(odd),
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr:nth-of-type(odd) {
    --eventops-row-bg: var(--app-table-row-odd);
}
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr:nth-of-type(even),
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr:nth-of-type(even) {
    --eventops-row-bg: var(--app-table-row-even);
}
.app-shell .app-table-row-colors .app-table.table-hover.table-striped > tbody > tr:hover,
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-hover.table-striped > tbody > tr:hover {
    --eventops-row-bg: var(--eventops-table-row-hover-bg);
}

/* Membership members table: light warning rows (uses --eventops-row-bg for sticky parity) */
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr.membership-row-warning,
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr.membership-row-warning,
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr.membership-row-warning:nth-of-type(odd),
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr.membership-row-warning:nth-of-type(even),
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr.membership-row-warning:nth-of-type(odd),
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr.membership-row-warning:nth-of-type(even),
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr.entry-row-warning,
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr.entry-row-warning,
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr.entry-row-warning:nth-of-type(odd),
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr.entry-row-warning:nth-of-type(even),
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr.entry-row-warning:nth-of-type(odd),
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr.entry-row-warning:nth-of-type(even) {
    --eventops-row-bg: var(--eventops-membership-row-warning-bg);
}
.app-shell .app-table-row-colors .app-table.table-hover.table-striped > tbody > tr.membership-row-warning:hover,
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-hover.table-striped > tbody > tr.membership-row-warning:hover,
.app-shell .app-table-row-colors .app-table.table-hover.table-striped > tbody > tr.entry-row-warning:hover,
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-hover.table-striped > tbody > tr.entry-row-warning:hover {
    --eventops-row-bg: var(--eventops-membership-row-warning-hover-bg);
}

/* All body cells incl. sticky (override .data-table white + Bootstrap inset shadow) */
.app-shell .app-table-row-colors .app-table.table-striped > tbody > tr > td,
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped > tbody > tr > td {
    background-color: var(--eventops-row-bg, var(--app-table-row-even)) !important;
    --bs-table-accent-bg: var(--eventops-row-bg, var(--app-table-row-even));
    box-shadow: none !important;
}

/* Tables with hover but without app-table-row-colors (e.g. users list) */
.app-shell .table.table-hover.data-table:not(.app-table) > tbody > tr:hover > td,
.app-shell .table.table-hover.data-table:not(.app-table) > tbody > tr:hover > th {
    background-color: var(--eventops-table-row-hover-bg) !important;
    box-shadow: none !important;
}

/* Sticky first column — part of the row; no separator shadow/border */
.app-table-sticky-first thead > tr > :first-child,
.app-table-sticky-first tbody > tr > :first-child,
.app-table-scroll.app-table-sticky-first .app-table thead > tr > :first-child,
.app-table-scroll.app-table-sticky-first .app-table tbody > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 60;
    box-shadow: none;
    border-right: none;
}
.app-table-sticky-first thead > tr > :first-child,
.app-table-scroll.app-table-sticky-first .app-table thead > tr > :first-child {
    z-index: 90;
    background-color: #fff !important;
}
/* Add Bulk: checkbox + Sailor sticky (Sailor is not :first-child) */
.club-list-modal .app-table-sticky-first thead .club-list-th-cb,
.club-list-modal .app-table-sticky-first tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 60;
    box-shadow: none;
    border-right: none;
}
.club-list-modal .app-table-sticky-first .club-list-col-sailor {
    position: sticky;
    left: 2.5rem;
    z-index: 60;
    box-shadow: none;
    border-right: none;
}
.club-list-modal .app-table-sticky-first thead .club-list-col-sailor,
.club-list-modal .app-table-sticky-first thead .club-list-th-cb {
    z-index: 90;
    background-color: #fff !important;
}

/* Add Bulk sticky body cells: use row token (Sailor is .club-list-col-sailor, not :first-child) */
.club-list-modal .app-table-sticky-first tbody td:first-child,
.club-list-modal .app-table-sticky-first tbody td.club-list-col-sailor {
    background-color: var(--eventops-row-bg, var(--app-table-row-even)) !important;
    --bs-table-accent-bg: var(--eventops-row-bg, var(--app-table-row-even));
    box-shadow: none !important;
}

/* Main entries scrollport: sticky Sailor column is :first-child */
.app-table-scroll.app-table-sticky-first .app-table tbody td:first-child {
    background-color: var(--eventops-row-bg, var(--app-table-row-even)) !important;
    --bs-table-accent-bg: var(--eventops-row-bg, var(--app-table-row-even));
    box-shadow: none !important;
}

/* ─── Data Table ─────────────────────────────────────── */
.data-table-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    max-height: min(70vh, 600px);
    min-width: 0;
    display: block;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* All .data-table-container heights are set globally in app.js (fitDataTablesToViewport) to use rest of viewport */

.table-responsive {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    max-height: min(70vh, 600px);
    min-width: 0;
}

.data-table,
.users-table,
.table.data-table {
    width: 100%;
    min-width: min-content;
    border-collapse: collapse;
    background: #fff;
}

.data-table th,
.data-table td {
    /* Slightly tighter horizontal padding so columns sit closer together by default */
    padding: var(--space-sm) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

/* Row divider: full-width line so it doesn't break with sticky columns */
.data-table tbody tr {
    border-bottom: 1px solid var(--color-border);
}
.data-table tbody tr:last-child {
    border-bottom: none;
}
.data-table tbody td {
    border-bottom: none;
}
.data-table thead tr {
    border-bottom: 2px solid var(--color-border);
}
.data-table thead th {
    border-bottom: none;
    background: #fff;
}

.data-table th {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    color: #1a1a1a;
    background: #fff;
}

/* Event entries / known sailors: missing home club badge (text-only highlight) */
.data-table .home-club-missing-badge,
.app-table .home-club-missing-badge,
.home-club-missing-badge {
    display: inline-block;
    background-color: #ffe8a3;
    color: #111827;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
    line-height: 1.2;
    border: 1px solid rgba(180, 120, 0, 0.45);
}

.data-table .home-club-unlinked-badge,
.app-table .home-club-unlinked-badge,
.home-club-unlinked-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    background-color: rgba(148, 163, 184, 0.22);
    color: #334155;
    border: 1px solid rgba(100, 116, 139, 0.45);
    vertical-align: middle;
    white-space: nowrap;
}

[data-theme="dark"] .home-club-unlinked-badge,
.dark .home-club-unlinked-badge {
    background-color: rgba(148, 163, 184, 0.24);
    color: #e5e7eb;
    border-color: rgba(203, 213, 225, 0.35);
}

.known-sailors-table .known-sailors-actions {
    white-space: nowrap;
    text-align: right;
}

.known-sailors-table .known-sailors-actions .btn {
    padding: 0.15rem 0.45rem;
    font-size: 0.8125rem;
}

/* Bracelet status column: text Assigned badge / Assign button (no NFC UID) */
.known-sailors-table .known-sailors-bracelet-col {
    width: 5.5rem;
    max-width: 6rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

.known-sailor-bracelet-status,
.known-sailor-bracelet-assign {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.25rem;
    min-width: 5.25rem;
    max-width: 5.25rem;
    height: 1.7rem;
    padding: 0 0.4rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

.known-sailor-bracelet-status--assigned {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.1);
    border: 1px solid rgba(15, 118, 110, 0.35);
    cursor: default;
    user-select: none;
}

.known-sailor-bracelet-assign {
    padding: 0 0.4rem !important;
}

.known-sailor-bracelet-mobile {
    display: inline-flex;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.known-sailor-bracelet-manage-wrap {
    display: inline-flex;
    margin-right: 0.15rem;
    vertical-align: middle;
}

.known-sailor-bracelet-modal {
    max-width: 28rem;
    width: calc(100% - 1.5rem);
}

.known-sailor-bracelet-modal .ksb-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.known-sailor-bracelet-modal .ksb-card {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: #fff;
}

.known-sailor-bracelet-modal #ksbAssignByScan,
.known-sailor-bracelet-modal #ksbConfirmAssign,
.known-sailor-bracelet-modal #ksbStartReplace,
.known-sailor-bracelet-modal #ksbRemove {
    width: 100%;
}

.known-sailor-bracelet-modal .ksb-stage {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .known-sailor-bracelet-modal {
        max-width: calc(100% - 1rem);
        width: calc(100% - 1rem);
    }
}

.known-sailor-ext-badge {
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ---- Sailing profiles modal + profile cards ---- */
.sailing-profiles-modal {
    max-width: 36rem;
    width: calc(100% - 1.5rem);
    border-radius: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    padding: 1.25rem 1.35rem 1.15rem;
}

.sailing-profiles-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

.sailing-profiles-modal__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.sailing-profiles-modal__sailor {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.35;
}

.sailing-profiles-modal__add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
}

.sailing-profiles-modal__add-plus {
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700;
}

.sailing-profiles-modal__list {
    min-height: 2.5rem;
}

.sailing-profiles-modal__cards {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.sailing-profiles-modal__empty {
    color: #64748b;
    font-size: 0.9rem;
    padding: 0.35rem 0 0.15rem;
}

.sailing-profiles-modal__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.15rem;
    padding-top: 0.15rem;
}

/* Horizontal profile card: icon | details | default col | actions */
.sailing-profile-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.7rem;
    background: #fff;
    min-width: 0;
}

.sailing-profile-card__main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    flex: 1 1 auto;
}

.sailing-profile-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.55rem;
    background: #e8f1fc;
    color: #2f6fed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sailing-profile-card__icon-svg {
    display: block;
}

.sailing-profile-card__details {
    min-width: 0;
    flex: 1 1 auto;
}

.sailing-profile-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.85rem;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
}

.sailing-profile-card__class,
.sailing-profile-card__sail {
    font-size: inherit;
    font-weight: inherit;
}

/* Fixed secondary status position on every card */
.sailing-profile-card__secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.55rem;
    margin-top: 0.35rem;
}

.sailing-profile-card__class-line {
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.35;
}

.sailing-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.sailing-profile-badge--missing {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.sailing-profile-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.sailing-profile-badge--inactive {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Fixed-width default column — Default and Make default share width/position */
.sailing-profile-card__default {
    flex: 0 0 8.5rem;
    width: 8.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sailing-profile-default {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    width: 8.5rem;
    min-width: 8.5rem;
    max-width: 8.5rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.sailing-profile-default__star {
    flex-shrink: 0;
}

.sailing-profile-default--active {
    background: #2f6fed;
    color: #fff;
    border: 1px solid #2f6fed;
}

.sailing-profile-default--make {
    background: #fff;
    color: #2f6fed;
    border: 1px solid #93c5fd;
    cursor: pointer;
}

.sailing-profile-default--make:hover {
    background: #eff6ff;
}

.sailing-profile-card__actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.sailing-profile-card__btn {
    min-width: 4.25rem;
    font-weight: 600;
    border-radius: 0.45rem;
    padding: 0.28rem 0.65rem;
}

.sailing-profile-form-modal {
    max-width: 28rem;
    width: calc(100% - 1.5rem);
}

.sailing-profile-form-modal .form-label .text-body-secondary {
    font-weight: 400;
}

.sailing-profile-boat-class-missing {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .sailing-profiles-modal {
        padding: 1.05rem 1rem 1rem;
    }

    .sailing-profiles-modal__header {
        flex-wrap: wrap;
    }

    .sailing-profile-card {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .sailing-profile-card__main {
        width: 100%;
        flex: 1 1 100%;
    }

    .sailing-profile-card__default {
        flex: 0 0 auto;
        width: auto;
        justify-content: flex-start;
        padding-top: 0.15rem;
    }

    .sailing-profile-card__actions {
        flex: 1 1 auto;
        justify-content: flex-start;
        width: auto;
        padding-top: 0.15rem;
        flex-wrap: wrap;
    }

    .sailing-profile-card__btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .known-sailors-table .known-sailors-actions .btn + .btn {
        margin-left: 0.25rem;
    }
}

/* Single-event panel: full width inside page-entries flex chain */
.page-entries #singleEventEntriesContainer {
    min-width: 0;
    width: 100%;
}

/* Reusable table shell primitives (can be used on any page). */
.app-table-shell {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0 0 var(--space-md) var(--space-md);
    overflow: hidden;
}
.app-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-top: 0;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
}
.app-table-scroll.data-table-container {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    max-height: none;
    overscroll-behavior-x: contain;
}
.app-table-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.app-table-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
}
.app-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.app-table-scroll .app-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.app-table-scroll .app-table thead tr {
    border-bottom: none;
}
.app-table-scroll .app-table thead th {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff !important;
    border-bottom: 2px solid #2f4f63 !important;
    box-shadow: none;
}
.app-table-scroll .app-table tbody td {
    border-bottom: 1px solid var(--color-border) !important;
}
.app-table-scroll .app-table tbody tr:last-child td {
    border-bottom: none !important;
}
.app-table-scroll .app-table th,
.app-table-scroll .app-table td {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: middle;
}
.app-shell .app-table-scroll.app-table-row-colors .app-table.table-striped.table-hover {
    --bs-table-bg: var(--app-table-row-even);
    --bs-table-striped-bg: var(--app-table-row-odd);
    --bs-table-striped-color: #1a1a1a;
    --bs-table-hover-bg: var(--eventops-table-row-hover-bg);
}
/* Sortable column headers inside reusable table scrollport */
.app-table-scroll .entries-th-sortable {
    cursor: pointer;
    user-select: none;
}
.app-table-scroll .entries-th-sortable:hover {
    background: #e9ecef !important;
}

/* Entries toolbar: filters row grows on large screens; full width when stacked */
.page-entries .entries-toolbar-filters {
    flex: 1 1 100%;
    min-width: 0;
}
@media (min-width: 992px) {
    .page-entries #entriesToolbar.d-flex .entries-toolbar-filters {
        flex: 1 1 auto;
    }
}
.page-entries .entries-toolbar-fleet {
    width: auto;
    min-width: 10rem;
    max-width: 100%;
}
.page-entries .entries-toolbar-search {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
}
@media (min-width: 992px) {
    .page-entries .entries-toolbar-search {
        max-width: 28rem;
    }
}

/* Inputs and selects inside any data table: white background to match table (default table style) */
.data-table .form-control,
.data-table .form-select {
    background: #fff;
    border-color: var(--color-border);
    color: #1a1a1a;
}
.data-table .form-control::placeholder {
    color: #666;
}
.data-table .form-control:focus,
.data-table .form-select:focus {
    background: #fff;
    border-color: var(--color-primary);
    color: #1a1a1a;
}
.data-table .form-control:disabled,
.data-table .form-select:disabled {
    background: #f5f5f5;
    color: #666;
}

/* Sortable columns: project default for data tables */
table.sortable th[data-sort] {
    cursor: pointer;
    user-select: none;
}

table.sortable th[data-sort]:hover {
    /* On white table headers, make hover sharper (darker), not lighter */
    color: #1a1a1a;
    background: transparent;
    box-shadow: inset 0 -2px 0 0 var(--color-primary);
}

.app-table-scroll table.sortable th[data-sort]:hover {
    background: #e9ecef !important;
}

.data-table th.entries-sortable-th {
    cursor: pointer;
    user-select: none;
}

.data-table th.entries-sortable-th:hover {
    color: #1a1a1a;
    background: transparent;
    box-shadow: inset 0 -2px 0 0 var(--color-primary);
}

/* One table style everywhere: no per-page "light surface" overrides */

/* Data table: sticky first column (non scrollport); use app-table-sticky-first when possible */
.data-table-container:not(.app-table-scroll) .data-table.app-table-sticky-first thead > tr > :first-child,
.data-table-container:not(.app-table-scroll) .data-table.app-table-sticky-first tbody > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 60;
    box-shadow: none;
    border-right: none;
}
.data-table-container:not(.app-table-scroll) .data-table.app-table-sticky-first thead > tr > :first-child {
    z-index: 70;
    background-color: #fff !important;
}

/* Safety grid: use the same table styling as other card tables */

/* ─── Event Entries: event list (expand/collapse) ────── */
.events-list-container {
    min-width: 0;
    max-width: 100%;
}

.events-list-container .loading {
    color: var(--color-text-muted);
    padding: var(--space-lg);
}

/* Entries list cards: show clear hover feedback */
.page-entries .entries-event-select {
    max-width: 28rem;
    min-width: 14rem;
}

.page-entries .entries-event-card {
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.page-entries .entries-event-card:hover {
    background-color: #eef4fb !important;
    border-color: #9bb8d8;
}

/* Entries page intro: two lines, truncate with ellipsis if needed */
.entries-intro {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.event-row {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: visible;
    color: #1a1a1a;
    min-width: 0;
}

.event-row-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.event-row-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

.event-row--expanded .event-row-header {
    border-bottom: 1px solid var(--color-border);
}

.event-row-title-group {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex: 1 1 auto;
    min-width: 0;
}

.event-row-name {
    font-weight: 600;
    color: #1a1a1a;
}

.event-row-meta {
    font-size: var(--font-size-sm);
    color: #666;
}

.event-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.event-row-expand {
    font-size: var(--font-size-sm);
    color: #666;
    padding: var(--space-xs);
}

.event-row-status {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    width: 4.5rem;
    min-width: 4.5rem;
    text-align: center;
    box-sizing: border-box;
}

.event-row-status--open {
    background: #e8f5e9;
    color: #2e7d32;
}

.event-row-status--closed {
    background: #ffebee;
    color: #c62828;
}

.event-row-entries {
    padding: var(--space-lg);
    background: #fff;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.event-row-entries .data-table-container {
    margin: 0;
    width: max-content;
    min-width: 100%;
}

/* ─── Course Grid ────────────────────────────────────── */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

/* ─── Dashboard ───────────────────────────────────────── */
.dashboard-header {
    padding: var(--space-lg);
}

.dashboard-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
}

.dashboard-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
}

.dashboard-refresh-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.dashboard-refresh-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.dashboard-manage-link {
    padding-left: 0;
    padding-right: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.dashboard-manage-link:hover {
    color: var(--color-primary);
}

.dashboard-event-select {
    min-width: min(100%, 420px);
    max-width: 100%;
    font-size: var(--font-size-md);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.dashboard-event-picker {
    min-width: min(100%, 420px);
    max-width: 100%;
    flex: 1 1 320px;
}

.dashboard-event-picker .dashboard-event-select {
    width: 100%;
}

.dashboard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.dashboard-meta__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: 0.15rem;
}

.dashboard-meta__value {
    display: block;
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

.dashboard-meta__sub {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.dashboard-event-media-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: min(100%, 28rem);
}

.dashboard-event-media-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    flex: 0 0 auto;
}

.dashboard-event-media-text {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-event-media-desc {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-meta__event--with-media .dashboard-meta__value {
    font-size: var(--font-size-base, 1rem);
}

.dashboard-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

.dashboard-chip--active {
    background: rgba(46, 125, 50, 0.2);
    color: #a5d6a7;
}

.dashboard-chip--muted {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
}

.dashboard-stat {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dashboard-stat__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.dashboard-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
}

.dashboard-stat--primary {
    grid-column: span 1;
}

.dashboard-stat--on-water-warning {
    border-color: rgba(229, 115, 115, 0.75);
    background: linear-gradient(180deg, rgba(229, 115, 115, 0.18) 0%, var(--color-bg-card) 100%);
    box-shadow: inset 0 0 0 2px rgba(229, 115, 115, 0.45);
}

.dashboard-stat--on-water-warning .dashboard-stat__label {
    color: var(--color-text);
    font-size: var(--font-size-md);
}

.dashboard-stat--on-water-warning .dashboard-stat__value {
    font-size: 3rem;
    font-weight: 800;
    color: #ff8a80;
    line-height: 1;
}

.dashboard-stat--on-water-clear {
    border-color: rgba(46, 125, 50, 0.65);
    background: linear-gradient(180deg, rgba(46, 125, 50, 0.14) 0%, var(--color-bg-card) 100%);
    box-shadow: inset 0 0 0 2px rgba(46, 125, 50, 0.35);
}

.dashboard-stat--on-water-clear .dashboard-stat__label {
    color: var(--color-text);
    font-size: var(--font-size-md);
}

.dashboard-stat--on-water-clear .dashboard-stat__value {
    font-size: 3rem;
    font-weight: 800;
    color: #81c784;
    line-height: 1;
}

.dashboard-stat--on-water-neutral .dashboard-stat__value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

/* Legacy alias — treat as warning */
.dashboard-stat--on-water {
    border-color: rgba(229, 115, 115, 0.75);
    background: linear-gradient(180deg, rgba(229, 115, 115, 0.18) 0%, var(--color-bg-card) 100%);
    box-shadow: inset 0 0 0 2px rgba(229, 115, 115, 0.45);
}

.dashboard-stat--on-water .dashboard-stat__label {
    color: var(--color-text);
    font-size: var(--font-size-md);
}

.dashboard-stat--on-water .dashboard-stat__value {
    font-size: 3rem;
    font-weight: 800;
    color: #ff8a80;
    line-height: 1;
}

.dashboard-stat--dnf .dashboard-stat__value {
    color: #e0a040;
}

.dashboard-weather-strip {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.4rem 0.85rem;
    margin-bottom: var(--space-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.dashboard-weather-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.35rem;
    width: 100%;
    line-height: 1.45;
}

.dashboard-weather-strip__brand {
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.dashboard-weather-strip__sep {
    color: var(--color-text-muted);
    opacity: 0.65;
    user-select: none;
    white-space: nowrap;
}

.dashboard-weather-strip__item {
    color: var(--color-text);
    white-space: nowrap;
}

.dashboard-weather-strip__field {
    color: var(--color-modal-note-emphasis);
}

.dashboard-weather-strip__wind {
    font-weight: 700;
    color: #7ec8ff;
}

.dashboard-weather-strip__muted,
.dashboard-weather-strip__reason {
    color: var(--color-modal-note);
}

.dashboard-weather-strip__updated {
    color: var(--color-text-muted);
}

.dashboard-weather-strip__link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard-weather-strip__link:hover {
    color: var(--color-primary-hover);
}

/* Dark panel / modal surfaces — shared weather dialogs (not the strip) */
.eventops-dark-modal {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    color: var(--color-text);
}

.eventops-dark-modal .modal-title {
    color: var(--color-text);
}

.eventops-dark-modal .modal-body,
.eventops-dark-modal .modal-header,
.eventops-dark-modal .modal-footer {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}

.eventops-dark-modal .text-muted,
.eventops-dark-modal .text-body-secondary,
.eventops-dark-modal .form-text {
    color: var(--color-modal-note) !important;
}

.eventops-dark-modal .form-label {
    color: var(--color-modal-note-emphasis);
}

.eventops-dark-modal .modal-body p:not(.text-muted):not(.text-body-secondary) {
    color: var(--color-text);
}

.eventops-dark-modal .alert.alert-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-border);
    color: var(--color-modal-note-emphasis);
}

.eventops-dark-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}

.selected-event-gate {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    color: var(--color-text);
}

.selected-event-gate__title {
    color: var(--color-text);
}

.selected-event-gate__message {
    color: var(--color-modal-note);
    margin: 0;
}

.selected-event-picker__label {
    color: var(--color-text);
    font-weight: 600;
}

.selected-event-picker__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.selected-event-picker__select {
    min-width: min(100%, 22rem);
    flex: 1 1 16rem;
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.selected-event-picker__loading,
.selected-event-picker__error,
.selected-event-picker__empty {
    color: var(--color-modal-note);
}

.operational-event-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.operational-event-picker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.operational-event-picker__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.operational-event-picker__label {
    flex: 1 1 12rem;
    font-weight: 600;
    color: var(--color-text);
}

.operational-event-picker__btn {
    min-height: 44px;
    min-width: 8.5rem;
    font-weight: 700;
}

.operational-event-picker__loading,
.operational-event-picker__error,
.operational-event-picker__empty {
    color: var(--color-modal-note);
}

.dashboard-fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

.dashboard-fleet-card {
    padding: var(--space-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    border: 1px solid var(--color-border);
}

.dashboard-fleet-card--normal {
    border-color: var(--color-border);
}

.dashboard-fleet-card--on-water-warning {
    border-color: rgba(229, 115, 115, 0.7);
    box-shadow: inset 0 0 0 1px rgba(229, 115, 115, 0.4), 0 0 0 1px rgba(229, 115, 115, 0.12);
    background: linear-gradient(180deg, rgba(229, 115, 115, 0.12) 0%, var(--color-bg-card) 55%);
}

.dashboard-fleet-card--on-water-clear {
    border-color: rgba(46, 125, 50, 0.55);
    box-shadow: inset 0 0 0 1px rgba(46, 125, 50, 0.3);
    background: linear-gradient(180deg, rgba(46, 125, 50, 0.08) 0%, var(--color-bg-card) 55%);
}

/* Legacy alias */
.dashboard-fleet-card--active {
    border-color: rgba(229, 115, 115, 0.7);
    box-shadow: inset 0 0 0 1px rgba(229, 115, 115, 0.4), 0 0 0 1px rgba(229, 115, 115, 0.12);
    background: linear-gradient(180deg, rgba(229, 115, 115, 0.12) 0%, var(--color-bg-card) 55%);
}

.dashboard-fleet-card--unsigned {
    box-shadow: inset 3px 0 0 rgba(255, 193, 7, 0.55);
}

.dashboard-fleet-card--on-water-warning.dashboard-fleet-card--unsigned {
    box-shadow: inset 3px 0 0 rgba(255, 193, 7, 0.55), inset 0 0 0 1px rgba(229, 115, 115, 0.4);
}

.dashboard-fleet-card--active.dashboard-fleet-card--unsigned {
    box-shadow: inset 3px 0 0 rgba(255, 193, 7, 0.55), inset 0 0 0 1px rgba(229, 115, 115, 0.4);
}

.dashboard-fleet-card:hover,
.dashboard-fleet-card:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-surface);
    outline: none;
}

.dashboard-fleet-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}

.dashboard-fleet-card__on-water {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border-radius: var(--border-radius);
}

.dashboard-fleet-card__on-water--warning {
    background: rgba(229, 115, 115, 0.18);
}

.dashboard-fleet-card__on-water--clear {
    background: rgba(46, 125, 50, 0.14);
}

.dashboard-fleet-card--on-water-warning .dashboard-fleet-card__on-water,
.dashboard-fleet-card--active .dashboard-fleet-card__on-water {
    background: rgba(229, 115, 115, 0.18);
}

.dashboard-fleet-card--on-water-clear .dashboard-fleet-card__on-water {
    background: rgba(46, 125, 50, 0.14);
}

.dashboard-fleet-card__on-water-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard-fleet-card__on-water-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
}

.dashboard-fleet-card__on-water--warning .dashboard-fleet-card__on-water-value,
.dashboard-fleet-card--on-water-warning .dashboard-fleet-card__on-water-value,
.dashboard-fleet-card--active .dashboard-fleet-card__on-water-value {
    color: #ff8a80;
}

.dashboard-fleet-card__on-water--clear .dashboard-fleet-card__on-water-value,
.dashboard-fleet-card--on-water-clear .dashboard-fleet-card__on-water-value {
    color: #81c784;
}

.dashboard-fleet-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--space-md);
    margin: 0 0 var(--space-md);
}

.dashboard-fleet-card__stats dt {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.dashboard-fleet-card__stats dd {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.dashboard-fleet-card__action {
    pointer-events: none;
    font-weight: 600;
}

.dashboard-no-active-event {
    display: flex;
    justify-content: center;
    padding: 1.25rem 0 2rem;
}

.dashboard-no-active-event__panel {
    width: 100%;
    max-width: 720px;
    text-align: center;
    padding: 2.25rem 2rem 2rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-sizing: border-box;
}

.dashboard-no-active-event__icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.15rem;
    color: var(--color-text-muted);
    opacity: 0.45;
}

.dashboard-no-active-event__title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.dashboard-no-active-event__lead {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.45;
}

.dashboard-no-active-event__helper {
    margin: 0 auto 1.5rem;
    max-width: 34rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.dashboard-no-active-event__cta {
    min-width: 10.5rem;
    font-weight: 700;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.dashboard-empty {
    padding: var(--space-xl);
}

.dashboard-status {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    white-space: nowrap;
}

.dashboard-status--on_water {
    background: rgba(229, 115, 115, 0.28);
    color: #ffcdd2;
}

.dashboard-status--off_water,
.dashboard-status--returned {
    background: rgba(74, 144, 226, 0.22);
    color: #bbdefb;
}

.dashboard-status--entry_only,
.dashboard-status--not_signed_on {
    background: rgba(158, 158, 158, 0.22);
    color: #cfd8dc;
}

.dashboard-status--signed_on,
.dashboard-status--registered {
    background: rgba(255, 193, 7, 0.18);
    color: #ffe082;
}

.dashboard-status--dnf {
    background: rgba(229, 115, 115, 0.22);
    color: #ffcdd2;
}

.dashboard-status--dns {
    background: rgba(158, 158, 158, 0.25);
    color: #cfd8dc;
}

.dashboard-status--unknown {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

/* Dashboard fleet sailors modal — dark shell, light table (Option A) */
#dashboardFleetModal.modal {
    background: transparent;
    pointer-events: none;
}

#dashboardFleetModal.modal.show {
    background: transparent;
}

#dashboardFleetModal .modal-dialog {
    pointer-events: auto;
    max-width: min(860px, calc(100vw - 2rem));
    max-height: calc(100vh - 3.5rem);
    margin: 1.75rem auto;
}

#dashboardFleetModal .modal-content.dashboard-fleet-modal {
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    color: var(--modal-text);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
    max-height: calc(100vh - 3.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#dashboardFleetModal .modal-header,
#dashboardFleetModal .modal-footer {
    background: var(--modal-bg);
    border-color: var(--modal-border);
    flex-shrink: 0;
}

#dashboardFleetModal .modal-title {
    color: var(--modal-text);
    font-weight: 800;
}

#dashboardFleetModal .modal-body {
    background: var(--modal-bg);
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

#dashboardFleetModal .modal-body .text-body-secondary {
    color: var(--modal-text-muted) !important;
}

#dashboardFleetModal .btn-close {
    filter: none;
    opacity: 0.55;
}

#dashboardFleetModal .data-table-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: visible;
    max-height: none;
}

#dashboardFleetModal .app-table th,
#dashboardFleetModal .app-table td {
    color: var(--color-text-on-light);
    border-color: #e2e8f0;
}

#dashboardFleetModal .app-table thead th {
    background: #f8fafc;
    color: #1e2a38;
    font-weight: 700;
}

#dashboardFleetModal .app-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

#dashboardFleetModal .data-table-container .dashboard-status--on_water {
    background: rgba(229, 115, 115, 0.16);
    color: #b71c1c;
}

#dashboardFleetModal .data-table-container .dashboard-status--off_water,
#dashboardFleetModal .data-table-container .dashboard-status--returned {
    background: rgba(25, 118, 210, 0.12);
    color: #0d47a1;
}

#dashboardFleetModal .data-table-container .dashboard-status--entry_only,
#dashboardFleetModal .data-table-container .dashboard-status--not_signed_on,
#dashboardFleetModal .data-table-container .dashboard-status--dns,
#dashboardFleetModal .data-table-container .dashboard-status--unknown {
    background: rgba(0, 0, 0, 0.06);
    color: #424242;
}

#dashboardFleetModal .data-table-container .dashboard-status--signed_on,
#dashboardFleetModal .data-table-container .dashboard-status--registered {
    background: rgba(255, 193, 7, 0.22);
    color: #6d4c00;
}

#dashboardFleetModal .data-table-container .dashboard-status--dnf {
    background: rgba(229, 115, 115, 0.16);
    color: #b71c1c;
}

#dashboardFleetModal .modal-footer .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-text);
}

#dashboardFleetModal .modal-footer .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* ─── Cards ──────────────────────────────────────────── */
.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
}

/* Optional: light card surface (use when you want it to match white tables) */
.card.card--light,
.app-shell .surface-light {
    background: #fff;
    color: var(--color-text-on-light);
}

/*
 * Light surfaces — labels, helper text, fields, and tables on white/light cards.
 * Prevents inherited dark-theme light-grey text (--color-text / --color-text-muted) on white.
 */
.app-shell .surface-light,
.app-shell .card.card--light,
.app-shell .card.card--light .card-body,
.app-shell .bg-white.text-dark,
.app-shell .entries-event-card.bg-white {
    --surface-text: var(--color-text-on-light);
    --surface-text-muted: var(--color-text-muted-on-light);
    color: var(--surface-text);
}

.app-shell .label-on-light,
.app-shell .surface-light .form-label,
.app-shell .card.card--light .form-label,
.app-shell .card.card--light h1,
.app-shell .card.card--light h2,
.app-shell .card.card--light h3,
.app-shell .card.card--light h4,
.app-shell .card.card--light h5,
.app-shell .card.card--light h6,
.app-shell .card.card--light .fw-semibold,
.app-shell .bg-white.text-dark .form-label {
    color: var(--color-text-on-light) !important;
}

.app-shell .text-helper-on-light,
.app-shell .surface-light .text-muted,
.app-shell .surface-light .text-body-secondary,
.app-shell .surface-light .form-text,
.app-shell .card.card--light .text-muted,
.app-shell .card.card--light .text-body-secondary,
.app-shell .card.card--light .form-text,
.app-shell .card.card--light small.text-muted,
.app-shell .card.card--light small.text-body-secondary,
.app-shell .bg-white.text-dark .text-muted,
.app-shell .bg-white.text-dark .text-body-secondary {
    color: var(--color-text-muted-on-light) !important;
}

.app-shell .surface-light .form-control,
.app-shell .surface-light .form-select,
.app-shell .surface-light .input-group-text,
.app-shell .card.card--light .form-control,
.app-shell .card.card--light .form-select,
.app-shell .card.card--light .input-group-text,
.app-shell .card.card--light .club-inspector-filters .form-control,
.app-shell .card.card--light .club-inspector-filters .form-select {
    background: #fff;
    border-color: #ced4da;
    color: var(--color-text-on-light);
}

.app-shell .surface-light .form-control::placeholder,
.app-shell .card.card--light .form-control::placeholder,
.app-shell .card.card--light .club-inspector-filters .form-control::placeholder {
    color: #6c757d;
}

.app-shell .surface-light .form-control:focus,
.app-shell .surface-light .form-select:focus,
.app-shell .card.card--light .form-control:focus,
.app-shell .card.card--light .form-select:focus,
.app-shell .card.card--light .club-inspector-filters .form-control:focus,
.app-shell .card.card--light .club-inspector-filters .form-select:focus {
    background: #fff;
    border-color: var(--color-primary);
    color: var(--color-text-on-light);
}

/*
 * Light modal panels (card--light inside legacy modals): keep dark-modal overrides from
 * bleeding onto white surfaces — labels, helpers, alerts, and cancel buttons.
 */
body.app-shell .modal .modal-content.card--light {
    background: #fff;
    color: var(--color-text-on-light);
}

body.app-shell .modal .modal-content.card--light .modal-header,
body.app-shell .modal .modal-content.card--light .modal-body,
body.app-shell .modal .modal-content.card--light .modal-footer {
    background: #fff;
    color: var(--color-text-on-light);
    border-color: rgba(0, 0, 0, 0.12);
}

body.app-shell .modal .modal-content.card--light .modal-title {
    color: var(--color-text-on-light) !important;
}

body.app-shell .modal .modal-content.card--light .btn-close {
    filter: none;
    opacity: 0.55;
}

body.app-shell .modal .modal-content.card--light .btn-close:hover,
body.app-shell .modal .modal-content.card--light .btn-close:focus {
    opacity: 0.85;
}

body.app-shell .modal .modal-content.card--light .modal-body .text-danger,
body.app-shell .modal .modal-content.card--light .modal-body p.text-danger,
body.app-shell .modal .modal-content.card--light .modal-body .text-danger.small {
    color: #842029 !important;
}

body.app-shell .modal .modal-content.card--light .label-on-light,
body.app-shell .modal .modal-content.card--light .form-label,
body.app-shell .modal .modal-content.card--light .form-check-label,
body.app-shell .modal .modal-content.card--light h1,
body.app-shell .modal .modal-content.card--light h2,
body.app-shell .modal .modal-content.card--light h3,
body.app-shell .modal .modal-content.card--light h4,
body.app-shell .modal .modal-content.card--light h5,
body.app-shell .modal .modal-content.card--light h6 {
    color: var(--color-text-on-light) !important;
}

body.app-shell .modal .modal-content.card--light .fw-semibold,
body.app-shell .modal .modal-content.card--light .text-dark,
body.app-shell .modal .modal-content.card--light strong {
    color: var(--color-text-on-light) !important;
}

body.app-shell .modal .modal-content.card--light .text-muted,
body.app-shell .modal .modal-content.card--light .text-body-secondary,
body.app-shell .modal .modal-content.card--light .small.text-muted:not(.form-check-label),
body.app-shell .modal .modal-content.card--light .form-label.text-muted,
body.app-shell .modal .modal-content.card--light .form-label.small.text-muted,
body.app-shell .modal .modal-content.card--light .text-helper-on-light,
body.app-shell .modal .modal-content.card--light .form-text {
    color: var(--color-text-muted-on-light) !important;
}

/* Developer tools — readable labels/forms on dark card (Bootstrap defaults are too dark) */
body.app-shell #devResetSection {
    color: var(--color-text);
}

body.app-shell #devResetSection .card-body {
    color: var(--color-text);
}

body.app-shell #devResetSection .form-label,
body.app-shell #devResetSection .form-check-label,
body.app-shell #devResetSection li,
body.app-shell #devResetSection .form-text,
body.app-shell #devResetSection .form-text code {
    color: var(--color-text) !important;
}

body.app-shell #devResetSection .text-body-secondary,
body.app-shell #devResetSection .text-muted {
    color: var(--color-text-muted) !important;
}

body.app-shell #devResetSection .form-control,
body.app-shell #devResetSection .form-select {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.app-shell #devResetSection .form-control::placeholder {
    color: var(--color-text-muted);
}

body.app-shell #devResetSection .form-control:focus,
body.app-shell #devResetSection .form-select:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-text);
}

body.app-shell #devResetSection .form-check-input {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

/* card--light: Bootstrap form-check defaults (undo app-shell dark checkbox sizing/colors) */
.app-shell .card--light .form-check-input,
body.app-shell .modal .modal-content.card--light .form-check-input {
    width: 1em;
    height: 1em;
    min-width: unset;
    min-height: unset;
    margin-top: 0.25em;
    background-color: var(--bs-form-check-bg);
    border-color: var(--bs-border-color);
}

.app-shell .card--light .form-check-input:checked,
body.app-shell .modal .modal-content.card--light .form-check-input:checked {
    background-color: var(--bs-form-check-checked-bg-color, var(--bs-primary));
    border-color: var(--bs-form-check-checked-border-color, var(--bs-primary));
}

.app-shell .card--light .form-check-input:focus,
body.app-shell .modal .modal-content.card--light .form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.app-shell .modal .modal-content.card--light .alert.alert-info {
    background: #cff4fc;
    border-color: #9eeaf9;
    color: #055160;
}

body.app-shell .modal .modal-content.card--light .alert.alert-warning {
    background: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

body.app-shell .modal .modal-content.card--light .alert.alert-success {
    background: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

body.app-shell .modal .modal-content.card--light .alert.alert-danger {
    background: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

body.app-shell .modal .modal-content.card--light .btn-light {
    background: #f8f9fa;
    border-color: #ced4da;
    color: var(--color-text-on-light);
}

body.app-shell .modal .modal-content.card--light .btn-light:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: var(--color-text-on-light);
}

body.app-shell .modal .modal-content.card--light .club-picker-wrap > .autocomplete-list {
    background: #fff;
    border-color: #ced4da;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 40;
}

body.app-shell .modal .modal-content.card--light .club-picker-wrap .autocomplete-item {
    background: #fff;
    color: var(--color-text-on-light);
    border-top-color: #e9ecef;
}

body.app-shell .modal .modal-content.card--light .club-picker-wrap .autocomplete-item:hover,
body.app-shell .modal .modal-content.card--light .club-picker-wrap .autocomplete-item:focus {
    background: #e9ecef;
    color: var(--color-text-on-light);
}

body.app-shell .modal .modal-content.card--light .club-picker-wrap .autocomplete-item--selected {
    background: #e7f1ff;
    color: var(--color-text-on-light);
    font-weight: 600;
}

body.app-shell .modal .modal-content.card--light .club-picker-message {
    padding: 0.5rem 0.75rem;
    color: var(--color-text-muted-on-light);
    font-size: var(--font-size-sm);
}

body.app-shell .modal .modal-content.card--light .club-picker-input--selected {
    border-color: #0d6efd;
    background: #f8fbff;
}

body.app-shell .modal .modal-content.card--light .merge-match-list .merge-match-row,
body.app-shell .modal .modal-content.card--light .merge-match-list .list-group-item-action {
    background: #fff;
    color: var(--color-text-on-light);
    border-color: #dee2e6;
}

body.app-shell .modal .modal-content.card--light .merge-match-list .merge-match-row {
    cursor: pointer;
}

body.app-shell .modal .modal-content.card--light .merge-match-list .merge-match-row:hover,
body.app-shell .modal .modal-content.card--light .merge-match-list .list-group-item-action:hover,
body.app-shell .modal .modal-content.card--light .merge-match-list .list-group-item-action:focus {
    background: #f8f9fa;
    color: var(--color-text-on-light);
}

body.app-shell .modal .modal-content.card--light .merge-match-list .merge-match-row--selected {
    background: #e7f1ff;
    border-color: #0d6efd;
}

body.app-shell .modal .modal-content.card--light .merge-target-selected {
    padding: 0.75rem;
    background: #f8fbff;
    border: 1px solid #0d6efd;
    border-radius: 0.375rem;
}

body.app-shell .modal .modal-content.card--light .merge-change-target-link {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}

body.app-shell .modal .modal-content.card--light .merge-change-target-link:hover,
body.app-shell .modal .modal-content.card--light .merge-change-target-link:focus {
    color: #0a58ca;
    text-decoration: underline;
}

.app-shell .surface-light .table,
.app-shell .card.card--light .table,
.app-shell .card.card--light .data-table,
.app-shell .card.card--light .app-table {
    --bs-table-color: var(--color-text-on-light);
    color: var(--color-text-on-light);
}

.app-shell .surface-light .table td,
.app-shell .surface-light .table th,
.app-shell .card.card--light .table td,
.app-shell .card.card--light .table th {
    color: var(--color-text-on-light);
}

/* Nested Bootstrap light panels inside dark pages (pickers, previews) */
.app-shell .bg-light.text-dark,
.app-shell .border.rounded.bg-light.text-dark {
    background-color: #f8f9fa !important;
    color: var(--color-text-on-light) !important;
}

.app-shell .bg-light.text-dark .text-muted,
.app-shell .bg-light.text-dark .text-body-secondary,
.app-shell .border.rounded.bg-light.text-dark .text-muted {
    color: var(--color-text-muted-on-light) !important;
}

.app-shell .bg-light.text-dark .form-label {
    color: var(--color-text-on-light) !important;
}

.app-shell .bg-light .text-muted,
.app-shell .bg-light .text-body-secondary,
.app-shell .bg-light .form-text {
    color: var(--color-text-muted-on-light) !important;
}

.app-shell .bg-light .form-label.text-dark,
.app-shell .bg-light .fw-semibold.text-dark {
    color: var(--color-text-on-light) !important;
}

/* Dark cards: keep muted/helper text on readable light-grey (not Bootstrap dark grey) */
.app-shell .card:not(.card--light):not(.surface-light) .text-muted,
.app-shell .card:not(.card--light):not(.surface-light) .text-body-secondary,
.app-shell .card:not(.card--light):not(.surface-light) .form-text {
    color: var(--color-modal-note) !important;
}

/* Dark panel label/helper utilities */
.app-shell .label-on-dark,
.app-shell .surface-dark .form-label,
.app-shell .dark-setup-card .form-label {
    color: var(--color-text) !important;
}

.app-shell .text-helper-on-dark,
.app-shell .surface-dark .text-muted,
.app-shell .surface-dark .text-body-secondary,
.app-shell .surface-dark .form-text {
    color: var(--color-modal-note) !important;
}

/* Light-card filter controls (Known Sailors / Club Fleets inspector pages) — kept for specificity */
.card.card--light .club-inspector-filters .form-label {
    color: var(--color-text-on-light);
}

#clubFleetsTable tbody tr.club-fleets-row {
    cursor: pointer;
}

#clubFleetsTable tbody tr.club-fleets-row:hover td {
    background: #e9eef6;
}

#clubFleetsTable tbody tr.club-fleets-row:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

#clubFleetsTable .club-fleets-actions-cell {
    width: 6.5rem;
    white-space: nowrap;
    vertical-align: middle;
}

.card h3 {
    margin-bottom: var(--space-md);
    font-size: var(--font-size-lg);
}

/* ─── Finish Grid ────────────────────────────────────── */
.sail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-sm);
}

.sail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.sail-btn:active {
    transform: scale(0.95);
}

.sail-btn--finished {
    background: var(--color-bg);
    border-color: var(--status-finished);
    color: var(--color-text-muted);
    cursor: default;
}

.sail-btn--dnf {
    background: rgba(255, 69, 58, 0.15);
    border-color: var(--color-error);
    color: var(--color-error);
    cursor: default;
}

.sail-btn--dns {
    background: rgba(142, 142, 147, 0.15);
    border-color: var(--status-locked);
    color: var(--status-locked);
    cursor: default;
}

.sail-btn__position {
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--status-finished);
}

/* ─── Safety Summary ─────────────────────────────────── */
.safety-summary {
    display: flex;
    gap: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-card);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
}

.safety-stat {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
}

.safety-stat strong {
    color: var(--color-text);
}

.safety-warning {
    color: var(--color-error) !important;
}

.safety-warning strong {
    color: var(--color-error) !important;
}

/* ─── Sign-On Page (tablet-friendly) ──────────────────── */
.page-signon__title {
    margin-bottom: var(--space-sm);
    font-size: clamp(1.25rem, 4vw, 1.5rem);
}

.page-signon__intro {
    margin-bottom: var(--space-md) !important;
}

.page-signon .signon-filters .signon-add-entry-btn {
    min-height: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.page-signon .signon-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-md);
    align-items: end;
}

.page-signon .signon-filters__field .form-control,
.page-signon .signon-filters__field .form-select {
    min-height: 44px;
    font-size: 1rem;
}

.page-signon .signon-muted,
.page-signon--tablet-friendly .page-signon__intro {
    color: #adb5bd;
}

@media (max-width: 899px) {
    .page-signon .signon-op-table {
        font-size: 0.875rem;
    }

    .page-signon .signon-op-table thead th,
    .page-signon .signon-op-table tbody td {
        padding: 0.35rem 0.3rem;
    }

    .page-signon .signon-op-table thead th {
        white-space: normal;
    }
}

@media (max-width: 1024px) {
    .page-signon .signon-filters,
    .page-signon--tablet-friendly .signon-filters {
        grid-template-columns: 1fr 1fr;
    }

    .page-signon .signon-filters__field--action,
    .page-signon--tablet-friendly .signon-filters__field--action {
        grid-column: 1 / -1;
    }

    .page-signon .signon-layout-tablet .signon-op-table .signon-op-entry-col,
    .page-signon--tablet-friendly .signon-op-table .signon-op-entry-col {
        width: 40%;
    }

    .page-signon .signon-layout-tablet .signon-op-table .signon-op-fleet-col,
    .page-signon--tablet-friendly .signon-op-table .signon-op-fleet-col {
        width: 16%;
    }

    .page-signon .signon-layout-tablet .signon-op-table .signon-op-actions-col,
    .page-signon--tablet-friendly .signon-op-table .signon-op-actions-col {
        width: 44%;
    }

    .page-signon .signon-layout-tablet td.entries-actions-col,
    .page-signon--tablet-friendly td.entries-actions-col {
        padding: 0.25rem 0.2rem;
    }

    .page-signon .signon-layout-tablet .signon-op-actions__inner .signon-row-action-btn,
    .page-signon--tablet-friendly .signon-op-actions__inner .signon-row-action-btn {
        min-height: 30px;
        padding: 0.2rem 0.35rem;
        font-size: 0.8rem;
    }

    .page-signon .signon-layout-tablet .signon-row-action-btn--payment,
    .page-signon--tablet-friendly .signon-row-action-btn--payment {
        flex-direction: row;
        gap: 0.2rem;
        min-width: 0;
    }

    .page-signon .signon-layout-tablet .signon-pay-btn__label,
    .page-signon--tablet-friendly .signon-pay-btn__label {
        font-size: inherit;
        text-transform: none;
        letter-spacing: 0;
    }

    .page-signon .signon-layout-tablet .signon-pay-btn__amount,
    .page-signon--tablet-friendly .signon-pay-btn__amount {
        font-size: inherit;
        font-weight: 700;
    }
}

.page-signon .signon-table-wrap {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--border-radius, 8px);
}

.page-signon .signon-op-table {
    --bs-table-color: #212529;
    --bs-table-bg: #fff;
    --bs-table-border-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
}

.page-signon .signon-op-table thead th {
    background: #f1f3f5;
    color: #212529;
    border-color: rgba(0, 0, 0, 0.1);
    font-weight: 600;
    white-space: nowrap;
}

.page-signon .signon-op-table tbody tr {
    background: #fff;
}

.page-signon .signon-op-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.page-signon .signon-op-table tbody td {
    color: #212529;
    border-color: rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.page-signon .signon-row-action-btn--payment {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    line-height: 1.2;
    min-width: 0;
}

.page-signon .signon-op-actions__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.page-signon .signon-op-actions__inner .signon-row-action-btn {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.page-signon .signon-pay-btn__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.page-signon .signon-pay-btn__amount {
    font-size: 1rem;
    font-weight: 700;
}

.page-signon .signon-op-table .signon-sail-view {
    color: #212529;
    font-weight: 600;
}

.page-signon .signon-op-table .signon-sail-view:hover,
.page-signon .signon-op-table .signon-sail-view:focus {
    color: var(--color-primary, #0d6efd);
    text-decoration: underline;
}

.page-signon .signon-layout-desktop .signon-op-table .signon-op-sail-col {
    width: 11%;
}

.page-signon .signon-layout-desktop .signon-op-table .signon-op-helm-col {
    width: 30%;
}

.page-signon .signon-layout-desktop .signon-op-table .signon-op-fleet-col {
    width: 17%;
}

.page-signon .signon-layout-desktop .signon-op-table .signon-op-actions-col {
    width: 42%;
}

.page-signon .signon-layout-desktop .signon-op-table thead th.signon-op-actions-col {
    text-align: center;
}

.page-signon .signon-layout-tablet .signon-op-table .signon-op-entry-col {
    width: 40%;
}

.page-signon .signon-layout-tablet .signon-op-entry {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.25;
}

.page-signon .signon-layout-tablet .signon-op-entry__sail {
    font-weight: 700;
    font-size: 1rem;
}

.page-signon .signon-layout-tablet .signon-op-entry__helm {
    font-size: 0.85rem;
    font-weight: 400;
    color: #495057;
}

.page-signon .signon-layout-tablet .signon-op-table .signon-op-fleet-col {
    width: 16%;
}

.page-signon .signon-layout-tablet .signon-op-table .signon-op-actions-col {
    width: 44%;
}

.page-signon .signon-layout-tablet .signon-op-table thead th.signon-op-actions-col {
    text-align: center;
    font-size: 0.85rem;
}

.page-signon td.entries-actions-col {
    text-align: center;
    vertical-align: middle;
    padding: 0.35rem 0.25rem;
}

.page-signon td.entries-actions-col:empty {
    padding: 0.35rem 0.25rem;
}

.page-signon .signon-status-badge {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.page-signon .signon-status-badge--not-signed-on {
    background: rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
}

.page-signon .signon-status-badge--off-water {
    background: rgba(25, 135, 84, 0.25);
    color: #75b798;
}

.page-signon .signon-status-badge--on-water {
    background: rgba(220, 53, 69, 0.25);
    color: #f1aeb5;
}

.page-signon .signon-status-badge--returned {
    background: rgba(13, 202, 240, 0.2);
    color: #9eeaf9;
}

.page-signon .signon-row-action-btn {
    min-height: 36px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.2;
    font-weight: 600;
}

.page-signon .signon-sail-cell .form-control {
    background-color: #fff;
    color: #212529;
    border-color: #ced4da;
    max-width: 7.5rem;
}

.signon-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
    .page-signon--tablet-friendly .signon-toolbar {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--color-bg);
        padding: var(--space-md) 0;
        margin-left: calc(-1 * var(--space-md));
        margin-right: calc(-1 * var(--space-md));
        margin-bottom: var(--space-lg);
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}

.signon-toolbar__search {
    flex: 1 1 220px;
    min-width: 0;
}

.signon-search {
    font-size: 1rem;
    min-height: 44px;
}

.signon-toolbar__summary {
    margin-bottom: 0;
    flex-shrink: 0;
}

.signon-modal {
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}
.signon-modal .modal-content,
.signon-modal__content {
    max-width: 400px;
    width: 100%;
    padding: var(--space-lg);
}
.signon-modal #signonDisplaySailInput {
    font-size: 1.25rem;
}
.signon-sail-edit {
    margin: var(--space-md) 0;
}
.signon-modal .modal-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* ─── Sign-On page: only the table has white background; top section uses standard theme ─── */
.page-signon__event-note {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--color-text);
}
.page-signon__event-note a {
    color: var(--color-primary);
}

/* Event picker (signon.php?select=1) */
.signon-event-picker__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 480px;
}
.signon-event-picker__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    flex-wrap: wrap;
}
.signon-event-picker__card:hover {
    border-color: var(--color-primary);
}
.signon-event-picker__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}
.signon-event-picker__name {
    font-size: 1.1rem;
    color: var(--color-text);
}
.signon-event-picker__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.signon-event-picker__btn {
    min-height: 44px;
    flex-shrink: 0;
}

/* Event select modal (signon.php?select=1) */
#signonEventSelectModalBody .signon-event-picker__row {
    cursor: pointer;
}
#signonEventSelectModalBody .signon-event-picker__row:hover {
    background-color: rgba(79, 156, 247, 0.08);
}
#signonEventSelectModalBody .signon-event-picker__name {
    font-size: 1rem;
    color: #1a1a1a;
}

#signonEventSelectModalBody .signon-event-picker__meta {
    color: #666 !important;
}

/* ─── Sign-On table: compact action buttons in single Actions column ─ */

.page-signon .signon-layout-tablet .signon-op-actions__inner .signon-row-action-btn {
    min-height: 32px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8125rem;
}

.page-signon--tablet-friendly .signon-layout-tablet .signon-op-actions__inner .signon-row-action-btn {
    min-height: 34px;
    padding: 0.25rem 0.4rem;
    font-size: 0.8125rem;
}

.page-signon .signon-layout-tablet .signon-row-action-btn--payment,
.page-signon .signon-layout-tablet .signon-pay-btn__label,
.page-signon .signon-layout-tablet .signon-pay-btn__amount {
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
}

.page-signon .signon-layout-desktop .signon-op-actions__inner .signon-row-action-btn {
    min-height: 36px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.page-signon .signon-layout-desktop .signon-row-action-btn--payment,
.page-signon .signon-layout-desktop .signon-pay-btn__label,
.page-signon .signon-layout-desktop .signon-pay-btn__amount {
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
}

/* Sign-on: click sail number to edit (temporary display sail for this event) */
.page-signon .signon-sail-view {
    cursor: pointer;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 1px;
}
.page-signon .signon-sail-view:hover,
.page-signon .signon-sail-view:focus {
    color: var(--color-primary);
    outline: none;
}
.page-signon .signon-sail-cell .form-control {
    max-width: 7.5rem;
}

.page-signon .signon-table-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.page-signon.container-fluid {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ─── Users page: same as data-table, white card wrapper only ─── */
.users-table-card {
    background: transparent;
    padding: 0;
    overflow: hidden;
}
.users-table-wrap {
    background: transparent;
}

/* ─── Sign-On Rows (table cells: use data-table padding) ─────────────────────── */

/* ─── Page Toolbar ───────────────────────────────────── */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* ─── Loading State ──────────────────────────────────── */
.loading {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-xl);
}

/* ─── Login Page ─────────────────────────────────────── */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: var(--space-xl);
}

.login-logo {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.login-logo h1 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.login-logo p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.login-form {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
}

.login-footer {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--font-size-sm);
}

.login-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

/* ─── Pending DNFs ───────────────────────────────────── */
.pending-dnfs-container {
    background: #fff4f4;
    border: 1px solid #ffcccc;
    border-radius: var(--border-radius);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.pending-dnfs-header {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
}

.pending-dnfs-header strong {
    color: var(--color-danger);
    font-size: var(--font-size-md);
}

.pending-dnfs-header span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.pending-dnf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid #ffeeee;
}

.pending-dnf-item:last-child {
    border-bottom: none;
}

.pending-dnf-sail {
    font-weight: bold;
    font-size: var(--font-size-lg);
    margin-right: var(--space-md);
}

.pending-dnf-details {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.pending-dnf-actions {
    display: flex;
    gap: var(--space-sm);
}

/* ─── No Event Page ──────────────────────────────────── */
.no-event-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
}

.no-event-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--top-bar-height) - (var(--space-lg) * 2));
}

.no-event-container {
    text-align: center;
    max-width: 450px;
    padding: var(--space-xl);
}

.no-event-container h1 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.no-event-message {
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-lg);
}

.create-event-form {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
    text-align: left;
}

/* ─── Finish Actions (Fixed Bottom) ──────────────────── */
.finish-actions {
    position: fixed;
    bottom: 0;
    right: 0;
    left: var(--sidebar-width);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    z-index: 50;
}

/* ─── Export Controls ────────────────────────────────── */
.export-controls {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.export-controls .form-group {
    margin-bottom: 0;
    min-width: 180px;
}

/* ─── Toast Notifications ────────────────────────────── */
.toast {
    position: fixed;
    top: calc(var(--top-bar-height) + var(--space-md));
    right: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    font-weight: 500;
    /* Above Bootstrap .modal (~1055) and legacy .modal overlay; below premium dialogs (50000). */
    z-index: 12000;
    animation: slideIn var(--transition-normal);
}

.toast--info {
    background: var(--color-info);
    color: #000;
}

.toast--success {
    background: var(--color-success);
    color: #fff;
}

.toast--error {
    background: var(--color-error);
    color: #fff;
}

.toast--warning {
    background: var(--color-warning);
    color: #000;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ─── Autocomplete dropdown (sailor / crew search) ───── */
.autocomplete-dropdown.sailor-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    list-style: none;
}

.autocomplete-dropdown .suggestion-item {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-border);
}

.autocomplete-dropdown .suggestion-item:last-child {
    border-bottom: none;
}

.autocomplete-dropdown .suggestion-item:hover {
    background: var(--color-surface);
}

.autocomplete-dropdown .suggestion-item--new {
    color: var(--color-primary);
    font-weight: 500;
    border-top: 1px solid var(--color-border);
}

/* Bulk modal crew search dropdown (per-row) */
.club-list-crew-cell {
    position: relative;
    min-width: 140px;
}
.club-list-crew-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin-top: 2px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    max-height: 180px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.club-list-crew-dropdown .suggestion-item {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-border);
}
.club-list-crew-dropdown .suggestion-item:hover {
    background: var(--color-surface);
}
.club-list-crew-dropdown .suggestion-item--new {
    color: var(--color-primary);
    font-weight: 500;
    border-top: 1px solid var(--color-border);
}

/* ─── Registration Status Badges ─────────────────────── */
.status-badge--registered {
    background: var(--status-locked);
    color: #fff;
}

.status-badge--onwater {
    background: var(--status-started);
    color: #fff;
}

.status-badge--returned {
    background: var(--status-finished);
    color: #fff;
}

/* ─── Row Actions ────────────────────────────────────── */
.row-actions {
    display: flex;
    gap: var(--space-xs);
}

/* Entries actions: do NOT use display:flex on <td> — it breaks vertical-align with tall/wrapped rows */
.app-table-scroll td.entries-actions-col {
    vertical-align: middle;
}
.app-table-scroll td.entries-actions-col .row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* ─── Course Cards (Dashboard) ───────────────────────── */
.course-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
}

.course-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.course-card__header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
    flex: 1;
}

.course-card__race-info {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.course-card__fleets {
    margin-bottom: var(--space-md);
}

.course-card__actions {
    display: flex;
    gap: var(--space-sm);
}

/* ─── Race Control Cards ─────────────────────────────── */
.race-control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-lg);
}

.race-control-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
}

.race-control-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.race-control-card__header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
    flex: 1;
}

.race-number-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 600;
}

.race-started-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.race-control-card__fleets {
    margin-bottom: var(--space-lg);
}

/* Planned start groups — race officer workflow view */
.race-control-start-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.race-control-start-group {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.race-control-start-group--0 {
    background: rgba(255, 255, 255, 0.03);
}

.race-control-start-group--1 {
    background: rgba(13, 110, 253, 0.08);
    border-color: rgba(13, 110, 253, 0.25);
}

.race-control-start-group--2 {
    background: rgba(25, 135, 84, 0.08);
    border-color: rgba(25, 135, 84, 0.25);
}

.race-control-start-group__header {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--color-border);
}

.race-control-start-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.race-control-queue-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.race-control-queue-row:last-child {
    border-bottom: none;
}

.race-control-queue-row__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.race-control-queue-row__fleet {
    font-weight: 600;
}

.race-control-queue-row__sep {
    color: var(--color-text-muted);
    user-select: none;
}

.race-control-queue-row__race,
.race-control-queue-row__status {
    color: var(--color-text);
}

.race-control-queue-row__blocked-label {
    display: block;
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--bs-warning);
    margin-top: 0.15rem;
}

.race-control-queue-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
    flex: 0 1 auto;
}

.race-control-queue-row__reorder {
    flex: 0 0 auto;
}

.race-control-queue-row--next {
    box-shadow: inset 3px 0 0 var(--bs-primary);
    background: rgba(13, 110, 253, 0.1);
}

.race-control-queue-row--blocked {
    background: rgba(255, 193, 7, 0.08);
}

.race-control-queue-row--postponed {
    background: rgba(255, 193, 7, 0.12);
}

.race-control-queue-row--restart {
    background: rgba(220, 53, 69, 0.1);
}

.race-control-queue-row--started {
    background: rgba(25, 135, 84, 0.1);
}

.race-control-queue-row--done {
    opacity: 0.85;
}

.race-control-queue-row__extra-label {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--bs-info);
    margin-left: 0.25rem;
}

.race-control-start-group__extra-tag {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--bs-info);
}

.race-control-start-group--extra {
    border-color: rgba(13, 202, 240, 0.35);
}

.race-control-card__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Fleet pick lists in Create Course / Create Race modals (card--light) */
.race-control-fleet-pick {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 576px) {
    .race-control-fleet-pick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.race-control-fleet-pick .form-check {
    margin-bottom: 0;
    padding: 0.35rem 0.5rem;
    border-radius: var(--border-radius-sm, 0.25rem);
    cursor: pointer;
}

.race-control-fleet-pick .form-check:hover {
    background: rgba(0, 0, 0, 0.04);
}

.race-control-fleet-pick .form-check-label {
    cursor: pointer;
}

.race-setup-fleet-assigned-list__item {
    padding: 0.2rem 0;
    line-height: 1.4;
}

.race-control-fleet-race-slot {
    min-width: 5.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-sm, 0.375rem);
    background: rgba(255, 255, 255, 0.03);
}

/* Race Setup — compact planning checks (dark theme, matches race-control-card) */
.page-race-control .race-setup-planning {
    padding: var(--space-md);
}

.page-race-control .race-setup-planning__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.35rem;
}

.page-race-control .race-setup-planning-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.page-race-control .race-setup-planning-row:last-child {
    margin-bottom: 0;
}

.page-race-control .race-setup-planning-row__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    flex: 0 0 auto;
    white-space: nowrap;
}

.page-race-control .race-setup-planning-row__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1 1 0;
    min-width: 0;
}

.page-race-control .race-setup-planning-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.15em 0.5em;
    border-radius: var(--border-radius-sm, 0.25rem);
    white-space: nowrap;
}

.page-race-control .race-setup-planning-badge--warning {
    background-color: #ffc107;
    color: #212529;
    border: 1px solid #e0a800;
}

.page-race-control .race-setup-planning-badge--secondary {
    background-color: #3d5166;
    color: #e8edf2;
    border: 1px solid #5a7088;
}

.page-race-control .race-setup-planning-badge--info {
    background-color: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.page-race-control .race-setup-planning-badge--danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ffb3b8;
    border: 1px solid rgba(220, 53, 69, 0.45);
}

/* ─── Fleet Progress Row ─────────────────────────────── */
.fleet-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.fleet-progress-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    min-width: 100px;
}

.fleet-progress-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    min-width: 50px;
    text-align: right;
}

/* ─── Progress Bar ───────────────────────────────────── */
.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--color-surface);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
    transition: width var(--transition-normal);
}

/* ─── Finish Header ──────────────────────────────────── */
.finish-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--space-lg);
    gap: var(--space-sm);
}

.page-finish .finish-fleet-controls-card {
    padding: var(--space-md);
}

.page-finish .finish-fleet-controls__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.page-finish .finish-fleet-controls-table th {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.page-finish .finish-fleet-summary {
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.page-finish .finish-fleet-summary__name {
    font-weight: 600;
    color: var(--color-text);
}

.page-finish .finish-fleet-no-on-water {
    font-style: italic;
}

.page-finish .finish-fleet-status {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.page-finish .finish-fleet-status--ready {
    background-color: #3d5166;
    color: #e8edf2;
}

.page-finish .finish-fleet-status--started {
    background-color: #198754;
    color: #fff;
}

.page-finish .finish-fleet-status--finished {
    background-color: #ffc107;
    color: #212529;
}

.page-finish .finish-fleet-status--locked {
    background-color: #6c757d;
    color: #fff;
}

.page-finish .finish-fleet-status--not-sailed {
    background-color: #adb5bd;
    color: #212529;
}

.page-finish .finish-sheet-photo__actions {
    margin-top: 0.25rem;
}

/* Finish Sheet Review modal — dark theme (modal is outside .page-finish) */
#finishSheetReviewModal .modal-content {
    background: #1e2936;
    color: #e5edf5;
    border-color: rgba(255, 255, 255, 0.12);
}

#finishSheetReviewModal .modal-header,
#finishSheetReviewModal .modal-footer {
    background: #1a2633;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e5edf5;
}

#finishSheetReviewModal .modal-title {
    color: #e5edf5;
}

#finishSheetReviewModal .modal-body {
    background: #1e2936;
    color: #e5edf5;
}

#finishSheetReviewModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#finishSheetReviewModal .finish-sheet-review-muted {
    color: #adb5bd;
}

#finishSheetReviewModal .finish-sheet-review-table {
    --bs-table-color: #e5edf5;
    --bs-table-bg: #26394a;
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
    --bs-table-striped-bg: #2d4356;
    --bs-table-striped-color: #e5edf5;
    --bs-table-hover-bg: #334d62;
    --bs-table-hover-color: #e5edf5;
    --bs-table-active-bg: #334d62;
    --bs-table-active-color: #e5edf5;
    margin-bottom: 0;
}

#finishSheetReviewModal .finish-sheet-review-table,
#finishSheetReviewModal .finish-sheet-review-table th,
#finishSheetReviewModal .finish-sheet-review-table td {
    color: #e5edf5;
    border-color: rgba(255, 255, 255, 0.12);
}

#finishSheetReviewModal .finish-sheet-review-table thead th {
    background-color: #1a2633;
    color: #e5edf5;
    font-weight: 600;
}

#finishSheetReviewModal .finish-sheet-review-table tbody tr {
    background-color: #26394a;
}

#finishSheetReviewModal .finish-sheet-review-table tbody tr:nth-child(even) {
    background-color: #2d4356;
}

#finishSheetReviewModal .finish-sheet-review-table tbody tr:nth-child(even) > * {
    --bs-table-bg-type: #2d4356;
    --bs-table-color-type: #e5edf5;
}

#finishSheetReviewModal .finish-sheet-review-table tbody tr:nth-child(odd) > * {
    --bs-table-bg-type: #26394a;
    --bs-table-color-type: #e5edf5;
}

#finishSheetReviewModal .finish-sheet-review-table tbody tr.finish-sheet-review-row--ignored,
#finishSheetReviewModal .finish-sheet-review-table tbody tr.finish-sheet-review-row--ignored td {
    color: #94a3b8;
}

#finishSheetReviewModal .finish-sheet-review-match {
    color: #e5edf5;
}

#finishSheetReviewModal .finish-sheet-review-table input.form-control-sm,
#finishSheetReviewModal .finish-sheet-review-table select.form-select-sm {
    min-width: 6rem;
}

#finishSheetReviewModal .finish-sheet-review-table input.form-control,
#finishSheetReviewModal .finish-sheet-review-table select.form-select,
#finishSheetReviewModal .finish-sheet-review-table textarea {
    background-color: #31485c;
    color: #ffffff;
    border-color: #49657a;
}

#finishSheetReviewModal .finish-sheet-review-table input.form-control:focus,
#finishSheetReviewModal .finish-sheet-review-table select.form-select:focus,
#finishSheetReviewModal .finish-sheet-review-table textarea:focus {
    background-color: #31485c;
    color: #ffffff;
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25);
}

#finishSheetReviewModal .finish-sheet-review-table input.form-control:disabled {
    background-color: #253545;
    color: #94a3b8;
    opacity: 1;
}

#finishSheetReviewModal .finish-sheet-status--matched {
    color: #75b798;
    font-weight: 600;
}

#finishSheetReviewModal .finish-sheet-status--no_match,
#finishSheetReviewModal .finish-sheet-status--ambiguous,
#finishSheetReviewModal .finish-sheet-status--duplicate,
#finishSheetReviewModal .finish-sheet-status--already_has_result {
    color: #f0ad4e;
    font-weight: 600;
}

#finishSheetReviewModal .finish-sheet-review-actions .btn-outline-secondary {
    color: #cbd5e1;
    border-color: #64748b;
}

#finishSheetReviewModal .finish-sheet-review-actions .btn-outline-secondary:hover,
#finishSheetReviewModal .finish-sheet-review-actions .btn-outline-secondary:focus {
    color: #ffffff;
    background-color: #475569;
    border-color: #64748b;
}

#finishSheetReviewModal .finish-sheet-review-actions .btn-outline-danger {
    color: #f1aeb5;
    border-color: #dc3545;
}

#finishSheetReviewModal .finish-sheet-review-actions .btn-outline-danger:hover,
#finishSheetReviewModal .finish-sheet-review-actions .btn-outline-danger:focus {
    color: #ffffff;
    background-color: #bb2d3b;
    border-color: #dc3545;
}

#finishSheetReviewModal .modal-footer .btn-outline-secondary {
    color: #cbd5e1;
    border-color: #64748b;
}

#finishSheetReviewModal .modal-footer .btn-outline-secondary:hover,
#finishSheetReviewModal .modal-footer .btn-outline-secondary:focus {
    color: #ffffff;
    background-color: #475569;
    border-color: #64748b;
}

.page-finish .finish-sheet-status--matched {
    color: #75b798;
}

.page-finish .finish-sheet-status--no_match,
.page-finish .finish-sheet-status--ambiguous,
.page-finish .finish-sheet-status--duplicate,
.page-finish .finish-sheet-status--already_has_result {
    color: #f0ad4e;
}

/* Tablet operational navigation */
.app-shell--tablet-ops .sidebar,
.app-shell--tablet-ops #appNavOffcanvas {
    display: none !important;
}

.app-shell--tablet-ops .main-content {
    margin-left: 0;
    width: 100%;
}

.tablet-ops-nav {
    background: var(--color-bg-card, #1e2a38);
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    padding: 0.5rem 1rem;
    position: sticky;
    top: var(--top-bar-height, 56px);
    z-index: 100;
}

.tablet-ops-nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tablet-ops-nav__item {
    flex: 0 0 auto;
}

.tablet-ops-nav__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-muted, #adb5bd);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tablet-ops-nav__tab:hover {
    color: var(--color-text, #e8edf2);
    background: rgba(255, 255, 255, 0.06);
}

.tablet-ops-nav__tab--active {
    color: var(--color-text, #fff);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-primary, #0d6efd);
}

.page-signon .payment-quick-btn,
.page-entries .payment-quick-btn {
    min-height: 44px;
    min-width: 7rem;
    font-weight: 600;
    white-space: nowrap;
}

.page-signon .payment-quick-btn.payment-quick-btn--warning,
.page-entries .payment-quick-btn.payment-quick-btn--warning {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0.35em 0.65em;
}

.page-signon .payment-quick-label:not(.badge),
.page-entries .payment-quick-label:not(.badge) {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.95rem;
}

.page-signon .payment-quick-col,
.page-entries .payment-quick-col {
    min-width: 8rem;
    vertical-align: middle;
}

.page-signon .payment-quick-due-line,
.page-entries .payment-quick-due-line {
  font-size: 1.15rem;
  font-weight: 600;
}

.page-signon .payment-quick-actions .btn-lg,
.page-entries .payment-quick-actions .btn-lg {
    min-height: 52px;
}

.page-signon .signon-payment-btn {
    min-height: 44px;
    min-width: 7rem;
    font-weight: 600;
    white-space: nowrap;
}

.page-signon .signon-payment-label {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.95rem;
}

.page-signon .signon-payment-col {
    min-width: 8rem;
    vertical-align: middle;
}

.page-signon .signon-payment-due-line {
  font-size: 1.15rem;
  font-weight: 600;
}

.page-signon .signon-payment-actions .btn-lg {
    min-height: 52px;
}

.course-selector {
    display: flex;
    gap: var(--space-sm);
}

.course-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.race-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.race-number {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.race-status-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
}

/* ─── Fleet Sections (Finish) ────────────────────────── */
.fleet-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.fleet-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.fleet-section--finished {
    border-color: var(--status-finished);
}

.fleet-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.fleet-section__header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
    flex: 1;
}

.fleet-section__content {
    padding: var(--space-md);
}

/* ─── Sail Button Status Label ───────────────────────── */
.sail-btn__status {
    position: absolute;
    bottom: 2px;
    right: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ─── Results List (Finish) ──────────────────────────── */
.results-list {
    display: flex;
    flex-direction: column;
}

.result-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.result-row:last-child {
    border-bottom: none;
}

.result-position {
    font-size: var(--font-size-lg);
    font-weight: 700;
    min-width: 50px;
    text-align: center;
}

.result--finished .result-position {
    color: var(--status-finished);
}

.result--dnf .result-position {
    color: var(--color-error);
}

.result--dns .result-position {
    color: var(--status-locked);
}

.result--none .result-position {
    color: var(--color-text-muted);
}

.result-sail {
    font-size: var(--font-size-lg);
    font-weight: 600;
    min-width: 80px;
}

.result-name {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    flex: 1;
}

/* ─── Edit Mode (Finish) ─────────────────────────────── */
.edit-banner {
    background: var(--color-warning);
    color: #000;
    text-align: center;
    padding: var(--space-sm);
    font-weight: 700;
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
}

.edit-list {
    display: flex;
    flex-direction: column;
}

.edit-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    cursor: grab;
    transition: background var(--transition-fast);
}

.edit-row:active {
    cursor: grabbing;
}

.edit-row.dragging {
    opacity: 0.5;
    background: var(--color-surface);
}

.edit-row__handle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    cursor: grab;
}

.edit-row__sail {
    font-size: var(--font-size-lg);
    font-weight: 600;
    min-width: 80px;
}

.edit-row__name {
    flex: 1;
    color: var(--color-text-muted);
}

.result-toggle {
    min-width: 80px;
    text-align: center;
}

.result-toggle--finished {
    background: var(--status-finished);
    color: #fff;
}

.result-toggle--dnf {
    background: var(--color-error);
    color: #fff;
}

.result-toggle--dns {
    background: var(--status-locked);
    color: #fff;
}

/* ─── Sign-On Fleet Groups ───────────────────────────── */
.signon-fleet-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.signon-fleet-group {
    /* Match Event Entries: let the table container be the white card */
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.signon-fleet-group__header {
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border-bottom: none;
    font-size: var(--font-size-lg);
    margin: 0;
    color: var(--color-text);
}

.signon-fleet-group__rows {
    display: flex;
    flex-direction: column;
}

.signon-row__sail-cell {
    min-width: 0;
}

.signon-row__sail-wrap {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border-radius: 0;
    transition: color var(--transition-fast);
}
.signon-row__sail-wrap:hover,
.signon-row__sail-wrap:focus {
    color: #1a1a1a;
    text-decoration: underline;
    outline: none;
}
@media (min-width: 768px) {
    .signon-row__sail-wrap {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.4rem;
    }
}

.signon-row__name {
    min-width: 0;
    font-size: inherit;
}
.signon-row__crew,
.signon-row__fleet,
.signon-row__club {
    min-width: 0;
    font-size: inherit;
    color: inherit;
}

/* Any table cell that opens a popup: clearer hover so it's obvious it's clickable */
.cell-with-popup,
.signon-meta-trigger {
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
}
.cell-with-popup:hover,
.signon-meta-trigger:hover {
    background: #e3f2fd;
}
.data-table td .cell-with-popup,
.data-table td .signon-meta-trigger {
    display: inline-block;
    min-width: 100%;
    padding: 2px 4px;
    margin: -2px -4px;
}

.signon-row__status-cell {
    min-width: 0;
}
@media (min-width: 768px) {
    .signon-row__name {
        font-size: inherit;
    }
}

.signon-row__reg-cell {
    min-width: 0;
}

.signon-row__reg--yes {
    font-size: var(--font-size-sm);
    color: var(--color-success);
}

.signon-row__status-click {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
}
.signon-row__status-click:hover {
    filter: brightness(1.1);
}
.signon-btn-register {
    padding: 0.25rem 0.5rem;
    font-weight: 600;
}

.signon-btn-unregister {
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    background: var(--color-success);
    color: #fff;
    border: 1px solid var(--color-success);
}
.signon-btn-unregister:hover {
    filter: brightness(1.1);
    color: #fff;
}

.signon-row__status--muted {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.signon-row__status {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    min-width: 100px;
    text-align: center;
}

/* Off water (registered / returned) = red */
.signon-status--registered,
.signon-status--returned {
    background: var(--color-error);
    color: #fff;
}

/* On water = green */
.signon-status--onwater {
    background: var(--color-success);
    color: #fff;
}

/* ─── Empty State ────────────────────────────────────── */
.empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-xl);
    font-size: var(--font-size-md);
}

/* ─── Error State ────────────────────────────────────── */
.error-state {
    text-align: center;
    color: var(--color-error);
    padding: var(--space-xl);
}

/* ─── Event Setup Panel ──────────────────────────────── */
.setup-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}

.setup-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.setup-panel__header:hover {
    background: var(--color-surface);
}

.setup-panel__header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
    color: var(--color-primary);
}

.setup-panel__toggle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.setup-panel--collapsed .setup-panel__body {
    display: none;
}

.setup-panel__body {
    padding: var(--space-lg);
}

.setup-panel__hint {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-md);
}

.setup-course-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.setup-course-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: var(--space-md);
}

.setup-course-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.setup-course-header h4 {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin: 0;
}

.setup-fleet-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.setup-class-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.setup-class-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.setup-class-item {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-left: var(--space-sm);
}

.setup-class-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.setup-class-header h5 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
    color: var(--color-primary);
}

.setup-class-empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
}

.fleet-progress-class {
    color: var(--color-text-muted);
    font-weight: 400;
}

.setup-fleet-list {
    list-style: none;
    margin-bottom: var(--space-sm);
}

.setup-fleet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid rgba(61, 86, 110, 0.3);
}

.setup-fleet-item:last-child {
    border-bottom: none;
}

.setup-fleet-name {
    font-weight: 500;
}

.setup-fleet-entries {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.setup-fleet-empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
}

/* ─── Inline Form ────────────────────────────────────── */
.inline-form {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-sm);
}

.inline-form__input {
    flex: 1;
    min-height: 36px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

.inline-form--course {
    margin-top: 0;
}

/* ─── Responsive: tablet & phone (Bootstrap lg = 992px) ── */
@media (max-width: 991.98px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }

    .sidebar {
        display: none;
    }

    .finish-actions {
        left: 0;
    }
}

/*
 * Entry warning-flow modals (duplicate / same name / series sail / manual link): light warning panel.
 */
body.app-shell .entry-warning-flow-modal .modal-dialog.entry-warning-flow-modal__dialog {
    margin: 2rem auto;
    max-width: min(100vw - 2.5rem, 28rem);
    width: 100%;
}

body.app-shell .entry-warning-flow-modal .modal-content.modal-content--warning-flow {
    --entry-dup-warn-bg: #fff5f4;
    --entry-dup-warn-head: #ffe8e6;
    --entry-dup-warn-foot: #ffefed;
    background: var(--entry-dup-warn-bg);
    border: 1px solid rgba(220, 100, 90, 0.45);
    box-shadow: 0 0.35rem 1.25rem rgba(180, 60, 50, 0.15);
    overflow: visible;
    color: var(--modal-text);
}

body.app-shell .entry-warning-flow-modal .modal-header.modal-header--warning-flow {
    padding: 1rem 1.3rem;
    background: var(--entry-dup-warn-head);
    border-bottom: 1px solid rgba(220, 100, 90, 0.28) !important;
    color: var(--modal-text);
}

body.app-shell .entry-warning-flow-modal .modal-content--warning-flow .modal-title {
    color: var(--modal-text);
}

body.app-shell .entry-warning-flow-modal .modal-content--warning-flow .modal-body {
    padding: 1.35rem 1.45rem 1.45rem;
    background: var(--entry-dup-warn-bg);
    color: var(--modal-text);
}

body.app-shell .entry-warning-flow-modal .modal-body .text-body-secondary,
body.app-shell .entry-warning-flow-modal .modal-body .form-label.small {
    color: var(--modal-text-muted) !important;
}

body.app-shell .entry-warning-flow-modal .modal-body ul,
body.app-shell .entry-warning-flow-modal .modal-body li {
    color: var(--modal-text);
}

body.app-shell .entry-warning-flow-modal .modal-content--warning-flow .modal-footer {
    padding: 1.05rem 1.3rem 1.2rem;
    background: var(--entry-dup-warn-foot);
    border-top: 1px solid rgba(220, 100, 90, 0.22);
    gap: 0.5rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

body.app-shell .entry-warning-flow-modal .modal-content--warning-flow .modal-warning-flow-icon {
    font-size: 1.15rem;
    line-height: 1;
    color: #b91c1c;
    opacity: 0.9;
}

body.app-shell .entry-warning-flow-modal .alert.alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

body.app-shell .entry-warning-flow-modal .alert.alert-warning strong {
    color: #78350f;
}

body.app-shell .entry-warning-flow-modal .btn-close {
    filter: none;
    opacity: 0.55;
}

/* Non–app-shell pages (rare): light warning panel */
body:not(.app-shell) .entry-warning-flow-modal .modal-dialog.entry-warning-flow-modal__dialog {
    margin: 2rem auto;
    max-width: min(100vw - 2.5rem, 28rem);
    width: 100%;
}

body:not(.app-shell) .entry-warning-flow-modal .modal-content--warning-flow {
    border: 1px solid rgba(220, 100, 90, 0.45);
    box-shadow: 0 0.35rem 1.25rem rgba(180, 60, 50, 0.15);
    overflow: hidden;
    background: #fff5f4;
}
body:not(.app-shell) .entry-warning-flow-modal .modal-content--warning-flow .modal-header--warning-flow {
    background: #ffe8e6;
    border-bottom: 1px solid rgba(220, 100, 90, 0.28) !important;
}
body:not(.app-shell) .entry-warning-flow-modal .modal-content--warning-flow .modal-body {
    background: #fff5f4;
}
body:not(.app-shell) .entry-warning-flow-modal .modal-content--warning-flow .modal-footer {
    background: #ffefed;
    border-top: 1px solid rgba(220, 100, 90, 0.22);
}
body:not(.app-shell) .entry-warning-flow-modal .modal-content--warning-flow .modal-warning-flow-icon {
    font-size: 1.15rem;
    line-height: 1;
    opacity: 0.9;
}

/* Entry add/edit modal: fleet fixed to locked identity during duplicate-replace flow */
.entry-fleet-field--identity-locked {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius, 0.375rem);
    background-color: rgba(0, 0, 0, 0.055);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.entry-fleet-field--identity-locked .form-label {
    font-weight: 600;
}
[data-bs-theme="dark"] .entry-fleet-field--identity-locked {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* --- Club Selection --- */
.club-select-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.club-select-wrapper .select-input {
    flex: 1;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-premium-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50000; animation: fadeIn 0.2s ease; }
.modal-premium { position: relative; z-index: 1; background: var(--color-bg-card); width: 90%; max-width: 420px; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border: 1px solid var(--color-border); overflow: hidden; transform-origin: center; animation: modalPop 0.25s ease; color: var(--color-text); }
.modal-premium__header { padding: 1rem 1.5rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.modal-premium__header-title { font-size: 1.1rem; font-weight: 800; color: var(--color-text); }
.modal-premium__icon { font-size: 2.5rem; color: #fff; }
.modal-premium__body { padding: 1.5rem; text-align: center; background: var(--color-bg-card); color: var(--color-text); }
.modal-premium__title { font-size: 1.25rem; font-weight: 800; color: var(--color-text); margin-bottom: 0.5rem; }
.modal-premium__text { font-size: 1rem; color: var(--color-text); line-height: 1.5; white-space: pre-line; }
.modal-premium__body-content { text-align: left; width: 100%; }
.modal-premium__list { text-align: left; color: var(--color-text); margin-bottom: 0.5rem; padding-left: 1.25rem; font-size: 0.9375rem; }
.modal-premium__list li { color: var(--color-text); margin-bottom: 0.25rem; }
.modal-premium__note { font-size: 0.875rem; color: var(--color-modal-note); margin-bottom: 0; text-align: left; line-height: 1.45; }
.modal-premium .text-body-secondary,
.modal-premium .small.text-body-secondary { color: var(--color-modal-note) !important; }
.modal-premium ul.small { color: var(--color-text); }
/* Fleet sailors popup: table layout inside premium modal */
.modal-premium:has(.modal-premium__table-wrap),
.modal-premium:has(.modal-premium__body-content) {
    max-width: min(94vw, 520px);
}
.modal-premium__body-table-host {
    text-align: left;
    width: 100%;
}
.modal-premium__table-wrap {
    max-height: min(55vh, 420px);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-light);
}
.modal-premium__sailor-table {
    font-size: 0.9375rem;
    margin-bottom: 0;
    color: var(--color-text);
}
.modal-premium__sailor-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 1;
    box-shadow: 0 1px 0 var(--color-border);
    color: var(--color-text);
    font-weight: 600;
}
.modal-premium__sailor-table tbody td {
    color: var(--color-text);
    border-color: var(--color-border);
}
.modal-premium__col-num {
    width: 3.5rem;
    min-width: 3.25rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    text-align: right;
    white-space: nowrap;
}
.modal-premium__footer { padding: 1rem 1.5rem; display: flex; gap: 0.75rem; justify-content: center; background: var(--color-bg-light); border-top: 1px solid var(--color-border); }
.modal-premium__header--warning { background: #c82333 !important; border-bottom-color: #bd2130 !important; }
.modal-premium__header--warning .modal-premium__header-title { color: #fff; }
.modal-premium--duplicate-review { max-width: 640px; }
.modal-premium__body--duplicate-review { text-align: left; max-height: min(70vh, 520px); overflow-y: auto; }
.modal-premium__dup-group { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.modal-premium__dup-group-title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; padding: 0 0.25rem; }
.modal-premium__dup-option { text-align: left; margin-bottom: 0.5rem; }
.modal-premium__dup-option .form-check-label { color: var(--color-text); }
.modal-premium__dup-meta { margin-top: 0.15rem; }
.modal-premium__dup-option--skip { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed var(--color-border); }
.modal-premium--fleet-select { max-width: 520px; }
.modal-premium__body--fleet-select { text-align: left; max-height: min(70vh, 480px); overflow-y: auto; }
.modal-premium__fleet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.modal-premium__fleet-count { margin-left: auto; font-size: 0.875rem; color: var(--color-modal-note); }
.modal-premium__fleet-list { display: flex; flex-direction: column; gap: 0.35rem; }
.modal-premium__fleet-option { text-align: left; margin-bottom: 0; }
.modal-premium__fleet-option .form-check-label { color: var(--color-text); }
.modal-premium__fleet-empty { text-align: left; margin-top: 0.5rem; }
.modal-premium .form-check-input { border-color: var(--color-border); background-color: var(--color-bg); }
.modal-premium .form-check-input:checked { background-color: var(--color-primary, #0d6efd); border-color: var(--color-primary, #0d6efd); }
.modal-premium--entry-select { max-width: 680px; }
.modal-premium__body--entry-select { text-align: left; max-height: min(75vh, 560px); overflow-y: auto; }
.modal-premium__entry-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; align-items: center; }
.modal-premium__entry-count { grid-column: 1 / -1; font-size: 0.875rem; color: var(--color-modal-note); text-align: right; }
.modal-premium__entry-list { display: flex; flex-direction: column; gap: 0.5rem; }
.modal-premium__entry-fleet-group { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.35rem 0.75rem 0.5rem; }
.modal-premium__entry-fleet-title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); cursor: pointer; list-style: none; }
.modal-premium__entry-fleet-title::-webkit-details-marker { display: none; }
.modal-premium__entry-fleet-rows { padding-left: 0.25rem; margin-top: 0.35rem; }
.modal-premium__entry-option { text-align: left; margin-bottom: 0.35rem; }
.modal-premium__entry-option .form-check-label { color: var(--color-text); }
.modal-premium__entry-dup-warning { text-align: left; background: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.35); color: var(--color-text); }
.modal-premium__entry-search,
.modal-premium__entry-fleet-filter { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
.modal-premium__inactive-toggle .form-check-label { color: var(--color-text); }

/* Full-width admin pages: constrain controls, not the page shell */
.admin-page,
.pp-page,
.pdi-page,
.nfc-mgmt,
.nab-page {
  width: 100%;
  max-width: none;
}

.admin-filter-card .admin-filter-status {
  max-width: 20rem;
}

.admin-filter-btn {
  width: auto;
  min-width: 5.5rem;
}

.admin-empty-state {
  min-height: 140px;
}