/* Authenticated GxLMS operations theme. Public marketing pages use their own scoped CSS. */
:root {
  --gx-app-ink: #0d253d;
  --gx-app-ink-secondary: #273951;
  --gx-app-muted: #64748d;
  --gx-app-canvas: #ffffff;
  --gx-app-canvas-soft: #f6f9fc;
  --gx-app-surface: #ffffff;
  --gx-app-surface-raised: #fbfdff;
  --gx-app-hairline: #e3e8ee;
  --gx-app-primary: #0284c7;
  --gx-app-primary-deep: #0369a1;
  --gx-app-primary-soft: #e0f2fe;
  --gx-app-navy: #0b2440;
  --gx-app-danger: #dc2626;
  --gx-app-warning: #b45309;
  --gx-app-success: #15803d;
  --gx-app-info: #0369a1;
  --gx-app-radius-sm: 6px;
  --gx-app-radius-md: 8px;
  --gx-app-radius-lg: 12px;
  --gx-app-shadow-1: 0 1px 3px rgba(0, 55, 112, 0.08);
  --gx-app-shadow-2: 0 12px 36px rgba(0, 55, 112, 0.1), 0 2px 8px rgba(0, 55, 112, 0.06);
  --gx-app-focus: 0 0 0 3px rgba(2, 132, 199, 0.2);
  --gx-app-space-1: 0.25rem;
  --gx-app-space-2: 0.5rem;
  --gx-app-space-3: 0.75rem;
  --gx-app-space-4: 1rem;
  --gx-app-space-5: 1.5rem;
}

body {
  color: var(--gx-app-ink);
  background:
    radial-gradient(circle at 85% 0%, rgba(224, 242, 254, 0.8), transparent 24rem),
    var(--gx-app-canvas-soft);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--gx-app-ink);
  letter-spacing: 0;
}

h1 {
  font-weight: 300;
  letter-spacing: -0.02em;
}

.gx-tnum,
.gx-numeric,
.rz-data-grid td[style*="right"],
.rz-data-grid td.rz-text-align-right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "tnum";
}

.gx-numeric {
  text-align: right;
}

.gx-app-shell {
  isolation: isolate;
  background: var(--gx-app-canvas-soft);
}

.gx-app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-app-space-4);
  height: 100%;
  padding: 0 var(--gx-app-space-5);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.16), transparent 28rem),
    var(--gx-app-navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gx-app-topbar-primary,
.gx-app-topbar-utilities {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--gx-app-space-3);
}

.gx-app-topbar .rz-button {
  color: #fff;
}

.gx-app-product {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}

