/* ========================================================================== 
   BM DASHBOARD — MOBILE LAYOUT
   Final responsive source of truth. Loaded after runtime UI modules so all
   mobile surfaces share one layout instead of independent patch fragments.
   ========================================================================== */

@supports (height: 100dvh){
  :root{ --bm-mobile-vh: 100dvh; }
}
@supports not (height: 100dvh){
  :root{ --bm-mobile-vh: 100vh; }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse){
  html{
    width:100%;
    min-width:0;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-padding-top:116px;
  }
  body{
    width:100%;
    min-width:0;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }
  button, input, select, textarea{ font-size:16px; }
  button, [role="button"], .tabBtn, .chip, .legendBtn{ touch-action:manipulation; }

  /* ----- Header: one compact control row + a full-width search row ----- */
  .topbar{
    position:relative!important;
    top:auto!important;
    min-height:0!important;
    padding-top:env(safe-area-inset-top, 0px);
    align-items:stretch!important;
  }
  .topbar .wrap{
    width:100%!important;
    max-width:none!important;
    padding:8px 12px 10px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .topbar .brand{
    order:1!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    margin:0!important;
  }
  .topbar .logoWrap{ width:40px!important; height:40px!important; }
  .topbar .spacer{
    display:block!important;
    order:2!important;
    flex:1 1 8px!important;
    min-width:0!important;
  }
  .topbar .spoDesktopOnly,
  .topbar #updatedPill,
  .topbar #headerAnimationToggle,
  .topbar #logoutBtn{ display:none!important; }
  .topbar .spoMobileOnly{ order:3!important; display:inline-flex!important; }
  .topbar #settingsBtn{ order:5!important; }
  .topbar #fix7AlertsBtn{ order:6!important; }
  .topbar .bmProfileHolder{ order:7!important; flex:0 0 auto!important; }
  .topbar .globalSearchWrap{
    order:20!important;
    flex:1 0 100%!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
  }
  .topbar .search{
    width:100%!important;
    max-width:none!important;
    height:42px!important;
    min-width:0!important;
    padding-left:42px!important;
  }
  .topbarIconBtn,
  .topbar .spoBtn,
  .topbar .bmProfileBtn,
  .topbar .fix7AlertsBtn,
  .topbar .fix10AlertsBtn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    padding:0!important;
    border-radius:13px!important;
    flex:0 0 40px!important;
  }
  .topbar .spoBtnDot{ display:none!important; }
  .topbar .spoUnreadBadge{ top:-6px!important; right:-6px!important; }
  .topbar .fix10AlertCount{ top:-6px!important; right:-6px!important; }
  .bmProfileMenu{
    position:fixed!important;
    z-index:13000!important;
    top:calc(env(safe-area-inset-top, 0px) + 58px)!important;
    right:12px!important;
    left:12px!important;
    width:auto!important;
    max-height:calc(var(--bm-mobile-vh) - 76px)!important;
    overflow:auto!important;
    border-radius:20px!important;
  }

  /* ----- Page rhythm ----- */
  body > .wrap{
    width:100%!important;
    max-width:none!important;
    padding:12px!important;
    padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))!important;
  }
  .card{
    border-radius:20px!important;
    padding:14px!important;
  }
  .title{ font-size:11.5px!important; }
  .btn, .dbBtn, .bmBtn{ min-height:42px; }

  /* ----- KPI cards ----- */
  .kpis{
    grid-template-columns:repeat(2, minmax(0,1fr))!important;
    gap:10px!important;
  }
  .kpis .card{ padding:13px!important; min-width:0!important; }
  .kpi{ min-width:0!important; gap:8px!important; }
  .kpi > div:first-child{ min-width:0!important; }
  .kpi .n, .kpiValue{ font-size:22px!important; overflow-wrap:anywhere; }
  .kpi .l, .kpiLabel{ font-size:11px!important; line-height:1.3!important; }
  .kpi .badge{ padding:5px 8px!important; font-size:10px!important; max-width:72px; white-space:normal!important; text-align:center; }

  /* ----- Filters, toggles and charts ----- */
  .chips{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:8px!important;
    padding:2px 1px 5px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chips .chip{
    width:auto!important;
    flex:0 0 auto!important;
    min-height:36px!important;
    padding:7px 12px!important;
    justify-content:flex-start!important;
    white-space:nowrap!important;
  }
  .chartsToggle,
  .incentiveToggle{
    min-height:52px!important;
    padding:12px 14px!important;
    border-radius:18px!important;
  }
  .chartsToggleRow,
  .incentiveToggleRow{ gap:8px!important; min-width:0!important; }
  .chartsToggle .title,
  .incentiveToggle .title{ min-width:0!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chartsGearBtn{ width:32px!important; height:32px!important; flex:0 0 32px!important; }
  .chartsToggleHint,
  .incentiveToggleHint{ font-size:12px!important; white-space:nowrap!important; }
  #incentiveLastUpdate{ display:none!important; }
  .chartsGrid{
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:12px!important;
  }
  .chartsGrid > .card{
    min-height:0!important;
    padding:14px!important;
  }
  .chartBox,
  .chartBox.tall{
    width:100%!important;
    height:230px!important;
    min-height:230px!important;
  }
  .legendRow{
    min-height:0!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding-bottom:4px!important;
    scrollbar-width:none;
  }
  .legendRow::-webkit-scrollbar{ display:none; }
  .legendBtn{ flex:0 0 auto!important; white-space:nowrap!important; }
  .listRow{ padding:9px 10px!important; gap:8px!important; }
  .listLabel{ flex:0 0 112px!important; max-width:112px!important; }

  /* ----- Incentive tracker ----- */
  .incentiveGrid,
  .bmInc_inner{ width:100%!important; min-width:0!important; }
  .bmInc_tabs{
    width:100%!important;
    min-height:0!important;
    padding:0 10px 9px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    overflow:visible!important;
  }
  .bmInc_tabNav{
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .bmInc_tabNav::-webkit-scrollbar{ display:none; }
  .bmInc_tab{ height:40px!important; padding:0 11px!important; flex:0 0 auto!important; }
  .bmInc_tabTools{
    width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
    gap:7px!important;
    margin:0!important;
  }
  .bmInc_dateFilter{
    height:36px!important;
    min-width:0!important;
    flex:1 1 auto!important;
    padding-left:7px!important;
  }
  .bmInc_dateFilterLabel{ display:none!important; }
  .bmInc_dateQuality{ width:18px!important; padding:0!important; justify-content:center!important; font-size:0!important; }
  .bmInc_dateQuality::before{ content:'~'; font-size:11px; font-weight:900; }
  .bmInc_dateField{ flex:1 1 0!important; min-width:0!important; }
  .bmInc_dateInput{ width:100%!important; min-width:76px!important; font-size:10.5px!important; }
  .bmInc_calendarBtn{ width:29px!important; height:29px!important; flex:0 0 29px!important; }
  .bmInc_dateReset{ flex:0 0 22px!important; }
  .bmInc_importBtn{ height:36px!important; padding:0 11px!important; }
  .bmInc_settingsBtn{ width:36px!important; height:36px!important; flex:0 0 36px!important; }
  .bmInc_tabContent{ padding:12px!important; }
  .bmInc_hotelHead,
  .bmInc_managerTop,
  .bmInc_totalCard{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }
  .bmInc_hotelList,
  .bmInc_managerGrid,
  .bmInc_byManagerGrid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .bmInc_hotelCard{
    height:auto!important;
    min-height:214px!important;
    max-height:none!important;
  }
  .bmInc_hotelCard,
  .bmInc_managerCard{ border-radius:18px!important; min-width:0!important; }
  .bmInc_hotelValueBlock{ width:100%!important; max-width:none!important; align-items:flex-start!important; text-align:left!important; }
  .bmInc_summaryStats{ width:100%!important; justify-content:flex-start!important; overflow-x:auto!important; flex-wrap:nowrap!important; padding-bottom:3px; }
  .bmInc_summaryStats > *{ flex:0 0 auto!important; }
  .bmInc_overlay{
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .bmInc_sheet{
    width:100%!important;
    max-width:none!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    margin:0!important;
    padding:16px 12px calc(18px + env(safe-area-inset-bottom, 0px))!important;
    border-radius:0!important;
    overflow-y:auto!important;
  }
  .bmInc_sheetHead{ align-items:flex-start!important; gap:10px!important; }
  .bmInc_sheetHead h3{ font-size:18px!important; }
  .bmInc_row,
  .bmInc_btnRow{ flex-wrap:wrap!important; }
  .bmInc_inputUnit{ width:100%!important; white-space:normal!important; line-height:1.4!important; }
  .bmInc_btnRow{ display:grid!important; grid-template-columns:1fr 1fr!important; }
  .bmInc_btnRow .bmInc_btn{ width:100%!important; }
  .bmInc_uploadItem{ flex-wrap:wrap!important; }
  .bmInc_uploadItem .bmInc_uploadName{ flex:1 1 180px!important; }
  .bmInc_uploadItem .bmInc_uploadDates{ width:100%!important; }
  .bmInc_calendar{
    width:min(326px,calc(100vw - 20px))!important;
    padding:10px!important;
    border-radius:20px!important;
  }
  .bmInc_calendarDay{ height:35px!important; }

  /* ----- Hotels header and action area ----- */
  .hotelHeaderBar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .hotelHeaderLeft{
    width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
    gap:9px!important;
  }
  .hotelHeaderTitleRow{ justify-content:space-between!important; gap:8px!important; }
  .hotelHeaderSearch{ width:100%!important; max-width:none!important; }
  .riSearchStatus:empty{ display:none!important; }
  .dbMainAddActions{
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0,1fr))!important;
    gap:8px!important;
  }
  .dbMainAddActions .dbBtn{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    padding:0 10px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  .dbInlineAddPanel{
    margin:10px 0!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  .dbInlineAddHead{ position:sticky; top:0; z-index:2; background:inherit; }
  .dbInlineAddGrid,
  .dbInlineAddGrid .wide{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-column:auto!important;
    min-width:0!important;
  }

  /* ----- Hotel list: cards only, sized for thumbs rather than table density ----- */
  .tableWrap{
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    margin-top:10px!important;
  }
  .tableWrap > table{ display:none!important; }
  .hotelCards{ display:block!important; width:100%!important; }
  .hotelCard{
    width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    padding:14px!important;
    border-radius:19px!important;
    box-shadow:0 8px 22px rgba(27,27,46,.08)!important;
  }
  .hotelCardTop{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    gap:12px!important;
    align-items:stretch!important;
  }
  .hotelCardLeft{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .hotelCardName{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.35!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .hotelNameRow,
  .hotelCardNameRow{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }
  .hotelCardNameEditable{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:1 1 100%!important;
  }
  .hotelCardNameEditable.dbLiveEditable{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:-6px -8px 0!important;
    padding:6px 38px 6px 8px!important;
  }
  .hotelCardNameEditable.dbLiveEditable > .dbLiveEditBtn{
    right:6px!important;
    top:17px!important;
    transform:none!important;
  }
  .hotelCardNameEditable .hotelNameLink{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    text-align:left!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .hotelStatusRow{
    width:100%!important;
    min-width:0!important;
    margin-top:8px!important;
  }
  .hotelBadges{ max-width:100%!important; gap:6px!important; margin-top:8px!important; }
  .customHotelBadge,
  .badge.metaTag,
  .countryBadge{ max-width:100%!important; }
  .hotelCardGrid{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:10px!important;
  }
  .hotelField{
    min-width:0!important;
    padding:10px!important;
    border-radius:14px!important;
  }
  .hotelFieldLabel{ margin-bottom:5px!important; }
  .hotelFieldValue{ min-width:0!important; overflow-wrap:anywhere!important; }
  .hotelCardActions{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:8px!important;
    margin-top:0!important;
  }
  .hotelCardActions .detailsBtn,
  .hotelCardActions .hotelMoreBtn{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    margin:0!important;
  }
  .hotelCardActions .hotelMapBtnAction{
    display:inline-flex!important;
    width:40px!important;
    min-width:40px!important;
    height:42px!important;
    margin:0!important;
  }
  .hotelMoreWrap{ margin-top:10px!important; }

  /* Touch devices cannot reveal hover-only editing controls. */
  .dbLiveEditBtn,
  .metaBadgePencil,
  .fix7Pencil,
  .badge.metaTag.dbLiveEditable > .metaBadgePencil.dbLiveEditBtn{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(-50%)!important;
  }
  .fix7Pencil{ transform:none!important; }

  /* ----- Recent updates feed ----- */
  .dbFeedDock{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:12px!important;
    z-index:1!important;
  }
  .dbFeedDock .dbFeed,
  .dbFeedDock .card.dbFeed{
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    padding:14px!important;
    border-radius:20px!important;
    overflow:visible!important;
  }
  .dbFeedList{ max-height:340px!important; overflow:auto!important; }
  .dbFeedItem{ padding:10px!important; border-radius:14px!important; }

  /* ----- Details drawer ----- */
  .backdrop{ z-index:10040!important; }
  .side{
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    z-index:10050!important;
  }
  .sideHeader{
    min-height:68px!important;
    padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 12px!important;
    align-items:center!important;
    position:relative!important;
    z-index:10!important;
  }
  .sideHeader .h{ min-width:0!important; }
  .sideHeader .h .name{
    display:block!important;
    max-width:100%!important;
    font-size:16px!important;
    line-height:1.25!important;
    letter-spacing:.05em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .sideHeader .h .sub{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .sideHeader .close{ flex:0 0 44px!important; width:44px!important; height:44px!important; }
  .sideBody{ height:100%!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; }
  #sideBody .tabs{
    top:0!important;
    width:100%!important;
    margin:0!important;
    padding:10px 12px!important;
    gap:7px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    box-shadow:0 5px 12px rgba(27,27,46,.06);
  }
  #sideBody .tabs::-webkit-scrollbar{ display:none; }
  #sideBody .tabs .tabBtn{
    flex:0 0 auto!important;
    min-height:38px!important;
    padding:8px 14px!important;
    font-size:12px!important;
  }
  #sideBody .pane{ padding:12px 12px calc(24px + env(safe-area-inset-bottom, 0px))!important; }
  .section{
    padding:12px!important;
    margin-bottom:10px!important;
    border-radius:16px!important;
    box-shadow:none!important;
  }
  .sectionHeader,
  .itemTop,
  .contactRow,
  .incentTop{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .sectionHeader > *,
  .itemTop > *{ min-width:0!important; }
  .itemCard{ padding:12px!important; border-radius:15px!important; }
  .kvRow,
  .markupRow{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  .markupRow{ padding:9px 10px!important; }
  .accHead{ min-height:48px!important; padding:11px 12px!important; }
  .accBody{ padding:0 12px 12px!important; }
  .fix7Editor{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 38px 38px!important;
    align-items:start!important;
    gap:6px!important;
  }
  .fix7Input{ min-width:0!important; }
  .fix7Save, .fix7Cancel{ width:38px!important; height:38px!important; }
  .bmDetailsConfirm{ width:calc(100vw - 24px)!important; max-width:460px!important; padding:18px!important; border-radius:20px!important; }
  .bmDetailsConfirmActions{ display:grid!important; grid-template-columns:1fr 1fr!important; }

  /* ----- Legacy settings modal ----- */
  .modalOverlay{
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  #authModal{ padding:16px!important; align-items:center!important; justify-content:center!important; }
  #authModal .modalCard{
    width:100%!important;
    max-width:420px!important;
    height:auto!important;
    max-height:calc(var(--bm-mobile-vh) - 32px)!important;
    border-radius:22px!important;
  }
  #settingsModal .modalCard.modalWide{
    width:100%!important;
    max-width:none!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
  }
  #settingsModal .modalHead{
    min-height:58px!important;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px!important;
  }
  #settingsModal .modalBody{
    padding:10px 12px calc(16px + env(safe-area-inset-bottom, 0px))!important;
    overflow:auto!important;
  }
  #settingsModal .settingsTabs,
  #settingsModal .usageInnerTabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:6px!important;
    padding-bottom:4px!important;
    scrollbar-width:none;
  }
  #settingsModal .settingsTabs::-webkit-scrollbar,
  #settingsModal .usageInnerTabs::-webkit-scrollbar{ display:none; }
  #settingsModal .settingsTabs .tabBtn,
  #settingsModal .usageInnerTabs .tabBtn{ flex:0 0 auto!important; white-space:nowrap!important; }
  .settingsAddBar,
  .settingsAddFields{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:8px!important;
  }
  .settingsAddBtn{ width:100%!important; }
  .settingsNativeLayout{ display:block!important; min-height:0!important; }
  .settingsNativeSide{
    display:flex!important;
    flex-direction:row!important;
    overflow-x:auto!important;
    gap:6px!important;
    padding:0 0 8px!important;
    border:0!important;
    background:transparent!important;
  }
  .settingsNativeSide > *{ flex:0 0 auto!important; }
  .settingsNativeMain{ padding:0!important; overflow:visible!important; }
  .settingsDataGrid,
  .styleGrid{ grid-template-columns:1fr!important; }
  #settingsModal .tableWrap{
    display:block!important;
    max-width:100%!important;
    overflow:auto!important;
    border:1px solid var(--line)!important;
    border-radius:16px!important;
  }
  #settingsModal .tableWrap table{ display:table!important; }

  /* ----- Native dashboard settings / admin overlay ----- */
  .dbOverlay{
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  .dbPanel{
    width:100%!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    border-radius:0!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
  }
  .dbSide{
    padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 8px!important;
    gap:8px!important;
    border:0!important;
    border-bottom:1px solid rgba(63,59,86,.08)!important;
  }
  .dbBrandBlock{ align-items:center!important; }
  .dbBrand{ font-size:16px!important; }
  .dbTabs{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:6px!important;
    scrollbar-width:none;
  }
  .dbTabs::-webkit-scrollbar{ display:none; }
  .dbTab{
    flex:0 0 auto!important;
    width:auto!important;
    height:38px!important;
    padding:0 12px!important;
    white-space:nowrap!important;
    border-radius:12px!important;
  }
  .dbMain{ max-height:none!important; min-height:0!important; }
  .dbHead{ min-height:54px!important; padding:0 12px!important; }
  .dbTitle{ font-size:17px!important; min-width:0!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dbClose{ width:40px!important; height:40px!important; flex:0 0 40px!important; }
  .dbBody{ padding:12px 12px calc(18px + env(safe-area-inset-bottom, 0px))!important; }
  .dbGrid,
  .dbGrid.two,
  .dbMetricGrid,
  .dbDetailSplit,
  .dbFormCard,
  .dbFormCard.compact,
  .dbChartQuickGrid{
    grid-template-columns:1fr!important;
  }
  .dbCard.wide,
  .dbGrid .wide{ grid-column:auto!important; }
  .dbMetricValue{ font-size:24px!important; }
  .dbCardHead,
  .dbContractPicker,
  .dbRegionRow{ align-items:flex-start!important; flex-wrap:wrap!important; }
  .dbContractPicker > div:first-child{ min-width:0!important; width:100%!important; }
  .dbActions{ width:100%!important; }
  .dbActions .dbBtn{ flex:1 1 140px!important; }
  .dbChartQuickPanel,
  .dbChartQuickPanel.clean{
    position:fixed!important;
    inset:auto 12px 12px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(var(--bm-mobile-vh) - 92px)!important;
    overflow:auto!important;
    margin:0!important;
    z-index:13100!important;
  }

  /* ----- Unified add/edit modal system ----- */
  .bmModalOverlay{
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  .bmModalCard,
  .bmModalCard.small,
  .bmModalCard.wide{
    width:100%!important;
    max-width:none!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
  }
  .bmModalHead{
    min-height:58px!important;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px!important;
  }
  .bmModalBody{
    padding:12px 12px calc(18px + env(safe-area-inset-bottom, 0px))!important;
    overflow-y:auto!important;
  }
  .bmModalFoot{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px))!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .bmFormGrid{ grid-template-columns:1fr!important; }
  .bmField.full{ grid-column:auto!important; }
  .bmRow.two,
  .bmRow.tier{ grid-template-columns:1fr!important; }
  .bmRowRemove{ width:100%!important; }
  .bmAddMenu{
    position:fixed!important;
    inset:auto 12px calc(12px + env(safe-area-inset-bottom, 0px))!important;
    width:auto!important;
    max-width:none!important;
    max-height:70vh!important;
    overflow:auto!important;
    z-index:13200!important;
  }
  .bmComboList{ max-height:42vh!important; }
  .fix7SheetOverlay{ padding:0!important; align-items:stretch!important; }
  .fix7Sheet{
    width:100%!important;
    max-width:none!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    border-radius:0!important;
    padding:calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px))!important;
  }
  .fix7SheetActions{ display:grid!important; grid-template-columns:1fr 1fr!important; }
  .fix7AlertsPanel{
    inset:calc(58px + env(safe-area-inset-top, 0px)) 10px auto!important;
    width:auto!important;
    max-height:calc(var(--bm-mobile-vh) - 72px)!important;
    border-radius:18px!important;
  }

  /* ----- Runtime forms and dialogs injected by dashboard modules ----- */
  .bmFix12Overlay,
  .bmFix13Overlay,
  .bmFix16SheetOverlay,
  .bmFix17SheetOverlay{
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .bmFix12Sheet,
  .bmFix12Sheet.small,
  .bmFix13Sheet,
  .bmFix16Sheet,
  .bmFix17Sheet{
    width:100%!important;
    max-width:none!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .bmFix12Sheet{ padding:14px 12px calc(16px + env(safe-area-inset-bottom, 0px))!important; overflow-y:auto!important; }
  .bmFix12Head,
  .bmFix13Head,
  .bmFix16Head,
  .bmFix17Head{
    flex:0 0 auto!important;
    min-height:58px!important;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px!important;
  }
  .bmFix12Head{ padding:calc(4px + env(safe-area-inset-top, 0px)) 0 12px!important; }
  .bmFix12Head h3,
  .bmFix13Head h3,
  .bmFix16Head h3,
  .bmFix17Head h3{ min-width:0!important; font-size:18px!important; line-height:1.25!important; }
  .bmFix13Body,
  .bmFix16Body,
  .bmFix17Body{
    flex:1 1 auto!important;
    min-height:0!important;
    padding:12px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .bmFix13Foot,
  .bmFix16Foot,
  .bmFix17Foot{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px))!important;
    gap:8px!important;
  }
  .bmFix12Grid,
  .bmFix12Grid.two,
  .bmFix13Grid,
  .bmFix16Grid,
  .bmFix17Grid,
  .bmFix12Row,
  .bmFix12TierRow,
  .bmFix13Row,
  .bmFix13Row.three,
  .bmFix13MediaList .bmFix13Row,
  .bmFix16Row,
  .bmFix16Row.contract,
  .bmFix17Row,
  .bmFix17Row.three{
    grid-template-columns:1fr!important;
  }
  .bmFix12Label.wide,
  .bmFix12Label.full,
  .bmFix13Full,
  .bmFix16Full,
  .bmFix17Full{ grid-column:auto!important; }
  .bmFix12Row button,
  .bmFix12TierRow button,
  .bmFix13Row button,
  .bmFix16Row button,
  .bmFix17Row button{ width:100%!important; }
  .bmFix12Actions{ display:grid!important; grid-template-columns:1fr 1fr!important; }
  .bmFix12Actions > *{ width:100%!important; }

  .bmDialogOverlay{
    position:fixed!important;
    inset:0!important;
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    z-index:13300!important;
  }
  .bmDialog{
    width:100%!important;
    max-width:none!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    overflow-y:auto!important;
  }
  .bmDialogTitle{ padding:calc(16px + env(safe-area-inset-top, 0px)) 14px 4px!important; font-size:20px!important; }
  .bmDialogSub{ padding:0 14px 12px!important; }
  .bmDialog #bmDialogBody{ padding:0 14px 14px!important; }
  .bmDialogActions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom, 0px))!important;
  }
  .bmDialogActions > *{ width:100%!important; }
  .bmContactList{ max-height:none!important; }
  .bmComposerEmojiPanel{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important;
    width:auto!important;
    max-height:38vh!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
  }

  .dbFix34ConfirmOverlay{ padding:12px!important; }
  .dbFix34Confirm{ width:100%!important; max-width:460px!important; padding:18px!important; border-radius:20px!important; }
  .dbFix34ConfirmActions{ display:grid!important; grid-template-columns:1fr!important; }
  .dbFix34ConfirmActions > *{ width:100%!important; }

  /* ----- Resort map ----- */
  .resortMapPanel{ inset:0!important; border-radius:0!important; }
  .resortMapHead{ padding-top:calc(10px + env(safe-area-inset-top, 0px))!important; }
  .resortMapLauncher{
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px))!important;
    width:48px!important;
    height:48px!important;
  }

  /* ----- SPO board ----- */
  .spoPanel{
    inset:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:var(--bm-mobile-vh)!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
  }
  .spoHead{ padding:calc(10px + env(safe-area-inset-top, 0px)) 10px 8px!important; gap:8px!important; }
  .spoHeadTop,
  .spoHeadBottom{ gap:8px!important; }
  .spoHeadActions{ width:auto!important; flex:0 0 auto!important; }
  .spoTabs{ overflow-x:auto!important; flex-wrap:nowrap!important; scrollbar-width:none; }
  .spoTabs::-webkit-scrollbar{ display:none; }
  .spoTab{ flex:0 0 auto!important; white-space:nowrap!important; }
  .spoList{ padding:10px 10px 96px!important; overflow-x:hidden!important; }
  .spoMessage{ max-width:92%!important; }
  .spoComposer{
    padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px))!important;
  }
  .spoInputWrap{ grid-template-columns:40px minmax(0,1fr) auto!important; gap:7px!important; }
  .spoTextarea{ min-width:0!important; min-height:48px!important; max-height:128px!important; }
  .spoSendBtn{ min-width:68px!important; height:48px!important; padding:0 12px!important; }
  .spoEmojiPanel{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important;
    width:auto!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
  }

  /* ----- Messages module (private chat + SPO mode) ----- */
  .bmChatWorkspace{
    width:100%!important;
    max-width:100vw!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  .bmChatSidebar,
  .bmChatMain{ min-width:0!important; width:100%!important; max-width:100%!important; }
  .bmChatSidebarTop,
  .bmChatHeader{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .bmChatHeader{
    min-height:62px!important;
    padding-top:calc(8px + env(safe-area-inset-top, 0px))!important;
    align-items:center!important;
  }
  .bmChatHeaderLeft{ min-width:0!important; flex:1 1 auto!important; }
  .bmChatHeaderRight{ flex:0 0 auto!important; width:auto!important; }
  .bmChatMembers{ min-width:0!important; }
  .bmHeaderActions{ gap:5px!important; flex-wrap:nowrap!important; }
  .bmHeaderBtn,
  .bmHeaderMenuBtn,
  #bmHeaderSearchBtn,
  .bmBackBtn{ width:38px!important; min-width:38px!important; height:38px!important; padding:0!important; }
  .bmChatMessages{
    padding:10px 8px calc(88px + env(safe-area-inset-bottom, 0px))!important;
    overflow-x:hidden!important;
  }
  .bmMessageRow{ width:100%!important; min-width:0!important; }
  .bmMessageBubble{
    max-width:calc(100vw - 56px)!important;
    min-width:0!important;
    padding:10px 11px!important;
    border-radius:17px!important;
  }
  .bmMessageHead{ gap:6px!important; }
  .bmMessageAuthor,
  .bmMessageTime{ min-width:0!important; }
  .bmMessageText,
  .bmMessageText *{ overflow-wrap:anywhere!important; word-break:break-word!important; max-width:100%!important; }
  .bmMessageMenu{ position:fixed!important; top:auto!important; right:10px!important; bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important; left:10px!important; width:auto!important; }
  .bmHoverReactions{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    grid-template-columns:repeat(6,1fr)!important;
    border-radius:18px!important;
  }
  .bmComposer{
    padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px))!important;
  }
  .bmComposerRow,
  .bmComposerRow.hasAttach{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:end!important;
  }
  .bmComposerRow.hasAttach .bmComposerAttachWrap{ grid-column:1 / -1!important; width:100%!important; }
  .bmFileBtn{ width:42px!important; height:48px!important; border-radius:14px!important; }
  .bmComposerInput{ min-width:0!important; min-height:48px!important; max-height:132px!important; }
  .bmComposerSend{ min-width:68px!important; height:48px!important; padding:0 12px!important; }
  .bmAttachTray{ flex-wrap:nowrap!important; overflow-x:auto!important; width:100%!important; }
  .bmAttachChip{ flex:0 0 auto!important; max-width:220px!important; }
  .bmModeSwitch{ max-width:100%!important; min-width:0!important; }
  .bmQuickActions{ grid-template-columns:1fr!important; }

  /* ----- Generic overflow safety ----- */
  img, video, canvas, svg{ max-width:100%; }
  pre, code, .mono{ max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
  .dbInput, .input, .bmInput, select, textarea{ max-width:100%!important; min-width:0!important; }
}

