/* AuDHD staging additions — audhd-meer
   Loaded after app.css; overrides apply.
   Lives in web-staging only; never deployed to prod. */

/* Section header inside the Meer bottom sheet — matches the sidebar
   .nav-section visual (uppercase, muted, letter-spaced) so users build a
   single mental model across desktop sidebar + mobile sheet. */
.meer-sheet-section-label {
    margin: 14px 4px 4px;
    padding: 4px 8px;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* First section label sits flush with the sheet title — no double spacing. */
.meer-sheet-list > .meer-sheet-section-label:first-child {
    margin-top: 2px;
}

/* Logout stays calm — same row treatment as other items, only a subtle
   amber accent on the label so it reads as a verb, not a danger button. */
.meer-sheet-item--logout .meer-sheet-item-label {
    color: var(--color-accent-amber, #d4a017);
}

/* Beheer-availability dot on the Meer tabbar icon. Informational
   ("there's depth here"), not a notification badge — small, no count,
   no animation. Positioned at top-right of the icon glyph. */
.mobile-tabbar-item {
    position: relative;
}
.mobile-tabbar-beheer-dot {
    position: absolute;
    top: 6px;
    /* Right offset places the dot over the icon's top-right corner
       across both 4-tab and 5-tab fill modes (icon is centered). */
    right: calc(50% - 14px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-amber, #d4a017);
    pointer-events: none;
}