/* Help Button Styling (Circular Floating - Desktop & Mobile) */
.header-help-btn {
    position: fixed;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.header-help-btn[hidden] {
    display: none;
}

.header-help-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.header-help-btn svg {
    width: 22px;
    height: 22px;
}

@media (min-width: 821px) {
    .header-help-btn {
        top: auto;
        right: 40px;
        bottom: 40px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 820px), (max-width: 900px) and (max-height: 500px) {
    /* Auf gleicher Hoehe wie der "+"-FAB (.mobile-view-fab) halten - vorher
       nutzte dieser Button eine eigene, simplere bottom-Formel ohne
       `--app-mobile-nav-clearance`, wodurch er auf Seiten mit sichtbarer
       mobiler Nav-Leiste sichtbar tiefer/hoeher sass als der "+" auf der
       rechten Seite, statt spiegelbildlich auf gleicher Hoehe. */
    .header-help-btn {
        top: auto;
        right: auto;
        bottom: calc(var(--app-mobile-nav-clearance) + var(--space-3));
        left: var(--space-4);
        width: 52px;
        height: 52px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
}/* =========================================
   UTILITIES
   ========================================= */
/* Hilfsklassen für schnelles Layouting */
.text-center {
    text-align: center;
} /* Text zentrieren */
.w-full {
    width: 100%;
}              /* Volle Breite */
.mt-4 {
    margin-top: 1rem;
}           /* Außenabstand oben */
.mb-4 {
    margin-bottom: 1rem;
}        /* Außenabstand unten */

/* 2-spaltiges Layout für Formulare (z. B. Startdatum & Enddatum nebeneinander) */
.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;}

@media (max-width: 640px) {
    .form-group-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MODALS: EXPORT SIDEBAR WIDTH
   ========================================= */

.rundown-pdf-modal-body {
    grid-template-columns: 420px 1fr; /* Match Band Rider width */
}




.multiselect-host-active {
    z-index: 9002 !important;
}

.custom-multiselect {
    position: relative;
    isolation: isolate;
}

.custom-multiselect.is-open {
    z-index: 9000;
}

.form-group:has(.custom-multiselect),
.settings-modal-body:has(.custom-multiselect),
.settings-shell:has(.custom-multiselect),
.settings-tab-content.active:has(.custom-multiselect),
.profile-settings-grid:has(.custom-multiselect),
.profile-main-column:has(.custom-multiselect),
.profile-section:has(.custom-multiselect),
.settings-surface-card:has(.custom-multiselect) {
    z-index: 9000;
}

.multiselect-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.4rem 0.85rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--input-bg) !important;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.multiselect-trigger:hover {
    border-color: var(--border-strong) !important;
}

.multiselect-trigger.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

.multiselect-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 24px;
}

.multiselect-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-meta-size);
    font-weight: 600;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    color: var(--color-primary) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

.multiselect-placeholder {
    color: var(--text-muted) !important;
    font-size: var(--font-meta-size);
}

.multiselect-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.multiselect-trigger.active .multiselect-arrow {
    transform: rotate(180deg);
}

.multiselect-menu {
    display: none !important;
    position: absolute;
    z-index: 9001;
    left: 0;
    width: 100%;
    margin-top: 5px;
    background: var(--surface-elevated) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
    max-height: min(280px, calc(100vh - 220px)) !important;
    padding: 6px !important;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.multiselect-menu.show {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.multiselect-option,
.form-group label.multiselect-option,
.form-group .multiselect-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center !important;
    gap: 0.6rem;
    margin-bottom: 0 !important;
    padding: 0.5rem 0.75rem;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    min-height: 38px;
    font-weight: 500 !important;
    font-size: var(--font-meta-size)!important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.multiselect-option:hover {
    background: var(--hover-bg) !important;
    border-color: var(--border-strong) !important;
}

.multiselect-option:has(input[type="checkbox"]:checked) {
    background: var(--accent-soft) !important;
    border-color: color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

.multiselect-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.multiselect-option-indicator {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.multiselect-option:hover .multiselect-option-indicator {
    border-color: var(--border-strong);
}

.multiselect-option:has(input[type="checkbox"]:checked) .multiselect-option-indicator {
    background: var(--color-primary) !important;
    border-color: var(--color-primary);
}

.multiselect-option-indicator::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.multiselect-option:has(input[type="checkbox"]:checked) .multiselect-option-indicator::before {
    opacity: 1;
}

.multiselect-option-label {
    font-size: var(--font-meta-size);
    font-weight: 500;
    color: var(--color-text) !important;
}

#settingsModal .settings-form-actions {
    position: relative;
    z-index: 1;
}


/* =========================================
   GLOBAL MULTISELECT (Instrument Selector)
   ========================================= */

#settingsModal .admin-inline-form.is-shortcut-target,
#settingsModal .profile-section.is-shortcut-target,
#settingsModal .resource-calendar-settings.is-shortcut-target {
    border-radius: 16px;
    outline: 2px solid color-mix(in srgb, var(--color-primary) 72%, transparent);
    outline-offset: 6px;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 12%, transparent);
    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}



.meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    text-decoration: none;
    transition: color var(--transition-base);
}

a.meta-item:hover {
    color: var(--color-primary);
}

.sticky-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-primary);
    padding: var(--spacing-sm) 0;
}

/* Animated List */
.animated-list-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Animation for Tab Content */
.tab-content.active {
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Header Enhancements */
.section-header-mobile-adjust {
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 640px) {
    .section-header-mobile-adjust {
        flex-direction: column;
        align-items: flex-start;
    }
    .section-header-mobile-adjust .btn {
        width: 100%;
    }
}

.resource-calendar-settings {
    margin-top: 1rem;
}

.resource-calendar-item-main small {
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    word-break: break-all;
}

.resource-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 0.65rem;
    margin-top: 0.45rem;
}

.resource-icon-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 68px;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.resource-icon-option:hover,
.resource-icon-option:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
    outline: none;
}

