/* Show sub-menu when parent has 'open' class */
#side-nav ul li.open > .sub-menu {
    display: block;
}

.sales-filter-bar{
    display:flex;
    gap:10px;
    padding:10px;
    flex-wrap:wrap;
}

.sales-summary{
    display:flex;
    justify-content:space-between;
    background:#1565c0;
    color:#fff;
    padding:10px;
    border-radius:10px;
    margin:10px;
}
#sales-orders-content{
    display:flex;
    flex-direction:column; /* ⭐ main fix */
    gap:10px;
    padding:10px;
}

.sale-block{
    background:#fff;
    width:100%; /* ⭐ full width */
    padding:12px;
    border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sale-avatar{
    background:#1565c0;
    color:#fff;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    margin-right:10px;
}

.sale-info{
    display:flex;
    flex-direction:column;
}

.sale-info h3{
    margin:0;
    font-size:14px;
}

.sale-info p{
    margin:2px 0;
    font-size:12px;
    color:#555;
}

.sale-view{
    cursor:pointer;
    font-size:20px;
}
/* Order Modal Popup */
.sale-order-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.5);
    z-index: 9999;

    display: flex;
    justify-content: center;

    padding: 20px;

    overflow-y: auto; /* 🔥 important */
}

.sale-order-modal {
    background:#fff;
    padding:20px;
    border-radius:12px;
    max-width:400px;
    width:90%;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
    position:relative;
    font-family:Arial, sans-serif;
max-height: 90vh;   /* 🔥 important */
    overflow-y: auto;  
    
}

.sale-order-modal h3 {
    margin:0 0 10px 0;
    display:flex;
    align-items:center;
    gap:8px;
}

.sale-order-modal h5::before {
    content: "👤";
}

.sale-order-modal p {
    margin:4px 0;
    font-size:14px;
    color:#555;
}

.sale-order-modal hr {
    border:0;
    border-top:1px solid #eee;
    margin:10px 0;
}
/* =========================
   ORDER STATUS FIELD
========================= */

.statusField{
    margin:15px 0;
}

.statusField label{
    display:block;
    margin-bottom:6px;

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

    color:#444;
}

.statusField select{

    width:100%;
    height:42px;

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

    padding:0 12px;

    background:#fff;

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

    outline:none;

    cursor:pointer;

    transition:.25s;
}

.statusField select:focus{

    border-color:#ff7a00;

    box-shadow:
    0 0 0 3px rgba(255,122,0,.15);
}
/* =========================
   ORDER STATUS FIELD
========================= */

.statusField{
    margin:18px 0 10px;
}

.statusField label{
    display:block;

    font-size:13px;
    font-weight:700;

    color:#444;

    margin-bottom:8px;
}

.statusField select{

    width:100%;
    height:46px;

    border:1px solid #e4e4e4;
    border-radius:14px;

    padding:0 14px;

    background:#fff;

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

    color:#333;

    outline:none;

    transition:all .25s ease;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.04);
}

.statusField select:focus{

    border-color:#ff7a00;

    box-shadow:
        0 0 0 4px rgba(255,122,0,0.12);
}

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

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

    padding:5px 12px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;

    text-transform:capitalize;
}

/* Pending */
.orderBadge.pending{
    background:#fff3cd;
    color:#856404;
}

/* Confirmed */
.orderBadge.confirmed{
    background:#d4edda;
    color:#155724;
}

/* Processing */
.orderBadge.processing{
    background:#d1ecf1;
    color:#0c5460;
}

/* Delivered */
.orderBadge.delivered{
    background:#d4f8e8;
    color:#0f7a4b;
}

/* Cancelled */
.orderBadge.cancelled{
    background:#ffe1e1;
    color:#d10000;
}

/* =========================
   CANCELLED BOX
========================= */

.cancelledOrderBox{

    margin:15px 0;

    padding:14px;

    border-radius:14px;

    background:#fff0f0;

    color:#d10000;

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

    text-align:center;

    border:1px solid #ffd2d2;
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:480px){

    .msoSummaryWrap{

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

    .msoCard{

        padding:7px 3px;
    }

    .msoCard span{

        font-size:14px;
    }

    .msoCard small{

        font-size:9px;
    }

    .sale-order-modal{

        max-width:100%;
    }
}

/*================================Old steup all css 
=============================*/