.navbar-nav-right.bg-primary {
  background-color: #0000ff !important; /* Bootstrap primary blue */
}

.navbar-nav-right {
  position: sticky; /* already sticky */
  top: 0;
  z-index: 3000; /* higher than cards and modals */
}

/* Product list scroll */
#productList {
  overflow-y: auto;
  flex-grow: 1;
}

/* Cart items scroll */
#cartBody {
  overflow-y: auto;
  flex-grow: 1;
}

/* Optional: hide extra padding/margin inside cards */
.product-card {
  display: flex;
  flex-direction: column;
}
.product-card .card-body {
  flex-grow: 1;
}

.modal {
  z-index: 3100; /* higher than navbar's 3000 */
}
.modal-backdrop {
  z-index: 3050; /* behind modal but above navbar */
}

/* Make modal content fill height more naturally */
#productModal .modal-dialog {
  max-height: 90vh;
}

#productModal .modal-body {
  display: flex;
  flex-direction: column;
  height: 70vh; /* adjust if needed */
}

/* Make the table scroll only in tbody */
#productListTable {
  border-collapse: collapse;
}

#productListTable thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* Scroll only tbody */
#productTableWrapper {
  flex-grow: 1;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

/* Add space before footer buttons */
#productModal .modal-footer {
  margin-top: 10px;
}

/* wrapper that will scroll inside the swal popup */
.swal2-popup .swal-table-wrapper {
  display: block;
  max-height: 220px; /* adjust height to taste */
  overflow-y: auto;
  margin-top: 10px;
  border-top: 1px solid #eee;
}

/* ensure table layout is predictable */
.swal2-popup .swal-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

/* make thead th sticky */
.swal2-popup .swal-table-wrapper thead th {
  position: sticky;
  top: 0;
  background: #f8f9fa; /* solid background so content doesn't bleed through */
  z-index: 5; /* keep header above rows */
  padding: 12px 8px;
  text-transform: uppercase;
  font-size: 13px;
}

/* optional row styles */
.swal2-popup .swal-table-wrapper tbody td {
  padding: 12px 8px;
  vertical-align: middle;
}

.swal2-popup .swal-scroll-table {
  max-height: 250px;
  overflow-y: auto;
  margin-top: 10px;
  border-top: 1px solid #eee;
}

.swal2-popup .swal-scroll-table thead th {
  position: sticky;
  top: 0;
  background: #f8f8f8;
  z-index: 5000;
  padding: 8px;
  text-transform: uppercase;
  font-size: 13px;
}

/* Force SweetAlert2 above navbar and modals */
.swal2-container {
  z-index: 9999 !important;
}

.swal2-popup {
  z-index: 10000 !important;
}

/* Mobile styles: below 768px */
@media (max-width: 767.98px) {
  /* Stack the header vertically */
  .card-header {
    flex-direction: column !important; /* title on top */
    align-items: stretch !important; /* full width */
    gap: 0.5rem;
  }

  /* Make the right section wrap and full width */
  .card-header > .d-flex {
    flex-wrap: wrap !important; /* allow wrapping */
    width: 100% !important; /* full width */
    gap: 0.5rem;
  }

  /* Override inline styles and make inputs, select, buttons full width */
  .card-header input,
  .card-header select,
  .card-header .btn {
    width: 100% !important; /* full width */
    max-width: 100% !important; /* remove previous max-width */
    min-width: 0; /* allow shrinking */
  }

  .action-buttons {
    flex-direction: column !important;
    align-items: stretch !important; /* full width */
    gap: 0.25rem; /* spacing between buttons */
  }

  .action-buttons .btn {
    width: 100% !important;
  }

  /* Input group text (calendar icon) responsive */
  .input-group-text {
    min-width: auto; /* avoid forcing fixed width */
  }
}

/* Dark mode styles */
body.dark {
  background-color: #121212;
  color: #e0e0e0;
}

