/* ==========================================================================
   BBasic Design System (BBRazorLib)
   Einheitliche, moderne Optik für Forms, Home-Shell, Kalender, Grids.
   Hosts: BBBlazor + BBasicApp laden:
     <link rel="stylesheet" href="_content/BBasic.BBRazor/bb-theme.css" />
   ========================================================================== */

:root {
  /* Surfaces */
  --bb-bg: #0f172a;
  --bb-bg-soft: #111827;
  --bb-surface: #1e293b;
  --bb-surface-2: #243247;
  --bb-surface-elevated: #2a3a52;
  --bb-border: rgba(148, 163, 184, 0.22);
  --bb-border-strong: rgba(148, 163, 184, 0.38);

  /* Text */
  --bb-fg: #f1f5f9;
  --bb-fg-muted: #94a3b8;
  --bb-fg-subtle: #64748b;

  /* Brand */
  --bb-accent: #14b8a6;
  --bb-accent-strong: #0d9488;
  --bb-accent-soft: rgba(20, 184, 166, 0.16);
  --bb-accent-text: #042f2e;

  /* Semantic */
  --bb-danger: #f87171;
  --bb-warn: #fbbf24;
  --bb-ok: #34d399;
  --bb-info: #38bdf8;

  /* Geometry */
  --bb-radius-xs: 6px;
  --bb-radius-sm: 10px;
  --bb-radius: 14px;
  --bb-radius-lg: 18px;
  --bb-radius-xl: 24px;
  --bb-shadow: 0 8px 28px rgba(2, 6, 23, 0.35);
  --bb-shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.22);
  --bb-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bb-tap: 48px;
  --bb-motion: 160ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Bootstrap gutters (compact) */
  --bs-gutter-x: 0.5rem;
  --bs-card-spacer-x: 0.4rem;
}

/* ── Page base ──────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--bb-font);
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  background: var(--bb-bg);
  color: var(--bb-fg);
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(20, 184, 166, 0.12), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(56, 189, 248, 0.08), transparent 50%),
    var(--bb-bg);
  color: var(--bb-fg);
}

/* Default dark theme text – Hosts mit heller Seite (BBBlazor) überschreiben in app.css */
#app, .page, .content {
  color: var(--bb-fg);
}

a { color: var(--bb-accent); }
a:hover { color: #2dd4bf; }

/* Kacheln/Terminzeilen behalten eigene Farben (nicht Accent-Link-Farbe) */
a.bc-shell-tile,
button.bc-shell-tile,
a.bc-term-row,
button.bc-term-row {
  text-decoration: none !important;
}

/* ── Loading / empty ────────────────────────────────────────────────────── */
.bb-loading, .bb-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--bb-fg-muted);
  font-size: 0.95rem;
}

/* ── Form cards ─────────────────────────────────────────────────────────── */
.bb-form-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.92));
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  overflow: visible;
  margin: 0 0 1rem;
  box-shadow: var(--bb-shadow-sm);
  backdrop-filter: blur(8px);
}

