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

League Elements package for LoveBowls

export const BASE_STYLES: "\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  .modal-shared-overlay {\n    display: none; /* Hidden by default */\n    position: fixed;\n    z-index: var(--le-z-index-modal-overlay, 1000); /* Ensure it's on top */\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));\n    padding-top: 5%;\n    padding-bottom: 5%;\n  }\n\n  .modal-shared-overlay.open {\n    display: flex;\n    justify-content: center;\n  }\n\n  .modal-shared-content {\n    background-color: var(--le-background-color-panel, #fff);\n    margin: 10% auto; /* Default to 10% from top, centered */\n    padding: 0;\n    border: 1px solid var(--le-border-color-dark, #ccc);\n    max-width: 600px;\n    border-radius: var(--le-border-radius-large, 8px);\n    box-shadow: var(--le-shadow-modal, 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19));\n    display: flex;\n    flex-direction: column;\n    align-self: flex-start;\n  }\n\n  /* Specific styles for modal mobile-view class */\n  .modal-shared-content.mobile-view {\n    width: 90%; /* Override any fixed width from shared styles */\n    margin: 0; /* Less margin from top on mobile */\n    max-width: 90%;\n    min-width: 280px !important;\n  }\n\n  .modal-shared-header {\n    padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n    border-bottom: 1px solid var(--le-border-color-medium, #eee);\n    font-weight: bold;\n    color: var(--le-text-color-primary, #333);\n    background-color: var(--le-background-color-header, #f9f9f9); /* Modal header distinct background */\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-size: var(--le-font-size-large, 1.4em); /* Increased large font size */\n    border-top-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n    border-top-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n  }\n\n  .modal-shared-header .close-button-shared { /* Specific styling for a close button if needed */\n    color: var(--le-text-color-secondary, #aaa);\n    font-size: var(--le-font-size-xlarge, 1.8em); /* Increased size */\n    font-weight: bold;\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n\n  .modal-shared-header .close-button-shared:hover,\n  .modal-shared-header .close-button-shared:focus {\n    color: var(--le-text-color-primary, #000);\n    text-decoration: none;\n  }\n  \n  .modal-shared-body {\n    padding: var(--le-padding-m, 1.25em); /* Increased padding */\n    overflow-y: auto; /* Allow body to scroll if content is too long */\n    flex-grow: 1; /* Allows body to take up available space if modal has fixed height */\n  }\n\n  .modal-shared-footer {\n    padding: var(--le-padding-m, 1.25em);\n    text-align: right;\n    border-top: 1px solid var(--le-border-color-medium, #eee);\n    background-color: var(--le-background-color-header, #f9f9f9); /* Optional: footer background */\n    border-bottom-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n    border-bottom-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n  }\n\n  .modal-shared-footer .button-shared + .button-shared { /* Spacing between buttons in footer */\n    margin-left: var(--le-padding-s, 0.75em); /* Increased margin */\n  }\n\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  .list-container {\n    max-height: 200px;\n    overflow-y: auto;\n  }\n  .list-panel {\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    background: var(--le-background-color-panel, #fff);\n  }\n  .list-panel h4 {\n    margin: 0;\n    padding: var(--le-padding-m, 1rem);\n    background: var(--le-background-color-header, #f8f9fa);\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    color: var(--le-text-color-primary, #333);\n  }\n  .list-panel.disabled {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n  .list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list-item{\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--le-padding-xs) var(--le-padding-s);\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n    min-height: 2.5rem; /* Ensure consistent height for action buttons */\n    box-sizing: border-box;\n  }\n  .list-panel.disabled .list-item {\n    cursor: not-allowed;\n  }\n  .list-item:last-child {\n    border-bottom: none;\n  }\n\n  /* Example of a text part within a list item that should grow */\n  .list-item .list-item-text-primary {\n    flex-grow: 1;\n    font-size: var(--le-font-size-medium, 1.2em);\n    text-align: left; /* Ensure text is left-aligned */\n    display: flex;\n    align-items: center; /* Center text vertically within its container */\n  }\n\n  /* Example of an actions container part within a list item */\n  .list-item .list-item-actions {\n    flex-shrink: 0; /* Prevent actions from shrinking */\n    display: flex;\n    gap: var(--le-padding-xs, 0.4em); /* Increased gap */\n    align-items: center;\n    min-height: 2rem; /* Reserve space for buttons even when empty */\n  }\n\n  .list-item:hover {\n    background-color: var(--le-background-color-hover, #f5f5f5);\n  }\n\n  .list-item.selected {\n    background-color: var(--le-background-color-selected, #e3f2fd);\n    border-left: 3px solid var(--le-border-color-primary, #2196f3);\n    animation: highlightItem 0.6s ease-out;\n  }\n\n  @keyframes highlightItem {\n    0% {\n      background-color: var(--le-background-color-accent, #108CFF);\n      box-shadow: 0 0 0 2px rgba(16, 140, 255, 0.3), 0 2px 8px rgba(16, 140, 255, 0.2);\n    }\n    100% {\n      background-color: var(--le-background-color-selected, #e3f2fd);\n      box-shadow: none;\n    }\n  }\n\n  /* Mobile-specific list item adjustments */\n  @media (max-width: 768px) {\n    .list-item {\n      min-height: 4rem; /* Slightly taller for mobile touch targets */\n      padding: 0 var(--le-padding-xs, 1rem);;\n    }\n    \n    .list-item .list-item-actions {\n      min-height: 2.5rem; /* Larger touch targets for mobile */\n    }\n    \n    .list-item .list-item-actions .button-shared {\n      min-height: 2.5rem; /* Ensure buttons are touch-friendly */\n    }\n  }\n\n  \n  :host {\n    display: none;\n    position: fixed;\n    z-index: var(--le-z-index-modal, 1001);\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));\n    align-items: center;\n    justify-content: center;\n  }\n  \n  :host {\n    display: flex;\n  }\n\n  /* Teams Manager Layout */\n  .teams-manager-content {\n    background: var(--le-background-color-panel, #fff);\n    border-radius: var(--le-border-radius-large, 8px);\n    max-width: 900px;\n    width: 90%;\n    max-height: 80vh;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    margin: auto; /* Center the modal */\n  }\n\n  .teams-manager-content.mobile-view {\n    width: 95%;\n    max-width: 95%;\n    max-height: 90vh;\n  }\n\n  .teams-manager-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--le-padding-l, 1.5rem);\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n    background: var(--le-background-color-header, #f8f9fa);\n  }\n\n  .teams-manager-header h3 {\n    margin: 0;\n    color: var(--le-text-color-primary, #333);\n  }\n\n  .teams-manager-body {\n    padding: var(--le-padding-l, 1.5rem);\n    flex: 1;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    gap: var(--le-padding-l, 1.5rem);\n  }\n\n  .teams-manager-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--le-padding-m, 1rem);\n    padding: var(--le-padding-l, 1.5rem);\n    border-top: 1px solid var(--le-border-color-light, #eee);\n    background: var(--le-background-color-footer, #f8f9fa);\n  }\n\n  .footer-options {\n    display: flex;\n    align-items: center;\n  }\n\n  .footer-buttons {\n    display: flex;\n    gap: var(--le-padding-m, 1rem);\n    justify-content: flex-end;\n    margin-left: auto;\n  }\n\n  .checkbox-label {\n    display: flex;\n    align-items: center;\n    gap: var(--le-padding-s, 0.5rem);\n    cursor: pointer;\n    color: var(--le-text-color-primary, #333);\n    user-select: none;\n  }\n\n  .checkbox-label input[type=\"checkbox\"] {\n    margin: 0;\n    cursor: pointer;\n  }\n\n  /* Team Input with Inline Buttons */\n  .team-input-with-buttons {\n    display: flex;\n    gap: var(--le-padding-m, 1rem);\n    align-items: flex-end;\n  }\n\n  .team-input-with-buttons .form-input-shared {\n    flex: 1;\n  }\n\n  .inline-buttons {\n    display: flex;\n    gap: var(--le-padding-s, 0.5rem);\n    flex-shrink: 0;\n  }\n\n  .inline-buttons .button-shared {\n    min-width: 80px;\n    white-space: nowrap;\n  }\n\n  /* Update button disabled state */\n  .button-update:disabled {\n    background-color: var(--le-background-color-disabled, #f5f5f5) !important;\n    color: var(--le-text-color-disabled, #999) !important;\n    border-color: var(--le-border-color-disabled, #ddd) !important;\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .button-update:disabled:hover {\n    background-color: var(--le-background-color-disabled, #f5f5f5) !important;\n    border-color: var(--le-border-color-disabled, #ddd) !important;\n  }\n\n  /* Action Buttons */\n  .teams-action-buttons {\n    display: flex;\n    gap: var(--le-padding-m, 1rem);\n    flex-wrap: wrap;\n  }\n\n  .teams-action-buttons .button-shared {\n    min-width: 100px;\n  }\n\n  .teams-action-buttons.disabled {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  /* Custom team styling for the shared list items */\n  .list-item .team-name {\n    font-weight: 500;\n  }\n\n  .list-item .team-source {\n    color: var(--le-text-color-secondary, #666);\n    font-style: italic;\n    margin-left: var(--le-padding-s, 0.5rem);\n  }\n\n  .no-teams-message {\n    padding: var(--le-padding-l, 1.5rem);\n    text-align: center;\n    color: var(--le-text-color-secondary, #666);\n    font-style: italic;\n  }\n\n  /* Team Editor Panel */\n  .team-editor-panel {\n    border: 1px solid var(--le-border-color-medium, #ddd);\n    border-radius: var(--le-border-radius-standard, 4px);\n    background: var(--le-background-color-panel, #fff);\n    animation: slideDown 0.3s ease-out;\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .team-editor-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--le-padding-m, 1rem);\n    background: var(--le-background-color-header, #f8f9fa);\n    border-bottom: 1px solid var(--le-border-color-light, #eee);\n  }\n\n  .team-editor-header h4 {\n    margin: 0;\n    color: var(--le-text-color-primary, #333);\n  }\n\n  .team-editor-body {\n    padding: var(--le-padding-l, 1.5rem);\n  }\n\n\n\n  /* These form styles are provided by shared-styles.js formStyles import */\n\n  /* Update button styling */\n  .button-update {\n    background-color: var(--le-background-color-accent, #4caf50) !important;\n    color: white !important;\n    border-color: var(--le-border-color-accent, #45a049) !important;\n  }\n\n  .button-update:hover {\n    background-color: var(--le-background-color-accent-hover, #45a049) !important;\n    border-color: var(--le-border-color-accent-hover, #3d8b40) !important;\n  }\n\n  /* Mobile-specific adjustments */\n  @media (max-width: 480px) {\n    .teams-manager-content {\n      width: 95% !important;\n      max-width: 95% !important;\n      margin: 5% auto;\n      max-height: 95vh;\n    }\n    \n    .teams-manager-header {\n      padding: 15px;\n    }\n    \n    .teams-manager-body {\n      padding: 15px;\n      gap: 10px; /* Reduced gap to collapse space */\n    }\n    \n    .teams-manager-footer {\n      padding: 15px;\n      flex-direction: row; /* Keep buttons side by side like league modal */\n      gap: 10px;\n    }\n\n    .footer-options {\n      order: 1;\n      justify-content: flex-start;\n    }\n\n    .footer-buttons {\n      order: 2;\n      flex-direction: row; /* Keep buttons side by side */\n      gap: 10px;\n      margin-left: auto;\n    }\n\n    .footer-buttons .button-shared {\n      width: auto; /* Allow buttons to size naturally */\n      margin: 0;\n      min-width: 80px; /* Ensure minimum touch target */\n    }\n    \n    .teams-action-buttons {\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .teams-action-buttons .button-shared {\n      width: 100%;\n      min-width: auto;\n    }\n\n\n\n    .team-editor-header {\n      padding: 15px 10px;\n      flex-direction: column;\n      gap: 10px;\n      align-items: flex-start;\n    }\n\n    .team-editor-body {\n      padding: 15px 10px;\n    }\n\n    /* Mobile inline buttons */\n    .team-input-with-buttons {\n      flex-direction: column;\n      gap: 10px;\n      align-items: stretch;\n    }\n\n    .inline-buttons {\n      justify-content: flex-end;\n      gap: 10px;\n    }\n\n    .inline-buttons .button-shared {\n      min-width: 100px;\n    }\n\n    /* Form and button styles handled by shared-styles.js */\n  }\n";
//# sourceMappingURL=leagueTeams-styles.d.ts.map