/* ===========================================
   Fantasy Weather - Custom Styles
   Built for Bulma v1.0.2
   Uses CSS variables for theming compatibility
   Supports light/dark mode toggle
   =========================================== */

/* ===========================================
   CSS Custom Properties - Light Theme (default)
   =========================================== */
:root,
[data-theme="light"] {
    /* App-specific colors for light mode */
    --app-bg: #ffffff;
    --app-bg-secondary: #fafafa;
    --app-text: #363636;
    --app-text-muted: #7a7a7a;
    --app-border: #dbdbdb;
    --app-card-bg: #ffffff;
    --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Modal colors (always dark for contrast) */
    --app-modal-bg: #1a1a1a;
    --app-modal-border: #363636;
    --app-modal-text: #ffffff;
    --app-input-bg: #0d0d0d;
}

/* ===========================================
   CSS Custom Properties - Dark Theme
   =========================================== */
[data-theme="dark"] {
    /* App-specific colors for dark mode */
    --app-bg: #1a1a2e;
    --app-bg-secondary: #16213e;
    --app-text: #eaeaea;
    --app-text-muted: #a0a0a0;
    --app-border: #3a3a5a;
    --app-card-bg: #1f1f3a;
    --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* Modal colors stay dark */
    --app-modal-bg: #0f0f1a;
    --app-modal-border: #2a2a4a;
    --app-modal-text: #ffffff;
    --app-input-bg: #0a0a15;
}

/* ===========================================
   Base Dark Mode Overrides
   =========================================== */
[data-theme="dark"] {
    background-color: var(--app-bg);
    color: var(--app-text);
}

[data-theme="dark"] body {
    background-color: var(--app-bg);
    color: var(--app-text);
}

[data-theme="dark"] .section {
    background-color: var(--app-bg);
}

[data-theme="dark"] .box {
    background-color: var(--app-card-bg);
    color: var(--app-text);
}

[data-theme="dark"] .title,
[data-theme="dark"] .subtitle {
    color: var(--app-text);
}

[data-theme="dark"] .navbar {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-border);
}

[data-theme="dark"] .navbar-item,
[data-theme="dark"] .navbar-link {
    color: var(--app-text);
}

