/* Phase XIV — Developer Tools editor UI */
.calc-dev {
  --dev-bg: #0f172a;
  --dev-panel: #1e293b;
  --dev-border: #334155;
  --dev-text: #e2e8f0;
  --dev-muted: #94a3b8;
  --dev-accent: #38bdf8;
  background: var(--dev-bg);
  color: var(--dev-text);
  border: 1px solid var(--dev-border);
  border-radius: 12px;
  padding: 1rem;
  position: relative;
}

.calc-dev.theme-light {
  --dev-bg: #f8fafc;
  --dev-panel: #ffffff;
  --dev-border: #cbd5e1;
  --dev-text: #0f172a;
  --dev-muted: #64748b;
  --dev-accent: #0284c7;
}

.calc-dev.is-dragover {
  outline: 2px dashed var(--dev-accent);
}

.calc-dev.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  border-radius: 0;
  overflow: auto;
}

.dev-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.dev-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

.dev-options .form-group {
  margin: 0;
  min-width: 140px;
}

.dev-options label,
.dev-pane-head,
.dev-cron label,
.dev-color label,
.dev-regex label {
  color: var(--dev-muted);
  font-size: 0.85rem;
}

.dev-options select,
.dev-options input,
.dev-regex input,
.dev-cron input,
.dev-color input[type="text"],
.dev-color input[type="number"],
.jwt-encode input,
.jwt-encode textarea {
  background: var(--dev-panel);
  color: var(--dev-text);
  border: 1px solid var(--dev-border);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  width: 100%;
}

.dev-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .dev-split {
    grid-template-columns: 1fr;
  }
}

.dev-pane {
  background: var(--dev-panel);
  border: 1px solid var(--dev-border);
  border-radius: 10px;
  padding: 0.5rem;
  min-width: 0;
}

.dev-pane.full,
.dev-pane.full-out {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

.dev-pane-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.dev-textarea {
  width: 100%;
  min-height: 280px;
  background: transparent;
  color: var(--dev-text);
  border: 0;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre;
  tab-size: 2;
}

.calc-dev.no-wrap .dev-textarea {
  white-space: pre;
  overflow-x: auto;
}

.calc-dev:not(.no-wrap) .dev-textarea {
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  color: var(--dev-muted);
  font-size: 0.9rem;
}

.dev-status .is-error,
.dev-details .is-error {
  color: #f87171;
}

.dev-details {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--dev-panel);
  border-radius: 8px;
  border: 1px solid var(--dev-border);
}

.dev-pre {
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
}

.dev-toast {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: var(--dev-accent);
  color: #0f172a;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
}

.dev-swatch {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--dev-border);
  align-self: end;
}

.dev-tree {
  max-height: 280px;
  overflow: auto;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
}

.dev-tree ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

.tree-key {
  color: var(--dev-accent);
}

.tree-val {
  color: #86efac;
}

.developer-tool-detail .dev-tool-panel {
  margin: 1.25rem 0 2rem;
}

.type-developer {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #fff;
}

.calc-dev .checkbox-label {
  color: var(--dev-muted);
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.calc-dev .btn-outline {
  border-color: var(--dev-border);
  color: var(--dev-text);
}

.jwt-encode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .jwt-encode {
    grid-template-columns: 1fr;
  }
}