/* =============================================================
   mobile.css — Dr Hasan Booking
   ALL rules scoped to html.mobile-view
   Desktop styles are NEVER modified here.
   Linked after styles.css in base.html so source-order wins.
   ============================================================= */


/* ══════════════════════════════════════════════
   HOME PAGE
   ══════════════════════════════════════════════ */

/* Container full width on mobile */
html.mobile-view .container {
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  overflow-x: hidden !important;
}

/* Cards full width */
html.mobile-view .card {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Visit wrap — single column */
html.mobile-view .visit-wrap {
  flex-direction: column !important;
  gap: 12px !important;
}

/* Glass floaty cards stack vertically */
html.mobile-view .floaty {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hero section top padding */
html.mobile-view #top {
  padding: 16px !important;
}
html.mobile-view #top.card,
html.mobile-view #top {
  padding-bottom: 16px !important;
}

/* Footer single column */
html.mobile-view .site-footer__panel {
  flex-direction: column !important;
  gap: 16px !important;
  padding: 20px 16px !important;
  text-align: center !important;
}
html.mobile-view .site-footer__links {
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* General text sizing */
html.mobile-view h1 { font-size: 1.6rem !important; }
html.mobile-view h2 { font-size: 1.3rem !important; }
html.mobile-view h3 { font-size: 1.1rem !important; }


/* ══════════════════════════════════════════════
   HOME PAGE — Hero buttons + mini-nav
   ══════════════════════════════════════════════ */

/* Fix left gap — body/html margin reset */
html.mobile-view body,
html.mobile-view #main {
  padding-left: 0 !important;
  margin-left: 0 !important;
  overflow-x: hidden !important;
}

/* Mini-nav — row/wrap; each button natural width */
html.mobile-view .mini-nav,
html.mobile-view [class*="mini-nav"] {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 8px !important;
  overflow-x: hidden !important;
}
html.mobile-view .mini-nav a,
html.mobile-view .mini-nav button,
html.mobile-view [class*="mini-nav"] a,
html.mobile-view [class*="mini-nav"] button {
  width: auto !important;
  text-align: center !important;
}
html.mobile-view .mini-nav .mini-actions {
  flex-wrap: wrap !important;
  gap: 6px !important;
}
html.mobile-view .mini-nav .mini-actions .btn,
html.mobile-view .mini-nav .mini-actions a {
  font-size: 0.75rem !important;
  padding: 6px 10px !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* Hero CTA buttons — 2 per row */
html.mobile-view #top .flex.wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
}
html.mobile-view #top .flex.wrap .btn {
  flex: 1 1 calc(50% - 8px) !important;
  text-align: center !important;
  min-width: 120px !important;
  max-width: 160px !important;
}


/* ── Sticky mini-nav on mobile ──
   Neutralize desktop's position:sticky top:18px on mobile — without
   this, the mini-nav floats partially over the header from page load
   until home.js adds .is-stuck. Let it scroll naturally; the fixed
   overlay rule below takes over once it crosses the threshold. */
html.mobile-view .mini-nav {
  position: static !important;
  top: auto !important;
}
html.mobile-view .mini-nav.is-stuck {
  position: fixed !important;
  top: 62px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 7000 !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  transform: none !important;
}


/* Plasma / dot-grid canvas layer: pin to viewport, put behind
   everything, and disable pointer events so it can never push
   content down or intercept taps on mobile. */
html.mobile-view canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}


/* ── MOBILE HEADER ── */
/* Desktop default: mobile-only controls are hidden. These two
   unscoped rules preserve desktop behavior (no visible hamburger
   or drawer). The html.mobile-view rules below toggle them back
   on when the mobile view class is set. */
.mobile-nav-toggle { display: none; }
.mobile-nav-drawer { display: none; }

/* Show hamburger, hide inline nav links */
html.mobile-view .mobile-nav-toggle {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 32px !important;
  height: 32px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  /* FIX 3 — slower, easing-out rotation matches the drawer expand */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html.mobile-view .mobile-nav-toggle span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--c-text) !important;
  border-radius: 2px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
  transform-origin: center !important;
}
html.mobile-view .mobile-nav-toggle.open {
  transform: none !important;
}
html.mobile-view .mobile-nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}
html.mobile-view .mobile-nav-toggle.open span:nth-child(2) {
  opacity: 0 !important;
}
html.mobile-view .mobile-nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}
/* Hide all nav links — they go in the drawer */
html.mobile-view .primary-nav > a,
html.mobile-view .primary-nav > .btn {
  display: none !important;
}
html.mobile-view .admin-header-group > a,
html.mobile-view .admin-header-group > .btn:not(#callHeaderBtn),
html.mobile-view .admin-header-group > span {
  display: none !important;
}
/* Hide brand subtitle */
html.mobile-view .brand-subtitle {
  display: none !important;
}
/* Drawer — expands header downward smoothly.
   All HORIZONTAL properties (width, margins, box-sizing, border-radius)
   live in the base state, so they're identical when the drawer is
   closed and when it's open. Only max-height differs between states.
   Result: no width jump on close — the drawer rolls straight up via
   height collapse alone. When closed, max-height:0 + overflow:hidden
   fully clip it: no sliver visible even though the shape (margins +
   rounded bottom corners) is technically "there" at 0px tall. */
html.mobile-view .mobile-nav-drawer {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  width: auto !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  box-sizing: border-box !important;
  border-radius: 0 0 18px 18px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  /* Height-only transition for a clean symmetric roll-down/roll-up. */
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* FIX 1 — solid glass background matching the header pill so the
     drawer visually reads as a continuation of the same surface. */
  background: color-mix(in oklab, var(--c-surface) 92%,
    rgba(255,255,255,0.05)) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}
html.mobile-view .mobile-nav-drawer.open {
  max-height: 400px !important;
  opacity: 1 !important;
}

/* Header row: animate the bottom-corner rounding so it can be
   sequenced with the drawer roll. Asymmetric delay:
   - OPEN (corners → square): zero delay (see :has() override below).
   - CLOSE (corners → round): 0.4s delay so the drawer rolls up first
     over its own 0.4s max-height transition, THEN the corners round
     over 0.3s. True reverse of the open sequence. */
html.mobile-view .site-header .header-row {
  transition: border-bottom-left-radius 0.3s ease 0.4s,
              border-bottom-right-radius 0.3s ease 0.4s,
              box-shadow 0s 0.4s !important;
}
/* PART B — when the drawer is OPEN, square off the header row's
   BOTTOM corners IMMEDIATELY (zero delay) so it happens as the drawer
   starts rolling down. The pill + drawer meet flush and read as a
   single elongated capsule. Uses :has() (Safari 15.4+, Chrome 105+,
   Firefox 121+) — full support across all modern mobile browsers.

   Also strip the header's own box-shadow AND the drawer's own
   box-shadow while open (see the .mobile-nav-drawer.open rule
   further down). The container `filter: drop-shadow` rule below
   provides ONE uniform shadow around the combined pill+drawer
   silhouette — no seam, identical depth alongside header + drawer.
   Instant off on OPEN; base rule above snaps back on at t=0.4s
   (after the drawer has fully rolled up on CLOSE) so the hand-off
   from the container's drop-shadow to the header's own box-shadow
   is invisible — both draw the same-shaped shadow at t=0.4s. */
html.mobile-view .site-header:has(.mobile-nav-drawer.open) .header-row {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;   /* transitionable "no shadow" */
  transition: border-bottom-left-radius 0s,
              border-bottom-right-radius 0s,
              box-shadow 0s !important;
}

/* Container drop-shadow: hugs the union of the visible pill+drawer
   shape (not .site-header's full-viewport-wide border-box). filter:
   drop-shadow follows the actual alpha silhouette of the subtree —
   the 6px gap between header-row's margin-bottom and drawer's top
   is bridged by the 35px blur, so the pill+drawer reads as one
   continuous shape with UNIFORM shadow depth along its whole
   perimeter. Only active while .open; base state uses a
   transparent-zero drop-shadow so the transition is well-defined
   (filter: none doesn't interpolate cleanly).
   Timing:
     OPEN  → filter snaps on instantly + header/drawer shadows snap
             off instantly. Container's drop-shadow follows the
             drawer's shape as it rolls out.
     CLOSE → drawer rolls up over 0.4s; container filter stays on
             the whole time, shrinking with the drawer. At t=0.4s
             the drawer is fully collapsed → filter snaps off AND
             header-row's own box-shadow snaps back on (both use
             `0s 0.4s` transition). The two shadows are the same
             shape at that instant → invisible hand-off. */
html.mobile-view .site-header {
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 0s 0.4s;
}
html.mobile-view .site-header:has(.mobile-nav-drawer.open) {
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.35));
  transition: filter 0s;
}
/* Light-mode: match the pill's lighter shadow. Both explicit
   [data-theme="light"] and prefers-color-scheme:light for
   users without an explicit theme. */
