/* ==========================================================
   GS Dashboard Pro
   Professional Dashboard CSS
   PART 1
   ROOT + RESET + LAYOUT
========================================================== */

:root{

    --gs-primary:#ff6b00;
    --gs-primary-hover:#ea5f00;

    --gs-success:#22c55e;
    --gs-danger:#ef4444;
    --gs-warning:#f59e0b;
    --gs-info:#3b82f6;

    --gs-bg:#f5f7fb;
    --gs-sidebar:#ffffff;
    --gs-header:#ffffff;
    --gs-card:#ffffff;

    --gs-border:#e8edf5;

    --gs-text:#172033;
    --gs-text-light:#7b8798;

    --gs-radius:22px;

    --gs-shadow:
        0 10px 35px rgba(15,23,42,.06);

    --gs-sidebar-width:280px;
    --gs-sidebar-collapse:90px;

    --gs-header-height:82px;

    --gs-transition:.30s ease;

}

/* ==========================================================
RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    background:var(--gs-bg);

    color:var(--gs-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    overflow-x:hidden;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    display:block;

    max-width:100%;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    background:none;

    font:inherit;

}

input,
textarea,
select{

    outline:none;

    font:inherit;

}

/* ==========================================================
APP
========================================================== */

#gsdp-app{

    display:flex;

    width:100%;

    min-height:100vh;

    background:var(--gs-bg);

}

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

.gsdp-main{

    flex:1 1 auto;

    display:flex;

    flex-direction:column;

    min-height:100vh;

    min-width:0;

    width:auto;

    max-width:none;

    margin-left:var(--gs-sidebar-width);

    overflow-x:hidden;

    transition:margin-left .30s ease;

}

body.gsdp-sidebar-collapsed .gsdp-main{

    margin-left:var(--gs-sidebar-collapse);

}

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

.gsdp-page-wrapper{

    flex:1;

    width:100%;

    max-width:100%;

    padding:24px;

    overflow-x:hidden;

    box-sizing:border-box;

}

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

.gsdp-card{

    background:var(--gs-card);

    border:1px solid var(--gs-border);

    border-radius:var(--gs-radius);

    box-shadow:var(--gs-shadow);

}
/* ==========================================================
GRID
========================================================== */

.gsdp-grid{

    display:grid;

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

    gap:24px;

}

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

.gsdp-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:48px;

    padding:0 24px;

    border-radius:14px;

    background:var(--gs-primary);

    color:#fff;

    font-weight:600;

    transition:var(--gs-transition);

}

.gsdp-btn:hover{

    background:var(--gs-primary-hover);

    transform:translateY(-2px);

}

/* ==========================================================
BADGE
========================================================== */

.gsdp-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:8px 14px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

}

.gsdp-success{

    background:#dcfce7;

    color:#15803d;

}

.gsdp-danger{

    background:#fee2e2;

    color:#b91c1c;

}

.gsdp-warning{

    background:#fef3c7;

    color:#b45309;

}

.gsdp-info{

    background:#dbeafe;

    color:#1d4ed8;

}

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

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-thumb{

    background:#d5dbe5;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gs-primary);

}

/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:991px){

    .gsdp-main{

        margin-left:0;

    }

    body.gsdp-sidebar-collapsed .gsdp-main{

        margin-left:0;

    }

    .gsdp-page-wrapper{

        padding:18px;

    }

}

@media(max-width:768px){

    .gsdp-grid{

        grid-template-columns:1fr;

    }

    .gsdp-page-wrapper{

        padding:14px;

    }

}
/* ==========================================================
PART 2
PROFESSIONAL SIDEBAR
========================================================== */

.gsdp-sidebar{

    position:fixed;

    top:0;

    left:0;

    width:280px;

    min-width:280px;

    max-width:280px;

    height:100vh;

    background:#fff;

    border-right:1px solid var(--gs-border);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    z-index:1000;

    transition:all .30s ease;

    box-shadow:8px 0 35px rgba(15,23,42,.05);

}
/* ==============================
HEADER
============================== */

.gsdp-sidebar-header{

    height:82px;

    display:flex;

    align-items:center;

    padding:0 22px;

    border-bottom:1px solid var(--gs-border);

    flex-shrink:0;

}

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

