* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

header {
    background: #000;
    color: white;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Dropdown Menu */
.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 2px solid #007fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 5px;
    min-width: 200px;
    z-index: 1000;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
    border-bottom: 1px solid #e9ecef;
}

.dropdown-item:first-child {
    border-radius: 6px 6px 0 0;
}

.dropdown-item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: white;
}

/* Tabs */
.tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    overflow-x: auto;
}

.tab-btn {
    flex: 1;
    padding: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s;
    white-space: nowrap;
}

.tab-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.tab-btn.active {
    background: white;
    color: #007fff;
    border-bottom: 3px solid #007fff;
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 30px;
    animation: fadeIn 0.3s;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cards */
.card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card h2 {
    color: #007fff;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.card-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.card-collapse-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: #007fff;
    background: #eef6ff;
    border-radius: 6px;
    transition: background 0.15s;
}

.card-collapse-header:hover .card-collapse-icon {
    background: #d9ecff;
}

.card h3 {
    color: #495057;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
}

.input:focus {
    outline: none;
    border-color: #007fff;
    box-shadow: 0 0 0 3px rgba(0, 127, 255, 0.1);
}

/* Start Time fields: faded (including the AM/PM segment) until a time is
   actually picked, so an untouched field doesn't read as a real selection —
   toggled via the time-filled class in app.js. */
input[type="time"].input {
    color: #adb5bd;
}

input[type="time"].input.time-filled {
    color: #212529;
}

input[type="time"].input::-webkit-datetime-edit-hour-field,
input[type="time"].input::-webkit-datetime-edit-minute-field,
input[type="time"].input::-webkit-datetime-edit-ampm-field,
input[type="time"].input::-webkit-datetime-edit-text {
    color: inherit;
}

/* Shared modal treatment (Add Event, Add Race, Add Competitor, etc.) — top
   -anchored and independently scrollable rather than vertically centered.
   Centering in a fixed 100%-height overlay breaks on mobile once the
   on-screen keyboard opens: the layout viewport doesn't shrink to match the
   visual one, so a centered box (and any field toward its bottom) ends up
   hidden behind the keyboard. Anchoring near the top keeps the box, and the
   field currently being typed into, in the visible area either way. */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
}

.modal-box {
    background: white;
    padding: 30px;
    max-width: 480px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 16px;
    }

    .modal-box {
        padding: 20px;
    }
}

/* Buttons */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: #007fff;
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 127, 255, 0.4);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-warning {
    background: #ffc107;
    color: #212529;
}

.btn-warning:hover {
    background: #e0a800;
}

.btn-small {
    padding: 8px 16px;
    font-size: 14px;
}

/* Competitors List */
.competitors-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.competitor-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.competitor-info {
    flex: 1;
}

.competitor-name {
    font-weight: 600;
    color: #212529;
    font-size: 16px;
    margin-bottom: 5px;
}

