/* ============================================================
   Input — Component
   Yaz Design System v1.0
   Types: text, textarea, select
   Sizes: sm, md, lg
   ============================================================ */

/* ── Base Input ── */
.input {
  display: block;
  width: 100%;
  height: var(--size-input-md);
  padding: var(--space-input-y) var(--space-input-x);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default);
  outline: none;
}

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

.input:hover {
  border-color: var(--neutral-600);
}

.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(7, 90, 161, 0.15);
  background: var(--color-bg-secondary);
}

.input:disabled,
.input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-secondary);
}

/* ── Textarea ── */
.textarea {
  min-height: 80px;
  height: auto;
  resize: vertical;
  line-height: var(--leading-base);
}

/* ── Select ── */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23868e96' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-inline-end: var(--space-8);
  cursor: pointer;
}

[dir="rtl"] .select {
  background-position: left var(--space-3) center;
}

/* ── Sizes ── */
.input-sm {
  height: var(--size-input-sm);
  padding: 0 var(--space-2_5);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.input-lg {
  height: var(--size-input-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

/* ── States ── */

/* Error */
.input-error {
  border-color: var(--color-error);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Success */
.input-success {
  border-color: var(--color-success);
}

.input-success:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Readonly */
.input-readonly {
  background: var(--color-bg-secondary);
  cursor: default;
}

/* ── Input Group ── */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input {
  border-radius: 0;
}

.input-group .input:first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.input-group .input:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.input-group .btn {
  border-radius: 0;
}

.input-group .btn:first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.input-group .btn:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

/* ── Form Label ── */
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

/* ── Form Help / Error Text ── */
.form-help {
  margin-top: var(--space-1_5);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.form-error {
  margin-top: var(--space-1_5);
  font-size: var(--text-xs);
  color: var(--color-error);
}

/* ── Checkbox / Radio ── */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* ── Toggle Switch ── */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.toggle input {
  display: none;
}

.toggle-track {
  width: 40px;
  height: 22px;
  background: var(--color-bg-tertiary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: var(--radius-full);
  transition: background var(--duration-fast);
  position: relative;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--neutral-0);
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-default);
  box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle-track {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.toggle input:checked + .toggle-track::after {
  transform: translateX(18px);
}