.gsdp-logo{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

}

.gsdp-logo-icon{

    width:52px;

    height:52px;

    border-radius:18px;

    background:linear-gradient(135deg,#ff8a1d,#ff6b00);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;

    font-weight:700;

    flex-shrink:0;

}

.gsdp-logo-text{

    overflow:hidden;

    transition:.30s;

}

.gsdp-logo-title{

    display:block;

    font-size:18px;

    font-weight:700;

    color:var(--gs-text);

}

.gsdp-logo-subtitle{

    display:block;

    margin-top:4px;

    font-size:12px;

    color:var(--gs-text-light);

}

/* ==============================
NAVIGATION
============================== */

.gsdp-nav{

    flex:1;

    overflow-y:auto;

    padding:20px 14px;

}

.gsdp-nav ul{

    list-style:none;

}

.gsdp-nav li{

    margin-bottom:8px;

}

.gsdp-nav a{

    display:flex;

    align-items:center;

    gap:16px;

    height:56px;

    padding:0 18px;

    border-radius:16px;

    color:var(--gs-text-light);

    transition:.25s;

    font-weight:600;

}

.gsdp-nav a:hover{

    background:#fff3eb;

    color:var(--gs-primary);

}

.gsdp-nav li.active>a,
.gsdp-nav a.active{

    background:var(--gs-primary);

    color:#fff;

    box-shadow:

        0 14px 28px rgba(255,107,0,.20);

}

.gsdp-nav-icon{

    width:22px;

    min-width:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.gsdp-nav-text{

    white-space:nowrap;

    transition:.25s;

}

/* ==============================
FOOTER
============================== */

.gsdp-sidebar-footer{

    padding:18px;

    border-top:1px solid var(--gs-border);

}

.gsdp-sidebar-profile{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px;

    border-radius:18px;

    transition:.25s;

}

.gsdp-sidebar-profile:hover{

    background:#f8fafc;

}

.gsdp-sidebar-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

}

.gsdp-sidebar-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.gsdp-sidebar-info{

    overflow:hidden;

}

.gsdp-sidebar-name{

    font-size:15px;

    font-weight:700;

    color:var(--gs-text);

}

.gsdp-sidebar-role{

    margin-top:4px;

    font-size:12px;

    color:var(--gs-text-light);

}

/* ==============================
LOGOUT
============================== */

.gsdp-logout{

    margin-top:14px;

    display:flex;

    align-items:center;

    gap:16px;

    height:54px;

    padding:0 16px;

    border-radius:16px;

    color:#ef4444;

    transition:.25s;

}

.gsdp-logout:hover{

    background:#fff1f2;

}
/* ==============================
COLLAPSED
============================== */

.gsdp-sidebar.collapsed{

    width:88px;

    min-width:88px;

    max-width:88px;

}
.gsdp-sidebar.collapsed .gsdp-logo-text,

.gsdp-sidebar.collapsed .gsdp-nav-text,

.gsdp-sidebar.collapsed .gsdp-sidebar-info{

    opacity:0;

    width:0;

    overflow:hidden;

}

.gsdp-sidebar.collapsed .gsdp-sidebar-header{

    justify-content:center;

    padding:0;

}

.gsdp-sidebar.collapsed .gsdp-logo{

    justify-content:center;

}

.gsdp-sidebar.collapsed .gsdp-nav a{

    justify-content:center;

    padding:0;

}

.gsdp-sidebar.collapsed .gsdp-sidebar-profile,

.gsdp-sidebar.collapsed .gsdp-logout{

    justify-content:center;

    padding-left:0;

    padding-right:0;

}

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

#gsdp-sidebar-overlay{

    display:none;

}

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

@media(max-width:991px){

    .gsdp-sidebar{

        left:-100%;

        width:280px;

    }

    .gsdp-sidebar.open{

        left:0;

    }

    #gsdp-sidebar-overlay.show{

        display:block;

        position:fixed;

        inset:0;

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

        z-index:999;

        backdrop-filter:blur(3px);

    }

}
/* ==========================================================
PART 3
PREMIUM HEADER
========================================================== */

.gsdp-header{

    position:sticky;

    top:20px;

    z-index:900;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    height:82px;

    margin:24px 24px 0;

    padding:0 24px;

    background:#ffffff;

    border:1px solid var(--gs-border);

    border-radius:22px;

    box-shadow:var(--gs-shadow);

}

