/* ── Tab background coloring ──────────────────────────────────────────────── */

.workspace-tab-header.color-tab-colored.color-tab-colored {
  background-color: var(--tab-bg-color);
  transition: background-color 0.2s ease;
}

.workspace-tab-header.color-tab-colored.is-active .workspace-tab-header-inner-title {
  font-weight: bold;
}

/* Slightly darken on hover so the colored tab still has hover feedback */
.workspace-tab-header.color-tab-colored:hover {
  filter: brightness(0.92);
}

/* Active (focused) colored tab – keep color but add a subtle indicator */
.workspace-tab-header.color-tab-colored.is-active.color-tab-colored {
  background-color: var(--tab-bg-color);
  filter: brightness(0.88);
}

/* ── Context-menu color swatch ────────────────────────────────────────────── */

.menu-item .color-tab-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--swatch-color, #ccc);
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: auto;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Make the menu item use flex so the swatch sits on the right */
.menu-item {
  display: flex;
  align-items: center;
}

/* ── Settings page ────────────────────────────────────────────────────────── */

.color-tab-settings-desc {
  color: var(--text-muted);
  margin-bottom: 1em;
}

.color-tab-settings-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}