/* ─── Input ───────────────────────────────────────────────────────────────────
   Values: site/tokens.css
   Consumers: site/preview/input.html + src/components/Input/Input.tsx
   States: data-attributes only
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root wrapper ──────────────────────────────────────────────────────────── */

.ds-input {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  width:          100%;
}

/* ── Size custom-property bridges ──────────────────────────────────────────── */

.ds-input[data-size='sm'] {
  --_input-h:           var(--ds-input-sm-h);
  --_input-px:          var(--ds-input-sm-px);
  --_input-gap:         var(--ds-input-sm-gap);
  --_input-fs:          var(--ds-input-sm-fs);
  --_input-lh:          var(--ds-input-sm-lh);
  --_input-icon:        var(--ds-input-sm-icon);
  --_input-r:           var(--ds-input-sm-r);
  --_input-label-fs:    var(--ds-input-sm-label-fs);
  --_input-helper-fs:   var(--ds-input-sm-helper-fs);
  --_input-clear-icon:   var(--ds-input-sm-icon);
  --_input-clear-stroke: var(--ds-icon-stroke-sm);
  --_input-icon-stroke:  var(--ds-icon-stroke-sm);
}

.ds-input[data-size='md'] {
  --_input-h:           var(--ds-input-md-h);
  --_input-px:          var(--ds-input-md-px);
  --_input-gap:         var(--ds-input-md-gap);
  --_input-fs:          var(--ds-input-md-fs);
  --_input-lh:          var(--ds-input-md-lh);
  --_input-icon:        var(--ds-input-md-icon);
  --_input-r:           var(--ds-input-md-r);
  --_input-label-fs:    var(--ds-input-md-label-fs);
  --_input-helper-fs:   var(--ds-input-md-helper-fs);
  --_input-clear-icon:   var(--ds-input-md-icon);
  --_input-clear-stroke: var(--ds-icon-stroke-md);
  --_input-icon-stroke:  var(--ds-icon-stroke-md);
}

.ds-input[data-size='lg'] {
  --_input-h:           var(--ds-input-lg-h);
  --_input-px:          var(--ds-input-lg-px);
  --_input-gap:         var(--ds-input-lg-gap);
  --_input-fs:          var(--ds-input-lg-fs);
  --_input-lh:          var(--ds-input-lg-lh);
  --_input-icon:        var(--ds-input-lg-icon);
  --_input-r:           var(--ds-input-lg-r);
  --_input-label-fs:    var(--ds-input-lg-label-fs);
  --_input-helper-fs:   var(--ds-input-lg-helper-fs);
  --_input-clear-icon:   var(--ds-input-lg-icon);
  --_input-clear-stroke: var(--ds-icon-stroke-lg);
  --_input-icon-stroke:  var(--ds-icon-stroke-lg);
}

.ds-input[data-size='xl'] {
  --_input-h:           var(--ds-input-xl-h);
  --_input-px:          var(--ds-input-xl-px);
  --_input-gap:         var(--ds-input-xl-gap);
  --_input-fs:          var(--ds-input-xl-fs);
  --_input-lh:          var(--ds-input-xl-lh);
  --_input-icon:        var(--ds-input-xl-icon);
  --_input-r:           var(--ds-input-xl-r);
  --_input-label-fs:    var(--ds-input-xl-label-fs, var(--ds-input-lg-label-fs));
  --_input-helper-fs:   var(--ds-input-xl-helper-fs, var(--ds-input-lg-helper-fs));
  --_input-clear-icon:   var(--ds-input-xl-icon);
  --_input-clear-stroke: var(--ds-input-xl-icon-stroke);
  --_input-icon-stroke:  var(--ds-input-xl-icon-stroke);
}

/* ── Label ─────────────────────────────────────────────────────────────────── */

.ds-input-label {
  font-family: inherit;
  font-weight: 500;
  color:       var(--ds-text-secondary);
  font-size:   var(--_input-label-fs);
  line-height: 1.4;
}

/* ── Label row (label + help-btn inline) ────────────────────────────────────── */

.ds-input-header {
  display:     flex;
  align-items: center;
  gap:         4px;
}

/* ── Field row (control + external help-btn) ────────────────────────────────── */

