/*
 * BandMate Studio – canonical shared application components
 *
 * This file owns the visual base for reusable controls in the authenticated
 * application. Feature CSS may define layouts, but must not redefine these
 * component foundations.
 */

:where(body:not(.landing-active)),
:where(body:not(.landing-active) *),
:where(body:not(.landing-active) *::before),
:where(body:not(.landing-active) *::after) {
    box-sizing: border-box;
}

/*
 * The `hidden` attribute is the app's primary show/hide mechanism in JS
 * (`el.hidden = true`). Its `display: none` comes from the browser's own
 * stylesheet, so ANY author rule that sets `display` on the same element wins
 * and the element stays visible — most often a layout rule inside a responsive
 * media query, which is why this failed on mobile only. That footgun has been
 * patched one selector at a time across several files; this makes it
 * structurally impossible instead.
 */
body:not(.landing-active) [hidden] {
    display: none !important;
}

body:not(.landing-active) {
    font-family: var(--font-sans);
    font-size: var(--font-body-size);
    line-height: var(--font-body-line);
    color: var(--app-ink);
}

body:not(.landing-active) h1,
body:not(.landing-active) h2,
body:not(.landing-active) h3,
body:not(.landing-active) h4,
body:not(.landing-active) h5,
body:not(.landing-active) h6 {
    margin: 0;
    color: var(--app-ink);
    font-weight: 600;
    letter-spacing: -0.02em;
}

body:not(.landing-active) h1 {
    font-size: var(--font-page-title-size);
    line-height: var(--font-page-title-line);
}

body:not(.landing-active) h2 {
    font-size: var(--font-section-title-size);
    line-height: var(--font-section-title-line);
}

body:not(.landing-active) h3,
body:not(.landing-active) h4 {
    font-size: var(--font-card-title-size);
    line-height: var(--font-card-title-line);
}

body:not(.landing-active) p {
    color: var(--app-body);
}

body:not(.landing-active) small {
    color: var(--app-muted);
    font-size: var(--font-meta-size);
    line-height: var(--font-meta-line);
}

/* Buttons and text actions */
.btn {
    min-height: var(--app-control-height);
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: 600 var(--font-button-size)/var(--font-button-line) var(--font-sans);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        color var(--motion-base),
        background-color var(--motion-base),
        border-color var(--motion-base),
        box-shadow var(--motion-base),
        transform var(--motion-fast);
}

.btn:hover {
    text-decoration: none;
}

.btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
}

.btn:focus-visible,
.btn-icon:focus-visible,
.btn-icon-only:focus-visible,
.modal-close:focus-visible,
.btn-text:focus-visible,
.btn-link:focus-visible,
.link-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn-primary {
    color: var(--app-on-accent);
    background: var(--app-accent);
    border-color: var(--app-accent);
    box-shadow: var(--shadow-subtle);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--app-on-accent);
    background: var(--app-accent-hover);
    border-color: var(--app-accent-hover);
    box-shadow: var(--shadow-raised);
}

.btn-secondary {
    color: var(--app-ink);
    background: var(--app-surface-raised);
    border-color: var(--app-border);
    box-shadow: var(--shadow-subtle);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--app-ink);
    background: var(--app-surface-soft);
    border-color: var(--app-border-strong);
}

.btn-ghost,
.btn-text,
.btn-link,
.link-button {
    color: var(--app-accent);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-ghost:hover:not(:disabled),
.btn-text:hover:not(:disabled),
.btn-link:hover:not(:disabled),
.link-button:hover:not(:disabled) {
    color: var(--app-accent-hover);
    background: var(--app-accent-soft);
}

.btn-danger,
.btn-danger-soft {
    color: var(--app-danger);
    background: var(--app-danger-soft);
    border-color: var(--app-danger-border);
    box-shadow: none;
}

.btn-danger:hover:not(:disabled):not([aria-disabled="true"]),
.btn-danger-soft:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--app-on-danger);
    background: var(--app-danger);
    border-color: var(--app-danger);
}

