/*
  JNE-FTS Surgical Layout Authority
  Version: surgical-cleanup-ui-stability-v1
  Purpose: final loaded stylesheet for shared responsive layout, spacing, typography, button, form, table, modal, sidebar, and map stabilization.
  Rule: this file is the active layout authority. Older page-specific layout blockers must be overridden here first, then removed only after reference audit confirms they are unused.
*/

:root {
  --jne-layout-authority-version: "surgical-cleanup-ui-stability-v1";
  --app-header-height: 58px;
  --color-red: #e31b23;
  --color-red-dark: #99151a;
  --color-bg: #07090b;
  --color-panel: rgba(17, 20, 24, .94);
  --color-panel-soft: rgba(25, 30, 36, .94);
  --color-border: rgba(255, 255, 255, .16);
  --color-text: #f5f7fa;
  --color-muted: #a6adb8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-panel: 0 18px 40px rgba(0, 0, 0, .34);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden !important;
}

body.logged-in,
body.logged-in * {
  box-sizing: border-box !important;
}

body.logged-in :where(button, .btn, .button-link, input, select, textarea, label, th, td, a, span, strong, small, p, h1, h2, h3, h4) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.logged-in #appShell.app-shell {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: var(--app-header-height) minmax(0, 1fr) !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

body.logged-in #loginView,
body.logged-in #loginView.login-screen,
body.logged-in.login-active #loginView,
body.logged-in.login-active #loginView.login-screen,
body.logged-in #loginView * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.logged-in #appShell.app-shell:not(.hidden),
body.logged-in.login-active #appShell.app-shell:not(.hidden) {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

body.logged-in .app-header {
  position: relative !important;
  z-index: 10000 !important;
  display: grid !important;
  grid-template-columns: minmax(132px, 160px) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  height: var(--app-header-height) !important;
  min-height: var(--app-header-height) !important;
  max-height: var(--app-header-height) !important;
  padding: 0 var(--space-4) !important;
  overflow: visible !important;
}

body.logged-in .brand-block {
  min-width: 0 !important;
  max-width: 160px !important;
  overflow: hidden !important;
}

body.logged-in .brand-logo {
  width: min(78px, 100%) !important;
  height: 38px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

body.logged-in .header-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.logged-in .header-copy h1 {
  margin: 0 !important;
  font-size: clamp(20px, 2.1vw, 28px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.logged-in .header-copy :where(p, small) {
  margin: 0 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.logged-in .top-nav {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--space-2) !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.logged-in .top-nav > button,
body.logged-in #globalModuleReturnButton.header-dot-return {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  min-width: clamp(42px, 8vw, 128px) !important;
  max-width: 140px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.logged-in :where(button, .btn, .button-link, .tab-button, .response-nav-item, .asset-nav-item, .top-nav > button, select, input) {
  line-height: 1.15 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis !important;
}

body.logged-in #globalModuleReturnButton.header-dot-return {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
}

body.logged-in #globalModuleReturnButton.header-dot-return.hidden {
  display: inline-grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.logged-in :where(.site-context-bar, .management-side-drawer, .bottom-controls-drawer) {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 10020 !important;
}

body.logged-in :where(.site-drawer-panel, .management-drawer-panel, .footer-actions) {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(380px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - var(--app-header-height) - 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 10030 !important;
}

body.logged-in #appShell > main {
  grid-row: 2 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  contain: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

body.logged-in #appShell > main > .view {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.logged-in #appShell > main > .view.active {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: calc(100dvh - var(--app-header-height)) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  padding: var(--space-4) !important;
  gap: var(--space-4) !important;
  align-content: start !important;
}

body.logged-in #appShell > main > .view.active > :where(
  .panel,
  .card,
  .module-shell,
  .dashboard-shell,
  .operations-management-shell,
  .response-module-shell,
  .asset-manager-shell,
  .profile-workspace,
  .planning-workbench,
  .audit-dashboard-shell,
  .module-content
) {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.logged-in #appShell:not(.hidden) :where(.hidden, [hidden], [aria-hidden="true"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.logged-in #appShell > main > .view.active > :where(.module-bar, .portal-return-bar) {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body.logged-in #moduleHubView.view.active,
body.logged-in #mainMenuView.view.active {
  place-items: center !important;
}

body.logged-in #moduleHubView .portal-management-window,
body.logged-in #mainMenuView .portal-management-window {
  width: min(1320px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

body.logged-in :where(.main-module-grid, .module-grid, .menu-panel) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: var(--space-4) !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.logged-in :where(.main-module-card, .menu-button) {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 82px !important;
  overflow: hidden !important;
}

body.logged-in :where(
  #operationsDailyView,
  #assetManagerView,
  #profileView,
  #portfolioView,
  #instructorView,
  #dataEntryView,
  #examView,
  #documentsView,
  #planningView,
  #auditDashboardView,
  #trainingCalendarView,
  #promotionView,
  #statisticsView,
  #archiveView,
  #watchHierarchyView,
  #siteManagementView,
  #userManagementView,
  #roleManagementView,
  #workQueueView
).view.active:not(.asset-command-map-active):not(.asset-dashboard-active) {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.logged-in :where(
  .panel,
  .card,
  .workbench,
  .dashboard-shell,
  .module-shell,
  .module-content,
  .operations-management-shell,
  .asset-manager-main,
  .asset-manager-content,
  .profile-workspace,
  .planning-dashboard,
  .planning-workbench,
  .audit-dashboard-shell,
  .live-register-panel,
  .selected-record-panel,
  .operations-command-panel,
  .profile-register,
  .planning-library-panel,
  .calendar-panel,
  .document-panel,
  .report-panel
) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.logged-in #operationsDailyView.view.active .response-module-shell,
body.logged-in #assetManagerView.view.active:not(.asset-command-map-active):not(.asset-dashboard-active) .asset-manager-shell {
  display: grid !important;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) !important;
  gap: var(--space-4) !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.logged-in #operationsDailyView.view.active .response-main,
body.logged-in #assetManagerView.view.active:not(.asset-command-map-active):not(.asset-dashboard-active) .asset-manager-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--space-4) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.logged-in #operationsDailyView.view.active .response-module-sidebar,
body.logged-in #assetManagerView.view.active:not(.asset-command-map-active):not(.asset-dashboard-active) .asset-manager-sidebar {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  display: grid !important;
  gap: var(--space-2) !important;
  width: 100% !important;
  max-width: 230px !important;
  min-width: 0 !important;
  max-height: calc(100dvh - var(--app-header-height) - 40px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: var(--space-2) !important;
  border-right: 6px solid var(--color-red) !important;
}

body.logged-in #operationsDailyView.view.active .response-module-sidebar :where(button, .response-nav-item, .tab-button),
body.logged-in #assetManagerView.view.active:not(.asset-command-map-active):not(.asset-dashboard-active) .asset-manager-sidebar :where(button, .asset-nav-item, .tab-button) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

body.logged-in #operationsDailyView.view.active .response-module-sidebar :where(button, .response-nav-item, .tab-button) :where(span, strong),
body.logged-in #assetManagerView.view.active:not(.asset-command-map-active):not(.asset-dashboard-active) .asset-manager-sidebar :where(button, .asset-nav-item, .tab-button) :where(span, strong) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.logged-in :where(.form-grid, .filter-grid, .operations-filter-grid, .profile-form-grid, .training-form-grid, .dashboard-grid, .summary-grid, .operations-summary-grid, .metric-grid, .stats-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: var(--space-3) !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.logged-in :where(.panel-actions, .inline-actions, .operations-command-actions, .dashboard-header-actions, .form-actions, .document-actions, .calendar-pdf-actions, .audit-module-menu, .planning-module-menu, .system-controls-grid, .btn-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(136px, 100%), 1fr)) !important;
  gap: var(--space-2) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.logged-in :where(.table-wrap, .data-table, .register-table, .audit-table, .training-table, .live-register-table-wrap, .scrollable-table, .profile-register-list, .command-list, .list-body, .evidence-list, .calendar-list, .planning-library-list, .audit-list) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: min(58dvh, 620px) !important;
}

body.logged-in :where(.table-wrap table, .data-table table, .register-table table, table) {
  max-width: 100% !important;
  border-collapse: collapse !important;
}

body.logged-in :where(button, .btn, .button-link, select, input, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.logged-in :where(#dailyActivityForm.daily-activity-entry-popup:not(.hidden), #personProfileForm.profile-entry-popup:not(.hidden), #recordForm.profile-entry-popup:not(.hidden), #instructorForm.profile-entry-popup:not(.hidden), #examForm.profile-entry-popup:not(.hidden), #documentForm.profile-entry-popup:not(.hidden), #planningDocumentForm.profile-entry-popup:not(.hidden), #actionTimeRetrievalPanel.profile-entry-popup:not(.hidden), #calendarEntryPopup.calendar-editor:not(.hidden)) {
  position: fixed !important;
  top: calc(var(--app-header-height) + 16px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  display: block !important;
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: min(1120px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - var(--app-header-height) - 32px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 30000 !important;
  margin: 0 !important;
  padding: 18px !important;
}

body.logged-in :where(.popup-overlay:not(.hidden), .modal-overlay:not(.hidden), .dialog-overlay:not(.hidden), .action-popup:not(.hidden), .fault-popup:not(.hidden), .exam-popup:not(.hidden)) {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 31000 !important;
  overflow: hidden !important;
  padding: 16px !important;
  background: rgba(0, 0, 0, .56) !important;
}

body.logged-in :where(.action-popup-card, .fault-popup-card, .popup-card, .modal-card, .exam-popup-card, .statement-popup-card, .watch-hierarchy-card, .task-inbox-popup-card) {
  width: min(860px, calc(100vw - 32px)) !important;
  max-width: min(860px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Asset Manager command-map mode owns the whole viewport below the header. */
body.logged-in.asset-command-map-active #appShell > main {
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active.asset-dashboard-active.asset-command-map-active {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active > :not(.asset-manager-shell) {
  display: none !important;
}

body.logged-in.asset-command-map-active #assetManagerView :where(.asset-manager-shell, .asset-manager-content, .asset-manager-main, .asset-manager-tab[data-asset-panel="dashboard"].active, .asset-map-panel, .asset-map-first-workspace, .asset-map-main-panel, #assetMapBoard, .asset-map-canvas, .asset-maplibre-shell, .asset-maplibre-map, .maplibregl-map, .maplibregl-canvas-container, .maplibregl-canvas) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Shared map component: Overview must reuse the same Asset Management map
   surface instead of the old static overview canvas. */
body.logged-in #portalOverviewView.view.active .portal-management-window.map-only-window,
body.logged-in #portalOverviewView.view.active .portal-overview-command.map-only-overview,
body.logged-in #portalOverviewView.view.active .portal-overview-map-panel,
body.logged-in #portalOverviewView.view.active #portalOverviewMap,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .asset-map-canvas,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .asset-maplibre-map,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .maplibregl-map,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .maplibregl-canvas-container,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .maplibregl-canvas {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.logged-in #portalOverviewView.view.active .portal-management-window.map-only-window {
  padding: 12px !important;
}

body.logged-in #portalOverviewView.view.active #portalOverviewMap {
  display: block !important;
  height: clamp(420px, 62dvh, 720px) !important;
  border: 1px solid var(--danger, #e31b23) !important;
  border-radius: 12px !important;
  background: #07090b !important;
}

body.logged-in #portalOverviewView.view.active #portalOverviewMap .asset-map-canvas,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .asset-maplibre-map,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .maplibregl-map,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .maplibregl-canvas-container,
body.logged-in #portalOverviewView.view.active #portalOverviewMap .maplibregl-canvas {
  height: 100% !important;
}

body.logged-in.asset-command-map-active #assetManagerView .asset-manager-sidebar {
  display: none !important;
}

body.logged-in.asset-command-map-active #assetManagerView .asset-live-controls {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(360px, calc(100vw - 56px)) !important;
  max-width: min(360px, calc(100vw - 56px)) !important;
  transform: translateX(-100%) !important;
  overflow: hidden !important;
  z-index: 50 !important;
}

body.logged-in.asset-command-map-active #assetManagerView .asset-live-controls.open {
  transform: translateX(0) !important;
}

body.logged-in.asset-command-map-active #assetManagerView .geo-map-controls__body {
  height: calc(100% - 56px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.logged-in.asset-command-map-active #assetManagerView.asset-controls-open #assetLiveMapControlsToggle {
  display: none !important;
}

body.logged-in.asset-command-map-active #assetManagerView :where(.asset-live-controls button, .asset-live-controls select, .asset-live-controls input, .asset-map-command-kpi, .asset-map-selected-detail, .asset-live-controls-section) {
  overflow: hidden !important;
}

/* Final header/map authority. Keeps global navigation above map mode and
   prevents old fixed/floating rules from trapping the user in a module. */
body.logged-in .app-header,
body.logged-in.asset-command-map-active .app-header {
  position: relative !important;
  z-index: 40000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.logged-in .top-nav,
body.logged-in #headerActionRail,
body.logged-in.asset-command-map-active .top-nav,
body.logged-in.asset-command-map-active #headerActionRail {
  z-index: 40010 !important;
  pointer-events: auto !important;
}

body.logged-in #globalModuleReturnButton.header-dot-return:not(.hidden),
body.logged-in.asset-command-map-active #globalModuleReturnButton.header-dot-return:not(.hidden) {
  display: inline-grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

body.logged-in :where(.panel, .card, .module-shell, .dashboard-shell, .operations-management-shell, .response-main, .asset-manager-main, .profile-workspace, .planning-workbench, .audit-dashboard-shell) :where(p, small, td, th, label, .helper-text, .muted) {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Header slot authority v10. These controls must not participate in normal
   header flow because old rules can stack the 5-dot return over Logout. */
body.logged-in :where(#siteContextBar, #managementSideDrawer, #taskInboxHeaderBar, #logoutHeaderBar),
body.logged-in #globalModuleReturnButton.header-dot-return {
  position: fixed !important;
  top: 8px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 50000 !important;
}

body.logged-in #logoutHeaderBar {
  right: 16px !important;
  width: 120px !important;
}

body.logged-in #taskInboxHeaderBar {
  right: 146px !important;
  width: 120px !important;
}

body.logged-in #managementSideDrawer {
  right: 276px !important;
  width: 120px !important;
}

