/* ==========================================
   01. RESET
========================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    overflow:hidden;

    height:100%;

}

body{

    overflow:auto;

    height:100%;

}
body{

    font-family:Arial,sans-serif;

    background:#f4f6f9;

    color:#333;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    max-width:100%;

    display:block;

}

button,
input,
select,
textarea{

    font:inherit;

}

.container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding-inline:20px;

}

@media (max-width:768px){

    .container{

        padding-inline:16px;

    }

}

@media (max-width:480px){

    .container{

        padding-inline:12px;

    }

}


/* ==========================================
   02. ADMIN LAYOUT
========================================== */

/* Layout */

.admin-layout{

    display:flex;

    min-height:100vh;

}


/* Wrapper */

.admin-wrapper{

    flex:1;

    margin-left:260px;

    min-width:0;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}
.admin-wrapper{

    height:100svh;

    overflow:auto;

}

/* Main Content */ 
.admin-main{

    position:relative;

    flex:1;

    padding:30px 15px;

    background:#f5f7fb;

} 
 
/* Mobile */

@media (max-width:992px){

    .admin-wrapper{

        margin-left:0;

    }

}

/* ==========================================
   03. SIDEBAR
========================================== */ 

.admin-sidebar{

    position:fixed;

    top:0;

    left:0;

    width:260px;

    height:100svh;

    background:#1f2937;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow-y:auto;

    transform:translateX(-100%);

    transition:transform .3s ease;

    z-index:9999;

}
 

/* Brand */

.sidebar-brand{

    padding:28px 24px;

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

}

.sidebar-brand h2{

    font-size:22px;

    font-weight:700;

    color:#fff;

    margin-bottom:6px;

}

.sidebar-brand p{

    font-size:14px;

    color:#9ca3af;

}


/* Navigation */

.sidebar-nav{

    flex:1;

    padding:20px 0;

}

.sidebar-nav ul{

    list-style:none;

    margin:0;

    padding:0;

}

.sidebar-nav li{

    margin:4px 12px;

}

.sidebar-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:10px;

    color:#cbd5e1;

    transition:.25s;

}

.sidebar-nav a i{

    width:20px;

    text-align:center;

    font-size:18px;

}

.sidebar-nav a:hover{

    background:#2d6cdf;

    color:#fff;

}

.sidebar-nav li.active a{

    background:#2d6cdf;

    color:#fff;

}


/* sidebar footer */

.sidebar-footer{

    padding:20px 12px;

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

}

.sidebar-footer a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    margin-bottom:8px;

    border-radius:10px;

    color:#cbd5e1;

    transition:.25s;

}

.sidebar-footer a:hover{

    background:#2d6cdf;

    color:#fff;

}

.sidebar-footer a:last-child{

    margin-bottom:0;

}

@media (min-width: 993px) {
    .admin-sidebar {
        margin-left: 250px;
    }
}

/* ==========================================
   04. SIDEBAR OVERLAY
========================================== */ 

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.admin-layout.sidebar-open .sidebar-overlay{

    opacity:1;

    visibility:visible;

}

/* Body Scroll Lock */

body.sidebar-open{

    overflow:hidden;

    touch-action:none;

}
.admin-layout.sidebar-open .admin-sidebar{

    transform:translateX(0);

}

/* Mobile */

@media (max-width:992px){

    .admin-sidebar{

        transform:translateX(-100%);

        transition:transform .3s ease;

    }

    .admin-layout.sidebar-open .admin-sidebar{

        transform:translateX(0);

    }

}


/* ==========================================
   05. TOPBAR
========================================== */

/* Topbar */

.admin-topbar{

    height:70px;

    background:#fff;

    border-bottom:1px solid #ececec;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    position:sticky;

    top:0;

    z-index:100;

}


/* Left */

.topbar-left{

    display:flex;

    align-items:center;

    gap:18px;

}


/* Right */

.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}


/* Logo */

.topbar-logo{

    width:42px;

    height:42px;

    border-radius:10px;

    overflow:hidden;

    flex-shrink:0;

}

