/* =============================================================================
   _field.css — canonical SEARCH-FIELD component (extracted from
   comp-search.html so the design-system card AND the prototype share ONE source).

   Covers: the search layout (.search / .search--lg / .search-wrap), the .field
   well + its hover/focus/error/disabled states, the .clear button, the .suggest
   list, and the dark-mode rescues. Import AFTER colors_and_type.css (tokens +
   layer order) and _buttons.css (the Hledat button). The .field core is
   @layer components (the focus ring lives in @layer base); the .clear button,
   .suggest list and dark-mode blocks stay UNLAYERED — their own :focus-visible
   rings already beat the base ring and their dark overrides must stay unlayered
   to win, exactly as in the original card.

   NB: there is intentionally no shared field for plain text inputs / selects /
   textareas — those `.field` boxes stay duplicated per preview card (see
   notes/decisions). This file is the SEARCH field specifically, the one reused
   by the prototype.
   ============================================================================= */

/* ── search layout ───────────────────────────────────────────────────── */
.search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

@layer components {
.search .field,
.search-wrap .field {
  display: flex; align-items: center; gap: 8px;
  /* Query container so the leading search icon hides itself when narrow.
     The clear button is NOT a direct `> i.bi-search`, so it is untouched. */
  container: field-q / inline-size;
  padding: 9px 12px; border: 1px solid var(--color-border-default);
  border-radius: 6px; background: var(--field-bg);
  font: 400 14.5px var(--font-sans); color: var(--color-fg-default);
  transition: background-color 100ms linear,
              border-color 100ms linear,
              box-shadow 140ms ease-out;
}
.search .field > i.bi-search,
.search-wrap .field > i.bi-search { color: var(--color-fg-tertiary); flex: none; transition: color 100ms linear; }
.search .field:hover:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within) > i.bi-search,
.search-wrap .field:hover:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within) > i.bi-search,
.search .field[data-state="hover"]:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within) > i.bi-search,
.search-wrap .field[data-state="hover"]:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within) > i.bi-search { color: var(--color-fg-secondary); }
.search .field--focus > i.bi-search,
.search-wrap .field--focus > i.bi-search,
.search .field:focus-within > i.bi-search,
.search-wrap .field:focus-within > i.bi-search { color: var(--gov-color-primary-500); }
.search .field--error:hover:not(.field--disabled):not(.field--focus):not(:focus-within) > i.bi-search,
.search-wrap .field--error:hover:not(.field--disabled):not(.field--focus):not(:focus-within) > i.bi-search,
.search .field--error[data-state="hover"]:not(.field--disabled):not(.field--focus):not(:focus-within) > i.bi-search,
.search-wrap .field--error[data-state="hover"]:not(.field--disabled):not(.field--focus):not(:focus-within) > i.bi-search { color: var(--gov-color-error-700); }
.search .field--error.field--focus > i.bi-search,
.search .field--error:focus-within > i.bi-search,
.search-wrap .field--error.field--focus > i.bi-search,
.search-wrap .field--error:focus-within > i.bi-search { color: var(--gov-color-error-500); }
.search .field input,
.search-wrap .field input { border: 0; outline: 0; flex: 1; background: transparent; font: inherit; color: inherit; min-width: 0; }
/* type="search" inputs paint a NATIVE clear glyph (WebKit cancel button) on top
   of our own `.clear` button → a doubled ×. Suppress the native one; the styled,
   tab-reachable `.clear` button is the single affordance. */
.search .field input[type="search"]::-webkit-search-cancel-button,
.search-wrap .field input[type="search"]::-webkit-search-cancel-button,
.search .field input[type="search"]::-webkit-search-decoration,
.search-wrap .field input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search .field:hover:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within),
.search-wrap .field:hover:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within),
.search .field[data-state="hover"]:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within),
.search-wrap .field[data-state="hover"]:not(.field--disabled):not(.field--error):not(.field--focus):not(:focus-within) { background: var(--gov-color-primary-50); }
.search .field--error:hover:not(.field--disabled):not(.field--focus):not(:focus-within),
.search-wrap .field--error:hover:not(.field--disabled):not(.field--focus):not(:focus-within),
.search .field--error[data-state="hover"]:not(.field--disabled):not(.field--focus):not(:focus-within),
.search-wrap .field--error[data-state="hover"]:not(.field--disabled):not(.field--focus):not(:focus-within) { background: var(--gov-color-error-50); }
.search .field--focus,
.search-wrap .field--focus,
.search .field:focus-within,
.search-wrap .field:focus-within { border-color: var(--gov-color-primary-500); box-shadow: var(--shadow-focus); }
.search .field--focus,
.search-wrap .field--focus,
.search .field:focus-within,
.search-wrap .field:focus-within {
  transition: background-color 100ms linear,
              border-color 140ms ease-out,
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.search .field--error,
.search-wrap .field--error { border-color: var(--gov-color-error-500); }
.search .field--error.field--focus,
.search .field--error:focus-within,
.search-wrap .field--error.field--focus,
.search-wrap .field--error:focus-within { border-color: var(--gov-color-error-500); box-shadow: var(--shadow-focus-error); }
.search .field--disabled,
.search-wrap .field--disabled { background: var(--field-disabled-bg); border-style: var(--field-disabled-bd-style); cursor: not-allowed; }
.search .field--disabled > i.bi-search,
.search-wrap .field--disabled > i.bi-search { color: var(--color-fg-tertiary); }
.search .field--disabled input,
.search-wrap .field--disabled input { color: var(--color-fg-tertiary); cursor: not-allowed; }
.search .field input:focus, .search .field input:focus-visible,
.search-wrap .field input:focus, .search-wrap .field input:focus-visible { box-shadow: none; }
}

