/* HRMS — small app-wide overrides on top of Bootstrap 5 (§13) */

/* Staff-facing tables collapse to a stacked "card" layout below md,
   rather than horizontal-scrolling, per §13's mobile guidance. */
@media (max-width: 767.98px) {
  table.responsive-stack thead { display: none; }
  table.responsive-stack, table.responsive-stack tbody, table.responsive-stack tr, table.responsive-stack td {
    display: block; width: 100%;
  }
  table.responsive-stack tr { margin-bottom: 1rem; border: 1px solid #dee2e6; border-radius: .375rem; }
  table.responsive-stack td {
    text-align: right; padding-left: 45%; position: relative; border: none; border-bottom: 1px solid #f1f1f1;
  }
  table.responsive-stack td::before {
    content: attr(data-label); position: absolute; left: .75rem; width: 40%;
    text-align: left; font-weight: 600; color: #6c757d;
  }
}

/* Candidate-facing portal screens (§13) — mobile-first, larger tap targets */
.portal-form .form-control, .portal-form .form-select, .portal-form .btn {
  min-height: 48px;
  font-size: 1rem;
}

.masked-field { font-family: monospace; letter-spacing: 0.05em; }