/* ==========================================================================
   Incident Reporting — Free Trial theme
   --------------------------------------------------------------------------
   Re-skins the visitor "create incident" wizard (create_incident.php) to
   match the colours/typography/card language of the live, logged-in
   Incident Reporting module (dist/module-incident-reports.min.css).

   Scope: everything here is scoped under body.ir-trial-theme so it can
   never leak onto any other page even if this file were linked elsewhere
   by mistake. Nothing in create_incident.php's markup, ids, or JS hooks
   was changed to make this work — only colours, type, spacing, radius and
   shadows are touched; layout-critical positioning rules from the existing
   accident_reports/style.css and responsive.css are left alone.

   Kept in its own file (not merged into style.css/responsive.css) so
   future edits to the shared trial stylesheets, or to the other two
   trial pages' theme files, can't collide with this one.
   ========================================================================== */

body.ir-trial-theme {
  --ir-primary: #00a06a;
  --ir-primary-dark: #15803d;
  --ir-primary-light: #3dad87;
  --ir-bg: #ecfdf5;
  --ir-white: #ffffff;
  --ir-text: #1e293b;
  --ir-text-muted: #64748b;
  --ir-border: #d9ece3;
  --ir-gray-100: #f3f4f6;
  --ir-gray-200: #e5e7eb;
  --ir-gray-500: #6b7280;
  --ir-gray-700: #374151;
  --ir-gray-800: #1f2937;
  --ir-danger: #ef4444;
  --ir-danger-dark: #b91c1c;
  --ir-radius: 12px;
  --ir-radius-lg: 16px;
  --ir-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --ir-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --ir-transition: all 0.2s ease;
  --ir-font: 'Nunito', 'SegoeUI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* background: var(--ir-bg); */
  font-family: var(--ir-font);
}

body.ir-trial-theme,
body.ir-trial-theme input,
body.ir-trial-theme textarea,
body.ir-trial-theme select,
body.ir-trial-theme button {
  font-family: var(--ir-font);
}

/* ---------- Top heading bar ---------- */
body.ir-trial-theme .top-heading-bar {
  background: var(--ir-primary);
  border-bottom: none;
  box-shadow: var(--ir-shadow);
}

body.ir-trial-theme .top-heading-bar .top-heading {
  color: var(--ir-white);
  font-weight: 700;
  letter-spacing: 0.2px;
}

body.ir-trial-theme .top-status-bar {
  background: var(--ir-white);
  border-bottom: 1px solid var(--ir-border);
}

body.ir-trial-theme .top-status-bar a.cancel {
  color: var(--ir-text-muted);
  font-weight: 600;
  transition: var(--ir-transition);
}

body.ir-trial-theme .top-status-bar a.cancel:hover {
  color: var(--ir-primary);
}

/* ---------- Step content card ---------- */
body.ir-trial-theme #report-div {
  background: var(--ir-bg);
}

body.ir-trial-theme .main-container {
  background: #f3f4f6;
  padding: 10px 20px;
}

body.ir-trial-theme .ir-main-container{
  padding: 20px;
}

/* Only pin the step area to one screen's height on desktop, where there's
   room for a fixed header + scrolling body like the live module's panel.
   Below the tablet breakpoint this is switched back to natural page
   scroll (see the responsive section at the end of this file) — trying to
   fit a whole multi-field step inside one phone-height box is what was
   causing steps to look clipped/squashed on small screens. */
@media (min-width: 768px) {
  body.ir-trial-theme .main-container {
    height: calc(100vh - 182px) !important;
  }
}


body.ir-trial-theme .form-block-section {
  background: var(--ir-white);
  border-radius: var(--ir-radius-lg);
  box-shadow: var(--ir-shadow);
  border: 1px solid var(--ir-border);
  overflow: hidden;
}

body.ir-trial-theme .form-block-section > .row {
  margin: 0;
}

body.ir-trial-theme .form-inner label,
body.ir-trial-theme .form-inner label font {
  color: var(--ir-text);
  font-weight: 700;
  font-size: 13px;
}

body.ir-trial-theme .form-group {
  margin-bottom: 0px;
  padding-top: 10px;
}
body.ir-trial-theme .modal-body.modern-body .form-group{
  padding-top: 0px;
  margin-bottom: 15px;
}

.modal-body .form-group + .form-group{
  margin-top: 0px !important;
}

/* ---------- Inputs ---------- */
body.ir-trial-theme .form-control {
  border: 1px solid var(--ir-border);
  border-radius: 6px;
  color: var(--ir-text);
  transition: var(--ir-transition);
  font-size: 13px !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
}

body.ir-trial-theme .form-control:focus {
  border-color: var(--ir-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 160, 106, 0.15) !important;
}

body.ir-trial-theme .form-control.disabled,
body.ir-trial-theme .form-control.disable {
  background-color: #f3f6f5 !important;
}

/* showError()/clearError() field-validation styling (shared front/form-error.js) */
body.ir-trial-theme .error-msg {
  color: var(--ir-danger);
  font-size: 13px;
}

body.ir-trial-theme .form-control.input-error,
body.ir-trial-theme input.input-error,
body.ir-trial-theme textarea.input-error,
body.ir-trial-theme select.input-error {
  border-color: var(--ir-danger) !important;
}

body.ir-trial-theme .select2-selection.input-error {
  border-color: var(--ir-danger) !important;
}

body.ir-trial-theme .input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* Custom fake-select widget (jquery.selectbox.js) — colour/radius only,
   structural positioning rules are left untouched. */
body.ir-trial-theme .custom-selectbox .sbHolder {
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  overflow: hidden;
  transition: var(--ir-transition);
}

body.ir-trial-theme .custom-selectbox .sbHolder:hover {
  border-color: var(--ir-primary-light);
}

body.ir-trial-theme .custom-selectbox .sbSelector {
  color: var(--ir-text);
  opacity: 1;
}

body.ir-trial-theme .custom-selectbox .sbOptions {
  background: var(--ir-white);
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  box-shadow: var(--ir-shadow-lg);
}

body.ir-trial-theme .custom-selectbox .sbOptions a:hover {
  background: var(--ir-bg);
  color: var(--ir-primary-dark);
}

/* ---------- Start Date input-group (calendar icon) ---------- */
body.ir-trial-theme .input-group {
  display: flex;
  align-items: stretch;
}

body.ir-trial-theme .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

body.ir-trial-theme .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--ir-white);
  border: 1px solid var(--ir-border);
  border-left: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}

body.ir-trial-theme .input-group-text svg {
  width: 18px;
  height: 18px;
}

