/* Booster & Bohne — Bausteine für Ideen, Konten und den Diamant-Schalter.
   Gehört zum hellen Clean-v6-Grundsystem: Trennlinien statt Kästen, keine
   Schatten, alle Farben über die --ui-*-Variablen. Das rote Erscheinungsbild
   liegt getrennt in diamant.css.
   Eigene Datei, damit Jakobs build-theme.mjs unberührt bleibt. */

/* ---------------- Kleinteile, die im Grundsystem fehlten ---------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.chip {
  display: inline-flex; align-items: center; gap: .25em;
  padding: .2rem .5rem;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ui-muted);
  font: 650 .66rem/1.35 Inter, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
}
.chip .ui-icon { width: .85em; height: .85em; }

.chip-status.status-offen { color: var(--ui-ink); border-color: var(--ui-line-strong); }
.chip-status.status-in_arbeit {
  color: var(--ui-green); border-color: currentColor;
  background: var(--ui-green-soft);
}
.chip-status.status-erledigt { color: var(--ui-success); border-color: currentColor; }
.chip-status.status-verworfen { color: var(--ui-faint); text-decoration: line-through; }

.chip-prio.prio-hoch { color: var(--ui-danger); border-color: currentColor; }
.chip-prio.prio-niedrig { color: var(--ui-faint); }
.chip-bereich { text-transform: capitalize; }

.chip-rolle.rolle-admin { color: var(--ui-ink); border-color: var(--ui-line-strong); font-weight: 700; }
.chip-rolle.rolle-laden { color: var(--ui-green); border-color: currentColor; }
.chip-demo { color: var(--ui-faint); }

/* Formularfelder — das Grundsystem stylt nur die nackten Elemente. */
.field { display: block; margin: 0 0 .85rem; }
.field > span {
  display: block; margin: 0 0 .3rem;
  color: var(--ui-muted);
  font: 650 .72rem/1.3 Inter, sans-serif;
}
.field > span em { font-style: normal; font-weight: 400; color: var(--ui-faint); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.75rem;
  padding: .6rem .7rem;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-field);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: 400 .95rem/1.4 Inter, sans-serif;
}
.field textarea { min-height: 5rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--ui-green); outline-offset: 1px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.field-row .field { margin-bottom: .85rem; }

.form-msg { margin: .5rem 0 0; font-size: .8rem; min-height: 1.2em; }
.form-msg.err { color: var(--ui-danger); }
.form-msg.ok { color: var(--ui-success); }

button.icon-only {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-muted);
  flex: 0 0 auto;
}
button.icon-only:active { background: var(--ui-green-soft); }
button.icon-only.danger { color: var(--ui-danger); }
button.primary.danger { background: var(--ui-danger); color: #fff; }
button.ghost.danger { color: var(--ui-danger); background: transparent; }

/* Schalter — nativ genug, um zugänglich zu bleiben. */
.switch {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: 0 0 auto;
  width: 3.25rem; height: 1.85rem; margin: 0;
  border: 1px solid var(--ui-line-strong); border-radius: 999px;
  background: var(--ui-canvas);
  transition: background .18s ease, border-color .18s ease;
  cursor: pointer;
}
.switch::after {
  content: ""; position: absolute; inset: 3px auto 3px 3px;
  width: 1.35rem; border-radius: 50%;
  background: var(--ui-muted);
  transition: transform .18s ease, background .18s ease;
}
.switch:checked { background: var(--ui-green); border-color: var(--ui-green); }
.switch:checked::after { transform: translateX(1.4rem); background: #fff; }
.switch:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 2px; }

.switch-row {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1rem; padding: .8rem 0;
  border-top: 1px solid var(--ui-line);
}
.switch-text { flex: 1 1 auto; }
.switch-text strong { display: block; font-size: .9rem; }
.switch-text small { display: block; margin-top: .15rem; color: var(--ui-muted); font-size: .75rem; line-height: 1.35; }

/* ---------------- Ideen ---------------- */
.ideen-ansicht-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
  margin: .1rem 0 1.35rem; padding: .25rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: transparent;
}
.ideen-ansicht-tabs button {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 0; min-height: 3rem; margin: 0; padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-muted);
  font: 650 .78rem/1.2 Inter, sans-serif;
}
.ideen-ansicht-tabs button .ui-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.ideen-ansicht-tabs button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ideen-ansicht-tabs button em {
  display: grid; place-items: center; flex: 0 0 auto;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .28rem;
  border-radius: 999px; background: var(--ui-canvas);
  color: var(--ui-muted); font: 700 .65rem/1 Inter, sans-serif; font-style: normal;
}
.ideen-ansicht-tabs button[aria-selected="true"] {
  border-color: var(--ui-line-strong);
  background: var(--ui-green-soft); color: var(--ui-ink);
}
.ideen-ansicht-tabs button[aria-selected="true"] .ui-icon { color: var(--ui-green); }
.ideen-ansicht-tabs button:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 2px; }

.idee-form-card { margin: 0 0 1.6rem; padding-top: .2rem; }
.idee-form { margin-top: .9rem; }
.idee-form textarea { font-family: Inter, sans-serif; font-size: .95rem; }
.idee-form button[type="submit"] { width: 100%; }

