/* ==========================================================================
   SalesPro Dark Mode - Theme Matching pos.gisulsrl.com Reference Exactly
   ========================================================================== */

/* Base & HTML Body */
html.dark-mode,
body.dark-mode,
html.dark-mode .page,
body.dark-mode .page {
    background-color: #0b0f19 !important;
    color: #e2e8f0 !important;
}

/* Header & Navbar */
html.dark-mode header.header,
body.dark-mode header.header,
html.dark-mode nav.navbar,
body.dark-mode nav.navbar {
    background-color: #0b0f19 !important;
    border-bottom: 1px solid #1e293b !important;
}

html.dark-mode nav.navbar a,
body.dark-mode nav.navbar a,
html.dark-mode nav.navbar .nav-link,
body.dark-mode nav.navbar .nav-link,
html.dark-mode header.header a,
body.dark-mode header.header a {
    color: #38bdf8 !important;
}

html.dark-mode nav.navbar a:hover,
body.dark-mode nav.navbar a:hover,
html.dark-mode header.header a:hover,
body.dark-mode header.header a:hover {
    color: #ffffff !important;
}

html.dark-mode .brand-big a,
body.dark-mode .brand-big a,
html.dark-mode .brand-big h1,
body.dark-mode .brand-big h1,
html.dark-mode .brand-text h1,
body.dark-mode .brand-text h1 {
    color: #ffffff !important;
}

/* ==========================================================================
   Sidebar Navigation & Sub-menus
   ========================================================================== */
html.dark-mode .side-navbar,
body.dark-mode .side-navbar {
    background-color: #0f172a !important;
    border-right: 1px solid #1e293b !important;
}

html.dark-mode .side-navbar a,
body.dark-mode .side-navbar a,
html.dark-mode .side-navbar li a,
body.dark-mode .side-navbar li a,
html.dark-mode .side-navbar ul,
body.dark-mode .side-navbar ul,
html.dark-mode .side-navbar ul.collapse,
body.dark-mode .side-navbar ul.collapse,
html.dark-mode .side-navbar ul li,
body.dark-mode .side-navbar ul li,
html.dark-mode .side-navbar ul li a,
body.dark-mode .side-navbar ul li a,
html.dark-mode .side-navbar span,
body.dark-mode .side-navbar span {
    color: #38bdf8 !important;
    background-color: #0f172a !important;
    background: #0f172a !important;
}

html.dark-mode .side-navbar i,
body.dark-mode .side-navbar i,
html.dark-mode .side-navbar .arrow,
body.dark-mode .side-navbar .arrow,
html.dark-mode .side-navbar li a i,
body.dark-mode .side-navbar li a i {
    color: #38bdf8 !important;
}

html.dark-mode .side-navbar li a:hover,
body.dark-mode .side-navbar li a:hover,
html.dark-mode .side-navbar ul li a:hover,
body.dark-mode .side-navbar ul li a:hover {
    color: #ffffff !important;
    background-color: #1e293b !important;
    background: #1e293b !important;
}

html.dark-mode .side-navbar li.active > a,
body.dark-mode .side-navbar li.active > a,
html.dark-mode .side-navbar li a[aria-expanded="true"],
body.dark-mode .side-navbar li a[aria-expanded="true"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #38bdf8 !important;
    border-left: 4px solid #38bdf8 !important;
}

/* ==========================================================================
   Cards & Modals (Fondo Azul Marino Oscuro)
   ========================================================================== */
html.dark-mode .card,
body.dark-mode .card,
html.dark-mode .modal-content,
body.dark-mode .modal-content,
html.dark-mode .dropdown-menu,
body.dark-mode .dropdown-menu,
html.dark-mode div.card,
body.dark-mode div.card {
    background-color: #172033 !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
    border-radius: 10px !important;
}

html.dark-mode .card-header,
body.dark-mode .card-header {
    background-color: #172033 !important;
    border-bottom: 1px solid #1e293b !important;
    color: #ffffff !important;
}

html.dark-mode .card-header h3,
body.dark-mode .card-header h3,
html.dark-mode .card-header h4,
body.dark-mode .card-header h4,
html.dark-mode .card-header h5,
body.dark-mode .card-header h5 {
    color: #ffffff !important;
}

