/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Brand blue — pixel-sampled from public/assets/logo.jpg (dominant fill
     of "Serve" + the logo mark, #0050A8). Hover/active/light/border are
     derived shades of that sampled value, not separately brand-approved —
     revisit if PeopleServe supplies a tint ramp of their own. */
  --color-primary: #0050a8;
  --color-primary-hover: #00448f;
  --color-primary-active: #003876;
  --color-primary-light: #e8f1fb;
  --color-primary-border: #bfd8ef;

  /* CTA green — brand Section 3's button spec is explicit: "Primary CTA =
     solid brand green", distinct from brand blue's role (links, section
     labels, informational accents, icons). Blue stays --color-primary and
     keeps driving links/focus/active-states/badges; --color-cta is used
     ONLY by .btn-primary and the few elements standing in for it (hero CTA,
     Apply Now). Keeping these as two tokens rather than repointing
     --color-primary at green everywhere is deliberate — most of the app's
     blue usage (job-card location, sidebar active state, stepper) is
     correctly blue per the brief and would look wrong in green. */
  --color-cta: #008828;
  --color-cta-hover: #016b20;
  --color-cta-active: #045a1e;

  --color-text: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-faint: #9ca3af;

  --color-bg: #f7f8fb;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* Brand green — pixel-sampled from public/assets/logo.jpg (dominant fill
     of "People" + the globe/person icon, #008828). Same derived-shades
     caveat as brand blue above. */
  --color-success: #008828;
  --color-success-bg: #e3f5e8;
  --color-success-text: #045a1e;
  --color-danger: #dc2626;
  --color-danger-bg: #fee2e2;
  --color-danger-text: #991b1b;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Condensed/heavy display face for headlines and job titles only (brand
     doc Section 1: "heavy, condensed sans-serif ... all caps") — body copy
     stays on Inter. */
  --font-display: "Poppins", var(--font-sans);

  --header-height: 64px;
}

/* ── Reset & base ─────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Readability pass: root bumped from the 16px browser default so every
     rem-based font-size in this file (the large majority of them) scales
     up together from one change — applicant pages and the admin/AM portal
     alike, per explicit request that older/less-techy applicants AND
     recruiters both need noticeably easier-to-read text, not just the
     public-facing pages. This is deliberately NOT a literal 2x: doubling
     every value verbatim would blow up fixed-width layouts (data tables,
     the stepper, badges) and make headlines/icons look oversized rather
     than more readable. Instead this root bump (~1.19x) is combined with
     larger, separately-tuned explicit bumps on the specific things that
     are hardest to read/tap today — body text, form fields, buttons,
     badges, table cells (see each rule below) — so the *effective*
     increase on small/fine print is considerably more than 1.19x while
     large display type doesn't balloon past what still looks intentional.
     Previously: scrollbar-gutter: stable both-edges — reserved a permanent
     ~15-17px gutter on BOTH left and right edges of every page (to keep
     .container's margin:0 auto centering symmetric whether or not a real
     scrollbar was present). Removed per explicit request: that reserved
     space read as a visible gray side margin, especially once the hero
     background became more colorful/textured — it no longer blended into
     a near-white background. Trade-off: on pages tall enough to need a
     real vertical scrollbar, centered content can now shift ~8px left of
     true-center (a real but much less noticeable browser default), instead
     of a permanent visible gutter on every page. */
  font-size: 19px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; margin: 0; font-family: var(--font-display); }
p { margin: 0; }

a { color: var(--color-primary); }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--color-primary-light); color: var(--color-primary-active); }

/* ── Layout ───────────────────────────────────────────────── */

.container {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

@media (min-width: 768px) {
  .container { max-width: 640px; padding-top: 48px; }
}

.container-wide { max-width: 1080px; }

/* Apply wizard: the "Application details" step is a long, field-heavy form
   that benefits from more width and a 2-column layout. The Resume step now
   matches that same width (rather than a narrower fixed column) so it uses
   the available screen space instead of reading as a cramped single-column
   tile — still centered, just wider. */
.container-apply { max-width: 880px; }

#lookup-form-step {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Topbar ───────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 20px;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  flex: none;
}

/* The real logo (public/assets/logo.jpg) — used in place of the generic
   icon+text .brand-mark pairing wherever the header sits on a light
   background. Brand Section 1: "Always keep the mark, wordmark, and
   tagline together as one lockup" — this is the actual lockup image, not
   an approximation of it, so it's shown whole rather than split into a
   colored icon badge + separately-set "PSMPC Careers" text. */
.brand-logo-img { height: 34px; width: auto; display: block; }

/* Footer stub (dark background) can't use the light-logo image as-is (its
   own background is white, so it'd show as a white box) — reuses the
   cropped mark-only favicon instead, still real logo material rather than
   a generic icon, inside the same reversed-white circle as before. */
.brand-mark img { width: 20px; height: 20px; object-fit: contain; }

.brand-mark svg {
  width: 18px;
  height: 18px;
}

.brand-sub {
  color: var(--color-text-muted);
  font-weight: 500;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lang-toggle {
  display: flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: none;
}

.lang-btn {
  border: none;
  background: #fff;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-btn:hover { background: var(--color-primary-light); }

.lang-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.signin-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.signin-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.back-link:hover { color: var(--color-primary); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb a:hover { color: var(--color-primary); }

.breadcrumb-sep { color: var(--color-text-muted); opacity: 0.6; }

.breadcrumb-current { color: var(--color-text-secondary); }

.lookup-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.lookup-result-actions .btn-secondary { width: auto; margin-top: 0; }

/* ── Card ─────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .card { padding: 40px 44px; }
  .card-wide { padding: 44px 56px; }
}

/* ── Danger zone (Settings page, sandbox-only destructive actions) ── */

.danger-zone {
  margin-top: 20px;
  border-color: var(--color-danger);
}

.danger-zone h2 {
  color: var(--color-danger-text);
  font-size: 1.1rem;
  margin: 0 0 12px;
}

.danger-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.danger-zone-row p { margin: 0; max-width: 480px; }
.danger-zone-row .btn-danger { width: auto; flex-shrink: 0; }

h1 {
  font-size: 1.55rem;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--color-text-muted);
  font-size: 1rem;
}

/* ── Forms ────────────────────────────────────────────────── */

label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 18px 0 7px;
}

input, select, textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

input:hover, select:hover, textarea:hover { border-color: var(--color-text-faint); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

input.field-invalid, select.field-invalid, textarea.field-invalid {
  border-color: var(--color-danger);
}
input.field-invalid:focus, select.field-invalid:focus, textarea.field-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--color-bg);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

textarea { resize: vertical; }

input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}

fieldset { border: none; padding: 0; margin: 24px 0 0; }

legend {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0;
  margin-bottom: 4px;
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}

/* ── Application Form section headings (Job Information / Resume) ──
   Same visual weight as <legend> above, for the sections of the merged
   Application Form that aren't a <fieldset> (posting-info is a read-only
   block, .form-section wraps the Resume slot). */
.form-section { margin-top: 24px; }

.form-section-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.posting-info .form-section-title { border-bottom-color: var(--color-border-strong); }

/* Positioned as an intro line ABOVE the Phone/Email fields (not squeezed
   underneath them) so it reads as an instruction for the fields that
   follow, not an overlapping error-style label. A bordered callout box
   (rather than plain text) so the requirement is easy to notice before
   the applicant fills in either field, not just after leaving both blank. */
