/* pickers.css — Generische Drawer-Picker (Duration, Betreff, Async, Phase).
   Ausgelagert aus domain/termin/tm-attendees-editor.css, wo diese
   generischen Picker-Regeln historisch lagen, obwohl duration-/betreff-/async-/
   phase-picker.js appweit genutzt werden (nicht termin-spezifisch).

   LADEREIHENFOLGE: MUSS nach components/lists/empty-state.css UND nach den
   components/drawers/_shared/-Basen (drawer-fields.css, shared-drawer.css) laden.
   Grund: `.app-phase-picker-empty/-error` ist ein MERGE mit empty-state.css
   (dort Flex-Zentrierung, hier padding/color/italic/font-size als Override) —
   diese Datei muss gewinnen, sonst kippt der Empty-State-Look. Alle anderen
   Selektoren (`-label/-panel/-item/-search` etc.) sind unique; die Basis-Trigger
   (`.app-betreff-picker` etc.) definiert drawer-fields.css, hier nur Sub-Elemente.

   Die generischen Field-Grid-Primitive (`.app-drawer-input/-static/-date-*` +
   Shared-Focus-Block) liegen in `_shared/drawer-field-primitives.css` (nach
   drawer-fields.css geladen). Termin-SPEZIFISCHES (`.app-attendees-*`, `.app-ort-*`,
   slot-scoped Overrides) bleibt in tm-attendees-editor.css. */

/* Duration-Picker v3: Button-Trigger + Quick-Chips + Grid-Popup */
.app-scope .app-duration-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex: 1;
  min-width: 0;
}
/* Trigger nutzt Field-Basis-Style aus drawer-fields.css (height/padding/border) */
.app-scope .app-duration-picker-trigger {
  /* flex/min-width kommen aus der Basis (drawer-fields.css: flex:1; min-width:0),
     damit der Trigger seinen Slot fuellt und rechts fluchtet. Frueher global
     flex:0 1 auto; min-width:140px — liess den Trigger in Aufgabe/Anfrage
     zu kurz stehen. Termin-Dauer setzt via [data-termin-field-slot="dauer"]
     unten sein eigenes flex:1 1 auto. */
  cursor: pointer;
}
.app-scope .app-duration-picker-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.app-scope .app-duration-picker-value.is-placeholder {
  color: var(--lod-gray-500);
}
.app-scope .app-duration-picker-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  opacity: 0.55;
  margin-left: auto;
}
.app-scope .app-duration-picker-chips {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* flex:0 1 auto + min-width:0 statt 0 0 auto: der Chips-Block darf unter
     seine Inhaltsbreite schrumpfen, damit das eigene overflow-x:auto greift
     und die Chips intern scrollen statt am Drawer-Rand (drawer-body
     overflow-x:hidden) abgeschnitten zu werden. */
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: auto;
}
.app-scope .app-duration-picker-chips::-webkit-scrollbar { display: none; }
.app-scope .app-duration-picker-chip {
  padding: 3px var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--lod-gray-50);
  border: 1px solid transparent;
  color: var(--lod-gray-700);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}
.app-scope .app-duration-picker-chip:hover { background: var(--lod-gray-100); color: var(--lod-darkblue); }
.app-scope .app-duration-picker-chip.is-active {
  background: var(--lod-darkblue-100);
  color: var(--lod-darkblue);
  font-weight: var(--fw-semibold);
}

/* Grid-Popup (Popover-Content): 5-Spalten-Tabelle
   Spalte 1 = Stundenlabel (0h..8h), Spalten 2-5 = :00/:15/:30/:45.
   Header-Reihe zeigt die Minuten-Offsets als Spaltenueberschriften. */
.app-popover .app-duration-picker-grid {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(56px, 1fr));
  gap: var(--space-1);
  padding: var(--space-2-5);
  font-family: var(--lod-font-sans);
  min-width: 280px;
}
.app-popover .app-duration-picker-grid-corner {
  /* Eckzelle oben links — leer, dient als Spacer */
}
.app-popover .app-duration-picker-grid-colhead {
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  color: var(--lod-gray-500);
  text-align: center;
  padding: 0 0 var(--space-1);
  border-bottom: 1px solid var(--lod-gray-100);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}
