/* ====================== DARK MODE VARIABLES & THEME SYSTEM ====================== */

/* Light theme (default) */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --text: black;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #3b82f6;
  --mkt-primary-raw: 59, 130, 246;
  --table-header-bg: #f9fafb;
  --table-row-bg: #f9fafb;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --hover-bg: rgba(59, 130, 246, 0.05);
}

/* Dark theme variables applied when body has class 'mkt192-dark' */
body.mkt192-dark {
  --bg: #0b1520;
  --bg-modal: var(--wp--preset--gradient--pale-ocean);
  --surface: #16222c;
  --text: #e8f7ff;
  --text-secondary: #3d98b4;
  --muted: #6a7d89;
  --border: #1e3340;
  --border-light: rgba(255, 255, 255, 0.08);
  --primary: #00d2ff;
  --primary-neon: #00aeef;
  --primary-teal: #00e7d6;
  --mkt-primary-raw: 0, 210, 255;
  --table-header-bg: #1f2f3a;
  --table-row-bg: #162f3d;
  --section-container: #162f3d00;
  --card-shadow: 0 4px 12px rgb(0 0 0 / 0.25), 0 0 16px rgba(0, 200, 255, 0.12);
  --hover-bg: rgba(0, 207, 255, 0.1);
  --button-glow: 0 0 14px rgba(0, 200, 255, 0.45);
}

/* Apply base background with gradient using variables */
body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Add gradient background for dark mode body */
body.mkt192-dark {
  background: linear-gradient(180deg, #10212b 0%, #09131b 100%);
  background-attachment: fixed;
}

/* ====================== SURFACES & COMPONENTS ====================== */

/* Surfaces that were white should adapt in dark mode */
.bg-white,
.modal-container,
.card-report,
.mkt192-modal-container {
  background-color: var(--surface);
  color: var(--text);
}

/* Add gradient effect to surfaces in dark mode */
body.mkt192-dark .bg-white,
body.mkt192-dark .modal-container,
body.mkt192-dark .card-report,
body.mkt192-dark .mkt192-modal-container {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  box-shadow: var(--card-shadow);
}

/* Theme transition helper: applied briefly to animate many properties */
.mkt192-theme-transition * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ====================== TABLES ====================== */

/* Tables adapt to variables for consistent dark look */
#invoicesListTabs,
#bookingsListTabs {
  background-color: var(--surface);
  color: var(--text);
}

body.mkt192-dark #invoicesListTabs,
body.mkt192-dark #bookingsListTabs {
  background: #16222c;
  border: 1px solid var(--border);
}

#invoicesListTabs thead th,
#bookingsListTabs thead th {
  background-color: var(--table-header-bg);
  color: var(--text);
  border-color: var(--border);
}

body.mkt192-dark #invoicesListTabs thead th,
body.mkt192-dark #bookingsListTabs thead th,
body.mkt192-dark .inventory-list-table th {
  background: linear-gradient(90deg, #145f6f 0%, #0ac1b4 100%);
  color: var(--text);
  font-weight: 600;
  border-color: var(--border);
}

#invoicesListTabs td,
#invoicesListTabs th,
#bookingsListTabs td,
#bookingsListTabs th {
  border-color: var(--border);
  background-color: var(--table-row-bg);
  color: var(--text);
}

body.mkt192-dark #invoicesListTabs td:hover,
body.mkt192-dark #bookingsListTabs td:hover {
  background: rgba(4, 84, 102, 0.568);
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.2);
}

/* ====================== BADGES & STATUS ====================== */

/* Badges / status chips */
.status-paid {
  background-color: #10b981;
  color: #fff;
}

.status-pending {
  background-color: #f59e0b;
  color: #fff;
}

