/* =========================================================
   KCF CORE – BUTTONS
   ========================================================= */

.kcf_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.4rem;

    min-height: 34px;

    padding:
        0.45rem
        0.8rem;

    border: 1px solid transparent;
    border-radius: var(--kcf_border_radius);

    cursor: pointer;

    font-size: 0.86rem;
    font-weight: 600;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.kcf_button:hover {
    transform: translateY(-1px);
}

.kcf_button:active {
    transform: translateY(0);
    box-shadow: none;
}

.kcf_button_primary {
    background: #F27E23;
    border-color: #C86417;
    color: #ffffff;
}

.kcf_button_primary:hover {
    background: #E56F16;
    border-color: #A94E0C;
    color: #ffffff;
}

.kcf_button_secondary {
    background: #ffffff;
    border-color: #333333;
    color: #333333;
}

.kcf_button_secondary:hover {
    background: #333333;
    border-color: #1f1f1f;
    color: #ffffff;
}


/* =========================================================
   PLUGIN INFO BUTTON
   Optisch identisch mit Secondary Button
   ========================================================= */

.kcf_plugin_info_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.4rem;

    min-height: 34px;

    padding:
        0.45rem
        0.8rem;

    background: #ffffff;

    border:
        1px solid
        #333333;

    border-radius:
        var(--kcf_border_radius);

    color: #333333;

    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.kcf_plugin_info_button i {
    color: currentColor;
    font-size: 0.8rem;
}

.kcf_plugin_info_button:hover {
    background: #333333;
    border-color: #1f1f1f;
    color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
}

.kcf_plugin_info_button:focus-visible {
    outline:
        2px solid
        #AAB9A5;

    outline-offset: 2px;
}

.kcf_plugin_info_button:active {
    background: #1f1f1f;
    border-color: #1f1f1f;
    color: #ffffff;
    box-shadow: none;
    transform: translateY(0);
}

/* =========================================================
   KCF CORE – CARDS
   ========================================================= */

.kcf_card {
    padding: var(--kcf_spacing_5);

    background: var(--kcf_color_surface);

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);

    box-shadow: var(--kcf_shadow_small);
}

.kcf_card_no_padding {
    padding: 0;
}


/* =========================================================
   KCF CORE – FORMULARE
   ========================================================= */

.kcf_form {
    width: 100%;
    max-width: none;
}

.kcf_form_group {
    display: grid;

    gap: var(--kcf_spacing_2);

    margin-bottom: var(--kcf_spacing_4);
}

.kcf_form_label {
    color: var(--kcf_color_label);

    font-size: 0.9rem;
    font-weight: 700;
}

.kcf_form_input,
.kcf_form_select,
.kcf_form_textarea {
    width: 100%;

    padding:
        0.7rem
        0.8rem;

    background: var(--kcf_color_surface);

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);

    color: var(--kcf_color_text);

    outline: none;

    transition:
        border-color var(--kcf_transition_fast),
        box-shadow var(--kcf_transition_fast);
}

.kcf_form_input:focus,
.kcf_form_select:focus,
.kcf_form_textarea:focus {
    border-color: var(--kcf_color_label);

    box-shadow:
        0 0 0 3px
        rgb(125 143 115 / 0.14);
}

.kcf_form_row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: var(--kcf_spacing_4);
}

.kcf_form_help {
    color: var(--kcf_color_text_muted);

    font-size: 0.78rem;
    line-height: 1.4;
}

.kcf_form_actions {
    display: flex;
    align-items: center;

    gap: var(--kcf_spacing_3);

    margin-top: var(--kcf_spacing_5);
}

.kcf_checkbox {
    display: inline-flex;
    align-items: center;

    gap: var(--kcf_spacing_2);

    cursor: pointer;
}

.kcf_checkbox input {
    width: 18px;
    height: 18px;

    accent-color: var(--kcf_color_label);
}


/* =========================================================
   KCF CORE – MELDUNGEN
   ========================================================= */

.kcf_message {
    margin-bottom: var(--kcf_spacing_4);

    padding:
        var(--kcf_spacing_3)
        var(--kcf_spacing_4);

    background: var(--kcf_color_surface);

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
}

.kcf_message_error {
    border-left:
        3px solid
        var(--kcf_color_error);
}

.kcf_message_success {
    border-left:
        3px solid
        var(--kcf_color_success);
}

.kcf_message_list {
    margin:
        var(--kcf_spacing_2)
        0
        0;

    padding-left: 1.25rem;
}


/* =========================================================
   KCF CORE – SEITENKOPF MIT AKTION
   ========================================================= */

.kcf_page_header_actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--kcf_spacing_5);
}


/* =========================================================
   KCF CORE – EINSTELLUNGSÜBERSICHT
   ========================================================= */

.kcf_settings_grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: var(--kcf_spacing_4);
}

.kcf_settings_card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: var(--kcf_spacing_4);

    padding: var(--kcf_spacing_5);

    background: var(--kcf_color_surface);

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);

    box-shadow: var(--kcf_shadow_small);

    transition:
        border-color var(--kcf_transition_fast),
        box-shadow var(--kcf_transition_fast),
        transform var(--kcf_transition_fast);
}

.kcf_settings_card:hover {
    border-color: var(--kcf_color_label);

    box-shadow: var(--kcf_shadow_medium);

    transform: translateY(-1px);
}

.kcf_settings_card_icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    background: #ffffff;

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);

    color: #555555;

    font-size: 1.1rem;
}

.kcf_settings_card_content {
    display: flex;
    flex-direction: column;

    gap: var(--kcf_spacing_1);
}

.kcf_settings_card_title {
    color: var(--kcf_color_label);
}

.kcf_settings_card_description {
    color: var(--kcf_color_text_muted);

    font-size: 0.86rem;
}

.kcf_settings_card_arrow {
    color: var(--kcf_color_text_muted);

    font-size: 0.75rem;
}


/* =========================================================
   KCF CORE – TABELLEN
   ========================================================= */

.kcf_table_wrapper {
    width: 100%;

    overflow-x: auto;
}

.kcf_table {
    width: 100%;

    border-collapse: collapse;

    color:
        var(--kcf_color_text);

    font-size:
        0.82rem;
}

.kcf_table th,
.kcf_table td {
    padding:
        0.68rem
        var(--kcf_spacing_4);

    border-bottom:
        1px solid
        var(--kcf_color_border);

    text-align:
        left;

    vertical-align:
        middle;
}

.kcf_table th {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 84%,
            var(--kcf_color_surface) 16%
        );

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.035em;

    line-height:
        1.2;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}

.kcf_table td {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.82rem;

    line-height:
        1.35;
}

.kcf_table td strong {
    color:
        var(--kcf_color_text);

    font-weight:
        700;
}

.kcf_table tbody tr {
    transition:
        background
        var(--kcf_transition_fast);
}

.kcf_table tbody tr:last-child td {
    border-bottom:
        0;
}

.kcf_table tbody tr:hover {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 48%,
            var(--kcf_color_surface) 52%
        );
}


/* =========================================================
   KCF CORE – TABELLEN / DATENSATZ
   ========================================================= */

.kcf_table_entity {
    display: flex;
    align-items: center;

    gap:
        var(--kcf_spacing_3);

    min-width:
        0;
}

.kcf_table_entity_icon {
    display: grid;

    place-items:
        center;

    flex:
        0
        0
        32px;

    width:
        32px;

    height:
        32px;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_label);

    font-size:
        0.82rem;
}

.kcf_table_entity_icon_value {
    color:
        var(--kcf_color_value);
}

.kcf_table_entity_icon_success {
    color:
        var(--kcf_color_success);
}

.kcf_table_entity_content {
    display: flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;
}

.kcf_table_entity_title {
    overflow:
        hidden;

    color:
        var(--kcf_color_text);

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.kcf_table_entity_meta {
    margin-top:
        2px;

    overflow:
        hidden;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.7rem;

    font-weight:
        400;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   KCF CORE – TABELLEN / WERTE
   ========================================================= */

.kcf_table_value {
    color:
        var(--kcf_color_text);

    font-weight:
        500;
}

.kcf_table_value_muted {
    color:
        var(--kcf_color_text_muted);

    font-weight:
        400;
}

.kcf_table_value_strong {
    color:
        var(--kcf_color_text);

    font-weight:
        700;
}


/* =========================================================
   KCF CORE – TABELLEN / AKTIONEN
   ========================================================= */

.kcf_table th.kcf_table_actions,
.kcf_table td.kcf_table_actions {
    width:
        1%;

    text-align:
        right;

    white-space:
        nowrap;
}

.kcf_table td.kcf_table_actions
.kcf_table_action_group {
    justify-content:
        flex-end;
}


/* =========================================================
   KCF CORE – TABELLEN / LEER
   ========================================================= */

.kcf_table td.kcf_table_empty {
    padding:
        var(--kcf_spacing_6);

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.82rem;

    text-align:
        center;
}


/* =========================================================
   KCF CORE – TABELLEN / KOMPATIBILITÄT
   Bestehende Plugin-Komponenten innerhalb von Tabellen
   ========================================================= */

.kcf_table
.kcf_plugin_list_component {
    gap:
        var(--kcf_spacing_3);
}

.kcf_table
.kcf_plugin_list_component_icon {
    flex:
        0
        0
        32px;

    width:
        32px;

    height:
        32px;

    color:
        var(--kcf_color_label);

    font-size:
        0.82rem;
}

.kcf_table
.kcf_plugin_list_component_content h3 {
    font-size:
        0.82rem;

    line-height:
        1.25;
}

.kcf_table
.kcf_plugin_list_component_content p {
    margin-top:
        2px;

    font-size:
        0.7rem;

    line-height:
        1.25;
}

/* =========================================================
   KCF CORE – BADGES
   ========================================================= */

.kcf_badge {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding:
        0.2rem
        0.5rem;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    font-size: 0.72rem;
    font-weight: 700;
}

.kcf_badge_success {
    background:
        var(--kcf_color_success_background);

    border-color:
        var(--kcf_color_success_border);

    color:
        var(--kcf_color_success);
}

.kcf_badge_inactive {
    background:
        var(--kcf_color_error_background);

    border-color:
        var(--kcf_color_error_border);

    color:
        var(--kcf_color_error);
} color: var(--kcf_color_error);

.kcf_badge_system {
    color: var(--kcf_color_label);
}



/* =========================================================
   KCF CORE – TABELLEN / BADGES
   ========================================================= */

.kcf_table
.kcf_badge {
    min-height:
        22px;

    padding:
        0.15rem
        0.45rem;

    font-size:
        0.68rem;
}


/* =========================================================
   KCF CORE – ICON BUTTONS
   ========================================================= */

.kcf_icon_button {
    display: inline-grid;

    place-items: center;

    width: 32px;
    height: 32px;

    padding: 0;

    appearance: none;

    background: var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.78rem;

    cursor: pointer;

    transition:
        background var(--kcf_transition_fast),
        color var(--kcf_transition_fast),
        border-color var(--kcf_transition_fast);
}

.kcf_icon_button:hover {
    background:
        var(--kcf_color_surface_secondary);

    border-color:
        var(--kcf_color_label);

    color:
        var(--kcf_color_value);
}

.kcf_icon_button_danger:hover {
    border-color:
        var(--kcf_color_error);

    color:
        var(--kcf_color_error);
}

.kcf_icon_button_disabled {
    cursor: default;

    opacity: 0.45;
}


/* =========================================================
   KCF CORE – TABELLENAKTIONEN
   ========================================================= */

.kcf_table_action_group {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: var(--kcf_spacing_2);
}

.kcf_inline_form {
    display: inline-flex;

    margin: 0;
}


/* =========================================================
   KCF CORE – BENUTZERVERWALTUNG
   ========================================================= */

.kcf_user_admin_identity {
    display: flex;
    align-items: baseline;

    gap: var(--kcf_spacing_2);
}

.kcf_user_admin_username {
    color:
        var(--kcf_color_text_muted);

    font-size: 0.78rem;
    font-style: italic;
    font-weight: 400;
}

.kcf_badge > i {
    margin-right:
        var(--kcf_spacing_1);
}

/* =========================================================
   KCF CORE – BENUTZER BEARBEITEN
   ========================================================= */

.kcf_user_edit_layout {
    display: grid;

    gap: var(--kcf_spacing_4);
}

.kcf_user_edit_card {
    padding: 0;

    overflow: hidden;
}

.kcf_user_edit_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--kcf_spacing_4);

    padding:
        var(--kcf_spacing_4)
        var(--kcf_spacing_5);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_user_edit_card_header h2 {
    margin: 0;

    font-size: 1rem;
    font-weight: 700;
}

.kcf_user_edit_card_header p {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.78rem;
}

.kcf_user_edit_card_header_icon {
    color:
        var(--kcf_color_label);

    font-size: 1rem;
}

.kcf_user_edit_card_content {
    display: grid;

    gap: var(--kcf_spacing_4);

    padding:
        var(--kcf_spacing_5);
}

.kcf_user_edit_card_content[hidden] {
    display: none;
}

.kcf_user_edit_card_content
.kcf_form_group {
    margin-bottom: 0;
}

.kcf_user_edit_card_content
.kcf_form_group {
    margin-bottom: 0;
}


/* =========================================================
   KCF CORE – BENUTZER OBERE CARDS
   ========================================================= */

.kcf_user_edit_top_grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--kcf_spacing_4);

    align-items: stretch;
}

