/* ============================================================================
   inputs.css — kanonický engine vstupních prvků ACRM.
   Zdroj pravdy: Claude Design → Components · Inputs (Inputs.html), projectId
   5a19ccc9-8a9e-4acb-bcc8-40331007ec45. Living engine, který karta zrcadlí:
   _ds/segment-screen.css (.sgb-input, .ac, .sgb-ck), .acrm-segmented,
   .acrm-popover, pills. Tento soubor sjednocuje VŠECHNY vstupy pod .acrm-*
   třídy na DS tokenech — jedna sdílená implementace per prvek, žádné per-screen
   bespoke.

   Pravidla (Inputs karta):
   • accent (funkční modrá) jen na fokusu / výběru / 1 primární akci;
   • vybraný toggle = modrý RÁMEČEK, ne výplň (výjimka checkbox/radio = plný
     accent indikátor);
   • pole plochá v klidu (jen hairline border) — stín (--shadow-pop) nese až
     rozbalené menu/popover;
   • šířka = očekávaná délka obsahu (num 56 / code 132 / short 210 / email 280);
   • ikony dědí barvu textu prvku (leading = ink, chevron/pomocné = fg-muted);
   • fokus pole = accent ring 16 %, fokus checkbox/radio/switch = ring 30 %.

   Poznámka k literálům: karta má spacing/radius na tokenech; několik vizuálně
   laděných paddingů/gapů je mimo DS škálu — portují se jako DS literál s
   markerem `ds-ok` (precedent design-sync). Font size/weight se portuje
   literálně (validátor je v CSS nekontroluje) pro pixel-perfect věrnost.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) Textové pole — wrapper s ikonou / kbd + šířkové varianty + stavy.
   (Samostatný .acrm-input box je v ds.css; zde ho doplňujeme o ikonu, kbd,
   šířky a error/disabled na wrapperu.)
   --------------------------------------------------------------------------- */
.acrm-inputwrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-3);
  box-sizing: border-box;
  width: 100%;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.acrm-inputwrap > .ti,
.acrm-inputwrap > svg {
  color: var(--fg-secondary);
  font-size: 16px;
  flex: none;
}
.acrm-inputwrap > input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--p);
  color: var(--fg);
}
.acrm-inputwrap > input::placeholder {
  color: var(--fg-muted);
}
.acrm-inputwrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.acrm-inputwrap.is-error {
  border-color: var(--critical);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 16%, transparent);
}
.acrm-inputwrap.is-disabled {
  background: var(--surface-75);
  border-color: var(--border);
  box-shadow: none;
}
.acrm-inputwrap.is-disabled > input {
  color: var(--fg-muted);
}

/* keyboard hint uvnitř pole */
.acrm-kbd {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 5px; /* ds-ok: DS literál (kbd hint) */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  font: 500 11px var(--font-sans);
  color: var(--fg-secondary);
  flex: none;
}

/* šířkové varianty (num / code / short / email) — platí pro pole i wrapper */
.acrm-input--num,
.acrm-inputwrap--num {
  width: 88px;
  max-width: 100%;
}
.acrm-input--code,
.acrm-inputwrap--code {
  width: 132px;
  max-width: 100%;
}
.acrm-input--short,
.acrm-inputwrap--short {
  width: 210px;
  max-width: 100%;
}
.acrm-input--email,
.acrm-inputwrap--email {
  width: 280px;
  max-width: 100%;
}

/* helper / error text pod polem */
.acrm-field-help {
  font: 400 11.5px var(--font-sans);
  color: var(--fg-muted);
}
.acrm-field-help.is-error {
  color: var(--critical);
}

/* ---------------------------------------------------------------------------
   2) Číselný stepper
   --------------------------------------------------------------------------- */
.acrm-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  width: 132px;
  overflow: hidden;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.acrm-stepper > button {
  width: 34px;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.acrm-stepper > button:hover {
  background: var(--hover-surface);
  color: var(--ink-900);
}
.acrm-stepper > button:disabled {
  color: var(--fg-muted);
  cursor: default;
  background: transparent;
}
.acrm-stepper-val {
  flex: 1;
  display: grid;
  place-items: center;
  font: 500 13px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  border-inline: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
   3) Rozsah od–do
   --------------------------------------------------------------------------- */
.acrm-range {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: max-content;
}
.acrm-range > .acrm-input,
.acrm-range > .acrm-inputwrap {
  width: 56px;
  flex: none;
}
.acrm-range > .acrm-input {
  padding: 0 var(--sp-2);
  text-align: center;
  font: 500 13px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.acrm-range-dash {
  color: var(--fg-muted);
  flex: none;
}

/* ---------------------------------------------------------------------------
   4) Slider
   --------------------------------------------------------------------------- */
.acrm-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: var(--sp-4) 0;
  border-radius: var(--radius-pill);
  outline: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 / var(--acrm-slider-p, 45%) 100% no-repeat,
    var(--line-300);
}
.acrm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.acrm-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   5) Select — jednoduchý výběr = kanonická @acrm/ui Select (native <select
      className="acrm-select"> z ds.css). Vyhledávací výběr ze záznamů = níže
      Record select. (Dřívější custom .acrm-selecttrigger/.acrm-select-menu
      odstraněny — duplikovaly @acrm/ui Select a .acrm-select kolidoval s
      native select boxem v ds.css.)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   6) Combobox / našeptávač — .ac / .ac-opt živě v _ds/segment-screen.css.
      Zde jen host-height alias, aby šel použít i mimo segment builder.
   --------------------------------------------------------------------------- */
