/**
 * [ฝั่ง: SC_Portal]
 * File Path: public/css/shop-admin.css
 * Version: 1.2
 * Date: 12 เม.ย. 2569
 *
 * Light Theme สีส้ม สำหรับ SC_Portal Admin Dashboard
 * ใช้คู่กับ Bootstrap 5.3
 *
 * ─── CHANGE LOG ───
 * v1.0 (10 เม.ย. 2569): เวอร์ชันแรก
 * v1.1 (12 เม.ย. 2569): ★ Sidebar เปลี่ยนเป็นสีเข้ม (#2C3E50)
 *                        ★ Hover / Active เมนูเป็นสีส้ม (#F97316)
 *                        ★ พื้นหลัง Main เปลี่ยนเป็นสีขาว (#FFFFFF)
 *                        ★ เพิ่ม Stat Cards สีสัน 8 แบบ (.stat-c1 ถึง .stat-c8)
 *                        ★ เพิ่ม Tooltip สำหรับคำแนะนำ (.bk-tip)
 *                        ★ เพิ่ม Dashboard Filter Buttons (.bk-filter-btn)
 *                        ★ เพิ่ม Dashboard Table (.bk-tbl)
 * v1.2 (12 เม.ย. 2569): ★ แก้ Tooltip ไม่แสดง — เปลี่ยน overflow: hidden → visible
 *                        ★ เพิ่ม min-height ให้ Stat Cards สูงเท่ากันในแถวเดียวกัน
 *                        ★ เพิ่ม z-index tooltip เป็น 9999
 */

/* ═══════════════════════════════════════════ */
/* CSS Variables — สีหลักและตัวแปรกลาง        */
/* ═══════════════════════════════════════════ */
:root {
    /* สีส้มหลัก (Primary) */
    --bk-primary: #F97316;
    /* สีส้มเข้ม (Hover) */
    --bk-primary-dark: #EA580C;
    /* สีส้มอ่อน (Background เบาๆ) */
    --bk-primary-light: #FFF7ED;
    /* สีส้มอ่อนมาก (Subtle) */
    --bk-primary-subtle: #FFEDD5;
    /* สีพื้นหลังหลัก — เปลี่ยนเป็นขาว */
    --bk-bg: #FFFFFF;
    /* สีพื้นหลัง Sidebar — เปลี่ยนเป็นสีเข้ม */
    --bk-sidebar-bg: #2C3E50;
    /* สีข้อความ Sidebar — เปลี่ยนเป็นขาว */
    --bk-sidebar-text: rgba(255, 255, 255, 0.7);
    /* สีข้อความ Sidebar เมื่อ active — เปลี่ยนเป็นขาว */
    --bk-sidebar-active-text: #FFFFFF;
    /* สีพื้นหลัง Sidebar เมื่อ active — เปลี่ยนเป็นส้ม */
    --bk-sidebar-active-bg: #F97316;
    /* สีขอบ Sidebar active — เปลี่ยนเป็นส้ม */
    --bk-sidebar-active-border: #F97316;
    /* ความกว้าง Sidebar */
    --bk-sidebar-width: 260px;
    /* ความสูง Header */
    --bk-header-height: 60px;
    /* สีพื้นหลัง Header */
    --bk-header-bg: #FFFFFF;
    /* สีข้อความหลัก */
    --bk-text: #1E293B;
    /* สีข้อความรอง */
    --bk-text-muted: #64748B;
    /* สีเส้นขอบ */
    --bk-border: #E2E8F0;
    /* สีเงา */
    --bk-shadow: rgba(0, 0, 0, 0.06);
    /* สีเขียว (สำเร็จ) */
    --bk-success: #22C55E;
    /* สีแดง (อันตราย) */
    --bk-danger: #EF4444;
    /* สีฟ้า (ข้อมูล) */
    --bk-info: #3B82F6;
    /* สีเหลือง (เตือน) */
    --bk-warning: #F59E0B;
    /* รัศมีมุมโค้ง */
    --bk-radius: 8px;
    /* รัศมีมุมโค้งใหญ่ */
    --bk-radius-lg: 12px;
    /* ระยะ Transition */
    --bk-transition: 0.2s ease;
}

/* ═══════════════════════════════════════════ */
/* Base Styles                                 */
/* ═══════════════════════════════════════════ */
body {
    /* สีพื้นหลังหลัก (ขาว) */
    background-color: var(--bk-bg);
    /* ฟอนต์หลัก */
    font-family: 'Noto Sans Thai', 'Segoe UI', sans-serif;
    /* สีข้อความหลัก */
    color: var(--bk-text);
    /* ขนาดฟอนต์พื้นฐาน */
    font-size: 14px;
}

