/* ==========================================================================
   RED DUNE — CAREERS PORTAL
   Login, register, my-account and the admin dashboard.
   Uses the same tokens as the rest of the site — colours live in theme.css.
   ========================================================================== */

/* ------------------------------------------------------------- CARDS */
.portal-wrap { max-width: 460px; margin-inline: auto; }
.portal-wrap--wide { max-width: 940px; }
.portal-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px);
}
.portal-card + .portal-card { margin-top: 20px; }
.portal-card h2 { font-size: var(--fs-h3); margin-bottom: .35em; }
.portal-card > p.lead { margin-bottom: 1.4em; }
.portal-foot {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--muted); text-align: center;
}
.portal-foot a { color: var(--brand); font-weight: var(--fw-semibold); }

.portal-msg {
  margin-bottom: 18px; padding: 12px 15px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); border: 1px solid transparent;
}
.portal-msg.is-bad  { background: #FEF3F2; border-color: #FDA29B; color: #B42318; }
.portal-msg.is-good { background: #ECFDF3; border-color: #A6F4C5; color: #067647; }
.portal-msg.is-info { background: var(--bg-alt); border-color: var(--border); color: var(--heading); }

.portal-empty {
  text-align: center; padding: 40px 20px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: var(--bg-alt); color: var(--muted);
}
.portal-empty p { margin-bottom: 18px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- ACCOUNT */
.account-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.account-head h2 { margin: 0; }
.account-head .muted { color: var(--muted); font-size: var(--fs-sm); }

.app-row {
  display: block;
  padding: 18px 20px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.app-row + .app-row { margin-top: 10px; }
.app-row:hover { border-color: var(--brand-soft); box-shadow: var(--shadow-sm); }
.app-row-title {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  color: var(--heading); font-size: 1.0625rem;
}
.app-row-title:hover { color: var(--brand); }
.app-row-meta { font-size: var(--fs-xs); color: var(--muted); margin: 4px 0 0; }

.app-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}

/* Progress tracker — where the application stands. No dates by design. */
.app-track {
  list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 6px 0;
}
.app-track li {
  position: relative; flex: 1 1 0; min-width: 96px;
  padding: 22px 8px 0 0;
  font-size: var(--fs-xs); line-height: 1.3; color: var(--muted);
}
.app-track li::before {                      /* connector */
  content: ""; position: absolute; left: 7px; right: 0; top: 6px;
  height: 2px; background: var(--border);
}
.app-track li:last-child::before { display: none; }
.app-track-dot {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--border);
}
.app-track li.is-done { color: var(--heading); }
.app-track li.is-done::before { background: #2f9e5c; }
.app-track li.is-done .app-track-dot { background: #2f9e5c; border-color: #2f9e5c; }
.app-track li.is-now {
  color: var(--heading); font-family: var(--font-heading); font-weight: var(--fw-semibold);
}
.app-track li.is-now .app-track-dot {
  background: #fff; border-color: #2f9e5c;
  box-shadow: 0 0 0 3px rgba(47,158,92,.18);
}
.app-track li.is-next .app-track-dot { border-style: dashed; }
.app-track--closed li.is-closed { color: #B42318; }
.app-track--closed li.is-closed .app-track-dot { background: #B42318; border-color: #B42318; }
.app-track--closed li.is-done::before { background: var(--border); }

@media (max-width: 620px) {
  .app-track { display: block; }
  .app-track li { padding: 0 0 14px 24px; min-width: 0; }
  .app-track li::before {
    left: 6px; top: 14px; bottom: -4px; right: auto;
    width: 2px; height: auto;
  }
  .app-track li:last-child { padding-bottom: 0; }
}

.status-pill {
  display: inline-flex; align-items: center; flex: none;
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-xs); letter-spacing: .02em;
  border: 1px solid transparent;
}
.status-pill--neutral { background: var(--bg-alt); color: var(--muted);   border-color: var(--border); }
.status-pill--info    { background: #EFF8FF;      color: #175CD3;         border-color: #B2DDFF; }
.status-pill--good    { background: #ECFDF3;      color: #067647;         border-color: #A6F4C5; }
.status-pill--bad     { background: #FEF3F2;      color: #B42318;         border-color: #FDA29B; }

/* ----------------------------------------------------------- ADMIN */
.admin-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.admin-bar select, .admin-bar input {
  height: 44px; padding: 0 14px; min-width: 170px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: var(--fs-sm); color: var(--heading);
}
.admin-bar input { flex: 1 1 220px; min-width: 200px; }
.admin-bar select:focus, .admin-bar input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.admin-count { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.admin-table th {
  text-align: left; padding: 15px 18px; white-space: nowrap;
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.admin-table td { padding: 15px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: #FCFCFC; }
.admin-sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.admin-empty { text-align: center; color: var(--muted); padding: 40px 20px !important; }

.admin-files { display: flex; flex-wrap: wrap; gap: 6px; }
.file-link {
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: #fff;
  font-size: var(--fs-xs); font-family: var(--font-heading); font-weight: var(--fw-semibold);
  color: var(--brand); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.file-link:hover { background: var(--brand-tint); border-color: var(--brand-soft); }
.file-link:disabled { opacity: .5; cursor: wait; }

.admin-status {
  height: 38px; padding: 0 10px; max-width: 160px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: var(--fs-xs); color: var(--heading);
}

/* Detail drawer */
.admin-detail[hidden] { display: none !important; }
.admin-detail {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(11, 11, 11, .55);
  display: grid; place-items: center; padding: 20px;
}
.admin-detail-inner {
  background: #fff; border-radius: var(--radius-lg);
  width: min(720px, 100%); max-height: 84vh; overflow: auto;
  padding: clamp(24px, 4vw, 38px);
}
.admin-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.admin-detail-head h3 { margin: 0; }
.detail-dl { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 10px 20px; margin: 0; font-size: var(--fs-sm); }
.detail-dl dt { color: var(--muted); text-transform: capitalize; }
.detail-dl dd { margin: 0; color: var(--heading); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .detail-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-dl dt { margin-top: 10px; }
}

/* --------------------------------------------- LOGIN GATE ON APPLY PAGE */
.apply-gate { text-align: center; padding: clamp(30px, 5vw, 56px) 0; }
.apply-gate .icon-box { margin: 0 auto 22px; background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }

/* ------------------------------------------- SHOW / HIDE PASSWORD BUTTON */
/* portal.js wraps every password box in .pw-wrap and appends the eye button,
   so login, register, reset-password and account all get this for free. */
.pw-wrap { position: relative; display: block; }

/* Higher specificity than the base `.field input` rule, so the text never
   runs underneath the button. */
.field .pw-wrap input,
.pw-wrap input { padding-right: 46px; }

.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle svg { width: 19px; height: 19px; }
.pw-toggle:hover { color: var(--brand); background: var(--brand-tint); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Edge and Chrome add their own reveal control — hide it so there is only one. */
.pw-wrap input::-ms-reveal,
.pw-wrap input::-ms-clear { display: none; }

/* -------------------------------------------------- PORTAL FORM SPACING */
/* The portal cards stack .field blocks directly on top of each other, so the
   password box was touching the button underneath. Scoped to .portal-card so
   the apply form (which uses .form-grid with its own gap) is unaffected. */
.portal-card form > .field + .field { margin-top: 16px; }
.portal-card form > .btn { margin-top: 20px; }

/* ------------------------------------------------------- CONFIRM DIALOG */
/* portal.js ka confirmDialog() — admin-detail wala overlay dobara istemal
   karta hai, bas andar ka matn thora saans le sake. */
.confirm-body p { margin: 0; color: var(--body); font-size: var(--fs-sm); line-height: 1.65; }
.confirm-body p + p { margin-top: 10px; }
.confirm-body strong { color: var(--heading); }

/* ================================================== ASSESSMENTS (dashboard) */
.admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.link-row { display: flex; gap: 8px; align-items: center; }
.link-row input {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-alt); font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs); color: var(--heading);
}

/* ------------------------------------------------------------- THE PAPER */
.paper-wrap[hidden] { display: none !important; }
.paper-wrap {
  position: fixed; inset: 0; z-index: 140; overflow: auto;
  background: var(--bg-alt);
}
.paper-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px clamp(14px, 3vw, 28px);
  background: #171717;
}

.paper {
  position: relative;
  max-width: 820px; margin: clamp(16px, 3vw, 32px) auto clamp(40px, 8vw, 80px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 46px);
}

/* Pass / fail ki mohar — header ki apni jagah leti hai, upar tairti nahi.
   Absolute rakhi thi to print par har safhe par dohrati thi. */
.paper-stamp {
  align-self: center; flex: none;
  transform: rotate(-8deg);
  padding: 7px 24px; border-radius: 6px;
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 3.4vw, 2rem); letter-spacing: .14em;
  opacity: .92; pointer-events: none; white-space: nowrap;
}
.paper-stamp--pass { color: #067647; border: 4px solid #067647; }
.paper-stamp--fail { color: #B42318; border: 4px solid #B42318; }

.paper-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 22px; border-bottom: 2px solid #171717;
}
.paper-brand {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 1.375rem; letter-spacing: .04em; color: #171717;
}
.paper-brand span { color: var(--brand); }
.paper-sub { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.paper-meta { flex: 1 1 220px; font-size: var(--fs-sm); color: var(--body);
  line-height: 1.6; text-align: right; }
.paper-meta b { color: var(--heading); font-size: 1.0625rem; }
@media (max-width: 560px) { .paper-meta { text-align: left; } }

.paper-score {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 16px 18px; margin-bottom: 28px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
@media (max-width: 560px) { .paper-score { grid-template-columns: repeat(2, 1fr); } }
.paper-score span { display: block; font-size: var(--fs-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.paper-score b { font-family: var(--font-heading); font-size: 1.125rem; color: var(--heading); }
.paper-score .is-pass { color: #067647; }
.paper-score .is-fail { color: #B42318; }

.paper-qs { margin: 0; padding: 0 0 0 1.5em; }
.paper-q { margin-bottom: 22px; padding-left: 6px; break-inside: avoid; page-break-inside: avoid; }
.paper-q.is-right { border-left: 3px solid #A6F4C5; }
.paper-q.is-wrong { border-left: 3px solid #FDA29B; }
.paper-q.is-blank { border-left: 3px solid var(--border); }
.paper-qtext { font-weight: var(--fw-semibold); color: var(--heading); margin-bottom: 8px; line-height: 1.5; }

.paper-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.paper-opts li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--fs-sm); color: var(--body); padding: 4px 8px; border-radius: 4px;
}
.paper-opts li.is-correct { background: #ECFDF3; color: #05603A; }
.paper-opts li.is-chosen  { background: #FEF3F2; color: #912018; }
.paper-key { flex: none; font-weight: var(--fw-bold); color: var(--muted); width: 1.2em; }
.paper-tag {
  margin-left: auto; flex: none; font-style: normal;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase;
}
.paper-tag--correct { color: #067647; }
.paper-tag--chosen  { color: #B42318; }
.paper-note { margin-top: 6px; font-size: var(--fs-xs); color: #B42318; font-weight: var(--fw-semibold); }

.paper-foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted); text-align: center;
}

/* --------------------------------------------------------------- PRINTING */
@media print {
  /* Paper khula ho to sirf wahi chhape.
     `display:none` yahan kaam nahi karta — .paper-wrap khud <main> ke andar
     hai, to body ke direct children chhupate hi paper bhi gayab ho jata tha
     (poora safha khali chhapta tha). `visibility` nesting se mutasir nahi
     hoti, is liye woh sahi auzaar hai. */
  body.printing-paper { visibility: hidden !important; background: #fff !important; }
  body.printing-paper .paper-wrap,
  body.printing-paper .paper-wrap * { visibility: visible !important; }
  body.printing-paper .paper-wrap {
    position: absolute !important; left: 0; top: 0; width: 100%;
    overflow: visible !important; background: #fff !important;
  }
  .no-print, .no-print * { display: none !important; visibility: hidden !important; }
  .paper {
    max-width: none; margin: 0; border: 0; border-radius: 0; padding: 0;
  }
  .paper-stamp { opacity: 1; }
  .paper-opts li.is-correct { background: #ECFDF3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .paper-opts li.is-chosen  { background: #FEF3F2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .paper-stamp--pass, .paper-stamp--fail { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 14mm; }
}