@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg:      #0f1117;
  --surface: #181c27;
  --border:  #272c3d;
  --accent:  #4f8ef7;
  --text:    #e2e6f0;
  --muted:   #8b93b8;
  --success: #3ecf8e;
  --warn:    #f59e42;
  --gold:    #D4A017;
  --danger:  #f04e55;
  --radius:  10px;
  --font:    'DM Sans', sans-serif;
  --mono:    'DM Mono', monospace;
  --nav-w:   200px;
}

/* ── Lucide Icons ─── */
.lc { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; pointer-events: none; }
.viewer-placeholder .icon .lc { width: 1em; height: 1em; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; }

/* ── App Layout ── */
#app { display: grid; grid-template-rows: 52px 1fr; grid-template-columns: var(--nav-w) 1fr; grid-template-areas: "header header" "nav main"; height: 100dvh; transition: grid-template-columns .2s; }

/* ── Standalone-Ansicht (z.B. Kummerkasten im neuen Tab, ohne Menüführung) ── */
html.standalone header,
html.standalone nav,
html.standalone .nav-more-btn,
html.standalone #nav-more-popup { display: none !important; }
html.standalone #app { grid-template-rows: 1fr; grid-template-columns: 1fr; grid-template-areas: "main"; }
html.standalone { --nav-w: 0px; }

/* ── Header ── */
header { grid-area: header; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 100; overflow: hidden; }
.logo { font-family: var(--mono); font-size: 17px; font-weight: 500; letter-spacing: -0.5px; flex-shrink: 0; }
.logo-archive { color: var(--accent); }
.logo-elo { font-weight: 700; }
.logo-light { font-weight: 700; font-style: italic; color: var(--warn); }
.logo-elo-brand { font-weight: 700; color: #fff; }
.logo-crm-brand { font-weight: 700; font-style: italic; color: var(--success); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse 2s infinite; flex-shrink: 0; }
.status-dot-inactive { background: var(--muted); box-shadow: none; animation: none; }
.status-dot-danger { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: none; }
.status-dot-warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); animation: none; }
.status-label { font-size: 12px; color: var(--muted); font-family: var(--mono); flex-shrink: 0; }
.header-status-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header-status-item { display: flex; align-items: center; gap: 5px; cursor: default; }
.header-status-sep { font-size: 12px; color: var(--border); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.form-row input.ai-filled, .form-row select.ai-filled, .form-row textarea.ai-filled,
input.ai-filled, select.ai-filled, textarea.ai-filled {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 2px rgba(62,207,142,.18);
  transition: border-color .3s, box-shadow .3s;
}
.form-row input.ai-filled:focus, .form-row select.ai-filled:focus,
input.ai-filled:focus, select.ai-filled:focus {
  border-color: var(--accent) !important;
  box-shadow: none;
}
label.ai-filled-label { color: var(--success) !important; }
label.ai-filled-label::after { content: " ✦"; font-size: 9px; vertical-align: super; }
.form-row input.ai-pending, .form-row select.ai-pending, .form-row textarea.ai-pending,
input.ai-pending, select.ai-pending, textarea.ai-pending {
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.22);
  transition: border-color .3s, box-shadow .3s;
}
label.ai-pending-label { color: var(--warn) !important; }
label.ai-pending-label::after { content: " ◌"; font-size: 11px; vertical-align: super; }
.form-row input.ki-invalid, .form-row select.ki-invalid, input.ki-invalid, select.ki-invalid {
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.18);
  transition: border-color .3s, box-shadow .3s;
}
label.ki-invalid-label { color: var(--warn) !important; }
label.ki-invalid-label::after { content: " ⚠"; font-size: 9px; vertical-align: super; }
.ki-invalid-hint { color: var(--warn); font-size: 12px; margin-top: 3px; }

/* ── Profil-Menü ── */
.profile-menu { position: relative; flex-shrink: 0; }
.profile-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color .15s, color .15s; }
.profile-btn:hover, .profile-btn.open { border-color: var(--accent); color: var(--accent); }
.profile-btn svg { width: 16px !important; height: 16px !important; }
.profile-popup { display: none; flex-direction: column; gap: 2px; position: fixed; top: 60px; right: 20px; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.5); padding: 6px; z-index: 9000; }
.profile-popup.open { display: flex; }
#user-info.profile-info { padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: 4px; white-space: nowrap; }
.profile-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 7px; background: none; border: none; color: var(--text); font-family: var(--font); font-size: 13px; text-align: left; cursor: pointer; width: 100%; }
.profile-item:hover { background: rgba(255,255,255,.05); }
.profile-item-danger { color: var(--danger); }

/* ── Nav ── */
nav { grid-area: nav; background: var(--surface); border-right: 1px solid var(--border); padding: 16px 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-section { padding: 8px 16px 4px; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
nav a { display: flex; align-items: center; gap: 10px; padding: 8px 18px; color: var(--muted); text-decoration: none; font-size: 13px; border-left: 3px solid transparent; transition: all .15s; }
nav a .icon, nav a .icon *, nav button .icon, nav button .icon * { pointer-events: none; }
nav a .icon, nav button .icon { width: 28px; min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
nav a .icon svg, nav button .icon svg { width: 22px !important; height: 22px !important; }
nav a:hover { color: var(--text); background: rgba(255,255,255,.04); }
nav a.active { color: var(--accent); border-left-color: var(--accent); background: rgba(79,142,247,.08); }
nav a .badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-family: var(--mono); padding: 1px 7px; border-radius: 20px; }
nav a .badge.overdue { background: var(--danger); }
nav a .badge.overdue::before { content: "⚠ "; }

.submenu-row { display: flex; align-items: center; border-left: 3px solid transparent; transition: all .15s; }
.submenu-row:hover { background: rgba(255,255,255,.04); }
.submenu-row:hover .submenu { color: var(--text); background: transparent; }
.submenu-row:hover .submenu-popout { color: var(--text); }
.submenu-row.active { color: var(--accent); border-left-color: var(--accent); background: rgba(79,142,247,.08); }
.submenu-row .submenu { flex: 1; border-left: none; }
.submenu-row.active .submenu { color: var(--accent); background: transparent; }
nav a.submenu-popout { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; margin-right: 14px; border-radius: 6px; justify-content: center; gap: 0; border-left: none; background: rgba(255,255,255,.06); border: 1px solid var(--border); }
nav a.submenu-popout svg { width: 14px !important; height: 14px !important; }
.submenu-row.active .submenu-popout { color: var(--accent); border-color: var(--accent); }

/* ── Einklappbare Systemsektion ── */
.nav-section-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.nav-section-toggle:hover { color: var(--text); }
.nav-section-arrow { pointer-events: none; transition: transform .15s; flex-shrink: 0; }
.nav-section-group { display: flex; flex-direction: column; }
.nav-section-group.collapsed { display: none; }

/* ── Mehr-Menü (Submenü-Popup) ── */
.nav-more-btn { display: none; }
#nav-more-popup { display: contents; }

/* ── Main ── */
main { grid-area: main; overflow: hidden; display: flex; flex-direction: column; height: 100%; }

/* ── Page header ── */
.page-header { padding: 14px 16px 10px; flex-shrink: 0; }
.page-header h1 { font-size: 16px; font-weight: 600; }
.page-header p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* ── Hilfe-Icon ── */
.help-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--muted); text-decoration: none; font-size: 14px; transition: all .15s; }
.help-icon:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.help-icon svg { width: 16px !important; height: 16px !important; }