.acrm-combobox {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  width: 240px;
  max-width: 100%;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.acrm-combobox.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.acrm-combobox > .ti,
.acrm-combobox > svg {
  display: grid;
  place-items: center;
  padding-left: var(--sp-3);
  color: var(--fg-secondary);
  font-size: var(--ico-sm);
  flex: none;
}
.acrm-combobox > input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0 var(--sp-3);
  font: 500 13px var(--font-sans);
  color: var(--fg);
}
.acrm-combobox > input::placeholder {
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
   7) Record select — vyhledávací výběr z dlouhého seznamu (> ~10 položek).
      Otevírá se focusem; sticky search box + list do 264px; řádek =
      avatar + jméno + sekundární údaj + checkbox vpravo; single i multi.
   --------------------------------------------------------------------------- */
.acrm-recordselect {
  position: relative;
  width: 280px;
  max-width: 100%;
}
.acrm-recordselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  padding: 0 var(--sp-3);
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: text;
  text-align: left;
  font: var(--p);
  color: var(--fg-muted);
}
.acrm-recordselect-trigger.is-filled {
  color: var(--ink-900);
}
.acrm-recordselect-trigger > .ti,
.acrm-recordselect-trigger > svg {
  color: var(--fg-muted);
  flex: none;
}
.acrm-recordselect-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acrm-recordselect.is-open .acrm-recordselect-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.acrm-recordselect-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  overflow: hidden;
  background: var(--surface-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.acrm-recordselect.is-open .acrm-recordselect-pop {
  display: block;
}
.acrm-recordselect-search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.acrm-recordselect-search > .ti,
.acrm-recordselect-search > svg {
  color: var(--fg-muted);
  flex: none;
}
.acrm-recordselect-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 14px var(--font-sans);
  color: var(--ink-900);
}
.acrm-recordselect-search input::placeholder {
  color: var(--fg-muted);
}
.acrm-recordselect-list {
  max-height: 264px;
  overflow-y: auto;
  padding: var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: 1px; /* ds-ok: DS literál (hairline mezi řádky) */
}
.acrm-recordselect-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.acrm-recordselect-opt:hover,
.acrm-recordselect-opt.is-active {
  background: var(--hover-surface);
}
.acrm-recordselect-opt .acrm-avatar,
.acrm-recordselect-opt > .av {
  width: 16px;
  height: 16px;
  flex: none;
}
.acrm-recordselect-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  overflow: hidden;
}
.acrm-recordselect-tx .nm {
  font: 500 13px var(--font-sans);
  color: var(--ink-900);
  white-space: nowrap;
  flex: none;
}
.acrm-recordselect-tx .em {
  font: 500 12px var(--font-mono);
  color: var(--fg-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.acrm-recordselect-opt .acrm-checkbox {
  border-color: var(--border);
}
.acrm-recordselect-empty {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  font: 400 13px var(--font-sans);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
   8) Radio (volba jedné). Segmented = .acrm-segmented (ds.css) — reuse.
   --------------------------------------------------------------------------- */
.acrm-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.acrm-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font: 500 13px var(--font-sans);
  color: var(--ink-800);
}
.acrm-radio-dot {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  transition: border-color 0.12s;
}
.acrm-radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.12s;
}
.acrm-radio.is-on .acrm-radio-dot {
  border-color: var(--accent);
}
.acrm-radio.is-on .acrm-radio-dot::after {
  transform: scale(1);
}
.acrm-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.acrm-radio-input:focus-visible + .acrm-radio-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------------------------------------------------------------------------
   9) Checkbox (off / on / indeterminate) — samostatný, vždy viditelný
      (na rozdíl od table-scoped .ck v segment-screen.css).
   --------------------------------------------------------------------------- */
