/* Custom styles for NXT Launchpad */

/* ========================================
   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,
#crmShellPage iframe,
#supportPortalShellPage iframe,
[id*="crmShellPage"] iframe,
[id*="supportPortalShellPage"] iframe,
[id*="ShellPage"] iframe,
#nxtAppFrame,
#nxt-crm-iframe,
#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 */
    #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
   ======================================== */

/* iPhone 14 Pro Max, 13 Pro Max (430px) */
@media screen and (max-width: 430px) and (min-width: 401px) {
    .tileGroup .sapUiLayoutCSSGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.625rem !important;
    }
    
    .tileLayout.sapMGT {
        width: 6.25rem !important; /* 100px */
        height: 6.25rem !important;
        min-width: 6.25rem !important;
        min-height: 6.25rem !important;
    }
}

/* iPhone 14, 13, 12 (390px) */
@media screen and (max-width: 400px) and (min-width: 376px) {
    .tileGroup .sapUiLayoutCSSGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .tileLayout.sapMGT {
        width: 5.875rem !important; /* 94px */
        height: 5.875rem !important;
        min-width: 5.875rem !important;
        min-height: 5.875rem !important;
    }
}

/* iPhone SE (375px) */
@media screen and (max-width: 375px) and (min-width: 341px) {
    .tileGroup .sapUiLayoutCSSGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.375rem !important;
    }
    
    .tileLayout.sapMGT {
        width: 5.5rem !important; /* 88px */
        height: 5.5rem !important;
        min-width: 5.5rem !important;
        min-height: 5.5rem !important;
    }
    
    .tileLayout .sapMGTHdrTxt {
        font-size: 0.5625rem !important; /* 9px */
    }
}

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

.nxtSearchToolbar {
    gap: 0.5rem;
}

.nxtSearchField {
    flex: 1 1 auto;
}

/* Search field inner styling */
.nxtSearchField .sapMSFI {
    border-radius: 1.5rem !important;
}

.nxtViewModeBtn {
    flex: 0 0 auto;
}

@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 */
#homeLogo {
    width: 120px !important;
    height: auto !important;
    transition: width 0.2s ease;
}

/* Tablet breakpoint */
@media screen and (max-width: 1024px) {
    #homeLogo {
        width: 100px !important;
    }
}

/* Phone breakpoint */
@media screen and (max-width: 768px) {
    #homeLogo {
        width: 90px !important;
    }
}

/* Small phone breakpoint */
@media screen and (max-width: 480px) {
    #homeLogo {
        width: 70px !important;
    }
}

/* Very small phone breakpoint */
@media screen and (max-width: 375px) {
    #homeLogo {
        width: 60px !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 */
    #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;
    }
    
    /* Header content areas */
    .sapMPageHeader .sapMBarLeft,
    .sapMPageHeader .sapMBarRight {
        padding: 0 !important;
    }
    
    /* User menu toolbar - compact on mobile */
    #userMenuToolbar.sapMOTB,
    .sapMOTB#userMenuToolbar {
        padding: 0 !important;
        gap: 0.125rem !important;
    }
    
    #userMenuToolbar .sapMTBSpacer {
        display: none !important;
        width: 0 !important;
        flex: 0 !important;
    }
    
    /* Hide user name text on mobile - show only avatar/icon */
    #userAvatarButton .sapMBtnContent,
    #userAvatarButton .sapMBtnText,
    #userAvatarButton bdi {
        display: none !important;
    }
    
    /* Make buttons icon-only on mobile */
    #userMenuToolbar .sapMBtn {
        min-width: 2.25rem !important;
        padding: 0 !important;
    }
    
    #userMenuToolbar .sapMBtnInner {
        padding: 0 0.375rem !important;
    }
    
    /* Language selector - compact */
    #languageSelector {
        min-width: 2rem !important;
        padding: 0 !important;
    }
    
    #languageSelector .sapMBtnInner {
        padding: 0 0.25rem !important;
    }
    
    #languageSelector .sapMBtnText,
    #languageSelector bdi {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
    }
    
    /* Avatar size on mobile */
    #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 */
    #viewModeButton {
        min-width: auto !important;
    }
    
    #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;
    }
    
    /* Hide non-essential header buttons */
    #openCrmButton {
        display: none !important;
    }
    
    /* Even smaller language selector */
    #languageSelector .sapMBtnText,
    #languageSelector bdi {
        font-size: 0.6875rem !important;
    }
    
    /* Smaller search field */
    #searchField .sapMSFI {
        height: 2rem !important;
    }
    
    #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 #iframeContainer {
    height: 100% !important;
}

/* iframe inside ScrollContainer - fill the container */
#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 #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.625rem;     /* 10px - Tighter for mobile */
    --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;
}