/* ---------- Incident Report Manager select trigger ---------- */
body.ir-trial-theme .report-manager-select_div .select2-container .select2-selection--single {
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  height: 40px;
}

body.ir-trial-theme .report-manager-select_div .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  color: var(--ir-text);
}

body.ir-trial-theme .report-manager-select_div .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
}

/* ---------- Custom radio (Yes/No pills) ----------
   The shared (unscoped) front/accident_reports/style.css hides the native
   radio and fakes one with absolutely-positioned label:before/:after circles
   sized for a much wider legacy label — inside a narrower card/modal that
   math overlaps the circle onto the label text. Replace it here with a
   plain flex row + the real, natively-styled radio input instead of
   fighting the old absolute positioning. */
body.ir-trial-theme .custom-radio-outer {
  display: inline-flex;
  gap: 18px;
  padding: 4px;
  border-radius: 999px;
}

body.ir-trial-theme .custom-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.ir-trial-theme .custom-radio input[type="radio"] {
  display: inline-block;
  position: static;
  margin: 0;
  opacity: 1;
  accent-color: var(--ir-primary);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #999;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}
body.ir-trial-theme .custom-radio input[type="radio"]:checked{
  background-color: var(--ir-primary);
  border-color: var(--ir-primary) !important;
}


body.ir-trial-theme .custom-radio label {
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  font-weight: 400;
  padding: 0;
  position: static;
  margin: 0;
}

body.ir-trial-theme .custom-radio label::before,
body.ir-trial-theme .custom-radio label::after {
  content: none;
  display: none;
}

/* ---------- Buttons ---------- */
body.ir-trial-theme .theme-btn {
  background: var(--ir-primary);
  border-radius: 8px;
  font-family: var(--ir-font);
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: var(--ir-transition);
}

body.ir-trial-theme .theme-btn:hover {
  background: var(--ir-primary-dark);
  transform: translateY(-1px);
}

body.ir-trial-theme .theme-btn.gray-btn {
  background: var(--ir-white);
  color: var(--ir-text);
  border: 1px solid var(--ir-border);
}

body.ir-trial-theme .theme-btn.gray-btn:hover {
  background: var(--ir-bg);
  color: var(--ir-text);
}

body.ir-trial-theme .theme-btn.blue-btn {
  background: #2563eb;
}

body.ir-trial-theme .theme-btn.blue-btn:hover {
  background: #1d4ed8;
}

body.ir-trial-theme .theme-btn.red-btn {
  background: #dc2626;
}
body.ir-trial-theme .footer-btn-section .add_photo_label{
  margin: 0;
}

/* ---------- Sticky footer bar ---------- */
body.ir-trial-theme .footer-btn-section {
  background: var(--ir-white);
  border-top: 1px solid var(--ir-border);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-radius: 0 0 16px 16px;
  box-shadow: 1px 9px 16px rgba(0, 0, 0, 0.05);
}

/* ---------- Info / message cards ---------- */
body.ir-trial-theme .message-box-cnt {
  text-align: center;
}

body.ir-trial-theme .message-box-cnt h2 {
  color: var(--ir-primary-dark);
  font-weight: 800;
}

body.ir-trial-theme .message-box-cnt p {
  color: var(--ir-text-muted);
}

/* ---------- Selectable option lists (injury / ill-health / body part) ---------- */
body.ir-trial-theme .list-block-section ul li,
body.ir-trial-theme ul.body-part-option-list li {
  font-family: var(--ir-font);
  font-weight: 400;
  color: var(--ir-text);
  transition: var(--ir-transition);
}

body.ir-trial-theme .list-block-section ul li:hover,
body.ir-trial-theme ul.body-part-option-list li:hover {
  /* background-color: var(--ir-bg);
  color: var(--ir-primary-dark); */
  background: #e5e7eb;
  border-color: #d1d5db;
}

body.ir-trial-theme .list-block-section ul li.is-hazard-selected,
body.ir-trial-theme ul.body-part-option-list li.selected {
  /* background-color: var(--ir-primary) !important;
  color: var(--ir-white) !important; */
  border-color: var(--ir-primary);
  background: var(--ir-bg);
  color: var(--text-color);
  font-weight: 500;
}
body.ir-trial-theme ul.body-part-option-list li {
  min-height: max-content;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: #374151;
  display: flex;
  justify-content: flex-start;
}

/* ---------- Witness list ---------- */
body.ir-trial-theme .witness-list-section {
  border: none;
  border-radius: 8px;
  /* max-height: 340px; */
  overflow-y: auto;
  background: #f8f9fa;
}

@media (min-width: 768px) {
  body.ir-trial-theme .witness-list-section {
    height: calc(100vh - 370px) !important;
    /* max-height: none; */
  }
}

body.ir-trial-theme .witness-list-section ul li {
  border-bottom: 1px solid var(--ir-border);
  color: var(--ir-text);
}

/* ---------- Photo upload button ---------- */
body.ir-trial-theme .browse-btn.blue-btn {
  background: var(--ir-primary);
  border-radius: 10px;
}

body.ir-trial-theme .browse-btn.blue-btn:hover {
  background: var(--ir-primary-dark);
}

/* Modals are themed in one place further down this file (see "Modals:
   shared modern-* skin", matching the live module's markup exactly). */

/* ---------- "You're nearly there" registration panel ---------- */
body.ir-trial-theme .incident-pdf-right {
  background: var(--ir-white);
  border-radius: var(--ir-radius-lg);
  box-shadow: var(--ir-shadow);
  padding: 12px 24px;
}

body.ir-trial-theme .right-content .sub-heading {
  color: var(--ir-text-muted);
}

body.ir-trial-theme .password-form-group,
body.ir-trial-theme .g-recaptcha-custom {
  margin-bottom: 16px;
}

body.ir-trial-theme .visitor-condition a.terms-popup-page {
  color: var(--ir-primary-dark);
  font-weight: 700;
}

body.ir-trial-theme .btn-section .finish-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
}

/* ---------- Email OTP verification (registration screen) ----------
   Ported from risk-assessment-trial-theme.css's .ra-otp-* block (RA trial),
   since this panel is a light/bordered card too (not MS's dark step-3). */