.btn-warning {
    color: var(--app-warning);
    background: var(--app-warning-soft);
    border-color: var(--app-warning-border);
}

.btn-sm {
    min-height: 36px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-meta-size);
}

.btn-lg {
    min-height: 52px;
    padding-inline: var(--space-5);
}

.btn-block,
.btn-full,
.w-full {
    width: 100%;
}

.btn[aria-busy="true"],
.btn.is-loading {
    position: relative;
    cursor: wait;
    pointer-events: none;
}

.btn[aria-busy="true"]::before,
.btn.is-loading::before {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    content: "";
    animation: app-component-spin 720ms linear infinite;
}

.btn-icon,
.btn-icon-only,
.modal-close {
    width: var(--app-control-height);
    min-width: var(--app-control-height);
    height: var(--app-control-height);
    min-height: var(--app-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    color: var(--app-body);
    background: var(--app-surface-raised);
    box-shadow: var(--shadow-subtle);
    line-height: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        color var(--motion-base),
        background-color var(--motion-base),
        border-color var(--motion-base),
        box-shadow var(--motion-base),
        transform var(--motion-fast);
}

.btn-icon:hover:not(:disabled),
.btn-icon-only:hover:not(:disabled),
.modal-close:hover:not(:disabled) {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: color-mix(in srgb, var(--app-accent) 34%, var(--app-border));
}

.btn-icon:active:not(:disabled),
.btn-icon-only:active:not(:disabled),
.modal-close:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-icon svg,
.btn-icon-only svg,
.modal-close svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke-width: 1.8;
}

.btn-icon.btn-sm,
.btn-icon-only.btn-sm {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
}

.btn-icon.btn-danger,
.btn-icon.btn-danger-soft,
.btn-icon-only.btn-danger,
.btn-icon-only.btn-danger-soft {
    color: var(--app-danger);
    background: var(--app-danger-soft);
    border-color: var(--app-danger-border);
}

.btn-icon.btn-danger:hover:not(:disabled),
.btn-icon.btn-danger-soft:hover:not(:disabled),
.btn-icon-only.btn-danger:hover:not(:disabled),
.btn-icon-only.btn-danger-soft:hover:not(:disabled) {
    color: var(--app-on-danger);
    background: var(--app-danger);
    border-color: var(--app-danger);
}

/* Form controls */
.form-group {
    min-width: 0;
    margin-bottom: var(--space-4);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label,
.form-group > label:not(.toggle-switch):not(.switch),
.field-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--app-body);
    font-size: var(--font-label-size);
    font-weight: 600;
    line-height: var(--font-label-line);
}

.form-input,
.profile-form-input,
.form-select,
.form-textarea,
.form-control,
.search-field-input,
.modern-search-input {
    width: 100%;
    min-height: var(--app-control-height);
    padding: 10px 12px;
    border: 1px solid var(--app-input-border);
    border-radius: var(--radius-md);
    color: var(--app-ink);
    background: var(--app-surface-soft);
    box-shadow: none;
    font: 400 var(--font-body-size)/var(--font-body-line) var(--font-sans);
    transition:
        color var(--motion-base),
        background-color var(--motion-base),
        border-color var(--motion-base),
        box-shadow var(--motion-base);
}

.form-input:hover:not(:disabled),
.profile-form-input:hover:not(:disabled),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled),
.form-control:hover:not(:disabled) {
    border-color: var(--app-border-strong);
}

.form-input:focus,
.profile-form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-control:focus,
.search-field-input:focus,
.modern-search-input:focus {
    outline: none;
    border-color: var(--app-focus);
    background: var(--app-surface-raised);
    box-shadow: var(--focus-ring);
}

.form-input::placeholder,
.profile-form-input::placeholder,
.form-textarea::placeholder,
.form-control::placeholder,
.search-field-input::placeholder,
.modern-search-input::placeholder {
    color: var(--app-subtle);
    opacity: 1;
}

.form-input:disabled,
.profile-form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.form-control:disabled {
    color: var(--app-subtle);
    background: var(--app-surface-strong);
    border-color: var(--app-border);
    opacity: 0.66;
    cursor: not-allowed;
}