/* Dark mode badge enhancements */
body.mkt192-dark .status-paid {
  background: linear-gradient(135deg, #00e7d6, #00d2ff);
  box-shadow: 0 0 10px rgba(0, 231, 214, 0.4);
}

body.mkt192-dark .status-pending {
  background: linear-gradient(135deg, #f59e0b, #fb923c);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* ====================== ALERTS & TOASTS ====================== */

/* Alerts / toasts (if exists) */
.toast-info,
.alert-info {
  background-color: var(--primary);
  color: #fff;
}

.toast-error,
.alert-error {
  background-color: #ef4444;
  color: #fff;
}

/* ====================== BORDERS & SURFACES ====================== */

/* Subtle border use across components */
.border,
.rounded,
.modal,
.input,
select,
button {
  border-color: var(--border);
}

/* Table headers and other subtle surfaces */
#invoicesListTabs thead th,
#bookingsListTabs thead th,
.modal-header,
.mkt192-modal-header {
  background-color: var(--table-header-bg);
}

/* ====================== TEXT COLORS ====================== */

/* Text muted color */
.text-muted,
.muted,
.customer-promo,
.user-role {
  color: var(--muted);
}

/* Dark mode text enhancements */
body.mkt192-dark h1,
body.mkt192-dark h2,
body.mkt192-dark h3 {
  color: var(--text-secondary);
}

body.mkt192-dark .text-secondary {
  color: var(--text-secondary);
}

/* ====================== THEME TOGGLE BUTTON ====================== */

/* Theme toggle button and menu */
.theme-container {
  position: relative;
  display: inline-block;
}

.theme-toggle-btn {
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  transition: background-color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle-btn:hover {
  background-color: var(--hover-bg);
  border-color: var(--primary);
}

body.mkt192-dark .theme-toggle-btn:hover {
  background: rgba(0, 210, 255, 0.15);
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.3);
}

.theme-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: white;
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 8px;
  min-width: 160px;
  z-index: 100;
}

.theme-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text);
  transition: background-color 0.2s;
  gap: 8px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.theme-option:hover {
  background-color: var(--hover-bg);
}

/* Small responsive tweak */
@media (max-width: 640px) {
  .theme-toggle-btn {
    padding: 6px 10px;
    font-size: 14px;
  }

  .theme-menu {
    min-width: 140px;
  }
}

/* ====================== THEME TOGGLE ICONS (Dark Mode Fix) ====================== */

/* Ensure theme icons are visible in dark mode */
body.mkt192-dark .theme-toggle-btn i,
body.mkt192-dark .theme-option i,
body.mkt192-dark .theme-toggle-btn svg,
body.mkt192-dark .theme-option svg {
  color: var(--text) !important;
  fill: var(--text) !important;
}

body.mkt192-dark .theme-option:hover i,
body.mkt192-dark .theme-option:hover svg {
  color: var(--primary) !important;
  fill: var(--primary) !important;
  opacity: 1;
}

/* Ensure theme menu is properly styled with glass effect */
body.mkt192-dark .theme-menu {
  background: #16222c;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 200, 255, 0.15) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.mkt192-dark .theme-toggle-btn {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

body.mkt192-dark .theme-toggle-btn:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--primary) !important;
}

/* ====================== QUICK DATE FILTER (Dark Mode Fix) ====================== */

/* Fix quick date filter dropdown in dark mode - nền trắng text trắng */
body.mkt192-dark select.time-filter-select,
body.mkt192-dark .time-filter-select,
body.mkt192-dark #quickDateFilter,
body.mkt192-dark .quick-date-filter,
body.mkt192-dark select[name='quickDateFilter'],
body.mkt192-dark .filter-item select {
  background-color: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* Fix select dropdown arrow in dark mode */
body.mkt192-dark select.time-filter-select option,
body.mkt192-dark .time-filter-select option,
body.mkt192-dark #quickDateFilter option,
body.mkt192-dark select[name='quickDateFilter'] option,
body.mkt192-dark .filter-item select option {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

/* ====================== DARK MODE OVERRIDES FOR EXTERNAL COMPONENTS ====================== */

/* Consolidated dark-mode fixes for components defined in other CSS files
   (staff modal, sidebar, inventory, notifications, etc.)
   Using !important here since these rules need to override styles from other files
   necessary to override existing rules from separate CSS files.
*/

/* Staff modal components */
body.mkt192-dark .staff-modal,
body.mkt192-dark .staff-container,
body.mkt192-dark .staff-content {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--card-shadow) !important;
}

body.mkt192-dark .staff-search-input,
body.mkt192-dark .staff-selected-pills,
body.mkt192-dark .staff-selected-pill,
body.mkt192-dark .staff-selected-pill-remove,
body.mkt192-dark .staff-item,
body.mkt192-dark .staff-item-avatar,
body.mkt192-dark .staff-list,
body.mkt192-dark .staff-list .staff-item {
  background-color: rgba(0, 180, 255, 0.06) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.mkt192-dark .staff-item.selected,
body.mkt192-dark .staff-item:hover {
  background: linear-gradient(
    90deg,
    rgba(0, 210, 255, 0.2) 0%,
    rgba(0, 231, 214, 0.15) 100%
  ) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.25) !important;
}

/* Sidebar surfaces */
body.mkt192-dark .sidebar {
  background: linear-gradient(180deg, #0c1a24 0%, #09121a 100%) !important;
  color: var(--text) !important;
  border-right: 1px solid var(--border) !important;
}

body.mkt192-dark .sidebar-overlay,
body.mkt192-dark .sidebar .sidebar-header-content,
body.mkt192-dark .sidebar .sidebar-nav-content,
body.mkt192-dark .sidebar .user-profile,
body.mkt192-dark .sidebar .menu-item {
  background-color: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.mkt192-dark .sidebar .menu-item-active {
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.2) 0%, transparent 100%) !important;
  border-left: 3px solid var(--primary) !important;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.3) !important;
}

