/* Erinnerungen in den Einstellungen (0.84.0): Gerät ein/aus, zwei Zeilen mit Kästchen und Uhrzeit. */
.push-settings {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.push-settings .ui-form__heading {
  margin: 0;
}

/* Beim Laden: Platzhalterfläche in --border in der Höhe einer Zeile, mit Text statt leer. */
.push-checking {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  margin: 0;
  padding: 0 var(--space-3);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  background: var(--border);
  border-radius: var(--radius-card);
}

.push-device,
.push-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Gerätezeile: Reicht der Platz neben dem Knopf nicht für die Beschriftung (Französisch «Notifications sur cet appareil»
   ragte bei 320 px mit breiter Schrift aus seiner Spalte), steht der Knopf in voller Breite darunter. Sonst wie bisher:
   Beschriftung links, Knopf in seiner Breite rechts. */
.push-device {
  display: flex;
  flex-wrap: wrap;
}

.push-device > span {
  flex: 999 1 calc(var(--control-height) * 2.5);
}

.push-device > button {
  flex: 1 0 auto;
  width: auto;
}

.push-device span,
.push-row label span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.push-device strong,
.push-row strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.3 var(--font-system);
}

.push-device small,
.push-row small,
.push-note {
  color: var(--text-3);
  font-size: var(--font-size-label);
}

.push-row label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

.push-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.push-time {
  width: 96px;
}

.push-test {
  justify-self: start;
}

.push-note {
  margin: 0;
}

/* 0.86.8: Wochentage für Wiegen und Training unter der Zeile, sieben Kästchen, 44 px hoch und bei 390 px Breite
   mindestens 44 px breit (wie die Wochenleiste). */
.push-days {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.push-days legend {
  padding: 0;
  margin-bottom: var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.push-days__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

/* Doppelte Klasse: in den Einstellungen liegt der Tag in .push-row, deren Regel für label sonst zwei Spalten setzt. */
.push-days .push-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: var(--control-height);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-label) / 1.2 var(--font-system);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
}

.push-days .push-day input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.push-days__hint {
  color: var(--text-2);
  font-size: var(--font-size-label);
}

/* 0.86.12: Präparate als eigene Gruppe unter den übrigen Arten; die Zeilen wie oben, die Überschrift ruhig wie die
   Beschriftung der Wochentage. */
.push-medications {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3) 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.push-medications legend {
  float: left;
  width: 100%;
  padding: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

/* Die erste Zeile folgt direkt auf die Überschrift (die Linie steht schon über der Gruppe). */
.push-medications .push-row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

/* 0.86.8: Einstellungen → Bereiche (js/44-modules.js), gleich gebaut wie die Karte «Auf diesem Gerät». */
.settings-modules {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.settings-modules .ui-form__heading,
.settings-modules__intro,
.settings-modules__note {
  margin: 0;
}

.settings-modules__intro {
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.5 var(--font-system);
}

.settings-modules__note {
  color: var(--text-3);
  font-size: var(--font-size-label);
}

.push-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}