/* =========================================
LEFT
========================================= */

.gsdp-header-left{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.gsdp-menu-toggle{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#f5f7fb;

    color:var(--gs-text);

    transition:.30s;

}

.gsdp-menu-toggle:hover{

    background:var(--gs-primary);

    color:#fff;

}

/* =========================================
CENTER
========================================= */

.gsdp-header-center{

    flex:1;

    display:flex;

    justify-content:center;

}

.gsdp-search-form{

    position:relative;

    width:100%;

    max-width:720px;

}

.gsdp-search{

    position:relative;

}

.gsdp-search input{

    width:100%;

    height:54px;

    padding:0 64px 0 20px;

    border:1px solid var(--gs-border);

    border-radius:16px;

    background:#f8fafc;

    color:var(--gs-text);

    transition:.30s;

}

.gsdp-search input:focus{

    background:#fff;

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

    box-shadow:0 0 0 4px rgba(255,107,0,.10);

}

.gsdp-search input::placeholder{

    color:var(--gs-text-light);

}

.gsdp-search button{

    position:absolute;

    right:6px;

    top:6px;

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gs-primary);

    color:#fff;

    transition:.30s;

}

.gsdp-search button:hover{

    background:var(--gs-primary-hover);

}

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

.gsdp-live-search{

    position:absolute;

    top:64px;

    left:0;

    width:100%;

    background:#fff;

    border:1px solid var(--gs-border);

    border-radius:16px;

    box-shadow:0 20px 40px rgba(15,23,42,.08);

    display:none;

    overflow:hidden;

}

.gsdp-live-search.show{

    display:block;

}

.gsdp-search-item{

    padding:14px 18px;

    cursor:pointer;

    transition:.25s;

}

.gsdp-search-item:hover{

    background:#fff4ec;

    color:var(--gs-primary);

}

/* =========================================
RIGHT
========================================= */

.gsdp-header-right{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.gsdp-header-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#f5f7fb;

    color:var(--gs-text);

    transition:.30s;

}

.gsdp-header-icon:hover{

    background:var(--gs-primary);

    color:#fff;

}

/* =========================================
PROFILE
========================================= */

.gsdp-profile{

    width:48px;

    height:48px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid var(--gs-primary);

    cursor:pointer;

    transition:.30s;

}

.gsdp-profile:hover{

    transform:scale(1.06);

}

.gsdp-profile img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* =========================================
DARK MODE
========================================= */

body.gsdp-dark .gsdp-header{

    background:#111827;

    border-color:#374151;

}

body.gsdp-dark .gsdp-menu-toggle,

body.gsdp-dark .gsdp-header-icon{

    background:#1f2937;

    color:#fff;

}

body.gsdp-dark .gsdp-search input{

    background:#1f2937;

    color:#fff;

    border-color:#374151;

}

body.gsdp-dark .gsdp-search input::placeholder{

    color:#94a3b8;

}

body.gsdp-dark .gsdp-live-search{

    background:#1f2937;

    border-color:#374151;

}

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

@media(max-width:991px){

    .gsdp-header{

        margin:16px;

    }

}

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

@media(max-width:768px){

    .gsdp-header{

        height:auto;

        padding:18px;

        flex-wrap:wrap;

        gap:16px;

    }

    .gsdp-header-center{

        width:100%;

        order:3;

    }

    .gsdp-search-form{

        max-width:100%;

    }

    .gsdp-header-right{

        margin-left:auto;

    }

}/* ==========================================================
PART 4
OVERVIEW + DASHBOARD CARDS
========================================================== */

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

.gsdp-overview{

    width:100%;

}

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

.gsdp-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

    flex-wrap:wrap;

}

.gsdp-page-heading{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:var(--gs-text);

    line-height:1.2;

}

.gsdp-toolbar p{

    margin-top:8px;

    font-size:15px;

    color:var(--gs-text-light);

}

.gsdp-toolbar-actions{

    display:flex;

    gap:12px;

    align-items:center;

}

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

.gsdp-grid{

    display:grid;

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

    gap:24px;

}

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

