/* ── Shared page shell ────────────────────────────────────────────────
   Common structural rules for "list-style" pages whose chrome is owned
   by the LoggedInLayout (browser/sidebar title, drawer-hosted Page
   Options, no in-page header strip).

   Usage:
     <MudContainer MaxWidth="MaxWidth.ExtraLarge"
                   Class="pa-4 gpc-page-container">
         <div class="gpc-content-shell">
             <div class="gpc-list-wrap">
                 …expansion panels / cards / table…
             </div>
         </div>
     </MudContainer>

   Filters / actions belong in the layout drawer's PLO slot via
   SetPloContent + .plo-select-wrap / .plo-actions-row.

   Pages that need bespoke tweaks add their own .${page}-page-container
   class alongside .gpc-page-container; the per-page sheet only carries
   the differences. */

.logged-in-main .mud-container.gpc-page-container {
    /* Match the PSR Case Insights *rendered* gutter (44 px). PSR's CSS
       class says 28 px, but the page also carries an inline
       `padding-left/right: 44px !important` override on its
       MudContainer — so the on-screen gutter is 44 px. List-style
       pages adopting this shell need the same 44 px so the first tab
       (or first list row) sits at the same horizontal position as it
       does on PSR. */
    padding-left: 44px !important;
    padding-right: 44px !important;
    padding-top: 24px !important;
    /* Anchor the page container to the same desktop minimum the rest
       of the portal uses (.logged-in-main is also locked to this, see
       layouts/logged-in.css). When the user's viewport is narrower
       than this, the page renders at full desktop width and the
       document scrolls horizontally — never reflowing inside the
       container. */
    min-width: var(--gpc-portal-min-content);
}

/* Content shell is a TRANSPARENT, FULL-WIDTH passthrough — same as
   PSR's .psr-content-shell. The shell never carries its own width
   constraint because the tab strip baseline must run the full
   container width (matching PSR). Inner elements that need to be
   narrower (tab panels, list wrap) constrain themselves. */
.gpc-content-shell {
    width: 100%;
}

/* Transparent list region constrained to 90 % of the container with
   a 1400 px ceiling — same horizontal extent as the tab panels
   (.gpc-tab-shell .mud-tabs-panels) so tabbed and non-tabbed pages
   line up edge-for-edge. The width lives on the list wrap (not on
   .gpc-content-shell) so non-tabbed pages get a 90 % content rail
   without affecting any tab strip above it. */
