/* ── mobile.css ────────────────────────────────────────────────*/

/* Consolidated cross-cutting mobile overrides. Loaded LAST on every page so
   these rules win the cascade over the page/component files above. */

  /* ── MOBILE (≤768px) ─────────────────────────────────────────────────────────── */
  @media (max-width: 768px) {

    /* Nav — hide desktop chrome, show hamburger */
    .nav-links        { display: none; }
    #nav-av           { display: none; }
    #nav-profile-name { display: none; }
    #nav-captain-badge { display: none !important; }
    #nav-signout-btn  { display: none; }
    #nav-hamburger    { display: flex; }
    /* Long clubs.name is shown above this breakpoint (css/shared.css); below
       it, fall back to the shorter display name so the crest/hamburger never
       get squeezed — see js/auth.js initClubApp(). */
    #nav-title-full   { display: none; }
    #nav-title-short  { display: inline; }

    /* Sessions — tabs scrollable horizontally */
    .tabs {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      flex-wrap: nowrap;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
      white-space: nowrap;
      flex-shrink: 0;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    /* Captain page — tab row (Plan week / Confirm / Roster / River / Settings)
       scrollable horizontally, same treatment as .tabs above */
    .cp-tabs {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      flex-wrap: nowrap;
    }
    .cp-tabs::-webkit-scrollbar { display: none; }
    .cp-tab {
      white-space: nowrap;
      flex-shrink: 0;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    /* Settings tab sub-nav (jump links to each section) — scrollable
       horizontally instead of wrapping, same treatment as .cp-tabs above */
    .cp-settings-subnav {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      flex-wrap: nowrap;
    }
    .cp-settings-subnav::-webkit-scrollbar { display: none; }
    .cp-settings-subnav-link {
      flex-shrink: 0;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    /* Roster/Confirm inner tabs (Upcoming/Sign-off/Emails, Members/Coaches/Boats) —
       same fixed-row-with-badges issue as .cp-tabs above */
    .roster-inner-tabs {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      flex-wrap: nowrap;
    }
    .roster-inner-tabs::-webkit-scrollbar { display: none; }
    .roster-inner-tab {
      white-space: nowrap;
      flex-shrink: 0;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    /* Gender filter pills + squad legend can wrap */
    .gender-tabs { flex-wrap: wrap; }
    .gtab { min-height: 44px; }
    .legend { flex-wrap: wrap; }

    /* Session cards — near-full-width, one visible at a time */
    .session-card {
      flex: 0 0 calc(100vw - 88px);
      min-width: calc(100vw - 88px);
    }

    /* Modal — bottom sheet */
    .modal-bg { align-items: flex-end; }
    .modal {
      width: 100%;
      max-width: 100%;
      border-radius: 20px 20px 0 0;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: sheet-in 300ms var(--spring-ease) forwards;
    }
    /* Overrides the bare .modal rule above via higher specificity — see
       css/shared.css .modal-bg.closing .modal for the same pattern. */
    .modal-bg.closing .modal { animation: sheet-out 190ms ease-out forwards; }
    @keyframes sheet-in  { from { transform: translateY(24px); } to { transform: translateY(0); } }
    @keyframes sheet-out { from { transform: translateY(0); } to { transform: translateY(24px); } }
    .user-list { flex: 1; max-height: none; }

    /* Minimum 44px tap targets */
    .btn-nav { min-height: 44px; min-width: 44px; }
    .b-ok, .b-no { min-height: 44px; }

  }

  @media (max-width: 480px) {
    .week-nav { gap: 2px; }
    .btn-nav { min-width: 32px; width: 32px; height: 32px; min-height: 32px; padding: 4px; margin: 0; }
    .week-nav #week-label, .week-nav span { padding: 0 2px; margin-left: 0; margin-right: 0; }
    .week-nav span { min-width: 0; }
  }

  /* Session notes — mobile collapse behaviour (< 700px) */
  @media (max-width: 700px) {
    .card-notes-text { display: none; }
    .card-notes-expanded .card-notes-text { display: block; }
    .card-notes-toggle {
      display: inline-block;
      margin-top: 2px;
      background: none;
      border: none;
      padding: 0;
      font-size: 11px;
      color: var(--text-tertiary);
      cursor: pointer;
      font-family: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .card-notes-expanded .card-notes-toggle { margin-top: 6px; }
  }

@media (max-width: 640px) {
  /* Confirm card header: wrap to two lines instead of overflowing horizontally */
  .confirm-card-hdr {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .confirm-card-hdr > div:first-child {
    flex-shrink: 1 !important;
    min-width: 0;
  }
  /* Push crew-name summary below the info+pill row on its own full-width line */
  .confirm-crew-summary {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
  }
  /* Status pill (now potentially long — "Confirmed by {name} at {time}") gets its
     own full-width row too, rather than squeezing next to the badges block. */
  .confirm-status-row {
    order: 2;
    flex-basis: 100%;
    justify-content: flex-end;
  }

  /* ── MOBILE SLIDE-UP PANELS & MODALS ─────────────────────────────────────── */

  /* Main content: extra bottom breathing room for browser chrome */
  main,
  #page-sessions,
  #page-captain,
  #page-profile {
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 24px);
  }

  /* Overlays: increase backdrop blur */
  .cp-panel-overlay { backdrop-filter: blur(4px); }
  .roster-panel-overlay { backdrop-filter: blur(4px); }
  .modal-bg { backdrop-filter: blur(4px); align-items: flex-end; padding: 0; }

  /* ── SESSION EDIT PANEL (#cp-panel) ── */
  #cp-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    max-height: 82svh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 1;
    pointer-events: none;
    transition: transform 190ms ease-out;
  }
  #cp-panel.open {
    transform: translateY(0);
    pointer-events: auto;
    transition: transform 320ms var(--spring-ease);
  }
  #cp-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  #cp-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #cp-panel .cp-panel-footer {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  /* ── ERG SESSION PANEL (#erg-panel) — same recipe as #cp-panel ── */
  #erg-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    max-height: 82svh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 1;
    pointer-events: none;
    transition: transform 190ms ease-out;
  }
  #erg-panel.open {
    transform: translateY(0);
    pointer-events: auto;
    transition: transform 320ms var(--spring-ease);
  }
  #erg-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  #erg-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #erg-panel .cp-panel-footer {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  /* ── ROSTER PANEL (#roster-panel) ── */
  #roster-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 82vh;
    max-height: 82svh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    overflow: hidden;
    transition: transform 190ms ease-out;
  }
  #roster-panel.open {
    transform: translateY(0);
    transition: transform 320ms var(--spring-ease);
  }
  #roster-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  #roster-panel .rp-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  #roster-panel .rp-footer {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  /* ── HEATMAP NAMES PANEL (#hm-names-panel) ── */
  #hm-names-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 82vh;
    max-height: 82svh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    overflow: hidden;
    transition: transform 190ms ease-out;
  }
  #hm-names-panel.open {
    transform: translateY(0);
    transition: transform 320ms var(--spring-ease);
  }
  #hm-names-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  #hm-names-panel .rp-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  #hm-names-panel .rp-footer {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  /* ── BOAT PANEL (#boat-panel) — same recipe as #roster-panel/#hm-names-panel ── */
  #boat-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 82vh;
    max-height: 82svh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    overflow: hidden;
    transition: transform 190ms ease-out;
  }
  #boat-panel.open {
    transform: translateY(0);
    transition: transform 320ms var(--spring-ease);
  }
  #boat-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  #boat-panel .rp-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  #boat-panel .rp-footer {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  /* ── CREW PRESET EDITOR (#ctpk-panel) — standalone slide-out, opened
     directly from the Club Training tab rather than stacked over another
     panel, so it gets the same bottom-sheet recipe as #roster-panel/
     #hm-names-panel/#boat-panel above rather than the coach/cox/crew
     pickers' full-screen-over-#cp-panel treatment below. */
  #ctpk-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 82vh;
    max-height: 82svh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    overflow: hidden;
    transition: transform 190ms ease-out;
  }
  #ctpk-panel.open {
    transform: translateY(0);
    transition: transform 320ms var(--spring-ease);
  }
  #ctpk-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  #ctpk-panel .rp-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* ── COACH / COX / CREW PICKERS (#cpk-panel / #cxpk-panel / #crpk-panel) ──
     Full-screen sheet stacked above #cp-panel, like a native nav push, rather
     than the fixed-width side panel used on desktop. Uses id selectors so
     this beats the later unscoped .cpk-panel desktop-width rule regardless
     of source order. Closing only clears the picker's own .open class, so
     #cp-panel underneath is left open and untouched. */
  #cpk-overlay, #cxpk-overlay, #crpk-overlay {
    z-index: 155;
  }
  #cpk-panel, #cxpk-panel, #crpk-panel {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-left: none;
    box-shadow: none;
    z-index: 156;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 190ms ease-out;
  }
  #cpk-panel.open, #cxpk-panel.open, #crpk-panel.open {
    transform: translateX(0);
    transition: transform 320ms var(--spring-ease);
  }
  #cpk-panel .rp-body, #cxpk-panel .rp-body, #crpk-panel .rp-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  #cpk-panel .rp-footer, #cxpk-panel .rp-footer, #crpk-panel .rp-footer {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  /* Set-crew seat tap-to-swap (mobile only — desktop uses drag-and-drop) */
  .crpk-seat-row--selected {
    background: #eff6ff;
    outline: 1.5px solid #93c5fd;
    border-radius: 5px;
  }

  /* ── ALL MODALS: bottom sheet ── */
  .modal {
    height: auto;
    max-height: 75vh;
    max-height: 75svh;
    overflow: hidden;
    width: 100%;
    border-radius: 20px 20px 0 0;
    margin: 0;
    padding-top: 0;
    animation: sheet-in-full 300ms var(--spring-ease) forwards;
  }
  /* Overrides the lighter 768px .modal-bg.closing .modal rule (same
     specificity, later in source — wins whenever both breakpoints match). */
  .modal-bg.closing .modal { animation: sheet-out-full 190ms ease-out forwards; }
  @keyframes sheet-in-full {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @keyframes sheet-out-full {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
  }
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 12px;
    flex-shrink: 0;
    touch-action: none; /* handle strip: dismiss gesture handled in JS (utils.js _attachModalBgSwipeDismiss), not native scroll */
  }
  .modal h3,
  .modal .modal-sub,
  .modal .modal-notice { flex-shrink: 0; }
  .modal .modal-btns {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  /* Modal scrollable content areas */
  .modal .user-list,
  .modal #cem-preview,
  .modal #csm-body,
  .modal #cap-checklist {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    max-height: none !important;
  }

  /* Override inline max-width on specific modals */
  #confirm-email-modal .modal,
  #confirm-signoff-modal .modal,
  #confirm-cancel-modal .modal,
  #cap-modal .modal {
    max-width: 100% !important;
  }
  /* Confirm-email modal has inline max-height:80vh — override to match pattern */
  #confirm-email-modal .modal {
    max-height: 75vh !important;
    max-height: 75svh !important;
    height: auto;
  }

  /* Tap-to-expand for the email body preview. Collapsed = current compact
     flex:1 behaviour above (unchanged). Expanded just grows the modal's own
     max-height — #cem-preview is the only flex-grow child in the column, so
     the extra room goes straight to it without touching layout of the
     fields/buttons below it. */
  .cem-preview-toggle {
    display: block !important;
    flex-shrink: 0;
    margin: -8px 0 10px;
    padding: 4px 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  #confirm-email-modal.cem-expanded .modal {
    max-height: 92vh !important;
    max-height: 92svh !important;
  }

  /* Fix 1: roster table horizontal scroll on mobile */
  .roster-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Edge-fade scroll affordance, not just the scrollbar (easy to miss and
       hidden entirely on touch devices) — a shadow on each side that still
       has more content, using the background-attachment:local trick: the
       "local" fade layers scroll along with the table and cover the fixed
       "scroll" shadow layers once that edge is reached, so each shadow only
       shows while there's actually more to scroll to. */
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left,
      linear-gradient(to right, rgba(255,255,255,0), var(--surface) 70%) right,
      linear-gradient(to right, rgba(0,0,0,0.16), rgba(0,0,0,0)) left,
      linear-gradient(to left, rgba(0,0,0,0.16), rgba(0,0,0,0)) right;
    background-repeat: no-repeat;
    background-color: var(--surface);
    background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .roster-table { min-width: 600px; }

  /* Fix 3: roster toolbar as two rows on mobile */
  .roster-toolbar-wrap { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; }
  .roster-toolbar-r1 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .roster-toolbar-r2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  #roster-search { order: 0; flex: 1; min-width: 0; }
  #roster-sort-select { order: 0; flex: 1 1 0; min-width: 0; }
  .roster-filters-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; font-family: inherit;
    border: 0.5px solid var(--border-strong);
    background: var(--surface); color: var(--text-secondary);
    cursor: pointer; transition: all 0.12s;
    flex-shrink: 0; white-space: nowrap;
  }
  .roster-filters-toggle[aria-expanded="true"] {
    background: var(--nav-navy); color: white; border-color: transparent;
  }
  #roster-filter-collapse { display: none; }
  #roster-filter-collapse.open { display: block; }

  /* Prevent iOS auto-zoom on inputs — 16px !important beats class-level font-size rules */
  input, select, textarea { font-size: 16px !important; }
  .modal input, .modal select, .modal textarea,
  #cp-panel input, #cp-panel select, #cp-panel textarea,
  #erg-panel input, #erg-panel select, #erg-panel textarea,
  #roster-panel input, #roster-panel select, #roster-panel textarea,
  #boat-panel input, #boat-panel select, #boat-panel textarea,
  #cpk-panel input, #cpk-panel select, #cpk-panel textarea,
  #cxpk-panel input, #cxpk-panel select, #cxpk-panel textarea,
  #crpk-panel input, #crpk-panel select, #crpk-panel textarea {
    font-size: 16px !important;
  }

  /* Fix 4: guest name row — input + button both fit within the modal width */
  .modal-guest-row {
    box-sizing: border-box;
    overflow: hidden;
  }
  .modal-guest-input {
    flex: 1;
    min-width: 0;
  }
  .modal-guest-btn {
    flex: none;
    width: 64px;
    padding-left: 0;
    padding-right: 0;
  }

  /* ── COACHES > CLUB TRAINING TAB — master/detail collapse ──────────────────
     Same class-toggle idiom every other per-feature responsive view in this
     app uses at this breakpoint (not the roster-panel/picker slide-out chrome
     — this tab's detail sits inline next to the list on desktop, not in an
     overlay drawer, so it needs its own show/hide pair instead). List first;
     ctOpenDetail()/ctCloseDetail() (js/coaches.js) toggle ct-hidden/ct-open. */
  .ct-layout { display: block; }
  .ct-list-col.ct-hidden { display: none; }
  .ct-detail-col {
    display: none;
    position: fixed; inset: 0; z-index: 400;
    max-width: none; max-height: none;
    border-radius: 0; border: none;
    padding: 16px;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
    overflow-y: auto;
  }
  .ct-detail-col.ct-open { display: block; }
  .ct-detail-back { display: inline-block !important; }
}