.kcf_user_edit_top_grid
.kcf_user_edit_card {
    height: 100%;
}


/* =========================================================
   KCF CORE – BENUTZER E-MAIL-KONTEN
   ========================================================= */

.kcf_user_email_account_header {
    display: flex;
    align-items: center;

    gap:
        var(--kcf_spacing_3);

    color:
        var(--kcf_color_text_muted);

    font-size: 0.78rem;
    font-weight: 600;
}

.kcf_user_email_account_header > i {
    color:
        var(--kcf_color_label);

    font-size: 1rem;
}

.kcf_user_email_account_toggle {
    display: inline-flex;
    align-items: center;

    padding: 0;

    background: transparent;

    border: 0;

    color:
        var(--kcf_color_text_muted);

    cursor: pointer;
}

.kcf_user_email_account_toggle:hover {
    color:
        var(--kcf_color_value);
}

.kcf_user_email_account_chevron {
    font-size: 0.72rem;

    transition:
        transform var(--kcf_transition_fast);
}

.kcf_user_email_account_chevron.kcf_is_open {
    transform: rotate(180deg);
}

[data-kcf-email-accounts] {
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    align-items: stretch;
}

.kcf_user_email_account_row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap:
        var(--kcf_spacing_3);

    height: 100%;

    padding:
        var(--kcf_spacing_4);

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);
}

.kcf_user_email_account_row
.kcf_form_group {
    gap:
        var(--kcf_spacing_1);
}

.kcf_user_email_account_row
.kcf_form_label {
    font-size: 0.76rem;
}

.kcf_user_email_account_row
.kcf_form_input {
    min-height: 40px;

    padding:
        0.55rem
        0.7rem;
}

.kcf_user_email_account_delete {
    display: inline-grid;
    place-items: center;

    justify-self: end;

    width: 38px;
    height: 34px;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    cursor: pointer;

    transition:
        border-color var(--kcf_transition_fast),
        color var(--kcf_transition_fast),
        background var(--kcf_transition_fast);
}

.kcf_user_email_account_delete:hover {
    border-color:
        var(--kcf_color_error);

    color:
        var(--kcf_color_error);
}

.kcf_user_email_account_delete input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}

.kcf_user_email_account_delete:has(input:checked) {
    background:
        rgb(208 37 40 / 0.08);

    border-color:
        var(--kcf_color_error);

    color:
        var(--kcf_color_error);
}

.kcf_user_email_account_empty {
    justify-self: end;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.68rem;
    font-style: italic;
}

[data-kcf-email-accounts]
> .kcf_form_help {
    grid-column:
        1 / -1;
}


/* =========================================================
   KCF CORE – BENUTZER META
   ========================================================= */

.kcf_user_edit_meta {
    display: flex;
    align-items: center;

    gap: var(--kcf_spacing_2);

    color:
        var(--kcf_color_text_muted);

    font-size: 0.72rem;
}

.kcf_user_edit_meta > span {
    display: inline-flex;
    align-items: center;

    gap: var(--kcf_spacing_1);
}

.kcf_user_edit_primary {
    color:
        var(--kcf_color_label);
}

.kcf_user_edit_status_active {
    color:
        var(--kcf_color_success);
}

.kcf_user_edit_status_inactive {
    color:
        var(--kcf_color_error);
}


/* =========================================================
   KCF CORE – PASSWORTFELD
   ========================================================= */

.kcf_password_field {
    position: relative;
}

.kcf_password_field
.kcf_form_input {
    padding-right: 48px;
}

.kcf_password_toggle {
    position: absolute;

    top: 50%;
    right: 4px;

    display: grid;
    place-items: center;

    width: 36px;
    height: 34px;

    padding: 0;

    background: transparent;

    border: 0;

    color:
        var(--kcf_color_text_muted);

    cursor: pointer;

    transform:
        translateY(-50%);
}

.kcf_password_toggle:hover {
    color:
        var(--kcf_color_value);
}


/* =========================================================
   KCF CORE – PASSWORTSTÄRKE
   ========================================================= */

.kcf_password_strength {
    display: flex;
    align-items: center;

    gap: var(--kcf_spacing_3);

    margin-top:
        var(--kcf_spacing_1);
}

.kcf_password_strength[hidden] {
    display: none;
}

.kcf_password_strength_bar {
    flex: 1;

    max-width: 220px;
    height: 4px;

    overflow: hidden;

    background:
        var(--kcf_color_surface_secondary);

    border-radius:
        var(--kcf_border_radius);
}

.kcf_password_strength_bar > span {
    display: block;

    width: 0;
    height: 100%;

    background:
        var(--kcf_color_text_muted);

    transition:
        width var(--kcf_transition_fast),
        background var(--kcf_transition_fast);
}

.kcf_password_strength_bar
> span[data-level="0"],
.kcf_password_strength_bar
> span[data-level="1"] {
    background:
        var(--kcf_color_error);
}

.kcf_password_strength_bar
> span[data-level="2"],
.kcf_password_strength_bar
> span[data-level="3"] {
    background:
        var(--kcf_color_value);
}

.kcf_password_strength_bar
> span[data-level="4"],
.kcf_password_strength_bar
> span[data-level="5"],
.kcf_password_strength_bar
> span[data-level="6"] {
    background:
        var(--kcf_color_success);
}

.kcf_password_strength_text {
    min-width: 75px;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.7rem;
}


/* =========================================================
   KCF CORE – BENUTZER INFORMATIONEN
   ========================================================= */

.kcf_user_edit_information {
    display: flex;
    align-items: center;

    gap: var(--kcf_spacing_6);

    padding:
        var(--kcf_spacing_3)
        var(--kcf_spacing_1);

    color:
        var(--kcf_color_text_muted);

    font-size: 0.72rem;
}

.kcf_user_edit_information > div {
    display: flex;
    align-items: center;

    gap: var(--kcf_spacing_2);
}

.kcf_user_edit_information strong {
    color:
        var(--kcf_color_text);

    font-weight: 600;
}


/* =========================================================
   KCF CORE – NAVIGATION VERWALTUNG
   ========================================================= */

.kcf_navigation_admin_title {
    display: flex;
    align-items: center;

    gap: var(--kcf_spacing_2);
}

.kcf_navigation_admin_title > i {
    width: 18px;

    color:
        var(--kcf_color_label);

    text-align: center;
}


/* Hauptmenüpunkte */

.kcf_navigation_sort_row[
    data-navigation-parent-id=""
]
.kcf_navigation_admin_title strong {
    color:
        var(--kcf_color_text);

    font-weight: 700;
}


/* Untermenüpunkte */

.kcf_navigation_sort_row[
    data-navigation-parent-id
]:not(
    [data-navigation-parent-id=""]
):not(
    .kcf_navigation_sort_row_section
)
.kcf_navigation_admin_title {
    padding-left:
        var(--kcf_spacing_3);
}

.kcf_navigation_sort_row[
    data-navigation-parent-id
]:not(
    [data-navigation-parent-id=""]
):not(
    .kcf_navigation_sort_row_section
)
.kcf_navigation_admin_title strong {
    font-size: 0.92rem;
    font-weight: 600;
}

.kcf_navigation_admin_indent {
    margin-right:
        var(--kcf_spacing_1);

    color:
        color-mix(
            in srgb,
            var(--kcf_color_text_muted) 60%,
            white
        );

    font-family: monospace;
}


/* Nummerierung */

.kcf_table th.kcf_navigation_number_column,
.kcf_table td.kcf_navigation_number_column {
    width: 52px;

    text-align: center;
}

.kcf_navigation_number {
    color:
        var(--kcf_color_text_muted);

    font-size: 0.78rem;
    font-weight: 600;
}


/* =========================================================
   KCF CORE – NAVIGATION ÜBERSCHRIFTEN
   ========================================================= */

.kcf_navigation_sort_row_section > td {
    padding-top:
        0.4rem;

    padding-bottom:
        0.4rem;

    background:
        color-mix(
            in srgb,
            var(--kcf_color_navigation_secondary) 65%,
            var(--kcf_color_surface) 35%
        );
}

.kcf_navigation_sort_row_section:hover > td {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_navigation_secondary) 72%,
            var(--kcf_color_surface) 28%
        );
}

.kcf_table td.kcf_navigation_admin_section {
    padding-top:
        0.4rem;

    padding-bottom:
        0.4rem;
}

.kcf_navigation_admin_section_content {
    display: flex;
    align-items: center;

    gap: var(--kcf_spacing_2);
}

.kcf_navigation_admin_section_content strong {
    color:
        var(--kcf_color_label);

    font-size: 0.74rem;
    font-weight: 700;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}

.kcf_navigation_admin_section_icon {
    display: inline-grid;

    place-items: center;

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_label);

    font-size: 0.6rem;
    font-weight: 800;
}