.app-popover .app-duration-picker-grid-rowhead {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--lod-gray-600);
  text-align: right;
  padding-right: var(--space-1-5);
  align-self: center;
}
.app-popover .app-duration-picker-grid-cell {
  appearance: none;
  border: 1px solid var(--lod-gray-200);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-1-5) var(--space-2);
  font-size: 12.5px;
  font-family: var(--lod-font-sans);
  color: var(--lod-darkblue);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  min-height: 30px;
  transition: background var(--duration-snap), border-color var(--duration-snap), color var(--duration-snap);
}
.app-popover .app-duration-picker-grid-cell:hover {
  background: var(--lod-gray-50);
  border-color: var(--lod-turquoise);
}
.app-popover .app-duration-picker-grid-cell.is-active {
  background: var(--lod-turquoise);
  border-color: var(--lod-turquoise);
  color: var(--lod-white);
  font-weight: var(--fw-semibold);
}
.app-popover .app-duration-picker-grid-cell.is-empty {
  visibility: hidden;
  pointer-events: none;
}

/* Tage-Modus (opts.maxDays): Stunden-Grid oben, Tage-Stepper als abgesetzte
   Footer-Zeile darunter (volle Popover-Breite, Trennlinie + Flaechen-Tint —
   der Popover-Scroller clippt den Tint an den runden Ecken). */
.app-popover .app-duration-picker-days {
  display: flex;
  flex-direction: column;
}
.app-popover .app-duration-picker-days-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2-5);
  border-top: 1px solid var(--lod-gray-100);
  background: var(--lod-gray-50);
}
.app-popover .app-duration-picker-days-label {
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  color: var(--lod-gray-600);
}
.app-popover .app-duration-picker-days-label small {
  font-weight: var(--fw-regular);
  color: var(--lod-gray-500);
}
/* Segment-Stepper: −/Wert/+ in einem gemeinsamen Rahmen statt frei
   schwebender Einzelbuttons. */
.app-popover .app-duration-picker-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.app-popover .app-duration-picker-step {
  appearance: none;
  width: 30px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--lod-darkblue);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-snap), color var(--duration-snap);
}
.app-popover .app-duration-picker-step:hover:not(:disabled) {
  background: var(--lod-gray-100);
}
.app-popover .app-duration-picker-step:disabled {
  color: var(--lod-gray-300);
  cursor: default;
}
.app-popover .app-duration-picker-step-val {
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--lod-gray-500);
  border-left: 1px solid var(--lod-gray-100);
  border-right: 1px solid var(--lod-gray-100);
  transition: background var(--duration-snap), color var(--duration-snap);
}
/* Tage > 0: Wert-Segment faerbt sich wie eine aktive Grid-Zelle. */
.app-popover .app-duration-picker-step-val.is-set {
  background: var(--lod-turquoise);
  border-color: var(--lod-turquoise);
  color: var(--lod-white);
}

/* C-Fix: Betreff-Picker-Trigger nutzt Basis-Style, nur Label + Icon-Spezifika */
.app-scope .app-betreff-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-betreff-picker-label[data-placeholder] { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-betreff-picker img { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }

.app-betreff-picker-panel { padding: var(--space-2); font-family: var(--lod-font-sans); }
.app-betreff-picker-search {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--lod-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1-5);
}
.app-betreff-picker-search img { opacity: 0.5; }
.app-betreff-picker-search input { flex: 1; border: none; background: transparent; font-size: 13px; }
.app-betreff-picker-search input:focus { outline: none; }
.app-betreff-picker-list { max-height: 320px; overflow-y: auto; }
.app-betreff-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  width: 100%;
  padding: 7px var(--space-2-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--lod-gray-700);
  text-align: left;
  cursor: pointer;
}
.app-betreff-picker-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-betreff-picker-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-betreff-picker-item.is-parent { color: var(--lod-gray-500); cursor: default; font-weight: var(--fw-semibold); }
.app-betreff-picker-item.is-parent:hover { background: transparent; }
.app-betreff-picker-item mark { background: var(--yellow-300); color: inherit; padding: 0; border-radius: var(--radius-xxs); }
.app-betreff-picker-empty { padding: var(--space-3); color: var(--lod-gray-500); font-style: italic; text-align: center; }
.app-betreff-picker-empty.is-error { color: var(--lod-danger); }

/* AsyncPicker — Trigger + Selected-Pill +
 Item-Subtitle. Erbt Panel-Styles von .app-betreff-picker-*. */
.app-scope .app-async-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-async-picker-label[data-placeholder] { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-async-picker img { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }
.app-scope .app-async-picker-selected {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: 1;
  min-width: 0;
}
.app-scope .app-async-picker-selected-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-medium);
}
.app-scope .app-async-picker-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--duration-quick), background var(--duration-quick);
}
.app-scope .app-async-picker-clear:hover {
  opacity: 1;
  background: var(--lod-gray-100);
}
.app-scope .app-async-picker-clear img { opacity: 1; }
.app-async-picker-item { flex-direction: column !important; align-items: flex-start !important; }
.app-async-picker-item-title { font-weight: var(--fw-medium); }
.app-async-picker-item-subtitle {
  font-size: var(--fs-badge);
  color: var(--lod-gray-500);
  margin-top: var(--space-xxs);
}

