/* ═══════════════════════════════════════════════════════
   GladPote — sidebar, bundnavigation, grid og cards

   Mobil først: bundnavigation med 5 faner.
   Fra 900px: venstre sidebar, ingen bundnavigation.
   ═══════════════════════════════════════════════════════ */

/* ── Skal ──────────────────────────────────────────── */

.app {
  display: flex;
  min-height: 100vh;
}

/* Alt til højre for sidebaren: topbar, indhold og footer. */
.app-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;

  /* Bundnavigationen ligger fast over indholdet. Pladsen skal ligge
     nederst på HELE spalten — ellers forsvinder sidefoden ind under
     den. Fjernes igen på desktop, hvor baren ikke findes. */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.main {
  flex: 1;
  min-width: 0;
  padding-block: var(--sp-5);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.page-head p { color: var(--text-soft); }

/* ── Topbar (mobil) ────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: 56px;
  padding-inline: var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar .brand { font-size: 1.0625rem; }

/* ── Brand ─────────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

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

/* Poten. Filen er kvadratisk med sin egen grønne baggrund, så den
   rundes af her i stedet for at ligge som en firkant midt i en
   ellers afrundet grænseflade. */
.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}

.topbar .brand-mark { width: 26px; height: 26px; border-radius: 8px; }

/* ── Sidebar (desktop) ─────────────────────────────── */

/* Tolv punkter plus fod skal kunne stå på en bærbar uden at menuen
   får sin egen scrollbar. Derfor er punkterne 36 px høje og ikke 46,
   og derfor står planbeskeden på forsiden i stedet for hernede.
   Regnestykket: 12 × 36 + mellemrum + brand + fod ≈ 590 px. */
.sidebar {
  display: none;
  flex: none;
  width: var(--sidebar-w);
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-4);
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: .9375rem;
  transition: background var(--transition), color var(--transition);
}

.sidebar-nav a:hover { background: var(--surface-alt); }

.sidebar-nav a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
}

.sidebar-nav .nav-icon { flex: none; width: 20px; height: 20px; }

/* PRO-badget skubbes ud til højre kant. */
.sidebar-nav .badge { margin-left: auto; }

/* ── Sidebarens fod: hvem du er, og vejen ud ───────── */

.sidebar-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition);
}

.sidebar-user:hover { background: var(--surface-alt); color: var(--text); }

.sidebar-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .8125rem;
}

/* Lange navne må hellere klippes end at vælte foden om på to linjer. */
.sidebar-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
}

/* Ikon-genveje i foden: admin og log ud. De er ikke steder man går hen
   hver dag, så de behøver ikke en linje hver i menuen. */
.sidebar-tool {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  transition: background var(--transition), color var(--transition);
}

.sidebar-tool:hover { background: var(--surface-alt); color: var(--text); }

.sidebar-tool[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.sidebar-tool .nav-icon { width: 20px; height: 20px; }

/* ── Bundnavigation (mobil) ────────────────────────── */

.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Kun fanerne selv — links inde i "Mere"-arket har deres egen stil. */
.bottom-nav > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  color: var(--text-soft);
  text-decoration: none;
  font-size: .6875rem;
  font-weight: 600;
}

.bottom-nav > a[aria-current="page"] { color: var(--primary-dark); }

.bottom-nav > a .nav-icon { width: 24px; height: 24px; }

/* Den hævede +-knap i midten. */
.bottom-nav .nav-add {
  align-self: center;
  justify-self: center;
  width: 56px;
  height: 56px;
  margin-top: -22px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow);
  gap: 0;
}

.bottom-nav .nav-add:hover { background: var(--primary-dark); color: var(--on-primary); }
.bottom-nav .nav-add .nav-icon { width: 28px; height: 28px; }

/* ── "Mere" — resten af menuen ─────────────────────── */

/* Bygget som <details>, så den virker uden JavaScript. */
.nav-more { position: relative; height: 100%; align-self: stretch; }

.nav-more > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  color: var(--text-soft);
  font-size: .6875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;          /* pilen væk */
}

.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::marker { content: ""; }
.nav-more > summary .nav-icon { width: 24px; height: 24px; }

.nav-more[open] > summary,
.nav-more > summary.is-current { color: var(--primary-dark); }

/* Et bundark der glider op over baren: rundede hjørner og et greb
   øverst, så det ligner noget der hører til nederst på skærmen. */
