/* ==========================================================================
   Command Palette
   Admin-style interface with monospace font and neutral gray theme
   Uses base modal classes from modals.css with --dark variant
   ========================================================================== */

/* Modal overlay and content use base classes: .modal-overlay, .modal-content--dark */

.command-palette-content {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Input */
.command-palette-input {
  width: 100%;
  padding: var(--space-md);
  border: none;
  border-bottom: 1px solid var(--cp-border);
  font-family: inherit;
  font-size: 1rem;
  background-color: var(--cp-bg-base);
  color: var(--cp-text-primary);
}

.command-palette-input:focus {
  outline: none;
  background-color: var(--cp-bg-light);
}

.command-palette-input::placeholder {
  color: var(--cp-text-muted);
}

/* Error message */
.command-palette-error {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
}

/* Results */
.command-palette-results {
  max-height: 400px;
  overflow-y: auto;
}

.command-palette-hint,
.command-palette-no-results {
  padding: var(--space-lg);
  text-align: center;
  color: var(--cp-text-muted);
  font-size: 0.9rem;
}

/* Result row */
.command-palette-result {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background-color 0.1s ease;
  font-size: 0.9rem;
}

.command-palette-result:hover {
  background-color: var(--cp-bg-hover);
}

.command-palette-result-selected {
  background-color: var(--cp-bg-light);
}

/* Shortcode badge */
.command-palette-shortcode {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cp-text-secondary);
  background-color: var(--cp-bg-base);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.command-palette-result-selected .command-palette-shortcode {
  background-color: var(--cp-bg-hover);
}

/* Command name - bright */
.command-palette-name {
  color: var(--cp-text-primary);
  font-weight: 500;
  flex-shrink: 0;
}

/* Syntax hint - muted */
.command-palette-syntax {
  color: var(--cp-text-secondary);
  font-weight: 400;
}

/* Footer - uses base modal-footer--dark with centered layout */
.command-palette-footer {
  justify-content: center;
}

/* Hint examples */
.command-palette-hint-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.command-palette-hint-examples kbd {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  color: var(--cp-text-secondary);
  background-color: var(--cp-bg-base);
  border: 1px solid var(--cp-border);
  border-radius: 3px;
  margin-right: 0.25rem;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 768px) /* tablet */ {
  .command-palette-input {
    font-size: 1rem;
    padding: var(--space-sm);
  }

  .command-palette-results {
    max-height: 50vh;
  }
}