.gsdp-stat-card{

    position:relative;

    background:#ffffff;

    border:1px solid var(--gs-border);

    border-radius:22px;

    padding:28px;

    overflow:hidden;

    transition:.30s;

    box-shadow:var(--gs-shadow);

}

.gsdp-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 24px 45px rgba(15,23,42,.10);

}

/* Left Border */

.gsdp-stat-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--gs-primary);

}

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

.gsdp-stat-title{

    font-size:14px;

    font-weight:600;

    color:var(--gs-text-light);

    letter-spacing:.2px;

}

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

.gsdp-stat-value{

    margin-top:18px;

    font-size:36px;

    font-weight:700;

    color:var(--gs-text);

    line-height:1;

}

/* ========================================
FOOTER
======================================== */

.gsdp-stat-footer{

    margin-top:18px;

    font-size:13px;

    color:var(--gs-text-light);

}

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

.gsdp-stat-icon{

    position:absolute;

    right:24px;

    top:24px;

    width:56px;

    height:56px;

    border-radius:18px;

    background:#fff3eb;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--gs-primary);

    font-size:22px;

}

/* ========================================
TREND
======================================== */

.gsdp-trend{

    margin-top:18px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:50px;

    background:#f8fafc;

    font-size:13px;

    font-weight:600;

}

.gsdp-trend.up{

    background:#dcfce7;

    color:#15803d;

}

.gsdp-trend.down{

    background:#fee2e2;

    color:#dc2626;

}

/* ========================================
CARD COLORS
======================================== */

.gsdp-stat-card.orange::before{

    background:#ff6b00;

}

.gsdp-stat-card.green::before{

    background:#22c55e;

}

.gsdp-stat-card.blue::before{

    background:#3b82f6;

}

.gsdp-stat-card.red::before{

    background:#ef4444;

}

.gsdp-stat-card.yellow::before{

    background:#f59e0b;

}

.gsdp-stat-card.purple::before{

    background:#8b5cf6;

}

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

.gsdp-stat-card:hover .gsdp-stat-icon{

    transform:rotate(10deg) scale(1.08);

    transition:.30s;

}

/* ========================================
DARK
======================================== */

body.gsdp-dark .gsdp-stat-card{

    background:#111827;

    border-color:#374151;

}

body.gsdp-dark .gsdp-stat-title{

    color:#94a3b8;

}

body.gsdp-dark .gsdp-stat-value{

    color:#ffffff;

}

body.gsdp-dark .gsdp-stat-footer{

    color:#94a3b8;

}

body.gsdp-dark .gsdp-trend{

    background:#1f2937;

}

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

@media(max-width:1200px){

    .gsdp-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

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

@media(max-width:768px){

    .gsdp-grid{

        grid-template-columns:1fr;

    }

    .gsdp-page-heading{

        font-size:26px;

    }

    .gsdp-stat-card{

        padding:22px;

    }

    .gsdp-stat-value{

        font-size:30px;

    }

}
/* ==========================================================
PART 5
CHART + QUICK ACTIONS
========================================================== */

/*==================================
SECTION
==================================*/

.gsdp-section{

    margin-top:28px;

}

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

.gsdp-dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    align-items:start;

}

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

.gsdp-chart-card,
.gsdp-card{

    background:#ffffff;

    border:1px solid var(--gs-border);

    border-radius:22px;

    box-shadow:var(--gs-shadow);

    overflow:hidden;

}

/*==================================
CARD HEADER
==================================*/

.gsdp-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:24px 26px;

    border-bottom:1px solid var(--gs-border);

}

.gsdp-card-header h3{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:var(--gs-text);

}

.gsdp-card-header p{

    margin:6px 0 0;

    font-size:14px;

    color:var(--gs-text-light);

}

/*==================================
SELECT
==================================*/

.gsdp-select{

    height:44px;

    padding:0 16px;

    border:1px solid var(--gs-border);

    border-radius:12px;

    background:#fff;

    color:var(--gs-text);

    cursor:pointer;

    transition:.25s;

}

.gsdp-select:hover,
.gsdp-select:focus{

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

}

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

.gsdp-chart{

    padding:24px;

    min-height:380px;

}

.gsdp-chart canvas{

    width:100%!important;

    height:330px!important;

}

/*==================================
ACTION GRID
==================================*/