@media (max-width: 520px){
  body > .wrap{ padding:10px!important; }
  .kpis{ gap:8px!important; }
  .kpis .card{ padding:11px!important; }
  .kpi .n, .kpiValue{ font-size:20px!important; }
  .hotelCardGrid{ grid-template-columns:1fr!important; }
  .hotelField.full{ grid-column:auto!important; }
  .dbMainAddActions{ grid-template-columns:1fr 1fr!important; }
  .bmDetailsConfirmActions,
  .bmModalFoot,
  .fix7SheetActions{ grid-template-columns:1fr!important; }
  .spoEmojiPanel{ grid-template-columns:repeat(7,minmax(0,1fr))!important; }
}

@media (max-width: 380px){
  .topbar .wrap{ gap:7px!important; padding-left:9px!important; padding-right:9px!important; }
  .topbarIconBtn,
  .topbar .spoBtn,
  .topbar .bmProfileBtn,
  .topbar .fix7AlertsBtn,
  .topbar .fix10AlertsBtn{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }
  .topbar .brand,
  .topbar .logoWrap{ width:38px!important; min-width:38px!important; height:38px!important; }
  .kpi .badge{ display:none!important; }
  .spoSendBtn,
  .bmComposerSend{ min-width:58px!important; padding:0 9px!important; }
}

