/* Source #1009: YOBB Employer Dashboard and Jobs */
/* ==================================================
   YOBB – EMPLOYER DASHBOARD / JOBS GLOBAL V8

   Korvaa vanhan:
   WORKY – Employer dashboard / jobs v1

   YOBB-luokat ovat ensisijaisia.
   WORKY-luokat ovat väliaikaisesti mukana, jotta
   vielä päivittämättömät työnantajasnippetit eivät hajoa.
================================================== */

:root {
  /*
   * Varsinaiset YOBB-branditokenit tulevat tiedostosta
   * YOBB – Global Component Styles V3 / Style Setup.
   *
   * Tässä säilytetään vain vanhojen employer-tyylien
   * yhteensopivuusaliakset. Accent EI ole cream:
   * --yobb-accent kuuluu globaalisti liilalle #8149F4.
   */
  --yobb-white: var(--yobb-secondary, #FFFFFF);
  --yobb-cream: #FFFAEA;
  --yobb-background: #F5F5F5;
  --yobb-grey: var(--yobb-gray, #C5C5C5);

  --yobb-muted:
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 64%,
      transparent
    );

  --yobb-radius-lg: var(--yobb-card-radius, 14px);
  --yobb-radius-md: 12px;
}

/* ==============================
   WORKY – Employer dashboard / jobs v1
   ============================== */



/* ==============================
   Shared wrappers
   ============================== */

.yobb-employer-dashboard,
.worky-employer-dashboard,
.yobb-employer-jobs-section,
.worky-employer-jobs-section {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  color: var(--yobb-text);
}

.yobb-employer-dashboard,
.worky-employer-dashboard {
  padding: 24px 16px 120px;
}

.yobb-eyebrow,
.worky-eyebrow {
  margin: 0 0 8px;
  color: var(--yobb-muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==============================
   Legacy employer button aliases

   Uusi PHP käyttää varsinaisia global-luokkia:
   .yobb-btn + .yobb-btn--primary / --secondary / --accent.

   Nämä alias-säännöt jäävät vain vielä päivittämättömien
   employer-snippettien yhteensopivuutta varten.
   ============================== */

:is(
  .yobb-employer-primary-btn,
  .worky-employer-primary-btn,
  .yobb-employer-secondary-btn,
  .worky-employer-secondary-btn,
  .yobb-employer-small-btn,
  .worky-employer-small-btn
) {
  display: inline-flex;
  min-height: var(--yobb-button-height-desktop, 46px);
  align-items: center;
  justify-content: center;
  padding:
    var(--yobb-button-padding-y-desktop, 10px)
    var(--yobb-button-padding-x-desktop, 20px);

  border-width: var(--yobb-button-border-width, 1px);
  border-style: solid;
  border-radius: var(--yobb-button-radius, 12px);

  font-family: var(--yobb-button-font-family, var(--yobb-font-heading));
  font-size: var(--yobb-button-font-size, 15px);
  font-weight: var(--yobb-button-font-weight, 600);
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;

  transition:
    background-color var(--yobb-button-hover-duration, 180ms) ease,
    border-color var(--yobb-button-hover-duration, 180ms) ease,
    color var(--yobb-button-hover-duration, 180ms) ease,
    transform var(--yobb-button-hover-duration, 180ms) ease;
}

:is(
  .yobb-employer-primary-btn,
  .worky-employer-primary-btn,
  .yobb-employer-small-btn,
  .worky-employer-small-btn
) {
  border-color: var(--yobb-button-primary-border, var(--yobb-primary));
  background: var(--yobb-button-primary-background, var(--yobb-primary));
  color: var(--yobb-button-primary-text, var(--yobb-secondary)) !important;
}

:is(
  .yobb-employer-secondary-btn,
  .worky-employer-secondary-btn
) {
  border-color: var(--yobb-button-secondary-border, var(--yobb-primary));
  background: var(--yobb-button-secondary-background, var(--yobb-secondary));
  color: var(--yobb-button-secondary-text, var(--yobb-primary)) !important;
}

:is(
  .yobb-employer-primary-btn,
  .worky-employer-primary-btn,
  .yobb-employer-secondary-btn,
  .worky-employer-secondary-btn,
  .yobb-employer-small-btn,
  .worky-employer-small-btn
):hover {
  transform: translateY(var(--yobb-button-hover-lift, -1px));
}


:is(
  .yobb-employer-primary-btn,
  .worky-employer-primary-btn,
  .yobb-employer-small-btn,
  .worky-employer-small-btn
):hover {
  border-color: var(--yobb-button-primary-hover-border, var(--yobb-primary));
  background: var(--yobb-button-primary-hover-background, transparent);
  color: var(--yobb-button-primary-hover-text, var(--yobb-primary)) !important;
}

:is(
  .yobb-employer-secondary-btn,
  .worky-employer-secondary-btn
):hover {
  border-color: var(--yobb-button-secondary-hover-border, var(--yobb-primary));
  background: var(--yobb-button-secondary-hover-background, var(--yobb-primary));
  color: var(--yobb-button-secondary-hover-text, var(--yobb-secondary)) !important;
}

/* ==============================
   Overview / stats hero
   Shortcode: [worky_employer_overview]
   ============================== */

.yobb-employer-overview-hero,
.worky-employer-overview-hero {
  background: var(--yobb-text);
  color: var(--yobb-white);
  border-radius: 30px;
  padding: 30px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.16);
  margin-bottom: 18px;
}

.yobb-employer-overview-text,
.worky-employer-overview-text {
  margin-bottom: 22px;
}

.yobb-employer-overview-text h1,
.worky-employer-overview-text h1 {
  margin: 0 0 8px;
  color: var(--yobb-white);
  font-size: 36px;
  line-height: 1.08;
}

.yobb-employer-overview-text p,
.worky-employer-overview-text p {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-weight: 700;
}

.yobb-employer-overview-hero .yobb-eyebrow,
.worky-employer-overview-hero .worky-eyebrow {
  color: rgba(255,255,255,0.66);
}

.yobb-employer-overview-stats,
.worky-employer-overview-stats,
.yobb-employer-stats-grid,
.worky-employer-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.yobb-employer-stat-card,
.worky-employer-stat-card {
  background: rgba(255,255,255,0.08);
  color: var(--yobb-white);
  border-radius: 22px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.12);
}

.yobb-employer-stat-card span,
.worky-employer-stat-card span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.72);
  font-weight: 800;
}

