/* ═══════════════════════════════════════════════════════════════
   EVIDENT — Command Palette (Cmd+K)
   
   Premium quick-action search overlay.
   Inspired by Vercel, Raycast, and Linear.
   
   Usage:
     Press Cmd/Ctrl+K to open
     Type to search actions, pages, evidence
     Arrow keys to navigate, Enter to select
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ────────────────────────────────────────────────── */
.command-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgb(0 0 0 / 50%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block-start: min(20vh, 160px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 150ms ease,
    visibility 150ms ease;
}

.command-palette-overlay[open] {
  opacity: 1;
  visibility: visible;
}

/* ── Dialog ──────────────────────────────────────────────────── */
.command-palette {
  width: min(640px, 90vw);
  max-height: min(480px, 70vh);
  background: var(--color-surface, #ffffff);
  border: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 12%, transparent);
  border-radius: var(--radius-lg, 12px);
  box-shadow:
    0 24px 48px rgb(0 0 0 / 20%),
    0 0 0 1px color-mix(in srgb, var(--color-on-surface, #0f172a) 5%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.98) translateY(-8px);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.command-palette-overlay[open] .command-palette {
  transform: scale(1) translateY(0);
}

/* ── Search Input ───────────────────────────────────────────── */
.command-palette__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 8%, transparent);
}

.command-palette__search-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-on-surface-muted, #64748b);
  flex-shrink: 0;
}

.command-palette__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-on-surface, #0f172a);
  outline: none;
}

.command-palette__input::placeholder {
  color: var(--color-on-surface-muted, #64748b);
}

.command-palette__kbd {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.6875rem;
  font-family: inherit;
  color: var(--color-on-surface-muted, #64748b);
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 10%, transparent);
}

/* ── Results List ────────────────────────────────────────────── */
.command-palette__results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  overscroll-behavior: contain;
}

.command-palette__group-label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-muted, #64748b);
}

.command-palette__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 100ms ease;
  text-decoration: none;
  color: var(--color-on-surface, #0f172a);
}

.command-palette__item:hover,
.command-palette__item[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-sapphire, #1e40af) 8%, transparent);
}

.command-palette__item-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-on-surface-muted, #64748b);
  flex-shrink: 0;
}

.command-palette__item[aria-selected="true"] .command-palette__item-icon {
  color: var(--color-sapphire, #1e40af);
}

.command-palette__item-text {
  flex: 1;
  min-width: 0;
}

.command-palette__item-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.command-palette__item-desc {
  font-size: 0.75rem;
  color: var(--color-on-surface-muted, #64748b);
  margin-block-start: 0.125rem;
}

.command-palette__item-shortcut {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* ── Footer ─────────────────────────────────────────────────── */
.command-palette__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 8%, transparent);
  font-size: 0.75rem;
  color: var(--color-on-surface-muted, #64748b);
}

.command-palette__footer kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.25rem;
  border-radius: 3px;
  font-size: 0.6875rem;
  font-family: inherit;
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 10%, transparent);
}

/* ── No Results ──────────────────────────────────────────────── */
.command-palette__empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-on-surface-muted, #64748b);
  font-size: 0.875rem;
}

/* ── Dark Mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .command-palette {
    background: var(--color-surface, oklch(15% 0.02 260));
    border-color: color-mix(in srgb, var(--color-on-surface, #e2e8f0) 15%, transparent);
    box-shadow:
      0 24px 48px rgb(0 0 0 / 40%),
      0 0 0 1px color-mix(in srgb, var(--color-on-surface, #e2e8f0) 8%, transparent);
  }

  .command-palette__input {
    color: var(--color-on-surface, #e2e8f0);
  }

  .command-palette__item {
    color: var(--color-on-surface, #e2e8f0);
  }

  .command-palette__item:hover,
  .command-palette__item[aria-selected="true"] {
    background: color-mix(in srgb, var(--color-sapphire, #60a5fa) 12%, transparent);
  }
}

[data-theme="dark"] .command-palette {
  background: var(--color-surface, oklch(15% 0.02 260));
  border-color: color-mix(in srgb, var(--color-on-surface, #e2e8f0) 15%, transparent);
}

[data-theme="dark"] .command-palette__input {
  color: var(--color-on-surface, #e2e8f0);
}

[data-theme="dark"] .command-palette__item {
  color: var(--color-on-surface, #e2e8f0);
}

[data-theme="dark"] .command-palette__item:hover,
[data-theme="dark"] .command-palette__item[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-sapphire, #60a5fa) 12%, transparent);
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .command-palette-overlay,
  .command-palette {
    transition: none;
  }
}