/* ============================================================
   EVOLVE DevSuite Theme — Build Friday, 22 May 2026 — 03:39 BST
   Neon‑Glass Aesthetic — EVOLVE OS v3.2.0
   ============================================================ */

/* ============================================================
   1. ROOT CONTAINER
   ============================================================ */
#evolve-devsuite-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #e5e5ff;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

/* ============================================================
   2. SECTION TITLES
   ============================================================ */
.evolve-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #cfcfff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(120,120,255,0.35);
}

/* ============================================================
   3. CARD BLOCKS
   ============================================================ */
.evolve-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.evolve-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.evolve-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}

.evolve-btn-danger {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.35);
}

.evolve-btn-danger:hover {
  background: rgba(255,80,80,0.25);
  border-color: rgba(255,80,80,0.55);
}

/* ============================================================
   5. HEALTH SCORE
   ============================================================ */
#evolve-health-score {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(80,80,255,0.25), rgba(40,40,120,0.25));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 20px rgba(120,80,255,0.25);
}

.evolve-health-good { color: #7bffb2; }
.evolve-health-warn { color: #ffe680; }
.evolve-health-bad  { color: #ff8080; }

/* ============================================================
   6. FILE TREE
   ============================================================ */
#evolve-file-tree {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}

.evolve-file-item {
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-size: 13px;
}

.evolve-file-item:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

.evolve-file-item-missing {
  color: #ff8080;
  border-color: rgba(255,80,80,0.35);
}

/* ============================================================
   7. DIAGNOSTICS
   ============================================================ */
.evolve-diagnostic-item {
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
  font-size: 13px;
}

.evolve-diagnostic-item.warn {
  border-color: rgba(255,200,80,0.35);
  background: rgba(255,200,80,0.1);
}

.evolve-diagnostic-item.error {
  border-color: rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.1);
}

/* ============================================================
   8. SNAPSHOT VIEWER
   ============================================================ */
.evolve-snapshot-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.evolve-snapshot-item:hover {
  background: rgba(255,255,255,0.12);
}

.evolve-snapshot-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.evolve-snapshot-time {
  font-size: 11px;
  opacity: 0.7;
}

/* ============================================================
   9. RECOVERY
   ============================================================ */
.evolve-recovery-block {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}

.evolve-recovery-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.evolve-recovery-desc {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 10px;
}

/* ============================================================
   10. DEPLOYMENT (Rollback System)
   ============================================================ */
.evolve-deploy-block {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}

.evolve-deploy-status {
  font-size: 13px;
  margin-bottom: 8px;
  opacity: 0.85;
}

.evolve-deploy-btn {
  margin-top: 8px;
}

/* ============================================================
   11. SYNC
   ============================================================ */
.evolve-sync-block {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}

.evolve-sync-status {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 8px;
}

/* ============================================================
   12. LOGS
   ============================================================ */
.evolve-log-item {
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  opacity: 0.85;
}

.evolve-log-item:last-child {
  border-bottom: none;
}

/* ============================================================
   13. SPACING HELPERS
   ============================================================ */
.evolve-space-sm { margin-bottom: 8px; }
.evolve-space-md { margin-bottom: 14px; }
.evolve-space-lg { margin-bottom: 20px; }
.devsuite-card--cdic {
  border-left: 3px solid #5cf2ff;
}

.cdic-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}

.cdic-label {
  opacity: 0.7;
}

.cdic-value {
  font-weight: 500;
}

.cdic-status-ok {
  color: #6dff9c;
}

.cdic-status-warn {
  color: #ffb86c;
}

.cdic-note {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.75;
}
/* CDIC Enhancements */
.devsuite-card--cdic {
  border-left: 3px solid #5cf2ff;
  animation: cdicFadeIn 0.6s ease;
}

@keyframes cdicFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cdic-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}

.cdic-label {
  opacity: 0.7;
}

.cdic-value {
  font-weight: 500;
}

.cdic-status-ok {
  color: #6dff9c;
}

.cdic-status-warn {
  color: #ffb86c;
}

.cdic-status-stale {
  color: #ff6b6b;
  font-weight: 600;
}

.cdic-buttons {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.cdic-btn {
  background: #0b0f2a;
  border: 1px solid #5cf2ff;
  color: #5cf2ff;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.2s ease;
}

.cdic-btn:hover {
  background: #5cf2ff;
  color: #000;
}

.cdic-note {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.75;
}