/* Forced mobile route must use the same single source of truth even on a wide viewport. */
html.bm-force-mobile body > .wrap{ width:100%!important; max-width:none!important; }

/* Conference/mobile polish added with the calling UI refresh. */
@media (max-width: 820px), (hover: none) and (pointer: coarse){
  .topbar{
    background:linear-gradient(180deg,#454160,#3f3b58)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 8px 24px rgba(34,31,53,.16)!important;
  }
  .topbar button svg,
  .topbar a svg,
  .topbarIconBtn svg,
  .topbar .spoBtn svg,
  .topbar .bmProfileBtn svg,
  .topbar .fix7AlertsBtn svg,
  .topbar .fix10AlertsBtn svg{
    display:block!important;
    width:19px!important;
    height:19px!important;
    opacity:1!important;
    visibility:visible!important;
    flex:0 0 19px!important;
  }
  .topbarIconBtn,
  .topbar .spoBtn,
  .topbar .bmProfileBtn,
  .topbar .fix7AlertsBtn,
  .topbar .fix10AlertsBtn{
    color:#fff!important;
    border-color:rgba(255,255,255,.17)!important;
    background:rgba(255,255,255,.075)!important;
    box-shadow:none!important;
  }
  .topbarIconBtn:active,
  .topbar .spoBtn:active,
  .topbar .bmProfileBtn:active,
  .topbar .fix7AlertsBtn:active,
  .topbar .fix10AlertsBtn:active{ background:rgba(255,255,255,.15)!important; }
  .topbar .search{
    border-color:rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 7px 20px rgba(20,18,38,.12)!important;
  }
  body > .wrap{ background:linear-gradient(180deg,#f1efe9 0,#f8f7f4 430px)!important; }
  .chartsToggle,
  .incentiveToggle,
  .hotelsTableCard{
    border:1px solid rgba(61,58,79,.1)!important;
    box-shadow:0 9px 24px rgba(33,31,51,.07)!important;
  }
  .chartsGearBtn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:1px solid rgba(67,62,92,.11)!important;
    border-radius:11px!important;
    background:#f4f2f8!important;
    color:#56506f!important;
    font-size:0!important;
    line-height:0!important;
    box-shadow:none!important;
  }
  .chartsGearBtn svg{
    display:block!important;
    width:18px!important;
    height:18px!important;
    max-width:none!important;
    stroke:currentColor!important;
    fill:none!important;
  }
  .hotelsTableCard{ padding:12px!important; }
  .hotelHeaderBar{ padding:0!important; }
  .hotelHeaderTitleRow{ min-height:32px!important; }
  .hotelHeaderSearch{
    height:42px!important;
    border-radius:14px!important;
    background:#f8f7fb!important;
    border-color:rgba(68,62,93,.13)!important;
  }
  .hotelCard{
    border:1px solid rgba(68,62,93,.09)!important;
    box-shadow:0 7px 20px rgba(35,32,54,.065)!important;
  }
  .dashboardAssistantDock{
    gap:8px!important;
    right:62px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  .dashboardAssistantLauncher,
  .resortMapLauncher{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }
}


/* Keep the mobile Messages icon geometrically centered inside its square button. */
@media (max-width: 820px), (hover: none) and (pointer: coarse){
  .topbar #spoOpenBtnMobile{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    line-height:0!important;
    overflow:visible!important;
  }
  .topbar #spoOpenBtnMobile .spoBtnIcon{
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:0!important;
    font-size:0!important;
    transform:none!important;
  }
  .topbar #spoOpenBtnMobile .spoBtnIcon svg{
    display:block!important;
    width:21px!important;
    height:21px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
  }
  .topbar #spoOpenBtnMobile .spoBtnDot,
  .topbar #spoOpenBtnMobile .spoBtnLabel{display:none!important}
}