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\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\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\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\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\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\n      \n      :host {\n        display: block;\n        border: 1px solid var(--le-border-color-medium, #ccc); \n        border-radius: var(--le-border-radius-standard, 4px); \n        font-family: var(--le-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif); \n        box-sizing: border-box;\n        color: var(--le-text-color-primary, #333); \n\n        /* THEME VARIABLES */\n        --le-font-family-main: 'Open Sans', Helvetica, Arial, sans-serif;\n\n        --le-text-color-primary: #333;\n        --le-text-color-secondary: #666;\n        --le-text-color-accent: #2196f3;\n        --le-text-color-accent-hover: #1976d2;\n        --le-text-color-error: #ff0000; /* General text error */\n        --le-text-color-on-primary: #fff; /* Text on primary color background */\n        --le-text-color-on-accent: #fff; /* Text on accent color background */\n\n        /* Status Colors */\n        --le-color-status-warning: #f39c12; /* Orange for general warnings, future results */\n        --le-color-status-conflict: #e67e22; /* Darker Orange/Brown for scheduling conflicts */\n        --le-color-status-pending: #e74c3c; /* Reddish for pending results (past due) */\n        --le-color-status-info: #2196f3;    /* Blue for informational, like no date set */\n        --le-color-status-success: #4CAF50; /* Green for success, already used by form-w */\n\n        --le-background-color-host: #fff; /* Default host background */\n        --le-background-color-panel: #fff;\n        --le-background-color-header: #f5f5f5;\n        --le-background-color-row-hover: #f9f9f9;\n        --le-background-color-error: #fff0f0;\n        --le-background-color-tooltip: #333;\n        --le-background-color-promotion: rgb(102, 212, 128);\n        --le-background-color-relegation: #f8d7da;\n        --le-background-color-default-pos: #f0f0f0;\n        --le-background-color-button: #f0f0f0;\n        --le-background-color-button-hover: #e0e0e0;\n        \n        --le-border-color-light: #eee;\n        --le-border-color-medium: #ddd;\n        --le-border-color-dark: #ccc; /* For main host border */\n        --le-border-color-accent: #2196f3;\n\n        --le-border-radius-standard: 4px;\n        --le-border-radius-small: 3px;\n        --le-border-radius-mobile-panel: 12px;\n\n        --le-spacing-unit: 0.25rem;\n        --le-padding-xs: calc(1 * var(--le-spacing-unit)); /* 0.25rem */\n        --le-padding-s: calc(2 * var(--le-spacing-unit));  /* 0.5rem */\n        --le-padding-m: calc(4 * var(--le-spacing-unit)); /* 1rem */\n        --le-padding-l: calc(6 * var(--le-spacing-unit));  /* 1.5rem */\n\n        --le-shadow-mobile-panel: 0 2px 8px rgba(0,0,0,0.06);\n\n        /* Specifics */\n        --le-table-header-background: var(--le-background-color-header);\n        --le-tab-text-color: var(--le-text-color-secondary);\n        --le-tab-text-color-hover: var(--le-text-color-primary);\n        --le-tab-border-color-active: var(--le-text-color-accent);\n        \n        /* Form icon colors (could be themed further if needed) */\n        --le-form-color-w: #4CAF50;\n        --le-form-color-d: #FFC107;\n        --le-form-color-l: #F44336;\n\n        /* Rank movement colors */\n        --le-rank-up-color: green;\n        --le-rank-down-color: red;\n      }\n      .title {\n        font-weight: bold;\n        background: var(--le-background-color-header); \n        border-bottom: 1px solid var(--le-border-color-medium); \n      }\n      .settings-icon {\n        cursor: pointer;\n        color: var(--le-text-color-secondary); \n        margin-left: auto;\n        padding: var(--le-padding-xs) var(--le-padding-m); \n        transition: color 0.2s;\n        font-size: var(--le-font-size-large); \n      }\n      .settings-icon:hover {\n        color: var(--le-text-color-accent); \n      }\n      .content {\n        color: var(--le-text-color-secondary); \n        overflow-x: auto;\n      }\n      table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      th, td {\n        text-align: left;\n        border-bottom: 1px solid var(--le-border-color-medium); \n        font-size: var(--le-font-size-base); \n      }\n      th:not(:first-child),\n      td:not(:first-child) {\n        text-align: center;\n      }\n      th {\n        background-color: var(--le-table-header-background); \n        position: sticky;\n        top: 0;\n      }\n      .form-cell {\n        white-space: nowrap;\n      }\n      .form-icon {\n        display: inline-block;\n        width: 5px; \n        height: 12px;\n        margin: 0 1px 0 1px;\n        vertical-align: middle;\n        min-width: 0;\n        padding: 0;\n        border: 0;\n        box-sizing: border-box;\n      }\n      .form-w { background-color: var(--le-form-color-w); } \n      .form-d { background-color: var(--le-form-color-d); } \n      .form-l { background-color: var(--le-form-color-l); } \n\n      .error {\n        color: var(--le-text-color-error); \n        padding: var(--le-padding-s); \n        background-color: var(--le-background-color-error); \n        border-radius: var(--le-border-radius-standard); \n      }\n      .match-link {\n        color: var(--le-text-color-accent); \n        text-decoration: none;\n        transition: color 0.2s;\n      }\n      .match-link:hover {\n        color: var(--le-text-color-accent-hover); \n        text-decoration: underline;\n      }\n      .match-item {\n        padding: var(--le-padding-s); /* MODIFIED - Default/Desktop padding */\n        border-bottom: 1px solid var(--le-border-color-light); \n        font-size: var(--le-font-size-base); \n      }\n      .match-item:last-child {\n        border-bottom: none;\n      }\n      .match-date {\n        color: var(--le-text-color-secondary); \n        font-size: var(--le-font-size-medium);\n        margin-bottom: var(--le-padding-xs); \n      }      \n\n      /* Schedule Styles - Layout-agnostic properties only */\n      .schedule-container {\n        overflow: auto; /* For scrolling */\n        padding: var(--le-padding-xs);\n        height: 100%;\n        flex: 1;\n      }\n      \n      /* Matrix Styles - Layout-agnostic properties only */\n      .matrix-container {\n        overflow: auto; /* For scrolling */\n        padding: var(--le-padding-xs); \n        flex: 1;\n      }\n      .matrix-grid {\n        border: 1px solid var(--le-border-color-dark); \n      }\n      .matrix-cell {\n        border: 1px solid var(--le-border-color-light); \n        aspect-ratio: 1 / 1;\n        position: relative;\n        font-size: var(--le-font-size-base); \n        box-sizing: border-box;\n      }\n      .matrix-header-cell {\n        font-weight: bold;\n        background-color: var(--le-background-color-header); \n      }\n      .matrix-team-name-x {\n        transform: rotate(-45deg);\n        transform-origin: center center;\n        display: inline-block;\n        white-space: normal;\n        word-break: break-word;\n        hyphens: auto;\n        font-size: var(--le-font-size-small);\n      }\n      .matrix-team-name-y {\n        text-align: right;\n        padding-right: var(--le-padding-s); \n        font-size: var(--le-font-size-small); \n        width: 100%;\n      }\n      .matrix-cell-played { background-color: #e3f2fd; color: var(--le-text-color-accent-hover); } \n      .matrix-cell-scheduled { background-color: #e8f5e9; color: #2e7d32; } \n      .matrix-cell-none { \n        background-color: var(--le-background-color-panel);\n        position: relative;\n      }\n      .matrix-cell-none .add-match-icon {\n        color: var(--le-border-color-dark);\n        font-size: var(--le-font-size-medium);\n        opacity: 0.6;\n        transition: opacity 0.2s ease-in-out;\n      }\n      .matrix-cell-none:hover .add-match-icon {\n        opacity: 1;\n        color: var(--le-text-color-accent);\n      }\n      .matrix-cell-same-team { \n        background-color: var(--le-border-color-light);\n        position: relative;\n        overflow: hidden;\n      } \n      .matrix-cell-same-team::before,\n      .matrix-cell-same-team::after {\n        content: '';\n        position: absolute;\n        background-color: var(--le-border-color-dark);\n        width: 1px;\n        height: 141%; /* √2 * 100% to cover the diagonal */\n        top: 50%;\n        left: 50%;\n      }\n      .matrix-cell-same-team::before {\n        transform: translate(-50%, -50%) rotate(45deg);\n      }\n      .matrix-cell-same-team::after {\n        transform: translate(-50%, -50%) rotate(-45deg);\n      }\n      /* Apply hover effect only to interactive cells */\n      .matrix-cell:not(.matrix-cell-same-team):hover {\n        filter: brightness(0.95);\n      }\n      .matrix-score {\n        font-size: var(--le-font-size-base); \n        font-weight: bold;\n      }\n\n      /* Tooltip Styles */\n      .tooltip {\n        position: absolute;\n        background-color: var(--le-background-color-tooltip); \n        color: var(--le-text-color-on-primary); \n        padding: var(--le-padding-xs) var(--le-padding-s); \n        border-radius: var(--le-border-radius-small); \n        font-size: var(--le-font-size-small); \n        white-space: nowrap;\n        z-index: 10;\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity 0.2s, visibility 0.2s;\n        bottom: 100%; \n        left: 50%;\n        transform: translateX(-50%) translateY(-5px); \n      }\n      .matrix-cell:hover .tooltip {\n        visibility: visible;\n        opacity: 1;\n      }\n\n      /* Trends View Styles - Layout-agnostic properties only */\n      .trends-view-wrapper {\n        padding: var(--le-padding-xs); \n        height: 100%;\n        box-sizing: border-box;\n      }\n      .trends-controls {\n        gap: var(--le-padding-s, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n      }\n      \n      /* Enhanced dropdown styling for trends controls button-like appearance */\n      .trends-controls .dropdown-shared {\n        position: relative;\n        display: inline-block;\n      }\n      \n      .trends-controls .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: 0 var(--le-padding-s, 0.5rem);\n        font-size: var(--le-font-size-dropdown, var(--le-font-size-medium, 1em));\n        color: var(--le-text-color-primary, #333);\n        cursor: pointer;\n        line-height: 1.4;\n        min-width: 160px;\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.75rem center;\n        background-size: 1rem;\n        transition: all 0.2s ease;\n        font-weight: 500;\n      }\n      \n      .trends-controls .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      .trends-controls .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      .trends-controls .dropdown-select-shared:active {\n        background-color: var(--le-background-color-button-hover, #e0e0e0);\n        transform: translateY(1px);\n      }\n      \n      .trends-content-area {\n        gap: var(--le-padding-m); \n        min-height: 0; \n      }\n      .trends-graph-area {\n        border: 1px solid var(--le-border-color-medium); \n        border-radius: var(--le-border-radius-small); \n        overflow: hidden; \n        position: relative; \n      }\n      .trends-graph-area svg {\n        display: block; \n        width: 100%;\n        height: 100%;\n      }\n      .trends-graph-legend {\n        padding: var(--le-padding-s); \n        border: 1px solid var(--le-border-color-light); \n        border-radius: var(--le-border-radius-small); \n        font-size: var(--le-font-size-small); \n      }\n      .trends-graph-legend .legend-item {\n        margin-bottom: var(--le-padding-xs); \n      }\n      .trends-graph-legend .legend-color-box {\n        width: 12px;\n        height: 12px;\n        margin-right: var(--le-padding-s); \n        border: 1px solid var(--le-border-color-dark); \n      }\n\n      .trends-graph-area .axis path,\n      .trends-graph-area .axis line {\n        fill: none;\n        stroke: var(--le-text-color-secondary); \n        shape-rendering: crispEdges;\n      }\n      .trends-graph-area .axis text {\n        font-size: calc(var(--le-font-size-small) * 0.9); \n        fill: var(--le-text-color-primary); \n      }\n      .trends-graph-area .line {\n        fill: none;\n        stroke-width: 2px;\n      }\n      .trends-graph-area .grid-line {\n        stroke: var(--le-border-color-light); \n        stroke-dasharray: 2,2;\n        shape-rendering: crispEdges;\n      }\n\n      /* Scatter plot specific styles */\n      .trends-graph-area .scatter-point {\n        cursor: pointer;\n        transition: r 0.2s ease;\n      }\n      .trends-graph-area .scatter-point:hover {\n        filter: brightness(1.2);\n      }\n      .trends-graph-area .scatter-tooltip {\n        pointer-events: none;\n        font-size: calc(var(--le-font-size-small) * 0.9);\n        fill: var(--le-text-color-primary);\n        text-shadow: 1px 1px 2px rgba(255,255,255,0.8);\n        paint-order: stroke fill;\n        stroke: rgba(255,255,255,0.8);\n        stroke-width: 3px;\n        stroke-linejoin: round;\n        stroke-linecap: round;\n      }\n      .trends-graph-area .axis-label {\n        font-size: var(--le-font-size-small);\n        fill: var(--le-text-color-primary);\n        font-weight: bold;\n      }\n\n      /* Position cell styles */\n      td.position-cell {\n        text-align: left;\n        width: 30px; \n        min-width: 30px; \n        max-width: 30px; \n        position: relative; \n        padding-right: 5px; \n      }\n      .position-cell .rank-up,\n      .position-cell .rank-down {\n        display: inline-block;\n        position: absolute; \n        right: 5px; \n        top: 50%; \n        transform: translateY(-50%); \n        margin-left: var(--le-padding-xs, 0.25rem); \n        font-size: var(--le-font-size-xs); \n        line-height: 1; \n      }\n      .rank-up {\n        color: var(--le-rank-up-color);\n      }\n      .rank-down {\n        color: var(--le-rank-down-color);\n      }\n      .pos-cell-promotion {\n        background-color: var(--le-background-color-promotion); \n        color: var(--le-text-color-on-primary); \n        font-weight: bold;\n      }\n      .pos-cell-relegation {\n        background-color: var(--le-background-color-relegation); \n        color: #721c24; \n        font-weight: bold;\n      }\n      .pos-cell-default {\n        background-color: var(--le-background-color-default-pos); \n        color: var(--le-text-color-primary); \n        border: 1px solid var(--le-border-color-light); \n      }\n    \n      :host {\n        padding: var(--le-padding-s); \n        background: var(--le-background-color-host); \n        border: none;\n        border-radius: 0;\n      }\n      \n      /* Mobile-specific dropdown adjustments */\n      .dropdown-select-shared {\n        /* font-size now inherited from shared mobile styles */\n        padding: 0.3rem 2rem 0.3rem 0.5rem;\n      }\n      \n      /* Mobile-specific layout styles */\n      .tab-bar {\n        display: flex;\n        flex-wrap: wrap; /* Allow tabs to wrap to next line */\n        gap: var(--le-padding-xs); /* Small gap between tabs */\n        padding: var(--le-padding-xs); /* Add padding around the tab bar */\n        border-bottom: 1px solid var(--le-border-color-medium);\n        overflow-x: auto; /* Allow horizontal scrolling as fallback */\n        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */\n      }\n      \n      /* Mobile tab button styling */\n      .tab-bar .tab-button {\n        flex: 1 1 auto; /* Allow flexible sizing */\n        min-width: 70px; /* Minimum width to prevent too small buttons */\n        max-width: 120px; /* Maximum width to allow more tabs per row */\n        padding: var(--le-padding-s) var(--le-padding-xs); /* Adjusted padding for mobile */\n        font-size: var(--le-font-size-small); /* Smaller font for mobile */\n        text-align: center;\n        white-space: nowrap; /* Prevent text wrapping within buttons */\n        border-radius: var(--le-border-radius-small);\n        margin: 0; /* Remove any default margins */\n        border: 1px solid var(--le-border-color-medium);\n        background: var(--le-background-color-button);\n        color: var(--le-text-color-secondary);\n        cursor: pointer;\n        transition: all 0.2s ease;\n        user-select: none;\n        /* Ensure good touch targets */\n        min-height: 44px; /* iOS recommended minimum touch target */\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      \n      .tab-bar .tab-button:hover {\n        background: var(--le-background-color-button-hover);\n        color: var(--le-text-color-primary);\n      }\n      \n      .tab-bar .tab-button.active {\n        background: var(--le-background-color-panel);\n        color: var(--le-text-color-primary);\n        font-weight: 600;\n        border-color: var(--le-text-color-accent);\n      }\n\n      .view-container {\n        flex: 1; \n        display: flex; \n        flex-direction: column;\n        min-height: 0; \n      }\n      .trends-view-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: var(--le-padding-m); \n        height: 100vh; /* Use full viewport height for mobile */\n        max-height: calc(100vh - 200px); /* Account for other UI elements */\n      }\n      .trends-controls {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0; /* Prevent controls from shrinking */\n      }\n      .trends-content-area {\n        flex: 1; \n        display: flex;\n        flex-direction: column; \n        min-height: 400px; /* Minimum height for readability */\n      }\n      .trends-graph-area {\n        flex: 2; /* Give graph more space relative to legend */\n        min-height: 250px; /* Minimum height for graph readability */\n      }\n      \n      /* Mobile-specific responsive legend layout */\n      .trends-graph-legend {\n        flex-shrink: 0; /* Prevent legend from shrinking too much */\n        display: grid;\n        grid-template-columns: 1fr 1fr; /* 2 columns for mobile as requested */\n        gap: var(--le-padding-xs);\n        column-gap: var(--le-padding-s);\n      }\n      \n      .trends-graph-legend .legend-item {\n        display: flex;\n        align-items: center;\n        margin-bottom: var(--le-padding-s); /* Increased spacing for touch */\n        padding: var(--le-padding-xs);\n        border-radius: var(--le-border-radius-small);\n        transition: background-color 0.2s ease;\n      }\n      \n      .trends-graph-legend .legend-item:hover {\n        background-color: var(--le-background-color-row-hover, #f9f9f9);\n      }\n      \n      /* Enhanced checkbox styling for mobile trends legend */\n      .trends-graph-legend .legend-item input[type=\"checkbox\"] {\n        width: 1.5em;\n        height: 1.5em;\n        margin-right: var(--le-padding-s);\n        cursor: pointer;\n        transform: scale(1.2); /* Make checkboxes larger for mobile */\n      }\n      \n      .trends-graph-legend .legend-color-box {\n        width: 1em;\n        height: 1em;\n        margin-right: var(--le-padding-xs);\n        border: 1px solid var(--le-border-color-dark);\n        flex-shrink: 0; /* Prevent color box from shrinking */\n      }\n      .title-with-filter {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: 10px;\n      }\n      \n      .controls-panel {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        width: 100%;\n      }\n      \n      .filter-controls {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        flex: 1;\n        justify-content: space-between;\n      }\n      .matrix-grid {\n        display: grid;\n      }\n      .matrix-cell {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }    \n      /* Matrix specific mobile adjustments*/\n      .matrix-container { \n        overflow-x: auto;\n        width: 100%;\n        padding-bottom: 10px; /* Space for scrollbar */\n      }\n      \n      /* Use table layout instead of grid for mobile */\n      .matrix-table {\n        border-collapse: collapse;\n        width: auto;\n        min-width: max-content;\n      }\n      \n      .matrix-table td {\n        height: 50px;\n        min-width: 60px;\n        width: 60px;\n        padding: 4px;\n        text-align: center;\n        vertical-align: middle;\n        border: 1px solid var(--le-border-color-light);\n        font-size: var(--le-font-size-small);\n        position: relative;\n      }\n      \n      .matrix-table th {\n        background-color: var(--le-background-color-header);\n        font-weight: bold;\n        border: 1px solid var(--le-border-color-light);\n        word-break: break-word;\n        hyphens: auto;\n        font-size: var(--le-font-size-small);\n      }\n      \n      .matrix-table th:first-child {\n        background-color: transparent;\n        border: none;\n        min-width: 150px; /* Much wider first column for team names */\n        width: 150px;\n      }\n      \n      .matrix-table th.top-header {\n        height: 120px; /* Taller top header for vertical text */\n        min-width: 60px;\n        width: 60px;\n        position: relative;\n        padding: 0;\n        vertical-align: bottom;\n      }\n      \n      /* Vertical text in top header */\n      .matrix-table th.top-header .vertical-text {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 120px;\n        display: flex;\n        justify-content: center;\n        align-items: flex-end;\n        padding-bottom: 10px;\n        writing-mode: vertical-rl;\n        transform: rotate(180deg);\n        text-orientation: mixed;\n        font-size: var(--le-font-size-small);\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-word;\n        max-height: 110px; /* Allow space for wrapping but prevent overflow */\n      }\n      \n      .matrix-table th.row-header {\n        height: auto; /* Allow height to expand with wrapped content */\n        min-height: 50px;\n        max-height: 80px; /* Limit maximum height */\n        text-align: right;\n        padding: 8px 10px 8px 5px;\n        vertical-align: middle;\n        line-height: 1.2;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-word;\n        white-space: normal; /* Allow text to wrap */\n      }\n      \n      .matrix-cell-played { \n        background-color: #e3f2fd; \n        font-weight: bold;\n      }\n      \n      .matrix-cell-scheduled { \n        background-color: #e8f5e9; \n      }\n      \n      .matrix-cell-same { \n        background-color: var(--le-border-color-light);\n        position: relative;\n      }\n      \n      .matrix-cell-same::before,\n      .matrix-cell-same::after {\n        content: '';\n        position: absolute;\n        background-color: var(--le-border-color-dark);\n        width: 1px;\n        height: 70px;\n        top: -10px;\n        left: 50%;\n      }\n      \n      .matrix-cell-same::before {\n        transform: rotate(45deg);\n      }\n      \n      .matrix-cell-same::after {\n        transform: rotate(-45deg);\n      }\n      \n      .matrix-cell-none { \n        background-color: var(--le-background-color-panel);\n      }\n      \n      .matrix-score {\n        font-size: var(--le-font-size-medium);\n        font-weight: bold;\n      }\n      \n      .add-match-icon {\n        opacity: 0.6;\n        font-size: var(--le-font-size-medium);\n      }\n      \n      /* Rest of mobile styles remain unchanged */\n      .dashboard-mobile {\n        display: flex;\n        flex-direction: column;\n        gap: var(--le-padding-m); \n      }\n      .left-panel { /* In mobile, this is the main content container */\n        border: none;\n        border-radius: 0;\n        background: none;\n        padding: 0;\n        margin: 0;\n      }\n\n      /* Rest of mobile styles remain unchanged */\n      .panel { /* This applies to attention panels in mobile */\n        border: none;\n        border-radius: var(--le-border-radius-mobile-panel, 12px); \n        background: var(--le-background-color-panel); \n        box-shadow: var(--le-shadow-mobile-panel, 0 2px 8px rgba(0,0,0,0.06));\n        padding: 0; \n        margin: 0 0 var(--le-padding-m) 0;\n        width: 100%;\n        box-sizing: border-box;\n        display: block;\n      }\n\n      \n      .panel-content {\n        padding: 0 var(--le-padding-s) var(--le-padding-s);\n      }\n      .title { /* Title within the left-panel (table/matrix/trends view) */\n        font-size: var(--le-font-size-large); \n        margin-bottom: var(--le-padding-s); \n        padding: var(--le-padding-s) 0 var(--le-padding-s) 0; \n      }\n      .settings-icon {\n        font-size: var(--le-font-size-large); /* Match mobile title size */\n        padding: var(--le-padding-s) var(--le-padding-s); /* Increased touch target */\n      }\n      .content { /* Content area for table/matrix/trends */\n        padding: 0;\n      }\n      table {\n        width: 100%;\n        max-width: 100%;\n        margin: 0;\n        border-collapse: collapse;\n      }\n      th, td {\n        padding: var(--le-padding-s) var(--le-padding-xs); /* Adjusted padding */\n        font-size: var(--le-font-size-table-cell);\n      }\n      th:nth-child(2), \n      td:nth-child(2) {\n        text-align: left; \n      }\n      th:nth-child(3),\n      td:nth-child(3) {\n        font-weight: bold;\n      }\n\n      .match-item { /* For items within Attention */\n        padding: var(--le-padding-s) var(--le-padding-s); /* Increased padding */\n      }\n      .match-score { /* This seems to be for a different component, but if used here */\n        color: var(--le-form-color-w); /* MODIFIED (using win color for general score) */\n        font-weight: bold;\n      }\n      /* Make form icons more visible */\n      .form-icon {\n        display: inline-block;\n        width: 8px; /* Increased size */\n        height: 16px; /* Increased size */\n        margin: 0 4px 0 0;\n      }\n\n      /* Mobile-specific position cell adjustments */\n      td.position-cell {\n        width: 30px; /* Slightly wider on mobile for touch targets */\n        min-width: 30px; \n        max-width: 30px; \n      }\n      .position-cell .rank-up,\n      .position-cell .rank-down {\n        right: 4px; \n        font-size: var(--le-font-size-xs);\n      }\n\n      /* Mobile-specific trends controls dropdown styling */\n      .trends-controls .dropdown-shared {\n        width: 100%;\n      }\n      \n      .trends-controls .dropdown-select-shared {\n        width: 100%;\n        padding: var(--le-padding-s, 0.75rem) calc(var(--le-padding-m, 1rem) * 2.5) var(--le-padding-s, 0.75rem) var(--le-padding-m, 1rem);\n        font-size: var(--le-font-size-medium, 1.2em);\n        min-height: 44px; /* Minimum touch target size */\n        background-size: 1.2rem;\n        background-position: right 1rem center;\n        border-width: 2px;\n      }\n      \n      .trends-controls .dropdown-select-shared:focus {\n        border-width: 2px;\n      }\n\n      /* Hide SF and SA columns on mobile screens */\n      @media (max-width: 1000px) {\n        /* Hide SF (Shots For) - 8th column */\n        th:nth-child(8),\n        td:nth-child(8) {\n          display: none;\n        }\n        \n        /* Hide SA (Shots Against) - 9th column */\n        th:nth-child(9),\n        td:nth-child(9) {\n          display: none;\n        }\n      }\n      \n      /* Extra small screens - even more compact tabs */\n      @media (max-width: 400px) {\n        .tab-bar .tab-button {\n          min-width: 60px; /* Even smaller minimum width */\n          max-width: 90px; /* Smaller maximum width */\n          padding: var(--le-padding-xs) 2px; /* Tighter padding */\n          font-size: calc(var(--le-font-size-small) * 0.9); /* Slightly smaller font */\n        }\n        \n\n        \n        .tab-bar {\n          padding: 2px; /* Tighter padding around tab bar */\n        }\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\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\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\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\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\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\n      \n      :host {\n        display: block;\n        border: 1px solid var(--le-border-color-medium, #ccc); \n        border-radius: var(--le-border-radius-standard, 4px); \n        font-family: var(--le-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif); \n        box-sizing: border-box;\n        color: var(--le-text-color-primary, #333); \n\n        /* THEME VARIABLES */\n        --le-font-family-main: 'Open Sans', Helvetica, Arial, sans-serif;\n\n        --le-text-color-primary: #333;\n        --le-text-color-secondary: #666;\n        --le-text-color-accent: #2196f3;\n        --le-text-color-accent-hover: #1976d2;\n        --le-text-color-error: #ff0000; /* General text error */\n        --le-text-color-on-primary: #fff; /* Text on primary color background */\n        --le-text-color-on-accent: #fff; /* Text on accent color background */\n\n        /* Status Colors */\n        --le-color-status-warning: #f39c12; /* Orange for general warnings, future results */\n        --le-color-status-conflict: #e67e22; /* Darker Orange/Brown for scheduling conflicts */\n        --le-color-status-pending: #e74c3c; /* Reddish for pending results (past due) */\n        --le-color-status-info: #2196f3;    /* Blue for informational, like no date set */\n        --le-color-status-success: #4CAF50; /* Green for success, already used by form-w */\n\n        --le-background-color-host: #fff; /* Default host background */\n        --le-background-color-panel: #fff;\n        --le-background-color-header: #f5f5f5;\n        --le-background-color-row-hover: #f9f9f9;\n        --le-background-color-error: #fff0f0;\n        --le-background-color-tooltip: #333;\n        --le-background-color-promotion: rgb(102, 212, 128);\n        --le-background-color-relegation: #f8d7da;\n        --le-background-color-default-pos: #f0f0f0;\n        --le-background-color-button: #f0f0f0;\n        --le-background-color-button-hover: #e0e0e0;\n        \n        --le-border-color-light: #eee;\n        --le-border-color-medium: #ddd;\n        --le-border-color-dark: #ccc; /* For main host border */\n        --le-border-color-accent: #2196f3;\n\n        --le-border-radius-standard: 4px;\n        --le-border-radius-small: 3px;\n        --le-border-radius-mobile-panel: 12px;\n\n        --le-spacing-unit: 0.25rem;\n        --le-padding-xs: calc(1 * var(--le-spacing-unit)); /* 0.25rem */\n        --le-padding-s: calc(2 * var(--le-spacing-unit));  /* 0.5rem */\n        --le-padding-m: calc(4 * var(--le-spacing-unit)); /* 1rem */\n        --le-padding-l: calc(6 * var(--le-spacing-unit));  /* 1.5rem */\n\n        --le-shadow-mobile-panel: 0 2px 8px rgba(0,0,0,0.06);\n\n        /* Specifics */\n        --le-table-header-background: var(--le-background-color-header);\n        --le-tab-text-color: var(--le-text-color-secondary);\n        --le-tab-text-color-hover: var(--le-text-color-primary);\n        --le-tab-border-color-active: var(--le-text-color-accent);\n        \n        /* Form icon colors (could be themed further if needed) */\n        --le-form-color-w: #4CAF50;\n        --le-form-color-d: #FFC107;\n        --le-form-color-l: #F44336;\n\n        /* Rank movement colors */\n        --le-rank-up-color: green;\n        --le-rank-down-color: red;\n      }\n      .title {\n        font-weight: bold;\n        background: var(--le-background-color-header); \n        border-bottom: 1px solid var(--le-border-color-medium); \n      }\n      .settings-icon {\n        cursor: pointer;\n        color: var(--le-text-color-secondary); \n        margin-left: auto;\n        padding: var(--le-padding-xs) var(--le-padding-m); \n        transition: color 0.2s;\n        font-size: var(--le-font-size-large); \n      }\n      .settings-icon:hover {\n        color: var(--le-text-color-accent); \n      }\n      .content {\n        color: var(--le-text-color-secondary); \n        overflow-x: auto;\n      }\n      table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      th, td {\n        text-align: left;\n        border-bottom: 1px solid var(--le-border-color-medium); \n        font-size: var(--le-font-size-base); \n      }\n      th:not(:first-child),\n      td:not(:first-child) {\n        text-align: center;\n      }\n      th {\n        background-color: var(--le-table-header-background); \n        position: sticky;\n        top: 0;\n      }\n      .form-cell {\n        white-space: nowrap;\n      }\n      .form-icon {\n        display: inline-block;\n        width: 5px; \n        height: 12px;\n        margin: 0 1px 0 1px;\n        vertical-align: middle;\n        min-width: 0;\n        padding: 0;\n        border: 0;\n        box-sizing: border-box;\n      }\n      .form-w { background-color: var(--le-form-color-w); } \n      .form-d { background-color: var(--le-form-color-d); } \n      .form-l { background-color: var(--le-form-color-l); } \n\n      .error {\n        color: var(--le-text-color-error); \n        padding: var(--le-padding-s); \n        background-color: var(--le-background-color-error); \n        border-radius: var(--le-border-radius-standard); \n      }\n      .match-link {\n        color: var(--le-text-color-accent); \n        text-decoration: none;\n        transition: color 0.2s;\n      }\n      .match-link:hover {\n        color: var(--le-text-color-accent-hover); \n        text-decoration: underline;\n      }\n      .match-item {\n        padding: var(--le-padding-s); /* MODIFIED - Default/Desktop padding */\n        border-bottom: 1px solid var(--le-border-color-light); \n        font-size: var(--le-font-size-base); \n      }\n      .match-item:last-child {\n        border-bottom: none;\n      }\n      .match-date {\n        color: var(--le-text-color-secondary); \n        font-size: var(--le-font-size-medium);\n        margin-bottom: var(--le-padding-xs); \n      }      \n\n      /* Schedule Styles - Layout-agnostic properties only */\n      .schedule-container {\n        overflow: auto; /* For scrolling */\n        padding: var(--le-padding-xs);\n        height: 100%;\n        flex: 1;\n      }\n      \n      /* Matrix Styles - Layout-agnostic properties only */\n      .matrix-container {\n        overflow: auto; /* For scrolling */\n        padding: var(--le-padding-xs); \n        flex: 1;\n      }\n      .matrix-grid {\n        border: 1px solid var(--le-border-color-dark); \n      }\n      .matrix-cell {\n        border: 1px solid var(--le-border-color-light); \n        aspect-ratio: 1 / 1;\n        position: relative;\n        font-size: var(--le-font-size-base); \n        box-sizing: border-box;\n      }\n      .matrix-header-cell {\n        font-weight: bold;\n        background-color: var(--le-background-color-header); \n      }\n      .matrix-team-name-x {\n        transform: rotate(-45deg);\n        transform-origin: center center;\n        display: inline-block;\n        white-space: normal;\n        word-break: break-word;\n        hyphens: auto;\n        font-size: var(--le-font-size-small);\n      }\n      .matrix-team-name-y {\n        text-align: right;\n        padding-right: var(--le-padding-s); \n        font-size: var(--le-font-size-small); \n        width: 100%;\n      }\n      .matrix-cell-played { background-color: #e3f2fd; color: var(--le-text-color-accent-hover); } \n      .matrix-cell-scheduled { background-color: #e8f5e9; color: #2e7d32; } \n      .matrix-cell-none { \n        background-color: var(--le-background-color-panel);\n        position: relative;\n      }\n      .matrix-cell-none .add-match-icon {\n        color: var(--le-border-color-dark);\n        font-size: var(--le-font-size-medium);\n        opacity: 0.6;\n        transition: opacity 0.2s ease-in-out;\n      }\n      .matrix-cell-none:hover .add-match-icon {\n        opacity: 1;\n        color: var(--le-text-color-accent);\n      }\n      .matrix-cell-same-team { \n        background-color: var(--le-border-color-light);\n        position: relative;\n        overflow: hidden;\n      } \n      .matrix-cell-same-team::before,\n      .matrix-cell-same-team::after {\n        content: '';\n        position: absolute;\n        background-color: var(--le-border-color-dark);\n        width: 1px;\n        height: 141%; /* √2 * 100% to cover the diagonal */\n        top: 50%;\n        left: 50%;\n      }\n      .matrix-cell-same-team::before {\n        transform: translate(-50%, -50%) rotate(45deg);\n      }\n      .matrix-cell-same-team::after {\n        transform: translate(-50%, -50%) rotate(-45deg);\n      }\n      /* Apply hover effect only to interactive cells */\n      .matrix-cell:not(.matrix-cell-same-team):hover {\n        filter: brightness(0.95);\n      }\n      .matrix-score {\n        font-size: var(--le-font-size-base); \n        font-weight: bold;\n      }\n\n      /* Tooltip Styles */\n      .tooltip {\n        position: absolute;\n        background-color: var(--le-background-color-tooltip); \n        color: var(--le-text-color-on-primary); \n        padding: var(--le-padding-xs) var(--le-padding-s); \n        border-radius: var(--le-border-radius-small); \n        font-size: var(--le-font-size-small); \n        white-space: nowrap;\n        z-index: 10;\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity 0.2s, visibility 0.2s;\n        bottom: 100%; \n        left: 50%;\n        transform: translateX(-50%) translateY(-5px); \n      }\n      .matrix-cell:hover .tooltip {\n        visibility: visible;\n        opacity: 1;\n      }\n\n      /* Trends View Styles - Layout-agnostic properties only */\n      .trends-view-wrapper {\n        padding: var(--le-padding-xs); \n        height: 100%;\n        box-sizing: border-box;\n      }\n      .trends-controls {\n        gap: var(--le-padding-s, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n      }\n      \n      /* Enhanced dropdown styling for trends controls button-like appearance */\n      .trends-controls .dropdown-shared {\n        position: relative;\n        display: inline-block;\n      }\n      \n      .trends-controls .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: 0 var(--le-padding-s, 0.5rem);\n        font-size: var(--le-font-size-dropdown, var(--le-font-size-medium, 1em));\n        color: var(--le-text-color-primary, #333);\n        cursor: pointer;\n        line-height: 1.4;\n        min-width: 160px;\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.75rem center;\n        background-size: 1rem;\n        transition: all 0.2s ease;\n        font-weight: 500;\n      }\n      \n      .trends-controls .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      .trends-controls .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      .trends-controls .dropdown-select-shared:active {\n        background-color: var(--le-background-color-button-hover, #e0e0e0);\n        transform: translateY(1px);\n      }\n      \n      .trends-content-area {\n        gap: var(--le-padding-m); \n        min-height: 0; \n      }\n      .trends-graph-area {\n        border: 1px solid var(--le-border-color-medium); \n        border-radius: var(--le-border-radius-small); \n        overflow: hidden; \n        position: relative; \n      }\n      .trends-graph-area svg {\n        display: block; \n        width: 100%;\n        height: 100%;\n      }\n      .trends-graph-legend {\n        padding: var(--le-padding-s); \n        border: 1px solid var(--le-border-color-light); \n        border-radius: var(--le-border-radius-small); \n        font-size: var(--le-font-size-small); \n      }\n      .trends-graph-legend .legend-item {\n        margin-bottom: var(--le-padding-xs); \n      }\n      .trends-graph-legend .legend-color-box {\n        width: 12px;\n        height: 12px;\n        margin-right: var(--le-padding-s); \n        border: 1px solid var(--le-border-color-dark); \n      }\n\n      .trends-graph-area .axis path,\n      .trends-graph-area .axis line {\n        fill: none;\n        stroke: var(--le-text-color-secondary); \n        shape-rendering: crispEdges;\n      }\n      .trends-graph-area .axis text {\n        font-size: calc(var(--le-font-size-small) * 0.9); \n        fill: var(--le-text-color-primary); \n      }\n      .trends-graph-area .line {\n        fill: none;\n        stroke-width: 2px;\n      }\n      .trends-graph-area .grid-line {\n        stroke: var(--le-border-color-light); \n        stroke-dasharray: 2,2;\n        shape-rendering: crispEdges;\n      }\n\n      /* Scatter plot specific styles */\n      .trends-graph-area .scatter-point {\n        cursor: pointer;\n        transition: r 0.2s ease;\n      }\n      .trends-graph-area .scatter-point:hover {\n        filter: brightness(1.2);\n      }\n      .trends-graph-area .scatter-tooltip {\n        pointer-events: none;\n        font-size: calc(var(--le-font-size-small) * 0.9);\n        fill: var(--le-text-color-primary);\n        text-shadow: 1px 1px 2px rgba(255,255,255,0.8);\n        paint-order: stroke fill;\n        stroke: rgba(255,255,255,0.8);\n        stroke-width: 3px;\n        stroke-linejoin: round;\n        stroke-linecap: round;\n      }\n      .trends-graph-area .axis-label {\n        font-size: var(--le-font-size-small);\n        fill: var(--le-text-color-primary);\n        font-weight: bold;\n      }\n\n      /* Position cell styles */\n      td.position-cell {\n        text-align: left;\n        width: 30px; \n        min-width: 30px; \n        max-width: 30px; \n        position: relative; \n        padding-right: 5px; \n      }\n      .position-cell .rank-up,\n      .position-cell .rank-down {\n        display: inline-block;\n        position: absolute; \n        right: 5px; \n        top: 50%; \n        transform: translateY(-50%); \n        margin-left: var(--le-padding-xs, 0.25rem); \n        font-size: var(--le-font-size-xs); \n        line-height: 1; \n      }\n      .rank-up {\n        color: var(--le-rank-up-color);\n      }\n      .rank-down {\n        color: var(--le-rank-down-color);\n      }\n      .pos-cell-promotion {\n        background-color: var(--le-background-color-promotion); \n        color: var(--le-text-color-on-primary); \n        font-weight: bold;\n      }\n      .pos-cell-relegation {\n        background-color: var(--le-background-color-relegation); \n        color: #721c24; \n        font-weight: bold;\n      }\n      .pos-cell-default {\n        background-color: var(--le-background-color-default-pos); \n        color: var(--le-text-color-primary); \n        border: 1px solid var(--le-border-color-light); \n      }\n    \n      :host {\n        padding: var(--le-padding-m); \n        height: 100%;\n        background-color: var(--le-background-color-host); /* MODIFIED - Can be different for desktop host if desired */\n      }\n      \n      /* Desktop-specific layout styles */\n      .tab-bar {\n        display: flex;\n        gap: 0; /* No gap for desktop tabs as they connect */\n        border-bottom: 2px solid var(--le-border-color-light);\n      }\n      \n      /* Desktop tab button styling */\n      .tab-bar .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-size: var(--le-font-size-medium);\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        white-space: nowrap;\n      }\n      \n      .tab-bar .tab-button:hover {\n        background: var(--le-background-color-button-hover);\n        color: var(--le-text-color-primary);\n      }\n      \n      .tab-bar .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-bar .tab-button:not(:last-child) {\n        border-right: none;\n      }\n      \n\n      .view-container {\n        flex: 1; \n        display: flex; \n        flex-direction: column;\n        min-height: 0; \n      }\n      .trends-view-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: var(--le-padding-m); \n      }\n      .trends-controls {\n        display: flex;\n        align-items: center;\n      }\n      .trends-content-area {\n        flex: 1; \n        display: flex;\n        flex-direction: column; \n      }\n      .trends-graph-area {\n        flex: 1; \n      }\n      .trends-graph-legend .legend-item {\n        display: flex;\n        align-items: center;\n      }\n      .title-with-filter {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      \n      .controls-panel {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        width: 100%;\n        padding: 0 var(--le-padding-s, 0.5rem);\n        box-sizing: border-box;\n      }\n      \n      .filter-controls {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        flex: 1;\n        justify-content: space-between;\n      }\n      /* Matrix specific adjustments*/\n      .matrix-container { \n        padding-top: var(--le-padding-s, 0.5rem);\n      }        \n      .matrix-grid {\n        display: grid;\n      }\n      .matrix-cell {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .dashboard {\n        display: flex;\n        height: 100%;\n        gap: var(--le-padding-m); \n      }\n      .left-panel {\n        flex: 0 0 70%;\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        border: none;\n        border-radius: 0;\n        background: none;\n        padding: 0;\n        margin: 0;\n      }\n      .right-panel {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        gap: var(--le-padding-m); \n        min-width: 0;\n        margin-top: var(--le-padding-m);\n      }\n      /* When right panel is hidden, left panel should take full width */\n      .dashboard.no-right-panel .left-panel {\n        flex: 1;\n      }\n      .panel { /* Panels in the right column for desktop */\n        border: 1px solid var(--le-border-color-medium); \n        border-radius: var(--le-border-radius-standard); \n        background: var(--le-background-color-panel); \n      }\n      .title { /* Main title in the left panel (Table/Matrix/Trends) */\n        padding: var(--le-padding-xs); \n      }\n      .content { /* Content area for table/matrix/trends in left panel */\n        flex: 1;\n        padding: 0; \n      }\n      th, td {\n        padding: var(--le-padding-s);\n      }\n      th:nth-child(3),\n      td:nth-child(3) {\n        font-weight: bold;\n      }\n\n      /* Column width adjustments - these are specific and might not use variables directly */\n      th:nth-child(1), \n      td:nth-child(1) {\n        /* Position - uses .position-cell width */\n      }\n      th:nth-child(2), \n      td:nth-child(2) {\n        width: 35%; \n        text-align: left; \n      }\n      th:nth-child(3), \n      td:nth-child(3),\n      th:nth-child(4), \n      td:nth-child(4),\n      th:nth-child(5), \n      td:nth-child(5),\n      th:nth-child(6), \n      td:nth-child(6),\n      th:nth-child(7), \n      td:nth-child(7) {\n        width: 5%; \n      }\n      th:nth-child(8), \n      td:nth-child(8),\n      th:nth-child(9), \n      td:nth-child(9),\n      th:nth-child(10), \n      td:nth-child(10) {\n        width: 7%; \n      }\n      th:nth-child(11), \n      td:nth-child(11) {\n        width: 15%; \n        min-width: 100px; \n      }\n\n      tr:hover {\n        background-color: var(--le-background-color-row-hover); \n      }\n      .match-score { /* If used for display somewhere else, e.g., not form icons */\n        color: var(--le-form-color-w); /* MODIFIED (using win color for general score display) */\n        font-weight: bold;\n      }\n\n      /* Desktop-specific dropdown styling for filter controls */\n      .filter-controls .dropdown-shared {\n        width: auto;\n        min-width: 120px;\n      }\n      \n      .filter-controls .dropdown-shared:last-child {\n        text-align: right;\n      }\n      \n      .filter-controls .dropdown-select-shared {\n        width: 100%;\n        min-width: 120px;\n      }\n      \n      .filter-controls .dropdown-shared:last-child .dropdown-select-shared {\n        width: auto;\n        min-width: 120px;\n      }\n      \n      /* Desktop-specific trends legend layout - multi-column */\n      .trends-graph-legend {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n        gap: var(--le-padding-xs);\n        column-gap: var(--le-padding-m);\n      }\n      \n      .trends-graph-legend .legend-item {\n        margin-bottom: var(--le-padding-xs);\n        break-inside: avoid; /* Prevent breaking legend items across columns */\n      }\n\n      /* Desktop-specific trends controls dropdown styling */\n      .trends-controls .dropdown-shared {\n        min-width: 160px;\n        width: auto;\n      }\n      \n      .trends-controls .dropdown-select-shared {\n        min-width: 160px;\n        width: auto;\n      }\n      \n      .trends-content-area {\n        flex: 1; \n        display: flex;\n        flex-direction: column; \n      }\n\n      /* Special styling for \"Select All\" checkbox in desktop view */\n      .trends-graph-legend .legend-item-select-all {\n        font-weight: bold;\n        background-color: transparent;\n        border-radius: var(--le-border-radius-small);\n        padding: var(--le-padding-s) var(--le-padding-s) var(--le-padding-s) 0;\n        margin-bottom: var(--le-padding-s);\n        grid-column: 1 / -1; /* Span across all columns */\n      }\n\n\n    ";
export const TABLE_HEADER: "\n      <thead>\n        <tr>\n          <th class=\"position-cell\"></th>\n          <th>Team</th>\n          <th>Pts</th>\n          <th>P</th>\n          <th>W</th>\n          <th>D</th>\n          <th>L</th>\n          <th>F</th>\n          <th>A</th>\n          <th>\u00B1</th>\n          <th>Form</th>\n        </tr>\n      </thead>\n    ";
export const MOBILE_TEMPLATE: "\n      <div class=\"help-banner-shared\">\n        <a href=\"https://lovebowls-leagues.netlify.app/#/league-element\" target=\"_blank\" rel=\"noopener noreferrer\">Help & Documentation</a>\n        <span class=\"separator\">|</span>\n        <a href=\"mailto:admin@lovebowls.co.uk\">Raise Issue</a>\n      </div>\n      <div class=\"dashboard-mobile\">\n        <div class=\"left-panel\">\n          <div class=\"tab-bar\">\n            <button class=\"tab-button active\" data-view=\"table\">Table</button>\n            <button class=\"tab-button\" data-view=\"schedule\">Schedule</button>\n            <button class=\"tab-button\" data-view=\"matrix\">Matrix</button>\n            <button class=\"tab-button\" data-view=\"trends\">Trends</button>\n          </div>\n          <div class=\"view-container\" id=\"mobile-table-view\">\n            <div class=\"title title-with-filter\">\n              <span>{{title}}</span>\n              <span class=\"settings-icon\" title=\"Edit League Settings\">⚙️</span>\n            </div>\n            <div class=\"controls-panel\">\n              <div class=\"filter-controls\">\n                <div class=\"dropdown-shared\">\n                  <select id=\"table-filter-select\" class=\"dropdown-select-shared\">\n                    <option value=\"overall\" {{overallSelected}}>Overall</option>\n                    <option value=\"home\" {{homeSelected}}>Home</option>\n                    <option value=\"away\" {{awaySelected}}>Away</option>\n                    <option value=\"form\" {{formSelected}}>Form</option>\n                  </select>\n                </div>\n                <div class=\"dropdown-shared\">\n                  <select id=\"table-export-select\" class=\"dropdown-select-shared\">\n                    <option value=\"\">Export</option>\n                    <option value=\"excel\">Excel</option>\n                    <option value=\"word\">Word</option>\n                  </select>\n                </div>\n              </div>\n            </div>            \n            <div class=\"content\">\n              <table id=\"leagueTable\">\n                \n      <thead>\n        <tr>\n          <th class=\"position-cell\"></th>\n          <th>Team</th>\n          <th>Pts</th>\n          <th>P</th>\n          <th>W</th>\n          <th>D</th>\n          <th>L</th>\n          <th>F</th>\n          <th>A</th>\n          <th>±</th>\n          <th>Form</th>\n        </tr>\n      </thead>\n    \n                <tbody>\n                  {{tableRows}}\n                </tbody>\n              </table>\n            </div>\n          </div>\n          <div class=\"view-container\" id=\"mobile-schedule-view\" style=\"display: none;\">\n            <div class=\"schedule-container\">\n              <league-schedule id=\"mobile-schedule\" is-mobile=\"true\" {{canEditAttr}}></league-schedule>\n            </div>\n          </div>\n          <div class=\"view-container\" id=\"mobile-matrix-view\" style=\"display: none;\">\n            <div class=\"matrix-container\">\n              {{matrixView}}\n            </div>\n          </div>\n          <div class=\"view-container\" id=\"mobile-trends-view\" style=\"display: none;\">\n            {{trendsViewContent}}\n          </div>\n        </div>\n        {{attentionPanel}}\n      </div>\n    ";
export const DESKTOP_TEMPLATE: "\n      <div class=\"help-banner-shared\">\n        <a href=\"https://lovebowls-leagues.netlify.app/#/league-element\" target=\"_blank\" rel=\"noopener noreferrer\">Help & Documentation</a>\n        <span class=\"separator\">|</span>\n        <a href=\"mailto:admin@lovebowls.co.uk\">Raise Issue</a>\n      </div>\n      <div class=\"dashboard\">\n        <div class=\"left-panel\">\n          <div class=\"tab-bar\">\n            <button class=\"tab-button active\" data-view=\"table\">Table</button>\n            <button class=\"tab-button\" data-view=\"schedule\">Schedule</button>\n            <button class=\"tab-button\" data-view=\"matrix\">Matrix</button>\n            <button class=\"tab-button\" data-view=\"trends\">Trends</button>\n          </div>\n          <div class=\"view-container\" id=\"desktop-table-view\">\n            <div class=\"title title-with-filter\">\n              <span>{{title}}</span>              \n              <span class=\"settings-icon\" title=\"Edit League Settings\">⚙️</span>\n            </div>\n            <div class=\"controls-panel\">\n              <div class=\"filter-controls\">\n                <div class=\"dropdown-shared\">\n                  <select id=\"table-filter-select\" class=\"dropdown-select-shared\">\n                    <option value=\"overall\" {{overallSelected}}>Overall</option>\n                    <option value=\"home\" {{homeSelected}}>Home</option>\n                    <option value=\"away\" {{awaySelected}}>Away</option>\n                    <option value=\"form\" {{formSelected}}>Form</option>\n                  </select>\n                </div>\n                <div class=\"dropdown-shared\">\n                  <select id=\"table-export-select\" class=\"dropdown-select-shared\">\n                    <option value=\"\">Export</option>\n                    <option value=\"excel\">Excel</option>\n                    <option value=\"word\">Word</option>\n                  </select>\n                </div>\n              </div>\n            </div>            \n            <div class=\"content\">\n              <table id=\"leagueTable\">\n                \n      <thead>\n        <tr>\n          <th class=\"position-cell\"></th>\n          <th>Team</th>\n          <th>Pts</th>\n          <th>P</th>\n          <th>W</th>\n          <th>D</th>\n          <th>L</th>\n          <th>F</th>\n          <th>A</th>\n          <th>±</th>\n          <th>Form</th>\n        </tr>\n      </thead>\n    \n                <tbody>\n                  {{tableRows}}\n                </tbody>\n              </table>\n            </div>\n          </div>\n          <div class=\"view-container\" id=\"desktop-schedule-view\" style=\"display: none;\">\n            <div class=\"schedule-container\">\n              <league-schedule id=\"desktop-schedule\" {{canEditAttr}}></league-schedule>\n            </div>\n          </div>\n          <div class=\"view-container\" id=\"desktop-matrix-view\" style=\"display: none;\">\n            <div class=\"matrix-container\">\n              {{matrixView}}\n            </div>\n          </div>\n          <div class=\"view-container\" id=\"desktop-trends-view\" style=\"display: none;\">\n            {{trendsViewContent}}\n          </div>\n        </div>\n        <div class=\"resizer\"></div>\n        <div class=\"right-panel\">\n          {{attentionPanel}}\n        </div>\n      </div>\n    ";
//# sourceMappingURL=leagueElement-styles.d.ts.map