.kcf_navigation_admin_section_context {
    color:
        color-mix(
            in srgb,
            var(--kcf_color_text_muted) 70%,
            white
        );

    font-size: 0.68rem;
}


.kcf_code_inline {
    color:
        var(--kcf_color_value);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.78rem;
}


/* =========================================================
   KCF CORE – NAVIGATION DRAG & DROP
   ========================================================= */

.kcf_navigation_drag_column {
    width: 46px;

    text-align: center;
}

.kcf_navigation_drag_handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    background: transparent;

    border: 0;

    color:
        var(--kcf_color_text_muted);

    cursor: grab;

    transition:
        color var(--kcf_transition_fast),
        background var(--kcf_transition_fast);
}

.kcf_navigation_drag_handle:hover {
    background:
        var(--kcf_color_surface_secondary);

    color:
        var(--kcf_color_text);
}

.kcf_navigation_drag_handle:active {
    cursor: grabbing;
}

.kcf_navigation_sort_row {
    transition:
        opacity var(--kcf_transition_fast),
        background var(--kcf_transition_fast);
}

.kcf_navigation_sort_row.kcf_is_dragging {
    opacity: 0.45;
}

.kcf_navigation_sort_row.kcf_drag_before {
    box-shadow:
        inset
        0
        2px
        0
        var(--kcf_color_value);
}

.kcf_navigation_sort_row.kcf_drag_after {
    box-shadow:
        inset
        0
        -2px
        0
        var(--kcf_color_value);
}

.kcf_navigation_sort_row.kcf_drag_as_child > td {
    background:
        rgb(230 126 34 / 0.10);

    border-top:
        2px solid
        var(--kcf_color_value);

    border-bottom:
        2px solid
        var(--kcf_color_value);
}

.kcf_navigation_sort_row.kcf_drag_as_child > td:first-child {
    border-left:
        4px solid
        var(--kcf_color_value);
}

.kcf_navigation_sort_row.kcf_drag_as_child > td:nth-child(3) {
    position: relative;

    padding-right: 175px;
}

.kcf_navigation_sort_row.kcf_drag_as_child > td:nth-child(3)::after {
    position: absolute;

    top: 50%;
    right: var(--kcf_spacing_3);

    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding:
        0.25rem
        0.55rem;

    background:
        var(--kcf_color_value);

    border-radius:
        var(--kcf_border_radius);

    color: #ffffff;

    content: "Hier unterordnen";

    font-size: 0.72rem;
    font-weight: 700;

    pointer-events: none;

    transform:
        translateY(-50%);
}

#kcfNavigationRows.kcf_sort_saved {
    background:
        rgb(125 143 115 / 0.08);
}


/* =========================================================
   KCF CORE – FONT AWESOME ICON PICKER
   ========================================================= */

.kcf_icon_picker_field {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: var(--kcf_spacing_2);

    align-items: stretch;
}

.kcf_icon_picker_field
.kcf_form_input {
    min-width: 0;
}

.kcf_icon_picker_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--kcf_spacing_2);

    min-height: 40px;

    padding:
        0.6rem
        0.85rem;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text);

    cursor: pointer;

    font-weight: 600;

    white-space: nowrap;

    transition:
        background var(--kcf_transition_fast),
        border-color var(--kcf_transition_fast),
        color var(--kcf_transition_fast);
}

.kcf_icon_picker_button:hover {
    border-color:
        var(--kcf_color_label);

    color:
        var(--kcf_color_value);
}

body.kcf_icon_picker_open {
    overflow: hidden;
}

.kcf_icon_picker_modal[hidden] {
    display: none;
}

.kcf_icon_picker_modal {
    position: fixed;

    z-index: 1000;

    inset: 0;

    display: grid;

    place-items: center;

    padding:
        var(--kcf_spacing_5);
}

.kcf_icon_picker_backdrop {
    position: absolute;

    inset: 0;

    background:
        rgb(0 0 0 / 0.48);
}

.kcf_icon_picker_dialog {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;

    width:
        min(
            1120px,
            calc(100vw - 64px)
        );

    max-height:
        min(
            820px,
            calc(100vh - 80px)
        );

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    box-shadow:
        var(--kcf_shadow_medium);
}

.kcf_icon_picker_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--kcf_spacing_4);

    padding:
        var(--kcf_spacing_4)
        var(--kcf_spacing_5);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_icon_picker_title {
    margin: 0;

    color:
        var(--kcf_color_text);

    font-size: 1.15rem;
}

.kcf_icon_picker_description {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.84rem;
}

.kcf_icon_picker_close {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    padding: 0;

    background: transparent;

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    cursor: pointer;
}

.kcf_icon_picker_close:hover {
    background:
        var(--kcf_color_surface_secondary);

    color:
        var(--kcf_color_value);
}

.kcf_icon_picker_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--kcf_spacing_4);

    padding:
        var(--kcf_spacing_4)
        var(--kcf_spacing_5);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_icon_picker_search {
    display: flex;
    align-items: center;

    flex: 1;

    min-width: 0;

    gap: var(--kcf_spacing_2);

    padding:
        0
        var(--kcf_spacing_3);

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);
}

.kcf_icon_picker_search:focus-within {
    border-color:
        var(--kcf_color_label);

    box-shadow:
        0 0 0 3px
        rgb(125 143 115 / 0.14);
}

.kcf_icon_picker_search > i {
    color:
        var(--kcf_color_text_muted);
}

.kcf_icon_picker_search input {
    width: 100%;

    min-height: 42px;

    padding: 0;

    background: transparent;

    border: 0;

    outline: 0;

    color:
        var(--kcf_color_text);
}

.kcf_icon_picker_filters {
    display: flex;

    gap: var(--kcf_spacing_1);
}

.kcf_icon_picker_filter {
    min-height: 38px;

    padding:
        0
        var(--kcf_spacing_3);

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    cursor: pointer;
}

.kcf_icon_picker_filter:hover,
.kcf_icon_picker_filter.kcf_is_active {
    background:
        var(--kcf_color_surface_secondary);

    border-color:
        var(--kcf_color_label);

    color:
        var(--kcf_color_value);
}

.kcf_icon_picker_status {
    padding:
        var(--kcf_spacing_3)
        var(--kcf_spacing_5);

    color:
        var(--kcf_color_text_muted);

    font-size: 0.78rem;
}

.kcf_icon_picker_grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(125px, 1fr)
        );

    gap: var(--kcf_spacing_2);

    overflow-y: auto;

    padding:
        0
        var(--kcf_spacing_5)
        var(--kcf_spacing_5);
}

.kcf_icon_picker_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: var(--kcf_spacing_2);

    min-height: 95px;

    padding:
        var(--kcf_spacing_3);

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text);

    cursor: pointer;

    transition:
        background var(--kcf_transition_fast),
        border-color var(--kcf_transition_fast),
        color var(--kcf_transition_fast);
}

.kcf_icon_picker_item:hover {
    background:
        var(--kcf_color_surface_secondary);

    border-color:
        var(--kcf_color_label);

    color:
        var(--kcf_color_value);
}

.kcf_icon_picker_item_icon {
    display: grid;

    place-items: center;

    height: 34px;

    font-size: 1.45rem;
}

.kcf_icon_picker_item_name {
    width: 100%;

    overflow: hidden;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.7rem;

    text-align: center;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   KCF NAVIGATION – EINSTELLUNGSFORMULAR
   ========================================================= */

.kcf_navigation_settings {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(320px, 1fr);

    gap: var(--kcf_spacing_5);

    width: 100%;

    align-items: start;
}

.kcf_navigation_settings_main,
.kcf_navigation_settings_sidebar {
    min-width: 0;
}

.kcf_navigation_settings_sidebar {
    display: grid;

    gap: var(--kcf_spacing_4);
}


/* =========================================================
   KCF NAVIGATION – FORMULARCARDS
   ========================================================= */

.kcf_navigation_settings
.kcf_settings_card {
    display: block;

    min-width: 0;

    padding: 0;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    box-shadow:
        var(--kcf_shadow_small);

    transform: none;
}

.kcf_navigation_settings
.kcf_settings_card:hover {
    border-color:
        var(--kcf_color_border);

    box-shadow:
        var(--kcf_shadow_small);

    transform: none;
}

.kcf_navigation_settings
.kcf_settings_card_technical {
    background:
        var(--kcf_color_navigation_secondary);
}


/* =========================================================
   KCF NAVIGATION – CARD-KOPF
   ========================================================= */

.kcf_navigation_settings
.kcf_settings_card_header {
    display: flex;

    align-items: flex-start;

    gap: var(--kcf_spacing_3);

    padding:
        var(--kcf_spacing_4)
        var(--kcf_spacing_5);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_navigation_settings
.kcf_settings_card_header_icon {
    display: grid;

    place-items: center;

    flex:
        0
        0
        36px;

    width: 36px;
    height: 36px;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text);

    font-size: 0.95rem;
}

.kcf_navigation_settings
.kcf_settings_card_technical
.kcf_settings_card_header_icon {
    background:
        var(--kcf_color_surface);
}

.kcf_navigation_settings
.kcf_settings_card_title {
    margin: 0;

    color:
        var(--kcf_color_text);

    font-size: 1rem;
    font-weight: 700;
}

.kcf_navigation_settings
.kcf_settings_card_description {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.8rem;
    line-height: 1.4;
}


/* =========================================================
   KCF NAVIGATION – CARD-INHALT
   ========================================================= */

.kcf_navigation_settings
.kcf_settings_card_content {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--kcf_spacing_5);

    padding:
        var(--kcf_spacing_5);
}

.kcf_navigation_settings
.kcf_form_group {
    min-width: 0;

    margin-bottom: 0;
}


/* =========================================================
   KCF NAVIGATION – ZWEISPALTIGE FELDER
   ========================================================= */

.kcf_navigation_settings
.kcf_settings_field_row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: var(--kcf_spacing_5);

    align-items: start;
}


/* =========================================================
   KCF NAVIGATION – STATUS
   ========================================================= */

.kcf_navigation_settings
.kcf_settings_checkbox_panel {
    display: flex;
    align-items: center;

    min-height: 42px;

    padding:
        0
        var(--kcf_spacing_4);

    background:
        var(--kcf_color_navigation_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);
}

/* =========================================================
   KCF CORE – FOOTER
   ========================================================= */

.kcf_footer_changelog {
    margin-left:
        var(--kcf_spacing_1);

    color:
        var(--kcf_color_text_muted);
}

.kcf_footer_link {
    color:
        var(--kcf_color_text_muted);

    font-weight: 700;

    text-decoration: none;
}

.kcf_footer_link:hover {
    color:
        var(--kcf_color_value);

    text-decoration: underline;
}


/* =========================================================
   KCF CORE – CHANGELOG
   ========================================================= */

.kcf_changelog {
    display: grid;

    gap:
        var(--kcf_spacing_3);
}

.kcf_changelog_item {
    padding: 0;

    overflow: hidden;
}

.kcf_changelog_toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--kcf_spacing_4);

    width: 100%;

    padding:
        var(--kcf_spacing_4)
        var(--kcf_spacing_5);

    background: transparent;

    border: 0;

    color:
        var(--kcf_color_text);

    cursor: pointer;

    text-align: left;
}

