/* =====================================================================
   Innovative Labor Solutions — careers board + employee portal
   Extends styles.css. Uses the same tokens; light interior surfaces with
   dark header/hero/footer anchors.
   ===================================================================== */

/* ---------- shared bits ---------- */
.empty{
  background:var(--card); border:1px dashed var(--hairline-2); border-radius:var(--radius);
  padding:var(--space-8); color:var(--text-2); font-size:var(--text-sm); margin:0;
}
.form__note.is-error{ color:#A11212; font-weight:600 }
.hero--careers .hero__bg{ object-position:50% 42%; opacity:.85 }

/* ---------- filters ---------- */
.filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-4);
  padding:var(--space-5); margin-bottom:var(--space-8);
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius);
}
.filters__group{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; flex:1 1 220px }
.filters__label{
  font-family:'Anton','Archivo',sans-serif; text-transform:uppercase;
  font-size:var(--text-xs); letter-spacing:.11em; color:var(--text-3);
}
.filters__select{
  font-family:inherit; font-size:var(--text-sm); color:var(--text);
  background:#FBFBF9; border:1px solid var(--hairline-2); border-radius:var(--radius);
  padding:.7rem .8rem; width:100%; max-width:100%;
}
.filters__select:focus-visible{ outline:2px solid var(--amber-strong); outline-offset:1px }
.filters__count{
  margin:0 0 .35rem auto; font-size:var(--text-xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); font-family:'Anton','Archivo',sans-serif;
}

/* ---------- job cards ---------- */
.jobs{ display:grid; gap:var(--space-5) }
.job{
  background:var(--card); border:1px solid var(--hairline);
  border-left:3px solid var(--amber-strong); border-radius:var(--radius);
  padding:var(--space-6); min-width:0;
  box-shadow:0 1px 2px rgba(22,22,26,.05), 0 1px 12px rgba(22,22,26,.03);
}
@media (min-width:768px){ .job{ padding:var(--space-8) } }
.job__head{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:flex-start; justify-content:space-between }
.job__title{ margin:0 0 var(--space-2); max-width:26ch }
.job__meta{
  display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0;
  font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
}
.job__apply{ flex:0 0 auto }
.job__pay{ margin:var(--space-4) 0 0 }
.job__summary{ color:var(--text-2); margin:var(--space-4) 0 0; max-width:72ch }
.job__cols{ display:grid; gap:var(--space-6); margin-top:var(--space-6) }
@media (min-width:760px){ .job__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8) } }
.job__k{
  font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; font-weight:400;
  font-size:var(--text-xs); letter-spacing:.12em; color:var(--text-3);
  margin:0 0 var(--space-3);
}
.ticks li{
  position:relative; padding-left:1.6rem; margin-bottom:var(--space-3);
  font-size:var(--text-sm); color:var(--text-2); line-height:1.55;
}
.ticks li:last-child{ margin-bottom:0 }
.ticks li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:.85em; height:.85em; background:var(--amber);
  clip-path:polygon(14% 52%, 38% 76%, 88% 20%, 96% 30%, 40% 94%, 5% 60%);
}

/* ---------- application success ---------- */
.form--done{ padding:var(--space-8) }
.success__k{
  font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:var(--text-xs); color:var(--yellow-ink); background:var(--yellow);
  display:inline-block; padding:.3rem .6rem; border-radius:2px; margin:0 0 var(--space-4);
}
.success p{ color:var(--text-2) }
.success__next{ font-size:var(--text-sm); color:var(--text-3) }

/* =====================================================================
   PORTAL
   ===================================================================== */
.portal-shell{ min-height:60vh }

