/* =============================================================================
   VietTennis — shell.css  (device frame + chrome layout)
   -----------------------------------------------------------------------------
   Layout/structure for the chrome that shell.js injects into every Screen_Page:
     · device frame / bezel · status bar · home indicator
     · top bar (sport switch pill · inbox bell + unread badge · avatar menu)
     · 5-hub bottom nav + center gold FAB
     · child back bar
     · popover / sheet surfaces
     · sport-accent CSS variables (Tennis clay vs gold)

   RULE: every color/shadow/radius here comes from a theme.css token — there are
   NO raw hex values in this file. Sport accent only re-points --accent; greens,
   layout and typography stay invariant (DESIGN-VietTennis §8/§11).
   ============================================================================= */

/* =============================================================================
   1. SPORT-ACCENT VARIABLES
   The shell sets data-sport on .device; this only swaps the highlight accent.
   ============================================================================= */
.device[data-sport="pickleball"] {
  --accent:      var(--gold-accent);
  --accent-soft: var(--gold-accent-soft);
  --on-accent:   var(--on-gold);
}
/* Tennis keeps the brand/palette accent (gold) so the selected color theme drives
   the highlight for BOTH sports. (Clay is kept as a token below if ever needed.) */
.device[data-sport="tennis"] {
  --accent:      var(--gold-accent);
  --accent-soft: var(--gold-accent-soft);
  --on-accent:   var(--on-gold);
}

/* =============================================================================
   2. PAGE CANVAS + DEVICE FRAME / BEZEL
   ============================================================================= */
body { background: var(--page); }

.stage {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--s6);
}

.device {
  position: relative;
  width: var(--device-w);
  height: var(--device-h);
  background: var(--bezel);
  border-radius: var(--bezel-radius);
  padding: 12px;
  box-shadow: var(--sh-md);
}

/* The scrollable app viewport inside the bezel */
.viewport {
  position: relative;
  width: 100%; height: 100%;
  background: var(--screen);
  border-radius: var(--screen-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* The scrolling content region between chrome */
.appscroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--s4);
  padding-bottom: 104px; /* clearance for the floating bottom nav */
}
/* bare screens have no bottom nav — reclaim that space so focused screens fit */
body[data-chrome="bare"] .appscroll { padding-bottom: var(--s4); }

/* =============================================================================
   3. STATUS BAR + HOME INDICATOR
   ============================================================================= */
.statusbar {
  flex: none;
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s5);
  font-family: var(--disp); font-weight: 700; font-size: 14px;
  color: var(--ink);
}
.statusbar .glyphs { display: flex; align-items: center; gap: 6px; }
.statusbar .glyphs .material-symbols-rounded { font-size: 17px; color: var(--ink); }

.homeind {
  flex: none;
  height: 22px;
  display: grid; place-items: center;
}
.homeind::after {
  content: '';
  width: 134px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--home-ind);
}

/* =============================================================================
   4. TOP BAR  (data-chrome="app")
   greeting/title · sport switch pill · inbox bell + badge · avatar menu
   ============================================================================= */
.topbar {
  flex: none;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
  background: var(--screen);
}
.topbar .greet     { flex: 1; min-width: 0; }
.topbar .greet .hi { font-family: var(--ui); font-size: 12px; color: var(--ink3); }
.topbar .greet .nm { font-family: var(--disp); font-weight: 700; font-size: 18px; color: var(--ink); }

/* Brand logo mark (replaces a text title — fixed size, never truncates/wraps) */
.topbar .brandmark { flex: none; }
.topbar .brandmark .mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--green); color: var(--gold);
}
.topbar .brandmark .mark .material-symbols-rounded { font-size: 22px; }
.topbar .tbspacer { flex: 1; min-width: var(--s2); }

/* Sport switch pill */
.switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-pill);
  background: var(--green-soft);
}
.switch .opt {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--r-pill);
  color: var(--ink2); cursor: pointer; user-select: none;
}
.switch .opt.on  { background: var(--card); color: var(--green); box-shadow: var(--sh-sm); }
.switch .opt .material-symbols-rounded { font-size: 16px; }

/* Round icon buttons (bell, etc.) */
.icbtn {
  position: relative;
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink2); cursor: pointer;
}
.icbtn .material-symbols-rounded { font-size: 22px; }
.icbtn .dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  font-family: var(--ui); font-size: 10px; font-weight: 700;
  color: var(--on-gold); background: var(--accent);
  border-radius: var(--r-pill);
}

/* Avatar menu trigger */
.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--disp); font-weight: 700; font-size: 15px;
  color: var(--card);
  background: linear-gradient(135deg, var(--green2), var(--green));
}
.avatar.owner { background: linear-gradient(135deg, var(--gold), var(--gold-press)); color: var(--on-gold); }

/* =============================================================================
   5. CHILD BACK BAR  (data-chrome="child")
   centered title + circular back button
   ============================================================================= */
.backbar {
  flex: none;
  height: var(--topbar-h);
  display: flex; align-items: center;
  padding: 0 var(--s4);
  background: var(--screen);
}
.backbar .back {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
}
.backbar .title {
  flex: 1; text-align: center;
  font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--ink);
  padding-right: 40px; /* balance the back button */
}

