/**
 * Brand Layer - Elani
 * Nạp CUỐI CÙNG trong layouts/master.blade.php (sau dark-mode.css) để thắng
 * specificity mà không phải sửa từng file legacy.
 *
 * Phạm vi (cập nhật theo ảnh thực tế mặt tiền — vàng gold + trắng/kem + đen,
 * KHÔNG có nâu — "nâu hiện tại quá nặng nề"):
 * - GOLD là accent DUY NHẤT (nút, link, active state...) ở CẢ hai theme —
 *   nâu không còn giữ vai trò primary/accent, chỉ còn lại làm chữ-trên-nút-gold
 *   (--color-text-on-primary) vì gold nền + chữ trắng fail contrast (~1.9:1).
 * - Side panel (header + sidebar), LIGHT theme: nền GOLD gradient, chữ/icon
 *   nâu đậm (đủ contrast trên gold) — khớp ảnh tham khảo sếp gửi +
 *   aquaclinic.com.vn. Logo sẽ được thay bằng file trắng (sếp tự làm).
 * - Side panel, DARK theme: TẠM GIỮ NGUYÊN đen ấm + accent gold như đợt
 *   trước — "dark mode để sau", chưa đổi lần này.
 * - Vùng nội dung (bg/card/text) vẫn đổi theo theme: light = trắng/kem,
 *   dark = đen ấm (thang --c-* và --dm-bg).
 * - Không sửa file vendor admin-lte2/dist/css/*; không đổi skin-blue sang skin khác.
 *
 * Việc còn lại (~ hex rải rác trong page CSS riêng lẻ) không thuộc phạm vi đợt
 * này — dọn dần khi từng trang được migrate sang React.
 */

