/* ═══════════════════════════════════════════════════════════════
   PLAY STUDIOS 713 — Mobile Native Experience
   Dark cinematic luxury aesthetic · iPhone PWA optimized
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  --m-red: #ff453a;
  --m-dark: #0c0c0f;
  --m-surface: #161618;
  --m-surface2: #121214;
  --m-text: #ffffff;
  /* WCAG AA contrast on #0c0c0f: muted 4.8:1, dim 3.6:1, label 5.6:1 */
  --m-text-label: #b8b8bd;
  --m-text-muted: #9a9a9e;
  --m-text-dim: #7a7a7e;
  --m-border: #1a1a1a;
  --m-accent: #5a8f6e;
  --m-red-studio: #c0312b;
  --m-pink-studio: #ff6b9d;
  --m-retro-studio: #5a8f6e;
  --m-green: #5a8f6e;
  --m-orange: #ff9f0a;
  --m-blue: #0a84ff;
  --m-nav-h: 64px;
  --m-sab: env(safe-area-inset-bottom, 0px);
  --m-sat: env(safe-area-inset-top, 0px);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ONLY — max-width: 768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

/* ── Reset & Body ───────────────────────────────────────────── */
body {
  background: var(--m-dark) !important;
  padding-bottom: calc(var(--m-nav-h) + var(--m-sab) + 96px) !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  color: var(--m-text) !important;
}

/* ── Hide Desktop Nav ───────────────────────────────────────── */
body > nav {
  display: none !important;
}

/* ── Main Content ───────────────────────────────────────────── */
main {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: var(--m-sat) !important;
  /* body already pads for the fixed bottom nav; a small extra gap
     keeps the last card in a page from visually touching the nav. */
  padding-bottom: 16px !important;
  position: relative !important;
  overflow-x: hidden;
  /* Stop iOS/Chrome rubber-band from exposing a blank area above the
     page cards when the user overscrolls at the top. */
  overscroll-behavior-y: contain;
}

/* ── Page Sections ──────────────────────────────────────────── */
.page {
  /* Lock every page to the full viewport width and give it safe side
     padding. Using 100vw (with overflow-x:hidden on main) prevents a
     page from rendering at half width ("195px wide") if a desktop
     layout rule leaks into mobile. box-sizing makes the 16px padding
     part of the 100vw, so the page can't exceed the viewport. */
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  margin: 0 !important;
  min-width: 0;
}

/* Hard guarantee that only the active page (or one mid-transition)
   ever occupies layout on mobile. Prevents "pages stacked vertically
   in the DOM" / huge blank areas when scrolling if JS state drifts
   or if a cached copy of index.html missed a recent fix. */
.page:not(.active):not(.m-slide-out-left):not(.m-slide-out-right) {
  display: none !important;
}

/* Any card that contains a wide table gets auto horizontal scroll on
   mobile, so a 12-column admin table (Tenant Activity / SaaS Projection /
   Geographic Intelligence / Sales Pipeline) can never blow out the
   viewport even if its .m-table-scroll wrapper is missing (e.g. stale
   HTML served by an old service worker cache). Uses :has() so this
   only applies to cards that actually contain a table — unaffected
   cards keep their normal overflow behavior (important for things like
   .studio-card that rely on overflow:visible for accent stripes). */
.page .card:has(table),
.page .card:has(.data-table),
.page .analytics-section:has(table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page .card:has(table)::-webkit-scrollbar,
.page .analytics-section:has(table)::-webkit-scrollbar { height: 4px; }
.page .card:has(table)::-webkit-scrollbar-thumb,
.page .analytics-section:has(table)::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 2px;
}

/* ── Mobile greeting is PERMANENTLY HIDDEN ──────────────────
   The "Good evening / Studio Manager Display / Friday, April 17"
   header used to be injected by an older build of mobile.js. Current
   mobile.js does NOT create it, but cached copies still can, so we
   hide it with display:none !important. This is a nuclear kill
   switch — do not revert without removing every injectMobileHeader()
   call from mobile.js too. */
