/* Application shell: side navigation, top bar, user menu, content area, signed-out layout. */

:root { --topbar-h: 3.5rem; --sidenav-w: 15.5rem; }

.hs-brand { display: inline-flex; align-items: baseline; gap: 0.2em; font-size: 1.125rem; font-weight: var(--weight-semibold); letter-spacing: 0.02em; color: var(--text); text-decoration: none; }
.hs-brand span { color: var(--primary); }
.hs-brand:hover { color: var(--text); }
.hs-brand--lg { font-size: 1.5rem; }

/* ---------- Side navigation ---------- */
.hs-sidenav {
  position: fixed; z-index: calc(var(--z-modal) - 10); inset: 0 auto 0 0; width: min(var(--sidenav-w), 86vw);
  display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border);
  padding-left: env(safe-area-inset-left, 0px);
  transform: translateX(-100%); visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.hs-sidenav__brand { display: flex; align-items: center; flex: none; height: var(--topbar-h); padding: 0 var(--space-5); border-bottom: 1px solid var(--border); }
.hs-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3) var(--space-3) var(--space-6); }
.hs-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-nav__group { margin-top: var(--space-4); }
.hs-nav__heading { padding: var(--space-1) var(--space-3) var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); }
.hs-nav__link {
  display: flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-3);
  font-size: var(--text-table); color: var(--text); text-decoration: none; border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hs-nav__link:hover { background: var(--surface-muted); color: var(--text); }
.hs-nav__link:active { background: var(--border); }
.hs-nav__link[aria-current="page"] { background: var(--primary-soft); color: var(--primary-active); font-weight: var(--weight-medium); box-shadow: inset 3px 0 0 var(--primary); }

.hs-scrim { display: none; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 20); background: rgba(23, 33, 29, 0.45); }

/* Phone and tablet: the menu is a drawer. */
html[data-nav-open] .hs-sidenav { transform: none; visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s; box-shadow: var(--shadow-lg); }
html[data-nav-open] .hs-scrim { display: block; }
html[data-nav-open] body { overflow: hidden; }

/* ---------- Top bar ---------- */
.hs-shell__body { min-height: 100dvh; display: flex; flex-direction: column; }
.hs-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3);
  min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--space-4) 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.hs-topbar__business { flex: 1 1 auto; min-width: 0; font-size: var(--text-table); font-weight: var(--weight-medium); color: var(--text); }
.hs-topbar__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.hs-usermenu { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-2); color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius); }
.hs-usermenu:hover { background: var(--surface-muted); }
.hs-usermenu .hs-icon { width: 1rem; height: 1rem; color: var(--text-muted); }
.hs-usermenu__text { display: none; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: left; }
.hs-usermenu__name { font-size: var(--text-table); font-weight: var(--weight-medium); }
.hs-usermenu__role { font-size: var(--text-sm); color: var(--text-muted); }
.hs-usermenu__info { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); line-height: 1.35; }
.hs-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--primary-active); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: 50%; }
.hs-dropdown__menu form { margin: 0; }

/* ---------- Content ---------- */
.hs-main { flex: 1 1 auto; min-width: 0; }
.hs-main:focus { outline: none; }
.hs-main__inner { width: 100%; max-width: 75rem; margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-12); padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)); }
.hs-main--full .hs-main__inner { max-width: none; }

@media (min-width: 40rem) {
  .hs-usermenu__text { display: flex; }
  .hs-main__inner { padding-block: var(--space-8) var(--space-12); padding-inline: var(--space-6); }
}

/* Desktop: the menu is a fixed column the user can hide. */
@media (min-width: 64rem) {
  .hs-sidenav { width: var(--sidenav-w); transform: none; visibility: visible; transition: none; }
  .hs-shell__body { margin-left: var(--sidenav-w); }
  html[data-nav-collapsed] .hs-sidenav { display: none; }
  html[data-nav-collapsed] .hs-shell__body { margin-left: 0; }
  html[data-nav-open] .hs-scrim { display: none; }
  html[data-nav-open] body { overflow: auto; }
}

/* ---------- Signed-out layout ---------- */
.hs-public { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.hs-public__inner { width: min(26rem, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.hs-public__card { width: 100%; padding: var(--space-6); }
.hs-public__card .hs-state { padding: var(--space-4) 0; }
.hs-public__ref { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); text-align: center; word-break: break-all; }

@media print { .hs-sidenav, .hs-topbar, .hs-scrim { display: none !important; } .hs-shell__body { margin: 0 !important; } }