/**
 * Form Input Components
 * Types: text, email, password, number, textarea, select, checkbox, radio
 * Sizes: sm, md, lg
 * States: default, focus, error, success, disabled
 *
 * @author Amit Haridas, ConcreteInfo
 */

/* ============================================
   FORM GROUP
   ============================================ */
.form-group {
  margin-bottom: var(--spacing-5);
}

.form-row {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
}

.form-row > * {
  flex: 1;
}

/* ============================================
   LABELS
   ============================================ */
.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-danger);
}

.form-hint {
  margin-top: var(--spacing-1-5);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.form-error {
  margin-top: var(--spacing-1-5);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.form-error::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: var(--color-danger);
  border-radius: var(--radius-full);
}

/* ============================================
   INPUT BASE
   ============================================ */
.input,
.form-control,
.form-input,
.form-text {
  width: 100%;
  box-sizing: border-box;
  height: 38px;               /* uniform control height (selects/textboxes) */
  padding: 0 var(--spacing-3); /* vertical centering via line-height, not padding */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: 36px;           /* 38px - 2px borders: centers glyphs, no clipping */
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.input::placeholder,
.form-control::placeholder,
.form-input::placeholder,
.form-text::placeholder {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px placeholders — quieter than values */
}

.input:hover,
.form-control:hover,
.form-input:hover,
.form-text:hover {
  border-color: var(--border-strong);
}

.input:focus,
.form-control:focus,
.form-input:focus,
.form-text:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-brand-100);
}


/* ============================================
   INPUT STATES
   ============================================ */
.input--error,
.form-control--error,
.input.is-invalid,
.form-control.is-invalid {
  border-color: var(--color-danger);
  background-color: var(--color-danger-light);
}

.input--error:focus,
.form-control--error:focus,
.input.is-invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px hsl(0, 84%, 95%);
}

.input--success,
.form-control--success,
.input.is-valid,
.form-control.is-valid {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
}

.input--success:focus,
.form-control--success:focus,
.input.is-valid:focus,
.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px hsl(142, 76%, 95%);
}

.input:disabled,
.form-control:disabled,
.input--disabled,
.form-control--disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ============================================
   INPUT SIZES
   ============================================ */
.input--sm,
.input-sm {
  height: 1.875rem; /* 30px */
  padding: var(--spacing-1-5) var(--spacing-2-5);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.input--lg,
.input-lg {
  height: 2.625rem; /* 42px */
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-lg);
}

/* ============================================
   SELECT
   Full base styles included so .select is self-contained
   (no need to also apply .input on <select> elements)
   ============================================ */
.select,
.form-select {
  /* Base input styles */
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* Fixed height matching inputs */
  height: 38px;
  padding: 0 var(--spacing-3);
  line-height: 36px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
  /* Dropdown arrow */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237a7878' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2-5) center;
  background-size: 0.875rem 0.875rem;
  padding-right: var(--spacing-8);
  cursor: pointer;
  vertical-align: middle;
}

.select:hover,
.form-select:hover {
  border-color: var(--border-strong);
}

.select:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-brand-100);
}

.select:disabled,
.form-select:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Select readability baseline — theme-aware, both modes ───────────
   Guarantees the selected value AND the native <option> popup are
   always legible. Plain <select> elements otherwise inherit a light
   text colour in dark mode (Tailwind's `color: inherit`) over a
   default light UA background → white-on-white. Element-level
   specificity, so .select / .form-select / Tailwind classes still win. */
select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}
select option,
select optgroup {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}
/* Keep the native dropdown popup in the correct colour scheme per mode */
:root { color-scheme: light; }


/* Size variants */
.select--sm,
.select-sm {
  height: 1.875rem; /* 30px */
  padding: var(--spacing-1-5) var(--spacing-2-5);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  padding-right: var(--spacing-7);
  background-size: 0.75rem 0.75rem;
}

.select--lg,
.select-lg {
  height: 2.625rem; /* 42px */
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-lg);
  padding-right: var(--spacing-10);
}

/* Error state */
.select--error,
.select.is-invalid {
  border-color: var(--color-danger);
  background-color: var(--color-danger-light);
}

/* Success state */
.select--success,
.select.is-valid {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
}

/* ============================================
   TEXTAREA
   ============================================ */
.textarea,
textarea.input {
  resize: vertical;
  min-height: 100px;
}

/* ============================================
   CHECKBOX & RADIO
   ============================================ */
.checkbox,
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.checkbox__input,
.radio__input,
.form-check-input {
  appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--border-default);
  background-color: var(--bg-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 0.125rem;
}

.checkbox__input,
.form-check-input[type="checkbox"] {
  border-radius: var(--radius-sm);
}

.radio__input,
.form-check-input[type="radio"] {
  border-radius: var(--radius-full);
}