body.mkt192-dark .sidebar .menu-item:hover,
body.mkt192-dark .sidebar .user-menu-item:hover {
  background: rgba(0, 210, 255, 0.1) !important;
  box-shadow: inset 0 0 8px rgba(0, 200, 255, 0.15) !important;
}

/* Toggle Switch in Dark Mode */
body.mkt192-dark .toggle-switch {
  background: #233845 !important;
}

body.mkt192-dark .toggle-switch::before {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 200, 255, 0.1) !important;
}

body.mkt192-dark .toggle-switch:hover {
  background: #2a4552 !important;
}

/* When toggled via class */
body.mkt192-dark .toggle-switch.toggled {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  box-shadow: var(--button-glow) !important;
}

body.mkt192-dark .toggle-switch.toggled::before {
  background: linear-gradient(135deg, #e8f7ff 0%, #cdebff 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 210, 255, 0.5) !important;
}

body.mkt192-dark .toggle-switch.toggled:hover {
  background: linear-gradient(135deg, #00c6ff 0%, #00e7d6 100%) !important;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.6) !important;
}

/* When controlled by input checkbox */
body.mkt192-dark .toggle-switch-wrapper input[type='checkbox']:checked + .toggle-switch {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  box-shadow: var(--button-glow) !important;
}

body.mkt192-dark .toggle-switch-wrapper input[type='checkbox']:checked + .toggle-switch::before {
  background: linear-gradient(135deg, #e8f7ff 0%, #cdebff 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 210, 255, 0.5) !important;
}

body.mkt192-dark .toggle-switch-wrapper input[type='checkbox']:checked + .toggle-switch:hover {
  background: linear-gradient(135deg, #00c6ff 0%, #00e7d6 100%) !important;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.6) !important;
}

/* Staff status label */
body.mkt192-dark .staff-status-label {
  color: var(--text) !important;
}

body.mkt192-dark .staff-status-label.toggled {
  color: var(--primary) !important;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
}

/* Inventory modal and tables */
body.mkt192-dark .inventory-modal,
body.mkt192-dark .inventory-modal.show,
body.mkt192-dark .inventory-modal-content,
body.mkt192-dark .inventory-modal-header,
body.mkt192-dark .inventory-modal-body,
body.mkt192-dark .inventory-modal-footer {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--card-shadow) !important;
}

body.mkt192-dark .inventory-table,
body.mkt192-dark .inventory-list-table,
body.mkt192-dark .inventory-table-container {
  background: rgba(0, 180, 255, 0.06) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.mkt192-dark .inventory-list-table td:hover,
body.mkt192-dark .inventory-table-body > tr:hover {
  background: rgba(0, 210, 255, 0.12) !important;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.2) !important;
  color: var(--text) !important;
}

/* Image / QR popups */
body.mkt192-dark .image-popup-close,
body.mkt192-dark .qr-modal-content,
body.mkt192-dark .qr-modal-close {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Inputs, selects and form controls across files */
body.mkt192-dark .inventory-input,
body.mkt192-dark .inventory-select,
body.mkt192-dark .inventory-file-input,
body.mkt192-dark .staff-search-input,
body.mkt192-dark .filter-item input,
body.mkt192-dark .filter-item select,
body.mkt192-dark .search-input,
body.mkt192-dark .mkt192-pill-select-value-wrapper,
body.mkt192-dark .mkt192-pill-select-options,
body.mkt192-dark input[type='text'],
body.mkt192-dark input[type='date'],
body.mkt192-dark input[type='number'],
body.mkt192-dark textarea,
body.mkt192-dark select {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  transition: all 0.3s ease;
}

body.mkt192-dark input[type='text']:focus,
body.mkt192-dark input[type='date']:focus,
body.mkt192-dark input[type='number']:focus,
body.mkt192-dark textarea:focus,
body.mkt192-dark select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.3) !important;
  outline: none !important;
}

/* Fix option elements inside selects */
body.mkt192-dark select option {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

/* Fix report filters */
body.mkt192-dark .report-fillter select,
body.mkt192-dark #paymentMethodFilter,
body.mkt192-dark #reviewTypeFilter,
body.mkt192-dark #reviewRatingFilter {
  background-color: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* Pagination and controls */
body.mkt192-dark .pagination-btn,
body.mkt192-dark .items-per-page-select,
body.mkt192-dark .table-controls,
body.mkt192-dark .table-controls-left,
body.mkt192-dark .table-controls-right {
  background-color: transparent !important;
  color: var(--muted) !important;
}

/* Primary buttons with cyan glow */
body.mkt192-dark button.btn-primary,
body.mkt192-dark .btn-primary,
body.mkt192-dark button[type='submit'] {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  color: #0b1520 !important;
  border: none !important;
  box-shadow: var(--button-glow) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

body.mkt192-dark button.btn-primary:hover,
body.mkt192-dark .btn-primary:hover,
body.mkt192-dark button[type='submit']:hover {
  background: linear-gradient(90deg, #00d2ff 0%, #00e7d6 100%) !important;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.6) !important;
  transform: translateY(-2px);
}

body.mkt192-dark button.btn-primary:active,
body.mkt192-dark .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.4) !important;
}

/* Secondary buttons */
body.mkt192-dark button.btn-secondary,
body.mkt192-dark .btn-secondary {
  background-color: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  transition: all 0.3s ease;
}

body.mkt192-dark button.btn-secondary:hover,
body.mkt192-dark .btn-secondary:hover {
  background: rgba(0, 210, 255, 0.1) !important;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.3) !important;
}

/* Ensure modal sections adapt */
body.mkt192-dark .modal-section,
body.mkt192-dark .modal-content,
body.mkt192-dark .modal-container,
body.mkt192-dark .mkt192-modal-container {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* small adjustments for icons/close buttons contrast */
body.mkt192-dark .modal-close,
body.mkt192-dark .image-popup-close,
body.mkt192-dark .qr-modal-close,
body.mkt192-dark .mkt192-close-btn {
  background-color: transparent !important;
  color: var(--muted) !important;
}

/* ====================== HEADER & MAIN CONTENT (Glass Effect) ====================== */

/* Make header translucent with subtle blur and ensure main/content areas use
   theme variables instead of hardcoded white when body.mkt192-dark is present.
*/
body.mkt192-dark header {
  background: rgba(22, 34, 44, 0.85) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.5), transparent) 1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 24px rgba(0, 200, 255, 0.15) !important;
  color: var(--text) !important;
}

/* Header contents (buttons, texts, icons) contrast in dark mode */
body.mkt192-dark .header-container h1,
body.mkt192-dark .header-container .user-menu,
body.mkt192-dark .header-container .user-menu *,
body.mkt192-dark .header-container .mobile-sidebar-toggle,
body.mkt192-dark .header-container .user-avatar,
body.mkt192-dark .header-container .user-menu-container {
  border-color: transparent !important;
}

/* Let the overall main background show (body var) and make page panels surface-based */
body.mkt192-dark .main-content,
body.mkt192-dark .main-content-expanded,
body.mkt192-dark main {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Individual content sections/cards should use surface token */
body.mkt192-dark .content-section,
body.mkt192-dark .invoice-content,
body.mkt192-dark .card-report,
body.mkt192-dark .mkt192-modal-container {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--card-shadow) !important;
  position: relative;
}

/* Add subtle cyan glow effect to cards */
body.mkt192-dark .content-section::before,
body.mkt192-dark .card-report::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.6), transparent);
  opacity: 0.6;
}

