/* Level One-tabbladen (app-tabs.js): de balk onder de bovenbalk (#lo-tabs, zelfde stijl als EasyTabBar) en de
   tabbladen zelf als iframe (#lo-tab-frames) op de plek van de pagina. */

/* Grijze strook met het actieve tabblad wit, zoals browsertabs: zo is hij niet te verwarren met de tabbladen van de
   pagina zelf (EasyTabManager) die er vaak direct onder staan. */
.lo-tabs { background: var(--bs-tertiary-bg); padding: .35rem .4rem 0; margin-bottom: .5rem; }
.lo-tabs .nav-tabs .nav-link.active { background: var(--bs-body-bg); }
.lo-tabs .nav-tabs .nav-link:not(.active):hover { background: rgba(0, 0, 0, .04); }
.lo-tabs[hidden] { display: none !important; }
@media (min-width: 641px) {
    .lo-tabs { position: sticky; z-index: 1000; } /* top zet app-tabs.js op de hoogte van de bovenbalk */
}

/* Tabs krimpen zoals in de browser in plaats van door te lopen; maximaal 10 tabbladen. */
.lo-tabs-nav { flex-wrap: nowrap; }
.lo-tabs-nav > li { flex: 0 1 auto; min-width: 6.5rem; }
.lo-tabs-nav > li:first-child { min-width: 0; flex-shrink: 0; }
.lo-tabs-nav .nav-link { display: flex; align-items: center; gap: .2rem; max-width: 16rem; padding: .3rem .5rem .3rem .65rem; }
.lo-tab-home { max-width: 14rem; }
.lo-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

.lo-tab-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.3rem; height: 1.3rem;
    border-radius: .25rem; font-size: .72rem; color: var(--bs-secondary-color); }
.lo-tab-btn:hover, .lo-tab-btn:focus-visible { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); outline: 0; }
/* Losmaken alleen bij het actieve tabblad of onder de muis: anders te druk. */
.lo-tab > .nav-link:not(.active):not(:hover) > [data-lo-popout] { display: none; }

/* Hoofdscherm voor: de tabbladen blijven onzichtbaar geladen (met hun echte afmetingen, zodat pagina's erin niet op
   0 pixels uitkomen). Een tabblad voor: de pagina van het hoofdscherm verdwijnt, het tabblad komt op zijn plek. */
.lo-tab-frames { position: fixed; inset: 0; visibility: hidden; pointer-events: none; z-index: -1; }
html.lo-tab-open .page > main > article.content { display: none; }
html.lo-tab-open .lo-tab-frames { position: relative; inset: auto; visibility: visible; pointer-events: auto; z-index: auto; }
.lo-tab-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; background: var(--bs-body-bg); }
html.lo-tab-open .lo-tab-frame.lo-tab-frame-active { visibility: visible; }

/* De pagina ín een tabblad: geen zijbalk, bovenbalk of eigen tabbladbalk (App.razor zet lo-in-tab). */
html.lo-in-tab .page > .sidebar,
html.lo-in-tab .page > main > .top-row,
html.lo-in-tab .lo-tabs,
html.lo-in-tab .lo-tab-frames { display: none !important; }