/* ============================================================================
   EMPLOYER (SIMBA) UI — shared chrome + dashboard.

   REBUILT 2026-09-10 to the Batch-2 "Simba Employer" bundle. Every number in
   the chrome block below was read off that artboard's own computed styles at
   1512 (header 72+1, wrap 1280/32 => a 1216 content column, nav pills 38/14/
   999, right cluster gap 6, company pill 40 tall with a 30x30 r8 tile), not
   eyeballed and not taken from the token sheet.

   PALETTE — NOT FORKED. The Batch-2 bundle ships the same design system as
   Batch 3, and tokens.css already carries it as the additive --kj-b3-* /
   --kj-coral-* / --kj-gold-* / --kj-violet block (added 2026-09-09, values
   verified identical to this bundle's :root). So the employer roles below are
   ALIASES onto those ramps. There is no second palette, and tokens.css — which
   the candidate area also loads — is untouched.

   TYPEFACE. The bundle's body face is Mulish, display face Plus Jakarta Sans.
   UPDATE 2026-09-11: Mulish is now self-hosted (new-ui/fonts/mulish-*.woff2,
   extracted from the bundles' own embedded font data — see tokens.css) and
   applied via --kj-font-mulish on `body:has(.kj-emp-hdr)` below; heading/
   button rules keep their explicit --kj-font (PJS) declarations, matching
   the bundle's own body/display pairing.

   CONTAINER — was 1380 (=> 1332 content + 2*24) from the batch-1/2 Figma
   frames. The Batch-2 bundle hard-codes `max-width:1280px; padding:0 32px` on
   every artboard, giving 1216. box-sizing is border-box globally here, so the
   container variable carries its own padding.
   ========================================================================== */

:root {
  /* ---- layout ---- */
  --kj-emp-container: 1280px;          /* 1216 content + 2*32 gutter */
  --kj-emp-container-narrow: 1080px;   /* 1016 content — Credits / Contact / company wizard */
  --kj-emp-gutter: 32px;
  --kj-emp-gap: 24px;                  /* legacy card gutter (press grid) */
  --kj-emp-nav-h: 72px;                /* + 1px hairline = 73 */
  --kj-emp-subnav-h: 46px;             /* + 1px hairline = 47 */
  --kj-emp-chrome-h: 73px;             /* header only; pages with a sub-nav add 47 */

  /* ---- NAV FIT — 2026-10-11: the three dials that lived here (--kj-emp-navpad / -navgap / -hdrgap) are
     gone; the 10-11 root's own values plus the D16 fit rule live in the chrome block below ("tiers").
     --kj-emp-gutter is the root's [data-wrap] padding: 32 down to 760, 16 at <= 759 (it was 20 at
     <= 1099, a squeeze for the old scrolling nav). */

  /* ---- roles: aliases onto the Batch-3 ramps already in tokens.css ---- */
  --kj-emp-ink:        var(--kj-b3-title);      /* #041E42 */
  --kj-emp-body:       var(--kj-b3-body);       /* #313C53 */
  --kj-emp-muted:      var(--kj-b3-muted);      /* #6B7890 */
  --kj-emp-faint:      var(--kj-b3-faint);      /* #9BA7BC */
  --kj-emp-line:       var(--kj-b3-stroke);     /* #E2E7EF */
  --kj-emp-line-2:     var(--kj-b3-stroke-2);   /* #CBD3E0 */
  --kj-emp-page:       var(--kj-b3-page);       /* #F6F8FB */
  --kj-emp-sunken:     var(--kj-b3-sunken);     /* #EEF1F6 */
  --kj-emp-card:       #FFFFFF;
  --kj-emp-accent:     var(--kj-coral-500);     /* #FE616C */
  --kj-emp-accent-hov: var(--kj-coral-600);     /* #EE4753 */
  --kj-emp-accent-ink: var(--kj-coral-700);     /* #CE3340 */
  --kj-emp-accent-soft:var(--kj-coral-50);      /* #FFF1EF */
  --kj-emp-grad:       var(--kj-b3-gradient);   /* 120deg gold -> coral */
  --kj-emp-simba:      var(--kj-violet);        /* #6941C6 */
  --kj-emp-ok:         var(--kj-b3-success);
  --kj-emp-ok-bg:      var(--kj-b3-success-bg);

  /* --kj-shadow-xs — the ONE shadow the b3 block in tokens.css forgot.
     tokens.css:154-158 redefined sm/md/lg/xl onto the navy-tinted b2/b3 ramp
     (rgba(4,30,66,...)) but left xs at its batch-1 value
     `0 1px 2px rgba(16,24,40,.05)` on tokens.css:54, so a b2 card's own
     shadow-xs did not match the sm/md/lg/xl above it.
     Re-pointed here, not there, for the same reason this whole block exists
     (see the PALETTE note at the top of the file): tokens.css is loaded by all
     60 pages and --kj-shadow-xs is read by 36 sheets, the majority of them
     candidate-area, so its value cannot be verified from inside this batch.
     This sheet is linked ONLY by the 16 employer pages (verified), so the
     override lands exactly on the surfaces this batch owns.
     FOLLOW-UP for whoever owns the shared sheet: tokens.css:54 should become
     `0 1px 2px rgba(4, 30, 66, 0.06)` and this alias should then be deleted. */
  --kj-shadow-xs: 0 1px 2px rgba(4, 30, 66, 0.06);

  /* radii the bundle uses that the batch-1/2 sheet has no name for */
  --kj-emp-r-18: 18px;
  --kj-emp-r-20: 20px;
  --kj-emp-r-22: 22px;
  --kj-emp-r-24: 24px;
  --kj-emp-r-28: 28px;
}