/* Ensure header controls keep hover/focus affordances in dark */
body.mkt192-dark .header-container .user-menu a:hover,
body.mkt192-dark .header-container .user-menu button:hover,
body.mkt192-dark .theme-toggle-btn:hover {
  background: rgba(0, 210, 255, 0.15) !important;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.25) !important;
}

/* ====================== SCROLLBAR STYLING ====================== */

/* Custom scrollbar for dark mode */
body.mkt192-dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.mkt192-dark ::-webkit-scrollbar-track {
  background: #0c1a24;
  border-radius: 5px;
}

body.mkt192-dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d2ff 0%, #00aeef 100%);
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.4);
}

body.mkt192-dark ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00e7d6 0%, #00d2ff 100%);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.6);
}

/* ====================== LINKS & HOVER EFFECTS ====================== */

body.mkt192-dark a {
  transition: all 0.3s ease;
}

body.mkt192-dark a:hover {
  color: var(--primary-teal);
  text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
}

/* ====================== MODAL OVERLAY ====================== */

body.mkt192-dark .modal-overlay,
body.mkt192-dark .overlay {
  background: rgba(9, 18, 26, 0.85) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ====================== STAFF MODAL (NEW) - DARK MODE ====================== */

/* Staff Modal Overlay */
body.mkt192-dark .staff-modal-overlay {
  background: rgba(9, 18, 26, 0.9) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Staff Modal Container */
body.mkt192-dark .staff-modal-container {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 200, 255, 0.15) !important;
}

/* Staff Modal Header */
body.mkt192-dark .staff-modal-title {
  color: var(--text) !important;
}

body.mkt192-dark .staff-modal-service-name {
  color: var(--muted) !important;
}

body.mkt192-dark .staff-modal-close {
  color: var(--muted) !important;
}

body.mkt192-dark .staff-modal-close:hover {
  color: var(--primary) !important;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

/* Staff Search Input */
body.mkt192-dark .staff-search-input-field {
  background-color: rgba(0, 180, 255, 0.06) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.mkt192-dark .staff-search-input-field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.3) !important;
  background-color: rgba(0, 180, 255, 0.08) !important;
}

body.mkt192-dark .staff-search-input-field::placeholder {
  color: var(--muted) !important;
}

/* Staff Pills Container - Pills inherit from existing staff-selected-pill styles */

/* Staff List Wrapper */
body.mkt192-dark .staff-list-wrapper {
  background-color: transparent !important;
}

body.mkt192-dark .staff-list-wrapper::-webkit-scrollbar {
  width: 8px;
}

body.mkt192-dark .staff-list-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 180, 255, 0.05);
  border-radius: 4px;
}

