/* ============================================================
   JSON Formatter & Validator Styling - Scenic IT Solutions
   ============================================================ */

/* Status Badge */
.json-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.json-status-valid {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  border: 1px solid #27ae60;
}

.json-status-invalid {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border: 1px solid #e74c3c;
}

/* Tree Visualizer */
.json-tree-container {
  background: #07070a;
  border: 1px solid #24242e;
  border-radius: 12px;
  padding: 20px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  color: #dddddd;
  max-height: 450px;
  overflow: auto;
  line-height: 1.6;
}

.json-tree-key {
  color: #0099E5;
  font-weight: 600;
}

.json-tree-string {
  color: #F68B1F;
}

.json-tree-number {
  color: #27ae60;
}

.json-tree-boolean {
  color: #9b51e0;
}

.json-tree-null {
  color: #e74c3c;
}

.json-input-textarea {
  min-height: 250px !important;
  font-family: 'Courier New', Courier, monospace !important;
}

.json-btn-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
}

.json-btn-flex {
  flex: 1 !important;
}

.json-btn-group {
  display: flex !important;
  gap: 8px !important;
}

.json-tree-wrapper {
  margin-top: 25px !important;
}