/**
 * MIGESTI OS — Code IDE Stylesheet (Phase 87)
 * Dedicated full-screen code workspace layout.
 *
 * Architect: Matthew F. Inglima
 * CONFIDENTIAL — All Rights Reserved
 */

/* ── Full-Page IDE Grid Layout ─────────────────────────── */
.code-ide-layout {
  display: grid;
  grid-template-rows: 48px 1fr 280px;
  grid-template-columns: 200px 1fr 280px;
  height: 100vh;
  width: 100vw;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Courier New', 'Fira Code', monospace;
  overflow: hidden;
}

/* ── Topbar ────────────────────────────────────────────── */
.code-ide-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 10;
}
.code-ide-topbar__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-cyan, #00d4ff);
  margin-right: 8px;
  white-space: nowrap;
}
.code-ide-topbar select {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.code-ide-topbar select:focus {
  border-color: rgba(0,212,255,0.5);
}
.code-ide-topbar__spacer {
  flex: 1;
}

/* ── File Tree ─────────────────────────────────────────── */
.code-ide-filetree {
  grid-row: 2;
  grid-column: 1;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  padding: 8px;
  font-size: 12px;
}
.code-ide-filetree__header {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 4px 0 8px;
}

/* ── Editor Area ───────────────────────────────────────── */
.code-ide-editor {
  grid-row: 2;
  grid-column: 2;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── EOMI Coding Engine Panel ──────────────────────────── */
.code-ide-eomi {
  grid-row: 2;
  grid-column: 3;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Output / Bottom Panel ─────────────────────────────── */
.code-ide-output {
  grid-column: 1 / -1;
  grid-row: 3;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 260px;
}

/* ── Resizable Dividers ────────────────────────────────── */
.code-ide-divider-v {
  width: 4px;
  cursor: ew-resize;
  background: transparent;
  grid-row: 2;
  transition: background 0.2s;
  z-index: 5;
}
.code-ide-divider-v:hover {
  background: rgba(0,212,255,0.3);
}
.code-ide-divider-h {
  grid-column: 1 / -1;
  height: 4px;
  cursor: ns-resize;
  background: transparent;
  transition: background 0.2s;
  z-index: 5;
}
.code-ide-divider-h:hover {
  background: rgba(0,212,255,0.3);
}

/* ── IDE Buttons ───────────────────────────────────────── */
.code-ide-btn {
  background: var(--surface-hover);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.code-ide-btn:hover {
  background: rgba(0,212,255,0.15);
  border-color: rgba(0,212,255,0.4);
}

.code-run-btn {
  background: rgba(0,255,136,0.12);
  border: 1px solid rgba(0,255,136,0.4);
  color: var(--accent-green, #00ff88);
  padding: 5px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  transition: all 0.15s;
}
.code-run-btn:hover {
  background: rgba(0,255,136,0.25);
}
.code-run-btn:active {
  transform: scale(0.97);
}

/* ── Output Tabs ───────────────────────────────────────── */
.code-ide-output-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(0,212,255,0.1);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}
.code-ide-output-tab {
  padding: 6px 16px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.code-ide-output-tab:hover {
  color: var(--text-primary);
  background: rgba(0,212,255,0.04);
}
.code-ide-output-tab.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}
.code-ide-output-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.code-ide-output-pane {
  display: none;
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 8px 12px;
}
.code-ide-output-pane.active {
  display: block;
}
#ide-pane-preview {
  padding: 0;
  overflow: hidden;
}

/* ── Terminal Output ───────────────────────────────────── */
.code-output-stdout {
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
}
.code-output-stderr {
  color: var(--accent-red, #ff6b6b);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
}
.code-output-runtime {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 8px;
}

/* ── Preview ───────────────────────────────────────────── */
.code-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}
.code-preview-actions {
  position: absolute;
  top: 4px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 5;
}

/* ── Versions List ─────────────────────────────────────── */
.code-version-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}
.code-version-item__time {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 120px;
}
.code-version-item__msg {
  flex: 1;
  color: var(--text-primary);
}

/* ── Governance Confirm Dialog ─────────────────────────── */
.code-governance-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-secondary);
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 12px;
  padding: 24px;
  z-index: 10001;
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.code-governance-confirm__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-gold);
  margin-bottom: 8px;
}
.code-governance-confirm__msg {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.5;
}
.code-governance-confirm__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.code-governance-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
}

/* ── Fullpage Mode Overrides ───────────────────────────── */
.code-workspace.fullpage-mode {
  width: 100%;
  height: 100%;
  /* Override 3-column/3-row grid so editor-wrapper fills entire area */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.code-workspace.fullpage-mode .code-toolbar,
.code-workspace.fullpage-mode .code-file-tree,
.code-workspace.fullpage-mode .code-eomi-panel,
.code-workspace.fullpage-mode .code-bottom-panel {
  display: none !important;
}
/* EOMI panel is moved to #ide-eomi-panel in fullpage mode, not hidden */

/* Ensure moved EOMI panel fills the IDE grid cell */
#ide-eomi-panel .code-eomi-panel {
  display: flex !important;
  flex-direction: column;
  border-left: none;
  height: 100%;
  flex: 1;
}
.code-workspace.fullpage-mode .code-editor-wrapper {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Monaco Editor Mount ──────────────────────────────── */
.code-editor-mount {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Ensure Monaco's internal container fills the mount */
.code-editor-mount .monaco-editor {
  width: 100% !important;
  height: 100% !important;
}

/* ── Light Mode ────────────────────────────────────────── */
[data-theme="sunrise"] .code-ide-layout {
  background: #EDE8DC;
  color: #1a1a2e;
}
[data-theme="sunrise"] .code-ide-topbar {
  background: #d8d0c0;
  border-bottom-color: rgba(232,160,32,0.3);
}
[data-theme="sunrise"] .code-ide-topbar__title {
  color: #E8A020;
}
[data-theme="sunrise"] .code-ide-topbar select {
  background: #F5F0E8;
  border-color: rgba(232,160,32,0.2);
  color: #1a1a2e;
}
[data-theme="sunrise"] .code-ide-filetree {
  background: #e8e0d0;
  border-right-color: rgba(232,160,32,0.15);
}
[data-theme="sunrise"] .code-ide-editor {
  background: #F5F0E8;
}
[data-theme="sunrise"] .code-ide-eomi {
  background: #ede4d4;
  border-left-color: rgba(232,160,32,0.15);
}
[data-theme="sunrise"] .code-ide-output {
  background: #d8d0c0;
  border-top-color: rgba(232,160,32,0.3);
}
[data-theme="sunrise"] .code-output-stdout {
  color: #191970;
}
[data-theme="sunrise"] .code-ide-output-tab.active {
  color: #E8A020;
  border-bottom-color: #E8A020;
}
[data-theme="sunrise"] .code-ide-divider-v:hover,
[data-theme="sunrise"] .code-ide-divider-h:hover {
  background: rgba(232,160,32,0.3);
}
[data-theme="sunrise"] .code-run-btn {
  color: #228B22;
  border-color: rgba(34,139,34,0.4);
  background: rgba(34,139,34,0.08);
}
[data-theme="sunrise"] .code-ide-btn {
  border-color: rgba(232,160,32,0.2);
  color: #1a1a2e;
}
[data-theme="sunrise"] .code-governance-confirm {
  background: #F5F0E8;
  border-color: rgba(232,160,32,0.5);
}