body.ir-trial-theme .ir-otp-section {
  padding: 16px;
  background: var(--ir-bg);
  border: 1px solid var(--ir-border);
  border-radius: var(--ir-radius);
  margin-bottom: 16px;
}
body.ir-trial-theme .ir-otp-hint {
  color: var(--ir-text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
}
body.ir-trial-theme .ir-send-otp-btn,
body.ir-trial-theme .ir-otp-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ir-white);
  border: none;
  padding: 10px 20px;
}
body.ir-trial-theme .ir-otp-input-group {
  margin-top: 12px;
}
body.ir-trial-theme .ir-otp-input {
  /* letter-spacing: 1px; */
  font-weight: 400;
  /* text-align: center; */
  max-width: 200px;
}
body.ir-trial-theme .ir-otp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
body.ir-trial-theme .ir-otp-actions .theme-btn {
  padding: 8px 18px;
}
body.ir-trial-theme .ir-otp-resend-btn.disabled,
body.ir-trial-theme .ir-otp-resend-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
body.ir-trial-theme .ir-otp-status-msg {
  font-size: 12px;
  margin-top: 8px;
}
body.ir-trial-theme .ir-otp-status-msg.otp-status-success {
  color: var(--ir-primary-dark);
}
body.ir-trial-theme .ir-otp-status-msg.otp-status-error {
  color: #dc2626;
}
body.ir-trial-theme .ir-otp-verified-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ir-primary-dark);
  font-weight: 600;
  font-size: 13px;
  margin-top: 8px;
}
body.ir-trial-theme .ir-otp-verified-msg i {
  font-size: 18px;
}
body.ir-trial-theme .finish-btn:disabled,
body.ir-trial-theme .finish-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.ir-trial-theme .incident-pdf-right .btn-section{
  background: var(--ir-white);
  z-index: 99;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  body.ir-trial-theme .main-container {
    padding: 10px;
  }

  body.ir-trial-theme .form-block-section {
    border-radius: var(--ir-radius);
  }

  body.ir-trial-theme .incident-pdf-right {
    border-radius: 0;
    box-shadow: none;
  }
}

/* ==========================================================================
   Full markup rebuild additions (create_incident.php restructure)
   --------------------------------------------------------------------------
   The sections below style the new project-header / project-card layout
   that replaced the old top-heading-bar / form-block-section wrapper,
   mirroring the live module's index.php card language. Kept in the same
   file (still scoped under body.ir-trial-theme) rather than a second file,
   since it is all still "the IR trial theme" — just the newer half of it.
   ========================================================================== */

/* ---------- Page header ---------- */
body.ir-trial-theme .modern-project-container {
  background: var(--ir-white);
}

body.ir-trial-theme .project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ir-primary);
  padding: 16px 24px;
  box-shadow: var(--ir-shadow);
  border-radius: 16px 16px 0 0;
}

body.ir-trial-theme .project-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.ir-trial-theme .project-header .project-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
}

body.ir-trial-theme .project-header .project-icon svg {
  width: 22px;
  height: 22px;
  color: var(--ir-white);
}

body.ir-trial-theme .project-header .header-title {
  color: var(--ir-white);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  margin: 0;
}

body.ir-trial-theme .project-header a.cancel {
  color: var(--ir-white);
  opacity: 0.9;
  font-weight: 700;
  padding: 0px 16px;
  border-radius: 8px;
  /* background: rgba(255, 255, 255, 0.12); */
  transition: var(--ir-transition);
}

body.ir-trial-theme .project-header a.cancel:hover {
  opacity: 1;
  /* background: rgba(255, 255, 255, 0.22); */
}

/* ---------- Step content area ---------- */
body.ir-trial-theme .project-content {
  display: block;
}

@media (min-width: 768px) {
  body.ir-trial-theme .project-content {
    /* height: calc(100vh - 230px); */
    overflow-y: auto;
  }
}

/* ---------- Cards ---------- */
body.ir-trial-theme .project-card {
  background: var(--ir-white);
  border-radius: var(--ir-radius-lg);
  box-shadow: var(--ir-shadow);
  border: 1px solid var(--ir-gray-200);
  overflow: hidden;
  margin-bottom: 20px;
  
}
body.ir-trial-theme .project-card.other-person-details {
  
}

body.ir-trial-theme .project-card:last-child {
  margin-bottom: 0;
}

body.ir-trial-theme .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ir-gray-100);
}

body.ir-trial-theme .card-header svg {
  width: 20px;
  height: 20px;
  color: var(--ir-gray-500);
  flex: 0 0 20px;
}

body.ir-trial-theme .card-header i.fa-solid,
body.ir-trial-theme .card-header i.fa {
  color: var(--ir-gray-500) !important;
  font-size: 20px;
}

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

body.ir-trial-theme .card-content {
  padding: 12px 24px 0px 24px;
}

body.ir-trial-theme .card-content .row {
  margin: 0 -10px;
  margin-bottom: 1rem;
}

body.ir-trial-theme .card-content .row [class^="col-"] {
  padding: 0 10px;
}

/* ---------- Form labels ---------- */
body.ir-trial-theme .form-label {
  display: block;
  color: var(--ir-gray-700);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  padding-left: 2px;
  padding-bottom: 0px;
}

/* ---------- Person-details sub-section (nested inside a card column) ---------- */
body.ir-trial-theme .form-section.person-details-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--ir-radius);
  padding: 32px;
}

body.ir-trial-theme .section-title {
  color: var(--ir-gray-800);
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 1.5rem 0;
}

body.ir-trial-theme .witness_form .section-title {
  margin-top: 14px;
}

body.ir-trial-theme .form-row {
  display: flex;
  gap: 12px;
}

body.ir-trial-theme .form-row .form-group {
  flex: 1;
  min-width: 0;
}

/* ---------- Info / message boxes (injury, ill-health, near-miss intro) ---------- */
body.ir-trial-theme .info-message-box {
  background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
  border: 1px solid #fecaca;
  border-radius: var(--ir-radius);
  padding: 20px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  body.ir-trial-theme .info-message-box {
    height: calc(100vh - 290px);
    overflow-y: auto;
  }
}

body.ir-trial-theme .message-icon {
  margin: 0 auto 15px;
  width: 48px;
  height: 48px;
  background: #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: white;
  font-size: 22px;
}

body.ir-trial-theme .info-message-box h3 {
  color: #991b1b;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 15px 0;
}

body.ir-trial-theme .info-message-box p {
  font-size: 13px;
  color: #7f1d1d;
  margin-bottom: 10px;
  line-height: 1.5;
}

body.ir-trial-theme .ill-health-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
  border: 1px solid #fbbf24;
}

