UNPKG

@lovebowls/leagueelements

Version:

League Elements package for LoveBowls

2 lines • 99.5 kB
1
2
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 /* ADDED SHARED STYLE */\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 - consider if needed, or handle with specific component styles */\n /*\n .button-shared.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.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.accent {\n background-color: var(--le-color-accent, #2196f3);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-accent, #2196f3);\n }\n .button-shared.accent:hover:not(:disabled) {\n background-color: var(--le-color-accent-hover, #1976d2);\n border-color: var(--le-color-accent-hover, #1976d2);\n }\n */\n /* ADDED SHARED STYLE */\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 }\n\n .modal-shared-content {\n background-color: var(--le-background-color-panel, #fff);\n margin: var(--le-modal-margin-top, 10%) auto; /* Default to 10% from top, centered */\n padding: 0; /* Remove padding, header/body/footer will handle it */\n border: 1px solid var(--le-border-color-dark, #ccc);\n width: var(--le-modal-width, 90%); /* Increased width for mobile */\n max-width: var(--le-modal-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 }\n\n /* Specific styles for mobile-view class, used by leagueMatch.js */\n .modal-shared-content.mobile-view {\n margin: 5% auto; /* Less margin from top on mobile */\n width: var(--le-modal-width-mobile, 95%); /* Even wider on mobile */\n max-width: var(--le-modal-max-width-mobile, 650px); /* Increased max-width for mobile */\n }\n\n .modal-shared-header {\n /* Utilizes .panel-header-shared for base styling if desired, or define fully here */\n /* This example assumes it might be combined with .panel-header-shared or similar */\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: 1.75em; /* 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-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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 MODAL STYLE */\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-medium, 1.15em); /* Increased font size */\n }\n\n .form-input-shared,\n .form-textarea-shared,\n .form-select-shared {\n width: 100%;\n padding: var(--le-padding-s, 0.75em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n .form-input-shared:focus,\n .form-textarea-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 font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\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 /* ADDED SHARED FORM STYLE */\n \n .list-item-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.4em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n display: flex;\n align-items: center;\n justify-content: space-between; /* Common for items with actions on the right */\n gap: var(--le-padding-s, 0.75em); /* Increased gap */\n }\n\n .list-item-shared:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item-shared .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.15em); /* Added explicit font size */\n /* Potentially add text overflow properties if needed */\n /* white-space: nowrap; */\n /* overflow: hidden; */\n /* text-overflow: ellipsis; */\n }\n\n /* Example of an actions container part within a list item */\n .list-item-shared .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 }\n /* ADDED SHARED LIST ITEM STYLE */\n :host {\n display: block;\n border: 1px solid var(--lae-border-color-medium, #ccc); \n font-family: var(--lae-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif); \n box-sizing: border-box;\n color: var(--lae-text-color-primary, #333); \n\n /* ADMIN THEME VARIABLES (lae prefix for LeagueAdminElement) */\n --lae-font-family-main: 'Open Sans', Helvetica, Arial, sans-serif;\n --lae-font-size-base-desktop: 1em;\n --lae-font-size-base-mobile: 2em; \n\n --lae-font-size-small: 0.85em; \n --lae-font-size-medium: 1em; \n --lae-font-size-large: 1.2em; \n --lae-font-size-xlarge: 1.5em; \n\n --lae-text-color-primary: #333;\n --lae-text-color-secondary: #666;\n --lae-text-color-accent: #007bff; \n --lae-text-color-accent-hover: #0056b3;\n --lae-text-color-error: #D8000C;\n --lae-text-color-success: #4CAF50;\n --lae-text-color-on-primary: #fff;\n\n /* LAE Status Colors - Mapped from LE or defined if different */\n --lae-color-status-warning: var(--le-color-status-warning, #f39c12);\n --lae-color-status-conflict: var(--le-color-status-conflict, #e67e22);\n --lae-color-status-pending: var(--le-color-status-pending, #e74c3c);\n --lae-color-status-info: var(--le-color-status-info, #2196f3);\n --lae-color-status-success: var(--le-color-status-success, #4CAF50);\n\n --lae-background-color-host-desktop: #f8f9fa; \n --lae-background-color-host-mobile: #f5f5f5;\n --lae-background-color-panel: #fff;\n --lae-background-color-header: #f5f5f5;\n --lae-background-color-button: #f0f0f0;\n --lae-background-color-button-hover: #e0e0e0;\n --lae-background-color-button-disabled: #eee;\n --lae-background-color-selected-item: #e9eff7; \n --lae-background-color-modal-header: #f5f5f5;\n --lae-background-color-error: #FFD2D2;\n --lae-background-color-rink-settings: #f9f9f9;\n\n --lae-border-color-light: #f0f0f0;\n --lae-border-color-medium: #ddd;\n --lae-border-color-dark: #ccc;\n --lae-border-color-error: #D8000C;\n --lae-border-color-rink-settings: #ccc; \n\n --lae-border-radius-standard: 4px;\n --lae-border-radius-large: 8px; \n --lae-border-radius-mobile-panel: 12px;\n\n --lae-shadow-mobile-panel: 0 2px 8px rgba(0,0,0,0.06);\n\n --lae-spacing-unit: 0.25rem;\n --lae-padding-xs: calc(1 * var(--lae-spacing-unit));\n --lae-padding-s: calc(2 * var(--lae-spacing-unit));\n --lae-padding-m: calc(4 * var(--lae-spacing-unit));\n --lae-padding-l: calc(6 * var(--lae-spacing-unit));\n\n /* --- Mappings for shared-styles.js --- */\n /* These ensure shared components adopt the admin theme */\n --le-padding-xs: var(--lae-padding-xs);\n --le-padding-s: var(--lae-padding-s);\n --le-padding-m: var(--lae-padding-m);\n \n --le-border-color-light: var(--lae-border-color-light);\n --le-border-color-medium: var(--lae-border-color-medium);\n --le-border-color-dark: var(--lae-border-color-dark);\n\n --le-text-color-primary: var(--lae-text-color-primary);\n --le-text-color-secondary: var(--lae-text-color-secondary);\n --le-text-color-on-primary: var(--lae-text-color-on-primary);\n\n --le-background-color-header: var(--lae-background-color-header);\n --le-background-color-panel: var(--lae-background-color-panel);\n --le-background-color-button: var(--lae-background-color-button);\n --le-background-color-button-hover: var(--lae-background-color-button-hover);\n --le-background-color-button-disabled: var(--lae-background-color-button-disabled);\n\n --le-border-radius-standard: var(--lae-border-radius-standard);\n \n --le-font-size-medium: var(--lae-font-size-medium);\n --le-font-size-small: var(--lae-font-size-small);\n /* --- End Mappings --- */\n\n --main-content-font-size: var(--lae-font-size-base-desktop); \n }\n .header { /* Main header for \"League Administration\" title. May not use panel-header-shared directly if it has very unique structure */\n font-weight: bold;\n background: var(--lae-background-color-header);\n padding: var(--lae-padding-s);\n border-bottom: 1px solid var(--lae-border-color-medium);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--lae-font-size-large); /* Specific to this main header */\n }\n .content-area {\n padding: var(--lae-padding-s) var(--lae-padding-xs);\n }\n .league-list-container {\n border-radius: var(--lae-border-radius-mobile-panel);\n box-shadow: var(--lae-shadow-mobile-panel);\n padding: var(--lae-padding-xs);\n }\n .column-leagues .panel-header-shared .action-buttons { /* For New/Copy buttons in Leagues header */\n display: flex; /* Ensure buttons are in a row */\n align-items: center;\n justify-content: flex-end; /* Align these buttons to the right */\n gap: var(--lae-padding-s); /* Space between New/Copy */\n margin-left: auto; /* Push this container to the right of \"Leagues\" text */\n }\n .league-list-item {\n padding: var(--lae-padding-s) var(--lae-padding-xs);\n /* flex-wrap: wrap; REMOVE - we want items on one line if possible */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid var(--lae-border-color-light); /* Keep border */\n }\n .league-list-item:last-child {\n border-bottom: none;\n }\n .league-name-text {\n font-size: var(--lae-font-size-medium);\n /* margin-bottom: var(--lae-padding-xs); REMOVE - no longer needed if side-by-side */\n /* flex-basis: 100%; REMOVE - allow it to size naturally / grow */\n flex-grow: 1; /* Allow name to take available space */\n margin-right: var(--lae-padding-s); /* Space before buttons */\n pointer-events: none;\n }\n .league-item-actions-container { /* For View Table/Actions on selected league */\n /* flex-basis: 100%; REMOVE - not needed if side-by-side */\n display: flex;\n justify-content: flex-end;\n gap: var(--lae-padding-s);\n /* margin-top: var(--lae-padding-xs); REMOVE - not needed if side-by-side */\n flex-shrink: 0; /* Prevent button container from shrinking */\n min-height: 32px; /* Reserve space for buttons */\n }\n .league-list-item.selected {\n background-color: var(--lae-background-color-selected-item, #e9eff7);\n font-weight: bold;\n }\n .league-list-item.selected .league-name-text {\n pointer-events: auto; /* Re-enable pointer events for selected text if needed, though likely not */\n }\n .league-action-button { /* These are small icon-like buttons, potentially keep specific styles or create a new shared variant */\n padding: var(--lae-padding-xs) var(--lae-padding-s); \n border: 1px solid var(--lae-border-color-dark);\n background-color: var(--lae-background-color-button);\n cursor: pointer;\n border-radius: var(--lae-border-radius-standard);\n font-size: var(--lae-font-size-small); \n }\n .league-action-button:hover {\n background-color: var(--lae-background-color-button-hover);\n }\n .league-action-dropdown .dropdown-content {\n min-width: 120px; \n }\n .action-buttons { /* Container for main action buttons */\n display: flex;\n gap: var(--lae-padding-s); \n flex-wrap: wrap; \n margin-bottom: var(--lae-padding-m);\n }\n /* .action-buttons button styles are covered by .button-shared class in template */\n /* .action-buttons button {\n padding: var(--lae-padding-s) var(--lae-padding-m);\n border: 1px solid var(--lae-border-color-medium);\n background-color: var(--lae-background-color-button);\n cursor: pointer;\n border-radius: var(--lae-border-radius-standard);\n font-size: var(--lae-font-size-medium);\n } */\n /* .action-buttons button:disabled {\n background-color: var(--lae-background-color-button-disabled);\n color: var(--lae-text-color-secondary);\n cursor: not-allowed;\n } */\n /* .action-buttons button:hover:not(:disabled) {\n background-color: var(--lae-background-color-button-hover);\n } */\n .modal {\n display: none; \n position: fixed; \n z-index: 1000; \n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto; \n background-color: rgba(0,0,0,0.4); \n }\n .modal-content {\n background-color: var(--lae-background-color-panel);\n margin: 10% auto; \n padding: var(--lae-padding-l);\n border: 1px solid var(--lae-border-color-dark);\n width: 80%; \n max-width: 600px; \n border-radius: var(--lae-border-radius-large);\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n }\n .modal-header { /* Uses .panel-header-shared in template but has overrides */\n /* padding, border-bottom, font-weight potentially from .panel-header-shared */\n background-color: var(--lae-background-color-modal-header);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--lae-font-size-large);\n /* Ensure shared padding is applied if not overridden by specificity */\n padding: var(--le-padding-s, 0.5em) var(--le-padding-m, 1em);\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n font-weight: bold;\n }\n .modal-body {\n padding: var(--lae-padding-m);\n }\n .modal-footer {\n padding: var(--lae-padding-s) var(--lae-padding-m);\n text-align: right;\n border-top: 1px solid var(--lae-border-color-medium);\n }\n .modal-footer button { /* Buttons inside use .button-shared from template */\n margin-left: var(--lae-padding-s); /* Keep specific margin */\n }\n .form-group {\n margin-bottom: var(--lae-padding-m);\n }\n .form-group label {\n display: block;\n margin-bottom: var(--lae-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(--lae-padding-s);\n border: 1px solid var(--lae-border-color-dark);\n border-radius: var(--lae-border-radius-standard);\n box-sizing: border-box;\n font-size: var(--lae-font-size-medium);\n }\n .form-group input[type=\"checkbox\"] {\n margin-right: var(--lae-padding-s);\n }\n .rink-points-settings {\n border: 1px dashed var(--lae-border-color-rink-settings);\n padding: var(--lae-padding-s);\n margin-top: var(--lae-padding-s);\n background-color: var(--lae-background-color-rink-settings);\n }\n .error {\n color: var(--lae-text-color-error);\n background-color: var(--lae-background-color-error);\n padding: var(--lae-padding-s);\n border: 1px solid var(--lae-border-color-error);\n border-radius: var(--lae-border-radius-standard);\n margin-bottom: var(--lae-padding-m); \n }\n /* Original column, resizer, panel styles from previous file state */\n /* These might need review after shared styles are fully integrated */\n .column {\n padding: var(--lae-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 border-right: 1px solid var(--lae-border-color-medium);\n padding-right: var(--lae-padding-s); \n }\n .column-details {\n flex-grow: 1; \n padding-left: var(--lae-padding-s); \n }\n .resizer {\n width: 10px;\n cursor: col-resize;\n background-color: var(--lae-background-color-header);\n border-left: 1px solid var(--lae-border-color-light);\n border-right: 1px solid var(--lae-border-color-light);\n z-index: 10;\n }\n .panel { /* This class is used on #teams-panel and #matches-panel */\n margin-bottom: var(--lae-padding-m);\n border: 1px solid var(--lae-border-color-light);\n border-radius: var(--lae-border-radius-standard);\n }\n .panel .panel-header { /* Styles for panel headers that have .panel-header-shared in template */\n /* Shared properties from .panel-header-shared apply */\n /* Overrides or additional styles for these specific panel headers: */\n font-size: var(--lae-font-size-medium); \n display: flex; /* Ensure these are flex for button alignment */\n justify-content: space-between;\n align-items: center;\n background-color: var(--lae-background-color-header); /* Ensure admin context bg */\n }\n /* .panel .panel-content is covered by .panel-content-shared in template */\n\n .teams-list, .matches-list { /* These are direct children of panel-content-shared divs */\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .teams-list li, .matches-list li {\n padding: var(--lae-padding-xs);\n border-bottom: 1px solid var(--lae-border-color-light);\n }\n .teams-list li:last-child, .matches-list li:last-child {\n border-bottom: none;\n }\n .close-button {\n color: var(--lae-text-color-secondary, #aaa);\n float: right;\n font-size: 1.5em; \n font-weight: bold;\n cursor: pointer;\n }\n .close-button:hover,\n .close-button:focus {\n color: var(--lae-text-color-primary, #000);\n text-decoration: none;\n }\n .hidden {\n display: none !important;\n }\n .dropdown {\n position: relative;\n display: inline-block;\n z-index: 2;\n }\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: var(--lae-background-color-panel, #f9f9f9);\n /* min-width: 160px; REMOVED */\n min-width: auto;\n width: fit-content;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 100;\n border-radius: var(--lae-border-radius-standard);\n border: 1px solid var(--lae-border-color-medium);\n top: 100%;\n right: 0;\n }\n .dropdown-content button { /* Assuming these are also to be styled as shared buttons or a variant */\n color: var(--lae-text-color-primary, black);\n padding: var(--lae-padding-s) var(--lae-padding-m);\n text-decoration: none;\n display: block;\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n cursor: pointer;\n font-size: var(--lae-font-size-small);\n }\n .dropdown-content button:hover {\n background-color: var(--lae-background-color-button-hover, #f1f1f1);\n }\n .dropdown.show .dropdown-content {\n display: block;\n }\n #admin-matches-attention-container league-matches-attention {\n font-size: var(--lae-font-size-small); /* Adjust font size for attention component within admin panel */\n }\n #main-title {\n font-size: var(--lae-font-size-xlarge);\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(--lae-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 /* These already have .panel-header-shared in template, so shared styles apply. */\n /* Add specific overrides here if .panel-header-shared is not enough */\n /* For example, to ensure they use the correct background for admin context: */\n background-color: var(--lae-background-color-header);\n }\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 /* ADDED SHARED STYLE */\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 - consider if needed, or handle with specific component styles */\n /*\n .button-shared.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.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.accent {\n background-color: var(--le-color-accent, #2196f3);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-accent, #2196f3);\n }\n .button-shared.accent:hover:not(:disabled) {\n background-color: var(--le-color-accent-hover, #1976d2);\n border-color: var(--le-color-accent-hover, #1976d2);\n }\n */\n /* ADDED SHARED STYLE */\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 }\n\n .modal-shared-content {\n background-color: var(--le-background-color-panel, #fff);\n margin: var(--le-modal-margin-top, 10%) auto; /* Default to 10% from top, centered */\n padding: 0; /* Remove padding, header/body/footer will handle it */\n border: 1px solid var(--le-border-color-dark, #ccc);\n width: var(--le-modal-width, 90%); /* Increased width for mobile */\n max-width: var(--le-modal-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 }\n\n /* Specific styles for mobile-view class, used by leagueMatch.js */\n .modal-shared-content.mobile-view {\n margin: 5% auto; /* Less margin from top on mobile */\n width: var(--le-modal-width-mobile, 95%); /* Even wider on mobile */\n max-width: var(--le-modal-max-width-mobile, 650px); /* Increased max-width for mobile */\n }\n\n .modal-shared-header {\n /* Utilizes .panel-header-shared for base styling if desired, or define fully here */\n /* This example assumes it might be combined with .panel-header-shared or similar */\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: 1.75em; /* 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-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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 MODAL STYLE */\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-medium, 1.15em); /* Increased font size */\n }\n\n .form-input-shared,\n .form-textarea-shared,\n .form-select-shared {\n width: 100%;\n padding: var(--le-padding-s, 0.75em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n .form-input-shared:focus,\n .form-textarea-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 font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\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 /* ADDED SHARED FORM STYLE */\n \n .list-item-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.4em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n display: flex;\n align-items: center;\n justify-content: space-between; /* Common for items with actions on the right */\n gap: var(--le-padding-s, 0.75em); /* Increased gap */\n }\n\n .list-item-shared:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item-shared .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.15em); /* Added explicit font size */\n /* Potentially add text overflow properties if needed */\n /* white-space: nowrap; */\n /* overflow: hidden; */\n /* text-overflow: ellipsis; */\n }\n\n /* Example of an actions container part within a list item */\n .list-item-shared .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 }\n /* ADDED SHARED LIST ITEM STYLE */\n :host {\n display: block;\n border: 1px solid var(--lae-border-color-medium, #ccc); \n font-family: var(--lae-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif); \n box-sizing: border-box;\n color: var(--lae-text-color-primary, #333); \n\n /* ADMIN THEME VARIABLES (lae prefix for LeagueAdminElement) */\n --lae-font-family-main: 'Open Sans', Helvetica, Arial, sans-serif;\n --lae-font-size-base-desktop: 1em;\n --lae-font-size-base-mobile: 2em; \n\n --lae-font-size-small: 0.85em; \n --lae-font-size-medium: 1em; \n --lae-font-size-large: 1.2em; \n --lae-font-size-xlarge: 1.5em; \n\n --lae-text-color-primary: #333;\n --lae-text-color-secondary: #666;\n --lae-text-color-accent: #007bff; \n --lae-text-color-accent-hover: #0056b3;\n --lae-text-color-error: #D8000C;\n --lae-text-color-success: #4CAF50;\n --lae-text-color-on-primary: #fff;\n\n /* LAE Status Colors - Mapped from LE or defined if different */\n --lae-color-status-warning: var(--le-color-status-warning, #f39c12);\n --lae-color-status-conflict: var(--le-color-status-conflict, #e67e22);\n --lae-color-status-pending: var(--le-color-status-pending, #e74c3c);\n --lae-color-status-info: var(--le-color-status-info, #2196f3);\n --lae-color-status-success: var(--le-color-status-success, #4CAF50);\n\n --lae-background-color-host-desktop: #f8f9fa; \n --lae-background-color-host-mobile: #f5f5f5;\n --lae-background-color-panel: #fff;\n --lae-background-color-header: #f5f5f5;\n --lae-background-color-button: #f0f0f0;\n --lae-background-color-button-hover: #e0e0e0;\n --lae-background-color-button-disabled: #eee;\n --lae-background-color-selected-item: #e9eff7; \n --lae-background-color-modal-header: #f5f5f5;\n --lae-background-color-error: #FFD2D2;\n --lae-background-color-rink-settings: #f9f9f9;\n\n --lae-border-color-light: #f0f0f0;\n --lae-border-color-medium: #ddd;\n --lae-border-color-dark: #ccc;\n --lae-border-color-error: #D8000C;\n --lae-border-color-rink-settings: #ccc; \n\n --lae-border-radius-standard: 4px;\n --lae-border-radius-large: 8px; \n --lae-border-radius-mobile-panel: 12px;\n\n --lae-shadow-mobile-panel: 0 2px 8px rgba(0,0,0,0.06);\n\n --lae-spacing-unit: 0.25rem;\n --lae-padding-xs: calc(1 * var(--lae-spacing-unit));\n --lae-padding-s: calc(2 * var(--lae-spacing-unit));\n --lae-padding-m: calc(4 * var(--lae-spacing-unit));\n --lae-padding-l: calc(6 * var(--lae-spacing-unit));\n\n /* --- Mappings for shared-styles.js --- */\n /* These ensure shared components adopt the admin theme */\n --le-padding-xs: var(--lae-padding-xs);\n --le-padding-s: var(--lae-padding-s);\n --le-padding-m: var(--lae-padding-m);\n \n --le-border-color-light: var(--lae-border-color-light);\n --le-border-color-medium: var(--lae-border-color-medium);\n --le-border-color-dark: var(--lae-border-color-dark);\n\n --le-text-color-primary: var(--lae-text-color-primary);\n --le-text-color-secondary: var(--lae-text-color-secondary);\n --le-text-color-on-primary: var(--lae-text-color-on-primary);\n\n --le-background-color-header: var(--lae-background-color-header);\n --le-background-color-panel: var(--lae-background-color-panel);\n --le-background-color-button: var(--lae-background-color-button);\n --le-background-color-button-hover: var(--lae-background-color-button-hover);\n --le-background-color-button-disabled: var(--lae-background-color-button-disabled);\n\n --le-border-radius-standard: var(--lae-border-radius-standard);\n \n --le-font-size-medium: var(--lae-font-size-medium);\n --le-font-size-small: var(--lae-font-size-small);\n /* --- End Mappings --- */\n\n --main-content-font-size: var(--lae-font-size-base-desktop); \n }\n .header { /* Main header for \"League Administration\" title. May not use panel-header-shared directly if it has very unique structure */\n font-weight: bold;\n background: var(--lae-background-color-header);\n padding: var(--lae-padding-s);\n border-bottom: 1px solid var(--lae-border-color-medium);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--lae-font-size-large); /* Specific to this main header */\n }\n .content-area {\n padding: var(--lae-padding-s) var(--lae-padding-xs);\n }\n .league-list-container {\n border-radius: var(--lae-border-radius-mobile-panel);\n box-shadow: var(--lae-shadow-mobile-panel);\n padding: var(--lae-padding-xs);\n }\n .column-leagues .panel-header-shared .action-buttons { /* For New/Copy buttons in Leagues header */\n display: flex; /* Ensure buttons are in a row */\n align-items: center;\n justify-content: flex-end; /* Align these buttons to the right */\n gap: var(--lae-padding-s); /* Space between New/Copy */\n margin-left: auto; /* Push this container to the right of \"Leagues\" text */\n }\n .league-list-item {\n padding: var(--lae-padding-s) var(--lae-padding-xs);\n /* flex-wrap: wrap; REMOVE - we want items on one line if possible */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid var(--lae-border-color-light); /* Keep border */\n }\n .league-list-item:last-child {\n border-bottom: none;\n }\n .league-name-text {\n font-size: var(--lae-font-size-medium);\n /* margin-bottom: var(--lae-padding-xs); REMOVE - no longer needed if side-by-side */\n /* flex-basis: 100%; REMOVE - allow it to size naturally / grow */\n flex-grow: 1; /* Allow name to take available space */\n margin-right: var(--lae-padding-s); /* Space before buttons */\n pointer-events: none;\n }\n .league-item-actions-container { /* For View Table/Actions on selected league */\n /* flex-basis: 100%; REMOVE - not needed if side-by-side */\n display: flex;\n justify-content: flex-end;\n gap: var(--lae-padding-s);\n /* margin-top: var(--lae-padding-xs); REMOVE - not needed if side-by-side */\n flex-shrink: 0; /* Prevent button container from shrinking */\n min-height: 32px; /* Reserve space for buttons */\n }\n .league-list-item.selected {\n background-color: var(--lae-background-color-selected-item, #e9eff7);\n font-weight: bold;\n }\n .league-list-item.selected .league-name-text {\n pointer-events: auto; /* Re-enable pointer events for selected text if needed, though likely not */\n }\n .league-action-button { /* These are small icon-like buttons, potentially keep specific styles or create a new shared variant */\n padding: var(--lae-padding-xs) var(--lae-padding-s); \n border: 1px solid var(--lae-border-color-dark);\n background-color: var(--lae-background-color-button);\n cursor: pointer;\n border-radius: var(--lae-border-radius-standard);\n font-size: var(--lae-font-size-small); \n }\n .league-action-button:hover {\n background-color: var(--lae-background-color-button-hover);\n }\n .league-action-dropdown .dropdown-content {\n min-width: 120px; \n }\n .action-buttons { /* Container for main action buttons */\n display: flex;\n gap: var(--lae-padding-s); \n flex-wrap: wrap; \n margin-bottom: var(--lae-padding-m);\n }\n /* .action-buttons button styles are covered by .button-shared class in template */\n /* .action-buttons button {\n padding: var(--lae-padding-s) var(--lae-padding-m);\n border: 1px solid var(--lae-border-color-medium);\n background-color: var(--lae-background-color-button);\n cursor: pointer;\n border-radius: var(--lae-border-radius-standard);\n font-size: var(--lae-font-size-medium);\n } */\n /* .action-buttons button:disabled {\n background-color: var(--lae-background-color-button-disabled);\n color: var(--lae-text-color-secondary);\n cursor: not-allowed;\n } */\n /* .action-buttons button:hover:not(:disabled) {\n background-color: var(--lae-background-color-button-hover);\n } */\n .modal {\n display: none; \n position: fixed; \n z-index: 1000; \n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto; \n background-color: rgba(0,0,0,0.4); \n }\n .modal-content {\n background-color: var(--lae-background-color-panel);\n margin: 10% auto; \n padding: var(--lae-padding-l);\n border: 1px solid var(--lae-border-color-dark);\n width: 80%; \n max-width: 600px; \n border-radius: var(--lae-border-radius-large);\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n }\n .modal-header { /* Uses .panel-header-shared in template but has overrides */\n /* padding, border-bottom, font-weight potentially from .panel-header-shared */\n background-color: var(--lae-background-color-modal-header);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--lae-font-size-large);\n /* Ensure shared padding is applied if not overridden by specificity */\n padding: var(--le-padding-s, 0.5em) var(--le-padding-m, 1em);\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n font-weight: bold;\n }\n .modal-body {\n padding: var(--lae-padding-m);\n }\n .modal-footer {\n padding: var(--lae-padding-s) var(--lae-padding-m);\n text-align: right;\n border-top: 1px solid var(--lae-border-color-medium);\n }\n .modal-footer button { /* Buttons inside use .button-shared from template */\n margin-left: var(--lae-padding-s); /* Keep specific margin */\n }\n .form-group {\n margin-bottom: var(--lae-padding-m);\n }\n .form-group label {\n display: block;\n margin-bottom: var(--lae-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%;