/* stylelint-disable */

/* ========== 1) Base variables (safe) ========== */
:root {
  /* Your dark theme */
  --colorAppBackground: #222222;

  /* Optional: keep your brand color as-is */
  /* --colorPrimary900: #3C7274;
  --colorPrimary600: #3C7274; */

  --widthMaxJobBoard: 1000px;
  --borderRadiusContainer: 14px;
  --borderRadiusControl: 12px;
  --borderRadiusButton: 12px;
}

/* ========== 2) Job board overall background (list page) ========== */
.ashby-job-board-heading,
.ashby-job-board-heading-count,
.ashby-job-board-filters-label,
.ashby-department-heading,
.ashby-department-heading-level {
  color: #ffffff;
}

.ashby-job-posting-brief-list {
  background: transparent;
}

/* Make each job row dark instead of white */
.ashby-job-posting-brief {
  background: #222222 !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

/* Titles and details in job rows */
.ashby-job-posting-brief-title,
.ashby-job-posting-brief-details {
  color: #ffffff !important;
}

/* ========== 3) Filters (keep controls readable) ========== */
.ashby-job-board-filter {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}

.ashby-job-board-reset-filters-label {
  color: rgba(255, 255, 255, 0.8);
}

/* ========== 4) Posting page: left pane text ========== */
.ashby-job-posting-heading,
.ashby-job-posting-header {
  color: #ffffff;
}

.ashby-job-posting-left-pane {
  color: #ffffff;
}

/* Make left pane separators subtle on dark */
.ashby-job-posting-left-pane hr {
  border-color: rgba(255, 255, 255, 0.18);
}

/* ========== 5) Posting page: tabs (Overview / Application) ========== */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  padding: 10px 14px;
}

.ashby-job-posting-right-pane-tab-slider {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* ========== 6) THE OVERLAY FIX (hides the white surface visually) ========== */
/* We can't target the internal _container_* that is white,
   so we overlay a dark layer on top of the right pane content area. */

.ashby-job-posting-right-pane {
  position: relative;
}

/* Dark overlay */
.ashby-job-posting-right-pane::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;          /* starts below the tabs area; adjust if needed */
  bottom: 0;
  background: #222222;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  z-index: 1;
  pointer-events: none;
}

/* Bring actual content above overlay AND make text white */
.ashby-job-posting-right-pane * {
  position: relative;
  z-index: 2;
}

/* Apply dark text styling to all typical content inside right pane */
.ashby-job-posting-right-pane {
  color: #ffffff;
}

/* Links on dark */
.ashby-job-posting-right-pane a {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* ========== 7) Application form: inputs on dark ========== */
.ashby-application-form-container,
.ashby-application-form-section-container,
.ashby-application-form-field-entry {
  color: #ffffff;
}

.ashby-application-form-question-title,
.ashby-application-form-section-header-title,
.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  color: rgba(255, 255, 255, 0.85);
}

/* Submit button */
.ashby-application-form-submit-button {
  border-radius: 12px;
}

/* ========== 8) Back button ========== */
.ashby-job-board-back-to-all-jobs-button {
  color: #ffffff;
}
/* ===== FIX: remove white containers in Overview + Application ===== */

