/* ============================================================
   File: C:\EVOLVE_OS\site\devsuite-sandbox.css
   EVOLVE OS — DevSuite Sandbox Inspector Styles (Cinematic Edition)
   Build Friday, 22 May 2026 — 11:05 BST
   ============================================================ */

/* Card container */
.devsuite-sandbox-card {
  padding: 18px;
  margin-top: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.25);
}

/* Sandbox entry container */
.sandbox-entry {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.sandbox-entry:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Header row */
.sandbox-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Tag styles */
.sandbox-entry-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.tag-ok {
  background: rgba(0, 255, 140, 0.15);
  color: #00ff8c;
  border: 1px solid rgba(0, 255, 140, 0.35);
}

.tag-missing {
  background: rgba(255, 80, 80, 0.15);
  color: #ff5050;
  border: 1px solid rgba(255, 80, 80, 0.35);
}

/* JSON state block */
.sandbox-entry-state {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #d8f0ff;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Buttons */
#evsuite-sandbox-refresh,
#evsuite-sandbox-clear {
  margin-top: 6px;
}

.evolve-btn-danger {
  background: rgba(255, 60, 60, 0.25);
  border: 1px solid rgba(255, 60, 60, 0.45);
  color: #ff6b6b;
}

.evolve-btn-danger:hover {
  background: rgba(255, 60, 60, 0.35);
  border-color: rgba(255, 60, 60, 0.65);
}

/* List container */
.sandbox-list {
  margin-top: 12px;
}
/* ============================================================
   Collapsible JSON Viewer (Cinematic Edition)
   ============================================================ */

.sandbox-entry-collapsible {
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  margin-bottom: 6px;
  transition: opacity 0.25s ease;
}

.sandbox-entry-collapsible:hover {
  opacity: 0.8;
}

.sandbox-chevron {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.4));
}

.sandbox-chevron.open {
  transform: rotate(90deg);
}

.sandbox-entry-state-wrapper {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.sandbox-entry-state-wrapper.open {
  max-height: 500px; /* Enough for most JSON dumps */
}