body.logged-in #globalModuleReturnButton.header-dot-return:not(.hidden) {
  right: 406px !important;
  left: auto !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

body.logged-in #siteContextBar {
  right: 458px !important;
  width: 120px !important;
}

body.logged-in :where(.site-drawer-tab, .management-drawer-tab, .task-inbox-header-tab, .header-logout-button),
body.logged-in #globalModuleReturnButton.header-dot-return {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.logged-in #globalModuleReturnButton.header-dot-return.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  body.logged-in .app-header {
    grid-template-columns: 96px minmax(0, 1fr) auto !important;
    gap: var(--space-2) !important;
    padding-inline: var(--space-2) !important;
  }

  body.logged-in .header-copy h1 {
    font-size: 18px !important;
  }

  body.logged-in .top-nav > button {
    min-width: 38px !important;
    max-width: 88px !important;
    padding-inline: 8px !important;
  }

  body.logged-in #operationsDailyView.view.active .response-module-shell,
  body.logged-in #assetManagerView.view.active:not(.asset-command-map-active):not(.asset-dashboard-active) .asset-manager-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.logged-in #operationsDailyView.view.active .response-module-sidebar,
  body.logged-in #assetManagerView.view.active:not(.asset-command-map-active):not(.asset-dashboard-active) .asset-manager-sidebar {
    position: relative !important;
    top: auto !important;
    max-width: 100% !important;
    max-height: none !important;
  }
}

/* Responsive UI Stabilization V1
   Last-mile authority for zoom-safe spacing, typography, containment, and
   shared module structure. This section replaces visual conflicts without
   changing active workflows or event handlers. */
