/* ===========================================================================
   forms.css — shared form-element styling (nav/forms restructure).
   Black / white / minimal theme. 2px radius to match the platform.
   Custom checkboxes, radios, selects and file inputs use appearance:none +
   background images — NO markup changes required.
   Cosmetic look properties carry !important so this wins over the per-page
   inline <style> blocks; sizing (width/height) is left to per-page rules so
   compact contexts (e.g. the M&P line-item tables) keep their layout.
   =========================================================================== */

:root {
  --form-border: #d1d5db;
  --form-border-focus: #111111;
  --form-text: #111111;
  --form-placeholder: #9ca3af;
  --form-radius: 2px;
  --form-danger: #dc2626;
}

/* --- Text-like inputs + textarea + select -------------------------------- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input:not([type]),
textarea,
select {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  color: var(--form-text);
  background-color: #ffffff !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
input:not([type])::placeholder,
textarea::placeholder {
  color: var(--form-placeholder);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--form-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
}

textarea { resize: vertical; }

/* --- Select: custom chevron, native arrow removed ------------------------ */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23111111' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* --- Checkboxes ---------------------------------------------------------- */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--form-border);
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
input[type="checkbox"]:checked {
  background-color: #111111;
  border-color: #111111;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.5l3 3 6-6.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.15);
}

/* --- Radio buttons ------------------------------------------------------- */
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--form-border);
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
input[type="radio"]:checked {
  border-color: #111111;
  background-color: #111111;
  background-image: radial-gradient(circle, #ffffff 0 30%, transparent 34%);
}
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.15);
}

/* --- File inputs: style the native picker button, no markup change ------- */
input[type="file"] {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--form-text);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  margin-right: 12px;
  color: #ffffff;
  background: #111111;
  border: none;
  border-radius: var(--form-radius);
  cursor: pointer;
  transition: background 0.2s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: #333333;
}

/* --- Toggle switches: opt-in via .toggle on a checkbox ------------------- */
input[type="checkbox"].toggle,
input[type="checkbox"][role="switch"] {
  width: 40px;
  height: 22px;
  border-radius: 999px !important;
  border: 1px solid var(--form-border) !important;
  background-color: #e5e7eb;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><circle cx='9' cy='9' r='8' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: left 1px center;
  transition: background-color 0.2s ease, background-position 0.2s ease;
}
input[type="checkbox"].toggle:checked,
input[type="checkbox"][role="switch"]:checked {
  background-color: #111111;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><circle cx='9' cy='9' r='8' fill='white'/></svg>");
  background-position: right 1px center;
}

/* --- Buttons: class-scoped so icon/nav buttons are untouched ------------- */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-rm {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  border-radius: var(--form-radius) !important;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-secondary {
  background: #ffffff;
  color: var(--form-text);
  border: 1px solid var(--form-border) !important;
}
.btn-secondary:hover { background: #f3f4f6; }
.btn-primary {
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111 !important;
}
.btn-primary:hover { background: #333333; }
.btn-danger,
.btn-rm {
  background: #fef2f2;
  color: var(--form-danger);
  border: 1px solid #fecaca !important;
}
.btn-danger:hover,
.btn-rm:hover { background: #fee2e2; }

input[disabled], select[disabled], textarea[disabled], button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}