/* ============================================================
   ResnSec360 - Participant Shell Dell-Theme Bridge
   Load order: bootstrap.cdn > app.css > dell-theme.css > participant-dell.css
   Purpose: map Dell design tokens onto participant-specific CSS variables
   and classes so the participant shell matches the admin/org design system.
   Rule: never touch app.css or business logic.
   ============================================================ */


/* ── 1. PALETTE TOKEN BRIDGE ────────────────────────────────── */
/* Replace the original pink primary and secondary green accent with
   Dell blue. All app.css rules that consume --pt-primary, --accent,
   etc. automatically inherit the new values. */
:root {
  /* Core brand remap */
  --pt-primary:        var(--dt-blue);
  --pt-primary-strong: var(--dt-blue-dark);
  --pt-primary-soft:   var(--dt-blue);
  --pt-coral:          var(--dt-blue-dark);
  --pt-blue:           var(--dt-blue);

  /* Ink / text remap to Dell neutrals */
  --pt-ink:            var(--dt-text-primary);
  --pt-ink-deep:       var(--dt-text-primary);
  --pt-muted:          var(--dt-text-secondary);

  /* Surface remap to Dell panels */
  --pt-surface:        var(--dt-panel-bg);
  --pt-surface-soft:   var(--dt-page-bg);
  --pt-surface-muted:  var(--dt-page-bg);
  --pt-border:         var(--dt-border);

  /* Semantic accent aliases */
  --accent:            var(--dt-blue);
  --accent-strong:     var(--dt-blue);
  --accent-soft:       rgba(0, 118, 206, 0.12);
  --ink:               var(--dt-text-primary);
  --ink-soft:          var(--dt-text-secondary);
  --surface:           var(--dt-panel-bg);
  --surface-alt:       var(--dt-page-bg);

  /* Font: swap Inter for Roboto (Dell standard) */
  --bs-body-font-family: var(--dt-font);
  --bs-body-font-size:   var(--dt-text-base);
  --bs-body-line-height: var(--dt-line-height);

  /* Bootstrap bridges */
  --bs-success:          var(--dt-blue);
  --bs-success-rgb:      0, 118, 206;
  --bs-primary:          var(--dt-blue);
  --bs-primary-rgb:      0, 118, 206;
  --bs-link-color:       var(--dt-blue);
  --bs-link-hover-color: var(--dt-blue-dark);
  --bs-body-bg:          var(--dt-page-bg);
  --bs-body-color:       var(--dt-text-primary);
}


/* ── 2. BODY & SHELL ────────────────────────────────────────── */
body {
  font-family: var(--dt-font);
  background: var(--dt-page-bg);
  color: var(--dt-text-primary);
}

/* Remove decorative pink/gradient page backdrop */
.app-shell {
  background: var(--dt-page-bg);
}

/* Page content area — flat Dell background, no pink radial glow */
.participant-page-body {
  background: var(--dt-page-bg);
}


/* ── 3. TOPBAR ──────────────────────────────────────────────── */
/* Dark announcement bar — match Dell admin footer dark style */
.participant-topbar {
  background: var(--dt-footer-bg);
  color: var(--dt-footer-text);
}

.participant-topbar span:last-child {
  color: rgba(204, 204, 204, 0.78);
}


/* ── 4. NAVBAR ──────────────────────────────────────────────── */
.participant-main-header {
  background: var(--dt-panel-bg);
  border-bottom: 1px solid var(--dt-border);
  box-shadow: var(--dt-shadow-xs);
}

.participant-nav-link {
  color: var(--dt-text-secondary);
  border-radius: var(--dt-radius);
  font-size: var(--dt-text-base);
  transition: color var(--dt-transition), background-color var(--dt-transition);
}

.participant-nav-link:hover,
.participant-nav-link:focus,
.participant-nav-link.active {
  color: var(--dt-blue);
  background: var(--dt-blue-soft);
}

/* Strong nav link (admin shortcut, etc.) */
.participant-nav-link-strong {
  background: var(--dt-blue);
  color: #ffffff;
}

.participant-nav-link-strong:hover,
.participant-nav-link-strong:focus {
  background: var(--dt-blue-dark);
  color: #ffffff;
}