.kcf_changelog_toggle:hover {
    background:
        var(--kcf_color_surface_secondary);
}

.kcf_changelog_toggle_main {
    display: flex;
    align-items: baseline;

    gap:
        var(--kcf_spacing_3);
}

.kcf_changelog_version {
    color:
        var(--kcf_color_value);

    font-size: 0.9rem;
    font-weight: 700;
}

.kcf_changelog_title {
    color:
        var(--kcf_color_text);

    font-weight: 600;
}

.kcf_changelog_toggle_meta {
    display: flex;
    align-items: center;

    gap:
        var(--kcf_spacing_3);

    color:
        var(--kcf_color_text_muted);

    font-size: 0.78rem;
}

.kcf_changelog_chevron {
    transition:
        transform var(--kcf_transition_fast);
}

.kcf_changelog_item.kcf_is_open
.kcf_changelog_chevron {
    transform:
        rotate(180deg);
}

.kcf_changelog_content {
    padding:
        0
        var(--kcf_spacing_5)
        var(--kcf_spacing_5);

    border-top:
        1px solid
        var(--kcf_color_border);
}

.kcf_changelog_content[hidden] {
    display: none;
}

.kcf_changelog_changes {
    display: grid;

    gap:
        var(--kcf_spacing_2);

    margin:
        var(--kcf_spacing_4)
        0
        0;

    padding: 0;

    list-style: none;
}

.kcf_changelog_changes > li {
    display: flex;
    align-items: flex-start;

    gap:
        var(--kcf_spacing_2);

    color:
        var(--kcf_color_text);
}

.kcf_changelog_changes > li > i {
    margin-top: 0.2rem;

    color:
        var(--kcf_color_success);

    font-size: 0.72rem;
}


/* =========================================================
   KCF CORE – DASHBOARD PROFIL-LINK
   ========================================================= */

.kcf_dashboard_profile_link {
    color:
        var(--kcf_color_value);

    font-weight: 700;

    text-decoration: none;
}

.kcf_dashboard_profile_link:hover {
    text-decoration: underline;
}

/* =========================================================
   KCF CORE – DASHBOARD KAS-API CONNECTOR INFO
   ========================================================= */
.kcf_text_success {
    color: #2f7d32;
}

.kcf_text_error {
    color: #b3261e;
}

/* =========================================================
   SERVER – ÜBERSICHT
   ========================================================= */

.kcf_server_overview_grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: var(--kcf_spacing_3);
}

.kcf_server_stat {
    display: flex;
    align-items: center;
    gap: var(--kcf_spacing_3);

    min-width: 0;
    padding: var(--kcf_spacing_4);

    background: var(--kcf_color_surface);
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
}

.kcf_server_stat_icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    font-size: 1.15rem;

    color: var(--kcf_color_navigation_primary);
    background: var(--kcf_color_navigation_secondary);

    border-radius: var(--kcf_border_radius);
}

.kcf_server_stat_content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kcf_server_stat_label {
    margin-bottom: 2px;

    font-size: 0.72rem;
    font-weight: 600;

    color: var(--kcf_color_text_muted);
}

.kcf_server_stat_value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;

    color: var(--kcf_color_text);
}

.kcf_server_stat_value i {
    margin-left: 3px;
    font-size: 0.78em;
}

.kcf_server_stat_meta {
    margin-top: 2px;

    font-size: 0.7rem;

    color: var(--kcf_color_text_muted);
}

/* =========================================================
   SERVER – VERBINDUNGSSTATUS
   ========================================================= */

.kcf_server_connection_status {
    display:
        inline-flex;

    align-items:
        center;

    align-self:
        flex-start;

    gap:
        var(--kcf_spacing_2);

    min-height:
        28px;

    margin-top:
        2px;

    padding:
        0.28rem
        0.55rem;

    border:
        1px solid
        transparent;

    border-radius:
        var(--kcf_border_radius);

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;
}

.kcf_server_connection_status i {
    font-size:
        0.76rem;
}


/* Verbunden */

.kcf_server_connection_status_online {
    background:
        rgb(85 134 92 / 0.12);

    border-color:
        rgb(85 134 92 / 0.24);

    color:
        var(--kcf_color_success);
}


/* Nicht verbunden */

.kcf_server_connection_status_offline {
    background:
        rgb(185 75 75 / 0.10);

    border-color:
        rgb(185 75 75 / 0.22);

    color:
        var(--kcf_color_error);
}


/* =========================================================
   SERVER – DETAILÜBERSICHT
   ========================================================= */

.kcf_server_details {
    margin-top: var(--kcf_spacing_5);
}

.kcf_server_details_list {
    display: grid;
    gap: var(--kcf_spacing_3);
}

.kcf_server_details_item {
    overflow: hidden;

    background: var(--kcf_color_surface);
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
}

.kcf_server_details_toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kcf_spacing_4);

    width: 100%;
    padding: var(--kcf_spacing_4);

    color: var(--kcf_color_text);
    background: transparent;

    border: 0;
    cursor: pointer;

    text-align: left;
}

.kcf_server_details_toggle:hover {
    background: var(--kcf_color_surface_secondary);
}

.kcf_server_details_toggle_main {
    display: flex;
    align-items: center;
    gap: var(--kcf_spacing_3);

    min-width: 0;
}

.kcf_server_details_icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    font-size: 1.1rem;

    color: var(--kcf_color_navigation_primary);
    background: var(--kcf_color_navigation_secondary);

    border-radius: var(--kcf_border_radius);
}

.kcf_server_details_heading {
    display: flex;
    flex-direction: column;
    gap: 2px;

    min-width: 0;
}

.kcf_server_details_heading strong {
    font-size: 0.95rem;
    font-weight: 700;

    color: var(--kcf_color_text);
}

.kcf_server_details_heading span {
    font-size: 0.74rem;

    color: var(--kcf_color_text_muted);
}

.kcf_server_details_toggle_end {
    display: flex;
    align-items: center;
    gap: var(--kcf_spacing_3);
}

.kcf_server_details_chevron {
    font-size: 0.82rem;

    color: var(--kcf_color_text_muted);

    transition:
        transform var(--kcf_transition_fast),
        color var(--kcf_transition_fast);
}

.kcf_server_details_item.kcf_is_open
.kcf_server_details_chevron {
    transform: rotate(180deg);
}

.kcf_server_details_content {
    padding:
        var(--kcf_spacing_3)
        var(--kcf_spacing_4)
        var(--kcf_spacing_4);
}

.kcf_server_details_content[hidden] {
    display: none;
}

.kcf_server_details_columns {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.65fr);

    gap: var(--kcf_spacing_5);
}

.kcf_server_details_data {
    display: grid;
    gap: var(--kcf_spacing_2);

    margin: 0;
}

.kcf_server_details_data > div {
    display: grid;
    grid-template-columns:
        minmax(130px, 0.55fr)
        minmax(0, 1fr);

    gap: var(--kcf_spacing_4);

    padding: var(--kcf_spacing_2) 0;

    border-bottom: 1px solid var(--kcf_color_border);
}

.kcf_server_details_data > div:last-child {
    border-bottom: 0;
}

.kcf_server_details_data dt {
    font-size: 0.78rem;
    font-weight: 600;

    color: var(--kcf_color_text_muted);
}

.kcf_server_details_data dd {
    margin: 0;

    font-size: 0.82rem;
    font-weight: 600;

    color: var(--kcf_color_text);
}

.kcf_server_details_notice {
    display: flex;
    align-items: flex-start;
    gap: var(--kcf_spacing_3);

    padding: var(--kcf_spacing_4);

    background: var(--kcf_color_navigation_secondary);
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
}

.kcf_server_details_notice > i {
    margin-top: 2px;

    font-size: 1rem;

    color: var(--kcf_color_navigation_primary);
}

.kcf_server_details_notice > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kcf_server_details_notice strong {
    font-size: 0.8rem;
}

.kcf_server_details_notice span {
    font-size: 0.74rem;
    line-height: 1.45;

    color: var(--kcf_color_text_muted);
}

.kcf_server_details_item_protected {
    background:
        linear-gradient(
            90deg,
            rgba(242, 126, 35, 0.05),
            transparent 38%
        ),
        var(--kcf_color_surface);
}

.kcf_server_details_protected_badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    font-size: 0.7rem;
    font-weight: 700;

    color: #c86516;
    background: rgba(242, 126, 35, 0.10);

    border-radius: var(--kcf_border_radius);
}

.kcf_server_details_empty {
    display: flex;
    align-items: center;
    gap: var(--kcf_spacing_2);

    padding: var(--kcf_spacing_3);

    font-size: 0.78rem;

    color: var(--kcf_color_text_muted);
    background: var(--kcf_color_surface_secondary);

    border-radius: var(--kcf_border_radius);
}

/* =========================================================
   SERVER – DETAILÜBERSICHT / AJAX-DATEN
   ========================================================= */

.kcf_server_details_summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--kcf_spacing_3);

    margin-bottom:
        var(--kcf_spacing_3);

    padding:
        0
        0
        var(--kcf_spacing_3);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_server_details_summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 0.78rem;

    color: var(--kcf_color_text_muted);
}

.kcf_server_details_summary > span:not(:last-child)::after {
    content: '';

    width: 1px;
    height: 14px;

    margin-left: var(--kcf_spacing_3);

    background: var(--kcf_color_border);
}

.kcf_server_details_summary strong {
    font-size: 0.78rem;
    font-weight: 700;

    color: var(--kcf_color_text);
}


/* =========================================================
   AJAX-CONTAINER
   ========================================================= */

.kcf_server_details_ajax {
    min-width: 0;
}

.kcf_server_details_loading {
    display: flex;
    align-items: center;
    gap: var(--kcf_spacing_2);

    padding: var(--kcf_spacing_3);

    font-size: 0.78rem;

    color: var(--kcf_color_text_muted);
    background: var(--kcf_color_surface_secondary);

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
}

.kcf_server_details_loading i {
    color: var(--kcf_color_navigation_primary);
}


/* =========================================================
   SERVER – EINFACHE DETAILTABELLEN
   ========================================================= */

.kcf_server_simple_table_wrapper {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);
}

.kcf_server_simple_table {
    width: 100%;

    border-collapse: collapse;

    background:
        var(--kcf_color_surface);
}

.kcf_server_simple_table th,
.kcf_server_simple_table td {
    padding:
        0.72rem
        0.9rem;

    border-bottom:
        1px solid
        var(--kcf_color_border);

    text-align: left;
    vertical-align: middle;
}

.kcf_server_simple_table th {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 78%,
            #ffffff 22%
        );

    color:
        var(--kcf_color_text_muted);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;
}

.kcf_server_simple_table td {
    color:
        var(--kcf_color_text);

    font-size:
        0.78rem;
}

.kcf_server_simple_table td strong {
    color:
        var(--kcf_color_text);

    font-weight:
        700;
}

.kcf_server_simple_table tbody
tr:last-child td {
    border-bottom: 0;
}

.kcf_server_simple_table tbody
tr:nth-child(even) {
    background:
        rgb(0 0 0 / 0.012);
}

