/* App shell, workspace scrolling, modal scroll-lock, and mobile viewport contracts. Loaded after styles.css to keep layout overrides centralized. */
html:has(body:not(.auth-locked)) {
  height: var(--visual-viewport-height, 100dvh);
  max-height: var(--visual-viewport-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}
body:not(.auth-locked) {
  height: var(--visual-viewport-height, 100dvh);
  max-height: var(--visual-viewport-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}
body:not(.auth-locked) .app-shell {
  height: var(--visual-viewport-height, 100dvh);
  max-height: var(--visual-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}
body:not(.auth-locked) .workspace-shell {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
body:not(.auth-locked) .workspace-nav {
  max-height: 100%;
  min-height: 0;
}
body:not(.auth-locked) .workspace-scroll-area {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-active-view="overview"]:not(.auth-locked) .workspace-scroll-area {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body[data-active-view="overview"]:not(.auth-locked).modal-open .workspace-scroll-area,
body[data-active-view="overview"]:not(.auth-locked).work-order-detail-open .workspace-scroll-area,
body[data-active-view="overview"]:not(.auth-locked).health-factor-detail-open .workspace-scroll-area,
body[data-active-view="overview"]:not(.auth-locked).work-order-queue-open .workspace-scroll-area {
  overflow: hidden;
  overscroll-behavior: none;
}
body:not(.auth-locked) .workspace,
body:not(.auth-locked) .content-area {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
body[data-active-view="overview"]:not(.auth-locked) .workspace,
body[data-active-view="overview"]:not(.auth-locked) .content-area {
  height: auto;
  min-height: 0;
  overflow: visible;
}
body:not(.auth-locked) .content-area {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
body:not(.auth-locked) .workspace-global-header {
  position: sticky;
  top: 0;
  z-index: 90;
  flex: 0 0 auto;
  backdrop-filter: blur(22px) saturate(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
}
body[data-active-view]:not(.auth-locked) .workspace-global-header {
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
  background:
    linear-gradient(180deg, rgba(246, 249, 251, 0.96), rgba(246, 249, 251, 0.86) 72%, rgba(246, 249, 251, 0.68));
}
body:not(.auth-locked) .view-stack {
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--app-shell-scroll-padding-top, 18px);
  scroll-padding-bottom: var(--app-shell-scroll-padding-bottom, calc(28px + var(--safe-area-bottom, 0px)));
}
body:not(.auth-locked) .view-panel.active {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--app-shell-scroll-padding-top, 18px);
  scroll-padding-bottom: var(--app-shell-scroll-padding-bottom, calc(28px + var(--safe-area-bottom, 0px)));
}
body[data-active-view="overview"]:not(.auth-locked) .view-stack,
body[data-active-view="overview"]:not(.auth-locked) .view-panel.active {
  height: auto;
  min-height: 0;
  overflow: visible;
}
body[data-active-view="work-orders"]:not(.auth-locked):not(.work-order-queue-open):not(.work-order-detail-open) .view-panel.active,
body[data-active-view="reports"]:not(.auth-locked):not(.modal-open) .view-panel.active {
  overflow-y: auto;
  padding-bottom: var(--app-shell-long-view-padding-bottom, calc(72px + var(--safe-area-bottom, 0px)));
}
body:not(.auth-locked).modal-open .view-stack,
body:not(.auth-locked).modal-open .view-panel.active,
body:not(.auth-locked).work-order-detail-open .view-stack,
body:not(.auth-locked).work-order-detail-open .view-panel.active,
body:not(.auth-locked).health-factor-detail-open .view-stack,
body:not(.auth-locked).health-factor-detail-open .view-panel.active,
body:not(.auth-locked).work-order-queue-open .view-stack {
  overflow: hidden;
  overscroll-behavior: none;
}
body:not(.auth-locked).work-order-queue-open .view-panel.active {
  overflow: hidden;
  overscroll-behavior: none;
}
@media (min-width: 761px) {
  body:not(.auth-locked) .workspace-nav {
    height: 100%;
    max-height: var(--visual-viewport-height, 100dvh);
    overflow: hidden;
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) {
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
  }
  body:not(.auth-locked) .app-shell,
  body:not(.auth-locked) .workspace-shell {
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
  }
  body:not(.auth-locked) .workspace-nav {
    position: relative;
    z-index: 120;
    grid-row: 1;
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
  body:not(.auth-locked) .workspace-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  body:not(.auth-locked) .workspace-scroll-area {
    grid-row: 2;
  }
  body:not(.auth-locked) .view-stack,
  body:not(.auth-locked) .view-panel.active {
    scroll-padding-bottom: var(--app-shell-mobile-scroll-padding-bottom, calc(124px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px)));
  }
}
body:not(.auth-locked) {
  --app-content-edge-padding: var(--app-content-edge-padding-desktop, 24px);
}
body[data-active-view]:not(.auth-locked) .workspace-scroll-area,
body:not(.auth-locked) .workspace-scroll-area {
  padding: var(--app-content-edge-padding);
}
body[data-active-view]:not(.auth-locked) :is(
  .workspace,
  .content-area,
  .view-stack,
  .view-panel,
  .view-panel.active
),
body:not(.auth-locked) :is(
  .workspace,
  .content-area,
  .view-stack,
  .view-panel,
  .view-panel.active
) {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  justify-self: stretch;
  box-sizing: border-box;
}
body[data-active-view]:not(.auth-locked) :is(
  #overview-panel,
  .overview-command-center,
  .overview-command-summary,
  .section-block,
  .app-screen,
  .work-orders-section,
  .vessel-section,
  .maintenance-section,
  .crew-section,
  .vendors-section,
  .inventory-section,
  .expenses-section,
  .weekly-report-section,
  [data-view-panel="voyage"],
  .maintenance-surface,
  .vessel-profile-hero,
  .vessel-selector-shell,
  .vessel-tools-preview-panel,
  .work-order-command-preview,
  .work-order-preview-shell,
  .report-overview-card,
  .report-list-shell,
  .report-archive-panel,
  .vendor-toolbar,
  .vendor-directory-list,
  .inventory-directory-list,
  .expense-log-shell,
  .voyage-list,
  .alert-feed
),
body:not(.auth-locked) :is(
  #overview-panel,
  .overview-command-center,
  .overview-command-summary,
  .section-block,
  .app-screen,
  .work-orders-section,
  .vessel-section,
  .maintenance-section,
  .crew-section,
  .vendors-section,
  .inventory-section,
  .expenses-section,
  .weekly-report-section,
  [data-view-panel="voyage"],
  .maintenance-surface,
  .vessel-profile-hero,
  .vessel-selector-shell,
  .vessel-tools-preview-panel,
  .work-order-command-preview,
  .work-order-preview-shell,
  .report-overview-card,
  .report-list-shell,
  .report-archive-panel,
  .vendor-toolbar,
  .vendor-directory-list,
  .inventory-directory-list,
  .expense-log-shell,
  .voyage-list,
  .alert-feed
) {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  justify-self: stretch;
  box-sizing: border-box;
}
body[data-active-view]:not(.auth-locked) :is(
  .overview-command-summary-grid,
  .overview-command-metrics,
  .overview-command-panels,
  .vessel-glance-grid,
  .vessel-details-grid,
  .vessel-service-grid,
  .machinery-card-grid,
  .system-meta-grid,
  .work-order-summary-grid,
  .work-order-command-grid,
  .maintenance-section-stats,
  .maintenance-section-card-grid,
  .expense-metric-grid,
  .expense-insight-grid,
  .expense-log-grid,
  .inventory-directory-metrics,
  .report-library-meta
) {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
@media (min-width: 761px) {
  body[data-active-view="overview"]:not(.auth-locked) {
    --app-content-edge-padding: 0px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-scroll-area {
    padding: 0;
    scroll-padding-bottom: 0;
    background: #ffffff;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace,
  body[data-active-view="overview"]:not(.auth-locked) .content-area {
    height: 100%;
    min-height: 100%;
    overflow: visible;
  }
  body[data-active-view="overview"]:not(.auth-locked) .content-area {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-global-header {
    padding: clamp(12px, 1.05vw, 16px) clamp(14px, 1.2vw, 18px) clamp(8px, 0.7vw, 12px);
  }
  body[data-active-view="overview"]:not(.auth-locked) .view-stack {
    min-height: calc(var(--visual-viewport-height, 100dvh) - clamp(104px, 10vw, 132px));
    display: grid;
  }
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel {
    min-height: 100%;
    display: grid;
    padding: clamp(10px, 0.8vw, 14px) clamp(12px, 0.9vw, 16px) clamp(14px, 1vw, 18px);
    border: 1px solid rgba(13, 36, 56, 0.07);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 252, 0.94)),
      radial-gradient(circle at 13% 0%, rgba(30, 176, 188, 0.075), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-center {
    min-height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) {
    --app-content-edge-padding: 0px;
  }
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) .workspace-scroll-area {
    padding: 0 !important;
    scroll-padding-bottom: 0 !important;
    background: #ffffff;
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
  }
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) .workspace,
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) .content-area {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) .content-area {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) .workspace-global-header {
    padding: clamp(12px, 1.05vw, 16px) clamp(14px, 1.2vw, 18px) clamp(8px, 0.7vw, 12px);
  }
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) .view-stack {
    height: 100%;
    min-height: 0;
    display: grid;
    scrollbar-gutter: auto;
  }
  body:not(.auth-locked):is(
    [data-active-view="vessel"],
    [data-active-view="work-orders"],
    [data-active-view="maintenance"],
    [data-active-view="crew"],
    [data-active-view="reports"],
    [data-active-view="vendors"],
    [data-active-view="inventory"],
    [data-active-view="expenses"],
    [data-active-view="voyage"]
  ) .view-panel.active {
    min-height: 100%;
    padding: clamp(10px, 0.8vw, 14px) clamp(12px, 0.9vw, 16px) clamp(14px, 1vw, 18px);
    border: 1px solid rgba(13, 36, 56, 0.07);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 252, 0.94)),
      radial-gradient(circle at 13% 0%, rgba(30, 176, 188, 0.07), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
    scroll-padding-bottom: clamp(24px, 2vw, 34px);
    scrollbar-gutter: auto;
  }
}
@media (max-width: 1180px) {
  body:not(.auth-locked) {
    --app-content-edge-padding: var(--app-content-edge-padding-tablet, 20px);
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) {
    --app-content-edge-padding: var(--app-content-edge-padding-mobile, 16px);
  }
}
@media (max-width: 900px), (pointer: coarse) {
  html.modal-open,
  body:not(.auth-locked).modal-open,
  body:not(.auth-locked).work-order-queue-open,
  body:not(.auth-locked).work-order-detail-open,
  body:not(.auth-locked).health-factor-detail-open,
  body:not(.auth-locked).vessel-tools-drawer-open {
    height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    max-height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body:not(.auth-locked).modal-open .app-shell,
  body:not(.auth-locked).modal-open .workspace-scroll-area,
  body:not(.auth-locked).modal-open .view-stack,
  body:not(.auth-locked).modal-open .view-panel.active,
  body:not(.auth-locked).work-order-queue-open .app-shell,
  body:not(.auth-locked).work-order-queue-open .workspace-scroll-area,
  body:not(.auth-locked).work-order-queue-open .view-stack,
  body:not(.auth-locked).work-order-queue-open .view-panel.active,
  body:not(.auth-locked).work-order-detail-open .app-shell,
  body:not(.auth-locked).work-order-detail-open .workspace-scroll-area,
  body:not(.auth-locked).work-order-detail-open .view-stack,
  body:not(.auth-locked).work-order-detail-open .view-panel.active,
  body:not(.auth-locked).health-factor-detail-open .app-shell,
  body:not(.auth-locked).health-factor-detail-open .workspace-scroll-area,
  body:not(.auth-locked).health-factor-detail-open .view-stack,
  body:not(.auth-locked).health-factor-detail-open .view-panel.active,
  body:not(.auth-locked).vessel-tools-drawer-open .app-shell,
  body:not(.auth-locked).vessel-tools-drawer-open .workspace-scroll-area,
  body:not(.auth-locked).vessel-tools-drawer-open .view-stack,
  body:not(.auth-locked).vessel-tools-drawer-open .view-panel.active {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body:not(.auth-locked) :is(
    .work-order-queue-shell,
    .work-order-detail-shell,
    .health-factor-detail-shell,
    .report-preview-drawer-shell,
    .access-modal-shell,
    .mobile-shell-sheet,
    .vessel-tools-drawer-shell
  ) {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    max-height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: auto;
  }
  body:not(.auth-locked) :is(
    .work-order-detail-shell,
    .health-factor-detail-shell,
    .work-order-queue-shell,
    .report-preview-drawer-shell,
    .mobile-shell-sheet,
    .access-modal-shell
  ) {
    padding-top: var(--safe-area-top, 0px);
    padding-right: var(--safe-area-right, 0px);
    padding-bottom: var(--safe-area-bottom, 0px);
    padding-left: var(--safe-area-left, 0px);
  }
  body:not(.auth-locked) :is(
    .work-order-detail-shell,
    .health-factor-detail-shell,
    .mobile-shell-sheet,
    .access-modal-shell,
    .report-preview-drawer-shell
  ) {
    z-index: var(--z-modal, 1680);
  }
  body:not(.auth-locked) .work-order-queue-shell,
  body:not(.auth-locked) .vessel-tools-drawer-shell {
    z-index: var(--z-drawer, 1600);
  }
  body:not(.auth-locked) .work-order-detail-shell {
    z-index: var(--z-modal-priority, 1720);
  }
  body:not(.auth-locked) .health-factor-detail-shell {
    z-index: var(--z-health-factor-modal, 1710);
  }
  body:not(.auth-locked) :is(
    .work-order-detail-content,
    .work-order-detail-card,
    .health-factor-detail-content,
    .health-factor-detail-card
  ) {
    height: var(--modal-safe-panel-height, calc(var(--mobile-visual-height, var(--visual-viewport-height, 100dvh)) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)));
    max-height: var(--modal-safe-panel-height, calc(var(--mobile-visual-height, var(--visual-viewport-height, 100dvh)) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)));
    min-height: 0;
    overflow: hidden;
  }
  body:not(.auth-locked) :is(
    .mobile-shell-sheet-panel,
    .work-order-mobile-sheet-panel,
    .mobile-record-sheet-panel,
    .vessel-mobile-editor-sheet-panel,
    .work-order-queue-drawer,
    .vessel-tools-drawer,
    .report-preview-drawer,
    #access-modal .access-modal,
    .account-sheet,
    .billing-sheet,
    .vendor-modal,
    .inventory-modal,
    .crew-detail-modal,
    .crew-confirm-modal,
    .account-delete-confirm
  ) {
    min-height: 0;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
  body:not(.auth-locked) :is(
    .mobile-record-sheet-body,
    .mobile-sheet-scroll-body,
    .mobile-shell-sheet-list,
    .work-order-mobile-sheet-host,
    .vessel-mobile-editor-sheet-host,
    .work-order-detail-body,
    .health-factor-detail-body,
    .work-order-queue-list.report-list,
    .vessel-tools-drawer-list,
    .report-preview-drawer-list,
    .vendor-modal-body,
    .inventory-modal-body,
    .account-sheet-body,
    .billing-sheet-body,
    .access-modal-grid,
    .crew-detail-body
  ) {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: var(--modal-mobile-scroll-padding-top, calc(var(--safe-area-top, 0px) + 92px));
    scroll-padding-bottom: var(--modal-mobile-scroll-padding-bottom, calc(132px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px)));
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked).keyboard-open :is(
    .mobile-record-sheet-body,
    .mobile-sheet-scroll-body,
    .mobile-shell-sheet-list,
    .work-order-mobile-sheet-host,
    .vessel-mobile-editor-sheet-host,
    .work-order-detail-body,
    .health-factor-detail-body,
    .work-order-queue-list.report-list,
    .vessel-tools-drawer-list,
    .report-preview-drawer-list,
    .vendor-modal-body,
    .inventory-modal-body,
    .account-sheet-body,
    .billing-sheet-body,
    .access-modal-grid,
    .crew-detail-body
  ) {
    padding-bottom: var(--modal-mobile-keyboard-padding-bottom, calc(128px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px)));
  }
  body:not(.auth-locked) :is(
    .mobile-shell-sheet-header,
    .work-order-detail-header,
    .health-factor-detail-header,
    .work-order-queue-drawer-header,
    .report-preview-drawer-header,
    .vessel-tools-drawer-header,
    .access-modal-heading,
    .vendor-modal-heading,
    .inventory-modal-heading,
    .crew-detail-heading,
    .account-sheet-heading,
    .billing-sheet-heading
  ) {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 8;
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
  }
  body:not(.auth-locked) :is(
    .mobile-record-action-bar,
    .work-order-mobile-sheet-host .form-actions,
    .vessel-mobile-editor-sheet-host > form .form-actions,
    .work-order-detail-actions,
    .vendor-form .form-actions,
    .inventory-modal-form .form-actions,
    .vendor-detail-actions,
    .inventory-detail-actions
  ) {
    flex: 0 0 auto;
    bottom: var(--mobile-keyboard-inset, 0px);
    padding-bottom: var(--modal-mobile-sticky-action-bottom, calc(12px + var(--safe-area-bottom, 0px)));
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) .mobile-shell-sheet {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  body:not(.auth-locked) :is(
    .mobile-shell-sheet-panel,
    .work-order-mobile-sheet-panel,
    .mobile-record-sheet-panel,
    .vessel-mobile-editor-sheet-panel
  ) {
    width: var(--modal-mobile-panel-width, min(100%, 480px));
    max-width: var(--modal-mobile-max-width, calc(100vw - var(--safe-area-left, 0px) - var(--safe-area-right, 0px) - 12px));
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - 8px);
    display: flex;
    flex-direction: column;
    margin: auto auto 0;
    padding:
      16px
      16px
      calc(16px + var(--safe-area-bottom, 0px));
    border-radius: 28px 28px 0 0;
  }
  body:not(.auth-locked).keyboard-open :is(
    .mobile-shell-sheet-panel,
    .work-order-mobile-sheet-panel,
    .mobile-record-sheet-panel,
    .vessel-mobile-editor-sheet-panel
  ) {
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px));
    padding-bottom: calc(12px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) .work-order-queue-drawer {
    width: 100vw;
    height: var(--modal-safe-panel-height, calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)));
    max-height: var(--modal-safe-panel-height, calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)));
    grid-template-rows: auto auto auto minmax(0, 1fr);
    border-radius: 0;
    padding:
      max(14px, var(--safe-area-top, 0px))
      max(14px, var(--safe-area-right, 0px))
      max(14px, var(--safe-area-bottom, 0px))
      max(14px, var(--safe-area-left, 0px));
  }
  body:not(.auth-locked) .vessel-tools-drawer,
  body:not(.auth-locked) .report-preview-drawer,
  body:not(.auth-locked) #access-modal .access-modal,
  body:not(.auth-locked) :is(.account-sheet, .billing-sheet, .vendor-modal, .inventory-modal, .crew-detail-modal, .crew-confirm-modal) {
    width: var(--modal-mobile-panel-width, min(100%, 480px));
    max-width: var(--modal-mobile-max-width, calc(100vw - var(--safe-area-left, 0px) - var(--safe-area-right, 0px) - 12px));
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 8px);
  }
  body:not(.auth-locked) #access-modal .access-modal {
    width: calc(100vw - var(--safe-area-left, 0px) - var(--safe-area-right, 0px) - 12px);
    max-width: calc(100vw - var(--safe-area-left, 0px) - var(--safe-area-right, 0px) - 12px);
    height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 8px);
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 8px);
  }
  body:not(.auth-locked) #access-modal .access-modal-grid {
    padding-bottom: calc(120px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px));
  }
  body:not(.auth-locked) .report-preview-drawer {
    height: var(--modal-safe-panel-height, calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)));
    border-radius: 0;
  }
  body:not(.auth-locked) :is(.work-order-detail-body, .health-factor-detail-body) {
    padding-bottom: calc(28px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px));
  }
}