/* =====================================
   ADMIN ORDERS + REPORTS WIDGETS
   SAAS CLEAN 2026
   DIETETIC.ART
===================================== */


/* =====================================
   SHARED WIDGET BASE
===================================== */

#adminOrdersWidget,
#adminReportsWidget{

    display:none;

    align-items:center;

    gap:12px;

    padding:10px 14px;

    margin-right:10px;

    min-width:150px;

    box-sizing:border-box;

    background:
    linear-gradient(
        135deg,
        rgba(15,27,45,.88),
        rgba(11,18,32,.82)
    );

    backdrop-filter:
    blur(18px);

    -webkit-backdrop-filter:
    blur(18px);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:16px;

    cursor:pointer;

    transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;

    position:relative;

    overflow:visible;

    z-index:5000;

}


/* =====================================
   SHARED WIDGET GLOW
===================================== */

#adminOrdersWidget::before,
#adminReportsWidget::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:16px;

    background:
    linear-gradient(
        110deg,
        transparent 20%,
        rgba(14,165,233,.08),
        transparent 80%
    );

    opacity:.7;

    pointer-events:none;

}


/* =====================================
   SHARED TOP HIGHLIGHT
===================================== */

#adminOrdersWidget::after,
#adminReportsWidget::after{

    content:"";

    position:absolute;

    top:0;

    left:12%;

    right:12%;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(56,189,248,.35),
        transparent
    );

    pointer-events:none;

}


/* =====================================
   ORDERS HOVER
===================================== */

#adminOrdersWidget:hover{

    transform:
    translateY(-2px);

    background:
    linear-gradient(
        135deg,
        rgba(15,27,45,.96),
        rgba(12,37,64,.9)
    );

    border-color:
    rgba(14,165,233,.42);

    box-shadow:
    0 12px 30px rgba(14,165,233,.14),
    0 4px 12px rgba(0,0,0,.25);

}


/* =====================================
   REPORTS HOVER
===================================== */

#adminReportsWidget:hover{

    transform:
    translateY(-2px);

    background:
    linear-gradient(
        135deg,
        rgba(15,27,45,.96),
        rgba(12,37,64,.9)
    );

    border-color:
    rgba(14,165,233,.42);

    box-shadow:
    0 12px 30px rgba(14,165,233,.14),
    0 4px 12px rgba(0,0,0,.25);

}


/* =====================================
   ORDERS PULSE
===================================== */

#adminOrdersPulse{

    width:11px;

    height:11px;

    flex:0 0 11px;

    border-radius:50%;

    background:#ef4444;

    box-shadow:
    0 0 0 3px rgba(239,68,68,.08),
    0 0 16px rgba(239,68,68,.75);

    animation:
    adminOrdersPulse 2.2s ease-in-out infinite;

}


@keyframes adminOrdersPulse{

    0%{

        transform:scale(1);

        box-shadow:
        0 0 0 3px rgba(239,68,68,.08),
        0 0 14px rgba(239,68,68,.65);

    }

    50%{

        transform:scale(1.25);

        box-shadow:
        0 0 0 5px rgba(239,68,68,.04),
        0 0 22px rgba(239,68,68,.9);

    }

    100%{

        transform:scale(1);

        box-shadow:
        0 0 0 3px rgba(239,68,68,.08),
        0 0 14px rgba(239,68,68,.65);

    }

}


/* =====================================
   REPORTS PULSE
===================================== */

#adminReportsPulse{

    width:11px;

    height:11px;

    flex:0 0 11px;

    border-radius:50%;

    background:#ef4444;

    box-shadow:
    0 0 0 3px rgba(239,68,68,.08),
    0 0 16px rgba(239,68,68,.75);

    animation:
    adminReportsPulse 2.2s ease-in-out infinite;

}


@keyframes adminReportsPulse{

    0%{

        transform:scale(1);

        box-shadow:
        0 0 0 3px rgba(239,68,68,.08),
        0 0 14px rgba(239,68,68,.65);

    }

    50%{

        transform:scale(1.25);

        box-shadow:
        0 0 0 5px rgba(239,68,68,.04),
        0 0 22px rgba(239,68,68,.9);

    }

    100%{

        transform:scale(1);

        box-shadow:
        0 0 0 3px rgba(239,68,68,.08),
        0 0 14px rgba(239,68,68,.65);

    }

}