.resource-icon-option.is-selected {
    border-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.resource-icon-option-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.resource-icon-option-symbol svg {
    width: 1.1rem;
    height: 1.1rem;
}

.resource-icon-option-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.resource-icon-option-copy strong {
    color: var(--color-text);
    font-size: var(--font-meta-size);
    line-height: 1.15;
}

.resource-icon-option-copy small {
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    line-height: 1.25;
}

.resource-calendar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.resource-calendar-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-secondary) 70%, var(--color-surface));
}

.resource-calendar-item-main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.resource-calendar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 13%, transparent);
    color: var(--color-primary);
}

.resource-calendar-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.resource-calendar-item-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.resource-calendar-item-copy strong,
.resource-calendar-item-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-calendar-item-copy span {
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
}

.resource-calendar-readonly-badge {
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent);
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    font-weight: 700;
}


/* =========================================
   UNIFIED PREMIUM LOADER (LOGO SPINNER)
   ========================================= */

/* Note: Global Loader styles are now centralized in style.css for better maintainability */

.premium-loader {
    width: 196px;
    height: 196px;
    aspect-ratio: 1 / 1;
    max-width: calc(100vw - 3rem);
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .premium-loader {
        width: 170px;
        height: 170px;
        padding: 2rem 1rem;
        max-width: calc(100vw - 2rem);
    }

    .loader-spinner {
        width: 70px;
        height: 70px;
    }

    .loader-logo-spinner {
        width: 50px;
        height: 50px;
    }
}

.loader-spinner {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.loader-logo-spinner {
    width: 60px;
    height: 60px;
    background: url('../images/branding/bandmate-logo-only-dark.svg?v=bandset') no-repeat center;
    background-size: contain;
    animation: spin 2s linear infinite;
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Organization Band Card Members Preview */
.members-avatars-row {
    display: flex;
    align-items: center;
}

.member-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-meta-size);
    font-weight: 700;
    color: white;
    border: 2px solid var(--color-bg-secondary);
    margin-right: -8px; /* Stacking effect */
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
}

.member-avatar-sm:hover {
    transform: translateY(-2px);
    z-index: 10;
}

.member-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-avatar-more {
    font-size: var(--font-meta-size);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-left: 12px;
    padding-bottom: 2px;
}

/* Compact Member List for Confirmation Modals */
.compact-member-list-alt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.compact-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.compact-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-meta-size);
    font-weight: 700;
    color: white;
}

.compact-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compact-member-info {
    display: flex;
    flex-direction: column;
}

.compact-member-name {
    font-size: var(--font-meta-size);
    font-weight: 600;
    color: var(--color-text);
}

.compact-member-role {
    font-size: var(--font-meta-size);
    color: var(--color-text-secondary);
}

/* Band Card Mini Members List */
.band-card-members-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.band-member-mini-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-avatar-xs {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-meta-size);
    font-weight: 700;
    color: white;
}

.member-avatar-xs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-mini-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.member-mini-name {
    font-size: var(--font-meta-size);
    font-weight: 600;
    color: var(--color-text);
}

.member-mini-role {
    font-size: var(--font-meta-size);
    color: var(--color-text-secondary);
}

.member-mini-more {
    font-size: var(--font-meta-size);
    color: var(--color-text-secondary);
    padding-top: 4px;
    font-style: italic;
}

/* =========================================
   ANIMATED LIST (ReactBits Style)
   ========================================= */

@keyframes staggeredSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.animated-list-item {
    opacity: 0;
    animation: staggeredSlideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Musikerpool List Styling */
.musikpool-list-item {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    gap: 16px;
}

.musikpool-list-item:hover,
.musikpool-list-item:focus-visible {
    border-color: var(--color-primary);
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.musikpool-list-item .member-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.musikpool-list-item .member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.musikpool-preview-chevron {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: var(--color-text-muted);
    transition: color var(--transition-base), transform var(--transition-base);
}

.musikpool-preview-chevron svg {
    width: 18px;
    height: 18px;
}

.musikpool-list-item.entity-preview-trigger:hover .musikpool-preview-chevron,
.musikpool-list-item.entity-preview-trigger:focus-visible .musikpool-preview-chevron {
    color: var(--color-primary);
    transform: translateX(2px);
}

.musikpool-list-item .member-name {
    font-weight: 600;
    font-size: var(--font-body-size);
    color: var(--color-text);
}

.musikpool-list-item .member-meta {
    font-size: var(--font-meta-size);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.musikpool-list-item .member-actions {
    display: flex;
    gap: 8px;
    opacity: 1; /* Always visible */
    transition: opacity var(--transition-base);
}

.musikpool-organization-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.musikpool-organization-group {
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

.musikpool-organization-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.musikpool-organization-group-head h3 {
    margin: 0.2rem 0 0;
    font-size: var(--font-body-size);
}

.source-badge {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--font-meta-size);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* =========================================
   MODERN FEEDBACK VIEW
   ========================================= */

.feedback-container-v2 {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 1.25rem;
    width: 100%;
}

/* Bewusst ohne Rahmen/Hintergrund - Inhalt sitzt direkt im Fenster statt in
   einer Karte (gleiche Linie wie die Profil-/Band-/Organisations-Einstellungen). */
.feedback-intro-panel,
.feedback-form-panel {
    border-radius: var(--radius-lg);
}

.feedback-intro-panel {
    display: grid;
    gap: 1rem;
    padding: var(--space-4);
}

.feedback-intro-panel h3 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-page-title-size);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.feedback-intro-panel p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-body-size);
    line-height: 1.65;
}

.feedback-guidance-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.feedback-guidance-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--settings-border-soft, var(--color-border)) 82%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--settings-input-bg, var(--color-bg-secondary)) 86%, transparent);
}

.feedback-guidance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--settings-border, var(--color-border)));
    background: color-mix(in srgb, var(--color-primary) 12%, var(--settings-input-bg, var(--color-bg-secondary)));
    color: var(--color-primary);
}