/* Brand caption beside logo */
.participant-brand-caption {
  color: var(--dt-text-primary);
  border-left-color: var(--dt-border);
}


/* ── 5. TYPOGRAPHY & HEADINGS ───────────────────────────────── */
/* Remove pink highlight-gradient underlines from display headings */
.display-heading,
.record-page-title {
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dt-text-primary);
}

a {
  color: var(--dt-blue);
}

a:hover {
  color: var(--dt-blue-dark);
}


/* ── 6. BUTTONS ─────────────────────────────────────────────── */
/* Remove uppercase from all participant buttons (Dell style is sentence case) */
.btn {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--dt-font);
}

/* btn-success = participant primary CTA (was pink) → Dell blue */
.btn-success {
  --bs-btn-bg:                  var(--dt-blue);
  --bs-btn-border-color:        var(--dt-blue);
  --bs-btn-color:               #ffffff;
  --bs-btn-hover-bg:            var(--dt-blue-dark);
  --bs-btn-hover-border-color:  var(--dt-blue-dark);
  --bs-btn-hover-color:         #ffffff;
  --bs-btn-active-bg:           var(--dt-blue-darkest);
  --bs-btn-active-border-color: var(--dt-blue-darkest);
  --bs-btn-active-color:        #ffffff;
}

.btn-outline-success {
  --bs-btn-color:               var(--dt-blue);
  --bs-btn-border-color:        var(--dt-blue);
  --bs-btn-hover-color:         #ffffff;
  --bs-btn-hover-bg:            var(--dt-blue);
  --bs-btn-hover-border-color:  var(--dt-blue);
  --bs-btn-focus-shadow-rgb:    0, 118, 206;
  --bs-btn-active-color:        #ffffff;
  --bs-btn-active-bg:           var(--dt-blue-dark);
  --bs-btn-active-border-color: var(--dt-blue-dark);
  color: var(--dt-blue);
  border-color: var(--dt-blue);
}

/* assessment-action-btn (area intro CTA chip) */
.assessment-action-btn {
  background: var(--dt-blue) !important;
  color: #ffffff !important;
}

/* Area question start / outline buttons */
.assessment-help-trigger,
.area-question-start-btn.btn-outline-success {
  color: var(--dt-blue) !important;
  border-color: var(--dt-blue) !important;
}


/* ── 7. FORMS & INPUTS ──────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--dt-blue);
  box-shadow: var(--dt-focus-ring);
}

/* Assessment answer select */
.assessment-answer-select:hover {
  border-color: rgba(0, 118, 206, 0.45);
}

.assessment-answer-select:focus {
  border-color: rgba(0, 118, 206, 0.65);
  box-shadow: 0 0 0 0.25rem rgba(0, 118, 206, 0.12);
}


/* ── 8. CARDS ───────────────────────────────────────────────── */
/* App card: left-border accent → Dell blue */
.app-card {
  border-left-color: var(--dt-blue) !important;
}

/* Functional area primary card border (was green-tinted) */
.functional-area-primary-card {
  border-color: rgba(0, 118, 206, 0.16);
}

/* Area card hover glow */
.area-card-link:hover,
.area-card:hover {
  border-color: rgba(0, 118, 206, 0.28) !important;
}

/* Section nav active item */
.app-section-nav .list-group-item.active,
.section-nav-item.active {
  background: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #ffffff;
}

/* Question context pill */
.question-context-pill {
  background: rgba(0, 118, 206, 0.07);
  border-color: rgba(0, 118, 206, 0.16);
  color: var(--dt-blue-dark);
}


/* ── 9. PROGRESS BARS ───────────────────────────────────────── */
/* Bootstrap .progress-bar (was pink gradient) → Dell blue */
.progress-bar {
  background: var(--dt-blue) !important;
  background-image: none !important;
}

/* Bootstrap bars inside a .progress track (BIA and CMMC journey pages).
   app.css styles the legacy question-flow ".progress-bar" box with a 16px top
   margin, its own height and a grey background; inside a .progress track that
   pushed the fill below the clipped 8px track, so every bar looked empty even
   at 100%. Reset the box here; the legacy bar is never inside .progress. */