.ashby-job-posting-right-pane {
  background: #222222 !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

/* Force all nested blocks inside the right pane to be transparent (kills the white cards) */
.ashby-job-posting-right-pane :where(*) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Make text readable on dark */
.ashby-job-posting-right-pane :where(*) {
  color: #ffffff;
}

/* Keep links readable */
.ashby-job-posting-right-pane :where(a) {
  color: #ffffff !important;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* Tabs themselves (Overview / Application) stay dark + white text */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  background: transparent !important;
  color: #ffffff !important;
}

/* Application form inputs need their own surfaces */
.ashby-job-posting-right-pane :where(input, textarea, select) {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.ashby-job-posting-right-pane :where(input::placeholder, textarea::placeholder) {
  color: rgba(255, 255, 255, 0.55) !important;
}
/* ===== FIX: left info panel (Location, Employment, etc.) ===== */

.ashby-job-posting-left-pane {
  background: #222222 !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

/* прибираємо білий фон у внутрішніх блоків */
.ashby-job-posting-left-pane :where(*) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* текст */
.ashby-job-posting-left-pane {
  color: #ffffff;
}

/* заголовки типу Location / Employment Type */
.ashby-job-posting-left-pane :where(h1, h2, h3, h4, h5, strong) {
  color: rgba(255, 255, 255, 0.65);
}

/* значення (Kyiv, Full time, Remote тощо) */
.ashby-job-posting-left-pane :where(p, span, div) {
  color: #ffffff;
}

/* розділювачі */
.ashby-job-posting-left-pane hr {
  border-color: rgba(255, 255, 255, 0.2);
}
/* ===== BRAND ACCENT COLOR ===== */
:root {
  --brand-accent: #77E6E9;
}

/* ===== Tabs: Overview / Application ===== */

/* активний таб */
[role="tab"][aria-selected="true"] {
  color: var(--brand-accent) !important;
  border-bottom: 2px solid var(--brand-accent);
}

/* hover по табах */
[role="tab"]:hover {
  color: var(--brand-accent);
}

/* ===== Links inside Overview / Application ===== */

.ashby-job-posting-right-pane a {
  color: var(--brand-accent);
}

.ashby-job-posting-right-pane a:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}

/* ===== Application form focus ===== */

.ashby-job-posting-right-pane input:focus,
.ashby-job-posting-right-pane textarea:focus,
.ashby-job-posting-right-pane select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent);
}

/* ===== Subtle accent for cards / panels (optional) ===== */

