/* stylelint-disable */

/* Azeret Mono (Light weight) for the "Open Positions" heading, department/
   category labels, the "Filters:" label, and the Overview/Application tabs. */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300&display=swap');

/* Inter for everything else — job titles, job detail lines, descriptions,
   form fields, etc. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* These variables can be used to control values throughout the job board. */
:root {
  /* Background color of the application */
  --colorAppBackground: #0A0B0D;

  /*
   * Darker primary color
   * WARNING - This can be set in the Ashby admin under theme settings!
   * If you modify, you should make sure your colors work with the settings there.
   */
  --colorPrimary900: #8FBF00;

  /*
   * Lighter primary color
   * WARNING - This can be set in the Ashby admin under theme settings!
   * If you modify, you should make sure your colors work with the settings there.
   */
  --colorPrimary600: #C1FF00;

  /* The max width of job board container */
  --widthMaxContent: 950px;

  /* The max width of application form section */
  --widthMaxJobBoard: 800px;

  /* The max width of subscription preferences container */
  --widthMaxSubscriptionPreferences: 600px;

  /* Container border radius */
  --borderRadiusContainer: 10px;

  /* Border radius of control elements (e.g. input boxes) */
  --borderRadiusControl: 10px;

  /* Button border radius */
  --borderRadiusButton: 10px;

  /* Font families */
  --fontFamily: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ==========================================================================
   Dark theme overrides
   These target the copy/heading/link classes so text stays readable
   against the #0A0B0D background. Adjust selectors below if you find
   any element still rendering dark-on-dark.
   ========================================================================== */

body,
.ashby-job-board-heading,
.ashby-job-board-heading-count,
.ashby-job-board-filters-label,
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-heading,
.ashby-job-posting-description,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level,
.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-input-autocomplete-popup-result,
.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label,
.ashby-application-form-input-yesno-option,
.ashby-application-form-input-file-item-name,
.ashby-application-form-input-education-entry-header,
.ashby-application-form-autofill-input-title,
.ashby-application-form-autofill-input-description,
.ashby-application-form-blocked-application-container,
.ashby-application-form-texting-consent-description {
  color: #FFFFFF;
}

/* Hyperlinks and clickable actions.
   NOTE: .ashby-job-posting-brief-title and .ashby-job-board-reset-filters-label
   live here (not in the white block above) because they ARE the link/action
   text themselves — an element's own declared color always overrides an
   inherited color from its parent <a>, so if these were left in the white
   block they'd silently win over the lime link color. !important added as
   a safety margin against Ashby's own base specificity. */
a,
.ashby-job-posting-description a,
.ashby-application-form-question-description a,
.ashby-job-posting-brief-title,
.ashby-job-board-reset-filters-label {
  color: #C1FF00 !important;
}

/* On mobile, this same button renders as a light-green circle with an
   X icon (closing the filter panel) instead of the desktop text link.
   The X was rendering in a similar green tone to its own circle,
   making it hard to see — targeting just the icon inside so the
   desktop text-link color above is untouched. */
.ashby-job-board-reset-filters-label svg,
.ashby-job-board-reset-filters-label path {
  fill: #0A0B0D !important;
  color: #0A0B0D !important;
}

/* Subsection titles inside the job description (Overview tab) render as
   bold/strong text, not real headings — force those white so only actual
   hyperlinks stay green. */
.ashby-job-posting-description strong,
.ashby-job-posting-description b,
.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description h4 {
  color: #D1D1D1 !important;
}

/* ==========================================================================
   Container / card backgrounds
   Ashby wraps content (job listings, the application form, description
   panes) in their own card elements with a default light background,
   separate from --colorAppBackground. Overriding those here so they
   don't show up as white boxes against the dark page.
   ========================================================================== */

.ashby-job-posting-brief {
  transition: background-color 0.15s ease;
}

.ashby-job-posting-brief:hover {
  background-color: #15181E !important;
}

.ashby-job-posting-brief,
.ashby-job-posting-brief-list,
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-job-posting-description-container,
.ashby-job-posting-header,
.ashby-application-form-container,
.ashby-application-form-section-container,
.ashby-application-form-field-entry,
.ashby-application-form-autofill-input-base-layer,
.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer,
.ashby-application-blocking-disclosure,
.ashby-application-form-blocked-application-container,
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-survey-form-container {
  background-color: #0A0B0D !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

/* Form controls: keep these on a slightly lighter dark tone than the page
   background so they still read as distinct, tappable fields. */
.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-dropdown,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date,
.ashby-application-form-input-date-popup,
.ashby-application-form-input-file,
.ashby-application-form-input-file-item,
.ashby-application-form-input-checkbox-group-option,
.ashby-application-form-input-radio-group-option,
.ashby-application-form-input-yesno-option {
  background-color: #16171A !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

.ashby-application-form-input-dropdown-select,
.ashby-application-form-input-text,
.ashby-application-form-input-textarea {
  color: #FFFFFF !important;
}

/* Dropdown / autocomplete result hover — result rows default to a white
   hover background; force the dark hover tone instead. Covering :hover
   plus the common "highlighted/active" state attributes since we can't
   confirm which one the keyboard-navigation highlight actually uses. */
.ashby-application-form-input-autocomplete-popup-result:hover,
.ashby-application-form-input-autocomplete-popup-result[data-highlighted="true"],
.ashby-application-form-input-autocomplete-popup-result[aria-selected="true"],
.ashby-application-form-input-autocomplete-popup-result[data-state="active"] {
  background-color: #252527 !important;
}

/* Yes/No selected side. Confirmed via DOM: these are <button> elements
   using aria-pressed (a toggle-button pattern), not aria-checked/a radio
   pattern as previously guessed. */
.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background-color: rgba(193, 255, 0, 0.12) !important;
  border-color: #C1FF00 !important;
  color: #C1FF00 !important;
}

/* Checkbox/radio circles (e.g. gender, race) — default white circle with
   a green fill reads as low-contrast. Giving the circle itself a grey
   fill, keeping the ring/inner dot green once checked. Native inputs get
   accent-color as a baseline; the ::before covers a custom-drawn circle
   if Ashby renders one instead of (or on top of) the native control.
   The checked ring/dot color itself is drawn from the theme's
   --colorPrimary600 variable — scoping an override to just these
   options changes it here without affecting the tab underline, links,
   etc. elsewhere on the page. */
.ashby-application-form-input-checkbox-group-option,
.ashby-application-form-input-radio-group-option {
  --colorPrimary600: #709400;
}

.ashby-application-form-input-checkbox-group-option input,
.ashby-application-form-input-radio-group-option input {
  accent-color: #494D55 !important;
}

.ashby-application-form-input-checkbox-group-option::before,
.ashby-application-form-input-radio-group-option::before {
  background-color: #494D55 !important;
}

.ashby-application-form-input-checkbox-group-option[aria-checked="true"]::before,
.ashby-application-form-input-radio-group-option[aria-checked="true"]::before,
.ashby-application-form-input-checkbox-group-option[data-state="checked"]::before,
.ashby-application-form-input-radio-group-option[data-state="checked"]::before {
  border-color: #709400 !important;
}

/* ==========================================================================
   Reference-matched additions (from jobs.ashbyhq.com/armadin)
   Structural styling only — colors below use YOUR palette (#0A0B0D /
   #C1FF00 / #15181E), not Armadin's own colors.
   ========================================================================== */

/* Job board filters (Department, Employment Type, Location, Location Type)
   were rendering as plain white <select> boxes — style them to match the
   dark, bordered filter chips in the reference. */
.ashby-job-board-filter,
.ashby-job-board-filter.ashby-job-board-filter,
select.ashby-job-board-filter,
.ashby-job-board-filter[class] {
  background-color: #0A0B0D !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

.ashby-job-board-filters-label {
  font-family: "Azeret Mono", monospace;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #D1D1D1 !important;
}

/* Mobile filter panel ("Filter Open Positions..." dropdown) — the panel
   wrapper itself (_filtersWindow) carries no ashby-* class, but its
   structure is known and consistent: it has a direct child whose own
   direct child is .ashby-job-board-filters-label ("Filters:" label).
   This uniquely identifies just that panel, without touching the
   filter selects, the reset button, or the (unreachable) open button. */
*:has(> * > .ashby-job-board-filters-label) {
  background-color: #0A0B0D !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

/* The actual confirmed culprit is one level further up: _filtersContainer,
   which sets background: var(--colorNeutral100) (a light theme token) as
   a shorthand — not background-color. Matched via the same technique, one
   level deeper (label is now a great-grandchild instead of a grandchild),
   which uniquely identifies just this outer container. Overriding the
   same "background" property directly rather than "background-color". */
*:has(> * > * > .ashby-job-board-filters-label) {
  background: #0A0B0D !important;
  box-shadow: none !important;
}

/* Job posting title inside each listing card */
.ashby-job-posting-brief-title {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400 !important;
}

/* Job metadata line under each title, e.g. "Customer Advisory • Texas -
   Remote • Full time • Remote" */
.ashby-job-posting-brief-details {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #ACACAC !important;
}

/* Give job post cards a visible border so they read as distinct cards
   even at rest, when their background matches the page. */
.ashby-job-posting-brief {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 15px !important;
}

/* Department section headers (e.g. "Engineering"): uppercase, muted,
   with a thin divider underneath — matching the reference's section
   labels rather than plain bold white text. */
.ashby-department-heading,
.ashby-department-heading-level {
  font-family: "Azeret Mono", monospace;
  font-weight: 300;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 8px;
}

/* "Open Positions" heading */
.ashby-job-board-heading {
  font-family: "Azeret Mono", monospace;
  font-weight: 300;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Muted job count next to "Open Positions" rather than full white,
   matching the lighter-weight "(13)" in the reference. */
.ashby-job-board-heading-count {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Sidebar/content widths are desktop-sized (250px sidebar, 70px gap,
   630px content). The actual outer container width comes from the
   --widthMaxJobBoard variable above (confirmed via Armadin's DOM —
   .ashby-job-posting-header is only the 188px-tall logo bar, not a
   page wrapper, so it was never the right thing to resize).
   Scoping to tablet+ so phones fall back to Ashby's own responsive
   (stacked) layout instead of these fixed pixel values, which would
   otherwise force a cramped sidebar or cause overflow on narrow
   screens. */
@media only screen and (min-width: 768px) {
  .ashby-job-posting-heading {
    margin-top: 48px !important;
  }

  .ashby-job-posting-left-pane {
    max-width: 250px !important;
    margin-right: 70px !important;
  }

  .ashby-job-posting-right-pane {
    max-width: 630px !important;
  }
}

/* ==========================================================================
   Job detail page: Overview / Application tabs
   ========================================================================== */

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab[class],
.ashby-job-posting-right-pane-application-tab[class] {
  font-family: "Azeret Mono", monospace;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FFFFFF !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* The white patch was actually on the tab's <a> element itself (the
   span above only holds the text) — confirmed via devtools. Scoping
   to just the anchors wrapping these two tab spans, via :has(), so
   this doesn't touch any other link on the page. */
a:has(> .ashby-job-posting-right-pane-overview-tab),
a:has(> .ashby-job-posting-right-pane-application-tab) {
  background-color: #0A0B0D !important;
  box-shadow: none !important;
}

/* The sliding underline indicator beneath whichever tab is active */
.ashby-job-posting-right-pane-tab-slider {
  background-color: #C1FF00 !important;
}

/* ==========================================================================
   Job detail page: description copy (Overview tab) and form section /
   question copy (Application tab) — both set to white, 16px, Inter
   ========================================================================== */

.ashby-job-posting-description {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #D1D1D1 !important;
}

.ashby-application-form-section-header-title,
.ashby-application-form-section-header-description,
.ashby-application-form-question-title,
.ashby-application-form-question-description {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #FFFFFF !important;
}

/* ==========================================================================
   Job detail page: left sidebar (Location, Employment Type, Location Type,
   Department, Compensation). Ashby doesn't expose dedicated classes for
   these — they're plain h2/p tags inside .ashby-job-posting-left-pane —
   so targeting them structurally via that container.
   ========================================================================== */

.ashby-job-posting-left-pane h2 {
  font-family: "Azeret Mono", monospace;
  font-weight: 300;
  font-size: 12px !important;
  text-transform: uppercase;
  color: #ACACAC !important;
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane span {
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  color: #FFFFFF !important;
}

/* Separator lines between each sidebar field (Location / Employment Type /
   etc.). These render as plain <hr> elements — bare tag selector, no
   class name involved, so it's not subject to the allowlist. */
.ashby-job-posting-left-pane hr {
  border: none !important;
  border-bottom: 0.5px solid #ACACAC !important;
}

/* ==========================================================================
   Resume upload — "Upload File" buttons (dropzone + autofill panel).
   The buttons themselves carry no ashby-* class (only their containers
   do), so targeting the actual <button> descendants directly.
   Recolored from Ashby's default accent to your green.
   ========================================================================== */

.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-input-file-dropzone button,
.ashby-application-form-autofill-uploader button {
  background-color: transparent !important;
  border: 1px solid #C1FF00 !important;
  color: #C1FF00 !important;
}

/* The outer autofill container itself — this is the class that was
   actually carrying the white fill (confirmed via devtools: the real
   background lives on THIS element, class="... ashby-application-form-
   autofill-uploader ..." on the outer div, not the -pane class we'd
   been targeting). This is a documented, validator-safe class. */
.ashby-application-form-autofill-uploader {
  background-color: #0A0B0D !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

.ashby-application-form-autofill-input-description {
  font-size: 13px !important;
}

/* Outer wrapper around the autofill pane (drag/pending/default states).
   The plain class + !important wasn't enough to beat Ashby's own default —
   these elements carry data-highlight/data-state attributes, suggesting
   Ashby's base rule is scoped to that attribute and out-specifies a bare
   class selector even against !important. Repeating the class and adding
   the attribute selector raises our specificity to match or beat it. */
.ashby-application-form-autofill-pane.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-pane[data-highlight] {
  background-color: #16171A !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.ashby-application-form-autofill-input-root.ashby-application-form-autofill-input-root,

.ashby-application-form-autofill-input-root[data-state] {
  background-color: #16171A !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

.ashby-application-form-autofill-input-base-layer {
  box-shadow: none !important;
  background-color: transparent !important;
}

/* ==========================================================================
   Application tab: remove bold from all text
   Targets every heading/strong/label element under the application form
   container, plus the specific ashby-* classes we already know carry bold
   by default (question titles, option labels, education entry headers,
   autofill titles). If anything still renders bold after this, it's most
   likely inline-styled or in a class we haven't seen yet — same devtools
   check as the button/sidebar would resolve it.
   ========================================================================== */

.ashby-application-form-container h1,
.ashby-application-form-container h2,
.ashby-application-form-container h3,
.ashby-application-form-container h4,
.ashby-application-form-container h5,
.ashby-application-form-container h6,
.ashby-application-form-container strong,
.ashby-application-form-container b,
.ashby-application-form-container label,
.ashby-application-form-section-header-title,
.ashby-application-form-question-title,
.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label,
.ashby-application-form-input-yesno-option,
.ashby-application-form-input-education-entry-header,
.ashby-application-form-autofill-input-title {
  font-weight: 400 !important;
}

/* ==========================================================================
   Application tab: outer panel still rendering white
   Ashby's editor validates against a fixed class allowlist, so the guesses
   tried here got rejected outright — meaning the real wrapper class isn't
   one we've used yet anywhere in this file. Needs the actual class name
   from devtools before this can be targeted.
   ========================================================================== */

/* ==========================================================================
   "Apply for this job" / submit button — green outline, #15181E fill,
   green text, Azeret Mono Light, all caps
   ========================================================================== */

.ashby-application-form-submit-button {
  background-color: #15181E !important;
  border: 1px solid #C1FF00 !important;
  color: #C1FF00 !important;
  font-family: "Azeret Mono", monospace;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ashby-application-form-submit-button:hover {
  background-color: rgba(193, 255, 0, 0.1) !important;
}

/* The "Apply for this job" CTA at the bottom of the Overview tab is a
   different button with no dedicated ashby-* class of its own, so it
   was inheriting the default bright theme fill instead of matching the
   submit button above. Targeting any button inside the right pane,
   explicitly excluding the Overview/Application tab labels (also plain
   buttons), the Yes/No option buttons (which need to stay
   unstyled-by-default and only turn green via their own
   aria-pressed="true" rule), and the error-box field links (styled
   separately below) so this doesn't restyle those. */
.ashby-job-posting-right-pane button:not(.ashby-job-posting-right-pane-overview-tab):not(.ashby-job-posting-right-pane-application-tab):not(.ashby-application-form-input-yesno-option):not([class*="errorFieldLink"]) {
  background-color: #15181E !important;
  border: 1px solid #C1FF00 !important;
  color: #C1FF00 !important;
  font-family: "Azeret Mono", monospace;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ashby-job-posting-right-pane button:not(.ashby-job-posting-right-pane-overview-tab):not(.ashby-job-posting-right-pane-application-tab):not(.ashby-application-form-input-yesno-option):not([class*="errorFieldLink"]):hover {
  background-color: rgba(193, 255, 0, 0.1) !important;
}

/* ==========================================================================
   Footer ("Powered by Ashby" + legal links) — bare tag selectors, since
   this is a plain <footer> element with no ashby-* class.
   ========================================================================== */

footer,
footer a {
  color: #7B869C !important;
}

/* ==========================================================================
   Autofill pane white background — NOT FIXABLE from this file.
   The actual background is controlled by an internal Ashby CSS-module
   class (confirmed via devtools: ._container_f7cvd_28), which sits
   outside the documented ashby-* class allowlist and gets rejected by
   Ashby's validator. A devtools override works locally/temporarily but
   can't be shipped here — this would need an Ashby support ticket.
   ========================================================================== */

/* ==========================================================================
   Form submission error box ("Your form needs corrections")
   Confirmed via DOM: this element carries no ashby-* class at all
   (only internal hashed classes), so targeting via its semantic
   role/aria attributes instead — safe from the class-name allowlist
   since these aren't class selectors. The field-name links inside are
   <button> elements, not <a> tags.
   ========================================================================== */

[role="alert"][aria-live="assertive"] {
  background-color: #15181E !important;
  border: 1px solid #ff3134 !important;
  box-shadow: none !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
}

[role="alert"][aria-live="assertive"] li {
  color: #ff3134 !important;
  font-size: 13px !important;
}

[role="alert"][aria-live="assertive"] button {
  background-color: transparent !important;
  border: none !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  color: #d1d1d1 !important;
}