/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCore — GEBÄUDEBETRIEB · Wartungen & Prüfungen (public/betrieb/betrieb-massnahmen.css)
 * ───────────────────────────────────────────────────────────────────────────────
 * Namespace `.gbm-`. Nur Tokens aus css/design-system.css — keine Hexwerte, keine
 * rohen Pixel außer 0/1px-Linien. Liste = VITable, Filter = VIFilters, Zustände =
 * VIComponents, Dialoge = VIDialog. Hier steht nur, was KEIN Baustein anbietet:
 * die Ebene-1-Zeile mit eingehängten Statuschips, kleine Zellzusätze, die
 * Zeilenhervorhebung (Fokus/Rücksprung) und der Wartungsplan (Jahr · Monat).
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Ebene 1: Fachsicht · Statuschips · Gruppierung · Sichten in EINER Zeile ── */
.gbm-l1 { align-items: center; }
.gbm-l1-status { display: flex; flex: 1 1 auto; min-width: 0; }
.gbm-l1-status .vif-l1 { flex: 1 1 auto; min-width: 0; }
.gbm .gb-l1-right { flex: 0 0 auto; }
.gbm .gb-sicht-sel { max-width: calc(var(--space-8) * 5); }
/* Bis 1440 px ist die Zeile knapp: das Wort „Handlungsbedarf" vor den Chips entfällt
   (die Chips „Alle · Überfällig · Nachweis fehlt …" tragen ihre Bedeutung selbst, die
   Gruppe behält ihr aria-label), und der Sicht-Selector ist gedeckelt — so bleibt
   Ebene 1 auf 1366 px EINE Zeile. Derselbe Ausdruck wie in betrieb-anlagen.css (kein
   neuer Breakpoint): die Nachbartabs Anlagen und Wartungen verhalten sich gleich. */
@media (max-width: 1440px) {
  .gbm-l1-status .vif-l1-l { display: none; }
  .gbm .gb-sicht-sel { max-width: calc(var(--space-8) * 4); }
}
.gbm .vif-l1[hidden] { display: none; }
.gbm .gb-l1-right { gap: var(--space-3); }

/* ── Zellzusätze ───────────────────────────────────────────────────────────── */
.gbm-sv {
  display: inline-block; vertical-align: baseline; margin-left: var(--space-1);
  padding: 0 var(--space-1); border-radius: var(--radius-sm);
  font-size: var(--text-xxs); font-weight: var(--fw-semibold); line-height: var(--lh-normal);
  color: var(--color-info-ink); background: var(--color-info-soft);
}
.gbm-mangel {
  display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-1);
  border-radius: var(--radius-sm); font-size: var(--text-xxs); font-weight: var(--fw-semibold);
  color: var(--color-danger-ink); background: var(--color-danger-soft); white-space: nowrap;
}
.gbm-soll { color: var(--color-warning-ink); }
.gbm-hint { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--gray-700); }

/* Fokus (?fokus=) und Rücksprung (§56): dieselbe Sprache wie die Auswahl der Tabelle —
   Markenfläche + Balken links, aber ohne die Checkbox zu setzen. */
.gbm .vi-tbl-row.gbm-hilite > .vi-tbl-td { background: var(--green-50); }
.gbm .vi-tbl-row.gbm-hilite > .vi-tbl-td:first-child { box-shadow: inset calc(var(--space-1) * 0.75) 0 0 var(--brand-primary); }

/* ── Kalender: Kopf ───────────────────────────────────────────────────────── */
.gbm-kalkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-1) 0 var(--space-3); min-width: 0; }
.gbm-kalnav { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.gbm-kaltitel { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--gray-900); margin: 0 0 0 var(--space-2); white-space: nowrap; }
.gbm-kalmodus, .gbm-kalgruppe { display: flex; align-items: center; gap: var(--space-1); }
.gbm-kalmodus .vi-tool.is-active, .gbm-kalgruppe .vi-tool.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-text-on-primary); }