html.mobile-view[data-theme="light"] .site-header:has(.mobile-nav-drawer.open) {
  filter: drop-shadow(0 16px 30px rgba(15,23,42,0.18));
}
@media (prefers-color-scheme: light) {
  html.mobile-view:not([data-theme]) .site-header:has(.mobile-nav-drawer.open) {
    filter: drop-shadow(0 16px 30px rgba(15,23,42,0.18));
  }
}
html.mobile-view .mobile-nav-drawer a,
html.mobile-view .mobile-nav-drawer .btn,
html.mobile-view .mobile-nav-drawer button {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  text-align: left !important;
  border: none !important;
  border-top: 1px solid var(--c-border) !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* FIX — .site-header must be a flex COLUMN so the drawer (sibling of
   .header-row inside .site-header) stacks BELOW the header row instead
   of trying to sit beside it. Desktop header.css sets display:flex row;
   this !important override flips it to column only on mobile.
   FIX 2 — overflow:visible so the drawer can expand past the sticky
   header's own bounding box, and z-index:1200 keeps the whole header
   stack (row + expanded drawer) above page content. */
html.mobile-view .site-header {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  z-index: 1200 !important;
}

/* FIX — header pill should span most of the viewport on mobile with
   TRUE equal 16px gutters. The previous `width: calc(100% - 32px)` +
   `margin: 0 16px` combo demanded 100% + 32px of horizontal box space
   inside a 100% parent — the browser collapsed the right margin.
   Switching to `width: auto` lets the element size itself from the
   two 16px margins inward, giving equal gutters on both sides. */
html.mobile-view .header-row.container,
html.mobile-view .site-header .header-row {
  max-width: 100% !important;
  width: auto !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  box-sizing: border-box !important;
}

/* FIX 4 — Mobile view restore button (companion to the drawer's
   Desktop View button). Hidden by default; shown only when the
   user has explicitly opted into desktop-view (via clicking
   Desktop View from mobile). Gives them a one-click way back. */
.mobile-view-restore { display: none !important; }
html.desktop-view .mobile-view-restore {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.8rem !important;
  padding: 4px 10px !important;
  background: var(--c-bg-elev) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  color: var(--c-text) !important;
}
html.desktop-view .mobile-view-restore .icon8-sm {
  width: 14px !important;
  height: 14px !important;
}

/* ══════════════════════════════════════════
   MOBILE HOMEPAGE — Appointments (#hours) card
   Overrides desktop drhasan-hero layout for phones.
   ══════════════════════════════════════════ */
html.mobile-view #hours .grid.auto-320 {
  display: block !important;
  column-gap: 0 !important;
}
html.mobile-view #hours .grid.auto-320 > div:first-child {
  grid-column: auto !important;
  width: 100% !important;
}
html.mobile-view #hours .drhasan-hero {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 0 !important;
}
html.mobile-view #hours .drhasan-img {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
html.mobile-view #hours .drhasan-img img {
  position: static !important;
  left: auto !important;
  width: min(260px, 75%) !important;
  height: auto !important;
  margin: 0 auto !important;
}
html.mobile-view #hours .drhasan-right {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
}
html.mobile-view #hours .drhasan-bubble,
html.mobile-view #hours .drhasan-bubble.below {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════
   MOBILE HOMEPAGE — Mini-nav dock to header
   ══════════════════════════════════════════ */
