/* Header: schlicht dunkel (Website-Farbe), Mini-Logo + Text zentriert */
#body-public #header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #000000 !important;
  background-image: none !important;
}
#body-public #header .header-start,
#body-public #header .header-end {
  display: none !important;
}
#body-public #header::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 6px;
  margin-right: 12px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+CiAgPCEtLQogICAgUXVlbGxlIGbDvHIgcHVibGljL2xvZ28ucG5nIChpbSBPcmdhbml6YXRpb24tSlNPTi1MRCByZWZlcmVuemllcnQpLgogICAgTmV1IHJlbmRlcm4gbmFjaCBqZWRlciDDhG5kZXJ1bmc6CiAgICAgIHJzdmctY29udmVydCAtdyA1MTIgLWggNTEyIHB1YmxpYy9sb2dvLnN2ZyAtbyBwdWJsaWMvbG9nby5wbmcKICAgIFBhbGV0dGUgaWRlbnRpc2NoIHp1IGdsb2JhbC5jc3M6IEdydW5kICMwYjBhMDksIEFremVudCAjZWZhODMxLCBUZXh0ICNmMWVlZTkuCiAgLS0+CiAgPHJlY3Qgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIGZpbGw9IiMwYjBhMDkiLz4KICA8dGV4dCB4PSIyNTYiIHk9IjI4MCIgdGV4dC1hbmNob3I9Im1pZGRsZSIKICAgICAgICBmb250LWZhbWlseT0iU291cmNlIFNlcmlmIDQsIE5vdG8gU2VyaWYsIEdlb3JnaWEsIHNlcmlmIgogICAgICAgIGZvbnQtc2l6ZT0iMTgwIgogICAgICAgIGZvbnQtd2VpZ2h0PSI3MDAiCiAgICAgICAgZmlsbD0iI2VmYTgzMSI+RDwvdGV4dD4KICA8dGV4dCB4PSIyNTYiIHk9IjM4MCIgdGV4dC1hbmNob3I9Im1pZGRsZSIKICAgICAgICBmb250LWZhbWlseT0iU291cmNlIFNlcmlmIDQsIE5vdG8gU2VyaWYsIEdlb3JnaWEsIHNlcmlmIgogICAgICAgIGZvbnQtc2l6ZT0iMzQiCiAgICAgICAgZm9udC13ZWlnaHQ9IjYwMCIKICAgICAgICBsZXR0ZXItc3BhY2luZz0iOCIKICAgICAgICBmaWxsPSIjZjFlZWU5Ij5EQUdFTlRJQzwvdGV4dD4KPC9zdmc+Cg==") center/contain no-repeat;
}

/* Booking-Layout: feste 900px-Breite aufheben, sonst Überlappung im iframe (~870px) */
#body-public .booking {
  width: 100% !important;
  max-width: 900px;
  box-sizing: border-box;
  padding: 0 16px;
}
#body-public .booking__config-user-info {
  min-width: 240px;
  max-width: 100%;
}
/* Datepicker-Popup: die App setzt inline left:-54px, dadurch überdeckt das
   opake Panel die Beschreibungsspalte. left:0 hält es in der eigenen Spalte. */
#body-public .booking__date-selection .mx-datepicker-popup {
  left: 0 !important;
}
/* Öffentliche Seiten: Hintergrund komplett schwarz wie Header/Website */
#body-public {
  --color-main-background: #000000;
  background-color: #000000 !important;
}

/* Logo-Avatar + Name „Dagentic" auf der Buchungsseite zentrieren, mit Luft drumherum */
#body-public .booking__config-user-info .avatardiv {
  display: block !important;
  margin: 32px auto 12px !important;
}
#body-public .booking__display-name {
  text-align: center;
  margin-bottom: 32px;
}
/* Datepicker: Verfuegbarkeit statt Vergangenheit markieren (2026-08-09).
   vue2-datepicker gibt disabled-Zellen (Vergangenheit) eine Fuellflaeche, die
   auf dem schwarzen Grund wie eine Hervorhebung wirkt — genau falsch herum.
   Stattdessen: Vergangenheit + Wochenenden (Slots gibt es nur Mo–Fr) leise
   ausgrauen, grundsaetzlich buchbare Tage (kuenftige Werktage im Monat) mit
   Petrol-Punkt markieren. Echte „hat noch freie Slots"-Info pro Tag ist ohne
   eigenes JS nicht moeglich — die App laedt Slots nur fuer den gewaehlten Tag. */
