/* SafePort Portal - Custom CSS
   Last Updated: 2026-02-17
   
   CHANGELOG:
   - 2026-02-17: FOUC FIX - Progress Indicator h2 now permanently hidden (display:none).
     h2.tab-title is the visible step heading (server-rendered, zero JS dependency).
     Removed div.top h2 from step title spacing rule, now targets h2.tab-title only.
   - 2026-02-05: Added :focus rule for read-only selects (WCAG 2.4.7 - appearance:none
     strips native focus indicator, so explicit focus ring is required)
   - 2026-01-15: Initial version
   - 2026-01-16: Added focus styles, touch targets, CSS variable consistency
   - 2026-01-17: Added Power Pages override patches for portalbasictheme.css conflicts
   - 2026-01-21: Updated CSS variables to use WET4-compatible --pp-focus-ring
   - 2026-01-21: Removed Power Pages datetimepicker rules (~48 lines)
   - 2026-01-25: Updated file upload button focus styling
   - 2026-01-28: Error focus ring fix (separated error state from focus state)
   - 2026-01-28: CLEANUP - Removed duplicate blocks:
     * Removed duplicate touch targets (lines 505-527) - kept enhanced 48px version
     * Removed duplicate reduced motion (lines 530-544) - kept extended version
     * Removed conflicting focus section (lines 1164-1274) - used teal #269abc
       which conflicted with GCWeb blue #1a5a96, and contained dangerous
       *:focus rule that removed ALL focus outlines (WCAG 2.4.7 violation)
     * Consolidated CSS variables in :root
     * Total: ~150 lines of duplicate/conflicting code removed
   - 2026-01-29: ERROR TEXT COLOR FIX - Form controls with .error class now only
     get red BORDER, not red text. Added color:inherit to input/select/textarea.error
     and specific rules for select.error and .btn-for-file-input.error to prevent
     dropdown text and button text from turning red. Only error messages (span.error,
     .field-validation-error, etc.) should have red text.
*/

/* =========================
   CSS Variables (Design Tokens)
   Shared with validators.css
   ========================= */
