/* ============================================================================
 * BayCast v63.9.22 — Mobile fixes (Vwhater.5)
 *
 * Brett: "font needs to be white, something over it — can't see the layer menu"
 *        "camera button, I can't find it on the mobile app"
 *        "easy to change the layers"
 *
 * Fixes scoped to mobile only. Desktop is NOT touched.
 *
 * 1. v27 Layers sheet: toggle labels, descriptions, section labels, "current"
 *    pill, chart-card text — all forced to readable light colors on the dark
 *    sheet (#0a1523).
 * 2. Chart cards (Bay Relief / Satellite / Nautical) themed for dark sheet.
 * 3. Restore the yellow camera FAB on mobile (was hidden by html.v27-mobile-pre
 *    blanket rule in index.html). Position it above the thumb-zone bar.
 * ============================================================================ */

@media (max-width: 740px) {
  /* ---- Layers sheet text — FORCE readable light palette ------------------- */
  body.v27-mobile .v27-sheet-body { color: #e6edf5; }

  body.v27-mobile .v27-toggle-label { color: #f1f6fb !important; }
  body.v27-mobile .v27-toggle-desc  { color: #9fb2c8 !important; }

  /* Toggle row separator — darker line that's visible on dark sheet */
  body.v27-mobile .v27-toggle { border-bottom-color: #1b2e44 !important; }

  /* Section header ("Chart style", "Overlays", "Fishing intel" etc.) */
  body.v27-mobile .v34-section-label {
    color: #9fb2c8;
    font: 600 11px/1 -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 12px 0 8px;
  }

  /* Informational paragraph at bottom of sheet */
  body.v27-mobile .v27-p { color: #b9c6d6; }
  body.v27-mobile .v27-p-dim { color: #7e92a8 !important; }

  /* ---- Chart-base picker cards — dark-sheet treatment --------------------- */
  body.v27-mobile .v34-chart-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 6px;
  }
  body.v27-mobile .v34-chart-card {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 14px 12px;
    background: #11223a;
    border: 1px solid #1b2e44;
    border-radius: 12px;
    color: #e6edf5;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, background 0.15s;
  }
  body.v27-mobile .v34-chart-card:active { background: #17304e; }
  body.v27-mobile .v34-chart-card.active {
    background: #14304f;
    border-color: #f6c23b;
    box-shadow: 0 0 0 1px #f6c23b inset;
  }
  body.v27-mobile .v34-chart-sw {
    width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
    background: #1b2e44;
    background-size: cover; background-position: center;
    border: 1px solid #243a55;
  }
  /* Tiny preview swatches so the 3 maps feel distinct */
  body.v27-mobile .v34-sw-vicmap {
    background: linear-gradient(135deg, #2c6e3e 0%, #6eb083 45%, #2b5b8c 100%);
  }
  body.v27-mobile .v34-sw-satellite {
    background: radial-gradient(circle at 30% 40%, #2d4a2a 0%, #1e3a5e 55%, #0a1628 100%);
  }
  body.v27-mobile .v34-sw-nautical {
    background: linear-gradient(180deg, #cfe5f3 0%, #6ea7c8 55%, #2b5b8c 100%);
  }
  /* Hide the legacy chart/ocean swatches if they ever render */
  body.v27-mobile .v34-sw-chart,
  body.v27-mobile .v34-sw-ocean {
    background: linear-gradient(135deg, #334d68, #1b2e44);
  }
  body.v27-mobile .v34-chart-txt {
    flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
  }
  body.v27-mobile .v34-chart-label {
    font: 700 16px/1.2 -apple-system, sans-serif;
    color: #f1f6fb;
  }
  body.v27-mobile .v34-chart-desc {
    font: 500 13px/1.3 -apple-system, sans-serif;
    color: #9fb2c8;
  }
  body.v27-mobile .v34-chart-hint {
    font: 500 12px/1.3 -apple-system, sans-serif;
    color: #7e92a8;
  }
  body.v27-mobile .v34-chart-active-pill {
    display: inline-block;
    padding: 2px 7px;
    margin-left: 6px;
    font: 700 10px/1 -apple-system, sans-serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #0a1523;
    background: #f6c23b;
    border-radius: 10px;
    vertical-align: middle;
  }
  body.v27-mobile .v34-chart-tick {
    flex: 0 0 auto;
    font-size: 18px; font-weight: 800; color: #f6c23b;
    width: 22px; text-align: center;
  }

  /* ---- v27 Layers FAB — make it stand out more --------------------------- */
  body.v27-mobile #v27FabLayers {
    /* yellow tint so the "where do I change maps" button is obvious */
    background: linear-gradient(180deg, #fff 0%, #fffaea 100%);
    border: 1px solid #f6c23b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(246, 194, 59, 0.25);
  }
  body.v27-mobile #v27FabLayers svg { stroke: #0a1523; }
  body.v27-mobile #v27FabLayers:active { transform: scale(0.94); }

  /* ---- Mobile camera FAB — restore ---------------------------------------
   * index.html hides #bcCaptureFab on html.v27-mobile-pre. That was correct
   * while we also injected .bc-v27-capture into the fab stack. But now Brett
   * couldn't find any camera, so: keep the standalone button visible and
   * park it BELOW the thumb bar (above the home-indicator safe area).
   * Note: v63-capture.js has its own `body.v27-mobile #bcCaptureFab { display:none }`
   * rule — we override both here with !important.
   * ----------------------------------------------------------------------- */
  /* Specificity note: v63-capture.js injects <style id="bcCaptureStyle">
   * AFTER this stylesheet loads, with `body.v27-mobile #bcCaptureFab
   * { display: none !important }`. To beat it we chain html + body selectors
   * on the same element so our rule has higher specificity AND later source
   * would still lose — we match both axes. */
  html.v27-mobile-pre body.v27-mobile #bcCaptureFab,
  html body.v27-mobile #bcCaptureFab {
    display: flex !important;
    /* Brett: photo button was crammed on the right over Drop-pin.
     * Move to bottom-LEFT, clear of Navigate/Drop-pin, sits above thumb bar. */
    left: 14px !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
    width: 54px !important;
    height: 54px !important;
    z-index: var(--z-map-controls) !important;
  }
  /* Add a tiny "Photo" label under the FAB so the icon meets the
     old-people rule (icons must have labels). */
  html.v27-mobile-pre body.v27-mobile #bcCaptureFab::after,
  html body.v27-mobile #bcCaptureFab::after {
    content: 'Photo';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    padding: 2px 6px;
    font: 700 10px/1.2 -apple-system, system-ui, sans-serif;
    color: #0a1523;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  }
  html.v27-mobile-pre body.v27-mobile #bcCaptureFab-label,
  html body.v27-mobile #bcCaptureFab-label {
    display: none !important;
  }
  /* When the sheet or a modal is open, hide the camera to avoid clutter */
  body.v27-mobile:has(.v27-sheet.v27-sheet-open) #bcCaptureFab,
  body.v27-mobile:has(.v63fc-scrim) #bcCaptureFab,
  body.v27-mobile:has(.bc-sheet-open) #bcCaptureFab {
    display: none !important;
  }

  /* ---- GPS Marks sheet — same dark-bg readability fix as Layers ----------
   * Brett: "GPS marks, you can see the font needs to be white,
   *         something over it. Same bug as the layer menu."
   * The panel uses body.v27-mobile .v27-sheet-panel (bg #0a1523 dark navy),
   * but mark row classes inherit light-theme text colors from styles.css.
   * Force the full hierarchy to the light palette inside that dark panel.
   * ----------------------------------------------------------------------- */
  body.v27-mobile .v27-sheet-panel .v27-mark-row {
    color: #f1f6fb !important;
    border-bottom-color: #1b2e44 !important;
    background: transparent !important;
  }
  body.v27-mobile .v27-sheet-panel .v27-mark-row:active {
    background: rgba(246, 194, 59, 0.08) !important;
  }
  body.v27-mobile .v27-sheet-panel .v27-mark-name,
  body.v27-mobile .v27-sheet-panel .v33-mark-main {
    color: #ffffff !important;
  }
  body.v27-mobile .v27-sheet-panel .v27-mark-sub,
  body.v27-mobile .v27-sheet-panel .v33-mark-sub {
    color: #9fb2c8 !important;
  }

  /* Sort / filter chips at top of GPS Marks sheet */
  body.v27-mobile .v27-sheet-panel .v33-sort-btn {
    color: #9fb2c8 !important;
    background: #11223a !important;
    border: 1px solid #1b2e44 !important;
  }
  body.v27-mobile .v27-sheet-panel .v33-sort-btn.active {
    color: #0a1523 !important;
    background: #f6c23b !important;
    border-color: #f6c23b !important;
  }

  /* Empty state ("No marks yet") */
  body.v27-mobile .v27-sheet-panel .v33-marks-empty,
  body.v27-mobile .v27-sheet-panel .v33-marks-empty * {
    color: #b9c6d6 !important;
  }

  /* Section headers inside marks sheet (if any group labels exist) */
  body.v27-mobile .v27-sheet-panel .v33-marks-group-label {
    color: #7e92a8 !important;
  }
}

/* ============================================================================
 * Vwhater.9 — Species menu collapsible (desktop + mobile clone)
 *
 * Brett: "clean up the left menu The species menu in the desktop because
 *         There's a lot of shit fish there as well Just have everything
 *         collapsible"
 *
 * Common target species stay visible. Everything else lives behind a
 * "Show all species" <details> toggle so the sidebar isn't a wall of bycatch.
 * ============================================================================ */
.species-more {
  width: 100%;
  margin-top: 8px;
}

.species-more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #11223a;
  border: 1px solid #1b2e44;
  color: #9fb2c8;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  transition: background .15s ease, color .15s ease;
}
.species-more > summary::-webkit-details-marker { display: none; }
.species-more > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform .15s ease;
  font-size: 10px;
  opacity: 0.7;
}
.species-more[open] > summary::before { transform: rotate(90deg); }
.species-more > summary:hover {
  background: #182f4c;
  color: #e6edf5;
}

.species-more-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Inherit chip group behaviour — chips inside the nested wrap should look
 * identical to the outer chips (they use the same .chip class) */
.species-more-chips .chip { margin: 0; }

/* ============================================================================
 * Vwhater.10 — Mobile base-chart chip row (top of Layers sheet)
 * Lets Brett switch Bay Relief / Satellite / Nautical from his phone.
 * ============================================================================ */
#v27SheetBody .v27-base-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 6px;
}
#v27SheetBody .v27-base-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: #e6edf5;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
#v27SheetBody .v27-base-chip:active { transform: scale(0.97); }
#v27SheetBody .v27-base-chip.v27-base-chip-active {
  background: #0b6ea8;
  border-color: #0b6ea8;
  color: #fff;
}
#v27SheetBody .v27-base-chip-label {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
}
#v27SheetBody .v27-base-chip-hint {
  font-size: 11px;
  opacity: 0.75;
  line-height: 1.2;
}