/* =========================================================
   DIETETIC.ART
   REDUCTION REPORT 2026
   PREMIUM GLASS UI
   WERSJA DESKTOP + MOBILE
   Dopasowana gabarytami do MASS REPORT
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root{

    --reduction-report-bg:
        #07111f;

    --reduction-report-surface:
        rgba(12,23,40,.96);

    --reduction-report-border:
        rgba(148,163,184,.18);

    --reduction-report-accent:
        #38bdf8;

    --reduction-report-green:
        #22c55e;

    --reduction-report-text:
        #f8fafc;

    --reduction-report-muted:
        #94a3b8;

}


/* =========================================================
   BACKGROUND / OVERLAY
========================================================= */

.reduction-report-bg{

    position:fixed !important;

    inset:0 !important;

    z-index:100000 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    padding:24px !important;

    box-sizing:border-box !important;

    overflow-y:auto !important;


    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(56,189,248,.10),
            transparent 38%
        ),

        rgba(2,6,23,.78) !important;


    backdrop-filter:
        blur(10px)
        saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(10px)
        saturate(120%) !important;


    animation:
        reductionReportOverlayIn
        .22s
        ease-out
        both;

}


@keyframes reductionReportOverlayIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/* =========================================================
   MAIN REPORT BOX
========================================================= */

.reduction-report-box{

    position:relative !important;


    width:min(
        680px,
        100%
    ) !important;


    max-height:
        min(
            900px,
            calc(100vh - 48px)
        ) !important;


    box-sizing:border-box !important;

    overflow-y:auto !important;


    padding:28px !important;


    border:
        1px solid
        var(--reduction-report-border) !important;


    border-radius:28px !important;


    color:
        var(--reduction-report-text) !important;


    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(56,189,248,.12),
            transparent 32%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(34,197,94,.07),
            transparent 30%
        ),

        linear-gradient(
            155deg,
            rgba(17,31,52,.98),
            rgba(5,11,22,.99)
        ) !important;


    box-shadow:

        0 35px 100px
        rgba(0,0,0,.58),

        0 0 0 1px
        rgba(255,255,255,.025),

        inset 0 1px 0
        rgba(255,255,255,.07) !important;


    backdrop-filter:
        blur(24px) !important;

    -webkit-backdrop-filter:
        blur(24px) !important;


    scrollbar-width:thin;

    scrollbar-color:
        rgba(148,163,184,.28)
        transparent;


    animation:

        reductionReportCardIn
        .30s
        cubic-bezier(.22,1,.36,1)
        both;

}


