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 /* ADDED SHARED panelStyles */\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 /* ADDED SHARED buttonStyles */\n \n .modal-shared-overlay {\n display: none; /* Hidden by default */\n position: fixed;\n z-index: var(--le-z-index-modal-overlay, 1000); /* Ensure it's on top */\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));\n padding-top: 5%;\n padding-bottom: 5%;\n }\n\n .modal-shared-overlay.open {\n display: flex;\n justify-content: center;\n }\n\n .modal-shared-content {\n background-color: var(--le-background-color-panel, #fff);\n margin: 10% auto; /* Default to 10% from top, centered */\n padding: 0;\n border: 1px solid var(--le-border-color-dark, #ccc);\n max-width: 600px;\n border-radius: var(--le-border-radius-large, 8px);\n box-shadow: var(--le-shadow-modal, 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19));\n display: flex;\n flex-direction: column;\n align-self: flex-start;\n }\n\n /* Specific styles for modal mobile-view class */\n .modal-shared-content.mobile-view {\n width: 90%; /* Override any fixed width from shared styles */\n margin: 0; /* Less margin from top on mobile */\n max-width: 90%;\n min-width: 280px !important;\n }\n\n .modal-shared-header {\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); /* Modal header distinct background */\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--le-font-size-large, 1.4em); /* Increased large font size */\n border-top-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-top-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-header .close-button-shared { /* Specific styling for a close button if needed */\n color: var(--le-text-color-secondary, #aaa);\n font-size: var(--le-font-size-xlarge, 1.8em); /* Increased size */\n font-weight: bold;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .modal-shared-header .close-button-shared:hover,\n .modal-shared-header .close-button-shared:focus {\n color: var(--le-text-color-primary, #000);\n text-decoration: none;\n }\n \n .modal-shared-body {\n padding: var(--le-padding-m, 1.25em); /* Increased padding */\n overflow-y: auto; /* Allow body to scroll if content is too long */\n flex-grow: 1; /* Allows body to take up available space if modal has fixed height */\n }\n\n .modal-shared-footer {\n padding: var(--le-padding-m, 1.25em);\n text-align: right;\n border-top: 1px solid var(--le-border-color-medium, #eee);\n background-color: var(--le-background-color-header, #f9f9f9); /* Optional: footer background */\n border-bottom-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-bottom-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-footer .button-shared + .button-shared { /* Spacing between buttons in footer */\n margin-left: var(--le-padding-s, 0.75em); /* Increased margin */\n }\n /* ADDED SHARED modalStyles */\n \n .form-group-shared {\n margin-bottom: var(--le-padding-m, 1.25em); /* Increased margin */\n }\n\n .form-label-shared {\n display: block;\n margin-bottom: var(--le-padding-xs, 0.4em); /* Increased margin */\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n font-size: var(--le-font-size-label, 1em)); /* Use variable with fallback */\n }\n\n .form-input-shared,\n .form-select-shared {\n width: 100%;\n height: auto;\n padding: var(--le-padding-s, 0.75em);\n border: 1px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-standard, 4px);\n box-sizing: border-box;\n font-size: var(--le-font-size-input, 1em)); /* Use variable with fallback */\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n /* Ensure date inputs have consistent styling across browsers */\n .form-input-shared[type=\"date\"] {\n max-width: 100%;\n }\n\n .form-input-shared:focus,\n .form-select-shared:focus {\n border-color: var(--le-border-color-accent, #2196f3);\n outline: none; /* Or a custom focus ring */\n box-shadow: 0 0 0 2px var(--le-focus-ring-color, rgba(33, 150, 243, 0.3));\n }\n \n /* Specific styling for checkbox groups if needed */\n .form-checkbox-label-shared {\n display: flex; /* Changed to flex for better alignment */\n align-items: center;\n font-weight: normal; /* Typically labels for checkboxes are not bold by default */\n color: var(--le-text-color-primary, #333);\n }\n\n .form-checkbox-label-shared input[type=\"checkbox\"] {\n margin-right: var(--le-padding-s, 0.75em); /* Increased margin */\n /* Consider custom styling for checkboxes if desired, or rely on browser defaults */\n /* For consistent appearance across browsers, custom checkbox styling can be complex */\n /* For now, using default with adjusted margin */\n width: auto; /* Override width: 100% from .form-input-shared if a generic class was applied */\n vertical-align: middle; /* Align checkbox with text */\n }\n\n /* Styling for a container of multiple checkboxes or radio buttons */\n .form-options-group-shared {\n /* Styles for a group of checkboxes/radios, e.g., display: flex; flex-direction: column; gap: ... */\n }\n\n /* Styling for individual option within a group */\n .form-option-item-shared {\n /* Styles for each checkbox/radio item within a group */\n }\n\n /* Enhanced checkbox styles for better mobile usability */\n .checkbox-enhanced-shared {\n position: relative;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n margin-right: var(--le-padding-s, 0.75em);\n }\n\n .checkbox-enhanced-shared input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n .checkbox-enhanced-shared .checkmark-shared {\n position: relative;\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n background-color: var(--le-background-color-panel, #fff);\n border: 2px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-small, 3px);\n transition: all 0.2s ease;\n vertical-align: middle;\n margin-right: var(--le-padding-xs, 0.25em);\n }\n\n /* Mobile-specific larger checkboxes */\n @media (max-width: 768px) {\n .checkbox-enhanced-shared .checkmark-shared {\n width: 2em;\n height: 2em;\n border-width: 2px;\n }\n }\n\n /* Hover state */\n .checkbox-enhanced-shared:hover input[type=\"checkbox\"] ~ .checkmark-shared {\n border-color: var(--le-text-color-accent, #2196f3);\n background-color: var(--le-background-color-row-hover, #f9f9f9);\n }\n\n /* Focus state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:focus ~ .checkmark-shared {\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 /* Checked state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:checked ~ .checkmark-shared {\n background-color: var(--le-text-color-accent, #2196f3);\n border-color: var(--le-text-color-accent, #2196f3);\n }\n\n /* Checkmark icon */\n .checkbox-enhanced-shared .checkmark-shared:after {\n content: \"\";\n position: absolute;\n display: none;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n width: 0.4em;\n height: 0.8em;\n border: solid var(--le-text-color-on-primary, #fff);\n border-width: 0 0.15em 0.15em 0;\n }\n\n /* Mobile-specific larger checkmark */\n @media (max-width: 768px) {\n .checkbox-enhanced-shared .checkmark-shared:after {\n width: 0.5em;\n height: 1em;\n border-width: 0 0.2em 0.2em 0;\n }\n }\n\n /* Show checkmark when checked */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:checked ~ .checkmark-shared:after {\n display: block;\n }\n\n /* Disabled state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:disabled ~ .checkmark-shared {\n background-color: var(--le-background-color-button-disabled, #eee);\n border-color: var(--le-border-color-medium, #ddd);\n cursor: not-allowed;\n }\n\n .checkbox-enhanced-shared input[type=\"checkbox\"]:disabled ~ .checkmark-shared:after {\n border-color: var(--le-text-color-secondary, #aaa);\n }\n\n /* Legend/checkbox list styles for responsive layouts */\n .checkbox-list-responsive-shared {\n display: grid;\n gap: var(--le-padding-s, 0.75em);\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n }\n\n /* Mobile-specific responsive checkbox list */\n @media (max-width: 768px) {\n .checkbox-list-responsive-shared {\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: var(--le-padding-m, 1em);\n }\n }\n\n /* Extra small screens - force 2 columns */\n @media (max-width: 480px) {\n .checkbox-list-responsive-shared {\n grid-template-columns: 1fr 1fr;\n gap: var(--le-padding-s, 0.75em);\n }\n }\n\n /* Legend item styling for checkbox lists */\n .legend-item-shared {\n display: flex;\n align-items: center;\n font-size: var(--le-font-size-small, 0.9em);\n padding: var(--le-padding-xs, 0.25em);\n border-radius: var(--le-border-radius-small, 3px);\n transition: background-color 0.2s ease;\n }\n\n .legend-item-shared:hover {\n background-color: var(--le-background-color-row-hover, #f9f9f9);\n }\n\n /* Mobile-specific legend item styling */\n @media (max-width: 768px) {\n .legend-item-shared {\n font-size: var(--le-font-size-medium, 1.2em);\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.25em);\n min-height: 3em;\n }\n }\n /* ADDED SHARED formStyles */\n \n .list-container {\n max-height: 200px;\n overflow-y: auto;\n }\n .list-panel {\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-standard, 4px);\n background: var(--le-background-color-panel, #fff);\n }\n .list-panel h4 {\n margin: 0;\n padding: var(--le-padding-m, 1rem);\n background: var(--le-background-color-header, #f8f9fa);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n color: var(--le-text-color-primary, #333);\n }\n .list-panel.disabled {\n pointer-events: none;\n opacity: 0.6;\n }\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list-item{\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--le-padding-xs) var(--le-padding-s);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n cursor: pointer;\n transition: background-color 0.2s ease;\n min-height: 2.5rem; /* Ensure consistent height for action buttons */\n box-sizing: border-box;\n }\n .list-panel.disabled .list-item {\n cursor: not-allowed;\n }\n .list-item:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.2em);\n text-align: left; /* Ensure text is left-aligned */\n display: flex;\n align-items: center; /* Center text vertically within its container */\n }\n\n /* Example of an actions container part within a list item */\n .list-item .list-item-actions {\n flex-shrink: 0; /* Prevent actions from shrinking */\n display: flex;\n gap: var(--le-padding-xs, 0.4em); /* Increased gap */\n align-items: center;\n min-height: 2rem; /* Reserve space for buttons even when empty */\n }\n\n .list-item:hover {\n background-color: var(--le-background-color-hover, #f5f5f5);\n }\n\n .list-item.selected {\n background-color: var(--le-background-color-selected, #e3f2fd);\n border-left: 3px solid var(--le-border-color-primary, #2196f3);\n animation: highlightItem 0.6s ease-out;\n }\n\n @keyframes highlightItem {\n 0% {\n background-color: var(--le-background-color-accent, #108CFF);\n box-shadow: 0 0 0 2px rgba(16, 140, 255, 0.3), 0 2px 8px rgba(16, 140, 255, 0.2);\n }\n 100% {\n background-color: var(--le-background-color-selected, #e3f2fd);\n box-shadow: none;\n }\n }\n\n /* Mobile-specific list item adjustments */\n @media (max-width: 768px) {\n .list-item {\n min-height: 4rem; /* Slightly taller for mobile touch targets */\n padding: 0 var(--le-padding-xs, 1rem);;\n }\n \n .list-item .list-item-actions {\n min-height: 2.5rem; /* Larger touch targets for mobile */\n }\n \n .list-item .list-item-actions .button-shared {\n min-height: 2.5rem; /* Ensure buttons are touch-friendly */\n }\n }\n /* ADDED SHARED listStyles */\n \n /* Tab System Styles */\n .modal-tabs-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n \n .tab-navigation {\n display: flex;\n border-bottom: 2px solid var(--le-border-color-light);\n margin-bottom: var(--le-padding-m);\n gap: 0;\n }\n\n .tab-button {\n background: var(--le-background-color-button);\n border: 1px solid var(--le-border-color-medium);\n border-bottom: none;\n padding: var(--le-padding-s) var(--le-padding-m);\n cursor: pointer;\n font-weight: 500;\n color: var(--le-text-color-secondary);\n border-radius: var(--le-border-radius-standard) var(--le-border-radius-standard) 0 0;\n position: relative;\n transition: all 0.2s ease;\n min-width: 120px;\n text-align: center;\n user-select: none;\n }\n\n .tab-button:hover {\n background: var(--le-background-color-button-hover);\n color: var(--le-text-color-primary);\n }\n\n .tab-button.active {\n background: var(--le-background-color-panel);\n color: var(--le-text-color-primary);\n font-weight: 600;\n border-bottom: 2px solid var(--le-background-color-panel);\n margin-bottom: -2px;\n z-index: 1;\n }\n\n .tab-button:not(:last-child) {\n border-right: none;\n }\n\n .tab-content-container {\n flex: 1;\n min-height: 300px;\n }\n\n .tab-content {\n display: none;\n animation: fadeIn 0.2s ease-in;\n }\n\n .tab-content.active {\n display: block;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* Enhanced fieldset styling for tabs */\n .tab-content fieldset {\n margin-bottom: var(--le-padding-m);\n border: 1px solid var(--le-border-color-medium);\n border-radius: var(--le-border-radius-standard);\n padding: var(--le-padding-m);\n background: var(--le-background-color-header);\n }\n\n .tab-content fieldset legend {\n font-weight: 600;\n color: var(--le-text-color-primary);\n padding: 0 var(--le-padding-s);\n font-size: var(--le-font-size-small, 0.8em);\n }\n\n .tab-content fieldset:last-child {\n margin-bottom: 0;\n }\n\n /* Enhanced form styling within tabs */\n .tab-content .form-group {\n margin-bottom: var(--le-padding-m);\n }\n\n .tab-content .form-group:last-child {\n margin-bottom: 0;\n }\n\n .tab-content .form-group label {\n display: block;\n margin-bottom: var(--le-padding-xs);\n font-weight: 500;\n color: var(--le-text-color-primary);\n font-size: var(--le-font-size-small, 0.8em);\n }\n\n .tab-content .form-group input[type=\"text\"],\n .tab-content .form-group input[type=\"number\"],\n .tab-content .form-group select {\n width: 100%;\n padding: var(--le-padding-s);\n border: 1px solid var(--le-border-color-dark);\n border-radius: var(--le-border-radius-standard);\n box-sizing: border-box;\n font-size: var(--le-font-size-medium);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .tab-content .form-group input[type=\"text\"]:focus,\n .tab-content .form-group input[type=\"number\"]:focus,\n .tab-content .form-group select:focus {\n outline: none;\n border-color: var(--le-text-color-accent);\n box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);\n }\n\n .tab-content .form-group input[type=\"checkbox\"] {\n margin-right: var(--le-padding-s);\n transform: scale(1.1);\n }\n\n /* Enhanced rink points settings */\n .tab-content .rink-points-settings {\n border: 1px dashed var(--le-border-color-dark);\n padding: var(--le-padding-m);\n margin-top: var(--le-padding-s);\n background-color: var(--le-background-color-header);\n border-radius: var(--le-border-radius-standard);\n transition: opacity 0.3s ease;\n }\n \n .tab-content .rink-points-settings.disabled {\n opacity: 0.6;\n }\n\n /* Responsive adjustments for tabs */\n @media (max-width: 600px) {\n .tab-button {\n padding: var(--le-padding-xs) var(--le-padding-s);\n min-width: 100px;\n font-size: var(--le-font-size-small);\n }\n\n .form-group-grid {\n grid-template-columns: 1fr;\n gap: var(--le-padding-s);\n }\n\n .tab-content fieldset {\n padding: var(--le-padding-s);\n }\n \n }\n /* ADDED SHARED tabStyles */\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 /* ADDED SHARED dropdownStyles */\n \n /* Help Banner Styles */\n .help-banner-shared {\n background-color: var(--le-background-color-header, #f8f9fa);\n padding: var(--le-padding-xs, 0.25rem) var(--le-padding-m, 1rem);\n text-align: right;\n font-size: var(--le-font-size-xs, 0.75em);\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n\n .help-banner-shared a {\n color: var(--le-text-color-accent, #2196f3);\n text-decoration: none;\n font-weight: 500;\n }\n\n .help-banner-shared a:hover {\n text-decoration: underline;\n }\n\n .help-banner-shared .separator {\n color: var(--le-text-color-secondary, #666);\n margin: 0 var(--le-padding-xs, 0.25rem);\n }\n /* ADDED SHARED helpBannerStyles */\n :host {\n display: block;\n border: 1px solid var(--swal-border-color-medium, #ccc); \n font-family: var(--swal-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif); \n box-sizing: border-box;\n color: var(--swal-text-color-primary, #333); \n\n /* ADMIN THEME VARIABLES */\n --swal-font-family-main: 'Open Sans', Helvetica, Arial, sans-serif;\n \n /* Use shared font sizing system - no more swal- font size variables */\n /* Mobile and desktop will inherit appropriate sizing from shared styles */\n\n --swal-text-color-primary: #333;\n --swal-text-color-secondary: #666;\n --swal-text-color-accent: #007bff; \n --swal-text-color-accent-hover: #0056b3;\n --swal-text-color-error: #D8000C;\n --swal-text-color-success: #4CAF50;\n --swal-text-color-on-primary: #fff;\n\n --swal-color-status-warning: var(--le-color-status-warning, #f39c12);\n --swal-color-status-conflict: var(--le-color-status-conflict, #e67e22);\n --swal-color-status-pending: var(--le-color-status-pending, #e74c3c);\n --swal-color-status-info: var(--le-color-status-info, #2196f3);\n --swal-color-status-success: var(--le-color-status-success, #4CAF50);\n\n --swal-background-color-host-desktop: #f8f9fa; \n --swal-background-color-host-mobile: #f5f5f5;\n --swal-background-color-panel: #fff;\n --swal-background-color-header: #f5f5f5;\n --swal-background-color-button: #f0f0f0;\n --swal-background-color-button-hover: #e0e0e0;\n --swal-background-color-button-disabled: #eee;\n --swal-background-color-selected-item: #e9eff7; \n --swal-background-color-modal-header: #f5f5f5;\n --swal-background-color-error: #FFD2D2;\n --swal-background-color-rink-settings: #f9f9f9;\n\n --swal-border-color-light: #f0f0f0;\n --swal-border-color-medium: #ddd;\n --swal-border-color-dark: #ccc;\n --swal-border-color-error: #D8000C;\n --swal-border-color-rink-settings: #ccc; \n\n --swal-border-radius-standard: 4px;\n --swal-border-radius-large: 8px; \n --swal-border-radius-mobile-panel: 12px;\n\n --swal-shadow-mobile-panel: 0 2px 8px rgba(0,0,0,0.06);\n\n --swal-spacing-unit: 0.25rem;\n --swal-padding-xs: calc(1 * var(--swal-spacing-unit));\n --swal-padding-s: calc(2 * var(--swal-spacing-unit));\n --swal-padding-m: calc(4 * var(--swal-spacing-unit));\n --swal-padding-l: calc(6 * var(--swal-spacing-unit));\n\n /* --- Mappings for shared-styles.js --- */\n /* These ensure shared components adopt the admin theme */\n --le-padding-xs: var(--swal-padding-xs);\n --le-padding-s: var(--swal-padding-s);\n --le-padding-m: var(--swal-padding-m);\n \n --le-border-color-light: var(--swal-border-color-light);\n --le-border-color-medium: var(--swal-border-color-medium);\n --le-border-color-dark: var(--swal-border-color-dark);\n\n --le-text-color-primary: var(--swal-text-color-primary);\n --le-text-color-secondary: var(--swal-text-color-secondary);\n --le-text-color-on-primary: var(--swal-text-color-on-primary);\n\n --le-background-color-header: var(--swal-background-color-header);\n --le-background-color-panel: var(--swal-background-color-panel);\n --le-background-color-button: var(--swal-background-color-button);\n --le-background-color-button-hover: var(--swal-background-color-button-hover);\n --le-background-color-button-disabled: var(--swal-background-color-button-disabled);\n\n --le-border-radius-standard: var(--swal-border-radius-standard);\n \n #leagueName {\n font-size: var(--le-font-size-medium);\n }\n \n }\n /* Highlighted glow for New button when no leagues exist */\n .highlight-glow {\n box-shadow: 0 0 8px 2px #66bb6a, 0 0 0 4px #e8f5e9;\n background-color: #e8f5e9 !important;\n transition: box-shadow 0.3s, background-color 0.3s;\n z-index: 1;\n animation: pulse-glow 2s ease-in-out infinite;\n }\n @keyframes pulse-glow {\n 0% {\n box-shadow: 0 0 8px 2px #66bb6a, 0 0 0 4px #e8f5e9;\n background-color: #e8f5e9;\n }\n 50% {\n box-shadow: 0 0 16px 6px #43a047, 0 0 0 8px #d0f8ce;\n background-color: #d0f8ce;\n }\n 100% {\n box-shadow: 0 0 8px 2px #66bb6a, 0 0 0 4px #e8f5e9;\n background-color: #e8f5e9;\n }\n }\n \n /* Loading spinner for buttons */\n .loading-spinner {\n display: inline-block;\n width: 12px;\n height: 12px;\n border: 2px solid transparent;\n border-top: 2px solid currentColor;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-right: 6px;\n vertical-align: middle;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n /* Disabled button styling */\n .button-shared:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n \n .button-shared:disabled .loading-spinner {\n opacity: 0.8;\n }\n .header {\n font-weight: bold;\n background: var(--swal-background-color-header);\n padding: var(--swal-padding-s);\n border-bottom: 1px solid var(--swal-border-color-medium);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .content-area {\n padding: var(--swal-padding-s) var(--swal-padding-xs);\n }\n .league-list-container {\n border-radius: var(--swal-border-radius-mobile-panel);\n box-shadow: var(--swal-shadow-mobile-panel);\n padding: var(--swal-padding-xs);\n }\n .column-leagues .panel-header-shared button:first-of-type { /* First button (New) gets pushed to the right */\n margin-left: auto;\n }\n .column-leagues .panel-header-shared button:not(:first-of-type) { /* Subsequent buttons (Copy) get spacing */\n margin-left: var(--swal-padding-s);\n }\n .league-action-button { /* These are small icon-like buttons, potentially keep specific styles or create a new shared variant */\n padding: var(--swal-padding-xs) var(--swal-padding-s); \n border: 1px solid var(--swal-border-color-dark);\n background-color: var(--swal-background-color-button);\n cursor: pointer;\n border-radius: var(--swal-border-radius-standard);\n }\n .league-action-button:hover {\n background-color: var(--swal-background-color-button-hover);\n }\n\n .panel-header-actions {\n display: flex;\n align-items: center;\n gap: var(--swal-padding-s);\n flex-shrink: 0; /* Prevent shrinking */\n flex-wrap: nowrap; /* Prevent wrapping */\n }\n \n /* Ensure buttons in panel headers maintain proper sizing */\n .panel-header-shared .button-shared {\n flex-shrink: 0; /* Prevent buttons from shrinking */\n min-height: auto !important; /* Override any min-height from mobile styles */\n height: auto !important; /* Allow natural height */\n }\n \n /* Override mobile-specific button styles for panel headers */\n @media (max-width: 768px) {\n .panel-header-shared .button-shared {\n min-height: auto !important; /* Override mobile min-height for panel header buttons */\n }\n \n .panel-header-shared .panel-header-actions {\n flex-wrap: nowrap !important; /* Ensure buttons stay on same line */\n }\n }\n\n /* Special styling for Table button */\n #view-table-button {\n background: linear-gradient(135deg, var(--swal-text-color-accent, #007bff) 0%, var(--swal-text-color-accent-hover, #0056b3) 100%);\n color: var(--swal-text-color-on-primary, #fff);\n border: none;\n box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);\n transition: all 0.3s ease;\n position: relative;\n }\n\n #view-table-button:hover {\n background: linear-gradient(135deg, var(--swal-text-color-accent-hover, #0056b3) 0%, #004085 100%);\n box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);\n transform: translateY(-1px);\n }\n\n #view-table-button:active {\n transform: translateY(0);\n box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);\n }\n\n .action-buttons { /* Container for main action buttons */\n display: flex;\n gap: var(--swal-padding-s); \n flex-wrap: wrap; \n margin-bottom: var(--swal-padding-m);\n }\n\n /* Form group grid for better layout */\n .form-group-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--swal-padding-m);\n }\n\n .form-group-grid .form-group {\n margin-bottom: 0;\n }\n\n .form-group {\n margin-bottom: var(--swal-padding-m);\n }\n .form-group label {\n display: block;\n margin-bottom: var(--swal-padding-xs);\n font-weight: bold;\n }\n .form-group input[type=\"text\"],\n .form-group input[type=\"number\"],\n .form-group input[type=\"date\"],\n .form-group select {\n width: 100%;\n padding: var(--swal-padding-s);\n border: 1px solid var(--swal-border-color-dark);\n border-radius: var(--swal-border-radius-standard);\n box-sizing: border-box;\n }\n .form-group input[type=\"checkbox\"] {\n margin-right: var(--swal-padding-s);\n }\n .error {\n color: var(--swal-text-color-error);\n background-color: var(--swal-background-color-error);\n padding: var(--swal-padding-s);\n border: 1px solid var(--swal-border-color-error);\n border-radius: var(--swal-border-radius-standard);\n margin-bottom: var(--swal-padding-m); \n }\n\n .column {\n padding: var(--swal-padding-s);\n box-sizing: border-box;\n }\n .columns {\n display: flex;\n }\n .column-leagues {\n width: 30%; \n min-width: 250px; \n padding: 0; /* Reset padding, let panels handle their own */\n }\n .column-details {\n flex-grow: 1; \n padding: 0 0 0 var(--swal-padding-s);\n }\n\n\n\n .teams-list, .matches-list { /* These are direct children of panel-content divs */\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .close-button {\n color: var(--swal-text-color-secondary, #aaa);\n float: right;\n font-weight: bold;\n cursor: pointer;\n }\n .close-button:hover,\n .close-button:focus {\n color: var(--swal-text-color-primary, #000);\n text-decoration: none;\n }\n .hidden {\n display: none !important;\n }\n\n #admin-matches-attention-container league-matches-attention {\n\n }\n #main-title {\n\n }\n .header-actions {\n /* Styles for the container of header actions if needed */\n }\n .header-actions button svg {\n vertical-align: middle; /* Align icon better with text if any */\n margin-right: var(--swal-padding-xs); /* Space between icon and text if text is shown */\n }\n\n /* Ensuring specificity for panel headers within the specific columns if needed */\n .column-leagues .panel-header,\n .column-details .panel-header {\n background-color: var(--swal-background-color-header);\n }\n\n /* SweetAlert2 Custom Theming */\n .swal2-popup {\n }\n \n .swal2-confirm {\n background-color: var(--le-color-danger, #d33) !important;\n }\n \n .swal2-cancel {\n background-color: var(--le-color-primary, #3085d6) !important;\n }\n\n /* --- Panel header flexbox layout fix --- */\n .panel-header-shared {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: nowrap;\n }\n .panel-header-shared span {\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-header-actions {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--swal-padding-s);\n }\n \n\n :host {\n background: var(--swal-background-color-host-mobile, #f5f5f5);\n border: none;\n border-radius: 0;\n padding: var(--swal-padding-s);\n min-height: 100vh;\n }\n .columns { /* Main container for left/right columns */\n display: flex;\n flex-direction: column;\n gap: var(--swal-padding-m); /* Add gap between stacked columns */\n }\n .column-leagues,\n .column-details {\n width: 100%; /* Make columns full width */\n min-width: 0;\n border: none; /* Remove borders specific to desktop layout */\n }\n .left-panel,\n .right-panel {\n width: 100%;\n min-width: 0;\n border: none;\n border-radius: 0;\n background: none;\n padding: 0;\n margin: 0;\n display: block;\n }\n .content-area {\n padding: var(--swal-padding-s) var(--swal-padding-xs);\n }\n .league-list-container {\n padding-inline-start: 5px;\n }\n\n .header { /* \"League Administration\" title in mobile */\n font-weight: bold;\n padding: var(--swal-padding-s) var(--swal-padding-xs);\n background: none;\n border: none;\n margin-bottom: var(--swal-padding-s);\n }\n .action-buttons { /* New, Copy etc. buttons container */\n margin-bottom: var(--swal-padding-s);\n gap: var(--swal-padding-s);\n }\n .action-buttons button { /* New, Copy etc. buttons */\n min-height: 44px;\n padding: var(--swal-padding-s) var(--swal-padding-m);\n border-radius: var(--swal-border-radius-standard);\n margin-bottom: var(--swal-padding-xs);\n }\n .panel, /* Applies to Teams, Matches, Attention panels in mobile */\n #admin-teams-panel,\n #admin-matches-panel,\n #admin-attention-panel {\n border: none;\n border-radius: var(--swal-border-radius-mobile-panel);\n background: var(--swal-background-color-panel);\n box-shadow: var(--swal-shadow-mobile-panel);\n padding: 0;\n margin: 0 0 var(--swal-padding-m) 0;\n width: 100%;\n box-sizing: border-box;\n display: block;\n }\n .panel-header { /* Mobile panel headers for Teams panel */\n display: flex; /* Ensure it's flex */\n flex-direction: row; /* Align items in a row */\n justify-content: space-between; /* Space between title and button */\n align-items: center; /* Vertically align items */\n font-weight: bold;\n margin-bottom: var(--swal-padding-s);\n background: none; /* Keep transparent background */\n border: none; /* Keep no border */\n padding: var(--swal-padding-s);\n }\n \n .list-container, .panel-content {\n padding: 0 var(--swal-padding-s) var(--swal-padding-s);\n }\n\n .match-item { /* For items within Matches panel in mobile */\n padding: var(--swal-padding-s) var(--swal-padding-xs);\n }\n .match-date {\n }\n .match-team { \n }\n .match-score {\n padding: 0 var(--swal-padding-xs);\n }\n .match-status {\n align-self: center; \n }\n\n /* On mobile the buttons are on their own row, so we need to add some padding */\n #league-actions-panel {\n padding: 8px;\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 /* ADDED SHARED panelStyles */\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 /* ADDED SHARED buttonStyles */\n \n .modal-shared-overlay {\n display: none; /* Hidden by default */\n position: fixed;\n z-index: var(--le-z-index-modal-overlay, 1000); /* Ensure it's on top */\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));\n padding-top: 5%;\n padding-bottom: 5%;\n }\n\n .modal-shared-overlay.open {\n display: flex;\n justify-content: center;\n }\n\n .modal-shared-content {\n background-color: var(--le-background-color-panel, #fff);\n margin: 10% auto; /* Default to 10% from top, centered */\n padding: 0;\n border: 1px solid var(--le-border-color-dark, #ccc);\n max-width: 600px;\n border-radius: var(--le-border-radius-large, 8px);\n box-shadow: var(--le-shadow-modal, 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19));\n display: flex;\n flex-direction: column;\n align-self: flex-start;\n }\n\n /* Specific styles for modal mobile-view class */\n .modal-shared-content.mobile-view {\n width: 90%; /* Override any fixed width from shared styles */\n margin: 0; /* Less margin from top on mobile */\n max-width: 90%;\n min-width: 280px !important;\n }\n\n .modal-shared-header {\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); /* Modal header distinct background */\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--le-font-size-large, 1.4em); /* Increased large font size */\n border-top-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-top-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-header .close-button-shared { /* Specific styling for a close button if needed */\n color: var(--le-text-color-secondary, #aaa);\n font-size: var(--le-font-size-xlarge, 1.8em); /* Increased size */\n font-weight: bold;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .modal-shared-header .close-button-shared:hover,\n .modal-shared-header .close-button-shared:focus {\n color: var(--le-text-color-primary, #000);\n text-decoration: none;\n }\n \n .modal-shared-body {\n padding: var(--le-padding-m, 1.25em); /* Increased padding */\n overflow-y: auto; /* Allow body to scroll if content is too long */\n flex-grow: 1; /* Allows body to take up available space if modal has fixed height */\n }\n\n .modal-shared-footer {\n padding: var(--le-padding-m, 1.25em);\n text-align: right;\n border-top: 1px solid var(--le-border-color-medium, #eee);\n background-color: var(--le-background-color-header, #f9f9f9); /* Optional: footer background */\n border-bottom-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-bottom-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-footer .button-shared + .button-shared { /* Spacing between buttons in footer */\n margin-left: var(--le-padding-s, 0.75em); /* Increased margin */\n }\n /* ADDED SHARED modalStyles */\n \n .form-group-shared {\n margin-bottom: var(--le-padding-m, 1.25em); /* Increased margin */\n }\n\n .form-label-shared {\n display: block;\n margin-bottom: var(--le-padding-xs, 0.4em); /* Increased margin */\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n font-size: var(--le-font-size-label, 1em)); /* Use variable with fallback */\n }\n\n .form-input-shared,\n .form-select-shared {\n width: 100%;\n height: auto;\n padding: var(--le-padding-s, 0.75em);\n border: 1px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-standard, 4px);\n box-sizing: border-box;\n font-size: var(--le-font-size-input, 1em)); /* Use variable with fallback */\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n /* Ensure date inputs have consistent styling across browsers */\n .form-input-shared[type=\"date\"] {\n max-width: 100%;\n }\n\n .form-input-shared:focus,\n .form-select-shared:focus {\n border-color: var(--le-border-color-accent, #2196f3);\n outline: none; /* Or a custom focus ring */\n box-shadow: 0 0 0 2px var(--le-focus-ring-color, rgba(33, 150, 243, 0.3));\n }\n \n /* Specific styling for checkbox groups if needed */\n .form-checkbox-label-shared {\n display: flex; /* Changed to flex for better alignment */\n align-items: center;\n font-weight: normal; /* Typically labels for checkboxes are not bold by default */\n color: var(--le-text-color-primary, #333);\n }\n\n .form-checkbox-label-shared input[type=\"checkbox\"] {\n margin-right: var(--le-padding-s, 0.75em); /* Increased margin */\n /* Consider custom styling for checkboxes if desired, or rely on browser defaults */\n /* For consistent appearance across browsers, custom checkbox styling can be complex */\n /* For now, using default with adjusted margin */\n width: auto; /* Override width: 100% from .form-input-shared if a generic class was applied */\n vertical-align: middle; /* Align checkbox with text */\n }\n\n /* Styling for a container of multiple checkboxes or radio buttons */\n .form-options-group-shared {\n /* Styles for a group of checkboxes/radios, e.g., display: flex; flex-direction: column; gap: ... */\n }\n\n /* Styling for individual option within a group */\n .form-option-item-shared {\n /* Styles for each checkbox/radio item within a group */\n }\n\n /* Enhanced checkbox styles for better mobile usability */\n .checkbox-enhanced-shared {\n position: relative;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n margin-right: var(--le-padding-s, 0.75em);\n }\n\n .checkbox-enhanced-shared input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n .checkbox-enhanced-shared .checkmark-shared {\n position: relative;\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n background-color: var(--le-background-color-panel, #fff);\n border: 2px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-small, 3px);\n transition: all 0.2s ease;\n vertical-align: middle;\n margin-right: var(--le-padding-xs, 0.25em);\n }\n\n /* Mobile-specific larger checkboxes */\n @media (max-width: 768px) {\n .checkbox-enhanced-shared .checkmark-shared {\n width: 2em;\n height: 2em;\n border-width: 2px;\n }\n }\n\n /* Hover state */\n .checkbox-enhanced-shared:hover input[type=\"checkbox\"] ~ .checkmark-shared {\n border-color: var(--le-text-color-accent, #2196f3);\n background-color: var(--le-background-color-row-hover, #f9f9f9);\n }\n\n /* Focus state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:focus ~ .checkmark-shared {\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 /* Checked state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:checked ~ .checkmark-shared {\n background-color: var(--le-text-color-accent, #2196f3);\n border-color: var(--le-text-color-accent, #2196f3);\n }\n\n /* Checkmark icon */\n .checkbox-enhanced-shared .checkmark-shared:after {\n content: \"\";\n position: absolute;\n display: none;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n width: 0.4em;\n height: 0.8em;\n border: solid var(--le-text-color-on-primary, #fff);\n border-width: 0 0.15em 0.15em 0;\n }\n\n /* Mobile-specific larger checkmark */\n @media (max-width: 768px) {\n .checkbox-enhanced-shared .checkmark-shared:after {\n width: 0.5em;\n height: 1em;\n border-width: 0 0.2em 0.2em 0;\n }\n }\n\n /* Show checkmark when checked */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:checked ~ .checkmark-shared:after {\n display: block;\n }\n\n /* Disabled state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:disabled ~ .checkmark-shared {\n background-color: var(--le-background-color-button-disabled, #eee);\n border-color: var(--le-border-color-medium, #ddd);\n cursor: not-allowed;\n }\n\n .checkbox-enhanced-shared input[type=\"checkbox\"]:disabled ~ .checkmark-shared:after {\n border-color: var(--le-text-color-secondary, #aaa);\n }\n\n /* Legend/checkbox list styles for responsive layouts */\n .checkbox-list-responsive-shared {\n display: grid;\n gap: var(--le-padding-s, 0.75em);\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n }\n\n /* Mobile-specific responsive checkbox list */\n @media (max-width: 768px) {\n .checkbox-list-responsive-shared {\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: var(--le-padding-m, 1em);\n }\n }\n\n /* Extra small screens - force 2 columns */\n @media (max-width: 480px) {\n .checkbox-list-responsive-shared {\n grid-template-columns: 1fr 1fr;\n gap: var(--le-padding-s, 0.75em);\n }\n }\n\n /* Legend item styling for checkbox lists */\n .legend-item-shared {\n display: flex;\n align-items: center;\n font-size: var(--le-font-size-small, 0.9em);\n padding: var(--le-padding-xs, 0.25em);\n border-radius: var(--le-border-radius-small, 3px);\n transition: background-color 0.2s ease;\n }\n\n .legend-item-shared:hover {\n background-color: var(--le-background-color-row-hover, #f9f9f9);\n }\n\n /* Mobile-specific legend item styling */\n @media (max-width: 768px) {\n .legend-item-shared {\n font-size: var(--le-font-size-medium, 1.2em);\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.25em);\n min-height: 3em;\n }\n }\n /* ADDED SHARED formStyles */\n \n .list-container {\n max-height: 200px;\n overflow-y: auto;\n }\n .list-panel {\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-standard, 4px);\n background: var(--le-background-color-panel, #fff);\n }\n .list-panel h4 {\n margin: 0;\n padding: var(--le-padding-m, 1rem);\n background: var(--le-background-color-header, #f8f9fa);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n color: var(--le-text-color-primary, #333);\n }\n .list-panel.disabled {\n pointer-events: none;\n opacity: 0.6;\n }\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list-item{\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--le-padding-xs) var(--le-padding-s);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n cursor: pointer;\n transition: background-color 0.2s ease;\n min-height: 2.5rem; /* Ensure consistent height for action buttons */\n box-sizing: border-box;\n }\n .list-panel.disabled .list-item {\n cursor: not-allowed;\n }\n .list-item:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.2em);\n text-align: left; /* Ensure text is left-aligned */\n display: flex;\n align-items: center; /* Center text vertically within its container */\n }\n\n /* Example of an actions container part within a list item */\n .list-item .list-item-actions {\n flex-shrink: 0; /* Prevent actions from shrinking */\n display: flex;\n gap: var(--le-padding-xs, 0.4em); /* Increased gap */\n align-items: center;\n min-height: 2rem; /* Reserve space for buttons even when empty */\n }\n\n .list-item:hover {\n background-color: var(--le-background-color-hover, #f5f5f5);\n }\n\n .list-item.selected {\n background-color: var(--le-background-color-selected, #e3f2fd);\n border-left: 3px solid var(--le-border-color-primary, #2196f3);\n animation: highlightItem 0.6s ease-out;\n }\n\n @keyframes highlightItem {\n 0% {\n background-color: var(--le-background-color-accent, #108CFF);\n box-shadow: 0 0 0 2px rgba(16, 140, 255, 0.3), 0 2px 8px rgba(16, 140, 255, 0.2);\n }\n 100% {\n background-color: var(--le-background-color-selected, #e3f2fd);\n box-shadow: none;\n }\n }\n\n /* Mobile-specific list item adjustments */\n @media (max-width: 768px) {\n .list-item {\n min-height: 4rem; /* Slightly taller for mobile touch targets */\n padding: 0 var(--le-padding-xs, 1rem);;\n }\n \n .list-item .list-item-actions {\n min-height: 2.5rem; /* Larger touch targets for mobile */\n }\n \n .list-item .list-item-actions .button-shared {\n min-height: 2.5rem; /* Ensure buttons are touch-friendly */\n }\n }\n /* ADDED SHARED listStyles */\n \n /* Tab System Styles */\n .modal-tabs-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n \n .tab-navigation {\n display: flex;\n border-bottom: 2px solid var(--le-border-color-light);\n margin-bottom: var(--le-padding-m);\n gap: 0;\n }\n\n .tab-button {\n background: var(--le-background-color-button);\n border: 1px solid var(--le-border-color-medium);\n border-bottom: none;\n padding: var(--le-padding-s) var(--le-padding-m);\n cursor: pointer;\n font-weight: 500;\n color: var(--le-text-color-secondary);\n border-radius: var(--le-border-radius-standard) var(--le-border-radius-standard) 0 0;\n position: relative;\n transition: all 0.2s ease;\n min-width: 120px;\n text-align: center;\n user-select: none;\n }\n\n .tab-button:hover {\n background: var(--le-background-color-button-hover);\n color: var(--le-text-color-primary);\n }\n\n .tab-button.active {\n background: var(--le-background-color-panel);\n color: var(--le-text-color-primary);\n font-weight: 600;\n border-bottom: 2px solid var(--le-background-color-panel);\n margin-bottom: -2px;\n z-index: 1;\n }\n\n .tab-button:not(:last-child) {\n border-right: none;\n }\n\n .tab-content-container {\n flex: 1;\n min-height: 300px;\n }\n\n .tab-content {\n display: none;\n animation: fadeIn 0.2s ease-in;\n }\n\n .tab-content.active {\n display: block;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* Enhanced fieldset styling for tabs */\n .tab-content fieldset {\n margin-bottom: var(--le-padding-m);\n border: 1px solid var(--le-border-color-medium);\n border-radius: var(--le-border-radius-standard);\n padding: var(--le-padding-m);\n background: var(--le-background-color-header);\n }\n\n .tab-content fieldset legend {\n font-weight: 600;\n color: var(--le-text-color-primary);\n padding: 0 var(--le-padding-s);\n font-size: var(--le-font-size-small, 0.8em);\n }\n\n .tab-content fieldset:last-child {\n margin-bottom: 0;\n }\n\n /* Enhanced form styling within tabs */\n .tab-content .form-group {\n margin-bottom: var(--le-padding-m);\n }\n\n .tab-content .form-group:last-child {\n margin-bottom: 0;\n }\n\n .tab-content .form-group label {\n display: block;\n margin-bottom: var(--le-padding-xs);\n font-weight: 500;\n color: var(--le-text-color-primary);\n font-size: var(--le-font-size-small, 0.8em);\n }\n\n .tab-content .form-group input[type=\"text\"],\n .tab-content .form-group input[type=\"number\"],\n .tab-content .form-group select {\n width: 100%;\n padding: var(--le-padding-s);\n border: 1px solid var(--le-border-color-dark);\n border-radius: var(--le-border-radius-standard);\n box-sizing: border-box;\n font-size: var(--le-font-size-medium);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .tab-content .form-group input[type=\"text\"]:focus,\n .tab-content .form-group input[type=\"number\"]:focus,\n .tab-content .form-group select:focus {\n outline: none;\n border-color: var(--le-text-color-accent);\n box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);\n }\n\n .tab-content .form-group input[type=\"checkbox\"] {\n margin-right: var(--le-padding-s);\n transform: scale(1.1);\n }\n\n /* Enhanced rink points settings */\n .tab-content .rink-points-settings {\n border: 1px dashed var(--le-border-color-dark);\n padding: var(--le-padding-m);\n margin-top: var(--le-padding-s);\n background-color: var(--le-background-color-header);\n border-radius: var(--le-border-radius-standard);\n transition: opacity 0.3s ease;\n }\n \n .tab-content .rink-points-settings.disabled {\n opacity: 0.6;\n }\n\n /* Responsive adjustments for tabs */\n @media (max-width: 600px) {\n .tab-button {\n padding: var(--le-padding-xs) var(--le-padding-s);\n min-width: 100px;\n font-size: var(--le-font-size-small);\n }\n\n .form-group-grid {\n grid-template-columns: 1fr;\n gap: var(--le-padding-s);\n }\n\n .tab-content fieldset {\n padding: var(--le-padding-s);\n }\n \n }\n /* ADDED SHARED tabStyles */\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 /* ADDED SHARED dropdownStyles */\n \n /* Help Banner Styles */\n .help-banner-shared {\n background-color: var(--le-background-color-header, #f8f9fa);\n padding: var(--le-padding-xs, 0.25rem) var(--le-padding-m, 1rem);\n text-align: right;\n font-size: var(--le-font-size-xs, 0.75em);\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n\n .help-banner-shared a {\n color: var(--le-text-color-accent, #2196f3);\n text-decoration: none;\n font-weight: 500;\n }\n\n .help-banner-shared a:hover {\n text-decoration: underline;\n }\n\n .help-banner-shared .separator {\n color: var(--le-text-color-secondary, #666);\n margin: 0 var(--le-padding-xs, 0.25rem);\n }\n /* ADDED SHARED helpBannerStyles */\n :host {\n display: block;\n border: 1px solid var(--swal-border-color-medium, #ccc); \n font-family: var(--swal-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif); \n box-sizing: border-box;\n color: var(--swal-text-color-primary, #333); \n\n /* ADMIN THEME VARIABLES */\n --swal-font-family-main: 'Open Sans', Helvetica, Arial, sans-serif;\n \n /* Use shared font sizing system - no more swal- font size variables */\n /* Mobile and desktop will inherit appropriate sizing from shared styles */\n\n --swal-text-color-primary: #333;\n --swal-text-color-secondary: #666;\n --swal-text-color-accent: #007bff; \n --swal-text-color-accent-hover: #0056b3;\n --swal-text-color-error: #D8000C;\n --swal-text-color-success: #4CAF50;\n --swal-text-color-on-primary: #fff;\n\n --swal-color-status-warning: var(--le-color-status-warning, #f39c12);\n --swal-color-status-conflict: var(--le-color-status-conflict, #e67e22);\n --swal-color-status-pending: var(--le-color-status-pending, #e74c3c);\n --swal-color-status-info: var(--le-color-status-info, #2196f3);\n --swal-color-status-success: var(--le-color-status-success, #4CAF50);\n\n --swal-background-color-host-desktop: #f8f9fa; \n --swal-background-color-host-mobile: #f5f5f5;\n --swal-background-color-panel: #fff;\n --swal-background-color-header: #f5f5f5;\n --swal-background-color-button: #f0f0f0;\n --swal-background-color-button-hover: #e0e0e0;\n --swal-background-color-button-disabled: #eee;\n --swal-background-color-selected-item: #e9eff7; \n --swal-background-color-modal-header: #f5f5f5;\n --swal-background-color-error: #FFD2D2;\n --swal-background-color-rink-settings: #f9f9f9;\n\n --swal-border-color-light: #f0f0f0;\n --swal-border-color-medium: #ddd;\n --swal-border-color-dark: #ccc;\n --swal-border-color-error: #D8000C;\n --swal-border-color-rink-settings: #ccc; \n\n --swal-border-radius-standard: 4px;\n --swal-border-radius-large: 8px; \n --swal-border-radius-mobile-panel: 12px;\n\n --swal-shadow-mobile-panel: 0 2px 8px rgba(0,0,0,0.06);\n\n --swal-spacing-unit: 0.25rem;\n --swal-padding-xs: calc(1 * var(--swal-spacing-unit));\n --swal-padding-s: calc(2 * var(--swal-spacing-unit));\n --swal-padding-m: calc(4 * var(--swal-spacing-unit));\n --swal-padding-l: calc(6 * var(--swal-spacing-unit));\n\n /* --- Mappings for shared-styles.js --- */\n /* These ensure shared components adopt the admin theme */\n --le-padding-xs: var(--swal-padding-xs);\n --le-padding-s: var(--swal-padding-s);\n --le-padding-m: var(--swal-padding-m);\n \n --le-border-color-light: var(--swal-border-color-light);\n --le-border-color-medium: var(--swal-border-color-medium);\n --le-border-color-dark: var(--swal-border-color-dark);\n\n --le-text-color-primary: var(--swal-text-color-primary);\n --le-text-color-secondary: var(--swal-text-color-secondary);\n --le-text-color-on-primary: var(--swal-text-color-on-primary);\n\n --le-background-color-header: var(--swal-background-color-header);\n --le-background-color-panel: var(--swal-background-color-panel);\n --le-background-color-button: var(--swal-background-color-button);\n --le-background-color-button-hover: var(--swal-background-color-button-hover);\n --le-background-color-button-disabled: var(--swal-background-color-button-disabled);\n\n --le-border-radius-standard: var(--swal-border-radius-standard);\n \n #leagueName {\n font-size: var(--le-font-size-medium);\n }\n \n }\n /* Highlighted glow for New button when no leagues exist */\n .highlight-glow {\n box-shadow: 0 0 8px 2px #66bb6a, 0 0 0 4px #e8f5e9;\n background-color: #e8f5e9 !important;\n transition: box-shadow 0.3s, background-color 0.3s;\n z-index: 1;\n animation: pulse-glow 2s ease-in-out infinite;\n }\n @keyframes pulse-glow {\n 0% {\n box-shadow: 0 0 8px 2px #66bb6a, 0 0 0 4px #e8f5e9;\n background-color: #e8f5e9;\n }\n 50% {\n box-shadow: 0 0 16px 6px #43a047, 0 0 0 8px #d0f8ce;\n background-color: #d0f8ce;\n }\n 100% {\n box-shadow: 0 0 8px 2px #66bb6a, 0 0 0 4px #e8f5e9;\n background-color: #e8f5e9;\n }\n }\n \n /* Loading spinner for buttons */\n .loading-spinner {\n display: inline-block;\n width: 12px;\n height: 12px;\n border: 2px solid transparent;\n border-top: 2px solid currentColor;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-right: 6px;\n vertical-align: middle;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n /* Disabled button styling */\n .button-shared:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n \n .button-shared:disabled .loading-spinner {\n opacity: 0.8;\n }\n .header {\n font-weight: bold;\n background: var(--swal-background-color-header);\n padding: var(--swal-padding-s);\n border-bottom: 1px solid var(--swal-border-color-medium);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .content-area {\n padding: var(--swal-padding-s) var(--swal-padding-xs);\n }\n .league-list-container {\n border-radius: var(--swal-border-radius-mobile-panel);\n box-shadow: var(--swal-shadow-mobile-panel);\n padding: var(--swal-padding-xs);\n }\n .column-leagues .panel-header-shared button:first-of-type { /* First button (New) gets pushed to the right */\n margin-left: auto;\n }\n .column-leagues .panel-header-shared button:not(:first-of-type) { /* Subsequent buttons (Copy) get spacing */\n margin-left: var(--swal-padding-s);\n }\n .league-action-button { /* These are small icon-like buttons, potentially keep specific styles or create a new shared variant */\n padding: var(--swal-padding-xs) var(--swal-padding-s); \n border: 1px solid var(--swal-border-color-dark);\n background-color: var(--swal-background-color-button);\n cursor: pointer;\n border-radius: var(--swal-border-radius-standard);\n }\n .league-action-button:hover {\n background-color: var(--swal-background-color-button-hover);\n }\n\n .panel-header-actions {\n display: flex;\n align-items: center;\n gap: var(--swal-padding-s);\n flex-shrink: 0; /* Prevent shrinking */\n flex-wrap: nowrap; /* Prevent wrapping */\n }\n \n /* Ensure buttons in panel headers maintain proper sizing */\n .panel-header-shared .button-shared {\n flex-shrink: 0; /* Prevent buttons from shrinking */\n min-height: auto !important; /* Override any min-height from mobile styles */\n height: auto !important; /* Allow natural height */\n }\n \n /* Override mobile-specific button styles for panel headers */\n @media (max-width: 768px) {\n .panel-header-shared .button-shared {\n min-height: auto !important; /* Override mobile min-height for panel header buttons */\n }\n \n .panel-header-shared .panel-header-actions {\n flex-wrap: nowrap !important; /* Ensure buttons stay on same line */\n }\n }\n\n /* Special styling for Table button */\n #view-table-button {\n background: linear-gradient(135deg, var(--swal-text-color-accent, #007bff) 0%, var(--swal-text-color-accent-hover, #0056b3) 100%);\n color: var(--swal-text-color-on-primary, #fff);\n border: none;\n box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);\n transition: all 0.3s ease;\n position: relative;\n }\n\n #view-table-button:hover {\n background: linear-gradient(135deg, var(--swal-text-color-accent-hover, #0056b3) 0%, #004085 100%);\n box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);\n transform: translateY(-1px);\n }\n\n #view-table-button:active {\n transform: translateY(0);\n box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);\n }\n\n .action-buttons { /* Container for main action buttons */\n display: flex;\n gap: var(--swal-padding-s); \n flex-wrap: wrap; \n margin-bottom: var(--swal-padding-m);\n }\n\n /* Form group grid for better layout */\n .form-group-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--swal-padding-m);\n }\n\n .form-group-grid .form-group {\n margin-bottom: 0;\n }\n\n .form-group {\n margin-bottom: var(--swal-padding-m);\n }\n .form-group label {\n display: block;\n margin-bottom: var(--swal-padding-xs);\n font-weight: bold;\n }\n .form-group input[type=\"text\"],\n .form-group input[type=\"number\"],\n .form-group input[type=\"date\"],\n .form-group select {\n width: 100%;\n padding: var(--swal-padding-s);\n border: 1px solid var(--swal-border-color-dark);\n border-radius: var(--swal-border-radius-standard);\n box-sizing: border-box;\n }\n .form-group input[type=\"checkbox\"] {\n margin-right: var(--swal-padding-s);\n }\n .error {\n color: var(--swal-text-color-error);\n background-color: var(--swal-background-color-error);\n padding: var(--swal-padding-s);\n border: 1px solid var(--swal-border-color-error);\n border-radius: var(--swal-border-radius-standard);\n margin-bottom: var(--swal-padding-m); \n }\n\n .column {\n padding: var(--swal-padding-s);\n box-sizing: border-box;\n }\n .columns {\n display: flex;\n }\n .column-leagues {\n width: 30%; \n min-width: 250px; \n padding: 0; /* Reset padding, let panels handle their own */\n }\n .column-details {\n flex-grow: 1; \n padding: 0 0 0 var(--swal-padding-s);\n }\n\n\n\n .teams-list, .matches-list { /* These are direct children of panel-content divs */\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .close-button {\n color: var(--swal-text-color-secondary, #aaa);\n float: right;\n font-weight: bold;\n cursor: pointer;\n }\n .close-button:hover,\n .close-button:focus {\n color: var(--swal-text-color-primary, #000);\n text-decoration: none;\n }\n .hidden {\n display: none !important;\n }\n\n #admin-matches-attention-container league-matches-attention {\n\n }\n #main-title {\n\n }\n .header-actions {\n /* Styles for the container of header actions if needed */\n }\n .header-actions button svg {\n vertical-align: middle; /* Align icon better with text if any */\n margin-right: var(--swal-padding-xs); /* Space between icon and text if text is shown */\n }\n\n /* Ensuring specificity for panel headers within the specific columns if needed */\n .column-leagues .panel-header,\n .column-details .panel-header {\n background-color: var(--swal-background-color-header);\n }\n\n /* SweetAlert2 Custom Theming */\n .swal2-popup {\n }\n \n .swal2-confirm {\n background-color: var(--le-color-danger, #d33) !important;\n }\n \n .swal2-cancel {\n background-color: var(--le-color-primary, #3085d6) !important;\n }\n\n /* --- Panel header flexbox layout fix --- */\n .panel-header-shared {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: nowrap;\n }\n .panel-header-shared span {\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-header-actions {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--swal-padding-s);\n }\n \n :host {\n padding: var(--swal-padding-m);\n height: 100%;\n background-color: var(--swal-background-color-host-desktop);\n }\n .panel-header { \n flex-direction: row; \n align-items: center; \n background: var(--swal-background-color-header); \n border-bottom: 1px solid var(--swal-border-color-medium); \n padding: var(--swal-padding-s); \n }\n .panel-header button { /* Add Team/Match on Desktop */\n margin-left: auto; /* Push to the right */\n }\n .league-list-container {\n flex-shrink: 0; \n }\n .league-action-button { /* Table, Actions buttons in league list for desktop */\n padding: var(--swal-padding-xs) var(--swal-padding-s);\n }\n bottom: 100%; \n top: auto; \n right: 0; \n } */\n ";
export const DESKTOP_TEMPLATE: "\n \n \n \n \n
\n
\n\n
\n\n
\n \n
\n\n
\n\n \n
\n\n \n
\n
\n
\n
\n
\n
\n\n
\n\n
\n \n
\n\n
\n\n \n
\n\n \n
\n
\n
\n