/**
 * 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 (10/2026 — palette "Mocha" của elani.com.vn):
 * - LIGHT theme (mặc định): màu chủ đạo nâu #694A34 (nút, link, active), nền
 *   kem/cream, chữ ink, viền "line" — palette từ main.css của elani.com.vn.
 *   Chrome (header + sidebar) nền nâu #694A34 gradient, chữ kem, mục cấp 1
 *   active = pill gold (xem section "LIGHT — Elani Mocha" cuối file).
 * - DARK theme: GIỮ NGUYÊN đen ấm + accent gold như trước đợt Mocha. Mọi biến
 *   dark tự khai báo lại trong khối html[data-theme="dark"] bên dưới, nên
 *   --brand-gold-* / --brand-brown-* KHÔNG được đổi (dark + login.css dark
 *   + dark-mode.css đang tham chiếu).
 * - 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 xanh/tím 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 theme TỐI (gold + nâu) — dark dùng, đừng đổi ===== */
    --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;

    /* ===== Raw palette "Mocha" — elani.com.vn (main.css :root) ===== */
    --elani-espresso: #3E2C20;
    /* Màu chủ đạo cả app (sếp chốt 02/10/2026) — mocha gốc của elani là #6F4E37. */
    --elani-mocha: #694A34;
    --elani-mocha-2: #8A6B4F;
    --elani-latte: #B08968;
    --elani-gold: #C2A06B;
    --elani-gold-soft: #D9C3A0;
    --elani-cream: #FAF6F0;
    --elani-cream-2: #F3EADF;
    --elani-sand: #EDE1D2;
    --elani-ink: #2C2019;
    --elani-muted: #7B6A5C;
    --elani-line: #E7DACB;
    --elani-shadow: 0 20px 55px -24px rgba(62, 44, 32, 0.45);
    --elani-shadow-sm: 0 10px 28px -14px rgba(62, 44, 32, 0.35);

    /* Font chung (cả 2 theme) — Be Vietnam Pro như elani.com.vn, nạp ở
       layouts/master.blade.php. Antd dùng cùng stack (theme.ts fontFamily). */
    --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ===== Primary accent (LIGHT) = MOCHA =====
       Thang 50–950 khớp 1:1 colors.mocha của resources/js/react/config/tokens.mjs
       (Tailwind *-primary-* + Antd). Dark theme khai báo lại gold bên dưới. */
    --color-primary: var(--elani-mocha);
    --color-primary-50: #FAF6F0;
    --color-primary-100: #F3EADF;
    --color-primary-200: #E7DACB;
    --color-primary-300: #CDB49B;
    --color-primary-400: #B08968;
    --color-primary-500: var(--elani-mocha);
    --color-primary-600: #5A3F2D;
    --color-primary-700: #3E2C20;
    --color-primary-800: #34251B;
    --color-primary-900: #2C2019;
    --color-primary-950: #1D1510;

    --color-primary-light: var(--elani-mocha-2);
    /* Hover tối dần về espresso — như nút "Đặt lịch" của elani. */
    --color-primary-dark: var(--elani-espresso);
    --color-primary-hover: var(--elani-espresso);
    --color-border-focus: var(--elani-mocha);

    --color-accent: var(--elani-gold);
    --color-accent-light: var(--elani-gold-soft);
    --color-accent-dark: #A88650;

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

    --gradient-primary: linear-gradient(135deg, var(--elani-mocha-2) 0%, var(--elani-mocha) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--elani-latte) 0%, var(--elani-mocha-2) 50%, var(--elani-mocha) 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--elani-mocha) 0%, var(--elani-espresso) 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(105, 74, 52, 0.08) 0%, rgba(176, 137, 104, 0.08) 100%);

    --shadow-primary: 0 4px 12px rgba(105, 74, 52, 0.25);
    --shadow-primary-md: 0 8px 24px rgba(105, 74, 52, 0.3);
    --shadow-primary-lg: 0 12px 32px rgba(105, 74, 52, 0.35);
    --shadow-primary-glow: 0 0 40px rgba(194, 160, 107, 0.3);
    --shadow-primary-colored: var(--elani-shadow);

    /* Mocha nền nút + chữ trắng = 7.4:1 (đạt AA). Dark khai báo lại nâu đậm
       (chữ trên nút gold). */
    --color-text-on-primary: #FFFFFF;

    /* ===== Semantic tokens của colors.css (dark-mode.css khai báo lại hết cho
       html[data-theme="dark"], nên chỉ ảnh hưởng LIGHT) — neutral ấm thay slate. */
    --color-text-primary: var(--elani-ink);
    --color-text-secondary: #4A3C31;
    --color-text-muted: var(--elani-muted);
    --color-text-light: #A8978A;
    --color-bg-secondary: var(--elani-cream);
    --color-bg-tertiary: var(--elani-cream-2);
    --color-border: var(--elani-line);
    --color-border-light: var(--elani-cream-2);
    --color-border-medium: #D6C8B8;
    --color-border-dark: #A8978A;
    --shadow-xs: 0 1px 2px rgba(62, 44, 32, 0.05);
    --shadow-sm: 0 2px 4px rgba(62, 44, 32, 0.06);
    --shadow: 0 4px 6px rgba(62, 44, 32, 0.07);
    --shadow-md: 0 10px 15px rgba(62, 44, 32, 0.1);
    --shadow-lg: 0 20px 25px rgba(62, 44, 32, 0.1);
    --shadow-xl: 0 25px 50px rgba(62, 44, 32, 0.15);
    --shadow-2xl: 0 30px 60px rgba(62, 44, 32, 0.2);

    /* Chrome (header + sidebar) — LIGHT theme: nền NÂU #694A34 + gradient
       (như dải topbar espresso→mocha của elani), chữ kem. Dark theme override
       riêng bên dưới (giữ nguyên đen). */
    --brand-chrome-header-bg: linear-gradient(100deg, #4A3324 0%, var(--elani-mocha) 45%, #7E5B42 100%);
    /* Sidebar: sẫm nhất ở trên (nối liền mép trái header) rồi sáng dần xuống #694A34. */
    --brand-chrome-bg: linear-gradient(180deg, #4A3324 0%, #5A3F2C 45%, var(--elani-mocha) 100%);
    --brand-chrome-bg-alt: transparent;
    --brand-chrome-text: #F6EBDD;
    --brand-chrome-text-muted: rgba(246, 235, 221, 0.72);
    --brand-chrome-icon: var(--elani-gold-soft);
    --brand-chrome-active-bg: rgba(255, 255, 255, 0.14);
    --brand-chrome-active-text: #FFFFFF;
    --brand-chrome-hover-bg: rgba(255, 255, 255, 0.08);
    --brand-chrome-border: rgba(255, 255, 255, 0.14);
}

/* ===== 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;
}

/* Font: AdminLTE gán 'Source Sans Pro' cho h1–h6, Bootstrap gán "Helvetica
   Neue" cho tooltip/popover — đưa hết về --font-sans (cả 2 theme). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.main-header .logo,
.tooltip,
.popover {
    font-family: var(--font-sans);
}

/* ============================================================
   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 mocha (light) / gold (dark).
   ============================================================ */
.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 theo biến --brand-chrome-*: light = nâu
   #694A34 gradient (xem thêm section "LIGHT — Elani Mocha" cuối file), dark =
   đen ấm viền gold
   (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 — header nền TỐI ở cả 2 theme (light = nâu #694A34, dark =
   đen) → luôn dùng logo GOLD; bản nâu không còn dùng trên header. */
.topbar-logo-img--brown {
    display: none;
}
.topbar-logo-img--gold {
    display: inline;
}
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 được tinh chỉnh tiếp ở section
   "LIGHT — Elani Mocha" cuối file; 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ũ; giờ theo --brand-chrome-text của từng theme. */
.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 của theme sáng. !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 luôn TỐI ở cả 2 theme (light = espresso,
     dark = đen — xem --color-visual-* trong login.css) → luôn dùng logo
     GOLD, không đổi theo theme.
   - .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: #E7DACB !important; /* --elani-line = colorBorderSecondary (AntdProvider light) */
}
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;
}