/* =====================================
   SHARED CONTENT
===================================== */

.admin-orders-content,
.admin-reports-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:3px;

    line-height:1.1;

}


/* =====================================
   NUMBERS
===================================== */

#adminOrdersNumber,
#adminReportsNumber{

    font-size:20px;

    line-height:1;

    font-weight:800;

    letter-spacing:-.02em;

    color:#f8fafc;

}


/* =====================================
   LABELS
===================================== */

.admin-orders-label,
.admin-reports-label{

    font-size:10px;

    line-height:1;

    font-weight:700;

    letter-spacing:.09em;

    text-transform:uppercase;

    color:#94a3b8;

}


/* =====================================
   NO ORDERS
===================================== */

#adminOrdersWidget.no-orders
#adminOrdersPulse{

    background:#22c55e;

    box-shadow:
    0 0 0 3px rgba(34,197,94,.08),
    0 0 16px rgba(34,197,94,.65);

}


#adminOrdersWidget.no-orders:hover{

    border-color:
    rgba(14,165,233,.35);

}


/* =====================================
   NO REPORTS
===================================== */

#adminReportsWidget.no-reports
#adminReportsPulse{

    background:#22c55e;

    box-shadow:
    0 0 0 3px rgba(34,197,94,.08),
    0 0 16px rgba(34,197,94,.65);

}


#adminReportsWidget.no-reports:hover{

    border-color:
    rgba(14,165,233,.35);

}


/* =====================================
   HAS ORDERS
===================================== */

#adminOrdersWidget.has-orders{

    border-color:
    rgba(239,68,68,.18);

}


#adminOrdersWidget.has-orders:hover{

    border-color:
    rgba(14,165,233,.42);

    box-shadow:
    0 12px 32px rgba(14,165,233,.16),
    0 0 25px rgba(239,68,68,.05);

}


/* =====================================
   HAS REPORTS
===================================== */

#adminReportsWidget.has-reports{

    border-color:
    rgba(239,68,68,.18);

}


#adminReportsWidget.has-reports:hover{

    border-color:
    rgba(14,165,233,.42);

    box-shadow:
    0 12px 32px rgba(14,165,233,.16),
    0 0 25px rgba(239,68,68,.05);

}


/* =====================================
   ORDERS PANEL
===================================== */

#adminOrdersList{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:390px;

    max-width:calc(100vw - 30px);

    max-height:540px;

    overflow-x:hidden;

    overflow-y:auto;

    padding:12px;

    box-sizing:border-box;

    background:
    linear-gradient(
        145deg,
        rgba(15,27,45,.98),
        rgba(11,18,32,.98)
    );

    backdrop-filter:
    blur(24px);

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

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

    border-radius:20px;

    box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 35px rgba(14,165,233,.05);

    display:none;

    z-index:999999;

}


/* =====================================
   REPORTS PANEL
===================================== */

#adminReportsList{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:390px;

    max-width:calc(100vw - 30px);

    max-height:540px;

    overflow-x:hidden;

    overflow-y:auto;

    padding:12px;

    box-sizing:border-box;

    background:
    linear-gradient(
        145deg,
        rgba(15,27,45,.98),
        rgba(11,18,32,.98)
    );

    backdrop-filter:
    blur(24px);

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

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

    border-radius:20px;

    box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 35px rgba(14,165,233,.05);

    display:none;

    z-index:999998;

}


/* =====================================
   PANEL TOP GLOW
===================================== */

#adminOrdersList::before,
#adminReportsList::before{

    content:"";

    position:absolute;

    top:0;

    left:15%;

    right:15%;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(56,189,248,.4),
        transparent
    );

    pointer-events:none;

}


/* =====================================
   DESKTOP HOVER
===================================== */

@media(min-width:769px){

    #adminOrdersWidget:hover #adminOrdersList{

        display:block;

    }


    #adminReportsWidget:hover #adminReportsList{

        display:block;

    }

}


/* =====================================
   ORDER CARD
===================================== */

.admin-order-item{

    width:100%;

    box-sizing:border-box;

    padding:17px;

    margin-bottom:10px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.025)
    );

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

    border-radius:16px;

    transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;

}


