/* Dracula Theme */
:root {
  --bg: #282a36;
  --bg-light: #313442;
  --bg-lighter: #3b3e52;
  --fg: #f8f8f2;
  --comment: #6272a4;
  --cyan: #8be9fd;
  --green: #50fa7b;
  --orange: #ffb86c;
  --pink: #ff79c6;
  --purple: #bd93f9;
  --red: #ff5555;
  --yellow: #f1fa8c;
  --gcode-g: #98C379;
  --gcode-m: #61AFEF;
  --gcode-coord: #E5C07B;
  --gcode-fs: #D19A66;
  --sidebar-w: 260px;
  --topbar-h: 40px;
  --statusbar-h: 24px;
  --tab-h: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
  background: var(--bg);
  color: var(--fg);
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Top Bar */
#topbar {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  background: var(--bg-light);
  border-bottom: 1px solid var(--bg-lighter);
  padding: 0 8px;
  gap: 8px;
  flex-shrink: 0;
}
.tb-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--purple);
}
.tb-spacer { flex: 1; }
.tb-btn {
  background: none;
  border: 1px solid var(--bg-lighter);
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.tb-btn:hover { background: var(--bg-lighter); }
.tb-search {
  background: var(--bg);
  border: 1px solid var(--bg-lighter);
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  width: 200px;
  outline: none;
}
.tb-search:focus { border-color: var(--purple); }

/* Main layout */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
#sidebar {
  width: var(--sidebar-w);
  background: var(--bg-light);
  border-right: 1px solid var(--bg-lighter);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--bg-lighter);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--comment);
  gap: 4px;
}
.sidebar-header span:first-child { flex: 1; }
.sidebar-header button {
  background: var(--bg-lighter);
  border: none;
  color: var(--fg);
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.sidebar-header button:hover { background: var(--purple); }

#file-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 13px;
}
.tree-row {
  /* wrapper for each item + children */
}
.tree-item {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
}
.tree-item:hover { background: var(--bg-lighter); }
.tree-item.active { background: var(--bg-lighter); color: var(--purple); }
.tree-spacer { flex-shrink: 0; display: inline-block; }
.tree-arrow { width: 14px; font-size: 10px; text-align: center; flex-shrink: 0; cursor: pointer; color: var(--comment); }
.tree-icon { margin-right: 4px; font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.tree-name { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tree-dot {
  margin-left: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tree-dot.published { background: var(--green); }
.tree-children { padding-left: 0; }

/* Action buttons — hidden until hover */
.tree-actions {
  display: none;
  gap: 1px;
  margin-left: auto;
  flex-shrink: 0;
  padding-right: 4px;
}
.tree-item:hover .tree-actions { display: flex; }
.tree-act-btn {
  background: none;
  border: none;
  color: var(--comment);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1;
}
.tree-act-btn:hover { background: var(--bg); color: var(--fg); }
.tree-act-del:hover { color: var(--red) !important; }

/* Inline input for create/rename */
.tree-inline-input {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--purple);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  outline: none;
  flex: 1;
  min-width: 80px;
  font-family: inherit;
}

/* File type icon colors */
.tree-item.folder > .tree-icon { color: var(--cyan); }
.tree-item.file > .tree-icon { color: var(--comment); }
.tree-item.file.md > .tree-icon { color: var(--green); }
.tree-item.file.nc > .tree-icon, .tree-item.file.gcode > .tree-icon { color: var(--orange); }

/* Editor */
#editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tab-bar {
  height: var(--tab-h);
  background: var(--bg);
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--bg-lighter);
  flex-shrink: 0;
}
.tab {
  padding: 4px 16px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid var(--bg-lighter);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--comment);
}
.tab.active { background: var(--bg-light); color: var(--fg); border-bottom: 2px solid var(--purple); }
.tab .tab-close { font-size: 14px; opacity: 0.5; cursor: pointer; }
.tab .tab-close:hover { opacity: 1; color: var(--red); }
.tab .tab-dirty::after { content: ' \2022'; color: var(--orange); }
#cm-editor { flex: 1; overflow: auto; }
#cm-editor .cm-editor { height: 100%; }
#cm-editor .cm-editor .cm-scroller { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 14px; }
#md-preview {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg);
  display: none;
}
#md-preview h1, #md-preview h2, #md-preview h3 { color: var(--purple); margin: 16px 0 8px; }
#md-preview h1 { font-size: 1.6em; border-bottom: 1px solid var(--bg-lighter); padding-bottom: 8px; }
#md-preview h2 { font-size: 1.3em; }
#md-preview p { margin: 8px 0; line-height: 1.6; }
#md-preview code { background: var(--bg-lighter); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
#md-preview pre { background: var(--bg-light); padding: 12px; border-radius: 6px; overflow-x: auto; }
#md-preview pre code { background: none; padding: 0; }
#md-preview ul, #md-preview ol { margin: 8px 0; padding-left: 24px; }
#md-preview blockquote { border-left: 3px solid var(--purple); margin: 8px 0; padding: 4px 16px; color: var(--comment); }