/* ── Hilfe-Inhaltsverzeichnis ── */
.help-toc { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 4px; }
.help-toc-title { font-size: 10px; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.help-toc-link { font-size: 13px; color: var(--accent); text-decoration: none; line-height: 1.5; }
.help-toc-link:hover { text-decoration: underline; }

/* ── Hilfe-Seiten ── */
.help-list { display: flex; flex-direction: column; }
.help-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; transition: background .1s; }
.help-list-item:last-child { border-bottom: none; }
.help-list-item:hover { background: rgba(255,255,255,.04); }
.help-date { font-size: 11px; color: var(--muted); font-family: var(--mono); flex-shrink: 0; }
.help-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; line-height: 1.6; font-size: 14px; overflow-wrap: break-word; }
.help-content h1, .help-content h2, .help-content h3 { font-weight: 600; margin: 1.2em 0 .5em; }
.help-content h1:first-child, .help-content h2:first-child, .help-content h3:first-child { margin-top: 0; }
.help-content p, .help-content ul, .help-content ol { margin: .8em 0; }
.help-content ul, .help-content ol { padding-left: 1.4em; }
.help-content li { margin: .3em 0; }
.help-content a { color: var(--accent); }
.help-content code { background: rgba(255,255,255,.08); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: .9em; }
.help-content strong { font-weight: 600; }
.help-content pre { overflow-x: auto; max-width: 100%; }
.help-content pre code { padding: 0; }
.help-content .table-scroll { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.help-content table { border-collapse: collapse; }
.help-content img { max-width: 100%; }

/* ── Dashboard ── */
.dash-wrap { padding: 15px; overflow-y: auto; height: 100%; overflow-anchor: none; }

/* ── Einstellungen: Tabs ── */
.settings-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; background: var(--bg); }
.settings-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font); font-size: 14px; font-weight: 500; padding: 10px 16px; cursor: pointer; transition: color .15s, border-color .15s; }
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat-card .label { font-size: 11px; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.stat-card .value { font-size: 30px; font-weight: 600; font-family: var(--mono); letter-spacing: -1px; }
.stat-card .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat-card.accent .value { color: var(--accent); }
.stat-card.warn .value { color: var(--warn); }
.stat-card.success .value { color: var(--success); }

/* ── Postbox 3-Spalten Layout ── */
.inbox-layout { display: grid; grid-template-columns: 260px 5px clamp(120px, 13vw, 220px) 1fr; flex: 1; min-height: 0; overflow: hidden; min-width: 0; }
.inbox-layout.archive-layout { grid-template-columns: 260px clamp(120px, 13vw, 220px) 1fr; }
.inbox-resizer { background: var(--border); cursor: col-resize; transition: background .15s; flex-shrink: 0; }
.inbox-resizer:hover, .inbox-resizer.dragging { background: var(--accent); }

/* Spalte 1: Dateiliste */
.inbox-filelist { overflow-y: auto; display: flex; flex-direction: column; }
.inbox-toolbar { padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.inbox-list { flex: 1; overflow-y: auto; }
.inbox-file-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.03); transition: background .1s; user-select: none; }
.inbox-file-item:hover { background: rgba(255,255,255,.04); }
.inbox-file-item.selected { background: rgba(79,142,247,.12); border-left: 2px solid var(--accent); }
.inbox-file-item.active { background: rgba(79,142,247,.18); }
.inbox-file-icon { font-size: 18px; flex-shrink: 0; }
.inbox-file-info { min-width: 0; flex: 1; }
.inbox-file-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-file-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.inbox-status-badge { font-size: 12px; flex-shrink: 0; opacity: .85; }

/* Archiv-Baumstruktur (Anfangsbuchstabe → Firma → Wirtschaftsjahr → Dokumenttyp → Dokumente) */
.archive-tree-row { display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 0; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.03); transition: background .1s; user-select: none; font-size: 12px; }
.archive-tree-row:hover { background: rgba(255,255,255,.04); }
.archive-tree-toggle { font-size: 10px; color: var(--muted); width: 12px; flex-shrink: 0; text-align: center; }
.archive-tree-icon { font-size: 14px; flex-shrink: 0; }
.archive-tree-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.archive-tree-count { font-size: 10px; color: var(--muted); font-family: var(--mono); flex-shrink: 0; }
.archive-crm-btn { display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;color:var(--accent);opacity:.7;transition:opacity .15s,background .15s;flex-shrink:0;text-decoration:none; }
.archive-crm-btn:hover { opacity:1;background:rgba(79,142,247,.15); }
.archive-crm-btn svg { width:13px !important;height:13px !important; }
.archive-tree-leaf { border-bottom: 1px solid rgba(255,255,255,.03); }