.checkbox__input:hover,
.radio__input:hover,
.form-check-input:hover {
  border-color: var(--color-primary);
}

.checkbox__input:checked,
.radio__input:checked,
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox__input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.radio__input:checked::after,
.form-check-input[type="radio"]:checked::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  border-radius: var(--radius-full);
  margin: 0.25rem;
}

.checkbox__input:focus,
.radio__input:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--color-brand-100);
  outline: none;
}

/* ============================================
   INPUT GROUP
   ============================================ */
.input-group {
  display: flex;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-brand-100);
}

.input-group .input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.input-group .input:focus {
  box-shadow: none;
}

.input-group__prepend,
.input-group__append {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.input-group__prepend {
  border-right: 1px solid var(--border-subtle);
}

.input-group__append {
  border-left: 1px solid var(--border-subtle);
}

/* ============================================ */
/*   FORM SWITCH (toggle)                       */
/* ============================================ */
.form-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.form-switch input[type="checkbox"] {
  appearance: none;
  width: 2.25rem;
  height: 1.25rem;
  background-color: var(--color-gray-300);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.form-switch input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background-color: white;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
}

.form-switch input[type="checkbox"]:checked {
  background-color: var(--color-primary);
}

.form-switch input[type="checkbox"]:checked::after {
  transform: translateX(1rem);
}

.form-switch input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-100);
}

/* ============================================
   FORM SECTION
   ============================================ */
.form-section {
  padding: var(--spacing-6);
  background-color: var(--bg-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--spacing-6);
}

.form-section__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--border-subtle);
}

.form-section__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-4);
}

/* ============================================
   REQUIRED MARKER
   Use with required form fields:
     <label>Email <span class="required-mark">*</span></label>
   Replaces inline `text-red-500` / `text-danger`
   spans so every required asterisk uses the
   project danger token (works in light + dark).
   ============================================ */
.required-mark {
  color: var(--color-danger, #ef4444);
  margin-left: 0.125rem;
  font-weight: var(--font-weight-semibold, 600);
}

.dark .required-mark,
[data-theme="dark"] .required-mark {
  color: #fca5a5;  /* tailwind red-300 — readable on dark bg */
}

/* --- merged from forms.v2.css --- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1-5);
  margin-bottom: var(--spacing-4);
}

.field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
}

.field__label .required {
  color: var(--color-danger);
  margin-left: var(--spacing-half);
}

.field__input {
  height: 38px;
  line-height: 36px;
  padding: 0 var(--spacing-3);
  font-size: var(--font-size-base);
  font-family: var(--font-family-sans);
  color: var(--color-text-strong);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.dark .field__input:focus {
  box-shadow: var(--focus-ring-dark);
}

.field__input--touch {
  height: 2.75rem; /* 44px — touch target */
}

.field__textarea {
  height: auto;
  min-height: 5rem; /* 80px, matches .tf-textarea's prior min-height */
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-base);
  font-family: var(--font-family-sans);
  color: var(--color-text-strong);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  line-height: var(--line-height-normal);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field__textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.dark .field__textarea:focus {
  box-shadow: var(--focus-ring-dark);
}

.field__input--auto {
  background: var(--bg-tertiary);
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-dark); /* brand on gray bg read 4.4:1; darker shade ≈ 6:1 */
  cursor: default;
}

.dark .field__input--auto {
  color: hsl(var(--color-brand-h), 80%, 65%); /* bright variant for dark surfaces */
}

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

.field--error .field__input {
  border-color: var(--color-danger);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

.field__error i { font-size: 0.75em; }

.field__input:disabled {
  background: var(--bg-tertiary);
  color: var(--color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* ============================================
   BOTTOM ACTION BAR
   Sticky save-action bar for small screens. On
   desktop (>= 1024px) this div is intentionally
   unstyled — it is a plain flow container, so the
   wrapped save button renders exactly where and
   how it did before. Only below the 1024px
   breakpoint (where the fixed 60px bottom-nav
   appears, see mobile.css) does it become a
   thumb-reachable sticky bar.
   ============================================ */
@media (max-width: 1023.98px) {
  .bottom-action-bar {
    position: sticky;
    /* Rests on the bottom-nav's top edge: nav is 60px tall plus its own
       safe-area inset (mobile.css .bottom-nav). */
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: 100; /* above page content, below .bottom-nav (1000) */
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    padding: var(--spacing-3) var(--spacing-4);
    box-shadow: var(--shadow-2);
  }
}

/* Textareas size by rows, not the fixed control height */
textarea.input,
textarea.form-control,
textarea.form-input,
textarea.form-text {
  height: auto;
  min-height: 84px;
  padding: var(--spacing-2) var(--spacing-3);
  line-height: 1.45;
}