/* Pittel+App-Look — Dark-Green Header + Sidebar + Item-Cards */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: #222;
  background: #fafafa;
}

/* ---------- Topbar ---------- */
.topbar {
  background: #22593a;   /* dark green */
  color: white;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.app-icon { font-size: 20px; margin-right: 8px; }
.app-name { font-weight: 500; }
.env-badge, .user-badge {
  margin-left: 16px;
  color: #d5e7dc;
  font-size: 13px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding: 16px 40px 8px 40px;
  font-size: 13px;
  color: #666;
}
.breadcrumb a { color: #666; text-decoration: none; }
.breadcrumb a:hover { color: #22593a; text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; color: #ccc; }

.project-title {
  padding: 4px 40px 24px 40px;
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  color: #222;
}

/* ---------- Layout ---------- */
.main-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  padding: 0 40px 40px 40px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  border-right: 1px solid #e2e2e2;
  padding-right: 20px;
}
.proj-meta {
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 16px;
  margin-bottom: 16px;
  color: #444;
}
.meta-line { padding: 3px 0; font-size: 13px; }
.meta-icon { color: #22593a; margin-right: 6px; }
.meta-sub { color: #888; font-size: 12px; padding-left: 18px; }
.sidenav { display: flex; flex-direction: column; }
.menu-item {
  padding: 10px 14px;
  color: #333;
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 14px;
}
.menu-item:hover { background: #f0f4f1; }
.menu-item.active {
  color: #22593a;
  font-weight: 600;
  border-left-color: #22593a;
  background: #f0f4f1;
}
.hint { color: #999; padding: 12px; }

/* ---------- Content ---------- */
.content {
  padding: 0 30px;
  max-width: 1200px;
}
.content h2 {
  margin: 24px 0 12px;
  font-size: 20px;
  font-weight: 500;
  color: #222;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 6px;
}
.content h3 {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #444;
}

/* ---------- Item-Cards (analog Screenshot mit ? Icons) ---------- */
.item-card {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.item-card:hover { background: #fbfbf9; }
.item-card.na { opacity: 0.4; }

.item-icon {
  width: 40px; height: 40px;
  background: #f4f4f4; color: #999;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-size: 16px;
}
.item-icon.status-accept  { background: #e0f4e6; color: #22593a; }
.item-icon.status-declined { background: #fff5da; color: #b8860b; }
.item-icon.status-na       { background: #ececec; color: #888; }

.item-body { display: flex; flex-direction: column; }
.item-label { font-weight: 500; color: #333; }
.item-sub {
  font-size: 12px; color: #888; margin-top: 2px;
}

/* Decision-Buttons */
.decision-btns { display: flex; gap: 4px; }
.decision-btn {
  border: 1px solid #ddd; background: white; padding: 6px 10px;
  border-radius: 4px; cursor: pointer; font-size: 14px;
  color: #555;
}
.decision-btn:hover { background: #f5f5f5; }
.decision-btn.selected.accept   { background: #22593a; color: white; border-color: #22593a; }
.decision-btn.selected.declined { background: #d4a017; color: white; border-color: #d4a017; }
.decision-btn.selected.na       { background: #888; color: white; border-color: #888; }

/* ---------- Vertragsbestimmungen — Tabelle ---------- */
.field-group {
  margin-bottom: 32px;
}
.field-group-title {
  font-size: 16px; font-weight: 600; color: #22593a;
  border-bottom: 2px solid #22593a; padding-bottom: 4px; margin-bottom: 10px;
}
.field-row {
  display: grid;
  grid-template-columns: 32px 260px 1fr;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid #f0f0f0;
  align-items: start;
}
.field-label { color: #444; }
.field-label .field-key { font-family: monospace; font-size: 11px; color: #999; display: block; margin-top: 2px; }

/* Ampel-Kreis für Confidence — Ampel-Farben (grün/orange/rot) */
.conf-dot {
  width: 20px; height: 20px; border-radius: 50%;
  margin-top: 4px;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.conf-dot.conf-hoch     { background: #2fa84f; }   /* grün */
.conf-dot.conf-mittel   { background: #f0a020; }   /* orange */
.conf-dot.conf-gering   { background: #d33333; }   /* rot */
.conf-dot.conf-unknown  { background: #ccc; }      /* grau — kein Confidence */
.field-value {
  display: flex; flex-direction: column; gap: 6px;
}
.field-value .val {
  font-weight: 500; color: #222;
}
.field-value .val.null-value { color: #b0b0b0; font-style: italic; }
.field-value .conf {
  font-size: 11px; color: #888;
  padding: 2px 6px; background: #f4f4f4; border-radius: 3px; align-self: flex-start;
}
.field-value .conf.hoch   { background: #d3ecda; color: #16643a; }
.field-value .conf.mittel { background: #ffe9c4; color: #8a6100; }
.field-value .conf.gering { background: #f4d5d5; color: #a33; }
.field-value .cite {
  font-size: 12px; color: #666; padding: 6px 10px;
  background: #f8f8f6; border-left: 3px solid #22593a; margin: 4px 0;
}
.field-value .src {
  font-size: 11px; color: #888;
}

/* Reihung-Traversal */
.reihung-toggle {
  margin-top: 8px; cursor: pointer;
  color: #22593a; font-size: 12px; font-weight: 500;
}
.reihung-toggle::before { content: "▶ "; display: inline-block; transition: transform 0.15s; }
.reihung-toggle.open::before { transform: rotate(90deg); }
.reihung-detail {
  display: none; margin-top: 8px;
  padding: 10px 12px; background: #f7f7f5; border-radius: 4px;
  font-size: 12px;
}
.reihung-detail.open { display: block; }
.reihung-table { width: 100%; border-collapse: collapse; }
.reihung-table th, .reihung-table td {
  border-bottom: 1px solid #e5e5e5;
  padding: 5px 8px; text-align: left; vertical-align: top;
}
.reihung-table th { background: #ececec; color: #444; font-weight: 500; }
.reihung-table td.rang { text-align: right; width: 38px; }
.reihung-table td.mech { font-family: monospace; font-size: 11px; }
.reihung-table tr.hit td { background: #e0f4e6; }        /* echter Treffer: Bestimmung wurde hier gefunden */
.reihung-table tr.candidate td { background: #f4f0e0; }  /* Kandidat: nur Datei matched, Rang unklar */
.reihung-table tr.candidate td.rang { color: #8a6a10; }
.reihung-table tr.dispositiv td {
  background: #f7f7f7; border-top: 2px solid #bbb; font-style: italic; color: #555;
}
.reihung-table tr.dispositiv td.rang { color: #888; font-style: normal; }
.reihung-table tr.selected td { outline: 2px solid #22593a; }
.rang-select-btn {
  border: 1px solid #22593a; background: white; color: #22593a;
  padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 11px;
}
.rang-select-btn.chosen { background: #22593a; color: white; }
.override-form { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.override-form input[type=text] { flex: 1; padding: 4px 8px; font-size: 12px; border: 1px solid #ccc; border-radius: 3px; }
.override-form button { padding: 4px 12px; font-size: 12px; }

/* ---------- Meta-Info-Chips (Runs, Sources) ---------- */
.run-chip {
  display: inline-block;
  background: #f0f0f0; color: #666; font-size: 10px;
  padding: 1px 6px; border-radius: 8px; margin-right: 4px;
}
.multi-run { color: #22593a; font-weight: 500; }

/* Custom-Tooltips — via [data-tooltip] Attribut, erscheinen sofort beim Hover */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #22593a;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 320px;
  z-index: 200;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  pointer-events: none;
}
[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #22593a;
  z-index: 200;
  pointer-events: none;
}
/* Für Elemente wo Tooltip unter dem Element besser passt */
[data-tooltip][data-tooltip-pos="below"]:hover::after {
  bottom: auto; top: calc(100% + 8px);
}
[data-tooltip][data-tooltip-pos="below"]:hover::before {
  bottom: auto; top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: #22593a;
}
/* Tooltip mit Text-Wrap erlauben (lange Erklärungen) */
[data-tooltip][data-tooltip-wrap]:hover::after {
  white-space: normal;
  width: 240px;
}

/* Warning/Info-Banner */
.warn-banner {
  padding: 12px 16px; margin: 12px 0;
  background: #fff4d5; border-left: 4px solid #d4a017; border-radius: 3px;
  color: #6a5010; font-size: 13px; line-height: 1.6;
}
.warn-banner code {
  background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 3px;
  font-size: 11px; color: #333; word-break: break-all;
  display: inline-block; margin-top: 4px;
}
.info-banner {
  padding: 10px 14px; margin: 12px 0;
  background: #eaf3f6; border-left: 4px solid #3a6ea5; border-radius: 3px;
  color: #2a4a70; font-size: 13px;
}
.info-banner code {
  background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; font-size: 11px;
}

/* Utility */
.muted { color: #999; }
.mono  { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.pill {
  display: inline-block; padding: 2px 8px; font-size: 11px;
  border-radius: 8px; background: #eee; color: #444;
}
.pill.kat-penalties  { background: #f4d5d5; color: #a33; }
.pill.kat-warranty   { background: #fce6cc; color: #8a5010; }
.pill.kat-damages    { background: #f7cccc; color: #a33; }
.pill.kat-payment    { background: #d5e7f0; color: #366; }
.pill.kat-price      { background: #e3d9ec; color: #63419a; }
.pill.kat-security   { background: #d5e7dc; color: #16643a; }
.pill.kat-scope      { background: #f0e6b0; color: #7a5a00; }
.pill.kat-compliance { background: #dcdcdc; color: #333; }
.pill.krit-hoch     { background: #d33; color: white; }
.pill.krit-mittel   { background: #f0a020; color: white; }
.pill.krit-niedrig  { background: #4c8; color: white; }

/* Assignment-Column — runder Avatar-Button + Dropdown */
.assign-col {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-right: 4px;
}
.assign-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px dashed #ccc; background: transparent;
  color: #999; cursor: pointer;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.assign-avatar:hover { transform: scale(1.05); }
.assign-avatar.assigned {
  border-style: solid; border-color: transparent;
  color: white;
}
.assign-menu {
  position: absolute;
  top: 44px; right: 0;
  background: white; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 220px; z-index: 100;
  padding: 6px 0;
}
.assign-menu-title {
  padding: 6px 12px; font-size: 12px; color: #888; font-weight: 500;
  border-bottom: 1px solid #eee;
}
.assign-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.assign-menu-item:hover { background: #f5f5f5; }
.assign-menu-item.chosen { background: #f0f4f1; font-weight: 500; }
.assign-menu-item.chosen::after {
  content: "✓"; margin-left: auto; color: #22593a; font-weight: 700;
}
.assign-menu-item.unassign {
  border-top: 1px solid #eee; color: #a33;
}
.mini-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  color: white; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Tabs (Einzureichende Dokumente) */
.tabs {
  display: flex; gap: 2px; border-bottom: 2px solid #22593a;
  margin-top: 12px; margin-bottom: 12px;
}
.tab {
  background: #f4f4f4; border: 1px solid #ddd; border-bottom: none;
  padding: 10px 18px; cursor: pointer;
  font-size: 14px; color: #555;
  border-radius: 4px 4px 0 0;
  display: flex; align-items: center; gap: 8px;
}
.tab:hover { background: #ececec; }
.tab.active {
  background: #22593a; color: white; border-color: #22593a;
  font-weight: 500;
}
.tab-count {
  font-size: 11px; padding: 2px 8px;
  background: rgba(255,255,255,0.5); color: inherit;
  border-radius: 8px; font-weight: normal;
}
.tab.active .tab-count {
  background: rgba(255,255,255,0.25); color: white;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Tabs mit Ampel-Zählung (Vertragsbestimmungen) --- */
.tabs-with-ampel .tab {
  flex-direction: column; align-items: stretch; gap: 4px;
  padding: 8px 14px;
}
.tab-title-row { display: flex; align-items: center; gap: 8px; }
.tab-ampel {
  display: flex; gap: 6px; font-size: 11px;
  justify-content: flex-start;
}
.ampel-seg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px 1px 4px; border-radius: 10px;
  background: rgba(255,255,255,0.5);
}
.tab.active .ampel-seg { background: rgba(255,255,255,0.15); }
.ampel-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.ampel-green  .ampel-dot { background: #2fa84f; }
.ampel-yellow .ampel-dot { background: #f0a020; }
.ampel-red    .ampel-dot { background: #d33333; }

/* --- Auftraggeber-View: Meta-Grid --- */
.ag-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-top: 10px;
}
.ag-meta-card {
  background: white; border: 1px solid #e0e0e0; border-radius: 5px;
  padding: 12px 14px;
}
.ag-meta-card.wide { grid-column: 1 / -1; }
.ag-meta-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ag-meta-value { font-size: 14px; color: #222; word-break: break-word; }

/* --- Rahmenwerke-Karten --- */
.rw-header { margin-bottom: 14px; }
.rw-header h3 { margin: 0 0 4px 0; color: #22593a; }

.rw-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.rw-card {
  background: white; border: 1px solid #d5e3db; border-left: 4px solid #22593a;
  border-radius: 4px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow 0.15s;
}
.rw-card:hover { box-shadow: 0 2px 8px rgba(34,89,58,0.15); }
.rw-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rw-code {
  font-family: monospace; font-weight: 600; font-size: 14px;
  color: #22593a; background: #eef4f0; padding: 2px 8px; border-radius: 3px;
}
.rw-validity {
  font-size: 11px; color: #888;
  background: #f4f4f2; padding: 2px 8px; border-radius: 10px;
}
.rw-subtitle { font-size: 13px; color: #333; line-height: 1.35; }
.rw-files {
  border-top: 1px dashed #eee; padding-top: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.rw-file {
  font-size: 11px; color: #666;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rw-file.muted { padding-top: 4px; border-top: 1px dashed #eee; }

.rw-ergaenzungen {
  background: #f9fbf9; border: 1px solid #d5e3db; border-radius: 4px;
  padding: 12px 16px; margin-top: 16px;
}
.rw-ergaenzungen h4 { margin: 0 0 8px 0; color: #22593a; font-size: 14px; }
.rw-ergaenzungen ul { margin: 0; padding-left: 20px; }
.rw-ergaenzungen li { margin: 3px 0; font-size: 13px; }

.rw-footer { margin: 14px 0; padding: 8px 12px; background: #f7f7f5; border-radius: 3px; }
.rw-raw { margin-top: 20px; }
.rw-raw summary { cursor: pointer; padding: 6px 0; font-size: 12px; }
.rw-raw pre {
  background: #f7f7f5; padding: 10px; border-radius: 3px;
  font-size: 11px; overflow-x: auto; white-space: pre-wrap;
  max-height: 400px;
}

/* --- Homepage "Neues Projekt" Section --- */
.np-section {
  background: white; border: 1px solid #d5e3db; border-left: 4px solid #22593a;
  border-radius: 5px; padding: 16px 20px; margin-bottom: 26px;
}
.np-section h2 { margin: 0 0 4px 0; }
.np-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.np-input {
  padding: 8px 12px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px;
}
.np-input:focus { outline: none; border-color: #22593a; }
.np-preview {
  background: #f9fbf9; border: 1px solid #d5e3db; border-radius: 4px;
  padding: 10px 14px; font-size: 12px; max-height: 220px; overflow-y: auto;
}
.np-preview ul { margin: 6px 0 0 0; padding-left: 20px; }
.np-preview li { margin: 2px 0; display: flex; align-items: center; gap: 6px; }
.np-rm {
  background: transparent; border: none; color: #d33333; cursor: pointer;
  font-size: 12px; padding: 0 4px;
}
.np-rm:hover { color: #a02020; }
.np-actions { display: flex; gap: 8px; }
.np-actions .btn-mini[disabled] { opacity: 0.4; cursor: not-allowed; }

/* --- Nachreichungs-Badges in Documents-Ansicht --- */
.doc-status-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 3px; margin-left: 6px; text-transform: uppercase;
  letter-spacing: 0.3px; font-weight: 500;
}
.doc-status-badge.aktiv       { background: #e0f4e6; color: #22593a; }
.doc-status-badge.inaktiv     { background: #eee;    color: #666; }
.doc-status-badge.superseded  { background: #fff4d6; color: #8a6a10; }
.doc-status-badge.version     { background: #e0eef7; color: #204878; }
.item-card.superseded { opacity: 0.55; }
.item-card.inaktiv    { opacity: 0.35; }

/* --- Projekt-Übersicht: Action-Row (Pipeline-Start etc.) --- */
.ov-actions {
  display: flex; gap: 10px; margin: 14px 0 20px 0; flex-wrap: wrap;
  align-items: center;
}
.btn-primary {
  background: #22593a; color: white; border: 1px solid #22593a;
  padding: 8px 16px; font-size: 14px; font-weight: 500;
  border-radius: 4px; cursor: pointer;
}
.btn-primary:hover { background: #1a4530; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Toast-System für Pipeline-Status --- */
#toast-container {
  position: fixed; top: 60px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 380px;
}
.toast {
  background: white; border-left: 4px solid #22593a;
  border-radius: 4px; padding: 10px 14px; font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  animation: toast-in 0.2s ease-out;
  display: flex; flex-direction: column; gap: 4px;
}
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.toast.info    { border-left-color: #22593a; }
.toast.step    { border-left-color: #3a6ea5; }
.toast.warn    { border-left-color: #f0a020; background: #fff8ee; }
.toast.error   { border-left-color: #d33333; background: #fbeaea; }
.toast.success { border-left-color: #2fa84f; background: #eef8ef; }
.toast-title { font-weight: 600; color: #22593a; display: flex; justify-content: space-between; }
.toast-close {
  background: transparent; border: none; cursor: pointer;
  color: #888; font-size: 15px; padding: 0 0 0 8px;
}
.toast-close:hover { color: #222; }
.toast-body  { color: #444; font-size: 12px; line-height: 1.35; }
.toast-body .mono { font-size: 11px; }
.toast-progress {
  height: 3px; background: #e0e0e0; border-radius: 2px; overflow: hidden; margin-top: 4px;
}
.toast-progress-bar {
  height: 100%; background: #22593a; width: 0%; transition: width 0.3s;
}
.toast-actions { display: flex; gap: 6px; margin-top: 6px; }
.toast-actions .btn-mini { font-size: 11px; padding: 2px 6px; }

/* Startseite Projektliste */
.project-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.project-card {
  padding: 16px 20px; border: 1px solid #ddd; background: white;
  border-radius: 6px; cursor: pointer; text-decoration: none; color: #222;
}
.project-card:hover { border-color: #22593a; background: #f9fbf9; }
.project-card h4 { margin: 0 0 4px 0; color: #22593a; font-size: 15px; font-weight: 500; }
.project-card p { margin: 0; font-size: 12px; color: #888; }

/* ---------- Dokumente: Ordner-Gruppen (details/summary) ---------- */
.doc-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.btn-mini {
  background: white; border: 1px solid #ccc; color: #444;
  padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 12px;
}
.btn-mini:hover { border-color: #22593a; color: #22593a; }

details.doc-group {
  border: 1px solid #e0e0e0; border-radius: 4px;
  margin-bottom: 8px; background: white;
}
details.doc-group[open] { border-color: #22593a; }
details.doc-group > summary {
  padding: 10px 14px; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  list-style: none; background: #f6f6f6;
}
details.doc-group[open] > summary { background: #eef4f0; border-bottom: 1px solid #d5e3db; }
details.doc-group > summary::-webkit-details-marker { display: none; }
details.doc-group > summary::before {
  content: "▶"; color: #22593a; font-size: 10px;
  transition: transform 0.15s; display: inline-block; width: 12px;
}
details.doc-group[open] > summary::before { transform: rotate(90deg); }
.doc-folder-icon { font-size: 14px; }
.doc-folder-name { flex: 1; color: #22593a; font-weight: 500; word-break: break-all; }
.doc-folder-counts { display: flex; gap: 4px; flex-wrap: wrap; }
.pill-count {
  background: #fff; border: 1px solid #d0d0d0; color: #555;
  font-size: 11px; padding: 2px 6px; border-radius: 10px;
}
.pill-total { background: #22593a; color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.doc-group-body { padding: 8px 12px 4px 12px; }
.doc-group-body .item-card { margin-bottom: 6px; }

/* ---------- Dokumente-Header mit Drop-Zone ---------- */
.doc-header {
  display: grid; grid-template-columns: 1fr 360px; gap: 20px;
  align-items: start; margin-bottom: 14px;
}
.doc-header h2 { margin: 0 0 4px 0; }
.dropzone {
  border: 2px dashed #c0c8c0; border-radius: 6px;
  padding: 14px 16px; text-align: center; cursor: pointer;
  background: #fafcfa; transition: all 0.15s;
}
.dropzone:hover { border-color: #22593a; background: #f0f6f2; }
.dropzone.hot { border-color: #22593a; background: #e0f0e6; }
.np-picker-row { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.dropzone-icon { font-size: 26px; margin-bottom: 4px; }
.dropzone-title { font-weight: 500; color: #22593a; margin-bottom: 2px; }
.dropzone-sub { font-size: 11px; line-height: 1.35; }

.dz-status {
  margin-bottom: 14px; padding: 10px 14px; border-radius: 4px;
  border: 1px solid #ddd; background: white; font-size: 13px;
}
.dz-status.uploading { border-color: #f0a020; background: #fff8e6; }
.dz-status.success   { border-color: #22593a; background: #eef4f0; }
.dz-status.error     { border-color: #d33333; background: #fbeaea; }
.dz-status ul { margin: 4px 0 4px 20px; padding: 0; }
.dz-status li { list-style: disc; font-size: 12px; }