/*
 * Shared mobile compatibility layer.
 *
 * Each RosellaStream page keeps its original colours, backgrounds, borders,
 * spacing, typography and panel styling. These rules only prevent overflow
 * and provide a usable compact navigation menu on narrow screens.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.mobile-nav-toggle {
  display: none !important;
}

@media (max-width: 760px) {
  [data-mobile-help-position-lock="true"] {
    translate: 0 var(--mobile-help-tab-shift, 0px) !important;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .site-header,
  .site-header .container,
  .site-header .header-inner,
  .page-shell,
  main,
  section,
  article {
    min-width: 0;
  }

  .site-header .brand,
  .site-header .brand-copy,
  .site-header .brand-user {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    order: -1;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
  }

  body.page-admin .site-header .main-nav,
  body.page-user .site-header .main-nav,
  body.page-executive .site-header .main-nav,
  body.page-suppliers .site-header .header-actions {
    width: 100%;
    min-width: 0;
    flex: 1 0 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
  }

  body.page-admin .site-header .main-nav > a,
  body.page-user .site-header .main-nav > a,
  body.page-executive .site-header .main-nav > a,
  body.page-suppliers .site-header .header-actions > a {
    display: none !important;
  }

  body.page-admin .site-header .main-nav.mobile-nav-open,
  body.page-user .site-header .main-nav.mobile-nav-open,
  body.page-executive .site-header .main-nav.mobile-nav-open,
  body.page-suppliers .site-header .header-actions.mobile-nav-open {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: stretch;
  }

  body.page-admin .site-header .main-nav.mobile-nav-open > a,
  body.page-user .site-header .main-nav.mobile-nav-open > a,
  body.page-executive .site-header .main-nav.mobile-nav-open > a,
  body.page-suppliers .site-header .header-actions.mobile-nav-open > a {
    display: flex !important;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.page-admin .site-header .main-nav.mobile-nav-open,
  body.page-user .site-header .main-nav.mobile-nav-open,
  body.page-executive .site-header .main-nav.mobile-nav-open,
  body.page-suppliers .site-header .header-actions.mobile-nav-open {
    max-height: min(72vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Match the Supplier portal's existing header-link design. */
  body.page-suppliers .mobile-nav-toggle {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 9px 14px;
    background: var(--white);
    color: var(--navy);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
  }

  body.page-login .login-card,
  body.page-login .login-card form,
  body.page-login .pin-login-form,
  body.page-login .username-entry-row,
  body.page-login .pin-entry-row,
  body.page-login .pin-pad,
  body.page-login #usernameKeyboard,
  body.page-executive .executive-signature-panel,
  body.page-suppliers .table-scroll,
  body.page-suppliers .modal-card,
  body.page-rosella .content.show,
  body.page-rosella .contact-panel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.page-admin .admin-card,
  body.page-admin .admin-card .box,
  body.page-suppliers .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.page-snow .content {
    min-height: 100vh;
    min-height: 100dvh;
  }
}