/* Welcome Header */
html.dark-mode h2.italic,
body.dark-mode h2.italic,
html.dark-mode .dashboard-counts h2,
body.dark-mode .dashboard-counts h2,
html.dark-mode section h2,
body.dark-mode section h2 {
    color: #c084fc !important;
}

/* Tables */
html.dark-mode .table,
body.dark-mode .table,
html.dark-mode .table th,
body.dark-mode .table th,
html.dark-mode .table td,
body.dark-mode .table td {
    background-color: #172033 !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}

html.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Forms & Inputs */
html.dark-mode .form-control,
body.dark-mode .form-control,
html.dark-mode select,
body.dark-mode select,
html.dark-mode textarea,
body.dark-mode textarea,
html.dark-mode .bootstrap-select .btn,
body.dark-mode .bootstrap-select .btn {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html.dark-mode .form-control:focus,
body.dark-mode .form-control:focus {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
}

/* ==========================================================================
   Dashboard Metrics & Cards
   ========================================================================== */
html.dark-mode .dashboard-counts,
body.dark-mode .dashboard-counts,
html.dark-mode section.dashboard-counts,
body.dark-mode section.dashboard-counts {
    background-color: transparent !important;
}

html.dark-mode .dashboard-counts .wrapper,
body.dark-mode .dashboard-counts .wrapper,
html.dark-mode .dashboard-counts div.wrapper,
body.dark-mode .dashboard-counts div.wrapper,
html.dark-mode .dashboard-counts .count-title,
body.dark-mode .dashboard-counts .count-title,
html.dark-mode div.count-title,
body.dark-mode div.count-title {
    background-color: #172033 !important;
    background: #172033 !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
    border-radius: 10px !important;
    padding: 20px !important;
}

/* Card 1: Ingresos (Revenue) */
html.dark-mode .dashboard-counts .col-sm-4:nth-child(1) .wrapper .icon i,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(1) .wrapper .icon i,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(1) .wrapper .name strong,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(1) .wrapper .name strong,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(1) .wrapper .name,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(1) .wrapper .name {
    color: #c084fc !important;
}

/* Card 2: Costos (Cost) */
html.dark-mode .dashboard-counts .col-sm-4:nth-child(2) .wrapper .icon i,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(2) .wrapper .icon i,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(2) .wrapper .name strong,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(2) .wrapper .name strong,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(2) .wrapper .name,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(2) .wrapper .name {
    color: #4ade80 !important;
}

/* Card 3: Ganancias (Profit) */
html.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .icon i,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .icon i,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name strong,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name strong,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name {
    color: #60a5fa !important;
}

/* Metric Numbers */
html.dark-mode .dashboard-counts .count-number,
body.dark-mode .dashboard-counts .count-number,
html.dark-mode .dashboard-counts .count-number strong,
body.dark-mode .dashboard-counts .count-number strong,
html.dark-mode .revenue-data,
body.dark-mode .revenue-data,
html.dark-mode .cost-data,
body.dark-mode .cost-data,
html.dark-mode .profit-data,
body.dark-mode .profit-data {
    color: #38bdf8 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}

/* Period Filter Buttons */
html.dark-mode .filter-toggle,
body.dark-mode .filter-toggle,
html.dark-mode .filter-toggle .btn,
body.dark-mode .filter-toggle .btn,
html.dark-mode .btn-group .btn,
body.dark-mode .btn-group .btn {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark-mode .filter-toggle .btn.active,
body.dark-mode .filter-toggle .btn.active,
html.dark-mode .filter-toggle .btn:hover,
body.dark-mode .filter-toggle .btn:hover,
html.dark-mode .btn-group .btn.active,
body.dark-mode .btn-group .btn.active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Charts & Containers */
html.dark-mode .chart-container,
body.dark-mode .chart-container,
html.dark-mode canvas,
body.dark-mode canvas {
    background-color: transparent !important;
}

/* Dropdowns & Alerts */
html.dark-mode .dropdown-item,
body.dark-mode .dropdown-item {
    color: #e2e8f0 !important;
}

html.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

/* ==========================================================================
   POS Screen Specific Dark Mode Fixes
   ========================================================================== */

/* Main POS Page Layout & Containers */
html.dark-mode section.pos-section,
body.dark-mode section.pos-section,
html.dark-mode .pos-page,
body.dark-mode .pos-page,
html.dark-mode .filter-window,
body.dark-mode .filter-window,
html.dark-mode .product-list,
body.dark-mode .product-list,
html.dark-mode .table-container,
body.dark-mode .table-container,
html.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper,
html.dark-mode .dataTables_empty,
body.dark-mode .dataTables_empty,
html.dark-mode div.card,
body.dark-mode div.card,
html.dark-mode div.card-body,
body.dark-mode div.card-body {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}

/* POS Table (#myTable & #order-table) */
html.dark-mode table.order-list,
body.dark-mode table.order-list,
html.dark-mode table.order-list th,
body.dark-mode table.order-list th,
html.dark-mode table.order-list td,
body.dark-mode table.order-list td,
html.dark-mode #myTable,
body.dark-mode #myTable,
html.dark-mode #myTable th,
body.dark-mode #myTable th,
html.dark-mode #myTable td,
body.dark-mode #myTable td {
    background-color: #172033 !important;
    background: #172033 !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}

/* Bottom Totals Container */
html.dark-mode .totals,
body.dark-mode .totals,
html.dark-mode div.totals,
body.dark-mode div.totals {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #38bdf8 !important;
    border-top: 2px solid #334155 !important;
}

html.dark-mode .totals .totals-title,
body.dark-mode .totals .totals-title {
    color: #cbd5e1 !important;
}

html.dark-mode .payment-amount,
body.dark-mode .payment-amount,
html.dark-mode div.payment-amount,
body.dark-mode div.payment-amount {
    background-color: #172033 !important;
    background: #172033 !important;
    color: #38bdf8 !important;
    border: 1px solid #1e293b !important;
}

html.dark-mode .payment-amount h2,
body.dark-mode .payment-amount h2,
html.dark-mode #grand-total,
body.dark-mode #grand-total {
    color: #38bdf8 !important;
}

/* ==========================================================================
   POS Bottom Action Bar & Button Redesign (.payment-options)
   ========================================================================== */
html.dark-mode .payment-options,
body.dark-mode .payment-options,
html.dark-mode div.payment-options,
body.dark-mode div.payment-options {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
    border-top: 1px solid #1e293b !important;
    padding: 15px 10px !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .payment-options .column-5,
body.dark-mode .payment-options .column-5 {
    padding: 4px !important;
}

html.dark-mode .payment-options .btn-custom,
body.dark-mode .payment-options .btn-custom,
html.dark-mode .payment-options button,
body.dark-mode .payment-options button {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 10px 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    width: 100% !important;
}

html.dark-mode .payment-options .btn-custom:hover,
body.dark-mode .payment-options .btn-custom:hover,
html.dark-mode .payment-options button:hover,
body.dark-mode .payment-options button:hover {
    background-color: #334155 !important;
    background: #334155 !important;
    color: #38bdf8 !important;
}

/* Card 3: Ganancias (Profit) */
html.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .icon i,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .icon i,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name strong,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name strong,
html.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name,
body.dark-mode .dashboard-counts .col-sm-4:nth-child(3) .wrapper .name {
    color: #60a5fa !important;
}

/* Metric Numbers */
html.dark-mode .dashboard-counts .count-number,
body.dark-mode .dashboard-counts .count-number,
html.dark-mode .dashboard-counts .count-number strong,
body.dark-mode .dashboard-counts .count-number strong,
html.dark-mode .revenue-data,
body.dark-mode .revenue-data,
html.dark-mode .cost-data,
body.dark-mode .cost-data,
html.dark-mode .profit-data,
body.dark-mode .profit-data {
    color: #38bdf8 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}

/* Period Filter Buttons */
html.dark-mode .filter-toggle,
body.dark-mode .filter-toggle,
html.dark-mode .filter-toggle .btn,
body.dark-mode .filter-toggle .btn,
html.dark-mode .btn-group .btn,
body.dark-mode .btn-group .btn {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark-mode .filter-toggle .btn.active,
body.dark-mode .filter-toggle .btn.active,
html.dark-mode .filter-toggle .btn:hover,
body.dark-mode .filter-toggle .btn:hover,
html.dark-mode .btn-group .btn.active,
body.dark-mode .btn-group .btn.active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Charts & Containers */
html.dark-mode .chart-container,
body.dark-mode .chart-container,
html.dark-mode canvas,
body.dark-mode canvas {
    background-color: transparent !important;
}

/* Dropdowns & Alerts */
html.dark-mode .dropdown-item,
body.dark-mode .dropdown-item {
    color: #e2e8f0 !important;
}

html.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

/* ==========================================================================
   POS Screen Specific Dark Mode Fixes
   ========================================================================== */

/* Main POS Page Layout & Containers */
html.dark-mode section.pos-section,
body.dark-mode section.pos-section,
html.dark-mode .pos-page,
body.dark-mode .pos-page,
html.dark-mode .filter-window,
body.dark-mode .filter-window,
html.dark-mode .product-list,
body.dark-mode .product-list,
html.dark-mode .table-container,
body.dark-mode .table-container,
html.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper,
html.dark-mode .dataTables_empty,
body.dark-mode .dataTables_empty,
html.dark-mode div.card,
body.dark-mode div.card,
html.dark-mode div.card-body,
body.dark-mode div.card-body {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}

/* POS Table (#myTable & #order-table) */
html.dark-mode table.order-list,
body.dark-mode table.order-list,
html.dark-mode table.order-list th,
body.dark-mode table.order-list th,
html.dark-mode table.order-list td,
body.dark-mode table.order-list td,
html.dark-mode #myTable,
body.dark-mode #myTable,
html.dark-mode #myTable th,
body.dark-mode #myTable th,
html.dark-mode #myTable td,
body.dark-mode #myTable td {
    background-color: #172033 !important;
    background: #172033 !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}

/* Bottom Totals Container */
html.dark-mode .totals,
body.dark-mode .totals,
html.dark-mode div.totals,
body.dark-mode div.totals {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #38bdf8 !important;
    border-top: 2px solid #334155 !important;
}

html.dark-mode .totals .totals-title,
body.dark-mode .totals .totals-title {
    color: #cbd5e1 !important;
}

html.dark-mode .payment-amount,
body.dark-mode .payment-amount,
html.dark-mode div.payment-amount,
body.dark-mode div.payment-amount {
    background-color: #172033 !important;
    background: #172033 !important;
    color: #38bdf8 !important;
    border: 1px solid #1e293b !important;
}

html.dark-mode .payment-amount h2,
body.dark-mode .payment-amount h2,
html.dark-mode #grand-total,
body.dark-mode #grand-total {
    color: #38bdf8 !important;
}

/* ==========================================================================
   POS Bottom Action Bar & Button Redesign (.payment-options)
   ========================================================================== */
html.dark-mode .payment-options,
body.dark-mode .payment-options,
html.dark-mode div.payment-options,
body.dark-mode div.payment-options {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
    border-top: 1px solid #1e293b !important;
    padding: 15px 10px !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .payment-options .column-5,
body.dark-mode .payment-options .column-5 {
    padding: 4px !important;
}

html.dark-mode .payment-options .btn-custom,
body.dark-mode .payment-options .btn-custom,
html.dark-mode .payment-options button,
body.dark-mode .payment-options button {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 10px 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    width: 100% !important;
}

html.dark-mode .payment-options .btn-custom:hover,
body.dark-mode .payment-options .btn-custom:hover,
html.dark-mode .payment-options button:hover,
body.dark-mode .payment-options button:hover {
    background-color: #334155 !important;
    background: #334155 !important;
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(2, 132, 199, 0.25) !important;
}

/* Accent Buttons Highlights in Dark Mode */
html.dark-mode #cash-btn, body.dark-mode #cash-btn { border-left: 4px solid #00cec9 !important; }
html.dark-mode #multiple-pay-btn, body.dark-mode #multiple-pay-btn { border-left: 4px solid #1f6feb !important; }
html.dark-mode #qrcash-btn, body.dark-mode #qrcash-btn { border-left: 4px solid #b130ec !important; }
html.dark-mode #qrsimple-btn, body.dark-mode #qrsimple-btn { border-left: 4px solid #2bf710 !important; }
html.dark-mode #presale-btn, body.dark-mode #presale-btn { border-left: 4px solid #2ecc71 !important; }
html.dark-mode #cancel-btn, body.dark-mode #cancel-btn { border-left: 4px solid #ef4444 !important; color: #fca5a5 !important; }
html.dark-mode #showpresale-btn, body.dark-mode #showpresale-btn { border-left: 4px solid #e84393 !important; }
html.dark-mode #proforma-btn, body.dark-mode #proforma-btn { border-left: 4px solid #6366f1 !important; }

/* Category, Brand & Featured Filter Buttons */
html.dark-mode #category-filter,
body.dark-mode #category-filter {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
}

html.dark-mode #brand-filter,
body.dark-mode #brand-filter {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3) !important;
}

html.dark-mode #featured-filter,
body.dark-mode #featured-filter {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.3) !important;
}

html.dark-mode #category-filter:hover,
body.dark-mode #category-filter:hover,
html.dark-mode #brand-filter:hover,
body.dark-mode #brand-filter:hover,
html.dark-mode #featured-filter:hover,
body.dark-mode #featured-filter:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
}

/* Product & Category Cards in Dark Mode */
html.dark-mode .product-img,
body.dark-mode .product-img,
html.dark-mode .category-img,
body.dark-mode .category-img,
html.dark-mode .brand-img,
body.dark-mode .brand-img,
html.dark-mode .employee-img,
body.dark-mode .employee-img,
html.dark-mode .attendance-img,
body.dark-mode .attendance-img {
    background-color: #172033 !important;
    background: #172033 !important;
    border: 1px solid #1e293b !important;
    border-radius: 12px !important;
    padding: 10px !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .product-img:hover,
body.dark-mode .product-img:hover,
html.dark-mode .category-img:hover,
body.dark-mode .category-img:hover,
html.dark-mode .brand-img:hover,
body.dark-mode .brand-img:hover,
html.dark-mode .employee-img:hover,
body.dark-mode .employee-img:hover,
html.dark-mode .attendance-img:hover,
body.dark-mode .attendance-img:hover {
    background-color: #1e293b !important;
    border-color: #38bdf8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.25) !important;
}

html.dark-mode .product-img img,
body.dark-mode .product-img img,
html.dark-mode .category-img img,
body.dark-mode .category-img img,
html.dark-mode .brand-img img,
body.dark-mode .brand-img img,
html.dark-mode .employee-img img,
body.dark-mode .employee-img img,
html.dark-mode .attendance-img img,
body.dark-mode .attendance-img img {
    border-radius: 12px !important;
    background-color: transparent !important;
    padding: 2px !important;
    border: none !important;
    max-height: 75px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

html.dark-mode .product-img p,
body.dark-mode .product-img p,
html.dark-mode .category-img p,
body.dark-mode .category-img p,
html.dark-mode .brand-img p,
body.dark-mode .brand-img p,
html.dark-mode .employee-img p,
body.dark-mode .employee-img p,
html.dark-mode .attendance-img p,
body.dark-mode .attendance-img p {
    color: #f8fafc !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
}

html.dark-mode .product-img span,
body.dark-mode .product-img span {
    color: #38bdf8 !important;
    background-color: rgba(56, 189, 248, 0.12) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    display: inline-block !important;
}

html.dark-mode .filter-window,
body.dark-mode .filter-window {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 160px) !important;
    background-color: #0f172a !important;
    background: #0f172a !important;
    position: absolute !important;
    top: 65px !important;
    right: 0 !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    padding: 15px !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
}

html.dark-mode .filter-window .col-7,
body.dark-mode .filter-window .col-7 {
    color: #f8fafc !important;
    font-weight: bold !important;
    font-size: 1.05rem !important;
}

html.dark-mode #pf-list-table,
body.dark-mode #pf-list-table {
    border-color: #334155 !important;
}

html.dark-mode #pf-list-table thead th,
body.dark-mode #pf-list-table thead th {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid #334155 !important;
}

html.dark-mode #pf-list-table tbody tr,
body.dark-mode #pf-list-table tbody tr {
    background-color: #0f172a !important;
    transition: background-color 0.15s ease-in-out !important;
}

html.dark-mode #pf-list-table tbody tr:hover,
body.dark-mode #pf-list-table tbody tr:hover {
    background-color: #1e293b !important;
}

html.dark-mode #pf-list-table td,
body.dark-mode #pf-list-table td {
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

.text-cyan {
    color: #38bdf8 !important;
}

html.dark-mode .modal-header h5,
body.dark-mode .modal-header h5,
html.dark-mode .modal-header h6,
body.dark-mode .modal-header h6 {
    color: #ffffff !important;
}