/* === Layout: app bar + drawer + main content === */
.logged-in-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: transparent;
}

.logged-in-appbar {
    width: 100%;
    flex-shrink: 0;
    min-height: 64px;
    height: 64px;
    overflow: visible !important;
    z-index: 1300;
}

.logged-in-appbar.mud-appbar {
    overflow: visible !important;
}

.logged-in-appbar .mud-toolbar {
    overflow: visible !important;
}

/* Trial chip in the AppBar (replaces the old full-width TrialBanner). Sits
   immediately to the left of the topbar greeting and only renders while the
   customer is on trial (Soft) or hard-locked. Click navigates to the
   subscription tab so the user can convert to paid. The button is styled as
   a pill so it reads as actionable but doesn't compete with the brand wordmark
   on the left. */
.trial-appbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    /* Sit just above the gradient AppBar so the box-shadow lifts it visually
       without painting over the surrounding chrome. */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.trial-appbar-chip:hover,
.trial-appbar-chip:focus-visible {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.55);
    outline: none;
    transform: translateY(-1px);
}

.trial-appbar-chip__icon {
    color: rgba(255, 255, 255, 0.92);
}

/* Hard-locked variant — red accent so an expired trial reads as urgent, but
   still inside the AppBar (not a full-width bar) so it doesn't dominate the
   page. The hover state leans into the red so the "do something about this"
   intent is unmistakable. */
.trial-appbar-chip--hard {
    background: rgba(220, 53, 69, 0.18);
    border-color: rgba(255, 200, 200, 0.65);
    color: #ffe3e3;
}

.trial-appbar-chip--hard:hover,
.trial-appbar-chip--hard:focus-visible {
    background: rgba(220, 53, 69, 0.30);
    border-color: rgba(255, 220, 220, 0.85);
    color: #fff;
}

.trial-appbar-chip--hard .trial-appbar-chip__icon {
    color: #ffd5d5;
}

@media (max-width: 640px) {
    /* On phones the AppBar is tight — drop the day-count to keep just the
       icon + "Trial" word, but leave the click target full-size. */
    .trial-appbar-chip__label {
        font-size: 0.78rem;
    }
}

