/* Gedeelde page-shell voor app-pagina's die de warme, gecentreerde layout
   van /welkom willen delen (Kor 2026-09-09). Extract van .vw-shell + .vw-page
   uit welkom.css, ontdaan van welkom-specifieke gedragsregels
   (user-select: none op h1/p, saffraan-focus-styling op inputs). Bedoeld
   voor gebruik binnen bestaande layout-wrappers zoals <PItemView>.

   Structuur:

       <PItemView ...>
           <div class="j1mmy-app-shell">
               <div class="j1mmy-app-page">
                   ...page content...
               </div>
           </div>
       </PItemView>

   .j1mmy-app-shell     = achtergrondkleur + minimale hoogte
   .j1mmy-app-page      = gecentreerde content-kolom met max-width en frame-
                          padding, plus onderaan reservering voor de fixed
                          J1mmyBar (via --j1mmy-bar-total-height token).
*/

.j1mmy-app-shell {
    /* Brok 10n (Kor 2026-09-15) — 100vh in plaats van 100% zodat de
       creme-achtergrond altijd doorloopt tot de J1mmyBar onderaan. Op
       /agents/mail (short content) was min-height: 100% korter dan de
       viewport waardoor er een witte balk onder het gecentreerde vlak
       verscheen. .vw-shell op /welkom heeft dezelfde 100vh-regel. */
    min-height: 100vh;
    background-color: #f6f5f1;
}

.j1mmy-app-page {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 2rem calc(2rem + var(--j1mmy-bar-total-height, 6rem));
    box-sizing: border-box;
}

/* PItemView renderd altijd een lege accordion-header (border-bottom uit
   .p-accordion-main-styling in app.css). Op pagina's die de app-shell
   gebruiken en HeaderTitle leeg laten, verschijnt die border als een
   lichtere strook boven de creme-achtergrond. Verberg 'm scope-veilig
   via :has() zodat andere PItemView-consumers hun header behouden. */
.p-accordion-main:has(.j1mmy-app-shell) .rz-accordion-header {
    display: none;
}

/* Mobiel: strook-kaarten binnen de shell (BedrijfskennisCard,
   BudgetSummaryCard) hun content laten stretchen. Zonder deze override
   valt de kennis-bar op align-items:flex-start, waardoor de inner-content
   z'n eigen min-width van 15rem pakt en visueel smaller lijkt dan de
   agent-cards eronder. */
@media (max-width: 640px) {
    .j1mmy-app-shell .kennis-bar,
    .j1mmy-app-shell .kosten-bar {
        align-items: stretch;
    }
    .j1mmy-app-shell .kennis-bar-content,
    .j1mmy-app-shell .kosten-bar-body,
    .j1mmy-app-shell .kosten-bar-label {
        min-width: 0;
        width: 100%;
    }
}