/* ============================================================================
 *  custom.css — Perfex 3.0.4 contrast boost cho VietNet
 *
 *  Mục tiêu:
 *    1. Giữ DARK header (slate-800) theo brand VietNet
 *    2. FIX icon + search trên dark header → light/white để dễ đọc
 *    3. Bump contrast text body lên slate-700
 *    4. Saturate buttons (primary/success/danger/warning/info) cho rõ hơn
 *
 *  Auto-loaded bởi assets_helper.php nếu file này tồn tại.
 *  Xóa file → tự về defaults 3.0.4.
 * ============================================================================ */

/* === Body & main text === */
body, body > * {
    color: #334155 !important;   /* slate-700 thay vì slate-500/600 */
}

/* ============================================================================
 *  SIDEBAR (giữ dark, Perfex 3.0.4 default — chỉ bump contrast menu items)
 * ============================================================================ */
#menu .menu-icon-wrap .menu-text-wrapper,
#menu .menu-link,
#menu a {
    color: #cbd5e1 !important;    /* slate-300 — sáng lên trên dark sidebar */
}
#menu .menu-link:hover,
#menu li:hover > a {
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
}
#menu li.active > a {
    color: #ffffff !important;
    background: rgba(37,99,235,0.20) !important;  /* primary-blue tint */
    border-left: 3px solid #2563eb !important;
}

/* ============================================================================
 *  TOP HEADER — DARK (slate-800) + LIGHT icons/text/search
 * ============================================================================ */
#header {
    background: #1e293b !important;                    /* slate-800 — giữ brand cũ */
    border-bottom: 1px solid #0f172a !important;       /* slate-900 */
}

/* Generic text & links trên dark header → light/white */
#header,
#header nav,
#header a,
#header .btn-link {
    color: #e2e8f0 !important;                          /* slate-200 */
}
#header a:hover {
    color: #ffffff !important;
}

/* === Hamburger hide-menu icon === */
#header .hide-menu {
    color: #cbd5e1 !important;                          /* slate-300 */
    cursor: pointer;
}
#header .hide-menu:hover,
#header .hide-menu i:hover {
    color: #ffffff !important;
}
#header .hide-menu .fa,
#header .hide-menu i {
    color: inherit !important;
}

/* === Search input — dark transparent bg + light text/placeholder === */
#header #search_input,
#top_search input[type="search"] {
    background: rgba(255,255,255,0.10) !important;     /* trắng mờ */
    color: #ffffff !important;                          /* text trắng */
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 22px !important;
    padding-left: 18px !important;
    padding-right: 44px !important;
    height: 40px !important;
    box-shadow: none !important;
}
#header #search_input:hover,
#top_search input[type="search"]:hover {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.26) !important;
}
#header #search_input:focus,
#top_search input[type="search"]:focus {
    background: rgba(255,255,255,0.22) !important;
    border-color: #60a5fa !important;                   /* blue-400 cho dark bg */
    box-shadow: 0 0 0 3px rgba(96,165,250,0.20) !important;
    outline: none !important;
    color: #ffffff !important;
}
#header #search_input::placeholder,
#top_search input[type="search"]::placeholder {
    color: #cbd5e1 !important;                          /* slate-300 — sáng */
    opacity: 1 !important;
}

/* Search button (icon kính lúp) */
#top_search_button button,
#top_search_button .btn {
    color: #cbd5e1 !important;
    background: transparent !important;
    border: 0 !important;
}
#top_search_button button:hover {
    color: #ffffff !important;
}
#top_search_button button .fa,
#top_search_button i,
#top_search_button .fa {
    color: inherit !important;
}

/* === Header right-side icons (quick-action +, notifications, etc.) === */
#header .icon,
#header .icon a,
#header .navbar-nav > li > a,
#header .navbar-nav > li > a > i,
#header .navbar-nav > li > a > .fa {
    color: #e2e8f0 !important;
}
#header .icon a:hover,
#header .icon a:hover .fa,
#header .icon a:hover i,
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a:hover .fa,
#header .navbar-nav > li > a:hover i {
    color: #ffffff !important;
}

/* Mọi icon trong header default sáng — override tailwind text-neutral */
#header i,
#header .fa,
#header .fa-regular,
#header .fa-solid {
    color: #e2e8f0;
}
#header a:hover i,
#header a:hover .fa {
    color: #ffffff;
}

