/* ============================================================================
 * BayCast v63.2 — Mobile top-bar cleanup
 * ----------------------------------------------------------------------------
 * Brett: "move squid button take awhile wind in coner its all over the map"
 *
 * Scope: Mobile (<=740px) ONLY. Desktop stays pixel-identical. Every rule
 * below is either gated on `body.v27-mobile` or on `@media (max-width:740px)`.
 *
 * Changes in this file:
 *   1. MOB button hidden on BOTH desktop and mobile — code kept, see app.js
 *      MOB disabled comment. Remove the two rules below to re-enable.
 *   2. Mobile BayCast wordmark (`.v41-brand-pill`) hidden. Reedy's logo chip
 *      (`.v27-logo`) stays as the only top-left mark.
 *   3. Wind/tide chip (`.v27-cond`) relocated to a compact pill sitting ABOVE
 *      the zoom +/- column on the top-right, under the pressure chip.
 *   4. v63-squid-pin floating chip repurposed as an "Exit Squid Mode" pill
 *      that only renders while mode is active — driven by v63-squid-pin.js.
 * ============================================================================ */

/* ---- 1. MOB disabled v63.2 per Brett — keep code for possible re-enable ---- */
/* Hides both the mobile red FAB (#v40FabMob) and the desktop header chip
   (#v40HdrMob). The modules in app.js still run; nothing is deleted, just
   suppressed. In an actual emergency, dialling 000 is faster than hunting
   for a button. */
#v40FabMob,
.v40-fab-mob,
#v40HdrMob,
.v40-hdr-mob {
  display: none !important;
}

/* ---- 2. Hide BayCast wordmark pill on mobile -------------------------------- */
/* Desktop already uses `.v41-brand-pill { display: none; }` outside the
   mobile scope, so this only affects v27-mobile. */
@media (max-width: 740px) {
  body.v27-mobile .v41-brand-pill {
    display: none !important;
  }
}

/* ---- 3. Relocate wind/tide chip to the top-right stack --------------------- */
/* The existing `.v27-cond` rule anchors the chip at `top: safe+12, right:12`.
   We keep it there, but shrink and restack. The `.v41-bay` (pressure) chip
   sits at `top: safe+66` — right under it. Zoom column starts at
   `bottom: safe+220`. Plenty of vertical room on iPhone SE (667-126=541) and
   iPhone 14 Pro (852-126=726) for the compact pill stack.

   We make the pill more compact (single-line, smaller font) and tighten
   its padding. The legacy inner markup (span.v27-cond-wind, .sep,
   .v27-cond-tide) is left alone — app.js writes to these nodes. */
@media (max-width: 740px) {
  body.v27-mobile .v27-cond {
    /* Shrink height so the stacked right column (cond + pressure) reads as
       one tidy unit, not two heavy pills. */
    height: 34px;
    padding: 0 11px;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 17px;
    /* Ensure it stays above map controls */
    z-index: var(--z-map-controls);
  }
  body.v27-mobile .v27-cond-sep { font-size: 11px; }

  /* Pressure chip: sit it just 6px under the wind/tide chip (was 66px which
     still works but with the new 34px-tall cond, we can tighten). */
  body.v27-mobile .v41-bay {
    top: calc(env(safe-area-inset-top, 0) + 12px + 34px + 6px);
    padding: 5px 9px;
    border-radius: 11px;
  }
}

/* ---- 4. v63.2 Squid Mode exit pill ----------------------------------------- */
/* The `#v63SquidPin` element is repurposed from an always-on entry chip to an
   active-state exit pill. Only visible when body has `.v63-squid-active`
   class (driven by squid-mode.js activate/deactivate via v63-squid-pin.js).
   Position: top-right, directly under the pressure chip so it doesn't
   interfere with wind/tide readability. Desktop is untouched — desktop never
   injects this chip (module gated to mobile). */

