body {
  font-family: var(--font-body);
  color: var(--neutral-900);
  background-color: var(--neutral-50);
}

a {
  color: var(--oriana-navy);
}
a:hover {
  color: var(--oriana-navy-dark);
}

::placeholder {
  color: var(--neutral-400);
  opacity: 1;
}

:focus-visible {
  outline: 2px solid var(--oriana-navy);
  outline-offset: 2px;
}

/* Bootstrap's own focus rules on these components (.btn, .nav-link,
   .page-link, .navbar-toggler, .form-control, .form-select,
   .form-check-input) set `outline: 0` plus a default Bootstrap-blue
   box-shadow, at the same specificity as the bare :focus-visible rule
   above — silently replacing the brand navy focus ring with Bootstrap
   blue on nearly every interactive element (buttons, nav links,
   pagination links, the navbar toggler, text inputs, selects,
   checkboxes/radios) whenever it's keyboard-focused. Re-assert the
   navy ring here so it wins the cascade tie. */
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.navbar-toggler:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--oriana-navy);
  outline-offset: 2px;
  box-shadow: none;
}
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  border-color: var(--oriana-navy);
}

/* Buttons */
.btn-oriana-primary {
  background-color: var(--oriana-navy);
  border-color: var(--oriana-navy);
  color: var(--neutral-0);
}
.btn-oriana-primary:hover,
.btn-oriana-primary:focus {
  background-color: var(--oriana-navy-dark);
  border-color: var(--oriana-navy-dark);
  color: var(--neutral-0);
}
.btn-oriana-cta {
  background-color: var(--oriana-orange);
  border-color: var(--oriana-orange);
  color: var(--neutral-0);
  font-weight: 600;
}
.btn-oriana-cta:hover,
.btn-oriana-cta:focus {
  background-color: var(--oriana-orange-dark);
  border-color: var(--oriana-orange-dark);
  color: var(--neutral-0);
}
.btn-oriana-secondary {
  background-color: var(--neutral-0);
  border-color: var(--oriana-navy);
  color: var(--oriana-navy);
}
.btn-oriana-secondary:hover,
.btn-oriana-secondary:focus {
  background-color: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
}

/* Cards */
.card-oriana {
  border: var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background-color: var(--neutral-0);
}

/* Badges (status) — never rely on color alone: always paired with text */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.badge-status--new {
  background: var(--neutral-200);
  color: var(--neutral-800);
}
.badge-status--review {
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
}
.badge-status--shortlisted {
  background: var(--oriana-green-tint);
  color: var(--oriana-green-dark);
}
.badge-status--interview {
  background: var(--oriana-orange-tint);
  color: var(--oriana-orange-dark);
}
.badge-status--selected {
  background: var(--oriana-green);
  color: var(--neutral-0);
}
.badge-status--rejected {
  background: var(--surface-danger-tint);
  color: var(--surface-danger);
}
.badge-status--onhold {
  background: var(--surface-warning-bg);
  color: var(--surface-warning-text);
}
.settings-form {
  max-width: 640px;
}
.site-banner {
  background: var(--oriana-orange-tint);
  color: var(--oriana-orange-dark);
  text-align: center;
  padding: var(--space-2) 0;
  font-weight: 600;
}
.badge-status--active {
  background: var(--oriana-green-tint);
  color: var(--oriana-green-dark);
}
.badge-status--inactive {
  background: var(--neutral-200);
  color: var(--neutral-700);
}

.badge-job-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.badge-job-status--draft {
  background: var(--neutral-200);
  color: var(--neutral-800);
}
.badge-job-status--published {
  background: var(--oriana-green-tint);
  color: var(--oriana-green-dark);
}
.badge-job-status--closing {
  background: var(--oriana-orange-tint);
  color: var(--oriana-orange-dark);
}
.badge-job-status--closed {
  background: var(--neutral-200);
  color: var(--neutral-600);
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--neutral-600);
}

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--oriana-navy);
  color: var(--neutral-0);
  padding: var(--space-2) var(--space-4);
  z-index: 2000;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* Utility classes for common styling patterns */
