/* ==========================================================================
   DARK MODE OVERRIDES
   Tuyệt đối KHÔNG sửa file main.css để bảo toàn Light mode.
   Toàn bộ biến ở đây sẽ ghi đè lên :root khi body có data-theme="dark".
   ========================================================================== */

body[data-theme="dark"] {
  /* ── Brand / Theme ── */
  --mainClr: #ffa900;
  --mainClr-mid: rgba(255, 169, 0, 0.3);
  --mainClr-soft: rgba(255, 169, 0, 0.1);
  --mainClr-bg: rgba(255, 169, 0, 0.05);
  --mainClr-hover: rgba(255, 169, 0, 0.15);
  --subClr: #828bf9;
  --subClr-mid: rgba(130, 139, 249, 0.3);
  --subClr-soft: rgba(130, 139, 249, 0.1);

  /* ── Text ── */
  --textClr: #cbd5e1;       /* Chữ xám sáng */
  --textDark: #f8fafc;      /* Chữ trắng (tiêu đề/số lớn) */
  --textMid: #94a3b8;       /* Xám vừa */
  --textLight: #64748b;     /* Xám nhạt */
  --textFaint: #475569;
  --textFaint999: #64748b;
  --textMid666: #94a3b8;
  --textClr444: #cbd5e1;
  --textGray: #94a3b8;
  --textSlate: #94a3b8;
  --textSlate2: #cbd5e1;
  --textNavy: #f8fafc;

  /* ── State Colors ── */
  --colorSuccess-bg: rgba(16, 185, 129, 0.1);
  --colorDanger-bg: rgba(239, 68, 68, 0.1);
  --colorWarn-bg: rgba(245, 158, 11, 0.1);
  --colorWarn-border: rgba(245, 158, 11, 0.2);
  --colorUpBg: rgba(0, 177, 72, 0.1);
  --colorDownBg: rgba(225, 112, 85, 0.1);

  /* ── Background / Surface ── */
  --fadeClr: #1e293b;
  --fadeClr500: #334155;
  --fadeClrG: #1e293b;
  --bgPage: #0f172a;        /* Nền trang cực tối */
  --bgWhite: #1f2937;       /* Nền card sáng nhẹ hơn nền trang một chút */
  --bgWhite80: rgba(31, 41, 55, 0.95);
  --bgWhite95: rgba(30, 41, 59, 0.98);
  --bgSlate50: #1e293b;
  --bgSlate100: #334155;
  --bgSlate200: #475569;
  --bgAmberHover: rgba(255, 169, 0, 0.1);
  --bgAmberLight: rgba(255, 169, 0, 0.05);
  --bgGoldActive: rgba(255, 169, 0, 0.1);

  /* ── Border ── */
  --borderLight: rgba(255, 255, 255, 0.05);
  --borderMid: rgba(255, 255, 255, 0.1);
  --borderSlate: #334155;
  --borderSlate2: #475569;
  --borderFaint: rgba(255, 255, 255, 0.03);
  --borderDdd: #334155;

  /* ── Shadow ── */
  --shadowSm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadowMd: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadowLg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadowCard: 0 20px 25px rgba(0, 0, 0, 0.5);

  /* ── Scrollbar ── */
  --scrollTrack: #0f172a;
  --scrollThumb: #475569;
  --scrollThumbHover: #64748b;
}

/* ==========================================================================
   GLOBAL OVERRIDES FOR DARK MODE
   ========================================================================== */

/* 1. Xóa gradient chói lóa ở Body */
body[data-theme="dark"] {
  background-image: none !important;
  background-color: var(--bgPage) !important;
  color: var(--textClr) !important;
}

/* 2. Text Override: Ép các đoạn text hardcode màu đen/xám về màu sáng */
body[data-theme="dark"] h1, 
body[data-theme="dark"] h2, 
body[data-theme="dark"] h3, 
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] .dom_total_report p span:first-child,
body[data-theme="dark"] .dom_total_report p,
body[data-theme="dark"] .dom_total_report span,
body[data-theme="dark"] .dom_interaction_item span,
body[data-theme="dark"] .dom_active_cp span,
body[data-theme="dark"] label,
body[data-theme="dark"] th,
body[data-theme="dark"] td,
body[data-theme="dark"] .dom_table_filter h2,
body[data-theme="dark"] [style*="color: #333"],
body[data-theme="dark"] [style*="color:#333"],
body[data-theme="dark"] [style*="color: #444"],
body[data-theme="dark"] [style*="color: #555"],
body[data-theme="dark"] [style*="color: #666"],
body[data-theme="dark"] [style*="color: #1e293b"],
body[data-theme="dark"] [style*="color: #374151"],
body[data-theme="dark"] [style*="color: #475569"],
body[data-theme="dark"] [style*="color: #64748b"],
body[data-theme="dark"] [style*="color: #78350f"] {
  color: var(--textClr) !important;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] .dom_total_report p span:first-child {
  color: var(--textDark) !important;
}

