/* ==========================
   OWNER SHOP SIDEBAR
========================== */


.shop-layout{

    display:flex;

    min-height:calc(100vh - 70px);

}


/* Sidebar */

.shop-sidebar{

    width:210px;

    flex-shrink:0;

    background:var(--card-color);

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

    padding:20px 15px;

    transition:.3s;

}



/* Title */

.shop-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:18px;

    font-weight:700;

    color:var(--text-color);

    padding:15px;

    margin-bottom:10px;

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

}



/* Menu */

.shop-menu-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 15px;

    margin-bottom:8px;

    border-radius:12px;

    text-decoration:none;

    color:var(--text-color);

    font-weight:500;

    transition:.2s;

}



.shop-menu-item:hover{

    background:rgba(37,99,235,.1);

    color:#2563eb;

}



/* Active */

.shop-menu-item.active{

    background:#2563eb;

    color:white;

    box-shadow:

    0 5px 15px rgba(37,99,235,.3);

}



/* Content */

.shop-content-area{

    flex:1;

    padding:30px;

    background:var(--body-color);

}

@media(max-width:768px){


.shop-layout{

    flex-direction:column;

}



.shop-sidebar{

    width:100%;

}



.shop-menu-item{

    display:inline-flex;

}


}


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


.sidebar-toggle{

    width:32px;

    height:32px;

    border:none;

    border-radius:8px;

    background:#2563eb;

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

}



.shop-sidebar{

    overflow:hidden;

}



/* hide */

.shop-layout.sidebar-hide 
.shop-sidebar{

    width:65px;

}



.shop-layout.sidebar-hide 
.shop-title{

    font-size:0;

    display:flex;

    justify-content:center;

}



.shop-layout.sidebar-hide 
.shop-menu-item{

    justify-content:center;

    padding-left:0;

    padding-right:0;

}



.shop-layout.sidebar-hide 
.shop-menu-item{

    font-size:0;

}



.shop-layout.sidebar-hide 
.shop-menu-item::first-letter{

    font-size:20px;

}


/* =====================
   COLLAPSE TITLE CENTER
===================== */


.shop-layout.sidebar-hide .shop-title{

    justify-content:center;

    padding-left:0;

    padding-right:0;

}


/* ปุ่ม ☰ ตอนซ่อน */

.shop-layout.sidebar-hide .sidebar-toggle{

    margin:0 auto;

}


/* =====================
   SHOP DASHBOARD
===================== */


.shop-dashboard{

    padding:10px;

}



.dashboard-header h2{

    color:var(--text-color);

    font-weight:700;

}



.dashboard-header p{

    color:#6b7280;

}




.dashboard-summary{

    display:grid;

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

    gap:20px;

    margin:25px 0;

}



.summary-card{

    background:var(--card-color);

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

    border-radius:16px;

    padding:25px;

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

}



.summary-card h5{

    color:var(--text-color);

}



.summary-card h2{

    margin-top:15px;

    color:#2563eb;

    font-size:32px;

}




.dashboard-box{

    background:var(--card-color);

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

    border-radius:16px;

    padding:25px;

}



.dashboard-box h4{

    margin-bottom:25px;

}



.shop-info-grid{

    display:grid;

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

    gap:20px;

}



.shop-info-grid div{

    background:var(--body-color);

    padding:20px;

    border-radius:12px;

}



.shop-info-grid span{

    display:block;

    color:#6b7280;

    margin-bottom:8px;

}



.shop-info-grid b{

    color:var(--text-color);

}



.status-active{

    background:#16a34a;

    color:white !important;

    display:inline-block !important;

    padding:5px 12px;

    border-radius:20px;

}



.status-disable{

    background:#dc2626;

    color:white !important;

    display:inline-block !important;

    padding:5px 12px;

    border-radius:20px;

}



@media(max-width:900px){

.dashboard-summary,
.shop-info-grid{

    grid-template-columns:1fr;

}

}


.shop-product-status {

    display:grid;

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

    gap:10px;

    margin-top:15px;

}



.product-status-btn {

    padding:12px;

    border-radius:16px;

    text-align:center;

    text-decoration:none;

    display:flex;

    flex-direction:column;

    gap:4px;

    font-weight:700;

    transition:.2s;
    

}



.product-status-btn b {

    font-size:22px;

}



.product-status-btn:hover {

    transform:translateY(-3px);

}



/* Available */

.product-status-btn.available {

    background:
    rgba(25,135,84,.15);

    color:
    #198754;

}



/* Reserved */

.product-status-btn.reserved {

    background:
    rgba(255,193,7,.18);

    color:
    #b58100;

}



/* Sold */

.product-status-btn.sold {

    background:
    rgba(220,53,69,.15);

    color:
    #dc3545;

}


.shop-sales-card {

    margin-top:12px;

    padding:14px;

    border-radius:16px;

    background:
    rgba(13,110,253,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-weight:700;

}


.shop-sales-card b {

    font-size:20px;

}


.shop-stat-row {

    display:grid;

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

    gap:10px;

}


.stat-box {

    padding:10px;

    border-radius:14px;

    text-align:center;

    background:
    var(--bs-tertiary-bg);

}


.stat-box span {

    display:block;

    font-size:13px;

    opacity:.8;

}


.stat-box b {

    font-size:20px;

}



.sales-summary {

    margin-top:6px;

    padding:12px;

    border-radius:14px;

    background:rgba(128,128,128,.12);

    color:var(--bs-body-color);

    text-align:center;

    font-weight:700;

}


.sales-summary b {

    font-size:20px;

    color:var(--bs-body-color);

}

.dark-mode .sales-summary {

    color:white !important;

}


.dark-mode .sales-summary b {

    color:white !important;

}


.shop-action-row {

    display:grid;

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

    gap:6px;

    margin-top:-16px;

}


.shop-action-btn {

    margin-top:6px;

    padding:12px;

    border-radius:14px;

    background:
    rgba(128,128,128,.12);

    color:
    var(--bs-body-color);

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-weight:700;

    transition:.2s;

}


/* Dark Mode */

.dark-mode .shop-action-btn {

    color:white !important;

}


.dark-mode .shop-action-btn span {

    color:white !important;

}


.shop-action-btn:hover {

    transform:translateY(-2px);

}


.shop-action-btn.order {

    border:1px solid rgba(13,110,253,.3);

}


.shop-action-btn.setting {

    border:1px solid rgba(128,128,128,.3);

}


.shop-action-btn.product {

    border:1px solid rgba(25,135,84,.3);

}


.shop-action-btn.pricing {

    border:1px solid rgba(255, 147, 7, 0.4);

}


.shop-product-status {
    margin-bottom:0px;
}


.sales-summary {
    margin-top:10px;
    margin-bottom:24px;
}


.stat-box.waiting {

    margin-top:-10px;

    background:
    rgba(128,128,128,.12);

    color:
    var(--bs-body-color);

}

.stat-box.waiting2 {

    margin-top:10px;

    background:
    rgba(128,128,128,.12);

    color:
    var(--bs-body-color);

}


.dark-mode .stat-box.waiting span {

    color:white !important;

}

.dark-mode .stat-box.waiting {

    color:rgb(255, 0, 0);

}

.dark-mode .stat-box.waiting2 span {

    color:white !important;

}

.dark-mode .stat-box.waiting2 {

    color:rgb(255, 0, 0);

}


.stat-box.waiting,
.stat-box.waiting2 {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}