/* ==========================================================================
   Method Statement — Visitor Trial Theme
   Scoped entirely under body.ms-trial-theme so it can never collide with
   the shared/legacy front/taskmanager stylesheets loaded on this page, or
   with the IR/RA trial theme files loaded on their own pages.
   ========================================================================== */

body.ms-trial-theme {
  /* Hard outer safety net: whatever the exact cause of a given piece
     of content being taller than expected (a long step, a 3rd-party
     widget like Select2 whose dropdown/live-region attaches straight
     to <body> by default), nothing should ever be able to create a
     page-level (outer) scrollbar -- only the dedicated inner pane
     (see .ms-step-body / .project-content.full-width below) scrolls.
     Date: 14/09/2026 */
  height: 100vh;
  overflow: hidden;
  --ms-primary: #4a90e2;
  --ms-primary-dark: #357abd;
  --ms-primary-light: #a6c9f0;
  --ms-primary-rgb: 74, 144, 226;
  --ms-bg: #f0f9ff;
  --ms-white: #ffffff;
  --ms-text: #1e293b;
  --ms-text-muted: #64748b;
  --ms-border: #dbe7f3;
  --ms-gray-50: #f9fafb;
  --ms-gray-100: #f3f4f6;
  --ms-gray-200: #e5e7eb;
  --ms-gray-300: #d1d5db;
  --ms-gray-400: #9ca3af;
  --ms-gray-500: #6b7280;
  --ms-gray-600: #4b5563;
  --ms-gray-700: #374151;
  --ms-gray-800: #1f2937;
  --ms-gray-900: #111827;
  --ms-danger: #ef4444;
  --ms-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  --ms-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ms-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --ms-radius-sm: 5px;
  --ms-radius-md: 10px;
  --ms-radius: 12px;
  --ms-radius-lg: 16px;
  --ms-transition: all 0.2s ease;
  --ms-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ms-success: #10b981;
  --ms-success-dark: #059669;
  --ms-success-light: #d1fae5;

  font-family: var(--ms-font);
  color: var(--ms-text);
  /* background: var(--ms-bg); */
}
body.ms-trial-theme{
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
body.ms-trial-theme * {
  box-sizing: border-box;
}
body.ms-trial-theme::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------------------------------------------------------
   Outer container / top header
   -------------------------------------------------------------------- */

body.ms-trial-theme .modern-project-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  float: left;
  font-family: var(--ms-font);
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--ms-gray-50);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* The <form id="RiskAssesmentTrialMethodStatementForm"> wraps both
   #step-1 and #step-2 (only one of which is display:block at a time --
   see visitor-ms-trial.js's $("#step-N").show()/.hide()). Making it a
   flex column that fills whatever height .project-header didn't use
   hands the *real*, browser-computed remaining height down to whichever
   step is currently visible, instead of a hardcoded "100vh - 76px"
   guess that silently drifts out of sync with the header's actual
   rendered height. */
body.ms-trial-theme #RiskAssesmentTrialMethodStatementForm {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Do NOT set a "display" property on these two -- they are exactly the
   elements visitor-ms-trial.js toggles via inline style="display:none"/
   "display:block" ($("#step-1").hide()/.show()), and an inline style
   always beats a non-!important CSS rule but loses to an !important
   one -- so an !important display here would fight the show/hide and
   can leave both (or neither) step visible. Flex-sizing properties
   only; display is left to the JS + the element's own inline style. */
body.ms-trial-theme .method_statement_form,
body.ms-trial-theme .operation_sequence_form {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
}

/* .ms-step-body is a flex column (see below) whose two children are
   .project-content.full-width (the scrollable pane) and .action-buttons
   (the Back/Next bar). The pane uses flex-grow:0 so it only ever takes
   its own natural content height -- it never stretches to fill leftover
   space -- which is what keeps .action-buttons sitting directly under
   the last field (with a normal fixed gap) on a short step, instead of
   being pushed down to the bottom of the viewport. flex-shrink:0 here
   just guarantees the button bar itself is never the thing that gets
   squeezed when a step's content is taller than the available space --
   the pane (flex-shrink:1 + overflow-y:auto, below) absorbs all of that
   instead. Date: 14/09/2026 */
body.ms-trial-theme .ms-step-body > .action-buttons {
  flex-shrink: 0;
}

body.ms-trial-theme .project-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 16px 24px !important;
  background: var(--ms-primary) !important;
  color: var(--ms-white) !important;
  border-radius: 16px 16px 0 0 !important;
}

body.ms-trial-theme .header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

body.ms-trial-theme .project-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--ms-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(10px) !important;
  padding: 0;
}

body.ms-trial-theme .project-icon svg {
  width: 22px;
  height: 22px;
}

body.ms-trial-theme .header-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ms-white) !important;
  padding-bottom: 0px !important;
}

body.ms-trial-theme .header-right {
  flex-shrink: 0;
}

body.ms-trial-theme .project-header-btn {
  border: none;
  background: rgba(255, 255, 255, 0.22);
  color: var(--ms-white);
  font-weight: 500;
  font-size: 13px;
  padding: 4px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--ms-transition);
}


/* --------------------------------------------------------------------
   Project content / cards (Step 1)
   -------------------------------------------------------------------- */

body.ms-trial-theme .project-content.full-width {
  width: 100% !important;
  float: left !important;
}
/* Both steps' cards scroll in their own pane while the Back/Next bar
   stays put below - that inner scroll is the only scroll that should
   ever happen. The previous approach pinned the pane's height to a
   hardcoded "100vh - 76px" guess at the header's pixel height; that
   guess didn't leave room for .action-buttons too (header + pane +
   footer added up to MORE than 100vh) and drifted out of sync with
   the header's real rendered height, which is exactly what let the
   whole page (not just the pane) scroll -- reproducibly, with certain
   step-1 content (e.g. the "No. of Contractor" dropdown).
   Fixed properly this time with a real flex chain instead of a guessed
   pixel value: .modern-project-container/#RiskAssesmentTrialMethodStatementForm/
   .method_statement_form/.operation_sequence_form (see above) each pass
   down whatever height the browser actually computes as left over,
   down to .ms-step-body, which the browser then splits between the
   pane (grows only to its own content, shrinks to fit, scrolls) and
   .action-buttons (fixed natural size, see the flex-shrink:0 rule
   above) -- so there's nothing left to go stale.
   Date: 14/09/2026 */
