/* ==========================================================================
   Dropdown menu
   Figma source: Dropdown (3462:18212) on Tax dashboard — 196px white menu,
   5px padding, 40px items (12px icon + label), hairline divider.
   Shadow/border not specified on the hidden Figma layer — using the panel
   shadow + hairline border, marked provisional.
   Static component: show/hide wiring comes with htmx/Alpine sign-off.
   ========================================================================== */

.menu {
  min-width: 196px;
  width: max-content;
  max-width: 280px;
  padding: 8px;          /* roomier menu padding (industry standard ~8px) */
  margin: 0;
  list-style: none;
  background: var(--color-surface);
  border: none;                                  /* Figma 2580:22617 — no border */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);            /* GLOBAL borderless-card shadow (Figma 2580:22617) */
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
  padding: 10px var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.menu__item > svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.menu__divider {
  height: 0;
  margin: 0 5px;
  border: none;
  border-top: var(--border-width) solid var(--color-border);
}

.menu__item:hover,
.menu__item.is-active { /* .is-active = keyboard ↑/↓ highlight — same grey as hover (Peter) */
  background: var(--color-bg-subtle); /* Figma 2580:22627 hover #f5f5f5 */
}

/* ==========================================================================
   .tx-dd — the canonical custom SELECT (popover dropdown). GLOBAL STYLE GUIDE
   for every dropdown in the app (Peter, 30 Jun 2026; ref the "Personal
   subsistence" employee picker in bank-transactions). A trigger button that
   looks like an .input, a chevron that flips on open, and a .menu popover of
   single-select options each with a tick on the chosen one. Open/close is the
   shared [aria-haspopup="menu"] engine in ui.js; selection for .tx-dd[data-dd]
   is committed by ui.js too. Promoted here from bank-transactions' inline copy
   so it can be reused everywhere — never style a native <select>, use this.
   ========================================================================== */
.tx-dd { position: relative; }
.tx-dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 33px; padding: 0 10px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font: inherit; font-size: 14px; color: var(--color-text); cursor: pointer; text-align: left; }
.tx-dd__btn:hover { border-color: var(--color-border-strong); }
.tx-dd__btn[aria-expanded="true"] { border-color: var(--color-text); }
.tx-dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-dd__caret { width: 16px; height: 16px; flex: none; color: var(--color-text-muted); transition: transform .15s ease; }
.tx-dd__btn[aria-expanded="true"] .tx-dd__caret { transform: rotate(180deg); }
/* Field-attached popover: the global --shadow-dropdown is too diffuse here (and scroll panes clip
   it at the sides), so it read flat — hairline border + the row-menu shadow instead (Peter, 2 Jul). */
.tx-dd__menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 12; width: auto; min-width: 0; max-width: none; max-height: 280px; overflow-y: auto; border: var(--border-width) solid var(--color-border); box-shadow: 0 8px 24px rgba(12, 12, 13, 0.14); }
.tx-dd__menu .menu__item { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 9px 12px; border: none; background: none; font: inherit; font-size: 14px; color: var(--color-text); cursor: pointer; text-align: left; border-radius: var(--radius-sm); }
/* hover + keyboard highlight, same grey (scoped here so they beat the `background:none` above) */
.tx-dd__menu .menu__item:hover,
.tx-dd__menu .menu__item.is-active { background: var(--color-bg-subtle); }
.tx-dd__optlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-dd__check { margin-left: 8px; flex: none; width: 15px; height: 15px; opacity: 0; }
.tx-dd__menu .menu__item.is-on { font-weight: var(--weight-medium); }
.tx-dd__menu .menu__item.is-on .tx-dd__check { opacity: 1; }
.tx-dd__btn.is-placeholder .tx-dd__label { color: var(--color-text-muted); } /* unselected = muted, like a select placeholder */

/* "+ New …" creation row — sits at the BOTTOM of a .tx-dd menu under a divider
   (Peter, 30 Jun 2026). Lets the user create a new option (client, item, category…).
   Markup: <div class="menu__divider"></div><button class="menu__item js-dd-add">…</button>.
   ui.js closes the menu and fires a bubbling `dd-add` event the page wires up. */
.tx-dd__menu .menu__divider { margin: 6px 6px; }
.tx-dd__menu .menu__item.js-dd-add { gap: 8px; color: var(--color-text); font-weight: var(--weight-medium); }
.tx-dd__menu .menu__item.js-dd-add svg { width: 16px; height: 16px; flex: none; }

/* iOS: 16px on the trigger so focus doesn't zoom (matches .input). */
@media (max-width: 640px) {
  .tx-dd__btn { font-size: 16px; }
}