/* ============================================================
   LIGHT — Elani Mocha (elani.com.vn)
   Mọi rule ở đây scope html:not([data-theme="dark"]) → dark theme KHÔNG bị
   ảnh hưởng. Specificity cố ý cao + !important ở những chỗ rule cũ
   (AdminLTE skin-blue, admin-header-menu.css "FINAL PURPLE LOCK", các rule
   chrome dùng chung phía trên) đang dùng !important.
   ============================================================ */

/* ----- Nền trang + chữ ----- */
html:not([data-theme="dark"]) body {
    color: var(--elani-ink);
}
html:not([data-theme="dark"]) .content-wrapper,
html:not([data-theme="dark"]) .right-side {
    background-color: var(--elani-cream);
}

/* Link mặc định: mocha thay xanh #3c8dbc của AdminLTE. :where() để specificity
   chỉ (0,0,1)/(0,1,1) — mọi rule có class (.btn, .label, .nav-tabs…) vẫn
   thắng, không làm chữ nút primary thành mocha-trên-mocha. */
:where(html:not([data-theme="dark"])) a {
    color: var(--elani-mocha);
}
:where(html:not([data-theme="dark"])) a:hover,
:where(html:not([data-theme="dark"])) a:focus {
    color: var(--elani-espresso);
}

