/* ==========================================================================
   Timetics dunkel

   Timetics bringt kein dunkles Erscheinungsbild mit, es rendert eine
   helle Ant-Design-Oberflaeche. Alles hier ist auf
   .timetics-shortcode-wrapper begrenzt, damit nichts nach aussen wirkt.
   Die Werte sind dieselben wie im uebrigen Auftritt.
   ========================================================================== */

.timetics-shortcode-wrapper {
  --tt-grund:  #1b1a1a;
  --tt-karte:  #252424;
  --tt-feld:   #2c2c31;
  --tt-linie:  #3a3939;
  --tt-fg:     #ffffff;
  --tt-soft:   #d6dede;
  --tt-leise:  #aaaaaa;
  --tt-still:  #8f8f8f;

  color: var(--tt-fg);
}

/* Timetics setzt eine eigene Ueberschrift ueber den Kalender. Auf jeder
   Seite steht darueber schon ein Abschnittskopf, der dasselbe sagt.
   Zweimal hintereinander aufgefordert zu werden liest sich wie ein
   Fehler, deshalb faellt diese weg. */
.timetics-shortcode-wrapper .tt-section-title { display: none !important; }

/* --- Die beiden Karten ---------------------------------------------- */

.timetics-shortcode-wrapper .tt-form-left-sidebar,
.timetics-shortcode-wrapper .tt-booking-body-wrap {
  border: 1px solid var(--tt-linie);
  border-radius: 20px;
  background: var(--tt-karte);
  box-shadow: none;
}

/* Timetics zieht die linke Karte auf die Hoehe des Kalenders. Seit die
   Doppelungen raus sind, steht darin so wenig, dass zwei Drittel leer
   bleiben. Sie darf auf ihren Inhalt schrumpfen. */
.timetics-shortcode-wrapper .tt-form-left-sidebar { height: auto !important; }

/* --- Schrift --------------------------------------------------------- */

.timetics-shortcode-wrapper .ant-typography,
.timetics-shortcode-wrapper .tt-meeting-name,
.timetics-shortcode-wrapper h1,
.timetics-shortcode-wrapper h2,
.timetics-shortcode-wrapper h3,
.timetics-shortcode-wrapper h4,
.timetics-shortcode-wrapper strong { color: var(--tt-fg); }

.timetics-shortcode-wrapper .ant-typography-secondary,
.timetics-shortcode-wrapper .tt-meeting-description,
.timetics-shortcode-wrapper .ant-list-item,
.timetics-shortcode-wrapper p,
.timetics-shortcode-wrapper span,
.timetics-shortcode-wrapper li { color: var(--tt-leise); }

.timetics-shortcode-wrapper .tt-meeting-name { font-weight: 700; letter-spacing: -.3px; }

/* --- Listen und Trennlinien ------------------------------------------ */

.timetics-shortcode-wrapper .ant-list-split .ant-list-item,
.timetics-shortcode-wrapper .ant-list-item { border-color: var(--tt-linie) !important; }

.timetics-shortcode-wrapper .ant-divider { border-color: var(--tt-linie); }

/* --- Auswahlfelder ---------------------------------------------------- */

.timetics-shortcode-wrapper .ant-select-selector,
.timetics-shortcode-wrapper .ant-input,
.timetics-shortcode-wrapper .ant-input-affix-wrapper,
.timetics-shortcode-wrapper input,
.timetics-shortcode-wrapper textarea {
  border-color: var(--tt-linie) !important;
  border-radius: 12px !important;
  background: var(--tt-feld) !important;
  color: var(--tt-fg) !important;
}

.timetics-shortcode-wrapper .ant-select-selection-item,
.timetics-shortcode-wrapper .ant-select-arrow,
.timetics-shortcode-wrapper .ant-select-suffix { color: var(--tt-fg) !important; }

.timetics-shortcode-wrapper input::placeholder,
.timetics-shortcode-wrapper textarea::placeholder { color: var(--tt-still) !important; }

/* --- Kalender --------------------------------------------------------- */

.timetics-shortcode-wrapper .flatpickr-calendar,
.timetics-shortcode-wrapper .flatpickr-months,
.timetics-shortcode-wrapper .flatpickr-month,
.timetics-shortcode-wrapper .flatpickr-weekdays {
  background: transparent !important;
  color: var(--tt-fg) !important;
  box-shadow: none !important;
}

