/* Simple, clean tool results UI - Wiserdusk */

/* Body & Layout */
body {
  background: #f8fafc !important;
  min-height: 100vh;
  padding: 2rem !important;
}

/* Container */
.container {
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* Header */
.header {
  text-align: center !important;
  margin-bottom: 2rem !important;
  padding: 1rem !important;
}

.header h1 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 0.25rem !important;
}

.header p {
  color: #64748b !important;
  font-size: 1rem !important;
}

/* Cards - Simple white */
.card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  padding: 1.5rem !important;
}

/* Buttons */
.btn {
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: none !important;
  background: #2563eb !important;
  color: white !important;
  font-size: 0.9375rem !important;
}

.btn:hover:not(:disabled) {
  background: #1d4ed8 !important;
}

.btn:disabled {
  background: #94a3b8 !important;
  cursor: not-allowed !important;
}

/* Alerts */
.alert {
  padding: 1rem 1.25rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  gap: 0.75rem !important;
  align-items: flex-start !important;
  border: 1px solid !important;
}

.alert-error {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}

.alert-info {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e40af !important;
}

.alert-success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

/* Spinner */
.spinner {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid #e2e8f0 !important;
  border-top-color: #2563eb !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
  flex-shrink: 0 !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Links */
.link {
  color: #2563eb !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

.link:hover {
  color: #1d4ed8 !important;
}

/* Score circle (HealthScore) */
.score-circle {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin: 0 auto 1rem !important;
  border: 3px solid currentColor !important;
}

/* Grade label */
.grade-label {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-align: center !important;
  margin-bottom: 0.5rem !important;
}

/* Hero badge */
.hero-badge {
  display: inline-block !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* Typography */
.card p, .card strong {
  color: #334155 !important;
}

.card h4 {
  color: #1e293b !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Section titles */
.card .section-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

/* Value styling */
.card .value, .insight-value, .result-value {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Insight rows */
.insight-row, .result-row, .factor-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.insight-row:last-child, .result-row:last-child, .factor-row:last-child {
  border-bottom: none !important;
}

.insight-row strong, .result-row strong, .factor-row strong {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Summary box */
.summary-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
  border-left: 4px solid #2563eb !important;
}

.summary-box p {
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-size: 0.9375rem !important;
}

/* Badges - Simple, readable */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.badge-good, .badge-Good, .badge-low, .badge-Low {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.badge-Stable, .badge-stable, .badge-Moderate, .badge-moderate {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

.badge-caution, .badge-Caution, .badge-medium, .badge-Medium {
  background: #fef9c3 !important;
  color: #854d0e !important;
}

.badge-risk, .badge-Risk, .badge-high, .badge-High, .badge-Volatile, .badge-volatile {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.badge-info, .badge-neutral {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

/* Tables */
.card table, .results-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.9375rem !important;
}

.card table th, .results-table th {
  background: #f8fafc !important;
  color: #475569 !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

.card table td, .results-table td {
  padding: 0.75rem 1rem !important;
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.card table tr:hover td, .results-table tr:hover td {
  background: #f8fafc !important;
}

/* Pattern highlight */
.pattern-highlight {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
  color: #334155 !important;
}

/* Lists */
.card ul, .patterns-list {
  color: #334155 !important;
  padding-left: 1.25rem !important;
}

.card ul li, .patterns-list li {
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  line-height: 1.5 !important;
}

.patterns-list {
  list-style: disc !important;
}

.patterns-list li::before {
  display: none !important;
}

/* Stat cards (RatioLens) */
.stat-card {
  padding: 1.25rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
}

.stat-card h3 {
  color: #64748b !important;
  font-size: 0.875rem !important;
}

.stat-card .value {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

/* Tabs */
.tabs {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.tab {
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.tab:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.tab.active {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed #cbd5e1 !important;
  border-radius: 0.5rem !important;
  padding: 2rem !important;
  text-align: center !important;
  cursor: pointer !important;
  background: #f8fafc !important;
}

.upload-zone:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

/* Info box */
.info-box {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
}

.info-box h4 {
  color: #1e40af !important;
  border: none !important;
}

.info-box p {
  color: #1e40af !important;
}

/* Select */
select {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  border-radius: 0.375rem !important;
}

select:focus {
  outline: none !important;
  border-color: #2563eb !important;
}

/* Text gray */
.text-gray {
  color: #64748b !important;
}

/* File badge */
.file-badge {
  background: #dcfce7 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

/* Label */
.label {
  color: #64748b !important;
}

/* Code */
.card code {
  background: #f1f5f9 !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.875em !important;
  color: #1e293b !important;
}

/* Chat & Consultation - light theme */
.wd-consultation-section {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid #e2e8f0 !important;
}

.wd-consult-title {
  color: #1e293b !important;
  margin-bottom: 0.75rem !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

.wd-consult-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
}

.wd-consult-desc {
  color: #64748b !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.5 !important;
}

.wd-consult-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.wd-consult-row:last-child {
  margin-bottom: 0 !important;
}

.wd-consult-label {
  font-weight: 600 !important;
  color: #475569 !important;
  min-width: 4rem !important;
}

.wd-consult-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.5rem 0.875rem !important;
  background: #2563eb !important;
  color: white !important;
  border-radius: 0.375rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
}

.wd-consult-btn:hover {
  background: #1d4ed8 !important;
}

.wd-consult-btn-offline {
  background: #059669 !important;
}

.wd-consult-btn-offline:hover {
  background: #047857 !important;
}