/* === NewArchive Admin — ERAS 2 Style === */

:root {
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-sidebar: #1b3a5c;
    --bg-sidebar-hover: #244b73;
    --bg-toolbar: #17334f;
    --accent: #0072b5;
    --accent-dark: #005a8e;
    --highlight: #e88300;
    --highlight-hover: #d07600;
    --text-primary: #2c3e50;
    --text-secondary: #5a6d80;
    --text-muted: #8e99a4;
    --text-light: #ffffff;
    --border: #d5dbe1;
    --border-light: #e8ecef;
    --success: #27ae60;
    --danger: #c0392b;
    --warning: #e88300;
    --table-header-bg: #17334f;
    --table-header-text: #ffffff;
    --table-row-alt: #f7f9fb;
    --table-row-hover: #e8f0f8;
    --table-row-selected: #d4e6f5;
    --radius: 4px;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
    --transition: 0.2s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* === Layout === */

.app-container {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.sidebar-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-toolbar);
}

.sidebar-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-logo {
    max-height: 28px;
    max-width: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-header h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--sidebar-title-color, var(--highlight));
    letter-spacing: 0.5px;
    margin: 0;
}

.sidebar-subtitle {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sidebar-archive {
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-archive-label {
    display: block;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.sidebar-archive-select {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    background: var(--bg-sidebar-hover);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    outline: none;
    cursor: pointer;
}

.sidebar-archive-select:focus {
    border-color: var(--highlight);
}

.sidebar-archive-select:disabled {
    opacity: 0.7;
    cursor: default;
}

.sidebar-archive-select option {
    background: var(--bg-sidebar);
    color: var(--text-light);
}

.main-content {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
    background: var(--bg-primary);
}

/* === Navigation === */

.nav-menu {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition);
    border-left: 3px solid transparent;
}

.nav-link:hover {
    color: #ffffff;
    background: var(--bg-sidebar-hover);
}

.nav-link.active {
    color: var(--highlight);
    background: rgba(232, 131, 0, 0.1);
    border-left-color: var(--highlight);
    font-weight: 600;
}

.nav-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
}

/* === Page === */

.page-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
}

.page-header h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bg-sidebar);
}

.page-header p {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}

/* === Cards === */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--table-header-bg);
    color: var(--table-header-text);
    border-bottom: none;
    margin-bottom: 0;
}

.card-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--table-header-text);
}

/* === Tables === */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--table-header-text);
    background: var(--table-header-bg);
    border-bottom: 2px solid var(--accent);
}

.data-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.data-table tr:nth-child(even) td {
    background: var(--table-row-alt);
}

.data-table tr:hover td {
    background: var(--table-row-hover);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.search-results-table th,
.search-results-table td {
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-results-table td:first-child {
    font-weight: 600;
    color: var(--highlight);
}

/* === Buttons === */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--highlight);
    color: #fff;
    border-color: var(--highlight-hover);
}

.btn-primary:hover {
    background: var(--highlight-hover);
}

.btn-secondary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent-dark);
}

.btn-secondary:hover {
    background: var(--accent-dark);
}

.btn-danger {
    background: #fff;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === Forms === */

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-control {
    width: 100%;
    padding: 5px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: border-color var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 114, 181, 0.15);
}

.form-control:read-only {
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: not-allowed;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235a6d80' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
}

input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
}

/* === Badges === */

.badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-system {
    background: var(--highlight);
    color: #fff;
}

.badge-type {
    background: var(--accent);
    color: #fff;
}

/* === Stats === */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
    border-top: 3px solid var(--accent);
}

.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--accent);
}

.stat-card .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* === Toolbar === */

.toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
}

.toolbar-spacer {
    flex: 1;
}

/* === Messages === */

.alert {
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 12px;
    margin: 10px 14px;
    font-weight: 500;
}

.alert-success {
    background: #eafaf1;
    color: var(--success);
    border: 1px solid #a9dfbf;
}

.alert-error,
.alert-danger {
    background: #fdedec;
    color: var(--danger);
    border: 1px solid #f5b7b1;
}

.alert-warning {
    background: #fff8e1;
    color: #b7791f;
    border: 1px solid #f7e8a5;
}

.alert-info {
    background: #eaf3fa;
    color: var(--accent);
    border: 1px solid #b3d4ea;
}

/* === Import-Dialog === */