/* Override the v63.1 "always-on" base rule on mobile: hide by default. */
@media (max-width: 740px) {
  #v63SquidPin {
    display: none !important;
  }
  body.v27-mobile.v63-squid-active #v63SquidPin {
    display: inline-flex !important;
    position: fixed;
    /* Sit below the Squid HUD (.sqm-on sits at y≈58 h≈172), 12px gap below */
    top: calc(env(safe-area-inset-top, 0) + 242px);
    right: 12px;
    left: auto;
    width: auto;
    height: 34px;
    padding: 0 14px;
    gap: 6px;
    align-items: center;
    border-radius: 17px;
    background: linear-gradient(180deg, #0b6ea8, #084e77);
    color: #ffffff;
    font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.01em;
    border: none;
    box-shadow: 0 6px 18px rgba(11, 110, 168, 0.4), 0 1px 3px rgba(0,0,0,.2);
    cursor: pointer;
    z-index: var(--z-map-controls);
    white-space: nowrap;
  }
  body.v27-mobile.v63-squid-active #v63SquidPin .v63-squid-pin-ic {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.v27-mobile.v63-squid-active #v63SquidPin .v63-squid-pin-ic svg {
    width: 16px;
    height: 16px;
  }
  body.v27-mobile.v63-squid-active #v63SquidPin .v63-squid-pin-tx {
    display: inline;
  }
  body.v27-mobile.v63-squid-active #v63SquidPin:active { transform: scale(0.97); }

  /* Also hide the exit pill when any modal/sheet overlay is open (matches
     the pattern used by .v27-cond / .v41-bay). */
  /* Hide pin when Squid HUD is on-screen — HUD has its own Exit row and would
     otherwise occlude the pin. When HUD is dismissed or minimized, the pin
     re-appears as a persistent one-tap exit affordance. */
  body.v27-mobile.v63-squid-active:has(.sqm-on) #v63SquidPin,
  body.v27-mobile:has(.leaflet-popup) #v63SquidPin,
  body.v27-mobile:has(.v25-fr-wrap.visible) #v63SquidPin,
  body.v27-mobile:has(#v25_firstRun.visible) #v63SquidPin,
  body.v27-mobile:has(.mm-dlg-wrap) #v63SquidPin,
  body.v27-mobile:has(.mm-panel.open) #v63SquidPin,
  body.v27-mobile:has(.pwa-overlay-card) #v63SquidPin,
  body.v27-mobile:has(.v38-modal-root) #v63SquidPin,
  body.v27-mobile:has(#detail:not(.hidden)) #v63SquidPin,
  body.v27-mobile:has(.v27-sheet.v27-sheet-open) #v63SquidPin {
    display: none !important;
  }
}

/* ---- Mobile "More" menu — Squid Mode entry item -------------------------- */
/* Styling for the dynamically-injected Squid Mode menu button inside the v27
   sheet body. The base v27-menu-btn styles already handle layout; we just
   give it a subtle squid icon column. */
body.v27-mobile .v27-menu-btn[data-act="squid"] {
  position: relative;
}
body.v27-mobile .v27-menu-btn[data-act="squid"] .v63-2-squid-ic {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: #0b6ea8;
  opacity: 0.75;
}

/* ---- Mobile "More" menu — v63 nav rows (Profile / Calendar / etc.) ----- */
/* v63.3: the six v63 pages are now wired into the mobile More sheet as
   individual rows with `data-v63-mobile="..."`. They reuse the base
   `.v27-menu-btn` rules for layout and dark palette; here we add only an
   icon column on the right so the rows read at a glance. */
body.v27-mobile .v27-menu-btn[data-v63-mobile] {
  position: relative;
}
body.v27-mobile .v27-menu-btn[data-v63-mobile] .v63-menu-btn-ic {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #f6c23b;
  opacity: 0.85;
  pointer-events: none;
}
body.v27-mobile .v27-menu-btn[data-v63-mobile] .v63-menu-btn-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Keep the main label from overlapping the icon */
body.v27-mobile .v27-menu-btn[data-v63-mobile] .v27-menu-btn-main,
body.v27-mobile .v27-menu-btn[data-v63-mobile] .v27-menu-btn-hint {
  padding-right: 32px;
}

/* A lighter-weight v27 group label for the v63 cluster — uses the same
   dark-theme tokens the other group labels use in rule block 5 below. */
body.v27-mobile .v27-menu-group-label[data-v63-label] {
  /* inherits the color/size from the main group-label rule */
}

/* ============================================================================
   5. Mobile dark chrome — match desktop sidebar palette
   Brett wants the mobile bottom bar + More sheet to use the same dark navy
   palette as the desktop #sidebar (#0a1523 bg, #1b2e44 border, #e6edf5 text,
   #f6c23b accent). Desktop is untouched — these rules are all mobile-scoped.

   Sources (for reference):
     #sidebar              bg #0a1523, border #1b2e44
     --text                #e6edf5
     --text-soft           #b9c6d6
     --ink-dim             #93a9c1
     --accent              #f6c23b (yellow)
     panel tints           #11223a / #1a3050
   ========================================================================== */