.bg-oriana-navy {
  background-color: var(--oriana-navy);
}
.bg-oriana-navy-tint {
  background-color: var(--oriana-navy-tint);
}
.text-oriana-navy {
  color: var(--oriana-navy);
}
.text-oriana-green {
  color: var(--oriana-green);
}
.text-oriana-green-dark {
  color: var(--oriana-green-dark);
}
.search-field-col {
  min-width: 280px;
}
.logo-placeholder {
  width: 40px;
  height: 40px;
}
.logo-mark {
  height: 40px;
  object-fit: contain;
}
.logo-mark-lg {
  width: auto;
  height: 40px;
  object-fit: contain;
}
.container-narrow {
  max-width: 720px;
}
/* The apply wizard specifically (not thank-you.php/error.php, which stay
   narrow) — 720px squeezed 3-up rows like Current/Expected CTC into
   col-md-4 inputs too narrow to show their placeholder text in full on
   desktop. */
.container-wizard {
  max-width: 960px;
}

.step-active {
  background-color: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
}
.step-done {
  background-color: var(--oriana-green-tint);
  color: var(--oriana-green-dark);
}
.step-upcoming {
  color: var(--neutral-600);
}

.progress-bar-empty {
  width: 0%;
}

/* Job card */
.job-card-title-link {
  color: var(--oriana-navy);
  text-decoration: none;
}
.job-card-title-link:hover,
.job-card-title-link:focus-visible {
  color: var(--oriana-navy-dark);
  text-decoration: underline;
}
.job-card-divider {
  margin: var(--space-2) 0;
  border: none;
  border-top: var(--border-default);
  opacity: 1;
}
.skill-chip {
  display: inline-block;
  background: var(--neutral-200);
  color: var(--neutral-800);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.skill-chip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--neutral-600);
  padding: var(--space-3) 0;
  text-align: center;
}

.breadcrumb-item.active {
  color: var(--oriana-navy-dark);
  font-weight: 600;
}
.breadcrumb-light {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
}
.breadcrumb-light .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.breadcrumb-light .breadcrumb-item a:hover,
.breadcrumb-light .breadcrumb-item a:focus-visible {
  color: var(--neutral-0);
  text-decoration: underline;
}
.breadcrumb-light .breadcrumb-item.active {
  color: var(--neutral-0);
  font-weight: 600;
}

/* Application wizard */
.wizard-stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wizard-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}
.wizard-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--neutral-200);
  z-index: 0;
}
.wizard-step--done:not(:first-child)::before,
.wizard-step--active:not(:first-child)::before {
  background: var(--oriana-green);
}
.wizard-step-circle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-600);
  font-size: 0.8rem;
  font-weight: 700;
}
.wizard-step--active .wizard-step-circle {
  background: var(--oriana-navy);
  color: var(--neutral-0);
}
.wizard-step--done .wizard-step-circle {
  background: var(--oriana-green);
  color: var(--neutral-0);
}
.wizard-step-label {
  font-size: 0.75rem;
  color: var(--neutral-600);
}
.wizard-step--active .wizard-step-label {
  color: var(--oriana-navy);
  font-weight: 600;
}

.wizard-step-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.wizard-step-btn:hover .wizard-step-circle {
  background: var(--oriana-green-dark);
}
.wizard-step-btn:hover .wizard-step-label {
  color: var(--oriana-navy-dark);
  text-decoration: underline;
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--neutral-400);
  border-radius: var(--radius-md);
  color: var(--neutral-600);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.upload-dropzone:hover,
.upload-dropzone:focus-within {
  border-color: var(--oriana-navy);
  background-color: var(--oriana-navy-tint);
}
.upload-dropzone--dragover {
  border-color: var(--oriana-navy);
  background-color: var(--oriana-navy-tint);
}
.upload-dropzone--invalid {
  border-color: var(--surface-danger);
}
.upload-attached-list {
  border: var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.upload-attached-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  color: var(--oriana-green-dark);
}
.upload-attached-item:not(:last-child) {
  border-bottom: var(--border-default);
}
.upload-attached-item svg {
  flex-shrink: 0;
}

.otp-input-group {
  display: flex;
  gap: var(--space-2);
}
.otp-digit {
  width: 44px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
}
.otp-input-group--invalid .otp-digit {
  border-color: var(--surface-danger);
}

