@import url("base.css");
@import url("layout.css");
@import url("cards.css");
@import url("forms.css");
@import url("dashboard.css");
@import url("profile.css");
@import url("responsive.css");
@import url("artist-brand-logo.css");


/* =========================================================
   TOUCHINGLIFE ARTIST PORTAL — BRAND HEADER
   ========================================================= */

.artistPortalBanner {
    width: calc(100% + 72px);
    height: 105px;

    margin-top: -36px;
    margin-left: -36px;
    margin-right: -36px;
    margin-bottom: 42px;

    padding: 0 42px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    box-sizing: border-box;

    background:
        linear-gradient(
            90deg,
            #b40000 0%,
            #e00000 55%,
            #ff1b1b 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        0 0 18px 0;

    overflow: hidden;

    position: relative;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.28);
}


/* =========================================================
   SUBTLE BRAND TEXTURE
   ========================================================= */

.artistPortalBanner::after {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 42%;
    height: 100%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(255, 255, 255, 0.12) 0,
            rgba(255, 255, 255, 0.04) 25%,
            transparent 60%
        );
}


/* =========================================================
   TOUCHINGLIFE LOGO
   ========================================================= */

.artistPortalBanner img {
    display: block;

    width: 720px;
    max-width: 70%;
    height: 80px;

    object-fit: cover;
    object-position: center center;

    pointer-events: none;
    user-select: none;

    position: relative;
    z-index: 2;
}


/* =========================================================
   ANALYTICS — MOBILE NUMBER SAFETY
   ========================================================= */

/*
   Keep the exact Supabase earnings value.
   This only controls how the number is displayed
   inside the card so it cannot overflow.
*/

#analyticsOverview {
    min-width: 0;
}

#analyticsOverview > .card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#analyticsEarnings {
    display: block;

    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    white-space: normal;

    overflow-wrap: anywhere;
    word-break: break-word;

    line-height: 1.15;

    font-size: 28px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .artistPortalBanner img {
        display: block;

        width: 720px;
        max-width: 70%;
        height: 80px;

        object-fit: contain;
        object-position: center center;

        pointer-events: none;
        user-select: none;

        position: relative;
        z-index: 2;
    }


    /* ---------------------------------------------
       ANALYTICS MOBILE CARDS
       --------------------------------------------- */

    #analyticsOverview {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #analyticsOverview > .card {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    #analyticsEarnings {
        font-size: clamp(
            18px,
            6vw,
            28px
        ) !important;

        line-height: 1.15;

        white-space: normal;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    #analyticsEarnings {
        font-size: 18px !important;

        line-height: 1.15;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

}