.contact-method-note {
  margin: 18px 0 14px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-primary-active);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
}
.contact-method-note.contact-method-warning {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-cta);
  color: #fff;
  border: none;
  padding: 16px 22px;
  border-radius: var(--radius-sm);
  font-size: 1.08rem;
  font-weight: 600;
  margin-top: 22px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { background: var(--color-cta-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active { background: var(--color-cta-active); transform: translateY(1px); }

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  padding: 15px 22px;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.btn-secondary:hover { border-color: var(--color-primary); background: var(--color-primary-light); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-danger);
  color: #fff;
  border: none;
  padding: 15px 22px;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn-danger:hover { background: #b91c1c; }

.btn-link {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--color-primary);
  padding: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.btn-link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* Inline variant of .btn-link — for a link-styled <button> that sits next
   to other text/controls (CV/requirement-doc filename preview triggers,
   the resume step's Remove action) rather than filling its container. */
.btn-link-inline {
  display: inline;
  width: auto;
  background: none;
  border: none;
  color: var(--color-primary);
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.btn-link-inline:hover { color: var(--color-primary-hover); }
.btn-link-inline.btn-danger-text { color: var(--color-danger); }
.btn-link-inline.btn-danger-text:hover { color: var(--color-danger-text); }

.btn-sm { padding: 10px 16px; font-size: 0.92rem; border-radius: 7px; width: auto; margin-top: 0; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; white-space: nowrap; align-items: flex-start; }

.row-actions-more-btn { padding: 10px 12px; }

/* Appended directly to <body> by openRowActionsMenu() (data-table.js), not
   a descendant of the table — position:fixed plus its top/bottom/right are
   all set inline per-instance there (viewport-relative coordinates, flips
   upward near the bottom of a long list). This rule only owns the look. */
.row-actions-menu {
  position: fixed;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 6px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-actions-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 7px;
  border: none;
  background: none;
  font-size: 0.87rem;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
}

.row-actions-menu button:hover { background: var(--color-bg); }

/* Overrides .btn-danger's solid-red button styling (background/padding) so
   a destructive action inside this menu reads as a tinted list item, not a
   full red button awkwardly squeezed into a dropdown. */
.row-actions-menu button.btn-danger {
  background: none;
  color: var(--color-danger);
  padding: 9px 10px;
}
.row-actions-menu button.btn-danger:hover { background: var(--color-danger-bg); }

/* ── Success state ────────────────────────────────────────── */

/* Icon sits inline to the left of the "Application Submitted Successfully"
   title (see .confirmation-heading) rather than centered above it. */
.confirmation-heading { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 20px; }
.confirmation-heading h1 { margin: 0; }
@media (min-width: 760px) {
  .confirmation-heading { justify-content: flex-start; }
}

.success-icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon svg { width: 28px; height: 28px; }

.ref-line { margin: 4px 0 8px; font-size: 1.02rem; }

/* The key takeaway of the confirmation screen — this is the applicant's one
   physical/digital artifact from the whole process (brand doc: "it should
   feel as designed as the flyers, not like a generic system message"), so
   it's styled like an actual ticket stub rather than a plain info box:
   dashed tear-line, notched side cutouts (matching the card's own
   background so they read as cut through, not painted circles), brand mark
   in the stub corner. Notch color is hardcoded to --color-surface (not
   --color-bg) because this callout always sits inside a white .card. */
.reference-callout {
  position: relative;
  display: flex;
  align-items: center;
  margin: 16px 0 20px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.reference-callout-stub {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  align-self: stretch;
  border-right: 2px dashed var(--color-primary-border);
  color: var(--color-primary);
}
.reference-callout-stub svg { width: 22px; height: 22px; }

.reference-callout::before,
.reference-callout::after {
  content: '';
  position: absolute;
  left: 44px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  z-index: 1;
}
.reference-callout::before { top: -9px; }
.reference-callout::after { bottom: -9px; }

.reference-callout-main { flex: 1; padding: 18px 20px; text-align: center; }

.reference-callout-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.reference-callout-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-primary);
  font-family: 'Courier New', monospace;
}

/* ── Print Confirmation choice modal ─────────────────────────── */
.print-choice-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.print-choice-actions .btn-secondary { width: 100%; }

/* ── Posting Confirmation modal (apply.html) ─────────────────── */
.posting-confirm-position { font-size: 1.2rem; font-weight: 700; margin: 0; }
.posting-confirm-location { font-size: 1.05rem; margin: 6px 0; }
.posting-confirm-category { font-size: 0.9rem; margin: 0 0 16px; }
.posting-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.posting-confirm-actions .btn-secondary { width: 100%; }

/* ── "Forgot your Reference Code?" recovery (status-check.html) ─────── */
.recovery-panel {
  margin-top: 8px;
  padding: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.recovery-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.recovery-tab {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.recovery-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── "Print Reference Number Only" — a minimal printed slip ──────
   Hidden in normal view; shown only while document.body carries
   .printing-ref-only (see app.js), which also hides every other
   top-level element so this is the only thing that prints. */
.print-ref-only { display: none; }

@media print {
  body.printing-ref-only > *:not(.print-ref-only) { display: none !important; }
  body.printing-ref-only .print-ref-only {
    display: block;
    text-align: center;
    margin-top: 15vh;
    font-family: var(--font-sans);
  }
  .print-ref-only-heading {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #374151;
    margin: 0;
  }
  .print-ref-only-value {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 14px 0;
    font-family: 'Courier New', monospace;
  }
  .print-ref-only-note { font-size: 0.9rem; color: #6b7280; margin: 0; }
}

/* ── Confirmation screen (two-column: message+instructions left,
   application facts+actions right) ──────────────────────────── */

.confirmation-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 760px) {
  .confirmation-layout { grid-template-columns: 3fr 2.4fr; }
}

.confirmation-main { text-align: center; }

@media (min-width: 760px) {
  .confirmation-main { text-align: left; }
}

.confirmation-instructions {
  text-align: left;
  margin: 14px 0;
  padding-left: 20px;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.confirmation-instructions li { margin: 4px 0; }

.confirmation-side {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 20px;
  align-self: start;
}
.confirmation-side .confirmation-actions { justify-content: flex-start; margin-top: 18px; }

/* Label above value instead of side-by-side — this panel is the narrower
   half of a 3:2.4 split, and .status-meta-label's global min-width:130px
   left too little room for a longer value ("Forklift Operator", a Branch
   name, etc.) to lay out without wrapping mid-word. */
.confirmation-side .status-meta-row { flex-direction: column; gap: 2px; margin: 0 0 14px; }
.confirmation-side .status-meta-label { min-width: 0; font-size: 0.8rem; }
.confirmation-side .status-meta-row > span:last-child { font-size: 1rem; font-weight: 600; color: var(--color-text); }

/* ── Feedback ─────────────────────────────────────────────── */

.error {
  color: var(--color-danger);
  font-size: 0.85rem;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-danger-bg);
  border-radius: var(--radius-sm);
}

/* Same box shape as .error, success-colored — e.g. the confirmation
   screen's "Email sent!" message after Send to Email succeeds. */
.success-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-success-text);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-success-bg);
  border-radius: var(--radius-sm);
}

.form-error { color: var(--color-danger); font-size: 0.82rem; margin-top: 8px; }

/* Small inline spinner for an in-flight button action (e.g. "Sending…") —
   same visual language as .requirement-slot-spinner, generalized for reuse
   outside the upload-slot component. */
.btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.6;
  animation: btn-spinner-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes btn-spinner-spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* ── Badges ───────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-active, .badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-inactive, .badge-neutral { background: var(--color-bg); color: var(--color-text-muted); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
/* "In progress / pending" per brand Section 3's status-badge spec (green =
   passed/scheduled, blue = in progress/pending, gray = closed) — distinct
   from .badge-warning (amber), which stays reserved for "needs attention". */
.badge-info { background: var(--color-primary-light); color: var(--color-primary-active); }
/* Literal "black text on white background" tag (Interview Completed) —
   distinct from .badge-neutral's light-gray fill, which reads as "inactive"
   rather than "done". */
.badge-plain { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); }

/* ── Footer ───────────────────────────────────────────────── */

/* Brand gray background per Section 3's footer spec ("brand gray
   background, logo reversed to white if on a dark footer"). Office-address
   content (Section 3's "Cebu and branch office addresses ... same format
   as the ad's Office Address blocks") isn't added here — no real address
   copy was supplied, and placeholder addresses would read as real ones on
   a live site. Add that block once the actual copy is available. */
.site-footer {
  background: var(--color-text-muted);
  padding: 44px 20px 24px;
  color: #fff;
  font-size: 0.86rem;
}

.site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer .brand-mark { background: #fff; color: var(--color-text-muted); }

.site-footer-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

@media (min-width: 700px) {
  .site-footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

.site-footer-col { display: flex; flex-direction: column; gap: 8px; }
.site-footer-col a { line-height: 1.6; }

.site-footer-brand-col .brand { font-size: 1.1rem; margin-bottom: 4px; }

.site-footer-tagline {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  max-width: 260px;
  margin: 0;
}

.site-footer-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 4px;
}

.site-footer-bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
}

/* ── Landing page ─────────────────────────────────────────── */

/* Brand-colored glow wash + a faint repeating-dot texture, standing in for
   the ad flyers' "faint, low-opacity office/binder photography" background
   watermark (Section 1) — no licensed photography is available to use here,
   so this is a deliberate substitute, not the literal spec. Revisit with
   real photography if/when PeopleServe supplies any. */
.hero {
  background-image:
    radial-gradient(circle, rgba(0, 80, 168, 0.1) 1.4px, transparent 1.4px),
    radial-gradient(circle at 15% 15%, rgba(0, 80, 168, 0.09), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(0, 136, 40, 0.08), transparent 40%),
    linear-gradient(135deg, #eef3fb 0%, #f3f6fd 45%, #fdf9ec 100%);
  background-size: 26px 26px, auto, auto, auto;
  background-position: -6px -6px, 0 0, 0 0, 0 0;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}

.hero-copy { max-width: 640px; text-align: left; }

.pill {
  display: inline-block;
  background: #fff;
  color: var(--color-primary-active);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
  border: 1px solid var(--color-primary-border);
  box-shadow: var(--shadow-sm);
}

/* "WE ARE HIRING!" — the actual H1 per brand Section 3 ("treatment as an
   H1 — green 'WE ARE', blue 'HIRING!', bold condensed caps"). Uses
   --font-display (Poppins) at heavy weight, all caps, tight tracking to
   read like the ad flyers rather than a generic web headline. */
.hero-hiring {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  margin: 0 0 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero-hiring-we { color: var(--color-success); }
.hero-hiring-verb { color: var(--color-primary); margin-left: 0.2em; }

/* The previous headline, demoted to a supporting line under "WE ARE
   HIRING!" — still useful info (turnaround time, what the portal does),
   just no longer competing with it for H1 weight. */
.hero-title-sub {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 16px;
  font-weight: 700;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .hero-hiring { font-size: 3.6rem; }
  .hero-title-sub { font-size: 1.6rem; }
}

.hero-sub {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  margin: 0 0 26px;
  max-width: 480px;
}

.btn-hero {
  display: inline-flex;
  width: auto;
  text-decoration: none;
  padding: 15px 30px;
  margin-top: 0;
  font-size: 1rem;
}

/* ── Landing page: Hiring Code entry (apply-flow entry point) ── */
.hiring-code-form label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.hiring-code-row {
  display: flex;
  gap: 10px;
  max-width: 420px;
}

.hiring-code-row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}

.hiring-code-row button {
  flex: none;
  /* .btn-primary defaults to width:100%/margin-top:22px for its usual
     stacked full-width placement — without this override, "flex: none"
     resolves its flex-basis to that 100% width, squeezing the input in this
     row down to almost nothing. Same override .wizard-nav/.confirmation-
     actions buttons already need for the same reason. */
  width: auto;
  margin-top: 0;
}

@media (max-width: 480px) {
  .hiring-code-row { flex-direction: column; }
}

.hiring-code-hint {
  font-size: 0.85rem;
  margin: 10px 0 0;
}

.need-card {
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
}

.need-title { font-weight: 700; margin: 0 0 14px; font-size: 1rem; }

.need-list { list-style: none; padding: 0; margin: 0; }

.need-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--color-bg);
}

.need-list li > span:last-of-type { flex: 1; }

.need-list li:last-child { border-bottom: none; }

.need-list .check {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.need-list .check svg { width: 11px; height: 11px; }

.need-list .dot { color: var(--color-text-faint); margin-top: 2px; }

.need-optional { color: var(--color-text-muted); }

/* Signature motif: the logo's own arc/swoosh, reused as the seam between
   the hero and the next section instead of a hard rectangular edge —
   echoes the brand mark rather than just borrowing its colors. Pulled up
   into the hero's bottom padding via negative margin so the curve reads as
   part of the hero, not a gap between two blocks. */
.swoosh-divider { margin-top: -40px; line-height: 0; position: relative; z-index: 1; }
.swoosh-divider svg { display: block; width: 100%; height: 40px; }

@media (min-width: 768px) {
  .swoosh-divider { margin-top: -54px; }
  .swoosh-divider svg { height: 54px; }
}

.stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 36px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  text-align: center;
}

.stat { min-width: 130px; }

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.stat-icon svg { width: 16px; height: 16px; }
.stat-icon-accent { background: var(--color-success-bg); color: var(--color-success); }

.stat-num { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; }

.stat-accent { color: var(--color-primary); }

.stat-label { color: var(--color-text-muted); font-size: 0.88rem; margin-top: 2px; }

.how-it-works {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 20px 72px;
}

.how-it-works h2 {
  text-align: center;
  font-size: 1.5rem;
  margin: 0 0 40px;
  letter-spacing: -0.01em;
}

.steps { display: grid; grid-template-columns: 1fr; gap: 28px; }

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-top-color: var(--color-cta); }

/* Last step ("Next Steps") gets the CTA green instead of informational
   blue — it's the payoff step (an offer/hire), not just process — a small
   deliberate break in an otherwise uniform row so the eye lands there. */
.step:last-child { border-top-color: var(--color-cta); }
.step:last-child .step-num { background: var(--color-cta); }

.step-num {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.step h3 { margin: 2px 0 4px; font-size: 1rem; }
.step p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }

.how-it-works-note {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  text-align: center;
}

@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 40px;
  }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* ── Stepper (apply wizard) ───────────────────────────────── */