/* Datei-Typ-Badges */
.file-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 18px; border-radius: 4px; font-size: 9px; font-weight: 700; font-family: var(--mono); letter-spacing: .02em; color: #fff; flex-shrink: 0; }
.file-badge-lg { width: 56px; height: 36px; border-radius: 8px; font-size: 16px; }
.file-badge-pdf  { background: var(--danger); }
.file-badge-doc  { background: var(--accent); }
.file-badge-xls  { background: var(--success); }
.file-badge-img  { background: #9b6bf2; }
.file-badge-txt  { background: #5a6180; }
.file-badge-md   { background: var(--warn); }
.file-badge-xml  { background: #2bb3a3; }

/* Spalte 2: Seiten-Thumbnails */
.inbox-pages { border-right: 1px solid var(--border); overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: #0d1020; }
.page-thumb { cursor: pointer; }
.page-thumb-img { aspect-ratio: 0.707; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--border); display: flex; align-items: center; justify-content: center; transition: border-color .15s; }
.page-thumb:hover .page-thumb-img { border-color: var(--muted); }
.page-thumb.active .page-thumb-img { border-color: var(--accent); }
.page-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-thumb-num { text-align: center; font-size: 11px; color: var(--muted); font-family: var(--mono); padding: 4px 0 0; }
.pages-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 24px 8px; font-family: var(--mono); }

/* Spalte 3: Dokument-Viewer */
.inbox-viewer { overflow: hidden; display: flex; flex-direction: column; background: #0a0d16; }
.viewer-toolbar { padding: 8px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; background: var(--surface); }
.viewer-toolbar .doc-title { font-size: 13px; font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.viewer-content { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.viewer-content iframe { width: 100%; height: 100%; border: none; border-radius: 4px; }
.viewer-content img { max-width: 100%; border-radius: 4px; }
.viewer-content .einvoice-compare { align-self: stretch; min-height: 0; padding: 0; }
.viewer-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--muted); gap: 12px; }
.viewer-placeholder .icon { font-size: 48px; opacity: .3; }
.viewer-placeholder .icon .file-badge { opacity: 1; }
.viewer-placeholder p { font-size: 13px; }

/* ── Upload Zone ── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 32px; text-align: center; cursor: pointer; transition: all .2s; margin: 12px; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: rgba(79,142,247,.05); }
.upload-icon { font-size: 32px; margin-bottom: 10px; }
.upload-text { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.upload-sub { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 8px 12px 0; }
.progress-fill { height: 100%; background: var(--accent); transition: width .3s; width: 0; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; font-family: var(--font); cursor: pointer; transition: all .15s; border: none; text-decoration: none; }
.btn-accent { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-accent:hover { background: #3d7de8; border-color: #3d7de8; }
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger:hover { background: #d8434a; }
.btn-success { background: var(--success); color: #06291c; border: 1px solid var(--success); }
.btn-success:hover { background: #33b97c; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-icon { width: 30px; height: 30px; padding: 0; justify-content: center; font-size: 15px; }
.btn:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(60%); }
.btn:disabled:hover { background: var(--accent); border-color: var(--accent); }

/* ── Kontextmenü ── */
.ctx-menu { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; min-width: 200px; z-index: 1000; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.ctx-item { padding: 8px 16px; font-size: 13px; cursor: pointer; transition: background .1s; }
.ctx-item:hover { background: rgba(255,255,255,.06); }
.ctx-item.ctx-danger { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Overlay / Dialog ── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 500; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }

/* Verschlagwortungs-Dialog: schwebendes Panel über dem Dokument — Dokument
   bleibt im Hintergrund sichtbar & scrollbar, Hauptnav/Header gesperrt (s.u.) */
#tag-overlay { z-index: 600; background: transparent; backdrop-filter: none; align-items: flex-start; justify-content: flex-start; padding: 52px 0 0 var(--nav-w); pointer-events: none; transition: padding-left .2s; }

/* Verschlagwortungs-Dialog */
.tag-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: min(420px, 92vw); height: calc(100dvh - 52px); display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.tag-dialog-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; cursor: grab; touch-action: none; }
.tag-dialog-header.dragging { cursor: grabbing; }
.tag-dialog-body { display: flex; flex: 1; overflow: hidden; }
.tag-form { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; flex: 1; }

/* Hauptnavigation, Header & Postbox-Funktionen sperren, während die
   Verschlagwortungsmaske offen ist — das Dokument selbst (Vorschau/Seiten)
   bleibt sichtbar & scrollbar */
body.modal-open nav, body.modal-open .nav-more-btn, body.modal-open #nav-more-popup, body.modal-open header,
body.modal-open .inbox-filelist, body.modal-open .inbox-pages, body.modal-open .viewer-toolbar,
body.modal-open .fullview-toolbar, body.modal-open .fullview-actionbar {
  pointer-events: none; opacity: .35; transition: opacity .15s;
}
/* Dokument-Vorschau im Tag-Dialog Split-View (wenn .tag-overlay-wide aktiv) */
#tag-doc-preview { display: none; flex: 1; min-width: 0; overflow: hidden; background: #111; flex-direction: column; pointer-events: none; }

/* Ab 768px: Dialog am rechten Rand — nahe an Viewer-Toolbar */
@media (min-width: 768px) {
  #tag-overlay { justify-content: flex-end; }
}

/* Split-View (≥820px, iPad Air + Desktop): Dok links, Maske rechts */
#tag-overlay.tag-overlay-wide { flex-direction: row; align-items: stretch; }
#tag-overlay.tag-overlay-wide #tag-doc-preview { display: flex; pointer-events: auto; }
#tag-overlay.tag-overlay-wide .tag-dialog { width: 440px; flex-shrink: 0; border-radius: 0; border-top: none; border-right: none; border-bottom: none; height: auto; box-shadow: -6px 0 32px rgba(0,0,0,.6); }
#tag-overlay.tag-overlay-wide .tag-dialog { transform: none !important; }
#tag-overlay.tag-overlay-wide .tag-dialog-header { cursor: default; }

/* Seiten-Strip + Content im Tag-Dialog-Vorschaubereich */
.tag-preview-strip { display: flex; flex-direction: row; align-items: flex-start; gap: 4px; padding: 6px 8px; overflow-x: auto; background: #0a0d1a; border-bottom: 1px solid var(--border); flex-shrink: 0; scrollbar-width: thin; }
.tag-preview-strip .page-thumb { flex-shrink: 0; width: 38px; }
.tag-preview-strip .page-thumb-num { font-size: 10px; }
.tag-preview-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row label { font-size: 11px; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .6px; }
.form-row input, .form-row select { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; color: var(--text); font-family: var(--font); font-size: 13px; outline: none; transition: border-color .15s; }
.form-row input:focus, .form-row select:focus { border-color: var(--accent); }
.form-row.two-col { flex-direction: row; gap: 12px; }
.form-row.two-col > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.field-with-add { display: flex; gap: 6px; }
.field-with-add select { flex: 1; min-width: 0; }
.field-with-add .btn { flex-shrink: 0; align-self: stretch; }
.form-actions { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: auto; }
.form-row textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; color: var(--text); font-family: var(--font); font-size: 13px; outline: none; resize: vertical; transition: border-color .15s; }
.form-row textarea:focus { border-color: var(--accent); }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); font-family: var(--font); text-transform: none; letter-spacing: normal; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

/* Verschlagwortungs-Dialog: Icon-Buttonleiste (Füllen/OCR/eRechnung/KI) + Reiter */
.tag-tabs { display: flex; gap: 4px; flex-shrink: 0; border-bottom: 1px solid var(--border); margin: 0 -20px; padding: 0 20px; }
.tag-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font); font-size: 12px; padding: 8px 4px; cursor: pointer; transition: color .15s, border-color .15s; }
.tag-tab:hover { color: var(--text); }
.tag-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tag-tab-panel { display: flex; flex-direction: column; gap: 14px; }

