/* static/css/base.css */ :root{ --topbar-h: 56px; --content-top-pad: 0px; /* pagina wrapper */ --page-max: 1400px; --page-pad: 16px; /* card defaults (niet-manage pagina's) */ --card-max-w: 1720px; /* ✅ padding ook netjes laten schalen bij zoom/klein scherm */ --card-pad: clamp(8px, 1.2vw, 12px); --card-radius: 10px; /* ✅ onderruimte tot viewport-onderkant */ --card-bottom-gap: 14px; /* ✅ extra veiligheidsmarge i.v.m. mobiele browser UI / rounding */ --card-bottom-safe: env(safe-area-inset-bottom, 0px); /* ✅ responsieve "fudge": schaalt mee bij zoom/kleine schermen */ --card-bottom-fudge: 20px; } html{ box-sizing: border-box; font-size: 100%; scroll-padding-top: var(--topbar-h); } *, *::before, *::after{ box-sizing: inherit; } body{ margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* centrale content wrapper */ main.container{ width: 100%; max-width: var(--page-max); margin-left: auto; margin-right: auto; padding-top: var(--content-top-pad); padding-left: var(--page-pad); padding-right: var(--page-pad); } /* ========================================================= ✅ MANAGE pages full-width (fix whitespace rechts) Zet op manage pagina's: ========================================================= */ body.is-manage main.container{ max-width: none; /* geen page max */ width: 100%; margin-left: 0; margin-right: 0; /* layout_1.css regelt zijn eigen 6px rand; hier geen extra padding */ padding-left: 0; padding-right: 0; } /* per pagina breder/smaller */ body.wide{ --page-max: 1680px; } body.narrow{ --page-max: 1080px; } /* full-bleed (optioneel) */ body.full-bleed main.container{ height: calc(100svh - var(--topbar-h)); min-height: 0; padding: 0; overflow: hidden; } /* ========================================================= ✅ FIX: Mobile planning + full-bleed mag NIET clippen (anders verdwijnt de fixed bottom bar die in
zit) ========================================================= */ body.is-mobile-planning.full-bleed main.container{ overflow: visible !important; height: auto !important; min-height: 0 !important; } /* Optioneel: als je op mobile planning de topbar niet gebruikt */ body.is-mobile-planning{ --topbar-h: 0px; } /* embed */ html.embed .topbar{ display: none !important; } html.embed body.full-bleed main.container{ height: 100svh; min-height: 0; padding: 0; overflow: hidden; } /* layout helper */ .two-col{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; width: 100%; padding: 0px; } /* ========================================================= ✅ CARD basis: alleen op NIET-manage pagina’s (manage pages gebruiken .manage-root .card uit layout_1.css) ========================================================= */ body:not(.is-manage) .card{ background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: none; padding: var(--card-pad); display: flex; flex-direction: column; /* ✅ card eindigt boven de onderkant van het scherm (vh fallback + dvh voor moderne browsers) */ height: calc( 100vh - var(--topbar-h) - var(--card-bottom-gap) - var(--card-bottom-safe) - var(--card-bottom-fudge) ); height: calc( 100dvh - var(--topbar-h) - var(--card-bottom-gap) - var(--card-bottom-safe) - var(--card-bottom-fudge) ); min-height: 0; overflow: hidden; width: 100%; max-width: var(--card-max-w); margin-left: auto; margin-right: auto; margin-bottom: calc(var(--card-bottom-gap) + var(--card-bottom-safe)); } body:not(.is-manage) .card > .body, body:not(.is-manage) .card .tbody-scroll{ overflow: auto; min-height: 0; } body.card-fullwidth{ --card-max-w: none; } body.card-autoheight{ --card-h: auto; } .left-card, .right-card{ width: 100%; height: 100%; } @media (max-width: 768px) { .two-col{ grid-template-columns: 1fr; } .map-area{ height: 200px; } :root{ --card-max-w: none; } } /* badges / z-index */ .icon-badge-btn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; margin-right:10px; border:none; background:transparent; cursor:pointer; vertical-align:middle; color:#6b7280; position:relative; } .icon-badge-wrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; } .icon-badge{ position:absolute; top:-4px; right:-10px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#ef4444; color:#fff; font-size:10px; line-height:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; } .icon-badge[hidden]{ display:none !important; } header.topbar{ position: relative; z-index: 5000; } user-menu .menu{ position: absolute; z-index: 6000; } html.embed .card{ box-shadow: none !important; }