#body-public .mx-table-date .cell.disabled {
  background: transparent !important;
  color: rgba(241, 238, 233, 0.25) !important;
}
#body-public .mx-table-date td.cell:nth-child(6):not(.active),
#body-public .mx-table-date td.cell:nth-child(7):not(.active) {
  color: rgba(241, 238, 233, 0.25) !important;
}
#body-public .mx-table-date td.cell:not(.disabled):not(.not-current-month):not(:nth-child(6)):not(:nth-child(7)) {
  position: relative;
}
#body-public .mx-table-date td.cell:not(.disabled):not(.not-current-month):not(:nth-child(6)):not(:nth-child(7))::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: oklch(0.74 0.09 210 / 0.85);
}
/* Der ausgewaehlte Tag ist schon blau hervorgehoben — kein Punkt noetig. */
#body-public .mx-table-date td.cell.active::after {
  display: none;
}

/* Slot-Bestaetigungsansicht (nach Klick auf ein Zeitfenster, 2026-08-09):
   Logo/Name/Titel/Beschreibung wiederholen sich hier nur — ausblenden.
   Die Fakten des gewaehlten Slots (Datum, Uhrzeit, Zeitzone) bleiben als
   kompakte Zeile ueber dem Formular. Statt des 720px-Zweispalters eine
   schmale einspaltige Karte, damit der Rahmen zur Formulargroesse passt. */
#body-public .booking-appointment-details {
  flex-direction: column !important;
  width: min(100%, 440px) !important;
  max-height: none !important;
  margin: 0 auto;
}
#body-public .booking-appointment-details .booking-details .avatardiv,
#body-public .booking-appointment-details .booking__display-name,
#body-public .booking-appointment-details .booking__name,
#body-public .booking-appointment-details .booking__description {
  display: none !important;
}
#body-public .booking-appointment-details .booking-details {
  flex: 0 0 auto !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-bottom: 8px;
}
#body-public .booking-appointment-details .booking__date,
#body-public .booking-appointment-details .booking__time {
  padding-top: 4px !important;
}
#body-public .booking-appointment-details .appointment-details {
  max-width: none !important;
  padding-inline-start: 0 !important;
  width: 100%;
}

#body-public #header::after {
  content: "Buchen Sie direkt einen Gesprächstermin – 30 Min.";
  color: #f1eee9;
  /* Skaliert mit der Breite des iframes statt umzubrechen: `vw` misst hier die
     Breite des Widgets, nicht die der Seite - was fuer eine Zeile, die immer
     einzeilig bleiben soll, genau das gewuenschte Verhalten ist. Obergrenze
     22 px, darunter schrumpft sie mit. nowrap erzwingt die eine Zeile. */
  font-size: clamp(11px, 3.1vw, 22px);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* Die Leiste muss mitwachsen, sonst schneidet sie die groessere Schrift an.
   height:auto statt fester Hoehe, weil der Text auf schmalen Geraeten
   zweizeilig wird. */
#body-public #header {
  height: 62px !important;
  padding: 0 12px !important;
}


/* Seitenhintergrund auf Website-Schwarz (2026-08-09).
   Ohne diese Regel scheint Nextclouds Standardfarbe (#00679e) rings um die
   Buchungskarte durch – im iframe auf dagentic.de sichtbar als blaue Flaeche
   ober- und unterhalb der Karte. Der Versuch, nur das Hintergrundbild per
   `occ theming:config background backgroundColor` abzuschalten, hat die Farbe
   erst freigelegt statt sie zu entfernen.
   Wert identisch zu --bg in global.css; bei Aenderung dort mitziehen. */
#body-public {
  background-color: #000000 !important;
  background-image: none !important;
}
/* Die Flaeche malt in Wahrheit das html-Element: body#body-public ist 0 px
   hoch, weil Nextcloud seine Kinder per position:fixed aus dem Fluss nimmt.
   Gemessen wurde rgb(0,103,158) auf html.ng-csp. `:has()` haelt die Regel auf
   oeffentliche Seiten beschraenkt, das eingeloggte Backend bleibt unberuehrt. */
html:has(#body-public) {
  background-color: #000000 !important;
  background-image: none !important;
}