/* Wartungs-Sektions-Panels (SPEC-0060) — Light-DOM-Port der Bestands-
   Styles core-frontend/components/wartung/wartung-panel.css + der je-Panel
   <style scoped>-Blöcke. Theme-Tokens only (--core-*), Touch-first Sizing.
   Anders als im Bestand (scoped attribute) sind die Selektoren hier global
   unter .wartung-panel — die Panels rendern Light DOM. */

/* ---- shared (wartung-panel.css 1:1) ---- */
.wartung-panel {
  display: flex;
  flex-direction: column;
  gap: var(--core-space-md, 0.75rem);
  min-height: 0;
}
.wartung-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--core-space-md, 0.75rem);
  flex-wrap: wrap;
}
.wartung-toolbar__filters {
  display: flex;
  align-items: center;
  gap: var(--core-space-sm, 0.5rem);
  flex-wrap: wrap;
}
.wartung-editor {
  display: flex;
  flex-direction: column;
  gap: var(--core-space-md, 0.75rem);
}
.wartung-editor__actions {
  display: flex;
  gap: var(--core-space-sm, 0.5rem);
}
.wartung-input {
  background: var(--core-color-surface, #fff);
  color: var(--core-color-text, inherit);
  border: 1px solid var(--core-color-border, #cbd5e1);
  border-radius: var(--core-radius-sm, 6px);
  padding: 0.5rem 0.6rem;
  font: inherit;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}
.wartung-input--sm { width: auto; min-width: 8rem; }
textarea.wartung-input { min-height: 64px; resize: vertical; }
.wartung-muted { color: var(--core-color-text-muted, #64748b); }
.wartung-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.wartung-table th,
.wartung-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--core-color-border, #e2e8f0);
  vertical-align: middle;
}
.wartung-table th {
  color: var(--core-color-text-muted, #64748b);
  font-weight: 600;
}
.wartung-mono { font-family: var(--core-font-mono, ui-monospace, monospace); }
.wartung-row-actions { display: flex; gap: var(--core-space-sm, 0.5rem); }
.wartung-interim-note {
  color: var(--core-color-text-muted, #64748b);
  font-size: 0.82rem;
}

/* ---- LiveFaultsPanel ---- */
.fault-list { display: flex; flex-direction: column; gap: var(--core-space-md, 0.75rem); }
.fault-card { display: flex; flex-direction: column; gap: var(--core-space-sm, 0.5rem); border-left: 4px solid var(--core-color-border, #e2e8f0); }
.fault-card--urgent { border-left-color: var(--core-color-danger, #dc2626); }
.fault-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--core-space-sm, 0.5rem); flex-wrap: wrap; }
.fault-card__path { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fault-card__breadcrumb { font-size: 0.8rem; }
.fault-card__counts { display: flex; gap: var(--core-space-sm, 0.5rem); flex-wrap: wrap; }
.fault-card__severity { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.85rem; }

/* ---- SuggestionsPanel ---- */
.suggestion-list { display: flex; flex-direction: column; gap: var(--core-space-md, 0.75rem); }
.suggestion-card { display: flex; flex-direction: column; gap: var(--core-space-sm, 0.5rem); }
.suggestion-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--core-space-sm, 0.5rem); flex-wrap: wrap; }
.suggestion-card__title { display: flex; align-items: center; gap: var(--core-space-sm, 0.5rem); flex-wrap: wrap; }
.suggestion-card__meta { display: flex; align-items: center; gap: var(--core-space-sm, 0.5rem); }
.suggestion-card__action { margin: 0; }
.suggestion-card__scope { display: flex; gap: 0.35rem; font-size: 0.85rem; }
.suggestion-card__evidence { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.85rem; }
.suggestion-card__actions { display: flex; gap: var(--core-space-sm, 0.5rem); }
.suggestion-card__linked { margin: 0; font-size: 0.85rem; }

/* ---- DashboardsPanel ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--core-space-md, 0.75rem);
}
.kpi-card { display: flex; flex-direction: column; gap: 0.35rem; }
.kpi-card__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--core-color-text-muted, #64748b);
}
.kpi-card__value { font-size: 1.65rem; line-height: 1.1; }
.chart-card { display: flex; flex-direction: column; gap: var(--core-space-sm, 0.5rem); }
.chart-card__head { font-weight: 600; }
.bar-chart { display: flex; flex-direction: column; gap: 0.4rem; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 1.2fr) 3fr auto; gap: 0.5rem; align-items: center; }
.bar-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.bar-row__track {
  background: color-mix(in srgb, var(--core-color-text, #64748b) 10%, transparent);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}
.bar-row__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--core-color-accent-blue, #2563eb);
}
.bar-row__fill--alt { background: var(--core-color-warning, #d97706); }
.bar-row__value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem; }

/* ---- ReportsPanel ---- */
.reports-hero { display: flex; flex-direction: column; gap: var(--core-space-md, 0.75rem); }
.reports-hero__info { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--core-space-md, 0.75rem); flex-wrap: wrap; }
.reports-hero__title { display: flex; align-items: center; gap: 0.6rem; }
.reports-hero__title .material-icons { font-size: 2rem; color: var(--core-color-accent-blue, #2563eb); }
.reports-hero__title div { display: flex; flex-direction: column; }
.reports-hero__path { font-size: 0.85rem; }
.reports-hero__badges { display: flex; gap: var(--core-space-sm, 0.5rem); flex-wrap: wrap; }
.reports-hero__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 52px;
  padding: 0 1.3rem;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  background: var(--core-color-accent-blue, #2563eb);
  color: var(--core-color-on-accent, #fff);
  align-self: flex-start;
}
.reports-views { display: flex; flex-direction: column; gap: var(--core-space-sm, 0.5rem); }
.reports-views__head { font-weight: 600; }
.reports-views__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.reports-views__item {
  border-radius: 12px;
  border: 1px solid var(--core-color-border, #e2e8f0);
}
.reports-views__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
a.reports-views__link { cursor: pointer; }
a.reports-views__link:hover,
a.reports-views__link:focus-visible {
  background: var(--core-color-surface-hover, rgba(37, 99, 235, 0.08));
  outline: none;
}

/* SPEC-0646 — Klasse B: nur ein Flaechenwechsel, von :hover nicht zu
   unterscheiden und im Kontrastmodus wirkungslos. Ring nachgezogen. */
a.reports-views__link:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.reports-views__link .material-icons { color: var(--core-color-text-muted, #64748b); }
.reports-views__meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.reports-views__go { color: var(--core-color-accent-blue, #2563eb) !important; margin-left: auto; }

/* ---- FaultLoggingPanel (HMI) ---- */
.fault-log { gap: var(--core-space-md, 0.75rem); }
.fault-log__banner { padding: 0.75rem 1rem; border-radius: 12px; font-weight: 600; }
.fault-log__banner--ok {
  background: color-mix(in srgb, var(--core-color-success, #16a34a) 16%, transparent);
  color: var(--core-color-success, #16a34a);
}
.fault-log__banner--err {
  background: color-mix(in srgb, var(--core-color-danger, #dc2626) 16%, transparent);
  color: var(--core-color-danger, #dc2626);
}
.fault-log__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--core-space-md, 0.75rem);
  align-items: start;
}
@media (max-width: 900px) {
  .fault-log__grid { grid-template-columns: 1fr; }
}
.hmi-surface {
  background: var(--core-color-surface, #fff);
  border: 1px solid var(--core-color-border, #e2e8f0);
  border-radius: 18px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  touch-action: pan-y pinch-zoom;
}
.hmi-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--core-color-text-muted, #64748b);
}
.fault-log__label { font-weight: 600; font-size: 0.92rem; margin-top: 0.35rem; }
.hmi-input {
  background: var(--core-color-surface, #fff);
  color: var(--core-color-text, inherit);
  border: 1px solid var(--core-color-border, #cbd5e1);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
}
.fault-log__row { display: flex; gap: var(--core-space-sm, 0.5rem); }
.fault-log__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fault-log__faults-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--core-space-sm, 0.5rem);
  margin-top: 0.35rem;
}
.fault-log__manage-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  color: var(--core-color-accent-blue, #2563eb);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem;
}
.fault-log__manage-link .material-icons { font-size: 1.1rem; }
.fault-log__empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.fault-log__empty > .material-icons { font-size: 2.2rem; color: var(--core-color-text-muted, #64748b); }
.fault-log__empty-cta { margin-top: 0.35rem; flex: 0 0 auto; }
.fault-log__faults { display: flex; flex-direction: column; gap: 0.7rem; }
.fault-log__fault-group { display: flex; flex-direction: column; gap: 0.45rem; }
.fault-log__fault-group-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: capitalize;
  color: var(--core-color-text-muted, #64748b);
}
.fault-log__fault-group-head .material-icons { font-size: 1.15rem; }
.fault-log__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.fault-log__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 84px;
  padding: 0.6rem;
  border-radius: 14px;
  border: 2px solid var(--core-color-border, #e2e8f0);
  background: var(--core-color-surface, #fff);
  color: var(--core-color-text, inherit);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.fault-log__tile .material-icons { font-size: 1.7rem; }
.fault-log__tile--fault { min-height: 96px; }
.fault-log__tile-name { font-size: 0.85rem; line-height: 1.2; text-align: center; }
.fault-log__tile.is-active {
  border-color: var(--core-color-accent-blue, #2563eb);
  background: color-mix(in srgb, var(--core-color-accent-blue, #2563eb) 12%, transparent);
}
.fault-log__submit-row { display: flex; gap: var(--core-space-sm, 0.5rem); margin-top: 0.6rem; }
.hmi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 54px;
  padding: 0 1.2rem;
  border-radius: 14px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  flex: 1 1 auto;
}
.hmi-btn--sm { min-height: 40px; font-size: 0.9rem; flex: 0 0 auto; padding: 0 0.9rem; }
.hmi-btn--primary {
  background: var(--core-color-accent-blue, #2563eb);
  color: var(--core-color-on-accent, #fff);
}
.hmi-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.hmi-btn--ghost {
  background: transparent;
  border-color: var(--core-color-border, #cbd5e1);
  color: var(--core-color-text, inherit);
}
.fault-log__open-head { display: flex; align-items: center; justify-content: space-between; gap: var(--core-space-sm, 0.5rem); }
.fault-log__open-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fault-log__open-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--core-space-sm, 0.5rem);
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid var(--core-color-border, #e2e8f0);
}
.fault-log__open-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

/* --- Schreibwege (SPEC-0138) --------------------------------------------- */
/* Inline-Editoren der Auftrags- und Plan-Panels (Bestand: VcCard + FieldGrid,
   kein Modal). Token-only. */
.wartung-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}
.wartung-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.wartung-field > span { font-size: 0.85rem; color: var(--core-color-text-muted, #64748b); }
.wartung-field--wide { grid-column: 1 / -1; }
.wartung-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--core-space-sm, 0.5rem);
}
.wartung-field--inline input[type='checkbox'] { width: 1.1rem; height: 1.1rem; }
.wartung-editor__actions { grid-column: 1 / -1; }
.fault-log__tile[disabled] { opacity: 0.55; cursor: not-allowed; }

/* --- Bewegung nachgezogen (Bestand FaultLoggingPanel.vue:494,
 * ReportsPanel.vue:183) — die Datei hatte keinen einzigen Übergang. */
.fault-card,
.chart-card {
  transition: border-color 120ms ease, background-color 120ms ease;
}

/* ====== SPEC-0646 — Windows-Kontrastmodus =============================== *
 * Edge/Chromium zeichnen unter `forced-colors: active` KEINEN `box-shadow`
 * und zwingen jede Rahmen- und Flaechenfarbe auf eine Systemfarbe. Damit
 * faellt jeder Fokusring dieses Blattes dort ersatzlos aus — der ring-lose
 * Rahmenwechsel ebenso, weil dann jeder Rahmen dieselbe Farbe traegt.
 * `outline` WIRD gezeichnet und ist das einzige Mittel, das dort traegt.
 * `Highlight` ist die Systemfarbe fuer Auswahl und hebt sich per Definition
 * vom `Canvas` des Nutzers ab; `outline-offset` haelt den Ring von der
 * eigenen Kante frei, die dort ebenfalls `CanvasText` traegt.
 * KEIN `forced-color-adjust: none` — das naehme dem Nutzer genau die
 * Farbwahl, um die es hier geht (SPEC-0646, Entscheidung E3).
 * ====================================================================== */
@media (forced-colors: active) {
  a.reports-views__link:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}