/* VenueBrief shift-local navigation and deep-link focus layer.
   Separates Service Hub from Shift, Team, Coverage and Review without changing the core flow. */

.vbLocalNavShell {
  position: relative;
  z-index: 32;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin: 10px 0 12px;
}

body.vbTodayHubActive .vbLocalNavShell { display: none !important; }

.vbLocalHubButton,
body.vbLocalNavigationEnabled .steps button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--vb-sc-color-line, #d7dce1);
  border-radius: var(--vb-sc-radius-control, 8px);
  background: var(--vb-sc-color-surface, #fff);
  color: var(--vb-sc-color-muted, #667085);
  font: 650 13px/1.2 var(--vb-sc-font-sans, "IBM Plex Sans", sans-serif);
  white-space: nowrap;
}

.vbLocalHubButton {
  color: var(--vb-sc-color-brand, #70293b);
  font-weight: 700;
}

.vbLocalHubButton:hover,
body.vbLocalNavigationEnabled .steps button:hover {
  border-color: #b8a5ab;
  color: var(--vb-sc-color-ink, #18232d);
}

.vbLocalHubButton:focus-visible,
body.vbLocalNavigationEnabled .steps button:focus-visible {
  outline: 3px solid rgb(40 95 122 / 30%);
  outline-offset: 2px;
}

body.vbLocalNavigationEnabled .steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  margin: 0;
}

body.vbLocalNavigationEnabled .steps button {
  border-color: transparent;
  background: transparent;
}

body.vbLocalNavigationEnabled .steps button.on,
body.vbLocalNavigationEnabled .steps button[aria-current="step"] {
  border-color: var(--vb-sc-color-brand, #70293b);
  background: #f8eef1;
  color: var(--vb-sc-color-brand, #70293b);
}

body.vbLocalNavigationEnabled .steps button.done {
  border-color: transparent;
  background: transparent;
  color: var(--vb-sc-color-muted, #667085);
}

.vbLocalStepDot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b8b6b0;
}

body.vbLocalNavigationEnabled .steps button[data-vb-module-state="complete"] .vbLocalStepDot,
body.vbLocalNavigationEnabled .steps button.done .vbLocalStepDot {
  background: var(--vb-sc-color-ready, #216b49);
}

body.vbLocalNavigationEnabled .steps button[data-vb-module-state="attention"] .vbLocalStepDot {
  background: var(--vb-sc-color-check, #946000);
}

body.vbLocalNavigationEnabled .steps button[data-vb-module-state="not-started"] .vbLocalStepDot,
body.vbLocalNavigationEnabled .steps button[data-vb-module-state="waiting"] .vbLocalStepDot {
  background: #b8b6b0;
}

body.vbLocalNavigationEnabled .steps button[aria-current="step"] .vbLocalStepDot {
  box-shadow: 0 0 0 3px rgb(112 41 59 / 14%);
}

.vbDeepLinkTarget {
  position: relative;
  scroll-margin-top: 128px !important;
  animation: vbDeepLinkPulse 2.4s ease-out;
}

.vbDeepLinkNotice {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid #b8d8c6;
  border-radius: var(--vb-sc-radius-control, 8px);
  background: #f2faf5;
  color: var(--vb-sc-color-ready, #216b49);
  font-size: 13px;
  font-weight: 650;
}

@keyframes vbDeepLinkPulse {
  0%, 38% {
    border-color: var(--vb-sc-color-brand, #70293b);
    box-shadow: 0 0 0 4px rgb(112 41 59 / 18%);
  }
  100% {
    box-shadow: none;
  }
}

@media (max-width: 700px) {
  .vbLocalNavShell {
    position: sticky;
    top: 54px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
    margin: 6px -12px 10px;
    padding: 6px 12px;
    border-top: 1px solid var(--vb-sc-color-line, #d7dce1);
    border-bottom: 1px solid var(--vb-sc-color-line, #d7dce1);
    background: rgb(248 247 243 / 97%);
  }

  .vbLocalHubButton {
    min-height: 42px;
    padding-inline: 10px;
  }

  .vbLocalHubButton span:last-child { display: none; }

  body.vbLocalNavigationEnabled .steps {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  }

  body.vbLocalNavigationEnabled .steps::-webkit-scrollbar { display: none; }

  body.vbLocalNavigationEnabled .steps button {
    min-width: max-content;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 12px;
  }

  .vbDeepLinkTarget { scroll-margin-top: 118px !important; }
}

@media (min-width: 960px) {
  .vbLocalNavShell {
    position: sticky;
    top: 0;
    padding: 8px 0;
    background: var(--vb-sc-color-canvas, #f3f1ec);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vbDeepLinkTarget { animation: none; }
}

@media print {
  .vbLocalNavShell,
  .vbDeepLinkNotice { display: none !important; }
}