/* Widened to match .container-apply's own width on the apply wizard, with
   side padding matching .card-wide's own padding — so the stepper's visible
   content lines up with the card's actual (inset) content edges below it,
   instead of the stepper spanning the card's full outer width while the
   card's own padding pulls its content inward, which reads as the stepper
   being off-center relative to the card even though both are centered on
   the same axis. */
.container-apply .stepper, .container-apply .wizard-stepper-compact {
  max-width: 880px;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 768px) {
  .container-apply .stepper, .container-apply .wizard-stepper-compact {
    padding-left: 56px;
    padding-right: 56px;
  }
}

.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 24px;
  max-width: 520px;
  width: 100%;
  padding: 0 4px;
}

.stepper-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
}

.stepper-marker {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
}

.stepper-dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.stepper-item.active .stepper-dot,
.stepper-item.done .stepper-dot { background: var(--color-primary); color: #fff; }

.stepper-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.stepper-item.active .stepper-label,
.stepper-item.done .stepper-label { color: var(--color-primary); }

.stepper-line {
  flex: 1;
  height: 2px;
  margin-top: 13px;
  background: var(--color-border);
}

.stepper-item.done .stepper-line { background: var(--color-primary); }

/* ── Wizard step navigation (Back/Next row) ──────────────────
   Reused by every apply-wizard step; an empty <span></span> in place of
   the missing button keeps the remaining one pinned to its side via
   justify-content: space-between. */

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.wizard-nav button, .wizard-nav a { width: auto; margin-top: 0; text-decoration: none; text-align: center; }

/* ── Job-posting QR lock-in (apply wizard) ───────────────────
   Shown instead of the Company/Position/Branch selects when the applicant
   arrived via a scanned posting code. */
.posting-info {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

/* ── Confirmation screen actions (Print / Send to Email / Continue) ── */
.confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.confirmation-actions button { width: auto; margin-top: 0; }

/* ── Completion summary bar (requirements progress) ──────────
   Shared by the apply wizard's Requirements step and the staff-side
   applicant detail pages. */

.completion-summary { margin-bottom: 16px; }
.completion-summary-count { font-size: 1.3rem; font-weight: 800; flex: none; }
.completion-bar-track { height: 10px; border-radius: 999px; background: var(--color-bg); overflow: hidden; margin-top: 10px; }
.completion-bar-fill { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.2s ease; }

/* Primary/sub pair: the actionable "N Remaining" line is the large,
   prominent element per the brief; the completed-fraction/percentage moves
   to a smaller supporting line underneath it, rather than being the
   headline itself. */
.completion-summary-primary { font-size: 1.3rem; font-weight: 800; color: var(--color-primary); }
.completion-summary-primary.all-done { color: var(--color-success-text); }
.completion-summary-sub { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 4px; }

/* ── Wizard stepper compact form (narrow screens) ────────────
   Both the full 5-segment .stepper and this compact "Step X of N" +
   percentage bar are always rendered; only one is ever visible, toggled
   by the media query below — same "render both, hide one via CSS" pattern
   used elsewhere in this app rather than JS viewport detection. */

.wizard-stepper-compact { display: none; max-width: 420px; margin: 0 auto 24px; }

.wizard-stepper-compact-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  text-align: center;
}

.wizard-stepper-bar-track { height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.wizard-stepper-bar-fill { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.2s ease; }

@media (max-width: 600px) {
  .wizard-stepper-full { display: none; }
  .wizard-stepper-compact { display: block; }

  /* Label + value stack instead of squeezing side-by-side — the squeeze is
     what was forcing badge text (e.g. "SCHEDULED") to wrap character by
     character against the fixed 130px label. */
  .status-meta-row { flex-direction: column; gap: 2px; }
  .status-meta-label { min-width: 0; }
}

/* ── Application Timeline (vertical, applicant detail pages) ─── */

.timeline-vertical { display: flex; flex-direction: column; }

.timeline-step { display: flex; gap: 12px; }

.timeline-marker { display: flex; flex-direction: column; align-items: center; flex: none; }

.timeline-dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.timeline-step.active .timeline-dot,
.timeline-step.done .timeline-dot { background: var(--color-primary); color: #fff; }

.timeline-connector { width: 2px; flex: 1; min-height: 20px; background: var(--color-border); margin: 2px 0; }

.timeline-step.done .timeline-connector { background: var(--color-primary); }

.timeline-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 3px 0 20px;
  transition: color 0.2s ease;
}

.timeline-step.active .timeline-label,
.timeline-step.done .timeline-label { color: var(--color-text); }

/* ── Application Timeline checklist (AM/Admin only, restyled from a
   stepper into a checklist — see lib/application-timeline.js) ── */

.timeline-checklist { display: flex; flex-direction: column; gap: 8px; }

.timeline-checklist-item { display: flex; align-items: center; gap: 10px; }

.timeline-checklist-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}
.timeline-checklist-item.done .timeline-checklist-icon { color: var(--color-primary); }

/* The final stage's "Rejected" outcome (vs. its default "Hired") — reached,
   but a distinct color from the neutral primary checkmarks above it so a
   rejected application still reads at a glance, not just via its label. */
.timeline-checklist-item-danger.done .timeline-checklist-icon { color: var(--color-danger); }
.timeline-checklist-item-danger.done .timeline-label { color: var(--color-danger-text); font-weight: 600; }

/* A stage skipped by a Rejected outcome (see application-timeline.js) —
   deliberately more muted than a plain unreached/"future" stage, and using
   a dash rather than an open circle, so it doesn't read as "not yet
   happened" next to an already-final Rejected result. */
.timeline-checklist-item-skipped .timeline-checklist-icon { color: var(--color-text-faint); }
.timeline-checklist-item-skipped .timeline-label { color: var(--color-text-faint); }

.timeline-checklist-item .timeline-label { padding: 0; }

/* ── Tables (dashboards) ──────────────────────────────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }

table { width: 100%; border-collapse: collapse; margin-top: 4px; min-width: 480px; }

th, td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--color-border); font-size: 0.98rem; }

/* Opt-in: tables that pass explicit column `width`s (e.g. the applicant
   lists) use fixed layout so those widths are honored and the row spreads
   evenly across the card instead of bunching left. */
table.table-balanced { table-layout: fixed; }
table.table-balanced th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.table-balanced td:not(.row-actions):not(.select-col):not(:has(.badge)) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-bg);
  white-space: nowrap;
}

