:root {
  --govuk-colour-blue: #1d70b8;
  --govuk-colour-dark-grey: #0b0c0c;
  --govuk-colour-mid-grey: #b1b4b6;
  --govuk-colour-light-grey: #f3f2f1;
  --govuk-colour-yellow: #ffdd00;
  --govuk-colour-red: #d4351c;
  --govuk-colour-green: #00703c;
}

[x-cloak] { 
  display: none !important; 
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sidebar {
  background: var(--govuk-colour-light-grey);
  border-right: 2px solid var(--govuk-colour-mid-grey);
  height: calc(100vh - 56px);
  overflow-y: auto;
}

.content-editor {
  height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
}

.editor-toolbar {
  padding: 15px;
  background: var(--govuk-colour-light-grey);
  border-bottom: 2px solid var(--govuk-colour-mid-grey);
}

.editor-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.editor-pane, .preview-pane {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.preview-pane {
  background: #fafafa;
  border-left: 1px solid #dee2e6;
}

.file-list {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.file-item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: background-color 0.2s;
}

.file-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.file-item.active {
  background: var(--govuk-colour-blue);
  color: white;
}

.draft-indicator {
  background: var(--govuk-colour-yellow);
  color: var(--govuk-colour-dark-grey);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

.published-indicator {
  background: var(--govuk-colour-green);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

.component-btn {
  margin-right: 5px;
  margin-bottom: 5px;
}

#markdownEditor {
  min-height: 400px;
  font-family: 'Courier New', monospace;
}

/* Preview styles */
.preview-pane h1 { font-size: 2em; margin: 0.67em 0; }
.preview-pane h2 { font-size: 1.5em; margin: 0.75em 0; }
.preview-pane h3 { font-size: 1.17em; margin: 0.83em 0; }
.preview-pane p { margin: 1em 0; }
.preview-pane strong { font-weight: bold; }
.preview-pane em { font-style: italic; }