body { font-family: sans-serif; background-color: #f1f5f9; }
.category-level-0 { margin-left: 0; }
.category-level-1 { margin-left: 20px; }
.category-level-2 { margin-left: 40px; }
.category-level-3 { margin-left: 60px; }

/* KORRIGIERT: Aufgeteilt, um Filter-Bug zu beheben */
.category-item, .textblock-item {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
/* Eigener Stil für Platzhalter-Filterung */
.placeholder-item {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* WICHTIG: display: flex für Filterung */
    display: flex; 
    justify-content: space-between;
    align-items: flex-start;
}

.user-item-container {
     background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* KORRIGIERT: 6 Spalten für Rolle */
    display: grid;
    grid-template-columns: 2fr 2fr 100px 1fr 2.5fr auto; 
    gap: 1rem;
    align-items: start;
}

button.actions, .add-actions button, .category-actions button, .data-tools button {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

/* NEU: Stile für Kopieren/Einfügen-Buttons */
.copy-btn {
    padding: 0.25rem !important; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.375rem; background-color: #ffffff;
    border: 1px solid #e2e8f0; margin-left: 0.5rem;
    transition: background-color 0.2s; color: #075985; /* sky-800 */
}
.copy-btn:hover { background-color: #f0f9ff; } /* sky-50 */

.paste-btn {
    background-color: #ecfdf5; /* emerald-50 */
    color: #065f46; /* emerald-800 */
    border-color: #d1fae5; /* emerald-200 */
}
.paste-btn:hover {
    background-color: #d1fae5; /* emerald-200 */
    border-color: #a7f3d0; /* emerald-300 */
}
/* --- Ende Neu --- */


.edit-btn, .textblock-edit-btn {
    padding: 0.25rem !important; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.375rem; background-color: #ffffff;
    border: 1px solid #e2e8f0; margin-left: 0.5rem;
    transition: background-color 0.2s; color: #0c4a6e;
}
.edit-btn i, .textblock-edit-btn i { margin-right: 0 !important; }
.edit-btn:hover, .textblock-edit-btn:hover { background-color: #f8fafc; }

.delete-btn, .textblock-delete-btn {
    padding: 0.25rem !important; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.375rem; background-color: #ffffff;
    border: 1px solid #e2e8f0; margin-left: 0.5rem;
    transition: background-color 0.2s; color: #9f1239;
}
.delete-btn i, .textblock-delete-btn i { margin-right: 0 !important; }
.delete-btn:hover, .textblock-delete-btn:hover { background-color: #f8fafc; }

.user-save-row-btn {
    background-color: #cffafe; color: #0e7490;
    font-weight: 500; padding: 0.5rem 0.75rem; font-size: 0.75rem;
    border-radius: 0.375rem; transition: all 0.2s;
    margin-left: 0.5rem;
    /* Mindestbreite, damit der Text passt */
    min-width: 110px; 
    text-align: center;
}
.user-save-row-btn:hover { background-color: #a5f3fc; }
.user-save-row-btn:disabled { background-color: #e2e8f0; color: #94a3b8; cursor: not-allowed; }

/* NEU: Stile für Button-Feedback */
.user-save-row-btn.success {
    background-color: #10b981; /* emerald-500 */
    color: white;
}
.user-save-row-btn.error {
    background-color: #ef4444; /* red-500 */
    color: white;
}
/* --- Ende Neu --- */

.add-modern-btn {
    background-color: #f8fafc; color: #0ea5e9; border: 1px solid #e0f2fe;
    font-weight: 500; padding: 0.5rem 0.75rem; font-size: 0.75rem;
    border-radius: 0.375rem; transition: all 0.2s;
    margin-left: 0 !important;
}
.add-modern-btn:hover { background-color: #f0f9ff; border-color: #bae6fd; }
.add-modern-btn i { margin-right: 0.5rem; }

.save-btn { background-color: #cffafe; color: #0e7490; }
.save-btn:hover { background-color: #a5f3fc; }
.cancel-btn { background-color: #f1f5f9; color: #475569; }
.cancel-btn:hover { background-color: #e2e8f0; }
.io-btn {
    background-color: #eef2ff; color: #4338ca;
    font-size: 0.875rem; padding: 0.5rem 0.75rem;
    width: 100%; margin: 0.25rem 0; text-align: left;
}
.io-btn:hover { background-color: #e0e7ff; }
.io-btn.export { background-color: #f0fdf4; color: #166534; }
.io-btn.export:hover { background-color: #dcfce7; }

/* KORRIGIERT: Filter-Inputs/Selects von der 100%-Regel ausgenommen */
input:not(.filter-input), 
textarea, 
select:not(.filter-select) {
    border: 1px solid #cbd5e1; padding: 0.5rem;
    border-radius: 0.375rem; width: 100%; margin-bottom: 0.5rem;
}
.filter-input, .filter-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0;
    background-color: #f8fafc;
    width: 150px;
    /* NEU: Stile von oben übernehmen */
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
}

.drag-handle { cursor: move; padding: 0.5rem; color: #94a3b8; }
.drag-handle:hover { color: #334155; }
.sortable-ghost { background-color: #e0f2fe; border: 1px dashed #0ea5e9; }

.placeholder-btn {
    background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
    font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem;
    border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
}
.placeholder-btn:hover { background-color: #e2e8f0; border-color: #cbd5e1; }

.tab-btn {
    padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500;
    border-radius: 0.5rem 0.5rem 0 0; color: #475569;
    border: 1px solid transparent; margin-bottom: -1px; margin-right: 0.25rem;
}
.tab-btn.active {
    background-color: #ffffff; color: #0c4a6e;
    border-color: #e2e8f0 #e2e8f0 #ffffff;
    border-style: solid; border-width: 1px; box-shadow: none;
}
.tab-btn:not(.active):hover { background-color: #f8fafc; }

/* KORRIGIERT: flex-direction: column entfernt */
.tab-panel { display: none; }
.tab-panel.active { display: flex; }

/* NEU: Schriftart-Standardisierung für Editor */
.wysiwyg-editor {
    border: 1px solid #cbd5e1; padding: 0.5rem; border-radius: 0.375rem;
    width: 100%; min-height: 80px; background-color: #f8fafc;
    margin-bottom: 0.5rem; overflow-y: auto;
    /* Standardschriftart erzwingen */
    font-family: sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
}
.wysiwyg-editor:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 1px #0ea5e9; }
.wysiwyg-editor:empty:before { content: attr(placeholder); color: #94a3b8; pointer-events: none; }

.format-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.25rem;
    padding: 0.25rem; background-color: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
}
.format-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.375rem; background-color: #ffffff; border: 1px solid #e2e8f0;
    color: #475569; transition: all 0.2s; cursor: pointer;
}
.format-btn:hover { background-color: #e0f2fe; color: #0c4a6e; border-color: #bae6fd; }

.wysiwyg-editor ul { list-style: disc outside; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.wysiwyg-editor ol { list-style: decimal outside; padding-left: 1.5rem; margin-bottom: 0.5rem; }

.textblock-item ul { list-style: disc outside; padding-left: 1.5rem; margin-left: 0.5rem; margin-bottom: 0.5rem; }
.textblock-item ol { list-style: decimal outside; padding-left: 1.5rem; margin-left: 0.5rem; margin-bottom: 0.5rem; }

.catalog-block-gender ul { list-style: disc outside; padding-left: 1.5rem; margin-left: 0.5rem; margin-bottom: 0.5rem; }
.catalog-block-gender ol { list-style: decimal outside; padding-left: 1.5rem; margin-left: 0.5rem; margin-bottom: 0.5rem; }

.user-item-info .email { font-weight: 500; color: #1e293b; }
.user-item-info .uid { font-family: monospace; font-size: 0.75rem; color: #64748b; }

/* KORRIGIERT: Label für Rolle hinzugefügt */
.user-item-role label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.1rem;
}
.user-item-role select { width: 120px; margin-bottom: 0; font-size: 0.875rem; padding: 0.25rem 0.5rem; }

.user-item-details label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.1rem;
}
.user-item-details input {
    width: 100%;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0;
}
/* KORRIGIERT: Team-Feldbreite */
.user-item-details input.user-input-team {
    width: 80px; /* Ca. 3-4 Zeichen breit */
    min-width: 80px;
}
.user-item-details input:disabled {
     background-color: #f8fafc;
     color: #94a3b8;
     border-color: #e2e8f0;
}

.user-category-list { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.25rem; }
.user-category-list label {
    display: flex; align-items: center;
    font-size: 0.875rem; background-color: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 0.375rem;
    padding: 0.25rem 0.75rem; cursor: pointer;
}
.user-category-list label:hover { background-color: #f1f5f9; }
.user-category-list input { width: auto; margin: 0 0.5rem 0 0; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.875rem;
}
.data-table th { background-color: #f8fafc; font-weight: 600; color: #475569; }
.data-table td { color: #334155; }
.data-table .log-email { font-weight: 500; }
.data-table .log-time { font-family: monospace; font-size: 0.8rem; color: #64748b; }
.data-table .log-action {
    font-family: monospace;
    font-size: 0.8rem;
    background-color: #f1f5f9;
    color: #475569;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: 500;
}