/* ==========================================================================
   NDAYA CHAUFFEURS — Careers page additions
   Loaded only on /careers/, on top of the main stylesheet. Reuses existing
   design tokens (--gold, --black-card, --radius, etc.) from style.css.
   ========================================================================== */

.job-list{display:grid;gap:20px;margin-top:32px}

.job-card{
  background:var(--black-card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:30px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  transition:all .3s var(--ease);
}
.job-card:hover{border-color:var(--gold-dim);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.job-card-title{font-family:var(--font-display);font-size:1.3rem;color:var(--white);margin-bottom:10px}
.job-meta{display:flex;flex-wrap:wrap;gap:10px}
.job-summary{color:#C9C7C0;font-size:.92rem;margin-top:12px;max-width:640px}
.job-card-actions{flex-shrink:0}

.empty-state{
  background:var(--black-card);
  border:1px dashed var(--gold-dim);
  border-radius:var(--radius);
  padding:48px 32px;
  text-align:center;
}
.empty-state h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:10px;color:var(--white)}
.empty-state p{color:#C9C7C0;max-width:480px;margin:0 auto}

.general-app-card{
  background:rgba(201,168,76,.06);
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  padding:28px 32px;
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.general-app-card p{color:#C9C7C0;font-size:.92rem;max-width:520px}

.upload-field{
  border:1px dashed rgba(255,255,255,.22);
  border-radius:10px;
  padding:18px;
  background:rgba(255,255,255,.02);
  font-size:.85rem;
  color:#B9B7AF;
}
.upload-field input[type="file"]{
  width:100%;
  color:#C9C7C0;
  font-size:.86rem;
}
.upload-hint{font-size:.76rem;color:#8E8C85;margin-top:6px}

/* Fix: the position <select>'s near-transparent background isn't dark enough
   for Chrome/Edge/Firefox to auto-detect a dark theme for the native
   dropdown popup, so it renders with a white list. Forcing color-scheme
   directly on the control fixes the popup (and any native date pickers).
   Some browsers also need the <option> elements styled explicitly. */
.field select{
  color-scheme:dark;
  background-color:#18170F;
}
.field select option{
  background-color:#18170F;
  color:#FFFFFF;
}

@media (max-width:640px){
  .job-card,.general-app-card{flex-direction:column;align-items:flex-start}
  .job-card-actions{width:100%}
  .job-card-actions .btn{width:100%}
}

.field-note{font-size:.78rem;color:#9C9A93;margin-top:-2px}