@lovebowls/leagueelements/dist/elements/leagueElement/leagueElement-styles.d.ts

League Elements package for LoveBowls

export const BASE_STYLES: "\n      \n  .panel-header-shared {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border-bottom: 1px solid var(--le-border-color-medium, #eee);\n    font-weight: bold;\n    color: var(--le-text-color-primary, #333);\n    background-color: var(--le-background-color-header, #f9f9f9);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .panel-content-shared {\n    padding: var(--le-padding-m, 1.25em);\n    background-color: var(--le-background-color-panel, #fff);\n    /* Common border for content area if needed\n    border: 1px solid var(--le-border-color-light, #f0f0f0);\n    */\n  }\n   /* ADDED SHARED STYLE */\n      \n  .button-shared {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border: 1px solid var(--le-border-color-medium, #ccc);\n    background-color: var(--le-background-color-button, #f0f0f0);\n    color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */\n    cursor: pointer;\n    border-radius: var(--le-border-radius-standard, 4px);\n    font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\n    text-decoration: none;\n    display: inline-block;\n    text-align: center;\n    line-height: normal; /* Ensure consistent line height */\n    white-space: nowrap; /* Prevent text wrapping */\n    vertical-align: middle; /* Align nicely if next to text/icons */\n    user-select: none; /* Prevent text selection on click */\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */\n  }\n\n  .button-shared:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */\n    /* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */\n  }\n\n  .button-shared:active:not(:disabled) {\n    /* Optional: style for active (pressed) state */\n    /* background-color: var(--le-background-color-button-active, #d0d0d0); */\n  }\n\n  .button-shared:disabled,\n  .button-shared.disabled { /* Allow class-based disabling too */\n    background-color: var(--le-background-color-button-disabled, #eee);\n    color: var(--le-text-color-secondary, #aaa);\n    border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */\n    cursor: not-allowed;\n    opacity: 0.7; /* Visually indicate disabled state */\n  }\n\n  /* Small button variant */\n  .button-shared.button-sm {\n    padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n    font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n    /* line-height can be tighter if needed for small buttons */\n    /* line-height: 1.2; */\n  }\n\n  /* Variations */\n  .button-shared.button-primary {\n    background-color: var(--le-color-primary, #007bff);\n    color: var(--le-text-color-on-primary, #fff);\n    border-color: var(--le-color-primary, #007bff);\n  }\n  .button-shared.button-primary:hover:not(:disabled) {\n    background-color: var(--le-color-primary-hover, #0056b3);\n    border-color: var(--le-color-primary-hover, #0056b3);\n  }\n\n  .button-shared.button-secondary-light {\n    background-color: var(--le-background-color-button-secondary-light, #f8f9fa);\n    color: var(--le-text-color-secondary-light-text, #212529);\n    border-color: var(--le-border-color-secondary-light, #ced4da);\n  }\n  .button-shared.button-secondary-light:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);\n    border-color: var(--le-border-color-secondary-light-hover, #dae0e5);\n    color: var(--le-text-color-secondary-light-text-hover, #212529);\n  }\n\n  /* Example for a darker secondary button if needed elsewhere \n  .button-shared.button-secondary {\n    background-color: var(--le-color-secondary, #6c757d); \n    color: var(--le-text-color-on-secondary, #fff);\n    border-color: var(--le-color-secondary, #6c757d);\n  }\n  .button-shared.button-secondary:hover:not(:disabled) {\n    background-color: var(--le-color-secondary-hover, #5a6268);\n    border-color: var(--le-color-secondary-hover, #5a6268);\n  }\n  */\n  /* ADDED SHARED STYLE */\n      \n  .dropdown-shared {\n    position: relative;\n    display: inline-block;\n  }\n  \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) var(--le-padding-m, 0.75rem);\n    padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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  /* Mobile-specific adjustments */\n  @media (max-width: 480px) {\n    .dropdown-select-shared {\n      font-size: 1.1em;\n      padding: 0.3rem 2rem 0.3rem 0.5rem;\n      background-size: 0.8em;\n    }\n  }\n  \n  /* For dropdown containers that need to be right-aligned */\n  .dropdown-container-right {\n    display: flex;\n    justify-content: flex-end;\n  }\n  \n  /* For dropdowns within flexbox layouts */\n  .dropdown-container-flex {\n    display: flex;\n    align-items: center;\n    gap: var(--le-padding-s, 0.5rem);\n  }\n\n  /* Dropdown Menu Styles (for button-triggered dropdowns like export menu) */\n  .dropdown-menu-shared {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .dropdown-menu-button-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) var(--le-padding-m, 0.75rem);\n    padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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    min-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-menu-button-shared:hover {\n    border-color: var(--le-border-color-dark, #ccc);\n    background-color: var(--le-background-color-hover, #f1f1f1);\n  }\n  \n  .dropdown-menu-button-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-menu-list-shared {\n    display: none;\n    position: absolute;\n    right: 0;\n    top: 100%;\n    background-color: var(--le-background-color-panel, #fff);\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    z-index: 1000;\n    border-radius: var(--le-border-radius-small, 3px);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    overflow: hidden;\n  }\n  \n  .dropdown-menu-list-shared.show {\n    display: block;\n  }\n  \n  .dropdown-menu-item-shared {\n    color: var(--le-text-color-primary, #333);\n    padding: var(--le-padding-s, 0.5rem) var(--le-padding-m, 1rem);\n    text-decoration: none;\n    display: block;\n    text-align: left;\n    width: 100%;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: var(--le-font-size-base, 1em);\n    box-sizing: border-box;\n    margin: 0;\n    min-height: 2.5em;\n    line-height: 1.5;\n  }\n  \n  .dropdown-menu-item-shared:hover {\n    background-color: var(--le-background-color-hover, #f1f1f1);\n  }\n  \n  .dropdown-menu-item-shared:active {\n    background-color: var(--le-background-color-active, #e1e1e1);\n  }\n\n  /* Mobile-specific adjustments for dropdown menus */\n  @media (max-width: 480px) {\n    .dropdown-menu-button-shared {\n      font-size: 1.1em;\n      padding: 0.3rem 2rem 0.3rem 0.5rem;\n      background-size: 0.8em;\n    }\n    \n    .dropdown-menu-shared.mobile-full-width {\n      width: 100%;\n    }\n    \n    .dropdown-menu-shared.mobile-full-width .dropdown-menu-button-shared {\n      width: 100%;\n    }\n  }\n /* ADDED SHARED STYLE */\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        --le-font-size-base: 1em; /* Base for general text within this component */\n        --le-font-size-small: 0.85em;\n        --le-font-size-medium: 1.2em;\n        --le-font-size-large: 1.4em;\n        --le-font-size-xlarge: 1.6em;\n        --le-font-size-page-title: 1.3em; /* For main titles like league name */\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        \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\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        /* 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-m) 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-small); /* MODIFIED - Relative to parent */\n        margin-bottom: var(--le-padding-xs); \n      }\n      /* Tab Styles */\n      .tab-bar {\n        display: flex;\n        border-bottom: 1px solid var(--le-border-color-medium); \n        background-color: var(--le-background-color-header); \n      }\n      .tab-button {\n        padding: var(--le-padding-s) var(--le-padding-l); \n        cursor: pointer;\n        border: none;\n        background: none;\n        font-size: var(--le-font-size-medium); \n        color: var(--le-tab-text-color); \n        border-bottom: 3px solid transparent;\n        transition: color 0.2s, border-bottom-color 0.2s;\n      }\n      .tab-button:hover {\n        color: var(--le-tab-text-color-hover); \n      }\n      .tab-button.active {\n        color: var(--le-text-color-accent); \n        border-bottom-color: var(--le-tab-border-color-active); \n        font-weight: bold;\n      }\n\n      /* Schedule Styles */\n      .schedule-container {\n        overflow: auto; /* For scrolling */\n        flex: 1; /* Take available space if parent is flex column */\n        padding: var(--le-padding-m);\n        height: 100%;\n      }\n      \n      /* Matrix Styles */\n      .matrix-container {\n        overflow: auto; /* For scrolling */\n        flex: 1; /* Take available space if parent is flex column */\n        padding: var(--le-padding-m); \n      }\n      .matrix-grid {\n        display: grid;\n        border: 1px solid var(--le-border-color-dark); \n      }\n      .matrix-cell {\n        border: 1px solid var(--le-border-color-light); \n        display: flex;\n        align-items: center;\n        justify-content: center;\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); } /* MODIFIED (minor adjustment) */\n      .matrix-cell-scheduled { background-color: #e8f5e9; color: #2e7d32; } /* MODIFIED to light green */\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: 1.2em;\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      .view-container {\n        flex: 1; \n        display: flex; \n        flex-direction: column;\n        min-height: 0; \n      }\n\n      /* Trends View Styles */\n      .trends-view-wrapper {\n        display: flex;\n        flex-direction: column;\n        padding: var(--le-padding-m); \n        gap: var(--le-padding-m); \n        height: 100%;\n        box-sizing: border-box;\n      }\n      .trends-controls {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n      }\n      .trends-content-area {\n        flex: 1; \n        display: flex;\n        flex-direction: column; \n        gap: var(--le-padding-m); \n        min-height: 0; \n      }\n      .trends-graph-area {\n        flex: 1; \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        display: flex;\n        align-items: center;\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); /* MODIFIED to be smaller */\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      }\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      /* Table View Filter Styles */\n      .title-with-filter {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      \n      /* Trends View Styles */\n      .trends-controls {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n      }\n\n      td.position-cell {\n        text-align: left;\n        width: 30px; \n        min-width: 30px; \n        max-width: 30px; \n        position: relative; /* Add relative positioning to contain absolute elements */\n        padding-right: 15px; /* Add extra padding on the right for the indicators */\n      }\n      .position-cell .rank-up,\n      .position-cell .rank-down {\n        display: inline-block;\n        position: absolute; /* Position absolutely to avoid affecting row height */\n        right: 3px; /* Position from right side of the cell */\n        top: 50%; /* Center vertically */\n        transform: translateY(-50%); /* Perfect vertical centering */\n        margin-left: 0; /* Remove left margin */\n        font-size: 0.85em; /* Slightly smaller font size */\n        line-height: 1; /* Ensure consistent line height */\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; /* Specific dark red, could be a variable too */\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    ";
export const MOBILE_STYLES: "\n      \n      \n  .panel-header-shared {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border-bottom: 1px solid var(--le-border-color-medium, #eee);\n    font-weight: bold;\n    color: var(--le-text-color-primary, #333);\n    background-color: var(--le-background-color-header, #f9f9f9);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .panel-content-shared {\n    padding: var(--le-padding-m, 1.25em);\n    background-color: var(--le-background-color-panel, #fff);\n    /* Common border for content area if needed\n    border: 1px solid var(--le-border-color-light, #f0f0f0);\n    */\n  }\n   /* ADDED SHARED STYLE */\n      \n  .button-shared {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border: 1px solid var(--le-border-color-medium, #ccc);\n    background-color: var(--le-background-color-button, #f0f0f0);\n    color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */\n    cursor: pointer;\n    border-radius: var(--le-border-radius-standard, 4px);\n    font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\n    text-decoration: none;\n    display: inline-block;\n    text-align: center;\n    line-height: normal; /* Ensure consistent line height */\n    white-space: nowrap; /* Prevent text wrapping */\n    vertical-align: middle; /* Align nicely if next to text/icons */\n    user-select: none; /* Prevent text selection on click */\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */\n  }\n\n  .button-shared:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-hover, #e0e0e0);\n    border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */\n    /* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */\n  }\n\n  .button-shared:active:not(:disabled) {\n    /* Optional: style for active (pressed) state */\n    /* background-color: var(--le-background-color-button-active, #d0d0d0); */\n  }\n\n  .button-shared:disabled,\n  .button-shared.disabled { /* Allow class-based disabling too */\n    background-color: var(--le-background-color-button-disabled, #eee);\n    color: var(--le-text-color-secondary, #aaa);\n    border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */\n    cursor: not-allowed;\n    opacity: 0.7; /* Visually indicate disabled state */\n  }\n\n  /* Small button variant */\n  .button-shared.button-sm {\n    padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n    font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n    /* line-height can be tighter if needed for small buttons */\n    /* line-height: 1.2; */\n  }\n\n  /* Variations */\n  .button-shared.button-primary {\n    background-color: var(--le-color-primary, #007bff);\n    color: var(--le-text-color-on-primary, #fff);\n    border-color: var(--le-color-primary, #007bff);\n  }\n  .button-shared.button-primary:hover:not(:disabled) {\n    background-color: var(--le-color-primary-hover, #0056b3);\n    border-color: var(--le-color-primary-hover, #0056b3);\n  }\n\n  .button-shared.button-secondary-light {\n    background-color: var(--le-background-color-button-secondary-light, #f8f9fa);\n    color: var(--le-text-color-secondary-light-text, #212529);\n    border-color: var(--le-border-color-secondary-light, #ced4da);\n  }\n  .button-shared.button-secondary-light:hover:not(:disabled) {\n    background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);\n    border-color: var(--le-border-color-secondary-light-hover, #dae0e5);\n    color: var(--le-text-color-secondary-light-text-hover, #212529);\n  }\n\n  /* Example for a darker secondary button if needed elsewhere \n  .button-shared.button-secondary {\n    background-color: var(--le-color-secondary, #6c757d); \n    color: var(--le-text-color-on-secondary, #fff);\n    border-color: var(--le-color-secondary, #6c757d);\n  }\n  .button-shared.button-secondary:hover:not(:disabled) {\n    background-color: var(--le-color-secondary-hover, #5a6268);\n    border-color: var(--le-color-secondary-hover, #5a6268);\n  }\n  */\n  /* ADDED SHARED STYLE */\n      \n  .dropdown-shared {\n    position: relative;\n    display: inline-block;\n  }\n  \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) var(--le-padding-m, 0.75rem);\n    padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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  /* Mobile-specific adjustments */\n  @media (max-width: 480px) {\n    .dropdown-select-shared {\n      font-size: 1.1em;\n      padding: 0.3rem 2rem 0.3rem 0.5rem;\n      background-size: 0.8em;\n    }\n  }\n  \n  /* For dropdown containers that need to be right-aligned */\n  .dropdown-container-right {\n    display: flex;\n    justify-content: flex-end;\n  }\n  \n  /* For dropdowns within flexbox layouts */\n  .dropdown-container-flex {\n    display: flex;\n    align-items: center;\n    gap: var(--le-padding-s, 0.5rem);\n  }\n\n  /* Dropdown Menu Styles (for button-triggered dropdowns like export menu) */\n  .dropdown-menu-shared {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .dropdown-menu-button-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) var(--le-padding-m, 0.75rem);\n    padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\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    min-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-menu-button-shared:hover {\n    border-color: var(--le-border-color-dark, #ccc);\n    background-color: var(--le-background-color-hover, #f1f1f1);\n  }\n  \n  .dropdown-menu-button-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-menu-list-shared {\n    display: none;\n    position: absolute;\n    right: 0;\n    top: 100%;\n    background-color: var(--le-background-color-panel, #fff);\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    z-index: 1000;\n    border-radius: var(--le-border-radius-small, 3px);\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    overflow: hidden;\n  }\n  \n  .dropdown-menu-list-shared.show {\n    display: block;\n  }\n  \n  .dropdown-menu-item-shared {\n    color: var(--le-text-color-primary, #333);\n    padding: var(--le-padding-s, 0.5rem) var(--le-padding-m, 1rem);\n    text-decoration: none;\n    display: block;\n    text-align: left;\n    width: 100%;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: var(--le-font-size-base, 1em);\n    box-sizing: border-box;\n    margin: 0;\n    min-height: 2.5em;\n    line-height: 1.5;\n  }\n  \n  .dropdown-menu-item-shared:hover {\n    background-color: var(--le-background-color-hover, #f1f1f1);\n  }\n  \n  .dropdown-menu-item-shared:active {\n    background-color: var(--le-background-color-active, #e1e1e1);\n  }\n\n  /* Mobile-specific adjustments for dropdown menus */\n  @media (max-width: 480px) {\n    .dropdown-menu-button-shared {\n      font-size: 1.1em;\n      padding: 0.3rem 2rem 0.3rem 0.5rem;\n      background-size: 0.8em;\n    }\n    \n    .dropdown-menu-shared.mobile-full-width {\n      width: 100%;\n    }\n    \n    .dropdown-menu-shared.mobile-full-width .dropdown-menu-button-shared {\n      width: 100%;\n    }\n  }\n /* ADDED SHARED STYLE */\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        --le-font-size-base: 1em; /* Base for general text within this component */\n        --le-font-size-small: 0.85em;\n        --le-font-size-medium: 1.2em;\n        --le-font-size-large: 1.4em;\n        --le-font-size-xlarge: 1.6em;\n        --le-font-size-page-title: 1.3em; /* For main titles like league name */\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        \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\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        /* 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-m) 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-small); /* MODIFIED - Relative to parent */\n        margin-bottom: var(--le-padding-xs); \n      }\n      /* Tab Styles */\n      .tab-bar {\n        display: flex;\n        border-bottom: 1px solid var(--le-border-color-medium); \n        background-color: var(--le-background-color-header); \n      }\n      .tab-button {\n        padding: var(--le-padding-s) var(--le-padding-l); \n        cursor: pointer;\n        border: none;\n        background: none;\n        font-size: var(--le-font-size-medium); \n        color: var(--le-tab-text-color); \n        border-bottom: 3px solid transparent;\n        transition: color 0.2s, border-bottom-color 0.2s;\n      }\n      .tab-button:hover {\n        color: var(--le-tab-text-color-hover); \n      }\n      .tab-button.active {\n        color: var(--le-text-color-accent); \n        border-bottom-color: var(--le-tab-border-color-active); \n        font-weight: bold;\n      }\n\n      /* Schedule Styles */\n      .schedule-container {\n        overflow: auto; /* For scrolling */\n        flex: 1; /* Take available space if parent is flex column */\n        padding: var(--le-padding-m);\n        height: 100%;\n      }\n      \n      /* Matrix Styles */\n      .matrix-container {\n        overflow: auto; /* For scrolling */\n        flex: 1; /* Take available space if parent is flex column */\n        padding: var(--le-padding-m); \n      }\n      .matrix-grid {\n        display: grid;\n        border: 1px solid var(--le-border-color-dark); \n      }\n      .matrix-cell {\n        border: 1px solid var(--le-border-color-light); \n        display: flex;\n        align-items: center;\n        justify-content: center;\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); } /* MODIFIED (minor adjustment) */\n      .matrix-cell-scheduled { background-color: #e8f5e9; color: #2e7d32; } /* MODIFIED to light green */\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: 1.2em;\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      .view-container {\n        flex: 1; \n        display: flex; \n        flex-direction: column;\n        min-height: 0; \n      }\n\n      /* Trends View Styles */\n      .trends-view-wrapper {\n        display: flex;\n        flex-direction: column;\n        padding: var(--le-padding-m); \n        gap: var(--le-padding-m); \n        height: 100%;\n        box-sizing: border-box;\n      }\n      .trends-controls {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n      }\n      .trends-content-area {\n        flex: 1; \n        display: flex;\n        flex-direction: column; \n        gap: var(--le-padding-m); \n        min-height: 0; \n      }\n      .trends-graph-area {\n        flex: 1; \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        display: flex;\n        align-items: center;\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); /* MODIFIED to be smaller */\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      }\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      /* Table View Filter Styles */\n      .title-with-filter {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      \n      /* Trends View Styles */\n      .trends-controls {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n      }\n\n      td.position-cell {\n        text-align: left;\n        width: 30px; \n        min-width: 30px; \n        max-width: 30px; \n        position: relative; /* Add relative positioning to contain absolute elements */\n        padding-right: 15px; /* Add extra padding on the right for the indicators */\n      }\n      .position-cell .rank-up,\n      .position-cell .rank-down {\n        display: inline-block;\n        position: absolute; /* Position absolutely to avoid affecting row height */\n        right: 3px; /* Position from right side of the cell */\n        top: 50%; /* Center vertically */\n        transform: translateY(-50%); /* Perfect vertical centering */\n        margin-left: 0; /* Remove left margin */\n        font-size: 0.85em; /* Slightly smaller font size */\n        line-height: 1; /* Ensure consistent line height */\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-relega