.m-header,
#greeting,
.m-header-greeting,
.m-header-sub,
.m-header-date {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Kept for reference only — no longer applied because .m-header is
   force-hidden above. */
.m-header--legacy {
  padding: calc(14px + var(--m-sat)) 16px 10px;
  background: transparent;
}
.m-header-greeting {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--m-text);
  line-height: 1;
  margin-bottom: 2px;
}
.m-header-sub {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-text-dim);
  margin-top: 4px;
}
.m-header-date {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--m-text-muted);
  margin-top: 2px;
}

/* ── Section Titles ─────────────────────────────────────────── */
.section-title {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--m-text-label) !important;
  padding: 20px 0 0 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.section-sub {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #dddddd !important;
  padding: 4px 0 16px !important;
  letter-spacing: 0 !important;
}

/* ── Bottom Navigation Bar ──────────────────────────────────── */
.m-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--m-nav-h) + var(--m-sab));
  background: #121214;
  border-top: 0.5px solid #1e1e1f;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: var(--m-sab);
  z-index: 10000;
  /* Defensive: if cached JS injects an older bottom nav with 9+ tabs,
     let it scroll horizontally instead of pushing tabs off-screen. */
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-bottom-nav::-webkit-scrollbar { display: none; }

/* Edge-fade indicator — tells the user more tabs exist off-screen when the
   nav is horizontally scrollable. `data-scroll-right` / `data-scroll-left`
   attributes are toggled by mobile.js in sync with scroll position so the
   fade only appears when there is actually more content in that direction. */
.m-bottom-nav[data-scroll-right="1"] {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%);
}
.m-bottom-nav[data-scroll-left="1"] {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 28px, #000 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 28px, #000 100%);
}
.m-bottom-nav[data-scroll-left="1"][data-scroll-right="1"] {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 28px, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 28px, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%);
}

.m-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 48px;
  min-height: 48px;
  padding: 4px 2px 2px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  transition: color 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  border: none;
  background: none;
  position: relative;
  flex: 1 1 0;
}
.m-nav-item:focus-visible {
  outline: 2px solid var(--m-blue);
  outline-offset: 2px;
  border-radius: 12px;
}
.m-nav-item:active {
  transform: scale(0.92);
}
.m-nav-item.active {
  color: var(--accent, #5a8f6e);
}
.m-nav-item .m-nav-icon {
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.m-nav-item .m-nav-icon svg {
  fill: transparent;
  transition: fill 0.2s ease;
}
.m-nav-item.active .m-nav-icon {
  transform: scale(1.04);
}
.m-nav-item.active .m-nav-icon svg {
  fill: color-mix(in srgb, currentColor 16%, transparent);
}
.m-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #5a8f6e);
  box-shadow: none;
}
.m-nav-icon {
  font-size: 18px;
  line-height: 1;
}
.m-nav-label {
  line-height: 1;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.card:active {
  transform: scale(0.98);
  transition: transform 0.1s;
}

.card-label {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--m-text-label) !important;
  font-weight: 600 !important;
}
.card-value {
  font-family: 'DM Mono', monospace !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--m-text) !important;
}
.card-sub {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 11px !important;
  color: var(--m-text-muted) !important;
}
.card-title {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--m-text-label) !important;
}

