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


/* =====================================
   PAGE
===================================== */

body{

    min-height:100vh;

    color:#f8fafc;

}


/* =====================================
   MAIN HEADER
===================================== */

.admin-dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    padding:24px 28px;

    margin:20px 24px;

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

    backdrop-filter:blur(18px);

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

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

    border-radius:20px;

    box-shadow:
    0 15px 45px rgba(0,0,0,.28);

}


/* =====================================
   HEADER TEXT
===================================== */

.admin-dashboard-header h1{

    margin:0;

    font-size:27px;

    line-height:1.15;

    font-weight:850;

    letter-spacing:-.025em;

    color:#f8fafc;

}


.admin-dashboard-header p{

    margin:7px 0 0;

    font-size:13px;

    line-height:1.4;

    color:#94a3b8;

}


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

.dashboard-stats{

    display:flex;

    gap:10px;

    flex:0 0 auto;

}


/* =====================================
   STAT CARD
===================================== */

.dashboard-card{

    min-width:105px;

    padding:14px 16px;

    box-sizing:border-box;

    border-radius:14px;

    background:
    rgba(255,255,255,.045);

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

    text-align:center;

    transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;

}


.dashboard-card:hover{

    transform:translateY(-2px);

    background:
    rgba(255,255,255,.065);

}


/* =====================================
   STAT NUMBER
===================================== */

.dashboard-card strong{

    display:block;

    font-size:25px;

    line-height:1;

    font-weight:850;

    letter-spacing:-.03em;

    color:#f8fafc;

}


/* =====================================
   STAT LABEL
===================================== */

.dashboard-card span{

    display:block;

    margin-top:6px;

    font-size:9px;

    line-height:1;

    font-weight:700;

    letter-spacing:.07em;

    color:#94a3b8;

    text-transform:uppercase;

}


/* =====================================
   PENDING
===================================== */

.dashboard-card.pending{

    border-color:
    rgba(234,179,8,.25);

}


.dashboard-card.pending strong{

    color:#fde68a;

}


/* =====================================
   ACTIVE
===================================== */

.dashboard-card.active{

    border-color:
    rgba(34,197,94,.25);

}


.dashboard-card.active strong{

    color:#86efac;

}


/* =====================================
   TOOLBAR
===================================== */

.admin-toolbar{

    margin:0 24px 18px;

    padding:12px;

    display:flex;

    gap:10px;

    align-items:center;

    background:
    rgba(15,23,42,.72);

    backdrop-filter:blur(16px);

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

    border-radius:16px;

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

}


/* =====================================
   SEARCH
===================================== */

#searchOrders{

    flex:1;

    min-width:0;

    padding:11px 14px;

    box-sizing:border-box;

    border-radius:11px;

    background:
    rgba(2,6,23,.75);

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

    color:#f8fafc;

    font-size:13px;

    outline:none;

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

}


#searchOrders::placeholder{

    color:#64748b;

}


#searchOrders:focus{

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

    background:
    rgba(2,6,23,.95);

    box-shadow:
    0 0 0 3px rgba(14,165,233,.07);

}


/* =====================================
   FILTER BUTTONS
===================================== */

.filter-buttons{

    display:flex;

    gap:6px;

    flex:0 0 auto;

}


.filter-buttons button{

    padding:10px 14px;

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

    border-radius:10px;

    background:
    rgba(30,41,59,.8);

    color:#cbd5e1;

    font-size:11px;

    font-weight:750;

    cursor:pointer;

    transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;

}


.filter-buttons button:hover{

    transform:translateY(-1px);

    background:
    rgba(51,65,85,.95);

    border-color:
    rgba(255,255,255,.13);

    color:#fff;

}


.filter-buttons button.active{

    background:
    linear-gradient(
        135deg,
        #0ea5e9,
        #2563eb
    );

    border-color:
    rgba(56,189,248,.25);

    color:#fff;

}


/* =====================================
   ORDERS GRID
===================================== */

#ordersGrid{

    padding:0 24px 24px;

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:14px;

}


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