.form-textarea,
textarea.form-input,
textarea.profile-form-input,
textarea.form-control {
    min-height: 112px;
    resize: vertical;
}

select.form-input,
select.profile-form-input,
.form-select,
select.form-control {
    padding-right: 40px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23918a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

select[multiple].form-input,
select[multiple].profile-form-input,
select[multiple].form-select,
select[multiple].form-control {
    min-height: 128px;
    padding: var(--space-2);
    appearance: auto;
    background-image: none;
}

select[multiple] option {
    margin-bottom: 2px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

/* Baseline for ANY select that hasn't opted into one of the canonical form
   classes above — closes the gap where a dropdown falls back to the raw
   OS/browser arrow instead of the app's chevron. Purely cosmetic (appearance
   + background-image), so it's safe to apply broadly; any select that already
   defines its own appearance/background-image (more specific selector) keeps
   winning as normal. Excludes the Quill rich-text toolbar, which intentionally
   keeps its own third-party control styling. */
select:not(.ql-header):not([multiple]) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23918a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

/* Baseline number-input spinner removal — the app doesn't use native
   increment/decrement arrows anywhere else, so a bare number input showing
   them (e.g. Betrag/BPM fields) reads as a foreign control. */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.search-field-input,
.modern-search-input {
    padding-left: 44px;
    border-radius: var(--radius-full);
}

.search-field-container,
.search-container {
    position: relative;
    width: 100%;
}

.search-field-icon,
.search-icon {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.form-input[aria-invalid="true"],
.profile-form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-control[aria-invalid="true"],
body:not(.landing-active) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):user-invalid,
body:not(.landing-active) select:user-invalid,
body:not(.landing-active) textarea:user-invalid,
.is-invalid {
    border-color: var(--app-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-danger) 18%, transparent);
}

.field-error,
.validation-message,
.form-error {
    display: block;
    margin-top: var(--space-2);
    color: var(--app-danger);
    font-size: var(--font-meta-size);
    line-height: var(--font-meta-line);
}

.field-success,
.form-success {
    display: block;
    margin-top: var(--space-2);
    color: var(--app-success);
    font-size: var(--font-meta-size);
}

.help-text,
.field-hint,
.form-hint {
    color: var(--app-muted);
    font-size: var(--font-meta-size);
    line-height: var(--font-meta-line);
}

.form-checkbox,
.form-radio,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--app-accent);
}

.form-checkbox,
.form-radio {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    cursor: pointer;
}

.form-checkbox:focus-visible,
.form-radio:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--app-focus) 24%, transparent);
    outline-offset: 2px;
}

.toggle-switch,
.switch {
    position: relative;
    flex: 0 0 auto;
}

.toggle-switch {
    min-width: 46px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.switch {
    width: 48px;
    height: 44px;
    display: inline-flex;
    align-items: center;
}

.toggle-switch input,
.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.toggle-slider,
.switch-slider {
    position: relative;
    width: 46px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--radius-full);
    background: var(--app-surface-strong);
    cursor: pointer;
    transition: background-color var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base);
}

.switch .slider {
    position: absolute;
    inset: 50% 0 auto;
    height: 26px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--radius-full);
    background: var(--app-surface-strong);
    cursor: pointer;
    transition: background-color var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base);
}

.toggle-slider::before,
.switch .slider::before,
.switch-slider::before {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--app-surface-raised);
    box-shadow: var(--shadow-subtle);
    content: "";
    transition: transform var(--motion-base), background-color var(--motion-base);
}

.toggle-switch input:checked + .toggle-slider,
.switch input:checked + .slider,
.switch input:checked + .switch-slider {
    border-color: var(--app-accent);
    background: var(--app-accent);
}

.toggle-switch input:checked + .toggle-slider::before,
.switch input:checked + .slider::before,
.switch input:checked + .switch-slider::before {
    transform: translateX(20px);
    background: var(--app-on-accent);
}

