/* ============================================================================
   styles-mobile.css — small-screen / phone support
   Loaded last so it can override the desktop shell. Two tiers:
     ≤768px  — phones & small tablets: off-canvas nav drawer, sheet panels
     ≤480px  — narrow phones: tighter spacing
   ========================================================================== */

/* The hamburger + drawer-close affordances are hidden on desktop and only
   surface inside the mobile media query below. */
.topbar-burger { display: none; }
.nav-mobile-close { display: none; }

@media (max-width: 768px) {
  /* ── Topbar ───────────────────────────────────────────────────────────── */
  .topbar {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .topbar-burger {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: none;
    margin-left: -4px;
    border-radius: var(--t-border-radius-sm, 6px);
    color: var(--t-font-color-secondary, var(--fg-2));
  }
  .topbar-burger:hover,
  .topbar-burger:active { background: var(--t-background-tertiary, var(--bg-hover)); }
  .topbar-title {
    font-size: var(--t-font-size-md, 15px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Trim wide topbar controls so the row never overflows */
  .topbar .search { display: none !important; }

  /* ── Left nav → off-canvas drawer ─────────────────────────────────────── */
  .nav-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    width: 268px !important;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: var(--t-box-shadow-strong, 0 12px 32px -10px rgba(0, 0, 0, 0.32));
    overflow: hidden;
  }
  .nav-sidebar.mobile-open { transform: translateX(0); }

  /* Never use the icon-only collapsed layout on mobile — the drawer is full
     width. (app.jsx already forces collapsed=false on mobile; this is belt
     and suspenders so a stale class can't shrink the drawer.) */
  .nav-sidebar.collapsed { width: 268px !important; }
  .nav-sidebar.collapsed .nav-item,
  .nav-sidebar.collapsed .nav-collapse-btn,
  .nav-sidebar.collapsed .nav-line-connect,
  .nav-sidebar.collapsed .nav-user {
    justify-content: flex-start;
    padding: 0 10px;
    gap: var(--t-spacing-3, 10px);
  }

  /* Hide the desktop collapse toggle; show the drawer close (✕) in the brand */
  .nav-collapse-btn { display: none !important; }
  .nav-mobile-close {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    margin-left: auto;
    border-radius: var(--t-border-radius-sm, 6px);
    color: var(--t-font-color-tertiary, var(--fg-3));
  }
  .nav-mobile-close:hover { background: var(--t-background-tertiary, var(--bg-hover)); }

  /* Bottom-anchored account menu can clip on short screens — let it size up */
  .nav-user-menu { left: 12px !important; right: 12px; min-width: 0; }

  .nav-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.42);
    animation: navMobileFade 0.2s ease;
  }
  @keyframes navMobileFade { from { opacity: 0; } to { opacity: 1; } }

  /* ── Right panel (activity log / detail) → full-screen sheet ──────────── */
  .app-body.with-right { grid-template-columns: 1fr !important; }
  .rightbar {
    position: fixed;
    top: var(--header-h, 56px);
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    width: auto;
    border-left: none;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  }

  /* ── Dialogs → near full-screen sheets ────────────────────────────────── */
  .modal {
    width: 96vw !important;
    max-width: 96vw;
  }
  .modal.lg,
  .modal.lg.people-modal {
    width: 96vw !important;
    max-width: 96vw;
    max-height: 92vh;
  }
  .modal-b,
  .modal-body { padding: 16px !important; }
  .modal-h,
  .modal-head { padding: 14px 16px !important; padding-right: 44px !important; }

  /* Generic two-up form rows collapse to a single column on phones */
  .form-row,
  .field-row,
  .grid-2 { grid-template-columns: 1fr !important; }

  /* ── Per-view fixes ───────────────────────────────────────────────────── */
  /* Report (สรุปผล) + Clarifier Tuner stack their two side-by-side cards.
     minmax(0,1fr) (not plain 1fr) stops a track from growing to its content's
     intrinsic min-width and pushing the page wider than the viewport. */
  .report-cards,
  .clarifier-cols { grid-template-columns: minmax(0, 1fr) !important; }
  .report-cards > *,
  .clarifier-cols > * { min-width: 0; }
  /* Let the flex text input in the simulator row shrink instead of pushing
     the Send button off-screen */
  .clarifier-cols input,
  .clarifier-cols select { min-width: 0; }

  /* Inputs/areas never force the page wider than the screen */
  .app-body input,
  .app-body textarea,
  .app-body select { max-width: 100%; }

  /* Wide data tables: guarantee horizontal scroll instead of clipping.
     The rate-card wrapper is forced to overflow:hidden by redesign.css —
     re-open it here so its 860px table can be swiped. The leaderboard table
     has no wrapper of its own, so let its view container scroll. */
  .ratecard-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .leaderboard,
  .people-card,
  .oh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Wide data views keep their own width but scroll horizontally rather than
     squashing — make sure the scroll container actually allows it. */
  .app-main,
  .app-body { -webkit-overflow-scrolling: touch; }

  /* Timeline: keep the member rail usable without covering most of the phone
     viewport. The component also switches the inline grid width to 132px on
     mobile; these rules trim dense member metadata to match that rail. */
  .tl-head .corner {
    padding: 0 10px 10px;
    font-size: 10.5px;
    letter-spacing: 0.03em;
  }
  .tl-row-h {
    gap: 7px;
    padding: 6px 7px;
  }
  .tl-row-h .avatar.md {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  .tl-row-h .who .nm {
    font-size: 12px;
  }
  .member-stage-list {
    gap: 3px;
  }
  .member-stage-badge {
    gap: 3px;
    height: 18px;
    padding: 0 4px;
  }
  .member-stage-name {
    font-size: 8.5px;
    letter-spacing: 0.02em;
    max-width: 82px;
  }
  .member-stage-popover {
    max-width: min(240px, calc(100vw - 28px));
  }
  .member-project-chip {
    max-width: 100%;
    font-size: 9.5px;
    padding: 1px 3px;
  }
  .tb-picker--draw {
    min-width: 0;
    flex: 1 1 170px;
  }
  .tb-picker--draw .tb-picker-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .topbar { padding: 0 10px !important; }
  .topbar-title { font-size: 14px !important; }
  .modal-b,
  .modal-body { padding: 14px !important; }
  /* Comfortable tap targets for icon buttons */
  .topbar .iconbtn { width: 36px; height: 36px; }
}