/* ── REDUCED MOTION: no scale/translate/bounce, app-wide ──────────────────
   Unconditioned on viewport width and placed last in the last-loaded file,
   so it wins the cascade over every modal/panel rule above regardless of
   breakpoint. Two treatments:
   - Centred modal chrome (.modal / .cp-panel): these are already
     opacity+transform gated with no separate pointer-events reliance
     (.modal is hidden by its ancestor .modal-bg's display:none; .cp-panel
     already carries its own pointer-events:none/auto), so they fall back
     to a genuine opacity-only fade as asked.
   - Slide-out panels / bottom sheets (.roster-panel, .cpk-panel and the
     mobile #cp-panel/#erg-panel/#roster-panel/#hm-names-panel/#boat-panel/
     #cpk-panel family): several of these rely on physically sitting off-canvas
     (right/translate) for closed-state click-safety rather than
     pointer-events, so swapping them to an in-place opacity fade would
     leave an invisible-but-clickable panel. Collapsing the transition to
     near-zero keeps the existing position-based gating intact while still
     removing all perceptible spring/slide motion. */
@media (prefers-reduced-motion: reduce) {
  .modal-bg.open, .modal-bg.closing,
  .cp-panel-overlay.open, .cp-panel-overlay.closing,
  .roster-panel-overlay.open, .roster-panel-overlay.closing {
    animation-duration: 120ms !important;
  }

  .modal, .modal-bg.closing .modal {
    animation: none !important;
    transform: none !important;
    transition: opacity 120ms ease-out !important;
    opacity: 0;
  }
  .modal-bg.open .modal { opacity: 1; }

  .cp-panel {
    transform: translate(-50%, -50%) !important;
    transition: opacity 120ms ease-out !important;
  }

  .roster-panel, .cpk-panel,
  #cp-panel, #erg-panel, #roster-panel, #hm-names-panel, #boat-panel,
  #cpk-panel, #cxpk-panel, #crpk-panel, #ctpk-panel {
    transition-duration: 1ms !important;
  }
}