/* ════════════════════════════════════════════════════════════════════════════
   ARBEITSFLÄCHEN — Schale und Referenzansichten (Redesign 11/2026, Phase C/D)
   ────────────────────────────────────────────────────────────────────────────
   Dichte und Ruhe für Kopfzeile, Modulleiste, Filter, Liste, Vorgangsdetail und
   Arbeitsplatz. Ausschließlich Tokens (check-design 9F). Lädt als LETZTES
   Stylesheet — deshalb gewinnt hier gleiche Spezifität, ohne `!important`.

   WARUM EINE EIGENE DATEI: Kopfzeile und Vorgangsansichten sind über style.css,
   vi-canonical.css und ui-standard.css verteilt und dort mehrfach definiert.
   Diese Datei ist die EINE Stelle, an der die Gestaltung der Referenzansichten
   steht. Nach der Freigabe (Phase E) werden die überschriebenen Altregeln an ihrem
   Ursprung entfernt und diese Datei entsprechend kleiner.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Kopfzeile: eine ruhige Zeile, höchstens EINE Fläche fällt auf ─────────── */

.topbar { padding: 0 var(--space-4) 0 var(--space-5); gap: var(--space-3); }

.breadcrumb { font-size: var(--text-md); }

.breadcrumb .breadcrumb-link { color: var(--gray-700); font-weight: var(--fw-medium); text-decoration: none; }

.breadcrumb .breadcrumb-link:hover { color: var(--color-forest); text-decoration: underline; }

.topbar-search { height: var(--control-h-sm); max-width: 360px; border-width: 1px; background: var(--color-surface); }

.topbar-right { gap: var(--space-1); }

.topbar-clock {
  border-color: transparent; background: transparent;
  height: var(--control-h-sm); padding: 0 var(--space-2);
}

.topbar-clock:hover { background: var(--gray-100); border-color: transparent; }

.topbar-clock .tc-time { font-size: var(--text-sm); font-weight: var(--fw-semibold); }

.topbar-icon-btn {
  width: var(--control-h-sm); height: var(--control-h-sm);
  border-color: transparent; background: transparent; border-radius: var(--radius-md);
}

.topbar-icon-btn:hover { background: var(--gray-100); border-color: transparent; }

/* „+ Neu" ist die globale Zweitaktion. Die eine Primäraktion der Seite steht im
   Modulkopf; zwei gefüllte Knöpfe übereinander hätten keinen Rang mehr. */

.topbar-btn.topbar-btn-primary {
  height: var(--control-h-sm); padding: 0 var(--space-3); margin-left: var(--space-1);
  background: var(--color-surface); color: var(--gray-900);
  border-color: var(--gray-300); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: 0;
}

.topbar-btn.topbar-btn-primary:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-900); }

/* ── Modulleiste: Reiter links, Darstellung und Primäraktion rechts ────────── */

.vmod-seg { padding: 2px; border-radius: var(--radius-md); background: var(--gray-100); border: 0; }

.vmod-seg-btn {
  height: var(--row-h-compact); padding: 0 var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--fw-medium);
}

.vmod-seg-btn.is-active { box-shadow: 0 0 0 1px var(--border-hair); }

.vmod-action.btn-primary, .vmod-head .btn-primary {
  height: var(--control-h-sm); min-height: 0; padding: 0 var(--space-3);
  font-size: var(--text-sm); border-radius: var(--radius-md);
}

.vmod-head .btn-ghost, .vmod-head .btn-secondary {
  height: var(--control-h-sm); min-height: 0; padding: 0 var(--space-3); font-size: var(--text-sm);
}

/* ══ LAYOUTFAMILIE A · DATA WORKSPACE (Vorgangsübersicht als Referenz) ═════════
   Vier Steuerzeilen mit gemischten Höhen werden zwei Zeilen plus Listenkopf:
   Umfang + Status · Suche + Filter + Sortierung · Anzahl + Werkzeuge. */

.vif { gap: var(--space-2); margin-bottom: var(--space-2); }

.vif-l1 { gap: var(--space-2); }

.vif-status-wrap { flex: 0 1 auto; }

.vif-status-wrap > .vif-l1-l { display: none; }

.vif-views { padding: 2px; border-radius: var(--radius-md); }

.vif-view {
  height: var(--row-h-compact); padding: 0 var(--space-3);
  font-size: var(--text-sm); font-weight: var(--fw-medium); border-radius: var(--radius-sm);
}

.vif-view.is-active { box-shadow: 0 0 0 1px var(--border-hair); }