.review-summary {
  border: var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.review-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.review-summary-row:not(:last-child) {
  border-bottom: var(--border-default);
}
.review-summary-label {
  color: var(--neutral-600);
  font-size: 0.875rem;
  white-space: nowrap;
}
.review-summary-value {
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.review-verified-icon {
  color: var(--oriana-green);
  vertical-align: middle;
  margin-left: 2px;
}

.verification-box {
  max-width: 280px;
}

/* Job detail sidebar: stays in view while the summary/responsibilities
   column scrolls. Top offset clears the sticky public header (~112px,
   grown to fit the larger logo mark). */
.sidebar-sticky {
  position: sticky;
  top: calc(112px + var(--space-4));
}
@media (max-width: 991.98px) {
  .sidebar-sticky {
    position: static;
  }
}

/* Job Detail hero band */
.job-detail-hero {
  background-color: var(--oriana-navy);
}

/* Career Home hero */
.hero-section {
  padding: var(--space-16) 0;
  background: linear-gradient(
    180deg,
    var(--oriana-navy-tint) 0%,
    var(--neutral-0) 100%
  );
}
.hero-search .input-group-text {
  border-color: var(--neutral-200);
  color: var(--neutral-600);
}
.hero-search .form-control {
  border-color: var(--neutral-200);
}
.hero-search .form-control:focus {
  box-shadow: none;
  border-color: var(--oriana-navy);
}
.hero-quick-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--neutral-0);
  border: var(--border-default);
  color: var(--oriana-navy);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.hero-quick-link:hover {
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
  text-decoration: none;
}
.hero-visual {
  position: relative;
  height: 420px;
  border-radius: var(--radius-lg);
  background-color: var(--oriana-navy);
  background-image:
    radial-gradient(
      circle at 22% 25%,
      rgba(92, 175, 141, 0.35),
      transparent 45%
    ),
    radial-gradient(circle at 78% 78%, rgba(254, 107, 0, 0.22), transparent 42%);
  box-shadow: var(--shadow-card);
}

/* Talent Community signup section */
.talent-signup-section {
  background-color: var(--oriana-navy-tint);
}
.talent-signup-dropzone {
  padding: var(--space-4);
}

/* Why Join Oriana Hospital */
.section-tint {
  background-color: var(--neutral-50);
}
.why-oriana-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy);
}

/* Life at Oriana Hospital: full-bleed auto-scrolling image strip */
.life-carousel {
  overflow: hidden;
  width: 100%;
}
.life-carousel-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  padding: 0 var(--space-4);
  animation: life-carousel-scroll 45s linear infinite;
}
.life-carousel:hover .life-carousel-track {
  animation-play-state: paused;
}
.life-carousel--static .life-carousel-track {
  animation: none;
  justify-content: center;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .life-carousel-track {
    animation: none;
  }
}
.life-tile {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.life-tile--1 {
  background-color: var(--oriana-navy);
  background-image:
    radial-gradient(
      circle at 25% 30%,
      rgba(92, 175, 141, 0.45),
      transparent 55%
    ),
    radial-gradient(circle at 80% 75%, rgba(254, 107, 0, 0.25), transparent 50%);
}
.life-tile--2 {
  background-color: var(--oriana-green-dark);
  background-image:
    radial-gradient(circle at 75% 25%, rgba(1, 64, 130, 0.4), transparent 55%),
    radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.15),
      transparent 50%
    );
}
.life-tile--3 {
  background-color: var(--oriana-orange-dark);
  background-image:
    radial-gradient(circle at 30% 75%, rgba(1, 64, 130, 0.4), transparent 55%),
    radial-gradient(
      circle at 75% 25%,
      rgba(255, 255, 255, 0.18),
      transparent 50%
    );
}
.life-tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  color: var(--neutral-0);
  font-weight: 600;
  font-size: 0.9rem;
}
.life-tile--photo {
  background-color: var(--neutral-200);
}
.life-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 575.98px) {
  .life-tile {
    width: 240px;
    height: 170px;
  }
}

/* The two-pass duplicated track (index.php renders each tile twice back
   to back) means sliding exactly half its width loops seamlessly. */