/* The employer page ground is #F6F8FB, not the site-wide #F4F6F9. Scoped with
   :has() so base.css (shared with the candidate area) stays untouched — the
   same technique base.css:934 already uses.

   BASE LINE-HEIGHT (measured 2026-09-10, both sides): the Batch-2 bundle's
   <body> computes `line-height: 24px` on 16px = 1.5, and EVERY descendant that
   does not declare its own inherits it. base.css:15 sets 1.26 site-wide, so
   stage measured 20.16px and every un-styled text box on all 16 employer pages
   was ~20% short — which shrinks each card and lifts everything below it
   (dashboard section h2 25.2 vs 30, its <em> 17.64 vs 21, the pipeline
   breadcrumb 16.38 vs 19.5 so the whole page began 3.1px high, the messages
   blank-state title 22.68 vs 27, ...). Restored here on the same :has() scope
   as the ground colour: base.css is shared with the candidate area and is
   owned by another batch, so it stays untouched and only the employer surface
   moves. Specificity (0,1,1) beats base.css's bare `body` (0,0,1). */
body:has(.kj-emp-hdr) {
  background: var(--kj-emp-page);
  color: var(--kj-emp-body);
  /* !important: several per-page employer stylesheets loaded after this one
     carry their own `body.kj-XXX { font-family: var(--kj-font...) }` at the
     same (0,1,1) specificity, predating Mulish being self-hosted (2026-09-11,
     see tokens.css) — without it, source order lets the last-loaded page CSS
     win back to Plus Jakarta Sans. Explicit heading/button rules elsewhere
     keep --kj-font (PJS) and are unaffected. */
  font-family: var(--kj-font-mulish) !important;
  line-height: 1.5;
}

/* ---- the page wrap (every employer page) ---- */
.kj-emp-wrap {
  max-width: var(--kj-emp-container);
  margin: 0 auto;
  padding: 0 var(--kj-emp-gutter);
}
.kj-emp-wrap--narrow { max-width: var(--kj-emp-container-narrow); }

/* ---- shared employer chrome (Batch 2 2026-10-11, w1-shell) ---------------
   Every number is the 10-11 root's own (root.x-dc.txt, measured headless off
   stage, 2026-10-11 — scratchpad wf-b2/w1-shell/meas/); the house tiers
   1099 / 759 stand in for the design's 1023 / 767 (D20). The fit rule D16 is
   the block at the end of this section. */
.kj-emp-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 254, 253, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kj-emp-line);
}
.kj-emp-hdr__in {
  max-width: var(--kj-emp-container);
  margin: 0 auto;
  padding: 0 var(--kj-emp-gutter);
  height: var(--kj-emp-nav-h);
  display: flex;
  align-items: center;
  gap: 20px;                               /* root: 20 (was 28) */
  min-width: 0;
}
.kj-emp-hdr__logo { flex: none; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.kj-emp-hdr__logo img { height: 30px; width: auto; display: block; }   /* the bundle's wordmark: 131.6 x 30 */

/* violet SIMBA badge — a raw literal in the bundle, tokenised as --kj-violet */
.kj-emp-badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 6px;
  background: var(--kj-emp-simba);
  color: #fff;
  font-weight: 800; font-size: 11px; letter-spacing: .08em;
}

/* the nav: a hidden-scrollbar scroller (padding 8 6 / margin -8 0 so the pills' hover never clips) */
.kj-emp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 8px 6px;
  margin: -8px 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.kj-emp-nav::-webkit-scrollbar { display: none; }
