@layer components {
  /* ==========================================================================
     List Filter
     Inline search/filter for lists with keyboard shortcut support.
     Can be used standalone or embedded in other filter bars.
     ========================================================================== */

  .list-filter-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 120px;
  }

  .list-filter-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .list-filter-input {
    width: 100%;
    /* Match pill-tab: padding space-1_5 vertical, space-3 horizontal */
    padding: var(--space-1_5) var(--space-3);
    padding-left: calc(var(--space-2) + 16px + var(--space-2));
    padding-right: calc(var(--space-2) + 24px);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
  }

  .list-filter-input:focus {
    outline: none;
  }

  .list-filter-input::placeholder {
    color: var(--color-text-muted);
  }



  .list-filter-kbd {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-family: var(--font-mono);
    font-size: var(--rd-text-2xs);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    pointer-events: none;
    transition: opacity 0.15s;
  }

  /* Hide kbd hint when input has value or is focused */
  .list-filter-input:focus ~ .list-filter-kbd,
  .list-filter-input:not(:placeholder-shown) ~ .list-filter-kbd {
    opacity: 0;
  }

  .list-filter-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
  }

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

  @media (max-width: 640px) {
    .list-filter-input-wrapper {
      max-width: none;
    }
  }
}