@keyframes life-carousel-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Homepage hero image carousel */
.hero-carousel {
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero-carousel-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* HR Portal login */
.portal-auth-container {
  max-width: 420px;
}

/* HR Portal shell */
/* Portal app shell: header + sidebar stay fixed on screen; only
   .portal-main scrolls. :has() lets this target the body without
   editing every portal page's <body class="..."> tag individually. */
body:has(.portal-shell) {
  height: 100vh;
  overflow: hidden;
}
.portal-header {
  position: sticky;
  top: 0;
  z-index: 20;
}
.portal-shell {
  display: flex;
  height: calc(100vh - 65px);
  overflow: hidden;
}
.portal-sidebar {
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  height: 100%;
  background: var(--neutral-0);
  border-right: var(--border-default);
  overflow: hidden;
}
.portal-sidebar-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) 0;
}
.portal-sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-4);
  border-top: var(--border-default);
}
.portal-sidebar-user {
  margin-bottom: var(--space-3);
}
.portal-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--neutral-800);
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-danger);
  color: var(--neutral-0);
  font-size: 0.7rem;
  font-weight: 700;
}
.portal-sidebar-link:hover {
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
  text-decoration: none;
}
.portal-sidebar-link.active {
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
  border-left-color: var(--oriana-navy);
  font-weight: 600;
}
.portal-main {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-6);
}
.portal-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
a.portal-status-chip:hover {
  border-color: var(--oriana-navy);
  background: var(--oriana-navy-tint);
}
a.portal-status-chip.portal-status-chip--active {
  border-color: var(--oriana-navy);
  background: var(--oriana-navy-tint);
  box-shadow: inset 0 0 0 1px var(--oriana-navy);
}
.badge-role {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
}
@media (max-width: 767.98px) {
  /* The fixed-height, internally-scrolling app shell above only makes
     sense with the sidebar beside the content. Stacked on mobile, it
     would give the sidebar the shell's full height and leave zero room
     for .portal-main — revert to ordinary document scroll instead. */
  body:has(.portal-shell) {
    height: auto;
    overflow: visible;
  }
  .portal-shell {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .portal-sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: var(--border-default);
  }
  .portal-sidebar-nav-scroll {
    overflow-y: visible;
  }
  .portal-main {
    height: auto;
    overflow-y: visible;
  }
}

/* Job Detail hero: department badge (ghost/outline style, matches the
   hero's existing btn-outline-light treatment on navy) */
.badge-department {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--neutral-0);
}

/* Job Detail content card: a light divider with generous vertical margin
   between sections (Job Summary / Responsibilities / Qualification /
   Experience / Key Competencies / Reporting) instead of them running
   straight into each other. */
.job-detail-divider {
  border: none;
  border-top: var(--border-default);
  margin: var(--space-6) 0;
  opacity: 1;
}

/* Admin job detail: "At a Glance" key/value sidebar list */
.job-overview-list dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--neutral-600);
  font-weight: 700;
  margin-top: var(--space-3);
}
.job-overview-list dt:first-child {
  margin-top: 0;
}
.job-overview-list dd {
  margin-bottom: 0;
}

/* Department quick-filter cards (Browse Jobs + HR Jobs list) */
.department-quick-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.department-quick-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-default);
  background: var(--neutral-0);
  color: var(--neutral-800);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
.department-quick-card:hover {
  border-color: var(--oriana-navy);
  color: var(--oriana-navy);
  text-decoration: none;
}
.department-quick-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
  font-size: 0.75rem;
  font-weight: 700;
}
.department-quick-card.active {
  border-color: var(--oriana-navy);
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
}
.department-quick-card.active .department-quick-card-count {
  background: var(--oriana-navy);
  color: var(--neutral-0);
}

/* Grid/List view toggle */
.view-toggle .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
.view-toggle .btn.active {
  background: var(--oriana-navy);
  border-color: var(--oriana-navy);
  color: var(--neutral-0);
}

/* Compact List-view row (alternative to the grid job card) */
.job-list-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
}
.job-list-item-main {
  flex: 1 1 280px;
  min-width: 0;
}
.job-list-item-meta {
  flex: 0 0 auto;
}
.job-list-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin-left: auto;
}
.job-list-item-badge {
  display: inline-block;
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

/* HR Portal: header live clock — tabular-nums keeps digit widths
   constant so the ticking seconds don't jitter surrounding layout. */
.portal-header-clock {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* HR Portal: notification bell */
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--surface-danger);
  color: var(--neutral-0);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}
.notification-dropdown {
  width: 340px;
  max-width: 90vw;
}
.notification-list {
  max-height: 360px;
  overflow-y: auto;
}
.notification-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  white-space: normal;
  border-left: 3px solid transparent;
}
.notification-item.unread {
  background: var(--oriana-navy-tint);
  border-left-color: var(--oriana-navy);
}
.notification-item-message {
  font-size: 0.85rem;
  color: var(--neutral-900);
}
.notification-item-date {
  font-size: 0.75rem;
  color: var(--neutral-600);
}

/* Admin: applications list — not-yet-opened rows, same accent treatment
   as the unread notification style above. */
