/* iPhone colours for the shop-manager look (alldata.css). Loaded after
   phone.css: the phone layout stays as it is; only colours and tab shapes
   follow the desk. */
@media (max-width: 760px) {
  /* Navy strip on top with the DAS logo, white search box under it. A fixed height
     (two 44 px rows), so the visit's tabs know where to stop when they stick. */
  :root { --ad-sticky-top: calc(env(safe-area-inset-top, 0px) + 112px); }
  .appbar {
    position: sticky !important; top: 0 !important; z-index: 6 !important;
    grid-template-rows: 44px 44px !important; row-gap: 8px !important; align-items: center !important;
    padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 10px !important;
    height: var(--ad-sticky-top); box-sizing: border-box;
  }
  .appbar .search input { height: 44px; }
  .appbar .titles h1 { color: #ffffff !important; }
  .appbar .search input { min-height: 44px !important; }
  .dal-sound { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .4) !important; color: #ffffff !important; box-shadow: none !important; }

  /* Bottom bar: white, the open tab in blue with a blue line on top. */
  :root[data-theme="light"] .bottombar { background: #ffffff !important; border-top: 1px solid #c9d3e0 !important; box-shadow: 0 -1px 4px rgba(16, 24, 40, .06); }
  .bottombar button { color: #4a5565 !important; font-size: 0.72rem !important; font-weight: 600 !important; position: relative; }
  .bottombar button.on { color: var(--ad-blue) !important; font-weight: 700 !important; }
  .bottombar button.on::before { content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--ad-blue); }
  .more-sheet { background: #ffffff !important; border: 1px solid var(--line) !important; }
  .more-sheet button { background: #ffffff !important; border-color: var(--line) !important; border-radius: 4px !important; color: var(--text) !important; }
  .more-sheet button.on { background: var(--brand-soft) !important; color: var(--ad-blue-deep) !important; border-color: var(--ad-blue) !important; }

  /* Joined tabs still fit a phone: they slide sideways in one row. */
  .page-tabs, .stage-tabs, .rm-tabs, .reminders-page .rm-tabs, .ibx-tabs, .afg-tabs {
    flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .page-tabs::-webkit-scrollbar, .stage-tabs::-webkit-scrollbar, .rm-tabs::-webkit-scrollbar { display: none; }
  .page-tabs .page-tab, .stage-tab, .rm-tab, .ibx-tab, .cd-sort { min-height: 44px !important; flex: 0 0 auto !important; padding: 0 14px !important; }
  .page-tabs { padding: 10px 12px 0 !important; }
  /* The visit's tabs: one row that slides sideways (the open one is scrolled into view). */
  .job-tabs {
    flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -12px 12px !important; padding: 8px 12px 0 !important; border-bottom-width: 2px !important;
  }
  .job-tabs::-webkit-scrollbar { display: none; }
  .job-tabs button { flex: 0 0 auto !important; min-height: 44px !important; padding: 0 14px !important; }
  .dc-stage { padding: 0 6px !important; white-space: normal !important; }

  /* Board rows: the Mark-done button sits under the text instead of over it. */
  .board .card, .board.single .card { padding: 12px 14px 58px !important; }
  .card-wrap .job-done { top: auto !important; bottom: 10px !important; left: 14px; right: auto !important; transform: none !important; }
  .card-wrap .job-done.is-done { transform: none !important; }

  .cd-row { padding: 12px 14px !important; }
}