/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-03A
   Aurora Dashboard UI

   File:
   /opt/simplpay/static/css/012-aurora-dashboard.css
   ========================================================== */


/* ==========================================================
   Desktop Dashboard Composition
   ========================================================== */

.shell {
    width: min(
        100%,
        1180px
    );

    margin:
        0 auto;

    gap:
        clamp(
            28px,
            4vw,
            54px
        );
}


/* ==========================================================
   Hero / Marketing Side
   ========================================================== */

.hero {
    position:
        relative;

    isolation:
        isolate;
}

.hero::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    top:
        4%;

    left:
        -8%;

    width:
        340px;

    height:
        340px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                99,
                102,
                241,
                .16
            ),
            transparent 68%
        );

    filter:
        blur(26px);

    pointer-events:
        none;
}

.hero::after {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    right:
        4%;

    bottom:
        2%;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                6,
                182,
                212,
                .14
            ),
            transparent 70%
        );

    filter:
        blur(24px);

    pointer-events:
        none;
}


/* ==========================================================
   Brand
   ========================================================== */

.brand {
    padding:
        9px
        13px
        9px
        9px;

    border:
        1px solid
        var(--sp-glass-border-soft);

    border-radius:
        var(--sp-radius-pill);

    background:
        var(--sp-glass-bg-soft);

    box-shadow:
        var(--sp-shadow-sm);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        );

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        );
}

.brand-icon {
    width:
        50px;

    height:
        50px;

    border-radius:
        16px;
}

.brand-name {
    font-size:
        27px;

    font-weight:
        var(--sp-weight-black);

    background:
        var(--sp-gradient-primary);

    background-clip:
        text;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


/* ==========================================================
   Hero Heading
   ========================================================== */

.hero h1 {
    max-width:
        680px;

    margin-bottom:
        var(--sp-space-5);

    font-size:
        clamp(
            42px,
            6vw,
            74px
        );

    line-height:
        .99;

    letter-spacing:
        -.055em;

    text-wrap:
        balance;
}

.hero p {
    max-width:
        600px;

    font-size:
        clamp(
            15px,
            2vw,
            18px
        );

    line-height:
        1.75;
}


/* ==========================================================
   Feature Chips
   ========================================================== */

.features {
    gap:
        var(--sp-space-3);
}

.feature {
    min-height:
        40px;

    padding:
        9px
        14px;

    transition:
        transform
        var(--sp-transition-spring),
        border-color
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast);
}

.feature:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--sp-border-primary);

    background:
        var(--sp-glass-bg-strong);
}


/* ==========================================================
   Main Payment Dashboard Card
   ========================================================== */

.card {
    isolation:
        isolate;

    padding:
        clamp(
            22px,
            3vw,
            32px
        );

    border-radius:
        34px;

    box-shadow:
        0
        30px
        90px
        rgba(
            15,
            23,
            42,
            .17
        ),
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            .18
        )
        inset;
}

.card::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .80
            ),
            transparent
        );

    pointer-events:
        none;
}


/* ==========================================================
   Card Header
   ========================================================== */

.card-header {
    position:
        relative;

    margin-bottom:
        var(--sp-space-5);
}

.card-header h2 {
    color:
        var(--sp-text-primary);

    font-size:
        clamp(
            24px,
            3vw,
            29px
        );

    font-weight:
        var(--sp-weight-black);

    letter-spacing:
        -.035em;
}

.card-header p {
    margin-top:
        7px;

    color:
        var(--sp-text-tertiary);

    font-size:
        13px;

    line-height:
        1.65;
}


/* ==========================================================
   Dashboard Summary
   ========================================================== */

.dashboard-summary {
    gap:
        10px;

    margin-bottom:
        var(--sp-space-5);
}

.dashboard-stat {
    position:
        relative;

    overflow:
        hidden;

    padding:
        14px
        9px;

    border-radius:
        18px;

    transition:
        transform
        var(--sp-transition-spring),
        box-shadow
        var(--sp-transition-fast);
}

.dashboard-stat:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--sp-shadow-sm);
}

