/* mein-fretus · Senden & Bestellen
   Nutzt die Shell-Tokens aus index.html (--fa-*), mit Fallbacks fuer den Fall,
   dass das Modul mal ausserhalb der Shell gerendert wird. */

.bs-intro { color: var(--fa-muted, #5b6976); margin: 8px 0 18px; line-height: 1.55; }
.bs-hint { font-size: 12px; color: var(--fa-muted, #5b6976); line-height: 1.5; margin: 10px 0 0; }
.bs-err { font-size: 13px; color: var(--fa-error, #c0392b); margin: 0 0 10px; line-height: 1.45; }
.bs-leer { text-align: center; color: var(--fa-muted, #5b6976); padding: 22px 10px; font-size: 14px; line-height: 1.55; }
h3.bs-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--fa-muted, #5b6976); margin: 22px 0 9px; }
.bs-back { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--fa-muted, #5b6976); font-size: 13px; padding: 6px 0; margin-bottom: 8px; }
.bs-back:hover { color: var(--fa-cyan-dark, #006080); }

/* ---- Anlass-Liste ---- */
.bs-kat { display: grid; gap: 10px; margin-top: 4px; }
.bs-kat-row { display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 1px solid var(--fa-border, #d9dee4); border-radius: 12px; background: #fff;
  cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.bs-kat-row:hover { border-color: var(--fa-cyan, #0099CC); box-shadow: 0 2px 12px rgba(0,153,204,0.12); }
.bs-kat-row:active { transform: scale(0.995); }
.bs-kat-t { flex: 1 1 auto; min-width: 0; }
.bs-kat-t b { display: block; font-size: 15px; }
.bs-kat-t small { display: block; font-size: 12px; color: var(--fa-muted, #5b6976);
  margin-top: 2px; line-height: 1.45; }
.bs-chev { flex: 0 0 auto; color: var(--fa-muted, #5b6976); font-size: 18px; }
.bs-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #eef6fb;
  display: flex; align-items: center; justify-content: center; font-size: 22px; }
.bs-ic.sm { width: 38px; height: 38px; font-size: 17px; }
.bs-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #eef6fb;
  color: var(--fa-cyan-dark, #006080); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; }

/* ---- Journal ---- */
.bs-jrn { display: grid; gap: 7px; }
.bs-jrn-row { padding: 10px 12px; border: 1px solid var(--fa-border, #d9dee4); border-radius: 10px;
  background: #fafbfc; }
.bs-jrn-row b { font-size: 13.5px; }
.bs-jrn-row small { display: block; font-size: 12px; color: var(--fa-muted, #5b6976);
  margin-top: 2px; line-height: 1.45; }

/* ---- Empfaenger ---- */
.bs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fa-border, #d9dee4);
  margin-bottom: 14px; overflow-x: auto; }
.bs-tab { border: none; background: none; padding: 9px 11px; font-size: 14px; font-weight: 600;
  color: var(--fa-muted, #5b6976); border-bottom: 2px solid transparent; cursor: pointer;
  font-family: inherit; white-space: nowrap; }
.bs-tab.on { color: var(--fa-cyan, #0099CC); border-bottom-color: var(--fa-cyan, #0099CC); }

.bs-suche { width: 100%; padding: 11px 13px; border: 1px solid var(--fa-border, #d9dee4);
  border-radius: 10px; font-size: 15px; font-family: inherit; margin-bottom: 12px; }
.bs-suche:focus { outline: none; border-color: var(--fa-cyan, #0099CC); }

.bs-liste { display: grid; gap: 8px; }
.bs-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--fa-border, #d9dee4); border-radius: 11px; background: #fff; cursor: pointer; }
.bs-row:hover { border-color: var(--fa-cyan, #0099CC); }
.bs-row-t { flex: 1 1 auto; min-width: 0; }
.bs-row-t b { font-size: 14px; }
.bs-row-t small { display: block; font-size: 12px; color: var(--fa-muted, #5b6976);
  margin-top: 2px; line-height: 1.4; }
.bs-kanal { flex: 0 0 auto; display: flex; gap: 4px; }
.bs-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: #f1f5f9; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap; }
.bs-pill.mru { background: #eef6fb; color: var(--fa-cyan-dark, #006080); }
.bs-pill.k-kurz { display: none; background: #fef3c7; color: #92400e; }
.bs-pill.k-kurz.warn { background: #fee2e2; color: #991b1b; }
/* Drei Kanal-Pillen brauchen auf 420 px mehr Platz als der Name. Dort zaehlt nur,
   wo ein Kanal FEHLT — den Rest sieht man eine Ansicht weiter ohnehin. */
@media (max-width: 560px) {
  .bs-kanal .bs-pill:not(.k-kurz):not(.mru) { display: none; }
  .bs-pill.k-kurz { display: inline-block; }
}

/* ---- Gewaehlter Empfaenger ---- */
.bs-chip { display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--fa-cyan, #0099CC); background: #f2fafd; border-radius: 11px; margin-bottom: 6px; }
.bs-chip-x { flex: 0 0 auto; border: 1px solid var(--fa-border, #d9dee4); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; color: var(--fa-muted, #5b6976); cursor: pointer;
  font-family: inherit; background: #fff; }

/* ---- Bloecke ---- */
.bs-sec { border: 1px solid var(--fa-border, #d9dee4); border-radius: 12px; margin-bottom: 10px;
  overflow: hidden; }
.bs-sec-head { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px;
  cursor: pointer; background: #fff; }
.bs-sec.off .bs-sec-head { background: #fafbfc; }
.bs-sec.pflicht .bs-sec-head { cursor: default; }
.bs-sw { flex: 0 0 auto; width: 42px; height: 25px; border-radius: 99px; background: #cbd5e1;
  position: relative; transition: background 0.15s; margin-top: 1px; }
.bs-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.bs-sec.on .bs-sw { background: var(--fa-cyan, #0099CC); }
.bs-sec.on .bs-sw::after { transform: translateX(17px); }
/* Pflichtblock: kein Schalter und keine Marke — nur der Platz bleibt frei, damit
   die Titel in derselben Spalte stehen wie bei den schaltbaren Bloecken. */
.bs-leerspalte { flex: 0 0 auto; width: 42px; }
.bs-sec-t { flex: 1 1 auto; min-width: 0; }
.bs-sec-t b { font-size: 14px; display: block; }
.bs-sec-t small { display: block; font-size: 12px; color: var(--fa-muted, #5b6976); margin-top: 3px;
  line-height: 1.45; white-space: pre-line; }
.bs-sec-body { padding: 13px 14px 14px; border-top: 1px dashed var(--fa-border, #d9dee4); }
.bs-sec.off .bs-sec-body { display: none; }

/* ---- Felder ---- */
.bs-f { display: block; margin-bottom: 11px; }
.bs-f span { display: block; font-size: 12px; color: var(--fa-muted, #5b6976); margin-bottom: 4px; }
.bs-f input, .bs-f textarea, .bs-f select { width: 100%; padding: 10px 12px;
  border: 1px solid var(--fa-border, #d9dee4); border-radius: 8px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--fa-text, #1a2530); box-sizing: border-box; }
.bs-f input:focus, .bs-f textarea:focus, .bs-f select:focus { outline: none;
  border-color: var(--fa-cyan, #0099CC); }
.bs-f textarea { resize: vertical; line-height: 1.45; min-height: 112px; }
.bs-f textarea.kurz { min-height: 64px; }
/* iOS Safari erzwingt bei date/time eine Mindestbreite, die min-width:0 im Grid
   ignoriert. -webkit-appearance:none nimmt die UA-Chrome weg, der native Picker bleibt. */
.bs-f input[type=date], .bs-f input[type=time] { -webkit-appearance: none; appearance: none; }
.bs-grid2 { display: grid; gap: 11px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .bs-grid2 { grid-template-columns: 1fr; } }
.bs-check { display: flex; align-items: center; gap: 9px; font-size: 13px;
  color: var(--fa-muted, #5b6976); cursor: pointer; margin: 2px 0 12px; }
.bs-check input { accent-color: var(--fa-cyan, #0099CC); width: 17px; height: 17px; }
.bs-inline { display: flex; gap: 8px; }
.bs-inline input { flex: 1 1 auto; min-width: 0; }
.bs-inline button { flex: 0 0 auto; padding: 10px 13px; border: 1px solid var(--fa-border, #d9dee4);
  border-radius: 8px; background: #fff; font-size: 13px; font-family: inherit; cursor: pointer;
  color: var(--fa-cyan-dark, #006080); font-weight: 600; }

/* ---- Hinweiskaesten ---- */
.bs-warn { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 11px;
  padding: 13px 14px; margin-bottom: 12px; }
.bs-warn > b { display: block; font-size: 14px; color: #b45309; margin-bottom: 4px; }
.bs-warn p { margin: 0; font-size: 13px; line-height: 1.5; color: #7c4a04; }
.bs-ok-box { border: 1px solid #a5d6a7; background: #f1f8f2; border-radius: 11px;
  padding: 11px 13px; margin-bottom: 12px; font-size: 13px; color: #1b5e20; line-height: 1.5; }
.bs-info { border: 1px solid var(--fa-border, #d9dee4); background: #f8fafc; border-radius: 11px;
  padding: 13px 14px; margin-bottom: 12px; }
.bs-info > b { display: block; font-size: 14px; margin-bottom: 4px; }
.bs-info p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fa-muted, #5b6976); }
.bs-info .bs-sub { width: auto; padding: 9px 14px; }

/* ---- Standort-Auswahl ---- */
.bs-radio { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--fa-border, #d9dee4); border-radius: 10px; background: #fff;
  cursor: pointer; margin-bottom: 7px; }
.bs-radio.sel { border-color: var(--fa-cyan, #0099CC); box-shadow: 0 0 0 2px rgba(0,153,204,0.10); }
.bs-radio input { margin-top: 3px; accent-color: var(--fa-cyan, #0099CC); }
.bs-radio div { flex: 1 1 auto; min-width: 0; }
.bs-radio b { display: block; font-size: 13.5px; }
.bs-radio small { display: block; font-size: 12px; color: var(--fa-muted, #5b6976); margin-top: 2px;
  line-height: 1.4; word-break: break-word; }
.bs-unter { margin: 9px 0 2px 30px; }

/* ---- Vorschau ---- */
.bs-vorschau { background: #0f1b23; color: #e7eef3; border-radius: 12px; padding: 15px 16px;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; margin: 0 0 8px; }
.bs-vorschau .vs-h { color: #7fd4f0; font-weight: 700; }
.bs-zaehler { font-size: 11.5px; color: var(--fa-muted, #5b6976); margin: 0 0 12px; line-height: 1.5; }
.bs-zaehler b.warn { color: #b45309; }

/* ---- Kanal + Senden ---- */
.bs-kanal-wahl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.bs-kanal-btn { padding: 10px 14px; border: 1px solid var(--fa-border, #d9dee4); border-radius: 10px;
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--fa-muted, #5b6976);
  cursor: pointer; font-family: inherit; }
.bs-kanal-btn.sel { border-color: var(--fa-cyan, #0099CC); color: var(--fa-cyan-dark, #006080);
  background: #f2fafd; box-shadow: 0 0 0 2px rgba(0,153,204,0.10); }
.bs-kanal-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.bs-send { width: 100%; padding: 14px; border: none; border-radius: 11px;
  background: var(--fa-cyan, #0099CC); color: #fff; font-size: 15.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; }
.bs-send:active { transform: scale(0.995); }
.bs-send:disabled { background: #b6c3cc; cursor: not-allowed; }
.bs-sub { width: 100%; padding: 11px; border: 1px solid var(--fa-border, #d9dee4);
  border-radius: 11px; background: #fff; color: var(--fa-muted, #5b6976); font-size: 14px;
  cursor: pointer; font-family: inherit; margin-top: 8px; }

/* Haken-Feld (typ 'chk') — eigene Zeile, Label rechts statt darueber. */
.bs-chk { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; cursor: pointer; }
.bs-chk input { width: 18px; height: 18px; flex: none; accent-color: var(--fa-brand, #0099cc); }
.bs-chk span { font-size: 14px; color: var(--fa-text, #1a232e); }