.feedback-guidance-icon.is-danger {
    border-color: color-mix(in srgb, var(--color-danger, #ef4444) 24%, var(--settings-border, var(--color-border)));
    background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, var(--settings-input-bg, var(--color-bg-secondary)));
    color: var(--color-danger, #ef4444);
}

.feedback-guidance-icon svg {
    width: 19px;
    height: 19px;
}

.feedback-guidance-item div {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.feedback-guidance-item strong {
    color: var(--color-text);
    font-size: var(--font-meta-size);
    line-height: 1.3;
}

.feedback-guidance-item span:last-child {
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    line-height: 1.5;
}

.feedback-form-panel {
    padding: var(--space-4);
}

.feedback-type-selector-wrapper {
    margin-bottom: 1rem;
}

.feedback-type-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--settings-border-soft, var(--color-border)) 82%, transparent);
    background: var(--settings-input-bg, var(--color-bg-secondary));
}

.feedback-type-card {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-meta-size);
    font-weight: 750;
    line-height: 1.2;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.feedback-type-card:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.feedback-type-card.active {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-primary) 26%, var(--settings-border, var(--color-border)));
    color: var(--color-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.feedback-type-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.feedback-type-card[data-feedback-tab="bug"].active {
    background: color-mix(in srgb, var(--color-danger, #ef4444) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger, #ef4444) 26%, var(--settings-border, var(--color-border)));
    color: var(--color-danger, #ef4444);
}

.feedback-type-card .type-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.feedback-type-card .type-icon svg {
    width: 100%;
    height: 100%;
}

.feedback-tab-panel {
    display: none;
}

.feedback-submit-confirmation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    margin: 0 0 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 28%, var(--settings-border, var(--color-border)));
    border-radius: 14px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-success, #22c55e) 12%, transparent), transparent),
        color-mix(in srgb, var(--settings-input-bg, var(--color-bg-secondary)) 88%, transparent);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.12);
}

.feedback-submit-confirmation[hidden] {
    display: none;
}

.feedback-submit-confirmation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: var(--color-success, #22c55e);
    background: color-mix(in srgb, var(--color-success, #22c55e) 14%, var(--settings-input-bg, var(--color-bg-secondary)));
    border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 28%, transparent);
}

.feedback-submit-confirmation-icon svg {
    width: 19px;
    height: 19px;
}

.feedback-submit-confirmation strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-body-size);
    line-height: 1.35;
}

.feedback-submit-confirmation p {
    margin: 0.2rem 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    line-height: 1.5;
}

.feedback-tab-panel.active {
    display: block;
    animation: slideUpFade 0.4s ease;
}

.feedback-settings-form {
    display: grid;
    gap: 1rem;
}

.feedback-panel-heading {
    display: grid;
    gap: 0.25rem;
    padding: 0.2rem 0.1rem 0.35rem;
}

.feedback-panel-heading span {
    color: var(--color-text);
    font-size: var(--font-body-size);
    font-weight: 760;
    line-height: 1.3;
}

.feedback-panel-heading p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    line-height: 1.55;
}

.feedback-settings-form .form-group {
    display: grid;
    gap: 0.55rem;
}

.feedback-settings-form label {
    color: var(--color-text);
    font-size: var(--font-meta-size);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feedback-settings-form input,
.feedback-settings-form textarea {
    width: 100%;
    border-color: var(--settings-border-soft, var(--color-border));
    background: var(--settings-input-bg, var(--color-bg-secondary));
}

.feedback-settings-form input:focus,
.feedback-settings-form textarea:focus {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--settings-border, var(--color-border)));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 13%, transparent);
}

.feedback-textarea {
    min-height: 170px;
    resize: vertical;
}

.feedback-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.25rem;
}

.feedback-form-footer span {
    color: var(--color-text-secondary);
    font-size: var(--font-meta-size);
    line-height: 1.45;
}

.feedback-form-footer .btn {
    min-width: 150px;
}

@media (max-width: 900px) {
    .feedback-container-v2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    /* Der Info-Block (Kicker/Titel/Beschreibung/Hinweise) kostet auf dem
       Handy nur Scrollstrecke, bevor man ueberhaupt "Feedback" oder "Fehler
       melden" waehlen kann - die Erklaerung zu jedem Typ steht ohnehin schon
       einmal in der Formular-Sektion darunter. */
    .feedback-intro-panel {
        display: none;
    }

    .feedback-form-panel {
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }

    .feedback-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .feedback-form-footer .btn {
        width: 100%;
    }
}

/* =========================================
   MOBILE OPTIMIZATION OVERRIDES
   ========================================= */

@media (max-width: 820px) {
    #dashboardOpenCalendarShortcut {
        display: none !important;
    }

    /* View Container Padding */
    .view-page-shell {
        padding: 1.25rem var(--page-padding);
        overflow-x: hidden;
    }

    .page-overview-card h2 {
        font-size: var(--font-page-title-size)!important;
        line-height: 1.15 !important;
    }

    /* Forms & Inputs */

    .view,
.view-page-shell {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}

/* Extra small devices optimization */
@media (max-width: 400px) {

    .page-overview-card {
        padding: 1.75rem 1rem !important;
    }

}

/* =========================================
   MUSIKPOOL REFRESH BUTTON
   ========================================= */

.musikpool-refresh-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-hover, rgba(255,255,255,0.06));
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.musikpool-refresh-btn:hover {
    background: var(--color-primary-soft, rgba(136,104,255,0.12));
    color: var(--color-primary);
}

.musikpool-refresh-btn:active {
    transform: scale(0.92);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to   {
        transform: rotate(360deg);
    }
}

.musikpool-refresh-btn.is-loading .musikpool-refresh-icon {
    animation: spin 0.8s linear infinite;
}

