/* UserWelcomeV2 - V2 UI Component Styling */

.UserWelcomeV2 {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: var(--slds-g-spacing-4);  /* 16px / 1em */
    width: 100%;

    @media @phone {
        gap: var(--slds-g-spacing-3);  /* 12px */

        /* Override ImageButton large icon size within UserWelcomeV2 - use default 18px instead of 32px on phone */
        .ImageButton--lumina .ImageButton__icon.ImageButton__icon--large {
            width: 18px;
            height: 18px;
        }
    }
}

/* Welcome Message Row */
.UserWelcomeV2 .WelcomeMessageRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--slds-g-spacing-4);  /* 16px / 1em */
    width: 100%;
    height: var(--slds-g-sizing-7);  /* 24px / 1.5em */
    
    @media @phone {
        justify-content: center;
        gap: 10px;  /* 0.625em = 10px */
        height: 22px;  /* 1.375em = 22px */
    }
}

.UserWelcomeV2 .WelcomeText {
    font-family: var(--slds-g-font-family);
    font-weight: var(--slds-g-font-weight-4);
    font-size: var(--slds-g-font-scale-2);  /* 16px / 1em */
    line-height: var(--slds-g-font-line-height-4);
    color: var(--slds-g-color-on-surface-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;

    @media @phone {
        font-weight: var(--slds-g-font-weight-4);  /* 400 - Regular for phone UX */
        font-size: var(--slds-g-font-scale-1);  /* 14px / 0.875em */
        line-height: var(--slds-g-font-line-height-3);
        flex-grow: 1;
    }
}

/* Date Navigation Row */
.UserWelcomeV2 .DateNavigationRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--slds-g-spacing-4);  /* 16px / 1em */
    width: 100%;
    height: var(--slds-g-spacing-7);  /* 40px / 2.5em */

    @media @phone {
        flex-wrap: wrap;
        min-height: var(--slds-g-spacing-7);  /* 40px / 2.5em */
        height: auto;
        gap: var(--slds-g-spacing-3);  /* 12px */
        border-radius: var(--slds-g-radius-border-circle);
    }
}

/* When only DateNavigationRight is present, make it stick to right */
.UserWelcomeV2 .DateNavigationRow:has(> .DateNavigationRight):not(:has(> .DateNavigationLeft)) {
    justify-content: flex-end;
}

.UserWelcomeV2 .DateNavigationLeft {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--slds-g-spacing-4);  /* 16px / 1em */

    @media @phone {
        gap: var(--slds-g-spacing-1);  /* 4px phone UX */
    }
}

.UserWelcomeV2 .SelectedDate {
    font-family: var(--slds-g-font-family);
    font-weight: var(--slds-g-font-weight-6);
    font-size: var(--slds-g-font-scale-2);  /* 16px / 1em */
    line-height: 19px;  /* 1.1875em = 19px */
    text-align: center;
    color: var(--slds-g-color-on-surface-2);

    @media @phone {
        font-size: var(--slds-g-font-scale-1);  /* 14px phone UX */
        white-space: nowrap;
        flex-grow: 1;
    }
}

.UserWelcomeV2 .DateNavigationRight {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--slds-g-spacing-4);  /* 16px / 1em */

    @media @phone {
        margin-left: auto;
        gap: var(--slds-g-spacing-3);  /* 12px phone UX */
    }
}

/* KPI Summary */
.UserWelcomeV2 .KpiSummary {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 var(--slds-g-spacing-4);  /* 0 16px / 1em */
    gap: var(--slds-g-spacing-4);  /* 16px / 1em */
    align-self: stretch;
    height: 80px;  /* 5em = 80px */
    border-radius: var(--slds-g-radius-border-3);
    background-color: var(--slds-g-color-surface-1);
    
    @media @phone {
        justify-content: flex-start;
        flex-wrap: nowrap;
        margin: 0;
        height: 77px;  /* 4.8125em = 77px */
        overflow-x: scroll;
        overflow-y: hidden;
        align-items: flex-start;
        gap: var(--slds-g-spacing-3);
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        &::-webkit-scrollbar-track {
            display: none;
        }

        &::-webkit-scrollbar-thumb {
            display: none;
        }
    }
}

.UserWelcomeV2 .KpiItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--slds-g-spacing-4) 0;  /* 16px 0 / 1em 0em */
    gap: var(--slds-g-spacing-1);  /* 4px / 0.25em */
    height: 80px;  /* 5em = 80px */
    flex: none;
    border-radius: var(--slds-g-radius-border-3);
    min-width: 0;
    overflow: hidden;
    
    @media @phone {
        justify-content: center;
        padding: var(--slds-g-spacing-3);
        gap: 1px;  /* 0.0625em = 1px */
        height: 77px;  /* 4.8125em = 77px */
        flex: 0 0 auto;
        flex-shrink: 0;
    }
}

.UserWelcomeV2 .KpiValue {
    font-family: var(--slds-g-font-family);
    font-weight: var(--slds-g-font-weight-6);
    font-size: 18px;  /* 1.125em = 18px */
    line-height: var(--slds-g-font-line-height-3);
    color: var(--slds-g-color-on-surface-2);
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    width: 100%;
    
    @media @phone {
        font-size: var(--slds-g-font-scale-3);  /* 20px / 1.25em */
        line-height: var(--slds-g-font-line-height-4);
    }
}

.UserWelcomeV2 .KpiLabel {
    font-family: var(--slds-g-font-family);
    font-weight: var(--slds-g-font-weight-4);
    font-size: var(--slds-g-font-scale-neg-1);  /* 12px / 0.75em */
    line-height: var(--slds-g-font-line-height-3);
    color: var(--slds-g-color-on-surface-1);
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    hyphens: auto;
    min-width: 0;
    width: 100%;
    
    @media @phone {
        font-size: var(--slds-g-font-scale-neg-2);  /* 10px / 0.625em */
        line-height: 19px;  /* 1.2em = 19.2px ≈ 19px */
        overflow-wrap: normal;
        word-break: normal;
    }
}

.UserWelcomeV2 .KpiGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    overflow: hidden;
}

.UserWelcomeV2 .KpiDivider {
    width: 0;
    border-left: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
    height: 50%;
    align-self: center;
    
    @media @phone {
        display: none;
    }
}