.bb-form-header {
  background: linear-gradient(105deg, var(--bb-accent-strong), #0f766e 55%, #155e75);
  color: #ecfeff;
  padding: 0.85rem 1.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
}

.bb-form-body {
  padding: 0.9rem 1rem 1.1rem;
}

.bb-form-segment {
  margin-bottom: 0.9rem;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow: hidden;
}

.bb-segment-header {
  background: rgba(36, 50, 71, 0.95);
  color: var(--bb-fg);
  padding: 0.65rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 650;
  border-bottom: 1px solid var(--bb-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bb-segment-header::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bb-accent);
  box-shadow: 0 0 0 3px var(--bb-accent-soft);
  flex-shrink: 0;
}

.bb-segment-body {
  padding: 0.85rem 0.95rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bb-form-element {
  margin-bottom: 0.75rem;
}

.bb-label,
.bb-form-element .form-label,
.form-label.fw-semibold {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bb-fg-muted);
  letter-spacing: 0.02em;
}

/* Inputs inside forms – Telerik / native */
.bb-form-card .k-input,
.bb-form-card .k-picker,
.bb-form-card .k-textarea,
.bb-form-card .k-dropdownlist,
.bb-form-card input.form-control,
.bb-form-card textarea.form-control {
  border-radius: var(--bb-radius-sm) !important;
}

/* ── BBDateTimePicker (native date/time, BBRazorLib) ───────────────────── */
.bb-datetime-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.bb-datetime-picker.bb-dt-has-time .bb-dt-date {
  flex: 1 1 9rem;
  min-width: 8.5rem;
}

.bb-datetime-picker.bb-dt-has-time .bb-dt-time {
  flex: 0 1 7.5rem;
  min-width: 6.5rem;
}

.bb-datetime-picker:not(.bb-dt-has-time) .bb-dt-date {
  flex: 1 1 auto;
  width: 100%;
}

.bb-dt-input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--bb-radius-sm, 10px);
  border: 1px solid var(--bb-border, rgba(148, 163, 184, 0.28));
  background: var(--bb-surface-2, #243247);
  color: var(--bb-fg, #f1f5f9);
  font-size: 1rem;
  font-family: inherit;
  color-scheme: dark;
}

.bb-dt-input:focus {
  outline: 2px solid var(--bb-accent, #14b8a6);
  outline-offset: 1px;
  border-color: var(--bb-accent, #14b8a6);
}

.bb-dt-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bb-datetime-picker.bb-dt-disabled {
  opacity: 0.7;
}

.bb-dt-hint {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--bb-fg-muted, #94a3b8);
}

/* Hellere Hosts (falls light theme) */
@media (prefers-color-scheme: light) {
  .bb-dt-input {
    color-scheme: light;
  }
}

.bb-form-card .k-button,
.bb-segment-body .k-button {
  border-radius: var(--bb-radius-sm) !important;
  min-height: 40px;
  font-weight: 600;
}

/* Primary action emphasis */
.k-button.k-button-solid-primary,
.k-button.k-primary {
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

/* ── BBMenu „Aktionen“: aufgeklapptes TreeView-Panel (hell auf dunkel) ─── */
.bb-menu-panel {
  margin-top: 0.65rem;
  margin-bottom: 0.75rem;
  padding: 0.85rem 0.75rem 0.65rem;
  width: 100%;
  max-width: 28rem;
  max-height: min(70vh, 32rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: var(--bb-radius);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.45);
}

.bb-menu-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f8fafc !important;
  margin: 0 0 0.55rem;
  padding: 0 0.35rem 0.45rem;
  border-bottom: 2px solid #facc15;
}

/* TreeView im Menü: alle Texte/Icons hell – kein dunkles Telerik-Default */
.bb-menu-panel .bb-menu-tree,
.bb-menu-panel .k-treeview,
.bb-menu-panel .k-treeview-lines,
.bb-menu-panel .k-animation-container {
  background: transparent !important;
  color: #f8fafc !important;
  border: none !important;
}

.bb-menu-panel .k-treeview-item,
.bb-menu-panel .k-treeview-leaf,
.bb-menu-panel .k-treeview .k-in,
.bb-menu-panel .k-treeview-leaf-text,
.bb-menu-panel .k-treeview-toggle,
.bb-menu-panel .k-svg-icon,
.bb-menu-panel .k-icon,
.bb-menu-panel .k-treeview span,
.bb-menu-panel .k-treeview .k-mid {
  color: #f8fafc !important;
  fill: #f8fafc !important;
}

.bb-menu-panel .k-treeview-leaf {
  min-height: 2.5rem;
  padding: 0.4rem 0.55rem !important;
  border-radius: var(--bb-radius-sm);
  font-size: 1rem;
  font-weight: 600;
}

.bb-menu-panel .k-treeview-leaf:hover,
.bb-menu-panel .k-treeview-leaf.k-hover,
.bb-menu-panel .k-treeview-leaf.k-focus,
.bb-menu-panel .k-treeview .k-in:hover,
.bb-menu-panel .k-treeview .k-selected > .k-in,
.bb-menu-panel .k-treeview-leaf.k-selected {
  background: #0f766e !important;
  color: #ecfeff !important;
}

.bb-menu-panel .k-treeview-toggle:hover {
  background: rgba(20, 184, 166, 0.25) !important;
  color: #5eead4 !important;
}

.bb-menu-close {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0 0 var(--bb-radius-sm) var(--bb-radius-sm);
  background: transparent;
  color: #94a3b8 !important;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  min-height: 2.75rem;
}

.bb-menu-close:hover,
.bb-menu-close:focus-visible {
  color: #f1f5f9 !important;
  background: rgba(148, 163, 184, 0.12);
  outline: none;
}

/* Combo */
.bb-no-wrap-combo .k-input-inner {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bb-no-wrap-combo-popup .k-list-item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 36px;
  padding: 8px 12px !important;
  line-height: 1.4;
}

.bb-combo-item {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Utility / layout ───────────────────────────────────────────────────── */
.bb-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 0.65rem 1.5rem;
}

.bb-page-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bb-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.bb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bb-accent-soft);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.3);
}

