/* file: book-reviews.css */

/* -------------------------------------- */
/* CSS cho phần Đánh giá (Rating) */
/* -------------------------------------- */

/* Khung chung */
.review-summary-box {
    border: 1px solid #dee2e6;
    background-color: #f8f9fa !important;
}

.avg-rating-display {
    line-height: 1;
}

/* Các ngôi sao đánh giá */
.rating-input {
    cursor: pointer;
    font-size: 1.8rem; /* Kích thước lớn hơn cho sao */
}

.rating-star {
    transition: color 0.2s, transform 0.1s;
    color: #ced4da; /* Màu xám nhạt mặc định */
}

/* Hiệu ứng khi hover/đánh giá (dùng JS để thêm class 'rated' hoặc 'hover-active') */
.rating-star.hover-active,
.rating-star.rated {
    color: #ffc107; /* Màu vàng cam */
}

.rating-star:hover {
    transform: scale(1.1); /* Hiệu ứng phóng to nhẹ khi hover */
}


/* -------------------------------------- */
/* CSS cho phần Bình luận (Comments) */
/* -------------------------------------- */

.comment-form-container {
    border-radius: 8px;
}

.comment-item {
    background-color: #ffffff;
    border-radius: 8px !important;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.comment-item img {
    border: 1px solid #ced4da;
    object-fit: cover;
}

.comment-rating {
    font-size: 0.9rem;
}

/* Trả lời bình luận (Reply) */
.replies {
    margin-top: 10px;
}

.replies .bg-light {
    border-radius: 6px !important;
    padding: 10px;
}

.replies .badge {
    font-weight: normal;
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
}

/* Thanh bên (border-start) cho phần trả lời */
.border-info {
    border-color: #0dcaf0 !important; /* Thay đổi màu viền cho nổi bật */
}

/* -------------------------------------- */
/* CSS Tùy chỉnh chung cho REPLY FORM (TINH CHỈNH BORDER-RADIUS) */
/* -------------------------------------- */

/* Khung nhập liệu chính (Thay thế cho .reply-form) */
.reply-input-group {
    /* Đặt bo góc lớn hơn cho toàn bộ nhóm nhập liệu */
    border-radius: 20px; 
    overflow: hidden; /* Cần thiết để các phần tử con không phá vỡ bo góc */
    border: 1px solid #ced4da; /* Thêm viền nhẹ */
}

/* Ẩn viền giữa textarea và button */
.reply-input-group textarea {
    border: none !important;
    box-shadow: none !important;
    resize: none; /* Không cho phép kéo giãn textarea */
    padding-top: 8px; /* Tăng padding để đẹp hơn */
    padding-bottom: 8px;
    height: auto; /* Chiều cao tự động */
}

.reply-input-group .btn-submit-reply {
    /* Loại bỏ bo góc mặc định của Bootstrap, thay bằng bo góc của container */
    border-radius: 0 !important; 
    border: none !important;
    padding-left: 15px;
    padding-right: 15px;
    /* Dùng màu primary của Bootstrap */
    background-color: var(--bs-primary);
    color: white;
}

/* Phần @[Tên người dùng] */
.reply-to-badge {
    font-size: 0.8rem;
    padding: 0.25em 0.7em;
}


/* -------------------------------------- */
/* CSS Tùy chỉnh cho DARK MODE */
/* (ĐÃ CẬP NHẬT: Dùng selector .dark-theme) */
/* -------------------------------------- */

/* Khi body có class .dark-theme */
.dark-theme body {
    /* Nền chung của trang (nếu body không có nền) */
    background-color: #121212 !important; /* Thường là màu đen hoặc xám rất đậm */
    color: #f8f9fa; /* Màu chữ sáng chung */
}

/* Nền của phần nội dung chính (main-content) */
.dark-theme .main-content {
    background-color: #121212;
}

/* Tiêu đề trang (Sách) */
.dark-theme .pnt-main-title {
    color: #ffffff;
}

/* Khung tóm tắt đánh giá (review-summary-box) */
.dark-theme .review-summary-box {
    background-color: #212529 !important; /* Xám đậm hơn */
    border-color: #343a40 !important;
    color: #f8f9fa;
}

/* Tiêu đề trong review-summary-box */
.dark-theme .review-summary-box h5,
.dark-theme .review-summary-box p,
.dark-theme .review-summary-box span {
    color: #f8f9fa !important;
}

/* Chữ mờ trong review-summary-box */
.dark-theme .review-summary-box .text-muted {
    color: #adb5bd !important;
}

/* Các nút hành động (Đọc, Tải về, Thích) */
.dark-theme .book-actions-bar .btn-outline-dark {
    /* Nút Đọc, Tải về */
    background-color: transparent;
    color: #adb5bd; /* Viền và chữ màu xám sáng */
    border-color: #6c757d;
}

.dark-theme .book-actions-bar .btn-outline-dark:hover {
    background-color: #343a40; /* Nền hover tối hơn */
    color: #ffffff;
    border-color: #ffffff;
}

.dark-theme .book-actions-bar .btn-outline-danger {
    /* Nút Thích */
    background-color: transparent;
    color: #dc3545; /* Màu đỏ của nút */
    border-color: #dc3545;
}
.dark-theme .book-actions-bar .btn-outline-danger:hover {
    background-color: #dc3545;
    color: #ffffff;
}

/* Tiêu đề Thông tin chi tiết */
.dark-theme h4 {
    color: #f8f9fa;
}

/* Mô tả sách */
.dark-theme #book-detail-description {
    color: #adb5bd;
}

