/*
 * MyAviatorList authenticated mobile shell
 *
 * A phone-first operations layer: compact app chrome, comfortable touch
 * targets, sheet-based tasks, and dense-but-readable owner information.
 */

@media (max-width: 1079px) {
  html {
    max-width: 100%;
    overflow-x: clip;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  :root {
    --mobile-app-top: calc(64px + env(safe-area-inset-top));
    --mobile-app-dock-height: calc(73px + env(safe-area-inset-bottom));
    --mobile-app-gutter: clamp(0.85rem, 4vw, 1.15rem);
    --mobile-app-radius: 17px;
    --mobile-app-radius-sm: 12px;
    --mobile-app-hairline: rgba(10, 21, 48, 0.105);
    --mobile-app-surface: rgba(255, 253, 248, 0.88);
    --mobile-app-shadow: 0 18px 38px -32px rgba(10, 21, 48, 0.58);
  }

  body.mobile-app-authenticated,
  body:has(.header--authenticated) {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: clip;
    padding-bottom: calc(var(--mobile-app-dock-height) + 0.6rem);
    background:
      radial-gradient(circle at 100% 0, rgba(184, 85, 30, 0.07), transparent 24rem),
      linear-gradient(180deg, #f9f4e9 0, #f5efe2 36rem);
    background-attachment: scroll;
    color: var(--color-ink);
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  body.mobile-app-authenticated.nav-open,
  body:has(.header--authenticated).nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mobile-app-authenticated .footer,
  body:has(.header--authenticated) .footer {
    display: none;
  }

  body.mobile-app-authenticated main,
  body:has(.header--authenticated) main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    scroll-margin-top: calc(var(--mobile-app-top) + 0.75rem);
  }

  body.mobile-app-authenticated :is(
    main,
    section,
    article,
    aside,
    form,
    fieldset,
    .row,
    [class*="col-"]
  ),
  body:has(.header--authenticated) :is(
    main,
    section,
    article,
    aside,
    form,
    fieldset,
    .row,
    [class*="col-"]
  ) {
    min-width: 0;
  }

  body.mobile-app-authenticated :is(img, video, canvas, iframe),
  body:has(.header--authenticated) :is(img, video, canvas, iframe) {
    max-width: 100%;
  }

  body.mobile-app-authenticated .container:not(.nav-container),
  body:has(.header--authenticated) .container:not(.nav-container) {
    max-width: 100%;
    padding-right: var(--mobile-app-gutter);
    padding-left: var(--mobile-app-gutter);
  }

  body.mobile-app-authenticated :is(input, select, textarea),
  body:has(.header--authenticated) :is(input, select, textarea) {
    font-size: 16px;
  }

  body.mobile-app-authenticated :is(
    .btn,
    .action-btn,
    .action-button,
    .co-button,
    button
  ),
  body:has(.header--authenticated) :is(
    .btn,
    .action-btn,
    .action-button,
    .co-button,
    button
  ) {
    touch-action: manipulation;
  }

  body.mobile-app-authenticated :is(.btn, .action-btn, .co-button),
  body:has(.header--authenticated) :is(.btn, .action-btn, .co-button) {
    min-height: 44px;
    border-radius: var(--mobile-app-radius-sm);
  }

  body.mobile-app-authenticated :is(.panel, .card),
  body:has(.header--authenticated) :is(.panel, .card) {
    box-shadow: var(--mobile-app-shadow);
  }

  body.mobile-app-authenticated :is(.page-header, .workspace-hero),
  body:has(.header--authenticated) :is(.page-header, .workspace-hero) {
    margin-top: 0;
  }

  body.mobile-app-authenticated .table-responsive,
  body:has(.header--authenticated) .table-responsive {
    position: relative;
    max-width: calc(100vw - (var(--mobile-app-gutter) * 2));
    border-radius: var(--mobile-app-radius-sm);
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-app-authenticated :is(dialog, .modal-content),
  body:has(.header--authenticated) :is(dialog, .modal-content) {
    border-color: var(--mobile-app-hairline);
  }

  body.mobile-app-authenticated .toast-container,
  body:has(.header--authenticated) .toast-container {
    top: calc(var(--mobile-app-top) + 0.4rem) !important;
    right: var(--mobile-app-gutter) !important;
    left: var(--mobile-app-gutter) !important;
    width: auto;
    padding: 0 !important;
  }

  body.mobile-app-authenticated :is(a, button, input, select, textarea):focus-visible,
  body:has(.header--authenticated) :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(184, 85, 30, 0.28);
    outline-offset: 2px;
  }

  body.mobile-app-authenticated [id],
  body:has(.header--authenticated) [id] {
    scroll-margin-top: calc(var(--mobile-app-top) + 0.75rem);
  }
}

@media (max-width: 767.98px) {
  body:is(
    .logbook-scan-page,
    .pilot-logbook-scan-page,
    .find-a-pilot-page,
    .find-nearby-pilots-page,
    .my-requests-page,
    .account-workspace-page,
    .admin-workspace-page,
    .my-aircraft-page,
    .coownership-page,
    .messaging-page
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body:is(
    .logbook-scan-page,
    .pilot-logbook-scan-page,
    .find-a-pilot-page,
    .find-nearby-pilots-page,
    .my-requests-page,
    .account-workspace-page,
    .admin-workspace-page,
    .my-aircraft-page,
    .coownership-page,
    .messaging-page
  ) :is(main, section, article, aside, form, fieldset, .row, [class*="col-"]) {
    min-width: 0;
  }
}

@media (max-width: 680px) {
  body.mobile-app-authenticated :is(.modal-dialog:not(.logbook-image-dialog)),
  body:has(.header--authenticated) :is(.modal-dialog:not(.logbook-image-dialog)) {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100%;
    align-items: flex-end;
    margin: 0;
  }

  body.mobile-app-authenticated :is(.modal-dialog:not(.logbook-image-dialog)) .modal-content,
  body:has(.header--authenticated) :is(.modal-dialog:not(.logbook-image-dialog)) .modal-content {
    width: 100%;
    max-height: calc(100dvh - var(--mobile-app-top));
    overflow: hidden;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -30px 70px -34px rgba(10, 21, 48, 0.7);
  }

  body.mobile-app-authenticated .modal-body,
  body:has(.header--authenticated) .modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.mobile-app-authenticated .modal-footer,
  body:has(.header--authenticated) .modal-footer {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 1079px) and (prefers-reduced-motion: reduce) {
  body.mobile-app-authenticated *,
  body:has(.header--authenticated) * {
    scroll-behavior: auto !important;
  }
}

/* Phone-native foundation. Desktop component chrome is deliberately flattened
   into readable, edge-to-edge task screens below 720px. */
@media (max-width: 720px) {
  :root {
    --mobile-app-top: calc(58px + env(safe-area-inset-top));
    --mobile-app-dock-height: calc(68px + env(safe-area-inset-bottom));
    --mobile-app-gutter: 1rem;
    --mobile-app-radius: 20px;
    --mobile-app-radius-sm: 14px;
    --mobile-app-hairline: rgba(10, 21, 48, 0.1);
    --mobile-app-surface: rgba(255, 253, 248, 0.92);
    --mobile-app-shadow: none;
    --mobile-native-bg: #f2eee5;
    --mobile-native-group: rgba(255, 253, 248, 0.92);
    --mobile-native-divider: rgba(10, 21, 48, 0.085);
    --mobile-native-label: 0.78rem;
    --mobile-native-body: 0.96rem;
  }

  body.mobile-app-authenticated,
  body:has(.header--authenticated) {
    padding-bottom: calc(var(--mobile-app-dock-height) + 0.45rem);
    background: var(--mobile-native-bg);
    background-image: none;
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    font-size: 16px;
    overscroll-behavior-y: contain;
  }

  body.mobile-app-authenticated main,
  body:has(.header--authenticated) main {
    scroll-margin-top: calc(var(--mobile-app-top) + 0.4rem);
  }

  body.mobile-app-authenticated .container:not(.nav-container),
  body:has(.header--authenticated) .container:not(.nav-container) {
    padding-right: var(--mobile-app-gutter);
    padding-left: var(--mobile-app-gutter);
  }

  body.mobile-app-authenticated :is(input, select, textarea),
  body:has(.header--authenticated) :is(input, select, textarea) {
    min-height: 48px;
    border-radius: 12px;
    font-size: 16px;
  }

  body.mobile-app-authenticated textarea,
  body:has(.header--authenticated) textarea {
    min-height: 108px;
  }

  body.mobile-app-authenticated :is(.btn, .action-btn, .action-button, .co-button),
  body:has(.header--authenticated) :is(.btn, .action-btn, .action-button, .co-button) {
    min-height: 48px;
    border-radius: 13px;
    font-size: 0.94rem;
  }

  body.mobile-app-authenticated :is(.panel, .card),
  body:has(.header--authenticated) :is(.panel, .card) {
    box-shadow: none;
  }

  body.mobile-app-authenticated :is(.page-header, .workspace-hero) h1,
  body:has(.header--authenticated) :is(.page-header, .workspace-hero) h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.9rem, 8vw, 2.35rem);
    line-height: 1.03;
    letter-spacing: -0.035em;
  }

  body.mobile-app-authenticated :is(.modal-dialog:not(.logbook-image-dialog)),
  body:has(.header--authenticated) :is(.modal-dialog:not(.logbook-image-dialog)) {
    min-height: 100%;
  }

  body.mobile-app-authenticated :is(.modal-dialog:not(.logbook-image-dialog)) .modal-content,
  body:has(.header--authenticated) :is(.modal-dialog:not(.logbook-image-dialog)) .modal-content {
    max-height: calc(100dvh - env(safe-area-inset-top));
    border-radius: 24px 24px 0 0;
  }

  body.mobile-app-authenticated .modal-header,
  body:has(.header--authenticated) .modal-header {
    min-height: 62px;
    padding: 1rem;
  }

  body.mobile-app-authenticated .modal-body,
  body:has(.header--authenticated) .modal-body {
    padding: 1rem;
  }

  body.mobile-app-authenticated .modal-footer,
  body:has(.header--authenticated) .modal-footer {
    gap: 0.55rem;
    padding: 0.75rem 1rem max(0.8rem, env(safe-area-inset-bottom));
  }
}