/* Beta: Bestätigungsdialog, Bereichsmeldungen und Ladezustand
   (UI-Regelwerk 0.2: S-01 bis S-06, E-03, B-03, B-04, B-06).
   Nutzt ausschließlich die Tokens aus beta.css (:root). Wird von modal.js /
   forms.js bedient; kein eigenes Markup in den Templates nötig. */

/* =========================================================================
   bxConfirm – eigener Dialog statt window.confirm (S-04, S-05)
   ========================================================================= */
.bx-confirm { z-index: 140; }                        /* immer über dem Fachdialog */
.bx-confirm-box {
  width: min(440px, 100%);
  border-radius: var(--radius);                       /* 16 px: Dialog (A-04) */
  padding: 24px 24px 0;
}
.bx-confirm-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-confirm-body { display: flex; gap: 16px; align-items: flex-start; }
.bx-confirm-icon {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--danger-soft); color: var(--danger);
  font-size: 20px;
}
.bx-confirm-icon[hidden] { display: none; }
.bx-confirm-copy { flex: 1 1 auto; min-width: 0; }
.bx-confirm-text {
  margin: 0; font-size: 16px; line-height: 25px; font-weight: 600; color: var(--ink-900);
}
.bx-confirm-details {
  margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-700);
}
.bx-confirm-details[hidden] { display: none; }
.bx-confirm-foot { padding: 24px 0 24px; gap: 12px; flex-wrap: wrap; }
.bx-confirm-foot .bx-btn { min-height: 44px; }
/* B-04: Abbrechen neutral – Rahmen bleibt trotz .bx-modal-foot .bx-btn { border: 0 } */
.bx-confirm-foot .bx-btn.bx-btn-sec { border: 1px solid var(--ink-500); }
@media (max-width: 600px) {
  .bx-confirm-foot .bx-btn { flex: 1 1 auto; }
}

/* =========================================================================
   Bereichsmeldung (S-02, S-03, E-03): Ursache + nächster Schritt, bleibt
   stehen bis behoben oder bewusst geschlossen; Erfolg darf verschwinden.
   ========================================================================= */
.bx-msgbox {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--ink-50);
  color: var(--ink-900);
  font-size: 14px; line-height: 20px;
  text-align: left;
}
.bx-msgbox[hidden] { display: none; }
.bx-msgbox-icon { flex: 0 0 auto; width: 20px; text-align: center; font-size: 16px; line-height: 20px; }
.bx-msgbox-text { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.bx-msgbox-text strong { font-weight: 600; }
.bx-msgbox-x {
  flex: 0 0 auto; width: 44px; height: 44px; margin: -12px -16px -12px auto;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; border-radius: var(--radius-sm);
}
.bx-msgbox-x:hover { background: var(--product-20); }
.bx-msgbox-x:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* F-06: Statusfarben bleiben eigenständig; S-01: zusätzlich Icon und Text */
.bx-msgbox.is-err  { color: var(--danger);  background: var(--danger-soft);  border-color: var(--danger); }
.bx-msgbox.is-ok   { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.bx-msgbox.is-warn { color: var(--warning); background: var(--warning-soft); border-color: var(--warning); }
.bx-msgbox.is-info { color: var(--info);    background: var(--info-soft);    border-color: var(--info); }
.bx-msgbox.is-err .bx-msgbox-text,
.bx-msgbox.is-ok .bx-msgbox-text,
.bx-msgbox.is-warn .bx-msgbox-text,
.bx-msgbox.is-info .bx-msgbox-text { color: var(--ink-900); }
/* Banner für Meldungen ohne Bereich (globales Problem, S-03) */
.bx-msgbox-page { margin: 0 0 16px; }
/* Aktionen in einer Meldung (z. B. Nachfrage "Bist du noch beim Düngen?"):
   Antwort direkt im Hinweis statt in einem blockierenden Dialog (S-04) */
.bx-msgbox-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Vorhandene Slots (.bx-trm-msg) werden wiederverwendet; sie brauchen Abstand zum Kreuz */
.bx-trm-msg.bx-msgbox { font-size: 14px; }

/* =========================================================================
   Ladezustand ohne Layoutsprung (B-06, Leitplanken): Inhalt bleibt stehen,
   ein Schleier und ein laufender Balken zeigen die Arbeit an.
   ========================================================================= */
[aria-busy="true"].is-loading { position: relative; cursor: progress; }
[aria-busy="true"].is-loading > * { pointer-events: none; }
[aria-busy="true"].is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: var(--white); opacity: .6;               /* Schleier über dem Inhalt, nicht der Inhalt selbst (F-04) */
  border-radius: inherit; pointer-events: none;
}
[aria-busy="true"].is-loading::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  height: 4px; width: 38%;
  border-radius: var(--radius-xs);
  background: var(--green-600);
  animation: bx-loadbar 1.05s ease-in-out infinite;   /* Keyframes aus beta.css */
}
.bx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Teamkalender: Zeitraumauswahl per Tastatur (Leitplanken: bedienbar ohne
   Zeiger). Zellen sind role="gridcell" mit tabindex; der Fokus ist sichtbar.
   ========================================================================= */
.bx-tc-cell.is-clickable:focus-visible {
  outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-xs);
}
.bx-tc-cell.is-anchor { box-shadow: inset 0 0 0 2px var(--green-600); border-radius: var(--radius-xs); }