/* Cross-page layout repairs. Loaded after page styles so the same rules apply
   to public pages, portals, and dialogs without changing their visual identity. */
:root {
  color-scheme: dark;
  --hwc-header-height: 100px;
  --hwc-viewport-height: 100vh;
  --hwc-viewport-top: 0px;
  --hwc-surface: #0c213a;
  --hwc-surface-raised: #102c48;
  --hwc-surface-text: #f1f5f9;
  --hwc-focus: #67e8f9;
}

@supports (height: 100dvh) {
  :root { --hwc-viewport-height: 100dvh; }
}

html.light-mode {
  color-scheme: light;
  --hwc-surface: #ffffff;
  --hwc-surface-raised: #f1f5f9;
  --hwc-surface-text: #0f172a;
  --hwc-focus: #1c3ec9;
}

@media (max-width: 1280px) {
  :root { --hwc-header-height: 120px; }
}

html {
  scroll-padding-top: calc(var(--hwc-header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

html body[data-hwc-header],
html body.portal-body[data-hwc-header] {
  padding-top: var(--hwc-header-height) !important;
}

body.portal-body[data-hwc-header] .portal-wrapper {
  padding-top: 14px !important;
}

/* Flex/grid items must be allowed to shrink before text or tables can scroll. */
.dashboard-layout > *,
.booking-form .form-row > *,
.agent-doc-grid > *,
.agent-dash-layout-grid > *,
.agent-upload-layout > *,
.custom-select-wrapper,
.custom-select-text {
  min-width: 0;
}

body.portal-body .dashboard-main {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Scroll long tables inside their own workspace, never crop the whole page. */
.table-responsive,
.user-table-wrapper,
.forms-table-responsive,
.agent-table-wrapper,
.signed-docs-table-wrap,
.sent-invoices-table-wrap {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.admin-summary-grid { grid-template-columns: minmax(0, 1fr) 340px !important; }

/* Solid reading surfaces prevent video, rows, or the page below showing
   through forms and stacked dialogs. Backdrops remain translucent. */
html .custom-modal,
html .card-modal .card-modal-content,
html #customModal .modal-content,
html .login-container,
html.light-mode .custom-modal,
html.light-mode .card-modal .card-modal-content,
html.light-mode #customModal .modal-content,
html.light-mode .login-container {
  background: var(--hwc-surface) !important;
  color: var(--hwc-surface-text) !important;
}

html .login-container input {
  background: var(--hwc-surface-raised);
  color: var(--hwc-surface-text);
}

html .custom-modal-overlay,
html .card-modal,
html #customModal,
html #hwcGlobalLoadingOverlay {
  top: var(--hwc-viewport-top) !important;
  width: 100% !important;
  height: var(--hwc-viewport-height) !important;
  max-height: var(--hwc-viewport-height) !important;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html .custom-modal,
html #customModal .modal-content,
html .card-modal-dialog {
  min-width: 0;
  max-height: calc(var(--hwc-viewport-height) - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html .custom-modal,
html #customModal .modal-content { flex-shrink: 0; }

.custom-modal-title,
.custom-modal-text,
.custom-option,
.card-modal-title,
.agent-doc-card h4,
.agent-doc-card p,
.results-summary,
.contact-detail,
.course-title {
  overflow-wrap: anywhere;
}

.custom-modal-actions,
.booking-form .form-actions,
.assessment-container .controls {
  flex-wrap: wrap;
  gap: 12px;
}

html .custom-modal-close-x,
html .card-modal-close {
  min-width: 40px !important;
  min-height: 40px !important;
}

/* Keep fixed popovers inside short/zoomed viewports, including landscape. */
.nav-dropdown-menu,
#profileDropdown,
#profileDropdownPc,
#profileDropdownMobile {
  max-height: max(64px, calc(var(--hwc-viewport-height) - var(--hwc-header-height) - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Focus rings are separate from hover and remain visible on transparent UI. */
html :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--hwc-focus) !important;
  outline-offset: 3px;
}

/* Windows forced-colors users must not lose gradient-clipped heading text. */
@media (forced-colors: active) {
  .greenlist-title span,
  .nav-glow-btn-text,
  .hero-glass h1 {
    -webkit-text-fill-color: CanvasText !important;
    color: CanvasText !important;
    background-image: none !important;
  }
}

@media (min-width: 993px) {
  body.portal-body[data-hwc-header] .dashboard-layout {
    height: max(240px, calc(var(--hwc-viewport-height) - var(--hwc-header-height) - 40px)) !important;
  }
}

@media (max-width: 1280px) {
  .admin-summary-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 992px) {
  body.portal-body[data-hwc-header] .dashboard-layout {
    height: auto !important;
    min-height: 0 !important;
  }

  body.portal-body[data-hwc-header] .portal-wrapper { padding-top: 12px !important; }
}

@media (max-height: 600px) {
  /* A landscape phone or a zoomed laptop must still reach the last field. */
  body.portal-body[data-hwc-header] {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  body.portal-body[data-hwc-header] .dashboard-layout {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 600px) {
  .assessment-container {
    margin: 24px auto;
    padding: 20px 16px;
    width: 100%;
  }
  .assessment-container .step-indicator { padding: 0; gap: 4px; margin-bottom: 24px; }
  .assessment-container .step-dot { flex: 0 0 28px; width: 28px; height: 28px; }
  .assessment-container .step-line { min-width: 0; margin: 0; }
  .assessment-container .controls { margin-top: 24px; padding-top: 20px; }
  .assessment-container .controls > button { flex: 1 1 120px; }
  .assessment-container .course-card,
  .assessment-container .action-box { padding: 18px 16px; }
  .assessment-container .step-title { font-size: clamp(1.15rem, 5vw, 1.6rem); }
  .login-hero { padding: 24px 16px; min-height: calc(var(--hwc-viewport-height) - var(--hwc-header-height)); }
  .booking-form input,
  .booking-form select,
  .booking-form textarea,
  .login-container input,
  .assessment-container select { font-size: 16px; }
}

/* Preserve a readable base when blur is unavailable, disabled, or costly. */
@supports not (backdrop-filter: blur(1px)) {
 @supports not (-webkit-backdrop-filter: blur(1px)) {
  html .hero-glass { background: var(--hwc-surface) !important; }
  html .hero-glass :is(h1, p) { color: var(--hwc-surface-text) !important; -webkit-text-fill-color: currentColor !important; }
  .navbar,
  .nav-dropdown-menu { background: #071d36 !important; }
  html.light-mode .navbar,
  html.light-mode .nav-dropdown-menu { background: #ffffff !important; }
 }
}

@media (prefers-reduced-transparency: reduce) {
  .navbar,
  .nav-dropdown-menu,
  .hero-glass,
  .assessment-container { background: var(--hwc-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html .hero-glass :is(h1, p) { color: var(--hwc-surface-text) !important; -webkit-text-fill-color: currentColor !important; }
}

/* Native select popups need their own opaque background; they do not inherit blur. */
html select option { background: var(--hwc-surface); color: var(--hwc-surface-text); }
.dashboard-filters { flex-wrap: wrap; min-width: 0; }
.dashboard-filters > input { min-width: 0 !important; max-width: 100%; }
.custom-modal-title { padding-inline-end: 24px; }

.nav-dropdown-menu { min-width: min(230px, calc(100vw - 24px)); }
@media (max-width: 1280px) {
  .navbar nav .nav-link:not(.nav-glow-btn) { min-height: 40px; display: inline-flex; align-items: center; }
}

/* Do not restore private cached DOM before its session has been rechecked. */
body[data-hwc-private-suspended] { display: none !important; }

/* Reveal the new theme outwards from the clicked control in either direction. */
::view-transition-old(root) { animation:none; opacity:1; z-index:1; mix-blend-mode:normal; }
::view-transition-new(root) { animation:hwc-theme-circle 650ms cubic-bezier(.22,.61,.36,1) both; z-index:2; mix-blend-mode:normal; }
::view-transition-group(root) { animation-duration:650ms; }
::view-transition-image-pair(root) { isolation:isolate; }
@keyframes hwc-theme-circle {
  from { clip-path:circle(0px at var(--hwc-theme-x,50%) var(--hwc-theme-y,50%)); }
  to { clip-path:circle(var(--hwc-theme-radius,150vmax) at var(--hwc-theme-x,50%) var(--hwc-theme-y,50%)); }
}
html.hwc-theme-changing,
html.hwc-theme-changing body,
html.hwc-theme-changing body * {
  transition:background-color 280ms ease,color 280ms ease,border-color 280ms ease,box-shadow 280ms ease !important;
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(root) { animation:none !important; }
  html.hwc-theme-changing body * { transition:none !important; }
}

.hwc-skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 2147483647;
  transform: translateY(-200%); padding: 12px 18px; border-radius: 8px;
  background: var(--hwc-surface); color: var(--hwc-surface-text);
  border: 2px solid var(--hwc-focus); font-weight: 700;
}
.hwc-skip-link:focus { transform: translateY(0); }
.menu-panel[inert] { visibility: hidden; }
.menu-btn[role="button"], .menu-close-btn[role="button"] { cursor: pointer; }

/* Content-sized fields must shrink without pushing their form beyond the card. */
.agent-document-fields {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 14px;
}
.agent-document-fields > * { min-width: 0; }
.agent-search-input { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Keep the document dialog reachable when a phone keyboard reduces the viewport. */
.agent-modal-backdrop {
  top: var(--hwc-viewport-top);
  bottom: auto;
  height: var(--hwc-viewport-height);
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.agent-modal-backdrop .agent-modal-content {
  min-width: 0;
  max-height: calc(var(--hwc-viewport-height) - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Portalled options retain a clear disabled state in either theme. */
.custom-option[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.custom-option[hidden] { display: none !important; }
#reviews:has(.review-card:focus-within) .reviews-track { animation-play-state: paused; }

@media (max-width: 600px) {
  .agent-document-fields { grid-template-columns: minmax(0, 1fr); }
  .agent-modal-backdrop .agent-modal-content { padding: 20px 16px; }
  .booking-form .form-row { grid-template-columns: minmax(0, 1fr) !important; }

  /* 16px editable text avoids automatic zoom on iOS and remains readable. */
  .portal-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea),
  .portal-body .custom-select-selected { font-size: 16px !important; }

  .superadmin-page :is(.sa-form-grid, .toolbar-filters) { grid-template-columns: minmax(0, 1fr) !important; }
  .superadmin-page .sa-form-grid > *,
  .superadmin-page .toolbar-filters .chip { grid-column: 1 / -1 !important; }
  .superadmin-page .customer-extra-row,
  .superadmin-page :is(#newAppTypeRow, #editAppTypeRow) { flex-direction: column; align-items: stretch !important; }
  .superadmin-page .toolbar-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)) !important; }
  .superadmin-page :is(.sa-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .sa-wrap select, .sa-wrap .custom-select-selected, .toolbar button, .sa-title-actions button, .action-icon-btn) {
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
  }
  .superadmin-page .action-icon-btn { min-width: 44px !important; width: 44px !important; }
  html .custom-modal-close-x,
  html .card-modal-close { min-width: 44px !important; min-height: 44px !important; max-width: none !important; max-height: none !important; }

  #reviews .review-card {
    flex-basis: min(290px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: min(290px, calc(100vw - 48px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html, html * { scroll-behavior: auto !important; }
  html *, html *::before, html *::after { animation: none !important; transition: none !important; }
  /* Stopping the marquee must still leave every review reachable. */
  #reviews .reviews-track { width: 100%; overflow-x: auto; padding-bottom: 16px; }
  #reviews .reviews-viewport { mask-image: none; -webkit-mask-image: none; }
}