/* Shared responsive layer for every ".wf" pixel-matched wireframe page
   (Dashboard/Rota/Employees/Shifts/ComplianceReport/PayrollExport/Kiosk/
   StaffClock). Each page keeps its own <style> block for the fixed desktop
   layout; this file only adds @media overrides for narrower viewports.

   Two reusable structural classes replace what used to be one-off inline
   widths, so there's never a specificity fight between this stylesheet and
   a page's own inline <style> block:
     .wf-split / .wf-side   — a "main content + fixed-width side panel" row
                               that stacks on narrower screens.
     .wf-scroll/-inner      — a data grid that scrolls horizontally instead
                               of squishing illegibly on narrow screens. */

.wf-split { display: flex; align-items: flex-start; }
.wf-side { flex: none; }

.wf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wf-scroll-inner { min-width: 600px; }

@media (max-width: 900px) {
  .wf-split { flex-direction: column; width: 100%; min-height: 0 !important; }
  .wf-split > :not(.wf-side) {
    flex: none !important;
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
  }
  .wf-side {
    width: 100% !important;
    max-width: none !important;
    border-left: none !important;
    border-top: 2px solid #201e1d;
    padding-left: 0 !important;
    padding-top: 18px !important;
    margin-top: 18px;
    max-height: none !important;
    position: static !important;
  }
}

@media (max-width: 560px) {
  .container { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .nav { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; row-gap: var(--space-2); }
  .nav-links { gap: var(--space-3) !important; }

  /* Safe app-wide default: short button/field pairs (Save/Cancel, two dates,
     etc.) stack instead of squishing. Anything that must stay side-by-side
     regardless (e.g. StaffClock's timer split) already sets its own
     .flex-wrap:nowrap or a dedicated override, which wins via source order
     inside that page's own later <style> block. */
  .row.g8, .row.g12, .row.g16 { flex-wrap: wrap; }
}