.acrm-checkbox {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-100);
  color: #fff;
  transition:
    background 0.11s,
    border-color 0.11s;
}
.acrm-checkbox > .ti,
.acrm-checkbox > svg {
  width: 12px;
  height: 12px;
  font-size: 12px;
  opacity: 0;
}
.acrm-checkbox.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.acrm-checkbox.is-mixed {
  background: var(--fg-muted);
  border-color: var(--fg-muted);
}
.acrm-checkbox.is-on > .ti,
.acrm-checkbox.is-on > svg,
.acrm-checkbox.is-mixed > .ti,
.acrm-checkbox.is-mixed > svg {
  opacity: 1;
}
.acrm-check-row {
  display: inline-flex;
  align-items: center;
  gap: 9px; /* ds-ok: DS literál (checkbox row) */
  cursor: pointer;
  font: 500 13px var(--font-sans);
  color: var(--ink-700);
}
.acrm-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.acrm-check-input:focus-visible + .acrm-checkbox {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------------------------------------------------------------------------
   10) Option chips (multi toggle) — vybraný = modrý RÁMEČEK (ne výplň).
   --------------------------------------------------------------------------- */
.acrm-optchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.acrm-optchip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 30px;
  padding: 0 var(--sp-3);
  white-space: nowrap;
  cursor: pointer;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: 500 12.5px var(--font-sans);
  color: var(--ink-700);
}
.acrm-optchip:hover {
  background: var(--hover-surface);
}
.acrm-optchip > .ti,
.acrm-optchip > svg {
  color: var(--fg-muted);
  font-size: 15px;
}
.acrm-optchip.is-on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent-ink);
}
.acrm-optchip.is-on > .ti,
.acrm-optchip.is-on > svg {
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   11) Switch (přepínač)
   --------------------------------------------------------------------------- */
.acrm-switch-row {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font: 500 13px var(--font-sans);
  color: var(--ink-800);
}
.acrm-switch {
  position: relative;
  width: 34px;
  height: 20px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-300);
  cursor: pointer;
  transition: background 0.15s;
}
.acrm-switch.is-on {
  background: var(--accent);
}
.acrm-switch > i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}
.acrm-switch.is-on > i {
  transform: translateX(14px);
}
.acrm-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------------------------------------------------------------------------
   12) Tag input (volné hodnoty). Reference na záznam patří EntityRef, ne sem.
   --------------------------------------------------------------------------- */
.acrm-taginput {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.acrm-taginput:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.acrm-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* ds-ok: DS literál (tag) */
  height: 24px;
  padding: 0 4px 0 9px; /* ds-ok: DS literál (tag) */
  background: var(--surface-75);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 500 12px var(--font-sans);
  color: var(--ink-800);
}
.acrm-tag-x {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.acrm-tag-x:hover {
  background: var(--active-surface);
  color: var(--ink-900);
}
.acrm-tag-x > .ti,
.acrm-tag-x > svg {
  font-size: 13px;
}
.acrm-taginput > input {
  flex: 1;
  min-width: 60px;
  height: 24px;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--p);
  color: var(--ink-900);
}
.acrm-taginput > input::placeholder {
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
   13) Filtrační chip (label │ hodnota) — h32
   --------------------------------------------------------------------------- */
.acrm-fchip {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  overflow: hidden;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.acrm-fchip-lab {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  font: 500 13px var(--font-sans);
  color: var(--fg-secondary);
}
.acrm-fchip-val {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-left: 1px solid var(--border);
  font: 500 13px var(--font-display);
  color: var(--ink-900);
}
.acrm-fchip-x {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.acrm-fchip-x:hover {
  background: var(--hover-surface);
  color: var(--ink-900);
}
.acrm-fchip-x > .ti,
.acrm-fchip-x > svg {
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   14) Odebíratelné chipy (volné hodnoty) + dashed „přidat"
   --------------------------------------------------------------------------- */
.acrm-rmchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.acrm-rmchip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 4px 0 9px; /* ds-ok: DS literál (rmchip) */
  background: var(--surface-75);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font: 500 12px var(--font-sans);
  color: var(--ink-800);
}
.acrm-rmchip-x {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 50%;
}
.acrm-rmchip-x:hover {
  background: var(--active-surface);
  color: var(--ink-900);
}
.acrm-rmchip-x > .ti,
.acrm-rmchip-x > svg {
  font-size: 12px;
}
.acrm-rmchip-add {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 10px 0 8px; /* ds-ok: DS literál (add chip) */
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  font: 500 12px var(--font-sans);
  color: var(--fg-secondary);
  cursor: pointer;
}
.acrm-rmchip-add:hover {
  background: var(--hover-surface);
  color: var(--ink-800);
  border-color: var(--fg-muted);
}
.acrm-rmchip-add > .ti,
.acrm-rmchip-add > svg {
  font-size: 14px;
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
   Dark — pole/kontejnery na --surface-50 (shodně s .acrm-input v ds.css).
   --------------------------------------------------------------------------- */
[data-theme='dark'] .acrm-inputwrap,
[data-theme='dark'] .acrm-stepper,
[data-theme='dark'] .acrm-combobox,
[data-theme='dark'] .acrm-recordselect-trigger,
[data-theme='dark'] .acrm-optchip,
[data-theme='dark'] .acrm-taginput,
[data-theme='dark'] .acrm-fchip {
  background: var(--surface-50);
}
[data-theme='dark'] .acrm-checkbox {
  background: var(--surface-50);
}