.order-card{

    min-width:0;

    padding:17px;

    box-sizing:border-box;

    background:
    linear-gradient(
        145deg,
        rgba(15,23,42,.88),
        rgba(11,18,32,.86)
    );

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

    border-radius:16px;

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

}


.order-card:hover{

    transform:translateY(-2px);

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

    background:
    linear-gradient(
        145deg,
        rgba(15,23,42,.96),
        rgba(12,37,64,.88)
    );

    box-shadow:
    0 15px 35px rgba(0,0,0,.32);

}


/* =====================================
   ORDER HEADER
===================================== */

.order-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}


.order-header h2{

    margin:0;

    min-width:0;

    font-size:17px;

    line-height:1.25;

    font-weight:800;

    letter-spacing:-.015em;

    color:#f8fafc;

    overflow-wrap:anywhere;

}


/* =====================================
   STATUS
===================================== */

.status{

    flex:0 0 auto;

    padding:5px 9px;

    border-radius:999px;

    font-size:9px;

    line-height:1;

    font-weight:800;

    letter-spacing:.04em;

    text-transform:uppercase;

}


.status.pending{

    background:
    rgba(234,179,8,.13);

    border:
    1px solid rgba(234,179,8,.2);

    color:#fde68a;

}


.status.completed{

    background:
    rgba(34,197,94,.13);

    border:
    1px solid rgba(34,197,94,.2);

    color:#86efac;

}


.status.rejected{

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

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

    color:#fca5a5;

}


.status.spam{

    background:
    rgba(168,85,247,.13);

    border:
    1px solid rgba(168,85,247,.2);

    color:#d8b4fe;

}


/* =====================================
   ORDER DATA
===================================== */

.order-data{

    margin-top:14px;

    display:grid;

    gap:7px;

}


.order-data div{

    padding:9px 11px;

    border-radius:10px;

    background:
    rgba(255,255,255,.035);

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

}


/* =====================================
   DATA LABEL
===================================== */

.order-data label{

    display:block;

    margin-bottom:3px;

    font-size:9px;

    line-height:1.2;

    color:#64748b;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

}


/* =====================================
   DATA VALUE
===================================== */

.order-data strong{

    display:block;

    font-size:12px;

    line-height:1.35;

    font-weight:650;

    color:#e2e8f0;

    overflow-wrap:anywhere;

    word-break:break-word;

}


/* =====================================
   GRANT BUTTON
===================================== */

.grant-btn{

    width:100%;

    margin-top:13px;

    padding:11px 13px;

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

    border-radius:11px;

    cursor:pointer;

    font-weight:800;

    font-size:11px;

    line-height:1.2;

    color:#fff;

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

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

    transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;

}


.grant-btn:hover{

    transform:translateY(-1px);

    filter:brightness(1.08);

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

}


.grant-btn:active{

    transform:translateY(0);

}


/* =====================================
   ACTIVATED
===================================== */

.activated{

    margin-top:13px;

    padding:10px;

    border-radius:11px;

    text-align:center;

    font-size:11px;

    line-height:1.3;

    font-weight:750;

    background:
    rgba(34,197,94,.1);

    border:
    1px solid rgba(34,197,94,.15);

    color:#86efac;

}


/* =====================================
   LOADING
===================================== */

.loading-card{

    padding:28px;

    margin:20px 24px;

    border-radius:15px;

    background:
    rgba(255,255,255,.035);

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

    text-align:center;

    font-size:13px;

    color:#94a3b8;

}


/* =====================================
   EMPTY GRID
===================================== */

#ordersGrid:empty{

    display:none;

}


/* =====================================
   ADMIN ORDERS WIDGET
===================================== */

#adminOrdersWidget{

    position:relative;

    display:none;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    cursor:pointer;

    user-select:none;

    z-index:100000;

}


/* =====================================
   ADMIN REPORTS WIDGET
===================================== */

#adminReportsWidget{

    position:relative;

    display:none;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    cursor:pointer;

    user-select:none;

    z-index:100000;

}