/* AsyncPicker footerAction — Bottom-Button im Picker-Panel. */
.app-async-picker-footer {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  width: 100%;
  margin-top: var(--space-1-5);
  padding: var(--space-2) var(--space-2-5);
  background: var(--lod-gray-50);
  border: 1px dashed var(--lod-gray-300);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  color: var(--lod-darkblue);
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
}
.app-async-picker-footer:hover {
  background: var(--lod-gray-100);
  border-color: var(--lod-gray-400);
}
.app-async-picker-footer img {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Phase-Picker Trigger */
/* C-Fix: Phase-Picker-Trigger nutzt Basis-Style */
.app-scope .app-phase-picker.is-disabled { cursor: default; opacity: 0.5; }
.app-scope .app-phase-picker.is-disabled:hover { background: transparent; }
.app-scope .app-phase-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-phase-picker-label[data-placeholder] { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-phase-picker img { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }

/* Panel muss dem Popover-Wrapper folgen, nicht darueber hinausragen.
   Asymmetrisches Uebergreifen rechts verursacht "fehlenden weissen Rand". */
.app-phase-picker-panel { padding: var(--space-2); font-family: var(--lod-font-sans); box-sizing: border-box; width: 100%; }
.app-phase-picker-search {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--lod-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1-5);
}
.app-phase-picker-search img { opacity: 0.5; }
.app-phase-picker-search input { flex: 1; border: none; background: transparent; font-size: 13px; }
.app-phase-picker-search input:focus { outline: none; }
.app-phase-picker-list { max-height: 320px; overflow-y: auto; }
.app-phase-picker-item mark { background: var(--yellow-300); color: inherit; padding: 0; border-radius: var(--radius-xxs); }
.app-phase-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  width: 100%;
  padding: var(--space-2) var(--space-2-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--lod-gray-700);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.app-phase-picker-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-phase-picker-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
/* Phasen-Namen koennen lang sein. Einzeilig mit Ellipsis halten, damit das
   Popover nicht umgebrochen wird und alle Phasen gleich hoch bleiben. */
.app-phase-picker-item-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cross-Projekt-Suche zeigt zusaetzlich den Projekt-
 Namen als Subtitle unter dem Phasen-Namen. */
.app-phase-picker-item-sub {
  display: block;
  font-size: var(--fs-badge);
  color: var(--lod-gray-500);
  font-weight: var(--fw-regular);
  margin-top: var(--space-px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-phase-picker-item.is-active .app-phase-picker-item-sub {
  color: var(--lod-darkblue);
}
.app-phase-picker-loading, .app-phase-picker-empty, .app-phase-picker-error {
  padding: var(--space-3);
  color: var(--lod-gray-500);
  font-style: italic;
  text-align: center;
  font-size: 12.5px;
}
.app-phase-picker-error { color: var(--lod-danger); }
/* Section-Label fuer Default-Liste im Cross-Projekt-Mode ("Zuletzt geaendert").
   Trennt visuell von Suchergebnissen. */
.app-phase-picker-section-label {
  padding: var(--space-1-5) var(--space-2-5) var(--space-1);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lod-gray-500);
}

/* ── Firma-+-Adresse-Picker (LoD.FirmaAdressePicker) ───────────────────────
   Firmensuche (AsyncPicker) + darunter Adress-Wahl „An der Firmenadresse" /
   „Andere Adresse" (strukturierte Felder). Nutzt Tokens; responsive. */
.fa-picker { display: flex; flex-direction: column; gap: var(--space-2); }
/* GOTCHA: der AsyncPicker-Trigger traegt drawer-weit `flex: 1` (fuer ROW-Feldslots).
   Im SPALTEN-Flex des fa-picker wird das zur Hoehen-Flexbasis 0 → der Trigger
   kollabiert auf ~22px statt der 32px aller anderen Feld-Controls. Hier neutralisieren,
   damit die feste Trigger-Hoehe greift (gemeldeter Befund: „Werkstattfeld kleiner"). */
.app-scope .fa-picker > .app-async-picker { flex: 0 0 auto; }
.fa-picker.is-disabled { opacity: 0.6; pointer-events: none; }
.fa-picker-adr {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--lod-gray-50);
}
.fa-picker-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-base);
}
.fa-picker-opt input[type="radio"] { margin-top: 3px; accent-color: var(--brand-default); }
.fa-picker-opt-main { display: flex; flex-direction: column; gap: 1px; }
.fa-picker-opt-title { color: var(--color-text); font-weight: var(--fw-medium); }
.fa-picker-firmaadr { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.fa-picker-firmaadr.is-empty { font-style: italic; color: var(--lod-gray-400); }
.fa-picker-fields {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-left: var(--space-5);
}
.fa-picker-input {
  min-width: 0;
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  background: var(--color-surface, #fff);
  color: var(--color-text);
}
.fa-picker-input:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -1px; border-color: var(--brand-default); }
.fa-picker-input--wide { grid-column: 1 / -1; }
.fa-picker-input--plz { grid-column: auto; }

/* Mobile: Adressfelder untereinander, Einrückung raus. */
@media (max-width: 599px) {
  .fa-picker-fields { grid-template-columns: 1fr; padding-left: var(--space-3); }
  .fa-picker-input--wide, .fa-picker-input--plz { grid-column: auto; }
}

/* ══ Time-Picker (time-picker.js) ═══════════════════════════════════════════
   Ersetzt native <input type="time">. Trigger sieht aus wie ein Eingabefeld,
   das Panel (im .app-popover) trägt zwei Spalten (Std | Min). Doppel-Selektor
   `…, .app-scope …` — der Picker wird sowohl in Nicht-app-scope-Sektionen
   (Benachrichtigungen) als auch in app-scope-Drawern genutzt; im app-scope
   plättet der globale Button-Reset sonst den Trigger. */
.app-time-picker { display: inline-flex; align-items: center; min-width: 0; }
.app-time-picker-trigger,
.app-scope .app-time-picker-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: 34px;
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.app-time-picker-trigger:hover:not(:disabled),
.app-scope .app-time-picker-trigger:hover:not(:disabled) { border-color: var(--color-border-hover); }
.app-time-picker-trigger:focus-visible,
.app-scope .app-time-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--brand-default);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.app-time-picker-trigger[aria-expanded="true"],
.app-scope .app-time-picker-trigger[aria-expanded="true"] {
  border-color: var(--brand-default);
}
.app-time-picker-trigger:disabled,
.app-scope .app-time-picker-trigger:disabled { opacity: 0.5; cursor: default; }
.app-time-picker-icon { flex: 0 0 auto; opacity: 0.55; }
.app-time-picker-value { flex: 0 0 auto; }
.app-time-picker-value.is-placeholder { color: var(--color-text-muted); }
.app-time-picker-chevron { flex: 0 0 auto; opacity: 0.5; margin-left: var(--space-px); }

