/* Hallenbelegung – alle Regeln sind auf .hb-app begrenzt, damit das Theme nicht beeinflusst wird */
.hb-app {
  --hb-bg: #f5f6f8;
  --hb-surface: #ffffff;
  --hb-text: #1d2330;
  --hb-muted: #667085;
  --hb-line: #d9dde3;
  --hb-line-soft: #eceef2;
  --hb-day-line: #8a93a3;
  --hb-accent: #2f5bd3;
  --hb-on-accent: #ffffff;
  --hb-danger: #c62828;
  color: var(--hb-text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}
.hb-app *, .hb-app *::before, .hb-app *::after { box-sizing: border-box; }
.hb-app [hidden] { display: none !important; }

/* Bedienelemente gegen Theme-Stile absichern */
.hb-app button, .hb-app .hb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0; padding: 6px 12px; min-height: 0; width: auto;
  border: 1px solid var(--hb-line); border-radius: 6px; background: var(--hb-surface); color: var(--hb-text);
  font: inherit; line-height: 1.4; text-transform: none; letter-spacing: normal; text-decoration: none;
  box-shadow: none; cursor: pointer;
}
.hb-app button:hover, .hb-app .hb-btn:hover { border-color: var(--hb-accent); background: var(--hb-surface); color: var(--hb-text); }
.hb-app button:disabled { opacity: .45; cursor: default; border-color: var(--hb-line); }
.hb-app button.hb-primary, .hb-app .hb-btn.hb-primary { background: var(--hb-accent); border-color: var(--hb-accent); color: var(--hb-on-accent); }
.hb-app button.hb-danger { color: var(--hb-danger); }
.hb-app input, .hb-app select { font: inherit; color: inherit; margin: 0; }

/* Werkzeugleiste */
.hb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.hb-app .hb-title, .hb-app dialog h3 { font-family: inherit; font-weight: 700; color: var(--hb-text); letter-spacing: normal; text-transform: none; }
.hb-app .hb-title { font-size: 20px; line-height: 1.2; margin: 0 auto 0 0; padding: 0; }
.hb-app .hb-title small { display: block; font-size: 12px; font-weight: normal; color: var(--hb-muted); }
.hb-readonly .hb-title { cursor: default; }
.hb-app:not(.hb-readonly) .hb-title { cursor: pointer; }
.hb-group { display: inline-flex; align-items: center; }
.hb-app .hb-group button { border-radius: 0; min-width: 34px; }
.hb-app .hb-group button:first-child { border-radius: 6px 0 0 6px; }
.hb-app .hb-group button:last-child { border-radius: 0 6px 6px 0; }
.hb-app .hb-group button + button { border-left: 0; }
.hb-app .hb-group .hb-label { min-width: 80px; }

/* Planauswahl (nur für Bearbeiter) */
.hb-planbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 12px; padding: 8px 10px;
              background: var(--hb-bg); border: 1px solid var(--hb-line); border-radius: 8px; font-size: 13px; }
.hb-app .hb-planbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.hb-app .hb-planbar select { width: auto; min-width: 200px; height: auto; padding: 5px 8px; border: 1px solid var(--hb-line);
                             border-radius: 6px; background: var(--hb-surface); font-weight: normal; }
.hb-plan-status { color: var(--hb-muted); }