/* Image upload button */
.btn.btn-primary,
button.btn-primary,
.k-button.btn-primary {
  background: var(--bb-accent-strong) !important;
  border-color: var(--bb-accent-strong) !important;
  border-radius: var(--bb-radius-sm) !important;
  font-weight: 650;
  min-height: 44px;
  padding: 0.55rem 1rem;
  color: #ecfeff !important;
}

.k-button.btn-primary .k-button-text,
.k-button.btn-primary .k-svg-icon,
.k-button.btn-primary .k-icon {
  color: #ecfeff !important;
  fill: currentColor !important;
}

.btn-green {
  background: var(--bb-ok) !important;
  color: #042f2e !important;
  border: 0 !important;
  border-radius: var(--bb-radius-sm) !important;
  font-weight: 700;
  min-height: 44px;
}

/* Telerik DropDownButton / Action-Buttons: Touch-Höhe + Kontrast */
.k-dropdown-button .k-button,
.menubutton,
button.menubutton {
  min-height: 42px;
  border-radius: var(--bb-radius-sm) !important;
}

/* Natives Untermenü direkt unter dem Knopf (Auszug → Putzen).
   Telerik-Popup hängt am Root und wird vom Segment (overflow:hidden) abgeschnitten. */
.bb-dd {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 11.5rem;
}
.bb-dd-btn,
.bb-dd-item {
  min-height: 44px;
  padding: 0 0.85rem;
  border: 0;
  border-radius: var(--bb-radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
}
.bb-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #facc15;
  color: #1c1917;
}
.bb-dd-btn:hover,
.bb-dd-btn:focus-visible {
  background: #eab308;
  outline: 2px solid #fde047;
  outline-offset: 2px;
}
.bb-dd-zeichen {
  font-size: 0.8rem;
  line-height: 1;
}
.bb-dd-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 6px;
  background: #0f172a;
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: var(--bb-radius-sm);
}
.bb-dd-item {
  background: #1e293b;
  color: #f8fafc;
}
.bb-dd-item:hover,
.bb-dd-item:focus-visible {
  background: #334155;
  color: #fff;
  outline: 2px solid #facc15;
  outline-offset: 0;
}

/*
  Kontrast-Fix: dunkle Schrift auf dunklem Hintergrund.
  Wichtig: .k-button-text darf NICHT global dunkel gesetzt werden –
  sonst sind „Aktionen“/Flat-Buttons und Popup-Einträge unleserlich.
*/
.bb-form-card,
.bb-form-body,
.bb-segment-body,
.bb-page {
  color: #f1f5f9 !important;
}

.bb-form-card .k-label,
.bb-form-card label:not(.k-checkbox-label):not(.k-radio-label),
.bb-form-body .k-label,
.bb-segment-body .k-label,
.bb-form-card .form-label,
.bb-form-card .bb-label,
.bb-form-card .bb-segment-header,
.bb-form-card .form-text,
.bb-form-card > p,
.bb-form-body > p,
.bb-segment-body > p {
  color: #e2e8f0 !important;
}

/* Grids in dunklen Karten: Zellentext dunkel auf hellem Grid-BG */
.bb-form-card .k-grid,
.bb-form-card .k-grid td,
.bb-form-card .k-grid th,
.bb-form-card .k-grid .k-table-td,
.bb-form-card .k-grid .k-table-th {
  color: #0f172a !important;
}

/* Echte Eingabefelder: dunkle Schrift auf hellem Telerik-Input */
.bb-form-card .k-input,
.bb-form-card .k-picker,
.bb-form-card .k-textarea,
.bb-form-card .k-dropdownlist,
.bb-form-card .k-combobox,
.bb-form-card .k-input-inner,
.bb-form-card .k-input-value-text,
.bb-form-card .k-picker .k-input-inner,
.bb-form-card .k-picker .k-input-value-text {
  color: #0f172a !important;
}

/* Flat/Outline-Buttons auf dunkler Karte: helle Schrift (nicht solid/primary) */
.bb-form-card .k-button-flat,
.bb-form-card .k-button-flat-base,
.bb-form-card .k-button.k-button-flat,
.bb-form-card .k-button-outline,
.bb-form-card .k-button-link,
.bb-segment-body .k-button-flat {
  color: #f8fafc !important;
}

