/* ======================================================
   DEVELOPER MODE STYLES
====================================================== */

/* Dev mode activation key combo indicator */
.dev-mode-indicator {
  position: fixed; top: var(--nav-height); left: 0; right: 0;
  background: linear-gradient(90deg, #1a1a2e, #16213e, #0f3460);
  color: #00d4ff; padding: 0.4rem 1rem;
  font-family: 'Courier New', monospace; font-size: 0.78rem; font-weight: 700;
  z-index: 5000; display: none; align-items: center; justify-content: space-between;
  letter-spacing: 0.03em; border-bottom: 2px solid #00d4ff;
}
body.dev-mode .dev-mode-indicator { display: flex; }
.dev-indicator-left { display: flex; align-items: center; gap: 0.75rem; }
.dev-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00ff88; animation: devPulse 1.5s ease-in-out infinite;
}
@keyframes devPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.dev-indicator-right { display: flex; gap: 0.5rem; }
.dev-indicator-btn {
  background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.3);
  color: #00d4ff; padding: 0.2rem 0.6rem; border-radius: 4px;
  font-size: 0.7rem; font-weight: 700; cursor: pointer;
  font-family: 'Courier New', monospace; transition: all 0.2s;
}
.dev-indicator-btn:hover { background: rgba(0,212,255,0.25); }
.dev-indicator-btn.active { background: #00d4ff; color: #1a1a2e; }

/* Dev panel (slide from right) */
.dev-panel {
  position: fixed; top: 0; right: -420px; width: 400px; height: 100vh;
  background: #1a1a2e; color: #c0c0c0; z-index: 9500;
  transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; box-shadow: -8px 0 40px rgba(0,0,0,0.5);
  font-family: 'Courier New', monospace; font-size: 0.82rem;
  display: flex; flex-direction: column;
}
.dev-panel.open { right: 0; }
.dev-panel-header {
  padding: 1.25rem; background: #0f3460; color: #00d4ff;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid #00d4ff; flex-shrink: 0;
}
.dev-panel-header h3 { font-size: 1rem; font-weight: 900; letter-spacing: 0.08em; }
.dev-panel-close {
  background: none; border: 1px solid rgba(0,212,255,0.3); color: #00d4ff;
  width: 30px; height: 30px; border-radius: 4px; cursor: pointer;
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.dev-panel-close:hover { background: #00d4ff; color: #1a1a2e; }
.dev-panel-body { padding: 1rem; flex: 1; overflow-y: auto; }
.dev-section { margin-bottom: 1.5rem; }
.dev-section-title {
  color: #00d4ff; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 0.75rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid #2a2a4a;
}
.dev-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0; border-bottom: 1px solid #1e1e3e;
}
.dev-row label { color: #aaa; font-size: 0.78rem; }
.dev-toggle {
  position: relative; width: 36px; height: 20px;
  background: #333; border-radius: 10px; cursor: pointer;
  transition: background 0.2s; border: none; flex-shrink: 0;
}
.dev-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #666; transition: all 0.2s;
}
.dev-toggle.on { background: #00d4ff; }
.dev-toggle.on::after { left: 18px; background: white; }
.dev-input {
  background: #111; border: 1px solid #333; color: #e0e0e0;
  padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.78rem;
  font-family: 'Courier New', monospace; width: 120px; transition: border-color 0.2s;
}
.dev-input:focus { outline: none; border-color: #00d4ff; }
.dev-color-input {
  width: 32px; height: 24px; border: 1px solid #333;
  border-radius: 4px; cursor: pointer; background: none; padding: 0;
}
.dev-btn {
  background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.3);
  color: #00d4ff; padding: 0.4rem 0.8rem; border-radius: 4px;
  font-size: 0.75rem; font-weight: 700; cursor: pointer;
  font-family: 'Courier New', monospace; transition: all 0.2s;
  white-space: nowrap;
}
.dev-btn:hover { background: rgba(0,212,255,0.25); }
.dev-btn.danger { border-color: rgba(255,60,60,0.4); color: #ff4444; background: rgba(255,60,60,0.08); }
.dev-btn.danger:hover { background: rgba(255,60,60,0.2); }
.dev-btn.success { border-color: rgba(0,255,136,0.4); color: #00ff88; background: rgba(0,255,136,0.08); }
.dev-btn.success:hover { background: rgba(0,255,136,0.2); }
.dev-select {
  background: #111; border: 1px solid #333; color: #e0e0e0;
  padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.78rem;
  font-family: 'Courier New', monospace;
}
.dev-select:focus { outline: none; border-color: #00d4ff; }
.dev-element-info {
  background: #111; border: 1px solid #2a2a4a; border-radius: 6px;
  padding: 0.75rem; margin-bottom: 0.75rem; font-size: 0.75rem;
}
.dev-element-info .tag { color: #ff6b9d; }
.dev-element-info .class { color: #00d4ff; }
.dev-element-info .id { color: #ffd700; }
.dev-element-info .dim { color: #666; }
.dev-log {
  background: #0a0a1a; border: 1px solid #1e1e3e; border-radius: 6px;
  padding: 0.5rem; max-height: 200px; overflow-y: auto;
  font-size: 0.72rem; line-height: 1.6;
}
.dev-log-entry { padding: 0.15rem 0; border-bottom: 1px solid #111; }
.dev-log-entry .time { color: #555; }
.dev-log-entry .action { color: #00ff88; }
.dev-log-entry .target { color: #00d4ff; }

/* Dev mode element highlights */
body.dev-mode.dev-inspect * { cursor: crosshair !important; }
.dev-highlight {
  outline: 2px dashed #00d4ff !important; outline-offset: 2px;
  position: relative;
}
.dev-selected {
  outline: 2px solid #ff6b9d !important; outline-offset: 2px;
}
/* Draggable elements in dev mode */
.dev-draggable {
  cursor: move !important; user-select: none;
  outline: 2px dashed rgba(0,255,136,0.5) !important; outline-offset: 1px;
}
.dev-dragging {
  opacity: 0.7; z-index: 9000; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
/* Dev grid overlay */
.dev-grid-overlay {
  position: fixed; inset: 0; z-index: 4999; pointer-events: none;
  display: none;
  background-image:
    linear-gradient(rgba(0,212,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
}
body.dev-mode .dev-grid-overlay.visible { display: block; }
/* Dev element label tooltip */
.dev-tooltip {
  position: fixed; padding: 0.3rem 0.6rem; border-radius: 4px;
  background: #1a1a2e; color: #00d4ff; font-family: 'Courier New', monospace;
  font-size: 0.7rem; font-weight: 700; z-index: 9999;
  pointer-events: none; white-space: nowrap; display: none;
  border: 1px solid #00d4ff; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* ===== Dev: Created Shapes ===== */
.dev-shape {
  position: absolute;
  z-index: 100;
  cursor: move;
  user-select: none;
  min-width: 16px;
  min-height: 16px;
  transition: box-shadow 0.15s;
}
.dev-shape:hover { box-shadow: 0 0 0 2px #00d4ff, 0 4px 20px rgba(0,212,255,0.2); }
.dev-shape.dev-selected { box-shadow: 0 0 0 2px #ff6b9d, 0 4px 20px rgba(255,107,157,0.2); }
.dev-shape-box {
  background: rgba(0,212,255,0.12);
  border: 2px solid #00d4ff;
  border-radius: 8px;
}
.dev-shape-circle {
  background: rgba(255,107,157,0.12);
  border: 2px solid #ff6b9d;
  border-radius: 50%;
}
.dev-shape-text {
  background: rgba(255,215,0,0.08);
  border: 1px dashed #ffd700;
  border-radius: 4px;
  padding: 0.75rem;
  color: var(--text, #1a1a1a);
  font-size: 1rem;
  min-width: 80px;
  cursor: move;
  outline: none;
}
.dev-shape-text:focus { border-color: #00d4ff; }
.dev-shape-divider {
  height: 4px;
  background: linear-gradient(90deg, #00d4ff, #ff6b9d, #ffd700);
  border-radius: 2px;
}
.dev-shape-image {
  border: 2px dashed #00ff88;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,255,136,0.05);
  color: #00ff88;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  overflow: hidden;
}
.dev-shape-image img { width: 100%; height: 100%; object-fit: cover; }
/* Resize handle for shapes */
.dev-resize-handle {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: #00d4ff;
  border: 2px solid #1a1a2e;
  border-radius: 2px;
  cursor: nwse-resize;
  z-index: 10;
}
.dev-shape:hover .dev-resize-handle { opacity: 1; }
/* Shape color badge on hover */
.dev-shape-label {
  position: absolute;
  top: -20px;
  left: 0;
  background: #1a1a2e;
  color: #00d4ff;
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.dev-shape:hover .dev-shape-label { opacity: 1; }
/* Inline CSS Editor */
.dev-css-editor {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  background: #0a0a1a;
  border: 1px solid #333;
  color: #00ff88;
  padding: 0.5rem;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  border-radius: 4px;
  resize: vertical;
  line-height: 1.5;
}
.dev-css-editor:focus { outline: none; border-color: #00d4ff; }
/* Shape creator buttons */
.dev-shape-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
  background: rgba(0,212,255,0.06);
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #c0c0c0;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.dev-shape-btn:hover { background: rgba(0,212,255,0.15); border-color: #00d4ff; color: #00d4ff; }
.dev-shape-preview { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; }
.dev-shape-preview-box {
  display: inline-block;
  width: 22px; height: 16px;
  border: 2px solid #00d4ff;
  border-radius: 3px;
  background: rgba(0,212,255,0.15);
}
.dev-shape-preview-circle {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid #ff6b9d;
  border-radius: 50%;
  background: rgba(255,107,157,0.15);
}
.dev-shape-preview-text {
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffd700;
}
.dev-shape-preview-divider {
  display: inline-block;
  width: 22px; height: 3px;
  background: linear-gradient(90deg, #00d4ff, #ff6b9d);
  border-radius: 2px;
}
.dev-shape-preview-image {
  display: inline-block;
  width: 20px; height: 14px;
  border: 1.5px dashed #00ff88;
  border-radius: 2px;
}
/* Shape properties popover */
.dev-shape-props {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.5rem; padding-top: 0.5rem;
  border-top: 1px solid #2a2a4a;
}

/* Dev mode: make body shift for indicator bar */
body.dev-mode main { margin-top: 36px; }
body.dev-mode nav { top: 36px; }

/* Dev panel responsive */
@media (max-width: 480px) {
  .dev-panel { width: 100%; right: -100%; }
}