/* EasyTabBar: de tabbladbalk van EasyTabManager en EasyNavTabs. Het tandwiel rechts kiest per gebruiker:
   op één regel (etm-one-line, rest onder "Meer tonen"), horizontaal (etm-h) of verticaal (etm-v) en de stijl
   (etm-style-tabs | pills | underline | buttons | compact). Zie EasyTabBar.razor en TabBarSettingsService. */

.etm-bar { position: relative; display: flex; align-items: flex-end; }
.etm-bar > .etm-nav { flex: 1 1 auto; min-width: 0; position: relative; }
.etm-bar > .etm-nav .nav-link { white-space: nowrap; }
.etm-bar > .etm-tools { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; padding: 0 0 .3rem .35rem; }

.etm-gear-btn { border: 0; background: transparent; color: var(--bs-secondary-color); padding: .25rem .4rem; border-radius: .375rem; line-height: 1; }
.etm-gear-btn:hover, .etm-gear-btn.open { color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); }

/* Eén regel: wat niet past blijft meetbaar in de pagina maar neemt geen ruimte in */
/* contain: inline-size: de regel telt niet mee voor de breedte van de ouder; anders groeit een flex-layout (pop-up van
   relatie- en personeelskaart) mee tot alle tabs passen en valt er nooit iets onder "Meer tonen". */
.etm-one-line > .etm-nav { flex-wrap: nowrap; overflow-x: clip; contain: inline-size; }
.etm-one-line > .etm-nav > li { flex-shrink: 0; }
.etm-nav > li.etm-hidden { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.etm-more-btn { white-space: nowrap; }
.etm-more-btn .badge { font-size: .7em; vertical-align: .1em; }

/* Stijl tabbladen: de lijn loopt door onder het tandwiel */
.etm-h.etm-style-tabs > .etm-tools { align-self: stretch; align-items: flex-end; border-bottom: 1px solid var(--bs-border-color); }

/* Stijl knoppen */
.etm-style-buttons > .etm-nav { gap: .35rem; }
.etm-style-buttons > .etm-nav .nav-link { border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .3rem .8rem; color: var(--bs-body-color); background: var(--bs-body-bg); }
.etm-style-buttons > .etm-nav .nav-link:hover { background: var(--bs-tertiary-bg); }
.etm-style-buttons > .etm-nav .nav-link.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* Stijl compact (kleine pillen) */
.etm-style-compact > .etm-nav { gap: .15rem; }
.etm-style-compact > .etm-nav .nav-link { padding: .15rem .6rem; font-size: .85rem; }

/* Verticaal */
.etm-v { flex-direction: column; align-items: stretch; }
.etm-v > .etm-nav { flex-wrap: nowrap; }
.etm-v > .etm-nav .nav-link { white-space: normal; text-align: start; }
.etm-v > .etm-tools { order: -1; justify-content: flex-end; padding: 0 0 .25rem; } /* tandwiel boven het menu, altijd in beeld */
.etm-v.etm-style-tabs > .etm-nav { border-bottom: 0; border-right: 1px solid var(--bs-border-color); }
.etm-v.etm-style-tabs > .etm-nav .nav-link { margin-bottom: 0; margin-right: -1px; border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); }
.etm-v.etm-style-tabs > .etm-nav .nav-link.active { border-color: var(--bs-border-color) var(--bs-body-bg) var(--bs-border-color) var(--bs-border-color); }
.etm-v.etm-style-underline > .etm-nav { gap: 0; }
.etm-v.etm-style-underline > .etm-nav .nav-link { border-bottom: 0; border-left: 2px solid transparent; padding: .35rem .75rem; }
.etm-v.etm-style-underline > .etm-nav .nav-link.active,
.etm-v.etm-style-underline > .etm-nav .nav-link:hover { border-left-color: currentcolor; }
/* Verticaal geen gekleurd blok om de gekozen tab (pillen, compact, knoppen): alleen de tekstkleur, rustig in een lange lijst */
.etm-v:is(.etm-style-pills, .etm-style-compact, .etm-style-buttons) > .etm-nav .nav-link { color: var(--bs-body-color); }
.etm-v:is(.etm-style-pills, .etm-style-compact, .etm-style-buttons) > .etm-nav .nav-link:hover { background: var(--bs-tertiary-bg); }
.etm-v:is(.etm-style-pills, .etm-style-compact, .etm-style-buttons) > .etm-nav .nav-link.active { background: transparent; border-color: transparent; color: var(--bs-primary); font-weight: 600; }
.etm-v.etm-style-buttons > .etm-nav .nav-link { border-color: transparent; background: transparent; }
/* Filterveld boven een lange verticale lijst */
.etm-v > .etm-filter { padding: 0 0 .4rem; }
.etm-filter-empty { padding: .35rem .75rem; font-size: .85rem; color: var(--bs-secondary-color); }

/* Uitklappanelen (instellingen en "Meer tonen"); klik ernaast sluit */
.etm-backdrop { position: fixed; inset: 0; z-index: 1060; }
.etm-bar > .etm-panel { position: absolute; top: 100%; right: 0; left: auto; z-index: 1061; margin-top: .25rem; }
.etm-v > .etm-panel { top: 2rem; left: 0; right: auto; }
.etm-settings-panel { width: 17.5rem; font-size: .875rem; }
.etm-more-panel { min-width: 15rem; max-height: 60vh; overflow-y: auto; padding-top: 0; padding-bottom: 0; }
/* Zoekveld boven en "Alle tonen" onder blijven staan als de lijst scrolt */
.etm-more-search,
.etm-more-footer { position: sticky; z-index: 1; background: var(--bs-dropdown-bg, #fff); padding: .5rem .75rem; }
.etm-more-search { top: 0; }
.etm-more-footer { bottom: 0; border-top: 1px solid var(--bs-dropdown-divider-bg, #e9ecef); padding-top: .35rem; padding-bottom: .35rem; }
.etm-panel-title { font-weight: 600; margin-bottom: .6rem; }
.etm-panel-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); margin-bottom: .3rem; }

/* EasyTabManager verticaal: tabs links, inhoud rechts */
.etm-manager-v { display: flex; align-items: flex-start; gap: 1rem; }
.etm-manager-v > .etm-bar { flex: 0 0 auto; width: max-content; max-width: 16rem; }
.etm-manager-v > .tab-content { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; }

/* EasyNavTabs verticaal (menu bovenaan losse pagina's, bv. Onderhoud): de ouder wordt een raster met het menu
   links en de rest van de pagina rechts. Het menu beslaat 30 rijen; de laatste rij (1fr) vangt de extra hoogte
   op als het menu langer is dan de pagina, zodat de rijen van de pagina zelf niet uitrekken. */
:has(> .etm-links.etm-v) { display: grid !important; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: repeat(29, auto) 1fr; column-gap: 1.5rem; align-items: start; }
:has(> .etm-links.etm-v) > * { grid-column: 2; }
:has(> .etm-links.etm-v) > .etm-links.etm-v { grid-column: 1; grid-row: 1 / span 30; max-width: 15rem; position: sticky; top: .5rem; }