/* ============================================================
   JWT Debugger & Decoder Styling - Scenic IT Solutions
   ============================================================ */

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

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

.jwt-badge-expired {
  background: rgba(246, 139, 31, 0.15);
  color: #F68B1F;
  border: 1px solid #F68B1F;
}

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

/* Decoded Output Boxes */
.jwt-header-box {
  background: #0d0d12;
  border: 1px solid #e74c3c;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}

.jwt-payload-box {
  background: #0d0d12;
  border: 1px solid #9b51e0;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}

.jwt-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.jwt-title-red { color: #e74c3c; }
.jwt-title-purple { color: #9b51e0; }

.jwt-exp-banner {
  background: rgba(2, 120, 168, 0.1);
  border: 1px solid rgba(2, 120, 168, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  color: #0099E5;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

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

.jwt-banner-hidden {
  display: none !important;
}

.jwt-payload-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.jwt-no-margin-bottom {
  margin-bottom: 0 !important;
}