/* ─── Mobile layout ──────────────────────────────────────────────────────────
   Shared by every page. Loaded AFTER sidebar.css so it can override shape
   without touching the desktop rules, which stay exactly as they were above
   860px.

   Scope: the things people actually do on a phone — look a line up, read its
   status, act on it. Admin, Reports and Billing remain desktop-first; nobody
   sets rate plans from a phone, and pretending otherwise means a worse job of
   both.

   The breakpoint is 860px rather than the usual 768px because this sidebar is
   256px wide: at 800px the content column is already too narrow for the filter
   row and the SIM cards, so the drawer needs to take over before a phone-width
   screen is reached.
*/

@media (max-width: 860px) {

  /* ── The sidebar becomes a drawer ──
     It was a 256px fixed rail, which on a 390px screen eats two-thirds of the
     width. Off-canvas by default, slid in over the content when opened. */
  .side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100dvh;                 /* dvh, not vh: vh ignores mobile browser chrome */
    width: 82vw; max-width: 300px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1000;
    box-shadow: 0 0 40px rgba(0,0,0,.18);
  }
  body.nav-open .side { transform: translateX(0); }

  /* Tapping the page behind the drawer closes it - the expected gesture, and
     it means a mis-tap is never a trap. */
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 999;
    background: rgba(20,22,26,.42);
  }

  .navbtn {
    position: sticky; top: 0; z-index: 998;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--background, #fff);
    border-bottom: 1px solid var(--border, #e2e5ea);
    margin: -20px -16px 14px;       /* cancel .main padding so it spans full width */
  }
  .navbtn button {
    /* 44px: below this, thumbs miss. Apple's guideline, and it holds up. */
    width: 44px; height: 44px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--border, #e2e5ea); border-radius: 10px;
    background: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  }
  .navbtn .navttl { font-size: 15px; font-weight: 650; }

  .main { padding: 20px 16px 80px; max-width: 100%; }
  h1 { font-size: 24px; }

  /* ── Filters ──
     Eight dropdowns in a flex row wrap into a tall stack that pushes the fleet
     off-screen. Collapsed behind a toggle instead, with the search box always
     visible because it is what most phone visits are for. */
  .filters { display: none; }
  body.filters-open .filters { display: flex; flex-wrap: wrap; }
  .filters > * { flex: 1 1 100%; min-width: 0; }
  .filters select, .filters input { width: 100%; font-size: 16px; }
  /* 16px prevents iOS Safari zooming the whole page on focus - at 15px or
     below it zooms and the layout has to be pinched back every time. */

  .filterbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
  .filterbar .srch { flex: 1; min-width: 0; }
  .filterbar .srch input { width: 100%; font-size: 16px; padding: 11px 12px; }
  .filterbar .ftoggle {
    flex: none; height: 44px; padding: 0 14px;
    border: 1px solid var(--border, #e2e5ea); border-radius: 10px;
    background: #fff; font: inherit; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
  }
  .filterbar .ftoggle .fcount {
    background: var(--primary, #C8102E); color: #fff; border-radius: 99px;
    font-size: 11px; font-weight: 700; padding: 1px 6px;
  }

  /* ── Toolbar and KPIs ──
     Two columns of full-width buttons: every sync button visible at once and
     big enough to hit, instead of a strip that scrolls sideways. */
  .tools {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px;
    overflow: visible; padding-bottom: 4px;
  }
  .tools > * { min-width: 0; }
  .tools button, .tools .obtn { width: 100%; min-height: 44px; white-space: normal; line-height: 1.2; }

  .tiles { grid-template-columns: 1fr !important; gap: 10px; }
  .tiles .tile { padding: 14px 16px; }
  .tiles .tile .v { font-size: 26px; }

  /* ── SIM cards ── */
  .cards { grid-template-columns: 1fr !important; gap: 10px; }
  .card { padding: 14px; border-radius: 14px; }
  .card .mono, .card .meta { font-size: 11px; word-break: break-word; }

  /* The selection circle was ~19px - a coin-flip target on a phone. The visual
     size stays; the TOUCH area grows around it. */
  .simpick, .card .pick, input[type="checkbox"].simpick {
    width: 22px; height: 22px;
    position: relative;
  }
  .simpick::before {
    content: ""; position: absolute;
    top: -11px; left: -11px; right: -11px; bottom: -11px;
  }

  /* Per-card icon buttons, same reasoning. */
  .card .iconbtn, .card .abtn { min-width: 40px; min-height: 40px; }

  /* ── Action bar ──
     Pinned to the bottom on mobile. It appears on selection, and a bar that
     appears above the fold pushes the very cards you are selecting off-screen. */
  #bulkBar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    margin: 0; border-radius: 14px 14px 0 0;
    border-top: 1px solid var(--border, #e2e5ea);
    box-shadow: 0 -6px 24px rgba(0,0,0,.14);
    max-height: 46vh; overflow-y: auto;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  #bulkBar .actionbar, #bulkBar > div { flex-wrap: wrap; }
  #bulkBar button { min-height: 42px; flex: 1 1 calc(50% - 8px); }
  #bulkBar button.wide { flex: 1 1 100%; }

  /* ── Modals ──
     Bottom sheets. A centred dialog on a short screen puts its buttons under
     the keyboard. */
  .modal, .sheet {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal > div, .sheet > div {
    width: 100% !important; max-width: 100% !important;
    max-height: 92dvh; overflow-y: auto;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .modal input, .modal select, .modal textarea { font-size: 16px; }

  /* Two- and three-column grids inside dialogs collapse. */
  .modal .row2, .modal .row3 { grid-template-columns: 1fr !important; }

  /* ── Tables → cards ──
     mobile.js labels every cell with its column name (data-label). On a phone
     each row becomes a card of "label: value" lines, so nothing is wider than
     the screen. Tables marked data-mobile="scroll" (the Reports number grids,
     the per-carrier permission grid) stay tables and scroll inside their box. */
  table.m-cards { min-width: 0 !important; width: 100% !important; border: 0; background: none; }
  table.m-cards, table.m-cards tbody { display: block; }
  table.m-cards thead, table.m-cards tr.m-head { display: none; }
  table.m-cards tr {
    display: block; background: #fff;
    border: 1px solid var(--border, #e2e5ea); border-radius: 12px;
    padding: 6px 12px; margin: 0 0 10px;
  }
  table.m-cards td {
    display: flex; gap: 12px; justify-content: space-between; align-items: flex-start;
    border: 0 !important; padding: 5px 0 !important; min-width: 0; width: auto !important;
    text-align: right; white-space: normal !important; overflow-wrap: anywhere;
  }
  table.m-cards td::before {
    content: attr(data-label); flex: none; max-width: 42%;
    text-align: left; color: var(--muted-fg, #767d87); font-size: 12px; font-weight: 600;
  }
  table.m-cards td:not([data-label]), table.m-cards td[data-label=""] { display: block; text-align: left; }
  table.m-cards td:not([data-label])::before, table.m-cards td[data-label=""]::before { display: none; }
  table.m-cards td:empty { display: none; }
  table.m-cards td.m-stack { display: block; text-align: left; }
  table.m-cards td.m-stack::before { display: block; max-width: none; margin-bottom: 3px; }
  table.m-cards td button, table.m-cards td .btn { margin: 4px 6px 0 0; }

  /* Two-column key/value tables (router details) just fit the width. */
  table.m-fit { min-width: 0 !important; width: 100% !important; table-layout: auto; }
  table.m-fit th, table.m-fit td { white-space: normal !important; overflow-wrap: anywhere; }

  /* Tables that stay tables: scroll sideways inside their own box. */
  .m-scrollwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .m-scrollwrap > table { min-width: 560px; }

  /* ── Every page: nothing wider than the screen ── */
  .main { overflow-x: clip; }   /* clip, not hidden: hidden would break the sticky top bar */
  .main img, .main video, .main canvas { max-width: 100%; height: auto; }
  .main pre, .main code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .main .panel, .main .card, .main section { max-width: 100%; min-width: 0; }
  .main [style*="display:flex"], .main [style*="display: flex"] { flex-wrap: wrap; }

  /* ── Thumb-sized controls, and no iPhone zoom on focus (needs 16px) ── */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  .main button, .main .btn, .main a.btn { min-height: 40px; }
  .main select, .main input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: 42px; max-width: 100%; }
  .main input[type=checkbox], .main input[type=radio] { width: 20px; height: 20px; }

  /* Page-specific rows that were wider than a phone. */
  .tabs, .pagehead { flex-wrap: wrap; row-gap: 4px; }
  body[data-nav-active="logs"] .cards { grid-template-columns: 1fr 1fr !important; }
  .tab { white-space: nowrap; }
  .hbtns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hbtns > * { width: 100%; }
  .hbtns { flex-wrap: wrap !important; flex: 1 1 100% !important; }
  .row2, .row2.money { flex-wrap: wrap !important; }
  .main { overflow-wrap: anywhere; }

  /* Drawer links: a full-height row each, not a 15px line of text. */
  .side .nav a, .side .foot a { min-height: 40px; display: flex; align-items: center; }

  /* ── Dialogs (e.g. Customers → Plans) ──
     Rows of controls wrap instead of squeezing: on a phone the plan search is
     a full-width line of its own, with price and Add underneath. */
  .scrim [style*="display:flex"], .scrim [style*="display: flex"],
  .dlg [style*="display:flex"], .dlg [style*="display: flex"],
  .modal [style*="display:flex"], .modal [style*="display: flex"] { flex-wrap: wrap; }
  .pickwrap { flex: 1 1 100% !important; min-width: 0; }
  .picklist { max-height: 46vh; }
  .pickrow { flex-wrap: wrap; row-gap: 2px; }
  #planPrice { flex: 1 1 0; width: auto !important; min-width: 0; }
  .dlg, .scrim .panel { max-width: 100vw; }

  /* SIM dialog: carrier action buttons wrap onto a second row instead of
     running off the right edge (Retire was cut off). */
  .cact { display: flex; flex-wrap: wrap !important; gap: 8px; }
  .cact .cbtn, .fbox .cbtn { min-height: 40px; }

  /* Per-carrier permission grid (Users): fits the width - carrier names wrap
     and the six tick columns share what is left, so nothing is cut off. */
  .m-scrollwrap > #carrierPermGrid { min-width: 0; width: 100%; table-layout: fixed; }
  #carrierPermGrid th, #carrierPermGrid td { padding: 6px 2px !important; font-size: 10.5px !important;
    letter-spacing: 0 !important; white-space: normal !important; text-align: center; overflow-wrap: normal; word-break: normal; }
  #carrierPermGrid th:first-child, #carrierPermGrid td:first-child { width: 26%; text-align: left; font-size: 12px !important; }
  #carrierPermGrid input[type=checkbox] { width: 22px; height: 22px; }

  /* Company name in the top bar. */
  .navbtn .navco {
    margin-left: auto; font-size: 12px; color: var(--muted-fg, #767d87);
    max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Very narrow: one action per row, since two 42px buttons plus a gap no longer
   fit without the labels truncating. */
@media (max-width: 400px) {
  #bulkBar button { flex: 1 1 100%; }
  .navbtn .navttl { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* The drawer must never be stuck off-screen on a desktop, whatever class a
   previous narrow layout left on the body. */
@media (min-width: 861px) {
  .navbtn { display: none; }
  body.nav-open::after { display: none; }
  .side { transform: none; }
  .filters { display: flex; }
  .filterbar .ftoggle { display: none; }
}