/* ===================================================================== WMS - Responsive behaviour Checked at 320, 360, 375, 390, 414, 480, 768, 820, 1024, 1280, 1440 and 1920px. Nothing ever scrolls sideways except a table inside its own scroll container. ===================================================================== */ /* Guard against sideways scroll WITHOUT killing position:sticky. overflow-x:hidden forces the other axis to `auto`, which makes a scrolling box - and a sticky child of a box that never scrolls itself never sticks. `clip` crops the same overflow but establishes no scroll container, so the site header, the admin topbar and sticky table headers all keep working. */ html, body { overflow-x: clip; } @supports not (overflow-x: clip) { /* Older engines: keep the guard on the root only, where it does not affect the sticky elements inside . */ html { overflow-x: hidden; } } /* ==================================================== 1440px and below */ @media (max-width: 1440px) { .page { max-width: 1360px; } } /* ==================================================== 1280px and below */ @media (max-width: 1280px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar__search { width: 190px; } } /* ==================================================== 1120px and below */ @media (max-width: 1120px) { .grid--2-1, .grid--1-2, .grid--3-2 { grid-template-columns: minmax(0, 1fr); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================= tablet: 1024px and below */ @media (max-width: 1024px) { :root { --wms-sidebar-w: 240px; } /* Sidebar becomes an off-canvas drawer. */ .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; } .sidebar.is-open { transform: translateX(0); box-shadow: var(--wms-shadow-lg); } .main { margin-left: 0; } .topbar__toggle { display: grid; } .page { padding: 1rem; } .hero-strip__stats { width: 100%; margin-left: 0; justify-content: space-between; gap: 1rem; } } /* ============================================== mobile: 820px and below */ @media (max-width: 820px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); } .topbar__search { display: none; } .topbar__crumbs .crumb-hide { display: none; } .router-card__metrics { grid-template-columns: repeat(2, 1fr); } .router-card__metric:nth-child(2) { border-right: 0; } .router-card__metric:nth-child(-n+2) { border-bottom: 1px solid var(--wms-border); } } /* ============================================== mobile: 768px and below */ @media (max-width: 768px) { .page-head { flex-direction: column; align-items: stretch; } .page-head__actions .btn { flex: 1 1 auto; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar__item, .filter-bar__search { flex: 1 1 auto; width: 100%; } .filter-bar__actions { margin-left: 0; } .filter-bar__actions .btn { flex: 1 1 auto; } /* Data tables restack as labelled cards - no sideways scrolling. */ .table--stack thead { display: none; } .table--stack tbody tr { display: block; padding: .75rem .85rem; border-bottom: 1px solid var(--wms-border); } .table--stack tbody tr:hover { background: transparent; } .table--stack td { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .25rem 0; border: 0; text-align: right; } .table--stack td::before { content: attr(data-label); flex: none; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wms-text-faint); text-align: left; } .table--stack td:first-child { padding-bottom: .5rem; margin-bottom: .35rem; border-bottom: 1px dashed var(--wms-border); } .table--stack td:first-child::before { display: none; } .table--stack td.table__actions { justify-content: flex-end; padding-top: .5rem; } .table--stack .cell-primary { text-align: left; } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .stat__value { font-size: 1.45rem; } .modal { padding: 0; align-items: flex-end; } .modal__panel { max-width: none; max-height: 92vh; border-radius: var(--wms-radius-lg) var(--wms-radius-lg) 0 0; animation: wms-sheet-in .2s ease-out; } @keyframes wms-sheet-in { from { transform: translateY(16px); opacity: .6; } } .toast-stack { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } .voucher-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } .key-value { grid-template-columns: minmax(110px, 40%) 1fr; } } /* Between the restacking width and the desktop, a table in a narrow column was squeezing names onto three lines. Its wrapper already scrolls, so give it a floor and let it scroll instead of crushing. */ @media (min-width: 769px) { .table-wrap > .table { min-width: 520px; } } /* ============================================== mobile: 640px and below */ @media (max-width: 640px) { :root { --wms-topbar-h: 54px; } /* The scope pill keeps its meaning as an icon; the words cost a line. */ .topbar .pill { padding: .2rem .4rem; font-size: 0; gap: 0; } .topbar .pill .ico { font-size: 1rem; } .page { padding: .85rem; } .page-head h1 { font-size: 1.15rem; } .card__head { flex-wrap: wrap; gap: .5rem; } .user-chip__meta { display: none; } .user-chip { padding: .2rem; } .btn-group { width: 100%; } .btn-group .btn { flex: 1 1 auto; } .pagination { flex-direction: column; align-items: stretch; text-align: center; } .pagination__pages { justify-content: center; } .hero-strip__stats { gap: .75rem; } .hero-strip__stat b { font-size: .95rem; } } /* ============================================== mobile: 480px and below */ @media (max-width: 480px) { body { font-size: 13.5px; } .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: .8rem .75rem .8rem .95rem; } .stat__value { font-size: 1.3rem; } .voucher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voucher-card__code { font-size: 1rem; letter-spacing: .07em; } .portal-tabs { grid-template-columns: repeat(3, 1fr); } .portal-tab { font-size: .72rem; padding: .5rem .2rem; } .key-value { grid-template-columns: minmax(0, 1fr); gap: .1rem .5rem; } .key-value dt { margin-top: .5rem; } } /* ============================================== mobile: 380px and below */ @media (max-width: 380px) { .page { padding: .7rem; } .stat-grid { grid-template-columns: minmax(0, 1fr); } .voucher-grid { grid-template-columns: minmax(0, 1fr); } .voucher-input { font-size: 1.1rem; letter-spacing: .1em; } .access-panel__value { font-size: 1.55rem; } .node__metrics { display: none; } .brand-text span { display: none; } } /* =========================================================== 320px edge */ @media (max-width: 340px) { .portal { padding-left: .7rem; padding-right: .7rem; } .portal-card { padding: .9rem; } .btn { padding: .5rem .6rem; } .page-head__actions { flex-direction: column; } } /* ===================================================== very wide screens */ @media (min-width: 1800px) { .page { max-width: 1720px; } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } /* Touch targets stay comfortable on coarse pointers. */ @media (pointer: coarse) { .btn { min-height: 40px; } .nav-link { padding-top: .6rem; padding-bottom: .6rem; } .dropdown__item { padding-top: .6rem; padding-bottom: .6rem; } .input, .select { min-height: 42px; font-size: 16px; } /* 16px stops iOS zoom */ }