/* ========================================================================== 
   HTMS final premium refinement pass
   Presentation-only overrides. No business logic or data behavior lives here.
   ========================================================================== */

/* ---- Shared control language ------------------------------------------- */
.page-register .btn,
.page-attendance-workflow .btn,
.page-employee-profile .btn,
.page-training-detail .btn,
.page-passport-detail .btn,
.page-settings .btn,
.page-reports-center .btn,
.page-training-reports .btn,
.page-org-chart .btn {
  min-height: 36px;
  border-radius: 9px;
}

.page-employee-profile .tab-bar,
.page-settings .tab-bar {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 5px;
  margin-bottom: 20px;
  overflow-x: auto;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
  scrollbar-width: thin;
}
.page-employee-profile .tab-btn,
.page-settings .tab-btn {
  min-height: 38px;
  padding: 8px 14px;
  color: var(--text-secondary);
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.page-employee-profile .tab-btn:hover,
.page-settings .tab-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, .55); }
.page-employee-profile .tab-btn.active,
.page-settings .tab-btn.active {
  color: var(--accent-700);
  background: var(--surface-card);
  border: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .05);
}

/* ---- Dashboard lower-half hierarchy ----------------------------------- */
.dashboard-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 30px 0 13px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}
.dashboard-section-heading > div { min-width: 0; }
.dashboard-section-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-600);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dashboard-section-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -.02em;
}
.dashboard-section-heading p {
  max-width: 430px;
  margin: 0;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.45;
  text-align: right;
}
.dashboard-section-heading-actions { margin-top: 4px; padding-top: 0; border-top: 0; }
.dashboard-action-zone {
  padding: 14px;
  background: linear-gradient(135deg, rgba(238, 244, 251, .78), rgba(247, 250, 252, .9));
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}
.dashboard-action-zone .insight-card { box-shadow: none; }
.dashboard-analytics-zone .panel { border-color: rgba(210, 219, 231, .88); box-shadow: 0 4px 18px rgba(15, 23, 42, .045); }
.dashboard-analytics-zone .panel-header { background: linear-gradient(180deg, #fff, rgba(248, 250, 252, .72)); }
.dashboard-operations-zone {
  padding: 14px;
  background: rgba(248, 250, 252, .84);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}
.dashboard-operations-zone .panel { height: 100%; box-shadow: none; }
.dashboard-operations-zone .quick-action-btn { min-height: 86px; }
.dashboard-activity-zone .panel:first-child { border-left: 3px solid var(--accent-400); }
.dashboard-activity-zone .panel:last-child { border-left: 3px solid var(--emerald-400); }
.dashboard-activity-zone .panel-body { max-height: 430px; overflow: auto; }

/* ---- Training Register command bar and table --------------------------- */
.page-register .page-toolbar { align-items: center; margin-bottom: 16px; }
.page-register .page-toolbar-actions { justify-content: flex-end; }
.page-register .register-command-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) auto minmax(520px, 2.5fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, var(--surface-card), #fbfcfe);
  border-radius: 13px;
}
.page-register .register-command-bar .search-field { width: 100%; min-width: 0; max-width: none; height: 38px; }
/* :first-of-type would match by tag (div), not class — this bar's first
   child (.search-field) is also a div, so it always won and this rule
   never applied. :not(:last-child) reliably selects the filters group
   since the command bar only ever has two .filter-group elements. */
.page-register .register-command-bar > .filter-group:not(:last-child) {
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  min-width: 0;
}
.page-register .register-command-bar .filter-select {
  width: 100%;
  min-width: 0;
  height: 38px;
}
.page-register .register-command-bar .filter-select.is-active,
.page-register .register-command-bar .search-field.is-active {
  color: var(--accent-700);
  background-color: var(--accent-50);
  border-color: var(--accent-300);
  box-shadow: 0 0 0 2px rgba(72, 123, 184, .08);
}
.page-register .register-command-bar .filter-bar-results {
  margin-left: 0;
  padding: 4px 8px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border-radius: 7px;
}
.page-register .register-command-bar > .filter-group:last-child { margin-left: 0 !important; flex-wrap: nowrap; }
.page-register .register-summary { gap: 9px; }
.page-register .reg-sum-tile { padding-block: 10px; background: linear-gradient(180deg, #fff, #fbfcfe); }
.page-register .enterprise-table { font-size: 12px; }
.page-register .enterprise-table thead th { padding: 10px 12px; font-size: 9.5px; background: #f3f6fa; }
.page-register .enterprise-table tbody td { padding: 9px 12px; }
.page-register .table-panel { border-radius: 13px; }

/* ---- Attendance workflow ------------------------------------------------ */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  box-shadow: var(--shadow-xs);
}
.workflow-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 15px;
  color: var(--text-tertiary);
  border-right: 1px solid var(--border-subtle);
}
.workflow-step:last-child { border-right: 0; }
.workflow-step b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--accent-700);
  background: var(--accent-50);
  border-radius: 8px;
  font-size: 11px;
}
.workflow-step strong, .workflow-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-step strong { color: var(--text-primary); font-size: 11.5px; }
.workflow-step small { margin-top: 2px; font-size: 9.5px; }
.workflow-step.is-current { background: linear-gradient(135deg, var(--accent-50), #fff); }
.workflow-step.is-current::after { content: ''; position: absolute; inset: auto 14px 0; height: 2px; background: var(--accent-500); border-radius: 2px; }
.workflow-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--border-subtle); }
.workflow-section-title > span { color: var(--accent-600); font-family: var(--font-display); font-size: 11px; font-weight: 800; }
.workflow-section-title strong, .workflow-section-title small { display: block; }
.workflow-section-title strong { color: var(--text-primary); font-size: 13px; }
.workflow-section-title small { margin-top: 2px; color: var(--text-tertiary); font-size: 10.5px; }
.page-attendance-workflow .sheet-header-panel { border-top: 3px solid var(--accent-400); }
.page-attendance-workflow .summary-bar { margin-bottom: 16px; border-radius: 12px; }
.page-attendance-workflow .panel { border-top: 3px solid var(--emerald-400); }
.page-attendance-workflow .attendee-add-actions { gap: 6px; }
.page-attendance-workflow .attendee-table { min-width: 1180px; }

