/* Select sheet — every <select> in the app opens as a bottom sheet.
 *
 * The native <select> element is never removed, re-styled or wrapped: it stays
 * in the DOM exactly as each page wrote it, keeps its own classes, its value,
 * its name and its Alpine x-model binding, and still renders the chosen label
 * on the page. /js/select-sheet.js only intercepts the gesture that would open
 * the browser's own dropdown and opens this sheet instead. Nothing here should
 * ever need to know about an individual page's select styling.
 *
 * The sheet itself is an .ol-drawer (components.css) so it inherits the house
 * geometry for free: the 88dvh ceiling, the bottom-nav clearance via
 * --ol-drawer-nav-gap, the rounded top, the slide and fade transitions.
 *
 * Loaded after components.css and olowo-modals.css, so single-class ol-* rules
 * here win ties against both.
 */

/* .ol-drawer is display:flex, which silently defeats the hidden attribute —
   pair every such class with its own [hidden] rule or the sheet is always up. */
.ol-selsheet[hidden] {
  display: none;
}

/* Above .ol-drawer's 1300: a select inside an already-open drawer (the task,
   team and transaction sheets all contain one) must put its options over that
   sheet, not under it. */
.ol-selsheet {
  z-index: 1400;
}

.ol-selsheet__panel {
  /* The list is the sheet's whole content, so let it use the full ceiling
     rather than shrink-wrapping to a stubby half-sheet on short option lists —
     .ol-selsheet__list caps its own height instead. */
  padding-top: 0;
}

.ol-selsheet__header {
  flex: none;
  padding-bottom: var(--space-3, 0.75rem);
  text-align: center;
}

.ol-selsheet__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Search. Only rendered for lists long enough to be worth filtering — see
   SEARCH_THRESHOLD in the script. */
.ol-selsheet__search {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3, 0.75rem);
}

.ol-selsheet__search[hidden] {
  display: none;
}

.ol-selsheet__search-icon {
  position: absolute;
  left: var(--space-3, 0.75rem);
  display: inline-flex;
  pointer-events: none;
  color: var(--color-text-tertiary);
}

/* type="search" deliberately: test-ui-override.css paints bare text, email,
   password and number inputs as cream pills at ID-level specificity, which no
   component class can outrank. It does not list search, so this control keeps
   the sheet's own surface without adding another :not() to that blanket rule. */
.ol-selsheet__search-input {
  width: 100%;
  padding: 0.7rem 0.75rem 0.7rem 2.35rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-sunken);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  -webkit-appearance: none;
  appearance: none;
}

.ol-selsheet__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.ol-selsheet__search-input:focus {
  outline: none;
  border-color: var(--color-action-active);
}

/* The scrolling option list. It is the .ol-drawer__body, so the overflow,
   overscroll containment and momentum scrolling all come from there. */
.ol-selsheet__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* The list takes focus on open so the arrow keys have somewhere to start, but
   it is a scroller, not a control: a ring around the whole option list reads as
   "everything is selected". The rows carry the visible focus. */
.ol-selsheet__list:focus,
.ol-selsheet__list:focus-visible {
  outline: none;
}

.ol-selsheet__group {
  padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem) var(--space-1, 0.25rem);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.ol-selsheet__option {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  padding: 0.8rem var(--space-3, 0.75rem);
  border: 0;
  border-radius: var(--radius-lg, 0.625rem);
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.ol-selsheet__option[hidden] {
  display: none;
}

.ol-selsheet__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ol-selsheet__check {
  flex: none;
  display: inline-flex;
  opacity: 0;
}

.ol-selsheet__option:hover:not(.is-selected):not(:disabled) {
  background: var(--color-surface-sunken);
}

.ol-selsheet__option:focus-visible {
  outline: var(--focus-ring-width, 2px) solid
    var(--focus-ring-color, var(--color-action-active));
  outline-offset: var(--focus-ring-offset, 2px);
}

/* The house rule for a pressable chooser: the chosen one is a solid brown fill
   with a white label, the same paint as every other "this one is on" control in
   the app. Never an outline or a tint — one colour, everywhere. */
.ol-selsheet__option.is-selected {
  background: var(--color-action-selected, #75461d);
  color: var(--color-action-on-selected, #ffffff);
  font-weight: 500;
}

.ol-selsheet__option.is-selected .ol-selsheet__check {
  opacity: 1;
}

.ol-selsheet__option:disabled {
  opacity: 0.45;
  cursor: default;
}

/* The placeholder row ("Choose a category", "All accounts"): an option with an
   empty value. Still choosable — clearing a filter is a real answer — but it is
   the absence of a choice, so it never takes the solid brown fill that means
   "this one is on". Currently-on-nothing gets the tint instead. */
.ol-selsheet__option--empty .ol-selsheet__label {
  color: var(--color-text-tertiary);
}

.ol-selsheet__option--empty.is-selected {
  background: var(--color-action-active-soft, #f1ece6);
  color: var(--color-action-active, #75461d);
}

.ol-selsheet__option--empty.is-selected .ol-selsheet__label {
  color: var(--color-action-active, #75461d);
}

.ol-selsheet__none {
  padding: var(--space-5, 1.5rem) var(--space-3, 0.75rem);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

.ol-selsheet__none[hidden] {
  display: none;
}

/* The native control keeps its own look, but its dropdown never opens, so the
   text cursor and the "I can type here" affordance would both be lies. */
.ol-selsheet-armed {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ol-selsheet .ol-drawer__slide,
  .ol-selsheet .ol-drawer__fade {
    transition: none;
  }
}