/**
 * VMHS responsive enhancements — public + staff
 * Load after vmhs-responsive.css
 */

:root {
  --app-vh-px: 100vh;
  --app-vh-px: 100dvh;
}

@supports (height: 100dvh) {
  :root {
    --app-vh-px: 100dvh;
  }
}

/* ─── Public shell ───────────────────────────────────────────────── */
.vmhs-public.vmhs-app-shell {
  min-height: var(--app-vh-px);
}

@media (min-width: 1200px) {
  .vmhs-public .main {
    min-height: calc(var(--app-vh-px) - var(--app-header-h, 4rem));
  }
}

/* Page head — phones (padding only; typography in polish layer) */
@media (max-width: 575.98px) {
  .vmhs-public .vmhs-public-page-head {
    padding: 0.65rem 0 0.5rem;
  }
}

/* Search bars — stack on narrow screens */
@media (max-width: 767.98px) {
  .vmhs-public .app-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .vmhs-public .app-search-bar__action .btn,
  .vmhs-public .app-search-bar__action .btn-lg {
    width: 100%;
  }

  .vmhs-public .app-search-bar--hero {
    max-width: none;
  }
}

/* Detail panels */
@media (max-width: 575.98px) {
  .vmhs-public .app-detail-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  .vmhs-public .app-detail-panel__header .btn {
    width: 100%;
  }

  .vmhs-public .app-detail-actions {
    flex-direction: column;
  }

  .vmhs-public .app-detail-actions .btn,
  .vmhs-public .app-detail-actions form {
    width: 100%;
  }

  .vmhs-public .app-detail-actions .btn {
    justify-content: center;
  }

  .vmhs-public .app-list-panel__item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Video join — fit small screens */
@media (max-width: 767.98px) {
  .vmhs-public .vmhs-video-join-frame {
    min-height: min(52vh, 420px);
    min-height: min(52dvh, 420px);
  }
}

@media (max-width: 575.98px) {
  .vmhs-public .vmhs-video-join-frame {
    min-height: min(45vh, 320px);
    min-height: min(45dvh, 320px);
    border-radius: var(--app-radius);
  }
}

/* Landing hero stats — 2 columns on phones */
@media (max-width: 575.98px) {
  .vmhs-public .app-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .vmhs-public .app-action-row {
    gap: 0.5rem;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .vmhs-public .app-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Guest hub — horizontal nav pills on tablet/phone */
@media (max-width: 991.98px) {
  .vmhs-public .guest-dash-layout > aside {
    order: -1;
  }

  .vmhs-public .guest-hub-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .vmhs-public .guest-hub-nav__link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--app-border);
    background: var(--app-bg-subtle);
  }

  .vmhs-public .guest-dash-sidebar .app-card__body {
    padding: 0.85rem 1rem;
  }
}

/* Auth cards — edge-to-edge on very small phones */
@media (max-width: 575.98px) {
  .vmhs-public .app-auth-card {
    max-width: none;
  }

  .vmhs-public .app-page--after-hero > .landing-container {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
}

/* ─── Staff shell ────────────────────────────────────────────────── */
@media (max-width: 1024.98px) {
  .vmhs-app .pc-header .pc-head-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .vmhs-app .vmhs-workspace__body > .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  .vmhs-app .card-stretch .card-body,
  body[data-vmhs-theme] .card-stretch .card-body {
    padding: 1rem 1.1rem;
  }

  .vmhs-app .vmhs-intake-rail,
  body[data-vmhs-theme] .vmhs-intake-rail {
    margin-bottom: 1rem;
  }

  .vmhs-app .vmhs-page-header__actions .btn-group,
  body[data-vmhs-theme] .vmhs-page-header__actions .btn-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .vmhs-app .vmhs-page-header__actions .btn-group .btn,
  body[data-vmhs-theme] .vmhs-page-header__actions .btn-group .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 575.98px) {
  .vmhs-app .metric-card .d-flex,
  body[data-vmhs-theme] .metric-card .d-flex {
    flex-wrap: wrap;
  }

  .vmhs-app .vmhs-status-strip,
  body[data-vmhs-theme] .vmhs-status-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    padding-bottom: 0.25rem;
  }

  .vmhs-app .vmhs-status-strip > *,
  body[data-vmhs-theme] .vmhs-status-strip > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* Table scroll affordance */
.vmhs-table-scroll-wrap {
  position: relative;
}

.vmhs-table-scroll-wrap.is-scrollable::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--vmhs-card-bg, #fff) 85%);
  opacity: 0.9;
}

.vmhs-table-scroll-wrap.is-scrollable-at-start::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1.5rem;
  pointer-events: none;
  background: linear-gradient(270deg, transparent, var(--vmhs-card-bg, #fff) 85%);
  z-index: 1;
}

@media (max-width: 767.98px) {
  .vmhs-public .app-bottom-nav a {
    min-height: 48px;
    padding-top: 0.25rem;
    padding-bottom: 0.15rem;
  }

  .vmhs-public .app-bottom-nav a span {
    font-size: 0.6rem;
  }
}
@media (max-width: 1199.98px) {
  .vmhs-public .vmhs-live-chat-fab,
  .vmhs-public .vmhs-bonga-fab {
    bottom: calc(var(--app-bottom-nav-h, 4.25rem) + env(safe-area-inset-bottom, 0px) + 0.65rem) !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vmhs-public .app-card,
  .vmhs-public .app-tile,
  .vmhs-public .app-action-btn,
  .vmhs-public .guest-dash-stat,
  .vmhs-app .metric-card,
  body[data-vmhs-theme] .metric-card {
    transition: none !important;
  }

  .vmhs-public .app-card:hover,
  .vmhs-public .app-tile:hover,
  .vmhs-app .card:hover,
  body[data-vmhs-theme] .card:hover {
    transform: none !important;
  }
}

/* Performance — defer off-screen list paint */
@media (max-width: 767.98px) {
  .vmhs-public .guest-dash-list__item,
  .vmhs-public .app-list-panel__item {
    content-visibility: auto;
    contain-intrinsic-size: auto 3.5rem;
  }
}