html {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

@media (max-width: 767px) {
  .dark body #app main .space-y-3 > :is(.data-table-mobile-card, .rounded-lg.border.border-gray-200.bg-white.p-4) {
    border-color: rgba(231, 183, 173, 0.38) !important;
    background: #173b3c !important;
    color: #f7ead7 !important;
    box-shadow: 0 10px 24px rgba(1, 20, 21, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  .dark body #app main .space-y-3 > :is(.data-table-mobile-card, .rounded-lg.border.border-gray-200.bg-white.p-4)
    :is(.data-table-mobile-label, .text-xs.font-medium.uppercase.tracking-wider, .text-gray-600, .text-gray-500, .text-gray-400, .dark\:text-gray-400, .dark\:text-gray-500, .dark\:text-dark-400, .dark\:text-dark-500) {
    color: #c5bcb0 !important;
    text-shadow: none !important;
  }

  .dark body #app main .space-y-3 > :is(.data-table-mobile-card, .rounded-lg.border.border-gray-200.bg-white.p-4)
    :is(.data-table-mobile-value, .text-right.text-sm, .text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700, .dark\:text-white, .dark\:text-gray-100, .dark\:text-gray-300) {
    color: #f7ead7 !important;
    text-shadow: none !important;
  }

  .dark body #app main .space-y-3 > :is(.data-table-mobile-card, .rounded-lg.border.border-gray-200.bg-white.p-4)
    :is(.bg-gray-100, .dark\:bg-dark-600) {
    border-color: rgba(231, 183, 173, 0.2) !important;
    background: rgba(255, 250, 240, 0.08) !important;
    color: #ddd2c3 !important;
  }

  .dark body #app main .space-y-3 > :is(.data-table-mobile-card, .rounded-lg.border.border-gray-200.bg-white.p-4)
    :is(.data-table-mobile-actions, .border-t) {
    border-color: rgba(231, 183, 173, 0.22) !important;
  }

  .dark body #app main .space-y-3 > :is(.data-table-mobile-card, .rounded-lg.border.border-gray-200.bg-white.p-4)
    :is(.data-table-mobile-actions, .border-t) button {
    color: #ddd2c3 !important;
  }

  .dark body #app main .space-y-3 > :is(.data-table-mobile-card, .rounded-lg.border.border-gray-200.bg-white.p-4)
    :is(.data-table-mobile-actions, .border-t) button:hover {
    background: rgba(255, 250, 240, 0.09) !important;
    color: #fff4df !important;
  }

  .dark .ba-theme-shell main {
    background: rgba(8, 38, 39, 0.62) !important;
  }
}