/* ============================================================
   FinShift ADMIN — the mobile layer  (docs/architecture.md D60)

   A SECOND stylesheet, admin-only, and that is FORCED rather than chosen.
   mock/src/mock.css is copied BYTE-IDENTICALLY into both hosts' wwwroot by
   two CopyMockCss targets; .github/workflows/ci.yml asserts the sha256 for
   FinOps.Web AND FinOps.Admin, and both Dockerfiles diff -q it. So a media
   query added there would restyle the TENANT application too, which this
   batch must not do. mock.css is not touched by any of this.

   Loaded AFTER css/finops.css, so plain SOURCE ORDER does the overriding and
   nothing here needs !important: same specificity, later file, wins.

   BREAKPOINTS, and why these two:
     <= 900px   tablet tier: the nav drawer, and the health-row family stacks.
                iPad portrait is 768 and landscape is 1024, so 900 puts the
                drawer on the portrait tablet and on every phone while leaving
                landscape the full 240px sidebar, with margin for split-screen.
     <= 600px   phone tier. Below ~600 a 200px label column leaves under
                300px for its value inside a card.
   The ladder is 1280 -> 1100 -> 900 -> 600 with no inversions; the first two
   live in mock.css and are untouched.

   ABOVE 900px NOTHING HERE APPLIES except the named grid classes below, and
   those carry the same values the inline styles did. The desktop console is
   therefore pixel-identical to before this file existed — which is the thing
   to verify first, because a mobile pass that quietly restyles the desktop is
   a much bigger change than the one that was asked for.
   ============================================================ */

/* ---------- grid templates lifted out of inline styles ----------
   An inline grid-template-columns BEATS a media query — D56 removed one for
   exactly this reason, after the savings band stayed 4-up at 209px while the
   KPI row reflowed to 3-up. So a phone override cannot reach an inline
   template without !important, and !important would leave the NEXT inline
   tweak silently dead below the breakpoint with nothing failing.

   The desktop value and its phone override therefore both live here, in one
   file, where they cannot drift apart. The gap comes along only where every
   site that used the template also used the same gap. */
.kv-200  { grid-template-columns: 200px 1fr; gap: 12px 14px; }
.kv-150  { grid-template-columns: 150px 1fr; }
.kv-110  { grid-template-columns: 110px 1fr; }
.kv-auto { grid-template-columns: minmax(0, 1fr) auto; }
.kv-one  { grid-template-columns: 1fr; gap: 10px; }

.hr-sched { grid-template-columns: 120px 84px 132px 110px 1fr; }
.hr-step  { grid-template-columns: 1fr 110px 320px; }
/* Mock-only today: the connections card renders these as .health-row there and as .permrow in
   Customer.razor. That divergence predates this batch and is left alone — but the mock is the
   design surface, so its row has to stack on a phone too or the review is of the wrong thing. */
.hr-conn  { grid-template-columns: 120px 220px 130px 1fr; }
/* One finding on the Dashboard: severity · customer · what · why. The last track takes the most
   room because it carries a sentence, and minmax(0,…) rather than a bare fraction so a long one
   wraps instead of pushing the row wider than its card — a grid item's min-width is auto. */
.hr-find  { grid-template-columns: 92px 112px minmax(0, 1.1fr) minmax(0, 2fr); }

/* ---------- overlay pages ----------
   Every .overlay on THIS host is a page in its own right — sign-in, the
   sign-in prompt, the invitation landing — and not a dialog floating over
   content. So it has to scroll: on a phone with the keyboard up the viewport
   is around 460px and the invitation form is taller than that, which without
   this leaves the submit button simply unreachable. Harmless above the phone
   tier, where no scrollbar appears unless the content actually overflows.

   The three top paddings were three different inline values (8/14/16vh).
   They are preserved per page rather than unified, so the desktop rendering
   does not move; the phone tier collapses all three to the same 4vh. */
.overlay { overflow-y: auto; }
.ov-invite { padding-block-start: 8vh; }
.ov-signin { padding-block-start: 14vh; }
.ov-prompt { padding-block-start: 16vh; }

/* ---------- the drawer, closed state ----------
   The burger and the scrim are in the markup at EVERY width and simply not
   displayed above the tablet tier. Two reasons: a burger is a no-op control
   when the sidebar is already on screen, and a scrim that forgot to hide
   would cover the whole desktop page. */
.nav-scrim,
.topbar [data-nav-toggle] { display: none; }