.admin-order-item:last-child{

    margin-bottom:0;

}


.admin-order-item:hover{

    transform:
    translateY(-2px);

    background:
    linear-gradient(
        145deg,
        rgba(14,165,233,.09),
        rgba(255,255,255,.035)
    );

    border-color:
    rgba(14,165,233,.28);

    box-shadow:
    0 10px 25px rgba(0,0,0,.18);

}


/* =====================================
   REPORT CARD
===================================== */

.admin-report-item{

    width:100%;

    box-sizing:border-box;

    padding:17px;

    margin-bottom:10px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.025)
    );

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

    border-radius:16px;

    transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;

}


.admin-report-item:last-child{

    margin-bottom:0;

}


.admin-report-item:hover{

    transform:
    translateY(-2px);

    background:
    linear-gradient(
        145deg,
        rgba(14,165,233,.09),
        rgba(255,255,255,.035)
    );

    border-color:
    rgba(14,165,233,.28);

    box-shadow:
    0 10px 25px rgba(0,0,0,.18);

}


/* =====================================
   CARD TITLES
===================================== */

.admin-order-item h3,
.admin-report-item h3{

    margin:
    0 0 11px;

    font-size:16px;

    line-height:1.25;

    font-weight:750;

    letter-spacing:-.01em;

    color:#f8fafc;

    overflow-wrap:anywhere;

}


/* =====================================
   CARD DATA
===================================== */

.admin-order-item p,
.admin-report-item p{

    margin:7px 0;

    font-size:13px;

    line-height:1.45;

    color:#cbd5e1;

    overflow-wrap:anywhere;

    word-break:break-word;

}


.admin-order-item p:first-of-type,
.admin-report-item p:first-of-type{

    color:#94a3b8;

}


/* =====================================
   ACTIONS
===================================== */

.admin-order-actions,
.admin-report-actions{

    display:flex;

    flex-direction:column;

    gap:7px;

    margin-top:14px;

}


/* =====================================
   ALL ACTION BUTTONS
===================================== */

.admin-order-actions button,
.admin-report-actions button{

    width:100%;

    margin:0;

    padding:12px 15px;

    border-radius:12px;

    cursor:pointer;

    font-size:12px;

    font-weight:750;

    letter-spacing:.01em;

    color:#f8fafc;

    transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;

}


.admin-order-actions button:hover,
.admin-report-actions button:hover{

    transform:
    translateY(-1px);

    filter:
    brightness(1.08);

}


.admin-order-actions button:active,
.admin-report-actions button:active{

    transform:
    translateY(0);

}


/* =====================================
   ACTIVATE
===================================== */

.admin-order-activate{

    border:
    1px solid rgba(52,211,153,.22);

    background:
    linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

    box-shadow:
    0 8px 20px rgba(22,163,74,.15);

}


.admin-order-activate:hover{

    box-shadow:
    0 12px 26px rgba(22,163,74,.25);

}


/* =====================================
   REJECT
===================================== */

.admin-order-reject,
.admin-report-reject{

    border:
    1px solid rgba(239,68,68,.18);

    background:
    rgba(127,29,29,.42);

    color:#fecaca !important;

}


.admin-order-reject:hover,
.admin-report-reject:hover{

    border-color:
    rgba(239,68,68,.38);

    background:
    rgba(153,27,27,.58);

    box-shadow:
    0 8px 20px rgba(239,68,68,.12);

}


/* =====================================
   SPAM
===================================== */

.admin-order-spam{

    border:
    1px solid rgba(245,158,11,.18);

    background:
    rgba(120,53,15,.42);

    color:#fde68a !important;

}


.admin-order-spam:hover{

    border-color:
    rgba(245,158,11,.38);

    background:
    rgba(146,64,14,.58);

    box-shadow:
    0 8px 20px rgba(245,158,11,.12);

}


/* =====================================
   REPORT RESOLVED
===================================== */

.admin-report-done{

    border:
    1px solid rgba(52,211,153,.22);

    background:
    linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

    box-shadow:
    0 8px 20px rgba(22,163,74,.15);

}


.admin-report-done:hover{

    box-shadow:
    0 12px 26px rgba(22,163,74,.25);

}


/* =====================================
   EMPTY STATE
===================================== */

