@layer components {
  .ts-wrapper.ts-control, .ts-control {
    background: var(--color-bg-surface-glass) !important;
    border: 1px solid var(--color-border-glass) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-main) !important;
    padding: 10px 12px !important;
    transition: var(--transition-physical) !important;
    box-shadow: none !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .ts-wrapper.focus .ts-control {
    border-color: var(--color-accent-blue) !important;
    box-shadow: 0 0 0 2px rgba(69, 123, 157, 0.2) !important;
  }

  .ts-dropdown {
    background: #111827 !important; /* Mierne tmavšie ako surface pre kontrast */
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--color-border-glass) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    box-shadow: var(--shadow-premium) !important;
    color: var(--color-text-main) !important;
    margin-top: 4px !important;
    z-index: 100 !important;
  }

  .ts-dropdown .option {
    padding: 10px 12px !important;
    transition: background var(--transition-physical);
  }

  .ts-dropdown .active {
    background-color: var(--color-accent-blue) !important;
    color: white !important;
  }

  .ts-dropdown [data-selectable]:hover {
    background-color: rgba(69, 123, 157, 0.1) !important;
  }

  .ts-control > input {
    color: var(--color-text-main) !important;
    font-family: var(--font-family-body) !important;
    font-size: 14px !important;
  }

  /* Arrow override */
  .ts-wrapper.single .ts-control::after {
    border-color: var(--color-text-main) transparent transparent transparent !important;
    border-width: 5px 5px 0 5px !important;
    right: 15px !important;
  }

  .ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent var(--color-text-main) transparent !important;
    border-width: 0 5px 5px 5px !important;
  }

  /* Multi-select items (tags) - though not used in simple filter, good to have */
  .ts-wrapper.multi .ts-control > div {
    background: var(--color-accent-blue) !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    padding: 2px 10px !important;
    margin: 2px 5px 2px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  .ts-wrapper.multi .ts-control > div .remove {
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-left: 6px !important;
  }
}