.gsdp-action-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

    padding:24px;

}

/*==================================
ACTION BUTTON
==================================*/

.gsdp-action-btn{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:14px;

    min-height:58px;

    padding:0 20px;

    border:1px solid var(--gs-border);

    border-radius:16px;

    background:#fafbfd;

    color:var(--gs-text);

    font-weight:600;

    transition:.25s;

}

.gsdp-action-btn i{

    width:20px;

    text-align:center;

    color:var(--gs-primary);

    font-size:18px;

}

.gsdp-action-btn:hover{

    background:var(--gs-primary);

    color:#fff;

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

    transform:translateX(6px);

}

.gsdp-action-btn:hover i{

    color:#fff;

}

/*==================================
DARK MODE
==================================*/

body.gsdp-dark .gsdp-chart-card,
body.gsdp-dark .gsdp-card{

    background:#111827;

    border-color:#374151;

}

body.gsdp-dark .gsdp-card-header{

    border-color:#374151;

}

body.gsdp-dark .gsdp-card-header h3{

    color:#ffffff;

}

body.gsdp-dark .gsdp-card-header p{

    color:#94a3b8;

}

body.gsdp-dark .gsdp-select{

    background:#1f2937;

    color:#ffffff;

    border-color:#374151;

}

body.gsdp-dark .gsdp-action-btn{

    background:#1f2937;

    color:#ffffff;

    border-color:#374151;

}

body.gsdp-dark .gsdp-action-btn:hover{

    background:var(--gs-primary);

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

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

    .gsdp-dashboard-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .gsdp-card-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .gsdp-select{

        width:100%;

    }

}
/* ==========================================================
PART 6
TABLE + BADGE + SUMMARY
========================================================== */

/*==================================
TABLE WRAPPER
==================================*/

.gsdp-table-wrap{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

/*==================================
TABLE
==================================*/

.gsdp-table{

    width:100%;

    min-width:900px;

    border-collapse:collapse;

    background:#ffffff;

}

/*==================================
TABLE HEAD
==================================*/

.gsdp-table thead{

    background:#f8fafc;

}

.gsdp-table thead th{

    padding:18px 20px;

    text-align:left;

    font-size:13px;

    font-weight:700;

    color:var(--gs-text-light);

    text-transform:uppercase;

    letter-spacing:.5px;

    border-bottom:1px solid var(--gs-border);

}

/*==================================
TABLE BODY
==================================*/

.gsdp-table tbody tr{

    transition:.25s;

    border-bottom:1px solid #eef2f7;

}

.gsdp-table tbody tr:hover{

    background:#fff8f2;

}

.gsdp-table tbody td{

    padding:18px 20px;

    vertical-align:middle;

    color:var(--gs-text);

    font-size:14px;

}

.gsdp-table tbody td strong{

    font-size:15px;

    font-weight:700;

}

.gsdp-table tbody td small{

    display:block;

    margin-top:4px;

    color:var(--gs-text-light);

    font-size:12px;

}

/*==================================
BADGE
==================================*/

.gsdp-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:95px;

    height:34px;

    padding:0 14px;

    border-radius:40px;

    font-size:12px;

    font-weight:700;

    text-transform:capitalize;

}

.gsdp-success{

    background:#dcfce7;

    color:#15803d;

}

.gsdp-warning{

    background:#fef3c7;

    color:#b45309;

}

.gsdp-danger{

    background:#fee2e2;

    color:#b91c1c;

}

.gsdp-info{

    background:#dbeafe;

    color:#1d4ed8;

}

/*==================================
SUMMARY LIST
==================================*/

.gsdp-summary-list{

    display:flex;

    flex-direction:column;

    padding:24px;

}

.gsdp-summary-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:16px 0;

    border-bottom:1px solid var(--gs-border);

    transition:.25s;

}

.gsdp-summary-item:last-child{

    border-bottom:none;

}

.gsdp-summary-item:hover{

    padding-left:10px;

}

.gsdp-summary-item span{

    font-size:14px;

    color:var(--gs-text-light);

}

.gsdp-summary-item strong{

    font-size:17px;

    font-weight:700;

    color:var(--gs-text);

}

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

.gsdp-text-center{

    text-align:center;

    padding:40px 20px !important;

    color:var(--gs-text-light);

}

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