/* Quick-action "+" round button — sáng pop trên dark */
#header .tw-bg-primary-600,
#header .tw-bg-primary-700 {
    background-color: #3b82f6 !important;               /* blue-500 — sáng hơn cho dark bg */
    color: #ffffff !important;
}
#header .tw-bg-primary-600 i,
#header .tw-bg-primary-600 .fa,
#header .tw-text-white,
#header .!tw-text-white {
    color: #ffffff !important;
}
#header a:hover .tw-bg-primary-600,
#header .group:hover .tw-bg-primary-600 {
    background-color: #2563eb !important;
}

/* Notification bell badge / red count dot */
#header .badge,
#header .label-danger,
#header .tw-bg-danger-500 {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 1.5px solid #1e293b !important;             /* outline để nổi trên header dark */
}

/* === Notification bell wrapper + icon (Perfex hard-code text-neutral-900 + light border) === */
#header .notifications-icon,
#header .notifications-wrapper a {
    color: #e2e8f0 !important;
}
/* Wrapping round button của notifications icon — Perfex set border-neutral-200/60 (mờ trên dark) */
#header .notifications-icon > span:first-child,
#header .notifications-wrapper .dropdown-toggle > span:first-child {
    border-color: rgba(255,255,255,0.20) !important;
    background: rgba(255,255,255,0.05) !important;
}
#header .notifications-icon:hover > span:first-child,
#header .notifications-wrapper .dropdown-toggle:hover > span:first-child,
#header .notifications-wrapper .dropdown-toggle.tw-group:hover > span:first-child {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.30) !important;
}
/* Icon SVG bên trong — Perfex hard-code tw-text-neutral-900 */
#header .notifications-icon svg,
#header .notifications-wrapper svg,
#header .notifications-icon .tw-text-neutral-900,
#header svg.tw-text-neutral-900,
#header .tw-text-neutral-900 {
    color: #f1f5f9 !important;                          /* slate-100 sáng trên dark */
    stroke: #f1f5f9 !important;
}
#header .notifications-icon:hover svg,
#header .notifications-wrapper:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
/* Notification count badge (warning yellow) — giữ vàng nhưng rõ hơn trên dark */
#header .icon-notifications,
#header .bg-warning {
    background: #fbbf24 !important;                     /* amber-400 sáng pop */
    color: #0f172a !important;
    border: 1.5px solid #1e293b !important;
    font-weight: 700 !important;
}

/* === Timer widget — BỎ HOÀN TOÀN === */
#header .header-timers,
#header .timer-button,
#header #top-timers,
#header .started-timers-top,
li.header-timers {
    display: none !important;
}

/* === Newsfeed core icon (Perfex built-in) — BỎ HOÀN TOÀN ===
 * Module newsfeed_pro của VietNet đã thay thế hoàn toàn newsfeed core.
 * Ẩn cả desktop icon (line 148) và mobile link trong dropdown (line 129).
 */
#header .header-newsfeed,
#header .open_newsfeed,
li.header-newsfeed {
    display: none !important;
}

/* Profile avatar text (tên user góc phải) */
#header .small-headline,
#header .navbar-nav .user-profile,
#header .navbar-nav .user-profile-name,
#header .tw-text-neutral-800 {
    color: #ffffff !important;
}

/* === Dropdowns mở từ header → panel sáng === */
#header .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 32px rgba(15,23,42,0.20) !important;
    border-radius: 8px !important;
}
/* Mọi text/link bên trong dropdown panel — slate-700 base */
#header .dropdown-menu,
#header .dropdown-menu li,
#header .dropdown-menu li > a,
#header .dropdown-menu > li > a,
#header .dropdown-menu a,
#header .dropdown-menu div {
    color: #334155 !important;
}
#header .dropdown-menu li > a:hover,
#header .dropdown-menu > li > a:hover,
#header .dropdown-menu a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
#header .dropdown-menu li > a i,
#header .dropdown-menu li > a .fa {
    color: #64748b !important;
}
#header .dropdown-menu li > a:hover i,
#header .dropdown-menu li > a:hover .fa {
    color: #2563eb !important;
}
#header .dropdown-menu .dropdown-header {
    color: #64748b !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    padding: 8px 16px 4px;
}