/* Navbar dropdown dark mode */
body.dark .dropdown-menu {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

body.dark .dropdown-menu .dropdown-item {
  color: #e0e0e0 !important;
}

body.dark .dropdown-menu .dropdown-item:hover,
body.dark .dropdown-menu .dropdown-item:focus {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
}

body.dark .dropdown-divider {
  border-color: #444 !important;
}

/* Text inside dropdowns (username, role, etc.) */
body.dark .dropdown-menu h6,
body.dark .dropdown-menu small,
body.dark .dropdown-menu span {
  color: #e0e0e0 !important;
}

/* Modal background and text */
body.dark .modal-content {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Modal header/footer background */
body.dark .modal-header,
body.dark .modal-footer {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
}

/* Text inside modal body */
body.dark .modal-body,
body.dark .modal-body span,
body.dark .modal-body small,
body.dark .modal-body h4,
body.dark .modal-body h6 {
  color: #e0e0e0 !important;
}

/* Inputs inside modal */
body.dark .modal-body input,
body.dark .modal-body textarea,
body.dark .modal-body select {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border: 1px solid #444 !important;
}

/* Input placeholders */
body.dark .modal-body ::placeholder {
  color: #aaa !important;
}

/* Modal inputs for dark mode */
body.dark .modal-content input.form-control,
body.dark .modal-content textarea.form-control,
body.dark .modal-content select.form-select {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Headings inside modals */
body.dark .modal-content h1,
body.dark .modal-content h2,
body.dark .modal-content h3,
body.dark .modal-content h4,
body.dark .modal-content h5,
body.dark .modal-content h6 {
  color: #e0e0e0 !important;
}

body.dark .modal-content ::placeholder {
  color: #aaa !important;
}

/* Buttons inside modal for dark mode */
body.dark .modal-content .btn {
  background-color: #0d6efd !important; /* Bootstrap primary color */
  color: #fff !important;
  border-color: #0d6efd !important;
}

body.dark .modal-content .btn:hover {
  background-color: #0b5ed7 !important; /* Slightly darker on hover */
  color: #fff !important;
}

/* Close button */
body.dark .modal .btn-close {
  filter: invert(1) !important; /* Makes the 'x' visible on dark background */
}

/* Dropdown toggle text */
body.dark .nav-link.dropdown-toggle {
  color: #e0e0e0 !important;
}

body.dark .nav-link.dropdown-toggle:hover,
body.dark .nav-link.dropdown-toggle:focus {
  color: #ffffff !important;
}

body.dark .card,
body.dark .container,
body.dark .modal-content {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark .navbar,
body.dark .dropdown-menu {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark a,
body.dark .nav-link,
body.dark .dropdown-item {
  color: #e0e0e0;
}

body.dark .nav-link:hover,
body.dark .dropdown-item:hover {
  color: #ffffff;
}

/* Card background and text */
body.dark .card {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Card headers */
body.dark .card .card-header {
  color: #ffffff !important;
}

/* Card footer */
body.dark .card .card-footer {
  color: #e0e0e0 !important;
}

/* Headings inside cards */
body.dark .card h1,
body.dark .card h2,
body.dark .card h3,
body.dark .card h4,
body.dark .card h5,
body.dark .card h6 {
  color: #ffffff !important;
}

/* Dark mode for select */
body.dark .form-select {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2rem; /* space for custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e0e0e0' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658c-.566-.635.302-1.658.757-1.182L8 9.384l4.792-4.908c.455-.476 1.323.547.757 1.182l-4.796 5.482a1 1 0 0 1-1.512 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

/* Dark mode for date input */
body.dark input[type='date'] {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Attempt to invert the calendar icon */
body.dark input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
}

/* Table container */
body.dark .table-responsive {
  color: #e0e0e0 !important;
}

/* Table */
body.dark table.table {
  color: #e0e0e0 !important;
}

/* Table headers */
body.dark table.table thead th {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444 !important;
}

/* Table body rows */
body.dark table.table tbody td {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}

/* Inputs and selects */
body.dark .form-control,
body.dark .form-select {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Pagination */
body.dark .pagination .page-link {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

body.dark .pagination .page-item.active .page-link {
  background-color: #0d6efd !important;
  color: #ffffff !important;
  border-color: #0d6efd !important;
}

/* Smooth transition */
body.dark .card,
body.dark .table,
body.dark .form-control,
body.dark .form-select,
body.dark .btn,
body.dark .toast {
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}

/* Sidebar container */
body.dark #layout-menu {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  transition:
    background-color 0.3s,
    color 0.3s;
}

/* Sidebar brand */
body.dark #layout-menu .app-brand-link .app-brand-text {
  color: #e0e0e0 !important;
  transition: color 0.3s;
}

body.dark #layout-menu .app-brand-link:hover .app-brand-text {
  color: #ffffff !important;
}

/* Sidebar menu items */
body.dark #layout-menu .menu-item > .menu-link {
  color: #e0e0e0 !important;
  background-color: transparent;
  transition:
    background-color 0.3s,
    color 0.3s;
}

/* Menu items hover */
body.dark #layout-menu .menu-item > .menu-link:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* Active / open menu items */
body.dark #layout-menu .menu-item.active > .menu-link,
body.dark #layout-menu .menu-item.open > .menu-link {
  background-color: #2c2c2c !important;
  color: #ffffff !important;
}

/* Submenu items */
body.dark #layout-menu .menu-item .menu-sub .menu-item > .menu-link {
  color: #d0d0d0 !important;
  background-color: transparent;
}

body.dark #layout-menu .menu-item .menu-sub .menu-item > .menu-link:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* Menu headers */
body.dark #layout-menu .menu-header-text {
  color: #bbbbbb !important;
}

/* Badges */
body.dark #layout-menu .badge {
  background-color: #444 !important;
  color: #e0e0e0 !important;
}

/* Inner shadow */
body.dark #layout-menu .menu-inner-shadow {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode for authentication pages */
body.dark .authentication-wrapper,
body.dark .authentication-inner,
body.dark .card {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

body.dark .app-brand-logo svg,
body.dark .app-brand-link {
  color: #e0e0e0 !important;
}

body.dark .form-control,
body.dark .form-floating input,
body.dark .form-floating textarea {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border: 1px solid #444 !important;
}

body.dark .form-floating label {
  color: #aaa !important;
}

body.dark .form-control:focus,
body.dark .form-floating input:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

body.dark .input-group-text {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

body.dark .btn-primary {
  background-color: #0d6efd !important;
  color: #ffffff !important;
  border-color: #0d6efd !important;
}

body.dark .btn-primary:hover {
  background-color: #0b5ed7 !important;
  color: #ffffff !important;
}

/* Ensure warning buttons stay readable in dark mode */
body.dark .btn-warning,
body.dark .btn-warning:hover,
body.dark .btn-warning:focus {
  color: #fff !important; /* white text */
}

body.dark a {
  color: #0d6efd !important;
}

body.dark a:hover {
  color: #0b5ed7 !important;
}

body.dark .form-check-input {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
}

body.dark .form-check-label {
  color: #e0e0e0 !important;
}

.product-price {
  color: #0d6efd !important;
}

/* Dark mode */
body.dark .product-price {
  color: #ffffff !important;
}

/* Labels */
body.dark .form-label {
  color: #ffffff !important;
}

/* Input fields (text, number, file, select, textarea) */
body.dark .form-control,
body.dark .form-select {
  background-color: #2a2a2a !important;
  border-color: #555 !important;
  color: #ffffff !important;
}

/* File input button */
body.dark input[type='file']::file-selector-button {
  color: #ffffff !important;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
}

/* Back button */
body.dark .btn-secondary {
  background-color: #444 !important;
  color: #fff !important;
  border-color: #555 !important;
}

/* Back button hover */
body.dark .btn-secondary:hover {
  background-color: #555 !important;
  color: #fff !important;
}

/* === Salary Modal Dark Mode Fix === */
body.dark #salaryModal .bg-white {
  background-color: #2a2a2a !important;
  border-color: #555 !important;
}

body.dark #salaryModal .modal-body {
  background-color: #1e1e1e !important;
}

body.dark #salaryModal .rounded-4,
body.dark #salaryModal .rounded-3 {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

body.dark #salaryModal .border-start {
  border-color: #0d6efd !important; /* keep primary color */
}

