/* ═══════════════════════════════════════════════════════════════════════════════
 * ARBEITSPLATZ · ÜBERSICHT (Startseite) — Namespace `.wp-`.
 *
 * Ausschließlich Tokens aus design-system.css: keine Hex-Farben, keine rohen
 * Abstände/Schriftgrößen. Rohe px stehen nur dort, wo es um echte Layoutmaße
 * geht (Breite der Zeitspalte und der Seitenleiste, Rahmenstärke, Kontrollkästchen).
 *
 * GESTALTUNGSIDEE — die Fristenachse:
 *   Der Arbeitstag in der Immobilienverwaltung wird von TERMINEN regiert
 *   (Prüffristen, Wiedervorlagen, Nachfassdaten), nicht von Kategorien. Die
 *   Seite bildet deshalb eine durchgehende Zeitachse ab: links der Tagesversatz
 *   (−6 T · heute · +5 T), quer darüber EINE goldene Heute-Linie. Darüber ist
 *   überfällig, darunter steht noch an. Gold ist der CI-Akzent (max. ~5 % Fläche)
 *   und wird auf dieser Seite AUSSCHLIESSLICH für „jetzt" verwendet.
 *   Was kein Datum trägt (neue Tickets, offene Vorgänge), gehört nicht in einen
 *   Tagesplan und steht darunter in einer eigenen ruhigen Karte „Ohne Termin".
 *
 * Rechts, bewusst leise: die zentrale Arbeitsliste (objektgefiltert, teamweit)
 * als schmale Leiste — Zeilen mit Zähler, keine Kachelwand.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.wp { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); }

/* ── Zweispaltiges Grundraster ─────────────────────────────────────────────── */
.wp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.wp-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.wp-rail { position: sticky; top: var(--space-3); }

/* Spaltenkopf: Überschrift + (links) Primäraktion / (rechts) Objektkontext */
.wp-colhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: var(--space-6); }
.wp-h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--vi-ink); letter-spacing: -.01em; }

/* ── Karte ─────────────────────────────────────────────────────────────────── */
.wp-card {
  background: var(--color-surface); border: 1px solid var(--vi-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.wp-card-h {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--vi-border);
}
.wp-card-h h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--vi-ink); }

/* ══ SIGNATUR · FRISTENACHSE ═══════════════════════════════════════════════ */
.wp-spine { --wp-gutter: 74px; padding-bottom: var(--space-2); }

/* Zeile = Zeitspalte │ Inhalt │ Aktionen. Die Achse (Rahmen der Zeitspalte)
   läuft ununterbrochen durch; die feinen Trenner liegen NUR im Inhalt. */
.wp-srow { display: grid; grid-template-columns: var(--wp-gutter) minmax(0, 1fr) auto; align-items: stretch; }
.wp-srow:hover > * { background: var(--color-cream); }

.wp-off {
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
  border-right: 1px solid var(--gray-300);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum";
  color: var(--vi-muted); white-space: nowrap;
}
.wp-off--over { color: var(--color-danger-ink); }
.wp-off--now  { color: var(--color-gold-ink); }

.wp-sbody {
  display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0;
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--gray-100);
}
.wp-sact {
  display: flex; align-items: flex-start; gap: var(--space-1); flex-shrink: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-top: 1px solid var(--gray-100);
  opacity: 0; transition: opacity var(--transition);
}
.wp-srow:hover .wp-sact, .wp-srow:focus-within .wp-sact { opacity: 1; }
@media (hover: none) { .wp-sact { opacity: 1; } }
.wp-srow--first .wp-sbody, .wp-srow--first .wp-sact { border-top: 0; }

/* Zonentitel über den überfälligen Zeilen — das einzige Versalien-Element */
.wp-eyebrow {
  padding: var(--space-3) var(--space-4) var(--space-1) calc(var(--wp-gutter) + var(--space-3));
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-danger-ink);
}