/* login screen keeps the dark industrial treatment */
.login{ position:relative; isolation:isolate; overflow:hidden; padding-block:var(--space-16) var(--space-20) }
@media (min-width:768px){ .login{ padding-block:var(--space-24) } }
.login__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.5 }
.login__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,11,12,.86), rgba(11,11,12,.97));
}
.login__inner{ display:grid; gap:var(--space-10); align-items:center }
@media (min-width:900px){ .login__inner{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--space-16) } }
.login__copy .h2{ max-width:20ch }
.login__copy .lede{ color:#B4B4BE }
.login__help{
  margin-top:var(--space-6); border-top:1px solid var(--d-line); padding-top:var(--space-5);
  font-size:var(--text-sm); color:#B4B4BE; max-width:56ch;
}
.login__card{
  background:var(--d-ink-3); border:1px solid var(--d-line); border-top:3px solid var(--yellow);
  border-radius:var(--radius); padding:var(--space-6);
}
@media (min-width:768px){ .login__card{ padding:var(--space-8) } }

/* dashboards — light, daylight-readable */
.dash{ padding-block:var(--space-10) var(--space-20); background:var(--surface) }
.dash__top{
  display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:flex-end; justify-content:space-between;
  padding-bottom:var(--space-6); border-bottom:1px solid var(--hairline); margin-bottom:var(--space-8);
}
.dash__who{ min-width:0 }
.dash__hello{ margin:0; font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; font-size:var(--text-h3); line-height:1.02 }
.dash__sub{ margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--text-3) }
.dash__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3) }
.role-chip{
  display:inline-block; font-family:'Anton','Archivo',sans-serif; text-transform:uppercase;
  font-size:var(--text-xs); letter-spacing:.1em; background:var(--yellow); color:var(--yellow-ink);
  padding:.22rem .5rem; border-radius:2px; margin-left:.5rem; vertical-align:.15em;
}

.tabs{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-8) }
.tab{
  font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--text-xs); padding:.6rem 1rem; border-radius:var(--radius); cursor:pointer;
  background:var(--card); border:1px solid var(--hairline); color:var(--text-2);
}
.tab:hover{ border-color:var(--hairline-2); color:var(--text) }
.tab[aria-selected="true"]{ background:var(--text); border-color:var(--text); color:#fff }

.panels{ display:grid; gap:var(--space-6) }
.panel{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:var(--space-6); min-width:0;
}
@media (min-width:768px){ .panel{ padding:var(--space-8) } }
.panel__head{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:baseline; justify-content:space-between; margin-bottom:var(--space-5) }
.panel__t{
  font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; font-weight:400;
  font-size:var(--text-h4); line-height:1.05; margin:0;
}
.panel__note{ margin:0; font-size:var(--text-xs); color:var(--text-3) }
.grid-cols{ display:grid; gap:var(--space-6) }
@media (min-width:940px){ .grid-cols--2{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) } }

/* shift list */
.shifts{ display:grid; gap:var(--space-3) }
.shift{
  display:grid; gap:var(--space-2) var(--space-5); align-items:baseline;
  grid-template-columns:minmax(0,1fr); padding:var(--space-4);
  border:1px solid var(--hairline); border-left:3px solid var(--amber-strong);
  border-radius:var(--radius); background:#FBFBF9;
}
@media (min-width:620px){ .shift{ grid-template-columns:9rem minmax(0,1fr) auto } }
.shift__d{ font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:var(--text-sm) }
.shift__loc{ font-size:var(--text-sm); color:var(--text-2); min-width:0; overflow-wrap:anywhere }
.shift__role{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-3) }
.shift__t{ font-size:var(--text-sm); color:var(--text); font-weight:600; white-space:nowrap }

/* announcements */
.ann{ border-top:1px solid var(--hairline) }
.ann li{ padding:var(--space-5) 0; border-bottom:1px solid var(--hairline) }
.ann__t{ font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; font-size:var(--text-sm); letter-spacing:.05em; margin:0 0 var(--space-2) }
.ann__b{ margin:0; font-size:var(--text-sm); color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere }
.ann__m{ display:block; margin-top:var(--space-2); font-size:var(--text-xs); color:var(--text-3) }

/* data tables in the portal */
.dtbl__scroll{ overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--radius) }
.dtbl{ width:100%; border-collapse:collapse; font-size:var(--text-sm); background:var(--card); min-width:640px }
.dtbl th,.dtbl td{ padding:var(--space-3) var(--space-4); text-align:left; vertical-align:top; line-height:1.5 }
.dtbl thead th{
  font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; font-weight:400;
  font-size:var(--text-xs); letter-spacing:.1em; color:var(--text-3);
  background:var(--card-2); border-bottom:2px solid var(--hairline-2); white-space:nowrap;
}
.dtbl tbody tr + tr td{ border-top:1px solid var(--hairline) }
.dtbl td{ color:var(--text-2) }
.dtbl td strong{ color:var(--text) }
.dtbl td.num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.dtbl .muted{ color:var(--text-3); font-size:var(--text-xs) }

