/* Custom styles for NXT Launchpad */

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

/* ========================================
   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;
    }
    
    /* Numeric content on phones */
    .tileLayout .sapMNCValue {
        font-size: 1.125rem !important;
    }
    
    .tileLayout .sapMNCScale {
        font-size: 0.5rem !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 .sapMNCValue {
        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 .sapMNCValue {
        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;
}

/* 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 */
.tileLayout .sapMGTContent {
    padding: 0.5rem !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;
}

/* Numeric content styling */
.tileLayout .sapMNC {
    padding: 0.375rem !important;
}

.tileLayout .sapMNCValue {
    font-size: 1.5rem !important; /* Smaller for compact tiles */
    font-weight: 300 !important; /* Light weight for elegance */
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
}

.tileLayout .sapMNCScale {
    font-size: 0.625rem !important; /* 10px */
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !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 .sapMNCValue {
        font-size: 1.25rem !important;
    }
    
    .tileLayout .sapMNCScale {
        font-size: 0.5rem !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;
}