/* Die Heute-Linie: der Anker der ganzen Seite */
.wp-now { display: grid; grid-template-columns: var(--wp-gutter) minmax(0, 1fr); align-items: stretch; }
.wp-now-l {
  display: flex; justify-content: flex-end; align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-right: 1px solid var(--gray-300);
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-gold-ink);
}
.wp-now-r { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); }
.wp-now-rule { flex: 1; height: 2px; background: var(--color-gold); border-radius: 1px; transform-origin: left center; }
.wp-now-d { font-size: var(--text-xs); color: var(--color-gold-ink); font-variant-numeric: tabular-nums; }

/* Ein einziger orchestrierter Moment: die Heute-Linie zieht sich beim ersten
   Aufbau der Seite auf. Kein Nachziehen bei jedem Neuladen nach einer Aktion. */
@keyframes wp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wp-anim .wp-now-rule { animation: wp-draw 420ms cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .wp-anim .wp-now-rule { animation: none; } }

/* ── Zeileninhalt (Achse und „Ohne Termin" teilen sich diese Bausteine) ────── */
.wp-t { flex: 1; min-width: 0; }
.wp-t--click { cursor: pointer; }
.wp-t-h { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--vi-ink); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.wp-t-h .wp-ref { font-variant-numeric: tabular-nums; color: var(--color-sage); font-weight: var(--fw-semibold); }
.wp-t-m {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1); font-size: var(--text-xs); color: var(--vi-muted); line-height: var(--lh-snug);
}
.wp-t-m a { color: var(--color-sage); text-decoration: none; }
.wp-t-m a:hover { text-decoration: underline; }
.wp-t-m .wp-sep { color: var(--gray-300); }
.wp-t-m .wp-kind { font-weight: var(--fw-semibold); color: var(--vi-ink-70); }
/* Objektbezug — steht in JEDER Zeile an erster Stelle und trägt mehr Gewicht als
   der übrige Zeilentext, damit die Liste nach Objekten abtastbar bleibt.
   Fehlt er, wird das benannt (Datenlücke sichtbar machen, nicht verschweigen). */
.wp-t-m .wp-obj { font-weight: var(--fw-semibold); color: var(--vi-ink-70); }
.wp-t-m .wp-obj--none { font-weight: var(--fw-normal); font-style: italic; color: var(--vi-muted); }
.wp-t-m .wp-warn { color: var(--color-danger-ink); font-weight: var(--fw-semibold); }

.wp-chk { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-sage); cursor: pointer; }

.wp-mini {
  border: 1px solid var(--vi-border); background: var(--color-surface); color: var(--vi-ink-70);
  border-radius: var(--radius-sm); font: inherit; font-size: var(--text-xs); font-weight: var(--fw-medium);
  padding: var(--space-1) var(--space-2); cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.wp-mini:hover { background: var(--color-sage-soft); border-color: var(--color-sage); color: var(--color-forest); }
.wp-mini:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── „Ohne Termin" — stehender Bestand, kein Tagesplan ─────────────────────── */
/* Bewusst KEINE Versalien: Versalien markieren auf dieser Seite nur die zwei
   Grenzen der Zeitachse (Überfällig · Heute) und die Gruppen der rechten Leiste.
   Innerhalb einer Karte mit Kopfzeile wären sie doppelte Betonung. */
.wp-group {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--vi-ink-70);
}
.wp-group + .wp-row { margin-top: 0; }
.wp-row + .wp-group { border-top: 1px solid var(--gray-100); margin-top: var(--space-2); padding-top: var(--space-3); }
.wp-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-4); transition: background var(--transition); }
.wp-row:hover { background: var(--color-cream); }
.wp-row-act { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; opacity: 0; transition: opacity var(--transition); }
.wp-row:hover .wp-row-act, .wp-row:focus-within .wp-row-act { opacity: 1; }
@media (hover: none) { .wp-row-act { opacity: 1; } }

/* ── Zentrale Arbeitsliste (rechte Leiste) ─────────────────────────────────── */
.wp-tag {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--color-sage-hover); background: var(--color-sage-soft);
  border-radius: var(--vi-r-pill); padding: 2px var(--space-2);
}
.wp-wl-body { padding: var(--space-2) 0; }
.wp-wl-g + .wp-wl-g { margin-top: var(--space-2); border-top: 1px solid var(--gray-100); padding-top: var(--space-2); }
.wp-wl-gl {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--vi-muted);
}
.wp-wl.is-active { background: var(--color-sage-soft); border-left-color: var(--color-sage); color: var(--color-forest); font-weight: var(--fw-semibold); }
.wp-wl-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wp-n {
  flex-shrink: 0; min-width: var(--space-5); text-align: center;
  padding: 2px var(--space-2); border-radius: var(--vi-r-pill);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
  background: var(--gray-100); color: var(--vi-ink-70);
}
.wp-n--accent { background: var(--color-sage-soft); color: var(--color-sage-hover); }