.gx-app-context,
.gx-app-user,
.gx-app-role,
.gx-app-session {
  min-width: 0;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.gx-app-context,
.gx-app-role {
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(224, 242, 254, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.08);
}

.gx-app-user {
  color: #fff;
  font-weight: 500;
}

.gx-app-session {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.gx-app-session.timer-ok {
  color: #bae6fd;
  background: rgba(2, 132, 199, 0.24);
}

.gx-app-session.timer-warn {
  color: #fee2e2;
  background: rgba(220, 38, 38, 0.28);
  font-weight: 600;
}

.gx-app-sidebar {
  position: relative;
  z-index: 3;
  background: var(--gx-app-navy);
  border-right: 1px solid rgba(224, 242, 254, 0.12);
}

.gx-app-nav.rz-panel-menu {
  --rz-panel-menu-item-border: 0;
  --rz-panel-menu-item-background-color: transparent;
  --rz-panel-menu-item-color: rgba(255, 255, 255, 0.78);
  --rz-panel-menu-item-hover-background-color: rgba(224, 242, 254, 0.1);
  --rz-panel-menu-item-hover-color: #fff;
  --rz-panel-menu-item-active-background-color: rgba(56, 189, 248, 0.18);
  --rz-panel-menu-item-active-color: #fff;
  --rz-panel-menu-item-active-indicator: var(--gx-app-primary-soft);
  --rz-panel-menu-item-2nd-level-background-color: transparent;
  --rz-panel-menu-item-2nd-level-color: rgba(255, 255, 255, 0.72);
  --rz-panel-menu-item-2nd-level-hover-background-color: rgba(224, 242, 254, 0.1);
  --rz-panel-menu-item-2nd-level-hover-color: #fff;
  --rz-panel-menu-item-2nd-level-active-background-color: rgba(56, 189, 248, 0.18);
  --rz-panel-menu-item-2nd-level-active-color: #fff;
  --rz-panel-menu-icon-color: rgba(186, 230, 253, 0.76);
  min-height: 100%;
  padding: var(--gx-app-space-3) var(--gx-app-space-2);
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
}

.gx-app-nav .rz-navigation-item-link {
  gap: var(--gx-app-space-2);
  border-radius: var(--gx-app-radius-md);
  color: rgba(255, 255, 255, 0.78) !important;
}

.gx-app-nav .rz-navigation-item-link:hover {
  background: rgba(224, 242, 254, 0.1) !important;
  color: #fff !important;
}

.gx-app-nav .rz-navigation-item-link.rz-active {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--gx-app-primary-soft);
}

.gx-app-nav .rz-navigation-item-wrapper .rz-navigation-item-wrapper {
  margin-left: var(--gx-app-space-2);
  border-left: 1px solid rgba(224, 242, 254, 0.12);
}

.gx-app-billing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-app-space-3);
  min-height: 2.75rem;
  padding: var(--gx-app-space-2) var(--gx-app-space-5);
  cursor: pointer;
  font-size: 0.875rem;
}