.yobb-employer-stat-card strong,
.worky-employer-stat-card strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: var(--yobb-white);
}

/* ==============================
   Section cards
   ============================== */

.yobb-employer-section,
.worky-employer-section {
  margin-top: 18px;
  background: var(--yobb-white);
  border-radius: var(--yobb-radius-lg);
  padding: 26px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.yobb-employer-section-head,
.worky-employer-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.yobb-employer-section-head h2,
.worky-employer-section-head h2 {
  margin: 0 0 6px;
  color: var(--yobb-text);
  font-size: 26px;
  line-height: 1.12;
}

.yobb-employer-section-head p,
.worky-employer-section-head p {
  margin: 0;
  color: var(--yobb-muted);
  font-weight: 700;
}

/* ==============================
   Employer jobs shortcode
   Shortcode: [yobb_employer_jobs]

   Kortin ja nappien visuaalinen perusta tulee globalista:
   .yobb-card / .yobb-card--accent / .yobb-btn / .yobb-badge.
   Tässä määritellään vain tämän näkymän layout.
   ============================== */

.yobb-employer-jobs-section,
.worky-employer-jobs-section {
  color: var(--yobb-text);
}

.yobb-employer-jobs-head,
.worky-employer-jobs-head {
  margin-bottom: var(--yobb-space-md, 16px);
}

.yobb-employer-jobs-head h2,
.worky-employer-jobs-head h2 {
  margin: 0 0 6px;
  color: var(--yobb-text);
  font-size: 28px;
  line-height: 1.12;
}

.yobb-employer-jobs-head p,
.worky-employer-jobs-head p {
  margin: 0;
  color: var(--yobb-muted);
  font-weight: 500;
}

.yobb-employer-jobs-list,
.worky-employer-jobs-list {
  display: grid;
  gap: var(--yobb-space-md, 16px);
}

.yobb-employer-job-content,
.worky-employer-job-content {
  min-width: 0;
}

.yobb-employer-job-title-row,
.worky-employer-job-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.yobb-employer-job-title-row h3,
.worky-employer-job-title-row h3 {
  margin: 8px 0 0;
  color: var(--yobb-text);
  font-size: 20px;
  line-height: 1.15;
}

.yobb-employer-job-details,
.worky-employer-job-details {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 12px;
  color: var(--yobb-muted);
  font-size: 13px;
  font-weight: 500;
}

.yobb-employer-job-details strong,
.worky-employer-job-details strong {
  color: var(--yobb-text);
}

.yobb-employer-job-numbers,
.worky-employer-job-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.yobb-employer-job-numbers div,
.worky-employer-job-numbers div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--yobb-border-color);
  border-radius: 12px;
  background:
    color-mix(
      in srgb,
      var(--yobb-primary) 5%,
      var(--yobb-secondary)
    );
}

.yobb-employer-job-numbers strong,
.worky-employer-job-numbers strong {
  display: block;
  color: var(--yobb-text);
  font-size: 22px;
  line-height: 1;
}

.yobb-employer-job-numbers span,
.worky-employer-job-numbers span {
  display: block;
  margin-top: 4px;
  color: var(--yobb-muted);
  font-size: 11px;
  font-weight: 600;
}

.yobb-employer-job-actions,
.worky-employer-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yobb-space-sm, 10px);
}

.yobb-employer-job-delete-form {
  display: inline-flex;
  margin: 0;
}

.yobb-employer-jobs-empty,
.worky-employer-jobs-empty,
.yobb-employer-empty,
.worky-employer-empty {
  width: 100%;
}

.yobb-employer-jobs-empty h3,
.worky-employer-jobs-empty h3,
.yobb-employer-empty h2,
.worky-employer-empty h2,
.yobb-employer-empty h3,
.worky-employer-empty h3 {
  margin: 0 0 8px;
  color: var(--yobb-text);
}

.yobb-employer-jobs-empty p,
.worky-employer-jobs-empty p,
.yobb-employer-empty p,
.worky-employer-empty p {
  margin: 0 0 16px;
  color: var(--yobb-muted);
  font-weight: 500;
}

/* ==============================
   Status pills
   ============================== */

.yobb-job-status-pill,
.worky-job-status-pill,
.yobb-status-pill,
.worky-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;

  background: var(--yobb-grey);
  color: var(--yobb-text);

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.yobb-job-status-publish,
.worky-job-status-publish,
.yobb-status-publish,
.worky-status-publish,
.yobb-application-status-new,
.worky-application-status-new {
  background: var(--yobb-primary);
}

.yobb-job-status-pending,
.worky-job-status-pending,
.yobb-status-pending,
.worky-status-pending,
.yobb-application-status-interview,
.worky-application-status-interview {
  background: color-mix(in srgb, var(--yobb-primary) 18%, var(--yobb-cream));
}

.yobb-job-status-draft,
.worky-job-status-draft,
.yobb-status-draft,
.worky-status-draft {
  background: var(--yobb-grey);
}

.yobb-job-status-expired,
.worky-job-status-expired,
.yobb-status-expired,
.worky-status-expired,
.yobb-application-status-rejected,
.worky-application-status-rejected {
  background: var(--yobb-grey);
}

.yobb-application-status-interesting,
.worky-application-status-interesting {
  background: color-mix(in srgb, var(--yobb-primary) 24%, var(--yobb-cream));
}

.yobb-application-status-hired,
.worky-application-status-hired {
  background: color-mix(in srgb, var(--yobb-primary) 30%, var(--yobb-cream));
}

/* ==============================
   Employer applications view
   ============================== */

.yobb-application-list,
.worky-application-list {
  display: grid;
  gap: 14px;
}

.yobb-employer-application-card,
.worky-employer-application-card {
  background: var(--yobb-background);
  border-radius: var(--yobb-radius-lg);
  padding: 26px;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.06);
}

.yobb-application-card-head,
.worky-application-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.yobb-application-card-head h3,
.worky-application-card-head h3 {
  margin: 8px 0 8px;
  color: var(--yobb-text);
  font-size: 22px;
  line-height: 1.15;
}

.yobb-application-card-head p,
.worky-application-card-head p {
  margin: 0;
  color: var(--yobb-muted);
  font-weight: 700;
}