/* Kill internal horizontal scroll: contents must never exceed the pill. */
html.mobile-view .mini-nav {
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}
html.mobile-view .mini-nav .mini-actions {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
html.mobile-view .mini-nav .mini-actions .btn {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
/* Home (undocked) state: smooth spring so it "bubbles" between states. */
html.mobile-view .mini-nav {
  transition: top 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.3s ease,
              margin 0.3s ease,
              width 0.3s ease !important;
}
/* Docked state: fixed flush beneath the floating header, matching the
   header pill's equal 16px gutters and squared TOP corners so it reads
   as the header's lower half (a fused capsule). `top` is set inline by JS
   to the live header bottom. */
html.mobile-view .mini-nav.is-docked {
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 1190 !important; /* below header's 1200 so drawer overlays cleanly */
  border-radius: 0 0 18px 18px !important;
  box-sizing: border-box !important;
  /* Match header pill surface so the two read as one piece. */
  background: color-mix(in oklab, var(--c-surface) 92%, rgba(255,255,255,0.05)) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  box-shadow: 0 18px 35px rgba(0,0,0,0.35) !important;
}
/* Neutralize the old .is-stuck rules from home.css if they still apply
   under mobile-view (we no longer add that class, but be safe). */
html.mobile-view .mini-nav.is-stuck {
  position: static !important;
  transform: none !important;
}

/* ══════════════════════════════════════════
   PART A — Shrink the "Desktop View" icon in the drawer
   ══════════════════════════════════════════ */
html.mobile-view .mobile-nav-drawer .mobile-drawer-desktop-btn img,
html.mobile-view .mobile-nav-drawer .icon8-sm {
  width: 18px !important;
  height: 18px !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* ══════════════════════════════════════════
   PART B — Speech-bubble triangles point UP on mobile
   The .to-right bubbles stack vertically below Dr Hasan on mobile,
   so their tail should point up to meet the image (like .below does).
   ══════════════════════════════════════════ */
html.mobile-view #hours .drhasan-bubble.to-right::before {
  left: 50% !important;
  top: -10px !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: rgba(40,200,120,.35) !important;
}

/* ══════════════════════════════════════════
   PART C — "Mobile view" restore button wraps in desktop-view nav
   Prevents overflow off the right edge — the button drops to a new
   full-width row below the Login/Create account buttons instead.
   ══════════════════════════════════════════ */
html.desktop-view .primary-nav,
html.desktop-view .admin-header-group {
  flex-wrap: wrap !important;
}
html.desktop-view .mobile-view-restore {
  flex-basis: 100% !important;
  margin-top: 6px !important;
  justify-content: center !important;
}

/* ══════════════════════════════════════════
   PART B — Footer equal 16px gutters on mobile
   Mirrors the header pill treatment: outer wrapper's horizontal
   padding zeroed, panel uses width:auto + explicit 16px side margins
   + box-sizing:border-box. Switching the outer .site-footer to
   display:block (from its desktop display:flex) makes the panel a
   normal block child so `width: auto + margin: 0 16px` fills the
   available viewport minus the two 16px gutters — true equal gutters
   on both sides, same math as the header.
   ══════════════════════════════════════════ */
html.mobile-view .site-footer {
  display: block !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.mobile-view .site-footer__panel.container,
html.mobile-view .site-footer .site-footer__panel {
  max-width: 100% !important;
  width: auto !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════
   MOBILE SIGNUP PAGE OVERHAUL
   Neutralizes desktop-only rules that don't fire under Force Mobile
   (class-based, not width-based) and stacks all fields cleanly.
   ══════════════════════════════════════════ */
/* 1. Card: comfortable full-width with sensible padding. */
html.mobile-view body.auth-page section.card.signup-form,
html.mobile-view section.card.signup-form {
  padding: 18px 16px 22px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
/* 2. Force ALL signup grids to a single column so every field is
   full-width, one per row. Covers the name/dob/email grid AND the
   nested password grid. */
html.mobile-view .signup-form .grid.auto-260 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  row-gap: 12px !important;
}
/* 3. Every field wrapper + input spans the full width. Removes the
   desktop max-360 cap on the password fields so they fill the row. */
html.mobile-view .signup-form .grid.auto-260 > div,
html.mobile-view .signup-form .max-360 {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}
html.mobile-view .signup-form input:not([type="checkbox"]),
html.mobile-view .signup-form select {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* 4. Phone: single input with +1 prefix — ensure it fills the row. */
html.mobile-view .signup-form .phone-one {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* 5. Health Care Number: keep the 3 segmented boxes, size them to
   fill the row evenly with no horizontal scroll. */
html.mobile-view .signup-form .hcn-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  overflow-x: hidden !important;
}
html.mobile-view .signup-form .hcn-row .hcn-chunk {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
/* 6. FIX the login link: desktop shoves it 130px right (off-screen).
   Reset to centered, no transform. */
html.mobile-view .signup-form .center-link {
  transform: none !important;
  text-align: center !important;
  margin: 12px 0 0 0 !important;
}
/* 7. Terms + submit: stack vertically. Desktop forces the terms text
   to min-width:260px and puts the button in a right-aligned row, which
   overflows on mobile. Stack them and full-width the button. */
html.mobile-view .signup-form .actions-under {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
}
html.mobile-view .signup-form .actions-under .check {
  align-items: flex-start !important;
}
html.mobile-view .signup-form .actions-under .check span {
  min-width: 0 !important;
}
html.mobile-view .signup-form .actions-under .cta-btn {
  width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
}
/* 8. Turnstile: center it regardless of viewport width (the desktop
   rule right-aligns it; the 560px media query doesn't fire in Force
   Mobile). */
html.mobile-view .signup-form .turnstile-wrap {
  display: flex !important;
  justify-content: center !important;
  padding-right: 0 !important;
  margin: 16px 0 !important;
}
/* 9. Labels: consistent spacing. */
html.mobile-view .signup-form label {
  margin: 10px 0 6px !important;
}

/* ══════════════════════════════════════════
   SIGNUP MOBILE PATCH — STRONGER SINGLE-COLUMN GRID
   ══════════════════════════════════════════
   Diagnostic:
     .grid  — cards.css L8-12: display:grid; gap:12px;
              grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
              specificity 0,1,0, no !important
     .auto-260 — utilities.css L31: grid-template-columns:
              repeat(auto-fit,minmax(260px,1fr));
              specificity 0,1,0, no !important
   Prior rule (0,3,1 + !important) SHOULD have won. Applying a stronger
   compound-class selector (0,7,2 max) at multiple grid-class levels
   so whichever chain the browser resolves against, we beat it. */
html.mobile-view body.auth-page .signup-form .grid,
html.mobile-view body.auth-page .signup-form .grid.auto-260,
html.mobile-view body.auth-page .signup-form .grid.auto-260.gap-12 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  row-gap: 12px !important;
}

/* Center the "already have an account" link */
html.mobile-view body.auth-page .signup-form .center-link {
  transform: none !important;
  text-align: center !important;
  width: 100% !important;
  margin: 14px 0 0 0 !important;
}

/* Center the terms agreement: checkbox + text centered as a group,
   text no longer forced into a skinny wrapping column. */
html.mobile-view body.auth-page .signup-form .actions-under {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: center !important;
}
html.mobile-view body.auth-page .signup-form .actions-under .check {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
}
html.mobile-view body.auth-page .signup-form .actions-under .check span {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
html.mobile-view body.auth-page .signup-form .actions-under .cta-btn {
  width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
}

/* ══════════════════════════════════════════
   SIGNUP MOBILE — force every field full-width via child span
   (more robust than overriding grid-template-columns)
   ══════════════════════════════════════════ */
/* Make each direct child of any signup grid span ALL columns, so
   regardless of how many columns the grid computes, every field
   occupies its own full-width row. */
html.mobile-view body.auth-page .signup-form .grid > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Belt-and-suspenders: also force the grids themselves to 1 column. */
html.mobile-view body.auth-page .signup-form .grid {
  grid-template-columns: 1fr !important;
}
/* ── Center the login link ── */
html.mobile-view body.auth-page .signup-form .center-link,
html.mobile-view body.auth-page .signup-form .center-link a {
  transform: none !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin: 14px auto 0 auto !important;
}
/* ── Center the Turnstile captcha ── */
html.mobile-view body.auth-page .signup-form .turnstile-wrap,
html.mobile-view body.auth-page .signup-form .turnstile-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding-right: 0 !important;
  margin: 16px auto !important;
}
html.mobile-view body.auth-page .signup-form .turnstile-wrap .cf-turnstile,
html.mobile-view body.auth-page .signup-form .turnstile-center .cf-turnstile {
  margin: 0 auto !important;
}
/* ── Center the terms agreement block + button ── */
html.mobile-view body.auth-page .signup-form .card-lite {
  width: 100% !important;
  box-sizing: border-box !important;
}
html.mobile-view body.auth-page .signup-form .agreements {
  width: 100% !important;
}
html.mobile-view body.auth-page .signup-form .actions-under {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  text-align: center !important;
}
/* Checkbox + its text on one row, the pair centered, text readable
   width (not one word per line). */
html.mobile-view body.auth-page .signup-form .actions-under .check {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  text-align: left !important;
}
html.mobile-view body.auth-page .signup-form .actions-under .check span {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
html.mobile-view body.auth-page .signup-form .actions-under .cta-btn {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  white-space: normal !important;
}

/* ══════════════════════════════════════════
   SIGNUP MOBILE — input padding + fix centering overpowered by .grid>*
   ══════════════════════════════════════════ */
/* 1. Give the whole form inner breathing room so fields aren't edge-to-edge.
   Inset the card's inner content rather than each input, for even gutters. */
html.mobile-view body.auth-page section.card.signup-form {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* 2. Inputs: comfortable internal padding + slightly inset from row edges
   so full-width doesn't look raw. */
html.mobile-view body.auth-page .signup-form input:not([type="checkbox"]),
html.mobile-view body.auth-page .signup-form select,
html.mobile-view body.auth-page .signup-form .phone-one {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-sizing: border-box !important;
}
/* keep the phone input's left padding for the +1 prefix intact */
html.mobile-view body.auth-page .signup-form .phone-one input {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 3. FIX centering: the broad `.grid > *` rule from last turn set width:100%
   + grid-column:1/-1 on the login link and terms block, knocking out their
   centering. Re-assert centering with HIGHER specificity (these selectors are
   more specific than `.grid > *` because they name the class explicitly). */
/* Login link — center it, don't let it span/overflow right */
html.mobile-view body.auth-page .signup-form .grid > .center-link,
html.mobile-view body.auth-page .signup-form .center-link {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  transform: none !important;
  margin: 14px auto 0 auto !important;
  display: block !important;
}
html.mobile-view body.auth-page .signup-form .center-link a {
  display: inline-block !important;
  transform: none !important;
  text-align: center !important;
}
/* Terms + button block — center the whole card-lite and its contents */
html.mobile-view body.auth-page .signup-form .grid > .card-lite,
html.mobile-view body.auth-page .signup-form .card-lite {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html.mobile-view body.auth-page .signup-form .card-lite .actions-under {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  text-align: center !important;
}
html.mobile-view body.auth-page .signup-form .card-lite .actions-under .check {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 auto !important;
  text-align: left !important;
}
html.mobile-view body.auth-page .signup-form .card-lite .actions-under .check span {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
html.mobile-view body.auth-page .signup-form .card-lite .actions-under .cta-btn {
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 auto !important;
  white-space: normal !important;
}

/* ══════════════════════════════════════════
   SIGNUP MOBILE — constrain card to viewport (ROOT FIX)
   The card was overflowing the right edge; clamp it to viewport width
   with equal 16px gutters, matching the footer pill.
   ══════════════════════════════════════════ */
html.mobile-view body.auth-page section.card.signup-form,
html.mobile-view body.auth-page .signup-form.auth-form,
html.mobile-view body.auth-page .max-680.signup-form {
  max-width: 100% !important;
  width: auto !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  box-sizing: border-box !important;
}
/* Safety: prevent ANY horizontal overflow on the auth page so nothing
   can push wider than the screen. */
html.mobile-view body.auth-page {
  overflow-x: hidden !important;
}

/* ══════════════════════════════════════════
   SIGNUP MOBILE — everything fits WITHIN the card (card = source of truth)
   ══════════════════════════════════════════ */
/* Force the grids to true single-column tracks that can shrink below
   260px (minmax(0,1fr) instead of minmax(260px,1fr)) so tracks never
   exceed the card width. */
html.mobile-view body.auth-page .signup-form .grid,
html.mobile-view body.auth-page .signup-form .grid.auto-260,
html.mobile-view body.auth-page .signup-form .grid.auto-260.gap-12 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
/* Every grid child confined to its track, never wider. */
html.mobile-view body.auth-page .signup-form .grid > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Inputs, selects, phone wrapper: fill their container exactly, never
   exceed it, kill any min-width from the desktop cascade. */
html.mobile-view body.auth-page .signup-form input:not([type="checkbox"]),
html.mobile-view body.auth-page .signup-form select,
html.mobile-view body.auth-page .signup-form .phone-one,
html.mobile-view body.auth-page .signup-form .input-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* HCN row: the 3 boxes must fit WITHIN the card, no overflow, no scroll.
   Equal thirds that shrink with the card. */
html.mobile-view body.auth-page .signup-form .hcn-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
html.mobile-view body.auth-page .signup-form .hcn-row .hcn-chunk {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* The outer flex wrapper around the HCN row (div.flex.gap-6.ai-center)
   must also be full-width and not force nowrap overflow. */
html.mobile-view body.auth-page .signup-form .hcn-row,
html.mobile-view body.auth-page .signup-form [aria-label="Health Care Number"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ══════════════════════════════════════════
   MOBILE DESKTOP-VIEW — show ATTENTION dev-note under header
   Only in html.desktop-view (phone user clicked "Desktop View").
   The .dev-note X is the potato admin backdoor — JS wiring is
   untouched; we only override the home.css mobile display:none and
   pin the card under the header. Shrunk to fit small screens.
   ══════════════════════════════════════════ */
html.desktop-view .dev-note {
  display: block !important;      /* override home.css @media display:none */
  position: fixed !important;
  top: 76px !important;           /* under the floating header; adjust if overlapping */
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 1150 !important;       /* above page content, below header (1200) */
  /* shrink to fit */
  font-size: 0.8rem !important;
  padding: 12px 14px !important;
}
/* Keep the X close button (potato backdoor) comfortably tappable. */
html.desktop-view .dev-note .dev-note__close {
  width: 28px !important;
  height: 28px !important;
  top: 6px !important;
  right: 6px !important;
}
html.desktop-view .dev-note .dev-note__close .icon8-inline {
  width: 14px !important;
  height: 14px !important;
}

/* ══════════════════════════════════════════
   MOBILE PUBLIC DASHBOARD — compact calendar
   ══════════════════════════════════════════ */
/* Force the week grid to exactly 2 columns on mobile (was auto-fit
   minmax(160px) which overflows / crowds on phones). */
html.mobile-view body.dashboard-page #book .week-grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
/* Add a clear GAP between weeks: each week is a .week-grid-4 with mb-12.
   Bump the bottom margin on mobile so weeks read as separate blocks. */
html.mobile-view body.dashboard-page #book .week-grid-4.mb-12 {
  margin-bottom: 22px !important;
}
/* Compact day cards: smaller min-height + tighter padding. */
html.mobile-view body.dashboard-page #book .card.minh-88 {
  min-height: 0 !important;
  padding: 10px !important;
  gap: 8px !important;
  align-items: stretch !important;
}
/* The date is now the button. Make it look like an obvious tappable
   pill, full width of the compact card. */
html.mobile-view body.dashboard-page #book .day-date-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 10px 8px !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  white-space: normal !important;
}
/* Fully-booked cards: keep the label compact + centered too. */
html.mobile-view body.dashboard-page #book .card.fully-booked .day-date-label {
  text-align: center !important;
  font-size: 0.9rem !important;
}
html.mobile-view body.dashboard-page #book .card.fully-booked .fully-booked-text {
  font-size: 0.8rem !important;
}
/* Phone-only indicator: shrink slightly so it doesn't crowd the compact card. */
html.mobile-view body.dashboard-page #book .phone-only-day .day-phone-only-indicator {
  width: 22px !important;
  height: 22px !important;
  top: 6px !important;
  right: 6px !important;
}
html.mobile-view body.dashboard-page #book .day-phone-only-indicator img {
  width: 13px !important;
  height: 13px !important;
}

/* ══════════════════════════════════════════
   PART A — Calm the date buttons (flat, no 3D/glow on mobile)
   ══════════════════════════════════════════ */
html.mobile-view body.dashboard-page #book .day-date-btn {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
  font-weight: 600 !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
html.mobile-view body.dashboard-page #book .day-date-btn:hover,
html.mobile-view body.dashboard-page #book .day-date-btn:active {
  background: color-mix(in oklab, var(--c-surface) 85%, var(--c-text) 8%) !important;
  border-color: color-mix(in oklab, var(--c-border) 50%, var(--c-text) 25%) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Also calm the day card container itself — kill its heavy shadow on mobile. */
html.mobile-view body.dashboard-page #book .card.minh-88 {
  box-shadow: none !important;
}

/* ══════════════════════════════════════════
   PART B — Stop intro text being pushed right in "Book an appointment"
   Stack the flex row on mobile so text spans full width; float the
   Refresh button top-right without squeezing the text column.
   ══════════════════════════════════════════ */
html.mobile-view body.dashboard-page #book > .flex.space-between {
  display: block !important;
  position: relative !important;
}
html.mobile-view body.dashboard-page #book > .flex.space-between > div {
  width: 100% !important;
}
html.mobile-view body.dashboard-page #book > .flex.space-between > button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
}
/* Give the heading area top padding so the absolutely-positioned Refresh
   button doesn't overlap the "Book an appointment" H3 text. */
html.mobile-view body.dashboard-page #book > .flex.space-between > div h3 {
  padding-right: 90px !important;
}