.bb-form-card .k-button-flat .k-button-text,
.bb-form-card .k-button.k-button-flat .k-button-text,
.bb-form-card .k-button-flat .k-svg-icon,
.bb-form-card .k-button-flat .k-icon,
.bb-segment-body .k-button-flat .k-button-text {
  color: #f8fafc !important;
  fill: currentColor !important;
}

.bb-form-card .k-button-flat:hover,
.bb-form-card .k-button-flat:focus {
  color: #ecfeff !important;
  background: rgba(20, 184, 166, 0.18) !important;
}

/* Telerik Popups (DropDown, Combo, Menu, DropDownButton) – dunkles Panel + helle Schrift */
.k-animation-container,
.k-animation-container-shown {
  color: #f8fafc;
}

.k-popup,
.k-animation-container .k-popup,
.k-animation-container .k-child-animation-container,
.k-list,
.k-list-ul,
.k-list-content,
.k-menu-popup,
.k-menu-group,
div.k-popup {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

.k-popup *,
.k-animation-container .k-popup *,
.k-list-item,
.k-list-optionlabel,
.k-menu-item,
.k-menu-link,
.k-menu-link-text {
  color: #f8fafc !important;
}

/* TreeView-Text nur im dunklen Menü/Popup – nicht global (Stammtisch-Baum ist hell) */
.bb-menu-panel .k-treeview-item,
.bb-menu-panel .k-treeview-leaf,
.bb-menu-panel .k-treeview .k-in,
.k-popup .k-treeview-item,
.k-popup .k-treeview-leaf,
.k-popup .k-treeview .k-in {
  color: #f8fafc !important;
}

.k-popup .k-button,
.k-popup .k-button .k-button-text,
.k-popup .k-button .k-svg-icon,
.k-popup .k-button .k-icon,
.k-popup .menubutton,
.k-popup .menubutton .k-button-text,
.k-popup .k-menu-item,
.k-popup .k-menu-link,
.k-popup .k-menu-link-text,
.k-popup .k-list-item-text,
.k-popup .k-list-item .k-list-item-text {
  color: #f8fafc !important;
  fill: currentColor !important;
  background: transparent;
}

.k-list-item:hover,
.k-list-item.k-hover,
.k-list-item.k-focus,
.k-list-item.k-selected,
.bb-menu-panel .k-treeview-leaf:hover,
.bb-menu-panel .k-treeview .k-in:hover,
.bb-menu-panel .k-treeview .k-selected > .k-in,
.k-popup .k-treeview-leaf:hover,
.k-popup .k-treeview .k-in:hover,
.k-menu-item:hover > .k-menu-link,
.k-popup .k-button:hover,
.k-popup .menubutton:hover,
.k-popup .k-button.k-hover {
  background: #0f766e !important;
  color: #ecfeff !important;
}

.k-popup .k-button:hover .k-button-text,
.k-popup .menubutton:hover .k-button-text {
  color: #ecfeff !important;
}

/* Bootstrap cards/alerts on dark */
.card {
  background: var(--bb-surface);
  border-color: var(--bb-border);
  color: var(--bb-fg);
  border-radius: var(--bb-radius);
}

.alert {
  border-radius: var(--bb-radius-sm);
}

/* Grids */
.k-grid {
  border-radius: var(--bb-radius) !important;
  border-color: var(--bb-border) !important;
  overflow: hidden;
}

/* Document images */
.bb-doc-img {
  max-width: min(100%, 420px);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-sm);
  border: 1px solid var(--bb-border);
}

/* Mobile denser forms */
@media (max-width: 576px) {
  .bb-form-card {
    border-radius: var(--bb-radius);
    margin-bottom: 0.75rem;
  }

  .bb-form-header {
    padding: 0.75rem 0.9rem;
    font-size: 1rem;
    border-radius: var(--bb-radius) var(--bb-radius) 0 0;
  }

  .bb-form-body {
    padding: 0.65rem 0.5rem 0.85rem;
  }

  .bb-form-segment {
    margin-bottom: 0.65rem;
  }

  .bb-segment-header {
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
  }

  .bb-segment-body {
    padding: 0.7rem 0.55rem !important;
  }

  .bb-form-element {
    margin-bottom: 0.65rem;
    padding: 0 0.25rem;
  }
}

@media (max-width: 400px) {
  .bb-form-body { padding: 0.5rem 0.35rem 0.75rem; }
  .bb-form-element { padding: 0 0.15rem; }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}

