/* ============================================================
   Growly — Ashby Job Board
   Theme:  dark navy · square (0 radius) · Arial · lime accent
   Brand:  #12287a navy · #4a90d8 blue · #c0fa47 lime
   Paste into: Ashby admin → Settings → Job Board → Custom CSS
   ============================================================ */

:root {
  /* ---- Growly palette ---- */
  --g-navy:          #12287a;   /* основний темний синій / surfaces */
  --g-navy-deep:     #0c1a4a;   /* app background (за контейнерами)  */
  --g-navy-up:       #1b349c;   /* elevated / hover surface          */
  --g-blue:          #4a90d8;   /* links, secondary accents          */
  --g-lime:          #c0fa47;   /* accent <=15% — CTA, active, hover */
  --g-white:         #ffffff;
  --g-black:         #000000;

  /* ---- Text ---- */
  --g-text:          var(--g-white);
  --g-text-muted:    rgba(255, 255, 255, 0.66);
  --g-text-subtle:   rgba(255, 255, 255, 0.45);

  /* ---- Lines ---- */
  --g-border:        rgba(74, 144, 216, 0.28);
  --g-border-strong: var(--g-blue);

  /* ---- Motion ---- */
  --g-ease:          0.18s ease;

  /* ============================================================
     Ashby system variables — overridden for Growly.
     NOTE: --colorPrimary900 / 600 can ALSO be set in Ashby admin
     (Theme settings). Keep them in sync, or clear them there so
     this file is the single source of truth.
     ============================================================ */
  --colorPrimary900:       var(--g-lime);      /* active / hover (light pops on dark) */
  --colorPrimary600:       var(--g-blue);      /* default links & accents             */
  --colorAppBackground:    var(--g-navy-deep);
  --widthMaxJobBoard:      880px;
  --borderRadiusContainer: 0;
  --borderRadiusControl:   0;
  --borderRadiusButton:    0;
  --fontFamily: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
}

/* ---- Document base ---- */
body {
  background: var(--g-navy-deep) !important;
  color: var(--g-text) !important;
  font-family: var(--fontFamily);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--g-lime); color: var(--g-navy); }

/* ============================================================
   JOB BOARD — listing
   ============================================================ */

.ashby-job-board-heading {
  color: var(--g-text);
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* posting count rendered as a lime accent chip */
.ashby-job-board-heading-count {
  color: var(--g-navy);
  background: var(--g-lime);
  font-weight: 700;
  padding: 0.1em 0.5em;
  margin-left: 0.5em;
}

/* Filters row */
.ashby-job-board-filters-label {
  color: var(--g-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.ashby-job-board-filter {
  background: var(--g-navy) !important;
  color: var(--g-text) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 0 !important;
  transition: border-color var(--g-ease), background var(--g-ease);
}
.ashby-job-board-filter:hover {
  border-color: var(--g-border-strong) !important;
  background: var(--g-navy-up) !important;
}
.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
  border-color: var(--g-lime) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(192, 250, 71, 0.35);
}

.ashby-job-board-reset-filters-label {
  color: var(--g-blue);
  background: transparent !important;   /* on mobile this action (reset / ✕ close) sits on a light chip by default */
  cursor: pointer;
  transition: color var(--g-ease);
}
.ashby-job-board-reset-filters-label:hover { color: var(--g-lime); }
.ashby-job-board-reset-filters-label svg,
.ashby-job-board-reset-filters-label svg path { fill: currentColor !important; }

/* Mobile collapses the filters into a popover. Its panel (_filtersContainer_) —
   and, when closed, the "Filter Open Positions…" trigger — render on a near-white
   surface by default, which hid the "Filters:" label and the ✕ icon. Re-skin the
   panel to the dark app background; the controls inside already match the theme.
   Desktop renders the filters inline with a transparent container, so it's
   unaffected. (_filtersContainer_ is a hashed CSS-module class, matched by substring.) */
[class*="_filtersContainer_"] {
  background: var(--g-navy-deep) !important;
}

/* Department / team headings — lime chevron marker.
   Drawn with borders (the ❯ glyph is missing from Arial) and positioned
   absolutely; Ashby hides ::before with display:none, hence display !important. */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  color: var(--g-text);
  font-weight: 700;
  display: block !important;
  position: relative !important;
  padding-left: 24px !important;
  border-left: none !important;
}
.ashby-department-heading::before,
.ashby-job-posting-brief-department-heading::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--g-lime) !important;
  border-right: 2px solid var(--g-lime) !important;
  transform: translateY(-50%) rotate(45deg);
}
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  color: var(--g-text-muted);
}

