@lovebowls/leagueelements
Version:
League Elements package for LoveBowls
7 lines • 53.1 kB
TypeScript
export const BASE_STYLES: "\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 }\n\n .panel-content-shared {\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 \n .button-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\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 /* Small button variant */\n .button-shared.button-sm {\n padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n /* line-height can be tighter if needed for small buttons */\n /* line-height: 1.2; */\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 .dropdown-shared {\n position: relative;\n display: inline-block;\n }\n \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) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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 /* Mobile-specific adjustments */\n @media (max-width: 480px) {\n .dropdown-select-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n }\n \n /* For dropdown containers that need to be right-aligned */\n .dropdown-container-right {\n display: flex;\n justify-content: flex-end;\n }\n \n /* For dropdowns within flexbox layouts */\n .dropdown-container-flex {\n display: flex;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n\n /* Dropdown Menu Styles (for button-triggered dropdowns like export menu) */\n .dropdown-menu-shared {\n position: relative;\n display: inline-block;\n }\n \n .dropdown-menu-button-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) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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 min-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-menu-button-shared:hover {\n border-color: var(--le-border-color-dark, #ccc);\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-button-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-menu-list-shared {\n display: none;\n position: absolute;\n right: 0;\n top: 100%;\n background-color: var(--le-background-color-panel, #fff);\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1000;\n border-radius: var(--le-border-radius-small, 3px);\n border: 1px solid var(--le-border-color-medium, #ddd);\n overflow: hidden;\n }\n \n .dropdown-menu-list-shared.show {\n display: block;\n }\n \n .dropdown-menu-item-shared {\n color: var(--le-text-color-primary, #333);\n padding: var(--le-padding-s, 0.5rem) var(--le-padding-m, 1rem);\n text-decoration: none;\n display: block;\n text-align: left;\n width: 100%;\n background: none;\n border: none;\n cursor: pointer;\n font-size: var(--le-font-size-base, 1em);\n box-sizing: border-box;\n margin: 0;\n min-height: 2.5em;\n line-height: 1.5;\n }\n \n .dropdown-menu-item-shared:hover {\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-item-shared:active {\n background-color: var(--le-background-color-active, #e1e1e1);\n }\n\n /* Mobile-specific adjustments for dropdown menus */\n @media (max-width: 480px) {\n .dropdown-menu-button-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n \n .dropdown-menu-shared.mobile-full-width {\n width: 100%;\n }\n \n .dropdown-menu-shared.mobile-full-width .dropdown-menu-button-shared {\n width: 100%;\n }\n }\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 font-size: var(--le-font-size-base, 1em);\n }\n \n /* Reset any inherited styles that might affect the table */\n :host * {\n box-sizing: border-box;\n }\n \n .schedule-container {\n display: flex;\n flex-direction: column;\n }\n \n .filter-panel {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0;\n margin-bottom: 0;\n background: transparent;\n border: none;\n }\n \n .filter-controls {\n display: flex;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n \n .filter-label {\n font-weight: normal;\n color: var(--le-text-color-primary, #333);\n margin-right: 0;\n }\n \n .filter-team-select {\n min-width: 200px;\n }\n \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 font-size: 1em;\n display: table;\n }\n \n .schedule-table * {\n font-size: 1em;\n }\n \n .schedule-table tr {\n display: table-row;\n margin: 0;\n padding: 0;\n font-size: 1em;\n }\n \n .schedule-table td,\n .schedule-table th {\n display: table-cell;\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 1em;\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 font-size: 1em;\n display: table-cell;\n vertical-align: middle;\n line-height: 1.4;\n }\n \n .schedule-table th:first-child,\n .schedule-table th:nth-child(2),\n .schedule-table th:nth-child(3) {\n text-align: left;\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 font-size: 1em;\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(2),\n .schedule-table td:nth-child(3) {\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 font-size: 1em;\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 font-size: 1.2em;\n }\n \n .match-row.future {\n /* Keep normal styling for future matches */\n }\n \n .match-actions {\n display: flex;\n justify-content: center;\n gap: var(--le-padding-xs, 0.25rem);\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n }\n \n .match-row:hover .match-actions,\n .match-row.selected .match-actions {\n opacity: 1;\n }\n \n /* Show actions immediately for past matches without results */\n .match-row.past-no-result .match-actions {\n opacity: 1;\n }\n \n .date-col {\n width: 15%;\n }\n \n .team-col {\n width: 25%;\n }\n \n .result-col {\n width: 15%;\n }\n \n .actions-col {\n width: 10%;\n }\n \n .paging-controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\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 gap: var(--le-padding-s, 0.5rem);\n }\n \n .paging-info {\n font-size: 0.9em;\n color: var(--le-text-color-secondary, #666);\n }\n \n .paging-settings {\n display: flex;\n align-items: center;\n gap: var(--le-padding-xs, 0.25rem);\n font-size: 0.9em;\n }\n \n .paging-settings label {\n color: var(--le-text-color-secondary, #666);\n white-space: nowrap;\n }\n \n .paging-settings input[type=\"number\"] {\n width: 60px;\n padding: 0.25rem 0.5rem;\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-small, 3px);\n font-size: 0.9em;\n text-align: center;\n }\n \n .paging-settings input[type=\"number\"]:focus {\n outline: none;\n border-color: var(--le-border-color-focus, #007cba);\n box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);\n }\n \n .paging-buttons {\n display: flex;\n gap: var(--le-padding-xs, 0.25rem);\n }\n \n .paging-buttons button {\n padding: 0.25rem 0.5rem;\n font-size: 0.85em;\n }\n \n .clear-filters {\n margin-left: 0.5rem;\n padding: 0.25rem 0.5rem;\n font-size: 0.85em;\n }\n \n .no-matches {\n padding: var(--le-padding-m, 1rem);\n text-align: center;\n color: var(--le-text-color-secondary, #666);\n background-color: transparent;\n border: none;\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 font-size: 1.2em;\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";
export const MOBILE_STYLES: "\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 }\n\n .panel-content-shared {\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 \n .button-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\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 /* Small button variant */\n .button-shared.button-sm {\n padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n /* line-height can be tighter if needed for small buttons */\n /* line-height: 1.2; */\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 .dropdown-shared {\n position: relative;\n display: inline-block;\n }\n \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) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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 /* Mobile-specific adjustments */\n @media (max-width: 480px) {\n .dropdown-select-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n }\n \n /* For dropdown containers that need to be right-aligned */\n .dropdown-container-right {\n display: flex;\n justify-content: flex-end;\n }\n \n /* For dropdowns within flexbox layouts */\n .dropdown-container-flex {\n display: flex;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n\n /* Dropdown Menu Styles (for button-triggered dropdowns like export menu) */\n .dropdown-menu-shared {\n position: relative;\n display: inline-block;\n }\n \n .dropdown-menu-button-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) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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 min-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-menu-button-shared:hover {\n border-color: var(--le-border-color-dark, #ccc);\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-button-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-menu-list-shared {\n display: none;\n position: absolute;\n right: 0;\n top: 100%;\n background-color: var(--le-background-color-panel, #fff);\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1000;\n border-radius: var(--le-border-radius-small, 3px);\n border: 1px solid var(--le-border-color-medium, #ddd);\n overflow: hidden;\n }\n \n .dropdown-menu-list-shared.show {\n display: block;\n }\n \n .dropdown-menu-item-shared {\n color: var(--le-text-color-primary, #333);\n padding: var(--le-padding-s, 0.5rem) var(--le-padding-m, 1rem);\n text-decoration: none;\n display: block;\n text-align: left;\n width: 100%;\n background: none;\n border: none;\n cursor: pointer;\n font-size: var(--le-font-size-base, 1em);\n box-sizing: border-box;\n margin: 0;\n min-height: 2.5em;\n line-height: 1.5;\n }\n \n .dropdown-menu-item-shared:hover {\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-item-shared:active {\n background-color: var(--le-background-color-active, #e1e1e1);\n }\n\n /* Mobile-specific adjustments for dropdown menus */\n @media (max-width: 480px) {\n .dropdown-menu-button-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n \n .dropdown-menu-shared.mobile-full-width {\n width: 100%;\n }\n \n .dropdown-menu-shared.mobile-full-width .dropdown-menu-button-shared {\n width: 100%;\n }\n }\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 font-size: var(--le-font-size-base, 1em);\n }\n \n /* Reset any inherited styles that might affect the table */\n :host * {\n box-sizing: border-box;\n }\n \n .schedule-container {\n display: flex;\n flex-direction: column;\n }\n \n .filter-panel {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0;\n margin-bottom: 0;\n background: transparent;\n border: none;\n }\n \n .filter-controls {\n display: flex;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n \n .filter-label {\n font-weight: normal;\n color: var(--le-text-color-primary, #333);\n margin-right: 0;\n }\n \n .filter-team-select {\n min-width: 200px;\n }\n \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 font-size: 1em;\n display: table;\n }\n \n .schedule-table * {\n font-size: 1em;\n }\n \n .schedule-table tr {\n display: table-row;\n margin: 0;\n padding: 0;\n font-size: 1em;\n }\n \n .schedule-table td,\n .schedule-table th {\n display: table-cell;\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 1em;\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 font-size: 1em;\n display: table-cell;\n vertical-align: middle;\n line-height: 1.4;\n }\n \n .schedule-table th:first-child,\n .schedule-table th:nth-child(2),\n .schedule-table th:nth-child(3) {\n text-align: left;\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 font-size: 1em;\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(2),\n .schedule-table td:nth-child(3) {\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 font-size: 1em;\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 font-size: 1.2em;\n }\n \n .match-row.future {\n /* Keep normal styling for future matches */\n }\n \n .match-actions {\n display: flex;\n justify-content: center;\n gap: var(--le-padding-xs, 0.25rem);\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n }\n \n .match-row:hover .match-actions,\n .match-row.selected .match-actions {\n opacity: 1;\n }\n \n /* Show actions immediately for past matches without results */\n .match-row.past-no-result .match-actions {\n opacity: 1;\n }\n \n .date-col {\n width: 15%;\n }\n \n .team-col {\n width: 25%;\n }\n \n .result-col {\n width: 15%;\n }\n \n .actions-col {\n width: 10%;\n }\n \n .paging-controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\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 gap: var(--le-padding-s, 0.5rem);\n }\n \n .paging-info {\n font-size: 0.9em;\n color: var(--le-text-color-secondary, #666);\n }\n \n .paging-settings {\n display: flex;\n align-items: center;\n gap: var(--le-padding-xs, 0.25rem);\n font-size: 0.9em;\n }\n \n .paging-settings label {\n color: var(--le-text-color-secondary, #666);\n white-space: nowrap;\n }\n \n .paging-settings input[type=\"number\"] {\n width: 60px;\n padding: 0.25rem 0.5rem;\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-small, 3px);\n font-size: 0.9em;\n text-align: center;\n }\n \n .paging-settings input[type=\"number\"]:focus {\n outline: none;\n border-color: var(--le-border-color-focus, #007cba);\n box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);\n }\n \n .paging-buttons {\n display: flex;\n gap: var(--le-padding-xs, 0.25rem);\n }\n \n .paging-buttons button {\n padding: 0.25rem 0.5rem;\n font-size: 0.85em;\n }\n \n .clear-filters {\n margin-left: 0.5rem;\n padding: 0.25rem 0.5rem;\n font-size: 0.85em;\n }\n \n .no-matches {\n padding: var(--le-padding-m, 1rem);\n text-align: center;\n color: var(--le-text-color-secondary, #666);\n background-color: transparent;\n border: none;\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 font-size: 1.2em;\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 :host {\n \n /* Mobile-specific styling that can be added to host elements */\n \n /* Increased font sizes for better readability on mobile */\n --le-font-size-base: 1.4em;\n --le-font-size-small: 1.2em;\n --le-font-size-medium: 1.6em;\n --le-font-size-large: 1.8em;\n --le-font-size-xlarge: 2em;\n \n /* Adjust padding for better touch targets */\n --le-padding-s: 0.6rem;\n --le-padding-m: 1rem;\n \n /* Other mobile optimizations */\n font-size: var(--le-font-size-base);\n line-height: 1.4;\n\n }\n \n .filter-panel {\n flex-direction: column;\n align-items: stretch;\n gap: var(--le-padding-s, 0.5rem);\n margin-bottom: var(--le-padding-s, 0.5rem);\n }\n \n .filter-controls {\n width: 100%;\n }\n \n .filter-team-select {\n width: 100%;\n min-width: unset;\n }\n \n .filter-panel .dropdown-shared {\n width: 100%;\n }\n \n .filter-panel .dropdown-shared .dropdown-select-shared {\n width: 100%;\n }\n \n .schedule-table {\n display: block;\n }\n \n .schedule-table thead {\n display: none;\n }\n \n .schedule-table tbody, \n .schedule-table tr {\n display: block;\n width: 100%;\n }\n \n .schedule-table tr {\n margin-bottom: var(--le-padding-s, 0.5rem);\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 }\n \n /* Mobile match state styles */\n .match-row.past-no-result {\n border-left: 4px solid #ff6b6b;\n background-color: #fff5f5;\n }\n \n .schedule-table td {\n display: flex;\n padding: var(--le-padding-xs, 0.25rem);\n border: none;\n text-align: left;\n }\n \n .schedule-table td::before {\n content: attr(data-label);\n font-weight: bold;\n width: 40%;\n margin-right: var(--le-padding-s, 0.5rem);\n }\n \n .match-actions {\n opacity: 1;\n justify-content: flex-start;\n }\n \n .paging-controls {\n flex-direction: column;\n gap: var(--le-padding-s, 0.5rem);\n }\n \n .paging-info {\n text-align: center;\n }\n \n .paging-settings {\n justify-content: center;\n }\n \n .paging-buttons {\n justify-content: center;\n width: 100%;\n }\n";
export const DESKTOP_STYLES: "\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 }\n\n .panel-content-shared {\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 \n .button-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\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 /* Small button variant */\n .button-shared.button-sm {\n padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n /* line-height can be tighter if needed for small buttons */\n /* line-height: 1.2; */\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 .dropdown-shared {\n position: relative;\n display: inline-block;\n }\n \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) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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 /* Mobile-specific adjustments */\n @media (max-width: 480px) {\n .dropdown-select-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n }\n \n /* For dropdown containers that need to be right-aligned */\n .dropdown-container-right {\n display: flex;\n justify-content: flex-end;\n }\n \n /* For dropdowns within flexbox layouts */\n .dropdown-container-flex {\n display: flex;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n\n /* Dropdown Menu Styles (for button-triggered dropdowns like export menu) */\n .dropdown-menu-shared {\n position: relative;\n display: inline-block;\n }\n \n .dropdown-menu-button-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) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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 min-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-menu-button-shared:hover {\n border-color: var(--le-border-color-dark, #ccc);\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-button-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-menu-list-shared {\n display: none;\n position: absolute;\n right: 0;\n top: 100%;\n background-color: var(--le-background-color-panel, #fff);\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1000;\n border-radius: var(--le-border-radius-small, 3px);\n border: 1px solid var(--le-border-color-medium, #ddd);\n overflow: hidden;\n }\n \n .dropdown-menu-list-shared.show {\n display: block;\n }\n \n .dropdown-menu-item-shared {\n color: var(--le-text-color-primary, #333);\n padding: var(--le-padding-s, 0.5rem) var(--le-padding-m, 1rem);\n text-decoration: none;\n display: block;\n text-align: left;\n width: 100%;\n background: none;\n border: none;\n cursor: pointer;\n font-size: var(--le-font-size-base, 1em);\n box-sizing: border-box;\n margin: 0;\n min-height: 2.5em;\n line-height: 1.5;\n }\n \n .dropdown-menu-item-shared:hover {\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-item-shared:active {\n background-color: var(--le-background-color-active, #e1e1e1);\n }\n\n /* Mobile-specific adjustments for dropdown menus */\n @media (max-width: 480px) {\n .dropdown-menu-button-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n \n .dropdown-menu-shared.mobile-full-width {\n width: 100%;\n }\n \n .dropdown-menu-shared.mobile-full-width .dropdown-menu-button-shared {\n width: 100%;\n }\n }\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 font-size: var(--le-font-size-base, 1em);\n }\n \n /* Reset any inherited styles that might affect the table */\n :host * {\n box-sizing: border-box;\n }\n \n .schedule-container {\n display: flex;\n flex-direction: column;\n }\n \n .filter-panel {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0;\n margin-bottom: 0;\n background: transparent;\n border: none;\n }\n \n .filter-controls {\n display: flex;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n \n .filter-label {\n font-weight: normal;\n color: var(--le-text-color-primary, #333);\n margin-right: 0;\n }\n \n .filter-team-select {\n min-width: 200px;\n }\n \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 font-size: 1em;\n display: table;\n }\n \n .schedule-table * {\n font-size: 1em;\n }\n \n .schedule-table tr {\n display: table-row;\n margin: 0;\n padding: 0;\n font-size: 1em;\n }\n \n .schedule-table td,\n .schedule-table th {\n display: table-cell;\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 1em;\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 font-size: 1em;\n display: table-cell;\n vertical-align: middle;\n line-height: 1.4;\n }\n \n .schedule-table th:first-child,\n .schedule-table th:nth-child(2),\n .schedule-table th:nth-child(3) {\n text-align: left;\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 font-size: 1em;\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(2),\n .schedule-table td:nth-child(3) {\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 font-size: 1em;\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 font-size: 1.2em;\n }\n \n .match-row.future {\n /* Keep normal styling for future matches */\n }\n \n .match-actions {\n display: flex;\n justify-content: center;\n gap: var(--le-padding-xs, 0.25rem);\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n }\n \n .match-row:hover .match-actions,\n .match-row.selected .match-actions {\n opacity: 1;\n }\n \n /* Show actions immediately for past matches without results */\n .match-row.past-no-result .match-actions {\n opacity: 1;\n }\n \n .date-col {\n width: 15%;\n }\n \n .team-col {\n width: 25%;\n }\n \n .result-col {\n width: 15%;\n }\n \n .actions-col {\n width: 10%;\n }\n \n .paging-controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\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 gap: var(--le-padding-s, 0.5rem);\n }\n \n .paging-info {\n font-size: 0.9em;\n color: var(--le-text-color-secondary, #666);\n }\n \n .paging-settings {\n display: flex;\n align-items: center;\n gap: var(--le-padding-xs, 0.25rem);\n font-size: 0.9em;\n }\n \n .paging-settings label {\n color: var(--le-text-color-secondary, #666);\n white-space: nowrap;\n }\n \n .paging-settings input[type=\"number\"] {\n width: 60px;\n padding: 0.25rem 0.5rem;\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-small, 3px);\n font-size: 0.9em;\n text-align: center;\n }\n \n .paging-settings input[type=\"number\"]:focus {\n outline: none;\n border-color: var(--le-border-color-focus, #007cba);\n box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);\n }\n \n .paging-buttons {\n display: flex;\n gap: var(--le-padding-xs, 0.25rem);\n }\n \n .paging-buttons button {\n padding: 0.25rem 0.5rem;\n font-size: 0.85em;\n }\n \n .clear-filters {\n margin-left: 0.5rem;\n padding: 0.25rem 0.5rem;\n font-size: 0.85em;\n }\n \n .no-matches {\n padding: var(--le-padding-m, 1rem);\n text-align: center;\n color: var(--le-text-color-secondary, #666);\n background-color: transparent;\n border: none;\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 font-size: 1.2em;\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 \n /* Desktop-specific overrides - following the same pattern as other components */\n :host {\n }\n \n .schedule-table {\n display: table;\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 {\n display: table-cell;\n padding: 0.25rem 0.5rem;\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n text-align: center;\n font-size: 1em;\n }\n \n .schedule-table td:first-child,\n .schedule-table td:nth-child(2),\n .schedule-table td:nth-child(3) {\n text-align: left;\n }\n \n .schedule-table td::before {\n content: none;\n }\n \n .match-actions {\n opacity: 0;\n justify-content: center;\n }\n \n .match-row:hover .match-actions,\n .match-row.selected .match-actions {\n opacity: 1;\n }\n \n /* Show actions immediately for past matches without results */\n .match-row.past-no-result .match-actions {\n opacity: 1;\n }\n \n /* Desktop export dropdown */\n .dropdown-shared {\n width: auto;\n }\n \n .dropdown-shared .dropdown-select-shared {\n width: auto;\n }\n";
export const TEMPLATE: "";
export const TABLE_TEMPLATE: "";
export const NO_MATCHES_TEMPLATE: "";
//# sourceMappingURL=LeagueSchedule-styles.d.ts.map