body.dark #salaryModal table td,
body.dark #salaryModal table tr {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

body.dark #salaryModal select.form-select {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border-color: #555 !important;
}

body.dark #salaryModal small,
body.dark #salaryModal span,
body.dark #salaryModal h5 {
  color: #e0e0e0 !important;
}

body.dark table.table {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Table header */
body.dark table.table thead th {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444 !important;
}

/* Table cells */
body.dark table.table tbody td {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}

/* Override .table-striped light rows */
body.dark table.table.table-striped tbody tr:nth-of-type(odd) {
  background-color: #232323 !important;
}

body.dark table.table.table-striped tbody tr:nth-of-type(even) {
  background-color: #1e1e1e !important;
}

/* Autofill fix for dark mode */
body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover,
body.dark input:-webkit-autofill:focus,
body.dark input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #222 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

body.dark .ri {
  color: #fff !important;
}

/* ============================
   APEXCHARTS DARK MODE FIX
   ============================ */
body.dark .apexcharts-text,
body.dark .apexcharts-legend-text,
body.dark .apexcharts-xaxis text,
body.dark .apexcharts-yaxis text,
body.dark .apexcharts-title-text,
body.dark .apexcharts-subtitle-text {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Axis lines, grid lines */
body.dark .apexcharts-gridline,
body.dark .apexcharts-xaxis line,
body.dark .apexcharts-yaxis line {
  stroke: #666 !important;
}

/* Chart background */
body.dark .apexcharts-canvas {
  background: #1e1e1e !important;
}

/* Tooltip */
body.dark .apexcharts-tooltip {
  background: #2a2a2a !important;
  border-color: #444 !important;
  color: #fff !important;
}

body.dark .apexcharts-tooltip-title {
  background: #2a2a2a !important;
  color: #fff !important;
}