/* ============================================================
   UltimatePOS — Dark Mode
   Toggle class: body.dark-mode
   ============================================================ */

/* ---- Base ---- */
body.dark-mode,
body.dark-mode .tw-bg-gray-100,
body.dark-mode main.tw-bg-gray-100 {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

body.dark-mode a { color: #93c5fd; }
body.dark-mode a:hover { color: #bfdbfe; }

/* ---- AdminLTE Content Header ---- */
body.dark-mode .content-header,
body.dark-mode .content-header h1,
body.dark-mode .content-header h1 small {
    color: #d1d5db !important;
}

body.dark-mode .breadcrumb {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}
body.dark-mode .breadcrumb > li + li::before { color: #6b7280; }
body.dark-mode .breadcrumb > .active { color: #9ca3af; }
body.dark-mode .breadcrumb a { color: #93c5fd !important; }

/* ---- Boxes / Cards ---- */
body.dark-mode .box,
body.dark-mode .box-default,
body.dark-mode .box-primary,
body.dark-mode .box-success,
body.dark-mode .box-info,
body.dark-mode .box-warning,
body.dark-mode .box-danger {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

body.dark-mode .box-header,
body.dark-mode .box-header.with-border {
    background: #1f2937 !important;
    border-bottom-color: #374151 !important;
    color: #e5e7eb !important;
}
body.dark-mode .box-header .box-title { color: #e5e7eb !important; }

body.dark-mode .box-footer {
    background: #1f2937 !important;
    border-top-color: #374151 !important;
}

body.dark-mode .box-body { background: #1f2937 !important; }

/* Colored box headers keep their color, just darken slightly */
body.dark-mode .box-primary > .box-header { background: #1e3a5f !important; }
body.dark-mode .box-success > .box-header { background: #14532d !important; }
body.dark-mode .box-info    > .box-header { background: #164e63 !important; }
body.dark-mode .box-warning > .box-header { background: #78350f !important; }
body.dark-mode .box-danger  > .box-header { background: #7f1d1d !important; }

/* ---- Tables ---- */
body.dark-mode .table,
body.dark-mode table {
    color: #e5e7eb !important;
}
body.dark-mode .table > thead > tr > th,
body.dark-mode .table > thead > tr > td {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}
body.dark-mode .table > tbody > tr > td,
body.dark-mode .table > tbody > tr > th,
body.dark-mode .table > tfoot > tr > td {
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1a2535 !important;
}
body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #2d3748 !important;
}
body.dark-mode .table-bordered { border-color: #374151 !important; }
body.dark-mode .table-bordered > tbody > tr > td,
body.dark-mode .table-bordered > thead > tr > th {
    border-color: #374151 !important;
}

/* DataTables ---- */
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_paginate {
    color: #d1d5db !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #93c5fd !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* ---- Sidebar (AdminLTE legacy) ---- */
body.dark-mode .main-sidebar,
body.dark-mode .sidebar,
body.dark-mode .sidebar-menu {
    background-color: #0f172a !important;
    border-right-color: #1e293b !important;
}
body.dark-mode .sidebar-menu > li > a,
body.dark-mode .sidebar-menu li a {
    color: #cbd5e1 !important;
    border-bottom-color: #1e293b !important;
}
body.dark-mode .sidebar-menu > li:hover > a,
body.dark-mode .sidebar-menu > li.active > a {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}
body.dark-mode .sidebar-menu > li > .treeview-menu {
    background: #0a1120 !important;
}
body.dark-mode .treeview-menu > li > a {
    color: #94a3b8 !important;
}
body.dark-mode .treeview-menu > li:hover > a,
body.dark-mode .treeview-menu > li.active > a {
    color: #e2e8f0 !important;
}

/* ---- Sidebar Tailwind (aside.side-bar + #side-bar) ---- */
body.dark-mode aside.side-bar {
    background-color: #0f172a !important;
    border-right-color: #1e293b !important;
}
/* Contenedor #side-bar */
body.dark-mode #side-bar {
    border-color: #1e293b !important;
    background-color: #0f172a !important;
}
/* Todos los links del sidebar */
body.dark-mode #side-bar a {
    color: #cbd5e1 !important;
}
body.dark-mode #side-bar a:hover {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}
/* Estado activo (tw-bg-gray-200) */
body.dark-mode #side-bar a.tw-bg-gray-200 {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
}
/* Dropdown activo (drop_down con tw-bg-gray-200) */
body.dark-mode #side-bar .tw-bg-gray-200 {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
}
/* Sub-menú (chiled) */
body.dark-mode #side-bar .chiled {
    background-color: transparent !important;
}
/* Línea vertical del sub-menú */
body.dark-mode #side-bar .chiled .tw-bg-gray-200 {
    background-color: #334155 !important;
}
/* Links hijos */
body.dark-mode #side-bar .chiled a {
    color: #94a3b8 !important;
}
body.dark-mode #side-bar .chiled a:hover,
body.dark-mode #side-bar .chiled a.tw-text-primary-700 {
    color: #93c5fd !important;
}
/* Headers de sección (VENTAS, COMPRAS, etc.) */
body.dark-mode #side-bar > div > div[class*="tw-px-3"][class*="tw-py-2"][class*="tw-text-xs"] {
    color: #475569 !important;
}
/* Divider */
body.dark-mode #side-bar .tw-my-2 {
    border-color: #1e293b !important;
}
/* SVG arrows en dropdown */
body.dark-mode #side-bar .svg,
body.dark-mode #side-bar svg.svg {
    color: #64748b !important;
}
/* Scrollbar del sidebar */
body.dark-mode aside.side-bar::-webkit-scrollbar { width: 4px; }
body.dark-mode aside.side-bar::-webkit-scrollbar-track { background: #0f172a; }
body.dark-mode aside.side-bar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
body.dark-mode aside.side-bar::-webkit-scrollbar-thumb:hover { background: #475569; }
body.dark-mode .user-panel {
    border-bottom-color: #1e293b !important;
}
body.dark-mode .sidebar-form input {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* ---- Forms ---- */
body.dark-mode .form-control,
body.dark-mode input[type=text],
body.dark-mode input[type=email],
body.dark-mode input[type=password],
body.dark-mode input[type=number],
body.dark-mode input[type=date],
body.dark-mode input[type=time],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    background-color: #3d4a5c !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.3) !important;
}
body.dark-mode .form-control[readonly],
body.dark-mode input[readonly] {
    background-color: #2d3748 !important;
    color: #9ca3af !important;
}

body.dark-mode .input-group-addon {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}
body.dark-mode label,
body.dark-mode .control-label {
    color: #d1d5db !important;
}

/* Select2 */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f3f4f6 !important;
}
body.dark-mode .select2-dropdown {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}
body.dark-mode .select2-container--default .select2-results__option {
    color: #e5e7eb !important;
}
body.dark-mode .select2-container--default .select2-results__option--highlighted {
    background-color: #374151 !important;
    color: #f9fafb !important;
}
body.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

/* ---- Modals ---- */
body.dark-mode .modal-content {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
body.dark-mode .modal-header {
    background-color: #111827 !important;
    border-bottom-color: #374151 !important;
    color: #f3f4f6 !important;
}
body.dark-mode .modal-header .modal-title { color: #f3f4f6 !important; }
body.dark-mode .modal-header .close { color: #9ca3af !important; }
body.dark-mode .modal-footer {
    background-color: #111827 !important;
    border-top-color: #374151 !important;
}
body.dark-mode .modal-body { background-color: #1f2937 !important; }

/* ---- Buttons ---- */
body.dark-mode .btn-default {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}
body.dark-mode .btn-default:hover {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* ---- Alerts / Notifications ---- */
body.dark-mode .alert-success { background-color: #14532d !important; border-color: #166534 !important; color: #bbf7d0 !important; }
body.dark-mode .alert-danger  { background-color: #7f1d1d !important; border-color: #991b1b !important; color: #fecaca !important; }
body.dark-mode .alert-warning { background-color: #78350f !important; border-color: #92400e !important; color: #fde68a !important; }
body.dark-mode .alert-info    { background-color: #164e63 !important; border-color: #155e75 !important; color: #a5f3fc !important; }

/* ---- Nav tabs / pills ---- */
body.dark-mode .nav-tabs { border-bottom-color: #374151 !important; }
body.dark-mode .nav-tabs > li > a {
    color: #9ca3af !important;
    border-color: transparent !important;
}
body.dark-mode .nav-tabs > li.active > a,
body.dark-mode .nav-tabs > li.active > a:hover {
    background-color: #1f2937 !important;
    border-color: #374151 #374151 transparent !important;
    color: #f3f4f6 !important;
}
body.dark-mode .nav-pills > li > a { color: #9ca3af !important; }
body.dark-mode .nav-pills > li.active > a,
body.dark-mode .nav-pills > li.active > a:hover {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* ---- Dropdowns ---- */
body.dark-mode .dropdown-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}
body.dark-mode .dropdown-menu > li > a {
    color: #e5e7eb !important;
}
body.dark-mode .dropdown-menu > li > a:hover,
body.dark-mode .dropdown-menu > li > a:focus {
    background-color: #374151 !important;
    color: #f9fafb !important;
}
body.dark-mode .dropdown-menu > .divider { background-color: #374151 !important; }

/* Tailwind dropdown (header menus) */
body.dark-mode .tw-bg-white.tw-rounded-lg.tw-shadow-lg {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}
body.dark-mode .tw-text-gray-600 { color: #9ca3af !important; }
body.dark-mode .tw-text-gray-900 { color: #f3f4f6 !important; }
body.dark-mode .hover\:tw-bg-gray-100:hover { background-color: #374151 !important; }

/* ---- Pagination ---- */
body.dark-mode .pagination > li > a,
body.dark-mode .pagination > li > span {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #93c5fd !important;
}
body.dark-mode .pagination > li > a:hover {
    background-color: #374151 !important;
    color: #bfdbfe !important;
}
body.dark-mode .pagination > .active > a,
body.dark-mode .pagination > .active > span {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}
body.dark-mode .pagination > .disabled > span,
body.dark-mode .pagination > .disabled > a {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #4b5563 !important;
}

/* ---- Panels / well ---- */
body.dark-mode .panel { background-color: #1f2937 !important; border-color: #374151 !important; }
body.dark-mode .panel-heading { background-color: #111827 !important; border-color: #374151 !important; color: #f3f4f6 !important; }
body.dark-mode .well { background-color: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb !important; }

/* ---- Footer ---- */
body.dark-mode .main-footer {
    background-color: #1f2937 !important;
    border-top-color: #374151 !important;
    color: #9ca3af !important;
}

/* ---- Widget / component ---- */
body.dark-mode .widget-user-2 .widget-user-header { background: #0f172a !important; }
body.dark-mode .info-box { background: #1f2937 !important; }
body.dark-mode .info-box-content { color: #e5e7eb !important; }
body.dark-mode .small-box { background: #1f2937 !important; color: #e5e7eb !important; }
body.dark-mode .small-box .inner h3,
body.dark-mode .small-box .inner p { color: #f3f4f6 !important; }

/* ---- Toastr override ---- */
body.dark-mode #toast-container > .toast {
    opacity: 0.95 !important;
}

/* ---- Scrollbar ---- */
body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; }
body.dark-mode ::-webkit-scrollbar-track { background: #1f2937; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ---- Misc ---- */
body.dark-mode hr { border-color: #374151 !important; }
body.dark-mode .text-muted { color: #6b7280 !important; }
body.dark-mode code {
    background-color: #374151 !important;
    color: #f87171 !important;
}
body.dark-mode pre {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
body.dark-mode .popover {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}
body.dark-mode .popover-title {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}
body.dark-mode .popover-content { color: #e5e7eb !important; }

body.dark-mode .tooltip-inner {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* ---- Content area bg fix ---- */
body.dark-mode #scrollable-container { background-color: #111827 !important; }
body.dark-mode section.content { background-color: #111827 !important; }
body.dark-mode .content-wrapper { background-color: #111827 !important; }

/* Dark mode toggle button transition */
body { transition: background-color 0.2s ease, color 0.2s ease; }

/* ---- jQuery UI Autocomplete (product search) ---- */
/* Always keep readable in both modes */
.ui-autocomplete {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
    z-index: 9999 !important;
}
.ui-autocomplete .ui-menu-item > div,
.ui-autocomplete li {
    color: #111827 !important;
    background-color: #ffffff !important;
}
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item > div:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: none !important;
}
body.dark-mode .ui-autocomplete {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
body.dark-mode .ui-autocomplete .ui-menu-item > div,
body.dark-mode .ui-autocomplete li {
    color: #f3f4f6 !important;
    background-color: #1f2937 !important;
}
body.dark-mode .ui-autocomplete .ui-state-active,
body.dark-mode .ui-autocomplete .ui-menu-item:hover {
    background-color: #374151 !important;
    color: #93c5fd !important;
}

/* ---- POS search input — always readable ---- */
#search_product {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
#search_product::placeholder { color: #9ca3af !important; }
#search_product:focus {
    background-color: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.25) !important;
}
body.dark-mode #search_product {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}
body.dark-mode #search_product::placeholder { color: #9ca3af !important; }
body.dark-mode #search_product:focus {
    background-color: #3d4a5c !important;
    color: #f9fafb !important;
}

/* ============================================================
   UltimatePOS — UX Improvements 2026-03-17
   ============================================================ */

/* ---- Empty State DataTables ---- */
.datatable-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}
body.dark-mode .datatable-empty-state {
    color: #6b7280;
}

/* ---- Transiciones globales de botones ---- */
.btn {
    transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.btn:active:not(:disabled) {
    transform: scale(0.97) !important;
}
.btn-primary:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
    box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
}

/* ---- Animación de entrada en filas de tabla POS ---- */
@keyframes rowFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.product_row {
    animation: rowFadeIn 0.2s ease;
    transform: none !important;
}


/* ---- Animación de entrada en modales ---- */
.modal.fade .modal-dialog {
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    transform: translateY(-10px) scale(0.99) !important;
}
.modal.in .modal-dialog {
    transform: translateY(0) scale(1) !important;
}

/* ---- Focus ring mejorado en inputs ---- */
.form-control:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
    outline: none !important;
}

/* ---- Status badges — colores por estado de pago ---- */
span[data-orig-value="paid"],
.payment-status-paid {
    color: #16a34a !important;
    font-weight: 600;
}
span[data-orig-value="partial"],
.payment-status-partial {
    color: #d97706 !important;
    font-weight: 600;
}
span[data-orig-value="due"],
.payment-status-due {
    color: #dc2626 !important;
    font-weight: 600;
}
span[data-orig-value="overdue"],
.payment-status-overdue {
    color: #9f1239 !important;
    font-weight: 700;
}
span[data-orig-value="draft"],
.payment-status-draft {
    color: #6b7280 !important;
}

/* Labels Bootstrap por estado */
.label[data-payment-status="paid"]    { background-color: #16a34a !important; }
.label[data-payment-status="partial"] { background-color: #d97706 !important; }
.label[data-payment-status="due"]     { background-color: #dc2626 !important; }
.label[data-payment-status="overdue"] { background-color: #9f1239 !important; }
.label[data-payment-status="draft"]   { background-color: #6b7280 !important; }

body.dark-mode span[data-orig-value="paid"]    { color: #4ade80 !important; }
body.dark-mode span[data-orig-value="partial"] { color: #fbbf24 !important; }
body.dark-mode span[data-orig-value="due"]     { color: #f87171 !important; }
body.dark-mode span[data-orig-value="overdue"] { color: #fda4af !important; }

/* ---- Borde izquierdo por estado en filas de tablas ---- */
tr.row-paid    { border-left: 3px solid #16a34a !important; }
tr.row-partial { border-left: 3px solid #d97706 !important; }
tr.row-due     { border-left: 3px solid #dc2626 !important; }
tr.row-draft   { border-left: 3px solid #9ca3af !important; }

/* ---- Stock validation visual en POS ---- */
.qty-over-stock {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}
.qty-ok {
    border-color: #16a34a !important;
}
.stock-warning-msg {
    color: #dc2626;
    font-size: 11px;
    display: block;
    margin-top: 2px;
    font-weight: 500;
}
body.dark-mode .qty-over-stock {
    background-color: #450a0a !important;
    color: #fca5a5 !important;
    border-color: #ef4444 !important;
}

/* ---- Sidebar hover transitions ---- */
.side-bar #side-bar a {
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* ---- Scroll to top button ---- */
.scrolltop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
    transform: translateY(10px);
}
.scrolltop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scrolltop .scroll {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scrolltop .scroll:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(59,130,246,0.5);
}
body.dark-mode .scrolltop .scroll {
    background: #4f46e5;
    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

/* ---- Card hover elevation ---- */
.box {
    transition: box-shadow 0.2s ease !important;
}
.box:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}
body.dark-mode .box:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}

/* ---- Skeleton loading pulse ---- */
@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.skeleton-loading {
    background: #e5e7eb;
    border-radius: 4px;
    animation: skeletonPulse 1.5s ease infinite;
}
body.dark-mode .skeleton-loading {
    background: #374151;
}

/* ---- Tooltips mejorados ---- */
.tooltip-inner {
    max-width: 260px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.tooltip.in { opacity: 0.95 !important; }
body.dark-mode .tooltip-inner {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border: 1px solid #374151 !important;
}
body.dark-mode .tooltip.top .tooltip-arrow    { border-top-color: #1f2937 !important; }
body.dark-mode .tooltip.bottom .tooltip-arrow { border-bottom-color: #1f2937 !important; }
body.dark-mode .tooltip.left .tooltip-arrow   { border-left-color: #1f2937 !important; }
body.dark-mode .tooltip.right .tooltip-arrow  { border-right-color: #1f2937 !important; }