/* App shell: side navigation + topbar + main + footer (ui.md §2.6). From 64em the
   side navigation spans the full height on the start side (brand at its top, like
   the back office) and the top bar sits in the content column; below 64em the top
   bar spans the width and the navigation is an off-canvas drawer under it. */

.sv-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.sv-shell {
  display: grid;
  flex: 1 0 auto;
  grid-template-areas: "top" "content";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-width: 0;
}
.sv-shell > .sv-topbar { grid-area: top; }
.sv-shell > .sv-shell__content { grid-area: content; }
@media (min-width: 64em) {
  .sv-shell {
    grid-template-areas: "nav top" "nav content";
    grid-template-columns: auto minmax(0, 1fr);
  }
  .sv-shell > .sv-sidenav { grid-area: nav; }
}

.sv-shell__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sv-main {
  flex: 1 0 auto;
  min-width: 0;
  padding: var(--sv-space-4) var(--sv-space-4) var(--sv-space-12);
}
@media (min-width: 48em) {
  .sv-main { padding: var(--sv-space-6) var(--sv-space-6) var(--sv-space-16); }
}
@media (min-width: 80em) {
  .sv-main { padding-inline: var(--sv-space-8); }
}

.sv-main__inner {
  width: 100%;
  max-width: var(--sv-content-max);
  margin-inline: auto;
}
.sv-main__inner > * + * { margin-top: var(--sv-space-4); }

/* Backdrop behind the off-canvas navigation (< 64em). */
.sv-sidenav-backdrop {
  position: fixed;
  z-index: calc(var(--sv-z-sidenav) - 1);
  inset: var(--sv-topbar-height) 0 0 0;
  background: var(--sv-color-overlay);
  animation: sv-fade-in var(--sv-duration) var(--sv-ease);
}
@media (min-width: 64em) {
  .sv-sidenav-backdrop { display: none !important; }
}

/* Footer: one line (14 px text on a 21 px line, 12 px padding, 46 px high) flush with
   the window bottom on short pages; on phones the two texts may wrap onto two lines. */
.sv-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-1) var(--sv-space-6);
  padding: var(--sv-space-3) var(--sv-space-4) calc(var(--sv-space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sv-color-border);
  background: var(--sv-color-surface);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-sm);
  line-height: var(--sv-leading-normal);
}
@media (min-width: 48em) {
  .sv-footer { padding-inline: var(--sv-space-6); }
}
.sv-footer__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
}
.sv-footer a { color: var(--sv-color-link); }
.sv-footer__support { margin: 0; }

@keyframes sv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}