/**
 * Jeloda Dark Mode Theme Styles
 * Este archivo centraliza los estilos y configuraciones exclusivas para el modo oscuro (dark-mode) de la aplicación.
 * 
 * Uso: Cualquier componente, tarjeta, tabla o texto que deba lucir de manera diferente bajo
 * el modo oscuro, debe ser apuntado antecediendo la clase `.dark-mode`.
 */

/* ==============================================================
   OVERRIDE DE VARIABLES GLOBALES CUSTOM (para Dashboard y otros)
   ============================================================== */
.dark-mode {
    --primary: #4e73df;
    --primary-light: #2c3b6b;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --secondary: #858796;
    --light: #2b2b2b;
    --dark: #f8f9fc;
    --white: #2b2b2b;
    --gray-100: #1a1a1a;
    --gray-200: #3b3b3b;
    --gray-300: #4b4b4b;
    --gray-400: #5b5b5b;
    --gray-500: #6b6b6b;
    --gray-600: #a1a1a1;
    --gray-700: #c1c1c1;
    --gray-800: #e1e1e1;
    --gray-900: #f1f1f1;
}

body.dark-mode,
#page-container.dark-mode {
    background-color: var(--gray-100) !important;
    color: var(--gray-900) !important;
}

/* ==============================================================
   AJUSTES GENÉRICOS DE JELODA/ONEUI
   ============================================================== */
.dark-mode .bg-white {
    background-color: var(--white) !important;
}
.dark-mode .text-body-color-dark {
    color: var(--gray-700) !important;
}
.dark-mode .text-dark,
.dark-mode .text-gray-900,
.dark-mode .text-gray-800 {
    color: var(--gray-900) !important;
}

/* Container de la página */
#page-container.dark-mode #main-container,
.dark-mode .content {
    background-color: var(--gray-100) !important;
}

/* Títulos y textos principales */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .h1, .dark-mode .h2, .dark-mode .h3, .dark-mode .h4, .dark-mode .h5, .dark-mode .h6 {
    color: var(--gray-900) !important;
}

/* ==============================================================
   ESTILOS ESPECÍFICOS DEL DASHBOARD & CARDS CUSTOM
   ============================================================== */
.dark-mode .page-header {
    border-bottom-color: var(--gray-200) !important;
}
.dark-mode .page-title {
    color: var(--gray-900) !important;
}
.dark-mode .page-subtitle,
.dark-mode .current-date {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-800) !important;
}
.dark-mode .page-subtitle .fw-bold {
    color: var(--gray-900) !important;
}

/* Tarjetas de estadísticas (Dashboard) */
.dark-mode .stats-card,
.dark-mode .chart-container,
.dark-mode .compact-stat-card {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .stats-card .stats-title,
.dark-mode .compact-stat-card .stat-title {
    color: var(--gray-700) !important;
}
.dark-mode .stats-card .stats-value,
.dark-mode .compact-stat-card .stat-value {
    color: var(--gray-900) !important;
}
.dark-mode .stats-card .stats-link a {
    color: var(--gray-600) !important;
}
.dark-mode .stats-card .stats-link {
    border-top-color: var(--gray-200) !important;
}

/* ==============================================================
   MODALES Y TABLAS
   ============================================================== */
.dark-mode .modal-content {
    background-color: var(--white);
    color: var(--gray-800);
}
.dark-mode .modal-header {
    border-bottom-color: var(--gray-200);
}
.dark-mode .modal-footer {
    border-top-color: var(--gray-200);
}

.dark-mode .table td, .dark-mode .table th {
    border-color: var(--gray-200);
    color: var(--gray-800);
}
.dark-mode .table thead th {
    border-bottom-color: var(--gray-300);
    color: var(--gray-900);
}

/* ==============================================================
   BOOTSTRAP CARDS, BLOCKS & FOOTER GENERICOS
   ============================================================== */
.dark-mode .card,
.dark-mode .block,
.dark-mode .bg-body-light {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .card-body .text-gray-800 {
    color: var(--gray-900) !important;
}

/* Títulos y cabeceras de bloques OneUI */
.dark-mode .block-header-default {
    background-color: var(--gray-100) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.dark-mode .block-title {
    color: var(--gray-900) !important;
}

/* Etiquetas, separadores y textos genéricos */
.dark-mode label {
    color: var(--gray-800) !important;
}
.dark-mode hr {
    border-top-color: var(--gray-200) !important;
}

/* ==============================================================
   SIDE OVERLAY (Right Sidebar)
   ============================================================== */
.dark-mode #side-overlay {
    background-color: var(--white) !important;
    color: var(--gray-800) !important;
    border-left: 1px solid var(--gray-200) !important;
}
.dark-mode #side-overlay .content-header {
    background-color: var(--gray-100) !important;
    border-bottom-color: var(--gray-200) !important;
}
.dark-mode #side-overlay .text-dark {
    color: var(--gray-900) !important;
}