.gsdp-table-wrap::-webkit-scrollbar{

    height:8px;

}

.gsdp-table-wrap::-webkit-scrollbar-thumb{

    background:#d6dce6;

    border-radius:30px;

}

.gsdp-table-wrap::-webkit-scrollbar-thumb:hover{

    background:var(--gs-primary);

}

/*==================================
DARK MODE
==================================*/

body.gsdp-dark .gsdp-table{

    background:#111827;

}

body.gsdp-dark .gsdp-table thead{

    background:#1f2937;

}

body.gsdp-dark .gsdp-table thead th{

    color:#cbd5e1;

    border-color:#374151;

}

body.gsdp-dark .gsdp-table tbody td{

    color:#ffffff;

}

body.gsdp-dark .gsdp-table tbody tr{

    border-color:#374151;

}

body.gsdp-dark .gsdp-table tbody tr:hover{

    background:#1f2937;

}

body.gsdp-dark .gsdp-summary-item{

    border-color:#374151;

}

body.gsdp-dark .gsdp-summary-item span{

    color:#94a3b8;

}

body.gsdp-dark .gsdp-summary-item strong{

    color:#ffffff;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

    .gsdp-table{

        min-width:760px;

    }

}
/* ==========================================================
PART 7
FORMS + INPUTS + PRODUCTS + STOCK + ORDERS
========================================================== */

/*==================================
FORM
==================================*/

.gsdp-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.gsdp-form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.gsdp-label{

    font-size:14px;

    font-weight:600;

    color:var(--gs-text);

}

/*==================================
INPUT
==================================*/

.gsdp-input,
.gsdp-select,
.gsdp-textarea{

    width:100%;

    min-height:50px;

    padding:0 16px;

    border:1px solid var(--gs-border);

    border-radius:14px;

    background:#ffffff;

    color:var(--gs-text);

    transition:.25s;

}

.gsdp-textarea{

    min-height:140px;

    padding:16px;

    resize:vertical;

}

.gsdp-input:focus,
.gsdp-select:focus,
.gsdp-textarea:focus{

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

    box-shadow:0 0 0 4px rgba(255,107,0,.10);

}

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

.gsdp-search-box{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:24px;

}

.gsdp-search-box .gsdp-input{

    flex:1;

}

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

.gsdp-filter{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

/*==================================
IMAGE
==================================*/

.gsdp-thumb{

    width:54px;

    height:54px;

    object-fit:cover;

    border-radius:12px;

    border:1px solid var(--gs-border);

}

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

.gsdp-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

.gsdp-btn-sm{

    width:38px;

    height:38px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

}

.gsdp-btn-view{

    background:#dbeafe;

    color:#2563eb;

}

.gsdp-btn-edit{

    background:#dcfce7;

    color:#15803d;

}

.gsdp-btn-delete{

    background:#fee2e2;

    color:#dc2626;

}

.gsdp-btn-sm:hover{

    transform:translateY(-2px);

}

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

.gsdp-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

}

.gsdp-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:currentColor;

}

/*==================================
PRODUCT CARD
==================================*/

.gsdp-product-card{

    background:#ffffff;

    border:1px solid var(--gs-border);

    border-radius:20px;

    padding:20px;

    transition:.25s;

    box-shadow:var(--gs-shadow);

}

.gsdp-product-card:hover{

    transform:translateY(-5px);

}

.gsdp-product-title{

    margin-top:14px;

    font-size:16px;

    font-weight:700;

}

.gsdp-product-price{

    margin-top:8px;

    color:var(--gs-primary);

    font-size:18px;

    font-weight:700;

}

/*==================================
PAGINATION
==================================*/

.gsdp-pagination{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:24px;

}

.gsdp-page{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    border:1px solid var(--gs-border);

    background:#ffffff;

    transition:.25s;

}

.gsdp-page.active{

    background:var(--gs-primary);

    color:#ffffff;

}

.gsdp-page:hover{

    background:var(--gs-primary);

    color:#ffffff;

}

/*==================================
DARK MODE
==================================*/

body.gsdp-dark .gsdp-input,
body.gsdp-dark .gsdp-select,
body.gsdp-dark .gsdp-textarea{

    background:#1f2937;

    border-color:#374151;

    color:#ffffff;

}