@media (max-width: 740px) {
  /* ---- v36 thumb bar (Marks / Conditions / Drop / More) ----------------- */
  body.v27-mobile .v36-thumb {
    background: rgba(10, 21, 35, 0.94);            /* #0a1523 @ 94% */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid #1b2e44;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45);
  }
  body.v27-mobile .v36-thumb-btn {
    color: #e6edf5;
  }
  body.v27-mobile .v36-thumb-btn svg {
    color: #e6edf5;
    stroke: #e6edf5;
  }
  body.v27-mobile .v36-thumb-txt {
    color: #b9c6d6;
  }
  /* Press feedback — subtle light-on-dark wash */
  body.v27-mobile .v36-thumb-btn:active,
  body.v27-mobile .v36-thumb-btn.v36-thumb-press {
    background: rgba(246, 194, 59, 0.14);
  }
  body.v27-mobile .v36-thumb-btn:active svg,
  body.v27-mobile .v36-thumb-btn.v36-thumb-press svg {
    color: #f6c23b;
    stroke: #f6c23b;
  }
  /* Drop-pin active state — yellow accent (matches desktop .chip.active) */
  body.v27-mobile .v36-thumb-btn.v36-thumb-active {
    background: #f6c23b;
  }
  body.v27-mobile .v36-thumb-btn.v36-thumb-active svg {
    color: #0b1b2b;
    stroke: #0b1b2b;
  }
  body.v27-mobile .v36-thumb-btn.v36-thumb-active svg circle[fill] {
    fill: #0b1b2b !important;
  }
  body.v27-mobile .v36-thumb-btn.v36-thumb-active .v36-thumb-txt {
    color: #0b1b2b;
  }

  /* ---- v27 sheet (More menu popup) -------------------------------------- */
  body.v27-mobile .v27-sheet-panel {
    background: #0a1523;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
  }
  body.v27-mobile .v27-sheet-grab {
    background: #24374d;
  }
  body.v27-mobile .v27-sheet-head {
    border-bottom: 1px solid #1b2e44;
  }
  body.v27-mobile .v27-sheet-title {
    color: #e6edf5;
  }
  body.v27-mobile .v27-sheet-close {
    background: #11223a;
    color: #b9c6d6;
  }
  body.v27-mobile .v27-sheet-close:active {
    background: #1a3050;
    color: #f6c23b;
  }

  /* ---- Menu rows + buttons inside the sheet ----------------------------- */
  body.v27-mobile .v27-menu-row {
    background: #11223a;
    color: #e6edf5;
  }
  body.v27-mobile .v27-menu-hint {
    color: #93a9c1;
  }
  body.v27-mobile .v27-menu-btn {
    background: #11223a;
    border: 1px solid #1b2e44;
    color: #e6edf5;
  }
  body.v27-mobile .v27-menu-btn:active {
    background: #1a3050;
  }
  /* Secondary / hint text inside menu buttons */
  body.v27-mobile .v27-menu-btn small,
  body.v27-mobile .v27-menu-btn .v27-menu-sub {
    color: #93a9c1;
  }
  /* Squid menu item icon — lift to text color on dark */
  body.v27-mobile .v27-menu-btn[data-act="squid"] .v63-2-squid-ic {
    color: #b9c6d6;
  }

  /* Sheet backdrop darkens a bit more for contrast against dark sheet */
  body.v27-mobile .v27-sheet.v27-sheet-open .v27-sheet-backdrop {
    background: rgba(0, 10, 20, 0.55);
  }
}

/* ============================================================================
   6. Menu sheet inner elements — dark palette
   Fix light-colored titles, hint text, the hero stat card (MARKS/RAMPS/STATUS),
   the Bite-forecast feature-button gradient, the bc-sheet-account row, and the
   progress bar surface inside the offline download flow — all scoped to
   mobile. Desktop is untouched.
   ========================================================================== */