/* ==============================================================
   FORM CONTROLS & INPUTS (Buscador superior, etc.)
   ============================================================== */
.dark-mode .form-control,
.dark-mode .form-control-alt {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-900) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-control-alt:focus {
    background-color: var(--white) !important;
    border-color: var(--primary) !important;
    color: var(--gray-900) !important;
}

.dark-mode .form-control::placeholder,
.dark-mode .form-control-alt::placeholder {
    color: var(--gray-600) !important;
}

/* Fix mobile search wrapper background */
.dark-mode #content_search.show-mobile-search .input-group-search {
    background-color: var(--white) !important;
    border-top-color: var(--gray-200) !important;
    border-bottom-color: var(--gray-200) !important;
}

/* ==============================================================
   BRANCH SELECTORS (Tarjetas de sucursales)
   ============================================================== */
.dark-mode .branch-card {
    background: var(--white) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .branch-card.active {
    background-color: rgba(92, 128, 209, 0.15) !important;
    border-color: #5c80d1 !important;
}

.dark-mode .branch-card-icon {
    background: var(--gray-100) !important;
}

.dark-mode .branch-card.active .branch-card-icon {
    background: #5c80d1 !important;
    color: #ffffff !important;
}

.dark-mode .branch-card h6 {
    color: var(--gray-700) !important;
}

.dark-mode .branch-card.active h6 {
    color: #ffffff !important;
}

/* ==============================================================
   SWEETALERT2
   ============================================================== */
.swal2-popup.swal2-toast {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}
.dark-mode .swal2-popup {
    background: var(--white) !important;
    color: var(--gray-800) !important;
}
.dark-mode .swal2-title {
    color: var(--gray-900) !important;
}

/* ==============================================================
   FOOD SERVICE MODULE (servicio.php POS)
   ============================================================== */
/* Ajuste superior para que el navbar no tape el contenido */
.content-all-servicio {
    padding-top: 64px !important;
}

/* Fondos principales de las dos columnas */
.dark-mode .content-factura {
    background-color: var(--gray-100) !important;
}
.dark-mode .content-pedido {
    background-color: var(--white) !important;
    border-left: 1px solid var(--gray-200) !important;
}

/* Cabecera del panel derecho (pedido) */
.dark-mode .content-title-pedido {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}
.dark-mode .content-title-pedido h2,
.dark-mode .content-title-pedido h5 {
    color: var(--gray-900) !important;
}

/* Tarjetas de Producto (.card-producto) en ambos paneles */
.dark-mode .card-producto,
.dark-mode .card-producto.bg-white {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
}

/* El cuadro de la imagen (izquierda de la tarjeta) */
.dark-mode .card-producto .content-img {
    background-color: var(--gray-100) !important;
    border-right-color: var(--gray-200) !important;
}

/* Textos dentro de la tarjeta */
.dark-mode .card-producto .text-producto-card {
    color: var(--gray-900) !important;
}
.dark-mode .card-producto .text-id {
    color: var(--gray-600) !important;
}

/* Inputs de cantidad y precio dentro de la tarjeta */
.dark-mode .card-producto .input-premium-group {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .card-producto .input-premium-group input {
    color: var(--gray-900) !important;
}
.dark-mode .card-producto .input-premium-group i {
    color: var(--gray-600) !important;
}
.dark-mode .card-producto .input-premium-group:focus-within {
    background-color: var(--white) !important;
    border-color: var(--primary) !important;
}

/* Subtotales y botones en la tarjeta derecha */
.dark-mode .card-producto .subtotal-container {
    border-top-color: var(--gray-200) !important;
}
.dark-mode .card-producto .text-subtotal {
    color: var(--gray-600) !important;
}
.dark-mode .card-producto .val-subtotal {
    color: var(--primary) !important;
}
.dark-mode .card-producto .btn-options-card {
    color: var(--gray-600) !important;
}
.dark-mode .card-producto .btn-options-card:hover {
    background-color: var(--gray-200) !important;
    color: var(--gray-900) !important;
}

/* Totales en la parte inferior derecha */
.dark-mode .content-total-factura {
    background-color: var(--white) !important;
    border-top-color: var(--gray-200) !important;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.3) !important;
}
.dark-mode .content-total-factura h4.text-muted {
    color: var(--gray-600) !important;
}
.dark-mode .content-total-factura #total_base_text,
.dark-mode .content-total-factura .text-dark {
    color: var(--gray-900) !important;
}
/* Buscador dentro del servicio */
.dark-mode .content-all-servicio .form-control {
    background-color: var(--white) !important;
    color: var(--gray-900) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .content-all-servicio .form-control:focus {
    border-color: var(--primary) !important;
}

/* Dropdowns del POS */
.dark-mode .content-all-servicio .dropdown-menu {
    background-color: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}
.dark-mode .content-all-servicio .dropdown-item {
    color: var(--gray-300) !important;
}
.dark-mode .content-all-servicio .dropdown-item:hover,
.dark-mode .content-all-servicio .dropdown-item:focus {
    background-color: var(--gray-700) !important;
    color: var(--white) !important;
}

/* ==============================================================
   FORMS & FILEPOND OVERRIDES (Recetas, etc.)
   ============================================================== */
.dark-mode .input-group-text,
.dark-mode .input-group-append .input-group-text,
.dark-mode .input-group-prepend .input-group-text {
    background-color: var(--gray-100) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .filepond--panel-root {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .filepond--drop-label {
    color: var(--gray-800) !important;
}

/* ==============================================================
   TABLE OVERRIDES
   ============================================================== */
.dark-mode .table .thead-light th {
    background-color: var(--gray-100) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .table td,
.dark-mode .table th {
    border-color: var(--gray-200) !important;
}

.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: inherit;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ==============================================================
   FACTURA POS Y COTIZACION Y REMISION (documento.css) OVERRIDES
   ============================================================== */
.dark-mode #cards_venta .block-invoice {
    background-color: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode #cards_venta .block-header-invoice {
    background-color: var(--gray-100) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.dark-mode #cards_venta .block-title-invoice,
.dark-mode #cards_venta .user-header-card h4,
.dark-mode #cards_venta .summary-row.total-row,
.dark-mode .modal-product-name,
.dark-mode .modal-product-price strong {
    color: var(--gray-800) !important;
}

.dark-mode #cards_venta .user-header-card {
    border-bottom: 1px solid var(--gray-200) !important;
}

.dark-mode #cards_venta .user-header-card .img-avatar {
    border-color: var(--gray-200) !important;
}

.dark-mode #cards_venta .user-header-card p,
.dark-mode #cards_venta .invoice-details p strong,
.dark-mode #cards_venta .invoice-summary .summary-row,
.dark-mode .modal-product-meta,
.dark-mode .modal-product-price small {
    color: var(--gray-600) !important;
}

.dark-mode #cards_venta .invoice-details p,
.dark-mode #cards_venta .invoice-details p span:last-child {
    color: var(--gray-700) !important;
}

.dark-mode #cards_venta .invoice-summary {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode #cards_venta .summary-row.total-row {
    border-top-color: var(--gray-200) !important;
}

.dark-mode #cards_venta .btn-header-action {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--primary) !important;
}