.kcf_server_simple_table tbody
tr:hover {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 55%,
            #ffffff 45%
        );
}


/* =========================================================
   SERVER – DETAILTYP
   ========================================================= */

.kcf_server_type {
    display: inline-flex;
    align-items: center;

    gap:
        var(--kcf_spacing_2);

    font-weight:
        600;

    white-space:
        nowrap;
}

.kcf_server_type i {
    width:
        16px;

    color:
        var(--kcf_color_label);

    text-align:
        center;
}


/* =========================================================
   SERVER – CODE / TECHNISCHE WERTE
   ========================================================= */

.kcf_server_simple_table code {
    padding:
        0.15rem
        0.3rem;

    background:
        var(--kcf_color_surface_secondary);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size:
        0.72rem;
}


/* =========================================================
   FEHLER
   ========================================================= */

.kcf_server_details_error {
    display: flex;
    align-items: flex-start;
    gap: var(--kcf_spacing_3);

    padding: var(--kcf_spacing_3);

    background: rgba(179, 38, 30, 0.06);
    border: 1px solid rgba(179, 38, 30, 0.18);
    border-radius: var(--kcf_border_radius);
}

.kcf_server_details_error > i {
    margin-top: 2px;

    color: #b3261e;
}

.kcf_server_details_error > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kcf_server_details_error strong {
    font-size: 0.78rem;

    color: #b3261e;
}

.kcf_server_details_error span {
    font-size: 0.72rem;

    color: var(--kcf_color_text_muted);
}

/* =========================================================
   SERVER – ACCOUNT / TARIF
   ========================================================= */

.kcf_server_account {
    display: grid;

    gap:
        var(--kcf_spacing_4);
}


/* =========================================================
   SERVER – ACCOUNT BEREICH
   ========================================================= */

.kcf_server_account_section {
    min-width: 0;

    padding:
        var(--kcf_spacing_4);

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);
}

.kcf_server_account_section_header {
    display: flex;
    align-items: center;

    gap:
        var(--kcf_spacing_3);

    margin-bottom:
        var(--kcf_spacing_4);

    padding-bottom:
        var(--kcf_spacing_3);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_server_account_section_icon {
    display: grid;

    place-items: center;

    flex:
        0
        0
        38px;

    width: 38px;
    height: 38px;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_label);

    font-size:
        0.95rem;
}

.kcf_server_account_section_header > div {
    display: flex;
    flex-direction: column;

    gap:
        2px;
}

.kcf_server_account_section_header strong {
    color:
        var(--kcf_color_text);

    font-size:
        0.9rem;

    font-weight:
        700;
}

.kcf_server_account_section_header span {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.72rem;
}


/* =========================================================
   SERVER – ACCOUNT DATEN
   ========================================================= */

.kcf_server_account_grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        var(--kcf_spacing_3);
}

.kcf_server_account_item {
    display: flex;
    flex-direction: column;

    gap:
        var(--kcf_spacing_1);

    min-width: 0;

    padding:
        var(--kcf_spacing_3);

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);
}

.kcf_server_account_label {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;
}

.kcf_server_account_value {
    overflow-wrap:
        anywhere;

    color:
        var(--kcf_color_text);

    font-size:
        0.82rem;

    font-weight:
        700;
}


/* =========================================================
   SERVER – PHP
   ========================================================= */

.kcf_server_php {
    display: grid;

    gap:
        var(--kcf_spacing_4);
}

.kcf_server_php_available,
.kcf_server_php_assignments {
    display: grid;

    gap:
        var(--kcf_spacing_2);
}


/* PHP-VERSIONEN */

.kcf_server_php_versions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--kcf_spacing_2);
}

.kcf_server_php_version {
    display: inline-flex;
    align-items: center;

    min-height:
        28px;

    padding:
        0.25rem
        0.6rem;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text);

    font-size:
        0.72rem;

    font-weight:
        700;
}


/* =========================================================
   SERVER – PHP DOMAINZUORDNUNG
   ========================================================= */

.kcf_server_php_assignment_list {
    display: grid;

    gap:
        var(--kcf_spacing_2);
}

.kcf_server_php_assignment {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--kcf_spacing_4);

    min-height:
        40px;

    padding:
        var(--kcf_spacing_2)
        var(--kcf_spacing_3);

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);
}

.kcf_server_php_assignment_domain {
    display: inline-flex;
    align-items: center;

    gap:
        var(--kcf_spacing_2);

    min-width: 0;

    color:
        var(--kcf_color_text);

    font-size:
        0.8rem;

    font-weight:
        600;
}

.kcf_server_php_assignment_domain i {
    width:
        16px;

    color:
        var(--kcf_color_label);

    text-align:
        center;
}

.kcf_server_php_assignment_version {
    flex:
        0
        0
        auto;

    padding:
        0.25rem
        0.55rem;

    background:
        var(--kcf_color_navigation_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_navigation_primary);

    font-size:
        0.72rem;

    font-weight:
        700;
}

.kcf_plugin_overview_changelog {
    margin-top:
        var(--kcf_spacing_5);
}


/* =========================================================
   KCF CORE – PLUGIN-ÜBERSICHT
   ========================================================= */

.kcf_plugin_overview {
    display: grid;

    gap:
        var(--kcf_spacing_6);
}


/* =========================================================
   PLUGIN-BEREICHE
   ========================================================= */

.kcf_plugin_section {
    display: grid;

    gap:
        var(--kcf_spacing_4);
}

.kcf_plugin_section + .kcf_plugin_section {
    padding-top:
        var(--kcf_spacing_5);

    border-top:
        1px solid
        var(--kcf_color_border);
}


/* =========================================================
   PLUGIN-BEREICH – STANDARD-KOPF
   ========================================================= */

.kcf_plugin_section_header {
    padding-bottom:
        var(--kcf_spacing_2);
}

.kcf_plugin_section_heading {
    display: flex;
    align-items: flex-start;

    gap:
        var(--kcf_spacing_3);
}

.kcf_plugin_section_heading h2 {
    margin: 0;

    color:
        var(--kcf_color_text);

    font-size:
        1rem;

    font-weight:
        700;
}

.kcf_plugin_section_heading p {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.76rem;

    line-height:
        1.45;
}


/* =========================================================
   PLUGIN-BEREICH – TOGGLE
   ========================================================= */

.kcf_plugin_section_toggle {
    gap:
        var(--kcf_spacing_3);
}

.kcf_plugin_section_summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap:
        var(--kcf_spacing_4);

    list-style: none;
    cursor: pointer;
}

.kcf_plugin_section_summary::-webkit-details-marker {
    display: none;
}

.kcf_plugin_section_summary_meta {
    display: inline-flex;
    align-items: center;

    gap:
        var(--kcf_spacing_3);

    flex-shrink: 0;
}

.kcf_plugin_section_counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width:
        28px;

    min-height:
        24px;

    padding:
        0.15rem
        0.5rem;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.68rem;

    font-weight:
        700;
}

.kcf_plugin_section_chevron {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.76rem;

    transition:
        transform var(--kcf_transition_fast),
        color var(--kcf_transition_fast);
}

.kcf_plugin_section_toggle[open]
.kcf_plugin_section_chevron {
    transform:
        rotate(180deg);
}

.kcf_plugin_section_summary:hover
.kcf_plugin_section_chevron {
    color:
        var(--kcf_color_value);
}


/* =========================================================
   PLUGIN-LISTE
   ========================================================= */

.kcf_plugin_list {
    overflow: hidden;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    box-shadow:
        var(--kcf_shadow_small);
}


/* =========================================================
   PLUGIN-LISTE – SPALTEN
   ========================================================= */

.kcf_plugin_list_header,
.kcf_plugin_list_item {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        110px
        150px
        minmax(180px, auto);

    align-items: center;

    column-gap:
        var(--kcf_spacing_4);
}

.kcf_plugin_list_header {
    min-height:
        40px;

    padding:
        0
        var(--kcf_spacing_4);

    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 82%,
            #ffffff 18%
        );

    border-bottom:
        1px solid
        var(--kcf_color_border);

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}

.kcf_plugin_list_item {
    min-height:
        84px;

    padding:
        var(--kcf_spacing_4);

    border-bottom:
        1px solid
        var(--kcf_color_border);

    transition:
        background var(--kcf_transition_fast);
}

.kcf_plugin_list_item:last-child {
    border-bottom: 0;
}

.kcf_plugin_list_item:hover {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 50%,
            var(--kcf_color_surface) 50%
        );
}

.kcf_plugin_list_column_version,
.kcf_plugin_list_column_status {
    display: flex;
    align-items: center;
}

.kcf_plugin_list_column_action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* =========================================================
   PLUGIN-KOMPONENTE
   ========================================================= */

.kcf_plugin_list_component {
    display: flex;
    align-items: center;

    gap:
        var(--kcf_spacing_3);

    min-width: 0;
}

.kcf_plugin_list_component_icon {
    display: grid;

    place-items: center;

    flex:
        0
        0
        42px;

    width:
        42px;

    height:
        42px;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    font-size:
        1rem;
}

.kcf_plugin_section_system
.kcf_plugin_list_component_icon {
    color:
        var(--kcf_color_value);
}

.kcf_plugin_section_available
.kcf_plugin_list_component_icon {
    color:
        var(--kcf_color_label);
}

.kcf_plugin_section_installed
.kcf_plugin_list_component_icon {
    color:
        var(--kcf_color_success);
}

.kcf_plugin_list_component_content {
    min-width: 0;
}

.kcf_plugin_list_component_content h3 {
    margin: 0;

    color:
        var(--kcf_color_text);

    font-size:
        0.86rem;

    font-weight:
        700;
}

.kcf_plugin_list_component_content p {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.72rem;

    line-height:
        1.45;
}


/* =========================================================
   PLUGIN – VERSION / STATUS
   ========================================================= */

.kcf_plugin_version,
.kcf_plugin_status {
    display: inline-flex;
    align-items: center;

    gap:
        var(--kcf_spacing_1);

    min-height:
        24px;

    padding:
        0.15rem
        0.5rem;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    font-size:
        0.68rem;

    font-weight:
        700;

    white-space:
        nowrap;
}

.kcf_plugin_version {
    color:
        var(--kcf_color_value);

    text-decoration:
        none;
}

.kcf_plugin_version:hover,
.kcf_plugin_version:focus,
.kcf_plugin_version:active {
    text-decoration:
        none;
}

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

.kcf_plugin_status i {
    font-size:
        0.55rem;
}

.kcf_plugin_status_system {
    color:
        var(--kcf_color_value);
}

.kcf_plugin_status_active {
    color:
        var(--kcf_color_success);
}

.kcf_plugin_status_available {
    color:
        var(--kcf_color_label);
}

.kcf_plugin_status_development {
    color:
        var(--kcf_color_info);
}

.kcf_plugin_status_planned {
    color:
        var(--kcf_color_text_muted);
}


/* =========================================================
   PLUGIN – AKTIONEN
   ========================================================= */

.kcf_plugin_list_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap:
        var(--kcf_spacing_2);
}

.kcf_plugin_card_action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        var(--kcf_spacing_2);

    min-height:
        30px;

    padding:
        0.35rem
        0.25rem;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.7rem;

    font-weight:
        700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--kcf_transition_fast);
}

