/* custom-select.css — v2 Custom-Select-Panel (Body-appended)

   Quelle: extrahiert aus app.css ("Custom-Select Panel"-Block). Inhalt 1:1.
   Klassen-Namespace `app-cs-*`. Panel haengt am Body, KEIN .app-scope-Prefix
   — es lebt visuell aber im v2-Kontext und wird via JS positioniert.

   Konsumenten: web/js/components/inputs/custom-select.js (rendert
   CS-Trigger + CS-Panel an Body); GuestStammdaten-Interessen-Field via
   `[data-cs-trigger]` (siehe gast.css fuer Trigger-Anpassung).
   ========================================================================== */

.app-cs-panel {
  /* Panel haengt am Body, braucht also KEIN .app-scope-Prefix — es lebt
     visuell aber im v2-Kontext. Klassen-Namespace via `app-cs-*`. */
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--lod-shadow-lg);
  z-index: var(--z-drawer-modal);
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-1);
  font-family: var(--lod-font-body);
  font-size: 13px;
}
.app-cs-option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px var(--space-2-5);
  border-radius: 5px;
  cursor: pointer;
  color: var(--lod-gray-900);
  user-select: none;
}
.app-cs-option:hover,
.app-cs-option.highlight { background: var(--lod-darkblue-50); }
.app-cs-option.selected {
  background: var(--lod-turquoise-100);
  color: var(--lod-darkblue);
  font-weight: 600;
}
.app-cs-option .check {
  width: 14px; height: 14px; margin-left: auto;
  color: var(--lod-turquoise); opacity: 0;
}
.app-cs-option.selected .check { opacity: 1; }
.app-cs-search {
  border: none; outline: none;
  width: 100%;
  padding: var(--space-2) var(--space-2-5);
  border-bottom: 1px solid var(--lod-gray-100);
  font-size: 13px;
  background: transparent;
}
.app-cs-empty {
  padding: var(--space-3) var(--space-2-5);
  font-size: 12px;
  color: var(--lod-gray-500);
  text-align: center;
}

/* ============================================================================
 Custom Select (Fluent 2 Dropdown) — Trigger + Panel + Options + Dauer-Grid.
 aus base.css extrahiert.
 Klassen-Namespace `.cs-*` (Trigger lebt im Page-Scope, Panel ist body-appended
 und nutzt z-index: var(--z-popover)).
 ============================================================================ */
.cs-wrap {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
/* Inherit sizing from the context the native select had */
.filter-dd + .cs-wrap, .cs-wrap:has(> .filter-dd) { flex: 1; min-width: 0; }

.cs-trigger {
  display: block;
  width: 100%;
  height: 32px;
  line-height: 30px;
  padding: 0 var(--space-10) 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border-hover);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.cs-trigger:hover { border-color: var(--color-border-hover); border-bottom-color: var(--color-border-pressed); }
.cs-trigger:focus-visible { outline: none; border-bottom-color: var(--brand-default); }
.cs-open .cs-trigger { border-bottom-color: var(--brand-default); }
.cs-trigger--placeholder { color: var(--color-text-tertiary); }
.cs-trigger--filter {
  font-size: var(--fs-meta);
  padding: var(--space-xxs) var(--space-6) var(--space-xxs) var(--space-2);
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.cs-trigger--filter:hover { border-color: var(--color-border-hover); }

/* Panel (dropdown list) — appended to body when open, position: fixed via JS */
.cs-panel {
  display: none;
  z-index: var(--z-popover);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-16);
  max-height: min(300px, 40vh);
  overflow-y: auto;
  scrollbar-width: none;
}
.cs-panel::-webkit-scrollbar { display: none; }

/* Options container (scroll handled by .cs-panel) */
.cs-options { padding: var(--space-1) 0; }

/* Single option */
.cs-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-option:hover, .cs-option--focused { background: var(--color-bg-subtle); }
.cs-option--selected { background: var(--brand-light); color: var(--brand-default); font-weight: var(--fw-medium); }
.cs-option--selected:hover { background: var(--brand-light-hover); }
.cs-option--disabled { color: var(--color-text-disabled); cursor: default; }
.cs-option--child { padding-left: var(--space-6); }
.cs-group-label { padding: var(--space-1-5) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; cursor: default; user-select: none; }
.cs-option--placeholder { color: var(--color-text-tertiary); }

/* Multi-select checkbox indicator */
.cs-check { flex-shrink: 0; font-size: var(--font-size-md); line-height: 1; }
.cs-option-text { overflow: hidden; text-overflow: ellipsis; }

/* Dauer grid variant */
.cs-panel--dauer {
  max-height: none;
  padding: var(--space-2);
  width: auto;
  max-width: none;
}
.cs-dauer-group-label {
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-1) var(--space-1);
}
.cs-dauer-group-label:first-child { margin-top: 0; }
/* Trigger-Button des programmatischen CustomSelect (components/pickers/custom-select.js).
   Layout frueher inline via .style gesetzt — jetzt hier (Konvention: kein Inline-Layout). */
.select[data-cs-trigger] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.select[data-cs-trigger] .cs-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.cs-dauer-grid {
  display: grid;
  grid-template-columns: minmax(48px, auto) repeat(3, 1fr);
  gap: var(--space-1);
}
.cs-dauer-cell {
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.cs-dauer-cell:hover { background: var(--color-bg-subtle); color: var(--color-text); }
/* Hour cell: bold, right border as separator */
.cs-dauer-cell--hour {
  font-weight: var(--fw-semibold);
  border-right: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
/* Hour cell ohne Sub-Steps: in Spalte 1 halten (ersetzt Inline-grid-column) */
.cs-dauer-cell--solo { grid-column: 1; }
/* Sub-step cells: muted, smaller */
.cs-dauer-cell--sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cs-dauer-cell--sub:hover { color: var(--color-text); }
/* Selected state */
.cs-dauer-cell--selected {
  background: var(--brand-default);
  color: var(--brand-text-on) !important;
  font-weight: var(--fw-semibold);
}
.cs-dauer-cell--selected:hover { background: var(--brand-hover); }
.cs-dauer-cell--empty { cursor: default; visibility: hidden; }

/* EditableSelect (Combobox: Dropdown + Freitext) — nutzt cs-trigger/cs-panel/cs-option.
   Der Trigger ist hier ein echtes <input> (editierbar), daher Text-Cursor. */
.app-es { position: relative; display: block; width: 100%; min-width: 0; }
.app-es-input { width: 100%; cursor: text; }
.app-es-input::placeholder { color: var(--color-text-tertiary); }
.app-es-panel { display: block; }