:root {
  --header-height: var(--app-header-height, 58px);
  --sidebar-width: 280px;
  --space-7: 32px;
  --space-8: 40px;
  --text-main-title: 28px;
  --text-section-title: 18px;
  --text-body: 14px;
  --text-small: 12px;
  --line-tight: 1.15;
  --line-normal: 1.35;
  --line-relaxed: 1.5;
  --control-height-sm: 32px;
  --control-height-md: 38px;
  --control-height-lg: 44px;
  --radius-xl: 18px;
  --color-panel-2: rgba(29, 36, 45, .96);
  --color-green: #18a85f;
  --color-amber: #f5ad22;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html,
body,
#appShell,
.app-shell {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body {
  font-size: var(--text-body) !important;
  line-height: var(--line-normal) !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

body.logged-in :where(.page-title, .module-title, .main-title, .header-copy h1, .portal-hub-panel h2, .daily-actions-title) {
  font-size: var(--text-main-title) !important;
  line-height: var(--line-tight) !important;
}

body.logged-in :where(.section-title, .card-title, .panel-title, .window-pill, .module-pill, .asset-map-title, .panel h2, .panel h3, .card h3, .profile-register-title, .daily-actions-list-title) {
  font-size: var(--text-section-title) !important;
  line-height: var(--line-tight) !important;
}

body.logged-in :where(button, .btn, .button-link, input, select, textarea, table, th, td, label, p, li, span, a, .form-field, .card-body, .panel-body, .menu-button, .module-card, .main-module-card) {
  font-size: var(--text-body) !important;
  line-height: var(--line-normal) !important;
}

body.logged-in :where(small, .helper-text, .small-text, .field-help, .field-error, .table-meta, .card-meta, .muted, .registry-note, .login-copy, .header-copy p) {
  font-size: var(--text-small) !important;
  line-height: var(--line-normal) !important;
}

body.logged-in :where(
  .app-workspace,
  .view,
  .module-page,
  .module-shell,
  .module-sidebar,
  .module-content,
  .panel,
  .card,
  .sidebar,
  .drawer,
  .table-cell,
  .form-row,
  .btn,
  .btn__label,
  .header-actions,
  .header-title,
  .nav-item,
  .nav-item__label,
  .form-grid,
  .table-wrapper,
  .asset-manager-shell,
  .asset-manager-content,
  .asset-manager-sidebar,
  .response-module-shell,
  .response-module-content,
  .response-module-sidebar
) {
  min-width: 0 !important;
}

body.logged-in :where(button, .btn, .button-link, .menu-button, .main-module-card, .module-card) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  min-height: var(--control-height-md) !important;
  max-width: 100% !important;
  padding: 0 var(--space-4) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: center !important;
  text-decoration: none !important;
}

body.logged-in :where(button, .btn, .button-link, .menu-button) > :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.logged-in :where(.top-nav, .header-actions, .form-actions, .btn-row, .action-row, .panel-actions, .card-actions, .table-actions, .daily-action-toolbar, .asset-map-command-strip) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  min-width: 0 !important;
}

body.logged-in :where(.app-workspace, .views, #views, main, .workspace) {
  position: fixed !important;
  top: var(--app-header-height, var(--header-height)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

body.logged-in .view {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--space-4) !important;
  overflow: hidden !important;
}

body.logged-in .view:not(.active) {
  display: none !important;
}

body.logged-in :where(.module-shell, .asset-manager-shell, .response-module-shell, .profile-workspace-shell, .planning-shell, .audit-shell) {
  display: grid !important;
  grid-template-columns: minmax(220px, var(--sidebar-width)) minmax(0, 1fr) !important;
  gap: var(--space-4) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.logged-in :where(.module-page--single .module-shell, #moduleHubView.view.active .module-shell, #portalOverviewView.view.active .module-shell) {
  display: block !important;
}

body.logged-in :where(.module-sidebar, .asset-manager-sidebar, .response-module-sidebar) {
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: var(--space-3) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in :where(.module-content, .asset-manager-content, .response-module-content, .profile-workspace-content, .planning-content, .audit-content) {
  min-height: 0 !important;
  padding: var(--space-4) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in :where(.dashboard-page, .portal-hub-panel, .main-module-grid-wrap) {
  width: min(1680px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding: var(--space-5) !important;
  overflow-x: hidden !important;
}

body.logged-in :where(.main-module-grid, .module-card-grid, .dashboard-module-grid, .portal-module-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: var(--space-5) !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

body.logged-in :where(.main-module-card, .module-card, .dashboard-card) {
  position: relative !important;
  min-width: 0 !important;
  min-height: 180px !important;
  height: auto !important;
  overflow: hidden !important;
}

body.logged-in :where(.card, .panel, .module-panel, .info-panel, .workspace-card, .register-panel) {
  min-width: 0 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

body.logged-in :where(.card__header, .panel__header, .module-panel-header, .asset-section-header) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: var(--space-4) !important;
  min-width: 0 !important;
}

body.logged-in :where(.card__body, .panel__body, .module-panel-body, .workspace-card-body) {
  padding: var(--space-4) !important;
  min-width: 0 !important;
}

body.logged-in :where(.form-grid, .profile-form-grid, .training-form-grid, .daily-activity-grid, .asset-form-grid, .planning-form-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: var(--space-4) !important;
  min-width: 0 !important;
}

body.logged-in :where(.form-row, .field-row, .input-row) {
  display: grid !important;
  gap: var(--space-2) !important;
  min-width: 0 !important;
}

body.logged-in :where(input, select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--control-height-md) !important;
  padding-inline: var(--space-3) !important;
  border-radius: var(--radius-md) !important;
}

body.logged-in textarea {
  min-height: 96px !important;
  padding-block: var(--space-3) !important;
  resize: vertical !important;
}

body.logged-in :where(.filter-bar, .filters-row, .search-filter-row, .daily-action-filters, .asset-filter-grid) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  align-items: end !important;
  min-width: 0 !important;
}

body.logged-in :where(.filter-bar > *, .filters-row > *, .search-filter-row > *, .daily-action-filters > *, .asset-filter-grid > *) {
  flex: 1 1 180px !important;
  min-width: 0 !important;
}

body.logged-in :where(.table-wrapper, .data-table-wrapper, .register-table-wrapper, .daily-actions-table-wrap) {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.logged-in :where(table, .table, .data-table) {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

body.logged-in :where(th, td) {
  padding: var(--space-2) var(--space-3) !important;
  vertical-align: middle !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.logged-in :where(.text-code, .text-file-name, .text-url, .text-hash, .file-path, .evidence-path) {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.logged-in :where(.exam-popup, .modal-overlay, .popup-overlay):not(.hidden),
body.logged-in :where(.exam-popup:not(.hidden), .action-popup:not(.hidden), .fault-popup:not(.hidden)) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  display: grid !important;
  place-items: center !important;
  padding: var(--space-4) !important;
  overflow: hidden !important;
}

body.logged-in :where(.exam-popup-card, .modal-shell, .action-popup-card, .fault-popup-card) {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.logged-in :where(.exam-popup-card > *, .modal-body, .popup-body, .modal-content) {
  min-width: 0 !important;
}

body.logged-in :where(.exam-popup-card .exam-popup-body, .modal-body, .popup-body) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in :where(.drawer, .site-drawer-panel, .management-drawer-panel, .system-controls-card, .task-inbox-card) {
  max-width: min(420px, calc(100vw - 28px)) !important;
  overflow: hidden !important;
}

body.logged-in :where(.drawer__body, .site-drawer-body, .management-drawer-body, .system-controls-body, .task-inbox-body) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in.asset-command-map-active :where(#assetManagerView.view.active, #assetManagerView.view.active .asset-manager-shell, #assetManagerView.view.active .asset-manager-content, .geo-command-map-page, .map-workspace) {
  position: fixed !important;
  top: var(--app-header-height, var(--header-height)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active :where(.geo-command-map, .map-canvas-host, .asset-map-canvas, .asset-maplibre-map, .maplibregl-map, .maplibregl-canvas-container, .maplibregl-canvas) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.logged-in :where(.geo-map-controls, .map-sidebar) {
  max-width: min(420px, calc(100vw - 28px)) !important;
  overflow: hidden !important;
}

body.logged-in :where(.geo-map-controls__body, .map-sidebar__body) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in :where(.geo-map-controls button, .geo-map-controls .card, .asset-map-command-strip button, .map-sidebar button) {
  overflow: hidden !important;
}

/* asset-boundary-editor-v1: final Asset Manager map ownership.
   The live map must fill the viewport below the header; old Asset Manager cards
   may not add padding, centering, side gaps, or nested scrollbars in map mode. */
html.asset-command-map-active,
html.asset-command-map-active body,
body.logged-in.asset-command-map-active,
body.logged-in.asset-command-map-active #appShell,
body.logged-in.asset-command-map-active #appShell > main {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-manager-shell,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-manager-content,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-manager-main,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-manager-tab[data-asset-panel="dashboard"].active,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-map-panel,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-map-first-workspace,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-map-main-panel,
body.logged-in.asset-command-map-active #assetManagerView.view.active #assetMapBoard,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-map-canvas,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-maplibre-shell,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-maplibre-map,
body.logged-in.asset-command-map-active #assetManagerView.view.active .maplibregl-map,
body.logged-in.asset-command-map-active #assetManagerView.view.active .maplibregl-canvas-container,
body.logged-in.asset-command-map-active #assetManagerView.view.active .maplibregl-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active {
  position: fixed !important;
  top: var(--app-header-height, var(--header-height, 56px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active :where(.asset-map-title, .asset-safety-note, .asset-manager-sidebar, .asset-dashboard-grid, .asset-starter-card) {
  display: none !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-map-board {
  background: #07090b !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-live-controls-toggle {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 65 !important;
  width: auto !important;
  min-width: 132px !important;
  max-width: min(220px, calc(100vw - 32px)) !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.asset-controls-open .asset-live-controls-toggle {
  display: none !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-live-controls {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 80 !important;
  width: min(392px, calc(100vw - 48px)) !important;
  max-width: min(392px, calc(100vw - 48px)) !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  transform: translateX(-100%) !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-live-controls.open {
  transform: translateX(0) !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .geo-map-controls__body {
  height: calc(100% - 60px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active :where(.asset-live-controls-section, .asset-live-action-grid, .asset-map-command-strip, .asset-boundary-list-shell, .asset-boundary-list, .asset-boundary-editor-status) {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-boundary-editor-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(227, 27, 35, 0.45) !important;
  border-radius: 8px !important;
  background: rgba(17, 20, 24, 0.82) !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-boundary-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-boundary-list button {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px 10px !important;
  text-align: left !important;
  border-color: rgba(245, 247, 250, 0.24) !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-boundary-list button.active {
  border-color: #e31b23 !important;
  box-shadow: inset 3px 0 0 #e31b23 !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-boundary-list button span,
body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-boundary-empty {
  color: var(--text-muted, #a6adb8) !important;
  font-size: var(--text-sm, 11px) !important;
  line-height: 1.35 !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-boundary-help {
  display: block !important;
  margin: 6px 0 10px !important;
  color: var(--text-muted, #a6adb8) !important;
  font-size: var(--type-small, 11px) !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
}

body.logged-in :where(.text-ellipsis) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.logged-in :where(.text-wrap-safe) {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (max-width: 1100px) {
  body.logged-in :where(.module-shell, .asset-manager-shell, .response-module-shell, .profile-workspace-shell, .planning-shell, .audit-shell) {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
    gap: var(--space-3) !important;
  }

  body.logged-in .view {
    padding: var(--space-3) !important;
  }

  body.logged-in :where(.module-content, .asset-manager-content, .response-module-content, .profile-workspace-content, .planning-content, .audit-content) {
    padding: var(--space-3) !important;
  }
}

@media (max-width: 760px) {
  body.logged-in :where(.module-shell, .asset-manager-shell, .response-module-shell, .profile-workspace-shell, .planning-shell, .audit-shell) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.logged-in :where(.module-sidebar, .asset-manager-sidebar, .response-module-sidebar) {
    max-height: 180px !important;
  }

  body.logged-in :where(.main-module-grid, .module-card-grid, .dashboard-module-grid, .portal-module-grid) {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: var(--space-3) !important;
  }
}

/*
  Sidebar Readability Lock v2
  Keeps module navigation horizontal and readable after browser zoom,
  preventing legacy/sidebar rules from squeezing labels into vertical text.
*/
body.logged-in :where(#operationsDailyView.view.active .response-module-shell, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-shell) {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
  align-items: stretch !important;
}

body.logged-in :where(#operationsDailyView.view.active .response-module-sidebar, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-sidebar) {
  width: 100% !important;
  min-width: 240px !important;
  max-width: 280px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.logged-in :where(#operationsDailyView.view.active .response-module-sidebar button, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-sidebar button) {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--control-height-lg) !important;
  padding: 0 var(--space-3) !important;
  gap: var(--space-3) !important;
  text-align: left !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

body.logged-in :where(#operationsDailyView.view.active .response-module-sidebar button span:not(.response-nav-icon), #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-sidebar button span:last-child) {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

body.logged-in :where(#operationsDailyView.view.active .response-sidebar-heading, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-sidebar::before) {
  writing-mode: horizontal-tb !important;
}

@media (max-width: 900px) {
  body.logged-in :where(#operationsDailyView.view.active .response-module-shell, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-shell) {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) !important;
  }

  body.logged-in :where(#operationsDailyView.view.active .response-module-sidebar, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-sidebar) {
    min-width: 220px !important;
    max-width: 240px !important;
  }
}

/*
  Viewport Fit Lock v1
  Root cause fixed: post-login launcher and header controls must calculate
  against the available viewport, not old fixed card widths.
*/
body.logged-in .app-header {
  grid-template-columns: minmax(120px, 168px) minmax(220px, 1fr) minmax(0, auto) !important;
  column-gap: var(--space-3, 12px) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

body.logged-in .app-header .header-title {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.logged-in .app-header .header-title h1,
body.logged-in .app-header .standards-tagline,
body.logged-in .app-header .copyright-line {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.logged-in #headerActionRail {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--space-2, 8px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}

body.logged-in #headerActionRail :where(button, .site-drawer-tab, .management-drawer-tab, .task-inbox-header-tab, .header-logout-button) {
  flex: 0 1 auto !important;
  min-width: 84px !important;
  max-width: 128px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 var(--space-3, 12px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.logged-in #globalModuleReturnButton.header-dot-return {
  flex: 0 0 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 6px !important;
}

body.logged-in #moduleHubView.view.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in #moduleHubView .post-login-launcher {
  width: min(100%, calc(100vw - 32px)) !important;
  max-width: min(100%, calc(100vw - 32px)) !important;
  margin: var(--space-4, 16px) auto !important;
  padding: clamp(16px, 2vw, 28px) !important;
  overflow: hidden !important;
}

body.logged-in #moduleHubView .launcher-status-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--space-4, 16px) !important;
  min-width: 0 !important;
}

body.logged-in #moduleHubView .launcher-site-button {
  width: auto !important;
  min-width: 132px !important;
  max-width: 180px !important;
  height: 42px !important;
  min-height: 42px !important;
  white-space: nowrap !important;
}

body.logged-in #moduleHubView .main-module-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.4vw, 20px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.logged-in #moduleHubView .main-module-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(220px, 32vh, 320px) !important;
  height: auto !important;
  padding: clamp(14px, 1.8vw, 24px) !important;
  overflow: hidden !important;
}

body.logged-in #moduleHubView .main-module-card strong,
body.logged-in #moduleHubView .main-module-card small {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-wrap: balance !important;
}

body.logged-in #moduleHubView .main-module-card small {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  body.logged-in .app-header {
    grid-template-columns: minmax(88px, 132px) minmax(180px, 1fr) minmax(0, auto) !important;
  }

  body.logged-in #headerActionRail :where(button, .site-drawer-tab, .management-drawer-tab, .task-inbox-header-tab, .header-logout-button) {
    min-width: 72px !important;
    max-width: 108px !important;
    padding-inline: var(--space-2, 8px) !important;
  }

  body.logged-in #moduleHubView .main-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.logged-in .app-header {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: var(--app-header-height, 58px) !important;
    max-height: none !important;
  }

  body.logged-in #headerActionRail {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
    overflow-x: auto !important;
  }

  body.logged-in #moduleHubView .launcher-status-line {
    grid-template-columns: 1fr !important;
  }

  body.logged-in #moduleHubView .main-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  body.logged-in #moduleHubView .main-module-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/*
  Surgical Cleanup UI Stability v1
  Final containment layer for all post-login windows. This intentionally lives
  after old rules so page-specific legacy sizing cannot force overlap.
*/
body.logged-in .view.active {
  min-width: 0 !important;
  max-width: 100vw !important;
  min-height: 0 !important;
}

body.logged-in :where(.view-panel, .module-panel, .panel-card, .control-card, .metric-card, .dashboard-card, .asset-manager-shell, .response-module-shell) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.logged-in :where(.view-panel, .module-panel, .panel-card, .control-card, .dashboard-card) {
  position: relative !important;
  overflow: hidden !important;
}

body.logged-in :where(.view-panel, .module-panel, .panel-card, .control-card, .dashboard-card) > :where(.scroll-body, .panel-scroll, .module-scroll, .table-scroll, .registry-scroll) {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in :where(.filter-grid, .form-grid, .action-grid, .control-grid, .metric-grid, .stats-grid, .module-button-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
  gap: var(--space-3, 12px) !important;
  align-items: end !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.logged-in :where(.action-row, .button-row, .form-actions, .panel-actions, .toolbar, .map-toolbar) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-2, 8px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.logged-in :where(button, .btn, .button-link, .nav-pill, .drawer-tab, .module-button, .sidebar-button) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.18 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.logged-in :where(input, select, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.logged-in :where(table, .data-table) {
  width: 100% !important;
  table-layout: fixed !important;
}

body.logged-in :where(th, td) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: top !important;
}

body.logged-in :where(.table-wrapper, .data-table-wrapper, .register-table-wrapper) {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.logged-in :where(.modal, .modal-card, .dialog, .popup-panel, .system-notice, .overlay-card) {
  width: min(92vw, 860px) !important;
  max-width: 92vw !important;
  max-height: min(86dvh, 760px) !important;
  overflow: hidden !important;
}

body.logged-in :where(.modal-body, .dialog-body, .popup-body, .overlay-body) {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in :where(.response-module-sidebar, .asset-manager-sidebar, .module-side-nav) {
  overflow-x: hidden !important;
}

body.logged-in :where(.response-module-sidebar button, .asset-manager-sidebar button, .module-side-nav button) {
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  min-height: 40px !important;
  height: auto !important;
}

body.logged-in #assetManagerView.asset-command-map-active {
  position: fixed !important;
  top: var(--app-header-height, 58px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100dvh - var(--app-header-height, 58px)) !important;
  max-width: 100vw !important;
  max-height: calc(100dvh - var(--app-header-height, 58px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.logged-in #assetManagerView.asset-command-map-active :where(.view-banner, .module-heading, .asset-summary, .asset-manager-sidebar) {
  display: none !important;
}

body.logged-in #assetManagerView.asset-command-map-active :where(.asset-manager-shell, .asset-manager-content, .asset-map-panel, .asset-map-stage, #assetCommandMap, .maplibregl-map) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/*
  Layout Lock V2
  Single final layout authority. This block intentionally overrides the older
  fixed/absolute/scroll rules still present in legacy CSS so active windows use
  one containment model: fixed header, one scroll owner, no clipped panels.
*/
:root {
  --layout-lock-version: "20260722-v2";
  --shell-pad: clamp(10px, 1.2vw, 16px);
  --module-sidebar-width: clamp(184px, 16vw, 236px);
  --module-gap: clamp(10px, 1vw, 16px);
}

html,
body {
  overflow: hidden !important;
}

body.logged-in #appShell,
body.logged-in #viewHost,
body.logged-in .app-shell {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.logged-in #appShell > main {
  position: relative !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: calc(100dvh - var(--app-header-height, 58px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  contain: none !important;
}

body.logged-in #appShell > main > .view {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: var(--shell-pad) !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.logged-in #appShell > main > .view.active {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--module-gap) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

body.logged-in #appShell > main > .view.active > :where(.module-bar, .portal-return-bar) {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 34px !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.logged-in #appShell > main > .view.active > :not(.module-bar):not(.portal-return-bar) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
}

body.logged-in :where(
  .view-panel,
  .module-panel,
  .panel-card,
  .control-card,
  .dashboard-card,
  .workbench,
  .portal-management-window,
  .response-module-shell,
  .asset-manager-shell,
  .planning-workbench,
  .audit-dashboard-shell,
  .calendar-shell,
  .portfolio-shell,
  .developer-window-shell
) {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.logged-in #moduleHubView.view.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in #moduleHubView .main-module-grid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
}

body.logged-in #moduleHubView .main-module-card {
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(210px, 32dvh, 310px) !important;
  height: auto !important;
}

body.logged-in :where(#operationsDailyView.view.active .response-module-shell, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-shell) {
  display: grid !important;
  grid-template-columns: var(--module-sidebar-width) minmax(0, 1fr) !important;
  gap: var(--module-gap) !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
}

body.logged-in :where(#operationsDailyView.view.active .response-module-sidebar, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-sidebar) {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: var(--module-sidebar-width) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-right: 6px solid var(--color-red, #e31b23) !important;
  border-radius: 10px 0 0 10px !important;
}

body.logged-in :where(#operationsDailyView.view.active .response-main, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-main) {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: clamp(4px, 0.5vw, 8px) !important;
}

body.logged-in :where(#operationsDailyView .response-module-sidebar button, #assetManagerView:not(.asset-command-map-active) .asset-manager-sidebar button) {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 9px 12px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
}

body.logged-in :where(#operationsDailyView .response-module-sidebar button span:not(.response-nav-icon), #assetManagerView:not(.asset-command-map-active) .asset-manager-sidebar button span:last-child) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.logged-in #operationsDailyView :where(.response-window-panel, .daily-actions-workspace, .daily-actions-board, .daily-actions-table, .record-detail-panel),
body.logged-in #profileView :where(.workbench, .profile-register-panel, .profile-entry-card, .assigned-accounts-panel),
body.logged-in #planningView :where(.planning-workbench, .planning-dashboard, .planning-panel),
body.logged-in #auditDashboardView :where(.audit-dashboard-shell, .audit-dashboard-workbench, .audit-panel, .audit-grid) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.logged-in #operationsDailyView :where(.response-filter-grid, .daily-action-filter-grid, .filter-grid, .form-grid),
body.logged-in #planningView :where(.filter-grid, .form-grid),
body.logged-in #auditDashboardView :where(.filter-grid, .audit-window-grid, .metric-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
}

body.logged-in :where(.table-wrapper, .data-table-wrapper, .register-table-wrapper, .live-register, .profile-list, .registry-scroll) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

body.logged-in :where(button, .btn, .menu-button, .module-button, .main-module-card, .drawer-tab, .nav-pill) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.logged-in :where(button, .btn, .menu-button, .module-button, .drawer-tab, .nav-pill) :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

body.logged-in :where(.system-notice, .modal-card, .dialog, .popup-panel, .overlay-card) {
  width: min(720px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - var(--app-header-height, 58px) - 32px) !important;
  overflow: hidden !important;
}

body.logged-in :where(.system-notice) {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.logged-in :where(.modal-body, .dialog-body, .popup-body, .overlay-body, .system-notice-body) {
  max-height: calc(100dvh - var(--app-header-height, 58px) - 160px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in.asset-command-map-active #appShell > main {
  position: fixed !important;
  top: var(--app-header-height, 58px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: auto !important;
  max-width: none !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active {
  position: fixed !important;
  inset: var(--app-header-height, 58px) 0 0 0 !important;
  display: block !important;
  width: 100vw !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active > :not(.asset-manager-shell),
body.logged-in.asset-command-map-active #assetManagerView.view.active :where(.asset-manager-sidebar, .asset-map-title, .asset-dashboard-grid, .asset-starter-card, .asset-safety-note) {
  display: none !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active :where(
  .asset-manager-shell,
  .asset-manager-content,
  .asset-manager-main,
  .asset-manager-tab[data-asset-panel="dashboard"].active,
  .asset-map-panel,
  .asset-map-first-workspace,
  .asset-map-main-panel,
  #assetMapBoard,
  .asset-map-canvas,
  .asset-maplibre-shell,
  .asset-maplibre-map,
  .maplibregl-map,
  .maplibregl-canvas-container,
  .maplibregl-canvas
) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-live-controls-toggle {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 30 !important;
  width: auto !important;
  min-width: 124px !important;
  max-width: 180px !important;
}

body.logged-in.asset-command-map-active #assetManagerView.asset-controls-open .asset-live-controls-toggle {
  display: none !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-live-controls {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  z-index: 40 !important;
  width: min(360px, 92vw) !important;
  max-width: min(360px, 92vw) !important;
  height: 100% !important;
  max-height: none !important;
  transform: translateX(-102%) !important;
  overflow: hidden !important;
  border-radius: 0 14px 14px 0 !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-live-controls.open {
  transform: translateX(0) !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .geo-map-controls__body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.logged-in.asset-command-map-active #assetManagerView.view.active .asset-live-controls :where(button, select, input, label, .asset-live-controls-section, .asset-map-command-kpi, .asset-map-selected-detail, .asset-boundary-list-shell, .asset-boundary-list) {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 980px) {
  body.logged-in :where(#operationsDailyView.view.active .response-module-shell, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-shell) {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important;
  }

  body.logged-in #moduleHubView .main-module-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.logged-in #appShell > main > .view {
    padding: 8px !important;
  }

  body.logged-in :where(#operationsDailyView.view.active .response-module-shell, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-shell) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.logged-in :where(#operationsDailyView.view.active .response-module-sidebar, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-sidebar) {
    grid-column: 1 !important;
    display: flex !important;
    max-width: none !important;
    height: auto !important;
    max-height: 180px !important;
    overflow: auto !important;
    border-right: 0 !important;
    border-bottom: 5px solid var(--color-red, #e31b23) !important;
    border-radius: 10px 10px 0 0 !important;
  }

  body.logged-in :where(#operationsDailyView.view.active .response-main, #assetManagerView.view.active:not(.asset-command-map-active) .asset-manager-main) {
    grid-column: 1 !important;
  }

  body.logged-in #moduleHubView .main-module-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}

/* === Popup / Form Containment Lock V2 =======================================
   Keeps all active data-entry forms readable and inside the viewport. This is
   intentionally loaded last to neutralize legacy form sizing rules. */
body.login-active {
  overflow: auto !important;
}

body.logged-in.modal-form-open #appShell > main {
  overflow: hidden !important;
}

body.logged-in .profile-entry-popup:not(.hidden),
body.logged-in .daily-activity-entry-popup:not(.hidden),
body.logged-in .operations-entry-form:not(.hidden),
body.logged-in .action-time-retrieval-panel:not(.hidden) {
  position: fixed !important;
  inset: calc(var(--header-height, 58px) + 18px) max(18px, 4vw) 18px max(18px, 4vw) !important;
  z-index: 1200 !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  padding: 18px !important;
  transform: none !important;
  translate: none !important;
  background: rgba(12, 16, 20, .98) !important;
  border: 1px solid rgba(227, 27, 35, .72) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58) !important;
}

body.logged-in .profile-entry-popup:not(.hidden) > *,
body.logged-in .daily-activity-entry-popup:not(.hidden) > *,
body.logged-in .operations-entry-form:not(.hidden) > *,
body.logged-in .action-time-retrieval-panel:not(.hidden) > * {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

body.logged-in .profile-entry-popup:not(.hidden) .form-grid,
body.logged-in .daily-activity-entry-popup:not(.hidden) .form-grid,
body.logged-in .operations-entry-form:not(.hidden) .form-grid,
body.logged-in .action-time-retrieval-panel:not(.hidden) .form-grid,
body.logged-in .profile-entry-popup:not(.hidden) .profile-form-grid,
body.logged-in .daily-activity-entry-popup:not(.hidden) .profile-form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 12px !important;
  overflow: auto !important;
  align-content: start !important;
}

body.logged-in .profile-entry-popup:not(.hidden) input,
body.logged-in .profile-entry-popup:not(.hidden) select,
body.logged-in .profile-entry-popup:not(.hidden) textarea,
body.logged-in .daily-activity-entry-popup:not(.hidden) input,
body.logged-in .daily-activity-entry-popup:not(.hidden) select,
body.logged-in .daily-activity-entry-popup:not(.hidden) textarea,
body.logged-in .operations-entry-form:not(.hidden) input,
body.logged-in .operations-entry-form:not(.hidden) select,
body.logged-in .operations-entry-form:not(.hidden) textarea,
body.logged-in .action-time-retrieval-panel:not(.hidden) input,
body.logged-in .action-time-retrieval-panel:not(.hidden) select,
body.logged-in .action-time-retrieval-panel:not(.hidden) textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.logged-in .profile-entry-popup:not(.hidden) .form-actions,
body.logged-in .daily-activity-entry-popup:not(.hidden) .form-actions,
body.logged-in .operations-entry-form:not(.hidden) .form-actions,
body.logged-in .action-time-retrieval-panel:not(.hidden) .form-actions {
  position: sticky !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-top: 12px !important;
  background: linear-gradient(180deg, rgba(12, 16, 20, .1), rgba(12, 16, 20, .98) 30%) !important;
  overflow: hidden !important;
}

body.logged-in .exam-popup:not(.hidden),
body.logged-in .popup-overlay:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 18px !important;
  background: rgba(0, 0, 0, .56) !important;
}

body.logged-in .exam-popup:not(.hidden) > *,
body.logged-in .popup-overlay:not(.hidden) > * {
  width: min(980px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - var(--header-height, 58px) - 36px) !important;
  overflow: auto !important;
  border-radius: 16px !important;
}

/* Final Data Surface Lock V3
   Highest-authority lock for active CRUD/forms. This neutralizes legacy centered
   modal rules and old page-specific widths that were pushing forms offscreen. */
body.logged-in #dailyActivityForm.daily-activity-entry-popup:not(.hidden),
body.logged-in #personProfileForm.profile-entry-popup:not(.hidden),
body.logged-in #recordForm.profile-entry-popup:not(.hidden),
body.logged-in #instructorForm.profile-entry-popup:not(.hidden),
body.logged-in #documentForm.profile-entry-popup:not(.hidden),
body.logged-in #planningDocumentForm.profile-entry-popup:not(.hidden),
body.logged-in #actionTimeRetrievalPanel.action-time-retrieval-panel:not(.hidden) {
  position: fixed !important;
  top: calc(var(--app-header-height, 58px) + 16px) !important;
  right: 24px !important;
  bottom: 18px !important;
  left: 24px !important;
  inset-inline: 24px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  translate: none !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 30050 !important;
}

body.logged-in #dailyActivityForm:not(.hidden) *,
body.logged-in #personProfileForm:not(.hidden) *,
body.logged-in #recordForm:not(.hidden) *,
body.logged-in #instructorForm:not(.hidden) *,
body.logged-in #documentForm:not(.hidden) *,
body.logged-in #planningDocumentForm:not(.hidden) *,
body.logged-in #actionTimeRetrievalPanel:not(.hidden) * {
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
  translate: none !important;
}

body.logged-in #dailyActivityForm:not(.hidden) :where(.panel-title, .section-title, .panel-actions, .inline-actions, .form-actions),
body.logged-in #personProfileForm:not(.hidden) :where(.panel-title, .section-title, .panel-actions, .inline-actions, .form-actions),
body.logged-in #recordForm:not(.hidden) :where(.panel-title, .section-title, .panel-actions, .inline-actions, .form-actions),
body.logged-in #instructorForm:not(.hidden) :where(.panel-title, .section-title, .panel-actions, .inline-actions, .form-actions),
body.logged-in #documentForm:not(.hidden) :where(.panel-title, .section-title, .panel-actions, .inline-actions, .form-actions),
body.logged-in #planningDocumentForm:not(.hidden) :where(.panel-title, .section-title, .panel-actions, .inline-actions, .form-actions),
body.logged-in #actionTimeRetrievalPanel:not(.hidden) :where(.panel-title, .section-title, .panel-actions, .inline-actions, .form-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  overflow: visible !important;
}

body.logged-in #dailyActivityForm:not(.hidden) :where(.field-row, .form-grid, .profile-form-grid, .training-form-grid),
body.logged-in #personProfileForm:not(.hidden) :where(.field-row, .form-grid, .profile-form-grid, .training-form-grid),
body.logged-in #recordForm:not(.hidden) :where(.field-row, .form-grid, .profile-form-grid, .training-form-grid),
body.logged-in #instructorForm:not(.hidden) :where(.field-row, .form-grid, .profile-form-grid, .training-form-grid),
body.logged-in #documentForm:not(.hidden) :where(.field-row, .form-grid, .profile-form-grid, .training-form-grid),
body.logged-in #planningDocumentForm:not(.hidden) :where(.field-row, .form-grid, .profile-form-grid, .training-form-grid),
body.logged-in #actionTimeRetrievalPanel:not(.hidden) :where(.field-row, .form-grid, .profile-form-grid, .training-form-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: visible !important;
  align-items: start !important;
}

body.logged-in #dailyActivityForm:not(.hidden) label,
body.logged-in #personProfileForm:not(.hidden) label,
body.logged-in #recordForm:not(.hidden) label,
body.logged-in #instructorForm:not(.hidden) label,
body.logged-in #documentForm:not(.hidden) label,
body.logged-in #planningDocumentForm:not(.hidden) label,
body.logged-in #actionTimeRetrievalPanel:not(.hidden) label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

body.logged-in #dailyActivityForm:not(.hidden) :where(input, select, textarea, button),
body.logged-in #personProfileForm:not(.hidden) :where(input, select, textarea, button),
body.logged-in #recordForm:not(.hidden) :where(input, select, textarea, button),
body.logged-in #instructorForm:not(.hidden) :where(input, select, textarea, button),
body.logged-in #documentForm:not(.hidden) :where(input, select, textarea, button),
body.logged-in #planningDocumentForm:not(.hidden) :where(input, select, textarea, button),
body.logged-in #actionTimeRetrievalPanel:not(.hidden) :where(input, select, textarea, button) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.logged-in #dailyActivityForm:not(.hidden) :where(input[type="checkbox"], input[type="radio"]),
body.logged-in #recordForm:not(.hidden) :where(input[type="checkbox"], input[type="radio"]),
body.logged-in #instructorForm:not(.hidden) :where(input[type="checkbox"], input[type="radio"]) {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
}

body.logged-in #dailyActivityForm:not(.hidden) :where(.checkbox-grid, .objectives-grid, .credential-grid, .specialization-grid),
body.logged-in #recordForm:not(.hidden) :where(.checkbox-grid, .objectives-grid, .credential-grid, .specialization-grid),
body.logged-in #instructorForm:not(.hidden) :where(.checkbox-grid, .objectives-grid, .credential-grid, .specialization-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 8px 12px !important;
  overflow: visible !important;
}

body.logged-in #dailyActivityForm:not(.hidden) :where(.checkbox-grid label, .objectives-grid label, .credential-grid label, .specialization-grid label),
body.logged-in #recordForm:not(.hidden) :where(.checkbox-grid label, .objectives-grid label, .credential-grid label, .specialization-grid label),
body.logged-in #instructorForm:not(.hidden) :where(.checkbox-grid label, .objectives-grid label, .credential-grid label, .specialization-grid label) {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
}

/* Final Data Surface Lock V4
   Last-mile override for legacy centered popup geometry and real checkbox-list
   classes used by the active forms. */
body.logged-in #dailyActivityForm.daily-activity-entry-popup:not(.hidden),
body.logged-in #personProfileForm.profile-entry-popup:not(.hidden),
body.logged-in #recordForm.profile-entry-popup:not(.hidden),
body.logged-in #instructorForm.profile-entry-popup:not(.hidden),
body.logged-in #documentForm.profile-entry-popup:not(.hidden),
body.logged-in #planningDocumentForm.profile-entry-popup:not(.hidden),
body.logged-in #actionTimeRetrievalPanel.action-time-retrieval-panel:not(.hidden) {
  left: 24px !important;
  right: auto !important;
  inset-inline: auto !important;
  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;
  box-sizing: border-box !important;
}

body.logged-in #personProfileForm:not(.hidden) .photo-attachment,
body.logged-in #instructorForm:not(.hidden) .photo-attachment {
  display: grid !important;
  grid-template-columns: minmax(112px, 180px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  overflow: visible !important;
}

body.logged-in #personProfileForm:not(.hidden) .photo-attachment > div,
body.logged-in #instructorForm:not(.hidden) .photo-attachment > div {
  min-width: 0 !important;
  width: 100% !important;
}

body.logged-in #personProfileForm:not(.hidden) .photo-preview,
body.logged-in #instructorForm:not(.hidden) .photo-preview {
  width: 100% !important;
  max-width: 180px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

body.logged-in #personProfileForm:not(.hidden) #clearProfilePhotoButton {
  margin-top: 8px !important;
}

body.logged-in #recordForm:not(.hidden) :where(.scenario-objective-checklist, .objective-category-box, .credential-checklist),
body.logged-in #personProfileForm:not(.hidden) :where(.credential-checklist),
body.logged-in #instructorForm:not(.hidden) :where(.credential-checklist) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 8px 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.logged-in #recordForm:not(.hidden) :where(.checkbox-line, .objective-checkbox, .scenario-objective-checklist label, .objective-category-box label, .credential-checklist label),
body.logged-in #personProfileForm:not(.hidden) :where(.checkbox-line, .credential-checklist label),
body.logged-in #instructorForm:not(.hidden) :where(.checkbox-line, .credential-checklist label) {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  overflow: visible !important;
}

body.logged-in #recordForm:not(.hidden) :where(fieldset, .scenario-objective-field),
body.logged-in #personProfileForm:not(.hidden) fieldset,
body.logged-in #instructorForm:not(.hidden) fieldset {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px) {
  body.logged-in #personProfileForm:not(.hidden) .photo-attachment,
  body.logged-in #instructorForm:not(.hidden) .photo-attachment {
    grid-template-columns: 1fr !important;
  }
}

/* Final Data Surface Lock V5
   ID-only rules to defeat legacy body/app-shell popup rules that still leak from
   the retired stylesheet. */
#dailyActivityForm.daily-activity-entry-popup:not(.hidden),
#personProfileForm.profile-entry-popup:not(.hidden),
#recordForm.profile-entry-popup:not(.hidden),
#instructorForm.profile-entry-popup:not(.hidden),
#documentForm.profile-entry-popup:not(.hidden),
#planningDocumentForm.profile-entry-popup:not(.hidden),
#actionTimeRetrievalPanel.profile-entry-popup:not(.hidden),
#actionTimeRetrievalPanel.action-time-retrieval-panel:not(.hidden) {
  position: fixed !important;
  top: calc(var(--header-height, 58px) + 16px) !important;
  right: 24px !important;
  bottom: 18px !important;
  left: 24px !important;
  inset: calc(var(--header-height, 58px) + 16px) 24px 18px 24px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 30080 !important;
}

#dailyActivityForm.daily-activity-entry-popup:not(.hidden) > button.primary[type="submit"],
#recordForm.profile-entry-popup:not(.hidden) > button.primary[type="submit"],
#planningDocumentForm.profile-entry-popup:not(.hidden) > button.primary[type="submit"] {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  box-shadow: none !important;
}

#dailyActivityForm.daily-activity-entry-popup:not(.hidden) .evidence-attachment-row,
#recordForm.profile-entry-popup:not(.hidden) .evidence-attachment-row,
#documentForm.profile-entry-popup:not(.hidden) .evidence-attachment-row,
#planningDocumentForm.profile-entry-popup:not(.hidden) .evidence-attachment-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) minmax(120px, 180px) !important;
  gap: 10px !important;
  align-items: center !important;
  overflow: visible !important;
}

#recordForm.profile-entry-popup:not(.hidden) .scenario-objective-field {
  display: grid !important;
  gap: 10px !important;
  grid-column: 1 / -1 !important;
  overflow: visible !important;
}

#recordForm.profile-entry-popup:not(.hidden) #trainingObjectiveChecklist {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 8px 12px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px !important;
  border: 1px solid rgba(166, 173, 184, .22) !important;
  border-radius: 12px !important;
}

#recordForm.profile-entry-popup:not(.hidden) .scenario-objective-footer {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

#recordForm.profile-entry-popup:not(.hidden) :where(input[type="checkbox"], input[type="radio"]),
#personProfileForm.profile-entry-popup:not(.hidden) :where(input[type="checkbox"], input[type="radio"]),
#instructorForm.profile-entry-popup:not(.hidden) :where(input[type="checkbox"], input[type="radio"]) {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
}

#planningDocumentForm.profile-entry-popup:not(.hidden) .form-grid:has(#planningLinkedScenarios) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  grid-column: 1 / -1 !important;
}

#planningDocumentForm.profile-entry-popup:not(.hidden) :where(#planningLinkedSops, #planningLinkedErps, #planningLinkedScenarios) {
  min-height: 112px !important;
}

#actionTimeRetrievalPanel.profile-entry-popup:not(.hidden) .panel-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px) !important;
  gap: 12px !important;
  align-items: center !important;
}

#actionTimeRetrievalPanel.profile-entry-popup:not(.hidden) .action-time-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: visible !important;
}

@media (max-width: 760px) {
  #dailyActivityForm.daily-activity-entry-popup:not(.hidden) .evidence-attachment-row,
  #recordForm.profile-entry-popup:not(.hidden) .evidence-attachment-row,
  #documentForm.profile-entry-popup:not(.hidden) .evidence-attachment-row,
  #planningDocumentForm.profile-entry-popup:not(.hidden) .evidence-attachment-row,
  #recordForm.profile-entry-popup:not(.hidden) .scenario-objective-footer,
  #actionTimeRetrievalPanel.profile-entry-popup:not(.hidden) .panel-title {
    grid-template-columns: 1fr !important;
  }
}

/* Final Data Surface Lock V6
   Highest-specificity shell selectors for old app-shell rules that were still
   winning computed geometry in Chrome. */
html body.logged-in #appShell:not(.hidden) #dailyActivityForm.daily-activity-entry-popup.operations-entry-form:not(.hidden),
html body.logged-in #appShell:not(.hidden) #personProfileForm.profile-entry-popup.profile-crud-form:not(.hidden),
html body.logged-in #appShell:not(.hidden) #recordForm.profile-entry-popup:not(.hidden),
html body.logged-in #appShell:not(.hidden) #instructorForm.profile-entry-popup:not(.hidden),
html body.logged-in #appShell:not(.hidden) #documentForm.profile-entry-popup:not(.hidden),
html body.logged-in #appShell:not(.hidden) #planningDocumentForm.profile-entry-popup:not(.hidden),
html body.logged-in #appShell:not(.hidden) #auditDashboardView #actionTimeRetrievalPanel.profile-entry-popup.action-time-retrieval-panel:not(.hidden) {
  position: fixed !important;
  top: 74px !important;
  right: 24px !important;
  bottom: 18px !important;
  left: 24px !important;
  inset: 74px 24px 18px 24px !important;
  width: calc(100vw - 48px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 48px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 30090 !important;
}

html body.logged-in #appShell:not(.hidden) #dailyActivityForm.daily-activity-entry-popup.operations-entry-form:not(.hidden) > button.primary[type="submit"],
html body.logged-in #appShell:not(.hidden) #recordForm.profile-entry-popup:not(.hidden) > button.primary[type="submit"],
html body.logged-in #appShell:not(.hidden) #planningDocumentForm.profile-entry-popup:not(.hidden) > button.primary[type="submit"] {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  transform: none !important;
  translate: none !important;
  z-index: auto !important;
}

html body.logged-in #appShell:not(.hidden) #auditDashboardView #actionTimeRetrievalPanel.profile-entry-popup.action-time-retrieval-panel:not(.hidden) .panel-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px) !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Final Data Surface Lock V7
   Planning linked-record selectors were the last measured overlap. Keep linked
   scenario controls and review date on separate, readable rows. */
html body.logged-in #appShell:not(.hidden) #planningDocumentForm.profile-entry-popup:not(.hidden) label:has(#planningLinkedScenarios),
html body.logged-in #appShell:not(.hidden) #planningDocumentForm.profile-entry-popup:not(.hidden) label:has(#planningDocumentExpiry) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body.logged-in #appShell:not(.hidden) #planningDocumentForm.profile-entry-popup:not(.hidden) #planningLinkedScenarios,
html body.logged-in #appShell:not(.hidden) #planningDocumentForm.profile-entry-popup:not(.hidden) #planningDocumentExpiry {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.logged-in #appShell:not(.hidden) #planningDocumentForm.profile-entry-popup:not(.hidden) .planning-operational-fields {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Final Data Surface Lock V8
   Direct ID authority for popup forms. Some legacy runtime states render these
   forms outside the #appShell selector path, so this prevents old centered
   modal geometry from winning again. */
html body.logged-in #dailyActivityForm:not(.hidden),
html body.logged-in #personProfileForm:not(.hidden),
html body.logged-in #recordForm:not(.hidden),
html body.logged-in #instructorForm:not(.hidden),
html body.logged-in #documentForm:not(.hidden),
html body.logged-in #planningDocumentForm:not(.hidden),
html body.logged-in #actionTimeRetrievalPanel:not(.hidden) {
  position: fixed !important;
  top: 74px !important;
  right: 24px !important;
  bottom: 18px !important;
  left: 24px !important;
  inset: 74px 24px 18px 24px !important;
  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  z-index: 30100 !important;
}

html body.logged-in #dailyActivityForm:not(.hidden) > .panel-title,
html body.logged-in #personProfileForm:not(.hidden) > .panel-title,
html body.logged-in #recordForm:not(.hidden) > .panel-title,
html body.logged-in #instructorForm:not(.hidden) > .panel-title,
html body.logged-in #documentForm:not(.hidden) > .panel-title,
html body.logged-in #planningDocumentForm:not(.hidden) > .panel-title,
html body.logged-in #actionTimeRetrievalPanel:not(.hidden) > .panel-title {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.logged-in #dailyActivityForm:not(.hidden) > button.primary[type="submit"],
html body.logged-in #personProfileForm:not(.hidden) > button.primary[type="submit"],
html body.logged-in #recordForm:not(.hidden) > button.primary[type="submit"],
html body.logged-in #instructorForm:not(.hidden) > button.primary[type="submit"],
html body.logged-in #documentForm:not(.hidden) > button.primary[type="submit"],
html body.logged-in #planningDocumentForm:not(.hidden) > button.primary[type="submit"],
html body.logged-in #personProfileForm:not(.hidden) > .profile-form-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  transform: none !important;
  translate: none !important;
  z-index: auto !important;
}

html body.logged-in #dailyActivityForm:not(.hidden) .field-row,
html body.logged-in #dailyActivityForm:not(.hidden) .form-grid,
html body.logged-in #personProfileForm:not(.hidden) .field-row,
html body.logged-in #personProfileForm:not(.hidden) .form-grid,
html body.logged-in #personProfileForm:not(.hidden) .profile-form-grid,
html body.logged-in #recordForm:not(.hidden) .field-row,
html body.logged-in #recordForm:not(.hidden) .form-grid,
html body.logged-in #instructorForm:not(.hidden) .field-row,
html body.logged-in #instructorForm:not(.hidden) .form-grid,
html body.logged-in #documentForm:not(.hidden) .field-row,
html body.logged-in #documentForm:not(.hidden) .form-grid,
html body.logged-in #planningDocumentForm:not(.hidden) .field-row,
html body.logged-in #planningDocumentForm:not(.hidden) .form-grid,
html body.logged-in #actionTimeRetrievalPanel:not(.hidden) .action-time-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Final Data Surface Lock V9
   The Planning operational fieldset is legacy grid content inside a fixed
   popup. Reserve clearance for the second linked-record row so the next
   review date cannot rise under it. */
html body.logged-in #planningDocumentForm:not(.hidden) .planning-operational-fields {
  margin-bottom: 136px !important;
  padding-bottom: 18px !important;
  max-width: calc(100% - 4px) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.logged-in #planningDocumentForm:not(.hidden) .planning-operational-fields .form-grid:has(#planningLinkedScenarios) {
  min-height: 274px !important;
  align-items: start !important;
  overflow: visible !important;
}

html body.logged-in #planningDocumentForm:not(.hidden) > * {
  max-width: calc(100% - 4px) !important;
  box-sizing: border-box !important;
}

html body.logged-in #personProfileForm.profile-entry-popup:not(.hidden)::before,
html body.logged-in #recordForm.profile-entry-popup:not(.hidden)::before,
html body.logged-in #instructorForm.profile-entry-popup:not(.hidden)::before,
html body.logged-in #documentForm.profile-entry-popup:not(.hidden)::before,
html body.logged-in #planningDocumentForm.profile-entry-popup:not(.hidden)::before,
html body.logged-in #actionTimeRetrievalPanel.profile-entry-popup:not(.hidden)::before {
  content: none !important;
  display: none !important;
}