.timetics-shortcode-wrapper .flatpickr-current-month,
.timetics-shortcode-wrapper .flatpickr-current-month input,
.timetics-shortcode-wrapper .cur-year,
.timetics-shortcode-wrapper .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: var(--tt-fg) !important;
  font-weight: 700;
  /* Das Jahr-Eingabefeld laeuft breiter als sein Wrapper und malt links
     und rechts eine 1px-Linie neben "2026". Ohne Rahmen faellt die Naht weg. */
  border: 0 !important;
}

.timetics-shortcode-wrapper .flatpickr-weekday {
  color: var(--tt-still) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* Pfeile links und rechts: standardmaessig dunkelblau hinterlegt. */
.timetics-shortcode-wrapper .flatpickr-prev-month,
.timetics-shortcode-wrapper .flatpickr-next-month {
  border-radius: 50%;
  background: var(--tt-feld) !important;
  fill: var(--tt-fg) !important;
}

.timetics-shortcode-wrapper .flatpickr-prev-month svg,
.timetics-shortcode-wrapper .flatpickr-next-month svg { fill: var(--tt-fg) !important; }

.timetics-shortcode-wrapper .flatpickr-prev-month.flatpickr-disabled,
.timetics-shortcode-wrapper .flatpickr-next-month.flatpickr-disabled { opacity: .35; }

/* Einzelne Tage */
.timetics-shortcode-wrapper .flatpickr-day {
  border-radius: 10px;
  border-color: transparent;
  background: transparent;
  color: var(--tt-soft);
}

.timetics-shortcode-wrapper .flatpickr-day:hover {
  border-color: transparent;
  background: var(--tt-feld);
  color: var(--tt-fg);
}

/* Buchbare Tage bekommen eine eigene Flaeche, damit man sie erkennt. */
.timetics-shortcode-wrapper .flatpickr-day.tt-available-day,
.timetics-shortcode-wrapper .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
  background: var(--tt-feld);
  color: var(--tt-fg);
  font-weight: 600;
}

.timetics-shortcode-wrapper .flatpickr-day.selected,
.timetics-shortcode-wrapper .flatpickr-day.selected:hover {
  border-color: transparent;
  background: #ffffff;
  color: #1b1a1a;
  font-weight: 700;
}

.timetics-shortcode-wrapper .flatpickr-day.flatpickr-disabled,
.timetics-shortcode-wrapper .flatpickr-day.prevMonthDay,
.timetics-shortcode-wrapper .flatpickr-day.nextMonthDay {
  background: transparent;
  /* #5a5a5a hielt auf der Kartenflaeche nur 2,2:1. Gesperrte Tage duerfen
     zuruecktreten, aber lesbar bleiben: #7a7a7a haelt 3,6:1. */
  color: #7a7a7a;
}

/* --- Schaltflaechen --------------------------------------------------- */

.timetics-shortcode-wrapper .ant-btn-primary,
.timetics-shortcode-wrapper button.ant-btn-primary {
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1b1a1a !important;
  font-weight: 600;
  box-shadow: none !important;
}

.timetics-shortcode-wrapper .ant-btn-primary:hover { background: var(--tt-soft) !important; }

/*
   Die Zeitfenster sind ebenfalls ant-btn-primary. Als weisse Pillen
   wuerden sie den Blick von der eigentlichen Schaltflaeche abziehen und
   die Beschriftung stuende grau auf weiss. Innerhalb der Liste also
   dunkel, erst die Bestaetigung darunter ist wieder weiss.
*/
.timetics-shortcode-wrapper .ant-list-item .ant-btn-primary {
  border: 1px solid var(--tt-linie) !important;
  border-radius: 12px !important;
  background: var(--tt-feld) !important;
  color: var(--tt-fg) !important;
}

.timetics-shortcode-wrapper .ant-list-item .ant-btn-primary:hover {
  border-color: var(--tt-soft) !important;
  background: #34343a !important;
}

/* Beschriftungen erben sonst das Grau der allgemeinen span-Regel. */
.timetics-shortcode-wrapper .ant-btn span,
.timetics-shortcode-wrapper .ant-btn { color: inherit !important; }