.idee-listkopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin: 0 0 .2rem; padding-top: .4rem;
  border-top: 1px solid var(--ui-line);
}
.idee-listkopf h3 { margin: .8rem 0 0; font-size: 1rem; }
.idee-zaehler { color: var(--ui-muted); font-size: .75rem; }

.idee-liste { display: flex; flex-direction: column; }
.idee {
  padding: 1.1rem 0;
  border-top: 1px solid var(--ui-line);
}
.idee:first-child { border-top: 0; }
.idee[data-status="erledigt"], .idee[data-status="verworfen"] { opacity: .62; }
.idee-kopf { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.idee h4 {
  margin: 0 0 .3rem; font-size: 1rem; line-height: 1.3;
  text-wrap: balance;
}
.idee p {
  margin: 0 0 .6rem; color: var(--ui-muted);
  font-size: .87rem; line-height: 1.5;
  text-wrap: pretty; white-space: pre-wrap; overflow-wrap: anywhere;
}
.idee-fuss { display: flex; align-items: center; gap: .5rem; }
.idee-meta {
  flex: 1 1 auto; min-width: 0;
  color: var(--ui-faint); font-size: .72rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idee-statuswahl select {
  min-height: 2.75rem; padding: .3rem 1.6rem .3rem .6rem;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface); color: var(--ui-ink);
  font: 650 .72rem/1 Inter, sans-serif;
}
.idee-leer { padding: 2rem 1rem; text-align: center; }
.idee-leer .ui-icon { width: 1.6rem; height: 1.6rem; color: var(--ui-faint); margin-bottom: .5rem; }

/* ---------------- Konten ---------------- */
.konten { margin: 0 0 1.6rem; }
.konto-liste { display: flex; flex-direction: column; margin-top: .7rem; }
.konto {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  min-height: 3.9rem; padding: .7rem 0; margin: 0;
  border: 0; border-top: 1px solid var(--ui-line); border-radius: 0;
  background: transparent; color: var(--ui-ink);
  text-align: left; font: inherit;
}
.konto:first-child { border-top: 0; }
.konto:active { background: var(--ui-green-soft); }
.konto > .ui-icon { flex: 0 0 auto; color: var(--ui-faint); }
.konto-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--ui-green-soft); color: var(--ui-green);
  font: 700 .95rem/1 Inter, sans-serif; text-transform: uppercase;
}
.konto-avatar-neu { background: transparent; border: 1px dashed var(--ui-line-strong); color: var(--ui-muted); }
.konto-avatar-neu .ui-icon { width: 1.1rem; height: 1.1rem; }
.konto-text { flex: 1 1 auto; min-width: 0; }
.konto-text strong { display: block; font-size: .92rem; }
.konto-text small {
  display: block; margin-top: .1rem; color: var(--ui-muted); font-size: .74rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-ich {
  font: 650 .62rem/1 Inter, sans-serif; font-style: normal;
  color: var(--ui-muted); text-transform: uppercase; letter-spacing: .08em;
}
.konto-marken { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: 0 0 auto; }
.konten-hinweis { margin: .8rem 0 0; color: var(--ui-faint); font-size: .74rem; line-height: 1.4; }

/* ---------------- Sheets ---------------- */
.konto-sheet, .confirm-sheet { text-align: left; }
.konto-sheet h2, .confirm-sheet h2 { text-align: left; }
.konto-sheet-meta { margin: -.4rem 0 1rem; color: var(--ui-muted); font-size: .78rem; }
.konto-sheet .idee-form button[type="submit"] { width: 100%; }
.konto-sheet-fuss {
  display: flex; gap: .6rem; margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--ui-line);
}
.konto-sheet-fuss button { flex: 1 1 0; }
.confirm-sheet p { margin: 0 0 1.2rem; color: var(--ui-muted); line-height: 1.5; }
.confirm-aktionen { display: flex; gap: .6rem; }
.confirm-aktionen button { flex: 1 1 0; }

/* ---------------- Diamant-Schalter (Startseite) ---------------- */
.dia-switch {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1.2rem; padding: 1rem 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}
.dia-switch-copy { flex: 1 1 auto; min-width: 0; }
.dia-switch-copy h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.dia-switch-copy p { margin: 0; color: var(--ui-muted); font-size: .78rem; line-height: 1.4; text-wrap: pretty; }
.switch-wrap { flex: 0 0 auto; display: flex; align-items: center; }

.dia-mark { width: 2rem; height: 2rem; flex: 0 0 auto; }
.dia-mark-lg { width: 2.9rem; height: 2.9rem; }

/* ---------------- Tabbar bei vielen Einträgen ---------------- */
#tabbar[data-count="7"] button, #tabbar[data-count="8"] button { font-size: .53rem; gap: .18rem; }
#tabbar[data-count="7"] button .ico, #tabbar[data-count="8"] button .ico {
  width: 1.15rem; height: 1.15rem;
}
@media (max-width: 340px) {
  #tabbar[data-count="7"] button, #tabbar[data-count="8"] button { font-size: .48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .switch, .switch::after { transition: none; }
}