/* Professional Dark Mode Overrides */

body.dark-mode {
  background-color: #151521 !important;
  color: #b5b5c3 !important;
}

body.dark-mode .main-wrapper {
  background-color: #151521;
}

body.dark-mode .page-wrapper {
  background-color: #151521;
}

/* Header & Sidebar */
body.dark-mode .header {
  background-color: #1e1e2d !important;
  border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .sidebar {
  background-color: #1e1e2d !important;
  border-right: 1px solid #2b2b40 !important;
}

body.dark-mode .sidebar .sidebar-menu > ul > li > a {
  color: #a1a5b7;
}

body.dark-mode .sidebar .sidebar-menu > ul > li > a:hover {
  background-color: #151521;
  color: #fff;
}

body.dark-mode .user-menu.nav > li > a {
  color: #ffffff !important;
}

body.dark-mode .shop_status_text {
  color: #50cd89 !important; /* Brighter green for dark mode */
}

/* Typography Overrides */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6, 
body.dark-mode .card-title,
body.dark-mode label,
body.dark-mode .page-title h4 {
  color: #ffffff !important;
}

body.dark-mode .text-muted {
  color: #a1a5b7 !important;
}

body.dark-mode .text-dark {
  color: #ffffff !important;
}

/* Cards & Panels */
body.dark-mode .card,
body.dark-mode .dashboard-status-card,
body.dark-mode .dash-widget,
body.dark-mode .productset {
  background-color: #1e1e2d !important;
  border: 1px solid #2b2b40 !important;
  box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important;
}

body.dark-mode .card-header,
body.dark-mode .card-footer {
  background-color: #1e1e2d !important;
  border-color: #2b2b40 !important;
}

/* Tables */
body.dark-mode .table {
  color: #b5b5c3 !important;
  border-color: #2b2b40 !important;
  background-color: transparent !important;
}

body.dark-mode .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: #2b2b40 !important;
  color: #ffffff !important;
}

body.dark-mode .table thead th {
  background-color: #151521 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #2b2b40 !important;
  border-top: none !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}

body.dark-mode .table tbody tr {
  border-bottom: 1px solid #2b2b40 !important;
  color: #ffffff !important;
}

body.dark-mode .table tbody td {
  border-bottom: 1px solid #2b2b40 !important;
  color: #ffffff !important;
  vertical-align: middle;
}

body.dark-mode .table tbody td *, 
body.dark-mode .table tbody td p,
body.dark-mode .table tbody td span {
  color: inherit;
}

/* Specific inner text like muted elements */
body.dark-mode .table tbody td .text-muted,
body.dark-mode .table tbody td span[style*="color: #666"],
body.dark-mode .table tbody td div[style*="color: #666"] {
  color: #a1a5b7 !important;
}

body.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover td {
  background-color: #2b2b40 !important;
  color: #ffffff !important;
  transition: all 0.2s ease-in-out;
}

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

/* Fix hardcoded inline text colors in tables for dark mode */
body.dark-mode .table span[style*="color: green"] {
  color: #50cd89 !important;
}
body.dark-mode .table span[style*="color: red"] {
  color: #f1416c !important;
}
body.dark-mode .table span[style*="color: #619DD1"],
body.dark-mode .table span[style*="color: #0066b2"] {
  color: #3e97ff !important;
}

/* Form Controls & Inputs */
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode select,
body.dark-mode textarea {
  background-color: #151521 !important;
  border: 1px solid #2b2b40 !important;
  color: #ffffff !important;
}

body.dark-mode .form-control:focus {
  background-color: #151521 !important;
  border-color: #3e97ff !important;
  color: #ffffff !important;
  box-shadow: none;
}

/* Buttons (Global Styles) */
body.dark-mode .btn {
  color: #ffffff !important;
}

body.dark-mode .btn-primary {
  background-color: #3e97ff !important;
  border-color: #3e97ff !important;
  color: #ffffff !important;
}
body.dark-mode .btn-primary:hover {
  background-color: #2a81ea !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-light {
  background-color: #2b2b40 !important;
  border-color: #2b2b40 !important;
  color: #ffffff !important;
}
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-light:hover {
  background-color: #3e3e5c !important;
  border-color: #3e3e5c !important;
}

