/**
 * Portal mobile layout fixes only (max-width: 900px and 640px).
 * Desktop at 901px+ is unchanged.
 */

@media (max-width: 900px) {
  /* Wrapped global header (logo + portal actions + Home/Vacancies/Documents row) */
  body.has-fs-global-header {
    --fs-global-header-h: 188px;
    --fs-sea-mobile-bar-h: 52px;
  }

  body.fs-portal-shell {
    overflow-x: clip;
  }

  html:has(body.fs-portal-shell) {
    overflow-x: clip;
  }

  /* Stack main only — sidebar is a fixed drawer, never in document flow below content */
  body.fs-portal-shell .fs-sea-app {
    display: block !important;
    min-width: 0;
    min-height: 0 !important;
  }

  #fs-company-sidebar-mount,
  #fs-sea-sidebar-mount {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  body.fs-portal-shell .fs-sea-sidebar,
  body.fs-portal-shell #fsCompanySidebar,
  body.fs-portal-shell #fsSeaSidebar {
    position: fixed !important;
    top: var(--fs-mobile-drawer-top, 200px) !important;
    left: 0;
    bottom: 0;
    height: auto !important;
    flex: none !important;
    width: min(288px, 88vw) !important;
    max-width: 100%;
    max-height: calc(100dvh - var(--fs-mobile-drawer-top, 200px)) !important;
    margin: 0 !important;
    padding: 12px 12px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    transform: translateX(-105%);
    z-index: 95;
  }

  body.fs-portal-shell.fs-sea-nav-open .fs-sea-sidebar,
  body.fs-portal-shell.fs-sea-nav-open #fsCompanySidebar,
  body.fs-portal-shell.fs-sea-nav-open #fsSeaSidebar {
    transform: translateX(0);
  }

  body.fs-portal-shell.fs-sea-nav-open .fs-sea-mobile-bar {
    visibility: hidden;
    pointer-events: none;
  }

  body.fs-portal-shell.fs-sea-nav-open .fs-global-main-nav {
    visibility: hidden;
    pointer-events: none;
  }

  body.fs-portal-shell .fs-sea-nav-toggle {
    min-height: 44px;
    touch-action: manipulation;
  }

  body.fs-portal-shell .fs-sea-nav-link {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.fs-portal-shell .fs-sea-sidebar-logout {
    min-height: 44px;
  }

  body.fs-portal-shell .fs-sea-main {
    overflow-x: clip;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Page shells — full width inside drawer layout */
  body.fs-portal-shell .fs-dash-page-wrap,
  body.fs-portal-shell .fs-doc-page-wrap,
  body.fs-portal-shell .fs-my-apps-page-wrap,
  body.fs-portal-shell .fs-my-avail-page-wrap,
  body.fs-portal-shell .fs-account-page-wrap,
  body.fs-portal-shell .fs-company-page-wrap,
  body.fs-portal-shell .fs-sea-main > .fs-sailor-browse,
  body.fs-portal-shell .fs-vacancies-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  body.fs-portal-shell .fs-dash-page-wrap,
  body.fs-portal-shell .fs-doc-page-wrap,
  body.fs-portal-shell .fs-my-apps-page-wrap,
  body.fs-portal-shell .fs-my-avail-page-wrap,
  body.fs-portal-shell .fs-account-page-wrap,
  body.fs-portal-shell .fs-company-page-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.fs-seaman-vacancies .fs-vacancies-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.fs-seaman-vacancies .fs-vacancies-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Notification panel — drops out of the header on phones, never a bottom sheet */
  body.fs-portal-shell .fs-global-portal-slot .fs-notification-wrap {
    position: static;
  }

  body.fs-portal-shell .fs-notification-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 10px;
    right: 10px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: min(60vh, 460px);
    z-index: 500;
  }

  /* Summary stat cards — single column on narrow portal */
  body.fs-portal-shell .fs-doc-stats-row,
  body.fs-portal-shell .fs-my-apps-stats,
  body.fs-my-availability .fs-my-apps-stats,
  body.fs-company-portal .fs-co-stats {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard — shorter hero on phones (avoids huge empty band above cards) */
  body.fs-seaman-dashboard .fs-sea-main .fs-sailor-hero,
  body.fs-seaman-dashboard .fs-sea-main .fs-sailor-hero-inner {
    min-height: 0;
  }

  body.fs-seaman-dashboard .fs-sea-main .fs-sailor-hero-inner {
    max-width: 100%;
  }

  body.fs-company-portal .fs-co-hero,
  body.fs-company-portal .fs-co-hero-inner {
    min-height: 0;
  }

  body.fs-company-portal .fs-co-hero-inner {
    max-width: 100%;
  }

  /* Dashboard */
  body.fs-portal-shell .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  body.fs-portal-shell .fs-dash-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.fs-seaman-dashboard .fs-dash-donut-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  body.fs-seaman-dashboard .fs-dash-donut-legend {
    width: 100%;
  }

  /* Two-column page layouts */
  body.fs-portal-shell .fs-doc-layout,
  body.fs-portal-shell .fs-my-apps-layout,
  body.fs-my-availability .fs-my-avail-layout {
    grid-template-columns: 1fr !important;
  }

  body.fs-portal-shell .fs-doc-sidebar {
    order: 2;
  }

  body.fs-portal-shell .fs-doc-main-col {
    order: 1;
  }

  body.fs-portal-shell .fs-my-apps-detail-col {
    order: 2;
  }

  body.fs-portal-shell .fs-my-apps-list-col {
    order: 1;
  }

  /* Documents */
  body.fs-seaman-documents .fs-upload-row--documents {
    grid-template-columns: 1fr !important;
  }

  body.fs-seaman-documents .fs-doc-upload-limit-hint.fs-doc-upload-limit-hint--at-limit {
    max-width: 100%;
  }

  body.fs-seaman-documents .fs-doc-uploaded-head,
  body.fs-seaman-documents .fs-doc-toolbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.fs-seaman-documents .fs-doc-table-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.fs-seaman-documents #documentsTable .fs-table {
    min-width: 640px;
  }

  body.fs-seaman-documents #documentsStatus {
    margin-left: 14px;
    margin-right: 14px;
  }

  body.fs-seaman-documents .fs-doc-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  body.fs-seaman-documents .fs-doc-filter-pill {
    flex-shrink: 0;
  }

  body.fs-seaman-documents .fs-doc-apply-banner-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.fs-seaman-documents .fs-doc-apply-banner-actions .fs-doc-apply-btn {
    width: 100%;
  }

  /* Vacancies */
  /* The header tab already names this page; the huge h1 just makes the hero taller. */
  body.fs-seaman-vacancies .fs-vacancies-hero h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.fs-seaman-vacancies .fs-vacancies-hero,
  body.fs-seaman-vacancies .fs-vacancies-hero-inner {
    min-height: 0 !important;
  }

  body.fs-seaman-vacancies .fs-vacancies-hero-inner {
    padding: 16px 18px;
  }

  body.fs-seaman-vacancies .fs-vac-search-row {
    grid-template-columns: 1fr;
  }

  body.fs-seaman-vacancies .fs-vac-search-actions {
    width: 100%;
    justify-content: stretch;
  }

  body.fs-seaman-vacancies .fs-vac-search-actions .fs-vac-btn-search {
    flex: 1;
  }

  body.fs-seaman-vacancies .fs-vacancy-card-inner {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  body.fs-seaman-vacancies .fs-vac-card-side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
  }

  body.fs-seaman-vacancies .fs-vac-card-side-row {
    width: 100%;
    justify-content: space-between;
  }

  /* Vacancy detail */
  body.fs-sailor-dashboard .vacancy-detail-container {
    width: calc(100% - 24px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body.fs-sailor-dashboard .vacancy-detail-layout {
    grid-template-columns: 1fr !important;
  }

  body.fs-sailor-dashboard .vd-side-column {
    position: static;
  }

  body.fs-sailor-dashboard .vd-kv-grid {
    grid-template-columns: 1fr;
  }

  /* Applications */
  body.fs-my-applications .fs-my-apps-detail-dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body.fs-my-applications .fs-my-apps-panel-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.fs-my-applications .fs-my-apps-detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.fs-my-applications .fs-my-apps-detail-actions .fs-button,
  body.fs-my-applications .fs-my-apps-detail-actions a.fs-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Availability / hosted */
  body.fs-my-availability .fs-grid-2,
  body.fs-my-availability .fs-hosted-preview-grid {
    grid-template-columns: 1fr !important;
  }

  body.fs-my-availability .fs-my-apps-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  body.fs-my-availability .fs-hosted-editor .fs-dialog-actions,
  body.fs-my-availability .fs-hosted-preview .fs-dialog-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.fs-my-availability .fs-hosted-editor .fs-dialog-actions .fs-button,
  body.fs-my-availability .fs-hosted-preview .fs-dialog-actions .fs-button {
    width: 100%;
    justify-content: center;
  }

  /* Account */
  body.fs-seaman-account .fs-account-hero-inner {
    max-width: 100%;
  }

  body.fs-seaman-account .fs-account-password-grid {
    grid-template-columns: 1fr;
  }

  body.fs-seaman-account .fs-account-password-grid .fs-account-password-confirm {
    grid-column: auto;
  }

  body.fs-seaman-account .fs-account-panel__actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.fs-seaman-account .fs-account-panel__actions .fs-button {
    width: 100%;
    justify-content: center;
  }

  /* Company portal */
  body.fs-company-portal .fs-search-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  body.fs-company-portal .fs-search-bar .fs-button {
    width: 100%;
    justify-content: center;
  }

  body.fs-company-portal .fs-availability-grid {
    grid-template-columns: 1fr !important;
  }

  body.fs-company-portal .fs-side-rail {
    grid-column: auto;
    position: static;
  }

  body.fs-company-portal .fs-co-account-grid,
  body.fs-company-portal .fs-co-account-grid--identity,
  body.fs-company-portal .fs-co-account-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.fs-company-portal .fs-co-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  body.fs-company-portal .fs-co-panel-head .fs-button {
    width: 100%;
    justify-content: center;
  }

  body.fs-company-portal .fs-availability-table-wrap,
  body.fs-company-portal .fs-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.fs-company-portal .fs-subnav,
  body.fs-company-portal .fs-co-marketplace-dept-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  body.fs-company-portal .fs-subnav-btn,
  body.fs-company-portal .fs-co-dept-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Modals on portal pages */
  body.fs-portal-shell .fs-dialog {
    width: min(100vw - 24px, 560px);
    max-width: calc(100vw - 24px);
    max-height: min(92dvh, 92vh);
    margin: auto;
  }

  body.fs-portal-shell .fs-doc-dialog {
    width: min(100vw - 24px, 420px);
  }

  body.fs-portal-shell .fs-doc-dialog .fs-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  body.fs-portal-shell .fs-doc-dialog .fs-dialog-actions .fs-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  body.fs-portal-shell .fs-dash-stats.summary-grid,
  body.fs-portal-shell .summary-grid {
    grid-template-columns: 1fr !important;
  }

  body.fs-seaman-dashboard .fs-sea-main .fs-sailor-hero-inner,
  body.fs-seaman-documents .fs-doc-hero-inner,
  body.fs-my-applications .fs-my-apps-hero-inner,
  body.fs-my-availability .fs-my-apps-hero-inner,
  body.fs-seaman-account .fs-account-hero-inner {
    padding: 20px 16px;
  }

  body.fs-seaman-vacancies .fs-vacancies-hero {
    padding: 0;
    min-height: 0 !important;
  }

  body.fs-sailor-dashboard .vd-header-grid {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  body.fs-sailor-dashboard .vd-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.fs-sailor-dashboard .vd-header-actions .fs-button,
  body.fs-sailor-dashboard .vd-header-actions a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  body.fs-company-portal .fs-company-page-wrap {
    width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
  }

  body.fs-company-portal .fs-co-hero-inner {
    padding: 16px 14px;
  }

  body.fs-company-portal .fs-co-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  body.fs-portal-shell .fs-global-portal-slot .fs-button,
  body.fs-portal-shell .fs-notification-bell {
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  body.has-fs-global-header {
    --fs-global-header-h: 204px;
    --fs-sea-mobile-bar-h: 52px;
  }
}