body.ms-trial-theme .ms-step-body {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
body.ms-trial-theme .project-content.full-width {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--ms-gray-100);
}

body.ms-trial-theme .project-card-main {
  /* padding: 20px !important;
  background: var(--ms-gray-100) !important; */
}
body.ms-trial-theme #step-1 .project-card{
  margin: 20px !important;
  border-radius: 16px !important;
}
body.ms-trial-theme .project-card {
  background: var(--ms-gray-50) !important;
  /* box-shadow: var(--ms-shadow) !important; */
  /* border: 1px solid var(--ms-gray-200) !important; */
  overflow: hidden !important;
  transition: var(--ms-transition) !important;
}

body.ms-trial-theme .card-header {
  padding: 20px 24px 16px 24px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ms-gray-200) !important;
}

body.ms-trial-theme .card-title {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
}

body.ms-trial-theme .card-title svg {
  width: 20px;
  height: 20px;
  color: var(--ms-primary);
  flex-shrink: 0;
}

body.ms-trial-theme #step-1 .card-content {
  padding: 24px !important;
  padding-left: 20px !important;
  background: var(--ms-white);
}
body.ms-trial-theme #step-2 .card-content {
  padding: 24px !important;
  padding-left: 20px !important;
  border-left: 2px solid #dee2e6;
}

body.ms-trial-theme .form-group {
  margin-bottom: 18px !important;
}

body.ms-trial-theme .form-label {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ms-gray-700) !important;
  letter-spacing: 0.02em !important;
}

body.ms-trial-theme .form-label a {
  text-transform: none;
  letter-spacing: normal;
}
body.ms-trial-theme .form-control{
  font-size: 13px !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
}

body.ms-trial-theme .form-control.audit-control {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 6px;
  background: var(--ms-white) !important;
  font-family: var(--ms-font) !important;
  font-size: 13px !important;
  color: var(--ms-text) !important;
  transition: var(--ms-transition) !important;
}
body.ms-trial-theme .ra-loader {
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  margin: -30px 0 0 -30px;
  position: fixed;
  z-index: 99999;
  text-align: center;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--ms-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


body.ms-trial-theme select.form-control.audit-control {
  height: 44px;
  padding: 0 10px;
}

body.ms-trial-theme .form-control:focus {
  outline: none !important;
  border-color: var(--ms-primary) !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15) !important;
}

/* showError()/clearError() (webroot/js/front/form-error.js) field-validation
   feedback: the message it inserts, and the red border it toggles on the
   field itself or, for select2 fields, on the rendered .select2-selection. */
body.ms-trial-theme .error-msg {
  color: var(--ms-danger);
  font-size: 12px;
  margin-top: 4px;
}
body.ms-trial-theme .form-control.input-error,
body.ms-trial-theme input.input-error,
body.ms-trial-theme textarea.input-error,
body.ms-trial-theme select.input-error {
  border-color: var(--ms-danger) !important;
}
body.ms-trial-theme .select2-selection.input-error {
  border-color: var(--ms-danger) !important;
}
body.ms-trial-theme .form-control.input-error:focus,
body.ms-trial-theme .input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* Toggle switches (F10 / CPP) — recreated from the live module's own
   .chartToggle/.toggleSwitch rules so the on/off animation matches. */
body.ms-trial-theme .ms-toggle-group {
  display: flex;
  flex-direction: column;
}

body.ms-trial-theme .chartToggle {
  width: 50px;
  height: 21px;
  background-color: var(--ms-gray-300);
  border-radius: 25px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 4px;
}

body.ms-trial-theme .chartToggle.on {
  background-color: var(--ms-primary);
}

body.ms-trial-theme .toggleSwitch {
  width: 21px;
  height: 21px;
  background-color: var(--ms-white);
  border-radius: 50%;
  position: absolute;
  top: 3px;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.ms-trial-theme .toggleSwitch.moveOff {
  left: 0px;
}

body.ms-trial-theme .toggleSwitch.moveOn {
  animation: .2s ease-in-out irmoveOn forwards !important;
}

@keyframes irmoveOn {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(30px);
  }
}

/* Terms checkbox row */
body.ms-trial-theme .ms-terms-row {
  padding: 0 24px 16px;
}

body.ms-trial-theme .custom-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ms-text-muted);
}

body.ms-trial-theme .custom-radio input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--ms-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

body.ms-trial-theme .custom-radio label.error-term {
  color: #dc2626;
}

body.ms-trial-theme .terms-popup-page {
  color: var(--ms-primary);
  font-weight: 700;
}

/* --------------------------------------------------------------------
   Action buttons / footer bar
   -------------------------------------------------------------------- */

body.ms-trial-theme .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  border-top: 1px solid var(--ms-gray-200) !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  background: var(--ms-white) !important;
  border: 1px 0px solid var(--ms-gray-200) !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: var(--ms-shadow) !important;
}

body.ms-trial-theme .button-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