tbody tr { transition: background-color 0.1s ease; }
tbody tr:hover { background: var(--color-bg); }
tbody tr:last-child td { border-bottom: none; }

tr.clickable-row { cursor: pointer; }
.row-open-link { color: var(--color-primary); font-weight: 600; }
tr.clickable-row:hover .row-open-link { text-decoration: underline; }

/* ── Applicant quick-preview drawer (row click, Applicants/Branch Applicants lists) ── */
.applicant-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 200;
}
.applicant-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(92vw, 420px);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.16);
  z-index: 201;
  display: flex;
  flex-direction: column;
  animation: drawer-slide-in 0.2s ease;
}
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.applicant-drawer-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--color-border);
}
.applicant-drawer-hd .idw { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.applicant-drawer-hd h2 { font-size: 1.15rem; margin: 0; word-break: break-word; }
.applicant-drawer-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.applicant-drawer-close:hover { background: var(--color-bg); color: var(--color-text); }
.applicant-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.applicant-drawer-dl { display: grid; grid-template-columns: 130px 1fr; gap: 12px 12px; margin: 0; font-size: 0.86rem; }
.applicant-drawer-dl dt { color: var(--color-text-muted); font-weight: 600; }
.applicant-drawer-dl dd { margin: 0; color: var(--color-text); word-break: break-word; }
.applicant-drawer-ft { padding: 16px 20px; border-top: 1px solid var(--color-border); }
.applicant-drawer-ft .btn-primary { width: 100%; margin-top: 0; text-align: center; text-decoration: none; }

.drawer-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.drawer-section h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 10px; }
/* Same section reused outside a drawer (e.g. staff-detail.html's Branches
   Assigned card) where it's the card's only content — no divider needed. */
.drawer-section.no-border-top { margin-top: 0; padding-top: 0; border-top: none; }
.assigned-branch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.86rem;
}
.assigned-branch-row:last-of-type { border-bottom: none; }
.assigned-branch-row .branch-name { font-weight: 600; flex: 1; min-width: 0; }
.assigned-branch-row .branch-capacity { color: var(--color-text-muted); font-size: 0.8rem; }
.assigned-branch-row button { width: auto; margin-top: 0; }
#assign-branch-btn { width: 100%; margin-top: 10px; }

/* Support Request thread (public/lib/support-thread.js) — a simple
   two-sided message list, reused identically in both the AM and Admin
   preview drawers and staff-detail.html. */
.support-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.support-message {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
}
.support-message-am { align-self: flex-start; background: var(--color-bg); }
.support-message-admin { align-self: flex-end; background: var(--color-primary-light); }
.support-message-meta { font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 3px; }
.support-message-body { white-space: pre-wrap; word-break: break-word; }

.support-reply-form { display: flex; flex-direction: column; gap: 8px; }
.support-reply-form textarea { min-height: 70px; resize: vertical; }
.support-reply-form button { align-self: flex-end; width: auto; margin-top: 0; }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
}

.select-col { width: 36px; padding-right: 0; }
.select-col input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.bulk-bar-count {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--color-primary-active);
  margin-right: auto;
}

.bulk-bar .btn-danger, .bulk-bar .btn-secondary { width: auto; margin-top: 0; }

/* ── Admin inline forms ───────────────────────────────────── */

.admin-section { margin-bottom: 28px; }

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.inline-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1 1 150px; }

.inline-form label { margin: 0; font-size: 0.78rem; }

.inline-form input, .inline-form select { padding: 10px 12px; }

.inline-form button { margin-top: 0; padding: 11px 18px; width: auto; flex: none; }

/* ── Status view (apply wizard) ──────────────────────────────── */

.status-app-card { margin-bottom: 20px; }

.status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.status-meta-row { display: flex; gap: 8px; margin: 6px 0; font-size: 0.9rem; }
.status-meta-label { font-weight: 600; color: var(--color-text-secondary); min-width: 130px; flex: none; }
.status-meta-row > span:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.job-description-block { margin-top: 18px; }
.job-description-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.5; }

.status-block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.status-block h2 { font-size: 0.95rem; margin: 0 0 10px; }

.status-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.status-block-header h2 { margin: 0; }

/* ── Returning-applicant two-column layout (status-check.html) ──
   Named grid areas control visual order independently of DOM order:
   Requirements first on mobile (the primary next action), Info column on
   the left once there's room for two columns. */
.applicant-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "requirements" "info";
  gap: 8px 28px;
  margin-top: 8px;
}

@media (min-width: 860px) {
  .applicant-status-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "info requirements";
    align-items: start;
  }
}

.applicant-status-info { grid-area: info; }
.applicant-status-requirements { grid-area: requirements; }

/* ── Requirements Progress banner ────────────────────────────── */

.requirements-progress-banner {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  padding: 18px;
}

.requirements-progress-remaining { margin: 10px 0 0; font-weight: 600; }

.requirements-remaining-list { margin-top: 12px; font-size: 0.9rem; }
.requirements-remaining-list ul { margin: 6px 0 0; padding-left: 20px; }
.requirements-remaining-list li { margin: 2px 0; }

/* ── Requirement filter tabs ──────────────────────────────────── */

.requirement-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.requirement-filter-btn {
  width: auto;
  margin-top: 0;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.requirement-filter-btn:hover { border-color: var(--color-primary); }
.requirement-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Per-card status coloring (Continue Submitting Requirements) ────
   Previously: missing docs were pulled to the top and submitted ones moved
   into a collapsible section at the bottom — reordering the list meant a
   just-reviewed document visually jumped away from where the applicant
   last saw it. Replaced per feedback: cards stay in their natural order,
   each one's own border/background communicates its current status
   in place, driven by [data-req-status] on the .requirement-slot element
   itself (kept in sync in lib/requirement-slot.js's applyBadge()). */
.requirement-slot[data-req-status="missing"],
.requirement-slot[data-req-status="rejected"] {
  border-left: 3px solid var(--color-danger);
}

.requirement-slot[data-req-status="pending"] {
  border-color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.requirement-slot[data-req-status="approved"] {
  position: relative;
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.requirement-slot-approved-check {
  display: none;
  position: absolute;
  top: -9px;
  right: -9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-surface);
}
.requirement-slot-approved-check svg { width: 13px; height: 13px; }
.requirement-slot[data-req-status="approved"] .requirement-slot-approved-check { display: flex; }

/* ── Requirement slot: Invalid (AM-rejected) state ───────────────
   Sits between the header and the Scan/Upload actions, which are shown
   again in this state (a rejected doc needs a fresh file — see
   requirement-slot.js). */
.requirement-slot-invalid-note {
  margin-top: 10px;
  padding: 10px 12px;
  padding-left: 44px;
  font-size: 0.85rem;
}

.requirement-slot-rejection-note {
  margin: 0 0 6px;
  color: var(--color-danger-text);
}

.requirement-slot-invalid-note .requirement-slot-filename {
  color: var(--color-text-muted);
  margin-right: 8px;
}

/* ── Requirements checklist (apply wizard) ───────────────────── */

.requirement-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.requirement-row:last-child { border-bottom: none; }

.requirement-label { flex: 1; font-size: 0.92rem; font-weight: 500; min-width: 0; }

.requirement-row input[type="file"] {
  flex: none;
  width: auto;
  max-width: 200px;
  font-size: 0.82rem;
  padding: 6px 8px;
}

.requirement-attached-badge {
  flex: none;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-success);
  display: none;
}

.requirement-row.attached .requirement-attached-badge { display: inline; }

.required-mark { color: var(--color-danger); font-weight: 700; }

/* ── Requirement slots (apply wizard — dedicated per-requirement
   Scan/Upload, replacing the plain .requirement-row list above for this
   one page; .requirement-row itself stays for the post-interview
   follow-up flow in status-view.js, unchanged) ──────────────── */

.requirement-slot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.requirement-slot:last-child { margin-bottom: 0; }

.requirement-slot-header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.requirement-slot-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.requirement-slot-icon svg { width: 17px; height: 17px; }

/* A real min-width (not 0) is what actually makes flex-wrap kick in and
   drop the status badge to its own line on narrow screens — with min-width
   0 the browser can always satisfy "everything fits on one line" by
   shrinking this column arbitrarily thin instead, which is what caused
   long labels (e.g. "Government ID" in Tagalog) to break mid-word. */
.requirement-slot-info { flex: 1; min-width: 140px; }

.requirement-slot-name { display: block; font-size: 0.94rem; }

.requirement-slot-hint { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 2px; }

.requirement-slot-status { flex: none; }

.requirement-slot-actions,
.requirement-slot-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-left: 44px;
}

.requirement-slot-actions button,
.requirement-slot-preview button { width: auto; margin-top: 0; }

/* Icon-only Remove — was a full "Remove attached file" text link, which
   took as much visual weight as the actual document info/status it sat
   next to. A trash icon reads just as clearly next to Replace/View and
   gives the card's info more room. */
.requirement-slot-remove-btn {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-muted);
  cursor: pointer;
}
.requirement-slot-remove-btn:hover { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-bg); }
.requirement-slot-remove-btn svg { width: 15px; height: 15px; }

.requirement-slot-filename {
  font-size: 0.86rem;
  font-weight: 500;
  overflow-wrap: anywhere;
  margin-right: auto;
}

