/* Tremac Operations Manager — iPhone / installed-app layout refinements. */

html,
body {
  max-width: 100%;
  overscroll-behavior-y: contain;
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  .main,
  .view,
  .modal-card {
    min-width: 0;
    max-width: 100%;
  }

  .table-wrap,
  .scroll-x,
  .table-scroll,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 16px prevents iOS Safari from zooming when a form field receives focus. */
  input,
  select,
  textarea,
  .search {
    font-size: 16px;
    min-height: 46px;
  }

  .button,
  .icon-button,
  .chip,
  .tab,
  nav a,
  nav button {
    min-height: 44px;
  }

  .button {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  /* Keep the action buttons usable without crushing the page title into "O…".
     Row 1 is navigation + account actions; row 2 owns the full page title. */
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "menu actions"
      "copy copy"
      "search search";
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    padding: 12px 14px;
  }

  #mobileMenuButton {
    grid-area: menu;
    align-self: center;
  }

  .topbar-copy {
    grid-area: copy;
    min-width: 0;
    width: 100%;
  }

  .topbar-copy h1 {
    margin: 0;
    overflow: hidden;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-copy p {
    display: none;
  }

  .signed-in {
    grid-area: actions;
    display: flex;
    min-width: 0;
    width: auto;
    margin-left: 0 !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .signed-in .button {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.15;
  }

  .portal-notify-label {
    font-size: 12px;
  }

  .role-dash-top-search {
    grid-area: search;
    width: 100%;
    max-width: none;
    margin: 0 !important;
  }
}

@media (max-width: 930px) {
  @supports (padding: max(0px)) {
    .topbar {
      padding-top: max(14px, env(safe-area-inset-top));
    }

    .view {
      padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
    }

    .sidebar {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .session-boot-screen,
    .login-screen {
      padding-top: max(20px, env(safe-area-inset-top));
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .tremac-sw-update-banner {
      bottom: max(18px, calc(18px + env(safe-area-inset-bottom)));
    }
  }
}

@media (max-width: 930px) and (orientation: landscape) {
  @supports (padding: max(0px)) {
    .topbar,
    .view {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }
}

.session-boot-card {
  text-align: center;
}

.session-boot-card .button {
  display: inline-block;
}