/* 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) */
@media screen and (max-width: 1024px) {
    .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 */
@media screen and (max-width: 600px) {
    /* Tiles take more space on mobile for better readability */
    .tileLayout.sapMGT {
        width: var(--tile-size-phone) !important;
        height: var(--tile-size-phone) !important;
        min-width: var(--tile-size-phone) !important;
        min-height: var(--tile-size-phone) !important;
        border-radius: var(--tile-border-radius-phone) !important;
    }
    
    /* Grid: 3 columns on phone, with proper sizing */
    .tileGroup .sapUiLayoutCSSGrid {
        gap: var(--tile-gap-phone) !important;
        grid-template-columns: repeat(3, 1fr) !important;
        justify-items: center !important;
    }
    
    /* Tile text - readable on phone */
    .tileLayout .sapMGTHdrTxt {
        font-size: 0.6875rem !important; /* 11px */
        padding: 0.5rem 0.375rem 0.15rem 0.375rem !important;
        line-height: 1.25 !important;
        -webkit-line-clamp: 3 !important; /* Allow 3 lines on mobile */
        word-break: break-word !important;
        hyphens: auto !important;
    }
    
    .tileLayout .sapMGTSubHdrTxt {
        display: none !important; /* Hide subtitle on phones for cleaner look */
    }
    
    /* Icons sized for mobile tiles */
    .tileLayout .sapMGTContent .sapMImg,
    .tileLayout .sapMGTContent .sapUiIcon {
        font-size: 1.375rem !important;
    }
    
    .tileLayout .nxtTileCounterValue {
        font-size: 1.125rem !important;
    }
    .tileLayout .nxtTileCounterUnit {
        font-size: 0.4375rem !important;
    }
    
    /* Panel styling for mobile */
    .tileGroup .sapMPanelContent {
        padding: 0.625rem !important;
    }
    
    .tileGroup .sapMPanelHdr {
        font-size: 0.9375rem !important;
        padding: 0.625rem 0.75rem !important;
        min-height: 2.25rem !important;
    }
    
    .tileGroup.sapMPanel {
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Small phones (< 400px) - iPhone SE, iPhone 12/13 mini */
@media screen and (max-width: 400px) {
    .tileLayout.sapMGT {
        width: 5.75rem !important; /* 92px */
        height: 5.75rem !important;
        min-width: 5.75rem !important;
        min-height: 5.75rem !important;
        border-radius: 12px !important;
    }
    
    .tileGroup .sapUiLayoutCSSGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .tileLayout .sapMGTHdrTxt {
        font-size: 0.625rem !important; /* 10px */
        padding: 0.375rem 0.25rem 0.125rem 0.25rem !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .tileLayout .sapMGTContent .sapMImg,
    .tileLayout .sapMGTContent .sapUiIcon {
        font-size: 1.25rem !important;
    }
    
    .tileLayout .nxtTileCounterValue {
        font-size: 1rem !important;
    }
    
    .tileGroup .sapMPanelContent {
        padding: 0.5rem !important;
    }
}

/* Very small phones (< 340px) - iPhone SE (1st gen), very narrow */
@media screen and (max-width: 340px) {
    .tileLayout.sapMGT {
        width: 5rem !important; /* 80px */
        height: 5rem !important;
        min-width: 5rem !important;
        min-height: 5rem !important;
        border-radius: 10px !important;
    }
    
    .tileGroup .sapUiLayoutCSSGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.375rem !important;
    }
    
    .tileLayout .sapMGTHdrTxt {
        font-size: 0.5625rem !important; /* 9px */
        padding: 0.25rem 0.25rem 0.1rem 0.25rem !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .tileLayout .sapMGTContent .sapMImg,
    .tileLayout .sapMGTContent .sapUiIcon {
        font-size: 1.125rem !important;
    }
    
    .tileLayout .nxtTileCounterValue {
        font-size: 0.875rem !important;
    }
}

/* 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;
}

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;
}

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 */
.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 */
.tileLayout.sapMGT:active {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.15) !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: 2 !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: visible !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)
   ======================================== */
@media screen and (max-width: 1024px) {
    .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;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Blue accent */
.tileCategory-analytics .sapMGTContent .sapUiIcon {
    color: #818cf8 !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Pink accent */
.tileCategory-hr .sapMGTContent .sapUiIcon {
    color: #f472b6 !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Slate accent */
.tileCategory-admin .sapMGTContent .sapUiIcon {
    color: #94a3b8 !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Orange accent */
.tileCategory-logistics .sapMGTContent .sapUiIcon {
    color: #fb923c !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Green accent */
.tileCategory-sales .sapMGTContent .sapUiIcon {
    color: #4ade80 !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Cyan accent */
.tileCategory-ai .sapMGTContent .sapUiIcon {
    color: #22d3ee !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Red accent */
.tileCategory-documents .sapMGTContent .sapUiIcon {
    color: #f87171 !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 - Purple accent */
.tileCategory-default .sapMGTContent .sapUiIcon {
    color: #a78bfa !important;
}
/* Dark theme */
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;
}
/* Light theme */
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 */
@media screen and (max-width: 600px) {
    .nxtTileGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--tile-gap-phone, 0.625rem) !important;
        justify-items: center !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;
}

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;
}

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;
}