/* ── Wartungsplan: EINE Marke für jeden Zustand ───────────────────────────── */
/* Sie trägt ihre Aussage NICHT nur über die Farbe: gefüllt = Fälligkeit, gefüllt
   mit Haken = Termin vereinbart, gestrichelter Umriss = Turnusvorschau. */
.gbm-mk {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: var(--space-4); height: var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--text-xxs); font-weight: var(--fw-bold); line-height: 1;
}
.gbm-mk--crit   { background: var(--color-danger-soft);  color: var(--color-danger-ink);  border-color: var(--color-danger); }
.gbm-mk--warn   { background: var(--color-warning-soft); color: var(--color-warning-ink); border-color: var(--color-warning); }
.gbm-mk--ok     { background: var(--color-success-soft); color: var(--color-success-ink); border-color: var(--color-success); }
.gbm-mk--termin { background: var(--color-forest-soft);  color: var(--color-forest);      border-color: var(--color-forest); }
.gbm-mk--plan   { background: transparent; border-color: var(--gray-400); border-style: dashed; color: var(--gray-500); }

/* ── Legende — sie beschriftet die Marken, sie erklärt nicht die Seite ─────── */
.gbm-leg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.gbm-leg-i { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--gray-500); }
.gbm-leg-i .gbm-mk { min-width: var(--space-5); }
.gbm-fuss { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--gray-500); }

/* ── Jahresplan: Maßnahme × zwölf Monate ──────────────────────────────────── */
/* Jede Zeile ist ein eigenes Raster mit DERSELBEN Vorlage — so spannt der
   Bündelkopf über die volle Breite, ohne dass die Spalten auseinanderlaufen. */
.gbm-pl { --gbm-lead: calc(var(--space-8) * 4); min-width: 0; }
.gbm-pl-r { display: grid; grid-template-columns: var(--gbm-lead) repeat(12, minmax(0, 1fr)); gap: var(--space-1); align-items: stretch; }
.gbm-pl-h { position: sticky; top: 0; z-index: 1; background: var(--color-surface); padding-bottom: var(--space-1); border-bottom: 1px solid var(--gray-300); }
.gbm-pl-lead { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--space-1) / 2); min-width: 0; min-height: var(--row-h-normal); padding: var(--space-1) var(--space-2) var(--space-1) 0; }
.gbm-pl-lead--h { justify-content: flex-end; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--gray-500); }
.gbm-pl-t { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbm-pl-s { font-size: var(--text-xxs); color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Monatskopf = der Weg ins Monatsblatt. */
.gbm-pl-mh {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--space-1) / 2);
  min-width: 0; border: 0; background: transparent; padding: var(--space-1) 0;
  font-family: inherit; cursor: pointer; border-radius: var(--radius-sm);
}
.gbm-pl-mh:hover { background: var(--gray-100); }
.gbm-pl-mh:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gbm-pl-mn { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--gray-700); }
.gbm-pl-mz { font-size: var(--text-xxs); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.gbm-pl-mz.is-krit { color: var(--color-danger-ink); font-weight: var(--fw-semibold); }
.gbm-pl-mh.is-jetzt { background: var(--green-50); }
.gbm-pl-mh.is-jetzt .gbm-pl-mn { color: var(--brand-primary); }

/* Bündelkopf: das Objekt (bzw. die Anlage/Firma) steht hier — einmal, nicht je Zeile. */
.gbm-pl-gh {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  min-width: 0; margin-top: var(--space-4); padding: var(--space-1) 0;
  border-bottom: 1px solid var(--gray-200);
}
.gbm-pl-gt { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--gray-900); overflow-wrap: anywhere; }
.gbm-pl-gm { font-size: var(--text-xxs); color: var(--gray-500); }

