/* ==========================================================================
   SalesPro ERP - Dark Mode (Modo Nocturno) Stylesheet
   ========================================================================== */

/* Active theme on documentElement & body */
html.dark-mode,
body.dark-mode {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Page container & main section */
body.dark-mode .page,
body.dark-mode section,
body.dark-mode div#page,
body.dark-mode .content-inner {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Header Navbar */
body.dark-mode header.header,
body.dark-mode .navbar {
    background-color: #0f172a !important;
    border-bottom: 1px solid #334155 !important;
}

body.dark-mode .navbar a,
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .brand-big,
body.dark-mode .navbar .brand-big h1,
body.dark-mode .navbar .menu-btn {
    color: #f8fafc !important;
}

/* Side Navigation Bar */
body.dark-mode nav.side-navbar,
body.dark-mode .side-navbar {
    background-color: #0f172a !important;
    border-right: 1px solid #334155 !important;
}

body.dark-mode nav.side-navbar a,
body.dark-mode .side-navbar a,
body.dark-mode .side-navbar li a,
body.dark-mode .side-navbar ul li a {
    color: #cbd5e1 !important;
    background-color: transparent !important;
    background: transparent !important;
}

body.dark-mode nav.side-navbar a:hover,
body.dark-mode nav.side-navbar a:focus,
body.dark-mode .side-navbar a:hover,
body.dark-mode .side-navbar a:focus,
body.dark-mode .side-navbar li a:focus,
body.dark-mode .side-navbar li a:hover {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #38bdf8 !important;
}

body.dark-mode nav.side-navbar a[aria-expanded="true"],
body.dark-mode .side-navbar a[aria-expanded="true"],
body.dark-mode .side-navbar li a[aria-expanded="true"],
body.dark-mode ul.side-navbar li a[aria-expanded="true"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}

body.dark-mode .side-navbar li.active > a,
body.dark-mode .side-navbar li > a.active,
body.dark-mode nav.side-navbar li.active > a,
body.dark-mode nav.side-navbar li a.active {
    background-color: #1e3a8a !important;
    background: #1e3a8a !important;
    color: #38bdf8 !important;
    border-left: 4px solid #38bdf8 !important;
    font-weight: 600 !important;
}

body.dark-mode nav.side-navbar ul,
body.dark-mode .side-navbar ul {
    background-color: #0f172a !important;
}

body.dark-mode nav.side-navbar ul ul,
body.dark-mode .side-navbar ul ul {
    background-color: #0b1329 !important;
}

body.dark-mode nav.side-navbar ul ul a,
body.dark-mode .side-navbar ul ul a {
    color: #94a3b8 !important;
    background-color: #0b1329 !important;
    background: #0b1329 !important;
}

body.dark-mode nav.side-navbar ul ul a:hover,
body.dark-mode .side-navbar ul ul a:hover {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #38bdf8 !important;
}

body.dark-mode nav.side-navbar ul ul li.active > a,
body.dark-mode nav.side-navbar ul ul a.active,
body.dark-mode .side-navbar ul ul li.active > a,
body.dark-mode .side-navbar ul ul a.active {
    background-color: #0284c7 !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

/* Cards & Panels */
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .box,
body.dark-mode .panel,
body.dark-mode .dashboard-counts .wrapper,
body.dark-mode .dashboard-counts div.wrapper,
body.dark-mode .dashboard-counts .count-title,
body.dark-mode div.count-title,
body.dark-mode section.dashboard-counts .wrapper {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .dashboard-counts .count-number {
    color: #38bdf8 !important;
}

body.dark-mode .filter-toggle .btn {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

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

body.dark-mode .card-header {
    border-bottom: 1px solid #334155 !important;
}

/* Tables & DataTables */
body.dark-mode table,
body.dark-mode .table,
body.dark-mode table.dataTable {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode table th,
body.dark-mode table td,
body.dark-mode .table th,
body.dark-mode .table td {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-mode table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #162032 !important;
}

body.dark-mode table.table-hover tbody tr:hover td {
    background-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_processing,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #cbd5e1 !important;
}

body.dark-mode .dataTables_wrapper input,
body.dark-mode .dataTables_wrapper select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #475569 !important;
}

body.dark-mode .paginate_button {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .paginate_button.active,
body.dark-mode .paginate_button.current {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

/* Forms & Inputs */
body.dark-mode input.form-control,
body.dark-mode select.form-control,
body.dark-mode textarea.form-control,
body.dark-mode .bootstrap-select .btn {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

body.dark-mode input.form-control:focus,
body.dark-mode select.form-control:focus,
body.dark-mode textarea.form-control:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important;
}

body.dark-mode .input-group-text,
body.dark-mode .input-group-addon {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

/* Selectpicker dropdowns */
body.dark-mode .dropdown-menu {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .dropdown-menu a,
body.dark-mode .dropdown-menu .dropdown-item,
body.dark-mode .dropdown-menu li a,
body.dark-mode .dropdown-menu.inner li a {
    color: #e2e8f0 !important;
    background-color: transparent !important;
    background: transparent !important;
}

body.dark-mode .dropdown-menu a:hover,
body.dark-mode .dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:focus,
body.dark-mode .dropdown-menu li a:hover,
body.dark-mode .dropdown-menu.inner li a:hover {
    background-color: #334155 !important;
    background: #334155 !important;
    color: #38bdf8 !important;
}

/* Selected / Active Item in Dropdowns */
body.dark-mode .dropdown-menu li.selected a,
body.dark-mode .dropdown-menu li.active a,
body.dark-mode .dropdown-menu li.selected,
body.dark-mode .dropdown-menu .dropdown-item.active,
body.dark-mode .dropdown-menu .dropdown-item.selected,
body.dark-mode .dropdown-menu.inner li.selected a,
body.dark-mode .dropdown-menu.inner li.active a,
body.dark-mode .bootstrap-select .dropdown-menu.inner li.selected a,
body.dark-mode .bootstrap-select .dropdown-menu.inner li a.selected {
    background-color: #0284c7 !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

body.dark-mode .bs-searchbox input,
body.dark-mode .bs-searchbox .form-control {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #38bdf8 !important;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #334155 !important;
}

body.dark-mode .close,
body.dark-mode button.close {
    color: #f8fafc !important;
    text-shadow: none !important;
    opacity: 0.8;
}

body.dark-mode .close:hover {
    color: #38bdf8 !important;
    opacity: 1;
}

/* Summary Row Highlights in Dark Mode */
body.dark-mode .table-secondary,
body.dark-mode tr.table-secondary td {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode .table-primary,
body.dark-mode tr.table-primary td {
    background-color: #0369a1 !important;
    color: #ffffff !important;
}

body.dark-mode .table-warning,
body.dark-mode tr.table-warning td {
    background-color: #854d0e !important;
    color: #fef08a !important;
}

/* POS Specific Overrides */
body.dark-mode .pos-page,
body.dark-mode .pos-container,
body.dark-mode #pos-layout {
    background-color: #0f172a !important;
}

body.dark-mode .product-img,
body.dark-mode .product-title {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

body.dark-mode .filter-window {
    background-color: #1e293b !important;
}

/* Buttons */
body.dark-mode .btn-default,
body.dark-mode .btn-secondary {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

body.dark-mode .btn-default:hover,
body.dark-mode .btn-secondary:hover {
    background-color: #475569 !important;
}

/* PrePOS Specific Dark Mode Overrides */
body.dark-mode p,
body.dark-mode .pos-section p {
    color: #f8fafc !important;
}

body.dark-mode .pos-section,
body.dark-mode section.pos-section,
body.dark-mode .pos-section .card,
body.dark-mode .pos-section div[class*='col-'] > div,
body.dark-mode #employee_list,
body.dark-mode .table-container {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode div[style*="background-color: #d8d8ff"],
body.dark-mode div[style*="background-color:#d8d8ff"],
body.dark-mode div[style*="background-color: #D8D8FF"],
body.dark-mode div[style*="background-color: rgb(216, 216, 255)"] {
    background-color: #1e3a8a !important;
    color: #93c5fd !important;
}

/* Purchase Details Modal Cards */
.style-card-box {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 12px 15px;
    color: #0f172a;
}

.style-card-title {
    color: #0f172a;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid #cbd5e1;
    display: block;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

body.dark-mode .style-card-box,
body.dark-mode div.style-card-box,
body.dark-mode div.style-card-from,
body.dark-mode div.style-card-to {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .style-card-title,
body.dark-mode strong.style-card-title {
    color: #38bdf8 !important;
    border-bottom: 1px solid #334155 !important;
}

/* POS & Payment Modal Dark Mode Overrides */
body.dark-mode .payment-amount,
body.dark-mode div.payment-amount {
    background-color: #1e3a8a !important;
    background: #1e3a8a !important;
    color: #38bdf8 !important;
}

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

body.dark-mode .payment-options,
body.dark-mode .pos-page,
body.dark-mode section.pos-section,
body.dark-mode div.pos-page {
    background-color: #0f172a !important;
    background: #0f172a !important;
}

/* Modal Header / Footer Overrides in Dark Mode */
body.dark-mode .modal-header,
body.dark-mode .modal-header.bg-light,
body.dark-mode .modal-footer,
body.dark-mode .modal-footer.bg-light,
body.dark-mode #add-payment .modal-header,
body.dark-mode #add-payment .modal-footer {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode #add-payment .payment-list-wrapper,
body.dark-mode #final_print_container {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

body.dark-mode #add-payment .qc {
    background-color: transparent !important;
    color: #f8fafc !important;
}

/* Proforma Toggle Button in Navbar */
body.dark-mode .proforma-toggle-container,
body.dark-mode .proforma-switch-item,
body.dark-mode .toggle,
body.dark-mode .toggle-off,
body.dark-mode .toggle-group {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode .toggle-off.btn-secondary {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* Login Page Dark Mode Enhancements */
body.dark-mode .login-page,
body.dark-mode .login-page .form-outer,
body.dark-mode .login-page .form-inner {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #f8fafc !important;
}

body.dark-mode .login-page .form-inner {
    position: relative;
    border: 1px solid #334155 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    padding: 2.5rem !important;
}

body.dark-mode .login-page .logo span {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
}

/* Material Inputs in Dark Mode */
body.dark-mode .login-page .form-group-material {
    position: relative;
    margin-bottom: 25px;
}

body.dark-mode .login-page input.input-material,
body.dark-mode .login-page .form-group-material input,
body.dark-mode input.dark-input,
body.dark-mode .dark-input {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid #475569 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
}

body.dark-mode .login-page input.input-material:focus,
body.dark-mode .login-page .form-group-material input:focus,
body.dark-mode input.dark-input:focus,
body.dark-mode .dark-input:focus {
    border-bottom-color: #38bdf8 !important;
}

/* Chrome/Edge Autofill Override in Dark Mode */
body.dark-mode .login-page input:-webkit-autofill,
body.dark-mode .login-page input:-webkit-autofill:hover,
body.dark-mode .login-page input:-webkit-autofill:focus,
body.dark-mode .login-page input:-webkit-autofill:active,
body.dark-mode input.dark-input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #1e293b inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

body.dark-mode .login-page .label-material {
    color: #94a3b8 !important;
}

body.dark-mode .login-page .label-material.active {
    color: #38bdf8 !important;
}

body.dark-mode .login-page #toggle-password {
    color: #94a3b8 !important;
}

body.dark-mode .login-page .custom-control-label,
body.dark-mode .dark-label {
    color: #cbd5e1 !important;
}

body.dark-mode .login-page .forgot-pass {
    color: #38bdf8 !important;
    font-weight: 500;
}

body.dark-mode .login-page .forgot-pass:hover {
    color: #7dd3fc !important;
    text-decoration: underline !important;
}

body.dark-mode .login-page .copyrights,
body.dark-mode .login-page .copyrights a {
    color: #94a3b8 !important;
}

body.dark-mode .login-page .copyrights a:hover {
    color: #38bdf8 !important;
}