@keyframes reductionReportCardIn{

    from{

        opacity:0;

        transform:
            translateY(14px)
            scale(.985);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   SCROLLBAR
========================================================= */

.reduction-report-box::-webkit-scrollbar{

    width:7px;

}


.reduction-report-box::-webkit-scrollbar-track{

    background:transparent;

}


.reduction-report-box::-webkit-scrollbar-thumb{

    background:
        rgba(148,163,184,.28);

    border-radius:999px;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.reduction-report-box .report-close{

    position:absolute !important;

    top:16px !important;

    right:16px !important;


    width:38px !important;

    height:38px !important;


    display:grid !important;

    place-items:center !important;


    margin:0 !important;

    padding:0 !important;


    border:
        1px solid
        rgba(255,255,255,.09) !important;


    border-radius:12px !important;


    background:
        rgba(255,255,255,.055) !important;


    color:#cbd5e1 !important;


    font-size:18px !important;

    line-height:1 !important;


    cursor:pointer !important;


    z-index:5 !important;


    appearance:none !important;

    -webkit-appearance:none !important;


    transition:

        background .2s ease,

        border-color .2s ease,

        color .2s ease,

        transform .2s ease !important;

}


.reduction-report-box .report-close span{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;


    width:100% !important;

    height:100% !important;


    pointer-events:none !important;

}


.reduction-report-box .report-close:hover{

    color:#fff !important;


    background:
        rgba(239,68,68,.13) !important;


    border-color:
        rgba(239,68,68,.30) !important;


    transform:
        rotate(90deg) !important;

}


/* =========================================================
   ICON
========================================================= */

.reduction-report-box .report-icon{

    width:66px !important;

    height:66px !important;


    display:grid !important;

    place-items:center !important;


    margin:
        0 auto 14px !important;


    border:
        1px solid
        rgba(125,211,252,.18) !important;


    border-radius:20px !important;


    background:

        linear-gradient(
            145deg,
            rgba(56,189,248,.15),
            rgba(34,197,94,.10)
        ) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.08),

        0 14px 35px
        rgba(0,0,0,.18) !important;


    font-size:32px !important;

    line-height:1 !important;


    animation:
        reductionFirePulse
        2s
        ease-in-out
        infinite;

}


@keyframes reductionFirePulse{

    0%,
    100%{

        transform:
            scale(1);

    }

    50%{

        transform:
            scale(1.06);

    }

}


/* =========================================================
   TITLE
========================================================= */

.reduction-report-box h2{

    position:relative !important;


    margin:
        0 42px 24px !important;


    padding:0 !important;


    text-align:center !important;


    font-size:
        clamp(
            22px,
            4vw,
            29px
        ) !important;


    line-height:1.2 !important;


    font-weight:850 !important;


    letter-spacing:-.035em !important;


    background:

        linear-gradient(
            90deg,
            #18bfff,
            #7c5cff
        ) !important;


    -webkit-background-clip:
        text !important;


    background-clip:text !important;


    -webkit-text-fill-color:
        transparent !important;

}


/* =========================================================
   EMOJI FIX
========================================================= */

.reduction-report-box .report-title-fire{

    -webkit-text-fill-color:
        initial !important;

    background:none !important;

    color:initial !important;


    display:inline-block !important;


    margin-right:4px !important;

}


/* =========================================================
   PROGRESS AREA
========================================================= */

.reduction-report-box .report-progress{

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;


    margin:
        4px 0 24px !important;


    padding:0 !important;


    border-radius:0 !important;


    background:transparent !important;

}


/* =========================================================
   PROGRESS RING
========================================================= */

.reduction-report-box .progress-ring{

    position:relative !important;


    width:188px !important;

    height:188px !important;


    display:grid !important;

    place-items:center !important;


    border-radius:50% !important;


    box-shadow:

        0 18px 50px
        rgba(0,0,0,.25),

        inset 0 1px 0
        rgba(255,255,255,.06) !important;


    isolation:isolate !important;

}


/*
   Środek pierścienia.
   JS może nadal ustawiać conic-gradient
   bezpośrednio na .progress-ring.
*/

.reduction-report-box .progress-ring::before{

    content:"";


    position:absolute !important;

    inset:9px !important;


    border-radius:50% !important;


    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(56,189,248,.08),
            transparent 40%
        ),

        #091423 !important;


    border:
        1px solid
        rgba(255,255,255,.07) !important;


    box-shadow:

        inset 0 2px 10px
        rgba(0,0,0,.25) !important;


    z-index:-1 !important;

}


/* =========================================================
   PROGRESS CONTENT
========================================================= */

.reduction-report-box .progress-ring div{

    position:relative !important;

    z-index:2 !important;


    width:125px !important;


    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;


    text-align:center !important;

}


.reduction-report-box .progress-ring strong{

    display:block !important;


    font-size:34px !important;

    line-height:1 !important;


    font-weight:900 !important;


    letter-spacing:-.045em !important;


    background:

        linear-gradient(
            135deg,
            #00eaff,
            #7cff6b
        ) !important;


    -webkit-background-clip:
        text !important;


    background-clip:text !important;


    -webkit-text-fill-color:
        transparent !important;

}


.reduction-report-box .progress-ring span{

    display:block !important;


    margin-top:8px !important;


    color:
        #94a3b8 !important;


    font-size:11px !important;

    line-height:1.35 !important;


    font-weight:650 !important;

}


/* =========================================================
   STATS
========================================================= */

.reduction-report-box .report-stats{

    display:grid !important;


    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;


    gap:10px !important;


    margin:
        0 0 18px !important;

}


.reduction-report-box .report-stats div{

    min-width:0 !important;


    padding:14px !important;


    border:
        1px solid
        rgba(255,255,255,.07) !important;


    border-radius:16px !important;


    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.022)
        ) !important;


    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.035) !important;


    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;


    gap:12px !important;


    font-size:13px !important;


    transition:

        border-color .2s ease,

        transform .2s ease,

        background .2s ease !important;

}


.reduction-report-box .report-stats div:hover{

    border-color:
        rgba(56,189,248,.18) !important;


    background:
        rgba(56,189,248,.055) !important;


    transform:
        translateY(-1px) !important;

}


.reduction-report-box .report-stats span{

    display:block !important;


    margin:0 !important;


    color:
        #94a3b8 !important;


    font-size:11px !important;


    line-height:1.35 !important;


    font-weight:650 !important;

}


.reduction-report-box .report-stats strong{

    display:block !important;


    color:
        #f8fafc !important;


    font-size:20px !important;


    line-height:1.1 !important;


    font-weight:850 !important;


    letter-spacing:-.025em !important;


    text-align:right !important;


    word-break:break-word !important;

}


/* =========================================================
   MESSAGE
========================================================= */

.reduction-report-box .report-message{

    position:relative !important;


    margin:
        0 0 18px !important;


    padding:
        16px 17px !important;


    border:
        1px solid
        rgba(56,189,248,.12) !important;


    border-radius:17px !important;


    background:

        linear-gradient(
            135deg,
            rgba(56,189,248,.08),
            rgba(34,197,94,.045)
        ) !important;


    color:
        #cbd5e1 !important;


    font-size:13px !important;


    line-height:1.65 !important;


    text-align:left !important;

}


.reduction-report-box .report-message strong{

    color:
        #f8fafc !important;

}


/* =========================================================
   CHART
========================================================= */

.reduction-report-box #reductionReportChart{

    display:block !important;


    width:100% !important;


    height:250px !important;


    max-height:250px !important;


    margin:
        0 0 20px !important;


    padding:12px !important;


    box-sizing:border-box !important;


    border:
        1px solid
        rgba(255,255,255,.07) !important;


    border-radius:18px !important;


    background:
        rgba(2,6,23,.24) !important;

}