/* ── Grids ──────────────────────────────────────────────────── */
.grid-4, .grid-5 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
}
.grid-3 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.grid-2 {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.grid-2-1 {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* ── Studio Cards ───────────────────────────────────────────── */
.studio-card {
  border-radius: 20px !important;
  padding: 18px 16px !important;
}
.studio-name {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.studio-rev {
  font-family: 'DM Mono', monospace !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}
.studio-bk {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 11px !important;
}

/* ── Home — Daily View ──────────────────────────────────────── */
.daily-cols {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.daily-summary {
  gap: 8px !important;
}
.daily-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 12px 8px !important;
  border-radius: 16px !important;
}
.daily-stat-val {
  font-family: 'DM Mono', monospace !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
}
.daily-stat-label {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  margin-top: 0 !important;
}
@media (max-width: 430px) {
  .daily-summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .daily-stat {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .daily-stat-val {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
}

/* ── Home — Utilization Section ─────────────────────────────── */
.util-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.util-card {
  border-radius: 16px !important;
  padding: 16px !important;
}
.util-month-nav button {
  min-width: 36px !important;
  min-height: 36px !important;
}

/* ── Home — Pipeline Cards ──────────────────────────────────── */
#pipeline-cards {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ── Health Bar ─────────────────────────────────────────────── */
.health-bar {
  border-radius: 16px !important;
  padding: 12px 14px !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

/* ── Lists ──────────────────────────────────────────────────── */
.list-item {
  padding: 14px 0 !important;
  min-height: 64px !important;
}
.li-name {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.li-amt {
  font-family: 'DM Mono', monospace !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ── Tables → Mobile Cards ──────────────────────────────────── */
.data-table {
  font-size: 12px !important;
}
.data-table th {
  font-size: 10px !important;
  padding: 0 4px 8px 0 !important;
  white-space: nowrap !important;
}
.data-table td {
  padding: 10px 4px !important;
  font-size: 12px !important;
}

/* Horizontal-pan container for wide tables — keeps page height sane and lets
   the user swipe sideways through data instead of fighting squashed cells.
   The inner table is allowed to be its natural width.                       */
.m-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 0 -4px;
  padding: 0 4px;
  touch-action: pan-x pan-y;
}
.m-table-scroll::-webkit-scrollbar { height: 4px; }
.m-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 2px;
}
.m-table-scroll .data-table {
  width: auto !important;
  min-width: max-content;
}
.m-table-scroll .data-table td,
.m-table-scroll .data-table th {
  white-space: nowrap !important;
}

/* ── Admin: 8-wide KPI grid → 2 cols on mobile (beats any inline style) ─ */
#page-admin #admin-kpi-grid,
#page-admin .admin-kpi-grid-8 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
/* Extra-small phones: allow 1 col for better legibility */
@media (max-width: 360px) {
  #page-admin #admin-kpi-grid,
  #page-admin .admin-kpi-grid-8 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Bookings Page ──────────────────────────────────────────── */
#page-bookings .card:first-of-type {
  border-radius: 16px !important;
  padding: 12px !important;
}
#page-bookings .card:first-of-type > div {
  gap: 8px !important;
}
#page-bookings .form-select {
  font-size: 13px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
}

/* ── Customers Page ─────────────────────────────────────────── */
#page-clients .form-grid {
  grid-template-columns: 1fr !important;
}

/* ── Financials ─────────────────────────────────────────────── */
#page-financials .fin-read-strip {
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
#page-financials .grid-5 {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 480px) {
  #page-financials .grid-5 {
    grid-template-columns: 1fr !important;
  }
}
#page-financials .fin-tip-wrap .fin-tip-icon {
  font-size: 14px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Chart Bars ─────────────────────────────────────────────── */
.chart-bars {
  height: 120px !important;
  gap: 3px !important;
}
.bar-amt {
  font-size: 7px !important;
}
.bar-lbl {
  font-size: 8px !important;
}

/* ── Heatmap ────────────────────────────────────────────────── */
.heatmap {
  grid-template-columns: 36px repeat(14, 1fr) !important;
  gap: 1px !important;
}
.heatmap-cell {
  font-size: 7px !important;
  min-width: 0 !important;
}
.heatmap-header {
  font-size: 7px !important;
}
.heatmap-row-label {
  font-size: 9px !important;
}

/* ── Analytics Gauges ───────────────────────────────────────── */
#utilization-gauges {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
}
.gauge-wrap {
  width: 80px !important;
  height: 80px !important;
}
.gauge-pct {
  font-size: 18px !important;
}