/* Calculator Panel */
#calc-panel {
  width: 320px;
  background: var(--bg-light);
  border-left: 1px solid var(--bg-lighter);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.2s, margin 0.2s;
}
#calc-panel.calc-hidden { width: 0; border: none; overflow: hidden; }
.calc-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--bg-lighter);
  font-weight: 600;
  font-size: 13px;
}
.calc-header span { flex: 1; }
.calc-header button {
  background: none; border: none; color: var(--fg);
  font-size: 18px; cursor: pointer;
}
#calc-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: 13px;
}

/* Status Bar */
#statusbar {
  height: var(--statusbar-h);
  background: var(--purple);
  color: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  flex-shrink: 0;
}
#statusbar #status-text { flex: 1; }
#statusbar #status-position { opacity: 0.8; }

/* Context Menu */
#context-menu {
  position: fixed;
  background: var(--bg-lighter);
  border: 1px solid var(--bg-lighter);
  border-radius: 6px;
  padding: 4px 0;
  z-index: 1000;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.context-hidden { display: none; }
#context-menu div {
  padding: 6px 16px;
  cursor: pointer;
  font-size: 13px;
}
#context-menu div:hover { background: var(--purple); }
#context-menu hr {
  border: none;
  border-top: 1px solid var(--bg);
  margin: 4px 0;
}

/* Diff Modal */
.modal-hidden { display: none; }
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); z-index: 999;
}
.modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-light);
  border-radius: 8px;
  z-index: 1000;
  width: 90vw;
  max-width: 1000px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.diff-content { max-width: 1100px; }
.modal-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-lighter);
  font-weight: 600;
}
.modal-header span { flex: 1; }
.modal-header button {
  background: none; border: none; color: var(--fg);
  font-size: 20px; cursor: pointer;
}
.diff-selectors {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
}
.diff-selectors select {
  flex: 1;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg-lighter);
  padding: 6px;
  border-radius: 4px;
}
.diff-selectors button {
  background: var(--purple);
  color: var(--bg);
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.diff-vs { color: var(--comment); font-weight: 600; }
#diff-output {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
}
.diff-line { white-space: pre-wrap; padding: 0 8px; }
.diff-add { background: rgba(80, 250, 123, 0.15); color: var(--green); }
.diff-del { background: rgba(255, 85, 85, 0.15); color: var(--red); }
.diff-eq { color: var(--comment); }
.diff-ln { color: var(--comment); margin-right: 8px; user-select: none; }

/* Search Results Dropdown */
#search-results {
  position: fixed;
  top: var(--topbar-h);
  right: 200px;
  background: var(--bg-lighter);
  border: 1px solid var(--bg-lighter);
  border-radius: 0 0 6px 6px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  min-width: 300px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.search-hidden { display: none; }
.search-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--bg);
}
.search-item:hover { background: var(--purple); }
.search-item .search-path { color: var(--comment); font-size: 11px; }
.search-item .search-match { color: var(--yellow); }

/* Mobile */
@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  #sidebar.mobile-open { transform: translateX(0); }
  #calc-panel {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    z-index: 100;
    width: 100vw;
  }
  #calc-panel.calc-hidden { display: none; }
  .tb-search { width: 100px; }
  #search-results { right: 10px; left: 10px; }
  .diff-content { width: 95vw; }
}