.progress > .progress-bar {
  margin: 0;
  height: 100%;
  border-radius: 0;
}
.progress > .progress-bar.bg-success {
  background: var(--dt-success, #2e7d32) !important;
}

/* Custom .progress-bar span (question flow) */
.progress-bar span,
.question-progress-bar span {
  background: var(--dt-blue);
}

/* Area mini progress fill (was dark green) */
.area-mini-fill {
  background: var(--dt-blue);
}

/* Question progress strip fill */
.question-progress-fill {
  background: var(--dt-blue);
}


/* ── 10. COMPONENT CHIPS & PILLS ────────────────────────────── */
/* Functional area chips, status badges — tinted blue (were pink/green) */
.participant-light-console .functional-area-chip,
.participant-light-console .functional-area-count,
.participant-light-console .functional-area-card-label,
.participant-light-console .area-status-badge,
.participant-light-console .assessment-progress-value,
.participant-light-console .maturity-option-level,
.participant-light-console .assessment-maturity-option-level,
.participant-light-console .question-count-pill {
  color: var(--dt-blue) !important;
  background: rgba(0, 118, 206, 0.10) !important;
}

.participant-light-console .brand-mark,
.participant-light-console .functional-area-chip.primary,
.participant-light-console .area-status-dot.is-complete,
.participant-light-console .assessment-action-btn,
.participant-light-console .maturity-level-pill,
.participant-light-console .maturity-level-badge,
.participant-light-console .assessment-maturity-option.is-selected .assessment-maturity-option-level {
  background: var(--dt-blue) !important;
  color: #ffffff !important;
}

.participant-light-console .functional-area-primary-card,
.participant-light-console .area-card-link,
.participant-light-console .choice-card,
.participant-light-console .assessment-question-shell,
.participant-light-console .assessment-summary-panel,
.participant-light-console .impact-area-card {
  border-color: rgba(0, 118, 206, 0.18) !important;
}

.participant-light-console .choice-card.is-active,
.participant-light-console .choice-card:has(input:checked),
.participant-light-console .impact-area-card.border-primary {
  border-color: var(--dt-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 118, 206, 0.10) !important;
}

/* Area CTA chips (start/resume) — was dark green */
.area-cta-chip.is-start {
  border-color: rgba(0, 118, 206, 0.35);
  color: var(--dt-blue-dark);
  background: rgba(0, 118, 206, 0.06);
}

.area-cta-chip.is-resume {
  border-color: var(--dt-blue);
  background: var(--dt-blue);
  color: #ffffff;
}

/* Area intro meta chip (was dark green) */
.area-intro-meta-chip {
  background: rgba(0, 118, 206, 0.07);
  border-color: rgba(0, 118, 206, 0.18);
  color: var(--dt-blue-dark);
}

/* CP index number badge (was dark green) */
.area-intro-cp-index {
  background: var(--dt-blue);
  color: #ffffff;
}

/* CP count pill (was dark green) */
.area-intro-cp-count {
  background: rgba(0, 118, 206, 0.10);
  color: var(--dt-blue-dark);
}

/* CP row toggle button (was dark green) */
.area-intro-row-toggle {
  border-color: rgba(0, 118, 206, 0.16);
  background: rgba(0, 118, 206, 0.06);
  color: var(--dt-blue-dark);
}

.area-intro-cp-toggle[aria-expanded="true"] .area-intro-row-toggle-label {
  color: var(--dt-blue-darkest);
}

/* CP collapse inner panel (was green-tinted) */
.area-intro-cp-collapse-inner {
  border-color: var(--dt-border);
  background: var(--dt-page-bg);
}

.area-intro-question-table-header {
  border-bottom-color: var(--dt-border);
  background: var(--dt-blue-soft);
}

.area-intro-question-row-border {
  border-bottom-color: var(--dt-border-light);
}

/* CP toggle focus ring */
.area-intro-cp-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(0, 118, 206, 0.20);
}

/* Back link hover */
.area-intro-back:hover {
  color: var(--dt-blue) !important;
}

/* Question number pill (was green) */
.question-number {
  background: rgba(0, 118, 206, 0.12);
  color: var(--dt-blue-dark);
}

/* CP row gradient (was white-to-light-green) */
.area-intro-cp-row {
  background: var(--dt-panel-bg);
}