.application-row--unread {
  background: var(--oriana-navy-tint);
}
.application-row--unread td:first-child {
  border-left: 3px solid var(--oriana-navy);
}
.application-row--unread a {
  font-weight: 600;
}
.application-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--oriana-navy);
  margin-right: 6px;
}
.badge-unread-label {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--oriana-navy);
  color: var(--neutral-0);
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: middle;
}
.badge-repeat-applicant {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--oriana-orange-tint);
  color: var(--oriana-orange-dark);
  border: 1px solid var(--oriana-orange-dark);
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Admin: kebab action menu */
.kebab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-color: var(--neutral-200);
  color: var(--neutral-600);
}
.kebab-btn:hover,
.kebab-btn:focus {
  background: var(--neutral-200);
  color: var(--neutral-900);
}

/* Admin: redesigned Jobs Grid card */
.admin-job-card {
  background: var(--neutral-0);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.admin-job-card:hover {
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.1);
  transform: translateY(-2px);
}

/* Admin: interactive table styling */
.admin-table thead th {
  background: var(--neutral-50);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neutral-600);
  font-weight: 700;
  border-bottom: var(--border-default);
  padding: var(--space-3);
}
.admin-table tbody td {
  padding: var(--space-3);
  vertical-align: middle;
}
.admin-table tbody tr:hover {
  background: var(--oriana-navy-tint);
}
/* Roles & Permissions: matrix table */
.permission-matrix th {
  min-width: 110px;
}
.permission-matrix-label-col {
  min-width: 200px;
  font-weight: 500;
}
.permission-matrix-user-count {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--neutral-600);
  font-size: 0.7rem;
  margin-top: 2px;
}
.permission-matrix-group-row td {
  background: var(--neutral-50);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-600);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-top: var(--border-default);
}
.permission-matrix tbody tr:not(.permission-matrix-group-row):hover {
  background: var(--oriana-navy-tint);
}
.permission-matrix-grant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--oriana-green-tint);
  color: var(--oriana-green-dark);
}
.permission-matrix-deny {
  color: var(--neutral-400);
  font-size: 1.1rem;
}
.table-toolbar-per-page {
  width: auto;
  min-width: 90px;
}
.permission-matrix-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--neutral-400);
  border-radius: var(--radius-sm);
}
.permission-matrix-delete-btn:hover {
  color: var(--surface-danger);
  background: var(--surface-danger-tint);
}

.department-name-field {
  min-width: 220px;
}
.content-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

/* Content: multi-photo upload review modal */
.content-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.content-preview-card {
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.content-preview-card--invalid {
  border-color: var(--surface-danger);
}
.content-preview-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
.content-preview-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.content-preview-name {
  max-width: 65%;
}

/* Dashboard: "Needs Your Attention" cards */
.attention-card {
  border-left: 3px solid var(--neutral-200);
}
.attention-card--draft {
  border-left-color: var(--neutral-600);
}
.attention-card--closing {
  border-left-color: var(--oriana-orange);
}
.attention-card--new {
  border-left-color: var(--oriana-navy);
}
.attention-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--neutral-200);
  color: var(--neutral-800);
  font-size: 0.75rem;
  font-weight: 700;
}
.filter-active-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface-danger);
  border: 1.5px solid var(--neutral-0);
}

/* Password field show/hide toggle */
.password-toggle-btn {
  border-color: var(--neutral-300, #d1d5db);
  color: var(--neutral-600);
  background: var(--neutral-0);
}
.password-toggle-btn:hover,
.password-toggle-btn:focus {
  color: var(--oriana-navy);
}
.password-toggle-btn .icon-eye-off {
  display: none;
}
.password-toggle-btn[aria-pressed="true"] .icon-eye {
  display: none;
}
.password-toggle-btn[aria-pressed="true"] .icon-eye-off {
  display: inline;
}

/* Portal + auth-page footer: "Made in Varanasi" beating heart */
@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.3);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.22);
  }
  60% {
    transform: scale(1);
  }
}
.heartbeat-icon {
  display: inline-block;
  color: var(--surface-danger);
  animation: heartbeat 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .heartbeat-icon {
    animation: none;
  }
}

.portal-footer {
  border-top: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  padding: var(--space-3) 0;
  margin-top: auto;
}
.portal-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--neutral-600);
}
.portal-footer-made-in {
  display: flex;
  align-items: center;
  gap: 4px;
}