.import-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, 92vw);
    max-height: 88vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    z-index: 20;
    overflow: hidden;
}

.import-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--panel-header-bg);
    color: #fff;
    border-bottom: 1px solid var(--border);
}

.import-dialog-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.btn-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 6px;
}

.btn-close:hover {
    color: var(--highlight);
}

.import-dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px;
}

.import-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: #f9fafb;
}

.import-dropzone {
    position: relative;
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #f8fafc;
    color: var(--text-muted);
    overflow: hidden;
}

.import-dropzone:hover,
.import-dropzone.dragging {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.06);
    color: var(--accent);
}

.import-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.import-mapping-table th,
.import-mapping-table td {
    font-size: 12px;
}

.import-mapping-table code {
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* === Preview-Tabs (Original / OCR-Text) === */

.preview-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    flex-shrink: 0;
}

.preview-tab {
    background: transparent;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.preview-tab:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.03);
}

.preview-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.preview-text-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.preview-text-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-secondary, #f5f7fb);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.preview-text-area {
    flex: 1;
    width: 100%;
    border: none;
    padding: 12px 14px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    resize: none;
    outline: none;
}

.preview-text-area:focus { background: var(--bg-primary); }

/* === Theme-Verwaltung === */

.theme-color-chip {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.theme-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.theme-color-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.theme-color-field label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.theme-row-active {
    background: rgba(16, 185, 129, 0.05);
}

.theme-preview {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* === Suggest-Combobox (Keyword-Vorschlagsliste) === */

.suggest-combo {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.suggest-combo > input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.suggest-combo-btn {
    width: 28px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-left: none;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    cursor: pointer;
    color: #4b5563;
    font-size: 12px;
    transition: background 0.15s;
    padding: 0;
}

.suggest-combo-btn:hover:not(:disabled) {
    background: #e5e7eb;
    color: #1f2937;
}

.suggest-combo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.suggest-combo-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.suggest-combo-list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 41;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
    font-size: 12px;
}

.suggest-combo-item {
    padding: 6px 10px;
    cursor: pointer;
    color: #111827;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.suggest-combo-item:last-child { border-bottom: none; }

.suggest-combo-item:hover {
    background: rgba(37, 99, 235, 0.08);
}

.suggest-combo-item.selected {
    background: rgba(37, 99, 235, 0.12);
    font-weight: 600;
    color: #1e40af;
}

.suggest-combo-empty {
    padding: 10px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* === Progress Bar === */

.progress {
    width: 100%;
    height: 18px;
    background: #e5e7eb;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid #d1d5db;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    transition: width 0.3s ease;
    position: relative;
    background-size: 30px 30px;
    background-image:
        linear-gradient(90deg, #2563eb 0%, #3b82f6 100%),
        linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    animation: progressStripes 1.5s linear infinite;
}

.progress-bar-failed {
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%) !important;
    animation: none;
}

@keyframes progressStripes {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 30px 0; }
}

.text-primary { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-muted   { color: var(--text-muted); }

/* === Keywords list === */

.keyword-row {
    display: grid;
    grid-template-columns: 1fr 100px 70px 70px 60px 60px 50px 70px;
    gap: 6px;
    align-items: center;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border-light);
}

.keyword-row:nth-child(even) {
    background: var(--table-row-alt);
}

.keyword-row:hover {
    background: var(--table-row-hover);
}

.keyword-row:last-child {
    border-bottom: none;
}

/* === Empty state === */

.empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}

.empty-state p {
    margin-top: 4px;
    font-size: 12px;
}

/* === Area list items === */

.area-item {
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    border-bottom: 1px solid var(--border-light);
}

.area-item:hover {
    background: var(--table-row-hover);
}

.area-item.selected {
    border-left-color: var(--highlight);
    background: var(--table-row-selected);
}

/* === Scrollbar === */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* === Document Client — 3-Panel Layout === */

.client-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
}

.client-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: var(--table-header-bg);
    border-radius: var(--radius) var(--radius) 0 0;
    flex-shrink: 0;
}

.client-toolbar select,
.client-toolbar input {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 12px;
    font-family: inherit;
}

.client-toolbar select { min-width: 180px; }
.client-toolbar select option { background: var(--bg-sidebar); color: #fff; }
.client-toolbar input::placeholder { color: rgba(255,255,255,0.5); }
.client-toolbar input:focus { outline: none; border-color: var(--highlight); }

.client-panels {
    display: flex;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border);
    border-top: none;
}

