/* Abusix x Ashby — Dark Application Form (UPLOAD-SAFE)
   Uses ONLY Ashby-provided class selectors + CSS variables (no :root, no element selectors).
   Goal: make the embedded Application form readable in dark mode (typed text, labels, placeholders). */

/* ========= 1) Scope variables to the embed =========
   Ashby sets a big set of CSS variables on the embed root.
   We override the key ones *on Ashby wrapper classes* so validator accepts the file.
*/
.ashby-application-form-container,
.ashby-job-posting-right-pane,
.ashby-job-posting-brief {
  /* Brand colors */
  --colorPrimary600: #8966FF; /* Abusix purple */
  --colorPrimary900: #2BD2FF; /* Abusix aqua */

  /* Core neutrals (make text LIGHT) */
  --colorNeutral800: rgba(254,254,254,.92);
  --colorNeutral700: rgba(254,254,254,.80);
  --colorNeutral600: rgba(197,206,221,.72);
  --colorNeutral500: rgba(197,206,221,.60);
  --colorNeutral400: rgba(197,206,221,.40);
  --colorNeutral300: rgba(197,206,221,.26);
  --colorNeutral200: rgba(197,206,221,.18);
  --colorNeutral100: rgba(197,206,221,.10);
  --colorNeutral000: rgba(7,4,35,.35); /* replaces pure white surfaces */

  /* Alpha variants used for borders/shadows */
  --colorNeutral800A: rgba(254,254,254,.78);
  --colorNeutral700A: rgba(254,254,254,.62);
  --colorNeutral600A: rgba(197,206,221,.45);
  --colorNeutral500A: rgba(197,206,221,.28);
  --colorNeutral400A: rgba(197,206,221,.20);
  --colorNeutral300A: rgba(197,206,221,.14);
  --colorNeutral200A: rgba(197,206,221,.10);
  --colorNeutral100A: rgba(197,206,221,.06);
  --colorNeutral000A: rgba(0,0,0,0);

  /* Background of the app */
  --colorAppBackground: #070423;

  /* Rounded, less boxy */
  --borderRadiusContainer: 16px;
  --borderRadiusControl: 12px;
  --borderRadiusButton: 999px;

  /* Width */
  --widthMaxJobBoard: 820px;
}

/* ========= 2) Make the form section actually dark ========= */
.ashby-application-form-container,
.ashby-job-posting-right-pane {
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(43,210,255,.16), rgba(0,0,0,0) 55%),
    radial-gradient(900px 520px at 78% 12%, rgba(137,102,255,.14), rgba(0,0,0,0) 55%),
    radial-gradient(1100px 600px at 60% 90%, rgba(106,138,255,.10), rgba(0,0,0,0) 60%),
    #070423;
  color: rgba(254,254,254,.92);
}

/* ========= 3) Panels / sections / autofill ========= */
.ashby-application-form-section-container,
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root,
.ashby-application-form-field-entry {
  background-color: rgba(7,4,35,.20);
  border: 1px solid rgba(197,206,221,.16);
  border-radius: 16px;
}

/* Make section header text readable */
.ashby-application-form-section-header-title,
.ashby-application-form-section-header-description,
.ashby-application-form-question-title,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description,
.ashby-application-form-blocked-application-container,
.ashby-application-form-failure-container,
.ashby-application-form-success-container {
  color: rgba(254,254,254,.86);
}

/* ========= 4) Buttons ========= */
.ashby-application-form-submit-button {
  background: rgba(43,210,255,.10);
  border: 1px solid rgba(43,210,255,.35);
  color: rgba(254,254,254,.92);
  border-radius: 999px;
}

/* ========= 5) Back button (if present in embed mode) ========= */
.ashby-job-board-back-to-all-jobs-button {
  background: rgba(43,210,255,.08);
  border: 1px solid rgba(43,210,255,.28);
  color: rgba(254,254,254,.92);
  border-radius: 999px;
}

