// ─────────────────────────────────────────────────────────────────────────────
// Component: Inputs
// File:      src/scss/components/_inputs.scss
//
// Variants:  input, select, textarea, .form-input, .form-select
//            .form-group, .form-label, .form-hint, .form-checkbox-row
// Tokens:    --bg-surface, --border-default, --color-accent, --text-primary
// Usage:     <input type="text" class="form-input">
//
// Notes:     Focus ring uses color-mix for a soft accent glow.
//            Tag-pill input widget also lives here.
// ─────────────────────────────────────────────────────────────────────────────

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
  color: var(--text-primary);

  .required { color: var(--color-danger); margin-left: 2px; }
}

.form-description {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.form-input,
.form-select,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-base);
}

.form-input::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.form-input:focus,
.form-select:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.form-input:disabled,
.form-select:disabled,
select:disabled,
input:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-overlay);
}

.form-input[aria-invalid="true"],
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 25%, transparent);
}

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

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

  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  &__track {
    width: 36px;
    height: 20px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
  }

  &__thumb {
    position: absolute;
    left: 3px;
    width: 14px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform var(--transition-fast), background var(--transition-fast);
  }

  input:checked ~ &__track {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
    border-color: var(--color-accent);
  }

  input:checked ~ &__track &__thumb {
    transform: translateX(16px);
    background: var(--color-accent);
  }

  input:focus-visible ~ &__track {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);

  input[type=checkbox] { margin-top: 2px; flex-shrink: 0; }
}

.form-checkbox-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.form-checkbox-desc  { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

// Tag-pill input widget
.tag-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  min-height: 38px;
  cursor: text;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--text-primary);
}

.tag-pill-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 0;
  line-height: 1;

  &:hover { color: var(--color-danger); }
}

.tag-text-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  min-width: 80px;
  flex: 1;
}

// Verified-only toggle — styled checkbox pill used on listing pages
.verified-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;

  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  &:hover .verified-chip {
    border-color: var(--border-emphasis);
    color: var(--text-secondary);

    svg { opacity: 0.7; }
  }

  input:checked ~ .verified-chip {
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
    color: var(--color-success);

    svg { opacity: 1; stroke: var(--color-success); }
  }
}

.verified-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  background: transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);

  svg { opacity: 0.4; transition: opacity var(--transition-fast); }
}

// Token form (auth fallback)
.token-form {
  background: var(--bg-surface);
  border: 1px solid var(--color-orange);
  border-radius: var(--radius-base);
  padding: var(--space-4);
  margin-bottom: var(--space-5);

  p {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
  }
}