.dashboard-stat::before {
    content:
        "";

    position:
        absolute;

    top:
        -38px;

    right:
        -38px;

    width:
        82px;

    height:
        82px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                99,
                102,
                241,
                .12
            ),
            transparent 70%
        );
}

.dashboard-stat-value {
    position:
        relative;

    font-size:
        19px;

    font-weight:
        var(--sp-weight-black);

    letter-spacing:
        -.025em;
}

.dashboard-stat-label {
    position:
        relative;

    margin-top:
        5px;

    font-size:
        9px;

    letter-spacing:
        .06em;
}


/* ==========================================================
   Main Action Buttons
   ========================================================== */

.scan-button,
.pay-button {
    min-height:
        58px;

    border-radius:
        19px;

    font-size:
        15px;

    font-weight:
        var(--sp-weight-extrabold);

    letter-spacing:
        -.01em;
}

.scan-button {
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed 50%,
            #06b6d4
        );

    background-size:
        180%
        180%;

    animation:
        sp-dashboard-gradient
        7s
        ease
        infinite;
}

.pay-button {
    background:
        linear-gradient(
            135deg,
            #111827,
            #312e81 48%,
            #4f46e5
        );

    box-shadow:
        0
        18px
        40px
        rgba(
            49,
            46,
            129,
            .24
        );
}

@keyframes sp-dashboard-gradient {
    0% {
        background-position:
            0%
            50%;
    }

    50% {
        background-position:
            100%
            50%;
    }

    100% {
        background-position:
            0%
            50%;
    }
}


/* ==========================================================
   Fields
   ========================================================== */

.field {
    margin-bottom:
        var(--sp-space-4);
}

.field label {
    margin-bottom:
        var(--sp-space-2);

    font-size:
        12px;

    font-weight:
        var(--sp-weight-extrabold);
}

.input-wrap input {
    min-height:
        57px;

    border-radius:
        17px;
}

.amount-input input {
    font-size:
        27px;

    font-weight:
        var(--sp-weight-black);

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   Quick Amount
   ========================================================== */

.quick-amounts {
    gap:
        9px;

    margin-bottom:
        var(--sp-space-5);
}

.quick-amount {
    min-height:
        38px;

    border-radius:
        12px;

    font-weight:
        var(--sp-weight-extrabold);
}

.quick-amount:active {
    transform:
        scale(.96);
}


/* ==========================================================
   Favourites Dashboard
   ========================================================== */

.favourites-section {
    border-color:
        var(--sp-border-subtle);
}

.favourites-list {
    gap:
        11px;

    padding-bottom:
        10px;
}

.favourite-card {
    flex-basis:
        116px;

    min-height:
        128px;

    border-radius:
        20px;
}

.favourite-avatar {
    box-shadow:
        0
        12px
        24px
        rgba(
            79,
            70,
            229,
            .20
        );
}


/* ==========================================================
   Recent Payments Dashboard
   ========================================================== */

.recent-payments-section {
    border-color:
        var(--sp-border-subtle);
}

.recent-payments-list {
    gap:
        11px;
}

.recent-payment-item {
    border-radius:
        18px;

    transition:
        transform
        var(--sp-transition-spring),
        border-color
        var(--sp-transition-fast),
        box-shadow
        var(--sp-transition-fast);
}

.recent-payment-item:hover {
    transform:
        translateY(-2px);
}


/* ==========================================================
   More Cards
   ========================================================== */

.more-menu-grid {
    gap:
        12px;
}

.more-menu-card {
    min-height:
        110px;

    border-radius:
        20px;
}

.more-menu-icon {
    width:
        44px;

    height:
        44px;

    border-radius:
        15px;

    box-shadow:
        0
        12px
        24px
        rgba(
            79,
            70,
            229,
            .20
        );
}


/* ==========================================================
   Contact Results
   ========================================================== */

.contact-result-card {
    border-radius:
        18px;
}

.contact-result-avatar {
    border-radius:
        15px;
}


/* ==========================================================
   Mobile Navigation Refinement
   ========================================================== */

.mobile-bottom-navigation {
    width:
        min(
            calc(
                100%
                -
                20px
            ),
            530px
        );

    min-height:
        70px;

    padding:
        7px;

    border-radius:
        25px;
}

.mobile-nav-button {
    border-radius:
        17px;
}

.mobile-nav-button.active {
    transform:
        translateY(-1px);
}


/* ==========================================================
   Modal Refinement
   ========================================================== */

.modal-card {
    border-radius:
        28px;

    box-shadow:
        0
        32px
        100px
        rgba(
            0,
            0,
            0,
            .32
        );
}


/* ==========================================================
   Theme: Dark
   ========================================================== */

html[data-sp-theme="dark"]
.card {
    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            .40
        ),
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            .06
        )
        inset;
}

