/* =====================================================
   DARK MODE OVERRIDES - Global CSS cho tất cả CustomElements
   Áp dụng khi .dark
   ===================================================== */

/* ---- FileGrid (.fg-*) ---- */
.dark .fg-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.dark .fg-card:hover {
    border-color: #3b82f6 !important;
}

.dark .fg-name {
    color: #e2e8f0 !important;
}

.dark .fg-label,
.dark .fg-meta {
    color: #94a3b8 !important;
}

.dark .fg-btn {
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

.dark .fg-btn:hover {
    background: #334155 !important;
}

.dark .fg-btn-download {
    color: #86efac !important;
    border-color: #166534 !important;
}

.dark .fg-btn-download:hover {
    background: #052e16 !important;
}

.dark .fg-btn-delete {
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}

.dark .fg-btn-delete:hover {
    background: #3b1111 !important;
}

.dark .fg-modal-close {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

.dark .fg-modal-title {
    color: #f1f5f9 !important;
}

/* ---- ImageGrid (.ig-*) ---- */
.dark .ig-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.dark .ig-card:hover {
    border-color: #3b82f6 !important;
}

.dark .ig-name {
    color: #e2e8f0 !important;
}

.dark .ig-note {
    color: #94a3b8 !important;
}

.dark .ig-btn {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #94a3b8 !important;
}

.dark .ig-btn:hover {
    background: #334155 !important;
}

.dark .ig-btn-download {
    color: #86efac !important;
    border-color: #166534 !important;
}

.dark .ig-btn-delete {
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}

/* ---- MemoryGrid (.mg-*) ---- */
.dark .mg-card,
.dark [class*="mg-"]>div[style*="background: #fff"],
.dark [class*="mg-"]>div[style*="background: white"] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.dark .mg-btn-secondary {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

/* ---- ProductGrid (.pg-*) ---- */
.dark .pg-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.dark .pg-code {
    color: #86efac !important;
}

.dark .pg-link {
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.dark .pg-link:hover {
    background: #334155 !important;
}

.dark .pg-close {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.dark .pg-tab {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

.dark .pg-tab.is-active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.dark .pg-tab:hover {
    background: #334155 !important;
}

.dark .pg-headcode {
    color: #86efac !important;
}

.dark .pg-a {
    color: #60a5fa !important;
}

.dark .pg-prose th,
.dark .pg-prose td {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ---- ProductCarousel ---- */
.dark .prose th,
.dark .prose td {
    border-color: #334155 !important;
}

/* ---- TaskFilterPanel (.tfp-*) ---- */
.dark .tfp-user-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

.dark .tfp-user-item:hover {
    background: #334155 !important;
}

.dark .tfp-user-item.selected {
    background: #1e3a5f !important;
    border-color: #3b82f6 !important;
}

.dark .tfp-label {
    color: #94a3b8 !important;
}

.dark .tfp-task-info {
    background: #0c2545 !important;
    border-color: #1e40af !important;
    color: #93c5fd !important;
}

.dark .tfp-result-success {
    background: #052e16 !important;
    border-color: #166534 !important;
    color: #86efac !important;
}

.dark .tfp-result-error {
    background: #3b1111 !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

/* ---- TaskManagerGrid (.tmg-*) ---- */
.dark .tmg-user-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

.dark .tmg-user-item:hover {
    background: #334155 !important;
}

.dark .tmg-user-item.selected {
    background: #1e3a5f !important;
    border-color: #3b82f6 !important;
}

.dark .tmg-filter-label {
    color: #94a3b8 !important;
}

/* ---- Generic inline style overrides ---- */
/* For elements using inline background: white / #fff / #f9fafb */
.dark [style*="background: white"],
.dark [style*="background:#fff"],
.dark [style*="background: #fff"],
.dark [style*="background: #f9fafb"],
.dark [style*="background: #f8fafc"],
.dark [style*="background: #f3f4f6"],
.dark [style*="background: #f8f9fa"] {
    background: #1e293b !important;
}

.dark [style*="background:#f3f4f6"] {
    background: #334155 !important;
}

/* For inline color overrides */
.dark [style*="color: #1f2937"],
.dark [style*="color:#1f2937"] {
    color: #f1f5f9 !important;
}

.dark [style*="color: #374151"],
.dark [style*="color:#374151"] {
    color: #e2e8f0 !important;
}

.dark [style*="color: #6b7280"],
.dark [style*="color:#6b7280"] {
    color: #94a3b8 !important;
}

.dark [style*="color: #9ca3af"],
.dark [style*="color:#9ca3af"] {
    color: #64748b !important;
}

/* For inline border overrides */
.dark [style*="border: 1px solid #e5e7eb"],
.dark [style*="border:1px solid #e5e7eb"] {
    border-color: #334155 !important;
}

.dark [style*="border: 1px solid #d1d5db"],
.dark [style*="border:1px solid #d1d5db"] {
    border-color: #475569 !important;
}

.dark [style*="border-bottom: 1px solid #e5e7eb"] {
    border-color: #334155 !important;
}

/* thead backgrounds */
.dark thead[style*="background: #f3f4f6"],
.dark thead[style*="background:#f3f4f6"] {
    background: #1e293b !important;
}

/* ---- Modal/Lightbox overlays (ProductGrid, ImageGrid) ---- */
.dark [style*="background: #fff"][style*="border-radius"],
.dark [style*="background: white"][style*="border-radius"] {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}