/* Command Builder Widget - Purple/Gray Terminal Style */
/* Matches MkDocs Material code block styling exactly */

/* Container */
.cb-container {
  margin: 1.5rem 0;
}

/* Code block - matches MkDocs .language-* .highlight */
.cb-code-block {
  position: relative;
  border-radius: 0.1rem;
  overflow: hidden;
}

.cb-code-block pre {
  margin: 0;
  display: flow-root;
  line-height: 1.4;
  position: relative;
}

/* Let font-size inherit from .md-typeset code (0.85em) - don't override */
.cb-code-block .cb-code {
  --cb-grid-col: 14ch;
  --cb-grid-gap: 1.25rem;
  display: block;
  padding: 0.7720588235em 1.1764705882em;
  font-family: var(--cb-native-code-font-family, var(--md-code-font-family, "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace));
  font-size: var(--cb-native-code-font-size, 0.85em);
  line-height: var(--cb-native-code-line-height, 1.4);
  color: #888;
  background: var(--md-code-bg-color, #1e1e1e);
  direction: ltr;
  box-shadow: none;
  overflow: auto;
  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
  scrollbar-width: thin;
}

/* Section header - purple */
.cb-header {
  color: #8315F9;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

.cb-header:first-child {
  margin-top: 0;
}

/* Selectors row */
.cb-selectors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cb-selectors-row--before-toggle {
  margin-bottom: 1rem;
}

.cb-model-type-grid,
.cb-model-size-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--cb-grid-col));
  column-gap: var(--cb-grid-gap);
  row-gap: 0.5rem;
  justify-content: start;
}

.cb-model-type-grid {
  margin-bottom: 0.45rem;
}

.cb-tracker-type-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--cb-grid-col));
  column-gap: var(--cb-grid-gap);
  row-gap: 0.5rem;
  justify-content: start;
}

.cb-model-size-grid .cb-selector {
  justify-self: start;
}

.cb-tracker-type-grid .cb-selector {
  justify-self: start;
}

.cb-model-size-grid--before-toggle {
  margin-bottom: 1rem;
}

/* Selector button [ label ] */
.cb-selector {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  color: #888;
  font: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}

.cb-selector:hover {
  color: #8315F9;
}

.cb-selector--active {
  color: #8315F9;
}

.cb-selector--nudge-left {
  margin-left: -1ch;
}

/* Grid row for label = value */
.cb-row {
  --cb-row-gap: 0.75rem;
  --cb-equals-col: 2ch;
  --cb-check-col: var(--cb-grid-col);
  --cb-check-gap: var(--cb-grid-gap);
  --cb-anchor-2: calc(var(--cb-check-col) + var(--cb-check-gap));
  --cb-anchor-3: calc((2 * var(--cb-check-col)) + (2 * var(--cb-check-gap)));
  --cb-label-col: 28ch;
  display: grid;
  grid-template-columns: var(--cb-label-col) var(--cb-equals-col) minmax(24ch, 1fr);
  align-items: center;
  gap: var(--cb-row-gap);
  margin-bottom: 0.35rem;
}

.cb-row--anchor-2 {
  --cb-label-col: calc(
    var(--cb-anchor-2) - var(--cb-equals-col) - (2 * var(--cb-row-gap))
  );
}

.cb-row--anchor-3 {
  --cb-label-col: calc(
    var(--cb-anchor-3) - var(--cb-equals-col) - (2 * var(--cb-row-gap))
  );
}

.cb-label {
  color: #888;
}

.cb-equals {
  color: #888;
  text-align: center;
}

/* Indented content */
.cb-indent {
  padding-left: 1.5rem;
}

.cb-option-indent {
  padding-left: 4ch;
}

/* Bracketed editable value containers */
.cb-value-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #888;
  min-width: 0;
}

.cb-value-wrap--numeric {
  gap: 0.2rem;
}

.cb-value-wrap--text {
  --cb-text-span-width: calc((2 * var(--cb-grid-col)) + var(--cb-grid-gap));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: rgba(128, 128, 128, 0.14);
  border-radius: 0.2rem;
  gap: 0.15rem;
  padding: 0.08rem 0.4rem;
  width: var(--cb-text-span-width);
  max-width: 100%;
}