[data-theme="dark"] .navbar-item:hover,
[data-theme="dark"] .navbar-link:hover {
    background-color: transparent !important;
    color: var(--bulma-link, #485fc7) !important;
}

[data-theme="dark"] .navbar-item.is-active,
[data-theme="dark"] .navbar-item:focus,
[data-theme="dark"] .navbar-item:focus-within {
    background-color: transparent !important;
    color: var(--bulma-link, #485fc7) !important;
}

[data-theme="dark"] .navbar-item {
    background-color: transparent !important;
}

[data-theme="dark"] .navbar-burger span {
    background-color: var(--app-text);
}

[data-theme="dark"] .navbar-menu {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-border);
}

[data-theme="dark"] .table {
    background-color: var(--app-card-bg);
    color: var(--app-text);
}

[data-theme="dark"] .table th {
    color: var(--app-text);
}

[data-theme="dark"] .table td {
    border-color: var(--app-border);
}

[data-theme="dark"] .table thead th {
    border-color: var(--app-border);
}

[data-theme="dark"] .table.is-striped tbody tr:nth-child(even) {
    background-color: var(--app-bg-secondary);
}

[data-theme="dark"] tr.is-clickable:hover {
    background-color: var(--app-bg-secondary) !important;
}

[data-theme="dark"] .notification {
    background-color: var(--app-bg-secondary);
    color: var(--app-text);
}

[data-theme="dark"] .notification.is-info {
    background-color: #1a3a5c;
}

[data-theme="dark"] a:not(.button):not(.navbar-item):not(.tag) {
    color: #7aa2f7;
}

[data-theme="dark"] a:not(.button):not(.navbar-item):not(.tag):hover {
    color: #9cb8ff;
}

/* ===========================================
   Utility Classes
   =========================================== */
.hidden {
    display: none;
}

.is-undecorated {
    text-decoration: none;
    color: inherit;
}

/* ===========================================
   Theme Toggle Button
   =========================================== */
.theme-toggle {
    background-color: transparent;
    border: 1px solid var(--app-border);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--app-bg-secondary);
    border-color: var(--bulma-link, #485fc7);
}

.theme-toggle .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Light mode: show moon, hide sun */
[data-theme="light"] .theme-icon-light,
:root:not([data-theme]) .theme-icon-light {
    display: none;
}

[data-theme="light"] .theme-icon-dark,
:root:not([data-theme]) .theme-icon-dark {
    display: inline-flex;
}

/* Dark mode: show sun, hide moon */
[data-theme="dark"] .theme-icon-light {
    display: inline-flex;
}

[data-theme="dark"] .theme-icon-dark {
    display: none;
}

/* ===========================================
   Layout
   =========================================== */
.parent {
    width: 95vw;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===========================================
   Navbar Customizations
   =========================================== */
.navbar {
    border-bottom: 1px solid var(--app-border, #dbdbdb);
    margin-bottom: 1rem;
}

.navbar-item.is-active {
    color: var(--bulma-link, #485fc7);
    background-color: transparent !important;
}

.navbar-item:hover {
    color: var(--bulma-link, #485fc7) !important;
    background-color: transparent !important;
}

/* ===========================================
   Modal Customizations (Always Dark Theme)
   =========================================== */
.modal {
    z-index: 9999 !important;
}

.modal-card {
    background-color: var(--app-modal-bg);
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--bulma-radius-large, 8px);
}

.modal-card-head,
.modal-card-foot {
    background-color: var(--app-modal-bg);
    border-color: var(--app-modal-border);
}

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

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

/* Dark-themed inputs inside modals */
.modal .input,
.modal .textarea {
    background-color: var(--app-input-bg);
    border-color: var(--app-modal-border);
    color: var(--app-modal-text);
}

.modal .input:focus,
.modal .textarea:focus {
    border-color: var(--bulma-link, #485fc7);
    box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}

.modal .input::placeholder,
.modal .textarea::placeholder {
    color: #666;
}

/* Tabs in modals */
.modal .tabs li.is-active a {
    border-color: var(--bulma-link, #485fc7);
    color: var(--bulma-link, #485fc7);
}

.modal .tabs a {
    color: #999;
    border-color: var(--app-modal-border);
}

.modal .tabs a:hover {
    color: var(--app-modal-text);
    border-color: #666;
}

.private-key-box {
    background-color: var(--app-modal-bg);
    border: 1px solid var(--app-modal-border);
    padding: 1rem;
    border-radius: var(--bulma-radius, 6px);
    margin: 1rem 0;
}

/* ===========================================
   Steps Progress Indicator
   =========================================== */
.steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.step-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.step-item:not(:last-child):after {
    content: "";
    position: absolute;
    left: calc(50% + 1.5rem);
    top: 1rem;
    width: calc(100% - 3rem);
    height: 2px;
    background: var(--app-border, #dbdbdb);
}

.step-marker {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--app-border, #dbdbdb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}

.step-item.is-active .step-marker {
    background: var(--bulma-link, #3273dc);
}

.step-item.is-completed .step-marker {
    background: var(--bulma-success, #48c774);
}

.step-title {
    font-size: 0.875rem;
    color: var(--app-text, #363636);
}

/* ===========================================
   Signing Session Cards
   =========================================== */
.signing-progress-content {
    background: var(--app-card-bg, white);
    border-radius: var(--bulma-radius, 6px);
    padding: 1.5rem;
    margin-top: 1rem;
}

#signingProgressContainer {
    min-height: 100px;
    padding: 1rem;
}

.signing-session-card {
    background: var(--app-card-bg, white);
    border-radius: var(--bulma-radius-large, 8px);
    box-shadow: var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
    margin-bottom: 15px;
    padding: 20px;
    transition: box-shadow 0.3s ease;
    border-left: 4px solid transparent;
}

.signing-session-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.signing-session-card.initialized {
    border-left-color: var(--bulma-link, #3273dc);
}

.signing-session-card.completed {
    border-left-color: var(--bulma-success, #48c774);
}

.signing-session-card.error {
    border-left-color: var(--bulma-danger, #f14668);
}

.competition-details {
    font-size: 0.9em;
    color: var(--app-text-muted);
    margin: 10px 0;
}

.session-status {
    font-weight: 500;
    color: var(--bulma-link, #3273dc);
    margin-top: 10px;
}

.progress-steps {
    margin-top: 15px;
    position: relative;
}

.progress-line {
    height: 2px;
    background: var(--app-border, #dbdbdb);
    position: relative;
    margin: 10px 0;
}

.progress-line-fill {
    height: 100%;
    background: var(--bulma-link, #3273dc);
    transition: width 0.3s ease;
}

/* ===========================================
   Table Enhancements
   =========================================== */
tr.is-clickable {
    cursor: pointer;
}

tr.is-clickable:hover {
    background-color: var(--app-bg-secondary, #fafafa);
}

/* ===========================================
   Touch-Friendly Buttons
   Ensures minimum 44px touch targets (WCAG)
   =========================================== */
.button {
    min-height: 44px;
}

.button.is-small {
    min-height: 36px;
}

/* ===========================================
   RESPONSIVE: Tablet & Below (max-width: 1023px)
   Bulma's tablet breakpoint
   =========================================== */
@media screen and (max-width: 1023px) {
    /* Navbar mobile menu - hidden by default, shown when burger is active */
    .navbar-menu {
        display: none;
        background-color: var(--app-bg-secondary, #fafafa);
        border-top: 1px solid var(--app-border, #dbdbdb);
        padding: 0.5rem 0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .navbar-menu.is-active {
        display: block;
    }

    .navbar {
        position: relative;
    }

    .navbar-item {
        padding: 0.75rem 1rem;
    }

    .navbar-end .buttons {
        justify-content: center;
        padding: 0.5rem;
        flex-wrap: wrap;
    }

    .navbar-end .button {
        margin: 0.25rem;
    }

    /* Table adjustments */
    .table {
        font-size: 0.9rem;
    }
}

/* ===========================================
   RESPONSIVE: Mobile (max-width: 768px)
   Bulma's mobile breakpoint
   =========================================== */
@media screen and (max-width: 768px) {
    /* Reduce section padding */
    .section {
        padding: 1.5rem 1rem;
    }

    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .box {
        padding: 1rem;
    }

    /* Header/branding - stack vertically on mobile */
    .level {
        display: block;
    }

    .level-left,
    .level-right {
        display: block;
        text-align: center;
        margin-bottom: 0.75rem;
    }

    .level-left .title {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .level-left p.level-item {
        margin-left: 0 !important;
        font-size: 0.8rem;
    }

    .level-right {
        margin-top: 0.5rem;
    }

    /* ---- Card-based table layout on mobile ---- */
    .table-container {
        overflow-x: visible;
        margin: 0;
        padding: 0;
    }

    .table.is-card-mobile,
    .table.is-card-mobile thead,
    .table.is-card-mobile tbody,
    .table.is-card-mobile tr,
    .table.is-card-mobile th,
    .table.is-card-mobile td {
        display: block;
        width: 100%;
    }

    .table.is-card-mobile thead {
        display: none;
    }

    .table.is-card-mobile tr {
        background: var(--app-bg-secondary, #fafafa);
        border: 1px solid var(--app-border, #dbdbdb);
        border-radius: 8px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .table.is-card-mobile tr:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .table.is-card-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0;
        border: none;
        white-space: normal;
        font-size: 0.875rem;
    }

    .table.is-card-mobile td:not(:last-child) {
        border-bottom: 1px dotted var(--app-border, #e8e8e8);
    }

    .table.is-card-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--bulma-text-weak, #7a7a7a);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
        margin-right: 1rem;
    }

    .table.is-card-mobile td .button {
        width: 100%;
        margin-top: 0.25rem;
    }

    [data-theme="dark"] .table.is-card-mobile tr {
        background: var(--app-card-bg, #1e1e3a);
        border-color: var(--app-border, #3a3a5a);
    }

    /* Utility class to hide columns on mobile */
    .hide-mobile,
    .is-hidden-mobile {
        display: none !important;
    }

    /* Smaller buttons in tables (fallback for non-card tables) */
    .table:not(.is-card-mobile) .button.is-small {
        font-size: 0.7rem;
        padding: 0.4em 0.6em;
        min-height: 32px;
    }

    /* Form inputs - prevent iOS zoom */
    .input,
    .textarea,
    .select select {
        font-size: 16px !important;
        min-height: 44px;
    }

    /* Modal improvements for mobile */
    .modal-card {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        border-radius: var(--bulma-radius, 6px);
    }

    .modal-card-body {
        padding: 1rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-content {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-content .box {
        padding: 1rem;
    }

    /* Tabs wrap on mobile */
    .tabs ul {
        flex-wrap: wrap;
    }

    .tabs li {
        flex-grow: 1;
    }

    .tabs a {
        padding: 0.5em 0.75em;
        font-size: 0.875rem;
        justify-content: center;
    }

    /* Notification sizing */
    .notification {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Tag sizing */
    .tag {
        font-size: 0.7rem;
    }

    /* Steps - vertical layout on mobile */
    .steps {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .step-item {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .step-item:not(:last-child):after {
        display: none;
    }

    /* Signing cards */
    .signing-session-card {
        padding: 1rem;
    }

    /* QR code container */
    #qrContainer {
        max-width: 100%;
        overflow: hidden;
    }

    #qrContainer bitcoin-qr {
        max-width: 280px;
        margin: 0 auto;
        display: block;
    }

    /* Payment request textarea */
    #paymentRequest {
        font-size: 0.75rem;
        word-break: break-all;
    }

    /* Checkbox improvements */
    .checkbox {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .checkbox input[type="checkbox"] {
        margin-top: 0.2rem;
        min-width: 20px;
        min-height: 20px;
        flex-shrink: 0;
    }

    /* Button full-width on mobile where appropriate */
    .field .button.is-fullwidth {
        margin-top: 0.5rem;
    }
}

/* ===========================================
   RESPONSIVE: Small Mobile (max-width: 480px)
   Extra small screens
   =========================================== */
@media screen and (max-width: 480px) {
    .section {
        padding: 1rem 0.5rem;
    }

    .level-left .title {
        font-size: 1.25rem;
    }

    .box {
        padding: 0.75rem;
        border-radius: var(--bulma-radius-small, 4px);
    }

    /* Even smaller table text */
    .table {
        font-size: 0.75rem;
    }

    .table th,
    .table td {
        padding: 0.4em;
    }

    /* Modal nearly full-screen */
    .modal-card {
        margin: 0.25rem;
        max-width: calc(100vw - 0.5rem);
        max-height: calc(100vh - 0.5rem);
    }

    .modal-card-head {
        padding: 0.75rem 1rem;
    }

    .modal-card-title {
        font-size: 1.1rem;
    }

    /* QR code smaller */
    #qrContainer bitcoin-qr {
        max-width: 240px;
    }
}

/* ===========================================
   Utility: Show only on tablet and up
   =========================================== */
@media screen and (min-width: 769px) {
    .is-hidden-tablet-up {
        display: none !important;
    }
}

/* ===========================================
   Accessibility
   =========================================== */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visible for keyboard navigation */
.button:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.select select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--bulma-link, #485fc7);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .button {
        border-width: 2px;
    }

    .input,
    .textarea,
    .select select {
        border-width: 2px;
    }

    .signing-session-card {
        border-left-width: 6px;
    }
}

/* ===========================================
   Smooth theme transitions
   =========================================== */
html {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

body,
.section,
.box,
.navbar,
.navbar-menu,
.table,
.notification {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* ===========================================
   Location Selector - Map & Table
   =========================================== */

.location-map-container {
    position: relative;
    width: 100%;
}

.map-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: var(--app-bg-secondary, #fafafa);
}

.map-wrapper.is-panning {
    cursor: grabbing;
}

.map-zoomable {
    position: relative;
    width: 100%;
    transform-origin: center center;
    transition: transform 0.1s ease-out;
    cursor: grab;
}

.map-zoomable:active {
    cursor: grabbing;
}

.usa-map {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Station markers overlay */
.station-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.station-marker {
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease;
    stroke: #fff;
    stroke-width: 1.5;
    transform-origin: center;
    transform-box: fill-box;
}

.station-marker:hover {
    transform: scale(1.5);
}

.station-marker.selected {
    stroke: #ffdd57;
    stroke-width: 3;
    transform: scale(1.25);
}

/* Region colors for markers */
.station-marker.region-alaska-hawaii {
    fill: #8b5cf6; /* Purple */
}

.station-marker.region-pacific {
    fill: #a855f7; /* Purple */
}

.station-marker.region-mountain {
    fill: #10b981; /* Green */
}

.station-marker.region-central {
    fill: #f59e0b; /* Amber */
}

.station-marker.region-eastern {
    fill: #06b6d4; /* Cyan */
}

/* Zoom controls */
.map-zoom-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bulma-scheme-main, #fff);
    border-radius: 6px;
    padding: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 50;
}

.map-zoom-controls .button {
    min-height: 32px;
    width: 32px;
    padding: 0;
}

.zoom-level {
    font-size: 0.75rem;
    min-width: 40px;
    text-align: center;
    color: var(--bulma-text-weak, #7a7a7a);
}

/* IATA airport code badge */
.tag.is-iata {
    background-color: #6b7280;
    color: #fff;
}

/* Station popup (oracle-style forecast grid) */
.station-popup {
    position: absolute;
    z-index: 100;
    background: var(--bulma-scheme-main, #fff);
    border: 1px solid var(--bulma-border, #dbdbdb);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    min-width: 300px;
    max-width: 360px;
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.popup-station-id {
    font-size: 1rem;
}

.popup-name {
    font-size: 0.875rem;
    color: var(--bulma-text-weak, #7a7a7a);
    margin-bottom: 0.75rem;
}

/* Popup forecast grid */
.popup-forecast-grid {
    font-size: 0.75rem;
}

.forecast-header-row,
.forecast-data-row {
    display: grid;
    grid-template-columns: 70px repeat(3, 1fr);
    gap: 0.25rem;
    align-items: center;
}

.forecast-header-row {
    font-weight: 600;
    color: var(--bulma-text-weak, #7a7a7a);
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--bulma-border, #dbdbdb);
}

.forecast-data-row {
    padding: 0.2rem 0;
}

.forecast-data-row:not(:last-child) {
    border-bottom: 1px dotted var(--bulma-border-weak, #e8e8e8);
}

.forecast-col-label {
    font-size: 0.7rem;
    color: var(--bulma-text-weak, #7a7a7a);
    white-space: nowrap;
}

.forecast-col {
    text-align: center;
    font-family: monospace;
}

.forecast-col.forecast-na {
    color: var(--bulma-text-weak, #7a7a7a);
}

.popup-loading {
    text-align: center;
    padding: 0.5rem;
    color: var(--bulma-text-weak, #7a7a7a);
}

/* Entries map weather popup grid */
.popup-weather-grid {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.weather-grid-row {
    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem 0;
    align-items: center;
}

.weather-grid-row:not(:last-child) {
    border-bottom: 1px dotted var(--bulma-border-weak, #e8e8e8);
}

.weather-grid-header {
    font-weight: 600;
    color: var(--bulma-text-weak, #7a7a7a);
    border-bottom: 1px solid var(--bulma-border, #dbdbdb) !important;
    padding-bottom: 0.3rem;
    margin-bottom: 0.1rem;
}

.weather-grid-label {
    font-size: 0.75rem;
    color: var(--bulma-text-weak, #7a7a7a);
}

.weather-grid-value {
    text-align: center;
    font-family: monospace;
}

.popup-action {
    text-align: center;
}

.popup-close {
    margin-left: auto;
}

/* Region legend */
.region-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.legend-dot.region-alaska-hawaii {
    background: #8b5cf6;
}

.legend-dot.region-pacific {
    background: #a855f7;
}

.legend-dot.region-mountain {
    background: #10b981;
}

.legend-dot.region-central {
    background: #f59e0b;
}

.legend-dot.region-eastern {
    background: #06b6d4;
}

/* Location table styles */
.location-table-container {
    max-height: 500px;
    overflow-y: auto;
}

.region-section {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--app-bg-secondary, #fafafa);
}

.region-section .region-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--app-border, #dbdbdb);
}

.region-section.region-eastern {
    border-left: 4px solid #06b6d4;
}

.region-section.region-central {
    border-left: 4px solid #f59e0b;
}

.region-section.region-mountain {
    border-left: 4px solid #10b981;
}

.region-section.region-pacific {
    border-left: 4px solid #a855f7;
}

.region-section.region-alaska-hawaii {
    border-left: 4px solid #8b5cf6;
}

.station-checkbox-label {
    display: block;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.station-checkbox-label:hover {
    background-color: var(--app-bg, #fff);
}

.station-checkbox-label input:checked + strong {
    color: var(--bulma-link, #485fc7);
}

/* Dark mode adjustments */
[data-theme="dark"] .map-wrapper {
    background: var(--app-bg-secondary);
}

[data-theme="dark"] .usa-map {
    filter: invert(1) brightness(0.55) contrast(1.1);
}

[data-theme="dark"] .map-zoom-controls {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
}

[data-theme="dark"] .region-section {
    background: var(--app-bg-secondary);
}

[data-theme="dark"] .station-checkbox-label:hover {
    background-color: var(--app-card-bg);
}

[data-theme="dark"] .station-popup {
    background: var(--app-card-bg);
    border-color: var(--app-border);
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .region-legend {
        gap: 1rem;
        font-size: 0.8rem;
    }

    .legend-dot {
        width: 10px;
        height: 10px;
    }

    .location-table-container {
        max-height: 400px;
    }

    .region-stations .column {
        padding: 0.25rem;
    }

    .station-checkbox-label {
        padding: 0.35rem;
        font-size: 0.875rem;
    }

    .station-popup {
        min-width: 260px;
        max-width: 300px;
        font-size: 0.75rem;
    }

    .forecast-header-row,
    .forecast-data-row {
        grid-template-columns: 55px repeat(3, 1fr);
        gap: 0.15rem;
    }

    .forecast-col-label {
        font-size: 0.65rem;
    }

    .popup-forecast-grid {
        font-size: 0.7rem;
    }
}

/* ===========================================
   Entry Form - Over/Par/Under Pick Buttons
   =========================================== */
.pick-button {
    min-width: 70px;
    font-weight: 500;
}

/* Over button - purple */
.pick-button[data-value="over"].is-active {
    background-color: #9b59b6 !important;
    border-color: #9b59b6 !important;
    color: white !important;
}

.pick-button[data-value="over"]:not(.is-active):hover {
    background-color: rgba(155, 89, 182, 0.1);
    border-color: #9b59b6;
    color: #9b59b6;
}

/* Par button - teal/cyan */
.pick-button[data-value="par"].is-active {
    background-color: #16a085 !important;
    border-color: #16a085 !important;
    color: white !important;
}

.pick-button[data-value="par"]:not(.is-active):hover {
    background-color: rgba(22, 160, 133, 0.1);
    border-color: #16a085;
    color: #16a085;
}

/* Under button - cool blue */
.pick-button[data-value="under"].is-active {
    background-color: #3498db !important;
    border-color: #3498db !important;
    color: white !important;
}

.pick-button[data-value="under"]:not(.is-active):hover {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: #3498db;
    color: #3498db;
}

/* Weather context display in entry form */
.weather-context {
    font-size: 0.85rem;
    color: var(--bulma-text-weak, #7a7a7a);
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: var(--app-bg-secondary, #fafafa);
    border-radius: 4px;
}

.weather-context .weather-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.weather-context .weather-label {
    font-weight: 500;
}

.weather-context .weather-value {
    font-family: monospace;
}

.weather-context .forecast-value {
    color: var(--bulma-info, #3e8ed0);
    font-weight: 600;
}

[data-theme="dark"] .weather-context {
    background: var(--app-bg-secondary);
}

/* Competitions table - compact layout */
.competitions-table {
    font-size: 0.9rem;
}

.competitions-table th,
.competitions-table td {
    white-space: nowrap;
    padding: 0.5em 0.75em;
}

/* Competitions table card layout on mobile */
@media screen and (max-width: 768px) {
    .competitions-table td {
        white-space: normal;
    }
}

.competitions-table .utc-time {
    font-family: inherit;
}

/* Fix table hover/selected states in dark mode - keep text readable */
[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: var(--app-bg-secondary) !important;
    color: inherit;
}

[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover td {
    color: var(--bulma-text, #f5f5f5);
}

[data-theme="dark"] .table tbody tr.is-selected {
    background-color: var(--bulma-link, #485fc7) !important;
    color: white;
}

[data-theme="dark"] .table tbody tr.is-selected td {
    color: white;
}

/* Dark mode - pick buttons should have white text/border when not selected */
[data-theme="dark"] .pick-button.is-outlined {
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .pick-button.is-outlined:hover {
    border-color: white;
    color: white;
}

/* ===========================================
   Entry Detail Cards (modal)
   =========================================== */
.entry-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.entry-detail-header .entry-id {
    font-size: 0.8rem;
    color: var(--app-text-muted, #7a7a7a);
    font-family: monospace;
}

.entry-detail-score {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    background: rgba(72, 95, 199, 0.15);
    color: var(--bulma-link, #485fc7);
}

.entry-pick-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: var(--app-bg-secondary, #fafafa);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

[data-theme="dark"] .entry-pick-card {
    background: var(--app-bg-secondary, #16213e);
}

.entry-pick-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.entry-pick-info {
    min-width: 0;
}

.entry-pick-label {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.entry-pick-station {
    font-size: 0.7rem;
    color: var(--app-text-muted, #7a7a7a);
}

.entry-pick-values {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: var(--app-text-muted, #7a7a7a);
    font-family: monospace;
}

.entry-pick-forecast,
.entry-pick-observed {
    display: block;
}

.entry-pick-observed strong {
    color: var(--bulma-link, #485fc7);
}

.entry-pick-result {
    text-align: right;
    white-space: nowrap;
}

.entry-pick-choice {
    font-size: 0.75rem;
    font-weight: 600;
}

.entry-pick-choice.pick-over {
    color: #9b59b6;
}

.entry-pick-choice.pick-par {
    color: #16a085;
}

.entry-pick-choice.pick-under {
    color: #3498db;
}

.entry-pick-points {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 0.1rem;
}

.entry-pick-points.points-high {
    color: var(--bulma-success, #48c774);
}

.entry-pick-points.points-mid {
    color: var(--bulma-info, #3e8ed0);
}

.entry-pick-points.points-zero {
    color: var(--app-text-muted, #7a7a7a);
}

.entry-pending-msg {
    font-size: 0.8rem;
    color: var(--app-text-muted, #7a7a7a);
    text-align: center;
    padding: 0.5rem;
}