.topbar-logo img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* Icon */

.topbar-icon{

    position:relative;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:#f3f3f3;

    color:#444;

    transition:.25s;

}

.topbar-icon:hover{

    background:#eef3ff;

    color:#2d6cdf;

}

.topbar-icon i{

    font-size:20px;

}


/* Badge */

.icon-badge{

    position:absolute;

    top:-4px;

    right:-4px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:#ff6767;

    color:#fff;

    font-size:11px;

    font-weight:600;

}


/* Sidebar Toggle */

.sidebar-toggle{

    display:none;

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#f8f9fb;

    cursor:pointer;

    font-size:22px;

}


/* Mobile */

@media (max-width:992px){

    .admin-topbar{

        padding:0 18px;

    }

    .sidebar-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}


/* ==========================================
   06. PAGE
========================================== */

/* page-title */
/* page-header */




/* ==========================================
   07. CARDS
========================================== */

/* analytics-card */
/* dashboard-card */
/* stat-card */




/* ==========================================
   08. TABLES
========================================== */

/* table */
/* table-responsive */
/* pagination */




/* ==========================================
   09. FORMS
========================================== */

/* form-group */
/* input */
/* textarea */
/* select */




/* ==========================================
   10. BUTTONS
========================================== */

/* btn */
/* btn-primary */
/* btn-danger */




/* ==========================================
   11. IMAGE UPLOAD
========================================== */

/* upload-status */
/* image-preview */




/* ==========================================
   12. FLASH MESSAGE
========================================== */

/* success */
/* error */




/* ==========================================
   13. MODAL
========================================== */

/* modal */
/* backdrop */




/* ==========================================
   14. UTILITIES
========================================== */

/* flex */
/* gap */
/* spacing */




/* ==========================================
   15. RESPONSIVE
========================================== */

/* tablet */
/* mobile */

/* ===================================
   Admin Layout
=================================== */

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

body{
    font-family:Arial,sans-serif;
    background:#f4f6f9;
    color:#333;
    overflow-x: hidden;
}
html,
body{

    overflow-x:hidden;

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

.container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding-inline:20px;

}

@media (max-width:768px){

    .container{

        padding-inline:16px;

    }

}

@media (max-width:480px){

    .container{

        padding-inline:12px;

    }

}


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

.admin-topbar{

    height:70px;

    background:#fff;

    border-bottom:1px solid #ececec;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 30px;

    position:sticky;

    top:0;

    z-index:100;

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar-logo {
    width: 42px;
    height: 42px;
    display: inline-block;
    border-radius: 10px;
}
.topbar-logo img {
    width: 42px;
    height: 42px;
    max-width: 100%;
    border-radius: 10px;
}
.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar-icon{

    position:relative;

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:10px;

    background:#f3f3f3;

    color:#444;

    text-decoration:none;

    transition:.25s;

}

.topbar-icon:hover{

    background:#eef3ff;

    color:#2d6cdf;

}

.topbar-icon i{

    font-size:20px;

}

.icon-badge{

    position:absolute;

    top:-4px;

    right:-4px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    background:#ff6767;

    color:#fff;

    border-radius:30px;

    font-size:11px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:600;

}

.sidebar-toggle{

    display:none;

    width:42px;

    height:42px;

    border:none;

    background:#f8f9fb;

    border-radius:10px;

    cursor:pointer;

    font-size:22px;

}

@media(max-width:992px){

    .admin-topbar{

        padding:10px 18px;

    }

    .sidebar-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

    } 

} 

/* ==========================================
   06. PAGE
========================================== */

/* Page Container */

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

    flex-wrap:wrap;

}


/* Page Title */

.page-title{

    font-size:28px;

    font-weight:700;

    color:#111827;

    margin:0;

}


/* Page Description */

.page-description{

    margin-top:8px;

    color:#6b7280;

    font-size:15px;

    line-height:1.6;

}


