:root {


    --bg-color:#f8fafc;

    --card-color:white;

    --text-color:#111827;

    --border-color:#e5e7eb;


}

body.dark-mode {


    --bg-color:#020617;

    --card-color:#111827;

    --text-color:#f8fafc;

    --border-color:#334155;


}

body {


    background:
    var(--bg-color);


    color:
    var(--text-color);


    transition:.3s;


}

/* Navbar */

.navbar {

    background:
    var(--card-color) !important;


    color:
    var(--text-color);

    transition:.3s;

}


.navbar .navbar-brand {

    color:
    var(--text-color) !important;

}


.navbar .text-light {

    color:
    var(--text-color) !important;

}

:root {

    --table-header:#2563eb;

}


body.dark-mode {


    --table-header:#1e293b;

}

:root {

    --hover-color:#e2e8f0;

}


body.dark-mode {


    --hover-color:#1e293b;


}

/* =========================
   TABLE THEME FIX
========================= */


.game-product-table,
.game-product-table tbody,
.game-product-table tr,
.game-product-table td {


    background-color:
    var(--card-color) !important;


    color:
    var(--text-color) !important;


}




body.dark-mode .game-product-table td {


    background-color:#111827 !important;

    color:#f8fafc !important;


}



body:not(.dark-mode) .game-product-table td {


    background-color:white !important;

    color:#111827 !important;


}

:root {

    --hover-color:#f1f5f9;

}


body.dark-mode {


    --hover-color:#1e293b;


}

.theme-toggle{

    width:42px;

    height:42px;

    border-radius:12px;

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

    background:var(--card-color);

    color:var(--text-color);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:20px;

    transition:.2s;

}


.theme-toggle:hover{

    transform:translateY(-2px);

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

}


.theme-icon{

    line-height:1;

}

/* =========================
   PAGE LOADING
========================= */

#pageLoading{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.35);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;

}


.loading-box{

    background:var(--card-color);

    color:var(--text-color);

    padding:22px 35px;

    border-radius:15px;

    text-align:center;

    font-weight:600;

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

}



.spinner{

    width:35px;

    height:35px;

    margin:0 auto 12px;

    border:4px solid #ddd;

    border-top-color:#333;

    border-radius:50%;

    animation:spin .8s linear infinite;

}



@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* =========================
   NAVBAR BUTTON FIX
========================= */


.navbar .btn-outline-light{

    color:var(--text-color);

    border-color:var(--border-color);

}



.navbar .btn-outline-light:hover{

    background:var(--text-color);

    color:var(--card-color);

}



/* Admin button */

.navbar .btn-admin{

    background:#2563eb;

    color:white;

    border:none;

}



.navbar .btn-admin:hover{

    background:#1d4ed8;

    color:white;

}


/* =========================
   NAVBAR USER BUTTON
========================= */


.navbar-user{

    color:var(--text-color);

    font-weight:600;

}



/* Admin */

.btn-admin{

    background:#2563eb;

    color:white;

    border:none;

}


.btn-admin:hover{

    background:#1d4ed8;

    color:white;

}



/* My Shop */

.btn-shop{

    background:#16a34a;

    color:white;

    border:none;

}


.btn-shop:hover{

    background:#15803d;

    color:white;

}



/* Logout */

.navbar .btn-danger{

    color:white;

}

.layout{

    display:flex;

    min-height:100vh;

}



.sidebar{

    width:230px;

    background:var(--card-color);

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

    padding:20px;

    transition:.3s;

}



.sidebar a{

    display:block;

    padding:12px;

    margin-bottom:8px;


    color:var(--text-color);


    text-decoration:none;

    border-radius:10px;

}






.main-content{

    flex:1;

    padding:25px;

}

.shop-sidebar-title{

    color:var(--text-color);

    font-size:18px;

    font-weight:700;

    padding:15px;

    margin-bottom:0px;


}

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


.sidebar{

    width:200px;

    transition:.3s;

    position:relative;

}



.sidebar.collapsed{

    width:70px;

}

.sidebar.collapsed .shop-sidebar-header{

    justify-content:center;

    padding:0;

}

