/*
 * Small override layer for the hotwire_combobox gem's default stylesheet
 * (loaded above via `combobox_style_tag`). Keeps comboboxes visually
 * consistent with the rest of the app: full-width like other form fields,
 * and matching the dark low-contrast var(--color-gray-900) palette instead of the gem's
 * default pure-white dropdowns.
 */

.hw-combobox,
.hw-combobox__main__wrapper {
  width: 100%;
}

/*
 * The gem's wrapper sizes itself to ~38px, which isn't a Tailwind step, so the
 * new-transaction row's comboboxes sat taller than its text inputs. Pin them to
 * h-9 (2.25rem) so every control on that row is the same height. Scoped to the
 * entry row: the inline cell editors size to their table cell and shouldn't
 * inherit a fixed height.
 */
#new_transaction_row .hw-combobox__main__wrapper {
  height: 2.25rem;
}

#new_transaction_row .hw-combobox__input {
  height: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hw-active-bg-color: var(--color-gray-800);
    --hw-border-color: var(--color-gray-600);
    --hw-component-bg-color: var(--color-gray-950);
    --hw-group-color: var(--color-gray-500);
    --hw-group-bg-color: var(--color-gray-900);
    --hw-invalid-color: var(--color-red-400);
    --hw-dialog-label-color: var(--color-gray-400);
    --hw-focus-color: var(--color-indigo-600);
    --hw-option-bg-color: var(--color-gray-900);
  }

  .hw-combobox__dialog {
    background-color: var(--color-gray-900);
    color: var(--color-gray-400);
  }

  .hw-combobox__dialog__input {
    background-color: var(--color-gray-950);
    color: var(--color-gray-400);
  }

  .hw-combobox__dialog::backdrop {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, var(--color-gray-900) 50%);
  }
}