/* ══════════════════════════════════════════════════════════════════════
   Careers portal — public application flow + HR admin dashboard
   Reuses tokens.css / layout.css / components.css. This file only adds
   the pieces that are unique to /careers/ and /careers/admin/.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Trust strip ─────────────────────────────────────────────────────── */
.trust-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.trust-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.6); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.trust-pill span.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--mint); }

/* ─── Job listing ──────────────────────────────────────────────────────── */
.jobs-list { display: grid; gap: 14px; }
.job-card { border: 1px solid var(--line); background: rgba(255,253,248,.78); border-radius: 26px; padding: 24px 26px; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(112,224,163,.5); }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.job-card h3 { margin: 0 0 6px; font-size: 21px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.job-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 800; color: var(--ink-2); background: rgba(255,255,255,.6); }
.job-summary { color: var(--muted); margin: 12px 0 0; max-width: 640px; }
.job-card-actions { display: flex; gap: 10px; flex-shrink: 0; }
.job-detail { display: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.job-detail.open { display: block; }
.job-detail h4 { margin: 14px 0 6px; font-size: 15px; }
.job-detail ul { margin: 0; padding-left: 20px; color: var(--muted); }
.jobs-empty { border: 1px dashed var(--line-strong); border-radius: 26px; padding: 40px; text-align: center; color: var(--muted); }
.jobs-empty strong { display: block; color: var(--ink); font-size: 19px; margin-bottom: 8px; }

/* ─── Job listing: skeleton loading state ──────────────────────────────
   Shown immediately while Firestore fetches jobs, so the page never looks
   "stuck" during the network round-trip — minimal, light shimmer, no
   layout shift once real cards swap in (same .job-card shape/spacing). */
.job-card.skeleton { cursor: default; pointer-events: none; }
.job-card.skeleton:hover { transform: none; box-shadow: var(--shadow-sm); }
.skeleton-bar { border-radius: 999px; background: linear-gradient(90deg, rgba(15,45,36,.07) 25%, rgba(15,45,36,.14) 37%, rgba(15,45,36,.07) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.6s ease-in-out infinite; }
.skeleton-bar.title { height: 20px; width: 46%; margin-bottom: 12px; }
.skeleton-bar.meta { height: 13px; width: 30%; display: inline-block; margin-right: 8px; border-radius: 999px; }
.skeleton-bar.summary { height: 13px; width: 78%; margin-top: 14px; }
.skeleton-bar.summary.short { width: 55%; margin-top: 8px; }
.skeleton-bar.btn { height: 38px; width: 96px; border-radius: 12px; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } }

/* ─── Apply modal — extra form widgets ────────────────────────────────── */
.apply-modal { width: min(760px, calc(100vw - 28px)); }
.form-section-title { font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--forest-2); margin: 22px 0 10px; }
.form-section-title:first-child { margin-top: 4px; }

