/*
 * TASC Ready — Mobile Sheet Pattern
 * Version 1.1 — covers all modal patterns across the platform

 * Converts standard modal overlays into native-feeling full-screen slide-up
 * sheets on mobile viewports (≤768px). Desktop is completely unaffected.
 *
 * Usage:
 *   1. Add class="mobile-sheet" to the modal's outer fixed-overlay div.
 *   2. Add class="sheet-body" to the white inner content div.
 *   3. Include mobile-sheets.js for swipe-dismiss behaviour.
 *
 * The CSS handles everything else automatically.
 */

/* ─────────────────────────────────────────────────────────────
   Mobile sheet — transform overlay + content at ≤768px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Overlay: anchor to bottom instead of centering */
  .mobile-sheet {
    align-items: flex-end !important;
    padding: 0 !important;
    /* prevent outer scroll trap */
    overflow: hidden !important;
    /* Must sit above bottom nav (z-index:9000) so buttons are reachable */
    z-index: 9050 !important;
  }

  /* Content panel: full-width, max 92% viewport height, rounded top corners */
  .mobile-sheet > .sheet-body {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    /* Use dvh where supported (handles iOS address bar), fallback to vh */
    max-height: 92vh;
    max-height: 92dvh;
    /* Override rounded-* utilities from Tailwind/CSS */
    border-radius: 1.25rem 1.25rem 0 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Slide up entrance */
    animation: tasc-sheet-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    /* Reset margin that some modals use */
    margin: 0 !important;
    /* Ensure shadow visible */
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18) !important;
  }

  /* Drag handle pill above the content */
  .mobile-sheet > .sheet-body::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
    position: sticky;
    top: 0;
    z-index: 1;
    pointer-events: none;
  }

  /* ── Slide-up entrance animation ── */
  @keyframes tasc-sheet-slide-up {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* ── Sheet closing animation ── */
  .mobile-sheet.sheet-closing > .sheet-body {
    animation: tasc-sheet-slide-down 0.22s cubic-bezier(0.32, 0.72, 0, 1) both !important;
  }

  @keyframes tasc-sheet-slide-down {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(60px);
      opacity: 0;
    }
  }

  /* ── Swipe gesture — visual feedback during drag ── */
  .mobile-sheet > .sheet-body[data-dragging="true"] {
    transition: transform 0.05s linear;
  }

  /* ── Large touch targets inside sheets ── */
  .mobile-sheet button,
  .mobile-sheet select,
  .mobile-sheet input[type="date"],
  .mobile-sheet input[type="time"],
  .mobile-sheet input[type="text"],
  .mobile-sheet textarea {
    min-height: 44px;
  }

  /* ── Bottom safe area padding (iPhone notch) ── */
  .mobile-sheet > .sheet-body {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
  }

  /* Compensate: first padding-bottom child keeps safe area */
  .mobile-sheet > .sheet-body > *:last-child {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}


/* ─────────────────────────────────────────────────────────────
   Dynamically-created modal sheets (advance-stage, reclassify, etc.)
   These use .modal-sheet-dynamic class added by JS.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-sheet-dynamic {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 9050 !important;
  }

  .modal-sheet-dynamic > div {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: tasc-sheet-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    margin: 0 !important;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18) !important;
  }

  .modal-sheet-dynamic > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
    pointer-events: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   incidents-dashboard.html — .modal-bg sheets
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-bg.mobile-sheet-bg {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 9050 !important;
  }

  .modal-bg.mobile-sheet-bg > div {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: tasc-sheet-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    margin: 0 !important;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18) !important;
  }

  .modal-bg.mobile-sheet-bg > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
    pointer-events: none;
  }

  /* Detail modal body max-height override for sheets */
  .modal-bg.mobile-sheet-bg #modal-body,
  .modal-bg.mobile-sheet-bg [id$="-body"] {
    max-height: 70vh !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   documents.html / users.html — .modal-overlay pattern
   These use inline CSS: align-items:center; justify-content:center
   Override to bottom-sheet on mobile.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 9050 !important;
  }

  /* Inner .modal or .modal-box */
  .modal-overlay > .modal,
  .modal-overlay > .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: tasc-sheet-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    margin: 0 !important;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18) !important;
  }

  .modal-overlay > .modal::before,
  .modal-overlay > .modal-box::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
    pointer-events: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   notification-groups.html — .modal-backdrop pattern
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 9050 !important;
  }

  .modal-backdrop > .modal,
  .modal-backdrop > .modal-lg {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: tasc-sheet-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    margin: 0 !important;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18) !important;
  }

  .modal-backdrop > .modal::before,
  .modal-backdrop > .modal-lg::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
    pointer-events: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   observe-dashboard.html / workforce-hours.html / signal-dashboard.html
   Standard Tailwind .mobile-sheet pattern already handled above.
   These pages just need to include mobile-sheets.css and add
   mobile-sheet + sheet-body classes to their modals.
   ───────────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════
   GLOBAL CATCH-ALL — Universal modal scroll safety net
   Version 1.2

   Ensures ALL modals across the platform have proper scroll
   behavior on mobile, regardless of which specific class they use.
   This prevents recurring "modal doesn't scroll on mobile" bugs.

   Covers:
     • .modal-bg (assure-program-editor, program-versions, etc.)
     • .sidebar-panel (CVP editor panels → bottom sheet on mobile)
     • Generic safety net for scrollable modal content
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── .modal-bg pattern — ALL modals using .modal-bg class ──
     This catches every .modal-bg modal without requiring an
     extra class like .mobile-sheet-bg. Covers assure-program-editor
     (publish, add-section, edit-section, delete-section, delete-cvp,
     new-version, leave) and assure-program-versions modals.
     ──────────────────────────────────────────────────────────── */
  .modal-bg {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 9050 !important;
  }

  .modal-bg > div {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: tasc-sheet-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    margin: 0 !important;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
  }

  .modal-bg > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
    pointer-events: none;
  }

  /* ── Sidebar panels → full-width bottom sheet ──
     Converts right-side slide-in panels (e.g. CVP editor,
     detail panels) into bottom sheets on mobile.
     420px panels overflow on 375px phones — this fixes that.
     ──────────────────────────────────────────────────────────── */
  .sidebar-panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 92dvh;
    max-height: 92vh;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    border-left: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 80px) !important;
    z-index: 9050 !important;
    /* Replace right-slide with bottom-sheet slide-up */
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
    transform: translateY(100%);
  }

  .sidebar-panel.open {
    right: auto !important;
    transform: translateY(0) !important;
  }

  .sidebar-panel::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 4px;
    pointer-events: none;
  }

  .sidebar-overlay {
    z-index: 9040 !important;
  }

  /* ── Touch targets inside sidebar panels ── */
  .sidebar-panel button,
  .sidebar-panel select,
  .sidebar-panel input[type="date"],
  .sidebar-panel input[type="time"],
  .sidebar-panel input[type="text"],
  .sidebar-panel textarea {
    min-height: 44px;
  }

  /* ── GLOBAL: Scrollable modal content safety net ──
     Ensures common modal inner containers are always scrollable.
     Targets [id$="-body"] patterns and .modal-body / .sheet-body.
     This is a last-resort rule that catches edge cases.
     ──────────────────────────────────────────────────────────── */
  .modal-bg [id$="-body"],
  .modal-overlay [id$="-body"],
  .modal-backdrop [id$="-body"],
  .mobile-sheet [id$="-body"] {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}