/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/*
 * public/select.css — the panel's own dropdown (2026-09-15).
 * src/shared/select.ts → public/js/core/select.js hides every <select>
 * behind a button that looks exactly like a field and draws the open
 * list itself (#mt-sel-list, at body level, carrying `mt-scope` so the
 * tokens reach it). The operating system's list — white sheet, blue
 * bar, system font — never appears again.
 *
 * The button inherits the select's own classes, so a .rq3-select, a
 * .vl3-select or a .tm-input keeps its size and radius; only the ground
 * and the edge come from the field tokens, like every other field.
 */

/* The native control stays in the DOM — it is the value, the name and
   the events — but never paints and never takes the pointer. Not
   `display: none`: a hidden control is barred from constraint
   validation, and some of these are `required`. */
.mt-sel-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  border: 0 !important; opacity: 0 !important;
  clip-path: inset(50%); overflow: hidden;
  pointer-events: none;
}

.mt-sel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; min-width: 0;
  background: var(--field-ground); border: 1px solid var(--field-line);
  color: var(--text-primary);
  font: inherit; text-align: start; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
/* The button copies the select's CLASS, so a .rq3-select or a .vl3-select
   hands over its height and radius. A select styled by a DESCENDANT rule
   (.pr3-eform select, .zt3-field select …) has no class to copy, and its
   button used to come out shrink-wrapped beside full-width neighbours
   (operator, 2026-09-15: "Rolle و Geschlecht سایزشون مثل بقیه نیست").
   These are the panel's standard field metrics, as a floor: a class of
   its own still wins. */
.mt-sel-btn {
  min-height: 38px; padding: 0 10px; border-radius: 10px;
  font-size: .84rem;
  padding-inline-end: 10px; background-image: none !important;
}
.mt-sel-btn:hover { border-color: var(--border-strong); }
.mt-sel-btn:focus-visible,
.mt-sel-btn.is-open { outline: none; border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); }
.mt-sel-btn[disabled] { opacity: .55; cursor: not-allowed; }
.mt-sel-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-sel-cur.is-empty { color: var(--text-muted); }
.mt-sel-chev { flex: none; display: inline-flex; color: var(--text-muted); transition: transform .14s var(--mt-ease-out); }
.mt-sel-btn.is-open .mt-sel-chev { transform: rotate(180deg); }

.mt-sel-list {
  /* one band above the dialogs it opens inside, like the address list */
  position: fixed; z-index: 100070;
  overflow-y: auto; overscroll-behavior: contain;
  min-width: 160px; max-width: min(420px, 92vw);
  padding: 6px; border-radius: 14px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--shadow-md);
  font-family: var(--mb-font-sans), system-ui, sans-serif;
  animation: mt-sel-in var(--mb-dur-fast, 150ms) var(--mb-ease-out, ease-out);
}
.mt-sel-list[hidden] { display: none !important; }
.mt-sel-list.is-up { animation-name: mt-sel-in-up; }
@keyframes mt-sel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes mt-sel-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mt-sel-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  font-size: .84rem; line-height: 1.3; cursor: pointer;
  color: var(--text-body);
}
.mt-sel-opt + .mt-sel-opt { margin-top: 2px; }
/* the pointer and the keyboard land on the SAME row: one active state,
   never a second highlight the mouse leaves behind */
.mt-sel-opt.is-active { background: var(--surface-inset); color: var(--text-primary); }
.mt-sel-opt.is-on { color: var(--text-primary); font-weight: 700; }
.mt-sel-opt.is-off { opacity: .45; cursor: not-allowed; }
.mt-sel-tick { flex: none; display: inline-flex; width: 14px; color: var(--accent); }
.mt-sel-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-sel-txt.is-empty { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .mt-sel-list { animation: none; }
  .mt-sel-chev { transition: none; }
}