body.ms-trial-theme .btn {
  display: inline-flex;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 22px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: var(--ms-transition) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

body.ms-trial-theme .btn:hover {
  text-decoration: none;
}

body.ms-trial-theme .btn-primary {
  background: var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
  color: var(--ms-white) !important;
}

body.ms-trial-theme .btn-primary:hover {
  background: var(--ms-primary-dark) !important;
  border-color: var(--ms-primary-dark) !important;
  color: var(--ms-white) !important;
}

body.ms-trial-theme .btn-secondary {
  background: var(--ms-white) !important;
  border-color: var(--ms-gray-200) !important;
  color: var(--ms-text) !important;
}

body.ms-trial-theme .btn-secondary:hover {
  background: var(--ms-gray-100);
}

body.ms-trial-theme .btn-cancel {
  background: var(--ms-white) !important;
  border-color: var(--ms-gray-200) !important;
  color: var(--ms-text-muted) !important;
  box-shadow: var(--ms-shadow-sm) !important;
}

body.ms-trial-theme .btn-cancel:hover {
  background: var(--ms-gray-100);
  color: var(--ms-text);
}

body.ms-trial-theme .btn i,
body.ms-trial-theme .btn svg {
  font-size: 13px;
}

/* Toggles visibility of .next_ms/.generatepdf (and any other .btn this is
   applied to). Needs 3 classes' worth of specificity (ms-trial-theme + btn +
   this) to actually beat "body.ms-trial-theme .btn { display: inline-flex
   !important; }" above -- a plain inline style="display:none" or jQuery
   .hide()/.show() cannot override that !important rule at all. */
body.ms-trial-theme .btn.ms-step-btn-hidden {
  display: none !important;
}

/* Legacy inline "Upload Image" label styled as a button (used inside the
   Step 2 action bar, wraps the hidden #ms-image-file input). */
body.ms-trial-theme .ms-upload-image-btn {
  margin: 0;
  font-weight: 700;
}

body.ms-trial-theme .adt-action-btn-left.custom-statement {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--ms-radius-md);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  border: 1px solid var(--ms-gray-200);
  background: var(--ms-white);
  color: var(--ms-text);
  cursor: pointer;
  transition: var(--ms-transition);
  text-decoration: none;
}

body.ms-trial-theme .adt-action-btn-left.custom-statement:hover {
  background: var(--ms-gray-100);
  text-decoration: none;
  color: var(--ms-text);
}

body.ms-trial-theme #image-text {
  font-size: 13px;
  color: var(--ms-text-muted);
  font-weight: 600;
}

body.ms-trial-theme #image-text a {
  color: var(--ms-primary);
}

/* --------------------------------------------------------------------
   Step 2 — Report Builder (Legislation / statement selection)
   -------------------------------------------------------------------- */

body.ms-trial-theme .ms-legislation-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--ms-white) !important;
  /* border-radius: 16px 16px 0 0 !important; */
  /* border-bottom: 1px solid var(--ms-gray-200); */
}

body.ms-trial-theme .ms-legislation-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ms-text);
}

body.ms-trial-theme .ms-legislation-bar-left i {
  color: var(--ms-primary);
}

body.ms-trial-theme .ms-legislation-bar-right {
  font-size: 13px;
  font-weight: 400;
  /* color: var(--ms-text-muted); */
}

body.ms-trial-theme .ms-builder-card-main {
  /* padding: 20px; */
  background: var(--ms-gray-100);
}

body.ms-trial-theme .ms-builder-row {
  display: flex;
  align-items: flex-start;
  /* gap: 20px; */
}

body.ms-trial-theme .ms-builder-left {
  flex: 1;
  min-width: 0;
  box-shadow: var(--ms-shadow) !important;
  border-radius: 16px !important;
}

body.ms-trial-theme .ms-builder-right {
  width: 376px;
  flex-shrink: 0;
}

/* On desktop the right-hand stepper must scroll independently of the
   page — without this it can grow taller than the viewport (a long
   header list) and run on past the fold, which is what made it look
   cut off / overlapped in the reported screenshot. Sticky keeps it in
   view alongside the left column as the page scrolls. */
@media (min-width: 768px) {
  body.ms-trial-theme .ms-builder-right {
    position: sticky;
    /* top: 16px;
    overflow-y: auto; */
    padding: 12px 27px;
    padding-bottom: 0px;
    padding-right: 20px;
    background: var(--ms-white);
    max-height: calc(100vh - 186px);
    overflow-y: auto;
  }
}

body.ms-trial-theme .ms-builder-card {
  padding: 0px;
  padding-left: 20px;
}

body.ms-trial-theme .ms-builder-card .card-content {
  padding: 20px;
  overflow-y: auto;
  max-height: 460px;
}

/* Desktop keeps the fixed panel workspace feel; mobile falls back to
   ordinary page scroll (see the responsive overrides further down). */
@media (min-width: 768px) {
  body.ms-trial-theme .ms-cnt-height .card-content{
    max-height: calc(100vh - 230px) !important;
  }
  body.ms-trial-theme .ms-builder-card.ms-cnt-height {
    max-height: calc(100vh - 233px) !important;
  }
}

body.ms-trial-theme .ra-loader-ms {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  margin: -30px 0 0 -30px;
  z-index: 5;
}

body.ms-trial-theme .header-preview-tag {
  font-size: 16px !important;
  color: var(--ms-gray-800) !important;
  margin: 20px 0 6px !important;
  font-weight: 700;
}

/* Setup Progress card */
body.ms-trial-theme .ms-setup-progress-card {
  background: var(--ms-gray-50);
  border: 1px solid var(--ms-gray-200);
  border-radius: var(--ms-radius-lg);
  /* box-shadow: var(--ms-shadow); */
  padding: 18px 20px;
  margin-bottom: 16px;
}

body.ms-trial-theme .ms-setup-progress-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: #495057;
}

body.ms-trial-theme .ms-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--ms-gray-200);
  border-radius: 999px;
  overflow: hidden;
}

body.ms-trial-theme .ms-progress-bar.small {
  height: 5px;
  margin: 6px 0;
}

