html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #272822;
  color: #f0f0f0;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
}

#react-entry-point,
#_dash-app-content {
  height: 100%;
  min-height: 100vh;
}

.page {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* Compact header — always on top, never covered by Ace */
.header {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 12px;
  background: #000;
  color: #fff;
  box-sizing: border-box;
  z-index: 10;
  position: relative;
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.header h1 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.app-version {
  font-size: 0.65rem;
  font-weight: 400;
  color: #888;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  user-select: all;
}

.status-badge {
  font-size: 0.65rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 1px 7px;
  border-radius: 3px;
  color: #888;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(70vw, 48rem);
}
.status-ok { background: #1e3d1e; color: #8d8; }
.status-nok { background: #3d1e1e; color: #f88; }

.header a {
  display: flex;
  align-items: center;
  opacity: 0.9;
}

.header a:hover {
  opacity: 1;
}

.header img {
  height: 22px;
  width: 22px;
}

/* Main column: XML editor (flex) + log (fixed fraction) */
.main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* Outer shells keep layout; Ace mounts inside and fills them */
.xml-editor {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Collapsible log panel */
.log-panel {
  flex: 0 0 auto;
  border-top: 1px solid #333;
  min-height: 0;
}
.log-panel > summary {
  cursor: pointer;
  padding: 4px 12px;
  font-size: 0.7rem;
  color: #aaa;
  user-select: none;
}
.log-panel[open] .log-editor {
  height: 20vh;
  min-height: 100px;
  max-height: 30vh;
  position: relative;
  border-top: 1px solid #222;
}
.log-panel:not([open]) .log-editor {
  display: none;
}

/* Only the Ace mount fills its shell — not the shell itself */
.xml-editor > .ace_editor,
.log-editor > .ace_editor,
#xml-ace.ace_editor,
#log-ace.ace_editor {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Full-line error marker */
.ace_error-line {
  position: absolute;
  background: rgba(255, 80, 80, 0.22);
  z-index: 20;
}