@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

@import url("https://fonts.googleapis.com/css?family=Kanit:300,400,700|Pacifico");

/* ตั้งค่าฟอนต์หลัก */
body {
    font-family: 'Kanit', sans-serif !important;
}

/* Custom Background Colors */
.bg-orange {
    background-color: #fd7e14 !important; /* สีส้มมาตรฐาน Bootstrap */
}
.bg-black {
    background-color: #000000 !important;
}

/* Navbar Top Link Styles */
.navbar-dark .navbar-nav .nav-link {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    transition: color 0.3s ease-in-out;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    padding-inline: 1.5rem;
}

/* Navbar Top Link Hover Effect */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #E0651A; /* ใช้สีส้ม/เหลืองของ Bootstrap (warning) เพื่อความเด่นชัดบนพื้นหลังสีส้มเข้ม */
}

/* --- เพิ่มโค้ดสำหรับ Sidebar Nav-Link Hover ที่นี่ --- */
#sidebar-container .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* พื้นหลังขาวโปร่งแสง 10% */
}
/* --- สิ้นสุดการเพิ่มโค้ด --- */


/* Main Wrapper (สำหรับ Full Height Layout) */
.main-wrapper {
    min-height: calc(100vh - 56px); /* ส่วนนี้จะถูก override ด้วย inline style ใน HTML */
}

/* Content Area Styles */
.dashboard-content {
    background-color: #f8f9fa;
    min-height: 100vh; /* อาจจะอยากปรับให้เป็น calc(100vh - 56px) ด้วย ถ้าต้องการให้ฟุตเตอร์ขึ้นมาชิด */
}

.btn-orange-custom {
    background-color: #fd7e14; /* สีส้มเดียวกับ Sidebar ของคุณ */
    border-color: #fd7e14; /* ให้เส้นขอบเป็นสีเดียวกัน */
    color: #ffffff; /* ตัวอักษรสีขาว */
    /* Hover effect */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* เพิ่ม transition เพื่อให้ดูนุ่มนวล */
}

.btn-orange-custom:hover {
    background-color: #E0651A; /* สีส้มที่เข้มขึ้นเล็กน้อยเมื่อเมาส์ชี้ */
    border-color: #E0651A;
    color: #ffffff;
}

.btn-orange-custom:active,
.btn-orange-custom:focus {
    background-color: #C75B16 !important; /* สีส้มที่เข้มขึ้นอีกเมื่อคลิก/โฟกัส */
    border-color: #C75B16 !important;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(243, 112, 33, 0.5) !important; /* เพิ่มเงาตอนโฟกัส */
}

.text-orange-custom {
    color: #fd7e14 !important; /* สีส้มเดียวกับ Sidebar ของคุณ */
}

.bg-icon-orange {
    background-color: #fd7e14 !important;
}

.bullet-icon-circle {
    width: 22px; /* ขนาดของวงกลม */
    height: 22px; /* ขนาดของวงกลม */
    border-radius: 30%; /* ทำให้เป็นวงกลม */
    background-color: #fd7e14; /* พื้นหลังสีส้ม */
    display: flex; /* ใช้ Flexbox เพื่อจัดไอคอนให้อยู่กึ่งกลาง */
    justify-content: center; /* จัดไอคอนแนวนอนกึ่งกลาง */
    align-items: center; /* จัดไอคอนแนวตั้งกึ่งกลาง */
    flex-shrink: 0; /* ป้องกันไม่ให้วงกลมหดตัวใน Flex container */
}

.bullet-icon-circle i {
    color: #ffffff; /* กำหนดให้ไอคอนข้างในเป็นสีขาว */
    font-size: 0.9rem; /* ปรับขนาดไอคอนให้พอดีกับวงกลม */
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .main-wrapper {
        flex-direction: column;
    }
    .d-flex.flex-column.flex-shrink-0.p-3.text-white {
        width: 100% !important;
        min-height: auto !important;
    }

}