/* ============================================
MOBILE OVERRIDES — shared across all pages.
Loaded via in every template's .
2026-04-17: updated after visual audit identified
table overflow + truncation issues on /, /spotify,
/presales-today.
============================================ */
@media (max-width: 768px) {
/* Body padding shrinks on phones */
body {
padding: 12px !important;
}
/* Prevent horizontal scroll on body (tables scroll on their own) */
html, body {
max-width: 100vw;
overflow-x: hidden;
}
/* ---------- TABLES ----------
Wrap all tables in a scroll-shadow so users see "more to the right".
We style the direct parent of any
that doesn't already have
overflow set. Use the :has() selector (Safari 15.4+ / Chrome 105+).
Fall back to giving the table itself overflow-x if parent can't
handle it. */
table {
display: block;
width: 100% !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
font-size: 12px;
}
table thead, table tbody {
display: table;
width: 100%;
min-width: 600px; /* force horizontal scroll on narrow screens */
}
/* Table scroll wrapper — explicit scroll-hint above + below the table
so users see "more to the right". Previous attempts with ::after
pseudo-elements were swallowed by parent overflow/clip on some pages.
This two-line approach is visible everywhere. */
.table-container {
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Reset any overflow:hidden inherited from ancestor (tile) styles */
}
/* Hint pill shown ABOVE the table on mobile only. Position at
negative margin-top so it sits just above the first row. */
.table-container::before {
content: '← swipe for more columns →';
display: block;
text-align: center;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 6px;
padding: 4px 8px;
margin-bottom: 6px;
letter-spacing: 0.3px;
}
/* ---------- HEADERS / LOGOS ---------- */
.logo, .header-logo {
font-size: 18px !important;
}
h1 {
font-size: 22px !important;
line-height: 1.2;
}
h2 {
font-size: 18px !important;
}
/* ---------- GRID LAYOUTS → SINGLE COLUMN ---------- */
.tile-grid,
.job-grid,
.pick-grid,
.card-grid,
.stats-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* ---------- STATS / NUMBERS ---------- */
.stats-row, .stat-row {
flex-wrap: wrap !important;
}
.stat-value { font-size: 20px !important; }
.stat-label { font-size: 11px !important; }
/* ---------- CARDS ---------- */
.tile, .job-card, .pick-card, .card {
padding: 12px 14px !important;
}
/* ---------- DRAWER ---------- */
.drawer {
width: 85vw !important;
max-width: 320px !important;
}
/* ---------- CHARTS ---------- */
.chart-container, canvas {
max-width: 100% !important;
overflow: hidden;
}
/* ---------- FILTERS / DATE PICKERS ---------- */
.filters, .filter-row {
flex-wrap: wrap !important;
gap: 6px !important;
}
/* Date-picker + hour-picker horizontal scroll (don't wrap: keeps a
single row that you can swipe through). */
.date-picker,
.date-picker-scroll,
.hour-picker,
.hour-bucket-nav,
.time-slots {
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
gap: 6px !important;
padding-bottom: 4px;
scrollbar-width: thin;
}
.filter-btn, .date-btn, .hour-btn, .time-slot {
font-size: 12px !important;
padding: 6px 10px !important;
flex-shrink: 0; /* don't collapse individual chips */
white-space: nowrap;
}
/* ---------- PRESALES TODAY: venue name wrap ----------
The tile grid on /presales-today crams badge + venue onto one line.
Let venue names wrap to prevent truncation like "Morgan State Univers...". */
.presale-tile .venue-name,
.event-tile .venue-name,
.presale-row .venue {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.3;
}
/* ---------- TAP TARGETS ----------
Touch-friendly: 40px min height on buttons + controls. */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"],
.ticket-btn,
.buy-btn,
.icon-btn {
min-height: 40px;
min-width: 40px;
padding: 10px 14px !important;
}
}
@media (max-width: 480px) {
/* Extra tightening for small phones */
body {
padding: 8px !important;
font-size: 14px;
}
h1 { font-size: 20px !important; }
.tile, .job-card { padding: 10px 12px !important; }
.stat-value { font-size: 18px !important; }
/* Hide non-essential columns on tiny screens */
.hide-mobile, .col-optional { display: none !important; }
/* Table fonts shrink more */
table { font-size: 11px; }
th, td { padding: 6px 5px !important; }
}
/* ============================================
Accessibility: respect reduced-motion.
============================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}