/* Upload-in-progress spinner (requirement-slot.js's handleFile) — a small
   inline spinner next to the status badge, shown only while onAttach's
   upload request is in flight. */
.requirement-slot-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: requirement-slot-spin 0.7s linear infinite;
  margin-left: 8px;
}
.requirement-slot.uploading .requirement-slot-spinner { display: inline-block; }
@keyframes requirement-slot-spin { to { transform: rotate(360deg); } }

/* The Resume step has exactly one slot — a plain list-row layout (icon+text
   left, badge right, actions left-indented below) reads fine for the 8-item
   Requirements list, but looks unstructured for a single standalone upload.
   This restyles that one instance into a centered "dropzone" card: bigger
   icon, everything stacked and centered, dashed border, generous spacing —
   closer to a standard single-file-upload widget. Scoped to #resume-slot so
   the shared .requirement-slot component's list styling elsewhere (the
   Requirements step, the Applicant Portal) is untouched. */
/* renderResumeSlot() (app.js) sets #resume-slot's own innerHTML straight to
   renderSlotMarkup()'s output — unlike renderRequirementSlots(), there's no
   wrapping .requirement-slot div here, so the box styling below targets
   #resume-slot itself, not a descendant. */
#resume-slot {
  margin-top: 28px;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  background: var(--color-bg);
}

#resume-slot .requirement-slot-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

#resume-slot .requirement-slot-icon {
  width: 48px;
  height: 48px;
}
#resume-slot .requirement-slot-icon svg { width: 24px; height: 24px; }

#resume-slot .requirement-slot-info { flex: none; text-align: center; }
#resume-slot .requirement-slot-name { font-size: 1.02rem; }

#resume-slot .requirement-slot-actions,
#resume-slot .requirement-slot-preview {
  justify-content: center;
  padding-left: 0;
  margin-top: 18px;
}

/* View / Replace / Remove attached file all sit in one centered row
   (client decision) — filename's margin-right:auto (list-row layout
   elsewhere) would push the buttons to the far right of this centered
   dropzone, so it's cleared here to keep everything grouped together. */
#resume-slot .requirement-slot-preview {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* flex-basis:100% forces the filename onto its own centered row regardless
   of length, so View/Replace/Remove attached file — the three actions —
   always end up together on the row below instead of a long real filename
   pushing "Remove attached file" onto a line by itself. */
#resume-slot .requirement-slot-filename {
  flex-basis: 100%;
  text-align: center;
  margin-right: 0;
}

@media (max-width: 480px) {
  .requirement-slot-actions, .requirement-slot-preview { padding-left: 0; }
}

/* ── Utility grid ─────────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ── Interview date/time picker ──────────────────────────────── */
/* This row packs two <select>s into roughly half a modal's width (Start
   Time | End Time, side by side via .grid-2) — the global input/select
   rule's padding+font-size (15px 16px, 1.05rem) is sized for a full-width
   field and left the 80px-wide AM/PM select too narrow to show "AM"/"PM"
   without clipping. Both selects in this row get their own smaller,
   tighter sizing instead of inheriting that. */
.time-picker-row { display: flex; gap: 8px; }
.time-picker-row select { width: auto; flex: 1; padding: 12px 10px; font-size: 0.92rem; }
.time-picker-row select#i-start-ampm,
.time-picker-row select#i-end-ampm { flex: none; width: 72px; padding: 12px 6px; }

/* ── Applicant detail — 70/30 CRM layout ─────────────────────── */

.applicant-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 1000px) {
  .applicant-detail-grid { grid-template-columns: 7fr 3fr; }
}

.applicant-detail-main,
.applicant-detail-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.interview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.interview-actions button { width: auto; margin-top: 0; }

/* Separates the CV preview from the Interview sub-section beneath it
   (AM application detail page) — the CV card holds both, so this keeps
   "here's the CV" and "here's what you do about the interview" from
   reading as one undifferentiated block. */
.cv-section-divider { border-top: 1px solid var(--color-border); margin: 20px 0 16px; }
.cv-subsection-title { font-size: 0.9rem; font-weight: 700; margin: 0 0 4px; color: var(--color-text); }

/* Marks whichever Post-Interview Actions button matches the currently
   recorded recommendation — a ring rather than a background/color change,
   since Job Offer/Reject/Other each already carry their own distinct
   semantic color (primary/danger/secondary) that this shouldn't override.
   All three buttons stay fully clickable regardless (see
   RECOMMENDATION_BTN_IDS in application.js) — a recommendation can always
   be changed, never locked in. */
.recommendation-btn-active { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text); }

.status-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status-actions select { flex: 1; min-width: 200px; margin-top: 0; }
.status-actions button { width: auto; margin-top: 0; }

/* ── Interviewer searchable picker ──────────────────────────────── */
.interviewer-picker-wrap { position: relative; }
.interviewer-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  max-height: 220px;
  overflow-y: auto;
}
.interviewer-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.86rem;
}
.interviewer-dropdown-item:hover { background: var(--color-bg); }
.interviewer-dropdown-name { font-weight: 600; }
.interviewer-dropdown-email { font-size: 0.76rem; color: var(--color-text-muted); }
.interviewer-dropdown-empty { padding: 10px 12px; font-size: 0.84rem; color: var(--color-text-muted); }

/* ── Scheduling-state banners (Schedule/Reschedule/Cancel failures) ── */
.scheduling-banner {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.scheduling-banner-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.scheduling-banner-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.scheduling-banner button { width: auto; margin-top: 0; }

.requirements-card-collapsible { padding: 0; overflow: hidden; }

.requirements-card-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}
/* In a narrow column (e.g. the AM/Admin applicant-detail side rail) the
   label can wrap to 2 lines — align-items:flex-start above keeps the
   count+chevron pinned to the top instead of vertically centering against
   a now-taller label, which read as misaligned. */
.requirements-card-toggle > span:first-child { padding-top: 2px; }

/* Wraps the completion-count badge + chevron together so the count stays
   visible right next to the arrow even while the section body (and its own
   copy of this count in .completion-summary) is collapsed/hidden. */
.requirements-toggle-meta { display: flex; align-items: center; gap: 10px; flex: none; }

.requirements-card-toggle .chevron {
  flex: none;
  transition: transform 0.15s ease;
  color: var(--color-text-muted);
}

.requirements-card-collapsible.collapsed .requirements-card-toggle .chevron { transform: rotate(-90deg); }
.requirements-card-collapsible.collapsed .requirements-card-body { display: none; }

.requirements-card-body { padding: 0 24px 24px; }

@media (min-width: 640px) {
  .requirements-card-toggle { padding: 40px 44px 24px; }
  .requirements-card-body { padding: 0 44px 40px; }
}

/* ── Requirement row status icons ────────────────────────────── */

.req-status-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.req-status-icon svg { width: 13px; height: 13px; }

.req-status-icon.req-status-none { background: var(--color-bg); border: 1.5px solid var(--color-border-strong); color: transparent; }
.req-status-icon.req-status-pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.req-status-icon.req-status-approved { background: var(--color-success-bg); color: var(--color-success-text); }
.req-status-icon.req-status-rejected { background: var(--color-danger-bg); color: var(--color-danger-text); }
.req-status-icon.req-status-expired { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* ── Admin portal shell ───────────────────────────────────── */

.admin-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: none;
  width: 240px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-nav { padding: 16px 12px; flex: 1; }

.sidebar-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
  padding: 16px 12px 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-link svg { width: 20px; height: 20px; flex: none; }

.sidebar-link:hover { background: var(--color-bg); color: var(--color-text); }

.sidebar-link.active { background: var(--color-primary-light); color: var(--color-primary-active); font-weight: 600; }

.sidebar-link.nav-disabled { opacity: 0.45; cursor: default; }
.sidebar-link.nav-disabled:hover { background: none; color: var(--color-text-secondary); }

.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.header-divider { color: var(--color-border-strong); font-weight: 300; }

.header-portal-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-header-right { display: flex; align-items: center; gap: 12px; flex: none; }

.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
}

.icon-btn svg { width: 21px; height: 21px; }
.icon-btn:hover { background: var(--color-bg); }

/* Header bell's open-support-request count (admin-shell.js/am-shell.js). */
.header-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-danger-text);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.profile-chip { position: relative; }

.profile-chip-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-family: inherit;
}

.profile-chip-btn:hover { background: var(--color-bg); }

.profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.profile-name { font-size: 0.87rem; font-weight: 600; color: var(--color-text); }
.profile-chip-btn svg { width: 14px; height: 14px; color: var(--color-text-muted); }

.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 170px;
  padding: 6px;
  z-index: 30;
}

.profile-dropdown a, .profile-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 7px;
  border: none;
  background: none;
  font-size: 0.87rem;
  font-family: inherit;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.profile-dropdown a:hover, .profile-dropdown button:hover { background: var(--color-bg); }

.admin-content { padding: 24px; flex: 1; }

.content-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* flex: 1 so this fills the toolbar row instead of shrinking to its own
   content width and leaving the rest of the (often much wider) card empty
   — it's usually the toolbar's only child, so justify-content:space-between
   on .content-toolbar above has nothing else to push against otherwise. */
.toolbar-filters { display: flex; flex: 1; flex-wrap: wrap; gap: 10px; align-items: center; }