body.ir-trial-theme .near-miss-box {
  background: linear-gradient(135deg, #fed7aa 0%, #fed7d7 100%);
  border: 1px solid #fb923c;
}

/* ---------- Injury / ill-health / near-miss option lists ---------- */
body.ir-trial-theme .injury-list-main-div {
  display: flex;
  flex-direction: column;
}
body.ir-trial-theme .body-part-div {
  max-height: 320px;
  overflow-y: auto;
}

@media (min-width: 768px) {
  body.ir-trial-theme .body-part-div {
    height: calc(100vh - 290px);
    max-height: none;
    overflow-y: auto;
  }
}

body.ir-trial-theme .injury-list-div {
  flex: 1;
}

body.ir-trial-theme .injury-options-list,
body.ir-trial-theme .ill-health-options-list,
body.ir-trial-theme .near-miss-options-list {
  /* border: 1px solid var(--ir-border);
  border-radius: 10px; */
  max-height: 260px;
  overflow-y: auto;
}

@media (min-width: 768px) {
  body.ir-trial-theme .injury-options-list,
  body.ir-trial-theme .ill-health-options-list,
  body.ir-trial-theme .near-miss-options-list {
    height: calc(100vh - 330px);
    max-height: none;
  }
}

body.ir-trial-theme .injury-options-list ul,
body.ir-trial-theme .ill-health-options-list ul,
body.ir-trial-theme .near-miss-options-list ul {
  /* list-style: none;
  margin: 0;
  padding: 0; */
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 0 15px 0 0;
  margin-bottom: 15px;
  overflow-y: auto;
  /* height: calc(100vh - 326px); */
}

body.ir-trial-theme .injury-options-list li,
body.ir-trial-theme .ill-health-options-list li,
body.ir-trial-theme .near-miss-options-list li {
  /* padding: 10px 14px;
  border-bottom: 1px solid var(--ir-border);
  font-weight: 600;
  color: var(--ir-text);
  cursor: pointer;
  transition: var(--ir-transition); */
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: #374151;
}

body.ir-trial-theme .injury-options-list li:last-child,
body.ir-trial-theme .ill-health-options-list li:last-child,
body.ir-trial-theme .near-miss-options-list li:last-child {
  /* border-bottom: none; */
}

body.ir-trial-theme .injury-options-list li:hover,
body.ir-trial-theme .ill-health-options-list li:hover,
body.ir-trial-theme .near-miss-options-list li:hover {
  /* background: var(--ir-bg);
  color: var(--ir-primary-dark); */
  background: #e5e7eb;
  border-color: #d1d5db;
}

body.ir-trial-theme .injury-options-list li.selected,
body.ir-trial-theme .ill-health-options-list li.selected,
body.ir-trial-theme .near-miss-options-list li.selected {
  /* background: var(--ir-primary) !important;
  color: var(--ir-white) !important; */
  border-color: var(--ir-primary);
  background: var(--ir-bg);
  color: var(--text-color);
  font-weight: 500;
}

/* ---------- Sketch / body-part buttons ---------- */
body.ir-trial-theme .body-parts-custom-list {
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--ir-text);
  min-height: 38px;
  cursor: pointer;
  font-size: 13px;
}

body.ir-trial-theme .edit-skecth-btn,
body.ir-trial-theme .add-skecth-btn {
  display: flex;
  gap: 10px;
}

body.ir-trial-theme .edit-skecth-btn .theme-btn,
body.ir-trial-theme .add-skecth-btn .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ---------- Witness section ---------- */
body.ir-trial-theme .witness_form {
  margin-top: 6px;
}

body.ir-trial-theme .witness-form-element {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

body.ir-trial-theme .witness-form-element .form-group {
  flex: 1 1 200px;
  min-width: 160px;
}

body.ir-trial-theme .witness-btn {
  margin-top: 12px;
}

body.ir-trial-theme .witness-list-section.witnesses-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* max-height: 320px; */
  overflow-y: auto;
}

/* ---------- Days-off select ---------- */
body.ir-trial-theme .custom-selectbox.number-days {
  width: 100%;
}

/* ---------- Witnesses step: header "Add Witness" trigger + empty state ---------- */
body.ir-trial-theme .card-header.witness-section-header {
  justify-content: space-between;
}

body.ir-trial-theme .add-witness-header-btn {
  padding: 8px 18px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body.ir-trial-theme .witness-list-block {
  margin-top: 4px;
}

body.ir-trial-theme .witnesses-list.witness-list-section {
  border: 1px solid var(--ir-border);
  border-radius: var(--ir-radius);
  /* min-height: 280px; */
  padding: 0;
  position: relative;
}

body.ir-trial-theme .witness-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: calc(100vh - 372px);
  color: #6c757d;
  background: #f8fafc;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
}

body.ir-trial-theme .witnesses-list ul:empty ~ .witness-empty-state {
  display: flex;
}

body.ir-trial-theme .witness-empty-state svg {
  /* width: 40px;
  height: 40px;
  color: #cbd5e1; */
}

body.ir-trial-theme .witness-empty-state p {
  margin: 0;
  font-size: 14px;
}

/* ---------- Witness list: card rows ----------
   Uses the live/logged-in module's own witness card markup and class names
   (.modern-assessment-card etc. -- see accident-report.js) instead of a
   bespoke card, so this trial page renders the same component. Those
   classes' rules normally come from task-complete.min.css and
   module-incident-reports.min.css, which aren't loaded on this trial page
   (loading either whole file would pull in a lot of unrelated global
   styling); the declarations below are copied from just the selectors this
   card actually uses, with colors mapped onto this theme's own --ir-*
   tokens so the card matches the rest of the trial page instead of the
   live module's blue/gray palette. */
body.ir-trial-theme .witnesses-list.witness-list-section {
  background: #f8f9fa;
  padding: 12px;
}

body.ir-trial-theme .witness-items {
  margin-top: 10px !important;
  padding-top: 4px !important;
}

body.ir-trial-theme .witness-list-section.witnesses-list ul li:last-child .modern-assessment-card {
  margin-bottom: 0;
}

body.ir-trial-theme .modern-assessment-card {
  background: var(--ir-white);
  border: 1px solid var(--ir-border);
  border-radius: var(--ir-radius);
  margin-bottom: 10px;
  padding: 10px;
  transition: var(--ir-transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.ir-trial-theme .modern-assessment-card:hover {
  border-color: var(--ir-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.ir-trial-theme .assessment-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

body.ir-trial-theme .assessment-info-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

body.ir-trial-theme .assessment-icon-wrapper {
  flex-shrink: 0;
}

body.ir-trial-theme .assessment-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ir-primary);
  background: var(--ir-gray-100);
  border-radius: 8px;
}

body.ir-trial-theme .assessment-details {
  flex: 1;
  min-width: 0;
}

body.ir-trial-theme .witness_info.assessment-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ir-text);
  line-height: 1.3;
}