/* Vollständig-anzeigen-Overlay */
.fullview-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 95vw; height: 95vh; display: flex; flex-direction: column; overflow: hidden; }
.fullview-toolbar { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.fullview-toolbar .doc-title { flex: 1; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fullview-body { flex: 1; display: grid; grid-template-columns: clamp(160px, 14vw, 260px) 1fr; overflow: hidden; }
.fullview-body .inbox-pages { border-right: 1px solid var(--border); }

/* Dokumenten-Buttonleiste der Vollansicht: eigene fixe Zeile am unteren Rand,
   verschiebt sich nie, unabhängig von Inhalt/Anzahl der Buttons */
.fullview-actionbar { flex-shrink: 0; border-top: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; background: var(--surface); }

/* Duplikat-Vergleich-Popup: liegt über dem Verschlagwortungs-Dialog (z-index 600) */
#dupcompare-overlay { z-index: 700; }

/* ── Nav-Collapse-Button ── */
.nav-collapse-btn { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: none; border: none; border-left: 3px solid transparent; color: var(--muted); font-family: var(--font); font-size: 13px; cursor: pointer; transition: all .15s; width: 100%; }
.nav-collapse-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }

/* Nav im eingeklappten Modus */
body.nav-collapsed { --nav-w: 52px; }
body.nav-collapsed nav a.hauptmenu,
body.nav-collapsed nav a.submenu { justify-content: center; padding: 8px 0; gap: 0; }
body.nav-collapsed nav a.hauptmenu .nav-label,
body.nav-collapsed nav a.submenu .nav-label { display: none; }
body.nav-collapsed nav .nav-section { display: none; }
body.nav-collapsed nav a .badge { display: none; }
body.nav-collapsed nav a.submenu-popout { display: none; }
body.nav-collapsed nav .submenu-row { justify-content: center; }
body.nav-collapsed .nav-collapse-btn { justify-content: center; padding: 8px 0; gap: 0; }
body.nav-collapsed .nav-collapse-btn .nav-label { display: none; }
body.nav-collapsed nav a .icon, body.nav-collapsed nav button .icon { width: 32px; min-width: 32px; height: 32px; }
body.nav-collapsed nav a .icon svg, body.nav-collapsed nav button .icon svg { width: 26px !important; height: 26px !important; }
/* body.modal-open dimmt/sperrt .fullview-toolbar global (für die Postbox-Vollansicht
   hinter dem Tag-Dialog) — träfe wegen geteilter Klasse auch die Symbolleiste
   dieses Popups, daher hier mit höherer Spezifität zurücksetzen */
body.modal-open #dupcompare-overlay .fullview-toolbar { pointer-events: auto; opacity: 1; }
.dupcompare-body { flex: 1; display: flex; overflow: hidden; }
.dupcompare-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); }
.dupcompare-pane:last-child { border-right: none; }
.dupcompare-pane-header { padding: 8px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.dupcompare-pane-body { flex: 1; min-height: 0; padding: 8px; }
.dupcompare-pane-body iframe, .dupcompare-pane-body img { width: 100%; height: 100%; border: none; border-radius: 4px; display: block; object-fit: contain; }
@media (max-width: 700px) {
  .dupcompare-body { flex-direction: column; }
  .dupcompare-pane { border-right: none; border-bottom: 1px solid var(--border); }
  .dupcompare-pane:last-child { border-bottom: none; }
}

.btn-close { background: rgba(255,255,255,.1); border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 14px; transition: all .15s; }
.btn-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ── Placeholder pages ── */
.page-placeholder { width: 100%; aspect-ratio: 0.707; background: var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 24px; }

/* ── E-Rechnung Badge & Vergleichsansicht ── */
.muted { color: var(--muted); }
.einvoice-badge-plausibel { color: var(--success); }
.einvoice-badge-hinweise  { color: var(--warn); }
.einvoice-badge-fehler    { color: var(--danger); }

.einvoice-compare { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.einvoice-compare-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; flex-shrink: 0; }
.einvoice-tabs { display: flex; gap: 6px; }
.einvoice-tab { background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 4px 12px; font-size: 12px; font-family: var(--font); cursor: pointer; }
.einvoice-tab.active { color: var(--text); border-color: var(--accent); background: rgba(79,142,247,.12); }
.einvoice-compare-body { flex: 1; display: flex; gap: 16px; min-height: 0; overflow: hidden; }
.einvoice-compare.split .einvoice-pane { flex: 1; min-width: 0; overflow: auto; }
.einvoice-compare.tabs .einvoice-pane { display: none; flex: 1; min-width: 0; overflow: auto; width: 100%; }
.einvoice-compare.tabs .einvoice-pane.active { display: block; }
.einvoice-pane-pdf iframe, .einvoice-pane-pdf img { width: 100%; height: 100%; border: none; border-radius: 4px; }

.einvoice-panel { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.einvoice-status { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.einvoice-status-icon { font-size: 22px; }
.einvoice-status-plausibel .einvoice-status-icon { color: var(--success); }
.einvoice-status-hinweise  .einvoice-status-icon { color: var(--warn); }
.einvoice-status-fehler    .einvoice-status-icon { color: var(--danger); }
.einvoice-status-label { font-weight: 600; }
.einvoice-format { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.einvoice-fields { width: 100%; border-collapse: collapse; }
.einvoice-fields th, .einvoice-fields td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
.einvoice-fields th { color: var(--muted); font-weight: 500; font-family: var(--mono); white-space: nowrap; width: 45%; }
.einvoice-checks { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; }
.einvoice-check { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); }
.einvoice-check-icon { flex-shrink: 0; }
.einvoice-check-ok .einvoice-check-icon { color: var(--success); }
.einvoice-check-warning .einvoice-check-icon { color: var(--warn); }
.einvoice-check-error .einvoice-check-icon { color: var(--danger); }

/* ── Mobile ── */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  #app { grid-template-rows: 52px 1fr 58px; grid-template-columns: minmax(0,1fr); grid-template-areas: "header" "main" "nav"; }
  header { padding: 0 10px; gap: 8px; }
  header .logo { font-size: 15px; }
  .profile-popup { right: 10px; }
  main, nav { min-width: 0; }

  nav { flex-direction: row; border-right: none; border-top: 1px solid var(--border); padding: 0; overflow-x: auto; position: relative; }
  .nav-section { display: none; }
  nav a.hauptmenu { flex-direction: column; gap: 2px; padding: 6px 12px; font-size: 10px; border-left: none; border-top: 3px solid transparent; flex: 1; justify-content: center; align-items: center; min-width: 55px; }
  nav a.active { border-top-color: var(--accent); border-left-color: transparent; }
  nav a .badge { display: none; }

  /* "..."-Button + Submenü-Plop-Layer */
  .nav-more-btn { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; font-size: 10px; flex: 1; justify-content: center; align-items: center; min-width: 55px; border: none; border-top: 3px solid transparent; background: none; color: var(--muted); font-family: var(--font); cursor: pointer; }
  .nav-more-btn.active, .nav-more-btn.open { color: var(--accent); border-top-color: var(--accent); }
  #nav-more-popup { display: none; flex-direction: column; gap: 2px; position: fixed; left: 8px; right: 8px; bottom: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5); z-index: 200; }
  #nav-more-popup.open { display: flex; }
  #nav-more-popup .nav-section { display: flex; padding: 8px 14px 2px; }
  #nav-more-popup .nav-section-group { display: flex !important; flex-direction: column; }
  #nav-more-popup a.submenu { flex-direction: row; border-left: none; border-radius: 6px; padding: 10px 14px; font-size: 13px; }
  #nav-more-popup a.submenu.active { background: rgba(79,142,247,.08); }
  #nav-more-popup .submenu-row { gap: 6px; border-left: none; border-radius: 6px; }
  #nav-more-popup .submenu-row.active { border-radius: 6px; }
  #nav-more-popup a.submenu-popout { margin-right: 6px; }

  .inbox-layout { grid-template-columns: 1fr; }
  .inbox-layout .inbox-resizer, .inbox-layout .inbox-pages, .inbox-layout .inbox-viewer { display: none; }

  /* Weniger Rand auf schmalen Bildschirmen, analog zur Postbox-Breite
     (.inbox-file-item nutzt nur 12px Padding statt 24px) */
  .dash-wrap { padding: 10px; }

  /* Nav-Collapse-Button auf Mobile nicht sichtbar (Nav ist Bottom-Bar) */
  .nav-collapse-btn { display: none; }
  /* Nav-Collapsed-Modus auf Mobile ignorieren */
  body.nav-collapsed { --nav-w: 0px; }

  /* Verschlagwortungs-Dialog: hohes Bottom-Sheet, Dokument bleibt sichtbar & scrollbar */
  #tag-overlay { align-items: flex-end; justify-content: center; padding: 8px; transition: none; }
  #tag-overlay .tag-dialog { width: 92vw; height: calc(100dvh - 16px); max-width: none; }
  .tag-dialog-header { gap: 4px; padding: 6px 8px; }

  /* Schriftgröße >=16px verhindert iOS-Safari Auto-Zoom beim Fokussieren von
     Formularfeldern (Verschlagwortungs-Dialog, Kummerkasten-Editor) */
  .form-row input, .form-row select, .form-row textarea { font-size: 16px; }

  /* Zweispaltige Formularzeilen (Einstellungen, Verschlagwortungsmaske) auf
     schmalen Bildschirmen untereinander statt nebeneinander, sonst werden
     Eingabefelder zu eng und die Seite bekommt horizontales Scrollen */
  .form-row.two-col { flex-direction: column; gap: 5px; }

  /* Vollständig-anzeigen-Overlay als mobile Vorschau */
  .fullview-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .fullview-body { grid-template-columns: 1fr; }
  .fullview-body .inbox-pages { display: none; }
}

/* ── Duplikat-Banner ── */
.dup-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(245,158,66,0.12);
  border: 1px solid rgba(245,158,66,0.4);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--warn);
  margin-bottom: 4px;
}
.dup-banner strong { color: var(--text); }
.dup-confirm-label { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; margin-top: 4px; }
.dup-confirm-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ── Postbox-Alterswarnung ── */
.aging-banner {
  margin: 0 12px 8px;
  background: rgba(245,158,66,0.12);
  border: 1px solid rgba(245,158,66,0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--warn);
}

