/* ============================================================
   ELITE114 CMS ADMIN UI v1.0
   PART 1
   ------------------------------------------------------------
   01. Reset
   02. Variables
   03. Base
   04. Scrollbar
   05. Layout
   06. Sidebar
   07. Topbar
   08. Content
============================================================ */

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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    min-height:100%;
    font-family:'Poppins',sans-serif;
    background:#0B1727;
    color:#fff;
    line-height:1.6;
    overflow-y:auto;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

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

:root{

    --bg:#0B1727;
    --sidebar:#08111F;
    --topbar:#122338;
    --card:#16273D;

    --primary:#2563EB;
    --primary-hover:#3B82F6;

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    --border:#243B55;

    --text:#FFFFFF;
    --text-soft:#94A3B8;

    --radius:12px;

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

    --transition:.25s ease;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08111F;

}

::-webkit-scrollbar-thumb{

    background:#304A69;
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#46668d;

}

/* ============================================================
   LAYOUT
============================================================ */

.admin-wrapper{

    display:flex;

    height:100vh;

}

.main-content{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

    height:100%;

    min-height:0;

    overflow:hidden;

}

.content{

    flex:1;

    min-height:0;

    padding:24px;

    overflow-y:auto;

    overflow-x:hidden;

}
/* ============================================================
   SIDEBAR
============================================================ */

.sidebar{

    width:260px;

    background:var(--sidebar);

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

    display:flex;

    flex-direction:column;

    flex-shrink:0;

}

.logo{

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    letter-spacing:.5px;

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

    color:#fff;

}

.sidebar ul{

    padding:20px 15px;

}

.sidebar li{

    margin-bottom:8px;

}

.sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 16px;

    border-radius:10px;

    color:var(--text-soft);

    transition:var(--transition);

    font-size:15px;

    font-weight:500;

}

.sidebar a:hover{

    background:var(--primary);

    color:#fff;

}

.sidebar a.active{

    background:var(--primary);

    color:#fff;

}

.sidebar-footer{

    margin-top:auto;

    padding:20px;

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

    color:var(--text-soft);

    font-size:13px;

    text-align:center;

}

/* ============================================================
   TOPBAR
============================================================ */

.topbar{

    height:80px;

    background:var(--topbar);

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

}

.topbar-left{

    display:flex;

    align-items:center;

}

.topbar-left h2{

    font-size:24px;

    font-weight:700;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:15px;

}

.user{

    color:var(--text-soft);

    font-size:14px;

}

.btn-logout{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    background:var(--primary);

    border-radius:8px;

    color:#fff;

    transition:var(--transition);

}

.btn-logout:hover{

    background:var(--primary-hover);

}

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

.page-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}

.page-header h1{

    font-size:28px;

    font-weight:700;

}

.page-description{

    color:var(--text-soft);

    margin-top:5px;

}

/* ============================================================
   UTILITIES
============================================================ */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.w-100{

    width:100%;

}

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

@media(max-width:992px){

    .sidebar{

        width:220px;

    }

}

@media(max-width:768px){

    body{

        overflow:auto;

    }

    .admin-wrapper{

        flex-direction:column;

    }

    .sidebar{

        width:100%;

        border-right:none;

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

    }

    .topbar{

        padding:0 20px;

    }

    .content{

        padding:20px;

    }

    .page-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

}

/* ============================================================
   ELITE114 CMS ADMIN UI v1.0
   PART 2
   Dashboard
   Cards
   Statistics
============================================================ */

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

.dashboard{

    width:100%;

}

.dashboard-title{

    font-size:34px;

    font-weight:700;

    margin-bottom:6px;

}

.dashboard-subtitle{

    color:var(--text-soft);

    font-size:15px;

    margin-bottom:35px;

}

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

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
}

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

.card{

    background:var(--card);

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

    border-radius:16px;

    padding:25px;

    box-shadow:var(--shadow);

    transition:.25s;

    position:relative;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-4px);

    border-color:var(--primary);

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--primary);

}

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

.card-title{

    font-size:15px;

    color:var(--text-soft);

    margin-bottom:18px;

    font-weight:500;

}

.card-value{

    font-size:40px;

    font-weight:700;

    line-height:1;

    margin-bottom:10px;

}

.card-desc{

    color:var(--text-soft);

    font-size:14px;

}

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

.card-primary::before{

    background:#2563EB;

}

.card-success::before{

    background:#22C55E;

}

.card-warning::before{

    background:#F59E0B;

}

.card-danger::before{

    background:#EF4444;

}

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

.panel{

    background:var(--card);

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

    border-radius:16px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 25px;

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

}

.panel-title{

    font-size:20px;

    font-weight:600;

}

