/* ============================================================
   NINJA* (lafour_theme) — components/form-native.css
   Design Kit § 10.07 — native form-control overrides.
   Two layers:
     1. accent-color on every checkbox/radio/range/progress so
        even unmodified inputs render brand-red marks.
     2. Custom .nctrl/.nselect/.nrange/.ninput/.nfile classes
        that lafour_theme.theme adds via hook_form_alter() to
        every Drupal-rendered input. Front-end forms (contact,
        webform, login, search, exposed Views filter) inherit.
   ============================================================ */

/* ── 1. Accent-color baseline (matches kit § 10.07) ───── */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--c-brand);
}

/* ── 2. Generic input / textarea baseline (front-end) ── */
form input[type="text"],
form input[type="email"],
form input[type="url"],
form input[type="tel"],
form input[type="number"],
form input[type="password"],
form input[type="search"],
form input[type="date"],
form input[type="time"],
form input[type="datetime-local"],
form textarea,
.ninput {
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
form input[type="text"]:hover,
form input[type="email"]:hover,
form input[type="url"]:hover,
form input[type="tel"]:hover,
form input[type="number"]:hover,
form input[type="password"]:hover,
form input[type="search"]:hover,
form textarea:hover,
.ninput:hover { border-color: var(--c-text); }
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="url"]:focus,
form input[type="tel"]:focus,
form input[type="number"]:focus,
form input[type="password"]:focus,
form input[type="search"]:focus,
form textarea:focus,
.ninput:focus { border-color: var(--c-brand); }
form input::placeholder,
form textarea::placeholder,
.ninput::placeholder { color: var(--c-dim); }

form textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

/* Disabled inputs */
form input:disabled,
form textarea:disabled,
form select:disabled,
.ninput:disabled,
.nselect:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── 3. Custom checkbox / radio (.nctrl) ──────────────── */
.nctrl,
form input[type="checkbox"],
form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 6px 0 0;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  flex: 0 0 auto;
  position: relative;
  vertical-align: middle;
  border-radius: 0;
  /* override accent-color baseline so our pseudo-element shows */
  accent-color: auto;
}
.nctrl:hover,
form input[type="checkbox"]:hover,
form input[type="radio"]:hover { border-color: var(--c-text); }
.nctrl:focus-visible,
form input[type="checkbox"]:focus-visible,
form input[type="radio"]:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.nctrl[type="radio"],
form input[type="radio"] { border-radius: 50%; }

.nctrl[type="checkbox"]:checked,
form input[type="checkbox"]:checked {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.nctrl[type="checkbox"]:checked::after,
form input[type="checkbox"]:checked::after {
  content: '';
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--c-text);
  border-bottom: 1.5px solid var(--c-text);
  transform: rotate(-45deg) translate(1px, -1px);
}
.nctrl[type="checkbox"]:indeterminate,
form input[type="checkbox"]:indeterminate {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.nctrl[type="checkbox"]:indeterminate::after,
form input[type="checkbox"]:indeterminate::after {
  content: '';
  width: 8px; height: 1.5px;
  background: var(--c-text);
}
.nctrl[type="radio"]:checked,
form input[type="radio"]:checked {
  border-color: var(--c-brand);
  background: var(--c-surface);
}
.nctrl[type="radio"]:checked::after,
form input[type="radio"]:checked::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
}
.nctrl:disabled,
form input[type="checkbox"]:disabled,
form input[type="radio"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--c-border);
}

/* ── 4. Native select (.nselect) — red chevron ─────────── */
.nselect,
form select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 9px 36px 9px 12px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-brand) 50%),
    linear-gradient(135deg, var(--c-brand) 50%, transparent 50%);
  background-position: calc(100% - 18px) 14px, calc(100% - 13px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
  outline: none;
  border-radius: 0;
}
.nselect:hover,
form select:hover { border-color: var(--c-text); }
.nselect:focus,
form select:focus { border-color: var(--c-brand); }
.nselect option,
form select option {
  background: var(--c-surface);
  color: var(--c-text);
}

/* ── 5. Native range (.nrange) — red thumb + halo ─────── */
.nrange,
form input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: var(--c-border-2);
  cursor: pointer;
  outline: none;
  margin: 8px 0;
}
.nrange::-webkit-slider-thumb,
form input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--c-brand);
  border: 2px solid var(--c-bg);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 0 1px var(--c-brand);
}
.nrange::-moz-range-thumb,
form input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--c-brand);
  border: 2px solid var(--c-bg);
  border-radius: 50%;
  cursor: grab;
}
.nrange:focus-visible::-webkit-slider-thumb,
form input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--c-brand-dim), 0 0 0 1px var(--c-brand);
}

/* ── 6. File input (.nfile) — dashed + red "Choose file" ─ */
.nfile,
form input[type="file"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px dashed var(--c-border-2);
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  width: auto;
}
.nfile:hover,
form input[type="file"]:hover {
  border-color: var(--c-brand);
  color: var(--c-text);
}
.nfile__btn,
form input[type="file"]::file-selector-button {
  background: var(--c-brand);
  color: var(--c-text);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  margin-right: var(--space-3);
  transition: background var(--dur-fast) var(--ease-out);
}
form input[type="file"]::file-selector-button:hover {
  background: transparent;
  color: var(--c-brand);
}

/* Drupal's managed file widget */
.form-managed-file { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.form-managed-file .button {
  /* "Upload" / "Remove" — keep secondary look so they don't fight the brand button */
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
}
.form-managed-file .button:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

/* Progress bar (file upload, batch) */
progress,
.progress__bar-wrapper {
  width: 100%;
  height: 2px;
  border: 0;
  background: var(--c-border);
  color: var(--c-brand);
}
progress::-webkit-progress-bar { background: var(--c-border); }
progress::-webkit-progress-value { background: var(--c-brand); }
progress::-moz-progress-bar { background: var(--c-brand); }

/* Drupal's native HTML5 progress wrapper */
.progress-bar {
  background: var(--c-border);
  border: 0;
}
.progress-bar__bar,
.progress-bar .filled {
  background: var(--c-brand);
}

/* Autofill — preserve dark theme */
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--c-text);
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
  caret-color: var(--c-text);
}