body.ir-trial-theme .witness-email {
  font-size: 13px;
  font-weight: 400;
  color: var(--ir-text-muted);
  padding-top: 3px;
}

body.ir-trial-theme .right-action-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

body.ir-trial-theme .right-action-links .action-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ir-border);
  border-radius: 6px;
  background: var(--ir-white);
  color: var(--ir-text-muted);
  cursor: pointer;
  transition: var(--ir-transition);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.ir-trial-theme .right-action-links .action-icon-btn i{
  font-size: 13px;
}

body.ir-trial-theme .right-action-links .action-icon-btn.edit-btn:hover {
  border-color: var(--ir-primary);
  color: var(--ir-primary);
  /* background: var(--ir-primary-light); */
  text-decoration: none;
}

body.ir-trial-theme .right-action-links .action-icon-btn.delete-btn:hover {
  border-color: #fca5a5;
  color: var(--ir-danger);
  /* background: #fee2e2; */
  text-decoration: none;
}

/* ---------- "What happened?" tips modal ---------- */
body.ir-trial-theme #whatHappenedInfoModal .what-happened-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.ir-trial-theme #whatHappenedInfoModal .what-happened-tips-list li {
  padding: 6px 0;
  color: var(--ir-text);
  font-size: 13px;
  padding-bottom: 10px;
}

body.ir-trial-theme #whatHappenedInfoModal .what-happened-tips-list li:last-child {
  border-bottom: none;
}

/* ---------- Step 5: "ra-card" pill layout (First Aid & Follow-up) ---------- */
body.ir-trial-theme .futrher-risk-assessment-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* body.ir-trial-theme .futrher-risk-assessment-container.ra-cards-row {
  flex-direction: row;
  flex-wrap: wrap;
} */

/* body.ir-trial-theme .futrher-risk-assessment-container.ra-cards-row .ra-card {
  flex: 1 1 260px;
  min-width: 240px;
} */

body.ir-trial-theme .ra-card {
  border-radius: 8px;
  border: 1px solid var(--ir-gray-200);
  background: var(--ir-white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08),
    0 1px 8px rgba(0, 0, 0, 0.04);
  padding: 1rem;
}

body.ir-trial-theme .ra-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ir-gray-100);
}

body.ir-trial-theme .ra-card-header .ra-icon,
body.ir-trial-theme .first-status .ra-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 12px;
  background: var(--ir-primary-light);
  color: var(--ir-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

body.ir-trial-theme .ra-card-header h3 {
  margin: 0 0 2px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ir-text);
}

body.ir-trial-theme .ra-card-header p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  padding: 0px;
}

body.ir-trial-theme .ra-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 70px;
}

body.ir-trial-theme .ra-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #eee;
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: var(--ir-transition);
}

body.ir-trial-theme .ra-options label:hover {
  background: var(--ir-primary-light);
  color: var(--ir-white);
}

body.ir-trial-theme .ra-options label.active {
  background: var(--ir-primary);
  color: var(--ir-white);
}

body.ir-trial-theme #image-annotate .modal-body{
  background: var(--ir-gray-200) !important;
  padding-top: 8px !important;
}

/* Selected pill gets a small white checkmark badge, matching the
   live/logged-in module's own "How much time was taken off work?" /
   "Number of Days Off Work" pills -- this theme's version only recolored
   the pill on selection with no icon. The radio itself stays hidden
   (input[type=radio] below); the badge is a ::before on the active label
   so it needs no markup change in either the static PHP options or the
   JS-generated day-count pills, which share this same .ra-options markup. */
body.ir-trial-theme .ra-options label::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ir-white);
  color: var(--ir-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border: 2px solid #999;
}

body.ir-trial-theme .ra-options label.active::before {
  content: '✓';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ir-white);
  color: var(--ir-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border: 2px solid #fff;
}

body.ir-trial-theme .ra-options input[type="radio"] {
  display: none;
}

body.ir-trial-theme .first-aid-given-details-card {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  min-height: 100px;
}

body.ir-trial-theme .first-aid-given-details-card .first-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* flex: 1 1 260px; */
}

body.ir-trial-theme .first-aid-detail-col {
  /* flex: 1 1 260px; */
}

/* ---------- Photo upload button ---------- */
body.ir-trial-theme .browse-btn .add_photo_label {
  cursor: pointer;
  margin: 0;
  color: inherit;
}

/* ---------- Registration / PDF preview panel ---------- */
body.ir-trial-theme .incident-pdf-outer {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 20px;
  /* padding: 20px; */
  height: calc(100vh - 118px);
}

body.ir-trial-theme .btn{
  width: fit-content;
}

body.ir-trial-theme .incident-pdf-left {
  /* flex: 1 1 55%; */
  min-width: 280px;
  background: var(--ir-white);
  /* border-radius: var(--ir-radius-lg); */
  border: 1px solid var(--ir-border);
  box-shadow: var(--ir-shadow);
  overflow: hidden;
}

body.ir-trial-theme .incident-pdf-left .iframe_height {
  min-height: 480px;
}

body.ir-trial-theme .incident-pdf-right {
  flex: 1 1 35%;
  min-width: 280px;
  background: var(--ir-white);
  border-radius: 0 0 16px 0;
  box-shadow: var(--ir-shadow);
  border: 1px solid var(--ir-border);
  padding: 12px;
  height: fit-content;
}

body.ir-trial-theme .right-heading h2 {
  color: #fff;
  font-weight: 700;
  margin: 0 0 8px 0;
  padding: 14px 20px;
  height: 56px;
  font-size: 18px;
}
body.ir-trial-theme #terms-conditions-plan .modal-header.custom-header h4{
  color: var(--ir-text);
  font-size: 18px;
}

body.ir-trial-theme .form-section.person-details-section:hover{
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
body.ir-trial-theme .right-content .sub-heading {
  color: var(--ir-text-muted);
  font-size: 13px;
  margin-bottom: 16px;
}

body.ir-trial-theme .password-form-group {
  position: relative;
}

body.ir-trial-theme .password-show,body.ir-trial-theme .password-hide {
  position: absolute;
  right: 12px;
  top: 20px;
}

body.ir-trial-theme .visitor-condition.custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--ir-text-muted);
  margin-bottom: 50px;
}

body.ir-trial-theme .visitor-condition.custom-checkbox input {
  margin-top: 3px;
}

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

body.ir-trial-theme .btn-section .finish-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
}

