/* Phone layout for the installed Shiplo app. A browser tab never has
   html.shiplo-installed, so these rules leave the website unchanged.
   A wide installed window also stays unchanged. */
@media (max-width: 960px) {
  html.shiplo-installed {
    -webkit-text-size-adjust: 100%;
  }
  html.shiplo-installed body {
    overflow-x: clip;
  }
  html.shiplo-installed .shiplo-nav-toggle {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: 44px;
    height: 44px;
  }
  html.shiplo-installed .shiplo-side-nav {
    width: min(320px, 92vw);
    padding-top: calc(68px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  html.shiplo-installed .shiplo-nav-item {
    min-height: 44px;
    padding: 12px;
    font-size: 15px;
  }
  html.shiplo-installed .shiplo-install-hint {
    font-size: 13px;
  }
  html.shiplo-installed input,
  html.shiplo-installed select,
  html.shiplo-installed textarea {
    font-size: 16px !important;
  }
  html.shiplo-installed button,
  html.shiplo-installed .btn,
  html.shiplo-installed summary {
    min-height: 40px;
  }
  html.shiplo-installed .leaflet-container button,
  html.shiplo-installed .leaflet-bar a {
    min-height: 0;
  }
  html.shiplo-installed body > header,
  html.shiplo-installed #hub > header,
  html.shiplo-installed #app > header {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: 8px;
  }
  html.shiplo-installed dialog,
  html.shiplo-installed .modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 24px);
  }
  html.shiplo-installed .overview-table-wrap,
  html.shiplo-installed .table-wrap,
  html.shiplo-installed .unassigned-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.shiplo-installed .operations-dashboard {
    padding: 12px;
  }
  html.shiplo-installed .operations-dashboard .welcome,
  html.shiplo-installed .overview-controls,
  html.shiplo-installed .overview-search,
  html.shiplo-installed .page-heading,
  html.shiplo-installed .heading-controls {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }
  html.shiplo-installed .overview-search input,
  html.shiplo-installed .heading-controls input,
  html.shiplo-installed .heading-controls label {
    width: 100%;
  }
  html.shiplo-installed .overview-totals {
    grid-template-columns: 1fr 1fr;
  }
  html.shiplo-installed #quickAccess {
    grid-template-columns: 1fr 1fr;
  }
  html.shiplo-installed #quickAccess a {
    min-height: 52px;
    padding: 12px;
  }
  html.shiplo-installed #quickAccess strong,
  html.shiplo-installed .operations-dashboard table {
    font-size: 13px;
  }
  html.shiplo-installed .attention-item,
  html.shiplo-installed .activity-row,
  html.shiplo-installed .window-row {
    font-size: 14px;
  }
  html.shiplo-installed .section-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  html.shiplo-installed .section-nav button {
    flex: 0 0 auto;
  }

  html.shiplo-installed #app:has(.workspace) {
    height: 100dvh;
  }
  html.shiplo-installed .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  html.shiplo-installed .topbar h1 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  html.shiplo-installed .topbar #refreshBtn {
    grid-column: 2;
    grid-row: 1;
  }
  html.shiplo-installed .workspace-tabs { grid-column: 1 / -1; grid-row: 2; }
  html.shiplo-installed .date-nav { grid-column: 1 / -1; grid-row: 3; }
  html.shiplo-installed .topbar #globalSearch { grid-column: 1 / -1; grid-row: 4; }
  html.shiplo-installed .topbar #merchantFilter { grid-column: 1 / -1; grid-row: 5; }
  html.shiplo-installed .status-bar { grid-column: 1 / -1; grid-row: 6; }
  html.shiplo-installed .topbar button,
  html.shiplo-installed .topbar .btn {
    min-height: 34px;
  }
  html.shiplo-installed .workspace-tabs {
    overflow-x: auto;
  }
  html.shiplo-installed .workspace-tab,
  html.shiplo-installed .unassigned-subtab {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }
  html.shiplo-installed .date-nav {
    min-height: 40px;
  }
  html.shiplo-installed .date-nav button {
    min-width: 36px;
    min-height: 36px;
  }
  html.shiplo-installed .topbar #globalSearch {
    width: 100% !important;
    max-width: none;
  }
  html.shiplo-installed .topbar .top-merchant-filter {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
  }
  html.shiplo-installed .status-bar {
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px 12px;
  }
  html.shiplo-installed .workspace {
    flex-direction: column;
    overflow: auto;
  }
  html.shiplo-installed .left-panel {
    position: relative;
    inset: auto;
    width: 100%;
    flex: 0 0 auto;
    max-height: 26vh;
    z-index: 1;
  }
  html.shiplo-installed .left-panel.collapsed {
    max-height: 0;
    width: 0;
  }
  html.shiplo-installed .centre {
    min-height: 42vh;
    flex: 1 0 42vh;
    background: var(--panel2, #2e3444);
    border-top: 1px solid var(--line, #3a4152);
  }
  html.shiplo-installed .order-card {
    min-height: 48px;
    padding: 12px;
  }
  html.shiplo-installed .order-filter-chip {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }
  html.shiplo-installed .map-legend,
  html.shiplo-installed .map-summary {
    display: none;
  }
  html.shiplo-installed .right-panel-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    flex-direction: column;
    z-index: 1;
  }
  html.shiplo-installed .route-tab-strip {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    border-left: 0;
    border-top: 1px solid var(--line, #3a4152);
  }
  html.shiplo-installed .route-tab-strip-head,
  html.shiplo-installed .route-tab-strip-foot {
    flex-direction: row;
    border: 0;
    padding: 0 4px;
  }
  html.shiplo-installed .route-tabs-scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  html.shiplo-installed .route-tab {
    min-width: 76px;
    border-left-width: 0;
    border-bottom: 3px solid transparent;
  }
  html.shiplo-installed .route-tab-label {
    writing-mode: horizontal-tb;
    max-height: none;
    font-size: 11px;
  }
  html.shiplo-installed .right-panel-wrap:not(.collapsed) .right-panel {
    width: 100%;
    flex-basis: auto;
    max-height: 36vh;
  }
  html.shiplo-installed .bottom-bar {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  html.shiplo-installed .unassigned-page {
    min-height: 0;
    overflow: auto;
  }
  html.shiplo-installed .unassigned-head,
  html.shiplo-installed .unassigned-controls,
  html.shiplo-installed .unassigned-subtabs {
    flex-wrap: wrap;
  }
  html.shiplo-installed .unassigned-controls {
    width: 100%;
    margin-left: 0;
  }
  html.shiplo-installed .unassigned-controls input {
    width: 100%;
    min-width: 0;
  }
  html.shiplo-installed .unassigned-body {
    flex-direction: column;
    overflow: auto;
  }
  html.shiplo-installed .unassigned-list-pane {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 46vh;
  }
  html.shiplo-installed .unassigned-divider {
    width: 100%;
    height: 8px;
    flex-basis: 8px;
  }
  html.shiplo-installed .unassigned-map-pane {
    min-height: 240px;
    flex: 1 0 240px;
  }
  html.shiplo-installed .unassigned-table th,
  html.shiplo-installed .unassigned-table td {
    font-size: 12px;
    padding: 10px 8px;
  }
}