.toolbar-filters input[type="search"], .toolbar-filters select {
  width: auto; /* overrides the global input/select/textarea { width:100% } reset,
                  which otherwise forces every control onto its own line since
                  each one claims the full row width before the next can fit */
  flex: 1 1 180px;
  padding: 9px 12px;
  font-size: 0.86rem;
  min-width: 160px;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}

.page-header-row h1 { margin: 0; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.view-toggle {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px;
  width: fit-content;
  margin-bottom: 16px;
}
.view-toggle-btn {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.view-toggle-btn:hover { color: var(--color-text); }
.view-toggle-btn.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

.event-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
#events-view + #event-detail-view { margin-top: 16px; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--color-text); }
th.sortable .sort-arrow { margin-left: 4px; opacity: 0.5; }
th.sortable.sorted .sort-arrow { opacity: 1; }

/* ── Collapsible sidebar (admin + AM portals) ────────────────
   Below 900px the sidebar becomes an off-canvas drawer: hidden by
   default, slid in via .sidebar-open on <body>, toggled by the
   hamburger button in the header and dismissible via the backdrop,
   a close button, clicking a link, or Escape. */

.sidebar-toggle-btn { display: none; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sidebar-close-btn { display: none; }

@media (max-width: 900px) {
  .admin-layout { flex-direction: column; }

  .sidebar-toggle-btn { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 84vw);
    max-width: 84vw;
    height: 100dvh;
    z-index: 60;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  body.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop { display: block; }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  .sidebar-close-btn {
    display: flex;
    align-self: flex-end;
    margin: 10px 10px 0 0;
  }

  .admin-content { padding: 16px; }
  .admin-header { padding: 12px 16px; }
  .profile-name { display: none; }
  .profile-chip-btn svg { display: none; }
  .header-divider, .header-portal-label { display: none; }
}

/* ── Dashboard summary cards ──────────────────────────────── */

.dashboard-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

@media (min-width: 640px) {
  .dashboard-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .dashboard-cards { grid-template-columns: repeat(3, 1fr); }
  /* Organization at a Glance has exactly 4 compact tiles — 4 columns
     instead of the default 3 so it fills the row evenly instead of
     leaving a lone tile dangling on its own second row. */
  #org-health-cards { grid-template-columns: repeat(4, 1fr); }
}

/* Branded stat tile — a colored top accent bar (default brand blue, opt-in
   green/warning variants below) replaces the plain gray-bordered panel, per
   brand Section 3 ("branded stat cards, not raw Bootstrap panels"). */
.dashboard-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

a.dashboard-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-border); border-top-color: var(--color-primary-hover); }

.dashboard-card-accent-success { border-top-color: var(--color-success); }
a.dashboard-card-accent-success:hover { border-top-color: var(--color-success); }
.dashboard-card-accent-warning { border-top-color: #d97706; }
a.dashboard-card-accent-warning:hover { border-top-color: #d97706; }

.dashboard-card-label { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; }
.dashboard-card-value { font-size: 2.1rem; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; }
.dashboard-card-value-sub { font-size: 1.05rem; font-weight: 600; color: var(--color-text-faint); }


.dashboard-section { margin-top: 8px; margin-bottom: 32px; }
.dashboard-section h2 { font-size: 1.05rem; margin: 0 0 12px; }

/* Section label above each dashboard card row — same look as the sidebar's
   group labels (Organization/People/Settings), reused here to separate
   "Recruitment Snapshot" (KPIs that change week to week) from
   "Organization at a Glance" (slower-moving org counts, visually
   secondary). Actionable items live above both, in
   .dashboard-attention-panel, not in either of these rows. */
.dashboard-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
  margin-bottom: 10px;
}

/* Organization Health row — smaller, denser tiles than the Recruitment
   Overview row above it, so the eye lands on recruitment KPIs first. */
.dashboard-cards-compact { gap: 12px; }
.dashboard-card-compact { padding: 14px 16px; }
.dashboard-card-compact .dashboard-card-label { font-size: 0.78rem; }
.dashboard-card-compact .dashboard-card-value { font-size: 1.5rem; margin-top: 4px; }

.dashboard-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  font-size: 0.88rem;
}
.dashboard-activity-row:last-child { border-bottom: none; }
.dashboard-activity-row:hover strong { text-decoration: underline; color: var(--color-primary); }
.dashboard-activity-row .muted { display: block; font-size: 0.8rem; }

/* ── Modal ────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Above the preview drawer's z-index (200/201) — AdminModal can be opened
     from inside the drawer (e.g. Staff & Users' "Assign to Branch"), so it
     must always render on top even if a caller forgets to close the drawer
     first. */
  z-index: 300;
}

.modal-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Opt-in wider variant (AdminModal.open({ wide: true })) for forms with
   several fields side by side (e.g. the interview scheduler's date/time/
   type/interviewer grid) that read as cramped at the default form width. */
.modal-panel-wide { max-width: 640px; }

.checklist-box {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  padding: 4px 2px;
  cursor: pointer;
}
.checklist-item input[type="checkbox"] { width: auto; margin: 0; }

/* Create-time branch assignment checklist (Add Staff modal) — a
   checkbox + name on the left, an opt-in capacity number on the right,
   disabled until its own row is checked. */
.branch-assign-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0; }
.branch-assign-row .checklist-item { padding: 4px 2px; flex: 1; }
.branch-assign-capacity { width: 64px; flex-shrink: 0; padding: 6px 8px !important; font-size: 0.85rem !important; }
.branch-assign-capacity:disabled { opacity: 0.4; }

/* Interview audit log (public/lib/interview-scheduler.js's
   renderInterviewAuditLog) — a plain reverse-chronological list, one row
   per action, timestamp right-aligned. */
.audit-log-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.86rem;
}
.audit-log-row:last-of-type { border-bottom: none; }
.audit-log-line { flex: 1; }
.audit-log-timestamp { color: var(--color-text-muted); font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; }

/* Shared success/error toast (public/lib/toast.js) */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--color-text);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-visible { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--color-success-text, #15803d); }
.toast-danger { background: var(--color-danger-text, #b91c1c); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.modal-header h2 { font-size: 1.1rem; }

.modal-close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover { background: var(--color-bg); }
.modal-close svg { width: 16px; height: 16px; }

.modal-body { padding: 20px 24px; }
.modal-body label:first-child { margin-top: 0; }

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-footer .btn-primary, .modal-footer .btn-secondary { width: auto; margin-top: 0; }

/* ── AM application review page (public/am/application.js) ───
   Redesigned 2026-09-21 into the same two-column, 7:3 main/side layout as
   the admin mirror page's .applicant-detail-grid (see
   .application-detail-layout below) — left: Applicant Info + CV/Interview,
   right: Application Timeline + Requirement Documents. This outer wrapper
   itself stays a plain full-width block; also doubles as the error-state
   target when an application id is missing (see application.js). */
.am-review-sections { display: flex; flex-direction: column; gap: 20px; }

.applicant-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  margin-top: 4px;
}

@media (min-width: 700px) {
  .applicant-info-grid { grid-template-columns: 1fr 1fr; }
}

.applicant-info-grid .status-meta-row { margin: 6px 0; }

/* Generic two-column layout (stacks below 900px) — used both for the top
   Applicant Information / Assigned & Timeline row and, previously, the CV &
   Interview split (that section is single-column now — see application.html). */
.two-column-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 900px) {
  .two-column-section { grid-template-columns: 1fr 1fr; }
}

/* AM Application Detail — Applicant Info + CV/Interview (left, wider) next
   to Application Timeline + Requirement Documents (right) — same 7:3 main/
   side ratio as the admin mirror page's .applicant-detail-grid, so an AM
   never has to scroll past the CV just to check how many requirement
   documents are in. min-width:0 keeps a wide CV preview from blowing out
   its grid track. */
.application-detail-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

@media (min-width: 1000px) {
  .two-column-section.application-detail-layout { grid-template-columns: 7fr 3fr; }
}

.cv-standalone-preview {
  min-height: 420px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-top: 12px;
}

.cv-standalone-iframe { width: 100%; height: 420px; border: 0; }

/* ── My Applicants list (public/am/branch-applicants.js) ─────── */

.interview-schedule-cell-sub { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--color-text-muted); font-weight: 400; }

/* Date Applied filter — a toolbar button that opens a small popover with
   quick presets, a specific-date picker, and a from/to range, closer to a
   CRM-style date filter than a plain column sort. */
.date-filter-wrap { position: relative; }

.date-filter-btn.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

.date-filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}

.date-filter-presets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.date-filter-presets button {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--color-text);
}
.date-filter-presets button:hover { background: var(--color-bg); }
.date-filter-presets button.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }

.date-filter-section { border-top: 1px solid var(--color-border); padding-top: 12px; margin-top: 12px; }
.date-filter-section label { font-size: 0.8rem; margin-top: 8px; }
.date-filter-section input[type="date"] { margin-top: 4px; }
.date-filter-range-row { display: flex; gap: 8px; }
.date-filter-range-row > div { flex: 1; }

.date-filter-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.date-filter-actions button { width: auto; margin-top: 0; }

/* ── Pagination (My Applicants; reusable wherever a table paginates) ── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 4px;
  flex-wrap: wrap;
}
.pagination-bar button { width: auto; margin-top: 0; }
.pagination-info { font-size: 0.86rem; color: var(--color-text-secondary); }

/* ── My Profile — wide 2-column form instead of a single stacked column ── */
.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 28px;
}
@media (min-width: 700px) {
  .profile-form-grid { grid-template-columns: 1fr 1fr; }
}
.profile-form-grid .form-section-title { grid-column: 1 / -1; }

