/* ==========================================================
   ADMIN LOGIN PAGE
========================================================== */

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

body{
    font-family:Arial,Helvetica,sans-serif;
    background:linear-gradient(135deg,#0d6efd,#4f9cff);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.login-wrapper{
    width:100%;
    max-width:450px;
}

.login-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    padding:35px;
}

.login-header{
    text-align:center;
    margin-bottom:30px;
}

.login-header img{
    width:80px;
    height:80px;
    object-fit:contain;
    margin:auto auto 15px;
}

.login-header h2{
    font-size:30px;
    color:#222;
    margin-bottom:8px;
}

.login-header p{
    color:#777;
    font-size:15px;
}

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

.login-form{
    width:100%;
}

.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#333;
}

.input-group{
    position:relative;
}

.input-icon{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#777;
}

.form-control{
    width:100%;
    height:50px;
    border:1px solid #ddd;
    border-radius:12px;
    padding:0 50px 0 45px;
    font-size:15px;
    transition:.25s;
}

.form-control:focus{
    border-color:#0d6efd;
    outline:none;
    box-shadow:0 0 0 4px rgba(13,110,253,.15);
}

.toggle-password{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    cursor:pointer;
    color:#777;
    font-size:16px;
}

/* ==========================================================
OPTIONS
========================================================== */

.login-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
    font-size:14px;
}

.remember-me{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.login-options a{
    color:#0d6efd;
    text-decoration:none;
}

.login-options a:hover{
    text-decoration:underline;
}

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

.login-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:12px;
    background:#0d6efd;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.login-btn:hover{
    background:#0b5ed7;
}

.login-btn i{
    margin-right:8px;
}

/* ==========================================================
ALERT
========================================================== */

.alert{
    padding:14px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}

.alert-danger{
    background:#fdeaea;
    color:#c62828;
    border:1px solid #f5b5b5;
}

.alert i{
    margin-right:8px;
}

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

.login-footer{
    text-align:center;
    margin-top:25px;
    color:#777;
    font-size:14px;
}

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

.login-card{
    animation:fadeUp .5s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

@media(max-width:576px){

    .login-card{
        padding:25px;
    }

    .login-header h2{
        font-size:24px;
    }

    .login-options{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

}

/*=========================================================
ADMIN PANEL
NeedsWorld Admin CSS
Part 1
=========================================================*/

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f4f7fb;
    color:#222;
    overflow-x:hidden;
}

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

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

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

ul{
    list-style:none;
}

/*=========================================================
ROOT
=========================================================*/

:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;

    --success:#198754;

    --danger:#dc3545;

    --warning:#ffc107;

    --info:#0dcaf0;

    --purple:#6f42c1;

    --dark:#212529;

    --gray:#6c757d;

    --light:#f8f9fa;

    --white:#ffffff;

    --border:#e4e8ee;

    --sidebar:260px;

    --header:70px;

    --radius:16px;

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

    --transition:.30s;

}

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

.admin-wrapper{
    min-height:100vh;
}

.admin-content{
    margin-left:var(--sidebar);
    margin-top:var(--header);
    padding:30px;
    transition:var(--transition);
}

.admin-content.full{
    margin-left:0;
}

/*=========================================================
CONTAINER
=========================================================*/

.container-fluid{
    width:100%;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.page-header h1{
    font-size:30px;
    font-weight:700;
    color:var(--dark);
}

.page-header p{
    color:var(--gray);
    margin-top:6px;
}

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

.dashboard-card{

    background:var(--white);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

    margin-bottom:30px;

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.card-header h3{

    font-size:22px;

    font-weight:700;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:none;

    cursor:pointer;

    border-radius:12px;

    padding:11px 18px;

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}

.btn i{

    font-size:14px;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-success{

    background:var(--success);

    color:#fff;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

}

.btn-warning{

    background:var(--warning);

    color:#111;

}

.btn-light{

    background:#eef2f7;

    color:#333;

}

.btn-light:hover{

    background:#dde5ef;

}

.btn-sm{

    padding:8px 14px;

    font-size:13px;

}

/*=========================================================
BADGES
=========================================================*/

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.badge-success{

    background:#d1fae5;

    color:#047857;

}

.badge-danger{

    background:#fee2e2;

    color:#b91c1c;

}

.badge-warning{

    background:#fff3cd;

    color:#8a6d3b;

}

.badge-primary{

    background:#dbeafe;

    color:#2563eb;

}

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

.table-responsive{

    width:100%;

    overflow-x:auto;

}

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:#f5f7fa;

    padding:14px;

    text-align:left;

    font-size:14px;

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

}

.table td{

    padding:14px;

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

    vertical-align:middle;

}

.table tr:hover{

    background:#fafbfd;

}

.table-thumb{

    width:90px;

    height:55px;

    object-fit:cover;

    border-radius:10px;

}

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

.text-center{
    text-align:center;
}

.mt-20{
    margin-top:20px;
}

.mb-20{
    margin-bottom:20px;
}

.w-100{
    width:100%;
}

.d-flex{
    display:flex;
}

.justify-between{
    justify-content:space-between;
}

.align-center{
    align-items:center;
}

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

@media(max-width:991px){

.admin-content{

margin-left:0;

padding:20px;

}

.page-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}

@media(max-width:576px){

.dashboard-card{

padding:18px;

}

.page-header h1{

font-size:24px;

}

.btn{

width:100%;

}

}

/*=========================================================
ADMIN HEADER
=========================================================*/

.admin-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--header);
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 25px;
    box-shadow:0 2px 15px rgba(0,0,0,.06);
    z-index:1000;
}

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

