/* ===========================================================
   JWT INSPECTOR STYLES
=========================================================== */
.jwt-root .jwt-body { gap: 4px; }
.jwt-input-pane { flex: 0 0 35%; min-width: 260px; }
.jwt-output-pane { flex: 1; min-width: 0; }
.jwt-len { font-family: "Courier New", monospace; font-size: 10px; color: #cce4ff; font-weight: normal; }
.jwt-status { font-weight: normal; }
.jwt-status-pill {
  display: inline-block; padding: 1px 8px;
  font-size: 10px; font-family: Verdana, sans-serif;
  border-radius: 8px; color: #fff;
  background: #808080;
}
.jwt-status-pill.good { background: #008000; }
.jwt-status-pill.bad  { background: #a00000; }

/* The input area: textarea over a colored highlight overlay */
.jwt-input-wrap {
  position: relative; flex: 1; background: #ffffff;
  overflow: hidden; min-height: 0;
}
.jwt-textarea, .jwt-highlight {
  position: absolute; inset: 0;
  width: 100%; height: 100%; box-sizing: border-box;
  margin: 0; padding: 6px 8px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px; line-height: 1.4;
  white-space: pre-wrap; word-wrap: break-word; word-break: break-all;
  overflow: auto;
  border: none; outline: none;
}
.jwt-highlight { color: transparent; pointer-events: none; z-index: 1; }
.jwt-textarea { background: transparent; color: #000; caret-color: #000080; resize: none; z-index: 2; }
.jwt-textarea:focus { background: rgba(255,255,232,0.4); }
.jwt-highlight .jwt-part { padding: 0 1px; border-radius: 2px; color: transparent; }
.jwt-highlight .jwt-part-h { background: #ffd0d0; }   /* header — red */
.jwt-highlight .jwt-part-p { background: #d0e8ff; }   /* payload — blue */
.jwt-highlight .jwt-part-s { background: #d0ffd0; }   /* signature — green */
.jwt-highlight .jwt-dot { color: transparent; background: #ffff80; padding: 0 1px; }

/* Decoded output */
.jwt-output { flex: 1; overflow: auto; background: #ffffff; padding: 8px; min-height: 0; }
.jwt-section {
  margin-bottom: 10px; padding: 8px;
  background: #f8f8f8; border: 1px solid #d0d0d0;
}
.jwt-section h3 {
  font-family: Verdana, sans-serif; font-size: 12px;
  margin-bottom: 6px; padding: 2px 6px;
  color: #ffffff;
}
.jwt-section-h h3 { background: #c04040; }
.jwt-section-p h3 { background: #4080c0; }
.jwt-section-s h3 { background: #40a040; }
.jwt-section-w h3 { background: #806000; }

.jwt-json {
  background: #ffffff; border: 1px inset #c0c0c0;
  padding: 6px 8px; font-family: "Courier New", monospace;
  font-size: 12px; color: #000080;
  white-space: pre-wrap; max-height: 200px; overflow: auto;
}
.jwt-claims { margin-top: 6px; }
.jwt-claim {
  display: flex; gap: 8px; padding: 2px 4px;
  align-items: baseline; font-size: 11px;
  font-family: Verdana, sans-serif;
  border-bottom: 1px dotted #d0d0d0;
}
.jwt-claim:last-child { border-bottom: none; }
.jwt-key {
  flex: 0 0 90px; font-weight: bold; color: #000080;
  font-family: "Courier New", monospace;
}
.jwt-val {
  flex: 1; word-break: break-all;
  font-family: "Courier New", monospace; color: #000;
}
.jwt-info {
  flex: 0 0 200px; color: #606060; font-style: italic;
  font-size: 10px;
}
.jwt-time { color: #606060; font-style: italic; font-size: 10px; }

.jwt-verify { padding: 6px 8px; margin-top: 4px; font-family: Verdana, sans-serif; font-size: 11px; }
.jwt-verify.good { background: #d4f4d4; color: #004000; }
.jwt-verify.bad  { background: #f4d4d4; color: #500000; font-weight: bold; }
.jwt-verify.info { background: #ffffe1; color: #606000; }

.jwt-msg { padding: 4px 8px; margin-top: 2px; font-family: Verdana, sans-serif; font-size: 11px; }
.jwt-msg-danger { background: #f4d4d4; color: #500000; font-weight: bold; }
.jwt-msg-warn   { background: #fff4d0; color: #604000; }
.jwt-msg-info   { background: #d4e4ff; color: #002060; }

.jwt-empty { padding: 20px; text-align: center; color: #808080; font-style: italic; font-family: Verdana, sans-serif; }
.jwt-empty.jwt-err { color: #a00000; font-style: normal; }
.jwt-err { color: #a00000; padding: 6px; font-family: "Courier New", monospace; font-size: 11px; }
.jwt-warn { color: #806000; padding: 6px; font-family: Verdana, sans-serif; font-size: 11px; }