/* 3. Cards & Panels Background */
body[data-theme="dark"] .bgw, 
body[data-theme="dark"] .dom_header,
body[data-theme="dark"] .dom_sidebar,
body[data-theme="dark"] .dom_toolbar_right,
body[data-theme="dark"] .dom_inner,
body[data-theme="dark"] .dom_card,
body[data-theme="dark"] .box_shadow,
body[data-theme="dark"] [style*="background: #fff"],
body[data-theme="dark"] [style*="background:#fff"],
body[data-theme="dark"] [style*="background: #f8fafc"],
body[data-theme="dark"] [style*="background:#f8fafc"],
body[data-theme="dark"] [style*="background: #f1f5f9"],
body[data-theme="dark"] [style*="background: #e2e8f0"],
body[data-theme="dark"] [style*="background: #f8f9fa"],
body[data-theme="dark"] [style*="background: #fcfcfc"],
body[data-theme="dark"] [style*="background-color: #fff"],
body[data-theme="dark"] [style*="background-color: white"] {
  background: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
}

body[data-theme="dark"] .dom_inner > div[style*="background"],
body[data-theme="dark"] .dom_inner > section[style*="background"] {
  background-color: transparent !important;
}

/* 4. Table & Rows (Campaign Details) */
body[data-theme="dark"] .dom_table_header {
  background: var(--bgSlate50) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .dom_campaign_list > li,
body[data-theme="dark"] .view_campaign > ul > li,
body[data-theme="dark"] tr,
body[data-theme="dark"] td {
  background: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
  color: var(--textClr) !important;
}
body[data-theme="dark"] .dom_campaign_list > li:hover,
body[data-theme="dark"] .view_campaign > ul > li:hover,
body[data-theme="dark"] tr:hover td {
  background: var(--bgSlate100) !important;
}

/* 5. Dropdown / Select box / Quick Filters */
body[data-theme="dark"] .dom_select {
  background: var(--fadeClr) !important;
  color: var(--textClr) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .dom_select_show {
  background: var(--bgWhite) !important;
  border: 1px solid var(--borderMid) !important;
  box-shadow: var(--shadowLg) !important;
}
body[data-theme="dark"] .dom_select_show li {
  background: transparent !important;
  color: var(--textClr) !important;
}
body[data-theme="dark"] .dom_select_show li span,
body[data-theme="dark"] .dom_select_show li p {
  color: var(--textClr) !important;
}
body[data-theme="dark"] .dom_select_show li:hover {
  background: var(--bgSlate100) !important;
}
body[data-theme="dark"] .dom_select_show li.active,
body[data-theme="dark"] .dom_select_show li.active span {
  background: var(--bgAmberHover) !important;
  color: var(--mainClr) !important;
}

/* 6. Buttons & Toolbar */
body[data-theme="dark"] .toolbar_btn:hover {
  background: var(--bgSlate100) !important;
}
body[data-theme="dark"] .dom_title_button {
  background: var(--bgSlate100) !important;
  color: var(--textClr) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .dom_title_button:hover {
  background: var(--bgSlate200) !important;
}
body[data-theme="dark"] .dom_title_button.active {
  background: var(--mainClr-bg) !important;
  color: var(--mainClr) !important;
  border-color: var(--mainClr-soft) !important;
}

/* 7. ALL MODALS (Settings, Performance, Share, etc.) */
body[data-theme="dark"] .ai_modal_box,
body[data-theme="dark"] .dom_modal_box,
body[data-theme="dark"] .perf_modal_box {
  background: var(--bgPage) !important;
  border: 1px solid var(--borderMid) !important;
}
body[data-theme="dark"] .ai_modal_header,
body[data-theme="dark"] .ai_modal_footer,
body[data-theme="dark"] .perf_header {
  border-color: var(--borderMid) !important;
  background: var(--bgPage) !important;
}
/* Xóa trắng inline trong Modals */
body[data-theme="dark"] .ai_modal_box > div,
body[data-theme="dark"] .ai_modal_body,
body[data-theme="dark"] .perf_modal_box > div,
body[data-theme="dark"] .setting-tab-content > div,
body[data-theme="dark"] .share_container {
  background: transparent !important;
  border-color: var(--borderMid) !important;
}
/* Share Modal & Settings Modal inner panels */
body[data-theme="dark"] .share_list_item {
  background-color: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
  color: var(--textClr) !important;
}
/* Ngoại trừ một số background linear-gradient cảnh báo */
body[data-theme="dark"] [style*="background: linear-gradient(135deg,#fffbeb,#fef3c7)"] {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

/* 8. Inputs & Textareas */
body[data-theme="dark"] input,
body[data-theme="dark"] textarea {
  background: var(--bgPage) !important;
  color: var(--textClr) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus {
  border-color: var(--mainClr) !important;
}

/* 9. Metrics Settings (Image 8) - Active Items */
body[data-theme="dark"] #available_metrics_list > div,
body[data-theme="dark"] #active_columns_list > div,
body[data-theme="dark"] .metric-item {
  background: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
  color: var(--textClr) !important;
}
body[data-theme="dark"] #available_metrics_list > div span,
body[data-theme="dark"] #active_columns_list > div span {
  color: var(--textClr) !important;
}
body[data-theme="dark"] #available_metrics_list > div[style*="border-color: var(--mainClr)"],
body[data-theme="dark"] .metric-item.active {
  background: var(--bgAmberLight) !important;
  border-color: var(--mainClr) !important;
  color: var(--textDark) !important;
}
body[data-theme="dark"] #available_metrics_list > div[style*="border-color: var(--mainClr)"] span {
  color: var(--textDark) !important;
}

/* 10. Date Range Picker */
body[data-theme="dark"] .daterangepicker {
  background-color: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
  color: var(--textClr) !important;
}
body[data-theme="dark"] .daterangepicker .calendar-table {
  background-color: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .daterangepicker td.off {
  background-color: var(--bgWhite) !important;
  color: var(--textFaint) !important;
}
body[data-theme="dark"] .daterangepicker td.available:hover {
  background-color: var(--bgSlate100) !important;
}

/* 11. Skeleton */
body[data-theme="dark"] .skeleton {
  background: var(--bgSlate100) !important;
  background: linear-gradient(110deg, var(--bgSlate100) 8%, var(--bgSlate200) 18%, var(--bgSlate100) 33%) !important;
  background-size: 200% 100% !important;
}
body[data-theme="dark"] .skeleton-container {
  background: var(--bgWhite) !important;
}

/* Toggle Button */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: transparent;
  color: var(--textMid);
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.theme-toggle-btn:hover {
  background: var(--bgSlate100);
  color: var(--mainClr);
}
body[data-theme="dark"] .theme-toggle-btn .fa-moon {
  display: none;
}
body[data-theme="dark"] .theme-toggle-btn .fa-sun {
  display: block !important;
}
.theme-toggle-btn .fa-sun {
  display: none;
  color: var(--mainClr);
}

/* ==========================================================================
   ITERATIVE FIXES (Cards, Tables, Activities, Modals)
   ========================================================================== */

/* Thẻ (Cards) sáng nhẹ hơn nền */
body[data-theme="dark"] .dom_card,
body[data-theme="dark"] .dom_inner {
  background-color: var(--bgWhite) !important; 
}

/* Các số liệu Interaction, Reach, Impressions trong các card bị tối chữ */
body[data-theme="dark"] .dom_interaction_item p span,
body[data-theme="dark"] .dom_interaction_item p,
body[data-theme="dark"] .dom_interaction_item {
  color: var(--textClr) !important;
}

/* Sidebar Account View Block */
body[data-theme="dark"] .dom_info {
  background-color: var(--bgSlate100) !important;
}
body[data-theme="dark"] .dom_info:hover {
  background-color: var(--bgSlate200) !important;
}
body[data-theme="dark"] .dom_info p {
  color: var(--textDark) !important;
}

/* Modal: Báo Cáo Hiệu Suất Chi Tiết (Pill & Badges) */
body[data-theme="dark"] .perf_filter_btn,
body[data-theme="dark"] .perf_filter_wrap,
body[data-theme="dark"] [style*="background: #f1f5f9"],
body[data-theme="dark"] [style*="background:#f1f5f9"] {
  background-color: var(--bgSlate100) !important;
  color: var(--textClr) !important;
  border-color: var(--borderMid) !important;
}

/* Các badge % tăng giảm màu xanh đỏ có nền trắng */
body[data-theme="dark"] .badge-up,
body[data-theme="dark"] .badge-down,
body[data-theme="dark"] [style*="background: #ecfdf5"],
body[data-theme="dark"] [style*="background:#ecfdf5"],
body[data-theme="dark"] [style*="background: #fef2f2"],
body[data-theme="dark"] [style*="background:#fef2f2"],
body[data-theme="dark"] [style*="background: #f0fdf4"],
body[data-theme="dark"] [style*="background:#f0fdf4"] {
  background-color: var(--bgSlate100) !important;
}
/* Ép màu tất cả các icon và chữ trong table của Modal */
body[data-theme="dark"] .perf_modal_box table *,
body[data-theme="dark"] .perf_modal_box tr *,
body[data-theme="dark"] .perf_modal_box td * {
  color: inherit;
}
body[data-theme="dark"] .perf_modal_box td span[style*="color"] {
  color: var(--textClr) !important;
}
/* Các icon xanh đỏ giữ nguyên màu chữ nhưng nền phải đen */
body[data-theme="dark"] .perf_modal_box td span[style*="color: #10b981"],
body[data-theme="dark"] .perf_modal_box td span[style*="color:#10b981"] {
  color: #10b981 !important;
}
body[data-theme="dark"] .perf_modal_box td span[style*="color: #ef4444"],
body[data-theme="dark"] .perf_modal_box td span[style*="color:#ef4444"] {
  color: #ef4444 !important;
}

/* Campaign, Adset, Ad Items trong danh sách */
body[data-theme="dark"] .campaign_main,
body[data-theme="dark"] .adset_item,
body[data-theme="dark"] .ad_item,
body[data-theme="dark"] .dom_campaign_list > li,
body[data-theme="dark"] .view_campaign_box > div,
body[data-theme="dark"] [style*="background-color: rgb(253, 253, 253)"] {
  background-color: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
  color: var(--textClr) !important;
}
body[data-theme="dark"] .campaign_main:hover,
body[data-theme="dark"] .adset_item:hover,
body[data-theme="dark"] .ad_item:hover {
  background-color: var(--bgSlate100) !important;
}
body[data-theme="dark"] .campaign_main *,
body[data-theme="dark"] .adset_item *,
body[data-theme="dark"] .ad_item * {
  color: inherit;
}

/* Device Breakdown, Top Campaigns, Engagement Mix list items */
body[data-theme="dark"] .dom_card li,
body[data-theme="dark"] .dom_inner li {
  background-color: transparent !important;
  color: var(--textClr) !important;
}

/* --- ACTIVITY LOGS --- */
body[data-theme="dark"] .act_chip {
  background-color: var(--bgSlate100) !important;
  border-color: var(--borderMid) !important;
  color: var(--textClr) !important;
}
body[data-theme="dark"] .act_chip:hover {
  background-color: var(--bgSlate200) !important;
  color: var(--mainClr) !important;
  border-color: var(--mainClr) !important;
}
body[data-theme="dark"] .act_chip.active {
  background-color: var(--mainClr) !important;
  color: #fff !important;
}
body[data-theme="dark"] .activity_search_container {
  background-color: var(--bgSlate100) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .activity_search_container input {
  color: var(--textClr) !important;
}
body[data-theme="dark"] .activity_row {
  background-color: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .activity_row:hover {
  border-color: var(--mainClr) !important;
  background-color: var(--bgSlate100) !important;
}
body[data-theme="dark"] .activity_icon {
  background-color: var(--bgSlate100) !important;
  color: var(--textClr) !important;
}
body[data-theme="dark"] .activity_sentence,
body[data-theme="dark"] .activity_sentence .act_actor {
  color: var(--textClr) !important;
}
body[data-theme="dark"] .activity_sentence .act_obj,
body[data-theme="dark"] .activity_sentence .act_type_badge {
  background-color: var(--bgSlate200) !important;
  color: var(--textDark) !important;
}
body[data-theme="dark"] .activity_skeleton {
  background: linear-gradient(90deg, var(--bgSlate100) 25%, var(--bgSlate200) 50%, var(--bgSlate100) 75%) !important;
  background-size: 200% 100% !important;
}

/* Các viền mờ đi (Grid border) */
body[data-theme="dark"] .ad_item_box::before,
body[data-theme="dark"] .ad_item_box::after,
body[data-theme="dark"] .adset_item::before,
body[data-theme="dark"] .adset_item::after {
  background-color: var(--borderMid) !important;
  border-color: var(--borderMid) !important;
}

/* --- Brand Settings Modal Items --- */
body[data-theme="dark"] .brand_setting_item,
body[data-theme="dark"] .brand_setting_item [style*="background: #f8fafc"],
body[data-theme="dark"] .brand_setting_item [style*="background:#f8fafc"],
body[data-theme="dark"] .brand_setting_item [style*="background: #f1f5f9"],
body[data-theme="dark"] .brand_setting_item [style*="background: #fff"],
body[data-theme="dark"] .brand_setting_item [style*="background-color: #fff"] {
  background-color: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .brand_setting_item p,
body[data-theme="dark"] .brand_setting_item span,
body[data-theme="dark"] .brand_setting_item label {
  color: var(--textClr) !important;
}

/* ==========================================================================
   ITERATIVE FIXES 2 (Profile Dropdown, List Actives, Filter Inputs, Sub-cards)
   ========================================================================== */

/* Buttons, Pills, and Dropdowns with hardcoded white background */
body[data-theme="dark"] [style*="background: #fff"],
body[data-theme="dark"] [style*="background:#fff"],
body[data-theme="dark"] [style*="background-color: #fff"],
body[data-theme="dark"] [style*="background-color:#fff"],
body[data-theme="dark"] [style*="background: white"],
body[data-theme="dark"] [style*="background-color: white"] {
  background-color: var(--bgWhite) !important;
  color: var(--textClr) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] [style*="background: #fff"] *,
body[data-theme="dark"] [style*="background-color: #fff"] * {
  color: inherit;
}
/* Ensure the text is visible if it was black */
body[data-theme="dark"] [style*="color: #000"],
body[data-theme="dark"] [style*="color: #333"] {
  color: var(--textClr) !important;
}

/* Search Input in Detail Table that has white pill behind it */
body[data-theme="dark"] .dom_table_header {
  background-color: transparent !important;
}
body[data-theme="dark"] .dom_campaign_filter {
  background-color: var(--bgSlate100) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .dom_campaign_filter input {
  color: var(--textClr) !important;
}

/* Sidebar Workspace block (Bún Bò Huế Duyên Mai) */
body[data-theme="dark"] .dom_account_view_block {
  background-color: var(--bgSlate100) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .dom_account_view_block:hover {
  background-color: var(--bgSlate200) !important;
}
body[data-theme="dark"] .dom_account_view_block .account_item_name {
  color: var(--textClr) !important;
}
body[data-theme="dark"] .dom_account_view_block .account_item_id {
  color: var(--textLight) !important;
}

/* Interaction Cards, Device Breakdown, Top Campaigns (Sub-items) */
body[data-theme="dark"] .dom_interaction_note,
body[data-theme="dark"] .dom_toplist li {
  background-color: var(--bgSlate100) !important;
  border-color: var(--borderMid) !important;
}
body[data-theme="dark"] .dom_interaction_note span {
  color: var(--textClr) !important;
}

/* List Items (Campaign, Adset, Ad) Active State */
body[data-theme="dark"] .campaign_main.active,
body[data-theme="dark"] .adset_item.active,
body[data-theme="dark"] .ad_item.active {
  background-color: var(--bgSlate100) !important;
  border-color: var(--mainClr) !important;
}
body[data-theme="dark"] .ad_item.active .ad_item_box {
  background-color: var(--bgSlate100) !important;
}

/* Today & Yesterday quick action buttons in Dark Mode */
body[data-theme="dark"] .date_quick_btn {
  background: var(--bgWhite) !important;
  border-color: var(--borderMid) !important;
  color: var(--textClr) !important;
}

body[data-theme="dark"] .date_quick_btn:hover {
  background: var(--bgSlate100) !important;
  color: var(--mainClr) !important;
  border-color: var(--mainClr) !important;
}

body[data-theme="dark"] .date_quick_btn.active {
  background: var(--mainClr) !important;
  color: #fff !important;
  border-color: var(--mainClr) !important;
  box-shadow: 0 4px 10px rgba(255, 169, 0, 0.35) !important;
}