.dropzone { border: 1.5px dashed var(--line-strong); border-radius: 20px; padding: 22px; text-align: center; cursor: pointer; background: rgba(255,255,255,.5); transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--mint); background: var(--mint-2); }
.dropzone input { display: none; }
.dropzone-icon { width: 42px; height: 42px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 14px; background: var(--mint-2); font-size: 19px; }
.dropzone strong { display: block; color: var(--ink); font-size: 14.5px; }
.dropzone small { color: var(--muted); }
.dropzone.has-file { border-style: solid; border-color: rgba(112,224,163,.7); }
.file-chip { display: none; align-items: center; gap: 10px; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: white; text-align: left; }
.file-chip.show { display: flex; }
.file-chip .file-name { font-weight: 850; font-size: 13.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { border: 0; background: rgba(239,107,79,.12); color: var(--coral); border-radius: 999px; width: 26px; height: 26px; font-weight: 900; flex-shrink: 0; }
.autofill-note { display: none; margin-top: 10px; font-size: 12.5px; color: var(--forest-2); background: var(--mint-2); border-radius: 12px; padding: 8px 12px; }
.autofill-note.show { display: block; }

.day-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.day-chip { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.day-chip.active { background: var(--forest); color: white; border-color: var(--forest); }

.hours-picker { display: flex; align-items: center; gap: 14px; }
.hours-picker input[type="range"] { flex: 1; accent-color: var(--forest); }
.hours-value { font-weight: 900; color: var(--forest); min-width: 88px; text-align: right; font-size: 14px; }

.consent-row { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: rgba(255,255,255,.5); }
.consent-row input { margin-top: 3px; accent-color: var(--forest); }
.consent-row label { font-size: 13px; color: var(--ink-2); }

.apply-status { min-height: 20px; font-weight: 750; }

/* ─── Admin: applicant file status text ────────────────────────────────── */
.apply-status.ok { color: var(--forest-2); }
.apply-status.err { color: var(--coral); }

/* ─── Admin: login gate ────────────────────────────────────────────────── */
.admin-login-wrap { min-height: 78vh; display: grid; place-items: center; padding: 40px 0; }
/* Honeypot: kept in the DOM/tab order-free and visually present to sighted
   users would be suspicious, so it's pushed off-screen instead of display:none
   (which some bots skip) — real visitors never see or fill it. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.login-lockout { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.admin-login-card { width: min(420px, 100%); border: 1px solid var(--line); border-radius: 30px; background: rgba(255,253,248,.85); box-shadow: var(--shadow-lg); padding: 34px; }
.admin-login-card h1 { font-size: 28px; margin: 14px 0 6px; }

/* ─── Admin: shell / tabs ──────────────────────────────────────────────── */
.admin-shell { display: none; }
.admin-shell.show { display: block; }
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.admin-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(15,45,36,.045); }
.admin-tab { border: 0; background: transparent; border-radius: 999px; padding: 10px 18px; font-weight: 850; color: var(--ink-2); font-size: 14px; }
.admin-tab.active { background: var(--forest); color: white; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* ─── Admin: roles ─────────────────────────────────────────────────────── */
.role-form-card { border: 1px solid var(--line); border-radius: 28px; background: rgba(255,253,248,.8); padding: 26px; box-shadow: var(--shadow-sm); margin-bottom: 22px; display: none; }
.role-form-card.show { display: block; }
.role-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-role-card { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.status-badge.draft { background: rgba(124,139,133,.16); color: var(--ink-3); }
.status-badge.published { background: var(--mint-2); color: var(--forest-2); }
.status-badge.closed { background: rgba(239,107,79,.14); color: var(--coral); }
.status-badge.new { background: rgba(49,95,146,.14); color: var(--blue); }
.status-badge.reviewing { background: rgba(244,201,93,.22); color: #8a6a13; }
.status-badge.interview { background: rgba(203,185,255,.32); color: #5d3fb0; }
.status-badge.offer { background: var(--mint-2); color: var(--forest-2); }
.status-badge.hired { background: var(--forest); color: white; }
.status-badge.rejected { background: rgba(239,107,79,.14); color: var(--coral); }

/* ─── Admin: applicants ────────────────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.filter-bar select, .filter-bar input { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: white; font-size: 13.5px; }
.filter-bar input[type="search"] { flex: 1; min-width: 180px; }
.applicant-list { display: grid; gap: 12px; }
.applicant-card { border: 1px solid var(--line); border-radius: 22px; background: rgba(255,253,248,.78); padding: 18px 20px; }
.applicant-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; cursor: pointer; }
.applicant-who strong { font-size: 16px; }
.applicant-who .muted { font-size: 13px; }
.applicant-right { display: flex; align-items: center; gap: 10px; }
.applicant-detail { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.applicant-detail.open { display: block; }
.applicant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.applicant-grid div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: white; font-size: 13.5px; }
.applicant-grid div small { display: block; color: var(--muted); text-transform: uppercase; font-size: 10.5px; font-weight: 900; letter-spacing: .06em; margin-bottom: 3px; }
.applicant-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.applicant-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.applicant-actions select { border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; background: white; }
.applicant-notes textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-height: 70px; margin-top: 8px; }
.empty-note { color: var(--muted); text-align: center; padding: 30px; }

/* ─── Admin: destructive actions ───────────────────────────────────────── */
.btn.danger { background: rgba(239,107,79,.12); color: var(--coral); border: 1px solid rgba(239,107,79,.28); }
.btn.danger:hover { background: rgba(239,107,79,.2); }
.btn.danger:disabled { opacity: .45; pointer-events: none; }

@media (max-width: 900px) {
  .role-row, .applicant-grid { grid-template-columns: 1fr; }
  .job-card-actions { width: 100%; }
  .job-card-actions .btn { flex: 1; }
}