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

/* =========================
   FORCE DARK TOM-SELECT (Dịch vụ)
   Fix trường hợp #service-ts-control bị ép nền trắng ở CSS khác
========================= */

/* 1) ID control cứng của bạn */
html.dark-mode #service-ts-control,
.dark-mode #service-ts-control {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

/* 2) TomSelect control & wrapper */
html.dark-mode .ts-wrapper,
html.dark-mode .ts-control,
html.dark-mode .ts-dropdown,
.dark-mode .ts-wrapper,
.dark-mode .ts-control,
.dark-mode .ts-dropdown {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

/* 3) Input placeholder + text */
html.dark-mode .ts-control input,
.dark-mode .ts-control input {
    color: #e5e7eb !important;
}
html.dark-mode .ts-control input::placeholder,
.dark-mode .ts-control input::placeholder {
    color: #94a3b8 !important;
}

/* 4) Dropdown option */
html.dark-mode .ts-dropdown .option,
.dark-mode .ts-dropdown .option {
    background: #111827 !important;
    color: #e5e7eb !important;
}
html.dark-mode .ts-dropdown .option.active,
html.dark-mode .ts-dropdown .option:hover,
.dark-mode .ts-dropdown .option.active,
.dark-mode .ts-dropdown .option:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

/* 5) Mũi tên dropdown */
html.dark-mode .ts-control .dropdown-indicator,
.dark-mode .ts-control .dropdown-indicator {
    filter: brightness(2);
}

html.dark-mode #service-ts-control,
.dark-mode #service-ts-control,
html.dark-mode .ts-control,
.dark-mode .ts-control,
html.dark-mode .ts-wrapper,
.dark-mode .ts-wrapper,
html.dark-mode .ts-dropdown,
.dark-mode .ts-dropdown{
  background:#111827 !important;
  color:#e5e7eb !important;
  border-color:#334155 !important;
}

/* FIX: nút chọn dịch vụ đang bị .service-modal-trigger ép nền trắng */
html.dark-mode .service-modal-trigger,
.dark-mode .service-modal-trigger,
html.dark-mode #openServiceModal,
.dark-mode #openServiceModal {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

/* icon/arrow trong nút (nếu bị nhạt) */
html.dark-mode .service-modal-trigger i,
.dark-mode .service-modal-trigger i,
html.dark-mode .service-modal-trigger svg,
.dark-mode .service-modal-trigger svg {
    color: #e5e7eb !important;
    fill: #e5e7eb !important;
}

/* FIX ô vuông trắng đầu input (input-group prepend) */
html.dark-mode .input-group-text,
.dark-mode .input-group-text,
html.dark-mode .input-group-prepend .input-group-text,
.dark-mode .input-group-prepend .input-group-text {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

/* Nếu ô trắng là pseudo-element của input wrapper */
html.dark-mode .form-group .input-group::before,
.dark-mode .form-group .input-group::before,
html.dark-mode .form-group .input-group::after,
.dark-mode .form-group .input-group::after {
    background: transparent !important;
}

/* Nếu input bị set background-image (icon) tạo mảng trắng */
html.dark-mode input,
.dark-mode input {
    background-image: none !important;
}

/* =========================
   FIX INPUT TURNING LIGHT WHEN TYPING / FOCUS
========================= */

/* giữ nền tối kể cả khi focus */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-control {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

/* focus state (nhiều theme sẽ đổi background) */
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .form-control:focus,
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .form-control:focus {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #60a5fa !important; /* viền focus xanh nhẹ */
    box-shadow: 0 0 0 .2rem rgba(96,165,250,.15) !important;
    outline: none !important;
}

/* chrome autofill hay làm nền vàng/trắng */
html.dark-mode input:-webkit-autofill,
html.dark-mode textarea:-webkit-autofill,
html.dark-mode select:-webkit-autofill,
.dark-mode input:-webkit-autofill,
.dark-mode textarea:-webkit-autofill,
.dark-mode select:-webkit-autofill {
    -webkit-text-fill-color: #e5e7eb !important;
    box-shadow: 0 0 0px 1000px #111827 inset !important;
    transition: background-color 9999s ease-in-out 0s;
}