.panel-body{

    padding:25px;

}

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

.empty{

    text-align:center;

    padding:60px;

    color:var(--text-soft);

}

.empty h3{

    font-size:22px;

    margin-bottom:10px;

}

.empty p{

    font-size:15px;

}

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

@media(max-width:1200px){

    .stats-grid{

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

    }

}

@media(max-width:768px){

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/* ============================================================
   ELITE114 CMS ADMIN UI v1.0
   PART 3
   TABLE
============================================================ */

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

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-danger{

    background:#EF4444;

    color:#fff;

}

.btn-danger:hover{

    background:#DC2626;

}

.btn-secondary{

    background:#1B2B42;

    color:#fff;

}

.btn-secondary:hover{

    background:#243B55;

}

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

.table-panel{

    background:var(--card);

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

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

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

.table-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 25px;

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

}

.table-title{

    font-size:22px;

    font-weight:700;

}

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

.table{

    width:100%;

    border-collapse:collapse;

}

.table thead{

    background:#14253B;

}

.table th{

    padding:18px;

    text-align:left;

    font-size:14px;

    font-weight:600;

    color:#94A3B8;

}

.table td{

    padding:18px;

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

}

.table tbody tr{

    transition:.2s;

}

.table tbody tr:hover{

    background:#122338;

}

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

.table-action{

    display:flex;

    gap:10px;

}

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

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.badge-success{

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

    color:#22C55E;

}

.badge-warning{

    background:rgba(245,158,11,.15);

    color:#F59E0B;

}

.badge-danger{

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

    color:#EF4444;

}

/* ============================================================
   SIDEBAR V2
============================================================ */

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    padding:22px;

    height:80px;

}

.logo-icon{

    width:46px;

    height:46px;

    border-radius:12px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    box-shadow:0 10px 20px rgba(37,99,235,.35);

}

.logo-text h2{

    font-size:22px;

    margin:0;

    line-height:1;

}

.logo-text span{

    color:var(--text-soft);

    font-size:13px;

}

.sidebar-menu{

    flex:1;

    padding:15px;

}

.sidebar-menu ul{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 16px;

    border-radius:12px;

    color:var(--text-soft);

    font-weight:500;

    transition:.25s;

}

.sidebar-menu a:hover{

    background:#16273D;

    color:#fff;

}

.sidebar-menu a.active{

    background:var(--primary);

    color:#fff;

    box-shadow:0 8px 20px rgba(37,99,235,.25);

}

.icon{

    width:24px;

    text-align:center;

}

.sidebar-footer{

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

    padding:20px;

    text-align:center;

    color:var(--text-soft);

}

.sidebar-footer small{

    display:block;

    margin-top:5px;

    font-size:12px;

}

/* ===========================
   Recent Articles
=========================== */

.panel-body{

    padding:0;

}

/* ======================================
   RECENT ARTICLES
====================================== */

.panel-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

}

.panel-link{

    color:#94A3B8;

    font-size:14px;

    transition:.25s;

}

.panel-link:hover{

    color:#fff;

}

.recent-list{

    padding:10px;

}

.recent-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:14px 18px;


    border-radius:12px;

    transition:.25s;

}

.recent-item:hover{

    background:#1E3047;

}

.recent-left{

    display:flex;

    align-items:center;

    gap:16px;

    flex:1;

    min-width:0;

}

.recent-icon{

    width:36px;

    height:36px;

    border-radius:10px;

    background:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:#fff;

    font-size:15px;

}

.recent-content{

    flex:1;

    min-width:0;

}

.recent-title{

    font-size:15px;

    font-weight:600;

    color:#fff;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.recent-meta{

    margin-top:4px;

    font-size:13px;

    color:#94A3B8;

}

.recent-arrow{

    color:#64748B;

    font-size:22px;

    transition:.25s;

    flex-shrink:0;

}

.recent-item:hover .recent-arrow{

    color:#fff;

    transform:translateX(4px);

}

/* ==========================================
   ARTICLE EDITOR LAYOUT
========================================== */

.editor-layout{

    display:grid;

    grid-template-columns:2fr 340px;

    gap:24px;

    align-items:start;

}

.editor-main{

    min-width:0;

}

.editor-sidebar{

    min-width:0;

}

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

.editor-card{

    background:#13233a;

    border:1px solid #24364f;

    border-radius:14px;

    overflow:hidden;

}

.editor-card-header{

    padding:18px 24px;

    border-bottom:1px solid #24364f;

}

.editor-card-title{

    margin:0;

    font-size:18px;

    font-weight:600;

    color:#fff;

}

.editor-card-body{

    padding:24px;

}