/* Section Header */

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:24px;

    flex-wrap:wrap;

}

.section-header h2{

    font-size:20px;

    font-weight:600;

    color:#111827;

    margin:0;

}

.section-header p{

    margin-top:6px;

    color:#6b7280;

    font-size:14px;

}

/* ===================================
   Dashboard Cards
=================================== */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top: 20px;
}

.card{
    background:#fff;
    border-radius:10px;
    padding:25px;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.card h3{
    font-size:16px;
    color:#666;
    margin-bottom:12px;
}

.card .number{
    font-size:34px;
    font-weight:700;
}


/* ===================================
   Table
=================================== */
.table-card{

    margin-top:40px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 3px 10px rgb(0 0 0 / 5%);

}

.table-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    border-bottom:1px solid #eee;

}

.table-responsive{

    overflow-x:auto;

}

.table {
    width: 100%;
    /* min-width: 900px; */
    border-collapse: collapse;
}

.table-header h2{
    font-size:20px;
} 

.table th,
.table td{

    white-space:nowrap;
    padding:15px;
    border-bottom:1px solid #eee;
    text-align:left;

} 

tbody tr:hover{
    background:#f8f8f8;
}



.table th{

    background:#f7f7f7;

    text-align:left;

    padding:14px;

    font-weight:600;

}

.table td{

    padding:14px;

    border-top:1px solid #eee;

}

.table tr:hover{

    background:#fafafa;

}

.view-all{

    text-decoration:none;

    font-size:14px;

    font-weight:600;

}

.empty{

    padding:40px;

    text-align:center;

    color:#888;

}

.status{

    display:inline-block;

    padding:5px 10px;

    border-radius:30px;

    font-size:13px;

}

.status-pending{

    background:#FFF4CC;

    color:#946200;

}

.status-confirmed{

    background:#DCEEFF;

    color:#0056B3;

}

.status-processing{

    background:#DCEEFF;

    color:#0056B3;

}

.status-delivered{

    background:#E5F9E7;

    color:#1E7E34;

}

.status-cancelled{

    background:#FFE4E4;

    color:#C82333;

}
/* ==========================================
   ANALYTICS CARD
========================================== */
.overview-card {
    background: transparent;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,.06);
    border: 1px solid #ddd;
}
.analytics-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,.06);
}

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

.section-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
}
.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.section-header h2{
    margin:0;
}

.section-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:500;
    color:#2563eb;
    text-decoration:none;
    transition:.2s;
}

.section-link:hover{
    color:#1d4ed8;
}

.section-link i{
    font-size:13px;
}

/* ==========================================
   ORDER ANALYTICS
========================================== */

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

.status-card {
    border-radius: 10px;
    padding: 18px;
    color: #fff;
    text-align: center;
}

.status-card span {
    display: block;
    font-size: 14px;
    opacity: .9;
}

.status-card strong {
    display: block;
    margin-top: 10px;
    font-size: 28px;
    font-weight: 700;
}

.status-card.pending {
    background: #f39c12;
}

.status-card.confirmed {
    background: #3498db;
}

.status-card.delivered {
    background: #27ae60;
}

.status-card.cancelled {
    background: #e74c3c;
}


/* ==========================================
   VISITOR ANALYTICS
========================================== */ 

.visitor-stats{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.visitor-item{

    width:100%;

}

.visitor-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:8px;

}

.visitor-info span{

    font-size:15px;

    color:#555;

}

.visitor-info strong{

    font-size:15px;

    color:#111;

}

.progress{

    width:100%;

    height:12px;

    background:#ececec;

    border-radius:50px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    border-radius:50px;

    transition:.4s;

}

.progress-bar.desktop{

    background:#2d6cdf;

}

.progress-bar.mobile{

    background:#27ae60;

}

.progress-bar.tablet{

    background:#f39c12;

}


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

.quick-actions{

    background:#fff;

    border-radius:12px;

    padding:24px;

    margin-top:24px;

    box-shadow:0 5px 15px rgba(0,0,0,.06);

}