/* ── Hinweis bei Office-Vorschau (Word/Excel) ── */
.preview-notice {
  width: 100%;
  margin-bottom: 10px;
  background: rgba(245,158,66,0.12);
  border: 1px solid rgba(245,158,66,0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--warn);
}

/* ── Audit-Log Tabelle ── */
.audit-badge {
  display: inline-block;
  font-size: 11px;
  font-family: var(--mono);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  color: var(--muted);
}
.audit-badge.UPLOAD    { background: rgba(79,142,247,0.15); color: var(--accent); }
.audit-badge.ARCHIVE   { background: rgba(62,207,142,0.15); color: var(--success); }
.audit-badge.TAG       { background: rgba(124,92,191,0.15); color: #a78bfa; }
.audit-badge.DELETE_INBOX { background: rgba(240,78,85,0.15); color: var(--danger); }
.audit-badge.VERIFY    { background: rgba(245,158,66,0.15); color: var(--warn); }
.audit-badge.FETCH_SMB { background: rgba(79,142,247,0.15); color: var(--accent); }
.audit-badge.DOWNLOAD_ORIGINAL { background: rgba(245,158,66,0.15); color: var(--warn); }
.audit-badge.ERSATZBELEG { background: rgba(62,207,142,0.12); color: var(--success); }
.audit-badge.DUPLICATE_DETECTED { background: rgba(245,158,66,0.15); color: var(--warn); }
.audit-badge.DUPLICATE_CONFIRMED { background: rgba(124,92,191,0.15); color: #a78bfa; }

tbody tr:hover { background: rgba(255,255,255,0.03); }

/* ── Kummerkasten ── */
.kk-toolbar { margin-bottom: 16px; }
.kk-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; max-width: 800px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.kk-form textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; color: var(--text); font-family: var(--font); font-size: 13px; outline: none; resize: vertical; transition: border-color .15s; }
.kk-form textarea:focus { border-color: var(--accent); }
.md-toolbar { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.kk-columns { display: flex; gap: 20px; align-items: flex-start; }
.kk-col { flex: 1; min-width: 0; }
.kk-col-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
@media (max-width: 900px) {
  .kk-columns { flex-direction: column; }
}
.kk-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; max-width: 800px; margin-bottom: 16px; overflow-x: hidden; }
.kk-item-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; min-width: 0; }
.kk-item-header-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.kk-item-header-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.kk-item-id { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.kk-item-title { font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.kk-item-meta { font-size: 11px; color: var(--muted); font-family: var(--mono); min-width: 0; overflow-wrap: anywhere; }
.kk-item-content { padding: 14px; font-size: 13px; }
.kk-type-badge { display: inline-block; font-size: 11px; font-family: var(--mono); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.kk-type-badge.kk-type-idee         { background: rgba(245,158,66,0.15); color: var(--warn); }
.kk-type-badge.kk-type-verbesserung { background: rgba(62,207,142,0.15); color: var(--success); }
.kk-type-badge.kk-type-fehler       { background: rgba(240,78,85,0.15); color: var(--danger); }
.kk-type-badge.kk-type-sonstiges    { background: rgba(79,142,247,0.15); color: var(--accent); }
.kk-status-badge { display: inline-block; font-size: 11px; font-family: var(--mono); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.kk-status-badge.kk-status-neu              { background: rgba(79,142,247,0.15); color: var(--accent); }
.kk-status-badge.kk-status-begonnen         { background: rgba(245,158,66,0.15); color: var(--warn); }
.kk-status-badge.kk-status-abgearbeitet     { background: rgba(62,207,142,0.15); color: var(--success); }
.kk-status-badge.kk-status-wieder_eroeffnet { background: rgba(245,158,66,0.15); color: var(--warn); }
.kk-status-badge.kk-status-close            { background: rgba(148,163,184,0.15); color: var(--muted); }
.kk-status-select { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 11px; padding: 2px 4px; max-width: 100%; min-width: 0; }

/* ── Login ── */
.login-wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 200;
}
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 14px;
}
.login-card h1 { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -0.5px; }

/* ── Benutzerverwaltung ── */
.user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.user-table th { padding: 8px 10px; text-align: left; font-size: 11px; color: var(--muted); font-family: var(--mono); font-weight: 400; border-bottom: 1px solid var(--border); }
.user-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.role-badge { display: inline-block; font-size: 11px; font-family: var(--mono); padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.07); color: var(--muted); }
.role-badge.admin   { background: rgba(62,207,142,0.15); color: var(--success); }
.role-badge.pfleger { background: rgba(79,142,247,0.15); color: var(--accent); }
.role-badge.pruefer { background: rgba(245,158,66,0.15); color: var(--warn); }

/* ── Suche / Filter ── */
.search-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.search-filters input, .search-filters select { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; color: var(--text); font-family: var(--font); font-size: 13px; outline: none; transition: border-color .15s; }
.search-filters input:focus, .search-filters select:focus { border-color: var(--accent); }
.search-filters input { flex: 2; min-width: 240px; }
.search-filters select { min-width: 150px; }

/* Schriftgröße >=16px verhindert iOS-Safari Auto-Zoom beim Fokussieren —
   .kk-form textarea und .search-filters input/select wurden nach der
   gemeinsamen mobilen 16px-Regel definiert und gewannen daher die Kaskade
   mit ihrem eigenen 13px (gleiche Spezifität, spätere Quelltext-Position) */
@media (max-width: 700px) {
  .kk-form textarea, .search-filters input, .search-filters select { font-size: 16px; }

  /* Einheitlicher, reduzierter Innenabstand für Karten/Inhalts-Boxen
     (Kummerkasten-Einträge/-Formular, Hilfeseiten) - 16-24px Padding
     zusammen mit dem äußeren .dash-wrap-Rand kosteten zu viel nutzbare
     Breite */
  .kk-item, .kk-item-content, .kk-form, .help-content { padding: 12px; }

  /* iOS/WebKit bemisst die Breite von <select> teils an der längsten
     <option> (z.B. "🔁 Wieder eröffnet") statt am gewählten Wert und kann
     dadurch die Aktionsleiste über die Kartenbreite hinaus schieben */
  .kk-status-select { max-width: 130px; }

  /* Größere Touch-Flächen für Icon-Buttons (Dokumenten-Menü im
     Vollbild-Overlay, Verschlagwortungs-Dialog) - 30px war für Finger zu
     klein und zu eng beieinander */
  .btn-icon { width: 40px; height: 40px; font-size: 17px; }
  .toolbar-group, .fullview-actionbar, .form-actions { gap: 10px; }
}
.status-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; font-family: var(--mono); white-space: nowrap; }
.status-badge-offen      { background: rgba(245,158,66,.15); color: var(--warn); }
.status-badge-in_pruefung{ background: rgba(79,142,247,.15); color: var(--accent); }
.status-badge-freigegeben,
.status-badge-aktiv      { background: rgba(62,207,142,.15); color: var(--success); }
.status-badge-bezahlt    { background: rgba(62,207,142,.15); color: var(--success); }
.status-badge-gebucht,
.status-badge-erledigt,
.status-badge-ausgelaufen{ background: rgba(255,255,255,.08); color: var(--muted); }
.status-badge-gekuendigt { background: rgba(240,78,85,.15); color: var(--danger); }

