/* Phone layout overrides. Loaded last so it wins over the other global sheets.
   The breakpoint matches MOBILE_QUERY in src/hooks/useIsMobile.js — keep in sync. */

@media (max-width: 959.95px) {
  /* iOS Safari zooms the page when focusing an input smaller than 16px */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Navbar
     ------------- */
  .navbar.navbar-mobile {
    height: 56px;
    padding: 0 8px;
  }

  .navbar-mobile .left-nav {
    flex: 1;
    justify-content: flex-start;
    gap: 4px;
    padding-left: 0;
  }

  .navbar-mobile .mobile-nav-toggle {
    order: 1;
    color: white;
  }

  /* style.css has a stray global `svg { color }` rule */
  .navbar-mobile .mobile-nav-toggle svg {
    color: inherit;
  }

  .navbar-mobile .logo-image {
    order: 2;
  }

  .navbar-mobile .logo-image img {
    height: 28px;
    width: auto;
  }

  .navbar-mobile .mobile-nav-actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .mobile-nav-drawer {
    width: 280px;
    max-width: 85vw;
  }

  .mobile-nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--primary-tufts-blue-tuftsblue-700);
    color: white;
    font-weight: 600;
  }

  .mobile-nav-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .mobile-nav-drawer a.active {
    background-color: var(--primary-tufts-blue-tuftsblue-50);
    color: var(--primary-tufts-blue-tuftsblue-700);
  }

  /* Dropdown menus (.menu-list) open as a bottom sheet instead of an
     absolutely positioned popover that runs off the screen edge
     ------------- */
  .menu-list.active {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 12px 12px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1250;
  }

  .menu-list li {
    min-height: 48px;
    padding: 14px 20px;
  }

  /* Trip header + toolbar
     ------------- */
  .new-header-sticky {
    position: static;
  }

  .new-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
  }

  .new-header .trip-title {
    justify-content: flex-start;
    width: 100%;
  }

  .new-header .trip-title p {
    margin: 0;
  }

  .trip-info {
    flex-basis: 100%;
  }

  .trip-info-nav-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 16px;
  }

  .trip-info-nav-button {
    min-height: 44px;
  }

  /* "Print" is a label with no action */
  .trip-info-nav-button.print,
  .trip-info-nav-actions-divider {
    display: none;
  }

  .trip-info-nav-actions .gauge-container {
    width: 40px;
    height: 40px;
  }

  .trip-actions {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  .trip-actions-block {
    flex: 1 1 140px;
  }

  /* Trip tabs: one horizontally scrolling row
     ------------- */
  .tabs {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  .tabs .buttons {
    gap: 4px;
    padding: 0 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs .buttons::-webkit-scrollbar {
    display: none;
  }

  .tabs .buttons button {
    flex-shrink: 0;
    scroll-snap-align: center;
    padding: 12px 8px 10px;
    font-size: 15px;
  }

  .tabs-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 8px 16px;
  }

  /* Page gutters
     ------------- */
  .main_content_wrapper {
    padding: 16px 8px;
  }

  .section-tables {
    margin: 16px 8px 0;
  }

  /* Itinerary tab toolbar (trips/tabItinerary.js): the shared MainStyles
     `title` class hides the Day/Region/Title pickers below 600px */
  .itinerary-toolbar {
    flex-wrap: wrap;
    gap: 4px 20px;
    padding: 4px 0 8px;
  }

  .itinerary-toolbar .itinerary-toolbar-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 100%;
    padding: 0 !important;
  }

  .itinerary-toolbar .itinerary-toolbar-field .MuiInputBase-root {
    flex: 1;
    max-width: none !important;
  }

  .itinerary-toolbar > svg {
    width: 26px;
    height: 26px;
  }

  /* Itinerary day list (trips/subs/schedule.js, ActivityCal listMode)
     ------------- */
  .itinerary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 16px;
  }

  .itinerary-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-left: 6px solid;
    cursor: pointer;
  }

  .itinerary-list-item.inactive {
    opacity: 0.7;
  }

  .itinerary-list-time {
    display: flex;
    justify-content: space-between;
    color: var(--neutrals-neutrals-700);
    font-size: 13px;
  }

  .itinerary-list-name {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .itinerary-list-option {
    font-size: 13px;
  }

  .itinerary-list-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--neutrals-neutrals-500);
  }

  .itinerary-list-actions img {
    height: 20px;
  }

  .itinerary-list-connector {
    margin-left: 16px;
    padding: 2px 8px;
    border-left: 3px dashed #a420f5;
    color: var(--neutrals-neutrals-700);
    font-size: 12px;
  }

  .itinerary-list-empty {
    padding: 16px;
    text-align: center;
    color: var(--neutrals-neutrals-700);
  }

  /* Operations tab sections (trips/tabOperations.js)
     ------------- */
  /* the section icon is absolutely positioned 68px past the label on desktop */
  .table-main-title img {
    position: static;
    height: 24px;
    width: auto;
  }

  .table-title-container {
    padding: 12px 12px 4px;
    margin: 8px 0 4px;
  }

  .table-title-container .table-title {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Filter / % completed / export bar (trips/subs/filter.js): wraps instead
     of a fixed 260px progress bar and 250px filter boxes in one row */
  .left-filter-container {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
  }

  .left-filter-container .transportation-actions-container {
    flex: 1 1 100%;
  }

  .left-filter-container .filter-container-label {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .left-filter-container .filter-actions {
    flex: 1 1 100%;
  }

  .left-filter-container .filter-inputs {
    flex-direction: column;
    padding: 0;
    gap: 8px;
  }

  .left-filter-container .filter-inputs .selectbox {
    width: 100%;
    box-sizing: border-box;
  }

  .left-filter-container .precent-completed {
    flex: 1 1 0;
    min-width: 0;
  }

  .left-filter-container .progressbar {
    width: 100%;
    box-sizing: border-box;
  }

  .trip-content {
    height: auto;
    padding-left: 16px;
    padding-top: 24px;
  }

  .summary_popup {
    min-width: 0;
    width: 100%;
    padding: 56px 16px 32px;
  }

  .popup_templates,
  .popup_hotels,
  .popup_main {
    padding: 48px 16px 16px;
  }

  .file-dialog-paper {
    min-width: 0;
  }

  /* Proposal Settings exclusions: long labels wrap instead of widening the row */
  .exclusion_item .selectbox-label {
    max-width: 100%;
  }

  .exclusion_item .checkbox-inline {
    min-width: 0;
    white-space: normal;
  }

  /* Wide screens (src/components/wideScreenNotice.js): timelines and wide grids
     scroll inside their own box, under a dismissible note
     ------------- */
  .wide-screen-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 4px 6px 12px;
    border-radius: 6px;
    background: #fff4e5;
    color: #663c00;
    font-size: 14px;
    line-height: 1.4;
  }

  .wide-screen-notice span {
    flex: 1;
  }

  .wide-screen-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Standalone MUI pagination (not material-table's, which renders it as a td):
     the page arrows wrap below "rows per page" instead of running off the edge */
  div.MuiTablePagination-root .MuiTablePagination-toolbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-left: 0;
  }

  div.MuiTablePagination-root .MuiTablePagination-spacer {
    display: none;
  }

  /* Customer and vendor confirmation pages (/t/:uid, /confirm/:uid), opened by
     outside parties
     ------------- */
  .trip-confirm {
    padding: 0 12px;
  }

  /* vendorConfirm.js: Decline / Tentative / Confirm wrap inside the card's
     value column instead of overflowing it */
  .custom-table.mobile-cards .btn-group {
    flex-wrap: wrap;
    gap: 6px;
  }

  .custom-table.mobile-cards .btn-group > .btn {
    flex: 0 0 auto;
    margin-left: 0;
    border-radius: 4px;
  }

  /* Dialogs
     -------------
     Every MUI <Dialog> goes full screen. Done here rather than with the
     fullScreen prop because several screens nest their own MUI themes. */
  .MuiDialog-paper {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Save/Cancel stay on screen at the bottom */
  .MuiDialog-paper > .MuiDialogActions-root,
  .MuiDialog-paper > form > .MuiDialogActions-root {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid var(--neutrals-neutrals-500);
  }

  /* Hand-rolled Bootstrap modals (dialogs/dialogs.js) get the same treatment */
  .modal-dialog {
    max-width: none;
    min-height: 100%;
    margin: 0;
  }

  .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: white;
  }

  .MuiDialogTitle-root {
    padding: 12px 16px;
  }

  .MuiDialogContent-root {
    padding: 8px 16px;
  }

  /* Many dialogs and popups wrap their body in a fixed-width div or Paper (400–450px) */
  .MuiDialog-paper div[style*="width"],
  .MuiDialog-paper form,
  .popup_templates div[style*="width"],
  .popup_hotels div[style*="width"],
  .popup_main div[style*="width"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Duration fields (formfields.js): two 65px inputs overflow the narrow value column */
  input[id^="f-"][id$="-hours"],
  input[id^="f-"][id$="-minutes"] {
    width: 44px !important;
  }

  /* formfields.js text fields are fullWidth plus the MainStyles textField
     side margins (8px each), so they stick out past their column */
  .MuiDialog-paper .MuiFormControl-fullWidth[class*="-textField-"] {
    width: calc(100% - 16px);
  }

  /* Grid spacing uses negative margins, which scroll the dialog sideways */
  .MuiDialog-paper .MuiGrid-container[class*="MuiGrid-spacing-xs-"] {
    width: 100%;
    margin: 0;
  }

  /* Forms: one field per row
     -------------
     Grid items sized only from sm up (sm={6}, or xs={12} sm={4}) stay side by
     side between 600 and 959px and shrink to their content below 600px. */
  [class*="MuiGrid-grid-sm-"]:not([class*="MuiGrid-grid-xs-"]),
  .MuiGrid-grid-xs-12[class*="MuiGrid-grid-sm-"] {
    flex-basis: 100%;
    max-width: 100%;
  }

  /* style.css gives every search box a fixed 297px width and 115px of right padding */
  .search-container {
    width: auto;
    max-width: 100%;
    padding-right: 15px;
    box-sizing: border-box;
  }

  /* less the 30px left margin that clears the search icon */
  .search-container input {
    width: calc(100% - 30px);
  }

  /* DataTable (src/components/table.js)
     ------------- */
  .data-table-toolbar {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .data-table-toolbar .table-toolbar {
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .data-table-toolbar .search-container {
    flex: 1 1 160px;
    width: auto;
    padding-right: 15px;
  }

  .data-table-toolbar .search-container input {
    width: calc(100% - 30px);
    min-width: 0;
  }

  .table-container.mobile-cards-container {
    max-height: none;
    overflow: visible;
  }

  /* Rows as cards */
  .custom-table.mobile-cards,
  .custom-table.mobile-cards thead,
  .custom-table.mobile-cards tbody {
    display: block;
    width: 100%;
  }

  .custom-table.mobile-cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--neutrals-neutrals-500);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .custom-table.mobile-cards tbody td {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1 1 100%;
    min-width: 0;
    height: auto;
    padding: 4px 0 !important;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .custom-table.mobile-cards tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    color: var(--neutrals-neutrals-700);
    font-size: 12px;
  }

  .custom-table.mobile-cards tbody td:empty,
  .custom-table.mobile-cards tbody td.mobile-hidden {
    display: none;
  }

  /* Checkbox / expand chevrons sit on the title line */
  .custom-table.mobile-cards tbody td:not([data-label]):not(.action_col):not([colspan]) {
    flex: 0 0 auto;
    margin-right: 8px;
  }

  /* the selection checkbox is absolutely positioned inside a 0-width div */
  .custom-table.mobile-cards tbody td:not([data-label]):not(.action_col):not([colspan]) > div {
    position: relative;
    width: 20px;
    height: 20px;
  }

  /* Basis > 0 so the next field wraps below instead of sharing the line */
  .custom-table.mobile-cards tbody td.dt-card-title {
    flex: 1 1 60%;
    font-size: 15px;
    font-weight: 600;
  }

  .custom-table.mobile-cards tbody td.dt-card-title::before {
    display: none;
  }

  .custom-table.mobile-cards tbody td.action_col {
    order: 10;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 6px;
    padding-top: 8px !important;
    border-top: 1px solid var(--neutrals-neutrals-500);
  }

  .custom-table.mobile-cards tbody td.action_col img {
    height: 24px;
    margin: 0 !important;
  }

  /* One-column tables: the actions sit on the same line as the value */
  .custom-table.mobile-cards tbody tr:not(:has(> td[data-label] ~ td[data-label])) {
    flex-wrap: nowrap;
  }

  .custom-table.mobile-cards tbody tr:not(:has(> td[data-label] ~ td[data-label])) > td.action_col {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 4px !important;
    border-top: 0;
  }

  /* Headers become a row of filter/sort chips; unfiltered headers are hidden */
  .custom-table.mobile-cards thead tr {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 0;
    background: transparent;
  }

  .custom-table.mobile-cards thead th {
    display: none;
  }

  .custom-table.mobile-cards thead th.has-filter {
    display: block;
    flex-shrink: 0;
    height: auto;
    white-space: nowrap;
    padding: 4px 6px 4px 12px !important;
    border: 1px solid var(--neutrals-neutrals-500);
    border-radius: 16px;
    background: white;
    font-size: 13px;
  }

  .custom-table.mobile-cards .filter-list,
  .custom-table.mobile-cards .filter-list.align-left {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    max-height: 70vh;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: white;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.24);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .custom-table.mobile-cards .filter-list-item {
    min-height: 44px;
  }

  /* material-table (src/components/materialTable.js)
     ------------- */
  .mt-mobile-cards .MuiToolbar-root {
    flex-wrap: wrap;
    padding-left: 8px;
    padding-right: 8px;
  }

  .mt-mobile-cards .MuiToolbar-root > div:nth-child(2) {
    display: none; /* spacer */
  }

  .mt-mobile-cards .MuiToolbar-root .MuiFormControl-root {
    flex: 1 1 200px;
    padding-left: 0;
  }

  .mt-mobile-cards .MuiTablePagination-toolbar {
    flex-wrap: wrap;
    padding-left: 0;
  }

  .mt-mobile-cards table,
  .mt-mobile-cards tbody {
    display: block;
    width: 100%;
  }

  .mt-mobile-cards thead {
    display: none;
  }

  /* the pagination footer stays a table */
  .mt-mobile-cards tfoot table {
    display: table;
  }

  .mt-mobile-cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto !important;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--neutrals-neutrals-500);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .mt-mobile-cards tbody td {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1 1 100%;
    min-width: 0;
    width: auto !important;
    height: auto;
    padding: 4px 0 !important;
    border: 0;
    font-size: 14px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .mt-mobile-cards tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    color: var(--neutrals-neutrals-700);
    font-size: 12px;
  }

  .mt-mobile-cards tbody td:empty {
    display: none;
  }

  /* First data cell is the card title (it follows the actions cell, if any) */
  .mt-mobile-cards tbody tr > td[data-label]:first-child,
  .mt-mobile-cards tbody tr > td:not([data-label]) + td[data-label] {
    font-size: 15px !important;
    font-weight: 600;
  }

  .mt-mobile-cards tbody tr > td[data-label]:first-child::before,
  .mt-mobile-cards tbody tr > td:not([data-label]) + td[data-label]::before {
    display: none;
  }

  /* Actions cell (edit/delete/open, or save/cancel in an edit row) goes to the
     bottom of the card; edit-row input cells also lack data-label, hence :has */
  .mt-mobile-cards tbody tr > td:not([data-label]):not([colspan]):not(:has(input)) {
    order: 10;
    justify-content: flex-end;
    margin-top: 6px;
    padding-top: 8px !important;
    border-top: 1px solid var(--neutrals-neutrals-500);
  }

  /* One-column tables (most of admin/tabTables.js): the actions sit on the same
     line as the value. Edit rows have no labelled cells, so they match too */
  .mt-mobile-cards tbody tr:not(:has(> td[data-label] ~ td[data-label])) {
    flex-wrap: nowrap;
  }

  .mt-mobile-cards tbody tr:not(:has(> td[data-label] ~ td[data-label])) > td:not([data-label]):not([colspan]):not(:has(input)) {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 4px !important;
    border-top: 0;
  }
}