@media (max-width: 740px) {
  /* Titles inside menu buttons — light on dark */
  body.v27-mobile .v27-menu-btn-main {
    color: #e6edf5;
  }
  body.v27-mobile .v27-menu-btn-hint {
    color: #93a9c1;
  }

  /* Group labels above each menu section (SPOTS & CONDITIONS etc.) */
  body.v27-mobile .v27-menu-group-label {
    color: #93a9c1;
  }

  /* Hero stat card (MARKS / RAMPS / STATUS) */
  body.v27-mobile .v27-menu-hero {
    background: linear-gradient(135deg, #11223a 0%, #0a1523 100%);
    border: 1px solid #1b2e44;
  }
  body.v27-mobile .v27-menu-hero-label {
    color: #93a9c1;
  }
  body.v27-mobile .v27-menu-hero strong {
    color: #e6edf5;
  }
  /* Status pills inside hero */
  body.v27-mobile .v27-pill-ok {
    background: rgba(79, 227, 168, 0.16);
    color: #4fe3a8;
  }
  body.v27-mobile .v27-pill-warn {
    background: rgba(255, 106, 106, 0.16);
    color: #ff9898;
  }

  /* Bite-forecast feature button — keep the accent tint but on dark base */
  body.v27-mobile .v27-menu-btn-feature {
    background: linear-gradient(180deg, rgba(58, 165, 232, 0.18), rgba(58, 165, 232, 0.06)) !important;
    border: 1px solid rgba(58, 165, 232, 0.35) !important;
  }

  /* NEW badge already fine (dark-green on transparent), leave alone */

  /* Sign-in / account row (auth/auth.css) */
  body.v27-mobile #v27SheetBody .bc-sheet-account {
    background: #11223a;
    border: 1px solid #1b2e44;
  }
  body.v27-mobile #v27SheetBody .bc-sheet-account:hover {
    background: #1a3050;
    border-color: rgba(246, 194, 59, 0.4);
  }
  body.v27-mobile #v27SheetBody .bc-sheet-account-title {
    color: #e6edf5;
  }
  body.v27-mobile #v27SheetBody .bc-sheet-account-sub {
    color: #93a9c1;
  }
  body.v27-mobile #v27SheetBody .bc-sheet-account-chev {
    color: #93a9c1;
  }

  /* Primary (filled) menu button — swap from dark-on-dark to yellow accent so
     it still reads as the "call to action" on a dark sheet */
  body.v27-mobile .v27-menu-btn-primary {
    background: #f6c23b;
    border-color: #f6c23b;
    color: #0b1b2b;
  }
  body.v27-mobile .v27-menu-btn-primary .v27-menu-btn-main,
  body.v27-mobile .v27-menu-btn-primary .v27-menu-btn-hint {
    color: #0b1b2b;
  }

  /* Danger (delete offline) button — dark red wash */
  body.v27-mobile .v27-menu-btn-danger {
    background: rgba(255, 106, 106, 0.08);
    border-color: rgba(255, 106, 106, 0.35);
  }
  body.v27-mobile .v27-menu-btn-danger .v27-menu-btn-main {
    color: #ff9898;
  }

  /* Offline progress bar surface */
  body.v27-mobile .v27-progress {
    background: #1b2e44;
  }

  /* Menu footer text (e.g. "v63.2 · Port Phillip & Western Port") */
  body.v27-mobile .v27-menu-foot {
    color: #93a9c1;
  }
}

/* ===========================================================================
   v63.4 — Bottom bar pinning hotfix
   ---------------------------------------------------------------------------
   Brett reported "bottom menu moves up when I switch maps to Bays Relief".
   Not reproducible in Playwright but defensively we:
     1. Force the mobile bottom bar (.v36-thumb) to a rock-solid bottom anchor
        using env() with a hard 0 floor and its own stacking context so no
        transform on any ancestor can translate it.
     2. Hide the Leaflet attribution control on mobile. Bays Relief adds a
        long "Bathymetry © Vicmap NatureKit (DEECA)" string that can wrap to
        two lines on 390-ish px screens; the attribution bar is inside #map,
        so a wrapping line doesn't push .v36-thumb, but it sits JUST above
        the bar and can read visually as "the menu shifted". Credits are
        now surfaced in the About sheet (via the More > About button).
     3. Reserve space below the map for the bar so tiles don't render under
        it \u2014 keeps everything predictable across URL-bar auto-hide.
   =========================================================================== */
@media (max-width: 740px) {
  body.v27-mobile .v36-thumb {
    /* v63.4: explicit pinning. `!important` on bottom+top so nothing can
       override; translate3d to keep on GPU layer and stop Safari tearing. */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translate3d(0, 0, 0) !important;
    /* Own stacking context so no ancestor transform can displace it. */
    isolation: isolate;
    /* Use max() for a hard 0 floor so iOS can't ever resolve negative. */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
  /* Hide Leaflet attribution on mobile \u2014 credits live in About sheet. */
  body.v27-mobile .leaflet-control-attribution {
    display: none !important;
  }
}

/* =========================================================================
 * v63.9.1 — DESKTOP Squid Mode auto-hide sidebar
 * When Squid Mode is active and we're NOT on mobile (body.v27-mobile is
 * absent on desktop), collapse the left sidebar so the Squid HUD + spots
 * panel have the full map width. Exiting Squid Mode (the HUD Exit, or the
 * topbar Fish Now / Navigate / Structure / Plan Trip preset) clears
 * body.v63-squid-active and the sidebar slides back.
 *
 * Mobile already hides the sidebar at <=740px so this rule is desktop-only
 * by virtue of the v27-mobile class only being set on mobile viewports.
 * ========================================================================= */
body.v63-squid-active:not(.v27-mobile) #app {
  grid-template-columns: 0 1fr !important;
}
body.v63-squid-active:not(.v27-mobile) #sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: width 0.22s ease, visibility 0s linear 0.22s;
}
body.v63-squid-active:not(.v27-mobile) #sidebar * {
  visibility: hidden !important;
}
/* Hamburger stays visible and clickable so user can reopen sidebar mid-squid
   if they want. Positioned absolute top-left already. */