/* ═══════════════════════════════════════════════════════════════════════════
   Mobile sheet - Phase 1b
   ----------------------------------------------------------------------------
   Re-skins the existing #detail-panel as a slide-up bottom sheet ONLY on
   ≤840px (phone + tablet portrait). Desktop and tablet landscape see the
   existing right-side panel, untouched.

   ADDITIVE-ONLY: every selector here is inside @media (max-width: 840px)
   so desktop/tablet-landscape layout is provably not affected.

   The same DOM element (#detail-panel) becomes:
     - a 380px right-side slide-in panel  (desktop, today's behavior)
     - a full-screen bottom sheet         (≤840px, this stylesheet)

   The sheet:
     - slides up from the bottom with a drag handle
     - sits between the slim top bar and the bottom tab bar
     - has a sticky bottom action area for context-specific buttons
       (Approve / Reject / Return for HC; Save / Cancel for edits)
     - lifts above the soft keyboard via --keyboard-height
     - swipe-down dismisses (handled in mobile_sheet.js)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 840px) {

  /* ── Sheet container - applies to position detail AND HC approval detail ── */
  #detail-panel,
  #hc-detail.mobile-sheet-active {
    /* Reset the desktop side-panel / master-detail positioning entirely. */
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 56px - var(--safe-top, 0px));
    max-height: calc(100dvh - 56px - var(--safe-top, 0px));
    /* Sit ABOVE the bottom tab bar (which is z-index 100). */
    z-index: 150 !important;
    /* Slide-up animation. */
    transform: translateY(0);
    transition: transform var(--sheet-anim-duration, 220ms) var(--sheet-anim-ease, ease);
    /* Mobile-friendly visual treatment. */
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F0 100%);
    color: #111827;
    border: 0 !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Lift above the soft keyboard so action bar stays visible. */
    padding-bottom: var(--keyboard-height, 0px);
  }
  /* Hidden state - slide off the bottom and out of sight. */
  #detail-panel.hidden,
  #hc-detail.mobile-sheet-active.mobile-sheet-hidden {
    transform: translateY(100%) !important;
    pointer-events: none;
    display: block !important;
  }
  /* When NOT showing a request, hide the HC detail entirely on mobile so
     the inbox owns the full viewport. */
  #hc-detail:not(.mobile-sheet-active) {
    display: none !important;
  }

  /* ── Drag handle at the top of the sheet ─────────────────────────── */
  /* Explicit position reset is critical: orgforge.css line 982 sets
       #detail-panel::before { position: fixed; inset: 0; background: ... }
     for an old ≤920px backdrop dimmer. Without resetting position+inset
     here, our drag handle inherits those properties and renders as a
     full-screen overlay instead of a 36×4px pill. */
  #detail-panel::before,
  #hc-detail.mobile-sheet-active::before {
    content: '';
    display: block;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.18);
    margin: 8px auto 4px;
    cursor: grab;
    pointer-events: none;
  }
  /* Belt-and-suspenders: also kill the orgforge.css ≤920px backdrop overlay
     when our mobile sheet is active. Otherwise the dimmer stacks awkwardly
     on top of the bottom-sheet content. */
  #detail-panel.hidden::before,
  #hc-detail.mobile-sheet-hidden::before {
    display: none !important;
  }
  #detail-panel.dragging,
  #hc-detail.dragging {
    transition: none;
    will-change: transform;
  }

  /* ── HC view: master-detail stacking on mobile ────────────────────
     The existing orgforge.css ≤920px breakpoint already collapses
     #hc-view → flex-direction: column and #hc-list → full-width. No
     additional layout overrides needed here; that breakpoint covers our
     ≤840px zone too. (Phase 1b's earlier dead-code rules targeting
     non-existent .hc-v2-grid / .hc-v2-master-detail / .hc-v2-list
     classes have been removed in Phase 2c cleanup.) */

  /* ── HC inbox cards (Phase 2c) - tap-friendly card styling ─────────
     Override the existing .hc-v2-item desktop styles ONLY at ≤840px.
     Bigger tap targets, multi-line title wrap, larger pills. ─────── */
  #hc-list {
    -webkit-overflow-scrolling: touch;
  }
  #hc-list .hc-v2-item {
    min-height: 76px;
    border-bottom: 1px solid #E5E7EB;
    -webkit-tap-highlight-color: transparent;
  }
  #hc-list .hc-v2-item:active {
    background: #FFFBEB;
  }
  /* Wider priority rail so urgency is unmistakable on a phone */
  #hc-list .hc-v2-item-rail {
    flex: 0 0 6px;
  }
  #hc-list .hc-v2-item-body {
    padding: 12px 14px 12px 14px;
    gap: 6px;
  }
  #hc-list .hc-v2-item-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    /* Allow the title to wrap to two lines on phone - full context is
       more important than density. */
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #hc-list .hc-v2-item-row2 {
    font-size: 12px;
    color: #4B5563;
    flex-wrap: wrap;
  }
  #hc-list .hc-v2-item-meta {
    /* Allow wrap on row 2 so requester name doesn't truncate to nothing
       on a 360px-wide phone. */
    white-space: normal;
    line-height: 1.4;
  }
  #hc-list .hc-v2-item-budget {
    font-size: 13px;
  }
  /* Type / status / age chips bigger so they're scannable + thumb-tappable. */
  #hc-list .hc-v2-type-chip,
  #hc-list .hc-v2-status-pill,
  #hc-list .hc-v2-age-pill {
    font-size: 10.5px;
    padding: 3px 9px;
    min-height: 22px;
    line-height: 16px;
  }
  /* KPI strip → horizontal scroll-snap on tiny phones (4 KPIs don't
     fit at 360px). Each KPI gets ~38vw so two-and-a-bit fit at once. */
  #hc-list .hc-v2-kpis {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  #hc-list .hc-v2-kpi {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-width: 38vw;
  }

  /* ── Sticky bottom action bar (slot for context-specific buttons) ── */
  /* Created at runtime by mobile_sheet.js as <div id="mobile-sheet-actions">
     and inserted into #detail-panel. Sticks to the bottom of the sheet,
     above the soft keyboard. */
  #mobile-sheet-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px 14px;
    padding-bottom: calc(12px + var(--safe-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  }
  /* The action bar's button row */
  .ms-action-row {
    display: flex;
    gap: 8px;
  }
  .ms-action-row .ms-btn {
    flex: 1 1 0;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s ease, opacity 0.12s ease;
  }
  .ms-action-row .ms-btn:active { transform: scale(0.97); }
  .ms-action-row .ms-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .ms-btn-approve {
    background: #2E7D32;
    color: #FFFFFF;
  }
  .ms-btn-return {
    background: #FFFFFF;
    color: #B45309;
    border: 1.5px solid #FED7AA;
  }
  .ms-btn-reject {
    background: #FFFFFF;
    color: #991B1B;
    border: 1.5px solid #FCA5A5;
  }

  /* Comment field above the action row */
  .ms-comment-field {
    width: 100%;
    min-height: 44px;
    border: 1.5px solid var(--smoke, #E5E7EB);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: #111827;
    background: #FAFAFA;
    resize: vertical;
    box-sizing: border-box;
  }
  .ms-comment-field::placeholder {
    color: var(--mist, #9CA3AF);
  }
  .ms-comment-field:focus {
    outline: 2px solid var(--orange-bright, #FF5A00);
    outline-offset: -2px;
    background: #FFFFFF;
  }

  /* Action-row label that says what stage the user is acting on */
  .ms-stage-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate, #6B7280);
    margin: 0;
    padding-left: 2px;
  }

  /* ── Backdrop behind the sheet ───────────────────────────────────── */
  /* The bottom-tab nav stays accessible in the bottom 56px so user can
     dismiss the sheet by tapping a tab. We don't darken the entire
     screen - the sheet itself has full opacity and slides up over content. */

  /* ── Body lock when sheet is open ─────────────────────────────────── */
  body[data-sheet-open="true"] {
    overflow: hidden;
  }
}