/* สีของกรอบเว็บไซต์เท่านั้น: ไม่เปลี่ยนระยะ ขนาด ฟอนต์ หรือพื้นที่เนื้อหา */

/* Sidebar ที่ใช้ข้อมูลและรายการจากเทมเพลตเดิม */
aside[data-site-frame='sidebar'] {
    color: #d1d5db;
    background-color: #1c1c21;
    border-color: rgba(255, 255, 255, .1);
}

aside[data-site-frame='sidebar'] .sidebar-header {
    color: #f3f4f6;
    background-color: #1c1c21;
    border-color: rgba(255, 255, 255, .1);
}

aside[data-site-frame='sidebar'] .menu-title,
aside[data-site-frame='sidebar'] .template-sidebar-group,
aside[data-site-frame='sidebar'] .text-gray-400 {
    color: #9ca3af;
}

aside[data-site-frame='sidebar'] .sidebar-item,
aside[data-site-frame='sidebar'] .template-sidebar-link,
aside[data-site-frame='sidebar'] .menu-item {
    color: #d1d5db;
    background-color: transparent;
    border-color: transparent;
}

aside[data-site-frame='sidebar'] .sidebar-item:hover,
aside[data-site-frame='sidebar'] .template-sidebar-link:hover,
aside[data-site-frame='sidebar'] .menu-item:hover {
    color: #f3f4f6;
    background-color: rgba(255, 255, 255, .06);
}

aside[data-site-frame='sidebar'] .sidebar-item.active,
aside[data-site-frame='sidebar'] .sidebar-item[aria-current='page'],
aside[data-site-frame='sidebar'] .template-sidebar-link[aria-current='page'],
aside[data-site-frame='sidebar'] .menu-item.active {
    color: #93c5fd;
    background-color: rgba(37, 99, 235, .15);
    border-right-color: #3b82f6;
}

aside[data-site-frame='sidebar'] a:focus-visible {
    outline-color: #60a5fa;
}

/* Header ของ layout เก่าที่ยังใช้กับการตั้งค่า 2FA */
#legacy-template-header {
    color: #f3f4f6;
    background-color: #151519;
    border-color: rgba(255, 255, 255, .1);
}

#legacy-template-header .toggle-btn {
    color: #d1d5db;
    background-color: transparent;
}

#legacy-template-header .toggle-btn:hover {
    color: #f3f4f6;
    background-color: rgba(255, 255, 255, .08);
}

#legacy-template-header .user-name {
    color: #f3f4f6;
}

#legacy-template-header .user-role {
    color: #9ca3af;
}

#legacy-template-header .avatar {
    color: #f3f4f6;
    background-color: #26272d;
    border-color: #4b4c56;
}

#legacy-template-header .dropdown-menu {
    color: #f3f4f6;
    background-color: #1f2026;
    border-color: rgba(255, 255, 255, .12);
}

#legacy-template-header .dropdown-item {
    color: #f3f4f6;
    background-color: transparent;
}

#legacy-template-header .dropdown-item:hover {
    background-color: rgba(255, 255, 255, .08);
}

#legacy-template-header a:focus-visible,
#legacy-template-header button:focus-visible {
    outline-color: #d1d5db;
}

/* การแจ้งเตือน Admin อยู่ภายใน Header เท่านั้น */
#header-main-wrapper #adminNotificationBellBtn {
    color: #d1d5db;
    background-color: transparent;
}

#header-main-wrapper #adminNotificationBellBtn:hover {
    color: #f3f4f6;
    background-color: rgba(255, 255, 255, .08);
}

#header-main-wrapper #adminNotificationBadge {
    border-color: #151519;
}

#header-main-wrapper #adminNotificationDropdown {
    color: #f3f4f6;
    background-color: #1f2026;
    border-color: rgba(255, 255, 255, .12);
}

#header-main-wrapper #adminNotificationDropdown > div:first-child,
#header-main-wrapper #adminNotificationDropdown > div:last-child {
    background-color: #25262d;
}

#header-main-wrapper #adminNotificationDropdown #adminNotificationList {
    background-color: #1f2026;
}

#header-main-wrapper #adminNotificationDropdown > * + *,
#header-main-wrapper #adminNotificationDropdown #adminNotificationList > * + *,
#header-main-wrapper #adminNotificationDropdown .border-gray-100,
#header-main-wrapper #adminNotificationDropdown .border-gray-200 {
    border-color: rgba(255, 255, 255, .1);
}

#header-main-wrapper #adminNotificationDropdown .bg-white,
#header-main-wrapper #adminNotificationDropdown .bg-gray-50,
#header-main-wrapper #adminNotificationDropdown [class~='bg-gray-50/90'],
#header-main-wrapper #adminNotificationDropdown [class~='bg-gray-50/80'],
#header-main-wrapper #adminNotificationDropdown .bg-slate-50,
#header-main-wrapper #adminNotificationDropdown [class~='bg-slate-50/90'] {
    background-color: #25262d;
}

#header-main-wrapper #adminNotificationDropdown .bg-gray-100 {
    background-color: #30313a;
}

#header-main-wrapper #adminNotificationDropdown .text-gray-900,
#header-main-wrapper #adminNotificationDropdown .text-gray-800 {
    color: #f3f4f6;
}

#header-main-wrapper #adminNotificationDropdown .text-gray-700,
#header-main-wrapper #adminNotificationDropdown .text-gray-600,
#header-main-wrapper #adminNotificationDropdown .text-gray-500 {
    color: #b8bdc8;
}

#header-main-wrapper #adminNotificationDropdown .text-gray-400 {
    color: #9ca3af;
}

#header-main-wrapper #adminNotificationDropdown .text-gray-300 {
    color: #8c93a2;
}

#header-main-wrapper #adminNotificationDropdown #adminNotificationList > div {
    background-color: transparent;
}

#header-main-wrapper #adminNotificationDropdown #adminNotificationList > div:hover {
    background-color: rgba(255, 255, 255, .06);
}

#header-main-wrapper #adminNotificationDropdown #adminNotificationList > [class~='bg-indigo-50/40'] {
    background-color: rgba(99, 102, 241, .1);
}

#header-main-wrapper #adminNotificationDropdown #adminNotificationList > [class~='bg-indigo-50/40']:hover {
    background-color: rgba(99, 102, 241, .16);
}

#header-main-wrapper #adminNotificationDropdown > div:first-child > button,
#header-main-wrapper #adminNotificationDropdown > div:last-child > a {
    color: #a5b4fc;
}

#header-main-wrapper #adminNotificationDropdown #btnEnableDesktopNotif {
    color: #b8bdc8;
}

#header-main-wrapper #adminNotificationDropdown #btnEnableDesktopNotif:hover {
    color: #f3f4f6;
}