.sidebar-toggle{

    width:40px;

    height:40px;

    border:none;

    background:#2563eb;

    color:white;

    border-radius:10px;

    cursor:pointer;

    margin:10px;

    font-size:20px;

}







.menu-icon{

    min-width:25px;

    text-align:center;

}



.menu-text{

    white-space:nowrap;

}



.sidebar.collapsed .menu-text{

    display:none;

}




.sidebar.collapsed .sidebar-toggle{

    margin:auto;

}

.shop-sidebar-header{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

}



.shop-sidebar-title{

    flex:1;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-weight:700;

}



.sidebar-toggle{

    flex:0 0 40px;

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:20px;

}

.sidebar.collapsed .shop-sidebar-title{

    display:none;

}


.sidebar-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

}





/* =====================
   TOP BAR
===================== */


.topbar {

    height:70px;

    background:var(--card-color);

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


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 25px;


}



.topbar-brand {


    display:flex;

    align-items:center;

    gap:12px;


}



.brand-icon {


    width:42px;

    height:42px;


    background:white;

    color:#111;


    border-radius:12px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:22px;


}



.brand-name {


    color:var(--text-color);

    font-size:20px;

    font-weight:700;


}



.brand-sub {


    color:#888;

    font-size:12px;


}




.topbar-actions {


    display:flex;

    align-items:center;

    gap:10px;


}




.user-box {


    color:#ddd;

    background:#1b1b1b;


    padding:10px 15px;


    border-radius:12px;


}



.top-btn {


    padding:10px 16px;


    background:#222;


    border:1px solid #333;


    color:white;


    border-radius:10px;


    text-decoration:none;


}



.top-btn:hover {


    background:#333;


}



.top-btn.danger {


    border-color:#555;

}



.theme-toggle {


    width:42px;

    height:42px;


    border-radius:50%;


    background:#222;


    color:white;


    border:1px solid #333;


}

.user-box {

    display:flex;

    align-items:center;

    gap:8px;


    padding:10px 15px;


    border-radius:12px;


    background:#222;


    border:1px solid #333;


    color:white;


    text-decoration:none;


    cursor:pointer;

}



.user-box:hover {

    background:#333;

}


/* =====================
   COLLAPSED SIDEBAR ICON FIX
===================== */


.sidebar.collapsed .sidebar-item {

    width:45px;

    height:45px;

    margin:8px auto;


    padding:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:12px;

}



.sidebar.collapsed .sidebar-item:hover {

    background:#2563eb;

    color:white;

}



/* ให้ emoji/icon อยู่กลาง */

.sidebar.collapsed .sidebar-item::first-letter {

    font-size:22px;

}

.sidebar-toggle{
    width:40px;
    height:40px;
}


.sidebar.collapsed .sidebar-toggle {

    width:45px;

    height:45px;

    margin:8px auto;

    border-radius:12px;

}

/* =====================
   COLLAPSED ICON FIX
===================== */


.sidebar.collapsed .sidebar-item {

    width:45px;

    height:45px;

    margin:8px auto;

    padding:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:12px;

}



.sidebar.collapsed .menu-text {

    display:none;

}



.sidebar.collapsed .menu-icon {

    display:block;

    font-size:22px;

    min-width:auto;

}



.sidebar.collapsed .sidebar-item:hover {

    background:#2563eb;

    color:white;

}

.sidebar.collapsed .sidebar-item {

    width:45px;

    height:45px;

    margin:8px auto;


    padding:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:12px;


    font-size:22px;

}


.sidebar.collapsed .sidebar-item:hover {

    background:#2563eb;

    color:white;

}


.sidebar.collapsed .menu-text {
    display:none;
}


.sidebar.collapsed .sidebar-item {

    width:45px;

    height:45px;

    margin:8px auto;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

}


.sidebar.collapsed .menu-icon {

    font-size:22px;

    display:block;

}


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


/* ปกติ */

.sidebar-item {

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

}



/* icon */

.menu-icon {

    width:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;
    

}



/* ซ่อน */

.sidebar.collapsed .menu-text {

    display:none !important;

}



/* ตอนย่อ */

