/*
  Lung Disease Detection — Mobile stability v3

  This file is loaded AFTER styles.css.

  Main principles:
  - Reuse the ORIGINAL landing/app navigation links.
  - Never create a second navigation bar.
  - Keep the complete header at the top of the page.
  - Compress that same header to a small sticky tab rail while scrolling.
  - Keep API tables and code inside the phone viewport.
*/

.lung-mobile-tab-dock {
  display: none !important;
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  @supports not (overflow: clip) {
    html,
    body {
      overflow-x: hidden !important;
    }
  }

  #root {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
  }

  /*
    The real landing header and the real React header are sticky.
    Only one is visible at a time because index.html already applies
    lung-route-landing / lung-route-app to the body.
  */
  body.lung-route-landing .lung-landing-header,
  body.lung-route-app .top-ribbon {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    isolation: isolate;
  }

  /*
    Full header at the top of the page.
    The existing styles.css remains responsible for its visual layout.
  */
  body:not(.lung-mobile-nav-compact).lung-route-landing .lung-landing-header,
  body:not(.lung-mobile-nav-compact).lung-route-app .top-ribbon {
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.32) !important;
  }

  /*
    Compact sticky state:
    keep the SAME original links and hide only the large brand/actions.
  */
  body.lung-mobile-nav-compact.lung-route-landing .lung-landing-header {
    min-height: 54px !important;
    height: auto !important;
    display: block !important;
    padding: 7px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
    background:
      linear-gradient(180deg, rgba(5, 8, 15, 0.99), rgba(5, 8, 15, 0.95)) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.46) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  body.lung-mobile-nav-compact.lung-route-landing .lung-landing-brand {
    display: none !important;
  }

  body.lung-mobile-nav-compact.lung-route-landing .lung-landing-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.lung-mobile-nav-compact.lung-route-landing .lung-landing-tabs a {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 0.73rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.lung-mobile-nav-compact.lung-route-app .top-ribbon {
    min-height: 54px !important;
    height: auto !important;
    display: block !important;
    padding: 7px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
    background:
      linear-gradient(180deg, rgba(5, 8, 15, 0.99), rgba(5, 8, 15, 0.95)) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.46) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  body.lung-mobile-nav-compact.lung-route-app .top-ribbon .brand,
  body.lung-mobile-nav-compact.lung-route-app .top-ribbon .github-source-btn,
  body.lung-mobile-nav-compact.lung-route-app .top-ribbon .system-status {
    display: none !important;
  }

  body.lung-mobile-nav-compact.lung-route-app .top-ribbon .header-actions {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.lung-mobile-nav-compact.lung-route-app
    .top-ribbon
    .header-actions
    > .hidden-mobile {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.lung-mobile-nav-compact.lung-route-app
    .top-ribbon
    .header-actions
    > .hidden-mobile
    a {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /*
    API and documentation overflow repair.
    The compiled stylesheet currently changes overflow-x-auto to visible on
    phones. Restore scrolling and also wrap long technical strings.
  */
  body.lung-route-app .overflow-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  body.lung-route-app main,
  body.lung-route-app main > *,
  body.lung-route-app main section,
  body.lung-route-app main article,
  body.lung-route-app main .container,
  body.lung-route-app main .grid,
  body.lung-route-app main .flex {
    min-width: 0 !important;
    max-width: 100%;
  }

  body.lung-route-app pre {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    -webkit-overflow-scrolling: touch;
  }

  body.lung-route-app pre code,
  body.lung-route-app .overflow-x-auto code,
  body.lung-route-app .overflow-x-auto .font-mono {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /*
    API tables should be real scrollable tables, not cards with hard-coded
    Model / Architecture / Stage / Role labels.
  */
  body.lung-route-integration .overflow-x-auto {
    overflow-x: auto !important;
  }

  body.lung-route-integration table.w-full {
    display: table !important;
    width: max-content !important;
    min-width: 620px !important;
    table-layout: auto !important;
  }

  body.lung-route-integration table.w-full thead {
    display: table-header-group !important;
  }

  body.lung-route-integration table.w-full tbody {
    display: table-row-group !important;
  }

  body.lung-route-integration table.w-full tr,
  body.lung-route-integration table.w-full tbody tr {
    display: table-row !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.lung-route-integration table.w-full th,
  body.lung-route-integration table.w-full td,
  body.lung-route-integration table.w-full tbody td {
    display: table-cell !important;
    width: auto !important;
    min-width: 130px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    vertical-align: top !important;
  }

  body.lung-route-integration table.w-full tbody td::before {
    content: none !important;
    display: none !important;
  }

  body.lung-route-integration code {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  section[id] {
    scroll-margin-top: 68px;
  }
}

@media (max-width: 380px) {
  /*
    Landing header:
    App, Dataset, and Training use their real text.
    Architecture and Integration keep the existing shortened Arch/API labels.
  */
  body.lung-mobile-nav-compact.lung-route-landing
    .lung-landing-tabs
    a {
    font-size: 0.69rem !important;
  }

  body.lung-mobile-nav-compact.lung-route-landing
    .lung-landing-tabs
    a:nth-child(2),
  body.lung-mobile-nav-compact.lung-route-landing
    .lung-landing-tabs
    a:nth-child(5) {
    font-size: 0 !important;
  }

  body.lung-mobile-nav-compact.lung-route-landing
    .lung-landing-tabs
    a:nth-child(2)::after,
  body.lung-mobile-nav-compact.lung-route-landing
    .lung-landing-tabs
    a:nth-child(5)::after {
    font-size: 0.69rem !important;
  }

  /*
    App/docs React header:
    Hide the original full route names and show only the existing shortened
    pseudo-labels: App, Arch, Dataset, Training, API.
  */
  body.lung-mobile-nav-compact.lung-route-app
    .top-ribbon
    .header-actions
    > .hidden-mobile
    a {
    font-size: 0 !important;
  }

  body.lung-mobile-nav-compact.lung-route-app
    .top-ribbon
    .header-actions
    > .hidden-mobile
    a::after {
    font-size: 0.69rem !important;
  }
}

@media (min-width: 701px) {
  body {
    --lung-mobile-nav-unused: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.lung-route-landing .lung-landing-header,
  body.lung-route-app .top-ribbon {
    transition: none !important;
  }
}