/* ===========================================================================
   NTA FPS — mobile.css
   Responsive layer for the dashboard on phones and tablets.

   WHY PLAIN CSS AND NOT TAILWIND UTILITIES
     assets/tailwind.css is VENDORED — pre-built and committed, because Branch
     Office PCs reach this dashboard over Tailscale and may have no public
     internet. A utility class that was not present when that file was built
     simply does not exist at runtime.

     Checking the built file: the `sm:` breakpoint (640px) has ZERO rules
     compiled in. So `sm:grid-cols-2`, which already appears in index.html,
     silently does nothing today. Adding more `md:` / `sm:` classes would
     inherit the same trap and fail invisibly on exactly the devices this is
     meant to fix.

     Plain media queries always work, need no rebuild, and cannot silently
     evaporate. Load AFTER tailwind.css so these win on specificity ties.

   BREAKPOINTS
     <= 480px   phone, portrait      (the EW/officer in the field)
     <= 820px   phone landscape + small tablet
     >  820px   unchanged desktop behaviour
   =========================================================================== */

/* --------------------------------------------------------------------------
   1. Global touch ergonomics
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  /* iOS Safari zooms the page when a focused input is under 16px. That zoom
     does not reverse on blur, leaving the officer stranded at 1.3x with the
     nav off-screen. 16px is the minimum that prevents it. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* 44px is the smallest reliable thumb target. Below it, an approving officer
     tapping "Approve" next to "Reject" on a moving vehicle will mis-tap, and
     these two buttons have very different consequences. */
  button, .tab, a.btn, [role="button"] {
    min-height: 44px;
  }

  /* Keep destructive and constructive actions from sitting flush together. */
  .flex.gap-2 > button + button,
  .flex.gap-1 > button + button {
    margin-left: 4px;
  }
}

/* --------------------------------------------------------------------------
   2. Header and navigation

   Nine tabs will not fit on a 390px screen. Rather than a hamburger — which
   hides the review queue behind an extra tap for the people who live in it —
   the nav becomes a horizontally scrollable strip with the active tab kept in
   view. One swipe, no hidden state.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  #view-app > header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
    padding: 8px 10px !important;
  }

  #view-app > header > div:first-child {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
    width: 100%;
  }

  #view-app > header nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 2px;
    padding-bottom: 2px;
    /* Bleed to the screen edges so the strip reads as scrollable. */
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #view-app > header nav::-webkit-scrollbar { display: none; }

  #view-app > header nav .tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 8px 12px !important;
    font-size: 13px;
  }

  /* Right-hand cluster: identity, field-app link, logout. */
  #view-app > header > div:last-child {
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
    gap: 6px !important;
  }
  #whoami {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45vw;
  }
}

@media (max-width: 480px) {
  /* The header is sticky; on a short screen it must not eat the viewport. */
  #view-app > header { padding: 6px 8px !important; }
  #view-app > header nav .tab { padding: 8px 10px !important; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   3. Tables

   Seven tables, several with six or more columns. Six are already inside
   .overflow-x-auto wrappers, so they scroll — but a user who scrolls right
   loses the name column and can no longer tell which row they are acting on.
   Pinning the first cell keeps the identity visible, which matters when the
   action buttons live at the far right.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    /* Right-edge fade: the only honest affordance that more content exists. */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center;
    background-repeat: no-repeat;
    background-size: 28px 100%;
    background-attachment: local, local;
  }

  .overflow-x-auto table { font-size: 12px; }
  .overflow-x-auto th,
  .overflow-x-auto td { padding: 8px 6px !important; white-space: nowrap; }

  /* Sticky identity column. */
  .overflow-x-auto table th:first-child,
  .overflow-x-auto table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 rgba(0,0,0,.07);
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .overflow-x-auto table thead th:first-child { z-index: 3; background: #f8fafc; }

  /* Action buttons inside rows: keep them tappable without bloating the row. */
  table td button, table td a.btn {
    min-height: 36px;
    padding: 6px 10px !important;
  }
}

