/**
 * VMHS interactions — motion, focus, feedback, accessibility
 * Loaded on public portal and staff dashboard.
 */

/* ─── Skip link ─── */
.vmhs-skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 10000;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  background: var(--vmhs-brand, #b7670f);
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(183, 103, 15, 0.30);
}
.vmhs-skip-link:focus { transform: translateY(0); outline: 3px solid rgba(183,103,15,0.45); outline-offset: 2px; }

/* ─── Focus visible (keyboard users) ─── */
.vmhs-public a:focus-visible,
.vmhs-app a:focus-visible,
.vmhs-public button:focus-visible,
.vmhs-app button:focus-visible,
.vmhs-public .form-control:focus-visible,
.vmhs-app .form-control:focus-visible,
.vmhs-public .form-select:focus-visible,
.vmhs-app .form-select:focus-visible {
  outline: 2px solid var(--vmhs-brand, #b7670f);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(183, 103, 15, 0.16);
}

/* ─── Page enter (respect reduced motion) ─── */
@media (prefers-reduced-motion: no-preference) {
  .vmhs-public .main > :not(.vmhs-messages-wrap),
  .vmhs-app .pc-content > :not(.vmhs-messages-wrap) {
    animation: vmhs-page-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes vmhs-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Header scroll elevation ─── */
.vmhs-public .public-header.is-scrolled,
.vmhs-app .pc-header.vmhs-toolbar.is-scrolled {
  box-shadow: 0 1px 3px rgba(15, 28, 46, 0.07), 0 4px 16px rgba(15, 28, 46, 0.06);
}

/* ─── Action buttons — tactile feedback ─── */
.vmhs-public .app-action-btn,
.vmhs-public .app-tile,
.vmhs-app .metric-card,
.vmhs-app .btn:not(.btn-link) {
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .vmhs-public .app-action-btn:active,
  .vmhs-public .app-tile:active { transform: scale(0.985); }
  .vmhs-app .btn:active:not(:disabled) { transform: scale(0.98); }
}
.vmhs-public .app-action-btn:focus-visible,
.vmhs-public .app-tile:focus-visible {
  outline: 2px solid var(--vmhs-brand, #b7670f);
  outline-offset: 3px;
}

/* ─── Bottom nav — clearer active + safe area ─── */
.vmhs-public .app-bottom-nav a {
  transition: color 0.18s ease, background 0.18s ease;
  border-radius: 0.625rem;
  margin: 0 0.15rem;
}
.vmhs-public .app-bottom-nav a.is-active {
  background: rgba(183, 103, 15, 0.10);
  font-weight: 700;
}
.vmhs-public .app-bottom-nav a.is-active i { transform: scale(1.06); transition: transform 0.18s ease; }

/* ─── Form submit loading ─── */
.vmhs-form--submitting {
  pointer-events: none;
  opacity: 0.92;
}

.vmhs-form--submitting .vmhs-form-submit,
.vmhs-form--submitting button[type="submit"]:not(.btn-link) {
  position: relative;
  color: transparent !important;
}

.vmhs-form--submitting .vmhs-form-submit::after,
.vmhs-form--submitting button[type="submit"]:not(.btn-link)::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vmhs-spin 0.65s linear infinite;
}

.vmhs-form--submitting .btn-outline-primary::after,
.vmhs-form--submitting .btn-outline-secondary::after {
  border-color: rgba(183, 103, 15, 0.25);
  border-top-color: var(--vmhs-brand, #B7670F);
}

@keyframes vmhs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Message auto-dismiss progress ─── */
.vmhs-alert-friendly {
  position: relative;
  overflow: hidden;
}

.vmhs-alert-friendly[data-auto-dismiss] {
  padding-bottom: 1rem;
}

.vmhs-alert-friendly__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: currentColor;
  opacity: 0.35;
  animation: vmhs-alert-progress var(--vmhs-alert-duration, 6s) linear forwards;
}

@keyframes vmhs-alert-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ─── Staff search keyboard hint ─── */
.vmhs-search-kbd {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.95);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
  vertical-align: middle;
}

.vmhs-search-kbd kbd {
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  background: none;
  border: none;
  color: #334155;
}

/* ─── Scroll-to-top (public long pages) ─── */
/* Sit above the live-chat FAB so the two never share the same corner. */
.vmhs-scroll-top {
  --vmhs-scroll-top-fab-clearance: 4.15rem;
  position: fixed;
  right: 1rem;
  bottom: calc(
    var(--app-bottom-nav-h, 4.25rem) + env(safe-area-inset-bottom, 0px) + 0.75rem +
      var(--vmhs-scroll-top-fab-clearance)
  );
  z-index: 1040;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 999px;
  background: var(--vmhs-brand, #B7670F);
  color: #fff;
  box-shadow: 0 8px 24px rgba(183, 103, 15, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  cursor: pointer;
}

.vmhs-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vmhs-scroll-top:hover {
  background: var(--vmhs-primary-hover, #92400e);
}

@media (min-width: 1200px) {
  .vmhs-scroll-top {
    bottom: calc(1.5rem + var(--vmhs-scroll-top-fab-clearance));
  }
}

/* ─── Table row click affordance ─── */
.vmhs-app .table tbody tr[data-href],
.vmhs-public .table tbody tr[data-href] {
  cursor: pointer;
}

.vmhs-app .table tbody tr[data-href]:hover,
.vmhs-public .table tbody tr[data-href]:hover {
  background: rgba(183, 103, 15, 0.06);
}

/* ─── Empty state polish ─── */
.vmhs-empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: #64748b;
}

.vmhs-empty-state__icon {
  font-size: 2.25rem;
  color: #94a3b8;
  margin-bottom: 0.75rem;
  display: block;
}

.vmhs-empty-state__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

/* ─── Steps connector (landing) ─── */
@media (min-width: 768px) {
  .vmhs-public .app-steps--landing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .vmhs-public .app-steps--landing .app-step {
    position: relative;
  }
}