/* VFD Ocean Demo Console — Custom Styles */

/* Tab buttons */
.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #9ca3af;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}

.tab-btn:hover {
  color: #e5e7eb;
}

.tab-btn.active {
  color: #60a5fa;
  border-bottom-color: #3b82f6;
}

/* Tab panels */
.tab-panel {
  display: none;
}

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

/* Step timeline */
.step-item .step-dot {
  transition: all 0.2s;
}

.step-item.running .step-dot {
  background-color: #3b82f6;
  animation: pulse-step 1.5s infinite;
}

.step-item.done .step-dot {
  background-color: #22c55e;
}

.step-item.error .step-dot {
  background-color: #ef4444;
}

.step-item.running .step-label,
.step-item.done .step-label {
  color: #e5e7eb;
}

.step-item.error .step-label {
  color: #fca5a5;
}

@keyframes pulse-step {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Connection badge states */
.badge-ok {
  background-color: #166534;
  color: #86efac;
}

.badge-error {
  background-color: #991b1b;
  color: #fca5a5;
}

.badge-checking {
  background-color: #374151;
  color: #9ca3af;
}

/* Verify checklist */
.verify-check {
  color: #9ca3af;
}

.verify-check.passed {
  color: #86efac;
}

.verify-check.passed .check-icon::before {
  content: "\2705";
}

.verify-check.failed {
  color: #fca5a5;
}

.verify-check.failed .check-icon::before {
  content: "\274C";
}

/* Upload zone drag state */
.upload-zone-active {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.05);
}

/* Tooltip trigger */
.tooltip-trigger {
  border-bottom: 1px dotted #60a5fa;
  cursor: help;
  color: #93c5fd;
}

/* Proof sections */
.proof-section summary {
  list-style: none;
}

.proof-section summary::before {
  content: "\25B6\00a0";
  font-size: 0.625rem;
}

.proof-section[open] summary::before {
  content: "\25BC\00a0";
}

/* Log panel entries */
.log-entry {
  padding: 1px 0;
  line-height: 1.4;
}

.log-entry.log-info { color: #9ca3af; }
.log-entry.log-success { color: #86efac; }
.log-entry.log-error { color: #fca5a5; }
.log-entry.log-step { color: #93c5fd; font-weight: 600; }

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

::-webkit-scrollbar-track {
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Chart containers — fixed height so Chart.js doesn't grow unbounded */
.chart-container {
  position: relative;
  height: 220px;
  width: 100%;
}

/* Background shade for bg-gray-850 */
.bg-gray-850 {
  background-color: #1a2332;
}

.bg-gray-750 {
  background-color: #2d3748;
}