/* ── Kalender/Ugeplan: bunden af siden paa mobil + tablet ────────────────────
   Loades EFTER css/dist/ugeplan.bundle.min.css (se $page_css i index.html), saa
   den vinder paa dokumentorden. Bundlens kilde ligger i css/blod-bolge/*.css og
   bygges af `node build.js --scope=ugeplan` med byte-parity-CI; derfor bor denne
   rettelse i sin egen fil i stedet for i et bundle-lag.

   To fejl gjorde at indholdet forsvandt bag bundlinjen (browser-maalt):

   1) .workspace er `flex: 1; min-height: 0` i et scrollende flex-kort. Paa
      desktop er den to kolonner og passer. Under 820px stables den til to
      raekker (577px + 633px maalt ved 390px viewport), men BOKSEN bliver
      stadig kun den resterende viewporthoejde (672px) — resten spilder ud
      under boksen med overflow:visible. Scrollerens padding-bottom lander
      derfor EFTER boksen, midt i det spildte indhold, og de sidste ~60px af
      "Skal planlaegges" kunne aldrig scrolles fri af den faste bundnavigation.

   2) bb-mobile-nav.css saetter `body.has-mn-bar .main, .main-content
      { padding-bottom: calc(var(--mn-bar-height) + 16px) }` (0,3,0) og slaar
      dermed bundlens egen `.ugeplan-main { padding: 14px 14px 172px }` (0,1,0)
      under 767px. De 172px var bevidste: bjaelken (78) + den flydende Sofia-
      kugle (78, bottom:80px til venstre) + 16px luft. Med 76px laa kuglen
      oven paa den sidste raekke. ── */

@media (max-width: 820px) {
  /* Indholdssat hoejde = raekkerne er i flow = scrollhoejden og padding-bottom
     regner rigtigt. min-height:0 bevares fra bundlen. */
  .ugeplan-main .workspace {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  /* Bundlens egen frihoejde tilbage, nu med respekt for home-indicator-insettet
     (bjaelken vokser med env(safe-area-inset-bottom), det skal frihoejden ogsaa). */
  body.has-mn-bar .ugeplan-main,
  body.has-mn-bar .main.ugeplan-main,
  body.has-mn-bar .main-content.ugeplan-main {
    padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 820px) {
  /* Drawer footer (Save/cancel) was hidden behind the fixed bottom mobile-nav
     bar: at <=820px the drawer stretches to max-height:calc(100vh - 20px) with
     no `bottom`, so its lower edge painted under the nav. Reserve the bar's
     height (the var already folds in the safe-area inset) so the whole drawer
     — footer included — stays on screen. Only when the bar is actually present. */
  body.has-mn-bar .ugeplan-main .drawer {
    bottom: calc(var(--mn-bar-height, 60px) + 10px);
    max-height: none;
  }
}

@media (max-width: 767px) {
  /* Top-actions responsiveness: the bundle only sets `flex-wrap: wrap` on the
     toolbar, so whether the gear + Add stayed on the brand's row or dropped
     below flipped device-to-device around the ~400px mark (and shifted again
     per locale/font width) — "broken on some phones, fine on others". Force a
     deterministic two-row layout on every phone: brand on its own row, the
     actions on the next, matching the intended mobile design. */
  .ugeplan-main .toolbar { flex-wrap: wrap; row-gap: 10px; column-gap: 12px; }
  .ugeplan-main .brand { flex: 1 1 100%; min-width: 0; }
  .ugeplan-main .brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ugeplan-main .top-actions { flex: 1 0 100%; justify-content: flex-start; }
}

@media (max-width: 767px) and (orientation: landscape) and (max-height: 500px) {
  /* Landskab: bjaelken er lav og kuglen sidder hoejere oppe i forhold til
     viewporten — 172px ville spise en tredjedel af skaermen. */
  body.has-mn-bar .ugeplan-main,
  body.has-mn-bar .main.ugeplan-main,
  body.has-mn-bar .main-content.ugeplan-main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}