/*
  Routines (slice 27): their category colour in the calendar, the "Routinen" card on "Heute" with a round check per
  routine, and the routines page under the calendar with one plain list per person. Builds on the tokens of
  hauswerk.css, the rows of today.css and people.css, and the round check of calendar.css.
*/

.hw-cal-routines { --hw-cal-c: var(--hw-routine); --hw-cal-cs: var(--hw-routine-soft); }

/* --- Heute ---------------------------------------------------------------------------- */

.hw-today-routines .hw-today-dot {
  background: var(--hw-routine);
}

button.hw-routine-row {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--bsft-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.hw-routine-row:disabled {
  cursor: default;
}

.hw-routine-row.is-done .hw-today-text b {
  color: var(--bsft-color-muted);
  text-decoration: line-through;
}

/* --- the routines page ---------------------------------------------------------------- */

.hw-routines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.hw-routine-person .hw-cal-section-head {
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--bsft-color-text);
}

.hw-routine-list {
  overflow: hidden;
  border: 1px solid var(--bsft-color-border);
  border-radius: 14px;
  background: var(--bsft-color-surface);
}

.hw-routine-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--bsft-color-text);
  font: inherit;
  text-align: left;
}

button.hw-routine-head {
  cursor: pointer;
}

button.hw-routine-head:hover {
  background: var(--hw-surface-2);
}

.hw-routine + .hw-routine {
  border-top: 1px solid var(--bsft-color-border);
}

.hw-routine-head .hw-today-time {
  width: 76px;
}

.hw-routine-paused {
  flex: none;
  background: var(--hw-routine-soft);
}

.hw-routine-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.hw-routine-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--bsft-color-muted);
}

.hw-routine-form input:not([type="checkbox"]),
.hw-routine-form select {
  min-width: 0;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--bsft-color-border);
  background: var(--bsft-color-surface);
  color: var(--bsft-color-text);
  font: inherit;
  font-size: 16px;
}

.hw-routine-form .hw-routine-wide {
  flex: 1 1 100%;
}

.hw-routine-form label.hw-routine-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  color: var(--bsft-color-text);
}

.hw-routine-toggle input {
  width: 22px;
  height: 22px;
  accent-color: var(--hw-routine);
}