@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
    --bg: #070913;
    --surface: rgba(18, 24, 45, .9);
    --surface-strong: #151c33;
    --surface-muted: #202942;
    --line: rgba(161, 184, 255, .14);
    --line-strong: rgba(90, 117, 255, .42);
    --text: #f4f7ff;
    --text-muted: #9ea9c4;
    --primary: #7c5cff;
    --primary-bright: #9b84ff;
    --cyan: #37d5ff;
    --green: #3de49d;
    --red: #ff5b7f;
    --yellow: #ffc857;
    --shadow: 0 24px 60px rgba(0, 0, 0, .32);
    --radius: 16px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body.app-body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    font-family: "Noto Sans Thai", "Segoe UI", sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 9% 5%, rgba(55,213,255,.10), transparent 23rem),
        radial-gradient(circle at 96% 12%, rgba(124,92,255,.15), transparent 29rem),
        linear-gradient(145deg, #070913 0%, #0a0e1c 52%, #070913 100%);
}
body.app-body::before {
    position: fixed; z-index: -1; inset: 0; content: ""; opacity: .28; pointer-events: none;
    background-image: linear-gradient(rgba(149,170,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(149,170,255,.035) 1px, transparent 1px);
    background-size: 32px 32px; mask-image: linear-gradient(to bottom, black, transparent 78%);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #a8eeff; }
h1, h2, h3, h4, h5, h6, .brand-name, .top-btn, .sidebar-item, button { font-family: "Chakra Petch", "Noto Sans Thai", sans-serif; }
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; }
p, small, .text-muted, .muted { color: var(--text-muted) !important; }

/* App shell */
.topbar {
    position: sticky; z-index: 1040; top: 0; min-height: 70px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 28px;
    border-bottom: 1px solid var(--line); background: rgba(7,9,19,.85); box-shadow: 0 10px 28px rgba(0,0,0,.16); backdrop-filter: blur(18px);
}
.topbar-brand, .topbar-actions, .user-box { display: flex; align-items: center; }
.topbar-brand { gap: 11px; min-width: 0; }
.brand-icon {
    display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden;
    border: 1px solid rgba(55,213,255,.55); border-radius: 13px; background: linear-gradient(135deg, #172449, #1f1643); box-shadow: 0 0 22px rgba(55,213,255,.16);
}
.brand-icon img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; line-height: 1.05; }
.brand-sub { color: var(--text-muted); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.topbar-actions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.top-btn, .theme-toggle, .user-box {
    min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); color: var(--text); font-size: .82rem; font-weight: 600; transition: .2s ease;
}
.theme-toggle { width: 38px; padding: 0; cursor: pointer; }
.top-btn:hover, .theme-toggle:hover, .user-box:hover { transform: translateY(-1px); border-color: var(--line-strong); background: rgba(124,92,255,.16); color: #fff; }
.top-btn.danger { color: #ffd3dc; border-color: rgba(255,91,127,.25); }
.top-btn.danger:hover { background: rgba(255,91,127,.16); border-color: rgba(255,91,127,.55); }
.role-badge { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(55,213,255,.08); color: #d6f8ff; font-size: .73rem; font-weight: 700; }
.role-admin { color: #ffe4a6; background: rgba(255,200,87,.1); }
.role-owner { color: #dcd2ff; background: rgba(124,92,255,.12); }
.role-staff { color: #c7ffd9; background: rgba(61,228,157,.1); }

.layout { display: flex; min-height: calc(100vh - 70px); }
.sidebar {
    width: 252px; flex: 0 0 252px; min-height: calc(100vh - 70px); padding: 14px 10px;
    border-right: 1px solid var(--line); background: rgba(8,11,23,.74); transition: width .25s ease, flex-basis .25s ease;
}
.shop-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 14px; }
.shop-sidebar-title { color: var(--text-muted); font-family: "Chakra Petch", sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-toggle { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; }
.mobile-sidebar-toggle {
    display: none;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: var(--text);
    font-size: 1.15rem;
    cursor: pointer;
}
.mobile-sidebar-toggle:hover {
    border-color: var(--line-strong);
    background: rgba(124,92,255,.16);
    color: #fff;
}
.sidebar-overlay {
    display: none;
}
.sidebar-item {
    position: relative; display: flex; align-items: center; gap: 12px; margin: 3px 0; padding: 11px 12px; overflow: hidden;
    border: 1px solid transparent; border-radius: 11px; color: var(--text-muted); font-size: .9rem; font-weight: 600; white-space: nowrap; transition: .2s ease;
}
.sidebar-item:hover { border-color: var(--line); background: rgba(255,255,255,.04); color: var(--text); }
.sidebar-item.active { border-color: rgba(124,92,255,.32); background: linear-gradient(90deg, rgba(124,92,255,.28), rgba(55,213,255,.07)); color: #fff; }
.sidebar-item.active::before { position: absolute; left: 0; width: 3px; height: 20px; border-radius: 0 4px 4px 0; background: var(--cyan); content: ""; box-shadow: 0 0 12px var(--cyan); }
.menu-icon { display: grid; width: 21px; flex: 0 0 21px; place-items: center; font-size: 1rem; }
.sidebar.collapsed { width: 62px; flex-basis: 62px; }
.sidebar.collapsed .shop-sidebar-title, .sidebar.collapsed .menu-text { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: 11px 8px; }
.sidebar.collapsed .shop-sidebar-header { justify-content: center; }

.main-content { width: min(100%, 1640px); flex: 1; min-width: 0; margin: 0 auto; padding: 28px clamp(16px,3vw,44px) 48px; }
.main-content > .container { max-width: 1400px; }

/* Shared interface components */
.card, .dashboard-box, .profile-card, .detail-card, .buy-confirm-card, .summary-card, .setting-card, .settings-card, .order-card, .product-box, .action-result {
    border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow);
}
.card-header, .modal-header, .modal-footer { border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; color: var(--text); }
.card-body, .modal-body { color: var(--text); }
.btn, .btn-game-primary, .btn-game-success, .admin-action-btn, .setting-btn, .staff-add-btn, .enter-shop-btn, .product-search-btn, .product-clear-btn, .back-order-btn {
    border-radius: 10px; font-weight: 700; transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}
.btn:hover, .btn-game-primary:hover, .btn-game-success:hover, .admin-action-btn:hover, .setting-btn:hover, .staff-add-btn:hover, .enter-shop-btn:hover, .product-search-btn:hover, .product-clear-btn:hover, .back-order-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn-primary, .btn-game-primary, .admin-action-btn, .staff-add-btn { border: 1px solid #8870ff !important; background: linear-gradient(135deg,#7252ec,#5840cf) !important; color: #fff !important; }
.btn-success, .btn-game-success, .btn-save { border: 1px solid #28bd7c !important; background: linear-gradient(135deg,#25b978,#17865b) !important; color: #fff !important; }
.btn-secondary, .btn-outline-secondary { border-color: var(--line-strong) !important; background: rgba(255,255,255,.055) !important; color: var(--text) !important; }
.btn-danger { border-color: #e94a6c !important; background: linear-gradient(135deg,#e84767,#b92f4d) !important; color: #fff !important; }
.btn-warning { border-color: #df9e23 !important; background: linear-gradient(135deg,#efb442,#c58413) !important; color: #1c1604 !important; }
.btn-outline-primary { border-color: rgba(124,92,255,.55) !important; color: #cabfff !important; }

label, .form-label { color: #cbd4ed; font-weight: 600; }
.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), textarea, select, .setting-select, .staff-select {
    min-height: 42px; border: 1px solid var(--line) !important; border-radius: 10px !important; background-color: rgba(6,9,20,.72) !important; color: var(--text) !important; box-shadow: none !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #72809f !important; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { border-color: var(--primary-bright) !important; box-shadow: 0 0 0 .22rem rgba(124,92,255,.16) !important; }
select option { background: #11182b; color: var(--text); }
.input-group-text { border-color: var(--line) !important; background: var(--surface-muted) !important; color: var(--text-muted) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); --bs-table-striped-bg: rgba(255,255,255,.025); --bs-table-hover-bg: rgba(124,92,255,.08); margin-bottom: 0; color: var(--text); }
.table > :not(caption) > * > * { padding: .82rem 1rem; border-bottom-color: var(--line); vertical-align: middle; }
.table thead th, .table > tbody > tr:first-child > th { border-bottom-color: var(--line-strong); background: rgba(22,29,53,.74); color: #dce5ff; font-family: "Chakra Petch", sans-serif; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.table-responsive, .table-responsive-mobile { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(4,7,16,.35); }
.badge { padding: .42em .65em; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; }
.pagination { --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--line); --bs-pagination-color: #c9d5ff; --bs-pagination-hover-bg: rgba(124,92,255,.2); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: var(--line-strong); --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); }
.alert { border-radius: 12px; }
.modal-content { border: 1px solid var(--line-strong); border-radius: 16px; background: #11182c; color: var(--text); box-shadow: var(--shadow); }
.btn-close { filter: invert(1); }
#pageLoading { position: fixed; z-index: 2000; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5,7,15,.68); backdrop-filter: blur(5px); }
.loading-box { display: grid; min-width: 150px; place-items: center; gap: 10px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 16px; background: #121a30; color: var(--text); box-shadow: var(--shadow); }
.spinner { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================
   Light Mode
   ========================= */
body.app-body:not(.dark-mode) {
    --bg: #f4f7fb;
    --surface: rgba(255,255,255,.92);
    --surface-strong: #ffffff;
    --surface-muted: #edf2f8;
    --line: rgba(24, 39, 75, .12);
    --line-strong: rgba(93, 70, 210, .30);
    --text: #182033;
    --text-muted: #667085;
    --primary: #6846e8;
    --primary-bright: #7257ea;
    --cyan: #087f9f;
    --green: #15835b;
    --red: #d63f61;
    --yellow: #a96b00;
    --shadow: 0 18px 45px rgba(31, 45, 76, .12);
    background:
        radial-gradient(circle at 9% 5%, rgba(55,213,255,.10), transparent 23rem),
        radial-gradient(circle at 96% 12%, rgba(124,92,255,.10), transparent 29rem),
        linear-gradient(145deg, #f7f9fc 0%, #eef3f9 52%, #f8fafc 100%);
}

body.app-body:not(.dark-mode)::before {
    opacity: .45;
    background-image:
        linear-gradient(rgba(65, 84, 120, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 84, 120, .045) 1px, transparent 1px);
}

body.app-body:not(.dark-mode) a {
    color: #5c43d8;
}

body.app-body:not(.dark-mode) a:hover {
    color: #4329b7;
}

body.app-body:not(.dark-mode) .topbar {
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 24px rgba(31,45,76,.08);
}

body.app-body:not(.dark-mode) .brand-icon {
    background: linear-gradient(135deg, #eef6ff, #f1edff);
    box-shadow: 0 0 22px rgba(55,213,255,.12);
}

body.app-body:not(.dark-mode) .brand-name {
    color: #172033;
}

body.app-body:not(.dark-mode) .top-btn,
body.app-body:not(.dark-mode) .theme-toggle,
body.app-body:not(.dark-mode) .user-box,
body.app-body:not(.dark-mode) .sidebar-toggle,
body.app-body:not(.dark-mode) .mobile-sidebar-toggle {
    background: rgba(255,255,255,.78);
    color: var(--text);
}

body.app-body:not(.dark-mode) .top-btn:hover,
body.app-body:not(.dark-mode) .theme-toggle:hover,
body.app-body:not(.dark-mode) .user-box:hover,
body.app-body:not(.dark-mode) .sidebar-toggle:hover,
body.app-body:not(.dark-mode) .mobile-sidebar-toggle:hover {
    background: rgba(104,70,232,.09);
    color: #2e225f;
}

body.app-body:not(.dark-mode) .top-btn.danger {
    color: #a92345;
    border-color: rgba(214,63,97,.22);
}

body.app-body:not(.dark-mode) .top-btn.danger:hover {
    background: rgba(214,63,97,.08);
    color: #8f1d3b;
}

body.app-body:not(.dark-mode) .role-badge {
    color: #245c70;
    background: rgba(8,127,159,.08);
}

body.app-body:not(.dark-mode) .role-admin {
    color: #8a5a00;
    background: rgba(255,200,87,.18);
}

body.app-body:not(.dark-mode) .role-owner {
    color: #5b43a7;
    background: rgba(124,92,255,.11);
}

body.app-body:not(.dark-mode) .role-staff {
    color: #176d4f;
    background: rgba(61,228,157,.12);
}

body.app-body:not(.dark-mode) .sidebar {
    background: rgba(255,255,255,.78);
    box-shadow: 8px 0 28px rgba(31,45,76,.05);
}

body.app-body:not(.dark-mode) .sidebar-item:hover {
    background: rgba(104,70,232,.05);
    color: var(--text);
}

body.app-body:not(.dark-mode) .sidebar-item.active {
    background: linear-gradient(90deg, rgba(124,92,255,.13), rgba(8,127,159,.06));
    color: #271a66;
    border-color: rgba(104,70,232,.20);
}

body.app-body:not(.dark-mode) .card-header,
body.app-body:not(.dark-mode) .modal-header,
body.app-body:not(.dark-mode) .modal-footer {
    background: rgba(248,250,252,.82) !important;
}

body.app-body:not(.dark-mode) .form-control,
body.app-body:not(.dark-mode) .form-select,
body.app-body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]),
body.app-body:not(.dark-mode) textarea,
body.app-body:not(.dark-mode) select,
body.app-body:not(.dark-mode) .setting-select,
body.app-body:not(.dark-mode) .staff-select {
    background-color: #fff !important;
    color: var(--text) !important;
}

body.app-body:not(.dark-mode) .form-control::placeholder,
body.app-body:not(.dark-mode) input::placeholder,
body.app-body:not(.dark-mode) textarea::placeholder {
    color: #98a2b3 !important;
}

body.app-body:not(.dark-mode) select option {
    background: #fff;
    color: var(--text);
}

body.app-body:not(.dark-mode) label,
body.app-body:not(.dark-mode) .form-label {
    color: #344054;
}

body.app-body:not(.dark-mode) .input-group-text {
    background: #edf2f8 !important;
    color: #667085 !important;
}

body.app-body:not(.dark-mode) .table {
    --bs-table-striped-bg: rgba(31,45,76,.022);
    --bs-table-hover-bg: rgba(104,70,232,.055);
}

body.app-body:not(.dark-mode) .table thead th,
body.app-body:not(.dark-mode) .table > tbody > tr:first-child > th {
    background: #f0f3f8;
    color: #344054;
}

body.app-body:not(.dark-mode) .table-responsive,
body.app-body:not(.dark-mode) .table-responsive-mobile {
    background: rgba(255,255,255,.68);
}

body.app-body:not(.dark-mode) .modal-content {
    background: #fff;
    color: var(--text);
}

body.app-body:not(.dark-mode) .btn-close {
    filter: none;
}

body.app-body:not(.dark-mode) #pageLoading {
    background: rgba(239,243,249,.70);
}

body.app-body:not(.dark-mode) .loading-box {
    background: #fff;
    color: var(--text);
}

body.app-body:not(.dark-mode) .spinner {
    border-color: rgba(24,32,51,.13);
    border-top-color: var(--primary);
}

/* Light mode keeps primary action buttons readable */
body.app-body:not(.dark-mode) .btn-outline-primary {
    border-color: rgba(104,70,232,.38) !important;
    color: #5a3acb !important;
}

body.app-body:not(.dark-mode) .pagination {
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--line);
    --bs-pagination-color: #5a6590;
    --bs-pagination-hover-bg: rgba(104,70,232,.08);
    --bs-pagination-hover-color: #35227f;
    --bs-pagination-hover-border-color: var(--line-strong);
}

@media (max-width: 900px) {
    .topbar {
        padding: 10px 16px;
    }

    .topbar-actions {
        gap: 6px;
    }

    .user-box,
    .role-badge {
        display: none;
    }

    .mobile-sidebar-toggle {
        display: inline-flex;
        position: relative;
        z-index: 1;
    }

    .sidebar {
        position: fixed;
        z-index: 1100;
        top: 70px;
        bottom: 0;
        left: 0;
        width: 228px;
        flex: 0 0 228px;
        min-height: 0;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 18px 0 50px rgba(0,0,0,.35);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Mobile uses the full menu; collapsed is desktop-only. */
    .sidebar.mobile-open .shop-sidebar-title,
    .sidebar.mobile-open .menu-text {
        display: block;
    }

    .sidebar.mobile-open .sidebar-item {
        justify-content: flex-start;
        padding: 11px 12px;
    }

    .sidebar.mobile-open .shop-sidebar-header {
        justify-content: space-between;
    }

    .sidebar.collapsed {
        width: 228px;
        flex-basis: 228px;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        z-index: 1090;
        top: 70px;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.52);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s ease;
    }

    body.sidebar-mobile-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.sidebar-mobile-open {
        overflow: hidden;
    }

    .main-content {
        width: 100%;
        padding: 22px 16px 36px;
    }
}

@media (max-width: 560px) {
    .topbar {
        min-height: 62px;
    }

    .brand-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .brand-sub {
        display: none;
    }

    .top-btn {
        min-height: 34px;
        padding: 6px 9px;
        font-size: .75rem;
    }

    .mobile-sidebar-toggle {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 1.05rem;
    }

    .sidebar {
        top: 62px;
        width: 250px;
    }

    .sidebar.collapsed {
        width: 250px;
        flex-basis: 250px;
    }

    .sidebar-overlay {
        top: 62px;
    }

    .main-content {
        width: 100%;
        padding: 18px 12px 28px;
    }

    .table > :not(caption) > * > * {
        padding: .72rem;
    }
}


/* =========================================================
   Mobile Sidebar
   ซ่อนปุ่ม Sidebar แบบ Desktop บนมือถือ
   ========================================================= */

@media (max-width: 900px) {

    /* ปุ่มที่อยู่ใน Sidebar ไม่ให้แสดงบนมือถือ */
    #sidebarToggle {
        display: none !important;
    }

    /* ใช้เฉพาะปุ่มบน Topbar */
    #mobileSidebarToggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

}