.cb-value-wrap--text .cb-bracket {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.cb-bracket {
  color: #888;
  transition: color 0.15s ease;
}

.cb-value-wrap:hover .cb-bracket,
.cb-value-wrap:focus-within .cb-bracket {
  color: #8315F9;
}

/* Text input */
.cb-text-input {
  background: transparent;
  border: none;
  color: #888;
  font: inherit;
  padding: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  transition: color 0.15s ease;
}

.cb-text-input:focus {
  outline: none;
  color: #8315F9;
}

.cb-text-input:hover {
  color: #8315F9;
}

.cb-text-input::placeholder {
  color: #555;
}

.cb-text-input:focus::placeholder {
  color: transparent;
}

/* Numeric controls */
.cb-numeric-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.cb-num-btn {
  background: transparent;
  border: none;
  color: #888;
  font: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.cb-num-btn:hover {
  color: #8315F9;
}

.cb-num-input {
  background: transparent;
  border: none;
  color: #888;
  font: inherit;
  text-align: center;
  width: 7ch;
  padding: 0;
  transition: color 0.15s ease;
}

.cb-num-input:hover {
  color: #8315F9;
}

.cb-num-input:focus {
  outline: none;
  color: #8315F9;
}

.cb-num-input.cb-modified {
  color: #8315F9;
}

/* Selectors inline */
.cb-selectors {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Checkboxes */
.cb-checkboxes {
  display: grid;
  grid-template-columns: repeat(4, var(--cb-grid-col));
  column-gap: var(--cb-grid-gap);
  row-gap: 0.5rem;
  margin-bottom: 0.5rem;
  justify-content: start;
}

.cb-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: #888;
  transition: color 0.15s ease;
  margin-bottom: 0.25rem;
}

.cb-checkbox:hover {
  color: #8315F9;
}

.cb-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cb-check-marker {
  color: inherit;
}

.cb-check-label {
  color: inherit;
}

.cb-checkbox--active {
  color: #8315F9;
}

.cb-checkbox--active .cb-check-marker,
.cb-checkbox--active .cb-check-label {
  color: #8315F9;
}

.cb-option-toggle {
  margin-top: 0.15rem;
  margin-bottom: 0.65rem;
}

/* Options container */
.cb-options {
  margin-bottom: 0.6rem;
}

/* Errors */
.cb-errors {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #333;
  display: none;
}

.cb-error {
  display: block;
  color: #888;
}

/* Command output block - matches native MkDocs code block */
.cb-output {
  position: relative;
  margin-top: 1rem;
  border-radius: 0.1rem;
}

.cb-output pre {
  margin: 0;
  display: flow-root;
  line-height: 1.4;
  position: relative;
}

/* Let font-size inherit from .md-typeset pre>code - don't override */
.cb-output pre > code {
  display: block;
  padding: 0.7720588235em 1.1764705882em;
  font-family: var(--cb-native-code-font-family, var(--md-code-font-family, "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace));
  font-size: var(--cb-native-code-font-size, 0.85em);
  line-height: var(--cb-native-code-line-height, 1.4);
  color: var(--md-code-fg-color, #e6e6e6);
  background: var(--md-code-bg-color, #1e1e1e);
  direction: ltr;
  box-shadow: none;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
  scrollbar-width: thin;
  /* Reset box-decoration */
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  border-radius: 0.1rem;
}

/* Force generated copy UI to use native measured dimensions */
#command-builder-widget .cb-output .md-code__nav {
  padding: var(--cb-native-copy-nav-padding, 0.2rem);
  right: var(--cb-native-copy-nav-right, 0.25em);
  top: var(--cb-native-copy-nav-top, 0.25em);
  border-radius: var(--cb-native-copy-nav-border-radius, 0.1rem);
}

#command-builder-widget .cb-output .md-code__button {
  width: var(--cb-native-copy-button-width, 1.5em);
  height: var(--cb-native-copy-button-height, 1.5em);
  font-size: var(--cb-native-copy-button-font-size, inherit);
}

/* Responsive */
@media (max-width: 700px) {
  .cb-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .cb-equals {
    display: none;
  }

  .cb-label::after {
    content: " =";
  }

  .cb-text-input,
  .cb-num-input {
    max-width: 100%;
  }

  .cb-value-wrap--text {
    width: 100%;
  }

  .cb-checkboxes {
    grid-template-columns: repeat(2, minmax(12ch, 1fr));
  }

  .cb-model-type-grid,
  .cb-model-size-grid,
  .cb-tracker-type-grid {
    grid-template-columns: repeat(2, minmax(12ch, 1fr));
  }

  .cb-model-type-grid .cb-selector,
  .cb-tracker-type-grid .cb-selector {
    grid-column: auto !important;
  }

  .cb-selector--nudge-left {
    margin-left: 0;
  }
}