/* ============================================================
   URBINO · INPUT
   Atom. Token-driven; world is set by parent (.urbino-cit) or
   local shortcut (.u-input--cit). Variants: text, textarea,
   select, multi-select, search. States: idle, focus, filled,
   disabled, error, readonly.

   Composes into .u-field (label + control + hint/error/counter).
   ============================================================ */


/* ============================================================
   FIELD WRAPPER
   ============================================================ */

.u-field {
  display: flex;
  flex-direction: column;
  gap: var(--u-field-gap);
}
.u-field__label {
  font-family: var(--u-font-sans);
  font-size: var(--u-field-label-font-size);
  font-weight: var(--u-field-label-font-weight);
  color: var(--u-field-label-color);
  line-height: 1.4;
}
.u-field--cit .u-field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--u-slate-900);
}
.u-field__required { color: var(--u-red-500); margin-left: 2px; }
.u-field__row {
  display: flex; justify-content: space-between; gap: var(--u-space-3);
  font-size: var(--u-field-hint-font-size); line-height: 1.4;
}
.u-field__hint    { font-size: var(--u-field-hint-font-size); color: var(--u-field-hint-color); }
.u-field__error   { font-size: var(--u-field-hint-font-size); color: var(--u-field-error-color); display: inline-flex; gap: var(--u-space-1); align-items: center; }
.u-field__counter { font-size: var(--u-field-hint-font-size); color: var(--u-fg-4); font-variant-numeric: tabular-nums; margin-left: auto; flex-shrink: 0; }


/* ============================================================
   THE CONTROL — text / textarea / select / multi-select
   Single ruleset; size/variant comes from modifiers.
   ============================================================ */

.u-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--u-input-h-md);
  padding: 0 var(--u-input-px-md);
  font-family: var(--u-font-sans);
  font-size: var(--u-input-font-size-md);
  font-weight: 400;
  color: var(--u-fg-1);
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-input-radius-md);
  outline: none;
  appearance: none;
  transition:
    border-color var(--u-dur-fast) var(--u-ease-out),
    background var(--u-dur-fast) var(--u-ease-out),
    box-shadow var(--u-dur-fast) var(--u-ease-out);
}
.u-input::placeholder { color: var(--u-fg-4); }


/* ============================================================
   WORLD SHORTCUTS
   ============================================================ */

.u-input--mgr {
  /* default :root — selector exists as a marker */
}

.u-input--cit {
  --u-input-h-sm:      48px;
  --u-input-h-md:      56px;
  --u-input-h-lg:      56px;
  --u-input-radius-sm: var(--u-radius-md);
  --u-input-radius-md: var(--u-radius-lg);
  --u-input-radius-lg: var(--u-radius-lg);
  --u-input-px-md:     var(--u-space-4);
  --u-input-font-size-md: 16px;
  --u-input-textarea-min-h: 120px;
  --u-input-textarea-py:    14px;
  --u-input-leading-offset: var(--u-space-4);
  --u-input-icon-size:      20px;
  --u-input-padding-leading: 44px;
}


/* ============================================================
   SIZES
   ============================================================ */

.u-input--sm {
  height: var(--u-input-h-sm);
  padding: 0 var(--u-input-px-sm);
  border-radius: var(--u-input-radius-sm);
  font-size: var(--u-input-font-size-sm);
}

.u-input--lg {
  height: var(--u-input-h-lg);
  padding: 0 var(--u-input-px-lg);
  border-radius: var(--u-input-radius-lg);
  font-size: var(--u-input-font-size-lg);
}

/* Legacy: .u-input--md was used in citizen world to mean "smaller than default" (48px).
   Map it to --sm for compatibility. */
.u-input--cit.u-input--md {
  height: var(--u-input-h-sm);
  padding: 0 var(--u-input-px-sm, var(--u-input-px-md));
  border-radius: var(--u-input-radius-sm);
  font-size: var(--u-input-font-size-sm, var(--u-input-font-size-md));
}


/* ============================================================
   STATES — hover, focus, error, disabled, readonly
   ============================================================ */