@media (max-width: 820px) {
    @keyframes mobileFabMenuIn {
        from {
            opacity: 0;
            transform: translateY(8px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* =========================================
   MUSIKPOOL SECTION HEADER ALIGNMENT
   ========================================= */

#musikpoolView .page-section-card .section-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap;
    gap: 0.75rem !important;
}

#musikpoolView .page-section-card .section-header > div {
    flex: 1 !important;
    min-width: 0 !important;
}

#musikpoolView .page-section-card .section-header .musikpool-refresh-btn {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}

/* Force refresh icon to be visible size regardless of btn-icon overrides */
.musikpool-refresh-btn .musikpool-refresh-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px;
    display: block !important;
    flex-shrink: 0;
}

/* =========================================
   PROBEORTE CALENDAR TABS — COMPACT CHIPS
   ========================================= */

/* Force the submenu into a single scrollable row of compact chips */
#probeorteView .calendar-submenu.probeorte-submenu {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.4rem !important;
    padding: 0.35rem !important;
    /* Keep the pill-shaped card background */
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.1), transparent 42%),
        var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px !important;
}

#probeorteView .calendar-submenu.probeorte-submenu::-webkit-scrollbar {
    display: none !important;
}

/* Compact chip style for each tab */
#probeorteView .personal-calendar-action-btn,
#probeorteView .calendar-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 0.75rem !important;
    font-size: var(--font-meta-size)!important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    line-height: 1;
    border: 1px solid transparent !important;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* Inactive chip */
#probeorteView .calendar-tab.btn-secondary {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}

#probeorteView .calendar-tab.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Active chip */
#probeorteView .calendar-tab.btn-primary,
#probeorteView .calendar-tab.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.92), rgba(99, 102, 241, 0.88)) !important;
    border-color: rgba(147, 197, 253, 0.18) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22) !important;
}

#probeorteView .calendar-tab-icon {
    font-size: var(--font-meta-size)!important;
    line-height: 1 !important;
}

#probeorteView .calendar-tab-icon svg {
    width: 0.85rem !important;
    height: 0.85rem !important;
}

/* =========================================
   PROBEORTE MOBILE CALENDAR SELECT
   ========================================= */

/* Mobile dropdown row — hidden by default (desktop) */
.probeorte-mobile-cal-row {
    display: none;
}

/* On mobile: show dropdown, hide chip tabs, hide desktop Heute button */
@media (max-width: 640px) {
    /* Hide chip tab bar on mobile */
    #probeorteView .calendar-submenu.probeorte-submenu {
        display: none !important;
    }

    /* Show the mobile calendar select row */
    .probeorte-mobile-cal-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
        width: 100%;
    }

    /* Hide desktop Heute button, show mobile one */
    .probeorte-desktop-heute {
        display: none !important;
    }

    .probeorte-mobile-heute {
        display: inline-flex !important;
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 34px;
        padding: 0 0.75rem;
        font-size: var(--font-meta-size);
    }

    /* The select itself */
    .probeorte-mobile-cal-select {
        flex: 1;
        min-width: 0;
        appearance: none;
        -webkit-appearance: none;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238892a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.65rem center / 1rem,
            linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
            var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 10px;
        color: var(--color-text);
        font-size: var(--font-meta-size);
        font-weight: 600;
        padding: 0.45rem 2.2rem 0.45rem 0.8rem;
        height: 34px;
        cursor: pointer;
        outline: none;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .probeorte-mobile-cal-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(136, 104, 255, 0.15);
    }
}

/* On desktop: always show chip tabs, hide mobile row */
@media (min-width: 641px) {
    .probeorte-mobile-cal-row {
        display: none !important;
    }
    .probeorte-mobile-heute {
        display: none !important;
    }
    .probeorte-desktop-heute {
        display: inline-flex !important;
    }
}

/* Single-calendar label in mobile row */
.probeorte-mobile-cal-name {
    flex: 1;
    min-width: 0;
    font-size: var(--font-meta-size);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.5rem;
}

/* =========================================
   PROBEORTE TOOLBAR HOST — STACKED ON MOBILE
   ========================================= */

@media (max-width: 640px) {
    /* Stack toolbar-host items vertically: [Select + Heute] above [‹ Month ›] */
    #probeorteView .probeorte-calendar-toolbar-host {
        flex-direction: column;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0.4rem;
    }

    /* Nav bar (‹ Month ›) takes full width, centered */
    #probeorteView .probeorte-calendar-toolbar-host .personal-calendar-toolbar-nav {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* Also stack the scope row (Privat/Org) cleanly, hide hint text */
    #probeorteView .probeorte-scope-row {
        gap: 0.5rem !important;
    }

    #probeorteView .probeorte-scope-hint {
        display: none !important;
    }
}

/* =========================================
   DESKTOP CALENDAR CELL SIZE — COMPACT
   ========================================= */

/* Desktop only: Restore calendar cell heights to be more generous, but still uniform */
@media (min-width: 769px) {
    #kalenderView .calendar-day,
#probeorteView .calendar-day {
        min-height: 100px !important;
        aspect-ratio: 1 / 0.85 !important; /* Larger rectangles for desktop */
    }

    /* Also restore the day-headers padding slightly */
    #kalenderView .calendar-day-header,
#probeorteView .calendar-day-header {
        padding: 0.6rem 0.5rem !important;
        font-size: var(--font-meta-size)!important;
    }

    }

/* Unified Today Highlighting: Match Probeorte to Meine Termine style (solid circle) */
#probeorteView .calendar-day.today .calendar-day-number {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--color-primary) !important;
    color: white !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    margin-bottom: 0.45rem;
}

#probeorteView .calendar-day.today {
    background: transparent !important; /* Remove purple background */
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.2) !important;
}

/* Mobile Visibility Utilities */
@media (max-width: 820px) {
    .hidden-mobile,
#kalenderView .hidden-mobile {
        display: none !important;
    }
}

/* =========================================
   SCHEDULER MODAL: DATE & TIME REFINEMENTS
   ========================================= */

