/* Custom CSS for Distributor Portal - SAP Horizon Theme */

/* Login Page Background */
.loginBackground {
    background-image: url('../img/bg_login_sin_fifa.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
    /* Fallback */
}

/* Global Application Background */
.globalBackground {
    background-image: url('../img/bg_login_sin_fifa.png');
    background-attachment: fixed; /* Keeps the background static while content scrolls */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
}

/* World Cup Logo Overlay */
.worldCupLogo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 24rem; /* Ajustable based on feedback (casi el tamaño del login de 400px) */
    height: auto;
    z-index: 10;
    /* Removed border-radius and box-shadow to prevent bounding box from showing entirely */
}

/* --- Mobile Responsive Rules for Login --- */
@media screen and (max-width: 768px) {
    /* Make the logo stack nicely at the top instead of absolute positioning */
    .worldCupLogo {
        position: relative;
        top: 0;
        left: 0;
        margin: 2rem auto -2rem auto; /* Adjusted to compensate for transparent image padding */
        display: block;
        width: 12rem; /* slightly smaller on phones */
    }
    
    /* Ensure the grid doesn't force the panel over the logo */
    .loginGrid {
        align-items: flex-start !important; /* Push everything up */
    }
    
    /* Fix the background jumping/repeating on mobile devices */
    .loginBackground {
        background-attachment: fixed; /* Keeps image still while scrolling */
        background-size: cover;
    }

    /* Reduce the minimum height of the container so it doesn't try to fill 100vh rigidly if there's content overflowing */
    .loginContainer {
        height: auto !important;
        min-height: auto !important; /* Remove 100vh to fix huge separation gap */
        justify-content: flex-start !important; /* Stops the vertical centering push */
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
}

.loginBgImage {
    /* If we want an image, we can style it here, but CSS gradient is cleaner for B1 style */
    display: none;
    /* Hiding the placeholder image to use CSS background */
}

/* Login Panel Card Effect */
.loginPanel {
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--sapGroup_ContentBackground);
    /* Horizon specific variable */
}

/* Adjusting the logo in Login */
.loginLogo {
    max-width: 180px;
    margin-bottom: 2rem;
}

/* Dashboard ShellBar adjustments */
.sapFShellBar {
    border-bottom: 1px solid var(--sapGroup_ContentBorderColor);
}

/* Tile Grid Layout */
.dashboardGrid {
    padding: 2rem;
}

.dashboardTile {
    cursor: pointer;
}