/* status pipeline */
.pipe{ display:flex; flex-wrap:wrap; gap:.35rem }
.pipe button{
  font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; letter-spacing:.07em;
  font-size:.6875rem; padding:.3rem .5rem; border-radius:2px; cursor:pointer;
  border:1px solid var(--hairline-2); background:#FBFBF9; color:var(--text-2);
}
.pipe button:hover{ border-color:var(--text-3); color:var(--text) }
.pipe button[aria-pressed="true"]{ background:var(--text); border-color:var(--text); color:#fff }
.pipe button[aria-pressed="true"][data-status="hired"]{ background:#1B5E20; border-color:#1B5E20 }
.pipe button[aria-pressed="true"][data-status="passed"]{ background:#7A1F1F; border-color:#7A1F1F }
.stat-badge{
  display:inline-block; font-family:'Anton','Archivo',sans-serif; text-transform:uppercase;
  font-size:.6875rem; letter-spacing:.08em; padding:.2rem .45rem; border-radius:2px;
  background:var(--card-2); color:var(--text-2); border:1px solid var(--hairline-2);
}
.stat-badge--open{ background:var(--yellow); color:var(--yellow-ink); border-color:var(--yellow-2) }
.stat-badge--off{ background:#EDEDEA; color:#5F5F68 }

/* inline forms inside panels */
.pform{ display:grid; gap:var(--space-4) }
.pform .row{ display:grid; gap:var(--space-4) }
@media (min-width:560px){ .pform .row--2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:760px){ .pform .row--3{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.pform label{
  display:block; font-family:'Anton','Archivo',sans-serif; text-transform:uppercase;
  font-size:var(--text-xs); letter-spacing:.1em; color:var(--text-3); margin-bottom:var(--space-2);
}
.pform input,.pform select,.pform textarea{
  width:100%; max-width:100%; font-family:inherit; font-size:var(--text-sm); color:var(--text);
  background:#FBFBF9; border:1px solid var(--hairline-2); border-radius:var(--radius); padding:.7rem .8rem;
}
.pform textarea{ min-height:96px; resize:vertical; line-height:1.5 }
.pform input:focus-visible,.pform select:focus-visible,.pform textarea:focus-visible{ outline:2px solid var(--amber-strong); outline-offset:1px }
.pnote{ margin:0; font-size:var(--text-sm); color:var(--text-2) }
.pnote.is-ok{ color:#1B5E20; font-weight:600 }
.pnote.is-error{ color:#A11212; font-weight:600 }

.kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); margin-bottom:var(--space-8) }
@media (min-width:820px){ .kpis{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.kpi{ background:var(--card); padding:var(--space-5) var(--space-4); min-width:0 }
.kpi__n{ display:block; font-family:'Anton','Archivo',sans-serif; font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem); line-height:1.05; color:var(--text) }
.kpi__l{ display:block; font-size:var(--text-xs); color:var(--text-3); margin-top:var(--space-2); line-height:1.4 }

.warn{
  background:#FFFBEB; border:1px solid #E7D18A; border-left:3px solid var(--amber-strong);
  border-radius:var(--radius); padding:var(--space-5); margin-bottom:var(--space-8);
}
.warn__k{ font-family:'Anton','Archivo',sans-serif; text-transform:uppercase; letter-spacing:.09em; font-size:var(--text-sm); margin:0 0 var(--space-2); color:#6B5200 }
.warn p{ margin:0; font-size:var(--text-sm); color:var(--text-2) }

.payroll{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center }
.payroll__l{ font-size:var(--text-xs); color:var(--text-3); overflow-wrap:anywhere }
.skeleton{ height:14px; border-radius:2px; background:linear-gradient(90deg,#E9E9E5,#F4F4F2,#E9E9E5); background-size:200% 100%; animation:sk 1.2s linear infinite; margin-bottom:.6rem }
@keyframes sk{ from{ background-position:0 0 } to{ background-position:-200% 0 } }

/* EAN airport proof callout on the marketing page */
.callout--ean{ margin:0 0 var(--space-10) }
.callout--ean p:last-child{ font-size:var(--text-sm); color:var(--text-3); margin-bottom:0 }

/* the hidden attribute must win over component display rules */
[hidden]{ display:none !important }

/* keep wide data tables inside their own scroller instead of stretching the page */
.panels, .panel, .dash, .dash .wrap{ min-width:0 }
.panel > *, .pane > *{ min-width:0 }
.dtbl__scroll{ max-width:100%; min-width:0 }
.panels > *{ min-width:0 }
.tabs, .kpis{ min-width:0 }
.panel input, .panel select, .panel textarea{ max-width:100% }