/* Nur Layout-Kleber; Farben, Abstände und Schrift kommen aus den Web-Awesome-Tokens. */

/* Komponenten setzen display selbst und überstimmen sonst das hidden-Attribut. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* Seitenränder: Inhalt bündig mit <main> (max. 64rem) */
.app-header, .total-bar {
  padding: var(--wa-space-s) max(var(--wa-space-m), calc((100% - 64rem) / 2 + var(--wa-space-m)));
  background: var(--wa-color-surface-default);
  border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.app-header h1 { margin: 0; }

/* Der Gesamtfortschritt bleibt beim Scrollen sichtbar. */
.total-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wa-space-3xs) var(--wa-space-m);
  padding-block: var(--wa-space-xs);
}
.total-bar wa-progress-bar { flex: 1 1 12rem; }
#total-label { font-weight: var(--wa-font-weight-semibold); font-variant-numeric: tabular-nums; }
.flush { margin: 0; }
.is-complete { --indicator-color: var(--wa-color-success-fill-loud); }

main {
  max-width: 64rem;
  margin-inline: auto;
  padding: var(--wa-space-m);
}

#login wa-card { max-width: 24rem; margin: var(--wa-space-2xl) auto; }

wa-tab-group.single::part(nav) { display: none; }
wa-tab-panel { --padding: var(--wa-space-m) 0 0; }

/* Abschnitte */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--wa-space-m);
  width: 100%;
}
.section-title { flex: 1; min-width: 0; font-weight: var(--wa-font-weight-semibold); }
.section-head wa-progress-bar { flex: 0 0 8rem; }
.mini { --track-height: var(--wa-space-xs); }
.count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.section { --spacing: var(--wa-space-xs); }
.subsection { --spacing: 0; }
.subsection::part(header) {
  padding: var(--wa-space-xs) var(--wa-space-m);
  background: var(--wa-color-surface-lowered);
}
.section-body { gap: var(--wa-space-2xs); }

.items { list-style: none; margin: 0; padding: 0; }
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wa-space-xs) var(--wa-space-l);
  padding: var(--wa-space-s) var(--wa-space-m);
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.items > .item:first-child { border-top: 0; }
.item.depth-1 { padding-inline-start: calc(var(--wa-space-m) + var(--wa-space-l)); }
.item.depth-2 { padding-inline-start: calc(var(--wa-space-m) + var(--wa-space-2xl)); }
.item.depth-3 { padding-inline-start: calc(var(--wa-space-m) + var(--wa-space-3xl)); }
.item.is-answered { background: var(--wa-color-success-fill-quiet); }
.item.is-out { background: var(--wa-color-neutral-fill-quiet); }
.item.is-out .item-text { color: var(--wa-color-text-quiet); text-decoration: line-through; }
.item-main { min-width: 0; }
.item-text { overflow-wrap: anywhere; }

.item-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wa-space-xs) var(--wa-space-m);
}
/* Gewählte Schulungsantwort deutlich: geschult = Erfolg, intern = Warnung */
wa-radio:state(checked)[value="geschult"] {
  background-color: var(--wa-color-success-fill-loud);
  border-color: var(--wa-color-success-border-loud);
  color: var(--wa-color-success-on-loud);
}
wa-radio:state(checked)[value="intern"] {
  background-color: var(--wa-color-warning-fill-loud);
  border-color: var(--wa-color-warning-border-loud);
  color: var(--wa-color-warning-on-loud);
}
.training-wrap { display: flex; align-items: center; gap: var(--wa-space-3xs); }
.item:not(.has-training) .clear { visibility: hidden; }
.save-state {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  min-width: 6.5rem;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}
.save-state[data-kind="saved"] { color: var(--wa-color-success-on-quiet); }

/* Auswertung */
.quiet { color: var(--wa-color-text-quiet); margin: 0; }
.overview { width: 100%; }
.overview .num { text-align: end; }
.overview-progress { display: flex; align-items: center; gap: var(--wa-space-s); min-width: 12rem; }
.overview-progress wa-progress-bar { flex: 1; }

/* „nur offene Punkte“: zuletzt geänderte Zeile bleibt bis zum Umschalten stehen */
.only-open .item.is-answered:not(.keep) { display: none; }

@media (max-width: 40rem) {
  main { padding: var(--wa-space-s); }
  .app-header, .total-bar { padding-inline: var(--wa-space-s); }
  .item { grid-template-columns: 1fr; padding-inline: var(--wa-space-s); }
  .item.depth-1 { padding-inline-start: calc(var(--wa-space-s) + var(--wa-space-m)); }
  .item.depth-2, .item.depth-3 { padding-inline-start: calc(var(--wa-space-s) + var(--wa-space-xl)); }
  /* Auswahl über die volle Breite; × rückt hinter den Schalter an den Zeilenrand. */
  .item-controls { justify-content: flex-start; }
  .training-wrap { display: contents; }
  wa-radio-group.training { flex: 1 1 100%; }
  wa-radio-group.training::part(form-control-input) { width: 100%; }
  wa-radio-group.training wa-radio { flex: 1 1 0; text-align: center; }
  .item-controls .clear { order: 1; margin-inline-start: auto; }
  .section-head wa-progress-bar { display: none; }
  #login wa-card { margin-block: var(--wa-space-m); }
}