/* ========= 6) Hide the footer “Imprint / Security / …” links inside the embed (if Ashby renders them) ========= */
.ashby-job-posting-header,
.ashby-job-posting-left-pane,
.ashby-job-posting-brief-details {
  /* leave alone */
}

/* These links typically live in the job board footer area; Ashby may not always render them.
   If they show up, this hides the container(s) rather than individual <a> elements (validator-safe). */
.ashby-job-board-heading,
.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
  /* keep visible on full job board; no-op here */
}

/* If Ashby adds a “terms/privacy/security” link row, it is usually within the brief container */
.ashby-job-posting-brief {
  /* keep brief styled */
}

/* ========= 7) Responsive ========= */
@media (max-width: 860px){
  .ashby-application-form-container,
  .ashby-job-posting-right-pane {
    --widthMaxJobBoard: 100%;
  }
}
/* =========================================================
   v2 PATCH (minimal): only fixes requested issues
   - Fix long textarea typed text (was too dark)
   - Fix Submit Application button default visibility
   - Remove double outline on focused inputs/areas
   NOTE: Intentionally APPENDED so it doesn't change v2 layout.
   ========================================================= */

/* 1) Long free-text fields: force readable typed text */
.ashby-application-form-container textarea,
.ashby-application-form-container textarea *{
  color: rgba(254,254,254,.96) !important;
  caret-color: rgba(254,254,254,.96) !important;
  -webkit-text-fill-color: rgba(254,254,254,.96) !important;
}

/* Also cover any textareas inside field entries (some builds wrap differently) */
.ashby-application-form-field-entry textarea{
  color: rgba(254,254,254,.96) !important;
  caret-color: rgba(254,254,254,.96) !important;
  -webkit-text-fill-color: rgba(254,254,254,.96) !important;
}

/* 2) Submit button: make visible without hover (keep dark-mode feel) */
.ashby-application-form-submit-button{
  background: rgba(43,210,255,.14) !important; /* dark-ish aqua tint */
  border: 1px solid rgba(43,210,255,.55) !important;
  color: rgba(254,254,254,.96) !important;
  opacity: 1 !important;
  filter: none !important;
}
.ashby-application-form-submit-button:hover{
  background: rgba(43,210,255,.22) !important;
  border-color: rgba(43,210,255,.75) !important;
  color: rgba(254,254,254,.98) !important;
}

/* 3) Double outline: kill extra focus ring; keep a single border highlight */
.ashby-application-form-container input:focus,
.ashby-application-form-container textarea:focus,
.ashby-application-form-container select:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* If Ashby applies focus rings via data attributes/classes, also neutralize */
.ashby-application-form-container input:focus-visible,
.ashby-application-form-container textarea:focus-visible,
.ashby-application-form-container select:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Keep one clear focus indicator by boosting border color */
.ashby-application-form-container input:focus,
.ashby-application-form-container textarea:focus,
.ashby-application-form-container select:focus{
  border-color: rgba(43,210,255,.65) !important;
}

/* WebKit autofill (Chrome/Safari) can force dark text; ensure it stays light */
.ashby-application-form-container textarea:-webkit-autofill,
.ashby-application-form-container input:-webkit-autofill{
  -webkit-text-fill-color: rgba(254,254,254,.96) !important;
}
/* ========= v2 minimal patch: Submit button too light ========= */
.ashby-application-form-submit-button{
  background: rgba(7,4,35,.92) !important;   /* deep navy */
  border: 1px solid rgba(43,210,255,.55) !important;
  color: rgba(254,254,254,.96) !important;
  text-shadow: none !important;
}

.ashby-application-form-submit-button:hover{
  background: rgba(7,4,35,.98) !important;
  border-color: rgba(43,210,255,.85) !important;
  color: rgba(254,254,254,.98) !important;
}

.ashby-application-form-submit-button:focus,
.ashby-application-form-submit-button:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(43,210,255,.22) !important;
}