:root {
    /* ===== Raw brand scale (nguồn: logo Elani) ===== */
    --brand-brown-900: #3a1c00;
    --brand-brown-800: #58390b;
    --brand-brown-700: #55341A;
    --brand-brown-600: #6B4423;
    --brand-brown-500: #58390b;
    --brand-brown-400: #A87A46;
    --brand-brown-300: #C79E6E;

    --brand-gold-600: #C9A227;
    --brand-gold-500: #D4AF37;
    --brand-gold-400: #E8C87A;
    --brand-gold-300: #F0DBA0;

    /* ===== Primary accent = GOLD, giống nhau ở CẢ hai theme (thay nâu) =====
       Trước đây light theme dùng thang nâu riêng — nay hợp nhất về gold để
       khớp ảnh nhận diện thực tế (mặt tiền vàng gold, không có nâu). */
    --color-primary: var(--brand-gold-500);
    --color-primary-50: #FDF8EC;
    --color-primary-100: #F8EBC9;
    --color-primary-200: #F0DBA0;
    --color-primary-300: #E8C87A;
    --color-primary-400: #DEBB55;
    --color-primary-500: var(--brand-gold-500);
    --color-primary-600: var(--brand-gold-600);
    --color-primary-700: #A6821D;
    --color-primary-800: #7D6216;
    --color-primary-900: #54420F;
    --color-primary-950: #2E2408;

    --color-primary-light: var(--brand-gold-400);
    --color-primary-dark: var(--brand-gold-600);
    --color-primary-hover: var(--brand-gold-400);
    --color-border-focus: var(--brand-gold-500);

    --color-accent: var(--brand-gold-600);
    --color-accent-light: var(--brand-gold-400);
    --color-accent-dark: #8a6e1c;

    --color-primary-10: rgba(212, 175, 55, 0.1);
    --color-primary-20: rgba(212, 175, 55, 0.2);
    --color-primary-30: rgba(212, 175, 55, 0.3);
    --color-primary-40: rgba(212, 175, 55, 0.4);
    --color-primary-50-opacity: rgba(212, 175, 55, 0.5);
    --color-primary-60: rgba(212, 175, 55, 0.6);
    --color-primary-70: rgba(212, 175, 55, 0.7);
    --color-primary-80: rgba(212, 175, 55, 0.8);
    --color-primary-90: rgba(212, 175, 55, 0.9);

    --gradient-primary: linear-gradient(135deg, var(--brand-gold-400) 0%, var(--brand-gold-600) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--brand-gold-300) 0%, var(--brand-gold-400) 50%, var(--brand-gold-600) 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--brand-gold-600) 0%, #8a6e1c 100%);
    --gradient-primary-full: var(--gradient-primary-light);
    --gradient-ocean: var(--gradient-primary);
    --gradient-ocean-light: var(--gradient-primary-light);
    --gradient-ocean-subtle: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(201, 162, 39, 0.1) 100%);

    --shadow-primary: 0 4px 12px rgba(212, 175, 55, 0.3);
    --shadow-primary-md: 0 8px 24px rgba(212, 175, 55, 0.4);
    --shadow-primary-lg: 0 12px 32px rgba(212, 175, 55, 0.5);
    --shadow-primary-glow: 0 0 40px rgba(212, 175, 55, 0.3);
    --shadow-primary-colored: 0 10px 40px rgba(212, 175, 55, 0.4);

    /* Gold nền nút → chữ trắng chỉ ~1.9:1, không đọc được. Cả 2 theme đều
       dùng nâu đậm làm chữ-trên-nút-gold (đã kiểm WCAG AA). */
    --color-text-on-primary: var(--brand-brown-900);

    /* Chrome (sidebar/header) — LIGHT theme: gradient gold NHẠT, ngả màu
       "da" (thẩm mỹ da liễu — sếp yêu cầu nhạt hơn bản gold đậm ban đầu).
       Dark theme override riêng bên dưới (giữ nguyên đen — "để sau"). */
    --brand-chrome-bg: linear-gradient(180deg, var(--brand-gold-400) 0%, var(--brand-gold-300) 55%, #F8EBC9 100%);
    --brand-chrome-bg-alt: var(--brand-gold-400);
    /* Chữ/icon mặc định trên chrome gold — nâu đậm (đủ contrast), không phải
       trắng/gold (gold-trên-gold sẽ mất chữ). */
    --brand-chrome-text: var(--brand-brown-900);
    --brand-chrome-text-muted: rgba(58, 28, 0, 0.75);
    /* Nền pill khi active — nâu SIÊU NHẠT (tint trong suốt, không phải màu
       đặc), tránh tương phản gắt trên chrome gold. Chữ/icon active dùng
       --brand-chrome-active-text (nâu đậm) vì nền giờ quá nhạt để chữ trắng
       đọc được. */
    --brand-chrome-active-bg: rgba(58, 28, 0, 0.12);
    --brand-chrome-active-text: var(--brand-brown-900);
    --brand-chrome-hover-bg: rgba(58, 28, 0, 0.08);
    /* Viền — nâu đậm thay vì gold (gold-trên-gold sẽ mất viền). */
    --brand-chrome-border: rgba(58, 28, 0, 0.30);
}