.vif-saved-btn { height: var(--control-h-md); font-size: var(--text-sm); border-radius: var(--radius-md); }

.vif-status { gap: var(--space-1); }

/* Status ist Auswahl, kein Alarm: gesetzter Filter = Auswahlfläche, nicht Schwarz. */

.vif-pill {
  height: var(--control-h-md); padding: 0 var(--space-2);
  border-radius: var(--radius-md); font-size: var(--text-sm);
}

.vif-pill.is-active {
  background: var(--green-50); border-color: var(--green-200);
  color: var(--green-700); font-weight: var(--fw-medium);
}

.vif-pill.is-active .vif-dot { box-shadow: none; }

/* Werkzeuge sind leise: sie bedienen die Tabelle, sie konkurrieren nicht mit ihr. */

/* Marken in der Zeile sind Text, keine bunten Pillen. */

/* Handlungsbedarf in der Zeile: Punkt und Wort. Eine getönte Kachel je Zeile wäre
   bei einer Liste, in der vieles offen ist, eine Fläche aus lauter Warnfarbe. */

/* Status in der Zeile bleibt direkt änderbar; er sieht aus wie ein Wert. */

.csd-btn {
  width: auto; max-width: 100%; height: 24px; min-height: 0;
  padding: 0 var(--space-4) 0 6px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  background-position: right 5px center;
}

/* ══ VORGANGSDETAIL · Kopf und Reiter ══════════════════════════════════════════ */

.page-vorgang-detail, .workspace-main, .page-vorgang-detail .workspace-tab-contents { background: var(--color-canvas); }

.page-vorgang-detail #vorgang-detail-container { padding-inline: 0; }

.page-vorgang-detail .vic-eh {
  margin: 0; padding: var(--space-3) var(--page-pad-x) var(--space-2);
  background: var(--color-surface); border-bottom: 0; row-gap: var(--space-1);
}

.page-vorgang-detail .vic-eh-t { margin-left: calc(-1 * var(--space-1)); padding: 0 var(--space-1); }

.page-vorgang-detail .vic-eh-top { min-height: 0; }

.page-vorgang-detail .vic-eh-meta { margin-top: var(--space-1); margin-left: calc(-1 * var(--space-1)); }

.page-vorgang-detail .case-more-btn { width: var(--control-h-sm); height: var(--control-h-sm); min-height: 0; padding: 0; border-color: transparent; }

.page-vorgang-detail .vic-eh-foot { margin-top: 2px; }

.page-vorgang-detail .vic-eh-id { height: 24px; background: transparent; padding: 0; font-size: var(--text-sm); }

.page-vorgang-detail #ws-tabbar {
  flex: 0 0 auto; padding: 0 var(--page-pad-x);
  background: var(--color-surface); border-bottom: 1px solid var(--border-hair);
}

.page-vorgang-detail #ws-tabbar .vi-tabs { margin: 0; border: 0; background: transparent; box-shadow: none; }

.page-vorgang-detail .vi-tab { height: var(--control-h-lg); min-height: 0; font-size: var(--text-sm); padding: 0 var(--space-3); }

.page-vorgang-detail .workspace-tab-contents { padding: var(--space-3) var(--page-pad-x) var(--space-5); }

.page-vorgang-detail .workspace-section { max-width: none; }

/* Felder im Kopf sind Werte, die sich ändern lassen — kein Knopfband.
   Die Statusfarbe bleibt am Status; alles andere ist ruhiger Text. */

.case-metachips { gap: 2px var(--space-1); }

.case-metachips .meta-chip {
  height: 24px; min-height: 0; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--fw-medium);
}

.case-metachips .meta-chip:not([class*="status"]):not([class*="prio"]) { background: transparent; border-color: transparent; color: var(--gray-700); }

.case-metachips .meta-chip:not([class*="status"]):not([class*="prio"]):hover { background: var(--gray-100); }

@media (max-width: 767px) {
  .page-vorgang-detail .vic-eh-t { white-space: normal; flex-basis: 100%; }
}

/* ══ VORGANG · ÜBERSICHT ═══════════════════════════════════════════════════════
   Eine Karte ist eine fachliche Gruppe mit EINER Kante. Innen gliedern Zeilen,
   keine weitere Fläche (kein Karte-in-Karte beim Objektbezug). */

.vi-ov .cov-cols { gap: var(--space-3); grid-template-columns: minmax(0, 1fr) 320px; }

.vi-ov .cov-col { gap: var(--space-3); }

