/* --- won-appearance.css --- */
/* CSS cho menu Appearance và các tùy chọn màu sắc */

/* Kiểu cho icon màu trong dropdown */
.customize-dropdown-content .color-icon-wrapper {
    display: inline-flex; /* Hoặc flex */
    align-items: center;
    margin-right: 8px; /* Khoảng cách giữa icon và text */
    vertical-align: middle; /* Căn giữa icon với text */
}

.customize-dropdown-content .color-preview-icon {
    display: inline-block;
    width: 60px; /* Bạn có thể điều chỉnh chiều rộng này */
    height: 12px; /* Và chiều cao này */
    border: 1px solid #ccc; /* Viền cho icon */
    border-radius: 3px; /* Bo góc nhẹ cho đẹp */
    /* margin-right: 5px;  Đã có margin-right ở color-icon-wrapper */
    line-height: 12px;
    text-align: center;
    font-size: 10px;
    overflow: hidden;
}

/* --- Dropdown chung cho Appearance Panel --- */
#appearance-panel .customize-dropdown {
    position: relative;
    display: block; /* Hoặc inline-block tùy theo bố cục bạn muốn */
    width: 100%; /* Cho dropdown chiếm toàn bộ chiều rộng của .customize-section */
}

/* Nút chính của dropdown */
#appearance-panel #appearance-color-theme-button {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    background-color: #4d89f2; /* Màu nền mặc định cho nút */
    color: #333; /* Màu chữ mặc định */
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; /* Để căn chỉnh icon và text bên trong nút */
    align-items: center; /* Căn giữa theo chiều dọc */
}
#appearance-panel #appearance-color-theme-button:hover {
    background-color: #0b4fc7;
}

/* Nút chính của dropdown khi active (đang mở) */
#appearance-panel #appearance-color-theme-button[aria-expanded="true"] {
    background-color: #4d89f2;
}


/* Nội dung dropdown (danh sách các theme) */
#appearance-panel .customize-dropdown-content {
    display: none; /* Ẩn ban đầu */
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 15; /* Đảm bảo nó nổi lên trên các phần tử khác */
    width: 100%; /* Chiếm toàn bộ chiều rộng của cha (.customize-dropdown) */
    max-height: 400px; /* Giới hạn chiều cao và cho phép cuộn */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Cuộn mượt trên iOS */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Thêm bóng đổ cho đẹp */
}

/* Các mục (link) trong dropdown */
#appearance-panel .customize-dropdown-content a {
    display: flex; /* Sử dụng flex để căn chỉnh icon và text */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 8px 10px;
    text-decoration: none;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#appearance-panel .customize-dropdown-content a:hover {
    background-color: #fbfbd7; /* Màu nền khi hover */
}
#appearance-panel .customize-dropdown-content a:focus {
    background-color: #f2f6fb; /* Màu nền khi focus (cho accessibility) */
    outline: 1px solid #007BFF; /* Viền focus */
}


/* Tiêu đề nhóm trong dropdown (ví dụ: Nature, Flags) */
#appearance-color-theme-options .q-item.q-item-type {
    padding: 8px 10px;
    font-weight: bold;
    background-color: #fff; /* Màu nền cho tiêu đề nhóm */
    color: #333; /* Màu chữ cho tiêu đề nhóm */
    margin-top: 5px; /* Khoảng cách phía trên tiêu đề nhóm */
    margin-bottom: 2px; /* Khoảng cách phía dưới tiêu đề nhóm */
    cursor: default; /* Con trỏ mặc định vì không phải là mục có thể chọn */
    border-top: 1px solid #ddd; /* Thêm đường kẻ nhẹ phía trên */
    border-bottom: 1px solid #ddd; /* Thêm đường kẻ nhẹ phía dưới */
}
/* Bỏ hover effect cho tiêu đề nhóm */
#appearance-color-theme-options .q-item.q-item-type:hover {
  
	  box-shadow: 0 0 4px rgba(41, 182, 246, 1); /* Thêm chút bóng sáng (glow) */
}

/* ------- Dark Mode Overrides cho Appearance Panel ------- */
body.theme-dark #appearance-panel .customize-label {
    color: #fff; /* Đảm bảo label cũng có màu trắng */
}

body.theme-dark #appearance-panel #appearance-color-theme-button {
    background-color: #2a2a2a !important; /* Nền tối hơn cho nút */
    color: #fff !important;
    border: 1px solid #555 !important; /* Viền tối hơn */
}

body.theme-dark #appearance-panel #appearance-color-theme-button:hover,
body.theme-dark #appearance-panel #appearance-color-theme-button[aria-expanded="true"] {
    background-color: #3a3a3a !important; /* Nền tối hơn chút khi hover/active */
    border-color: #666 !important;
}
body.theme-dark #appearance-panel #appearance-color-theme-button .color-preview-icon {
    border-color: #666; /* Viền icon trong dark mode */
}


body.theme-dark #appearance-panel .customize-dropdown-content {
    background-color: #1e1e1e !important; /* Nền rất tối cho dropdown */
    border-color: #444 !important;
}

body.theme-dark #appearance-panel .customize-dropdown-content a {
    color: #e0e0e0 !important; /* Màu chữ sáng hơn cho dễ đọc */
}

body.theme-dark #appearance-panel .customize-dropdown-content a:hover {
    background-color: #007BFF !important; /* Màu xanh khi hover */
    color: #fff !important; /* Chữ trắng trên nền xanh */
}
body.theme-dark #appearance-panel .customize-dropdown-content a:focus {
    background-color: #0056b3; /* Màu xanh đậm hơn khi focus */
    color: #fff !important;
    outline: 1px solid #7cceff; /* Viền focus sáng hơn */
}


body.theme-dark #appearance-panel .customize-dropdown-content .color-preview-icon {
    border-color: #555; /* Viền icon trong dark mode */
}

body.theme-dark #appearance-color-theme-options .q-item.q-item-type {
    background-color: #333 !important; /* Nền tối cho tiêu đề nhóm */
    color: #ccc !important; /* Màu chữ sáng hơn cho tiêu đề nhóm */
    border-top-color: #444;
    border-bottom-color: #444;
}
body.theme-dark #appearance-color-theme-options .q-item.q-item-type:hover {
    background-color: #333 !important; /* Giữ nguyên màu nền khi hover */
}

/* Nút chính của dropdown khi focus */
#appearance-panel #appearance-color-theme-button:focus {
    outline: 2px solid #0056b3; /* Hoặc một màu/style focus nổi bật khác */
    outline-offset: 2px;
}

/* Dark mode cho focus của nút chính */
body.theme-dark #appearance-panel #appearance-color-theme-button:focus {
    outline-color: #7cceff; /* Màu focus sáng hơn cho dark mode */
}