/* ==========================================================================
   Modals: shared modern-* skin
   --------------------------------------------------------------------------
   Matches the live module's own modal markup/classes (modal-content
   .modern-content, .modal-header.modern-header, .modal-title.modern-title,
   .modal-body.modern-body, .modal-footer.modern-footer, .close.modern-close
   with a .x-icon glyph, .btn/.btn-primary/.btn-secondary action buttons)
   rather than the page's own bespoke .theme-btn look, so every popup here
   reads as the same component as the authenticated app's. Bootstrap 4 (via
   accident_reports/bootstrap.min.css) already supplies the base .modal /
   .modal-dialog / .modal-content mechanics and the plain .btn box model —
   only colour, radius, spacing and the couple of small utility classes the
   live page's modals use (.fw-bold, .fs-6, .form-check-input) are added
   here, matching the live module's own hand-rolled versions of those
   classes rather than a full Bootstrap 5 import.
   ========================================================================== */
body.ir-trial-theme .modern-modal {
  backdrop-filter: blur(4px);
}

body.ir-trial-theme .modern-modal .vertical-alignment-helper {
  display: flex;
  align-items: center;
  min-height: 100%;
}

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

body.ir-trial-theme .modern-modal.small .modern-dialog {
  max-width: 420px;
}

body.ir-trial-theme .modern-content {
  border-radius: var(--ir-radius-lg) !important;
  border: none;
  box-shadow: var(--ir-shadow-lg);
  overflow: hidden;
  background: var(--ir-white);
}

/* .header-name-bg wraps header+body+footer in one extra .row (matching the
   live editModes markup) so its own children need the flex/column layout
   the plain .modal-content already gets implicitly from stacked blocks. */
body.ir-trial-theme .modern-content.header-name-bg > .row {
  margin: 0;
  display: flex;
  flex-direction: column;
}

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

/* The two header treatments the live module uses for "prominent" modals
   (the overwrite-confirm popup and the reporting-images popup): a filled
   brand-colour bar instead of the plain white header above. */
body.ir-trial-theme .modern-header.custom-header,
body.ir-trial-theme .modern-header.audit-pop-bg,
body.ir-trial-theme .modern-header.body-parts-modal-header {
  padding: 24px 24px 0 24px;
  margin-bottom: 8px;
}

body.ir-trial-theme .modern-header .header-title,
body.ir-trial-theme .modern-header .madd-heading,
body.ir-trial-theme .modern-header .modern-title,
body.ir-trial-theme .modern-header h2,
body.ir-trial-theme .modern-header h3,
body.ir-trial-theme .modern-header h4 {
  color: var(--ir-text);
  font-size: 18px;
  margin: 0;
}


body.ir-trial-theme .modern-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.ir-trial-theme .close-btn1.modern-close{
  font-size: 18px;
  height: 40px;
  width: 40px;
  margin: -7px -7px -7px 0px;
}
body.ir-trial-theme .close-btn1.modern-close i{
  color: #666;
}
#image-annotate .vertical-alignment-helper .modal-dialog .modal-content .modal-body .que-body-top .col-xs-12.col-sm-12{
  min-height: 407px;
}
body.ir-trial-theme #myCanvas .image-canvas{
  min-height: 407px;
}

body.ir-trial-theme .modern-close,
body.ir-trial-theme .body-parts-modal-header-action .close {
  border: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--ir-transition);
  opacity: 1;
  padding: 0;
}

body.ir-trial-theme .modern-close:hover {
  transform: scale(1.05);
}

body.ir-trial-theme .modern-header .modern-close:hover {
  background: #e8e8e8;
}

/* Pure-CSS "x" glyph inside .modern-close, matching the live module. */
body.ir-trial-theme .x-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

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

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

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

body.ir-trial-theme .modern-body {
  padding: 15px 24px;
  color: var(--ir-text);
  overflow-y: auto;
  max-height: calc(100vh - 230px);
}

body.ir-trial-theme .modern-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 24px 12px 24px;
  border-top: none;
  background-color: transparent;
}

/* Small text utilities the live module's modals use inline (its own
   hand-rolled versions of these two Bootstrap-5 utility classes). */
body.ir-trial-theme .fw-bold {
  font-weight: 700 !important;
}

body.ir-trial-theme .fs-6 {
  font-size: 1rem !important;
}

body.ir-trial-theme .consent-sub-heading {
  color: var(--ir-text-muted);
  font-size: 13px;
}

body.ir-trial-theme .incident-photos-understand {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ir-text-muted);
}

/* Simple checkbox skin (standing in for the live module's Bootstrap-5
   .form-check-input, without needing that whole framework) */
body.ir-trial-theme .form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--ir-border);
  border-radius: 4px;
  accent-color: var(--ir-primary);
  cursor: pointer;
}

/* Action buttons: reuse Bootstrap 4's .btn box model (already loaded) and
   just recolour .btn-primary/.btn-secondary to this page's palette,
   matching how the live module treats its own .btn-primary/.btn-secondary. */
body.ir-trial-theme .btn {
  border-radius: 8px !important;
  font-family: var(--ir-font);
  padding: 10px 20px;
  transition: var(--ir-transition);
}

body.ir-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(--ir-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

body.ir-trial-theme .btn-primary {
  background: var(--ir-primary) !important;
  border-color: var(--ir-primary) !important;
  color: var(--ir-white) !important;
  margin-bottom: 0px  !important;
  box-shadow:none !important;
  font-size: 13px;
}

body.ir-trial-theme .btn-primary:hover {
  background: var(--ir-primary-dark) !important;
  border-color: var(--ir-primary-dark) !important;
  box-shadow:none !important;
}

body.ir-trial-theme .btn-danger {
  background: var(--ir-danger) !important;
  border-color: var(--ir-danger) !important;
  color: var(--ir-white) !important;
  margin-bottom: 0px  !important;
  box-shadow:none !important;
}

body.ir-trial-theme .btn-danger:hover {
  background: var(--ir-danger-dark) !important;
  border-color: var(--ir-danger-dark) !important;
  box-shadow:none !important;
}

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

body.ir-trial-theme .btn.btn-secondary{
  margin: 0px !important;
}

body.ir-trial-theme .btn-secondary:hover {
  background: var(--ir-bg) !important;
  color: var(--ir-text) !important;
}

.modal-dialog.modern-dialog{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: unset !important;
}

/* Body-part / images pick modals */
body.ir-trial-theme .body-part-option-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: auto;
  padding: 0 15px 0 0;
  height: calc(100vh - 262px);
}

body.ir-trial-theme .body-part-option {
  padding: 8px 16px;
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  font-weight: 600;
  color: var(--ir-text);
  cursor: pointer;
  transition: var(--ir-transition);
}