/* ===== Dark theme ===== */
html[data-theme="dark"] {
    /* PHẢI khai báo lại (dù giá trị giống hệt :root) — dark-mode.css có khối
       "Override colors.css semantic tokens → indigo palette" cũng định nghĩa
       html[data-theme="dark"] { --color-primary: var(--c-500); ... } (dòng
       ~1300). Selector html[data-theme="dark"] (attribute+element) có
       specificity CAO HƠN :root (pseudo-class), nên nếu không khai báo lại ở
       đây, khối indigo cũ của dark-mode.css THẮNG bất kể thứ tự nạp file —
       đây chính là lỗi đã gặp (icon "Doanh thu tháng này" ở dashboard ra màu
       xám --c-500 thay vì gold). */
    --color-primary: var(--brand-gold-500);
    --color-primary-50: #FDF8EC;
    --color-primary-100: #F8EBC9;
    --color-primary-200: #F0DBA0;
    --color-primary-300: #E8C87A;
    --color-primary-400: #DEBB55;
    --color-primary-500: var(--brand-gold-500);
    --color-primary-600: var(--brand-gold-600);
    --color-primary-700: #A6821D;
    --color-primary-800: #7D6216;
    --color-primary-900: #54420F;
    --color-primary-950: #2E2408;

    --color-primary-light: var(--brand-gold-400);
    --color-primary-dark: var(--brand-gold-600);
    --color-primary-hover: var(--brand-gold-400);
    --color-border-focus: var(--brand-gold-500);

    --color-accent: var(--brand-gold-600);
    --color-accent-light: var(--brand-gold-400);
    --color-accent-dark: #8a6e1c;

    --color-primary-10: rgba(212, 175, 55, 0.1);
    --color-primary-20: rgba(212, 175, 55, 0.2);
    --color-primary-30: rgba(212, 175, 55, 0.3);
    --color-primary-40: rgba(212, 175, 55, 0.4);
    --color-primary-50-opacity: rgba(212, 175, 55, 0.5);
    --color-primary-60: rgba(212, 175, 55, 0.6);
    --color-primary-70: rgba(212, 175, 55, 0.7);
    --color-primary-80: rgba(212, 175, 55, 0.8);
    --color-primary-90: rgba(212, 175, 55, 0.9);

    --gradient-primary: linear-gradient(135deg, var(--brand-gold-400) 0%, var(--brand-gold-600) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--brand-gold-300) 0%, var(--brand-gold-400) 50%, var(--brand-gold-600) 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--brand-gold-600) 0%, #8a6e1c 100%);
    --gradient-primary-full: var(--gradient-primary-light);
    --gradient-ocean: var(--gradient-primary);
    --gradient-ocean-light: var(--gradient-primary-light);
    --gradient-ocean-subtle: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(201, 162, 39, 0.1) 100%);

    --shadow-primary: 0 4px 12px rgba(212, 175, 55, 0.3);
    --shadow-primary-md: 0 8px 24px rgba(212, 175, 55, 0.4);
    --shadow-primary-lg: 0 12px 32px rgba(212, 175, 55, 0.5);
    --shadow-primary-glow: 0 0 40px rgba(212, 175, 55, 0.3);
    --shadow-primary-colored: 0 10px 40px rgba(212, 175, 55, 0.4);

    --color-text-on-primary: var(--brand-brown-900);

    /* Chrome dark theme — GIỮ NGUYÊN đen ấm + accent gold như đợt trước
       ("dark mode để sau", chỉ đổi light theme lần này). Phải khai báo lại
       tường minh (không chỉ dựa vào :root) vì --brand-chrome-bg* mới ở trên
       giờ là gold cho light theme. */
    --brand-chrome-bg: #0A0908;
    --brand-chrome-bg-alt: #171512;
    --brand-chrome-text: #E8E4DE;
    --brand-chrome-text-muted: rgba(232, 228, 222, 0.75);
    --brand-chrome-active-bg: rgba(212, 175, 55, 0.16);
    --brand-chrome-active-text: #FFFFFF;
    --brand-chrome-hover-bg: rgba(212, 175, 55, 0.20);
    --brand-chrome-border: rgba(212, 175, 55, 0.30);

    /* NITA dark palette: đổi accent xanh → gold để mọi chỗ dùng var(--c-accent)/
       --dm-primary* (dark-mode.css) tự động ăn gold theo. */
    --c-accent: var(--brand-gold-500);
    --dm-primary: var(--brand-gold-500);
    --dm-primary-h: var(--brand-gold-400);
    --dm-primary-act: var(--brand-gold-600);

    /* Nền dark mode gốc (dark-mode.css) là thang indigo/xanh (--c-950:#13162a,
       --dm-bg:#0d0f18...) — lệch tông với gold/nâu. Redefine lại thành thang
       đen ấm trung tính (gần đen, hơi ngả nâu nhẹ, KHÔNG xanh), đen sẫm hơn
       bản gốc. Vì dark-mode.css định nghĩa --dm-bg-card/--dm-bg-sec/--dm-text*
       v.v. bằng var(--c-950)/var(--c-100)... (tham chiếu sống, không phải giá
       trị tĩnh), chỉ cần redefine đúng 12 biến gốc --c-* và --dm-bg này là toàn bộ
       hệ quả (card bg, border, text...) tự động đổi theo — không phải sửa
       từng rule một. */
    --c-50:  #F7F5F2;
    --c-100: #E8E4DE;
    --c-200: #D3CCC2;
    --c-300: #A89E93;
    --c-400: #7D746A;
    --c-500: #5C554D;
    --c-600: #423D37;
    --c-700: #2C2925;
    --c-800: #201D1A;
    --c-900: #171512;
    --c-950: #110F0D;
    --dm-bg:  #0A0908;
}

