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

.dashboard-page{
    width:90%;
    max-width:1500px;
    margin:35px auto 80px;
    display:grid;
    grid-template-columns:320px 1fr;
    gap:35px;
}

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

.dashboard-sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.profile-card{
    background:#f1f5f9;
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.profile-card img{
    display:block;
    width:120px;
    height:120px;
    margin:0 auto;
    border-radius:50%;
    object-fit:cover;
    object-position:center center;
    border:4px solid #C9A227;
}

.profile-card h3{
    margin-top:18px;
    font-size:28px;
    color:#222;
}

.profile-card p{
    color:#666;
    margin-top:8px;
}

.dashboard-menu{
    list-style:none;
    background:#f1f5f9;
    border-radius:20px;
    padding:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.dashboard-menu li{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    margin-bottom:10px;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
    font-size:18px;
    font-weight:500;
}

.dashboard-menu li:hover{
    background:#fff;
    transform:translateX(5px);
}

.dashboard-menu li.active{
    background:#C9A227;
    color:#fff;
}

.dashboard-menu li.active i{
    color:#fff;
}

.dashboard-menu i{
    width:24px;
    color:#C9A227;
    font-size:18px;
}

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

.dashboard-title h1{
    font-size:45px;
    color:#111;
}

.dashboard-title p{
    color:#777;
    margin-top:8px;
    font-size:18px;
}

/*=========================
      STATISTICS
=========================*/

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

.stat-card{
    background:#f1f5f9;
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-8px);
}

.stat-icon{
    width:60px;
    height:60px;
    background:#C9A227;
    color:#fff;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
}

.stat-card h2{
    margin-top:25px;
    color:#C9A227;
    font-size:38px;
}

.stat-card p{
    margin-top:8px;
    color:#666;
    font-size:18px;
}

/*=========================
      ORDERS
=========================*/

.orders-section{
    margin-top:30px;
}

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

.section-head h2{
    font-size:34px;
}

.section-head a{
    text-decoration:none;
    color:#C9A227;
    font-weight:600;
}

.orders-table{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.table-head{
    display:grid;
    grid-template-columns:1.4fr 2fr 1fr 1.2fr 1fr 0.8fr;
    padding:22px;
    background:#fafafa;
    border-bottom:1px solid #eee;
    font-weight:700;
}

.order-row{
    display:grid;
    grid-template-columns:1.4fr 2fr 1fr 1.2fr 1fr 0.8fr;
    align-items:center;
    gap:10px;
    padding:20px 22px;
    border-bottom:1px solid #f2f2f2;
    font-size:14px;
}

.order-row:last-child{ border-bottom:none; }

.order-row .or-id{
    font-family:'IBM Plex Mono', monospace;
    color:#111;
}

.order-row .or-products{
    color:#555;
    font-size:13.5px;
    line-height:1.4;
}

.order-row .or-amount{
    font-weight:700;
    color:#111;
}

.order-row .or-view{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#C9A227;
    font-weight:600;
    text-decoration:none;
    font-size:13.5px;
}

.order-row .or-view:hover{ color:#111; }

@media(max-width:1100px){
    .order-row{
        grid-template-columns:1fr;
        gap:6px;
    }
    .order-row .or-view{ margin-top:8px; }
}

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

.empty-orders{
    text-align:center;
    padding:70px 20px;
}

.empty-orders img{
    width:220px;
    margin-bottom:25px;
}

.empty-orders h3{
    font-size:34px;
    color:#222;
}

.empty-orders p{
    margin-top:10px;
    color:#777;
    font-size:18px;
}

.shop-btn{
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin-top:20px;
    height:42px !important;
    padding:0 24px !important;
    background:linear-gradient(135deg, #C9A227 0%, #e67900 100%) !important;
    color:#fff !important;
    text-decoration:none;
    border-radius:12px !important;
    font-size:14.5px !important;
    font-weight:600 !important;
    box-shadow:0 4px 14px rgba(255,140,0,.25) !important;
    transition:all .3s ease;
}

.shop-btn i{
    font-size:16px !important;
    margin:0 !important;
    color:#fff !important;
}

.shop-btn:hover{
    background:linear-gradient(135deg, #C9A227 0%, #C9A227 100%) !important;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,140,0,.35) !important;
    color:#fff !important;
}

.status-pill,
.payment-pill{
    display:inline-block;
    padding:3px 12px;
    border-radius:20px;
    font-size:12.5px;
    font-weight:700;
}

.status-pill.pending,
.status-pill.confirmed{ background:#eaf1ff; color:#2563eb; }
.status-pill.processing{ background:#eef2ff; color:#4f46e5; }
.status-pill.onTheWay{ background:#faf1eb; color:#C9A227; }
.status-pill.delivered{ background:#e8f8ee; color:#1b9c4a; }

.payment-pill.paid{ background:#e8f8ee; color:#1b9c4a; }
.payment-pill.unpaid{ background:#fdeaea; color:#e14848; }

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

@media(max-width:1100px){
    .dashboard-page{
        grid-template-columns:1fr;
        width:95%;
        margin:20px auto 50px;
        gap:24px;
    }
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
    .table-head{
        display:none;
    }
    .section-head{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .order-row{
        grid-template-columns:1fr;
        gap:8px;
        background:#fafafa;
        border:1px solid #eee;
        border-radius:12px;
        padding:16px;
        margin-bottom:12px;
    }
}

@media(max-width:600px){
    .dashboard-page{
        width:100%;
        padding:15px 12px 0;
        margin-top:10px;
    }
    .dashboard-title h1{
        font-size:26px;
    }
    .dashboard-title p{
        font-size:14px;
    }
    .stats-grid{
        grid-template-columns:1fr;
        margin:20px 0;
    }
    .profile-card{
        padding:22px 16px;
        border-radius:16px;
    }
    .profile-card img{
        width:90px;
        height:90px;
    }
    .profile-card h3{
        font-size:22px;
    }
    .dashboard-menu{
        padding:12px;
        border-radius:16px;
    }
    .dashboard-menu li{
        padding:14px 12px;
        font-size:15px;
        margin-bottom:6px;
    }
    .stat-card{
        padding:20px 16px;
        border-radius:16px;
    }
    .stat-card h2{
        font-size:30px;
        margin-top:16px;
    }
    .stat-card p{
        font-size:14px;
    }
}