/* Custom CSS for SmartNav Application */

:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --accent-color: #8b5cf6;
  --dark-bg: #111827;
  --card-bg: #1f2937;
  --border-color: #374151;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

/* Tab Navigation */
.tab-btn {
  @apply px-4 py-3 text-sm font-medium text-gray-300 hover:text-white border-b-2 border-transparent hover:border-gray-600 transition-colors whitespace-nowrap;
}

.tab-btn.active {
  @apply text-white border-blue-500;
}

/* Tab Content */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Method Selection Buttons */
.method-btn {
  @apply px-4 py-2 rounded-lg text-white font-medium transition-all duration-200 opacity-70 hover:opacity-100;
}

.method-btn.active {
  @apply opacity-100 ring-2 ring-white ring-opacity-50;
}

/* Canvas Styling */
#pathCanvas {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: #0f172a;
}

/* Button States */
button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

button:not(:disabled):hover {
  @apply transform translate-y-[-1px];
}

/* Sensor Data Animation */
.sensor-value {
  transition: all 0.2s ease-in-out;
}

.sensor-value.updated {
  @apply text-yellow-400;
}

/* Status Indicators */
.status-connected {
  @apply bg-green-500;
}

.status-connecting {
  @apply bg-yellow-500 animate-pulse;
}

.status-disconnected {
  @apply bg-red-500;
}

/* Chart Container */
.chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}

/* Loading Animation */
.spinner {
  @apply animate-spin rounded-full border-4 border-gray-300 border-t-blue-600;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .tab-btn {
    @apply px-3 py-2 text-xs;
  }
  
  .grid-cols-2 {
    @apply grid-cols-1;
  }
  
  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0.25rem;
  }
}

/* Path Visualization Styles */
.path-point {
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.path-point.dr {
  background-color: #3b82f6;
  width: 6px;
  height: 6px;
}

.path-point.slam {
  background-color: #10b981;
  width: 6px;
  height: 6px;
}

.path-point.current {
  width: 10px;
  height: 10px;
  border: 2px solid white;
}

/* Error Indicators */
.error-high {
  @apply text-red-400;
}

.error-medium {
  @apply text-yellow-400;
}

.error-low {
  @apply text-green-400;
}

/* Animation for live updates */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.live-update {
  animation: pulse 1s ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #374151;
}

::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Data Table Styling */
.data-table {
  @apply w-full text-sm;
}

.data-table th {
  @apply bg-gray-700 px-4 py-2 text-left font-medium;
}

.data-table td {
  @apply px-4 py-2 border-t border-gray-700;
}

.data-table tbody tr:hover {
  @apply bg-gray-700;
}

/* Calibration Progress */
.calibration-progress {
  @apply w-full bg-gray-700 rounded-full h-2;
}

.calibration-progress-bar {
  @apply bg-blue-600 h-2 rounded-full transition-all duration-300;
}

/* Alert Messages */
.alert {
  @apply p-4 rounded-lg border-l-4 mb-4;
}

.alert-info {
  @apply bg-blue-900 border-blue-500 text-blue-100;
}

.alert-warning {
  @apply bg-yellow-900 border-yellow-500 text-yellow-100;
}

.alert-error {
  @apply bg-red-900 border-red-500 text-red-100;
}

.alert-success {
  @apply bg-green-900 border-green-500 text-green-100;
}