#adminOrdersList > p,
#adminReportsList > p{

    margin:0;

    padding:28px 16px;

    text-align:center;

    font-size:13px;

    line-height:1.5;

    color:#94a3b8;

}


/* =====================================
   SCROLLBARS
===================================== */

#adminOrdersList::-webkit-scrollbar,
#adminReportsList::-webkit-scrollbar{

    width:5px;

}


#adminOrdersList::-webkit-scrollbar-track,
#adminReportsList::-webkit-scrollbar-track{

    background:transparent;

}


#adminOrdersList::-webkit-scrollbar-thumb,
#adminReportsList::-webkit-scrollbar-thumb{

    background:
    rgba(56,189,248,.18);

    border-radius:10px;

}


#adminOrdersList::-webkit-scrollbar-thumb:hover,
#adminReportsList::-webkit-scrollbar-thumb:hover{

    background:
    rgba(56,189,248,.32);

}


/* =====================================
   MOBILE <= 768px
===================================== */

@media(max-width:768px){

    #adminOrdersWidget,
    #adminReportsWidget{

        display:flex;

        width:max-content;

        min-width:0;

        max-width:max-content;

        flex:0 0 auto;

        padding:8px 10px;

        margin-right:7px;

        gap:8px;

        border-radius:13px;

        box-sizing:border-box;

        position:relative;

        overflow:visible;

        transform:none;

    }


    #adminOrdersWidget:hover,
    #adminReportsWidget:hover{

        transform:none;

    }


    #adminOrdersPulse,
    #adminReportsPulse{

        width:9px;

        height:9px;

        flex:0 0 9px;

    }


    #adminOrdersNumber,
    #adminReportsNumber{

        font-size:17px;

        line-height:1;

    }


    .admin-orders-label,
    .admin-reports-label{

        font-size:9px;

    }


    /* =================================
       ORDERS MOBILE PANEL
    ================================= */

    #adminOrdersList{

        position:absolute !important;

        top:calc(100% + 10px) !important;

        right:-35px !important;

        left:auto !important;

        bottom:auto !important;

        width:390px !important;

        max-width:calc(100vw - 16px) !important;

        min-width:0 !important;

        height:auto !important;

        max-height:calc(100vh - 90px) !important;

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

        margin:0 !important;

        padding:11px !important;

        box-sizing:border-box !important;

        overflow-x:hidden !important;

        overflow-y:auto !important;

        display:none;

        z-index:2147483647 !important;

        background:
        linear-gradient(
            145deg,
            rgba(15,27,45,.99),
            rgba(11,18,32,.99)
        );

        backdrop-filter:
        blur(24px);

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

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

        border-radius:19px;

        box-shadow:
        0 25px 80px rgba(0,0,0,.65),
        0 0 35px rgba(14,165,233,.06);

    }


    /* =================================
       REPORTS MOBILE PANEL
    ================================= */

    #adminReportsList{

        position:absolute !important;

        top:calc(100% + 10px) !important;

        right:-35px !important;

        left:auto !important;

        bottom:auto !important;

        width:390px !important;

        max-width:calc(100vw - 16px) !important;

        min-width:0 !important;

        height:auto !important;

        max-height:calc(100vh - 90px) !important;

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

        margin:0 !important;

        padding:11px !important;

        box-sizing:border-box !important;

        overflow-x:hidden !important;

        overflow-y:auto !important;

        display:none;

        z-index:2147483646 !important;

        background:
        linear-gradient(
            145deg,
            rgba(15,27,45,.99),
            rgba(11,18,32,.99)
        );

        backdrop-filter:
        blur(24px);

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

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

        border-radius:19px;

        box-shadow:
        0 25px 80px rgba(0,0,0,.65),
        0 0 35px rgba(14,165,233,.06);

    }


    /* =================================
       MOBILE — NO HOVER
    ================================= */

    #adminOrdersWidget:hover #adminOrdersList,
    #adminReportsWidget:hover #adminReportsList{

        display:none;

    }


    /* =================================
       JS OPEN STATE
    ================================= */

    #adminOrdersList[style*="display: block"],
    #adminReportsList[style*="display: block"]{

        display:block !important;

    }


    /* =================================
       CARDS
    ================================= */

    .admin-order-item,
    .admin-report-item{

        width:100% !important;

        min-width:0 !important;

        max-width:none !important;

        box-sizing:border-box;

        padding:15px;

        margin:0 0 9px;

        border-radius:15px;

    }


    .admin-order-item:last-child,
    .admin-report-item:last-child{

        margin-bottom:0;

    }


    .admin-order-item h3,
    .admin-report-item h3{

        font-size:15px;

        margin:
        0 0 9px;

        overflow-wrap:anywhere;

    }


    .admin-order-item p,
    .admin-report-item p{

        font-size:12px;

        line-height:1.5;

        overflow-wrap:anywhere;

        word-break:break-word;

    }


    .admin-order-actions,
    .admin-report-actions{

        gap:7px;

        margin-top:11px;

    }


    .admin-order-actions button,
    .admin-report-actions button{

        width:100%;

        min-height:44px;

        padding:11px 12px;

        margin:0;

        border-radius:12px;

        font-size:12px;

    }

}


