/* ===========================================================================
   mobile.css — make every DCT page FIT a phone. Not look different on one.

   The first version of this file rearranged things: it collapsed every grid
   to a single column, which flattened the seven-day calendar into a list.
   That was wrong. The pages are already laid out the way they should be —
   they were simply overflowing the screen.

   So this file now only ever SCALES and CONTAINS. It never re-flows a layout
   that was built on purpose. Every rule sits inside a media query, so a
   desktop is untouched, and deleting the file reverts everything.
   =========================================================================== */

/* ---- everywhere: stop one wide thing shrinking the whole page ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video, iframe { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }
body { overflow-wrap: break-word; }

@media (max-width: 820px) {

  /* ---- fit, do not rearrange ------------------------------------------ */
  /* A container told to be 1200px wide simply cannot be. Let it be the width
     of the screen — nothing inside it moves. */
  .wrap, .page, main, .container { max-width: 100% !important; }

  /* ---- typing ---------------------------------------------------------- */
  /* iOS zooms the whole page when a field under 16px gets focus, and does not
     zoom back. This single rule is most of what "the scaling is wrong" means
     on a phone, and it changes nothing you can see. */
  input, select, textarea { font-size: 16px !important; max-width: 100%; }

  /* Kills the 300ms tap delay. Changes nothing you can see. */
  button, .btn, .tile, a.btn { touch-action: manipulation; }

  /* ---- the things that genuinely cannot fit ---------------------------- */
  /* A wide table scrolls inside its own box instead of dragging the page
     sideways with it. The table itself looks the same. */
  .tablewrap, .fwrap, .scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* A row of tabs or filter chips slides rather than overflowing. */
  .tabs, .tabbar, .panels, .filtrow, .calbar, .fleetbar {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar,
  .panels::-webkit-scrollbar, .calbar::-webkit-scrollbar { display: none; }

  /* A dialog sized for a desktop gets the screen instead. */
  dialog, .modal, .dlg, .sheet { width: calc(100% - 20px) !important; max-width: none !important; }

  /* Charts keep their shape, just narrower. */
  canvas { max-width: 100% !important; }
}

/* ---- a narrow phone held upright --------------------------------------- */
@media (max-width: 430px) {
  /* The month calendar STAYS seven columns across — a week that reads as a
     week is the whole point of it. It only gets smaller. */
  .grid .day { min-height: 54px; padding: 3px 4px; }
  .grid .dow { font-size: 9px; padding: 5px 2px; letter-spacing: 0; }
  .grid .chip { font-size: 9.5px; padding: 1px 3px; }
  .grid .dnum { font-size: 10px; }
}

/* ---- notches and home bars --------------------------------------------- */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}