/* Autofill overrides (shared, theme-aware)

   Goal: prevent browser autofill from painting yellow/blue backgrounds and
   breaking the floating-label field design.

   Implementation detail:
   - `FormFieldHelper` adds `data-moroc-field-theme="light|dark"` on `.moroc-field`.
   - We use CSS variables so each field can choose light/dark independently.
*/

.moroc-field[data-moroc-field-theme="light"] {
  /* Must use actual color (not transparent) to cover browser autofill background */
  --moroc-autofill-bg: var(--moroc-canvas-bg, #ffffff);
  --moroc-autofill-text: #111827;
}

.moroc-field[data-moroc-field-theme="dark"] {
  /* Must use actual color (not transparent) to cover browser autofill background */
  --moroc-autofill-bg: var(--moroc-canvas-bg, #000000);
  --moroc-autofill-text: #ffffff;
}

/* -----------------------------------------------------------------------------
   Field background + floating label cutout (theme-aware, canvas-driven)

   Goal: the field footprint background and the active floating-label "chip"
   should always match the surrounding canvas/partial background.

   Single source of truth:
   - `--moroc-canvas-bg` is set on the page canvas (e.g. `#entry-main-canvas`).
   - Fields derive `--moroc-field-bg` from `--moroc-canvas-bg` and use it for:
     - the footprint background-color
     - the floating-label chip background-color when focused/has-value
----------------------------------------------------------------------------- */

.moroc-field[data-moroc-field-theme="dark"] {
  --moroc-field-bg: var(--moroc-canvas-bg, #000000);
  background-color: var(--moroc-field-bg);
}

.moroc-field[data-moroc-field-theme="light"] {
  --moroc-field-bg: var(--moroc-canvas-bg, #ffffff);
  background-color: var(--moroc-field-bg);
}

.moroc-field.focused [data-moroc-floating-label="1"],
.moroc-field.has-value [data-moroc-floating-label="1"] {
  background-color: var(--moroc-field-bg);
}

/* Chrome applies autofill font styling via ::first-line - this is the key selector */
.moroc-field input:-webkit-autofill::first-line,
.moroc-field textarea:-webkit-autofill::first-line {
  font-family: "Moroc Sans Soft", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: var(--moroc-autofill-text) !important;
}

.moroc-field input:-webkit-autofill,
.moroc-field input:-webkit-autofill:hover,
.moroc-field input:-webkit-autofill:focus,
.moroc-field textarea:-webkit-autofill,
.moroc-field textarea:-webkit-autofill:hover,
.moroc-field textarea:-webkit-autofill:focus,
.moroc-field select:-webkit-autofill,
.moroc-field select:-webkit-autofill:hover,
.moroc-field select:-webkit-autofill:focus {
  /* Allows JS to detect autofill via `animationstart` */
  animation-name: morocAutofillStart;
  animation-duration: 0.01s;
  animation-iteration-count: 1;

  /* Ensure autofilled text uses the same typography as the field.
       NOTE: We use explicit values instead of `inherit` because Chrome applies
       autofill styles BEFORE the CSS cascade fully computes, causing `inherit`
       to pick up wrong values on fresh page loads. */
  font-family: "Moroc Sans Soft", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif !important;
  font-size: 0.875rem !important; /* text-sm - explicit to avoid fresh-load race */
  font-weight: inherit !important;
  line-height: 1.25rem !important; /* matches text-sm line-height */
  letter-spacing: inherit !important;
  color: var(--moroc-autofill-text) !important;
  -webkit-text-fill-color: var(--moroc-autofill-text) !important;
  caret-color: var(--moroc-autofill-text);
  -webkit-box-shadow: 0 0 0 1000px var(--moroc-autofill-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--moroc-autofill-bg) inset !important;
  border-radius: inherit !important;
  transition: background-color 99999s ease-in-out 0s;
  filter: none !important;
}

/* Some Chromium builds render autofill text with different antialiasing/weight until a user gesture.
   When JS detects autofill, it can opt-in to this more forceful paint method. */
.moroc-field [data-moroc-autofill-shadow="1"]:-webkit-autofill,
.moroc-field [data-moroc-autofill-shadow="1"]:-webkit-autofill:hover,
.moroc-field [data-moroc-autofill-shadow="1"]:-webkit-autofill:focus {
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 0 var(--moroc-autofill-text) !important;
}

@keyframes morocAutofillStart {
  from {
  }
  to {
  }
}

.moroc-field input:-moz-autofill,
.moroc-field textarea:-moz-autofill,
.moroc-field select:-moz-autofill {
  /* Match WebKit typography overrides for consistency */
  font-family: "Moroc Sans Soft", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: var(--moroc-autofill-text) !important;
  box-shadow: 0 0 0 1000px var(--moroc-autofill-bg) inset !important;
  -moz-text-fill-color: var(--moroc-autofill-text) !important;
  caret-color: var(--moroc-autofill-text);
  border-radius: inherit !important;
}

.moroc-field:has(.modal-select-field) .typeable-label {
  display: block;
}

.moroc-field:has(.modal-select-field):not(.focused):not(.has-value)
  .modal-select-field {
  color: transparent;
}

.moroc-field.focused .modal-select-field:not(.has-value) {
  color: transparent;
}

/* ActionOverlay search inputs: suppress native browser search/cancel UI */
[data-ao-root] input[type="search"]::-webkit-search-decoration,
[data-ao-root] input[type="search"]::-webkit-search-cancel-button,
[data-ao-root] input[type="search"]::-webkit-search-results-button,
[data-ao-root] input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
[data-ao-root] input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}