.area-intro-cp-toggle:hover {
  background: var(--dt-blue-soft);
}

/* Option card selected border */
.option-card.selected,
.option-card:has(input:checked) {
  border-color: var(--dt-blue);
  box-shadow: 0 10px 24px rgba(0, 118, 206, 0.12);
}

/* Option level text */
.option-level {
  color: var(--dt-blue-dark);
}


/* ── 11. TABLE ──────────────────────────────────────────────── */
.table {
  --bs-table-hover-bg: var(--dt-blue-soft);
}


/* ── 12. BADGES ─────────────────────────────────────────────── */
/* text-bg-success was overridden to pink in app.css — remap to Dell tint */
.text-bg-success {
  color: var(--dt-blue-dark) !important;
  background-color: var(--dt-blue-tint) !important;
}


/* ── 13. BIA ASSIGNED CONTEXT BLOCK ────────────────────────── */
.bia-assigned-context {
  background: var(--dt-panel-bg);
  border-color: rgba(0, 118, 206, 0.24);
  border-left-color: var(--dt-blue);
  background-image: none;
}

.bia-assigned-context::before {
  background: radial-gradient(circle, rgba(0, 118, 206, 0.12), transparent 68%);
}

.bia-assigned-context-header {
  border-bottom-color: rgba(0, 118, 206, 0.24);
}

.bia-assigned-context .form-control[readonly] {
  border-color: rgba(0, 118, 206, 0.26);
  box-shadow: inset 4px 0 0 rgba(0, 118, 206, 0.16);
}

.bia-assigned-context .form-control[readonly]:focus {
  border-color: rgba(0, 118, 206, 0.44);
  box-shadow:
    inset 4px 0 0 rgba(0, 118, 206, 0.20),
    0 0 0 0.18rem rgba(0, 118, 206, 0.08);
}

.area-list-row:hover {
  background: var(--dt-blue-soft);
}


/* ── 12. TYPE SCALE ALIGNMENT ───────────────────────────────── */
/* Map the participant heading and label classes onto the Dell admin
   type scale (dell-theme.css tokens) so both workspaces share one
   typographic system: page titles 22px semibold, section titles 18px,
   card titles 16px, body 14px, uppercase labels 12px. */

.display-heading,
.record-page-title {
  font-size: var(--dt-text-xl);
  font-weight: var(--dt-weight-semi);
  line-height: 1.3;
  letter-spacing: 0;
  max-width: none;
}

.section-title {
  font-size: var(--dt-text-lg);
  font-weight: var(--dt-weight-semi);
  letter-spacing: 0;
}

.section-kicker,
.app-stat-label {
  font-size: var(--dt-text-sm);
  font-weight: var(--dt-weight-semi);
  letter-spacing: 0.04em;
  color: var(--dt-text-secondary);
}

/* Stat card values match the admin metric-value treatment */
.app-stat-card strong,
.app-surface-block strong {
  font-size: 26px;
  font-weight: var(--dt-weight-bold);
  color: var(--dt-text-primary);
}

.lead {
  font-size: var(--dt-text-md);
  line-height: var(--dt-line-height);
}

/* Buttons: Dell buttons are sentence case, base size, medium weight */
.btn {
  --bs-btn-font-weight: var(--dt-weight-medium);
  font-size: var(--dt-text-base);
}

/* Inputs read at the shared body size */
.form-control,
.form-select {
  font-size: var(--dt-text-base);
  line-height: var(--dt-line-height);
}

/* Table headers match the admin table treatment */
.table thead th {
  font-size: var(--dt-text-sm);
  font-weight: var(--dt-weight-semi);
  color: var(--dt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Card titles are compact panel headings, as in the admin workspace */
.app-card .card-title,
.card-header .card-title {
  font-size: var(--dt-text-md);
  font-weight: var(--dt-weight-semi);
  line-height: 1.3;
}

/* Uppercase micro labels align with the admin label treatment */
.bia-assigned-context .form-label {
  font-size: var(--dt-text-sm);
  font-weight: var(--dt-weight-semi);
  letter-spacing: 0.04em;
}

/* Category progress pill turns green once every question is answered. */
.area-intro-cp-count.is-complete {
    background: rgba(25, 135, 84, 0.14);
    color: #146c43;
}