/* ═══════════════════════════════════════════ */
/* Login Page                                  */
/* ═══════════════════════════════════════════ */
.login-wrapper {
    /* เต็มหน้าจอ */
    min-height: 100vh;
    /* จัดกลางทั้งแนวตั้งและแนวนอน */
    display: flex;
    /* จัดกลางแนวนอน */
    align-items: center;
    /* จัดกลางแนวตั้ง */
    justify-content: center;
    /* พื้นหลังไล่สีส้มอ่อน */
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
}

.login-card {
    /* ความกว้างเต็มแต่ไม่เกิน 420px */
    width: 100%;
    /* จำกัดความกว้างสูงสุด */
    max-width: 420px;
    /* พื้นหลังขาว */
    background: #FFFFFF;
    /* มุมโค้ง */
    border-radius: var(--bk-radius-lg);
    /* เงา */
    box-shadow: 0 4px 24px rgba(249, 115, 22, 0.12);
    /* ระยะห่างภายใน */
    padding: 40px;
}

.login-logo {
    /* จัดกลาง */
    text-align: center;
    /* ระยะห่างด้านล่าง */
    margin-bottom: 32px;
}

.login-logo h1 {
    /* สีส้มหลัก */
    color: var(--bk-primary);
    /* ตัวหนา */
    font-weight: 700;
    /* ขนาดฟอนต์ */
    font-size: 28px;
    /* ระยะห่างด้านล่าง */
    margin-bottom: 4px;
}

.login-logo p {
    /* สีข้อความรอง */
    color: var(--bk-text-muted);
    /* ขนาดฟอนต์ */
    font-size: 14px;
}

/* ═══════════════════════════════════════════ */
/* Layout — Wrapper หลัก                       */
/* ═══════════════════════════════════════════ */
.admin-wrapper {
    /* ใช้ flex เพื่อวาง sidebar + content คู่กัน */
    display: flex;
    /* เต็มหน้าจอ */
    min-height: 100vh;
}

/* ═══════════════════════════════════════════ */
/* Sidebar — เมนูด้านซ้าย (สีเข้ม)            */
/* ═══════════════════════════════════════════ */
.sidebar {
    /* ความกว้างคงที่ */
    width: var(--bk-sidebar-width);
    /* พื้นหลังสีเข้ม */
    background: var(--bk-sidebar-bg);
    /* ไม่มีเส้นขอบขวา (sidebar สีเข้มไม่ต้อง) */
    border-right: none;
    /* ติดอยู่ด้านซ้ายตลอด */
    position: fixed;
    /* ชิดบน */
    top: 0;
    /* ชิดซ้าย */
    left: 0;
    /* เต็มความสูง */
    height: 100vh;
    /* z-index สูงกว่า content */
    z-index: 1000;
    /* เลื่อนเนื้อหาได้ */
    overflow-y: auto;
    /* transition สำหรับ responsive */
    transition: transform var(--bk-transition);
}

/* ── ซ่อน scrollbar ของ sidebar ── */
.sidebar::-webkit-scrollbar {
    width: 0;
}