.ds-input-field-row {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.ds-input-field-row .ds-input-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Help icon button (снаружи поля, справа) ────────────────────────────────── */

.ds-field-help-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           20px;
  height:          20px;
  padding:         0;
  border:          none;
  background:      transparent;
  color:           var(--ds-icon-tertiary);
  cursor:          pointer;
  position:        relative;
  transition:      color var(--ds-dur-1) var(--ds-ease);
}

.ds-field-help-btn:hover { color: var(--ds-icon-primary); }
.ds-field-help-btn svg   { display: block; }

/* ── Required marker ───────────────────────────────────────────────────────── */

.ds-input-required {
  color: var(--ds-neg-default);
}

/* ── Control wrapper (field container) ─────────────────────────────────────── */

.ds-input-control {
  position:      relative;
  display:       flex;
  align-items:   center;
  gap:           var(--_input-gap);
  height:        var(--_input-h);
  padding:       0 var(--_input-px);
  border:        1px solid var(--ds-nba-border);
  border-radius: var(--_input-r);
  background:    var(--ds-surface-0);
  transition:    var(--ds-component-transition);
  cursor:        text;
}

.ds-input-control:hover {
  border-color: var(--ds-stroke-neutral-hover);
}

.ds-input-control:focus-within {
  border-color: var(--ds-stroke-high);
  box-shadow:   inset 0 0 0 1px var(--ds-stroke-high);
}

/* ── Native input field ────────────────────────────────────────────────────── */

.ds-input-field {
  flex:        1 1 auto;
  min-width:   0;
  border:      none;
  outline:     none;
  background:  transparent;
  font-family: inherit;
  font-size:   var(--_input-fs);
  line-height: var(--_input-lh);
  color:       var(--ds-text-primary);
  padding:     0;
}

.ds-input-field::placeholder {
  color: var(--ds-text-tertiary);
}

/* ── Icon slots ────────────────────────────────────────────────────────────── */

.ds-input-icon-left,
.ds-input-icon-right,
.ds-input-prefix,
.ds-input-suffix {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  width:       var(--_input-icon);
  height:      var(--_input-icon);
}

.ds-input-icon-left  { color: var(--ds-icon-disable-neutral);  }
.ds-input-icon-right { color: var(--ds-icon-tertiary); }
.ds-input-prefix,
.ds-input-suffix {
  color:       var(--ds-text-tertiary);
  width:       auto;
  height:      auto;
  font-size:   var(--_input-fs);
  line-height: var(--_input-lh);
  white-space: nowrap;
  user-select: none;
}

.ds-input-icon-left svg,
.ds-input-icon-right svg,
.ds-input-prefix svg,
.ds-input-suffix svg {
  width:  100%;
  height: 100%;
}

/* ── Caption / helper text ─────────────────────────────────────────────────── */

.ds-input-caption {
  font-family: inherit;
  font-size:   var(--_input-helper-fs);
  line-height: 1.4;
  color:       var(--ds-text-tertiary);
}

/* ── Clear button ──────────────────────────────────────────────────────────── */

.ds-input-clear-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           var(--_input-clear-icon);
  height:          var(--_input-clear-icon);
  padding:         0;
  border:          none;
  background:      transparent;
  color:           var(--ds-icon-tertiary);
  cursor:          pointer;
  border-radius:   var(--ds-field-icon-btn-radius);
  transition:      color var(--ds-dur-1) var(--ds-ease), background var(--ds-dur-1) var(--ds-ease);
}

.ds-input-clear-btn:hover  { background: var(--ds-field-icon-btn-hover-bg); }
.ds-input-clear-btn:active { color: var(--ds-field-icon-btn-active-color); background: var(--ds-field-icon-btn-active-bg); }

.ds-input-clear-btn svg {
  width:        var(--_input-clear-icon, 12px);
  height:       var(--_input-clear-icon, 12px);
  stroke-width: var(--_input-clear-stroke, 3);
}

.ds-input-icon-left svg {
  stroke-width: var(--_input-icon-stroke, 1.5);
}

/* ── Help icons ─────────────────────────────────────────────────────────────── */