.panel {
    overflow-y: auto;
    background: var(--bg-card);
}

.panel-left {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--border);
    padding: 0;
    overflow-y: auto;
}

.panel-center {
    width: 300px;
    min-width: 180px;
    padding: 0;
    overflow: auto;
}

/* Kontextmenue Baum */
.tree-context-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.tree-context-menu {
    position: fixed;
    z-index: 901;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    padding: 4px 0;
    font-size: 13px;
}

.tree-context-item {
    padding: 7px 14px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background var(--transition);
}

.tree-context-item:hover {
    background: var(--table-row-hover);
}

.tree-context-highlight {
    color: var(--accent);
    font-weight: 600;
}

.tree-context-highlight:hover {
    background: rgba(0, 114, 181, 0.08);
}

.tree-context-danger {
    color: var(--danger);
}

.tree-context-danger:hover {
    background: rgba(192, 57, 43, 0.08);
}

.tree-dialog {
    position: fixed;
    z-index: 901;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 16px 20px;
    min-width: 300px;
    max-width: 90vw;
}

.tree-dialog-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.tree-context-sep {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

.btn-tree-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    color: rgba(255,255,255,0.7);
    padding: 2px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--transition), color var(--transition);
}

.btn-tree-toggle:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Splitter zwischen Baum und Vorschau */
.panel-splitter {
    width: 6px;
    cursor: col-resize;
    background: var(--border);
    position: relative;
    flex-shrink: 0;
    transition: background var(--transition);
}

.panel-splitter:hover,
.panel-splitter.dragging {
    background: var(--highlight);
}

.panel-splitter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40px;
    border-radius: 1px;
    background: rgba(255,255,255,0.6);
    pointer-events: none;
}

.panel-right {
    flex: 1;
    min-width: 200px;
    background: #e8ecef;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: 6px 10px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* === Tree View === */

.tree-container {
    padding: 4px 0;
    font-size: 13px;
}

.tree-node {
    user-select: none;
}

.tree-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.1s;
    border-left: 3px solid transparent;
}

.tree-toggle:hover {
    background: var(--table-row-hover);
}

.tree-icon {
    width: 16px;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tree-folder-icon {
    color: var(--highlight);
    font-size: 14px;
}

.tree-children {
    margin-left: 12px;
}

.tree-leaf {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.1s;
    border-left: 3px solid transparent;
    font-size: 12px;
}

.tree-leaf:hover {
    background: var(--table-row-hover);
}

.tree-leaf.selected {
    background: var(--table-row-selected);
    border-left-color: var(--accent);
    font-weight: 600;
}

.tree-leaf-icon {
    color: var(--accent);
    font-size: 13px;
}

/* === Document Detail (left panel) === */

/* Kopfbereich eines Panels (Titelzeile + Aktionsleiste), bleibt beim Scrollen der
   Datenfelder oben stehen — sonst muesste man bei vielen Keywords fuer jede Suche bzw.
   jedes Speichern erst nach unten scrollen. Wrapper statt fixem top-Offset, damit die
   Hoehe der Titelzeile nicht doppelt gepflegt werden muss. */
.panel-sticky-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card, #ffffff);
}

.detail-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border);
}

/* Schiebt nachfolgende Buttons nach rechts (z.B. Meldung links, Speichern rechts) */
.detail-actions-spacer {
    flex: 1;
    min-width: 0;
}

.detail-section {
    border-bottom: 1px solid var(--border-light);
    padding: 8px 10px;
}

.detail-section:last-child {
    border-bottom: none;
}

.detail-field {
    margin-bottom: 6px;
}

.detail-field label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-field label.keyword-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.keyword-label-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.keyword-label-row .keyword-label {
    flex: 1;
    margin-bottom: 0;
}

.pin-toggle {
    background: transparent;
    border: 1px solid #c8ced4;
    padding: 2px 4px;
    cursor: pointer;
    color: #6a7580;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    line-height: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}

.pin-toggle:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(0, 114, 181, 0.08);
}

.pin-toggle.pinned {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    transform: rotate(-30deg);
}

.pin-toggle.pinned:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
}

.pin-toggle:disabled {
    cursor: default;
    opacity: 0.35;
}

.detail-field .form-control {
    padding: 4px 6px;
    font-size: 12px;
}