.yobb-application-match,
.worky-application-match {
  flex: 0 0 auto;
  min-width: 58px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;

  background: var(--yobb-primary);
  color: var(--yobb-white);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
}

.yobb-application-message,
.worky-application-message {
  padding: 16px;
  border-radius: 18px;
  background: var(--yobb-white);
  margin-bottom: 14px;
}

.yobb-application-message h4,
.worky-application-message h4,
.yobb-employer-info-box h4,
.worky-employer-info-box h4 {
  margin: 0 0 10px;
  color: var(--yobb-text);
  font-size: 16px;
}

.yobb-application-message p,
.worky-application-message p {
  margin: 0;
  color: var(--yobb-text);
  line-height: 1.55;
}

.yobb-application-card-grid,
.worky-application-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.yobb-employer-info-box,
.worky-employer-info-box {
  padding: 16px;
  border-radius: 18px;
  background: var(--yobb-white);
}

.yobb-employer-application-row,
.worky-employer-application-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.yobb-employer-application-row:first-of-type,
.worky-employer-application-row:first-of-type {
  border-top: 0;
}

.yobb-employer-application-row span,
.worky-employer-application-row span {
  color: var(--yobb-muted);
  font-weight: 800;
}

.yobb-employer-application-row strong,
.worky-employer-application-row strong {
  color: var(--yobb-text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.yobb-employer-material-actions,
.worky-employer-material-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.yobb-employer-muted-pill,
.worky-employer-muted-pill {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--yobb-grey);
  color: var(--yobb-muted);

  display: inline-flex;
  align-items: center;

  font-weight: 900;
}

.yobb-employer-video,
.worky-employer-video {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--yobb-text);
}

.yobb-employer-video[hidden],
.worky-employer-video[hidden] {
  display: none !important;
}

.yobb-employer-video video,
.worky-employer-video video {
  width: 100%;
  display: block;
}

.yobb-employer-profile-intro,
.worky-employer-profile-intro {
  margin: 0;
  color: var(--yobb-text);
  line-height: 1.55;
}

.yobb-application-status-form,
.worky-application-status-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;

  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid rgba(0,0,0,0.08);
}

.yobb-application-status-form label,
.worky-application-status-form label {
  display: grid;
  gap: 6px;
  color: var(--yobb-text);
  font-weight: 900;
}

.yobb-application-status-form select,
.worky-application-status-form select {
  min-height: 42px;
  min-width: 190px;
  border-radius: 999px;
  border: 1px solid var(--yobb-grey);
  padding: 0 14px;
  background: var(--yobb-white);
  color: var(--yobb-text);
  font-weight: 800;
}

/* ==============================
   Messages
   ============================== */

.yobb-form-message,
.worky-form-message {
  margin-bottom: 18px;
}

.yobb-success,
.worky-success,
.yobb-error,
.worky-error {
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 800;
}

.yobb-success,
.worky-success {
  background: var(--yobb-primary);
  color: var(--yobb-text);
}

.yobb-error,
.worky-error {
  background: var(--yobb-cream);
  color: var(--yobb-text);
}

/* ==============================
   Responsive
   ============================== */