@media (max-width: 1100px) {
  .vi-ov .cov-cols { grid-template-columns: minmax(0, 1fr); }
}

.vi-sum-card {
  box-shadow: none; border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); background: var(--color-surface);
}

.vi-sum-card-head { min-height: 0; margin-bottom: var(--space-2); }

.vi-sum-card-title {
  font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--gray-900);
  text-transform: none; letter-spacing: 0; margin-bottom: var(--space-2);
}

.vi-sum-card-head .vi-sum-card-title { margin-bottom: 0; }

.vi-sum-card-head .btn-ghost { height: var(--row-h-compact); min-height: 0; padding: 0 var(--space-2); font-size: var(--text-xs); border-color: transparent; color: var(--gray-700); }

.vi-sum-card-head .btn-ghost:hover { background: var(--gray-100); }

.vi-sum-desc { font-size: var(--text-md); line-height: var(--lh-normal); }

.vi-sum-row { padding: var(--space-1) 0; font-size: var(--text-sm); }

.vi-sum-objcard .workspace-object {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 var(--space-2);
}

.vi-sum-objcard { margin-bottom: var(--space-1); }

.vi-sum-objcard .workspace-object-name { font-size: var(--text-md); }

.vi-sum-objcard .workspace-object-address { font-size: var(--text-xs); }

.cov-quick__btn { min-height: 0; height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }

.vi-mini-row { padding: var(--space-1) 0; min-height: 0; }

.vi-mini-t { font-size: var(--text-sm); font-weight: var(--fw-normal); }

.vi-mini-s { font-size: var(--text-xs); }

.vi-mini-date { font-size: var(--text-xs); }

.kiu-host .vic-alert { padding: var(--space-2) var(--space-3); border: 0; background: transparent; font-size: var(--text-sm); }

/* ══ LAYOUTFAMILIE B · VERLAUF (Liste links, Lesebereich rechts) ═══════════════ */

/* Titel in Zeile 1, Zeit und Marker gemeinsam in Zeile 2 — zwei statt drei Zeilen je Eintrag. */

/* ══ LAYOUTFAMILIE D · ARBEITSPLATZ ════════════════════════════════════════════
   Eine Zeile je Sachverhalt: Frist · Titel · Objekt · Vorgang. Die Fristenachse
   bleibt die Ordnung der Seite; Gold steht weiter nur für „jetzt". */

#mat-focus:empty { display: none; }

#mat-body { display: flex; flex-direction: column; gap: var(--space-3); }

/* ══ VORGANG · ARBEIT — eine Liste, zwei Zeilen je Eintrag ═════════════════════ */

/* ══ NACHBESSERUNG PHASE D ═════════════════════════════════════════════════════ */

/* Status ist kein Alarm: „Neu" ist weiß mit Rand, „Erledigt" tritt zurück. */

.csd-btn.status-neu { color: var(--gray-900); background-color: var(--color-surface); box-shadow: inset 0 0 0 1px var(--gray-300); }

.csd-btn.status-inbearbeitung { color: var(--green-700); background-color: var(--green-50); }

.csd-btn.status-erledigt { color: var(--gray-700); background-color: var(--gray-100); }

.meta-chip.meta-chip-status.status-neu { background: var(--color-surface); border-color: var(--gray-300); }

.meta-chip.meta-chip-status.status-inbearbeitung { background: var(--green-50); border-color: var(--green-200); }

.meta-chip.meta-chip-status.status-erledigt { background: var(--gray-100); border-color: var(--gray-200); }

.cases-next { display: block; max-width: 100%; font-size: var(--text-xs); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cases-next .vi-tbl-sub { display: inline; }

.cases-next .is-over { color: var(--color-danger-ink); }

/* ── Arbeitsplatz: strukturierte Liste statt Fließtext ─────────────────────── */

#mat-worklist, #wp-rail-mine { gap: var(--space-2); }

/* ── Vorgang · Übersicht: der Sachverhalt führt ───────────────────────────── */

.vi-sum-card--lead { padding: var(--space-4) var(--space-5); }

.vi-sum-card--lead .vi-sum-card-title { font-size: var(--text-lg); }

.vi-sum-card--lead .vi-sum-desc { font-size: var(--text-base); line-height: 1.55; color: var(--gray-900); max-width: 72ch; }

.vi-sum-next {
  display: flex; align-items: baseline; gap: var(--space-2); width: 100%;
  margin-top: var(--space-3); padding: var(--space-2) 0 0;
  border: 0; border-top: 1px solid var(--border-hair); background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}

.vi-sum-next-k { flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--gray-500); }