.toggle-switch input:focus-visible + .toggle-slider,
.switch input:focus-visible + .slider,
.switch input:focus-visible + .switch-slider,
.toggle-switch[role="switch"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Cards, panels and states */
.card,
.panel,
.page-section-card,
.page-overview-card {
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface-raised);
    box-shadow: var(--shadow-subtle);
}

.badge,
.chip,
.status-pill,
.role-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-full);
    color: var(--app-body);
    background: var(--app-surface-soft);
    font-size: var(--font-meta-size);
    font-weight: 600;
    line-height: 1.2;
}

.badge-success,
.status-success {
    color: var(--app-success);
    background: var(--app-success-soft);
    border-color: var(--app-success-border);
}

.badge-warning,
.status-warning {
    color: var(--app-warning);
    background: var(--app-warning-soft);
    border-color: var(--app-warning-border);
}

.badge-danger,
.status-danger,
.badge-error,
.status-error {
    color: var(--app-danger);
    background: var(--app-danger-soft);
    border-color: var(--app-danger-border);
}

.badge-info,
.status-info,
.badge-primary {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
}

.avatar,
.avatar-img,
.user-avatar,
.member-avatar {
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.empty-state,
.empty-state-compact,
.error-state,
.loading-state {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    border: 1px dashed var(--app-border);
    border-radius: var(--radius-lg);
    color: var(--app-muted);
    background: var(--app-surface-soft);
    text-align: center;
}

.empty-state-compact,
.loading-state-sm {
    min-height: 88px;
    padding: var(--space-4);
}

.empty-state p,
.empty-state-compact p,
.error-state p,
.loading-state p {
    max-width: 54ch;
    margin: 0;
    color: inherit;
}

.empty-state-compact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--app-accent) 24%, var(--app-border));
    border-radius: 0.75rem;
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.empty-state-compact-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.error-state {
    color: var(--app-danger);
    background: var(--app-danger-soft);
    border-color: var(--app-danger-border);
}

.spinner,
.loading-spinner,
.loading-spinner-circle,
.spinner-border,
.spinner-border-sm {
    width: 24px;
    height: 24px;
    display: inline-block;
    flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--app-accent) 24%, transparent);
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: app-component-spin 720ms linear infinite;
}

.spinner-sm,
.spinner-border-sm {
    width: 16px;
    height: 16px;
}

.skeleton,
.skeleton-line,
.skeleton-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--app-surface-strong);
}

.skeleton::after,
.skeleton-line::after,
.skeleton-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-ink) 8%, transparent), transparent);
    content: "";
    transform: translateX(-100%);
    animation: app-component-skeleton 1.35s ease-in-out infinite;
}

/* Tabs, tables and uploads */
.tab-nav,
.modal-tabs,
.settings-tabs,
.schedule-tabs,
#bandModalTabs,
#orgModalTabs,
.segmented-control {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-soft);
}

.tab-btn,
.settings-tab-btn,
.schedule-tab-btn,
.segmented-control > button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--app-muted);
    background: transparent;
    font: 600 var(--font-meta-size)/1.3 var(--font-sans);
    cursor: pointer;
    transition: color var(--motion-base), background-color var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base);
}

.tab-btn:hover,
.settings-tab-btn:hover,
.schedule-tab-btn:hover,
.segmented-control > button:hover {
    color: var(--app-ink);
    background: var(--app-surface-raised);
}

.tab-btn.active,
.tab-btn[aria-selected="true"],
.settings-tab-btn.active,
.settings-tab-btn[aria-selected="true"],
.schedule-tab-btn.active,
.schedule-tab-btn[aria-selected="true"],
.segmented-control > button.active,
.segmented-control > button[aria-pressed="true"] {
    color: var(--app-accent);
    background: var(--app-surface-raised);
    border-color: var(--app-border);
    box-shadow: var(--shadow-subtle);
}

.tab-btn:focus-visible,
.settings-tab-btn:focus-visible,
.schedule-tab-btn:focus-visible,
.segmented-control > button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.table-wrapper,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface-raised);
    -webkit-overflow-scrolling: touch;
}

