/**
 * CRM Controls — verbindliche Formular- und Button-Schicht
 * --------------------------------------------------------------------------
 * Lädt NACH Vite, alber-ci.css und Seiten-CSS. Steuert alle Eingaben und
 * Buttons über die Tokens aus CrmThemeResolver / Einstellungen → Design.
 * Kein !important: Spezifität über :is(.ci-app-content, .modal, .dropdown-menu).
 */

:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview) {
    --_ctrl-height: var(--crm-input-height, var(--input-height, 42px));
    --_ctrl-pad-x: var(--crm-input-padding-x, var(--input-padding-x, 14px));
    --_ctrl-radius: var(--crm-input-radius, var(--crm-border-radius-sm, 8px));
    --_ctrl-font: var(--crm-font-family, var(--font-family));
    --_ctrl-size: var(--crm-font-size-sm, var(--fs-body, 0.88rem));
    --_ctrl-color: var(--crm-color-text, var(--text-dark));
    --_ctrl-bg: var(--crm-color-surface, var(--white, #fff));
    --_ctrl-border: var(--crm-color-border, var(--border));
    --_ctrl-focus: var(--crm-color-primary-mid, var(--primary-mid));
    --_ctrl-ring: var(--crm-input-focus-ring, var(--input-focus-ring));
}

/* ---- Text-ähnliche Controls (Bootstrap, CI, nativ) ---- */
:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview)
    :is(
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="time"],
        input[type="month"],
        input[type="week"],
        input:not([type]),
        select,
        textarea,
        .form-control,
        .form-select,
        .form-input,
        .form-textarea,
        .crm-input,
        .crm-select,
        .crm-textarea,
        .ios-form-control,
        .ios-form-select,
        .ios-form-input
    ) {
    font-family: var(--_ctrl-font);
    font-size: var(--_ctrl-size);
    color: var(--_ctrl-color);
    background-color: var(--_ctrl-bg);
    border: 1px solid var(--_ctrl-border);
    border-radius: var(--_ctrl-radius);
    min-height: var(--_ctrl-height);
    padding: 0 var(--_ctrl-pad-x);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    max-width: 100%;
}

:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview) textarea,
:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview) .form-textarea,
:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview) textarea.form-control,
:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview) .crm-textarea {
    min-height: 100px;
    height: auto;
    padding: var(--crm-space-3, 12px) var(--_ctrl-pad-x);
    resize: vertical;
}

:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview) select[size]:not([size="1"]),
:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview) select[multiple] {
    min-height: 8rem;
    height: auto;
    padding-top: var(--crm-space-2, 8px);
    padding-bottom: var(--crm-space-2, 8px);
}

:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview)
    :is(
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="time"],
        input[type="month"],
        input[type="week"],
        input:not([type]),
        select,
        textarea,
        .form-control,
        .form-select,
        .form-input,
        .form-textarea
    ):focus,
:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview)
    :is(
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="time"],
        select,
        textarea,
        .form-control,
        .form-select,
        .form-input
    ):focus-visible {
    outline: none;
    border-color: var(--_ctrl-focus);
    box-shadow: var(--_ctrl-ring);
}

:is(.ci-app-content, .modal) :is(.form-control, .form-input, .form-select, textarea)::placeholder {
    color: var(--crm-color-text-soft, var(--text-muted));
}

:is(.ci-app-content, .modal)
    :is(.form-control, .form-input, .form-select, textarea):disabled {
    background: var(--crm-color-background, var(--light-gray));
    color: var(--crm-color-text-muted, var(--text-muted));
    cursor: not-allowed;
}

/* Checkbox / Radio nicht wie Textfelder */
:is(.ci-app-content, .modal)
    :is(
        input[type="checkbox"],
        input[type="radio"],
        .form-check-input,
        .ci-switch input
    ) {
    width: auto;
    min-height: auto;
    height: auto;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    accent-color: var(--crm-color-accent, var(--accent));
    box-shadow: none;
    border-radius: 4px;
}

:is(.ci-app-content, .modal) input[type="file"] {
    min-height: var(--_ctrl-height);
    padding: 8px var(--_ctrl-pad-x);
}

/* Input-Gruppen: Felder füllen die Zeile, ohne Doppel-Radius zu sprengen */
:is(.ci-app-content, .modal) .input-group > :is(.form-control, .form-select, .form-input) {
    width: auto;
    flex: 1 1 auto;
}

/* ---- Buttons ---- */
:is(.ci-app-content, .modal, .dropdown-menu, .crm-design-preview, .ci-header-actions, .crm-page-header)
    :is(.btn, .crm-btn, button.btn, a.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--crm-btn-padding-y, 7px) var(--crm-btn-padding-x, 16px);
    font-family: var(--crm-font-family, var(--font-family));
    font-size: var(--crm-btn-font-size, var(--fs-small, 0.78rem));
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--crm-btn-radius, var(--crm-border-radius-sm, 6px));
    border-width: 1.5px;
    border-style: solid;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transform: none;
}

