/* screen.css: safe areas and foldable screens, shared by every page (owner Oct 23 2026, screen-size round).
   Linked LAST in each page's <head>, after the page's own styles. See docs/SCREEN-SIZES.md.

   1. Safe areas. Every page has viewport-fit=cover, so the page runs edge to edge and keeps itself clear of the notch,
      the rounded corners and the home indicator with env(safe-area-inset-*). On a desktop and on phones without a notch
      every inset is 0, and so is everything below: nothing changes there.
      The insets are added as TRANSPARENT BORDERS, not padding: the element's own background still fills them (the
      background is painted under the border), and the page's own padding is left exactly as it is (no values copied
      here that a page change could get out of step with).
   2. Viewport segments (dual-screen and folding devices that report a hinge): content is kept out of the hinge.
      Applies only when the browser reports 2 segments; with 1 segment or no support nothing here applies.
      public/viewport-segments.js sets data-segments="2h" / "2v" on <html> and --hinge-width for page scripts.

   Inventory pages (body.inv) already do their safe areas in /inventory/css/frame.css: the frame rules below skip them,
   so nothing is padded twice. */

/* ── 1. Safe areas ─────────────────────────────────────────────────────────── */

/* Left and right (landscape: the notch and the rounded corners). Pages without a side menu: the whole page moves in,
   as Safari did by itself before viewport-fit=cover (the page background fills the sides). */
body:not(.inv):not(:has(#sidebar)) {
  border-left: env(safe-area-inset-left, 0px) solid transparent;
  border-right: env(safe-area-inset-right, 0px) solid transparent;
}

/* Sticky headers: room at the top, in the header's own colour. The top inset is 0 in FieldHub today (every page uses
   apple-mobile-web-app-status-bar-style "black", so a home-screen app starts below the status bar, and in Safari the
   toolbar is above the page); this is for the day that changes. .app-header itself is left out: it has a fixed
   52/56px height that an inset border would squeeze, and pages wrap it in .top-stick where they need more. */
.fp-header, .top-stick {
  border-top: env(safe-area-inset-top, 0px) solid transparent;
}

/* Office side menu (office.html, safety.html and the pages framed by office-sidebar.js) */
body:not(.inv) #sidebar {
  border-left: env(safe-area-inset-left, 0px) solid transparent;
  border-top: env(safe-area-inset-top, 0px) solid transparent;
  border-bottom: env(safe-area-inset-bottom, 0px) solid transparent;
}
body:not(.inv) .main-content { border-right: env(safe-area-inset-right, 0px) solid transparent; }
body:not(.inv) .office-topbar { border-top: env(safe-area-inset-top, 0px) solid transparent; }
body:not(.inv) .sidebar-toggle { margin-top: env(safe-area-inset-top, 0px); margin-right: env(safe-area-inset-right, 0px); }
@media (max-width: 768px) {
  /* the side menu slides in over the page here, so the page itself keeps clear of the left side */
  body:not(.inv) .main-content { border-left: env(safe-area-inset-left, 0px) solid transparent; }
}

/* Fixed bottom bars (Submit / Save bars). New bars: add data-fixed-bottom to get the same. */
.fp-submit-bar, .sf-submit-bar, .it-bar, [data-fixed-bottom] {
  border-left: env(safe-area-inset-left, 0px) solid transparent;
  border-right: env(safe-area-inset-right, 0px) solid transparent;
}
/* bottom inset: not on bars form-save-bar.js has taken over (.fsb-kept), which add it in their own padding;
   adding it here too would double it */
:is(.fp-submit-bar, .sf-submit-bar, .it-bar, [data-fixed-bottom]):not(.fsb-kept) {
  border-bottom: env(safe-area-inset-bottom, 0px) solid transparent;
}
/* ...and the page leaves the same extra room at its end, so the last field is not under the taller bar */
body:has(.fp-submit-bar, .sf-submit-bar, [data-fixed-bottom]) { border-bottom: env(safe-area-inset-bottom, 0px) solid transparent; }

/* ── 2. Viewport segments (hinges) ─────────────────────────────────────────── */

/* Two segments side by side (a vertical hinge): (0 0) is the left segment, (1 0) the right one */
@media (horizontal-viewport-segments: 2) {
  :root {
    --seg-a: env(viewport-segment-width 0 0, 50vw);
    --seg-b: env(viewport-segment-width 1 0, 50vw);
    --seg-a-right: env(viewport-segment-right 0 0, 50vw);
    --seg-b-left: env(viewport-segment-left 1 0, 50vw);
    --hinge-width: calc(var(--seg-b-left) - var(--seg-a-right));
  }
  /* A page that marks a list / detail pair: the first child fills the left segment, the second the right one */
  [data-segment-split] {
    display: grid; grid-template-columns: var(--seg-a) var(--seg-b); column-gap: var(--hinge-width);
    margin-left: 0; margin-right: 0; max-width: none;
  }
  [data-segment-split] > * { min-width: 0; }
  /* Pages with no split of their own: the page stays in the left segment, never across the hinge */
  body:not(:has(#sidebar)):not(:has([data-segment-split])) { width: var(--seg-a-right); }
  body:not(:has(#sidebar)):not(:has([data-segment-split])) :is(.fp-submit-bar, .sf-submit-bar, .it-bar, [data-fixed-bottom]) {
    right: calc(100vw - var(--seg-a-right));
  }
}
/* Office side menu, wide enough to show beside the page: the menu fills the left segment, the page the right one */
@media (horizontal-viewport-segments: 2) and (min-width: 769px) {
  body:has(#sidebar) #sidebar { width: var(--seg-a-right); min-width: var(--seg-a-right); }
  body:has(#sidebar) .main-content { border-left: var(--hinge-width) solid transparent; }
  body.fh-office-win .main-content { margin-left: var(--seg-a-right); }
}
/* Office side menu sliding in over the page (narrow segments): the page stays in the left segment */
@media (horizontal-viewport-segments: 2) and (max-width: 768px) {
  body:has(#sidebar) .main-content { max-width: var(--seg-a-right); }
}

/* Two segments one above the other (a horizontal hinge): (0 0) is the top segment, (0 1) the bottom one */
@media (vertical-viewport-segments: 2) {
  :root {
    --seg-a: env(viewport-segment-height 0 0, 50vh);
    --seg-b: env(viewport-segment-height 0 1, 50vh);
    --seg-a-bottom: env(viewport-segment-bottom 0 0, 50vh);
    --seg-b-top: env(viewport-segment-top 0 1, 50vh);
    --hinge-width: calc(var(--seg-b-top) - var(--seg-a-bottom));
  }
  /* list / detail pair: top segment, bottom segment, each scrolling on its own */
  [data-segment-split] {
    display: grid; grid-template-rows: var(--seg-a) var(--seg-b); row-gap: var(--hinge-width);
    height: 100vh; overflow: hidden;
  }
  [data-segment-split] > * { min-height: 0; overflow: auto; }
  /* Pop-up windows open in the bottom segment, under the hinge, not across it */
  .modal-overlay { align-items: flex-start; padding-top: var(--seg-b-top); }
  .modal-overlay .modal { max-height: var(--seg-b); }
}