/* ── Donut ───────────────────────────────────────────────────── */
.donut-wrap {
  width: 100px !important;
  height: 100px !important;
}
.donut-total {
  font-size: 18px !important;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-input {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  background: rgba(255,255,255,0.05) !important;
  padding: 0 16px !important;
}
.form-select {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}
.form-label {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--m-text-muted) !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}
.form-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.form-group {
  margin-bottom: 12px !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}
.btn:active {
  transform: scale(0.97) !important;
}
.btn-blue {
  background: var(--m-green) !important;
  color: white !important;
}

/* ── Status Badges ──────────────────────────────────────────── */
.status {
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
}

/* ── Modals → Bottom Sheets ─────────────────────────────────── */
.time-modal-bg {
  align-items: flex-end !important;
}
.time-modal {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 24px 20px calc(24px + var(--m-sab)) !important;
  background: var(--m-surface) !important;
}
.time-modal input[type=time],
.time-modal input[type=number] {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}
.time-modal-btns button {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}
.time-modal-btns .tm-save {
  background: var(--m-green) !important;
  color: #000 !important;
}

/* ── Compare Page ───────────────────────────────────────────── */
#page-compare .card:first-of-type > div {
  flex-direction: column !important;
  gap: 10px !important;
}
.cmp-mode-btn {
  min-height: 40px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}
#cmp-bar-chart {
  height: 120px !important;
  gap: 10px !important;
}

/* ── Export Center ──────────────────────────────────────────── */
#page-import-csv .card {
  max-width: 100% !important;
}
#drop-zone {
  border-radius: 20px !important;
  padding: 30px 16px !important;
}

