/* ============================================================================
 * mobile.css — Mobile / small-screen optimizations.
 *
 * Every rule lives inside a media query, so the desktop layout (> 768px) is
 * completely untouched. This file is loaded LAST, so its !important rules win
 * over both the earlier stylesheets and the many inline styles in the EJS
 * views (inline styles can only be beaten with !important).
 *
 * Breakpoints:
 *   ≤ 768px  — phones: full-width content, bottom tab bar, slide-over sidebar drawer.
 *   ≤ 700px  — table → stacked-card transform lives in dashboard.css.
 *   ≤ 480px  — small phones: full-screen modals, tightest typography.
 * ========================================================================== */

/* ── Shell mobile overrides (≤768px) ────────────────────────────────────────
 * Desktop icon rail hides; bottom tab bar + "More" sheet replace it.
 * Sidebar is a slide-over drawer opened via "Section menu" in the More sheet.
 * ─────────────────────────────────────────────────────────────────────────── */
/* ── Mobile bottom navigation (hidden on desktop) ─────────────────────────── */
.shell-mobile-nav {
  display: none;
}
.shell-mobile-more { display: none; }

@media (max-width: 768px) {
  /* Full-width content: hide desktop icon rail, use bottom tab bar instead. */
  .shell-rail { display: none !important; }

  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr !important;
    height: 100dvh !important;
  }

  .app-main {
    overflow-y: auto !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Bottom tab bar */
  .shell-mobile-nav {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: calc(var(--z-shell) + 3);
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    gap: 2px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  }
  .shell-mobile-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--cool-grey);
    font-size: 0.62rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
  }
  .shell-mobile-nav__item svg,
  .shell-mobile-nav__item .material-symbols-outlined { flex-shrink: 0; }
  .shell-mobile-nav__item .material-symbols-outlined {
    font-size: 24px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .shell-mobile-nav__item.is-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }
  .shell-mobile-nav__item span:not(.material-symbols-outlined) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .shell-mobile-nav__item.is-active {
    color: var(--accent-blue);
    background: var(--bg-translucent-md);
  }

  /* "More" sheet */
  .shell-mobile-more {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) + 2);
    pointer-events: none;
  }
  .shell-mobile-more[hidden] { display: none !important; }
  .shell-mobile-more:not([hidden]) { pointer-events: auto; }
  .shell-mobile-more__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }
  .shell-mobile-more__sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--panel-bg);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--panel-border);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 72vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  }
  .shell-mobile-more__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 0.9rem;
  }
  .shell-mobile-more__close {
    width: 32px; height: 32px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
  }
  .shell-mobile-more__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .shell-mobile-more__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: var(--bg-translucent-sm);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
  }
  .shell-mobile-more__link.is-active {
    border-color: var(--accent-blue);
    background: var(--bg-translucent-md);
  }
  .shell-mobile-more__icon {
    font-size: 20px;
    line-height: 1;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  }
  .shell-mobile-more__link.is-active .shell-mobile-more__icon {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  }
  .shell-mobile-more__ops {
    grid-column: 1 / -1;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: var(--bg-translucent-sm);
  }
  .shell-mobile-more__ops-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--cool-grey);
  }
  .shell-mobile-more__ops .shell-mobile-more__link {
    margin-top: 4px;
  }
  .shell-mobile-more__link--btn {
    width: 100%;
    cursor: pointer;
    font-family: inherit;
  }
  .shell-mobile-more__menu {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: var(--bg-translucent-sm);
    color: var(--accent-blue);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
  }

  /* Sidebar drawer — slide-over on mobile (overlays content + backdrop). */
  .app-shell {
    --shell-drawer-w: min(280px, 88vw);
    grid-template-columns: 1fr !important;
    transition: none !important;
  }

  .shell-drawer-slot {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--shell-drawer-w) !important;
    z-index: calc(var(--z-shell) + 4) !important;
    transform: translateX(0);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shell-shadow-drawer, 10px 0 32px rgba(0, 0, 0, 0.28)) !important;
  }
  .app-shell.sidebar-collapsed .shell-drawer-slot {
    transform: translateX(calc(-1 * var(--shell-drawer-w) + var(--shell-handle-w))) !important;
  }

  .shell-side {
    width: var(--shell-drawer-w) !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto;
  }

  .shell-drawer-handle {
    pointer-events: auto;
  }

  .shell-drawer-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-shell) + 3);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s, visibility 0.32s;
  }
  .app-shell:not(.sidebar-collapsed) .shell-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Notification panel — full width above bottom nav */
  #notif-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 50vh !important;
  }

  /* Roster board: stack tiers vertically on phones */
  .pl-board { grid-template-columns: 1fr !important; }
  .pl-board__side { flex-direction: column !important; }
  .pl-sechead {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* ---- Page gutters ----------------------------------------------------- */
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ---- Headings --------------------------------------------------------- */
  header { margin-bottom: 22px !important; }
  .team-info h1,
  .page-header h1 { font-size: 1.7rem !important; }

  /* ---- Filter bars: wrap, full-width controls --------------------------- */
  .filter-bar {
    flex-wrap: wrap !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  .filter-bar .search-box,
  .filter-bar input[type="text"],
  .filter-bar input[type="search"],
  .filter-bar select {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .select-group { flex-wrap: wrap !important; width: 100% !important; }

  /* ---- Tab strips: scroll horizontally ---------------------------------- */
  .tab-group, .filter-bar.cm-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    scrollbar-width: none;
  }
  .tab-group::-webkit-scrollbar,
  .filter-bar.cm-tabs::-webkit-scrollbar { display: none; }
  .sub-tab, .filter-bar.cm-tabs > * { flex: 0 0 auto !important; white-space: nowrap !important; }

  /* ---- Stat cards ------------------------------------------------------- */
  .stat-card[style*="space-between"] {
    flex-direction: column !important; align-items: stretch !important; gap: 12px !important;
  }
  .stat-card[style*="space-between"] > div { width: 100% !important; flex-wrap: wrap !important; }

  /* ---- Multi-column layouts collapse ------------------------------------ */
  .inbox-layout, .trade-card-body, .hub-grid-2col, .filter-bar-grid { grid-template-columns: 1fr !important; }
  .inbox-sidebar { position: static !important; top: auto !important; flex-direction: row !important; flex-wrap: wrap !important; }
  .roster-column { position: static !important; top: auto !important; }

  /* ---- Stats grid ------------------------------------------------------- */
  .stats-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ============================================================================
 * Compact tables on mobile — tables stay tabular (one horizontal row per
 * player/record), but only the most important columns are shown; the rest are
 * fully hidden. No "one card per player". See [[mobile-css-convention]].
 *
 * Two hiding strategies, both pure-CSS:
 *   • Roster tables already class every cell `col-<field>` on both <th> and
 *     <td>, so we hide the non-essential ones by class — no markup changes.
 *   • Every other table opts in with class `mobile-compact` on the <table>;
 *     the columns to keep are marked `m-keep` on their <th> and <td>. This is
 *     robust even for tables whose columns change at runtime (e.g. the players
 *     hub skater/goalie toggle), since the keepers are tagged per rendered row.
 * Player names collapse to "F. Lastname" via the .pname-abbr / .pname-full
 * swap (markup produced by nameCellHtml() in common.js).
 * ========================================================================== */

/* Abbreviated name + the under-name salary line are desktop-hidden. */
.pname-abbr { display: none; }
.player-sub-mobile { display: none; }

/* Mobile mirrored roster header (JS-driven, see initStickyRosterHeader). Hidden
   by default; only ever shown on mobile. Opaque so it covers the rows beneath. */
.sticky-col-header {
  display: none;
  position: fixed;
  top: 0;
  z-index: var(--z-overlay);
  overflow: hidden;
  background: var(--table-head-bg);
  border-bottom: 2px solid var(--teal);
  pointer-events: none;
}
.sticky-col-header table { margin: 0; border-collapse: collapse; }

@media (max-width: 700px) {
  /* Player name → initial + last name */
  .pname-full { display: none !important; }
  .pname-abbr { display: inline !important; }

  /* Name cell shows just the (abbreviated) name; salary is its own column now. */
  .player-sub-desktop,
  .player-sub-mobile { display: none !important; }

  /* ---- GM dashboard roster (NHL/AHL/ECHL + simulator): columns are controlled
     by the Views picker on mobile too (applyColumnVisibility), defaulting to
     Name + Pool Pts + Salary + Action. No blanket hiding here — just tighten the
     cell padding so the default set fits before horizontal scrolling kicks in. */
  .compact-table th,
  .compact-table td { padding: 10px 8px !important; }

  /* ---- Every other opted-in table: show only the m-keep columns. ---- */
  table.mobile-compact th,
  table.mobile-compact td { display: none !important; }
  table.mobile-compact th.m-keep,
  table.mobile-compact td.m-keep {
    display: table-cell !important;
    padding: 10px 8px !important;
  }
  /* Loading / empty-state rows span all columns — always keep them visible. */
  table.mobile-compact td[colspan] { display: table-cell !important; }

  /* ---- GM dashboard rosters: show every player (the page scrolls vertically,
     no internal vertical scroll). When extra Views columns are enabled the table
     grows wider than the screen and scrolls horizontally. ---- */
  .roster-table-scroll {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* Collapsed roster column → short horizontal bar (arrow + name on one line)
     instead of a tall vertical-text strip. */
  .collapsed-view {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  .collapsed-title {
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .modal,
  .modal-overlay,
  #claim-modal {
    left: 0 !important;
    right: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Full-screen modals on small phones. */
  .modal {
    padding: 0 !important;
    top: 0 !important;
    height: 100% !important;
  }
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }

  .team-info h1,
  .page-header h1 { font-size: 1.5rem !important; }
}

/* ============================================================================
 * Roster columns stack at ≤1024px. The AHL/ECHL wrappers are sticky on the
 * desktop 3-column layout; once stacked that stickiness makes the ECHL column
 * ride over the rosters above it while scrolling. Force normal flow so the page
 * scrolls top-to-bottom (NHL → AHL → ECHL). See [[mobile-css-convention]].
 * ========================================================================== */
@media (max-width: 1024px) {
  #col-wrapper-ahl,
  #col-wrapper-echl {
    position: static !important;
    top: auto !important;
  }
}

/* ============================================================================
 * Move Player sheet — render as a bottom sheet on phones/small tablets instead
 * of the centered modal. ID + !important needed to beat the shared
 * .modal / .modal-content full-screen rules above. See [[mobile-css-convention]].
 * ========================================================================== */
@media (max-width: 700px) {
  #move-sheet {
    top: 0 !important;
    height: 100% !important;
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #move-sheet .move-sheet-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 88vh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  #move-sheet .move-tier-row,
  #move-sheet .move-swap-row { min-height: 44px; }
}