/*
 * ui-fields.css — the app's own dropdown and placeholder direction
 * (js/ui-fields.js, `tally:ui-fields`, 2026-10-25). Colours only through
 * tokens, so C, M and M · בצבע in light and dark all follow.
 */

/* The real select stays for the screens' code, out of sight. */
.ui-sel-native { display: none !important; }

/* The stand-in keeps the select's classes (.field-select, .pill--select …). */
.ui-sel { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; text-align: start; }
.ui-sel:disabled { cursor: default; opacity: .6; }
.ui-sel__label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sel__chev { flex: none; inline-size: 18px; block-size: 18px; color: var(--text-muted); transition: transform .18s ease; }
.ui-sel.is-open .ui-sel__chev { transform: rotate(180deg); }
.field-select.ui-sel { display: flex; }
.field-select.ui-sel.is-open { box-shadow: inset 0 0 0 1.5px var(--accent); }
html[data-design="etched"] .field-select.ui-sel.is-open { box-shadow: var(--clear-ring); }
/* The status pill on a job card reads as the pill it always was. */
.pill--select.ui-sel { display: inline-flex; justify-content: center; gap: 0; }
.pill--select.ui-sel .ui-sel__chev { display: none; }

/* The list */
.ui-pop-back { position: fixed; inset: 0; z-index: 90; }
.ui-pop {
  position: fixed; z-index: 91; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(var(--bg-raise), var(--bg-raise)), var(--bg);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--shadow-lg);
  animation: ui-pop-in .16s cubic-bezier(.2, .8, .3, 1);
}
.ui-pop__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
  min-block-size: 46px; padding: 8px 14px; border: 0; border-radius: 12px; background: none;
  color: var(--text); font: inherit; font-size: 0.9375rem; text-align: start; cursor: pointer;
}
.ui-pop__opt:hover, .ui-pop__opt:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); outline: none; }
.ui-pop__opt.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
html[data-design="etched"] .ui-pop__opt.is-on { background: var(--surface-strong); box-shadow: var(--clear-ring); color: var(--text); }
.ui-pop__opt:disabled { opacity: .45; cursor: default; }
.ui-pop__t { min-inline-size: 0; overflow-wrap: anywhere; }
.ui-pop__tick { flex: none; inline-size: 18px; block-size: 18px; }
html[data-mode="dark"] .ui-pop { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-lg); }
@keyframes ui-pop-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.ui-pop.is-up { animation-name: ui-pop-up; }
@keyframes ui-pop-up { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-pop { animation: none; } .ui-sel__chev { transition: none; } }

/* An empty field shows its (Hebrew) placeholder on the right; once there is
   data, the field follows the data (dir="auto", or the field's own dir). */
html[dir="rtl"] input:placeholder-shown:not(.qb-qty-input):not(.qb-rate-input),
html[dir="rtl"] textarea:placeholder-shown { direction: rtl; text-align: right; }

/* `tally:field-to-top`: room under the page while a field is active, so any field can reach the top. */
body.field-room { padding-block-end: 70vh; }
.field { scroll-margin-block-start: 14px; }