.gpc-list-wrap {
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 160px;
    width: 90%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.gpc-list-wrap .mud-expansion-panels {
    box-shadow: none !important;
}

/* Drawer-hosted bulk-action buttons (Mark all / Delete all etc.).
   Mirrors .plo-select-wrap's gutter so the buttons line up with the
   filter controls above them. */
.plo-button-wrap {
    padding: 4px 16px 0 26px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plo-button-wrap .mud-button-root {
    width: 100%;
    justify-content: flex-start;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.82rem;
}

/* Drawer-hosted text input (search box etc.). Same gutter as
   .plo-select-wrap so it sits flush with the filter selects above /
   below it. */
.plo-text-wrap {
    padding: 0 16px 0 26px;
    width: 100%;
    box-sizing: border-box;
}

/* MudTextField has no outer `.mud-select` wrapper that the select rule
   in logged-in.css uses to force 100 % width; without help its inner
   `.mud-input` (display: inline-flex) shrink-wraps to icon + a few
   characters, which is why a drawer-hosted search field collapses if
   you don't pin every layer. The selector chain below is the symmetric
   equivalent of `.plo-select-wrap .mud-select { width: 100% }`. */
.plo-text-wrap .mud-input,
.plo-text-wrap .mud-input-control,
.plo-text-wrap .mud-input-control .mud-input,
.plo-text-wrap .mud-input-control .mud-input-slot,
.plo-text-wrap .mud-input-control input {
    width: 100%;
}

.plo-text-wrap .mud-input-control .mud-input-slot input,
.plo-text-wrap .mud-input-control input {
    font-size: 0.82rem !important;
}

/* Lock the WHOLE control to 48 px, not just the outlined frame.
   Three layers must be pinned because MudBlazor's outlined input
   reserves vertical space at every one of them:

     .mud-input-control                       ← outer wrapper
       └ .mud-input-control-input-container   ← reserves room for a floating label above
           └ .mud-input.mud-input-outlined    ← the visible bordered box
       └ .mud-input-helper-text               ← always rendered, even when empty (~16 px tall)

   We pin HEIGHT (no min-height — same value, but visually unambiguous
   in DevTools) on the outer control AND the input-container, hide the
   always-rendered empty helper-text `<p>`, and let flex on the
   container stretch the outlined frame to fill 48 px. The result is
   a control whose total rendered height is exactly 48 px, identical
   to the .plo-select-wrap select underneath it.

   `box-sizing: border-box` is asserted with `!important` because
   logged-in.css's `.mud-drawer-content * { box-sizing: border-box !important }`
   already declares it for everything in the drawer — restating it
   here makes the intent self-documenting at the call site (you don't
   have to know about that catch-all to read this rule). */
.plo-text-wrap .mud-input-control,
.plo-text-wrap .mud-input-control .mud-input-control-input-container,
.plo-text-wrap .mud-input.mud-input-outlined {
    height: auto !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}

.plo-text-wrap .mud-input-control .mud-input-control-input-container {
    display: flex;
    align-items: stretch;
    padding: 0 !important;
}

.plo-text-wrap .mud-input.mud-input-outlined {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

/* The empty helper-text paragraph adds ~16 px under the outlined
   frame on every MudTextField. We never use the helper text in PLO
   search fields, so collapse it to zero. */
.plo-text-wrap .mud-input-control .mud-input-helper-text {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Zero every layer of vertical padding on the input itself so it
   sits centred in the 48 px frame instead of trying to add its own
   vertical padding (which would bulge the frame or clip the text).
   `height: 100%` makes the input fill the frame so the click target
   is the whole box, not just the text baseline. */
.plo-text-wrap .mud-input.mud-input-outlined input,
.plo-text-wrap .mud-input.mud-input-outlined .mud-input-slot {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}

/* Match the PLO right-aligned label / notch treatment used for selects
   so a search field's "Search" caption sits above the right edge of the
   outline — visually consistent with the filter labels above it. */
.plo-text-wrap .mud-input-control .mud-input-label-outlined,
.plo-text-wrap .mud-input-control .mud-input-label-outlined.mud-input-label-shrink,
.plo-text-wrap .mud-input-control .mud-input-label-outlined.mud-input-label-inputfocused,
.plo-text-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;
}

.plo-text-wrap .mud-input-control fieldset.mud-input-outlined-border {
    text-align: right;
}

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

/* ── Folder/card tabs ────────────────────────────────────────────────────
   Shared tab styling for any page that adds .gpc-tab-shell to its
   content shell. Tabs render as cards with rounded top corners that
   sit on a continuous horizontal baseline; the active tab "punches
   through" the baseline into the panel below — the classic folder-tab
   metaphor. PSR Case Insights, Support, and any future tabbed page
   share these rules so the tab strip is identical everywhere.

   Per-page overrides (e.g. PSR's locked 240px tab width to fit the
   "Compliance Markers" label) live in the page's own sheet and only
   carry the differences. */
.gpc-tab-shell .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0;
    /* Zero left padding so the baseline starts in line with the left
       edge of the first tab. */
    padding: 0;
    display: flex;
    gap: 2px;
    align-items: flex-end;
    /* Tabs are locked to 225 px each (see .gpc-tab-shell .mud-tab below).
       AccountSettings can render up to 9 SA tabs (= ~2025 px wide) which
       overflows the 1400 px content shell. Allow horizontal scroll on
       the tab strip itself so additional tabs become a sideways scroll
       rather than blowing up the whole page width. The scrollbar sits
       on the tab strip, not the page, which keeps the rest of the
       layout tidy. Hide the scrollbar visually but keep it functional
       (drag, wheel, keyboard). */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.gpc-tab-shell .mud-tabs-tabbar::-webkit-scrollbar {
    height: 6px;
}

.gpc-tab-shell .mud-tabs-tabbar::-webkit-scrollbar-thumb {
    background: rgba(86, 92, 130, 0.25);
    border-radius: 3px;
}

.gpc-tab-shell .mud-tabs-tabbar::-webkit-scrollbar-thumb:hover {
    background: rgba(86, 92, 130, 0.45);
}

.gpc-tab-shell .mud-tabs-tabbar .mud-tabs-tabbar-inner,
.gpc-tab-shell .mud-tabs-tabbar .mud-tabs-tabbar-content,
.gpc-tab-shell .mud-tabs-tabbar .mud-tabs-tabbar-wrapper {
    background: transparent !important;
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

.gpc-tab-shell .mud-tabs-tabbar .mud-tab {
    position: relative;
    /* Drop the tab 1px so its bottom edge overlaps the bar's baseline,
       letting the active tab's white background hide the line at its
       segment (creates the folder-tab "merge into content" look). */
    bottom: -1px;
    color: #64748B;
    opacity: 1;
    font-weight: 500;
    /* Very light grey border on top/left/right of inactive tabs so they
       read as cards sitting on the baseline (a bit lighter than the
       active tab's #E2E8F0). Bottom border stays transparent so the
       baseline runs visibly along the bottom of inactive tabs. */
    border: 1px solid #EEF2F6;
    border-bottom-color: transparent;
    border-radius: 8px 8px 0 0;
    padding: 11px 22px 12px;
    /* Tab dimensions locked to the rendered Compliance Markers tab on
       PSR Case Insights (218 × 49 px in DevTools). Held here as the
       single source of truth so every tabbed page in the portal
       renders identical-width tabs without per-page overrides.

       Why width/height + !important rather than min-width / flex-basis:
       MudBlazor's own `.mud-tab` rules carry enough specificity that a
       plain `flex: 0 0 240px` here was being beaten — the tab fell
       back to its content-driven size (~218 px on PSR). Pinning
       `width` / `height` with `!important` is the only reliable way
       to defeat the MudBlazor defaults at this layer of the cascade.

       If you change these values, change THEM HERE and only here. Do
       not add per-page overrides. */
    width: 225px !important;
    min-width: 225px !important;
    flex: 0 0 225px !important;
    height: 49px !important;
    min-height: 49px !important;
    box-sizing: border-box !important;
    text-transform: none;
    letter-spacing: 0.01em;
    background: transparent;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.gpc-tab-shell .mud-tabs-tabbar .mud-tab:hover:not(.mud-tab-active) {
    background: #F8FAFC;
    color: #34384E;
}

.gpc-tab-shell .mud-tabs-tabbar .mud-tab.mud-tab-active {
    background: #ffffff;
    color: #34384E;
    font-weight: 700;
    border-color: #E2E8F0;
    /* Bottom border same colour as panel bg so the baseline is "broken"
       at the active tab and the card visually fuses with the content. */
    border-bottom-color: #ffffff;
    /* 3px top accent in the lighter appbar colour (#565C82 — left side of
       the nav header gradient) rendered as inset shadow so it lives
       inside the rounded-corner border without altering layout. */
    box-shadow:
        inset 0 3px 0 0 #565C82,
        0 -1px 3px rgba(15, 23, 42, 0.04);
}

.gpc-tab-shell .mud-tabs-tabbar .mud-tab .mud-icon-root {
    color: inherit;
}

/* Default underline slider is replaced by the card's top accent. */
.gpc-tab-shell .mud-tab-slider {
    display: none !important;
}

/* Tabs container — pinned to 90% of the available shell width so all
   tab panels share the exact same horizontal extent. Without this,
   MudBlazor's flex layout lets each panel shrink-wrap its content,
   which makes panels read at different widths depending on whether
   their content fills the available room. The max-width cap keeps
   the page from getting unwieldy on ultrawide monitors. */
.gpc-tab-shell .mud-tabs-panels {
    width: 90%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Each tab panel's body fills 100% of the now-fixed panels container,
   so no tab's content can collapse below the agreed width. */
.gpc-tab-shell .mud-tabs-panels .mud-tabs-panels-wrapper,
.gpc-tab-shell .mud-tab-panel {
    width: 100%;
    max-width: 100%;
}

/* ── Tab strip vertical rhythm (shared across all gpc-tab-shell pages)
   Both the position of the tab strip itself AND the position of the
   tab content below it are owned by the shared sheet. Pages must
   render their <MudTabs> with NO per-page top-margin class (no
   "mt-2" / "mt-4") and place panel content as a direct child of
   <MudTabPanel> (no inner MudGrid / MudItem wrappers). The two
   rules below are the single source of truth.

   - 16 px above the tab strip — sits the strip a comfortable distance
     below the container's 24 px top padding without crowding it.
   - 16 px below the tab strip baseline — gives content room to
     breathe without feeling glued to the active tab.
*/
.gpc-tab-shell .mud-tabs {
    margin-top: 16px;
}

.gpc-tab-shell .mud-tab-panel {
    padding-top: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Platform disclaimer footer
   ─────────────────────────────────────────────────────────────────────────────

   Rendered by Components/Shared/PlatformDisclaimerFooter.razor. Sits at the
   bottom of in-product surfaces that could be misread as advisory or
   protective (Compliance Overview, PSR Case Insights). Mirrors clause 10.6
   of the Terms of Service v1.2 in plain English so the "this is not
   insurance" framing is present even for users who never open the EULA.

   Tone-wise the footer is deliberately quiet — it's a disclosure, not a
   warning. Muted grey, small caption type, single info icon. We don't
   want it to fight the page content for attention; we want it present
   and consistent so a later "you told me I was covered" claim is harder
   to mount.
*/
.gpc-platform-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 24px 0 8px;
    padding: 10px 14px;
    border-top: 1px solid #eee;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}

.gpc-platform-disclaimer__icon {
    color: #aaa;
    flex-shrink: 0;
    margin-top: 1px;
}

.gpc-platform-disclaimer__text {
    flex: 1 1 auto;
}

.gpc-platform-disclaimer__text a {
    color: #3F8E98;
    text-decoration: none;
}

.gpc-platform-disclaimer__text a:hover,
.gpc-platform-disclaimer__text a:focus {
    text-decoration: underline;
}