/* Theme Variables */
:root {
    /* Light Theme Variables */
    --light-bg-primary: #f5f7fa;
    --light-bg-secondary: #edf1f7;
    --light-container-bg: #ffffff;
    --light-block-bg: #ffffff;
    --light-text-color: #2e3a59;
    --light-text-muted: #8f9bb3;
    --light-border-color: #e4e9f2;
    --light-block-shadow: rgba(44, 51, 73, 0.1);
    --light-btn-bg: #f7f9fc;
    --light-btn-border: #edf1f7;
    --light-btn-hover: #e4e9f2;
    --light-primary-color: #3366ff;
    --light-success-color: #00e676;
    --light-danger-color: #ff3d71;
    --light-warning-color: #ffaa00;
    --light-info-color: #0095ff;
    
    /* Light Theme Menu Variables */
    --light-menu-bg: #ffffff;
    --light-menu-text: #2e3a59;
    --light-menu-text-secondary: #8f9bb3;
    --light-menu-border: #e4e9f2;
    --light-menu-shadow: rgba(44, 51, 73, 0.1);
    --light-menu-title: #8f9bb3;
    --light-menu-link: #2e3a59;
    --light-menu-hover-bg: #f7f9fc;
    --light-menu-hover-text: #3366ff;
    --light-menu-active-bg: rgba(51, 102, 255, 0.1);
    --light-menu-active-text: #3366ff;
    --light-menu-icon-bg: #f7f9fc;
    --light-menu-status-bg: #f7f9fc;
    --light-gradient-primary: linear-gradient(45deg, #3366ff, #00d68f);

    /* Dark Theme Variables - Cập nhật với mà u chính từ hình ảnh */
    --dark-bg-primary: #0d1117;
    --dark-bg-secondary: #161b22;
    --dark-container-bg: #1a1f2a;
    --dark-block-bg: #1e2430;
    --dark-text-color: #e6edf3;
    --dark-text-muted: #8b949e;
    --dark-border-color: #30363d;
    --dark-block-shadow: rgba(0, 0, 0, 0.25);
    --dark-btn-bg: #21262d;
    --dark-btn-border: #30363d;
    --dark-btn-hover: #30363d;
    --dark-primary-color: #58a6ff; /* Mà u chính từ hình ảnh */
    --dark-success-color: #3fb950;
    --dark-danger-color: #f85149;
    --dark-warning-color: #f8e957;
    --dark-info-color: #58a6ff;
    
    /* Dark Theme Menu Variables - Cập nhật với mà u chính từ hình ảnh */
    --dark-menu-bg: #161b22;
    --dark-menu-text: #e6edf3;
    --dark-menu-text-secondary: #8b949e;
    --dark-menu-border: #30363d;
    --dark-menu-shadow: rgba(0, 0, 0, 0.3);
    --dark-menu-title: #8b949e;
    --dark-menu-link: #e6edf3;
    --dark-menu-hover-bg: #21262d;
    --dark-menu-hover-text: #58a6ff; /* Mà u chính từ hình ảnh */
    --dark-menu-active-bg: rgba(88, 166, 255, 0.15); /* Mà u chính từ hình ảnh với độ trong suốt */
    --dark-menu-active-text: #58a6ff; /* Mà u chính từ hình ảnh */
    --dark-menu-icon-bg: #21262d;
    --dark-menu-status-bg: #0d1117;
    --dark-gradient-primary: linear-gradient(45deg, #58a6ff, #3fb950); /* Mà u chính từ hình ảnh */
}

/* Mặc định để Dark Theme */
html {
    data-theme: "dark";
}

/* Light Theme (Default) */
[data-theme="light"] {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --container-bg: var(--light-container-bg);
    --block-bg: var(--light-block-bg);
    --text-color: var(--light-text-color);
    --text-muted: var(--light-text-muted);
    --border-color: var(--light-border-color);
    --block-shadow: var(--light-block-shadow);
    --btn-bg: var(--light-btn-bg);
    --btn-border: var(--light-btn-border);
    --btn-hover: var(--light-btn-hover);
    --primary-color: var(--light-primary-color);
    --success-color: var(--light-success-color);
    --danger-color: var(--light-danger-color);
    --warning-color: var(--light-warning-color);
    --info-color: var(--light-info-color);
    
    /* Menu Variables */
    --menu-bg: var(--light-menu-bg);
    --menu-text: var(--light-menu-text);
    --menu-text-secondary: var(--light-menu-text-secondary);
    --menu-border: var(--light-menu-border);
    --menu-shadow: var(--light-menu-shadow);
    --menu-title: var(--light-menu-title);
    --menu-link: var(--light-menu-link);
    --menu-hover-bg: var(--light-menu-hover-bg);
    --menu-hover-text: var(--light-menu-hover-text);
    --menu-active-bg: var(--light-menu-active-bg);
    --menu-active-text: var(--light-menu-active-text);
    --menu-icon-bg: var(--light-menu-icon-bg);
    --menu-status-bg: var(--light-menu-status-bg);
    --gradient-primary: var(--light-gradient-primary);
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --container-bg: var(--dark-container-bg);
    --block-bg: var(--dark-block-bg);
    --text-color: var(--dark-text-color);
    --text-muted: var(--dark-text-muted);
    --border-color: var(--dark-border-color);
    --block-shadow: var(--dark-block-shadow);
    --btn-bg: var(--dark-btn-bg);
    --btn-border: var(--dark-btn-border);
    --btn-hover: var(--dark-btn-hover);
    --primary-color: var(--dark-primary-color);
    --success-color: var(--dark-success-color);
    --danger-color: var(--dark-danger-color);
    --warning-color: var(--dark-warning-color);
    --info-color: var(--dark-info-color);
    
    /* Menu Variables */
    --menu-bg: var(--dark-menu-bg);
    --menu-text: var(--dark-menu-text);
    --menu-text-secondary: var(--dark-menu-text-secondary);
    --menu-border: var(--dark-menu-border);
    --menu-shadow: var(--dark-menu-shadow);
    --menu-title: var(--dark-menu-title);
    --menu-link: var(--dark-menu-link);
    --menu-hover-bg: var(--dark-menu-hover-bg);
    --menu-hover-text: var(--dark-menu-hover-text);
    --menu-active-bg: var(--dark-menu-active-bg);
    --menu-active-text: var(--dark-menu-active-text);
    --menu-icon-bg: var(--dark-menu-icon-bg);
    --menu-status-bg: var(--dark-menu-status-bg);
    --gradient-primary: var(--dark-gradient-primary);
}

/* Theme-specific Body Styles */
body {
    background-color: var(--bg-primary);
    color: var(--text-color);
}

/* Theme-specific Container Styles */
.container-box {
    background-color: transparent;
    padding: 20px;
    border-radius: 0;
}

/* Theme-specific Block Styles */
.block {
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px var(--block-shadow);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.block-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
}

/* Theme-specific Form Elements */
.form-control {
    background-color: var(--block-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.form-control:focus {
    background-color: var(--block-bg);
    border-color: var(--primary-color);
    color: var(--text-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* Theme-specific Button Styles */
.btn-outline-secondary {
    color: var(--text-color);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--btn-hover);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Theme-specific Nav Tabs */
.nav-tabs-alt .nav-link {
    background-color: transparent;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.nav-tabs-alt .nav-link:hover {
    color: var(--text-color);
    border-bottom: 2px solid var(--text-muted);
}

.nav-tabs-alt .nav-link.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    background-color: transparent;
}

/* Theme-specific Toggle Button */
.theme-toggle-btn {
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 50%;
    box-shadow: 0 2px 8px var(--block-shadow);
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    background-color: var(--btn-hover);
    color: var(--text-color);
}

/* Theme Transitions */
.container-box,
.block,
.btn,
.form-control,
.nav-link {
    transition: all 0.3s ease;
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* Theme-specific Badge Colors */
.badge.bg-primary {
    background-color: rgba(88, 166, 255, 0.6) !important;
}

.badge.bg-success {
    background-color: rgba(63, 185, 80, 0.6) !important;
}

.badge.bg-danger {
    background-color: rgba(248, 81, 73, 0.6) !important;
}

.badge.bg-warning {
    background-color: rgba(248, 233, 87, 0.6) !important;
}

.badge.bg-secondary {
    background-color: rgba(139, 148, 158, 0.6) !important;
}

/* Result Areas Theme-specific Styling */
.result-area {
    background-color: var(--block-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}

/* Theme-specific Focus States */
.form-control:focus, 
.form-select:focus,
textarea:focus {
    background-color: var(--container-bg);
    border-color: var(--border-color);
    color: var(--text-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(68, 129, 235, 0.25);
}

/* Theme-specific Button Styles */
.btn {
    border-color: var(--border-color);
}

/* Theme-specific Nav Styles */
.nav-tabs {
    border-color: var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-color);
    border-color: transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--border-color);
}

.nav-tabs .nav-link.active {
    background-color: var(--container-bg);
    border-color: var(--border-color);
    border-bottom-color: transparent;
}

/* SweetAlert2 Dark Theme Override */
.swal2-dark {
    background-color: var(--container-bg) !important;
    color: var(--text-color) !important;
}

.swal2-dark-title {
    color: var(--text-color) !important;
}

.swal2-dark-content {
    color: var(--text-color) !important;
}

/* SweetAlert2 Dark Theme */
[data-theme='dark'] .swal2-popup {
    background: var(--container-bg);
    color: var(--text-color);
}

[data-theme='dark'] .swal2-title {
    color: var(--text-color);
}

[data-theme='dark'] .swal2-html-container {
    color: var(--text-color);
}

/* Table styles for both themes */
.swal2-popup .table {
    margin-bottom: 0;
}

/* Dark theme specific table styles */
[data-theme='dark'] .swal2-popup .table {
    color: var(--text-color);
    background-color: var(--table-bg);
}

[data-theme='dark'] .swal2-popup .table-bordered {
    border-color: var(--table-border);
}

[data-theme='dark'] .swal2-popup .table td {
    background-color: var(--table-bg);
    border-color: var(--table-border);
    padding: 8px 12px;
    color: var(--text-color);
}

[data-theme='dark'] .swal2-popup .table td strong {
    color: var(--text-color);
}

[data-theme='dark'] .swal2-popup .table-info td,
[data-theme='dark'] .swal2-popup .table-info td strong {
    background-color: var(--table-info-bg) !important;
    border-color: var(--table-border);
    color: var(--text-color);
}

/* Success icon styles */
[data-theme='dark'] .swal2-popup .swal2-success {
    border-color: var(--success-color);
}

[data-theme='dark'] .swal2-popup .swal2-success-ring {
    border-color: var(--success-color);
}

[data-theme='dark'] .swal2-popup .swal2-success-line-tip,
[data-theme='dark'] .swal2-popup .swal2-success-line-long {
    background-color: var(--success-color);
}

[data-theme='dark'] .swal2-popup .swal2-timer-progress-bar {
    background: var(--primary-color);
}

/* Remove default table striping in dark mode */
[data-theme='dark'] .swal2-popup .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-bg);
}

/* Ensure text remains visible in dark mode */
[data-theme='dark'] .swal2-popup .table strong {
    color: var(--text-color);
}

/* Ensure all text in dark mode is visible */
[data-theme='dark'] .swal2-popup .swal2-html-container,
[data-theme='dark'] .swal2-popup .swal2-html-container * {
    color: var(--text-color);
}

/* Thêm và o phần dark theme */
[data-theme='dark'] .swal2-popup .card {
    background-color: var(--container-bg);
    border-color: var(--border-color);
}

[data-theme='dark'] .swal2-popup .list-group-item {
    background-color: var(--block-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme='dark'] .swal2-popup .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
}

[data-theme='dark'] .swal2-popup .alert-info {
    background-color: rgba(23, 162, 184, 0.15);
    border-color: rgba(23, 162, 184, 0.3);
}