body.ms-trial-theme .ms-progress-fill {
  height: 100%;
  background: var(--ms-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

body.ms-trial-theme .ms-progress-label,
body.ms-trial-theme .ms-step-count {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #6c757d;
}
body.ms-trial-theme .ms-progress-label{
  text-align: center;
}
body.ms-trial-theme .ms-progress-icon{
  text-align: center;
}


/* Setup Progress stepper */
body.ms-trial-theme .ms-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* max-height: calc(100vh - 322px);
  overflow-y: auto; */
}

body.ms-trial-theme .ms-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--ms-white);
  border: 1px solid var(--ms-gray-200);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
  cursor: pointer;
  transition: var(--ms-transition);
}

body.ms-trial-theme .ms-step-item:hover {
  border-color: var(--ms-primary-light);
}

body.ms-trial-theme .ms-step-item.active {
  background: var(--ms-primary);
  border-color: var(--ms-primary);
  color: var(--ms-white);
}

body.ms-trial-theme .ms-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ms-gray-100);
  color: var(--ms-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  border: 3px solid var(--ms-gray-200);
}

body.ms-trial-theme .ms-step-item.active .ms-step-number {
  background-color: var(--ms-primary);
  border-color: var(--ms-white);
  color: var(--ms-white);
}

body.ms-trial-theme .ms-step-info {
  flex: 1;
  min-width: 0;
}

body.ms-trial-theme .ms-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ms-trial-theme .ms-step-item.active .ms-step-title {
  color: var(--ms-white);
}

body.ms-trial-theme .ms-step-item.active .ms-progress-bar {
  background: rgba(255, 255, 255, 0.3);
}

body.ms-trial-theme .ms-step-item.active .ms-progress-fill {
  background: var(--ms-white);
}

body.ms-trial-theme .ms-step-item.active .ms-step-count {
  color: rgba(255, 255, 255, 0.85);
}

/* Section / sub-section expand-collapse bars — solid colored "folder"
   bars (matching the live module's .sub-header-section), not plain white
   labels. Depth is shown two ways: (1) a bar nested inside another
   section's own children container gets a lighter tint than a top-level
   section, exactly like Plumbing (top level, solid) vs Preparation
   (nested one level under Plumbing, lighter) in the live module; (2) each
   nested children container below draws its own vertical trunk line, so
   the deeper a row sits, the more trunk lines/indent it has accumulated. */
body.ms-trial-theme .labl{
  min-height: unset !important;
  border-bottom: unset !important;
  font-size: 13px !important;
}
body.ms-trial-theme .labl.adt-option01{
  background-color: transparent !important;
}
body.ms-trial-theme .labl.adt-option01 .select-statement{
    display: flex !important;
}
body.ms-trial-theme .labl.adt-option01.showSubHeaders {
  display: block;
  background-color: var(--ms-primary) !important;
  border: none;
  border-radius: var(--ms-radius-sm);
  margin-bottom: 12px;
  cursor: pointer;
  transition: var(--ms-transition);
  box-shadow: var(--ms-shadow-sm);
}

body.ms-trial-theme .labl.adt-option01.showSubHeaders:hover {
  background: var(--ms-primary-dark) !important;
}

/* Nested one (or more) levels deep — lighter tint so depth reads at a
   glance, matching the live module's Plumbing (dark) vs Preparation
   (light) contrast. */
body.ms-trial-theme [id^="sub-headers"] .labl.adt-option01.showSubHeaders {
  background: var(--ms-primary-light);
}

body.ms-trial-theme [id^="sub-headers"] .labl.adt-option01.showSubHeaders:hover {
  background: var(--ms-primary);
}

body.ms-trial-theme .labl.adt-option01.showSubHeaders>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--ms-white);
}
body.ms-trial-theme .labl.adt-option01.showSubHeaders img {
  width: 16px;
  opacity: 0.9;
  filter: brightness(0) invert(1);
  transition: transform 0.2s ease;
}

body.ms-trial-theme .labl.adt-option01.showSubHeaders.activeLink img {
  transform: rotate(180deg);
}

/* Each section's own children (its sub-sections and/or statements) live
   in this container — giving IT the trunk line + indent means depth
   accumulates naturally through ordinary nesting, with no extra markup
   or per-level math needed. */
body.ms-trial-theme [id^="sub-headers"] {
  position: relative;
  margin-top: 4px;
  margin-left: 10px;
  padding-left: 40px;
  border-left: 2px solid var(--ms-gray-200);
}
body.ms-trial-theme [id^="sub-headers"] > div[id^="sub-headers"]{
  padding-left: 20px;
  margin-bottom: 10px;
}

/* Hazard/PPE icon grid — matches the live module's own card layout: a
   clean icon (no caption baked into the image) on top, a separate label
   in a light gray footer strip below. The wrapper div also still carries
   legacy Bootstrap grid classes (.col-xs-12.adut-icon-padding) alongside
   .hazard-grid, so every layout-affecting property here is hardened with
   !important to guarantee the grid wins over any float/width/padding
   rules those classes bring in from the legacy bundles. */
body.ms-trial-theme .hazard-grid {
  display: flex !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 20px !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  align-items: start !important;
}

body.ms-trial-theme .hazard-item {
  text-align: center;
}

/* The card. JS toggles the "active"/selected state on THIS element (the
   immediate parent of .n_icon-box-create), not on the icon link itself —
   matching the live module's own click handler contract. */
body.ms-trial-theme .hazard-box {
  position: relative;
  background: var(--ms-white);
  border: 1px solid var(--ms-gray-200);
  border-radius: var(--ms-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--ms-transition);
}

body.ms-trial-theme .hazard-box:hover {
  border-color: var(--ms-primary-light);
}

body.ms-trial-theme .hazard-box.active {
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 1px var(--ms-primary);
}

body.ms-trial-theme .hazard-box .n_icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 10px;
  background: var(--ms-white);
}

/* body.ms-trial-theme .hazard-box .n_icon-box img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
} */

/* Label footer strip — real HTML text (derived from the icon's filename),
   not part of the image, so it stays crisp and legible at any card size. */