.ds-input-icon-help {
  display:     inline-flex;
  align-items: center;
  color:       var(--ds-icon-tertiary);
  flex-shrink: 0;
  margin-left: 4px;
}

.ds-input-icon-help-field {
  display:     inline-flex;
  align-items: center;
  color:       var(--ds-icon-tertiary);
  flex-shrink: 0;
}

/* ── Caption row (helper + counter) ────────────────────────────────────────── */

.ds-input-caption-row {
  display:     flex;
  align-items: flex-start;
  gap:         var(--ds-field-counter-gap, 8px);
}

/* ── Caption validation icon (circle-x / circle-check / circle-alert) ──────── */

.ds-input-caption-icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  width:       16px;
  height:      16px;
}

/* ── Counter ───────────────────────────────────────────────────────────────── */

.ds-input-counter {
  margin-left: auto;
  color:       var(--ds-text-tertiary);
  font-size:   var(--ds-field-caption-fs, var(--_input-helper-fs));
  line-height: var(--ds-field-caption-lh, 1.4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Error message ─────────────────────────────────────────────────────────── */

.ds-input-error-msg {
  font-family: inherit;
  font-size:   var(--_input-helper-fs);
  line-height: 1.4;
  color:       var(--ds-neg-default);
}

/* ══════════════════════════════════════════════════════════════════════════════
   VALIDATION INTENTS  (data-error / data-success / data-warning on root)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Error ─────────────────────────────────────────────────────────────────── */

.ds-input[data-error] .ds-input-control {
  border-color: var(--ds-neg-default);
}

.ds-input[data-error] .ds-input-control:focus-within {
  border-color: var(--ds-neg-default);
  box-shadow:   inset 0 0 0 1px var(--ds-neg-default);
}

.ds-input[data-error] .ds-input-icon-right,
.ds-input[data-error] .ds-input-suffix {
  color: var(--ds-neg-default);
}

.ds-input[data-error] .ds-input-caption,
.ds-input[data-error] .ds-input-caption-icon {
  color: var(--ds-neg-default);
}

/* ── Success ───────────────────────────────────────────────────────────────── */

.ds-input[data-success] .ds-input-control {
  border-color: var(--ds-pos-default);
}

.ds-input[data-success] .ds-input-control:focus-within {
  border-color: var(--ds-pos-default);
  box-shadow:   inset 0 0 0 1px var(--ds-pos-default);
}

.ds-input[data-success] .ds-input-icon-right,
.ds-input[data-success] .ds-input-suffix {
  color: var(--ds-pos-default);
}

.ds-input[data-success] .ds-input-caption,
.ds-input[data-success] .ds-input-caption-icon {
  color: var(--ds-pos-default);
}

/* ── Warning ───────────────────────────────────────────────────────────────── */

.ds-input[data-warning] .ds-input-control {
  border-color: var(--ds-warn-700);
}

.ds-input[data-warning] .ds-input-control:focus-within {
  border-color: var(--ds-warn-700);
  box-shadow:   inset 0 0 0 1px var(--ds-warn-700);
}

.ds-input[data-warning] .ds-input-icon-right,
.ds-input[data-warning] .ds-input-suffix {
  color: var(--ds-warn-700);
}

.ds-input[data-warning] .ds-input-caption,
.ds-input[data-warning] .ds-input-caption-icon {
  color: var(--ds-warn-700);
}

/* ══════════════════════════════════════════════════════════════════════════════
   STATES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Disabled ──────────────────────────────────────────────────────────────── */

.ds-input[data-disabled] {
  pointer-events: none;
}

.ds-input[data-disabled] .ds-input-control {
  border-color: var(--ds-nba-border-disabled);
  background:   var(--ds-nba-15);
}

.ds-input[data-disabled] .ds-input-field,
.ds-input[data-disabled] .ds-input-field::placeholder,
.ds-input[data-disabled] .ds-input-label,
.ds-input[data-disabled] .ds-input-caption,
.ds-input[data-disabled] .ds-input-icon-left,
.ds-input[data-disabled] .ds-input-icon-right,
.ds-input[data-disabled] .ds-input-prefix,
.ds-input[data-disabled] .ds-input-suffix {
  color: var(--ds-disabled-text);
}

/* ── Read-only ─────────────────────────────────────────────────────────────── */

.ds-input[data-readonly] .ds-input-control {
  background: var(--ds-surface-muted);
  cursor:     default;
}

.ds-input[data-readonly] .ds-input-field {
  cursor: default;
}

/* ── Focused (explicit data-attr supplements :focus-within for JS-driven state) */

.ds-input[data-focused] .ds-input-control {
  border-color: var(--ds-stroke-high);
  box-shadow:   inset 0 0 0 1px var(--ds-stroke-high);
}

.ds-input[data-error][data-focused] .ds-input-control {
  border-color: var(--ds-neg-default);
  box-shadow:   inset 0 0 0 1px var(--ds-neg-default);
}

.ds-input[data-success][data-focused] .ds-input-control {
  border-color: var(--ds-pos-default);
  box-shadow:   inset 0 0 0 1px var(--ds-pos-default);
}

.ds-input[data-warning][data-focused] .ds-input-control {
  border-color: var(--ds-warn-700);
  box-shadow:   inset 0 0 0 1px var(--ds-warn-700);
}

/* ── Hovered (explicit data-attr for Storybook / test harness) ─────────────── */

.ds-input[data-hovered] .ds-input-control {
  border-color: var(--ds-stroke-neutral-hover);
}

/* ── Filled (value entered, not focused) ───────────────────────────────────── */

.ds-input[data-filled] .ds-input-control:not(:focus-within) {
  border-color: var(--ds-stroke-high);
}

.ds-input[data-filled] .ds-input-field {
  color: var(--ds-text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK / INVERT — validation caption & icon use lighter APCA tokens
   --ds-neg-default (#CC1811 dark) and --ds-pos-default (#30960D dark) have
   insufficient Lc for text on dark bg. Use *-500 tokens (tagged "text on dark").
   Warning is already correct: --ds-warn-700 = #F4C873 in dark ✅
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .ds-input[data-error] .ds-input-caption,
[data-theme="dark"] .ds-input[data-error] .ds-input-caption-icon,
[data-theme="dark"] .ds-input[data-error] .ds-input-icon-right,
[data-theme="dark"] .ds-input[data-error] .ds-input-suffix { color: var(--ds-neg-500); }

[data-theme="dark"] .ds-input[data-success] .ds-input-caption,
[data-theme="dark"] .ds-input[data-success] .ds-input-caption-icon,
[data-theme="dark"] .ds-input[data-success] .ds-input-icon-right,
[data-theme="dark"] .ds-input[data-success] .ds-input-suffix { color: var(--ds-pos-500); }

/* LI (Light Invert): input surface = --ds-surface = nb-900 → dark bg, needs lighter text */
.theme-invert .ds-input[data-error] .ds-input-caption,
.theme-invert .ds-input[data-error] .ds-input-caption-icon,
.theme-invert .ds-input[data-error] .ds-input-icon-right { color: var(--ds-neg-500); }

.theme-invert .ds-input[data-success] .ds-input-caption,
.theme-invert .ds-input[data-success] .ds-input-caption-icon,
.theme-invert .ds-input[data-success] .ds-input-icon-right { color: var(--ds-pos-500); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-input[data-error] .ds-input-caption,
  :root:not([data-theme="light"]) .ds-input[data-error] .ds-input-caption-icon,
  :root:not([data-theme="light"]) .ds-input[data-error] .ds-input-icon-right,
  :root:not([data-theme="light"]) .ds-input[data-error] .ds-input-suffix { color: var(--ds-neg-500); }

  :root:not([data-theme="light"]) .ds-input[data-success] .ds-input-caption,
  :root:not([data-theme="light"]) .ds-input[data-success] .ds-input-caption-icon,
  :root:not([data-theme="light"]) .ds-input[data-success] .ds-input-icon-right,
  :root:not([data-theme="light"]) .ds-input[data-success] .ds-input-suffix { color: var(--ds-pos-500); }
}

/* Suppress ALL native browser clear/search buttons — we provide our own */
.ds-input-field::-webkit-search-cancel-button,
.ds-input-field::-webkit-search-decoration,
.ds-input-field::-webkit-clear-button,
.ds-input-field::-ms-clear {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-input-control {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}