/* =====================================
   WIDGET CONTAINERS
===================================== */

#adminOrdersWidget,
#adminReportsWidget{

    min-width:44px;

    min-height:44px;

}


/* =====================================
   WIDGET ICON / BUTTON
===================================== */

#adminOrdersWidget > *,
#adminReportsWidget > *{

    box-sizing:border-box;

}


/* =====================================
   ORDERS NUMBER
===================================== */

#adminOrdersNumber{

    min-width:18px;

    height:18px;

    padding:0 5px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    font-size:9px;

    line-height:1;

    font-weight:850;

    color:#fff;

    background:#ef4444;

}


/* =====================================
   REPORTS NUMBER
===================================== */

#adminReportsNumber{

    min-width:18px;

    height:18px;

    padding:0 5px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    font-size:9px;

    line-height:1;

    font-weight:850;

    color:#fff;

    background:#ef4444;

}


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

#adminOrdersPulse,
#adminReportsPulse{

    transition:
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;

}


#adminOrdersWidget:hover #adminOrdersPulse,
#adminReportsWidget:hover #adminReportsPulse{

    transform:scale(1.08);

    box-shadow:
    0 0 0 5px rgba(255,255,255,.04);

}


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

#adminOrdersList{

    display:none;

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:360px;

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

    max-height:70vh;

    overflow-y:auto;

    padding:10px;

    box-sizing:border-box;

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

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

    border-radius:16px;

    box-shadow:
    0 20px 55px rgba(0,0,0,.45);

    backdrop-filter:blur(20px);

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

    z-index:999999;

}


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

#adminReportsList{

    display:none;

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:380px;

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

    max-height:70vh;

    overflow-y:auto;

    padding:10px;

    box-sizing:border-box;

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

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

    border-radius:16px;

    box-shadow:
    0 20px 55px rgba(0,0,0,.45);

    backdrop-filter:blur(20px);

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

    z-index:999998;

}


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

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

    width:6px;

}


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

    background:
    transparent;

}


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

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

    border-radius:999px;

}


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

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

}


/* =====================================
   ORDER ITEM
===================================== */

.admin-order-item{

    padding:13px;

    margin-bottom:8px;

    background:
    rgba(255,255,255,.035);

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

    border-radius:13px;

    transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;

}


.admin-order-item:last-child{

    margin-bottom:0;

}


.admin-order-item:hover{

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

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

    transform:translateY(-1px);

}


/* =====================================
   ORDER ITEM TITLE
===================================== */

.admin-order-item h3{

    margin:0 0 9px;

    font-size:14px;

    line-height:1.3;

    font-weight:800;

    color:#f8fafc;

    overflow-wrap:anywhere;

}


/* =====================================
   ORDER ITEM DATA
===================================== */

.admin-order-item p{

    margin:5px 0;

    font-size:11px;

    line-height:1.45;

    color:#94a3b8;

    overflow-wrap:anywhere;

    word-break:break-word;

}


.admin-order-item p strong{

    color:#e2e8f0;

}


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

.admin-order-actions{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:6px;

    margin-top:11px;

}


/* =====================================
   ORDER BUTTONS
===================================== */

.admin-order-actions button{

    min-width:0;

    padding:9px 8px;

    border-radius:9px;

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

    cursor:pointer;

    font-size:10px;

    line-height:1.2;

    font-weight:800;

    color:#fff;

    transition:
    transform .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease;

}


.admin-order-actions button:hover{

    transform:translateY(-1px);

    filter:brightness(1.08);

}


.admin-order-actions button:active{

    transform:translateY(0);

}


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

.admin-order-activate{

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

    border-color:
    rgba(74,222,128,.2) !important;

}


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

.admin-order-reject{

    background:
    rgba(239,68,68,.12);

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

    color:#fca5a5 !important;

}


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

.admin-order-spam{

    grid-column:
    1 / -1;

    background:
    rgba(168,85,247,.1);

    border-color:
    rgba(168,85,247,.2) !important;

    color:#d8b4fe !important;

}