/* ----- Header: nền nâu #694A34 + gradient ngang (như dải topbar elani).
   Gradient đặt trên .main-header (1 box duy nhất), .logo/.navbar trong suốt —
   tránh đường nối lệch tông giữa 2 box (xem comment CHROME phía trên). ----- */
html:not([data-theme="dark"]) .main-header,
html:not([data-theme="dark"]) .skin-blue .main-header {
    background: var(--brand-chrome-header-bg) !important;
    border-bottom: 0;
    box-shadow: 0 6px 18px -12px rgba(44, 32, 25, 0.6);
}
html:not([data-theme="dark"]) .skin-blue .main-header .navbar,
html:not([data-theme="dark"]) .skin-blue .main-header .logo {
    background: transparent !important;
    border-bottom: 0;
}
html:not([data-theme="dark"]) .skin-blue .main-header .logo {
    border-right: 1px solid var(--brand-chrome-border) !important;
}
html:not([data-theme="dark"]) .skin-blue .main-header .logo:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
html:not([data-theme="dark"]) .main-header .logo .topbar-logo-img {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* Link trên header (tên user...) — chữ kem, hover gold-soft (như link footer elani). */
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a {
    color: var(--brand-chrome-text);
}
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a:hover,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a:active,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a:focus,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav .open > a,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav .open > a:hover,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav .open > a:focus,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > .active > a {
    background: transparent !important;
    color: var(--elani-gold-soft) !important;
}
html:not([data-theme="dark"]) .custom-header-profile .user-image {
    border-color: rgba(255, 255, 255, 0.3);
}
html:not([data-theme="dark"]) .custom-header-profile:hover .user-image {
    border-color: var(--elani-gold-soft);
}

/* Nút SSO (Alan HRM / Elani Chat) — viền kem mờ trên nền nâu, hover viền
   gold-soft. */
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a.btn-alan-hrm,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a.btn-elani-chat {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: var(--brand-chrome-text);
    box-shadow: none;
}
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a.btn-alan-hrm:hover,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a.btn-alan-hrm:focus,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a.btn-elani-chat:hover,
html:not([data-theme="dark"]) .skin-blue .main-header .navbar .nav > li > a.btn-elani-chat:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--elani-gold-soft);
    color: #FFFFFF !important;
    box-shadow: none;
}

/* Nút thu/mở sidebar (nằm vắt giữa logo và navbar) — nút tròn kem, icon nâu. */
html:not([data-theme="dark"]) .sidebar-toggle {
    background: var(--elani-cream) !important;
    border-color: transparent;
}
html:not([data-theme="dark"]) .sidebar-toggle .sidebar-toggle-icon {
    color: var(--elani-mocha);
}
html:not([data-theme="dark"]) .sidebar-toggle:hover {
    background: #FFFFFF !important;
    border-color: var(--elani-gold-soft);
}
html:not([data-theme="dark"]) .sidebar-toggle:hover .sidebar-toggle-icon {
    color: var(--elani-espresso);
}