.more-sheet {
  position: fixed;
  inset: auto 0 calc(var(--nav-h) + env(safe-area-inset-bottom)) 0;
  z-index: 31;
  max-height: 72vh;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
}

/* <details> kan ikke animere sin egen højde, så arket toner selv op.
   base.css slår animationen fra ved prefers-reduced-motion. */
.nav-more[open] .more-sheet { animation: sheet-up 180ms cubic-bezier(.4, 0, .2, 1); }
.nav-more[open]::before     { animation: sheet-fade 180ms linear; }

@keyframes sheet-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

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

.more-grip {
  display: block;
  width: 40px;
  height: 4px;
  margin: var(--sp-1) auto var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--border);
}

/* Resten af siden dæmpes, så det er tydeligt at menuen er åben.
   Med JavaScript lukker et klik her; uden lukker man på fanen igen. */
.nav-more[open]::before {
  content: "";
  position: fixed;
  inset: 0 0 calc(var(--nav-h) + env(safe-area-inset-bottom)) 0;
  z-index: 30;
  background: rgb(17 24 39 / .35);
}

/* Brugeren og Log ud står øverst — det er dem man leder efter her. */
.more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.more-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.more-who strong { font-size: .9375rem; }
.more-plan { font-size: .8125rem; color: var(--text-soft); text-decoration: none; }
.more-plan:hover { color: var(--primary-dark); }

/* Fliser frem for en smal liste: større trykflade pr. punkt. */
.more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}

.more-grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 84px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.more-grid a[aria-current="page"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.more-grid .nav-icon { width: 24px; height: 24px; }

/* PRO-badget sidder i flisens hjørne, ikke i vejen for teksten. */
.more-grid .badge {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* Vilkår og privatliv står for sig selv nederst. */
.more-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: .875rem;
}

.more-foot a { color: var(--text-soft); text-decoration: none; }

/* ── Cards ─────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

.card + .card { margin-top: var(--sp-5); }

/*
   Lodret rytme mellem sidens blokke.

   `.card + .card` rammer kun to kort der står lige efter hinanden. Så
   snart der ligger et gitter imellem — et kort, derefter to i to
   kolonner — er de naboer ikke længere, og afstanden forsvandt. Det her
   giver alle blokke i indholdet den samme afstand, uanset hvad de er.

   Marginer på blokniveau kollapser, så en `margin-bottom` ovenfor (fx
   på .page-head) og den her lægges ikke sammen — den største vinder.
*/
.main .container > * + * { margin-top: var(--sp-5); }

/* Ligger kortene i et gitter eller en stak, sørger gap'et allerede for
   afstanden. Uden det her lægges marginen oveni, og kortet ved siden af
   starter et hak længere nede end sin nabo. */
:where(.grid, .grid-2, .grid-3, .grid-4, .stack) > .card + .card {
  margin-top: 0;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.card-head h2, .card-head h3 { margin: 0; }

/* Kun klikbare cards løfter sig. */
a.card, .card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}

a.card:hover, .card-link:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}

/* ── Grid ──────────────────────────────────────────── */

/*
   Kolonnerne står op ad hinanden foroven — de strækker sig IKKE til
   samme højde. Et kort med lidt indhold skal være lavt, ikke et højt
   kort med luft i bunden.
*/
.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: start;
}

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Rækker af handlinger og knapper. */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.row-end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── Footer ────────────────────────────────────────── */

.site-footer {
  padding: var(--sp-6) 0;
  margin-top: var(--sp-7);
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .875rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

/* ── Breakpoints ───────────────────────────────────── */

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .sidebar { display: flex; flex-direction: column; }
  .topbar, .bottom-nav { display: none; }

  /* Ingen bundnavigation her, så pladsen til den skal væk igen. */
  .app-body { padding-bottom: 0; }

  .main {
    padding-block: var(--sp-6);
    padding-bottom: var(--sp-7);
  }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Sider uden login (forside, login, opret) har ingen sidebar,
   så topbaren skal blive stående også på desktop. */
.layout-public .main {
  padding-bottom: var(--sp-7);
}

/* De sider har heller ingen bundnavigation, så pladsen til den skal væk
   — ellers står der et tomt bælte under sidefoden på mobil. */
.layout-public .app-body { padding-bottom: 0; }

@media (min-width: 900px) {
  .topbar-public {
    display: flex;
    height: var(--nav-h);
  }
}