.detail-field textarea.form-control {
    resize: vertical;
    min-height: 60px;
}

.detail-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    column-gap: 8px;
    padding: 3px 0;
    align-items: start;
}
.detail-meta > span:first-child {
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.detail-meta > span:last-child {
    color: var(--text-primary);
    word-break: break-word;
    overflow-wrap: anywhere;       /* bricht auch innerhalb langer Tokens (Filenames mit "_") */
    text-align: left;
    min-width: 0;
}
.detail-filename {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 10.5px;
    line-height: 1.4;
}

/* === Document Preview (right panel) === */

.preview-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.preview-container iframe,
.preview-container img {
    width: 100%;
    height: 100%;
    border: none;
}

.preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    font-size: 12px;
    flex-shrink: 0;
}

.preview-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px;
}

/* Fallback-Vorschau fuer nicht-renderbare Dateitypen (ZIP, Audio, Video, EML, ...) */
.preview-fileicon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 32px 20px;
}
.preview-fileicon-glyph {
    font-size: 96px;
    line-height: 1;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.preview-fileicon-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}
.preview-fileicon-name {
    font-size: 14px;
    color: var(--text-primary);
    word-break: break-all;
    max-width: 80%;
    margin-top: 4px;
}
.preview-fileicon-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* === ZIP-Vorschau (Inhaltsverzeichnis) === */

.preview-zip {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    gap: 12px;
    overflow: hidden;
}
.preview-zip-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.preview-zip-glyph {
    font-size: 34px;
    line-height: 1;
}
.preview-zip-head > div {
    flex: 1;
    min-width: 0;
}
.preview-zip-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}
.preview-zip-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.preview-zip-table-wrap {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.preview-zip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.preview-zip-table th {
    position: sticky;
    top: 0;
    background: var(--table-header-bg);
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.preview-zip-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}
.preview-zip-table tbody tr:last-child td {
    border-bottom: none;
}
.preview-zip-hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* === Statusbar === */

.client-statusbar {
    padding: 4px 12px;
    background: var(--table-header-bg);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    border-radius: 0 0 var(--radius) var(--radius);
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

/* === Responsive: Stack panels on small screens === */

/* === Search Results Table === */

.sortable-header {
    cursor: pointer;
    user-select: none;
}

.sortable-header:hover {
    background: var(--accent-dark);
    color: #fff;
}

.result-row {
    cursor: pointer;
}

.result-row:hover td {
    background: var(--table-row-hover) !important;
}

.result-row-selected td {
    background: var(--table-row-selected) !important;
}

/* === Search Field Row === */

.search-label-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-label-row input[type="radio"] {
    margin: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--highlight);
    cursor: pointer;
    flex-shrink: 0;
}

.search-label-row label {
    margin: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}

.search-label-row .badge-type {
    font-size: 8px;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    opacity: 0.7;
}

.search-field-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.search-field-row .form-control {
    flex: 1;
}

.btn-search-mode {
    width: 32px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search-mode:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* === Upload Drop Zone === */

.dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    height: 100%;
    margin: 12px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
    text-align: center;
}

.dropzone:hover {
    border-color: var(--accent);
    background: rgba(0, 114, 181, 0.03);
}

.dropzone.drag-over {
    border-color: var(--highlight);
    background: rgba(232, 131, 0, 0.06);
    border-width: 3px;
}

.dropzone.has-file {
    border-style: solid;
    border-color: var(--success);
    background: rgba(39, 174, 96, 0.04);
}

.dropzone-label {
    pointer-events: none;
}

.dropzone-file-info {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dropzone-file-icon {
    font-size: 40px;
}

.dropzone-file-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
    max-width: 250px;
}

.dropzone-file-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.dropzone-file-info .btn {
    pointer-events: auto;
}

/* === Responsive: Stack panels on small screens === */

/* Mobile Tabs — nur auf kleinen Screens sichtbar */
.mobile-tabs {
    display: none;
}

/* Hamburger — Desktop versteckt */
.hamburger-btn { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 900px) {
    /* Hamburger Button */
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 1001;
        width: 36px;
        height: 36px;
        padding: 6px;
        background: var(--bg-sidebar);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: var(--radius);
        cursor: pointer;
    }

    .hamburger-btn span {
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 1px;
    }

    /* Overlay */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    /* Sidebar: versteckt, gleitet rein */
    .sidebar {
        position: fixed;
        left: -220px;
        top: 0;
        bottom: 0;
        width: 200px !important;
        min-width: 200px !important;
        z-index: 1000;
        transition: left 0.25s ease;
        overflow-y: auto;
    }

    .sidebar-open {
        left: 0;
    }

    .sidebar-header h2 { font-size: 15px; }
    .sidebar-subtitle { display: block; font-size: 8px; }
    .sidebar-archive { padding: 6px 10px; }
    .sidebar-archive-select { font-size: 11px; }

    /* Main content nutzt volle Breite */
    .main-content {
        margin-left: 0 !important;
        padding: 8px !important;
        padding-top: 48px !important;
    }

    .mobile-tabs {
        display: flex;
        background: var(--bg-toolbar);
        border-bottom: 2px solid var(--highlight);
    }

    .mobile-tab {
        flex: 1;
        padding: 8px 4px;
        border: none;
        background: transparent;
        color: rgba(255,255,255,0.6);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
        transition: background var(--transition), color var(--transition);
    }

    .mobile-tab:hover {
        background: rgba(255,255,255,0.05);
    }

    .mobile-tab-active {
        color: #fff;
        background: rgba(255,255,255,0.1);
        box-shadow: inset 0 -2px 0 var(--highlight);
    }

    .client-panels {
        flex-direction: column;
    }

    .panel-left, .panel-center, .panel-right {
        width: 100% !important;
        min-width: 0 !important;
        border-right: none !important;
        flex: 1;
    }

    .mobile-panel-visible {
        display: flex !important;
        flex-direction: column;
    }

    .mobile-panel-hidden {
        display: none !important;
    }

    .panel-splitter {
        display: none;
    }

}

