/* App-menu.css — menu-item ("tab look") styling (global, non-isolated).
   CmpMenuTabs.razor (which renders the actual <nav class="top-tabs">) has no .razor.css of
   its own, so Blazor's CSS-isolation scope attribute never applies to it — a scoped copy of
   these rules elsewhere (e.g. an old MainLayout.razor.css version) is dead code that silently
   never matches (this bit us once already).

   IMPORTANT: FSCommon.Blazor/wwwroot/css/app-components.css (the shared stylesheet used by
   every app) ALSO carries its own .top-tabs / nav.top-tabs a.tab-link rules — apparently
   inherited from DBQ's own nav-tabs when that file was centralized. Its rules use !important
   and a more specific `nav.top-tabs a.tab-link` selector, so they win over anything declared
   here with lower specificity/no !important — and since CSS cascades per-declaration (not per
   rule), even a single property left undeclared here (e.g. `flex`) lets the shared file's
   value silently show through. Every rule below intentionally matches or exceeds that
   selector's specificity, with !important, so ETS's own look doesn't depend on the shared
   file's unrelated values. This duplication is worth resolving properly later (flagging to
   the user rather than editing the shared file blind, since it may affect DBQ/MyMenu too). */

/* CmpMenuTabs.razor.css consumes --selected-tab-background/--selected-tab-border directly
   (BaseTheme.Tab.SelectedTab, the shared tab color family, 2026-08-19) — this used to alias them
   into local --tab-bg-active/--tab-border names, which is redundant now that the real variables
   already carry the right meaning on their own. */

/* Make the header divider match the tab outline */
header {
    border-bottom: 1px solid var(--selected-tab-border)
}

/* Container that holds the NavLink tabs — left edge of the menu bar, sized to its own
   content (sits between the logo and .top-controls, which pushes itself right instead).
   flex: none !important is required — without it, the shared file's `.top-tabs { flex: 1 1
   auto }` (a property this rule would otherwise leave undeclared) makes the tabs grow to
   fill all available header space instead of hugging their own content. */
.top-tabs {
    display: flex !important;
    align-items: flex-end !important;
    /* Tightened from 24px/0 14px - explicit request, 2026-08-13: "move the menu items to the
       left a little to buy some space" so .top-controls (username/bell) has more room on the
       right before it gets pushed off-screen on narrower viewports. */
    gap: 16px !important;
    padding: 0 8px !important;
    flex: none !important;
    overflow: visible !important;
}

/* Base tab look — selector matches (nav.top-tabs a.tab-link, ...) the shared file's
   specificity so these declarations aren't silently overridden by it. */
nav.top-tabs a.tab-link,
nav.top-tabs a.tab-link:link,
nav.top-tabs a.tab-link:visited {
    font-family: Calibri, "Segoe UI", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #2B2B2B !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 6px 20px !important;
    border: 1px solid transparent !important; /* becomes visible on hover/active */
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    line-height: 1.1 !important;
    position: relative !important;
    background: transparent !important;
}

    /* Hover for inactive tabs */
    nav.top-tabs a.tab-link:hover {
        color: #111 !important;
        background: #F4F6FA !important;
        border-color: var(--tab-hover-border) !important;
    }

    /* Active/selected tab */
    nav.top-tabs a.tab-link.active {
        color: #000 !important;
        background: var(--selected-tab-background) !important;
        border-color: var(--selected-tab-border) !important;
        border-bottom-color: transparent !important; /* visually connect to content area */
        margin-bottom: -1px !important;
        z-index: 1 !important;
    }

        nav.top-tabs a.tab-link.active:hover {
            background: var(--selected-tab-background) !important;
        }

    /* Kill the shared file's own active-tab pill (app-components.css .active::after) — it's a
       second, unrelated "pill" pseudo-element positioned with a hardcoded left:-26px/right:-26px
       offset (so it's always content-width + a fixed 52px, same oversized shape for every tab
       regardless of label length) that renders on top of/behind the real .active box above.
       Since that rule only sets `content`, `position`, etc. on ::after — never touched by
       anything in this file — it leaks straight through unopposed. Suppressing content here is
       enough to remove the whole pseudo-element. */
    nav.top-tabs a.tab-link.active::after {
        content: none !important;
    }

    /* Focus ring for keyboard nav — excludes .active because the active tab already has its
       own background/border treatment above. Without :not(.active), clicking a tab leaves it
       both active AND focused, drawing the active box (rounded top corners only, extended
       past the header's bottom border to merge with the page) and this outline (a plain
       offset rectangle around the un-merged box) at the same time — two differently-shaped
       highlights that visibly don't match. */
    nav.top-tabs a.tab-link:focus:not(.active) {
        outline: 2px solid var(--tab-hover-border) !important;
        outline-offset: 2px !important;
    }