.chip-toggle-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip-toggle {
  font-size: 12px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  cursor: pointer; user-select: none; transition: background .1s, color .1s, border-color .1s;
}
.chip-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-toggle-empty { font-size: 12px; color: var(--muted); }
.chip-toggle-add {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; line-height: 1.4;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  cursor: pointer; font-weight: 600;
}
.chip-toggle-add:hover { background: var(--accent); color: #fff; }

.chip-toggle-list.locked .chip-toggle { cursor: default; opacity: .65; }
.chip-toggle-list.locked .chip-toggle-add { display: none; }

.field-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.field-locked-mark { color: #f59e0b; margin-left: 2px; pointer-events: none; }
.field-locked-mark svg { width: 0.7em !important; height: 0.7em !important; vertical-align: -0.04em; }
#tf-archive-lock-notice { background: rgba(245,166,35,.10); color: var(--text); border: 1px solid rgba(245,166,35,.3); border-radius: 7px; padding: 8px 12px; margin-bottom: 10px; }

.ki-ocr-section { margin-bottom: 16px; }
.ki-ocr-section-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; letter-spacing: .03em; }
.ki-ocr-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
.ki-ocr-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.ki-ocr-table td:first-child { color: var(--muted); width: 130px; white-space: nowrap; }
.ki-ocr-text { width: 100%; min-height: 180px; max-height: 340px; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-family: var(--mono); font-size: 12px; margin-bottom: 10px; }

/* ── Firma-Lookup ─────────────────────────────────────────── */
.firma-lookup-wrap { display: flex; gap: 6px; align-items: stretch; }
.firma-lookup-wrap input { flex: 1; min-width: 0; }
.field-needs-confirm { border-color: #f97316 !important; box-shadow: 0 0 0 2px rgba(249,115,22,.15) !important; }
.firma-dropdown { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; max-height: 180px; overflow-y: auto; margin-top: 2px; }
.firma-dropdown-item { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text); }
.firma-dropdown-item:hover { background: var(--accent); color: #fff; }
.firma-dropdown-empty { padding: 8px 12px; font-size: 12px; color: var(--muted); font-style: italic; }
.firma-hint { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 6px 10px; background: rgba(249,115,22,.08); border-radius: 6px; border: 1px solid rgba(249,115,22,.25); }
.firma-hint-text { font-size: 12px; color: #f97316; flex: 1; }
.firma-hint .btn { flex-shrink: 0; font-size: 12px; padding: 3px 10px; }

/* ── Stichwort-Lookup ────────────────────────────────────── */
.stichwort-lookup-wrap { display: flex; gap: 6px; align-items: stretch; }
.stichwort-lookup-wrap input { flex: 1; min-width: 0; }
.stichwort-dropdown { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; max-height: 210px; overflow-y: auto; margin-top: 2px; }
.stichwort-dropdown-item { display: flex; align-items: center; padding: 0 4px 0 12px; cursor: pointer; font-size: 13px; color: var(--text); gap: 4px; }
.stichwort-dropdown-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.stichwort-dropdown-item span { flex: 1; padding: 7px 0; }
.stichwort-dropdown-item .sw-hide-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px 6px; border-radius: 4px; font-size: 12px; line-height: 1; }
.stichwort-dropdown-item .sw-hide-btn:hover { background: var(--danger); color: #fff; }
.stichwort-dropdown-empty { padding: 8px 12px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ── CRM Firma Dialog ─────────────────────────────────────── */
#crm-firma-overlay { display: flex; z-index: 800; }
.crm-firma-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 560px; max-width: 96vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.crm-firma-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 15px; flex-shrink: 0; }
.crm-firma-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.crm-firma-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.crm-section-title { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 2px; }
.crm-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.crm-prefill-bar { display: flex; align-items: center; margin-bottom: 10px; }

/* ── CRM Seite ────────────────────────────────────────────── */
.crm-construction-banner { display: flex; align-items: center; gap: 10px; background: rgba(79,142,247,.08); border: 1px solid rgba(79,142,247,.25); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; max-width: 900px; color: var(--text); }
.crm-firma-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; max-width: 1100px; }
.crm-firma-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.crm-firma-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.crm-firma-card-name { font-weight: 600; font-size: 14px; }
.crm-firma-rechtsform { font-size: 11px; font-weight: 400; color: var(--muted); }
.crm-firma-card-meta { font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.crm-firma-card-body { display: flex; flex-direction: column; gap: 3px; }
.crm-firma-detail { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Firma Detailseite ───────────────────────────────────── */
.crm-firma-detail-layout { display: grid; grid-template-columns: 240px 280px 1fr; gap: 0; height: calc(100vh - 100px); min-height: 0; overflow: hidden; }
.crm-firma-detail-left { border-right: 1px solid var(--border); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 0; }
.crm-firma-detail-center { border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.crm-firma-detail-viewer { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.crm-detail-section-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 16px 6px; flex-shrink: 0; }
.crm-detail-stamm { display: flex; flex-direction: column; gap: 6px; }
.crm-detail-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.crm-detail-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg); }
.crm-detail-row svg { width: 13px !important; height: 13px !important; color: var(--muted); flex-shrink: 0; }
.crm-detail-row a { color: var(--accent); text-decoration: none; }
.crm-detail-row a:hover { text-decoration: underline; }
.crm-detail-meta { font-size: 10px; color: var(--muted); margin-top: 8px; }
.crm-stamm-edit-form { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.crm-stamm-edit-row { display: flex; flex-direction: column; gap: 2px; }
.crm-stamm-edit-row label { font-size: 10px; color: var(--muted); font-weight: 500; }
.crm-stamm-edit-row input, .crm-stamm-edit-row select, .crm-stamm-edit-row textarea { font-size: 12px; padding: 4px 6px; background: var(--input-bg, var(--surface)); border: 1px solid var(--border); border-radius: 4px; color: var(--fg); width: 100%; box-sizing: border-box; }
.crm-stamm-edit-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.crm-dok-year-group { display: flex; flex-direction: column; }
.crm-dok-year-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 14px 4px; background: var(--surface); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border); }
.crm-dok-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; transition: background .1s; border-bottom: 1px solid var(--border-light, var(--border)); }
.crm-dok-item:hover { background: var(--hover); }
.crm-dok-item.active { background: rgba(79,142,247,.08); border-left: 3px solid var(--accent); padding-left: 11px; }
.crm-dok-icon { flex-shrink: 0; color: var(--muted); }
.crm-dok-icon svg { width: 14px !important; height: 14px !important; }
.crm-dok-info { min-width: 0; flex: 1; }
.crm-dok-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-dok-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ── Logo-Varianten pro Modul ────────────────────────────── */
.logo-doc-brand      { font-weight: 700; font-style: italic; color: var(--accent); }
.logo-hub-brand      { font-weight: 700; font-style: italic; color: var(--warn); }
.logo-finanzen-brand { font-weight: 700; font-style: italic; color: var(--gold); }

/* ── ELOcrm Modul-Theme: Akzentfarbe grün statt blau ─────── */
body.module-crm { --accent: #3ECF8E; }
body.module-crm .stat-card.accent { background: rgba(62,207,142,.12); border-color: rgba(62,207,142,.3); }
a.logo-link { text-decoration: none; color: inherit; }

/* ── Mandant-Selektor in der Kopfzeile ───────────────────── */
.mandant-header { display: flex; align-items: center; margin-left: 14px; flex-shrink: 0; }
.mandant-select {
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-family: var(--font); font-size: 12px;
  padding: 4px 10px; cursor: pointer; outline: none; max-width: 200px;
}
.mandant-select:focus { border-color: var(--accent); }
@media (max-width: 700px) {
  .mandant-header { margin-left: 8px; }
  .mandant-select { max-width: 110px; font-size: 11px; padding: 3px 6px; }
}

/* ── ELOlight Hub — Modul-Kacheln ────────────────────────── */
.hub-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; max-width: 860px;
}
.hub-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, background .15s;
}
.hub-tile:hover { border-color: var(--accent); background: rgba(79,142,247,.05); }
.hub-tile.tile-disabled { opacity: .45; cursor: default; pointer-events: none; }
.hub-tile-icon { line-height: 1; }
.hub-tile-icon svg { width: 36px !important; height: 36px !important; pointer-events: none; }
.hub-tile-name { font-size: 17px; font-weight: 600; font-family: var(--mono); }
.hub-tile-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) {
  .hub-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .hub-tile { padding: 16px 14px; }
}

