/* Starkwood ONE — Mobile Native Header + Scroll Repair v2.1.125
   Applies only to custom body-level routes.
   Uses the EXISTING mobile-responsive.css shell variable instead of guessing
   the header position from sidebar/DOM geometry. */

@media (max-width: 1023px) {
  /*
   * mobile-responsive.css already owns and updates:
   *   --sw-mobile-header-height
   * with a default of 64px and the actual rendered native header height.
   *
   * These custom route roots are body-level fixed siblings of #root. Because
   * of that stacking context, a child header inside #root cannot reliably
   * paint above a body-level overlay that starts at top:0. The correct repair
   * is to start the custom overlay BELOW the native header.
   */
  #sw-team-performance-v2179,
  #sw-my-hr-v2184,
  #sw-hr-management-v2181 {
    position: fixed !important;
    top: var(--sw-mobile-header-height, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;

    box-sizing: border-box !important;
    z-index: 70 !important;
  }

  /* Keep the native mobile shell controls above custom content. */
  .sw-mobile-topbar {
    position: relative !important;
    z-index: 140 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #sw-mobile-menu-button {
    position: relative !important;
    z-index: 141 !important;
    pointer-events: auto !important;
  }

  /* Native mobile drawer/backdrop stay above the custom route roots. */
  .sw-mobile-nav-backdrop {
    z-index: 145 !important;
  }

  .sw-app-sidebar {
    z-index: 150 !important;
  }

  /* Full-width responsive content without clipping the vertical route. */
  #sw-team-performance-v2179 .sw-team-page,
  #sw-my-hr-v2184 .sw-myhr-page,
  #sw-hr-management-v2181 .sw-hr-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: max(48px, calc(24px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Wide data tables scroll sideways inside the card, not the whole screen. */
  #sw-team-performance-v2179 .sw-team-table-scroll,
  #sw-hr-management-v2181 .sw-hr-table-wrap,
  #sw-hr-management-v2181 .sw-hr-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Do not allow report/control rows to force the page wider than the phone. */
  #sw-team-performance-v2179 .sw-team-page-header,
  #sw-team-performance-v2179 .sw-team-timeline,
  #sw-my-hr-v2184 .sw-myhr-header,
  #sw-my-hr-v2184 .sw-myhr-report-controls,
  #sw-hr-management-v2181 .sw-hr-header,
  #sw-hr-management-v2181 .sw-hr-report-controls {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  #sw-team-performance-v2179 .sw-team-page,
  #sw-my-hr-v2184 .sw-myhr-page,
  #sw-hr-management-v2181 .sw-hr-page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #sw-my-hr-v2184 .sw-myhr-report-controls,
  #sw-hr-management-v2181 .sw-hr-report-controls {
    width: 100% !important;
  }

  #sw-my-hr-v2184 .sw-myhr-report-controls select,
  #sw-my-hr-v2184 .sw-myhr-report-controls button,
  #sw-hr-management-v2181 .sw-hr-report-controls select,
  #sw-hr-management-v2181 .sw-hr-report-controls button {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* v2.1.127 — Report action / modal stacking repair
   v2.1.125 placed the three custom route roots at z-index:120. That was above
   HR Management's report modal (z-index:110) and My HR's report modal
   (z-index:115). Result: Generate Report could run, but the modal rendered
   behind the page and looked like the button did nothing. */
@media (max-width: 1023px) {
  #sw-hr-management-v2181 .sw-hr-report-controls,
  #sw-hr-management-v2181 [data-report] {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  #sw-hr-management-v2181 [data-report] {
    touch-action: manipulation !important;
    min-height: 38px !important;
  }

  /* Report preview must sit above the native header while it is open, otherwise
     the fixed report toolbar (Print / Close) would be covered at the top. */
  #sw-hr-report-modal-v2181 {
    z-index: 220 !important;
  }

  #sw-hr-report-modal-v2181 .sw-hr-report-bar {
    z-index: 222 !important;
  }

  #sw-hr-report-modal-v2181 .sw-hr-report-actions {
    pointer-events: auto !important;
  }

  /* Same hierarchy safeguard for My HR's report viewer because v2.1.125 had
     also raised its route root above the existing report modal. */
  #sw-my-hr-report-v2184 {
    z-index: 220 !important;
  }

  #sw-my-hr-report-v2184 .sw-myhr-report-bar {
    z-index: 222 !important;
  }

  /* Team Performance already uses a very high report-modal z-index, so no
     modal override is necessary there. */
}