/* ---- Competency sparse state ------------------------------------------- */
.page-competency #competencyKpis { gap: 12px; margin-bottom: 16px; }
.page-competency #competencyKpis .kpi-card { padding: 16px; }
.page-competency .competency-assessments-panel .panel-header { align-items: center; }
.page-competency .competency-assessments-panel .panel-body { padding: 0; }
.page-competency #assessmentsEmptyState .empty-state {
  min-height: 0;
  padding: 30px 20px 32px;
  background: linear-gradient(135deg, rgba(238, 244, 251, .55), rgba(255, 255, 255, .9));
}
.page-competency #assessmentsEmptyState .empty-icon { width: 46px; height: 46px; font-size: 17px; background: var(--accent-50); color: var(--accent-600); }

/* ---- Learning content -------------------------------------------------- */
.learning-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(145px, 190px)) minmax(260px, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.learning-summary-item, .learning-summary-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
.learning-summary-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; color: var(--accent-600); background: var(--accent-50); border-radius: 9px; }
.learning-summary-icon.is-covered { color: var(--emerald-600); background: var(--emerald-50); }
.learning-summary-icon.is-links { color: var(--amber-700); background: var(--amber-50); }
.learning-summary-item strong, .learning-summary-item small, .learning-summary-copy strong, .learning-summary-copy span { display: block; }
.learning-summary-item strong { color: var(--text-primary); font-family: var(--font-display); font-size: 19px; line-height: 1; }
.learning-summary-item small { margin-top: 4px; color: var(--text-tertiary); font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.learning-summary-copy { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; background: linear-gradient(135deg, #173a64, #225584); }
.learning-summary-copy strong { color: #fff; font-size: 11.5px; }
.learning-summary-copy span { color: rgba(255, 255, 255, .72); font-size: 10.5px; line-height: 1.4; }
.learning-command-bar { padding: 10px 12px; }
.learning-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: stretch; }
.learning-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 164px;
  padding: 15px;
  cursor: pointer;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  box-shadow: var(--shadow-xs);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.learning-card:hover, .learning-card:focus-visible { transform: translateY(-2px); border-color: var(--accent-300); box-shadow: var(--shadow-md); outline: 0; }
.learning-card.has-content { border-top: 3px solid var(--emerald-400); }
.learning-card:not(.has-content) { border-top: 3px solid var(--slate-300); }
.learning-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.learning-card-head .tc-icon { width: 36px; height: 36px; }
.learning-card-title { color: var(--text-primary); font-size: 13.5px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.learning-card-category { margin-top: 3px; color: var(--text-tertiary); font-size: 10.5px; }
.learning-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; color: var(--text-tertiary); font-size: 10.5px; font-weight: 650; }
.learning-card.has-content .learning-card-foot { color: var(--emerald-700); }
.page-learning-content #lcEmptyState .empty-state { padding: 34px 20px; border: 1px dashed var(--border-default); border-radius: 13px; background: var(--surface-muted); }

/* ---- Employee profile spacing ----------------------------------------- */
.page-employee-profile .profile-header { margin-bottom: 14px; padding: 18px; background: linear-gradient(135deg, #fff, #f8fbff); border-top: 3px solid var(--accent-400); }
.page-employee-profile .stat-card-row { gap: 10px; margin-bottom: 16px; }
.page-employee-profile .stat-card-sm { padding: 13px 14px; }
.page-employee-profile .stat-card-sm .sc-icon { margin-bottom: 9px; }
.page-employee-profile .tab-panel.active > .dash-grid-tertiary { align-items: stretch; }
.page-employee-profile .tab-panel.active > .dash-grid-tertiary > .panel { height: 100%; }
.page-employee-profile .reflect-meta-list { display: grid; gap: 7px; }

/* ---- Passport selectors and reports filters ---------------------------- */
.page-passport-detail .design-select-grid,
.page-settings .design-select-grid { gap: 10px; }
.page-passport-detail .design-select-card,
.page-settings .design-select-card { padding: 10px; border-radius: 11px; }
.page-passport-detail .design-select-card.selected,
.page-settings .design-select-card.selected { box-shadow: 0 0 0 2px var(--accent-100), var(--shadow-sm); }
.page-reports-center .page-hero-actions { padding: 5px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-xs); }
.page-reports-center .page-hero-actions .filter-trigger { min-width: 150px; height: 36px; border-radius: 8px; }
.page-reports-center .export-filters { grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.page-training-reports .filter-bar { padding: 10px 12px; }

/* Keep short reports balanced on true A4 without stretching their content. */
body.page-training-reports .doc-page { display: flex; flex-direction: column; }
body.page-training-reports .doc-print-footer { margin-top: auto; }

/* ---- Organization chart final containment ------------------------------ */
.page-org-chart .org-chart-stage { min-height: 430px; padding-top: 24px; }
.page-org-chart .org-chart-root { min-height: 0; }
.page-org-chart .oc-corporate-hierarchy > ul { width: max-content; min-width: 100%; }
.page-org-chart .oc-corporate-hierarchy li { padding-inline: 8px; }
.page-org-chart .oc-node-card { min-width: 195px; max-width: 220px; }
.page-org-chart .oc-modern-organization .oc-lane { min-width: 215px; }
.page-org-chart .oc-compact-site .oc-node-card { min-width: 0; max-width: 760px; }

/* ---- Responsive QA targets --------------------------------------------- */
@media (max-width: 1500px) {
  .page-register .register-command-bar { grid-template-columns: minmax(240px, 1fr) auto minmax(0, 2fr); }
  .page-register .register-command-bar > .filter-group:not(:last-child) { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-register .register-command-bar > .filter-group:last-child { justify-self: end; }
  .page-reports-center .export-filters { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}

@media (max-width: 1000px) {
  .dashboard-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .dashboard-section-heading p { max-width: none; text-align: left; }
  .learning-summary { grid-template-columns: repeat(3, 1fr); }
  .learning-summary-copy { grid-column: 1 / -1; }
  .workflow-steps { grid-template-columns: repeat(2, 1fr); }
  .workflow-step:nth-child(2) { border-right: 0; }
  .workflow-step:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }
  .page-reports-center .export-filters { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 780px) {
  .dashboard-action-zone, .dashboard-operations-zone { padding: 10px; }
  .page-register .page-toolbar-actions { justify-content: flex-start; }
  .page-register .page-toolbar-actions .btn { flex: 1 1 calc(50% - 8px); }
  .page-register .register-command-bar { display: flex; align-items: stretch; flex-direction: column; }
  .page-register .register-command-bar .filter-bar-divider { display: none; }
  .page-register .register-command-bar > .filter-group:not(:last-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-register .register-command-bar > .filter-group:last-child { align-self: stretch; }
  .page-register .register-command-bar > .filter-group:last-child .btn { flex: 1; }
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-step { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .workflow-step:last-child { border-bottom: 0; }
  .workflow-step strong, .workflow-step small { white-space: normal; }
  .learning-summary { grid-template-columns: 1fr; }
  .learning-summary-copy { grid-column: auto; }
  .learning-card-grid { grid-template-columns: 1fr; }
  .page-employee-profile .profile-header-actions { width: 100%; }
  .page-employee-profile .profile-header-actions .btn { flex: 1 1 auto; }
  .page-reports-center .page-hero-actions { width: 100%; }
  .page-reports-center .page-hero-actions > * { flex: 1 1 calc(50% - 5px); }
  .page-reports-center .export-filters { grid-template-columns: 1fr; }
  .page-org-chart .org-chart-stage { min-height: 360px; }
}

@media print {
  .workflow-steps, .dashboard-section-heading, .learning-summary { display: none !important; }
}

/* ---- Trainer recovery mode: keep the daily path small ------------------ */
.role-trainer.page-attendance-workflow .page-toolbar-actions #printSheetBtn,
.role-trainer.page-attendance-workflow .page-toolbar-actions #printCenterBtn { display: none; }
.page-attendance-workflow .advanced-options-panel { margin: 0 0 16px; }
.page-attendance-workflow .advanced-options-panel[hidden] { display: none; }
.page-attendance-workflow .step-nav { position: sticky; bottom: 12px; z-index: 5; }
.page-attendance-workflow .training-completed-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--emerald-200, #a7f3d0); border-radius: 12px;
  background: var(--emerald-50, #ecfdf5); color: var(--emerald-800, #065f46);
}
.page-attendance-workflow .training-completed-banner[hidden] { display: none; }
.completed-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--emerald-500, #10b981); color: #fff; }
.training-completed-banner strong, .training-completed-banner span { display: block; }
.training-completed-banner span { margin-top: 2px; font-size: 12px; color: var(--emerald-700, #047857); }
.page-attendance-workflow .workflow-step[data-step="4"] { background: linear-gradient(135deg, var(--accent-50), #fff); }

/* Trainer sidebar: five daily destinations, everything else behind More. */
.role-trainer .trainer-more-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border: 0; border-radius: 8px; background: transparent; color: var(--navy-text-dim);
  font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer;
}
.role-trainer .trainer-more-toggle:hover, .role-trainer .trainer-more-nav.is-open .trainer-more-toggle { background: rgba(255,255,255,.08); color: #fff; }
.role-trainer .trainer-more-toggle .more-chevron { margin-left: auto; font-size: 10px; transition: transform .15s ease; }
.role-trainer .trainer-more-nav.is-open .more-chevron { transform: rotate(180deg); }
.role-trainer .trainer-more-panel { margin-top: 3px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.08); }
.role-trainer .trainer-more-panel[hidden] { display: none; }
.role-trainer .trainer-more-panel a { font-size: 11.5px; }
.page-attendance-workflow { overflow-x: hidden; }
.page-attendance-workflow .table-scroll { max-width: 100%; }

/* ---- Functional attendance stepper --------------------------------------
   The stepper used to be inert markup with `is-current` hardcoded on step 1.
   It is now a row of real buttons, so it needs button resets, an affordance
   that it can be clicked, and an honest locked state for steps whose work
   does not exist yet. */
.workflow-step {
  appearance: none;
  background: none;
  border: 0;
  border-right: 1px solid var(--border-subtle);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.workflow-step:hover:not(.is-locked) { background: var(--surface-muted); }
.workflow-step:focus-visible { outline: 2px solid var(--accent-500); outline-offset: -2px; }

.workflow-step.is-locked { cursor: not-allowed; opacity: 0.55; }
.workflow-step.is-locked b { background: var(--surface-sunken); color: var(--text-tertiary); }

.workflow-step.is-done b { background: var(--emerald-50, #e7f6ee); color: var(--emerald-600, #047857); }
.workflow-step.is-done b::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.workflow-step.is-done b { font-size: 0; }
.workflow-step.is-done b::before { font-size: 11px; }

/* ---- Step footer navigation --------------------------------------------- */
.step-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
  padding: 14px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  box-shadow: var(--shadow-xs);
}
.step-nav-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

@media (max-width: 1100px) {
  .workflow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .workflow-step { padding: 10px; gap: 7px; }
  .workflow-step small { display: none; }
}
@media (max-width: 780px) {
  /* Below tablet the five labels cannot share a row legibly; the numbers
     still show the position in the flow, and the current step keeps its
     label so the user always knows where they are. */
  .workflow-step strong { display: none; }
  .workflow-step.is-current strong { display: block; }
  .workflow-step { justify-content: center; }
  .step-nav { flex-direction: column; align-items: stretch; }
  .step-nav .btn { width: 100%; justify-content: center; }
  .step-nav-hint { order: -1; text-align: center; }
}

/* ==========================================================================
   Attendance & Signature bypass

   The trainer is recording a decision, not faking a signature — so the visual
   language is deliberately "informational amber", never the emerald used for
   a real captured signature.
   ========================================================================== */
.attendance-bypass-trigger {
  color: var(--amber-700, #b45309);
  border: 1px dashed var(--amber-300, #fcd9a5);
  background: var(--amber-50, #fffaf1);
}
.attendance-bypass-trigger:hover {
  background: var(--amber-100, #fdf0dc);
  border-style: solid;
}

.bypass-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--amber-200, #fde3b8);
  border-left: 4px solid var(--amber-500, #d97706);
  border-radius: 11px;
  background: linear-gradient(180deg, #fffaf1 0%, #fff 100%);
}
.bypass-banner > i { color: var(--amber-600, #c2740a); font-size: 16px; flex: none; }
.bypass-banner-text { flex: 1 1 260px; min-width: 0; }
.bypass-banner-text strong { display: block; font-size: 13.5px; color: var(--text-primary); }
.bypass-banner-text small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary); overflow-wrap: anywhere; }

/* "Not Required" reads as a state, not as an achievement. */
.sig-status.bypassed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber-700, #b45309);
}

.attendance-bypass-modal .bypass-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--amber-50, #fffaf1);
  border: 1px solid var(--amber-200, #fde3b8);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.attendance-bypass-modal .bypass-callout i { color: var(--amber-600, #c2740a); margin-top: 2px; }

/* Finalize step notes */
.finalize-bypass-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--amber-50, #fffaf1);
  border: 1px solid var(--amber-200, #fde3b8);
}
.finalize-bypass-note i { color: var(--amber-600, #c2740a); margin-top: 2px; }
.finalize-bypass-note strong { display: block; font-size: 13px; color: var(--text-primary); }
.finalize-bypass-note small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary); }

.finalize-warning-list {
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  line-height: 1.7;
}
.finalize-info-note {
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  color: var(--text-tertiary);
}

@media (max-width: 780px) {
  .bypass-banner { flex-direction: column; align-items: stretch; }
  .bypass-banner .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Finalize summary — what this particular training will create.

   Driven by the training's configured workflow, so an Orientation session
   never advertises an exam and a Flagman session never advertises a
   checklist. Values sit in a fixed column so the list scans vertically.
   ========================================================================== */
.finalize-outcomes {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.finalize-outcomes:empty { display: none; }
.finalize-outcomes-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); margin-bottom: 10px;
}
.finalize-outcome {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  grid-template-areas: 'icon label value' '. note note';
  gap: 2px 10px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--border-subtle);
}
.finalize-outcome:first-of-type { border-top: none; padding-top: 0; }
.finalize-outcome i { grid-area: icon; color: var(--accent-500); font-size: 12px; }
.finalize-outcome .fo-label { grid-area: label; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.finalize-outcome .fo-value {
  grid-area: value;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 800; color: var(--accent-ink);
}
.finalize-outcome .fo-note { grid-area: note; font-size: 11.5px; color: var(--text-tertiary); }

/* ==========================================================================
   Paste import — Detected Mapping.

   The client's complaint was not only that the import failed, but that it
   failed opaquely: eleven rows rejected with no indication of what the system
   had understood. So the mapping is shown before anything is added, every
   column is correctable, and a column that will be ignored says so rather
   than quietly vanishing.
   ========================================================================== */
.paste-input {
  width: 100%;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12.5px;
}

.paste-mapping {
  margin-top: 16px; padding: 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.paste-mapping-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.paste-mapping-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 800; color: var(--accent-ink);
}
.paste-mapping-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

.paste-mapping-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.paste-col {
  padding: 10px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); background: var(--surface-card);
}
.paste-col.is-ignored { opacity: 0.6; }
.paste-col-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.paste-col-index { font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }

/* Confidence is shown because a guess and a certainty deserve different
   levels of trust from the person checking it. */
.paste-conf {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
}
.paste-conf.high { background: var(--emerald-50); color: var(--emerald-700); }
.paste-conf.medium { background: var(--accent-50); color: var(--accent-600); }
.paste-conf.low { background: var(--amber-50); color: var(--amber-600); }
.paste-conf.set { background: var(--accent-ink); color: #fff; }
.paste-conf.ignored { background: var(--surface-sunken); color: var(--text-tertiary); }

.paste-col-select { width: 100%; font-size: 12px; padding: 5px 8px; }
.paste-col-samples {
  margin-top: 6px; font-size: 11px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.paste-preview { margin-top: 14px; }
.paste-preview tr.paste-row-invalid td { background: var(--red-50); }
.paste-preview tr.paste-row-duplicate td { background: var(--amber-50); }
.paste-preview .cell-sub { font-size: 11px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }

.paste-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; align-items: center; }
.paste-stat {
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--surface-muted); padding: 4px 9px; border-radius: var(--radius-pill);
}
.paste-stat.ok { background: var(--emerald-50); color: var(--emerald-700); font-weight: 700; }
.paste-stat.warn { background: var(--amber-50); color: var(--amber-600); }
.paste-stat.bad { background: var(--red-50); color: var(--red-700); }

/* ==========================================================================
   Finalize readiness and blockers.

   Anything the server will refuse is shown as a blocker with the action that
   clears it, never as a "warning" beside an enabled Finalize button. The
   client pressed that button, got a 422, and went looking through Advanced
   Options for a setting that was never going to exist.
   ========================================================================== */
.finalize-readiness {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.fr-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--surface-card);
}
.fr-item.ok { border-color: var(--emerald-100); background: var(--emerald-50); }
.fr-item.warn { border-color: var(--amber-100); background: var(--amber-50); }
.fr-item.bad { border-color: var(--red-100); background: var(--red-50); }
.fr-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800; color: var(--text-primary);
}
.fr-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }

.finalize-blockers {
  border: 1px solid var(--red-100); border-left: 4px solid var(--red-500);
  border-radius: var(--radius-md); background: var(--red-50);
  padding: 12px 14px; margin-bottom: 12px;
}
.fb-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 800; color: var(--red-700);
}
.fb-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--red-100);
}
.fb-item:first-of-type { border-top: none; padding-top: 0; }
.fb-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.fb-detail { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }

/* A disabled Finalize must look disabled, not merely unresponsive. */
#confirmFinalizeBtn:disabled { opacity: 0.5; cursor: not-allowed; }