/* Panel im Popover: zwei Spalten mit je eigenem Scroller. */
.app-popover .app-time-picker-panel {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  font-family: var(--font-sans);
}
.app-popover .app-time-picker-col {
  display: flex;
  flex-direction: column;
  min-width: 56px;
}
.app-popover .app-time-picker-col + .app-time-picker-col {
  border-left: 1px solid var(--lod-gray-100, var(--color-border-light));
  padding-left: var(--space-1);
  margin-left: var(--space-1);
}
.app-popover .app-time-picker-colhead {
  font-size: var(--fs-badge, 11px);
  font-weight: var(--fw-medium);
  color: var(--lod-gray-500, var(--color-text-muted));
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0 var(--space-1);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--lod-gray-100, var(--color-border-light));
}
.app-popover .app-time-picker-scroll {
  /* positioniert, damit die Options ihn als offsetParent nehmen — sonst rechnet
     das Scroll-in-Sicht (offsetTop) gegen das fixed Popover-Panel und springt. */
  position: relative;
  max-height: 208px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  padding-right: 2px;
}
.app-popover .app-time-picker-opt {
  appearance: none;
  border: 1px solid transparent;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-1-5) var(--space-3);
  font-size: 13px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--lod-darkblue, var(--color-text));
  cursor: pointer;
  text-align: center;
  transition: background var(--duration-snap), border-color var(--duration-snap), color var(--duration-snap);
}
.app-popover .app-time-picker-opt:hover {
  background: var(--lod-gray-50, var(--color-bg-muted));
  border-color: var(--lod-turquoise, var(--brand-default));
}
.app-popover .app-time-picker-opt.is-active {
  background: var(--lod-turquoise, var(--brand-default));
  border-color: var(--lod-turquoise, var(--brand-default));
  color: var(--lod-white, #fff);
  font-weight: var(--fw-semibold);
}