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%;\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    \n\n      :host {\n        background: var(--lae-background-color-host-mobile, #f5f5f5);\n        border: none;\n        border-radius: 0;\n        padding: var(--lae-padding-s);\n        min-height: 100vh;\n        font-size: var(--lae-font-size-base-mobile, 2em); /* Use mobile base font size */\n        --main-content-font-size: var(--lae-font-size-base-mobile, 2em); /* For children expecting this */\n      }\n      .columns { /* Main container for left/right columns */\n        display: flex;\n        flex-direction: column;\n        gap: var(--lae-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        padding: 0; /* Reset padding, let panels handle their own */\n      }\n      .dashboard { /* Mobile dashboard layout - This class seems unused, .columns is the primary */\n        display: flex;\n        flex-direction: column;\n        gap: 0;\n        width: 100%;\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      .resizer {\n        display: none !important;\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      .league-list-item {\n        padding: var(--lae-padding-s) var(--lae-padding-xs); /* Adjusted padding */\n        flex-wrap: wrap; \n      }\n      .league-name-text {\n        font-size: var(--lae-font-size-medium); /* Relative to host (now 2em based) */\n        margin-bottom: var(--lae-padding-xs);\n      }\n      .league-item-actions-container {\n        flex-basis: 100%; \n        justify-content: flex-end; \n        margin-top: var(--lae-padding-xs);\n        min-height: 32px; /* Reserve space for buttons */\n      }\n      .league-action-button { /* Smaller buttons in league list items */\n        padding: var(--lae-padding-xs) var(--lae-padding-s);\n        font-size: var(--lae-font-size-small); /* Relative to host */\n        min-height: 38px;\n      }\n      .league-action-dropdown .dropdown-content {\n        min-width: 140px;\n      }\n      .header { /* \"League Administration\" title in mobile */\n        font-size: var(--lae-font-size-large); /* Relative to host */\n        font-weight: bold;\n        padding: var(--lae-padding-s) var(--lae-padding-xs);\n        background: none;\n        border: none;\n        margin-bottom: var(--lae-padding-s);\n      }\n      .action-buttons { /* New, Copy etc. buttons container */\n        margin-bottom: var(--lae-padding-s);\n        gap: var(--lae-padding-s);\n      }\n      .action-buttons button { /* New, Copy etc. buttons */\n        min-height: 44px;\n        font-size: var(--lae-font-size-medium); /* Relative to host */\n        padding: var(--lae-padding-s) var(--lae-padding-m);\n        border-radius: var(--lae-border-radius-standard);\n        margin-bottom: var(--lae-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(--lae-border-radius-mobile-panel);\n        background: var(--lae-background-color-panel);\n        box-shadow: var(--lae-shadow-mobile-panel);\n        padding: var(--lae-padding-s) var(--lae-padding-m);\n        margin: 0 0 var(--lae-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-size: var(--lae-font-size-medium); /* Relative to host */\n        font-weight: bold;\n        margin-bottom: var(--lae-padding-s);\n        background: none; /* Keep transparent background */\n        border: none; /* Keep no border */\n        padding: var(--lae-padding-xs) 0;\n      }\n      .panel-header h4 {\n          margin-bottom: 0;\n          margin-right: auto; /* Push button to the right if h4 is used */\n      }\n      .panel-header button { /* Add Team button */\n        font-size: var(--lae-font-size-medium); /* Relative to host */\n        padding: var(--lae-padding-s) var(--lae-padding-m); /* Keep existing padding */\n        margin-top: 0; /* Remove top margin */\n        margin-left: var(--lae-padding-s); /* Add some left margin if needed, or rely on space-between */\n      }\n      \n      /* Team list item styling for mobile */\n      #teams-list li.team-item {\n        list-style-type: none; \n        display: flex;\n        flex-direction: column; \n        padding: var(--lae-padding-s) 0; \n        border-bottom: 1px solid var(--lae-border-color-light);\n      }\n      #teams-list li.team-item:last-child {\n        border-bottom: none;\n      }\n      #teams-list li.team-item .team-name {\n        margin-bottom: var(--lae-padding-s); \n        font-size: var(--lae-font-size-medium); \n      }\n      #teams-list li.team-item .team-actions {\n        display: flex;\n        justify-content: flex-end; \n        gap: var(--lae-padding-s);\n        min-height: 32px; /* Reserve space for buttons */\n      }\n      /* End of Team list item styling for mobile */\n\n      .team-name { /* General .team-name, may be overridden by more specific above */\n        font-size: var(--lae-font-size-medium); /* Relative to host */\n      }\n      .team-actions button { /* General .team-actions button, may be overridden */\n        font-size: var(--lae-font-size-small); /* Relative to host */\n      }\n\n      .match-item { /* For items within Matches panel in mobile */\n        font-size: var(--lae-font-size-medium); /* Relative to host */\n        padding: var(--lae-padding-s) var(--lae-padding-xs);\n      }\n      .match-date {\n        font-size: var(--lae-font-size-small); /* Relative to host */\n      }\n      .match-team { \n        font-size: var(--lae-font-size-medium);   /* Relative to host */\n      }\n      .match-score {\n        font-size: var(--lae-font-size-medium);   /* Relative to host */\n        padding: 0 var(--lae-padding-xs);\n      }\n      .match-status {\n        font-size: var(--lae-font-size-small); /* Relative to host */\n        align-self: center; \n      }\n      .team-item.selected-team { /* ADDED for mobile selection highlight */\n        background-color: var(--lae-background-color-selected-item, #e9eff7); \n        /* font-weight: bold; */\n      }\n    ";
export const DESKTOP_STYLES: "\n      \n      \n  .panel-header-shared {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border-bottom: 1px solid var(--le-border-color-medium, #eee);\n    font-weight: bold;\n    color: var(--le-text-color-primary, #333);\n    background-color: var(--le-background-color-header, #f9f9f9);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .panel-content-shared {\n    padding: var(--le-padding-m, 1.25em);\n    background-color: var(--le-background-color-panel, #fff);\n    /* Common border for content area if needed\n    border: 1px solid var(--le-border-color-light, #f0f0f0);\n    */\n  }\n   /* 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     /* Includes :host variables */\n      :host {\n         padding: var(--lae-padding-m);\n         height: 100%;\n         font-size: var(--lae-font-size-base-desktop); /* Set desktop base font size */\n         background-color: var(--lae-background-color-host-desktop);\n         --main-content-font-size: var(--lae-font-size-base-desktop); /* For children */\n      }\n      /* .dashboard, .left-panel, .right-panel, .resizer use variables defined in BASE_STYLES */\n      /* .panel and .panel-header in desktop will use variables from BASE_STYLES */\n      /* Specific overrides for desktop panel headers: */\n      .panel-header { \n        font-size: var(--lae-font-size-large); /* Larger for desktop panel titles */\n        flex-direction: row; \n        align-items: center; \n        background: var(--lae-background-color-header); \n        border-bottom: 1px solid var(--lae-border-color-medium); \n        padding: var(--lae-padding-s); \n      }\n      .panel-header h4 {\n          margin-bottom: 0;\n      }\n      .panel-header button { /* Add Team/Match on Desktop */\n        font-size: var(--lae-font-size-small); /* Smaller than main action buttons */\n        padding: var(--lae-padding-xs) var(--lae-padding-s);\n        margin-left: auto; /* Push to the right */\n      }\n\n      /* Team list item styling for desktop */\n      #teams-list li.team-item {  /* Using ID selector */\n        list-style-type: none; /* Remove bullets */\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: var(--lae-padding-xs) 0; /* Vertical padding, horizontal handled by parent */\n        border-bottom: 1px solid var(--lae-border-color-light); /* Add a separator line if desired */\n      }\n      #teams-list li.team-item:last-child { /* Using ID selector */\n        border-bottom: none; /* Remove border for the last item */\n      }\n      #teams-list li.team-item .team-name {  /* Using ID selector */\n        flex-grow: 1; \n        margin-right: var(--lae-padding-s); \n      }\n      #teams-list li.team-item .team-actions {  /* Using ID selector */\n        display: flex; /* Ensure buttons inside actions are also in a row */\n        gap: var(--lae-padding-s); \n        flex-shrink: 0; \n        min-height: 32px; /* Reserve space for buttons */\n      }\n      /* .team-actions button styles are covered by .button-shared.button-sm */\n      \n      .league-list-container {\n        flex-shrink: 0; \n        /* REMOVED max-height: 40%; */\n        /* REMOVED overflow-y: auto; */\n      }\n      .league-list-item.selected {\n        background-color: var(--lae-background-color-selected-item); \n      }\n      .league-item-actions-container {\n        flex-shrink: 0; \n        min-height: 32px; /* Reserve space for buttons */\n      }\n      .league-action-button { /* View Table, Actions buttons in league list for desktop */\n        font-size: var(--lae-font-size-small); /* Uses base style, already small */\n        padding: var(--lae-padding-xs) var(--lae-padding-s);\n      }\n      /* REMOVED: Override for desktop dropdown to open upwards */\n      /* .league-list-item .dropdown-content {\n        bottom: 100%; \n        top: auto; \n        right: 0; \n      } */\n      \n      .teams-list-container, .matches-list-container {\n        flex-grow: 1; \n        overflow-y: auto; \n        min-height: 100px; \n      }\n      .team-item.selected-team { /* ADDED for desktop selection highlight */\n        background-color: var(--lae-background-color-selected-item, #e9eff7); \n        /* font-weight: bold; /* Optionally make text bold */\n      }\n    ";
export const TEMPLATE_CONTENT: "\n          <div class=\"header\">\n      <div id=\"main-title\">League Administration</div>\n      <div class=\"header-actions\">\n      </div>\n            </div>\n            \n    <div id=\"error-message\" class=\"error\" style=\"display: none;\"></div>\n\n    <div class=\"content-area\">\n      <div class=\"columns\">\n        <div class=\"column column-leagues\">\n          <div class=\"panel\">\n            <div class=\"panel-header panel-header-shared\">\n              <span>Leagues</span>\n              <div class=\"action-buttons\"> \n                <button id=\"new-league-button\" class=\"button-shared\">New</button>\n                <button id=\"copy-league-button\" class=\"button-shared\" disabled>Copy</button>\n            </div>\n          </div>\n            <div class=\"league-list-container panel-content panel-content-shared\">\n              <ul class=\"league-list\" id=\"league-list-ul\"></ul>\n            </div>\n          </div>\n          <div class=\"action-buttons\"> \n             <!-- REMOVED update-league-button -->\n             <!-- REMOVED delete-league-button -->\n             <!-- REMOVED view-table-button -->\n            </div>\n            </div>\n\n        <div class=\"resizer\" id=\"resizer\"></div>\n\n        <div class=\"column column-details\">\n          <div id=\"teams-panel\" class=\"panel\" style=\"display:none;\">\n            <div class=\"panel-header panel-header-shared\"> \n              <span>Teams</span>\n              <button id=\"add-team-button\" class=\"button-shared\">Add Team</button>\n          </div>\n            <div id=\"teams-list\" class=\"panel-content panel-content-shared\"></div> \n              </div>\n\n          <!-- LeagueMatchesAttention moved here, directly under Teams panel -->\n          <div id=\"admin-matches-attention-container\" class=\"panel\" style=\"margin-bottom: var(--lae-padding-m);\">\n              <div class=\"panel-header panel-header-shared\">\n                <span>Requiring Attention</span>\n              </div>\n              <div class=\"panel-content panel-content-shared\">\n                <league-matches-attention id=\"admin-attention-matches\" data-league-id=\"\"></league-matches-attention>\n              </div>\n          </div>\n\n          <!-- REMOVED The entire matches-panel div -->\n          <!-- \n          <div id=\"matches-panel\" class=\"panel\" style=\"display:none;\">\n            <div class=\"panel-header panel-header-shared\"> \n              <span>Matches</span>\n              <button id=\"add-match-button\" class=\"button-shared\">Add Match</button>\n            </div>\n            <div id=\"matches-list\" class=\"panel-content panel-content-shared\"></div> \n          </div>\n          -->\n\n        </div>\n      </div>\n          </div>\n      \n    <!-- Global League Actions Menu -->\n    <div id=\"league-actions-global-menu\" class=\"dropdown-content\" style=\"display: none; position: fixed; z-index: 1001;\">\n        <!-- Content will be populated by JS -->\n      </div>\n      \n    <!-- Modal for New/Edit League -->\n    <div id=\"league-modal\" class=\"modal-shared-overlay\">\n        <div class=\"modal-shared-content\">\n        <div class=\"modal-shared-header\">\n          <span id=\"league-modal-title\">New League</span>\n          <span class=\"close-button close-button-shared\" id=\"close-league-modal\">&times;</span>\n          </div>\n        <div class=\"modal-shared-body\" id=\"league-modal-body\">\n          <!-- Form content will be injected here by JS -->\n          </div>\n          <div class=\"modal-shared-footer\">\n          <button id=\"save-league-button\" class=\"button-shared\">Save</button>\n          <button id=\"cancel-league-button\" class=\"button-shared\">Cancel</button>\n          </div>\n        </div>\n      </div>\n      \n    <!-- Modal for New/Edit Team -->\n    <div id=\"team-modal\" class=\"modal-shared-overlay\">\n        <div class=\"modal-shared-content\">\n            <div class=\"modal-shared-header\">\n                <span id=\"team-modal-title\">Add Team</span>\n                <span class=\"close-button close-button-shared\" id=\"close-team-modal\">&times;</span>\n          </div>\n            <div class=\"modal-shared-body\" id=\"team-modal-body\">\n                <!-- Form content will be injected by JS -->\n          </div>\n          <div class=\"modal-shared-footer\">\n                <button id=\"save-team-button\" class=\"button-shared\">Save</button>\n                <button id=\"cancel-team-button\" class=\"button-shared\">Cancel</button>\n          </div>\n        </div>\n      </div>\n\n    <!-- Modal for Add/Edit Match -->\n    <league-match id=\"match-modal-instance\" is-admin-context=\"true\"></league-match>\n    ";
//# sourceMappingURL=LeadueAdminElement-styles.d.ts.map