/* Web-specific styles for dark theme Momentum app */

:root {
  /* Dark theme colors */
  --color-bg: #0F1419;
  --color-surface: #1A1F2E;
  --color-surface-alt: #262E3F;
  --color-text: #FFFFFF;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary: #6B7280;
  --color-border: #374151;
  --color-primary: #EF4444;
  --color-primary-hover: #DC2626;
}

/* Ensure the root app takes full viewport height */
html, body, #root {
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Dark scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Fixed bottom tab bar for web */
[data-rn-view-id*="tabBar"] {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  background-color: var(--color-surface) !important;
  border-top: none !important;
  border: none !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* Additional tab bar border fix */
[data-rn-view-id*="tabBar"] * {
  border-top-color: transparent !important;
  border-top-width: 0 !important;
  border-top: none !important;
  border: none !important;
}

/* Target all possible border elements in tab bar */
[data-rn-view-id*="tabBar"],
[data-rn-view-id*="tab"],
[data-rn-view-id*="TabBar"],
[class*="tabBar"],
[class*="BottomTabBar"] {
  border-top-color: transparent !important;
  border-top-width: 0 !important;
  border-top: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Override any div borders near the tab bar */
div[style*="borderTop"],
div[style*="border-top"],
div[style*="1px"] {
  border-top: none !important;
}

/* Remove header borders and lines */
[data-rn-view-id*="header"],
[data-rn-view-id*="Header"],
[role="heading"],
.css-g5y9jx [style*="border-bottom"],
div[style*="border-bottom-width"],
div[style*="borderBottom"],
div[style*="border-bottom-color: rgb"] {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
  border: none !important;
}

/* Very aggressive - remove ALL borders from any div with rgb color styles that might be borders */
*[style*="border-bottom-width: 1px"],
*[style*="border-bottom-color: rgb(55"] {
  border: none !important;
  border-bottom: none !important;
}

/* Ensure content scrolls but tab bar stays fixed */
[data-rn-view-id*="contentContainer"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: calc(100vh - 70px) !important;
  padding-bottom: 0 !important;
}

/* Dark theme for input fields */
input, textarea, select {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}