.gbm-pl-row { border-bottom: 1px solid var(--gray-200); }
.gbm-pl-row:hover { background: var(--gray-50); }
.gbm-pl-c { display: flex; align-items: center; justify-content: center; min-width: 0; padding: var(--space-1) calc(var(--space-1) / 2); }
.gbm-pl-c.is-jetzt { background: var(--green-50); border-radius: var(--radius-sm); }
.gbm-mk--zelle { width: 100%; height: var(--control-h-sm); cursor: pointer; font-family: inherit; }
/* In der Monatszeile ist die Marke ein Ampelpunkt am Zeilenanfang — die Aussage im
   Klartext steht rechts als Handlungsbedarf; der Punkt macht die Karte überfliegbar
   und unterscheidet zusätzlich Termin (Haken) und Turnusvorschau (gestrichelt). */
.gbm-mk--zeile { min-width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); }
.gbm-mk--zelle:hover { filter: brightness(0.95); }
.gbm-mk--zelle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Monatsblatt: Monatsstreifen · Kennzahlen · Karten je Bündel ──────────── */
.gbm-mb-str { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-1); margin: 0 0 var(--space-3); }
.gbm-mb-chip {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: 0; min-height: var(--control-h-sm); padding: 0 var(--space-1); cursor: pointer; font-family: inherit;
  border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--color-surface);
}
.gbm-mb-chip:hover { border-color: var(--gray-400); }
.gbm-mb-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gbm-mb-chip.is-jetzt { border-color: var(--brand-primary); }
.gbm-mb-chip.is-aktiv { background: var(--brand-primary); border-color: var(--brand-primary); }
.gbm-mb-cm { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--gray-700); }
.gbm-mb-cn { font-size: var(--text-xxs); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.gbm-mb-cn.is-krit { color: var(--color-danger-ink); font-weight: var(--fw-semibold); }
.gbm-mb-chip.is-aktiv .gbm-mb-cm, .gbm-mb-chip.is-aktiv .gbm-mb-cn { color: var(--brand-text-on-primary); }

.gbm-mb { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.gbm-mb-l { display: flex; flex-direction: column; }
.gbm-mb-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--space-3); padding: var(--space-2) var(--space-3); cursor: pointer;
  border-top: 1px solid var(--gray-200); text-align: left;
}
.gbm-mb-l > .gbm-mb-row:first-child { border-top: 0; }
.gbm-mb-row:hover { background: var(--gray-50); }
.gbm-mb-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gbm-mb-txt { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); min-width: 0; }
.gbm-mb-t { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbm-mb-s { font-size: var(--text-xs); color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbm-mb-w { flex: 0 0 auto; min-width: calc(var(--space-8) * 2); text-align: right; font-size: var(--text-sm); }
.gbm-mb-a { flex: 0 0 auto; }
.gbm-mb-geplant { font-size: var(--text-sm); color: var(--gray-700); }

/* ── Breiten ──────────────────────────────────────────────────────────────── */
/* Dieselben Ausdrücke wie bisher (kein neuer Breakpoint). */
@media (min-width: 1600px) { .gbm-pl { --gbm-lead: calc(var(--space-8) * 5); } }
@media (max-width: 1280px) { .gbm-pl { --gbm-lead: calc(var(--space-8) * 3); } }

/* Mobil: der Jahresplan bleibt eine Matrix (dafür ist er da) und scrollt in
   seinem eigenen Bereich quer; das Monatsblatt wird zur Kartenliste. */
@media (max-width: 767px), (max-height: 540px) and (pointer: coarse) {
  .gbm-l1-status { flex: 0 0 auto; }
  .gbm-kaltitel { font-size: var(--text-base); }
  .gbm-pl { --gbm-lead: calc(var(--space-8) * 2.5); min-width: calc(var(--space-8) * 10); }
  .gbm-mb-str { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gbm-mb-chip { min-height: var(--control-h-lg); }
  .gbm-mb-row { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-1); }
  .gbm-mb-w, .gbm-mb-a { grid-column: 2; text-align: left; min-width: 0; }
}