UNPKG

@lovebowls/leagueelements

Version:

League Elements package for LoveBowls

1 lines • 102 kB
1
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