/* Đường kẻ phân cách */
.dark-theme hr {
    border-top: 1px solid #495057;
}

/* === Quy tắc cũ (ĐÃ ĐỔI TỪ .dark-mode sang .dark-theme) === */

.dark-theme .comment-item {
    background-color: #212529 !important; /* Đổi nền trắng sang xám đậm */
    border-color: #343a40 !important; /* Đổi viền xám nhạt sang viền đậm hơn */
    box-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Tạo bóng rõ hơn trên nền tối */
}

/* Đảm bảo chữ trong bình luận là màu sáng */
.dark-theme .comment-item p,
.dark-theme .comment-item span {
    color: #f8f9fa !important; /* Màu chữ sáng (light gray) */
}

/* Các chữ nhỏ, chữ mờ (text-muted) */
.dark-theme .text-muted {
    color: #adb5bd !important; /* Màu xám nhạt hơn */
}

/* Container chứa form bình luận (nền trắng) */
.dark-theme .comment-form-container {
    background-color: #212529 !important; /* Đổi nền trắng sang xám đậm */
    border-color: #495057 !important; /* Viền đậm hơn */
}

/* Ô textarea nhập nội dung bình luận */
.dark-theme #comment-textarea {
    background-color: #495057; /* Nền tối cho input */
    color: #f8f9fa; /* Chữ sáng */
    border-color: #6c757d;
}

/* Placeholder text trong textarea */
.dark-theme #comment-textarea::placeholder {
    color: #adb5bd; /* Màu chữ gợi ý nhạt */
    opacity: 1; 
}

/* Phần reply/trả lời (bg-light) */
.dark-theme .replies .bg-light {
    background-color: #495057 !important; /* Nền tối hơn cho phần trả lời */
    border-color: #6c757d;
}

/* Tên người dùng trong comment (text-primary, text-success, text-danger) */
.dark-theme .text-primary {
    color: #8ab4f8 !important; /* Màu xanh nhạt hơn */
}
.dark-theme .text-success {
    color: #69c469 !important; /* Màu xanh lá nhạt hơn */
}
.dark-theme .text-danger {
    color: #f7756f !important; /* Màu đỏ nhạt hơn */
}

/* CSS Tùy chỉnh cho REPLY FORM (Tối ưu cho Dark Mode) */

/* Khung nhập liệu chính */
.dark-theme .reply-input-group {
    border-color: #6c757d; /* Viền xám đậm */
    background-color: #495057; /* Nền xám đậm cho input group */
}

/* Phần @[Tên người dùng] trong form trả lời */
.dark-theme .reply-to-badge {
    background-color: #5a6268 !important; /* Xám đậm hơn một chút so với nền */
    color: #f8f9fa !important; 
}

/* Ô textarea nhập trả lời */
.dark-theme .reply-input-group textarea {
    background-color: #495057; /* Nền tối cho input */
    color: #f8f9fa; /* Chữ sáng */
}

/* Nút Gửi (btn-primary) */
.dark-theme .reply-input-group .btn-submit-reply {
    background-color: #0d6efd; /* Giữ màu xanh */
    color: #ffffff;
}