/* =========================================================
   components.css
   Inputs, buttons, helper text, chips, errors
========================================================= */

input[type="number"],
input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 16px;
  font-family: inherit;
}

input[type="number"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-color: #2563eb;
}

/* Buttons */

.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 1.15rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  background: #e5e7eb;
  color: #111827;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.1s ease;
}

.btn-primary {
  background: #3b82f6;
  color: #ffffff;
  border: 1px solid #3b82f6;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
}

.btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

.btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.btn-tertiary {
  background: transparent;
  color: #1d4ed8;
  border-color: transparent;
}

.btn-tertiary:hover {
  background: #e5edff;
  border-color: #bfdbfe;
}

/* Button layout helpers */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Status chips / summary tags */

.result-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 9999px;
  border: 1px solid #d4d4d8;
  background: #f9fafb;
  font-size: 0.85rem;
  font-weight: 500;
  color: #111827;
}

/* Helper / hint text below fields */

.field-help {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* Error text */

.field-error {
  font-size: 0.85rem;
  color: #b91c1c;
  margin-top: 0.25rem;
}

/* Focus styles */

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-tertiary:focus-visible,
input:focus-visible,
.toggle-btn:focus-visible,
.mobile-nav-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Small card tweak for mobile */

@media (max-width: 768px) {
  .card {
    padding: 1.4rem 1.5rem;
  }
}

/* Improved spacing for form fields */
.field-block label {
  display: block;
  margin-bottom: 0.4rem;
}

.field-block input {
  margin-bottom: 0.4rem;
}

.field-help {
  margin-top: 0.4rem;
  line-height: 1.5;
}

/* =========================================================
   Summary status chips and decision banner (Step 6)
========================================================= */

.summary-status {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 0.8rem;
}

.status-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #9ca3af;
}

.status-pill-label {
  font-weight: 500;
  color: #4b5563;
}

.status-pill-text {
  color: #4b5563;
}

/* Levels */

.status-pill-good {
  border-color: #bbf7d0;
  background: #ecfdf5;
}

.status-pill-good .status-pill-dot {
  background: #16a34a;
}

.status-pill-warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.status-pill-warning .status-pill-dot {
  background: #ea580c;
}

.status-pill-bad {
  border-color: #fecaca;
  background: #fef2f2;
}

.status-pill-bad .status-pill-dot {
  background: #b91c1c;
}

/* Final decision text highlight */

.final-decision-text {
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  border-left: 4px solid transparent;
  background: #f9fafb;
  margin-top: 0.5rem;
}

.final-decision-text.decision-good {
  border-left-color: #16a34a;
  background: #ecfdf5;
}

.final-decision-text.decision-warning {
  border-left-color: #ea580c;
  background: #fff7ed;
}

.final-decision-text.decision-bad {
  border-left-color: #b91c1c;
  background: #fef2f2;
}

.final-decision-text.decision-neutral {
  border-left-color: #e5e7eb;
  background: #f9fafb;
}

/* Print: keep highlight subtle but visible */
@media print {
  .status-pill {
    box-shadow: none;
  }

  .final-decision-text {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Status pill container (older variant, kept for compatibility) */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

/* Dot inside pill (older variant) */
.status-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af; /* default gray */
}

/* SUCCESS */
.status-pill.status-ok {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.status-pill.status-ok .status-pill-dot {
  background: #10b981;
}

/* BAD */
.status-pill.status-bad {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.status-pill.status-bad .status-pill-dot {
  background: #ef4444;
}