/* =========================================================
   DATE
========================================================= */

.reduction-report-box .report-date{

    margin-top:15px !important;


    padding:
        15px 0 0 !important;


    border-top:
        1px solid
        rgba(255,255,255,.08) !important;


    color:
        #64748b !important;


    text-align:center !important;


    font-size:11px !important;


    line-height:1.4 !important;

}


.reduction-report-box .report-date strong{

    display:block !important;


    margin-top:7px !important;


    color:
        #7cff9a !important;


    font-size:16px !important;


    line-height:1.3 !important;


    font-weight:800 !important;

}


/* =========================================================
   HISTORY BUTTON
   Jeśli występuje w raporcie redukcji
========================================================= */

.reduction-report-box #openReductionReportHistoryBtn{

    width:100% !important;


    min-height:46px !important;


    margin:
        0 0 15px !important;


    padding:
        0 16px !important;


    border:
        1px solid
        rgba(125,211,252,.18) !important;


    border-radius:14px !important;


    background:

        linear-gradient(
            135deg,
            #7dd3fc,
            #38bdf8 52%,
            #34d399
        ) !important;


    color:#06121d !important;


    font-family:inherit !important;


    font-size:12px !important;


    font-weight:850 !important;


    cursor:pointer !important;


    box-shadow:
        0 10px 24px
        rgba(14,165,233,.18) !important;


    transition:
        box-shadow .2s ease,
        filter .2s ease,
        transform .2s ease !important;

}


.reduction-report-box #openReductionReportHistoryBtn:hover{

    filter:brightness(1.05) !important;


    box-shadow:
        0 15px 32px
        rgba(14,165,233,.25) !important;


    transform:
        translateY(-1px) !important;

}


/* =========================================================
   GENERAL SAFETY
========================================================= */

.reduction-report-bg,
.reduction-report-bg *{

    box-sizing:border-box;

}


.reduction-report-box button{

    appearance:none;

    -webkit-appearance:none;

}


.reduction-report-box h2,
.reduction-report-box p{

    font-family:inherit;

}


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

@media(max-width:700px){

    .reduction-report-bg{

        align-items:flex-end !important;

        padding:0 !important;

    }


    .reduction-report-box{

        width:100% !important;

        max-width:none !important;


        max-height:
            calc(
                100dvh - 8px
            ) !important;


        padding:

            22px
            16px
            calc(
                20px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            )
            !important;


        border-radius:
            25px 25px 0 0 !important;


        border-bottom:0 !important;


        animation:
            reductionReportMobileIn
            .30s
            cubic-bezier(.22,1,.36,1)
            both;

    }


    .reduction-report-box .report-close{

        top:12px !important;

        right:12px !important;


        width:36px !important;

        height:36px !important;

    }


    .reduction-report-box .report-icon{

        width:58px !important;

        height:58px !important;


        margin-bottom:11px !important;


        border-radius:17px !important;


        font-size:28px !important;

    }


    .reduction-report-box h2{

        margin-left:40px !important;

        margin-right:40px !important;


        margin-bottom:18px !important;


        font-size:22px !important;

    }


    .reduction-report-box .progress-ring{

        width:165px !important;

        height:165px !important;

    }


    .reduction-report-box .progress-ring div{

        width:110px !important;

    }


    .reduction-report-box .progress-ring strong{

        font-size:29px !important;

    }


    .reduction-report-box .report-stats{

        gap:8px !important;

    }


    .reduction-report-box .report-stats div{

        padding:12px !important;

        border-radius:14px !important;

        gap:8px !important;

    }


    .reduction-report-box .report-stats span{

        font-size:10px !important;

    }


    .reduction-report-box .report-stats strong{

        font-size:17px !important;

    }


    .reduction-report-box .report-message{

        padding:
            14px 15px !important;

        font-size:12px !important;

    }


    .reduction-report-box #reductionReportChart{

        height:210px !important;

        max-height:210px !important;

    }


    .reduction-report-box .report-date{

        font-size:10px !important;

    }


    .reduction-report-box .report-date strong{

        font-size:15px !important;

    }

}


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

@keyframes reductionReportMobileIn{

    from{

        opacity:0;

        transform:
            translateY(35px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


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

@media(max-width:380px){

    .reduction-report-box{

        padding:
            20px 13px
            calc(
                18px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            )
            !important;

    }


    .reduction-report-box .report-stats{

        grid-template-columns:
            1fr !important;

    }


    .reduction-report-box .progress-ring{

        width:150px !important;

        height:150px !important;

    }


    .reduction-report-box .progress-ring strong{

        font-size:27px !important;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .reduction-report-bg,
    .reduction-report-box,
    .reduction-report-box .report-icon{

        animation:none !important;

    }


    .reduction-report-box .report-close,
    .reduction-report-box .report-stats div,
    .reduction-report-box #openReductionReportHistoryBtn{

        transition:none !important;

    }

}