/* =====================================
   REPORT ITEM
===================================== */

.admin-report-item{

    padding:13px;

    margin-bottom:8px;

    background:
    rgba(255,255,255,.035);

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

    border-radius:13px;

    transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;

}


.admin-report-item:last-child{

    margin-bottom:0;

}


.admin-report-item:hover{

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

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

    transform:translateY(-1px);

}


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

.admin-report-item h3{

    margin:0 0 9px;

    font-size:14px;

    line-height:1.3;

    font-weight:800;

    color:#f8fafc;

    overflow-wrap:anywhere;

    word-break:break-word;

}


/* =====================================
   REPORT DATA
===================================== */

.admin-report-item p{

    margin:5px 0;

    font-size:11px;

    line-height:1.45;

    color:#94a3b8;

    overflow-wrap:anywhere;

    word-break:break-word;

}


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

.admin-report-item p:nth-of-type(3){

    margin-top:9px;

    padding:9px 10px;

    background:
    rgba(2,6,23,.38);

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

    border-radius:9px;

    color:#cbd5e1;

    white-space:pre-wrap;

}


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

.admin-report-actions{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:6px;

    margin-top:11px;

}


/* =====================================
   REPORT BUTTONS
===================================== */

.admin-report-actions button{

    min-width:0;

    padding:9px 8px;

    border-radius:9px;

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

    cursor:pointer;

    font-size:10px;

    line-height:1.2;

    font-weight:800;

    color:#fff;

    transition:
    transform .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease;

}


.admin-report-actions button:hover{

    transform:translateY(-1px);

    filter:brightness(1.08);

}


.admin-report-actions button:active{

    transform:translateY(0);

}


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

.admin-report-done{

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

    border-color:
    rgba(74,222,128,.2) !important;

}


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

.admin-report-reject{

    background:
    rgba(239,68,68,.12);

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

    color:#fca5a5 !important;

}


/* =====================================
   REPORT ACTIONS — SHARED PRO STYLE
===================================== */

.admin-report-actions button{

    min-height:36px;

    box-sizing:border-box;

    border-radius:10px;

    font-weight:850;

}


.admin-report-actions .admin-report-done{

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

    border-color:
    rgba(74,222,128,.2) !important;

    color:#fff;

}


.admin-report-actions .admin-report-reject{

    background:
    rgba(239,68,68,.12);

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

    color:#fca5a5 !important;

}


.admin-report-actions .admin-report-open{

    background:
    linear-gradient(
        135deg,
        #0ea5e9,
        #2563eb
    );

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

    color:#fff;

}


/* =====================================
   EMPTY PANEL
===================================== */

#adminOrdersList > p,
#adminReportsList > p{

    margin:0;

    padding:22px 12px;

    text-align:center;

    font-size:11px;

    line-height:1.5;

    color:#64748b;

}


/* =====================================
   FOCUS
===================================== */

.admin-order-actions button:focus-visible,
.admin-report-actions button:focus-visible,
.filter-buttons button:focus-visible{

    outline:none;

    box-shadow:
    0 0 0 3px rgba(14,165,233,.16);

}


/* =====================================
   TABLET
===================================== */

@media(max-width:900px){

    .admin-dashboard-header{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }


    .dashboard-stats{

        width:100%;

    }


    .dashboard-card{

        flex:1;

    }


    .admin-toolbar{

        flex-direction:column;

        align-items:stretch;

    }


    .filter-buttons{

        width:100%;

    }


    .filter-buttons button{

        flex:1;

    }


    #adminOrdersList,
    #adminReportsList{

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

    }

}


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

@media(max-width:768px){

    #adminOrdersList,
    #adminReportsList{

        position:fixed;

        top:78px;

        left:14px;

        right:14px;

        width:auto;

        max-width:none;

        max-height:
        calc(100vh - 100px);

        overflow-y:auto;

        margin:0;

        box-sizing:border-box;

        border-radius:15px;

    }


    #adminOrdersList{

        z-index:999999;

    }


    #adminReportsList{

        z-index:999998;

    }

}