/*
 * `.date-proposal-item` was deliberately dropped from these two rules.
 * calendar.css already styles the proposals inside the scheduler as a clean
 * list (no per-row border/background, just a thin separator between entries),
 * but this !important block overrode that and turned every single date row into
 * its own heavy rounded card — producing three nested box levels (panel >
 * subpanel > row) and a lot of visual noise for what is really "date, time,
 * delete". Removing it here restores the intended list styling instead of
 * adding yet another override on top.
 */
:is(.scheduler-modal-event, .scheduler-modal-rehearsal) .scheduler-schedule-subpanel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 1.25rem !important;
    padding: 1.15rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

:is(.scheduler-modal-event, .scheduler-modal-rehearsal) .scheduler-schedule-subpanel:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/*
 * The fixed-date branch is a single "Datum und Uhrzeit" pair, already inside the
 * bordered schedule panel — wrapping it in a second card produced a box-in-a-box
 * that read as heavier than the content it held. The repeatable proposal rows
 * above keep their card, because there each box genuinely delimits one of N
 * entries. ID specificity is required to beat the shared !important rule above.
 */
#eventFixedDateSection.scheduler-schedule-subpanel,
#rehearsalFixedDateSection.scheduler-schedule-subpanel {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * `width: 100% !important` made the date/time row span the whole panel, which
 * after the schedule area was widened meant a ~420px date field and an equally
 * stretched time field. A date and a time need a predictable, small amount of
 * space — they are fixed-format inputs, not free text — so the row now sizes to
 * its content and the individual controls get sensible caps below.
 */
:is(.scheduler-modal-event, .scheduler-modal-rehearsal) .date-time-range {
    display: flex !important;
    flex-wrap: nowrap !important; /* Desktop: Stay in one line */
    align-items: center !important;
    gap: 0.6rem !important;
}

:is(.scheduler-modal-event, .scheduler-modal-rehearsal) .date-time-range input[type="date"] {
    flex: 0 1 11rem !important;
    min-}

:is(.scheduler-modal-event, .scheduler-modal-rehearsal) .date-time-range input[type="time"] {
    flex: 0 1 7.5rem !important;
    min-}

/* Ensure inputs don't grow too large but fit nicely */
:is(.scheduler-modal-event, .scheduler-modal-rehearsal) input[type="date"] {
    flex: 1.2 !important;
    min-}

:is(.scheduler-modal-event, .scheduler-modal-rehearsal) input[type="time"] {
    flex: 0.8 !important;
    min-}

:is(.scheduler-modal-event, .scheduler-modal-rehearsal) .time-separator {
    flex: 0 0 auto !important;
    color: var(--text-muted) !important;
    font-size: var(--font-meta-size)!important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0.1rem !important;
}

/* Unified Input Base */
:is(.scheduler-modal-event, .scheduler-modal-rehearsal) input[type="date"],
:is(.scheduler-modal-event, .scheduler-modal-rehearsal) input[type="time"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;
    padding: 0.9rem 1rem !important;
    font-size: var(--font-body-size)!important;
    color: var(--color-text-primary) !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    line-height: normal !important;
    -webkit-appearance: none !important;
}

:is(.scheduler-modal-event, .scheduler-modal-rehearsal) input[type="date"]:focus,
:is(.scheduler-modal-event, .scheduler-modal-rehearsal) input[type="time"]:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
    outline: none !important;
}

/* Mobile: Adjust fields to fit on one line as requested */
@media (max-width: 640px) {

    #createRehearsalModal .date-time-range,
#createEventModal .date-time-range,
.scheduler-modal-rehearsal .date-time-range,
.scheduler-modal-event .date-time-range {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 0.75rem here resolved to 10.5px (this app's root font-size is 14px), which
       is far below the rest of the form and hard to read. 16px is also the
       threshold below which iOS Safari zooms the page on focus, so date/time
       inputs get a full 1rem-plus size on mobile. */
    #createRehearsalModal input[type="date"],
#createEventModal input[type="date"] {
        flex: 1.5 1 0% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0.55rem 0.45rem !important;
        font-size: var(--font-card-title-size)!important;
    }

    #createRehearsalModal input[type="time"],
#createEventModal input[type="time"] {
        flex: 1 1 0% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0.55rem 0.45rem !important;
        font-size: var(--font-card-title-size)!important;
    }

    #eventFixedDateSection .date-time-range {
        justify-content: flex-start !important;
    }

    #eventFixedDate {
        flex: 0 0 auto !important;
        width: 115px !important;
    }

    #eventFixedTime {
        flex: 0 0 auto !important;
        width: 80px !important;
    }

    #createRehearsalModal .time-separator,
#createEventModal .time-separator {
        display: flex !important;
        flex: 0 0 auto !important;
        font-size: var(--font-meta-size)!important;
        padding: 0 0.1rem !important;
        align-items: center;
        margin-top: 0 !important;
    }

    #createRehearsalModal .remove-date,
#createRehearsalModal .remove-event-date,
#createEventModal .remove-event-date,
#createEventModal .remove-date {
        /* Polster bewusst nicht mehr hier gesetzt: `.scheduler-modal
           .btn-icon.remove-date { padding: 0 }` in style.css ist die
           eigentliche, breitenunabhaengige Regel dafuer. Dieses 0.4rem stand
           bislang nur deshalb ohne sichtbare Wirkung im Code, weil eine
           inzwischen entfernte, zu breite `.btn-icon{!important}`-Regel in
           calendar.css beide uebertoent hat. */
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }
    .scheduler-header-add-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
    }

    .date-proposal-item {
        margin-bottom: 0.75rem !important;
        padding: 0.75rem !important;
        background-color: var(--bg-surface, #1e293b);
        border: 1px solid var(--border-color, #334155) !important;
        border-radius: 0.5rem !important;
    }

    .date-proposal-item:last-child {
        margin-bottom: 0 !important;
    }

    .scheduler-schedule-date-label {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0;
    }

    #rehearsalScheduleModeSection,
#eventScheduleModeSection {
        margin-bottom: 1rem !important;
    }

    .scheduler-date-assistant-row {
        margin-top: 1rem !important;
    }
}

