/*
 * Responsive and overlap fixes, linked after every page's own styles (src/server/runtime/ui_fixes.ts).
 * Found by checking every page for every user type at 1440, 1024, 768, 540 (Surface Duo), 390 (iPhone) and 360 px:
 * content past the screen edge, text drawn over other text, and text cut off by its box.
 * Node-owned file: the PHP app has none, so `npm run sync-assets` never overwrites it.
 */

/* ---------------------------------------------------------------- everywhere */
/* A dropdown never grows past its container because of one long option name (agency document filter at 360 px). */
select { max-width: 100%; }

/* ---------------------------------------------------------------- crew planning header (768–1439 px) */
/* The header is a two-column grid; with many action buttons the title column collapsed to 0 px and the title and
   subtitle ran underneath the buttons. Keep the title column readable and let the buttons wrap instead. */
@media (min-width: 761px) and (max-width: 1439px) {
  .cp-page--vessel-dashboard .cp-topbar { grid-template-columns: minmax(min(260px, 100%), 1fr) minmax(0, max-content); }
  .cp-page--vessel-dashboard .cp-topbar > div:first-child { min-width: 0; }
  .cp-page--vessel-dashboard .cp-top-actions { min-width: 0; justify-content: flex-end; }
}

/* ---------------------------------------------------------------- crew-change KPIs (1024 px and below) */
/* The filter row did not wrap, so "Apply" and "Crew planning" were squeezed to one letter per line. */
.cpk-controls { flex-wrap: wrap; }
.cpk-controls .cpk-btn { flex-shrink: 0; white-space: nowrap; }

