/* ============================================================ Vodegero — Compact-desktop layer. Loaded AFTER layout.css and BEFORE mobile.css. It owns one band: the laptop. `mobile.css` still loads last, so a phone or a touch screen always outranks anything here. Why the band exists ------------------- Every metric in tokens/ and components.css was authored for a ~1240px content canvas. The admin shell spends 256px of the viewport on a permanent sidebar plus 48px of gutters, so the content column is the viewport MINUS ~304px: viewport 1280 -> 976 content viewport 1600 -> 1296 content viewport 1366 -> 1062 content viewport 1920 -> 1616 content A 1280x800 laptop therefore renders a canvas 21% narrower than the one the type scale, 24px card padding, 42px buttons and 30px stat numbers were sized for — and does it on a viewport that is also 40% shorter. Nothing was broken; everything was simply a size too big, and the effect compounds down a page of stacked cards. Two kinds of rule, deliberately separated: @media (max-width: 1439px) DENSITY — padding, type, control heights. Safe to run all the way down; mobile.css re-states what a phone needs differently. @media (min-width: 1025px) and (max-width: 1439px) LAYOUT — column counts and shell metrics. Must NOT leak below 1025px, where layout.css has already collapsed the rail and the 4-up grids. This file loads later, so an unbounded rule here would silently re-expand them. 1440px is the cut because 1440 - 304 = 1136px of content, close enough to the 1240px canvas to leave the design alone. Everything is token-driven; no hard-coded colour. ============================================================ */ /* ------------------------------------------------------------ DENSITY — 1439px and down ------------------------------------------------------------ */ @media (max-width: 1439px) { /* Re-pad every card from the token rather than from `.vg-card`, so the surfaces that align to a card edge without being one — the table toolbar, the table foot, `.vg-danger-card`'s bands — move with it and stay flush. Overriding `.vg-card { padding }` alone would knock all of those 4px out of alignment. */ :root { --pad-card: var(--space-5); } .vg-card--pad-lg { padding: var(--space-6); } .vg-card__header { margin-bottom: var(--space-3); } .vg-card__foot { margin-top: var(--space-3); padding-top: var(--space-3); } /* Page head. 30px display type over a breadcrumb, a badge row and a button cluster spent ~150px before the first card. */ .vg-page-head { margin-bottom: var(--space-6); } .vg-page-head__title { font-size: var(--text-2xl); } .vg-page-head__sub { font-size: var(--text-sm); } /* Stat tiles — the single biggest vertical spend on an admin dashboard. */ .vg-stat__icon { width: 28px; height: 28px; margin-bottom: 0; } .vg-stat__value { font-size: var(--text-2xl); } .vg-stat__label { font-size: var(--text-xs); } /* Empty states. 80px of vertical padding around a 56px medallion turns "no photos yet" into the tallest thing on the page. */ .vg-empty { padding: var(--space-8) var(--space-5); gap: var(--space-2); } .vg-empty__icon { width: 44px; height: 44px; } /* Tables. 14px rows in a 10-column admin table are what force the horizontal scroll; the cells, not the columns, are the problem. */ .vg-table thead th { padding: 9px 12px; } .vg-table tbody td { padding: 10px 12px; font-size: var(--text-sm); } /* ---- Admin control density ------------------------------- Scoped to `.vg-admin`: the public marketplace pages are a conversion surface and keep the generous 42px control. A form with 40 fields is not, and 6px per control compounds. mobile.css loads after this and restores a 44px floor under (pointer: coarse), so a touch laptop keeps its hit targets. ---------------------------------------------------------- */ .vg-admin .vg-btn { font-size: var(--text-sm); padding: 9px 16px; min-height: 36px; } .vg-admin .vg-btn--sm { padding: 7px 12px; min-height: 32px; } .vg-admin .vg-btn--lg { font-size: var(--text-base); padding: 12px 20px; min-height: 42px; } .vg-admin .vg-icon-btn { width: 34px; height: 34px; } .vg-admin .vg-icon-btn--sm { width: 30px; height: 30px; } /* Field font-size is deliberately untouched — mobile.css sets 16px under (pointer: coarse) to stop iOS zooming into a focused control, and a smaller value here would be a same-property fight it has to win. */ .vg-admin .vg-field { gap: 4px; } .vg-admin .vg-input-wrap { padding: 9px 12px; } .vg-admin .vg-input--bare { padding: 9px 12px; } .vg-admin .vg-select { padding: 9px 34px 9px 12px; } .vg-admin textarea.vg-input--bare { min-height: 84px; } .vg-admin .vg-label { font-size: var(--text-xs); } } /* ------------------------------------------------------------ LAYOUT — the laptop band only, 1025px to 1439px Bounded at the bottom on purpose. layout.css already collapses `.vg-grid--rail` and demotes `.vg-grid--4` at 1024px; this file loads after it, so an unbounded rule would out-cascade that and hand a 700px tablet a 300px rail. ------------------------------------------------------------ */ @media (min-width: 1025px) and (max-width: 1439px) { /* Buy back 32px of content from the sidebar and 8px from the topbar. 224px still holds the widest nav label ("Warehouses") at its icon. */ .vg-admin { --vg-side-w: 224px; --vg-topbar-h: 56px; } .vg-admin__main { padding: var(--space-6) var(--space-5) var(--space-9); } /* Rail. 360px + a 24px gap took 384px of a 976px canvas, leaving 592px for a form the same page renders 4 columns into. */ .vg-grid--rail { grid-template-columns: minmax(0, 1fr) 300px; } .vg-grid--sidebar { grid-template-columns: 240px minmax(0, 1fr); } /* Field grids. Beside a 300px rail the form column is ~650px at 1280px; 3-up puts a labelled control in 200px and 4-up in 145px. Both truncate the label before the value. 2-up is the widest honest answer, and holding it across the whole band means a field never changes width between two laptops. Uses the same `repeat(2, ...)` layout.css hands `.vg-grid--4` at 1024px, so nothing new happens at the boundary. */ .vg-grid--3, .vg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vg-grid { gap: var(--space-5); } .vg-grid--gap-lg { gap: var(--space-6); } .vg-stack--lg { gap: var(--space-6); } .vg-section { margin-block: var(--space-7); } /* Auto-fit tracks measured against a canvas that no longer exists. */ .vg-grid--listings { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .vg-grid--stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .vg-grid--specs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } } /* ------------------------------------------------------------ Short viewports A 1366x768 laptop has ~640px of usable height under the topbar. Two stacked sticky bars (section tabs at the top, a form action bar at the bottom) can claim a fifth of it. Trim the chrome, never the content. ------------------------------------------------------------ */ @media (min-width: 901px) and (max-height: 820px) { .vg-admin { --vg-topbar-h: 56px; } .vg-admin__main { padding-block: var(--space-5) var(--space-9); } .vg-page-head { margin-bottom: var(--space-5); } .vg-formbar { padding-block: var(--space-3); } }