/* ============================================================
   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); }

/* =====================================================================
   HIDE DEPARTMENT — added 2026-11-05 (same approach as RiseGuide / Leaply)
   ===================================================================== */

/* 1. Group heading above the job list */
.ashby-department-heading {
  display: none !important;
}

/* 2. "Department" filter dropdown (with its arrow icon) */
div:has(> .ashby-job-board-filter[name="departmentId"]) {
  display: none !important;
}

/* 3. "Growly • " prefix in each job card.
   Ashby renders the whole line as plain text (no wrapper per field),
   so we shift the first line left by the exact prefix width and clip it.
   4.02em = width of "Growly • " in Arial 14px (the board font).
   !! If the department name or the board font changes, this value must be re-measured. */
.ashby-job-posting-brief-details p {
  text-indent: -4.02em;
  overflow: hidden;
  margin-top: -0.15em; /* compensates the Ashby ::before trim below */
}

/* Ashby's ::before is display:block, which blocks text-indent from applying */
.ashby-job-posting-brief-details p::before {
  display: inline;
}

/* 4. "Department" block in the left pane of the job page.
   Order: Location | Employment Type | Location Type | Department.
   :last-child = safe fallback: if a block (e.g. Compensation) is ever
   added after it, nothing gets hidden by mistake. */
.ashby-job-posting-left-pane > div:nth-child(4):last-child {
  display: none;
}