.vi-sum-next-v { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vi-sum-next-d { flex: 0 0 auto; font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; }

.vi-sum-next:hover .vi-sum-next-v { color: var(--color-forest); text-decoration: underline; }

.cov-quick { align-items: center; gap: var(--space-2) var(--space-3); }

.cov-quick__g { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.cov-quick__g + .cov-quick__g { padding-left: var(--space-3); border-left: 1px solid var(--border-hair); }

.kiu-aus { padding: 0 var(--space-1); font-size: var(--text-xs); color: var(--gray-500); }

.kiu-host:empty { display: none; }

.vi-mini-row { gap: var(--space-2); padding: 6px 0; min-height: 44px; }

.vi-mini-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-md);
  background: var(--green-50); color: var(--green-700);
}

.vi-mini-ic svg { width: 14px; height: 14px; }

.vi-feed--doc .vi-mini-ic { background: var(--gray-100); color: var(--gray-700); }

.vi-feed--work .vi-mini-ic { background: transparent; color: var(--gray-500); }

.vi-mini-row:not(.vi-feed--sys) .vi-mini-t { font-weight: var(--fw-medium); }

.vi-feed--work .vi-mini-t { font-weight: var(--fw-normal); }

.vi-mini-date { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gray-500); }

.vi-feed--sys { min-height: 28px; padding: 2px 0; }

.vi-feed--sys .vi-mini-ic { height: 4px; width: 26px; background: transparent; }

.vi-feed--sys .vi-mini-ic::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--gray-300); }

.vi-feed--sys .vi-mini-t { font-size: var(--text-xs); color: var(--gray-500); }

/* Rechte Spalte: leere Karten sind eine Zeile, Wege sind leise. */

.ws-obj-add { width: auto; margin-top: 0; padding: 2px 0; border: 0; background: transparent; justify-content: flex-start; }

.ws-obj-add:hover { background: transparent; text-decoration: underline; }

.ws-obj-extra:has(.ws-obj-add:only-child) { padding: 0; }

.vi-cf-unlinked { justify-content: space-between; flex-wrap: nowrap; }

.vi-sum-unset { font-size: var(--text-sm); color: var(--gray-500); }

.vi-cf-unlinked .btn-ghost, .cx-card-empty-acts .btn-ghost {
  height: var(--row-h-compact); min-height: 0; padding: 0 var(--space-1);
  border: 0; background: transparent; font-size: var(--text-xs); color: var(--color-forest);
}

.vi-cf-unlinked .btn-ghost:hover, .cx-card-empty-acts .btn-ghost:hover { background: transparent; text-decoration: underline; }

.cx-card-empty { padding: 0; }

.cx-card-empty-txt { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--gray-500); }

.cx-card-empty-acts { margin-top: 0; gap: 0 var(--space-3); }

/* ── Vorgang · Arbeit: zwei Filtergruppen, feste Spalten ──────────────────── */

/* ── Verlauf: Kommunikation führt, System tritt zurück ────────────────────── */

/* ══ Tablet ════════════════════════════════════════════════════════════════════ */

.vmod-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

.vmod-seg::-webkit-scrollbar { display: none; }

/* ══ Smartphone: Vorgangskopf ══════════════════════════════════════════════════
   Titel, Nummer und Status in drei knappen Zeilen, Reiter wischbar, Inhalt früh. */

