* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: #f5f5f5;
            color: #302b27;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 16px;
        }
        
        h1 {
            font-size: 22px;
            font-weight: 400;
            text-align: center;
            margin: 16px 0 8px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0px;
        }
        
        h1 .title-icon {
            margin-right: -1px;
        }
        
        .title-icon {
            font-size: 26px;
            color: #ff9800;
            cursor: pointer;
            padding: 4px;
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .title-icon:hover {
            background: rgba(255, 152, 0, 0.1);
            transform: scale(1.1);
        }
        
        /* Dark mode styles */
        [data-theme="dark"] {
            background: #121212;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .search-box {
            background: #1e1e1e;
            border-color: #333;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .search-box:focus {
            border-color: #355ec0;
        }
        
        [data-theme="dark"] .search-clear-btn {
            color: #999;
        }
        
        [data-theme="dark"] .search-clear-btn:hover {
            background-color: rgba(255, 255, 255, 0.08);
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-btn {
            background: #1e1e1e;
            border-color: #333;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-btn:hover {
            background: #2a2a2a;
            border-color: #355ec0;
        }
        
        [data-theme="dark"] .court-btn-icon {
            background: #2a2a2a;
        }
        
        [data-theme="dark"] .court-btn-icon .material-icons {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-btn-primary {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-btn-secondary {
            color: #bbb;
        }
        
        [data-theme="dark"] .court-btn-tertiary {
            color: #888;
        }
        
        [data-theme="dark"] .court-btn-temp {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-btn-status.status-dry {
            background: #0d4f0f;
            color: #66ff66;
        }
        
        [data-theme="dark"] .court-btn-status.status-drying {
            background: #e65100;
            color: #ffb74d;
        }
        
        [data-theme="dark"] .court-btn-status.status-wet {
            background: #7a0e0e;
            color: #ff6b6b;
        }
        
        [data-theme="dark"] .court-btn-status.status-indoor {
            background: #0d47a1;
            color: #6a8edc;
        }
        
        [data-theme="dark"] .court-btn-status.status-error {
            background: #b71c1c;
            color: #ff5252;
        }
        
        /* HIDE ALL FAVORITE BUTTONS */
        .favorite-btn,
        .court-row-favorite {
            display: none !important;
        }

        /* Dark theme favorite button styles */
        [data-theme="dark"] .favorite-btn {
            background: rgba(30, 30, 30, 0.95);
            border: 1px solid #333;
        }

        [data-theme="dark"] .favorite-btn:hover {
            background: rgba(42, 42, 42, 1);
            border-color: #ff9800;
        }

        [data-theme="dark"] .favorite-btn .material-icons {
            color: #bbb;
        }

        [data-theme="dark"] .favorite-btn.favorited .material-icons {
            color: #ff9800;
        }

        [data-theme="dark"] .favorite-btn:hover .material-icons {
            color: #ff9800;
        }

        [data-theme="dark"] .court-row-favorite {
            border-left-color: #333;
        }

        [data-theme="dark"] .court-row-favorite .favorite-btn:hover {
            background: rgba(255, 152, 0, 0.1);
        }
        
        [data-theme="dark"] .weather-card {
            background: #1e1e1e;
        }
        
        [data-theme="dark"] .court-stats {
            background: #2a2a2a;
        }
        
        [data-theme="dark"] .condition-card {
            background: #2a2a2a;
        }
        
        [data-theme="dark"] .playability-excellent {
            background: #1b5e20;
            color: #4da954;
        }
        
        [data-theme="dark"] .playability-playable {
            background: #e65100;
            color: #ffb74d;
        }
        
        [data-theme="dark"] .playability-not-playable {
            background: #b71c1c;
            color: #fc8aa0;
        }
        
        [data-theme="dark"] .alert-info {
            background: #0d47a1;
            color: #6a8edc;
        }
        
        [data-theme="dark"] .alert-error {
            background: #b71c1c;
            color: #fc8aa0;
        }
        
        [data-theme="dark"] .title-icon:hover {
            background: rgba(255, 152, 0, 0.1);
        }
        
        [data-theme="dark"] .footer {
            border-color: #333;
            color: #666;
        }
        
        [data-theme="dark"] div[style*="background: #f0f8ff"] {
            background: #1a237e !important;
            color: #6a8edc !important;
        }
        
        .subtitle {
            text-align: center;
            color: #666;
            margin-top: -8px;
            margin-bottom: 64px;
            font-size: 13px;
        }
        
        /* Responsive subtitle for mobile */
        @media (max-width: 768px) {
            .subtitle {
                font-size: 11px;
                margin-bottom: 48px;
            }
        }
        
        .search-box {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            margin-bottom: 16px;
            background: white;
        }
        
        .search-box:focus {
            outline: none;
            border-color: #355ec0;
        }
        
        .search-box::placeholder {
            font-size: 12px;
        }
        
        /* Search container for input + clear button */
        .search-container {
            position: relative;
            margin-bottom: 32px;
        }
        
        .search-container .search-box {
            margin-bottom: 0;
            padding-right: 44px; /* Make room for clear button */
        }
        
        /* Search clear button */
        .search-clear-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            padding: 8px;
            cursor: pointer;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            color: #666;
        }
        
        .search-clear-btn:hover {
            background-color: rgba(0, 0, 0, 0.04);
            color: #333;
        }
        
        .search-clear-btn.visible {
            opacity: 1;
            visibility: visible;
        }
        
        
        .search-clear-btn .material-icons {
            font-size: 18px;
        }
        
        /* Rotating animation for loading spinners */
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .rotating {
            animation: rotate 1s linear infinite;
        }
        
        /* Search status text */
        .search-status-text {
            text-align: left;
            color: #666;
            font-size: 12px;
            margin: -8px 0 16px 0;
            padding: 0 4px;
            font-style: italic;
            animation: fadeIn 0.3s ease-in;
        }
        
        [data-theme="dark"] .search-status-text {
            color: #b0b0b0;
        }
        
        .refresh-status-text {
            text-align: center;
            color: #666;
            font-size: 12px;
            margin: -8px 0 16px 0;
            padding: 0 4px;
            font-style: italic;
            animation: fadeIn 0.3s ease-in;
        }
        
        [data-theme="dark"] .refresh-status-text {
            color: #b0b0b0;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 16px 0 8px 0;
        }
        
        .section-title {
            font-size: 14px;
            font-weight: 500;
            color: #666;
            margin: 0;
        }
        
        .view-toggle-section {
            margin-top: 40px;
            margin-bottom: 2px;
            display: flex;
            justify-content: center;
        }
        
        .section-title-refresh-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding: 0 4px;
        }
        
        .section-title-refresh-container .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #666;
            margin: 0;
        }
        
        .refresh-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            border-radius: 50%;
            color: #666;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .refresh-btn:hover {
            background: rgba(102, 102, 102, 0.1);
            color: #2196F3;
            transform: scale(1.1);
        }
        
        .refresh-btn .material-icons {
            font-size: 18px;
        }
        
        .refresh-btn.refreshing {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        .refresh-btn.refreshing .material-icons {
            animation: continuous-spin 1s linear infinite;
        }
        
        @keyframes continuous-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Dark theme support for refresh button */
        [data-theme="dark"] .refresh-btn {
            color: #ccc;
        }
        
        [data-theme="dark"] .refresh-btn:hover {
            background: rgba(204, 204, 204, 0.1);
            color: #2196F3;
        }
        
        [data-theme="dark"] .section-title-refresh-container .section-title {
            color: #e0e0e0;
        }

        /* Section Actions Container */
        .section-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Find Nearby Button */
        .find-nearby-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px 8px;
            border-radius: 16px;
            color: #666;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .find-nearby-btn:hover {
            background: rgba(102, 102, 102, 0.1);
            color: #2196F3;
            transform: scale(1.05);
        }
        
        .find-nearby-btn .material-icons {
            font-size: 16px;
        }
        
        .find-nearby-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        .find-nearby-btn.loading {
            opacity: 0.7;
        }
        
        /* Dark theme support for find nearby button */
        [data-theme="dark"] .find-nearby-btn {
            color: #ccc;
        }
        
        [data-theme="dark"] .find-nearby-btn:hover {
            background: rgba(204, 204, 204, 0.1);
            color: #2196F3;
        }

        /* Hide button text on small screens */
        @media (max-width: 480px) {
            .find-nearby-btn .btn-text {
                display: none;
            }
            .find-nearby-btn {
                padding: 6px;
                border-radius: 50%;
            }
        }
        
        .court-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 24px;
            margin-top: 0;
        }
        
        .court-btn {
            position: relative;
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.2s;
            min-height: 72px;
        }
        
        .court-btn:hover {
            background: #f8f9fa;
            border-color: #355ec0;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
        }
        
        .court-btn:active {
            transform: translateY(0);
        }
        
        .court-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        /* Grid Card Icon - Match court-row-icon exactly */
        .court-btn-icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            border-radius: 20px;
            margin-right: 16px;
        }
        
        .court-btn-icon .material-icons {
            font-size: 20px;
            color: #666;
        }
        
        /* Grid Card Info Container - Similar to court-row-info */
        .court-btn-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
        
        .court-btn-primary {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 2px;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .court-btn-secondary {
            font-size: 13px;
            color: #666;
            margin-bottom: 1px;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .court-btn-tertiary {
            font-size: 11px;
            color: #999;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* Grid Card Weather - Match court-row-weather */
        .court-btn-weather {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
            min-width: 80px;
        }
        
        .court-btn-temp {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }
        
        .court-btn-weather-icon {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 2px;
        }
        
        .court-btn-weather-icon img {
            width: 16px;
            height: 16px;
            object-fit: contain;
            display: block;
        }
        
        .court-btn-status {
            font-size: 10px;
            font-weight: 500;
            padding: 4px 6px 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
            margin-top: 2px;
        }
        
        .court-btn-status:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-color: currentColor;
        }
        
        /* Status Colors for Grid Cards */
        .court-btn-status.status-dry {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .court-btn-status.status-drying {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .court-btn-status.status-wet {
            background: #ffebee;
            color: #c62828;
        }
        
        .court-btn-status.status-indoor {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .court-btn-status.status-error {
            background: #ffebee;
            color: #d32f2f;
        }
        
        /* ===== FAVORITE BUTTON STYLES ===== */
        .favorite-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 50%;
            padding: 6px;
            width: 32px;
            height: 32px;
            cursor: pointer;
            transition: all 0.2s ease;
            z-index: 10;
            backdrop-filter: blur(4px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .favorite-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .favorite-btn .material-icons {
            color: #999;
            font-size: 18px;
            transition: all 0.2s ease;
            line-height: 1;
        }

        .favorite-btn.favorited .material-icons {
            color: #ff9800;
            animation: favoriteAdded 0.3s ease;
        }

        .favorite-btn:hover .material-icons {
            color: #ff9800;
        }

        /* List row favorite button positioning */
        .court-row-favorite {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            border-left: 1px solid #eee;
        }

        .court-row-favorite .favorite-btn {
            position: static;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
        }

        .court-row-favorite .favorite-btn:hover {
            background: rgba(255, 152, 0, 0.1);
        }

        /* Favorite animation */
        @keyframes favoriteAdded {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }

        /* Touch targets for mobile */
        @media (max-width: 768px) {
            .favorite-btn {
                min-width: 44px;
                min-height: 44px;
                width: 36px;
                height: 36px;
                top: 6px;
                right: 6px;
            }
            
            .court-row-favorite {
                padding: 4px; /* Match expand button padding */
                min-width: 36px; /* Match expand button width */
                min-height: 64px; /* Match expand button height */
            }
            
            .court-row-favorite .favorite-btn {
                min-width: 36px; /* Match expand button width */
                min-height: 64px; /* Match expand button height */
            }
        }
        
        /* Additional mobile breakpoint to match expand button behavior */
        @media (max-width: 680px) {
            .court-row-favorite {
                min-width: 100%; /* Match expand button full width on very small screens */
                min-height: 36px; /* Match expand button height on small screens */
            }
            
            .court-row-favorite .favorite-btn {
                min-width: 100%; /* Match expand button full width on very small screens */
                min-height: 36px; /* Match expand button height on small screens */
                width: 100%;
                border-radius: 8px; /* More rectangular border radius */
                max-width: none; /* Allow button to take full width */
            }
        }
        
        /* Court Row Actions Container */
        .court-row-actions {
            display: flex;
            align-items: center;
        }

        /* Notification Bell Styles */
        .court-row-notifications {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
        }

        .notification-bell {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ff9800;
            color: white;
            border-radius: 12px;
            padding: 2px 6px;
            font-size: 12px;
            min-width: 20px;
            height: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .notification-bell:hover {
            background: #f57c00;
            transform: scale(1.1);
        }

        .notification-bell .material-icons {
            font-size: 12px;
            margin-right: 2px;
        }

        .notification-count {
            font-weight: 600;
            font-size: 10px;
            line-height: 1;
        }

        .notification-bell.hidden {
            display: none;
        }

        /* Dark theme notification bell */
        [data-theme="dark"] .notification-bell {
            background: #f57c00;
        }

        [data-theme="dark"] .notification-bell:hover {
            background: #ff9800;
        }

        /* ===== ACCORDION SECTION STYLES ===== */
        .court-section {
            border-bottom: 1px solid #eee;
            padding: 16px;
        }

        .court-section:last-child {
            border-bottom: none;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-weight: 600;
            color: #333;
        }

        .section-header .material-icons {
            font-size: 18px;
            color: #2196F3;
        }

        .section-title {
            font-size: 14px;
        }

        .section-content {
            margin-left: 26px;
        }

        /* Court Detail Items */
        .court-detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .court-detail-item .material-icons {
            font-size: 16px;
            color: #666;
            margin-top: 2px;
        }

        .court-detail-info {
            flex: 1;
        }

        .court-detail-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 2px;
            text-align: left;
        }

        .court-detail-value {
            font-size: 14px;
            color: #333;
            text-align: left;
        }

        .court-detail-value a {
            color: #2196F3;
            text-decoration: none;
        }

        .court-detail-value a:hover {
            text-decoration: underline;
        }

        /* Current Conditions */
        .current-conditions-card {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .conditions-main {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .weather-icon-large {
            font-size: 32px;
        }

        .weather-main-info {
            flex: 1;
        }

        .weather-condition {
            font-size: 14px;
            color: #666;
            margin-bottom: 2px;
        }

        .temperature-large {
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }

        .conditions-details {
            display: flex;
            gap: 16px;
        }

        .conditions-details .condition-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #666;
        }
        
        .conditions-grid .condition-item {
            background: white;
            border-radius: 6px;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-left: 3px solid green;
        }

        .condition-item .material-icons {
            font-size: 14px;
        }

        /* Loading and Error States */
        .section-loading {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
            font-size: 14px;
            padding: 20px 0;
        }

        .section-loading .material-icons {
            font-size: 18px;
            color: #2196F3;
        }

        .no-data-message {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #999;
            font-size: 14px;
            padding: 20px 0;
        }

        .no-data-message .material-icons {
            font-size: 18px;
        }

        .error-message {
            color: #f44336;
            font-size: 14px;
            padding: 20px 0;
        }

        /* Dark theme for accordion sections */
        [data-theme="dark"] .court-section {
            border-bottom-color: #333;
        }

        [data-theme="dark"] .section-header {
            color: #e0e0e0;
        }

        [data-theme="dark"] .court-detail-label {
            color: #aaa;
        }

        [data-theme="dark"] .court-detail-value {
            color: #e0e0e0;
        }

        [data-theme="dark"] .court-detail-item .material-icons {
            color: #aaa;
        }

        [data-theme="dark"] .current-conditions-card {
            background: #2a2a2a;
        }

        [data-theme="dark"] .weather-condition {
            color: #aaa;
        }

        [data-theme="dark"] .temperature-large {
            color: #e0e0e0;
        }

        [data-theme="dark"] .condition-item {
            color: #aaa;
        }

        [data-theme="dark"] .section-loading {
            color: #aaa;
        }

        [data-theme="dark"] .no-data-message {
            color: #666;
        }

        /* ===== ROW-BASED COURT LAYOUT FRAMEWORK ===== */
        
        /* View Toggle Button */
        .view-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 4px;
            margin-bottom: 24px;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
        
        .view-toggle-btn {
            display: flex;
            align-items: center;
            padding: 6px 12px;
            border: none;
            background: none;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 12px;
            color: #666;
        }
        
        .view-toggle-btn.active {
            background: #355ec0;
            color: white;
        }
        
        .view-toggle-btn .material-icons {
            font-size: 16px;
            margin-right: 4px;
        }
        
        /* Filter Tags */
        .filter-section {
            margin-bottom: 16px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            display: none; /* Hidden by default, shown when filters are active */
        }
        
        .filter-section.active {
            display: block;
        }
        
        .filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .filter-title {
            font-size: 12px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .filter-clear-btn {
            background: none;
            border: none;
            color: #666;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 500;
        }
        
        .filter-clear-btn:hover {
            background: #e9ecef;
            color: #333;
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .filter-tag {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: #355ec0;
            color: white;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
        }
        
        /* Status-specific filter tag colors */
        .filter-tag.status-dry {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .filter-tag.status-drying {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .filter-tag.status-wet {
            background: #ffebee;
            color: #c62828;
        }
        
        .filter-tag.status-error {
            background: #fafafa;
            color: #616161;
        }
        
        .filter-tag .material-icons {
            font-size: 14px;
        }
        
        /* Row-based Court List */
        .court-list {
            display: none; /* Hidden by default, shown when list view is active */
            flex-direction: column;
            gap: 8px;
            margin-bottom: 24px;
            margin-top: 0;
        }
        
        .court-list.active {
            display: flex;
        }
        
        .court-grid.active {
            display: grid;
        }
        
        .court-row {
            display: flex;
            align-items: center;
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 72px; /* Minimum touch target */
        }
        
        .court-row:hover {
            background: #f8f9fa;
            border-color: #355ec0;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
        }
        
        .court-row:active {
            transform: translateY(0);
        }
        
        .court-row:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        /* Row Icon */
        .court-row-icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            border-radius: 20px;
            margin-right: 16px;
        }
        
        .court-row-icon .material-icons {
            font-size: 20px;
            color: #666;
        }
        
        /* Court Information Column */
        .court-row-info {
            flex: 1;
            min-width: 0; /* Allow text truncation */
        }
        
        .court-row-primary {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 2px;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .court-row-secondary {
            font-size: 13px;
            color: #666;
            margin-bottom: 1px;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .court-row-tertiary {
            font-size: 11px;
            color: #999;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* Weather Status Column */
        .court-row-weather {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
            min-width: 80px;
        }

        /* Mobile optimizations for court rows */
        @media (max-width: 768px) {
            .court-row {
                padding: 12px;
                min-height: 80px;
            }
            
            .court-row-icon {
                width: 32px;
                height: 32px;
                margin-right: 12px;
            }
            
            .court-row-icon .material-icons {
                font-size: 18px;
            }
            
            .court-row-weather {
                min-width: 90px;
                margin-left: 8px;
            }
            
            .court-row-weather-icon {
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                gap: 4px;
                margin-bottom: 4px;
            }
            
            .court-row-weather-icon .weather-description {
                font-size: 9px;
                margin-left: 2px;
                /* Smart truncation - only apply when screen width causes actual collision */
            }
            
            /* Truncate only on very small screens where collisions occur */
            @media (max-width: 360px) {
                .court-row-weather-icon .weather-description {
                    max-width: 70px;
                }
            }
            
            /* More aggressive truncation only for ultra-small screens */
            @media (max-width: 320px) {
                .court-row-weather-icon .weather-description {
                    max-width: 50px;
                }
            }
            
            .court-row-primary {
                font-size: 15px;
                margin-bottom: 3px;
            }
            
            .court-row-secondary {
                font-size: 12px;
                margin-bottom: 2px;
            }
            
            .court-row-tertiary {
                font-size: 10px;
                max-width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .court-row-temp {
                font-size: 16px;
            }
        }
        
        .court-row-temp {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }
        
        .court-row-weather-icon {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 2px;
        }
        
        .court-row-weather-icon .material-icons {
            font-size: 16px;
            color: #666;
            vertical-align: middle;
            line-height: 1;
        }
        
        /* Weather description styling for court rows */
        .court-row-weather-icon .weather-description {
            font-size: 10px;
            color: #666;
            margin-left: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* Let it take available space, only constrain when actually colliding */
            flex: 0 1 auto;
            min-width: 0;
        }
        
        /* SVG weather icons for court rows */
        .court-row-weather-icon img {
            width: 16px;
            height: 16px;
            object-fit: contain;
            display: block;
        }
        
        .court-row-status {
            font-size: 10px;
            font-weight: 500;
            padding: 4px 6px 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
            margin-top: 2px;
        }
        
        .court-row-status:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-color: currentColor;
        }
        
        /* Status Colors */
        .court-row-status.status-dry {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .court-row-status.status-drying {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .court-row-status.status-wet {
            background: #ffebee;
            color: #c62828;
        }
        
        .court-row-status.status-indoor {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .court-row-status.status-error {
            background: #ffebee;
            color: #d32f2f;
        }

        .court-row-reports-count {
            display: none;
            align-items: center;
            gap: 4px;
            background: #ff9800;
            color: white;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            margin-top: 4px;
        }

        .court-row-reports-count .material-icons {
            font-size: 14px;
        }

        .reports-count-number {
            font-size: 11px;
            font-weight: 600;
        }
        
        /* Badge Elements - HIDDEN in search results for cleaner display */
        .court-row-badges {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        /* Court Row Accordion Styles - Mobile First */
        .court-row-accordion {
            border: 1px solid #ddd;
            border-radius: 6px;
            background: white;
            margin-bottom: 8px;
            overflow: hidden;
            transition: all 0.2s;
        }

        .court-row-header {
            display: flex;
            align-items: stretch;
            padding: 0;
            transition: all 0.2s;
            min-height: 64px; /* Reduced for mobile */
            position: relative;
        }

        .court-row-main {
            display: flex;
            align-items: center;
            padding: 12px; /* Reduced for mobile */
            flex: 1;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 64px; /* Reduced for mobile */
            min-width: 0; /* Allow flex item to shrink below content size */
            overflow: hidden; /* Prevent content overflow */
        }

        .court-row-main:hover {
            background: #f8f9fa;
        }

        .court-row-expand-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px; /* Reduced for mobile */
            cursor: pointer;
            transition: all 0.2s;
            background: #f8f8f8;
            border-left: 1px solid #eee;
            width: 36px; /* Fixed width */
            min-width: 36px; /* Enforce minimum width */
            max-width: 36px; /* Enforce maximum width */
            min-height: 64px; /* Reduced for mobile */
            flex-shrink: 0; /* Prevent shrinking */
            flex-grow: 0; /* Prevent growing */
            flex-basis: 36px; /* Explicit flex basis */
        }

        .court-row-expand-btn:hover {
            background: #e8f5e9;
            color: #247F2D;
        }

        .court-row-expand-btn .material-icons {
            font-size: 18px; /* Reduced for mobile */
            color: #666;
            transition: transform 0.2s, color 0.2s;
        }

        .court-row-expand-btn:hover .material-icons {
            color: #247F2D;
        }

        .expand-label {
            font-size: 9px; /* Reduced for mobile */
            color: #666;
            font-weight: 500;
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            transition: color 0.2s;
            line-height: 1;
        }

        .court-row-expand-btn:hover .expand-label {
            color: #247F2D;
        }

        .court-row-header.expanded .court-row-expand-btn {
            background: #e8f5e9;
            color: #247F2D;
        }

        .court-row-header.expanded .court-row-expand-btn .material-icons {
            transform: rotate(180deg);
            color: #247F2D;
        }

        .court-row-header.expanded .court-row-expand-btn .expand-label {
            color: #247F2D;
        }

        .court-row-header.expanded {
            border-bottom: 1px solid #eee;
        }

        .court-row-content {
            border-top: 1px solid #eee;
            background: #fafafa;
        }

        .court-row-cameras {
            padding: 16px;
        }

        /* Compact Camera Styles for Accordion */
        .cameras-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .cameras-header .material-icons {
            font-size: 18px;
            color: #666;
        }

        /* Semantic class for all accordion section headers */
        .accordion-section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .accordion-section-header .material-icons {
            font-size: 18px;
            color: #666;
        }

        /* Weather condition card styling */
        .weather-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            border: 1px solid #e9ecef;
        }

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

        .weather-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .weather-temp {
            font-size: 24px;
            font-weight: 700;
            color: #2196F3;
        }

        /* Condition details grid */
        .condition-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        .condition-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }

        .condition-item .material-icons {
            font-size: 16px;
            color: #666;
        }

        .condition-value {
            font-weight: 500;
            color: #333;
        }

        /* Playability recommendation styling */
        .playability-recommendation {
            background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 12px;
            border-left: 4px solid #4caf50;
        }

        .playability-title {
            font-size: 14px;
            font-weight: 600;
            color: #2e7d32;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .playability-description {
            font-size: 13px;
            color: #388e3c;
            line-height: 1.4;
        }

        /* Condition factors list */
        .condition-factors {
            margin-top: 12px;
        }

        .factor-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

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

        .factor-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

        .factor-icon.info {
            background: #e3f2fd;
            color: #1976d2;
        }

        .factor-icon.warning {
            background: #fff3e0;
            color: #f57c00;
        }

        .factor-icon.danger {
            background: #ffebee;
            color: #d32f2f;
        }

        .factor-text {
            flex: 1;
            font-size: 13px;
            color: #555;
            line-height: 1.4;
        }

        /* Precipitation timeline */
        .precipitation-timeline {
            margin-top: 16px;
        }

        .timeline-header {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }

        .timeline-chart {
            background: white;
            border-radius: 6px;
            padding: 12px;
            border: 1px solid #e0e0e0;
        }

        /* Current time indicator */
        .current-time-line {
            position: relative;
            color: #d32f2f;
            font-weight: 600;
            margin: 8px 0;
        }

        /* Reports section styling */
        .reports-container {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 12px;
            margin-top: 8px;
        }

        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 8px;
        }

        .report-btn {
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        .report-btn:hover {
            background: #f0f0f0;
            border-color: #bbb;
        }

        .report-btn .material-icons {
            font-size: 14px;
        }

        /* Compact report items for accordion */
        .report-item-compact {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .report-item-compact:last-child {
            border-bottom: none;
        }

        .report-icon-compact {
            font-size: 16px;
            flex-shrink: 0;
        }

        .report-icon-compact.wet {
            color: #2196F3;
        }

        .report-icon-compact.dry {
            color: #4caf50;
        }

        .report-icon-compact.maintenance {
            color: #ff9800;
        }

        .report-icon-compact.closed {
            color: #f44336;
        }

        .report-text-compact {
            flex: 1;
            font-size: 12px;
            line-height: 1.3;
        }

        .report-time-compact {
            font-size: 10px;
            color: #666;
            margin-top: 2px;
        }

        .reports-more {
            font-size: 11px;
            color: #666;
            padding: 4px 0;
            text-align: center;
            font-style: italic;
        }

        .no-reports-message {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px;
            color: #666;
            font-size: 12px;
            text-align: center;
            justify-content: center;
        }

        .no-reports-message .material-icons {
            font-size: 16px;
        }

        .cameras-grid-compact {
            display: flex;
            flex-direction: column;
            gap: 8px; /* Reduced for mobile */
            margin-bottom: 8px;
        }

        .camera-item-compact {
            display: flex;
            align-items: flex-start;
            gap: 10px; /* Reduced for mobile */
            background: white;
            border-radius: 4px;
            padding: 10px; /* Reduced for mobile */
            border: 1px solid #eee;
        }

        .camera-preview-compact {
            flex-shrink: 0;
            width: 70px; /* Reduced for mobile */
            height: 50px; /* Reduced for mobile */
            border-radius: 4px;
            overflow: hidden;
            background: #f5f5f5;
        }

        .camera-preview-compact img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .camera-info-compact {
            flex: 1;
            min-width: 0;
        }

        .camera-title-compact {
            font-weight: 500;
            font-size: 13px;
            color: #333;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .camera-location-compact {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            color: #666;
            margin-bottom: 2px;
        }

        .camera-distance-compact {
            font-size: 10px;
            color: #999;
            font-weight: 500;
        }

        .camera-actions-compact {
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }

        .camera-btn-compact {
            background: #355ec0;
            color: white;
            border: none;
            border-radius: 20px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }

        .camera-btn-compact:hover {
            background: #274690;
            transform: scale(1.1);
        }

        .camera-btn-compact .material-icons {
            font-size: 16px;
        }

        .cameras-note-compact {
            font-size: 11px;
            color: #999;
            text-align: center;
            font-style: italic;
        }

        .cameras-loading,
        .cameras-error,
        .cameras-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 20px;
            color: #666;
            font-size: 13px;
        }

        .cameras-loading .material-icons,
        .cameras-error .material-icons,
        .cameras-empty .material-icons {
            font-size: 18px;
        }

        .cameras-error {
            color: #f92f60;
        }

        .cameras-empty {
            color: #999;
        }

        /* Court Section Layout - Mobile First */
        .court-row-sections {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .court-section {
            padding: 12px; /* Reduced for mobile */
            border-bottom: 1px solid #eee;
        }

        .court-section:last-child {
            border-bottom: none;
        }

        .section-loading,
        .section-error {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 16px; /* Reduced for mobile */
            color: #666;
            font-size: 12px; /* Reduced for mobile */
        }

        .section-loading .material-icons,
        .section-error .material-icons {
            font-size: 16px; /* Reduced for mobile */
        }

        .section-error {
            color: #f92f60;
        }

        /* Compact Weather Details Styles - Mobile First */
        .weather-details-compact {
            display: flex;
            flex-direction: column;
            gap: 12px; /* Reduced for mobile */
        }

        .weather-header {
            display: flex;
            align-items: center;
            gap: 6px; /* Reduced for mobile */
            font-weight: 500;
            color: #333;
            font-size: 13px; /* Reduced for mobile */
        }

        .weather-header .material-icons {
            font-size: 16px; /* Reduced for mobile */
            color: #666;
        }

        /* Compact Conditions Grid - Mobile First */
        .conditions-grid-compact {
            display: flex;
            flex-direction: column;
            gap: 10px; /* Reduced for mobile */
        }

        .condition-card-compact {
            background: white;
            border-radius: 4px;
            padding: 10px; /* Reduced for mobile */
            border: 1px solid #eee;
        }

        .condition-card-compact.main-condition {
            display: flex;
            align-items: center;
            gap: 10px; /* Reduced for mobile */
        }

        .condition-icon-compact {
            flex-shrink: 0;
            width: 28px; /* Reduced for mobile */
            height: 28px; /* Reduced for mobile */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .condition-icon-compact img {
            width: 28px; /* Reduced for mobile */
            height: 28px; /* Reduced for mobile */
        }

        .condition-content-compact {
            flex: 1;
        }

        .condition-value-compact {
            font-weight: 500;
            font-size: 13px; /* Reduced for mobile */
            color: #333;
            margin-bottom: 2px;
        }

        .condition-label-compact {
            font-size: 10px; /* Reduced for mobile */
            color: #666;
        }

        /* Compact Conditions Row - Mobile Single Column */
        .conditions-row-compact {
            display: grid;
            grid-template-columns: 1fr; /* Single column on mobile */
            gap: 6px; /* Reduced for mobile */
        }

        .condition-item-compact {
            display: flex;
            align-items: center;
            gap: 8px; /* Slightly increased for mobile touch */
            background: white;
            padding: 10px; /* Increased for mobile touch */
            border-radius: 4px;
            border: 1px solid #eee;
        }

        .condition-icon-mini {
            font-size: 16px !important; /* Slightly increased for mobile */
            color: #666;
        }

        .condition-text-compact {
            font-size: 13px; /* Slightly increased for mobile */
            font-weight: 500;
            color: #333;
        }

        /* Compact Playability */
        .playability-compact {
            background: white;
            border-radius: 6px;
            padding: 12px;
            border: 1px solid #eee;
        }

        .playability-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 13px;
            color: #333;
            margin-bottom: 4px;
        }

        .playability-header .material-icons {
            font-size: 16px;
        }

        .playability-subtitle {
            font-size: 11px;
            color: #666;
            margin-left: 24px;
        }

        /* Compact Forecast */
        .forecast-compact {
            background: white;
            border-radius: 6px;
            padding: 12px;
            border: 1px solid #eee;
        }

        .forecast-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 13px;
            color: #333;
            margin-bottom: 12px;
        }

        .forecast-header .material-icons {
            font-size: 16px;
            color: #666;
        }

        .forecast-grid-compact {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columns */
            gap: 6px; /* Reduced for mobile */
        }

        .forecast-day-compact {
            text-align: center;
            padding: 8px 6px; /* Slightly more horizontal padding */
            border-radius: 4px;
            background: #fafafa;
        }

        .forecast-date-compact {
            font-size: 10px;
            font-weight: 500;
            color: #666;
            margin-bottom: 3px; /* Reduced spacing */
        }

        .forecast-icon-compact {
            width: 18px; /* Slightly smaller for mobile */
            height: 18px;
            margin: 0 auto 3px; /* Reduced spacing */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .forecast-icon-compact img {
            width: 18px; /* Slightly smaller for mobile */
            height: 18px;
        }

        .forecast-temps-compact {
            margin-bottom: 2px;
        }

        .forecast-temps-compact .high {
            font-size: 11px;
            font-weight: 600;
            color: #333;
        }

        .forecast-temps-compact .low {
            font-size: 10px;
            color: #666;
            margin-left: 4px;
        }

        .forecast-rain-compact {
            font-size: 9px;
            color: #1976d2;
            font-weight: 500;
        }
        
        /* Current Conditions Card - Clean Layout */
        .current-conditions-card {
            background: white;
            border-radius: 8px;
            border: 1px solid #eee;
            padding: 16px;
            margin-bottom: 12px;
        }
        
        .conditions-main {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .weather-icon-large {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .weather-main-info {
            flex: 1;
        }
        
        .weather-condition {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        
        .temperature-large {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        
        .conditions-metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        .metric-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #eee;
        }
        
        .metric-icon {
            font-size: 18px !important;
            color: #666;
        }
        
        .metric-value {
            font-size: 13px;
            font-weight: 500;
            color: #333;
        }
        
        .court-badge {
            display: inline-flex;
            font-size: 10px;
            font-weight: 500;
            padding: 4px 6px 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .court-badge:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-color: currentColor;
        }
        
        .court-btn-badge {
            display: inline-flex;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
        }
        
        /* Re-enable badges in weather detail modal for complete information */
        .modal .court-badge,
        .weather-detail .court-badge,
        .weather-modal .court-badge {
            display: inline-flex !important;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .modal .court-row-badges,
        .weather-detail .court-row-badges,
        .weather-modal .court-row-badges {
            display: flex !important;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }
        
        .court-badge.badge-private {
            background: #fce4ec;
            color: #ad1457;
        }
        
        .court-badge.badge-indoor {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .court-badge.badge-outdoor {
            background: #e8f5e9;
            color: #388e3c;
        }
        
        .court-badge.badge-mixed {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        /* Badge containers */
        .court-badges,
        .court-row-badges {
            margin-top: 4px;
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        
        /* Loading States */
        .court-row.loading {
            opacity: 0.7;
        }
        
        .court-row-weather.loading {
            opacity: 0.5;
        }
        
        .court-row-weather.loading::after {
            content: '';
            width: 12px;
            height: 12px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #355ec0;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: auto;
        }
        
        /* Dark Theme Support */
        [data-theme="dark"] .view-toggle {
            background: #1e1e1e;
            border-color: #333;
        }
        
        [data-theme="dark"] .view-toggle-btn {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .view-toggle-btn.active {
            background: #355ec0;
            color: white;
        }
        
        /* Dark theme for filter section */
        [data-theme="dark"] .filter-section {
            background: #1e1e1e;
            border-color: #333;
        }
        
        [data-theme="dark"] .filter-title {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .filter-clear-btn {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .filter-clear-btn:hover {
            background: #333;
            color: white;
        }
        
        /* Dark mode status-specific filter tag colors */
        [data-theme="dark"] .filter-tag.status-dry {
            background: #0d4f0f;
            color: #66ff66;
        }
        
        [data-theme="dark"] .filter-tag.status-drying {
            background: #e65100;
            color: #ffb74d;
        }
        
        [data-theme="dark"] .filter-tag.status-wet {
            background: #b71c1c;
            color: #ef9a9a;
        }
        
        [data-theme="dark"] .filter-tag.status-error {
            background: #424242;
            color: #bdbdbd;
        }
        
        [data-theme="dark"] .court-row {
            background: #1e1e1e;
            border-color: #333;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-row:hover {
            background: #2a2a2a;
            border-color: #355ec0;
        }
        
        [data-theme="dark"] .court-row-icon {
            background: #2a2a2a;
        }
        
        [data-theme="dark"] .court-row-icon .material-icons {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-row-primary {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-row-secondary {
            color: #bbb;
        }
        
        [data-theme="dark"] .court-row-tertiary {
            color: #888;
        }
        
        [data-theme="dark"] .court-row-temp {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-row-weather-icon .material-icons {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-row-weather-icon .weather-description {
            color: #bbb;
        }
        
        [data-theme="dark"] .court-row-status.status-dry {
            background: #0d4f0f;
            color: #66ff66;
        }
        
        [data-theme="dark"] .court-row-status.status-drying {
            background: #e65100;
            color: #ffb74d;
        }
        
        [data-theme="dark"] .court-row-status.status-wet {
            background: #7a0e0e;
            color: #ff6b6b;
        }
        
        [data-theme="dark"] .court-row-status.status-indoor {
            background: #0d47a1;
            color: #6a8edc;
        }
        
        [data-theme="dark"] .court-row-status.status-error {
            background: #b71c1c;
            color: #ff5252;
        }

        [data-theme="dark"] .court-row-reports-count {
            background: #f57c00;
            color: white;
        }
        
        [data-theme="dark"] .court-badge.badge-private {
            background: #4a148c;
            color: #ce93d8;
        }
        
        [data-theme="dark"] .court-badge.badge-indoor {
            background: #0d47a1;
            color: #6a8edc;
        }
        
        [data-theme="dark"] .court-badge.badge-outdoor {
            background: #1b5e20;
            color: #4da954;
        }
        
        [data-theme="dark"] .court-badge.badge-mixed {
            background: #3d2914;
            color: #ff9800;
        }

        /* Dark mode for court accordion */
        [data-theme="dark"] .court-row-accordion {
            background: #1e1e1e;
            border-color: #333;
        }

        [data-theme="dark"] .court-row-main:hover {
            background: #2a2a2a;
        }

        [data-theme="dark"] .court-row-expand-btn {
            background: #2a2a2a;
            border-left-color: #333;
        }

        [data-theme="dark"] .court-row-expand-btn:hover {
            background: #1b5e20;
        }

        [data-theme="dark"] .court-row-expand-btn .material-icons,
        [data-theme="dark"] .expand-label {
            color: #e0e0e0;
        }

        [data-theme="dark"] .court-row-expand-btn:hover .material-icons,
        [data-theme="dark"] .court-row-expand-btn:hover .expand-label {
            color: #4da954;
        }

        [data-theme="dark"] .court-row-header.expanded .court-row-expand-btn {
            background: #1b5e20;
        }

        [data-theme="dark"] .court-row-header.expanded .court-row-expand-btn .material-icons,
        [data-theme="dark"] .court-row-header.expanded .court-row-expand-btn .expand-label {
            color: #4da954;
        }

        [data-theme="dark"] .court-row-content {
            background: #252525;
            border-top-color: #333;
        }

        [data-theme="dark"] .cameras-header {
            color: #e0e0e0;
        }

        [data-theme="dark"] .cameras-header .material-icons {
            color: #e0e0e0;
        }

        [data-theme="dark"] .accordion-section-header {
            color: #e0e0e0;
        }

        [data-theme="dark"] .accordion-section-header .material-icons {
            color: #e0e0e0;
        }

        [data-theme="dark"] .camera-item-compact {
            background: #1e1e1e;
            border-color: #333;
        }

        [data-theme="dark"] .camera-preview-compact {
            background: #2a2a2a;
        }

        [data-theme="dark"] .camera-title-compact {
            color: #e0e0e0;
        }

        [data-theme="dark"] .camera-location-compact {
            color: #bbb;
        }

        [data-theme="dark"] .camera-distance-compact {
            color: #888;
        }

        [data-theme="dark"] .cameras-note-compact {
            color: #888;
        }

        /* Dark mode weather card styling */
        [data-theme="dark"] .weather-card {
            background: #2a2a2a;
            border-color: #444;
        }

        [data-theme="dark"] .weather-title {
            color: #e0e0e0;
        }

        [data-theme="dark"] .weather-temp {
            color: #6a8edc;
        }

        [data-theme="dark"] .condition-item .material-icons {
            color: #999;
        }

        [data-theme="dark"] .condition-value {
            color: #e0e0e0;
        }

        [data-theme="dark"] .playability-recommendation {
            background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
            border-left-color: #4caf50;
        }

        [data-theme="dark"] .playability-title {
            color: #a5d6a7;
        }

        [data-theme="dark"] .playability-description {
            color: #c8e6c9;
        }

        /* Dark theme for enhanced playability styles */
        [data-theme="dark"] .enhanced-playability .condition-item {
            background: #1e1e1e;
            border-color: #333;
        }
        
        [data-theme="dark"] .playability-overall-subtitle {
            color: #bbb;
        }
        
        [data-theme="dark"] .condition-tip {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .condition-description {
            color: #bbb;
        }
        
        [data-theme="dark"] .playability-section-title {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .recommendation-text.excellent {
            background: #1b5e20;
            color: #a5d6a7;
            border-color: #2e7d32;
        }
        
        [data-theme="dark"] .recommendation-text.good {
            background: #e65100;
            color: #ffb74d;
            border-color: #ff9800;
        }
        
        [data-theme="dark"] .recommendation-text.moderate {
            background: #0d47a1;
            color: #90caf9;
            border-color: #1976d2;
        }

        [data-theme="dark"] .factor-item {
            border-bottom-color: #333;
        }

        [data-theme="dark"] .factor-icon.info {
            background: #0d47a1;
            color: #6a8edc;
        }

        [data-theme="dark"] .factor-icon.warning {
            background: #e65100;
            color: #ffb74d;
        }

        [data-theme="dark"] .factor-icon.danger {
            background: #b71c1c;
            color: #ef5350;
        }

        [data-theme="dark"] .factor-text {
            color: #ccc;
        }

        [data-theme="dark"] .timeline-header {
            color: #e0e0e0;
        }

        [data-theme="dark"] .timeline-chart {
            background: #2a2a2a;
            border-color: #444;
        }

        [data-theme="dark"] .current-time-line {
            color: #ff6b6b;
        }

        [data-theme="dark"] .reports-container {
            background: #2a2a2a;
        }

        [data-theme="dark"] .report-btn {
            background: #333;
            border-color: #555;
            color: #ccc;
        }

        [data-theme="dark"] .report-btn:hover {
            background: #444;
            border-color: #777;
        }

        /* Dark mode compact report styles */
        [data-theme="dark"] .report-item-compact {
            border-bottom-color: #333;
        }

        [data-theme="dark"] .report-text-compact {
            color: #e0e0e0;
        }

        [data-theme="dark"] .report-time-compact {
            color: #999;
        }

        [data-theme="dark"] .reports-more {
            color: #999;
        }

        [data-theme="dark"] .no-reports-message {
            color: #999;
        }

        [data-theme="dark"] .cameras-loading,
        [data-theme="dark"] .cameras-empty {
            color: #bbb;
        }

        [data-theme="dark"] .cameras-error {
            color: #ff6b6b;
        }

        /* Dark mode for weather details */
        [data-theme="dark"] .court-section {
            border-bottom-color: #333;
        }

        [data-theme="dark"] .section-loading,
        [data-theme="dark"] .section-error {
            color: #bbb;
        }

        [data-theme="dark"] .weather-header {
            color: #e0e0e0;
        }

        [data-theme="dark"] .weather-header .material-icons {
            color: #e0e0e0;
        }

        [data-theme="dark"] .condition-card-compact {
            background: #1e1e1e;
            border-color: #333;
        }

        [data-theme="dark"] .condition-value-compact {
            color: #e0e0e0;
        }

        [data-theme="dark"] .condition-label-compact {
            color: #bbb;
        }

        [data-theme="dark"] .condition-item-compact {
            background: #1e1e1e;
            border-color: #333;
        }

        [data-theme="dark"] .condition-icon-mini {
            color: #e0e0e0 !important;
        }

        [data-theme="dark"] .condition-text-compact {
            color: #e0e0e0;
        }

        [data-theme="dark"] .playability-compact {
            background: #1e1e1e;
            border-color: #333;
        }

        [data-theme="dark"] .playability-header {
            color: #e0e0e0;
        }

        [data-theme="dark"] .playability-subtitle {
            color: #bbb;
        }

        [data-theme="dark"] .forecast-compact {
            background: #1e1e1e;
            border-color: #333;
        }

        [data-theme="dark"] .forecast-header {
            color: #e0e0e0;
        }

        [data-theme="dark"] .forecast-header .material-icons {
            color: #e0e0e0;
        }

        [data-theme="dark"] .forecast-day-compact {
            background: #2a2a2a;
        }

        [data-theme="dark"] .forecast-date-compact {
            color: #bbb;
        }

        [data-theme="dark"] .forecast-temps-compact .high {
            color: #e0e0e0;
        }

        [data-theme="dark"] .forecast-temps-compact .low {
            color: #888;
        }

        [data-theme="dark"] .forecast-rain-compact {
            color: #6a8edc;
        }
        
        /* Dark Mode - Current Conditions Card */
        [data-theme="dark"] .current-conditions-card {
            background: #1e1e1e;
            border-color: #333;
        }
        
        [data-theme="dark"] .weather-condition {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .temperature-large {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .metric-item {
            background: #2a2a2a;
            border-color: #333;
        }
        
        [data-theme="dark"] .metric-icon {
            color: #b3b3b3;
        }
        
        [data-theme="dark"] .metric-value {
            color: #e0e0e0;
        }
        
        /* Responsive Design - Mobile First */
        @media (max-width: 768px) {
            .court-row {
                padding: 12px;
                min-height: 68px;
            }
            
            .court-row-icon {
                width: 36px;
                height: 36px;
                margin-right: 12px;
            }
            
            .court-row-icon .material-icons {
                font-size: 18px;
            }
            
            .court-row-primary {
                font-size: 15px;
            }
            
            .court-row-secondary {
                font-size: 12px;
            }
            
            .court-row-tertiary {
                font-size: 10px;
                max-width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .court-row-temp {
                font-size: 16px;
            }
            
            .court-row-weather {
                min-width: 70px;
            }
            
            /* Accordion responsive styles */
            .court-row-header {
                padding: 12px;
                min-height: 68px;
            }
            
            .court-row-cameras {
                padding: 12px;
            }
            
            .camera-item-compact {
                padding: 10px;
                gap: 10px;
            }
            
            .camera-preview-compact {
                width: 70px;
                height: 50px;
            }
            
            .cameras-header {
                font-size: 13px;
                margin-bottom: 10px;
            }
            
            /* Weather details mobile responsive */
            .conditions-row-compact {
                grid-template-columns: 1fr;
                gap: 6px;
            }
            
            .forecast-grid-compact {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
            }
            
            .weather-header,
            .forecast-header,
            .cameras-header {
                font-size: 13px;
            }
            
            .court-section {
                padding: 12px;
            }
            
            /* Desktop enhancements for larger screens */
            @media (min-width: 769px) {
                .court-row-header {
                    min-height: 72px;
                }
                
                .court-row-main {
                    padding: 16px;
                    min-height: 72px;
                }
                
                .court-row-expand-btn {
                    min-width: 44px;
                    min-height: 72px;
                    padding: 8px;
                }
                
                .court-row-expand-btn .material-icons {
                    font-size: 20px;
                }
                
                .court-section {
                    padding: 16px;
                }
                
                .weather-header {
                    font-size: 14px;
                    gap: 8px;
                }
                
                .conditions-row-compact {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 8px;
                }
                
                .forecast-grid-compact {
                    grid-template-columns: repeat(4, 1fr);
                    gap: 8px;
                }
                
                .camera-preview-compact {
                    width: 80px;
                    height: 60px;
                }
                
                .camera-item-compact {
                    gap: 12px;
                    padding: 12px;
                }
            }
            
            .view-toggle {
                margin-bottom: 12px;
            }
            
            /* Grid card responsive styles */
            .court-btn {
                padding: 12px;
                min-height: 68px;
            }
            
            .court-btn-icon {
                width: 36px;
                height: 36px;
                margin-right: 12px;
            }
            
            .court-btn-icon .material-icons {
                font-size: 18px;
            }
            
            .court-btn-primary {
                font-size: 15px;
            }
            
            .court-btn-secondary {
                font-size: 12px;
            }
            
            .court-btn-tertiary {
                font-size: 10px;
            }
            
            .court-btn-temp {
                font-size: 16px;
            }
            
            .court-btn-weather {
                min-width: 70px;
            }
        }
        
        @media (max-width: 480px) {
            .court-row {
                padding: 10px;
                min-height: 64px;
            }
            
            .court-row-icon {
                width: 32px;
                height: 32px;
                margin-right: 10px;
            }
            
            .court-row-primary {
                font-size: 14px;
            }
            
            .court-row-secondary {
                font-size: 11px;
            }
            
            .court-row-weather {
                min-width: 60px;
            }
            
            .court-row-temp {
                font-size: 15px;
            }
            
            .court-grid,
            .court-list {
                margin-bottom: 12px;
            }
            
            /* Grid card 480px responsive styles */
            .court-btn {
                padding: 10px;
                min-height: 64px;
            }
            
            .court-btn-icon {
                width: 32px;
                height: 32px;
                margin-right: 10px;
            }
            
            .court-btn-primary {
                font-size: 14px;
            }
            
            .court-btn-secondary {
                font-size: 11px;
            }
            
            .court-btn-weather {
                min-width: 60px;
            }
            
            .court-btn-temp {
                font-size: 15px;
            }
        }
        
        /* Tablet and Desktop Enhancements */
        @media (min-width: 769px) {
            .court-row:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
            }
            
            .court-row-info {
                margin-right: 16px;
            }
            
            .court-row-weather {
                min-width: 100px;
            }
            
            /* Allow more content on larger screens */
            .court-row-secondary,
            .court-row-tertiary {
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
            }
            
            /* Grid card desktop enhancements */
            .court-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
            }
            
            .court-btn-info {
                margin-right: 16px;
            }
            
            .court-btn-weather {
                min-width: 100px;
            }
            
            /* Allow more content on larger screens for grid cards */
            .court-btn-secondary,
            .court-btn-tertiary {
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
            }
        }
        
        /* High Contrast Support */
        @media (prefers-contrast: high) {
            .court-row {
                border-width: 2px;
            }
            
            .court-row:hover {
                border-width: 2px;
                border-color: #0066cc;
            }
            
            .court-row-status {
                border: 1px solid currentColor;
            }
        }
        
        /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {
            .court-row,
            .view-toggle-btn,
            .court-row-weather.loading::after {
                transition: none;
                animation: none;
            }
            
            .court-row:hover {
                transform: none;
            }
        }
        
        /* Focus Accessibility */
        .court-row:focus {
            outline: 2px solid #355ec0;
            outline-offset: 2px;
        }
        
        /* Accessibility Utilities */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        
        /* Skip Navigation */
        .skip-nav {
            position: absolute;
            left: -9999px;
            z-index: 999;
            padding: 8px 16px;
            background: #355ec0;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .skip-nav:focus {
            left: 10px;
            top: 10px;
        }
        
        /* Enhanced Focus Indicators */
        .view-toggle-btn:focus,
        .court-row:focus,
        .back-to-top:focus {
            outline: 3px solid #355ec0;
            outline-offset: 2px;
        }
        
        /* High contrast mode support */
        @media (prefers-contrast: high) {
            .court-row:focus,
            .view-toggle-btn:focus {
                outline: 3px solid currentColor;
                outline-offset: 2px;
            }
        }
        
        .view-toggle-btn:focus {
            outline: 2px solid #355ec0;
            outline-offset: 2px;
        }
        
        /* Print Styles */
        @media print {
            .view-toggle {
                display: none;
            }
            
            .court-row {
                break-inside: avoid;
                border: 1px solid #000;
                margin-bottom: 8px;
            }
        }
        
        /* Fixed Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(2px);
        }
        
        .loading-overlay.hidden {
            display: none;
        }
        
        /* General utility class for hiding elements */
        .hidden {
            display: none !important;
        }
        
        /* Weather icon color theming based on wet/dry conditions */
        .weather-icon-wet {
            color: #f44336 !important; /* Theme red for wet conditions */
        }
        
        .weather-icon-dry {
            color: #4caf50 !important; /* Theme green for dry conditions */
        }
        
        /* Dark theme overrides for weather icons */
        [data-theme="dark"] .weather-icon-wet {
            color: #ef5350 !important; /* Lighter red for dark theme */
        }
        
        [data-theme="dark"] .weather-icon-dry {
            color: #66bb6a !important; /* Lighter green for dark theme */
        }

        /* Location Permission Info Bar */
        .location-info-bar {
            background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
            color: white;
            margin: 16px -16px 16px -16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
            animation: slideDown 0.3s ease-out;
        }

        .location-info-content {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
        }

        .location-info-content .material-icons {
            font-size: 24px;
            color: #FFF;
            flex-shrink: 0;
        }

        .location-info-text {
            flex: 1;
            min-width: 0;
        }

        .location-info-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .location-info-subtitle {
            font-size: 12px;
            opacity: 0.9;
            line-height: 1.3;
        }

        .location-info-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .location-allow-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .location-allow-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-1px);
        }

        .location-dismiss-btn {
            background: none;
            border: none;
            color: white;
            padding: 4px;
            border-radius: 4px;
            cursor: pointer;
            opacity: 0.8;
            transition: all 0.2s ease;
        }

        .location-dismiss-btn:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.1);
        }

        .location-dismiss-btn .material-icons {
            font-size: 18px;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .location-info-bar {
                margin: 12px -12px 12px -12px;
            }
            
            .location-info-content {
                padding: 14px;
                gap: 10px;
            }
            
            .location-info-title {
                font-size: 13px;
            }
            
            .location-info-subtitle {
                font-size: 11px;
            }
        }
        
        .loading-content {
            background: white;
            border-radius: 12px;
            padding: 32px;
            text-align: center;
            color: #333;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            min-width: 200px;
        }
        
        .loading {
            text-align: center;
            padding: 32px;
            color: #666;
        }
        
        .spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #355ec0;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }
        
        /* Dark theme for loading overlay */
        [data-theme="dark"] .loading-content {
            background: #2b2b2b;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .spinner {
            border: 3px solid #444;
            border-top: 3px solid #355ec0;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .weather-card {
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-top: 24px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .court-header {
            margin-bottom: 16px;
        }
        
        .court-name {
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            margin-bottom: 4px;
        }
        
        .court-name .material-icons {
            margin-right: 8px;
            color: #666;
        }
        
        .court-address {
            font-size: 12px;
            color: #1976d2;
            margin-left: 32px;
            text-decoration: none;
            transition: color 0.2s;
            display: block;
            line-height: 1.3;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .court-address:hover {
            color: #1565c0;
            text-decoration: underline;
        }
        
        .rain-status {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 20px 0;
            padding: 16px;
            border-radius: 8px;
            font-weight: 500;
        }
        
        .rain-status .material-icons {
            font-size: 48px;
        }
        
        .rain-status-text {
            flex: 1;
        }
        
        .rain-status-main {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .rain-status-sub {
            font-size: 14px;
            font-weight: 400;
            opacity: 0.8;
        }
        
        .rain-status-timeline {
            font-size: 11px;
            font-weight: 400;
            margin-top: 4px;
            opacity: 0.8;
        }
        
        [data-theme="dark"] .rain-status-timeline {
            opacity: 0.9;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .rain-status-main {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .rain-status-sub {
            opacity: 0.9;
            color: #e0e0e0;
        }
        
        .rain-clear {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .rain-clear .material-icons {
            color: #247f2d;
        }
        
        .rain-active {
            background: #ffebee;
            color: #c62828;
        }
        
        .rain-active .material-icons {
            color: #f92f60;
        }
        
        .rain-warning {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .rain-warning .material-icons {
            color: #ff9800;
        }
        
        [data-theme="dark"] .rain-clear {
            background: #1b5e20;
            color: #4da954;
        }
        
        [data-theme="dark"] .rain-active {
            background: #b71c1c;
            color: #ef5350;
        }
        
        [data-theme="dark"] .rain-warning {
            background: #e65100;
            color: #ffb74d;
        }
        
        /* Unified Rain Status Colors */
        .rain-green {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .rain-green .material-icons {
            color: #247f2d;
        }
        
        .rain-yellow {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .rain-yellow .material-icons {
            color: #ff9800;
        }
        
        .rain-orange {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .rain-orange .material-icons {
            color: #ff9800;
        }
        
        .rain-red {
            background: #ffebee;
            color: #c62828;
        }
        
        .rain-red .material-icons {
            color: #f92f60;
        }
        
        /* Dark theme unified rain status */
        [data-theme="dark"] .rain-green {
            background: #1b5e20;
            color: #4da954;
        }
        
        [data-theme="dark"] .rain-yellow,
        [data-theme="dark"] .rain-orange {
            background: #e65100;
            color: #ffb74d;
        }
        
        [data-theme="dark"] .rain-red {
            background: #b71c1c;
            color: #ef5350;
        }
        
        .court-drying-status {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 12px 0;
            padding: 12px 16px;
            border-radius: 8px;
            font-weight: 500;
            font-size: 14px;
        }
        
        .court-drying-status .material-icons {
            font-size: 24px;
        }
        
        .court-drying-status-text {
            flex: 1;
        }
        
        .court-drying-status-main {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .court-drying-status-sub {
            font-size: 12px;
            font-weight: 400;
            opacity: 0.8;
        }
        
        .drying-dry {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .drying-dry .material-icons {
            color: #247f2d;
        }
        
        .drying-active {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .drying-active .material-icons {
            color: #ff9800;
        }
        
        .drying-wet {
            background: #ffebee;
            color: #c62828;
        }
        
        .drying-wet .material-icons {
            color: #f92f60;
        }
        
        [data-theme="dark"] .court-drying-status-main {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .court-drying-status-sub {
            opacity: 0.9;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .drying-dry {
            background: #1b5e20;
            color: #4da954;
        }
        
        [data-theme="dark"] .drying-active {
            background: #e65100;
            color: #ffb74d;
        }
        
        [data-theme="dark"] .drying-wet {
            background: #b71c1c;
            color: #ef5350;
        }

        .drying-tip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            margin: -8px 0 16px 0;
            background: #e3f2fd;
            color: #1565c0;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .drying-tip .material-icons {
            font-size: 20px;
            color: #1976d2;
        }
        
        [data-theme="dark"] .drying-tip {
            background: #0d47a1;
            color: #6a8edc;
        }
        
        [data-theme="dark"] .drying-tip .material-icons {
            color: #64b5f6;
        }
        
        .forecast-section {
            margin-top: 0;
            border-top: 1px solid #e0e0e0;
            padding-top: 0;
        }

        /* Horizontal Forecast Layout - Mobile First */
        .forecast-horizontal-container {
            width: 100%;
            overflow: hidden;
            padding: 16px 0 8px 0;
        }

        .forecast-horizontal-scroll {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 8px;
            scrollbar-width: thin;
            scrollbar-color: #ccc transparent;
            -webkit-overflow-scrolling: touch;
        }

        .forecast-horizontal-scroll::-webkit-scrollbar {
            height: 4px;
        }

        .forecast-horizontal-scroll::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 2px;
        }

        .forecast-horizontal-scroll::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 2px;
        }

        .forecast-horizontal-scroll::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

        .forecast-day-card {
            flex: 0 0 110px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 0 6px 6px 0;
            border-left-radius: 0;
            padding: 12px;
            text-align: center;
            position: relative;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }

        .forecast-day-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .forecast-day-card.forecast-good {
            border-left: 4px solid #4caf50;
            border-radius: 0 6px 6px 0;
        }

        .forecast-day-card.forecast-poor {
            border-left: 4px solid #ff5722;
            border-radius: 0 6px 6px 0;
        }

        .forecast-day-header {
            margin-bottom: 8px;
        }

        .forecast-date {
            font-size: 12px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
            white-space: nowrap;
        }

        .forecast-date-small {
            font-size: 10px;
            color: #666;
            margin-bottom: 2px;
            white-space: nowrap;
        }

        .forecast-weather-icon {
            display: flex;
            justify-content: center;
            margin-bottom: 8px;
        }

        .forecast-temps {
            margin-bottom: 8px;
        }

        .forecast-temps .temp-high {
            display: block;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }

        .forecast-temps .temp-low {
            display: block;
            font-size: 12px;
            color: #666;
        }

        .forecast-rain {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-bottom: 6px;
        }

        .forecast-rain .rain-icon {
            font-size: 14px;
            color: #2196F3;
        }

        .forecast-rain .rain-percent {
            font-size: 11px;
            color: #666;
        }

        .forecast-wind {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-bottom: 8px;
        }

        .forecast-wind .wind-icon {
            font-size: 14px;
            color: #666;
        }

        .forecast-wind .wind-speed {
            font-size: 11px;
            color: #666;
        }

        .forecast-playable {
            display: flex;
            justify-content: center;
        }

        .forecast-status-icon {
            font-size: 16px !important;
        }

        /* Dark theme support */
        [data-theme="dark"] .forecast-day-card {
            background: #1e1e1e;
            border-color: #333;
        }

        [data-theme="dark"] .forecast-date {
            color: #e0e0e0;
        }

        [data-theme="dark"] .forecast-date-small {
            color: #bbb;
        }

        [data-theme="dark"] .forecast-temps .temp-high {
            color: #e0e0e0;
        }

        [data-theme="dark"] .forecast-temps .temp-low {
            color: #bbb;
        }

        [data-theme="dark"] .forecast-rain .rain-percent,
        [data-theme="dark"] .forecast-wind .wind-speed {
            color: #bbb;
        }

        [data-theme="dark"] .forecast-horizontal-scroll::-webkit-scrollbar-track {
            background: #333;
        }

        [data-theme="dark"] .forecast-horizontal-scroll::-webkit-scrollbar-thumb {
            background: #555;
        }
        
        .reports-section {
            margin-top: 0;
            border-top: none;
            padding-top: 0;
        }
        
        .reports-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #666;
            font-size: 14px;
            padding: 8px 0;
            transition: color 0.2s;
        }
        
        .reports-toggle:hover {
            color: #333;
        }
        
        .reports-toggle .material-icons {
            font-size: 20px;
            transition: transform 0.2s;
        }
        
        .reports-badge {
            background: #2196f3;
            color: white;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 11px;
            margin-left: auto;
        }
        
        .reports-content {
            margin-top: 8px;
        }
        
        .report-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .report-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: white;
            color: #333;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }
        
        .report-btn:hover {
            background: #f5f5f5;
            border-color: #2196f3;
        }
        
        .report-btn .material-icons {
            font-size: 16px;
            color: #888;
        }
        
        .reports-list {
            border-top: 1px solid #eee;
            padding-top: 12px;
        }
        
        .report-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            margin: 4px 0;
            background: #f9f9f9;
            border-radius: 6px;
            font-size: 13px;
        }
        
        .report-icon {
            font-size: 16px !important;
        }
        
        .report-status.wet {
            color: #2196f3;
        }
        
        .report-status.dry {
            color: #ff9800;
        }
        
        .report-status.crowded {
            color: #ff5722;
        }
        
        .report-status.closed {
            color: #666;
        }
        
        .report-meta {
            margin-left: auto;
            font-size: 11px;
            color: #888;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .report-votes {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .vote-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px;
            color: #888;
            display: flex;
            align-items: center;
            gap: 2px;
            font-size: 11px;
        }
        
        .vote-btn:hover {
            color: #2196f3;
        }
        
        .vote-btn .material-icons {
            font-size: 14px;
        }
        
        .loading-reports {
            text-align: center;
            color: #666;
            font-size: 13px;
            padding: 16px;
        }
        
        .no-reports {
            text-align: center;
            color: #888;
            font-size: 12px;
            padding: 16px;
        }
        
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease;
        }
        
        .modal-overlay.show {
            display: flex;
        }
        
        .modal {
            background: white;
            border-radius: 8px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: slideUp 0.3s ease;
        }
        
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .modal-header h3 {
            margin: 0;
            font-size: 17px;
            font-weight: 500;
        }
        
        .modal-close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            border-radius: 4px;
            transition: background 0.2s;
        }
        
        .modal-close:hover {
            background: #f5f5f5;
        }
        
        .modal-body {
            padding: 20px;
            overflow-y: auto;
            max-height: 50vh;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid #e0e0e0;
        }
        
        .modal-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .modal-btn-primary {
            background: #2196f3;
            color: white;
        }
        
        .modal-btn-primary:hover {
            background: #1976d2;
        }
        
        .modal-btn-secondary {
            background: #f5f5f5;
            color: #333;
        }
        
        .modal-btn-secondary:hover {
            background: #e0e0e0;
        }
        
        .confidence-selector {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin: 16px 0;
        }
        
        .confidence-btn {
            width: 40px;
            height: 40px;
            border: 2px solid #ddd;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            font-weight: 500;
        }
        
        .confidence-btn:hover {
            border-color: #2196f3;
            transform: scale(1.1);
        }
        
        .confidence-btn.selected {
            background: #2196f3;
            color: white;
            border-color: #2196f3;
        }
        
        .modal-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            margin-top: 8px;
            resize: vertical;
            min-height: 60px;
            font-family: inherit;
        }
        
        .modal-input:focus {
            outline: none;
            border-color: #2196f3;
        }
        
        /* Filter Modal Styles */
        .filter-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1100;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease;
        }
        
        .filter-modal {
            background: white;
            border-radius: 12px;
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: slideUp 0.3s ease;
        }
        
        .filter-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 20px 16px 20px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .filter-modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .close-filter-modal {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            border-radius: 50%;
            transition: all 0.2s;
            width: 36px;
            height: 36px;
        }
        
        .close-filter-modal:hover {
            background: #f5f5f5;
            color: #333;
        }
        
        .filter-modal-content {
            padding: 20px;
        }
        
        .filter-modal-content p {
            margin: 0 0 16px 0;
            color: #666;
            font-size: 14px;
        }
        
        .filter-options {
            display: grid;
            gap: 12px;
        }
        
        .filter-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        
        .filter-option:hover {
            border-color: #2196f3;
            background: #f8fafe;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
        }
        
        .filter-option:active {
            transform: translateY(0);
        }
        
        .filter-option .material-icons {
            font-size: 20px;
            color: #2196f3;
        }
        
        .filter-option span:not(.material-icons) {
            flex: 1;
            font-weight: 500;
        }
        
        .toast {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: #323232;
            color: white;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 14px;
            z-index: 2000;
            transition: bottom 0.3s ease;
            max-width: 90%;
            text-align: center;
        }
        
        .toast.show {
            bottom: 24px;
        }
        
        .toast.success {
            background: #247f2d;
        }
        
        .toast.error {
            background: #f92f60;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .forecast-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #666;
            font-size: 14px;
            padding: 8px 0;
            transition: color 0.2s;
        }
        
        .forecast-toggle:hover {
            color: #333;
        }
        
        .forecast-toggle .material-icons {
            font-size: 20px;
            transition: transform 0.2s;
        }
        
        .forecast-toggle.expanded .material-icons {
            transform: rotate(180deg);
        }
        
        .forecast-content {
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .forecast-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin: 16px 0;
        }
        
        .forecast-day {
            padding: 12px 8px;
            border-radius: 4px;
            text-align: center;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            min-height: 140px;
        }
        
        .forecast-good {
            background: #f1f8e9;
            border: 1px solid #c8e6c9;
        }
        
        .forecast-poor {
            background: #fdf2f2;
            border: 1px solid #ffcdd2;
        }
        
        .forecast-date {
            font-weight: 600;
            margin-bottom: 8px;
            flex-shrink: 0;
        }
        
        .forecast-temps {
            margin: 8px 0;
            flex-shrink: 0;
        }
        
        .forecast-temps .high {
            font-weight: 600;
        }
        
        .forecast-temps .low {
            opacity: 0.7;
            margin-left: 4px;
        }
        
        .forecast-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            margin: 8px 0;
            line-height: 1.3;
        }
        
        .forecast-status {
            margin-top: auto;
            flex-shrink: 0;
        }
        
        /* New table-style forecast layout */
        .forecast-table {
            display: flex;
            flex-direction: column;
            margin: 16px 0;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            background: white;
        }
        
        .forecast-header {
            display: grid;
            grid-template-columns: 1fr 1.2fr 1fr 1fr 0.8fr;
            background: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 600;
            font-size: 13px;
            color: #666;
        }
        
        .forecast-header > div {
            padding: 12px 8px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .forecast-row {
            display: grid;
            grid-template-columns: 1fr 1.2fr 1fr 1fr 0.8fr;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.2s;
        }
        
        .forecast-row:last-child {
            border-bottom: none;
        }
        
        .forecast-row:hover {
            background: #f8f9fa;
        }
        
        .forecast-row.forecast-good {
            background: linear-gradient(90deg, #f1f8e9 0%, transparent 30%);
        }
        
        .forecast-row.forecast-poor {
            background: linear-gradient(90deg, #fdf2f2 0%, transparent 30%);
        }
        
        .forecast-row > div {
            padding: 12px 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 48px;
        }
        
        .forecast-col-day {
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }
        
        .forecast-col-temp {
            display: flex;
            align-items: center;
            gap: 2px;
            font-size: 14px;
        }
        
        .temp-high {
            font-weight: 600;
            color: #333;
        }
        
        .temp-divider {
            color: #999;
            margin: 0 2px;
        }
        
        .temp-low {
            color: #666;
        }
        
        .forecast-col-rain {
            font-size: 13px;
        }
        
        .rain-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            align-items: center;
        }
        
        .rain-chance {
            font-weight: 600;
            color: #2196f3;
        }
        
        .rain-amount {
            font-size: 11px;
            color: #666;
        }
        
        .no-rain {
            color: #999;
        }
        
        .forecast-col-wind {
            color: #666;
            font-size: 13px;
        }
        
        .forecast-col-status {
            width: 40px;
        }
        
        .forecast-status-icon {
            font-size: 20px !important;
        }
        
        .forecast-note {
            text-align: center;
            color: #666;
            font-style: italic;
            margin-top: 12px;
            font-size: 12px;
        }
        
        /* Dark theme for forecast table */
        [data-theme="dark"] .forecast-table {
            border-color: #555;
            background: #2a2a2a;
        }
        
        [data-theme="dark"] .forecast-header {
            background: #333;
            border-bottom-color: #555;
            color: #bbb;
        }
        
        [data-theme="dark"] .forecast-row {
            border-bottom-color: #444;
        }
        
        [data-theme="dark"] .forecast-row:hover {
            background: #333;
        }
        
        [data-theme="dark"] .forecast-row.forecast-good {
            background: linear-gradient(90deg, #1b5e20 0%, transparent 30%);
        }
        
        [data-theme="dark"] .forecast-row.forecast-poor {
            background: linear-gradient(90deg, #b71c1c 0%, transparent 30%);
        }
        
        [data-theme="dark"] .forecast-col-day {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .temp-high {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .temp-divider {
            color: #999;
        }
        
        [data-theme="dark"] .temp-low {
            color: #bbb;
        }
        
        [data-theme="dark"] .rain-chance {
            color: #64b5f6;
        }
        
        [data-theme="dark"] .rain-amount {
            color: #bbb;
        }
        
        [data-theme="dark"] .no-rain {
            color: #999;
        }
        
        [data-theme="dark"] .forecast-col-wind {
            color: #bbb;
        }
        
        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .forecast-table {
                font-size: 12px;
            }
            
            .forecast-header {
                font-size: 11px;
            }
            
            .forecast-header > div,
            .forecast-row > div {
                padding: 8px 4px;
            }
            
            .forecast-col-temp {
                font-size: 12px;
            }
            
            .rain-info {
                gap: 1px;
            }
            
            .rain-amount {
                font-size: 10px;
            }
            
            .forecast-status-icon {
                font-size: 16px !important;
            }
        }
        
        @media (max-width: 768px) {
            .forecast-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            
            .forecast-day {
                padding: 8px 4px;
                font-size: 11px;
                min-height: 120px;
            }
        }
        
        /* Camera Section Styles */
        .cameras-section {
            margin-top: 0;
            border-top: 1px solid #e0e0e0;
            padding-top: 0;
        }
        
        .cameras-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #666;
            font-size: 14px;
            padding: 8px 0;
            transition: color 0.2s;
        }
        
        .cameras-toggle:hover {
            color: #333;
        }
        
        .cameras-toggle .material-icons {
            font-size: 20px;
            transition: transform 0.2s;
        }
        
        .cameras-toggle.expanded .material-icons {
            transform: rotate(180deg);
        }
        
        .cameras-content {
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .cameras-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin: 16px 0;
        }
        
        .camera-item {
            background: white;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            overflow: hidden;
            transition: box-shadow 0.2s;
            display: flex;
            flex-direction: column;
        }
        
        .camera-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .camera-preview {
            width: 100%;
            height: 180px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            position: relative;
            overflow: hidden;
        }
        
        .camera-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .camera-preview .placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
        .camera-preview .material-icons {
            font-size: 48px;
            opacity: 0.3;
        }
        
        .camera-info {
            padding: 12px;
        }
        
        .camera-title {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 4px;
        }
        
        .camera-location {
            color: #666;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 8px;
        }
        
        .camera-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }
        
        .camera-category {
            background: #e3f2fd;
            color: #1976d2;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
        }
        
        .camera-distance {
            color: #666;
        }
        
        .camera-actions {
            padding: 8px 12px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            gap: 8px;
        }
        
        .camera-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: white;
            color: #333;
            cursor: pointer;
            font-size: 12px;
            text-decoration: none;
            transition: all 0.2s;
            flex: 1;
            justify-content: center;
        }
        
        .camera-btn:hover {
            background: #f5f5f5;
            border-color: #2196f3;
            color: #2196f3;
        }
        
        .camera-btn .material-icons {
            font-size: 14px;
        }
        
        .cameras-note {
            text-align: center;
            color: #666;
            font-style: italic;
            margin-top: 12px;
            font-size: 12px;
        }
        
        @media (max-width: 768px) {
            .cameras-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            
            .conditions-grid {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            
            
            .weather-condition-text {
                font-size: 14px !important;
                word-break: break-word;
                hyphens: auto;
            }
            
            .condition-card {
                padding: 12px;
            }
        }
        
        [data-theme="dark"] .cameras-section {
            border-color: #333;
        }
        
        [data-theme="dark"] .cameras-toggle {
            color: #bbb;
        }
        
        [data-theme="dark"] .cameras-toggle:hover {
            color: #ddd;
        }
        
        [data-theme="dark"] .camera-item {
            background: #333;
            border-color: #555;
        }
        
        [data-theme="dark"] .camera-preview {
            background: #2a2a2a;
        }
        
        [data-theme="dark"] .camera-title {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .camera-location {
            color: #bbb;
        }
        
        [data-theme="dark"] .camera-distance {
            color: #bbb;
        }
        
        [data-theme="dark"] .camera-actions {
            border-color: #555;
        }
        
        [data-theme="dark"] .camera-btn {
            background: #444;
            border-color: #666;
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .camera-btn:hover {
            background: #555;
            border-color: #2196f3;
            color: #64b5f6;
        }
        
        [data-theme="dark"] .forecast-section {
            border-color: #333;
        }
        
        [data-theme="dark"] .reports-section {
            border-color: #333;
        }
        
        [data-theme="dark"] .reports-toggle {
            color: #bbb;
        }
        
        [data-theme="dark"] .reports-toggle:hover {
            color: #ddd;
        }
        
        [data-theme="dark"] .report-btn {
            background: #2a2a2a;
            border-color: #444;
            color: #ddd;
        }
        
        [data-theme="dark"] .report-btn:hover {
            background: #333;
            border-color: #2196f3;
        }
        
        [data-theme="dark"] .reports-list {
            border-color: #444;
        }
        
        [data-theme="dark"] .report-item {
            background: #2a2a2a;
            color: #ddd;
        }
        
        [data-theme="dark"] .report-meta {
            color: #aaa;
        }
        
        [data-theme="dark"] .vote-btn {
            color: #aaa;
        }
        
        [data-theme="dark"] .vote-btn:hover {
            color: #64b5f6;
        }
        
        [data-theme="dark"] .loading-reports {
            color: #aaa;
        }
        
        [data-theme="dark"] .no-reports {
            color: #999;
        }
        
        [data-theme="dark"] .modal {
            background: #2a2a2a;
            color: #ddd;
        }
        
        [data-theme="dark"] .modal-header {
            border-bottom-color: #444;
        }
        
        [data-theme="dark"] .modal-close {
            color: #aaa;
        }
        
        [data-theme="dark"] .modal-close:hover {
            background: #333;
        }
        
        [data-theme="dark"] .modal-footer {
            border-top-color: #444;
        }
        
        [data-theme="dark"] .modal-btn-secondary {
            background: #333;
            color: #ddd;
        }
        
        [data-theme="dark"] .modal-btn-secondary:hover {
            background: #444;
        }
        
        [data-theme="dark"] .confidence-btn {
            background: #333;
            border-color: #555;
            color: #ddd;
        }
        
        [data-theme="dark"] .confidence-btn:hover {
            border-color: #64b5f6;
        }
        
        [data-theme="dark"] .confidence-btn.selected {
            background: #2196f3;
            color: white;
        }
        
        [data-theme="dark"] .modal-input {
            background: #333;
            border-color: #555;
            color: #ddd;
        }
        
        [data-theme="dark"] .modal-input:focus {
            border-color: #64b5f6;
        }
        
        /* Filter Modal Dark Mode */
        [data-theme="dark"] .filter-modal {
            background: #2a2a2a;
            color: #ddd;
        }
        
        [data-theme="dark"] .filter-modal-header {
            border-bottom-color: #444;
        }
        
        [data-theme="dark"] .filter-modal-header h3 {
            color: #ddd;
        }
        
        [data-theme="dark"] .close-filter-modal {
            color: #aaa;
        }
        
        [data-theme="dark"] .close-filter-modal:hover {
            background: #333;
            color: #ddd;
        }
        
        [data-theme="dark"] .filter-modal-content p {
            color: #999;
        }
        
        [data-theme="dark"] .filter-option {
            background: #333;
            border-color: #555;
            color: #ddd;
        }
        
        [data-theme="dark"] .filter-option:hover {
            border-color: #64b5f6;
            background: #2a3a4a;
            box-shadow: 0 2px 8px rgba(100, 181, 246, 0.1);
        }
        
        [data-theme="dark"] .filter-option .material-icons {
            color: #64b5f6;
        }
        
        [data-theme="dark"] .forecast-toggle {
            color: #bbb;
        }
        
        [data-theme="dark"] .forecast-toggle:hover {
            color: #ddd;
        }
        
        [data-theme="dark"] .forecast-good {
            background: #1b5e20;
            border-color: #388e3c;
            color: #c8e6c9;
        }
        
        [data-theme="dark"] .forecast-poor {
            background: #b71c1c;
            border-color: #d32f2f;
            color: #ffcdd2;
        }
        
        [data-theme="dark"] .weather-condition-main {
            background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
            border-color: #3f51b5;
        }
        
        
        [data-theme="dark"] .weather-condition-text {
            color: #6a8edc;
        }
        
        .court-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 12px;
            margin: 16px 0;
            padding: 12px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        
        .stat {
            text-align: center;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: 500;
        }
        
        .stat-label {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }
        
        .playability {
            padding: 16px;
            border-radius: 4px;
            margin: 16px 0;
            text-align: center;
            font-weight: 500;
        }
        
        .playability-excellent {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .playability-playable {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .playability-not-playable {
            background: #ffebee;
            color: #c62828;
        }
        
        /* Enhanced Playability Styles */
        .enhanced-playability {
            margin: 16px 0;
        }
        
        .playability-overall {
            margin-bottom: 16px;
            text-align: center;
            background: none;
            border: none;
            padding: 0;
        }
        
        .playability-overall-rating {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .playability-overall-subtitle {
            font-size: 13px;
            color: #666;
        }
        
        .conditions-grid {
            display: grid;
            gap: 12px;
        }
        
        .conditions-grid .condition-item {
            background: white;
            border-radius: 6px;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-left: 3px solid green;
        }
        
        .conditions-details .condition-item {
            background: none !important;
            border: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
        }
        
        .condition-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .condition-factor {
            font-weight: 500;
            font-size: 14px;
        }
        
        .condition-value {
            margin-left: auto;
            font-weight: 600;
            color: #2196f3;
        }
        
        .condition-details {
            margin-left: 32px;
        }
        
        .condition-tip {
            font-weight: 500;
            font-size: 13px;
            color: #333;
            margin-bottom: 4px;
        }
        
        .condition-description {
            font-size: 12px;
            color: #666;
        }
        
        .playability-section-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 8px;
            color: #333;
        }
        
        .playability-section-title .material-icons {
            font-size: 16px;
        }
        
        .playability-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 13px;
        }
        
        .playability-item .material-icons {
            font-size: 16px;
            margin-top: 1px;
        }
        
        .playability-item.positive .material-icons {
            color: #4caf50;
        }
        
        .playability-item.warning .material-icons {
            color: #ff9800;
        }
        
        .playability-item.info .material-icons {
            color: #2196f3;
        }
        
        .recommendation-text {
            font-size: 15px;
            font-weight: 500;
            padding: 12px;
            border-radius: 6px;
            text-align: center;
            margin-bottom: 16px;
        }
        
        .recommendation-text.excellent {
            background: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #c8e6c9;
        }
        
        .recommendation-text.good {
            background: #fff3e0;
            color: #ef6c00;
            border: 1px solid #ffcc02;
        }
        
        .recommendation-text.moderate {
            background: #e3f2fd;
            color: #1976d2;
            border: 1px solid #90caf9;
        }
        
        .conditions-section {
            margin-top: 32px;
            border-top: 1px solid #e0e0e0;
            padding-top: 16px;
        }

        .conditions-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #666;
            font-size: 14px;
            padding: 8px 0;
            transition: color 0.2s;
        }

        .conditions-toggle:hover {
            color: #333;
        }

        .conditions-toggle .material-icons {
            font-size: 20px;
            transition: transform 0.2s;
        }

        .conditions-toggle.expanded .material-icons {
            transform: rotate(180deg);
        }

        .conditions-content {
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            margin-top: 8px;
        }
        
        .overall-rating {
            padding: 16px;
            border-radius: 0 8px 8px 0;
            margin: 16px 0;
            border-left: 4px solid;
        }
        
        .overall-rating.green {
            background: #e8f5e9;
            border-left-color: #247f2d;
            color: #247F2D;
        }
        
        .overall-rating.yellow {
            background: #fff8e1;
            border-left-color: #ffc107;
            color: #f57c00;
        }
        
        .overall-rating.orange {
            background: #fff3e0;
            border-left-color: #ff9800;
            color: #e65100;
        }
        
        .overall-rating.red {
            background: #ffebee;
            border-left-color: #f92f60;
            color: #c62828;
        }
        
        .rating-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .rating-text {
            font-weight: 500;
            font-size: 15px;
        }
        
        .rating-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: currentColor;
        }
        
        .rating-subtitle {
            font-size: 13px;
            opacity: 0.8;
            margin-top: 4px;
        }
        
        .condition-factors {
            margin: 16px 0;
        }
        
        .factor-item {
            background: white;
            border-radius: 0 8px 8px 0;
            padding: 12px;
            margin: 8px 0;
            border-left: 4px solid;
            position: relative;
        }
        
        .factor-item.green {
            border-left-color: #247f2d;
            background: #f9fff9;
        }
        
        .factor-item.yellow {
            border-left-color: #ffc107;
            background: #fffef7;
        }
        
        .factor-item.orange {
            border-left-color: #ff9800;
            background: #fff9f3;
        }
        
        .factor-item.red {
            border-left-color: #f92f60;
            background: #fffbfb;
        }
        
        .factor-header {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
        }
        
        .factor-header .material-icons {
            font-size: 20px;
            margin-right: 10px;
            color: #666;
        }
        
        .factor-header .material-icons.humidity_percentage {
            margin-right: 8px;
        }
        
        .factor-info {
            flex: 1;
        }
        
        .factor-name {
            font-weight: 500;
            font-size: 14px;
            color: #333;
        }
        
        .factor-rating {
            font-size: 12px;
            font-weight: 500;
            margin-top: 2px;
        }
        
        .factor-rating.green { color: #247F2D; }
        .factor-rating.yellow { color: #f57c00; }
        .factor-rating.orange { color: #e65100; }
        .factor-rating.red { color: #c62828; }
        
        .factor-tip {
            font-size: 12px;
            color: #666;
            font-style: italic;
        }
        
        .playability-warnings {
            margin: 16px 0;
        }
        
        .warning-item {
            display: flex;
            align-items: flex-start;
            background: white;
            border-radius: 0 8px 8px 0;
            padding: 12px;
            margin: 8px 0;
            border-left: 4px solid;
        }
        
        .warning-item.caution {
            border-left-color: #ffc107;
            background: #fffef7;
        }
        
        .warning-item.warning {
            border-left-color: #ff9800;
            background: #fff9f3;
        }
        
        .warning-item.danger {
            border-left-color: #f92f60;
            background: #fffbfb;
        }
        
        .warning-item .material-icons {
            font-size: 18px;
            margin-right: 10px;
            margin-top: 1px;
            color: #666;
        }
        
        .warning-icon {
            flex-shrink: 0;
        }
        
        .warning-content {
            flex: 1;
        }
        
        .warning-message {
            font-weight: 500;
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
        }
        
        .warning-recommendation {
            font-size: 12px;
            color: #666;
        }
        
        .play-recommendations {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 16px 0;
        }
        
        .rec-outdoor, .rec-indoor {
            display: flex;
            align-items: center;
            background: white;
            border-radius: 8px;
            padding: 12px;
            border-left: 3px solid;
        }
        
        .rec-outdoor.recommended, .rec-indoor.recommended {
            border-left-color: #247f2d;
            background: #f9fff9;
        }
        
        .rec-outdoor.playable_with_caution, .rec-indoor.playable_with_caution {
            border-left-color: #ffc107;
            background: #fffef7;
        }
        
        .rec-outdoor.not_recommended, .rec-indoor.not_recommended {
            border-left-color: #f92f60;
            background: #fffbfb;
        }
        
        .rec-outdoor.no_outdoor_courts, .rec-indoor.no_indoor_courts {
            border-left-color: #9e9e9e;
            background: #f8f8f8;
            opacity: 0.7;
        }
        
        .play-recommendations .material-icons {
            font-size: 18px;
            margin-right: 8px;
            color: #666;
        }
        
        .rec-content {
            flex: 1;
        }
        
        .rec-title {
            font-weight: 500;
            font-size: 13px;
            color: #333;
        }
        
        .rec-status {
            font-size: 11px;
            color: #666;
            margin-top: 2px;
        }
        
        .expand-icon {
            color: #666;
            font-size: 18px;
            margin-left: auto;
            transition: transform 0.2s;
        }
        
        .expand-icon.expanded {
            transform: rotate(180deg);
        }
        
        .court-drying-status.clickable:hover {
            background: rgba(0,0,0,0.02);
        }
        
        .conditions-reference {
            margin: 20px 0 8px 0;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 12px;
        }
        
        .reference-title {
            font-weight: 500;
            color: #555;
            margin-bottom: 6px;
        }
        
        .reference-links a {
            color: #1976d2;
            text-decoration: none;
        }
        
        .reference-links a:hover {
            text-decoration: underline;
        }
        
        .conditions-title {
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 24px 0 16px 0;
            padding: 12px 16px;
            background: #f8f9fa;
            border-radius: 8px;
            transition: background-color 0.2s;
        }
        
        .conditions-title:hover {
            background: #e9ecef;
        }
        
        .conditions-title .material-icons {
            margin-right: 8px;
            color: #666;
        }
        
        .conditions-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .condition-card.full-width {
            grid-column: 1 / -1;
        }
        
        .weather-condition-main {
            background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%);
            border: 1px solid #64b5f6;
        }
        
        .weather-condition-icon {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .weather-condition-icon img {
            width: 48px;
            height: 48px;
            object-fit: contain;
        }
        
        .weather-condition-text {
            font-size: 16px !important;
            font-weight: 600;
            color: #1565c0;
        }
        
        .condition-card {
            background: #f5f5f5;
            padding: 16px;
            border-radius: 4px;
            text-align: center;
        }
        
        .condition-icon {
            color: #666;
            margin-bottom: 8px;
        }
        
        .condition-value {
            font-size: 19px;
            font-weight: 500;
            margin: 8px 0;
        }
        
        .condition-label {
            font-size: 12px;
            color: #666;
        }
        
        .analysis-section {
            margin-top: 24px;
        }
        
        .analysis-title {
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .analysis-title .material-icons {
            margin-right: 8px;
        }
        
        .positive .material-icons {
            color: #247f2d;
        }
        
        .warning .material-icons {
            color: #ff9800;
        }
        
        .analysis-list {
            margin-left: 32px;
        }
        
        .analysis-item {
            margin: 8px 0;
            font-size: 13px;
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 4px;
            margin: 16px 0;
        }
        
        .alert-info {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .alert-error {
            background: #ffebee;
            color: #c62828;
        }
        
        .footer {
            text-align: center;
            color: #999;
            font-size: 12px;
            margin-top: 48px;
            padding-top: 24px;
            border-top: 1px solid #e0e0e0;
        }
        
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #ef6c00;
            color: rgba(0, 0, 0, 0.2);
            border: none;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            z-index: 1000;
        }
        
        .back-to-top:hover {
            background: #e65100;
            color: rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }
        
        .back-to-top.visible {
            display: flex;
        }
        
        .back-to-top .material-icons {
            font-size: 24px;
        }
        
        [data-theme="dark"] .back-to-top {
            background: #ef6c00;
            color: rgba(0, 0, 0, 0.2);
        }
        
        [data-theme="dark"] .back-to-top:hover {
            background: #e65100;
            color: rgba(0, 0, 0, 0.3);
        }
        
        /* Weather Intelligence Section */
        .intelligence-section {
            margin-top: 32px;
            border-top: 1px solid #e0e0e0;
            padding-top: 16px;
        }
        
        .intelligence-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #666;
            font-size: 14px;
            padding: 8px 0;
            transition: color 0.2s;
        }
        
        .intelligence-toggle:hover {
            color: #333;
        }
        
        .intelligence-toggle .material-icons {
            font-size: 20px;
            transition: transform 0.2s;
        }
        
        .intelligence-toggle.expanded .material-icons {
            transform: rotate(180deg);
        }
        
        .intelligence-content {
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .confidence-section {
            margin-bottom: 24px;
        }
        
        .confidence-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .confidence-level {
            font-weight: 600;
            font-size: 15px;
        }
        
        .confidence-level.high {
            color: #247F2D;
        }
        
        .confidence-level.moderate {
            color: #f57c00;
        }
        
        .confidence-level.low {
            color: #d32f2f;
        }
        
        .confidence-score {
            background: #f5f5f5;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 12px;
            color: #666;
            margin-left: auto;
        }
        
        .confidence-insights {
            background: #f9f9f9;
            border-radius: 6px;
            padding: 12px;
            margin-top: 8px;
        }
        
        .insight-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 6px 0;
            font-size: 13px;
            line-height: 1.4;
        }
        
        .insight-item .material-icons {
            font-size: 16px;
            color: #666;
        }
        
        .windows-section {
            margin-top: 20px;
        }
        
        .windows-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-weight: 500;
            font-size: 14px;
        }
        
        .timeline-visualization {
            margin: 16px 0 20px 0;
            background: transparent;
            border-radius: 8px;
            padding: 16px;
        }
        
        .timeline-title {
            font-size: 12px;
            color: #666;
            margin-bottom: 6px;
            text-align: center;
            font-weight: 500;
        }
        
        .timeline-container {
            position: relative;
            height: 24px;
            background: #e8f5e8;
            border: 2px solid #66bb6a;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .timeline-rain-block {
            position: absolute;
            top: 0;
            height: 100%;
            background: repeating-linear-gradient(
                45deg,
                #1565c0,
                #1565c0 3px,
                #1976d2 3px,
                #1976d2 6px
            );
            border-left: 3px solid #0d47a1;
            border-right: 3px solid #0d47a1;
            border-top: 2px solid #0d47a1;
            border-bottom: 2px solid #0d47a1;
            pointer-events: none;
            opacity: 0.9;
        }
        
        .timeline-clear-block {
            position: absolute;
            top: 0;
            height: 100%;
            background: transparent;
            pointer-events: none;
        }
        
        /* Dark mode overrides */
        [data-theme="dark"] .timeline-container {
            background: #247F2D;
            border: 2px solid #66bb6a;
        }
        
        [data-theme="dark"] .timeline-rain-block {
            background: repeating-linear-gradient(
                45deg,
                #0277bd,
                #0277bd 3px,
                #03a9f4 3px,
                #03a9f4 6px
            );
            border-left: 3px solid #01579b;
            border-right: 3px solid #01579b;
            border-top: 2px solid #01579b;
            border-bottom: 2px solid #01579b;
            opacity: 0.95;
        }
        
        [data-theme="dark"] .timeline-clear-block {
            background: transparent;
        }
        
        [data-theme="dark"] .timeline-tick {
            background: #bbb;
        }
        
        [data-theme="dark"] .timeline-tick.major {
            background: #ddd;
        }
        
        [data-theme="dark"] .timeline-tick-label {
            color: #ccc;
        }
        
        .timeline-block {
            position: absolute;
            top: 0;
            height: 100%;
            transition: opacity 0.3s ease;
        }
        
        .timeline-block.good {
            background: #247f2d;
        }
        
        .timeline-block.rain {
            background: #f92f60;
        }
        
        .timeline-block.unknown {
            background: #9e9e9e;
        }
        
        .timeline-labels {
            position: relative;
            height: 15px;
            margin-top: -2px;
        }
        
        .timeline-tick {
            position: absolute;
            bottom: 0;
            width: 1px;
            height: 4px;
            background: #777;
        }
        
        .timeline-tick.major {
            height: 6px;
            background: #444;
        }
        
        .timeline-tick-label {
            position: absolute;
            bottom: -16px;
            font-size: 10px;
            color: #555;
            transform: translateX(-50%);
            white-space: nowrap;
            font-weight: 500;
        }
        
        .timeline-current {
            position: absolute;
            top: -2px;
            width: 2px;
            height: 28px;
            background: #ff9800;
            border-radius: 1px;
            z-index: 10;
        }
        
        .timeline-current::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -3px;
            width: 8px;
            height: 8px;
            background: #ff9800;
            border-radius: 50%;
        }
        
        .timeline-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            font-size: 11px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 2px;
        }
        
        .legend-color.good {
            background: #247f2d;
        }
        
        .legend-color.rain {
            background: #f92f60;
        }
        
        .legend-color.rain-overlay {
            background: rgba(68, 138, 255, 0.3);
        }
        
        .legend-color.current {
            background: #ff9800;
            border-radius: 50%;
        }
        
        .more-periods-link {
            color: #2196f3;
            text-decoration: underline;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .more-periods-link:hover {
            color: #1976d2;
            text-decoration: none;
        }
        
        [data-theme="dark"] .more-periods-link {
            color: #64b5f6;
        }
        
        [data-theme="dark"] .more-periods-link:hover {
            color: #6a8edc;
        }
        
        @media (max-width: 600px) {
            .timeline-visualization {
                padding: 12px;
            }
            
            .timeline-container {
                height: 20px;
            }
            
            .timeline-current {
                height: 24px;
            }
            
            .timeline-legend {
                gap: 12px;
            }
            
            .legend-item {
                font-size: 10px;
            }
            
            .legend-color {
                width: 10px;
                height: 10px;
            }
        }
        
        .windows-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        
        .play-window {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            transition: box-shadow 0.2s;
        }
        
        .play-window:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .window-quality {
            font-weight: 600;
            margin-bottom: 4px;
            font-size: 13px;
        }
        
        .window-quality.excellent {
            color: #247F2D;
        }
        
        .window-quality.good {
            color: #558b2f;
        }
        
        .window-quality.fair {
            color: #f57c00;
        }
        
        .window-time {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }
        
        .window-details {
            font-size: 11px;
            color: #666;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }
        
        .window-score {
            background: #f0f8ff;
            color: #1976d2;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .intelligence-note {
            text-align: center;
            color: #666;
            font-style: italic;
            margin-top: 16px;
            font-size: 12px;
            padding: 12px;
            background: #f9f9f9;
            border-radius: 6px;
        }
        
        /* Dark theme for intelligence section */
        [data-theme="dark"] .intelligence-section {
            border-color: #333;
        }

        /* Precipitation Forecast Chart Styles */
        .precipitation-section {
            padding: 0;
        }
        
        .timeline-chart {
            padding: 0;
        }

        .precipitation-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            font-weight: 600;
            color: #1976d2;
        }

        .precipitation-chart {
            display: flex;
            align-items: flex-end;
            height: 200px;
            margin: 16px 0;
            padding: 0 8px;
        }

        .precip-y-axis {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 180px;
            margin-right: 12px;
            padding-top: 10px;
        }

        .precip-label {
            font-size: 11px;
            color: #666;
            text-align: right;
            line-height: 1;
        }

        .precip-bars {
            display: flex;
            align-items: flex-end;
            height: 160px;
            width: 100%;
            gap: 2px;
            padding: 16px 8px 20px 8px;
            position: relative;
        }

        .precip-bar-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            height: 100%;
            flex: 1;
            min-width: 8px;
        }

        .precip-bar {
            width: 100%;
            min-height: 3px;
            border-radius: 2px 2px 0 0;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .precip-bar.low-rain {
            background: linear-gradient(to top, #4da954, #5db866);
        }

        .precip-bar.medium-rain {
            background: linear-gradient(to top, #ffb74d, #ffcc02);
        }

        .precip-bar.high-rain {
            background: linear-gradient(to top, #fc8aa0, #f92f60);
        }

        .precip-percentage {
            font-size: 9px;
            font-weight: 600;
            color: white;
            text-shadow: 0 0 2px rgba(0,0,0,0.7);
            padding: 1px 2px;
            margin-bottom: 2px;
        }

        .precip-time {
            font-size: 9px;
            color: #666;
            margin-top: 4px;
            height: 12px;
            text-align: center;
        }

        .precip-time.show-label {
            font-weight: 600;
            color: #333;
        }

        .current-time-line {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #ff4444;
            z-index: 10;
            pointer-events: none;
        }

        .current-time-line::before {
            content: "NOW";
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 8px;
            font-weight: 600;
            color: #ff4444;
            background: white;
            padding: 1px 3px;
            border-radius: 2px;
            white-space: nowrap;
        }

        .precipitation-legend {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 12px;
            padding: 8px;
            background: #f9f9f9;
            border-radius: 6px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 2px;
        }

        .legend-color.low-rain {
            background: linear-gradient(to bottom, #4da954, #5db866);
        }

        .legend-color.medium-rain {
            background: linear-gradient(to bottom, #ffb74d, #ffcc02);
        }

        .legend-color.high-rain {
            background: linear-gradient(to bottom, #fc8aa0, #f92f60);
        }

        /* Dark theme for precipitation chart */
        [data-theme="dark"] .precipitation-header {
            color: #64b5f6;
        }

        [data-theme="dark"] .precip-label {
            color: #999;
        }

        [data-theme="dark"] .precip-time {
            color: #999;
        }

        [data-theme="dark"] .precip-time.show-label {
            color: #ccc;
        }

        [data-theme="dark"] .current-time-line::before {
            background: #1a1a1a;
            color: #ff6666;
        }

        [data-theme="dark"] .precipitation-legend {
            background: #2a2a2a;
        }

        [data-theme="dark"] .conditions-section {
            border-color: #333;
        }

        [data-theme="dark"] .conditions-toggle {
            color: #bbb;
        }

        [data-theme="dark"] .conditions-toggle:hover {
            color: #ddd;
        }

        /* Dark theme for playability analysis */
        [data-theme="dark"] .overall-rating {
            color: #e0e0e0;
        }

        [data-theme="dark"] .overall-rating.green {
            background: #1b5e20;
            color: #4da954;
        }

        [data-theme="dark"] .overall-rating.yellow {
            background: #e65100;
            color: #ffb74d;
        }

        [data-theme="dark"] .overall-rating.orange {
            background: #bf360c;
            color: #ff8a65;
        }

        [data-theme="dark"] .overall-rating.red {
            background: #b71c1c;
            color: #ef5350;
        }

        [data-theme="dark"] .factor-item {
            background: #2a2a2a;
        }

        [data-theme="dark"] .factor-item.green {
            background: #1b5e20;
        }

        [data-theme="dark"] .factor-item.yellow {
            background: #e65100;
        }

        [data-theme="dark"] .factor-item.orange {
            background: #bf360c;
        }

        [data-theme="dark"] .factor-item.red {
            background: #b71c1c;
        }

        [data-theme="dark"] .factor-header .material-icons {
            color: #bbb;
        }

        [data-theme="dark"] .factor-name {
            color: #e0e0e0;
        }

        [data-theme="dark"] .factor-rating.green { color: #4da954; }
        [data-theme="dark"] .factor-rating.yellow { color: #ffb74d; }
        [data-theme="dark"] .factor-rating.orange { color: #ff8a65; }
        [data-theme="dark"] .factor-rating.red { color: #ef5350; }

        [data-theme="dark"] .factor-tip {
            color: #bbb;
        }

        [data-theme="dark"] .warning-item {
            background: #2a2a2a;
        }

        [data-theme="dark"] .warning-item.caution {
            background: #e65100;
        }

        [data-theme="dark"] .warning-item.warning {
            background: #bf360c;
        }

        [data-theme="dark"] .warning-item.danger {
            background: #b71c1c;
        }

        [data-theme="dark"] .warning-item .material-icons {
            color: #bbb;
        }

        [data-theme="dark"] .warning-message {
            color: #e0e0e0;
        }

        [data-theme="dark"] .warning-recommendation {
            color: #bbb;
        }

        [data-theme="dark"] .conditions-reference {
            background: #2a2a2a;
        }

        [data-theme="dark"] .reference-title {
            color: #e0e0e0;
        }

        [data-theme="dark"] .reference-links a {
            color: #64b5f6;
        }

        [data-theme="dark"] .reference-links a:hover {
            color: #6a8edc;
        }
        
        [data-theme="dark"] .intelligence-toggle {
            color: #bbb;
        }
        
        [data-theme="dark"] .intelligence-toggle:hover {
            color: #ddd;
        }
        
        [data-theme="dark"] .confidence-insights {
            background: #2a2a2a;
        }
        
        [data-theme="dark"] .confidence-score {
            background: #333;
            color: #bbb;
        }
        
        [data-theme="dark"] .play-window {
            background: #333;
            border-color: #555;
        }
        
        [data-theme="dark"] .window-time {
            color: #e0e0e0;
        }
        
        [data-theme="dark"] .window-details {
            color: #bbb;
        }
        
        [data-theme="dark"] .window-score {
            background: #1a237e;
            color: #6a8edc;
        }
        
        [data-theme="dark"] .intelligence-note {
            background: #2a2a2a;
            color: #bbb;
        }

        /* Video Player Modal */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }
        
        .video-modal.show {
            display: flex;
        }
        
        .video-container {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
        }
        
        .video-player {
            max-width: 100%;
            max-height: 80vh;
            background: #000;
        }
        
        .video-controls {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 2001;
        }
        
        .video-close {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .video-close:hover {
            background: rgba(0, 0, 0, 0.9);
        }
        
        .video-title {
            color: white;
            text-align: center;
            margin-bottom: 10px;
            font-size: 14px;
        }
        
        /* Weather Alert Banner */
        .weather-alert-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 12px 16px;
            color: white;
            font-weight: 500;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            animation: slideDown 0.3s ease-out;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .weather-alert-banner.urgent {
            background: #f92f60;
        }
        
        .weather-alert-banner.medium {
            background: #ff9800;
        }
        
        .weather-alert-banner.low {
            background: #355ec0;
        }
        
        .weather-alert-content {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .weather-alert-dismiss {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            transition: background 0.2s;
        }
        
        .weather-alert-dismiss:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .banner-active {
            padding-top: 60px;
        }
        
        @keyframes slideDown {
            from {
                transform: translateY(-100%);
            }
            to {
                transform: translateY(0);
            }
        }
        
        @keyframes slideUp {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-100%);
            }
        }
        
        .weather-alert-banner.hiding {
            animation: slideUp 0.3s ease-in;
        }
        
        /* ===== ENHANCED SEARCH SYSTEM STYLES ===== */
        
        /* Load More Button */
        .load-more-btn {
            display: block;
            width: 100%;
            max-width: 400px;
            margin: 20px auto;
            padding: 12px 24px;
            background-color: rgba(53, 94, 192, 0.08);
            color: rgba(53, 94, 192, 0.7);
            border: none;
            border-radius: 8px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
        }
        
        .load-more-btn:hover {
            background-color: rgba(53, 94, 192, 0.12);
            color: #355ec0;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(53, 94, 192, 0.2);
        }
        
        .load-more-btn:disabled {
            background: #bbb;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* Dark mode styles for Load More button */
        [data-theme="dark"] .load-more-btn {
            background-color: rgba(121, 160, 240, 0.15);
            color: #79a0f0;
            box-shadow: 0 2px 8px rgba(121, 160, 240, 0.1);
        }
        
        [data-theme="dark"] .load-more-btn:hover {
            background-color: rgba(121, 160, 240, 0.20);
            color: #79a0f0;
            box-shadow: 0 4px 12px rgba(121, 160, 240, 0.15);
        }
        
        .load-more-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .load-more-loading .material-icons {
            font-size: 18px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Search Error Messages */
        .search-error {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            margin: 8px 0;
            background: #ffebee;
            color: #c62828;
            border: 1px solid #ffcdd2;
            border-radius: 8px;
            font-size: 14px;
            animation: slideDown 0.3s ease-out;
        }
        
        [data-theme="dark"] .search-error {
            background: #3a1a1a;
            color: #ff8a80;
            border-color: #5d1e1e;
        }
        
        .search-error .material-icons:first-child {
            font-size: 20px;
            color: #d32f2f;
        }
        
        [data-theme="dark"] .search-error .material-icons:first-child {
            color: #ff8a80;
        }
        
        .error-close {
            background: none;
            border: none;
            padding: 4px;
            margin-left: auto;
            cursor: pointer;
            border-radius: 4px;
            color: #c62828;
            transition: background 0.2s ease;
        }
        
        [data-theme="dark"] .error-close {
            color: #ff8a80;
        }
        
        .error-close:hover {
            background: rgba(255, 0, 0, 0.1);
        }
        
        .error-close .material-icons {
            font-size: 18px;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Enhanced badge styles */
        .court-badge.badge-free {
            background: #247f2d;
            color: white;
        }
        
        .court-badge.badge-paid {
            background: #ff9800;
            color: white;
        }
        
        .court-badge.badge-surface {
            background: #9c27b0;
            color: white;
        }
        
        /* Mobile optimizations for Load More button */
        @media (max-width: 768px) {
            .load-more-btn {
                margin: 16px auto;
                max-width: none;
            }
            
            .search-error {
                margin: 8px 16px;
            }
        }
        /* === SKELETON LOADING STATES FOR PERFORMANCE === */
        
        /* Skeleton animation keyframe */
        @keyframes skeleton-loading {
            0% { background-position: -200px 0; }
            100% { background-position: calc(200px + 100%) 0; }
        }
        
        /* Base skeleton class */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200px 100%;
            animation: skeleton-loading 1.5s infinite;
            border-radius: 4px;
        }
        
        [data-theme="dark"] .skeleton {
            background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
            background-size: 200px 100%;
        }
        
        /* Skeleton text placeholders */
        .skeleton-text {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200px 100%;
            animation: skeleton-loading 1.5s infinite;
            color: transparent !important;
            border-radius: 3px;
            min-height: 1em;
            position: relative;
            overflow: hidden;
        }
        
        [data-theme="dark"] .skeleton-text {
            background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
            background-size: 200px 100%;
        }
        
        /* Skeleton icon placeholders */
        .skeleton-icon {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200px 100%;
            animation: skeleton-loading 1.5s infinite;
            color: transparent !important;
            border-radius: 3px;
            display: inline-block;
            width: 24px;
            height: 24px;
        }
        
        [data-theme="dark"] .skeleton-icon {
            background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
            background-size: 200px 100%;
        }
        
        /* Court-specific skeleton states */
        .court-row.skeleton-loading {
            opacity: 0.7;
        }
        
        .court-row.skeleton-loading .court-row-temp,
        .court-row.skeleton-loading .court-row-status {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200px 100%;
            animation: skeleton-loading 1.5s infinite;
            color: transparent;
            border-radius: 3px;
        }
        
        [data-theme="dark"] .court-row.skeleton-loading .court-row-temp,
        [data-theme="dark"] .court-row.skeleton-loading .court-row-status {
            background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
            background-size: 200px 100%;
        }
        
        /* Grid layout skeleton cards */
        .court-btn.skeleton-loading {
            opacity: 0.7;
            pointer-events: none;
        }
        
        .court-btn.skeleton-loading .court-btn-primary,
        .court-btn.skeleton-loading .court-btn-secondary {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200px 100%;
            animation: skeleton-loading 1.5s infinite;
            color: transparent;
            border-radius: 3px;
        }
        
        [data-theme="dark"] .court-btn.skeleton-loading .court-btn-primary,
        [data-theme="dark"] .court-btn.skeleton-loading .court-btn-secondary {
            background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
            background-size: 200px 100%;
        }
        
        /* Progressive loading enhancement */
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Performance-optimized loading states */
        .loading-shimmer {
            position: relative;
            overflow: hidden;
        }
        
        .loading-shimmer::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateX(-100%);
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0.2) 20%,
                rgba(255, 255, 255, 0.5) 60%,
                rgba(255, 255, 255, 0)
            );
            animation: shimmer 2s infinite;
            content: '';
        }
        
        [data-theme="dark"] .loading-shimmer::after {
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0.1) 20%,
                rgba(255, 255, 255, 0.2) 60%,
                rgba(255, 255, 255, 0)
            );
        }
        
        @keyframes shimmer {
            100% {
                transform: translateX(100%);
            }
        }
        
        /* Optimized for reduced motion accessibility */
        @media (prefers-reduced-motion: reduce) {
            .skeleton,
            .skeleton-text,
            .skeleton-icon,
            .court-row.skeleton-loading .court-row-temp,
            .court-row.skeleton-loading .court-row-status,
            .court-btn.skeleton-loading .court-btn-primary,
            .court-btn.skeleton-loading .court-btn-secondary,
            .loading-shimmer::after {
                animation: none;
            }
            
            .skeleton,
            .skeleton-text,
            .skeleton-icon {
                background: #e0e0e0;
            }
            
            [data-theme="dark"] .skeleton,
            [data-theme="dark"] .skeleton-text,
            [data-theme="dark"] .skeleton-icon {
                background: #3a3a3a;
            }
        }
        
        /* Core Web Vitals optimizations */
        .court-row,
        .court-btn {
            contain: layout style paint;
            will-change: auto;
        }
        
        /* Optimize for CLS (Cumulative Layout Shift) */
        .court-row-weather,
        .court-btn-info {
            min-height: 60px;
        }
        
        .court-row-temp,
        .court-row-status {
            min-width: 40px;
            min-height: 20px;
        }
        
        /* Performance hint for browser */
        .court-row-weather-icon,
        .court-btn-icon {
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Weather Subelement Component */
        .weather-subelement {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 60px;
        }

        /* Horizontal Alignment Options */
        .weather-subelement.h-left {
            justify-content: flex-start;
        }
        
        .weather-subelement.h-right {
            justify-content: flex-end;
        }
        
        .weather-subelement.h-center {
            justify-content: center;
        }
        
        .weather-subelement.h-spaced-evenly {
            justify-content: space-evenly;
        }

        /* Vertical Alignment Options */
        .weather-subelement.v-top {
            align-items: flex-start;
        }
        
        .weather-subelement.v-center {
            align-items: center;
        }
        
        .weather-subelement.v-bottom {
            align-items: flex-end;
        }

        /* Weather Subelement Items */
        .weather-subelement-temp {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
        }

        .weather-subelement-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
            min-height: 16px;
        }

        .weather-subelement-icon img {
            width: 16px;
            height: 16px;
            object-fit: contain;
            display: block;
        }

        .weather-subelement-icon .material-icons {
            font-size: 16px;
            color: #666;
            vertical-align: middle;
            line-height: 1;
        }

        .weather-subelement-status {
            font-size: 10px;
            font-weight: 500;
            padding: 2px 6px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            min-width: 40px;
        }

        /* Status Colors for Subelement */
        .weather-subelement-status.status-dry {
            background: #e8f5e9;
            color: #247F2D;
        }
        
        .weather-subelement-status.status-drying {
            background: #fff3e0;
            color: #ef6c00;
        }
        
        .weather-subelement-status.status-wet {
            background: #ffebee;
            color: #c62828;
        }
        
        .weather-subelement-status.status-indoor {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .weather-subelement-status.status-error {
            background: #ffebee;
            color: #d32f2f;
        }

        .weather-subelement-status.status-loading {
            background: #f5f5f5;
            color: #666;
        }

        /* Dark Theme for Weather Subelement */
        [data-theme="dark"] .weather-subelement-temp {
            color: #e0e0e0;
        }

        [data-theme="dark"] .weather-subelement-icon .material-icons {
            color: #e0e0e0;
        }

        [data-theme="dark"] .weather-subelement-status.status-dry {
            background: #0d4f0f;
            color: #66ff66;
        }
        
        [data-theme="dark"] .weather-subelement-status.status-drying {
            background: #e65100;
            color: #ffb74d;
        }
        
        [data-theme="dark"] .weather-subelement-status.status-wet {
            background: #7a0e0e;
            color: #ff6b6b;
        }
        
        [data-theme="dark"] .weather-subelement-status.status-indoor {
            background: #0d47a1;
            color: #6a8edc;
        }
        
        [data-theme="dark"] .weather-subelement-status.status-error {
            background: #b71c1c;
            color: #ff5252;
        }

        [data-theme="dark"] .weather-subelement-status.status-loading {
            background: #2a2a2a;
            color: #bbb;
        }

        /* Mobile Responsiveness for Weather Subelement */
        @media (max-width: 768px) {
            .weather-subelement {
                min-width: 50px;
                gap: 6px;
            }
            
            .weather-subelement-temp {
                font-size: 14px;
            }
            
            .weather-subelement-status {
                font-size: 9px;
                padding: 1px 4px;
            }
        }

        @media (max-width: 480px) {
            .weather-subelement {
                min-width: 45px;
                gap: 4px;
            }
            
            .weather-subelement-temp {
                font-size: 13px;
            }
            
            /* Ultra-mobile layout adjustments for very small screens */
            .court-row-header {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }
            
            .court-row-main {
                width: 100%;
            }
            
            .court-row-expand-btn {
                order: 2;
                min-height: 36px;
                min-width: 100%;
                border-left: none;
                border-top: 1px solid #eee;
                margin-top: 8px;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }
            
            [data-theme="dark"] .court-row-expand-btn {
                border-top-color: #333;
            }
            
            /* Weather card mobile improvements */
            .weather-card {
                padding: 12px;
                margin: 8px 0;
            }
            
            .weather-header {
                flex-direction: column;
                gap: 8px;
                align-items: flex-start;
            }
            
            .weather-location {
                font-size: 18px;
            }
            
            .current-temp {
                font-size: 32px;
            }
            
            .weather-status {
                font-size: 14px;
            }
            
            /* Address truncation for ultra-small screens */
            .court-row-tertiary {
                max-width: 150px !important;
            }
        }