/* ══════════════════════════════════════════
   PART C — Notification bell panel fix
   ══════════════════════════════════════════
   Root cause: notifications.css sets .notif-bell-panel to position:absolute
   inside .notif-bell-wrap. On mobile the panel's containing chain runs
   through .header-row.container, which has overflow-x:hidden (from the
   general mobile .container rule at L14-19). Browsers auto-promote
   overflow-y to auto when overflow-x is hidden, so the panel gets
   CLIPPED vertically at the header-row's bottom edge — its z-index:9000
   is fine, but the pixels never make it out of the clipping ancestor.
   Fix: switch to position:fixed on mobile so the panel escapes every
   ancestor's overflow, anchored below the floating header pill. */
html.mobile-view .notif-bell-wrap {
  position: static !important;
}
html.mobile-view #notifBellPanel:not([hidden]) {
  position: fixed !important;
  top: 76px !important;              /* below the floating header pill */
  right: 16px !important;
  left: 16px !important;
  width: auto !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  /* Debug revealed the panel opens correctly but dashboard cards
     (.bookings-card etc.) with z-index:12 + isolation:isolate paint
     ON TOP. Raise the panel to near-max z-index so it wins the paint
     order within its containing block's stacking context. */
  z-index: 2147483000 !important;
  box-sizing: border-box !important;
  /* Ensure the panel has a solid opaque background + visible border so
     it reads as a distinct surface over the page. */
  background: var(--c-modal-bg) !important;
  border: 1px solid var(--c-modal-border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

/* ══════════════════════════════════════════
   PART A — Phone-only icon above the date button
   Raise the blue phone-only badge above the .day-date-btn on mobile
   so it shows in the top-right corner. pointer-events:none on the
   badge lets taps pass through to the date button underneath.
   ══════════════════════════════════════════ */
html.mobile-view body.dashboard-page #book .phone-only-day .day-phone-only-indicator {
  z-index: 5 !important;
  pointer-events: none !important;
}
html.mobile-view body.dashboard-page #book .day-date-btn {
  position: relative !important;
  z-index: 1 !important;
}