/* === "Đánh dấu tất cả là đã đọc" link — action-style xanh nổi bật === */
#header .dropdown-menu.notifications > div > a,
#header .dropdown-menu a[onclick*="mark_all_notifications"] {
    color: #2563eb !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    background: transparent !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}
#header .dropdown-menu.notifications > div > a:hover,
#header .dropdown-menu a[onclick*="mark_all_notifications"]:hover {
    color: #1d4ed8 !important;
    background: #eff6ff !important;     /* blue-50 hover bg */
    text-decoration: underline !important;
}

/* Unread notification highlight rõ hơn */
#header .dropdown-menu.notifications .unread-notification {
    background: #eff6ff !important;
}
#header .dropdown-menu.notifications .unread-notification:hover {
    background: #dbeafe !important;
}

/* === Search results dropdown (sáng để dễ đọc) — bỏ border, chỉ shadow === */
#search_results,
#search-history {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 12px 32px rgba(15,23,42,0.18) !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    color: #334155 !important;
    overflow: hidden;
}
#search_results li > a,
#search-history li > a,
.search-results li > a {
    color: #334155 !important;
}
#search_results li > a:hover,
#search-history li > a:hover,
.search-results li > a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
.search-results .dropdown-header {
    color: #1e293b !important;
    font-weight: 700;
    background: #f8fafc !important;
}

/* ============================================================================
 *  CARDS / PANELS / TABLES
 * ============================================================================ */
.panel,
.panel-full,
.tw-bg-white {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}