/* ============================================================
   JOB POSTING BRIEF — cards in the list
   ============================================================ */

.ashby-job-posting-brief {
  background: var(--g-navy) !important;
  border: 1px solid var(--g-border);
  border-left: 3px solid transparent;
  border-radius: 0 !important;
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: background var(--g-ease), border-color var(--g-ease), transform var(--g-ease);
}
.ashby-job-posting-brief:hover {
  background: var(--g-navy-up) !important;
  border-left-color: var(--g-lime);
  transform: translateX(2px);
}

.ashby-job-posting-brief-title {
  color: var(--g-text);
  font-weight: 700;
  transition: color var(--g-ease);
}
.ashby-job-posting-brief:hover .ashby-job-posting-brief-title { color: var(--g-lime); }

.ashby-job-posting-brief-details { color: var(--g-text-muted); }

/* ============================================================
   JOB POSTING — single posting page
   ============================================================ */

.ashby-job-posting-header,
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane { color: var(--g-text); }

/* Ashby renders the left pane and the application form container white by
   default — clear them so the dark app background shows through. */
.ashby-job-posting-left-pane,
.ashby-application-form-container { background: transparent !important; }

.ashby-job-posting-heading {
  color: var(--g-text);
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* rich-text body of the posting */
.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 { color: var(--g-text); font-weight: 700; }
.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane li { color: var(--g-text-muted); }
.ashby-job-posting-left-pane a {
  color: var(--g-blue);
  text-decoration: underline;
  transition: color var(--g-ease);
}
.ashby-job-posting-left-pane a:hover { color: var(--g-lime); }

/* Overview tab — the job description renders in a white CSS-module container
   inside the RIGHT pane, with no stable ashby class. Target the "_description_"
   module prefix to clear its white background; text inherits the light pane
   color. (If Ashby renames its CSS modules, update this one selector.) */
.ashby-job-posting-right-pane [class*="_description_"] { background: transparent !important; }
.ashby-job-posting-right-pane [class*="_description_"] a { color: var(--g-blue); text-decoration: underline; }
.ashby-job-posting-right-pane [class*="_description_"] a:hover { color: var(--g-lime); }

/* Back button */
.ashby-job-board-back-to-all-jobs-button {
  background: transparent !important;
  color: var(--g-blue) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 0 !important;
  transition: border-color var(--g-ease), color var(--g-ease);
}
.ashby-job-board-back-to-all-jobs-button:hover {
  border-color: var(--g-lime) !important;
  color: var(--g-lime) !important;
}

/* Tabs (Overview / Application) */
.ashby-job-posting-right-pane-tab-slider { border-bottom: 1px solid var(--g-border); }
/* On mobile Ashby turns the tab bar into a STICKY header with a near-white
   background, which made the (light) "Overview / Application" labels unreadable.
   Give it the dark app background so the labels stay legible and it works as an
   opaque sticky header. The <nav> has only a hashed module class (_tabs_…), so
   it's scoped here under the stable right-pane class. Desktop is already
   transparent, so this is harmless there. */
.ashby-job-posting-right-pane nav[class*="_tabs_"] {
  background: var(--g-navy-deep) !important;
}
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: var(--g-text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--g-ease), border-color var(--g-ease);
}
.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover { color: var(--g-text); }
/* active tab — aria-selected sits on the parent <a role="tab">; the Ashby
   tab-slider element draws the underline (picks up --colorPrimary). */
a[role="tab"][aria-selected="true"] .ashby-job-posting-right-pane-overview-tab,
a[role="tab"][aria-selected="true"] .ashby-job-posting-right-pane-application-tab {
  color: var(--g-text);
}

/* ============================================================
   APPLICATION FORM
   ============================================================ */

.ashby-application-form-container,
.ashby-survey-form-container { color: var(--g-text); }

.ashby-application-form-section-header-title { color: var(--g-text); font-weight: 700; }
.ashby-application-form-section-header-description,
.ashby-application-form-question-description { color: var(--g-text-muted); }
.ashby-application-form-question-title { color: var(--g-text); font-weight: 700; }