/* ══════════════════════════════════════════
   NOTIFICATION BELL — break containing-block trap
   Debug showed the panel opens with valid geometry but page cards
   (body.dashboard-page .card { z-index:12; isolation:isolate })
   paint on top. Root cause: some ancestor (transform / filter /
   backdrop-filter / etc.) is creating a containing block for the
   panel's position:fixed, trapping the panel in a nested stacking
   context that loses to root-level cards.
   Fix: explicitly clear transform on .site-header so it never
   becomes a containing block for the fixed panel. */
html.mobile-view .site-header {
  transform: none !important;
}

/* ══════════════════════════════════════════
   MOBILE PUBLIC DASHBOARD — "Your bookings" cards stack vertically
   ══════════════════════════════════════════ */
/* Stack the card: details → status → actions, each full width. */
html.mobile-view body.dashboard-page .booking-card {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 16px !important;
}
/* Booking details block full width; let notes wrap instead of overflow. */
html.mobile-view body.dashboard-page .booking-card__text {
  width: 100% !important;
  min-width: 0 !important;
}
html.mobile-view body.dashboard-page .booking-card__meta {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
/* Let each meta line (including Notes) wrap fully instead of nowrap+ellipsis. */
html.mobile-view body.dashboard-page .booking-card__meta span {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}
/* Status row: full width, left-aligned, no overlap with the text above. */
html.mobile-view body.dashboard-page .booking-card__status {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}
/* The pending/accepted pill: normal flow, not absolutely floating over text. */
html.mobile-view body.dashboard-page .booking-card__status .status-pending-pill,
html.mobile-view body.dashboard-page .booking-card__status .inline-status {
  position: static !important;
  transform: none !important;
}
/* Action buttons row: full width, right-aligned, comfortable tap targets. */
html.mobile-view body.dashboard-page .booking-card__actions {
  width: 100% !important;
  margin-top: 0 !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
/* Also handle the accepted (upcoming) card variant, same structure. */
html.mobile-view body.dashboard-page .upcoming-card .booking-card {
  flex-direction: column !important;
  align-items: stretch !important;
}

/* ══════════════════════════════════════════
   MOBILE — booking/times modals fit viewport + scroll internally
   ══════════════════════════════════════════
   dashboard.css .glass-modal .modal-content already sets max-height:90vh
   but NO overflow-y, so tall content (booking form) clips its submit
   button below the visible viewport. Also .glass-modal uses
   align-items:center, vertically centering the modal — on a tall modal
   this centers it in a way that pushes the bottom below the fold.
   Fix: add overflow-y:auto for internal scroll, cap max-height slightly
   tighter, and top-align the overlay so the modal sits near the top
   with the scroll region reachable. */
html.mobile-view body.dashboard-page .glass-modal .modal-content {
  max-height: 88vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  width: min(94vw, 440px) !important;
  margin: 0 auto !important;
}
/* Overlay: top-align + small top/bottom gutter so the tall modal has room
   to breathe and its scrollbar is visible/reachable without needing to
   scroll the outer page. */
html.mobile-view body.dashboard-page .glass-modal {
  align-items: flex-start !important;
  padding: 4vh 0 !important;
}
/* Small bottom padding inside the form so the submit button clears the
   scrollable area's bottom edge and isn't flush against the border. */
html.mobile-view body.dashboard-page .glass-modal .modal-content form {
  padding-bottom: 8px !important;
}

/* ══════════════════════════════════════════
   MOBILE PUBLIC PROFILE overhaul
   ══════════════════════════════════════════ */
/* 1. Info cards: single column, full width (stack everything). */
html.mobile-view body.profile-page .grid-2 {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
/* Nested Phone|Email grid also stacks. */
html.mobile-view body.profile-page .contact-row .grid.auto-180 {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
/* Any col-span-2 children are already full width in a 1-col grid — ensure it. */
html.mobile-view body.profile-page .grid-2 > .col-span-2 {
  grid-column: 1 / -1 !important;
}
/* 2. HCN edit form: let it wrap cleanly, input full width. */
html.mobile-view body.profile-page #hcnSaveForm {
  flex-wrap: wrap !important;
  gap: 10px !important;
}
html.mobile-view body.profile-page #hcnSaveForm .max-220 {
  width: 100% !important;
  max-width: 100% !important;
}
html.mobile-view body.profile-page #hcnSaveForm .glass-icon-btn {
  flex: 0 0 auto !important;
}
html.mobile-view body.profile-page #hcnSaveForm .muted {
  flex: 1 1 100% !important;
}
/* 3. Email-notifications toggle row: stack (the desktop @media(640px)
   doesn't fire under Force Mobile). */
html.mobile-view body.profile-page .email-notifications-card .toggle-row {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
html.mobile-view body.profile-page .email-notifications-card .toggle-row button,
html.mobile-view body.profile-page .glass-toggle-btn {
  width: 100% !important;
  min-width: 0 !important;
}
/* 4. Contact-change form: stack its nested grid too. */
html.mobile-view body.profile-page #contact-change-form.grid.auto-180 {
  grid-template-columns: 1fr !important;
}
/* 5. Secure docs FLOATY: keep it a compact right-edge tab, don't let it
   grow wide. On mobile shrink to just the chevron + a small footprint. */
html.mobile-view .document-floaty {
  top: 40% !important;
  padding: 8px 10px 8px 12px !important;
  gap: 8px !important;
  max-width: 52px !important;      /* compact — just the chevron button */
  overflow: hidden !important;
}
/* Hide the "Secure docs" text label on mobile UNTIL open (it expands the
   tab); keep the tab tiny by default. */
html.mobile-view .document-floaty span {
  display: none !important;
}
html.mobile-view .document-floaty .floaty-button {
  width: 32px !important;
  height: 32px !important;
}
/* 6. Secure docs PANEL when open: fit the viewport, don't overflow off
   either edge, scroll internally. It's position:fixed right:0. */