.table,
table.app-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--app-body);
    font-size: var(--font-body-size);
}

.table th,
.table td,
table.app-table th,
table.app-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--app-border);
    text-align: left;
    vertical-align: middle;
}

.table th,
table.app-table th {
    color: var(--app-muted);
    background: var(--app-surface-soft);
    font-size: var(--font-meta-size);
    font-weight: 600;
}

.table tbody tr:last-child td,
table.app-table tbody tr:last-child td {
    border-bottom: 0;
}

.file-upload-wrapper,
.upload-dropzone {
    position: relative;
    width: 100%;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px dashed var(--app-border-strong);
    border-radius: var(--radius-lg);
    color: var(--app-muted);
    background: var(--app-surface-soft);
    text-align: center;
    transition: color var(--motion-base), background-color var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base);
}

.file-upload-wrapper:hover,
.upload-dropzone:hover,
.upload-dropzone.drag-over {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: var(--app-accent);
}

.file-upload-wrapper:focus-within,
.upload-dropzone:focus-within {
    box-shadow: var(--focus-ring);
}

.file-upload-hint {
    margin: 0;
    color: var(--app-muted);
    font-size: var(--font-meta-size);
}

/* Tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    position: absolute;
    z-index: 1200;
    left: 50%;
    bottom: calc(100% + var(--space-2));
    max-width: min(280px, calc(100vw - 32px));
    padding: 7px 9px;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-sm);
    color: var(--app-ink);
    background: var(--app-surface-raised);
    box-shadow: var(--shadow-raised);
    content: attr(data-tooltip);
    font-size: var(--font-meta-size);
    line-height: var(--font-meta-line);
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--motion-fast), transform var(--motion-fast);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Dialog and modal structure */
html.modal-open,
body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--app-overlay);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal.active {
    display: flex;
}

.modal-content {
    width: min(100%, 560px);
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    color: var(--app-ink);
    background: var(--app-surface-raised);
    box-shadow: var(--shadow-overlay);
}

.modal-large,
.modal-lg {
    width: min(100%, 960px);
    max-width: 960px;
}

.modal-xl {
    width: min(100%, 1200px);
    max-width: 1200px;
}

.modal-header {
    min-height: 68px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-raised);
}

.modal-title-copy {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}

.modal-kicker {
    color: var(--app-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.modal-header h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

.modal-body {
    min-height: 0;
    padding: var(--space-5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-actions,
.modal-footer {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-raised);
}

.modal-actions-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-left: auto;
}

.modal-close {
    flex: 0 0 var(--app-control-height);
}

.app-dialog-content {
    width: min(100%, 480px);
}

.app-dialog-message {
    margin: 0;
    color: var(--app-body);
    white-space: pre-line;
}

.app-dialog-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-dialog-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
    border-radius: var(--radius-md);
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

.app-dialog-icon svg {
    width: 18px;
    height: 18px;
}

.app-prompt-form {
    display: grid;
    gap: var(--space-4);
}

.app-loading-message {
    margin: 0;
    color: var(--app-ink);
    font-weight: 600;
}

.pdf-preview-container,
.preview-container,
.document-preview-surface {
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface-soft);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-ink) 4%, transparent);
}

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

@keyframes app-component-skeleton {
    to { transform: translateX(100%); }
}

