/* EnvironmentBanner component styles — loaded as a plain static asset so they apply in all
   environments regardless of Blazor CSS isolation scope-attribute propagation. */

/* Same host-agnostic fix as the Task-app support widget's launcher (task/Task.Web/wwwroot/
   support/widget.js, 2026-08-04): a fixed-position element always paints above normal in-flow
   content, so it can permanently cover a real control that lands in its footprint — either
   because a target scrolled flush against the edge the banner anchors to, or because the page is
   short enough to never scroll at all. `*` (not `html`) because the actual scroll container
   varies by host app — some scroll `html`/`body` directly, others wrap content in their own
   `overflow-y:auto` region instead; scroll-padding is a no-op on elements that aren't scroll
   containers, so applying it broadly reaches whichever one the host actually uses. Both
   scroll-padding-top and scroll-padding-bottom are reserved unconditionally since the banner
   flips between the two anchors at the 480px breakpoint below — harmless extra headroom on the
   edge it isn't currently pinned to. ~110px covers the worst case (banner wrapped to 3 lines at a
   narrow width) with room to spare; confirmed live against FoodibleWeb.PlaywrightTests
   (SuperAdminTests.Company_FullLifecycle_CreateTypesMembersDeactivate [iPhone13] — the "Reset
   password" icon button was landing under `.eb-close` after a fresh navigation re-rendered the
   banner mid-test, before its 30s auto-dismiss). */
* {
    scroll-padding-top: 110px;
    scroll-padding-bottom: 110px;
}

.eb-banner {
    position: fixed;
    top: 12px;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    max-width: min(560px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    color: #78350f;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    padding: 10px 12px 10px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    /* This banner floats at a fixed viewport position without reserving layout space, so on a narrow
       viewport it can visually land directly over whatever page content happens to render there (e.g. a
       location-picker button or a "switch store" control near the top of a short page) and silently eat
       its clicks. Only the banner's own interactive children should capture pointer events - everything
       else passes through to the real page content underneath. */
    pointer-events: none;
}

.eb-text {
    flex: 1;
}

.eb-text a {
    color: #78350f;
    font-weight: 600;
    text-decoration: underline;
    pointer-events: auto;
}

.eb-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px meets common touch-target guidance (iOS HIG / WCAG 2.5.5). */
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: #78350f;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    margin: -8px -4px -8px 0;
    opacity: 0.7;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto;
}

.eb-close:hover {
    opacity: 1;
}

@media (max-width: 480px) {
    .eb-banner {
        max-width: calc(100vw - 24px);
        font-size: 13px;
        /* Anchor to the BOTTOM on phones. At 390px the banner wraps to two or three lines and, pinned
           12px from the top, it lands squarely over the app bar and the first row of page content —
           exactly where primary controls live. The container is already pointer-events:none, but
           `.eb-text a` legitimately re-enables them, and that link then silently swallows taps on the
           control underneath it. Measured on vrp 2026-08-04: the Ticker page's watchlist star at
           (243,63) hit-tested to the banner's own <a>, so the star was untappable at 390px and two
           Playwright tests had to be marked [KnownMobileGap] for a defect that was never vrp's.
           This banner only renders when EnvironmentBanner:Message is set (dev/QA), so it never
           affected real users — but it silently broke phone-viewport tests in every app using it. */
        top: auto;
        bottom: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
}