html.mobile-view .document-panel {
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
html.mobile-view .document-panel ul {
  max-height: none !important;   /* let the panel's own max-height + scroll handle it */
}
/* 7. Booking History table: fit within the card (no forced min-width).
   All 4 columns (When/Type/Length/Reason) stay in view; cells wrap.
   Compact padding + font-size so content fits on a narrow phone. */
html.mobile-view body.profile-page .table-wrap {
  overflow-x: hidden !important;
  width: 100% !important;
}
html.mobile-view body.profile-page .table-wrap table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 0.8rem !important;
}
html.mobile-view body.profile-page .table-wrap th,
html.mobile-view body.profile-page .table-wrap td {
  padding: 6px 6px !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  vertical-align: top !important;
  text-align: left !important;
}
/* Give the columns sensible relative widths so When/Reason get room
   and Type/Length stay narrow. 4 columns: When, Type, Length, Reason. */
html.mobile-view body.profile-page .table-wrap th:nth-child(1),
html.mobile-view body.profile-page .table-wrap td:nth-child(1) { width: 30% !important; }
html.mobile-view body.profile-page .table-wrap th:nth-child(2),
html.mobile-view body.profile-page .table-wrap td:nth-child(2) { width: 22% !important; }
html.mobile-view body.profile-page .table-wrap th:nth-child(3),
html.mobile-view body.profile-page .table-wrap td:nth-child(3) { width: 20% !important; }
html.mobile-view body.profile-page .table-wrap th:nth-child(4),
html.mobile-view body.profile-page .table-wrap td:nth-child(4) { width: 28% !important; }
/* 8. Back button + general breathing room: ensure the profile card
   isn't edge-to-edge (matches other mobile pages). */
html.mobile-view body.profile-page > .card,
html.mobile-view body.profile-page main > .card {
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════
   MOBILE — fully-booked day cards match regular cards (faded + struck)
   ══════════════════════════════════════════ */
/* Make the fully-booked date label look like the same flat pill as
   .day-date-btn, so the card is identical in size/shape to a normal day —
   just faded and crossed out. */
html.mobile-view body.dashboard-page #book .card.fully-booked .day-date-label {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 10px 8px !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;   /* cross out the date */
}
/* Fade the whole fully-booked card so it reads as unavailable, but keep
   the same dimensions/padding as a regular card. */
html.mobile-view body.dashboard-page #book .card.fully-booked {
  opacity: 0.55 !important;
  box-shadow: none !important;
}
/* "Fully booked" caption beneath the struck date — centered, small, faded. */
html.mobile-view body.dashboard-page #book .card.fully-booked .fully-booked-text {
  text-align: center !important;
  font-size: 0.78rem !important;
  margin-top: 6px !important;
  color: var(--c-text-muted, rgba(148,163,184,0.9)) !important;
}
html.mobile-view body.dashboard-page #book .card.fully-booked .fully-booked-text s {
  text-decoration: none !important;   /* the caption itself needn't be double-struck */
}

/* ══════════════════════════════════════════
   MOBILE ADMIN — filter floaty (bottom-left menu of user-category pills)
   Desktop keeps the 5 pills at their fixed left-edge corner stack from
   admin.css. On mobile the pills are moved (via admin.js) into the
   .mobile-filter-panel opened by this floaty, which sits above the
   phone/missed-calls .call-fab (bottom-right).
   ══════════════════════════════════════════ */

/* Floaty button — hidden on desktop, visible bottom-left on mobile. */
.mobile-filter-fab { display: none; }
html.mobile-view .mobile-filter-fab {
  display: inline-flex !important;
  position: fixed !important;
  left: 16px !important;
  bottom: 18px !important;
  z-index: 1300 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
html.mobile-view .mobile-filter-fab__icon {
  width: 24px !important;
  height: 24px !important;
  pointer-events: none !important;
}
/* The icon PNG/SVG is black by default. Dark mode: invert to white so it
   reads on the dark surface. The fab is body-portaled (outside <main>),
   so page-scoped dark-mode invert rules don't reach it. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .mobile-filter-fab__icon {
    filter: brightness(0) invert(1);
  }
}
html[data-theme="dark"] .mobile-filter-fab__icon {
  filter: brightness(0) invert(1);
}

/* Filter panel — hidden by default, opens above the floaty when .open.
   Fits within viewport with 16px gutters, scrolls internally if needed. */
.mobile-filter-panel { display: none; }
html.mobile-view .mobile-filter-panel.open {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 78px !important;              /* 18 + 48 fab + 12 gap */
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
  z-index: 1301 !important;             /* above the floaty */
  box-sizing: border-box !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

/* Pills relocated INTO the filter panel become normal-flow full-width rows.
   Overrides the corner-stack .fab-bubble rules from admin.css (position:
   fixed; left:18px; bottom:XXpx per pill) so they lay out inside the panel. */
html.mobile-view .mobile-filter-panel .fab-bubble {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  z-index: auto !important;
}

/* Companion .floating-panel user-lists on mobile: viewport-fitted
   card (below the floating header) instead of pinned to the desktop
   left:18px corner. Applies only when the panel is .open. */
html.mobile-view .floating-panel.open {
  position: fixed !important;
  top: 76px !important;                 /* below the sticky header pill */
  left: 16px !important;
  right: 16px !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  z-index: 1500 !important;             /* above the filter panel (1301) */
  box-sizing: border-box !important;
}
/* Force-show the Online panel close button on mobile — desktop hides it
   via inline style="display:none" (users tap the fab again to close, but
   on mobile the fab lives inside the collapsed filter panel so an X
   button is easier to reach). */
html.mobile-view #onlinePanel .close-bubble {
  display: inline-flex !important;
}

/* ============================================================
   ADMIN DASHBOARD mobile — PASS 2: calendar
   Scope: html.mobile-view body.admin-page. Desktop untouched.
   Preserves .full-book-form and .day-mode-toggle markup + endpoints.
   ============================================================ */

/* 2 cards per row, compact. */
html.mobile-view body.admin-page #quick .week-grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html.mobile-view body.admin-page #quick .week-grid-4.mb-10 {
  margin-bottom: 20px !important;
}

/* Compact card. */
html.mobile-view body.admin-page #quick .card.minh-88 {
  min-height: 0 !important;
  padding: 10px !important;
  gap: 8px !important;
  box-shadow: none !important;
}

/* Date-as-button: flat, calm pill (mirrors the public dashboard vibe). */
html.mobile-view body.admin-page #quick .admin-day-date-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 10px 8px !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: normal !important;
}
html.mobile-view body.admin-page #quick .admin-day-date-btn:active {
  background: color-mix(in oklab, var(--c-surface) 85%, var(--c-text) 8%) !important;
}

/* Fully-book control UNDER the date: full width, compact, danger. */
html.mobile-view body.admin-page #quick .btn-row {
  display: block !important;   /* stack so full-book form sits under the date */
  margin-top: 6px !important;
}
html.mobile-view body.admin-page #quick .full-book-form {
  width: 100% !important;
  margin: 0 !important;
}
html.mobile-view body.admin-page #quick .full-book-form .btn {
  width: 100% !important;
  padding: 7px 8px !important;
  font-size: 0.8rem !important;
}

/* Phone-only toggle: keep the desktop pill shape, just scaled down.
   Desktop is a pill (~80x40 with 20-22px icons + 8px gap, .phone hidden
   until .is-active). Mobile keeps the same pill anatomy at ~54x26 with
   14-15px icons + 6px gap. Height stays content-driven (no fixed height
   / no fixed width square) so both icons fit without clipping. */