@media (max-width: 900px) {
  .topbar [data-nav-toggle] { display: inline-flex; }

  /* The sidebar leaves the grid entirely and the main column takes the full
     viewport width — the whole point, since a 240px rail on a 375px screen
     leaves 135px of content. */
  .shell { grid-template-columns: 1fr; }

  .sidebar {
    /* RTL: mock.css commits to "logical properties only (RTL-ready)" and
       translateX(-100%) is physical. The hidden offset is a token, flipped
       for rtl below, so the drawer slides from the correct edge either way. */
    --nav-off: -100%;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 95;
    width: min(264px, 84vw);
    height: 100vh;
    height: 100dvh;   /* dvh, not vh: vh overshoots by the browser chrome on a
                         phone, which cuts off the build stamp at the bottom */
    transform: translateX(var(--nav-off));
    transition: transform .18s ease-out, visibility .18s linear;
    visibility: hidden;            /* out of the tab order while closed */
    border-inline-end: 1px solid var(--border-strong);
    box-shadow: var(--shadow-pop);
  }
  [dir="rtl"] .sidebar { --nav-off: 100%; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 94;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(4, 6, 10, .62);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease-out, visibility .18s linear;
  }

  body[data-nav="open"] .sidebar   { transform: none; visibility: visible; }
  body[data-nav="open"] .nav-scrim { opacity: 1; visibility: visible; }
  /* Without this, dragging over the scrim scrolls the page behind it, which
     reads as the drawer having lost its grip on the screen. */
  body[data-nav="open"]            { overflow: hidden; }

  /* The health-row family stacks HERE rather than in the phone tier, and that
     is a measurement rather than a preference. These carry 430-670px of fixed
     columns with the explanation in the last track, so between 600 and 800px
     that track is squeezed to nothing: measured at 601px, .hr-sched's prose
     column computed to 31px. Stacking at the same breakpoint the layout mode
     already changes also means one fewer width to reason about, and the
     vertical cost is paid for by the 240px the sidebar just gave back. */
  .health-row, .hr-sched, .hr-step, .hr-conn, .hr-find {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 10px 4px;
    /* A grid item with `width: auto` STRETCHES to its track, and every pill in these rows —
       .fresh, .badge, .chip — is inline-flex with auto width. In the multi-column desktop layout
       the track is the pill's own column so nothing shows; collapsed to a single 1fr track they
       become 309px-wide bars on a 375px screen.
       This was shipped in D60 and missed, because that pass measured grid-template-columns and
       scrollWidth — the layout MODE — and never asked whether a child shrink-wrapped. */
    justify-items: start;
  }
}

/* ---------- phone tier ---------- */
@media (max-width: 600px) {
  /* ----- page chrome ----- */
  .content { padding: 14px 14px 32px; }
  .card { padding: 14px; }
  .card + .card { margin-block-start: 14px; }
  .grid { gap: 14px; }
  .page-title { font-size: 15px; }
  .banner { padding: 9px 14px; }

  /* mock.css reflows .grid.kpis to repeat(3, 1fr) at 1280 and has NOTHING below it, which was
     harmless while this host used no KPI components at all — the Dashboard is the first. Three
     tracks on a 375px screen is ~106px per tile carrying a 22px mono value. Two is legible, and
     six boxes read as three tidy rows rather than two rows and a widow. */
  .grid.kpis { grid-template-columns: repeat(2, 1fr); }

  .topbar { gap: 8px; padding: 0 12px; }
  /* The hostname pill is the widest thing competing for a 375px topbar, and
     the browser's own address bar already says which host you are on. The
     crumbs stay: mock.css already gives them nowrap + ellipsis, so they
     truncate rather than push. */
  .topbar .pill { display: none; }

  /* ----- stacking -----
     A label above its value needs to read AS a label, which 200px of
     whitespace did for free and a single column does not. */
  .kv, .kv-200, .kv-150, .kv-110, .kv-auto, .kv-one {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .kv .k { color: var(--text-low); font-size: 11px; }
  .kv > * + .k { margin-block-start: 9px; }

  /* .permrow does not wrap, and three of them carry an inline min-width of
     170-190px on a child, which overflows a 319px card interior. */
  .permrow { flex-wrap: wrap; }

  /* ----- touch targets -----
     WCAG 2.5.8's floor is 24px and 40px is the platform recommendation. The
     topbar icons are what a thumb actually reaches for. */
  .iconbtn { width: 40px; height: 40px; }
  .avatar { width: 36px; height: 36px; }   /* not a control here — visual balance only */
  input[type="checkbox"].cb { width: 20px; height: 20px; }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 34px; padding: 6px 12px; }
  .tbl tbody td { height: 44px; }

  /* iOS Safari ZOOMS THE VIEWPORT when a focused input's font-size is under
     16px, and leaves the page scrolled sideways afterwards with no obvious
     way back. This is the one rule here that is about a browser rather than
     a layout. */
  input.txt, select.txt, textarea.txt { font-size: 16px; }

  /* ----- overlay pages ----- */
  .overlay { padding-inline: 10px; }
  .ov-invite, .ov-signin, .ov-prompt {
    padding-block-start: 4vh;
    padding-block-end: 4vh;
  }
  .modal { padding: 16px; }
  .modal .foot { flex-wrap: wrap; }

  /* ----- stepper -----
     Five labels wrap to three rows on a phone. The circles already carry the
     progress — done, now, todo are colour-coded — so only the step you are
     ON keeps its label. */
  .stepper .stp .t { display: none; }
  .stepper .stp.now .t { display: inline; }
  .stepper .lnk { flex: 1 1 12px; min-width: 12px; }
}