/* ==========================================================================
   Mobile-Friendly Responsive Styles for Estoque & Vendas Inteligente / ZoomNearby
   - 100% Fluid & Adaptive Layout
   - ZERO Horizontal Overflow / X-Scroll
   - Horizontally Scrollable Settings & Subnavigation Tabs
   - Viewport-Contained Responsive Notification & Profile Popovers
   - Fixed Bottom Navigation Bar with Dedicated "More" Sheet
   - Safe Area Bottom Padding & Touch-Optimized Controls
   - Fully Responsive, Scrollable Modals & Dialogs (Edit Product, Edit Supplier, etc.)
   - Responsive & Expandable POS Product Search (Independent from Global Search)
   - Dark Mode Form Controls & Select/Dropdown Contrast Visibility
   ========================================================================== */

/* 1. Global Viewport & Reset */
:root {
  --mobile-bottom-nav-height: 64px;
  --mobile-header-height: 56px;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent background scroll when modal is open */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}

#root {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
}

/* .aurora-field is a nested content wrapper, not a viewport-level root — it
   must fill its actual parent (which may have its own padding), not the raw
   viewport. `width: 100vw` here ignored that parent padding and pushed the
   whole page's content past the right edge of the screen on every mobile
   page that uses it (Settings and others), which is exactly the "content
   extends outside the viewport" bug: 100vw is always the full device width
   regardless of where this element sits in the layout, so a padded ancestor
   left this element wider than the space actually available to it. */