.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane {
  border-color: rgba(60, 114, 116, 0.35);
}
/* ===== Job cards (list of positions) accent ===== */
:root { --brand-accent: #3C7274; }

/* Заголовок вакансії в карточці */
.ashby-job-posting-brief-title,
.ashby-job-posting-brief-title * {
  color: var(--brand-accent) !important;
}

/* Hover по карточці (рамка + легкий glow) */
.ashby-job-posting-brief:hover {
  border-color: rgba(60, 114, 116, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(60, 114, 116, 0.35) !important;
}

/* Акцент коли карточка "active/selected" (Ashby ставить data-highlight) */
.ashby-job-posting-brief[data-highlight="active"],
.ashby-job-posting-brief[data-highlight="selected"],
.ashby-job-posting-brief[data-highlight="true"] {
  border-color: rgba(60, 114, 116, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(60, 114, 116, 0.45) !important;
}
/* Force override old brand color */
*[style*="#3C7274"],
*[style*="#3c7274"] {
  color: #77E6E9 !important;
  border-color: #77E6E9 !important;
}
/* Accent color for job titles (override Ashby desktop rule) */
.ashby-job-posting-brief .ashby-job-posting-brief-title,
.ashby-job-posting-brief .ashby-job-posting-brief-title * {
  color: #77E6E9 !important;
}
/* === Remove divider lines between left & right panes (desktop) === */
@media (min-width: 768px) {
  /* Left pane (Location / Employment Type / etc.) */
  .ashby-job-posting-left-pane,
  .ashby-job-posting-left-pane._container_101oc_29 {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Right pane (Overview / Application content) */
  .ashby-job-posting-right-pane,
  .ashby-job-posting-right-pane._container_101oc_29 {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Safety net: any Ashby container inside job posting */
  .ashby-job-posting-left-pane *,
  .ashby-job-posting-right-pane * {
    box-shadow: none !important;
  }
}
/* Remove vertical divider between left & right panes */
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane {
  border: none !important;
}

/* Remove internal top borders Ashby adds on desktop */
@media (min-width: 768px) {
  .ashby-job-posting-left-pane > div,
  .ashby-job-posting-right-pane > div {
    border-top: none !important;
  }
}

/* Remove subtle separators inside left info table (Location, Type, etc.) */
.ashby-job-posting-left-pane hr,
.ashby-job-posting-left-pane [role="separator"] {
  display: none !important;
}
/* Primary Apply button — filled instead of outline */
/* Apply button — FILLED, Ashby-safe */
.ashby-job-posting-right-pane :where(button) {
  background-color: #77E6E9 !important;
  border: 1px solid #77E6E9 !important;
  color: #0F1F20 !important;
  box-shadow: none !important;
}

/* Hover */
.ashby-job-posting-right-pane :where(button):hover {
  background-color: #6AD6D9 !important;
  border-color: #6AD6D9 !important;
}

/* Active */
.ashby-job-posting-right-pane :where(button):active {
  background-color: #5FCACC !important;
  border-color: #5FCACC !important;
}
/* Remove underline on hover for Apply link */
.ashby-job-posting-right-pane a:hover,
.ashby-job-posting-right-pane a:focus,
.ashby-job-posting-right-pane a:active {
  text-decoration: none !important;
}
/* Submit application button */
.ashby-application-form-submit-button,
.ashby-application-form-submit-button span {
  color: #0F1F20 !important;
}

/* Upload file buttons */
.ashby-job-posting-right-pane button[type="button"] span {
  color: #0F1F20 !important;
}
/* Upload File button text (secondary) */
.ashby-job-posting-right-pane button[class*="secondary"] span,
.ashby-job-posting-right-pane button[class*="secondary"] span span {
  color: #0F1F20 !important;
}
/* Ashby-safe: keep filter controls highlighted all the time */
.ashby-job-posting-left-pane :where(select, [role="button"], button) {
  border-color: #77E6E9 !important;
  outline: 2px solid #77E6E9 !important;
  outline-offset: 0px !important;
}

/* Optional: make sure hover/focus don't revert */
.ashby-job-posting-left-pane :where(select, [role="button"], button):hover,
.ashby-job-posting-left-pane :where(select, [role="button"], button):focus,
.ashby-job-posting-left-pane :where(select, [role="button"], button):focus-visible {
  border-color: #77E6E9 !important;
  outline: 2px solid #77E6E9 !important;
  outline-offset: 0px !important;
}
/* =========================
   MOBILE / TABLET ADAPTATION
   ========================= */

/* 1) Safe defaults for smaller screens */
@media (max-width: 767px) {
  /* Page paddings */
  .ashby-job-posting-content,
  .ashby-job-posting-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Title spacing */
  .ashby-job-posting-title {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Tabs: make them fit and wrap nicely */
  .ashby-job-posting-tabs {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  /* Details layout: stack left/right panes vertically */
  .ashby-job-posting-details {
    display: block !important;
  }

  /* Left pane (Location/Type/etc): make it full width + dark like the rest */
  .ashby-job-posting-left-pane {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 14px !important;
    border-right: none !important;
  }

  /* Right pane: full width */
  .ashby-job-posting-right-pane {
    width: 100% !important;
    max-width: none !important;
  }

  /* Reduce big whitespaces inside content */
  .ashby-job-posting-right-pane :where(h1, h2, h3) {
    margin-top: 12px !important;
    margin-bottom: 10px !important;
  }

  .ashby-job-posting-right-pane :where(p, li) {
    line-height: 1.5 !important;
  }

  /* 2) Apply button — full width on mobile */
  .ashby-job-posting-right-pane :where(button) {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* If the button is inside a link wrapper, ensure it also stretches */
  .ashby-job-posting-right-pane :where(a) {
    display: block !important;
  }
  .ashby-job-posting-right-pane :where(a) :where(button) {
    width: 100% !important;
  }
}
/* =========================
   MOBILE FIXES (Filters + Apply layout)
   Append to the END of your CSS
   ========================= */

@media (max-width: 767px) {

  /* ---------- 1) JOB BOARD FILTERS (mobile) ---------- */
  /* The white panel */
  .ashby-job-board-filters {
    background: #222222 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  /* Filter label text */
  .ashby-job-board-filters :where(label, span, div, p) {
    color: rgba(255,255,255,0.85) !important;
  }

  /* Selects / inputs inside filters */
  .ashby-job-board-filters :where(select, input) {
    background: #222222 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 14px !important;
  }

  /* Placeholder / default text */
  .ashby-job-board-filters :where(input)::placeholder {
    color: rgba(255,255,255,0.55) !important;
  }

  /* Dropdown arrow / icons (often SVG) */
  .ashby-job-board-filters :where(svg, path) {
    stroke: rgba(255,255,255,0.70) !important;
    fill: rgba(255,255,255,0.70) !important;
  }

  /* Focus highlight (your new accent) */
  .ashby-job-board-filters :where(select, input):focus {
    outline: none !important;
    border-color: #77E6E9 !important;
    box-shadow: 0 0 0 3px rgba(119,230,233,0.25) !important;
  }


  /* ---------- 2) APPLY PAGE: tabs + headings overlapping ---------- */
  /* Force the tabs row to behave on small width */
  .ashby-job-posting-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
    padding: 0 10px !important;
    margin-bottom: 10px !important;
  }

  /* Each tab link */
  .ashby-job-posting-tabs :where(a, button, [role="tab"]) {
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Prevent any weird overlap from absolute positioning */
  .ashby-job-posting-right-pane :where([role="tablist"], nav) {
    position: static !important;
  }

  /* Make form content not collide with tabs */
  .ashby-job-posting-right-pane {
    padding-top: 6px !important;
  }

  /* Form typography + spacing */
  .ashby-job-posting-right-pane :where(h1, h2, h3) {
    margin-top: 12px !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
  }

  /* Inputs full width on mobile */
  .ashby-job-posting-right-pane :where(input, textarea, select) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Upload button / main CTA stays usable on mobile */
  .ashby-job-posting-right-pane :where(button) {
    width: 100% !important;
    min-height: 48px !important;
  }
}
/* =========================
   MOBILE FILTER DRAWER (fix white panel)
   Append to the END of your CSS
   ========================= */

@media (max-width: 767px) {

  /* Mobile filters often open as a dialog / modal */
  .ashby-job-board :where([role="dialog"], [aria-modal="true"]) {
    background: #222222 !important;
    color: #ffffff !important;
  }

  /* Inner panel/content of the dialog */
  .ashby-job-board :where([role="dialog"], [aria-modal="true"]) :where(form, section, div) {
    background: #222222 !important;
  }

  /* Make sure text inside is visible */
  .ashby-job-board :where([role="dialog"], [aria-modal="true"]) :where(label, p, span, h1, h2, h3, h4) {
    color: rgba(255,255,255,0.85) !important;
  }

  /* Inputs inside the mobile filter drawer */
  .ashby-job-board :where([role="dialog"], [aria-modal="true"]) :where(select, input) {
    background: #222222 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 14px !important;
  }

  /* Focus highlight */
  .ashby-job-board :where([role="dialog"], [aria-modal="true"]) :where(select, input):focus {
    outline: none !important;
    border-color: #77E6E9 !important;
    box-shadow: 0 0 0 3px rgba(119,230,233,0.25) !important;
  }
}
/* ===== Ashby-safe: force dark surfaces everywhere (fixes mobile filters white drawer) ===== */

:root {
  /* Brand accent override (instead of #3C7274 -> #77E6E9) */
  --brand-accent: #77E6E9;
  --brand-accent-dark: #77E6E9;

  /* Neutral palette overrides (removes “white panels” like mobile filter drawer) */
  --colorNeutral0: #222222;          /* main surface background (was white) */
  --colorNeutral50: #222222;
  --colorNeutral100: #252525;
  --colorNeutral200: #2A2A2A;
  --colorNeutral300: rgba(255,255,255,0.18);

  /* Text */
  --colorNeutral900: #ffffff;        /* main text */
  --colorNeutral800: rgba(255,255,255,0.92);
  --colorNeutral700: rgba(255,255,255,0.78);
  --colorNeutral600: rgba(255,255,255,0.70);

  /* Borders / dividers */
  --borderWidthNormal: 1px;
}

/* Optional: make focus ring match accent */
:root {
  --colorPrimary500: #77E6E9;
  --colorPrimary600: #77E6E9;
  --colorPrimary700: #77E6E9;
  --colorPrimaryShadow: rgba(119,230,233,0.25);
}