body.dark-mode .btn-success {
  background-color: #50cd89 !important;
  border-color: #50cd89 !important;
  color: #ffffff !important;
}
body.dark-mode .btn-danger {
  background-color: #f1416c !important;
  border-color: #f1416c !important;
  color: #ffffff !important;
}
body.dark-mode .btn-warning {
  background-color: #ffc700 !important;
  border-color: #ffc700 !important;
  color: #151521 !important;
}
body.dark-mode .btn-info {
  background-color: #7239ea !important;
  border-color: #7239ea !important;
  color: #ffffff !important;
}
body.dark-mode .btn-dark {
  background-color: #151521 !important;
  border-color: #151521 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-white {
  background-color: #1e1e2d !important;
  border-color: #2b2b40 !important;
  color: #ffffff !important;
}
body.dark-mode .btn-white:hover {
  background-color: #2b2b40 !important;
}

/* Modals */
body.dark-mode .modal-content {
  background-color: #1e1e2d !important;
  border: 1px solid #2b2b40 !important;
}

body.dark-mode .modal-header {
  border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .modal-footer {
  border-top: 1px solid #2b2b40 !important;
}

body.dark-mode .close,
body.dark-mode .btn-close {
  color: #ffffff !important;
  text-shadow: none;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background-color: #1e1e2d !important;
  border: 1px solid #2b2b40 !important;
}

body.dark-mode .dropdown-item {
  color: #b5b5c3 !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: #151521 !important;
  color: #ffffff !important;
}

/* Specific overrides for active check pickers / rsuite / select menus */
body.dark-mode .rs-picker-default .rs-btn,
body.dark-mode .rs-picker-toggle {
  background-color: #151521 !important;
  border-color: #2b2b40 !important;
  color: #fff !important;
}

body.dark-mode .rs-picker-menu {
  background-color: #1e1e2d !important;
  border-color: #2b2b40 !important;
}

body.dark-mode .rs-checkbox-checker label {
  color: #b5b5c3 !important;
}

body.dark-mode .rs-picker-menu .rs-picker-select-menu-item {
  background-color: #1e1e2d !important;
  color: #fff;
}

body.dark-mode .rs-picker-menu .rs-picker-select-menu-item:hover,
body.dark-mode .rs-picker-menu .rs-picker-select-menu-item.rs-picker-select-menu-item-active {
  background-color: #151521 !important;
  color: #fff !important;
}

/* Dashboard Table Layout Boxes (dash-count) */
body.dark-mode .dash-count1 {
  background: #1e1e2d !important;
  color: #ffffff !important;
  border: 1px solid #2b2b40 !important;
}

body.dark-mode .dash-count1 h4,
body.dark-mode .dash-count1 h5,
body.dark-mode .dash-count1 h6 {
  color: #ffffff !important;
}

body.dark-mode .dash-count.das1,
body.dark-mode .dash-count.das2 {
  background: rgba(80, 205, 137, 0.1) !important; /* Soft Translucent Green */
  color: #ffffff !important;
  border: 1px solid rgba(80, 205, 137, 0.3) !important;
}

body.dark-mode .dash-count.das1 h4,
body.dark-mode .dash-count.das2 h4,
body.dark-mode .dash-count.das1 h6,
body.dark-mode .dash-count.das2 h6 {
  color: #50cd89 !important;
}

body.dark-mode .dash-count.das3 {
  background: rgba(62, 151, 255, 0.1) !important; /* Soft Translucent Blue */
  color: #ffffff !important;
  border: 1px solid rgba(62, 151, 255, 0.3) !important;
}

body.dark-mode .dash-count.das3 h4,
body.dark-mode .dash-count.das3 h6 {
  color: #3e97ff !important;
}

/* Floating Action Buttons inside Dash Counts */
body.dark-mode .dash-count button,
body.dark-mode .dash-count1 button {
  background-color: #2b2b40 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

body.dark-mode .dash-count button:hover,
body.dark-mode .dash-count1 button:hover {
  background-color: #3e97ff !important;
  color: #ffffff !important;
}

body.dark-mode .btn-added {
  background-color: #2b2b40 !important;
  border-color: #2b2b40 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-added:hover {
  background-color: #3e97ff !important;
  border-color: #3e97ff !important;
  color: #ffffff !important;
}

body.dark-mode .btn-added img {
  filter: brightness(0) invert(1) !important;
}

/* -------------------------------------------------------------------------
   Sidebar & Header Top Nav Icons 
   ------------------------------------------------------------------------- */

/* Header Top Icons (Bell, Dark Mode Toggle, QR Code) */
body.dark-mode .header .nav-item .nav-link,
body.dark-mode .header .nav-item > a {
  color: #ffffff !important;
  transition: all 0.2s ease;
}

body.dark-mode .header .nav-item > a:hover {
  color: #ffffff !important;
}

/* Ensure all icons in header are white */
body.dark-mode .header i,
body.dark-mode .header .nav-item i,
body.dark-mode .header .nav-link i,
body.dark-mode .user-menu i {
  color: #ffffff !important;
}

/* Logo visibility in dark mode */
body.dark-mode .header .logo img,
body.dark-mode .header-left .logo img {
  filter: brightness(0) invert(1) !important;
}

/* Fix for the moon icon specifically if it has text-dark */
body.dark-mode .header .text-dark {
  color: #ffffff !important;
}

/* PosHeader Radio Buttons visibility */
body.dark-mode .header [style*="color: #37474f"],
body.dark-mode .header [style*="rootColor: #37474f"] {
  color: #ffffff !important;
}

/* Support Icon pulsed background if needed */
body.dark-mode .support-dropdown .support-icon {
  background: linear-gradient(90deg, #3e97ff 0%, #619dd1 100%) !important;
}

body.dark-mode .support-menu {
  background-color: #1e1e2d !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .support-item {
  background: #2b2b40 !important;
}

body.dark-mode .support-item:hover {
  background: #3e97ff !important;
}

body.dark-mode .support-item:hover .support-value {
  color: #ffffff !important;
}

body.dark-mode .support-label {
  color: #a1a5b7 !important;
}

body.dark-mode .support-value {
  color: #ffffff !important;
}

body.dark-mode .support-footer {
  background: #151521 !important;
  border-top: 1px solid #2b2b40 !important;
}

/* RSuite Picker overrides in Header */
body.dark-mode .rs-picker-toggle,
body.dark-mode .rs-picker-menu {
  background-color: #1e1e2d !important;
  color: #ffffff !important;
  border-color: #2b2b40 !important;
}

body.dark-mode .rs-picker-menu-item {
  color: #a1a5b7 !important;
}

body.dark-mode .rs-picker-menu-item:hover,
body.dark-mode .rs-picker-menu-item-focus {
  background-color: #3e97ff !important;
  color: #ffffff !important;
}

/* Sidebar Specific Overrides */
body.dark-mode .sidebar,
body.dark-mode .sidebar1,
body.dark-mode .ps-sidebar-container,
body.dark-mode .ps-sidebar-root {
  background-color: #1e1e2d !important;
  border-right: 1px solid #2b2b40 !important;
}

body.dark-mode .sidebar-menu ul li a,
body.dark-mode .ps-menu-button {
  color: #a1a5b7 !important;
}

body.dark-mode .sidebar-menu ul li a:hover,
body.dark-mode .sidebar-menu ul li.active a,
body.dark-mode .ps-menu-button:hover,
body.dark-mode .ps-menu-button.ps-active {
  color: #ffffff !important;
  background-color: #151521 !important;
}

body.dark-mode .sidebar-menu ul li a i,
body.dark-mode .sidebar-menu ul li a svg,
body.dark-mode .ps-menu-icon i,
body.dark-mode .ps-menu-icon svg {
  color: #a1a5b7 !important;
  fill: #a1a5b7 !important;
}

body.dark-mode .sidebar-menu ul li a:hover i,
body.dark-mode .sidebar-menu ul li.active a i,
body.dark-mode .sidebar-menu ul li a:hover svg,
body.dark-mode .sidebar-menu ul li.active a svg,
body.dark-mode .ps-menu-button:hover .ps-menu-icon i,
body.dark-mode .ps-menu-button.ps-active .ps-menu-icon i,
body.dark-mode .ps-menu-button:hover .ps-menu-icon svg,
body.dark-mode .ps-menu-button.ps-active .ps-menu-icon svg {
  color: #3e97ff !important;
  fill: #3e97ff !important;
}

/* Store Toggle / Status Dot */
body.dark-mode .userset .status.online {
  border-color: #1e1e2d !important;
  background-color: #50cd89 !important; /* Vibrant green for visibility on dark */
}

body.dark-mode .userset .status {
  border-color: #1e1e2d !important;
}

body.dark-mode .header .userset .user-info .user-name {
  color: #ffffff !important;
}

body.dark-mode .header .userset .user-info .user-role {
  color: #a1a5b7 !important;
}

/* Ensure the shop-open/close switch isn't visually lost */
body.dark-mode .form-switch .form-check-input {
  background-color: #2b2b40 !important;
  border-color: #2b2b40 !important;
}
body.dark-mode .form-switch .form-check-input:checked {
  background-color: #50cd89 !important;
  border-color: #50cd89 !important;
}

/* -------------------------------------------------------------------------
   Navigation & Tabs (nav-item, nav-link, nav-tabs)
   ------------------------------------------------------------------------- */

body.dark-mode .nav-tabs {
  border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .nav-item .nav-link {
  color: #a1a5b7 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

body.dark-mode .nav-tabs .nav-link {
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}

body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-item.show .nav-link {
  color: #3e97ff !important;
  background-color: transparent !important;
  border-color: transparent transparent #3e97ff transparent !important;
}

body.dark-mode .nav-link:hover {
  color: #ffffff !important;
}

/* If used as pills */
body.dark-mode .nav-pills .nav-link.active,
body.dark-mode .nav-pills .show > .nav-link {
  color: #ffffff !important;
  background-color: #3e97ff !important;
}

/* Specific fix for nav-link inside cards or other containers */
body.dark-mode .card .nav-tabs {
  background-color: transparent !important;
}

body.dark-mode .new-tabs-for-page-top {
  color: #a1a5b7 !important;
  background-color: #1e1e2d !important;
  border: 1px solid #2b2b40 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-right: 10px !important;
}

body.dark-mode .new-tabs-for-page-top:hover {
  color: #ffffff !important;
  background-color: #2b2b40 !important;
}

body.dark-mode .new-tabs-for-page-top.active {
  color: #ffffff !important;
  background-color: #3e97ff !important;
  border-color: #3e97ff !important;
}

/* Drawer / Notification Section Overrides */
body.dark-mode .rs-drawer-header,
body.dark-mode .rs-drawer-content {
  background-color: #1e1e2d !important;
}

body.dark-mode .rs-drawer-header {
  border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .rs-drawer-title {
  color: #ffffff !important;
}

body.dark-mode .rs-drawer-body {
  background-color: #151521 !important;
}

/* Target the inline style white backgrounds in the settings toggle Drawer */
body.dark-mode .rs-drawer-body > div > div {
  background-color: #1e1e2d !important;
  border: 1px solid #2b2b40 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* Target inline colors for Drawer text (e.g. Outlet Status, Notifications) */
body.dark-mode .rs-drawer-body h6[style*="color: #6c757d"],
body.dark-mode .rs-drawer-body p[style*="color: #6c757d"],
body.dark-mode .rs-drawer-body p {
  color: #a1a5b7 !important;
}

body.dark-mode .rs-drawer-body h6[style*="color: #2c3e50"] {
  color: #ffffff !important;
}

/* Ensure Store Status toggle switches are properly visible in Dark Mode Drawers */
body.dark-mode .checktoggle-small {
  background-color: #2b2b40 !important;
}

body.dark-mode input.check:checked + .checktoggle-small {
  background-color: #50cd89 !important;
}

/* ==========================================================
   Order Details Drawer & Drawer Tables
   ========================================================== */

/* The Order Details doesn't use standard tables; it uses a grid framework 
   via .item_row and .single_item_row classes disguised as tables */

body.dark-mode .item_row {
  background-color: #1e1e2d !important;
  border-bottom: 2px solid #2b2b40 !important;
  color: #ffffff !important;
}

body.dark-mode .single_item_row {
  background-color: transparent !important;
  border-bottom: 1px dashed #2b2b40 !important;
  color: #a1a5b7 !important;
}

/* ==========================================================
   POS Specific Styles (Pos.jsx)
   ========================================================== */

/* Overriding the inline white bg injected into the main container */
body.dark-mode .main-wrappers[style*="backgroundColor: #fff"],
body.dark-mode .main-wrappers[style*="backgroundColor: rgb(255, 255, 255)"],
body.dark-mode .main-wrappers,
body.dark-mode div[style*="backgroundColor: #fff"],
body.dark-mode div[style*="background: #fff"] {
  background-color: #151521 !important;
  color: #a1a5b7 !important;
}

/* POS Sidebar Scroll area */
body.dark-mode .sidebar_scroll {
  background-color: #1e1e2d !important;
  border-left: 1px solid #2b2b40 !important;
}

/* The inline style search inputs */
body.dark-mode #pos_search_bar,
body.dark-mode .search-input {
  /* background-color: #151521 !important; */
  color: #ffffff !important;
}

/* POS modals like Add Customer and Open Item */
body.dark-mode .customModal,
body.dark-mode .new_modal_styling,
body.dark-mode .new_modal_styling2 {
  background-color: #1e1e2d !important;
  border: 1px solid #2b2b40 !important;
}

body.dark-mode .pos_divs_row h5,
body.dark-mode .customModal h4,
body.dark-mode h5[style*="borderBottom: 1px solid #e0e0e0"],
body.dark-mode h5[style*="border-bottom: 1px solid #e0e0e0"],
body.dark-mode h5[style*="border-bottom: 1px solid rgb(224, 224, 224)"] {
  color: #ffffff !important;
  border-bottom-color: #2b2b40 !important;
}

/* POS Categories (Pos.jsx -> Category component) */
body.dark-mode div[style*="backgroundColor: #f8f9fa"],
body.dark-mode div[style*="background-color: #f8f9fa"],
body.dark-mode div[style*="backgroundColor: rgb(248, 249, 250)"],
body.dark-mode div[style*="backgroundColor: #e9ecef"],
body.dark-mode div[style*="backgroundColor: rgb(233, 236, 239)"] {
  background-color: #151521 !important;
  border-color: #2b2b40 !important;
  color: #ffffff !important;
}

body.dark-mode span[style*="color: #0066b2"],
body.dark-mode span[style*="color: rgb(0, 102, 178)"],
body.dark-mode h5[style*="color: #0066b2"],
body.dark-mode h5[style*="color: rgb(0, 102, 178)"],
body.dark-mode i[style*="color: #0066b2"],
body.dark-mode i[style*="color: rgb(0, 102, 178)"] {
  color: #3e97ff !important;
}

/* POS Add Bottom Cart & Totals (PosAdd component) */
body.dark-mode .totalitem {
  background-color: #1e1e2d !important;
  border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .totalitem h4,
body.dark-mode .totalitem a {
  color: #ffffff !important;
}

body.dark-mode .product-table .product-lists {
  background-color: #151521 !important;
  border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .productimg .productcontet h4 {
  color: #ffffff !important;
}

body.dark-mode .productimg .productcontet p {
  color: #a1a5b7 !important;
}

body.dark-mode .order-total {
  background-color: #1e1e2d !important;
  border-top: 1px solid #2b2b40 !important;
}

body.dark-mode .order-total ul li {
  border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .order-total ul li h5 {
  color: #a1a5b7 !important;
}

body.dark-mode .order-total ul li h6 {
  color: #ffffff !important;
}

body.dark-mode .order-total ul li.total-value h5 {
  color: #ffffff !important;
}

body.dark-mode .single_item_row:hover {
  background-color: #2b2b40 !important;
}

/* Order headers, footers, and bg-white cards */
body.dark-mode .bg-white {
  background-color: #1e1e2d !important;
  border-color: #2b2b40 !important;
}

body.dark-mode .card,
body.dark-mode .card.flex-fill.bg-white {
  background-color: #1e1e2d !important;
  border: 1px solid #2b2b40 !important;
}

body.dark-mode .card-header,
body.dark-mode .card-header.order_details,
body.dark-mode .card-footer {
  border-color: #2b2b40 !important;
  background-color: #151521 !important;
  color: #a1a5b7 !important;
}

/* Force override highly-specific inline styles generated inside the Drawer */
body.dark-mode .rs-drawer-body div[style*="background-color: #f8f9fa"],
body.dark-mode .rs-drawer-body div[style*="background: #f8f9fa"],
body.dark-mode .rs-drawer-body div[style*="background: #f8f9ff"],
body.dark-mode .rs-drawer-body div[style*="background: #ffffff"],
body.dark-mode .rs-drawer-body div[style*="background: #f0f9ff"],
body.dark-mode .rs-drawer-body div[style*="backgroundColor: #f8f9fa"] {
  background-color: #1e1e2d !important;
  border-color: #2b2b40 !important;
  color: #a1a5b7 !important;
}

body.dark-mode .rs-drawer-body h4,
body.dark-mode .rs-drawer-body h5,
body.dark-mode .rs-drawer-body h6,
body.dark-mode .rs-drawer-body .grand_total,
body.dark-mode .rs-drawer-body .item_total,
body.dark-mode .rs-drawer-body div[style*="color: #333"],
body.dark-mode .rs-drawer-body div[style*="color: rgb(51, 51, 51)"],
body.dark-mode .rs-drawer-body span[style*="color: #000"] {
  color: #ffffff !important;
}

/* POS Header Radio Buttons (PosHeader.jsx) */
body.dark-mode .header .nav.user-menu div[style*="color: rgb(55, 71, 79)"],
body.dark-mode .header .nav.user-menu span[style*="color: rgb(55, 71, 79)"],
body.dark-mode .header .nav.user-menu label {
  color: #ffffff !important;
}

/* Specific fix for the 'plus' button in Discount area and other small secondary buttons in header */
body.dark-mode .header .btn-secondary {
  background-color: #2b2b40 !important;
  border-color: #2b2b40 !important;
  color: #ffffff !important;
}

/* Support header text */
body.dark-mode .support-header h6,
body.dark-mode .support-header p {
  color: #ffffff !important;
}

/* ==========================================================
   Add Discount Modal & Specific Component Refinements
   ========================================================== */

/* Target the Add Discount modal container structure */
body.dark-mode .customModal .bg-light,
body.dark-mode .customModal div[class*="bg-light"],
body.dark-mode .customModal .d-flex.gap-2.p-1.bg-light.rounded-3.border {
  background-color: #151521 !important;
  border-color: #3f4254 !important;
}

/* Inactive Tab buttons inside Discount Modal */
body.dark-mode .customModal .text-muted,
body.dark-mode .customModal button.text-muted {
  color: #5e6278 !important;
  background-color: transparent !important;
}

body.dark-mode .customModal button.text-muted:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Active Tab button inside Discount Modal */
body.dark-mode .customModal .btn-white.text-dark,
body.dark-mode .customModal button[class*="btn-white"],
body.dark-mode .customModal button[style*="background-color: rgb(255, 255, 255)"],
body.dark-mode .customModal button[style*="background-color: #fff"] {
  background-color: #3e97ff !important;
  color: #ffffff !important;
  border-color: #3e97ff !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

/* Secondary labels in modals and drawers */
body.dark-mode .customModal .text-secondary,
body.dark-mode .rs-drawer-body .text-secondary,
body.dark-mode label[class*="text-secondary"] {
  color: #a1a5b7 !important;
}

/* Input groups and controls in modals/drawers */
body.dark-mode .customModal .input-group,
body.dark-mode .customModal .form-control,
body.dark-mode .rs-drawer-body .form-control {
  background-color: #1e1e2d !important;
  border-color: #2b2b40 !important;
  color: #ffffff !important;
}

body.dark-mode .customModal .input-group-text {
  background-color: #2b2b40 !important;
  border-color: #2b2b40 !important;
  color: #a1a5b7 !important;
}

/* Quick select buttons in Discount Modal */
body.dark-mode .customModal .btn-outline-light.text-dark.bg-white,
body.dark-mode .customModal button[class*="btn-outline-light"] {
  background-color: #2b2b40 !important;
  color: #ffffff !important;
  border-color: #3f4254 !important;
}

body.dark-mode .customModal .btn-outline-light.text-dark.bg-white:hover {
  background-color: #3e97ff !important;
  color: #ffffff !important;
  border-color: #3e97ff !important;
}

/* Search and specific text elements in OrderDetailsDrawer */
body.dark-mode .rs-drawer-body [style*="color: #6c757d"],
body.dark-mode .rs-drawer-body [style*="color: rgb(108, 117, 125)"] {
  color: #a1a5b7 !important;
}

body.dark-mode .rs-drawer-body [style*="color: #2c3e50"],
body.dark-mode .rs-drawer-body [style*="color: rgb(44, 62, 80)"] {
  color: #ffffff !important;
}

/* Specific button visibility in Order Details (e.g., Settle Bill) */
body.dark-mode .rs-drawer-body .btn-primary:disabled {
  background-color: #2b2b40 !important;
  border-color: #2b2b40 !important;
  color: #5e6278 !important;
}