body.mkt192-dark .staff-list-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d2ff 0%, #00aeef 100%);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 210, 255, 0.3);
}

/* Staff Confirm Button */
body.mkt192-dark .staff-confirm-btn {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  color: #0b1520 !important;
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.45) !important;
  font-weight: 600;
}

body.mkt192-dark .staff-confirm-btn:hover {
  background: linear-gradient(90deg, #00d2ff 0%, #00e7d6 100%) !important;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.6) !important;
  transform: translateY(-2px);
}

body.mkt192-dark .staff-confirm-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.4) !important;
}

/* Quantity Wrapper */
body.mkt192-dark .staff-quantity-wrapper {
  background-color: transparent !important;
}

/* Quantity Row */
body.mkt192-dark .quantity-row {
  color: var(--text) !important;
}

body.mkt192-dark .quantity-label {
  color: var(--text) !important;
}

body.mkt192-dark .quantity-input {
  background-color: rgba(0, 180, 255, 0.06) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.mkt192-dark .quantity-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.25) !important;
}

body.mkt192-dark .qty-btn {
  color: var(--primary) !important;
  background-color: transparent !important;
}

body.mkt192-dark .qty-btn:hover {
  background-color: rgba(0, 210, 255, 0.15) !important;
  color: var(--primary-teal) !important;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.2) !important;
}