/* === Document Tree === */

.doc-tree {
    padding: 2px 0;
    font-size: 13px;
    user-select: none;
    overflow: auto;
    height: 100%;
    line-height: 1;
}

/* --- Zeile (Ordner oder Dokument) --- */

.tree-row {
    display: flex;
    align-items: center;
    height: 28px;
    padding-right: 8px;
    cursor: pointer;
    gap: 4px;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition);
    border-left: 3px solid transparent;
}

.tree-folder-row {
    font-weight: 600;
    color: var(--text-primary);
}

.tree-folder-row:hover {
    background: var(--table-row-hover);
}

.tree-doc-row {
    font-weight: 400;
    color: var(--text-secondary);
}

.tree-doc-row:hover {
    background: var(--table-row-hover);
    color: var(--text-primary);
}

.tree-cut {
    background: rgba(232, 131, 0, 0.12) !important;
    border-left-color: var(--highlight) !important;
    opacity: 0.7;
    font-style: italic;
}

.tree-reorder {
    background: rgba(59, 130, 246, 0.18) !important;
    border-left-color: #3b82f6 !important;
    color: #3b82f6 !important;
    opacity: 0.7;
    font-style: italic;
}

.tree-reorder-hint {
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    font-size: 12px;
    font-weight: 500;
}

.tree-reorder-cancel {
    cursor: pointer;
    text-decoration: underline;
    margin-left: 6px;
    color: var(--text-muted);
}

.tree-reorder-cancel:hover {
    color: var(--danger);
}

.tree-doc-selected {
    background: var(--table-row-selected) !important;
    border-left-color: var(--accent);
    color: var(--text-primary);
    font-weight: 600;
}

/* --- Chevron (Aufklapp-Pfeil) --- */

.tree-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.tree-chevron-open {
    transform: rotate(90deg);
}

.tree-chevron-hidden {
    visibility: hidden;
}

/* --- Icons (Ordner / Dokument) --- */

.tree-icon {
    flex-shrink: 0;
}

.tree-icon-cabinet {
    color: var(--highlight);
}

.tree-icon-folder {
    color: var(--highlight);
}

.tree-icon-doc {
    color: var(--accent);
}

.tree-checkbox {
    margin: 0 2px 0 0;
    cursor: pointer;
    transform: scale(0.85);
    accent-color: var(--accent);
}

/* Export-Toolbar oberhalb des Baums */
.tree-toolbar {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 6px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.tree-toolbar button {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}
.tree-toolbar button:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.tree-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.tree-toolbar .tree-toolbar-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}

/* --- Text + Badge --- */

.tree-text {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.tree-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    line-height: 1.4;
}

/* --- Login-Seite --- */