/* Inputs */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  background: var(--g-navy) !important;
  color: var(--g-text) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 0 !important;
  transition: border-color var(--g-ease), box-shadow var(--g-ease);
}
.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry textarea::placeholder { color: var(--g-text-subtle); }
.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  border-color: var(--g-lime) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(192, 250, 71, 0.35) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   Ashby names buttons with hashed "_button_" module classes (+ _primary_ /
   _secondary_ variants) and hardcodes a blue background with !important — so
   the solid-button rule needs the html/body prefix to win the cascade.
   Choice controls use "_option_" and are handled separately below. */

/* Solid action buttons (Apply for this Job, Upload File, Submit, …) → lime. */
html body .ashby-application-form-submit-button,
html body [class*="_button_"]:not([class*="_option_"]):not([class*="_toggleButton_"]):not(.ashby-job-board-back-to-all-jobs-button) {
  background: var(--g-lime) !important;
  color: var(--g-navy) !important;
  border: 2px solid var(--g-lime) !important;
  border-radius: 0 !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: background var(--g-ease), color var(--g-ease), border-color var(--g-ease);
}
html body .ashby-application-form-submit-button:hover,
html body [class*="_button_"]:not([class*="_option_"]):not([class*="_toggleButton_"]):not(.ashby-job-board-back-to-all-jobs-button):hover {
  background: transparent !important;
  color: var(--g-lime) !important;
  border-color: var(--g-lime) !important;
}

/* Icons inside buttons follow the text colour (Ashby hardcodes blue otherwise). */
html body .ashby-application-form-submit-button svg,
html body .ashby-application-form-submit-button svg path,
html body [class*="_button_"] svg,
html body [class*="_button_"] svg path {
  fill: currentColor !important;
  color: inherit !important;
}

/* Choice controls (Yes/No & multi-select options) — outlined, lime when selected. */
.ashby-application-form-field-entry button[class*="_option_"] {
  background: var(--g-navy) !important;
  color: var(--g-text) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 0 !important;
  transition: border-color var(--g-ease), color var(--g-ease), background var(--g-ease);
}
.ashby-application-form-field-entry button[class*="_option_"]:hover {
  border-color: var(--g-lime) !important;
  color: var(--g-lime) !important;
}
.ashby-application-form-field-entry button[class*="_option_"][aria-checked="true"],
.ashby-application-form-field-entry button[class*="_option_"][aria-pressed="true"],
.ashby-application-form-field-entry button[class*="_option_"][class*="_selected_"],
.ashby-application-form-field-entry button[class*="_option_"][class*="_active_"] {
  /* Ashby flags the chosen Yes/No option with a hashed _active_ class and NO
     aria-checked / aria-pressed — so the _active_ substring is what actually
     drives the selected state here. */
  background: var(--g-lime) !important;
  color: var(--g-navy) !important;
  border-color: var(--g-lime) !important;
}

/* Autofill / resume upload */
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-uploader {
  background: var(--g-navy) !important;
  border: 1px dashed var(--g-border-strong) !important;
  border-radius: 0 !important;
  transition: border-color var(--g-ease), background var(--g-ease);
}
.ashby-application-form-autofill-input-root[data-state="drag"],
.ashby-application-form-autofill-input-root:hover {
  border-color: var(--g-lime) !important;
  background: var(--g-navy-up) !important;
}
.ashby-application-form-autofill-input-title { color: var(--g-text); font-weight: 700; }
.ashby-application-form-autofill-input-description { color: var(--g-text-muted); }
.ashby-application-form-autofill-input-icon { color: var(--g-lime); }

/* Form alerts — positive in brand lime; negative kept default (red) for UX clarity */
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] { color: var(--g-lime); }

/* Texting consent */
.ashby-application-form-texting-consent-description { color: var(--g-text-subtle); }

/* Searchable dropdown (combobox / typeahead) — Ashby renders the results
   panel ("_resultContainer_") white with transparent options, so the white
   text was invisible. Darken the panel; options inherit the light text. */
[class*="_floatingContainer_"] { color: var(--g-text) !important; }
[class*="_resultContainer_"] {
  background: var(--g-navy) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 0 !important;
}
[class*="_result_"] { color: var(--g-text) !important; }
[class*="_result_"]:hover,
[class*="_result_"][aria-selected="true"] { background: var(--g-navy-up) !important; }

/* Success / failure */
.ashby-application-form-success-container {
  border-left: 3px solid var(--g-lime);
  color: var(--g-text);
}
.ashby-application-form-failure-container { color: var(--g-text); }

/* ============================================================
   A11y + polish
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--g-lime);
  outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--g-navy-deep); }
::-webkit-scrollbar-thumb { background: var(--g-blue); border: 2px solid var(--g-navy-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--g-lime); }