/* ============================================================
   Bootstrap 3 primary — .btn-primary/.label-primary/.panel-primary
   không hề dùng --color-primary (mặc định #337ab7 cứng), phải khai
   báo tường minh để theo brown/gold.
   ============================================================ */
.btn-primary {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-dark);
}
.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.label-primary {
    background-color: var(--color-primary);
}
.panel-primary {
    border-color: var(--color-primary);
}
.panel-primary > .panel-heading {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--color-primary);
}

/* AdminLTE .box.box-primary — vendor mặc định viền trên #3c8dbc (xanh ocean
   cũ), chưa từng qua --color-primary. Ảnh hưởng mọi box-primary toàn app
   (vd 8 "box" trên trang bookings/create-edit), không chỉ 1 trang. */
.box.box-primary {
    border-top-color: var(--color-primary);
}
.box.box-solid.box-primary {
    border: 1px solid var(--color-primary);
}
.box.box-solid.box-primary > .box-header {
    color: var(--color-text-on-primary);
    background: var(--color-primary);
    background-color: var(--color-primary);
}
.box.box-solid.box-primary > .box-header a,
.box.box-solid.box-primary > .box-header .btn {
    color: var(--color-text-on-primary);
}

/* ============================================================
   CHROME — header + sidebar luôn ĐEN ẤM ở cả hai theme, viền GOLD
   (khớp ảnh mặt tiền thực tế: đen + gold, không nâu)
   (mirror đúng các selector "final lock" đang thắng trong
   admin-header-menu.css để chắc chắn ghi đè, không phụ thuộc thứ
   tự nạp file).
   ============================================================ */
/* Solid (không gradient) — logo và navbar là 2 box riêng biệt, nếu dùng
   chung 1 khai báo gradient thì mỗi box tự render gradient theo kích thước
   của chính nó, tạo đường nối lệch tông giữa logo (255px) và navbar (rộng
   hơn nhiều). Solid đảm bảo đồng nhất tuyệt đối. */
.main-header,
.skin-blue .main-header,
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
/* dark-mode.css có rule html[data-theme="dark"] .skin-blue .main-header
   .navbar/.logo { background: var(--dm-bg-card) !important } — specificity
   CAO HƠN 2 selector trên (thêm attribute [data-theme]), nên thắng dù nạp
   sau. Thêm bản có prefix html[data-theme="dark"] để hoà specificity, thắng
   nhờ nạp sau. */
html[data-theme="dark"] .skin-blue .main-header .navbar,
html[data-theme="dark"] .skin-blue .main-header .logo {
    background: var(--brand-chrome-bg) !important;
    border-bottom: 1px solid var(--brand-chrome-border);
}

.main-sidebar,
.skin-blue .main-sidebar,
.skin-blue .wrapper,
.skin-blue .left-side {
    /* background (không phải background-color) vì --brand-chrome-bg là
       gradient ở light theme — background-color không nhận gradient. */
    background: var(--brand-chrome-bg) !important;
    border-right: 1px solid var(--brand-chrome-border);
}

.skin-blue .sidebar-menu > li.header {
    background: var(--brand-chrome-bg-alt) !important;
}

/* Logo topbar — swap theo theme: light (header nền gold/kem nhạt) → logo
   NÂU; dark (header vẫn đen) → logo GOLD như cũ. */
.topbar-logo-img--gold {
    display: none;
}
html[data-theme="dark"] .topbar-logo-img--brown {
    display: none;
}
html[data-theme="dark"] .topbar-logo-img--gold {
    display: inline;
}

