/* DK-04MGSJ mobile layout hotfix: no server-side logic changes. */
@media (max-width:550px) {
  /* Give the brand and authenticated controls their own rows. */
  .topbar {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    height:auto !important;
    min-height:0 !important;
    gap:9px !important;
    padding:10px 12px 9px !important;
  }
  .topbar .mobile-brand {
    display:flex !important;
    align-items:center;
    gap:7px;
    max-width:calc(100% - 116px);
    min-height:27px;
    font-size:14px;
    line-height:1.25;
    white-space:nowrap;
  }
  .topbar .mobile-brand svg {display:none !important;}
  .topbar .mobile-brand::before {
    content:"";
    display:block;
    flex:0 0 26px;
    width:26px;
    height:26px;
    background:#fff url('/assets/goldfinance-icon-192.png?v=4') center/contain no-repeat;
    border-radius:7px;
  }
  .topbar .top-actions {
    width:100%;
    min-width:0;
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
  }
  /* Sample-data indicator must remain visible on phones. */
  .topbar .top-actions .preview-badge {
    display:flex !important;
    position:absolute;
    top:10px;
    right:12px;
    padding:5px 7px;
    font-size:10px;
    line-height:1.25;
    white-space:nowrap;
  }
  .topbar .top-actions .account-pill {
    flex:1 1 auto;
    min-width:0 !important;
    max-width:none !important;
    overflow:visible !important;
    white-space:normal !important;
    overflow-wrap:break-word;
    font-size:11px !important;
    line-height:1.27;
    padding:8px 9px !important;
    min-height:39px;
  }
  .topbar .top-actions .account-pill svg {flex:0 0 17px;}
  .topbar .top-actions [data-action="logout"] {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    white-space:nowrap;
    min-height:39px;
    padding:7px 9px !important;
    font-size:11px;
    letter-spacing:0;
  }
  .topbar .top-actions [data-action="tour-open"] {
    display:grid;
    place-items:center;
    flex:0 0 39px;
    width:39px;
    min-width:39px;
    min-height:39px;
    padding:7px !important;
  }
  /* Let every role-permitted destination scroll horizontally without clipping labels. */
  aside.sidebar {
    height:calc(97px + env(safe-area-inset-bottom,0px)) !important;
    min-height:calc(97px + env(safe-area-inset-bottom,0px)) !important;
    padding:7px 8px calc(19px + env(safe-area-inset-bottom,0px)) !important;
  }
  aside.sidebar .nav-list {
    display:flex;
    align-items:stretch;
    justify-content:flex-start !important;
    gap:4px;
    height:100%;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  aside.sidebar .nav-list::-webkit-scrollbar {display:none;}
  aside.sidebar .nav-item {
    flex:0 0 70px !important;
    width:70px;
    min-width:70px !important;
    max-width:70px !important;
    height:67px;
    min-height:67px !important;
    padding:5px 3px !important;
    gap:4px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    scroll-snap-align:start;
  }
  aside.sidebar .nav-item svg {width:19px;height:19px;flex-shrink:0;}
  aside.sidebar .nav-item span {
    display:-webkit-box !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    max-height:29px !important;
    overflow:hidden;
    white-space:normal !important;
    line-height:1.25 !important;
    font-size:10px !important;
    text-align:center;
    overflow-wrap:break-word;
  }
  .app {padding-bottom:calc(108px + env(safe-area-inset-bottom,0px)) !important;}
  .product {padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)) !important;}
  .guide-host {bottom:calc(97px + env(safe-area-inset-bottom,0px)) !important;}
  .toast-box {bottom:calc(107px + env(safe-area-inset-bottom,0px)) !important;}
}
@media (max-width:375px) {
  .topbar .top-actions [data-action="logout"] svg {display:none;}
  .topbar .mobile-brand {font-size:13px;}
}