@lovebowls/leagueelements/dist/elements/LeagueSchedule/LeagueSchedule-styles.d.ts

League Elements package for LoveBowls

export const MOBILE_STYLES: "\n  \n  \n  .panel {\n    margin-bottom: var(--le-padding-m, 1.25em);\n    border: 1px solid var(--le-border-color-light, #f0f0f0);\n    border-radius: var(--le-border-radius-standard, 4px);\n    background-color: var(--le-background-color-panel, #fff);\n  }\n\n  .panel-header-shared {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border-bottom: 1px solid var(--le-border-color-medium, #eee);\n    font-weight: bold;\n    color: var(--le-text-color-primary, #333);\n    background-color: var(--le-background-color-header, #f9f9f9);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-size: var(--le-font-size-medium, 1.1em);\n  }\n\n  .panel .panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background-color: var(--le-background-color-header, #f9f9f9);\n  }\n\n  .panel-content {\n    padding: var(--le-padding-m, 1.25em);\n    background-color: var(--le-background-color-panel, #fff);\n    /* Common border for content area if needed\n    border: 1px solid var(--le-border-color-light, #f0f0f0);\n    */\n  }\n\n  .controls-panel {\n    /* Layout properties moved to mobile/desktop sections */\n    padding: 0;\n    margin-bottom: var(--le-padding-s, 0.5rem);\n    margin-top: var(--le-padding-s, 0.5rem);\n    background: transparent;\n    border: none;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--le-padding-m, 1rem);\n  }\n\n  .filter-controls {\n    gap: var(--le-padding-s, 0.5rem);\n    display: flex;\n    align-items: center;\n    flex: 1;\n  }\n  \n  /* Enhanced dropdown styling for button-like appearance */\n  .controls-panel .dropdown-shared {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .controls-panel .dropdown-select-shared {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    background-color: var(--le-background-color-button, #f0f0f0);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    padding: var(--le-padding-xs, 0.25rem);\n    font-size: var(--le-font-size-dropdown, 1em));\n    color: var(--le-text-color-primary, #333);\n    cursor: pointer;\n    line-height: 1.4;\n    min-width: 150px;\n    transition: all 0.2s ease;\n    font-weight: 500;\n  }\n  \n  .controls-panel .dropdown-select-shared:hover {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #ccc);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  \n  .controls-panel .dropdown-select-shared:focus {\n    outline: none;\n    border-color: var(--le-text-color-accent, #2196f3);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n    background-color: var(--le-background-color-panel, #fff);\n  }\n  \n  .controls-panel .dropdown-select-shared:active {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    transform: translateY(1px);\n  }\n\n  \n  .button-shared {\n    padding: 4px 8px;\n    border: 1px solid var(--le-border-color-medium, #ccc);\n    background-color: var(--le-background-color-button, #f0f0f0);\n    color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */\n    cursor: pointer;\n    border-radius: var(--le-border-radius-standard, 4px);\n    font-size: var(--le-font-size-button, var(--le-font-size-medium, 1.15em)); /* Use variable with fallback */\n    text-decoration: none;\n    display: inline-block;\n    text-align: center;\n    line-height: normal; /* Ensure consistent line height */\n    white-space: nowrap; /* Prevent text wrapping */\n    vertical-align: middle; /* Align nicely if next to text/icons */\n    user-select: none; /* Prevent text selection on click */\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */\n  }\n\n  .button-shared:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */\n    /* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */\n  }\n\n  .button-shared:active:not(:disabled) {\n    /* Optional: style for active (pressed) state */\n    /* background-color: var(--le-background-color-button-active, #d0d0d0); */\n  }\n\n  .button-shared:disabled,\n  .button-shared.disabled { /* Allow class-based disabling too */\n    background-color: var(--le-background-color-button-disabled, #eee);\n    color: var(--le-text-color-secondary, #aaa);\n    border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */\n    cursor: not-allowed;\n    opacity: 0.7; /* Visually indicate disabled state */\n  }\n\n  /* Variations */\n  .button-shared.button-primary {\n    background-color: var(--le-color-primary, #007bff);\n    color: var(--le-text-color-on-primary, #fff);\n    border-color: var(--le-color-primary, #007bff);\n  }\n  .button-shared.button-primary:hover:not(:disabled) {\n    background-color: var(--le-color-primary-hover, #0056b3);\n    border-color: var(--le-color-primary-hover, #0056b3);\n  }\n\n  .button-shared.button-secondary-light {\n    background-color: var(--le-background-color-button-secondary-light, #f8f9fa);\n    color: var(--le-text-color-secondary-light-text, #212529);\n    border-color: var(--le-border-color-secondary-light, #ced4da);\n  }\n  .button-shared.button-secondary-light:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);\n    border-color: var(--le-border-color-secondary-light-hover, #dae0e5);\n    color: var(--le-text-color-secondary-light-text-hover, #212529);\n  }\n\n  /* Example for a darker secondary button if needed elsewhere \n  .button-shared.button-secondary {\n    background-color: var(--le-color-secondary, #6c757d); \n    color: var(--le-text-color-on-secondary, #fff);\n    border-color: var(--le-color-secondary, #6c757d);\n  }\n  .button-shared.button-secondary:hover:not(:disabled) {\n    background-color: var(--le-color-secondary-hover, #5a6268);\n    border-color: var(--le-color-secondary-hover, #5a6268);\n  }\n  */\n\n  \n  /* Shared base styles for dropdown select elements */\n  .dropdown-select-shared {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    background-color: var(--le-background-color-panel, #fff);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-small, 3px);\n    padding: var(--le-padding-xs, 0.25rem);\n    font-size: var(--le-font-size-base, 1em);\n    color: var(--le-text-color-primary, #333);\n    cursor: pointer;\n    line-height: 1.4;\n    max-width: 100%;\n    width: auto;\n    background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    background-position: right 0.5em center;\n    background-size: 1em;\n  }\n  \n  .dropdown-select-shared:hover {\n    border-color: var(--le-border-color-dark, #ccc);\n  }\n  \n  .dropdown-select-shared:focus {\n    outline: none;\n    border-color: var(--le-text-color-accent, #2196f3);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n  }\n\n  .dropdown-shared {\n    position: relative;\n    display: inline-block;\n  }\n\n  /* Shared styles for dropdown menus (button-triggered) */\n  .list-item-actions {\n    position: relative; /* Ensure actions container can contain absolutely positioned menu */\n  }\n  \n  .dropdown-menu {\n    position: fixed; /* Use fixed positioning to escape container boundaries */\n    background-color: var(--le-background-color-panel, #fff);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    min-width: 120px;\n    z-index: 9999; /* Much higher z-index to appear above list containers */\n    margin-top: 2px; /* Small gap between button and menu */\n  }\n  \n  .dropdown-menu-item {\n    padding: var(--le-padding-s, 0.5em) var(--le-padding-m, 0.75em);\n    cursor: pointer;\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    transition: background-color 0.2s ease;\n    font-size: var(--le-font-size-base, 1em);\n    color: var(--le-text-color-primary, #333);\n  }\n  \n  .dropdown-menu-item:last-child {\n    border-bottom: none;\n  }\n  \n  .dropdown-menu-item:hover {\n    background-color: var(--le-background-color-hover, #f5f5f5);\n  }\n  \n  .dropdown-menu-item:first-child {\n    border-top-left-radius: var(--le-border-radius-standard, 4px);\n    border-top-right-radius: var(--le-border-radius-standard, 4px);\n  }\n  \n  .dropdown-menu-item:last-child {\n    border-bottom-left-radius: var(--le-border-radius-standard, 4px);\n    border-bottom-right-radius: var(--le-border-radius-standard, 4px);\n  }\n\n  \n  /* Paging Controls Styles */\n  .paging-controls {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--le-padding-s, 0.5rem);\n    margin-top: var(--le-padding-s, 0.5rem);\n    padding: var(--le-padding-xs, 0.25rem) 0;\n    background-color: transparent;\n    border: none;\n    font-size: var(--le-font-size-xs, 0.75em);\n  }\n\n  .paging-btn {\n    background: var(--le-background-color-button, #f5f5f5);\n    border: 1px solid var(--le-border-color-dark, #ccc);\n    border-radius: var(--le-border-radius-small, 3px);\n    padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.7rem);\n    cursor: pointer;\n    color: var(--le-text-color-primary, #333);\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    user-select: none;\n  }\n\n  .paging-btn:hover:not(:disabled) {\n    background: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #bbb);\n  }\n\n  .paging-btn:disabled {\n    background: var(--le-background-color-button-disabled, #eee);\n    color: var(--le-text-color-secondary, #aaa);\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  :host {\n    display: block;\n    font-family: var(--le-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif);\n    box-sizing: border-box;\n    color: var(--le-text-color-primary, #333);\n  }\n  \n  .schedule-container {\n    display: flex;\n    flex-direction: column;\n  }\n  \n  .controls-panel {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--le-padding-m, 1rem);\n    padding: var(--le-padding-s, 0.5rem) 0;\n  }\n  \n  .filter-controls {\n    display: flex;\n    align-items: center;\n    gap: var(--le-padding-s, 0.5rem);\n  }\n  \n  .filter-panel {\n    padding: 0;\n    margin-bottom: 0;\n    background: transparent;\n    border: none;\n  }\n    \n  .calendar-filter {\n    padding: var(--le-padding-s, 0.5rem) 0;\n  }\n  \n  .schedule-table {\n    width: 100%;\n    border-collapse: collapse;\n    table-layout: fixed;\n    margin-top: var(--le-padding-s, 0.5rem);\n    display: table;\n  }\n  \n  .schedule-table tr {\n    display: table-row;\n    margin: 0;\n    padding: 0;\n  }\n  \n  .schedule-table td,\n  .schedule-table th {\n    display: table-cell;\n    margin: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: 1.4;\n  }\n  \n  .schedule-table th {\n    background-color: var(--le-background-color-header, #f5f5f5);\n    color: var(--le-text-color-primary, #333);\n    font-weight: 600;\n    text-align: center;\n    padding: 0.25rem 0.5rem;\n    border-bottom: 2px solid var(--le-border-color-medium, #ddd);\n    display: table-cell;\n    vertical-align: middle;\n    line-height: 1.4;\n  }\n  \n  .schedule-table th.date-col,\n  .schedule-table th.team-col {\n    text-align: left;\n  }\n  \n  .schedule-table th.rink-col,\n  .schedule-table th.result-col {\n    text-align: center;\n  }\n  \n  .schedule-table td {\n    padding: 0.25rem 0.5rem;\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n    display: table-cell;\n    vertical-align: middle;\n    line-height: 1.4;\n    margin: 0;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n  }\n  \n  .schedule-table td:first-child,\n  .schedule-table td:nth-child(3),\n  .schedule-table td:nth-child(4) {\n    text-align: left;\n  }\n  \n  .schedule-table tr:hover {\n    background-color: var(--le-background-color-row-hover, #f9f9f9);\n  }\n  \n  .match-row {\n    cursor: pointer;\n    display: table-row;\n    line-height: 1.4;\n    padding: 0;\n    margin: 0;\n    border: none;\n    background: none;\n  }\n  \n  .match-row.selected {\n    background-color: var(--le-background-color-selected, #e6f7ff);\n  }\n  \n  /* Match state styles */\n  .match-row.past-with-result {\n    opacity: 0.6;\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .match-row.past-with-result td {\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .match-row.past-with-result:hover {\n    background-color: rgba(249, 249, 249, 0.8);\n  }\n  \n  .match-row.past-no-result {\n    background-color: #fff5f5;\n    border-left: 4px solid #ff6b6b;\n  }\n  \n  .match-row.past-no-result:hover {\n    background-color: #ffebeb;\n  }\n  \n  .match-row.past-no-result td {\n    color: #d63031;\n    font-weight: 500;\n  }\n  \n  .match-row.past-no-result .result-col {\n    font-style: normal;\n    font-weight: 600;\n    text-align: center;\n  }\n  \n  .match-row.future {\n    /* Keep normal styling for future matches */\n  }\n  \n  .date-col {\n    width: 15%;\n  }\n  \n  .team-col {\n    width: 30%;\n  }\n  \n  .result-col {\n    width: 15%;\n  }\n  \n  .rink-col {\n    width: 10%;\n    text-align: center;\n  }\n  \n  .paging-info {\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .paging-buttons {\n    /* Layout properties moved to mobile/desktop sections */\n    gap: var(--le-padding-xs, 0.25rem);\n  }\n  \n  .paging-buttons button {\n    padding: 0.25rem 0.5rem;\n    background-color: var(--le-background-color-button, #f0f0f0);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    color: var(--le-text-color-primary, #333);\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n  \n  .paging-buttons button:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #ccc);\n  }\n  \n  .paging-buttons button:disabled {\n    background-color: var(--le-background-color-button-disabled, #f5f5f5);\n    color: var(--le-text-color-secondary, #999);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  \n  .error {\n    color: var(--le-text-color-error, #ff0000);\n    padding: var(--le-padding-s, 0.5rem);\n    background-color: var(--le-background-color-error, #fff0f0);\n    border-radius: var(--le-border-radius-standard, 4px);\n    margin-bottom: var(--le-padding-s, 0.5rem);\n  }\n  \n  /* Needs attention styles */\n  .match-row.needs-attention {\n    background-color: #fff8e1; /* Light yellow background for attention */\n    border-left: 4px solid #ff9800; /* Orange border for attention */\n  }\n\n  .match-row.needs-attention:hover {\n    background-color: #ffecb3; /* Slightly darker yellow on hover */\n  }\n\n  .match-row.needs-attention td {\n    color: #e65100; /* Dark orange text for attention */\n    font-weight: 500;\n  }\n\n  .match-row.needs-attention .result-col {\n    font-style: normal;\n    font-weight: 600;\n    text-align: center;\n  }\n\n  /* Mobile needs attention styles */\n  .schedule-table .match-row.needs-attention {\n    border-left: 4px solid #ff9800;\n    background-color: #fff8e1;\n  }\n  \n  /* Editable date link styles */\n  .date-link {\n    color: var(--le-color-primary, #007bff);\n    text-decoration: underline;\n    cursor: pointer;\n    transition: color 0.2s ease;\n  }\n  \n  .date-link:hover {\n    color: var(--le-color-primary-dark, #0056b3);\n    text-decoration: underline;\n  }\n  \n  .date-link:active {\n    color: var(--le-color-primary-darker, #004085);\n  }\n  \n  /* Editable rink link styles */\n  .rink-link {\n    color: var(--le-color-primary, #007bff);\n    text-decoration: underline;\n    cursor: pointer;\n    transition: color 0.2s ease;\n  }\n  \n  .rink-link:hover {\n    color: var(--le-color-primary-dark, #0056b3);\n    text-decoration: underline;\n  }\n  \n  .rink-link:active {\n    color: var(--le-color-primary-darker, #004085);\n  }\n\n  \n  /* Mobile-specific controls panel adjustments */\n  .controls-panel {\n    flex-direction: column;\n    gap: var(--le-padding-s, 0.5rem);\n    align-items: stretch;\n  }\n  \n  .controls-panel .dropdown-shared {\n    width: 100%;\n  }\n  \n  .controls-panel .dropdown-select-shared {\n    width: 100%;\n    min-width: auto;\n  }\n  \n  .calendar-filter {\n    width: 100%;\n  }\n  \n  .schedule-cards {\n    display: block;\n    font-size: var(--le-font-size-xs);\n  }\n  \n  .match-card {\n    display: block;\n    width: 100%;\n    margin-bottom: 1rem;\n    border: none;\n    border-radius: 12px;\n    padding: var(--le-padding-s);\n    position: relative;\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);\n    border-left: 4px solid #e9ecef;\n    transition: all 0.2s ease-in-out;\n    cursor: pointer;\n    box-sizing: border-box;\n  }\n  \n  .match-card:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);\n  }\n  \n  /* Enhanced mobile match state styles */\n  .match-card.past-no-result {\n    border-left: 4px solid #ff6b6b;\n    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);\n    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.15), 0 1px 3px rgba(255, 107, 107, 0.1);\n  }\n  \n  .match-card.past-with-result {\n    border-left: 4px solid #28a745;\n    background: linear-gradient(135deg, #f8fff9 0%, #e6f7e6 100%);\n    opacity: 0.85;\n  }\n  \n  .match-card.today {\n    border-left: 4px solid #ffc107;\n    background: linear-gradient(135deg, #fffbf0 0%, #fff3cd 100%);\n    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2), 0 1px 3px rgba(255, 193, 7, 0.1);\n  }\n  \n  .match-card.future {\n    border-left: 4px solid #007bff;\n    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);\n  }\n  \n  .match-card.needs-attention {\n    border-left: 4px solid #ff9800;\n    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);\n    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15), 0 1px 3px rgba(255, 152, 0, 0.1);\n  }\n  \n  .card-row {\n    display: flex;\n    align-items: center;\n    padding: 0;\n    line-height: 1.4;\n  }\n  \n  .card-label {\n    font-weight: 600;\n    width: 5%;\n    margin-right: 0.75rem;\n    color: var(--le-text-color-secondary, #6c757d);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n  }\n  \n  .card-value {\n    flex: 1;\n    font-weight: 500;\n    color: var(--le-text-color-primary, #333);\n    position: relative;\n  }\n  \n  .card-row:after {\n    content: '';\n    position: absolute;\n    right: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n    width: calc(100% - 15% - 0.75rem);\n    height: 1px;\n    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, transparent 100%);\n    z-index: 0;\n  }\n  \n  /* Remove the line for the last row */\n  .card-row:last-child:after {\n    display: none;\n  }\n  \n  .card-row:not(:last-child) {\n    margin-bottom: 0.2rem;\n  }\n  \n  /* Date styling */\n  .card-row:first-child .card-value {\n    font-weight: 700;\n    color: var(--le-color-primary, #007bff);\n  }\n  \n  .match-card.today .card-row:first-child .card-value {\n    color: #e67e22;\n    text-shadow: 0 1px 2px rgba(230, 126, 34, 0.3);\n  }\n  \n  /* Date and rink container styling */\n  .date-rink-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n  \n  .date-section {\n    text-align: left;\n    flex: 1;\n  }\n  \n  .rink-section {\n    text-align: right;\n    color: var(--le-text-color-secondary, #666);\n    font-weight: 500;\n    margin-left: 0.5rem;\n  }\n  \n  /* Teams and result grid layout */\n  .teams-result-row {\n    display: grid;\n    grid-template-columns: auto 1fr 1rem auto 1rem 1fr auto;\n    align-items: center;\n    width: 100%;\n    gap: 0;\n  }\n  \n  .home-label {\n    font-weight: 600;\n    color: var(--le-text-color-secondary, #6c757d);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    grid-column: 1;\n    margin-right: 0.25rem;\n  }\n  \n  .team-name-home {\n    font-weight: 500;\n    color: var(--le-text-color-primary, #2c3e50);\n    text-align: right;\n    grid-column: 2;\n  }\n  \n  .result-score {\n    font-weight: 700;\n    color: var(--le-color-primary, #007bff);\n    background: none !important;\n    white-space: nowrap;\n    grid-column: 4;\n    justify-self: center;\n  }\n  \n  .team-name-away {\n    font-weight: 500;\n    color: var(--le-text-color-primary, #2c3e50);\n    text-align: left;\n    grid-column: 6;\n  }\n  \n  .away-label {\n    font-weight: 600;\n    color: var(--le-text-color-secondary, #6c757d);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    grid-column: 7;\n    margin-left: 0.25rem;\n  }\n  \n  /* Winner team styling */\n  .team-name-home.winner,\n  .team-name-away.winner {\n    font-weight: 700;\n  }\n  \n  /* Result styling for different match states */\n  .match-card.past-no-result .result-score,\n  .match-card.needs-attention .result-score {\n    background-color: rgba(214, 48, 49, 0.1);\n    color: #d63031;\n  }\n  \n  .match-card.past-with-result .result-score {\n    background-color: rgba(40, 167, 69, 0.1);\n    color: #28a745;\n  }\n  \n  .paging-info {\n    text-align: center;\n  }\n";
export const DESKTOP_STYLES: "\n  \n  \n  .panel {\n    margin-bottom: var(--le-padding-m, 1.25em);\n    border: 1px solid var(--le-border-color-light, #f0f0f0);\n    border-radius: var(--le-border-radius-standard, 4px);\n    background-color: var(--le-background-color-panel, #fff);\n  }\n\n  .panel-header-shared {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border-bottom: 1px solid var(--le-border-color-medium, #eee);\n    font-weight: bold;\n    color: var(--le-text-color-primary, #333);\n    background-color: var(--le-background-color-header, #f9f9f9);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-size: var(--le-font-size-medium, 1.1em);\n  }\n\n  .panel .panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background-color: var(--le-background-color-header, #f9f9f9);\n  }\n\n  .panel-content {\n    padding: var(--le-padding-m, 1.25em);\n    background-color: var(--le-background-color-panel, #fff);\n    /* Common border for content area if needed\n    border: 1px solid var(--le-border-color-light, #f0f0f0);\n    */\n  }\n\n  .controls-panel {\n    /* Layout properties moved to mobile/desktop sections */\n    padding: 0;\n    margin-bottom: var(--le-padding-s, 0.5rem);\n    margin-top: var(--le-padding-s, 0.5rem);\n    background: transparent;\n    border: none;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--le-padding-m, 1rem);\n  }\n\n  .filter-controls {\n    gap: var(--le-padding-s, 0.5rem);\n    display: flex;\n    align-items: center;\n    flex: 1;\n  }\n  \n  /* Enhanced dropdown styling for button-like appearance */\n  .controls-panel .dropdown-shared {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .controls-panel .dropdown-select-shared {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    background-color: var(--le-background-color-button, #f0f0f0);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    padding: var(--le-padding-xs, 0.25rem);\n    font-size: var(--le-font-size-dropdown, 1em));\n    color: var(--le-text-color-primary, #333);\n    cursor: pointer;\n    line-height: 1.4;\n    min-width: 150px;\n    transition: all 0.2s ease;\n    font-weight: 500;\n  }\n  \n  .controls-panel .dropdown-select-shared:hover {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #ccc);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  \n  .controls-panel .dropdown-select-shared:focus {\n    outline: none;\n    border-color: var(--le-text-color-accent, #2196f3);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n    background-color: var(--le-background-color-panel, #fff);\n  }\n  \n  .controls-panel .dropdown-select-shared:active {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    transform: translateY(1px);\n  }\n\n  \n  .button-shared {\n    padding: 4px 8px;\n    border: 1px solid var(--le-border-color-medium, #ccc);\n    background-color: var(--le-background-color-button, #f0f0f0);\n    color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */\n    cursor: pointer;\n    border-radius: var(--le-border-radius-standard, 4px);\n    font-size: var(--le-font-size-button, var(--le-font-size-medium, 1.15em)); /* Use variable with fallback */\n    text-decoration: none;\n    display: inline-block;\n    text-align: center;\n    line-height: normal; /* Ensure consistent line height */\n    white-space: nowrap; /* Prevent text wrapping */\n    vertical-align: middle; /* Align nicely if next to text/icons */\n    user-select: none; /* Prevent text selection on click */\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */\n  }\n\n  .button-shared:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */\n    /* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */\n  }\n\n  .button-shared:active:not(:disabled) {\n    /* Optional: style for active (pressed) state */\n    /* background-color: var(--le-background-color-button-active, #d0d0d0); */\n  }\n\n  .button-shared:disabled,\n  .button-shared.disabled { /* Allow class-based disabling too */\n    background-color: var(--le-background-color-button-disabled, #eee);\n    color: var(--le-text-color-secondary, #aaa);\n    border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */\n    cursor: not-allowed;\n    opacity: 0.7; /* Visually indicate disabled state */\n  }\n\n  /* Variations */\n  .button-shared.button-primary {\n    background-color: var(--le-color-primary, #007bff);\n    color: var(--le-text-color-on-primary, #fff);\n    border-color: var(--le-color-primary, #007bff);\n  }\n  .button-shared.button-primary:hover:not(:disabled) {\n    background-color: var(--le-color-primary-hover, #0056b3);\n    border-color: var(--le-color-primary-hover, #0056b3);\n  }\n\n  .button-shared.button-secondary-light {\n    background-color: var(--le-background-color-button-secondary-light, #f8f9fa);\n    color: var(--le-text-color-secondary-light-text, #212529);\n    border-color: var(--le-border-color-secondary-light, #ced4da);\n  }\n  .button-shared.button-secondary-light:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);\n    border-color: var(--le-border-color-secondary-light-hover, #dae0e5);\n    color: var(--le-text-color-secondary-light-text-hover, #212529);\n  }\n\n  /* Example for a darker secondary button if needed elsewhere \n  .button-shared.button-secondary {\n    background-color: var(--le-color-secondary, #6c757d); \n    color: var(--le-text-color-on-secondary, #fff);\n    border-color: var(--le-color-secondary, #6c757d);\n  }\n  .button-shared.button-secondary:hover:not(:disabled) {\n    background-color: var(--le-color-secondary-hover, #5a6268);\n    border-color: var(--le-color-secondary-hover, #5a6268);\n  }\n  */\n\n  \n  /* Shared base styles for dropdown select elements */\n  .dropdown-select-shared {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    background-color: var(--le-background-color-panel, #fff);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-small, 3px);\n    padding: var(--le-padding-xs, 0.25rem);\n    font-size: var(--le-font-size-base, 1em);\n    color: var(--le-text-color-primary, #333);\n    cursor: pointer;\n    line-height: 1.4;\n    max-width: 100%;\n    width: auto;\n    background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    background-position: right 0.5em center;\n    background-size: 1em;\n  }\n  \n  .dropdown-select-shared:hover {\n    border-color: var(--le-border-color-dark, #ccc);\n  }\n  \n  .dropdown-select-shared:focus {\n    outline: none;\n    border-color: var(--le-text-color-accent, #2196f3);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n  }\n\n  .dropdown-shared {\n    position: relative;\n    display: inline-block;\n  }\n\n  /* Shared styles for dropdown menus (button-triggered) */\n  .list-item-actions {\n    position: relative; /* Ensure actions container can contain absolutely positioned menu */\n  }\n  \n  .dropdown-menu {\n    position: fixed; /* Use fixed positioning to escape container boundaries */\n    background-color: var(--le-background-color-panel, #fff);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    min-width: 120px;\n    z-index: 9999; /* Much higher z-index to appear above list containers */\n    margin-top: 2px; /* Small gap between button and menu */\n  }\n  \n  .dropdown-menu-item {\n    padding: var(--le-padding-s, 0.5em) var(--le-padding-m, 0.75em);\n    cursor: pointer;\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    transition: background-color 0.2s ease;\n    font-size: var(--le-font-size-base, 1em);\n    color: var(--le-text-color-primary, #333);\n  }\n  \n  .dropdown-menu-item:last-child {\n    border-bottom: none;\n  }\n  \n  .dropdown-menu-item:hover {\n    background-color: var(--le-background-color-hover, #f5f5f5);\n  }\n  \n  .dropdown-menu-item:first-child {\n    border-top-left-radius: var(--le-border-radius-standard, 4px);\n    border-top-right-radius: var(--le-border-radius-standard, 4px);\n  }\n  \n  .dropdown-menu-item:last-child {\n    border-bottom-left-radius: var(--le-border-radius-standard, 4px);\n    border-bottom-right-radius: var(--le-border-radius-standard, 4px);\n  }\n\n  \n  /* Paging Controls Styles */\n  .paging-controls {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--le-padding-s, 0.5rem);\n    margin-top: var(--le-padding-s, 0.5rem);\n    padding: var(--le-padding-xs, 0.25rem) 0;\n    background-color: transparent;\n    border: none;\n    font-size: var(--le-font-size-xs, 0.75em);\n  }\n\n  .paging-btn {\n    background: var(--le-background-color-button, #f5f5f5);\n    border: 1px solid var(--le-border-color-dark, #ccc);\n    border-radius: var(--le-border-radius-small, 3px);\n    padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.7rem);\n    cursor: pointer;\n    color: var(--le-text-color-primary, #333);\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    user-select: none;\n  }\n\n  .paging-btn:hover:not(:disabled) {\n    background: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #bbb);\n  }\n\n  .paging-btn:disabled {\n    background: var(--le-background-color-button-disabled, #eee);\n    color: var(--le-text-color-secondary, #aaa);\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  :host {\n    display: block;\n    font-family: var(--le-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif);\n    box-sizing: border-box;\n    color: var(--le-text-color-primary, #333);\n  }\n  \n  .schedule-container {\n    display: flex;\n    flex-direction: column;\n  }\n  \n  .controls-panel {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--le-padding-m, 1rem);\n    padding: var(--le-padding-s, 0.5rem) 0;\n  }\n  \n  .filter-controls {\n    display: flex;\n    align-items: center;\n    gap: var(--le-padding-s, 0.5rem);\n  }\n  \n  .filter-panel {\n    padding: 0;\n    margin-bottom: 0;\n    background: transparent;\n    border: none;\n  }\n    \n  .calendar-filter {\n    padding: var(--le-padding-s, 0.5rem) 0;\n  }\n  \n  .schedule-table {\n    width: 100%;\n    border-collapse: collapse;\n    table-layout: fixed;\n    margin-top: var(--le-padding-s, 0.5rem);\n    display: table;\n  }\n  \n  .schedule-table tr {\n    display: table-row;\n    margin: 0;\n    padding: 0;\n  }\n  \n  .schedule-table td,\n  .schedule-table th {\n    display: table-cell;\n    margin: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: 1.4;\n  }\n  \n  .schedule-table th {\n    background-color: var(--le-background-color-header, #f5f5f5);\n    color: var(--le-text-color-primary, #333);\n    font-weight: 600;\n    text-align: center;\n    padding: 0.25rem 0.5rem;\n    border-bottom: 2px solid var(--le-border-color-medium, #ddd);\n    display: table-cell;\n    vertical-align: middle;\n    line-height: 1.4;\n  }\n  \n  .schedule-table th.date-col,\n  .schedule-table th.team-col {\n    text-align: left;\n  }\n  \n  .schedule-table th.rink-col,\n  .schedule-table th.result-col {\n    text-align: center;\n  }\n  \n  .schedule-table td {\n    padding: 0.25rem 0.5rem;\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n    display: table-cell;\n    vertical-align: middle;\n    line-height: 1.4;\n    margin: 0;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n  }\n  \n  .schedule-table td:first-child,\n  .schedule-table td:nth-child(3),\n  .schedule-table td:nth-child(4) {\n    text-align: left;\n  }\n  \n  .schedule-table tr:hover {\n    background-color: var(--le-background-color-row-hover, #f9f9f9);\n  }\n  \n  .match-row {\n    cursor: pointer;\n    display: table-row;\n    line-height: 1.4;\n    padding: 0;\n    margin: 0;\n    border: none;\n    background: none;\n  }\n  \n  .match-row.selected {\n    background-color: var(--le-background-color-selected, #e6f7ff);\n  }\n  \n  /* Match state styles */\n  .match-row.past-with-result {\n    opacity: 0.6;\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .match-row.past-with-result td {\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .match-row.past-with-result:hover {\n    background-color: rgba(249, 249, 249, 0.8);\n  }\n  \n  .match-row.past-no-result {\n    background-color: #fff5f5;\n    border-left: 4px solid #ff6b6b;\n  }\n  \n  .match-row.past-no-result:hover {\n    background-color: #ffebeb;\n  }\n  \n  .match-row.past-no-result td {\n    color: #d63031;\n    font-weight: 500;\n  }\n  \n  .match-row.past-no-result .result-col {\n    font-style: normal;\n    font-weight: 600;\n    text-align: center;\n  }\n  \n  .match-row.future {\n    /* Keep normal styling for future matches */\n  }\n  \n  .date-col {\n    width: 15%;\n  }\n  \n  .team-col {\n    width: 30%;\n  }\n  \n  .result-col {\n    width: 15%;\n  }\n  \n  .rink-col {\n    width: 10%;\n    text-align: center;\n  }\n  \n  .paging-info {\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .paging-buttons {\n    /* Layout properties moved to mobile/desktop sections */\n    gap: var(--le-padding-xs, 0.25rem);\n  }\n  \n  .paging-buttons button {\n    padding: 0.25rem 0.5rem;\n    background-color: var(--le-background-color-button, #f0f0f0);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    color: var(--le-text-color-primary, #333);\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n  \n  .paging-buttons button:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #ccc);\n  }\n  \n  .paging-buttons button:disabled {\n    background-color: var(--le-background-color-button-disabled, #f5f5f5);\n    color: var(--le-text-color-secondary, #999);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  \n  .error {\n    color: var(--le-text-color-error, #ff0000);\n    padding: var(--le-padding-s, 0.5rem);\n    background-color: var(--le-background-color-error, #fff0f0);\n    border-radius: var(--le-border-radius-standard, 4px);\n    margin-bottom: var(--le-padding-s, 0.5rem);\n  }\n  \n  /* Needs attention styles */\n  .match-row.needs-attention {\n    background-color: #fff8e1; /* Light yellow background for attention */\n    border-left: 4px solid #ff9800; /* Orange border for attention */\n  }\n\n  .match-row.needs-attention:hover {\n    background-color: #ffecb3; /* Slightly darker yellow on hover */\n  }\n\n  .match-row.needs-attention td {\n    color: #e65100; /* Dark orange text for attention */\n    font-weight: 500;\n  }\n\n  .match-row.needs-attention .result-col {\n    font-style: normal;\n    font-weight: 600;\n    text-align: center;\n  }\n\n  /* Mobile needs attention styles */\n  .schedule-table .match-row.needs-attention {\n    border-left: 4px solid #ff9800;\n    background-color: #fff8e1;\n  }\n  \n  /* Editable date link styles */\n  .date-link {\n    color: var(--le-color-primary, #007bff);\n    text-decoration: underline;\n    cursor: pointer;\n    transition: color 0.2s ease;\n  }\n  \n  .date-link:hover {\n    color: var(--le-color-primary-dark, #0056b3);\n    text-decoration: underline;\n  }\n  \n  .date-link:active {\n    color: var(--le-color-primary-darker, #004085);\n  }\n  \n  /* Editable rink link styles */\n  .rink-link {\n    color: var(--le-color-primary, #007bff);\n    text-decoration: underline;\n    cursor: pointer;\n    transition: color 0.2s ease;\n  }\n  \n  .rink-link:hover {\n    color: var(--le-color-primary-dark, #0056b3);\n    text-decoration: underline;\n  }\n  \n  .rink-link:active {\n    color: var(--le-color-primary-darker, #004085);\n  }\n\n  \n  /* Desktop-specific controls panel adjustments */\n  .controls-panel {\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    padding: 0 var(--le-padding-s, 0.5rem);\n    box-sizing: border-box;\n  }\n  \n  .filter-controls {\n    display: flex;\n    align-items: center;\n    gap: var(--le-padding-s, 0.5rem);\n    flex: 1;\n    justify-content: space-between;\n  }\n  \n  /* Desktop-specific dropdown styling for filter controls */\n  .filter-controls .dropdown-shared {\n    width: auto;\n    min-width: 120px;\n  }\n  \n  .filter-controls .dropdown-shared:last-child {\n    text-align: right;\n  }\n  \n  .filter-controls .dropdown-select-shared {\n    width: 100%;\n    min-width: 120px;\n  }\n  \n  .filter-controls .dropdown-shared:last-child .dropdown-select-shared {\n    width: auto;\n    min-width: 120px;\n  }\n      \n  .calendar-filter {\n    max-width: 400px;\n    margin: 0;\n  }\n  \n  .paging-controls {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  \n  .paging-settings {\n    display: flex;\n    align-items: center;\n  }\n  \n  .paging-buttons {\n    display: flex;\n  }\n  \n  /* Desktop table layout */\n  .schedule-table {\n    width: 100%;\n    border-collapse: collapse;\n    table-layout: fixed;\n    margin-top: var(--le-padding-s, 0.5rem);\n    display: table;\n  }\n  \n  .schedule-table tr {\n    display: table-row;\n    margin: 0;\n    padding: 0;\n  }\n  \n  .schedule-table td,\n  .schedule-table th {\n    display: table-cell;\n    margin: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: 1.4;\n  }\n  \n  .schedule-table th {\n    background-color: var(--le-background-color-header, #f5f5f5);\n    color: var(--le-text-color-primary, #333);\n    font-weight: 600;\n    text-align: center;\n    padding: 0.25rem 0.5rem;\n    border-bottom: 2px solid var(--le-border-color-medium, #ddd);\n    display: table-cell;\n    vertical-align: middle;\n    line-height: 1.4;\n  }\n  \n  .schedule-table th.date-col,\n  .schedule-table th.team-col {\n    text-align: left;\n  }\n  \n  .schedule-table th.rink-col,\n  .schedule-table th.result-col {\n    text-align: center;\n  }\n  \n  .schedule-table td {\n    padding: 0.25rem 0.5rem;\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n    display: table-cell;\n    vertical-align: middle;\n    line-height: 1.4;\n    margin: 0;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n  }\n  \n  .schedule-table td[data-label=\"Date\"],\n  .schedule-table td[data-label=\"H\"] {\n    text-align: left;\n  }\n  \n  .schedule-table td[data-label=\"Rink\"],\n  .schedule-table td[data-label=\"Result\"] {\n    text-align: center;\n  }\n  \n  .schedule-table td[data-label=\"A\"] {\n    text-align: left;\n  }\n  \n  .schedule-table tr:hover {\n    background-color: var(--le-background-color-row-hover, #f9f9f9);\n  }\n  \n  .schedule-table thead {\n    display: table-header-group;\n  }\n  \n  .schedule-table tbody {\n    display: table-row-group;\n  }\n  \n  .schedule-table tr {\n    display: table-row;\n    margin-bottom: 0;\n    border: none;\n    border-radius: 0;\n    padding: 0;\n  }\n  \n  .schedule-table td::before {\n    content: none;\n  }\n  \n  /* Desktop column widths */\n  .date-col {\n    width: 15%;\n  }\n  \n  .team-col {\n    width: 30%;\n  }\n  \n  .result-col {\n    width: 15%;\n  }\n  \n  .rink-col {\n    width: 10%;\n    text-align: center;\n  }\n  \n  /* Desktop match row styles */\n  .match-row {\n    cursor: pointer;\n    display: table-row;\n    line-height: 1.4;\n    padding: 0;\n    margin: 0;\n    border: none;\n    background: none;\n  }\n  \n  .match-row.selected {\n    background-color: var(--le-background-color-selected, #e6f7ff);\n  }\n  \n  .match-row.past-with-result {\n    opacity: 0.6;\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .match-row.past-with-result td {\n    color: var(--le-text-color-secondary, #666);\n  }\n  \n  .match-row.past-with-result:hover {\n    background-color: rgba(249, 249, 249, 0.8);\n  }\n  \n  .match-row.past-no-result {\n    background-color: #fff5f5;\n    border-left: 4px solid #ff6b6b;\n  }\n  \n  .match-row.past-no-result:hover {\n    background-color: #ffebeb;\n  }\n  \n  .match-row.past-no-result td {\n    color: #d63031;\n    font-weight: 500;\n  }\n  \n  .match-row.past-no-result .result-col {\n    font-style: normal;\n    font-weight: 600;\n    text-align: center;\n  }\n  \n  .match-row.needs-attention {\n    background-color: #fff8e1;\n    border-left: 4px solid #ff9800;\n  }\n\n  .match-row.needs-attention:hover {\n    background-color: #ffecb3;\n  }\n\n  .match-row.needs-attention td {\n    color: #e65100;\n    font-weight: 500;\n  }\n\n  .match-row.needs-attention .result-col {\n    font-style: normal;\n    font-weight: 600;\n    text-align: center;\n  }\n  \n  /* Desktop-specific column alignments */\n  .home-col {\n    text-align: right !important;\n  }\n  \n  .center-align {\n    text-align: center !important;\n  }\n  \n  /* Desktop winner styling */\n  .winner {\n    font-weight: 700 !important;\n  }\n  \n  /* Desktop dropdowns - ensure consistency */\n  .controls-panel .dropdown-shared {\n    width: auto;\n    min-width: 160px;\n  }\n";
//# sourceMappingURL=LeagueSchedule-styles.d.ts.map