/* =============================================================================
   6. BOTTOM NAV (5 hubs) + CENTER GOLD FAB  — floating pill (Instagram-style)
   Today · Clubs · (FAB→Play) · Compete · Progress
   The pill floats above the content and shrinks while the user scrolls, then
   eases back to full size when scrolling stops (shell.js toggles .shrunk).
   ============================================================================= */
.nav {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(100% - var(--s4) * 2);
  max-width: 380px;
  height: 66px;
  z-index: 30;
  display: flex; align-items: stretch;
  padding: 0 var(--s2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--sh-md);
  transition: height .30s cubic-bezier(.4, 0, .2, 1),
              border-radius .30s cubic-bezier(.4, 0, .2, 1),
              box-shadow .30s ease,
              transform .30s cubic-bezier(.4, 0, .2, 1);
}
.nav .navi {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink3); cursor: pointer; user-select: none;
}
.nav .navi .material-symbols-rounded {
  font-size: 24px;
  transition: font-size .30s cubic-bezier(.4, 0, .2, 1);
}
.nav .navi .lbl {
  font-family: var(--ui); font-size: 11px; font-weight: 500;
  max-height: 16px; opacity: 1; overflow: hidden;
  transition: max-height .30s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
}
.nav .navi.on { color: var(--green); }
.nav .navi.on .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500; }

/* the center slot reserves space under the floating FAB */
.nav .navi.slot { pointer-events: none; }

/* --- shrunk state: shorter pill, labels collapse, icons + FAB scale down --- */
.nav.shrunk {
  height: 52px;
  border-radius: 26px;
  transform: translateX(-50%) translateY(2px);
}
.nav.shrunk .navi .lbl { max-height: 0; opacity: 0; }
.nav.shrunk .navi .material-symbols-rounded { font-size: 23px; }
.nav.shrunk .fab { transform: translate(-50%, -34%) scale(0.84); }

.fab {
  position: absolute;
  left: 50%; top: 0; transform: translate(-50%, -46%);
  width: var(--fab-size); height: var(--fab-size);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
  border: 4px solid var(--card);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: transform .30s cubic-bezier(.4, 0, .2, 1);
}
.fab:active { background: var(--gold-press); }
.fab .material-symbols-rounded { font-size: 30px; }

/* Bottom-right floating chat button — sits above the floating nav pill */
.chatfab {
  position: absolute; right: var(--s4); bottom: 96px; z-index: 25;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: var(--card);
  box-shadow: var(--sh-md); cursor: pointer;
}
.chatfab:active { background: var(--green2); }
.chatfab .material-symbols-rounded { font-size: 24px; }
.chatfab .cdot {
  position: absolute; top: 7px; right: 7px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--green);
}

/* =============================================================================
   7. POPOVER / SHEET SURFACES
   ============================================================================= */
/* Backdrop scrim (covers the viewport only) */
.scrim {
  position: absolute; inset: 0; z-index: 40;
  background: var(--scrim);
  display: none;
}
.scrim.on { display: block; }

/* Avatar / sport popover (anchored near top-right) */
.popover {
  position: absolute; z-index: 50;
  top: calc(44px + var(--topbar-h) - 4px);
  right: var(--s4);
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-md);
  padding: var(--s2);
  display: none;
}
.popover.on { display: block; }
.popover .pitem {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-input);
  font-family: var(--ui); font-size: 14px; color: var(--ink); cursor: pointer;
}
.popover .pitem:hover, .popover .pitem.on { background: var(--green-soft); color: var(--green); }
.popover .pitem .material-symbols-rounded { font-size: 20px; color: var(--ink2); }

/* Bottom sheet */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--card);
  border-top-left-radius: var(--r-sheet);
  border-top-right-radius: var(--r-sheet);
  box-shadow: var(--sh-md);
  padding: var(--s3) var(--s4) var(--s5);
  max-height: 82%;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .24s ease;
  display: none;
}
.sheet.on { display: block; transform: translateY(0); }
.sheet .handle {
  width: 40px; height: 4px; margin: 0 auto var(--s3);
  border-radius: var(--r-pill); background: var(--line);
}
.sheet .sheet-title {
  font-family: var(--disp); font-weight: 700; font-size: 17px;
  color: var(--ink); margin-bottom: var(--s3);
}

/* =============================================================================
   9. REUSABLE FILTER PATTERN  (compact filter bar + bottom-sheet filter modal)
   Used by every browse/list view (ranking, partner-search, clubs, tournaments,
   courts, coaches…). The inline filter groups live inside a `.sheet#filter-sheet`;
   the screen shows a compact `.filterbar` trigger + a one-line active summary.
   shell.js wires [data-filter-apply] / [data-filter-reset] generically.
   ============================================================================= */
.filterbar-c { display: flex; align-items: center; gap: var(--s3); }
.filt-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 14px;
}
.filt-btn .material-symbols-rounded { font-size: 18px; }
.filt-btn .filt-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-family: var(--disp); font-weight: 800; font-size: 11px;
}
.filt-summary {
  flex: 1; min-width: 0; font-family: var(--ui); font-size: 12px; color: var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* group label inside the filter sheet (and standalone) */
.flabel {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink3); margin: var(--s4) 0 var(--s2);
}
.sheet .flabel:first-of-type { margin-top: 0; }

/* Reset / Apply action row at the foot of the filter sheet */
.sheet .sheet-actions { display: flex; gap: var(--s3); margin-top: var(--s5); }
.sheet .sheet-actions .btn { flex: 1; }