/* --------------------------------------------------------------------------
   4. Cards, grids, panels
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  /* Any multi-column grid collapses to one column. This is what the dead
     `sm:grid-cols-2` classes were supposed to do. */
  .grid { grid-template-columns: 1fr !important; }

  /* Two-up stat tiles remain readable at 2 columns and would waste a whole
     screen at 1. */
  .stats, #platform-split { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

  main, section { padding-left: 10px !important; padding-right: 10px !important; }

  .rounded-xl, .rounded-lg { border-radius: 10px; }

  /* Filter rows wrap instead of overflowing. */
  .flex.flex-wrap.gap-2 > * { flex: 1 1 auto; min-width: 0; }

  /* Long control numbers and emails must not force horizontal page scroll. */
  code, .font-mono { word-break: break-all; }
}

@media (max-width: 480px) {
  .stats, #platform-split { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   5. Review and approval panels

   The account-request and pin-integrity panels put an input and two buttons on
   one row. At 390px that becomes three unusable slivers, and one of the
   buttons is "Reject".
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  #req-list .flex.flex-wrap,
  #pi-list  .flex.flex-wrap {
    flex-direction: column;
    align-items: stretch !important;
  }
  #req-list input, #req-list select,
  #pi-list  input {
    width: 100% !important;
    min-width: 0 !important;
  }
  #req-list button, #pi-list button { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Map panes

   A map with no explicit height collapses to nothing inside a flex column.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  #map, .leaflet-container { min-height: 320px; }
  .leaflet-control-container .leaflet-top { top: 6px; }
}

/* --------------------------------------------------------------------------
   7. Installed-PWA affordances

   When launched from the home screen there is no browser chrome, so the app
   must respect the notch and the home indicator itself.
   -------------------------------------------------------------------------- */
@media (display-mode: standalone) {
  #view-app > header {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --------------------------------------------------------------------------
   8. Print — Branch Offices still print the review queue for signature
   -------------------------------------------------------------------------- */
@media print {
  #view-app > header, .no-print, button { display: none !important; }
  .overflow-x-auto { overflow: visible !important; }
  table { font-size: 10pt; }
}

/* --------------------------------------------------------------------------
   9. Scroll containers the vendored Tailwind build never compiled
   --------------------------------------------------------------------------
   REPORTED AS: "the list of EW assignments below is expanding, not scrollable —
   same with the Batches section."

   The markup was already correct. `max-h-72 overflow-auto` sits on the EW
   assignment list, `max-h-80 overflow-auto` on the batch list, and
   `max-h-[32rem] overflow-auto` on the row-review table. None of those classes
   exist in assets/tailwind.css:

       .max-h-72        0 rules
       .max-h-80        0 rules
       .max-h-[32rem]   0 rules
       .overflow-auto   0 rules   ← used 8 times across the dashboard

   tailwind.css is a PRE-COMPILED, vendored file — the same reason `sm:` and
   `md:` do nothing here (see the header of this file). A utility class added to
   the HTML after that build silently has no effect. There is no error, no
   warning, and the element simply grows to fit its content, which is exactly
   what a list with no height cap looks like.

   Rebuilding Tailwind would fix it and would also re-emit the whole framework
   for four rules, on a NAS where the CSS is served to Branch Offices over a
   shared connection. Adding the missing rules here is smaller, and it is the
   pattern this file already exists to serve.

   `overflow: auto` rather than `scroll`: a list short enough to fit should not
   show a dead scrollbar track.
   -------------------------------------------------------------------------- */
.overflow-auto { overflow: auto; }

.max-h-72 { max-height: 18rem; }
.max-h-80 { max-height: 20rem; }
.max-h-\[32rem\] { max-height: 32rem; }

/* Viewport-relative caps for the long working lists. A fixed 18rem shows about
   four EW assignments on any screen; a Branch with thirty EWs then scrolls the
   PAGE past the form they are working in. Tying the cap to the window means a
   desk monitor shows a useful list and a laptop still leaves the form visible.

   min-height stops the panel collapsing to nothing when the list is short. */
.fps-scroll-list {
  max-height: min(60vh, 34rem);
  min-height: 8rem;
  overflow-y: auto;
  overscroll-behavior: contain;   /* stop the page scrolling once the list ends */
}

/* Group headers stay put while the list moves under them, so an EW's name is
   still visible when reading the twentieth barangay assigned to them. */
.fps-scroll-list .fps-sticky-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

/* A scroll region with no visible edge reads as a truncated page rather than a
   scrollable box — which is the other half of the original report. */
.fps-scroll-list {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
}