.main-header .logo .topbar-logo-img {
    filter: drop-shadow(0 4px 10px rgba(58, 28, 0, 0.20));
}
.main-header .logo:hover .topbar-logo-img {
    filter: drop-shadow(0 6px 14px rgba(58, 28, 0, 0.30));
}
html[data-theme="dark"] .main-header .logo .topbar-logo-img {
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.25));
}
html[data-theme="dark"] .main-header .logo:hover .topbar-logo-img {
    filter: drop-shadow(0 6px 16px rgba(212, 175, 55, 0.4));
}

/* Login page logo glow — thay tông xanh cũ (rgba(79,135,255,...) ở login.css)
   bằng glow ấm trung tính, hợp cả 2 file logo (gold/nâu). */
.nita-logo-img {
    filter: drop-shadow(0 6px 18px rgba(139, 94, 43, 0.3));
}
.nita-logo-img:hover {
    filter: drop-shadow(0 8px 24px rgba(139, 94, 43, 0.4));
}

/* ============================================================
   ACCENT trên chrome — dùng biến --brand-chrome-* (khai báo ở :root/dark
   phía trên) để tự đổi theo theme: light = chữ/icon nâu đậm trên nền gold
   (hover = tint nâu nhạt, active/menu-open = pill nâu đặc + chữ trắng); dark
   = giữ nguyên hành vi cũ (chữ sáng trên nền đen, hover/active = tint gold).
   (đè khối "AdminLTE skin tweaks" của dark-mode.css: cùng selector,
   nạp sau nên thắng khi specificity bằng nhau)
   ============================================================ */
.skin-blue .sidebar-menu > li > a {
    color: var(--brand-chrome-text);
}

/* Tiêu đề trang trên header (vd "Dashboard", "Danh sách..."). Không có rule
   nào định nghĩa trước đó — ăn theo màu trắng mặc định của skin-blue, hợp
   với chrome đen cũ nhưng không hợp chrome gold/kem nhạt hiện tại. */
.page-title-header {
    color: var(--brand-chrome-text) !important;
}

.main-header .logo:hover {
    background: var(--brand-chrome-hover-bg);
}

.skin-blue .main-header .logo:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
    background: var(--brand-chrome-hover-bg) !important;
    color: var(--brand-chrome-text) !important;
}

/* Rest state (không chỉ :hover) — mặc định admin-header-menu.css là nền/viền
   trắng trong mờ + icon trắng, hợp chrome đen cũ nhưng gần như biến mất
   trên header gold/kem nhạt. !important vì AdminLTE.min.css's
   `.main-header .sidebar-toggle` (2 class) đặc thù hơn 1 class thường. */
.sidebar-toggle {
    background: var(--brand-chrome-active-bg) !important;
    border-color: var(--brand-chrome-border);
}
.sidebar-toggle .sidebar-toggle-icon {
    color: var(--brand-chrome-text);
}
.sidebar-toggle:hover {
    background: var(--brand-chrome-active-bg) !important;
    border-color: var(--brand-chrome-text);
}
.sidebar-toggle:hover .sidebar-toggle-icon {
    color: var(--brand-chrome-active-text);
}

.navbar-custom-menu .nav > li > a:hover {
    background: var(--brand-chrome-hover-bg);
}

.custom-header-profile:hover .user-image {
    border-color: var(--brand-chrome-border);
}

/* Nút SSO "Alan HRM" — trước đây inline style hardcode xanh Ocean Blue cũ
   (rgba(14,165,233,...)), xoá kèm luôn onmouseover/onmouseout JS trong
   header.blade.php, chuyển hẳn sang class + :hover CSS. Viền/chữ theo
   --brand-chrome-* để không "mất hút" trên header gold (light theme). */
