@layer rhx.components {
  .rhx-time-picker { position: relative; display: inline-flex; flex-direction: column; gap: var(--rhx-space-xs); font-family: var(--rhx-font-family); max-width: 14rem; }
  .rhx-time-picker__label { font-size: var(--rhx-font-size-sm); font-weight: var(--rhx-font-weight-medium); color: var(--rhx-color-text); }

  .rhx-time-picker__control { display: flex; align-items: center; border: var(--rhx-border-width) solid var(--rhx-color-border); border-radius: var(--rhx-radius-md); background: var(--rhx-color-surface); }
  .rhx-time-picker__control:focus-within { border-color: var(--rhx-color-brand-500); box-shadow: 0 0 0 1px var(--rhx-color-brand-500); }
  .rhx-time-picker__input { flex: 1; min-width: 6rem; min-height: 2.5rem; padding: var(--rhx-space-sm) var(--rhx-space-md); border: none; background: transparent; color: var(--rhx-color-text); font: inherit; outline: none; }
  .rhx-time-picker__input::placeholder { color: var(--rhx-color-text-muted); }
  .rhx-time-picker__trigger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; align-self: stretch; border: none; background: none; color: var(--rhx-color-text-muted); cursor: pointer; }
  .rhx-time-picker__trigger:hover:not([disabled]) { color: var(--rhx-color-brand-600); }

  .rhx-time-picker__listbox { position: absolute; top: calc(100% + var(--rhx-space-2xs, 0.25rem)); left: 0; right: 0; z-index: var(--rhx-z-dropdown); max-height: 14rem; overflow-y: auto; padding: var(--rhx-space-2xs, 0.25rem); border: var(--rhx-border-width) solid var(--rhx-color-border); border-radius: var(--rhx-radius-md); background: var(--rhx-color-surface-raised); box-shadow: var(--rhx-shadow-lg); }
  .rhx-time-picker__listbox[hidden] { display: none; }

  .rhx-time-picker__option { display: block; width: 100%; text-align: left; padding: var(--rhx-space-sm) var(--rhx-space-md); border: none; background: none; border-radius: var(--rhx-radius-sm); color: var(--rhx-color-text); font: inherit; cursor: pointer; }
  .rhx-time-picker__option:hover, .rhx-time-picker__option[data-rhx-focused] { background: var(--rhx-color-brand-100); }
  .rhx-time-picker__option--selected { background: var(--rhx-color-brand-100); color: var(--rhx-color-brand-700); font-weight: var(--rhx-font-weight-medium); }

  .rhx-time-picker--small .rhx-time-picker__input { min-height: 2rem; font-size: var(--rhx-font-size-sm); }
  .rhx-time-picker--large .rhx-time-picker__input { min-height: 3rem; font-size: var(--rhx-font-size-md); }
  .rhx-time-picker--disabled { opacity: 0.6; pointer-events: none; }
  .rhx-time-picker--readonly .rhx-time-picker__trigger { cursor: default; color: var(--rhx-color-text-muted); }
  .rhx-time-picker--readonly .rhx-time-picker__input { cursor: default; }
  .rhx-time-picker--error .rhx-time-picker__control { border-color: var(--rhx-color-danger-500); }
}