.u-input:hover         { border-color: var(--u-border-strong); }
.u-input:focus,
.u-input.is-focus      {
  border-color: var(--u-primary);
  box-shadow: var(--u-focus-ring);
}

.u-input.is-error              { border-color: var(--u-red-500); }
.u-input.is-error:focus,
.u-input.is-error.is-focus     { box-shadow: var(--u-focus-ring-danger); }

.u-input[disabled],
.u-input--disabled {
  background: var(--u-surface-alt);
  color: var(--u-fg-3);
  border-color: var(--u-border);
  cursor: not-allowed;
}
.u-input[readonly],
.u-input--readonly { background: var(--u-surface-alt); }


/* ============================================================
   TEXTAREA
   ============================================================ */

textarea.u-input,
.u-input--textarea {
  height: auto;
  min-height: var(--u-input-textarea-min-h);
  padding-top: var(--u-input-textarea-py);
  padding-bottom: var(--u-input-textarea-py);
  line-height: 1.5;
  resize: vertical;
  font-family: var(--u-font-sans);
}


/* ============================================================
   SELECT (single value, native dropdown)
   ============================================================ */

.u-input--select {
  cursor: pointer;
  padding-right: var(--u-space-8);                       /* 32 */
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--u-fg-3) 50%),
    linear-gradient(135deg, var(--u-fg-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.u-input--cit.u-input--select {
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  padding-right: var(--u-space-10);                      /* 40 */
}


/* ============================================================
   MULTI-SELECT
   ============================================================ */

.u-input--multiselect {
  height: auto;
  min-height: var(--u-input-h-md);
  padding: var(--u-space-1) var(--u-space-8) var(--u-space-1) var(--u-space-2);
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  flex-wrap: wrap;
  cursor: pointer;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--u-fg-3) 50%),
    linear-gradient(135deg, var(--u-fg-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50%), calc(100% - 11px) calc(50%);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.u-input--cit.u-input--multiselect {
  min-height: var(--u-input-h-md);
  padding: var(--u-space-2) var(--u-space-10) var(--u-space-2) var(--u-space-3);
}

.u-multiselect__token {
  display: inline-flex; align-items: center; gap: var(--u-space-1);
  padding: 2px var(--u-space-1) 2px var(--u-space-2);
  background: var(--u-surface-sunk);
  color: var(--u-fg-2);
  border-radius: var(--u-radius-xs);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.u-multiselect__token-x {
  width: 14px; height: 14px;
  background: transparent; border: 0;
  color: var(--u-fg-3); cursor: pointer;
  padding: 0; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 2px;
}
.u-multiselect__token-x:hover { background: var(--u-slate-200); color: var(--u-fg-1); }
.u-multiselect__placeholder {
  color: var(--u-fg-4);
  font-size: inherit;
}


/* ============================================================
   AFFIXES — leading icon, trailing clear-×, prefix/suffix label
   Wrap the input in .u-input-wrap.
   ============================================================ */

.u-input-wrap { position: relative; display: block; }

.u-input-wrap--leading > .u-input,
.u-input--has-leading { padding-left: var(--u-input-padding-leading); }

.u-input-wrap > .u-input__leading {
  position: absolute;
  left: var(--u-input-leading-offset);
  top: 50%;
  transform: translateY(-50%);
  color: var(--u-fg-4);
  pointer-events: none;
  display: flex; align-items: center;
}

.u-input-wrap > .u-input__leading img,
.u-input-wrap > .u-input__leading svg {
  width: var(--u-input-icon-size);
  height: var(--u-input-icon-size);
  display: block;
}

.u-input-wrap > .u-input__clear {
  position: absolute;
  right: var(--u-space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--u-slate-200);
  color: var(--u-slate-700);
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  padding: 0;
}
.u-input-wrap > .u-input__clear:hover { background: var(--u-slate-300); color: var(--u-fg-1); }
.u-input-wrap > .u-input--has-clear,
.u-input-wrap--clearable > .u-input { padding-right: var(--u-space-9, 36px); }