/* ============================================================
   Flaming fleet — Mobile Bottom Nav V2 + More sheet
   Portable kit. Source of truth: FlamingTracker
     tracker/app/static/css/base.css   ~2109-2250  (layout)
     tracker/app/static/css/flaming.css ~89        (glass blur)
     tracker/app/static/css/base.css   ~2293       (768px breakpoint)
   Extracted 2026-09-25. Values are Tracker's COMPUTED values, not guesses.

   Self-contained: every var() carries a fallback equal to the value Tracker
   renders, so this file looks right even on a site with no fleet tokens.
   If your site defines the DESIGN-SYSTEM.md tokens, those win.

   Tracker-only tokens used here (not in DESIGN-SYSTEM.md §1) — resolved:
     --bg-hover   -> rgba(255,255,255,0.06)
     --radius-xl  -> 20px      (sheet top corners)
   Tokens whose Tracker value differs from DESIGN-SYSTEM.md — the TRACKER value
   is pinned below, because the job is "look like Tracker's nav":
     --border-subtle  Tracker .04  vs spec .03   (divider line)
   ============================================================ */

.mobile-nav,
.more-sheet {
  --mn-surface:   var(--bg-surface, rgba(255, 255, 255, 0.03));
  --mn-border:    var(--border, rgba(255, 255, 255, 0.06));
  --mn-divider:   rgba(255, 255, 255, 0.04);
  --mn-hover:     rgba(255, 255, 255, 0.06);
  --mn-text:      var(--text-secondary, #9ca3af);
  --mn-text-dim:  var(--text-tertiary, #6b7280);
  --mn-accent:    var(--accent, #f97316);
  --mn-danger:    var(--danger, #ef4444);
  --mn-font:      var(--font-primary, 'Inter', system-ui, sans-serif);
  --mn-radius-sm: var(--radius-sm, 8px);
  --mn-radius-md: var(--radius-md, 12px);
  --mn-radius-xl: 20px;
}

/* ---------- Bottom bar ---------- */
.mobile-nav {
  display: none;                      /* shown <=768px, see bottom of file */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--mn-surface);
  border-top: 1px solid var(--mn-border);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 0.3rem 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}

.mobile-nav-item {
  position: relative;                 /* anchor for .more-dot */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.3rem 0.5rem;
  min-height: 44px;                   /* Tracker gets this from a global button rule; pinned so <a> and <button> tabs match */
  min-width: 44px;
  border-radius: var(--mn-radius-sm);
  text-decoration: none;
  color: var(--mn-text-dim);
  font-family: var(--mn-font);
  font-size: 0.6rem;                  /* beats a global `button { font-size:16px }` iOS-zoom rule by specificity */
  font-weight: 500;
  line-height: 1.2;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mobile-nav-item.active,
.mobile-nav-item[aria-expanded="true"] {
  color: var(--mn-accent);
}

/* Badge dot on the More tab (unread alerts etc.).
   NOTE: Tracker's markup emits .more-dot but Tracker has NO rule for it, so the
   dot is currently invisible there. This is the intended look. */
.more-dot {
  position: absolute;
  top: 0.3rem;
  right: calc(50% - 14px);
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--mn-danger);
  box-shadow: 0 0 0 2px #0d0d0d;
}

/* ---------- More sheet ---------- */
.more-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.more-sheet-backdrop.show {
  display: block;
  opacity: 1;
}

.more-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--mn-surface);
  border-top: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-xl) var(--mn-radius-xl) 0 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transform: translateY(100%);
  /* Closed = invisible once the slide-out finishes. translateY alone still PAINTS the sheet,
     and iOS Safari toolbar resizes / full-page renders showed it over page content
     (found on the Panel, 2026-09-26). visibility flips after the 0.25s slide. */
  visibility: hidden;
  transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
  max-height: 75vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.more-sheet.show {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.25s ease-out, visibility 0s;
}

.more-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 0.6rem 0 0.3rem;
}

.more-sheet-handle::after {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--mn-border);
}

.more-sheet-items {
  padding: 0.25rem 0.75rem 1rem;
}

.more-sheet-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--mn-radius-md);
  text-decoration: none;
  color: var(--mn-text);
  font-family: var(--mn-font);
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s;
}

.more-sheet-item:hover,
.more-sheet-item:active {
  background: var(--mn-hover);
}

.more-sheet-item.active {
  color: var(--mn-accent);
}

.more-sheet-item.danger {           /* Log out. Tracker does this with an inline style. */
  color: var(--mn-danger);
}

.more-sheet-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.more-sheet-item .more-icon {
  font-size: 1.15rem;
  width: 22px;
  text-align: center;
}

/* Count pill on a sheet row (e.g. Alerts 3). Tracker does this with an inline style. */
.more-sheet-count {
  margin-left: auto;
  background: var(--mn-danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}

.more-sheet-divider {
  height: 1px;
  background: var(--mn-divider);
  margin: 0.25rem 0.85rem;
}

/* ---------- Breakpoint + content clearance ---------- */
@media (max-width: 768px) {
  .mobile-nav { display: block; }

  /* Put this class on your main content wrapper so the last row isn't hidden
     behind the bar. Tracker uses a flat 5rem; the safe-area term is added here
     because on a notched iPhone the bar is ~49px + 34px home indicator = ~83px,
     which is taller than 5rem (80px). */
  .mobile-nav-pad {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Anything else fixed to the bottom (FAB, toasts, install prompt) must sit
     above the bar. Tracker uses 4.5rem + safe area. */
  .above-mobile-nav {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Desktop never shows the sheet, even if it was left open when resizing. */
@media (min-width: 769px) {
  .more-sheet,
  .more-sheet-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .more-sheet,
  .more-sheet-backdrop { transition: none; }
}