.kj-emp-nav a {
  position: relative;
  flex: none;
  height: 38px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  color: var(--kj-emp-muted);
  text-decoration: none;
  transition: background .2s;
}
.kj-emp-nav a:hover { background: var(--kj-emp-page); color: var(--kj-emp-ink); text-decoration: none; }   /* root: --surface-muted = #F6F8FB */
.kj-emp-nav a.is-active { background: var(--kj-emp-accent-soft); color: var(--kj-emp-accent-ink); }
/* the root's style-hover is !important, so a hovered CURRENT pill turns grey + navy too (same specificity as is-active: needs its own rule) */
.kj-emp-nav a.is-active:hover { background: var(--kj-emp-page); color: var(--kj-emp-ink); }
/* FALAS (company profile, every plan — D18) and E RE (Employer Branding, until KJ_EMP_BRANDING_NEW_UNTIL) */
.kj-emp-npill {
  margin-left: 6px; flex: none;
  box-sizing: border-box;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.kj-emp-npill--free { height: 18px; padding: 0 7px; background: var(--kj-b3-success-bg); color: var(--kj-b3-success); border: 1px solid rgba(18, 183, 106, .25); font-size: 10px; }
.kj-emp-npill--new  { height: 17px; padding: 0 6px; background: var(--kj-b3-gradient); color: #fff; font-size: 9.5px; }

/* the right cluster: Mesazhet · Njoftimet · SQ|EN · user (· tablet SQ|EN · burger) */
.kj-emp-hdr__right { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.kj-emp-ico {
  position: relative;
  flex: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--kj-emp-line);
  border-radius: 50%;
  background: #fff;
  color: var(--kj-emp-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.kj-emp-ico:hover { background: var(--kj-emp-page); }
.kj-emp-ico svg { width: 20px; height: 20px; display: block; }
/* the count badge (D19: 9+) */
.kj-emp-ico__n {
  position: absolute; top: 4px; right: 4px;
  box-sizing: border-box;
  height: 17px; min-width: 17px; padding: 0 4px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--kj-emp-accent);
  color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}

/* SQ | EN — the navy segmented pill (the public chrome's .kj-nav__lang--seg values, b2-shell-5) */
.kj-emp-lang {
  display: inline-flex; align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--kj-emp-sunken);
  margin-left: 6px;
  flex: none;
}
.kj-emp-lang__s {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  height: 28px; min-width: 38px; padding: 0 11px;
  border-radius: 999px;
  font-weight: 800; font-size: 12px; letter-spacing: .02em; line-height: 1;
  color: var(--kj-emp-muted);
  background: transparent;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
a.kj-emp-lang__s:hover { text-decoration: none; }   /* the root's segments are buttons with no hover style: the idle one stays muted */
.kj-emp-lang__s.is-on { background: var(--kj-emp-ink); color: #fff; }
.kj-emp-lang--mob { display: none; margin-left: 4px; }

/* the user button + menu (b2-shell-6) */
.kj-emp-co { position: relative; flex: none; display: flex; align-items: center; }   /* no line box: 40 tall like the root's user DIV */
.kj-emp-co__btn {
  height: 40px; padding: 0 4px;
  border: 0; border-radius: 999px;
  background: transparent;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font: inherit;
}
.kj-emp-co__tile {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  object-fit: cover;
  /* the artboard fills this with the company's own brand colour; no column stores one, so navy */
  background: var(--kj-emp-ink);
  color: #fff;
  font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
/* D16 step 2: the company name never shows next to the employer nav (no real name fits at any width —
   SQ needs 684.2 of the 729.2 the nav gets with the name hidden) */
.kj-emp-co__n {
  display: none;
  font-weight: 700; font-size: 14px; color: var(--kj-emp-ink);
  line-height: normal;   /* the root's name sits in a <button> (UA line-height): an 18px line box, not the inherited 21 */
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kj-emp-co__btn svg { flex: none; width: 14px; height: 14px; color: var(--kj-emp-muted); }
.kj-emp-co__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 250px; padding: 6px;
  background: #fff;
  border: 1px solid var(--kj-emp-line);
  border-radius: 16px;
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  z-index: 60;
  animation: kjScaleIn .2s var(--kj-ease-out, ease-out) both;
}
.kj-emp-co__menu[hidden] { display: none; }
.kj-emp-co__head { padding: 10px 12px 8px; border-bottom: 1px solid var(--kj-emp-line); margin-bottom: 4px; }
.kj-emp-co__hn { font-weight: 800; font-size: 14px; color: var(--kj-emp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-emp-co__he { font-size: 12.5px; color: var(--kj-emp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-emp-co__menu > a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
  color: var(--kj-emp-ink);
  text-decoration: none;
}
.kj-emp-co__menu > a:hover { background: var(--kj-emp-page); color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-co__menu > a.is-muted { color: var(--kj-emp-muted); }
.kj-emp-co__menu > a.is-muted:hover { color: var(--kj-emp-ink); }   /* "Dilni": muted at rest, navy on #F6F8FB when hovered (the root) */
.kj-emp-co__sep { display: block; height: 1px; margin: 6px 4px; background: var(--kj-emp-line); }
/* D58: the real account switch (an account that is employer AND approved provider), in the slot of the
   prototype's demo toggle. The root draws a <button> (UA line-height: normal): stage's <a> inherited 1.5 and
   measured 236 x 50.5 against 236 x 46 — hence line-height: normal (integration 2026-10-13) */
.kj-emp-co__menu > a.kj-emp-co__switch {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
  background: var(--kj-emp-page);
  font-weight: 700; font-size: 12.5px; line-height: normal; color: var(--kj-emp-muted);
}
.kj-emp-co__sw-e { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kj-emp-faint); }
.kj-emp-co__switch svg { flex: none; width: 15px; height: 15px; }

/* burger — shown with the drawer at <= 1099 */
.kj-emp-burger {
  display: none;
  flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--kj-emp-ink);
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.kj-emp-burger svg { width: 24px; height: 24px; }

/* ---- the two header popovers (b2-shell-7 / -8, b2-messages-11) ---------- */
.kj-emp-pop[hidden] { display: none !important; }
.kj-emp-pop__bg { position: fixed; inset: 0; z-index: 55; }
.kj-emp-pop__card {
  position: fixed;
  top: 80px;
  width: min(400px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--kj-emp-line);
  border-radius: 18px;
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  z-index: 60;
  overflow: hidden;
  animation: kjScaleIn .2s var(--kj-ease-out, ease-out) both;
}
/* under its own button: the root's <= 1279 offsets, because the name is hidden at every width here (D16) and
   the cluster is the root's <= 1279 cluster; with the name shown (trainer mode >= 1280) the root's 1440 ones */
.kj-emp-pop--msg   .kj-emp-pop__card { right: max(16px, calc((100vw - 1280px) / 2 + 192px)); }
.kj-emp-pop--notif .kj-emp-pop__card { right: max(16px, calc((100vw - 1280px) / 2 + 146px)); }
@media (min-width: 1280px) {
  .kj-emp-hdr.is-trainer ~ .kj-emp-pop--msg   .kj-emp-pop__card { right: max(16px, calc((100vw - 1280px) / 2 + 288px)); }
  .kj-emp-hdr.is-trainer ~ .kj-emp-pop--notif .kj-emp-pop__card { right: max(16px, calc((100vw - 1280px) / 2 + 242px)); }
}
.kj-emp-pop__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--kj-emp-line); }
.kj-emp-pop__t { font-family: var(--kj-font); font-weight: 800; font-size: 15px; color: var(--kj-emp-ink); }
.kj-emp-pop__all { border: 0; background: transparent; padding: 0; color: var(--kj-emp-accent-hov); font-weight: 700; font-size: 12.5px; line-height: normal; cursor: pointer; font-family: inherit; }
.kj-emp-pop__all[hidden] { display: none; }
.kj-emp-pop__list { max-height: 380px; overflow-y: auto; padding: 6px 0; }
.kj-emp-pop__empty { padding: 30px; text-align: center; color: var(--kj-emp-muted); font-size: 14px; }
.kj-emp-pop__empty[hidden] { display: none; }
.kj-emp-pop__foot { display: block; padding: 12px 16px; border-top: 1px solid var(--kj-emp-line); text-align: center; font-weight: 700; font-size: 13px; color: var(--kj-emp-muted); text-decoration: none; }
.kj-emp-pop__foot:hover { background: var(--kj-emp-page); color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-pop__foot--cta { font-weight: 800; font-size: 13.5px; color: var(--kj-emp-accent-hov); }
.kj-emp-pop__foot--cta:hover { color: var(--kj-emp-accent-ink); }
/* messages rows */
.kj-emp-mrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-mrow:hover { background: var(--kj-emp-page); color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-mrow__av { width: 40px; height: 40px; border-radius: 50%; background: var(--kj-emp-accent-soft); color: var(--kj-emp-accent-ink); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kj-emp-mrow__b { flex: 1; min-width: 0; }
.kj-emp-mrow__l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kj-emp-mrow__n { font-size: 14px; color: var(--kj-emp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.kj-emp-mrow.is-unread .kj-emp-mrow__n { font-weight: 800; }
.kj-emp-mrow__w { font-size: 12px; color: var(--kj-emp-faint); flex: none; white-space: nowrap; }
.kj-emp-mrow__x { display: block; font-size: 13px; line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kj-emp-muted); font-weight: 400; }
.kj-emp-mrow.is-unread .kj-emp-mrow__x { color: var(--kj-emp-ink); font-weight: 600; }
.kj-emp-mrow__j { display: block; font-size: 12px; color: var(--kj-emp-faint); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-emp-mrow__c { flex: none; align-self: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--kj-emp-accent); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
/* notification chips + rows */
.kj-emp-pop__chips { display: flex; gap: 4px; padding: 10px 12px 0; flex-wrap: wrap; }
.kj-emp-chip { height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--kj-emp-line); background: #fff; color: var(--kj-emp-muted); font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.kj-emp-chip.is-on { border-color: var(--kj-emp-ink); background: var(--kj-emp-ink); color: #fff; }
.kj-emp-nrow { display: flex; gap: 12px; padding: 12px 16px; color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-nrow[hidden] { display: none; }
.kj-emp-nrow:hover { background: var(--kj-emp-page); color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-nrow__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--kj-emp-page); color: var(--kj-emp-muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kj-emp-nrow.is-unread .kj-emp-nrow__ic { color: var(--kj-emp-accent-hov); }
.kj-emp-nrow__ic svg { width: 18px; height: 18px; }
.kj-emp-nrow__b { flex: 1; min-width: 0; }
.kj-emp-nrow__x { display: block; font-size: 13.5px; line-height: 1.4; color: var(--kj-emp-ink); font-weight: 500; }
.kj-emp-nrow.is-unread .kj-emp-nrow__x { font-weight: 700; }
.kj-emp-nrow__w { display: block; font-size: 12px; color: var(--kj-emp-faint); margin-top: 2px; }
.kj-emp-nrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kj-emp-accent); margin-top: 6px; flex: none; }

/* ---- the drawer (<= 1099; b2-shell-9) ------------------------------------
   Siblings of <header>, so they are not trapped inside its z-index:50 stacking context. [hidden] is a UA rule
   at 0,1,0 — a class that sets display beats it, so both re-assert display:none. z 110 / 120 (the root's 70 / 71
   sit UNDER its own EPI FAB, z 86, which then covers "Dilni"). */
.kj-emp-drawer[hidden], .kj-emp-scrim[hidden] { display: none !important; }
.kj-emp-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(4, 30, 66, .45); animation: kjFade .25s both; }
.kj-emp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(340px, 88vw);
  background: #fff;
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  display: flex; flex-direction: column;
  animation: kjSlideLeft .3s var(--kj-ease-out, ease-out) both;
}
.kj-emp-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--kj-emp-line); }
.kj-emp-drawer__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kj-emp-drawer__tile { width: 36px; height: 36px; border-radius: 10px; background: var(--kj-emp-ink); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; object-fit: cover; }
.kj-emp-drawer__name { font-weight: 800; font-size: 15px; color: var(--kj-emp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-emp-drawer__x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--kj-emp-page); color: #000; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }   /* the root sets no colour on this <button>: the UA's black, as on "English" below */
.kj-emp-drawer__x svg { width: 20px; height: 20px; }
.kj-emp-drawer__nav { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.kj-emp-drawer__nav a { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 15px; color: var(--kj-emp-ink); text-decoration: none; }
/* hover = the root's token-sheet a:hover: an underline, nothing else (its rows carry their colours inline) */
.kj-emp-drawer__nav a:hover { text-decoration: underline; }
/* the current page: coral-700 on coral-50 — INVENTORY b2-shell-9 ("active #CE3340 + coral-50 bg"), the root's
   Branding row and the bar's current pill. The root's rule compares the route slug with the page name, so
   only Branding (and the dashboard's colour, without a background) come out that way there — a prototype
   slip, not copied (fix round 2026-10-12; it was navy on coral-50) */
.kj-emp-drawer__nav a.is-active { background: var(--kj-emp-accent-soft); color: var(--kj-emp-accent-ink); }
.kj-emp-dpill { flex: none; box-sizing: border-box; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; }
.kj-emp-dpill--free { background: var(--kj-b3-success-bg); color: var(--kj-b3-success); border: 1px solid rgba(18, 183, 106, .25); letter-spacing: .06em; }
.kj-emp-dpill--new  { background: var(--kj-b3-gradient); color: #fff; letter-spacing: .05em; animation: kjNewPulse 2.4s ease-in-out infinite; }
.kj-emp-drawer__foot { padding: 16px 20px 24px; border-top: 1px solid var(--kj-emp-line); display: flex; gap: 10px; }
.kj-emp-drawer__lang { flex: 1; height: 44px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--kj-emp-line); background: #fff; font-family: inherit; font-weight: 800; font-size: 13px; color: #000; cursor: pointer; }   /* the root's <button> keeps the UA padding (151 / 139 px halves) and colour */
.kj-emp-drawer__out { flex: 1; height: 44px; border-radius: 999px; border: 1px solid var(--kj-emp-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--kj-emp-muted); text-decoration: none; }
.kj-emp-drawer__out:hover { text-decoration: underline; }   /* the root: stays muted, underlined (token-sheet a:hover) */

/* ---- tiers (house breakpoints, D20) + the fit rule (D16) -----------------
   Measured nav needs (links + 2 gaps + 12 nav padding), name hidden — the nav gets content − 486.8:
     >= 1280  SQ 684.2 / EN 705.8 of 729.2            pills on, nothing clips
     1201-1279 without the pills (D16 step 3)          SQ 585.6 / EN 613.2 of >= 650.2
     <= 1200  13.5px / pad 9 (the root's tier)         4 items fit down to 1100 (EN 482.4 of 549.2)
     1100-1159 with Kandidatët (D16 step 4, added): gap 12 + pad 7 — EN 555.8 of 565.2 (it was 575.8 of 549.2)
   The root's ≤1200 fade mask is not drawn: by this rule nothing overflows, so it would only dim the last item. */
@media (max-width: 1279px) {
  .kj-emp-nav .kj-emp-npill { display: none; }
}
@media (max-width: 1200px) {
  .kj-emp-nav a { padding: 0 9px; font-size: 13.5px; }
}
@media (min-width: 1100px) and (max-width: 1159px) {
  .kj-emp-hdr--5 .kj-emp-hdr__in { gap: 12px; }
  .kj-emp-hdr--5 .kj-emp-nav a { padding: 0 7px; }
}
@media (min-width: 1280px) {
  .kj-emp-hdr.is-trainer .kj-emp-co__n { display: inline; }   /* trainer mode: two items, the provider's name fits */
}
@media (max-width: 1099px) {
  .kj-emp-nav, .kj-emp-lang--desk, .kj-emp-co__btn { display: none; }   /* the user DIV stays: its two 4px gaps are the root's */
  .kj-emp-lang--mob { display: inline-flex; }
  .kj-emp-burger { display: inline-flex; }
  .kj-emp-pop__card { right: 16px !important; }
}
@media (max-width: 759px) {
  .kj-emp-badge, .kj-emp-lang--mob { display: none; }
  .kj-emp-pop__card { left: 12px; right: 12px !important; width: auto; top: 76px; }
  .kj-emp-pop__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kj-emp-pop__chips::-webkit-scrollbar { display: none; }
}
@media (min-width: 1100px) {
  .kj-emp-drawer, .kj-emp-scrim { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-emp-nav a, .kj-emp-lang__s { transition: none; }
  .kj-emp-co__menu, .kj-emp-pop__card, .kj-emp-drawer, .kj-emp-scrim, .kj-emp-dpill--new { animation: none; }
}

/* ---- page shell ----------------------------------------------------------
   Bundle wrap padding is `32px 32px 40px` on the index screens (Dashboard,
   Jobs) and `24px 32px 40px` on the detail screens (Job, SkillsGap,
   FormBuilder) — the side padding lives on .kj-emp-wrap, the vertical on the
   main. --tight is the 24px variant. The phone keeps these top values: the
   10-11 root only narrows [data-wrap]'s SIDES at <= 767 (no employer wrap
   carries [data-sec]), so there is no <= 759 re-pad (it was 20px; file
   requests of w1-job-page + w1-jobs-list, 2026-10-11). */
.kj-emp-main { padding: 32px 0 40px; }
.kj-emp-main--tight { padding-top: 24px; }

/* Three artboards do NOT use either of those two values. Measured on the
   bundle's own wraps at 1512, 2026-09-10:
       SimbaDashboard / SimbaJobs   32px 32px 40px   (.kj-emp-main)
       SimbaJob / SimbaSkillsGap /
       SimbaFormBuilder / SimbaCompany 24px …        (--tight)
       SimbaRecruit                 36px 32px 40px
       SimbaMessages                28px 32px 40px
       SimbaBranding                28px 32px 40px (09-22; 32 on 10-11)
   --tight is shared by /job-applications and /company-profile, which are both
   correct at 24, so Messages cannot simply move it. Each one is selected by a
   marker its own page is the only one to render, which keeps the rule inside
   this sheet — recruitment.php and messages_company_new.php are owned by other
   passes and are not touched.
     .rec-hero      recruitment.php only          (0 hits elsewhere)
     .kj-emsg-shell messages_company_new.php only
   The branding marker rule is gone (w1-branding's FILE REQUEST, 2026-10-12): its
   page no longer renders the marker, zeroes the main padding and takes the 10-11
   SimbaBranding 32px from its own wrap. */
.kj-emp-main:has(.rec-hero) { padding-top: 36px; }
.kj-emp-main--tight:has(.kj-emsg-shell) { padding-top: 28px; }

/* page titles. The bundle's H1 is 32px/800, line-height 34.56 (1.08),
   letter-spacing -0.64px (-.02em), #041E42 — measured x143 y105 w381.5 h34.5
   on the dashboard artboard. Both the dashboard greeting (.kj-emp-h1) and the
   section titles (.kj-emp-title) resolve to the same scale in Batch 2; the old
   44/36 split came from the batch-1/2 Figma frames. 10-11 root: [data-h1] is
   32px down to its phone tier and 28px there, margins unchanged (no 1099
   step; w1-jobs-list FR (d), 2026-10-11). */
.kj-emp-h1,
.kj-emp-title {
  margin: 0 0 20px;
  font-family: var(--kj-font);            /* Root: every H1 is the display face (Plus Jakarta) — measured 2026-09-16, they rendered in Mulish */
  font-weight: 800;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--kj-emp-ink);
}
/* the 15px/#6B7890 subline the design puts under every H1 */
.kj-emp-lead { margin: -14px 0 20px; font-size: 15px; line-height: 1.5; color: var(--kj-emp-muted); }

/* ---- stat cards ----------------------------------------------------------
   Measured on the dashboard artboard: row 1216 x 86.3, four cards at x 143 /
   450.5 / 758 / 1065.5, each 293.5 x 86.3 => repeat(4, minmax(0,1fr)) with a
   14px gap; card flex/gap 14, #fff, 1px #E2E7EF, r18, padding 16px 18px,
   shadow-xs; 44px coral-50 icon disc; label 13.5px muted; value 20px/800
   tabular-nums. */
.kj-emp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.kj-emp-stat {
  min-height: 86px;
  background: var(--kj-emp-card);
  border: 1px solid var(--kj-emp-line);
  border-radius: var(--kj-emp-r-18);
  box-shadow: var(--kj-shadow-xs);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.kj-emp-stat__ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--kj-emp-accent-soft);
  color: var(--kj-emp-accent-hov);
  display: flex; align-items: center; justify-content: center;
}
.kj-emp-stat__ico svg { width: 20px; height: 20px; }
/* Measured on the bundle's own stat card: label 13.5px/400 line-height 20.25
   (1.5), value 20px/800 line-height 30 (1.5) with margin-top 2, so the text
   block is 52.3px inside the 86px card. The 1.35 / 1.2 shipped here made it
   42.4px and pulled the label 4.9px down off the design's baseline. */
.kj-emp-stat__l { display: block; font-size: 13.5px; color: var(--kj-emp-muted); line-height: 1.5; }   /* artboard: 13.5/20.25 (body 1.5) */
.kj-emp-stat__v {
  margin-top: 2px;
  font-weight: 800; font-size: 20px; letter-spacing: -.01em;
  color: var(--kj-emp-ink); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ---- section heading ----------------------------------------------------- */
.kj-emp-sech {
  margin: 0 0 12px;
  font-family: var(--kj-font);            /* artboard: display face (Plus Jakarta) */
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--kj-emp-ink);
}
/* The bundle's sub-clause span is 14px/400 line-height 21, letter-spacing
   NORMAL — it does not inherit the heading's -.01em tracking. */
/* artboard: title + subtitle sit on one baseline row, gap 8, subtitle in the
   body face (Mulish 14/21) — not the display face the h2 uses */
.kj-emp-sech { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kj-emp-sech em { font-style: normal; font-family: var(--kj-font-mulish); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: normal; color: var(--kj-emp-muted); }

/* ---- ads table -----------------------------------------------------------
   Bundle: the table sits in a card (1px #E2E7EF, r20, shadow-sm); head row
   44.5px on #FFF6F5 at 13px/600 #6B7890 padded 12/20; body rows 75.5px padded
   14/20 with a 1px #E2E7EF rule; numerals 18px/800 tabular-nums in three
   colours (#041E42 / coral-600 / gold-text). */
.kj-emp-card {
  background: var(--kj-emp-card);
  border: 1px solid var(--kj-emp-line);
  border-radius: var(--kj-emp-r-20);
  box-shadow: var(--kj-shadow-sm);
  overflow: hidden;
}
.kj-emp-tbl { width: 100%; border-collapse: collapse; }
.kj-emp-tbl thead th {
  background: #FFF6F5;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--kj-emp-muted);
  padding: 12px 20px;
  white-space: nowrap;
  border-bottom: 1px solid var(--kj-emp-line);
}
.kj-emp-tbl thead th.num,
.kj-emp-tbl tbody td.num { text-align: center; }
.kj-emp-tbl tbody td {
  padding: 14px 20px;
  border-top: 1px solid var(--kj-emp-line);
  vertical-align: middle;
}
.kj-emp-tbl tbody tr:first-child td { border-top: 0; }
.kj-emp-tbl tbody tr:hover td { background: var(--kj-emp-page); }
.kj-emp-job { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kj-emp-job__t { font-weight: 800; font-size: 15px; color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-job__t:hover { color: var(--kj-emp-accent-hov); }
.kj-emp-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.kj-emp-pill--on  { background: var(--kj-emp-ok-bg); color: var(--kj-emp-ok); }
.kj-emp-pill--off { background: var(--kj-emp-sunken); color: var(--kj-emp-muted); }
.kj-emp-job__meta { margin-top: 6px; font-size: 12px; color: var(--kj-emp-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.kj-emp-job__meta strong { color: var(--kj-emp-body); font-weight: 700; }
.kj-emp-job__rem { color: var(--kj-emp-accent-hov); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.kj-emp-num  { font-family: var(--kj-font); font-weight: 800; font-size: 18px; line-height: 1.5; color: var(--kj-emp-ink); font-variant-numeric: tabular-nums; }   /* artboard: display face 18/27 */
.kj-emp-num--a { color: var(--kj-emp-accent-hov); }
.kj-emp-num--s { color: var(--kj-gold-text); }
.kj-emp-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.kj-emp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px;
  border: 1.5px solid var(--kj-emp-line-2); border-radius: 999px;
  background: var(--kj-emp-card); color: var(--kj-emp-ink);
  font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.kj-emp-btn:hover { border-color: var(--kj-emp-ink); color: var(--kj-emp-ink); }
.kj-emp-kebab {
  width: 38px; height: 38px;
  border: 1.5px solid var(--kj-emp-line-2); border-radius: 50%;
  background: var(--kj-emp-card); color: var(--kj-emp-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kj-emp-kebab:hover { background: var(--kj-emp-page); }
.kj-emp-kebab svg { width: 16px; height: 16px; }
.kj-emp-empty { padding: 36px 22px; text-align: center; color: var(--kj-emp-muted); font-size: 14.5px; }

/* pagination footer */
.kj-emp-pag {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px; flex-wrap: wrap;
  font-size: 13px;
}
.kj-emp-pag__c { font-size: 13px; color: var(--kj-emp-muted); }
.kj-emp-pag__n { display: flex; align-items: center; gap: 6px; }
.kj-emp-pag__n a, .kj-emp-pag__n span {
  min-width: 30px; height: 30px; padding: 0 12px;
  border: 1px solid var(--kj-emp-line-2); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--kj-emp-body); text-decoration: none;
  background: var(--kj-emp-card);
}
.kj-emp-pag__n a:hover { border-color: var(--kj-emp-ink); }
.kj-emp-pag__n .is-cur { background: var(--kj-emp-accent-soft); border-color: var(--kj-coral-200); color: var(--kj-emp-accent-ink); }
.kj-emp-pag__n .is-off { color: var(--kj-emp-faint); opacity: .45; cursor: default; }

/* ---- matches CTA --------------------------------------------------------- */
.kj-emp-match {
  display: flex; align-items: center; gap: 24px;
  background: var(--kj-emp-card);
  border: 1px solid var(--kj-emp-line);
  border-radius: var(--kj-emp-r-20);
  box-shadow: var(--kj-shadow-xs);
  padding: 18px 22px; margin-top: 16px;
}
.kj-emp-match__b { flex: 1 1 auto; min-width: 0; }
.kj-emp-match__t { font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--kj-emp-ink); }
.kj-emp-match__p { margin-top: 6px; font-size: 14px; color: var(--kj-emp-muted); line-height: 1.5; }
.kj-emp-match__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--kj-emp-grad);
  box-shadow: var(--kj-shadow-accent);
  color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
}

/* ---- press releases ------------------------------------------------------ */
.kj-emp-press {
  background: var(--kj-emp-card);
  border: 1px solid var(--kj-emp-line);
  border-radius: var(--kj-emp-r-20);
  padding: 18px; margin-top: 26px; text-align: center;
  font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--kj-emp-ink);
}
.kj-emp-news {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: 14px;
}
.kj-emp-news__c {
  background: var(--kj-emp-card);
  border: 1px solid var(--kj-emp-line);
  border-radius: var(--kj-emp-r-20);
  box-shadow: var(--kj-shadow-xs);
  overflow: hidden; display: flex; flex-direction: column;
}
.kj-emp-news__img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--kj-emp-sunken); }
.kj-emp-news__b { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.kj-emp-news__m { display: flex; gap: 16px; font-size: 12px; color: var(--kj-emp-accent-hov); }
.kj-emp-news__m span { display: inline-flex; align-items: center; gap: 5px; }
.kj-emp-news__m svg { width: 13px; height: 13px; }
.kj-emp-news__t { margin: 10px 0 0; font-weight: 800; font-size: 16px; line-height: 1.35; color: var(--kj-emp-ink); }
.kj-emp-news__p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--kj-emp-muted); flex: 1 1 auto; }
.kj-emp-news__r { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--kj-emp-accent-hov); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================================
   SECTION SUB-NAV  — bundle: a full-bleed white strip at y=72, 46px + a 1px
   #E2E7EF hairline, inner 1280/32 with gap 4. Tabs are <a> at height 46,
   padding 0 12, 14px/700; inactive #6B7890 over a 2px transparent bottom
   border, active #041E42 over a 2px coral rule. The artboard draws no icons
   and employer-subnav.php no longer emits any, so the `a svg { display:none }`
   rule that used to hide them was removed with them.
   ========================================================================== */
.kj-emp-sub {
  background: var(--kj-emp-card);
  border-bottom: 1px solid var(--kj-emp-line);
  /* the artboard's sub-nav is INSIDE its sticky header; the partial renders
     right after the header, so it sticks under the 73px bar instead */
  position: sticky;
  top: var(--kj-emp-chrome-h);
  z-index: 49;
}
.kj-emp-sub__in {
  position: relative;   /* the offset parent of the tabs: employer-subnav.php scrolls the current one into view */
  max-width: var(--kj-emp-container);
  margin: 0 auto;
  padding: 0 var(--kj-emp-gutter);
  height: var(--kj-emp-subnav-h);
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.kj-emp-sub__in::-webkit-scrollbar { display: none; }
.kj-emp-sub a {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--kj-emp-muted);
  text-decoration: none;
  white-space: nowrap;
}
.kj-emp-sub a:hover { color: var(--kj-emp-ink); }
.kj-emp-sub a.is-active { color: var(--kj-emp-ink); border-bottom-color: var(--kj-emp-accent); }

/* toolbar row that carries the primary action and search */
.kj-emp-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.kj-emp-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--kj-emp-grad);
  box-shadow: var(--kj-shadow-accent);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.kj-emp-new svg { width: 18px; height: 18px; }
/* search: pill field with a leading glyph and a circular primary button */
.kj-emp-search {
  flex: 0 1 430px;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 5px 0 18px;
  border: 1px solid var(--kj-emp-line);
  border-radius: 999px;
  background: var(--kj-emp-card);
}
.kj-emp-search:focus-within { border-color: var(--kj-coral-300); }
.kj-emp-search__ico { flex: 0 0 auto; display: flex; color: var(--kj-emp-muted); }
.kj-emp-search__ico svg { width: 18px; height: 18px; }
.kj-emp-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--kj-emp-ink);
}
.kj-emp-search input::placeholder { color: var(--kj-emp-faint); }
.kj-emp-search button {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--kj-emp-grad);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.kj-emp-search button svg { width: 16px; height: 16px; }

/* form rows in the Application Forms list */
.kj-emp-frow__t { font-weight: 800; font-size: 15px; color: var(--kj-emp-ink); text-decoration: none; }
.kj-emp-frow__t:hover { color: var(--kj-emp-accent-hov); }
.kj-emp-frow__m { margin-top: 4px; font-size: 13px; color: var(--kj-emp-muted); display: flex; gap: 22px; flex-wrap: wrap; }
.kj-emp-frow__on { color: var(--kj-emp-ok); }
.kj-emp-frow__on b { color: var(--kj-emp-ink); font-weight: 700; }

/* All Jobs status filter (All / Active) + a pinned pill */
.kj-emp-filter {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px;
  background: var(--kj-emp-sunken);
  border-radius: 999px;
}
.kj-emp-filter a {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 13px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--kj-emp-muted);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.kj-emp-filter a.is-on { background: var(--kj-emp-card); color: var(--kj-emp-accent-hov); box-shadow: var(--kj-shadow-sm); }
.kj-emp-pill--pin { background: var(--kj-emp-accent-soft); color: var(--kj-emp-accent-ink); }

/* ============================================================================
   RESPONSIVE. Canonical breakpoint pair, same as every other redesigned page.
   Both bands are re-verified by the iframe overflow probe at 393 / 760 / 800 /
   900 / 1024 / 1099 / 1163 / 1200 / 1512 in BOTH languages.
   ========================================================================== */
@media (max-width: 1099px) {
  .kj-emp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kj-emp-news  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  :root { --kj-emp-gutter: 16px; }   /* the header bar stays 72 here too (root, b2-shell-10) */
  .kj-emp-h1, .kj-emp-title { font-size: 28px; }   /* [data-h1] at <= 767; margins and the 15px lead unchanged */
  .kj-emp-stats { grid-template-columns: 1fr; }   /* the 14px gap stays (SimbaDashboard, measured 14 at 390) */
  .kj-emp-news { grid-template-columns: 1fr; }
  .kj-emp-match { flex-direction: column; align-items: flex-start; }
  .kj-emp-match__cta { width: 100%; }
  .kj-emp-sub__in { height: 44px; gap: 2px; }
  .kj-emp-tools { justify-content: stretch; }
  .kj-emp-new, .kj-emp-search { width: 100%; flex: 1 1 100%; }

  /* the ads table becomes stacked cards — a 5-column table cannot survive 393px */
  .kj-emp-tbl, .kj-emp-tbl tbody, .kj-emp-tbl tr, .kj-emp-tbl td { display: block; width: 100%; }
  .kj-emp-tbl thead { display: none; }
  .kj-emp-tbl tbody tr { border-top: 1px solid var(--kj-emp-line); padding: 8px 0; }
  .kj-emp-tbl tbody td { border: 0; padding: 6px 16px; }
  .kj-emp-tbl tbody td.num { text-align: left; }
  .kj-emp-tbl tbody td.num::before {
    content: attr(data-l) " ";
    font-size: 13px; color: var(--kj-emp-muted); font-weight: 400;
  }
  .kj-emp-actions { justify-content: flex-start; }
  .kj-emp-pag { justify-content: center; }
}


/* ---- employer footer — footer_new.php 'emp' (Batch 2 2026-10-11, b2-shell-13; D22) -----------------
   The 10-11 root's compact navy bar: 157 tall at 1440 (528.5 before), 228 at 390. Row 2 also carries the
   legal links (D22 keeps them; the root dropped them). */
.kj-efoot { background: var(--kj-b3-navy); color: #fff; }
.kj-efoot__in { max-width: var(--kj-emp-container); margin: 0 auto; padding: 36px 32px 26px; }
.kj-efoot__r1 { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kj-efoot__logo { height: 28px; width: auto; display: block; }
.kj-efoot__links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.kj-efoot__links a { color: inherit; text-decoration: none; }   /* the root: color inherit inline */
.kj-efoot__links a:hover { text-decoration: underline; }        /* the root's token-sheet a:hover: an underline, no colour change */
.kj-efoot__r2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.kj-efoot__left { display: inline-flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.kj-efoot__legal { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.kj-efoot__legal a { color: inherit; text-decoration: none; }
.kj-efoot__legal a:hover { text-decoration: underline; }   /* as the row-1 links (D22 kept these; the root has none) */
.kj-efoot__iso { display: inline-flex; align-items: center; gap: 8px; }
.kj-efoot__iso img { height: 28px; width: auto; display: block; }
@media (max-width: 759px) {
  .kj-efoot__in { padding: 36px 16px 26px; }
  .kj-efoot__r1 { flex-direction: column; align-items: flex-start; }   /* the root's [data-stack-start] */
}