/* v0402 — Spara får inte rulla bort ur en ruta.

   PROBLEMET, mätt i Ulfs offertruta "OFFERTEN · Uppgifter":

   .portal-modal-body har max-height + overflow:auto (assignment-v0088.css,
   skärpt av density-v0103.css och mobile-v0257.css), och knapparna Avbryt och
   Spara låg INUTI det rullande området. På en skärm där formuläret inte fick
   plats rullades knapparna bort, och rutan såg ut att sakna Spara helt.

   LÖSNINGEN är portalens egen, från .lp-dialog: kortet blir en flexkolumn,
   huvudet och foten står still, och bara mitten rullar. Höjdtaket flyttar
   från body till kortet — det är kortet som ska rymmas på skärmen, inte
   mitten.

   BAKÅTKOMPATIBEL: en ruta som ännu har sina knappar kvar inne i body får
   exakt samma beteende som förut — body rullar, knapparna rullar med. Först
   när knapparna flyttas ut till .portal-modal-foot står de stilla. Ingen vy
   går sönder av att den här filen laddas.

   Specificiteten är satt för att slå .app-shell .portal-modal-body i
   density-v0103.css och mobile-v0257.css, som är de högsta som finns i dag.
   Filen laddas sist i layout.php av samma skäl. */

.app-shell .portal-modal-card{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 30px);
}

/* Taket bort från mitten: kortet ovan äger höjden nu. */
.app-shell .portal-modal-body{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
}

.app-shell .portal-modal-head{ flex:0 0 auto }

.app-shell .portal-modal-foot{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  padding:12px 24px;
  border-top:1px solid var(--line);
  background:#fff;
}

/* Rutan som håller formuläret måste också vara en flexkolumn, annars kan
   foten inte hamna utanför body: i offertrutorna ligger <form> mellan kortet
   och innehållet. */
.app-shell .portal-modal-card>form{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
}

@media(max-width:620px){
  .app-shell .portal-modal-card{ max-height:calc(100dvh - 16px) }
  .app-shell .portal-modal-foot{ padding:10px 14px }
  /* Knapparna i bredd på liten skärm — en tumme träffar sämre än en muspekare. */
  .app-shell .portal-modal-foot .button{ flex:1 1 auto; justify-content:center }
}