@lovebowls/leagueelements/dist/elements/leagueAdminElement/LeagueAdminElement-styles.d.ts

League Elements package for LoveBowls

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