.aurora-field {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   2. DESKTOP SCREENS (> 1024px)
   ========================================================================== */
@media (min-width: 1025px) {
  /* Hamburger menu button MUST NEVER SHOW ON DESKTOP */
  .btn-mobile-menu {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* Bottom nav MUST NEVER SHOW ON DESKTOP */
  .mobile-bottom-nav,
  #mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-more-backdrop,
  .mobile-more-sheet,
  .mobile-drawer-overlay {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ==========================================================================
   3. SETTINGS TABS & FULL-WIDTH SCROLLABLE TAB BARS (ALL BREAKPOINTS)
   ========================================================================== */
/* Full-width scrollable tablist containers (Settings, Caixa, Estoque, Relatórios, etc.)
   NOTE: Excludes segmented toggle switches like .pos-mode-switch and flex-shrink-0 tablists */
.tablist-scrollable,
.settings-tabs-scroll,
div[role="tablist"].tablist-scrollable,
div[role="tablist"].settings-tabs-scroll,
div[role="tablist"].w-full,
div[role="tablist"].overflow-x-auto,
main > div > div > div[role="tablist"]:not(.pos-mode-switch):not([class*="flex-shrink"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
  max-width: 100% !important;
  width: 100% !important;
  padding: 4px 6px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.tablist-scrollable::-webkit-scrollbar,
.settings-tabs-scroll::-webkit-scrollbar,
div[role="tablist"].tablist-scrollable::-webkit-scrollbar,
div[role="tablist"].settings-tabs-scroll::-webkit-scrollbar,
div[role="tablist"].w-full::-webkit-scrollbar,
div[role="tablist"].overflow-x-auto::-webkit-scrollbar,
main > div > div > div[role="tablist"]:not(.pos-mode-switch):not([class*="flex-shrink"])::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Tab button items inside full-width tablists */
.tablist-scrollable > button,
.settings-tabs-scroll > button,
div[role="tablist"].tablist-scrollable > button,
div[role="tablist"].settings-tabs-scroll > button,
div[role="tablist"].w-full > button,
div[role="tablist"].overflow-x-auto > button,
main > div > div > div[role="tablist"]:not(.pos-mode-switch):not([class*="flex-shrink"]) > button {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: max-content !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  user-select: none !important;
}

/* ==========================================================================
   4. TABLETS & MOBILE SCREENS (<= 1024px) - HEADER & GLOBAL SEARCH
   ========================================================================== */
@media (max-width: 1024px) {
  /* Hide the hamburger button since bottom bar is the primary mobile navigation */
  .btn-mobile-menu {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* Completely hide desktop horizontal menu items */
  #menu-principal,
  #menu-principal nav,
  nav.flex.items-center.gap-0\.5,
  .header-nav-divider,
  header.sticky nav.flex.items-center.gap-0\.5 {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Header container fits within 100vw */
  header.sticky {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  header.sticky > div:nth-child(2) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Left pod (Logo + Title) */
  .header-left-pod {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 3px 6px !important;
  }

  /* Right pod (Action Icons + Avatar + Global Search) */
  .header-right-pod {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 3px 6px !important;
    border-radius: 9999px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   5. MOBILE PHONES (<= 768px) - ZERO X-SCROLL & HEADER OPTIMIZATION
   ========================================================================== */
@media (max-width: 768px) {
  header.sticky .glass-pod {
    padding: 2px 4px !important;
  }

  /* Compact Circular Global Search Button in Top Header on mobile */
  header.sticky button[layoutId="busca-global"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* Hide search text & shortcut tags on mobile header button to conserve space */
  header.sticky button[layoutId="busca-global"] span,
  header.sticky button[layoutId="busca-global"] kbd,
  header.sticky button[layoutId="busca-global"] div {
    display: none !important;
  }

  header.sticky button[layoutId="busca-global"] svg {
    margin: 0 !important;
    width: 15px !important;
    height: 15px !important;
  }

  /* Standardize all header action icon sizes on mobile */
  .btn-header-theme,
  .btn-header-notifications button,
  header.sticky button.w-10.h-10 {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  header.sticky button svg,
  header.sticky a svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Hide redundant header buttons on mobile to conserve space */
  .btn-header-birthday,
  .btn-header-settings {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* User Avatar button on mobile */
  .btn-header-avatar div[class*="rounded-full"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    font-size: 12px !important;
  }

  /* Main body container safe margins & bottom padding on mobile */
  main,
  #root > div > div > main,
  .space-y-5 {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 24px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Floating AI Assistant Button position above bottom nav */
  .fab-ai {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 12px !important;
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
    z-index: 8900 !important;
  }
}

/* ==========================================================================
   6. RESPONSIVE NOTIFICATION POPOVER & HEADER DROPDOWNS
   ========================================================================== */
@media (max-width: 768px) {
  /* Notification popover modal on mobile */
  header div.relative > div.absolute.right-0.w-80,
  header div.relative > div[class*="w-80"][class*="rounded-2xl"],
  header .glass-pod div.relative > div.absolute {
    position: fixed !important;
    top: calc(var(--mobile-header-height, 56px) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    max-height: calc(80vh - var(--mobile-bottom-nav-height, 64px)) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
  }

  /* Dark Theme Notification popover */
  :root[data-theme="dark"] header div.relative > div.absolute.right-0.w-80,
  :root[data-theme="dark"] header div.relative > div[class*="w-80"],
  body.theme-escuro header div.relative > div.absolute.right-0.w-80,
  body.theme-escuro header div.relative > div[class*="w-80"] {
    background: #18202f !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  /* Light Theme Notification popover */
  :root[data-theme="light"] header div.relative > div.absolute.right-0.w-80,
  :root[data-theme="light"] header div.relative > div[class*="w-80"],
  :root:not([data-theme="dark"]) header div.relative > div.absolute.right-0.w-80,
  :root:not([data-theme="dark"]) header div.relative > div[class*="w-80"],
  body.theme-claro header div.relative > div.absolute.right-0.w-80,
  body.theme-claro header div.relative > div[class*="w-80"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  /* User profile dropdown on mobile */
  header div.relative > div.absolute.right-0.w-64,
  header div.relative > div.absolute.right-0.w-72,
  header div.relative.flex-none > div.absolute {
    position: fixed !important;
    top: calc(var(--mobile-header-height, 56px) + 8px) !important;
    left: auto !important;
    right: 10px !important;
    width: min(290px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 1.25rem !important;
    z-index: 99999 !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  }
}

/* ==========================================================================
   7. FIXED MOBILE BOTTOM NAVIGATION BAR
   ========================================================================== */
.mobile-bottom-nav,
#mobile-bottom-nav {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-bottom-nav,
  #mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(17, 24, 39, 0.94) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 9000 !important;
    justify-content: space-around !important;
    align-items: center !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }

  :root[data-theme="light"] .mobile-bottom-nav,
  :root[data-theme="light"] #mobile-bottom-nav,
  body.theme-claro .mobile-bottom-nav,
  body.theme-claro #mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
  }

  .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    gap: 3px !important;
    position: relative !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  :root[data-theme="light"] .mobile-nav-item,
  body.theme-claro .mobile-nav-item {
    color: rgba(15, 23, 42, 0.6) !important;
  }

  .mobile-nav-item.active {
    color: var(--color-primary, #3b82f6) !important;
  }

  .mobile-nav-item.active svg {
    color: var(--color-primary, #3b82f6) !important;
    transform: translateY(-2px) scale(1.12) !important;
  }

  .mobile-nav-item svg {
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-nav-item .active-dot {
    position: absolute !important;
    bottom: 6px !important;
    width: 4.5px !important;
    height: 4.5px !important;
    border-radius: 9999px !important;
    background: var(--color-primary, #3b82f6) !important;
    box-shadow: 0 0 8px var(--color-primary, #3b82f6) !important;
  }
}

/* ==========================================================================
   8. "MORE" BOTTOM SHEET MENU (REPLACES LEFT DRAWER)
   ========================================================================== */
.mobile-more-backdrop {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 99990 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-more-backdrop.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-more-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 86vh !important;
  background: #111827 !important;
  color: #ffffff !important;
  border-top-left-radius: 1.75rem !important;
  border-top-right-radius: 1.75rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -10px 45px rgba(0, 0, 0, 0.6) !important;
  z-index: 99995 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(100%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  box-sizing: border-box !important;
}

:root[data-theme="light"] .mobile-more-sheet,
body.theme-claro .mobile-more-sheet {
  background: #ffffff !important;
  color: #0f172a !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
}

.mobile-more-backdrop.open .mobile-more-sheet {
  transform: translateY(0) !important;
}

/* Drag Indicator Handle */
.mobile-more-handle {
  width: 44px !important;
  height: 4.5px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  margin: 10px auto 4px auto !important;
  flex-shrink: 0 !important;
}

:root[data-theme="light"] .mobile-more-handle,
body.theme-claro .mobile-more-handle {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Sheet Header */
.mobile-more-header {
  padding: 0.75rem 1.25rem 0.6rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

:root[data-theme="light"] .mobile-more-header,
body.theme-claro .mobile-more-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Sheet Body Scroll Area */
.mobile-more-body {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0.85rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.mobile-more-section-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-bottom: 0.4rem !important;
  padding-left: 0.25rem !important;
}

:root[data-theme="light"] .mobile-more-section-title,
body.theme-claro .mobile-more-section-title {
  color: rgba(0, 0, 0, 0.5) !important;
}

.mobile-more-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}

@media (max-width: 360px) {
  .mobile-more-grid {
    grid-template-columns: 1fr !important;
  }
}

.mobile-more-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 0.85rem !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

:root[data-theme="light"] .mobile-more-card,
body.theme-claro .mobile-more-card {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  color: rgba(15, 23, 42, 0.85) !important;
}

.mobile-more-card:active,
.mobile-more-card.active {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: var(--color-primary, #3b82f6) !important;
  color: var(--color-primary, #3b82f6) !important;
  transform: scale(0.98) !important;
}

.mobile-more-card-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 0.75rem !important;
  background: rgba(59, 130, 246, 0.12) !important;
  color: var(--color-primary, #3b82f6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mobile-more-card.active .mobile-more-card-icon {
  background: var(--color-primary, #3b82f6) !important;
  color: #ffffff !important;
}

.mobile-more-card svg {
  width: 17px !important;
  height: 17px !important;
}

/* ==========================================================================
   9. FULLY RESPONSIVE MODALS & EDIT FORMS (EDIT PRODUCT, SUPPLIER, ETC.)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Elevate all modal overlay containers above background elements */
  div.fixed.inset-0.z-50,
  div.fixed.inset-0.z-40,
  div.fixed.inset-0.z-\[60\],
  div.fixed.inset-0.z-\[70\],
  div.fixed.inset-0.z-\[80\],
  div.fixed.inset-0.z-\[90\],
  div.fixed.inset-0.z-\[91\],
  div.fixed.inset-0.z-\[95\],
  div.fixed.inset-0.z-\[9999\],
  div.fixed.inset-0.bg-black\/50,
  div.fixed.inset-0.bg-black\/40,
  div.fixed.inset-0.backdrop-blur-sm,
  div.fixed.inset-0[class*="backdrop-blur"],
  div[role="dialog"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99998 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    /* Bottom padding guarantees modal card sits fully above bottom navigation */
    padding-bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Inner Modal Card Container */
  div.fixed.inset-0 > div.bg-\[var\(--color-background-app\)\],
  div.fixed.inset-0 > div.card-aurora,
  div.fixed.inset-0 > div[class*="max-w-"],
  div.fixed.inset-0 > div.flex.flex-col,
  div.fixed.inset-0 > div.max-h-\[94vh\],
  div.fixed.inset-0 > div.max-h-\[92vh\],
  div.fixed.inset-0 > div.max-h-\[90vh\],
  div.fixed.inset-0 > div.max-h-\[88vh\],
  div[role="dialog"] > div {
    width: 100% !important;
    max-width: min(680px, calc(100vw - 16px)) !important;
    /* Maximum height strictly contained within available viewport above bottom navigation */
    max-height: calc(100vh - var(--mobile-bottom-nav-height, 64px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    max-height: calc(100dvh - var(--mobile-bottom-nav-height, 64px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 1.35rem !important;
    overflow: hidden !important;
    margin: auto !important;
    box-shadow: 0 25px 65px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
  }

  /* Modal Header */
  div.fixed.inset-0 > div > div.bg-grad-primary,
  div.fixed.inset-0 > div > div[class*="bg-grad-primary"],
  div.fixed.inset-0 > div > div:first-child[class*="overflow-hidden"],
  div.fixed.inset-0 > div > div.relative.px-6.pt-5,
  div.fixed.inset-0 > div > div.relative.px-8.pt-6 {
    padding: 12px 14px !important;
    flex-shrink: 0 !important;
  }

  div.fixed.inset-0 > div > div.bg-grad-primary h2,
  div.fixed.inset-0 > div > div[class*="bg-grad-primary"] h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  div.fixed.inset-0 > div > div.bg-grad-primary button,
  div.fixed.inset-0 > div > div[class*="bg-grad-primary"] button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Modal Scrollable Body */
  div.fixed.inset-0 > div > div.flex-1.overflow-y-auto,
  div.fixed.inset-0 > div > div[class*="overflow-y-auto"],
  div.fixed.inset-0 > div > form[class*="overflow-y-auto"] {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 14px 20px 14px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  /* Modal Footer Actions (Cancel / Save changes) */
  div.fixed.inset-0 > div > div.border-t,
  div.fixed.inset-0 > div > div[class*="border-t"]:last-child,
  div.fixed.inset-0 > div > div:last-child[class*="px-"] {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: inherit !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  div.fixed.inset-0 > div > div.border-t button,
  div.fixed.inset-0 > div > div[class*="border-t"]:last-child button,
  div.fixed.inset-0 > div > div:last-child[class*="px-"] button {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 0 16px !important;
    border-radius: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  /* Form Fields Stacking inside Modals on Mobile */
  div.fixed.inset-0 > div div.grid {
    gap: 0.65rem !important;
  }
}

@media (max-width: 640px) {
  div.fixed.inset-0 > div div.grid.grid-cols-2,
  div.fixed.inset-0 > div div.grid.grid-cols-3,
  div.fixed.inset-0 > div div.grid.sm\:grid-cols-3,
  div.fixed.inset-0 > div div.grid.sm\:grid-cols-2,
  div.fixed.inset-0 > div div.grid.sm\:grid-cols-7,
  div.fixed.inset-0 > div div.grid.lg\:grid-cols-3,
  div.fixed.inset-0 > div div.grid.lg\:grid-cols-4,
  div.fixed.inset-0 > div div.grid.lg\:grid-cols-5 {
    grid-template-columns: 1fr !important;
  }

  div.fixed.inset-0 > div div.grid.sm\:grid-cols-7 > div.sm\:col-span-3,
  div.fixed.inset-0 > div div.grid.sm\:grid-cols-7 > div.sm\:col-span-2 {
    grid-column: span 1 / span 1 !important;
  }

  div.fixed.inset-0 > div div.flex.flex-col.md\:flex-row {
    flex-direction: column !important;
  }

  div.fixed.inset-0 > div div.w-full.md\:w-56 {
    width: 100% !important;
    max-width: 160px !important;
    margin: 0 auto !important;
  }
}

/* ==========================================================================
   10. POS (PDV) FLUID LAYOUT & PRODUCT SEARCH (DESKTOP, TABLET & MOBILE)
   ========================================================================== */

/* POS Search and Mode Switch Row (All screen sizes) */
.pos-search-row,
main div.flex.gap-2:has(input),
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* POS Product Search Input Container (All screen sizes) */
.pos-search-wrapper,
.pos-search-row > div.relative.flex-1,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  z-index: 5 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* POS Search Input (Light Theme / Default) */
.pos-search-input,
.pos-search-wrapper input,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input {
  width: 100% !important;
  height: 48px !important;
  padding-left: 46px !important;
  padding-right: 50px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  border-radius: 1rem !important;
  background: #ffffff !important;
  border: 1px solid var(--color-border-soft, rgba(15, 23, 42, 0.12)) !important;
  color: var(--color-text-main, #0f172a) !important;
  outline: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s !important;
}

.pos-search-input::placeholder,
.pos-search-wrapper input::placeholder,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Focus State for POS Search Input (Light Theme) */
.pos-search-input:focus,
.pos-search-wrapper input:focus,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input:focus {
  background: #ffffff !important;
  border-color: var(--color-primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 1px 3px 0 rgba(15, 23, 42, 0.08) !important;
  color: var(--color-text-main, #0f172a) !important;
}

/* Dark Theme for POS Search Input */
:root[data-theme="dark"] .pos-search-input,
:root[data-theme="dark"] .pos-search-wrapper input,
:root[data-theme="dark"] .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input,
body.theme-escuro .pos-search-input,
body.theme-escuro .pos-search-wrapper input,
body.theme-escuro .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="dark"] .pos-search-input::placeholder,
:root[data-theme="dark"] .pos-search-wrapper input::placeholder,
:root[data-theme="dark"] .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input::placeholder,
body.theme-escuro .pos-search-input::placeholder,
body.theme-escuro .pos-search-wrapper input::placeholder,
body.theme-escuro .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

:root[data-theme="dark"] .pos-search-input:focus,
:root[data-theme="dark"] .pos-search-wrapper input:focus,
:root[data-theme="dark"] .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input:focus,
body.theme-escuro .pos-search-input:focus,
body.theme-escuro .pos-search-wrapper input:focus,
body.theme-escuro .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--color-primary, #4f8bff) !important;
  box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.25) !important;
  color: #ffffff !important;
}

/* POS Search Icon - Clean vertical and horizontal alignment strictly inside the search input */
.pos-search-icon,
.pos-search-wrapper > svg,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 > svg {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  margin: 0 !important;
  display: block !important;
}

:root[data-theme="dark"] .pos-search-icon,
:root[data-theme="dark"] .pos-search-wrapper > svg,
:root[data-theme="dark"] .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 > svg,
body.theme-escuro .pos-search-icon,
body.theme-escuro .pos-search-wrapper > svg,
body.theme-escuro .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 > svg {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* F2 Keyboard shortcut badge inside Search Input */
.pos-search-wrapper kbd,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 kbd {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

:root[data-theme="dark"] .pos-search-wrapper kbd,
:root[data-theme="dark"] .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 kbd,
body.theme-escuro .pos-search-wrapper kbd,
body.theme-escuro .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 kbd {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Retail / Wholesale Tab Switch Container (Segmented switch beside search input) */
.pos-mode-switch,
.pos-search-row > div[role="tablist"],
.pos-search-row > div.p-1.flex-shrink-0,
.pos-search-row > div[class*="flex-shrink"],
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.p-1.flex-shrink-0,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[class*="flex-shrink-0"],
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[role="tablist"] {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  height: 48px !important;
  padding: 4px 6px !important;
  gap: 4px !important;
  border-radius: 1rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Buttons inside Retail / Wholesale Switch */
.pos-mode-switch button,
.pos-mode-switch button[role="tab"],
.pos-search-row > div[role="tablist"] button,
.pos-search-row > div[role="tablist"] button[role="tab"],
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.p-1.flex-shrink-0 button,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[class*="flex-shrink-0"] button,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[role="tablist"] button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: unset !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border-radius: 0.75rem !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Category Filter Tabs Bar (All screen sizes) */
.pos-categories-row,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2.overflow-x-auto {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 0 6px 0 !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.pos-categories-row::-webkit-scrollbar,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2.overflow-x-auto::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.pos-categories-row button,
.min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2.overflow-x-auto button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Responsive Overrides for Tablets & Mobile (<= 1024px) */
@media (max-width: 1024px) {
  .min-h-screen main div.flex.gap-4.h-\[calc\(100vh-10\.5rem\)\] {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    gap: 0.75rem !important;
  }

  .min-h-screen main div.flex-1.min-w-0.flex.flex-col.gap-3 {
    width: 100% !important;
    flex: none !important;
  }

  .min-h-screen main div.w-\[380px\].flex-shrink-0 {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin-top: 0.5rem !important;
  }

  .pos-search-row,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 {
    gap: 6px !important;
  }

  .pos-search-input,
  .pos-search-wrapper input,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 input {
    height: 42px !important;
    padding-left: 38px !important;
    padding-right: 12px !important;
    font-size: 13.5px !important;
    border-radius: 0.85rem !important;
  }

  .pos-search-icon,
  .pos-search-wrapper > svg,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 > svg {
    left: 11px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .pos-search-wrapper kbd,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.relative.flex-1 kbd {
    display: none !important;
    visibility: hidden !important;
  }

  .pos-mode-switch,
  .pos-search-row > div[role="tablist"],
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.p-1.flex-shrink-0,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[class*="flex-shrink-0"],
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[role="tablist"] {
    height: 42px !important;
    padding: 3px 4px !important;
    border-radius: 0.85rem !important;
  }

  .pos-mode-switch button,
  .pos-mode-switch button[role="tab"],
  .pos-search-row > div[role="tablist"] button,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div.p-1.flex-shrink-0 button,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[class*="flex-shrink-0"] button,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2 > div[role="tablist"] button {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }

  /* Expand search horizontally when focused on mobile */
  .pos-search-focused,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div.relative.flex-1 {
    flex: 1 1 100% !important;
  }

  .pos-search-focused input,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div.relative.flex-1 input {
    border-color: var(--color-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
  }

  /* On mobile focus, compact the switch smoothly without breaking it */
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div.p-1.flex-shrink-0,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div[class*="flex-shrink-0"],
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div[role="tablist"] {
    transform: scale(0.95) !important;
    transform-origin: right center !important;
    opacity: 0.95 !important;
  }

  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div.p-1.flex-shrink-0 button,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div[class*="flex-shrink-0"] button,
  .min-h-screen main div.flex-1.min-w-0.flex.flex-col > div.flex.gap-2:focus-within > div[role="tablist"] button {
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .min-h-screen main .grid.grid-cols-2.md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
}

/* ==========================================================================
   11. TABLES & CARDS RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  table th, table td {
    padding: 0.6rem 0.5rem !important;
    font-size: 12.5px !important;
  }

  .grid.grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-4,
  .grid.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .card-aurora,
  .card-glass,
  .rounded-2xl.p-5,
  .rounded-3xl.p-6,
  .rounded-3xl.p-8 {
    padding: 0.85rem !important;
    border-radius: 1.15rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  input, select, textarea, button {
    font-size: 15px !important;
    touch-action: manipulation !important;
  }
}

@media (max-width: 480px) {
  .grid.grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-4,
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   12. DARK MODE FORM CONTROLS & DROPDOWN / SELECT CONTRAST VISIBILITY
   ========================================================================== */
/* Global color-scheme declaration for native dropdown rendering */
:root[data-theme="dark"],
html[data-theme="dark"],
body.theme-escuro {
  color-scheme: dark !important;
}

:root[data-theme="light"],
:root:not([data-theme="dark"]),
html[data-theme="light"],
body.theme-claro {
  color-scheme: light !important;
}

/* All Select dropdowns in Dark Mode */
:root[data-theme="dark"] select,
html[data-theme="dark"] select,
body.theme-escuro select {
  color-scheme: dark !important;
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Override utility background classes on select elements in dark mode */
:root[data-theme="dark"] select.bg-black\/5,
html[data-theme="dark"] select.bg-black\/5,
body.theme-escuro select.bg-black\/5,
:root[data-theme="dark"] select.bg-white,
html[data-theme="dark"] select.bg-white,
body.theme-escuro select.bg-white,
:root[data-theme="dark"] select.bg-slate-100,
html[data-theme="dark"] select.bg-slate-100,
body.theme-escuro select.bg-slate-100 {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Options and Optgroups in Dark Mode (Native browser popups) */
:root[data-theme="dark"] select option,
html[data-theme="dark"] select option,
body.theme-escuro select option,
:root[data-theme="dark"] option,
html[data-theme="dark"] option,
body.theme-escuro option,
:root[data-theme="dark"] optgroup,
html[data-theme="dark"] optgroup,
body.theme-escuro optgroup {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  padding: 8px 12px !important;
}

/* Selected, Checked, and Hover states in Dark Mode */
:root[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:checked,
body.theme-escuro select option:checked,
:root[data-theme="dark"] option:checked,
html[data-theme="dark"] option:checked,
body.theme-escuro option:checked,
:root[data-theme="dark"] option:focus,
html[data-theme="dark"] option:focus,
body.theme-escuro option:focus,
:root[data-theme="dark"] option:hover,
html[data-theme="dark"] option:hover,
body.theme-escuro option:hover {
  background-color: var(--color-primary, #2563eb) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] select:focus,
html[data-theme="dark"] select:focus,
body.theme-escuro select:focus {
  border-color: var(--color-primary, #2563eb) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important;
  outline: none !important;
}

/* Light Mode Select & Option Preserved */
:root[data-theme="light"] select,
:root:not([data-theme="dark"]) select,
html[data-theme="light"],
body.theme-claro select {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

:root[data-theme="light"] select option,
:root:not([data-theme="dark"]) select option,
html[data-theme="light"] select option,
body.theme-claro select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

:root[data-theme="light"] select option:checked,
:root:not([data-theme="dark"]) select option:checked,
html[data-theme="light"] select option:checked,
body.theme-claro select option:checked {
  background-color: var(--color-primary, #2563eb) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   13. SALES / VENDAS PAGE MOBILE & TABLET RESPONSIVE
   ========================================================================== */

/* 13.1 General Sales Page & Viewport Container Protection */
@media (max-width: 1024px) {
  body.page-vendas,
  body.page-vendas #root,
  body.page-vendas main,
  .page-vendas .space-y-5,
  .sales-page-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  /* Prevent any horizontal overflow on Sales page */
  body.page-vendas,
  body.page-vendas #root,
  body.page-vendas main,
  .page-vendas .space-y-5,
  .sales-page-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Safe padding bottom to avoid overlap with bottom navigation and floating AI button */
  body.page-vendas main,
  .page-vendas main,
  main:has(.sales-page-container),
  main:has(.sales-table) {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 36px) !important;
  }

  .sales-page-container,
  .page-vendas .space-y-5,
  main > div.aurora-field > div.space-y-5 {
    gap: 1rem !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 13.2 Sales Header Title & Export Button Section */
  .sales-page-container > div.flex.flex-wrap.items-center.justify-between.gap-3:first-child,
  .page-vendas .space-y-5 > div.flex.flex-wrap.items-center.justify-between.gap-3:first-child,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.items-center.justify-between.gap-3:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-bottom: 0.25rem !important;
  }

  .sales-page-container > div:first-child h1,
  .page-vendas .space-y-5 > div:first-child h1,
  main > div.aurora-field > div.space-y-5 > div:first-child h1 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
  }

  .sales-page-container > div:first-child p,
  .page-vendas .space-y-5 > div:first-child p,
  main > div.aurora-field > div.space-y-5 > div:first-child p {
    font-size: 0.825rem !important;
    margin-top: 2px !important;
    color: #94a3b8 !important;
  }

  .sales-page-container > div:first-child button,
  .page-vendas .space-y-5 > div:first-child button,
  main > div.aurora-field > div.space-y-5 > div:first-child button {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* 13.3 Statistics Cards - 1-Column Full-Width Stacked Layout on Mobile */
  .sales-page-container > div.grid.grid-cols-2.md\:grid-cols-3,
  .page-vendas .space-y-5 > div.grid.grid-cols-2.md\:grid-cols-3,
  main > div.aurora-field > div.space-y-5 > div.grid.grid-cols-2.md\:grid-cols-3,
  .sales-page-container > div.grid:has(.spot-card),
  .page-vendas .space-y-5 > div.grid:has(.spot-card) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sales-page-container > div.grid.grid-cols-2.md\:grid-cols-3 > div,
  .page-vendas .space-y-5 > div.grid.grid-cols-2.md\:grid-cols-3 > div,
  main > div.aurora-field > div.space-y-5 > div.grid.grid-cols-2.md\:grid-cols-3 > div,
  .sales-page-container > div.grid.grid-cols-2.md\:grid-cols-3 > div.col-span-2,
  .page-vendas .space-y-5 > div.grid.grid-cols-2.md\:grid-cols-3 > div.col-span-2 {
    grid-column: span 1 / span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 12px 14px !important;
    border-radius: 1rem !important;
    box-sizing: border-box !important;
  }

  .sales-page-container .spot-card p,
  .page-vendas .space-y-5 .spot-card p {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }

  .sales-page-container .spot-card span,
  .page-vendas .space-y-5 .spot-card span {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
  }

  /* 13.4 Filters / Search Area Responsive Stack */
  .sales-page-container > div.flex.flex-wrap.gap-2,
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2,
  .sales-filter-row,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Search input (100% width on mobile) */
  .sales-page-container > div.flex.flex-wrap.gap-2 > div.relative.flex-1,
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > div.relative.flex-1,
  .sales-filter-row > div.relative.flex-1,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 > div.relative.flex-1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
  }

  .sales-page-container > div.flex.flex-wrap.gap-2 > div.relative.flex-1 input,
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > div.relative.flex-1 input,
  .sales-filter-row > div.relative.flex-1 input,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 > div.relative.flex-1 input {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 0.85rem !important;
    box-sizing: border-box !important;
  }

  /* Date filter buttons segmented pill list (In component) */
  .sales-page-container > div.flex.flex-wrap.gap-2 > div[role="tablist"],
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > div[role="tablist"],
  .sales-filter-row > div[role="tablist"],
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 > div[role="tablist"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 3px !important;
    gap: 4px !important;
    border-radius: 0.85rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .sales-page-container > div.flex.flex-wrap.gap-2 > div[role="tablist"] > button,
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > div[role="tablist"] > button,
  .sales-filter-row > div[role="tablist"] > button,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 > div[role="tablist"] > button {
    flex: 1 1 calc(20% - 4px) !important;
    min-width: 48px !important;
    max-width: 100% !important;
    height: 36px !important;
    padding: 0 4px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 0.65rem !important;
    box-sizing: border-box !important;
  }

  /* Custom Date Range inputs (when active) */
  .sales-page-container > div.flex.flex-wrap.gap-2 > div.flex.items-center.gap-2,
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > div.flex.items-center.gap-2,
  .sales-filter-row > div.flex.items-center.gap-2,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 > div.flex.items-center.gap-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 44px !important;
    border-radius: 0.85rem !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .sales-page-container > div.flex.flex-wrap.gap-2 > div.flex.items-center.gap-2 input[type="date"],
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > div.flex.items-center.gap-2 input[type="date"],
  .sales-filter-row > div.flex.items-center.gap-2 input[type="date"] {
    flex: 1 1 42% !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    text-align: center !important;
  }

  /* Status and Payment Method Dropdowns (100% width) */
  .sales-page-container > div.flex.flex-wrap.gap-2 > select,
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > select,
  .sales-filter-row > select,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 > select {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 44px !important;
    border-radius: 0.85rem !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* Day filter reset button */
  .sales-page-container > div.flex.flex-wrap.gap-2 > button,
  .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > button,
  .sales-filter-row > button,
  main > div.aurora-field > div.space-y-5 > div.flex.flex-wrap.gap-2 > button {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 40px !important;
    border-radius: 0.85rem !important;
    justify-content: center !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  /* 13.5 Sales Table -> Mobile Card Layout */
  .sales-page-container .card-aurora.rounded-2xl.overflow-hidden:has(table),
  .page-vendas .space-y-5 .card-aurora.rounded-2xl.overflow-hidden:has(table),
  main > div.aurora-field > div.space-y-5 > div.card-aurora:has(table) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sales-page-container .overflow-x-auto:has(table),
  .page-vendas .space-y-5 .overflow-x-auto:has(table),
  main > div.aurora-field > div.space-y-5 .overflow-x-auto:has(table) {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .sales-page-container table,
  .page-vendas .space-y-5 table,
  .sales-table,
  main > div.aurora-field > div.space-y-5 table {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    gap: 10px !important;
    white-space: normal !important;
  }

  .sales-page-container table thead,
  .page-vendas .space-y-5 table thead,
  .sales-table thead,
  main > div.aurora-field > div.space-y-5 table thead {
    display: none !important;
  }

  .sales-page-container table tbody,
  .page-vendas .space-y-5 table tbody,
  .sales-table tbody,
  main > div.aurora-field > div.space-y-5 table tbody {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
  }

  /* Individual Sale Mobile Card */
  .sales-page-container table tbody tr,
  .page-vendas .space-y-5 table tbody tr,
  .sales-table tbody tr,
  main > div.aurora-field > div.space-y-5 table tbody tr {
    display: grid !important;
    grid-template-columns: 28px 1fr auto !important;
    grid-template-areas:
      "chk hdr  act"
      "chk cust act"
      "chk stat net" !important;
    align-items: center !important;
    gap: 4px 8px !important;
    padding: 12px 14px !important;
    border-radius: 1.15rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
  }

  :root[data-theme="dark"] .sales-page-container table tbody tr,
  :root[data-theme="dark"] .page-vendas .space-y-5 table tbody tr,
  :root[data-theme="dark"] .sales-table tbody tr,
  :root[data-theme="dark"] main > div.aurora-field > div.space-y-5 table tbody tr,
  body.theme-escuro .sales-page-container table tbody tr,
  body.theme-escuro .page-vendas .space-y-5 table tbody tr,
  body.theme-escuro .sales-table tbody tr,
  body.theme-escuro main > div.aurora-field > div.space-y-5 table tbody tr {
    background: #182232 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }

  .sales-page-container table tbody tr:active,
  .page-vendas .space-y-5 table tbody tr:active {
    transform: scale(0.99) !important;
  }

  /* TD Cells inside card */
  .sales-page-container table tbody tr > td,
  .page-vendas .space-y-5 table tbody tr > td,
  .sales-table tbody tr > td,
  main > div.aurora-field > div.space-y-5 table tbody tr > td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* Checkbox TD (1st cell) */
  .sales-page-container table tbody tr > td:nth-child(1),
  .page-vendas .space-y-5 table tbody tr > td:nth-child(1),
  .sales-table tbody tr > td:nth-child(1),
  main > div.aurora-field > div.space-y-5 table tbody tr > td:nth-child(1) {
    grid-area: chk !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
  }

  .sales-page-container table tbody tr > td:nth-child(1) input[type="checkbox"],
  .page-vendas .space-y-5 table tbody tr > td:nth-child(1) input[type="checkbox"],
  .sales-table tbody tr > td:nth-child(1) input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
  }

  /* Sale Number & Date TD (2nd cell) */
  .sales-page-container table tbody tr > td:nth-child(2),
  .page-vendas .space-y-5 table tbody tr > td:nth-child(2),
  .sales-table tbody tr > td:nth-child(2),
  main > div.aurora-field > div.space-y-5 table tbody tr > td:nth-child(2) {
    grid-area: hdr !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .sales-page-container table tbody tr > td:nth-child(2) p.font-extrabold,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(2) p.font-extrabold,
  .sales-table tbody tr > td:nth-child(2) p.font-extrabold {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }

  .sales-page-container table tbody tr > td:nth-child(2) p.text-xs,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(2) p.text-xs,
  .sales-table tbody tr > td:nth-child(2) p.text-xs {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
  }

  /* Customer info TD (3rd cell) */
  .sales-page-container table tbody tr > td:nth-child(3),
  .page-vendas .space-y-5 table tbody tr > td:nth-child(3),
  .sales-table tbody tr > td:nth-child(3),
  main > div.aurora-field > div.space-y-5 table tbody tr > td:nth-child(3) {
    grid-area: cust !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  .sales-page-container table tbody tr > td:nth-child(3) p.font-semibold,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(3) p.font-semibold,
  .sales-table tbody tr > td:nth-child(3) p.font-semibold {
    font-size: 14px !important;
    font-weight: 700 !important;
    max-width: 100% !important;
  }

  .sales-page-container table tbody tr > td:nth-child(3) p.text-xs,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(3) p.text-xs,
  .sales-table tbody tr > td:nth-child(3) p.text-xs {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: 1px !important;
  }

  /* Payment method TD (4th cell) - hidden */
  .sales-page-container table tbody tr > td:nth-child(4),
  .page-vendas .space-y-5 table tbody tr > td:nth-child(4),
  .sales-table tbody tr > td:nth-child(4),
  main > div.aurora-field > div.space-y-5 table tbody tr > td:nth-child(4) {
    display: none !important;
  }

  /* Status badge TD (5th cell) */
  .sales-page-container table tbody tr > td:nth-child(5),
  .page-vendas .space-y-5 table tbody tr > td:nth-child(5),
  .sales-table tbody tr > td:nth-child(5),
  main > div.aurora-field > div.space-y-5 table tbody tr > td:nth-child(5) {
    grid-area: stat !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding-top: 3px !important;
  }

  .sales-page-container table tbody tr > td:nth-child(5) span,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(5) span,
  .sales-table tbody tr > td:nth-child(5) span {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
  }

  /* Net Sale TD (6th cell) */
  .sales-page-container table tbody tr > td:nth-child(6),
  .page-vendas .space-y-5 table tbody tr > td:nth-child(6),
  .sales-table tbody tr > td:nth-child(6),
  main > div.aurora-field > div.space-y-5 table tbody tr > td:nth-child(6) {
    grid-area: net !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    padding-top: 3px !important;
  }

  .sales-page-container table tbody tr > td:nth-child(6) span.font-extrabold,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(6) span.font-extrabold,
  .sales-table tbody tr > td:nth-child(6) span.font-extrabold {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }

  /* Action buttons / chevron TD (7th cell) */
  .sales-page-container table tbody tr > td:nth-child(7),
  .page-vendas .space-y-5 table tbody tr > td:nth-child(7),
  .sales-table tbody tr > td:nth-child(7),
  main > div.aurora-field > div.space-y-5 table tbody tr > td:nth-child(7) {
    grid-area: act !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .sales-page-container table tbody tr > td:nth-child(7) div,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(7) div,
  .sales-table tbody tr > td:nth-child(7) div {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .sales-page-container table tbody tr > td:nth-child(7) button,
  .page-vendas .space-y-5 table tbody tr > td:nth-child(7) button,
  .sales-table tbody tr > td:nth-child(7) button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important;
  }

  /* 13.6 Sale Details Side Drawer Responsive (`jAe`) */
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto {
    padding: 14px 16px calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 20px) 16px !important;
  }

  /* 13.7 Receipt / Document Print Modal Responsive (`ri`) */
  div.fixed.inset-0.z-50.flex.items-center.justify-center > div.relative.bg-white.rounded-2xl {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px) !important;
    border-radius: 1.25rem !important;
    box-sizing: border-box !important;
  }

  /* 13.8 Small screens (<= 360px) extra adaptations */
  @media (max-width: 360px) {
    .sales-page-container > div.flex.flex-wrap.gap-2 > div[role="tablist"] > button,
    .page-vendas .space-y-5 > div.flex.flex-wrap.gap-2 > div[role="tablist"] > button,
    .sales-filter-row > div[role="tablist"] > button {
      flex: 1 1 calc(33.333% - 4px) !important;
      font-size: 11px !important;
      height: 34px !important;
    }

    .sales-page-container table tbody tr,
    .page-vendas .space-y-5 table tbody tr,
    .sales-table tbody tr {
      padding: 10px 12px !important;
      gap: 3px 6px !important;
    }

    .sales-page-container table tbody tr > td:nth-child(2) p.font-extrabold,
    .page-vendas .space-y-5 table tbody tr > td:nth-child(2) p.font-extrabold,
    .sales-table tbody tr > td:nth-child(2) p.font-extrabold {
      font-size: 14px !important;
    }

    .sales-page-container table tbody tr > td:nth-child(6) span.font-extrabold,
    .page-vendas .space-y-5 table tbody tr > td:nth-child(6) span.font-extrabold,
    .sales-table tbody tr > td:nth-child(6) span.font-extrabold {
      font-size: 14px !important;
    }
  }
}

/* ==========================================================================
   14. CUSTOMER DETAILS MODAL, SALE DETAILS MODAL & SIDE DRAWERS (THEME & RESPONSIVE)
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 Base Theme Styles (Global - Desktop & Mobile)
   -------------------------------------------------------------------------- */

/* Light Theme Defaults (Modal Container & Outermost Cards) */
.customer-details-modal-card,
.sale-details-modal-card,
.purchase-details-modal-card,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Light Theme Header */
.customer-details-modal-card > div.border-b,
.sale-details-modal-card > div.border-b,
.purchase-details-modal-card > div.border-b,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Light Theme Titles */
.customer-details-modal-card h2,
.sale-details-modal-card h2,
.purchase-details-modal-card h2,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg h2 {
  color: #0f172a !important;
}

/* Light Theme Body */
.customer-details-modal-card > div.flex-1.overflow-y-auto,
.sale-details-modal-card > div.flex-1.overflow-y-auto,
.purchase-details-modal-card > div.flex-1.overflow-y-auto,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Light Theme KPI Cards */
.customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > div,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > div {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-\[10px\],
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-\[10px\] {
  color: #64748b !important;
}

.customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-sm,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-sm {
  color: #0f172a !important;
}

/* Light Theme List Items & Customer Cards */
.customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full,
.sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3,
.purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg button.w-full {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-sm,
.sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold,
.purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold {
  color: #0f172a !important;
}

.customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-xs,
.sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs,
.purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs {
  color: #64748b !important;
}

.customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full span.text-sm,
.sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums,
.purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums {
  color: #0f172a !important;
}

/* Light Theme Sale Customer Card */
.sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50,
.purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
.purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold {
  color: #0f172a !important;
}

.sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs,
.purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs {
  color: #64748b !important;
}

/* Light Theme Payment Method Card */
.sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-semibold,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-semibold {
  color: #0f172a !important;
}

.sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-extrabold,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-extrabold {
  color: #0f172a !important;
}

/* Light Theme Financial Summary */
.sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.flex.justify-between.text-slate-500 {
  color: #64748b !important;
}

.sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500 span.tabular-nums,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.flex.justify-between.text-slate-500 span.tabular-nums {
  color: #0f172a !important;
}

.sale-details-modal-card div.space-y-1 > div.border-t,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.border-t {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.sale-details-modal-card div.space-y-1 > div.border-t span,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.border-t span {
  color: #0f172a !important;
}

/* Light Theme Footer */
.sale-details-modal-card > div.border-t,
.purchase-details-modal-card > div.border-t,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t:last-child {
  background-color: rgba(248, 250, 252, 0.8) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.sale-details-modal-card > div.border-t button.bg-white,
div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-white {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #475569 !important;
}

/* --------------------------------------------------------------------------
   14.2 Comprehensive Dark Theme Styles (Global - Desktop & Mobile)
   -------------------------------------------------------------------------- */

/* Outermost Modal Card Container Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card,
:root[data-theme="dark"] .sale-details-modal-card,
:root[data-theme="dark"] .purchase-details-modal-card,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
:root[data-theme="dark"] div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col,
html[data-theme="dark"] .customer-details-modal-card,
html[data-theme="dark"] .sale-details-modal-card,
html[data-theme="dark"] .purchase-details-modal-card,
html[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
html[data-theme="dark"] div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col,
html.dark .customer-details-modal-card,
html.dark .sale-details-modal-card,
html.dark .purchase-details-modal-card,
html.dark div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
html.dark div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col,
body.dark .customer-details-modal-card,
body.dark .sale-details-modal-card,
body.dark .purchase-details-modal-card,
body.dark div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
body.dark div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col,
body.theme-escuro .customer-details-modal-card,
body.theme-escuro .sale-details-modal-card,
body.theme-escuro .purchase-details-modal-card,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
body.theme-escuro div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col,
html.theme-escuro .customer-details-modal-card,
html.theme-escuro .sale-details-modal-card,
html.theme-escuro .purchase-details-modal-card,
html.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
html.theme-escuro div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col,
[data-theme="dark"] .customer-details-modal-card,
[data-theme="dark"] .sale-details-modal-card,
[data-theme="dark"] .purchase-details-modal-card,
[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
[data-theme="dark"] div.fixed.inset-0 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col {
  background-color: #182232 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* Modal Headers in Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card > div.border-b,
:root[data-theme="dark"] .sale-details-modal-card > div.border-b,
:root[data-theme="dark"] .purchase-details-modal-card > div.border-b,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b,
:root[data-theme="dark"] div.fixed.inset-0 > div.relative.w-full.max-w-lg > div:first-child:not(.overflow-y-auto),
html[data-theme="dark"] .customer-details-modal-card > div.border-b,
html[data-theme="dark"] .sale-details-modal-card > div.border-b,
html[data-theme="dark"] .purchase-details-modal-card > div.border-b,
html[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b,
html.dark .customer-details-modal-card > div.border-b,
html.dark .sale-details-modal-card > div.border-b,
body.dark .customer-details-modal-card > div.border-b,
body.dark .sale-details-modal-card > div.border-b,
body.theme-escuro .customer-details-modal-card > div.border-b,
body.theme-escuro .sale-details-modal-card > div.border-b,
body.theme-escuro .purchase-details-modal-card > div.border-b,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b,
body.theme-escuro div.fixed.inset-0 > div.relative.w-full.max-w-lg > div:first-child:not(.overflow-y-auto),
html.theme-escuro .customer-details-modal-card > div.border-b,
html.theme-escuro .sale-details-modal-card > div.border-b,
[data-theme="dark"] .customer-details-modal-card > div.border-b,
[data-theme="dark"] .sale-details-modal-card > div.border-b {
  background-color: #182232 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

/* Modal Header Titles (Customer Name, Sale Number, Purchase Number) */
:root[data-theme="dark"] .customer-details-modal-card h2,
:root[data-theme="dark"] .sale-details-modal-card h2,
:root[data-theme="dark"] .purchase-details-modal-card h2,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg h2,
html[data-theme="dark"] .customer-details-modal-card h2,
html[data-theme="dark"] .sale-details-modal-card h2,
html.dark .customer-details-modal-card h2,
html.dark .sale-details-modal-card h2,
body.theme-escuro .customer-details-modal-card h2,
body.theme-escuro .sale-details-modal-card h2,
body.theme-escuro .purchase-details-modal-card h2,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg h2,
html.theme-escuro .customer-details-modal-card h2,
html.theme-escuro .sale-details-modal-card h2,
[data-theme="dark"] .customer-details-modal-card h2,
[data-theme="dark"] .sale-details-modal-card h2 {
  color: #f8fafc !important;
}

/* Modal Header Subtitle / Contact Information */
:root[data-theme="dark"] .customer-details-modal-card > div.border-b .text-slate-400,
:root[data-theme="dark"] .sale-details-modal-card > div.border-b .text-slate-400,
:root[data-theme="dark"] .purchase-details-modal-card > div.border-b .text-slate-400,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b .text-slate-400,
body.theme-escuro .customer-details-modal-card > div.border-b .text-slate-400,
body.theme-escuro .sale-details-modal-card > div.border-b .text-slate-400,
body.theme-escuro .purchase-details-modal-card > div.border-b .text-slate-400,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b .text-slate-400,
[data-theme="dark"] .customer-details-modal-card > div.border-b .text-slate-400,
[data-theme="dark"] .sale-details-modal-card > div.border-b .text-slate-400 {
  color: #94a3b8 !important;
}

/* Modal Close (X) Button in Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card > div.border-b button,
:root[data-theme="dark"] .sale-details-modal-card > div.border-b button,
:root[data-theme="dark"] .purchase-details-modal-card > div.border-b button,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b button:has(svg),
body.theme-escuro .customer-details-modal-card > div.border-b button,
body.theme-escuro .sale-details-modal-card > div.border-b button,
body.theme-escuro .purchase-details-modal-card > div.border-b button,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b button:has(svg),
[data-theme="dark"] .customer-details-modal-card > div.border-b button,
[data-theme="dark"] .sale-details-modal-card > div.border-b button {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b button:hover,
:root[data-theme="dark"] .sale-details-modal-card > div.border-b button:hover,
:root[data-theme="dark"] .purchase-details-modal-card > div.border-b button:hover,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b button:hover,
body.theme-escuro .customer-details-modal-card > div.border-b button:hover,
body.theme-escuro .sale-details-modal-card > div.border-b button:hover,
body.theme-escuro .purchase-details-modal-card > div.border-b button:hover,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b button:hover,
[data-theme="dark"] .customer-details-modal-card > div.border-b button:hover,
[data-theme="dark"] .sale-details-modal-card > div.border-b button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

/* Modal Scrollable Body in Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto,
:root[data-theme="dark"] .sale-details-modal-card > div.flex-1.overflow-y-auto,
:root[data-theme="dark"] .purchase-details-modal-card > div.flex-1.overflow-y-auto,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto,
:root[data-theme="dark"] div.fixed.inset-0 > div.relative.w-full.max-w-lg > div[class*="overflow-y-auto"],
body.theme-escuro .customer-details-modal-card > div.flex-1.overflow-y-auto,
body.theme-escuro .sale-details-modal-card > div.flex-1.overflow-y-auto,
body.theme-escuro .purchase-details-modal-card > div.flex-1.overflow-y-auto,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto,
body.theme-escuro div.fixed.inset-0 > div.relative.w-full.max-w-lg > div[class*="overflow-y-auto"],
[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto,
[data-theme="dark"] .sale-details-modal-card > div.flex-1.overflow-y-auto {
  background-color: #182232 !important;
  color: #f8fafc !important;
}

/* 14.2.1 Customer Details Modal - 3 KPI Cards Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > div,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > div,
:root[data-theme="dark"] div.fixed.inset-0 > div > div > div.grid.grid-cols-3:has(p.tabular-nums) > div,
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > div,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > div,
body.theme-escuro div.fixed.inset-0 > div > div > div.grid.grid-cols-3:has(p.tabular-nums) > div,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > div {
  background-color: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-\[10px\],
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-\[10px\],
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-\[10px\],
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-\[10px\],
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-\[10px\] {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-sm,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-sm,
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-sm,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-sm,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-sm {
  color: #f8fafc !important;
}

/* 3rd KPI Card: Open Bills (A receber) Button in Customer Modal */
:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button,
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button {
  background-color: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50,
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50:hover,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50:hover,
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50:hover,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50:hover {
  background-color: rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p,
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p {
  color: #fbbf24 !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p.text-amber-700,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p.text-amber-700,
body.theme-escuro .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p.text-amber-700,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > button.bg-amber-50 p.text-amber-700 {
  color: #fde68a !important;
}

/* 14.2.2 Customer Details Modal - Loyalty Points Card Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3,
:root[data-theme="dark"] div.fixed.inset-0 > div > div > div.mt-3.p-3.bg-amber-50,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3,
body.theme-escuro div.fixed.inset-0 > div > div > div.mt-3.p-3.bg-amber-50,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-600,
:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 svg.text-amber-600,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 p.text-amber-600,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 svg.text-amber-600,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-600,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3 svg.text-amber-600,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 p.text-amber-600,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 svg.text-amber-600,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-600 {
  color: #fbbf24 !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-800,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 p.text-amber-800,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-800,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 p.text-amber-800,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-800 {
  color: #fef08a !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 span.text-amber-700,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 span.text-amber-700,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3 span.text-amber-700,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 span.text-amber-700,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 span.text-amber-700 {
  color: #fde68a !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 input,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 input,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3 input,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 input,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 input {
  background-color: #1e293b !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #f8fafc !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 input:focus,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 input:focus,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3 input:focus,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 input:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-700\/80,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 p.text-amber-700\/80,
body.theme-escuro .customer-details-modal-card > div.border-b > div.mt-3.p-3 p.text-amber-700\/80,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 p.text-amber-700\/80 {
  color: rgba(253, 230, 138, 0.85) !important;
}

/* 14.2.3 Customer Details Modal - Tabs (Compras, Orçamentos, A receber) Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100,
body.theme-escuro .customer-details-modal-card > div.border-b > div.flex.bg-slate-100,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 {
  background-color: #141c28 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button,
body.theme-escuro .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button:hover,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button:hover,
body.theme-escuro .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button:hover,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button:hover {
  color: #f1f5f9 !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button.bg-white,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button.bg-white,
body.theme-escuro .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button.bg-white,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button.bg-white,
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button.bg-white {
  background-color: #1e293b !important;
  color: #60a5fa !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button span.bg-slate-200,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button span.bg-slate-200,
body.theme-escuro .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button span.bg-slate-200,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button span.bg-slate-200 {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button span.bg-\[var\(--color-primary-soft\)\],
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button span.bg-\[var\(--color-primary-soft\)\],
body.theme-escuro .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button span.bg-\[var\(--color-primary-soft\)\],
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button span.bg-\[var\(--color-primary-soft\)\],
[data-theme="dark"] .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button span.bg-\[var\(--color-primary-soft\)\] {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

/* 14.2.4 Customer Details Modal - Purchase History & Quote List Items Dark Theme */
:root[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full,
body.theme-escuro .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full,
[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full {
  background-color: #1a2230 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full:hover,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full:hover,
body.theme-escuro .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full:hover,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full:hover {
  background-color: #202b3c !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-sm,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full p.text-sm,
body.theme-escuro .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-sm,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full p.text-sm,
[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-sm {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-xs,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full p.text-xs,
body.theme-escuro .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-xs,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full p.text-xs,
[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-xs {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full span.text-sm,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full span.text-sm,
body.theme-escuro .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full span.text-sm,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full span.text-sm,
[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full span.text-sm {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full svg.text-slate-300,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full svg.text-slate-300,
body.theme-escuro .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full svg.text-slate-300,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full svg.text-slate-300 {
  color: #64748b !important;
}

/* 14.2.5 Sale Details Modal & Purchasing Side Drawer Dark Theme */

/* Section Titles ("ITENS", "PAGAMENTO", "DEVOLUÇÕES E TROCAS", "CLIENTE", "FORNECEDOR") */
:root[data-theme="dark"] .sale-details-modal-card p.uppercase,
:root[data-theme="dark"] .purchase-details-modal-card p.uppercase,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg p.uppercase,
body.theme-escuro .sale-details-modal-card p.uppercase,
body.theme-escuro .purchase-details-modal-card p.uppercase,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg p.uppercase,
[data-theme="dark"] .sale-details-modal-card p.uppercase {
  color: #94a3b8 !important;
}

/* Customer Card inside Sale Details Modal */
:root[data-theme="dark"] .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50,
:root[data-theme="dark"] .purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50,
body.theme-escuro .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50,
body.theme-escuro .purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50,
[data-theme="dark"] .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 {
  background-color: #1a2230 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 div.w-11.h-11.bg-white,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 div.w-11.h-11.bg-white,
body.theme-escuro .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 div.w-11.h-11.bg-white,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 div.w-11.h-11.bg-white {
  background-color: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
:root[data-theme="dark"] .purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
body.theme-escuro .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
body.theme-escuro .purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold,
[data-theme="dark"] .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.font-bold {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs,
:root[data-theme="dark"] .purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs,
body.theme-escuro .sale-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs,
body.theme-escuro .purchase-details-modal-card div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.p-3\.5.rounded-xl.bg-slate-50 p.text-xs {
  color: #94a3b8 !important;
}

/* Items List Cards inside Sale Details / Purchases Drawer */
:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3,
:root[data-theme="dark"] .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3,
body.theme-escuro .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3,
[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 {
  background-color: #1a2230 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 div.w-10.h-10.bg-slate-100,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 div.w-10.h-10.bg-slate-100,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 div.w-10.h-10.bg-slate-100,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 div.w-10.h-10.bg-slate-100 {
  background-color: #1e293b !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold,
:root[data-theme="dark"] .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold,
body.theme-escuro .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold,
[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.font-semibold {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs,
:root[data-theme="dark"] .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs,
body.theme-escuro .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 p.text-xs {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums,
:root[data-theme="dark"] .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums,
body.theme-escuro .purchase-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums,
[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.items-center.gap-3 span.tabular-nums {
  color: #f8fafc !important;
}

/* Financial Summary Rows (Subtotal, Discount, Surcharge, Total, Net received) */
:root[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500,
:root[data-theme="dark"] .purchase-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.flex.justify-between.text-slate-500,
body.theme-escuro .sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500,
body.theme-escuro .purchase-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.flex.justify-between.text-slate-500,
[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500 {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500 span.tabular-nums,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.flex.justify-between.text-slate-500 span.tabular-nums,
body.theme-escuro .sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500 span.tabular-nums,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.flex.justify-between.text-slate-500 span.tabular-nums,
[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.flex.justify-between.text-slate-500 span.tabular-nums {
  color: #f1f5f9 !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.border-t,
:root[data-theme="dark"] .purchase-details-modal-card div.space-y-1 > div.border-t,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.border-t,
body.theme-escuro .sale-details-modal-card div.space-y-1 > div.border-t,
body.theme-escuro .purchase-details-modal-card div.space-y-1 > div.border-t,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.border-t,
[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.border-t {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.border-t span,
:root[data-theme="dark"] .purchase-details-modal-card div.space-y-1 > div.border-t span,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.border-t span,
body.theme-escuro .sale-details-modal-card div.space-y-1 > div.border-t span,
body.theme-escuro .purchase-details-modal-card div.space-y-1 > div.border-t span,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 > div.border-t span,
[data-theme="dark"] .sale-details-modal-card div.space-y-1 > div.border-t span {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1 div.text-purple-600,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 div.text-purple-600,
body.theme-escuro .sale-details-modal-card div.space-y-1 div.text-purple-600,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 div.text-purple-600 {
  color: #c084fc !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1 div.text-red-500,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 div.text-red-500,
body.theme-escuro .sale-details-modal-card div.space-y-1 div.text-red-500,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 div.text-red-500 {
  color: #f87171 !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1 p.text-emerald-600,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 p.text-emerald-600,
body.theme-escuro .sale-details-modal-card div.space-y-1 p.text-emerald-600,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1 p.text-emerald-600 {
  color: #34d399 !important;
}

/* Payment Methods Cards inside Sale Details Modal */
:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50,
[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 {
  background-color: #1a2230 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-semibold,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-semibold,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-semibold,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-semibold {
  color: #f1f5f9 !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-extrabold,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-extrabold,
body.theme-escuro .sale-details-modal-card div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-extrabold,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.space-y-1\.5 > div.flex.justify-between.bg-slate-50 span.font-extrabold {
  color: #f8fafc !important;
}

/* Returns and Exchanges Cards */
:root[data-theme="dark"] .sale-details-modal-card div.rounded-xl.bg-purple-50,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-purple-50,
body.theme-escuro .sale-details-modal-card div.rounded-xl.bg-purple-50,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-purple-50 {
  background-color: rgba(147, 51, 234, 0.12) !important;
  border: 1px solid rgba(147, 51, 234, 0.25) !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.rounded-xl.bg-purple-50 span.text-purple-700,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-purple-50 span.text-purple-700,
body.theme-escuro .sale-details-modal-card div.rounded-xl.bg-purple-50 span.text-purple-700,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-purple-50 span.text-purple-700 {
  color: #d8b4fe !important;
}

:root[data-theme="dark"] .sale-details-modal-card div.rounded-xl.bg-purple-50 div.border-t,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-purple-50 div.border-t,
body.theme-escuro .sale-details-modal-card div.rounded-xl.bg-purple-50 div.border-t,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-purple-50 div.border-t {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(147, 51, 234, 0.2) !important;
}

/* Observations Box */
:root[data-theme="dark"] .sale-details-modal-card div.rounded-xl.bg-amber-50\/60,
:root[data-theme="dark"] .purchase-details-modal-card div.rounded-xl.bg-amber-50\/60,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-amber-50\/60,
body.theme-escuro .sale-details-modal-card div.rounded-xl.bg-amber-50\/60,
body.theme-escuro .purchase-details-modal-card div.rounded-xl.bg-amber-50\/60,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg div.rounded-xl.bg-amber-50\/60 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  color: #fde68a !important;
}

/* Modal Bottom Action Footers Dark Theme */
:root[data-theme="dark"] .sale-details-modal-card > div.border-t,
:root[data-theme="dark"] .purchase-details-modal-card > div.border-t,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t:last-child,
body.theme-escuro .sale-details-modal-card > div.border-t,
body.theme-escuro .purchase-details-modal-card > div.border-t,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t:last-child,
[data-theme="dark"] .sale-details-modal-card > div.border-t {
  background-color: #141c28 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .sale-details-modal-card > div.border-t button.bg-white,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-white,
body.theme-escuro .sale-details-modal-card > div.border-t button.bg-white,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-white,
[data-theme="dark"] .sale-details-modal-card > div.border-t button.bg-white {
  background-color: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

:root[data-theme="dark"] .sale-details-modal-card > div.border-t button.bg-white:hover,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-white:hover,
body.theme-escuro .sale-details-modal-card > div.border-t button.bg-white:hover,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-white:hover {
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

:root[data-theme="dark"] .sale-details-modal-card > div.border-t button.cursor-not-allowed,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.cursor-not-allowed,
body.theme-escuro .sale-details-modal-card > div.border-t button.cursor-not-allowed,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.cursor-not-allowed {
  background-color: #151d28 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #475569 !important;
}

:root[data-theme="dark"] .sale-details-modal-card > div.border-t button.bg-purple-50,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-purple-50,
body.theme-escuro .sale-details-modal-card > div.border-t button.bg-purple-50,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-purple-50 {
  background-color: rgba(147, 51, 234, 0.15) !important;
  border: 1px solid rgba(147, 51, 234, 0.3) !important;
  color: #c084fc !important;
}

:root[data-theme="dark"] .sale-details-modal-card > div.border-t button.bg-purple-50:hover,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-purple-50:hover,
body.theme-escuro .sale-details-modal-card > div.border-t button.bg-purple-50:hover,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-purple-50:hover {
  background-color: rgba(147, 51, 234, 0.25) !important;
}

:root[data-theme="dark"] .sale-details-modal-card > div.border-t button.bg-red-50,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-red-50,
body.theme-escuro .sale-details-modal-card > div.border-t button.bg-red-50,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-red-50 {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

:root[data-theme="dark"] .sale-details-modal-card > div.border-t button.bg-red-50:hover,
:root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-red-50:hover,
body.theme-escuro .sale-details-modal-card > div.border-t button.bg-red-50:hover,
body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-t button.bg-red-50:hover {
  background-color: rgba(239, 68, 68, 0.25) !important;
}

/* --------------------------------------------------------------------------
   14.3 Mobile View Responsive Adaptations (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Modal Overlay: Centered over viewport, above mobile navigation */
  .customer-details-modal-overlay,
  .sale-details-modal-overlay,
  .purchase-details-modal-overlay,
  div.fixed.inset-0.z-50.flex.justify-end,
  div.fixed.inset-0:has(div.relative.w-full.max-w-lg) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Backdrop: fixed/absolute inset-0 */
  div.fixed.inset-0.z-50.flex.justify-end > div.absolute.inset-0,
  .customer-details-modal-overlay > div.absolute.inset-0,
  .sale-details-modal-overlay > div.absolute.inset-0,
  .purchase-details-modal-overlay > div.absolute.inset-0 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  /* Modal Card: Centered card container with responsive height */
  .customer-details-modal-card,
  .sale-details-modal-card,
  .purchase-details-modal-card,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
  div.fixed.inset-0.z-50 > div.relative.w-full.max-w-lg.bg-white.h-full.shadow-2xl.flex.flex-col {
    width: 100% !important;
    max-width: min(520px, calc(100vw - 20px)) !important;
    height: auto !important;
    max-height: calc(100vh - var(--mobile-bottom-nav-height, 64px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    max-height: calc(100dvh - var(--mobile-bottom-nav-height, 64px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    margin: auto !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
  }

  /* Light Theme Specific Card on Mobile */
  :root:not([data-theme="dark"]) .customer-details-modal-card,
  :root:not([data-theme="dark"]) .sale-details-modal-card,
  :root:not([data-theme="dark"]) .purchase-details-modal-card,
  :root:not([data-theme="dark"]) div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
  body.theme-claro .customer-details-modal-card,
  body.theme-claro .sale-details-modal-card,
  body.theme-claro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg {
    background-color: #ffffff !important;
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
  }

  /* Dark Theme Specific Card on Mobile */
  :root[data-theme="dark"] .customer-details-modal-card,
  :root[data-theme="dark"] .sale-details-modal-card,
  :root[data-theme="dark"] .purchase-details-modal-card,
  :root[data-theme="dark"] div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg,
  body.theme-escuro .customer-details-modal-card,
  body.theme-escuro .sale-details-modal-card,
  body.theme-escuro div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg {
    background-color: #182232 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  }

  /* Modal Sticky Header */
  .customer-details-modal-card > div.border-b,
  .sale-details-modal-card > div.border-b,
  .purchase-details-modal-card > div.border-b,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b,
  div.fixed.inset-0.z-50 > div.relative.w-full.max-w-lg > div:first-child:not(.overflow-y-auto) {
    flex-shrink: 0 !important;
    padding: 14px 16px 10px 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
  }

  /* Header Top Row */
  .customer-details-modal-card > div.border-b > div.flex.items-start,
  .sale-details-modal-card > div.border-b,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.items-start {
    gap: 10px !important;
    align-items: center !important;
  }

  /* Compact Avatar on Mobile */
  .customer-details-modal-card .w-14.h-14,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg .w-14.h-14 {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 0.85rem !important;
  }

  /* Titles */
  .customer-details-modal-card h2,
  .sale-details-modal-card h2,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg h2 {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  /* Close (X) Button */
  .customer-details-modal-card > div.border-b button:has(svg),
  .sale-details-modal-card > div.border-b button:has(svg),
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b button:has(svg),
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b button.hover\:bg-slate-100 {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  /* 3 KPI Cards Row */
  .customer-details-modal-card > div.border-b > div.grid.grid-cols-3,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3,
  div.fixed.inset-0 > div > div > div.grid.grid-cols-3:has(p.tabular-nums) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 > *,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 > * {
    padding: 6px 4px !important;
    border-radius: 0.75rem !important;
    min-height: 0 !important;
  }

  .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-\[10px\],
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-\[10px\] {
    font-size: 9.5px !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2px !important;
  }

  .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-sm,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-sm {
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }

  /* Loyalty Points Banner */
  .customer-details-modal-card > div.border-b > div.mt-3.p-3,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.mt-3.p-3 {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border-radius: 0.75rem !important;
  }

  /* Tabs inside Header */
  .customer-details-modal-card > div.border-b > div.flex.bg-slate-100,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 {
    margin-top: 8px !important;
    padding: 3px !important;
    gap: 3px !important;
    border-radius: 0.75rem !important;
  }

  .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button {
    height: 32px !important;
    font-size: 11.5px !important;
    padding: 0 4px !important;
    border-radius: 0.55rem !important;
  }

  /* Scrollable Content Area */
  .customer-details-modal-card > div.flex-1.overflow-y-auto,
  .sale-details-modal-card > div.flex-1.overflow-y-auto,
  .purchase-details-modal-card > div.flex-1.overflow-y-auto,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto,
  div.fixed.inset-0.z-50 > div.relative.w-full.max-w-lg > div[class*="overflow-y-auto"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 14px 36px 14px !important;
    padding-bottom: max(36px, calc(env(safe-area-inset-bottom, 0px) + 28px)) !important;
    box-sizing: border-box !important;
  }

  /* List Items inside Scrollable Body */
  .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full {
    padding: 10px 12px !important;
    border-radius: 0.85rem !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    margin-bottom: 6px !important;
  }

  .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-sm,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full p.text-sm {
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full p.text-xs,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full p.text-xs {
    font-size: 11.5px !important;
  }

  .customer-details-modal-card > div.flex-1.overflow-y-auto button.w-full span.text-sm,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto button.w-full span.text-sm {
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }

  .customer-details-modal-card > div.flex-1.overflow-y-auto div.space-y-1\.5 > button:last-child,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.flex-1.overflow-y-auto div.space-y-1\.5 > button:last-child {
    margin-bottom: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   14.4 Small Screens (<= 360px) Extra Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .customer-details-modal-card,
  .sale-details-modal-card,
  .purchase-details-modal-card,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg {
    max-width: calc(100vw - 12px) !important;
    border-radius: 1.25rem !important;
  }

  .customer-details-modal-card > div.border-b,
  .sale-details-modal-card > div.border-b,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b {
    padding: 10px 12px 8px 12px !important;
  }

  .customer-details-modal-card > div.border-b > div.grid.grid-cols-3 p.text-sm,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.grid.grid-cols-3 p.text-sm {
    font-size: 11px !important;
  }

  .customer-details-modal-card > div.border-b > div.flex.bg-slate-100 > button,
  div.fixed.inset-0.z-50.flex.justify-end > div.relative.w-full.max-w-lg > div.border-b > div.flex.bg-slate-100 > button {
    font-size: 10.5px !important;
    padding: 0 2px !important;
  }
}

/* ==========================================================================
   Pre-login Business Registration wizard: force page scroll no matter what.
   This page is never itself a modal, but .modal-open (set above whenever
   the global modal-open watcher — see saas-suite.js's setupModalObserver —
   thinks any dialog-shaped element is open anywhere in the DOM) forces
   html/body to overflow:hidden. That watcher has no route awareness, so a
   false positive here fully blocks scrolling on a page with no way to
   dismiss anything to clear it. Placed last so it always wins ties against
   the .modal-open rule above, regardless of load order.
   ========================================================================== */
html:has(.zns-reg-sticky-footer),
body:has(.zns-reg-sticky-footer) {
  overflow: auto !important;
  height: auto !important;
  touch-action: pan-y !important;
}

/* ==========================================================================
   GENERIC MOBILE OVERFLOW HARDENING — Stat/KPI cards, search+filter rows,
   tab lists, and tables, everywhere they're used.
   ---------------------------------------------------------------------------
   The page-specific rules above (e.g. the "SALES / VENDAS PAGE" section)
   target selectors like `body.page-vendas` / `.sales-page-container` /
   `.sales-filter-row` that this app's Sales, Consignments, etc. pages never
   actually apply — those rules never match anything and were silently dead.
   Rather than add another layer of page-specific guesses, this section
   targets the actual SHARED components every page really renders: the
   `.spot-card` stat-card grid, the `.relative.flex-1` search input next to a
   `div[role="tablist"]` filter/date control (the exact pattern on Sales,
   Consignments, and anywhere else that reuses those same components), and
   plain `<table>` elements. Fixing the shared components once here fixes
   every page that uses them, instead of one selector per screenshot.
   Placed last in the file so it wins cascade ties against everything above.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Belt-and-suspenders page container safety net — matches the real
     layout shell (main > .space-y-5) rather than the nonexistent
     .sales-page-container/.page-vendas hooks used above. */
  main,
  main > .space-y-5,
  main .space-y-5 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Stat/KPI card grids: whatever column count the page picked, the grid
     itself must never exceed the space it actually has. */
  main .grid.grid-cols-2,
  main .grid.grid-cols-3,
  main .grid.grid-cols-4 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Any stat card must wrap its own text instead of forcing the grid track
     wider than the space minmax(0,1fr) already gave it. */
  .spot-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
  }
  .spot-card p,
  .spot-card span {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* A search input sitting next to a filter tab list (Sales' date filters,
     Consignments' Open/Completed toggle, and anywhere else with this same
     pairing): always stack them on mobile, regardless of which flex-wrap /
     flex-col Tailwind combination the page happened to use — :has() targets
     the actual pairing itself instead of guessing at a class list. */
  main div:has(> .relative.flex-1):has(> div[role="tablist"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  main div.relative.flex-1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  main div.relative.flex-1 input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Any tab list / segmented filter control (date range, status tabs, etc.):
     scroll horizontally INSIDE its own box instead of ever pushing the page
     wider. This is unscoped by parent depth on purpose — the page-specific
     `main > div > div > div[role="tablist"]` rule above breaks the moment a
     page adds or removes one wrapper element. */
  main div[role="tablist"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  main div[role="tablist"]::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
  main div[role="tablist"] > button {
    flex-shrink: 0 !important;
  }

  /* Tables: this app already wraps every table in a `.overflow-x-auto` div
     (its correct, intended scroll container) — reinforce that wrapper
     rather than fighting it with a second, conflicting scroll mechanism on
     the <table> itself, which would stop the wrapper from ever detecting
     the table as wider than available and prevent it from scrolling at all. */
  main .overflow-x-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  main .overflow-x-auto > table {
    min-width: max-content;
  }
}