.mbmn-mobile-shell { display: none; }

@media (max-width: 900px) {
  body.metabase-mobile-navigation-enabled { padding-top: 58px; }
  body.metabase-mobile-navigation-enabled .nav--desktop,
  body.metabase-mobile-navigation-enabled .category-nav,
  body.metabase-mobile-navigation-enabled .mobile-menu,
  body.metabase-mobile-navigation-enabled .crc-primary-nav,
  body.metabase-mobile-navigation-enabled .crc-menu-toggle { display: none !important; }
  body.mbmn-open { overflow: hidden; touch-action: none; }
  .mbmn-mobile-shell { display: block; position: relative; z-index: 999990; }
  .mbmn-topbar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #d8dbe0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    height: 58px;
    inset: 0 0 auto;
    position: fixed;
    z-index: 999992;
  }
  .admin-bar .mbmn-topbar { top: 46px; }
  .mbmn-brand { align-items: center; color: #111820; display: flex; font-size: 17px; font-weight: 750; justify-content: center; min-width: 0; text-decoration: none; }
  .mbmn-brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbmn-brand .custom-logo-link { display: flex; height: 42px; justify-content: center; }
  .mbmn-brand .custom-logo { height: 42px; max-width: min(220px, 62vw); object-fit: contain; width: auto; }
  .mbmn-icon-button { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 0; color: #111820; cursor: pointer; display: inline-flex; height: 50px; justify-content: center; margin: 0; padding: 0; width: 50px; }
  .mbmn-icon-button[hidden] { display: none; }
  .mbmn-icon-button:focus-visible, .mbmn-row:focus-visible, .mbmn-search-control input:focus-visible { outline: 3px solid #1769e0; outline-offset: -3px; }
  .mbmn-menu-icon { display: grid; gap: 5px; width: 23px; }
  .mbmn-menu-icon i { background: currentColor; display: block; height: 2px; width: 23px; }
  .mbmn-search-icon { border: 2px solid currentColor; border-radius: 50%; display: block; height: 16px; position: relative; width: 16px; }
  .mbmn-search-icon::after { background: currentColor; content: ''; height: 2px; position: absolute; right: -6px; top: 14px; transform: rotate(45deg); width: 8px; }
  .mbmn-overlay { background: rgba(8, 13, 20, .48); inset: 0; position: fixed; z-index: 999993; }
  .mbmn-overlay[hidden] { display: none; }
  .mbmn-drawer { background: #fff; bottom: 0; color: #111820; left: 0; max-width: 100%; overflow: hidden; position: fixed; top: 0; transform: translateX(-102%); transition: transform .24s ease; width: min(440px, 100vw); z-index: 999994; }
  .admin-bar .mbmn-drawer { top: 46px; }
  .mbmn-open .mbmn-drawer { transform: translateX(0); }
  .mbmn-drawer-header { align-items: center; border-bottom: 1px solid #d8dbe0; display: grid; grid-template-columns: 52px 1fr 52px; height: 62px; }
  .mbmn-panel-title { font-size: 19px; overflow: hidden; padding: 0 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .mbmn-panels { height: calc(100% - 62px); overflow-y: auto; overscroll-behavior: contain; }
  .mbmn-panel { animation: mbmn-in .18s ease; }
  .mbmn-panel ul { list-style: none; margin: 0; padding: 0; }
  .mbmn-panel li { border-bottom: 1px solid #e5e7eb; margin: 0; padding: 0; }
  .mbmn-row { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 0; color: inherit; display: flex; font: inherit; font-size: 17px; font-weight: 650; justify-content: space-between; letter-spacing: 0; margin: 0; min-height: 58px; padding: 12px 22px; text-align: left; text-decoration: none; width: 100%; }
  .mbmn-row-icon-next { font-size: 32px; font-weight: 300; line-height: 1; }
  .mbmn-search-panel { padding: 24px 20px; }
  .mbmn-search-panel label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  .mbmn-search-control { border: 1px solid #89919b; display: grid; grid-template-columns: 1fr 52px; }
  .mbmn-search-control input { border: 0; border-radius: 0; font-size: 18px; min-width: 0; padding: 12px; width: 100%; }
  .mbmn-search-control button { align-items: center; background: transparent; border: 0; border-radius: 0; color: #111820; display: flex; justify-content: center; }
  @keyframes mbmn-in { from { opacity: .65; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
  @media (prefers-reduced-motion: reduce) { .mbmn-drawer, .mbmn-panel { animation: none; transition: none; } }
}

@media (max-width: 782px) {
  .admin-bar .mbmn-topbar, .admin-bar .mbmn-drawer { top: 46px; }
}