.btn-alan-hrm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--brand-chrome-border);
    background: var(--brand-chrome-hover-bg);
    color: var(--brand-chrome-text);
    transition: var(--transition-base, all .2s ease);
    text-decoration: none !important;
}
.btn-alan-hrm:hover,
.btn-alan-hrm:focus {
    background: var(--brand-chrome-active-bg);
    border-color: var(--brand-chrome-border);
    color: var(--brand-chrome-text);
    box-shadow: 0 0 10px var(--brand-chrome-hover-bg);
}

/* Nút SSO "Elani Chat" — style giống hệt .btn-alan-hrm (2 nút cạnh nhau trong
   header, nhất quán), tách class riêng vì mỗi tích hợp giữ resource riêng
   (xem ElaniChatController/CheckElaniChatToken's comment về token riêng). */
.btn-elani-chat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--brand-chrome-border);
    background: var(--brand-chrome-hover-bg);
    color: var(--brand-chrome-text);
    transition: var(--transition-base, all .2s ease);
    text-decoration: none !important;
}
.btn-elani-chat:hover,
.btn-elani-chat:focus {
    background: var(--brand-chrome-active-bg);
    border-color: var(--brand-chrome-border);
    color: var(--brand-chrome-text);
    box-shadow: 0 0 10px var(--brand-chrome-hover-bg);
}

/* Hover (chưa active) — tint nhạt, chữ/icon giữ nguyên màu mặc định. */
.sidebar-menu li > a:hover > i {
    color: var(--brand-chrome-text) !important;
}
.skin-blue .sidebar-menu > li:hover > a {
    background: var(--brand-chrome-hover-bg) !important;
}

/* Active / menu-open — tint nâu siêu nhạt (light theme) / tint gold (dark,
   như cũ). Chữ/icon dùng --brand-chrome-active-text: nâu đậm ở light (nền
   giờ quá nhạt để chữ trắng đọc được), trắng ở dark (giữ nguyên). */
.sidebar-menu li.active > a > i,
.sidebar-menu .treeview.menu-open > a > .pull-right-container > i {
    color: var(--brand-chrome-active-text) !important;
}
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    background: var(--brand-chrome-active-bg) !important;
    color: var(--brand-chrome-active-text) !important;
    border-left: none !important;
}

/* Submenu (treeview) item được chọn/hover — cùng tint như active ở trên, để
   phân biệt rõ với mục cha. Không đi qua "> li" nên không bị rule top-level
   ở trên phủ; base rule gốc admin-header-menu.css (.sidebar-menu li.active
   > a) đang là rgba(79,135,255,.16) xanh cũ. */
.sidebar-menu .treeview-menu > li:hover > a,
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li.active > a:hover {
    background: var(--brand-chrome-active-bg) !important;
    color: var(--brand-chrome-active-text) !important;
}

/* Submenu mặc định (chưa active/hover) — vendor admin-header-menu.css tô
   #8aa4af (xám xanh) cho .treeview-menu > li > a, specificity CAO HƠN rule
   .sidebar-menu > li > a ở trên (thêm .treeview-menu) nên thắng. Đổi sang
   nâu nhạt cho đồng bộ, không dùng #8aa4af nữa. */
.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: var(--brand-chrome-text-muted);
}

/* ============================================================
   LOGIN LOGO — swap file theo nền, KHÔNG theo theme trực tiếp.
   - .visual-logo (panel lớn): nền giờ luôn ĐEN cả 2 theme (xem
     --color-visual-* trong login.css) → luôn dùng logo GOLD, không đổi
     theo theme nữa.
   - .login-logo-mobile (card di động, nằm trên nền form — vẫn đổi theo
     theme): gần trắng ở light (cần logo NÂU), gần đen ở dark (cần logo
     GOLD).
   Cả 2 <img> luôn render trong DOM, CSS chỉ ẩn/hiện theo data-theme.
   ============================================================ */
.visual-logo .nita-logo-img--brown,
.login-logo-mobile .nita-logo-img--gold {
    display: none;
}

html[data-theme="dark"] .login-logo-mobile .nita-logo-img--brown {
    display: none;
}

html[data-theme="dark"] .login-logo-mobile .nita-logo-img--gold {
    display: inline;
}

