/* Makes OHIF's header usable on a phone in portrait.
 *
 * REVIEW ON REBASE — see the matching section in SALUDAI.md. This file reaches
 * into upstream layout, which is the one thing the fork policy asks us not to
 * do, so it is deliberately small and every selector is explained.
 *
 * The problem is structural, not cosmetic. platform/ui-next/src/components/
 * Header/Header.tsx stacks four absolutely-positioned layers inside one 48px
 * row:
 *
 *   1. the logo and back arrow   absolute left-0
 *   2. Secondary                 absolute left-[250px]   <- hardcoded
 *   3. the toolbar               absolute left-1/2, centred
 *   4. UndoRedo + patient + gear absolute right-0
 *
 * Because all four are absolute they cannot compress, wrap or push each other:
 * at ~390px the hardcoded 250px offset puts Secondary near the right edge, the
 * centred toolbar lands on top of the logo, and the right-hand block overlaps
 * both. Nothing in the whiteLabeling config can fix that — the logo is only
 * one of the four layers.
 *
 * The fix here takes the layers out of the absolute layout below a breakpoint
 * and lets flexbox do what it was going to do anyway. Upstream's own comment on
 * that component ("Todo: we should move this component to composition") says
 * this is known to be the wrong shape, so this file should become unnecessary.
 */

@media (max-width: 640px) {
  /* The header row, identified by the back-to-worklist hook rather than by its
   * utility classes: data-cy attributes are test selectors and survive
   * restyling, whereas `h-[48px]` is one Tailwind edit away from moving. */
  div.relative:has(> div > [data-cy='return-to-work-list']) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: auto;
    min-height: 48px;
  }

  /* Every layer becomes part of the flow. Clearing the translate matters as
   * much as the position: layers 3 and 4 centre themselves with
   * -translate-x-1/2 and -translate-y-1/2, which would drag them back out of
   * place even once they are static. */
  div.relative:has(> div > [data-cy='return-to-work-list']) > div {
    position: static;
    transform: none;
    inset: auto;
  }

  /* The toolbar takes the leftover width and scrolls instead of overflowing.
   * Horizontal scroll is the right trade here: a doctor reading an MR needs
   * every tool, so hiding some behind a menu would cost more than a swipe. */
  div.relative:has(> div > [data-cy='return-to-work-list']) > div:nth-child(3) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  div.relative:has(> div > [data-cy='return-to-work-list'])
    > div:nth-child(3)::-webkit-scrollbar {
    display: none;
  }

  /* The right-hand block keeps its size: the gear menu is the only way to reach
   * settings, and the patient name is what tells a doctor whose study this is. */
  div.relative:has(> div > [data-cy='return-to-work-list']) > div:nth-child(4) {
    flex: 0 0 auto;
  }

  /* Our own logo, hidden through a class we control rather than by position —
   * this is the one selector in the file that is not upstream's. It buys the
   * toolbar most of the width back, and the portal already shows the SaludAI
   * brand in the chrome around this iframe.
   *
   * The back arrow beside it stays: it is a sibling inside the same layer and
   * the only in-viewer way back. */
  .saludai-viewer-logo {
    display: none;
  }
}