.action-grid{

    display:grid;

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

    gap:14px;

}

.action-btn{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:20px;

    background:#f8f9fa;

    border:1px solid #ececec;

    border-radius:10px;

    text-decoration:none;

    color:#444;

    transition:.25s;

}

.action-btn i{

    font-size:24px;

    color:#2d6cdf;

}

.action-btn span{

    font-size:14px;

    font-weight:500;

}

.action-btn:hover{

    border-color:#2d6cdf;

    background:#fff;

    transform:translateY(-2px);

}

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

@media (max-width:992px){

    .status-grid,
    .action-grid{

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

    }

    .device-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:576px){

    .status-grid,
    .action-grid{

        grid-template-columns:1fr;

    }

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

.empty{
    padding:40px;
    text-align:center;
    color:#888;
}

/* ===================================
   Orders
=================================== */
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.table-filter{
    display:flex;
    gap:12px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.table-filter input,
.table-filter select{
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:6px;
}

.table-filter button{
    padding:10px 20px;
    /*cursor:not-allowed;*/
}

.view-btn{
    text-decoration:none;
    padding:6px 12px;
    border:1px solid #ddd;
    border-radius:5px;
    display:inline-block;
}

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

.pagination{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.page-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:120px;

    padding:10px 18px;

    border:1px solid #dbe2ea;

    border-radius:8px;

    background:#fff;

    color:#374151;

    font-size:14px;

    font-weight:500;

    text-decoration:none;

    transition:.25s;

}

.page-btn:hover{

    background:#2d6cdf;

    border-color:#2d6cdf;

    color:#fff;

}

.page-btn.disabled{

    background:#f3f4f6;

    border-color:#e5e7eb;

    color:#9ca3af;

    cursor:not-allowed;

    pointer-events:none;

}

.page-info{

    font-size:14px;

    font-weight:600;

    color:#6b7280;

}
/* order view */
.details-card{

    background:#fff;

    border-radius:8px;

    padding:25px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

.details-table{

    width:100%;

    border-collapse:collapse;

}

.details-table th{

    width:220px;

    text-align:left;

    padding:14px;

    background:#f7f7f7;

    border-bottom:1px solid #eee;

}

.details-table td{

    padding:14px;

    border-bottom:1px solid #eee;

}

.details-table tr:last-child th,

.details-table tr:last-child td{

    border-bottom:none;

}
.mt-30{

margin-top:30px;

}

.status-select{

padding:12px;

min-width:220px;

margin-right:15px;

border:1px solid #ddd;

border-radius:6px;

}

.save-btn{

padding:12px 24px;

background:#111827;

color:#fff;

border:none;

border-radius:6px;

cursor:pointer;

}

.save-btn:hover{

opacity:.9;

}
.alert-success{

    background:#e8f8ee;

    color:#0f7a38;

    border:1px solid #b8e4c8;

    padding:12px 16px;

    border-radius:6px;

    margin-bottom:20px;

}
@media (max-width:576px){

    .pagination{

        flex-direction:column;

        align-items:stretch;

    }

    .page-btn{

        width:100%;

    }

    .page-info{

        text-align:center;

    }

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

.pagination{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}

.pagination a,
.pagination span{

    min-width:110px;

    padding:10px 16px;

    border:1px solid #d1d5db;

    border-radius:6px;

    background:#fff;

    color:#374151;

    font-size:14px;

    font-weight:500;

    text-align:center;

    text-decoration:none;

    transition:.2s;

}

.pagination a:hover{

    background:#2563eb;

    border-color:#2563eb;

    color:#fff;

}

.pagination .disabled{

    cursor:not-allowed;

    opacity:.5;

}

.pagination span:not(.disabled){

    flex:1;

    border:none;

    background:transparent;

    color:#6b7280;

    font-weight:600;

}
@media (max-width:576px){

    .pagination{

        flex-direction:column;

        align-items:stretch;

    }

    .pagination a,
    .pagination span{

        width:100%;

    }

}
/* ===================================
   ANALYTICS
=================================== */
.analytics-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.mini-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:20px;
}

.mini-card h3{
    margin-bottom:15px;
    font-size:18px;
}

.analytics-list{
    list-style:none;
    margin:0;
    padding:0;
}

.analytics-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #f1f1f1;
}

.analytics-list li:last-child{
    border-bottom:none;
} 
/* ==========================================
   REPORTS
========================================== */

.report-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
}

.report-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border:1px solid #dcdfe6;
    border-radius:8px;
    background:#fff;
    color:#555;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:.2s;
}