:root {
  /* Error colors */
  --error-color: #d3080c;
  --error-shadow: 0 0 0 2px rgba(211, 8, 12, 0.25);
  --error-ring-color: rgba(180, 40, 40, 0.6);
  --error-ring-glow: rgba(180, 40, 40, 0.12);
  
  /* Focus ring - inherits from WET4/GCWeb --focus-color with fallback */
  --pp-focus-ring: var(--focus-color, #1a5a96);
  --pp-focus-ring-offset: 2px;
  
  /* Aliases for consistency across codebase */
  --focus-ring-color: var(--pp-focus-ring);
  --focus-ring-offset: var(--pp-focus-ring-offset);
  --focus-ring-glow: rgba(26, 90, 150, 0.15);
}

/* =========================
   Skip-to-main-content focus indicator
   When user activates skip link, h1 receives focus and shows ring
   ========================= */
h1#wb-cont:focus,
main h1#wb-cont:focus,
.container h1#wb-cont:focus {
  outline: 3px solid var(--pp-focus-ring, #1a5a96) !important;
  outline-offset: 4px !important;
}

/* ==========================================================================
   FOUC Prevention — Progress Indicator & Tab Title
   The Progress Indicator h2 is permanently hidden via CSS to eliminate the
   flash of unstyled content. The h2.tab-title (rendered server-side by
   Power Pages) is kept visible as the step heading — no JS-dependent reveal.
   ========================================================================== */

/* Permanently hide the Progress Indicator h2 — replaced by h2.tab-title 
.progress-numeric h2 {
  display: none;
}*/
/* =========================
   Step title spacing
   ========================= 
h2.tab-title {
  padding-bottom: 5px;
}*/

/* =========================
   Error styling
   ========================= */

/* Error text (for error messages, NOT form controls) */
.error-message,
.field-validation-error,
.validation-summary-errors,
span.error,
div.error,
p.error {
  color: var(--error-color, #d3080c);
  font-weight: bold;
}

/* Power Pages required label patch: prevent extra content */
.crmEntityFormView .cell div.table-info.required label:after {
  content: ' ';
}

/* Keep red frame while invalid (error state) — NOT focused */
/* NOTE: Only use .error class for visual styling, NOT aria-invalid alone.
   aria-invalid may be set early by Power Pages before validation runs.
   The .error class is only added by validators.js when validation actually fails. */
/* IMPORTANT: color: inherit prevents text from turning red - only border should be red */
input.error,
select.error,
textarea.error,
.form-control.error {
  border-color: var(--error-color, #d3080c) !important;
  outline: none !important;
  box-shadow: none !important;
  color: inherit !important; /* Keep normal text color */
}

/* Select dropdown - ensure text stays normal color */
select.error,
.select-icon select.error {
  color: #333 !important; /* Normal text color */
  border-color: var(--error-color, #d3080c) !important;
}

/* File upload button in error state - red border only, NOT red text */
.btn-for-file-input.error,
.crmEntityFormView .btn-for-file-input.error,
.file-control-container .btn-for-file-input.error {
  border-color: var(--error-color, #d3080c) !important;
  color: inherit !important; /* Keep normal button text color */
  box-shadow: none !important;
  /* CRITICAL: Prevent transition flash when focus changes */
  transition: none !important;
}

/* GLOBAL: Remove transitions from ALL error state elements to prevent focus flash */
/* This ensures the red focus ring appears immediately without any transition delay */
.error,
.error:focus,
.error:focus-visible,
input.error,
select.error,
textarea.error,
button.error,
.btn.error,
.btn-for-file-input.error,
.form-control.error {
  transition: none !important;
  -webkit-transition: none !important;
}

/* Error state WITH focus - match WET/GCWeb blue focus glow pattern but in red */
/* Higher specificity to override .crmEntityFormView styles */
/* NOTE: Only use .error class for visual styling, NOT aria-invalid alone */
input.error:focus,
select.error:focus,
textarea.error:focus,
.form-control.error:focus,
.crmEntityFormView input.error:focus,
.crmEntityFormView select.error:focus,
.crmEntityFormView textarea.error:focus,
.crmEntityFormView .form-control.error:focus {
  border-color: #d3080c !important;
  box-shadow: 0 0 5px 2px rgba(211, 8, 12, 0.5) !important;
  outline: none !important;
  color: inherit !important; /* Keep normal text color even when focused */
}

/* Select dropdown with error AND focus - red glow matching blue focus pattern */
select.error:focus,
.select-icon select.error:focus,
.crmEntityFormView select.error:focus {
  border-color: #d3080c !important;
  box-shadow: 0 0 5px 2px rgba(211, 8, 12, 0.5) !important;
  outline: none !important;
  color: #333 !important; /* Keep normal text color */
}

/* File upload button in error state WITH focus - red glow matching blue focus pattern */
/* CRITICAL: transition: none prevents momentary flash of default focus ring */
.btn-for-file-input.error:focus,
.btn-for-file-input.error:focus-visible,
.btn-for-file-input.error:active,
.crmEntityFormView .btn-for-file-input.error:focus,
.crmEntityFormView .btn-for-file-input.error:focus-visible,
.crmEntityFormView .btn-for-file-input.error:active,
.file-control-container .btn-for-file-input.error:focus,
.file-control-container .btn-for-file-input.error:focus-visible,
.file-control-container .btn-for-file-input.error:active,
button.btn-for-file-input.error:focus,
button.btn-for-file-input.error:focus-visible,
button.btn-for-file-input.error:active,
[id$="_input_file"].error:focus,
[id$="_input_file"].error:focus-visible {
  border-color: #d3080c !important;
  box-shadow: 0 0 5px 2px rgba(211, 8, 12, 0.5) !important;
  outline: none !important;
  color: inherit !important; /* Keep normal button text color */
  transition: none !important; /* Prevent flash of default focus ring */
}

/* Ensure file button in error state has NO default focus ring at any point */
.btn-for-file-input.error,
button.btn-for-file-input.error,
.crmEntityFormView .btn-for-file-input.error {
  transition: none !important; /* No transitions that could cause flash */
}

/* Override GCWeb/WET default focus styles for error state buttons */
/* Maximum class-based specificity to override any framework styles */
/* Match WET/GCWeb blue focus glow pattern but in red */
.btn.btn-default.btn-for-file-input.error:focus,
.btn.btn-default.btn-for-file-input.error:focus-visible,
.btn.btn-default.btn-for-file-input.error:focus-within,
.btn.btn-default.btn-for-file-input.error:active,
.crmEntityFormView .btn.btn-default.btn-for-file-input.error:focus,
.crmEntityFormView .btn.btn-default.btn-for-file-input.error:focus-visible,
.crmEntityFormView .btn.btn-default.btn-for-file-input.error:active,
.crmEntityFormView td .btn.btn-for-file-input.error:focus,
.crmEntityFormView td .btn.btn-for-file-input.error:focus-visible,
.crmEntityFormView td .btn.btn-for-file-input.error:active,
.crmEntityFormView .cell .btn.btn-for-file-input.error:focus,
.crmEntityFormView .cell .btn.btn-for-file-input.error:focus-visible,
.crmEntityFormView .cell .btn.btn-for-file-input.error:active {
  border-color: #d3080c !important;
  box-shadow: 0 0 5px 2px rgba(211, 8, 12, 0.5) !important;
  outline: none !important;
  transition: none !important;
  animation: none !important;
}

/* AGGRESSIVE: Override ALL button focus states when .error class is present */
/* This catches any button type with error class */
/* Match WET/GCWeb blue focus glow pattern but in red */
button.error:focus,
button.error:focus-visible,
button.error:active,
button.btn.error:focus,
button.btn.error:focus-visible,
button.btn.error:active,
.btn.error:focus,
.btn.error:focus-visible,
.btn.error:active {
  border-color: #d3080c !important;
  box-shadow: 0 0 5px 2px rgba(211, 8, 12, 0.5) !important;
  outline: none !important;
  color: inherit !important;
  transition: none !important;
  animation: none !important;
}

/* ULTRA-HIGH SPECIFICITY: For WET/GCWeb override */
/* Uses attribute selectors + multiple classes to maximize specificity */
/* Match the WET/GCWeb blue focus ring pattern but in red */
html body .crmEntityFormView button.btn.btn-default.btn-for-file-input.error:focus,
html body .crmEntityFormView button.btn.btn-default.btn-for-file-input.error:focus-visible,
html body .crmEntityFormView button.btn.btn-default.btn-for-file-input.error:active,
html body button.btn.btn-default.btn-for-file-input.error:focus,
html body button.btn.btn-default.btn-for-file-input.error:focus-visible,
html body button.btn.btn-default.btn-for-file-input.error:active,
html body button[class*="btn-for-file-input"].error:focus,
html body button[class*="btn-for-file-input"].error:focus-visible,
html body button[class*="btn-for-file-input"].error:active {
  /* Match WET/GCWeb focus glow pattern - use box-shadow for the ring effect */
  border-color: #d3080c !important;
  box-shadow: 0 0 5px 2px rgba(211, 8, 12, 0.5) !important;
  outline: none !important;
  outline-width: 0 !important;
  color: inherit !important;
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
}

/* has-error wrapper - NOT focused */
.has-error .form-control,
.crmEntityFormView .has-error .form-control {
  border-color: var(--error-color, #d3080c) !important;
  outline: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* has-error wrapper WITH focus - red glow matching blue focus pattern */
.has-error .form-control:focus,
.crmEntityFormView .has-error .form-control:focus,
.crmEntityFormView .has-error input:focus,
.crmEntityFormView .has-error select:focus,
.crmEntityFormView .has-error textarea:focus {
  border-color: #d3080c !important;
  box-shadow: 0 0 5px 2px rgba(211, 8, 12, 0.5) !important;
  outline: none !important;
  color: inherit !important;
}


/* =========================
   Link underlines (content only)
   ========================= */
main a[href]:not(.btn):not([role="button"]),
#wb-main a[href]:not(.btn):not([role="button"]),
.container a[href]:not(.btn):not([role="button"]) {
  text-decoration-line: underline !important;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
}

main a[href]:not(.btn):not([role="button"]):hover,
main a[href]:not(.btn):not([role="button"]):focus,
main a[href]:not(.btn):not([role="button"]):active {
  text-decoration-line: underline !important;
}

.breadcrumb > li > a {
  text-decoration-line: underline !important;
}

.nav > li > a,
.nav .show.dropdown-menu > li > a,
.dropdown-menu > li > a {
  text-decoration: none !important;
}


/* =========================
   Full-width controls (Step 2/3/4 fix)
   ========================= */
.crmEntityFormView .form-control-cell .control {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Normalize date/time input height to match text inputs ── */
input[type="date"].form-control,
input[type="time"].form-control {
  line-height: normal;
  height: 34px;          /* matches Bootstrap 3 / WET4 .form-control default */
  padding: 6px 12px;     /* matches Bootstrap 3 .form-control default */
  box-sizing: border-box;
}

/* Make text/select/textarea fill the cell (exclude radio/checkbox/file + hidden datetime binding) */
.crmEntityFormView .form-control-cell .control input.form-control:not(.datetime):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.crmEntityFormView .form-control-cell .control textarea.form-control,
.crmEntityFormView .form-control-cell .control select.form-control {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}


/* =========================================================
   SELECT: keep arrow centered (supports <i>, <span class="fa">, etc.)
   Fixes "caret shifted" by ensuring appearance:none applies even if DOM
   isn't direct-child, and centering icon with top:0/bottom:0 flex.
   ========================================================= */
.select-icon {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

/* IMPORTANT: use descendant selector, not only direct-child */
.select-icon select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;

  padding-right: 2.75rem; /* room for the icon */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* REMOVED: background-image: none - now using CSS background-image chevron in validators.css */
}

/* IE/old Edge */
.select-icon select::-ms-expand { display: none; }

/* Center any icon you append (direct child or nested) */
.select-icon i,
.select-icon .fa,
.select-icon span.fa,
.select-icon span.glyphicon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  color: #555;
  font-size: 1rem;
  line-height: 1;
}

/* Read-only select elements - hide dropdown arrow */
.read-only-summary select,
select[aria-disabled="true"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  cursor: default !important;
}

/* Focus ring for read-only selects - WCAG 2.4.7 Focus Visible
   appearance:none strips the native focus indicator, so we must provide one.
   Matches WET4/GCWeb blue focus ring pattern used elsewhere in this file. */
.read-only-summary select:focus,
select[aria-disabled="true"]:focus {
  outline: 3px solid var(--pp-focus-ring, #1a5a96) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(26, 90, 150, 0.15));
}

/* =======================================================================
   Power Pages file upload layout (stable with JS relabel/toggle)
   Goal order: Choose/Change -> Filename/Status -> Delete
   - Inline when space permits
   - Responsive wrap when tight (filename under button; delete under filename)
   - Do NOT force Delete visibility (your JS already controls it)
   ======================================================================= */

.crmEntityFormView .file-control-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* Ensure button container never becomes 100% width due to legacy rules */
.crmEntityFormView .file-control-container .container-file-input {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
}

/* The "status + delete" group should stay on the same line as the button
   whenever possible (fixes: "No file selected" dropping under after delete) */
.crmEntityFormView .file-control-container .file-link-and-delete {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start !important;
}

/* ============================================================================
   CRITICAL FIX: Container for filename + delete button
   This prevents the delete button from wrapping to a new line
   Added: 2026-01-25
   ============================================================================ */
.crmEntityFormView .container-filelink-delete {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: 0;
}

/* Filename/status should sit BETWEEN the buttons.
   Let it size to its content (so it won't wrap early),
   but still allow shrinking/wrapping when the layout is truly tight. */
.crmEntityFormView .file-control-container .file-name-container {
  flex: 0 1 auto;          /* key change: no fixed 14rem basis */
  min-width: 0;
  max-width: 100%;

  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Important: make the visible status text inline by default
   (prevents "No file selected" from behaving like a full-row block) */
.crmEntityFormView .file-control-container .file-name-container > div {
  display: inline;
  margin: 0;
}

/* Keep the wrapper that contains the delete button "last" */
.crmEntityFormView .file-control-container .file-link-and-delete > div:not(.file-name-container) {
  flex: 0 0 auto;
}

/* Defensive: prevent accidental auto-margins pushing Delete away */
.crmEntityFormView .file-control-container .file-link-and-delete > div:last-child {
  margin-left: 0 !important;
}

/* =========================
   Delete button look (match Choose/Change btn-default) + spacing
   ========================= */
.crmEntityFormView button.btn.btn-default.btn-for-delete,
.crmEntityFormView button.btn.btn-default.btn-for-delete.btn-without-border {
  border: 1px solid #adadad !important;
  border-radius: 4px !important;

  background-color: #f5f5f5 !important;
  background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !important;
  text-shadow: 0 1px 0 #fff;

  padding: 6px 12px !important;
  line-height: 1.42857143 !important;
  white-space: nowrap;
}

.crmEntityFormView button.btn.btn-default.btn-for-delete:hover,
.crmEntityFormView button.btn.btn-default.btn-for-delete.btn-without-border:hover {
  background-color: #e6e6e6 !important;
  background-image: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%) !important;
}

/* Space between icon and label */
.crmEntityFormView .btn-for-delete .fa {
  margin-right: 0.45rem !important;
}

/* Pressed state */
.crmEntityFormView button.btn.btn-default.btn-for-delete:active,
.crmEntityFormView button.btn.btn-default.btn-for-delete.active {
  background-image: none !important;
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !important;
}


/* Responsive: when narrow (including 200% zoom + shrunk), stack under the button */
@media (max-width: 768px) {
  .crmEntityFormView .file-control-container .file-link-and-delete {
    flex-basis: 100%;
  }
  .crmEntityFormView .file-control-container .file-name-container {
    flex-basis: 100%;
  }
  .crmEntityFormView .file-control-container .file-name-container > div {
    display: block;
  }
}


/* =========================
   PATCHED: Accessible Focus Styles
   WCAG 2.1 SC 2.4.7 - Focus visible
   Uses GCWeb-compatible blue (#1a5a96)
   ========================= */

/* Button focus ring (consistent with GCWeb) */
.crmEntityFormView button:focus,
.crmEntityFormView button:focus-visible,
.crmEntityFormView .btn:focus,
.crmEntityFormView .btn:focus-visible {
  outline: 3px solid var(--focus-ring-color, #1a5a96);
  outline-offset: var(--focus-ring-offset, 2px);
  box-shadow: none;
}


/* File upload buttons focus - UPDATED 2026-01-25
   Using :focus-visible to show outline ONLY on keyboard navigation
   Removes "weird frame" on mouse clicks while maintaining WCAG compliance */

/* Remove focus outline when clicking with mouse */
.crmEntityFormView .btn-for-file-input:focus:not(:focus-visible),
.crmEntityFormView .btn-for-delete:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Show focus outline ONLY when navigating with keyboard (Tab key) */
.crmEntityFormView .btn-for-file-input:focus-visible,
.crmEntityFormView .btn-for-delete:focus-visible {
  outline: 3px solid var(--focus-ring-color, #1a5a96);
  outline-offset: var(--focus-ring-offset, 2px);
  /* Optional: Add subtle glow for better visibility */
  box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(26, 90, 150, 0.15));
}

/* =========================================================================
   FILE UPLOAD BUTTON - ERROR STATE FOCUS
   When file input has .error class, the button should show red focus ring
   until validation error is cleared.
   Uses :has() selector (Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+)
   ========================================================================= */

/* File upload button - error state NOT focused (red border indicator) */
.crmEntityFormView .file-control-container:has(input.error) .btn-for-file-input,
.crmEntityFormView .container-file-input:has(input.error) .btn-for-file-input {
  border-color: var(--error-color, #d3080c) !important;
  box-shadow: 0 0 0 1px var(--error-color, #d3080c) !important;
}

/* File upload button - error state WITH focus (red focus ring) */
.crmEntityFormView .file-control-container:has(input.error) .btn-for-file-input:focus-visible,
.crmEntityFormView .container-file-input:has(input.error) .btn-for-file-input:focus-visible {
  outline: 2px solid var(--error-ring-color, rgba(180, 40, 40, 0.6)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--error-ring-glow, rgba(180, 40, 40, 0.12)) !important;
  border-color: var(--error-color, #d3080c) !important;
}

/* Also support .error class directly on the button (if applied via JS) */
/* Higher specificity to override Bootstrap .btn and .btn-default styles */
.crmEntityFormView .btn-for-file-input.error,
.crmEntityFormView button.btn-for-file-input.error,
.crmEntityFormView .btn.btn-for-file-input.error,
.crmEntityFormView .btn.btn-default.btn-for-file-input.error {
  border-color: var(--error-color, #d3080c) !important;
  box-shadow: 0 0 0 1px var(--error-color, #d3080c) !important;
}

.crmEntityFormView .btn-for-file-input.error:focus-visible,
.crmEntityFormView button.btn-for-file-input.error:focus-visible,
.crmEntityFormView .btn.btn-for-file-input.error:focus-visible,
.crmEntityFormView .btn.btn-default.btn-for-file-input.error:focus-visible {
  outline: 2px solid var(--error-ring-color, rgba(180, 40, 40, 0.6)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--error-ring-glow, rgba(180, 40, 40, 0.12)) !important;
  border-color: var(--error-color, #d3080c) !important;
}


/* =========================
   Power Pages Override Patches
   Added: 2026-01-17
   Fixes conflicts with portalbasictheme.css
   ========================= */

/* 1. Prevent double dropdown arrows
   portalbasictheme.css adds background-image chevron to selects
   All selects are wrapped in .select-icon by ethiLibrary.js */
/* REMOVED: .select-icon select { background-image: none !important; }
   Now using CSS background-image chevron in validators.css */

/* 2. Ensure focus ring visible on dark primary buttons
   portalbasictheme.css changes btn-primary to dark #191817 on focus
   White outline ensures WCAG 2.4.7 compliance */
.crmEntityFormView .btn-primary:focus,
.crmEntityFormView .btn-primary:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.25) !important;
}

/* 3. Ensure secondary/default buttons have visible focus ring
   portalbasictheme.css changes background to dark on focus */
.crmEntityFormView .btn-secondary:focus,
.crmEntityFormView .btn-secondary:focus-visible,
.crmEntityFormView .btn-default:focus,
.crmEntityFormView .btn-default:focus-visible {
  outline: 3px solid var(--focus-ring-color, #1a5a96) !important;
  outline-offset: 2px;
}

/* 4. Override label background if causing issues
   portalbasictheme.css sets .crmEntityFormView label background-color: #FFFFFF
   Uncomment if labels show unwanted white backgrounds */
/*
.crmEntityFormView label {
  background-color: transparent !important;
}
*/


/* =========================================================
   RESPONSIVE TEXT WRAPPING - 200% Zoom Support
   For: GI Report, SSI Request (Review Steps)
   WCAG 2.1 SC 1.4.10 - Reflow
   Added: 2026-01-17
   
   NOTE: <input type="text"> elements CANNOT wrap text via CSS.
   The JS in ethiLibrary.js creates .readonly-text-display spans
   for long values on review steps. This CSS styles those spans.
   ========================================================= */

/* 1. Wrappable text display (created by JS for long readonly values) */
.crmEntityFormView .readonly-text-display {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  
  /* Text wrapping */
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  
  min-height: 2.25rem;
  width: 100%;
}

/* 2. Table cells in form views - allow shrinking */
.crmEntityFormView td.cell,
.crmEntityFormView td.cell .control,
.crmEntityFormView .form-control-cell,
.crmEntityFormView .form-control-cell .control {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 3. Labels must wrap at 200% zoom */
.crmEntityFormView .table-info label,
.crmEntityFormView .field-label,
.crmEntityFormView legend,
.crmEntityFormView th {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 4. Textarea wrapping (textareas CAN wrap via CSS) */
.crmEntityFormView textarea.form-control[readonly],
.crmEntityFormView textarea.form-control.readonly,
body.read-only-summary .crmEntityFormView textarea {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  resize: none;
  height: auto !important;
  min-height: 4rem;
}

/* 5. Input fallback: horizontal scroll for unpatched inputs */
.crmEntityFormView input.form-control[readonly],
.crmEntityFormView input.form-control.readonly,
body.read-only-summary .crmEntityFormView input.form-control {
  overflow-x: auto;
  text-overflow: clip;
}

/* 6. File name wrapping */
.crmEntityFormView .file-name-container,
.crmEntityFormView .file-name-container span,
.crmEntityFormView .file-name--clickable {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}


/* =========================================================
   200% ZOOM RESPONSIVE BREAKPOINT
   Triggered when effective viewport is ~640px (1280px @ 200%)
   ========================================================= */

@media (max-width: 800px) {
  /* Stack form layout vertically */
  .crmEntityFormView .table-info {
    display: block !important;
  }
  
  .crmEntityFormView .table-info > tbody,
  .crmEntityFormView .table-info > tbody > tr,
  .crmEntityFormView .table-info > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }
  
  /* Label above field */
  .crmEntityFormView td.cell.table-info-cell-label {
    padding-bottom: 0.25rem;
  }
  
  /* Field takes full width */
  .crmEntityFormView td.cell.form-control-cell {
    padding-left: 0;
    padding-bottom: 1rem;
  }
}


/* =========================================================
   PLACEHOLDER CONTRAST FIX
   WCAG 2.1 SC 1.4.3 - Contrast (Minimum)
   Old #999999 = 2.85:1 (FAIL), New #767676 = 4.54:1 (PASS)
   ========================================================= */

.crmEntityFormView input::placeholder,
.crmEntityFormView textarea::placeholder {
  color: #767676 !important;
  opacity: 1;
}

/* Firefox */
.crmEntityFormView input::-moz-placeholder,
.crmEntityFormView textarea::-moz-placeholder {
  color: #767676 !important;
  opacity: 1;
}

/* Edge/IE */
.crmEntityFormView input:-ms-input-placeholder,
.crmEntityFormView textarea:-ms-input-placeholder {
  color: #767676 !important;
}


/* =========================================================
   PRINT STYLESHEET
   Optimizes pages for printing
   ========================================================= */

@media print {
  /* Hide non-essential elements */
  .wb-skip,
  .wb-head,
  .gc-footer,
  nav,
  #wb-sm,
  #wb-srch,
  .breadcrumb,
  .btn:not([type="submit"]),
  button:not([type="submit"]),
  .file-control-container button,
  .pagination,
  .alert-info,
  [role="navigation"] {
    display: none !important;
  }
  
  /* Show all content - expand collapsed sections */
  details {
    display: block !important;
  }
  details[open] > summary {
    margin-bottom: 0.5rem;
  }
  details > *:not(summary) {
    display: block !important;
  }
  
  /* Remove backgrounds and shadows */
  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Ensure readable text */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000 !important;
  }
  
  /* Form controls - show as text */
  .crmEntityFormView input.form-control,
  .crmEntityFormView select.form-control,
  .crmEntityFormView textarea.form-control {
    border: 1px solid #ccc !important;
    padding: 0.25rem !important;
  }
  
  /* Show URLs for links */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }
  
  /* Don't show URL for mailto links (privacy) */
  a[href^="mailto"]::after {
    content: none;
  }
  
  /* Page breaks */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }
  table, figure, img {
    page-break-inside: avoid;
  }
  
  /* Ensure tables have borders */
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ccc !important;
    padding: 0.5rem !important;
  }
}


/* =========================================================
   HIGH CONTRAST MODE SUPPORT
   WCAG 2.1 SC 1.4.11 - Non-text Contrast
   Supports Windows High Contrast Mode
   ========================================================= */

@media (forced-colors: active) {
  /* Ensure borders are visible */
  .crmEntityFormView input,
  .crmEntityFormView select,
  .crmEntityFormView textarea {
    border: 2px solid CanvasText !important;
  }
  
  /* Ensure focus is highly visible */
  :focus,
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
  
  /* Buttons distinguishable */
  .btn,
  button,
  input[type="submit"],
  input[type="button"] {
    border: 2px solid ButtonText !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
  }
  
  /* Primary buttons */
  .btn-primary {
    background-color: Highlight !important;
    color: HighlightText !important;
  }
  
  /* Error states - use system link color for visibility */
  .error,
  .has-error .form-control,
  input.error,
  select.error,
  textarea.error {
    border-color: LinkText !important;
    border-width: 3px !important;
  }
  
  /* Links */
  a {
    color: LinkText !important;
  }
  
  /* Disabled elements */
  [disabled],
  .disabled {
    opacity: 0.5;
    border-style: dashed !important;
  }
  
  /* File upload buttons */
  .crmEntityFormView .btn-for-file-input,
  .crmEntityFormView .btn-for-delete {
    border: 2px solid ButtonText !important;
  }
  
  /* Form labels */
  .crmEntityFormView label,
  .crmEntityFormView legend {
    color: CanvasText !important;
  }
  
  /* Validation summary */
  #ValidationSummaryEntityFormView {
    border: 3px solid LinkText !important;
  }
}


/* =========================================================
   ENHANCED TOUCH TARGETS
   WCAG 2.1 SC 2.5.5 - Target Size (AAA)
   WCAG 2.2 SC 2.5.8 - Target Size (Minimum) (AA)
   Minimum 44x44px, preferred 48x48px for touch devices
   ========================================================= */

@media (pointer: coarse) {
  /* All buttons - minimum 48px for comfortable touch */
  .crmEntityFormView button,
  .crmEntityFormView .btn,
  .crmEntityFormView input[type="submit"],
  .crmEntityFormView input[type="button"],
  .crmEntityFormView input[type="reset"] {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1.25rem;
  }
  
  /* Form controls */
  .crmEntityFormView input.form-control,
  .crmEntityFormView select.form-control,
  .crmEntityFormView textarea.form-control {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  
  /* Radio and checkbox labels - larger touch area */
  .crmEntityFormView label.radio-inline,
  .crmEntityFormView label.checkbox-inline,
  .crmEntityFormView .radio label,
  .crmEntityFormView .checkbox label {
    padding: 0.75rem 1rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Spacing between form groups */
  .crmEntityFormView .form-group {
    margin-bottom: 1.5rem;
  }
  
  /* File upload buttons */
  .crmEntityFormView .btn-for-file-input,
  .crmEntityFormView .btn-for-delete {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
  }
  
  /* Links in validation summary */
  #ValidationSummaryEntityFormView ul li {
    margin-bottom: 0.5rem;
  }
  #ValidationSummaryEntityFormView ul li a {
    display: inline-block;
    padding: 0.5rem;
    min-height: 44px;
  }
}


/* =========================================================
   EXTENDED REDUCED MOTION SUPPORT
   WCAG 2.1 SC 2.3.3 - Animation from Interactions (AAA)
   Respects user preference for reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Specific elements that might have animations */
  .crmEntityFormView .form-control,
  .crmEntityFormView .btn,
  .crmEntityFormView button {
    transition: none !important;
  }
  
  /* Focus transitions */
  :focus,
  :focus-visible {
    transition: none !important;
  }
  
  /* Loading spinners - show static indicator instead */
  .spinner,
  .loading,
  [class*="spin"] {
    animation: none !important;
  }
}


/* =========================================================
   SSI Steps - Reduced Vertical Spacing
   ========================================================= */

/* Step title containers */
.section,
.entity-form .section,
.form-section {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Step titles and headings */
h1, h2, h3,
.page-heading,
.step-title {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

/* Note: Progress Indicator h2 is hidden on GI and SSI forms (FOUC prevention).
   h2.tab-title is the visible step heading (server-rendered, no JS dependency).
   Padding for h2.tab-title is set earlier in this file. */

/* Page header */
.page-header,
.entity-form-header {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Breadcrumbs */
.breadcrumb {
  margin-bottom: 0.25rem !important;
}


/* ==================== AUTOCOMPLETE DROPDOWN ==================== */
/* Container for cruise line and vessel autocomplete dropdowns */

/* Make the control container a positioning context */
#ethi_cruiselinename_label + .control,
#ethi_vesselname_label + .control,
.control:has(#ethi_cruiselinename),
.control:has(#ethi_vesselname) {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.autocomplete-dropdown:empty {
  display: none;
}

.autocomplete-dropdown .autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.autocomplete-dropdown .autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-dropdown .autocomplete-item:hover,
.autocomplete-dropdown .autocomplete-item.highlight {
  background-color: #007bff;
  color: #fff;
}

/* Make the parent a positioning context for the dropdown */
/* Target the parent container */
#ethi_cruiselinename + .autocomplete-dropdown,
#ethi_vesselname + .autocomplete-dropdown {
  position: absolute;
  top: 38px;  /* Height of the input field */
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Ensure parent has relative positioning */
.control:has(#ethi_cruiselinename),
.control:has(#ethi_vesselname) {
  position: relative;
}


/* ============================================================================
   FILE UPLOAD CONTROL FOCUS-WITHIN STYLING
   Purpose: Keep focus ring ONLY on individual buttons (Choose File / Delete)
   Container should NOT have a focus frame - this was causing visual clutter.
   Updated: 2026-01-25 - Removed container focus-within per user request
   ============================================================================ */

/* File upload container - NO focus frame on container */
.crmEntityFormView .file-control-container:focus-within {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0;
}

/* Individual buttons KEEP their focus rings */
.crmEntityFormView .file-control-container .btn-for-file-input:focus,
.crmEntityFormView .file-control-container .btn-for-file-input:focus-visible,
.crmEntityFormView .file-control-container .btn-for-delete:focus,
.crmEntityFormView .file-control-container .btn-for-delete:focus-visible,
.crmEntityFormView .btn-for-delete:focus,
.crmEntityFormView .btn-for-delete:focus-visible {
  outline: 3px solid var(--focus-ring-color, #1a5a96) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(26, 90, 150, 0.15)) !important;
}

/* Ensure delete button keeps focus when visible (after file selected) */
.crmEntityFormView .btn-for-delete:not([aria-hidden="true"]):focus,
.crmEntityFormView .btn-for-delete:not([aria-hidden="true"]):focus-visible,
button.btn-for-delete:focus,
button.btn-for-delete:focus-visible {
  outline: 3px solid var(--focus-ring-color, #1a5a96) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(26, 90, 150, 0.15)) !important;
}

/* High contrast mode support for file upload focus */
@media (forced-colors: active) {
  .crmEntityFormView .file-control-container:focus-within {
    outline: none;
    background-color: transparent;
  }
  
  .crmEntityFormView .file-control-container .btn-for-file-input:focus-visible,
  .crmEntityFormView .file-control-container .btn-for-delete:focus-visible,
  .crmEntityFormView .btn-for-delete:not([aria-hidden="true"]):focus-visible,
  button.btn-for-delete:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}


/* ============================================================================
   READ-ONLY SUMMARY PAGE - RESPONSIVE LAYOUT
   Added: 2026-01-27
   WCAG: 1.4.4 Resize Text, 1.4.10 Reflow
   Issue: Text truncation at 200% zoom and on mobile (iPhone)
   ============================================================================ */

/* Stack table cells vertically at narrow widths (mobile + 200% zoom) */
@media screen and (max-width: 768px) {
  .read-only-summary table.section tr {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .read-only-summary table.section td {
    display: block !important;
    width: 100% !important;
    padding-bottom: 1rem !important;
  }
  
  .read-only-summary table.section td.zero-cell {
    display: none !important;
  }
  
  .read-only-summary table.section colgroup,
  .read-only-summary table.section col {
    display: none !important;
  }
}

/* Read-only inputs should allow content to be visible (no truncation) */
.read-only-summary input.readonly[readonly],
.read-only-summary input[readonly].form-control,
.read-only-summary .form-control.readonly {
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  min-height: 2.5em !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  padding-left: 0 !important;
}

/* Ensure fieldsets don't constrain content */
.read-only-summary fieldset {
  min-width: 0 !important;
  width: 100% !important;
}

.read-only-summary fieldset table.section {
  width: 100% !important;
  table-layout: auto !important;
}

/* Print styles for summary pages */
@media print {
  .read-only-summary table.section tr {
    display: flex !important;
    flex-direction: column !important;
    page-break-inside: avoid;
  }
  
  .read-only-summary table.section td {
    display: block !important;
    width: 100% !important;
  }
  
  .read-only-summary input.readonly {
    border: none !important;
    background: transparent !important;
  }
}

/* ============================================================================
   ETHIBilingualTimeSelect — Bilingual 24-Hour Time Picker
   Version: 2.0.0 — 2026-02-14

   Approach: Let GCWeb .form-control handle borders, padding, font-size, and
   base colors. We add only: flex layout, GCWeb-matched focus ring, separator,
   responsive touch targets, forced-colors, and print.

   Error state (.error class) is handled by validators.css which already
   styles select.error — the JS MutationObserver mirrors .error from the
   hidden native input onto the visible selects.
   ============================================================================ */

/* ── Layout ────────────────────────────────────────────────────────────── */

/* Wrapper: flex row, stretches to fill parent <div class="control"> */
.ethi-time-select-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

/* Each group (select) takes equal space */
.ethi-time-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
}

/* ── Selects ───────────────────────────────────────────────────────────── */

/* Full width within flex group. GCWeb .form-control handles the rest. */
select.ethi-time-select.form-control {
  width: 100% !important;
  cursor: pointer;
}

/* GCWeb-matched focus ring.
   Browsers render select:focus heavier than input:focus by default.
   This aligns exactly with WET4 Bootstrap .form-control:focus values. */
select.ethi-time-select.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/* ── Separator ─────────────────────────────────────────────────────────── */

/* Colon between Hour and Minute — purely decorative */
.ethi-time-separator {
  font-size: 20px;
  font-weight: bold;
  line-height: 34px;
  color: #333;
  flex-shrink: 0;
  user-select: none;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Mobile: 44px min touch targets (WCAG 2.5.8 Target Size) */
@media (max-width: 575px) {
  select.ethi-time-select.form-control {
    min-height: 44px;
  }

  .ethi-time-separator {
    line-height: 44px;
  }
}

/* ── Accessibility ─────────────────────────────────────────────────────── */

/* Windows High Contrast Mode — ensure visible borders */
@media (forced-colors: active) {
  select.ethi-time-select {
    border: 2px solid ButtonText;
  }

  select.ethi-time-select:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .ethi-time-separator {
    color: CanvasText;
  }
}

/* ── Print ─────────────────────────────────────────────────────────────── */

@media print {
  select.ethi-time-select {
    border: 1px solid #333;
    box-shadow: none;
  }

  .ethi-time-separator {
    color: #000;
  }
}