.scheduler-subpanel-title-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    gap: 1rem !important;
}

.scheduler-header-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem !important;
    border-radius: 999px !important;
    font-size: var(--font-meta-size)!important;
    font-weight: 700 !important;
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.2s ease !important;
    background: var(--color-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2) !important;
}

.scheduler-header-add-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(14, 165, 233, 0.3) !important;
    filter: brightness(1.1);
}

.scheduler-header-add-btn svg {
    width: 14px !important;
    height: 14px !important;
}

.scheduler-modal .scheduler-schedule-date-label {
    font-size: var(--font-meta-size)!important;
    font-weight: 700 !important;
    margin-bottom: 0 !important; /* Managed by row gap */
    color: var(--color-text) !important;
    display: block !important;
}

/* Remove button in proposals */
.scheduler-modal .remove-date,
.scheduler-modal .remove-event-date {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border-radius: 10px !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
}

.scheduler-modal .remove-date:hover:not(:disabled),
.scheduler-modal .remove-event-date:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2) !important;
    transform: scale(1.05);
}

@media (max-width: 640px) {
    .scheduler-modal .scheduler-schedule-subpanel,
.scheduler-modal .scheduler-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.5rem 0 !important;
    }

    .scheduler-modal .scheduler-schedule-subpanel:hover,
.scheduler-modal .scheduler-panel:hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .scheduler-header-add-btn span {
        display: none !important;
    }

    .scheduler-header-add-btn {
        padding: 0.5rem !important;
    }
}

/* =========================================
   SCHEDULER: UNIFIED FIELD WIDTHS
   ========================================= */

.scheduler-modal .scheduler-panel-basics input,
.scheduler-modal .scheduler-panel-basics select,
.scheduler-modal .scheduler-panel-basics textarea {
    width: 100% !important;
    max-width: 40rem !important; /* Mobile/Default max-width */
    box-sizing: border-box !important;
}

@media (min-width: 800px) {
    .scheduler-modal .scheduler-panel-basics input,
.scheduler-modal .scheduler-panel-basics select,
.scheduler-modal .scheduler-panel-basics textarea {
        max-width: 100% !important; /* Allow expansion in grid */
    }
}

/* Ensure the grid itself doesn't limit them differently */
.scheduler-modal .scheduler-grid-basics {
    width: 100% !important;
    max-width: 40rem !important;
}

@media (min-width: 800px) {
    .scheduler-modal .scheduler-grid-basics {
        max-width: 58rem !important; /* Wider on desktop for 2 cols */
        grid-template-columns: 1fr 1fr !important;
    }
}

.scheduler-span-1 {
    grid-column: span 1;
}

.scheduler-span-2 {
    grid-column: 1 / -1 !important;
}

/* =========================================
   SCHEDULER: COMPACT MEMBER SELECTION
   ========================================= */

/* =========================================
   SETTINGS TABS: LABEL OVERFLOW FIX
   ========================================= */

#settingsModal .settings-tab-btn {
    min-width: 0;
    overflow: hidden;
}

#settingsModal .settings-tab-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

#settingsModal .settings-tab-label strong,
#settingsModal .settings-tab-label small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#settingsModal .settings-tab-icon {
    flex: 0 0 auto;
}
.dropdown-container {
    position: relative !important;
    display: inline-block !important;
    z-index: 95 !important;
}

@media (max-width: 820px) {
    .desktop-only {
        display: none !important;
    }
}




/* SETTINGS DIVIDER */
.settings-divider {
    height: 1px;
    background: linear-gradient(to right, var(--color-border), transparent);
    margin: 2.5rem 0;
    opacity: 0.6;
}

.theme-dark .settings-divider {
    background: linear-gradient(to right, rgba(255,255,255,0.1), transparent);
}

/* HELP ICON BUTTON */
.settings-help-btn {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    margin-top: 0;
    position: absolute !important;
    top: 1rem;
    right: 1rem;
    display: flex !important;
    box-shadow: none !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50% !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
}

.settings-help-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05);
}

.settings-help-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* Inline Help Buttons (e.g. Events) */
.help-btn-premium {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 50% !important;
    cursor: pointer;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    padding: 0 !important;
}

.help-btn-premium:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05);
}

.help-btn-premium svg {
    width: 18px !important;
    height: 18px !important;
}

/* NEW ITEM HIGHLIGHTING */
.is-new-calendar {
    position: relative;
    border-left: 3px solid var(--color-primary);
    background: rgba(14, 165, 233, 0.04) !important;
    animation: fadeInGlow 0.5s ease-out;
}

.badge-new-item {
    position: absolute;
    top: -8px;
    right: 12px;
    background: var(--color-primary);
    color: white;
    font-size: var(--font-meta-size);
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 99px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
}

@keyframes fadeInGlow {
    from {
        opacity: 0;
        transform: translateY(-10px);
        background: rgba(14, 165, 233, 0.2);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        background: rgba(14, 165, 233, 0.04);
    }
}

#settingsModal .settings-column-head-compact {
    padding-right: 3.5rem;
}

@media (max-width: 820px) {
    body #profileImageModal.active .profile-image-preview-modal-content {
        max-height: min(72dvh, 500px) !important;
        background: color-mix(in srgb, var(--color-surface) 94%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent) !important;
        border-radius: var(--dialog-radius)!important;
        box-shadow: 0 22px 52px rgba(0, 0, 0, 0.46) !important;
        overflow: hidden;
    }
}

/* Password Visibility Toggle */
.password-field-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.password-field-wrapper input {
    flex: 1 !important;
    width: 100% !important; /* Standard width, but flex-basis will handle it */
    min-width: 0 !important;
}

.password-toggle-btn {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    cursor: pointer;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
    border-radius: 12px;
}

.password-toggle-btn:hover {
    opacity: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.password-toggle-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.15);
}

.password-toggle-btn svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
    stroke-width: 2.5;
}