.header-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.menu-toggle{
    width:45px;
    height:45px;
    border:none;
    border-radius:12px;
    background:#eef2f7;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.menu-toggle:hover{
    background:var(--primary);
    color:#fff;
}

.admin-logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-logo img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.admin-logo h2{
    font-size:22px;
    font-weight:700;
    color:var(--dark);
}

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

.header-center{
    flex:1;
    display:flex;
    justify-content:center;
    padding:0 40px;
}

.admin-search{
    width:100%;
    max-width:550px;
    position:relative;
}

.admin-search input{
    width:100%;
    height:46px;
    border:1px solid var(--border);
    border-radius:30px;
    padding:0 55px 0 20px;
    background:#f7f9fc;
    transition:var(--transition);
}

.admin-search input:focus{
    border-color:var(--primary);
    background:#fff;
    outline:none;
}

.admin-search button{
    position:absolute;
    right:6px;
    top:6px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
}

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

.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#f3f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    cursor:pointer;
    transition:var(--transition);
}

.header-icon:hover{
    background:var(--primary);
    color:#fff;
}

.notification-count{
    position:absolute;
    top:4px;
    right:4px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#dc3545;
    color:#fff;
    font-size:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

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

.admin-profile{
    position:relative;
}

.profile-btn{
    display:flex;
    align-items:center;
    gap:12px;
    border:none;
    background:none;
    cursor:pointer;
}

.profile-btn img{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.profile-info{
    text-align:left;
}

.profile-info strong{
    display:block;
    font-size:15px;
}

.profile-info span{
    color:var(--gray);
    font-size:13px;
}

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

.profile-dropdown{
    position:absolute;
    top:60px;
    right:0;
    width:240px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
}

.admin-profile:hover .profile-dropdown{
    opacity:1;
    visibility:visible;
}

.profile-dropdown a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 18px;
    color:#333;
    transition:var(--transition);
}

.profile-dropdown a:hover{
    background:#f6f8fb;
}

.profile-dropdown a i{
    width:20px;
    text-align:center;
}

/*=========================================================
HEADER DIVIDER
=========================================================*/

.dropdown-divider{
    height:1px;
    background:var(--border);
}

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

@media(max-width:991px){

    .header-center{
        display:none;
    }

    .profile-info{
        display:none;
    }

    .admin-header{
        padding:0 15px;
    }

}

@media(max-width:576px){

    .admin-logo h2{
        display:none;
    }

    .header-icon{
        width:40px;
        height:40px;
    }

}

/*=========================================================
ADMIN SIDEBAR
=========================================================*/

.admin-sidebar{
    position:fixed;
    top:var(--header);
    left:0;
    width:var(--sidebar);
    height:calc(100vh - var(--header));
    background:var(--white);
    border-right:1px solid var(--border);
    overflow-y:auto;
    overflow-x:hidden;
    transition:var(--transition);
    z-index:999;
}

.admin-sidebar.hide{
    left:calc(var(--sidebar) * -1);
}

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

.admin-sidebar::-webkit-scrollbar{
    width:7px;
}

.admin-sidebar::-webkit-scrollbar-thumb{
    background:#d5dbe3;
    border-radius:20px;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover{
    background:#bfc8d4;
}

/*=========================================================
SIDEBAR HEADER
=========================================================*/

.sidebar-header{
    padding:22px 20px 10px;
}

.sidebar-header h4{
    color:var(--gray);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
}

/*=========================================================
SIDEBAR MENU
=========================================================*/

.sidebar-menu{
    padding:10px 10px 30px;
}

.sidebar-menu li{
    margin-bottom:4px;
}

.sidebar-menu a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:13px 16px;
    border-radius:12px;
    color:#444;
    font-size:15px;
    font-weight:500;
    transition:var(--transition);
}

.sidebar-menu a i{
    width:22px;
    text-align:center;
    font-size:18px;
}

.sidebar-menu a:hover{
    background:#eef4ff;
    color:var(--primary);
}

.sidebar-menu li.active>a{
    background:var(--primary);
    color:#fff;
}

.sidebar-menu li.active>a i{
    color:#fff;
}

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

.menu-badge{
    margin-left:auto;
    min-width:24px;
    height:22px;
    border-radius:30px;
    background:#dc3545;
    color:#fff;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
}

/*=========================================================
SUBMENU
=========================================================*/

.has-submenu>a{
    justify-content:space-between;
}

.submenu-arrow{
    transition:.3s;
    font-size:13px;
}

.has-submenu.open .submenu-arrow{
    transform:rotate(90deg);
}

.submenu{
    display:none;
    margin-top:6px;
    padding-left:18px;
}

.has-submenu.open .submenu{
    display:block;
}

.submenu a{
    padding:11px 14px;
    font-size:14px;
    border-radius:10px;
}

.submenu a:hover{
    background:#f5f7fb;
}

/*=========================================================
SIDEBAR DIVIDER
=========================================================*/

.sidebar-divider{
    height:1px;
    background:var(--border);
    margin:18px 15px;
}

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

.sidebar-footer{
    padding:18px;
    border-top:1px solid var(--border);
    color:var(--gray);
    font-size:13px;
    line-height:1.7;
}

.sidebar-footer strong{
    color:var(--dark);
}

.sidebar-version{
    margin-top:8px;
    display:inline-block;
    padding:4px 10px;
    background:#eef2ff;
    color:var(--primary);
    border-radius:30px;
    font-size:12px;
    font-weight:600;
}

/*=========================================================
COLLAPSED SIDEBAR
=========================================================*/

.admin-sidebar.collapsed{
    width:80px;
}

.admin-sidebar.collapsed .sidebar-header,
.admin-sidebar.collapsed .sidebar-footer,
.admin-sidebar.collapsed .menu-text,
.admin-sidebar.collapsed .submenu-arrow,
.admin-sidebar.collapsed .menu-badge{
    display:none;
}

.admin-sidebar.collapsed .sidebar-menu a{
    justify-content:center;
}

.admin-sidebar.collapsed + .admin-content{
    margin-left:80px;
}

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

.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
    z-index:998;
}