/* ── FAB (Floating Action Button) ───────────────────────────── */
.m-fab {
  position: fixed;
  bottom: calc(var(--m-nav-h) + var(--m-sab) + 80px);
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--m-green);
  color: #000;
  border: 1px solid rgba(52, 199, 89, 0.35);
  font-size: 28px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.35);
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.page#page-bookings{padding-bottom:112px !important;}
.m-fab:focus-visible {
  outline: 2px solid var(--m-blue);
  outline-offset: 3px;
}
.m-fab:active {
  transform: scale(0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Pass 5: Home already has Add in the bottom tab bar; hide duplicate FAB so it
   does not cover health / reconciliation copy (Pass-4/5 audit). */
@media (max-width: 768px) {
  body[data-m-active-tab="home"] .m-fab {
    display: none !important;
  }
  body:has(#page-home.active) .m-fab {
    display: none !important;
  }
}

/* ── Tab Transitions — outgoing page absolutely positioned so it
      overlays (instead of stacking below) the incoming page.
      Keyframes stay intentionally light (translate + opacity only)
      so mid-tier Androids don't drop frames. `will-change` is scoped
      to in-motion pages only. ───────────────────────────────────── */
.page {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.page.m-fade-in {
  animation: mTabFadeIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}
@keyframes mTabFadeIn {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

:root {
  --m-tab-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-tab-dur: 0.28s;
}
.page.m-slide-in-right,
.page.m-slide-in-left,
.page.m-slide-out-right,
.page.m-slide-out-left {
  will-change: transform, opacity;
}
.page.m-slide-in-right {
  animation: mSlideInFromRight var(--m-tab-dur) var(--m-tab-ease) both;
  position: relative;
  z-index: 2;
}
.page.m-slide-in-left {
  animation: mSlideInFromLeft var(--m-tab-dur) var(--m-tab-ease) both;
  position: relative;
  z-index: 2;
}
.page.m-slide-out-left,
.page.m-slide-out-right {
  position: absolute !important;
  top: var(--m-sat, 0);
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.page.m-slide-out-left {
  animation: mSlideOutToLeft var(--m-tab-dur) var(--m-tab-ease) both;
}
.page.m-slide-out-right {
  animation: mSlideOutToRight var(--m-tab-dur) var(--m-tab-ease) both;
}

@keyframes mSlideInFromRight {
  from { opacity: 0.6; transform: translate3d(12vw, 0, 0); }
  to   { opacity: 1;   transform: translate3d(0, 0, 0); }
}
@keyframes mSlideInFromLeft {
  from { opacity: 0.6; transform: translate3d(-12vw, 0, 0); }
  to   { opacity: 1;   transform: translate3d(0, 0, 0); }
}
@keyframes mSlideOutToLeft {
  from { opacity: 1;   transform: translate3d(0, 0, 0); }
  to   { opacity: 0.4; transform: translate3d(-8vw, 0, 0); }
}
@keyframes mSlideOutToRight {
  from { opacity: 1;   transform: translate3d(0, 0, 0); }
  to   { opacity: 0.4; transform: translate3d(8vw, 0, 0); }
}

/* Clip horizontal spill during swipe; keep vertical scroll free */
main.m-tab-motion {
  overflow-x: hidden;
}

/* ── Touch-target sizing for ds-btn ──────────────────────── */
.ds-btn {
  min-height: 44px !important;
}
.ds-btn.ds-btn--icon {
  min-height: 36px !important;
  height: 36px !important;
}
.ds-btn.ds-btn--sm {
  min-height: 36px !important;
}

/* ── ds-input: 16px prevents iOS viewport zoom on focus ──── */
.ds-input {
  font-size: 16px !important;
  min-height: 48px !important;
}
select.ds-input {
  min-height: 48px !important;
}
textarea.ds-input {
  min-height: 80px !important;
}

/* ── Section-tab: adequate touch target ──────────────────── */
.section-tab {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
}

/* ── Home hero card: restore size over blanket .card rules ── */
.home-hero-card {
  padding: 20px 18px !important;
}
/* Pass 4: reserve space so the mobile FAB (fixed, bottom-right) does not
   cover the MTD off-platform reconciliation line — highest-trust copy on Home. */
@media (max-width: 768px) {
  #page-home .home-hero-card:has(#s-month-reconcile:not(:empty)) {
    padding-bottom: 72px !important;
  }
  #s-month-reconcile:not(:empty) {
    padding-right: 8px;
  }
}
.home-hero-card .home-hero-value.card-value,
.home-hero-card #s-month.home-hero-value {
  font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
  letter-spacing: -0.03em !important;
}

/* ── Home KPI secondary: 2×2 grid instead of stacked 1-col ─ */
.home-kpi-secondary {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ── modal-card bottom-sheet (color picker, add-studio…) ─── */
.modal-card {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: none !important;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ── Topbar + Add button: FAB already handles add-booking ─── */
.smd-topbar-add {
  display: none !important;
}

/* ── Log Payment modal: 1-col grid on very small phones ───── */
@media (max-width: 390px) {
  .modal-box > div[style*="grid-template-columns:1fr 1fr"],
  .modal-box > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Toast Notifications ────────────────────────────────────── */
.m-toast {
  position: fixed;
  bottom: calc(var(--m-nav-h) + var(--m-sab) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--m-green);
  color: #000;
  padding: 12px 24px;
  border-radius: 14px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  z-index: 99999;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.m-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Pull to Refresh ────────────────────────────────────────── */
.m-ptr {
  position: fixed;
  top: var(--m-sat);
  left: 50%;
  transform: translateX(-50%) translateY(-40px);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--m-green);
  animation: spin 0.8s linear infinite;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.2s, transform 0.3s;
}
.m-ptr.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(20px);
}

/* ── Change Badges ──────────────────────────────────────────── */
.change-badge {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

/* ── VIP Badge ──────────────────────────────────────────────── */
.vip {
  font-size: 9px !important;
}

/* ── Performance Badges ─────────────────────────────────────── */
.perf-badge {
  font-size: 10px !important;
  padding: 3px 8px !important;
}

/* ── PWA Install Banner — adjust for bottom nav ─────────────── */
#pwa-install-banner {
  bottom: calc(var(--m-nav-h) + var(--m-sab)) !important;
  border-radius: 16px 16px 0 0 !important;
  z-index: 100018 !important;
}

/* ── Skeleton Loading ───────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.m-skeleton {
  background: linear-gradient(90deg, #111 0%, rgba(255,255,255,0.05) 50%, #111 100%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Hide on Mobile ─────────────────────────────────────────── */
.hide-mobile {
  display: none !important;
}

/* ── Extra small phones (320px) ─────────────────────────────── */
@media (max-width: 374px) {
  .card-value {
    font-size: 24px !important;
  }
  .m-header-greeting {
    font-size: 24px;
  }
  .studio-rev {
    font-size: 22px !important;
  }
  #pipeline-cards {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  #pipeline-cards .card-value {
    font-size: 20px !important;
  }
}

} /* end @media max-width: 768px */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .m-nav-item:active,
  .m-fab:active {
    transform: none !important;
  }
  .page,
  .page.m-fade-in,
  .page.m-slide-in-left,
  .page.m-slide-in-right,
  .page.m-slide-out-left,
  .page.m-slide-out-right {
    transition: none !important;
    animation: none !important;
  }
  .m-skeleton {
    animation: none !important;
  }
  .m-sheet-overlay,
  .m-sheet { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PWA STANDALONE MODE — extra overrides
   ═══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) and (max-width: 768px) {
  body { padding-top: 0 !important; }
}

/* ── Mobile Home Toolbar (Sync / Import / Data health / Audit) ─── */
@media (max-width: 768px) {
  .m-toolbar {
    display: flex;
    gap: 8px;
    padding: calc(12px + var(--m-sat)) 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-toolbar::-webkit-scrollbar { display: none; }
  .m-toolbar-btn {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    white-space: nowrap;
  }
  .m-toolbar-btn i { opacity: 0.85; }

  /* ── More Sheet ────────────────────────────────────────────── */
  .m-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 100030;
    transition: background 0.22s ease;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
  }
  .m-sheet-overlay.m-sheet-open {
    background: rgba(0, 0, 0, 0.6);
  }
  .m-sheet {
    width: 100%;
    background: var(--m-surface);
    border-radius: 24px 24px 0 0;
    padding: 12px 20px calc(24px + var(--m-sab));
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  }
  .m-sheet-overlay.m-sheet-open .m-sheet {
    transform: translateY(0);
  }
  .m-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 auto 14px;
  }
  .m-sheet-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-text-label);
    margin-bottom: 12px;
  }
  .m-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .m-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    color: var(--m-text);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-sheet-item:active { transform: scale(0.96); }
  .m-sheet-ic { color: rgba(255, 255, 255, 0.9); display: inline-flex; }

  /* ── Add-Booking Sheet Top Bar ─────────────────────────────── */
  .m-sheet-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + var(--m-sat)) 0 14px;
    margin-bottom: 4px;
  }
  .m-sheet-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--m-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-sheet-back:active { transform: scale(0.94); }
  .m-sheet-topbar-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--m-text);
  }

  /* ── Last Updated (discreet) ───────────────────────────────── */
  #m-last-updated {
    text-align: center;
    padding: 16px 0 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--m-text-dim);
    letter-spacing: 0.03em;
  }
  #m-last-updated:empty { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP ONLY — hide mobile-injected UI above 768px
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .m-bottom-nav { display: none !important; }
  .m-ptr, #m-ptr-spinner { display: none !important; }
  .m-sheet-overlay, .m-sheet { display: none !important; }
  #m-last-updated { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL — solid background so content is always readable
   Applies at all screen sizes; mobile gets sheet-style bottom snap
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 16px;
}
.modal-box {
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 22px;
  overflow-y: auto;
  max-height: calc(100vh - 32px);
  width: 100%;
}

@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-box {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    max-height: 90vh;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}