.auth-footer {
  padding: var(--space-4) 0 var(--space-3);
  text-align: center;
  font-size: 0.8rem;
  color: var(--neutral-600);
}
.auth-footer-made-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.auth-card-logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 auto var(--space-3);
}

/* Image preview (lightbox) trigger — an overlay button revealed on
   hover/focus of its containing tile/thumb. Every ancestor that hosts
   one (.life-tile, .content-thumb-wrap) sets position: relative. */
.image-preview-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.55);
  color: var(--neutral-0);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    background-color 0.15s ease;
}
.image-preview-btn:hover,
.image-preview-btn:focus-visible {
  background: rgba(1, 64, 130, 0.85);
}
.life-tile:hover .image-preview-btn,
.life-tile:focus-within .image-preview-btn,
.content-thumb-wrap:hover .image-preview-btn,
.content-thumb-wrap:focus-within .image-preview-btn,
.image-preview-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
}
@media (hover: none) {
  .image-preview-btn {
    opacity: 1;
    transform: scale(1);
  }
}
.content-thumb-wrap {
  position: relative;
}

/* Bulk-select checkbox — sits top-left of the thumb so it never
   overlaps .image-preview-btn (top-right). Always visible (not
   hover-revealed) so a touch/keyboard user can find it without a
   hover state. */
.content-select-checkbox {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.35);
}

/* Bulk-action toolbar shown above a content-image grid once at least
   one checkbox is checked (assets/js/content-bulk-select.js). */
.content-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
}
.content-bulk-toolbar [data-bulk-count] {
  color: var(--neutral-700);
}
.content-bulk-toolbar .btn {
  margin-left: auto;
}

/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 10, 20, 0.9);
  padding: var(--space-6);
}
body.lightbox-open {
  overflow: hidden;
}
.lightbox-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: min(90vw, 1100px);
  max-height: 90vh;
}
.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.lightbox-caption {
  color: var(--neutral-0);
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
}
.lightbox-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--neutral-0);
  transition: background-color 0.15s ease;
}
.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}
.lightbox-close {
  top: var(--space-4);
  right: var(--space-4);
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-nav--prev {
  left: var(--space-4);
}
.lightbox-nav--next {
  right: var(--space-4);
}
@media (max-width: 575.98px) {
  .lightbox-overlay {
    padding: var(--space-3);
  }
  .lightbox-btn {
    width: 38px;
    height: 38px;
  }
  .lightbox-nav--prev {
    left: var(--space-2);
  }
  .lightbox-nav--next {
    right: var(--space-2);
  }
}

/* Résumé upload: "checking your file" overlay (assets/js/upload-scan-loader.js) */
.upload-scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.96);
  text-align: center;
}
.upload-scan-heading {
  font-weight: 600;
  color: var(--oriana-navy);
  margin: 0;
}
.upload-scan-fact {
  max-width: 480px;
  color: var(--neutral-600);
  font-size: 0.9rem;
  margin: 0;
}

/* CSRF/session-expired recovery page */
@keyframes csrf-error-icon-turn {
  0%,
  80%,
  100% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(-25deg);
  }
}
.csrf-error-icon {
  color: var(--oriana-navy);
  animation: csrf-error-icon-turn 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .csrf-error-icon {
    animation: none;
  }
}

/* Job detail: salary range badge */
.salary-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--oriana-green-tint);
  color: var(--oriana-green-dark);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 999px;
}

/* Homepage "Can't Find the Right Role?" section */
.talent-signup-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Job listings/detail: number of open vacancies */
.vacancy-badge {
  display: inline-block;
  background: var(--oriana-orange);
  color: var(--neutral-0);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 999px;
}

/* Activity Log: plain-English feed */
.activity-feed-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.activity-feed-item:not(:last-child) {
  border-bottom: var(--border-default);
}
.activity-feed-text {
  flex: 1 1 320px;
  font-size: 0.9rem;
}
.activity-feed-time {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--neutral-600);
  font-size: 0.8rem;
  white-space: nowrap;
}
.activity-category-badge {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 74px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--neutral-200);
  color: var(--neutral-800);
}
.activity-category-badge--job {
  background: var(--oriana-navy-tint);
  color: var(--oriana-navy-dark);
}
.activity-category-badge--application {
  background: var(--oriana-green-tint);
  color: var(--oriana-green-dark);
}
.activity-category-badge--user {
  background: var(--oriana-orange-tint);
  color: var(--oriana-orange-dark);
}