.dark-mode #cards_venta .btn-header-action:hover {
    background-color: var(--gray-200) !important;
    color: var(--primary-light) !important;
    border-color: var(--primary) !important;
}

/* Modal Product Cards */
.dark-mode .modal-product-card {
    background-color: var(--gray-50) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .modal-product-card:hover {
    background-color: var(--gray-100) !important;
    border-color: var(--primary) !important;
}

.dark-mode .modal-product-img {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}

/* Iconos de título: Adjust backgrounds for dark mode */
.dark-mode #card_factura .block-title-invoice i,
.dark-mode #card_factura .invoice-details p i {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important; /* brighter indigo */
}

.dark-mode #card_cliente .block-title-invoice i,
.dark-mode #card_cliente .invoice-details p i {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important; /* brighter emerald */
}

.dark-mode #card_vendedor .block-title-invoice i,
.dark-mode #card_vendedor .invoice-details p i {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #fb923c !important; /* brighter orange */
}

.dark-mode #card_empleado .block-title-invoice i,
.dark-mode #card_empleado .invoice-details p i {
    background-color: rgba(236, 72, 153, 0.15) !important;
    color: #f472b6 !important; /* brighter pink */
}

/* Fix Status badges in dark mode */
.dark-mode .status-ok,
.dark-mode .status-active,
.dark-mode .status-pagado {
    background-color: rgba(22, 101, 52, 0.4) !important; /* darker green bg */
    color: #4ade80 !important; /* lighter green text */
}

