/* css/styles.css */

/* -------------------------------------------------- */
/* Allgemeines Layout fürs Formular                  */
/* -------------------------------------------------- */
#wtb-form {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

#wtb-form .step h2 {
  font-weight: 700;
}

/* Steps: nur der aktuelle Step anzeigen */
.step {
  display: none;
}
#step-1 {
  display: block;
}

/* Überschriften */
.step h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

/* Formularelemente */
.step input[type="text"],
.step input[type="number"],
.step input[type="email"],
.step input[type="tel"],
.step select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ← NEU: Damit Grid‐/Flex‐Kinder nicht wieder auf 100% gepresst werden */
.wtb-row > *,
.wtb-km-container > * {
  width: auto;      /* width:100% aufbrechen */
  min-width: 0;     /* erlaubt das Schrumpfen unter Inhaltsbreite */
  box-sizing: border-box;
}

.step label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Buttons */
.step .button {
  margin: 0.5rem 0.25rem 0;
}

/* Primärer Button (Weiter & Buchen) */
.step .button-primary,
#wtb-submit {
  background-color: #333333 !important;
  border-color:     #333333 !important;
  color:            #ffffff !important;
}
.step .button-primary:hover,
#wtb-submit:hover {
  background-color: #444444 !important;
  border-color:     #444444 !important;
}

/* -------------------------------------------------- */
/* Next-Button & Buchen-Button: hellgrau wenn disabled, dunkelgrau sonst */
/* -------------------------------------------------- */
/* disabled */
.step .next-step[disabled],
#wtb-submit[disabled] {
  background-color: #aaaaaa !important;
  border-color:     #aaaaaa !important;
  color:            #ffffff !important;
  cursor:           not-allowed !important;
  opacity:          0.7 !important;
}

/* enabled */
.step .next-step:not([disabled]),
#wtb-submit:not([disabled]) {
  background-color: #333333 !important;
  border-color:     #333333 !important;
  color:            #ffffff !important;
  cursor:           pointer !important;
}

/* hover only when enabled */
.step .next-step:not([disabled]):hover,
#wtb-submit:not([disabled]):hover {
  background-color: #444444 !important;
  border-color:     #444444 !important;
}

/* -------------------------------------------------- */
/* Prev-Button links, Next-Button rechts ausrichten  */
/* -------------------------------------------------- */
.step::after {
  content: "";
  display: table;
  clear: both;
}
.step .prev-step {
  float: left;
}
.step .next-step {
  float: right;
}

/* -------------------------------------------------- */
/* FullCalendar Styles                               */
/* -------------------------------------------------- */
#wtb-calendar {
  max-width: 900px;
  margin: 2rem auto;
}
.fc {
  font-family: inherit;
}
.fc-toolbar {
  margin-bottom: 1rem;
}
.fc .fc-button {
  background: #0073aa;
  border: none;
  color: #fff;
  margin: 0 0.25rem;
}
.fc .fc-button:hover {
  background: #006799;
}
.fc .fc-daygrid-day {
  min-height: 100px;
  vertical-align: top;
  position: relative;
}

/* Ausgewählter Tag */
.wtb-selected-day {
  background-color: #cce5ff !important;
}

/* -------------------------------------------------- */
/* Deaktivierte Tage                                  */
/* -------------------------------------------------- */
.fc-day-disabled {
  background-color: #f5f5f5 !important;
  pointer-events: none !important;
  cursor: default !important;
}
.fc-day-disabled.holiday {
  background-color: #fff9c4 !important;
}

/* -------------------------------------------------- */
/* Label in jeder gesperrten Zelle                   */
/* -------------------------------------------------- */
.wtb-closure-label {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 0.75em;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
  z-index: 2;
  opacity: 1 !important;
}
.wtb-closure-label.holiday {
  background-color: #ffee57 !important;
  color: #000 !important;
}
.wtb-closure-label.closed {
  background-color: #e5534b !important;
  color: #000 !important;
}
.wtb-closure-label.full {
  background-color: #dbdbdb !important;
  color:            #000      !important;
}
.wtb-closure-label.free {
  background-color: #73ff81 !important;
  color:            #000      !important;
}
.wtb-closure-label.today {
  background-color: #f5f5f5 !important;
  color:            #000      !important;
}

