/* ─── 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 ──
     Horizontal scroll rather than wrapping: six sync buttons stacked vertically
     is a screenful before any data appears. */
  .tools {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tools::-webkit-scrollbar { display: none; }
  .tools button, .tools .obtn { flex: none; min-height: 40px; white-space: nowrap; }

  .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 ──
     Reports and activity stay tabular; they scroll sideways rather than being
     crushed into unreadable columns. */
  /* No wrapper element exists, so the table itself is made scrollable by
     giving its container the overflow. Applied to the card that holds it. */
  .card table, .panel table, main table { min-width: 560px; }
  .card, .panel { overflow-x: auto; }
}

/* 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 { display: none; }
}

/* 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; }
}