/**
 * idf-command-palette - Modul-Schnellsuche (Strg+K)
 *
 * Markup wird von idf-command-palette.js beim ersten Öffnen erzeugt.
 * Voraussetzung: idf-tokens.css (Farben, Radius, Z-Index, Motion).
 *
 * Ebene: --z-modal wie Confirm/Detail - die Palette ist ein kurzlebiger
 * Dialog und muss über Sticky-Headern und Dropdowns liegen.
 */

.idf-cmdp {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 10000);
}
.idf-cmdp[hidden] {
  display: none;
}

.idf-cmdp-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim, rgba(0, 0, 0, 0.45));
}

/* Panel oben zentriert (nicht vertikal mittig): das Auge landet beim
   Tippen oben, und die Trefferliste wächst nach unten statt zu springen. */
.idf-cmdp-panel {
  position: relative;
  margin: 12vh auto 0;
  width: min(560px, calc(100vw - 2 * var(--space-4, 16px)));
  background: var(--white, #fff);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.25));
  overflow: hidden;
}

.idf-cmdp-inputwrap {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  color: var(--mid, #666);
}
.idf-cmdp-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--font-lg, 1.125rem);
  color: var(--ink, #111);
}
.idf-cmdp-input::placeholder {
  color: var(--mid, #999);
}
.idf-cmdp-esc {
  flex-shrink: 0;
  font-size: var(--font-xs, 0.6875rem);
  line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-sm, 4px);
  color: var(--mid, #999);
}

.idf-cmdp-list {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: var(--space-2, 8px);
}

.idf-cmdp-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 0;
  border-radius: var(--radius-md, 6px);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ink, #111);
  cursor: pointer;
}
.idf-cmdp-item:hover,
.idf-cmdp-item.is-selected {
  background: var(--bg-hover, #f8f8f8);
}
.idf-cmdp-item-icon {
  width: 20px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--mid, #666);
}
.idf-cmdp-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idf-cmdp-item-meta {
  flex-shrink: 0;
  font-size: var(--font-sm, 0.8125rem);
  color: var(--mid, #999);
}

.idf-cmdp-empty {
  padding: var(--space-4, 16px);
  text-align: center;
  font-size: var(--font-md, 0.875rem);
  color: var(--mid, #999);
}

/* Touch: 44-px-Ziele für die Trefferzeilen (input-mode, keine Media-Query). */
html[data-input-mode="touch"] .idf-cmdp-item {
  min-height: 44px;
}