.report-tab:hover{
    background:#f5f7fb;
    border-color:#2563eb;
    color:#2563eb;
}

.report-tab.active{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}

.report-description{
    margin:0 0 20px;
    color:#666;
    line-height:1.7;
}

.report-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}

.report-actions .action-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: 8px;
    min-width: 150px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    background: #f9f9f9;
    color: #fff;
    font-weight: 500;
    transition: .2s;
    color: #333; 
}

.report-actions .action-btn:hover{
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%); 
}
/* ==========================================
   SETTINGS
========================================== */

.settings-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    margin-bottom:25px;
}
 
/* form group */
.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#555;
}

.form-group input,
.form-group select{
    width:100%;
    height:45px;
    padding:0 14px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    font-size:15px;
    transition:.25s;
}

.form-group input[type="file"]{
    padding:10px;
    height:auto;
}

.form-group input:focus,
.form-group select:focus{
    border-color:#2d6cdf;
    outline:none;
    box-shadow:0 0 0 3px rgba(45,108,223,.08);
}

/* switch */

.switch-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 18px;

    border:1px solid #e5e7eb;
    border-radius:10px;

    background:#fafafa;
}

.switch-item label{
    margin:0;
    font-size:15px;
    font-weight:500;
}

.switch-item input{
    width:18px;
    height:18px;
    cursor:pointer;
}

/* radio */
.section-description{

    margin: 8px 0 20px;

    color: #6b7280;

    font-size: 14px;

}

.radio-group{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:12px;

}

.radio-item{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.radio-item input{

    width:18px;

    height:18px;

}

.radio-item span{

    font-size:15px;

}
.selected-file{

    display:block;

    margin-top:8px;

    font-size:14px;

    color:#666;

}
.upload-status{

    display:block;

    margin-top:8px;

    font-size:14px;

    color:#6b7280;

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

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 22px;

    border:none;
    border-radius:8px;

    background:#2d6cdf;
    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;
    transition:.25s;
}

.btn-primary:hover{
    background:#1f58b7;
}
/* ==========================================
   FLASH MESSAGE
========================================== */
.admin-flash-message{

    position:fixed;

    top:20px;

    right:20px;

    z-index:9999;

    min-width:320px;

    max-width:420px;

    padding:16px 18px;

    border-radius:8px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    color:#fff;

    font-size:15px;

    box-shadow:0 8px 24px rgba(0,0,0,.15);

    transition:.3s;

}

.admin-flash-success{

    background:#16a34a;

}

.admin-flash-error{

    background:#dc2626;

}

.admin-flash-close{

    background:none;

    border:none;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    line-height:1;

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

@media(max-width:768px){

    .settings-grid{

        grid-template-columns:1fr;

    }

    .btn-primary{

        width:100%;

    }

}
/* ===================================
   Responsive
=================================== */
@media(max-width:768px){

.admin-header .container{
    flex-direction:column;
    gap:15px;
}

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

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

.admin-footer{

    height:60px;

    padding:0 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    border-top:1px solid #e5e7eb;

    color:#6b7280;

    font-size:14px;

    flex-shrink:0;

}

.footer-left{

    display:flex;

    align-items:center;

}

.footer-right{

    display:flex;

    align-items:center;

}

@media(max-width:768px){

    .admin-footer{

        flex-direction:column;

        justify-content:center;

        gap:6px;

        height:auto;

        padding:16px 20px;

        text-align:center;

    }

}