@media (max-width: 820px), (max-width: 900px) and (max-height: 500px) {
    .btn {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-icon,
    .btn-icon-only,
    .modal-close {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .form-input,
    .profile-form-input,
    .form-select,
    .form-textarea,
    .form-control,
    .search-field-input,
    .modern-search-input {
        min-height: 46px;
        font-size: 16px;
    }

    .modal {
        align-items: flex-end;
        padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-2), env(safe-area-inset-right)) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left));
    }

    .modal-content,
    .modal-large,
    .modal-lg,
    .modal-xl {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
        border-radius: var(--radius-lg);
    }

    .modal-header {
        min-height: 64px;
        padding: var(--space-3) var(--space-4);
    }

    .modal-body {
        padding: var(--space-4);
    }

    .modal-actions,
    .modal-footer {
        position: sticky;
        bottom: 0;
        min-height: 72px;
        padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    }

    .modal-actions > .btn,
    .modal-footer > .btn,
    .modal-actions-right > .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .tab-nav,
    .modal-tabs,
    .settings-tabs,
    .schedule-tabs,
    #bandModalTabs,
    #orgModalTabs,
    .segmented-control {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .tab-nav::-webkit-scrollbar,
    .modal-tabs::-webkit-scrollbar,
    .settings-tabs::-webkit-scrollbar,
    .schedule-tabs::-webkit-scrollbar,
    #bandModalTabs::-webkit-scrollbar,
    #orgModalTabs::-webkit-scrollbar,
    .segmented-control::-webkit-scrollbar {
        display: none;
    }

    .tab-btn,
    .settings-tab-btn,
    .schedule-tab-btn,
    .segmented-control > button {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    body:not(.landing-active) label:has(> .form-checkbox),
    body:not(.landing-active) label:has(> .form-radio) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
    }

    .table-wrapper,
    .table-responsive {
        border-radius: var(--radius-md);
    }

    .table,
    table.app-table,
    .finance-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    .modal-actions,
    .modal-footer,
    .modal-actions-right {
        gap: var(--space-2);
    }

    .modal-actions .btn,
    .modal-footer .btn {
        padding-inline: var(--space-3);
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-icon,
    .btn-icon-only,
    .modal-close,
    .form-input,
    .profile-form-input,
    .form-select,
    .form-textarea,
    .form-control,
    .toggle-slider,
    .switch .slider,
    .switch-slider {
        transition: none;
    }

    .spinner,
    .loading-spinner,
    .loading-spinner-circle,
    .spinner-border,
    .spinner-border-sm,
    .btn[aria-busy="true"]::before,
    .btn.is-loading::before,
    .skeleton::after,
    .skeleton-line::after,
    .skeleton-card::after {
        animation-duration: 1.5s;
    }
}

/* Shared member-role editor */

.role-edit-modal .role-edit-modal-content {
    width: min(100%, 620px);
    max-width: 620px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--app-accent-soft) 36%, transparent), transparent 180px),
        var(--app-surface-raised);
}

.role-edit-modal .role-edit-modal-header {
    background: color-mix(in srgb, var(--app-surface-raised) 84%, var(--app-accent-soft));
}

.role-edit-modal-subtitle {
    max-width: 34rem;
    margin: 0;
    color: var(--app-body);
    font-size: var(--font-body-size);
    line-height: var(--font-body-line);
}

.role-edit-modal .role-edit-modal-body {
    display: grid;
    gap: var(--space-3);
}

.role-edit-summary-card,
.role-edit-section,
.role-edit-danger-card {
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-soft);
    box-shadow: var(--shadow-subtle);
}

#editRoleModal .role-edit-section[hidden],
#editRoleModal .role-option-card[hidden],
#editOrgRoleModal .role-option-card[hidden],
#editRoleModal .role-edit-danger-card[hidden],
#editRoleModal #saveEditRoleBtn[hidden] {
    display: none !important;
}