.gx-app-billing-message {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.gx-app-billing-field {
  white-space: nowrap;
}

.gx-app-billing-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Always-on strip mirroring the WinForms BillingInfoStripControl:
   strip background communicates urgency (neutral when Active, tinted otherwise),
   pill on the right always shows the precise status. */
.gx-app-billing.ok {
  color: #1f2937;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.gx-app-billing.warning {
  color: #78350f;
  background: #fef3c7;
}

.gx-app-billing.danger {
  color: #fff;
  background: var(--gx-app-danger);
}

.gx-app-billing-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}
.gx-app-billing-pill.active    { background: #dcfce7; color: #166534; }
.gx-app-billing-pill.trial     { background: #dbeafe; color: #1e40af; }
.gx-app-billing-pill.pastdue   { background: #fef3c7; color: #92400e; }
.gx-app-billing-pill.suspended { background: #fee2e2; color: #991b1b; }
.gx-app-billing-pill.cancelled { background: #e5e7eb; color: #374151; }

/* Discounted subscription amount: struck-through original + savings badge. */
.gx-app-billing-was {
  text-decoration: line-through;
  opacity: 0.6;
  margin-inline-end: 0.25rem;
}
.gx-app-billing-discount {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Global loading bar — fixed thin progress strip at the very top of the viewport,
   driven by RequestActivityTracker. Visible whenever any API call is in flight. */
.gx-global-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(99, 102, 241, 0.15); /* faint indigo wash */
  z-index: 2000;
  overflow: hidden;
  pointer-events: none;
}
.gx-global-loading-bar-track {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
  animation: gx-global-loading-bar-slide 1.1s ease-in-out infinite;
}
@keyframes gx-global-loading-bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-global-loading-bar-track { animation-duration: 2s; }
}

.gx-app-sidebar-scrim {
  display: none;
  border: 0;
  background: rgba(13, 37, 61, 0.44);
}

/* .page-header (bare, no gx- prefix) is used two ways in this app: (1) as a plain <header
   class="page-header"> on pages that don't go through the <PageHeader> component — including the
   co-browse support pages (Support access / Support sessions / Live session viewer) this rule was
   added for; (2) combined with .gx-page-header on the same element by Components/Common/PageHeader.razor
   (`class="page-header gx-page-header"`), used on ~140 other pages across the app. Both classes have
   equal specificity, so for shared properties the LAST one in source order wins. This block is placed
   here, before .gx-page-header, so .gx-page-header's declarations (flex-end alignment, its own
   spacing/gap) keep winning on <PageHeader> pages, and app-wide styling is unaffected by this feature
   branch. Bare .page-header usages (which have no .gx-page-header to compete with) still get the full
   flex layout below. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gx-app-space-3);
  margin-bottom: var(--gx-app-space-5);
}

.page-header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1.18rem + 0.5vw, 1.75rem);
  line-height: 1.15;
}

.gx-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gx-app-space-4);
  margin-bottom: var(--gx-app-space-4);
  padding-bottom: var(--gx-app-space-3);
  border-bottom: 1px solid var(--gx-app-hairline);
}

.gx-page-header-copy {
  min-width: 0;
}

.gx-page-header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1.18rem + 0.5vw, 1.75rem);
  line-height: 1.15;
}

.gx-page-header p {
  margin: var(--gx-app-space-1) 0 0;
  color: var(--gx-app-muted);
  font-size: 0.92rem;
}

.gx-page-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--gx-app-space-2);
}

.gx-stat-card {
  height: 100%;
}

.gx-stat-card-row {
  min-height: 100%;
}

.gx-stat-copy {
  min-width: 0;
}

.gx-stat-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--gx-app-radius-md);
  color: var(--gx-stat-icon, var(--gx-app-primary));
  background: var(--gx-app-primary-soft);
}

.gx-stat-icon .rzi {
  font-size: 1.55rem;
}

.gx-stat-label,
.gx-stat-value,
.gx-stat-sublabel {
  margin: 0;
}

.gx-stat-label {
  color: var(--gx-app-muted);
}

.gx-stat-value {
  color: var(--gx-app-ink);
  line-height: 1.2;
}

.gx-stat-sublabel {
  color: #94a3b8;
}

.gx-status-chip {
  display: inline-flex;
  align-items: center;
}

.gx-filter-bar {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: var(--gx-app-space-3);
  margin-bottom: var(--gx-app-space-4);
}

.gx-filter-bar-search,
.gx-filter-bar-filters,
.gx-filter-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--gx-app-space-2);
  min-width: 0;
}

.gx-filter-bar-filters,
.gx-filter-bar-actions {
  justify-content: flex-end;
}

.gx-record-list {
  display: none;
  gap: var(--gx-app-space-3);
}

.gx-record-card,
.gx-record-list-empty {
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-md);
  background: var(--gx-app-surface);
  box-shadow: var(--gx-app-shadow-1);
}

.gx-record-card {
  padding: var(--gx-app-space-4);
}

.gx-record-list-empty {
  padding: var(--gx-app-space-5);
  color: var(--gx-app-muted);
}

.gx-record-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gx-app-space-3);
  margin-bottom: var(--gx-app-space-3);
}

.gx-record-heading strong,
.gx-record-heading span {
  display: block;
}

.gx-record-heading span {
  margin-top: var(--gx-app-space-1);
  color: var(--gx-app-muted);
  font-size: 0.875rem;
}

.gx-record-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gx-app-space-3);
  margin: 0 0 var(--gx-app-space-4);
}

.gx-record-meta dt {
  color: var(--gx-app-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.gx-record-meta dd {
  min-width: 0;
  margin: var(--gx-app-space-1) 0 0;
  overflow-wrap: anywhere;
}

.gx-comparison-table {
  max-width: 100%;
  overflow-x: auto;
}

.gx-detail-summary .rz-row,
.gx-detail-metrics {
  align-items: stretch;
}

.gx-loan-party-media {
  display: flex;
  flex-direction: column;
  gap: var(--gx-app-space-3);
  min-width: 0;
}

.gx-loan-borrower-picture {
  display: flex;
  align-items: center;
  gap: var(--gx-app-space-4);
  overflow: hidden;
  min-width: 0;
  padding: var(--gx-app-space-3);
  border: 1px solid var(--gx-app-hairline);
  border-radius: 0.5rem;
  background: var(--gx-app-surface-raised);
}

.gx-loan-borrower-photo {
  width: 6rem;
  height: 6rem;
  flex: 0 0 6rem;
  object-fit: cover;
  overflow: hidden;
  border: 1px solid var(--gx-app-hairline);
  border-radius: 0.5rem;
}

.gx-detail-summary img.gx-loan-borrower-photo {
  display: block;
  width: 6rem;
  max-width: 6rem;
  height: 6rem;
  max-height: 6rem;
  flex: 0 0 6rem;
  object-fit: cover;
  overflow: hidden;
}

.gx-loan-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf2f7;
  color: #718096;
  font-weight: 700;
}

.gx-loan-party-copy,
.gx-loan-guarantor-copy {
  min-width: 0;
}

.gx-loan-party-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.gx-loan-party-meta {
  color: var(--gx-app-muted);
  font-size: 0.85rem;
}

.gx-loan-guarantor-pictures {
  display: flex;
  flex-direction: column;
  gap: var(--gx-app-space-2);
  min-width: 0;
}

.gx-loan-guarantor-label {
  color: var(--gx-app-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.gx-loan-guarantor-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gx-app-space-2);
  align-items: center;
}

.gx-loan-guarantor-picture {
  display: flex;
  align-items: center;
  gap: var(--gx-app-space-2);
  max-width: 13rem;
  min-width: 0;
  padding: 0.35rem var(--gx-app-space-2);
  border: 1px solid var(--gx-app-hairline);
  border-radius: 0.5rem;
  background: #f8fafc;
}

.gx-loan-guarantor-photo {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
}

.gx-loan-guarantor-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.gx-loan-guarantor-copy span,
.gx-loan-guarantor-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gx-loan-guarantor-copy span {
  font-weight: 600;
}

.gx-loan-guarantor-copy small,
.gx-loan-guarantor-more {
  color: var(--gx-app-muted);
  font-size: 0.75rem;
}

.gx-detail-tabs .rz-tabview-nav {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gx-detail-tabs .rz-tabview-panels {
  min-width: 0;
}

.gx-detail-table {
  padding-bottom: var(--gx-app-space-1);
}

.gx-detail-table .rz-data-grid {
  min-width: 34rem;
}

.gx-report-filters {
  background: var(--gx-app-surface-raised);
}

.gx-report-filters .rz-form-field {
  min-width: 0;
}

.gx-report-summary {
  padding-top: var(--gx-app-space-3);
  border-top: 1px solid var(--gx-app-hairline);
}

.gx-dialog-form {
  min-width: min(24rem, calc(100vw - 2rem));
}

.gx-form-field {
  display: grid;
  gap: var(--gx-app-space-1);
}

.gx-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-top: var(--gx-app-space-3);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--gx-app-surface) 1rem);
}

.rz-card {
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-lg);
  background: var(--gx-app-surface);
  box-shadow: var(--gx-app-shadow-1);
  color: var(--gx-app-ink);
}

.rz-button {
  min-height: 2.5rem;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 500;
  letter-spacing: 0;
}

.rz-button.rz-primary {
  background: var(--gx-app-primary);
  border-color: var(--gx-app-primary);
}

.rz-button.rz-primary:not(.rz-state-disabled):hover {
  background: var(--gx-app-primary-deep);
  border-color: var(--gx-app-primary-deep);
  box-shadow: var(--gx-app-shadow-1);
}

.rz-button.rz-light,
.rz-button.rz-secondary {
  border-color: var(--gx-app-hairline);
  color: var(--gx-app-ink-secondary);
}

.rz-button.rz-danger {
  border-color: var(--gx-app-danger);
}

.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-numeric,
.rz-textarea,
.rz-datepicker,
.rz-autocomplete {
  border-radius: var(--gx-app-radius-md);
}

.rz-inputtext,
.rz-dropdown,
.rz-numeric,
.rz-textarea,
.rz-datepicker,
.rz-autocomplete {
  border-color: var(--gx-app-hairline);
  color: var(--gx-app-ink);
  background: var(--gx-app-surface);
}

.rz-inputtext:focus,
.rz-dropdown:focus-within,
.rz-numeric:focus-within,
.rz-textarea:focus,
.rz-datepicker:focus-within,
.rz-autocomplete:focus-within {
  border-color: var(--gx-app-primary);
  box-shadow: var(--gx-app-focus);
}

.rz-alert {
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-md);
}

.rz-badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
}

.rz-data-grid {
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-lg);
  background: var(--gx-app-surface);
  box-shadow: var(--gx-app-shadow-1);
  overflow: hidden;
}

.rz-data-grid .rz-grid-table thead th {
  color: var(--gx-app-ink-secondary);
  background: var(--gx-app-canvas-soft);
  border-bottom-color: var(--gx-app-hairline);
  font-weight: 600;
}

.rz-data-grid .rz-grid-table tbody td {
  border-bottom-color: rgba(227, 232, 238, 0.85);
  color: var(--gx-app-ink);
}

.rz-data-grid .rz-grid-table tbody tr:hover td {
  background: rgba(224, 242, 254, 0.38);
}

.rz-dialog {
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-lg);
  box-shadow: var(--gx-app-shadow-2);
  overflow: hidden;
}

.rz-dialog-titlebar {
  border-bottom: 1px solid var(--gx-app-hairline);
  color: var(--gx-app-ink);
  background: var(--gx-app-surface-raised);
}

.rz-progressbar {
  border-radius: 999px;
}

:where(a, button, input, select, textarea, .rz-button, .rz-dropdown):focus-visible {
  outline: none;
  box-shadow: var(--gx-app-focus);
}

/* The hamburger only acts while the drawer model is active (<=1200px). */
@media (min-width: 1201px) {
  .gx-nav-toggle {
    display: none !important;
  }
}

/* Tablet + mobile: the sidebar is an off-canvas drawer toggled by the topbar
   hamburger. Scoped to .gxlms-shell so the /platform layout (.platform-shell)
   keeps its own behavior. */
@media (max-width: 1200px) {
  .gxlms-shell .gx-app-sidebar {
    position: fixed;
    inset: var(--gxlms-topbar-height) auto 0 0;
    z-index: 30;
    width: min(20rem, 86vw);
    transform: translateX(-105%);
    transition: transform 200ms ease;
    box-shadow: var(--gx-app-shadow-2);
    overscroll-behavior: contain;
  }

  .gxlms-shell.nav-open .gx-app-sidebar {
    transform: translateX(0);
  }

  .gxlms-shell.nav-open .gx-app-sidebar-scrim {
    display: block;
    position: fixed;
    z-index: 20;
    inset: var(--gxlms-topbar-height) 0 0 0;
  }

  /* Lock the page behind the open drawer so the background can't scroll. */
  .gxlms-shell.nav-open .gxlms-content {
    overflow: hidden;
  }

  /* Comfortable touch targets for drawer navigation on touch devices. */
  .gxlms-shell .gx-app-nav .rz-navigation-item-link {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 100% 0%, rgba(224, 242, 254, 0.88), transparent 18rem),
      var(--gx-app-canvas-soft);
  }

  .rz-card {
    border-radius: var(--gx-app-radius-md);
  }

  .rz-dialog {
    max-width: calc(100vw - 1rem);
  }

  .gx-app-topbar {
    gap: var(--gx-app-space-2);
    padding: 0 var(--gx-app-space-3);
  }

  .gx-app-topbar-primary,
  .gx-app-topbar-utilities {
    gap: var(--gx-app-space-2);
  }

  .gx-app-branch,
  .gx-app-role,
  .gx-app-user {
    display: none;
  }

  .gx-app-context {
    max-width: 8rem;
  }

  .gx-app-product {
    font-size: 0.95rem;
  }

  /* Clock is non-essential on a phone; keep the session-expiry timer. */
  .gx-app-clock {
    display: none;
  }

  .gx-app-billing {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: var(--gx-app-space-3);
  }

  .gx-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .gx-page-header-actions {
    justify-content: flex-start;
  }

  .gx-filter-bar {
    grid-template-columns: 1fr;
  }

  .gx-filter-bar-search,
  .gx-filter-bar-filters,
  .gx-filter-bar-actions {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }

  .gx-record-list {
    display: grid;
  }

  .gx-table-desktop {
    display: none;
  }

  .gx-filter-bar .rz-dropdown,
  .gx-filter-bar .rz-textbox {
    width: 100% !important;
  }

  .gx-record-meta {
    grid-template-columns: 1fr;
  }

  .gx-detail-table .rz-data-grid {
    min-width: 32rem;
  }

  .gx-dialog-form {
    min-width: 0;
  }

  .gx-form-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* === Shared primitives used by the co-browse support pages (Support access / Support sessions /
   Live session viewer) and now available to any page that mounts outside PlatformLayout. None of
   .btn/.btn-primary/.btn-secondary/.btn-danger/.form-control/.gx-card/.gx-disclosure/
   .gx-alert-error/.gx-actions/.gx-code had a rule anywhere the app shell loads, so they rendered as
   unstyled inline text — including the client's "you are being watched" consent screen and the
   one-time code an agent reads aloud over the phone. These are deliberately global (not scoped
   .razor.css) because the same classes are shared across three different components under two
   different layouts (MainLayout and PlatformLayout). (.page-header lives up near .gx-page-header,
   not here — see the comment there for why.) === */

.gx-card {
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-lg);
  background: var(--gx-app-surface);
  box-shadow: var(--gx-app-shadow-1);
  padding: var(--gx-app-space-5);
  color: var(--gx-app-ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-app-space-2);
  min-height: 2.5rem;
  padding: 0 var(--gx-app-space-4);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gx-app-surface);
  color: var(--gx-app-ink);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn.btn-sm { min-height: 2rem; padding: 0 var(--gx-app-space-3); font-size: 0.85rem; }

.btn-primary {
  background: var(--gx-app-primary);
  border-color: var(--gx-app-primary);
  color: #fff;
}

.btn-primary:not(:disabled):hover {
  background: var(--gx-app-primary-deep);
  border-color: var(--gx-app-primary-deep);
  box-shadow: var(--gx-app-shadow-1);
}

.btn-secondary {
  background: var(--gx-app-surface);
  border-color: var(--gx-app-hairline);
  color: var(--gx-app-ink-secondary);
}

.btn-secondary:not(:disabled):hover { background: var(--gx-app-canvas-soft); }

.btn-danger {
  background: var(--gx-app-surface);
  border-color: var(--gx-app-danger);
  color: var(--gx-app-danger);
}

.btn-danger:not(:disabled):hover {
  background: var(--gx-app-danger);
  border-color: var(--gx-app-danger);
  color: #fff;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--gx-app-focus);
}

.form-control {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--gx-app-space-3);
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-md);
  background: var(--gx-app-surface);
  color: var(--gx-app-ink);
  font: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--gx-app-primary);
  box-shadow: var(--gx-app-focus);
}