/* -------------------------------------------------- */
/* Label für verfügbare AMinuten in jeder Zelle             */
/* -------------------------------------------------- */
.wtb-available-aw {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.75em;
  padding: 0.1rem 0.3rem;
  background-color: rgba(0,124,186,0.1);
  color: #007cba;
  border-radius: 0.2rem;
  z-index: 2;
}

/* Sonstige-Arbeiten Abstand nur 0.25rem */
.wtb-other-label {
  display: block;
  margin-bottom: 0.25rem;
}
.wtb-other-text {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
}

/* STEP 1: Grid für Baujahr + KM/Kontainer */
.wtb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* zwei gleich breite Spalten */
  gap: 0.5rem;
  margin-bottom: 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Innerhalb des KM-Containers: 2 Teile Text, 1 Teil Dropdown */
.wtb-km-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
  box-sizing: border-box;
}

/* Damit unsere Grid-Kinder nicht mehr per globaler Regel 100% bekommen */
.wtb-row > *,
.wtb-km-container > * {
  width: auto;
  min-width: 0;
  box-sizing: border-box;
}
/* in STEP 1 keine extra Unterabstände in den Grid-Kindern, 
   nur das margin-bottom der Reihe selbst soll wirken */
.wtb-row > *,
.wtb-km-container > * {
  margin-bottom: 0 !important;
}
/*.wtb-available-aw {
  display: none !important;
} */
.wtb-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
/* Modal‑Inhalt zentriert in der Mitte */
.wtb-modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.wtb-modal-content h2 {
  margin-top: 0;
}
.wtb-modal-content ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.2rem;
}
.wtb-modal-content a {
  color: #0073aa;
  text-decoration: none;
}

@media (max-width: 768px) {
  /* Gesamten Kalender proportional kleiner machen */
  #wtb-calendar {
  /* skaliert je nach Viewport zwischen 0.5rem und 0.8rem */
  font-size: clamp(0.5rem, 1.2vw, 0.8rem);
  line-height: 1.2;
  }

  /* Innenabstände etwas reduzieren */
  #wtb-calendar .fc-button,
  #wtb-calendar .fc-col-header-cell-cushion,
  #wtb-calendar .fc-daygrid-day-number {
    padding: 0.2em 0.4em !important;
  }

  /* Tabelle auf volle Breite bringen und Scrollbar vermeiden */
  #wtb-calendar .fc-scrollgrid-sync-table {
    width: 100% !important;
    table-layout: fixed;         /* gleichmäßige Spaltenbreite */
  }

  /* Kopfzeile und Zellen enger zusammenrücken */
  #wtb-calendar .fc-col-header-cell,
  #wtb-calendar .fc-daygrid-day {
    border-width: 1px !important;
  }

  /* Bei sehr engen Displays: horizontales Scrollen erlauben */
  #wtb-calendar .fc-scroller {
    overflow-x: auto !important;
  }
  #wtb-calendar .fc-daygrid-day {
    position: relative; /* sicherstellen, dass das parent positioniert ist */
  }
  #wtb-calendar .wtb-closure-label {
    /* Platz lassen rechts und links */
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    max-width: calc(100% - 8px) !important;
    white-space: normal !important;      /* Umbruch erlauben */
    word-break: break-word !important;    /* Wörter umbrechen */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;           /* damit max-width greift */
  }
  /* Wenn mehr als ein Label in der Zelle wäre, nur das erste anzeigen */
  #wtb-calendar td .wtb-closure-label + .wtb-closure-label {
    display: none !important;
  }
}