.login-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fb 0%, #e8efff 40%, #fff4e6 100%);
    overflow: hidden;
}

/* Dekorative Hintergrundformen */
.login-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
    animation: loginFloat 14s ease-in-out infinite;
}

.login-bg-shape-1 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, #2563eb 0%, transparent 70%);
    top: -80px;
    left: -80px;
}

.login-bg-shape-2 {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, #e88300 0%, transparent 70%);
    bottom: -120px;
    right: -120px;
    animation-delay: -7s;
}

@keyframes loginFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
}

.login-card {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 40px 36px 28px;
    width: 100%;
    max-width: 400px;
    box-shadow:
        0 20px 50px -12px rgba(37, 99, 235, 0.2),
        0 8px 20px -4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    z-index: 1;
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo-icon {
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.3));
}

.login-logo h1 {
    margin: 0;
    color: #1e40af;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.login-subtitle {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    pointer-events: none;
    transition: color 0.15s;
}

.login-input {
    flex: 1;
    padding: 11px 12px 11px 34px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    font-family: inherit;
}

.login-input::placeholder {
    color: #d1d5db;
    font-weight: 400;
}

.login-input:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.login-input:focus + .login-input-icon,
.login-input-wrap:focus-within .login-input-icon {
    color: #2563eb;
}

.login-btn {
    margin-top: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.18s, filter 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    letter-spacing: 0.02em;
}

.login-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #b91c1c;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    animation: loginShake 0.4s ease;
}

@keyframes loginShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.login-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
    color: #9ca3af;
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* User-Info in Sidebar */
.sidebar-user {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: auto;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
}

.sidebar-user-name {
    font-weight: 600;
    color: #fff;
}

.sidebar-user-role {
    color: rgba(255,255,255,0.6);
    font-size: 11px;
}

.sidebar-logout {
    display: inline-block;
    margin-top: 6px;
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}

.sidebar-logout:hover {
    background: rgba(255,255,255,0.1);
}

/* === Anmerkungen (Vorschau, Dokumentliste, Detailansicht) === */

.annot-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.annot-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    flex-shrink: 0;
}

.annot-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.annot-tool {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
}

.annot-tool:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.annot-tool.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-light);
}

.annot-tool:disabled {
    opacity: 0.5;
    cursor: default;
}

.annot-tool-glyph {
    font-size: 13px;
    line-height: 1;
}

.annot-prop {
    display: inline-flex;
    align-items: center;
}

.annot-prop input[type="color"] {
    width: 26px;
    height: 22px;
    padding: 0 1px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    cursor: pointer;
}

.annot-prop select {
    height: 22px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.annot-spacer {
    flex: 1;
}

.annot-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.annot-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.annot-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.annot-hidden-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--highlight);
    color: var(--text-light);
    font-size: 11px;
    font-weight: 600;
}

/* Fester Platz fuer die Statusmeldung: gleiche Breite und Hoehe mit und ohne Meldung, damit die Leiste beim
   Erscheinen einer Meldung nicht umbricht (sonst springt der Viewer, s. .annot-reply). Hoechstens zwei Zeilen,
   der Rest wird abgeschnitten und steht voll im Tooltip. */
.annot-status {
    display: inline-flex;
    align-items: center;
    width: 280px;
    height: 26px;
    color: var(--success);
    font-size: 11px;
    line-height: 13px;
}

.annot-status-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.annot-status.error {
    color: var(--danger);
}

.annot-note {
    color: var(--text-muted);
    font-style: italic;
}

.annot-viewer {
    flex: 1;
    min-height: 0;
}

.tree-annot {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: var(--highlight);
    flex-shrink: 0;
}

.detail-copyref {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 0;
}

.detail-copyref a {
    color: var(--accent);
}

/* Antwortfeld: ohne angewaehlte Anmerkung unauffaellig grau, mit Auswahl hervorgehoben (.active).
   Die Breite darf sich zwischen den Zustaenden NICHT aendern: bricht die Leiste beim Anwaehlen um, rutscht der
   Viewer noch waehrend des Mausklicks nach unten, das Loslassen landet neben der Anmerkung und Syncfusion hebt
   die Auswahl wieder auf. Deshalb Label mit fester Breite (Autor notfalls abgeschnitten, voll im Tooltip),
   gleiche Schriftstaerke, Rahmen und Innenabstand in beiden Zustaenden. */