.competitor-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.competitor-bib,
.competitor-division,
.competitor-location,
.competitor-age {
    color: #6c757d;
    font-size: 14px;
    padding: 3px 8px;
    background: white;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.competitor-division {
    background: #e7f3ff;
    color: #0066cc;
    border-color: #99ccff;
    font-weight: 600;
}

/* Division Tags */
.division-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.division-name {
    flex: 1;
}

.btn-remove-division {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-remove-division:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Division chips inside the Add Event/Add Race modal — click the bubble to
   include/exclude that division from this event; the × deletes the division
   from the whole competition. Selected mirrors .division-tag's blue look;
   unselected is a muted outline so the two states read clearly at a glance. */
.division-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border: 1px solid #dee2e6;
    background: #f7f7f9;
    color: #6c757d;
}

.division-chip.selected {
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: white;
    border-color: transparent;
}

.division-chip-remove {
    background: rgba(0, 0, 0, 0.08);
    border: none;
    color: inherit;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.division-chip.selected .division-chip-remove {
    background: rgba(255, 255, 255, 0.3);
}

.division-chip-remove:hover {
    background: rgba(0, 0, 0, 0.15);
}

.division-chip.selected .division-chip-remove:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Events & Races modules (Setup tab) — one card per event/race: title up top,
   key details (divisions, start time, multiplier, result count) below it. */
.event-race-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.event-race-module {
    position: relative;
    background: #e7f3ff;
    color: #0066cc;
    border: 1px solid #99ccff;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.event-race-module:hover {
    background: #cfe8ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0, 102, 204, 0.15);
}

.event-race-module.dragging {
    opacity: 0.6;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    cursor: grabbing;
    z-index: 10;
}

.event-race-module-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #0066cc;
}

.event-race-module-series {
    opacity: 0.7;
    font-weight: 400;
}

.event-race-module-info {
    font-size: 0.85rem;
    color: #4d7fa8;
    line-height: 1.5;
}

/* Checkbox Labels */
.checkbox-label {
    display: block;
    padding: 8px 12px;
    margin-bottom: 5px;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-label:hover {
    background: #e9ecef;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

/* Heats List */
.heats-list, .races-list, .multi-events-list {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

/* Number Grid for Races */
.number-btn {
    padding: 20px;
    border: 3px solid #007fff;
    background: white;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    color: #007fff;
}

.number-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: white;
    transform: scale(1.05);
}

.number-btn.placed {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #6c757d;
    opacity: 0.5;
    cursor: not-allowed;
}

.heat-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
}

.heat-card.live {
    border-color: #dc3545;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
}

.heat-card.completed {
    opacity: 0.7;
}

.heat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.heat-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007fff;
}

.heat-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.heat-status.scheduled {
    background: #e9ecef;
    color: #6c757d;
}

.heat-status.live {
    background: #dc3545;
    color: white;
    animation: pulse 2s infinite;
}

.heat-status.completed {
    background: #28a745;
    color: white;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.heat-timer {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #007fff;
    margin: 10px 0;
}

.heat-competitors {
    display: grid;
    gap: 10px;
    margin: 15px 0;
}

.heat-competitor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #e9ecef;
}

.heat-competitor.rank-1 { border-left-color: #ffd700; }
.heat-competitor.rank-2 { border-left-color: #c0c0c0; }
.heat-competitor.rank-3 { border-left-color: #cd7f32; }

.competitor-jersey {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.jersey-red { background: #dc3545; }
.jersey-blue { background: #007bff; }
.jersey-yellow { background: #ffc107; }
.jersey-white { background: #ffffff; border-color: #dee2e6; }
.jersey-black { background: #212529; }
.jersey-green { background: #28a745; }

.competitor-details {
    flex: 1;
    margin: 0 15px;
}

.competitor-score {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #007fff;
}

.heat-controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Judge Panel */
.judge-panel {
    display: grid;
    gap: 20px;
}

.judge-competitor-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
}

.judge-competitor-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.wave-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.wave-btn {
    flex: 1;
    padding: 15px;
    border: 2px solid #e9ecef;
    background: white;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.wave-btn:hover {
    border-color: #007fff;
}

.wave-btn.active {
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: white;
    border-color: #007fff;
}

.score-input-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.score-input {
    flex: 1;
    padding: 20px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    font-family: 'Courier New', monospace;
    border: 3px solid #007fff;
    border-radius: 12px;
}

.wave-history {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
}

.wave-score-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Live View */
.live-header {
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: white;
    padding: 40px;
    text-align: center;
    margin: -30px -30px 30px -30px;
}

.live-event-info {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.live-timer {
    font-size: 5rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    margin: 20px 0;
}

.live-status {
    font-size: 1.5rem;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: inline-block;
}

.live-leaderboard {
    display: grid;
    gap: 15px;
}

.live-competitor {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s;
}

.live-competitor:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.live-rank {
    font-size: 3rem;
    font-weight: 700;
    color: #007fff;
    min-width: 70px;
    text-align: center;
}

.live-competitor-info {
    flex: 1;
}

.live-competitor-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #212529;
}

.live-competitor-bib {
    color: #6c757d;
    font-size: 1.2rem;
}

.live-score {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #007fff;
}

/* Results */
.results-list {
    display: grid;
    gap: 30px;
    margin-top: 20px;
}

.result-heat {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
}

.result-heat h3 {
    color: #007fff;
    margin-bottom: 15px;
}

.result-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
}

.result-table th {
    background: #007fff;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
}

.result-table td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
}

.result-table tr:hover {
    background: white;
}

/* Checkbox List */
.checkbox-list {
    max-height: 300px;
    overflow-y: auto;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-label:hover {
    background: #e9ecef;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox-item {
    padding: 10px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Responsive Design */

/* Tablet Screens (768px - 1024px) */
@media (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding: 15px;
    }

    .competitors-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .card {
        padding: 20px;
    }

    header h1 {
        font-size: 2rem;
    }

    .header-controls {
        gap: 8px;
    }

    .btn {
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* Mobile Landscape & Small Tablets (481px - 768px) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    header {
        padding: 15px;
    }

    header h1 {
        font-size: 1.6rem;
    }

    .header-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-controls .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 140px;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Tabs responsive */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .tab-btn {
        padding: 15px 12px;
        font-size: 14px;
        flex: 0 0 auto;
        min-width: 100px;
    }

    .tab-content {
        padding: 15px;
    }

    /* Forms stack vertically — align-items must be reset here too, otherwise
       the base rule's flex-end leaves each button at its own nowrap width
       instead of filling the row, letting longer labels run off the edge. */
    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .form-row .form-group {
        margin-bottom: 20px;
    }

    .form-row > .btn,
    .form-row > select {
        width: 100%;
        white-space: normal;
    }

    .input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 14px;
    }

    /* Cards */
    .card {
        padding: 15px;
        margin-bottom: 15px;
    }

    .card h2 {
        font-size: 1.4rem;
    }

    .card h3 {
        font-size: 1.1rem;
    }

    /* Competitor cards single column */
    .competitors-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .competitor-card {
        padding: 12px;
    }

    .competitor-name {
        font-size: 15px;
    }

    .competitor-details {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Buttons touch-friendly */
    .btn {
        padding: 12px 20px;
        font-size: 15px;
        min-height: 44px; /* Touch target size */
    }

    .btn-small {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 40px;
    }

    /* Number buttons for races */
    .number-btn {
        padding: 15px;
        font-size: 1.2rem;
        min-height: 60px;
    }

    /* Heat/Race cards */
    .heat-card {
        padding: 15px;
    }

    .heat-title {
        font-size: 1.2rem;
    }

    .heat-timer {
        font-size: 1.5rem;
    }

    /* Live view */
    .live-timer {
        font-size: 3rem;
    }

    .live-event-info {
        font-size: 1.5rem;
    }

    .live-rank {
        font-size: 2rem;
        min-width: 50px;
    }

    .live-competitor-name {
        font-size: 1.3rem;
    }

    .live-score {
        font-size: 2rem;
    }

    /* Tables scroll horizontally */
    .result-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .result-table {
        min-width: 500px;
    }

    .result-table th,
    .result-table td {
        padding: 10px 8px;
        font-size: 14px;
    }

    /* Dropdown menus */
    .dropdown-menu {
        min-width: 180px;
        max-width: 90vw;
    }

    .dropdown-item {
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* Mobile Portrait (320px - 480px) */
@media (max-width: 480px) {
    .container {
        padding: 8px;
    }

    header {
        padding: 12px;
    }

    header h1 {
        font-size: 1.3rem;
    }

    .header-controls {
        flex-direction: column;
        width: 100%;
    }

    .header-controls .btn {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .tab-btn {
        padding: 12px 10px;
        font-size: 13px;
        min-width: 90px;
    }

    .tab-content {
        padding: 10px;
    }

    .card {
        padding: 12px;
    }

    .card h2 {
        font-size: 1.2rem;
    }

    .card h3 {
        font-size: 1rem;
    }

    .input {
        padding: 12px;
    }

    .btn {
        padding: 12px 16px;
        font-size: 14px;
    }

    .competitor-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .competitor-name {
        font-size: 14px;
    }

    .competitor-bib,
    .competitor-division,
    .competitor-location,
    .competitor-age {
        font-size: 13px;
    }

    .number-btn {
        padding: 12px;
        font-size: 1rem;
        min-height: 50px;
    }

    .heat-controls {
        flex-direction: column;
    }

    .heat-controls .btn {
        width: 100%;
    }

    .live-header {
        padding: 20px;
        margin: -10px -10px 20px -10px;
    }

    .live-timer {
        font-size: 2.5rem;
    }

    .live-event-info {
        font-size: 1.2rem;
    }

    .live-competitor {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        gap: 10px;
    }

    .live-rank {
        font-size: 1.8rem;
        min-width: auto;
    }

    .live-competitor-name {
        font-size: 1.1rem;
    }

    .live-score {
        font-size: 1.5rem;
    }

    .result-table th,
    .result-table td {
        padding: 8px 6px;
        font-size: 13px;
    }

    .score-input {
        padding: 15px;
        font-size: 1.5rem;
    }

    .wave-btn {
        padding: 12px;
        font-size: 16px;
    }

    .judge-competitor-card {
        padding: 15px;
    }
}

/* Competitor Selection Buttons */
.competitor-select-btn {
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.competitor-select-btn:hover {
    border-color: #007fff;
    transform: scale(1.05);
}

.competitor-select-btn.selected {
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: white;
    border-color: #007fff;
    font-weight: 500;
}

.competitor-select-btn.selected:hover {
    background: linear-gradient(135deg, #0056b3 0%, #007fff 100%);
    transform: scale(1.05);
}

/* Scrollbar styling for touch devices */
@media (hover: none) and (pointer: coarse) {
    .tabs::-webkit-scrollbar {
        height: 4px;
    }

    .tabs::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .tabs::-webkit-scrollbar-thumb {
        background: #007fff;
        border-radius: 4px;
    }

    .checkbox-list::-webkit-scrollbar {
        width: 6px;
    }

    .checkbox-list::-webkit-scrollbar-thumb {
        background: #007fff;
        border-radius: 6px;
    }
}

/* Public results — sidebar nav + single detail panel (durstybrands.com/live-results?public=…) */
.public-header {
    background: linear-gradient(135deg, #0b1220 0%, #16213a 100%);
    color: #fff;
    padding: 30px 32px 24px;
    border-top: 4px solid #007fff;
}

.public-header h1 {
    margin: 0;
    font-size: 1.65rem;
    letter-spacing: 0.01em;
    color: #fff;
}

.public-header p {
    margin: 6px 0 0;
    color: #9aa7c7;
    font-size: 0.95rem;
}

.public-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

.public-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

.public-sidebar-section + .public-sidebar-section {
    margin-top: 22px;
}

.public-sidebar-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #007fff;
    margin: 0 0 8px 4px;
}

.public-sidebar-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9a9fa8;
    margin: 14px 0 4px 4px;
}

.public-sidebar-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #23262b;
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease;
}

.public-sidebar-item:hover {
    background: #eef2f9;
}

.public-sidebar-item.active {
    background: #007fff;
    color: #fff;
    font-weight: 600;
}

.public-main {
    flex: 1;
    min-width: 0;
}

.public-empty-state {
    text-align: center;
    color: #8a8f98;
    padding: 90px 20px;
    font-size: 1rem;
}

.public-detail-title {
    margin: 0 0 4px;
    font-size: 1.5rem;
}

.public-detail-meta {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0 0 22px;
}

.public-division-heading {
    background: linear-gradient(135deg, #007fff 0%, #0056b3 100%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 0 0 12px;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
}

.public-subheading {
    font-weight: 600;
    font-size: 0.85rem;
    color: #23262b;
    margin: 0 0 10px;
    cursor: pointer;
    user-select: none;
}

/* Clean chevron used for every collapse toggle on the public page, in
   place of the ▶/▼ glyphs — inherits color so it reads correctly on both
   the blue division heading and the plain-text "Top 3" subheading. */
.chevron-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-style: solid;
    border-color: currentColor;
    border-width: 0 2px 2px 0;
    margin-right: 2px;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    vertical-align: 1px;
}

.chevron-icon.chevron-open {
    transform: rotate(45deg);
}

.podium-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.podium-card {
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #e9ecef;
    background: #fff;
}

.podium-card.gold {
    background: linear-gradient(180deg, #fff9e6 0%, #fff 65%);
    border-color: #edd493;
}

.podium-card.silver {
    background: linear-gradient(180deg, #f5f7f9 0%, #fff 65%);
    border-color: #d6dbe1;
}

.podium-card.bronze {
    background: linear-gradient(180deg, #fcefe4 0%, #fff 65%);
    border-color: #e6c19c;
}

.podium-medal {
    font-size: 1.3rem;
    line-height: 1;
    margin-bottom: 3px;
}

.podium-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: #111;
    line-height: 1.2;
}

.podium-chapter {
    color: #6c757d;
    font-size: 0.7rem;
    margin-top: 1px;
}

.podium-prize {
    display: inline-block;
    margin-top: 5px;
    font-weight: 700;
    font-size: 0.72rem;
    color: #0056b3;
    background: #eaf3ff;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Individual-event podiums show just the medal tier name, no cash — the
   prize breakdown ($500/$350/$150) only applies to the overall series
   leaderboard's podium, via .podium-prize above. */
.podium-label {
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #9a9fa8;
}

/* Fixed-width gutter to the left of a competitor's name in the results
   table — the medal sits in the margin instead of shifting the name over,
   so every name in the column lines up whether or not that row has one. */
.result-medal-slot {
    display: inline-block;
    width: 1.4em;
    text-align: center;
}

/* Public results table — a grid-based row list rather than an actual
   <table>, so on narrow phones it can restructure to a stacked 3-column
   layout (place / name+bib / points) instead of overflowing sideways with
   no visible scroll affordance. Deliberately separate from .result-table
   (used by the admin dashboard) so this doesn't affect that view. */
.public-result-table {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.public-result-header,
.public-result-row {
    display: grid;
    grid-template-columns: 56px 1fr 80px 80px;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.public-result-header {
    background: #007fff;
    color: #fff;
    font-weight: 600;
}

.public-result-row {
    border-top: 1px solid #e9ecef;
}

.public-result-place {
    font-weight: 700;
    font-size: 1.15rem;
}

.public-result-bib-label {
    display: none;
}

.public-result-points {
    font-weight: 700;
    color: #007fff;
    text-align: right;
}

@media (max-width: 560px) {
    .public-result-header {
        display: none;
    }

    .public-result-row {
        grid-template-columns: 32px 1fr auto;
        grid-template-areas: "place name points" ". bib points";
        row-gap: 2px;
    }

    .public-result-place {
        grid-area: place;
    }

    .public-result-name {
        grid-area: name;
    }

    .public-result-points {
        grid-area: points;
        align-self: center;
    }

    .public-result-bib {
        grid-area: bib;
        font-size: 0.8rem;
        color: #6c757d;
    }

    .public-result-bib-label {
        display: inline;
    }
}

@media (max-width: 768px) {
    .public-layout {
        flex-direction: column;
        padding: 20px 16px 48px;
    }

    .public-sidebar {
        width: 100%;
        position: static;
    }

    .podium-row {
        grid-template-columns: 1fr;
    }
}