body.ir-trial-theme .body-part-option:hover {
  /* border-color: var(--ir-primary-light);
  color: var(--ir-primary-dark); */
}

body.ir-trial-theme .body-part-option.selected {
  /* background: var(--ir-primary);
  border-color: var(--ir-primary);
  color: var(--ir-white); */
  border-color: var(--ir-primary);
  background: var(--ir-bg);
  color: var(--text-color);
  font-weight: 500;
}

body.ir-trial-theme .image-div {
  position: relative;
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

body.ir-trial-theme .image-div .access-image-padding {
  width: 100%;
  display: block;
}

body.ir-trial-theme .image-div .audit-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* ---------- Generic disabled-field styling ----------
   Ported verbatim from the inline <style> block that used to live at the
   bottom of create_incident.php, so behaviour is unchanged now that it
   lives in this stylesheet instead. */
body.ir-trial-theme .disabled {
  pointer-events: none;
  opacity: 1;
  background-color: #e9ecef !important;
  color: #000;
}

/* ==========================================================================
   Select2 skin
   --------------------------------------------------------------------------
   The trial layout now loads select2.min.css/js and applies the
   select2-without-search class to every dropdown that used to rely on the
   (now-disabled) jquery.selectbox.js widget. This section reskins Select2's
   own DOM to match the live module's look (same visual language it uses in
   dist/task-complete.min.css) using this file's --ir-* tokens instead of
   the module's Bootstrap-5 variables, so nothing outside this page's own
   palette needs to be loaded.
   ========================================================================== */
body.ir-trial-theme .select2-container {
  z-index: 20;
  max-width: 100%;
}

body.ir-trial-theme .select2.select2-container--default,
body.ir-trial-theme .select2-without-search.select2-container--default {
  width: 100% !important;
}

body.ir-trial-theme .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 40px 0 14px;
  background-color: var(--ir-white);
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  transition: var(--ir-transition);
}

body.ir-trial-theme .select2-container--default .select2-selection--single:hover {
  border-color: var(--ir-primary-light);
}

body.ir-trial-theme .select2-container--default.select2-container--open .select2-selection--single,
body.ir-trial-theme .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ir-primary);
  box-shadow: 0 0 0 3px rgba(0, 160, 106, 0.15);
}

body.ir-trial-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--ir-text);
  font-weight: 600;
  font-family: var(--ir-font);
  line-height: 1.4;
}

body.ir-trial-theme .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ir-text-muted);
  font-weight: 400;
}

body.ir-trial-theme .select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  width: auto;
}

body.ir-trial-theme .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--ir-text-muted) transparent transparent transparent;
}

body.ir-trial-theme .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--ir-text-muted) transparent;
}

body.ir-trial-theme .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #f3f6f5;
  cursor: not-allowed;
}

/* Dropdown panel */
body.ir-trial-theme .select2-dropdown {
  border: 1px solid var(--ir-border);
  border-radius: 10px;
  box-shadow: var(--ir-shadow-lg);
  overflow: hidden;
  font-family: var(--ir-font);
}

body.ir-trial-theme .select2-container--default .select2-search--dropdown {
  padding: 8px;
  border-bottom: 1px solid var(--ir-border);
}

body.ir-trial-theme .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ir-border);
  border-radius: 8px;
  padding: 6px 10px;
}

body.ir-trial-theme .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--ir-primary);
}

body.ir-trial-theme .select2-container--default .select2-results > .select2-results__options {
  max-height: 260px;
}

body.ir-trial-theme .select2-container--default .select2-results__option {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ir-text);
  transition: var(--ir-transition);
}

body.ir-trial-theme .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--ir-bg);
  color: var(--ir-primary-dark);
}

body.ir-trial-theme .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--ir-primary);
  color: var(--ir-white);
}

/* Full (searchable) select2 — used only for long lists, if any */
body.ir-trial-theme .select2-container--default .select2-selection--multiple {
  min-height: 42px;
  padding: 6px 10px;
  background-color: var(--ir-white);
  border: 1px solid var(--ir-border);
  border-radius: 10px;
}

body.ir-trial-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--ir-primary);
  border-color: var(--ir-primary);
  color: var(--ir-white);
  border-radius: 999px;
  padding: 2px 10px;
}

body.ir-trial-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--ir-white);
  border: none;
  opacity: 0.8;
}

body.ir-trial-theme .btn-primary:not(:disabled):not(.disabled).active,
body.ir-trial-theme .btn-primary:not(:disabled):not(.disabled):active{
  box-shadow:none !important;
}
body.ir-trial-theme #step2 .card-content{
  overflow-y: auto;
  height: calc(100vh - 258px);
}

body.ir-trial-theme #step2 .ir-textarea-height{
  height: calc(100vh - 334px);
}
body.ir-trial-theme #step2 .col-md-4 .form-group{
  margin-bottom: 0px;
}
body.ir-trial-theme #step3 .card-content{
  height: calc(100vh - 280px);
  padding: 24px !important;
}
body.ir-trial-theme #step7 .card-content,
body.ir-trial-theme #step6 .card-content,
body.ir-trial-theme #step4 .card-content{
  overflow: auto;
  height: calc(100vh - 260px);
}
/* body.ir-trial-theme .card-header i.fa-solid,
body.ir-trial-theme .card-header i.fa{
  color: white !important;
} */
body.ir-trial-theme .incident-pdf-right .right-content{
  position: unset;
  overflow-y: auto;
  height: calc(100vh - 208px);
}
body.ir-trial-theme .incident-pdf-right .right-heading{
  background-color: var(--ir-primary);
  float: none;
  border-radius: 8px;
}
/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   General rule for this page: above the tablet breakpoint it can afford
   the live module's "fixed header, one scrolling panel per step" feel
   (handled by the calc(100vh - Npx) rules earlier in this file, each
   wrapped in its own @media (min-width: 768px) block). Below that, this
   page reverts to plain page scroll — trying to squeeze a multi-field
   step into a fraction of a phone's viewport is what was making the wizard
   look broken/cut-off on small screens, so mobile gets the simpler,
   sturdier layout instead of a shrunk copy of the desktop one.
   ========================================================================== */

@media (max-width: 991px) {
  body.ir-trial-theme .form-row {
    flex-direction: column;
    gap: 0;
  }

  body.ir-trial-theme .incident-pdf-outer {
    flex-direction: column;
  }

  body.ir-trial-theme .card-content .row [class^="col-"] {
    margin-bottom: 4px;
  }
}

