/**
 * Dark Mode Styles
 * Các style dành riêng cho chế độ tối
 */

/* Dark theme colors - tập trung tất cả cài đặt theme tối ở đây */
[data-theme="dark"] {
    --primary-color: #4361ee;
    --primary-hover: #5a72f5;
    --light-bg: #121212;
    --text-color: #e1e1e1;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --border-color: #333;
    --input-bg: #333;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.4);
    --header-bg: #1e1e1e;
    --footer-bg: #121212;
    --input-placeholder: #888;
    --modal-bg: #1e1e1e;
    --modal-footer-bg: #252525;
    --email-view-content-bg: #1e1e1e;
    --email-view-content-border: #333;
    --list-group-bg: #252525;
    --list-group-hover: #333;
    --spinner-color: #4361ee;
    --table-hover-bg: rgba(67, 97, 238, 0.1);
    --btn-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
    --btn-shadow-hover: 0 6px 16px rgba(67, 97, 238, 0.3);
}

/* Background pattern cho dark mode */
[data-theme="dark"] body {
    background-image: 
      radial-gradient(rgba(67, 97, 238, 0.15) 2px, transparent 2px),
      radial-gradient(rgba(67, 97, 238, 0.15) 2px, transparent 2px);
}

/* Hiệu ứng gradient cho tiêu đề trong dark mode */
[data-theme="dark"] .app-title {
    text-shadow: 0 0 20px rgba(67, 97, 238, 0.3);
}

/* Fix cho các phần tử bảng trong dark mode */
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td,
[data-theme="dark"] table th,
[data-theme="dark"] .table th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tbody td {
    color: var(--text-color) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Đặc biệt cho thead.table-light trong dark mode */
[data-theme="dark"] thead.table-light,
[data-theme="dark"] .table thead.table-light,
[data-theme="dark"] .table thead.table-light th {
    background-color: #333 !important;
    color: var(--text-color) !important;
}

/* Ghi đè các style mặc định của Bootstrap cho table-light */
[data-theme="dark"] .table-light {
    --bs-table-color: var(--text-color) !important;
    --bs-table-bg: #333 !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Fix hover color cho bảng trong dark mode */
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:hover th,
[data-theme="dark"] #emailsTable tbody tr:hover td {
    color: var(--text-color) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Thêm màu cho placeholder trong dark mode */
[data-theme="dark"] .form-control::placeholder {
    color: var(--input-placeholder);
}

/* Modal improvements for dark mode */
[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
    background-color: var(--modal-footer-bg);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* List group items in dark mode */
[data-theme="dark"] .list-group-item {
    background-color: var(--list-group-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--list-group-hover) !important;
}

/* Additional fixes for specific elements in dark mode */
[data-theme="dark"] .bg-light {
    background-color: var(--header-bg) !important;
}

[data-theme="dark"] .border-end-0 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-start-0 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 0.3;
}

/* Fix spinner color in dark mode */
[data-theme="dark"] .spinner-border {
    color: var(--spinner-color) !important;
}

/* Fix alert and badges in dark mode */
[data-theme="dark"] .alert-info {
    background-color: rgba(61, 139, 253, 0.15);
    border-color: rgba(61, 139, 253, 0.25);
    color: var(--text-color);
}

[data-theme="dark"] .bg-secondary {
    background-color: #555 !important;
}

[data-theme="dark"] .table-light {
    background-color: #333;
    color: var(--text-color);
}

/* Fixed iframe in dark mode */
[data-theme="dark"] iframe {
    background-color: var(--card-bg);
}

[data-theme="dark"] .btn-outline-secondary {
    color: #adb5bd;
    border-color: #6c757d;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
}

[data-theme="dark"] .text-muted {
    color: #9ca3af !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] #emailViewContent {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Fix cho card-header trong dark mode */
[data-theme="dark"] .card-header.bg-white {
    background-color: var(--header-bg) !important;
    color: var(--text-color);
}

[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header .h5 {
    color: var(--text-color);
}

/* Đảm bảo màu đúng cho các phần tử trong email view */
[data-theme="dark"] .email-header p,
[data-theme="dark"] .email-header strong {
    color: var(--text-color);
}