/* ----- Sidebar: nền nâu gradient dọc (--brand-chrome-bg), chữ kem, icon
   gold-soft -----
   Menu đánh dấu .active theo TIỀN TỐ URL (vd /lead-reports/search làm 7 mục
   con cùng active) → chỉ mục cấp 1 active mới tô pill gold đặc; mục con
   active = tint trắng mờ để không thành một cột vàng. */
html:not([data-theme="dark"]) .skin-blue .sidebar-menu > li.header {
    background: transparent !important;
    color: var(--brand-chrome-text-muted) !important;
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu .treeview-menu > li > a {
    color: rgba(246, 235, 221, 0.82);
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li > a > i,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li > a .pull-right-container > i {
    color: var(--brand-chrome-icon);
}

/* Hover: bỏ quy tắc "li:hover > a" cũ (admin-header-menu.css ép chữ #FFF khi
   rê chuột vào CẢ submenu của mục cha) — chỉ chính link được rê mới đổi. */
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu > li:hover > a {
    background: transparent !important;
    color: var(--brand-chrome-text) !important;
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu .treeview-menu > li:hover > a {
    background: transparent !important;
    color: rgba(246, 235, 221, 0.82) !important;
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li > a:hover,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li > a:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li > a:hover > i,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li > a:focus > i,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li > a:hover .pull-right-container > i {
    color: #FFFFFF !important;
}

/* Nhóm (treeview) đang mở / chứa trang hiện tại — nền tối hơn một nấc, chữ
   trắng đậm. */
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li.treeview.active > a,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li.treeview.menu-open > a {
    background: rgba(0, 0, 0, 0.16) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li.treeview.active > a > i,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li.treeview.menu-open > a > i,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li.treeview.active > a .pull-right-container > i,
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu li.treeview.menu-open > a .pull-right-container > i {
    color: var(--elani-gold-soft) !important;
}

/* Mục cấp 1 active (Dashboard, Xem doanh thu…) — pill gold gradient chữ nâu
   đậm (như nút .btn.gold của elani). */
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu > li.active:not(.treeview) > a {
    background: linear-gradient(120deg, var(--elani-gold), var(--elani-latte)) !important;
    color: var(--elani-ink) !important;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.55) !important;
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu > li.active:not(.treeview) > a > i {
    color: var(--elani-ink) !important;
}

/* Mục con active — tint trắng mờ, chữ trắng. Không in đậm: tên chi nhánh dài
   ("CS 106 Đại Cồ Việt") sẽ xuống dòng trong sidebar 255px. */
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu .treeview-menu > li.active:not(.treeview) > a {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
}
html:not([data-theme="dark"]) .skin-blue .main-sidebar .sidebar-menu .treeview-menu > li.active:not(.treeview) > a > i {
    color: var(--elani-gold-soft) !important;
}

/* ----- Dropdown user trên header ----- */
html:not([data-theme="dark"]) .navbar-custom-menu .dropdown-menu {
    background: var(--elani-cream);
    border: 1px solid var(--elani-line);
    box-shadow: var(--elani-shadow);
}
html:not([data-theme="dark"]) .navbar-custom-menu .dropdown-menu .user-header {
    background: linear-gradient(120deg, var(--elani-espresso), var(--elani-mocha));
}
html:not([data-theme="dark"]) .navbar-custom-menu .dropdown-menu .user-footer {
    background: var(--elani-cream);
    border-top: 1px solid var(--elani-line);
}

/* ----- Thành phần Bootstrap/AdminLTE dùng chung ----- */
html:not([data-theme="dark"]) .form-control:focus {
    border-color: var(--elani-mocha);
    box-shadow: 0 0 0 3px rgba(105, 74, 52, 0.12);
}
html:not([data-theme="dark"]) .select2-container--default.select2-container--focus .select2-selection--multiple,
html:not([data-theme="dark"]) .select2-container--default.select2-container--open .select2-selection--single,
html:not([data-theme="dark"]) .select2-container--default.select2-container--open .select2-selection--multiple,
html:not([data-theme="dark"]) .select2-container--default .select2-selection--single:focus {
    border-color: var(--elani-mocha);
}
html:not([data-theme="dark"]) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--elani-sand);
    color: var(--elani-mocha);
}
html:not([data-theme="dark"]) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--elani-cream-2);
    border-color: var(--elani-line);
    color: var(--elani-mocha);
}
html:not([data-theme="dark"]) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--elani-muted);
}

