/* Honor Magic V5 mobile layout: keep the dashboard frame inside the viewport. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

#root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 767px) {
  #root > .flex.h-screen {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #root > .flex.h-screen > aside {
    display: none;
  }

  #root > .flex.h-screen > div.flex-1 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #root .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #root .overflow-x-auto table {
    width: max-content;
    min-width: 900px;
  }

  #root .overflow-x-auto th,
  #root .overflow-x-auto td {
    white-space: nowrap;
  }
}
#mobile-menu-toggle {
  display: none;
}
@media (max-width: 767px) {
  #mobile-menu-toggle {
    display: flex;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    color: #374151;
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
  }
  #mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1002;
    background: rgba(0,0,0,.35);
  }
  #mobile-menu-backdrop.open { display: block; }
  #mobile-menu-drawer {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(82vw, 300px);
    z-index: 1003;
    padding: 18px 14px;
    background: #fff;
    box-shadow: 12px 0 30px rgba(0,0,0,.2);
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  #mobile-menu-drawer.open { transform: translateX(0); }
  #mobile-menu-drawer nav { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
  #mobile-menu-drawer a { display: block; padding: 14px 12px; border-radius: 10px; color: #374151; text-decoration: none; font-size: 16px; font-weight: 600; }
  #mobile-menu-drawer a:active, #mobile-menu-drawer a:hover { background: #fff7ed; color: #d97706; }
  .mobile-menu-title { display: flex; align-items: center; justify-content: space-between; color: #d97706; font-size: 18px; }
  #mobile-menu-close { border: 0; background: transparent; font-size: 30px; color: #6b7280; }
}
@media (max-width: 767px) {
  /* The deployed stable build uses overflow-hidden on the table card. */
  #root div:has(> table) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: auto;
  }

  #root div:has(> table) > table {
    display: table;
    width: max-content !important;
    min-width: 920px !important;
    table-layout: auto;
  }

  #root div:has(> table) th,
  #root div:has(> table) td {
    white-space: nowrap;
  }
}