/* ============================================================
   theme-dark.css — Clean SaaS dark mode
   Neutral dark surfaces, brand tokens already redefined for
   html[data-theme="dark"] in _variables.css — this file only
   carries the shell/component selectors that need extra rules
   beyond a plain var() swap (borders, hover states, etc).
   ============================================================ */

/* TOPBAR */
html[data-theme="dark"] .page-main-header {
    background: var(--white) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .page-main-header .logo-wrapper h4,
html[data-theme="dark"] .page-main-header .main-header-left h4 { color: var(--text-main) !important; }

html[data-theme="dark"] #sidebar-toggle {
    background: var(--bg-body) !important; border-color: var(--border) !important; color: var(--text-main) !important;
}
html[data-theme="dark"] #sidebar-toggle:hover { background: var(--primary-light) !important; color: var(--primary) !important; }

html[data-theme="dark"] .page-main-header .nav-right > ul.nav-menus > li > a,
html[data-theme="dark"] .page-main-header .nav-right .notification-box,
html[data-theme="dark"] .page-main-header .nav-right .mode {
    background: var(--bg-body) !important; border-color: var(--border) !important; color: var(--text-main) !important;
}
html[data-theme="dark"] .page-main-header .nav-right > ul.nav-menus > li > a i.ph,
html[data-theme="dark"] .page-main-header .nav-right .notification-box i.ph,
html[data-theme="dark"] .page-main-header .nav-right .notification-box i.fa,
html[data-theme="dark"] .page-main-header .nav-right .mode i.ph { color: var(--text-main) !important; }
html[data-theme="dark"] .page-main-header .nav-right > ul.nav-menus > li > a:hover,
html[data-theme="dark"] .page-main-header .nav-right .notification-box:hover,
html[data-theme="dark"] .page-main-header .nav-right .mode:hover {
    background: var(--primary-light) !important; color: var(--primary) !important;
}
html[data-theme="dark"] .page-main-header .nav-right .notification-box .dot-animated,
html[data-theme="dark"] .page-main-header .nav-right .notification-box .notif-badge {
    background: var(--danger) !important; box-shadow: 0 0 0 2px var(--white) !important;
}

html[data-theme="dark"] .page-main-header .nav-right .btn-primary-light {
    background: var(--bg-body) !important; border-color: var(--border) !important; color: var(--text-main) !important;
}
html[data-theme="dark"] .page-main-header .nav-right .btn-primary-light:hover {
    background: var(--primary-light) !important; color: var(--primary) !important;
}