body.ms-trial-theme .hazard-title {
  margin: 0;
  padding: 0.5rem 0.5rem;
  background: var(--ms-gray-400);
  border-top: 1px solid var(--ms-gray-200);
  color: var(--ms-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.ms-trial-theme .show-hazard-icon .hazard-box .n_icon-box img{
  width: 100% !important;
  max-width: 100% !important;
  height: 120px !important;
  max-height: 120px !important;
}

/* body.ms-trial-theme .hazard-box.active .hazard-title {
  background: rgba(var(--ms-primary-rgb), 0.12);
  color: var(--ms-primary-dark);
} */

body.ms-trial-theme .hazard-box.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--ms-success);
  color: var(--ms-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* Statement rows — each is a tree "leaf": a dot on the trunk plus a
   short horizontal tick connecting it, exactly like the live module's
   own list (.sub-header-label / .select-statement). The real checkbox
   input stays in the DOM (JS reads/toggles it) but is visually hidden —
   matching the live module's own .css-checkbox rule — since selection
   is shown purely via the row's background/border, not a checkbox. */
body.ms-trial-theme .statment-list.report-statment-list {
  margin-left: 20px;
  position: relative;
}

body.ms-trial-theme .labl.adt-option01:not(.showSubHeaders) {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

body.ms-trial-theme .labl.adt-option01:not(.showSubHeaders)::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ms-primary);
  border: 2px solid var(--ms-primary);
  transform: translateY(-50%);
  z-index: 2;
}

body.ms-trial-theme .labl.adt-option01:not(.showSubHeaders)::after {
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--ms-gray-200);
  transform: translateY(-50%);
  z-index: 1;
}

body.ms-trial-theme .labl.adt-option01 input.css-checkbox {
  display: none;
}

body.ms-trial-theme .select-statement {
  flex: 1;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px !important;
  background: var(--ms-white);
  border: none;
  border-radius: var(--ms-radius-md);
  /* box-shadow: var(--ms-shadow-sm); */
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.05);
  transition: var(--ms-transition);
}

body.ms-trial-theme .select-statement:hover {
  box-shadow: var(--ms-shadow);
  border-left-color: var(--ms-gray-300);
}

/* Checked/selected state — matches the live module exactly: a light blue
   gradient fill, a solid blue left accent bar, and blue/bold text. */
body.ms-trial-theme .select-statement.checked {
  background: linear-gradient(135deg, #e7f3ff, #cfe8ff);
  border-left: 3px solid var(--ms-primary);
  /* padding: 15px 20px; */
}
/* body.ms-trial-theme .labl>input:checked+div{
  padding: 15px 20px;
} */

body.ms-trial-theme .labl>input:checked+div:hover{
  background: linear-gradient(135deg, #e7f3ff, #cfe8ff);
}

body.ms-trial-theme .select-statement.checked:hover {
  border-left-color: var(--ms-primary);
}

body.ms-trial-theme .select-statement.unchecked {
  background-color: var(--ms-white);
}

body.ms-trial-theme .ms-templete-option {
  margin: 0;
  flex: 1;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ms-gray-700);
  cursor: pointer;
  align-self: center;
  min-height: unset !important;
  padding: 0 !important;
}

body.ms-trial-theme .select-statement.checked .ms-templete-option {
  color: var(--ms-primary-dark);
  font-weight: 600;
}

body.ms-trial-theme .edit-temp-statement {
  flex-shrink: 0;
  margin: 0 !important;
}

body.ms-trial-theme .edit-temp-statement a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid var(--ms-gray-300);
  color: var(--ms-primary);
  text-decoration: none;
  margin-top: 0px !important;
}
body.ms-trial-theme .select-statement.checked .edit-temp-statement a{
  border-color: var(--ms-primary);
}

body.ms-trial-theme .edit-temp-statement img {
  width: 14px;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

body.ms-trial-theme .edit-temp-statement:hover img {
  opacity: 1;
}

body.ms-trial-theme .textarea-span {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  margin-left: 0;
  flex-basis: 100%;
}

body.ms-trial-theme .textarea-span .textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  padding: 10px 12px;
  font-family: var(--ms-font);
  font-size: 13px;
  color: var(--ms-text);
  resize: vertical;
}

body.ms-trial-theme .textarea-span .textarea:focus {
  outline: none;
  border-color: var(--ms-primary);
}

body.ms-trial-theme .submit-statement-edit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
}

body.ms-trial-theme .submit-statement-edit img {
  width: 20px;
}
body.ms-trial-theme .showSubHeaders .stats-text {
  padding: 4px 10px;
}
body.ms-trial-theme .showSubHeaders a {
  text-decoration: none;
  cursor: pointer;
}

body.ms-trial-theme .showSubHeaders.sub-header-label {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 20px;
}

body.ms-trial-theme .showSubHeaders.sub-header-label::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ms-primary);
  border: 2px solid var(--ms-primary);
  transform: translateY(-50%);
  z-index: 2;
}
body.ms-trial-theme .showSubHeaders.sub-header-label::after {
  content: '';
  position: absolute;
  left: -40px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: #e1e5e9;
  transform: translateY(-50%);
  z-index: 1;
}
/* --------------------------------------------------------------------
   Step 2 action bar
   -------------------------------------------------------------------- */

body.ms-trial-theme .ms-step2-actions .adt-action-btn-left,
body.ms-trial-theme .ms-step2-actions label,
body.ms-trial-theme .ms-step2-actions span,
body.ms-trial-theme .ms-step2-actions a {
  margin: 0;
}

/* --------------------------------------------------------------------
   Step 3 — Registration / PDF preview
   -------------------------------------------------------------------- */

body.ms-trial-theme .ms-step3-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--ms-gray-100);
}

body.ms-trial-theme #audit-pdf-preview {
  flex: 1 1 60%;
  min-width: 280px;
  position: relative;
  background: var(--ms-gray-200);
}

@media (min-width: 768px) {
  body.ms-trial-theme .ms-cnt-height-pdf {
    height: calc(100vh - 116px) !important;
  }
}