/* Legende mit Vereinsfarben */
.hb-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; font-size: 13px; }
.hb-legend label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-weight: normal; }
.hb-readonly .hb-legend label { cursor: default; }
.hb-app .hb-legend input[type=color] {
  width: 18px; height: 18px; padding: 0; border: 1px solid var(--hb-line); border-radius: 4px;
  background: none; cursor: pointer; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.hb-app .hb-legend input[type=color]:disabled { cursor: default; opacity: 1; }
.hb-legend input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.hb-legend input[type=color]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.hb-hint { color: var(--hb-muted); }

/* Wochenraster: scrollt in sich, damit Tageszeile und Zeitachse stehen bleiben */
.hb-plan-wrap { overflow: auto; max-height: 80vh; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 8px; }
.hb-plan { display: grid; grid-template-columns: 48px repeat(7, minmax(calc(130px * var(--hb-zoom-x, 1)), 1fr));
           min-width: calc(980px * var(--hb-zoom-x, 1)); }
.hb-head { position: sticky; top: 0; z-index: 6; background: var(--hb-surface); text-align: center;
           border-bottom: 1px solid var(--hb-line); border-left: 3px solid var(--hb-day-line); }
.hb-plan > .hb-head:first-child { left: 0; z-index: 7; border-left: 0; }
.hb-day { font-weight: 600; padding: 6px 0 2px; }
.hb-lanes { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 11px; color: var(--hb-muted); }
.hb-lanes span { border-top: 1px solid var(--hb-line-soft); padding: 2px 0; overflow: hidden; }
.hb-axis, .hb-daybody { position: relative; height: calc(1080px * var(--hb-zoom-y, 1)); }
.hb-axis { position: sticky; left: 0; z-index: 4; background: var(--hb-surface); }
.hb-axis div { position: absolute; right: 6px; font-size: 11px; color: var(--hb-muted); transform: translateY(-50%); }
.hb-axis div.hb-minor { display: none; opacity: .75; }
.hb-plan.hb-detail .hb-axis div.hb-minor { display: block; }
.hb-daybody { border-left: 3px solid var(--hb-day-line); cursor: copy;
  background:
    linear-gradient(to right, transparent calc(25% - 1px), var(--hb-line-soft) calc(25% - 1px), var(--hb-line-soft) 25%, transparent 25%,
                              transparent calc(50% - 1px), var(--hb-line-soft) calc(50% - 1px), var(--hb-line-soft) 50%, transparent 50%,
                              transparent calc(75% - 1px), var(--hb-line-soft) calc(75% - 1px), var(--hb-line-soft) 75%, transparent 75%),
    repeating-linear-gradient(to bottom, var(--hb-line) 0 1px, transparent 1px calc(100% / 36), var(--hb-line-soft) calc(100% / 36), transparent calc(100% / 36 + 1px) calc(100% / 18)); }
.hb-readonly .hb-daybody { cursor: default; }

/* Einträge */
.hb-booking { position: absolute; border-radius: 4px; padding: 2px 4px; overflow: hidden; cursor: grab;
              color: #fff; font-size: 11px; line-height: 1.25; border: 1px solid rgba(0,0,0,.15);
              box-shadow: 0 1px 2px rgba(0,0,0,.15); touch-action: none; user-select: none;
              -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hb-readonly .hb-booking { cursor: default; touch-action: auto; }
.hb-booking b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-booking span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.hb-booking:hover { z-index: 3; filter: brightness(1.08); }
.hb-booking.hb-conflict { outline: 2px solid var(--hb-danger); outline-offset: 1px; }
.hb-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.hb-resize.hb-top { top: 0; bottom: auto; }
.hb-booking.hb-selected { outline: 2px solid var(--hb-accent); outline-offset: 1px; }
.hb-readonly .hb-resize { display: none; }
.hb-booking.hb-dragging { opacity: .35; }
.hb-booking.hb-ghost { pointer-events: none; z-index: 5; opacity: .9; outline: 2px dashed var(--hb-text); outline-offset: 1px; }
.hb-booking.hb-ghost.hb-blocked { outline: 2px solid var(--hb-danger); }
body.hb-dragging, body.hb-dragging * { cursor: grabbing !important; }

.hb-footer { margin-top: 8px; color: var(--hb-muted); font-size: 12px; }
.hb-footer .hb-saving { color: var(--hb-accent); }
.hb-footer .hb-error { color: var(--hb-danger); }
.hb-print-only { display: none; }
.hb-readonly .hb-edit-only { display: none !important; }

/* Dialog */
.hb-app dialog { border: 1px solid var(--hb-line); border-radius: 10px; padding: 0; margin: auto;
                 width: min(560px, calc(100vw - 32px)); background: var(--hb-surface); color: var(--hb-text); }
.hb-app dialog::backdrop { background: rgba(0,0,0,.4); }
.hb-app dialog form { padding: 16px 20px; margin: 0; }
.hb-app dialog h3 { margin: 0 0 12px; font-size: 18px; }
.hb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.hb-fields .hb-full { grid-column: 1 / -1; }
.hb-app .hb-fields label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; font-weight: normal; color: var(--hb-muted); }
.hb-app .hb-fields input, .hb-app .hb-fields select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--hb-line); border-radius: 6px;
  background: var(--hb-bg); font-size: 14px; height: auto; box-shadow: none; }
