/* =========================
   DARK CORE SYSTEM
========================= */

.dark-mode {
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --bg-soft: #111827;
    --border: #334155;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
}

/* BODY */
.dark-mode body,
.dark-mode {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
}

/* CARD / BOX */
.dark-mode div,
.dark-mode section,
.dark-mode .card,
.dark-mode .cardify,
.dark-mode .content_title,
.dark-mode .statement_table,
.dark-mode .sidebar-card,
.dark-mode .item-preview,
.dark-mode .dashboard-area,
.dark-mode .dashboard_contents,
.dark-mode .product-title-area {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* TABLE */
.dark-mode table {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.dark-mode table thead {
    background: var(--bg-soft) !important;
}

/* INPUT */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background: var(--bg-soft) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

/* MODAL */
.dark-mode .modal-content {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* DROPDOWN */
.dark-mode .dropdown-menu {
    background: var(--bg-card) !important;
}

/* BORDER */
.dark-mode * {
    border-color: var(--border) !important;
}

/* TEXT */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode label {
    color: var(--text-main) !important;
}


/* ===== Smooth transition khi đổi theme ===== */
body {
    transition: background 0.3s ease, color 0.3s ease;
}
/* =========================
   FIX TEXT & WHITE PATCH
========================= */

/* Ép toàn bộ text trong dark-mode sáng lên */
.dark-mode,
.dark-mode * {
    color: #e5e7eb !important;
}

/* Table row text */
.dark-mode table td,
.dark-mode table th {
    color: #e5e7eb !important;
}

/* Header table đậm hơn */
.dark-mode table thead th {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Text muted */
.dark-mode .text-muted,
.dark-mode small {
    color: #94a3b8 !important;
}

/* Modal nền tối */
.dark-mode .modal-content,
.dark-mode .modal-body,
.dark-mode .modal-header,
.dark-mode .modal-footer {
    background: #1e293b !important;
    color: #e5e7eb !important;
}

/* Tom-select dropdown */
.dark-mode .ts-dropdown,
.dark-mode .ts-control,
.dark-mode .ts-wrapper {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

/* Dropdown bootstrap */
.dark-mode .dropdown-menu {
    background: #1e293b !important;
    color: #e5e7eb !important;
}

/* Badge / trạng thái */
.dark-mode .badge {
    color: #fff !important;
}

/* Nút export, tìm */
.dark-mode .btn-secondary {
    background: #334155 !important;
    color: #e5e7eb !important;
}

/* Fix những div nền trắng cứng */
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background-color:#fff"],
.dark-mode [style*="background-color: #fff"] {
    background: #1e293b !important;
}
/* =========================
   FORCE DARK SERVICE LIST
========================= */

/* Toàn bộ khung modal */
.dark-mode .modal-content {
    background: #1e293b !important;
}

/* Từng item dịch vụ */
.dark-mode .modal-content > div,
.dark-mode .modal-content .item,
.dark-mode .modal-content .product,
.dark-mode .modal-content .service-item,
.dark-mode .modal-content .list-group-item,
.dark-mode .modal-content .card {
    background: #1e293b !important;
    color: #e5e7eb !important;
}

/* Thanh phân loại */
.dark-mode .modal-content h4,
.dark-mode .modal-content h5,
.dark-mode .modal-content h6 {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Giá tiền bên phải */
.dark-mode .modal-content .price,
.dark-mode .modal-content .badge {
    background: #334155 !important;
    color: #fff !important;
}

/* Thanh tìm kiếm */
.dark-mode .modal-content input {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}
/* =========================
   FIX TOM-SELECT (Dịch Vụ)
========================= */

.dark-mode .ts-control {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

.dark-mode .ts-control input {
    color: #e5e7eb !important;
}

.dark-mode .ts-dropdown {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

.dark-mode .ts-dropdown .option {
    background: #1e293b !important;
    color: #e5e7eb !important;
}

.dark-mode .ts-dropdown .option.active {
    background: #334155 !important;
    color: #ffffff !important;
}

.dark-mode .ts-dropdown .option:hover {
    background: #475569 !important;
}
#theme-toggle {
    transition: transform 0.2s ease;
}
#theme-toggle:hover {
    transform: scale(1.2);
}
/* =========================
   FIX WHITE ELEMENTS - FRONTEND
========================= */

/* 1️⃣ TOM SELECT */
.dark-mode .ts-control,
.dark-mode .ts-dropdown,
.dark-mode .ts-wrapper,
.dark-mode .ts-control input {
    background: #111827 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

.dark-mode .ts-dropdown .option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

.dark-mode .ts-dropdown .option:hover {
    background: #334155 !important;
}

/* 2️⃣ THANH TRẮNG BÊN TRÁI INPUT IMEI */
.dark-mode .input-group-text,
.dark-mode .input-group-prepend,
.dark-mode .input-group > .input-group-text {
    background: #111827 !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

/* 3️⃣ INPUT CHÍNH IMEI */
.dark-mode .form-control {
    background: #111827 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}
/* ===========================
   ADMIN FULL DARK OVERRIDE
=========================== */

.admin-dark body,
.admin-dark #main-wrapper,
.admin-dark .page-wrapper,
.admin-dark .container-fluid {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Sidebar + Topbar */
.admin-dark .topbar,
.admin-dark .left-sidebar,
.admin-dark .navbar,
.admin-dark .sidebar-nav {
    background-color: #111827 !important;
}

/* Card */
.admin-dark .card,
.admin-dark .card-body,
.admin-dark .card-header,
.admin-dark .card-footer {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* Table */
.admin-dark table,
.admin-dark .table,
.admin-dark .jsgrid,
.admin-dark .jsgrid-grid-body,
.admin-dark .jsgrid-header-row,
.admin-dark .jsgrid-row,
.admin-dark .jsgrid-alt-row {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

.admin-dark .table th,
.admin-dark .table td {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Form */
.admin-dark input,
.admin-dark textarea,
.admin-dark select,
.admin-dark .form-control {
    background-color: #111827 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Dropdown */
.admin-dark .dropdown-menu {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Modal */
.admin-dark .modal-content {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Footer */
.admin-dark .footer {
    background-color: #111827 !important;
    color: #94a3b8 !important;
}

/* Force remove white backgrounds */
.admin-dark .bg-white,
.admin-dark .bg-light {
    background-color: #1e293b !important;
}

/* Border fix */
.admin-dark * {
    border-color: #334155 !important;
}
/* =========================
   ADMIN DARK MODE FIX
========================= */

.admin-dark {
    background: #0f172a !important;
}

/* Main wrapper */
.admin-dark #main-wrapper,
.admin-dark .page-wrapper,
.admin-dark .container-fluid {
    background: #0f172a !important;
}

/* Sidebar */
.admin-dark .left-sidebar,
.admin-dark .scroll-sidebar,
.admin-dark .sidebar-nav,
.admin-dark .sidebar-nav ul,
.admin-dark .sidebar-nav ul li,
.admin-dark .sidebar-nav ul li a {
    background: #111827 !important;
    color: #e2e8f0 !important;
}

/* Sidebar active */
.admin-dark .sidebar-nav ul li a.active,
.admin-dark .sidebar-nav ul li a:hover {
    background: #1e293b !important;
}

/* Card / Box */
.admin-dark .card,
.admin-dark .card-body,
.admin-dark .page-breadcrumb,
.admin-dark .table-responsive {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Table */
.admin-dark table,
.admin-dark .table,
.admin-dark .jsgrid-grid-body,
.admin-dark .jsgrid-header-row,
.admin-dark .jsgrid-row {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Table border */
.admin-dark table th,
.admin-dark table td {
    border-color: #334155 !important;
}

/* Input */
.admin-dark input,
.admin-dark textarea,
.admin-dark select {
    background: #111827 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Header */
.admin-dark .topbar,
.admin-dark .navbar {
    background: #111827 !important;
}

/* Footer */
.admin-dark .footer {
    background: #111827 !important;
    color: #e2e8f0 !important;
}
/* =========================
   FIX WHITE ELEMENTS - FRONTEND
========================= */

/* 1️⃣ TOM SELECT */
.dark-mode .ts-control,
.dark-mode .ts-dropdown,
.dark-mode .ts-wrapper,
.dark-mode .ts-control input {
    background: #111827 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

.dark-mode .ts-dropdown .option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

.dark-mode .ts-dropdown .option:hover {
    background: #334155 !important;
}

/* 2️⃣ THANH TRẮNG BÊN TRÁI INPUT IMEI */
.dark-mode .input-group-text,
.dark-mode .input-group-prepend,
.dark-mode .input-group > .input-group-text {
    background: #111827 !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

/* 3️⃣ INPUT CHÍNH IMEI */
.dark-mode .form-control {
    background: #111827 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}