.timetics-shortcode-wrapper .ant-list-item .ant-btn-primary span { color: var(--tt-fg) !important; }

/* Die Jahreszahl im Kalenderkopf wurde beschnitten. */
.timetics-shortcode-wrapper .numInput.cur-year {
  width: auto !important;
  min-width: 5ch;
  padding-inline: 2px;
  color: var(--tt-fg) !important;
}

.timetics-shortcode-wrapper .ant-btn-default,
.timetics-shortcode-wrapper .ant-btn:not(.ant-btn-primary) {
  border: 1px solid var(--tt-linie) !important;
  border-radius: 999px !important;
  background: var(--tt-feld) !important;
  color: var(--tt-fg) !important;
}

/* --- Doppelungen entfernen -------------------------------------------

   Timetics zeigt in der linken Karte Gastgeber, Titel und Beschreibung.
   Alle drei stehen im Abschnitt darueber schon: der Name samt Portrait
   in der Kontaktspalte, die Beschreibung fast wortgleich als Fliesstext.
   Doppelt gelesen wirkt es wie ein Fehler, deshalb bleibt in der Karte
   nur, was der Abschnitt noch nicht sagt: Dauer, Ort, Zeitzone.
   -------------------------------------------------------------------- */

/* Portrait und Name des Gastgebers. Der Name war ausserdem schwarz auf
   dunkel und damit ohnehin unlesbar. */
.timetics-shortcode-wrapper .tt-form-left-sidebar > .ant-space:first-child { display: none; }

.timetics-shortcode-wrapper .tt-meeting-description { display: none; }

/* Ohne die Kopfzeile darueber sitzt der Titel sonst zu tief. */
.timetics-shortcode-wrapper .tt-meeting-name {
  margin-top: 0;
  margin-bottom: 22px;
  font-size: 22px;
}

/* Die Eckdaten duerfen jetzt etwas mehr Raum haben. */
.timetics-shortcode-wrapper .tt-meeting-location-list .ant-list-item { padding-block: 14px; }

/* --- Leerer Zustand rechts -------------------------------------------
   Vor der Datumsauswahl steht dort eine graue Rasterkachel, die wie ein
   fehlendes Bild aussieht. Der Satz allein sagt dasselbe.
   -------------------------------------------------------------------- */

/* Die Kachel ist ein inline-SVG mit fest verdrahtetem Hellgrau. */
.timetics-shortcode-wrapper .ant-list-empty-text svg,
.timetics-shortcode-wrapper .ant-list-empty-text img,
.timetics-shortcode-wrapper .ant-empty-image { display: none !important; }

.timetics-shortcode-wrapper .ant-list-empty-text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 0 18px;
  color: var(--tt-still) !important;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.timetics-shortcode-wrapper .ant-list-empty-text p { color: inherit !important; margin: 0; }

/* --- Rollbalken neben den Zeitfenstern --------------------------------
   Timetics faerbt den Griff hell. Auf der dunklen Karte wirkt das wie
   ein Strich quer durch die Liste.
   -------------------------------------------------------------------- */

/*
   Nur die Standard-Eigenschaften, keine ::-webkit-scrollbar-Regeln:
   sobald scrollbar-width gesetzt ist, ignoriert Chromium die Pseudo-
   Elemente, und in Firefox haben sie noch nie gewirkt.
*/
.timetics-shortcode-wrapper .tt-booking-slot-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--tt-linie) transparent;
}

/* --- Auswahl-Aufklappmenue liegt ausserhalb des Wrappers -------------- */

.ant-select-dropdown {
  border: 1px solid #3a3939 !important;
  background: #2c2c31 !important;
}

.ant-select-dropdown .ant-select-item { color: #d6dede !important; }

.ant-select-dropdown .ant-select-item-option-active,
.ant-select-dropdown .ant-select-item-option-selected {
  background: #3a3939 !important;
  color: #ffffff !important;
}

/* Datenschutzhinweis unter dem Kalender, kommt aus fy-rechtstexte.php. */
.fy-termin-hinweis {
  margin: 10px 4px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #a3a3a3;
}

.fy-termin-hinweis a {
  color: #d6dede;
  text-decoration: underline;
  text-underline-offset: 2px;
}