.sidebar.collapsed .sidebar-item {

    width:45px;

    height:45px;

    margin:10px auto;

    padding:0 !important;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:12px;

}



/* icon กลาง */

.sidebar.collapsed .menu-icon {

    width:auto;

    font-size:22px;

}



/* เอา effect เก่าออก */

.sidebar.collapsed .sidebar-item::first-letter {

    font-size:inherit;

}



/* =========================
   FINAL COLLAPSED SIDEBAR CENTER
========================= */


.sidebar.collapsed {

    width:70px;

}



.sidebar.collapsed .sidebar-item {

    width:45px !important;

    height:45px !important;

    margin:10px auto !important;

    padding:0 !important;


    display:flex !important;

    justify-content:center !important;

    align-items:center !important;


    border-radius:12px;

}



.sidebar.collapsed .menu-icon {

    width:auto !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 !important;


    display:flex !important;

    justify-content:center !important;

    align-items:center !important;


    font-size:22px;

}



.sidebar.collapsed .menu-text {

    display:none !important;

}

/* =========================
   ALIGN COLLAPSED SIDEBAR
========================= */


.sidebar.collapsed {

    width:70px;

    padding:20px 0;

}


/* ปุ่ม ☰ */

.sidebar.collapsed .sidebar-toggle {

    width:45px;

    height:45px;

    margin:10px auto;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* เมนู */

.sidebar.collapsed .sidebar-item {

    width:45px !important;

    height:45px !important;


    margin:10px auto !important;


    padding:0 !important;


    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

}



/* icon */

.sidebar.collapsed .menu-icon {

    width:100% !important;

    height:100% !important;


    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

}

/* =========================
   SIDEBAR FINAL STYLE
========================= */


/* ปุ่ม ☰ */

.sidebar-toggle {

    width:45px !important;

    height:45px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;


    background:transparent;

    color:var(--text-color);


    border:1px solid transparent;

    border-radius:12px;


    margin:10px auto;

    transition:.2s;

}


/* hover ปุ่ม ☰ */

.sidebar-toggle:hover {

    background:#2563eb;

    color:white;

}



/* ตอนย่อ */

.sidebar.collapsed .sidebar-toggle {

    width:45px !important;

    height:45px !important;

    margin:10px auto !important;


    background:transparent;

}



/* hover ตอนย่อ */

.sidebar.collapsed .sidebar-toggle:hover {

    background:#2563eb;

    color:white;

}





/* เมนู sidebar */

.sidebar-item {

    transition:.2s;

}





/* ตอนย่อ */

.sidebar.collapsed .sidebar-item {

    width:45px !important;

    height:45px !important;


    margin:10px auto !important;

    padding:0 !important;


    display:flex !important;

    justify-content:center !important;

    align-items:center !important;


    border-radius:12px;


    background:transparent;

}





/* icon */

.sidebar.collapsed .menu-icon {

    width:100% !important;

    height:100% !important;


    display:flex !important;

    justify-content:center !important;

    align-items:center !important;


    font-size:22px;

}



/* hover icon */

.sidebar.collapsed .sidebar-item:hover {

    background:#2563eb;

    color:white;

}

/* =========================
   SIDEBAR HOVER FINAL
========================= */


/* ปกติไม่โชว์สี */

.sidebar.collapsed .sidebar-item {

    background:transparent !important;

    color:var(--text-color);

}



/* ตอนชี้เม้า */

.sidebar.collapsed .sidebar-item:hover {

    background:#2563eb !important;

    color:white !important;

}



/* icon เปลี่ยนสีตาม */

.sidebar.collapsed .sidebar-item:hover .menu-icon {

    color:white;

}



/* ปุ่ม ☰ */

.sidebar.collapsed .sidebar-toggle {

    background:transparent !important;

}



/* hover ปุ่ม ☰ */

.sidebar.collapsed .sidebar-toggle:hover {

    background:#2563eb !important;

    color:white;

}

/* =========================
   FINAL SIDEBAR SAME STYLE
========================= */


/* ปุ่ม ☰ และเมนู ใช้ขนาดเดียวกัน */

.sidebar-toggle,
.sidebar.collapsed .sidebar-toggle,
.sidebar.collapsed .sidebar-item {

    width:45px !important;

    height:45px !important;

    border-radius:12px !important;

}



/* ปกติไม่มีสี */

.sidebar-toggle,
.sidebar.collapsed .sidebar-toggle {

    background:transparent !important;

    color:var(--text-color) !important;

}



/* hover ปุ่ม ☰ */

.sidebar-toggle:hover,
.sidebar.collapsed .sidebar-toggle:hover {

    background:#2563eb !important;

    color:white !important;

}



/* hover เมนู */

.sidebar.collapsed .sidebar-item:hover {

    background:#2563eb !important;

    color:white !important;

}



/* จัดทุกอย่างตรงแกนเดียว */

.sidebar.collapsed .sidebar-toggle,
.sidebar.collapsed .sidebar-item {

    margin-left:auto !important;

    margin-right:auto !important;


    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

}



/* icon กลาง */

.sidebar.collapsed .menu-icon {

    width:auto !important;

    height:auto !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

}


/* =========================
   SIDEBAR EXPAND FIX
========================= */


/* ตอนเปิด Sidebar */

.sidebar:not(.collapsed) .sidebar-item {

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:flex-start !important;

    gap:12px;

    width:100%;

}



/* icon */

.sidebar:not(.collapsed) .menu-icon {

    width:25px;

    min-width:25px;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* text */

.sidebar:not(.collapsed) .menu-text {

    display:block;

    white-space:nowrap;

}

/* =========================
   SIDEBAR ITEM STYLE
========================= */


/* รวม icon + text เป็นกล่องเดียว */

.sidebar-item {

    display:flex !important;

    align-items:center !important;

    gap:12px;


    border-radius:10px;


    transition:.2s;


    background:transparent;

}



/* hover ตอนเปิด */

.sidebar-item:hover {

    background:#334155 !important;

    color:white !important;

}



/* icon ไม่แยกพื้นหลัง */

.sidebar-item .menu-icon {

    background:transparent;

}



/* text */

.sidebar-item .menu-text {

    background:transparent;

}




/* =========================
   COLLAPSED
========================= */


.sidebar.collapsed .sidebar-item:hover {

    background:#334155 !important;

}



.sidebar.collapsed .sidebar-item {

    width:45px !important;

    height:45px !important;

    padding:0 !important;

}

/* =========================
   SIDEBAR TOGGLE SAME STYLE
========================= */


.sidebar-toggle {

    width:45px !important;

    height:45px !important;


    display:flex !important;

    align-items:center !important;

    justify-content:center !important;


    background:transparent !important;

    color:var(--text-color) !important;


    border:none !important;

    border-radius:10px;


    transition:.2s;

}


/* hover ปุ่ม ☰ */

.sidebar-toggle:hover {

    background:#334155 !important;

    color:white !important;

}


/* ตอน sidebar ย่อ */

.sidebar.collapsed .sidebar-toggle {

    width:45px !important;

    height:45px !important;


    margin:10px auto !important;


    display:flex !important;

    align-items:center !important;

    justify-content:center !important;


    background:transparent !important;

}



/* hover ตอนย่อ */

.sidebar.collapsed .sidebar-toggle:hover {

    background:#334155 !important;

    color:white !important;

}

/* =========================
   SIDEBAR ICON SIZE FIX
========================= */


/* ตอนขยาย ให้ icon เท่าตอนย่อ */

.sidebar:not(.collapsed) .menu-icon {

    width:25px;

    min-width:25px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:22px;

}

.sidebar:not(.collapsed) .sidebar-item {

    gap:14px;

}

/* =========================
   SIDEBAR TEXT SIZE
========================= */

.sidebar:not(.collapsed) .menu-text {

    font-size:16px;

    font-weight:700;

}


.role-badge {

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

}


.role-admin {

    background:#ffc107;

    color:#000;

}


.role-owner {

    background:#0d6efd;

    color:white;

}


.role-staff {

    background:#198754;

    color:white;

}


.role-customer {

    background:#6c757d;

    color:white;

}