.dark-mode .status-pending,
.dark-mode .status-pendiente {
    background-color: rgba(133, 77, 14, 0.4) !important; /* darker yellow bg */
    color: #fbd38d !important; /* lighter yellow text */
}

.dark-mode .status-completed {
    background-color: rgba(55, 48, 163, 0.4) !important; /* darker indigo bg */
    color: #818cf8 !important; /* lighter indigo text */
}

.dark-mode .status-anulado,
.dark-mode .status-cancelado {
    background-color: rgba(153, 27, 27, 0.4) !important; /* darker red bg */
    color: #f87171 !important; /* lighter red text */
}

/* Paginadores unified */
.dark-mode .pagination-main .page-link,
.dark-mode #contentProductosInventario .page-link {
    background-color: var(--gray-50) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-700) !important;
}

.dark-mode .pagination-main .page-link:hover,
.dark-mode #contentProductosInventario .page-link:hover {
    background-color: var(--gray-100) !important;
    border-color: var(--primary) !important;
    color: var(--gray-900) !important;
}

.dark-mode .pagination-main .page-item.active .page-link,
.dark-mode #contentProductosInventario .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.dark-mode .pagination-main .page-item.disabled .page-link,
.dark-mode #contentProductosInventario .page-item.disabled .page-link {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-500) !important;
}

/* ==============================================================
   MÓDULO VENDER OVERRIDES (vender.css / product-cards.css)
   ============================================================== */
.dark-mode {
    --pos-text: var(--gray-800) !important;
    --pos-text-secondary: var(--gray-600) !important;
    --pos-text-muted: var(--gray-500) !important;
    --pos-border: var(--gray-200) !important;
    --pos-border-hover: rgba(255, 255, 255, 0.2) !important;
    --pos-bg-page: var(--gray-50) !important;
    --pos-bg-surface: var(--gray-100) !important;
    --pos-bg-input: rgba(255, 255, 255, 0.05) !important;
}

/* Fix left section and right section backgrounds bypassing the variables */
.dark-mode .content-productos-comprar.bg-white,
.dark-mode .content-productos-comprar {
    background-color: var(--pos-bg-page) !important;
}

.dark-mode .content-cabezal-factura {
    background-color: var(--pos-bg-surface) !important;
}

.dark-mode .content-cabezal-factura label {
    color: var(--pos-text-secondary) !important;
}

