/* ═══════════════════════════════════════════════════════════════════════ 80-responsive.css — Canonical responsive tier file (mobile-first cascade) ═══════════════════════════════════════════════════════════════════════ Goal: replace the ad-hoc `@media (max-width: ...)` zoo scattered across blueprints (12+ distinct breakpoints) with FIVE canonical tiers, all driven by `min-width` (mobile-first). Existing 70-mobile.css legacy rules continue to load and are NOT removed — they coexist; new code should target the tiers below and migrate piecewise. Tier breakpoints (mobile-first — each tier is "AT this width and up"): --bp-sm 480px — large mobile / small tablet portrait --bp-md 768px — tablet portrait --bp-lg 1024px — tablet landscape / small laptop entry --bp-xl 1366px — laptop-small mainstream (THE GAP — was missing) --bp-2xl 1600px — laptop-large / desktop Helpers exposed for templates / blueprints: .container-fluid responsive max-width container .stack-on-mobile flex-column under 768px, row above .hide-below-{sm|md|lg|xl} visibility utility .hide-above-{sm|md|lg|xl} visibility utility .grid-1 single column under 768 .grid-1-md-2 1 col mobile → 2 col tablet .grid-1-md-2-lg-3 1 → 2 → 3 col staircase .grid-1-md-2-lg-3-xl-4 1 → 2 → 3 → 4 col staircase To add a tier-specific tweak in a blueprint CSS, prefer: @media (min-width: 1024px) { ... } /* lg+ */ over the legacy `max-width: 1024px` form. Mixed direction = cascade pain. ═══════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════════ CRITICAL FIX — 17 May 2026 — `@layer mobile-responsive` wrapper REMOVED -------------------------------------------------------------------- Pre-fix symptom: Chromium 146 was silently dropping the entire 492-line @layer block from CSSOM (verified via document.styleSheets probe — `total: 2` top-level rules instead of expected 23+, with `layerSamples: []` despite balanced braces 148/148). All mobile rules silently inert: `.g24-nav-inline` rendering at 320px (should be hidden), `.g24-kpi-grid` not collapsing on mobile (4-col at 320px), sidebar 190px on phones (should overlay), body.scrollWidth=588 at 320px viewport = 268px horizontal overflow. Sibling design-system @layer blocks were fine (components: 414 rules, utilities: 208, states: 57) — issue was file-specific. Resolution: unwrap the layer so rules sit at file scope. They now tie with 60-dashboard-base.css (also unlayered) in cascade priority, and 80-responsive.css loads LATER in so source-order tiebreak keeps mobile rules winning. Net cascade effect identical to intended design; layer-statement still declared in 00-tokens.css (becomes an empty named layer — harmless). ═════════════════════════════════════════════════════════════════════ */ :root { --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1366px; --bp-2xl: 1600px; --container-pad-x: var(--space-4); } /* ─── Default (mobile baseline, < 480px) ───────────────────────────── */ .container-fluid { width: 100%; max-width: 100%; margin-inline: auto; padding-inline: var(--container-pad-x); } .stack-on-mobile { display: flex; flex-direction: column; gap: var(--space-3); } .grid-1, .grid-1-md-2, .grid-1-md-2-lg-3, .grid-1-md-2-lg-3-xl-4 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } /* Base visibility — overridden by tier rules below. */ .hide-below-sm, .hide-below-md, .hide-below-lg, .hide-below-xl { display: none !important; } /* ─── sm tier (≥ 480px) — large mobile / phablet ───────────────────── */ @media (min-width: 480px) { :root { --container-pad-x: var(--space-5); } .container-fluid { max-width: 100%; } .hide-below-sm { display: revert !important; } .hide-above-sm { display: none !important; } } /* ─── md tier (≥ 768px) — tablet portrait ──────────────────────────── */ @media (min-width: 768px) { :root { --container-pad-x: var(--space-6); } .container-fluid { max-width: 768px; } .stack-on-mobile { flex-direction: row; gap: var(--space-4); } .grid-1-md-2, .grid-1-md-2-lg-3, .grid-1-md-2-lg-3-xl-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hide-below-md { display: revert !important; } .hide-above-md { display: none !important; } /* Tables — when a table is wrapped in `.responsive-table`, allow horizontal scroll on tablet+ instead of word-wrapping. */ .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ─── lg tier (≥ 1024px) — tablet landscape / laptop entry ─────────── */ @media (min-width: 1024px) { .container-fluid { max-width: 1024px; } .grid-1-md-2-lg-3, .grid-1-md-2-lg-3-xl-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hide-below-lg { display: revert !important; } .hide-above-lg { display: none !important; } /* Sidebar — at lg, default state is COMPACT (icon-only) so main content gets ~960px to play with. The sidebar's full state is restored at xl. */ .g24-sidebar.is-auto-compact { width: var(--sidebar-width-compact); } .g24-sidebar.is-auto-compact .sb-item-label, .g24-sidebar.is-auto-compact .sb-label { display: none; } } /* ─── xl tier (≥ 1366px) — laptop-small mainstream ──────────────────── This is THE breakpoint that was missing in the legacy cascade. Most modern Indian laptops ship at 1366×768; the previous 1024 → default jump made this segment look cramped. */ @media (min-width: 1366px) { .container-fluid { max-width: 1280px; } .grid-1-md-2-lg-3-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hide-below-xl { display: revert !important; } .hide-above-xl { display: none !important; } /* Sidebar restored to full width with labels visible. */ .g24-sidebar.is-auto-compact { width: var(--sidebar-width); } .g24-sidebar.is-auto-compact .sb-item-label, .g24-sidebar.is-auto-compact .sb-label { display: revert; } } /* ─── 2xl tier (≥ 1600px) — laptop-large / desktop ─────────────────── */ @media (min-width: 1600px) { .container-fluid { max-width: 1480px; } /* Allow page chrome to breathe with bigger gaps + paddings. */ :root { --container-pad-x: var(--space-8); } } /* ─── Safe-area-inset support (iOS notches, Android gesture bars) ──── */ @supports (padding: env(safe-area-inset-bottom)) { body { padding-bottom: env(safe-area-inset-bottom); } } /* ─── Touch-target minimum (Apple HIG / Google MD: 44×44 / 48×48) ──── */ @media (pointer: coarse) { button, a.button, .g24-tap-target { min-height: 44px; min-width: 44px; } } /* ─── Reduced-motion override (accessibility) ──────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ─── Mobile Table Priority Columns (UX-6 · 9 May 2026) ───────────── .g24-col-priority — always visible (SKU, ASIN, name, status) .g24-col-optional — hidden below 640px; visible on tablet+ .g24-table-mobile-wrap — scrollable wrapper with right-fade hint .g24-table-sticky-first — sticks first column during horiz scroll .g24-scroll-hint — "← swipe →" badge shown on mobile only */ .g24-table-mobile-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } .g24-table-mobile-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(to right, transparent, var(--color-bg)); pointer-events: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: opacity .2s; } .g24-table-mobile-wrap.scrolled-end::after { opacity: 0; } .g24-scroll-hint { display: none; font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; padding: 2px var(--space-2) var(--space-1); } .g24-table-sticky-first th:first-child, .g24-table-sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface-card); box-shadow: 2px 0 4px rgba(0,0,0,.15); } @media (max-width: 640px) { .g24-col-optional { display: none !important; } .g24-scroll-hint { display: block; } .g24-table-mobile-wrap table th, .g24-table-mobile-wrap table td { padding: var(--space-2) !important; font-size: var(--text-xs) !important; white-space: nowrap; } .g24-col-priority { font-weight: var(--weight-medium); } } @media (min-width: 641px) { .g24-col-optional { display: revert !important; } .g24-scroll-hint { display: none !important; } } /* ═════════════════════════════════════════════════════════════════════ UX Audit 10 May 2026 — Wave 5 mobile audit (375px findings) -------------------------------------------------------------------- ALL rules below are mobile-only (≤768px). Desktop layout untouched. Each rule targets a known cramped/overflowing element identified by the static CSS-rule audit; the agent confirmed no @media rule exists today for any of these. Adding (not modifying) is safe. ═════════════════════════════════════════════════════════════════════ */ /* 1. KPI/hub grids — collapse multi-column grids to 2-col then 1-col. Targets verified by audit: .sc-cards-grid, .fk-dash-cards-grid, .sc-hub-grid, .ar-feature-grid, .sv2-grid. None had a mobile rule; cells were rendering 75-95px wide at 375px → unreadable. */ @media (max-width: 600px) { .sc-cards-grid, .fk-dash-cards-grid, .sc-hub-grid, .ar-feature-grid, .sv2-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-2) !important; } } @media (max-width: 420px) { .sc-cards-grid, .fk-dash-cards-grid, .sc-hub-grid, .ar-feature-grid, .sv2-grid { grid-template-columns: 1fr !important; } } /* 2. Settings tab strip — 16 super_admin tabs wrap to 4-5 ugly rows on mobile. Switch to single-row horizontal swipe (existing pattern used elsewhere via .g24-table-mobile-wrap, here applied directly). */ @media (max-width: 640px) { .settings-tabs { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .settings-tabs > * { flex-shrink: 0; } } /* 3. Listings Editor sister tables — `.le-listings-table` already has a mobile rule at 500px; the four sister tables in the same blueprint (suppression / cert / score / impact) had none. Wrap them in a horizontal-scroll container to prevent page-wide overflow. Pure mobile-only; desktop unchanged. */ @media (max-width: 640px) { .le-suppression-table, .le-cert-table, .le-score-table, .le-impact-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ═════════════════════════════════════════════════════════════════════ UX-Responsive Wave A — 17 May 2026 Canonical KPI / card grid — replaces the 9+ per-blueprint variants (.sc-cards-grid, .fk-dash-cards-grid, .sv2-grid, .ar-feature-grid, .as-kpi-grid, .ah-metrics-grid, .sc-hub-grid). Blueprints should migrate when touched. ═════════════════════════════════════════════════════════════════════ */ .g24-kpi-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); } .g24-kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g24-kpi-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .g24-kpi-grid--auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } @media (max-width: 1024px) { .g24-kpi-grid, .g24-kpi-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .g24-kpi-grid, .g24-kpi-grid--3, .g24-kpi-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .g24-kpi-grid, .g24-kpi-grid--3, .g24-kpi-grid--6, .g24-kpi-grid--auto { grid-template-columns: 1fr; } } /* Mobile thumb-reach action bar — UX Bible §1.23. Hidden on desktop; shows fixed-bottom on mobile with safe-area-inset padding for notches. */ .g24-action-bar-mobile { display: none; } @media (max-width: 640px) { .g24-action-bar-mobile { display: flex; gap: var(--space-2); position: fixed; left: 0; right: 0; bottom: 0; padding: var(--space-3) calc(var(--space-3) + env(safe-area-inset-right, 0px)) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) calc(var(--space-3) + env(safe-area-inset-left, 0px)); background: var(--color-surface-card, #fff); border-top: 1px solid var(--color-border-default, #e5e7eb); z-index: var(--z-sticky, 100); } .g24-action-bar-mobile > * { flex: 1; } } /* ═════════════════════════════════════════════════════════════════════ Migrated from 70-mobile.css (retired 17 May 2026 — Wave 3 Agent 2) -------------------------------------------------------------------- Legacy desktop-first (max-width) rules covering the dashboard shell (.g24-header / .g24-sidebar / .g24-main / .g24-body / .g24-right / .g24-ctx-switch / .form-row / .settings-container). Kept in max-width direction because they all target the legacy shell classes — inverting to min-width would require auditing every blueprint and is out of scope for the dedup pass. New responsive rules MUST use min-width per the cascade contract. Conflicts resolved: `.settings-tabs` mobile-swipe block was DROPPED from the migration — 80-responsive.css already has a more complete version (lines 253-261 above) with scrollbar-width:thin + child flex-shrink. The 70-mobile version was a subset duplicate. ═════════════════════════════════════════════════════════════════════ */ /* ─── Tablet ≤ 1024px (legacy shell — desktop-first) ──────────────── */ @media (max-width: 1024px) { .g24-sidebar { width: var(--sidebar-width-compact); overflow: hidden; } .g24-sidebar a span, .g24-sidebar .sb-label { display: none; } .g24-sidebar .g24-star { margin-left: 0; } .g24-main { margin-left: var(--sidebar-width-compact); } body.sb-collapsed .g24-main { margin-left: 0; } .g24-ctx-switch label { display: none; } .g24-card-grid, .card-grid { grid-template-columns: repeat(2, 1fr); } .g24-stats-row { flex-wrap: wrap; } .g24-stat-tile { flex: 0 0 calc(50% - 8px); min-width: 140px; } } /* ─── Mobile ≤ 640px (legacy shell + sidebar overlay) ─────────────── */ @media (max-width: 640px) { /* Sidebar: hidden by default; slides in as overlay when hamburger clicked */ .g24-sidebar { display: none !important; } body:not(.sb-collapsed) .g24-sidebar { display: block !important; position: fixed !important; top: 50px !important; left: 0 !important; bottom: 0 !important; width: 260px !important; /* Wave B7 (17 May 2026): safe-area-inset for iPhone landscape left-notch + home-indicator. */ padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0)) env(safe-area-inset-left, 0) !important; overflow-y: auto !important; z-index: var(--z-sticky) !important; box-shadow: 4px 0 28px rgba(0,0,0,0.55); } /* A1: Show sidebar menu text + labels in mobile overlay state (tablet rule at ≤1024px hides span/sb-label — override for overlay) */ body:not(.sb-collapsed) .g24-sidebar a span, body:not(.sb-collapsed) .g24-sidebar .sb-label { display: block !important; } /* A2: Remove sidebar right-border in mobile overlay (looks like a horizontal line) */ body:not(.sb-collapsed) .g24-sidebar { border-right: none !important; } /* Backdrop managed by JS (_g24_updateMobileBackdrop) — not CSS pseudo-element because CSS ::after with pointer-events:all can block touch events on mobile. */ .g24-main { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; min-width: 0 !important; box-sizing: border-box; } .g24-header { height: auto; min-height: 50px; flex-wrap: wrap; padding: 6px 10px; gap: 6px; } .g24-header .g24-logo { font-size: var(--text-lg); padding-right: 10px; margin-right: 6px; } .g24-nav-inline { display: none; } /* ─── Wave 7-A (17 May 2026) — universal mobile table-overflow guard Any blueprint container that holds a dynamically-injected raw gets horizontal scroll on mobile. Prevents page-level overflow when JS emits unwrapped

via innerHTML (caught in /aplus monitor snippet). Opt-in: add `data-table-scroll` to any new container, OR use existing .ap-snippet / .table-wrap conventions. ─── */ .ap-snippet, .table-wrap, [data-table-scroll] { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .ap-snippet > table, .table-wrap > table, [data-table-scroll] > table { min-width: 0; } .g24-right { display: flex; flex-wrap: wrap !important; gap: 4px; width: 100% !important; min-width: 0; overflow: hidden; } .g24-search-wrap, #themeBtn { display: none !important; } .g24-user-btn { max-width: 92px; overflow: hidden; text-overflow: ellipsis; } .g24-ctx-btn { width: min(190px, calc(100vw - 128px)); max-width: min(190px, calc(100vw - 128px)); } .g24-ctx-switch { width: 100%; flex-wrap: wrap; } .g24-ctx-switch label { display: none; } .g24-ctx-chips { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } .g24-body { margin-top: 0; overflow-x: hidden; } .g24-main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .g24-card-grid, .card-grid { grid-template-columns: 1fr; } .g24-stat-tile { flex: 0 0 100%; min-width: unset; } .form-row { flex-direction: column; align-items: stretch; gap: 4px; } .form-row label { flex-basis: auto; font-size: var(--text-sm); } .form-row label { min-width: 0 !important; width: auto !important; } .form-row input, .form-row select, .form-row textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .settings-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding: 0 8px !important; } .config-section { max-width: 100% !important; box-sizing: border-box; padding: 12px !important; } /* `.settings-tabs` mobile-swipe is owned by the canonical block above (line ~253) — 70-mobile.css subset duplicate dropped. */ .settings-hint-row { margin-left: 0; } } /* ─── Mid-range tablet 641px–900px (legacy header wrap fix) ───────── Fix: .g24-right (search, refresh, last-run) was pushed off-screen at 768–900px because the header was a single non-wrapping flex row. Solution: wrap header, push nav below, hide verbose last-run text. */ @media (max-width: 900px) { .g24-header { flex-wrap: wrap; height: auto; min-height: 50px; padding: 4px 8px; } .g24-nav-inline { display: none !important; } .g24-right { order: 2; flex-shrink: 0; flex-wrap: nowrap; gap: 4px; } .g24-body { margin-top: 112px; } .g24-last-run { display: none; /* hide verbose last-run text; keep search + refresh buttons */ } } @media (max-width: 640px) { .g24-body { margin-top: 112px !important; } } /* (former `} /* @layer mobile-responsive */` close-brace REMOVED in matching 17 May 2026 fix above — see top-of-file CRITICAL FIX banner for rationale.) */ /* ═════════════════════════════════════════════════════════════════════ UNLAYERED legacy override block (migrated from 70-mobile.css) -------------------------------------------------------------------- Kept UNLAYERED — same as the original 70-mobile.css file — because these rules rely on unlayered specificity to win against layered blueprint CSS at narrow widths. Moving inside @layer would silently demote them and the header would collapse on tablets. g24RightEnd / g24RightMoreBtn visibility is managed by JS (initRightOverflow) which uses pixel-accurate measurement — no fixed breakpoint needed here. ═════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .g24-header { height: 112px !important; min-height: 112px !important; align-content: flex-start; } .g24-header .g24-logo { height: 52px !important; } .g24-body { margin-top: 112px !important; min-height: calc(100vh - 112px) !important; } .g24-sidebar { top: 112px !important; } } /* ═══════════════════════════════════════════════════════════════════════ Wave 7-A (17 May 2026) — UNIVERSAL TABLE → CARD MOBILE TRANSFORM Pattern: add `class="responsive-table"` to any

+ `data-label="..."` on every ` ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { table.responsive-table { display: block; width: 100%; border: none; background: transparent; box-shadow: none; } table.responsive-table thead { /* Hide the header row on mobile — `data-label` carries the column name */ display: none; } table.responsive-table tbody { display: flex; flex-direction: column; gap: 10px; } table.responsive-table tr { display: flex; flex-direction: column; gap: 4px; background: var(--card-bg, var(--color-surface-card, #fff)); border: 1px solid var(--card-border, var(--color-border-default, #e4e7eb)); border-radius: var(--radius-md, 8px); padding: 12px 14px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); margin: 0; } table.responsive-table tr.is-selected { background: var(--tone-info-bg); border-color: var(--tone-info-border, var(--tone-info-bd, var(--card-border))); } table.responsive-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: none; text-align: right; font-size: var(--text-compact, 13px); line-height: 1.4; overflow: visible; white-space: normal; word-break: break-word; max-width: none; } table.responsive-table td::before { content: attr(data-label); flex: 0 0 auto; font-weight: var(--weight-semibold, 600); color: var(--text-muted, var(--color-text-muted, #6b7280)); font-size: var(--text-xs, 11px); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; min-width: 70px; } /* Hide the ::before when data-label is empty (e.g. checkbox/action-only cell) */ table.responsive-table td[data-label=""]::before, table.responsive-table td:not([data-label])::before { display: none; } /* Primary cell (SKU / item name) renders prominent at card top, full width */ table.responsive-table td.rt-primary { flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 6px; border-bottom: 1px dashed var(--card-border, var(--color-border-default, #e4e7eb)); margin-bottom: 4px; text-align: left; } table.responsive-table td.rt-primary::before { color: var(--text-dim, var(--color-text-dim, #9ca3af)); } /* Status pill cell — promote pill to card top-right corner */ table.responsive-table td.rt-status { position: absolute; top: 12px; right: 14px; padding: 0; background: transparent; } table.responsive-table td.rt-status::before { display: none; } /* Card itself becomes a positioning context for .rt-status pill */ table.responsive-table tr { position: relative; } /* Checkbox / bulk-select cell — small, no label */ table.responsive-table td.rt-checkbox { position: absolute; top: 10px; left: 8px; padding: 0; } table.responsive-table td.rt-checkbox::before { display: none; } /* Action button row at card bottom */ table.responsive-table td.rt-actions { flex-direction: row; justify-content: flex-start; gap: 8px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--card-border, var(--color-border-default, #e4e7eb)); text-align: left; } table.responsive-table td.rt-actions::before { display: none; } }

. On mobile (≤640px) the table re-flows into stacked cards, each row becoming a card with its column-label rendered before the value. Desktop view (>640px) is 100% unchanged — table renders normally. Opt-in only — existing tables without the class keep their current horizontal-scroll behaviour (.ap-snippet etc. handles that). Bonus: optional	on the SKU/name cell promotes it to card-title styling;	promotes a status pill cell to card-corner placement. Example usage in JS template literal: `
${sku}	`${asin}`	${st}	${priceINR}