/* =========================================
   admin.css
========================================= */

/* ==========================
    Theme
========================== */

:root{

    --primary:#2563eb;

    --primary-dark:#1d4ed8;

    --success:#22c55e;

    --warning:#f59e0b;

    --danger:#ef4444;

    --info:#06b6d4;

    --text:#111827;

    --text-light:#6b7280;

    --border:#e5e7eb;

    --background:#f4f7fb;

    --white:#ffffff;

}

/* ==========================
    Global
========================== */

body{

    background:

        var(--background);

    color:

        var(--text);

}

/* ==========================
    Link
========================== */

a{

    color:

        var(--primary);

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}


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

.status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        4px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.status-success{

    background:#dcfce7;

    color:#15803d;

}

.status-warning{

    background:#fef3c7;

    color:#b45309;

}

.status-danger{

    background:#fee2e2;

    color:#b91c1c;

}

.status-info{

    background:#dbeafe;

    color:#1d4ed8;

}

/* ==========================
    Badge
========================== */

.badge{

    display:inline-block;

    padding:

        3px 10px;

    border-radius:8px;

    background:

        #f3f4f6;

    font-size:12px;

    color:

        var(--text-light);

}

/* ==========================
    Panel
========================== */

.panel{

    margin-top:20px;

}

.panel-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:20px;

    margin-bottom:18px;

}

/* ==========================
    Divider
========================== */

hr{

    border:none;

    border-top:

        1px solid var(--border);

    margin:

        20px 0;

}

/* ==========================
    Scrollbar
========================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

::-webkit-scrollbar-track{

    background:transparent;

}

/* ==========================
    Selection
========================== */

::selection{

    background:#bfdbfe;

}

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

.loading{

    display:flex;

    justify-content:center;

    align-items:center;

    height:180px;

    color:

        var(--text-light);

    font-size:15px;

}

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

.empty{

    display:flex;

    justify-content:center;

    align-items:center;

    height:160px;

    color:

        var(--text-light);

}

/* ==========================
    Utility
========================== */

.text-success{

    color:

        var(--success);

}

.text-warning{

    color:

        var(--warning);

}

.text-danger{

    color:

        var(--danger);

}

.text-info{

    color:

        var(--info);

}

.text-right{

    text-align:right;

}

.text-center{

    text-align:center;

}

.mt20{

    margin-top:20px;

}

.mb20{

    margin-bottom:20px;

}

.hidden{

    display:none !important;

}

/* ==========================
    Login
========================== */

.login-body{

    overflow:auto;

}

.login-shell{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

}

.login-panel{

    width:100%;

    max-width:420px;

    background:white;

    border-radius:8px;

    padding:32px;

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

}

.login-brand{

    font-size:15px;

    color:var(--primary);

    font-weight:700;

    margin-bottom:10px;

}

.login-title{

    font-size:28px;

    margin-bottom:24px;

}

.topbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.toolbar-input{

    width:240px;

}

.toolbar-select{

    width:150px;

}

.pager{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

    gap:12px;

}

.chart{

    min-height:220px;

    display:flex;

    align-items:flex-end;

    gap:14px;

    padding-top:24px;

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

}

.chart-bar-wrap{

    flex:1;

    min-width:42px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

}

.chart-bar{

    width:100%;

    max-width:56px;

    background:var(--primary);

    border-radius:6px 6px 0 0;

}

.chart-label{

    max-width:80px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text-light);

    font-size:12px;

}

.chart-value{

    max-width:80px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text);

    font-size:12px;

    font-weight:700;

}

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

.dashboard-grid{

    display:grid;

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

    gap:20px;

}

.dashboard-card-row{

    grid-column:1 / -1;

    display:grid;

    gap:20px;

}

.dashboard-card-row-main{

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

}

.dashboard-card-row-sub{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

.dashboard-trend-panel,
.dashboard-orders-panel{

    grid-column:1 / -1;

}

.dashboard-status-panel{

    min-height:240px;

}

.line-chart{

    min-height:280px;

}

.line-chart-svg{

    width:100%;

    height:240px;

    display:block;

}

.line-chart-area{

    fill:rgba(37,99,235,.08);

}

.line-chart-line{

    fill:none;

    stroke:var(--primary);

    stroke-width:4;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.line-chart-point{

    fill:white;

    stroke:var(--primary);

    stroke-width:3;

}

.line-chart-labels{

    display:flex;

    justify-content:space-between;

    gap:10px;

    color:var(--text-light);

    font-size:12px;

}

.line-chart-labels span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.system-status-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.system-status-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:14px 0;

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

}

.system-status-item:last-child{

    border-bottom:none;

}

.system-status-name{

    font-size:14px;

    font-weight:700;

}

.system-status-desc{

    margin-top:4px;

    min-height:16px;

    color:var(--text-light);

    font-size:12px;

}

@media (max-width:768px){

    .pager{

        flex-direction:column;

        align-items:flex-start;

    }

    .toolbar-input,
    .toolbar-select{

        width:100%;

    }

    .dashboard-grid,
    .dashboard-card-row-main,
    .dashboard-card-row-sub{

        grid-template-columns:1fr;

    }

}

/* ==========================
    Admin Modal
========================== */

.admin-modal-overlay{

    position:fixed;

    inset:0;

    z-index:10000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

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

    opacity:0;

    transition:opacity .16s ease;

}

.admin-modal-overlay.show{

    opacity:1;

}

.admin-modal{

    width:640px;

    max-width:96vw;

    max-height:90vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:white;

    border-radius:8px;

    box-shadow:0 24px 80px rgba(15,23,42,.28);

}

.admin-modal-md{

    width:720px;

}

.admin-modal-lg{

    width:1040px;

}

.admin-modal-header{

    height:62px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:0 22px;

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

    flex-shrink:0;

}

.admin-modal-title{

    font-size:18px;

    font-weight:700;

}

.admin-modal-close{

    width:36px;

    height:36px;

    border:none;

    border-radius:8px;

    background:white;

    color:var(--text-light);

    font-size:24px;

    line-height:1;

    cursor:pointer;

}

.admin-modal-close:hover{

    background:#f3f4f6;

}

.admin-modal-body{

    flex:1;

    overflow:auto;

    padding:22px;

}

.admin-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:16px 22px;

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

    flex-shrink:0;

}

.admin-modal-form{

    gap:18px;

}

.admin-detail-grid{

    display:grid;

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

    gap:12px;

}

.admin-detail-item{

    min-width:0;

    padding:12px;

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

    border-radius:8px;

    background:#f8fafc;

}

.admin-detail-label{

    margin-bottom:6px;

    color:var(--text-light);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}

.admin-detail-value{

    overflow-wrap:anywhere;

    color:var(--text);

    font-size:14px;

}

.admin-modal-section-title{

    margin:22px 0 10px;

    font-size:15px;

    font-weight:700;

}

.admin-json{

    max-height:420px;

    overflow:auto;

    margin:0;

    padding:16px;

    border-radius:8px;

    background:#0f172a;

    color:#e2e8f0;

    font-family:Consolas, monospace;

    font-size:13px;

    line-height:1.55;

}

@media (max-width:768px){

    .admin-modal-overlay{

        padding:12px;

    }

    .admin-detail-grid{

        grid-template-columns:1fr;

    }

    .admin-modal-footer{

        flex-direction:column;

    }

}