.role-edit-summary-card {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.role-edit-summary-label,
.role-edit-section-head > span {
    color: var(--app-ink);
    font-size: var(--font-meta-size);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: var(--font-meta-line);
    text-transform: uppercase;
}

.role-edit-section {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.role-edit-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.role-edit-section-head small {
    max-width: 18rem;
    color: var(--app-muted);
    font-size: var(--font-meta-size);
    font-weight: 500;
    line-height: var(--font-meta-line);
    text-align: right;
}

.role-edit-native-select {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.role-option-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.role-option-card {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    color: var(--app-ink);
    background: var(--app-surface-raised);
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform var(--motion-fast),
        border-color var(--motion-base),
        background-color var(--motion-base),
        box-shadow var(--motion-base);
}

.role-option-card:hover {
    transform: translateY(-1px);
    border-color: var(--app-border-strong);
    background: var(--app-accent-soft);
}

.role-option-card:focus-within {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.role-option-card.is-selected {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 22%, transparent);
}

.role-option-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.role-option-icon,
.role-option-check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.role-option-icon {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
    border-radius: var(--radius-md);
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

.role-option-icon svg {
    width: 20px;
    height: 20px;
}

.role-option-check {
    justify-self: end;
    width: 24px;
    height: 24px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--radius-full);
    color: transparent;
    background: var(--app-surface-raised);
}

.role-option-check svg {
    width: 15px;
    height: 15px;
}

.role-option-card.is-selected .role-option-check {
    border-color: var(--app-accent);
    color: var(--app-on-accent);
    background: var(--app-accent);
}

.role-option-copy {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    overflow: hidden;
}

.role-option-copy strong,
.role-option-copy small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.role-option-copy strong {
    color: var(--app-ink);
    font-size: var(--font-label-size);
    font-weight: 700;
    line-height: var(--font-label-line);
}

.role-option-copy small {
    color: var(--app-body);
    font-size: var(--font-meta-size);
    line-height: var(--font-meta-line);
}

.role-edit-danger-card {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border-color: var(--app-danger-border);
    background: var(--app-danger-soft);
}

.role-edit-danger-copy {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}

.role-edit-danger-copy strong {
    color: var(--app-ink);
    font-size: var(--font-label-size);
    line-height: var(--font-label-line);
}

.role-edit-danger-copy span {
    color: var(--app-body);
    font-size: var(--font-meta-size);
    line-height: var(--font-meta-line);
}

.role-edit-danger-action {
    min-height: var(--app-control-height);
    flex: 0 0 auto;
}

.role-edit-actions {
    gap: var(--space-3);
}

.role-edit-actions .btn {
    min-width: 124px;
}

.role-edit-actions svg,
.role-edit-danger-action svg {
    width: 17px;
    height: 17px;
}

@media (min-width: 821px) {
    #editRoleModal .role-edit-actions {
        justify-content: space-between;
    }
}

@media (max-width: 820px) {
    .role-edit-modal .role-edit-modal-content {
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    }

    .role-edit-modal .role-edit-modal-body {
        gap: var(--space-3);
    }

    .role-edit-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }

    .role-edit-section-head small {
        max-width: none;
        text-align: left;
    }

    .role-edit-danger-card {
        align-items: stretch;
        flex-direction: column;
    }

    .role-edit-danger-action {
        width: 100%;
    }

    .role-edit-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .role-edit-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .role-edit-actions.is-single-action {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 430px) {
    .role-edit-summary-card,
    .role-edit-section,
    .role-edit-danger-card {
        padding: var(--space-3);
    }

    .role-option-card {
        min-height: 72px;
        grid-template-columns: 36px minmax(0, 1fr) 24px;
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .role-option-icon {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .role-option-card {
        transition: none;
    }
}

/* Dynamic selector cards must honor semantic hidden states. */
[data-song-selector-card][hidden] {
    display: none;
}

/* Shared segmented view switch used by Songpool and settings workspaces. */
.songpool-view-switch {
    display: flex;
    margin-right: 1rem;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-secondary) 40%, transparent);
}

.songpool-view-switch .switch-btn {
    min-height: 38px;
    padding: 6px 14px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--text-secondary);
    font: 500 0.85rem/1.2 var(--font-sans);
    cursor: pointer;
    transition:
        color var(--motion-fast),
        background-color var(--motion-fast),
        box-shadow var(--motion-fast);
}

.songpool-view-switch .switch-btn.active {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.songpool-view-switch .switch-btn:not(.active):hover {
    background: color-mix(in srgb, var(--surface-secondary) 60%, transparent);
    color: var(--text-primary);
}

.songpool-view-switch .switch-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 68%, transparent);
    outline-offset: 2px;
}

@media (max-width: 820px) {
    .songpool-view-switch {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.75rem;
        justify-content: center;
    }

    .songpool-view-switch .switch-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        text-align: center;
    }
}