.sidebar-overlay.show{
    opacity:1;
    visibility:visible;
}

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

@media(max-width:991px){

    .admin-sidebar{
        left:-280px;
    }

    .admin-sidebar.show{
        left:0;
    }

    .admin-content{
        margin-left:0;
    }

}

@media(max-width:576px){

    .admin-sidebar{
        width:260px;
    }

}

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

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

@media(max-width:1200px){
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .stats-grid{
        grid-template-columns:1fr;
    }
}

.stats-card{
    background:#fff;
    border-radius:18px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.stats-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.stats-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    flex-shrink:0;
}

.bg-primary{background:#0d6efd;}
.bg-success{background:#198754;}
.bg-danger{background:#dc3545;}
.bg-warning{background:#ffc107;color:#111;}
.bg-live{background:#ff3d3d;}
.bg-shorts{background:#ff0066;}

.stats-info{
    flex:1;
}

.stats-info h2{
    font-size:30px;
    margin-bottom:6px;
    color:#111;
}

.stats-info p{
    color:#777;
    font-size:15px;
}

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

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-bottom:30px;
}

.dashboard-row{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    margin-bottom:30px;
}

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

.quick-actions{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.quick-card{
    background:#f7f9fc;
    border-radius:16px;
    padding:25px;
    text-align:center;
    transition:.3s;
    border:1px solid #eef2f7;
}

.quick-card:hover{
    background:#0d6efd;
    color:#fff;
    transform:translateY(-4px);
}

.quick-card i{
    font-size:34px;
    margin-bottom:12px;
}

.quick-card span{
    display:block;
    font-weight:600;
}

/*=========================================================
OVERVIEW
=========================================================*/

.overview-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.overview-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #edf0f5;
}

.overview-item:last-child{
    border-bottom:none;
}

.overview-item span{
    color:#666;
}

.overview-item strong{
    font-size:16px;
}

/*=========================================================
ACTIVITY
=========================================================*/

.activity-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.activity-item{
    display:flex;
    gap:15px;
    align-items:center;
}

.activity-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#e8f0fe;
    color:#0d6efd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.activity-content{
    flex:1;
}

.activity-content strong{
    display:block;
    margin-bottom:5px;
}

.activity-content small{
    color:#777;
}

/*=========================================================
WELCOME BOX
=========================================================*/

.welcome-box{
    text-align:center;
    padding:15px;
}

.welcome-box h2{
    font-size:34px;
    margin-bottom:12px;
}

.welcome-box p{
    color:#666;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

.welcome-buttons{
    margin-top:25px;
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

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

.empty-state{
    text-align:center;
    padding:60px 20px;
}

.empty-state i{
    font-size:60px;
    color:#c6c6c6;
    margin-bottom:20px;
}

.empty-state h3{
    margin-bottom:10px;
    font-size:24px;
}

.empty-state p{
    color:#777;
    margin-bottom:20px;
}

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

.table td .btn{
    margin-right:6px;
}

.table td .btn:last-child{
    margin-right:0;
}

.table tbody tr{
    transition:.25s;
}

.table tbody tr:hover{
    background:#f8fbff;
}

.table-info td:first-child{
    font-weight:600;
    width:180px;
}

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

@media(max-width:991px){

.dashboard-grid{
    grid-template-columns:1fr;
}

.dashboard-row{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.stats-grid{
    grid-template-columns:1fr;
}

.quick-actions{
    grid-template-columns:1fr;
}

.welcome-box h2{
    font-size:26px;
}

.table{
    min-width:700px;
}

}

/*=========================================================
FORMS
=========================================================*/

.form-group{
    margin-bottom:20px;
}

.form-label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#333;
}

.form-control,
.form-select,
textarea{
    width:100%;
    padding:12px 15px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    transition:.3s;
    font-size:15px;
}

.form-control:focus,
.form-select:focus,
textarea:focus{
    border-color:var(--primary);
    outline:none;
    box-shadow:0 0 0 4px rgba(13,110,253,.12);
}

textarea{
    resize:vertical;
    min-height:120px;
}

/*=========================================================
CHECKBOX & SWITCH
=========================================================*/

.form-check{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.form-check input{
    width:18px;
    height:18px;
}

/*=========================================================
ALERTS
=========================================================*/

.alert{
    padding:15px 18px;
    border-radius:12px;
    margin-bottom:20px;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:12px;
}

.alert-success{
    background:#d1fae5;
    color:#065f46;
}

.alert-danger{
    background:#fee2e2;
    color:#991b1b;
}

.alert-warning{
    background:#fef3c7;
    color:#92400e;
}

.alert-info{
    background:#dbeafe;
    color:#1e40af;
}

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

.pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:30px;
    flex-wrap:wrap;
}

.pagination a,
.pagination span{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#fff;
    border:1px solid var(--border);
    transition:.3s;
}

.pagination a:hover{
    background:var(--primary);
    color:#fff;
}

.pagination .active{
    background:var(--primary);
    color:#fff;
}

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

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:2000;
}

.modal.show{
    display:flex;
}

.modal-content{
    width:100%;
    max-width:600px;
    background:#fff;
    border-radius:18px;
    padding:25px;
    animation:fadeUp .25s ease;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.modal-title{
    font-size:22px;
    font-weight:700;
}

.modal-close{
    border:none;
    background:none;
    font-size:22px;
    cursor:pointer;
}

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

.loader{
    width:50px;
    height:50px;
    border:4px solid #eee;
    border-top:4px solid var(--primary);
    border-radius:50%;
    animation:spin .8s linear infinite;
    margin:auto;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/*=========================================================
ANIMATIONS
=========================================================*/

.fade-in{
    animation:fadeIn .35s ease;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.fade-up{
    animation:fadeUp .4s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-thumb{
    background:#cfd8e3;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#b6c2d1;
}

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

.image-preview{
    width:180px;
    height:110px;
    border:2px dashed var(--border);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fafbfc;
}

.image-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

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

.status-active{
    color:#198754;
    font-weight:600;
}

.status-disabled{
    color:#dc3545;
    font-weight:600;
}

.status-pending{
    color:#ff9800;
    font-weight:600;
}

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

.admin-footer{
    margin-top:40px;
    text-align:center;
    color:#777;
    font-size:14px;
    padding:20px 0;
}

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

@media(max-width:768px){

    .modal-content{
        margin:15px;
    }

    .pagination a,
    .pagination span{
        width:38px;
        height:38px;
    }

}

@media(max-width:576px){

    .btn{
        width:100%;
    }

    .modal-content{
        padding:20px;
    }

    .table{
        min-width:650px;
    }

}

.admin-footer{
    margin-top:40px;
    padding:20px 25px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#777;
    font-size:14px;
    background:#fff;
    border-radius:12px;
}

@media(max-width:768px){

.admin-footer{

flex-direction:column;

gap:10px;

text-align:center;

}

}