.sidebar-brand {
    /* ความสูงเท่ากับ Header */
    height: var(--bk-header-height);
    /* จัดกลางแนวตั้ง */
    display: flex;
    /* จัดกลาง */
    align-items: center;
    /* ระยะห่างซ้าย */
    padding: 0 20px;
    /* เส้นขอบล่างโปร่งใส */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand h2 {
    /* สีส้มหลัก */
    color: var(--bk-primary);
    /* ตัวหนา */
    font-weight: 700;
    /* ขนาดฟอนต์ */
    font-size: 20px;
    /* ไม่มี margin */
    margin: 0;
    /* จัดกลางแนวตั้งกับ icon */
    display: flex;
    /* จัดกลาง */
    align-items: center;
}

.sidebar-nav {
    /* ระยะห่างด้านบน */
    padding: 16px 12px;
}

.sidebar-nav .nav-label {
    /* ขนาดฟอนต์เล็ก */
    font-size: 11px;
    /* ตัวพิมพ์ใหญ่ */
    text-transform: uppercase;
    /* ตัวหนา */
    font-weight: 600;
    /* สีข้อความรอง (ขาวโปร่ง) */
    color: rgba(255, 255, 255, 0.35);
    /* ระยะห่าง */
    padding: 12px 12px 6px;
    /* ระยะห่างตัวอักษร */
    letter-spacing: 0.5px;
}

.sidebar-nav .nav-item {
    /* ระยะห่างด้านล่าง */
    margin-bottom: 2px;
}

.sidebar-nav .nav-link {
    /* สีข้อความ (ขาวโปร่ง) */
    color: var(--bk-sidebar-text);
    /* ขนาดฟอนต์ */
    font-size: 14px;
    /* ระยะห่างภายใน */
    padding: 10px 12px;
    /* มุมโค้ง */
    border-radius: var(--bk-radius);
    /* แสดงเป็น flex */
    display: flex;
    /* จัดกลางแนวตั้ง */
    align-items: center;
    /* ไม่มีขีดเส้นใต้ */
    text-decoration: none;
    /* transition */
    transition: all var(--bk-transition);
    /* เส้นขอบซ้ายโปร่งใส */
    border-left: 3px solid transparent;
}

.sidebar-nav .nav-link:hover {
    /* พื้นหลังส้มเมื่อ hover */
    background-color: var(--bk-sidebar-active-bg);
    /* สีข้อความขาว */
    color: var(--bk-sidebar-active-text);
}

.sidebar-nav .nav-link.active {
    /* พื้นหลังส้ม */
    background-color: var(--bk-sidebar-active-bg);
    /* สีข้อความขาว */
    color: var(--bk-sidebar-active-text);
    /* ตัวหนา */
    font-weight: 600;
    /* เส้นขอบซ้ายขาว (เด่นบนพื้นส้ม) */
    border-left-color: #FFFFFF;
}

.sidebar-nav .nav-link i {
    /* ขนาด icon */
    font-size: 18px;
    /* ความกว้างคงที่ */
    width: 24px;
    /* ระยะห่างขวา */
    margin-right: 10px;
    /* จัดกลาง */
    text-align: center;
}

.sidebar-nav .nav-link .badge {
    /* ดันไปขวาสุด */
    margin-left: auto;
    /* ขนาดฟอนต์ */
    font-size: 11px;
}

/* ── เมนูย่อย (children) — สีเข้ม ── */
.sidebar-nav .nav-children {
    /* ไม่มี padding ซ้าย */
    padding-left: 0;
    /* ไม่มี bullet */
    list-style: none;
}

.sidebar-nav .nav-children .nav-link {
    /* เลื่อนเข้าด้านในกว่าเมนูหลัก */
    padding-left: 46px;
    /* ขนาดฟอนต์เล็กลง */
    font-size: 13px;
    /* สีข้อความเมนูลูก (ขาวจางกว่า) */
    color: rgba(255, 255, 255, 0.55);
}

.sidebar-nav .nav-children .nav-link:hover {
    /* สีข้อความขาวเมื่อ hover */
    color: #FFFFFF;
    /* พื้นหลังส้ม */
    background-color: var(--bk-sidebar-active-bg);
}

.sidebar-nav .nav-children .nav-link.active {
    /* สีข้อความขาวเมื่อ active */
    color: #FFFFFF;
    /* พื้นหลังส้ม */
    background-color: var(--bk-sidebar-active-bg);
}

/* ── ลูกศร chevron ของเมนูหมวด ── */
.sidebar-nav .nav-link .bi-chevron-down {
    /* สีขาวโปร่ง */
    color: rgba(255, 255, 255, 0.4);
    /* transition หมุน */
    transition: transform var(--bk-transition);
}

/* ── หมุนลูกศรเมื่อเปิด ── */
.sidebar-nav .nav-link[aria-expanded="true"] .bi-chevron-down {
    /* หมุน 180 องศา */
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════════ */
/* Header — แถบด้านบน                          */
/* ═══════════════════════════════════════════ */
.admin-header {
    /* ความสูงคงที่ */
    height: var(--bk-header-height);
    /* พื้นหลังขาว */
    background: var(--bk-header-bg);
    /* เส้นขอบล่าง */
    border-bottom: 1px solid var(--bk-border);
    /* จัดกลางแนวตั้ง */
    display: flex;
    /* จัดกลาง */
    align-items: center;
    /* กระจายซ้าย-ขวา */
    justify-content: space-between;
    /* ระยะห่างภายใน */
    padding: 0 24px;
    /* ติดด้านบน */
    position: sticky;
    /* ชิดบน */
    top: 0;
    /* z-index สูง */
    z-index: 900;
    /* เงาเบาๆ */
    box-shadow: 0 1px 3px var(--bk-shadow);
}

.admin-header .header-left {
    /* จัดกลางแนวตั้ง */
    display: flex;
    /* จัดกลาง */
    align-items: center;
    /* ระยะห่าง */
    gap: 12px;
}

.admin-header .header-right {
    /* จัดกลางแนวตั้ง */
    display: flex;
    /* จัดกลาง */
    align-items: center;
    /* ระยะห่าง */
    gap: 16px;
}

/* ── User Avatar ── */
.user-avatar {
    /* ขนาด */
    width: 36px;
    /* ความสูง */
    height: 36px;
    /* วงกลม */
    border-radius: 50%;
    /* พื้นหลังส้มอ่อน */
    background: var(--bk-primary-subtle);
    /* สีส้ม */
    color: var(--bk-primary);
    /* ตัวหนา */
    font-weight: 600;
    /* ขนาดฟอนต์ */
    font-size: 14px;
    /* จัดกลาง */
    display: inline-flex;
    /* จัดกลางแนวตั้ง */
    align-items: center;
    /* จัดกลางแนวนอน */
    justify-content: center;
    /* ระยะห่างขวา */
    margin-right: 8px;
}

/* ── User Dropdown ── */
.user-dropdown .dropdown-toggle {
    /* ไม่มีขีดเส้นใต้ */
    text-decoration: none;
    /* สีข้อความหลัก */
    color: var(--bk-text);
    /* ขนาดฟอนต์ */
    font-size: 14px;
    /* จัดกลางแนวตั้ง */
    display: flex;
    /* จัดกลาง */
    align-items: center;
}

.user-dropdown .dropdown-toggle::after {
    /* ระยะห่างซ้าย */
    margin-left: 6px;
}

/* ═══════════════════════════════════════════ */
/* Content Area — พื้นที่เนื้อหา               */
/* ═══════════════════════════════════════════ */
.admin-content {
    /* เลื่อน content ไม่ให้ทับ sidebar */
    margin-left: var(--bk-sidebar-width);
    /* กินพื้นที่ที่เหลือ */
    flex: 1;
    /* ความกว้างต่ำสุด */
    min-width: 0;
    /* พื้นหลังขาว */
    background: #FFFFFF;
}

.admin-main {
    /* ระยะห่างภายใน */
    padding: 24px;
}

/* ═══════════════════════════════════════════ */
/* Footer                                      */
/* ═══════════════════════════════════════════ */
.admin-footer {
    /* ระยะห่างภายใน */
    padding: 16px 24px;
    /* จัดกลาง */
    text-align: center;
    /* สีข้อความรอง */
    color: var(--bk-text-muted);
    /* ขนาดฟอนต์ */
    font-size: 12px;
    /* เส้นขอบบน */
    border-top: 1px solid var(--bk-border);
    /* พื้นหลังขาว */
    background: #FFFFFF;
}

/* ═══════════════════════════════════════════ */
/* Page Header — หัวข้อหน้า                    */
/* ═══════════════════════════════════════════ */
.page-header {
    /* ระยะห่างด้านล่าง */
    margin-bottom: 24px;
}

.page-header h1 {
    /* ขนาดฟอนต์ */
    font-size: 24px;
    /* ตัวหนา */
    font-weight: 700;
    /* สีข้อความหลัก */
    color: var(--bk-text);
    /* ไม่มี margin */
    margin: 0;
}

.page-header .breadcrumb {
    /* ขนาดฟอนต์ */
    font-size: 13px;
    /* ไม่มี margin */
    margin: 0;
}

/* ═══════════════════════════════════════════ */
/* Stat Cards — การ์ดสถิติ (พื้นขาว)          */
/* ═══════════════════════════════════════════ */
.stat-card {
    /* พื้นหลังขาว */
    background: #FFFFFF;
    /* มุมโค้ง */
    border-radius: var(--bk-radius-lg);
    /* ระยะห่างภายใน */
    padding: 20px;
    /* เส้นขอบ */
    border: 1px solid var(--bk-border);
    /* เงา */
    box-shadow: 0 1px 3px var(--bk-shadow);
    /* transition */
    transition: all var(--bk-transition);
}

.stat-card:hover {
    /* เงาเพิ่มขึ้นเมื่อ hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* เลื่อนขึ้นเล็กน้อย */
    transform: translateY(-2px);
}

.stat-card .stat-icon {
    /* ความกว้าง */
    width: 48px;
    /* ความสูง */
    height: 48px;
    /* มุมโค้ง */
    border-radius: var(--bk-radius);
    /* จัดกลาง */
    display: flex;
    /* จัดกลางแนวตั้ง */
    align-items: center;
    /* จัดกลางแนวนอน */
    justify-content: center;
    /* ขนาด icon */
    font-size: 22px;
}

.stat-card .stat-icon.bg-primary {
    /* พื้นหลังส้มอ่อน */
    background: var(--bk-primary-subtle) !important;
    /* สี icon ส้ม */
    color: var(--bk-primary) !important;
}

.stat-card .stat-icon.bg-success {
    /* พื้นหลังเขียวอ่อน */
    background: #DCFCE7 !important;
    /* สี icon เขียว */
    color: var(--bk-success) !important;
}

.stat-card .stat-icon.bg-info {
    /* พื้นหลังฟ้าอ่อน */
    background: #DBEAFE !important;
    /* สี icon ฟ้า */
    color: var(--bk-info) !important;
}

.stat-card .stat-icon.bg-warning {
    /* พื้นหลังเหลืองอ่อน */
    background: #FEF3C7 !important;
    /* สี icon เหลือง */
    color: var(--bk-warning) !important;
}

.stat-card .stat-icon.bg-danger {
    /* พื้นหลังแดงอ่อน */
    background: #FEE2E2 !important;
    /* สี icon แดง */
    color: var(--bk-danger) !important;
}

.stat-card .stat-value {
    /* ขนาดฟอนต์ใหญ่ */
    font-size: 28px;
    /* ตัวหนา */
    font-weight: 700;
    /* สีข้อความหลัก */
    color: var(--bk-text);
    /* ระยะห่างบน */
    margin-top: 12px;
}

.stat-card .stat-label {
    /* สีข้อความรอง */
    color: var(--bk-text-muted);
    /* ขนาดฟอนต์ */
    font-size: 13px;
    /* ระยะห่างบน */
    margin-top: 4px;
}

/* ═══════════════════════════════════════════ */
/* Stat Cards — สีสัน 8 แบบ (Dashboard ใหม่)  */
/* ═══════════════════════════════════════════ */

/* สีฟ้า — บทสนทนา */
.stat-c1 {
    /* พื้นหลังฟ้า */
    background: #378ADD;
    /* สีตัวอักษรขาว */
    color: #FFFFFF;
    /* มุมโค้ง */
    border-radius: var(--bk-radius-lg);
    /* ระยะห่างภายใน */
    padding: 18px 20px;
    /* ตำแหน่ง relative สำหรับ icon มุมขวา */
    position: relative;
    /* ซ่อนส่วนเกิน */
    overflow: visible;
    /* transition */
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* สีเขียว — ข้อความ */
.stat-c2 {
    background: #1D9E75;
    color: #FFFFFF;
    border-radius: var(--bk-radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: visible;
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* สีม่วง — ลูกค้า */
.stat-c3 {
    background: #534AB7;
    color: #FFFFFF;
    border-radius: var(--bk-radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: visible;
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* สีส้ม — ตอบสำเร็จ */
.stat-c4 {
    background: #F97316;
    color: #FFFFFF;
    border-radius: var(--bk-radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: visible;
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* สีแดง — ส่งต่อพนักงาน */
.stat-c5 {
    background: #E24B4A;
    color: #FFFFFF;
    border-radius: var(--bk-radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: visible;
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* สีเขียวเข้ม — อัตราแก้ไข */
.stat-c6 {
    background: #0F6E56;
    color: #FFFFFF;
    border-radius: var(--bk-radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: visible;
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* สีน้ำเงินเข้ม — เวลาตอบกลับ */
.stat-c7 {
    background: #185FA5;
    color: #FFFFFF;
    border-radius: var(--bk-radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: visible;
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* สีทอง — คะแนนพึงพอใจ */
.stat-c8 {
    background: #BA7517;
    color: #FFFFFF;
    border-radius: var(--bk-radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: visible;
    min-height: 140px;
    transition: all var(--bk-transition);
}

/* ── Hover ยกขึ้นทุกการ์ดสี ── */
.stat-c1:hover,
.stat-c2:hover,
.stat-c3:hover,
.stat-c4:hover,
.stat-c5:hover,
.stat-c6:hover,
.stat-c7:hover,
.stat-c8:hover {
    /* เลื่อนขึ้นเล็กน้อย */
    transform: translateY(-2px);
    /* เงาเพิ่ม */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Label ของการ์ดสี ── */
.stat-c1 .stat-c-label,
.stat-c2 .stat-c-label,
.stat-c3 .stat-c-label,
.stat-c4 .stat-c-label,
.stat-c5 .stat-c-label,
.stat-c6 .stat-c-label,
.stat-c7 .stat-c-label,
.stat-c8 .stat-c-label {
    /* ขนาดฟอนต์ */
    font-size: 12px;
    /* สีขาวโปร่ง */
    color: rgba(255, 255, 255, 0.8);
    /* ระยะห่างด้านล่าง */
    margin-bottom: 6px;
    /* จัดเรียงกับ icon tip */
    display: flex;
    /* จัดกลางแนวตั้ง */
    align-items: center;
    /* ระยะห่าง */
    gap: 4px;
}

/* ── Value ของการ์ดสี ── */
.stat-c1 .stat-c-value,
.stat-c2 .stat-c-value,
.stat-c3 .stat-c-value,
.stat-c4 .stat-c-value,
.stat-c5 .stat-c-value,
.stat-c6 .stat-c-value,
.stat-c7 .stat-c-value,
.stat-c8 .stat-c-value {
    /* ขนาดฟอนต์ใหญ่ */
    font-size: 26px;
    /* ตัวหนา */
    font-weight: 700;
}

/* ── Icon มุมขวาบน ── */
.stat-c-icon {
    /* ตำแหน่ง */
    position: absolute;
    /* มุมขวาบน */
    right: 14px;
    /* ห่างจากบน */
    top: 14px;
    /* ขนาด */
    font-size: 24px;
    /* โปร่งใส */
    opacity: 0.3;
}

/* ── % เปรียบเทียบ ── */
.stat-c-delta {
    /* ขนาดฟอนต์ */
    font-size: 11px;
    /* ระยะห่างบน */
    margin-top: 4px;
    /* สีขาวโปร่ง */
    color: rgba(255, 255, 255, 0.7);
}

/* ═══════════════════════════════════════════ */
/* Tooltip — คำแนะนำเมื่อ hover               */
/* ═══════════════════════════════════════════ */
.bk-tip {
    /* ตำแหน่ง relative สำหรับ popup */
    position: relative;
    /* แสดงเป็น inline-flex */
    display: inline-flex;
    /* จัดกลางแนวตั้ง */
    align-items: center;
    /* เคอร์เซอร์ help */
    cursor: help;
}

.bk-tip-icon {
    /* ขนาด */
    width: 14px;
    /* ความสูง */
    height: 14px;
    /* วงกลม */
    border-radius: 50%;
    /* พื้นหลังขาวโปร่ง */
    background: rgba(255, 255, 255, 0.4);
    /* สีขาว */
    color: #FFFFFF;
    /* ขนาดฟอนต์ */
    font-size: 9px;
    /* จัดกลาง */
    display: flex;
    /* จัดกลางแนวตั้ง */
    align-items: center;
    /* จัดกลางแนวนอน */
    justify-content: center;
    /* ตัวหนา */
    font-weight: 500;
    /* ไม่หดตัว */
    flex-shrink: 0;
}

.bk-tip-box {
    /* ซ่อนไว้ */
    display: none;
    /* ตำแหน่ง absolute */
    position: absolute;
    /* อยู่เหนือ icon */
    bottom: calc(100% + 6px);
    /* จัดกลาง */
    left: 50%;
    /* ขยับกลาง */
    transform: translateX(-50%);
    /* พื้นหลังเข้ม */
    background: #2C3E50;
    /* สีข้อความขาว */
    color: #FFFFFF;
    /* ขนาดฟอนต์ */
    font-size: 12px;
    /* ระยะห่างภายใน */
    padding: 10px 14px;
    /* มุมโค้ง */
    border-radius: var(--bk-radius);
    /* ความกว้าง */
    width: 240px;
    /* ระยะห่างบรรทัด */
    line-height: 1.5;
    /* z-index สูง */
    z-index: 9999;
    /* ชิดซ้าย */
    text-align: left;
    /* เงา */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ── แสดง tooltip เมื่อ hover ── */
.bk-tip:hover .bk-tip-box {
    display: block;
}

/* ── ลูกศรล่างของ tooltip ── */
.bk-tip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2C3E50;
}

/* ═══════════════════════════════════════════ */
/* Dashboard Filter Buttons — ปุ่มกรอง        */
/* ═══════════════════════════════════════════ */
.bk-filter-btn {
    /* ขนาดฟอนต์ */
    font-size: 12px;
    /* ระยะห่างภายใน */
    padding: 6px 14px;
    /* มุมโค้ง */
    border-radius: var(--bk-radius);
    /* เส้นขอบ */
    border: 1px solid var(--bk-border);
    /* พื้นหลังขาว */
    background: #FFFFFF;
    /* สีข้อความรอง */
    color: var(--bk-text-muted);
    /* เคอร์เซอร์ pointer */
    cursor: pointer;
    /* transition */
    transition: all var(--bk-transition);
    /* ไม่มีขีดเส้นใต้ */
    text-decoration: none;
}

.bk-filter-btn:hover {
    /* พื้นหลังเมื่อ hover */
    background: var(--bk-primary-light);
    /* สีข้อความ */
    color: var(--bk-primary);
    /* เส้นขอบ */
    border-color: var(--bk-primary);
}

.bk-filter-btn.active {
    /* พื้นหลังส้ม */
    background: var(--bk-primary);
    /* สีข้อความขาว */
    color: #FFFFFF;
    /* เส้นขอบส้ม */
    border-color: var(--bk-primary);
}

/* ═══════════════════════════════════════════ */
/* Dashboard Section Label — หัวข้อส่วน       */
/* ═══════════════════════════════════════════ */
.bk-section-label {
    /* ขนาดฟอนต์ */
    font-size: 14px;
    /* ตัวหนา */
    font-weight: 600;
    /* สีข้อความ */
    color: var(--bk-text);
    /* ระยะห่าง */
    margin: 24px 0 12px;
    /* ระยะห่างด้านล่าง */
    padding-bottom: 8px;
    /* เส้นขอบล่าง */
    border-bottom: 1px solid var(--bk-border);
    /* จัดเรียงกับ icon */
    display: flex;
    /* จัดกลางแนวตั้ง */
    align-items: center;
    /* ระยะห่าง icon */
    gap: 8px;
}

.bk-section-label i {
    /* สีส้ม */
    color: var(--bk-primary);
    /* ขนาด */
    font-size: 16px;
}

/* ═══════════════════════════════════════════ */
/* Dashboard Table — ตารางแยกระบบ             */
/* ═══════════════════════════════════════════ */
.bk-tbl-wrap {
    /* เส้นขอบ */
    border: 1px solid var(--bk-border);
    /* มุมโค้ง */
    border-radius: var(--bk-radius);
    /* ซ่อนส่วนเกิน */
    overflow: visible;
}

.bk-tbl-scroll {
    /* ความสูงสูงสุด — เลื่อนได้ */
    max-height: 240px;
    /* เลื่อนแนวตั้ง */
    overflow-y: auto;
}

.bk-tbl {
    /* เต็มความกว้าง */
    width: 100%;
    /* ยุบขอบ */
    border-collapse: collapse;
    /* ขนาดฟอนต์ */
    font-size: 13px;
}

.bk-tbl th {
    /* ชิดซ้าย */
    text-align: left;
    /* ตัวหนา */
    font-weight: 600;
    /* สีข้อความรอง */
    color: var(--bk-text-muted);
    /* ระยะห่างภายใน */
    padding: 10px 12px;
    /* ขนาดฟอนต์ */
    font-size: 12px;
    /* พื้นหลัง */
    background: #F8FAFC;
    /* ติดด้านบนเมื่อเลื่อน */
    position: sticky;
    /* ชิดบน */
    top: 0;
    /* z-index */
    z-index: 1;
}

.bk-tbl td {
    /* ระยะห่างภายใน */
    padding: 10px 12px;
    /* เส้นขอบบน */
    border-top: 1px solid var(--bk-border);
    /* สีข้อความ */
    color: var(--bk-text);
}

.bk-tbl tbody tr:hover td {
    /* พื้นหลังเมื่อ hover */
    background: var(--bk-primary-light);
}

/* ═══════════════════════════════════════════ */
/* Dashboard Pills — ป้ายสถานะเล็ก            */
/* ═══════════════════════════════════════════ */
.bk-pill {
    /* ขนาดฟอนต์ */
    font-size: 11px;
    /* ระยะห่างภายใน */
    padding: 3px 10px;
    /* มุมโค้ง */
    border-radius: var(--bk-radius);
    /* ตัวหนา */
    font-weight: 600;
    /* แสดง inline */
    display: inline-block;
}

.bk-pill-green {
    /* พื้นหลังเขียวอ่อน */
    background: #DCFCE7;
    /* สีเขียวเข้ม */
    color: #166534;
}

.bk-pill-red {
    /* พื้นหลังแดงอ่อน */
    background: #FEE2E2;
    /* สีแดงเข้ม */
    color: #991B1B;
}

.bk-pill-gray {
    /* พื้นหลังเทาอ่อน */
    background: #F1F5F9;
    /* สีเทาเข้ม */
    color: #475569;
}

/* ═══════════════════════════════════════════ */
/* Card ทั่วไป                                 */
/* ═══════════════════════════════════════════ */
.bk-card {
    /* พื้นหลังขาว */
    background: #FFFFFF;
    /* มุมโค้ง */
    border-radius: var(--bk-radius-lg);
    /* เส้นขอบ */
    border: 1px solid var(--bk-border);
    /* เงา */
    box-shadow: 0 1px 3px var(--bk-shadow);
    /* ระยะห่างภายใน */
    padding: 24px;
    /* ระยะห่างด้านล่าง */
    margin-bottom: 24px;
}

.bk-card .card-title {
    /* ขนาดฟอนต์ */
    font-size: 16px;
    /* ตัวหนา */
    font-weight: 600;
    /* ระยะห่างด้านล่าง */
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════ */
/* Buttons — ปรับสีส้ม                         */
/* ═══════════════════════════════════════════ */
.btn-primary {
    /* พื้นหลังส้ม */
    background-color: var(--bk-primary) !important;
    /* เส้นขอบส้ม */
    border-color: var(--bk-primary) !important;
    /* สีตัวอักษรขาว */
    color: #FFFFFF !important;
}

.btn-primary:hover {
    /* พื้นหลังส้มเข้ม */
    background-color: var(--bk-primary-dark) !important;
    /* เส้นขอบส้มเข้ม */
    border-color: var(--bk-primary-dark) !important;
}

.btn-outline-primary {
    /* สีตัวอักษรส้ม */
    color: var(--bk-primary) !important;
    /* เส้นขอบส้ม */
    border-color: var(--bk-primary) !important;
}

.btn-outline-primary:hover {
    /* พื้นหลังส้ม */
    background-color: var(--bk-primary) !important;
    /* สีตัวอักษรขาว */
    color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════ */
/* Form Controls — Input Focus สีส้ม           */
/* ═══════════════════════════════════════════ */
.form-control:focus {
    /* เส้นขอบส้ม */
    border-color: var(--bk-primary);
    /* เงาส้มรอบ input */
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.2);
}

.form-check-input:checked {
    /* พื้นหลังส้ม */
    background-color: var(--bk-primary);
    /* เส้นขอบส้ม */
    border-color: var(--bk-primary);
}

/* ═══════════════════════════════════════════ */
/* Placeholder Page — หน้ากำลังพัฒนา           */
/* ═══════════════════════════════════════════ */
.placeholder-page {
    /* จัดกลาง */
    text-align: center;
    /* ระยะห่างบน */
    padding-top: 80px;
}

.placeholder-page i {
    /* ขนาด icon ใหญ่ */
    font-size: 64px;
    /* สีส้มอ่อน */
    color: var(--bk-primary-subtle);
    /* ระยะห่างด้านล่าง */
    margin-bottom: 16px;
}

.placeholder-page h2 {
    /* สีข้อความรอง */
    color: var(--bk-text-muted);
    /* ขนาดฟอนต์ */
    font-size: 20px;
}

/* ═══════════════════════════════════════════ */
/* Mobile Toggle                               */
/* ═══════════════════════════════════════════ */
.sidebar-toggle {
    /* ซ่อนบนจอใหญ่ */
    display: none;
    /* ไม่มีพื้นหลัง */
    background: none;
    /* ไม่มีเส้นขอบ */
    border: none;
    /* ขนาด icon */
    font-size: 22px;
    /* สีข้อความหลัก */
    color: var(--bk-text);
    /* ชี้มือ */
    cursor: pointer;
}

/* ═══════════════════════════════════════════ */
/* Responsive — จอเล็กกว่า 992px               */
/* ═══════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .sidebar {
        /* ซ่อน sidebar ออกไปทางซ้าย */
        transform: translateX(-100%);
    }

    .sidebar.show {
        /* แสดง sidebar เมื่อเปิดเมนู */
        transform: translateX(0);
    }

    .admin-content {
        /* ไม่ต้องเลื่อน content */
        margin-left: 0;
    }

    .sidebar-toggle {
        /* แสดงปุ่ม toggle บนจอเล็ก */
        display: block;
    }
}

/* ═══════════════════════════════════════════ */
/* Sidebar Overlay — ฉากหลังเมื่อเปิดเมนูบนมือถือ */
/* ═══════════════════════════════════════════ */
.sidebar-overlay {
    /* ซ่อนไว้ */
    display: none;
    /* เต็มหน้าจอ */
    position: fixed;
    /* ชิดทุกด้าน */
    top: 0;
    /* ชิดซ้าย */
    left: 0;
    /* ความกว้าง */
    width: 100%;
    /* ความสูง */
    height: 100%;
    /* สีดำโปร่ง */
    background: rgba(0, 0, 0, 0.4);
    /* อยู่ใต้ sidebar */
    z-index: 999;
}

.sidebar-overlay.show {
    /* แสดงฉากหลัง */
    display: block;
}