/*
==========================================================
Gulf Job Works Content Writer
Dashboard Styles
==========================================================
*/


/* ==========================================================
Dashboard Container
========================================================== */

.gjw-cw-dashboard{

    max-width:1200px;

    margin:50px auto;

    padding:0 20px;

}


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

.gjw-cw-section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

}

.gjw-cw-section-header h2{

    margin:0;

    color:var(--gjw-secondary);

    font-size:30px;

    font-weight:700;

}

.gjw-cw-section-header p{

    margin-top:8px;

    color:var(--gjw-muted);

}


/* ==========================================================
Statistics
========================================================== */

.gjw-cw-stats{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}


.gjw-cw-stat-card{

    background:#fff;

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

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

    padding:24px;

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

    transition:.25s;

}


.gjw-cw-stat-card:hover{

    transform:translateY(-4px);

}


.gjw-cw-stat-number{

    display:block;

    font-size:36px;

    font-weight:700;

    color:var(--gjw-primary);

}


.gjw-cw-stat-label{

    display:block;

    margin-top:8px;

    color:var(--gjw-muted);

}


/* ==========================================================
Content Card
========================================================== */

.gjw-cw-card{

    background:#fff;

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

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

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

    overflow:hidden;

}


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

.gjw-cw-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 25px;

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

}


.gjw-cw-card-header h3{

    margin:0;

    font-size:20px;

}


/* ==========================================================
Articles Table
========================================================== */

.gjw-cw-table{

    background:#fff;

}


.gjw-cw-table tr{

    transition:.20s;

}


.gjw-cw-table tbody tr:hover{

    background:#f8fafc;

}


.gjw-cw-table td:first-child{

    font-weight:600;

}


/* ==========================================================
Actions
========================================================== */

.gjw-cw-actions{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}


.gjw-cw-action{

    padding:8px 14px;

    border-radius:8px;

    background:#eef2f7;

    color:var(--gjw-secondary);

    font-size:13px;

    font-weight:600;

    transition:.25s;

}


.gjw-cw-action:hover{

    background:var(--gjw-primary);

    color:#fff;

}


/* ==========================================================
Status
========================================================== */

.gjw-status{

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
Quick Actions
========================================================== */

.gjw-cw-quick-actions{

    display:flex;

    gap:15px;

    margin-bottom:35px;

    flex-wrap:wrap;

}


/* ==========================================================
Empty State
========================================================== */

.gjw-cw-empty{

    text-align:center;

    padding:80px 30px;

}


.gjw-cw-empty img{

    max-width:180px;

    margin-bottom:25px;

}


.gjw-cw-empty h3{

    margin-bottom:15px;

}


.gjw-cw-empty p{

    max-width:550px;

    margin:0 auto 25px;

    color:var(--gjw-muted);

}


/* ==========================================================
Pagination
========================================================== */

.gjw-cw-pagination{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:30px;

}


/* ==========================================================
Loading
========================================================== */

.gjw-cw-loading{

    opacity:.6;

    pointer-events:none;

}


/* ==========================================================
Responsive
========================================================== */

@media (max-width:992px){

    .gjw-cw-stats{

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

    }

}


@media (max-width:768px){

    .gjw-cw-dashboard{

        padding:0 15px;

    }

    .gjw-cw-section-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .gjw-cw-card-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .gjw-cw-table{

        display:block;

        overflow-x:auto;

    }

}


@media (max-width:576px){

    .gjw-cw-stats{

        grid-template-columns:1fr;

    }

    .gjw-cw-actions{

        flex-direction:column;

    }

    .gjw-cw-action{

        text-align:center;

    }

}