/* The client's "what you are agreeing to" consent list — this is the single visible artefact the
   whole co-browse consent model rests on, so it gets its own visually distinct block rather than
   blending into surrounding body text. */
.gx-disclosure {
  margin: var(--gx-app-space-4) 0;
  padding: var(--gx-app-space-4);
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-md);
  background: var(--gx-app-canvas-soft);
}

.gx-disclosure h2 {
  margin: 0 0 var(--gx-app-space-2);
  font-size: 1rem;
}

.gx-disclosure ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--gx-app-space-2);
}

.gx-alert-error {
  margin: var(--gx-app-space-3) 0;
  padding: var(--gx-app-space-3) var(--gx-app-space-4);
  border: 1px solid #fecaca;
  border-radius: var(--gx-app-radius-sm);
  background: #fef2f2;
  color: var(--gx-app-danger);
  font-size: 0.92rem;
}

.gx-actions {
  display: flex;
  gap: var(--gx-app-space-3);
  margin-top: var(--gx-app-space-4);
  flex-wrap: wrap;
}

/* The one-time support code, read aloud over the phone by an agent and typed in by the client —
   large and widely spaced so it is easy to read a character at a time without losing your place. */
.gx-code {
  margin: var(--gx-app-space-2) 0;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
  color: var(--gx-app-ink);
}