@media (max-width: 820px) {
    /* --- Band-Header: Rolle & Mitgliederzahl auf Mobile ausblenden --- */
    #bandDetailsMeta {
        display: none !important;
    }
}

/* =========================================
   MOBILE MODAL ACTION PAIRS
   Haelt zweizeilige Fusszeilen mobil nebeneinander: Abbrechen links,
   Primaeraktion rechts.

   Vier Deklarationen sind hier entfernt worden, weil sie mehr erzwungen
   haben als die Ueberschrift verspricht:

   * `position: relative` + `bottom: auto` haben den klebrigen Fuss aus
     app-components.css mobil app-weit ausgehebelt - die Schaltflaechen
     scrollten aus dem Bild. Beide Dateien setzten dasselbe gegensaetzlich;
     der Sticky-Fuss ist der neuere, an --dialog-pad gebundene Stand.
   * `width: 100%` hat verhindert, dass ein Fuss ueber das Innenpolster
     hinaus bis an die Fensterkante reicht. Dadurch endete die Trennlinie
     der Organisations-Fenster 32px vor dem Rand.
   * `justify-content: space-between` hat die Regel aus app-components.css
     ueberstimmt, die Abbrechen ueber `margin-right: auto` nach links holt -
     und zwar auch dann, wenn nur EINE Schaltflaeche da ist, die dadurch
     faelschlich nach links rutschte.

   Der Rest bleibt: er erzwingt nur die Zeilenanordnung, nichts zur Lage.
   ========================================= */
@media (max-width: 820px) {
.modal-actions,
.modal-footer,
.personal-calendar-detail-actions,
.personal-calendar-day-overview-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 0.65rem !important;
        flex-shrink: 0 !important;
        isolation: isolate;
        pointer-events: auto !important;
    }

    .modal-actions:has(> .btn:first-child:nth-last-child(2)):has(> .btn:nth-child(2):last-child),
.modal-footer:has(> .btn:first-child:nth-last-child(2)):has(> .btn:nth-child(2):last-child) {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    /* :not([hidden]) matters: this selector's specificity (0,3,1) beats the
       app-wide "body:not(.landing-active) [hidden] { display: none !important }"
       guard in app-components.css (0,2,1), so a `hidden` button inside one of
       these action bars used to render anyway on mobile - `display: inline-flex
       !important` here overruled `display: none !important` there. Found via
       the add-member modal's "Link widerrufen" button, which stays hidden until
       an invite link exists. */
    body .modal .modal-actions .btn:not([hidden]),
body .modal .modal-footer .btn:not([hidden]),
body .modal .personal-calendar-detail-actions .btn:not([hidden]),
body .modal .personal-calendar-day-overview-actions .btn:not([hidden]) {
        position: relative !important;
        z-index: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        border-radius: 12px !important;
        font-size: var(--font-meta-size)!important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body .modal .modal-actions .btn:not(:disabled):not([aria-disabled="true"]),
body .modal .modal-footer .btn:not(:disabled):not([aria-disabled="true"]),
body .modal .personal-calendar-detail-actions .btn:not(:disabled):not([aria-disabled="true"]),
body .modal .personal-calendar-day-overview-actions .btn:not(:disabled):not([aria-disabled="true"]) {
        pointer-events: auto !important;
    }

    body .modal .modal-actions .btn > *,
body .modal .modal-footer .btn > *,
body .modal .personal-calendar-detail-actions .btn > *,
body .modal .personal-calendar-day-overview-actions .btn > * {
        pointer-events: none !important;
    }

    .modal-actions:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child),
.modal-footer:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .modal-actions:has(> .btn:first-child:nth-last-child(2)):has(> .btn:nth-child(2):last-child) > .btn,
.modal-footer:has(> .btn:first-child:nth-last-child(2)):has(> .btn:nth-child(2):last-child) > .btn,
.modal-actions:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .btn,
.modal-actions:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .modal-actions-right,
.modal-footer:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .btn,
.modal-footer:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .modal-actions-right {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        margin: 0 !important;
    }

    .modal-actions:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .modal-actions-right,
.modal-footer:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .modal-actions-right {
        display: flex !important;
    }

    .modal-actions:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .modal-actions-right > .btn,
.modal-footer:has(> .btn:first-child):has(> .modal-actions-right:has(> .btn:only-child):last-child) > .modal-actions-right > .btn {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

.modal-actions.preview-modal-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.6rem !important;
        width: 100% !important;
        padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
    }

    .modal-actions.preview-modal-actions > .btn-secondary:first-child,
.modal-actions.preview-modal-actions > button:first-child {
        grid-column: 1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .modal-actions.preview-modal-actions > .modal-actions-right {
        grid-column: 2 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .modal-actions.preview-modal-actions > .modal-actions-right > .btn,
.modal-actions.preview-modal-actions > .modal-actions-right > a.btn {
        min-width: 0 !important;
        max-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
        border-radius: 12px !important;
        font-size: var(--font-meta-size)!important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .modal-actions.preview-modal-actions .btn-inline-icon {
        flex: 0 0 auto !important;
        width: 16px !important;
        height: 16px !important;
        font-size: var(--font-body-size)!important;
    }

    .modal-actions.preview-modal-actions .btn-inline-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .modal-actions.preview-modal-actions [data-mobile-label] {
        font-size: 0 !important;
    }

    .modal-actions.preview-modal-actions [data-mobile-label]::after {
        content: attr(data-mobile-label);
        display: inline-flex;
        align-items: center;
        min-width: 0;
        font-size: var(--font-meta-size);
        font-weight: inherit;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal-actions.preview-modal-actions [data-mobile-label] > span:not(.btn-inline-icon) {
        display: none !important;
    }
}

/* =========================================
   MOBILE CARDLESS MODAL OVERRIDES
   ========================================= */
@media (max-width: 820px) {

    /* Keep confirm action/delete modals compact as centered dialog boxes */
    body #confirmDeleteModal.active {
        padding: 1rem !important;
        justify-content: center !important;
    }
    body #confirmDeleteModal .modal-content,
body #confirmDeleteModal [class*="modal-content"] {
        height: auto !important;
        max-height: min(58dvh, 440px) !important;
        margin: auto !important;
        border-radius: var(--dialog-radius) !important;
        border: 1px solid var(--color-border, var(--border, rgba(255, 255, 255, 0.1))) !important;
        background: var(--color-surface) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    /* Remove card styling from sub-sections/boxes INSIDE modals to make them completely flat */
    body .modal-content .profile-section,
body .modal-content .settings-surface-card,
body .modal-content .absences-form-column,
body .modal-content .settings-pane-intro,
body .modal-content .settings-collapsible-card,
body .modal-content .profile-summary-card,
body .modal-content .workspace-member-card,
body .modal-content .page-section-card,
body .modal-content .page-overview-card,
body .modal-content .external-calendar-row,
body .modal-content .detail-item,
body .modal-content .detail-row,
body .modal-content .setlist-section,
body .modal-content .settlement-card,
body .modal-content .finance-invoice-card,
body .modal-content .invoice-paper-card,
body .modal-content .action-card,
body .modal-content .converter-surface-card,
body .modal-content .converter-sidebar-card,
body .modal-content .workspace-section-card,
body .modal-content .workspace-panel,
body .modal-content .workspace-card {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0;
    }

    /* Prevent toolbar actions from dropping down over the table */
    body .band-setlist-toolbar-top {
        margin-bottom: 10px !important;
    }

    body .table-responsive {
        margin-top: 1.5rem !important;
        clear: both;
    }

}

/* ==========================================================================
   Collapsible & Visual Item Cards (Settings)
   ========================================================================== */

#settingsModal .band-admin-member-card,
#settingsModal .absence-item-card,
#settingsModal .band-management-card {
    border-radius: var(--radius-lg)!important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#settingsModal .band-admin-member-card:focus-within,
#settingsModal .absence-item-card:focus-within,
#settingsModal .band-management-card:focus-within {
    border-color: rgba(37, 99, 235, 0.34) !important;
    background: rgba(37, 99, 235, 0.05) !important;
}

#settingsModal .band-management-card.active {
    border-color: rgba(37, 99, 235, 0.44) !important;
    background: rgba(37, 99, 235, 0.07) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#settingsModal .band-admin-member-card:hover,
#settingsModal .absence-item-card:hover,
#settingsModal .band-management-card:hover {
    border-color: rgba(37, 99, 235, 0.34) !important;
    background: rgba(37, 99, 235, 0.07) !important;
}

/* Light mode overrides for unified cards */
html[data-theme="light"] #settingsModal .band-admin-member-card,
:root:not(.theme-dark) #settingsModal .band-admin-member-card,
html[data-theme="light"] #settingsModal .absence-item-card,
:root:not(.theme-dark) #settingsModal .absence-item-card,
html[data-theme="light"] #settingsModal .band-management-card,
:root:not(.theme-dark) #settingsModal .band-management-card {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    box-shadow: none !important;
}