.topbar-greeting {
    font-size: 1.12rem;
    font-weight: 500;
    color: white;
    opacity: 0.98;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ────────────────────────────────────────────────────────────────────
   Sidebar notice — page-scoped pill in the drawer, sitting in the gap
   between the nav items and the PLO/logout block.

   Layout contract (when a notice is present):
   • Nav items, PLO, and logout render at their natural height — never
     scrollable, never compressed (overrides below using :has()).
   • The notice host claims whatever vertical space is LEFT OVER and
     scrolls INTERNALLY if its content exceeds that gap.
   • The pill itself sits at the TOP of the host so that scrolling
     reveals more text downward, the X stays in the corner, and short
     notices don't leave an awkward blank gap between nav and PLO.
   ──────────────────────────────────────────────────────────────────── */
.sidebar-notice-host {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    /* Centre the pill vertically in whatever leftover gap exists
       between the nav items and PLO. If the message is short the
       pill sits in the middle of the airy gap; if it's long it just
       fills naturally and the host's overflow-y handles any spillover. */
    align-items: center;
    justify-content: stretch;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-notice-host-expanded {
    padding: 6px 0;
}

.sidebar-notice-host-collapsed {
    align-items: center;
    justify-content: center;
    padding: 6px 0;
}

.sidebar-notice-host > .sidebar-notice {
    width: 100%;
}

.sidebar-notice-host-collapsed > .sidebar-notice {
    width: auto;
}

/* When a notice is present, lock nav, PLO and logout to their natural
   heights so they remain fully visible and don't gain an internal
   scrollbar. The notice host is the only flexible/scrolling element.
   :has() is supported in all evergreen browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+, Edge 105+). */
.drawer-content:has(.sidebar-notice-host) .drawer-nav-scroll {
    flex: 0 0 auto;
    max-height: none;
    overflow-y: visible;
}

.drawer-content:has(.sidebar-notice-host) .plo-section {
    flex: 0 0 auto;
    max-height: none;
    overflow-y: visible;
}

.sidebar-notice {
    position: relative;
    margin: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(122, 134, 168, 0.22);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(52, 56, 78, 0.06);
    color: #34384E;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: sidebar-notice-fade-in 180ms ease-out;
}

.sidebar-notice-expanded {
    /* Symmetric padding — text flows the full width of the pill on
       every line. The close X is absolutely positioned in the top-
       right corner and just overlays the text rather than reserving
       horizontal space, so it adds no vertical or horizontal layout
       cost. */
    padding: 6px 12px;
}

.sidebar-notice-collapsed {
    margin: 0 auto;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* Message text fills the pill (icon dropped from expanded view to
   reclaim horizontal space — severity is conveyed by the left-edge
   accent and the close X marks it as dismissable). */
.sidebar-notice-content {
    display: block;
}

.sidebar-notice-text {
    font-size: 0.78rem;
    line-height: 1.4;
    color: #34384E;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-notice-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #565C82;
    text-decoration: underline;
}

/* Close X anchored to the top-right corner of the pill — out of the
   text flow entirely so it doesn't dictate row height or steal width. */
.sidebar-notice-close {
    position: absolute;
    top: -1px;
    right: -1px;
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(52, 56, 78, 0.6);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.sidebar-notice-close:hover {
    background: rgba(52, 56, 78, 0.10);
    color: #34384E;
}

.sidebar-notice-close .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.sidebar-notice-collapsed-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #565C82;
}

/* Severity tints — soft tinted backgrounds + matching left-edge accent
   so each severity is recognisable even when the notice text wraps. */
.sidebar-notice-info {
    background: linear-gradient(180deg, rgba(82, 130, 255, 0.12), rgba(82, 130, 255, 0.05));
    border-left: 3px solid #5282FF;
}
.sidebar-notice-info .sidebar-notice-icon { color: #3F66CC; }

.sidebar-notice-warning {
    background: linear-gradient(180deg, rgba(255, 175, 60, 0.14), rgba(255, 175, 60, 0.05));
    border-left: 3px solid #FFAF3C;
}
.sidebar-notice-warning .sidebar-notice-icon { color: #B8762A; }

.sidebar-notice-error {
    background: linear-gradient(180deg, rgba(232, 92, 92, 0.14), rgba(232, 92, 92, 0.05));
    border-left: 3px solid #E85C5C;
}
.sidebar-notice-error .sidebar-notice-icon { color: #B73E3E; }

.sidebar-notice-success {
    background: linear-gradient(180deg, rgba(82, 198, 132, 0.14), rgba(82, 198, 132, 0.05));
    border-left: 3px solid #52C684;
}
.sidebar-notice-success .sidebar-notice-icon { color: #2F8456; }

@keyframes sidebar-notice-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.logged-in-body {
    flex: 1;
    min-height: 0;
    background: transparent;
    position: relative;
    overflow: visible !important;
}

/* Prevent drawer from being hidden under the top bar; ensure no padding so nav items can be full width */
.logged-in-layout .mud-drawer {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
    overflow: visible !important;
}

/* Smooth mini-drawer expand/collapse: animate width, but stagger the nav
   text fade-in so labels never appear inside a still-growing drawer.
   Phase 1 (0-220ms): drawer width slides 80px <-> ~240px.
   Phase 2 (220-380ms): nav labels fade in (only when expanding).
   Phase 3 (collapse): labels are hidden immediately via display: none in
   .drawer-collapsed (already defined above), then the drawer width
   slides shut without any text-disappear flicker. */
.logged-in-layout .mud-drawer,
.logged-in-layout .mud-drawer-mini,
.logged-in-layout .mud-drawer-mini-l,
.logged-in-layout .mud-drawer-mini-r,
.logged-in-layout .mud-drawer .mud-drawer-content {
    transition: width 220ms ease !important;
}

@keyframes drawer-text-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drawer-expanded .mud-nav-link-text,
.drawer-expanded .mud-nav-link .mud-typography,
.drawer-expanded .drawer-group-title,
.drawer-expanded .drawer-nav-action-text,
.drawer-expanded .plo-header,
.drawer-expanded .plo-body {
    animation: drawer-text-fade-in 160ms ease 220ms both;
}

.logged-in-layout .mud-drawer .mud-drawer-content,
.logged-in-layout .mud-drawer .mud-drawer-content * {
    box-sizing: border-box !important;
}

.logged-in-layout .mud-drawer .mud-drawer-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    position: relative;
    padding: 0 !important;
}

.drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.drawer-nav-scroll {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 70%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 28px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Spacer between the nav links and the PLO section.
   flex: 1 absorbs all leftover vertical space so the PLO sits pinned to the
   bottom (above Logout) and grows upward as more items are added. */
.plo-spacer {
    flex: 1 1 auto;
    min-height: 0;
}

.drawer-content .mud-nav-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
}

.drawer-nav-scroll .mud-nav-menu > *:first-child {
    margin-top: 0 !important;
}

.drawer-content .mud-nav-menu > *,
.drawer-nav-scroll .mud-nav-menu > * {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Group links container (Practice Groups, Doctors, etc.) */
.drawer-nav-group-links {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

.drawer-nav-group-links > * {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Drawer groups and tooltip wrappers: full width so nav items stack vertically */
.drawer-group {
    width: 100%;
    margin-top: 0 !important;
}

.drawer-nav-scroll .mud-tooltip {
    display: block !important;
    width: 100% !important;
}

/* Same as PSR: tooltips inside drawer-nav-bottom-items are full width */
.drawer-nav-scroll .mud-tooltip {
    display: block !important;
    width: 100% !important;
}

.drawer-nav-bottom-items {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.drawer-nav-bottom-items .mud-tooltip {
    display: block !important;
    width: 100% !important;
}

/* Single structure: hide text when collapsed so no squashing; same DOM = no icon jump */
.drawer-collapsed .drawer-group-title,
.drawer-collapsed .mud-nav-link-text,
.drawer-collapsed .drawer-nav-action-text,
.drawer-collapsed .mud-nav-link .mud-typography {
    display: none !important;
}

/* Collapsed mode: center every icon in the 80px drawer width.
   Expanded mode keeps the asymmetric 26px-left / 16px-right padding so the
   icon-then-text layout aligns with the section labels. */
.drawer-collapsed .drawer-content .mud-nav-link,
.drawer-collapsed .drawer-content .drawer-nav-action,
.drawer-collapsed .drawer-content .drawer-group-header,
.drawer-collapsed .drawer-content .plo-collapsed-hint {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
}

.drawer-collapsed .drawer-content .mud-nav-link .mud-nav-link-icon,
.drawer-collapsed .drawer-content .drawer-nav-action .mud-nav-link-icon,
.drawer-collapsed .drawer-content .drawer-group-header .mud-nav-link-icon,
.drawer-collapsed .drawer-content .plo-collapsed-hint .mud-nav-link-icon,
.drawer-collapsed .drawer-content .plo-collapsed-hint .mud-icon-root {
    margin: 0 auto;
}

/* Group header: one row in expanded (icon + title + chevron), stacked in collapsed (icon + chevron).

   Left padding is 26px (NOT the symmetric 16px) so the group-header icon
   (Administration / Accounts & Billing) shares a vertical column with the
   regular `.mud-nav-link` icons below it (those carry
   `padding: 10px 16px 10px 26px !important;` further down this file).
   Without the explicit left bump these buttons rendered ~10px further
   left than the rest of the nav, producing a noticeable jog in the
   icon column. The `.drawer-collapsed .drawer-group-header` override
   below resets to symmetric padding for the collapsed-drawer state
   where icons are centred and column alignment is irrelevant. */
.drawer-group-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 16px 0 26px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    text-align: left;
    box-sizing: border-box;
}

.drawer-group-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

.drawer-group-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: 600;
}

.drawer-collapsed .drawer-group-header {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 12px 16px;
}

.drawer-group-chevron {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Nav links: same padding; sub-items keep normal weight */
.drawer-content .mud-nav-link {
    justify-content: flex-start !important;
    padding: 10px 16px 10px 26px !important;
    min-height: 44px !important;
    height: 44px !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Main-level nav links (Home, PSR): bold text via custom class - MudNavLink wraps content in div.mud-nav-link-text */
.drawer-content .drawer-nav-main-link {
    gap: 16px !important;
    font-weight: 600 !important;
}

.drawer-content .drawer-nav-main-link .mud-nav-link-text,
.drawer-content .drawer-nav-main-link .mud-nav-link-text *,
.drawer-content .drawer-nav-main-link .mud-typography,
.drawer-content .drawer-nav-main-link [class*="mud-typography"] {
    font-weight: 600 !important;
}

/* Notification nav: slightly larger icon */
.ntf-nav-badge-wrap .mud-nav-link-icon {
    font-size: 1.6rem !important;
}

.ntf-nav-badge-wrap {
    position: relative;
}

.ntf-nav-count {
    position: absolute;
    top: 5px;
    left: 38px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #E53935;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Inactive nav: matches the lighter (left) end of the logged-in app bar gradient (#565C82 -> #34384E) */
.drawer-content .mud-nav-link-icon,
.drawer-content .drawer-group-header .mud-nav-link-icon,
.drawer-content .drawer-group-chevron,
.drawer-content .drawer-nav-action .mud-nav-link-icon {
    color: #565C82 !important;
}

.drawer-content .mud-nav-link,
.drawer-content .mud-nav-link .mud-nav-link-text,
.drawer-content .mud-nav-link .mud-typography,
.drawer-content .drawer-group-title,
.drawer-content .drawer-nav-action,
.drawer-content .drawer-nav-action-text {
    color: #565C82 !important;
}

/* Active page highlight: matches the darker (right) end of the gradient */
.drawer-content .mud-nav-link.active {
    background: rgba(52, 56, 78, 0.12) !important;
    color: #34384E !important;
    border-right: 3px solid #34384E;
}

.drawer-content .mud-nav-link.active:hover {
    background: rgba(52, 56, 78, 0.18) !important;
}

.drawer-content .mud-nav-link.active .mud-nav-link-icon {
    color: #34384E !important;
}

.drawer-content .mud-nav-link.active .mud-nav-link-text,
.drawer-content .mud-nav-link.active .mud-typography {
    color: #34384E !important;
}

/* Indent only the text of sub-items under headings */
.drawer-nav-group-links .mud-nav-link .mud-nav-link-text,
.drawer-nav-group-links .mud-nav-link .mud-typography {
    padding-left: 8px;
}

/* Expandable group content (MudCollapse) */
.drawer-group-collapse {
    overflow: hidden !important;
}

.drawer-group-collapse .mud-collapse-wrapper,
.drawer-group-collapse .mud-collapse-inner {
    overflow: hidden;
}

.drawer-group-collapse.mud-collapse-entered .mud-collapse-wrapper,
.drawer-group-collapse .mud-collapse-entered {
    overflow: visible;
}

.drawer-group-collapse .mud-nav-menu {
    flex-direction: column;
    width: 100%;
}

.drawer-group-collapse .mud-tooltip {
    display: block !important;
    width: 100% !important;
}

/* === Bottom items (PSR, Logout, Dark Mode) - gap 12px to align text with main headings === */
.drawer-nav-action {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 26px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    gap: 16px;
    min-height: 48px;
    height: 48px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-weight: 600;
}

.drawer-nav-action .drawer-nav-action-text {
    font-weight: 600;
}

.drawer-nav-action:hover {
    background: rgba(0, 0, 0, 0.04);
}

.drawer-nav-action .mud-nav-link-icon {
    flex-shrink: 0;
}

/* === Pinned bottom bar: logout only ===
   Background matches the lighter (left) end of the top app-bar
   gradient (#565C82) so the drawer reads as a single branded
   surface bookended by the same colour. Icon + label are forced
   to white so they stay legible against the dark fill, overriding
   the #565C82 colour used by drawer-content nav rows. */
.drawer-bottom-bar {
    flex-shrink: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    width: 100%;
    background: #565C82;
}

.drawer-bottom-bar .mud-tooltip-root,
.drawer-bottom-bar .mud-tooltip {
    display: block !important;
    width: 100% !important;
}

.drawer-bottom-bar .drawer-nav-action {
    width: 100% !important;
    box-sizing: border-box !important;
}

.drawer-bottom-bar .drawer-nav-action,
.drawer-bottom-bar .drawer-nav-action-text,
.drawer-bottom-bar .drawer-nav-action .mud-nav-link-icon {
    color: #FFFFFF !important;
}

.drawer-bottom-bar .drawer-nav-action:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* === Floating edge toggle button === */
.drawer-edge-toggle {
    position: absolute;
    bottom: 6px;
    right: -18px;
    z-index: 10;
}

/* Circular expand/collapse button */
.drawer-toggle-btn {
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
    border: 1px solid rgba(0, 0, 0, 0.22) !important;
}

.drawer-toggle-btn .mud-icon-root {
    font-size: 1.5rem !important;
}

.drawer-toggle-btn--collapsed {
    background: rgba(52, 56, 78, 0.9) !important;
    color: #fff !important;
}

.drawer-toggle-btn--collapsed:hover {
    background: rgba(52, 56, 78, 1) !important;
}

.drawer-toggle-btn--expanded {
    background: rgba(232, 232, 232, 0.95) !important;
    color: #34384E !important;
}

.drawer-toggle-btn--expanded:hover {
    background: rgba(220, 220, 220, 0.95) !important;
}

/* === Main content area ===
   The logged-in portal is intentionally NOT fully responsive. Pages are
   designed for a 1920×1080 desktop and contain dense charts, tables, and
   side-by-side panels that don't gracefully reflow below ~1400 px of
   content width. Rather than letting flex shrink the main column past
   that point and produce the "smashing up and jumbling" the public
   audit flagged, we lock `.logged-in-main` to a hard
   `min-width: var(--gpc-portal-min-content)` (1400 px). When the user's
   viewport is narrower than `1400 px + drawer width`, the horizontal
   scrollbar appears at the document level — the layout stays intact and
   the user pans across to see off-screen content. The ViewportGate
   component (Components/Shared/ViewportGate.razor) shows a soft warning
   below 1280 px so the experience is signposted, not just silently
   wide.

   The previous `min-width: 0` was a flex-child fix that allowed the
   column to shrink below content size; we want the opposite contract
   here, so it's replaced wholesale. */
.logged-in-main {
    flex: 1;
    min-width: var(--gpc-portal-min-content);
    overflow: visible;
    background: transparent;
    min-height: calc(100vh - 64px);
}

.logged-in-main.mud-main-content {
    overflow: visible !important;
}

.logged-in-body .mud-layout,
.logged-in-body.mud-layout {
    overflow: visible !important;
}

/* The outer .logged-in-layout wraps the AppBar + MudLayout (drawer +
   main). When the viewport is narrower than the drawer + main content
   width, allow horizontal scroll at the layout level so the locked
   1400 px main column can be scrolled into view. The vertical scroll
   is handled by MudMainContent / page content, not here. */
.logged-in-layout {
    overflow-x: auto;
}

.mud-popover-provider {
    z-index: 9999 !important;
}

/* Pull page headings up slightly. (Right padding override removed — pages
   that need a custom right-padding value set it via their own page CSS,
   e.g. .dashboard-page-container-volume in consult-volume-data.css.) */
.logged-in-main .mud-container {
    padding-top: 34px !important;
}

/* Many pages start with a MudGrid using mt-4; reduce that spacing a bit (don't remove completely) */
.logged-in-main .mud-container > .mud-grid.mt-4 {
    margin-top: 0.25rem !important;
}

/* === Tooltips (nav + headings) === */
.mud-tooltip-content,
.mud-popover-content .mud-paper,
.mud-tooltip .mud-paper {
    background: rgba(252, 252, 252, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* === App bar logo === */
.logged-in-appbar .logo-image {
    height: 88px;
    position: relative;
    z-index: 1301;
    margin-top: 32px;
}

.logged-in-appbar .logo-text {
    margin-left: 20px;
    font-size: 1.3rem;
    font-weight: 500;
    color: white;
}

/* === Page Level Operations (PLO) section ===
   Anchored to the bottom of the drawer (above the pinned Logout bar).
   Sizes to its content with flex: 0 1 auto, then grows upward as more items
   are added because .plo-spacer above it absorbs the remaining vertical space.
   Capped at 60% so a very long PLO content list cannot crush the nav. */
.plo-section {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 60%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.plo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 6px 26px;
}

.plo-header-icon {
    color: #34384E !important;
    font-size: 1.4rem !important;
    flex-shrink: 0;
    width: 24px;
    display: inline-flex;
    justify-content: center;
}

.plo-header-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #565C82;
    white-space: nowrap;
    overflow: hidden;
}

.plo-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 8px 0;
}

.plo-body .mud-input-control {
    width: 100%;
}

.plo-select-wrap {
    padding: 0 16px 0 26px;
    width: 100%;
    box-sizing: border-box;
}

.plo-select-wrap .mud-select {
    width: 100%;
}

/* Bump up the height of the outlined dense MudSelect inside the PLO body
   so the filter boxes feel less cramped than the MudBlazor "dense" default. */
.plo-select-wrap .mud-input-control .mud-input-slot {
    min-height: 48px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.plo-select-wrap .mud-input-control .mud-input-slot input,
.plo-select-wrap .mud-input-control .mud-input-slot .mud-select-input,
.plo-select-wrap .mud-input-slot input,
.plo-select-wrap .mud-select .mud-input-root,
.plo-select-wrap .mud-select-input {
    height: auto;
    min-height: 24px;
    font-size: 0.82rem !important;
}

/* ── PLO outlined-label position ──────────────────────────────────────
   Every page that pushes content into the layout's PLO drawer renders
   labels in the same place: a small caption pinned to the top-right of
   the outlined notch, sitting on top of the border line. This block
   replaces the JS helper (window.applyPloLabelRight) that previously
   set these styles imperatively on Dashboard / Dashboard2 only — pure
   CSS means newly-added PLO-using pages (PSR Insights, future pages)
   get the same look without a JS interop call.

   `!important` is required because MudBlazor inlines the label
   transform on every render based on shrink/focus/filled state. We
   collapse all those states into one fixed top-right position because
   the PLO selects always carry an "All X" default value, so the
   placeholder-inside-the-input state is never shown. */
.plo-select-wrap .mud-input-control .mud-input-label-outlined,
.plo-select-wrap .mud-input-control .mud-input-label-outlined.mud-input-label-shrink,
.plo-select-wrap .mud-input-control .mud-input-label-outlined.mud-input-label-inputfocused,
.plo-select-wrap .mud-input-control .mud-input-label-outlined.mud-input-label-filled {
    left: auto !important;
    right: 12px !important;
    transform-origin: top right !important;
    transform: translate(0px, -9px) scale(0.75) !important;
    background-color: #ffffff;
    padding: 0 4px;
    z-index: 1;
}

/* Right-align the fieldset legend so the notch the outline cuts for
   the floating label sits on the right too — without this the notch
   stays on the left and the (now right-pinned) label hovers over an
   uninterrupted border line instead of the notch. */
.plo-select-wrap .mud-input-control fieldset.mud-input-outlined-border {
    text-align: right;
}

.plo-select-wrap .mud-input-control fieldset.mud-input-outlined-border legend {
    margin-left: auto;
    margin-right: 8px;
}

.plo-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0;
    padding: 4px 16px 6px 26px;
}

/* Match the MudNavLink box model so the collapsed PLO hint sits flush with
   the nav-link icons above it (both span full drawer width and centre their
   icon when the drawer is collapsed). */
.plo-collapsed-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px 12px 26px;
    cursor: pointer;
    min-height: 48px;
    height: 48px;
    color: #34384E;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.plo-collapsed-hint:hover {
    background: rgba(52, 56, 78, 0.08);
}

.plo-collapsed-hint .mud-nav-link-icon {
    color: #34384E !important;
}

/* === ViewportGate banner ===========================================
   Soft advisory pill that ViewportGate.razor renders above @Body when
   the viewport is below --gpc-portal-banner-threshold. Sits inside the
   locked .logged-in-main column so it scrolls horizontally with the
   rest of the page; we don't want it stuck in the viewport because
   that would compete with the AppBar trial chip and the page's own
   sticky chrome.

   Visual tone is deliberately quiet:
     • Soft indigo-tinted background so it reads as informational, not
       alarming (the page still works, scrolling is the fix).
     • Single line of body copy, an icon, and a close button.
     • No sticky positioning — it occupies its own row in the document
       flow at the very top of the main column. */
.viewport-gate-banner {
    /* Pin to the locked content min-width so the banner spans the full
       desktop layout rather than growing with the viewport. The
       horizontal scroll on the document brings the rest of the banner
       into view alongside the page content; sliding the banner with
       the page (rather than stuck at left:0) keeps it spatially
       associated with the content the user is currently looking at. */
    width: 100%;
    min-width: var(--gpc-portal-min-content);
    box-sizing: border-box;
    margin: 0;
    padding: 10px 24px;
    background: var(--gpc-indigo-soft-strong);
    border-bottom: 1px solid var(--gpc-indigo-line);
    color: var(--gpc-text);
    font-size: 0.85rem;
    line-height: 1.45;
}

.viewport-gate-banner__content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.viewport-gate-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--gpc-indigo-soft);
    color: var(--gpc-indigo);
    flex-shrink: 0;
}

.viewport-gate-banner__icon .mud-icon-root {
    color: inherit;
}

.viewport-gate-banner__text {
    flex: 1 1 auto;
}

.viewport-gate-banner__text strong {
    font-weight: 700;
    color: var(--gpc-text);
    margin-right: 6px;
}

.viewport-gate-banner__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--gpc-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}

.viewport-gate-banner__close:hover,
.viewport-gate-banner__close:focus-visible {
    background: var(--gpc-indigo-soft);
    color: var(--gpc-indigo);
    outline: none;
}

/* === Public-marketing AppBar logo responsive breakpoints ============
   These rules only apply to the public site's AppBar (.logged-in-appbar
   IS the logged-in surface, but the rules below were originally written
   in this file for compatibility with both surfaces). With the portal
   shell now locked to a 1400 px content min, the @media (max-width:
   ...) rules NEVER fire on the logged-in side — viewport widths under
   the breakpoints can still occur but the column itself is locked, so
   shrinking the logo would just decouple the appbar styling from the
   rest of the locked desktop layout. They stay in place because the
   public MainLayout shares some of the same selectors and DOES need
   responsive logo handling; on the logged-in side they're effectively
   dead code (the locked min-width keeps everything at desktop). */
@media (max-width: 960px) {
    .logged-in-appbar .logo-image {
        height: 80px;
        margin-top: 44px;
    }

    .logged-in-appbar .logo-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 600px) {
    .logged-in-appbar .logo-image {
        height: 68px;
        margin-top: 36px;
    }

    .logged-in-appbar .logo-text {
        font-size: 1rem;
    }
}