/* VenueBrief Service Hub responsive hardening.
   Coordinates mobile chrome, safe areas and the approved 390/430/768/1024/1440 layouts. */

:root {
  --vb-shell-gutter: 18px;
  --vb-global-nav-base-height: 66px;
  --vb-global-nav-height: calc(var(--vb-global-nav-base-height) + env(safe-area-inset-bottom));
  --vb-step-footer-height: 70px;
  --vb-sticky-action-height: 66px;
  --vb-visual-viewport-height: 100dvh;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.vbAppShell {
  min-height: 100vh;
  min-height: 100svh;
  min-height: var(--vb-visual-viewport-height, 100dvh);
}

.vbAppStage,
.vbAppViewHost,
body.vbServiceHubShellEnabled main.wrap {
  min-width: 0;
  max-width: 100%;
}

.vbAppTopbar {
  min-height: calc(54px + env(safe-area-inset-top));
  padding-top: max(7px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left: max(12px, env(safe-area-inset-left));
}

.vbGlobalNav {
  min-height: var(--vb-global-nav-height);
  padding-right: max(8px, env(safe-area-inset-right));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  padding-left: max(8px, env(safe-area-inset-left));
}

body.vbServiceHubShellEnabled .bottomNav,
.vbTodayStickyAction {
  bottom: var(--vb-global-nav-height);
}

body.vbTodayPlanningActive .wrap {
  padding-bottom: calc(var(--vb-global-nav-height) + var(--vb-step-footer-height) + 28px);
}

body.vbTodayHubActive .wrap {
  padding-bottom: calc(var(--vb-global-nav-height) + 24px);
}

body.vbTodayHubActive.vbTodayStickyVisible .wrap {
  padding-bottom: calc(var(--vb-global-nav-height) + var(--vb-sticky-action-height) + 28px);
}

.vbTodayStickyAction {
  min-height: var(--vb-sticky-action-height);
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left: max(12px, env(safe-area-inset-left));
}

body.vbViewportKeyboardOpen .vbGlobalNav,
body.vbViewportKeyboardOpen .bottomNav,
body.vbViewportKeyboardOpen .vbTodayStickyAction {
  display: none !important;
}

body.vbViewportKeyboardOpen .wrap {
  padding-bottom: 28px !important;
}

body.vbViewportKeyboardOpen .vbLocalNavShell {
  position: relative;
  top: auto;
}

.vbShellPanel,
.vbTodayCommand,
.vbTodayPanel,
.vbTodayMore,
.screen,
.personCard,
.areaCard,
.relay,
.paper {
  max-width: 100%;
}

.vbTodayModuleCopy,
.vbTodayOutputCopy,
.vbTodayAttentionItem > span:nth-child(2),
.vbShellPanel > div {
  min-width: 0;
}

.vbTodayOutputCopy > div > span,
.vbTodayModuleState,
.vbAppCurrentVenue {
  overflow-wrap: anywhere;
}

@media (max-width: 959px) {
  body.vbServiceHubShellEnabled .bottomNav {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    transform: none;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  body.vbServiceHubShellEnabled .wrap,
  .vbShellDestination {
    padding-right: max(var(--vb-shell-gutter), env(safe-area-inset-right));
    padding-left: max(var(--vb-shell-gutter), env(safe-area-inset-left));
  }

  .vbLocalNavShell {
    top: calc(54px + env(safe-area-inset-top));
  }
}

@media (max-width: 390px) {
  :root {
    --vb-shell-gutter: 12px;
    --vb-global-nav-base-height: 64px;
    --vb-step-footer-height: 66px;
    --vb-sticky-action-height: 62px;
  }

  .vbAppTopbar {
    min-height: calc(50px + env(safe-area-inset-top));
    gap: 8px;
    padding-top: max(6px, env(safe-area-inset-top));
  }

  .vbAppMark { width: 32px; height: 32px; }
  .vbAppTopbarBrand { font-size: 17px; }
  .vbAppCurrentVenue { max-width: 38vw; padding: 6px 8px; font-size: 12px; }
  .vbGlobalNavItem { min-height: 50px; font-size: 11px; }
  .vbGlobalNavItem svg { width: 21px; height: 21px; }

  .vbLocalNavShell {
    top: calc(50px + env(safe-area-inset-top));
    margin-right: calc(-1 * var(--vb-shell-gutter));
    margin-left: calc(-1 * var(--vb-shell-gutter));
    padding-right: var(--vb-shell-gutter);
    padding-left: var(--vb-shell-gutter);
  }

  .vbLocalHubButton { min-width: 42px; padding-inline: 8px; }
  body.vbLocalNavigationEnabled .steps button { padding-inline: 9px; }

  .vbTodayContext { grid-template-columns: minmax(0, 1fr); gap: 7px; padding-inline: 2px; }
  .vbTodayContext h1 { font-size: 26px; }
  .vbTodayContext p { row-gap: 3px; }
  .vbTodaySave { justify-self: start; padding-top: 0; }

  .vbTodayCommand { padding: 16px 16px 16px 20px; }
  .vbTodayCommand h2 { font-size: 26px; }
  .vbTodayCommand > p { font-size: 14px; }
  .vbTodayPrimary { min-height: 48px; font-size: 15px; }

  .vbTodayPanel > header { align-items: flex-start; padding: 14px 15px; }
  .vbTodayPanel > header p { font-size: 13px; }
  .vbTodayTextAction { flex: 0 0 auto; }

  .vbTodayModule {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    min-height: 72px;
    padding: 11px 15px;
  }

  .vbTodayModuleIcon,
  .vbTodayOutputIcon,
  .vbTodayAttentionIcon { width: 38px; height: 38px; }
  .vbTodayModuleState { grid-column: 2; justify-self: start; max-width: none; font-size: 12px; text-align: left; }
  .vbTodayModuleCopy small { font-size: 13px; }

  .vbTodayAttentionItem,
  .vbTodayOutput { padding-right: 15px; padding-left: 15px; }
  .vbTodayOutputCopy > div { align-items: flex-start; flex-wrap: wrap; }
  .vbTodayOutputCopy > div > span { white-space: normal; }
}

@media (min-width: 391px) and (max-width: 430px) {
  :root {
    --vb-shell-gutter: 12px;
    --vb-global-nav-base-height: 65px;
    --vb-step-footer-height: 68px;
    --vb-sticky-action-height: 64px;
  }

  .vbAppCurrentVenue { max-width: 42vw; }
  .vbLocalNavShell {
    margin-right: calc(-1 * var(--vb-shell-gutter));
    margin-left: calc(-1 * var(--vb-shell-gutter));
  }
  .vbTodayContext h1 { font-size: 28px; }
  .vbTodayCommand h2 { font-size: 28px; }
  .vbTodayModule { padding-right: 16px; padding-left: 16px; }
  .vbTodayOutputCopy > div { align-items: flex-start; flex-wrap: wrap; }
}

@media (min-width: 431px) and (max-width: 768px) {
  :root { --vb-shell-gutter: 16px; }

  .vbAppCurrentVenue { max-width: 48vw; }
  .vbTodayCommand { padding: 20px 22px; }
  .vbTodayCommand h2 { font-size: clamp(29px, 5.5vw, 35px); }
  .vbTodayCommandFooter { grid-template-columns: minmax(210px, 300px) minmax(0, 1fr); gap: 14px; }
  .vbTodayModule { min-height: 74px; }

  .vbLocalNavShell {
    margin-right: calc(-1 * var(--vb-shell-gutter));
    margin-left: calc(-1 * var(--vb-shell-gutter));
    padding-right: var(--vb-shell-gutter);
    padding-left: var(--vb-shell-gutter);
  }
}

@media (min-width: 640px) and (max-width: 768px) {
  .vbTodaySide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vbTodayMore { grid-column: 1 / -1; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --vb-shell-gutter: 18px; }

  .vbTodayCommandFooter { grid-template-columns: minmax(210px, 310px) minmax(0, 1fr); }
  .vbTodayOutputCopy > div { align-items: flex-start; flex-wrap: wrap; }
}

@media (min-width: 960px) {
  :root { --vb-global-nav-height: 0px; }

  body.vbServiceHubShellEnabled .bottomNav { bottom: 0; }
  body.vbTodayPlanningActive .wrap { padding-bottom: 112px; }
  body.vbTodayHubActive .wrap,
  body.vbTodayHubActive.vbTodayStickyVisible .wrap { padding-bottom: 36px; }
}

@media (min-width: 960px) and (max-width: 1024px) {
  .vbAppShell { grid-template-columns: 184px minmax(0, 1fr); }
  .vbAppRail { padding-right: 10px; padding-left: 10px; }
  .vbAppRail .vbGlobalNavItem { padding-right: 10px; padding-left: 10px; }

  .vbTodayLayout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 315px);
    gap: 14px;
  }
  .vbTodayMain,
  .vbTodaySide { gap: 14px; }
  .vbTodayCommand { padding: 20px; }
  .vbTodayCommandFooter { grid-template-columns: 1fr; gap: 12px; }

  body.vbServiceHubShellEnabled .bottomNav {
    left: calc(50% + 92px);
    width: min(1080px, calc(100% - 204px));
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  .vbTodayLayout { grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); }
}

@media (min-width: 1440px) {
  .vbAppShell { --vb-sc-content-max: 1160px; grid-template-columns: 208px minmax(0, 1fr); }
  .vbTodayLayout { grid-template-columns: minmax(0, 1fr) minmax(340px, 380px); gap: 20px; }
  .vbTodayMain,
  .vbTodaySide { gap: 20px; }
  body.vbServiceHubShellEnabled .bottomNav {
    left: calc(50% + 104px);
    width: min(1160px, calc(100% - 236px));
  }
}

@media (max-height: 560px) and (max-width: 959px) {
  .vbAppTopbar { position: relative; }
  .vbLocalNavShell { top: 0; }
  .vbTodayStickyAction { padding-top: 6px; padding-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .vbAppShell *,
  .vbAppShell *::before,
  .vbAppShell *::after { scroll-behavior: auto !important; }
}

@media print {
  .vbTodayStickyAction { display: none !important; }
}