/* ── CRM Firma Detail — Tab-Layout ───────────────────────── */
.crm-firma-detail-layout2 {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: calc(100vh - 112px);
  overflow: hidden;
}
.crm-firma-detail-main {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.crm-detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
  flex-shrink: 0;
  background: var(--surface);
  overflow-x: auto;
}
.crm-detail-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font);
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.crm-detail-tab:hover { color: var(--text); }
.crm-detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.crm-detail-tab svg { width: 13px !important; height: 13px !important; }
.crm-tab-panel { display: none; flex: 1; overflow: hidden; }
.crm-tab-panel.active { display: flex; flex-direction: column; }
.crm-tab-panel[data-tab="profil"].active,
.crm-tab-panel[data-tab="ansprechpartner"].active,
.crm-tab-panel[data-tab="notizen"].active { overflow-y: auto; }
.crm-tab-panel[data-tab="dokumente"].active { flex-direction: row; overflow: hidden; }

/* ── CRM Profil-Tab ──────────────────────────────────────── */
.crm-profil-wrap { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.crm-profil-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-profil-updated { font-size: 11px; color: var(--muted); }
.crm-profil-empty {
  color: var(--muted); font-size: 13px; padding: 32px 0;
  text-align: center; line-height: 2;
}
.crm-profil-empty svg { width: 24px !important; height: 24px !important; }
.crm-profil-content { display: flex; flex-direction: column; gap: 12px; }
.crm-profil-intro { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0; }
.crm-profil-section h4 {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; margin: 0 0 6px;
}
.crm-profil-section ul { margin: 0; padding-left: 18px; }
.crm-profil-section li { font-size: 13px; line-height: 1.7; color: var(--text); }
.crm-profil-section p  { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0; }
.crm-profil-meta-bar {
  font-size: 12px; color: var(--muted);
  padding: 8px 0; border-top: 1px solid var(--border);
}
.crm-profil-source {
  font-size: 11px; color: var(--muted);
  padding-top: 8px; border-top: 1px solid var(--border);
}
.crm-profil-source a { color: var(--accent); text-decoration: none; }

/* ── CRM Ansprechpartner-Tab ─────────────────────────────── */
.crm-ap-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
#crm-ap-list {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.crm-ap-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
}
.crm-ap-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.crm-ap-name { font-size: 13px; font-weight: 600; color: var(--text); }
.crm-ap-rolle { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.crm-ap-meta {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
}
.crm-ap-meta a { color: var(--accent); text-decoration: none; }
.crm-ap-meta svg { width: 12px !important; height: 12px !important; }
.crm-ap-notiz { font-size: 12px; color: var(--muted); white-space: pre-wrap; margin-top: 4px; }
.crm-ap-del { color: var(--muted); padding: 4px 6px; flex-shrink: 0; }
.crm-ap-del:hover { color: var(--danger); }
.crm-ap-del svg { width: 13px !important; height: 13px !important; }
.crm-ap-add-form {
  border-top: 1px solid var(--border); padding: 14px;
  background: var(--bg); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.crm-ap-form-title {
  font-size: 12px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
}
.crm-ap-form-title svg { width: 13px !important; height: 13px !important; }
.crm-ap-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-ap-fields textarea { grid-column: 1 / -1; }

/* ── CRM Notizen-Tab ─────────────────────────────────────── */
.crm-notizen-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.crm-notiz-input-area {
  border-bottom: 1px solid var(--border); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0; background: var(--surface);
}
.crm-notiz-textarea { resize: vertical; min-height: 60px; font-size: 13px; }
#crm-notizen-list {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.crm-notiz-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.crm-notiz-header { display: flex; align-items: center; gap: 8px; }
.crm-notiz-user {
  font-size: 12px; font-weight: 600; color: var(--accent);
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.crm-notiz-user svg { width: 12px !important; height: 12px !important; }
.crm-notiz-date { font-size: 11px; color: var(--muted); }
.crm-notiz-del { color: var(--muted); padding: 2px 4px; flex-shrink: 0; }
.crm-notiz-del:hover { color: var(--danger); }
.crm-notiz-del svg { width: 12px !important; height: 12px !important; }
.crm-notiz-text { font-size: 13px; color: var(--text); white-space: pre-wrap; line-height: 1.6; }