/* SIDEBAR SHELL */
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav {
    background: var(--white) !important; border-right-color: var(--border) !important;
}
html[data-theme="dark"] .main-nav .sidebar-user img.rounded-circle { background: var(--bg-body) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .sidebar-main-title h6 { color: var(--text-muted) !important; }
html[data-theme="dark"] .main-nav .nav-menu li.sidebar-module-divider { border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .main-nav .nav-menu li.sidebar-module-divider-icon hr { border-top-color: var(--border) !important; }

/* NAV ITEMS */
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a { color: var(--text-main) !important; }
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a > i:not(.collapse-icon):not(.fa-angle-down):first-child,
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a > [class*="ph-"]:not(.collapse-icon) {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a:hover {
    background: var(--primary-light) !important; color: var(--primary) !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a:hover > i:not(.collapse-icon):not(.fa-angle-down):first-child,
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a:hover > [class*="ph-"]:not(.collapse-icon) {
    color: var(--primary) !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active,
html[data-theme="dark"] .main-nav .main-navbar .nav-menu > li > a.active {
    background: var(--primary-light) !important; color: var(--primary) !important; box-shadow: none !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active > i:not(.collapse-icon):not(.fa-angle-down):first-child,
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active > [class*="ph-"]:not(.collapse-icon) {
    color: var(--primary) !important;
}

/* SIDEBAR-AREA active */
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li.sidebar-area > a.menu-title.active,
html[data-theme="dark"] .main-nav .main-navbar .nav-menu > li.sidebar-area > a.menu-title.active {
    background: var(--primary-light) !important; color: var(--primary) !important;
    border-color: transparent !important; box-shadow: none !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li.sidebar-area > a.menu-title.active .nav-label,
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li.sidebar-area > a.menu-title.active .collapse-icon { color: var(--primary) !important; }
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li.sidebar-area > a.menu-title.active > [class*="ph-"]:not(.collapse-icon),
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li.sidebar-area > a.menu-title.active > i:not(.collapse-icon) {
    color: var(--primary) !important;
}

/* SUBMENU */
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu .nav-submenu li a { color: var(--text-muted) !important; }
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu .nav-submenu li a:hover {
    background: var(--primary-light) !important; color: var(--primary) !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu .nav-submenu li a.active {
    background: var(--primary-light) !important; color: var(--primary) !important;
    box-shadow: inset 2px 0 0 var(--primary) !important;
}

/* ICON-ONLY MODE */
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav.close_icon .main-navbar .nav-menu > li.sidebar-area-icon > a i:not(.collapse-icon),
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav.close_icon .main-navbar .nav-menu > li.sidebar-area-icon > a [class*="ph-"]:not(.collapse-icon) {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav.close_icon .main-navbar .nav-menu > li.sidebar-area-icon > a:hover i:not(.collapse-icon),
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav.close_icon .main-navbar .nav-menu > li.sidebar-area-icon > a:hover [class*="ph-"]:not(.collapse-icon) {
    background: var(--primary-light) !important; color: var(--primary) !important;
}
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav.close_icon .main-navbar .nav-menu > li.sidebar-area-icon > a.active i:not(.collapse-icon),
html[data-theme="dark"] .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav.close_icon .main-navbar .nav-menu > li.sidebar-area-icon > a.active [class*="ph-"]:not(.collapse-icon) {
    background: var(--primary-light) !important; color: var(--primary) !important;
}

/* FLYOUT */
html[data-theme="dark"] .sidebar-flyout { background: var(--white) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; }
html[data-theme="dark"] .flyout-header { color: var(--text-muted) !important; border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .flyout-link { color: var(--text-main) !important; }
html[data-theme="dark"] .flyout-link > i { color: var(--text-muted) !important; }
html[data-theme="dark"] .flyout-link:hover { background: var(--primary-light) !important; color: var(--primary) !important; }
html[data-theme="dark"] .flyout-link:hover > i { color: var(--primary) !important; }
html[data-theme="dark"] .flyout-link.active { background: var(--primary-light) !important; color: var(--primary) !important; box-shadow: inset 2px 0 0 var(--primary) !important; }
html[data-theme="dark"] .flyout-link.active > i { color: var(--primary) !important; }
html[data-theme="dark"] .main-nav .nav-menu li.back-btn { background: var(--white) !important; }

/* GENERAL SURFACES */
html[data-theme="dark"] body { background: var(--bg-body) !important; color: var(--text-main); }
html[data-theme="dark"] .page-body,
html[data-theme="dark"] .page-wrapper .page-body-wrapper .page-body { background-color: var(--bg-body) !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .toast:not(#toast-container *),
html[data-theme="dark"] .list-group-item {
    background-color: var(--white) !important; color: var(--text-main) !important; border-color: var(--border) !important;
}
html[data-theme="dark"] .dropdown-item { color: var(--text-main) !important; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: var(--primary-light) !important; color: var(--primary) !important; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .select2-container--default .select2-selection {
    background-color: var(--bg-body) !important; color: var(--text-main) !important; border-color: var(--border) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: var(--text-muted) !important; }
html[data-theme="dark"] .table { color: var(--text-main) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--white) !important; color: var(--text-main) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .table-sticky th { background: var(--white) !important; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-main) !important; }
html[data-theme="dark"] .text-dark { color: var(--text-main) !important; }
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* Bootstrap's bg-light/bg-white là utility cố định (#f8f9fa / #fff, specificity (0,1,0)
   + !important — xem assets/css/bootstrap.css). Chúng được dùng ở partial modal dùng
   chung Mio.View/_ModalForm.cshtml (`modal-header bg-light text-dark`), mà file đó thuộc
   thư viện khung nên không sửa được.

   Bản trước ở đây GIỮ nền sáng rồi ép màu chữ về #18181B. Cách đó để lại chip sáng giữa
   nền tối, và không phủ hết mọi chữ bên trong -> có chỗ chữ sáng trên nền sáng.
   Nay đảo lại: cho NỀN đổi theo theme, chữ thừa hưởng token bình thường.

   Selector (0,2,0) + !important nên thắng utility gốc (0,1,0). */
html[data-theme="dark"] .bg-light { background-color: var(--white) !important; }
html[data-theme="dark"] .bg-white { background-color: var(--white) !important; }

/* .modal-content đã là var(--white) ở khối trên; cho thân modal chìm hơn header một bậc
   để header vẫn nổi lên như cảm giác thường thấy ở light mode.

   Vì `.modal-content` đã xuất hiện ở khối GENERAL SURFACES phía trên, luật này (cùng
   specificity (0,2,0), đứng sau trong file) sẽ thắng — đây là chủ đích. */
html[data-theme="dark"] .modal-content { background-color: var(--bg-body) !important; }

/* ============================================================
   Màu chữ của CSS vendor không theo theme — chỉ đè ở dark mode.
   Phát hiện bằng quét tương phản WCAG (ngưỡng 3.0) trên 24 route × 2 theme.
   Không sửa được tại gốc vì mọi luật dưới đây nằm trong wwwroot/assets/css/ (vendor).
   ============================================================ */

/* style.css:123 a{color:#24695c} + a:hover{color:#394a7d} — trên nền tối chỉ còn
   ratio 2.22 (footer "YellowDuck Company" xuất hiện ở MỌI trang).
   Specificity (0,1,2) nên các utility .text-* của Bootstrap (0,1,0 + !important)
   vẫn thắng, link mang màu chủ ý không bị đổi. */
html[data-theme="dark"] a { color: var(--primary); }
html[data-theme="dark"] a:hover { color: var(--primary-hover); }

/* datatables.css:38 — chữ #333 trên nền var(--white) tối, ratio 1.40 */
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_info,
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_length,
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_length label,
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter,
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label {
    color: var(--text-muted) !important;
}

/* color-7.css:1884 .btn-light{background-color:#ddeaf7} là nền sáng cố định, mà chữ
   thừa hưởng --text-main (sáng ở dark) -> ratio 1.11, gần như mất hẳn chữ.
   Cho nút này về surface tối kèm chữ token, giống các nút khác ở dark. */
html[data-theme="dark"] .btn-light {
    background-color: var(--white) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
    background-color: var(--primary-light) !important;
    color: var(--text-main) !important;
}

/* select2.css — chữ #444 cho giá trị đã chọn và cho từng option trong dropdown */
html[data-theme="dark"] .select2-container--default .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-results__option {
    color: var(--text-main) !important;
}
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-results__options {
    background-color: var(--white) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}