:is(.ci-app-content, .modal, .crm-design-preview) :is(.btn-accent, .crm-btn--primary) {
    background: var(--crm-color-accent, var(--accent));
    border-color: var(--crm-color-accent, var(--accent));
    color: #fff;
}
:is(.ci-app-content, .modal, .crm-design-preview) :is(.btn-accent, .crm-btn--primary):hover {
    background: var(--crm-color-accent-hover, var(--accent-hover));
    border-color: var(--crm-color-accent-hover, var(--accent-hover));
    color: #fff;
    transform: none;
}

:is(.ci-app-content, .modal, .crm-design-preview) .btn-primary {
    background: var(--brand-gradient, var(--crm-color-primary));
    border-color: var(--crm-color-primary, var(--primary-dark));
    color: #fff;
}
:is(.ci-app-content, .modal, .crm-design-preview) .btn-primary:hover {
    color: #fff;
    transform: none;
}

:is(.ci-app-content, .modal, .crm-design-preview)
    :is(.btn-outline, .btn-outline-primary, .btn-outline-secondary, .crm-btn--outline, .btn-secondary, .btn-light) {
    background: var(--crm-color-primary-tint, var(--primary-tint));
    color: var(--crm-color-primary-mid, var(--primary-mid));
    border-color: var(--crm-color-primary-mid, var(--primary-mid));
}
:is(.ci-app-content, .modal, .crm-design-preview)
    :is(.btn-outline, .btn-outline-primary, .btn-outline-secondary, .crm-btn--outline, .btn-secondary, .btn-light):hover {
    background: var(--crm-color-primary-mid, var(--primary-mid));
    color: #fff;
    border-color: var(--crm-color-primary-mid, var(--primary-mid));
}

:is(.ci-app-content, .modal)
    input[type="submit"]:not(.btn),
:is(.ci-app-content, .modal)
    button[type="submit"]:not([class*="btn"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--crm-btn-padding-y, 7px) var(--crm-btn-padding-x, 16px);
    font-family: var(--crm-font-family, var(--font-family));
    font-size: var(--crm-btn-font-size, var(--fs-small));
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--crm-btn-radius, 6px);
    border: 1.5px solid var(--crm-color-accent, var(--accent));
    background: var(--crm-color-accent, var(--accent));
    color: #fff;
    cursor: pointer;
}

:is(.ci-app-content, .modal) .ci-icon-btn {
    width: var(--crm-icon-btn-size, 34px);
    height: var(--crm-icon-btn-size, 34px);
    border-radius: var(--crm-btn-radius, 9px);
}

/* ---- Labels / Abschnitte ---- */
:is(.ci-app-content, .modal) :is(.form-label, .crm-label) {
    font-family: var(--crm-font-family, var(--font-family));
    font-size: var(--fs-label, var(--crm-font-size-sm));
    font-weight: 600;
    color: var(--crm-color-text, var(--text-dark));
}

.form-section {
    margin-bottom: var(--crm-space-6, 24px);
}
.form-section-title {
    font-size: var(--crm-font-size-lg, 1.05rem);
    font-weight: 600;
    margin: 0 0 var(--crm-space-4, 16px);
    color: var(--crm-color-text, var(--text-dark));
    padding-bottom: var(--crm-space-2, 8px);
    border-bottom: 1px solid var(--crm-color-border, var(--border));
}

.ci-switch-group {
    display: flex;
    flex-direction: column;
    gap: var(--crm-space-3, 12px);
}
.ci-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-space-3, 12px);
}

form .ci-grid {
    gap: var(--crm-space-4, 16px);
}

/* ---- Design-Einstellungen ---- */
.crm-color-field {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-color-field input[type="color"] {
    width: 42px;
    min-width: 42px;
    height: var(--crm-input-height, 42px);
    min-height: var(--crm-input-height, 42px);
    padding: 4px;
    border: 1px solid var(--crm-color-border, var(--border));
    border-radius: var(--crm-input-radius, 8px);
    background: var(--crm-color-surface, #fff);
    cursor: pointer;
}
.crm-color-field .form-input {
    flex: 1 1 auto;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.crm-design-preview {
    border: 1px solid var(--crm-color-border, var(--border));
    border-radius: var(--crm-border-radius, 12px);
    overflow: hidden;
    background: var(--crm-color-background, #f8fafc);
}
.crm-design-preview__bar {
    background: var(--crm-color-sidebar, var(--primary-dark, #0A1B2B));
    color: #fff;
    font-weight: 700;
    font-size: var(--crm-font-size-sm);
    padding: 12px 16px;
}
.crm-design-preview__body {
    padding: 16px;
    background: var(--crm-color-surface, #fff);
}

.ci-app-content .settings-hub .settings-hub-tab.active,
.settings-hub-tab.active {
    background: var(--crm-color-primary, #0A1B2B);
    color: #fff;
    border-color: var(--crm-color-primary, #0A1B2B);
    box-shadow: none;
}