body.ms-trial-theme .incident-pdf-right {
  /* flex: 1 1 340px;
  background-color: var(--ms-gray-900); */
  max-width: 376px;
  position: relative;
  display: flex;
  flex-direction: column;
}

body.ms-trial-theme .incident-pdf-right .right-heading {
  width: 96%;
  border: 1px solid lightgray;
  background: #f3f4f6;
  border-radius: 6px;
  margin: 10px 6px;
}

body.ms-trial-theme .incident-pdf-right .right-heading h2 {
  width: 100%;
  padding: 14px 20px;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ms-white);
  margin: 0;
  background: var(--ms-primary);
  border-radius: 4px;
}

body.ms-trial-theme .incident-pdf-right .right-content {
  /* flex: 1; */
  overflow-y: auto;
  padding: 20px;
  height: calc(100vh - 260px);
}

body.ms-trial-theme .incident-pdf-right .right-content .sub-heading {
  width: 100%;
  padding: 0 0 15px 0;
  margin: 0;
  font-size: 13px;
  /* line-height: 20px;
  color: var(--ms-gray-300);
  font-weight: 400; */
}

body.ms-trial-theme .incident-pdf-right .btn-section {
  background: #f3f4f6;
  box-shadow: var(--ms-shadow-lg);
  padding: 16px 20px;
  border-radius: 0 0 16px 0;
}
body.ms-trial-theme .incident-pdf-right .btn-section .finish-btn{
  border: 1px solid #e7e7e7 !important;
  color: white;
  display: unset !important;
}
body.ms-trial-theme .incident-pdf-right .btn-section .finish-btn:hover{

}

body.ms-trial-theme .incident-pdf-right .form-control.audit-control {
  background: var(--ms-white);
}

body.ms-trial-theme .incident-pdf-right .password-form-group {
  position: relative;
}

body.ms-trial-theme .incident-pdf-right .password-show,
body.ms-trial-theme .incident-pdf-right .password-hide {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* --------------------------------------------------------------------
   Email OTP verification (registration screen)
   -------------------------------------------------------------------- */

body.ms-trial-theme .ms-otp-section {
  margin-bottom: 15px;
}

body.ms-trial-theme .ms-otp-section .sub-heading {
  padding-bottom: 10px;
}

body.ms-trial-theme .ms-otp-input-group {
  margin-top: 10px;
}

body.ms-trial-theme .ms-otp-input {
  /* letter-spacing: 1px; */
  font-weight: 400;
  /* text-align: center; */
}

body.ms-trial-theme .ms-otp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

body.ms-trial-theme .ms-otp-resend-btn.disabled,
body.ms-trial-theme .ms-otp-resend-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

body.ms-trial-theme .ms-otp-status-msg {
  font-size: 12px;
  margin-top: 8px;
  color: var(--ms-gray-300);
}

body.ms-trial-theme .ms-otp-status-msg.otp-status-success {
  color: var(--ms-success-dark);
}

body.ms-trial-theme .ms-otp-status-msg.otp-status-error {
  color: #f87171;
}

body.ms-trial-theme .ms-otp-verified-msg {
  color: #4ade80;
  font-weight: 700;
  font-size: 13px;
  margin-top: 8px;
}

/* --------------------------------------------------------------------
   Modals — shared modern-* skin (matches the live/main module pattern)
   -------------------------------------------------------------------- */


body.ms-trial-theme .modern-modal {
  backdrop-filter: blur(4px);
}

body.ms-trial-theme .modern-dialog {
  width: 100%;
  margin: 1.75rem auto;
}

body.ms-trial-theme .modern-content {
  border-radius: var(--ms-radius-lg);
  border: none;
  overflow: hidden;
  box-shadow: var(--ms-shadow-lg);
}

body.ms-trial-theme .modern-header {
  background: var(--ms-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 24px;
  /* margin-bottom: 8px; */
  border: none;
}

body.ms-trial-theme .modern-header.audit-pop-bg,
body.ms-trial-theme .modern-header.custom-header {
  font-family: var(--ms-font);
  /* background: var(--ms-primary); */
  /* border-bottom: none; */
}

body.ms-trial-theme .modern-header.audit-pop-bg .modern-title,
body.ms-trial-theme .modern-header.custom-header .modern-title {
  color: var(--ms-white);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}

body.ms-trial-theme .modern-title {
  margin: 0;
  color: #1a1a1a !important;
}

body.ms-trial-theme .modern-close {
  width: 40px;
  height: 40px;
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-border);
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1;
  transition: var(--ms-transition);
}

body.ms-trial-theme .modern-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

body.ms-trial-theme .modern-header.audit-pop-bg .modern-close,
body.ms-trial-theme .modern-header.custom-header .modern-close {
  background: rgba(255, 255, 255, 0.22);
}

body.ms-trial-theme .modern-header.audit-pop-bg .modern-close:hover,
body.ms-trial-theme .modern-header.custom-header .modern-close:hover {
  background: rgba(255, 255, 255, 0.34);
}

body.ms-trial-theme .x-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

body.ms-trial-theme .x-icon::before,
body.ms-trial-theme .x-icon::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: #666;
}

body.ms-trial-theme .modern-header .modern-close .x-icon,
body.ms-trial-theme .modern-header .modern-close .x-icon::before,
body.ms-trial-theme .modern-header .modern-close .x-icon::after {
  color: var(--ms-text);
}

body.ms-trial-theme .modern-header.audit-pop-bg .modern-close .x-icon,
body.ms-trial-theme .modern-header.audit-pop-bg .modern-close .x-icon::before,
body.ms-trial-theme .modern-header.audit-pop-bg .modern-close .x-icon::after,
body.ms-trial-theme .modern-header.custom-header .modern-close .x-icon,
body.ms-trial-theme .modern-header.custom-header .modern-close .x-icon::before,
body.ms-trial-theme .modern-header.custom-header .modern-close .x-icon::after {
  color: var(--ms-white);
}

