/* Source #1082: YOBB - Employer - Single Job CSS */
/* =========================================================
   YOBB – EMPLOYER SINGLE JOB / LAYOUT V3

   Kohde:
   - [yobb_employer_job_overview]
   - samalla sivulla näkyvä työnantajan hakijalista

   Visuaaliset komponentit:
   YOBB – Global Component Styles V10+

   Tavoite:
   - overview-yläosa samaan tyyliin kuin Employer Overview
   - tilastot vaaleina overview-stat-kortteina
   - ei omia sivukohtaisia nappivärejä
   - neutraloi vanhan Employer Single Job CSS:n jäämät
   - ei määritä sivun taustaa
========================================================= */


/* =========================================================
   1. RESET / SCOPE
========================================================= */

.yobb-employer-single-job-overview,
.yobb-employer-job-applications,
.yobb-employer-single-job-overview *,
.yobb-employer-job-applications * {
  box-sizing: border-box;
}


/* =========================================================
   2. OVERVIEW-KOKONAISUUS
========================================================= */

.yobb-employer-single-job-overview {
  display: block;
  width: 100%;
  margin: 0 0 var(--yobb-space-xl, 32px);
}

.yobb-employer-single-job-head.yobb-card {
  display: grid !important;
  width: 100%;
  gap: var(--yobb-space-lg, 24px);

  padding: var(--yobb-card-padding-desktop, 20px) !important;

  border:
    var(--yobb-card-border-width, 1px)
    solid
    var(--yobb-border-color, rgba(5, 61, 29, 0.12)) !important;

  border-left:
    var(--yobb-card-accent-width, 4px)
    solid
    var(--yobb-primary, #43C14D) !important;

  border-radius: var(--yobb-card-radius, 14px) !important;

  background: var(--yobb-card-background, #fff) !important;
  color: var(--yobb-text, #053D1D) !important;

  box-shadow:
    var(
      --yobb-card-shadow,
      0 8px 22px rgba(5, 61, 29, 0.06)
    ) !important;
}

.yobb-employer-single-job-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--yobb-space-lg, 24px);
}

.yobb-employer-single-job-main {
  min-width: 0;
}

.yobb-employer-job-eyebrow {
  margin: 0 0 7px !important;
  color: var(--yobb-primary, #43C14D) !important;
  font-family: var(--yobb-font-heading), sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

.yobb-employer-single-job-title {
  margin: 0 !important;
  color: var(--yobb-text, #053D1D) !important;
  font-family: var(--yobb-font-heading), sans-serif !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere;
}


/* =========================================================
   3. META / BADGET
========================================================= */

.yobb-employer-single-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yobb-space-sm, 10px);
  margin-top: var(--yobb-space-md, 16px);
}

/*
 * Estää vanhan selectorin
 * .yobb-employer-single-job-meta span
 * yliajon.
 */
.yobb-employer-single-job-meta .yobb-badge {
  display: inline-flex !important;
  min-height: var(--yobb-badge-height, 28px) !important;
  align-items: center !important;
  justify-content: center !important;

  padding:
    var(--yobb-badge-padding-y, 5px)
    var(--yobb-badge-padding-x, 10px) !important;

  border-radius: var(--yobb-badge-radius, 999px) !important;

  font-family: var(--yobb-font-ui), sans-serif !important;
  font-size: var(--yobb-badge-font-size, 12px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.yobb-employer-single-job-meta .yobb-badge--soft {
  border: 1px solid
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 18%,
      transparent
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 5%,
      #fff
    ) !important;

  color: var(--yobb-text, #053D1D) !important;
}

.yobb-employer-single-job-meta
.yobb-employer-job-status:not(.yobb-badge--accent):not(.yobb-badge--soft) {
  border-color: var(--yobb-primary, #43C14D) !important;
  background: var(--yobb-primary, #43C14D) !important;
  color: #fff !important;
}

.yobb-employer-single-job-meta .yobb-badge--accent {
  border-color: var(--yobb-accent, #8149F4) !important;
  background: var(--yobb-accent, #8149F4) !important;
  color: #fff !important;
}


/* =========================================================
   4. TOIMINTONAPIT
========================================================= */

.yobb-employer-single-job-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

/*
 * Sivun teema/legacy-CSS on lisännyt linkkeihin alleviivauksia.
 * Visuaaliset värit tulevat edelleen global button tokeneista.
 */
.yobb-employer-single-job-overview .yobb-btn,
.yobb-employer-single-job-overview .yobb-btn:link,
.yobb-employer-single-job-overview .yobb-btn:visited,
.yobb-employer-job-applications .yobb-btn,
.yobb-employer-job-applications .yobb-btn:link,
.yobb-employer-job-applications .yobb-btn:visited {
  font-family: var(--yobb-button-font-family) !important;
  font-size: var(--yobb-button-font-size) !important;
  font-weight: var(--yobb-button-font-weight) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.yobb-employer-single-job-overview .yobb-btn--primary {
  border-color: var(--yobb-button-primary-border) !important;
  background: var(--yobb-button-primary-background) !important;
  color: var(--yobb-button-primary-text) !important;
}

.yobb-employer-single-job-overview .yobb-btn--primary:hover {
  border-color: var(--yobb-button-primary-hover-border) !important;
  background: var(--yobb-button-primary-hover-background) !important;
  color: var(--yobb-button-primary-hover-text) !important;
  text-decoration: none !important;
}

.yobb-employer-single-job-overview .yobb-btn--secondary {
  border-color: var(--yobb-button-secondary-border) !important;
  background: var(--yobb-button-secondary-background) !important;
  color: var(--yobb-button-secondary-text) !important;
}

.yobb-employer-single-job-overview .yobb-btn--secondary:hover {
  border-color: var(--yobb-button-secondary-hover-border) !important;
  background: var(--yobb-button-secondary-hover-background) !important;
  color: var(--yobb-button-secondary-hover-text) !important;
  text-decoration: none !important;
}


/* =========================================================
   5. TILASTOT – SAMA KUIN EMPLOYER OVERVIEW
========================================================= */

.yobb-employer-single-job-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--yobb-space-sm, 10px);
}

/*
 * Täsmälleen sama perusidea kuin Yleiskuva-etusivun
 * .yobb-employer-stat-card -kortissa.
 *
 * !important neutraloi vanhan:
 * .yobb-employer-single-job-stats > div { background: green; }
 */
.yobb-employer-single-job-stats
.yobb-employer-stat-card.yobb-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 118px;

  padding: 16px !important;

  border: 1px solid
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 22%,
      transparent
    ) !important;

  border-left: 1px solid
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 22%,
      transparent
    ) !important;

  border-radius:
    max(
      12px,
      calc(var(--yobb-card-radius, 14px) - 1px)
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 5%,
      #fff
    ) !important;

  color: var(--yobb-text, #053D1D) !important;
  box-shadow: none !important;
}

.yobb-employer-single-job-stats
.yobb-employer-stat-label {
  display: block;
  margin: 0 0 12px !important;
  padding-right: 0;

  color:
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 68%,
      transparent
    ) !important;

  font-family: var(--yobb-font-body), sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.yobb-employer-single-job-stats
.yobb-employer-stat-card strong {
  display: block;
  margin: 0;

  color: var(--yobb-text, #053D1D) !important;

  font-family: var(--yobb-font-heading), sans-serif !important;
  font-size: clamp(30px, 3vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.yobb-employer-single-job-stats
.yobb-employer-job-stat-status {
  font-size: clamp(20px, 2vw, 27px) !important;
}


/* =========================================================
   6. HAKEMUSOSION OTSIKKOKORTTI
========================================================= */

.yobb-employer-job-applications {
  width: 100%;
  scroll-margin-top: 110px;
}

.yobb-employer-job-applications-head:not(.yobb-card) {
  width: 100%;
  margin-bottom: var(--yobb-space-lg, 24px);
  padding: var(--yobb-card-padding-desktop, 20px) !important;

  border:
    var(--yobb-card-border-width, 1px)
    solid
    var(--yobb-border-color, rgba(5, 61, 29, 0.12)) !important;

  border-left:
    var(--yobb-card-accent-width, 4px)
    solid
    var(--yobb-primary, #43C14D) !important;

  border-radius: var(--yobb-card-radius, 14px) !important;

  background: var(--yobb-card-background, #fff) !important;
  color: var(--yobb-text, #053D1D) !important;
  box-shadow: var(--yobb-card-shadow) !important;
}

.yobb-employer-job-applications-head h2 {
  margin: 0 0 var(--yobb-space-sm, 10px) !important;
  color: var(--yobb-text, #053D1D) !important;
  font-family: var(--yobb-font-heading), sans-serif !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

.yobb-employer-job-applications-head p {
  margin: 0 !important;
  color:
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 62%,
      transparent
    ) !important;
  font-family: var(--yobb-font-body), sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}


/* =========================================================
   7. HAKIJAKORTTI
========================================================= */

.yobb-application-cards-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(230px, 100%), 300px));
  align-items: start;
  gap: var(--yobb-space-lg, 24px);
}

.yobb-application-compact-card {
  position: relative;
  display: grid !important;
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  justify-items: center;
  gap: var(--yobb-space-md, 16px);

  padding: var(--yobb-card-padding-desktop, 20px) !important;
  overflow: hidden;

  border:
    var(--yobb-card-border-width, 1px)
    solid
    var(--yobb-border-color, rgba(5, 61, 29, 0.12)) !important;

  border-left:
    var(--yobb-card-accent-width, 4px)
    solid
    var(--yobb-primary, #43C14D) !important;

  border-radius: var(--yobb-card-radius, 14px) !important;

  background: var(--yobb-card-background, #fff) !important;
  color: var(--yobb-text, #053D1D) !important;

  box-shadow: var(--yobb-card-shadow) !important;
  text-align: center;
}

.yobb-application-compact-match {
  position: absolute;
  top: 12px !important;
  right: 12px !important;
  z-index: 2;

  display: inline-flex !important;
  min-height: var(--yobb-badge-height, 28px);
  align-items: center;
  gap: 4px !important;

  padding:
    var(--yobb-badge-padding-y, 5px)
    var(--yobb-badge-padding-x, 10px) !important;

  border-radius: var(--yobb-badge-radius, 999px) !important;

  background:
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 8%,
      #fff
    ) !important;

  color: var(--yobb-text, #053D1D) !important;
  font-family: var(--yobb-font-ui), sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.yobb-application-compact-match span {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.yobb-application-compact-match strong {
  color: var(--yobb-text, #053D1D) !important;
  font-family: var(--yobb-font-heading), sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.yobb-application-compact-match em {
  color: var(--yobb-primary, #43C14D) !important;
  font-style: normal;
}

.yobb-application-compact-avatar {
  display: flex;
  width: 96px !important;
  height: 96px !important;
  align-items: center;
  justify-content: center;

  margin: 4px 0 0 !important;
  overflow: hidden;

  border: 2px solid var(--yobb-primary, #43C14D) !important;
  border-radius: 999px !important;

  background:
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 7%,
      #fff
    ) !important;
}

.yobb-application-compact-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yobb-application-compact-body {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: center;
  gap: 6px;
}

.yobb-application-compact-body h3 {
  margin: 0 !important;
  color: var(--yobb-text, #053D1D) !important;
  font-family: var(--yobb-font-heading), sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

.yobb-application-compact-age {
  margin: 0 !important;
  color: var(--yobb-text, #053D1D) !important;
  font-family: var(--yobb-font-body), sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}


/* =========================================================
   8. HAKIJAKORTIN NAPIT
========================================================= */

/*
 * Compact-renderer käyttää vielä vanhaa luokkaa.
 * Renderöidään se täsmälleen Global Primary -napiksi.
 */
.yobb-employer-job-applications
.yobb-application-compact-open,
.yobb-employer-job-applications
.yobb-application-open-button {
  display: inline-flex !important;
  min-height: var(--yobb-button-height-desktop) !important;
  align-items: center !important;
  justify-content: center !important;

  margin-top: var(--yobb-space-sm, 10px) !important;
  padding:
    var(--yobb-button-padding-y-desktop)
    var(--yobb-button-padding-x-desktop) !important;

  border:
    var(--yobb-button-border-width)
    solid
    var(--yobb-button-primary-border) !important;

  border-radius: var(--yobb-button-radius) !important;

  background: var(--yobb-button-primary-background) !important;
  color: var(--yobb-button-primary-text) !important;
  -webkit-text-fill-color: currentColor !important;

  font-family: var(--yobb-button-font-family) !important;
  font-size: var(--yobb-button-font-size) !important;
  font-weight: var(--yobb-button-font-weight) !important;
  line-height: 1.2 !important;

  text-align: center !important;
  text-decoration: none !important;
}

.yobb-employer-job-applications
.yobb-application-compact-open:hover,
.yobb-employer-job-applications
.yobb-application-open-button:hover {
  border-color: var(--yobb-button-primary-hover-border) !important;
  background: var(--yobb-button-primary-hover-background) !important;
  color: var(--yobb-button-primary-hover-text) !important;
  -webkit-text-fill-color: currentColor !important;

  text-decoration: none !important;
  transform: translateY(var(--yobb-button-hover-lift)) !important;
}


/* Material buttons, jos niitä näkyy hakijakortissa */
.yobb-employer-job-applications
.yobb-application-material-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border:
    var(--yobb-button-border-width)
    solid
    var(--yobb-button-secondary-border) !important;

  border-radius: var(--yobb-button-radius) !important;
  background: var(--yobb-button-secondary-background) !important;
  color: var(--yobb-button-secondary-text) !important;

  font-family: var(--yobb-button-font-family) !important;
  font-size: var(--yobb-button-font-size) !important;
  font-weight: var(--yobb-button-font-weight) !important;

  text-decoration: none !important;
}

.yobb-employer-job-applications
.yobb-application-material-button:hover {
  background: var(--yobb-button-secondary-hover-background) !important;
  color: var(--yobb-button-secondary-hover-text) !important;
  text-decoration: none !important;
}


/* =========================================================
   9. NOTICE BRIDGE
========================================================= */

.yobb-employer-job-applications
.yobb-profile-notice:not(.yobb-alert),

.yobb-employer-single-job-overview
.yobb-profile-notice:not(.yobb-alert) {
  width: 100%;
  padding: var(--yobb-alert-padding);

  border:
    var(--yobb-alert-border-width)
    solid
    var(--yobb-border-color);

  border-left: 4px solid var(--yobb-primary);
  border-radius: var(--yobb-alert-radius);

  background: var(--yobb-alert-background);
  color: var(--yobb-text);
  font-family: var(--yobb-font-body);
}


/* =========================================================
   10. VANHAN RENDERERIN JÄÄNNÖKSET
========================================================= */

.yobb-employer-job-applications
:is(
  .yobb-application-candidate-card,
  .yobb-application-card-top,
  .yobb-application-main,
  .yobb-application-contact-grid,
  .yobb-application-message,
  .yobb-application-profile-intro,
  .yobb-application-profile-tags,
  .yobb-application-match-reasons,
  .yobb-application-actions
) {
  display: none !important;
}


/* =========================================================
   11. RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .yobb-employer-single-job-head-top {
    flex-direction: column;
  }

  .yobb-employer-single-job-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .yobb-employer-single-job-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yobb-application-cards-grid {
    grid-template-columns:
      repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  }
}


@media (max-width: 767px) {

  .yobb-employer-single-job-head.yobb-card {
    padding: var(--yobb-card-padding-mobile, 14px) !important;
  }

  .yobb-employer-single-job-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .yobb-employer-single-job-actions .yobb-btn {
    width: 100%;
  }

  .yobb-employer-single-job-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yobb-employer-single-job-stats
  .yobb-employer-stat-card.yobb-card {
    min-height: 104px;
    padding: 14px !important;
  }

  .yobb-employer-job-applications-head:not(.yobb-card),
  .yobb-application-compact-card {
    padding: var(--yobb-card-padding-mobile, 14px) !important;
  }

  .yobb-application-cards-grid {
    grid-template-columns: 1fr;
  }

  .yobb-application-compact-card {
    width: min(100%, 360px);
    justify-self: center;
  }

  .yobb-employer-job-applications
  .yobb-application-compact-open,
  .yobb-employer-job-applications
  .yobb-application-open-button {
    width: 100%;
    min-height: var(--yobb-button-height-mobile) !important;
  }
}


@media (max-width: 480px) {

  .yobb-employer-single-job-stats {
    grid-template-columns: 1fr;
  }

  .yobb-employer-single-job-meta .yobb-badge {
    max-width: 100%;
    white-space: normal;
  }
}