/* Custom styles for NXT Launchpad */
/* Build: 2026-04-04 - Mobile tile overlap fix, logo cropping fix, alignment fix */
/* v14 - fix title clipping on Transaction Volume, Billing Information, Licence Overview, Company Settings, InvoiceNow, Finance Console tiles 2026-04-13 */

/* ========================================
   Poppins — NXT4SAP primary brand typeface (2026-06-25)
   Self-hosted (CSP-safe, no external web-font fetch). TTFs live
   in webapp/css/fonts/ alongside this file, so the @font-face
   URLs resolve relative to style.css regardless of which path
   (root or namespace) the stylesheet is served from.
   Vendored from the NXT4SAP Design System (same 5 weights the
   CRM app self-hosts). Wired into --nxt-font-sans / --nxt-font-fiori
   below, replacing the SAP '72' / system fallback so the branded
   Home surfaces actually render in Poppins (DS Audit, Part 2).
   ======================================== */
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Poppins-Light.ttf')    format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Poppins-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Poppins-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Poppins-Bold.ttf')     format('truetype'); }

/* ========================================
   Ghost Image Prevention - CRITICAL
   Addresses UI5 view caching and improper cleanup
   ======================================== */

/* Force hardware acceleration and prevent rendering artifacts */
.sapMShell,
.sapMPage,
.sapUiView {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* NavContainer/App pages - only show the current page */
.sapMNavContainer > .sapMNavItem,
.sapMApp > .sapMNavItem {
    /* Hidden pages should be truly invisible */
    transition: opacity 0.15s ease-out !important;
}

/* Inactive pages in NavContainer (sap.m.App uses NavContainer internally)
   FIX 2026-01-28: Completely removed aggressive visibility rules that caused blank screen.
   UI5 NavContainer has its own sophisticated visibility management - we should not override it.
   The previous rules (.sapMNavItem:not(.sapMNavItemCenter/CenterMiddle)) broke initial load
   because these classes are only assigned AFTER navigation starts, not during first render.
   
   Let UI5 handle page visibility. For ghost image prevention, use transform/backface instead.
*/

/* Pages being animated/transitioning - hide the "from" page during animation
   FIX 2026-01-29: Target ONLY transitioning pages, not static pages or iframes.
   This prevents ghost images during navigation without breaking initial load.
   
   Key insight: .sapMNavItemSliding/.sapMNavItemFading are only added DURING transitions,
   so these rules won't affect initial page load or iframes in shell pages.
*/
.sapMNavItem.sapMNavItemSliding:not(.sapMNavItemCenter):not(.sapMNavItemCenterMiddle),
.sapMNavItem.sapMNavItemFading:not(.sapMNavItemCenter):not(.sapMNavItemCenterMiddle) {
    opacity: 0.01 !important;
    pointer-events: none !important;
}

/* Ensure UI5-managed hidden pages stay truly hidden */
.sapMNavItem.sapMNavItemHidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* After transition completes - let UI5 handle page visibility
   FIX 2026-01-28: REMOVED the aggressive rule that caused blank screen on initial load.
   
   The previous rule:
     .sapMNavItem:not(.sapMNavItemCenter) { opacity: 0 !important; }
   
   This broke initial load because .sapMNavItemCenter is only assigned AFTER navigation starts.
   On first page load, NO pages have this class, so ALL pages were hidden = blank screen.
   
   UI5's NavContainer correctly manages visibility using:
   - .sapMNavItemRendering (page being shown)
   - .sapMNavItemHidden (page being hidden)
   - .sapMNavItemCenter/.sapMNavItemCenterMiddle (current page)
   
   We should NOT override these with blanket CSS rules.
*/

/* The active/center page should be fully visible */
.sapMNavItem.sapMNavItemCenter,
.sapMNavItem.sapMNavItemCenterMiddle {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure destroyed controls are properly removed from DOM */
.sapUiControl[data-sap-ui-destroyed="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Prevent fixed position elements from causing ghost images */
[style*="position: fixed"],
.nxtAssistantWidget,
.nxtAssistantFab {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

/* Clear rendering cache on view navigation */
.sapUiView.sapUiViewDestroyed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Views that are not visible should be completely hidden */
.sapUiView[style*="visibility: hidden"],
.sapUiView[style*="display: none"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Prevent stacking of pages during fast navigation */
.sapMApp > .sapMNavItem {
    background-color: inherit !important;
}

/* FIX 2026-01-29: Ensure iframes in shell pages are ALWAYS visible
   This is a safety net to prevent any CSS rule from hiding embedded app iframes.
   The ghost prevention rules above now target only transitioning pages (not iframes),
   but we keep this override as defense-in-depth.
   
   Iframes should never be hidden because:
   1. They contain external apps (CRM, Support Portal, AppContainer embeds)
   2. Hiding them causes blank screens and reload issues
   3. Ghost prevention should target page containers, not iframe content
*/
.sapMNavItem iframe,
[id$="--crmShellPage"] iframe,
[id$="--supportPortalShellPage"] iframe,
[id*="crmShellPage"] iframe,
[id*="supportPortalShellPage"] iframe,
[id*="ShellPage"] iframe,
[id$="nxtAppFrame"],
[id$="nxt-crm-iframe"],
[id$="nxt-support-iframe"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Popovers and dialogs - ensure they don't persist as ghosts */
.sapMPopover,
.sapMDialog,
.sapMResponsivePopover {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Loading spinner animation */
.nxtSpinIcon {
    animation: nxtSpin 1.5s linear infinite;
}

@keyframes nxtSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Extra padding for header */
.nxtExtraHeaderPadding {
    padding-top: 2rem !important;
    margin-top: 2rem !important;
}

/* Larger app title */
.nxtLargeAppTitle {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
}

/* Basic Shell Header styling - minimal approach */
.sapMShellHeader {
    z-index: 100 !important;
}

/* Ensure standard shell buttons appear */
.sapMShellHeaderToolbar .sapMBarChild {
    display: inline-block !important;
}

/* Footer styling - let UI5 Page handle positioning on desktop */
.sapMPageFooter {
    width: 100% !important;
    display: block !important;
    z-index: 50 !important;
    background-color: #f7f7f7 !important;
    border-top: 1px solid #e5e5e5 !important;
}

/* Copyright text styling */
.sapMPageFooter .sapMText {
    font-size: 0.875rem !important;
    color: #333333 !important;
    font-weight: normal !important;
}

/* Mobile footer styling - fixed at bottom for mobile only */
@media screen and (max-width: 600px) {
    .sapMPageFooter {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0.25rem 0 !important;
        background: rgba(247, 247, 247, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    
    .sapMPageFooter .sapMTB {
        min-height: 1.75rem !important;
        padding: 0 0.5rem !important;
    }
    
    /* Add bottom padding to content to prevent footer overlap - MOBILE */
    [id$="--tileGroupsContainer"] {
        padding-bottom: 2.5rem !important;
    }
}

/* Dark theme footer */
body.nxt-theme-dark .sapMPageFooter,
body.nxt-theme-sap_horizon_dark .sapMPageFooter {
    background-color: #2b2b2b !important;
    border-top-color: #3d3d3d !important;
}

@media screen and (max-width: 600px) {
    body.nxt-theme-dark .sapMPageFooter,
    body.nxt-theme-sap_horizon_dark .sapMPageFooter {
        background: rgba(43, 43, 43, 0.95) !important;
    }
}

/* Responsive footer */
@media screen and (max-width: 600px) {
    .sapMPageFooter .sapMText {
        font-size: 0.6875rem !important;
    }
}

/* ========================================
   Device-Specific Optimizations
   REMOVED fixed-size per-device rules.
   Tiles now use fluid aspect-ratio grid
   controlled by the phone breakpoints below.
   ======================================== */

/* ========================================
   Search Toolbar - Responsive
   ======================================== */

.nxtSearchToolbar {
    gap: 0.75rem;
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 0.75rem 1rem !important;
}

.nxtSearchField {
    flex: 1 1 auto;
}

/* Search field — mockup "searchbox" look: white card, hair border, blue focus ring (2026-04-21)
   NOTE: SAP UI5 SearchField has both an outer .sapMSF wrapper AND an inner .sapMSFI;
   the outer one has a default 1px border that creates a visible "box-in-box" if left alone. */
.nxtSearchField.sapMSF,
.nxtSearchField .sapMSF {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.nxtSearchField .sapMSFI {
    background-color: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
    height: 2.625rem !important;
    padding: 0 0.5rem !important;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out !important;
}

.nxtSearchField .sapMSFI:focus-within {
    border-color: var(--nxt-cobalt) !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}

.nxtSearchField input,
.nxtSearchField .sapMSFPlaceholder {
    font-family: var(--nxt-font-sans) !important;
    font-size: 0.8125rem !important;
    color: var(--fg-1);
}

.nxtSearchField .sapMSFPlaceholder {
    color: var(--fg-3) !important;
}

/* ============================================================
   Prototype-parity search pill (2026-04-22):
   - magnifier icon on LEFT (inside the pill)
   - ⌘K keyboard hint badge on RIGHT (inside the pill)
   - hide UI5's default right-side search/reset buttons
   ============================================================ */
.nxtSearchField .sapMSFI {
    position: relative !important;
}

/* Left-side magnifier — inline SVG so we don't depend on icon fonts */
.nxtSearchField .sapMSFI::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310164D' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

/* Right-side ⌘K kbd badge */
.nxtSearchField .sapMSFI::after {
    content: "⌘K";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(16, 22, 77, 0.55);
    background: rgba(16, 22, 77, 0.05);
    border: 1px solid rgba(16, 22, 77, 0.14);
    border-radius: 4px;
    padding: 2px 6px;
    pointer-events: none;
    z-index: 2;
}

/* Hide UI5's default magnifier/reset buttons — our visuals replace them.
   Search still fires via liveChange, clearing is just backspace. */
.nxtSearchField .sapMSFS,
.nxtSearchField .sapMSFR,
.nxtSearchField .sapMSFB {
    display: none !important;
}

/* Make room for the left icon + right badge inside the input */
.nxtSearchField input {
    padding-left: 30px !important;
    padding-right: 52px !important;
}

/* View mode toggle — mockup "view-toggle" look: white card with segmented inside */
.nxtViewModeBtn {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
}

.nxtViewModeBtn .sapMSegBBtn {
    background: transparent !important;
    border: 0 !important;
    color: var(--fg-2) !important;
    transition: background-color 0.15s ease-out, color 0.15s ease-out !important;
}

.nxtViewModeBtn .sapMSegBBtnSel,
.nxtViewModeBtn .sapMSegBBtn[aria-pressed="true"] {
    background: rgba(32, 39, 225, 0.08) !important;
    color: var(--nxt-cobalt) !important;
}

.nxtViewModeBtn .sapMSegBBtnSel .sapUiIcon,
.nxtViewModeBtn .sapMSegBBtn[aria-pressed="true"] .sapUiIcon {
    color: var(--nxt-cobalt) !important;
}

/* Kill UI5's inner focus ring / hover outline on the view-mode toggle.
   The prototype shows a clean pill background with no border/outline on
   hover, focus, or press. UI5 renders a `.sapMBtnFocusDiv` absolute div
   with a blue outline when the button is focused or pressed, which looks
   like a "heavy border" inside the toggle. Suppress it here. */
.nxtViewModeBtn .sapMSegBBtn .sapMBtnFocusDiv,
.nxtViewModeBtn .sapMSegBBtn:focus .sapMBtnFocusDiv,
.nxtViewModeBtn .sapMSegBBtn:focus-visible .sapMBtnFocusDiv,
.nxtViewModeBtn .sapMSegBBtn.sapMFocus .sapMBtnFocusDiv {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.nxtViewModeBtn .sapMSegBBtn,
.nxtViewModeBtn .sapMSegBBtn:focus,
.nxtViewModeBtn .sapMSegBBtn:focus-visible,
.nxtViewModeBtn .sapMSegBBtn.sapMFocus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* Softer hover — subtle wash, no border */
.nxtViewModeBtn .sapMSegBBtn:hover,
.nxtViewModeBtn .sapMSegBBtn.sapMBtnHoverable:hover,
.nxtViewModeBtn .sapMSegBBtn:active,
.nxtViewModeBtn .sapMSegBBtn.sapMBtnActive {
    background: rgba(16, 22, 77, 0.04) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.nxtViewModeBtn .sapMSegBBtnSel:hover,
.nxtViewModeBtn .sapMSegBBtn[aria-pressed="true"]:hover,
.nxtViewModeBtn .sapMSegBBtnSel:active,
.nxtViewModeBtn .sapMSegBBtn[aria-pressed="true"]:active {
    background: rgba(32, 39, 225, 0.12) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Belt-and-braces: the outer segmented-button wrapper sometimes paints a
   border on its own `.sapMSegB` root on hover/focus — suppress it too. */
.nxtViewModeBtn.sapMSegB:hover,
.nxtViewModeBtn.sapMSegB:focus,
.nxtViewModeBtn.sapMSegB:focus-within {
    outline: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   Selected-state — prototype parity (2026-04-22).
   Prototype (`preview/index.html .view-toggle button.active`) uses a
   subtle cobalt wash + cobalt text, nothing else — no chip, no outline,
   no lift shadow. PR #181 had added a raised white chip with a 1px
   cobalt inset outline that read as a border and didn't match.

   The earlier rule at ~line 384 already paints the prototype's wash
   (`rgba(32, 39, 225, 0.08)` + cobalt text); we just need to make sure
   it survives the hover suppressors below. This rule is placed AFTER
   those suppressors using the compound selector
   `.sapMSegBBtn.sapMSegBBtnSel` so its specificity wins the cascade.
   ============================================================ */
.nxtViewModeBtn .sapMSegBBtn.sapMSegBBtnSel,
.nxtViewModeBtn .sapMSegBBtn[aria-pressed="true"] {
    background: rgba(32, 39, 225, 0.08) !important;
    color: var(--nxt-cobalt) !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}

.nxtViewModeBtn .sapMSegBBtn.sapMSegBBtnSel:hover,
.nxtViewModeBtn .sapMSegBBtn[aria-pressed="true"]:hover {
    background: rgba(32, 39, 225, 0.12) !important;
    box-shadow: none !important;
}

@media screen and (max-width: 600px) {
    .nxtSearchToolbar {
        padding: 0.375rem 0.5rem !important;
        gap: 0.375rem;
        min-height: 2.5rem !important;
    }
    
    .nxtSearchToolbar .sapMTBSpacer {
        display: none !important;
        width: 0 !important;
        flex: 0 !important;
    }
    
    .nxtSearchField {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    
    .nxtSearchField .sapMSFI {
        height: 2rem !important;
        border-radius: 1rem !important;
    }
    
    .nxtSearchField input {
        font-size: 0.8125rem !important;
    }
    
    .nxtSearchField .sapMSFPlaceholder {
        font-size: 0.8125rem !important;
    }
    
    .nxtViewModeBtn .sapMSegBBtn {
        min-width: 1.875rem !important;
        height: 1.875rem !important;
        padding: 0 0.25rem !important;
    }
    
    .nxtViewModeBtn .sapMSegBBtnInner {
        padding: 0 !important;
    }
    
    .nxtViewModeBtn .sapUiIcon {
        font-size: 0.875rem !important;
    }
}

@media screen and (max-width: 360px) {
    .nxtSearchToolbar {
        padding: 0.25rem 0.375rem !important;
        gap: 0.25rem;
    }
    
    .nxtSearchField .sapMSFI {
        height: 1.875rem !important;
    }
    
    .nxtSearchField input {
        font-size: 0.75rem !important;
    }
    
    .nxtViewModeBtn .sapMSegBBtn {
        min-width: 1.625rem !important;
        height: 1.625rem !important;
    }
}

/* Landscape mode optimizations for phones */
@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    /* Use smaller tiles in landscape */
    .tileLayout.sapMGT {
        width: 5rem !important;
        height: 5rem !important;
        min-width: 5rem !important;
        min-height: 5rem !important;
    }
    
    .tileGroup .sapUiLayoutCSSGrid {
        grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)) !important;
        gap: 0.5rem !important;
    }
    
    /* Compact header in landscape */
    .sapMPageHeader .sapMBar {
        height: 2.25rem !important;
        min-height: 2.25rem !important;
    }
    
    /* Smaller panels */
    .tileGroup .sapMPanelHdr {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 2rem !important;
    }
    
    .tileGroup.sapMPanel {
        margin-bottom: 0.5rem !important;
    }
}

/* ========================================
   User Menu Toolbar - Adaptive Layout
   ======================================== */

.nxtUserMenuToolbar {
    gap: 0.25rem;
}

.nxtUserMenuToolbar .sapMTBSpacer {
    flex: 0 0 auto !important;
    width: 0.25rem !important;
    min-width: 0 !important;
}

/* Language selector button */
.nxtLanguageSelector {
    min-width: 2.5rem !important;
    padding: 0 0.25rem !important;
}

.nxtLanguageSelector .sapMBtnInner {
    padding: 0 0.5rem !important;
}

.nxtLanguageSelector .sapMBtnText,
.nxtLanguageSelector bdi {
    font-weight: 600 !important;
}

/* User avatar styling */
.nxtUserAvatar {
    cursor: pointer;
}

/* User name button - shows icon on mobile, text on desktop */
.nxtUserNameBtn .sapMBtnIcon {
    display: none !important;
}

@media screen and (max-width: 600px) {
    /* On mobile: show icon, hide text */
    .nxtUserNameBtn .sapMBtnIcon {
        display: inline-flex !important;
    }
    
    .nxtUserNameBtn .sapMBtnText,
    .nxtUserNameBtn bdi {
        display: none !important;
    }
    
    .nxtUserNameBtn {
        min-width: 2.25rem !important;
    }
    
    .nxtUserNameBtn .sapMBtnInner {
        padding: 0 0.375rem !important;
    }
    
    /* Compact language selector on mobile */
    .nxtLanguageSelector {
        min-width: 2rem !important;
    }
    
    .nxtLanguageSelector .sapMBtnInner {
        padding: 0 0.25rem !important;
    }
    
    .nxtLanguageSelector .sapMBtnText,
    .nxtLanguageSelector bdi {
        font-size: 0.75rem !important;
    }
    
    /* User avatar size on mobile */
    .nxtUserAvatar {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    .nxtUserAvatar .sapFAvatarImageHolder {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
}

/* ========================================
   Responsive Page Layout Adjustments
   ======================================== */

/* ========================================
   Logo Responsive Sizing
   ======================================== */

/* Responsive logo class */
.nxtResponsiveLogo {
    width: 120px !important;
    height: auto !important;
    transition: width 0.2s ease;
}

/* Default logo size - tablet and up */
[id$="--homeLogo"] {
    width: 120px !important;
    height: auto !important;
    transition: width 0.2s ease;
}

/* Tablet breakpoint */
@media screen and (max-width: 1024px) {
    [id$="--homeLogo"] {
        width: 100px !important;
    }
}

/* Phone breakpoint */
@media screen and (max-width: 768px) {
    [id$="--homeLogo"] {
        width: 90px !important;
    }
}

/* Small phone breakpoint - logo is 165:40 aspect ratio, needs ~90px to be readable */
@media screen and (max-width: 480px) {
    [id$="--homeLogo"] {
        width: 90px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
    }
}

/* Very small phone breakpoint - still show full "nxt4sap" */
@media screen and (max-width: 375px) {
    [id$="--homeLogo"] {
        width: 80px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
    }
}

/* ========================================
   Mobile-First Responsive Header & Layout
   ======================================== */

/* Reduce page content padding on smaller screens */
@media screen and (max-width: 600px) {
    .sapUiContentPadding {
        padding: 0.375rem !important;
    }
    
    /* Smaller search field on phones */
    [id$="--searchField"] {
        min-width: unset !important;
    }
    
    /* Compact toolbar on phones */
    .sapMPageSubHeader .sapMTB {
        padding: 0.25rem 0.5rem !important;
        min-height: 2.5rem !important;
    }
    
    /* MOBILE HEADER: Compact bar layout */
    .sapMPageHeader .sapMBar {
        padding: 0 0.5rem !important;
        height: var(--header-height-phone) !important;
        min-height: var(--header-height-phone) !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Header content areas - prevent logo from being crushed */
    .sapMPageHeader .sapMBarLeft {
        padding: 0 !important;
        flex: 0 0 auto !important;
        min-width: 90px !important;
        max-width: 200px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Middle area - collapse on mobile */
    .sapMPageHeader .sapMBarMiddle {
        flex: 0 0 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    .sapMPageHeader .sapMBarRight {
        padding: 0 !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Logo image - never crop, maintain aspect ratio */
    .sapMPageHeader .sapMBarLeft .sapMImg,
    .sapMPageHeader .sapMBarLeft img,
    [id$="--homeLogo"] img {
        object-fit: contain !important;
        max-height: 2rem !important;
        width: auto !important;
    }
    
    /* User menu toolbar - compact on mobile */
    [id$="--userMenuToolbar"].sapMOTB,
    .sapMOTB[id$="--userMenuToolbar"] {
        padding: 0 !important;
        gap: 0.125rem !important;
    }
    
    [id$="--userMenuToolbar"] .sapMTBSpacer {
        display: none !important;
        width: 0 !important;
        flex: 0 !important;
    }

    /* Hide user name text on mobile - show only avatar/icon */
    [id$="--userAvatarButton"] .sapMBtnContent,
    [id$="--userAvatarButton"] .sapMBtnText,
    [id$="--userAvatarButton"] bdi {
        display: none !important;
    }

    /* Make buttons icon-only and compact on mobile */
    [id$="--userMenuToolbar"] .sapMBtn {
        min-width: 2rem !important;
        max-width: 2.25rem !important;
        padding: 0 !important;
    }

    [id$="--userMenuToolbar"] .sapMBtnInner {
        padding: 0 0.25rem !important;
    }

    /* Hide low-priority buttons on small mobile to prevent overflow */
    [id$="--showAssistantButton"],
    [id$="--openCrmButton"],
    [id$="--openDevOpsButton"] {
        display: none !important;
    }

    /* Language selector - compact */
    [id$="--languageSelector"] {
        min-width: 1.75rem !important;
        max-width: 2rem !important;
        padding: 0 !important;
    }

    [id$="--languageSelector"] .sapMBtnInner {
        padding: 0 0.125rem !important;
    }

    [id$="--languageSelector"] .sapMBtnText,
    [id$="--languageSelector"] bdi {
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
    }

    /* Avatar size on mobile */
    [id$="--userAvatar"] {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    /* Page footer compact */
    .sapMPageFooter .sapMTB {
        padding: 0.25rem !important;
        min-height: 2rem !important;
    }

    .sapMPageFooter .sapMText {
        font-size: 0.625rem !important;
    }

    /* Search and view toggle row */
    .sapMPageSubHeader .sapMTB {
        gap: 0.25rem !important;
    }

    /* Segmented button compact */
    [id$="--viewModeButton"] {
        min-width: auto !important;
    }

    [id$="--viewModeButton"] .sapMSegBBtn {
        min-width: 2rem !important;
        padding: 0 0.375rem !important;
    }
}

/* Extra small phones (< 360px) - Even more compact */
@media screen and (max-width: 360px) {
    .sapUiContentPadding {
        padding: 0.25rem !important;
    }

    /* Even smaller language selector */
    [id$="--languageSelector"] .sapMBtnText,
    [id$="--languageSelector"] bdi {
        font-size: 0.625rem !important;
    }

    /* Also hide subscription reports button on tiny screens */
    [id$="--openSubscriptionReportsButton"] {
        display: none !important;
    }

    /* Smaller search field */
    [id$="--searchField"] .sapMSFI {
        height: 2rem !important;
    }

    [id$="--searchField"] input {
        font-size: 0.8125rem !important;
    }
}

/* Remove padding from logo SVG - fixes embedded PNG with whitespace */
.nxtLogoNoPadding {
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* AppContainer Page - ensure it fills the viewport */
.nxtAppContainerPage {
    height: 100vh !important;
}

/* AppContainer Page section - fill available space below header */
.nxtAppContainerPage .sapMPageScroll {
    height: 100% !important;
}

/* ScrollContainer inside AppContainer - fill the content area */
.nxtAppContainerPage [id$="--iframeContainer"] {
    height: 100% !important;
}

/* iframe inside ScrollContainer - fill the container */
[id$="nxtAppFrame"] {
    display: block !important;
    border: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: calc(100vh - 48px) !important;
}

/* AppContainer loading overlay */
.nxtAppLoadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: var(--sapBackgroundColor, #f5f6f7);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 48px);
}

.nxtAppLoadingText {
    color: var(--sapTextColor, #32363a);
    font-size: 1rem;
}

/* Hide iframe while loading */
.nxtAppContainerLoading [id$="nxtAppFrame"] {
    visibility: hidden;
}

/* ========================================
   SAP Connection Status Indicator
   ======================================== */

/* Connected status - green */
.sapConnectionConnected .sapMBtnIcon {
    color: #107e3e !important; /* SAP Success Green */
}

.sapConnectionConnected:hover .sapMBtnIcon {
    color: #0a6128 !important;
}

/* Warning status (needs setup) - amber */
.sapConnectionWarning .sapMBtnIcon {
    color: #e9730c !important; /* SAP Warning Orange */
}

.sapConnectionWarning:hover .sapMBtnIcon {
    color: #c65d00 !important;
}

/* Pulse animation for attention */
@keyframes sapConnectionPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.sapConnectionWarning .sapMBtnIcon {
    animation: sapConnectionPulse 2s ease-in-out infinite;
}

/* Error status - red */
.sapConnectionError .sapMBtnIcon {
    color: #bb0000 !important; /* SAP Error Red */
}

/* Inactive status - grey */
.sapConnectionInactive .sapMBtnIcon {
    color: #6a6d70 !important; /* SAP Neutral Grey */
}

/* ========================================
   Glassmorphism Tiles - Frosted Glass Effect
   Option D: Modern, Premium, Apple-like
   Theme-aware shadows
   Responsive Design for all screen sizes
   ======================================== */

/* CSS Custom Properties for tile sizing - Mobile-first approach */
:root {
    --tile-size-desktop: 9rem;      /* 144px - Desktop */
    --tile-size-tablet: 7.5rem;     /* 120px - Tablet */
    --tile-size-phone: 6.5rem;      /* 104px - Phone - LARGER for readability */
    --tile-size-phone-small: 5.5rem; /* 88px - Very small phones */
    --tile-gap-desktop: 1.25rem;
    --tile-gap-tablet: 1rem;
    --tile-gap-phone: 0.75rem;      /* 12px - Balanced mobile gap */
    --tile-border-radius-desktop: 18px;
    --tile-border-radius-tablet: 14px;
    --tile-border-radius-phone: 14px;

    /* Header responsive variables */
    --header-height-desktop: 3rem;
    --header-height-phone: 2.75rem;

    /* Mobile grid: fluid columns instead of forced count */
    --tile-min-width-phone: 5.5rem;  /* 88px - min tile width for auto-fill */

    /* ========================================
       NXT brand tokens (2026-04-21)
       Foundation for Home redesign — not referenced yet.
       See apps/launchpad/webapp/preview/ for visual target.
       ======================================== */

    /* Brand colors */
    --nxt-midnight: #10164D;
    --nxt-snow: #FFFFFF;
    --nxt-brilliant: #0C056D;            /* deepest cobalt — primary button :active */
    --nxt-cobalt: #2027E1;                /* primary accent — buttons, links, focus */
    --nxt-cobalt-hover: #1A1FC4;          /* primary button :hover (deeper cobalt, not violet) */
    --nxt-ultramarine: #4A3EF0;           /* legacy hover (do not use for new buttons) */
    --nxt-gray: #808080;
    --nxt-graphite: #424242;

    /* Ink scale (neutral text / UI) */
    --ink-900: #10164D;
    --ink-700: #2B3079;
    --ink-500: #5258A3;
    --ink-300: #A3A7CF;
    --ink-200: #CDD0E5;
    --ink-100: #E7E8F2;
    --ink-50:  #F4F5FA;
    --ink-25:  #FAFBFD;

    /* Hairlines and surfaces */
    --hair:    #E8EAF2;
    --hair-2:  #EEF0F6;
    --bg-page: #FFFFFF;
    --bg-sunken: #F4F5FA;

    /* Foreground roles */
    --fg-1: #1C1F33;
    --fg-2: #5B6079;
    --fg-3: #8A8FA6;

    /* Status */
    --nxt-success: #0E9F6E;
    --nxt-warning: #D97706;
    --nxt-danger:  #DC2626;

    /* Motion */
    --nxt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Fonts — Poppins (NXT4SAP primary brand face, self-hosted above; CSP-safe),
       falling back to SAP "72" / system stack if Poppins ever fails to load. */
    --nxt-font-sans:  'Poppins', '72', '72full', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    --nxt-font-fiori: 'Poppins', '72', '72full', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Base glassmorphism tile styling - Desktop (default) */
.tileLayout.sapMGT {
    width: var(--tile-size-desktop) !important;
    height: var(--tile-size-desktop) !important;
    min-width: var(--tile-size-desktop) !important;
    min-height: var(--tile-size-desktop) !important;
    border-radius: var(--tile-border-radius-desktop) !important;
    
    /* Glassmorphism effect */
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Subtle glass border */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

/* ========================================
   Responsive Tile Sizing
   ======================================== */

/* Tablet breakpoint (< 1024px) */
/* Tablet ONLY tile sizing - exclude phones */
@media screen and (max-width: 1024px) and (min-width: 601px) {
    .tileLayout.sapMGT {
        width: var(--tile-size-tablet) !important;
        height: var(--tile-size-tablet) !important;
        min-width: var(--tile-size-tablet) !important;
        min-height: var(--tile-size-tablet) !important;
        border-radius: var(--tile-border-radius-tablet) !important;
    }

    .tileGroup .sapUiLayoutCSSGrid {
        gap: var(--tile-gap-tablet) !important;
    }
}

/* Phone breakpoint (< 600px) - TRULY ADAPTIVE FLUID GRID */
@media screen and (max-width: 600px) {
    /* Tiles scale fluidly - no fixed size, let grid handle it */
    .tileLayout.sapMGT {
        width: 100% !important;
        height: auto !important;
        min-width: unset !important;
        min-height: unset !important;
        aspect-ratio: 1 / 1 !important; /* Square tiles - must override UI5 defaults */
        border-radius: var(--tile-border-radius-phone) !important;
        overflow: hidden !important;
    }

    /* 2-column grid — industry standard for mobile tile dashboards */
    .tileGroup .sapUiLayoutCSSGrid {
        gap: 0.75rem !important;
        grid-template-columns: repeat(2, 1fr) !important;
        justify-items: stretch !important;
    }

    /* Tile internal flex layout: title on top, content centered below */
    .tileLayout.sapMGT {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    /* Title area: 3-line wrap with generous height for ~175px tiles */
    .tileLayout.sapMGT .sapMGTHdrContent,
    .tileGroup .sapMGT .sapMGTHdrContent {
        flex: 0 0 auto !important;
        max-height: 3.5rem !important;
        overflow: hidden !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Tile title text - 10px, centered, 3-line wrap */
    .tileLayout.sapMGT .sapMGTHdrTxt,
    .tileGroup .sapMGT .sapMGTHdrTxt {
        font-size: 0.625rem !important; /* 10px */
        padding: 0.375rem 0.375rem 0.125rem 0.375rem !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        display: -webkit-box !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-height: 3.25rem !important;
        color: #ffffff !important;
        white-space: normal !important;
    }

    .tileLayout.sapMGT .sapMGTSubHdrTxt,
    .tileGroup .sapMGT .sapMGTSubHdrTxt {
        display: none !important;
    }

    /* Content area: fills remaining space below title, centers icon/counter */
    .tileLayout.sapMGT .sapMGTContent,
    .tileGroup .sapMGT .sapMGTContent {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        min-height: 0 !important;
    }

    .tileLayout.sapMGT .sapMTileCnt,
    .tileGroup .sapMGT .sapMTileCnt {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .tileLayout.sapMGT .sapMTileCntContent,
    .tileGroup .sapMGT .sapMTileCntContent {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Icons: completely hidden on mobile - all tiles */
    .tileLayout.sapMGT .sapMGTContent .sapMImg,
    .tileLayout.sapMGT .sapMGTContent .sapUiIcon,
    .tileGroup .sapMGT .sapMGTContent .sapMImg,
    .tileGroup .sapMGT .sapMGTContent .sapUiIcon,
    .tileLayout.sapMGT .sapMTileCntContent .sapUiIcon,
    .tileLayout.sapMGT .sapMTileCntContent .sapMImg,
    .tileGroup .sapMGT .sapMTileCntContent .sapUiIcon,
    .tileGroup .sapMGT .sapMTileCntContent .sapMImg,
    .sapMGT .sapUiIcon,
    .sapMGT .sapMImg {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        font-size: 0 !important;
        overflow: hidden !important;
    }

    /* Counter container: centered */
    .tileLayout.sapMGT .nxtTileCounter,
    .tileGroup .sapMGT .nxtTileCounter {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        overflow: hidden !important;
        gap: 0.125rem !important;
    }

    /* Counter digits: 16px bold */
    .tileLayout.sapMGT .nxtTileCounterValue,
    .tileGroup .sapMGT .nxtTileCounterValue,
    .tileLayout .nxtTileCounterValue,
    .sapMGT .nxtTileCounterValue {
        font-size: 1rem !important; /* 16px */
        font-weight: 700 !important;
        text-align: center !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* Counter unit: 9px bold */
    .tileLayout.sapMGT .nxtTileCounterUnit,
    .tileGroup .sapMGT .nxtTileCounterUnit,
    .tileLayout .nxtTileCounterUnit,
    .sapMGT .nxtTileCounterUnit {
        font-size: 0.5625rem !important; /* 9px */
        font-weight: 700 !important;
        text-align: center !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
    }

    /* Panel styling for mobile - more breathing room */
    .tileGroup .sapMPanelContent {
        padding: 0.75rem !important;
    }

    .tileGroup .sapMPanelHdr {
        font-size: 0.9375rem !important;
        padding: 0.625rem 0.75rem !important;
        min-height: 2.75rem !important; /* Larger tap target */
    }

    .tileGroup.sapMPanel {
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Small phones (< 400px) - slightly tighter gaps */
@media screen and (max-width: 400px) {
    .tileGroup .sapUiLayoutCSSGrid {
        gap: 0.5rem !important;
    }

    .tileLayout.sapMGT .sapMGTHdrTxt,
    .tileGroup .sapMGT .sapMGTHdrTxt {
        font-size: 0.5625rem !important; /* 9px */
        padding: 0.25rem 0.25rem 0.125rem 0.25rem !important;
    }

    .tileLayout.sapMGT .nxtTileCounterValue,
    .tileGroup .sapMGT .nxtTileCounterValue {
        font-size: 0.875rem !important; /* 14px */
    }

    .tileLayout.sapMGT .nxtTileCounterUnit,
    .tileGroup .sapMGT .nxtTileCounterUnit {
        font-size: 0.5rem !important; /* 8px */
    }

    .tileGroup .sapMPanelContent {
        padding: 0.5rem !important;
    }
}

/* Very small phones (< 340px) */
@media screen and (max-width: 340px) {
    .tileGroup .sapUiLayoutCSSGrid {
        gap: 0.375rem !important;
    }

    .tileLayout.sapMGT .sapMGTHdrTxt,
    .tileGroup .sapMGT .sapMGTHdrTxt {
        font-size: 0.5rem !important; /* 8px */
    }

    .tileLayout.sapMGT .nxtTileCounterValue,
    .tileGroup .sapMGT .nxtTileCounterValue {
        font-size: 0.75rem !important; /* 12px */
    }
}

/* Dark theme shadows (#2b2b2b) - sap_horizon_dark, sap_horizon_hcb */
body.nxt-theme-dark .tileLayout.sapMGT,
body.nxt-theme-sap_horizon_dark .tileLayout.sapMGT,
body.nxt-theme-sap_horizon_hcb .tileLayout.sapMGT {
    box-shadow: 
        0 8px 32px #2b2b2b,
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.nxt-theme-dark .tileLayout.sapMGT:hover,
    body.nxt-theme-sap_horizon_dark .tileLayout.sapMGT:hover,
    body.nxt-theme-sap_horizon_hcb .tileLayout.sapMGT:hover {
        box-shadow:
            0 12px 40px #2b2b2b,
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
}

/* Light theme shadows - subtle version of company color */
body.nxt-theme-light .tileLayout.sapMGT,
body.nxt-theme-sap_horizon .tileLayout.sapMGT,
body.nxt-theme-sap_horizon_hcw .tileLayout.sapMGT {
    box-shadow:
        0 8px 32px rgba(12, 5, 109, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.nxt-theme-light .tileLayout.sapMGT:hover,
    body.nxt-theme-sap_horizon .tileLayout.sapMGT:hover,
    body.nxt-theme-sap_horizon_hcw .tileLayout.sapMGT:hover {
        box-shadow:
            0 12px 40px rgba(12, 5, 109, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
}

/* Top highlight edge - responsive */
.tileLayout.sapMGT::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 12px !important;
    right: 12px !important;
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 100%) !important;
    pointer-events: none !important;
}

@media screen and (max-width: 600px) {
    .tileLayout.sapMGT::before {
        left: 8px !important;
        right: 8px !important;
    }
}

/* Hover effect - brighter glass (desktop/mouse only) */
@media (hover: hover) and (pointer: fine) {
    .tileLayout.sapMGT:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-4px) !important;
    }
}

/* Active/pressed state - works on both touch and mouse */
.tileLayout.sapMGT:active {
    transform: scale(0.96) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    transition: transform 0.1s ease, background 0.1s ease !important;
}

/* GenericTile layout */
.tileLayout.sapMGT {
    display: flex !important;
    flex-direction: column !important;
}

.tileLayout .sapMGTHdrContent {
    flex: 0 0 auto !important;
}

/* Tile header (title) - Desktop default */
.tileLayout .sapMGTHdrTxt {
    font-size: 0.8125rem !important; /* 13px - slightly smaller for compact tiles */
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    letter-spacing: 0.01em !important;
    padding: 0.625rem 0.625rem 0.2rem 0.625rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

/* Tile subheader - Desktop default */
.tileLayout .sapMGTSubHdrTxt {
    font-size: 0.6875rem !important; /* 11px */
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0 0.625rem !important;
    font-weight: 400 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Tile content area - fills remaining space after header, content at bottom */
.tileLayout .sapMGTContent {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 0.5rem 0.125rem 0.5rem !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* TileContent wrapper */
.tileLayout .sapMTileCnt {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.tileLayout .sapMTileCntContent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Icon in tile - subtle glow */
.tileLayout .sapMGTContent .sapMImg,
.tileLayout .sapMGTContent .sapUiIcon {
    font-size: 1.75rem !important; /* Slightly smaller icons */
    color: rgba(255, 255, 255, 0.85) !important;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.15)) !important;
}

/* Custom tile counter (VBox with value + unit) */
.tileLayout .nxtTileCounter {
    width: 100% !important;
    align-items: center !important;
    gap: 0 !important;
}

.tileLayout .nxtTileCounterValue {
    font-size: 1.375rem !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.tileLayout .nxtTileCounterUnit {
    font-size: 0.5rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.6 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Dark theme: white counter text */
body.nxt-theme-dark .tileLayout .nxtTileCounterValue,
body.nxt-theme-sap_horizon_dark .tileLayout .nxtTileCounterValue,
body.nxt-theme-sap_horizon_hcb .tileLayout .nxtTileCounterValue {
    color: #ffffff !important;
}
body.nxt-theme-dark .tileLayout .nxtTileCounterUnit,
body.nxt-theme-sap_horizon_dark .tileLayout .nxtTileCounterUnit,
body.nxt-theme-sap_horizon_hcb .tileLayout .nxtTileCounterUnit {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ========================================
   Tablet Responsive Styles (< 1024px)
   ======================================== */
/* Tablet ONLY (601px - 1024px) - exclude phones so mobile overrides work */
@media screen and (max-width: 1024px) and (min-width: 601px) {
    .tileLayout .sapMGTHdrTxt {
        font-size: 0.75rem !important; /* 12px */
        padding: 0.5rem 0.5rem 0.15rem 0.5rem !important;
    }

    .tileLayout .sapMGTSubHdrTxt {
        font-size: 0.625rem !important; /* 10px */
        padding: 0 0.5rem !important;
    }

    .tileLayout .sapMGTContent .sapMImg,
    .tileLayout .sapMGTContent .sapUiIcon {
        font-size: 1.5rem !important;
    }

    .tileLayout .nxtTileCounterValue {
        font-size: 1.25rem !important;
    }
    .tileLayout .nxtTileCounterUnit {
        font-size: 0.4375rem !important;
    }
}

/* ========================================
   Category-Based Accent Colors (Subtle)
   Colored glow on hover for differentiation
   Theme-aware shadows with accent blending
   ======================================== */

/* Finance - Teal accent */
.tileCategory-finance .sapMGTContent .sapUiIcon {
    color: #5eead4 !important;
}
/* Analytics - Blue accent */
.tileCategory-analytics .sapMGTContent .sapUiIcon {
    color: #818cf8 !important;
}
/* HR - Pink accent */
.tileCategory-hr .sapMGTContent .sapUiIcon {
    color: #f472b6 !important;
}
/* Admin - Slate accent */
.tileCategory-admin .sapMGTContent .sapUiIcon {
    color: #94a3b8 !important;
}
/* Logistics - Orange accent */
.tileCategory-logistics .sapMGTContent .sapUiIcon {
    color: #fb923c !important;
}
/* Sales - Green accent */
.tileCategory-sales .sapMGTContent .sapUiIcon {
    color: #4ade80 !important;
}
/* AI - Cyan accent */
.tileCategory-ai .sapMGTContent .sapUiIcon {
    color: #22d3ee !important;
}
/* Documents - Red accent */
.tileCategory-documents .sapMGTContent .sapUiIcon {
    color: #f87171 !important;
}
/* Default - Purple accent */
.tileCategory-default .sapMGTContent .sapUiIcon {
    color: #a78bfa !important;
}

/* Category hover glow effects - desktop only */
@media (hover: hover) and (pointer: fine) {
    /* Finance */
    body.nxt-theme-dark .tileCategory-finance.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(17, 153, 142, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-finance.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(17, 153, 142, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* Analytics */
    body.nxt-theme-dark .tileCategory-analytics.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-analytics.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* HR */
    body.nxt-theme-dark .tileCategory-hr.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(236, 72, 153, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-hr.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(236, 72, 153, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* Admin */
    body.nxt-theme-dark .tileCategory-admin.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(100, 116, 139, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-admin.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(100, 116, 139, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* Logistics */
    body.nxt-theme-dark .tileCategory-logistics.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-logistics.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* Sales */
    body.nxt-theme-dark .tileCategory-sales.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-sales.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* AI */
    body.nxt-theme-dark .tileCategory-ai.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(34, 211, 238, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-ai.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(34, 211, 238, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* Documents */
    body.nxt-theme-dark .tileCategory-documents.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(248, 113, 113, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-documents.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(248, 113, 113, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    /* Default */
    body.nxt-theme-dark .tileCategory-default.sapMGT:hover {
        box-shadow: 0 12px 40px #2b2b2b, 0 0 20px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.nxt-theme-light .tileCategory-default.sapMGT:hover {
        box-shadow: 0 12px 40px rgba(12, 5, 109, 0.2), 0 0 20px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
}

/* ========================================
   Tile Group Panel Styling (Glassmorphism)
   Theme-aware styling
   ======================================== */

.tileGroup.sapMPanel {
    border-radius: 16px !important;
    margin-bottom: 1.5rem !important;
}

/* Dark theme panel styling */
body.nxt-theme-dark .tileGroup.sapMPanel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Light theme panel styling */
body.nxt-theme-light .tileGroup.sapMPanel {
    background: rgba(12, 5, 109, 0.02) !important;
    border: 1px solid rgba(12, 5, 109, 0.08) !important;
}

/* Panel header base styling */
.tileGroup .sapMPanelHdr {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    padding: 1rem 1.25rem !important;
    background: transparent !important;
    letter-spacing: 0.02em !important;
    /* Ensure proper vertical alignment */
    display: flex !important;
    align-items: center !important;
    min-height: 3rem !important;
}

/* Dark theme header text */
body.nxt-theme-dark .tileGroup .sapMPanelHdr {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Light theme header text - company color */
body.nxt-theme-light .tileGroup .sapMPanelHdr {
    color: #0c056d !important;
    border-bottom: 1px solid rgba(12, 5, 109, 0.1) !important;
}

.tileGroup .sapMPanelContent {
    padding: 1.25rem !important;
}

/* Grid gap for glassmorphism tiles - responsive */
.tileGroup .sapUiLayoutCSSGrid,
.nxtTileGrid {
    gap: var(--tile-gap-desktop, 1.25rem) !important;
}

/* Mobile-optimized tile grid - 2 columns */
@media screen and (max-width: 600px) {
    .nxtTileGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        justify-items: stretch !important;
        padding: 0.25rem !important;
    }
}

@media screen and (max-width: 400px) {
    .nxtTileGrid {
        gap: 0.5rem !important;
    }
}

@media screen and (max-width: 340px) {
    .nxtTileGrid {
        gap: 0.375rem !important;
    }
}

/* ========================================
   List View Styling (Glassmorphism)
   Theme-aware styling
   ======================================== */

/* List container */
.tileGroup .sapMList {
    background: transparent !important;
}

/* List items - base glassmorphism style */
.tileGroup .sapMList .sapMLIB {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.2s ease !important;
}

/* Dark theme list items */
body.nxt-theme-dark .tileGroup .sapMList .sapMLIB {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.nxt-theme-dark .tileGroup .sapMList .sapMLIB:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        transform: translateX(4px) !important;
    }
}

/* Light theme list items */
body.nxt-theme-light .tileGroup .sapMList .sapMLIB {
    background: rgba(12, 5, 109, 0.04) !important;
    border: 1px solid rgba(12, 5, 109, 0.1) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.nxt-theme-light .tileGroup .sapMList .sapMLIB:hover {
        background: rgba(12, 5, 109, 0.08) !important;
        border-color: rgba(12, 5, 109, 0.15) !important;
        transform: translateX(4px) !important;
    }
}

/* List item title - base */
.tileGroup .sapMList .sapMSLITitle,
.tileGroup .sapMList .sapMLIBContent .sapMText {
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
}

/* Dark theme list titles */
body.nxt-theme-dark .tileGroup .sapMList .sapMSLITitle,
body.nxt-theme-dark .tileGroup .sapMList .sapMLIBContent .sapMText {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Light theme list titles */
body.nxt-theme-light .tileGroup .sapMList .sapMSLITitle,
body.nxt-theme-light .tileGroup .sapMList .sapMLIBContent .sapMText {
    color: #0c056d !important;
}

/* List item description */
.tileGroup .sapMList .sapMSLIDescription {
    font-size: 0.8125rem !important;
}

body.nxt-theme-dark .tileGroup .sapMList .sapMSLIDescription {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.nxt-theme-light .tileGroup .sapMList .sapMSLIDescription {
    color: rgba(12, 5, 109, 0.6) !important;
}

/* List item icon */
.tileGroup .sapMList .sapMLIBContent .sapUiIcon,
.tileGroup .sapMList .sapMSLIImg .sapUiIcon {
    font-size: 1.5rem !important;
}

body.nxt-theme-dark .tileGroup .sapMList .sapMLIBContent .sapUiIcon,
body.nxt-theme-dark .tileGroup .sapMList .sapMSLIImg .sapUiIcon {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.nxt-theme-light .tileGroup .sapMList .sapMLIBContent .sapUiIcon,
body.nxt-theme-light .tileGroup .sapMList .sapMSLIImg .sapUiIcon {
    color: rgba(12, 5, 109, 0.7) !important;
}

/* List item navigation arrow */
body.nxt-theme-dark .tileGroup .sapMList .sapMLIBType .sapUiIcon {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.nxt-theme-light .tileGroup .sapMList .sapMLIBType .sapUiIcon {
    color: rgba(12, 5, 109, 0.4) !important;
}

/* ========================================
   Mobile-Adaptive Enhancements
   Touch-friendly, fluid, dynamic layout
   ======================================== */

/* Smooth momentum scrolling for tile container */
@media screen and (max-width: 600px) {
    [id$="--tileGroupsContainer"],
    .sapMPageScroll,
    .sapMScrollCont {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }

    /* Prevent text selection on tiles during swipe */
    .tileLayout.sapMGT {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        touch-action: manipulation !important;
    }

    /* List view items: larger tap targets on mobile */
    .tileGroup .sapMList .sapMLIB {
        min-height: 3rem !important;
        padding: 0.625rem 0.75rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 10px !important;
    }

    .tileGroup .sapMList .sapMSLITitle,
    .tileGroup .sapMList .sapMLIBContent .sapMText {
        font-size: 0.875rem !important;
    }

    .tileGroup .sapMList .sapMSLIDescription {
        font-size: 0.75rem !important;
    }

    .tileGroup .sapMList .sapMLIBContent .sapUiIcon,
    .tileGroup .sapMList .sapMSLIImg .sapUiIcon {
        font-size: 1.25rem !important;
    }

    /* Active tap feedback on list items */
    .tileGroup .sapMList .sapMLIB:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
}

/* ========================================
   AppContainer - Mobile Responsive
   ======================================== */

@media screen and (max-width: 600px) {
    /* Responsive logo in AppContainer */
    [id$="--appContainerLogo"] {
        width: 80px !important;
        height: auto !important;
    }

    /* Compact header bar */
    .nxtAppContainerPage .sapMBar {
        padding: 0 0.375rem !important;
        height: 2.75rem !important;
        min-height: 2.75rem !important;
    }

    /* Home button - ensure good tap target */
    .nxtAppContainerPage [id$="--homeButton"] {
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
    }

    /* iframe fills available space properly on mobile */
    [id$="nxtAppFrame"] {
        min-height: calc(100vh - 2.75rem) !important;
        min-height: calc(100dvh - 2.75rem) !important; /* Dynamic viewport height for mobile browsers */
    }

    .nxtAppContainerPage .sapMPageScroll {
        height: calc(100vh - 2.75rem) !important;
        height: calc(100dvh - 2.75rem) !important;
    }
}

/* Tablet AppContainer adjustments */
@media screen and (max-width: 1024px) and (min-width: 601px) {
    [id$="--appContainerLogo"] {
        width: 100px !important;
        height: auto !important;
    }
}

/* ========================================
   Mobile-Specific: Safe Area Insets
   For phones with notches/dynamic islands
   ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 600px) {
        /* Footer respects safe area (home indicator) */
        .sapMPageFooter {
            padding-bottom: calc(0.25rem + env(safe-area-inset-bottom)) !important;
        }

        /* Content doesn't get hidden behind safe areas */
        [id$="--tileGroupsContainer"] {
            padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)) !important;
        }

        /* Header respects notch/dynamic island */
        .sapMPageHeader .sapMBar {
            padding-left: calc(0.5rem + env(safe-area-inset-left)) !important;
            padding-right: calc(0.5rem + env(safe-area-inset-right)) !important;
        }
    }
}

/* ========================================
   Mobile: Dynamic Viewport Height
   Accounts for mobile browser chrome
   ======================================== */

@media screen and (max-width: 600px) {
    .nxtAppContainerPage {
        height: 100vh !important;
        height: 100dvh !important; /* Accounts for mobile browser address bar */
    }

    /* Ensure page content uses available height */
    [id$="--homePage"] .sapMPageScroll {
        min-height: calc(100vh - 6rem) !important;
        min-height: calc(100dvh - 6rem) !important;
    }
}

/* ========================================
   Support Portal Shell: Complete Mobile Fix
   Title is inline with logo in contentLeft.
   Covers header, iframe, alignment, safe areas
   ======================================== */

/* --- Base: nxtShellHeaderTitle alignment on all sizes --- */
.nxtShellHeaderTitle {
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --- Phone (max-width: 600px) --- */
@media screen and (max-width: 600px) {

    /* HEADER BAR: single row, all items inline */
    [id$="supportPortalShellPage"] .sapMBar {
        display: flex !important;
        align-items: center !important;
        padding: 0 0.25rem !important;
        height: 2.75rem !important;
        min-height: 2.75rem !important;
        overflow: visible !important;
    }

    /* LEFT: Home button + logo + title — all inline */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        max-width: none !important;
        min-width: 0 !important;
        gap: 0 !important;
    }

    /* Home button: compact tap target */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft > .sapMBtn {
        flex: 0 0 auto !important;
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        padding: 0 !important;
    }

    /* Logo: compact on mobile */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        flex: 0 0 auto !important;
        max-width: 70px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Remove logo's left margin to save space */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapUiMediumMarginBegin {
        margin-left: 0.25rem !important;
    }

    /* Title inline with logo — fills remaining left-side space, ellipsis on overflow */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Title's left margin — small gap from logo */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapUiSmallMarginBegin {
        margin-left: 0.375rem !important;
    }

    /* Middle area is no longer used — collapse it */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarMiddle {
        flex: 0 0 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* RIGHT: Refresh button — minimal width */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight {
        flex: 0 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight .sapMBtn {
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        padding: 0 !important;
    }

    /* PAGE CONTENT: iframe fills below header with no gap */
    [id$="supportPortalShellPage"] {
        height: 100vh !important;
        height: 100dvh !important;
    }

    [id$="supportPortalShellPage"] > section {
        padding: 0 !important;
    }

    [id$="supportPortalShellPage"] .sapMPageScroll {
        height: calc(100vh - 2.75rem) !important;
        height: calc(100dvh - 2.75rem) !important;
    }

    [id$="supportPortalShellPage"] iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: calc(100vh - 2.75rem) !important;
        min-height: calc(100dvh - 2.75rem) !important;
        border: 0 !important;
        display: block !important;
    }
}

/* --- Very small phones (max-width: 375px) --- */
@media screen and (max-width: 375px) {
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        max-width: 50px !important;
    }

    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle {
        font-size: 0.75rem !important;
    }
}

/* --- Extra small phones (max-width: 340px) --- */
@media screen and (max-width: 340px) {
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        display: none !important;
    }

    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapUiSmallMarginBegin {
        margin-left: 0.25rem !important;
    }
}

/* --- Tablet (max-width: 768px) --- */
@media screen and (max-width: 768px) and (min-width: 601px) {
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle {
        font-size: 1rem !important;
    }

    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        max-width: 90px !important;
    }
}

/* --- Safe area insets for notch/Dynamic Island --- */
@supports (padding: env(safe-area-inset-top)) {
    @media screen and (max-width: 600px) {
        [id$="supportPortalShellPage"] .sapMBar {
            padding-left: calc(0.25rem + env(safe-area-inset-left)) !important;
            padding-right: calc(0.25rem + env(safe-area-inset-right)) !important;
        }
    }
}

/* --- Landscape phones --- */
@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    [id$="supportPortalShellPage"] .sapMBar {
        height: 2.25rem !important;
        min-height: 2.25rem !important;
    }

    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle {
        font-size: 0.75rem !important;
    }

    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        max-width: 50px !important;
    }

    [id$="supportPortalShellPage"] .sapMPageScroll {
        height: calc(100vh - 2.25rem) !important;
        height: calc(100dvh - 2.25rem) !important;
    }

    [id$="supportPortalShellPage"] iframe {
        min-height: calc(100vh - 2.25rem) !important;
        min-height: calc(100dvh - 2.25rem) !important;
    }
}
/* ============================================================
   SHELL HEADER FIT FIX (2026-04-17) - keep full "NXT Support Portal"
   ============================================================ */
@media screen and (max-width: 600px) {
    /* Compact home/refresh buttons */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft > .sapMBtn,
    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight .sapMBtn {
        min-width: 1.75rem !important;
        max-width: 1.75rem !important;
        padding: 0 !important;
    }
    /* Shrink logo to make room */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        max-width: 55px !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapUiMediumMarginBegin {
        margin-left: 0.125rem !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapUiSmallMarginBegin {
        margin-left: 0.25rem !important;
    }
    /* Title fits full: no truncation, wrap if needed, smaller font */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle {
        font-size: 0.75rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.1 !important;
        word-break: normal !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle .sapMTitleInner,
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    /* Allow header bar a bit more height for the title */
    [id$="supportPortalShellPage"] .sapMBar {
        height: auto !important;
        min-height: 2.75rem !important;
        padding: 0.25rem !important;
    }
}

@media screen and (max-width: 375px) {
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        max-width: 45px !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle {
        font-size: 0.6875rem !important;
    }
}

@media screen and (max-width: 340px) {
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        display: none !important;
    }
}

/* ============================================================
   Home redesign — PR #2 (2026-04-21)
   Plasma-mesh backdrop + welcome hero.
   Scoped to Home page only via [id$="--homePage"].
   ============================================================ */

/* Ambient plasma mesh behind Home page content */
[id$="--homePage"] > section {
    background-color: #F6F7FB;
    background-image:
        radial-gradient(900px 600px at 15% 20%, rgba(32, 39, 225, 0.05), transparent 60%),
        radial-gradient(800px 700px at 90% 90%, rgba(32, 39, 225, 0.04), transparent 65%),
        radial-gradient(600px 500px at 20% 95%, rgba(16, 22, 77, 0.04), transparent 60%);
    background-attachment: fixed;
}

/* Welcome hero banner */
.nxtWelcomeHero {
    background: radial-gradient(120% 90% at 20% 15%, var(--nxt-cobalt) 0%, var(--nxt-brilliant) 55%, var(--nxt-midnight) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 32px !important;
    margin: 16px 16px 20px 16px;
    position: relative;
    overflow: hidden;
    min-height: 128px;
    box-sizing: border-box;
    font-family: var(--nxt-font-sans);
}

/* Decorative blur orbs — purely visual */
.nxtWelcomeHero::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(165, 74, 200, 0.25), transparent 65%);
    filter: blur(4px);
    pointer-events: none;
}
.nxtWelcomeHero::after {
    content: '';
    position: absolute;
    right: 180px;
    bottom: -140px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 62, 240, 0.28), transparent 70%);
    pointer-events: none;
}

.nxtWelcomeHeroLeft {
    position: relative;
    z-index: 1;
    gap: 4px;
}

/* Force white text inside the dark hero regardless of SAP theme */
.nxtWelcomeHero .sapMText,
.nxtWelcomeHero .sapMTitle,
.nxtWelcomeHero .sapMTitle .sapMTitleInner {
    color: #fff !important;
}

.nxtWelcomeHeroEyebrow.sapMText {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 4px;
}

.nxtWelcomeHeroTitle.sapMTitle {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    line-height: 1.2 !important;
}

.nxtWelcomeHeroSub.sapMText {
    margin-top: 6px;
    font-size: 13px !important;
    opacity: 0.72;
}

/* Tighten hero on smaller screens */
@media (max-width: 600px) {
    .nxtWelcomeHero {
        padding: 20px 20px !important;
        margin: 12px 8px 16px 8px;
        min-height: 100px;
    }
    .nxtWelcomeHeroTitle.sapMTitle {
        font-size: 22px !important;
    }
}

/* ============================================================
   Home redesign — PR #4 (2026-04-21)
   Glass section panels around tile groups, scoped to Home page.
   No controller change — restyles the sap.m.Panel wrappers
   (class "tileGroup") produced by Home.controller.js.
   Specificity pattern: `body [id$="--homePage"] .tileGroup…`
   to win over `body.nxt-theme-light .tileGroup…` rules above.
   ============================================================ */

/* Sunken glass panel */
body [id$="--homePage"] .tileGroup.sapMPanel {
    background: rgba(246, 247, 251, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
    margin: 14px 16px 0 16px !important;
    box-shadow: 0 1px 2px rgba(16, 22, 77, 0.04);
}

/* Panel header: standalone, no bottom border, compact */
body [id$="--homePage"] .tileGroup .sapMPanelHdr {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 10px 16px !important;
    min-height: 2.5rem !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--nxt-midnight) !important;
    letter-spacing: -0.01em !important;
}

/* Expandable chevron — cobalt, aligned with mockup */
body [id$="--homePage"] .tileGroup .sapMPanelExpandIcon,
body [id$="--homePage"] .tileGroup .sapMPanelExpandIcon .sapUiIcon {
    color: var(--nxt-cobalt) !important;
}

/* Panel content: match mockup .section-body padding */
body [id$="--homePage"] .tileGroup .sapMPanelContent {
    padding: 16px !important;
    background: transparent !important;
    border-top: 0 !important;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .tileGroup.sapMPanel {
        margin: 10px 8px 0 8px !important;
        border-radius: 10px !important;
    }
    body [id$="--homePage"] .tileGroup .sapMPanelContent {
        padding: 12px !important;
    }
}

/* =========================================================
   PR #5 — Glass card tiles (Home view only)
   Restyles GenericTiles as frosted glass cards with hover lift.
   Scoped with [id$="--homePage"] to avoid leaking into other views.
   ========================================================= */
body [id$="--homePage"] .tileLayout.sapMGT {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 2px rgba(16, 22, 77, 0.04),
        0 4px 12px rgba(16, 22, 77, 0.05) !important;
    transition:
        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 220ms ease !important;
}

body [id$="--homePage"] .tileLayout.sapMGT:hover {
    transform: translateY(-3px);
    border-color: rgba(8, 84, 160, 0.35) !important;
    box-shadow:
        0 2px 4px rgba(16, 22, 77, 0.06),
        0 12px 28px rgba(16, 22, 77, 0.10) !important;
}

body [id$="--homePage"] .tileLayout.sapMGT:active {
    transform: translateY(-1px);
    transition-duration: 80ms !important;
}

/* Top accent strip on hover — picks up category color */
body [id$="--homePage"] .tileLayout.sapMGT::before {
    border-radius: 16px 16px 0 0 !important;
    opacity: 0;
    transition: opacity 220ms ease !important;
}
body [id$="--homePage"] .tileLayout.sapMGT:hover::before {
    opacity: 1;
}

/* Dark theme variant */
body.nxt-theme-dark [id$="--homePage"] .tileLayout.sapMGT,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .tileLayout.sapMGT,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .tileLayout.sapMGT {
    background: rgba(30, 36, 72, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.20) !important;
}
body.nxt-theme-dark [id$="--homePage"] .tileLayout.sapMGT:hover,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .tileLayout.sapMGT:hover,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .tileLayout.sapMGT:hover {
    border-color: rgba(120, 170, 255, 0.45) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.30),
        0 14px 32px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .tileLayout.sapMGT {
        border-radius: 12px !important;
    }
    body [id$="--homePage"] .tileLayout.sapMGT:hover {
        transform: none;
    }
}

/* =========================================================
   PR #6 — NXT Topbar (Home view only)
   76px frosted topbar with larger logo.
   NOTE: sap.m.Bar uses absolute positioning internally for
   contentLeft/Middle/Right — do NOT force flex layout on those
   slots (it hides UserMenu). Only adjust Bar-level styling.
   ========================================================= */
body [id$="--homePage"] .nxtTopbar.sapMBar {
    height: 92px !important;
    min-height: 92px !important;
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(16, 22, 77, 0.08) !important;
    box-shadow: 0 1px 2px rgba(16, 22, 77, 0.03);
}

/* Shift contentLeft / contentRight inward for horizontal breathing room,
   AND vertically center within the taller bar (default UI5 Bar slots
   top-align which looks pushed up against a 92px bar).
   sap.m.Bar positions these slots absolutely — we keep that model and
   just tune left/right/top so UserMenu layout stays intact. */
body [id$="--homePage"] .nxtTopbar .sapMBarLeft,
body [id$="--homePage"] .nxtTopbar .sapMBarRight,
body [id$="--homePage"] .nxtTopbar .sapMBarMiddle {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
body [id$="--homePage"] .nxtTopbar .sapMBarLeft {
    left: 32px !important;
}
body [id$="--homePage"] .nxtTopbar .sapMBarRight {
    right: 32px !important;
}

body [id$="--homePage"] .nxtTopbarLogo {
    max-height: 44px !important;
    height: 44px !important;
    width: auto !important;
}

/* Dark theme */
body.nxt-theme-dark [id$="--homePage"] .nxtTopbar.sapMBar,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtTopbar.sapMBar,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtTopbar.sapMBar {
    background: rgba(20, 26, 58, 0.72) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .nxtTopbar.sapMBar {
        height: 68px !important;
        min-height: 68px !important;
    }
    body [id$="--homePage"] .nxtTopbar .sapMBarLeft {
        left: 16px !important;
    }
    body [id$="--homePage"] .nxtTopbar .sapMBarRight {
        right: 16px !important;
    }
    body [id$="--homePage"] .nxtTopbarLogo {
        max-height: 32px !important;
        height: 32px !important;
    }
}

/* =========================================================
   PR #8 — Tile metric polish (Home view only)
   Makes live numeric values (from /tiles API) pop in the new
   glass card aesthetic. No data wiring change — metrics already
   flow from the backend via _refreshTileData (5-min interval).
   ========================================================= */
body [id$="--homePage"] .tileLayout.sapMGT .nxtTileCounterValue {
    font-size: 2.25rem !important;        /* 36px, up from 22px */
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    background: linear-gradient(135deg, var(--nxt-cobalt, #0854a0) 0%, #4f46e5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body [id$="--homePage"] .tileLayout.sapMGT .nxtTileCounterUnit {
    font-size: 0.625rem !important;       /* 10px */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    opacity: 0.55 !important;
    margin-top: 2px !important;
}

/* Dark theme — gradient swapped for brighter anchor colors */
body.nxt-theme-dark [id$="--homePage"] .tileLayout.sapMGT .nxtTileCounterValue,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .tileLayout.sapMGT .nxtTileCounterValue,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .tileLayout.sapMGT .nxtTileCounterValue {
    background: linear-gradient(135deg, #78aaff 0%, #b4a4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .tileLayout.sapMGT .nxtTileCounterValue {
        font-size: 1.625rem !important;   /* 26px on mobile */
    }
}

/* =========================================================
   Glass Card tiles v2 (PR #155) — replaces GenericTile for Home.
   This is the control-level swap approved by Volkmar so tiles match
   the original prototype (bigger card, 2-line description, dashed
   divider, large metric + arrow footer).
   ========================================================= */
body [id$="--homePage"] .nxtGlassCard {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    min-height: 180px !important;
    cursor: pointer;
    outline: none;
    box-shadow:
        0 1px 2px rgba(16, 22, 77, 0.04),
        0 4px 14px rgba(16, 22, 77, 0.05) !important;
    transition:
        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 220ms ease !important;
}

body [id$="--homePage"] .nxtGlassCard:hover {
    transform: translateY(-3px);
    border-color: rgba(32, 39, 225, 0.35) !important;  /* brand cobalt — was legacy SAP blue (8,84,160) until 2026-05-07 */
    box-shadow:
        0 2px 6px rgba(16, 22, 77, 0.08),
        0 14px 32px rgba(16, 22, 77, 0.10) !important;
}

body [id$="--homePage"] .nxtGlassCard:focus-visible {
    outline: 2px solid var(--nxt-cobalt, #0854a0);
    outline-offset: 2px;
}

/* Title row */
body [id$="--homePage"] .nxtGlassCard .nxtCardTitle .sapMTitle {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--nxt-midnight, #10164D) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

/* Subtitle: two-line clamp, no truncation. Regular weight (prototype
   `.card .s` defaults to 400 — UI5 sap.m.Text inherits bold from
   some themes/parents, so pin it explicitly).

   min-height reserves 2 lines of vertical space even when the subtitle
   is a single line ("Manage releases."), so the dashed divider below
   lands at the same baseline across every card in a row. Without this,
   `flex-grow: 1` doesn't expand the box because `-webkit-line-clamp: 2`
   + `overflow: hidden` caps intrinsic height at actual-lines × line-height. */
body [id$="--homePage"] .nxtGlassCard .nxtCardSubtitle,
body [id$="--homePage"] .nxtGlassCard .nxtCardSubtitle.sapMText,
body [id$="--homePage"] .nxtGlassCard .nxtCardSubtitle .sapMText {
    margin-top: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: rgba(16, 22, 77, 0.62) !important;
    line-height: 1.45 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.45em) !important;
    flex-grow: 1;
}

/* Footer: dashed top divider. `margin-top: auto` belt-and-braces to
   the subtitle min-height — guarantees the footer always pins to the
   card bottom so dividers align across the row. */
body [id$="--homePage"] .nxtGlassCard .nxtCardFooter {
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(16, 22, 77, 0.22) !important;
}

/* Metric value — prototype sizing: confident but not loud.
   `transition` prepares for the cobalt tint on card hover (see
   `:hover .nxtCardValue` block below). */
body [id$="--homePage"] .nxtGlassCard .nxtCardValue {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--nxt-midnight, #10164D) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    transition: color 140ms ease !important;
}
body [id$="--homePage"] .nxtGlassCard .nxtCardUnit {
    margin-top: 3px !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: rgba(16, 22, 77, 0.50) !important;
}

/* Card CTA / status line (e.g. "View AI agent performance reports", "Ready")
   — regular weight and smaller size so title stays dominant.
   `transition` prepares for the cobalt tint on card hover. */
body [id$="--homePage"] .nxtGlassCard .nxtCardStatus.sapMText {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--nxt-midnight, #10164D) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
    transition: color 140ms ease !important;
}

/* Arrow affordance — absolutely positioned in the card's top-right
   corner and rotated -45deg so the right-arrow glyph reads as a
   diagonal `↗` "open this app" affordance (matches prototype). */
body [id$="--homePage"] .nxtGlassCard .nxtCardArrow {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    color: rgba(16, 22, 77, 0.35) !important;
    font-size: 1rem !important;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform 200ms ease, color 200ms ease;
    z-index: 2;
}
body [id$="--homePage"] .nxtGlassCard:hover .nxtCardArrow {
    color: var(--nxt-cobalt, #2027e1) !important;
    transform: rotate(-45deg) translate(3px, -3px);
}

/* Prototype parity (2026-04-22): on card hover, the numeric value
   and the status/CTA text tint to brand cobalt — same gesture the
   arrow already makes. Prototype refs:
   `.card:hover .n` (line 156 of preview/index.html)
   `.card:hover .action` (line 169). */
body [id$="--homePage"] .nxtGlassCard:hover .nxtCardValue,
body [id$="--homePage"] .nxtGlassCard:hover .nxtCardStatus,
body [id$="--homePage"] .nxtGlassCard:hover .nxtCardStatus.sapMText {
    color: var(--nxt-cobalt, #2027e1) !important;
}
/* Title needs right padding so long titles don't collide with the
   top-right arrow. */
body [id$="--homePage"] .nxtGlassCard .nxtCardTitle {
    padding-right: 32px !important;
}

/* Dark theme */
body.nxt-theme-dark [id$="--homePage"] .nxtGlassCard,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtGlassCard,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtGlassCard {
    background: rgba(30, 36, 72, 0.60) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 4px 14px rgba(0, 0, 0, 0.20) !important;
}
body.nxt-theme-dark [id$="--homePage"] .nxtGlassCard .nxtCardTitle .sapMTitle,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtGlassCard .nxtCardTitle .sapMTitle,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtGlassCard .nxtCardTitle .sapMTitle,
body.nxt-theme-dark [id$="--homePage"] .nxtGlassCard .nxtCardValue,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtGlassCard .nxtCardValue,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtGlassCard .nxtCardValue {
    color: #ffffff !important;
}
body.nxt-theme-dark [id$="--homePage"] .nxtGlassCard .nxtCardSubtitle,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtGlassCard .nxtCardSubtitle,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtGlassCard .nxtCardSubtitle {
    color: rgba(255, 255, 255, 0.65) !important;
}
body.nxt-theme-dark [id$="--homePage"] .nxtGlassCard .nxtCardUnit,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtGlassCard .nxtCardUnit,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtGlassCard .nxtCardUnit {
    color: rgba(255, 255, 255, 0.50) !important;
}
body.nxt-theme-dark [id$="--homePage"] .nxtGlassCard .nxtCardFooter,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtGlassCard .nxtCardFooter,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtGlassCard .nxtCardFooter {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .nxtGlassCard {
        padding: 16px !important;
        min-height: 150px !important;
        border-radius: 12px !important;
    }
    body [id$="--homePage"] .nxtGlassCard:hover {
        transform: none;
    }
    body [id$="--homePage"] .nxtGlassCard .nxtCardValue {
        font-size: 1.375rem !important;
    }
}

/* ============================================================
   Home redesign — PR #6 (2026-04-21)
   Prototype fidelity: larger hero title, search moved into body,
   "N apps" right-aligned in group headers.
   ============================================================ */

/* Bigger hero title to match prototype (42-44px) */
body [id$="--homePage"] .nxtWelcomeHero {
    min-height: 180px;
    padding: 44px 48px !important;
    margin: 12px 16px 12px 16px;
}
body [id$="--homePage"] .nxtWelcomeHeroTitle.sapMTitle {
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
}
body [id$="--homePage"] .nxtWelcomeHeroSub.sapMText {
    margin-top: 10px;
    font-size: 14px !important;
    opacity: 0.78;
}

/* Search toolbar now inside body — behaves like a card row */
body [id$="--homePage"] .nxtSearchToolbar {
    background: transparent !important;
    padding: 4px 16px 16px 16px !important;
    min-height: 3.25rem !important;
}

/* Panel group headers — render title left, "N apps" right (prototype) */
body [id$="--homePage"] .tileGroup .sapMPanelHdr,
body [id$="--homePage"] .tileGroup > .sapMPanelHeading {
    background: transparent !important;
    border-bottom: 0 !important;
}
body [id$="--homePage"] .nxtGroupHeader.sapMTB {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 2.5rem !important;
}
body [id$="--homePage"] .nxtGroupTitle.sapMTitle,
body [id$="--homePage"] .nxtGroupTitle.sapMTitle .sapMTitleInner {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--nxt-midnight, #10164d) !important;
    letter-spacing: -0.01em;
}
body [id$="--homePage"] .nxtGroupCount.sapMText {
    font-size: 0.8125rem !important;
    color: var(--fg-3, #6b7280) !important;
    padding-right: 4px;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .nxtWelcomeHero {
        min-height: 140px;
        padding: 28px 22px !important;
        margin: 8px 10px 10px 10px;
    }
    body [id$="--homePage"] .nxtWelcomeHeroTitle.sapMTitle {
        font-size: 28px !important;
    }
    body [id$="--homePage"] .nxtSearchToolbar {
        padding: 4px 10px 12px 10px !important;
    }
}

/* ============================================================
   Home redesign — PR #7 (2026-04-21)
   Topbar prototype fidelity — simpler icon set, email text,
   uniform sizing/spacing. Scoped to Home to protect other views.
   Admin features (CRM, DevOps, SAP indicator) are hidden on Home
   via display:none; the fragment + handlers are untouched.
   ============================================================ */

/* Uniform icon treatment in the topbar — all dark navy, same size */
body [id$="--homePage"] .nxtTopbar .sapMBtnTransparent,
body [id$="--homePage"] .nxtTopbar .sapMOTBRoot .sapMBtnTransparent {
    color: #10164d !important;
}
body [id$="--homePage"] .nxtTopbar .sapMBtn .sapUiIcon,
body [id$="--homePage"] .nxtTopbar .sapMBtn .sapUiIconTitle {
    color: #10164d !important;
    font-size: 1.125rem !important;
}
body [id$="--homePage"] .nxtTopbar .sapMBtn {
    min-width: 2.25rem !important;
    padding: 0 0.375rem !important;
}

/* Unified hover for every topbar button — same cobalt wash as the
   email button + search kbd badge. SAP's default is a neutral grey
   with a faint inset shadow, which read as off-brand next to the
   email's `rgba(32, 39, 225, 0.06)` tint. Strip the shadow and paint
   the wash on the inner element (SAP's theming hooks live there). */
body [id$="--homePage"] .nxtTopbar .sapMBtn:hover .sapMBtnInner,
body [id$="--homePage"] .nxtTopbar .sapMBtnTransparent:hover .sapMBtnInner {
    background: rgba(32, 39, 225, 0.06) !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
body [id$="--homePage"] .nxtTopbar .sapMBtn:hover .sapUiIcon,
body [id$="--homePage"] .nxtTopbar .sapMBtn:hover .sapUiIconTitle {
    color: #2027e1 !important;
}
body [id$="--homePage"] .nxtTopbar .nxtLanguageSelector .sapMBtnContent,
body [id$="--homePage"] .nxtTopbar .nxtLanguageSelector.sapMBtn .sapMBtnContent {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.04em;
    color: #10164d !important;
}

/* Email button — shown inline in the topbar, opens User Profile popover on click
   (QA parity 2026-04-22: the email label itself IS the user-menu trigger,
    replacing the former "displayName" button that carried the dropdown).
   Styled to read like plain text but with a subtle caret that hints at the
   dropdown affordance. */
body [id$="--homePage"] .nxtUserEmailBtn.sapMBtn {
    margin: 0 0.25rem 0 0.5rem !important;
    min-width: 0 !important;
}
body [id$="--homePage"] .nxtUserEmailBtn .sapMBtnInner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    min-width: 0 !important;
    border-radius: 6px !important;
    transition: background-color 120ms ease;
}
body [id$="--homePage"] .nxtUserEmailBtn .sapMBtnContent,
body [id$="--homePage"] .nxtUserEmailBtn bdi {
    font-size: 0.8125rem !important;
    color: #10164d !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
/* Caret chevron to signal "click for dropdown" */
body [id$="--homePage"] .nxtUserEmailBtn .sapMBtnInner::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: 1px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(16, 22, 77, 0.55);
    transition: transform 120ms ease, border-top-color 120ms ease;
}
body [id$="--homePage"] .nxtUserEmailBtn:hover .sapMBtnInner {
    background: rgba(32, 39, 225, 0.06) !important;
}
body [id$="--homePage"] .nxtUserEmailBtn:hover .sapMBtnInner::after {
    border-top-color: #2027e1;
}
/* Back-compat: keep the old Text styling in case any cached build still renders it.
   Safe to remove once caches are flushed. */
body [id$="--homePage"] .nxtUserEmailText.sapMText {
    font-size: 0.8125rem !important;
    color: #10164d !important;
    font-weight: 500;
    margin: 0 0.75rem 0 0.5rem;
    white-space: nowrap;
}

/* Avatar — small circular, consistent with icon footprint */
body [id$="--homePage"] .nxtTopbar .nxtUserAvatar .sapFAvatar,
body [id$="--homePage"] .nxtTopbar .nxtUserAvatar {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
}

/* Logo — match prototype scale (~36px) and letter-spacing */
body [id$="--homePage"] .nxtTopbarLogo {
    max-height: 38px !important;
    height: 38px !important;
}

/* Narrow-screen behaviour for the email trigger is handled by UI5's
   OverflowToolbar (priority="Low" on the email button) — when the topbar
   runs out of room, UI5 moves the email into the overflow menu
   automatically. No CSS hide needed. */
@media (max-width: 600px) {
    body [id$="--homePage"] .nxtTopbarLogo {
        max-height: 28px !important;
        height: 28px !important;
    }
    body [id$="--homePage"] .nxtTopbar .sapMBtn .sapUiIcon {
        font-size: 1rem !important;
    }
}

/* ============================================================
   Home redesign — PR #9 (2026-04-21)
   Gutter alignment + avatar-button polish.
   ============================================================ */

/* Keep a minor margin reset on the user avatar button so the icon doesn't
   inherit UI5's default icon-left margin when its text is visible. */
body [id$="--homePage"] .nxtTopbar .nxtUserNameBtn .sapMBtnIcon,
body [id$="--homePage"] .nxtTopbar [id$="-userAvatarButton"] .sapMBtnIcon {
    margin-right: 4px !important;
}

/* Align tile group panels with the hero's 32px-from-viewport gutter.
   Hero has page-padding(16) + CSS margin(16) = 32px each side.
   Panels sit inside ScrollContainer/VBox at just 16px — adding
   another 16px horizontal margin brings them flush. */
body [id$="--homePage"] .tileGroup.sapMPanel {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .tileGroup.sapMPanel {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

/* ============================================================
   SHELL TITLE FORCE ONE LINE (2026-04-18 v5)
   "Support Portal" is short — keep on single row, no wrap
   ============================================================ */
@media screen and (max-width: 600px) {
    [id$="supportPortalShellPage"] .sapMBar {
        height: 2.75rem !important;
        min-height: 2.75rem !important;
        max-height: 2.75rem !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft,
    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight {
        flex-wrap: nowrap !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtShellHeaderTitle,
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 2.75rem !important;
        font-size: 0.875rem !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle .sapMTitleInner,
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle span,
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle bdi {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline !important;
    }
}
@media screen and (max-width: 375px) {
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle {
        font-size: 0.75rem !important;
    }
}

/* ============================================================
   SHELL HEADER FORCE HORIZONTAL LAYOUT (2026-04-18 v6)
   Problem: Title <h4> renders as block, breaks to new line.
   Force entire left bar to be a single horizontal flex row.
   ============================================================ */
@media screen and (max-width: 600px) {

    /* Bar container: single row, no wrap */
    [id$="supportPortalShellPage"] .sapMBar,
    [id$="supportPortalShellPage"] .sapMBarContainer,
    [id$="supportPortalShellPage"] .sapMIBar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        height: 2.75rem !important;
        min-height: 2.75rem !important;
        max-height: 2.75rem !important;
        overflow: hidden !important;
        padding: 0 0.25rem !important;
    }

    /* Left/Right bar sections: horizontal flex, no wrap */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft,
    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight,
    [id$="supportPortalShellPage"] .sapMBar .sapMBarChild {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Left section: fills available space */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Right section: fixed */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight {
        flex: 0 0 auto !important;
    }

    /* EVERY child of contentLeft must be inline-flex (not block) */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft > *,
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapMBarChild {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        vertical-align: middle !important;
        float: none !important;
    }

    /* Title specifically — force inline-flex, nowrap text, ellipsis */
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle,
    [id$="supportPortalShellPage"] .sapMBar .sapMTitle.nxtShellHeaderTitle {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin: 0 0 0 0.375rem !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* Title's inner (h4/span/bdi) — inline so text flows */
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle > *,
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle .sapMTitleInner,
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle span,
    [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle bdi {
        display: inline !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Logo sizing */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        flex: 0 0 auto !important;
        max-width: 60px !important;
        height: auto !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Home button: inline compact */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft > .sapMBtn,
    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight .sapMBtn {
        min-width: 2rem !important;
        max-width: 2rem !important;
        height: 2rem !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Kill any UI5 margin utility classes that break alignment */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapUiMediumMarginBegin {
        margin-left: 0.25rem !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .sapUiSmallMarginBegin {
        margin-left: 0.25rem !important;
    }
}

/* ============================================================
   SHELL OVERRIDE MAX-WIDTH CONFLICT (2026-04-18 v7)
   The .sapMPageHeader .sapMBarLeft { max-width: 110px } rule
   was capping the left bar. Explicitly override with max-width: none.
   ============================================================ */
@media screen and (max-width: 600px) {
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft,
    [id$="supportPortalShellPage"].sapMPageHeader .sapMBarLeft,
    [id$="supportPortalShellPage"] .sapMPageHeader .sapMBarLeft {
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarRight,
    [id$="supportPortalShellPage"].sapMPageHeader .sapMBarRight,
    [id$="supportPortalShellPage"] .sapMPageHeader .sapMBarRight {
        max-width: none !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    [id$="supportPortalShellPage"] .sapMBar .sapMBarMiddle,
    [id$="supportPortalShellPage"] .sapMPageHeader .sapMBarMiddle {
        flex: 0 0 0 !important;
        width: 0 !important;
        display: none !important;
    }

    /* Tighter logo so title definitely fits */
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        max-width: 55px !important;
    }
}
@media screen and (max-width: 375px) {
    [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
        max-width: 45px !important;
    }
}

/* ============================================================
   ZERO-RISK FINAL OVERRIDE (2026-04-18)
   Single block with `html body` prefix for max specificity.
   Wins against all prior scattered rules without deleting them.
   Auto-sizes the shell header — title takes only the space it needs.
   ============================================================ */
@media screen and (max-width: 600px) {

  /* Bar: one row, fixed height */
  html body [id$="supportPortalShellPage"] .sapMBar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
    overflow: hidden !important;
    padding: 0 0.375rem !important;
  }

  /* Left bar: auto-size to content, horizontal flex */
  html body [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Every child of left bar: inline-flex, never wrap */
  html body [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft > * {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    vertical-align: middle !important;
    float: none !important;
  }

  /* Title: inline, nowrap, ellipsis only if truly too wide */
  html body [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 0 0 0.375rem !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* Inner elements (h4/span/bdi) flow inline */
  html body [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle *,
  html body [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle .sapMTitleInner,
  html body [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle span,
  html body [id$="supportPortalShellPage"] .sapMBar .nxtShellHeaderTitle bdi {
    display: inline !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
  }

  /* Logo sensible size */
  html body [id$="supportPortalShellPage"] .sapMBar .sapMBarLeft .nxtResponsiveLogo {
    max-width: 60px !important;
    height: auto !important;
  }

  /* Right bar: auto-size */
  html body [id$="supportPortalShellPage"] .sapMBar .sapMBarRight {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* ============================================================
   Home redesign — PR #10 (2026-04-21)
   Prototype canvas: pure-white topbar + soft lavender-blue page
   body + clear gap above the hero so it stops bleeding upward.

   Why the current build drifts from the prototype:
   - Topbar uses rgba white + backdrop-filter, so the plasma
     gradients below leak through and tint it violet.
   - Page body uses #F6F7FB + four radial plasma blobs, giving
     a warm/purple cast instead of the prototype's cool blue.
   - Hero sat at margin-top:12px which, combined with the
     translucent topbar, visually merged the two surfaces.
   ============================================================ */

/* 1. Topbar — solid white, no translucency, no bleed-through.
   Keep a hairline divider so it reads as a distinct surface. */
body [id$="--homePage"] .nxtTopbar.sapMBar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 2px rgba(16, 22, 77, 0.04) !important;
}

/* 2. Page canvas — replace plasma mesh with a flat lavender-blue
   wash that matches the prototype. A very faint vertical fade
   keeps it from looking papery without reintroducing plasma. */
body [id$="--homePage"] > section {
    background-color: #eef1fa !important;
    background-image: linear-gradient(180deg, #eef1fa 0%, #e8ecf7 100%) !important;
    background-attachment: fixed !important;
}

/* Dark theme — keep the cool tint direction but darker */
body.nxt-theme-dark [id$="--homePage"] > section,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] > section,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] > section {
    background-color: #0b1030 !important;
    background-image: linear-gradient(180deg, #0b1030 0%, #080b22 100%) !important;
}

/* 3. Hero plasma blooms — RE-ENABLED 2026-04-22.
   Earlier build disabled ::before/::after entirely because the
   `filter: blur(4px)` on ::before created a compositing layer that
   escaped the hero's overflow:hidden clip in Blink, painting flat
   top corners. The old comment claimed "the prototype has none" —
   that was wrong. The prototype (preview/index.html .welcome) DOES
   have both pseudo-elements (purple blob top-right + electric-blue
   bloom bottom-right) and they're what give the hero its dramatic
   plasma bloom that live was missing.

   New fix: re-enable both pseudos on Home and kill ONLY the blur
   filter on ::before. The radial gradient is already soft enough
   without the blur — no compositing bug, corners stay rounded. */
body [id$="--homePage"] .nxtWelcomeHero::before,
body [id$="--homePage"] .nxtWelcomeHero::after {
    display: block !important;
    content: '' !important;
}

body [id$="--homePage"] .nxtWelcomeHero::before {
    filter: none !important;
}

body [id$="--homePage"] .nxtWelcomeHero {
    margin: 24px 24px 20px 24px !important;
    padding: 32px 40px !important;
    min-height: 140px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 4px 14px rgba(16, 22, 77, 0.14),
        0 2px 6px rgba(16, 22, 77, 0.08) !important;
}

body [id$="--homePage"] .nxtWelcomeHeroTitle.sapMTitle {
    font-size: 36px !important;
}

@media (max-width: 600px) {
    body [id$="--homePage"] .nxtWelcomeHero {
        margin: 16px 12px 14px 12px !important;
        padding: 22px 22px !important;
        min-height: 110px !important;
        border-radius: 16px !important;
    }
    body [id$="--homePage"] .nxtWelcomeHeroTitle.sapMTitle {
        font-size: 26px !important;
    }
}

/* ============================================================
   Home redesign — PR #11 (2026-04-21)
   Adaptive canvas + kill right-side overflow.

   Cause of the clipped right edge:
   - Page uses class="sapUiContentPadding" which applies
     `margin: 1rem` to each direct child of <section>.
   - Hero/search/panels also carry `width:100%` + their own
     horizontal margins (24px hero, 16px panels).
   - width:100% + margin = total footprint wider than parent,
     so the right edge spills past the viewport and content
     like "6 apps" clips to "6 ap".

   Fix: centralize horizontal spacing on the section (padding
   on <section> itself), zero out child margins, let children
   fill the padded box cleanly. Layout becomes adaptive with
   fluid breakpoints + a max-width cap so ultra-wide screens
   don't sprawl.
   ============================================================ */

/* Canvas: fluid horizontal padding + max-width cap centered.
   padding-top is 24px (NOT 0) — critical: with padding-top:0
   and no BFC on section, the hero's margin-top: 24px collapses
   through section's top edge and escapes outward, making the
   hero sit flush against the topbar. A real padding-top blocks
   the collapse AND guarantees the gap. */
body [id$="--homePage"] > section {
    padding-left: clamp(16px, 2.5vw, 40px) !important;
    padding-right: clamp(16px, 2.5vw, 40px) !important;
    padding-top: clamp(56px, 8vw, 112px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Inner content — fluid, fills the entire screen width.
   WAS: @media (min-width: 1600px) capped content at 1560px and
   centred it, which froze the canvas and left a dead band on the
   right of wide/4K monitors. Removed 2026-06-25 (Launchpad
   Full-Width Fix & DS Audit). The only horizontal gutter is now
   the fluid clamp(16px, 2.5vw, 40px) section padding above. */
body [id$="--homePage"] > section > * {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Zero the sapUiContentPadding child margins — we own horizontal
   spacing via the section padding above. Vertical margins stay. */
body [id$="--homePage"].sapUiContentPadding > section > *,
body [id$="--homePage"] .sapMPageScroll > section > *,
body [id$="--homePage"] > section > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hero — width fills section content box, no side margins.
   margin-top: 0 because section padding-top owns the top gap.
   margin-bottom is ~half the section padding-top clamp. Pooja's
   ask (2026-04-22): optically the bottom gap always reads larger
   than an equal top gap (open space below a dark block feels wider
   than space above it bounded by the topbar), so match visually
   by making the bottom measurement smaller than the top. Prototype
   itself sits at a flat 20px — halving the clamp lands in between. */
body [id$="--homePage"] .nxtWelcomeHero {
    margin-top: 0 !important;
    margin-bottom: clamp(28px, 4vw, 56px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Search toolbar — flush, no extra padding on sides, and kill the
   `sapUiContentPadding` 1rem vertical margin UI5 injects on each section
   child (we zero sides elsewhere but missed top/bottom — that was leaking
   ~16px of extra space above the search pill, making the hero-to-search
   gap look bigger than the topbar-to-hero gap). */
body [id$="--homePage"] .nxtSearchToolbar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Tile group panels — flush inside section padding */
body [id$="--homePage"] .tileGroup.sapMPanel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Group count ("6 apps") — never let it truncate. Right padding
   pushes the count inward so the vertical scrollbar (overlay on
   macOS, classic on Windows) doesn't paint over it. */
body [id$="--homePage"] .nxtGroupCount.sapMText {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding-right: 18px !important;
}

/* ScrollContainer for tile groups — full width of section box.
   `scrollbar-gutter: stable` reserves scrollbar space for classic
   scrollbars; the group-header right padding above handles the
   macOS overlay-scrollbar case. */
body [id$="--homePage"] #tileGroupsContainer,
body [id$="--homePage"] [id$="--tileGroupsContainer"] {
    width: 100% !important;
    box-sizing: border-box !important;
}
body [id$="--homePage"] #tileGroupsContainer .sapMScrollCont,
body [id$="--homePage"] [id$="--tileGroupsContainer"] .sapMScrollCont {
    scrollbar-gutter: stable !important;
}

/* Mobile — tighter canvas padding */
@media (max-width: 600px) {
    body [id$="--homePage"] > section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ============================================================
   Home redesign — PR #12 (2026-04-21)
   Glass fidelity — lift the prototype's exact card spec
   (preview/index.html) so cards read as real frosted glass.

   What was missing in the live build vs the prototype:
   1. The bright-white top edge — prototype uses
      `box-shadow: inset 0 1px 0 rgba(255,255,255,0.9)` as a
      1px glass lip highlight. Live build had no inset.
   2. Card was 0.88 opaque + blur(10px). Prototype is 0.60
      opaque + blur(18px) saturate(180%) — the lower opacity +
      saturate is what makes it *look* like frosted glass.
   3. Prototype has a `::before` radial shine (white top-right,
      faint navy bottom-left) that cements the lit-from-above
      glass reading. Live build had none.
   4. Most critically: glass needs something behind to blur.
      PR #10 had flattened the canvas to solid lavender; a
      flat color + 60% white overlay is indistinguishable
      from a pale card. Prototype runs a plasma mesh (4
      radial gradients) behind everything, giving the blur
      something to chew on.
   ============================================================ */

/* 1. Restore plasma mesh behind the Home canvas — lifted
   verbatim from preview/index.html `.scene-home::before`.
   Keeps the cool-tint reading Pooja asked for (base stays
   in the blue family) but gives depth for the glass blur. */
body [id$="--homePage"] > section {
    background-color: #F6F7FB !important;
    background-image:
        radial-gradient(900px 600px at 15% 20%, rgba(32, 39, 225, 0.05), transparent 60%),
        radial-gradient(800px 700px at 90% 90%, rgba(32, 39, 225, 0.04), transparent 65%),
        radial-gradient(600px 500px at 20% 95%, rgba(16, 22, 77, 0.04), transparent 60%) !important;
    background-attachment: fixed !important;
}

/* 2. Card — exact prototype spec */
body [id$="--homePage"] .nxtGlassCard {
    position: relative !important;
    background: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.80) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
    overflow: hidden !important;
}

/* Radial shine pseudo — lit-from-above glass effect. Sits
   behind content (z-index 0), content bumped to z 1 below. */
body [id$="--homePage"] .nxtGlassCard::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 0.55 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(16, 22, 77, 0.06), transparent 55%) !important;
    transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    z-index: 0 !important;
}

/* Keep card content above the shine layer */
body [id$="--homePage"] .nxtGlassCard > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Hover: stronger inset + shine brightens + lift */
body [id$="--homePage"] .nxtGlassCard:hover {
    border-color: rgba(255, 255, 255, 0.90) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.60) !important;
    transform: translateY(-3px) !important;
}
body [id$="--homePage"] .nxtGlassCard:hover::before {
    opacity: 1 !important;
}

/* 3. Tile group panel body — sunken glass sheet holding the
   cards. Prototype `.section-body` gives the whole tile grid
   its own subtle frosted rectangle. */
body [id$="--homePage"] .tileGroup .sapMPanelContent {
    background: rgba(246, 247, 251, 0.50) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.60) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

/* Dark theme: card glass shifts to tinted navy, keep inset
   highlight so glass lip still reads against dark canvas */
body.nxt-theme-dark [id$="--homePage"] .nxtGlassCard,
body.nxt-theme-sap_horizon_dark [id$="--homePage"] .nxtGlassCard,
body.nxt-theme-sap_horizon_hcb [id$="--homePage"] .nxtGlassCard {
    background: rgba(30, 36, 72, 0.50) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ============================================================
   Home redesign — PR #13 (2026-04-21)
   Topbar: restore avatar icon, shrink logo.

   - Avatar icon was disappearing because PR #9 hid
     `.sapMBtnContent` to drop the user's displayName. In some
     UI5 render paths `.sapMBtnContent` can wrap both icon and
     text, not just text. Force-show the icon wrapper classes
     directly so nothing clips it. Still hide the bdi/text.
   - Logo was 38px — brought down to 30px per Pooja feedback
     ("reduce the logo !!!"). 24px on mobile.
   ============================================================ */

/* Force avatar silhouette icon visible on Home (override any
   earlier hide). Text remains hidden via its own rule above. */
body [id$="--homePage"] .nxtTopbar .nxtUserNameBtn .sapMBtnIcon,
body [id$="--homePage"] .nxtTopbar .nxtUserNameBtn .sapMBtnIconLeft,
body [id$="--homePage"] .nxtTopbar .nxtUserNameBtn .sapUiIcon,
body [id$="--homePage"] .nxtTopbar [id$="-userAvatarButton"] .sapMBtnIcon,
body [id$="--homePage"] .nxtTopbar [id$="-userAvatarButton"] .sapMBtnIconLeft,
body [id$="--homePage"] .nxtTopbar [id$="-userAvatarButton"] .sapUiIcon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1.125rem !important;
    color: #10164d !important;
    margin: 0 !important;
}

/* Shrink logo per prototype proportions */
body [id$="--homePage"] .nxtTopbarLogo {
    max-height: 30px !important;
    height: 30px !important;
}
@media (max-width: 600px) {
    body [id$="--homePage"] .nxtTopbarLogo {
        max-height: 24px !important;
        height: 24px !important;
    }
}

/* ============================================================
   Home redesign — PR #14 (2026-04-21)
   Search bar — single pill (kill "container inside container").

   Pooja: "the search bar needs correcting too.. it looks weird..
   as if the container inside a container.."

   Root cause: sap.m.SearchField renders as
     <div class="sapMSF nxtSearchField">     <- root, themed w/ bg+border
       <form class="sapMSFF">                 <- form wrapper, also padded
         <input class="sapMSFI">              <- input itself
         ...icons
       </form>
     </div>
   Our earlier rule reset `.sapMSF` (border/bg/shadow) and styled
   `.sapMSFI` (input) as a 10px-radius pill. But in the horizon
   theme path actually rendering in prod, the OUTER `.sapMSF`
   still holds subtle padding AND the form wrapper `.sapMSFF`
   inherits background — so you see the pill AND a faint frame
   around it. Fix: hard-zero the root + form, only the input
   carries the pill look.
   ============================================================ */
body [id$="--homePage"] .nxtSearchField,
body [id$="--homePage"] .nxtSearchField.sapMSF,
body [id$="--homePage"] .nxtSearchField .sapMSF,
body [id$="--homePage"] .nxtSearchField form,
body [id$="--homePage"] .nxtSearchField .sapMSFF {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Re-assert the inner pill so nothing above weakens it */
body [id$="--homePage"] .nxtSearchField .sapMSFI {
    background-color: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
    height: 2.625rem !important;
    padding: 0 0.75rem !important;
    box-shadow: none !important;
}
body [id$="--homePage"] .nxtSearchField .sapMSFI:focus-within {
    border-color: var(--nxt-cobalt) !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}

/* ============================================================
   Notifications admin tab (SAP System Manager → Notifications)
   Minimal brand pass: glass panels, NXT typography, cobalt
   accent on active tabs/buttons, rounded corners. All rules
   scoped to `--notificationsContentView` so nothing leaks to
   sibling admin tabs (Users, Audit, Terms, etc.).
   ============================================================ */

/* Stat tiles at top (Email Templates / Teams Channels / Sent Today) */
body [id$="--notificationsContentView"] .sapMGT {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(10px) saturate(170%);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 2px rgba(16, 22, 77, 0.04),
        0 4px 12px rgba(16, 22, 77, 0.05) !important;
    transition: transform 180ms var(--nxt-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow 180ms var(--nxt-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
body [id$="--notificationsContentView"] .sapMGT:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(16, 22, 77, 0.06),
        0 10px 24px rgba(16, 22, 77, 0.08) !important;
}
body [id$="--notificationsContentView"] .sapMGTHdrTxt {
    font-family: var(--nxt-font-sans) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.01em !important;
}
body [id$="--notificationsContentView"] .sapMGTSubHdrTxt {
    font-family: var(--nxt-font-sans) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: var(--fg-2) !important;
}
body [id$="--notificationsContentView"] .sapMNCValueScr,
body [id$="--notificationsContentView"] .sapMNCValue {
    color: var(--nxt-cobalt) !important;
}

/* Service-unavailable MessageStrip — softer, rounded */
body [id$="--notificationsContentView"] .sapMMsgStrip {
    border-radius: 10px !important;
    background: rgba(255, 251, 235, 0.80) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(217, 119, 6, 0.30) !important;
}

/* Inner IconTabBar — cobalt on the active tab */
body [id$="--notificationsContentView"] .sapMITBHead {
    background: transparent !important;
    border-bottom: 1px solid var(--hair) !important;
}
body [id$="--notificationsContentView"] .sapMITBFilter .sapMITBText,
body [id$="--notificationsContentView"] .sapMITBFilter .sapMITBCount {
    font-family: var(--nxt-font-sans) !important;
    color: var(--fg-2) !important;
    font-weight: 500 !important;
}
body [id$="--notificationsContentView"] .sapMITBFilter.sapMITBSelected .sapMITBText {
    color: var(--nxt-cobalt) !important;
    font-weight: 600 !important;
}
body [id$="--notificationsContentView"] .sapMITBFilter.sapMITBSelected .sapUiIcon {
    color: var(--nxt-cobalt) !important;
}

/* Tables — rounded, light glass background, cobalt row hover */
body [id$="--notificationsContentView"] .sapMList {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--hair) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(16, 22, 77, 0.03);
}
body [id$="--notificationsContentView"] .sapMListTblRow:hover > .sapMListTblCell,
body [id$="--notificationsContentView"] .sapMLIB-CTX:hover {
    background: rgba(32, 39, 225, 0.04) !important;
}
body [id$="--notificationsContentView"] .sapMListTblHeader,
body [id$="--notificationsContentView"] .sapMListTblHeaderCell {
    background: rgba(246, 247, 251, 0.70) !important;
    font-family: var(--nxt-font-sans) !important;
    font-weight: 600 !important;
    color: var(--ink-700) !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

/* Table-header toolbar (title + Add/Refresh) — transparent, cleaner title */
body [id$="--notificationsContentView"] .sapMListTblHdr .sapMTB,
body [id$="--notificationsContentView"] .sapMListHdr {
    background: transparent !important;
    border: none !important;
}
body [id$="--notificationsContentView"] .sapMListTblHdr .sapMTitle,
body [id$="--notificationsContentView"] .sapMListHdr .sapMTitle {
    font-family: var(--nxt-font-sans) !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    font-size: 16px !important;
}

/* Emphasized buttons — platform canon (matches Support Portal's New Ticket).
   Deeper-cobalt hover (#1A1FC4) instead of ultramarine; brilliant cobalt
   (#0C056D) on :active; 10px radius, no resting shadow, 30% focus ring. */
body [id$="--notificationsContentView"] .sapMBtnEmphasized .sapMBtnInner {
    background: var(--nxt-cobalt) !important;
    border-color: var(--nxt-cobalt) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body [id$="--notificationsContentView"] .sapMBtnEmphasized:hover .sapMBtnInner {
    background: var(--nxt-cobalt-hover) !important;
    border-color: var(--nxt-cobalt-hover) !important;
}
body [id$="--notificationsContentView"] .sapMBtnEmphasized:active .sapMBtnInner {
    background: var(--nxt-brilliant) !important;
    border-color: var(--nxt-brilliant) !important;
}
body [id$="--notificationsContentView"] .sapMBtnEmphasized:focus-within .sapMBtnInner {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.30) !important;
}

/* Transparent icon buttons — rounded + subtle cobalt hover */
body [id$="--notificationsContentView"] .sapMBtnTransparent .sapMBtnInner {
    border-radius: 8px !important;
}
body [id$="--notificationsContentView"] .sapMBtnTransparent:hover .sapMBtnInner {
    background: rgba(32, 39, 225, 0.06) !important;
}
body [id$="--notificationsContentView"] .sapMBtnTransparent:hover .sapUiIcon {
    color: var(--nxt-cobalt) !important;
}

/* SearchField — match the launchpad pill look */
body [id$="--notificationsContentView"] .sapMSF {
    background: transparent !important;
    border: none !important;
}
body [id$="--notificationsContentView"] .sapMSF .sapMSFF,
body [id$="--notificationsContentView"] .sapMSFI {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body [id$="--notificationsContentView"] .sapMSFI:focus-within,
body [id$="--notificationsContentView"] .sapMSF.sapMFocus .sapMSFF {
    border-color: var(--nxt-cobalt) !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}

/* Select dropdowns (Category/Priority/Status) */
body [id$="--notificationsContentView"] .sapMSlt {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
body [id$="--notificationsContentView"] .sapMSlt:hover,
body [id$="--notificationsContentView"] .sapMSlt:focus-within {
    border-color: var(--nxt-cobalt) !important;
}

/* Switch (active/inactive per template) — cobalt when on */
body [id$="--notificationsContentView"] .sapMSwtOn .sapMSwtTrack {
    background: var(--nxt-cobalt) !important;
    border-color: var(--nxt-cobalt) !important;
}


/* === Ring spinner — modern brand loading indicator (2026-05-07) ============ */
/* Used in Home.view.xml loading state. Does not replace .nxtSpinIcon yet —
   that class still drives 5 other off-brand spots (AppContainer + Mailmanager);
   this is the new canonical recipe being trialled here first.                  */
.nxtRingSpinner {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.5rem;
}
.nxtRingSpinner .nxtRingSpinner-ring {
    fill: none;
    stroke: rgba(16, 22, 77, 0.18);
    stroke-width: 5;
}
.nxtRingSpinner .nxtRingSpinner-arc {
    fill: none;
    stroke: #10164D;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 38 126;
    transform-origin: 25px 25px;
    animation: nxtRingSpin 0.9s linear infinite;
}
@keyframes nxtRingSpin {
    to { transform: rotate(360deg); }
}


/* ============================================================
   NXT Brand pass — Upload Documents (Support & Operations)
   Scope: body [id$="--uploaddocuments"]
   Router viewId: uploaddocuments (apps/launchpad/webapp/manifest.json)
   View: apps/launchpad/webapp/uploaddocuments/view/UploadDocuments.view.xml
   This is a launchpad sub-app (viewLevel 2). The launchpad shell already
   provides the canonical 92px outer top bar — this view's customHeader is
   functionally an INNER toolbar, so the 56px inner-toolbar recipe applies
   (NOT the 92px outer-bar lock). See feedback_topbar_height_check_first.md
   ============================================================ */

/* Page background — light sunken to let the glass panels read as cards */
body [id$="--uploaddocuments"].sapMPage,
body [id$="--uploaddocuments"] > .sapMPage {
    background: var(--bg-sunken) !important;
}

/* Inner toolbar (customHeader OverflowToolbar) — 56px glass, navy hairline */
body [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMTB,
body [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMOTB {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(10px) saturate(170%);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    border-bottom: 1px solid rgba(16, 22, 77, 0.08) !important;
    box-shadow: 0 1px 2px rgba(16, 22, 77, 0.03) !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 32px !important;
}
body [id$="--uploaddocuments"] .nxtUdInnerToolbar .sapMTitle {
    color: var(--ink-900) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
}

/* KPI strip in body (counts moved out of the chrome) */
body [id$="--uploaddocuments"] .nxtUdStatsStrip {
    padding: 4px 8px 0 8px !important;
    gap: 24px;
}
body [id$="--uploaddocuments"] .nxtUdStat .sapMObjStatusTitle {
    color: var(--fg-2) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
    margin-right: 6px;
}
body [id$="--uploaddocuments"] .nxtUdStat .sapMObjStatusText {
    color: var(--nxt-cobalt) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Info MessageStrip — small glass with cobalt left accent */
body [id$="--uploaddocuments"] .sapMMsgStrip {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-left: 3px solid var(--nxt-cobalt) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 22, 77, 0.04) !important;
    color: var(--ink-900) !important;
}
body [id$="--uploaddocuments"] .sapMMsgStrip .sapMMsgStripIcon,
body [id$="--uploaddocuments"] .sapMMsgStrip > .sapUiIcon {
    color: var(--nxt-cobalt) !important;
}

/* Panels — medium glass workhorse recipe */
body [id$="--uploaddocuments"] .sapMPanel {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(10px) saturate(170%);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 2px rgba(16, 22, 77, 0.04),
        0 4px 12px rgba(16, 22, 77, 0.05) !important;
}
body [id$="--uploaddocuments"] .sapMPanelHdr,
body [id$="--uploaddocuments"] .sapMPanel .sapMTitle {
    color: var(--ink-900) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
body [id$="--uploaddocuments"] .sapMPanelExpandable .sapMBtn .sapUiIcon,
body [id$="--uploaddocuments"] .sapMPanelExpandableIcon {
    color: var(--nxt-cobalt) !important;
}
/* Panel header toolbar (the one wrapping SearchField + Refresh) — transparent
   so the panel glass shows through without a stacked second surface */
body [id$="--uploaddocuments"] .sapMPanel > .sapMTB,
body [id$="--uploaddocuments"] .sapMPanelHeaderTB {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Required-label asterisk — brand danger red instead of theme magenta */
body [id$="--uploaddocuments"] .sapMLabel.sapMLabelRequired:before,
body [id$="--uploaddocuments"] .sapMLabel.sapMLabelRequired:after,
body [id$="--uploaddocuments"] .sapMLabelRequired:before,
body [id$="--uploaddocuments"] .sapMLabelRequired:after,
body [id$="--uploaddocuments"] .sapMLabelColonAndRequired:before,
body [id$="--uploaddocuments"] .sapMLabelColonAndRequired:after {
    color: var(--nxt-danger) !important;
}

/* Inputs (Title, FileUploader visible input) — hair border, 10px radius, cobalt focus */
body [id$="--uploaddocuments"] .sapMInputBaseContentWrapper {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
}
body [id$="--uploaddocuments"] .sapMInputBaseContentWrapper:hover {
    border-color: rgba(32, 39, 225, 0.5) !important;
}
body [id$="--uploaddocuments"] .sapMInputBase:focus-within .sapMInputBaseContentWrapper,
body [id$="--uploaddocuments"] .sapMFocus.sapMInputBaseContentWrapper {
    border-color: var(--nxt-cobalt) !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}

/* Select (Category dropdown) */
body [id$="--uploaddocuments"] .sapMSlt {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
}
body [id$="--uploaddocuments"] .sapMSlt:hover {
    border-color: rgba(32, 39, 225, 0.5) !important;
}
body [id$="--uploaddocuments"] .sapMSlt:focus-within,
body [id$="--uploaddocuments"] .sapMSltHoverState.sapMFocus {
    border-color: var(--nxt-cobalt) !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}
body [id$="--uploaddocuments"] .sapMSltArrow {
    color: var(--nxt-cobalt) !important;
}

/* FileUploader — keep the input box brand-aligned (button picks up secondary
   recipe via the global non-Emphasized non-Transparent rule below) */
body [id$="--uploaddocuments"] .sapUiFup .sapMInputBaseContentWrapper {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
}

/* Primary cobalt button (Upload) — platform canon, scoped */
body [id$="--uploaddocuments"] .sapMBtnEmphasized .sapMBtnInner {
    background: var(--nxt-cobalt) !important;
    border-color: var(--nxt-cobalt) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
}
body [id$="--uploaddocuments"] .sapMBtnEmphasized:hover .sapMBtnInner {
    background: var(--nxt-cobalt-hover) !important;
    border-color: var(--nxt-cobalt-hover) !important;
}
body [id$="--uploaddocuments"] .sapMBtnEmphasized:active .sapMBtnInner {
    background: var(--nxt-brilliant) !important;
    border-color: var(--nxt-brilliant) !important;
}
body [id$="--uploaddocuments"] .sapMBtnEmphasized:focus-within .sapMBtnInner {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.30) !important;
}
body [id$="--uploaddocuments"] .sapMBtnEmphasized .sapMBtnInner .sapUiIcon,
body [id$="--uploaddocuments"] .sapMBtnEmphasized .sapMBtnInner .sapMBtnIcon {
    color: #fff !important;
}

/* Secondary buttons (Reset, FileUploader Browse) — white, hair border, cobalt hover */
body [id$="--uploaddocuments"] .sapMBtn:not(.sapMBtnEmphasized):not(.sapMBtnTransparent) .sapMBtnInner {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink-900) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
}
body [id$="--uploaddocuments"] .sapMBtn:not(.sapMBtnEmphasized):not(.sapMBtnTransparent):hover .sapMBtnInner {
    background: rgba(32, 39, 225, 0.04) !important;
    border-color: var(--nxt-cobalt) !important;
    color: var(--nxt-cobalt) !important;
}
body [id$="--uploaddocuments"] .sapMBtn:not(.sapMBtnEmphasized):not(.sapMBtnTransparent):hover .sapMBtnInner .sapUiIcon {
    color: var(--nxt-cobalt) !important;
}
body [id$="--uploaddocuments"] .sapMBtn:not(.sapMBtnEmphasized):not(.sapMBtnTransparent):focus-within .sapMBtnInner {
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}

/* Transparent buttons (back, table action icons, refresh) */
body [id$="--uploaddocuments"] .sapMBtnTransparent .sapMBtnInner {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
body [id$="--uploaddocuments"] .sapMBtnTransparent:hover .sapMBtnInner {
    background: rgba(32, 39, 225, 0.06) !important;
    border-color: transparent !important;
}
body [id$="--uploaddocuments"] .sapMBtnTransparent:hover .sapMBtnInner .sapUiIcon {
    color: var(--nxt-cobalt) !important;
}
body [id$="--uploaddocuments"] .sapMBtnTransparent:focus-within .sapMBtnInner {
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}

/* SearchField — three-layer pill recipe */
body [id$="--uploaddocuments"] .sapMSF,
body [id$="--uploaddocuments"] .sapMSF .sapMSFF {
    background: transparent !important;
    border: none !important;
}
body [id$="--uploaddocuments"] .sapMSFI {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
}
body [id$="--uploaddocuments"] .sapMSFI:focus-within {
    border-color: var(--nxt-cobalt) !important;
    box-shadow: 0 0 0 3px rgba(32, 39, 225, 0.14) !important;
}
body [id$="--uploaddocuments"] .sapMSFB,
body [id$="--uploaddocuments"] .sapMSFR {
    color: var(--nxt-cobalt) !important;
}

/* Table — rounded glass container, brand headers, cobalt row hover */
body [id$="--uploaddocuments"] .sapMList,
body [id$="--uploaddocuments"] .sapMListUl,
body [id$="--uploaddocuments"] .sapMListTbl {
    background: transparent !important;
}
body [id$="--uploaddocuments"] .sapMListTblHeader,
body [id$="--uploaddocuments"] .sapMListTblHeaderCell {
    background: rgba(246, 247, 251, 0.70) !important;
    font-family: var(--nxt-font-sans) !important;
    font-weight: 600 !important;
    color: var(--ink-700) !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--hair) !important;
}
body [id$="--uploaddocuments"] .sapMListTblRow:hover,
body [id$="--uploaddocuments"] .sapMListTblRow:hover .sapMListTblCell {
    background: rgba(32, 39, 225, 0.04) !important;
}
body [id$="--uploaddocuments"] .sapMListTblCell {
    border-bottom: 1px solid var(--hair-2) !important;
}

/* ObjectIdentifier (title + filename) typography */
body [id$="--uploaddocuments"] .sapMObjectIdentifierTitle,
body [id$="--uploaddocuments"] .sapMObjectIdentifierTitle .sapMText,
body [id$="--uploaddocuments"] .sapMObjectIdentifierTitle .sapMLnk {
    color: var(--ink-900) !important;
    font-weight: 600 !important;
}
body [id$="--uploaddocuments"] .sapMObjectIdentifierText {
    color: var(--fg-2) !important;
}

/* Category cells (ObjectStatus state="Information") — cobalt links, not SAP blue */
body [id$="--uploaddocuments"] .sapMObjStatusInformation,
body [id$="--uploaddocuments"] .sapMObjStatusInformation .sapMObjStatusText,
body [id$="--uploaddocuments"] .sapMListTblCell .sapMObjStatusInformation .sapMObjStatusText {
    color: var(--nxt-cobalt) !important;
}

/* Embedded count (ObjectNumber) — Success/Warning/Error map to brand tokens */
body [id$="--uploaddocuments"] .sapMObjectNumberStatusSuccess,
body [id$="--uploaddocuments"] .sapMObjectNumberStatusSuccess .sapMObjectNumberText,
body [id$="--uploaddocuments"] .sapMObjectNumberStatusSuccess .sapMObjectNumberUnit {
    color: var(--nxt-success) !important;
}
body [id$="--uploaddocuments"] .sapMObjectNumberStatusWarning,
body [id$="--uploaddocuments"] .sapMObjectNumberStatusWarning .sapMObjectNumberText,
body [id$="--uploaddocuments"] .sapMObjectNumberStatusWarning .sapMObjectNumberUnit {
    color: var(--nxt-warning) !important;
}
body [id$="--uploaddocuments"] .sapMObjectNumberStatusError,
body [id$="--uploaddocuments"] .sapMObjectNumberStatusError .sapMObjectNumberText,
body [id$="--uploaddocuments"] .sapMObjectNumberStatusError .sapMObjectNumberUnit {
    color: var(--nxt-danger) !important;
}

/* Status icons (accept / decline) — brand greens and reds */
body [id$="--uploaddocuments"] .sapMListTblCell .sapUiIconColorPositive,
body [id$="--uploaddocuments"] .sapMListTblCell .sapUiIcon[data-sap-ui-icon-content][style*="color"][style*="#00"] {
    color: var(--nxt-success) !important;
}
body [id$="--uploaddocuments"] .sapMListTblCell .sapUiIconColorCritical,
body [id$="--uploaddocuments"] .sapMListTblCell .sapUiIconColorNegative {
    color: var(--nxt-danger) !important;
}

/* Dark theme variants — toolbar + panels (per brand canon, mandatory) */
body.nxt-theme-dark [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMTB,
body.nxt-theme-sap_horizon_dark [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMTB,
body.nxt-theme-sap_horizon_hcb [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMTB,
body.nxt-theme-dark [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMOTB,
body.nxt-theme-sap_horizon_dark [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMOTB,
body.nxt-theme-sap_horizon_hcb [id$="--uploaddocuments"] .nxtUdInnerToolbar.sapMOTB {
    background: rgba(20, 26, 58, 0.72) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.nxt-theme-dark [id$="--uploaddocuments"] .sapMPanel,
body.nxt-theme-sap_horizon_dark [id$="--uploaddocuments"] .sapMPanel,
body.nxt-theme-sap_horizon_hcb [id$="--uploaddocuments"] .sapMPanel {
    background: rgba(20, 26, 58, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Marketing category accent — cobalt → midnight, matches the section's
   brand identity so the row of tiles reads as one visual family even
   without per-tile artwork. */
.tileCategory-marketing .sapMGTContent .sapUiIcon {
    color: var(--nxt-cobalt, #2027E1) !important;
}
@media (prefers-color-scheme: light) {
    body.nxt-theme-light .tileCategory-marketing.sapMGT:hover,
    body.nxt-theme-dark .tileCategory-marketing.sapMGT:hover {
        border-color: rgba(32, 39, 225, 0.35) !important;
    }
}


/* ============================================================
   Canvas padding alignment — Upload Documents
   ------------------------------------------------------------
   The Page in UploadDocuments.view.xml carries the UI5 utility
   class `sapUiResponsiveContentPadding`, whose desktop rule is
   roughly `padding: 1rem 16%` — which gives ~170px gutters on
   wide monitors and leaves the panels floating in the middle.
   That percentage gutter is a STOCK SAP default, NOT the brand
   canon. Home's canon (defined ~line 3383 of this file) is:
       padding-left/right: clamp(16px, 2.5vw, 40px)
       content is fluid full width (no max-width cap)
   Override the UI5 default here so the view fills the canvas
   the same way Home does.
   ============================================================ */
body [id$="--uploaddocuments"] .sapUiResponsiveContentPadding {
    padding-left: clamp(16px, 2.5vw, 40px) !important;
    padding-right: clamp(16px, 2.5vw, 40px) !important;
}
body [id$="--uploaddocuments"] .sapMPage > section > * {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   Full-width guard (2026-06-25 — Launchpad Full-Width Fix & DS Audit)
   ------------------------------------------------------------
   Appended last so it wins the cascade regardless of source
   order. Both the Home canvas and the Upload Documents view must
   fill the viewport on wide / 4K monitors; the only horizontal
   gutter is the fluid clamp() section padding defined above.
   ============================================================ */
body [id$="--homePage"] > section > *,
body [id$="--uploaddocuments"] .sapMPage > section > * {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   First-login Welcome Tour (utils/WelcomeTour.js)
   Brand-styled, native guided tour: dim backdrop + spotlight
   "hole" around the highlighted element + an explanation bubble.
   Sits above everything (incl. UI5 popovers) so it can point at
   the profile menu and the auto-logout setting inside it.
   ============================================================ */
.nxt-tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483000;       /* above UI5 popovers/block layers */
    background: transparent;   /* dimming comes from the hole's box-shadow */
    pointer-events: auto;      /* block interaction with the app during the tour */
    cursor: default;
}

/* Centered steps with no spotlight: dim the backdrop directly. */
.nxt-tour-backdrop--dim {
    background: rgba(16, 22, 77, 0.55);   /* Midnight @ 55% */
}

.nxt-tour-hole {
    position: fixed;
    display: none;
    border-radius: 12px;
    /* The huge spread shadow dims the whole screen except this rectangle. */
    box-shadow: 0 0 0 9999px rgba(16, 22, 77, 0.55);   /* Midnight @ 55% */
    outline: 2px solid var(--nxt-cobalt, #2027E1);
    outline-offset: 2px;
    pointer-events: none;
    transition: top 0.2s var(--nxt-ease-out, ease), left 0.2s var(--nxt-ease-out, ease),
                width 0.2s var(--nxt-ease-out, ease), height 0.2s var(--nxt-ease-out, ease);
}

.nxt-tour-bubble {
    position: fixed;
    z-index: 2147483001;       /* above the backdrop */
    box-sizing: border-box;
    width: 360px;
    max-width: calc(100vw - 28px);
    background: var(--nxt-snow, #FFFFFF);
    color: var(--nxt-midnight, #10164D);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(16, 22, 77, 0.28);
    padding: 18px 20px 14px;
    font-family: var(--nxt-font-sans, 'Poppins', 'Segoe UI', sans-serif);
    border-top: 4px solid var(--nxt-cobalt, #2027E1);
}

.nxt-tour-step {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nxt-cobalt, #2027E1);
    margin-bottom: 6px;
}

.nxt-tour-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nxt-midnight, #10164D);
}

.nxt-tour-text {
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--nxt-graphite, #424242);
}

.nxt-tour-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nxt-tour-actions-spacer {
    flex: 1 1 auto;
}

.nxt-tour-btn {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 16px;
    border: 1px solid var(--nxt-cobalt, #2027E1);
    background: var(--nxt-snow, #FFFFFF);
    color: var(--nxt-cobalt, #2027E1);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nxt-tour-btn:hover {
    background: rgba(32, 39, 225, 0.08);
}

.nxt-tour-btn--primary {
    background: var(--nxt-cobalt, #2027E1);
    color: var(--nxt-snow, #FFFFFF);
    border-color: var(--nxt-cobalt, #2027E1);
}

.nxt-tour-btn--primary:hover {
    background: var(--nxt-cobalt-hover, #1A1FC4);
    border-color: var(--nxt-cobalt-hover, #1A1FC4);
}

.nxt-tour-link {
    font-family: inherit;
    font-size: 0.85rem;
    background: none;
    border: none;
    color: var(--nxt-gray, #808080);
    cursor: pointer;
    padding: 8px 4px;
}

.nxt-tour-link:hover {
    color: var(--nxt-midnight, #10164D);
    text-decoration: underline;
}

.nxt-tour-btn:focus-visible,
.nxt-tour-link:focus-visible {
    outline: 2px solid var(--nxt-cobalt, #2027E1);
    outline-offset: 2px;
}

/* Dark theme: bubble stays readable on Horizon Dark */
html[data-sap-ui-theme="sap_horizon_dark"] .nxt-tour-bubble,
.sapUiTheme-sap_horizon_dark .nxt-tour-bubble {
    background: #1B2247;
    color: #FFFFFF;
}
html[data-sap-ui-theme="sap_horizon_dark"] .nxt-tour-title,
.sapUiTheme-sap_horizon_dark .nxt-tour-title {
    color: #FFFFFF;
}
html[data-sap-ui-theme="sap_horizon_dark"] .nxt-tour-text,
.sapUiTheme-sap_horizon_dark .nxt-tour-text {
    color: #D6D9F0;
}