/* ====================== CANCEL BOOKING MODAL - DARK MODE ====================== */

/* Cancel Booking Modal Container */
body.mkt192-dark #mkt192-cancel-booking-modal.mkt192-modal-overlay {
  background: rgba(9, 18, 26, 0.9) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-modal-container {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 200, 255, 0.15) !important;
}

/* Cancel Modal Header */
body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-modal-header {
  border-bottom: 1px solid var(--border) !important;
}

body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-modal-header h3 {
  color: var(--text) !important;
}

body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-close-btn {
  color: var(--muted) !important;
}

body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-close-btn:hover {
  color: var(--primary) !important;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

/* Cancel Modal Body */
body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-modal-body {
  background-color: transparent !important;
}

body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-info-text {
  color: var(--muted) !important;
}

body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-booking-info {
  background-color: rgba(0, 180, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-booking-info strong {
  color: var(--text) !important;
}

/* Cancel Modal Pill Select (Red Theme) */
body.mkt192-dark #cancel-reason-pill-select .mkt192-pill-select-value-wrapper {
  background-color: rgba(0, 180, 255, 0.06) !important;
  border-color: var(--border) !important;
}

body.mkt192-dark #cancel-reason-pill-select .mkt192-pill-select-value-wrapper:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.2) !important;
}

body.mkt192-dark #cancel-reason-pill-select .mkt192-pill {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}

body.mkt192-dark #cancel-reason-pill-select .mkt192-pill:hover {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6) !important;
}

body.mkt192-dark #cancel-reason-pill-select .mkt192-pill-select-options {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 200, 255, 0.1) !important;
}

body.mkt192-dark #cancel-reason-pill-select .mkt192-pill-option {
  color: var(--text-secondary) !important;
  background: var(--bg-modal) !important;
}

body.mkt192-dark #cancel-reason-pill-select .mkt192-pill-option:hover {
  background: rgba(0, 210, 255, 0.15) !important;
  color: var(--primary) !important;
}

body.mkt192-dark #cancel-reason-pill-select .mkt192-pill-option.selected {
  background: rgba(0, 210, 255, 0.2) !important;
  color: var(--primary) !important;
}

/* Cancel Modal Footer */
body.mkt192-dark #mkt192-cancel-booking-modal .mkt192-modal-footer {
  border-top: 1px solid var(--border) !important;
}

body.mkt192-dark #mkt192-save-cancel-booking {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45) !important;
  font-weight: 600;
}

body.mkt192-dark #mkt192-save-cancel-booking:hover {
  background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-2px);
}

/* ====================== TRUY THU MODAL - DARK MODE ====================== */

/* Truy Thu Modal Container */
body.mkt192-dark #mkt192-truy-thu-modal.mkt192-modal-overlay {
  background: rgba(9, 18, 26, 0.9) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.mkt192-dark #mkt192-truy-thu-modal .mkt192-modal-container {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 200, 255, 0.15) !important;
}

/* Truy Thu Modal Header */
body.mkt192-dark #mkt192-truy-thu-modal .mkt192-modal-header {
  border-bottom: 1px solid var(--border) !important;
}

body.mkt192-dark #mkt192-truy-thu-modal .mkt192-modal-header h3 {
  color: var(--text) !important;
}

body.mkt192-dark #mkt192-truy-thu-modal .mkt192-close-btn {
  color: var(--muted) !important;
}

body.mkt192-dark #mkt192-truy-thu-modal .mkt192-close-btn:hover {
  color: var(--primary) !important;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

/* Truy Thu Toggle Switch */
body.mkt192-dark #mkt192-change-staff-toggle:checked + div {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.45) !important;
}

body.mkt192-dark #mkt192-change-staff-toggle:checked + div .dot {
  background: linear-gradient(135deg, #e8f7ff 0%, #cdebff 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 210, 255, 0.5) !important;
}

/* Truy Thu Modal Body */
body.mkt192-dark #mkt192-truy-thu-modal .mkt192-modal-body {
  background-color: transparent !important;
}