/* ── View CV for Interview modal (AM applicant detail) ───────
   Wider than the default .modal-panel (form-sized) — CV preview on the
   left, Interviewer Notes on the right, per the AM-review wireframe. */
.cv-interview-modal-panel { max-width: 1080px; }

.cv-interview-modal-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 760px) {
  .cv-interview-modal-body { grid-template-columns: 1fr; }
}

.cv-interview-cv-pane {
  min-height: 60vh;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cv-interview-iframe { width: 100%; height: 60vh; border: 0; }

.cv-interview-notes-pane { display: flex; flex-direction: column; }
.cv-interview-notes-pane label { margin-top: 0; }
.cv-interview-notes-pane textarea { flex: 1; min-height: 200px; resize: vertical; }

.cv-interview-modal-footer { justify-content: space-between; }
.cv-interview-modal-footer .btn-primary, .cv-interview-modal-footer .btn-secondary { width: auto; margin-top: 0; }

/* ── Camera capture ───────────────────────────────────────── */

.take-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.take-photo-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.take-photo-btn svg { width: 15px; height: 15px; }

.upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.upload-row input[type="file"] { flex: 1; min-width: 160px; }

.camera-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.camera-header {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 14px;
}

.camera-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.camera-close-btn svg { width: 18px; height: 18px; }

.camera-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.camera-video, .camera-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.camera-status {
  color: #fff;
  text-align: center;
  padding: 0 32px;
  font-size: 0.95rem;
}

.camera-controls {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 28px;
}

.camera-capture-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.camera-capture-btn::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}

.camera-review-actions {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 20px 28px;
}

.camera-review-actions .btn-primary, .camera-review-actions .btn-secondary { width: auto; margin-top: 0; }

/* ── In-portal QR scanner (public/lib/qr-scanner.js) ─────────── */

.qr-scan-frame {
  position: absolute;
  width: min(70vw, 280px);
  height: min(70vw, 280px);
  border: 3px solid #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.qr-scan-hint {
  flex: none;
  color: #fff;
  text-align: center;
  padding: 0 24px 28px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.scan-qr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.scan-qr-btn svg { width: 16px; height: 16px; flex: none; }

/* ── Job Listings (public/jobs.html) ─────────────────────────── */

.jobs-page-header { margin-bottom: 20px; }
.jobs-page-header h1 { margin: 0 0 6px; }

/* Filters redesign: previously Sort lived in a toolbar above the grid
   while Category/Location/Date Posted lived in a visually disconnected
   sidebar card — two unrelated-looking mechanisms controlling the same
   list, and on mobile the filters sat BELOW the entire grid (had to scroll
   past every job to find them). Replaced with one unified, always-visible
   bar above the grid: Category -> Location kept adjacent and numbered so
   the "pick one to unlock the other" dependency is visible instead of a
   silently-disabled select, Sort folded into the same row instead of a
   separate control. Active-filter chips + Clear sit directly underneath. */
.jobs-filter-bar { padding: 18px 20px; margin-bottom: 20px; }

.jobs-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px) {
  .jobs-filter-row { grid-template-columns: repeat(2, 1fr); }
}

/* Deliberately stays 2-wide (2x2) rather than expanding to a 4-across row
   at wider viewports — tried widening just the Location column with an
   asymmetric fr ratio first, but "All branches in <a realistic longer PH
   city name>" (e.g. "Cagayan de Oro") still hard-clipped even at 1.3fr,
   since a single extra-long option can't be reliably budgeted for with a
   ratio tuned by eye. Halving the column count instead roughly doubles
   every field's width with no per-field guessing, comfortably fitting the
   longest realistic option text at this font size. */

.jobs-filter-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
}

.jobs-filter-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.65rem;
  font-weight: 700;
  flex: none;
}

/* Custom chevron replacing the browser's native one — a native <select>'s
   own arrow can't be repositioned via CSS at all (it's rendered by the OS/
   browser, outside CSS's reach), which is why it read as vertically
   off-center: it wasn't actually being positioned by any of this file's
   rules, it was just wherever each browser happens to draw its own. This
   strips it (appearance: none, all three prefixes for cross-browser) and
   draws a real one via background-image, positioned with `center` on the
   vertical axis so it's genuinely centered rather than eyeballed with
   margins, and enough right padding that it isn't flush against the
   border. Left padding is untouched (inherits the shared input/select/
   textarea rule already standardized site-wide), so option text starts at
   the same x-position in every one of these four fields. */
.jobs-filter-field select {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  /* Safety net, not the primary fix (that's the 2-wide layout above giving
     every field real room) — a native <select>'s closed state can only
     ever show one line, so genuinely unbounded text (a future city name
     longer than anything budgeted for) degrades to a clean "…" instead of
     a hard clip. The OPEN dropdown list is unaffected — browsers size that
     to fit its longest option regardless of the closed box's width, so
     nothing is ever actually hidden, only the closed-state preview. */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Region -> branch hierarchy in the Branch/Location dropdown (jobs.js's
   populateFilterSelects, one <optgroup> per city). Real ceiling on what's
   achievable here: a native <select>'s <option>/<optgroup> list is
   rendered by the OS, not this stylesheet — no browser lets CSS put a
   background tint or hover state on individual options, or control their
   indentation, the way a custom-built combobox could. What genuinely does
   work cross-browser is bolding the group label itself, which is what's
   applied here; anything closer to a fully custom open-state appearance
   (per-option backgrounds, a tinted "currently selected" row) would mean
   replacing this native <select> with a custom listbox component — a
   real UI rebuild, not a CSS fix, and out of scope here unless asked for. */
optgroup {
  font-weight: 700;
  font-style: normal;
  color: var(--color-text);
}
optgroup option {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.jobs-filter-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.active-filters-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.filter-chip-remove:hover { background: var(--color-border); color: var(--color-text); }
.filter-chip-clear-all {
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  width: auto;
}
.filter-chip-clear-all:hover { text-decoration: underline; }

.jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .jobs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .jobs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Redesigned so job INFO leads (client requirement: location is the
   headline detail, not a company logo/QR) — the QR code, previously the
   dominant visual on every card, is now an on-demand popover triggered by
   the QR button in .job-card-actions, freeing the card to read like an
   actual listing rather than a printed flyer thumbnail. Left-aligned, not
   centered, to read more like a real job-board row at a glance. */
.job-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.job-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-top-color: var(--color-primary-hover); }

.job-card-link { display: block; text-decoration: none; color: inherit; }

/* Event landing page (public/event.html): position-first grouping — each
   group heading is a role, the grid underneath is that role's locations.
   .event-location-card reuses .job-card as a whole-card anchor (no
   separate QR-toggle/view-details split needed, just one Apply action). */
.event-position-group { margin-bottom: 36px; }
.event-position-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.event-location-card { text-decoration: none; color: inherit; cursor: pointer; }
.event-location-card .job-card-cta { display: block; margin-top: 10px; }

/* Minimal "event today" tile (index.html/jobs.html, public/lib/event-tile.js)
   — deliberately just a name + one CTA, no position/location breakdown;
   that detail lives one tap away on event.html. */
.active-events-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.event-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.event-tile-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
}
.event-tile-name { flex: 1; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; }
.event-tile-cta { flex-shrink: 0; background: #fff; color: var(--color-primary); width: auto; }

.job-card-category {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}

/* Bold caps + thin fading underline rule, per brand Section 3's job-card
   spec ("Job title bold caps with a thin underline rule, gray-to-
   transparent gradient, matching the ads"). */
.job-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 4px 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, var(--color-text-muted), transparent) 1;
}
/* Location is the most prominent job detail on the card (client
   requirement: applicants shouldn't be able to miss which site a posting
   is at) — bolder and larger than the generic category label above it. */
.job-card-location {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-size: 0.95rem;
}
.job-card-location svg { flex-shrink: 0; }

/* Matches the ad flyers' emphasis on WHERE, not just which branch — shown
   on the card (not just the detail page) since it's exactly the kind of
   thing an applicant scanning many postings decides on at a glance. */
.job-card-deployment-area {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.job-card-deployment-area span:first-child { font-weight: 700; color: var(--color-success-text); }

.job-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.job-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.job-card-cta { flex: 1; width: auto; margin-top: 0; text-align: center; text-decoration: none; }
.job-card-qr-toggle {
  flex: none;
  width: auto;
  margin-top: 0;
  padding: 0 12px;
  gap: 5px;
}
.job-card-qr-toggle.active { background: var(--color-primary-light); border-color: var(--color-primary-border); color: var(--color-primary-active); }

.job-card-qr-popover {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  text-align: center;
}
.job-card-qr-popover img { width: 140px; height: 140px; }
.job-card-qr-popover p { margin: 6px 0 0; font-size: 0.76rem; }

.jobs-load-more-row { display: flex; justify-content: center; margin-top: 24px; }
.jobs-load-more-row button { width: auto; }


/* ── Job Details (public/job.html) ───────────────────────────── */

.job-details-layout {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: Job Information first (what the job is), then the QR/Apply
     panel — a mobile visitor is reading this on their own phone, not
     scanning their own screen with a second device, so the QR isn't the
     first thing they need. */
  grid-template-areas: "info" "qr";
  gap: 24px;
  align-items: start;
}

@media (min-width: 860px) {
  .job-details-layout {
    grid-template-columns: 320px 1fr;
    grid-template-areas: "qr info";
  }
}

.job-details-qr-panel { text-align: center; }

/* Location is the most prominent job detail on this page too (client
   requirement) — sits right under the position title, above every other
   meta row, in the brand accent color with a location pin icon. */
.job-details-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 16px;
  font-size: 1.1rem;
  color: var(--color-primary);
}
.job-details-location svg { flex-shrink: 0; }
.status-meta-row-prominent { font-size: 1.02rem; }
.status-meta-row-prominent .status-meta-label { font-weight: 700; }

