/* Deutsche Kommentar: Zentrale Panable-Komponenten für alle geschützten Produktbereiche. */
:root {
    --panable-button-font-family: 'Montserrat', sans-serif;
    --panable-button-font-size: 0.875rem;
    --panable-button-font-weight: 700;
    --panable-button-line-height: 1.1;
    --panable-button-min-height: 2.75rem;
    --panable-button-padding-block: 0.65rem;
    --panable-button-padding-inline: 1rem;
    --panable-button-radius: 0.65rem;
    --panable-button-primary-bg: var(--studio-theme-primary-bg, #c49c48);
    --panable-button-primary-bg-hover: var(--studio-theme-primary-bg-hover, #d5b56c);
    --panable-button-primary-bg-active: var(--studio-theme-primary-bg-pressed, var(--panable-button-primary-bg-hover));
    --panable-button-primary-text: var(--studio-theme-primary-action-text, #111827);
    --panable-button-secondary-bg: var(--studio-theme-secondary-action-bg, rgba(74, 71, 66, 0.72));
    --panable-button-secondary-bg-hover: var(--studio-theme-secondary-action-bg-hover, rgba(88, 84, 75, 0.78));
    --panable-button-secondary-border: var(--studio-theme-secondary-action-border, transparent);
    --panable-button-secondary-border-hover: var(--studio-theme-secondary-action-border-hover, transparent);
    --panable-button-secondary-text: var(--studio-theme-secondary-action-text, #f5f5f5);
    --panable-button-danger-bg: var(--studio-theme-danger-bg, rgba(185, 28, 28, 0.22));
    --panable-button-danger-bg-hover: var(--studio-theme-danger-bg-hover, rgba(185, 28, 28, 0.3));
    --panable-button-danger-border: var(--studio-theme-danger-border, rgba(248, 113, 113, 0.46));
    --panable-button-danger-text: var(--studio-theme-danger-text, #fecaca);
    --panable-button-focus: var(--studio-theme-active-border, rgba(226, 179, 51, 0.52));
    --panable-field-font-family: 'Montserrat', sans-serif;
    --panable-field-font-size: 0.875rem;
    --panable-field-font-weight: 500;
    --panable-field-line-height: 1.35;
    --panable-field-min-height: 2.75rem;
    --panable-field-padding-block: 0.65rem;
    --panable-field-padding-inline: 0.8rem;
    --panable-field-radius: 0.65rem;
    --panable-field-compact-font-size: 0.8rem;
    --panable-field-compact-min-height: 2.375rem;
    --panable-field-compact-padding-block: 0.45rem;
    --panable-field-compact-padding-inline: 0.65rem;
    --panable-field-bg: var(--studio-theme-form-field-bg, #1b1b1b);
    --panable-field-bg-focus: var(--studio-theme-form-field-bg-focus, #202020);
    --panable-field-bg-readonly: var(--studio-theme-surface-sunken, #252525);
    --panable-field-border: var(--studio-theme-border-strong, #4a4a4a);
    --panable-field-border-focus: var(--studio-theme-active-border, rgba(226, 179, 51, 0.52));
    --panable-field-text: var(--studio-theme-text, #f5f5f5);
    --panable-field-placeholder: var(--studio-theme-text-muted, #9ca3af);
    --panable-field-caret: var(--studio-theme-active-text, #f4d682);
    --panable-field-invalid-bg: var(--studio-theme-danger-bg, rgba(185, 28, 28, 0.22));
    --panable-field-invalid-border: var(--studio-theme-danger-border, rgba(248, 113, 113, 0.46));
    --panable-field-invalid-text: var(--studio-theme-danger-text, #fecaca);
    --panable-field-option-bg: var(--studio-theme-surface-popover, #2d2d2d);
    --panable-field-option-font-size: 0.875rem;
    --panable-field-select-arrow: var(--studio-theme-select-arrow-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
}

html.crstudio-theme-light {
    --panable-field-bg: var(--studio-theme-form-field-bg, rgba(255, 255, 255, 0.52));
    --panable-field-bg-focus: var(--studio-theme-form-field-bg-focus, rgba(255, 255, 255, 0.7));
    --panable-field-select-arrow: var(--studio-theme-select-arrow-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%233c3524' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
}

/* Deutsche Kommentar: Bestehende Bereichsklassen werden bewusst auf denselben Baustein abgebildet. */
.panable-button,
.studio-btn,
.btn,
.dashboard-button,
.auth-container .btn-primary,
.auth-container .btn-secondary:not(.btn-facebook),
.auth-container .btn-apple,
.auth-container .btn-facebook,
.audio-job-action-button,
.audio-job-secondary-button,
.agent-deploy-action,
.workspace-button,
.pani-knowledge-danger-button,
.status-layer-action,
.status-layer-close,
#save-plan,
#lock-account,
#unlock-account,
#schedule-deletion,
#cancel-deletion,
#open-support-session,
#back-to-users,
#pani-stats-refresh {
    display: inline-flex;
    min-height: var(--panable-button-min-height);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--panable-button-padding-block) var(--panable-button-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--panable-button-radius);
    box-shadow: none;
    font-family: var(--panable-button-font-family);
    font-size: var(--panable-button-font-size);
    font-weight: var(--panable-button-font-weight);
    line-height: var(--panable-button-line-height);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.panable-button:hover:not(:disabled),
.studio-btn:hover:not(:disabled),
.btn:hover:not(:disabled),
.dashboard-button:hover:not(:disabled),
.auth-container .btn-primary:hover:not(:disabled),
.auth-container .btn-secondary:not(.btn-facebook):hover:not(:disabled),
.auth-container .btn-apple:hover:not(:disabled),
.auth-container .btn-facebook:hover:not(:disabled),
.audio-job-action-button:hover:not(:disabled),
.audio-job-secondary-button:hover:not(:disabled),
.agent-deploy-action:hover:not(:disabled),
.workspace-button:hover:not(:disabled),
.pani-knowledge-danger-button:hover:not(:disabled),
.status-layer-action:hover:not(:disabled),
.status-layer-close:hover:not(:disabled),
#save-plan:hover:not(:disabled),
#lock-account:hover:not(:disabled),
#unlock-account:hover:not(:disabled),
#schedule-deletion:hover:not(:disabled),
#cancel-deletion:hover:not(:disabled),
#open-support-session:hover:not(:disabled),
#back-to-users:hover:not(:disabled),
#pani-stats-refresh:hover:not(:disabled) {
    box-shadow: 0 6px 14px rgba(var(--studio-theme-shadow-rgb, 0, 0, 0), 0.18);
    transform: translateY(-1px);
}

.panable-button:focus-visible,
.studio-btn:focus-visible,
.btn:focus-visible,
.dashboard-button:focus-visible,
.auth-container .btn-primary:focus-visible,
.auth-container .btn-secondary:not(.btn-facebook):focus-visible,
.auth-container .btn-apple:focus-visible,
.auth-container .btn-facebook:focus-visible,
.audio-job-action-button:focus-visible,
.audio-job-secondary-button:focus-visible,
.agent-deploy-action:focus-visible,
.workspace-button:focus-visible,
.pani-knowledge-danger-button:focus-visible,
.status-layer-action:focus-visible,
.status-layer-close:focus-visible,
#save-plan:focus-visible,
#lock-account:focus-visible,
#unlock-account:focus-visible,
#schedule-deletion:focus-visible,
#cancel-deletion:focus-visible,
#open-support-session:focus-visible,
#back-to-users:focus-visible,
#pani-stats-refresh:focus-visible {
    outline: 2px solid var(--panable-button-focus);
    outline-offset: 2px;
}

.panable-button:active:not(:disabled),
.studio-btn:active:not(:disabled),
.btn:active:not(:disabled),
.dashboard-button:active:not(:disabled),
.auth-container .btn-primary:active:not(:disabled),
.auth-container .btn-secondary:not(.btn-facebook):active:not(:disabled),
.auth-container .btn-apple:active:not(:disabled),
.auth-container .btn-facebook:active:not(:disabled),
.audio-job-action-button:active:not(:disabled),
.audio-job-secondary-button:active:not(:disabled),
.agent-deploy-action:active:not(:disabled),
.workspace-button:active:not(:disabled),
.pani-knowledge-danger-button:active:not(:disabled),
.status-layer-action:active:not(:disabled),
.status-layer-close:active:not(:disabled),
#save-plan:active:not(:disabled),
#lock-account:active:not(:disabled),
#unlock-account:active:not(:disabled),
#schedule-deletion:active:not(:disabled),
#cancel-deletion:active:not(:disabled),
#open-support-session:active:not(:disabled),
#back-to-users:active:not(:disabled),
#pani-stats-refresh:active:not(:disabled) {
    box-shadow: none;
    transform: translateY(1px);
}

.panable-button:disabled,
.studio-btn:disabled,
.btn:disabled,
.dashboard-button:disabled,
.auth-container .btn-primary:disabled,
.auth-container .btn-secondary:not(.btn-facebook):disabled,
.auth-container .btn-apple:disabled,
.auth-container .btn-facebook:disabled,
.audio-job-action-button:disabled,
.audio-job-secondary-button:disabled,
.agent-deploy-action:disabled,
.workspace-button:disabled,
.pani-knowledge-danger-button:disabled,
.status-layer-action:disabled,
.status-layer-close:disabled,
#save-plan:disabled,
#lock-account:disabled,
#unlock-account:disabled,
#schedule-deletion:disabled,
#cancel-deletion:disabled,
#open-support-session:disabled,
#back-to-users:disabled,
#pani-stats-refresh:disabled {
    box-shadow: none;
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.panable-button-primary,
.studio-btn-primary,
.btn-primary,
.dashboard-button-primary,
.audio-job-action-button,
.agent-deploy-action,
.workspace-button,
.status-layer-action.is-unlock,
#save-plan,
#unlock-account,
#cancel-deletion,
#open-support-session {
    border-color: var(--panable-button-primary-bg);
    background: var(--panable-button-primary-bg);
    color: var(--panable-button-primary-text);
}

.panable-button-primary:hover:not(:disabled),
.studio-btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.dashboard-button-primary:hover:not(:disabled),
.audio-job-action-button:hover:not(:disabled),
.agent-deploy-action:hover:not(:disabled),
.workspace-button:hover:not(:disabled),
.status-layer-action.is-unlock:hover:not(:disabled),
#save-plan:hover:not(:disabled),
#unlock-account:hover:not(:disabled),
#cancel-deletion:hover:not(:disabled),
#open-support-session:hover:not(:disabled) {
    border-color: var(--panable-button-primary-bg-hover);
    background: var(--panable-button-primary-bg-hover);
    color: var(--panable-button-primary-text);
}

.panable-button-primary:active:not(:disabled),
.studio-btn-primary:active:not(:disabled),
.btn-primary:active:not(:disabled),
.dashboard-button-primary:active:not(:disabled),
.audio-job-action-button:active:not(:disabled),
.agent-deploy-action:active:not(:disabled),
.workspace-button:active:not(:disabled),
.status-layer-action.is-unlock:active:not(:disabled),
#save-plan:active:not(:disabled),
#unlock-account:active:not(:disabled),
#cancel-deletion:active:not(:disabled),
#open-support-session:active:not(:disabled) {
    border-color: var(--panable-button-primary-bg-active);
    background: var(--panable-button-primary-bg-active);
}

.panable-button-secondary,
.studio-btn-secondary,
.btn-secondary:not(.btn-facebook),
.dashboard-button-secondary,
.audio-job-secondary-button,
.status-layer-close,
#back-to-users,
#pani-stats-refresh {
    border-color: var(--panable-button-secondary-border);
    background: var(--panable-button-secondary-bg);
    color: var(--panable-button-secondary-text);
}

.panable-button-secondary:hover:not(:disabled),
.studio-btn-secondary:hover:not(:disabled),
.btn-secondary:not(.btn-facebook):hover:not(:disabled),
.dashboard-button-secondary:hover:not(:disabled),
.audio-job-secondary-button:hover:not(:disabled),
.status-layer-close:hover:not(:disabled),
#back-to-users:hover:not(:disabled),
#pani-stats-refresh:hover:not(:disabled) {
    border-color: var(--panable-button-secondary-border-hover);
    background: var(--panable-button-secondary-bg-hover);
    color: var(--panable-button-secondary-text);
}

.panable-button-danger,
.studio-btn-danger,
.btn-danger,
.dashboard-button-danger,
.pani-knowledge-danger-button,
.status-layer-action:not(.is-unlock),
#lock-account,
#schedule-deletion {
    border-color: var(--panable-button-danger-border);
    background: var(--panable-button-danger-bg);
    color: var(--panable-button-danger-text);
}

.panable-button-danger:hover:not(:disabled),
.studio-btn-danger:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.dashboard-button-danger:hover:not(:disabled),
.pani-knowledge-danger-button:hover:not(:disabled),
.status-layer-action:not(.is-unlock):hover:not(:disabled),
#lock-account:hover:not(:disabled),
#schedule-deletion:hover:not(:disabled) {
    border-color: var(--panable-button-danger-border);
    background: var(--panable-button-danger-bg-hover);
    color: var(--panable-button-danger-text);
}

.panable-button-sm,
.studio-btn-sm,
.btn-small {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
    font-size: 0.75rem;
}

.panable-button-lg,
.studio-btn-lg {
    min-height: 3rem;
    padding: 0.75rem 1.15rem;
    font-size: 1rem;
}

.studio-btn.hidden,
.hidden.studio-btn {
    display: none !important;
}

/* Deutsche Kommentar: Normale Formularfelder verwenden in allen Produktbereichen dieselbe Geometrie und Typografie. */
:root body :is(
    .panable-field,
    input:is(
        :not([type]),
        [type="text"],
        [type="email"],
        [type="password"],
        [type="search"],
        [type="url"],
        [type="tel"],
        [type="number"],
        [type="date"],
        [type="datetime-local"],
        [type="time"],
        [type="month"],
        [type="week"]
    ),
    select:not(.panable-field-exempt),
    textarea:not(.panable-field-exempt)
) {
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid var(--panable-field-border) !important;
    border-radius: var(--panable-field-radius) !important;
    background-color: var(--panable-field-bg) !important;
    color: var(--panable-field-text) !important;
    box-shadow: none !important;
    caret-color: var(--panable-field-caret);
    font-family: var(--panable-field-font-family) !important;
    font-size: var(--panable-field-font-size) !important;
    font-weight: var(--panable-field-font-weight) !important;
    line-height: var(--panable-field-line-height) !important;
    letter-spacing: 0 !important;
    text-transform: none;
    outline: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

:root body :is(
    .panable-field,
    input:is(
        :not([type]),
        [type="text"],
        [type="email"],
        [type="password"],
        [type="search"],
        [type="url"],
        [type="tel"],
        [type="number"],
        [type="date"],
        [type="datetime-local"],
        [type="time"],
        [type="month"],
        [type="week"]
    ),
    select:not(.panable-field-exempt)
) {
    min-height: var(--panable-field-min-height) !important;
    padding: var(--panable-field-padding-block) var(--panable-field-padding-inline) !important;
}

:root body textarea:not(.panable-field-exempt),
:root body textarea.panable-field {
    padding: var(--panable-field-padding-block) var(--panable-field-padding-inline) !important;
    resize: vertical;
}

:root body :is(
    .panable-field,
    input:is(
        :not([type]),
        [type="text"],
        [type="email"],
        [type="password"],
        [type="search"],
        [type="url"],
        [type="tel"],
        [type="number"],
        [type="date"],
        [type="datetime-local"],
        [type="time"],
        [type="month"],
        [type="week"]
    ),
    select:not(.panable-field-exempt),
    textarea:not(.panable-field-exempt)
)::placeholder {
    color: var(--panable-field-placeholder) !important;
    opacity: 0.88 !important;
}

:root body :is(
    .panable-field,
    input:is(
        :not([type]),
        [type="text"],
        [type="email"],
        [type="password"],
        [type="search"],
        [type="url"],
        [type="tel"],
        [type="number"],
        [type="date"],
        [type="datetime-local"],
        [type="time"],
        [type="month"],
        [type="week"]
    ),
    select:not(.panable-field-exempt),
    textarea:not(.panable-field-exempt)
):focus {
    border-color: var(--panable-field-border-focus) !important;
    background-color: var(--panable-field-bg-focus) !important;
    box-shadow: none !important;
    outline: none !important;
}

:root body select:not(.panable-field-exempt),
:root body select.panable-field {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 2.35rem !important;
    background-image: var(--panable-field-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 0.9rem !important;
}

:root body select:not(.panable-field-exempt) option {
    background: var(--panable-field-option-bg);
    color: var(--panable-field-text);
    font-family: var(--panable-field-font-family);
    font-size: var(--panable-field-option-font-size) !important;
    font-weight: var(--panable-field-font-weight);
    line-height: var(--panable-field-line-height);
}

:root body input[readonly],
:root body textarea:not(.panable-field-exempt)[readonly],
:root body .panable-field[readonly] {
    border-color: var(--panable-field-border) !important;
    background-color: var(--panable-field-bg-readonly) !important;
    color: var(--panable-field-placeholder) !important;
    box-shadow: none !important;
    cursor: default;
}

:root body :is(
    input:is(
        :not([type]),
        [type="text"],
        [type="email"],
        [type="password"],
        [type="search"],
        [type="url"],
        [type="tel"],
        [type="number"],
        [type="date"],
        [type="datetime-local"],
        [type="time"],
        [type="month"],
        [type="week"]
    ),
    select:not(.panable-field-exempt),
    textarea:not(.panable-field-exempt)
):disabled,
:root body .panable-field:disabled {
    border-color: var(--panable-field-border) !important;
    background-color: var(--panable-field-bg-readonly) !important;
    color: var(--panable-field-placeholder) !important;
    box-shadow: none !important;
    opacity: 0.55;
    cursor: not-allowed;
}

:root body :is(input, select:not(.panable-field-exempt), textarea:not(.panable-field-exempt)).is-invalid,
:root body :is(input, select:not(.panable-field-exempt), textarea:not(.panable-field-exempt))[aria-invalid="true"],
:root body .panable-field.is-invalid,
:root body .panable-field[aria-invalid="true"] {
    border-color: var(--panable-field-invalid-border) !important;
    background-color: var(--panable-field-invalid-bg) !important;
    color: var(--panable-field-invalid-text) !important;
    box-shadow: none !important;
}

:root body :is(input, textarea:not(.panable-field-exempt)):-webkit-autofill,
:root body :is(input, textarea:not(.panable-field-exempt)):-webkit-autofill:hover,
:root body :is(input, textarea:not(.panable-field-exempt)):-webkit-autofill:focus {
    border-color: var(--panable-field-border) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--panable-field-bg) inset !important;
    -webkit-text-fill-color: var(--panable-field-text) !important;
    caret-color: var(--panable-field-caret);
}

:root body input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.72;
}

/* Deutsche Kommentar: Dichte Filterleisten bleiben am Desktop kompakt; mobil gilt weiterhin die große Touch-Fläche. */
@media (min-width: 901px) {
    :root body :is(
        .panable-field-compact,
        .campus-filter-panel .campus-filter-input,
        .campus-filter-panel .campus-filter-select,
        .community-hub-people-filters input[type="search"],
        .community-hub-people-filters select
    ) {
        height: var(--panable-field-compact-min-height) !important;
        min-height: var(--panable-field-compact-min-height) !important;
        padding: var(--panable-field-compact-padding-block) var(--panable-field-compact-padding-inline) !important;
        font-size: var(--panable-field-compact-font-size) !important;
    }

    :root body select.panable-field-compact:not([multiple]),
    :root body .campus-filter-panel select.campus-filter-select,
    :root body .community-hub-people-filters select:not([multiple]) {
        padding-right: 2.35rem !important;
        font-size: var(--panable-field-option-font-size) !important;
    }
}

/* Deutsche Kommentar: Icons und externe Select-Pfeile behalten ihren strukturell notwendigen Innenabstand. */
:root body input.studio-command-palette-input {
    padding-right: 4.25rem !important;
    padding-left: 2.8rem !important;
}

:root body input.studio-shortcuts-help-search {
    padding-right: 10rem !important;
    padding-left: 2.8rem !important;
}

:root body input.pl-10 {
    padding-left: 2.5rem !important;
}

:root body .campus-filter-search-row input.campus-filter-input,
:root body .handpan-family-search-row input.campus-filter-input {
    padding-left: 2.25rem !important;
}

:root body select.metronome-output-select {
    padding-right: 2.15rem !important;
    background-image: none !important;
}

@media (max-width: 560px) {
    :root body input.studio-shortcuts-help-search {
        padding-right: var(--panable-field-padding-inline) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panable-button,
    .studio-btn,
    .btn,
    .dashboard-button,
    .auth-container .btn-primary,
    .auth-container .btn-secondary:not(.btn-facebook),
    .auth-container .btn-apple,
    .auth-container .btn-facebook,
    .audio-job-action-button,
    .audio-job-secondary-button,
    .agent-deploy-action,
    .workspace-button,
    .pani-knowledge-danger-button,
    .status-layer-action,
    .status-layer-close,
    .panable-field,
    input,
    select,
    textarea {
        transition-duration: 0.01ms;
    }
}