.kcf_plugin_card_action:hover {
    color:
        var(--kcf_color_value);
}

.kcf_plugin_card_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        var(--kcf_spacing_2);

    min-height:
        30px;

    padding:
        0.35rem
        0.7rem;

    border:
        1px solid
        transparent;

    border-radius:
        var(--kcf_border_radius);

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background var(--kcf_transition_fast),
        border-color var(--kcf_transition_fast),
        color var(--kcf_transition_fast);
}

.kcf_plugin_card_button_install {
    background:
        rgb(76 139 87 / 0.10);

    border-color:
        rgb(76 139 87 / 0.22);

    color:
        #3d6d47;
}

.kcf_plugin_card_button_install:hover {
    background:
        rgb(76 139 87 / 0.16);

    border-color:
        rgb(76 139 87 / 0.34);

    color:
        #31593a;
}

.kcf_plugin_card_button_uninstall {
    background:
        rgb(179 38 30 / 0.08);

    border-color:
        rgb(179 38 30 / 0.20);

    color:
        var(--kcf_color_error);
}

.kcf_plugin_card_button_uninstall:hover {
    background:
        rgb(179 38 30 / 0.14);

    border-color:
        rgb(179 38 30 / 0.34);

    color:
        #951f19;
}

.kcf_plugin_list_no_action {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.75rem;
}


/* =========================================================
   PLUGIN – BEREICHSSPEZIFISCHE ABSTUFUNGEN
   ========================================================= */

.kcf_plugin_section_development
.kcf_plugin_list {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface) 94%,
            var(--kcf_color_surface_secondary) 6%
        );
}

.kcf_plugin_section_development
.kcf_plugin_list_component_icon {
    color:
        var(--kcf_color_info);
}

.kcf_plugin_section_planned
.kcf_plugin_section_heading h2,
.kcf_plugin_section_planned
.kcf_plugin_section_heading p {
    color:
        var(--kcf_color_text_muted);
}

.kcf_plugin_section_planned
.kcf_plugin_list {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface) 88%,
            var(--kcf_color_surface_secondary) 12%
        );
}

.kcf_plugin_section_planned
.kcf_plugin_list_header {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 88%,
            #ffffff 12%
        );
}

.kcf_plugin_section_planned
.kcf_plugin_list_item {
    background:
        rgb(0 0 0 / 0.012);
}

.kcf_plugin_section_planned
.kcf_plugin_list_item:hover {
    background:
        rgb(0 0 0 / 0.022);
}

.kcf_plugin_section_planned
.kcf_plugin_list_component_icon {
    color:
        color-mix(
            in srgb,
            var(--kcf_color_text_muted) 80%,
            white
        );
}

.kcf_plugin_section_planned
.kcf_plugin_list_component_content h3 {
    color:
        color-mix(
            in srgb,
            var(--kcf_color_text) 75%,
            var(--kcf_color_text_muted) 25%
        );
}

.kcf_plugin_section_planned
.kcf_plugin_list_component_content p,
.kcf_plugin_section_planned
.kcf_plugin_version,
.kcf_plugin_section_planned
.kcf_plugin_list_no_action,
.kcf_plugin_section_planned
.kcf_plugin_section_counter {
    color:
        var(--kcf_color_text_muted);
}


/* =========================================================
   KCF CORE – PLUGIN DEINSTALLATION
   ========================================================= */

.kcf_plugin_uninstall_header {
    display: flex;
    align-items: center;

    gap:
        var(--kcf_spacing_4);

    margin-bottom:
        var(--kcf_spacing_5);

    padding-bottom:
        var(--kcf_spacing_4);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_plugin_uninstall_header h2 {
    margin:
        0
        0
        var(--kcf_spacing_1);

    font-size:
        1.05rem;
}

.kcf_plugin_uninstall_header p {
    margin: 0;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.8rem;
}

.kcf_plugin_uninstall_form {
    display: grid;

    gap:
        var(--kcf_spacing_3);
}

.kcf_plugin_uninstall_option {
    display: grid;

    grid-template-columns:
        auto
        42px
        minmax(0, 1fr);

    align-items: center;

    gap:
        var(--kcf_spacing_3);

    padding:
        var(--kcf_spacing_4);

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    cursor:
        pointer;
}

.kcf_plugin_uninstall_option:hover {
    background:
        var(--kcf_color_surface_secondary);
}

.kcf_plugin_uninstall_option:has(input:checked) {
    border-color:
        var(--kcf_color_label);

    background:
        var(--kcf_color_navigation_secondary);
}

.kcf_plugin_uninstall_option input {
    width:
        18px;

    height:
        18px;

    accent-color:
        var(--kcf_color_success);
}

.kcf_plugin_uninstall_option_icon {
    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_label);
}

.kcf_plugin_uninstall_option_content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--kcf_spacing_1);
}

.kcf_plugin_uninstall_option_content strong {
    font-size:
        0.85rem;
}

.kcf_plugin_uninstall_option_content small {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.74rem;

    line-height:
        1.4;
}

.kcf_plugin_uninstall_submit {
    background:
        rgb(179 38 30 / 0.10);

    border-color:
        rgb(179 38 30 / 0.28);

    color:
        var(--kcf_color_error);
}

.kcf_plugin_uninstall_submit:hover {
    background:
        rgb(179 38 30 / 0.18);

    border-color:
        rgb(179 38 30 / 0.42);
}


/* =========================================================
   KCF CORE – DETAILLISTEN / AUFKLAPPBARE DATENSÄTZE
   ========================================================= */

.kcf_details_list {
    display: grid;

    gap:
        var(--kcf_spacing_5);
}


/* =========================================================
   EINZELNER DETAILBLOCK
   ========================================================= */

.kcf_details_item {
    overflow: hidden;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    box-shadow:
        var(--kcf_shadow_small);
}


/* =========================================================
   TABELLENKOPF
   ========================================================= */

.kcf_details_header,
.kcf_details_summary {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        150px
        190px
        90px
        32px;

    align-items: center;

    column-gap:
        var(--kcf_spacing_4);
}


.kcf_details_header {
    min-height:
        40px;

    padding:
        0
        var(--kcf_spacing_4);

    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 82%,
            #ffffff 18%
        );

    border-bottom:
        1px solid
        var(--kcf_color_border);

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


/* =========================================================
   SUMMARY / TOGGLE-ZEILE
   ========================================================= */

.kcf_details_summary {
    min-height:
        78px;

    padding:
        var(--kcf_spacing_4);

    list-style:
        none;

    cursor:
        pointer;

    transition:
        background
        var(--kcf_transition_fast);
}


.kcf_details_summary::-webkit-details-marker {
    display:
        none;
}


.kcf_details_summary:hover {
    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 50%,
            var(--kcf_color_surface) 50%
        );
}


.kcf_details_item[open]
.kcf_details_summary {
    background:
        var(--kcf_color_surface_secondary);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}


/* =========================================================
   IDENTITÄT
   ========================================================= */

.kcf_details_identity {
    display: flex;

    align-items: center;

    gap:
        var(--kcf_spacing_3);

    min-width:
        0;
}


.kcf_details_identity_icon {
    display: grid;

    place-items: center;

    flex:
        0
        0
        42px;

    width:
        42px;

    height:
        42px;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_text_muted);

    font-size:
        1rem;
}


.kcf_details_identity_content {
    min-width:
        0;
}


.kcf_details_identity_content h3 {
    margin:
        0;

    color:
        var(--kcf_color_text);

    font-size:
        0.86rem;

    font-weight:
        700;
}


.kcf_details_identity_content p {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.72rem;

    line-height:
        1.45;
}


/* =========================================================
   DETAILSPALTEN
   ========================================================= */

.kcf_details_column {
    display: flex;

    align-items: center;

    min-width:
        0;
}


.kcf_details_column_end {
    justify-content:
        flex-end;
}


/* =========================================================
   TOGGLE / CHEVRON
   ========================================================= */

.kcf_details_toggle {
    display: inline-flex;

    align-items: center;

    justify-content: flex-end;

    gap:
        var(--kcf_spacing_3);
}


.kcf_details_chevron {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.76rem;

    transition:
        transform
        var(--kcf_transition_fast),
        color
        var(--kcf_transition_fast);
}


.kcf_details_item[open]
.kcf_details_chevron {
    transform:
        rotate(180deg);
}


.kcf_details_summary:hover
.kcf_details_chevron {
    color:
        var(--kcf_color_value);
}


/* =========================================================
   AUFGEKLAPPTER DETAILBEREICH
   ========================================================= */

.kcf_details_content {
    padding:
        var(--kcf_spacing_5);

    background:
        color-mix(
            in srgb,
            var(--kcf_color_surface_secondary) 32%,
            var(--kcf_color_surface) 68%
        );
}


/* =========================================================
   DETAIL-AKTIONEN
   ========================================================= */

.kcf_details_actions {
    display: flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        var(--kcf_spacing_2);

    margin-bottom:
        var(--kcf_spacing_6);
}


/* =========================================================
   DETAIL-GRUPPEN
   ========================================================= */

.kcf_details_group {
    min-width:
        0;
}


.kcf_details_group
+
.kcf_details_group {
    margin-top:
        var(--kcf_spacing_6);

    padding-top:
        var(--kcf_spacing_5);

    border-top:
        1px solid
        var(--kcf_color_border);
}


.kcf_details_group_header {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        var(--kcf_spacing_4);

    margin-bottom:
        var(--kcf_spacing_4);
}


.kcf_details_group_header h3 {
    margin:
        0;

    color:
        var(--kcf_color_text);

    font-size:
        0.95rem;

    font-weight:
        700;
}


.kcf_details_group_header p {
    margin:
        0.25rem
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.72rem;
}


/* =========================================================
   DETAIL-TABELLE
   ========================================================= */

.kcf_details_table {
    overflow:
        hidden;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    box-shadow:
        var(--kcf_shadow_small);
}


.kcf_details_table
.kcf_table_wrapper {
    margin:
        0;
}


.kcf_details_table
.kcf_table {
    margin:
        0;
}


.kcf_details_table
.kcf_table tbody tr:last-child td {
    border-bottom:
        0;
}

/* =========================================================
   KCF CORE – KLEINER TOGGLE-BUTTON
   ========================================================= */

.kcf_section_toggle_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--kcf_spacing_2);

    min-height: 32px;

    padding:
        0.35rem
        0.75rem;

    background:
        #333333;

    border:
        1px solid
        #3f3f3f;

    border-radius:
        var(--kcf_border_radius);

    color:
        #ffffff;

    font-size:
        0.72rem;

    font-weight:
        700;

    box-shadow:
        var(--kcf_shadow_small);

    transition:
        background var(--kcf_transition_fast),
        border-color var(--kcf_transition_fast),
        color var(--kcf_transition_fast);
}


.kcf_plugin_section_summary:hover
.kcf_section_toggle_button {
    background:
        #444444;

    border-color:
        #505050;

    color:
        #ffffff;
}


.kcf_section_toggle_button
.kcf_plugin_section_chevron {
    color:
        inherit;
}