body.ms-trial-theme .x-icon::before {
  transform: rotate(45deg);
}

body.ms-trial-theme .x-icon::after {
  transform: rotate(-45deg);
}

body.ms-trial-theme .modern-body {
  padding: 0px;
  background: var(--ms-white);
  /* max-height: 65vh; */
  /* overflow-y: auto; */
}

body.ms-trial-theme .modern-footer {
  background: var(--ms-white);
  padding: 0px 24px 12px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border: none;
}

body.ms-trial-theme .modern-input-label {
  font-size: 13px;
  color: var(--ms-text-muted);
  margin-bottom: 0px;
}

body.ms-trial-theme .que-control {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  padding: 12px 14px;
  font-family: var(--ms-font);
  font-size: 13px;
  color: var(--ms-text);
}

body.ms-trial-theme .que-control:focus {
  outline: none;
  border-color: var(--ms-primary);
}

/* ms-image-popup reference image grid */
body.ms-trial-theme .ms-image-div {
  padding: 8px;
  position: relative;
}

body.ms-trial-theme .ms-image-div .image-div {
  position: relative;
  border: 1px solid var(--ms-gray-200);
  border-radius: var(--ms-radius-md);
  overflow: hidden;
}
body.ms-trial-theme .folder-req-row{
  margin-top: 0 !important;
}
body.ms-trial-theme .ms-image-div .access-image-padding {
  width: 100%;
  display: block;
}

body.ms-trial-theme .ms-image-div .audit-image-remove {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.ms-trial-theme .ms-image-div .audit-image-remove img {
  width: 18px;
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------
   Select2 skin (translated from the live app's own Select2 overrides)
   -------------------------------------------------------------------- */

body.ms-trial-theme .select2-container {
  z-index: 20;
  max-width: 100%;
}

body.ms-trial-theme .select2.select2-container--default {
  width: 100% !important;
}

body.ms-trial-theme .select2-container--default .selection .select2-selection--single {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 40px 0 14px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-white);
  transition: var(--ms-transition);
  font-size: 13px;
}

body.ms-trial-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--ms-text);
  line-height: normal;
}

body.ms-trial-theme .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
  right: 10px;
}

body.ms-trial-theme .select2-container--default.select2-container--open .selection .select2-selection--single,
body.ms-trial-theme .select2-container--default .selection .select2-selection--single:hover {
  border-color: var(--ms-primary);
  color: var(--ms-white);
  box-shadow: 0 0 0 3px rgba(var(--ms-primary-rgb), 0.15);
}

body.ms-trial-theme .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ms-gray-500);
}

body.ms-trial-theme .select2-dropdown {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-shadow);
  overflow: hidden;
}

body.ms-trial-theme .select2-results__option {
  padding: 8px 14px;
  font-size: 13px;
}
body.ms-trial-theme .select2-container--default .select2-results__option--highlighted.select2-results__option--selected[aria-selected] {
  background-color: var(--ms-primary);
  color: var(--ms-white);
}
body.ms-trial-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ms-gray-100);
  color: #000;
}

body.ms-trial-theme .input-group{
  flex-wrap: nowrap;
}

body.ms-trial-theme .select2-container--default .select2-results__option[aria-selected="true"] {
  /* background-color: var(--ms-gray-100); */
}

body.ms-trial-theme .select2-container--default.select2-container--disabled .select2-selection--single {
  background: var(--ms-gray-100);
  cursor: not-allowed;
}
body.ms-trial-theme .iconBoxHazardEditor{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

@media (max-width: 991px) {
  body.ms-trial-theme .incident-pdf-right {
    max-width: none;
    flex-basis: 100%;
  }

  body.ms-trial-theme .ms-step3-wrap {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  body.ms-trial-theme .project-header {
  padding: 14px 16px !important;
}

  body.ms-trial-theme .header-title {
  font-size: 16px !important;
}

  body.ms-trial-theme .project-card-main,
  body.ms-trial-theme .ms-builder-card-main {
    padding: 12px;
  }

  body.ms-trial-theme .card-content {
  padding: 16px !important;
}

  body.ms-trial-theme .ms-cnt-height {
    height: auto !important;
  }

  body.ms-trial-theme .ms-builder-card .card-content {
    max-height: 280px;
  }

  body.ms-trial-theme .ms-builder-row {
    flex-direction: column;
  }

  body.ms-trial-theme .ms-builder-right {
    width: 100%;
  }

  body.ms-trial-theme .ms-legislation-bar {
    padding: 12px 16px;
  }

  body.ms-trial-theme .action-buttons {
  padding: 12px 16px !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

  body.ms-trial-theme .button-group {
  width: 100% !important;
  justify-content: center !important;
}

  body.ms-trial-theme .btn,
  body.ms-trial-theme .adt-action-btn-left.custom-statement {
    flex: 1 1 auto;
    justify-content: center;
  }

  body.ms-trial-theme .ms-cnt-height-pdf {
    height: auto !important;
  }

  body.ms-trial-theme #audit-pdf-preview {
    min-height: 320px;
  }

  body.ms-trial-theme .modern-dialog {
    width: auto;
    margin: 16px;
    max-width: calc(100% - 32px);
  }

  body.ms-trial-theme .modern-header,
  body.ms-trial-theme .modern-body,
  body.ms-trial-theme .modern-footer {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  body.ms-trial-theme .header-title {
  font-size: 15px !important;
}

  body.ms-trial-theme .card-title {
  font-size: 13px !important;
}

  body.ms-trial-theme .select2-container--default .selection .select2-selection--single {
    height: 40px;
  }

  body.ms-trial-theme .hazard-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
  }

  body.ms-trial-theme .hazard-box .n_icon-box img {
    max-height: 90px;
  }

  body.ms-trial-theme .hazard-title {
    font-size: 12px;
  }
}

/* Add Custom Statement — inline, per-section card (replaces the single
   shared "Custom Statement" button that used to live in the fixed bottom
   action bar). Rendered once at the end of every header's/sub-header's own
   statement list, so a visitor adds a custom statement directly under the
   section it belongs to instead of having to first make that section the
   "active" one for a single global control. Styled to match the equivalent
   card on the live/logged-in method statement builder (see
   .custom-statement-add-box in module-method-statements.min.css), ported
   here to the --ms-* trial theme tokens since this view doesn't load that
   stylesheet. */
body.ms-trial-theme .ms-add-custom-statement-wrap {
  margin: 20px 0;
  margin-left: 20px;
  position: relative;
}
body.ms-trial-theme .ms-add-custom-statement-wrap::after{
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--ms-gray-200);
  transform: translateY(-50%);
  z-index: 1;
}
body.ms-trial-theme .ms-add-custom-statement-wrap::before{
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ms-primary);
  border: 2px solid var(--ms-primary);
  transform: translateY(-50%);
  z-index: 2;
}
body.ms-trial-theme .ms-add-custom-statement-box {
  background: linear-gradient(135deg, var(--ms-gray-50) 0%, var(--ms-bg) 100%);
  border: 2px dashed var(--ms-primary);
  border-radius: var(--ms-radius);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: var(--ms-transition);
}
body.ms-trial-theme .ms-add-custom-statement-box:hover {
  border-color: var(--ms-primary-dark);
  box-shadow: var(--ms-shadow-lg);
}
body.ms-trial-theme .ms-add-custom-statement-content {
  flex: 1;
}
body.ms-trial-theme .ms-add-custom-statement-content h6 {
  color: var(--ms-primary-dark);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 6px;
}
body.ms-trial-theme .ms-add-custom-statement-content p {
  color: var(--ms-primary-dark);
  font-size: 0.9rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}