/* Products Cards specifically */
.dark-mode .product-card {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .product-name {
    color: var(--pos-text) !important;
}

.dark-mode .product-id {
    color: var(--pos-text-muted) !important;
}

.dark-mode .cart-header-container,
.dark-mode .empty-cart-container,
.dark-mode .content-card-item-shop {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .content-total {
    background-color: rgba(30, 31, 34, 0.95) !important;
    border-top-color: var(--pos-border) !important;
}

.dark-mode .product-controls .form-control-sm,
.dark-mode .product-controls .input-prefix {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text-secondary) !important;
}

.dark-mode .product-img-container,
.dark-mode .empty-cart-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Inputs and Select2 globally in Cabezal */
.dark-mode .content-cabezal-factura .input-group .form-control#search,
.dark-mode .content-cabezal-factura .form-control,
.dark-mode .content-cabezal-factura .form-select {
    border-color: var(--pos-border) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-cabezal-factura .select2-container--bootstrap .select2-selection {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-cabezal-factura .select2-container--bootstrap .select2-selection__rendered {
    color: var(--pos-text) !important;
}

.dark-mode .content-cabezal-factura .select2-container--bootstrap .select2-selection__placeholder {
    color: var(--pos-text-muted) !important;
}

.dark-mode .content-cabezal-factura .input-group .input-group-prepend .input-group-text,
.dark-mode .cart-search-input-container {
    border-color: var(--pos-border) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .content-cabezal-factura .input-group-append .btn-primary {
    border-color: var(--pos-border) !important;
    color: var(--pos-text-secondary) !important;
}

.dark-mode .content-cabezal-factura .input-group-append .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .content-productos-agregados .table thead th {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-mode .content-productos-agregados .update-producto {
    border-color: var(--pos-border) !important;
    background-color: var(--pos-bg-input) !important;
    color: var(--pos-text) !important;
}

/* ==============================================================
   MÓDULO COMPRAR OVERRIDES (comprar.css / card.css)
   ============================================================== */

/* Fix the left section background (content-my-products) */
.dark-mode .content-my-products {
    background-color: var(--pos-bg-page) !important;
}

/* Fix right section (cart) */
.dark-mode .content-shopping-cart {
    background-color: var(--pos-bg-surface) !important;
    border-left: 1px solid var(--pos-border) !important;
}

.dark-mode .content-shopping-cart .table tbody tr {
    background-color: var(--pos-bg-surface) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .content-shopping-cart .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .content-shopping-cart .table thead th {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--pos-text-muted) !important;
    border-bottom-color: var(--pos-border) !important;
}

.dark-mode .content-shopping-cart .table td:nth-child(2),
.dark-mode .content-shopping-cart .table td:nth-child(5) {
    color: var(--pos-text) !important;
}

.dark-mode .content-shopping-cart .form-control-sm {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-shopping-cart .form-control-sm:focus {
    background-color: var(--gray-700) !important;
    border-color: var(--primary) !important;
}

.dark-mode .content-shopping-cart .input-group-text {
    color: var(--pos-text-secondary) !important;
}

/* Total block */
.dark-mode .content-total {
    background-color: rgba(30, 31, 34, 0.95) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid var(--pos-border) !important;
}

/* Product cards in comprar using .card-producto */
.dark-mode .card-producto {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .card-producto:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.6);
}

.dark-mode .card-image {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dark-mode .card-additional-info {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .card-input-group .form-control {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .card-input-group .input-group-text {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

/* Labels and details inside cards */
.dark-mode .card-info h6 {
    color: var(--pos-text) !important;
}

.dark-mode .card-details {
    color: var(--pos-text-muted) !important;
}

/* JS Filter Buttons & Badges (Categorías/Marcas) */
.dark-mode .btn-white {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .btn-white:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .bg-light {
    background-color: var(--pos-bg-page) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .badge-white {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .badge-white:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown menus from cards */
.dark-mode .card-actions .dropdown-menu {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .card-actions .dropdown-item {
    color: var(--pos-text) !important;
}

.dark-mode .card-actions .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .card-actions .dropdown-toggle {
    color: var(--pos-text-muted) !important;
}

.dark-mode .card-actions .dropdown-toggle:hover {
    color: var(--pos-text) !important;
}

/* Select2 container in Comprar */
.dark-mode .content-my-products .select2-container--bootstrap .select2-selection {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-my-products .select2-container--bootstrap .select2-selection__rendered {
    color: var(--pos-text) !important;
}

.dark-mode .content-my-products .select2-container--bootstrap .select2-selection__placeholder {
    color: var(--pos-text-muted) !important;
}

.dark-mode .content-my-products label {
    color: var(--pos-text-secondary) !important;
}