@media (max-width: 767px) {
  body.ir-trial-theme .project-header {
    padding: 14px 16px;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  body.ir-trial-theme .project-header .header-title {
    font-size: 16px;
  }

  body.ir-trial-theme .project-header .header-left {
    gap: 10px;
  }

  body.ir-trial-theme .project-header .project-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  body.ir-trial-theme .project-header .project-icon svg {
    width: 18px;
    height: 18px;
  }

  body.ir-trial-theme .card-header,
  body.ir-trial-theme .card-content {
    padding: 14px 16px;
  }

  body.ir-trial-theme .card-title {
    font-size: 15px;
  }

  /* Whole-page scroll on mobile instead of a pinned-viewport panel. */
  body.ir-trial-theme .main-container {
    height: auto !important;
  }

  body.ir-trial-theme .project-content {
    height: auto;
    overflow-y: visible;
  }

  /* Stack the footer bar (photo upload + Back/Next) instead of letting it
     overflow on narrow screens. */
  body.ir-trial-theme .footer-btn-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  body.ir-trial-theme .footer-btn-section .btn-right {
    display: flex;
    gap: 10px;
  }

  body.ir-trial-theme .footer-btn-section .btn-right .theme-btn {
    flex: 1;
    text-align: center;
  }

  /* Yes/No pills wrap instead of overflowing a narrow column. */
  body.ir-trial-theme .custom-radio-outer {
    flex-wrap: wrap;
  }

  /* Modals take the full width with a small margin instead of the
     desktop's fixed dialog width. */
  body.ir-trial-theme .modern-modal .modal-dialog {
    width: auto;
    margin: 16px;
  }

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

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

  body.ir-trial-theme .witness-form-element .form-group {
    flex: 1 1 100%;
  }

  body.ir-trial-theme .incident-pdf-right,
  body.ir-trial-theme .incident-pdf-left {
    flex: 1 1 100%;
  }
}

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

  body.ir-trial-theme .project-header a.cancel {
    padding: 6px 12px;
    font-size: 13px;
  }

  body.ir-trial-theme .card-content {
    padding: 12px;
  }

  body.ir-trial-theme .info-message-box {
    padding: 14px;
  }

  body.ir-trial-theme .injury-options-list,
  body.ir-trial-theme .ill-health-options-list,
  body.ir-trial-theme .near-miss-options-list,
  body.ir-trial-theme .body-part-div,
  body.ir-trial-theme .witness-list-section {
    /* max-height: 220px; */
  }

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

/* ---------- ModalDatePicker (Start Date) ----------
   Ported from risk-assessment-trial-theme.css (RA trial's own port of
   task-complete.min.css), swapping --ra-* tokens for --ir-* equivalents.
   A couple of tokens RA/MS have that this file doesn't (primary-on-color
   text, a smaller "sm" radius, a mid gray) are inlined directly below
   instead of adding new custom properties for a single feature.
   Date: 03/09/2026 */
body.ir-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.ir-trial-theme .datepicker-modal {
  background: var(--ir-white);
  border-radius: var(--ir-radius);
  box-shadow: var(--ir-shadow-lg);
  overflow: hidden;
  width: 90%;
  max-width: 400px;
  animation: irModalSlideIn 0.3s ease-out;
}
@keyframes irModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body.ir-trial-theme .modal-content .modal-header .close{
  margin: 0px;
}
body.ir-trial-theme .datepicker-modal-header {
  background-color: var(--ir-primary);
  color: var(--ir-white);
  padding: 20px;
  text-align: center;
}
body.ir-trial-theme .air-datepicker-body--day-name {
  color: var(--ir-primary);
}
body.ir-trial-theme .datepicker-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}
body.ir-trial-theme .datepicker-modal-desc {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;
  padding: 0;
}
body.ir-trial-theme .datepicker-modal-body {
  padding: 0;
}
body.ir-trial-theme .datepicker-modal-body .air-datepicker.-inline- {
  display: contents;
}

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

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

/* ---------- Time picker (AirDatepicker onlyTimepicker) ----------
   The calendar view above is themed, but the time-only popup (Start Time)
   was still on AirDatepicker's own unthemed defaults -- plain-colored
   digits and small square slider handles -- instead of the bold, primary-
   colored readout and filled circular handles the live/logged-in module
   uses. That styling lives in modern_styles_css.css, which isn't loaded on
   this trial page; ported just those declarations here, onto this theme's
   own tokens instead of the live module's blue/gray ones. */
body.ir-trial-theme .air-datepicker-time--current {
  color: var(--ir-primary-dark);
  font-weight: 600;
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: var(--ir-gray-200);
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"]:hover {
  background: #d1d5db;
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 4px;
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ir-primary);
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--ir-primary-dark);
  transform: scale(1.15);
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ir-primary);
  border: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}

body.ir-trial-theme .air-datepicker-time--row input[type="range"]::-moz-range-thumb:hover {
  background: var(--ir-primary-dark);
  transform: scale(1.15);
}

/* The readonly-field rule in style.css (#AccidentReportStartDate[readonly],
   #AccidentReportStartTime[readonly]) pins the border to flat gray with
   !important and no :focus exception; as an ID selector it beats
   .form-control:focus above even though that's !important too (an ID
   always outranks any number of classes at equal !important). Box-shadow
   isn't touched by that rule, which is why the focus glow already showed
   green while only the border stayed gray. Overrides just the focused
   case, scoped to this trial page. */
body.ir-trial-theme #AccidentReportStartDate[readonly]:focus,
body.ir-trial-theme #AccidentReportStartTime[readonly]:focus {
  border-color: var(--ir-primary) !important;
}

body.ir-trial-theme #injury-what-happen{
  color: #000 !important;
}

body.ir-trial-theme #step5 .card-content {
  padding-bottom: 24px !important;
}

body.ir-trial-theme #myCanvas.annotate-container>[id^="baseLayer"],
body.ir-trial-theme #myCanvas.annotate-container>[id^="drawingLayer"]{
  max-height: calc(100% - 10px) !important;
}

body.ir-trial-theme .air-datepicker-nav {
  padding: 16px 20px;
}
body.ir-trial-theme .air-datepicker-body {
  padding: 15px;
}
body.ir-trial-theme .air-datepicker-cell {
  padding: 15px 10px;
  margin: 5px;
  line-height: 40px;
  border-radius: 6px;
  transition: all 0.2s;
}
body.ir-trial-theme .air-datepicker-nav--title,
body.ir-trial-theme .air-datepicker-nav--title i {
  color: var(--ir-gray-600);
  font-weight: 600;
}