/* =========================================================
   KCF CORE – SYSTEM / INFO ÜBERSICHT
   ========================================================= */

.kcf_info_overview {
    display: grid;

    gap:
        var(--kcf_spacing_5);
}


/* =========================================================
   INFO-KENNZAHLEN
   ========================================================= */

.kcf_info_stats {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        var(--kcf_spacing_3);
}

.kcf_info_stat {
    display: flex;
    align-items: center;

    gap:
        var(--kcf_spacing_3);

    min-width: 0;

    padding:
        var(--kcf_spacing_4);

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    box-shadow:
        var(--kcf_shadow_small);
}

.kcf_info_stat_icon {
    display: grid;

    place-items: center;

    flex:
        0 0
        42px;

    width:
        42px;

    height:
        42px;

    background: #ffffff;

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color: #555555;

    font-size:
        1rem;
}

.kcf_info_stat_content {
    display: flex;

    flex-direction:
        column;

    min-width:
        0;
}

.kcf_info_stat_label {
    margin-bottom:
        2px;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.7rem;

    font-weight:
        600;
}

.kcf_info_stat_value {
    overflow:
        hidden;

    color:
        var(--kcf_color_text);

    font-size:
        0.95rem;

    font-weight:
        700;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   INFO-BEREICH
   ========================================================= */

.kcf_info_section {
    overflow:
        hidden;

    padding:
        0;
}

.kcf_info_section_header {
    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--kcf_spacing_5);

    padding:
        var(--kcf_spacing_4)
        var(--kcf_spacing_5);

    border-bottom:
        1px solid
        var(--kcf_color_border);
}

.kcf_info_section_heading {
    display: flex;

    align-items:
        center;

    gap:
        var(--kcf_spacing_3);

    min-width:
        0;
}

.kcf_info_section_icon {
    display: grid;

    place-items:
        center;

    flex:
        0 0
        38px;

    width:
        38px;

    height:
        38px;

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_label);

    font-size:
        0.9rem;
}

.kcf_info_section_heading_content {
    min-width:
        0;
}

.kcf_info_section_title {
    margin:
        0;

    color:
        var(--kcf_color_text);

    font-size:
        1rem;

    font-weight:
        700;
}

.kcf_info_section_description {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.76rem;

    line-height:
        1.4;
}

.kcf_info_section_content {
    padding:
        var(--kcf_spacing_5);
}


/* =========================================================
   INFO – AKTUELLE VERSION
   ========================================================= */

.kcf_info_version_meta {
    display: flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--kcf_spacing_2);

    margin-bottom:
        var(--kcf_spacing_4);
}

.kcf_info_version_number {
    display: inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0.25rem
        0.6rem;

    background:
        var(--kcf_color_navigation_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_value);

    font-size:
        0.78rem;

    font-weight:
        700;
}

.kcf_info_version_date {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.74rem;
}


/* =========================================================
   INFO – ÄNDERUNGSLISTE
   ========================================================= */

.kcf_info_changes {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--kcf_spacing_2)
        var(--kcf_spacing_5);

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.kcf_info_changes li {
    display: flex;

    align-items:
        flex-start;

    gap:
        var(--kcf_spacing_2);

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.78rem;

    line-height:
        1.45;
}

.kcf_info_changes li > i {
    margin-top:
        0.2rem;

    color:
        var(--kcf_color_success);

    font-size:
        0.68rem;
}

.kcf_info_changes_more {
    margin:
        var(--kcf_spacing_4)
        0
        0;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.72rem;
}


/* =========================================================
   INFO – SYSTEMBEREICHE
   ========================================================= */

.kcf_info_modules {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--kcf_spacing_3);
}

.kcf_info_module {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        var(--kcf_spacing_3);

    min-width:
        0;

    padding:
        var(--kcf_spacing_4);

    background:
        var(--kcf_color_surface_secondary);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        inherit;

    text-decoration:
        none;

    transition:
        background var(--kcf_transition_fast),
        border-color var(--kcf_transition_fast);
}

.kcf_info_module:hover {
    background:
        var(--kcf_color_surface);

    border-color:
        var(--kcf_color_label);
}

.kcf_info_module_icon {
    display: grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    background:
        var(--kcf_color_surface);

    border:
        1px solid
        var(--kcf_color_border);

    border-radius:
        var(--kcf_border_radius);

    color:
        var(--kcf_color_label);

    font-size:
        0.9rem;
}

.kcf_info_module_content {
    min-width:
        0;
}

.kcf_info_module_title {
    display:
        block;

    color:
        var(--kcf_color_text);

    font-size:
        0.82rem;

    font-weight:
        700;
}

.kcf_info_module_description {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.7rem;

    line-height:
        1.35;
}

.kcf_info_module_arrow {
    color:
        var(--kcf_color_text_muted);

    font-size:
        0.72rem;
}

.kcf_info_module:hover
.kcf_info_module_arrow {
    color:
        var(--kcf_color_value);
}

/* =========================================================
   KCF CORE – PLUGIN VERSION META
   ========================================================= */

.kcf_plugin_version_meta {
    margin-top:
        var(--kcf_spacing_1);

    color:
        var(--kcf_color_text_muted);

    font-size:
        0.62rem;

    font-weight:
        500;
}


/* =========================================================
   KCF CORE – ALL-INKL.COM
   ========================================================= */

.kcf_all_inkl_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kcf_spacing_5);
}

.kcf_all_inkl_card {
    display: flex;
    flex-direction: column;

    min-height: 260px;

    padding: var(--kcf_spacing_5);
}

.kcf_all_inkl_card_icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: var(--kcf_spacing_5);

    background: var(--kcf_color_surface_secondary);

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);

    color: var(--kcf_color_label);

    font-size: 1.25rem;
}

.kcf_all_inkl_card_content {
    flex: 1;
}

.kcf_all_inkl_card_content h2 {
    margin-bottom: var(--kcf_spacing_2);

    font-size: 1.1rem;
}

.kcf_all_inkl_card_content p {
    margin-bottom: 0;

    color: var(--kcf_color_text_muted);

    line-height: 1.6;
}

.kcf_all_inkl_card_actions {
    margin-top: var(--kcf_spacing_5);
    display: flex;
    justify-content: flex-start;
}

.kcf_all_inkl_card_actions .kcf_button {
    width: auto;
}

.kcf_all_inkl_information {
    display: flex;
    align-items: flex-start;

    gap: var(--kcf_spacing_4);

    margin-top: var(--kcf_spacing_5);

    padding: var(--kcf_spacing_5);
}

.kcf_all_inkl_information_icon {
    flex: 0 0 auto;

    color: var(--kcf_color_info);

    font-size: 1.15rem;
}

.kcf_all_inkl_information p {
    margin:
        var(--kcf_spacing_1)
        0
        0;

    color: var(--kcf_color_text_muted);
}
/* =========================================================
   KCF CORE – BENUTZERGRUPPEN / BERECHTIGUNGEN
   ========================================================= */

.kcf_user_group_form {
    display: grid;
    gap: var(--kcf_spacing_4);
}

.kcf_user_group_card {
    padding: 0;
    overflow: hidden;
}

.kcf_user_group_info_grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: var(--kcf_spacing_4) var(--kcf_spacing_5);
    padding: var(--kcf_spacing_5);
}

.kcf_user_group_info_grid .kcf_form_group {
    margin-bottom: 0;
}

.kcf_user_group_description_field {
    grid-column: 1 / -1;
}

.kcf_user_group_status_field {
    align-self: end;
}

.kcf_user_group_status_toggle,
.kcf_user_group_system_state {
    display: flex;
    align-items: center;
    min-height: 42px;
    gap: var(--kcf_spacing_2);
    padding: 0 var(--kcf_spacing_3);
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface_secondary);
    color: var(--kcf_color_text);
    font-size: 0.78rem;
    font-weight: 600;
}

.kcf_user_group_status_toggle {
    cursor: pointer;
}

.kcf_user_group_status_toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--kcf_color_primary);
}

.kcf_user_group_system_state i {
    color: var(--kcf_color_text_muted);
}

.kcf_user_group_superuser_notice {
    display: flex;
    align-items: flex-start;
    gap: var(--kcf_spacing_4);
    margin: var(--kcf_spacing_5);
    padding: var(--kcf_spacing_4);
    border: 1px solid var(--kcf_color_border);
    border-left: 3px solid var(--kcf_color_primary);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface_secondary);
}

.kcf_user_group_superuser_icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface);
    color: var(--kcf_color_primary);
}

.kcf_user_group_superuser_notice strong {
    display: block;
    margin-bottom: var(--kcf_spacing_1);
    font-size: 0.86rem;
}

.kcf_user_group_superuser_notice p {
    margin: 0;
    color: var(--kcf_color_text_muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.kcf_user_group_permissions {
    display: grid;
}

.kcf_user_permission_section + .kcf_user_permission_section {
    border-top: 1px solid var(--kcf_color_border);
}

.kcf_user_permission_section_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kcf_spacing_4);
    padding: var(--kcf_spacing_4) var(--kcf_spacing_5);
    background: var(--kcf_color_surface_secondary);
    border-bottom: 1px solid var(--kcf_color_border);
}

.kcf_user_permission_section_header h3 {
    margin: 0;
    color: var(--kcf_color_text);
    font-size: 0.9rem;
    font-weight: 700;
}

.kcf_user_permission_section_header span {
    display: block;
    margin-top: 2px;
    color: var(--kcf_color_text_muted);
    font-size: 0.7rem;
}

.kcf_user_permission_section_actions {
    display: flex;
    align-items: center;
    gap: var(--kcf_spacing_2);
}

.kcf_user_permission_resources {
    display: grid;
}

.kcf_user_permission_resource {
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 2.05fr);
    gap: var(--kcf_spacing_5);
    align-items: center;
    min-height: 72px;
    padding: var(--kcf_spacing_4) var(--kcf_spacing_5);
}

.kcf_user_permission_resource + .kcf_user_permission_resource {
    border-top: 1px solid var(--kcf_color_border);
}

.kcf_user_permission_resource_info strong {
    display: block;
    margin-bottom: 3px;
    color: var(--kcf_color_text);
    font-size: 0.8rem;
    font-weight: 700;
}

.kcf_user_permission_resource_info span {
    display: block;
    color: var(--kcf_color_text_muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.kcf_user_permission_actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--kcf_spacing_2);
}

.kcf_user_permission_option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--kcf_spacing_2);
    min-height: 34px;
    padding: 0 var(--kcf_spacing_3);
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface);
    color: var(--kcf_color_text_muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--kcf_transition_fast), background var(--kcf_transition_fast), color var(--kcf_transition_fast);
}

.kcf_user_permission_option:hover {
    border-color: var(--kcf_color_primary);
    color: var(--kcf_color_text);
}

.kcf_user_permission_option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.kcf_user_permission_option_box {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--kcf_color_border);
    border-radius: 2px;
    background: var(--kcf_color_surface_secondary);
    color: transparent;
    font-size: 0.58rem;
}

