/*
 * The blue reference treatment belongs only to the Finance bottom-sheet.
 * Keep the rest of the signed-in application on its original gold/cream theme.
 */
@media (max-width: 899px) {
  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-nav-branch-sheet {
    max-height: min(64svh, 580px) !important;
    border: 1px solid #ddd7ce !important;
    background: #fbf7f0 !important;
    box-shadow: 0 22px 58px rgba(20, 26, 37, .24) !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-nav-branch-sheet > header {
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-nav-branch-sheet > header > div > span:first-child {
    background: #dceeff !important;
    color: #2468a7 !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-nav-branch-title strong {
    color: #10213f !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-nav-branch-title small {
    color: #8a919d !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-nav-branch-sheet > header > button {
    border: 1px solid #d9d1c6 !important;
    background: #fff !important;
    color: #142038 !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-sections {
    max-height: calc(min(64svh, 580px) - 54px) !important;
    background: transparent !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-section {
    margin: 0 0 9px !important;
    padding: 8px 9px 10px !important;
    border: 1px solid #e1dbd2 !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 5px 14px rgba(50, 42, 31, .05) !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
    border: 1px solid #e1dbd2 !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-section > header > span {
    color: #2a73b1 !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-section > header strong {
    color: #10213f !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-section > header small {
    color: #858d9a !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-grid > button {
    border-color: #dfd9d0 !important;
    background: linear-gradient(180deg, #fff 0%, #fdfbf8 100%) !important;
    color: #10213f !important;
    box-shadow: 0 2px 6px rgba(43, 37, 29, .045) !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-grid > button:active {
    border-color: #9ec5e5 !important;
    background: #eef7ff !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-grid > button > i,
  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-grid .mobile-finance-nav-arrow {
    color: #10213f !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-grid > button > span > strong {
    color: #10213f !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-finance-nav-grid > button > span > small {
    color: #8b929d !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav {
    inset: auto 12px calc(7px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1.5px solid #18243a !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 11px 28px rgba(18, 31, 49, .18) !important;
    z-index: 5100 !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav > button {
    height: 58px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #10213f !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav > button.active {
    background: transparent !important;
    color: #10213f !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav > button.active > span {
    background: transparent !important;
    color: #10213f !important;
    box-shadow: none !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav > button:nth-child(3) {
    background: #dceeff !important;
    color: #153f69 !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav > button:nth-child(3) > span {
    background: transparent !important;
    color: #153f69 !important;
    box-shadow: none !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav > button.active::before {
    display: none !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-bottom-nav svg {
    fill: none !important;
    stroke: currentColor !important;
  }
}

/* Keep the approved Finance-style bottom navigation consistent on every
   signed-in mobile page. This intentionally changes only the nav itself. */
@media (max-width: 899px) {
  body:not(.desktop-page):has(.mobile-bottom-nav) .mobile-bottom-nav {
    inset: auto 12px calc(7px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1.5px solid #18243a !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 11px 28px rgba(18, 31, 49, .18) !important;
    z-index: 5100 !important;
  }

  body:not(.desktop-page):has(.mobile-bottom-nav) .mobile-bottom-nav > button {
    height: 58px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #10213f !important;
  }

  body:not(.desktop-page):has(.mobile-bottom-nav) .mobile-bottom-nav > button.active {
    background: #dceeff !important;
    color: #153f69 !important;
  }

  body:not(.desktop-page):has(.mobile-bottom-nav) .mobile-bottom-nav > button.active > span {
    background: transparent !important;
    color: #153f69 !important;
    box-shadow: none !important;
  }

  body:not(.desktop-page):has(.mobile-bottom-nav) .mobile-bottom-nav > button.active::before {
    display: none !important;
  }

  body:not(.desktop-page):has(.mobile-bottom-nav) .mobile-bottom-nav svg {
    fill: none !important;
    stroke: currentColor !important;
  }

  /* A full-screen editor owns the viewport. Keeping the persistent navigation
     above it intercepts taps on the editor's sticky Cancel/Save footer. */
  body:not(.desktop-page):has(.mobile-modal.active) .mobile-bottom-nav {
    display: none !important;
  }

  /* Compatibility fallback for older iOS Safari versions without :has().
     The modal-open class is maintained by the app and reliably prevents the
     persistent navigation from sitting above an editor and stealing taps. */
  body:not(.desktop-page).modal-open .mobile-bottom-nav,
  body:not(.desktop-page).modal-open .mobile-nav-branch-host {
    display: none !important;
  }
}

/* Use the approved Finance card language for every grouped mobile menu. */
@media (max-width: 899px) {
  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-sheet {
    right: 4px !important;
    left: 4px !important;
    height: auto !important;
    max-height: calc(100svh - 92px) !important;
    overflow: hidden !important;
    padding: 8px 4px 9px !important;
    border: 1px solid #ddd7ce !important;
    border-radius: 18px !important;
    background: #fbf7f0 !important;
    box-shadow: 0 22px 58px rgba(20, 26, 37, .24) !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-nav-branch-sheet {
    max-height: calc(100svh - 92px) !important;
  }

  body:not(.desktop-page):has(.mobile-nav-branch-host[data-mobile-nav-branch="finance"]) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-nav-branch-sheet {
    max-height: calc(100svh - 92px) !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-sheet > header {
    min-height: 50px !important;
    height: auto !important;
    padding: 2px 3px 7px !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-sheet > header > div > span:first-child {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #dceeff !important;
    color: #2468a7 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-title strong {
    color: #10213f !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-title small {
    color: #8a919d !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-sheet > header > button {
    border: 1px solid #d9d1c6 !important;
    background: #fff !important;
    color: #142038 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-sections {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 4px 12px !important;
    background: transparent !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-finance-nav-sections {
    max-height: none !important;
    overflow: visible !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-section {
    margin: 0 0 9px !important;
    padding: 8px 6px 10px !important;
    border: 1px solid #e1dbd2 !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 5px 14px rgba(50, 42, 31, .05) !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
    border: 1px solid #e1dbd2 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-section > header > span {
    color: #2a73b1 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-section > header strong {
    color: #10213f !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-section > header small {
    color: #858d9a !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button {
    border-color: #dfd9d0 !important;
    background: linear-gradient(180deg, #fff 0%, #fdfbf8 100%) !important;
    color: #10213f !important;
    box-shadow: 0 2px 6px rgba(43, 37, 29, .045) !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button:active {
    border-color: #9ec5e5 !important;
    background: #eef7ff !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button > i,
  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid .mobile-finance-nav-arrow,
  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button > span > strong {
    color: #10213f !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button > span > small {
    color: #8b929d !important;
  }

  /* Grouped mobile menu typography: keep the two-column layout while making
     every section and action readable at normal phone viewing distance. */
  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-title strong {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-nav-branch-title small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-section > header strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-section > header small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button {
    min-height: 52px !important;
    grid-template-columns: 26px minmax(0, 1fr) 14px !important;
    gap: 5px !important;
    padding: 7px 6px !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button > span {
    gap: 3px !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button > span > strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host .mobile-finance-nav-grid > button > span > small {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  body:not(.desktop-page) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-nav-branch-title small,
  body:not(.desktop-page) .mobile-nav-branch-host[data-mobile-nav-branch="finance"] .mobile-finance-nav-grid > button > span > small {
    display: none !important;
  }
}

/* In shared-inventory mode the dashboard owns the filters and metrics.
   Remove only the duplicated inventory hero, view tabs, and alert row. */
@media (max-width: 899px) {
  body:not(.desktop-page).shared-inventory-active .page[data-panel="inventory"] > .page-title-strip,
  body:not(.desktop-page).shared-inventory-active .page[data-panel="inventory"] > .filter-card,
  body:not(.desktop-page).shared-inventory-active .page[data-panel="inventory"] > .inventory-mobile-primary-actions,
  body:not(.desktop-page).shared-inventory-active .page[data-panel="inventory"] > [data-inventory-overview] {
    display: none !important;
  }

  body:not(.desktop-page).shared-inventory-active .page[data-panel="inventory"] > .inventory-mobile-search-card {
    display: grid !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  body:not(.desktop-page).shared-inventory-active .shared-inventory-dashboard {
    margin-top: 0 !important;
  }

  body:not(.desktop-page).shared-inventory-active .shared-dashboard-advanced-actions,
  body:not(.desktop-page).shared-inventory-active .shared-vehicle-filter-chips {
    display: none !important;
  }

  /* Match the approved shared-inventory mobile reference. */
  body:not(.desktop-page).shared-inventory-active #hongyi-mobile-shell .shared-dashboard-select select {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    appearance: none !important;
    background: transparent !important;
    color: #14223b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  body:not(.desktop-page).shared-inventory-active #hongyi-mobile-shell .shared-dashboard-quick .shared-dashboard-select select {
    height: 41px !important;
    font-size: 11px !important;
  }

  body:not(.desktop-page).shared-inventory-active #hongyi-mobile-shell .shared-dashboard-quick .shared-dashboard-select {
    grid-template-columns: 19px minmax(0, 1fr) 6px !important;
    gap: 3px !important;
    padding: 0 5px !important;
  }

  body:not(.desktop-page).shared-inventory-active #hongyi-mobile-shell .shared-dashboard-quick .shared-dashboard-select svg {
    width: 18px !important;
    height: 18px !important;
  }

  body:not(.desktop-page).shared-inventory-active .shared-dashboard-quick .shared-dashboard-select > i {
    font-size: 0 !important;
  }

  body:not(.desktop-page).shared-inventory-active .shared-dashboard-quick .shared-dashboard-select > i::after {
    content: "›";
    font-size: 16px;
    line-height: 1;
  }

  body:not(.desktop-page).shared-inventory-active .shared-dashboard-stats .inventory-overview-icon svg {
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}