html.mobile-view body.admin-page #quick .day-mode-toggle {
  width: auto !important;
  height: auto !important;
  min-width: 54px !important;
  padding: 5px 8px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  overflow: visible !important;
}
html.mobile-view body.admin-page #quick .day-mode-toggle .day-mode-icon {
  width: 14px !important;
  height: 14px !important;
}
html.mobile-view body.admin-page #quick .day-mode-toggle .day-mode-icon.switch {
  width: 15px !important;
  height: 15px !important;
}

/* Fully-booked card (.fully-booked-card + .fully-booked-label): compact + faded. */
html.mobile-view body.admin-page #quick .card.fully-booked-card {
  opacity: 0.55 !important;
  box-shadow: none !important;
}
html.mobile-view body.admin-page #quick .fully-booked-label {
  display: block !important;
  text-align: center !important;
  padding: 10px 8px !important;
  font-size: 0.9rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  text-decoration: line-through !important;
}

/* ============================================================
   ADMIN DASHBOARD mobile — PASS 3 (corrected): Active Bookings
   Un-flex the heading wrapper so the intro paragraph spans full
   width below the H3 instead of being trapped in a narrow left
   column. Same pattern as the public dashboard "Book an appointment"
   heading (L1016-1032). Button floats top-right absolutely; H3 gets
   right-padding so its text doesn't slide under the button. Pure
   CSS, no DOM move — handler + badge ID preserved.
   ============================================================ */
html.mobile-view body.admin-page #quick > .flex.space-between {
  display: block !important;
  position: relative !important;
}
html.mobile-view body.admin-page #quick > .flex.space-between > div {
  width: 100% !important;
}
html.mobile-view body.admin-page #quick > .flex.space-between > div h3 {
  padding-right: 130px !important;   /* clear space for the top-right button */
}
html.mobile-view body.admin-page #quick > .flex.space-between > div p {
  padding-right: 0 !important;       /* intro paragraph spans full width below */
}
html.mobile-view body.admin-page #quick .active-bookings-trigger {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  min-width: 0 !important;           /* override desktop's 180px pin */
  padding: 6px 10px !important;
  font-size: 0.78rem !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}
html.mobile-view body.admin-page #quick .active-bookings-trigger .notif-badge {
  margin-left: 4px !important;
}

/* ============================================================
   ADMIN DASHBOARD mobile — PASS 4: corner floaties
   Pending Signups (top-left) + Live Queue (top-right) dissolve
   into floaties that mirror the Pass 1 filter-floaty pattern.
   admin.js body-portals both and appendChild's .pending-card /
   .queue-card into their panels on mobile-view. All handlers +
   endpoints preserved (delegated + SSE node-ref survivors).
   ============================================================ */

