/**
 * @file
 * Command Search - Command palette / search overlay component styles.
 *
 * Features:
 * - Glassmorphism overlay using CSS custom properties from adesso.css
 * - Prominent search input with icon
 * - Quick actions grid with hover states
 * - Results list with keyboard navigation highlighting
 * - Loading spinner animation
 * - Keyboard shortcut hints
 * - Smooth open/close animations
 * - Fully responsive (mobile-first)
 *
 * Design tokens used:
 * - --blur-glass: 16px (backdrop blur)
 * - --glass-bg-white: rgba(255, 255, 255, 0.7) (panel background)
 * - --glass-border-dark: rgba(0, 0, 0, 0.1) (border color)
 * - --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) (shadow)
 * - --overlay-backdrop: rgba(0, 0, 0, 0.5) (overlay background)
 */

/* ==========================================================================
   Component Variables
   ========================================================================== */

.command-search {
  /* Color scheme - using CSS custom properties for easy theming */
  --cmd-text-primary: var(--color-slate-900);
  --cmd-text-secondary: var(--color-slate-600);
  --cmd-text-muted: var(--color-slate-400);
  --cmd-border: var(--color-slate-200);
  --cmd-hover-bg: var(--color-slate-50);
  --cmd-active-bg: var(--color-slate-100);
  --cmd-focus-ring: var(--color-primary-500);

  /* Spacing */
  --cmd-panel-padding: 1.5rem;
  --cmd-input-height: 3.5rem;
  --cmd-gap: 1rem;

  /* Animation */
  --cmd-transition-fast: 150ms;
  --cmd-transition-normal: 200ms;
}

/* ==========================================================================
   Dialog Reset & Base Styles
   ========================================================================== */

.command-search__dialog {
  border: none;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.command-search__dialog::backdrop {
  background: transparent;
}

.command-search__dialog[open] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ==========================================================================
   Search Input Section
   ========================================================================== */

.command-search__input {
  appearance: none;
  -webkit-appearance: none;
}

.command-search__input::-webkit-search-cancel-button {
  display: none;
}

.command-search__input:focus {
  outline: none;
  box-shadow: none;
}

@media (min-width: 768px) {
  .command-search__input {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   Keyboard Shortcut Keys
   ========================================================================== */

.command-search__kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1;
}

/* ==========================================================================
   Section Titles
   ========================================================================== */

.command-search__section-title {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Result Items
   ========================================================================== */

.command-search__item {
  transition: background-color var(--cmd-transition-fast) ease;
}

.command-search__item[aria-selected="true"],
.command-search__item.is-active {
  background-color: var(--cmd-hover-bg);
}

/* ==========================================================================
   Results List
   ========================================================================== */

.command-search__results {
  scrollbar-width: thin;
  scrollbar-color: var(--cmd-border) transparent;
}

.command-search__results::-webkit-scrollbar {
  width: 6px;
}

.command-search__results::-webkit-scrollbar-track {
  background: transparent;
}

.command-search__results::-webkit-scrollbar-thumb {
  background-color: var(--cmd-border);
  border-radius: var(--radius-full);
}

.command-search__results::-webkit-scrollbar-thumb:hover {
  background-color: var(--cmd-text-muted);
}

/* ==========================================================================
   Loading Animation
   ========================================================================== */

@keyframes command-search-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.command-search [data-command-search-loading] svg {
  animation: command-search-spin 1s linear infinite;
}

/* ==========================================================================
   Dialog Animations
   ========================================================================== */

.command-search__dialog[open] .overlay-backdrop {
  animation: command-search-fade-in var(--cmd-transition-normal) ease-out forwards;
}

.command-search__dialog[open] .command-search__panel > div {
  animation: command-search-scale-in var(--cmd-transition-normal) ease-out forwards;
}

@keyframes command-search-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes command-search-scale-in {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* ==========================================================================
   Footer Section
   ========================================================================== */

.command-search__footer {
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* ==========================================================================
   Highlighted Search Matches
   ========================================================================== */

.command-search mark {
  background-color: rgb(254 240 138); /* yellow-200 */
  padding-inline: 0.125rem;
  /* ds-exception: Tiny highlight rounding */
  border-radius: 0.125rem;
}

@media (prefers-color-scheme: dark) {
  .command-search mark {
    background-color: rgb(133 77 14); /* yellow-800 */
  }
}

/* ==========================================================================
   Accessibility & Utilities
   ========================================================================== */

/* Hide until JavaScript initializes */
[data-command-search][hidden] {
  display: none !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .command-search__dialog[open] .overlay-backdrop,
  .command-search__dialog[open] .command-search__panel > div,
  .command-search [data-command-search-loading] svg {
    animation: none !important;
  }

  .command-search__item {
    transition: none !important;
  }
}

/* Focus-visible polyfill support */
.command-search :focus:not(:focus-visible) {
  outline: none;
}

/* Prevent body scroll when dialog is open */
body:has(.command-search__dialog[open]) {
  overflow: hidden;
}