html[data-sp-theme="dark"]
.hero::before {
    opacity:
        .9;
}

html[data-sp-theme="dark"]
.dashboard-stat::before {
    opacity:
        .72;
}


/* ==========================================================
   Tablet
   ========================================================== */

@media (
    max-width:
    900px
) {

    .shell {
        gap:
            20px;
    }

    .hero {
        padding:
            22px
            8px
            16px;
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (
    max-width:
    767px
) {

    body.sp-page {
        align-items:
            flex-start;

        padding-bottom:
            calc(
                100px
                +
                env(
                    safe-area-inset-bottom
                )
            );
    }

    .shell {
        max-width:
            520px;

        gap:
            var(--sp-space-3);
    }

    .hero {
        padding:
            18px
            2px
            14px;

        text-align:
            center;
    }

    .brand {
        margin-left:
            auto;

        margin-right:
            auto;
    }

    .hero h1 {
        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            clamp(
                37px,
                11vw,
                54px
            );

        letter-spacing:
            -.050em;
    }

    .hero p {
        margin-left:
            auto;

        margin-right:
            auto;
    }

    .features {
        justify-content:
            center;
    }

    .card {
        border-radius:
            28px;
    }

}


/* ==========================================================
   Small Mobile
   ========================================================== */

@media (
    max-width:
    430px
) {

    .brand {
        margin-bottom:
            22px;
    }

    .brand-icon {
        width:
            44px;

        height:
            44px;
    }

    .brand-name {
        font-size:
            23px;
    }

    .hero h1 {
        font-size:
            clamp(
                34px,
                11vw,
                45px
            );
    }

    .hero p {
        font-size:
            14px;
    }

    .features {
        margin-top:
            24px;
    }

    .feature {
        min-height:
            36px;

        padding:
            8px
            12px;

        font-size:
            12px;
    }

    .card {
        padding:
            22px
            18px;

        border-radius:
            25px;
    }

    .dashboard-summary {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .dashboard-stat {
        padding:
            11px
            5px;
    }

    .dashboard-stat-value {
        font-size:
            16px;
    }

    .dashboard-stat-label {
        font-size:
            8px;
    }

    .scan-button,
    .pay-button {
        min-height:
            56px;
    }

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .scan-button {
        animation:
            none !important;
    }

    .feature,
    .dashboard-stat,
    .recent-payment-item {
        transition:
            none !important;
    }

}


/* ==========================================================
   PATCH-SIMPLPAY-022G-03B
   Dashboard Interaction States
   ========================================================== */

.sp-dashboard-pressed {
    transform:
        scale(.975)
        !important;
}


.sp-dashboard-ready
.card {
    transition:
        box-shadow
        var(--sp-transition-normal),
        border-color
        var(--sp-transition-fast);
}


.sp-dashboard-ready
.favourite-card,
.sp-dashboard-ready
.recent-payment-item,
.sp-dashboard-ready
.more-menu-card,
.sp-dashboard-ready
.contact-result-card {
    will-change:
        transform;
}


.mobile-nav-button
.mobile-nav-icon {
    transition:
        transform
        var(--sp-transition-spring);
}


.mobile-nav-button.active
.mobile-nav-icon {
    transform:
        translateY(-1px)
        scale(1.05);
}


.dashboard-stat-value,
.recent-payment-amount,
.split-summary-value {
    font-variant-numeric:
        tabular-nums;
}


html[data-sp-theme="dark"]
.mobile-bottom-navigation {
    box-shadow:
        0
        24px
        70px
        rgba(
            0,
            0,
            0,
            .40
        );
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .sp-dashboard-pressed {
        transform:
            none !important;
    }

}