/* --- Admin Panel Redesign --- */

body.admin-body {
    background-color: #f0f2f5; /* สีพื้นหลังของเนื้อหา */
}

/* --- Offcanvas Sidebar (Glassmorphism) --- */
.offcanvas {
    background-color: rgba(10, 10, 10, 0.8); /* สีดำโปร่งใส */
    backdrop-filter: blur(10px); /* เอฟเฟกต์กระจกฝ้า */
    border-right: 1px solid rgba(220, 53, 69, 0.3); /* ขอบสีแดงจางๆ */
}

.offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-title strong {
    color: #dc3545; /* สีแดง */
}

/* --- Sidebar Navigation Links --- */
.offcanvas .nav-link {
    color: #adb5bd; /* สีเทาอ่อน */
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid transparent; /* ขอบซ้ายสำหรับ Active State */
    transition: all 0.2s ease-in-out;
}

.offcanvas .nav-link i {
    width: 25px; /* จัดให้ไอคอนตรงกัน */
    margin-right: 0.5rem;
    color: #6c757d; /* สีไอคอน */
    transition: color 0.2s ease-in-out;
}

.offcanvas .nav-link:hover {
    background-color: rgba(220, 53, 69, 0.1); /* พื้นหลังสีแดงจางๆ */
    color: #fff;
    border-left-color: #dc3545;
}

.offcanvas .nav-link:hover i {
    color: #dc3545;
}

/* --- Main Content Area --- */
#page-content-wrapper {
    width: 100%;
}

#page-content-wrapper .navbar {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
}

/* --- Redesigned Stat Cards --- */
.stat-card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    transition: transform 0.2s ease-in-out;
    background-color: #fff;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card-icon {
    font-size: 2.5rem;
    padding: 1.10rem;
    border-radius: 10%;
    color: white;
    opacity: 0.9;
}

.stat-card-info h5 {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.stat-card-info .stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: #055db5;
}

/* --- Fix for Dark Modal Text Color --- */
.modal[data-bs-theme="dark"] .modal-header, 
.modal[data-bs-theme="dark"] .modal-body,
.modal[data-bs-theme="dark"] .modal-body label {
    color: #f8f9fa; /* Set text color to light/white */
}