table.table > thead > tr > th,
.dataTables_wrapper thead th {
    background: #f8fafc !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
table.table > tbody > tr > td {
    border-top: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
table.table-striped > tbody > tr:nth-of-type(odd) {
    background: #f8fafc !important;
}

/* ============================================================================
 *  BUTTONS — bump contrast tất cả variants
 *  Chỉ scope ngoài #header để không đè quick-action button trong header.
 * ============================================================================ */

/* PRIMARY */
.btn-primary,
body:not(#header) .tw-bg-primary-600 {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #1d4ed8 !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

/* SUCCESS */
.btn-success {
    background-color: #16a34a !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: #15803d !important;
    border-color: #166534 !important;
    color: #ffffff !important;
}

/* DANGER */
.btn-danger {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
}

/* WARNING */
.btn-warning {
    background-color: #f59e0b !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #d97706 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

/* INFO */
.btn-info {
    background-color: #0891b2 !important;
    border-color: #0e7490 !important;
    color: #ffffff !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #0e7490 !important;
    border-color: #155e75 !important;
    color: #ffffff !important;
}

/* DEFAULT — secondary clean white button */
.btn-default {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
.btn-default:hover,
.btn-default:focus {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

/* OUTLINE variants */
.btn-outline-primary {
    color: #2563eb !important;
    border: 1px solid #2563eb !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}
.btn-outline-success {
    color: #16a34a !important;
    border: 1px solid #16a34a !important;
    background: transparent !important;
}
.btn-outline-success:hover {
    background: #16a34a !important;
    color: #ffffff !important;
}
.btn-outline-danger {
    color: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    background: transparent !important;
}
.btn-outline-danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* Button color text utilities Perfex 3.0.4 — chỉ scope ngoài header */
body:not(#header) .tw-text-primary-600 { color: #2563eb !important; }
.tw-text-success-600,
.tw-text-success-500 { color: #16a34a !important; }
.tw-text-danger-600,
.tw-text-danger-500 { color: #dc2626 !important; }
.tw-text-warning-600,
.tw-text-warning-500 { color: #d97706 !important; }

/* ============================================================================
 *  FORM INPUTS — border rõ hơn + focus state có ring
 *  Chỉ áp ngoài #header (vì header search input có style riêng phía trên).
 * ============================================================================ */
.form-control:not(#search_input),
input.form-control:not(#search_input),
select.form-control,
textarea.form-control {
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    background: #ffffff;
}
.form-control:not(#search_input):focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
    outline: none !important;
}
.form-control::placeholder {
    color: #94a3b8;
}

/* Bootstrap-Select dropdown */
.bootstrap-select .dropdown-toggle {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #1e293b !important;
}
.bootstrap-select.open .dropdown-toggle {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* ============================================================================
 *  LINKS, HEADINGS, BADGES
 * ============================================================================ */
a:not(.btn):not(.nav-link):not(#header a):not(#menu a) {
    color: #2563eb;
}
a:not(.btn):not(.nav-link):not(#header a):not(#menu a):hover {
    color: #1d4ed8;
}

h1, h2, h3, h4, h5, h6 {
    color: #0f172a !important;
    font-weight: 600 !important;
}

.label, .badge {
    font-weight: 600 !important;
}

/* Notification dot ngoài header */
body:not(#header) .tw-bg-danger-500,
.bg-danger:not(#header *) {
    background: #dc2626 !important;
}

/* ============================================================================
 *  DROPDOWN GENERIC (non-header)
 * ============================================================================ */
.dropdown-menu > li > a {
    color: #334155 !important;
}
.dropdown-menu > li > a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ============================================================================
 *  TASK / COMMENT / CUSTOMER PROFILE consistency
 * ============================================================================ */
.task-comment .comment-content,
.task-comment .mleft40 {
    color: #1e293b !important;
}
.customer-profile-name,
.customer-profile-content {
    color: #1e293b !important;
}

/* ============================================================================
 *  SETTINGS LEFT NAV — Perfex /admin/settings sidebar (col-md-3 vertical tabs)
 *  Default Perfex render text + icon đều slate-800/900 → quá đậm, không có
 *  active state rõ. Override: light slate-600 base, blue active state với
 *  pill bg + left border + icon highlight.
 * ============================================================================ */
.nav.navbar-pills.navbar-pills-flat,
.nav.nav-stacked.navbar-pills-flat {
    background: transparent;
    border: 0;
}
.nav.navbar-pills.navbar-pills-flat > li {
    margin-bottom: 2px;
    border: 0;
    background: transparent;
}
.nav.navbar-pills.navbar-pills-flat > li > a {
    color: #475569 !important;                  /* slate-600 — nhẹ hơn body slate-700 */
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 14px !important;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.12s ease;
}
.nav.navbar-pills.navbar-pills-flat > li > a:hover,
.nav.navbar-pills.navbar-pills-flat > li > a:focus {
    color: #1e293b !important;                  /* slate-800 đậm khi hover */
    background: #f1f5f9 !important;             /* slate-100 */
    border-left-color: #cbd5e1 !important;
}
.nav.navbar-pills.navbar-pills-flat > li > a > i,
.nav.navbar-pills.navbar-pills-flat > li > a .menu-icon {
    color: #94a3b8 !important;                  /* slate-400 — icon mờ */
    font-size: 16px;
    width: 18px;
    text-align: center;
    transition: color 0.12s ease;
}
.nav.navbar-pills.navbar-pills-flat > li > a:hover > i,
.nav.navbar-pills.navbar-pills-flat > li > a:hover .menu-icon {
    color: #475569 !important;
}

/* Active state — blue pill */
.nav.navbar-pills.navbar-pills-flat > li.active > a,
.nav.navbar-pills.navbar-pills-flat > li.active > a:hover,
.nav.navbar-pills.navbar-pills-flat > li.active > a:focus {
    color: #1d4ed8 !important;                  /* blue-700 */
    background: #eff6ff !important;             /* blue-50 */
    border-left-color: #2563eb !important;
    font-weight: 600 !important;
}
.nav.navbar-pills.navbar-pills-flat > li.active > a > i,
.nav.navbar-pills.navbar-pills-flat > li.active > a .menu-icon {
    color: #2563eb !important;                  /* blue-600 — icon nổi */
}

/* Badge trong settings menu (ví dụ "Update" có version badge) */
.nav.navbar-pills.navbar-pills-flat > li > a .badge {
    font-weight: 600;
    font-size: 11px;
    padding: 3px 7px;
}

/* "System Update" link bên dưới menu chính */
a.settings-group-system-update {
    color: #475569 !important;
    padding: 8px 14px;
    border-radius: 0 6px 6px 0;
    border-left: 3px solid transparent;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.12s ease;
}
a.settings-group-system-update:hover {
    color: #1e293b !important;
    background: #f1f5f9;
    border-left-color: #cbd5e1;
}
a.settings-group-system-update svg {
    color: #94a3b8;
    width: 18px;
    height: 18px;
}
a.settings-group-system-update:hover svg {
    color: #475569;
}

/* Settings page title "Settings" và subsection titles */
.col-md-3 > h4 {
    color: #1e293b !important;
    font-weight: 600 !important;
    margin-bottom: 12px;
}

/* ============================================================================
 *  SETUP MENU DRAWER (#setup-menu-wrapper) — "Thiết lập" panel mở từ icon ⚙
 *  Perfex 3.0.4 hard-code blue-text trên dark bg → khó đọc. Override sang
 *  slate-300 base + white hover, pattern giống main sidebar #menu.
 * ============================================================================ */
#setup-menu-wrapper {
    background: #1e293b !important;             /* slate-800 — đồng nhất với main sidebar */
}
#setup-menu-wrapper .customizer-heading,
#setup-menu-wrapper .close-customizer {
    color: #f1f5f9 !important;                  /* slate-100 — header sáng */
}
#setup-menu-wrapper .close-customizer:hover {
    color: #ffffff !important;
}

/* Menu items level 1 */
#setup-menu > li > a {
    color: #cbd5e1 !important;                  /* slate-300 — sáng đọc tốt trên dark */
    background: transparent !important;
    border-left: 3px solid transparent !important;
    transition: all 0.12s ease;
    padding: 10px 16px !important;
}
#setup-menu > li > a:hover,
#setup-menu > li > a:focus,
#setup-menu > li.active > a {
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
    border-left-color: transparent !important;
}
#setup-menu > li.active > a {
    background: rgba(37,99,235,0.20) !important;
    border-left-color: #3b82f6 !important;
}

/* Icons + arrow caret */
#setup-menu > li > a > .menu-icon,
#setup-menu > li > a > i.menu-icon,
#setup-menu > li > a > i:first-child {
    color: #94a3b8 !important;                  /* slate-400 — icon mờ subtle */
    font-size: 15px;
}
#setup-menu > li > a:hover > .menu-icon,
#setup-menu > li > a:hover > i.menu-icon,
#setup-menu > li.active > a > .menu-icon,
#setup-menu > li.active > a > i.menu-icon {
    color: #ffffff !important;
}
#setup-menu .fa.arrow {
    color: #64748b !important;                  /* slate-500 cho caret mặc định */
    font-size: 11px;
}
#setup-menu > li > a:hover .fa.arrow,
#setup-menu > li.active > a .fa.arrow {
    color: #cbd5e1 !important;
}

/* Menu items level 2 (submenu khi expand) */
#setup-menu .nav-second-level {
    background: rgba(0,0,0,0.20) !important;
}
#setup-menu .nav-second-level > li > a {
    color: #94a3b8 !important;                  /* slate-400 cho subitem */
    padding-left: 48px !important;
    font-size: 13px;
}
#setup-menu .nav-second-level > li > a:hover,
#setup-menu .nav-second-level > li.active > a {
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
}
#setup-menu .nav-second-level .sub-menu-text {
    color: inherit !important;
}

/* Menu-text wrapper — đảm bảo inherit color đúng */
#setup-menu .menu-text,
#setup-menu .sub-menu-text {
    color: inherit !important;
}

/* Badge trong setup menu items (vd Modules có badge "1") */
#setup-menu .badge {
    font-weight: 700 !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
}

/* "X" close button */
#setup-menu-wrapper .close-customizer .fa-close,
#setup-menu-wrapper .close-customizer i {
    font-size: 18px;
    color: inherit !important;
}

/* Notification bell red/shake styles đã chuyển sang inline injection qua
   newsfeed_pro module (nfp_inject_assets_css) để tránh browser cache stale. */

/* ============================================================================
 *  Sidebar logo container — fix overflow khi logo image quá rộng
 *  (logo VietNet có decoration stars extend bên ngoài text)
 * ============================================================================ */
#menu #logo {
    overflow: hidden !important;
    padding: 4px 8px !important;
}
#menu #logo img,
#menu #logo a img {
    max-width: 100% !important;
    max-height: 55px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* ============================================================================
 *  Hết. Tinh chỉnh thêm thì add rules ở dưới — file này không bị overwrite
 *  bởi upgrade source code.
 * ============================================================================ */