/* The persistent "your screen is being watched" indicator — the single visible artefact the whole
   co-browse consent model rests on. It sits in the .gxlms-billing grid row, which .gxlms-shell
   (site.css) keeps outside the scrolling .gxlms-content area, so it is already on screen at all
   times without needing position:sticky here; this rule is only responsible for making it
   unmistakable rather than just present.
   NOTE: these rules were originally authored as scoped CSS in
   Components/Support/SupportSessionBanner.razor.css, but this project never links the generated
   GxLms.Web2.styles.css bundle (App.razor only links material-base.css/site.css/app-theme.css/
   manual-print.css), so scoped .razor.css files never reach the browser — see also the pre-existing,
   equally-dead Features/Help/Manual/UserManual.razor.css. Moved here, into a stylesheet that is
   actually loaded, rather than wiring up the bundle (which would also switch on UserManual.razor.css
   and change that unrelated page). Every class name below is already unique, so scoping bought
   nothing anyway. */
.gx-support-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gx-app-space-3);
  padding: var(--gx-app-space-3) var(--gx-app-space-5);
  background: var(--gx-app-danger);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.4;
  box-shadow: var(--gx-app-shadow-1);
}

.gx-support-banner strong {
  font-weight: 700;
}

/* Pulsing "live" dot, mirroring the recording-indicator convention used by every screen-share tool
   this feature's users will already be familiar with. */