.kcf_user_permission_option:has(input:checked) {
    border-color: color-mix(in srgb, var(--kcf_color_primary) 40%, var(--kcf_color_border));
    background: color-mix(in srgb, var(--kcf_color_primary) 6%, var(--kcf_color_surface));
    color: var(--kcf_color_text);
}

.kcf_user_permission_option input:checked + .kcf_user_permission_option_box {
    border-color: var(--kcf_color_primary);
    background: var(--kcf_color_primary);
    color: #fff;
}

.kcf_user_group_form_actions {
    margin-top: 0;
}

/* =========================================================
   KCF CORE – BENUTZERGRUPPEN / NEXT LEVEL RECHTE
   ========================================================= */

.kcf_required_marker {
    color: var(--kcf_color_error);
}

.kcf_button_small {
    min-height: 34px;
    padding: 0.48rem 0.85rem;
    font-size: 0.76rem;
}

.kcf_button_success {
    background: var(--kcf_color_success);
    color: #ffffff;
}

.kcf_button_success:hover {
    filter: brightness(0.96);
}

.kcf_button_danger {
    background: #ffffff;
    border-color: #B42318;
    color: #B42318;
}

.kcf_button_danger:hover {
    background: #B42318;
    border-color: #7F1D1D;
    color: #ffffff;
}

.kcf_user_group_form {
    display: grid;
    gap: var(--kcf_spacing_4);
}

.kcf_user_group_card {
    padding: 0;
    overflow: hidden;
}

.kcf_user_group_card_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kcf_spacing_4);
    padding: var(--kcf_spacing_5);
}

.kcf_user_group_card_header_border {
    border-bottom: 1px solid var(--kcf_color_border);
}

.kcf_user_group_card_heading {
    display: flex;
    align-items: flex-start;
    gap: var(--kcf_spacing_3);
    min-width: 0;
}

.kcf_user_group_card_heading h2,
.kcf_user_group_panel_heading h3,
.kcf_user_group_resource_text h4 {
    margin: 0;
}

.kcf_user_group_card_heading p,
.kcf_user_group_panel_heading p,
.kcf_user_group_resource_text p {
    margin: 0.2rem 0 0;
    color: var(--kcf_color_text_muted);
    line-height: 1.5;
}

.kcf_user_group_card_heading_icon,
.kcf_user_group_panel_heading_icon,
.kcf_user_group_resource_icon,
.kcf_user_group_stat_icon {
    display: inline-grid;
    place-items: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);

    background: #ffffff;

    color: #555555;
}

.kcf_user_group_header_badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--kcf_spacing_2);
}

.kcf_user_group_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface_secondary);
    font-size: 0.76rem;
    font-weight: 700;
}

.kcf_user_group_badge.is-active {
    border-color: var(--kcf_color_success_border);
    background: var(--kcf_color_success_background);
    color: var(--kcf_color_success);
}

.kcf_user_group_badge.is-inactive {
    border-color: var(--kcf_color_error_border);
    background: var(--kcf_color_error_background);
    color: var(--kcf_color_error);
}

.kcf_user_group_badge.is-neutral {
    color: var(--kcf_color_text);
}

.kcf_user_group_info_layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.95fr);
    gap: var(--kcf_spacing_5);
    padding: var(--kcf_spacing_5);
}

.kcf_user_group_info_main,
.kcf_user_group_info_side {
    display: grid;
    gap: var(--kcf_spacing_4);
}

.kcf_user_group_info_main .kcf_form_group,
.kcf_user_group_info_side .kcf_form_group {
    margin-bottom: 0;
}

.kcf_user_group_meta_field {
    display: grid;
    gap: var(--kcf_spacing_2);
}

.kcf_user_group_meta_value {
    display: inline-flex;
    align-items: center;
    gap: var(--kcf_spacing_2);
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface_secondary);
    color: var(--kcf_color_text);
    font-size: 0.82rem;
    font-weight: 600;
}

.kcf_user_group_meta_value i {
    color: var(--kcf_color_text_muted);
}

.kcf_user_group_switch {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 44px;
    cursor: pointer;
}

.kcf_user_group_switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.kcf_user_group_switch_track {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kcf_color_text_muted) 35%, white 65%);
    transition: background var(--kcf_transition_fast);
}

.kcf_user_group_switch_track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: var(--kcf_shadow_small);
    transition: transform var(--kcf_transition_fast);
}

.kcf_user_group_switch input:checked + .kcf_user_group_switch_track {
    background: var(--kcf_color_success);
}

.kcf_user_group_switch input:checked + .kcf_user_group_switch_track::after {
    transform: translateX(24px);
}

.kcf_user_group_switch_label {
    color: var(--kcf_color_text);
    font-size: 0.82rem;
    font-weight: 600;
}

.kcf_user_group_stats_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kcf_spacing_3);
}

.kcf_user_group_stat_card {
    display: flex;
    align-items: center;
    gap: var(--kcf_spacing_3);
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface);
}

.kcf_user_group_stat_card span {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--kcf_color_text_muted);
    font-size: 0.72rem;
}

.kcf_user_group_stat_card strong {
    display: block;
    color: var(--kcf_color_text);
    font-size: 0.82rem;
    line-height: 1.35;
}

.kcf_user_group_permissions_shell {
    display: grid;
}

.kcf_user_group_tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kcf_spacing_2);
    padding: 0 var(--kcf_spacing_5) var(--kcf_spacing_4);
    border-bottom: 1px solid var(--kcf_color_border);
}

.kcf_user_group_tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.65rem 1rem;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--kcf_color_text_muted);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    transition: color var(--kcf_transition_fast), border-color var(--kcf_transition_fast), background var(--kcf_transition_fast);
}

.kcf_user_group_tab:hover {
    color: var(--kcf_color_text);
}

.kcf_user_group_tab.is-active {
    color: var(--kcf_color_value);
    border-bottom-color: var(--kcf_color_value);
}

.kcf_user_group_tab_panels {
    display: grid;
}

.kcf_user_group_tab_panel {
    padding: var(--kcf_spacing_4) var(--kcf_spacing_5) var(--kcf_spacing_5);
}

.kcf_user_group_panel_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kcf_spacing_4);
    margin-bottom: var(--kcf_spacing_4);
}

.kcf_user_group_panel_heading {
    display: flex;
    align-items: flex-start;
    gap: var(--kcf_spacing_3);
}

.kcf_user_group_panel_heading h3 {
    font-size: 1.02rem;
}

.kcf_user_group_panel_actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kcf_spacing_2);
}

.kcf_user_group_resource_list {
    display: grid;
    gap: var(--kcf_spacing_3);
}

.kcf_user_group_resource_card {
    display: grid;
    grid-template-columns: minmax(240px, 0.92fr) minmax(0, 1.78fr);
    gap: var(--kcf_spacing_4);
    padding: var(--kcf_spacing_4);
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--kcf_color_surface_secondary) 45%, #ffffff 55%) 0%, #ffffff 100%);
}

.kcf_user_group_resource_info {
    display: flex;
    align-items: flex-start;
    gap: var(--kcf_spacing_3);
}

.kcf_user_group_resource_text h4 {
    color: var(--kcf_color_text);
    font-size: 0.96rem;
}

.kcf_user_group_resource_text p {
    font-size: 0.8rem;
}

.kcf_user_group_permission_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: var(--kcf_spacing_3);
    align-content: start;
}

.kcf_user_group_permission_item {
    display: grid;
    gap: 0.55rem;
    min-height: 78px;
    padding: 0.85rem;
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: #ffffff;
}

.kcf_user_group_permission_label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--kcf_color_text);
    font-size: 0.78rem;
    font-weight: 700;
}

.kcf_user_group_permission_label i {
    color: var(--kcf_color_text_muted);
}

.kcf_permission_toggle {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 0.2rem;
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface_secondary);
}

.kcf_permission_toggle_input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.kcf_permission_toggle_button {
    min-width: 56px;
    min-height: 30px;
    padding: 0.32rem 0.75rem;
    border: 0;
    border-radius: calc(var(--kcf_border_radius) - 1px);
    background: transparent;
    color: var(--kcf_color_text_muted);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    transition: background var(--kcf_transition_fast), color var(--kcf_transition_fast), box-shadow var(--kcf_transition_fast);
}

.kcf_permission_toggle_button.is-active.is-yes {
    background: var(--kcf_color_success);
    color: #ffffff;
}

.kcf_permission_toggle_button.is-active.is-no {
    background: var(--kcf_color_error);
    color: #ffffff;
}

.kcf_permission_toggle_button:not(.is-active):hover {
    color: var(--kcf_color_text);
}

.kcf_user_group_superuser_notice {
    display: flex;
    align-items: flex-start;
    gap: var(--kcf_spacing_4);
    margin: var(--kcf_spacing_5);
    padding: var(--kcf_spacing_4);
    border: 1px solid color-mix(in srgb, var(--kcf_color_value) 35%, var(--kcf_color_border));
    border-left: 4px solid var(--kcf_color_value);
    border-radius: var(--kcf_border_radius);
    background: color-mix(in srgb, var(--kcf_color_value) 7%, #ffffff 93%);
}

.kcf_user_group_superuser_icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--kcf_border_radius);
    background: #ffffff;
    color: var(--kcf_color_value);
    border: 1px solid color-mix(in srgb, var(--kcf_color_value) 25%, var(--kcf_color_border));
}

.kcf_user_group_superuser_notice strong {
    display: block;
    margin-bottom: var(--kcf_spacing_1);
    font-size: 0.92rem;
}

.kcf_user_group_superuser_notice p {
    margin: 0;
    color: var(--kcf_color_text_muted);
    font-size: 0.8rem;
    line-height: 1.6;
}

.kcf_user_group_form_actions {
    margin-top: 0;
}


/* =========================================================
   KCF CORE – EINSTELLUNGEN ERWEITERUNGEN
   ========================================================= */

.kcf_settings_icon_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: var(--kcf_spacing_4);
    align-items: stretch;
}

.kcf_settings_icon_fields {
    display: grid;
    gap: var(--kcf_spacing_4);
    min-width: 0;
}

.kcf_settings_icon_preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--kcf_spacing_2);
    min-height: 126px;
    padding: var(--kcf_spacing_4);
    border-left: 1px solid var(--kcf_color_border);
    text-align: center;
}

.kcf_settings_icon_preview_symbol {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--kcf_color_border);
    border-radius: var(--kcf_border_radius);
    background: var(--kcf_color_surface_secondary);
    color: var(--kcf_color_value);
    font-size: 1.1rem;
}

.kcf_settings_icon_preview strong {
    display: block;
    color: var(--kcf_color_text);
    font-size: 0.72rem;
}

.kcf_settings_icon_preview span {
    display: block;
    max-width: 90px;
    overflow: hidden;
    color: var(--kcf_color_text_muted);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kcf_settings_status_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kcf_spacing_4);
}

.kcf_settings_status_copy {
    min-width: 0;
}

.kcf_settings_status_copy strong {
    display: block;
    color: var(--kcf_color_text);
    font-size: 0.78rem;
}

.kcf_settings_status_copy span {
    display: block;
    margin-top: var(--kcf_spacing_1);
    color: var(--kcf_color_text_muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.kcf_settings_compact_group {
    max-width: 190px;
}