html:not([data-theme="dark"]) .btn-default {
    background-color: #FFFFFF;
    border-color: var(--elani-line);
    color: var(--elani-ink);
}
html:not([data-theme="dark"]) .btn-default:hover,
html:not([data-theme="dark"]) .btn-default:focus,
html:not([data-theme="dark"]) .btn-default:active,
html:not([data-theme="dark"]) .btn-default.active,
html:not([data-theme="dark"]) .open > .dropdown-toggle.btn-default {
    background-color: #FFFFFF;
    border-color: var(--elani-mocha);
    color: var(--elani-mocha);
}

html:not([data-theme="dark"]) .pagination > li > a,
html:not([data-theme="dark"]) .pagination > li > span {
    color: var(--elani-mocha);
    border-color: var(--elani-line);
}
html:not([data-theme="dark"]) .pagination > .active > a,
html:not([data-theme="dark"]) .pagination > .active > a:hover,
html:not([data-theme="dark"]) .pagination > .active > a:focus,
html:not([data-theme="dark"]) .pagination > .active > span,
html:not([data-theme="dark"]) .pagination > .active > span:hover,
html:not([data-theme="dark"]) .pagination > .active > span:focus {
    background-color: var(--elani-mocha);
    border-color: var(--elani-mocha);
    color: #FFFFFF;
}

html:not([data-theme="dark"]) .nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--elani-mocha);
}
html:not([data-theme="dark"]) .dropdown-menu > li > a:hover,
html:not([data-theme="dark"]) .dropdown-menu > li > a:focus {
    background-color: var(--elani-sand);
    color: var(--elani-mocha);
}

/* ----- Hình khối "vừa phải": card bo 14–16px + bóng nâu mềm của elani; nút
   giữ nguyên bo 8px. Box của bộ lọc (.object-list-filter) giữ nguyên vì là
   dropdown dạng pill. ----- */
html:not([data-theme="dark"]) .content .box:not(.object-list-filter .box),
html:not([data-theme="dark"]) .content .panel,
html:not([data-theme="dark"]) .content .nav-tabs-custom {
    border-radius: 14px;
    box-shadow: var(--elani-shadow-sm);
}
html:not([data-theme="dark"]) .content .box:not(.object-list-filter .box) {
    border-top-color: var(--elani-line);
}
html:not([data-theme="dark"]) .content .box.box-primary:not(.object-list-filter .box) {
    border-top-color: var(--color-primary);
}
html:not([data-theme="dark"]) .content .box:not(.object-list-filter .box) > .box-header:first-child,
html:not([data-theme="dark"]) .content .panel > .panel-heading:first-child {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}
html:not([data-theme="dark"]) .content .box:not(.object-list-filter .box) > .box-footer:last-child,
html:not([data-theme="dark"]) .content .panel > .panel-footer:last-child {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}
html:not([data-theme="dark"]) .box-header.with-border {
    border-bottom-color: var(--elani-line);
}
/* Card antd ngoài cùng (bo 16px do token borderRadiusLG ở AntdProvider). */
html:not([data-theme="dark"]) .ant-card:not(.ant-card .ant-card) {
    box-shadow: var(--elani-shadow-sm);
}

/* Nút chuyển sáng/tối — viền line, icon mocha. */
html:not([data-theme="dark"]) .theme-toggle-btn {
    border-color: var(--elani-line);
    color: var(--elani-mocha);
    box-shadow: var(--elani-shadow-sm);
}