/* =====================================
   PHONE <= 560px
===================================== */

@media(max-width:560px){

    #adminOrdersWidget,
    #adminReportsWidget{

        padding:8px 9px;

        margin-right:5px;

        gap:7px;

        border-radius:12px;

    }


    #adminOrdersPulse,
    #adminReportsPulse{

        width:8px;

        height:8px;

        flex:0 0 8px;

    }


    #adminOrdersNumber,
    #adminReportsNumber{

        font-size:16px;

    }


    .admin-orders-label,
    .admin-reports-label{

        display:none;

    }


    /* =================================
       ORDERS PANEL
    ================================= */

    #adminOrdersList{

        top:calc(100% + 8px) !important;

        right:-30px !important;

        left:auto !important;

        width:370px !important;

        max-width:calc(100vw - 16px) !important;

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

        padding:10px !important;

        border-radius:18px;

    }


    /* =================================
       REPORTS PANEL
    ================================= */

    #adminReportsList{

        top:calc(100% + 8px) !important;

        right:-30px !important;

        left:auto !important;

        width:370px !important;

        max-width:calc(100vw - 16px) !important;

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

        padding:10px !important;

        border-radius:18px;

    }


    .admin-order-item,
    .admin-report-item{

        padding:14px;

        margin-bottom:8px;

        border-radius:14px;

    }


    .admin-order-item h3,
    .admin-report-item h3{

        font-size:15px;

    }


    .admin-order-item p,
    .admin-report-item p{

        font-size:12px;

    }


    .admin-order-actions button,
    .admin-report-actions button{

        min-height:43px;

        font-size:12px;

    }

}


/* =====================================
   VERY SMALL PHONE <= 400px
===================================== */

@media(max-width:400px){

    #adminOrdersWidget,
    #adminReportsWidget{

        padding:7px 8px;

        border-radius:11px;

    }


    #adminOrdersNumber,
    #adminReportsNumber{

        font-size:15px;

    }


    /* =================================
       ORDERS PANEL
    ================================= */

    #adminOrdersList{

        top:calc(100% + 7px) !important;

        right:-75px !important;

        left:auto !important;

        width:350px !important;

        max-width:calc(100vw - 12px) !important;

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

        padding:9px !important;

        border-radius:17px;

    }


    /* =================================
       REPORTS PANEL
    ================================= */

    #adminReportsList{

        top:calc(100% + 7px) !important;

        right:-75px !important;

        left:auto !important;

        width:350px !important;

        max-width:calc(100vw - 12px) !important;

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

        padding:9px !important;

        border-radius:17px;

    }


    .admin-order-item,
    .admin-report-item{

        padding:13px;

        border-radius:13px;

    }


    .admin-order-item h3,
    .admin-report-item h3{

        font-size:14px;

    }


    .admin-order-item p,
    .admin-report-item p{

        font-size:11.5px;

    }


    .admin-order-actions button,
    .admin-report-actions button{

        min-height:42px;

        font-size:11.5px;

    }

}


/* =====================================
   REDUCE MOTION
===================================== */

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

    #adminOrdersWidget,
    #adminReportsWidget,
    .admin-order-item,
    .admin-report-item,
    .admin-order-actions button,
    .admin-report-actions button{

        transition:none;

    }


    #adminOrdersPulse,
    #adminReportsPulse{

        animation:none;

    }

}