/* Landskabet bliver. Landing/oprettelse ruller; kun appen har fast topmenu. */
:root {
  --header-height: 0px;
  --app-viewport-height: 100vh;
  scroll-padding-top: calc(var(--header-height) + 16px);
  scroll-padding-bottom: 20px;
}

@supports (height: 100svh) { :root { --app-viewport-height: 100svh; } }
@supports (height: 100dvh) { :root { --app-viewport-height: 100dvh; } }

body.app-shell {
  display: flex;
  flex-direction: column;
  min-height: var(--app-viewport-height);
  padding-bottom: 0;
  background: #fff;
  isolation: isolate;
}

.app-shell main {
  width: 100%;
  min-height: 0;
  padding-top: 24px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
}
.app-shell.welcome-shell main { padding-bottom: 24px; }
.entry-brand { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 500px; margin: 0 auto 18px; padding-top: env(safe-area-inset-top, 0px); }
.entry-logo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; width: 184px; max-width: 100%; min-height: 44px; margin: 0 auto; }
.entry-logo img { display: block; width: 100%; height: auto; }
.onboarding-back { display: inline-flex; white-space: nowrap; align-items: center; gap: 6px; justify-self: start; min-height: 44px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: .8125rem; color: #246b4b; text-decoration: none; cursor: pointer; }
.onboarding-back .ui-icon { flex-shrink: 0; width: 18px; height: 18px; transform: rotate(180deg); }
.onboarding-back:hover { text-decoration: underline; }
.entry-logout { grid-column: 2; justify-self: end; margin: 0; }
.entry-logout button { min-height: var(--sg-control-min-height); font-size: .8125rem; }
.onboarding-flow main::before { content: ""; display: block; height: env(safe-area-inset-top, 0px); }

.app-header {
  position: relative;
  top: 0;
  z-index: 12;
  padding-top: env(safe-area-inset-top, 0px);
  background: #fff;
  border-bottom: 1px solid #dce6dd;
  box-shadow: 0 3px 16px #09273806;
}
.app-header[data-navigation-enhanced] { position: sticky; }

.app-header-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  max-width: 1120px;
  min-height: 76px;
  margin: auto;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
}

.header-back, .menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 52px;
  padding: 5px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #246b4b;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.header-back .ui-icon { transform: rotate(180deg); }
.header-back:hover, .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: #e7f2e7; }
.header-back-placeholder { width: 52px; }
.header-logo { display: flex; justify-content: center; min-width: 0; border-radius: 8px; }
.header-logo img { display: block; width: min(100%, 280px); height: auto; }
.menu-toggle { flex-direction: column; gap: 1px; font-size: .6875rem; line-height: 1.3; font-weight: 650; }
.menu-toggle .ui-icon { width: 23px; height: 23px; flex-basis: 23px; }
.menu-toggle-icon { font-size: 26px; line-height: 1; }

.app-navigation {
  border-top: 1px solid #e4ece6;
  background: #fbfcf9;
  overflow: auto;
  overscroll-behavior: contain;
}

.app-header[data-navigation-enhanced] .app-navigation {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100dvh - var(--header-height));
  box-shadow: 0 16px 26px #09273820;
}
.navigation-inner { max-width: 1040px; margin: auto; padding: 20px 24px 28px; }
.navigation-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 4px 16px; margin: 0 0 18px; border-bottom: 1px solid #dce6dd; overflow-wrap: anywhere; }
.navigation-profile > span { min-width: 0; flex: 1 1 200px; }
.navigation-profile > a { padding: 8px 0; }
.navigation-profile p { margin: 0 0 6px; }
.navigation-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 20px 32px; }
.navigation-group h2 { margin: 0 0 7px; padding: 0 12px; font-size: .75rem; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.navigation-links { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.navigation-link, .navigation-logout button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #092738;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.navigation-link .ui-icon { width: 23px; height: 23px; flex: 0 0 23px; color: #246b4b; }
.navigation-link:hover, .navigation-logout button:hover { background: #edf3eb; }
.navigation-link[aria-current="page"] { background: #e0efdf; color: #1e6245; box-shadow: inset 3px 0 #246b4b; }
.navigation-link.navigation-primary { background: #246b4b; color: #fff; }
.navigation-link.navigation-primary .ui-icon { color: inherit; }
.navigation-link.navigation-primary:hover { background: #1e5a3f; }
.navigation-logout { margin-top: 20px; padding-top: 12px; border-top: 1px solid #dce6dd; }
.navigation-logout button { color: var(--muted); }
.navigation-version { display: block; margin: 12px; color: var(--muted); font-size: .75rem; }

.app-landscape {
  display: block;
  position: fixed;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(150vw, var(--app-viewport-height));
  pointer-events: none;
  user-select: none;
}
.app-landscape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 4px max(16px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 1px #092738, 0 0 1px #092738, 0 0 2px #092738;
}
.footer-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; width: 100%; max-width: 1120px; margin: auto; }
.footer-links nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; color: #fff; font-size: .8125rem; text-decoration: none; }
.footer-links a:first-child { padding-left: 0; }
.footer-links a + a::before { content: ""; display: block; height: 12px; border-left: 1px solid #d6e6df70; margin-right: 20px; }
.footer-links a:hover { text-decoration: underline; }
.app-version { color: #d6e6df; font-size: .625rem; font-weight: 400; white-space: nowrap; }
.site-footer :focus-visible { outline-color: #f5c942; }
.app-shell .skip { position: fixed; z-index: 40; }
.app-shell .connection { z-index: 25; }
.app-shell :is(input, select, textarea, button, a) { scroll-margin-top: calc(var(--header-height) + 16px); scroll-margin-bottom: 20px; }
.app-shell .auth-switch, .app-shell .journey-history, .app-shell .dashboard-note {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto;
  padding: 2px 12px;
  border-radius: 12px;
  background: #ffffffed;
  color: var(--muted);
}

@media (min-width: 768px) {
  .app-header-row { min-height: 86px; }
  .app-landscape { height: min(57.81vw, var(--app-viewport-height)); }
  .app-landscape img { object-fit: cover; }
}

@media (max-width: 767px) {
  .navigation-groups { grid-template-columns: 1fr; gap: 18px; }
  .navigation-inner { padding: 18px 20px 24px; }
  .app-shell main { padding-top: 18px; }
  .app-shell.profile-choice-page main { padding-top: 12px; }
}

@media (max-width: 360px) {
  .app-header-row { grid-template-columns: 44px minmax(0, 1fr) 44px; padding-left: 12px; padding-right: 12px; gap: 6px; min-height: 68px; }
  .header-back, .header-back-placeholder, .menu-toggle { width: 44px; }
  .site-footer { padding-left: 12px; padding-right: 12px; }
  .footer-links { column-gap: 8px; }
  .footer-links a { padding-right: 6px; padding-left: 6px; }
  .footer-links a + a::before { margin-right: 12px; }
}

@media (max-height: 500px) {
  .app-shell.signed-in main { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .app-landscape { height: var(--app-viewport-height); }
  .app-landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #fff 0%, #fffffff2 55%, #ffffffd9 72%, #fff0 100%); }
}

@media print {
  .app-header, .app-landscape, .site-footer, .connection, .update-notice { display: none; }
  .app-shell main { padding: 0; }
}