.annot-reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: background-color var(--transition), border-color var(--transition);
}

.annot-reply-label {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: var(--text-muted);
    font-size: 11px;
}

.annot-reply-input {
    width: 260px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--table-row-alt);
    color: var(--text-primary);
    font-size: 11px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.annot-reply-input::placeholder {
    color: var(--text-muted);
}

.annot-reply-input:disabled {
    cursor: default;
}

.annot-reply .annot-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Hervorhebung ueber die Theme-Akzentfarbe getoent, damit sie auch auf weissen Theme-Leisten auffaellt */
.annot-reply.active {
    background: var(--table-row-selected);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-card));
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.annot-reply.active .annot-reply-label {
    color: var(--accent);
    font-weight: 600;
}

.annot-reply.active .annot-reply-input {
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--accent);
}

.annot-reply.active .annot-reply-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
}

/* "Antworten" wie die Speichern-Knoepfe (.btn-primary); ohne Text noch blass, aber schon erkennbar */
.annot-reply.active .annot-btn {
    background: var(--highlight);
    border-color: var(--highlight-hover);
    color: #fff;
}

.annot-reply.active .annot-btn:hover:not(:disabled) {
    background: var(--highlight-hover);
    color: #fff;
}

.annot-reply.active .annot-btn:disabled {
    opacity: 0.6;
}

/* "Add a Reply" des Syncfusion-Kommentarbereichs: legt nur mit sofortigem Enter eine Antwort an, nach OK,
   Abbrechen oder Wegklicken verfaellt die naechste Antwort oder ueberschreibt eine fruehere. Antworten laufen
   ueber das eigene Antwortfeld der Vorschau. Syncfusion erzwingt das Feld mit display:block !important ueber eine
   lange Selektorkette; die Selektoren hier muessen mindestens so spezifisch sein. */
.annot-viewer .e-blazor-pdfviewer .e-pv-comments-container.e-pv-comments-border .e-pv-new-comments-div.e-control.e-inplaceeditor.e-lib.e-pv-comments-leave,
.annot-viewer .e-blazor-pdfviewer .e-pv-comments-container .e-pv-new-comments-div.e-control.e-inplaceeditor.e-lib {
    display: none !important;
}

/* Ebenso das eigene Kommentarfeld ("Add Comments") aller Anmerkungen ausser Notizen: Syncfusion oeffnet es beim
   Anwaehlen eines Textmarkers oder einer Form und faengt den Fokus ein — neben dem Antwortfeld ein zweites,
   konkurrierendes Eingabefeld. Bei Notizen (Symbol e-pv-comment-icon) ist es die Texteingabe und bleibt.
   Ein vorhandener Kommentar bleibt lesbar, laesst sich hier aber nicht mehr bearbeiten. */
.annot-viewer .e-pv-comments-container:not(:has(.e-pv-blazor-comments-title.e-pv-comment-icon)) .e-pv-comment-textbox {
    pointer-events: none;
}

.annot-viewer .e-pv-comments-container:not(:has(.e-pv-blazor-comments-title.e-pv-comment-icon)) .e-pv-comment-textbox .e-editable-form,
.annot-viewer .e-pv-comments-container:not(:has(.e-pv-blazor-comments-title.e-pv-comment-icon)) .e-pv-comment-textbox .e-editable-overlay-icon {
    display: none !important;
}


/* === Dokumentenbaum: markierter Ordner und Sortier-Schalter (Baum rekonstruieren / A→Z, Z→A) === */

.tree-folder-selected {
    background: var(--table-row-selected) !important;
    border-left-color: var(--accent) !important;
}

.btn-tree-toggle.btn-tree-sort {
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
}

.btn-tree-toggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* === Startseite: Neuigkeiten-Baum und Benachrichtigungen === */

.notif-tree,
.notif-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-children {
    padding-left: 20px;
}

.notif-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
}

.notif-archive > .notif-row .notif-name,
.notif-area > .notif-row .notif-name {
    font-weight: 600;
}

.notif-nofolder > .notif-row .notif-name {
    font-style: italic;
    color: var(--text-secondary);
}

.notif-count {
    font-size: 12px;
    color: var(--accent);
    white-space: nowrap;
}

.notif-subs {
    margin-left: auto;
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.notif-subs label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.notif-subs input:disabled + *,
.notif-subs label:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

.notif-hint {
    font-size: 13px;
}