/* YoboRobo v2-v3 Bridge CSS */
/* Maps v2 JavaScript HTML to v3 Enhanced Design System */

/* Force enhanced font family */
body, * {
  font-family: var(--font-primary) !important;
}

/* Force enhanced background color */
body {
  background: var(--color-surface) !important;
  color: var(--color-gray-900) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure app container is visible and properly positioned */
#app-container {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* Ensure screens are visible and properly positioned */
.screen {
  display: block !important;
  position: relative !important;
  width: 100% !important;
}

/* Clean onboarding screen styling */
#onboarding-screen {
  display: block !important;
  background: var(--color-surface, #FAFAFB) !important;
  color: var(--color-gray-900, #111827) !important;
  padding: var(--space-8, 32px) !important;
  min-height: 100vh !important;
  position: relative !important;
  z-index: 1 !important;
}

#onboarding-container {
  display: block !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: var(--space-8, 32px) var(--space-6, 24px) !important;
  color: var(--color-gray-900, #111827) !important;
}

/* Force visibility of onboarding content */
.onboarding-screen {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: var(--color-surface, #FAFAFB) !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

/* Typography fixes */
.onboarding-screen h1 {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--color-gray-900, #111827) !important;
  line-height: 1.2 !important;
  margin: 16px 0 !important;
  text-align: center !important;
}

.onboarding-screen h2 {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--color-gray-900, #111827) !important;
  margin: 12px 0 !important;
}

.onboarding-screen h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-gray-900, #111827) !important;
  margin: 8px 0 !important;
}

.onboarding-screen p {
  font-size: 18px !important;
  color: var(--color-gray-600, #4B5563) !important;
  line-height: 1.6 !important;
  margin: 8px 0 !important;
  text-align: center !important;
}

/* Button styling */
.onboarding-screen .btn,
.onboarding-screen button {
  background: var(--color-primary-600, #4f46e5) !important;
  color: white !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin: 16px 0 !important;
  min-height: 56px !important;
}

.onboarding-screen .btn:hover,
.onboarding-screen button:hover {
  background: var(--color-primary-700, #4338ca) !important;
  transform: translateY(-1px) !important;
}

/* Icon styling */
.onboarding-screen i {
  color: var(--color-primary-600, #4f46e5) !important;
  font-size: 48px !important;
  margin: 16px 0 !important;
}

.onboarding-screen .btn i,
.onboarding-screen button i {
  color: white !important;
  font-size: 18px !important;
  margin: 0 !important;
}

/* Progress bar */
.onboarding-screen .progress-bar {
  width: 100% !important;
  height: 8px !important;
  background: var(--color-gray-200, #E5E7EB) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 8px 0 16px 0 !important;
}

.onboarding-screen .progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--color-primary-500, #6366f1), var(--color-primary-600, #4f46e5)) !important;
  transition: width 0.3s ease !important;
}

/* Card styling - Make benefit cards look like tips, not buttons */
.onboarding-screen .benefit-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid var(--color-primary-600, #4f46e5) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 12px 0 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

.onboarding-screen .benefit-card:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Layout utilities */
.onboarding-screen .text-center {
  text-align: center !important;
}

.onboarding-screen .stack,
.onboarding-screen .stack-xl,
.onboarding-screen .stack-lg,
.onboarding-screen .stack-sm {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.onboarding-screen .flex {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

/* Status bar removed as requested */

/* Map v2 onboarding to v3 enhanced onboarding */
.onboarding-container {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: var(--space-8) !important;
  text-align: center !important;
}

/* Enhanced greeting styles */
.greeting {
  font-size: var(--font-size-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-gray-900) !important;
  margin-bottom: var(--space-6) !important;
}

/* Enhanced button styles that match v3 system */
button, .btn {
  min-height: var(--touch-target-sm) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  transition: all var(--transition-base) !important;
  cursor: pointer !important;
  border: none !important;
  padding: var(--space-4) var(--space-6) !important;
}

button:hover, .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Primary button styling */
.btn-primary, button[class*="primary"] {
  background: var(--color-primary-600) !important;
  color: white !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-primary:hover, button[class*="primary"]:hover {
  background: var(--color-primary-700) !important;
}

/* Success button styling */
.btn-success, button[class*="success"] {
  background: var(--color-success-600) !important;
  color: white !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-success:hover, button[class*="success"]:hover {
  background: var(--color-success-700) !important;
}

/* Card styling from v2 mapped to v3 */
.card, [class*="card"] {
  background: var(--color-card) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--color-gray-100) !important;
  padding: var(--space-6) !important;
  margin-bottom: var(--space-4) !important;
  transition: all var(--transition-base) !important;
}

.card:hover, [class*="card"]:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-gray-200) !important;
  transform: translateY(-1px) !important;
}

/* Enhanced tab styling */
.nav-tabs, [class*="tab"] {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--nav-bar-height) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid var(--color-gray-100) !important;
  z-index: 100 !important;
  display: flex !important;
}

.tab-item, [class*="tab-item"] {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-1) !important;
  color: var(--color-gray-500) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  min-height: var(--touch-target-md) !important;
  position: relative !important;
}

.tab-item:hover, [class*="tab-item"]:hover {
  color: var(--color-primary-600) !important;
  background: var(--color-primary-50) !important;
}

.tab-item.active, [class*="tab-item"].active {
  color: var(--color-primary-700) !important;
  background: var(--color-primary-50) !important;
}

.tab-item.active::before, [class*="tab-item"].active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 32px !important;
  height: 3px !important;
  background: var(--color-primary-600) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
}

/* Screen styling */
.screen, [class*="screen"] {
  min-height: calc(100vh - var(--status-bar-height) - var(--nav-bar-height)) !important;
  padding: var(--space-6) !important;
  padding-top: calc(var(--status-bar-height) + var(--space-6)) !important;
  padding-bottom: calc(var(--nav-bar-height) + var(--space-6)) !important;
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  line-height: var(--line-height-tight) !important;
  color: var(--color-gray-900) !important;
}

h1 { font-size: var(--font-size-3xl) !important; }
h2 { font-size: var(--font-size-2xl) !important; }
h3 { font-size: var(--font-size-xl) !important; }
h4 { font-size: var(--font-size-lg) !important; }

p {
  font-family: var(--font-primary) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--color-gray-700) !important;
}

/* Input styling */
input, textarea, select {
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-base) !important;
  border: 2px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  background: var(--color-white) !important;
  color: var(--color-gray-900) !important;
  min-height: var(--touch-target-sm) !important;
  transition: all var(--transition-base) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary-500) !important;
  outline: 3px solid var(--color-primary-100) !important;
  outline-offset: 0 !important;
}

/* Loading screen enhancements */
#loadingScreen {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%) !important;
}

.loading-logo {
  font-size: var(--font-size-hero) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.loading-text {
  font-size: var(--font-size-lg) !important;
  font-weight: 500 !important;
}

/* Remove any conflicting styles */
* {
  box-sizing: border-box !important;
}

/* Ensure proper spacing */
.stack > * + * {
  margin-top: var(--space-4) !important;
}

.cluster > * + * {
  margin-left: var(--space-4) !important;
}