/* =========================================================
* Dark mode cho FFM (Soft UI Dashboard / Bootstrap 5)
* Kích hoạt bằng class `dark-theme` trên .
* Palette navy theo Soft UI Dashboard Dark.
* ========================================================= */
html.dark-theme {
--d-bg: #050607; /* nền trang: đen tuyền */
--d-surface: #0e0f12; /* card / sidebar / navbar */
--d-surface-2: #16181d; /* surface phụ (table head, hover, input) */
--d-surface-3: #20242b; /* hover đậm hơn */
--d-border: rgba(255, 255, 255, 0.07);
--d-border-2: rgba(255, 255, 255, 0.12);
--d-text: #f4f5f6; /* text chính */
--d-text-2: #9aa0a6; /* text phụ / secondary */
--d-text-3: #6b7177; /* muted */
--d-accent: #00d68f; /* nhấn: xanh lá emerald */
--d-accent-soft: rgba(0, 214, 143, 0.15);
--d-radius: 16px; /* bo góc card lớn */
--d-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}
/* ---------- Nền & text gốc ---------- */
/* Dùng --d-surface để phần lộ ra dưới body (nền html) trùng màu main body, không bị lệch tông */
html.dark-theme,
html.dark-theme body {
background-color: var(--d-surface) !important;
color: var(--d-text);
}
html.dark-theme .main-content,
html.dark-theme .container,
html.dark-theme .container-fluid {
background-color: transparent;
}
/* Các util nền sáng của Soft UI */
html.dark-theme .bg-white,
html.dark-theme .bg-gray-100,
html.dark-theme .bg-gray-200,
html.dark-theme .bg-light,
html.dark-theme .bg-body {
background-color: var(--d-surface) !important;
color: var(--d-text);
}
/* ---------- Text utilities ---------- */
html.dark-theme,
html.dark-theme p,
html.dark-theme span,
html.dark-theme li,
html.dark-theme label,
html.dark-theme dt,
html.dark-theme dd,
html.dark-theme h1, html.dark-theme h2, html.dark-theme h3,
html.dark-theme h4, html.dark-theme h5, html.dark-theme h6 {
color: var(--d-text);
}
html.dark-theme .text-dark,
html.dark-theme .text-body,
html.dark-theme .text-black,
html.dark-theme .h1, html.dark-theme .h2, html.dark-theme .h3,
html.dark-theme .h4, html.dark-theme .h5, html.dark-theme .h6 {
color: var(--d-text) !important;
}
html.dark-theme .text-secondary,
html.dark-theme .text-sm.text-secondary {
color: var(--d-text-2) !important;
}
html.dark-theme .text-muted,
html.dark-theme .text-xs.text-secondary {
color: var(--d-text-3) !important;
}
/* ---------- Card ---------- */
html.dark-theme .card {
background-color: var(--d-surface);
background-image: none;
color: var(--d-text);
box-shadow: var(--d-shadow);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
}
/* Header/footer trong suốt → cùng tông với thân card, tránh lệch màu vùng title */
html.dark-theme .card .card-header,
html.dark-theme .card .card-footer {
background-color: transparent;
color: var(--d-text);
border-color: var(--d-border);
}
html.dark-theme .card.shadow-none { box-shadow: none; }
/* ---------- Sidebar ---------- */
html.dark-theme .sidenav,
html.dark-theme .navbar-vertical {
background-color: var(--d-surface) !important; /* khớp màu main body (.bg-gray-100) */
box-shadow: none !important;
border: none !important;
}
html.dark-theme .sidenav .navbar-brand,
html.dark-theme .sidenav .navbar-brand span,
html.dark-theme .sidenav .nav-link,
html.dark-theme .sidenav .nav-link span,
html.dark-theme .sidenav .nav-link .nav-link-text {
color: var(--d-text) !important;
}
/* Active: KHÔNG nền/box/shadow — chỉ đổi màu icon sang xanh */
html.dark-theme .sidenav .nav-link.active {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: var(--d-text) !important;
}
html.dark-theme .sidenav .nav-link.active .icon,
html.dark-theme .sidenav .nav-link.active .icon-shape {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
html.dark-theme .sidenav .nav-link.active .icon i,
html.dark-theme .sidenav .nav-link.active i,
html.dark-theme .sidenav .nav-link.active svg,
html.dark-theme .sidenav .nav-link.active svg path {
color: var(--d-accent) !important;
fill: var(--d-accent) !important;
}
html.dark-theme .sidenav hr,
html.dark-theme .sidenav .horizontal {
background-color: var(--d-border);
border-color: var(--d-border);
}
html.dark-theme .sidenav .navbar-brand img,
html.dark-theme .sidenav .icon img { filter: brightness(0) invert(1); }
html.dark-theme .sidenav-header .navbar-brand-img { filter: none; }
/* ---------- Navbar trên cùng ---------- */
html.dark-theme .navbar-main,
html.dark-theme .navbar.navbar-main {
background-color: var(--d-surface) !important;
box-shadow: var(--d-shadow);
}
html.dark-theme .navbar .nav-link,
html.dark-theme .navbar .nav-link i,
html.dark-theme .navbar-main .breadcrumb-item,
html.dark-theme .navbar-main .breadcrumb-item a,
html.dark-theme .navbar-main h6 {
color: var(--d-text) !important;
}
html.dark-theme .breadcrumb-item + .breadcrumb-item::before { color: var(--d-text-3); }
/* Icon home breadcrumb (SVG fill #252f40 + opacity thấp) → sáng & rõ */
html.dark-theme .navbar .breadcrumb-item svg path { fill: var(--d-text-2) !important; }
html.dark-theme .navbar .breadcrumb-item a.opacity-3 { opacity: 0.85 !important; }
html.dark-theme .navbar .breadcrumb-item a.opacity-5 { opacity: 0.9 !important; }
/* ---------- Bảng ---------- */
html.dark-theme .table {
color: var(--d-text);
--bs-table-bg: transparent;
--bs-table-color: var(--d-text);
}
html.dark-theme .table > :not(caption) > * > * {
background-color: transparent;
color: var(--d-text);
border-bottom-color: var(--d-border);
}
html.dark-theme .table thead th,
html.dark-theme .table .thead-light th,
html.dark-theme .table thead.bg-light th {
color: var(--d-text-2) !important;
background-color: var(--d-surface-2) !important;
border-color: var(--d-border);
}
html.dark-theme .table tbody tr:hover > * {
background-color: var(--d-surface-2);
}
html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: rgba(255, 255, 255, 0.03);
color: var(--d-text);
}
html.dark-theme .table-responsive { background-color: transparent; }
/* Một số bảng đặt nền trắng INLINE (vd .tableBoxItem) → cần !important để phủ */
html.dark-theme .table tbody,
html.dark-theme .tableBoxItem,
html.dark-theme .tableBoxItem tr,
html.dark-theme .tableBoxItem td,
html.dark-theme [style*="background-color: #ffffff"],
html.dark-theme [style*="background-color:#ffffff"],
html.dark-theme [style*="background-color: #fff"],
html.dark-theme [style*="background-color:#fff"],
html.dark-theme [style*="background: #ffffff"],
html.dark-theme [style*="background:#ffffff"],
html.dark-theme [style*="background: #fff"],
html.dark-theme [style*="background:#fff"] {
background-color: var(--d-surface) !important;
color: var(--d-text);
}
/* Nền xanh nhạt inline (vd card-header/footer map #aad3df) → tối */
html.dark-theme [style*="#aad3df"] {
background-color: var(--d-surface) !important;
color: var(--d-text);
}
/* Nền xám nhạt inline (#f8f9fa) vd hộp Balance trong settings drawer → tối */
html.dark-theme [style*="#f8f9fa"] {
background-color: var(--d-surface-2) !important;
color: var(--d-text);
}
/* Chữ đen đặt inline (vd cột SKU style="color: black") → sáng lại */
html.dark-theme [style*="color: black"],
html.dark-theme [style*="color:black"],
html.dark-theme [style*="color: #000"],
html.dark-theme [style*="color:#000"],
html.dark-theme [style*="color: rgb(0, 0, 0)"] {
color: var(--d-text) !important;
}
/* Drawer/popover dùng .blur (nền trắng mờ) → nền tối mờ */
html.dark-theme .fixed-plugin .card.blur,
html.dark-theme .card.blur,
html.dark-theme .blur {
background-color: rgba(14, 15, 18, 0.92) !important;
}
/* ---------- Form controls ---------- */
html.dark-theme .form-control,
html.dark-theme .form-select,
html.dark-theme textarea,
html.dark-theme .input-group-text {
background-color: var(--d-surface-2);
border-color: var(--d-border-2);
color: var(--d-text);
}
html.dark-theme .form-control::placeholder,
html.dark-theme textarea::placeholder { color: var(--d-text-3); }
html.dark-theme .form-control:focus,
html.dark-theme .form-select:focus {
background-color: var(--d-surface-2);
border-color: var(--d-accent);
color: var(--d-text);
box-shadow: 0 0 0 2px var(--d-accent-soft);
}
html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
background-color: var(--d-surface);
color: var(--d-text-2);
}
html.dark-theme .form-check-input {
background-color: var(--d-surface-2);
border-color: var(--d-border-2);
}
html.dark-theme .form-check-input:checked {
background-color: var(--d-accent);
border-color: var(--d-accent);
}
html.dark-theme .form-label,
html.dark-theme .col-form-label { color: var(--d-text-2); }
/* Input/select KHÔNG có class .form-control (vd DataTables "Show N entries", Search...) */
html.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
html.dark-theme select,
html.dark-theme .dataTables_filter input,
html.dark-theme .dataTables_length select {
background-color: var(--d-surface-2);
border: 1px solid var(--d-border-2);
color: var(--d-text);
}
html.dark-theme input::placeholder { color: var(--d-text-3); }
html.dark-theme select option { background-color: var(--d-surface); color: var(--d-text); }
/* ---------- Dropdown ---------- */
html.dark-theme .dropdown-menu {
background-color: var(--d-surface);
border: 1px solid var(--d-border);
box-shadow: var(--d-shadow);
}
html.dark-theme .dropdown-item {
color: var(--d-text);
}
html.dark-theme .dropdown-item:hover,
html.dark-theme .dropdown-item:focus,
html.dark-theme .dropdown-item.active {
background-color: var(--d-surface-2);
color: #fff;
}
html.dark-theme .dropdown-divider { border-color: var(--d-border); }
/* Caret/arrow (:before) của dropdown menu (Soft UI dùng caret trắng) → đổi sang màu nền menu để hết tam giác trắng */
html.dark-theme .dropdown .dropdown-menu:before,
html.dark-theme .dropdown-menu:before {
color: var(--d-surface) !important;
}
/* ---------- Modal ---------- */
html.dark-theme .modal-content {
background-color: var(--d-surface);
color: var(--d-text);
border: 1px solid var(--d-border);
}
html.dark-theme .modal-header,
html.dark-theme .modal-footer { border-color: var(--d-border); }
html.dark-theme .modal-header .modal-title,
html.dark-theme .modal-title { color: var(--d-text); }
html.dark-theme .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Nút close dạng chữ/icon (vd ×, ): không invert, chỉ đổi màu sáng */
html.dark-theme .btn-close:has(span),
html.dark-theme .btn-close:has(i) {
filter: none !important;
opacity: 1;
}
html.dark-theme .btn-close span,
html.dark-theme .btn-close i {
color: var(--d-text) !important;
opacity: 1;
}
/* ---------- Borders / hr ---------- */
html.dark-theme .border,
html.dark-theme .border-top,
html.dark-theme .border-bottom,
html.dark-theme .border-start,
html.dark-theme .border-end { border-color: var(--d-border) !important; }
html.dark-theme hr { border-color: var(--d-border); background-color: var(--d-border); opacity: 1; }
/* ---------- List group ---------- */
html.dark-theme .list-group-item {
background-color: var(--d-surface);
color: var(--d-text);
border-color: var(--d-border);
}
/* ---------- Nav tabs / pills ---------- */
html.dark-theme .nav-tabs { border-color: var(--d-border); }
html.dark-theme .nav-tabs .nav-link { color: var(--d-text-2); }
html.dark-theme .nav-tabs .nav-link.active {
background-color: var(--d-surface-2);
color: #fff;
border-color: var(--d-border);
}
/* ---------- Pagination ---------- */
html.dark-theme .page-link {
background-color: var(--d-surface-2);
border-color: var(--d-border);
color: var(--d-text);
}
html.dark-theme .page-item.active .page-link {
background-color: var(--d-accent);
border-color: var(--d-accent);
color: #fff;
}
html.dark-theme .page-item.disabled .page-link {
background-color: var(--d-surface);
color: var(--d-text-3);
}
/* ---------- Alert ---------- */
html.dark-theme .alert {
border: 1px solid var(--d-border);
}
/* ---------- Buttons trung tính ---------- */
html.dark-theme .btn-white,
html.dark-theme .btn-light,
html.dark-theme .btn-outline-secondary {
background-color: var(--d-surface-2);
border-color: var(--d-border-2);
color: var(--d-text);
}
html.dark-theme .btn-white:hover,
html.dark-theme .btn-light:hover {
background-color: var(--d-surface-3);
color: #fff;
}
/* Nút secondary (vd nút TRACKING) đang xám sáng → chuyển tông tối */
html.dark-theme .btn.btn-secondary,
html.dark-theme .btn.bg-gradient-secondary,
html.dark-theme .btn.bg-secondary {
background-image: linear-gradient(310deg, #2a2e35, #1c2026) !important;
background-color: var(--d-surface-2) !important;
border-color: var(--d-border-2) !important;
color: var(--d-text) !important;
}
html.dark-theme .btn.btn-secondary:hover,
html.dark-theme .btn.bg-gradient-secondary:hover {
background-image: linear-gradient(310deg, #343941, #24292f) !important;
color: #fff !important;
}
/* ---------- Badge nhạt / secondary ---------- */
html.dark-theme .badge.bg-light,
html.dark-theme .badge.badge-light,
html.dark-theme .badge.badge-secondary,
html.dark-theme .badge.bg-secondary,
html.dark-theme .badge.bg-gradient-secondary {
color: var(--d-text) !important;
background-color: var(--d-surface-3) !important;
background-image: none !important;
}
/* Các badge biến thể màu pastel (không phải gradient) → solid + chữ tương phản, dễ đọc trên nền tối.
Giữ nguyên .bg-gradient-* vì đã đủ tương phản. */
html.dark-theme .badge.badge-info,
html.dark-theme .badge.bg-info,
html.dark-theme .badge.text-bg-info {
background-color: #17a2b8 !important; background-image: none !important; color: #fff !important;
}
html.dark-theme .badge.badge-success,
html.dark-theme .badge.bg-success,
html.dark-theme .badge.text-bg-success {
background-color: #1aae6f !important; background-image: none !important; color: #fff !important;
}
html.dark-theme .badge.badge-danger,
html.dark-theme .badge.bg-danger,
html.dark-theme .badge.text-bg-danger {
background-color: #e53e3e !important; background-image: none !important; color: #fff !important;
}
html.dark-theme .badge.badge-warning,
html.dark-theme .badge.bg-warning,
html.dark-theme .badge.text-bg-warning {
background-color: #dd9b22 !important; background-image: none !important; color: #1a1300 !important;
}
html.dark-theme .badge.badge-primary,
html.dark-theme .badge.bg-primary,
html.dark-theme .badge.text-bg-primary {
background-color: #4361ee !important; background-image: none !important; color: #fff !important;
}
html.dark-theme .badge.badge-dark,
html.dark-theme .badge.bg-dark,
html.dark-theme .badge.text-bg-dark {
background-color: var(--d-surface-3) !important; background-image: none !important; color: var(--d-text) !important;
}
/* ---------- Code / pre ---------- */
html.dark-theme code,
html.dark-theme pre {
background-color: var(--d-surface-2);
color: #f08d8d;
}
/* ---------- Page Guide (instruction sidebar) markdown ---------- */
html.dark-theme .instruction-sidebar .markdown-body code {
background: var(--d-surface-2) !important;
color: #ff9b9b !important;
}
html.dark-theme .instruction-sidebar .markdown-body pre {
background: var(--d-surface-2) !important;
border: 1px solid var(--d-border);
color: var(--d-text) !important;
}
html.dark-theme .instruction-sidebar .markdown-body pre code {
background: transparent !important;
color: var(--d-text) !important;
}
html.dark-theme .instruction-sidebar .markdown-body h1,
html.dark-theme .instruction-sidebar .markdown-body h2 {
border-bottom-color: var(--d-border) !important;
}
html.dark-theme .instruction-sidebar .markdown-body h6 { color: var(--d-text-2) !important; }
html.dark-theme .instruction-sidebar .markdown-body blockquote {
border-left-color: var(--d-accent) !important;
color: var(--d-text-2) !important;
}
html.dark-theme .instruction-sidebar .markdown-body th,
html.dark-theme .instruction-sidebar .markdown-body td {
border-color: var(--d-border) !important;
}
/* Cây danh sách guide */
html.dark-theme .instruction-tree .tree-folder,
html.dark-theme .instruction-tree .tree-link { color: var(--d-text) !important; }
html.dark-theme .instruction-tree .tree-row:hover { background: var(--d-surface-2) !important; }
/* ---------- Plugin: Select2 ---------- */
html.dark-theme .select2-container--default .select2-selection--single,
html.dark-theme .select2-container--default .select2-selection--multiple,
html.dark-theme .select2-dropdown,
html.dark-theme .select2-search__field {
background-color: var(--d-surface-2) !important;
border-color: var(--d-border-2) !important;
color: var(--d-text) !important;
}
html.dark-theme .select2-container--default .select2-selection__rendered,
html.dark-theme .select2-results__option { color: var(--d-text); }
html.dark-theme .select2-results__option--highlighted[aria-selected] {
background-color: var(--d-surface-3) !important;
color: #fff;
}
html.dark-theme .select2-container--default .select2-selection__choice {
background-color: var(--d-surface-3);
border-color: var(--d-border-2);
color: var(--d-text);
}
/* ---------- Plugin: Choices.js ---------- */
html.dark-theme .choices__inner,
html.dark-theme .choices__list--dropdown,
html.dark-theme .choices__list[aria-expanded] {
background-color: var(--d-surface-2);
border-color: var(--d-border-2);
color: var(--d-text);
}
html.dark-theme .choices__list--dropdown .choices__item--selectable.is-highlighted {
background-color: var(--d-surface-3);
}
html.dark-theme .choices[data-type*="select-one"] .choices__input { background-color: var(--d-surface-2); color: var(--d-text); }
/* ---------- Plugin: Flatpickr ---------- */
html.dark-theme .flatpickr-calendar {
background: var(--d-surface);
color: var(--d-text);
box-shadow: var(--d-shadow);
}
html.dark-theme .flatpickr-months,
html.dark-theme .flatpickr-weekdays,
html.dark-theme .flatpickr-weekday {
background: var(--d-surface);
color: var(--d-text-2);
}
html.dark-theme .flatpickr-day { color: var(--d-text); }
html.dark-theme .flatpickr-day.flatpickr-disabled { color: var(--d-text-3); }
html.dark-theme .flatpickr-day:hover,
html.dark-theme .flatpickr-day.selected {
background: var(--d-surface-3);
border-color: var(--d-surface-3);
color: #fff;
}
html.dark-theme .flatpickr-current-month input.cur-year,
html.dark-theme .flatpickr-monthDropdown-months { color: var(--d-text); }
/* ---------- Plugin: jQuery UI datepicker ---------- */
html.dark-theme .ui-datepicker {
background: var(--d-surface);
border-color: var(--d-border);
color: var(--d-text);
}
html.dark-theme .ui-datepicker .ui-datepicker-header { background: var(--d-surface-2); color: var(--d-text); border: none; }
html.dark-theme .ui-datepicker td a,
html.dark-theme .ui-datepicker td span { background: var(--d-surface-2); color: var(--d-text); border-color: var(--d-border); }
html.dark-theme .ui-datepicker td a.ui-state-active,
html.dark-theme .ui-datepicker td a.ui-state-hover { background: var(--d-surface-3); color: #fff; }
/* ---------- Plugin: DataTables ---------- */
html.dark-theme .dataTables_wrapper,
html.dark-theme .dataTables_info,
html.dark-theme .dataTables_length label,
html.dark-theme .dataTables_filter label { color: var(--d-text-2); }
html.dark-theme .dataTables_paginate .paginate_button {
color: var(--d-text) !important;
}
/* ---------- Scrollbar ---------- */
html.dark-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-theme ::-webkit-scrollbar-track { background: var(--d-surface); }
html.dark-theme ::-webkit-scrollbar-thumb { background: var(--d-surface-3); border-radius: 6px; }
html.dark-theme ::-webkit-scrollbar-thumb:hover { background: #2c333d; }
html.dark-theme body { scrollbar-color: var(--d-surface-3) var(--d-surface); } /* Firefox */
/* ---------- Fancybox đã tối sẵn, chỉ chỉnh caption ---------- */
html.dark-theme .fancybox__caption { color: #e9ecef; }
/* ---------- Trang Design (Fabric canvas): GIỮ NGUYÊN artboard ----------
* Vùng workspace/artboard phản ánh sản phẩm thật nên không đảo màu;
* chỉ tối các panel xung quanh (đã xử lý bởi .card/.form ở trên). */
html.dark-theme #workspace .canvas-box { background: transparent; }
/* ---------- Điểm nhấn xanh emerald ---------- */
html.dark-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
html.dark-theme .text-primary {
color: var(--d-accent) !important;
}
html.dark-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
color: #2ee6a6 !important;
}
/* text trên nền nhấn (pagination/switch) cho tương phản */
html.dark-theme .page-item.active .page-link {
color: #04130d;
}
html.dark-theme .form-check-input:checked {
box-shadow: 0 0 0 2px var(--d-accent-soft);
}
/* nút primary/success dùng tông xanh emerald cho đồng bộ */
html.dark-theme .btn.bg-gradient-primary,
html.dark-theme .btn.bg-gradient-success {
background-image: linear-gradient(310deg, #00b87a, #00d68f);
border: none;
color: #04130d;
}
/* ---------- Order map: Fallout Pip-Boy green (chỉ dark mode) ---------- */
/* Leaflet/OSM là raster tiles → dùng filter để nhuộm xanh CRT, không áp được style JSON của Google. */
html.dark-theme #mapid,
html.dark-theme #mapid .leaflet-container {
background: #001a05 !important;
}
/* Tiles nền → xanh monochrome tối */
html.dark-theme #mapid .leaflet-tile-pane {
filter: grayscale(1) sepia(1) hue-rotate(60deg) saturate(4) brightness(0.45) contrast(1.2);
}
/* Lớp choropleth (dữ liệu) → dịch tông đỏ/cam/vàng sang xanh, giữ độ đậm = mật độ đơn */
html.dark-theme #mapid .leaflet-overlay-pane {
filter: hue-rotate(100deg) saturate(1.7) brightness(1.15);
}
/* Nút zoom kiểu Pip-Boy */
html.dark-theme #mapid .leaflet-control-zoom a {
background: #00220a;
color: #00ff5a;
border-color: #006b22;
text-shadow: 0 0 4px #00ff5a;
}
html.dark-theme #mapid .leaflet-control-zoom a:hover { background: #003d12; color: #6affa0; }
/* Hộp info + legend phát sáng xanh */
html.dark-theme #mapid .info,
html.dark-theme #mapid .legend {
background: rgba(0, 25, 6, 0.88) !important;
color: #00ff5a !important;
border: 1px solid #006b22;
box-shadow: 0 0 12px rgba(0, 255, 90, 0.3);
text-shadow: 0 0 3px rgba(0, 255, 90, 0.5);
}
html.dark-theme #mapid .info b { color: #6affa0 !important; }
html.dark-theme #mapid .leaflet-control-attribution {
background: rgba(0, 25, 6, 0.85) !important;
color: #4caf6a !important;
}
html.dark-theme #mapid .leaflet-control-attribution a { color: #00ff5a !important; }
/* ---------- POD editor (product-pod-edit-element / orders-design) ---------- */
/* Tiêu đề/icon xanh đậm inline → xanh sáng dễ đọc */
html.dark-theme [style*="#1976d2"],
html.dark-theme [style*="#1565c0"],
html.dark-theme [style*="#0d6efd"] {
color: #6aa3ff !important;
}
/* Nền xanh/xám nhạt inline (kể cả gradient) → tối */
html.dark-theme [style*="#eef4ff"],
html.dark-theme [style*="#e3f2fd"],
html.dark-theme [style*="#f8f9ff"],
html.dark-theme [style*="#bbdefb"],
html.dark-theme [style*="#d6e4ff"],
html.dark-theme [style*="#eee"] {
background-color: var(--d-surface-2) !important;
background-image: none !important;
border-color: var(--d-border) !important;
}
/* Offcanvas (All Elements Import Info) */
html.dark-theme .offcanvas {
background-color: var(--d-surface) !important;
color: var(--d-text);
}
html.dark-theme .offcanvas-header,
html.dark-theme .offcanvas-body { color: var(--d-text); border-color: var(--d-border); }
/* Font select dưới canvas (.tt-font) */
html.dark-theme .text-toolbar .tt-font,
html.dark-theme select.tt-font {
background-color: var(--d-surface-2) !important;
border-color: var(--d-border-2) !important;
color: var(--d-text) !important;
}
/* Info bar vị trí object trên canvas (.label-float) */
html.dark-theme .label-float,
html.dark-theme #lbl_info_bar {
background-color: rgba(14, 15, 18, 0.92) !important;
color: var(--d-text) !important;
border-color: var(--d-border) !important;
}
/* Popup Color palette */
html.dark-theme .popup-color-palette {
background-color: var(--d-surface) !important;
color: var(--d-text) !important;
border: 1px solid var(--d-border) !important;
}
html.dark-theme .popup-color-palette .color-palette-title,
html.dark-theme .popup-color-palette .single-color-picker-label,
html.dark-theme .popup-color-palette label,
html.dark-theme .popup-color-palette h6 { color: var(--d-text) !important; }
html.dark-theme .popup-color-palette .single-color-picker-hint,
html.dark-theme .popup-color-palette small { color: var(--d-text-3) !important; }
html.dark-theme .popup-color-palette .color-palette-content,
html.dark-theme .popup-color-palette .palette-section,
html.dark-theme .popup-color-palette .single-color-picker-row { background-color: transparent !important; color: var(--d-text) !important; }
/* Text-toolbar (thanh chỉnh text dưới canvas) + image toolbar + popup */
html.dark-theme .text-toolbar,
html.dark-theme .text-toolbar .tt-pop,
html.dark-theme .text-toolbar .it-inline,
html.dark-theme #imageToolbar,
html.dark-theme #imageToolbar .tt-pop {
background: var(--d-surface) !important;
border-color: var(--d-border) !important;
color: var(--d-text) !important;
}
html.dark-theme .text-toolbar .tt-A,
html.dark-theme .text-toolbar .tt-pop label,
html.dark-theme .text-toolbar .it-inline label,
html.dark-theme #imageToolbar .tt-pop label {
color: var(--d-text-2) !important;
}
html.dark-theme .text-toolbar .tt-btn:hover,
html.dark-theme .text-toolbar .tt-color-wrap:hover { background: var(--d-surface-2) !important; }
html.dark-theme .text-toolbar .tt-btn.active { background: var(--d-surface-3) !important; color: #6aa3ff !important; }
/* Icon các nút trong toolbar đang quá tối → sáng lại */
html.dark-theme .text-toolbar .tt-btn,
html.dark-theme .text-toolbar .tt-A,
html.dark-theme .text-toolbar .tt-size { color: var(--d-text) !important; }
html.dark-theme .text-toolbar .tt-size,
html.dark-theme .text-toolbar .tt-font {
background-color: var(--d-surface-2) !important;
border-color: var(--d-border-2) !important;
}
/* Divider trong toolbar đang quá sáng → mờ */
html.dark-theme .text-toolbar .tt-sep { background: var(--d-border) !important; }
/* Divider giữa các icon trong property row (#666) → mờ */
html.dark-theme .icon-property:after { background-color: var(--d-border) !important; }
/* Property item (layer/option trong group) → nền card đồng nhất, viền mảnh */
html.dark-theme .property-item {
background-color: var(--d-surface) !important;
border-color: var(--d-border) !important;
}
html.dark-theme .property-item.border-info {
border-color: #6aa3ff !important;
}
/* Thanh công cụ dọc trên canvas (component .btn-group, nút không phải .btn của Bootstrap) */
html.dark-theme .btn-group > button:not(.btn) {
background-color: var(--d-surface-2) !important;
color: var(--d-text) !important;
border-color: var(--d-border-2) !important;
}
html.dark-theme .btn-group > button:not(.btn):hover,
html.dark-theme .btn-group > button:not(.btn).active {
background-color: var(--d-accent) !important;
color: #04130d !important;
}
/* Popup chọn option image: scrollbar tối + Firefox */
html.dark-theme .tt-pop,
html.dark-theme .tt-pop-wide { scrollbar-color: var(--d-surface-3) var(--d-surface); }
html.dark-theme .tt-pop::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-theme .tt-pop::-webkit-scrollbar-track { background: var(--d-surface); }
html.dark-theme .tt-pop::-webkit-scrollbar-thumb { background: var(--d-surface-3); border-radius: 6px; }
/* Các block "border rounded p-2" nền trắng inline đã được phủ bởi rule #f8f9fa/#fff */
/* ---------- Outbound processing: card khối tote + hover ---------- */
html.dark-theme .card-tote-block {
background-color: var(--d-surface-2) !important;
border-color: var(--d-border) !important;
}
html.dark-theme .tote-item-row:hover {
background-color: var(--d-surface-2) !important;
}
/* ---------- Ảnh/logo nền sáng trong content giữ nguyên ---------- */
html.dark-theme img { /* không filter ảnh nội dung */ }