/* =====================================================================
PAC.CO Studio — Dashboard Mobile & iPad Redesign
---------------------------------------------------------------------
Mobile-first reorganisation of the Studio dashboard. This file only
applies at iPad and phone widths; the desktop layout is untouched.
Breakpoints
• iPad / hybrid : 641px – 1024px → two-column where useful
• Phone : ≤ 640px → single column, large taps
Information hierarchy on mobile (top → bottom):
1. Slim top bar (hamburger + title only)
2. HERO STATUS CARD — Business Health + today's revenue/orders
3. QUICK ACTIONS — Add Product / Manage Orders / More
4. KPI 2×2 grid
5. Revenue trend chart (full width)
6. Latest Orders (card list, NOT table)
7. Operations (Top Product + Inventory Health)
8. Shipping Status + Recent Events
9. Blind Box analytics (chart + KPI cards)
10. Conversion Funnel (deep analytics)
===================================================================== */
/* =====================================================================
IPAD + PHONE SHARED (≤ 1024px)
===================================================================== */
@media (max-width: 1024px) {
/* --- TOPBAR: remove module nav + account avatar -------------------- */
.ds-topbar #topbarDashboardTabs,
body.page-dashboard-active .ds-topbar #topbarDashboardTabs,
.ds-topbar .ds-topbar-tabs {
display: none !important;
}
.ds-topbar .ds-topbar-avatar {
display: none !important;
}
/* Push search to the right edge if it remains */
.ds-topbar .ds-topbar-right {
margin-left: auto;
padding-right: 12px;
}
/* --- SECONDARY FILTER/ACTION BAR: removed on touch ----------------- */
#page-dashboard .ds-dash-combined-bar {
display: none !important;
}
/* --- DASHBOARD CONTAINER ------------------------------------------- */
#page-dashboard {
gap: 14px !important;
padding-bottom: 32px;
}
/* --- HERO STATUS CARD ---------------------------------------------- */
/* Promote the status strip into a glanceable hero block with the
critical info first. Order = -1 ensures it stays on top regardless
of source order. */
#page-dashboard .ds-status-strip {
order: -2;
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"health health"
"warnings critical"
"orders revenue";
gap: 10px 12px;
padding: 14px 16px 16px;
border-width: 3px;
margin-bottom: 0;
}
#page-dashboard .ds-status-strip .ds-status-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 8px 10px;
border: 2px solid #111;
background: #faf9f6;
min-height: 56px;
justify-content: center;
}
#page-dashboard .ds-status-strip .ds-status-item:nth-child(1) {
/* Business Health — hero pill, full width */
grid-area: health;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 10px 14px;
min-height: 52px;
border-width: 3px;
}
#page-dashboard .ds-status-strip .ds-status-item:nth-child(1) .ds-status-label {
font-size: 0.78rem;
color: #111;
font-weight: 900;
letter-spacing: 0.06em;
}
#page-dashboard .ds-status-strip .ds-status-item:nth-child(1) .ds-status-badge {
font-size: 0.8rem;
padding: 6px 14px;
border-width: 2.5px;
}
#page-dashboard .ds-status-strip .ds-status-item:nth-child(2) { grid-area: warnings; }
#page-dashboard .ds-status-strip .ds-status-item:nth-child(3) { grid-area: critical; }
#page-dashboard .ds-status-strip .ds-status-item:nth-child(4) { grid-area: orders; }
#page-dashboard .ds-status-strip .ds-status-item:nth-child(5) { grid-area: revenue; }
#page-dashboard .ds-status-strip .ds-status-item .ds-status-label {
font-size: 0.6rem;
color: #666;
letter-spacing: 0.06em;
}
#page-dashboard .ds-status-strip .ds-status-item .ds-status-value {
font-size: 1.15rem;
font-weight: 900;
line-height: 1;
}
/* --- MOBILE QUICK ACTIONS ------------------------------------------ */
/* Injected via HTML: …
Hidden on desktop, shown on touch. */
#page-dashboard .ds-dash-quick-actions {
order: -1;
display: grid !important;
grid-template-columns: 1fr 1fr auto;
gap: 8px;
background: #fff;
border: 3px solid #111;
padding: 8px;
margin-bottom: 0;
}
#page-dashboard .ds-dash-quick-actions .ds-qa-btn {
appearance: none;
background: #111;
color: #fff;
border: 2px solid #111;
border-radius: 0;
padding: 0 12px;
min-height: 44px;
font-weight: 900;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}
#page-dashboard .ds-dash-quick-actions .ds-qa-btn:active {
background: #ffe600;
color: #111;
}
#page-dashboard .ds-dash-quick-actions .ds-qa-btn.ds-qa-secondary {
background: #fff;
color: #111;
}
#page-dashboard .ds-dash-quick-actions .ds-qa-btn.ds-qa-secondary:active {
background: #ffe600;
}
#page-dashboard .ds-dash-quick-actions .ds-qa-btn.ds-qa-more {
background: #fff;
color: #111;
width: 44px;
padding: 0;
font-size: 1rem;
}
/* Quick-actions overflow sheet */
#page-dashboard .ds-dash-qa-sheet {
display: none;
position: fixed;
inset: auto 0 0 0;
background: #fff;
border-top: 3px solid #111;
padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
z-index: 2000;
flex-direction: column;
gap: 8px;
box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
animation: dashQaSheetIn 0.18s ease-out;
}
#page-dashboard .ds-dash-qa-sheet.open { display: flex; }
#page-dashboard .ds-dash-qa-sheet button {
appearance: none;
background: #fff;
color: #111;
border: 2px solid #111;
border-radius: 0;
padding: 0 14px;
min-height: 48px;
font-weight: 800;
font-size: 0.85rem;
text-align: left;
cursor: pointer;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.03em;
}
#page-dashboard .ds-dash-qa-sheet button:active { background: #ffe600; }
#page-dashboard .ds-dash-qa-sheet .ds-qa-sheet-close {
background: #111;
color: #fff;
margin-top: 4px;
}
@keyframes dashQaSheetIn {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.ds-dash-qa-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1999;
}
.ds-dash-qa-backdrop.open { display: block; }
/* --- ROW 1: KPI 2×2 + Chart (stack on touch) ---------------------- */
#page-dashboard .ds-dash-row-1 {
grid-template-columns: 1fr !important;
gap: 14px;
}
/* Order the KPI grid above the chart for "important info first" */
#page-dashboard .ds-dash-row-1 .ds-dash-kpi-grid-2x2 {
order: 1;
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto auto !important;
gap: 10px;
}
#page-dashboard .ds-dash-row-1 .ds-dash-chart-card {
order: 2;
min-height: 220px;
}
/* KPI cards — bigger touch target, clearer hierarchy */
#page-dashboard .ds-dash-kpi-card-new {
padding: 14px 14px 12px;
min-height: 88px;
gap: 4px;
}
#page-dashboard .ds-dash-kpi-card-new .ds-kpi-label {
font-size: 0.6rem;
}
#page-dashboard .ds-dash-kpi-card-new .ds-kpi-value {
font-size: 1.7rem;
margin: 2px 0 0;
}
#page-dashboard .ds-dash-kpi-card-new .ds-kpi-sub {
font-size: 0.58rem;
}
/* --- CHART CARD: full-width, no horizontal scroll ------------------ */
#page-dashboard .ds-dash-chart-card {
padding: 12px 14px 10px;
overflow: hidden;
}
#page-dashboard .ds-dash-chart-header {
flex-wrap: wrap;
gap: 8px;
}
#page-dashboard .ds-dash-chart-tabs {
flex-wrap: wrap;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#page-dashboard .ds-dash-chart-tabs::-webkit-scrollbar { display: none; }
#page-dashboard .ds-dash-chart-tabs .ds-chart-tab {
padding: 8px 12px;
font-size: 0.66rem;
min-height: 36px;
flex: 0 0 auto;
}
#page-dashboard .ds-dash-chart-timeframe select {
min-height: 36px;
padding: 4px 8px;
font-size: 0.68rem;
}
#page-dashboard .ds-dash-graph-container {
min-height: 180px;
width: 100%;
overflow: hidden;
}
#page-dashboard .ds-dash-graph-container svg {
width: 100% !important;
height: auto;
display: block;
}
/* --- ROW 2: Latest Orders + Shipping + Events ---------------------- */
#page-dashboard .ds-dash-three-col {
grid-template-columns: 1fr !important;
gap: 14px;
}
/* Panel card touch sizing */
#page-dashboard .ds-dash-panel-card {
padding: 14px 14px 12px;
}
#page-dashboard .ds-panel-card-title,
#page-dashboard .ds-panel-card-title-row {
font-size: 0.78rem;
padding-bottom: 8px;
margin-bottom: 10px;
}
#page-dashboard .ds-panel-card-content {
max-height: none !important;
}
/* Smaller event-feed tabs without horizontal scroll */
#page-dashboard .ds-dash-events-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
#page-dashboard .ds-dash-events-tabs .ds-feed-tab-btn {
min-height: 32px;
padding: 4px 10px;
font-size: 0.62rem;
}
/* --- LATEST ORDERS — CARD LIST INSTEAD OF TABLE -------------------- */
/* Re-flow the existing as a stack of touch-friendly cards. */
#page-dashboard #section-orders .ds-panel-card-content {
padding: 0;
overflow: visible;
}
#page-dashboard #section-orders .ds-panel-card-content > div {
max-height: none !important;
overflow: visible !important;
}
#page-dashboard .ds-latest-orders-table,
#page-dashboard .ds-latest-orders-table tbody {
display: block;
width: 100%;
}
#page-dashboard .ds-latest-orders-table thead {
display: none;
}
#page-dashboard .ds-latest-orders-table tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
padding: 12px 14px;
border: 2px solid #111;
background: #fff;
margin-bottom: 8px;
}
#page-dashboard .ds-latest-orders-table tr:hover td {
background: transparent;
}
#page-dashboard .ds-latest-orders-table td {
display: block;
padding: 0;
border-bottom: none;
font-size: 0.72rem !important;
white-space: nowrap;
}
/* Cell 1 — Order ID (left half of top row) */
#page-dashboard .ds-latest-orders-table td:nth-child(1) {
font-size: 0.78rem !important;
font-weight: 900 !important;
color: #111;
}
/* Cell 2 — Customer (full width row) */
#page-dashboard .ds-latest-orders-table td:nth-child(2) {
width: 100%;
font-size: 0.82rem !important;
font-weight: 800 !important;
color: #111;
max-width: none !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Cell 3 — Date (auto, left) */
#page-dashboard .ds-latest-orders-table td:nth-child(3) {
font-size: 0.66rem !important;
font-weight: 700 !important;
color: #555;
letter-spacing: 0.02em;
}
#page-dashboard .ds-latest-orders-table td:nth-child(3)::after {
content: " ·";
margin: 0 4px;
color: #bbb;
font-weight: 900;
}
/* Cell 4 — Items (auto, left) */
#page-dashboard .ds-latest-orders-table td:nth-child(4) {
font-size: 0.66rem !important;
font-weight: 700 !important;
color: #555;
letter-spacing: 0.02em;
}
/* Cell 5 — Total — pushed right with margin-left: auto so it aligns
with the status badge above. */
#page-dashboard .ds-latest-orders-table td:nth-child(5) {
margin-left: auto;
text-align: right;
color: #111;
font-weight: 900 !important;
font-size: 0.82rem !important;
}
/* Cell 6 — Status badge — pushed right with margin-left: auto */
#page-dashboard .ds-latest-orders-table td:nth-child(6) {
margin-left: auto;
text-align: right;
}
/* --- ROW 3: Operations grid (Top Product + Inventory Health) ------- */
#page-dashboard .ds-dash-ops-grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
/* --- ROW 4: Blind Box analytics ------------------------------------ */
#page-dashboard .ds-dash-bb-grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
#page-dashboard .ds-dash-bb-kpi-stack-new {
flex-direction: row !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px;
}
#page-dashboard #dashBlindBoxGraph {
min-height: 200px;
}
#page-dashboard .ds-dash-bb-kpi-card-real {
padding: 12px 14px;
min-height: 78px;
}
#page-dashboard .ds-bb-kpi-label { font-size: 0.6rem; }
#page-dashboard .ds-bb-kpi-value { font-size: 1.45rem; }
/* --- ROW 5: Conversion Funnel -------------------------------------- */
#page-dashboard .ds-dash-bottom-grid {
grid-template-columns: 1fr !important;
}
/* --- ENFORCE VERTICAL HIERARCHY -----------------------------------
Use flex order to push analytics-heavy sections lower regardless
of source order in the HTML. Source order on the dashboard is:
status-strip → combined-bar → row-1 → row-2 → row-3
→ row-4 (BB) → row-5 (Funnel)
Mobile preferred order:
status-strip (-2) → quick-actions (-1) → row-1 (1) → row-2 (2)
→ row-3 (3) → row-4 (4) → row-5 (5)
We assign explicit order to make this deterministic. */
#page-dashboard #section-business { order: 1; }
#page-dashboard #section-alerts { order: 2; }
#page-dashboard #section-inventory { order: 3; }
#page-dashboard #section-blindbox { order: 4; }
#page-dashboard #section-bottom-grid { order: 5; }
#page-dashboard #dashAlertBarReal { order: -3; }
/* Buttons inside cards: touch height */
#page-dashboard .ds-dash-panel-card .ds-btn-xs {
min-height: 32px;
padding: 4px 12px;
font-size: 0.65rem;
}
/* Hide the desktop-only secondary tab row inside Blind Box card */
#page-dashboard .ds-dash-bb-grid .ds-panel-card-title-row {
flex-direction: row;
align-items: center;
}
}
/* =====================================================================
IPAD HYBRID (641px – 1024px)
Bring back a measured two-column layout where it helps glanceability
while keeping every section fully readable on a 768px screen.
===================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
/* Tighter outer padding than desktop, larger than phone */
#page-dashboard {
gap: 16px !important;
padding: 4px 4px 24px;
}
/* Hero status: keep the BIG health pill full-width, but lay the
four follow-up metrics across 4 equal columns. */
#page-dashboard .ds-status-strip {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"health health health health"
"warnings critical orders revenue";
padding: 16px 18px;
gap: 12px;
}
#page-dashboard .ds-status-strip .ds-status-item {
min-height: 64px;
padding: 10px 12px;
}
#page-dashboard .ds-status-strip .ds-status-item .ds-status-value {
font-size: 1.3rem;
}
/* Quick Actions: spread out and centred */
#page-dashboard .ds-dash-quick-actions {
grid-template-columns: 1fr 1fr 1fr auto;
padding: 10px 12px;
}
#page-dashboard .ds-dash-quick-actions .ds-qa-btn {
min-height: 48px;
font-size: 0.78rem;
}
/* Row 1: KPI 2×2 next to the chart (hybrid two-column) */
#page-dashboard .ds-dash-row-1 {
grid-template-columns: minmax(280px, 360px) 1fr !important;
gap: 16px;
}
#page-dashboard .ds-dash-row-1 .ds-dash-kpi-grid-2x2 {
order: 0;
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr 1fr !important;
}
#page-dashboard .ds-dash-row-1 .ds-dash-chart-card {
order: 0;
min-height: 260px;
}
#page-dashboard .ds-dash-graph-container { min-height: 220px; }
/* Row 2: Latest Orders gets full width, Shipping + Events sit side-by-side */
#page-dashboard .ds-dash-three-col {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"orders orders"
"shipping events";
gap: 16px;
}
#page-dashboard .ds-dash-three-col > #section-orders {
grid-area: orders;
}
#page-dashboard .ds-dash-three-col > .ds-dash-panel-card[data-widget="shipping-status"] {
grid-area: shipping;
}
#page-dashboard .ds-dash-three-col > .ds-dash-panel-card[data-widget="technical-logs"] {
grid-area: events;
}
/* Row 3: Top Product + Inventory Health side-by-side */
#page-dashboard .ds-dash-ops-grid {
grid-template-columns: 1fr 1.2fr !important;
gap: 16px;
}
/* Row 4: Blind Box — keep chart left, KPI grid right */
#page-dashboard .ds-dash-bb-grid {
grid-template-columns: 1.4fr 1fr !important;
gap: 16px;
}
#page-dashboard .ds-dash-bb-kpi-stack-new {
grid-template-columns: 1fr 1fr !important;
}
/* Latest Orders cards: take advantage of the wider row */
#page-dashboard .ds-latest-orders-table tr {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"id buyer status"
"date items price";
align-items: center;
padding: 12px 16px;
column-gap: 14px;
row-gap: 4px;
}
/* Reset the flex/grid-area/justify-self from the default (≤1024) block
so the iPad grid areas apply correctly. */
#page-dashboard .ds-latest-orders-table td:nth-child(1) { grid-area: id; }
#page-dashboard .ds-latest-orders-table td:nth-child(2) {
grid-area: buyer;
text-align: left;
width: auto;
}
#page-dashboard .ds-latest-orders-table td:nth-child(3) { grid-area: date; }
#page-dashboard .ds-latest-orders-table td:nth-child(4) { grid-area: items; }
#page-dashboard .ds-latest-orders-table td:nth-child(5) {
grid-area: price;
text-align: right;
justify-self: end;
}
#page-dashboard .ds-latest-orders-table td:nth-child(6) { grid-area: status; }
}
/* =====================================================================
PHONE (≤ 640px)
Single-column, full-bleed, oversized taps.
===================================================================== */
@media (max-width: 640px) {
/* Slimmer outer padding so cards reach the edges visually */
.ds-content {
padding: 12px !important;
}
#page-dashboard {
gap: 12px !important;
}
/* Topbar: also hide search on phones (catalog name was already hidden) */
.ds-topbar .ds-topbar-search {
display: none !important;
}
.ds-topbar .ds-topbar-title {
font-size: 14px;
}
.ds-topbar .ds-topbar-right { padding-right: 0; }
/* Status strip: refined typography on phones */
#page-dashboard .ds-status-strip {
padding: 12px 14px 14px;
gap: 8px 10px;
}
#page-dashboard .ds-status-strip .ds-status-item:nth-child(1) {
padding: 10px 12px;
min-height: 48px;
}
#page-dashboard .ds-status-strip .ds-status-item:nth-child(1) .ds-status-label {
font-size: 0.72rem;
}
#page-dashboard .ds-status-strip .ds-status-item:nth-child(1) .ds-status-badge {
font-size: 0.7rem;
padding: 5px 12px;
}
#page-dashboard .ds-status-strip .ds-status-item {
padding: 8px 10px;
min-height: 52px;
}
#page-dashboard .ds-status-strip .ds-status-item .ds-status-value {
font-size: 1.1rem;
}
/* KPI cards — readability tuning */
#page-dashboard .ds-dash-kpi-card-new {
padding: 12px;
min-height: 84px;
}
#page-dashboard .ds-dash-kpi-card-new .ds-kpi-value {
font-size: 1.55rem;
}
/* Chart container is shorter on phones to reduce scroll burden */
#page-dashboard .ds-dash-chart-card { min-height: 200px; }
#page-dashboard .ds-dash-graph-container { min-height: 160px; }
/* Blind Box KPI stack: 2 columns is fine but compact */
#page-dashboard .ds-dash-bb-kpi-stack-new .ds-bb-kpi-value { font-size: 1.25rem; }
/* Funnel readability */
#page-dashboard .funnel-step-header { font-size: 0.66rem; }
#page-dashboard .funnel-step-bar-outer { height: 16px; }
/* All "View All / View Logs" small buttons use a comfortable tap area */
#page-dashboard .ds-dash-panel-card .ds-btn-xs {
min-height: 34px;
padding: 6px 12px;
font-size: 0.66rem;
}
}
/* =====================================================================
DESKTOP DEFAULT (≥ 1025px)
The injected mobile-only Quick Actions row stays hidden.
===================================================================== */
@media (min-width: 1025px) {
#page-dashboard .ds-dash-quick-actions,
.ds-dash-qa-sheet,
.ds-dash-qa-backdrop {
display: none !important;
}
}