/* ========================================================================== 
   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"],
.chip{ touch-action:manipulation; }

  /* ----- Header: one compact control row + a full-width search row ----- */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .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; }
  
  
  
  
  
  
  .listRow{ padding:9px 10px!important; gap:8px!important; }
  .listLabel{ flex:0 0 112px!important; max-width:112px!important; }

  /* ----- Incentive tracker ----- */
  .incentiveGrid{ width:100%!important; min-width:0!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; }
  
  
  
  
  
  .hotelNameRow{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }
  
  
  
  
  
  .hotelBadges{ max-width:100%!important; gap:6px!important; margin-top:8px!important; }
  .customHotelBadge,
  .badge.metaTag,
  .countryBadge{ max-width:100%!important; }
  
  
  
  
  
  
  
  

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

  /* ----- 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;
  }
  
  
  
  
  
  
  
  
  .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 ----- */
  
  
  
  
  
  
  
  
  
  .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;
  }
  

  /* ----- Runtime forms and dialogs injected by dashboard modules ----- */
  
  
  
  
  
  
  .bmDetailsMediaList .bmDetailsFormRow{
    grid-template-columns:1fr!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;
  }

  /* ----- 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; }
  
  
  
  
  
  .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,
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; }
  
  
  .dbMainAddActions{ grid-template-columns:1fr 1fr!important; }
  
  .spoEmojiPanel{ grid-template-columns:repeat(7,minmax(0,1fr))!important; }
}

@media (max-width: 380px){
  
  
  
  .kpi .badge{ display:none!important; }
  .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){
  
  
  
  
  
  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;
  }
  
  .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. */

/* Resort info toolbar on compact screens. */
@media (max-width:980px){
  .bmHotelsWorkspaceCard .hotelHeaderBar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .bmHotelsWorkspaceCard .hotelHeaderLeft{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
  }
  .bmHotelsWorkspaceCard .riSearchStatus{
    width:100%;
    height:auto;
    min-height:0;
  }
  .bmHotelsWorkspaceCard .bmHotelHeaderTools{
    width:100%;
    justify-content:flex-end;
  }
  .riMainToolbar{
    width:100%;
    flex-wrap:wrap;
    gap:7px;
  }
  .riMainSearch{
    flex:1 1 250px;
    width:auto;
    min-width:190px;
    max-width:none;
  }
  .riMainSearch.isCollapsed{
    flex:0 0 42px;
    min-width:42px;
  }
  .riFacetButton{
    min-width:96px;
    padding:0 10px;
  }
  .riFacetPopover{
    position:fixed;
    z-index:100300;
    top:auto;
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    left:12px!important;
    width:auto;
    max-height:min(72vh,560px);
  }
  .riFacetList{ max-height:min(48vh,360px); }
}
@media (max-width:560px){
  .riMainSearch:not(.isCollapsed){ flex-basis:100%; order:1; }
  .riMainSearch.isCollapsed{ order:1; }
  .riFacetControl{ order:2; }
  .riFacetButton{ height:40px; }
}