/* ═══════════════════════════════════════════════════════════════════════════
   Zeno PMS – phone and tablet layer (2026-11-02)
   Linked last (after the screen stylesheet) on every page by tools/add-responsive.py.
   Every layout rule sits inside a max-width media query, so the laptop view
   (1025px and wider) is exactly as before. Breakpoints:
     ≤ 1024px  tablet – the sidebar becomes a slide-in menu
     ≤ 760px   phone  – one column, compact top bar, wide pop-ups
     ≤ 420px   small phone
   ═══════════════════════════════════════════════════════════════════════════ */

/* The menu switch and its buttons only exist on tablet and phone */
.navtoggle,
.nav-scrim,
.topbar__menu,
.sidebar__close {
  display: none;
}

/* ───────── Tablet and phone: slide-in menu ───────── */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 0px;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  /* safety net: nothing may push the page sideways (clip keeps the sticky top bar working) */
  .app__body {
    min-width: 0;
    overflow-x: clip;
  }

  /* the switch stays focusable for keyboard users, but is not seen */
  .navtoggle {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw);
    height: 100vh;
    height: 100dvh;
    z-index: 70;
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 220ms var(--ease, ease-out), visibility 0s linear 220ms;
  }

  .navtoggle:checked ~ .sidebar,
  body[data-sidebar="expanded"] .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: 0 24px 60px rgb(14 26 43 / 0.35);
    transition: transform 220ms var(--ease, ease-out);
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgb(14 26 43 / 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
  }

  .navtoggle:checked ~ .nav-scrim,
  body[data-sidebar="expanded"] .nav-scrim {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
  }

  html:has(.navtoggle:checked) {
    overflow: hidden;
  }

  /* inside the menu: full labels again (the 1100px icon rail is undone) */
  .sidebar__brand {
    justify-content: space-between;
    padding: 0 10px 0 20px;
  }

  .sidebar__name,
  .nav__label,
  .nav__chev {
    display: inline;
  }

  .nav__group {
    font-size: 10.5px;
    min-height: 36px;
    padding: 6px 12px;
    margin: 10px 0 0;
    box-shadow: none;
  }

  .nav__item {
    justify-content: flex-start;
    min-height: 40px;
    padding: 6px 11px;
    font-size: 14px;
  }

  .nav__item.is-active::before {
    left: -12px;
  }

  .sidebar__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: rgb(255 255 255 / 0.72);
    cursor: pointer;
  }

  .sidebar__close:hover {
    background: rgb(255 255 255 / 0.08);
    color: #fff;
  }

  /* the JavaScript shell keeps its own collapse button – the close button does that job here */
  .sidebar__collapse {
    display: none;
  }

  .topbar__menu {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: -6px;
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
  }

  .topbar__menu:hover {
    background: var(--surface-2, rgb(0 0 0 / 0.04));
  }

  .navtoggle:focus-visible ~ .app__body .topbar__menu {
    outline: 2px solid var(--br-500, #c8a96a);
    outline-offset: 2px;
  }

  .pv--prop[popover] {
    left: var(--gutter);
  }
}

/* ───────── Phone: compact top bar, pop-ups across the screen ───────── */
@media (max-width: 760px) {
  :root {
    --gutter: 14px;
    --topbar-h: 56px;
  }

  .topbar {
    gap: 6px;
  }

  .topbar__prop,
  .topbar__shift,
  .topbar__clock,
  .topbar > a.icon-link[href*="help"] {
    display: none;
  }

  .topbar__date {
    padding: 0 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .topbar__new {
    flex: none;
  }

  .topbar__user {
    padding-right: 0;
  }

  .pv[popover],
  .pv--prop[popover],
  .pv--new[popover],
  .pv--notif[popover],
  .pv--user[popover] {
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100dvh - var(--topbar-h) - 20px);
  }

  .app__content {
    padding: 14px var(--gutter) 40px;
  }
}

@media (max-width: 420px) {
  .topbar__date .icon {
    display: none;
  }

  .topbar__date {
    padding: 0 8px;
  }
}