/* ── Fokusliste (geöffnete Kategorie der zentralen Arbeitsliste) ───────────── */
.wp-focus .wp-card-h { background: var(--color-sage-soft); border-bottom-color: var(--color-sage-soft); }
.wp-focus-eyebrow { font-size: var(--text-xs); color: var(--color-sage-hover); }
.wp-focus .wp-n { margin-left: auto; }
.wp-x {
  margin-left: var(--space-2); border: 0; background: none; color: var(--vi-ink-70);
  font: inherit; font-size: var(--text-lg); line-height: 1; cursor: pointer;
  padding: 0 var(--space-1); border-radius: var(--radius-sm);
}
.wp-x:hover { color: var(--vi-ink); background: var(--color-surface); }
.wp-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wp-error { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-danger-ink); }

/* ── Schmalere Fenster: Leiste unter den Tagesplan, nicht daneben ──────────── */
@media (max-width: 1180px) {
  .wp-grid { grid-template-columns: minmax(0, 1fr); }
  .wp-rail { position: static; }
}
@media (max-width: 700px) {
  .wp-spine { --wp-gutter: 56px; }
  .wp-off { padding-left: var(--space-2); }
  .wp-srow { grid-template-columns: var(--wp-gutter) minmax(0, 1fr); }
  .wp-sact { grid-column: 2; padding: 0 var(--space-3) var(--space-3); border-top: 0; }
  .wp-card-h, .wp-row { padding-left: var(--space-3); padding-right: var(--space-3); }
}


/* ── UX-Phase 7 §3/§5/§7: Arbeitsplatz als A5-Workbench ──────────────────────
   Der Umfangsschalter benennt, wessen Zahlen die Seite führt. Die zentrale
   Arbeitsliste kommt als Metric-Zeilen aus der Bausteinschicht — die frühere
   Eigenbau-Zeile `.wp-wl` ist dafür entfallen (ihr CSS räumt Phase 9). */
.wp-scopebar {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.wp-scope-l {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--gray-600); letter-spacing: .02em;
}
/* Scope-Merker an JEDER Spaltenüberschrift: „Meine" bzw. „Team" (§7). Ohne ihn
   stünden persönliche und teamweite Zahlen unbeschriftet nebeneinander — genau
   der Widerspruch, den Phase 7 auflöst. */
.wp-scope {
  flex: 0 0 auto; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); background: var(--gray-100);
  color: var(--gray-600); font-size: var(--text-xxs);
  font-weight: var(--fw-medium); letter-spacing: .02em; line-height: 1.9;
}
.wp-colhead { flex-wrap: wrap; }
.wp-colhead .wp-h2 { flex: 0 0 auto; }
.wp-colhead .btn-primary { margin-left: auto; }

/* Umfang „Team": die Arbeitsliste bekommt den Platz, „Mein Tag" wird zur Leiste.
   Es wechseln NUR Breite und Reihenfolge — beide Sichten bleiben sichtbar, damit
   keine Zahl verschwindet, nur weil sie gerade nicht führt. */
.wp-grid.is-team { grid-template-columns: 340px minmax(0, 1fr); }
.wp-grid.is-team .wp-col--mine { order: 1; position: sticky; top: var(--space-3); }
.wp-grid.is-team .wp-col--team { order: 2; position: static; }

/* Die geöffnete Kategorie ist in der Metric-Liste markiert. */
#mat-worklist .vic-mtr-i.is-active {
  background: var(--color-sage-soft);
  box-shadow: inset 3px 0 0 var(--color-sage);
}

@media (max-width: 1099px) {
  .wp-grid.is-team { grid-template-columns: minmax(0, 1fr); }
  .wp-grid.is-team .wp-col--mine { position: static; }
}