@media (max-width: 980px) {
  .yobb-employer-overview-stats,
.worky-employer-overview-stats,
.yobb-employer-stats-grid,
.worky-employer-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .yobb-employer-dashboard,
.worky-employer-dashboard {
    padding-left: 10px;
    padding-right: 10px;
  }

  .yobb-employer-section,
.worky-employer-section {
    border-radius: 22px;
    padding: 20px 16px;
  }

  .yobb-employer-job-list-card,
.worky-employer-job-list-card {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
  }

  .yobb-employer-job-thumb,
.worky-employer-job-thumb {
    width: 82px;
    border-radius: 16px;
  }

  .yobb-employer-job-title-row h3,
.worky-employer-job-title-row h3 {
    font-size: 18px;
  }

  .yobb-employer-job-numbers,
.worky-employer-job-numbers {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .yobb-employer-primary-btn,
.worky-employer-primary-btn,
.yobb-employer-secondary-btn,
.worky-employer-secondary-btn,
.yobb-employer-small-btn,
.worky-employer-small-btn {
    width: 100%;
  }

  .yobb-application-card-grid,
.worky-application-card-grid {
    grid-template-columns: 1fr;
  }

  .yobb-employer-application-row,
.worky-employer-application-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .yobb-application-status-form,
.worky-application-status-form {
    display: grid;
  }

  .yobb-application-status-form select,
.worky-application-status-form select,
.yobb-application-status-form button,
.worky-application-status-form button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .yobb-employer-overview-hero,
.worky-employer-overview-hero {
    border-radius: 24px;
    padding: 22px 16px;
  }

  .yobb-employer-overview-text h1,
.worky-employer-overview-text h1 {
    font-size: 28px;
  }

  .yobb-employer-overview-stats,
.worky-employer-overview-stats,
.yobb-employer-stats-grid,
.worky-employer-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .yobb-employer-stat-card,
.worky-employer-stat-card {
    padding: 16px;
  }

  .yobb-employer-stat-card strong,
.worky-employer-stat-card strong {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .yobb-employer-job-list-card,
.worky-employer-job-list-card {
    grid-template-columns: 1fr;
  }

  .yobb-employer-job-thumb,
.worky-employer-job-thumb {
    width: 100%;
    max-height: 220px;
  }

  .yobb-employer-overview-stats,
.worky-employer-overview-stats,
.yobb-employer-stats-grid,
.worky-employer-stats-grid {
    grid-template-columns: 1fr;
  }
}


/* ==================================================
   YOBB-BRÄNDIN TYPOGRAFIA
================================================== */

[class*="yobb-employer-"],
[class*="worky-employer-"],
[class*="yobb-application-"],
[class*="worky-application-"] {
  font-family: var(--yobb-font-body), sans-serif;
}

:is(
  [class*="yobb-employer-"],
  [class*="worky-employer-"],
  [class*="yobb-application-"],
  [class*="worky-application-"]
) :is(h1, h2, h3, h4, h5, h6),

:is(
  .yobb-employer-primary-btn,
  .yobb-employer-secondary-btn,
  .yobb-employer-small-btn,
  .worky-employer-primary-btn,
  .worky-employer-secondary-btn,
  .worky-employer-small-btn,
  .yobb-job-status-pill,
  .yobb-status-pill,
  .worky-job-status-pill,
  .worky-status-pill
) {
  font-family: var(--yobb-font-heading), sans-serif;
  font-weight: 700;
}


/* ==================================================
   PAINIKKEET

   Employer Jobs V4 käyttää YOBB Global Component Styles
   -painikkeita. Legacy-aliasit on määritelty tiedoston alussa.
================================================== */

/* ==================================================
   DASHBOARDIN YLEISNÄKYMÄ – ETUSIVUN TYYLI
================================================== */

:is(
  .yobb-employer-overview-hero,
  .worky-employer-overview-hero
) {
  margin-bottom: 20px;
  padding: 30px;

  border: 4px dotted var(--yobb-text);
  border-radius: 24px;

  background: var(--yobb-cream);
  color: var(--yobb-text);

  box-shadow: none;
}

:is(
  .yobb-employer-overview-text,
  .worky-employer-overview-text
) {
  max-width: 760px;
  margin-bottom: 24px;
}

:is(
  .yobb-employer-overview-text h1,
  .worky-employer-overview-text h1
) {
  margin: 0 0 9px;

  color: var(--yobb-text);

  font-family: var(--yobb-font-heading), sans-serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.04;
}

:is(
  .yobb-employer-overview-text > p:last-child,
  .worky-employer-overview-text > p:last-child
) {
  max-width: 720px;
  margin: 0;

  color: var(--yobb-muted);

  font-family: var(--yobb-font-body), sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

:is(
  .yobb-employer-overview-hero .yobb-eyebrow,
  .worky-employer-overview-hero .worky-eyebrow,
  .yobb-employer-overview-hero .worky-eyebrow,
  .worky-employer-overview-hero .yobb-eyebrow
) {
  color: var(--yobb-primary);

  font-family: var(--yobb-font-heading), sans-serif;
  font-weight: 700;
}

:is(
  .yobb-employer-stat-card,
  .worky-employer-stat-card
) {
  padding: 20px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--yobb-text) 14%,
      transparent
    );

  border-radius: 18px;

  background: var(--yobb-primary);
  color: var(--yobb-cream);
}

:is(
  .yobb-employer-stat-card span,
  .worky-employer-stat-card span
) {
  margin-bottom: 11px;

  color:
    color-mix(
      in srgb,
      var(--yobb-cream) 84%,
      transparent
    );

  font-family: var(--yobb-font-heading), sans-serif;
  font-size: 14px;
  font-weight: 600;
}

:is(
  .yobb-employer-stat-card strong,
  .worky-employer-stat-card strong
) {
  color: var(--yobb-cream);

  font-family: var(--yobb-font-heading), sans-serif;
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 700;
}


/* ==================================================
   YLEISNÄKYMÄN LINKILLiset TILASTOKORTIT
================================================== */

.yobb-employer-stat-card {
  position: relative;
  display: block;

  text-decoration: none !important;
}

.yobb-employer-stat-link,
.yobb-employer-stat-link:visited {
  color: var(--yobb-cream) !important;
  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.yobb-employer-stat-link:hover {
  transform: translateY(-4px);

  background:
    color-mix(
      in srgb,
      var(--yobb-primary) 88%,
      var(--yobb-text)
    );

  box-shadow:
    0 12px 26px
    color-mix(
      in srgb,
      var(--yobb-text) 18%,
      transparent
    );
}

.yobb-employer-stat-link:focus-visible {
  outline: 3px solid var(--yobb-text);
  outline-offset: 4px;
}

.yobb-employer-stat-arrow {
  position: absolute;
  top: 16px;
  right: 17px;

  color: var(--yobb-cream);

  font-family: var(--yobb-font-heading), sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;

  opacity: 0.72;

  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.yobb-employer-stat-link:hover
.yobb-employer-stat-arrow,

.yobb-employer-stat-link:focus-visible
.yobb-employer-stat-arrow {
  transform: translateX(4px);
  opacity: 1;
}

.yobb-employer-stat-link
.yobb-employer-stat-label {
  padding-right: 28px;
}


/* ==================================================
   KORTIT JA PIENET TILASTOT
================================================== */

:is(
  .yobb-employer-section,
  .worky-employer-section,

  .yobb-employer-empty,
  .worky-employer-empty
) {
  border-color:
    color-mix(
      in srgb,
      var(--yobb-text) 9%,
      transparent
    );

  background: var(--yobb-white);
}

:is(
  .yobb-employer-job-numbers div,
  .worky-employer-job-numbers div
) {
  background: var(--yobb-cream);
}

:is(
  .yobb-employer-job-numbers strong,
  .worky-employer-job-numbers strong,
  .yobb-employer-job-title-row h3,
  .worky-employer-job-title-row h3,
  .yobb-employer-jobs-head h2,
  .worky-employer-jobs-head h2,
  .yobb-employer-section-head h2,
  .worky-employer-section-head h2
) {
  font-family: var(--yobb-font-heading), sans-serif;
  font-weight: 700;
}


/* ==================================================
   MOBIILI
================================================== */

@media (max-width: 640px) {
  :is(
    .yobb-employer-overview-hero,
    .worky-employer-overview-hero
  ) {
    padding: 22px 16px;

    border-width: 3px;
    border-radius: 20px;
  }
}

/* ==================================================
   EMPLOYER JOBS V4 – GLOBAL CARD + BUNNY THUMBNAIL

   PHP lisää työpaikkakortille:
   .yobb-card.yobb-card--accent

   Thumbnail:
   - Bunny Stream STATIC thumbnail / Bunny Storage image
   - ei iframea eikä videoelementtiä
   - aina oikea 9:16-suhde
   - object-fit: cover
================================================== */

:is(
  .yobb-employer-job-list-card,
  .worky-employer-job-list-card
) {
  display: grid;
  grid-template-columns:
    clamp(120px, 14vw, 160px)
    minmax(0, 1fr);
  align-items: stretch;
  gap: var(--yobb-space-md, 16px);
}

/*
 * Global .yobb-card hoitaa paddingin, taustan, reunan,
 * radius-arvon ja shadow'n. Job CSS ei yliaja niitä.
 */
.yobb-employer-job-list-card.yobb-card {
  background: var(--yobb-card-background, var(--yobb-secondary));
}

:is(
  .yobb-employer-job-thumb,
  .worky-employer-job-thumb
) {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  align-self: start;

  overflow: hidden;
  border-radius:
    max(
      8px,
      calc(var(--yobb-card-radius, 14px) - 2px)
    );

  background:
    color-mix(
      in srgb,
      var(--yobb-text) 92%,
      #000
    );
}

:is(
  .yobb-employer-job-thumb-img,
  .worky-employer-job-thumb-img
) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

:is(
  .yobb-employer-job-thumb-video,
  .worky-employer-job-thumb-video,
  .yobb-employer-job-thumb-placeholder,
  .worky-employer-job-thumb-placeholder
) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:is(
  .yobb-employer-job-thumb-placeholder,
  .worky-employer-job-thumb-placeholder
) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yobb-primary);
}

:is(
  .yobb-employer-job-thumb-placeholder span,
  .worky-employer-job-thumb-placeholder span
) {
  font-family: var(--yobb-font-heading);
  font-size: 30px;
  font-weight: 700;
}




/* Employer-listassa media on aina staattinen kuva. */
.yobb-employer-job-thumb-bunny-img {
  pointer-events: none;
  user-select: none;
}

:is(
  .yobb-employer-job-content,
  .worky-employer-job-content
) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

:is(
  .yobb-employer-job-title-row,
  .worky-employer-job-title-row
) {
  margin-bottom: 6px;
}

:is(
  .yobb-employer-job-title-row h3,
  .worky-employer-job-title-row h3
) {
  margin: 7px 0 0;
  font-family: var(--yobb-font-heading);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.12;
}

:is(
  .yobb-employer-job-details,
  .worky-employer-job-details
) {
  gap: 5px 11px;
  margin-bottom: 12px;
  font-size: 12px;
}

:is(
  .yobb-employer-job-numbers,
  .worky-employer-job-numbers
) {
  gap: 8px;
  margin-bottom: 12px;
}

:is(
  .yobb-employer-job-numbers div,
  .worky-employer-job-numbers div
) {
  padding: 10px 11px;
  border: 1px solid var(--yobb-border-color);
  border-radius: 11px;
  background:
    color-mix(
      in srgb,
      var(--yobb-primary) 6%,
      var(--yobb-secondary)
    );
}

:is(
  .yobb-employer-job-numbers strong,
  .worky-employer-job-numbers strong
) {
  color: var(--yobb-text);
  font-family: var(--yobb-font-heading);
  font-size: 22px;
  font-weight: 600;
}

:is(
  .yobb-employer-job-numbers span,
  .worky-employer-job-numbers span
) {
  color: var(--yobb-muted);
  font-family: var(--yobb-font-body);
  font-size: 11px;
  font-weight: 500;
}

:is(
  .yobb-employer-job-actions,
  .worky-employer-job-actions
) {
  margin-top: auto;
  padding-top: var(--yobb-space-sm, 10px);
}

.yobb-employer-job-delete-form {
  display: inline-flex;
  margin: 0;
}

/* Status badge: global .yobb-badge antaa koon ja typografian. */
:is(
  .yobb-job-status-published,
  .yobb-job-status-publish,
  .yobb-job-status-filled
) {
  border-color: var(--yobb-primary);
  background: var(--yobb-primary);
  color: var(--yobb-secondary) !important;
}

:is(
  .yobb-job-status-scheduled,
  .yobb-job-status-awaiting_payment,
  .yobb-job-status-awaiting_review,
  .yobb-job-status-pending
) {
  border: 1px solid
    color-mix(
      in srgb,
      var(--yobb-primary) 32%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--yobb-primary) 8%,
      var(--yobb-secondary)
    );
  color: var(--yobb-text) !important;
}