/* =====================================
   MOBILE <= 600
===================================== */

@media(max-width:600px){

    .admin-dashboard-header{

        margin:12px;

        padding:18px;

        border-radius:16px;

        gap:15px;

    }


    .admin-dashboard-header h1{

        font-size:22px;

    }


    .admin-dashboard-header p{

        font-size:11px;

        margin-top:5px;

    }


    .dashboard-stats{

        gap:7px;

    }


    .dashboard-card{

        min-width:0;

        padding:11px 8px;

        border-radius:11px;

    }


    .dashboard-card strong{

        font-size:20px;

    }


    .dashboard-card span{

        font-size:8px;

    }


    .admin-toolbar{

        margin:0 12px 12px;

        padding:9px;

        border-radius:13px;

        gap:7px;

    }


    #searchOrders{

        width:100%;

        padding:10px 12px;

        font-size:12px;

    }


    .filter-buttons{

        gap:5px;

    }


    .filter-buttons button{

        padding:9px 8px;

        font-size:10px;

        border-radius:9px;

    }


    #ordersGrid{

        padding:0 12px 18px;

        grid-template-columns:1fr;

        gap:9px;

    }


    .order-card{

        padding:14px;

        border-radius:14px;

    }


    .order-header h2{

        font-size:15px;

    }


    .status{

        padding:5px 8px;

        font-size:8px;

    }


    .order-data{

        margin-top:11px;

        gap:5px;

    }


    .order-data div{

        padding:8px 9px;

        border-radius:9px;

    }


    .order-data label{

        font-size:8px;

    }


    .order-data strong{

        font-size:11px;

    }


    .grant-btn{

        margin-top:10px;

        padding:10px;

        font-size:10px;

    }


    .activated{

        margin-top:10px;

        padding:9px;

        font-size:10px;

    }


    .loading-card{

        margin:12px;

        padding:22px;

        border-radius:13px;

        font-size:11px;

    }


    /* ================================
       ADMIN WIDGETS MOBILE
    ================================= */

    #adminOrdersWidget,
    #adminReportsWidget{

        min-width:40px;

        min-height:40px;

    }


    #adminOrdersList,
    #adminReportsList{

        top:78px;

        left:12px;

        right:12px;

        padding:8px;

        max-height:
        calc(100vh - 94px);

        border-radius:14px;

    }


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

        padding:12px;

        border-radius:12px;

    }


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

        font-size:13px;

    }


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

        font-size:10px;

    }


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

        gap:5px;

        margin-top:9px;

    }


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

        padding:9px 7px;

        font-size:9px;

        border-radius:8px;

    }

}


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

@media(max-width:400px){

    .admin-dashboard-header{

        margin:9px;

        padding:15px;

    }


    .admin-dashboard-header h1{

        font-size:20px;

    }


    .dashboard-card{

        padding:10px 6px;

    }


    .dashboard-card strong{

        font-size:18px;

    }


    .dashboard-card span{

        font-size:7px;

    }


    .admin-toolbar{

        margin:0 9px 10px;

    }


    #ordersGrid{

        padding:0 9px 15px;

    }


    .order-card{

        padding:12px;

    }


    .order-header h2{

        font-size:14px;

    }


    #adminOrdersList,
    #adminReportsList{

        top:70px;

        left:9px;

        right:9px;

        max-height:
        calc(100vh - 82px);

        padding:7px;

    }


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

        padding:10px;

    }


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

        grid-template-columns:1fr;

    }


    .admin-order-spam{

        grid-column:auto;

    }

}


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

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

    .admin-dashboard-header,
    .dashboard-card,
    .filter-buttons button,
    .order-card,
    .grant-btn,
    #adminOrdersPulse,
    #adminReportsPulse,
    .admin-order-item,
    .admin-report-item,
    .admin-order-actions button,
    .admin-report-actions button{

        transition:none;

    }

}