/* ============================================================================
 * batOSPickr — Styles fuer alle vier Modi (date | time | datetime | appointment)
 *
 * Naming: bos-pickr-* (kebab-case, gemaess Naming-Convention)
 * Verbindlich gemaess docs/DateTimeArchitektur.md.
 *
 * Loest die alten Klassen .fp-quarter-* (DateTimePicker) und .bos-ap-*
 * (AppointmentPicker) ab — beide alten Picker und ihre CSS-Bloecke aus
 * site.css wurden entfernt.
 * ============================================================================ */

/* ── Popup-Container (datetime / appointment) ──────────────────────────── */

.bos-pickr-popup {
  width: 308px; /* flatpickr inline calendar width — Bar bricht so sauber um */
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.bos-pickr-popup .flatpickr-calendar.inline {
  box-shadow: none;
  border: none;
  margin: 0;
}

/* ── Zeit-Bar (Stunden + Viertelminuten) ───────────────────────────────── */

.bos-pickr-bar {
  padding: 10px 10px 12px;
  border-top: 1px solid #e6e6e6;
  background: #fafafa;
}

/* AllDay-Toggle (nur appointment-Modus) */
.bos-pickr-head {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.bos-pickr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: #495057;
  cursor: pointer;
  user-select: none;
}
.bos-pickr-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Stunden-Reihe — eckige Buttons, vollbreit */
.bos-pickr-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dee2e6;
}

/* Viertelminuten-Reihe — runde Buttons, zentriert */
.bos-pickr-mins {
  display: flex;
  gap: 6px;
  justify-content: center;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* Standard (Stunden = eckig, 4px radius) */
.bos-pickr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 4px;
  font-size: .75rem;
  font-weight: 500;
  color: #495057;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s ease;
}
.bos-pickr-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
.bos-pickr-btn.active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
  font-weight: 600;
}
.bos-pickr-btn.active:hover {
  background: #0b5ed7;
}

/* Minuten-Buttons: rund (Kreis), groesser */
.bos-pickr-min {
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 600;
  flex: 0 0 auto;
}
.bos-pickr-min.active {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .25);
}

/* ── Bottom-Sheet (Touch / PWA) ─────────────────────────────────────────── */

/* Backdrop: dunkler Overlay-Hintergrund, klickbar (schliesst das Sheet) */
.bos-pickr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 9998;
  animation: bos-pickr-backdrop-in .15s ease-out;
}

@keyframes bos-pickr-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sheet: schiebt vom unteren Bildschirmrand ein, vollbreit, abgerundete obere Ecken */
.bos-pickr-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .25);
  padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone Notch/Home-Indicator */
  max-height: 90vh;
  overflow-y: auto;
  animation: bos-pickr-sheet-in .22s cubic-bezier(.32, .72, 0, 1);
}

@keyframes bos-pickr-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Inline-Kalender im Sheet bekommt mehr Raum */
.bos-pickr-sheet .flatpickr-calendar.inline {
  width: 100% !important;
  max-width: 100%;
  box-shadow: none;
  border: none;
  margin: 0;
  font-size: 1rem;
}
.bos-pickr-sheet .flatpickr-day {
  height: 44px;
  line-height: 44px;
  max-width: none;
}

/* Sheet-Bar: groesszuegigeres Padding + groessere Touch-Targets */
.bos-pickr-sheet .bos-pickr-bar {
  padding: 16px 16px 24px;
}

/* ── Touch-Geraete: groessere Hit-Targets (Apple HIG/Material: min 44px) ── */

@media (pointer: coarse) {
  .bos-pickr-btn {
    min-width: 44px;
    height: 44px;
    font-size: .875rem;
    padding: 0 6px;
  }
  .bos-pickr-min {
    min-width: 56px;
    width: 56px;
    height: 56px;
    font-size: .9375rem;
  }
  .bos-pickr-hours {
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
  }
  .bos-pickr-mins {
    gap: 10px;
  }
  .bos-pickr-bar {
    padding: 14px 14px 16px;
  }
  .bos-pickr-toggle {
    font-size: .9375rem;
  }
  .bos-pickr-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}