body.ms-trial-theme .ms-add-custom-statement {
  background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-primary-dark) 100%);
  color: var(--ms-white);
  border: none;
  padding: 14px 28px;
  border-radius: var(--ms-radius-md);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--ms-shadow);
  min-width: 180px;
  transition: var(--ms-transition);
  text-decoration: none;
}
body.ms-trial-theme .ms-add-custom-statement:hover {
  box-shadow: var(--ms-shadow-lg);
  background: linear-gradient(135deg, var(--ms-primary-dark) 0%, var(--ms-primary) 100%);
  color: var(--ms-white);
  text-decoration: none;
}
body.ms-trial-theme .ms-add-custom-statement i {
  font-size: 12px;
}
@media (max-width: 576px) {
  body.ms-trial-theme .ms-add-custom-statement-box {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
    gap: 16px;
  }
  body.ms-trial-theme .ms-add-custom-statement {
    width: 100%;
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* ---------- ModalDatePicker (Start Date / End Date) ----------
   Ported from risk-assessment-trial-theme.css (RA trial's own port of
   task-complete.min.css), swapping --ra-* tokens for --ms-* equivalents. */
body.ms-trial-theme .datepicker-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.ms-trial-theme .datepicker-modal {
  background: var(--ms-white);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-lg);
  overflow: hidden;
  width: 90%;
  max-width: 400px;
  animation: raModalSlideIn 0.3s ease-out;
}
@keyframes raModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
body.ms-trial-theme .datepicker-modal-header {
  background-color: var(--ms-primary);
  color: var(--ms-white);
  padding: 20px;
  text-align: center;
}
body.ms-trial-theme .air-datepicker-body--day-name {
  color: var(--ms-primary);
}
body.ms-trial-theme .datepicker-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}
body.ms-trial-theme .datepicker-modal-desc {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;
}
body.ms-trial-theme .datepicker-modal-body {
  padding: 0;
}
body.ms-trial-theme .datepicker-modal-body .air-datepicker.-inline-{
  display: contents;
}

body.ms-trial-theme .datepicker-quick-actions {
  padding: 10px;
  border-top: 1px solid var(--ms-gray-200);
  border-bottom: 1px solid var(--ms-gray-200);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.ms-trial-theme .quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px;
  border-radius: var(--ms-radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ms-gray-100);
  background: var(--ms-gray-100);
  color: var(--ms-gray-600);
  cursor: pointer;
  transition: var(--ms-transition);
  flex: 1;
  text-align: center;
  min-width: 80px;
}
body.ms-trial-theme .quick-action-btn:hover {
  background-color: var(--ms-gray-200);
  border-color: var(--ms-gray-200);
}
body.ms-trial-theme .datepicker-modal-footer {
  padding: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

body.ms-trial-theme .select2-container--default .select2-results__option--selected{
  background-color: var(--ms-primary);
  color: var(--ms-white);
}

body.ms-trial-theme .air-datepicker-cell.-selected-,
body.ms-trial-theme .air-datepicker-cell.-selected-.-current- {
  background: var(--ms-primary) !important;
  color: var(--ms-white) !important;
}

body.ms-trial-theme #methodStatementPreviewModal #preview-div{
  padding: 22px;
}

body.ms-trial-theme #alertMsg{
  font-size: 13px;
}

body.ms-trial-theme .air-datepicker-nav {
  padding: 16px 20px;
}
body.ms-trial-theme .air-datepicker-body {
  padding: 15px;
}
body.ms-trial-theme .datepicker-modal-footer .btn-secondary {
  background: #f8fafc !important;
  color: #64748b !important;
}
body.ms-trial-theme .air-datepicker-cell{
  padding: 15px 10px;
  margin: 5px;
  line-height: 40px;
  border-radius: 6px;
  transition: all 0.2s;
}
body.ms-trial-theme .air-datepicker-cell.-current-{
  background-color: var(--ms-primary-light);
  color: #fff;
  font-weight: 500
}

body.ms-trial-theme .air-datepicker-nav--title,
body.ms-trial-theme .air-datepicker-nav--title i {
  color: var(--ms-gray-600);
  font-weight: 600;
}