/* Candidate Portal, Employer Portal & LOS shared component styles -
   layered on top of tokens.css's MM design tokens (ivory/gold/
   champagne/charcoal, aliased here under the navy/gold/cream variable
   names this file already uses), never redefining them. */

/* Deliberately NOT named .portal-panel - the codebase this was forked
   from used that class for a dark "Coming Soon" component (white h1/p
   forced by .portal-panel h1/.portal-panel p there) which this
   white-background card would silently inherit and render invisible
   white-on-white. No such class exists in this repo's tokens.css, but
   the name is kept clear of it in case a future shared stylesheet
   reintroduces one. */
.portal-auth-panel {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 18px 40px rgba(7, 26, 47, 0.08);
}

.portal-auth-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 22px;
  border-bottom: 1px solid var(--hairline);
}
.portal-auth-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 20px;
  font: inherit;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.portal-auth-tab.is-active { color: var(--navy); border-bottom-color: var(--gold); }
.portal-auth-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.portal-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .portal-form-grid { grid-template-columns: 1fr 1fr; }
  .portal-form-field-full { grid-column: 1 / -1; }
}
.portal-form-field { display: flex; flex-direction: column; gap: 6px; }
.portal-form-field label { font-weight: 700; font-size: 0.92rem; color: var(--navy); }
.portal-form-field small { color: var(--text-muted); font-size: 0.8rem; }
.portal-form-field input,
.portal-form-field select,
.portal-form-field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  width: 100%;
}
.portal-form-field input:focus-visible,
.portal-form-field select:focus-visible,
.portal-form-field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.portal-form { margin-top: 8px; }
.portal-form .button { margin-top: 16px; }
.portal-form-message { min-height: 1.4em; margin-top: 12px; font-weight: 700; color: var(--navy); }
.portal-form-message.is-error { color: #a3312c; }
.portal-form-footnote { margin-top: 10px; }

.link-button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { color: var(--gold); }

.portal-inline-form { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.portal-inline-form input {
  flex: 1 1 200px;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

/* Dashboard shell */
.portal-dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.portal-dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.portal-notification-bell {
  position: relative;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px;
}
.portal-notification-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.portal-notification-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  width: min(340px, 90vw);
  max-height: 380px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(7, 26, 47, 0.16);
  padding: 12px;
  margin-top: 8px;
}
.portal-notification-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-notification-item { padding: 10px; border-radius: 8px; background: var(--light); }
.portal-notification-item.is-unread { background: rgba(201, 162, 39, 0.14); cursor: pointer; }
.portal-notification-item p { margin: 4px 0; }

/* Cards & grids */
.portal-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}
.portal-card h2 { margin-top: 0; color: var(--navy); }
.portal-card-note { color: var(--text-muted); font-size: 0.92rem; }
.portal-card-note.is-error { color: #a3312c; }
.portal-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 800px) {
  .portal-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Profile completeness: "Next" action link - deliberately NOT the
   default blue browser link colour, and distinct from the plain
   .link-button used elsewhere (heavier weight, gold underline) so it
   reads as the panel's one clearly-tappable primary action. */
.portal-next-action { font-weight: 600; color: var(--navy); margin: 2px 0 14px; }
.portal-next-action-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: 3px;
}
.portal-next-action-link:hover { color: var(--gold-soft); }
.portal-next-action-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Checklist - one cohesive tappable row per section, not a control
   nested inside a pill. Rows are plain <li> for completed sections
   (nothing to do there) and a single full-row <button> for incomplete
   ones, so there is never a button nested inside another interactive
   wrapper. */
.portal-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.profile-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--light);
}
.profile-check-row.is-complete { background: rgba(45, 138, 86, 0.08); }

