/* css/variables/colors.css */
:root {
  /* Bảng màu chủ đạo (Light Mode mặc định) */
  --primary-color: rgb(13, 110, 253);
  --primary-hover: #0b5ed7;
  
  /* Màu nền & Surface */
  --bg-color: #f8f9fa;
  --surface-color: #ffffff;
  
  /* Màu Text */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-inverse: #ffffff;
  
  /* Border */
  --border-color: #dee2e6;
  
  /* Trạng thái */
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #0dcaf0;

  /* ========================================================
     THÊM MỚI: Màu Hover phụ & Nền nhạt (Subtle) cho Light Mode
     ======================================================== */
  --warning-hover: #ffca2c;
  --warning-dark: #d39e00;

  --primary-bg-subtle: #cfe2ff;
  --success-bg-subtle: #d1e7dd;
  --danger-bg-subtle: #f8d7da;
  --warning-bg-subtle: #fff3cd;
}

/* Biến ghi đè cho Dark Mode */
.dark-theme {
  --primary-color: rgb(61, 139, 253);
  --primary-hover: #6ea8fe;
  
  --bg-color: #121212;
  --surface-color: #1e1e1e;
  
  --text-primary: #f8f9fa;
  --text-secondary: #adb5bd;
  --text-inverse: #212529;
  
  --border-color: #343a40;

  /* ========================================================
     THÊM MỚI: Màu Hover phụ & Nền nhạt (Subtle) cho Dark Mode
     ======================================================== */
  --warning-dark: #ffc107; /* Dark mode thì màu chữ warning phải sáng lên */
  
  /* Dùng rgba pha 15% màu với nền tối để tạo hiệu ứng nổi khối tinh tế */
  --primary-bg-subtle: rgba(61, 139, 253, 0.15);
  --success-bg-subtle: rgba(25, 135, 84, 0.15);
  --danger-bg-subtle: rgba(220, 53, 69, 0.15);
  --warning-bg-subtle: rgba(255, 193, 7, 0.15);
}

/* ========================================================
   ÉP BOOTSTRAP UTILITIES PHẢI THEO BIẾN DARK MODE
   ======================================================== */
.dark-theme .text-body,
.dark-theme .text-dark {
  color: var(--text-primary) !important;
}

.dark-theme .text-secondary,
.dark-theme .text-muted {
  color: var(--text-secondary) !important;
}

.dark-theme .bg-white,
.dark-theme .bg-light {
  background-color: var(--surface-color) !important;
}

/* Đảm bảo tất cả icon (FontAwesome) kế thừa đúng màu chữ đang đứng */
.dark-theme i {
  color: inherit;
}

/* ========================================================
   HỖ TRỢ ĐỔI MÀU HEADING & CARD CHO DARK MODE
   ======================================================== */
.dark-theme h1, 
.dark-theme h2, 
.dark-theme h3, 
.dark-theme h4, 
.dark-theme h5, 
.dark-theme h6 {
  color: var(--text-primary) !important;
}

/* Đảm bảo chữ bên trong Card của Bootstrap cũng đổi màu */
.dark-theme .card {
  color: var(--text-primary);
}

/* ========================================================
   FIX LỖI CHỮ TỐI TRONG FORM & SELECT (DARK MODE)
   ======================================================== */
.dark-theme select,
.dark-theme .form-select,
.dark-theme .form-control {
  background-color: var(--surface-color) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Đảm bảo các tùy chọn (Option) bên trong không bị nền trắng chữ trắng */
.dark-theme select option {
  background-color: var(--surface-color);
  color: var(--text-primary);
}

/* Xử lý cho Dropdown Menu của Bootstrap */
.dark-theme .dropdown-menu {
  background-color: var(--surface-color);
  border-color: var(--border-color);
}

.dark-theme .dropdown-item {
  color: var(--text-primary);
}

.dark-theme .dropdown-item:hover {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

/* Ép màu cho nhãn VI/EN hoặc bất kỳ chữ nào trong bộ chọn ngôn ngữ */
.dark-theme .text-language,
.dark-theme .lang-label,
.dark-theme .dropdown-toggle {
    color: var(--text-primary) !important;
}

/* Nếu bạn dùng thẻ select truyền thống */
.dark-theme select.lang-select {
    color: var(--text-primary) !important;
    background-color: var(--surface-color) !important;
}

/* Khử hoàn toàn các class text-dark của Bootstrap khi ở Dark Mode */
.dark-theme .text-dark {
    color: var(--text-primary) !important;
}

/* ========================================================
   TRỊ DỨT ĐIỂM "CỤC TRẮNG" CỦA FLOATING LABEL (BOOTSTRAP 5)
   ======================================================== */

/* 1. Đổi màu cục nền đè lên border (thủ phạm chính) */
.dark-theme .form-floating > label::after {
    background-color: var(--surface-color) !important; 
}

/* 2. Đổi màu chữ của nhãn khi ở trạng thái bình thường */
.dark-theme .form-floating > label {
    color: var(--text-secondary) !important;
}

/* 3. Đổi màu chữ của nhãn khi click vào (focus) hoặc đã nhập chữ */
.dark-theme .form-floating > .form-control:focus ~ label,
.dark-theme .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--primary-color) !important;
}

/* 4. Đảm bảo ô input luôn tiệp màu với nền */
.dark-theme .form-floating > .form-control {
    background-color: var(--surface-color) !important;
    color: var(--text-primary) !important;
}