/* ───────── Phone: shared content patterns ───────── */
@media (max-width: 760px) {
  /* stat tiles: two per row, the seven-figure ribbon too */
  .st-tiles,
  .st-tiles[data-n],
  .st-tiles[data-n="7"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st-tiles > .st-tile,
  .st-tiles > .st-tile:nth-child(-n + 2) {
    grid-column: auto;
  }

  .st-tiles[data-n="7"] > .st-tile::before,
  .st-tiles[data-n="7"] > .st-tile + .st-tile::before {
    display: none;
  }

  .st-tiles[data-n="7"] > .st-tile:nth-child(odd):not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    right: 0;
    width: 1px;
    background: var(--line);
  }

  .fd-kpis {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* report summary strips (.o3-sum): two figures per row */
  .o3-sum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .o3-sum li + li {
    border-left: 0;
  }

  .o3-sum li:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .o3-sum li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  /* printable outputs: narrower margins, wide tables scroll inside the paper */
  .paper,
  .paper--a5,
  .paper--card {
    padding: 26px 16px 22px;
    overflow-x: auto;
  }

  .paper__head {
    flex-wrap: wrap;
  }

  /* sortable listing tables scroll sideways inside their card */
  table.srt {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}

/* ───────── Phone: page layouts become one column ─────────
   Side-by-side page splits, card pairs and form grids stack; the order in the page stays the same. */
@media (max-width: 760px) {
  .fd-split,
  .fd-split--wide,
  .fds05-wrap .fd-split--wide,
  .s-split,
  .hs-grid,
  .hs-hero,
  .hs-cols,
  .gc-split,
  .att,
  .fd-grid2,
  .fd-grid2:has(> [data-code="FD-01-arrivals"]),
  .inv-cols,
  .mv-split,
  .fd-attn--cols,
  .rs-feed .fd-feed--cols,
  .hm-cols,
  .rs01-grid,
  .rs05,
  .rs05-send,
  .rs05-consent__ch,
  .rs05-sw2,
  .rs9-layout,
  .rs9:has(.va:target:not(#all)) .rs9-layout,
  .rs9:has(.bk:not(.bk--all) .modal:target) .rs9-layout,
  .cf-grid,
  .cf-grid--2,
  .gp-layout,
  .gpc-cols,
  .gpc-sw,
  .rs19-rd,
  .rs19-dl,
  .rep-two,
  .rep-f2,
  .ap-hero,
  .cq-grid,
  .cq-hero,
  .cq-steps,
  .sv-low,
  .sv-filters,
  main .ral-filters,
  .hk-next,
  .hk-next__steps,
  .hkx-main,
  .hkx-staff,
  .ts-body,
  .ts-jump,
  .iq-cols,
  .pt-wrap,
  .dp-list,
  .rl-list,
  .hks-place__grid,
  .hks-dl > div,
  .hks-alert__grid,
  .hks-levels,
  .hks-levels__grid,
  .hks-codes,
  .lo3-cols,
  .lo3-grid,
  .lo3-pane,
  .la5-run__b,
  .lx-head,
  .wb-top,
  .wb-grids,
  .ux-grid,
  .ux-head,
  .lad-grid,
  .lad-att,
  .lad-side,
  .mc-grid,
  .pg-list,
  .vd-list,
  .la-help__b,
  .ur-top,
  .mbd-grid,
  .rp-grid,
  .ly__body,
  .lfd-g,
  .loc-g,
  .mt-g,
  .mt-sg,
  .rth-g,
  .oe,
  .bs,
  .bqs-2,
  .cx-card,
  .meal-row,
  .form-section__grid,
  .fd-rolecards,
  .na-dl__reps,
  .rd-p,
  .sh__layout > aside,
  .sh__hero-main,
  .fds-top,
  .rd-hero,
  .ts-hero,
  .iq-hero,
  .dw-hero,
  .cq-item,
  .grid--2,
  [data-screen^="FD-18"] .os,
  [data-screen^="FD-18"] .os-choices--2,
  [data-screen^="FD-18"] .os-choices--3,
  [data-screen^="HK-04"] .ap,
  [data-screen^="LA-O06"] .lo6--count-o20261022-003,
  [data-screen^="LA-O06"] .lo6--ready-o20261022-007,
  [data-screen^="LA-O06"] .lo6--delay-o20261022-011 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* sticky side panels sit in the flow once the page is one column */
  .mt-tl,
  .fd-stack--sticky {
    position: static;
  }

  /* setup home hero: ring and text stack, the three counts stay in one row */
  .sh__hero-main {
    justify-items: start;
    gap: 16px;
    padding: 20px 18px;
  }

  .sh__stats {
    grid-column: auto;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sh__stat {
    padding: 10px;
  }
}

/* ───────── Phone: figure strips and tiles, two per row ───────── */
@media (max-width: 760px) {
  .o3-sum,
  .o3-sum.rp-sum,
  .o1-sum,
  .o2-sum,
  .o4-sum,
  .o6-sum,
  .rs10-tiles,
  .rs10-tiles--3,
  .ap-strip,
  .ap-meta,
  .rep-glance,
  .rep-summary,
  .rep-summary--5,
  .rs-facts,
  .lfd-tiles,
  .lnd-tiles,
  .mbd-tiles,
  .hkx-tiles,
  .mr-hg,
  .s-grid2.mr-hg,
  .ap__key,
  .svc-sum,
  .kpi4,
  .fd-kpis--4,
  .fd-tiles,
  .na-dl__grid,
  .p6-sum,
  .ow-kpi,
  .kc-mv,
  .ts-kpi,
  .hk7-sum,
  .hks-kpis,
  .hks-cover,
  .hks-sum,
  .hks-label-grid,
  .pv-list,
  .ur-stock,
  .rs19-dgrid,
  .stat3,
  .hero2 .stat3,
  .cq-kpis,
  .cq-facts,
  .kps,
  .rs01-kpis,
  .p14-dates,
  .rp-x__g,
  .lad-flow,
  .la-doc__meta,
  .lo6-meta .la-doc__meta,
  .tg-grid--bag,
  .pl-prices,
  .rss05-svc__m,
  .lo3-acts,
  .pc-pay,
  .pc-settle,
  [data-screen^="MT-O02"] .qg,
  [data-screen^="MTS-O01"] .qg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-code="FD-01"] .fd-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tg-grid--item {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* step tracks and jump grids: fewer, wider steps per row */
  .na-track,
  .na-stepper .na-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rd-jump__g {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lf-tl > li {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* ───────── Phone: inline-styled strips and tables inside cards ───────── */
@media (max-width: 760px) {
  /* report summary strips carry their column count inline */
  .o3-sum[style*="repeat(4"],
  .o3-sum[style*="repeat(5"],
  .o3-sum[style*="repeat(6"],
  .o3-sum[style*="repeat(7"],
  .o3-sum[style*="repeat(8"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .o3-sum[style*="repeat(3"] li:nth-child(n) {
    border-left: 0;
    border-top: 0;
  }

  .o3-sum[style*="repeat(3"] li + li {
    border-left: 1px solid var(--line);
  }

  .o3-sum[style*="repeat(1"] li {
    border-left: 0;
  }

  /* a table that sits straight in a card scrolls sideways in its own box instead of widening the page */
  :is(.card, .lf-card, .la-card, .la-doc, .ly__body, .field, .s-card, .fd-card, .hk-card, .panel) > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}

/* ───────── Tablet and phone: keep hidden inputs inside their scroll box ─────────
   Visually hidden checkboxes and sort radios are absolutely positioned; without a positioned ancestor they
   escape a sideways-scrolling table and widen the whole page. */
@media (max-width: 1024px) {
  .s-scroll,
  .app__content table,
  .app__content [class*="scroll"] {
    position: relative;
  }
}

/* ───────── Phone: card grids that fill by width never ask for more than the screen ───────── */
@media (max-width: 760px) {
  .fds-cards,
  .hks-cards,
  .p01-opts,
  .rs23-grid,
  .rgrid--sug,
  .fd-rep-grid,
  .kt-g,
  .sh__grid,
  .sh__layout .fds-cards,
  .ap-grid,
  .gm-g,
  .md-g,
  .cx-grid,
  .bq-g,
  .tbs-g,
  .ap-list,
  .lb-alert__list {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-code^="FDS-"], [data-code^="HKS-"], [data-code^="LAS-"], [data-code^="MBS-"], [data-code^="LNS-"], [data-code^="LFS-"], [data-code^="MTS-"], [data-code^="RTS-"], [data-code^="KTS-"], [data-code^="BQS-"], [data-code^="PRS-"]) .fd-sec:not(.modal .fd-sec) .s-grid2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .fl__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  }

  /* single-column page wrappers: their children may shrink to the screen */
  .law,
  .gsw,
  .dw,
  .rqw,
  .sfw,
  .svw,
  .mtw,
  .locw,
  .mt-form,
  .pmcs {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.law, .gsw, .dw, .rqw, .sfw, .svw, .mtw, .locw, .mt-form, .pmcs) > * {
    min-width: 0;
  }

  /* module heroes (housekeeping, laundry, service view): figures go under the greeting */
  .hkh,
  .lad-hero,
  .sv-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hkh__k,
  .sv-hero__n {
    flex-wrap: wrap;
  }

  .sv-hero__n > div {
    min-width: 0;
  }

  .hkx-legend {
    min-width: 0;
  }

  .loc-h,
  .avc-win__top {
    flex-wrap: wrap;
  }

  /* PM schedule rows: number and name on top, the rest underneath */
  .pmc > summary {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .pmc > summary > :nth-child(n + 3) {
    grid-column: 2;
  }
}

/* ───────── Phone: rows that hold several facts side by side ───────── */
@media (max-width: 760px) {
  .fl__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dc-fc {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .sf-bars {
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }

  /* lost report matches and storage rows: the item on top, its facts and buttons underneath */
  .mt-s,
  .loc-i {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mt-s > :first-child,
  .loc-i > :first-child {
    grid-column: 1 / -1;
  }

  .loc-h {
    gap: 8px 12px;
  }

  .loc-h > span:nth-child(2) {
    flex-basis: calc(100% - 52px);
  }

  /* filter fields: two per row, a search or date field across the row */
  .hfilter__grid > .hf-f,
  main .ral-filters > .hf-f,
  .hf-f {
    min-width: 0;
    flex-basis: calc(50% - 3px);
  }

  .hfilter__grid > .hf-f:has(input[type="date"], input[type="search"], input[type="text"]),
  .hf-f:has(input[type="date"], input[type="search"], input[type="text"]) {
    min-width: 0;
    flex-basis: 100%;
  }

  main .ral-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main .ral-filters > .ral-q {
    grid-column: 1 / -1;
  }
}

/* ───────── Phone: the sticky save bar stays small ───────── */
@media (max-width: 760px) {
  .fd-formfoot {
    gap: 8px;
    padding: 8px 12px;
  }

  .fd-formfoot .fd-spacer {
    flex: 1 1 160px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.35;
  }
}

/* ───────── Tablet: wide tables scroll inside their paper or card ───────── */
@media (max-width: 1024px) {
  .paper {
    overflow-x: auto;
  }

  table.srt {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  :is(.card, .lf-card, .la-card, .la-doc, .ly__body, .field, .s-card, .fd-card, .hk-card, .panel) > table,
  .paper > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .mt-s {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mt-s > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .svw {
    position: relative;
  }

  .svw > * {
    min-width: 0;
  }

  .sv-hero__n {
    flex-wrap: wrap;
  }
}

/* ───────── Phone: step bars scroll, wide listing tables keep readable columns ───────── */
@media (max-width: 760px) {
  .rs05-main .stabs--steps > .stabs__list,
  .stabs--steps > .stabs__list {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .rs05-main .stabs--steps > .stabs__list label,
  .stabs--steps > .stabs__list label {
    flex: 0 0 auto;
  }

  /* a table of five columns or more in a scrolling box scrolls instead of squeezing every column */
  :is(.s-scroll, [class*="scroll"]) > table:has(> thead > tr > :nth-child(5)):not(.srt) {
    min-width: 620px;
  }
}

/* ───────── Phone: top bar of the JavaScript pages (CM-02, RSS-01, dev tools) ───────── */
@media (max-width: 760px) {
  .topbar > .btn--icon[aria-label="Command palette"],
  .topbar > .btn--icon[aria-label="Help for this screen"],
  .topbar > .btn--icon[aria-label="Switch light / dark theme"],
  .topbar > .btn--icon[aria-label="Switch Comfortable / Compact density"] {
    display: none;
  }

  .topbar__new span {
    display: none;
  }

  .topbar__new {
    padding: 0 13px;
  }
}

/* ───────── Phone: last single-column sections whose content asked for more width ───────── */
@media (max-width: 760px) {
  .fl,
  .pmc__b {
    grid-template-columns: minmax(0, 1fr);
  }

  .fl > *,
  .pmc__b > * {
    min-width: 0;
  }

  .pmc__b > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .rt__h {
    flex-wrap: wrap;
    min-width: 0;
  }

  .lo3-tabbar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lo3-tab {
    flex: none;
  }
}

@media (max-width: 760px) {
  /* a long value is cut inside its filter pill instead of spilling out of it */
  .hf-f {
    overflow: hidden;
  }

  .hf-f__c {
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
  }
}

/* very small phones (≤ 420 px): short texts inside tiles, sub-lines and rows may break anywhere instead of leaving the screen */
@media (max-width: 420px) {
  .st-tile,
  .st-tile__v,
  .st-tile__l,
  .st-tile__u {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(.app__content small, .fd-sub, .fd-muted, .gp-row > span, .btn--xs, .vc-who) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}