@media (max-width: 767px) {
  .page-vorgang-detail .vic-eh {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-1);
  }
  .page-vorgang-detail .vic-eh-top, .page-vorgang-detail .vic-eh-foot { display: contents; }
  .page-vorgang-detail .vic-eh-t {
    grid-column: 1; grid-row: 1; margin: 0; padding: 0; flex-basis: auto;
    font-size: var(--text-lg); line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .page-vorgang-detail .vic-eh-acts { grid-column: 2; grid-row: 1; align-self: start; width: auto; justify-content: flex-end; }
  .page-vorgang-detail .case-more-btn { width: 36px; height: 36px; }
  .page-vorgang-detail .vic-eh-id { grid-column: 1 / -1; grid-row: 2; height: auto; font-size: var(--text-xs); color: var(--gray-500); }
  .page-vorgang-detail .vic-eh-meta { grid-column: 1 / -1; grid-row: 3; margin: var(--space-1) calc(-1 * var(--space-3)) 0; padding: 0 var(--space-3); min-width: 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .page-vorgang-detail .vic-eh-meta::-webkit-scrollbar { display: none; }
  .page-vorgang-detail .vic-eh-m { flex: 0 0 auto; }
  .case-metachips { flex-wrap: nowrap; gap: var(--space-1); }
  .case-metachips .meta-chip { height: 36px; padding: 0 var(--space-2); white-space: nowrap; }
  .page-vorgang-detail .vic-eh-ctx { grid-column: 1 / -1; grid-row: 4; min-width: 0; font-size: var(--text-xs); margin-top: var(--space-1); }
  .page-vorgang-detail .vic-eh-at { grid-column: 1 / -1; grid-row: 5; }
  .page-vorgang-detail .vic-eh-at .vic-at { padding: 0; background: transparent; font-size: var(--text-xs); }
  .page-vorgang-detail #ws-tabbar { padding: 0; }
  .page-vorgang-detail #ws-tabbar .vi-tabs { padding: 0 var(--space-2); overflow-x: auto; scrollbar-width: none; }
  .page-vorgang-detail #ws-tabbar .vi-tabs::-webkit-scrollbar { display: none; }
  .page-vorgang-detail #ws-tabbar .vi-tab { min-height: calc(var(--control-h-lg) + var(--space-1)); padding: 0 var(--space-2); flex: 0 0 auto; }
  .page-vorgang-detail .vi-tab svg { display: none; }
  .page-vorgang-detail .workspace-tab-contents { padding: var(--space-2) var(--space-3) var(--space-5); }
  #workspace-tab-overview.case-tab-content { padding: 0; }
  .vi-ov .workspace-section, .vi-ov.workspace-section { padding-top: 0; }
  .vi-sum-card--lead { padding: var(--space-3); }
  .vi-sum-card--lead .vi-sum-card-title { font-size: var(--text-md); }
  .cov-quick__g + .cov-quick__g { padding-left: 0; border-left: 0; }
  .cov-quick__btn { height: var(--control-h-lg); }
  .vi-sum-next { flex-wrap: wrap; }
}

/* Zeilen sind keine Knöpfe mit Rundung; die Karte trägt die Form. */

.wp-crow, .vi-mini-row, .vi-sum-next { border-radius: 0; }

#mat-worklist .vic-mtr, #wp-rail-mine .vic-mtr { grid-template-columns: minmax(0, 1fr); }

.vi-cf-unlinked .btn-ghost, .cx-card-empty-acts .btn-ghost { padding-inline: 0; }

.cx-card-empty-acts { gap: 0 var(--space-2); }

@media (max-width: 767px) {
  .case-metachips { margin-left: 0; }
  .page-vorgang-detail .vic-eh-meta { margin-left: calc(-1 * var(--space-3)); }
  .vi-sum-next { flex-wrap: wrap; justify-content: space-between; }
  .vi-sum-next-v { order: 3; flex: 1 1 100%; white-space: normal; }
}

/* ══ 1024 px: nichts wird angeschnitten ═══════════════════════════════════════ */

@media (max-width: 1180px) {
  .page-vorgang-detail .vi-tab svg { display: none; }
}

@media (max-width: 767px) {
  .page-vorgang-detail .case-metachips { margin-left: 0; }
  .page-vorgang-detail .case-metachips .meta-edit-wrap:first-child { margin-left: 0; }
}

@media (max-width: 767px) {
  /* Der Objektbezug bleibt eine knappe Zeile, seine Trefffläche reicht über sie hinaus. */
  .page-vorgang-detail .case-obj-ctx { position: relative; }
  .page-vorgang-detail .case-obj-ctx::after { content: ''; position: absolute; inset: -11px 0; }
}

/* ══ VERLAUF: EINE DARSTELLUNG ═════════════════════════════════════════════════
   Links die Liste, rechts der Eintrag. Beide enden mit ihrem Inhalt, sie werden nicht
   auf Fensterhöhe aufgezogen: ein einzelner Eintrag steht ohne leere Rahmenfläche da.
   Nur eine E-Mail behält die volle Höhe, ihr Rahmen braucht ein festes Maß. */

/* Zeilenaktionen stehen auf Höhe der zweiten Zeile, die Vorschau bleibt frei. */

@media (max-width: 767px) {
  .page-vorgang-detail .vic-eh-meta { padding-left: calc(var(--space-3) + var(--space-1)); }
  body.vim-active .cw .vif-l1 { flex-wrap: wrap; overflow: visible; }
  body.vim-active .cw .vif-views { max-width: 100%; }
}

@media (max-width: 767px) {
  body.vim-active .cw .vif-l1::before { display: none; }
}