body.gsdp-dark .gsdp-product-card{

    background:#111827;

    border-color:#374151;

}

body.gsdp-dark .gsdp-page{

    background:#1f2937;

    border-color:#374151;

    color:#ffffff;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

    .gsdp-search-box{

        flex-direction:column;

        align-items:stretch;

    }

    .gsdp-filter{

        flex-direction:column;

    }

    .gsdp-actions{

        flex-wrap:wrap;

    }

    .gsdp-pagination{

        justify-content:center;

    }

}
/* ==========================================================
PART 8
MODAL + LOADER + TOAST + UTILITIES + FINAL RESPONSIVE
========================================================== */

/*==================================
MODAL
==================================*/

.gsdp-modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(5px);

    z-index:99999;

    padding:20px;

}

.gsdp-modal.show{

    display:flex;

    animation:gsdpFade .25s ease;

}

.gsdp-modal-box{

    width:100%;

    max-width:700px;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 25px 70px rgba(15,23,42,.18);

    animation:gsdpPopup .25s ease;

}

.gsdp-modal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 24px;

    border-bottom:1px solid var(--gs-border);

}

.gsdp-modal-body{

    padding:24px;

}

.gsdp-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:20px 24px;

    border-top:1px solid var(--gs-border);

}

.gsdp-close{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f7fb;

    transition:.25s;

}

.gsdp-close:hover{

    background:#fee2e2;

    color:#dc2626;

}

/*==================================
LOADER
==================================*/

.gsdp-loader{

    width:46px;

    height:46px;

    border:4px solid #eceff5;

    border-top-color:var(--gs-primary);

    border-radius:50%;

    animation:gsdpSpin .8s linear infinite;

}

/*==================================
TOAST
==================================*/

.gsdp-toast{

    position:fixed;

    right:25px;

    bottom:25px;

    min-width:300px;

    padding:18px 22px;

    border-radius:16px;

    color:#fff;

    background:#111827;

    box-shadow:0 18px 45px rgba(15,23,42,.18);

    z-index:999999;

    animation:gsdpToast .30s ease;

}

.gsdp-toast.success{

    background:#22c55e;

}

.gsdp-toast.error{

    background:#ef4444;

}

.gsdp-toast.warning{

    background:#f59e0b;

}

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

