/* ============================================================
   iHRMS - Fresh jobs board (/fresh-jobs)
   Loaded after style.css and built entirely on its tokens, so the
   board and the marketing site cannot drift apart visually.
   ============================================================ */

.jobs-page { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }

/* ---------- Header ---------- */
.jobs-head { max-width: 62ch; }
.jobs-head .lede { margin-top: 1rem; }
.jobs-window {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted-2);
  margin-top: 1.25rem;
  line-height: 1.9;
}

/* ---------- Summary panels ---------- */
.jobs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem;
  background: var(--surface);
}
.stat-card h2 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Bars are drawn in CSS from server-rendered widths: no chart library, so
   the board stays a single request and renders before any script runs. */
.bar { margin-bottom: .7rem; }
.bar:last-child { margin-bottom: 0; }
.bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .82rem;
  margin-bottom: .3rem;
}
.bar-label span:first-child {
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-label .count { font-family: var(--mono); color: var(--ink); flex-shrink: 0; }
.bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-3);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.stat-empty { font-size: .86rem; color: var(--muted-2); }

/* ---------- Filters ---------- */
.jobs-filters {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--bg-2);
}
.filter-row + .filter-row { margin-top: 1rem; }
.filter-legend {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .6rem;
}
.jobs-search {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease);
}
.jobs-search::placeholder { color: var(--muted-2); }
.jobs-search:focus { outline: none; border-color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-3);
  font-size: .84rem;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip .count {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
}
.chip[aria-pressed="true"] .count { color: rgba(255,255,255,.7); }

/* ---------- Results ---------- */
.jobs-count {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.job-list { display: grid; gap: .75rem; }
.job-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.5rem;
  transition: border-color var(--t-fast) var(--ease);
}
.job-card:hover { border-color: var(--line-2); }
.job-main { flex: 1 1 460px; min-width: 0; }
.job-title {
  font-size: 1.02rem;
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .4rem;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  font-size: .84rem;
  color: var(--muted);
}
.job-meta .company { color: var(--ink-3); font-weight: 500; }
.job-posted { font-family: var(--mono); font-size: .74rem; color: var(--muted-2); }
.job-apply { flex-shrink: 0; }

/* The hidden attribute has to win over the display these elements set for
   themselves. The browser hides [hidden] from its own stylesheet, and an
   author rule beats the user agent whatever the specificity - so `display:flex`
   on a card, and `inline-flex` on a chip, quietly cancelled every filter: the
   count fell to zero and the "no matches" line appeared while all 1,311 cards
   stayed on screen. */
.job-card[hidden],
.chip[hidden] { display: none; }

.jobs-empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 640px) {
  .job-card { align-items: flex-start; }
  .job-apply { width: 100%; }
  .job-apply .btn { width: 100%; }
}