html[data-theme="light"] #settingsModal .band-admin-member-card:hover,
:root:not(.theme-dark) #settingsModal .band-admin-member-card:hover,
html[data-theme="light"] #settingsModal .absence-item-card:hover,
:root:not(.theme-dark) #settingsModal .absence-item-card:hover,
html[data-theme="light"] #settingsModal .band-management-card:hover,
:root:not(.theme-dark) #settingsModal .band-management-card:hover {
    border-color: rgba(37, 99, 235, 0.34) !important;
    background: rgba(37, 99, 235, 0.04) !important;
}

html[data-theme="light"] #settingsModal .band-admin-member-card:focus-within,
:root:not(.theme-dark) #settingsModal .band-admin-member-card:focus-within,
html[data-theme="light"] #settingsModal .absence-item-card:focus-within,
:root:not(.theme-dark) #settingsModal .absence-item-card:focus-within,
html[data-theme="light"] #settingsModal .band-management-card:focus-within,
:root:not(.theme-dark) #settingsModal .band-management-card:focus-within {
    border-color: rgba(37, 99, 235, 0.34) !important;
    background: rgba(37, 99, 235, 0.03) !important;
}

html[data-theme="light"] #settingsModal .band-management-card.active,
:root:not(.theme-dark) #settingsModal .band-management-card.active {
    border-color: rgba(37, 99, 235, 0.44) !important;
    background: rgba(37, 99, 235, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Compact Band Members in Modal (Global) */
.scheduler-modal .member-select-body,
#createRehearsalModal .member-select-body,
#createEventModal .member-select-body {
    min-height: 0 !important;
    padding: 0.5rem 0.75rem !important;
    align-items: center;
    gap: 0.6rem;
}

.scheduler-modal .member-select-avatar,
#createRehearsalModal .member-select-avatar,
#createEventModal .member-select-avatar {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 0.6rem !important;
    font-size: var(--font-meta-size)!important;
}

.scheduler-modal .member-select-name,
#createRehearsalModal .member-select-name,
#createEventModal .member-select-name {
    font-size: var(--font-meta-size)!important;
}

.scheduler-modal .member-select-copy,
#createRehearsalModal .member-select-copy,
#createEventModal .member-select-copy {
    gap: 0.2rem;
}

.scheduler-modal .member-select-check,
#createRehearsalModal .member-select-check,
#createEventModal .member-select-check {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: var(--font-meta-size)!important;
}

/*
 * Member picker density. This used to be a hard global `1fr !important`, which
 * forced ONE column at every viewport — so a band with a single member got one
 * card stretched across the whole panel. auto-fill (not auto-fit) keeps the
 * track grid intact so cards stay a consistent, readable width no matter how
 * many members exist; the mobile media queries further down still collapse it
 * to a single column where that is genuinely right.
 */
.scheduler-modal .member-selection-grid,
#createRehearsalModal .member-selection-grid,
#createEventModal .member-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) !important;
    gap: 0.6rem !important;
}