@keyframes gsdpSpin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes gsdpFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes gsdpPopup{

    from{

        opacity:0;

        transform:translateY(20px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes gsdpToast{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================
UTILITY
==================================*/

.gsdp-hidden{

    display:none !important;

}

.gsdp-flex{

    display:flex;

}

.gsdp-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.gsdp-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.gsdp-w-100{

    width:100%;

}

.gsdp-text-right{

    text-align:right;

}

.gsdp-mt-20{

    margin-top:20px;

}

.gsdp-mb-20{

    margin-bottom:20px;

}

/*==================================
DARK MODE
==================================*/

body.gsdp-dark{

    background:#0f172a;

}

body.gsdp-dark .gsdp-modal-box{

    background:#111827;

}

body.gsdp-dark .gsdp-modal-header,

body.gsdp-dark .gsdp-modal-footer{

    border-color:#374151;

}

body.gsdp-dark .gsdp-close{

    background:#1f2937;

    color:#fff;

}

body.gsdp-dark .gsdp-loader{

    border-color:#374151;

    border-top-color:var(--gs-primary);

}

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

@media(max-width:991px){

    .gsdp-modal{

        padding:15px;

    }

}

@media(max-width:768px){

    .gsdp-modal-box{

        max-width:100%;

    }

    .gsdp-modal-header{

        padding:18px;

    }

    .gsdp-modal-body{

        padding:18px;

    }

    .gsdp-modal-footer{

        padding:18px;

        flex-direction:column;

    }

    .gsdp-modal-footer .gsdp-btn{

        width:100%;

    }

    .gsdp-toast{

        right:15px;

        left:15px;

        bottom:15px;

        min-width:auto;

    }

}
/* ==========================================================
PART 9
ORDERS PAGE
==========================================================*/

/*==================================
CARD BODY
==================================*/

.gsdp-card-body{

    padding:24px;

}

/*==================================
ORDER ROW
==================================*/

.gsdp-order-row{

    transition:all .25s ease;

}

.gsdp-order-row:hover{

    background:#fff8f2;

}

/*==================================
EXPAND ROW
==================================*/

.gsdp-order-expand{

    display:none;

    background:#f8fafc;

}

.gsdp-order-expand.active{

    display:table-row;

}

.gsdp-order-expand td{

    padding:30px !important;

}

/*==================================
ORDER DETAILS
==================================*/

.gsdp-order-details{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*==================================
ORDER PRODUCT
==================================*/

.gsdp-order-product{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:8px 0;

    border-bottom:1px dashed #e5e7eb;

}

.gsdp-order-product:last-child{

    border-bottom:none;

}

.gsdp-order-product strong{

    display:block;

    font-size:14px;

    color:var(--gs-text);

}

.gsdp-order-product small{

    color:var(--gs-text-light);

}

/*==================================
CUSTOMER INFO
==================================*/

.gsdp-card-body p{

    display:flex;

    justify-content:space-between;

    gap:15px;

    padding:12px 0;

    border-bottom:1px solid var(--gs-border);

}

.gsdp-card-body p:last-child{

    border-bottom:none;

}

/*==================================
ADDRESS
==================================*/

.gsdp-card-body address{

    font-style:normal;

    line-height:1.8;

}

/*==================================
ACTION BUTTON
==================================*/

.gsdp-view-order{

    min-width:90px;

    height:38px;

    border-radius:12px;

    background:var(--gs-primary);

    color:#fff;

    font-weight:600;

    transition:.25s;

}

.gsdp-view-order:hover{

    background:var(--gs-primary-hover);

    transform:translateY(-2px);

}

/*==================================
SUMMARY
==================================*/

.gsdp-summary-list{

    padding:0;

}

.gsdp-summary-item{

    min-height:56px;

}

/*==================================
PAGINATION
==================================*/

.gsdp-pagination{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

    margin-top:24px;

}

.gsdp-page{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#ffffff;

    border:1px solid var(--gs-border);

    cursor:pointer;

    transition:.25s;

}

.gsdp-page:hover{

    background:var(--gs-primary);

    color:#fff;

}

.gsdp-page.active{

    background:var(--gs-primary);

    color:#fff;

}

/*==================================
DARK MODE
==================================*/

body.gsdp-dark .gsdp-order-expand{

    background:#111827;

}

body.gsdp-dark .gsdp-order-product{

    border-color:#374151;

}

body.gsdp-dark .gsdp-card-body p{

    border-color:#374151;

}

body.gsdp-dark .gsdp-page{

    background:#1f2937;

    border-color:#374151;

    color:#fff;

}

body.gsdp-dark .gsdp-view-order{

    background:var(--gs-primary);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

    .gsdp-order-expand td{

        padding:20px !important;

    }

}

@media(max-width:768px){

    .gsdp-card-body{

        padding:18px;

    }

    .gsdp-card-body p{

        flex-direction:column;

        align-items:flex-start;

    }

    .gsdp-order-product{

        flex-direction:column;

        align-items:flex-start;

    }

    .gsdp-pagination{

        justify-content:center;

    }

}








/* STEP 1 : SVG ICON FIX */

.gsdp-svg-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex-shrink:0;
    color:currentColor;
}

.gsdp-svg-icon svg{
    display:block;
    width:20px;
    height:20px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    overflow:visible;
}

.gsdp-nav-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    min-width:22px;
    height:22px;
}

.gsdp-nav a{
    color:#64748b;
}

.gsdp-nav a.active,
.gsdp-nav li.active>a{
    color:#fff;
}








/* ==========================================
GS Dashboard WooCommerce Layout
========================================== */

body.woocommerce-account .woocommerce{
    display:block;
}

body.woocommerce-account .woocommerce-MyAccount-navigation{
    display:none;
}

body.woocommerce-account .woocommerce-MyAccount-content{
    float:none;
    width:100%;
    margin:0;
    padding:0;
}

#gsdp-app{
    width:100%;
}

.gsdp-main{
    width:calc(100% - var(--gs-sidebar-width));
}

body.gsdp-sidebar-collapsed .gsdp-main{
    width:calc(100% - var(--gs-sidebar-collapse));
}