body.mkt192-dark #mkt192-truy-thu-modal .mkt192-info-text {
  color: var(--muted) !important;
}

/* Truy Thu Service List */
body.mkt192-dark #mkt192-truy-thu-service-list {
  background-color: transparent !important;
}

body.mkt192-dark .mkt192-service-item-wrapper {
  background-color: rgba(0, 180, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

body.mkt192-dark .mkt192-service-item {
  background-color: transparent !important;
  color: var(--text) !important;
}

body.mkt192-dark .mkt192-service-name {
  color: var(--text) !important;
}

body.mkt192-dark .mkt192-staff-name,
body.mkt192-dark .mkt192-service-price {
  color: var(--muted) !important;
}

body.mkt192-dark .mkt192-truy-thu-checkbox {
  border-color: var(--border) !important;
  background-color: rgba(0, 180, 255, 0.06) !important;
}

body.mkt192-dark .mkt192-truy-thu-checkbox:checked {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.4) !important;
}

/* Truy Thu Staff Select */
body.mkt192-dark .mkt192-staff-select {
  background-color: rgba(0, 180, 255, 0.06) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.mkt192-dark .mkt192-staff-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.25) !important;
}

body.mkt192-dark .mkt192-staff-select option {
  background: var(--bg-modal) !important;
  color: var(--text-secondary) !important;
}

/* Truy Thu Pill Select (Blue Theme) */
body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill-select-value-wrapper {
  background-color: rgba(0, 180, 255, 0.06) !important;
  border-color: var(--border) !important;
}

body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill-select-value-wrapper:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.2) !important;
}

body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4) !important;
  color: #0b1520 !important;
  font-weight: 600;
}

body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill:hover {
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.6) !important;
}

body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill-select-options {
  background: linear-gradient(135deg, #16222c 0%, #1f2f3a 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 200, 255, 0.1) !important;
}

body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill-option {
  color: var(--text-secondary) !important;
  background: var(--bg-modal) !important;
}

body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill-option:hover {
  background: rgba(0, 210, 255, 0.15) !important;
  color: var(--primary) !important;
}

body.mkt192-dark #truy-thu-reason-pill-select .mkt192-pill-option.selected {
  background: rgba(0, 210, 255, 0.2) !important;
  color: var(--primary) !important;
}

/* Truy Thu Modal Footer */
body.mkt192-dark #mkt192-truy-thu-modal .mkt192-modal-footer {
  border-top: 1px solid var(--border) !important;
}

body.mkt192-dark #mkt192-save-truy-thu {
  background: linear-gradient(135deg, #00aeef 0%, #00d2ff 100%) !important;
  color: #0b1520 !important;
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.45) !important;
  font-weight: 600;
}

body.mkt192-dark #mkt192-save-truy-thu:hover {
  background: linear-gradient(90deg, #00d2ff 0%, #00e7d6 100%) !important;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.6) !important;
  transform: translateY(-2px);
}

/* ====================== CANCEL BOOKING BUTTON - DARK MODE ====================== */

body.mkt192-dark .cancel-booking-btn {
  color: #ef4444 !important;
  transition: all 0.3s ease;
}

body.mkt192-dark .cancel-booking-btn:hover {
  color: #dc2626 !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

body.mkt192-dark .cancel-booking-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

body.mkt192-dark .cancel-booking-btn .cancel-loading-icon {
  color: #00d2ff !important;
}

/* ====================== IMAGE POPUP MODAL (DARK MODE) ====================== */

body.mkt192-dark .image-popup-overlay {
  background: transparent;
}

body.mkt192-dark .image-popup-counter,
body.mkt192-dark .image-popup-close-btn {
  background: rgba(0, 210, 255, 0.15);
  color: #00d2ff;
}

body.mkt192-dark .image-popup-close-btn:hover {
  background: rgba(0, 210, 255, 0.25);
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
}

body.mkt192-dark .image-popup-nav-btn {
  background: rgba(0, 210, 255, 0.15);
  color: #00d2ff;
}

body.mkt192-dark .image-popup-nav-btn:hover {
  background: rgba(0, 210, 255, 0.25);
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

body.mkt192-dark .image-popup-thumbnail.active {
  border-color: #00d2ff;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
}