.hb-days { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hb-app .hb-days label { flex-direction: row; align-items: center; gap: 4px; color: var(--hb-text); font-size: 14px; }
.hb-app .hb-days input { width: auto; }
.hb-time { display: flex; gap: 4px; align-items: center; }
.hb-time select { flex: 1; }
.hb-app .hb-dlg-error { color: var(--hb-danger); margin-top: 10px; min-height: 1em; white-space: pre-line; }
.hb-actions { display: flex; gap: 8px; margin-top: 14px; }

/* Änderungsprotokoll */
.hb-app dialog.hb-dlg-wide { width: min(980px, calc(100vw - 32px)); }
.hb-log-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hb-log-bar .hb-spacer { flex: 1; }
.hb-app .hb-log-bar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; }
.hb-log-list { max-height: 60vh; overflow: auto; border: 1px solid var(--hb-line); border-radius: 6px; }
.hb-log-list .hb-hint, .hb-log-list .hb-dlg-error { margin: 12px; }
.hb-app table.hb-log { width: 100%; border-collapse: collapse; margin: 0; font-size: 13px; }
.hb-app table.hb-log th, .hb-app table.hb-log td { padding: 6px 8px; border: 0; border-bottom: 1px solid var(--hb-line-soft);
                                                   text-align: left; vertical-align: top; background: none; }
.hb-app table.hb-log th { position: sticky; top: 0; background: var(--hb-surface); color: var(--hb-muted); font-weight: 600; }
.hb-app table.hb-log td:first-child { white-space: nowrap; }
.hb-app table.hb-log ul { margin: 2px 0 0; padding-left: 18px; }
.hb-app table.hb-log li { margin: 0; }
.hb-actions .hb-spacer { flex: 1; }

@media (max-width: 640px) {
  .hb-fields { grid-template-columns: 1fr; }
  .hb-app .hb-title { width: 100%; }
}

/* Drucken: nur der Plan, ohne Theme; leere Tage fallen weg */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body.hb-printing > *:not(.hb-app) { display: none !important; }
  body.hb-printing { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .hb-app { --hb-text: #000; --hb-muted: #333; --hb-line: #8c8c8c; --hb-line-soft: #cfcfcf; --hb-day-line: #444; font-size: 10px; }
  /* Raster und Farben sind Hintergründe – ohne diese Angabe lassen Browser sie beim Drucken weg */
  .hb-app * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hb-app .hb-no-print, .hb-app dialog { display: none !important; }
  .hb-app .hb-print-only { display: block; }
  .hb-toolbar { margin-bottom: 4px; }
  .hb-legend { font-size: 10px; margin-bottom: 4px; }
  .hb-plan-wrap { overflow: visible; max-height: none; border-color: #999; border-radius: 0; }
  .hb-plan { min-width: 0; grid-template-columns: 34px repeat(var(--hb-print-days, 7), 1fr); }
  .hb-plan .hb-empty-day { display: none; }
  .hb-head { position: static; }
  /* relative statt sticky: Bezugsrahmen für die Uhrzeiten bleibt erhalten */
  .hb-axis { position: relative; }
  .hb-axis, .hb-daybody { height: 158mm; }
  .hb-axis div { font-size: 8px; right: 3px; color: #000; }
  .hb-plan.hb-detail .hb-axis div.hb-minor { display: none; }
  /* Schriftgröße je Eintrag (--hb-print-fs) so, dass Gruppenname und Titel vollständig passen;
     beide stehen zuerst und dürfen umbrechen, Uhrzeit und Ansprechpartner folgen, soweit Platz ist */
  .hb-booking { display: flex; flex-direction: column; font-size: var(--hb-print-fs, 8px); line-height: 1.15;
                padding: 1px 2px; box-shadow: none; }
  /* Silbentrennung nur, wenn ein Wort selbst bei kleinster Schrift nicht in die Spalte passt */
  .hb-booking .hb-v, .hb-booking b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
                                     -webkit-hyphens: auto; hyphens: auto; flex: none; }
  .hb-booking .hb-v { order: -2; font-weight: 700; opacity: 1; }
  .hb-booking b { order: -1; font-weight: 400; }
  .hb-booking.hb-conflict, .hb-booking.hb-selected { outline: none; }
  .hb-resize { display: none; }
}