/* ============================================================
   Tàn dư accent xanh cũ (#4f87ff / rgba(79,135,255,...)) hardcode
   trực tiếp trong dark-mode.css — không đi qua --c-accent nên brand
   layer trước đó chưa phủ được. Đây là danh sách ĐÃ XÁC ĐỊNH (bounded),
   KHÔNG phải full sweep — không đụng tới class Tailwind ".bg-blue-*"
   (đấy là màu "blue" chủ đích, không phải accent thương hiệu).
   ============================================================ */
html[data-theme="dark"] input[type="checkbox"]:focus,
html[data-theme="dark"] input[type="radio"]:focus {
    outline: 2px solid rgba(212, 175, 55, 0.4);
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-header {
    /* "dark - gold - black, giảm yếu tố nâu xuống" — đen chủ đạo, nâu chỉ còn
       1 dải chuyển tiếp rất ngắn (20%, trước là 45%) trước khi vào gold. */
    background: linear-gradient(135deg, #0A0908 0%, var(--brand-brown-900) 20%, var(--brand-gold-500) 100%);
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-footer .btn:hover {
    background-color: rgba(212, 175, 55, 0.18) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-gold-500) !important;
    color: #2A1A0F !important;
}

html[data-theme="dark"] .cke_button:hover,
html[data-theme="dark"] .cke_button:focus,
html[data-theme="dark"] .cke_button:active,
html[data-theme="dark"] .cke_button_on {
    background: rgba(212, 175, 55, 0.18) !important;
}

html[data-theme="dark"] .progress-bar {
    background-color: var(--brand-gold-500) !important;
    color: #2A1A0F !important;
}

html[data-theme="dark"] .schedule-card.booking {
    border-left: 4px solid var(--brand-gold-500) !important;
}

html[data-theme="dark"] .btn-update-cskh-date {
    background: var(--brand-gold-500) !important;
    color: #2A1A0F !important;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3) !important;
}

html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-active .ant-steps-item-icon,
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-process .ant-steps-item-icon {
    background: var(--brand-gold-500) !important;
    border-color: var(--brand-gold-500) !important;
}
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-active .ant-steps-item-icon .ant-steps-icon,
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
    color: #2A1A0F !important;
}

html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-finish .ant-steps-item-icon {
    border-color: var(--brand-gold-500) !important;
}

/* ============================================================
   Chống "chớp đen" khi toggle dark/light trên các trang React
   (bảng lead-reports, customer-revenues, bookings...).

   Nguyên nhân: nội dung TRONG bảng (ô/th/td) được tô màu bằng CSS thuần
   (react.css/dark-mode.css, phản ứng NGAY khi <html data-theme> đổi), còn
   khung ngoài <Card>/<Table> (Ant Design) lấy màu nền từ theme TOKEN của
   antd — chỉ đổi SAU khi React re-render (AntdProvider có MutationObserver
   theo dõi data-theme rồi mới setState). Trong khoảng trễ đó, khung ngoài
   còn giữ màu theme CŨ trong khi ô bên trong đã chuyển màu MỚI ngay lập
   tức → lệch pha, nhìn như "chớp đen" trước khi khớp lại.

   Fix: ghim cứng nền/viền 2 khung hay bọc bảng nhất (.ant-card, .ant-table)
   bằng CSS thuần — TRÙNG giá trị token antd (xem Card/Table trong
   AntdProvider.jsx) nên không đổi giao diện, chỉ đổi tức thì thay vì chờ
   React. Thêm transition ngắn làm lưới an toàn cho phần tử antd khác chưa
   được ghim, để nếu còn lệch pha thì mờ dần thay vì chớp giật. */
.ant-card,
.ant-table,
.ant-table-container {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}
html[data-theme="dark"] .ant-card,
html[data-theme="dark"] .ant-table,
html[data-theme="dark"] .ant-table-container {
    background-color: var(--c-950) !important;
    border-color: rgba(44, 41, 37, 0.4) !important;
}

.ant-card,
.ant-table,
.ant-table-container,
.ant-table-cell,
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}