/* Wood & Foam — searchable item picker.
 *
 * Deliberately a separate file from app.css: it is a self-contained component,
 * and keeping it apart means the main theme can be restyled without touching it.
 * It uses the app's existing design tokens, so it follows the theme automatically.
 */

.wf-picker-list{
  position:absolute;z-index:300;margin:0;padding:4px;list-style:none;
  max-height:min(340px,52vh);overflow-y:auto;
  background:var(--surface,#fff);
  border:1px solid var(--line-strong,#c2cede);
  border-radius:var(--r-sm,10px);
  box-shadow:var(--shadow-lift,0 18px 46px rgba(16,40,72,.18));
  font-size:12px;
}
.wf-picker-list:focus{outline:none}

.wf-picker-opt{
  display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:10px;align-items:baseline;
  padding:7px 9px;border-radius:7px;cursor:pointer;
}
.wf-picker-opt + .wf-picker-opt{border-top:1px solid var(--line,#dce4ef)}
.wf-picker-opt:hover,.wf-picker-opt.is-active{background:var(--green-soft,#e7eff8)}
.wf-picker-opt.is-active{box-shadow:inset 2px 0 0 var(--green,#2e5580)}
[dir="rtl"] .wf-picker-opt.is-active{box-shadow:inset -2px 0 0 var(--green,#2e5580)}

/* The code is Latin digits inside an Arabic UI - isolate it or the bidi
   algorithm reorders it against the name beside it. */
.wf-picker-code{
  direction:ltr;unicode-bidi:isolate;text-align:left;
  font-family:"SFMono-Regular",Consolas,monospace;font-size:11px;font-weight:700;
  color:var(--green,#2e5580);white-space:nowrap;
}
.wf-picker-name{
  color:var(--ink,#14243a);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wf-picker-empty{padding:12px 10px;color:var(--muted,#4a5c74);text-align:center}

/* The input this is attached to, when it sits inside a table cell. */
.data-table td input.cell[role="combobox"]{width:100%}

@media (prefers-reduced-motion:reduce){
  .wf-picker-opt{transition:none}
}

/* Login page: password affordances (markup added alongside the picker work). */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;padding-inline-end:38px}
.pw-toggle{
  position:absolute;inset-inline-end:4px;
  border:0;background:transparent;cursor:pointer;
  padding:6px 8px;border-radius:6px;font-size:14px;line-height:1;
  color:var(--muted,#4a5c74);
}
.pw-toggle:hover{background:var(--green-soft,#e7eff8)}
.pw-toggle:focus-visible{outline:2px solid var(--green-2,#4e7dae);outline-offset:1px}
.caps-hint{
  margin:6px 0 0;font-size:11px;font-weight:700;
  color:var(--amber,#a8701a);
}

/* list mode: one plain column, not the code/name pair */
.wf-picker-list.is-simple .wf-picker-opt{display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--ink,#14243a)}