/* ── Beschwerdemanagement (Liste + Badges) ─────────────────────────────── */
.bb-beschw-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.bb-beschw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bb-beschw-chip {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #334155;
  color: #f1f5f9 !important;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  min-height: 36px;
}

.bb-beschw-chip.is-active {
  background: #0f766e;
  border-color: #5eead4;
  color: #ecfeff !important;
}

.bb-beschw-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.bb-beschw-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #1e293b;
  color: #f8fafc !important;
  border-radius: var(--bb-radius-sm, 10px);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  min-height: 48px;
}

.bb-beschw-card:hover,
.bb-beschw-card.is-selected {
  border-color: #5eead4;
  background: #0f766e;
}

.bb-beschw-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.bb-beschw-date {
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1 !important;
  margin-right: 0.25rem;
}

.bb-beschw-title {
  font-size: 1rem;
  font-weight: 650;
  color: #f8fafc !important;
  line-height: 1.3;
}

.bb-beschw-meta {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #94a3b8 !important;
}

.bb-beschw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #334155;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.bb-beschw-badge.is-prio-high {
  background: rgba(248, 113, 113, 0.22);
  border-color: #f87171;
  color: #fecaca !important;
}

.bb-beschw-badge.is-prio-mid {
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
  color: #fde68a !important;
}

.bb-beschw-badge.is-prio-low {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1 !important;
}

.bb-beschw-badge.is-open {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #bae6fd !important;
}

.bb-beschw-badge.is-progress {
  background: rgba(20, 184, 166, 0.2);
  border-color: #14b8a6;
  color: #99f6e4 !important;
}

.bb-beschw-badge.is-done {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8 !important;
}

.bb-beschw-card.is-done {
  opacity: 0.72;
}

.bb-beschw-statusline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-height: 40px;
}

/* Sanitized HTML (Mieter-Bemerkungen, Beschwerden, …) */
.bb-html-display {
  color: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
}

.bb-html-display h1,
.bb-html-display h2,
.bb-html-display h3,
.bb-html-display h4,
.bb-html-display h5 {
  color: inherit;
  margin: 0.5rem 0 0.35rem;
  font-weight: 700;
  line-height: 1.25;
}

.bb-html-display p {
  margin: 0.35rem 0;
}

.bb-html-display table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.bb-html-display th,
.bb-html-display td {
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 0.35rem 0.5rem;
  vertical-align: top;
}

.bb-html-display strong,
.bb-html-display b {
  font-weight: 700;
}

.bb-html-preview {
  color: inherit;
  opacity: 0.92;
}

/* Beschwerde-Management Übersicht */
.bb-bm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.9rem;
  color: var(--bb-fg-muted, #94a3b8);
}

.bb-bm-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  width: 100%;
}

.bb-bm-search input[type="search"],
.bb-bm-search .k-input {
  flex: 1 1 12rem;
  min-height: 42px;
}

.bb-bm-new-form {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--bb-radius-sm, 10px);
  background: rgba(15, 23, 42, 0.35);
}

/* Edit-Panel: immer oben, gut sichtbar nach Klick */
.bb-bm-edit-panel {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem;
  border: 2px solid #14b8a6;
  border-radius: var(--bb-radius, 14px);
  background: rgba(15, 23, 42, 0.55);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.4);
  scroll-margin-top: 0.75rem;
}

.bb-beschw-card {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(20, 184, 166, 0.25);
  touch-action: manipulation;
}

.bb-beschw-card.has-termin {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: inset 3px 0 0 #38bdf8;
}

.bb-beschw-badge.is-termin {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  color: #bae6fd !important;
}

/* Große Aktionsbuttons ganz oben im Edit */
.bb-beschw-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.bb-beschw-btn {
  flex: 1 1 8rem;
  min-height: 48px;
  border: none;
  border-radius: var(--bb-radius-sm, 10px);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  color: #fff !important;
}

.bb-beschw-btn-ok {
  background: #0f766e;
}

.bb-beschw-btn-ok:hover {
  background: #0d9488;
}

.bb-beschw-btn-danger {
  background: #b91c1c;
}

.bb-beschw-btn-danger:hover {
  background: #dc2626;
}

.bb-beschw-btn-save {
  background: #1d4ed8;
}

.bb-beschw-btn-save:hover {
  background: #2563eb;
}

.bb-beschw-btn-muted {
  background: #475569;
  flex: 0 1 auto;
}

.bb-beschw-btn-muted:hover {
  background: #64748b;
}