/* Deployment Area — matches the ad flyers' format: a labeled line right
   under Location, before the Position Information table, in the brand
   green used for callout labels elsewhere. */
.job-deployment-area {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--color-success-bg);
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
}
.job-deployment-area-label { font-weight: 700; color: var(--color-success-text); margin-right: 6px; }

.job-qualifications-list {
  margin: 0;
  padding-left: 22px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.job-qualifications-list li { margin: 2px 0; }

.job-application-location { margin-top: 18px; }
.job-application-location-text {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.job-application-location-text svg { flex-shrink: 0; margin-top: 3px; color: var(--color-primary); }

.job-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.job-qr-wrap img { width: 220px; height: 220px; }

.job-code-display { font-size: 0.95rem; margin: 4px 0 18px; }

.job-details-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.job-details-actions .btn-primary, .job-details-actions .btn-secondary { width: auto; margin-top: 0; }

.job-details-info h1 { margin: 0 0 4px; font-size: 1.4rem; }
.job-details-info h2 { font-size: 0.95rem; margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }

@media print {
  .no-print { display: none !important; }
  .job-details-layout { grid-template-columns: 1fr; }
}

/* Admin job postings' "View QR" modal — printing scoped to just the QR
   panel (see public/admin-portal/job-postings.js's openQrModal), not the admin
   chrome or the modal's own header/footer. */
@media print {
  body.qr-printing .admin-layout,
  body.qr-printing .modal-header,
  body.qr-printing .modal-footer { display: none !important; }
  body.qr-printing .modal-overlay { position: static; background: none; padding: 0; }
  body.qr-printing .modal-panel { box-shadow: none; border: none; max-width: none; }
}

/* ── AM Overview page (public/am/overview.html) ──────────────
   Each section gets its own accent (icon chip + border tint) instead of
   uniform grey tiles — Needing Attention (warning/amber, the most urgent),
   Upcoming Interviews (success/green, matching the existing "Interview
   Scheduled" badge elsewhere in the app), Outstanding Requirements
   (primary/indigo), Recent Activity (neutral). */

.overview-greeting { margin: 0 0 2px; font-size: 0.9rem; color: var(--color-text-muted); font-weight: 500; }

.overview-card { border-width: 1.5px; }

.overview-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.overview-card-icon svg { width: 21px; height: 21px; }

.overview-icon-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.overview-icon-success { background: var(--color-success-bg); color: var(--color-success-text); }
.overview-icon-primary { background: var(--color-primary-light); color: var(--color-primary-active); }
.overview-icon-neutral { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); }

/* Needing Attention — full-width, top priority */
.overview-attention-card {
  border-color: rgba(146, 64, 14, 0.22);
  padding: 26px 28px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: start;
}
@media (max-width: 720px) {
  .overview-attention-card { grid-template-columns: 1fr; }
}

.overview-attention-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.overview-attention-heading h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.overview-attention-count { font-size: 1.9rem; font-weight: 800; color: var(--color-warning-text); letter-spacing: -0.02em; }
.overview-attention-sub { margin: 0 0 16px; font-size: 0.86rem; color: var(--color-text-muted); }
.overview-attention-list { display: flex; flex-direction: column; gap: 10px; }

.overview-attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  color: inherit;
}
.overview-attention-row:hover .overview-row-name { color: var(--color-primary); text-decoration: underline; }

.overview-row-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.overview-row-meta { font-size: 0.8rem; color: var(--color-text-muted); }
.overview-row-time { font-size: 0.78rem; color: var(--color-warning-text); font-weight: 600; white-space: nowrap; }

.btn-overview-attention {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-text);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn-overview-attention:hover { background: #78350f; color: #fff; }

/* Grid row: Upcoming Interviews (wide) + Outstanding Requirements (narrow) */
.overview-grid-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 900px) { .overview-grid-row { grid-template-columns: 1fr; } }

.overview-section-card { padding: 22px 24px; }
.overview-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.overview-section-head h2 { margin: 0; font-size: 1.02rem; font-weight: 700; }

.overview-interview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
}
.overview-interview-row:last-child { border-bottom: none; padding-bottom: 0; }
.overview-interview-row:hover .overview-row-name { color: var(--color-primary); text-decoration: underline; }

/* width was 76px, which "TODAY"/a 3-letter weekday fit but "TOMORROW"
   (the longest value this ever renders — see interviewDayLabel) did not:
   a single unbreakable word wider than its box just overflows past the
   box's edge instead of wrapping, which was landing directly on top of
   the name next to it. Widened with margin, plus tighter letter-spacing,
   confirmed by rendering it locally before shipping. */
.overview-interview-when {
  flex: none;
  width: 96px;
  text-align: center;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
}
.overview-interview-day { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.overview-interview-time { display: block; font-size: 0.76rem; font-weight: 600; margin-top: 1px; white-space: nowrap; }
.overview-interview-time-end { font-size: 0.7rem; font-weight: 500; opacity: 0.85; margin-top: 0; }

.overview-interview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.overview-interview-mode { flex: none; font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); }
.overview-interview-mode.online { background: var(--color-primary-light); color: var(--color-primary-active); }
.overview-interview-mode.onsite { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); }

.overview-requirements-stat { display: block; text-align: center; padding: 8px 0 18px; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.overview-requirements-stat:hover { background: var(--color-bg); }
.overview-requirements-count { font-size: 2.6rem; font-weight: 800; color: var(--color-primary-active); letter-spacing: -0.02em; line-height: 1; }
.overview-requirements-label { font-size: 0.84rem; color: var(--color-text-muted); font-weight: 600; margin-top: 6px; }
.overview-requirements-breakdown { display: flex; flex-direction: column; gap: 8px; }
.overview-requirements-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  padding: 8px 12px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.overview-requirements-row:hover { background: var(--color-primary-light); }
.overview-requirements-row strong { font-weight: 700; color: var(--color-primary-active); }

.overview-activity-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.overview-activity-row:last-child { border-bottom: none; padding-bottom: 0; }
.overview-activity-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-faint); margin-top: 6px; }
.overview-activity-dot.new { background: var(--color-warning-text); }
.overview-activity-dot.done { background: var(--color-success); }
.overview-activity-dot.scheduled { background: var(--color-primary); }
.overview-activity-text { flex: 1; font-size: 0.87rem; color: var(--color-text-secondary); }

/* ── Staff sign-in (admin-login.html / am/index.html) ────────────
   Was a bare centered card on a flat background — the same treatment as
   every other utility screen, even though this is the entry point staff
   see every single day. Reuses the landing hero's dot-texture wash for
   visual continuity (same hand designed both) instead of a plain gray
   background, and gives the card real presence: a large portal-specific
   icon, a colored top accent, and a properly Microsoft-branded sign-in
   button instead of the site's own green CTA — Microsoft's own identity
   guidelines are explicit that their sign-in button should use their
   button, not a reskinned version of the relying party's brand button. */
.signin-page-bg {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-image:
    radial-gradient(circle, rgba(0, 80, 168, 0.1) 1.4px, transparent 1.4px),
    radial-gradient(circle at 20% 20%, rgba(0, 80, 168, 0.08), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(0, 136, 40, 0.07), transparent 40%),
    linear-gradient(135deg, #eef3fb 0%, #f3f6fd 45%, #fdf9ec 100%);
  background-size: 26px 26px, auto, auto, auto;
  background-position: -6px -6px, 0 0, 0 0, 0 0;
}

.signin-card {
  width: 100%;
  max-width: 480px;
  text-align: center;
  border-top: 4px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.signin-icon-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signin-icon-badge svg { width: 30px; height: 30px; }

.signin-card .badge { margin-bottom: 10px; }
.signin-card h1 { font-size: 1.3rem; }
.signin-card .muted { margin-bottom: 24px; }

/* Microsoft identity branding — light theme, per Microsoft's published
   button guidelines (white surface, #8C8C8C border, #5E5E5E text, Segoe
   UI). Deliberately NOT built on .btn-primary — this button represents
   Microsoft's identity in the sign-in flow, not this app's own brand. */
.btn-ms-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  color: #5e5e5e;
  border: 1px solid #8c8c8c;
  border-radius: 2px;
  padding: 11px 16px;
  font-family: "Segoe UI", var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.btn-ms-signin:hover { background: #f3f3f3; border-color: #5e5e5e; }
.btn-ms-signin:active { background: #eaeaea; }
.ms-logo { flex: none; width: 21px; height: 21px; display: block; }

.signin-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--color-text-faint);
  font-size: 0.78rem;
}
.signin-trust-note svg { width: 13px; height: 13px; flex: none; }
.overview-activity-time { flex: none; font-size: 0.78rem; color: var(--color-text-faint); white-space: nowrap; }