/*
 * SuperSaaS Calendar – Frontend Styles
 * Farben und Randbreiten der Slot-Cards kommen als Inline-Styles aus dem JS
 * (exakt wie das Original). Hier stehen nur Layout und UI-Controls.
 */

/* ─── Container ─────────────────────────────────────────────────────────────── */
.sscal-container {
  max-width: 600px;
  margin-inline: auto;
  font-family: inherit;
  color: inherit;
}

/* ─── Filter-Leiste ─────────────────────────────────────────────────────────── */
.sscal-filter-bar {
  text-align: center;
  margin-bottom: 20px;
}

/* ── Desktop: Buttons ── */
.sscal-desktop-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sscal-view-btn {
  padding: 10px 20px;
  font-size: 1em;
  font-family: inherit;
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: white;
  color: #333;
  transition: all 0.3s ease;
  min-width: 180px;
}

.sscal-view-btn:hover {
  background: #f0f0f0;
  border-color: #7ebec5;
}

.sscal-view-btn:focus-visible {
  outline: 3px solid #7ebec5;
  outline-offset: 2px;
}

.sscal-view-btn.active {
  background: #7ebec5 !important;
  color: white !important;
  border-color: #7ebec5 !important;
}

/* ── Mobile: Dropdown ── */
.sscal-mobile-dropdown {
  display: none;
}

@media (max-width: 767px) {
  .sscal-desktop-buttons {
    display: none;
  }

  .sscal-mobile-dropdown {
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 12px 16px;
    font-size: 1em;
    font-family: inherit;
    border: 2px solid #ddd;
    border-radius: 20px;
    background: white;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    margin-inline: auto;
  }

  .sscal-mobile-dropdown:focus {
    outline: none;
    border-color: #7ebec5;
    box-shadow: 0 0 0 3px rgba(126, 190, 197, 0.1);
  }
}

/* ─── Responsive Datum/Status-Zeile ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .sscal-desktop-zeile {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .sscal-desktop-zeile > .sscal-status-rechts {
    flex: 1;
    text-align: right;
  }
  .sscal-desktop-zeile > .sscal-status-links {
    flex: 1;
    text-align: left;
  }
}

/* ─── Zustände: Loading / Leer / Fehler ─────────────────────────────────────── */
.sscal-loading,
.sscal-empty,
.sscal-error {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.sscal-error { color: #8B0000; }

/* Spinner */
@keyframes sscal-spin {
  to { transform: rotate(360deg); }
}

.sscal-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #7ebec5;
  border-radius: 50%;
  animation: sscal-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ─── „Mehr Termine zeigen"-Button ──────────────────────────────────────────── */
.sscal-more-wrap {
  text-align: center;
  margin-top: 16px;
}

.sscal-more-btn {
  padding: 8px 20px;
  font-size: 1em;
  font-family: inherit;
  cursor: pointer;
  border-radius: 18px;
  border: 1px solid #ddd;
  background: white;
  color: #333;
}

.sscal-more-btn:hover,
.sscal-more-btn:focus-visible {
  background: #f0f0f0;
  border-color: #7ebec5;
  outline: none;
}

/* ─── controls="dropdown": Dropdown auf allen Bildschirmgrößen ───────────────── */
.sscal-controls--dropdown .sscal-desktop-buttons {
  display: none !important;
}

.sscal-controls--dropdown .sscal-mobile-dropdown {
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 12px 16px;
  font-size: 1em;
  font-family: inherit;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: white;
  color: #333;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  margin-inline: auto;
}

.sscal-controls--dropdown .sscal-mobile-dropdown:focus {
  outline: none;
  border-color: #7ebec5;
  box-shadow: 0 0 0 3px rgba(126, 190, 197, 0.1);
}