.profile-check-row-button {
  appearance: none;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.profile-check-row-button:hover { background: rgba(7, 26, 47, 0.05); }
.profile-check-row-button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Status icon - a plain neutral ring for "not yet complete" (never a
   bare "○" character, which reads as a broken radio control) and a
   filled green circle with a tick for "complete". Never emoji. */
.profile-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.profile-check-icon.is-complete { background: #2d8a56; border-color: #2d8a56; }

.profile-check-label { flex: 1 1 auto; font-size: 0.92rem; color: var(--navy); }
.profile-check-row.is-complete .profile-check-label { font-weight: 700; }

/* "Required"/"Recommended" badge - a compact, clearly-labelled chip
   rather than a detached span, so the distinction reads as part of
   the row instead of floating text. */
.profile-check-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.profile-check-badge-required { background: rgba(201, 162, 39, 0.2); color: var(--navy); }
.profile-check-badge-recommended { background: var(--white); color: var(--text-muted); border: 1px solid var(--hairline); }

.profile-check-chevron { flex-shrink: 0; color: var(--text-muted); font-size: 1.15rem; line-height: 1; }

.portal-checklist-summary { list-style: none; font-weight: 700; color: var(--navy); font-size: 0.85rem; margin-top: 4px; }

@media (max-width: 480px) {
  .profile-check-label { font-size: 0.88rem; }
  .profile-check-badge { font-size: 0.62rem; padding: 3px 6px; }
}

/* Tags (skills) */
.portal-tag-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.portal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--light);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 0.9rem;
}
.portal-tag-remove {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.portal-tag-remove:hover { color: #a3312c; }

/* Experience */
.portal-experience-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.portal-experience-item-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Vacancies & applications */
.portal-vacancy-list,
.portal-application-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.portal-vacancy-item,
.portal-application-item {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 16px;
}
.portal-vacancy-item-header,
.portal-application-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.portal-badge {
  display: inline-block;
  background: rgba(201, 162, 39, 0.18);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.portal-badge-urgent { background: rgba(163, 49, 44, 0.14); color: #a3312c; }
.portal-badge-muted { background: var(--light); color: var(--text-muted); }
.portal-empty-note { color: var(--text-muted); }

.portal-progress-track { background: var(--light); border-radius: 999px; height: 8px; margin: 10px 0; overflow: hidden; }
.portal-progress-fill { background: var(--gold); height: 100%; transition: width 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .portal-progress-fill { transition: none; }
}

.portal-progress-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.portal-progress-header h2 { margin: 0; }
.portal-progress-percent { font-size: 1.3rem; font-weight: 800; color: var(--navy); }

.portal-submit-profile-row { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-confirmation-banner {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(201, 162, 39, 0.16);
  color: var(--navy);
  font-weight: 700;
}

/* Typed date entry - a text field candidates can type into directly,
   plus a small native calendar picker alongside it as an optional
   alternative; both stay in sync (see candidate-portal.js). */
.portal-date-input { display: flex; align-items: center; gap: 8px; }
.portal-date-input input[type="text"] { flex: 1 1 auto; min-width: 0; }
.portal-date-picker {
  flex: 0 0 auto;
  width: 42px;
  padding: 8px 4px !important;
  color: transparent;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23063054' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/18px no-repeat;
}
.portal-date-picker::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.portal-field-error { color: #a3312c; font-size: 0.82rem; margin: 0; min-height: 1.1em; }
.portal-field-hint { color: var(--text-muted); font-size: 0.82rem; margin: 4px 0 0; }

.portal-checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.9rem; margin-top: 6px; cursor: pointer; }
.portal-checkbox-label input[type="checkbox"] { width: auto; }

/* Layered registration consent - required legal acknowledgement plus a
   separate, optional, unticked marketing checkbox. Neither box starts
   ticked; the two are visually distinct so marketing never reads as
   part of the required step. */
.legal-consent-block { margin-top: 16px; padding: 14px 16px; border: 1px solid #e2ddd0; border-radius: 8px; background: #faf8f3; }
.legal-consent-summary { font-size: 0.85rem; color: var(--navy); margin: 0 0 10px; }
.legal-consent-checkbox { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 0.88rem; cursor: pointer; margin-bottom: 8px; }
.legal-consent-checkbox:last-child { margin-bottom: 0; }
.legal-consent-checkbox input[type="checkbox"] { width: auto; margin-top: 3px; flex-shrink: 0; }
.legal-consent-optional { padding-top: 8px; border-top: 1px dashed #ddd5c3; color: #5b5548; }

/* Modal */
.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
/* The [hidden] attribute is only display:none in the user-agent
   stylesheet, which author CSS overrides at equal specificity - without
   this, .portal-modal's own display:flex above wins and every modal
   (Candidate/Employer/LOS) renders open by default. */
.portal-modal[hidden] {
  display: none;
}
.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 16, 28, 0.55);
}
.portal-modal-panel {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  width: min(560px, 100%);
  z-index: 1;
  margin-top: 40px;
}
.portal-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.portal-modal-close {
  appearance: none;
  border: 1px solid var(--hairline);
  background: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
}
.portal-timeline { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-timeline li { border-left: 3px solid var(--gold); padding-left: 12px; }

@media (max-width: 480px) {
  .portal-panel { padding: 24px 18px; }
  .portal-dashboard-header { flex-direction: column; }
  .portal-notification-panel { right: -8px; width: min(300px, 94vw); }
}

/* -------------------------------------------------------------------
   Updates from MM Recruitment - the fuller notification centre (the bell
   above stays as a quick-access indicator, reading the same data).
   ------------------------------------------------------------------- */
.portal-updates-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-update-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--light);
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
}
.portal-update-item.is-unread { background: rgba(201, 162, 39, 0.14); }
.portal-update-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.portal-update-unread-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 6px;
}
.portal-update-body { flex: 1 1 auto; min-width: 0; }
.portal-update-body p { margin: 4px 0; word-break: break-word; }

/* Reply composer - the candidate-facing half of two-way messaging. */
.portal-message-composer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.portal-message-composer label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.portal-message-composer textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  resize: vertical;
  margin-bottom: 8px;
}
/* .portal-card-note.is-error's colour is already defined globally above. */

/* Your progress */
.portal-progress-steps {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.portal-progress-step {
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--text-muted);
}
.portal-progress-step.is-complete { border-color: rgba(201, 162, 39, 0.5); color: var(--navy); }
.portal-progress-step.is-current { border-color: var(--gold); background: rgba(201, 162, 39, 0.14); color: var(--navy); font-weight: 700; }

/* .portal-badge sets display:inline-block unconditionally, which
   defeats the native [hidden] attribute (equal-specificity author
   rule beats the UA default) - a real bug found via testing: the
   unread-count badge never actually hid itself once dismissed.
   Every other .portal-badge use is a static, never-toggled label, so
   this is scoped to the one element that IS toggled rather than
   changed on the shared class itself. */
#portal-updates-unread-badge[hidden] { display: none; }
#employer-inbox-action-count[hidden],
#employer-inbox-updates-unread-badge[hidden] { display: none; }

/* -------------------------------------------------------------------
   Dashboard / Inbox / Company navigation (Employer Portal) - same
   visual language as .portal-auth-tabs, under its own name since it
   lives in a different context (the signed-in dashboard, not the
   signed-out auth panel).
   ------------------------------------------------------------------- */
.portal-tab-nav {
  display: flex;
  gap: 4px;
  margin: 4px 0 22px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.portal-tab-nav-item {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 20px;
  font: inherit;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.portal-tab-nav-item.is-active { color: var(--navy); border-bottom-color: var(--gold); }
.portal-tab-nav-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.portal-tab-nav-badge { background: #a3312c; color: var(--white); }
.portal-tab-nav-badge[hidden] { display: none; }