/* ---- URDF Studio editor (CodeMirror 6) ---- */

/* Editor container fills the panel. The renderer mounts CM6 inside a
   wrapper div that already sets the panel height, so we just need to
   stretch CM6 inside it. */

.cm-editor {
  height: 100%;
  outline: none;
}

.cm-editor .cm-content {
  padding-block: 6px;
}

/* The default fold marker sits right next to the line number; add a bit
   of breathing room so "1▾" doesn't read as a single glyph. */
.cm-editor .cm-foldGutter .cm-gutterElement {
  padding-left: 4px;
  padding-right: 2px;
}

/* CM6 ships scrollbars styled by the browser, which on Chromium dark
   themes show as a thick opaque white bar that crashes the page palette.
   Replace with a slim semi-transparent thumb that fades into the dark
   editor background. Firefox uses scrollbar-color, WebKit uses ::-webkit-
   pseudos — set both. */
.cm-editor .cm-scroller {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--vscode-foreground, #888) 30%, transparent) transparent;
}
.cm-editor .cm-scroller::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.cm-editor .cm-scroller::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--vscode-foreground, #888) 22%, transparent);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.cm-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--vscode-foreground, #888) 40%, transparent);
  background-clip: padding-box;
}
.cm-editor .cm-scroller::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- syntax token colours ----------------------------------------------- */

