/* App shell. Mobile (<640): top bar + bottom tab bar. Tablet (640-1023): icon rail.
   Desktop (>=1024): full sidebar. */

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.env-banner {
  padding: var(--space-1) var(--space-4);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: center;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-text);
}

.brand__mark {
  width: 28px;
  height: 28px;
  flex: none;
}

/* Sidebar */
.sidebar {
  display: none;
}

.nav-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.nav-link:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.nav-link[aria-current="page"] {
  background: var(--color-surface-2);
  color: var(--color-primary);
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--topbar-height);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* The top-bar search box; phones and tablets use the search on the patient list. */
.topbar__search {
  display: none;
}

.topbar__spacer {
  flex: 1;
}

/* Page content */
.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) calc(var(--bottombar-height) + var(--space-6));
}

.page:focus {
  outline: none;
}

.page-header {
  margin-bottom: var(--space-5);
}

.page-header p {
  margin-bottom: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}

.stack {
  display: grid;
  gap: var(--space-5);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* A single centred card: error pages inside the shell, and the standalone offline page. */
.centered-page {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

.centered-page > .card {
  width: 100%;
  max-width: 480px;
}

body > .centered-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-4);
}

/* Bottom tab bar (mobile) */
.bottom-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: flex;
  height: calc(var(--bottombar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.bottom-bar__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch-target);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.bottom-bar__link[aria-current="page"] {
  color: var(--color-primary);
}

/* Record: the bar's main action, drawn as a filled circle. */
.bottom-bar__link--primary {
  color: var(--color-primary);
}

.bottom-bar__link--primary .icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: var(--space-2);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

@media (min-width: 640px) {
  .app-shell {
    grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    height: 100vh;
    height: 100dvh;
    padding: var(--space-3);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
  }

  .sidebar .brand__name,
  .sidebar .nav-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sidebar .brand,
  .sidebar .nav-link {
    justify-content: center;
  }

  .bottom-bar {
    display: none;
  }

  /* The icon rail already shows the mark; the top bar keeps just the name. */
  .topbar__brand .brand__mark {
    display: none;
  }

  .page {
    padding: var(--space-6) var(--space-5);
  }
}

@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .sidebar .brand__name,
  .sidebar .nav-link__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .sidebar .brand,
  .sidebar .nav-link {
    justify-content: flex-start;
  }

  .topbar__brand {
    display: none;
  }
}

/* Page furniture */
.page-header--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.breadcrumb {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
}

.narrow {
  max-width: 640px;
}

.card + .card,
.card + .stack-section,
.stack-section + .card {
  margin-top: var(--space-5);
}

.stack-section > h2 {
  font-size: var(--text-lg);
}

/* Label/value pairs. */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-4);
}

.facts dt {
  color: var(--color-text-muted);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* On phones each label sits above its value. */
@media (max-width: 639px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .facts dd {
    margin-bottom: var(--space-3);
  }
}

.filters {
  margin-bottom: var(--space-4);
}

.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 0 var(--space-4);
}

/* Privacy blur (core/privacy-blur.js): hides the page while the tab or app is in the
   background, so app switchers do not show it. */
.privacy-blurred .app-shell,
.privacy-blurred .auth-page {
  filter: blur(16px);
}

@media (min-width: 1024px) {
  .topbar__search {
    display: block;
    flex: 0 1 22rem;
  }
}