/* Fabs — hidden on desktop, visible top-corners on mobile. */
.mobile-corner-fab { display: none; }
html.mobile-view .mobile-corner-fab {
  display: inline-flex !important;
  position: fixed !important;
  top: 76px !important;                 /* just below the sticky header */
  z-index: 1300 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
html.mobile-view .pending-fab { left: 16px !important; }
html.mobile-view .queue-fab   { right: 16px !important; }
html.mobile-view .mobile-corner-fab__icon {
  width: 24px !important;
  height: 24px !important;
  pointer-events: none !important;
}

/* Dark-mode invert — fabs are body-portaled outside <main>, so
   page-scoped invert rules don't reach them. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .mobile-corner-fab__icon {
    filter: brightness(0) invert(1);
  }
}
html[data-theme="dark"] .mobile-corner-fab__icon {
  filter: brightness(0) invert(1);
}

/* Panels — hidden by default; when .open, drop from their fab
   corner and fit within viewport with 16px gutters, scroll
   internally on overflow. */
.mobile-corner-panel { display: none; }
html.mobile-view .mobile-corner-panel.open {
  display: block !important;
  position: fixed !important;
  top: 134px !important;                /* 76 fab-top + 46 fab-height + 12 gap */
  left: 16px !important;
  right: 16px !important;
  max-height: calc(100vh - 150px) !important;
  overflow-y: auto !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
  z-index: 1301 !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Relocated cards inside panels — strip in-flow card chrome so
   they fit the panel without double-borders/backgrounds. */
html.mobile-view .mobile-corner-panel .card {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Belt-and-suspenders: after JS moves the cards out, the rails
   should reserve no layout space. .admin-rail--left still holds
   the _floating_panels.html include (pill fabs — themselves
   position:fixed body-portaled by Pass 1), so it isn't strictly
   empty, but its remaining children take no in-flow space. */
html.mobile-view body.admin-page .admin-rail--left,
html.mobile-view body.admin-page .admin-rail--right {
  padding: 0 !important;
}
html.mobile-view body.admin-page .admin-rail:empty {
  display: none !important;
}

/* ============================================================
   ADMIN DASHBOARD mobile — PASS 5, Item 1: queue-fab glow
   The floaty glows green whenever comms shows ≥1 caller in the
   live queue. admin.js listens to the comms-snapshot CustomEvent
   from comms_brain.js and toggles .has-callers on #queueFab.
   Kept mobile-scoped — the floaty itself only exists on mobile.
   ============================================================ */
html.mobile-view .queue-fab.has-callers {
  border-color: rgba(34,197,94,0.85) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.35),
              0 0 18px rgba(34,197,94,0.65) !important;
  animation: queueFabGlowPulse 2.2s ease-in-out infinite !important;
}
@keyframes queueFabGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(34,197,94,0.30),
                0 0 14px rgba(34,197,94,0.55);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(34,197,94,0.45),
                0 0 22px rgba(34,197,94,0.80);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.mobile-view .queue-fab.has-callers {
    animation: none !important;
  }
}

/* ============================================================
   ADMIN DASHBOARD mobile — PASS 5, Item 2: search section
   Input full-width row 1; Search + Clear 50/50 row 2. Native
   GET form — no JS handlers to preserve.
   ============================================================ */
html.mobile-view body.admin-page .search-section {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding-top: 8px !important;
  box-sizing: border-box !important;
}
html.mobile-view body.admin-page .search-section input[name="q"] {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
}
html.mobile-view body.admin-page .search-section .btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Search results block — desktop uses 14/18 padding + 18px radius
   which wastes edges on narrow mobile; long emails/HCNs overflow
   the .search-results__meta flex row without word-break. Trim
   padding, tighten radius, break long identifiers. */
html.mobile-view body.admin-page .search-results {
  padding: 12px !important;
  border-radius: 14px !important;
  margin: 0 0 16px 0 !important;
}
html.mobile-view body.admin-page .search-results__header {
  gap: 8px !important;
  flex-wrap: wrap !important;
}
html.mobile-view body.admin-page .search-results__list {
  gap: 8px !important;
}
html.mobile-view body.admin-page .search-results__item {
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
/* Item's inner <a> stacks vertically on mobile so the name + meta
   don't fight the HCN toggle badge for horizontal space. */
html.mobile-view body.admin-page .search-results__item a {
  flex-direction: column !important;
  gap: 6px !important;
  align-items: stretch !important;
}
html.mobile-view body.admin-page .search-results__name {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
html.mobile-view body.admin-page .search-results__meta {
  gap: 6px 10px !important;
  font-size: 0.82rem !important;
}
html.mobile-view body.admin-page .search-results__meta > * {
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
html.mobile-view body.admin-page .search-results__hcn-toggle {
  min-width: 0 !important;
  align-self: flex-start !important;
}

/* ============================================================
   HEADER DRAWER — PASS 6: continuous surface with header pill
   The .header-row pill has box-shadow: 0 18px 35px rgba(0,0,0,0.35)
   + a 1px border that lift it off the page. The drawer already
   matches its background + backdrop-filter (from an earlier pass)
   but has NO border and NO shadow, so it reads flat and detached.

   Fix: give the drawer the pill's box-shadow AND matching border
   (left/right/bottom only — no top, or it would double up with
   the pill's own border-bottom during the open state) but ONLY
   when .open. Reason: max-height:0 collapses the drawer to a
   0-height box; any shadow on that renders as a stray horizontal
   line, and any border-bottom would appear as a doubled line
   right below the pill's own border. Suppressing all edge
   styling when NOT .open avoids both artifacts entirely.

   box-shadow is added to the drawer's transition list so it
   fades in/out over the same 0.4s as the max-height roll — no
   visible snap. The height animation itself (max-height curve,
   duration, corner-square :has() rule) is untouched.
   ============================================================ */
html.mobile-view .mobile-nav-drawer {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s ease !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;    /* transitionable "no shadow" */
}
html.mobile-view .mobile-nav-drawer.open {
  /* Shadow moved to the container (.site-header filter: drop-shadow).
     Drawer no longer casts its own shadow — that used to double up
     with the header's downward shadow and read as an uneven seam. */
  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
  border-top: 0 !important;                              /* skip — would double with pill bottom */
  border-left:   1px solid color-mix(in oklab, var(--c-border) 70%, rgba(255,255,255,0.35)) !important;
  border-right:  1px solid color-mix(in oklab, var(--c-border) 70%, rgba(255,255,255,0.35)) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--c-border) 70%, rgba(255,255,255,0.35)) !important;
}

/* Light-mode: match the pill's darker border. Shadow lives on the
   container filter now (see the drop-shadow block earlier), so no
   per-child box-shadow overrides here. */
html.mobile-view[data-theme="light"] .mobile-nav-drawer.open {
  border-left-color:   color-mix(in oklab, var(--c-border) 90%, rgba(15,23,42,0.35)) !important;
  border-right-color:  color-mix(in oklab, var(--c-border) 90%, rgba(15,23,42,0.35)) !important;
  border-bottom-color: color-mix(in oklab, var(--c-border) 90%, rgba(15,23,42,0.35)) !important;
}
@media (prefers-color-scheme: light) {
  html.mobile-view:not([data-theme]) .mobile-nav-drawer.open {
    border-left-color:   color-mix(in oklab, var(--c-border) 90%, rgba(15,23,42,0.35)) !important;
    border-right-color:  color-mix(in oklab, var(--c-border) 90%, rgba(15,23,42,0.35)) !important;
    border-bottom-color: color-mix(in oklab, var(--c-border) 90%, rgba(15,23,42,0.35)) !important;
  }
}

/* ============================================================
   PASS 7 — DESKTOP RESTORE for day-cards (both dashboards)
   Templates now render BOTH triggers:
     • .day-date-static (+ .day-viewtimes-row on public / a View times
       <button> inside .btn-row on admin) — the DESKTOP trigger set.
     • .day-date-btn — the MOBILE trigger.
   CSS default (no view class present, e.g. a fresh desktop browser
   with no saved preference) = show the desktop set, hide the mobile
   set. html.mobile-view flips it.
   The delegated .quick-view-times handler in dashboard.js / admin.js
   walks .closest() from the CLICK TARGET only, so hidden triggers
   never fire (display:none is not clickable) — no double-fire risk.
   ============================================================ */

/* Default (desktop, including no-view-class browsers): show static
   date + View times row, hide the mobile date-button. */
.day-date-btn        { display: none; }
.day-date-static     { display: block; }
.day-viewtimes-row   { display: flex; }

/* Mobile flips it: hide the desktop set, show the mobile date-button. */
html.mobile-view .day-date-btn      { display: block !important; }
html.mobile-view .day-date-static   { display: none !important; }
html.mobile-view .day-viewtimes-row { display: none !important; }

/* Admin: on mobile hide ONLY the desktop View times button inside
   .btn-row; the .full-book-form beside it stays visible under the
   date (as it has since PASS 2 which made .btn-row display:block
   on mobile). Fully-booked cards render View times without a
   full-book-form, so on mobile they simply show nothing in .btn-row
   — the date label alone tells the whole story. */
html.mobile-view body.admin-page #quick .btn-row .quick-view-times {
  display: none !important;
}

/* ============================================================
   PASS 8 — Active Bookings mobile overhaul + universal close button
   Every mobile popup now has a top-right × dismiss affordance:
     • .glass-modal popups (timesModal, bookingModal, fullBookModal,
       activeBookingsModal) use the shared .btn.icon.modal-close class
       which attachDismiss() already handles.
     • Corner/filter panels get a JS-injected .panel-close-btn (see
       admin.js PASS 8 additions).
     • The 5 .floating-panel user panels + #callBubble already have
       .close-bubble in .bubble-header — unchanged.
   ============================================================ */

/* ---- Active Bookings modal header: STACK on mobile ---- */
/* The desktop header packs title-column + tabs in a single flex row
   with space-between, which crushes the description on narrow phones.
   Un-flex it so children stack full-width. */
html.mobile-view body.admin-page #activeBookingsModal .active-bookings-card__header > .flex.space-between {
  display: block !important;
  position: relative !important;    /* anchor for the top-right × */
}
/* Hide the long description — the tab labels convey the same info. */
html.mobile-view body.admin-page #activeBookingsModal .active-bookings-card__header p.muted {
  display: none !important;
}
/* Title row: keep the H4 breathing space clear of the top-right ×. */
html.mobile-view body.admin-page #activeBookingsModal .active-bookings-card__header h4 {
  padding-right: 40px !important;
}
/* Tabs: full-width, evenly split. */
html.mobile-view body.admin-page #activeBookingsModal .active-bookings-tabs {
  display: flex !important;
  width: 100% !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
html.mobile-view body.admin-page #activeBookingsModal .active-bookings-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px 6px !important;
  font-size: 0.85rem !important;
  border-radius: 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Modal content viewport-fit + internal scroll (same pattern as the
   public booking modal fix in an earlier pass). */
html.mobile-view body.admin-page #activeBookingsModal .modal-content {
  width: min(94vw, 460px) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

/* Position the modal's × top-right of the header (its parent is now
   position:relative, thanks to the header override above). */
html.mobile-view body.admin-page #activeBookingsModal .active-bookings-close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
}

/* ---- Booking entries: breathing room + actions row ---- */
html.mobile-view body.admin-page #activeBookingsModal .active-booking-entry {
  padding: 10px !important;
}
/* Row-actions cluster: full-width own row so the toggle + edit + delete
   don't cram into a narrow strip. */
html.mobile-view body.admin-page #activeBookingsModal .active-booking-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 8px !important;
  align-items: center !important;
}
html.mobile-view body.admin-page #activeBookingsModal .active-booking-actions__tools {
  margin-left: auto !important;
  display: flex !important;
  gap: 8px !important;
}
/* Wrap long names/notes/meta instead of overflowing. */
html.mobile-view body.admin-page #activeBookingsModal .active-booking-name,
html.mobile-view body.admin-page #activeBookingsModal .active-booking-reason,
html.mobile-view body.admin-page #activeBookingsModal .active-booking-line-meta {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
}

/* ---- .panel-close-btn (injected into corner + filter panels) ---- */
/* Round × top-right of the panel. Parent (.mobile-corner-panel /
   .mobile-filter-panel) is position:fixed — establishes a containing
   block for absolute-positioned descendants (fixed elements do).
   Confirmed: position:absolute anchors to the fixed parent correctly. */
html.mobile-view .panel-close-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  padding: 0 !important;
}

/* Corner + filter panels: reserve 44px top padding so relocated
   content (pending-card, queue-card, pill list) doesn't slide
   under the injected close button. */
html.mobile-view .mobile-corner-panel.open,
html.mobile-view .mobile-filter-panel.open {
  padding-top: 44px !important;
}