.cm-urdf-tag {
  color: var(--vscode-symbolIcon-classForeground, #4ec9b0);
  font-weight: 500;
}

.cm-urdf-structural {
  color: var(--vscode-symbolIcon-keywordForeground, #569cd6);
  font-weight: 600;
}

.cm-urdf-xacro {
  color: var(--vscode-symbolIcon-eventForeground, #c586c0);
  font-weight: 600;
}

.cm-urdf-attr {
  color: var(--vscode-symbolIcon-propertyForeground, #9cdcfe);
}

.cm-urdf-value {
  color: var(--vscode-symbolIcon-stringForeground, #ce9178);
}

.cm-urdf-number {
  color: var(--vscode-symbolIcon-numberForeground, #b5cea8);
}

.cm-urdf-comment {
  color: var(--vscode-symbolIcon-commentForeground, var(--vscode-descriptionForeground));
  font-style: italic;
}

.cm-urdf-pi {
  color: var(--vscode-descriptionForeground);
  font-style: italic;
}

.cm-urdf-bracket {
  color: var(--vscode-foreground);
  opacity: 0.7;
}

.cm-urdf-package {
  /* package:// URIs — slight underline so they read as paths */
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.cm-urdf-expr {
  /* ${...} and $(arg ...) xacro expressions */
  color: var(--vscode-symbolIcon-eventForeground, #c586c0);
  background: color-mix(in srgb, var(--vscode-symbolIcon-eventForeground, #c586c0) 14%, transparent);
  border-radius: 2px;
  padding: 0 1px;
}

/* ---- fullscreen / split layouts ----------------------------------------- */

.workspace.layout-source-fullscreen {
  /* Source pane covers the whole workspace, viewport shrinks to a PIP.
     Once .viewport-wrap goes position:absolute it leaves the grid flow,
     so the only remaining child is .side — collapse the grid to a
     single 1fr column instead of relying on column indices. */
  grid-template-columns: 1fr;
  position: relative;
}

.workspace.layout-source-fullscreen .viewport-wrap {
  position: absolute;
  /* The PIP must sit *inside* the workspace's visual gutter — match the
     source panel's own internal padding so the overlay shares the same
     breathing room top/bottom/sides instead of hugging the screen edge
     while the editor content keeps its own padding. */
  right: 28px;
  bottom: 28px;
  width: 300px;
  height: 210px;
  z-index: 5;
  border: 1px solid var(--vscode-panel-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--vscode-editor-background);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  /* Subtle outline so the PIP reads as a distinct panel against the
     editor's dark canvas. */
  outline: 1px solid color-mix(in srgb, var(--vscode-foreground) 8%, transparent);
}

/* Drop the hud label inside the PIP — it duplicates info that lives in
   the source pane status bar and clutters a small overlay. */
.workspace.layout-source-fullscreen .hud {
  display: none;
}

.workspace.layout-split .side {
  /* Equal-width 50/50 split */
}

.workspace.layout-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Source panel chrome */

#panel-source {
  padding: 0;
}

#panel-source.active {
  display: flex;
  flex-direction: column;
}

#panel-source .source-toolbar {
  display: flex;
  gap: 6px;
  /* Extra bottom padding so the buttons never butt up against the
     toolbar's separator — that produced a visually-doubled hairline
     (button border + toolbar border) at the right edge in earlier
     iterations. */
  padding: 7px 10px 8px;
  /* One divider only — between the toolbar and the editor below it.
     The toolbar's own background tint already provides the visual
     separation from anything above. */
  border-bottom: 1px solid var(--vscode-panel-border);
  font-size: 11.5px;
  align-items: center;
  background: var(--vscode-editorGroupHeader-tabsBackground, color-mix(in srgb, var(--vscode-sideBar-background) 92%, var(--vscode-foreground) 8%));
  flex-wrap: nowrap;
  min-height: 30px;
  /* CM6 renders a 1px gutter divider at its top edge in some themes;
     pull the editor up by 1px so the two never stack into a double
     hairline. */
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

#panel-source .source-toolbar .source-meta {
  flex: 1 1 auto;
  color: var(--vscode-descriptionForeground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#panel-source .source-toolbar button {
  /* Compact toolbar buttons that share a line with the file-meta text.
     Height matches the meta line-height so left and right sides of the
     toolbar share a baseline. */
  height: 22px;
  padding: 0 8px;
  font-size: 11.5px;
  border-radius: 4px;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#panel-source .source-toolbar button.active {
  background: var(--vscode-button-secondaryBackground, var(--vscode-toolbar-hoverBackground));
  border-color: var(--vscode-focusBorder);
  color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
}

#panel-source .editor-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#panel-source .editor-status {
  padding: 5px 10px;
  border-top: 1px solid var(--vscode-panel-border);
  font-size: 11px;
  color: var(--vscode-descriptionForeground);
  display: flex;
  gap: 14px;
  align-items: center;
  background: color-mix(in srgb, var(--vscode-sideBar-background) 80%, transparent);
  font-variant-numeric: tabular-nums;
}

#panel-source .editor-status .status-dirty {
  color: var(--vscode-editorWarning-foreground, #cca700);
}

#panel-source .editor-status .status-error {
  color: var(--vscode-editorError-foreground, #f48771);
}

/* ---- Checks panel: health score + rule grouping ------------------------- */

.checks-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--vscode-panel-border);
}

.health-score {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.health-score.health-good { color: var(--vscode-testing-iconPassed, #4caf50); }
.health-score.health-warn { color: var(--vscode-editorWarning-foreground, #cca700); }
.health-score.health-poor { color: var(--vscode-editorError-foreground, #f48771); }

.checks-counts {
  display: flex;
  gap: 10px;
  font-size: 11px;
}

.checks-counts .count-pill {
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--vscode-badge-background, rgba(255,255,255,0.08));
  color: var(--vscode-badge-foreground, var(--vscode-foreground));
}

.checks-group {
  border-bottom: 1px solid var(--vscode-panel-border);
}

.checks-group-header {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px;
  background: var(--vscode-sideBarSectionHeader-background, transparent);
  font-size: 11px;
  font-weight: 600;
  color: var(--vscode-foreground);
  cursor: pointer;
  user-select: none;
}

.checks-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checks-group-item {
  padding: 4px 10px 4px 28px;
  border-top: 1px solid var(--vscode-panel-border);
  font-size: 11.5px;
  cursor: pointer;
  position: relative;
}

.checks-group-item:hover {
  background: var(--vscode-list-hoverBackground);
}

.checks-group-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.checks-group-item.severity-error::before { background: var(--vscode-editorError-foreground, #f48771); }
.checks-group-item.severity-warning::before { background: var(--vscode-editorWarning-foreground, #cca700); }
.checks-group-item.severity-info::before { background: var(--vscode-editorInfo-foreground, #75beff); }

.checks-group-item .check-line {
  color: var(--vscode-descriptionForeground);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}