.gx-support-dot {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
  animation: gx-support-pulse 1.6s ease-in-out infinite;
}

@keyframes gx-support-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .gx-support-dot { animation: none; }
}

.gx-support-warn {
  padding: 0.15rem 0.6rem;
  border-radius: var(--gx-app-radius-sm);
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.gx-support-escalation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gx-app-space-2);
  padding-left: var(--gx-app-space-3);
  margin-left: var(--gx-app-space-1);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

/* Buttons inside this banner sit on a solid --gx-app-danger fill, so the global .btn palette
   above (which assumes a light surface) needs a light-on-dark override here. Scoped to
   .gx-support-banner (two classes) so it reliably beats the single-class global .btn rule
   regardless of source order. */
.gx-support-banner .btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.gx-support-banner .btn:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.28);
}

.gx-support-banner .btn-danger {
  background: #fff;
  border-color: #fff;
  color: var(--gx-app-danger);
}

.gx-support-banner .btn-danger:not(:disabled):hover {
  background: #fee2e2;
}

.gx-support-banner .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* The stage rrweb's Replayer mounts its mirrored iframe into (SupportSessionViewer.razor). Only used
   by this one page, so this was originally scoped CSS in SupportSessionViewer.razor.css — moved here
   for the same reason as the support banner rules above (scoped .razor.css never loads in this
   project). Replaces what used to be an inline style= attribute on the div (min-height/border/radius/
   background only — no overflow handling, so a client tab wider or taller than this container could
   spill out of it); overflow:hidden clips the mirrored page to the stage instead. */
.cobrowse-stage {
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--gx-app-hairline);
  border-radius: var(--gx-app-radius-md);
  background: var(--gx-app-surface);
  margin-bottom: var(--gx-app-space-5);
}

.cobrowse-stage iframe {
  width: 100%;
  border: 0;
}