/* Narrow-field space-saver: hide the leading search glyph below 150px so the
   query text + clear button keep room. Only the leading `> i.bi-search` is
   targeted; the trailing `.clear` button survives. Unlayered to beat the
   @layer reset `.bi { display:inline-flex }`. */
@container field-q (max-width: 150px) {
  .search .field > i.bi-search,
  .search-wrap .field > i.bi-search { display: none; }
}

/* ── clear button (real <button> — tab-reachable, AT-announced) ─────────── */
.search .field .clear,
.search-wrap .field .clear {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-fg-tertiary);
  border-radius: 999px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  font: inherit; line-height: 1;
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  visibility: visible;
  transition: background-color 100ms linear,
              color 100ms linear,
              box-shadow 140ms ease-out,
              opacity 160ms ease-out,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s;
}
.search .field .clear > i,
.search-wrap .field .clear > i { font-size: 14px; line-height: 1; }
.search .field[data-empty="true"] .clear,
.search-wrap .field[data-empty="true"] .clear {
  opacity: 0;
  transform: scale(0.6);
  visibility: hidden;
  pointer-events: none;
  transition: background-color 100ms linear,
              color 100ms linear,
              box-shadow 140ms ease-out,
              opacity 120ms ease-in,
              transform 160ms cubic-bezier(0.4, 0, 1, 0.6),
              visibility 0s linear 160ms;
}
.search .field .clear:hover,
.search-wrap .field .clear:hover,
.search .field .clear[data-state="hover"],
.search-wrap .field .clear[data-state="hover"] {
  background: var(--gov-color-neutral-100);
  color: var(--color-fg-default);
}
.search .field .clear:active,
.search-wrap .field .clear:active,
.search .field .clear[data-state="pressed"],
.search-wrap .field .clear[data-state="pressed"] {
  background: var(--gov-color-neutral-200);
  color: var(--color-fg-default);
  box-shadow: inset 0 1px 2px rgba(12,24,56,0.12);
}
.search .field .clear:focus-visible,
.search-wrap .field .clear:focus-visible,
.search .field .clear.is-focus,
.search-wrap .field .clear.is-focus {
  outline: none;
  background: var(--color-bg-surface);
  color: var(--color-fg-default);
  box-shadow: var(--shadow-focus);
  transition: background-color 100ms linear,
              color 100ms linear,
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 160ms ease-out,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.search .field .clear:disabled,
.search-wrap .field .clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  box-shadow: none;
}

/* ── large variant ───────────────────────────────────────────────────── */
.search--lg .field { padding: 12px 16px; font-size: 16px; border-radius: 8px; }
.search--lg .btn   { padding: 12px 18px; font-size: 15px; }
.search--lg .field .clear { width: 26px; height: 26px; }
.search--lg .field .clear > i { font-size: 16px; }

/* ── small variant (toolbar embeds — e.g. the catalogue list toolbar) ── */
.search--sm .field { padding: 5px 10px; font-size: 13.5px; }
.search--sm .field .clear { width: 20px; height: 20px; }
.search--sm .field .clear > i { font-size: 13px; }

/* ── inline search with suggestions ──────────────────────────────────── */
.search-wrap { position: relative; }
.suggest {
  margin-top: 4px;
  background: var(--color-bg-surface, white);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(12,24,56,0.10), 0 2px 4px rgba(12,24,56,0.05);
  padding: 6px 0;
  font-size: 13.5px;
}
.suggest__hdr { padding: 6px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-fg-tertiary); font-weight: 500; }
.suggest__item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.suggest__item:hover, .suggest__item[data-active="1"] { background: var(--gov-color-primary-50); }
.suggest__item .code { font-family: var(--font-mono); font-weight: 600; color: var(--color-fg-default); min-width: 96px; font-size: 12.5px; }
.suggest__item .title { color: var(--color-fg-default); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__item mark { background: var(--gov-color-primary-100); color: var(--color-fg-default); padding: 0 2px; border-radius: 2px; }

/* ── dark mode — neutral hover/pressed re-tints (the neutral tokens flip very
   dark; re-tint with translucent white over the dark well). --shadow-focus is
   already remapped in _dark.css. ─────────────────────────────────────────── */
body[data-theme="dark"] .search .field .clear:hover,
body[data-theme="dark"] .search-wrap .field .clear:hover,
body[data-theme="dark"] .search .field .clear[data-state="hover"],
body[data-theme="dark"] .search-wrap .field .clear[data-state="hover"] {
  background: rgba(255,255,255,0.08);
  color: var(--color-fg-default);
}
body[data-theme="dark"] .search .field .clear:active,
body[data-theme="dark"] .search-wrap .field .clear:active,
body[data-theme="dark"] .search .field .clear[data-state="pressed"],
body[data-theme="dark"] .search-wrap .field .clear[data-state="pressed"] {
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
}
body[data-theme="dark"] .search .field .clear:focus-visible,
body[data-theme="dark"] .search-wrap .field .clear:focus-visible,
body[data-theme="dark"] .search .field .clear.is-focus,
body[data-theme="dark"] .search-wrap .field .clear.is-focus {
  background: rgba(255,255,255,0.06);
  color: var(--color-fg-default);
}