/* ---------------------------------------------------------------- budget settings: add account code (≤1279 px) */
/* Four fixed columns (260 + 170 + 200 + button) were wider than the card; the button ran off its edge. */
@media (max-width: 1279px) {
  .bcs-add { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
  .bcs-add > .bcs-btn { justify-self: start; }
}

/* ---------------------------------------------------------------- port requirements table */
/* Long airport names ran into the crew-change badge: the cell keeps one line but now clips with an ellipsis. */
.col-airport { overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- document requirement matrix header (≤1279 px) */
/* The title block was only 235 px wide, so "Document Requirement Matrix" ran under the buttons. */
@media (max-width: 1279px) {
  .drm-matrix-page .drm-page-head-main { flex: 1 1 360px; min-width: 0; }
  .drm-matrix-page .drm-page-head h1 { white-space: normal; }
}

/* ---------------------------------------------------------------- payroll / portage bill toolbar */
/* The filter buttons and the period picker overlapped when the toolbar was full: let it wrap. */
/* (html … : the page adds its own nowrap rule after this file at run time.) */
.pb-toolbar, .pb-toolbar-filters,
html .portage-page .pb-toolbar, html .portage-page .pb-toolbar-filters { flex-wrap: wrap; }
.pb-toolbar-filters { min-width: 0; }

/* ---------------------------------------------------------------- captain: rest hours toolbar (≤1279 px) */
/* Three grid columns sized for the tabs left only 126 px for the vessel and month fields (they need ~430 px):
   the fields, the month note and "Approve all" were drawn on top of each other. */
@media (max-width: 1279px) {
  .rhb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .rhb-filters { flex-wrap: wrap; min-width: 0; }
}

/* ---------------------------------------------------------------- captain: onboard crew list (≤1279 px) */
/* 14 columns were squeezed into the screen width and the headings ran into each other: scroll the table instead. */
@media (max-width: 1279px) {
  .cl-table { min-width: 1180px; }
}

/* ---------------------------------------------------------------- crew profile (agency layout, ≤1023 px) */
/* The profile header bleeds 22 px into the page padding, but the agency layout has only 12 px: it stuck out
   past the screen edge on tablets. */
@media (max-width: 1023px) {
  .agency-manning-app .employee-profile-page .ep-hero,
  .agency-manning-app .employee-profile-page .ep-module-nav { margin-left: 0; margin-right: 0; width: 100%; }
}

/* ---------------------------------------------------------------- crew profile: documents, medical, appraisal (phones) */
@media (max-width: 767px) {
  /* Category tabs and the progress summary shared one row and overlapped: give each its own row. */
  .employee-profile-page .ep-drm-tabs__bar { flex-wrap: wrap; }
  .employee-profile-page .ep-drm-tabs__nav { flex: 1 1 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* The document table scrolls sideways (its wrapper already does) instead of squeezing file names into the
     next columns. */
  .employee-profile-page .ep-drm-table { min-width: 680px; }
  .employee-profile-page .ep-drm-file-link { overflow-wrap: anywhere; }
  /* Appraisal history table: scroll inside its card. */
  .ap-hist { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------- vessel operations legend (phones) */
@media (max-width: 599px) {
  .vo-legend-item { white-space: normal; }
}

/* ---------------------------------------------------------------- AI search guide keyword table (phones) */
@media (max-width: 767px) {
  .page-wrap .section > table.kw-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------- crew: data account credentials form (phones) */
/* Inline three-column grid (Account ID | New password | Save) is wider than a phone: one field per row. */
@media (max-width: 599px) {
  .crew-card > form[style*="grid-template-columns:1fr 1fr auto"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------------------------------------------------------------- agency pages (phones) */
@media (max-width: 767px) {
  /* Contract templates: long template file names wrap inside their cell. */
  .tpl-table td, .tpl-table .tpl-title, .tpl-table .tpl-sub { overflow-wrap: anywhere; }
  /* Manage users: the table was clipped by its wrapper (overflow hidden); scroll it instead. */
  .uus-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Submissions: table wider than its card. */
  .asub-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Interviews: the status filter pills wrap instead of running past the screen edge. */
  .iv-hero-actions { min-width: 0; max-width: 100%; }
  .iv-filters { flex-wrap: wrap; max-width: 100%; }
}

/* ---------------------------------------------------------------- crew: rest hours matrix (tablets and phones) */
/* Each half-hour slot is narrower than its bold letter (W / R / O): neighbouring letters ran into each other. */
@media (max-width: 1023px) {
  .rhm-slot { font-size: 10px; letter-spacing: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
}

/* ---------------------------------------------------------------- agency layout: floating menu button (≤860 px) */
/* The round menu button (bottom-left, 14 + 44 px) covered the last line of a page, e.g. the crew list's
   "1–20 of 34" counter: leave room under the content so it can scroll clear of the button. */
@media (max-width: 860px) {
  body.agency-manning-app.admin-layout-sidebar main.container-full,
  body.agency-manning-app.admin-layout-sidebar main.container:not(.container-full) { padding-bottom: 84px !important; }
}

/* ---------------------------------------------------------------- room for the floating buttons */
/* The assistant button (22 + 44 px) and the bug-report button stacked above it reach 122 px up from the bottom of
   the screen. ai-chat-ui.css left 110–160 px (16vh: 118 px on a 740 px phone) and some pages cut it to 10 px
   (crew list): the last row of a page — pagination, "Older ›", the last settings card — stayed under them. */
html body:has(#ai-widget) main.container,
html body:has(#ai-widget) main.container.container-full { padding-bottom: clamp(136px, 16vh, 170px) !important; }
/* LMS pages have only the bug-report button (66 px). */
html body.lms-app:has(.ibr-fab) main.lms-main { padding-bottom: 84px; }
/* Crew / captain portal (no assistant): the bug-report button (66 px) covered the last row or button, e.g.
   "Submit grievance", the last onboard-crew row. Phones keep the portal's own room for the bottom tab bar. */
@media (min-width: 768px) {
  html body.crew-app:has(.ibr-fab) main.container,
  html body.crew-app:has(.ibr-fab) #crew-dash-root > .crew-dash-main > main.container { padding-bottom: 84px !important; }
}
/* Crew social: the "new post" button (bottom-right, above the tab bar) and the bug-report button sat on top of
   each other. Lift the bug-report button above it and leave room for both under the last post. */
@media (max-width: 1023px) {
  html body:has(#cs-fab-btn) .ibr-fab { bottom: calc(var(--crew-tabbar-h, 62px) + env(safe-area-inset-bottom, 0px) + 80px) !important; }
  html body:has(#cs-fab-btn) main.container,
  html body:has(#cs-fab-btn) #crew-dash-root > .crew-dash-main > main.container { padding-bottom: 150px !important; }
}