:is(
  .yobb-job-status-draft,
  .yobb-job-status-closed,
  .yobb-job-status-expired
) {
  border-color:
    color-mix(
      in srgb,
      var(--yobb-text) 12%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--yobb-text) 7%,
      var(--yobb-secondary)
    );
  color: var(--yobb-text) !important;
}

/* Tablet */
@media (max-width: 980px) {
  :is(
    .yobb-employer-job-list-card,
    .worky-employer-job-list-card
  ) {
    grid-template-columns: 120px minmax(0, 1fr);
  }

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

/* Mobile: portrait-thumbnail säilyy 9:16, mutta ei kasva koko ruudun levyiseksi. */
@media (max-width: 640px) {
  :is(
    .yobb-employer-job-list-card,
    .worky-employer-job-list-card
  ) {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
  }

  :is(
    .yobb-employer-job-thumb,
    .worky-employer-job-thumb
  ) {
    width: 96px;
    aspect-ratio: 9 / 16;
  }

  :is(
    .yobb-employer-job-actions,
    .worky-employer-job-actions
  ) {
    display: grid;
    grid-template-columns: 1fr;
  }

  .yobb-employer-job-actions .yobb-btn,
  .yobb-employer-job-delete-form,
  .yobb-employer-job-delete-form .yobb-btn {
    width: 100%;
  }
}

/* Hyvin kapea puhelin: thumbnail omalle riville, edelleen 9:16. */
@media (max-width: 430px) {
  :is(
    .yobb-employer-job-list-card,
    .worky-employer-job-list-card
  ) {
    grid-template-columns: 1fr;
  }

  :is(
    .yobb-employer-job-thumb,
    .worky-employer-job-thumb
  ) {
    width: min(42vw, 150px);
    aspect-ratio: 9 / 16;
  }
}


/* =========================================================
   EMPLOYER JOBS V5 – GLOBAL COMPONENT BRIDGE

   Tämän tarkoitus on varmistaa, että Employer Jobs näyttää
   oikealta myös silloin, jos erillinen Global Component Styles
   -stylesheet ei lataudu tällä sivulla. Kaikki arvot tulevat
   edelleen samoista --yobb-* global-tokeneista.
========================================================= */

.yobb-employer-job-list-card.yobb-card,
.worky-employer-job-list-card.yobb-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--yobb-card-padding-desktop, 20px);
  border:
    var(--yobb-card-border-width, 1px)
    solid
    var(--yobb-border-color, rgba(5,61,29,.12));
  border-left:
    var(--yobb-card-accent-width, 4px)
    solid
    var(--yobb-primary, #43C14D);
  border-radius: var(--yobb-card-radius, 14px);
  background: var(--yobb-card-background, var(--yobb-secondary, #fff));
  color: var(--yobb-text, #053D1D);
  box-shadow:
    var(
      --yobb-card-shadow,
      0 8px 22px rgba(5,61,29,.06)
    );
}

/* Global button bridge */
.yobb-employer-job-actions .yobb-btn,
.yobb-employer-jobs-empty .yobb-btn,
.yobb-employer-job-delete-form .yobb-btn {
  display: inline-flex;
  min-height: var(--yobb-button-height-desktop, 46px);
  align-items: center;
  justify-content: center;
  padding:
    var(--yobb-button-padding-y-desktop, 10px)
    var(--yobb-button-padding-x-desktop, 20px);
  border-width: var(--yobb-button-border-width, 1px);
  border-style: solid;
  border-radius: var(--yobb-button-radius, 12px);
  font-family: var(--yobb-button-font-family, var(--yobb-font-heading));
  font-size: var(--yobb-button-font-size, 15px);
  font-weight: var(--yobb-button-font-weight, 600);
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box;
}

.yobb-employer-job-actions .yobb-btn--primary,
.yobb-employer-jobs-empty .yobb-btn--primary {
  border-color: var(--yobb-button-primary-border, var(--yobb-primary));
  background: var(--yobb-button-primary-background, var(--yobb-primary));
  color: var(--yobb-button-primary-text, var(--yobb-secondary)) !important;
}

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

.yobb-employer-job-delete-form .yobb-btn--accent,
.yobb-employer-job-actions .yobb-btn--accent {
  border-color: var(--yobb-button-accent-border, var(--yobb-accent, #8149F4));
  background: var(--yobb-button-accent-background, var(--yobb-accent, #8149F4));
  color: var(--yobb-button-accent-text, var(--yobb-secondary, #fff)) !important;
}


/*
 * Variant hover bridge.
 *
 * Nämä ovat tarkoituksella yhtä spesifejä kuin yllä olevat
 * employer-fallbackit, jotta base-säännöt eivät peitä
 * Global Component Styles V4:n hover-värejä.
 */
.yobb-employer-job-actions .yobb-btn--primary:hover,
.yobb-employer-jobs-empty .yobb-btn--primary:hover {
  border-color: var(--yobb-button-primary-hover-border, var(--yobb-primary));
  background: var(--yobb-button-primary-hover-background, transparent);
  color: var(--yobb-button-primary-hover-text, var(--yobb-primary)) !important;
}

.yobb-employer-job-actions .yobb-btn--secondary:hover {
  border-color: var(--yobb-button-secondary-hover-border, var(--yobb-primary));
  background: var(--yobb-button-secondary-hover-background, var(--yobb-primary));
  color: var(--yobb-button-secondary-hover-text, var(--yobb-secondary)) !important;
}

.yobb-employer-job-delete-form .yobb-btn--accent:hover,
.yobb-employer-job-actions .yobb-btn--accent:hover {
  border-color: var(--yobb-button-accent-hover-border, var(--yobb-accent, #8149F4));
  background: var(--yobb-button-accent-hover-background, transparent);
  color: var(--yobb-button-accent-hover-text, var(--yobb-accent, #8149F4)) !important;
}

.yobb-employer-job-actions .yobb-btn:hover,
.yobb-employer-jobs-empty .yobb-btn:hover,
.yobb-employer-job-delete-form .yobb-btn:hover {
  transform: translateY(var(--yobb-button-hover-lift, -1px));
}

/* Status badge bridge */
.yobb-job-status-pill.yobb-badge {
  display: inline-flex;
  min-height: var(--yobb-badge-height, 28px);
  align-items: center;
  justify-content: center;
  padding: var(--yobb-badge-padding-y, 5px) var(--yobb-badge-padding-x, 10px);
  border-radius: var(--yobb-badge-radius, 999px);
  font-family: var(--yobb-font-ui, var(--yobb-font-heading));
  font-size: var(--yobb-badge-font-size, 12px);
  font-weight: 600;
  line-height: 1;
}

/* Bunny player fallback: näyttää Bunnyn oman poster/thumbnailin */
.yobb-employer-job-thumb-bunny-player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--yobb-text, #053D1D);
  pointer-events: none;
}

/* Elementor primary button bridge samalla sivulla */
.yobb-btn-primary .elementor-button,
.elementor-button.yobb-btn-primary {
  display: inline-flex !important;
  min-height: var(--yobb-button-height-desktop, 46px) !important;
  align-items: center !important;
  justify-content: center !important;

  padding:
    var(--yobb-button-padding-y-desktop, 10px)
    var(--yobb-button-padding-x-desktop, 20px) !important;

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

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

  font-family: var(--yobb-button-font-family, var(--yobb-font-heading)) !important;
  font-size: var(--yobb-button-font-size, 15px) !important;
  font-weight: var(--yobb-button-font-weight, 600) !important;
  line-height: 1.2 !important;
}

.yobb-btn-primary .elementor-button:hover,
.elementor-button.yobb-btn-primary:hover {
  border-color: var(--yobb-button-primary-hover-border, var(--yobb-primary)) !important;
  background: var(--yobb-button-primary-hover-background, transparent) !important;
  color: var(--yobb-button-primary-hover-text, var(--yobb-primary)) !important;
}

.yobb-btn-primary .elementor-button :is(
  .elementor-button-text,
  .elementor-button-icon,
  svg
),
.elementor-button.yobb-btn-primary :is(
  .elementor-button-text,
  .elementor-button-icon,
  svg
) {
  color: inherit !important;
  fill: currentColor !important;
}

@media (max-width: 1024px) {
  .yobb-employer-job-list-card.yobb-card,
  .worky-employer-job-list-card.yobb-card {
    padding: var(--yobb-card-padding-tablet, 18px);
  }
}

@media (max-width: 640px) {
  .yobb-employer-job-list-card.yobb-card,
  .worky-employer-job-list-card.yobb-card {
    padding: var(--yobb-card-padding-mobile, 14px);
  }
}

/* ==================================================
   EMPLOYER OVERVIEW V3 – GLOBAL COMPONENT BRIDGE

   Shortcode: [yobb_employer_overview]

   PHP käyttää nyt:
   - .yobb-card + .yobb-card--accent overview-kortille
   - .yobb-card + .yobb-card--flat tilastokorteille
   - .yobb-btn + .yobb-btn--primary kirjautumisnapille

   Tämä osio myös toimii fallbackina, jos erillinen
   YOBB Global Component Styles ei jostain syystä lataudu.
================================================== */

.yobb-employer-overview-hero.yobb-card,
.worky-employer-overview-hero.yobb-card {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto 20px;
  padding: var(--yobb-card-padding-desktop, 20px);

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

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

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

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

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

  box-sizing: border-box;
}

.yobb-employer-overview-text,
.worky-employer-overview-text {
  max-width: 760px;
  margin: 0 0 var(--yobb-space-lg, 24px);
}

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

.yobb-employer-overview-text h1,
.worky-employer-overview-text h1 {
  margin: 0 0 8px;
  color: var(--yobb-text, #053D1D);
  font-family: var(--yobb-font-heading), sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.08;
}

.yobb-employer-overview-description,
.yobb-employer-overview-text > p:last-child,
.worky-employer-overview-text > p:last-child {
  max-width: 720px;
  margin: 0;
  color:
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 64%,
      transparent
    );
  font-family: var(--yobb-font-body), sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.yobb-employer-overview-period {
  margin: 0 0 var(--yobb-space-lg, 24px);
  padding: 14px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 18%,
      transparent
    );
  border-radius: max(12px, calc(var(--yobb-card-radius, 14px) - 1px));
  background:
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 3%,
      var(--yobb-secondary, #fff)
    );
}

.yobb-employer-overview-period-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--yobb-text, #053D1D);
  font-family: var(--yobb-font-body), sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.yobb-employer-overview-period-heading strong {
  font-weight: 600;
  opacity: 0.68;
}

.yobb-employer-overview-period-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.yobb-employer-overview-period-option,
.yobb-employer-overview-period-option:visited {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--yobb-primary, #43C14D);
  border-radius: var(--yobb-button-radius, 12px);
  background: var(--yobb-secondary, #fff);
  color: var(--yobb-primary, #43C14D) !important;
  font-family: var(--yobb-font-heading), sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.yobb-employer-overview-period-option:hover,
.yobb-employer-overview-period-option:focus-visible,
.yobb-employer-overview-period-option.is-active {
  background: var(--yobb-primary, #43C14D);
  color: var(--yobb-button-primary-text, #fff) !important;
}

.yobb-employer-overview-period-option:hover {
  transform: translateY(-1px);
}

.yobb-employer-overview-period-option:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 24%,
      transparent
    );
  outline-offset: 2px;
}

.yobb-employer-overview-custom-period {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 12%,
      transparent
    );
  border-radius: 12px;
  background: var(--yobb-secondary, #fff);
}

.yobb-employer-overview-custom-period[hidden] {
  display: none !important;
}

.yobb-employer-overview-custom-period.is-active {
  border-color: var(--yobb-primary, #43C14D);
}

.yobb-employer-overview-custom-title {
  align-self: center;
  margin-right: 4px;
  color: var(--yobb-text, #053D1D);
  font-family: var(--yobb-font-heading), sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.yobb-employer-overview-custom-period label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--yobb-text, #053D1D);
  font-family: var(--yobb-font-body), sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.yobb-employer-overview-custom-period input[type="date"] {
  width: auto;
  min-width: 150px;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 24%,
      transparent
    );
  border-radius: 10px;
  background: var(--yobb-secondary, #fff);
  color: var(--yobb-text, #053D1D);
  font: inherit;
  box-sizing: border-box;
}

.yobb-employer-overview-custom-period .yobb-btn {
  min-height: 42px;
  margin: 0;
  padding: 8px 16px;
}

.yobb-employer-overview-period-note {
  margin: 9px 2px 0;
  color:
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 62%,
      transparent
    );
  font-family: var(--yobb-font-body), sans-serif;
  font-size: 12px;
  line-height: 1.45;
}

.yobb-employer-overview-period-status {
  margin: 7px 2px 0;
  color: var(--yobb-primary, #43C14D);
  font-family: var(--yobb-font-body), sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.yobb-employer-overview-period-status:empty {
  display: none;
}

.yobb-employer-overview-period-status.is-error {
  color: var(--yobb-danger, #b42318);
}

.yobb-employer-overview-hero.is-loading
  .yobb-employer-overview-stats {
  opacity: 0.58;
}

.yobb-employer-overview-stats {
  transition: opacity 140ms ease;
}

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

.yobb-employer-stat-card.yobb-card,
.worky-employer-stat-card.yobb-card,
.yobb-employer-stat-card,
.worky-employer-stat-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 118px;
  padding: 16px;

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

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

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

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

.yobb-employer-stat-card .yobb-employer-stat-label,
.worky-employer-stat-card .worky-employer-stat-label,
.yobb-employer-stat-card > span:not(.yobb-employer-stat-arrow),
.worky-employer-stat-card > span:not(.worky-employer-stat-arrow) {
  display: block;
  margin: 0 0 12px;
  padding-right: 28px;
  color:
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 68%,
      transparent
    );
  font-family: var(--yobb-font-body), sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.yobb-employer-stat-card strong,
.worky-employer-stat-card strong {
  display: block;
  margin: 0;
  color: var(--yobb-text, #053D1D);
  font-family: var(--yobb-font-heading), sans-serif;
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 600;
  line-height: 1;
}

.yobb-employer-stat-link,
.yobb-employer-stat-link:visited {
  color: var(--yobb-text, #053D1D) !important;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.yobb-employer-stat-link:hover {
  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 42%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 9%,
      var(--yobb-secondary, #fff)
    );

  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--yobb-text, #053D1D) 8%,
      transparent
    );
}

.yobb-employer-stat-link:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--yobb-primary, #43C14D) 24%,
      transparent
    );
  outline-offset: 2px;
}

.yobb-employer-stat-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--yobb-primary, #43C14D);
  font-family: var(--yobb-font-heading), sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.8;
  transition: transform 160ms ease, opacity 160ms ease;
}

.yobb-employer-stat-link:hover .yobb-employer-stat-arrow,
.yobb-employer-stat-link:focus-visible .yobb-employer-stat-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* Login / empty fallback käyttää samaa global-korttia. */
.yobb-employer-overview-login .yobb-employer-empty.yobb-card {
  padding: var(--yobb-card-padding-desktop, 20px);
  border:
    var(--yobb-card-border-width, 1px)
    solid
    var(--yobb-border-color, rgba(5, 61, 29, 0.12));
  border-left:
    var(--yobb-card-accent-width, 4px)
    solid
    var(--yobb-primary, #43C14D);
  border-radius: var(--yobb-card-radius, 14px);
  background: var(--yobb-card-background, var(--yobb-secondary, #fff));
}

@media (max-width: 1180px) {
  .yobb-employer-overview-stats,
  .worky-employer-overview-stats,
  .yobb-employer-stats-grid,
  .worky-employer-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .yobb-employer-overview-stats,
  .worky-employer-overview-stats,
  .yobb-employer-stats-grid,
  .worky-employer-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yobb-employer-overview-hero.yobb-card,
  .worky-employer-overview-hero.yobb-card,
  .yobb-employer-overview-login .yobb-employer-empty.yobb-card {
    padding: var(--yobb-card-padding-tablet, 18px);
  }
}

@media (max-width: 560px) {
  .yobb-employer-overview-hero.yobb-card,
  .worky-employer-overview-hero.yobb-card,
  .yobb-employer-overview-login .yobb-employer-empty.yobb-card {
    padding: var(--yobb-card-padding-mobile, 14px);
  }

  .yobb-employer-overview-text,
  .worky-employer-overview-text {
    margin-bottom: var(--yobb-space-md, 16px);
  }

  .yobb-employer-overview-period {
    margin-bottom: var(--yobb-space-md, 16px);
    padding: 12px;
  }

  .yobb-employer-overview-period-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .yobb-employer-overview-period-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yobb-employer-overview-period-option {
    width: 100%;
    padding-inline: 8px;
    text-align: center;
  }

  .yobb-employer-overview-custom-period {
    display: grid;
    grid-template-columns: 1fr;
  }

  .yobb-employer-overview-custom-period input[type="date"],
  .yobb-employer-overview-custom-period .yobb-btn {
    width: 100%;
  }

  .yobb-employer-overview-stats,
  .worky-employer-overview-stats,
  .yobb-employer-stats-grid,
  .worky-employer-stats-grid {
    grid-template-columns: 1fr;
  }

  .yobb-employer-stat-card.yobb-card,
  .worky-employer-stat-card.yobb-card,
  .yobb-employer-stat-card,
  .worky-employer-stat-card {
    min-height: 104px;
    padding: 14px;
  }
}


/* ==================================================
   TYÖNHAUN PÄÄTTÄMISEN MODAALI
================================================== */

.yobb-job-close-dialog {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--yobb-border-color, rgba(5, 61, 29, 0.12));
  border-radius: var(--yobb-card-radius, 14px);
  background: var(--yobb-card-background, #fff);
  color: var(--yobb-text, #053D1D);
  box-shadow: 0 24px 70px rgba(5, 61, 29, 0.24);
}

.yobb-job-close-dialog::backdrop {
  background: rgba(5, 31, 18, 0.58);
  backdrop-filter: blur(3px);
}

.yobb-job-close-form {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2.5vw, 22px);
}

.yobb-job-close-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--yobb-space-md, 16px);
}

.yobb-job-close-dialog__head h2 {
  margin: 0 0 5px;
  color: var(--yobb-text, #053D1D);
  font-family: var(--yobb-font-heading), sans-serif;
  font-size: clamp(27px, 4vw, 34px);
  line-height: 1.05;
}

.yobb-job-close-dialog__head p:last-child {
  margin: 0;
  color: var(--yobb-muted, #66806f);
}

.yobb-job-close-dialog__head p strong {
  color: var(--yobb-text, #053D1D);
}

.yobb-job-close-dialog__x {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--yobb-border-color, rgba(5, 61, 29, 0.12));
  border-radius: 50%;
  background: color-mix(in srgb, var(--yobb-primary, #43C14D) 6%, #fff);
  color: var(--yobb-text, #053D1D);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.yobb-job-close-dialog__x:hover {
  border-color: var(--yobb-primary, #43C14D);
  background: var(--yobb-primary, #43C14D);
  color: #fff;
}

.yobb-job-close-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.yobb-job-close-step legend {
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: var(--yobb-text, #053D1D);
  font-family: var(--yobb-font-heading), sans-serif;
  font-size: 19px;
  font-weight: 600;
}

.yobb-job-close-step__help {
  margin: -2px 0 9px;
  color: var(--yobb-muted, #66806f);
  font-size: 14px;
}

.yobb-job-close-choices,
.yobb-job-close-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--yobb-space-sm, 10px);
}

.yobb-job-close-sources {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yobb-job-close-choice {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.yobb-job-close-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.yobb-job-close-choice > span {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 2px solid var(--yobb-border-color, rgba(5, 61, 29, 0.12));
  border-radius: max(10px, calc(var(--yobb-card-radius, 14px) - 2px));
  background: color-mix(in srgb, var(--yobb-primary, #43C14D) 3%, #fff);
  color: var(--yobb-text, #053D1D);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.yobb-job-close-choice > span strong {
  font-family: var(--yobb-font-ui), sans-serif;
  font-size: 14px;
  line-height: 1.25;
}

.yobb-job-close-choice > span small {
  color: var(--yobb-muted, #66806f);
  font-size: 11px;
  line-height: 1.4;
}

.yobb-job-close-choice:hover > span {
  border-color: color-mix(in srgb, var(--yobb-primary, #43C14D) 65%, transparent);
}

.yobb-job-close-choice > input:checked + span {
  border-color: var(--yobb-primary, #43C14D);
  background: color-mix(in srgb, var(--yobb-primary, #43C14D) 10%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yobb-primary, #43C14D) 15%, transparent);
}

.yobb-job-close-choice > input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--yobb-primary, #43C14D) 28%, transparent);
  outline-offset: 2px;
}

.yobb-job-close-warning {
  margin: 0;
}

.yobb-job-close-warning p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.yobb-job-close-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--yobb-space-sm, 10px);
  padding-top: var(--yobb-space-xs, 6px);
}

@media (max-width: 700px) {
  .yobb-job-close-dialog {
    width: min(100% - 20px, 720px);
    max-height: calc(100dvh - 20px);
  }

  .yobb-job-close-form {
    gap: var(--yobb-space-md, 16px);
    padding: 18px 14px;
  }

  .yobb-job-close-choices,
  .yobb-job-close-sources {
    grid-template-columns: 1fr;
  }

  .yobb-job-close-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .yobb-job-close-dialog__actions .yobb-btn {
    width: 100%;
  }
}