/* Partner Logos */
.partnerLogo {
    height: 50px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partnerLogo:hover {
    filter: none;
    opacity: 1;
}

/* Animated ObjectStatus Indicators */

/* Underlines based on status class */
.customStatusPV .sapMObjStatusText {
    border-bottom: 2px solid #E67E22 !important;
    padding-bottom: 1px;
}

.customStatusVE .sapMObjStatusText {
    border-bottom: 2px solid #27AE60 !important;
    padding-bottom: 1px;
}

.customStatusAN .sapMObjStatusText {
    border-bottom: 2px solid #C0392B !important;
    padding-bottom: 1px;
}

/* Animations applied to the icon part of the ObjectStatus */
@keyframes obj-pulse-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.customStatusPV .sapMObjStatusIcon {
    animation: obj-pulse-animation 1.5s infinite ease-in-out;
    display: inline-block;
    /* Required for transform to work on inline elements */
}

@keyframes obj-scale-in-animation {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.4);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.customStatusVE .sapMObjStatusIcon {
    animation: obj-scale-in-animation 0.5s ease-out forwards;
    display: inline-block;
}

@keyframes obj-dynamic-x-animation {
    0% {
        transform: rotate(0deg) scale(0.8);
    }

    25% {
        transform: rotate(-20deg) scale(1.2);
    }

    50% {
        transform: rotate(20deg) scale(1.2);
    }

    75% {
        transform: rotate(-20deg) scale(1.2);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

.customStatusAN .sapMObjStatusIcon {
    animation: obj-dynamic-x-animation 0.6s ease-out;
    display: inline-block;
}

/* Fiori Native Banner Adjustments */
.fioriNativeBanner {
    background-color: #0A6ED1 !important;
    /* SAP Fiori Primary Blue */
    border-bottom: none !important;
    padding: 0 1rem;
}

.fioriNativeBanner .sapMTitle,
.fioriNativeBanner .sapMBtnIcon {
    color: #FFFFFF !important;
    text-shadow: none;
}

.fioriBannerCountdown {
    color: #FFFFFF !important;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.5rem;
    /* Removed pill backdrop, relies on native Toolbar contrast */
}

/* Host Flags Styling - subtle transparent wrapper */
.fioriHostFlagsContainer {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 1rem;
}

.hostFlagImg {
    width: 24px;
    height: 16px;
    margin: 0 4px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Base elements should sit above the moving ball */
.bannerContentWrapper,
.bannerLogoutBtn {
    position: relative;
    z-index: 5;
}

/* New Official Logo */
.bannerIconWMsap {
    height: 38px !important;
    width: auto !important;
    margin-right: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    animation: logo-glow 3s infinite alternate;
}

@keyframes logo-glow {
    0% {
        filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
    }

    100% {
        filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.4));
    }
}

/* Override IconTabBar padding to align tables with tabs */
.fullWidthTabs .sapMITBContent {
    padding: 0 !important;
}

/* Prevent text truncation in IconTabBar tabs and ensure enough height */
/* Target the actual tab container to allow growth */
.sapMITB.fullWidthTabs .sapMITBHead {
    height: auto !important;
    min-height: 4rem;
}

.sapMITB.fullWidthTabs .sapMITBFilter {
    height: auto !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Target the text span directly and allow multiline */
.sapMITB.fullWidthTabs .sapMITBText {
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: normal !important;
    max-height: 3rem !important;
    /* give it space for 2 lines */
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    margin-top: 5px;
}

/* Custom Table Header Styling (Fiori Blue) */
/* Target any table with the custom class */
.customTableHeader .sapMListTblHeader {
    background-color: #0A6ED1 !important;
}

.customTableHeader .sapMListTblHeader>th {
    background-color: #0A6ED1 !important;
}

/* Base text color for header cells in UI5 Tables */
.customTableHeader .sapMColumnHeader .sapMText,
.customTableHeader .sapMColumnHeader .sapMLabel,
.customTableHeader .sapMListTblHeader .sapMText,
.customTableHeader .sapMListTblHeader .sapMLabel,
.customTableHeader .sapMColumnHeader {
    color: #FFFFFF !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* Center all table headers */
.customTableHeader .sapMColumnHeader .sapMText {
    text-align: center !important;
    width: 100% !important;
}

.customTableHeader .sapMListTblHeader .sapMText {
    text-align: center !important;
}

/* Fiori Green Selection Override */
tr.sapMListTblSel.fioriGreenSelection,
td.sapMListTblSel.fioriGreenSelection,
.sapMListTblRow.sapMLIBSelected.fioriGreenSelection,
.sapMLIBSelected.fioriGreenSelection,
tr.fioriGreenSelection,
td.fioriGreenSelection,
.sapMListTblRow.fioriGreenSelection,
.sapMLIB.fioriGreenSelection {
    background-color: #F1FDF6 !important;
}

/* Fiori Red Selection Override via CustomData */
.rejectedQuotationTable tbody tr.sapMListTblRow,
.rejectedQuotationTable tr.sapMListTblRow,
.rejectedQuotationTable .sapMListTblRow,
.rejectedQuotationTable .sapMLIB {
    background-color: #ffebeb !important;
}

/* Custom Tile Icon Colors */
.fioriGreenIcon .sapUiIcon,
.fioriGreenIcon {
    color: #107e3e !important;
}

.fioriBlueIcon .sapUiIcon,
.fioriBlueIcon {
    color: #0a6ed1 !important;
}

/* White Icon Button (mostly for Header icons) */
.whiteIconBtn .sapUiIcon {
    color: #FFFFFF !important;
}

/* Custom Panel Header Text Color */
.customPanel .sapMPanelHdr,
.customPanel .sapMTitle {
    color: black !important;
}

/* Custom Bank Accounts Section */
.customBankAccountsContainer {
    background-color: #F1F4F8; /* Light grayish blue background */
    border: 1px solid #D1D9E0; /* Subtle border */
    border-radius: 0.5rem; /* Rounded corners */
    padding: 1.5rem;
    box-sizing: border-box;
}

.customBankWarningBox {
    margin-bottom: 1rem;
}

.customBankWarningIcon {
    color: #388E3C !important; /* Green warning icon */
    font-size: 1.25rem !important;
    margin-right: 0.5rem;
}

.customBankAccountsTitle {
    color: #0A1C40 !important; /* Dark navy blue title */
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 0.5rem;
}

.customBankAccountsSubtitle {
    color: #333333 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}

.customBankColumnTitle {
    color: #0A1C40 !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
}

.customBankItem {
    margin-bottom: 0.5rem;
}

.customBankBullet {
    font-size: 1.2rem;
    color: #333;
    line-height: 1;
}

.customBankIcon {
    color: #0A1C40 !important; /* Same navy for icons */
    font-size: 1.1rem !important;
    margin-right: 0.4rem;
}

.customBankText {
    color: #333333 !important;
    font-size: 0.95rem !important;
}